A design system in a box.
hip-ui.tngl.io/docs/introduction
style types
+380
-194
+3
apps/docs/eslint.config.mjs
+3
apps/docs/eslint.config.mjs
+2
apps/docs/package.json
+2
apps/docs/package.json
···
42
42
"vite-tsconfig-paths": "^5.1.4"
43
43
},
44
44
"devDependencies": {
45
+
"@repo/eslint-config": "workspace:*",
45
46
"@content-collections/core": "^0.11.1",
46
47
"@content-collections/mdx": "^0.2.2",
47
48
"@content-collections/vite": "^0.2.7",
···
53
54
"@types/react-dom": "^19.0.3",
54
55
"@vitejs/plugin-react": "^5.0.4",
55
56
"hip-ui": "workspace:*",
57
+
"eslint": "^9.34.0",
56
58
"jsdom": "^27.0.0",
57
59
"typescript": "^5.7.2",
58
60
"vite": "^7.1.7",
+48
apps/docs/src/components/slider/index.tsx
+48
apps/docs/src/components/slider/index.tsx
···
1
+
import type { SliderProps as AriaSliderProps } from "react-aria-components";
2
+
import * as stylex from "@stylexjs/stylex";
3
+
4
+
import {
5
+
Slider as AriaSlider,
6
+
SliderTrack,
7
+
SliderThumb,
8
+
SliderOutput,
9
+
Label,
10
+
} from "react-aria-components";
11
+
12
+
const styles = stylex.create({
13
+
wrapper: {
14
+
width: "100%",
15
+
},
16
+
});
17
+
18
+
interface MySliderProps<T>
19
+
extends Omit<AriaSliderProps<T>, "style" | "className"> {
20
+
style?: stylex.StyleXStyles | stylex.StyleXStyles[];
21
+
label?: string;
22
+
thumbLabels?: string[];
23
+
}
24
+
25
+
export function Slider<T extends number | number[]>({
26
+
label,
27
+
thumbLabels,
28
+
style,
29
+
...props
30
+
}: MySliderProps<T>) {
31
+
return (
32
+
<AriaSlider {...props} {...stylex.props(styles.wrapper, style)}>
33
+
{label && <Label>{label}</Label>}
34
+
<SliderOutput>
35
+
{({ state }) =>
36
+
state.values.map((_, i) => state.getThumbValueLabel(i)).join(" – ")
37
+
}
38
+
</SliderOutput>
39
+
<SliderTrack>
40
+
{({ state }) =>
41
+
state.values.map((_, i) => (
42
+
<SliderThumb key={i} index={i} aria-label={thumbLabels?.[i]} />
43
+
))
44
+
}
45
+
</SliderTrack>
46
+
</AriaSlider>
47
+
);
48
+
}
+102
apps/docs/src/docs/components/slider.mdx
+102
apps/docs/src/docs/components/slider.mdx
···
1
+
---
2
+
title: Slider
3
+
description: A range input component for selecting values within a specified range.
4
+
---
5
+
6
+
import { PropDocs } from '../../lib/PropDocs'
7
+
import { Example } from '../../lib/Example'
8
+
import { Basic } from '../../examples/slider/basic'
9
+
import { Range } from '../../examples/slider/range'
10
+
import { WithLabels } from '../../examples/slider/with-labels'
11
+
12
+
<Example src={Basic} />
13
+
14
+
## Installation
15
+
16
+
Run the following command to add the slider component to your project.
17
+
18
+
```bash
19
+
pnpm hip install slider
20
+
```
21
+
22
+
## Props
23
+
24
+
This component is built using the [React Aria Slider](https://react-spectrum.adobe.com/react-aria/Slider.html).
25
+
26
+
<PropDocs components={["Slider"]} />
27
+
28
+
## Features
29
+
30
+
### Basic Usage
31
+
32
+
The slider component allows users to select a single value within a specified range.
33
+
34
+
<Example src={Basic} />
35
+
36
+
### Range Selection
37
+
38
+
For selecting a range of values, provide an array as the `defaultValue` prop.
39
+
40
+
<Example src={Range} />
41
+
42
+
### With Labels
43
+
44
+
Add descriptive labels to slider thumbs using the `thumbLabels` prop for better accessibility.
45
+
46
+
<Example src={WithLabels} />
47
+
48
+
## Accessibility
49
+
50
+
The slider component includes built-in accessibility features:
51
+
52
+
- **Keyboard Navigation**: Use arrow keys to adjust values
53
+
- **Screen Reader Support**: Proper ARIA labels and announcements
54
+
- **Focus Management**: Clear focus indicators
55
+
- **Value Announcements**: Current values are announced to screen readers
56
+
57
+
## Usage Examples
58
+
59
+
### Volume Control
60
+
61
+
```tsx
62
+
<Slider
63
+
label="Volume"
64
+
defaultValue={50}
65
+
minValue={0}
66
+
maxValue={100}
67
+
step={1}
68
+
/>
69
+
```
70
+
71
+
### Price Range Selector
72
+
73
+
```tsx
74
+
<Slider
75
+
label="Price Range"
76
+
defaultValue={[20, 80]}
77
+
minValue={0}
78
+
maxValue={100}
79
+
step={5}
80
+
thumbLabels={['Min', 'Max']}
81
+
/>
82
+
```
83
+
84
+
### Temperature Control
85
+
86
+
```tsx
87
+
<Slider
88
+
label="Temperature"
89
+
defaultValue={75}
90
+
minValue={0}
91
+
maxValue={100}
92
+
step={1}
93
+
thumbLabels={['Temperature']}
94
+
/>
95
+
```
96
+
97
+
## Related Components
98
+
99
+
- [NumberField](/docs/components/number-field) - For precise numeric input
100
+
- [RangeSlider](/docs/components/range-slider) - For dual-handle range selection
101
+
- [Switch](/docs/components/switch) - For binary on/off controls
102
+
- [Checkbox](/docs/components/checkbox) - For boolean selections
+13
apps/docs/src/examples/slider/basic.tsx
+13
apps/docs/src/examples/slider/basic.tsx
+14
apps/docs/src/examples/slider/range.tsx
+14
apps/docs/src/examples/slider/range.tsx
+14
apps/docs/src/examples/slider/with-labels.tsx
+14
apps/docs/src/examples/slider/with-labels.tsx
+1
packages/eslint-config/base.js
+1
packages/eslint-config/base.js
+2
packages/hip-ui/src/cli/install.tsx
+2
packages/hip-ui/src/cli/install.tsx
···
37
37
import { searchFieldConfig } from "../components/search-field/search-field-config.js";
38
38
import { selectConfig } from "../components/select/select-config.js";
39
39
import { separatorConfig } from "../components/separator/separator-config.js";
40
+
import { sliderConfig } from "../components/slider/slider-config.js";
40
41
import { switchConfig } from "../components/switch/switch-config.js";
41
42
import { tableConfig } from "../components/table/table-config.js";
42
43
import { textAreaConfig } from "../components/text-area/text-area-config.js";
···
92
93
colorSwatchConfig,
93
94
fileDropZoneConfig,
94
95
tableConfig,
96
+
sliderConfig,
95
97
];
96
98
97
99
function StringSetting({
+4
-9
packages/hip-ui/src/components/alert-dialog/index.tsx
+4
-9
packages/hip-ui/src/components/alert-dialog/index.tsx
···
17
17
import { Button, ButtonProps } from "../button";
18
18
import { IconButton } from "../icon-button";
19
19
import { spacing } from "../theme/spacing.stylex";
20
+
import { StyleXComponentProps } from "../theme/types";
20
21
import { typeramp } from "../theme/typography.stylex";
21
22
import { useDialogStyles } from "../theme/useDialogStyles";
22
23
···
96
97
};
97
98
98
99
export interface AlertDialogHeaderProps
99
-
extends Omit<React.ComponentProps<"div">, "style" | "className"> {
100
-
style?: stylex.StyleXStyles | stylex.StyleXStyles[];
101
-
}
100
+
extends StyleXComponentProps<React.ComponentProps<"div">> {}
102
101
103
102
export const AlertDialogHeader = ({
104
103
children,
···
115
114
};
116
115
117
116
export interface AlertDialogDescriptionProps
118
-
extends Omit<React.ComponentProps<"div">, "style" | "className"> {
119
-
style?: stylex.StyleXStyles | stylex.StyleXStyles[];
120
-
}
117
+
extends StyleXComponentProps<React.ComponentProps<"div">> {}
121
118
122
119
export const AlertDialogDescription = ({
123
120
children,
···
131
128
};
132
129
133
130
export interface AlertDialogFooterProps
134
-
extends Omit<React.ComponentProps<"div">, "style" | "className"> {
135
-
style?: stylex.StyleXStyles | stylex.StyleXStyles[];
136
-
}
131
+
extends StyleXComponentProps<React.ComponentProps<"div">> {}
137
132
138
133
export const AlertDialogFooter = ({
139
134
children,
+5
-7
packages/hip-ui/src/components/aspect-ratio/index.tsx
+5
-7
packages/hip-ui/src/components/aspect-ratio/index.tsx
···
1
1
import * as stylex from "@stylexjs/stylex";
2
2
3
3
import { radius } from "../theme/radius.stylex";
4
+
import { StyleXComponentProps } from "../theme/types";
4
5
5
6
const styles = stylex.create({
6
7
aspectRatio: (aspectRatio: number) => ({
···
11
12
position: "relative",
12
13
},
13
14
rounded: {
14
-
borderTopLeftRadius: radius["md"],
15
15
borderBottomLeftRadius: radius["md"],
16
-
borderTopRightRadius: radius["md"],
17
16
borderBottomRightRadius: radius["md"],
17
+
borderTopLeftRadius: radius["md"],
18
+
borderTopRightRadius: radius["md"],
18
19
},
19
20
imageContainer: {
20
21
inset: 0,
···
28
29
});
29
30
30
31
export interface AspectRatioProps
31
-
extends Omit<React.ComponentProps<"div">, "style" | "className"> {
32
-
style?: stylex.StyleXStyles | stylex.StyleXStyles[];
32
+
extends StyleXComponentProps<React.ComponentProps<"div">> {
33
33
aspectRatio?: number;
34
34
rounded?: boolean;
35
35
}
···
55
55
}
56
56
57
57
export interface AspectRatioImageProps
58
-
extends Omit<React.ComponentProps<"img">, "style" | "className"> {
59
-
style?: stylex.StyleXStyles | stylex.StyleXStyles[];
60
-
}
58
+
extends StyleXComponentProps<React.ComponentProps<"img">> {}
61
59
62
60
export function AspectRatioImage({ style, ...props }: AspectRatioImageProps) {
63
61
return (
+2
-7
packages/hip-ui/src/components/avatar/index.tsx
+2
-7
packages/hip-ui/src/components/avatar/index.tsx
···
5
5
import { radius } from "../theme/radius.stylex";
6
6
import { uiColor } from "../theme/semantic-color.stylex";
7
7
import { spacing } from "../theme/spacing.stylex";
8
-
import { Size } from "../theme/types";
8
+
import { Size, StyleXComponentProps } from "../theme/types";
9
9
import {
10
10
fontSize,
11
11
fontWeight,
···
71
71
});
72
72
73
73
export interface AvatarProps
74
-
extends Omit<
75
-
React.ComponentProps<"div">,
76
-
"style" | "className" | "children"
77
-
> {
78
-
/** The stylex styles of the avatar. */
79
-
style?: stylex.StyleXStyles | stylex.StyleXStyles[];
74
+
extends StyleXComponentProps<Omit<React.ComponentProps<"div">, "children">> {
80
75
/** The source of the image. */
81
76
src?: string;
82
77
/** The alt text of the image. */
+2
-3
packages/hip-ui/src/components/badge/index.tsx
+2
-3
packages/hip-ui/src/components/badge/index.tsx
···
11
11
warning,
12
12
} from "../theme/semantic-color.stylex";
13
13
import { spacing } from "../theme/spacing.stylex";
14
-
import { Size } from "../theme/types";
14
+
import { Size, StyleXComponentProps } from "../theme/types";
15
15
import { fontFamily, fontSize, fontWeight } from "../theme/typography.stylex";
16
16
17
17
const styles = stylex.create({
···
60
60
});
61
61
62
62
export interface BadgeProps
63
-
extends Omit<React.ComponentProps<"div">, "style" | "className"> {
64
-
style?: stylex.StyleXStyles | stylex.StyleXStyles[];
63
+
extends StyleXComponentProps<React.ComponentProps<"div">> {
65
64
size?: Extract<Size, "sm" | "md">;
66
65
variant?: "primary" | "default" | "warning" | "critical" | "success";
67
66
}
+12
-26
packages/hip-ui/src/components/card/index.tsx
+12
-26
packages/hip-ui/src/components/card/index.tsx
···
6
6
import { radius } from "../theme/radius.stylex";
7
7
import { ui } from "../theme/semantic-color.stylex";
8
8
import { spacing } from "../theme/spacing.stylex";
9
-
import { Size } from "../theme/types";
9
+
import { Size, StyleXComponentProps } from "../theme/types";
10
10
import { fontFamily, fontSize, fontWeight } from "../theme/typography.stylex";
11
11
12
12
const styles = stylex.create({
13
13
card: {
14
14
borderRadius: radius["lg"],
15
15
display: "flex",
16
-
overflow: "hidden",
17
16
flexDirection: "column",
18
17
fontFamily: fontFamily["sans"],
19
18
gap: "var(--card-gap)",
19
+
overflow: "hidden",
20
20
},
21
21
smCard: {
22
22
"--card-gap": spacing["2"],
···
84
84
justifyContent: "flex-end",
85
85
},
86
86
cardImage: {
87
-
borderTopLeftRadius: { default: 0, ":first-child": radius.md },
88
87
borderBottomLeftRadius: { default: 0, ":last-child": radius.md },
89
-
borderTopRightRadius: { default: 0, ":first-child": radius.md },
90
88
borderBottomRightRadius: { default: 0, ":last-child": radius.md },
89
+
borderTopLeftRadius: { default: 0, ":first-child": radius.md },
90
+
borderTopRightRadius: { default: 0, ":first-child": radius.md },
91
91
overflow: "hidden",
92
92
},
93
93
});
94
94
95
95
export interface CardProps
96
-
extends Omit<React.ComponentProps<"div">, "style" | "className"> {
97
-
style?: stylex.StyleXStyles | stylex.StyleXStyles[];
96
+
extends StyleXComponentProps<React.ComponentProps<"div">> {
98
97
size?: Size;
99
98
}
100
99
···
120
119
};
121
120
122
121
export interface CardHeaderProps
123
-
extends Omit<React.ComponentProps<"div">, "style" | "className"> {
124
-
style?: stylex.StyleXStyles | stylex.StyleXStyles[];
125
-
}
122
+
extends StyleXComponentProps<React.ComponentProps<"div">> {}
126
123
127
124
export const CardHeader = ({ style, ...props }: CardHeaderProps) => {
128
125
return (
···
134
131
};
135
132
136
133
export interface CardTitleProps
137
-
extends Omit<React.ComponentProps<"h2">, "style" | "className"> {
138
-
style?: stylex.StyleXStyles | stylex.StyleXStyles[];
139
-
}
134
+
extends StyleXComponentProps<React.ComponentProps<"h2">> {}
140
135
141
136
export const CardTitle = ({ style, ...props }: CardTitleProps) => {
142
137
return <div {...props} {...stylex.props(styles.cardTitle, style)} />;
143
138
};
144
139
145
140
export interface CardDescriptionProps
146
-
extends Omit<React.ComponentProps<"p">, "style" | "className"> {
147
-
style?: stylex.StyleXStyles | stylex.StyleXStyles[];
148
-
}
141
+
extends StyleXComponentProps<React.ComponentProps<"p">> {}
149
142
150
143
export const CardDescription = ({ style, ...props }: CardDescriptionProps) => {
151
144
return (
···
158
151
};
159
152
160
153
export interface CardHeaderActionProps
161
-
extends Omit<React.ComponentProps<"div">, "style" | "className"> {
162
-
style?: stylex.StyleXStyles | stylex.StyleXStyles[];
163
-
}
154
+
extends StyleXComponentProps<React.ComponentProps<"div">> {}
164
155
165
156
export const CardHeaderAction = ({
166
157
style,
···
169
160
return <div {...props} {...stylex.props(styles.cardHeaderAction, style)} />;
170
161
};
171
162
export interface CardBodyProps
172
-
extends Omit<React.ComponentProps<"div">, "style" | "className"> {
173
-
style?: stylex.StyleXStyles | stylex.StyleXStyles[];
174
-
}
163
+
extends StyleXComponentProps<React.ComponentProps<"div">> {}
175
164
176
165
export const CardBody = ({ style, ...props }: CardBodyProps) => {
177
166
return (
···
183
172
};
184
173
185
174
export interface CardFooterProps
186
-
extends Omit<React.ComponentProps<"div">, "style" | "className"> {
187
-
style?: stylex.StyleXStyles | stylex.StyleXStyles[];
188
-
}
175
+
extends StyleXComponentProps<React.ComponentProps<"div">> {}
189
176
190
177
export const CardFooter = ({ style, ...props }: CardFooterProps) => {
191
178
return (
···
197
184
};
198
185
199
186
export interface CardImageProps
200
-
extends Omit<React.ComponentProps<"img">, "style" | "className"> {
201
-
style?: stylex.StyleXStyles | stylex.StyleXStyles[];
187
+
extends StyleXComponentProps<React.ComponentProps<"img">> {
202
188
aspectRatio?: number;
203
189
}
204
190
+3
-5
packages/hip-ui/src/components/checkbox/index.tsx
+3
-5
packages/hip-ui/src/components/checkbox/index.tsx
···
17
17
import { radius } from "../theme/radius.stylex";
18
18
import { ui, primary } from "../theme/semantic-color.stylex";
19
19
import { spacing } from "../theme/spacing.stylex";
20
-
import { Size } from "../theme/types";
20
+
import { Size, StyleXComponentProps } from "../theme/types";
21
21
import { fontFamily, fontSize, lineHeight } from "../theme/typography.stylex";
22
22
23
23
const styles = stylex.create({
···
55
55
});
56
56
57
57
interface CheckboxGroupProps
58
-
extends Omit<AriaCheckboxGroupProps, "children" | "style" | "className"> {
59
-
style?: stylex.StyleXStyles | stylex.StyleXStyles[];
58
+
extends StyleXComponentProps<Omit<AriaCheckboxGroupProps, "children">> {
60
59
children?: React.ReactNode;
61
60
label?: React.ReactNode;
62
61
description?: string;
···
86
85
}
87
86
88
87
export interface CheckboxProps
89
-
extends Omit<AriaCheckboxProps, "className" | "style" | "children"> {
90
-
style?: stylex.StyleXStyles | stylex.StyleXStyles[];
88
+
extends StyleXComponentProps<Omit<AriaCheckboxProps, "children">> {
91
89
children?: React.ReactNode;
92
90
}
93
91
+2
-3
packages/hip-ui/src/components/color-field/index.tsx
+2
-3
packages/hip-ui/src/components/color-field/index.tsx
···
10
10
} from "react-aria-components";
11
11
12
12
import { Description, Label } from "../label";
13
-
import { InputVariant, Size } from "../theme/types";
13
+
import { InputVariant, Size, StyleXComponentProps } from "../theme/types";
14
14
import { useInputStyles } from "../theme/useInputStyles";
15
15
16
16
export interface ColorFieldProps
17
-
extends Omit<AriaColorFieldProps, "style" | "className">,
17
+
extends StyleXComponentProps<AriaColorFieldProps>,
18
18
Pick<InputProps, "placeholder"> {
19
-
style?: stylex.StyleXStyles | stylex.StyleXStyles[];
20
19
label?: React.ReactNode;
21
20
description?: string;
22
21
errorMessage?: string | ((validation: ValidationResult) => string);
+2
-3
packages/hip-ui/src/components/color-swatch/index.tsx
+2
-3
packages/hip-ui/src/components/color-swatch/index.tsx
···
8
8
import { radius } from "../theme/radius.stylex";
9
9
import { uiColor } from "../theme/semantic-color.stylex";
10
10
import { spacing } from "../theme/spacing.stylex";
11
-
import { Size } from "../theme/types";
11
+
import { Size, StyleXComponentProps } from "../theme/types";
12
12
13
13
const styles = stylex.create({
14
14
swatch: {
···
35
35
});
36
36
37
37
export interface ColorSwatchProps
38
-
extends Omit<AriaColorSwatchProps, "children" | "style" | "className"> {
39
-
style?: stylex.StyleXStyles | stylex.StyleXStyles[];
38
+
extends StyleXComponentProps<Omit<AriaColorSwatchProps, "children">> {
40
39
children?: React.ReactNode;
41
40
size?: Size;
42
41
}
+3
-4
packages/hip-ui/src/components/combobox/index.tsx
+3
-4
packages/hip-ui/src/components/combobox/index.tsx
···
18
18
import { Description, Label } from "../label";
19
19
import { ListBox } from "../listbox";
20
20
import { spacing } from "../theme/spacing.stylex";
21
-
import { InputVariant, Size } from "../theme/types";
21
+
import { InputVariant, Size, StyleXComponentProps } from "../theme/types";
22
22
import { useInputStyles } from "../theme/useInputStyles";
23
23
import { usePopoverStyles } from "../theme/usePopoverStyles";
24
24
import { SmallBody } from "../typography";
···
43
43
}
44
44
45
45
export interface ComboBoxProps<T extends object>
46
-
extends Omit<AriaComboBoxProps<T>, "children" | "style" | "className">,
46
+
extends StyleXComponentProps<Omit<AriaComboBoxProps<T>, "children">>,
47
47
Pick<
48
48
PopoverProps,
49
49
| "shouldCloseOnInteractOutside"
···
52
52
| "placement"
53
53
>,
54
54
Pick<ListBoxProps<T>, "renderEmptyState"> {
55
-
style?: stylex.StyleXStyles | stylex.StyleXStyles[];
56
55
label?: string;
57
56
description?: string;
58
57
errorMessage?: string | ((validation: ValidationResult) => string);
···
120
119
>
121
120
<ListBox
122
121
items={items}
123
-
{...stylex.props(popoverStyles, styles.matchWidth)}
122
+
style={[popoverStyles, styles.matchWidth]}
124
123
renderEmptyState={renderEmptyState || EmptyState}
125
124
>
126
125
{children}
+2
-3
packages/hip-ui/src/components/date-field/index.tsx
+2
-3
packages/hip-ui/src/components/date-field/index.tsx
···
11
11
} from "react-aria-components";
12
12
13
13
import { Description, Label } from "../label";
14
-
import { InputVariant, Size } from "../theme/types";
14
+
import { InputVariant, Size, StyleXComponentProps } from "../theme/types";
15
15
import { useInputStyles } from "../theme/useInputStyles";
16
16
17
17
export interface DateFieldProps<T extends DateValue>
18
-
extends Omit<AriaDateFieldProps<T>, "style" | "className"> {
19
-
style?: stylex.StyleXStyles | stylex.StyleXStyles[];
18
+
extends StyleXComponentProps<AriaDateFieldProps<T>> {
20
19
label?: React.ReactNode;
21
20
description?: string;
22
21
errorMessage?: string | ((validation: ValidationResult) => string);
+4
-10
packages/hip-ui/src/components/dialog/index.tsx
+4
-10
packages/hip-ui/src/components/dialog/index.tsx
···
14
14
import { IconButton } from "../icon-button";
15
15
import { uiColor } from "../theme/semantic-color.stylex";
16
16
import { spacing } from "../theme/spacing.stylex";
17
-
import { Size } from "../theme/types";
17
+
import { Size, StyleXComponentProps } from "../theme/types";
18
18
import { typeramp } from "../theme/typography.stylex";
19
19
import { useDialogStyles } from "../theme/useDialogStyles";
20
20
const styles = stylex.create({
···
96
96
};
97
97
98
98
export interface DialogHeaderProps
99
-
extends Omit<React.ComponentProps<"div">, "style" | "className"> {
100
-
style?: stylex.StyleXStyles | stylex.StyleXStyles[];
101
-
}
99
+
extends StyleXComponentProps<React.ComponentProps<"div">> {}
102
100
103
101
export const DialogHeader = ({ children, style }: DialogHeaderProps) => {
104
102
return (
···
112
110
};
113
111
114
112
export interface DialogDescriptionProps
115
-
extends Omit<React.ComponentProps<"div">, "style" | "className"> {
116
-
style?: stylex.StyleXStyles | stylex.StyleXStyles[];
117
-
}
113
+
extends StyleXComponentProps<React.ComponentProps<"div">> {}
118
114
119
115
export const DialogDescription = ({
120
116
children,
···
128
124
};
129
125
130
126
export interface DialogFooterProps
131
-
extends Omit<React.ComponentProps<"div">, "style" | "className"> {
132
-
style?: stylex.StyleXStyles | stylex.StyleXStyles[];
133
-
}
127
+
extends StyleXComponentProps<React.ComponentProps<"div">> {}
134
128
135
129
export const DialogFooter = ({ children, style }: DialogFooterProps) => {
136
130
return <div {...stylex.props(styles.footer, style)}>{children}</div>;
+2
-2
packages/hip-ui/src/components/flex/index.tsx
+2
-2
packages/hip-ui/src/components/flex/index.tsx
···
1
1
import * as stylex from "@stylexjs/stylex";
2
2
3
3
import { Spacing, spacing } from "../theme/spacing.stylex";
4
+
import { StyleXComponentProps } from "../theme/types";
4
5
5
6
const styles = stylex.create({
6
7
base: { display: "flex" },
···
58
59
});
59
60
60
61
export interface FlexProps
61
-
extends Omit<React.ComponentProps<"div">, "style" | "className"> {
62
-
style?: stylex.StyleXStyles | stylex.StyleXStyles[];
62
+
extends StyleXComponentProps<React.ComponentProps<"div">> {
63
63
/**
64
64
* The direction of the flex container.
65
65
* @default "row"
+3
-4
packages/hip-ui/src/components/grid/index.tsx
+3
-4
packages/hip-ui/src/components/grid/index.tsx
···
1
1
import * as stylex from "@stylexjs/stylex";
2
2
3
3
import { Spacing, spacing } from "../theme/spacing.stylex";
4
+
import { StyleXComponentProps } from "../theme/types";
4
5
5
6
const styles = stylex.create({
6
7
base: { display: "grid" },
···
107
108
});
108
109
109
110
export interface GridProps
110
-
extends Omit<React.ComponentProps<"div">, "style" | "className"> {
111
-
style?: stylex.StyleXStyles | stylex.StyleXStyles[];
111
+
extends StyleXComponentProps<React.ComponentProps<"div">> {
112
112
/**
113
113
* The grid template rows of the grid container.
114
114
* @default "auto"
···
227
227
};
228
228
229
229
interface GridItemProps
230
-
extends Omit<React.ComponentProps<"div">, "style" | "className"> {
231
-
style?: stylex.StyleXStyles | stylex.StyleXStyles[];
230
+
extends StyleXComponentProps<React.ComponentProps<"div">> {
232
231
columnStart?: number;
233
232
columnEnd?: number;
234
233
rowStart?: number;
+3
-7
packages/hip-ui/src/components/label/index.tsx
+3
-7
packages/hip-ui/src/components/label/index.tsx
···
9
9
10
10
import { SizeContext } from "../context";
11
11
import { ui } from "../theme/semantic-color.stylex";
12
-
import { Size } from "../theme/types";
12
+
import { Size, StyleXComponentProps } from "../theme/types";
13
13
import { fontSize, fontWeight, lineHeight } from "../theme/typography.stylex";
14
14
15
15
const styles = stylex.create({
···
39
39
},
40
40
});
41
41
42
-
export interface LabelProps
43
-
extends Omit<AriaLabelProps, "style" | "className"> {
44
-
style?: stylex.StyleXStyles | stylex.StyleXStyles[];
42
+
export interface LabelProps extends StyleXComponentProps<AriaLabelProps> {
45
43
size?: Size;
46
44
}
47
45
···
56
54
);
57
55
}
58
56
59
-
export interface DescriptionProps
60
-
extends Omit<TextProps, "style" | "className"> {
61
-
style?: stylex.StyleXStyles | stylex.StyleXStyles[];
57
+
export interface DescriptionProps extends StyleXComponentProps<TextProps> {
62
58
size?: Size;
63
59
}
64
60
+2
-3
packages/hip-ui/src/components/link/index.tsx
+2
-3
packages/hip-ui/src/components/link/index.tsx
···
6
6
} from "react-aria-components";
7
7
8
8
import { primaryColor } from "../theme/semantic-color.stylex";
9
+
import { StyleXComponentProps } from "../theme/types";
9
10
import { fontFamily, fontWeight } from "../theme/typography.stylex";
10
11
import { LinkContext } from "./link-context";
11
12
···
22
23
},
23
24
});
24
25
25
-
export interface LinkProps extends Omit<AriaLinkProps, "style" | "className"> {
26
-
style?: stylex.StyleXStyles | stylex.StyleXStyles[];
27
-
}
26
+
export interface LinkProps extends StyleXComponentProps<AriaLinkProps> {}
28
27
29
28
export function Link({ style, ...props }: LinkProps) {
30
29
const context = use(LinkContext);
+6
-13
packages/hip-ui/src/components/listbox/index.tsx
+6
-13
packages/hip-ui/src/components/listbox/index.tsx
···
16
16
import { Separator } from "../separator";
17
17
import { ui } from "../theme/semantic-color.stylex";
18
18
import { spacing } from "../theme/spacing.stylex";
19
-
import { Size } from "../theme/types";
19
+
import { Size, StyleXComponentProps } from "../theme/types";
20
20
import { typeramp } from "../theme/typography.stylex";
21
21
import { useListBoxItemStyles } from "../theme/useListBoxItemStyles";
22
22
···
49
49
});
50
50
51
51
export interface ListBoxProps<T extends object>
52
-
extends Omit<AriaListBoxProps<T>, "style" | "className"> {
53
-
style?: stylex.StyleXStyles | stylex.StyleXStyles[];
52
+
extends StyleXComponentProps<AriaListBoxProps<T>> {
54
53
size?: Size;
55
54
items?: Iterable<T>;
56
55
children: React.ReactNode | ((item: T) => React.ReactNode);
···
71
70
}
72
71
73
72
export interface ListBoxItemProps
74
-
extends Omit<AriaListBoxItemProps, "style" | "className" | "children"> {
75
-
style?: stylex.StyleXStyles | stylex.StyleXStyles[];
73
+
extends StyleXComponentProps<Omit<AriaListBoxItemProps, "children">> {
76
74
children: React.ReactNode;
77
75
prefix?: React.ReactNode;
78
76
suffix?: React.ReactNode;
···
115
113
}
116
114
117
115
export interface ListBoxSectionProps<T extends object>
118
-
extends Omit<AriaListBoxSectionProps<T>, "style" | "className"> {
119
-
style?: stylex.StyleXStyles | stylex.StyleXStyles[];
116
+
extends StyleXComponentProps<AriaListBoxSectionProps<T>> {
120
117
children: React.ReactNode;
121
118
}
122
119
···
128
125
}
129
126
130
127
export interface ListBoxSeparatorProps
131
-
extends Omit<SeparatorProps, "style" | "className"> {
132
-
style?: stylex.StyleXStyles | stylex.StyleXStyles[];
133
-
}
128
+
extends StyleXComponentProps<SeparatorProps> {}
134
129
135
130
export function ListBoxSeparator({ style, ...props }: ListBoxSeparatorProps) {
136
131
return <Separator {...props} style={[styles.separator, style]} />;
137
132
}
138
133
139
134
export interface ListBoxSectionHeaderProps
140
-
extends Omit<React.HTMLAttributes<HTMLElement>, "style" | "className"> {
141
-
style?: stylex.StyleXStyles | stylex.StyleXStyles[];
142
-
}
135
+
extends StyleXComponentProps<React.HTMLAttributes<HTMLElement>> {}
143
136
144
137
export function ListBoxSectionHeader({
145
138
style,
+2
-3
packages/hip-ui/src/components/number-field/index.tsx
+2
-3
packages/hip-ui/src/components/number-field/index.tsx
···
15
15
import { Description, Label } from "../label";
16
16
import { ui, uiColor } from "../theme/semantic-color.stylex";
17
17
import { spacing } from "../theme/spacing.stylex";
18
-
import { InputVariant, Size } from "../theme/types";
18
+
import { InputVariant, Size, StyleXComponentProps } from "../theme/types";
19
19
import { useInputStyles } from "../theme/useInputStyles";
20
20
21
21
const styles = stylex.create({
···
51
51
});
52
52
53
53
export interface NumberFieldProps
54
-
extends Omit<AriaNumberFieldProps, "style" | "className">,
54
+
extends StyleXComponentProps<Omit<AriaNumberFieldProps, "children">>,
55
55
Pick<InputProps, "placeholder"> {
56
-
style?: stylex.StyleXStyles | stylex.StyleXStyles[];
57
56
label?: React.ReactNode;
58
57
description?: string;
59
58
errorMessage?: string | ((validation: ValidationResult) => string);
+8
-5
packages/hip-ui/src/components/popover/index.tsx
+8
-5
packages/hip-ui/src/components/popover/index.tsx
···
12
12
13
13
import { uiColor } from "../theme/semantic-color.stylex";
14
14
import { spacing } from "../theme/spacing.stylex";
15
+
import { StyleXComponentProps } from "../theme/types";
15
16
import { usePopoverStyles } from "../theme/usePopoverStyles";
16
17
17
18
const styles = stylex.create({
···
41
42
zIndex: 0,
42
43
},
43
44
});
44
-
interface TooltipProps
45
+
interface PopoverProps
45
46
extends DialogTriggerProps,
46
-
Pick<AriaPopoverProps, "crossOffset" | "placement" | "shouldFlip"> {
47
+
StyleXComponentProps<Omit<AriaPopoverProps, "className" | "trigger">> {
47
48
trigger: React.ReactNode;
49
+
triggerName?: Pick<AriaPopoverProps, "trigger">;
48
50
children: React.ReactNode;
49
51
}
50
52
···
54
56
defaultOpen,
55
57
isOpen,
56
58
onOpenChange,
59
+
style,
57
60
...popoverProps
58
-
}: TooltipProps) => {
61
+
}: PopoverProps) => {
59
62
const popoverStyles = usePopoverStyles();
60
63
61
64
return (
···
65
68
{trigger}
66
69
67
70
<AriaPopover
68
-
{...stylex.props(styles.wrapper)}
69
-
{...popoverProps}
71
+
{...stylex.props(styles.wrapper, style)}
70
72
offset={8}
71
73
containerPadding={8}
74
+
{...popoverProps}
72
75
>
73
76
<OverlayArrow {...stylex.props(styles.caret)}>
74
77
<div {...stylex.props(styles.arrow)} />
+3
-5
packages/hip-ui/src/components/radio/index.tsx
+3
-5
packages/hip-ui/src/components/radio/index.tsx
···
17
17
import { radius } from "../theme/radius.stylex";
18
18
import { ui, primary } from "../theme/semantic-color.stylex";
19
19
import { spacing } from "../theme/spacing.stylex";
20
-
import { Size } from "../theme/types";
20
+
import { Size, StyleXComponentProps } from "../theme/types";
21
21
import { fontFamily, fontSize, lineHeight } from "../theme/typography.stylex";
22
22
23
23
const scaleIn = stylex.keyframes({
···
85
85
});
86
86
87
87
interface RadioGroupProps
88
-
extends Omit<AriaRadioGroupProps, "children" | "style" | "className"> {
89
-
style?: stylex.StyleXStyles | stylex.StyleXStyles[];
88
+
extends StyleXComponentProps<Omit<AriaRadioGroupProps, "children">> {
90
89
children?: React.ReactNode;
91
90
label?: React.ReactNode;
92
91
description?: string;
···
116
115
}
117
116
118
117
export interface RadioProps
119
-
extends Omit<AriaRadioProps, "className" | "style" | "children"> {
120
-
style?: stylex.StyleXStyles | stylex.StyleXStyles[];
118
+
extends StyleXComponentProps<Omit<AriaRadioProps, "children">> {
121
119
children?: React.ReactNode;
122
120
}
123
121
+2
-3
packages/hip-ui/src/components/search-field/index.tsx
+2
-3
packages/hip-ui/src/components/search-field/index.tsx
···
13
13
import { IconButton } from "../icon-button";
14
14
import { Description, Label } from "../label";
15
15
import { spacing } from "../theme/spacing.stylex";
16
-
import { InputVariant, Size } from "../theme/types";
16
+
import { InputVariant, Size, StyleXComponentProps } from "../theme/types";
17
17
import { useInputStyles } from "../theme/useInputStyles";
18
18
19
19
const styles = stylex.create({
···
32
32
});
33
33
34
34
export interface SearchFieldProps
35
-
extends Omit<AriaSearchFieldProps, "style" | "className">,
35
+
extends StyleXComponentProps<AriaSearchFieldProps>,
36
36
Pick<InputProps, "placeholder"> {
37
-
style?: stylex.StyleXStyles | stylex.StyleXStyles[];
38
37
label?: React.ReactNode;
39
38
description?: string;
40
39
errorMessage?: string | ((validation: ValidationResult) => string);
+3
-7
packages/hip-ui/src/components/select/index.tsx
+3
-7
packages/hip-ui/src/components/select/index.tsx
···
16
16
import { SizeContext } from "../context";
17
17
import { Description, Label } from "../label";
18
18
import { ListBox } from "../listbox";
19
-
import { InputVariant, Size } from "../theme/types";
19
+
import { InputVariant, Size, StyleXComponentProps } from "../theme/types";
20
20
import { useInputStyles } from "../theme/useInputStyles";
21
21
import { usePopoverStyles } from "../theme/usePopoverStyles";
22
22
···
27
27
});
28
28
29
29
export interface SelectProps<T extends object, M extends "single" | "multiple">
30
-
extends Omit<AriaSelectProps<T, M>, "children" | "style" | "className">,
30
+
extends StyleXComponentProps<Omit<AriaSelectProps<T, M>, "children">>,
31
31
Pick<
32
32
PopoverProps,
33
33
| "shouldCloseOnInteractOutside"
···
35
35
| "shouldUpdatePosition"
36
36
| "placement"
37
37
> {
38
-
style?: stylex.StyleXStyles | stylex.StyleXStyles[];
39
38
label?: string;
40
39
description?: string;
41
40
errorMessage?: string | ((validation: ValidationResult) => string);
···
109
108
shouldUpdatePosition={shouldUpdatePosition}
110
109
placement={placement}
111
110
>
112
-
<ListBox
113
-
items={items}
114
-
{...stylex.props(popoverStyles, styles.matchWidth)}
115
-
>
111
+
<ListBox items={items} style={[popoverStyles, styles.matchWidth]}>
116
112
{children}
117
113
</ListBox>
118
114
</Popover>
+2
-3
packages/hip-ui/src/components/separator/index.tsx
+2
-3
packages/hip-ui/src/components/separator/index.tsx
···
5
5
} from "react-aria-components";
6
6
7
7
import { uiColor } from "../theme/semantic-color.stylex";
8
+
import { StyleXComponentProps } from "../theme/types";
8
9
9
10
const styles = stylex.create({
10
11
separator: {
···
23
24
});
24
25
25
26
export interface SeparatorProps
26
-
extends Omit<AriaSeparatorProps, "style" | "className"> {
27
-
style?: stylex.StyleXStyles | stylex.StyleXStyles[];
28
-
}
27
+
extends StyleXComponentProps<AriaSeparatorProps> {}
29
28
30
29
export function Separator({ style, ...props }: SeparatorProps) {
31
30
return (
+49
packages/hip-ui/src/components/slider/index.tsx
+49
packages/hip-ui/src/components/slider/index.tsx
···
1
+
import type { SliderProps as AriaSliderProps } from "react-aria-components";
2
+
3
+
import * as stylex from "@stylexjs/stylex";
4
+
import {
5
+
Slider as AriaSlider,
6
+
SliderTrack,
7
+
SliderThumb,
8
+
SliderOutput,
9
+
Label,
10
+
} from "react-aria-components";
11
+
12
+
import { StyleXComponentProps } from "../theme/types";
13
+
14
+
const styles = stylex.create({
15
+
wrapper: {
16
+
width: "100%",
17
+
},
18
+
});
19
+
20
+
interface SliderProps<T> extends StyleXComponentProps<AriaSliderProps<T>> {
21
+
label?: string;
22
+
thumbLabels?: string[];
23
+
}
24
+
25
+
export function Slider<T extends number | number[]>({
26
+
label,
27
+
thumbLabels,
28
+
style,
29
+
...props
30
+
}: SliderProps<T>) {
31
+
return (
32
+
<AriaSlider {...props} {...stylex.props(styles.wrapper, style)}>
33
+
{label && <Label>{label}</Label>}
34
+
<SliderOutput>
35
+
{({ state }) =>
36
+
state.values.map((_, i) => state.getThumbValueLabel(i)).join(" – ")
37
+
}
38
+
</SliderOutput>
39
+
<SliderTrack>
40
+
{({ state }) =>
41
+
state.values.map((_, i) => (
42
+
// eslint-disable-next-line @eslint-react/no-array-index-key
43
+
<SliderThumb key={i} index={i} aria-label={thumbLabels?.[i]} />
44
+
))
45
+
}
46
+
</SliderTrack>
47
+
</AriaSlider>
48
+
);
49
+
}
+6
packages/hip-ui/src/components/slider/slider-config.ts
+6
packages/hip-ui/src/components/slider/slider-config.ts
+2
-2
packages/hip-ui/src/components/switch/index.tsx
+2
-2
packages/hip-ui/src/components/switch/index.tsx
···
8
8
import { primaryColor, uiColor } from "../theme/semantic-color.stylex";
9
9
import { shadow } from "../theme/shadow.stylex";
10
10
import { spacing } from "../theme/spacing.stylex";
11
+
import { StyleXComponentProps } from "../theme/types";
11
12
import { typeramp } from "../theme/typography.stylex";
12
13
13
14
const styles = stylex.create({
···
56
57
});
57
58
58
59
export interface SwitchProps
59
-
extends Omit<AriaSwitchProps, "children" | "style" | "className"> {
60
-
style?: stylex.StyleXStyles | stylex.StyleXStyles[];
60
+
extends StyleXComponentProps<Omit<AriaSwitchProps, "children">> {
61
61
children: React.ReactNode;
62
62
}
63
63
+7
-19
packages/hip-ui/src/components/table/index.tsx
+7
-19
packages/hip-ui/src/components/table/index.tsx
···
23
23
import { IconButton } from "../icon-button";
24
24
import { uiColor } from "../theme/semantic-color.stylex";
25
25
import { spacing } from "../theme/spacing.stylex";
26
-
import { Size } from "../theme/types";
26
+
import { Size, StyleXComponentProps } from "../theme/types";
27
27
28
28
const styles = stylex.create({
29
29
table: {},
···
65
65
},
66
66
});
67
67
68
-
export interface TableProps
69
-
extends Omit<AriaTableProps, "className" | "style"> {
70
-
style?: stylex.StyleXStyles | stylex.StyleXStyles[];
68
+
export interface TableProps extends StyleXComponentProps<AriaTableProps> {
71
69
size?: Size;
72
70
}
73
71
···
86
84
};
87
85
88
86
export interface TableColumnProps
89
-
extends Omit<AriaColumnProps, "className" | "style" | "children"> {
90
-
style?: stylex.StyleXStyles | stylex.StyleXStyles[];
87
+
extends StyleXComponentProps<Omit<AriaColumnProps, "children">> {
91
88
children?: React.ReactNode;
92
89
}
93
90
···
113
110
}
114
111
115
112
export interface TableHeaderProps<T extends object>
116
-
extends Omit<AriaTableHeaderProps<T>, "className" | "style"> {
117
-
style?: stylex.StyleXStyles | stylex.StyleXStyles[];
118
-
}
113
+
extends StyleXComponentProps<AriaTableHeaderProps<T>> {}
119
114
120
115
export function TableHeader<T extends object>({
121
116
children,
···
143
138
}
144
139
145
140
export interface TableRowProps<T extends object>
146
-
extends Omit<AriaRowProps<T>, "className" | "style"> {
147
-
style?: stylex.StyleXStyles | stylex.StyleXStyles[];
148
-
}
141
+
extends StyleXComponentProps<AriaRowProps<T>> {}
149
142
150
143
export function TableRow<T extends object>({
151
144
id,
···
176
169
}
177
170
178
171
export interface TableBodyProps<T extends object>
179
-
extends Omit<AriaTableBodyProps<T>, "className" | "style"> {
180
-
style?: stylex.StyleXStyles | stylex.StyleXStyles[];
181
-
}
172
+
extends StyleXComponentProps<AriaTableBodyProps<T>> {}
182
173
183
174
export function TableBody<T extends object>({
184
175
style,
···
187
178
return <AriaTableBody {...stylex.props(styles.tableBody, style)} {...prop} />;
188
179
}
189
180
190
-
export interface TableCellProps
191
-
extends Omit<AriaCellProps, "className" | "style"> {
192
-
style?: stylex.StyleXStyles | stylex.StyleXStyles[];
193
-
}
181
+
export interface TableCellProps extends StyleXComponentProps<AriaCellProps> {}
194
182
195
183
export function TableCell({ style, ...props }: TableCellProps) {
196
184
return <AriaCell {...stylex.props(styles.cell, style)} {...props} />;
+2
-3
packages/hip-ui/src/components/text-area/index.tsx
+2
-3
packages/hip-ui/src/components/text-area/index.tsx
···
15
15
import { radius } from "../theme/radius.stylex";
16
16
import { ui, uiColor } from "../theme/semantic-color.stylex";
17
17
import { spacing } from "../theme/spacing.stylex";
18
-
import { Size } from "../theme/types";
18
+
import { Size, StyleXComponentProps } from "../theme/types";
19
19
import { lineHeight, fontSize, fontFamily } from "../theme/typography.stylex";
20
20
21
21
const styles = stylex.create({
···
111
111
});
112
112
113
113
export interface TextAreaProps
114
-
extends Omit<TextFieldProps, "style" | "className">,
114
+
extends StyleXComponentProps<Omit<TextFieldProps, "children">>,
115
115
Pick<AriaTextAreaProps, "rows">,
116
116
Pick<InputProps, "placeholder"> {
117
-
style?: stylex.StyleXStyles | stylex.StyleXStyles[];
118
117
label?: React.ReactNode;
119
118
description?: string;
120
119
errorMessage?: string | ((validation: ValidationResult) => string);
+2
-3
packages/hip-ui/src/components/text-field/index.tsx
+2
-3
packages/hip-ui/src/components/text-field/index.tsx
···
13
13
14
14
import { IconButton } from "../icon-button";
15
15
import { Description, Label } from "../label";
16
-
import { InputVariant, Size } from "../theme/types";
16
+
import { InputVariant, Size, StyleXComponentProps } from "../theme/types";
17
17
import { useInputStyles } from "../theme/useInputStyles";
18
18
19
19
function PasswordToggle({
···
46
46
}
47
47
48
48
export interface TextFieldProps
49
-
extends Omit<AriaTextFieldProps, "style" | "className">,
49
+
extends StyleXComponentProps<AriaTextFieldProps>,
50
50
Pick<InputProps, "placeholder"> {
51
-
style?: stylex.StyleXStyles | stylex.StyleXStyles[];
52
51
label?: React.ReactNode;
53
52
description?: string;
54
53
errorMessage?: string | ((validation: ValidationResult) => string);
+12
packages/hip-ui/src/components/theme/types.ts
+12
packages/hip-ui/src/components/theme/types.ts
···
13
13
| "critical-outline";
14
14
export type InputVariant = "primary" | "secondary" | "tertiary";
15
15
export type ButtonGroupVariant = "grouped" | "separate";
16
+
17
+
export type StyleXComponentProps<
18
+
T extends {
19
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
20
+
className?: any;
21
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
22
+
style?: any;
23
+
},
24
+
> = Omit<T, "className" | "style"> & {
25
+
className?: never;
26
+
style?: stylex.StyleXStyles;
27
+
};
+2
-3
packages/hip-ui/src/components/time-field/index.tsx
+2
-3
packages/hip-ui/src/components/time-field/index.tsx
···
11
11
} from "react-aria-components";
12
12
13
13
import { Description, Label } from "../label";
14
-
import { InputVariant, Size } from "../theme/types";
14
+
import { InputVariant, Size, StyleXComponentProps } from "../theme/types";
15
15
import { useInputStyles } from "../theme/useInputStyles";
16
16
17
17
export interface TimeFieldProps<T extends TimeValue>
18
-
extends Omit<AriaTimeFieldProps<T>, "style" | "className"> {
19
-
style?: stylex.StyleXStyles | stylex.StyleXStyles[];
18
+
extends StyleXComponentProps<AriaTimeFieldProps<T>> {
20
19
label?: React.ReactNode;
21
20
description?: string;
22
21
errorMessage?: string | ((validation: ValidationResult) => string);
+5
-5
packages/hip-ui/src/components/tree/index.tsx
+5
-5
packages/hip-ui/src/components/tree/index.tsx
···
16
16
import { radius } from "../theme/radius.stylex";
17
17
import { ui } from "../theme/semantic-color.stylex";
18
18
import { spacing } from "../theme/spacing.stylex";
19
-
import { Size } from "../theme/types";
19
+
import { Size, StyleXComponentProps } from "../theme/types";
20
20
import { useListBoxItemStyles } from "../theme/useListBoxItemStyles";
21
21
22
22
const styles = stylex.create({
···
145
145
}
146
146
147
147
interface TreeItemProps<T extends object>
148
-
extends Omit<AriaTreeItemProps<T>, "style" | "textValue" | "children">,
148
+
extends StyleXComponentProps<
149
+
Omit<AriaTreeItemProps<T>, "textValue" | "children">
150
+
>,
149
151
Pick<TreeItemContentProps, "prefix" | "suffix"> {
150
-
style?: stylex.StyleXStyles | stylex.StyleXStyles[];
151
152
title: string;
152
153
children?: React.ReactNode;
153
154
}
···
182
183
}
183
184
184
185
export interface TreeProps<T extends object>
185
-
extends Omit<AriaTreeProps<T>, "children" | "style"> {
186
-
style?: stylex.StyleXStyles | stylex.StyleXStyles[];
186
+
extends StyleXComponentProps<Omit<AriaTreeProps<T>, "children">> {
187
187
children: React.ReactNode | ((item: T) => React.ReactNode);
188
188
size?: Size;
189
189
}