+1 -1

TODO.md

reviewed

··· 21 21 - [ ] Grid List 22 22 - [ ] Virtual Grid 23 23 - [ ] Waterfall Layout 24 24 - - [ ] Navigation Menu 24 24 + - [ ] Navigation Menu

+6 -1

apps/docs/src/components/alert-dialog/index.tsx

reviewed

··· 21 21 import { Button } from "../button"; 22 22 import { useHaptics } from "../haptics"; 23 23 import { IconButton } from "../icon-button"; 24 24 - import { gap, horizontalSpace, size as sizeSpace, verticalSpace } from "../theme/semantic-spacing.stylex"; 24 24 + import { 25 25 + gap, 26 26 + horizontalSpace, 27 27 + size as sizeSpace, 28 28 + verticalSpace, 29 29 + } from "../theme/semantic-spacing.stylex"; 25 30 import { fontSize, typeramp } from "../theme/typography.stylex"; 26 31 import { useDialogStyles } from "../theme/useDialogStyles"; 27 32

+6 -1

apps/docs/src/components/alert/index.tsx

reviewed

··· 29 29 success, 30 30 warning, 31 31 } from "../theme/semantic-color.stylex"; 32 32 - import { gap, horizontalSpace, size as sizeSpace, verticalSpace } from "../theme/semantic-spacing.stylex"; 32 32 + import { 33 33 + gap, 34 34 + horizontalSpace, 35 35 + size as sizeSpace, 36 36 + verticalSpace, 37 37 + } from "../theme/semantic-spacing.stylex"; 33 38 import { fontFamily } from "../theme/typography.stylex"; 34 39 import { Text } from "../typography/text"; 35 40

+6 -1

apps/docs/src/components/badge/index.tsx

reviewed

··· 12 12 ui, 13 13 warning, 14 14 } from "../theme/semantic-color.stylex"; 15 15 - import { gap, horizontalSpace, size as sizeSpace, verticalSpace } from "../theme/semantic-spacing.stylex"; 15 15 + import { 16 16 + gap, 17 17 + horizontalSpace, 18 18 + size as sizeSpace, 19 19 + verticalSpace, 20 20 + } from "../theme/semantic-spacing.stylex"; 16 21 import { fontFamily, fontSize, fontWeight } from "../theme/typography.stylex"; 17 22 18 23 const styles = stylex.create({

+3 -3

apps/docs/src/components/card/index.tsx

reviewed

··· 104 104 }, 105 105 cardDescription: { 106 106 gridArea: "description", 107 107 - fontSize: fontSize["sm"], 108 108 - fontWeight: fontWeight["normal"], 109 109 - lineHeight: lineHeight["sm"], 110 107 marginBottom: 0, 111 108 marginLeft: 0, 112 109 marginRight: 0, 113 110 marginTop: 0, 111 111 + fontSize: fontSize["sm"], 112 112 + fontWeight: fontWeight["normal"], 113 113 + lineHeight: lineHeight["sm"], 114 114 }, 115 115 cardBody: { 116 116 // eslint-disable-next-line @stylexjs/valid-styles

+5 -1

apps/docs/src/components/command-menu/index.tsx

reviewed

··· 19 19 import { SizeContext } from "../context"; 20 20 import { SearchField } from "../search-field"; 21 21 import { Separator } from "../separator"; 22 22 - import { horizontalSpace, size as sizeSpace, verticalSpace } from "../theme/semantic-spacing.stylex"; 22 22 + import { 23 23 + horizontalSpace, 24 24 + size as sizeSpace, 25 25 + verticalSpace, 26 26 + } from "../theme/semantic-spacing.stylex"; 23 27 import { useDialogStyles } from "../theme/useDialogStyles"; 24 28 25 29 const styles = stylex.create({

+5 -1

apps/docs/src/components/content/index.tsx

reviewed

··· 2 2 3 3 import type { StyleXComponentProps } from "../theme/types"; 4 4 5 5 - import { horizontalSpace, size as sizeSpace, verticalSpace } from "../theme/semantic-spacing.stylex"; 5 5 + import { 6 6 + horizontalSpace, 7 7 + size as sizeSpace, 8 8 + verticalSpace, 9 9 + } from "../theme/semantic-spacing.stylex"; 6 10 import { lineHeight } from "../theme/typography.stylex"; 7 11 8 12 const styles = stylex.create({

+6 -1

apps/docs/src/components/dialog/index.tsx

reviewed

··· 17 17 import { useHaptics } from "../haptics"; 18 18 import { IconButton } from "../icon-button"; 19 19 import { uiColor } from "../theme/color.stylex"; 20 20 - import { gap, horizontalSpace, size as sizeSpace, verticalSpace } from "../theme/semantic-spacing.stylex"; 20 20 + import { 21 21 + gap, 22 22 + horizontalSpace, 23 23 + size as sizeSpace, 24 24 + verticalSpace, 25 25 + } from "../theme/semantic-spacing.stylex"; 21 26 import { fontSize, typeramp } from "../theme/typography.stylex"; 22 27 import { useDialogStyles } from "../theme/useDialogStyles"; 23 28

+6 -1

apps/docs/src/components/drawer/index.tsx

reviewed

··· 22 22 animations, 23 23 } from "../theme/animations.stylex"; 24 24 import { uiColor } from "../theme/color.stylex"; 25 25 - import { gap, horizontalSpace, size as sizeSpace, verticalSpace } from "../theme/semantic-spacing.stylex"; 25 25 + import { 26 26 + gap, 27 27 + horizontalSpace, 28 28 + size as sizeSpace, 29 29 + verticalSpace, 30 30 + } from "../theme/semantic-spacing.stylex"; 26 31 import { typeramp } from "../theme/typography.stylex"; 27 32 import { useDialogStyles } from "../theme/useDialogStyles"; 28 33 import { NonModalDrawer } from "./NonModalDrawer";

+5 -1

apps/docs/src/components/editable-text/index.tsx

reviewed

··· 11 11 import type { StyleXComponentProps } from "../theme/types"; 12 12 13 13 import { radius } from "../theme/radius.stylex"; 14 14 - import { horizontalSpace, size as sizeSpace, verticalSpace } from "../theme/semantic-spacing.stylex"; 14 14 + import { 15 15 + horizontalSpace, 16 16 + size as sizeSpace, 17 17 + verticalSpace, 18 18 + } from "../theme/semantic-spacing.stylex"; 15 19 16 20 const focusClosestFocusableElement = () => { 17 21 const focusableElements = document.activeElement?.parentElement?.closest(

+5 -1

apps/docs/src/components/header-layout/index.tsx

reviewed

··· 6 6 7 7 import { primaryColor, uiColor } from "../theme/color.stylex"; 8 8 import { containerBreakpoints } from "../theme/media-queries.stylex"; 9 9 - import { horizontalSpace, size as sizeSpace, verticalSpace } from "../theme/semantic-spacing.stylex"; 9 9 + import { 10 10 + horizontalSpace, 11 11 + size as sizeSpace, 12 12 + verticalSpace, 13 13 + } from "../theme/semantic-spacing.stylex"; 10 14 11 15 const styles = stylex.create({ 12 16 root: {

+4 -1

apps/docs/src/components/hover-card/index.tsx

reviewed

··· 18 18 19 19 import type { StyleXComponentProps } from "../theme/types"; 20 20 21 21 - import { horizontalSpace, verticalSpace } from "../theme/semantic-spacing.stylex"; 21 21 + import { 22 22 + horizontalSpace, 23 23 + verticalSpace, 24 24 + } from "../theme/semantic-spacing.stylex"; 22 25 import { shadow } from "../theme/shadow.stylex"; 23 26 import { usePopoverStyles } from "../theme/usePopoverStyles"; 24 27

+4 -1

apps/docs/src/components/kbd/index.tsx

reviewed

··· 5 5 6 6 import { uiColor } from "../theme/color.stylex"; 7 7 import { radius } from "../theme/radius.stylex"; 8 8 - import { horizontalSpace, verticalSpace } from "../theme/semantic-spacing.stylex"; 8 8 + import { 9 9 + horizontalSpace, 10 10 + verticalSpace, 11 11 + } from "../theme/semantic-spacing.stylex"; 9 12 import { fontFamily, lineHeight, tracking } from "../theme/typography.stylex"; 10 13 11 14 const styles = stylex.create({

+5 -1

apps/docs/src/components/lightbox/index.tsx

reviewed

··· 25 25 animations, 26 26 } from "../theme/animations.stylex"; 27 27 import { ui } from "../theme/semantic-color.stylex"; 28 28 - import { gap, horizontalSpace, verticalSpace } from "../theme/semantic-spacing.stylex"; 28 28 + import { 29 29 + gap, 30 30 + horizontalSpace, 31 31 + verticalSpace, 32 32 + } from "../theme/semantic-spacing.stylex"; 29 33 30 34 const SLIDE_DURATION_MS = 250; 31 35

+5 -1

apps/docs/src/components/link/index.tsx

reviewed

··· 7 7 import type { StyleXComponentProps } from "../theme/types"; 8 8 9 9 import { primaryColor, uiColor } from "../theme/color.stylex"; 10 10 - import { gap, size as sizeSpace, verticalSpace } from "../theme/semantic-spacing.stylex"; 10 10 + import { 11 11 + gap, 12 12 + size as sizeSpace, 13 13 + verticalSpace, 14 14 + } from "../theme/semantic-spacing.stylex"; 11 15 import { fontFamily, fontWeight } from "../theme/typography.stylex"; 12 16 import { LinkContext } from "./link-context"; 13 17

+5 -1

apps/docs/src/components/listbox/index.tsx

reviewed

··· 26 26 import { useHaptics } from "../haptics"; 27 27 import { Separator } from "../separator"; 28 28 import { ui } from "../theme/semantic-color.stylex"; 29 29 - import { horizontalSpace, size as sizeSpace, verticalSpace } from "../theme/semantic-spacing.stylex"; 29 29 + import { 30 30 + horizontalSpace, 31 31 + size as sizeSpace, 32 32 + verticalSpace, 33 33 + } from "../theme/semantic-spacing.stylex"; 30 34 import { typeramp } from "../theme/typography.stylex"; 31 35 import { 32 36 estimatedRowHeights,

+4 -1

apps/docs/src/components/menu/index.tsx

reviewed

··· 24 24 import { SizeContext } from "../context"; 25 25 import { useHaptics } from "../haptics"; 26 26 import { ListBoxSeparator } from "../listbox"; 27 27 - import { horizontalSpace, verticalSpace } from "../theme/semantic-spacing.stylex"; 27 27 + import { 28 28 + horizontalSpace, 29 29 + verticalSpace, 30 30 + } from "../theme/semantic-spacing.stylex"; 28 31 import { useListBoxItemStyles } from "../theme/useListBoxItemStyles"; 29 32 import { usePopoverStyles } from "../theme/usePopoverStyles"; 30 33

+5 -1

apps/docs/src/components/menubar/index.tsx

reviewed

··· 21 21 import { animationDuration } from "../theme/animations.stylex"; 22 22 import { uiColor } from "../theme/color.stylex"; 23 23 import { radius } from "../theme/radius.stylex"; 24 24 - import { gap, horizontalSpace, size as sizeSpace } from "../theme/semantic-spacing.stylex"; 24 24 + import { 25 25 + gap, 26 26 + horizontalSpace, 27 27 + size as sizeSpace, 28 28 + } from "../theme/semantic-spacing.stylex"; 25 29 import { fontSize } from "../theme/typography.stylex"; 26 30 import { usePopoverStyles } from "../theme/usePopoverStyles"; 27 31

+6 -1

apps/docs/src/components/navbar/Navbar.tsx

reviewed

··· 16 16 import { primaryColor, uiColor } from "../theme/color.stylex"; 17 17 import { containerBreakpoints } from "../theme/media-queries.stylex"; 18 18 import { ui } from "../theme/semantic-color.stylex"; 19 19 - import { gap, horizontalSpace, size as sizeSpace, verticalSpace } from "../theme/semantic-spacing.stylex"; 19 19 + import { 20 20 + gap, 21 21 + horizontalSpace, 22 22 + size as sizeSpace, 23 23 + verticalSpace, 24 24 + } from "../theme/semantic-spacing.stylex"; 20 25 import { fontFamily, fontWeight } from "../theme/typography.stylex"; 21 26 22 27 const styles = stylex.create({

+10 -2

apps/docs/src/components/page/Page.tsx

reviewed

··· 14 14 import { Flex } from "../flex"; 15 15 import { IconButton } from "../icon-button"; 16 16 import { primaryColor, uiColor } from "../theme/color.stylex"; 17 17 - import { breakpoints, containerBreakpoints } from "../theme/media-queries.stylex"; 17 17 + import { 18 18 + breakpoints, 19 19 + containerBreakpoints, 20 20 + } from "../theme/media-queries.stylex"; 18 21 import { radius } from "../theme/radius.stylex"; 19 19 - import { gap, horizontalSpace, size as sizeSpace, verticalSpace } from "../theme/semantic-spacing.stylex"; 22 22 + import { 23 23 + gap, 24 24 + horizontalSpace, 25 25 + size as sizeSpace, 26 26 + verticalSpace, 27 27 + } from "../theme/semantic-spacing.stylex"; 20 28 import { shadow } from "../theme/shadow.stylex"; 21 29 import { fontFamily } from "../theme/typography.stylex"; 22 30 import { Text } from "../typography/text";

+5 -1

apps/docs/src/components/popover/index.tsx

reviewed

··· 17 17 18 18 import { useHaptics } from "../haptics"; 19 19 import { uiColor } from "../theme/color.stylex"; 20 20 - import { horizontalSpace, size as sizeSpace, verticalSpace } from "../theme/semantic-spacing.stylex"; 20 20 + import { 21 21 + horizontalSpace, 22 22 + size as sizeSpace, 23 23 + verticalSpace, 24 24 + } from "../theme/semantic-spacing.stylex"; 21 25 import { usePopoverStyles } from "../theme/usePopoverStyles"; 22 26 23 27 const styles = stylex.create({

+3 -6

apps/docs/src/components/segmented-control/index.tsx

reviewed

··· 53 53 borderRadius: radius.md, 54 54 }, 55 55 large: { 56 56 - borderRadius: radius.lg, 56 56 + borderRadius: radius.xl, 57 57 }, 58 58 /* eslint-disable @stylexjs/sort-keys -- toggle item layout order */ 59 59 item: { ··· 61 61 textBoxEdge: "cap alphabetic", 62 62 // eslint-disable-next-line @stylexjs/valid-styles 63 63 textBoxTrim: "trim-both", 64 64 + borderRadius: radius.lg, 64 65 borderWidth: 0, 65 66 66 67 cornerShape: "squircle", ··· 97 98 }, 98 99 /* eslint-enable @stylexjs/sort-keys */ 99 100 selectionIndicator: { 100 100 - borderRadius: { 101 101 - ":is([data-size=lg] *)": radius.lg, 102 102 - ":is([data-size=md] *)": radius.md, 103 103 - ":is([data-size=sm] *)": radius.md, 104 104 - }, 101 101 + borderRadius: radius.lg, 105 102 106 103 cornerShape: "squircle", 107 104 backgroundColor: uiColor.bgSubtle,

+4 -1

apps/docs/src/components/select/index.tsx

reviewed

··· 32 32 import { ListBox, ListBoxSeparator } from "../listbox"; 33 33 import { SearchField } from "../search-field"; 34 34 import { SuffixIcon } from "../suffix-icon"; 35 35 - import { horizontalSpace, verticalSpace } from "../theme/semantic-spacing.stylex"; 35 35 + import { 36 36 + horizontalSpace, 37 37 + verticalSpace, 38 38 + } from "../theme/semantic-spacing.stylex"; 36 39 import { useInputStyles } from "../theme/useInputStyles"; 37 40 import { estimatedRowHeights } from "../theme/useListBoxItemStyles"; 38 41 import { usePopoverStyles } from "../theme/usePopoverStyles";

+5 -1

apps/docs/src/components/sidebar-layout/index.tsx

reviewed

··· 9 9 import { IconButton } from "../icon-button"; 10 10 import { uiColor } from "../theme/color.stylex"; 11 11 import { containerBreakpoints } from "../theme/media-queries.stylex"; 12 12 - import { horizontalSpace, size as sizeSpace, verticalSpace } from "../theme/semantic-spacing.stylex"; 12 12 + import { 13 13 + horizontalSpace, 14 14 + size as sizeSpace, 15 15 + verticalSpace, 16 16 + } from "../theme/semantic-spacing.stylex"; 13 17 14 18 const styles = stylex.create({ 15 19 wrapper: {

+5 -1

apps/docs/src/components/switch/index.tsx

reviewed

··· 10 10 import { primaryColor, uiColor } from "../theme/color.stylex"; 11 11 import { mediaQueries } from "../theme/media-queries.stylex"; 12 12 import { radius } from "../theme/radius.stylex"; 13 13 - import { gap, horizontalSpace, size as sizeSpace } from "../theme/semantic-spacing.stylex"; 13 13 + import { 14 14 + gap, 15 15 + horizontalSpace, 16 16 + size as sizeSpace, 17 17 + } from "../theme/semantic-spacing.stylex"; 14 18 import { shadow } from "../theme/shadow.stylex"; 15 19 import { typeramp } from "../theme/typography.stylex"; 16 20

+4 -1

apps/docs/src/components/text-area/index.tsx

reviewed

··· 22 22 23 23 import { SizeContext } from "../context"; 24 24 import { Description, FieldErrorMessage, Label } from "../label"; 25 25 - import { size as sizeSpace, verticalSpace } from "../theme/semantic-spacing.stylex"; 25 25 + import { 26 26 + size as sizeSpace, 27 27 + verticalSpace, 28 28 + } from "../theme/semantic-spacing.stylex"; 26 29 import { fontFamily, lineHeight } from "../theme/typography.stylex"; 27 30 import { useInputStyles } from "../theme/useInputStyles"; 28 31

+5 -1

apps/docs/src/components/theme/useButtonStyles.ts

reviewed

··· 11 11 import { uiColor } from "./color.stylex"; 12 12 import { radius } from "./radius.stylex"; 13 13 import { critical, primary, ui } from "./semantic-color.stylex"; 14 14 - import { gap, horizontalSpace, size as sizeSpace } from "./semantic-spacing.stylex"; 14 14 + import { 15 15 + gap, 16 16 + horizontalSpace, 17 17 + size as sizeSpace, 18 18 + } from "./semantic-spacing.stylex"; 15 19 import { shadow } from "./shadow.stylex"; 16 20 import { fontFamily, fontSize, fontWeight } from "./typography.stylex"; 17 21

+6 -1

apps/docs/src/components/theme/useListBoxItemStyles.ts

reviewed

··· 5 5 6 6 import { SizeContext } from "../context"; 7 7 import { radius } from "../theme/radius.stylex"; 8 8 - import { gap, horizontalSpace, size as sizeSpace, verticalSpace } from "../theme/semantic-spacing.stylex"; 8 8 + import { 9 9 + gap, 10 10 + horizontalSpace, 11 11 + size as sizeSpace, 12 12 + verticalSpace, 13 13 + } from "../theme/semantic-spacing.stylex"; 9 14 import { 10 15 fontSize, 11 16 fontWeight,

+6 -1

apps/docs/src/components/toast/Toast.tsx

reviewed

··· 28 28 uiColor, 29 29 warningColor, 30 30 } from "../theme/color.stylex"; 31 31 - import { gap, horizontalSpace, size as sizeSpace, verticalSpace } from "../theme/semantic-spacing.stylex"; 31 31 + import { 32 32 + gap, 33 33 + horizontalSpace, 34 34 + size as sizeSpace, 35 35 + verticalSpace, 36 36 + } from "../theme/semantic-spacing.stylex"; 32 37 import { lineHeight, typeramp } from "../theme/typography.stylex"; 33 38 import { usePopoverStyles } from "../theme/usePopoverStyles"; 34 39 import { toasts } from "./queue";

+4 -1

apps/docs/src/components/toggle-button/index.tsx

reviewed

··· 8 8 9 9 import { SizeContext } from "../context"; 10 10 import { primaryColor, uiColor } from "../theme/color.stylex"; 11 11 - import { horizontalSpace, size as sizeSpace } from "../theme/semantic-spacing.stylex"; 11 11 + import { 12 12 + horizontalSpace, 13 13 + size as sizeSpace, 14 14 + } from "../theme/semantic-spacing.stylex"; 12 15 import { useButtonStyles } from "../theme/useButtonStyles"; 13 16 14 17 const styles = stylex.create({

+4 -1

apps/docs/src/components/tooltip/index.tsx

reviewed

··· 15 15 import { animationDuration } from "../theme/animations.stylex"; 16 16 import { uiInverted } from "../theme/color.stylex"; 17 17 import { radius } from "../theme/radius.stylex"; 18 18 - import { horizontalSpace, verticalSpace } from "../theme/semantic-spacing.stylex"; 18 18 + import { 19 19 + horizontalSpace, 20 20 + verticalSpace, 21 21 + } from "../theme/semantic-spacing.stylex"; 19 22 import { shadow } from "../theme/shadow.stylex"; 20 23 import { fontFamily, fontSize, lineHeight } from "../theme/typography.stylex"; 21 24

+6 -1

apps/docs/src/components/tree/index.tsx

reviewed

··· 25 25 import { mediaQueries } from "../theme/media-queries.stylex"; 26 26 import { radius } from "../theme/radius.stylex"; 27 27 import { ui } from "../theme/semantic-color.stylex"; 28 28 - import { gap, horizontalSpace, size as sizeSpace, verticalSpace } from "../theme/semantic-spacing.stylex"; 28 28 + import { 29 29 + gap, 30 30 + horizontalSpace, 31 31 + size as sizeSpace, 32 32 + verticalSpace, 33 33 + } from "../theme/semantic-spacing.stylex"; 29 34 import { 30 35 estimatedRowHeights, 31 36 useListBoxItemStyles,

+3 -1

apps/docs/src/docs/foundations/spacing.mdx

reviewed

··· 2 2 title: Spacing 3 3 description: Build upon consistent spacing to create a consistent design system. 4 4 --- 5 5 + 5 6 import { 6 7 Gap, 7 8 HorizontalSpace, ··· 14 15 Use semantic spacing tokens in component styles. 15 16 Semantic tokens make intent clearer than raw numeric spacing values. 16 17 Use directional and purpose-specific groups for layout: 18 18 + 17 19 - `horizontalSpace` for left and right spacing. 18 20 - `verticalSpace` for top and bottom spacing. 19 21 - `gap` for flex and grid gaps. ··· 56 58 57 59 ### Size 58 60 59 59 - <Size /> 61 61 + <Size />

+9 -3

apps/docs/src/docs/foundations/theming.mdx

reviewed

··· 43 43 To start theming your application fist import the tokens you want to theme. 44 44 45 45 ```tsx 46 46 - import { primaryColor, uiColor } from "@/components/theme/semantic-color.stylex"; 46 46 + import { 47 47 + primaryColor, 48 48 + uiColor, 49 49 + } from "@/components/theme/semantic-color.stylex"; 47 50 ``` 48 51 49 52 Then you can set the tokens to your desired values. ··· 51 54 ```tsx 52 55 import * as stylex from "@stylexjs/stylex"; 53 56 54 54 - import { primaryColor, uiColor } from "@/components/theme/semantic-color.stylex"; 57 57 + import { 58 58 + primaryColor, 59 59 + uiColor, 60 60 + } from "@/components/theme/semantic-color.stylex"; 55 61 import { purple } from "@/components/theme/colors/purple.stylex"; 56 62 import { mauve } from "@/components/theme/colors/mauve.stylex"; 57 63 ··· 105 111 } 106 112 ``` 107 113 108 108 - > NOTE: you can apply a theme to any part of your application, not just the root component. 114 114 + > NOTE: you can apply a theme to any part of your application, not just the root component.

+1 -1

apps/docs/src/docs/introduction.mdx

reviewed

··· 44 44 45 45 - **Foundations** - The tokens that are use to build the design system and style your UI 46 46 - **Components** - All the available components in Hip UI, organized by category 47 47 - - **Showcases** - Examples of how to use Hip UI in real world applications 47 47 + - **Showcases** - Examples of how to use Hip UI in real world applications

+5 -1

apps/docs/src/examples/foundations/animations.tsx

reviewed

··· 16 16 } from "../../components/theme/animations.stylex"; 17 17 import { primaryColor, uiColor } from "../../components/theme/color.stylex"; 18 18 import { radius } from "../../components/theme/radius.stylex"; 19 19 - import { horizontalSpace, verticalSpace, size as sizeSpace } from "../../components/theme/semantic-spacing.stylex"; 19 19 + import { 20 20 + horizontalSpace, 21 21 + verticalSpace, 22 22 + size as sizeSpace, 23 23 + } from "../../components/theme/semantic-spacing.stylex"; 20 24 21 25 const slideLeftToRight = stylex.keyframes({ 22 26 from: {

+4 -1

apps/docs/src/examples/foundations/shadow.tsx

reviewed

··· 7 7 8 8 import { uiColor } from "../../components/theme/color.stylex"; 9 9 import { radius } from "../../components/theme/radius.stylex"; 10 10 - import { verticalSpace, size as sizeSpace } from "../../components/theme/semantic-spacing.stylex"; 10 10 + import { 11 11 + verticalSpace, 12 12 + size as sizeSpace, 13 13 + } from "../../components/theme/semantic-spacing.stylex"; 11 14 12 15 const styles = stylex.create({ 13 16 wrapper: {

+5 -1

apps/docs/src/examples/skeleton/basic.tsx

reviewed

··· 9 9 <Flex align="center" gap="xl"> 10 10 <Skeleton variant="circle" size="md" /> 11 11 <Flex direction="column" gap="md"> 12 12 - <Skeleton variant="rectangle" height={sizeSpace["2xl"]} width="80px" /> 12 12 + <Skeleton 13 13 + variant="rectangle" 14 14 + height={sizeSpace["2xl"]} 15 15 + width="80px" 16 16 + /> 13 17 <Skeleton variant="rectangle" height={sizeSpace.md} width="120px" /> 14 18 </Flex> 15 19 </Flex>

+5 -1

apps/docs/src/lib/Example.tsx

reviewed

··· 12 12 import { mediaQueries } from "../components/theme/media-queries.stylex"; 13 13 import { radius } from "../components/theme/radius.stylex"; 14 14 import { ui } from "../components/theme/semantic-color.stylex"; 15 15 - import { verticalSpace, size as sizeSpace, horizontalSpace } from "../components/theme/semantic-spacing.stylex"; 15 15 + import { 16 16 + verticalSpace, 17 17 + size as sizeSpace, 18 18 + horizontalSpace, 19 19 + } from "../components/theme/semantic-spacing.stylex"; 16 20 17 21 const styles = stylex.create({ 18 22 card: {

+9 -3

apps/docs/src/showcases/canvas-editor.tsx

reviewed

··· 72 72 import { uiColor } from "../components/theme/color.stylex"; 73 73 import { radius } from "../components/theme/radius.stylex"; 74 74 import { shadow } from "../components/theme/shadow.stylex"; 75 75 - import { verticalSpace, horizontalSpace, gap as gapSpace, size as sizeSpace } from "../components/theme/semantic-spacing.stylex"; 75 75 + import { 76 76 + verticalSpace, 77 77 + horizontalSpace, 78 78 + gap as gapSpace, 79 79 + size as sizeSpace, 80 80 + } from "../components/theme/semantic-spacing.stylex"; 76 81 77 82 const styles = stylex.create({ 78 83 main: { ··· 188 193 189 194 return ( 190 195 // meta.name is the first choice, then the shape's text, then the capitalized shape type 191 191 - ((shape.meta.name as string) || 192 192 - editor.getShapeUtil(shape).getText(shape) || shape.type + " shape") 196 196 + (shape.meta.name as string) || 197 197 + editor.getShapeUtil(shape).getText(shape) || 198 198 + shape.type + " shape" 193 199 ); 194 200 } 195 201

+12 -4

apps/docs/src/showcases/ecommerce.tsx

reviewed

··· 40 40 import { LabelText } from "@/components/typography"; 41 41 import { Text } from "@/components/typography/text"; 42 42 43 43 - import { verticalSpace, horizontalSpace, size as sizeSpace } from "../components/theme/semantic-spacing.stylex"; 43 43 + import { 44 44 + verticalSpace, 45 45 + horizontalSpace, 46 46 + size as sizeSpace, 47 47 + } from "../components/theme/semantic-spacing.stylex"; 44 48 45 49 const styles = stylex.create({ 46 50 heightFull: { ··· 759 763 </Text> 760 764 </Flex> 761 765 762 762 - <Grid columns="auto auto auto" columnGap="5xl" alignItems="center"> 766 766 + <Grid 767 767 + columns="auto auto auto" 768 768 + columnGap="5xl" 769 769 + alignItems="center" 770 770 + > 763 771 <Flex direction="column" gap="xs"> 764 772 <Text variant="secondary" size="sm"> 765 773 Status ··· 974 982 <Flex wrap gap="xs"> 975 983 {fashionItems.map((item, index) => ( 976 984 // eslint-disable-next-line @eslint-react/no-array-index-key 977 977 - (<Text variant="secondary" key={index} leading="2xl" size="sm"> 985 985 + <Text variant="secondary" key={index} leading="2xl" size="sm"> 978 986 {item} 979 979 - </Text>) 987 987 + </Text> 980 988 ))} 981 989 </Flex> 982 990 </AspectRatio>

+5 -1

apps/docs/src/showcases/invoice.tsx

reviewed

··· 41 41 import { primaryColor, successColor } from "../components/theme/color.stylex"; 42 42 import { radius } from "../components/theme/radius.stylex"; 43 43 import { primary, ui } from "../components/theme/semantic-color.stylex"; 44 44 - import { horizontalSpace, verticalSpace, size as sizeSpace } from "../components/theme/semantic-spacing.stylex"; 44 44 + import { 45 45 + horizontalSpace, 46 46 + verticalSpace, 47 47 + size as sizeSpace, 48 48 + } from "../components/theme/semantic-spacing.stylex"; 45 49 import { fontFamily, typeramp } from "../components/theme/typography.stylex"; 46 50 47 51 const styles = stylex.create({

+5 -1

apps/docs/src/showcases/llm.tsx

reviewed

··· 38 38 import { uiColor } from "../components/theme/color.stylex"; 39 39 import { radius } from "../components/theme/radius.stylex"; 40 40 import { shadow } from "../components/theme/shadow.stylex"; 41 41 - import { verticalSpace, horizontalSpace, size as sizeSpace } from "../components/theme/semantic-spacing.stylex"; 41 41 + import { 42 42 + verticalSpace, 43 43 + horizontalSpace, 44 44 + size as sizeSpace, 45 45 + } from "../components/theme/semantic-spacing.stylex"; 42 46 import { fontSize, fontWeight } from "../components/theme/typography.stylex"; 43 47 import { Text } from "../components/typography/text"; 44 48

+6 -1

apps/docs/src/showcases/music.tsx

reviewed

··· 38 38 39 39 import { primaryColor } from "../components/theme/color.stylex"; 40 40 import { radius } from "../components/theme/radius.stylex"; 41 41 - import { size as sizeSpace, horizontalSpace, verticalSpace, gap as gapSpace } from "../components/theme/semantic-spacing.stylex"; 41 41 + import { 42 42 + size as sizeSpace, 43 43 + horizontalSpace, 44 44 + verticalSpace, 45 45 + gap as gapSpace, 46 46 + } from "../components/theme/semantic-spacing.stylex"; 42 47 43 48 const styles = stylex.create({ 44 49 main: {

+5 -1

apps/docs/src/showcases/todo-table.tsx

reviewed

··· 48 48 import { uiColor } from "../components/theme/color.stylex"; 49 49 import { radius } from "../components/theme/radius.stylex"; 50 50 import { shadow } from "../components/theme/shadow.stylex"; 51 51 - import { verticalSpace, horizontalSpace, size as sizeSpace } from "../components/theme/semantic-spacing.stylex"; 51 51 + import { 52 52 + verticalSpace, 53 53 + horizontalSpace, 54 54 + size as sizeSpace, 55 55 + } from "../components/theme/semantic-spacing.stylex"; 52 56 53 57 const styles = stylex.create({ 54 58 main: {

+1

packages/hip-ui/package.json

reviewed

··· 12 12 "build": "tsc --build tsconfig.build.json", 13 13 "lint": "oxlint .", 14 14 "generate:component": "turbo gen react-component", 15 15 + "generate:component-configs": "tsx scripts/generate-component-configs.ts", 15 16 "check-types": "tsc --noEmit", 16 17 "generate-colors": "tsx scripts/generate-colors.tsx", 17 18 "codemod:semantic-spacing": "jscodeshift -t scripts/codemods/migrate-spacing-to-semantic-spacing.cjs src/components --extensions=ts,tsx --parser=tsx"

+144 -129

packages/hip-ui/scripts/codemods/migrate-spacing-to-semantic-spacing.cjs

reviewed

··· 72 72 }; 73 73 74 74 const HORIZONTAL_VERTICAL_TOKEN_MAP = { 75 75 - "0": "none", 76 76 - "0.5": "xxs", 77 77 - "1": "xs", 78 78 - "1.5": "sm", 79 79 - "2": "md", 80 80 - "2.5": "lg", 81 81 - "3": "xl", 82 82 - "3.5": "2xl", 83 83 - "4": "3xl", 84 84 - "5": "4xl", 85 85 - "6": "5xl", 86 86 - "7": "6xl", 87 87 - "8": "7xl", 88 88 - "9": "8xl", 89 89 - "10": "9xl", 90 90 - "11": "10xl", 91 91 - "12": "11xl", 92 92 - "14": "12xl", 93 93 - "16": "13xl", 94 94 - "20": "14xl", 95 95 - "24": "15xl", 96 96 - "28": "16xl", 97 97 - "32": "17xl", 98 98 - "36": "18xl", 99 99 - "40": "19xl", 100 100 - "44": "20xl", 101 101 - "48": "21xl", 102 102 - "52": "22xl", 103 103 - "56": "23xl", 104 104 - "60": "24xl", 105 105 - "64": "25xl", 106 106 - "72": "26xl", 107 107 - "80": "27xl", 108 108 - "96": "28xl", 75 75 + 0: "none", 76 76 + 0.5: "xxs", 77 77 + 1: "xs", 78 78 + 1.5: "sm", 79 79 + 2: "md", 80 80 + 2.5: "lg", 81 81 + 3: "xl", 82 82 + 3.5: "2xl", 83 83 + 4: "3xl", 84 84 + 5: "4xl", 85 85 + 6: "5xl", 86 86 + 7: "6xl", 87 87 + 8: "7xl", 88 88 + 9: "8xl", 89 89 + 10: "9xl", 90 90 + 11: "10xl", 91 91 + 12: "11xl", 92 92 + 14: "12xl", 93 93 + 16: "13xl", 94 94 + 20: "14xl", 95 95 + 24: "15xl", 96 96 + 28: "16xl", 97 97 + 32: "17xl", 98 98 + 36: "18xl", 99 99 + 40: "19xl", 100 100 + 44: "20xl", 101 101 + 48: "21xl", 102 102 + 52: "22xl", 103 103 + 56: "23xl", 104 104 + 60: "24xl", 105 105 + 64: "25xl", 106 106 + 72: "26xl", 107 107 + 80: "27xl", 108 108 + 96: "28xl", 109 109 }; 110 110 111 111 const GAP_TOKEN_MAP = { 112 112 - "0": "none", 113 113 - "0.5": "xxs", 114 114 - "1": "xs", 115 115 - "1.5": "sm", 116 116 - "2": "md", 117 117 - "2.5": "lg", 118 118 - "3": "xl", 119 119 - "3.5": "3xl", 120 120 - "4": "2xl", 121 121 - "5": "4xl", 122 122 - "6": "5xl", 123 123 - "7": "6xl", 124 124 - "8": "7xl", 125 125 - "9": "8xl", 126 126 - "10": "9xl", 127 127 - "11": "10xl", 128 128 - "12": "11xl", 129 129 - "14": "12xl", 130 130 - "16": "13xl", 131 131 - "20": "14xl", 132 132 - "24": "15xl", 133 133 - "28": "16xl", 134 134 - "32": "17xl", 135 135 - "36": "18xl", 136 136 - "40": "19xl", 137 137 - "44": "20xl", 138 138 - "48": "21xl", 139 139 - "52": "22xl", 140 140 - "56": "23xl", 141 141 - "60": "24xl", 142 142 - "64": "25xl", 143 143 - "72": "26xl", 144 144 - "80": "27xl", 145 145 - "96": "28xl", 112 112 + 0: "none", 113 113 + 0.5: "xxs", 114 114 + 1: "xs", 115 115 + 1.5: "sm", 116 116 + 2: "md", 117 117 + 2.5: "lg", 118 118 + 3: "xl", 119 119 + 3.5: "3xl", 120 120 + 4: "2xl", 121 121 + 5: "4xl", 122 122 + 6: "5xl", 123 123 + 7: "6xl", 124 124 + 8: "7xl", 125 125 + 9: "8xl", 126 126 + 10: "9xl", 127 127 + 11: "10xl", 128 128 + 12: "11xl", 129 129 + 14: "12xl", 130 130 + 16: "13xl", 131 131 + 20: "14xl", 132 132 + 24: "15xl", 133 133 + 28: "16xl", 134 134 + 32: "17xl", 135 135 + 36: "18xl", 136 136 + 40: "19xl", 137 137 + 44: "20xl", 138 138 + 48: "21xl", 139 139 + 52: "22xl", 140 140 + 56: "23xl", 141 141 + 60: "24xl", 142 142 + 64: "25xl", 143 143 + 72: "26xl", 144 144 + 80: "27xl", 145 145 + 96: "28xl", 146 146 }; 147 147 148 148 const SIZE_TOKEN_MAP = { 149 149 - "0": "none", 150 150 - "0.5": "xxs", 151 151 - "1": "xxs", 152 152 - "1.5": "xs", 153 153 - "2": "sm", 154 154 - "2.5": "md", 155 155 - "3": "md", 156 156 - "3.5": "2xl", 157 157 - "4": "2xl", 158 158 - "5": "3xl", 159 159 - "6": "4xl", 160 160 - "7": "5xl", 161 161 - "8": "6xl", 162 162 - "9": "7xl", 163 163 - "10": "lg", 164 164 - "11": "9xl", 165 165 - "12": "xl", 166 166 - "14": "11xl", 167 167 - "16": "12xl", 168 168 - "20": "13xl", 169 169 - "24": "14xl", 170 170 - "28": "15xl", 171 171 - "32": "16xl", 172 172 - "36": "17xl", 173 173 - "40": "18xl", 174 174 - "44": "19xl", 175 175 - "48": "20xl", 176 176 - "52": "21xl", 177 177 - "56": "22xl", 178 178 - "60": "23xl", 179 179 - "64": "24xl", 180 180 - "72": "25xl", 181 181 - "80": "26xl", 182 182 - "96": "27xl", 149 149 + 0: "none", 150 150 + 0.5: "xxs", 151 151 + 1: "xxs", 152 152 + 1.5: "xs", 153 153 + 2: "sm", 154 154 + 2.5: "md", 155 155 + 3: "md", 156 156 + 3.5: "2xl", 157 157 + 4: "2xl", 158 158 + 5: "3xl", 159 159 + 6: "4xl", 160 160 + 7: "5xl", 161 161 + 8: "6xl", 162 162 + 9: "7xl", 163 163 + 10: "lg", 164 164 + 11: "9xl", 165 165 + 12: "xl", 166 166 + 14: "11xl", 167 167 + 16: "12xl", 168 168 + 20: "13xl", 169 169 + 24: "14xl", 170 170 + 28: "15xl", 171 171 + 32: "16xl", 172 172 + 36: "17xl", 173 173 + 40: "18xl", 174 174 + 44: "19xl", 175 175 + 48: "20xl", 176 176 + 52: "21xl", 177 177 + 56: "22xl", 178 178 + 60: "23xl", 179 179 + 64: "24xl", 180 180 + 72: "25xl", 181 181 + 80: "26xl", 182 182 + 96: "27xl", 183 183 }; 184 184 185 185 const GROUP_TOKEN_TO_NUMERIC = { ··· 379 379 function createTokenMemberExpression(j, alias, tokenKey) { 380 380 const isIdentifier = /^[A-Za-z_$][\w$]*$/.test(tokenKey); 381 381 if (isIdentifier) { 382 382 - return j.memberExpression(j.identifier(alias), j.identifier(tokenKey), false); 382 382 + return j.memberExpression( 383 383 + j.identifier(alias), 384 384 + j.identifier(tokenKey), 385 385 + false, 386 386 + ); 383 387 } 384 388 return j.memberExpression(j.identifier(alias), j.literal(tokenKey), true); 385 389 } 386 390 387 391 function getStringValue(node) { 388 392 if (!node) return null; 389 389 - if (node.type === "Literal" && typeof node.value === "string") return node.value; 393 393 + if (node.type === "Literal" && typeof node.value === "string") 394 394 + return node.value; 390 395 if (node.type === "StringLiteral") return node.value; 391 396 return null; 392 397 } ··· 564 569 const parentProperty = semanticPropertyName 565 570 ? { key: { type: "Identifier", name: semanticPropertyName } } 566 571 : getNearestObjectProperty(path); 567 567 - const propertyName = semanticPropertyName || getPropertyName(parentProperty); 572 572 + const propertyName = 573 573 + semanticPropertyName || getPropertyName(parentProperty); 568 574 const semanticGroup = inferSemanticGroup(propertyName); 569 575 const alias = IMPORT_ALIAS[semanticGroup]; 570 576 const tokenKey = mapNumericToSemanticToken( ··· 597 603 const parentProperty = semanticPropertyName 598 604 ? { key: { type: "Identifier", name: semanticPropertyName } } 599 605 : getNearestObjectProperty(path); 600 600 - const propertyName = semanticPropertyName || getPropertyName(parentProperty); 606 606 + const propertyName = 607 607 + semanticPropertyName || getPropertyName(parentProperty); 601 608 const semanticGroup = inferSemanticGroup(propertyName); 602 602 - if (semanticGroup !== "horizontalSpace" && semanticGroup !== "verticalSpace") { 609 609 + if ( 610 610 + semanticGroup !== "horizontalSpace" && 611 611 + semanticGroup !== "verticalSpace" 612 612 + ) { 603 613 return; 604 614 } 605 615 ··· 626 636 root.find(j.JSXAttribute).forEach((path) => { 627 637 const attr = path.value; 628 638 const nameNode = attr.name; 629 629 - const attrName = nameNode && nameNode.type === "JSXIdentifier" 630 630 - ? nameNode.name 631 631 - : null; 632 632 - if (attrName !== "gap" && attrName !== "rowGap" && attrName !== "columnGap") { 639 639 + const attrName = 640 640 + nameNode && nameNode.type === "JSXIdentifier" ? nameNode.name : null; 641 641 + if ( 642 642 + attrName !== "gap" && 643 643 + attrName !== "rowGap" && 644 644 + attrName !== "columnGap" 645 645 + ) { 633 646 return; 634 647 } 635 648 ··· 664 677 665 678 // Remove `spacing` from old imports when no longer used as a value. 666 679 if (spacingImportNodes.length > 0) { 667 667 - const spacingValueRefs = root.find(j.MemberExpression, { 668 668 - object: { type: "Identifier", name: "spacing" }, 669 669 - }).size(); 680 680 + const spacingValueRefs = root 681 681 + .find(j.MemberExpression, { 682 682 + object: { type: "Identifier", name: "spacing" }, 683 683 + }) 684 684 + .size(); 670 685 if (!transformedAnyUsage && spacingValueRefs > 0) { 671 686 return fileInfo.source; 672 687 } 673 688 674 689 if (spacingValueRefs === 0) { 675 675 - spacingImports.forEach((path) => { 676 676 - const originalSpecifiers = path.value.specifiers || []; 677 677 - const nextSpecifiers = originalSpecifiers.filter((specifier) => { 678 678 - return !( 679 679 - specifier.type === "ImportSpecifier" && 680 680 - specifier.imported && 681 681 - specifier.imported.name === "spacing" 682 682 - ); 683 683 - }); 690 690 + spacingImports.forEach((path) => { 691 691 + const originalSpecifiers = path.value.specifiers || []; 692 692 + const nextSpecifiers = originalSpecifiers.filter((specifier) => { 693 693 + return !( 694 694 + specifier.type === "ImportSpecifier" && 695 695 + specifier.imported && 696 696 + specifier.imported.name === "spacing" 697 697 + ); 698 698 + }); 684 699 685 685 - if (nextSpecifiers.length === 0) { 686 686 - j(path).remove(); 687 687 - } else { 688 688 - path.value.specifiers = nextSpecifiers; 689 689 - } 690 690 - }); 700 700 + if (nextSpecifiers.length === 0) { 701 701 + j(path).remove(); 702 702 + } else { 703 703 + path.value.specifiers = nextSpecifiers; 704 704 + } 705 705 + }); 691 706 } 692 707 } 693 708

+564

packages/hip-ui/scripts/generate-component-configs.ts

reviewed

··· 1 1 + import { 2 2 + existsSync, 3 3 + readFileSync, 4 4 + readdirSync, 5 5 + statSync, 6 6 + writeFileSync, 7 7 + } from "node:fs"; 8 8 + import { builtinModules } from "node:module"; 9 9 + import path from "node:path"; 10 10 + import { fileURLToPath } from "node:url"; 11 11 + 12 12 + import * as ts from "typescript"; 13 13 + 14 14 + type ComponentMetadata = { 15 15 + configPath: string; 16 16 + exportName: string; 17 17 + name: string; 18 18 + filepath: string; 19 19 + }; 20 20 + 21 21 + const scriptPath = fileURLToPath(import.meta.url); 22 22 + const scriptDir = path.dirname(scriptPath); 23 23 + const packageRoot = path.resolve(scriptDir, ".."); 24 24 + const workspaceRoot = path.resolve(packageRoot, "..", ".."); 25 25 + const componentsRoot = path.join(packageRoot, "src", "components"); 26 26 + const packageJsonPath = path.join(packageRoot, "package.json"); 27 27 + const workspaceConfigPath = path.join(workspaceRoot, "pnpm-workspace.yaml"); 28 28 + 29 29 + const ignoredPackages = new Set(["react", "react-dom"]); 30 30 + const builtinModuleNames = new Set( 31 31 + builtinModules.flatMap((moduleName) => 32 32 + moduleName.startsWith("node:") 33 33 + ? [moduleName, moduleName.slice("node:".length)] 34 34 + : [moduleName, `node:${moduleName}`], 35 35 + ), 36 36 + ); 37 37 + 38 38 + function main() { 39 39 + const packageVersions = getPackageVersions(); 40 40 + const componentConfigs = getComponentConfigs(componentsRoot); 41 41 + const componentNames = new Set(componentConfigs.map((config) => config.name)); 42 42 + const componentBundleFiles = getComponentBundleFiles(componentConfigs); 43 43 + 44 44 + for (const componentConfig of componentConfigs) { 45 45 + const nextContent = buildComponentConfig( 46 46 + componentConfig, 47 47 + packageVersions, 48 48 + componentNames, 49 49 + componentBundleFiles, 50 50 + ); 51 51 + writeFileSync(componentConfig.configPath, nextContent); 52 52 + console.log( 53 53 + `Updated ${path.relative(packageRoot, componentConfig.configPath)}`, 54 54 + ); 55 55 + } 56 56 + } 57 57 + 58 58 + function getPackageVersions() { 59 59 + const packageJson = JSON.parse( 60 60 + readFileSync(packageJsonPath, "utf8"), 61 61 + ) as PackageManifest; 62 62 + const catalogVersions = readCatalogVersions(); 63 63 + const versions = new Map<string, string>(); 64 64 + 65 65 + addDependencyVersions(versions, packageJson.dependencies, catalogVersions); 66 66 + addDependencyVersions(versions, packageJson.devDependencies, catalogVersions); 67 67 + 68 68 + return versions; 69 69 + } 70 70 + 71 71 + function addDependencyVersions( 72 72 + versions: Map<string, string>, 73 73 + dependencyGroup: Record<string, string> | undefined, 74 74 + catalogVersions: Map<string, string>, 75 75 + ) { 76 76 + if (!dependencyGroup) { 77 77 + return; 78 78 + } 79 79 + 80 80 + for (const [packageName, version] of Object.entries(dependencyGroup)) { 81 81 + if (version === "catalog:") { 82 82 + const catalogVersion = catalogVersions.get(packageName); 83 83 + 84 84 + if (!catalogVersion) { 85 85 + throw new Error(`Missing catalog version for ${packageName}`); 86 86 + } 87 87 + 88 88 + versions.set(packageName, `^${catalogVersion}`); 89 89 + continue; 90 90 + } 91 91 + 92 92 + versions.set(packageName, version); 93 93 + } 94 94 + } 95 95 + 96 96 + function readCatalogVersions() { 97 97 + const workspaceConfig = readFileSync(workspaceConfigPath, "utf8"); 98 98 + const versions = new Map<string, string>(); 99 99 + let isCatalogSection = false; 100 100 + 101 101 + for (const line of workspaceConfig.split("\n")) { 102 102 + if (line === "catalog:") { 103 103 + isCatalogSection = true; 104 104 + continue; 105 105 + } 106 106 + 107 107 + if (isCatalogSection && !line.startsWith(" ")) { 108 108 + break; 109 109 + } 110 110 + 111 111 + if (!isCatalogSection || line.trim().length === 0) { 112 112 + continue; 113 113 + } 114 114 + 115 115 + const match = /^ {2}(?:"([^"]+)"|([^:]+)):\s+(.+)$/.exec(line); 116 116 + 117 117 + if (!match) { 118 118 + continue; 119 119 + } 120 120 + 121 121 + const [, quotedName, plainName, version] = match; 122 122 + const packageName = quotedName ?? plainName; 123 123 + 124 124 + if (!packageName || !version) { 125 125 + throw new Error(`Could not parse catalog entry: ${line}`); 126 126 + } 127 127 + 128 128 + versions.set(packageName.trim(), version.trim()); 129 129 + } 130 130 + 131 131 + return versions; 132 132 + } 133 133 + 134 134 + function getComponentConfigs(directory: string) { 135 135 + return getComponentConfigPaths(directory) 136 136 + .map(readComponentMetadata) 137 137 + .sort((left, right) => left.name.localeCompare(right.name)); 138 138 + } 139 139 + 140 140 + function getComponentConfigPaths(directory: string) { 141 141 + const entries = readdirSync(directory, { withFileTypes: true }); 142 142 + const configPaths: Array<string> = []; 143 143 + 144 144 + for (const entry of entries) { 145 145 + const entryPath = path.join(directory, entry.name); 146 146 + 147 147 + if (entry.isDirectory()) { 148 148 + configPaths.push(...getComponentConfigPaths(entryPath)); 149 149 + continue; 150 150 + } 151 151 + 152 152 + if (entry.name.endsWith("-config.ts")) { 153 153 + configPaths.push(entryPath); 154 154 + } 155 155 + } 156 156 + 157 157 + return configPaths; 158 158 + } 159 159 + 160 160 + function readComponentMetadata(configPath: string): ComponentMetadata { 161 161 + const source = readFileSync(configPath, "utf8"); 162 162 + const exportName = readRequiredMatch( 163 163 + source, 164 164 + /export const (\w+): ComponentConfig = \{/, 165 165 + "export name", 166 166 + configPath, 167 167 + ); 168 168 + const name = readRequiredMatch( 169 169 + source, 170 170 + /name:\s*"([^"]+)"/, 171 171 + "name", 172 172 + configPath, 173 173 + ); 174 174 + const filepath = readRequiredMatch( 175 175 + source, 176 176 + /filepath:\s*"([^"]+)"/, 177 177 + "filepath", 178 178 + configPath, 179 179 + ); 180 180 + 181 181 + return { 182 182 + configPath, 183 183 + exportName, 184 184 + name, 185 185 + filepath, 186 186 + }; 187 187 + } 188 188 + 189 189 + function readRequiredMatch( 190 190 + source: string, 191 191 + pattern: RegExp, 192 192 + label: string, 193 193 + filePath: string, 194 194 + ) { 195 195 + const match = pattern.exec(source); 196 196 + 197 197 + if (!match?.[1]) { 198 198 + throw new Error(`Could not read ${label} from ${filePath}`); 199 199 + } 200 200 + 201 201 + return match[1]; 202 202 + } 203 203 + 204 204 + function buildComponentConfig( 205 205 + componentConfig: ComponentMetadata, 206 206 + packageVersions: Map<string, string>, 207 207 + componentNames: Set<string>, 208 208 + componentBundleFiles: Map<string, Set<string>>, 209 209 + ) { 210 210 + const componentDirectory = path.dirname(componentConfig.configPath); 211 211 + const entryPath = resolveLocalImport( 212 212 + componentDirectory, 213 213 + componentConfig.filepath, 214 214 + ); 215 215 + 216 216 + if (!entryPath) { 217 217 + throw new Error( 218 218 + `Could not resolve ${componentConfig.filepath} from ${componentConfig.configPath}`, 219 219 + ); 220 220 + } 221 221 + 222 222 + const localDependencies = new Set<string>(); 223 223 + const componentDependencies = new Set<string>(); 224 224 + const packageDependencies = new Set<string>(); 225 225 + const visitedFiles = new Set<string>(); 226 226 + 227 227 + collectDependencies( 228 228 + entryPath, 229 229 + componentConfig.name, 230 230 + componentNames, 231 231 + componentBundleFiles, 232 232 + localDependencies, 233 233 + componentDependencies, 234 234 + packageDependencies, 235 235 + visitedFiles, 236 236 + ); 237 237 + 238 238 + localDependencies.delete(entryPath); 239 239 + 240 240 + const missingPackages = [...packageDependencies].filter( 241 241 + (packageName) => !packageVersions.has(packageName), 242 242 + ); 243 243 + 244 244 + if (missingPackages.length > 0) { 245 245 + throw new Error( 246 246 + `${componentConfig.name} uses packages with no resolved versions: ${missingPackages.join(", ")}`, 247 247 + ); 248 248 + } 249 249 + 250 250 + const sortedHipDependencies = [ 251 251 + ...[...componentDependencies] 252 252 + .sort((left, right) => left.localeCompare(right)) 253 253 + .map((dependencyName) => 254 254 + toPosixPath( 255 255 + path.relative( 256 256 + componentDirectory, 257 257 + path.join(componentsRoot, dependencyName), 258 258 + ), 259 259 + ), 260 260 + ), 261 261 + ...[...localDependencies] 262 262 + .map((filePath) => 263 263 + toPosixPath(path.relative(componentDirectory, filePath)), 264 264 + ) 265 265 + .sort((left, right) => left.localeCompare(right)), 266 266 + ]; 267 267 + const sortedPackageDependencies = [...packageDependencies] 268 268 + .sort((left, right) => left.localeCompare(right)) 269 269 + .map( 270 270 + (packageName) => 271 271 + [packageName, packageVersions.get(packageName)!] as const, 272 272 + ); 273 273 + 274 274 + return formatConfigFile( 275 275 + componentConfig, 276 276 + sortedHipDependencies, 277 277 + sortedPackageDependencies, 278 278 + ); 279 279 + } 280 280 + 281 281 + function collectDependencies( 282 282 + filePath: string, 283 283 + currentComponentName: string, 284 284 + componentNames: Set<string>, 285 285 + componentBundleFiles: Map<string, Set<string>>, 286 286 + localDependencies: Set<string>, 287 287 + componentDependencies: Set<string>, 288 288 + packageDependencies: Set<string>, 289 289 + visitedFiles: Set<string>, 290 290 + ) { 291 291 + if (visitedFiles.has(filePath)) { 292 292 + return; 293 293 + } 294 294 + 295 295 + visitedFiles.add(filePath); 296 296 + localDependencies.add(filePath); 297 297 + 298 298 + const source = readFileSync(filePath, "utf8"); 299 299 + const sourceFile = ts.createSourceFile( 300 300 + filePath, 301 301 + source, 302 302 + ts.ScriptTarget.Latest, 303 303 + true, 304 304 + filePath.endsWith(".tsx") ? ts.ScriptKind.TSX : ts.ScriptKind.TS, 305 305 + ); 306 306 + 307 307 + for (const specifier of getModuleSpecifiers(sourceFile)) { 308 308 + if (specifier.startsWith(".")) { 309 309 + const resolvedImport = resolveLocalImport( 310 310 + path.dirname(filePath), 311 311 + specifier, 312 312 + ); 313 313 + 314 314 + if (!resolvedImport) { 315 315 + throw new Error(`Could not resolve ${specifier} from ${filePath}`); 316 316 + } 317 317 + 318 318 + if (!resolvedImport.startsWith(componentsRoot)) { 319 319 + throw new Error( 320 320 + `Unsupported local dependency outside src/components: ${resolvedImport}`, 321 321 + ); 322 322 + } 323 323 + 324 324 + const dependencyComponentName = getComponentName(resolvedImport); 325 325 + 326 326 + if ( 327 327 + dependencyComponentName && 328 328 + dependencyComponentName !== currentComponentName && 329 329 + componentNames.has(dependencyComponentName) && 330 330 + componentBundleFiles.get(dependencyComponentName)?.has(resolvedImport) 331 331 + ) { 332 332 + componentDependencies.add(dependencyComponentName); 333 333 + continue; 334 334 + } 335 335 + 336 336 + collectDependencies( 337 337 + resolvedImport, 338 338 + currentComponentName, 339 339 + componentNames, 340 340 + componentBundleFiles, 341 341 + localDependencies, 342 342 + componentDependencies, 343 343 + packageDependencies, 344 344 + visitedFiles, 345 345 + ); 346 346 + continue; 347 347 + } 348 348 + 349 349 + const packageName = getPackageName(specifier); 350 350 + 351 351 + if ( 352 352 + ignoredPackages.has(packageName) || 353 353 + packageName.startsWith("@types/") || 354 354 + builtinModuleNames.has(specifier) || 355 355 + builtinModuleNames.has(packageName) 356 356 + ) { 357 357 + continue; 358 358 + } 359 359 + 360 360 + packageDependencies.add(packageName); 361 361 + } 362 362 + } 363 363 + 364 364 + function getModuleSpecifiers(sourceFile: ts.SourceFile) { 365 365 + const specifiers = new Set<string>(); 366 366 + 367 367 + function visit(node: ts.Node) { 368 368 + if ( 369 369 + (ts.isImportDeclaration(node) || ts.isExportDeclaration(node)) && 370 370 + node.moduleSpecifier && 371 371 + ts.isStringLiteral(node.moduleSpecifier) 372 372 + ) { 373 373 + specifiers.add(node.moduleSpecifier.text); 374 374 + } 375 375 + 376 376 + if ( 377 377 + ts.isCallExpression(node) && 378 378 + node.expression.kind === ts.SyntaxKind.ImportKeyword && 379 379 + node.arguments[0] && 380 380 + ts.isStringLiteral(node.arguments[0]) 381 381 + ) { 382 382 + specifiers.add(node.arguments[0].text); 383 383 + } 384 384 + 385 385 + ts.forEachChild(node, visit); 386 386 + } 387 387 + 388 388 + visit(sourceFile); 389 389 + 390 390 + return specifiers; 391 391 + } 392 392 + 393 393 + function getComponentBundleFiles(componentConfigs: Array<ComponentMetadata>) { 394 394 + const bundleFiles = new Map<string, Set<string>>(); 395 395 + 396 396 + for (const componentConfig of componentConfigs) { 397 397 + bundleFiles.set(componentConfig.name, collectBundleFiles(componentConfig)); 398 398 + } 399 399 + 400 400 + return bundleFiles; 401 401 + } 402 402 + 403 403 + function collectBundleFiles(componentConfig: ComponentMetadata) { 404 404 + const componentDirectory = path.dirname(componentConfig.configPath); 405 405 + const entryPath = resolveLocalImport( 406 406 + componentDirectory, 407 407 + componentConfig.filepath, 408 408 + ); 409 409 + 410 410 + if (!entryPath) { 411 411 + throw new Error( 412 412 + `Could not resolve ${componentConfig.filepath} from ${componentConfig.configPath}`, 413 413 + ); 414 414 + } 415 415 + 416 416 + const bundleFiles = new Set<string>(); 417 417 + const visitedFiles = new Set<string>(); 418 418 + 419 419 + function visit(filePath: string) { 420 420 + if (visitedFiles.has(filePath)) { 421 421 + return; 422 422 + } 423 423 + 424 424 + visitedFiles.add(filePath); 425 425 + bundleFiles.add(filePath); 426 426 + 427 427 + const source = readFileSync(filePath, "utf8"); 428 428 + const sourceFile = ts.createSourceFile( 429 429 + filePath, 430 430 + source, 431 431 + ts.ScriptTarget.Latest, 432 432 + true, 433 433 + filePath.endsWith(".tsx") ? ts.ScriptKind.TSX : ts.ScriptKind.TS, 434 434 + ); 435 435 + 436 436 + for (const specifier of getModuleSpecifiers(sourceFile)) { 437 437 + if (!specifier.startsWith(".")) { 438 438 + continue; 439 439 + } 440 440 + 441 441 + const resolvedImport = resolveLocalImport( 442 442 + path.dirname(filePath), 443 443 + specifier, 444 444 + ); 445 445 + 446 446 + if (!resolvedImport || !resolvedImport.startsWith(componentDirectory)) { 447 447 + continue; 448 448 + } 449 449 + 450 450 + visit(resolvedImport); 451 451 + } 452 452 + } 453 453 + 454 454 + visit(entryPath); 455 455 + 456 456 + return bundleFiles; 457 457 + } 458 458 + 459 459 + function getComponentName(filePath: string) { 460 460 + const relativePath = path.relative(componentsRoot, filePath); 461 461 + 462 462 + if ( 463 463 + relativePath.startsWith("..") || 464 464 + path.isAbsolute(relativePath) || 465 465 + relativePath.length === 0 466 466 + ) { 467 467 + return null; 468 468 + } 469 469 + 470 470 + const [componentName] = relativePath.split(path.sep); 471 471 + return componentName ?? null; 472 472 + } 473 473 + 474 474 + function resolveLocalImport(fromDirectory: string, specifier: string) { 475 475 + const resolvedPath = path.resolve(fromDirectory, specifier); 476 476 + const candidates = [ 477 477 + resolvedPath, 478 478 + `${resolvedPath}.ts`, 479 479 + `${resolvedPath}.tsx`, 480 480 + `${resolvedPath}.js`, 481 481 + `${resolvedPath}.jsx`, 482 482 + path.join(resolvedPath, "index.ts"), 483 483 + path.join(resolvedPath, "index.tsx"), 484 484 + path.join(resolvedPath, "index.js"), 485 485 + path.join(resolvedPath, "index.jsx"), 486 486 + ]; 487 487 + 488 488 + for (const candidate of candidates) { 489 489 + if (existsSync(candidate) && statSync(candidate).isFile()) { 490 490 + return candidate; 491 491 + } 492 492 + } 493 493 + 494 494 + return null; 495 495 + } 496 496 + 497 497 + function getPackageName(specifier: string) { 498 498 + if (specifier.startsWith("@")) { 499 499 + const [scope, name] = specifier.split("/"); 500 500 + 501 501 + if (!scope || !name) { 502 502 + throw new Error(`Unsupported package specifier: ${specifier}`); 503 503 + } 504 504 + 505 505 + return `${scope}/${name}`; 506 506 + } 507 507 + 508 508 + const [packageName] = specifier.split("/"); 509 509 + 510 510 + if (!packageName) { 511 511 + throw new Error(`Unsupported package specifier: ${specifier}`); 512 512 + } 513 513 + 514 514 + return packageName; 515 515 + } 516 516 + 517 517 + function formatConfigFile( 518 518 + componentConfig: ComponentMetadata, 519 519 + hipDependencies: Array<string>, 520 520 + packageDependencies: Array<readonly [string, string]>, 521 521 + ) { 522 522 + const lines = [ 523 523 + 'import type { ComponentConfig } from "../../types";', 524 524 + "", 525 525 + `export const ${componentConfig.exportName}: ComponentConfig = {`, 526 526 + ` name: "${componentConfig.name}",`, 527 527 + ` filepath: "${componentConfig.filepath}",`, 528 528 + ]; 529 529 + 530 530 + if (hipDependencies.length > 0) { 531 531 + lines.push(" hipDependencies: ["); 532 532 + 533 533 + for (const dependency of hipDependencies) { 534 534 + lines.push(` "${dependency}",`); 535 535 + } 536 536 + 537 537 + lines.push(" ],"); 538 538 + } 539 539 + 540 540 + if (packageDependencies.length > 0) { 541 541 + lines.push(" dependencies: {"); 542 542 + 543 543 + for (const [packageName, version] of packageDependencies) { 544 544 + lines.push(` "${packageName}": "${version}",`); 545 545 + } 546 546 + 547 547 + lines.push(" },"); 548 548 + } 549 549 + 550 550 + lines.push("};", ""); 551 551 + 552 552 + return lines.join("\n"); 553 553 + } 554 554 + 555 555 + function toPosixPath(filePath: string) { 556 556 + return filePath.split(path.sep).join("/"); 557 557 + } 558 558 + 559 559 + type PackageManifest = { 560 560 + dependencies?: Record<string, string>; 561 561 + devDependencies?: Record<string, string>; 562 562 + }; 563 563 + 564 564 + main();

+90 -20

packages/hip-ui/src/cli/install.tsx

reviewed

··· 88 88 import { tableConfig } from "../components/table/table-config.js"; 89 89 import { tabsConfig } from "../components/tabs/tabs-config.js"; 90 90 import { tagGroupConfig } from "../components/tag-group/tag-group-config.js"; 91 91 + import { themeConfig } from "../components/theme/theme-config.js"; 91 92 import { textAreaConfig } from "../components/text-area/text-area-config.js"; 92 93 import { textFieldConfig } from "../components/text-field/text-field-config.js"; 93 94 import { timeFieldConfig } from "../components/time-field/time-field-config.js"; ··· 102 103 import { getConfig, setConfig } from "./config.js"; 103 104 104 105 const __dirname = path.dirname(new URL(import.meta.url).pathname); 106 106 + const COMPONENTS_DIRECTORY = path.resolve(__dirname, "../../src/components"); 105 107 106 108 const COMPONENT_CONFIGS = [ 107 109 buttonConfig, 108 110 flexConfig, 111 111 + themeConfig, 109 112 typographyConfig, 110 113 contentConfig, 111 114 copyToClipboardButtonConfig, ··· 192 195 imageCropperConfig, 193 196 ]; 194 197 198 198 + const COMPONENT_CONFIGS_BY_NAME = new Map( 199 199 + COMPONENT_CONFIGS.map((config) => [config.name, config]), 200 200 + ); 201 201 + 202 202 + const COMPONENT_CONFIGS_BY_DIRECTORY = new Map( 203 203 + COMPONENT_CONFIGS.map((config) => [ 204 204 + path.resolve(COMPONENTS_DIRECTORY, config.name), 205 205 + config, 206 206 + ]), 207 207 + ); 208 208 + 209 209 + function getComponentConfig(componentName: string) { 210 210 + const componentConfig = COMPONENT_CONFIGS_BY_NAME.get(componentName); 211 211 + 212 212 + if (!componentConfig) { 213 213 + throw new Error(`Component ${componentName} not found.`); 214 214 + } 215 215 + 216 216 + return componentConfig; 217 217 + } 218 218 + 219 219 + function getHipDependencyComponentConfig( 220 220 + componentConfig: ComponentConfig, 221 221 + dependency: string, 222 222 + ) { 223 223 + const dependencyPath = path.resolve( 224 224 + COMPONENTS_DIRECTORY, 225 225 + componentConfig.name, 226 226 + dependency, 227 227 + ); 228 228 + 229 229 + return COMPONENT_CONFIGS_BY_DIRECTORY.get(dependencyPath); 230 230 + } 231 231 + 232 232 + function getComponentInstallOrder(componentNames: Array<string>) { 233 233 + const orderedComponents: Array<ComponentConfig> = []; 234 234 + const visiting = new Set<string>(); 235 235 + const visited = new Set<string>(); 236 236 + 237 237 + function visit(componentName: string) { 238 238 + if (visited.has(componentName)) { 239 239 + return; 240 240 + } 241 241 + 242 242 + if (visiting.has(componentName)) { 243 243 + throw new Error( 244 244 + `Circular component dependency detected: ${componentName}`, 245 245 + ); 246 246 + } 247 247 + 248 248 + const componentConfig = getComponentConfig(componentName); 249 249 + visiting.add(componentName); 250 250 + 251 251 + for (const dependency of componentConfig.hipDependencies ?? []) { 252 252 + const dependencyConfig = getHipDependencyComponentConfig( 253 253 + componentConfig, 254 254 + dependency, 255 255 + ); 256 256 + 257 257 + if (dependencyConfig) { 258 258 + visit(dependencyConfig.name); 259 259 + } 260 260 + } 261 261 + 262 262 + visiting.delete(componentName); 263 263 + visited.add(componentName); 264 264 + orderedComponents.push(componentConfig); 265 265 + } 266 266 + 267 267 + for (const componentName of componentNames) { 268 268 + visit(componentName); 269 269 + } 270 270 + 271 271 + return orderedComponents; 272 272 + } 273 273 + 195 274 function StringSetting({ 196 275 label, 197 276 defaultValue, ··· 410 489 } 411 490 412 491 for (const dependency of componentConfig.hipDependencies) { 492 492 + if (getHipDependencyComponentConfig(componentConfig, dependency)) { 493 493 + continue; 494 494 + } 495 495 + 413 496 const content = readFileSync( 414 497 path.join( 415 498 __dirname, ··· 432 515 config: ConfigOptions, 433 516 componentConfig: ComponentConfig, 434 517 ) { 435 435 - const outputPath = path.join(componentConfig.name, "index.tsx"); 518 518 + const outputPath = path.join( 519 519 + componentConfig.name, 520 520 + componentConfig.filepath.replace(/^\.\//, ""), 521 521 + ); 436 522 const template = readFileSync( 437 523 path.join( 438 524 __dirname, ··· 454 540 component: Array<string>; 455 541 all: boolean; 456 542 }) { 457 457 - const componentConfigs = all 458 458 - ? COMPONENT_CONFIGS 459 459 - : component 460 460 - .map((componentName) => 461 461 - COMPONENT_CONFIGS.find((config) => config.name === componentName), 462 462 - ) 463 463 - .filter((config): config is ComponentConfig => config !== undefined); 464 464 - 465 465 - for (const componentName of component) { 466 466 - const componentConfig = COMPONENT_CONFIGS.find( 467 467 - (config) => config.name === componentName, 468 468 - ); 469 469 - 470 470 - if (!componentConfig) { 471 471 - throw new Error(`Component ${componentName} not found.`); 472 472 - } 473 473 - 474 474 - componentConfigs.push(componentConfig); 475 475 - } 543 543 + const componentConfigs = getComponentInstallOrder( 544 544 + all ? COMPONENT_CONFIGS.map((config) => config.name) : component, 545 545 + ); 476 546 477 547 const config = await setup(); 478 548

+8 -9

packages/hip-ui/src/components/alert-dialog/alert-dialog-config.ts

reviewed

··· 4 4 name: "alert-dialog", 5 5 filepath: "./index.tsx", 6 6 hipDependencies: [ 7 7 - "../haptics/haptics.ts", 8 8 - "../haptics/context.tsx", 9 9 - "../haptics/useHaptics.ts", 10 10 - "../haptics/index.ts", 7 7 + "../button", 8 8 + "../haptics", 9 9 + "../icon-button", 10 10 + "../theme", 11 11 "../context.ts", 12 12 "../theme/useDialogStyles.ts", 13 13 ], 14 14 dependencies: { 15 15 - "lucide-react": "^0.545.0", 16 16 - "web-haptics": "^0.0.6", 17 17 - "@react-stately/utils": "^3.10.8", 18 18 - "react-stately": "^3.42.0", 19 19 - "@stylexjs/stylex": "^0.16.2", 15 15 + "@stylexjs/stylex": "^0.18.1", 16 16 + "lucide-react": "^0.548.0", 17 17 + "react-aria": "^3.47.0", 18 18 + "react-aria-components": "^1.16.0", 20 19 }, 21 20 };

+6 -1

packages/hip-ui/src/components/alert-dialog/index.tsx

reviewed

··· 21 21 import { Button } from "../button"; 22 22 import { useHaptics } from "../haptics"; 23 23 import { IconButton } from "../icon-button"; 24 24 - import { gap, horizontalSpace, size as sizeSpace, verticalSpace } from "../theme/semantic-spacing.stylex"; 24 24 + import { 25 25 + gap, 26 26 + horizontalSpace, 27 27 + size as sizeSpace, 28 28 + verticalSpace, 29 29 + } from "../theme/semantic-spacing.stylex"; 25 30 import { fontSize, typeramp } from "../theme/typography.stylex"; 26 31 import { useDialogStyles } from "../theme/useDialogStyles"; 27 32

+5 -8

packages/hip-ui/src/components/alert/alert-config.ts

reviewed

··· 4 4 name: "alert", 5 5 filepath: "./index.tsx", 6 6 hipDependencies: [ 7 7 - "../theme/semantic-spacing.stylex.tsx", 8 8 - "../theme/radius.stylex.tsx", 9 9 - "../theme/semantic-color.stylex.tsx", 10 10 - "../theme/typography.stylex.tsx", 11 11 - "../theme/types.ts", 7 7 + "../icon-button", 8 8 + "../theme", 12 9 "../context.ts", 13 13 - "../icon-button/index.tsx", 10 10 + "../typography/text.tsx", 14 11 ], 15 12 dependencies: { 16 16 - "react-aria-components": "^1.13.0", 17 17 - "lucide-react": "^0.263.1", 13 13 + "@stylexjs/stylex": "^0.18.1", 14 14 + "lucide-react": "^0.548.0", 18 15 }, 19 16 };

+6 -1

packages/hip-ui/src/components/alert/index.tsx

reviewed

··· 29 29 success, 30 30 warning, 31 31 } from "../theme/semantic-color.stylex"; 32 32 - import { gap, horizontalSpace, size as sizeSpace, verticalSpace } from "../theme/semantic-spacing.stylex"; 32 32 + import { 33 33 + gap, 34 34 + horizontalSpace, 35 35 + size as sizeSpace, 36 36 + verticalSpace, 37 37 + } from "../theme/semantic-spacing.stylex"; 33 38 import { fontFamily } from "../theme/typography.stylex"; 34 39 import { Text } from "../typography/text"; 35 40

+6

packages/hip-ui/src/components/aspect-ratio/aspect-ratio-config.ts

reviewed

··· 3 3 export const aspectRatioConfig: ComponentConfig = { 4 4 name: "aspect-ratio", 5 5 filepath: "./index.tsx", 6 6 + hipDependencies: [ 7 7 + "../theme", 8 8 + ], 9 9 + dependencies: { 10 10 + "@stylexjs/stylex": "^0.18.1", 11 11 + }, 6 12 };

+6 -3

packages/hip-ui/src/components/autocomplete/autocomplete-config.ts

reviewed

··· 4 4 name: "autocomplete", 5 5 filepath: "./index.tsx", 6 6 hipDependencies: [ 7 7 - "../theme/semantic-spacing.stylex.tsx", 8 8 - "../theme/usePopoverStyles.ts", 7 7 + "../listbox", 8 8 + "../text-field", 9 9 + "../theme", 10 10 + "../context.ts", 9 11 ], 10 12 dependencies: { 11 11 - "react-aria-components": "^1.13.0", 13 13 + "@stylexjs/stylex": "^0.18.1", 14 14 + "react-aria-components": "^1.16.0", 12 15 }, 13 16 };

+6 -5

packages/hip-ui/src/components/avatar/avatar-config.ts

reviewed

··· 4 4 name: "avatar", 5 5 filepath: "./index.tsx", 6 6 hipDependencies: [ 7 7 - "../theme/semantic-spacing.stylex.tsx", 8 8 - "../theme/radius.stylex.tsx", 9 9 - "../theme/semantic-color.stylex.tsx", 10 10 - "../theme/typography.stylex.tsx", 11 11 - "../theme/shadow.stylex.tsx", 7 7 + "../theme", 8 8 + "../context.ts", 12 9 ], 10 10 + dependencies: { 11 11 + "@stylexjs/stylex": "^0.18.1", 12 12 + "react-aria-components": "^1.16.0", 13 13 + }, 13 14 };

+5 -5

packages/hip-ui/src/components/badge/badge-config.ts

reviewed

··· 4 4 name: "badge", 5 5 filepath: "./index.tsx", 6 6 hipDependencies: [ 7 7 - "../theme/semantic-spacing.stylex.tsx", 8 8 - "../theme/radius.stylex.tsx", 9 9 - "../theme/semantic-color.stylex.tsx", 10 10 - "../theme/typography.stylex.tsx", 11 11 - "../theme/shadow.stylex.tsx", 7 7 + "../theme", 8 8 + "../context.ts", 12 9 ], 10 10 + dependencies: { 11 11 + "@stylexjs/stylex": "^0.18.1", 12 12 + }, 13 13 };

+6 -1

packages/hip-ui/src/components/badge/index.tsx

reviewed

··· 12 12 ui, 13 13 warning, 14 14 } from "../theme/semantic-color.stylex"; 15 15 - import { gap, horizontalSpace, size as sizeSpace, verticalSpace } from "../theme/semantic-spacing.stylex"; 15 15 + import { 16 16 + gap, 17 17 + horizontalSpace, 18 18 + size as sizeSpace, 19 19 + verticalSpace, 20 20 + } from "../theme/semantic-spacing.stylex"; 16 21 import { fontFamily, fontSize, fontWeight } from "../theme/typography.stylex"; 17 22 18 23 const styles = stylex.create({

+4 -6

packages/hip-ui/src/components/breadcrumbs/breadcrumbs-config.ts

reviewed

··· 4 4 name: "breadcrumbs", 5 5 filepath: "./index.tsx", 6 6 hipDependencies: [ 7 7 - "../theme/semantic-color.stylex.tsx", 8 8 - "../theme/semantic-spacing.stylex.tsx", 9 9 - "../theme/typography.stylex.tsx", 10 10 - "../link/index.tsx", 7 7 + "../theme", 11 8 ], 12 9 dependencies: { 13 13 - "react-aria-components": "^1.13.0", 14 14 - "lucide-react": "^0.263.1", 10 10 + "@stylexjs/stylex": "^0.18.1", 11 11 + "lucide-react": "^0.548.0", 12 12 + "react-aria-components": "^1.16.0", 15 13 }, 16 14 };

+4 -8

packages/hip-ui/src/components/button-group/button-group-config.ts

reviewed

··· 4 4 name: "button-group", 5 5 filepath: "./index.tsx", 6 6 hipDependencies: [ 7 7 - "../theme/semantic-spacing.stylex.tsx", 8 8 - "../theme/radius.stylex.tsx", 9 9 - "../theme/semantic-color.stylex.tsx", 10 10 - "../theme/typography.stylex.tsx", 11 11 - "../theme/shadow.stylex.tsx", 12 12 - // TODO: 13 13 - // "button" 7 7 + "../theme", 8 8 + "../button/context.ts", 14 9 ], 15 10 dependencies: { 16 16 - "react-aria-components": "^1.13.0", 11 11 + "@stylexjs/stylex": "^0.18.1", 12 12 + "react-aria-components": "^1.16.0", 17 13 }, 18 14 };

+7 -45

packages/hip-ui/src/components/button/button-config.ts

reviewed

··· 4 4 name: "button", 5 5 filepath: "./index.tsx", 6 6 hipDependencies: [ 7 7 - "../haptics/haptics.ts", 8 8 - "../haptics/context.tsx", 9 9 - "../haptics/useHaptics.ts", 10 10 - "../haptics/index.ts", 11 11 - "../theme/color.stylex.tsx", 12 12 - "../theme/semantic-spacing.stylex.tsx", 13 13 - "../theme/radius.stylex.tsx", 14 14 - "../theme/semantic-color.stylex.tsx", 15 15 - "../theme/typography.stylex.tsx", 16 16 - "../theme/shadow.stylex.tsx", 7 7 + "../haptics", 8 8 + "../progress-circle", 9 9 + "../theme", 10 10 + "../context.ts", 17 11 "../theme/useButtonStyles.ts", 18 18 - "./context.ts", 19 19 - "../theme/types.ts", 20 20 - "../theme/colors/amber.stylex.tsx", 21 21 - "../theme/colors/blue.stylex.tsx", 22 22 - "../theme/colors/bronze.stylex.tsx", 23 23 - "../theme/colors/brown.stylex.tsx", 24 24 - "../theme/colors/crimson.stylex.tsx", 25 25 - "../theme/colors/cyan.stylex.tsx", 26 26 - "../theme/colors/gold.stylex.tsx", 27 27 - "../theme/colors/grass.stylex.tsx", 28 28 - "../theme/colors/gray.stylex.tsx", 29 29 - "../theme/colors/green.stylex.tsx", 30 30 - "../theme/colors/indigo.stylex.tsx", 31 31 - "../theme/colors/iris.stylex.tsx", 32 32 - "../theme/colors/jade.stylex.tsx", 33 33 - "../theme/colors/lime.stylex.tsx", 34 34 - "../theme/colors/mauve.stylex.tsx", 35 35 - "../theme/colors/mint.stylex.tsx", 36 36 - "../theme/colors/olive.stylex.tsx", 37 37 - "../theme/colors/orange.stylex.tsx", 38 38 - "../theme/colors/pink.stylex.tsx", 39 39 - "../theme/colors/plum.stylex.tsx", 40 40 - "../theme/colors/purple.stylex.tsx", 41 41 - "../theme/colors/red.stylex.tsx", 42 42 - "../theme/colors/ruby.stylex.tsx", 43 43 - "../theme/colors/sage.stylex.tsx", 44 44 - "../theme/colors/sand.stylex.tsx", 45 45 - "../theme/colors/sky.stylex.tsx", 46 46 - "../theme/colors/slate.stylex.tsx", 47 47 - "../theme/colors/teal.stylex.tsx", 48 48 - "../theme/colors/tomato.stylex.tsx", 49 49 - "../theme/colors/violet.stylex.tsx", 50 50 - "../theme/colors/yellow.stylex.tsx", 12 12 + "context.ts", 51 13 ], 52 14 dependencies: { 53 53 - "react-aria-components": "^1.13.0", 54 54 - "web-haptics": "^0.0.6", 15 15 + "@stylexjs/stylex": "^0.18.1", 16 16 + "react-aria-components": "^1.16.0", 55 17 }, 56 18 };

+13

packages/hip-ui/src/components/calendar/calendar-config.ts

reviewed

··· 3 3 export const calendarConfig: ComponentConfig = { 4 4 name: "calendar", 5 5 filepath: "./index.tsx", 6 6 + hipDependencies: [ 7 7 + "../flex", 8 8 + "../icon-button", 9 9 + "../label", 10 10 + "../select", 11 11 + "../theme", 12 12 + ], 13 13 + dependencies: { 14 14 + "@stylexjs/stylex": "^0.18.1", 15 15 + "lucide-react": "^0.548.0", 16 16 + "react-aria": "^3.47.0", 17 17 + "react-aria-components": "^1.16.0", 18 18 + }, 6 19 };

+6 -2

packages/hip-ui/src/components/card/card-config.ts

reviewed

··· 4 4 name: "card", 5 5 filepath: "./index.tsx", 6 6 hipDependencies: [ 7 7 - "../theme/radius.stylex.tsx", 8 8 - "../theme/semantic-color.stylex.tsx", 7 7 + "../aspect-ratio", 8 8 + "../theme", 9 9 + "../context.ts", 9 10 ], 11 11 + dependencies: { 12 12 + "@stylexjs/stylex": "^0.18.1", 13 13 + }, 10 14 };

+11

packages/hip-ui/src/components/checkbox/checkbox-config.ts

reviewed

··· 3 3 export const checkboxConfig: ComponentConfig = { 4 4 name: "checkbox", 5 5 filepath: "./index.tsx", 6 6 + hipDependencies: [ 7 7 + "../flex", 8 8 + "../label", 9 9 + "../theme", 10 10 + "../context.ts", 11 11 + ], 12 12 + dependencies: { 13 13 + "@stylexjs/stylex": "^0.18.1", 14 14 + "lucide-react": "^0.548.0", 15 15 + "react-aria-components": "^1.16.0", 16 16 + }, 6 17 };

+7

packages/hip-ui/src/components/color-area/color-area-config.ts

reviewed

··· 3 3 export const colorAreaConfig: ComponentConfig = { 4 4 name: "color-area", 5 5 filepath: "./index.tsx", 6 6 + hipDependencies: [ 7 7 + "../theme", 8 8 + ], 9 9 + dependencies: { 10 10 + "@stylexjs/stylex": "^0.18.1", 11 11 + "react-aria-components": "^1.16.0", 12 12 + }, 6 13 };

+8 -6

packages/hip-ui/src/components/color-field/color-field-config.ts

reviewed

··· 4 4 name: "color-field", 5 5 filepath: "./index.tsx", 6 6 hipDependencies: [ 7 7 - "../theme/semantic-spacing.stylex.tsx", 8 8 - "../theme/radius.stylex.tsx", 9 9 - "../theme/semantic-color.stylex.tsx", 10 10 - "../theme/typography.stylex.tsx", 11 11 - "../theme/shadow.stylex.tsx", 7 7 + "../flex", 8 8 + "../label", 9 9 + "../theme", 10 10 + "../context.ts", 11 11 + "../suffix-icon/index.tsx", 12 12 "../theme/useInputStyles.ts", 13 13 ], 14 14 dependencies: { 15 15 - "lucide-react": "^0.545.0", 15 15 + "@stylexjs/stylex": "^0.18.1", 16 16 + "lucide-react": "^0.548.0", 17 17 + "react-aria-components": "^1.16.0", 16 18 }, 17 19 };

+18

packages/hip-ui/src/components/color-picker/color-picker-config.ts

reviewed

··· 3 3 export const colorPickerConfig: ComponentConfig = { 4 4 name: "color-picker", 5 5 filepath: "./index.tsx", 6 6 + hipDependencies: [ 7 7 + "../color-area", 8 8 + "../color-field", 9 9 + "../color-slider", 10 10 + "../color-swatch", 11 11 + "../color-swatch-picker", 12 12 + "../flex", 13 13 + "../icon-button", 14 14 + "../select", 15 15 + "../separator", 16 16 + "../theme", 17 17 + "../context.ts", 18 18 + ], 19 19 + dependencies: { 20 20 + "@stylexjs/stylex": "^0.18.1", 21 21 + "lucide-react": "^0.548.0", 22 22 + "react-aria-components": "^1.16.0", 23 23 + }, 6 24 };

+10

packages/hip-ui/src/components/color-slider/color-slider-config.ts

reviewed

··· 3 3 export const colorSliderConfig: ComponentConfig = { 4 4 name: "color-slider", 5 5 filepath: "./index.tsx", 6 6 + hipDependencies: [ 7 7 + "../color-area", 8 8 + "../label", 9 9 + "../theme", 10 10 + "../context.ts", 11 11 + ], 12 12 + dependencies: { 13 13 + "@stylexjs/stylex": "^0.18.1", 14 14 + "react-aria-components": "^1.16.0", 15 15 + }, 6 16 };

+9

packages/hip-ui/src/components/color-swatch-picker/color-swatch-picker-config.ts

reviewed

··· 3 3 export const colorSwatchPickerConfig: ComponentConfig = { 4 4 name: "color-swatch-picker", 5 5 filepath: "./index.tsx", 6 6 + hipDependencies: [ 7 7 + "../color-swatch", 8 8 + "../theme", 9 9 + "../context.ts", 10 10 + ], 11 11 + dependencies: { 12 12 + "@stylexjs/stylex": "^0.18.1", 13 13 + "react-aria-components": "^1.16.0", 14 14 + }, 6 15 };

+8

packages/hip-ui/src/components/color-swatch/link-config.ts

reviewed

··· 3 3 export const colorSwatchConfig: ComponentConfig = { 4 4 name: "color-swatch", 5 5 filepath: "./index.tsx", 6 6 + hipDependencies: [ 7 7 + "../theme", 8 8 + "../context.ts", 9 9 + ], 10 10 + dependencies: { 11 11 + "@stylexjs/stylex": "^0.18.1", 12 12 + "react-aria-components": "^1.16.0", 13 13 + }, 6 14 };

+10

packages/hip-ui/src/components/color-wheel/color-wheel-config.ts

reviewed

··· 3 3 export const colorWheelConfig: ComponentConfig = { 4 4 name: "color-wheel", 5 5 filepath: "./index.tsx", 6 6 + hipDependencies: [ 7 7 + "../color-area", 8 8 + "../flex", 9 9 + "../theme", 10 10 + "../context.ts", 11 11 + ], 12 12 + dependencies: { 13 13 + "@stylexjs/stylex": "^0.18.1", 14 14 + "react-aria-components": "^1.16.0", 15 15 + }, 6 16 };

+13 -6

packages/hip-ui/src/components/combobox/combobox-config.ts

reviewed

··· 4 4 name: "combobox", 5 5 filepath: "./index.tsx", 6 6 hipDependencies: [ 7 7 - "../theme/semantic-spacing.stylex.tsx", 8 8 - "../theme/radius.stylex.tsx", 9 9 - "../theme/semantic-color.stylex.tsx", 10 10 - "../theme/typography.stylex.tsx", 11 11 - "../theme/shadow.stylex.tsx", 7 7 + "../flex", 8 8 + "../label", 9 9 + "../listbox", 10 10 + "../theme", 11 11 + "../typography", 12 12 + "../context.ts", 13 13 + "../suffix-icon/index.tsx", 12 14 "../theme/useInputStyles.ts", 13 13 - "../theme/usePopoverStyles.ts", 15 15 + "../theme/useListBoxItemStyles.ts", 14 16 ], 17 17 + dependencies: { 18 18 + "@stylexjs/stylex": "^0.18.1", 19 19 + "lucide-react": "^0.548.0", 20 20 + "react-aria-components": "^1.16.0", 21 21 + }, 15 22 };

+8 -5

packages/hip-ui/src/components/command-menu/command-menu-config.ts

reviewed

··· 4 4 name: "command-menu", 5 5 filepath: "./index.tsx", 6 6 hipDependencies: [ 7 7 + "../menu", 8 8 + "../search-field", 9 9 + "../separator", 10 10 + "../theme", 7 11 "../context.ts", 8 8 - "../theme/usePopoverStyles.ts", 9 9 - "../theme/useListBoxItemStyles.ts", 10 10 - "../theme/animations.stylex.tsx", 12 12 + "../theme/useDialogStyles.ts", 11 13 ], 12 14 dependencies: { 13 13 - "lucide-react": "^0.545.0", 14 15 "@react-stately/utils": "^3.10.8", 15 15 - "react-stately": "^3.42.0", 16 16 + "@stylexjs/stylex": "^0.18.1", 17 17 + "react-aria-components": "^1.16.0", 18 18 + "react-stately": "^3.45.0", 16 19 }, 17 20 };

+5 -1

packages/hip-ui/src/components/command-menu/index.tsx

reviewed

··· 19 19 import { SizeContext } from "../context"; 20 20 import { SearchField } from "../search-field"; 21 21 import { Separator } from "../separator"; 22 22 - import { horizontalSpace, size as sizeSpace, verticalSpace } from "../theme/semantic-spacing.stylex"; 22 22 + import { 23 23 + horizontalSpace, 24 24 + size as sizeSpace, 25 25 + verticalSpace, 26 26 + } from "../theme/semantic-spacing.stylex"; 23 27 import { useDialogStyles } from "../theme/useDialogStyles"; 24 28 25 29 const styles = stylex.create({

+4 -3

packages/hip-ui/src/components/content/content-config.ts

reviewed

··· 4 4 name: "content", 5 5 filepath: "./index.tsx", 6 6 hipDependencies: [ 7 7 - "../theme/semantic-spacing.stylex.tsx", 8 8 - "../theme/typography.stylex.tsx", 9 9 - "../theme/types.ts", 7 7 + "../theme", 10 8 ], 9 9 + dependencies: { 10 10 + "@stylexjs/stylex": "^0.18.1", 11 11 + }, 11 12 };

+5 -1

packages/hip-ui/src/components/content/index.tsx

reviewed

··· 2 2 3 3 import type { StyleXComponentProps } from "../theme/types"; 4 4 5 5 - import { horizontalSpace, size as sizeSpace, verticalSpace } from "../theme/semantic-spacing.stylex"; 5 5 + import { 6 6 + horizontalSpace, 7 7 + size as sizeSpace, 8 8 + verticalSpace, 9 9 + } from "../theme/semantic-spacing.stylex"; 6 10 import { lineHeight } from "../theme/typography.stylex"; 7 11 8 12 const styles = stylex.create({

+8 -2

packages/hip-ui/src/components/context-menu/context-menu-config.ts

reviewed

··· 3 3 export const contextMenuConfig: ComponentConfig = { 4 4 name: "context-menu", 5 5 filepath: "./index.tsx", 6 6 + hipDependencies: [ 7 7 + "../theme", 8 8 + "../context.ts", 9 9 + ], 6 10 dependencies: { 7 11 "@react-types/overlays": "^3.9.2", 8 8 - "react-stately": "^3.42.0", 9 9 - "react-aria": "^3.44.0", 12 12 + "@stylexjs/stylex": "^0.18.1", 13 13 + "react-aria": "^3.47.0", 14 14 + "react-aria-components": "^1.16.0", 15 15 + "react-stately": "^3.45.0", 10 16 }, 11 17 };

+5 -2

packages/hip-ui/src/components/copy-to-clipboard-button/copy-to-clipboard-button-config.ts

reviewed

··· 3 3 export const copyToClipboardButtonConfig: ComponentConfig = { 4 4 name: "copy-to-clipboard-button", 5 5 filepath: "./index.tsx", 6 6 - hipDependencies: ["../icon-button/index.tsx", "../theme/types.ts"], 6 6 + hipDependencies: [ 7 7 + "../icon-button", 8 8 + "../theme", 9 9 + ], 7 10 dependencies: { 8 8 - "lucide-react": "^0.545.0", 11 11 + "lucide-react": "^0.548.0", 9 12 }, 10 13 };

+8 -6

packages/hip-ui/src/components/date-field/date-field-config.ts

reviewed

··· 4 4 name: "date-field", 5 5 filepath: "./index.tsx", 6 6 hipDependencies: [ 7 7 - "../theme/semantic-spacing.stylex.tsx", 8 8 - "../theme/radius.stylex.tsx", 9 9 - "../theme/semantic-color.stylex.tsx", 10 10 - "../theme/typography.stylex.tsx", 11 11 - "../theme/shadow.stylex.tsx", 7 7 + "../flex", 8 8 + "../label", 9 9 + "../theme", 10 10 + "../context.ts", 11 11 + "../suffix-icon/index.tsx", 12 12 "../theme/useInputStyles.ts", 13 13 ], 14 14 dependencies: { 15 15 - "lucide-react": "^0.545.0", 15 15 + "@stylexjs/stylex": "^0.18.1", 16 16 + "lucide-react": "^0.548.0", 17 17 + "react-aria-components": "^1.16.0", 16 18 }, 17 19 };

+12 -1

packages/hip-ui/src/components/date-picker/date-picker-config.ts

reviewed

··· 4 4 name: "date-picker", 5 5 filepath: "./index.tsx", 6 6 hipDependencies: [ 7 7 + "../calendar", 8 8 + "../date-field", 9 9 + "../flex", 10 10 + "../icon-button", 11 11 + "../label", 12 12 + "../theme", 13 13 + "../context.ts", 7 14 "../theme/useInputStyles.ts", 8 8 - "../theme/useCalendarStyles.ts", 9 15 ], 16 16 + dependencies: { 17 17 + "@stylexjs/stylex": "^0.18.1", 18 18 + "lucide-react": "^0.548.0", 19 19 + "react-aria-components": "^1.16.0", 20 20 + }, 10 21 };

+12 -1

packages/hip-ui/src/components/date-range-picker/date-range-picker-config.ts

reviewed

··· 4 4 name: "date-range-picker", 5 5 filepath: "./index.tsx", 6 6 hipDependencies: [ 7 7 + "../flex", 8 8 + "../icon-button", 9 9 + "../label", 10 10 + "../range-calendar", 11 11 + "../theme", 12 12 + "../context.ts", 13 13 + "../suffix-icon/index.tsx", 7 14 "../theme/useInputStyles.ts", 8 8 - "../theme/usePopoverStyles.ts", 9 15 ], 16 16 + dependencies: { 17 17 + "@stylexjs/stylex": "^0.18.1", 18 18 + "lucide-react": "^0.548.0", 19 19 + "react-aria-components": "^1.16.0", 20 20 + }, 10 21 };

+6 -8

packages/hip-ui/src/components/dialog/dialog-config.ts

reviewed

··· 4 4 name: "dialog", 5 5 filepath: "./index.tsx", 6 6 hipDependencies: [ 7 7 - "../haptics/haptics.ts", 8 8 - "../haptics/context.tsx", 9 9 - "../haptics/useHaptics.ts", 10 10 - "../haptics/index.ts", 7 7 + "../haptics", 8 8 + "../icon-button", 9 9 + "../theme", 11 10 "../context.ts", 12 11 "../theme/useDialogStyles.ts", 13 12 ], 14 13 dependencies: { 15 15 - "lucide-react": "^0.545.0", 16 16 - "web-haptics": "^0.0.6", 17 17 - "@react-stately/utils": "^3.10.8", 18 18 - "react-stately": "^3.42.0", 14 14 + "@stylexjs/stylex": "^0.18.1", 15 15 + "lucide-react": "^0.548.0", 16 16 + "react-aria-components": "^1.16.0", 19 17 }, 20 18 };

+6 -1

packages/hip-ui/src/components/dialog/index.tsx

reviewed

··· 17 17 import { useHaptics } from "../haptics"; 18 18 import { IconButton } from "../icon-button"; 19 19 import { uiColor } from "../theme/color.stylex"; 20 20 - import { gap, horizontalSpace, size as sizeSpace, verticalSpace } from "../theme/semantic-spacing.stylex"; 20 20 + import { 21 21 + gap, 22 22 + horizontalSpace, 23 23 + size as sizeSpace, 24 24 + verticalSpace, 25 25 + } from "../theme/semantic-spacing.stylex"; 21 26 import { fontSize, typeramp } from "../theme/typography.stylex"; 22 27 import { useDialogStyles } from "../theme/useDialogStyles"; 23 28

+6 -2

packages/hip-ui/src/components/disclosure-group/disclosure-group-config.ts

reviewed

··· 3 3 export const disclosureGroupConfig: ComponentConfig = { 4 4 name: "disclosure-group", 5 5 filepath: "./index.tsx", 6 6 - hipDependencies: ["../theme/types.ts", "../context.ts"], 6 6 + hipDependencies: [ 7 7 + "../theme", 8 8 + "../context.ts", 9 9 + ], 7 10 dependencies: { 8 8 - "react-aria-components": "^1.13.0", 11 11 + "@stylexjs/stylex": "^0.18.1", 12 12 + "react-aria-components": "^1.16.0", 9 13 }, 10 14 };

+4 -7

packages/hip-ui/src/components/disclosure/disclosure-config.ts

reviewed

··· 4 4 name: "disclosure", 5 5 filepath: "./index.tsx", 6 6 hipDependencies: [ 7 7 - "../theme/semantic-color.stylex.tsx", 8 8 - "../theme/semantic-spacing.stylex.tsx", 9 9 - "../theme/typography.stylex.tsx", 10 10 - "../theme/radius.stylex.tsx", 11 11 - "../theme/animations.stylex.tsx", 7 7 + "../theme", 12 8 "../context.ts", 13 9 ], 14 10 dependencies: { 15 15 - "react-aria-components": "^1.13.0", 16 16 - "lucide-react": "^0.263.1", 11 11 + "@stylexjs/stylex": "^0.18.1", 12 12 + "lucide-react": "^0.548.0", 13 13 + "react-aria-components": "^1.16.0", 17 14 }, 18 15 };

+9 -12

packages/hip-ui/src/components/drawer/drawer-config.ts

reviewed

··· 4 4 name: "drawer", 5 5 filepath: "./index.tsx", 6 6 hipDependencies: [ 7 7 - "../haptics/haptics.ts", 8 8 - "../haptics/context.tsx", 9 9 - "../haptics/useHaptics.ts", 10 10 - "../haptics/index.ts", 7 7 + "../haptics", 8 8 + "../icon-button", 9 9 + "../theme", 11 10 "../context.ts", 12 11 "../theme/useDialogStyles.ts", 13 13 - "../theme/semantic-spacing.stylex.tsx", 14 14 - "../theme/semantic-color.stylex.tsx", 15 15 - "../theme/typography.stylex.tsx", 16 16 - "../theme/types.ts", 17 17 - "./NonModalDrawer.tsx", 12 12 + "NonModalDrawer.tsx", 18 13 ], 19 14 dependencies: { 20 20 - "react-aria-components": "^1.13.0", 21 21 - "lucide-react": "^0.545.0", 22 22 - "web-haptics": "^0.0.6", 15 15 + "@react-aria/utils": "^3.33.1", 16 16 + "@stylexjs/stylex": "^0.18.1", 17 17 + "lucide-react": "^0.548.0", 18 18 + "react-aria": "^3.47.0", 19 19 + "react-aria-components": "^1.16.0", 23 20 }, 24 21 };

+6 -1

packages/hip-ui/src/components/drawer/index.tsx

reviewed

··· 22 22 animations, 23 23 } from "../theme/animations.stylex"; 24 24 import { uiColor } from "../theme/color.stylex"; 25 25 - import { gap, horizontalSpace, size as sizeSpace, verticalSpace } from "../theme/semantic-spacing.stylex"; 25 25 + import { 26 26 + gap, 27 27 + horizontalSpace, 28 28 + size as sizeSpace, 29 29 + verticalSpace, 30 30 + } from "../theme/semantic-spacing.stylex"; 26 31 import { typeramp } from "../theme/typography.stylex"; 27 32 import { useDialogStyles } from "../theme/useDialogStyles"; 28 33 import { NonModalDrawer } from "./NonModalDrawer";

+5 -9

packages/hip-ui/src/components/editable-text/editable-text-config.ts

reviewed

··· 4 4 name: "editable-text", 5 5 filepath: "./index.tsx", 6 6 hipDependencies: [ 7 7 - "../theme/semantic-spacing.stylex.tsx", 8 8 - "../theme/radius.stylex.tsx", 9 9 - "../theme/semantic-color.stylex.tsx", 10 10 - "../theme/typography.stylex.tsx", 11 11 - "../theme/types.ts", 12 12 - "../theme/useInputStyles.ts", 13 13 - "../context.ts", 14 14 - "../typography/text.tsx", 7 7 + "../theme", 15 8 ], 16 9 dependencies: { 17 17 - "react-aria-components": "^1.13.0", 10 10 + "@react-stately/utils": "^3.10.8", 11 11 + "@stylexjs/stylex": "^0.18.1", 12 12 + "react-aria": "^3.47.0", 13 13 + "react-aria-components": "^1.16.0", 18 14 }, 19 15 };

+5 -1

packages/hip-ui/src/components/editable-text/index.tsx

reviewed

··· 11 11 import type { StyleXComponentProps } from "../theme/types"; 12 12 13 13 import { radius } from "../theme/radius.stylex"; 14 14 - import { horizontalSpace, size as sizeSpace, verticalSpace } from "../theme/semantic-spacing.stylex"; 14 14 + import { 15 15 + horizontalSpace, 16 16 + size as sizeSpace, 17 17 + verticalSpace, 18 18 + } from "../theme/semantic-spacing.stylex"; 15 19 16 20 const focusClosestFocusableElement = () => { 17 21 const focusableElements = document.activeElement?.parentElement?.closest(

+4 -4

packages/hip-ui/src/components/empty-state/empty-state-config.ts

reviewed

··· 4 4 name: "empty-state", 5 5 filepath: "./index.tsx", 6 6 hipDependencies: [ 7 7 - "../theme/semantic-spacing.stylex.tsx", 8 8 - "../theme/semantic-color.stylex.tsx", 9 9 - "../theme/typography.stylex.tsx", 10 10 - "../theme/types.ts", 7 7 + "../theme", 11 8 "../context.ts", 12 9 ], 10 10 + dependencies: { 11 11 + "@stylexjs/stylex": "^0.18.1", 12 12 + }, 13 13 };

+7 -1

packages/hip-ui/src/components/file-drop-zone/file-drop-zone-config.ts

reviewed

··· 3 3 export const fileDropZoneConfig: ComponentConfig = { 4 4 name: "file-drop-zone", 5 5 filepath: "./index.tsx", 6 6 - hipDependencies: [], 6 6 + hipDependencies: [ 7 7 + "../theme", 8 8 + ], 9 9 + dependencies: { 10 10 + "@stylexjs/stylex": "^0.18.1", 11 11 + "react-aria-components": "^1.16.0", 12 12 + }, 7 13 };

+6 -1

packages/hip-ui/src/components/flex/flex-config.ts

reviewed

··· 3 3 export const flexConfig: ComponentConfig = { 4 4 name: "flex", 5 5 filepath: "./index.tsx", 6 6 - hipDependencies: ["../theme/semantic-spacing.stylex.tsx"], 6 6 + hipDependencies: [ 7 7 + "../theme", 8 8 + ], 9 9 + dependencies: { 10 10 + "@stylexjs/stylex": "^0.18.1", 11 11 + }, 7 12 };

+5 -8

packages/hip-ui/src/components/footer/footer-config.ts

reviewed

··· 4 4 name: "footer", 5 5 filepath: "./index.tsx", 6 6 hipDependencies: [ 7 7 - "../theme/semantic-spacing.stylex.tsx", 8 8 - "../theme/semantic-color.stylex.tsx", 9 9 - "../theme/typography.stylex.tsx", 10 10 - "../theme/media-queries.stylex.tsx", 11 11 - "../theme/types.ts", 12 12 - "../button/index.tsx", 13 13 - "../text-field/index.tsx", 7 7 + "../button", 8 8 + "../text-field", 9 9 + "../theme", 14 10 ], 15 11 dependencies: { 16 16 - "react-aria-components": "^1.13.0", 12 12 + "@stylexjs/stylex": "^0.18.1", 13 13 + "react-aria-components": "^1.16.0", 17 14 }, 18 15 };

+5 -2

packages/hip-ui/src/components/form/form-config.ts

reviewed

··· 3 3 export const formConfig: ComponentConfig = { 4 4 name: "form", 5 5 filepath: "./index.tsx", 6 6 - hipDependencies: ["../theme/semantic-spacing.stylex.tsx", "../theme/types.ts"], 6 6 + hipDependencies: [ 7 7 + "../theme", 8 8 + ], 7 9 dependencies: { 8 8 - "react-aria-components": "^1.13.0", 10 10 + "@stylexjs/stylex": "^0.18.1", 11 11 + "react-aria-components": "^1.16.0", 9 12 }, 10 13 };

+6 -1

packages/hip-ui/src/components/grid/grid-config.ts

reviewed

··· 3 3 export const gridConfig: ComponentConfig = { 4 4 name: "grid", 5 5 filepath: "./index.tsx", 6 6 - hipDependencies: ["../theme/semantic-spacing.stylex.tsx"], 6 6 + hipDependencies: [ 7 7 + "../theme", 8 8 + ], 9 9 + dependencies: { 10 10 + "@stylexjs/stylex": "^0.18.1", 11 11 + }, 7 12 };

+5 -1

packages/hip-ui/src/components/haptics/haptics-config.ts

reviewed

··· 3 3 export const hapticsConfig: ComponentConfig = { 4 4 name: "haptics", 5 5 filepath: "./index.ts", 6 6 - hipDependencies: ["./haptics.ts", "./context.tsx", "./useHaptics.ts"], 6 6 + hipDependencies: [ 7 7 + "context.tsx", 8 8 + "haptics.ts", 9 9 + "useHaptics.ts", 10 10 + ], 7 11 dependencies: { 8 12 "web-haptics": "^0.0.6", 9 13 },

+4 -6

packages/hip-ui/src/components/header-layout/header-layout-config.ts

reviewed

··· 4 4 name: "header-layout", 5 5 filepath: "./index.tsx", 6 6 hipDependencies: [ 7 7 - "../theme/semantic-spacing.stylex.tsx", 8 8 - "../theme/color.stylex.tsx", 9 9 - "../theme/semantic-color.stylex.tsx", 10 10 - "../theme/media-queries.stylex.tsx", 11 11 - "../theme/types.ts", 7 7 + "../theme", 12 8 ], 13 13 - dependencies: {}, 9 9 + dependencies: { 10 10 + "@stylexjs/stylex": "^0.18.1", 11 11 + }, 14 12 };

+5 -1

packages/hip-ui/src/components/header-layout/index.tsx

reviewed

··· 6 6 7 7 import { primaryColor, uiColor } from "../theme/color.stylex"; 8 8 import { containerBreakpoints } from "../theme/media-queries.stylex"; 9 9 - import { horizontalSpace, size as sizeSpace, verticalSpace } from "../theme/semantic-spacing.stylex"; 9 9 + import { 10 10 + horizontalSpace, 11 11 + size as sizeSpace, 12 12 + verticalSpace, 13 13 + } from "../theme/semantic-spacing.stylex"; 10 14 11 15 const styles = stylex.create({ 12 16 root: {

+8

packages/hip-ui/src/components/hover-card/hover-card-config.ts

reviewed

··· 3 3 export const hoverCardConfig: ComponentConfig = { 4 4 name: "hover-card", 5 5 filepath: "./index.tsx", 6 6 + hipDependencies: [ 7 7 + "../theme", 8 8 + ], 9 9 + dependencies: { 10 10 + "@stylexjs/stylex": "^0.18.1", 11 11 + "react-aria": "^3.47.0", 12 12 + "react-aria-components": "^1.16.0", 13 13 + }, 6 14 };

+4 -1

packages/hip-ui/src/components/hover-card/index.tsx

reviewed

··· 18 18 19 19 import type { StyleXComponentProps } from "../theme/types"; 20 20 21 21 - import { horizontalSpace, verticalSpace } from "../theme/semantic-spacing.stylex"; 21 21 + import { 22 22 + horizontalSpace, 23 23 + verticalSpace, 24 24 + } from "../theme/semantic-spacing.stylex"; 22 25 import { shadow } from "../theme/shadow.stylex"; 23 26 import { usePopoverStyles } from "../theme/usePopoverStyles"; 24 27

+6 -9

packages/hip-ui/src/components/icon-button/icon-button-config.ts

reviewed

··· 4 4 name: "icon-button", 5 5 filepath: "./index.tsx", 6 6 hipDependencies: [ 7 7 - "../theme/semantic-spacing.stylex.tsx", 8 8 - "../theme/radius.stylex.tsx", 9 9 - "../theme/semantic-color.stylex.tsx", 10 10 - "../theme/typography.stylex.tsx", 11 11 - "../theme/shadow.stylex.tsx", 12 12 - // TODOD 13 13 - // "button" 14 14 - // "tooltip" 7 7 + "../button", 8 8 + "../theme", 9 9 + "../tooltip", 10 10 + "../context.ts", 15 11 ], 16 12 dependencies: { 17 17 - "react-aria-components": "^1.13.0", 13 13 + "@stylexjs/stylex": "^0.18.1", 14 14 + "react-aria-components": "^1.16.0", 18 15 }, 19 16 };

+3 -5

packages/hip-ui/src/components/image-cropper/image-cropper-config.ts

reviewed

··· 4 4 name: "image-cropper", 5 5 filepath: "./index.tsx", 6 6 hipDependencies: [ 7 7 - "../theme/semantic-spacing.stylex.tsx", 8 8 - "../theme/radius.stylex.tsx", 9 9 - "../theme/shadow.stylex.tsx", 10 10 - "../theme/color.stylex.tsx", 11 11 - "../theme/types.ts", 7 7 + "../theme", 12 8 ], 13 9 dependencies: { 14 10 "@origin-space/image-cropper": "^0.1.9", 11 11 + "@react-aria/utils": "^3.33.1", 12 12 + "@stylexjs/stylex": "^0.18.1", 15 13 }, 16 14 };

+4 -1

packages/hip-ui/src/components/kbd/index.tsx

reviewed

··· 5 5 6 6 import { uiColor } from "../theme/color.stylex"; 7 7 import { radius } from "../theme/radius.stylex"; 8 8 - import { horizontalSpace, verticalSpace } from "../theme/semantic-spacing.stylex"; 8 8 + import { 9 9 + horizontalSpace, 10 10 + verticalSpace, 11 11 + } from "../theme/semantic-spacing.stylex"; 9 12 import { fontFamily, lineHeight, tracking } from "../theme/typography.stylex"; 10 13 11 14 const styles = stylex.create({

+5 -1

packages/hip-ui/src/components/kbd/kbd-config.ts

reviewed

··· 3 3 export const kbdConfig: ComponentConfig = { 4 4 name: "kbd", 5 5 filepath: "./index.tsx", 6 6 + hipDependencies: [ 7 7 + "../theme", 8 8 + ], 6 9 dependencies: { 7 7 - "@react-aria/utils": "^3.10.8", 10 10 + "@react-aria/utils": "^3.33.1", 11 11 + "@stylexjs/stylex": "^0.18.1", 8 12 }, 9 13 };

+8

packages/hip-ui/src/components/label/label-config.ts

reviewed

··· 3 3 export const labelConfig: ComponentConfig = { 4 4 name: "label", 5 5 filepath: "./index.tsx", 6 6 + hipDependencies: [ 7 7 + "../theme", 8 8 + "../context.ts", 9 9 + ], 10 10 + dependencies: { 11 11 + "@stylexjs/stylex": "^0.18.1", 12 12 + "react-aria-components": "^1.16.0", 13 13 + }, 6 14 };

+5 -1

packages/hip-ui/src/components/lightbox/index.tsx

reviewed

··· 25 25 animations, 26 26 } from "../theme/animations.stylex"; 27 27 import { ui } from "../theme/semantic-color.stylex"; 28 28 - import { gap, horizontalSpace, verticalSpace } from "../theme/semantic-spacing.stylex"; 28 28 + import { 29 29 + gap, 30 30 + horizontalSpace, 31 31 + verticalSpace, 32 32 + } from "../theme/semantic-spacing.stylex"; 29 33 30 34 const SLIDE_DURATION_MS = 250; 31 35

+5 -8

packages/hip-ui/src/components/lightbox/lightbox-config.ts

reviewed

··· 4 4 name: "lightbox", 5 5 filepath: "./index.tsx", 6 6 hipDependencies: [ 7 7 - "../icon-button/index.tsx", 8 8 - "../theme/animations.stylex.tsx", 9 9 - "../theme/color.stylex.tsx", 10 10 - "../theme/semantic-color.stylex.tsx", 11 11 - "../theme/semantic-spacing.stylex.tsx", 12 12 - "../theme/types.ts", 7 7 + "../icon-button", 8 8 + "../theme", 13 9 ], 14 10 dependencies: { 15 15 - "lucide-react": "^0.545.0", 16 16 - "react-aria-components": "^1.13.0", 11 11 + "@stylexjs/stylex": "^0.18.1", 12 12 + "lucide-react": "^0.548.0", 13 13 + "react-aria-components": "^1.16.0", 17 14 }, 18 15 };

+5 -1

packages/hip-ui/src/components/link/index.tsx

reviewed

··· 7 7 import type { StyleXComponentProps } from "../theme/types"; 8 8 9 9 import { primaryColor, uiColor } from "../theme/color.stylex"; 10 10 - import { gap, size as sizeSpace, verticalSpace } from "../theme/semantic-spacing.stylex"; 10 10 + import { 11 11 + gap, 12 12 + size as sizeSpace, 13 13 + verticalSpace, 14 14 + } from "../theme/semantic-spacing.stylex"; 11 15 import { fontFamily, fontWeight } from "../theme/typography.stylex"; 12 16 import { LinkContext } from "./link-context"; 13 17

+8 -1

packages/hip-ui/src/components/link/link-config.ts

reviewed

··· 3 3 export const linkConfig: ComponentConfig = { 4 4 name: "link", 5 5 filepath: "./index.tsx", 6 6 - hipDependencies: ["./link-context.ts"], 6 6 + hipDependencies: [ 7 7 + "../theme", 8 8 + "link-context.ts", 9 9 + ], 10 10 + dependencies: { 11 11 + "@stylexjs/stylex": "^0.18.1", 12 12 + "react-aria-components": "^1.16.0", 13 13 + }, 7 14 };

+5 -1

packages/hip-ui/src/components/listbox/index.tsx

reviewed

··· 26 26 import { useHaptics } from "../haptics"; 27 27 import { Separator } from "../separator"; 28 28 import { ui } from "../theme/semantic-color.stylex"; 29 29 - import { horizontalSpace, size as sizeSpace, verticalSpace } from "../theme/semantic-spacing.stylex"; 29 29 + import { 30 30 + horizontalSpace, 31 31 + size as sizeSpace, 32 32 + verticalSpace, 33 33 + } from "../theme/semantic-spacing.stylex"; 30 34 import { typeramp } from "../theme/typography.stylex"; 31 35 import { 32 36 estimatedRowHeights,

+8 -5

packages/hip-ui/src/components/listbox/listbox-config.ts

reviewed

··· 4 4 name: "listbox", 5 5 filepath: "./index.tsx", 6 6 hipDependencies: [ 7 7 - "../haptics/haptics.ts", 8 8 - "../haptics/context.tsx", 9 9 - "../haptics/useHaptics.ts", 10 10 - "../haptics/index.ts", 7 7 + "../checkbox", 8 8 + "../haptics", 9 9 + "../separator", 10 10 + "../theme", 11 11 "../context.ts", 12 12 + "../theme/useListBoxItemStyles.ts", 12 13 ], 13 14 dependencies: { 14 14 - "web-haptics": "^0.0.6", 15 15 + "@stylexjs/stylex": "^0.18.1", 16 16 + "lucide-react": "^0.548.0", 17 17 + "react-aria-components": "^1.16.0", 15 18 }, 16 19 };

+4 -7

packages/hip-ui/src/components/markdown-content/markdown-content-config.ts

reviewed

··· 4 4 name: "markdown-content", 5 5 filepath: "./index.tsx", 6 6 hipDependencies: [ 7 7 - "../theme/color.stylex.tsx", 8 8 - "../theme/radius.stylex.tsx", 9 9 - "../theme/semantic-spacing.stylex.tsx", 10 10 - "../theme/typography.stylex.tsx", 11 11 - "../theme/types.ts", 12 12 - "../link/index.tsx", 13 13 - "../link/link-context.ts", 7 7 + "../link", 8 8 + "../theme", 9 9 + "../typography", 14 10 "../typography/text.tsx", 15 11 ], 16 12 dependencies: { 13 13 + "@stylexjs/stylex": "^0.18.1", 17 14 "react-markdown": "^10.1.0", 18 15 "rehype-sanitize": "^6.0.0", 19 16 "remark-gfm": "^4.0.0",

+4 -1

packages/hip-ui/src/components/menu/index.tsx

reviewed

··· 24 24 import { SizeContext } from "../context"; 25 25 import { useHaptics } from "../haptics"; 26 26 import { ListBoxSeparator } from "../listbox"; 27 27 - import { horizontalSpace, verticalSpace } from "../theme/semantic-spacing.stylex"; 27 27 + import { 28 28 + horizontalSpace, 29 29 + verticalSpace, 30 30 + } from "../theme/semantic-spacing.stylex"; 28 31 import { useListBoxItemStyles } from "../theme/useListBoxItemStyles"; 29 32 import { usePopoverStyles } from "../theme/usePopoverStyles"; 30 33

+6 -6

packages/hip-ui/src/components/menu/menu-config.ts

reviewed

··· 4 4 name: "menu", 5 5 filepath: "./index.tsx", 6 6 hipDependencies: [ 7 7 - "../haptics/haptics.ts", 8 8 - "../haptics/context.tsx", 9 9 - "../haptics/useHaptics.ts", 10 10 - "../haptics/index.ts", 7 7 + "../haptics", 8 8 + "../listbox", 9 9 + "../theme", 11 10 "../context.ts", 12 12 - "../theme/usePopoverStyles.ts", 13 11 "../theme/useListBoxItemStyles.ts", 14 12 ], 15 13 dependencies: { 16 16 - "web-haptics": "^0.0.6", 14 14 + "@stylexjs/stylex": "^0.18.1", 15 15 + "lucide-react": "^0.548.0", 16 16 + "react-aria-components": "^1.16.0", 17 17 }, 18 18 };

+5 -1

packages/hip-ui/src/components/menubar/index.tsx

reviewed

··· 21 21 import { animationDuration } from "../theme/animations.stylex"; 22 22 import { uiColor } from "../theme/color.stylex"; 23 23 import { radius } from "../theme/radius.stylex"; 24 24 - import { gap, horizontalSpace, size as sizeSpace } from "../theme/semantic-spacing.stylex"; 24 24 + import { 25 25 + gap, 26 26 + horizontalSpace, 27 27 + size as sizeSpace, 28 28 + } from "../theme/semantic-spacing.stylex"; 25 29 import { fontSize } from "../theme/typography.stylex"; 26 30 import { usePopoverStyles } from "../theme/usePopoverStyles"; 27 31

+7 -7

packages/hip-ui/src/components/menubar/menubar-config.ts

reviewed

··· 4 4 name: "menubar", 5 5 filepath: "./index.tsx", 6 6 hipDependencies: [ 7 7 - "../theme/animations.stylex.tsx", 8 8 - "../theme/semantic-color.stylex.tsx", 9 9 - "../theme/semantic-spacing.stylex.tsx", 10 10 - "../theme/types.ts", 11 11 - "../theme/usePopoverStyles.ts", 12 12 - "../menu/index.tsx", 7 7 + "../flex", 8 8 + "../theme", 9 9 + "../context.ts", 13 10 ], 14 11 dependencies: { 15 15 - "react-aria-components": "^1.13.0", 12 12 + "@react-stately/utils": "^3.10.8", 13 13 + "@stylexjs/stylex": "^0.18.1", 14 14 + "react-aria": "^3.47.0", 15 15 + "react-aria-components": "^1.16.0", 16 16 }, 17 17 };

+9

packages/hip-ui/src/components/meter/meter-config.ts

reviewed

··· 3 3 export const meterConfig: ComponentConfig = { 4 4 name: "meter", 5 5 filepath: "./index.tsx", 6 6 + hipDependencies: [ 7 7 + "../label", 8 8 + "../theme", 9 9 + "../context.ts", 10 10 + ], 11 11 + dependencies: { 12 12 + "@stylexjs/stylex": "^0.18.1", 13 13 + "react-aria-components": "^1.16.0", 14 14 + }, 6 15 };

+6 -1

packages/hip-ui/src/components/navbar/Navbar.tsx

reviewed

··· 16 16 import { primaryColor, uiColor } from "../theme/color.stylex"; 17 17 import { containerBreakpoints } from "../theme/media-queries.stylex"; 18 18 import { ui } from "../theme/semantic-color.stylex"; 19 19 - import { gap, horizontalSpace, size as sizeSpace, verticalSpace } from "../theme/semantic-spacing.stylex"; 19 19 + import { 20 20 + gap, 21 21 + horizontalSpace, 22 22 + size as sizeSpace, 23 23 + verticalSpace, 24 24 + } from "../theme/semantic-spacing.stylex"; 20 25 import { fontFamily, fontWeight } from "../theme/typography.stylex"; 21 26 22 27 const styles = stylex.create({

+10 -13

packages/hip-ui/src/components/navbar/navbar-config.ts

reviewed

··· 4 4 name: "navbar", 5 5 filepath: "./index.tsx", 6 6 hipDependencies: [ 7 7 - "../theme/semantic-spacing.stylex.tsx", 8 8 - "../theme/semantic-color.stylex.tsx", 9 9 - "../theme/media-queries.stylex.tsx", 10 10 - "../theme/types.ts", 7 7 + "../hover-card", 8 8 + "../icon-button", 9 9 + "../separator", 10 10 + "../theme", 11 11 "../context.ts", 12 12 - "../icon-button/index.tsx", 13 13 - "../flex/index.tsx", 14 14 - "../separator/index.tsx", 15 15 - "./useAnimatedNavbar.tsx", 16 16 - "./Navbar.tsx", 17 17 - "./NavbarMenu.tsx", 12 12 + "Navbar.tsx", 13 13 + "NavbarMenu.tsx", 18 14 ], 19 15 dependencies: { 20 20 - "react-aria-components": "^1.13.0", 21 21 - "lucide-react": "^0.263.1", 22 22 - "raf-throttle": "^2.0.6", 16 16 + "@stylexjs/stylex": "^0.18.1", 17 17 + "lucide-react": "^0.548.0", 18 18 + "react-aria": "^3.47.0", 19 19 + "react-aria-components": "^1.16.0", 23 20 }, 24 21 };

+11 -8

packages/hip-ui/src/components/number-field/number-field-config.ts

reviewed

··· 4 4 name: "number-field", 5 5 filepath: "./index.tsx", 6 6 hipDependencies: [ 7 7 - "./usePointerLock.tsx", 8 8 - "../theme/semantic-spacing.stylex.tsx", 9 9 - "../theme/radius.stylex.tsx", 10 10 - "../theme/semantic-color.stylex.tsx", 11 11 - "../theme/typography.stylex.tsx", 12 12 - "../theme/shadow.stylex.tsx", 7 7 + "../flex", 8 8 + "../label", 9 9 + "../theme", 10 10 + "../context.ts", 11 11 + "../suffix-icon/index.tsx", 13 12 "../theme/useInputStyles.ts", 13 13 + "usePointerLock.tsx", 14 14 ], 15 15 dependencies: { 16 16 - "@react-aria/overlays": "^3.30.0", 17 17 - "lucide-react": "^0.545.0", 16 16 + "@react-aria/overlays": "^3.31.2", 17 17 + "@stylexjs/stylex": "^0.18.1", 18 18 + "lucide-react": "^0.548.0", 19 19 + "react-aria": "^3.47.0", 20 20 + "react-aria-components": "^1.16.0", 18 21 }, 19 22 };

+10 -2

packages/hip-ui/src/components/page/Page.tsx

reviewed

··· 14 14 import { Flex } from "../flex"; 15 15 import { IconButton } from "../icon-button"; 16 16 import { primaryColor, uiColor } from "../theme/color.stylex"; 17 17 - import { breakpoints, containerBreakpoints } from "../theme/media-queries.stylex"; 17 17 + import { 18 18 + breakpoints, 19 19 + containerBreakpoints, 20 20 + } from "../theme/media-queries.stylex"; 18 21 import { radius } from "../theme/radius.stylex"; 19 19 - import { gap, horizontalSpace, size as sizeSpace, verticalSpace } from "../theme/semantic-spacing.stylex"; 22 22 + import { 23 23 + gap, 24 24 + horizontalSpace, 25 25 + size as sizeSpace, 26 26 + verticalSpace, 27 27 + } from "../theme/semantic-spacing.stylex"; 20 28 import { shadow } from "../theme/shadow.stylex"; 21 29 import { fontFamily } from "../theme/typography.stylex"; 22 30 import { Text } from "../typography/text";

+8 -13

packages/hip-ui/src/components/page/page-config.ts

reviewed

··· 4 4 name: "page", 5 5 filepath: "./index.tsx", 6 6 hipDependencies: [ 7 7 + "../flex", 8 8 + "../icon-button", 9 9 + "../theme", 10 10 + "../typography/text.tsx", 7 11 "context.ts", 8 8 - "../theme/color.stylex.tsx", 9 9 - "../theme/media-queries.stylex.tsx", 10 10 - "../theme/radius.stylex.tsx", 11 11 - "../theme/shadow.stylex.tsx", 12 12 - "../theme/semantic-spacing.stylex.tsx", 13 13 - "../theme/types.ts", 14 14 - "../flex/index.tsx", 15 15 - "../icon-button/index.tsx", 16 16 - "../link/index.tsx", 17 17 - "../typography/text.tsx", 18 18 - "./Page.tsx", 12 12 + "Page.tsx", 19 13 ], 20 14 dependencies: { 21 21 - "@tanstack/react-router": "^1.0.0", 22 22 - "react-aria-components": "^1.13.0", 15 15 + "@stylexjs/stylex": "^0.18.1", 16 16 + "@tanstack/react-router": "^1.133.0", 17 17 + "lucide-react": "^0.548.0", 23 18 }, 24 19 };

+9

packages/hip-ui/src/components/pagination/pagination-config.ts

reviewed

··· 3 3 export const paginationConfig: ComponentConfig = { 4 4 name: "pagination", 5 5 filepath: "./index.tsx", 6 6 + hipDependencies: [ 7 7 + "../button", 8 8 + "../flex", 9 9 + "../icon-button", 10 10 + "../theme", 11 11 + "../context.ts", 12 12 + ], 6 13 dependencies: { 7 14 "@react-stately/utils": "^3.10.8", 15 15 + "@stylexjs/stylex": "^0.18.1", 16 16 + "lucide-react": "^0.548.0", 8 17 }, 9 18 };

+5 -1

packages/hip-ui/src/components/popover/index.tsx

reviewed

··· 17 17 18 18 import { useHaptics } from "../haptics"; 19 19 import { uiColor } from "../theme/color.stylex"; 20 20 - import { horizontalSpace, size as sizeSpace, verticalSpace } from "../theme/semantic-spacing.stylex"; 20 20 + import { 21 21 + horizontalSpace, 22 22 + size as sizeSpace, 23 23 + verticalSpace, 24 24 + } from "../theme/semantic-spacing.stylex"; 21 25 import { usePopoverStyles } from "../theme/usePopoverStyles"; 22 26 23 27 const styles = stylex.create({

+4 -11

packages/hip-ui/src/components/popover/popover-config.ts

reviewed

··· 4 4 name: "popover", 5 5 filepath: "./index.tsx", 6 6 hipDependencies: [ 7 7 - "../haptics/haptics.ts", 8 8 - "../haptics/context.tsx", 9 9 - "../haptics/useHaptics.ts", 10 10 - "../haptics/index.ts", 11 11 - "../theme/semantic-spacing.stylex.tsx", 12 12 - "../theme/radius.stylex.tsx", 13 13 - "../theme/semantic-color.stylex.tsx", 14 14 - "../theme/typography.stylex.tsx", 15 15 - "../theme/shadow.stylex.tsx", 7 7 + "../haptics", 8 8 + "../theme", 16 9 ], 17 10 dependencies: { 18 18 - "react-aria-components": "^1.13.0", 19 19 - "web-haptics": "^0.0.6", 11 11 + "@stylexjs/stylex": "^0.18.1", 12 12 + "react-aria-components": "^1.16.0", 20 13 }, 21 14 };

+9

packages/hip-ui/src/components/progress-bar/progress-bar-config.ts

reviewed

··· 3 3 export const progressBarConfig: ComponentConfig = { 4 4 name: "progress-bar", 5 5 filepath: "./index.tsx", 6 6 + hipDependencies: [ 7 7 + "../label", 8 8 + "../theme", 9 9 + "../context.ts", 10 10 + ], 11 11 + dependencies: { 12 12 + "@stylexjs/stylex": "^0.18.1", 13 13 + "react-aria-components": "^1.16.0", 14 14 + }, 6 15 };

+5 -5

packages/hip-ui/src/components/progress-circle/progress-circle-config.ts

reviewed

··· 4 4 name: "progress-circle", 5 5 filepath: "./index.tsx", 6 6 hipDependencies: [ 7 7 + "../label", 8 8 + "../theme", 7 9 "../context.ts", 8 8 - "../label/index.tsx", 9 9 - "../theme/radius.stylex.tsx", 10 10 - "../theme/semantic-spacing.stylex.tsx", 11 11 - "../theme/types.ts", 12 10 ], 13 11 dependencies: { 14 14 - "react-aria-components": "^1.13.0", 12 12 + "@stylexjs/stylex": "^0.18.1", 13 13 + "lucide-react": "^0.548.0", 14 14 + "react-aria-components": "^1.16.0", 15 15 }, 16 16 };

+10

packages/hip-ui/src/components/radio/radio-config.ts

reviewed

··· 3 3 export const radioConfig: ComponentConfig = { 4 4 name: "radio", 5 5 filepath: "./index.tsx", 6 6 + hipDependencies: [ 7 7 + "../flex", 8 8 + "../label", 9 9 + "../theme", 10 10 + "../context.ts", 11 11 + ], 12 12 + dependencies: { 13 13 + "@stylexjs/stylex": "^0.18.1", 14 14 + "react-aria-components": "^1.16.0", 15 15 + }, 6 16 };

+11 -1

packages/hip-ui/src/components/range-calendar/range-calendar-config.ts

reviewed

··· 3 3 export const rangeCalendarConfig: ComponentConfig = { 4 4 name: "range-calendar", 5 5 filepath: "./index.tsx", 6 6 - hipDependencies: ["../theme/useCalendarStyles.ts"], 6 6 + hipDependencies: [ 7 7 + "../flex", 8 8 + "../icon-button", 9 9 + "../label", 10 10 + "../theme", 11 11 + ], 12 12 + dependencies: { 13 13 + "@stylexjs/stylex": "^0.18.1", 14 14 + "lucide-react": "^0.548.0", 15 15 + "react-aria-components": "^1.16.0", 16 16 + }, 7 17 };

+9 -6

packages/hip-ui/src/components/search-field/search-field-config.ts

reviewed

··· 4 4 name: "search-field", 5 5 filepath: "./index.tsx", 6 6 hipDependencies: [ 7 7 - "../theme/semantic-spacing.stylex.tsx", 8 8 - "../theme/radius.stylex.tsx", 9 9 - "../theme/semantic-color.stylex.tsx", 10 10 - "../theme/typography.stylex.tsx", 11 11 - "../theme/shadow.stylex.tsx", 7 7 + "../flex", 8 8 + "../icon-button", 9 9 + "../label", 10 10 + "../theme", 11 11 + "../context.ts", 12 12 + "../suffix-icon/index.tsx", 12 13 "../theme/useInputStyles.ts", 13 14 ], 14 15 dependencies: { 15 15 - "lucide-react": "^0.545.0", 16 16 + "@stylexjs/stylex": "^0.18.1", 17 17 + "lucide-react": "^0.548.0", 18 18 + "react-aria-components": "^1.16.0", 16 19 }, 17 20 };

+5 -7

packages/hip-ui/src/components/segmented-control/segmented-control-config.ts

reviewed

··· 4 4 name: "segmented-control", 5 5 filepath: "./index.tsx", 6 6 hipDependencies: [ 7 7 - "../haptics/haptics.ts", 8 8 - "../haptics/context.tsx", 9 9 - "../haptics/useHaptics.ts", 10 10 - "../haptics/index.ts", 11 11 - "../theme/animations.stylex.tsx", 7 7 + "../haptics", 8 8 + "../theme", 9 9 + "../context.ts", 12 10 ], 13 11 dependencies: { 14 14 - "react-aria-components": "^1.13.0", 15 15 - "web-haptics": "^0.0.6", 12 12 + "@stylexjs/stylex": "^0.18.1", 13 13 + "react-aria-components": "^1.16.0", 16 14 }, 17 15 };

+4 -1

packages/hip-ui/src/components/select/index.tsx

reviewed

··· 32 32 import { ListBox, ListBoxSeparator } from "../listbox"; 33 33 import { SearchField } from "../search-field"; 34 34 import { SuffixIcon } from "../suffix-icon"; 35 35 - import { horizontalSpace, verticalSpace } from "../theme/semantic-spacing.stylex"; 35 35 + import { 36 36 + horizontalSpace, 37 37 + verticalSpace, 38 38 + } from "../theme/semantic-spacing.stylex"; 36 39 import { useInputStyles } from "../theme/useInputStyles"; 37 40 import { estimatedRowHeights } from "../theme/useListBoxItemStyles"; 38 41 import { usePopoverStyles } from "../theme/usePopoverStyles";

+13 -7

packages/hip-ui/src/components/select/select-config.ts

reviewed

··· 4 4 name: "select", 5 5 filepath: "./index.tsx", 6 6 hipDependencies: [ 7 7 - "../theme/semantic-spacing.stylex.tsx", 8 8 - "../theme/radius.stylex.tsx", 9 9 - "../theme/semantic-color.stylex.tsx", 10 10 - "../theme/typography.stylex.tsx", 11 11 - "../theme/shadow.stylex.tsx", 12 12 - "../theme/useInputStyles.ts", 13 13 - "../theme/usePopoverStyles.ts", 7 7 + "../label", 8 8 + "../listbox", 9 9 + "../search-field", 10 10 + "../theme", 11 11 + "../context.ts", 14 12 "../suffix-icon/index.tsx", 13 13 + "../theme/useInputStyles.ts", 14 14 + "../theme/useListBoxItemStyles.ts", 15 15 ], 16 16 + dependencies: { 17 17 + "@react-aria/utils": "^3.33.1", 18 18 + "@stylexjs/stylex": "^0.18.1", 19 19 + "lucide-react": "^0.548.0", 20 20 + "react-aria-components": "^1.16.0", 21 21 + }, 16 22 };

+7

packages/hip-ui/src/components/separator/separator-config.ts

reviewed

··· 3 3 export const separatorConfig: ComponentConfig = { 4 4 name: "separator", 5 5 filepath: "./index.tsx", 6 6 + hipDependencies: [ 7 7 + "../theme", 8 8 + ], 9 9 + dependencies: { 10 10 + "@stylexjs/stylex": "^0.18.1", 11 11 + "react-aria-components": "^1.16.0", 12 12 + }, 6 13 };

+5 -1

packages/hip-ui/src/components/sidebar-layout/index.tsx

reviewed

··· 9 9 import { IconButton } from "../icon-button"; 10 10 import { uiColor } from "../theme/color.stylex"; 11 11 import { containerBreakpoints } from "../theme/media-queries.stylex"; 12 12 - import { horizontalSpace, size as sizeSpace, verticalSpace } from "../theme/semantic-spacing.stylex"; 12 12 + import { 13 13 + horizontalSpace, 14 14 + size as sizeSpace, 15 15 + verticalSpace, 16 16 + } from "../theme/semantic-spacing.stylex"; 13 17 14 18 const styles = stylex.create({ 15 19 wrapper: {

+7 -6

packages/hip-ui/src/components/sidebar-layout/sidebar-layout-config.ts

reviewed

··· 4 4 name: "sidebar-layout", 5 5 filepath: "./index.tsx", 6 6 hipDependencies: [ 7 7 - "../theme/semantic-spacing.stylex.tsx", 8 8 - "../theme/color.stylex.tsx", 9 9 - "../theme/semantic-color.stylex.tsx", 10 10 - "../theme/media-queries.stylex.tsx", 11 11 - "../theme/types.ts", 7 7 + "../drawer", 8 8 + "../icon-button", 9 9 + "../theme", 12 10 ], 13 13 - dependencies: {}, 11 11 + dependencies: { 12 12 + "@stylexjs/stylex": "^0.18.1", 13 13 + "lucide-react": "^0.548.0", 14 14 + }, 14 15 };

+12

packages/hip-ui/src/components/sidebar/sidebar-config.ts

reviewed

··· 3 3 export const sidebarConfig: ComponentConfig = { 4 4 name: "sidebar", 5 5 filepath: "./index.tsx", 6 6 + hipDependencies: [ 7 7 + "../flex", 8 8 + "../theme", 9 9 + "../typography/text.tsx", 10 10 + ], 11 11 + dependencies: { 12 12 + "@react-aria/utils": "^3.33.1", 13 13 + "@stylexjs/stylex": "^0.18.1", 14 14 + "lucide-react": "^0.548.0", 15 15 + "react-aria": "^3.47.0", 16 16 + "react-aria-components": "^1.16.0", 17 17 + }, 6 18 };

+4 -4

packages/hip-ui/src/components/skeleton/skeleton-config.ts

reviewed

··· 4 4 name: "skeleton", 5 5 filepath: "./index.tsx", 6 6 hipDependencies: [ 7 7 - "../theme/semantic-spacing.stylex.tsx", 8 8 - "../theme/radius.stylex.tsx", 9 9 - "../theme/semantic-color.stylex.tsx", 10 10 - "../theme/types.ts", 7 7 + "../theme", 11 8 ], 9 9 + dependencies: { 10 10 + "@stylexjs/stylex": "^0.18.1", 11 11 + }, 12 12 };

+8

packages/hip-ui/src/components/slider/slider-config.ts

reviewed

··· 3 3 export const sliderConfig: ComponentConfig = { 4 4 name: "slider", 5 5 filepath: "./index.tsx", 6 6 + hipDependencies: [ 7 7 + "../label", 8 8 + "../theme", 9 9 + ], 10 10 + dependencies: { 11 11 + "@stylexjs/stylex": "^0.18.1", 12 12 + "react-aria-components": "^1.16.0", 13 13 + }, 6 14 };

+10

packages/hip-ui/src/components/star-rating/star-rating-config.ts

reviewed

··· 3 3 export const starRatingConfig: ComponentConfig = { 4 4 name: "star-rating", 5 5 filepath: "./index.tsx", 6 6 + hipDependencies: [ 7 7 + "../flex", 8 8 + "../theme", 9 9 + "../typography/text.tsx", 10 10 + ], 11 11 + dependencies: { 12 12 + "@stylexjs/stylex": "^0.18.1", 13 13 + "lucide-react": "^0.548.0", 14 14 + "react-aria": "^3.47.0", 15 15 + }, 6 16 };

+5 -1

packages/hip-ui/src/components/switch/index.tsx

reviewed

··· 10 10 import { primaryColor, uiColor } from "../theme/color.stylex"; 11 11 import { mediaQueries } from "../theme/media-queries.stylex"; 12 12 import { radius } from "../theme/radius.stylex"; 13 13 - import { gap, horizontalSpace, size as sizeSpace } from "../theme/semantic-spacing.stylex"; 13 13 + import { 14 14 + gap, 15 15 + horizontalSpace, 16 16 + size as sizeSpace, 17 17 + } from "../theme/semantic-spacing.stylex"; 14 18 import { shadow } from "../theme/shadow.stylex"; 15 19 import { typeramp } from "../theme/typography.stylex"; 16 20

+4 -10

packages/hip-ui/src/components/switch/switch-config.ts

reviewed

··· 4 4 name: "switch", 5 5 filepath: "./index.tsx", 6 6 hipDependencies: [ 7 7 - "../haptics/haptics.ts", 8 8 - "../haptics/context.tsx", 9 9 - "../haptics/useHaptics.ts", 10 10 - "../haptics/index.ts", 11 11 - "../theme/semantic-spacing.stylex.tsx", 12 12 - "../theme/radius.stylex.tsx", 13 13 - "../theme/semantic-color.stylex.tsx", 14 14 - "../theme/typography.stylex.tsx", 15 15 - "../theme/shadow.stylex.tsx", 7 7 + "../haptics", 8 8 + "../theme", 16 9 ], 17 10 dependencies: { 18 18 - "web-haptics": "^0.0.6", 11 11 + "@stylexjs/stylex": "^0.18.1", 12 12 + "react-aria-components": "^1.16.0", 19 13 }, 20 14 };

+3 -6

packages/hip-ui/src/components/table-of-contents/table-of-contents-config.ts

reviewed

··· 4 4 name: "table-of-contents", 5 5 filepath: "./index.tsx", 6 6 hipDependencies: [ 7 7 - "../theme/animations.stylex.tsx", 8 8 - "../theme/color.stylex.tsx", 9 9 - "../theme/semantic-spacing.stylex.tsx", 10 10 - "../theme/typography.stylex.tsx", 11 11 - "../theme/types.ts", 7 7 + "../theme", 12 8 ], 13 9 dependencies: { 14 14 - "@stefanprobst/rehype-extract-toc": "^3.0.0", 10 10 + "@stylexjs/stylex": "^0.18.1", 11 11 + "react-aria": "^3.47.0", 15 12 }, 16 13 };

+14

packages/hip-ui/src/components/table/table-config.ts

reviewed

··· 3 3 export const tableConfig: ComponentConfig = { 4 4 name: "table", 5 5 filepath: "./index.tsx", 6 6 + hipDependencies: [ 7 7 + "../checkbox", 8 8 + "../flex", 9 9 + "../icon-button", 10 10 + "../theme", 11 11 + "../typography", 12 12 + "../context.ts", 13 13 + ], 14 14 + dependencies: { 15 15 + "@stylexjs/stylex": "^0.18.1", 16 16 + "lucide-react": "^0.548.0", 17 17 + "react-aria": "^3.47.0", 18 18 + "react-aria-components": "^1.16.0", 19 19 + }, 6 20 };

+4 -12

packages/hip-ui/src/components/tabs/tabs-config.ts

reviewed

··· 4 4 name: "tabs", 5 5 filepath: "./index.tsx", 6 6 hipDependencies: [ 7 7 - "../haptics/haptics.ts", 8 8 - "../haptics/context.tsx", 9 9 - "../haptics/useHaptics.ts", 10 10 - "../haptics/index.ts", 11 11 - "../theme/animations.stylex.tsx", 12 12 - "../theme/semantic-color.stylex.tsx", 13 13 - "../theme/semantic-spacing.stylex.tsx", 14 14 - "../theme/typography.stylex.tsx", 15 15 - "../theme/radius.stylex.tsx", 16 16 - "../theme/types.ts", 7 7 + "../haptics", 8 8 + "../theme", 17 9 "../context.ts", 18 10 ], 19 11 dependencies: { 20 20 - "react-aria-components": "^1.13.0", 21 21 - "web-haptics": "^0.0.6", 12 12 + "@stylexjs/stylex": "^0.18.1", 13 13 + "react-aria-components": "^1.16.0", 22 14 }, 23 15 };

+5 -4

packages/hip-ui/src/components/tag-group/tag-group-config.ts

reviewed

··· 4 4 name: "tag-group", 5 5 filepath: "./index.tsx", 6 6 hipDependencies: [ 7 7 - "../theme/semantic-spacing.stylex.tsx", 8 8 - "../theme/semantic-color.stylex.tsx", 9 9 - "../theme/types.ts", 7 7 + "../label", 8 8 + "../theme", 10 9 ], 11 10 dependencies: { 12 12 - "react-aria-components": "^1.13.0", 11 11 + "@stylexjs/stylex": "^0.18.1", 12 12 + "lucide-react": "^0.548.0", 13 13 + "react-aria-components": "^1.16.0", 13 14 }, 14 15 };

+4 -1

packages/hip-ui/src/components/text-area/index.tsx

reviewed

··· 22 22 23 23 import { SizeContext } from "../context"; 24 24 import { Description, FieldErrorMessage, Label } from "../label"; 25 25 - import { size as sizeSpace, verticalSpace } from "../theme/semantic-spacing.stylex"; 25 25 + import { 26 26 + size as sizeSpace, 27 27 + verticalSpace, 28 28 + } from "../theme/semantic-spacing.stylex"; 26 29 import { fontFamily, lineHeight } from "../theme/typography.stylex"; 27 30 import { useInputStyles } from "../theme/useInputStyles"; 28 31

+6 -6

packages/hip-ui/src/components/text-area/text-area-config.ts

reviewed

··· 4 4 name: "text-area", 5 5 filepath: "./index.tsx", 6 6 hipDependencies: [ 7 7 - "../theme/semantic-spacing.stylex.tsx", 8 8 - "../theme/radius.stylex.tsx", 9 9 - "../theme/semantic-color.stylex.tsx", 10 10 - "../theme/typography.stylex.tsx", 11 11 - "../theme/shadow.stylex.tsx", 7 7 + "../label", 8 8 + "../theme", 9 9 + "../context.ts", 10 10 + "../theme/useInputStyles.ts", 12 11 ], 13 12 dependencies: { 14 14 - "lucide-react": "^0.545.0", 13 13 + "@stylexjs/stylex": "^0.18.1", 14 14 + "react-aria-components": "^1.16.0", 15 15 }, 16 16 };

+9 -6

packages/hip-ui/src/components/text-field/text-field-config.ts

reviewed

··· 4 4 name: "text-field", 5 5 filepath: "./index.tsx", 6 6 hipDependencies: [ 7 7 - "../theme/semantic-spacing.stylex.tsx", 8 8 - "../theme/radius.stylex.tsx", 9 9 - "../theme/semantic-color.stylex.tsx", 10 10 - "../theme/typography.stylex.tsx", 11 11 - "../theme/shadow.stylex.tsx", 7 7 + "../flex", 8 8 + "../icon-button", 9 9 + "../label", 10 10 + "../theme", 11 11 + "../context.ts", 12 12 + "../suffix-icon/index.tsx", 12 13 "../theme/useInputStyles.ts", 13 14 ], 14 15 dependencies: { 15 15 - "lucide-react": "^0.545.0", 16 16 + "@stylexjs/stylex": "^0.18.1", 17 17 + "lucide-react": "^0.548.0", 18 18 + "react-aria-components": "^1.16.0", 16 19 }, 17 20 };

+43

packages/hip-ui/src/components/theme/index.ts

reviewed

··· 1 1 + export * from "./animations.stylex"; 2 2 + export * from "./color.stylex"; 3 3 + export * from "./media-queries.stylex"; 4 4 + export * from "./radius.stylex"; 5 5 + export * from "./semantic-color.stylex"; 6 6 + export * from "./semantic-spacing.stylex"; 7 7 + export * from "./shadow.stylex"; 8 8 + export * from "./spacing.stylex"; 9 9 + export * from "./typography.stylex"; 10 10 + export * from "./types"; 11 11 + export * from "./useCalendarStyles"; 12 12 + export * from "./usePopoverStyles"; 13 13 + export * from "./colors/amber.stylex"; 14 14 + export * from "./colors/blue.stylex"; 15 15 + export * from "./colors/bronze.stylex"; 16 16 + export * from "./colors/brown.stylex"; 17 17 + export * from "./colors/crimson.stylex"; 18 18 + export * from "./colors/cyan.stylex"; 19 19 + export * from "./colors/gold.stylex"; 20 20 + export * from "./colors/grass.stylex"; 21 21 + export * from "./colors/gray.stylex"; 22 22 + export * from "./colors/green.stylex"; 23 23 + export * from "./colors/indigo.stylex"; 24 24 + export * from "./colors/iris.stylex"; 25 25 + export * from "./colors/jade.stylex"; 26 26 + export * from "./colors/lime.stylex"; 27 27 + export * from "./colors/mauve.stylex"; 28 28 + export * from "./colors/mint.stylex"; 29 29 + export * from "./colors/olive.stylex"; 30 30 + export * from "./colors/orange.stylex"; 31 31 + export * from "./colors/pink.stylex"; 32 32 + export * from "./colors/plum.stylex"; 33 33 + export * from "./colors/purple.stylex"; 34 34 + export * from "./colors/red.stylex"; 35 35 + export * from "./colors/ruby.stylex"; 36 36 + export * from "./colors/sage.stylex"; 37 37 + export * from "./colors/sand.stylex"; 38 38 + export * from "./colors/sky.stylex"; 39 39 + export * from "./colors/slate.stylex"; 40 40 + export * from "./colors/teal.stylex"; 41 41 + export * from "./colors/tomato.stylex"; 42 42 + export * from "./colors/violet.stylex"; 43 43 + export * from "./colors/yellow.stylex";

+55

packages/hip-ui/src/components/theme/theme-config.ts

reviewed

··· 1 1 + import type { ComponentConfig } from "../../types"; 2 2 + 3 3 + export const themeConfig: ComponentConfig = { 4 4 + name: "theme", 5 5 + filepath: "./index.ts", 6 6 + hipDependencies: [ 7 7 + "animations.stylex.tsx", 8 8 + "color.stylex.tsx", 9 9 + "colors/amber.stylex.tsx", 10 10 + "colors/blue.stylex.tsx", 11 11 + "colors/bronze.stylex.tsx", 12 12 + "colors/brown.stylex.tsx", 13 13 + "colors/crimson.stylex.tsx", 14 14 + "colors/cyan.stylex.tsx", 15 15 + "colors/gold.stylex.tsx", 16 16 + "colors/grass.stylex.tsx", 17 17 + "colors/gray.stylex.tsx", 18 18 + "colors/green.stylex.tsx", 19 19 + "colors/indigo.stylex.tsx", 20 20 + "colors/iris.stylex.tsx", 21 21 + "colors/jade.stylex.tsx", 22 22 + "colors/lime.stylex.tsx", 23 23 + "colors/mauve.stylex.tsx", 24 24 + "colors/mint.stylex.tsx", 25 25 + "colors/olive.stylex.tsx", 26 26 + "colors/orange.stylex.tsx", 27 27 + "colors/pink.stylex.tsx", 28 28 + "colors/plum.stylex.tsx", 29 29 + "colors/purple.stylex.tsx", 30 30 + "colors/red.stylex.tsx", 31 31 + "colors/ruby.stylex.tsx", 32 32 + "colors/sage.stylex.tsx", 33 33 + "colors/sand.stylex.tsx", 34 34 + "colors/sky.stylex.tsx", 35 35 + "colors/slate.stylex.tsx", 36 36 + "colors/teal.stylex.tsx", 37 37 + "colors/tomato.stylex.tsx", 38 38 + "colors/violet.stylex.tsx", 39 39 + "colors/yellow.stylex.tsx", 40 40 + "media-queries.stylex.tsx", 41 41 + "radius.stylex.tsx", 42 42 + "semantic-color.stylex.tsx", 43 43 + "semantic-spacing.stylex.tsx", 44 44 + "shadow.stylex.tsx", 45 45 + "spacing.stylex.tsx", 46 46 + "types.ts", 47 47 + "typography.stylex.tsx", 48 48 + "useCalendarStyles.ts", 49 49 + "usePopoverStyles.ts", 50 50 + ], 51 51 + dependencies: { 52 52 + "@stylexjs/stylex": "^0.18.1", 53 53 + "react-aria-components": "^1.16.0", 54 54 + }, 55 55 + };

+5 -1

packages/hip-ui/src/components/theme/useButtonStyles.ts

reviewed

··· 11 11 import { uiColor } from "./color.stylex"; 12 12 import { radius } from "./radius.stylex"; 13 13 import { critical, primary, ui } from "./semantic-color.stylex"; 14 14 - import { gap, horizontalSpace, size as sizeSpace } from "./semantic-spacing.stylex"; 14 14 + import { 15 15 + gap, 16 16 + horizontalSpace, 17 17 + size as sizeSpace, 18 18 + } from "./semantic-spacing.stylex"; 15 19 import { shadow } from "./shadow.stylex"; 16 20 import { fontFamily, fontSize, fontWeight } from "./typography.stylex"; 17 21

+6 -1

packages/hip-ui/src/components/theme/useListBoxItemStyles.ts

reviewed

··· 5 5 6 6 import { SizeContext } from "../context"; 7 7 import { radius } from "../theme/radius.stylex"; 8 8 - import { gap, horizontalSpace, size as sizeSpace, verticalSpace } from "../theme/semantic-spacing.stylex"; 8 8 + import { 9 9 + gap, 10 10 + horizontalSpace, 11 11 + size as sizeSpace, 12 12 + verticalSpace, 13 13 + } from "../theme/semantic-spacing.stylex"; 9 14 import { 10 15 fontSize, 11 16 fontWeight,

+8 -6

packages/hip-ui/src/components/time-field/time-field-config.ts

reviewed

··· 4 4 name: "time-field", 5 5 filepath: "./index.tsx", 6 6 hipDependencies: [ 7 7 - "../theme/semantic-spacing.stylex.tsx", 8 8 - "../theme/radius.stylex.tsx", 9 9 - "../theme/semantic-color.stylex.tsx", 10 10 - "../theme/typography.stylex.tsx", 11 11 - "../theme/shadow.stylex.tsx", 7 7 + "../flex", 8 8 + "../label", 9 9 + "../theme", 10 10 + "../context.ts", 11 11 + "../suffix-icon/index.tsx", 12 12 "../theme/useInputStyles.ts", 13 13 ], 14 14 dependencies: { 15 15 - "lucide-react": "^0.545.0", 15 15 + "@stylexjs/stylex": "^0.18.1", 16 16 + "lucide-react": "^0.548.0", 17 17 + "react-aria-components": "^1.16.0", 16 18 }, 17 19 };

+6 -1

packages/hip-ui/src/components/toast/Toast.tsx

reviewed

··· 28 28 uiColor, 29 29 warningColor, 30 30 } from "../theme/color.stylex"; 31 31 - import { gap, horizontalSpace, size as sizeSpace, verticalSpace } from "../theme/semantic-spacing.stylex"; 31 31 + import { 32 32 + gap, 33 33 + horizontalSpace, 34 34 + size as sizeSpace, 35 35 + verticalSpace, 36 36 + } from "../theme/semantic-spacing.stylex"; 32 37 import { lineHeight, typeramp } from "../theme/typography.stylex"; 33 38 import { usePopoverStyles } from "../theme/usePopoverStyles"; 34 39 import { toasts } from "./queue";

+11 -16

packages/hip-ui/src/components/toast/toast-config.ts

reviewed

··· 4 4 name: "toast", 5 5 filepath: "./index.tsx", 6 6 hipDependencies: [ 7 7 - "../haptics/haptics.ts", 8 8 - "../haptics/context.tsx", 9 9 - "../haptics/useHaptics.ts", 10 10 - "../haptics/index.ts", 11 11 - "../theme/semantic-spacing.stylex.tsx", 12 12 - "../theme/radius.stylex.tsx", 13 13 - "../theme/semantic-color.stylex.tsx", 14 14 - "../theme/typography.stylex.tsx", 15 15 - "../theme/shadow.stylex.tsx", 16 16 - "../theme/types.ts", 17 17 - "../icon-button/index.tsx", 18 18 - "./queue.ts", 19 19 - "./Toast.tsx", 7 7 + "../button", 8 8 + "../flex", 9 9 + "../haptics", 10 10 + "../icon-button", 11 11 + "../theme", 12 12 + "queue.ts", 13 13 + "Toast.tsx", 20 14 ], 21 15 dependencies: { 22 22 - "react-aria-components": "^1.13.0", 23 23 - "lucide-react": "^0.545.0", 24 24 - "web-haptics": "^0.0.6", 16 16 + "@stylexjs/stylex": "^0.18.1", 17 17 + "lucide-react": "^0.548.0", 18 18 + "react-aria-components": "^1.16.0", 19 19 + "react-stately": "^3.45.0", 25 20 }, 26 21 };

+5 -13

packages/hip-ui/src/components/toggle-button-group/toggle-button-group-config.ts

reviewed

··· 4 4 name: "toggle-button-group", 5 5 filepath: "./index.tsx", 6 6 hipDependencies: [ 7 7 - "../haptics/haptics.ts", 8 8 - "../haptics/context.tsx", 9 9 - "../haptics/useHaptics.ts", 10 10 - "../haptics/index.ts", 11 11 - "../theme/semantic-spacing.stylex.tsx", 12 12 - "../theme/radius.stylex.tsx", 13 13 - "../theme/semantic-color.stylex.tsx", 14 14 - "../theme/typography.stylex.tsx", 15 15 - "../theme/shadow.stylex.tsx", 16 16 - // TODO: 17 17 - // "button" 7 7 + "../haptics", 8 8 + "../theme", 9 9 + "../button/context.ts", 18 10 ], 19 11 dependencies: { 20 20 - "react-aria-components": "^1.13.0", 21 21 - "web-haptics": "^0.0.6", 12 12 + "@stylexjs/stylex": "^0.18.1", 13 13 + "react-aria-components": "^1.16.0", 22 14 }, 23 15 };

+4 -1

packages/hip-ui/src/components/toggle-button/index.tsx

reviewed

··· 8 8 9 9 import { SizeContext } from "../context"; 10 10 import { primaryColor, uiColor } from "../theme/color.stylex"; 11 11 - import { horizontalSpace, size as sizeSpace } from "../theme/semantic-spacing.stylex"; 11 11 + import { 12 12 + horizontalSpace, 13 13 + size as sizeSpace, 14 14 + } from "../theme/semantic-spacing.stylex"; 12 15 import { useButtonStyles } from "../theme/useButtonStyles"; 13 16 14 17 const styles = stylex.create({

+10

packages/hip-ui/src/components/toggle-button/toggle-button-config.ts

reviewed

··· 3 3 export const toggleButtonConfig: ComponentConfig = { 4 4 name: "toggle-button", 5 5 filepath: "./index.tsx", 6 6 + hipDependencies: [ 7 7 + "../theme", 8 8 + "../button/context.ts", 9 9 + "../context.ts", 10 10 + "../theme/useButtonStyles.ts", 11 11 + ], 12 12 + dependencies: { 13 13 + "@stylexjs/stylex": "^0.18.1", 14 14 + "react-aria-components": "^1.16.0", 15 15 + }, 6 16 };

+3 -4

packages/hip-ui/src/components/toolbar/toolbar-config.ts

reviewed

··· 4 4 name: "toolbar", 5 5 filepath: "./index.tsx", 6 6 hipDependencies: [ 7 7 - "../theme/semantic-spacing.stylex.tsx", 8 8 - "../theme/semantic-color.stylex.tsx", 9 9 - "../theme/types.ts", 7 7 + "../theme", 10 8 ], 11 9 dependencies: { 12 12 - "react-aria-components": "^1.13.0", 10 10 + "@stylexjs/stylex": "^0.18.1", 11 11 + "react-aria-components": "^1.16.0", 13 12 }, 14 13 };

+4 -1

packages/hip-ui/src/components/tooltip/index.tsx

reviewed

··· 15 15 import { animationDuration } from "../theme/animations.stylex"; 16 16 import { uiInverted } from "../theme/color.stylex"; 17 17 import { radius } from "../theme/radius.stylex"; 18 18 - import { horizontalSpace, verticalSpace } from "../theme/semantic-spacing.stylex"; 18 18 + import { 19 19 + horizontalSpace, 20 20 + verticalSpace, 21 21 + } from "../theme/semantic-spacing.stylex"; 19 22 import { shadow } from "../theme/shadow.stylex"; 20 23 import { fontFamily, fontSize, lineHeight } from "../theme/typography.stylex"; 21 24

+3 -6

packages/hip-ui/src/components/tooltip/tooltip-config.ts

reviewed

··· 4 4 name: "tooltip", 5 5 filepath: "./index.tsx", 6 6 hipDependencies: [ 7 7 - "../theme/semantic-spacing.stylex.tsx", 8 8 - "../theme/radius.stylex.tsx", 9 9 - "../theme/semantic-color.stylex.tsx", 10 10 - "../theme/typography.stylex.tsx", 11 11 - "../theme/shadow.stylex.tsx", 7 7 + "../theme", 12 8 ], 13 9 dependencies: { 14 14 - "react-aria-components": "^1.13.0", 10 10 + "@stylexjs/stylex": "^0.18.1", 11 11 + "react-aria-components": "^1.16.0", 15 12 }, 16 13 };

+6 -1

packages/hip-ui/src/components/tree/index.tsx

reviewed

··· 25 25 import { mediaQueries } from "../theme/media-queries.stylex"; 26 26 import { radius } from "../theme/radius.stylex"; 27 27 import { ui } from "../theme/semantic-color.stylex"; 28 28 - import { gap, horizontalSpace, size as sizeSpace, verticalSpace } from "../theme/semantic-spacing.stylex"; 28 28 + import { 29 29 + gap, 30 30 + horizontalSpace, 31 31 + size as sizeSpace, 32 32 + verticalSpace, 33 33 + } from "../theme/semantic-spacing.stylex"; 29 34 import { 30 35 estimatedRowHeights, 31 36 useListBoxItemStyles,

+7 -7

packages/hip-ui/src/components/tree/tree-config.ts

reviewed

··· 4 4 name: "tree", 5 5 filepath: "./index.tsx", 6 6 hipDependencies: [ 7 7 - "../theme/semantic-spacing.stylex.tsx", 8 8 - "../theme/radius.stylex.tsx", 9 9 - "../theme/semantic-color.stylex.tsx", 10 10 - "../theme/typography.stylex.tsx", 11 11 - "../theme/shadow.stylex.tsx", 12 12 - "../theme/useInputStyles.ts", 7 7 + "../checkbox", 8 8 + "../theme", 9 9 + "../context.ts", 10 10 + "../theme/useListBoxItemStyles.ts", 13 11 ], 14 12 dependencies: { 15 15 - "lucide-react": "^0.545.0", 13 13 + "@stylexjs/stylex": "^0.18.1", 14 14 + "lucide-react": "^0.548.0", 15 15 + "react-aria-components": "^1.16.0", 16 16 }, 17 17 };

+9 -6

packages/hip-ui/src/components/typography/typography-config.ts

reviewed

··· 4 4 name: "typography", 5 5 filepath: "./index.tsx", 6 6 hipDependencies: [ 7 7 - "../theme/semantic-color.stylex.tsx", 8 8 - "../theme/semantic-spacing.stylex.tsx", 9 9 - "../theme/typography.stylex.tsx", 10 10 - "../link/link-context.ts", 11 11 - "../theme/types.ts", 12 12 - "./text.tsx", 7 7 + "../copy-to-clipboard-button", 8 8 + "../flex", 9 9 + "../link", 10 10 + "../theme", 13 11 ], 12 12 + dependencies: { 13 13 + "@stylexjs/stylex": "^0.18.1", 14 14 + "lucide-react": "^0.548.0", 15 15 + "react-aria": "^3.47.0", 16 16 + }, 14 17 };

+3 -3

packages/hip-ui/src/components/window-splitter/window-splitter-config.ts

reviewed

··· 4 4 name: "window-splitter", 5 5 filepath: "./index.tsx", 6 6 hipDependencies: [ 7 7 - "../theme/semantic-color.stylex.tsx", 8 8 - "../theme/semantic-spacing.stylex.tsx", 9 9 - "../theme/types.ts", 7 7 + "../theme", 10 8 ], 11 9 dependencies: { 10 10 + "@stylexjs/stylex": "^0.18.1", 12 11 "@window-splitter/react": "^1.0.0", 12 12 + "react-aria": "^3.47.0", 13 13 }, 14 14 };