A design system in a box. hip-ui.tngl.io/docs/introduction
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

input polish

+223 -124
+19 -19
apps/docs/src/components/empty-state/index.tsx
··· 12 12 const styles = stylex.create({ 13 13 emptyState: { 14 14 display: "grid", 15 - gridTemplateColumns: { 16 - ":is([data-empty-state-size=sm])": { 17 - ":has([data-empty-state-actions])": "min-content 1fr max-content", 18 - default: "min-content 1fr", 19 - }, 20 - }, 21 15 gridTemplateAreas: { 22 16 ":is([data-empty-state-size=md],[data-empty-state-size=lg])": { 23 17 default: ` ··· 43 37 `, 44 38 }, 45 39 }, 40 + gridTemplateColumns: { 41 + ":is([data-empty-state-size=sm])": { 42 + ":has([data-empty-state-actions])": "min-content 1fr max-content", 43 + default: "min-content 1fr", 44 + }, 45 + }, 46 46 alignItems: "center", 47 + fontFamily: fontFamily["sans"], 47 48 justifyItems: { 48 49 ":is([data-empty-state-size=md],[data-empty-state-size=lg])": "center", 49 50 ":is([data-empty-state-size=sm])": "start", 50 51 }, 51 - fontFamily: fontFamily["sans"], 52 - textAlign: "center", 53 52 columnGap: { 54 53 ":is([data-empty-state-size=sm])": spacing["4"], 55 54 }, 56 - rowGap: { 57 - ":is([data-empty-state-size=lg])": spacing["6"], 58 - ":is([data-empty-state-size=md])": spacing["4"], 59 - ":is([data-empty-state-size=sm])": spacing["2"], 60 - }, 55 + textAlign: "center", 61 56 "--empty-state-image-size": { 62 57 ":is([data-empty-state-size=lg])": spacing["20"], 63 58 ":is([data-empty-state-size=md])": spacing["14"], 64 59 ":is([data-empty-state-size=sm])": spacing["10"], 65 60 }, 61 + rowGap: { 62 + ":is([data-empty-state-size=lg])": spacing["6"], 63 + ":is([data-empty-state-size=md])": spacing["4"], 64 + ":is([data-empty-state-size=sm])": spacing["2"], 65 + }, 66 66 }, 67 67 image: { 68 68 gridArea: "image", 69 + height: "var(--empty-state-image-size)", 69 70 width: "var(--empty-state-image-size)", 70 - height: "var(--empty-state-image-size)", 71 + display: "flex", 71 72 objectFit: "contain", 72 - display: "flex", 73 73 alignItems: "center", 74 74 justifyContent: "center", 75 75 }, ··· 80 80 ":is([data-empty-state-size='md'] *)": fontSize["xl"], 81 81 ":is([data-empty-state-size='sm'] *)": fontSize["lg"], 82 82 }, 83 - fontWeight: fontWeight["semibold"], 84 83 margin: 0, 84 + fontWeight: fontWeight["semibold"], 85 85 }, 86 86 description: { 87 87 gridArea: "description", 88 88 fontSize: fontSize["sm"], 89 - fontWeight: fontWeight["normal"], 90 89 margin: 0, 90 + fontWeight: fontWeight["normal"], 91 91 maxWidth: { 92 92 ":is([data-empty-state-size=lg])": "480px", 93 93 ":is([data-empty-state-size=md])": "400px", ··· 97 97 actions: { 98 98 gridArea: "actions", 99 99 display: "flex", 100 - flexDirection: "row", 101 100 gap: spacing["2"], 101 + flexDirection: "row", 102 102 alignItems: "center", 103 - justifyContent: "center", 104 103 flexWrap: "wrap", 104 + justifyContent: "center", 105 105 106 106 paddingLeft: { 107 107 ":is([data-empty-state-size=sm] *)": spacing["4"],
+64 -36
apps/docs/src/components/theme/useInputStyles.ts
··· 27 27 color: ui.textDim, 28 28 flexShrink: 0, 29 29 height: "100%", 30 - paddingLeft: { ":first-child": spacing["2.5"] }, 31 - paddingRight: { 32 - ":first-child": spacing["2"], 33 - ":last-child": spacing["2.5"], 34 - }, 35 30 36 31 gap: spacing["2"], 37 32 alignItems: "center", ··· 44 39 pointerEvents: "none", 45 40 height: spacing["4"], 46 41 width: spacing["4"], 42 + }, 43 + }, 44 + addonSm: { 45 + paddingLeft: { ":first-child": spacing["1.5"] }, 46 + paddingRight: { 47 + ":first-child": spacing["1"], 48 + ":last-child": spacing["1.5"], 49 + }, 50 + }, 51 + addonMd: { 52 + paddingLeft: { ":first-child": spacing["2.5"] }, 53 + paddingRight: { 54 + ":first-child": spacing["2"], 55 + ":last-child": spacing["2.5"], 56 + }, 57 + }, 58 + addonLg: { 59 + paddingLeft: { ":first-child": spacing["3"] }, 60 + paddingRight: { 61 + ":first-child": spacing["2"], 62 + ":last-child": spacing["3"], 47 63 }, 48 64 }, 49 65 validationIcon: { ··· 294 310 color: successColor.text1, 295 311 }, 296 312 297 - inputSize: (size: Size) => ({ 298 - fontSize: 299 - size === "sm" 300 - ? fontSize["xs"] 301 - : size === "md" 302 - ? fontSize["sm"] 303 - : fontSize["base"], 313 + inputSizeSm: { 314 + fontSize: fontSize["xs"], 304 315 paddingLeft: { 305 - ":first-child": 306 - size === "sm" 307 - ? spacing["1"] 308 - : size === "md" 309 - ? spacing["2"] 310 - : spacing["3"], 316 + ":first-child": spacing["2"], 311 317 }, 312 - paddingRight: 313 - size === "sm" 314 - ? spacing["1"] 315 - : size === "md" 316 - ? spacing["2"] 317 - : spacing["3"], 318 - }), 319 - wrapperSize: (size: Size) => ({ 320 - height: 321 - size === "sm" 322 - ? spacing["6"] 323 - : size === "md" 324 - ? spacing["8"] 325 - : spacing["10"], 326 - }), 318 + paddingRight: spacing["1"], 319 + }, 320 + inputSizeMd: { 321 + fontSize: fontSize["sm"], 322 + paddingLeft: { 323 + ":first-child": spacing["2"], 324 + }, 325 + paddingRight: spacing["2"], 326 + }, 327 + inputSizeLg: { 328 + fontSize: fontSize["base"], 329 + paddingLeft: { 330 + ":first-child": spacing["3"], 331 + }, 332 + paddingRight: spacing["3"], 333 + }, 334 + wrapperSizeSm: { 335 + height: spacing["6"], 336 + }, 337 + wrapperSizeMd: { 338 + height: spacing["8"], 339 + }, 340 + wrapperSizeLg: { 341 + height: spacing["10"], 342 + }, 327 343 }); 328 344 329 345 export function useInputStyles({ ··· 360 376 validationState === "warning" && [styles.tertiaryWarning], 361 377 validationState === "valid" && [styles.tertiaryValid], 362 378 ], 363 - styles.wrapperSize(size), 379 + size === "sm" && styles.wrapperSizeSm, 380 + size === "md" && styles.wrapperSizeMd, 381 + size === "lg" && styles.wrapperSizeLg, 364 382 ], 365 - input: [styles.input, styles.inputSize(size)], 366 - addon: styles.addon as unknown as stylex.StyleXStyles, 383 + input: [ 384 + styles.input, 385 + size === "sm" && styles.inputSizeSm, 386 + size === "md" && styles.inputSizeMd, 387 + size === "lg" && styles.inputSizeLg, 388 + ], 389 + addon: [ 390 + styles.addon, 391 + size === "sm" && styles.addonSm, 392 + size === "md" && styles.addonMd, 393 + size === "lg" && styles.addonLg, 394 + ], 367 395 validationIcon: [ 368 396 styles.validationIcon, 369 397 validationState === "invalid" && [styles.invalidIcon],
+44 -4
apps/docs/src/examples/text-field/sizes.tsx
··· 1 1 import { Flex } from "@/components/flex"; 2 2 import { TextField } from "@/components/text-field"; 3 + import { CheckCircle } from "lucide-react"; 3 4 4 5 export function TextFieldSizes() { 5 6 return ( 6 - <Flex direction="column" gap="4"> 7 - <TextField label="Small" placeholder="Small size" size="sm" /> 8 - <TextField label="Medium" placeholder="Medium size" size="md" /> 9 - <TextField label="Large" placeholder="Large size" size="lg" /> 7 + <Flex direction="column" gap="6"> 8 + <Flex direction="column" gap="2"> 9 + <TextField 10 + label="Small" 11 + placeholder="Small size" 12 + size="sm" 13 + suffix={<CheckCircle />} 14 + /> 15 + <TextField 16 + aria-label="Small" 17 + placeholder="Small size" 18 + size="sm" 19 + prefix={<CheckCircle />} 20 + /> 21 + </Flex> 22 + <Flex direction="column" gap="2"> 23 + <TextField 24 + label="Medium" 25 + placeholder="Medium size" 26 + size="md" 27 + suffix={<CheckCircle />} 28 + /> 29 + <TextField 30 + aria-label="Medium" 31 + placeholder="Medium size" 32 + size="md" 33 + prefix={<CheckCircle />} 34 + /> 35 + </Flex> 36 + <Flex direction="column" gap="2"> 37 + <TextField 38 + label="Large" 39 + placeholder="Large size" 40 + size="lg" 41 + suffix={<CheckCircle />} 42 + /> 43 + <TextField 44 + aria-label="Large" 45 + placeholder="Large size" 46 + size="lg" 47 + prefix={<CheckCircle />} 48 + /> 49 + </Flex> 10 50 </Flex> 11 51 ); 12 52 }
+6 -6
apps/docs/stylex.css
··· 84 84 @property --x-width { syntax: "*"; inherits: false;} 85 85 @property --x-paddingLeft { syntax: "*"; inherits: false;} 86 86 @property --x---items-per-row { syntax: "*"; inherits: false;} 87 - @property --x-fontSize { syntax: "*"; inherits: false;} 88 - @property --x-1gfbyet { syntax: "*"; inherits: false;} 89 - @property --x-paddingRight { syntax: "*"; inherits: false;} 90 87 @property --x-height { syntax: "*"; inherits: false;} 91 88 @property --x-transform { syntax: "*"; inherits: false;} 92 89 @property --x-backgroundColor { syntax: "*"; inherits: false;} ··· 816 813 .xhycywm:not(#\#):not(#\#):not(#\#){font-family:var(--x9eavc5)} 817 814 .x9wccx5:not(#\#):not(#\#):not(#\#){font-size:.95em} 818 815 .x1qlqyl8:not(#\#):not(#\#):not(#\#){font-size:inherit} 819 - .xdmh292:not(#\#):not(#\#):not(#\#){font-size:var(--x-fontSize)} 820 816 .x1vden:not(#\#):not(#\#):not(#\#){font-size:var(--x17lnkj2)} 821 817 .x1y844x8:not(#\#):not(#\#):not(#\#){font-size:var(--x1hevvyd)} 822 818 .x12va9g9:not(#\#):not(#\#):not(#\#){font-size:var(--x1lstm7v)} ··· 1316 1312 .x1hlhdeh:not(#\#):not(#\#):not(#\#):not(#\#){padding-left:var(--xyoqvup)} 1317 1313 .x1xpa7k:not(#\#):not(#\#):not(#\#):not(#\#){padding-right:0} 1318 1314 .x1u8e7yt:not(#\#):not(#\#):not(#\#):not(#\#){padding-right:var(--card-x-padding)} 1319 - .xwsd3xy:not(#\#):not(#\#):not(#\#):not(#\#){padding-right:var(--x-paddingRight)} 1320 1315 .xzt4wlk:not(#\#):not(#\#):not(#\#):not(#\#){padding-right:var(--x109877l)} 1321 1316 .x1lp5gly:not(#\#):not(#\#):not(#\#):not(#\#){padding-right:var(--x1a1riub)} 1322 1317 .x1ufczr9:not(#\#):not(#\#):not(#\#):not(#\#){padding-right:var(--x1do95gr)} ··· 1623 1618 .x5djnb4:has(svg:only-child):not(#\#):not(#\#):not(#\#):not(#\#){width:var(--xyoqvup)} 1624 1619 .x1buj52v:first-child:not(#\#):not(#\#):not(#\#):not(#\#){border-top-left-radius:var(--x1o51v3i)} 1625 1620 .x1nzaapa:first-child:not(#\#):not(#\#):not(#\#):not(#\#){border-top-right-radius:var(--x1o51v3i)} 1626 - .xok9p14:first-child:not(#\#):not(#\#):not(#\#):not(#\#){padding-left:var(--x-1gfbyet)} 1621 + .x1l904qm:first-child:not(#\#):not(#\#):not(#\#):not(#\#){padding-left:var(--x1a1riub)} 1627 1622 .x1jkz7iv:first-child:not(#\#):not(#\#):not(#\#):not(#\#){padding-left:var(--x1bnlq1y)} 1623 + .x1by7681:first-child:not(#\#):not(#\#):not(#\#):not(#\#){padding-left:var(--x1llymyc)} 1628 1624 .x5sub40:first-child:not(#\#):not(#\#):not(#\#):not(#\#){padding-left:var(--xmuc480)} 1625 + .x1mmj0bo:first-child:not(#\#):not(#\#):not(#\#):not(#\#){padding-left:var(--xsow7ju)} 1626 + .x13u8uvr:first-child:not(#\#):not(#\#):not(#\#):not(#\#){padding-right:var(--x1plbop)} 1629 1627 .x12ix96l:first-child:not(#\#):not(#\#):not(#\#):not(#\#){padding-right:var(--xsow7ju)} 1630 1628 .xzc7y64:first-child:not(#\#):not(#\#):not(#\#):not(#\#){padding-top:var(--card-y-padding)} 1631 1629 .x1jtp6tc:first-child:not(#\#):not(#\#):not(#\#):not(#\#){padding-top:var(--xgvn2um)} 1632 1630 .xmys6wu:last-child:not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-left-radius:var(--x1o51v3i)} 1633 1631 .x1502yzn:last-child:not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-right-radius:var(--x1o51v3i)} 1634 1632 .xmampw0:last-child:not(#\#):not(#\#):not(#\#):not(#\#){padding-bottom:var(--card-y-padding)} 1633 + .xwtmqz1:last-child:not(#\#):not(#\#):not(#\#):not(#\#){padding-right:var(--x1a1riub)} 1634 + .x15xh87z:last-child:not(#\#):not(#\#):not(#\#):not(#\#){padding-right:var(--x1llymyc)} 1635 1635 .xjaxm57:last-child:not(#\#):not(#\#):not(#\#):not(#\#){padding-right:var(--xmuc480)} 1636 1636 .xq6kpti:last-child:not(#\#):not(#\#):not(#\#):not(#\#){padding-right:var(--xsow7ju)} 1637 1637 @supports (corner-shape: squircle){.x1cocqi3.x1cocqi3:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){border-radius:var(--x1bwjc12)}}
+26 -23
packages/hip-ui/src/components/empty-state/index.tsx
··· 11 11 12 12 const styles = stylex.create({ 13 13 emptyState: { 14 - display: "grid", 14 + "--empty-state-image-size": { 15 + ":is([data-empty-state-size=lg])": spacing["20"], 16 + ":is([data-empty-state-size=md])": spacing["14"], 17 + ":is([data-empty-state-size=sm])": spacing["10"], 18 + }, 15 19 gridTemplateAreas: { 20 + // eslint-disable-next-line @stylexjs/valid-styles 16 21 ":is([data-empty-state-size=md],[data-empty-state-size=lg])": { 17 22 default: ` 18 23 "image" ··· 26 31 "actions" 27 32 `, 28 33 }, 34 + // eslint-disable-next-line @stylexjs/valid-styles 29 35 ":is([data-empty-state-size=sm])": { 30 36 default: ` 31 37 "image title" ··· 37 43 `, 38 44 }, 39 45 }, 46 + alignItems: "center", 47 + columnGap: { 48 + ":is([data-empty-state-size=sm])": spacing["4"], 49 + }, 50 + display: "grid", 51 + fontFamily: fontFamily["sans"], 40 52 gridTemplateColumns: { 53 + // eslint-disable-next-line @stylexjs/valid-styles 41 54 ":is([data-empty-state-size=sm])": { 42 - ":has([data-empty-state-actions])": "min-content 1fr max-content", 43 55 default: "min-content 1fr", 56 + ":has([data-empty-state-actions])": "min-content 1fr max-content", 44 57 }, 45 58 }, 46 - alignItems: "center", 47 - fontFamily: fontFamily["sans"], 48 59 justifyItems: { 49 60 ":is([data-empty-state-size=md],[data-empty-state-size=lg])": "center", 50 61 ":is([data-empty-state-size=sm])": "start", 51 62 }, 52 - columnGap: { 53 - ":is([data-empty-state-size=sm])": spacing["4"], 54 - }, 55 - textAlign: "center", 56 - "--empty-state-image-size": { 57 - ":is([data-empty-state-size=lg])": spacing["20"], 58 - ":is([data-empty-state-size=md])": spacing["14"], 59 - ":is([data-empty-state-size=sm])": spacing["10"], 60 - }, 61 63 rowGap: { 62 64 ":is([data-empty-state-size=lg])": spacing["6"], 63 65 ":is([data-empty-state-size=md])": spacing["4"], 64 66 ":is([data-empty-state-size=sm])": spacing["2"], 65 67 }, 68 + textAlign: "center", 66 69 }, 67 70 image: { 68 71 gridArea: "image", 69 - height: "var(--empty-state-image-size)", 70 - width: "var(--empty-state-image-size)", 72 + alignItems: "center", 71 73 display: "flex", 74 + justifyContent: "center", 72 75 objectFit: "contain", 73 - alignItems: "center", 74 - justifyContent: "center", 76 + height: "var(--empty-state-image-size)", 77 + width: "var(--empty-state-image-size)", 75 78 }, 76 79 title: { 77 80 gridArea: "title", 81 + margin: 0, 78 82 fontSize: { 79 83 ":is([data-empty-state-size='lg'] *)": fontSize["2xl"], 80 84 ":is([data-empty-state-size='md'] *)": fontSize["xl"], 81 85 ":is([data-empty-state-size='sm'] *)": fontSize["lg"], 82 86 }, 83 - margin: 0, 84 87 fontWeight: fontWeight["semibold"], 85 88 }, 86 89 description: { 87 90 gridArea: "description", 88 - fontSize: fontSize["sm"], 89 91 margin: 0, 92 + fontSize: fontSize["sm"], 90 93 fontWeight: fontWeight["normal"], 91 94 maxWidth: { 92 95 ":is([data-empty-state-size=lg])": "480px", ··· 96 99 }, 97 100 actions: { 98 101 gridArea: "actions", 99 - display: "flex", 100 102 gap: spacing["2"], 101 - flexDirection: "row", 102 103 alignItems: "center", 104 + display: "flex", 105 + flexDirection: "row", 103 106 flexWrap: "wrap", 104 107 justifyContent: "center", 105 108 ··· 169 172 }; 170 173 171 174 export interface EmptyStateTitleProps 172 - extends StyleXComponentProps<React.ComponentProps<"h2">> {} 175 + extends StyleXComponentProps<React.ComponentProps<"div">> {} 173 176 174 177 export const EmptyStateTitle = ({ style, ...props }: EmptyStateTitleProps) => { 175 - return <h2 {...props} {...stylex.props(styles.title, ui.text, style)} />; 178 + return <div {...props} {...stylex.props(styles.title, ui.text, style)} />; 176 179 }; 177 180 178 181 export interface EmptyStateDescriptionProps
+64 -36
packages/hip-ui/src/components/theme/useInputStyles.ts
··· 27 27 color: ui.textDim, 28 28 flexShrink: 0, 29 29 height: "100%", 30 - paddingLeft: { ":first-child": spacing["2.5"] }, 31 - paddingRight: { 32 - ":first-child": spacing["2"], 33 - ":last-child": spacing["2.5"], 34 - }, 35 30 36 31 gap: spacing["2"], 37 32 alignItems: "center", ··· 44 39 pointerEvents: "none", 45 40 height: spacing["4"], 46 41 width: spacing["4"], 42 + }, 43 + }, 44 + addonSm: { 45 + paddingLeft: { ":first-child": spacing["1.5"] }, 46 + paddingRight: { 47 + ":first-child": spacing["1"], 48 + ":last-child": spacing["1.5"], 49 + }, 50 + }, 51 + addonMd: { 52 + paddingLeft: { ":first-child": spacing["2.5"] }, 53 + paddingRight: { 54 + ":first-child": spacing["2"], 55 + ":last-child": spacing["2.5"], 56 + }, 57 + }, 58 + addonLg: { 59 + paddingLeft: { ":first-child": spacing["3"] }, 60 + paddingRight: { 61 + ":first-child": spacing["2"], 62 + ":last-child": spacing["3"], 47 63 }, 48 64 }, 49 65 validationIcon: { ··· 294 310 color: successColor.text1, 295 311 }, 296 312 297 - inputSize: (size: Size) => ({ 298 - fontSize: 299 - size === "sm" 300 - ? fontSize["xs"] 301 - : size === "md" 302 - ? fontSize["sm"] 303 - : fontSize["base"], 313 + inputSizeSm: { 314 + fontSize: fontSize["xs"], 304 315 paddingLeft: { 305 - ":first-child": 306 - size === "sm" 307 - ? spacing["1"] 308 - : size === "md" 309 - ? spacing["2"] 310 - : spacing["3"], 316 + ":first-child": spacing["2"], 311 317 }, 312 - paddingRight: 313 - size === "sm" 314 - ? spacing["1"] 315 - : size === "md" 316 - ? spacing["2"] 317 - : spacing["3"], 318 - }), 319 - wrapperSize: (size: Size) => ({ 320 - height: 321 - size === "sm" 322 - ? spacing["6"] 323 - : size === "md" 324 - ? spacing["8"] 325 - : spacing["10"], 326 - }), 318 + paddingRight: spacing["1"], 319 + }, 320 + inputSizeMd: { 321 + fontSize: fontSize["sm"], 322 + paddingLeft: { 323 + ":first-child": spacing["2"], 324 + }, 325 + paddingRight: spacing["2"], 326 + }, 327 + inputSizeLg: { 328 + fontSize: fontSize["base"], 329 + paddingLeft: { 330 + ":first-child": spacing["3"], 331 + }, 332 + paddingRight: spacing["3"], 333 + }, 334 + wrapperSizeSm: { 335 + height: spacing["6"], 336 + }, 337 + wrapperSizeMd: { 338 + height: spacing["8"], 339 + }, 340 + wrapperSizeLg: { 341 + height: spacing["10"], 342 + }, 327 343 }); 328 344 329 345 export function useInputStyles({ ··· 360 376 validationState === "warning" && [styles.tertiaryWarning], 361 377 validationState === "valid" && [styles.tertiaryValid], 362 378 ], 363 - styles.wrapperSize(size), 379 + size === "sm" && styles.wrapperSizeSm, 380 + size === "md" && styles.wrapperSizeMd, 381 + size === "lg" && styles.wrapperSizeLg, 364 382 ], 365 - input: [styles.input, styles.inputSize(size)], 366 - addon: styles.addon as unknown as stylex.StyleXStyles, 383 + input: [ 384 + styles.input, 385 + size === "sm" && styles.inputSizeSm, 386 + size === "md" && styles.inputSizeMd, 387 + size === "lg" && styles.inputSizeLg, 388 + ], 389 + addon: [ 390 + styles.addon, 391 + size === "sm" && styles.addonSm, 392 + size === "md" && styles.addonMd, 393 + size === "lg" && styles.addonLg, 394 + ] as unknown as stylex.StyleXStyles, 367 395 validationIcon: [ 368 396 styles.validationIcon, 369 397 validationState === "invalid" && [styles.invalidIcon],