A design system in a box.
hip-ui.tngl.io/docs/introduction
fix build errors
+278
-300
-27
.tangled/workflows/docs.yml
-27
.tangled/workflows/docs.yml
···
1
-
engine: "nixery"
2
-
3
-
when:
4
-
- event: ["push", "manual"]
5
-
branch: ["main"]
6
-
7
-
dependencies:
8
-
nixpkgs:
9
-
- nodejs
10
-
- gnused
11
-
- openssh
12
-
13
-
steps:
14
-
- name: "Enable Corepack"
15
-
command: "corepack enable && corepack prepare pnpm@10.18.2 --activate"
16
-
17
-
- name: "Install dependencies"
18
-
command: "pnpm install"
19
-
20
-
- name: "Build docs"
21
-
command: "pnpm --filter docs build"
22
-
23
-
- name: "Configure SSH"
24
-
command: "test -n \"$SSH_KEY\" && export HOME=/tmp/hip-ui-home USER=root LOGNAME=root USERNAME=root && mkdir -p \"$HOME/.ssh\" && chmod 700 \"$HOME/.ssh\" && : > \"$HOME/.ssh/known_hosts\" && chmod 600 \"$HOME/.ssh/known_hosts\" && printf '%s\n' \"$SSH_KEY\" | sed 's/\r$//' > \"$HOME/.ssh/deploy_key\" && chmod 600 \"$HOME/.ssh/deploy_key\""
25
-
26
-
- name: "Publish docs"
27
-
command: "export HOME=/tmp/hip-ui-home USER=root LOGNAME=root USERNAME=root && GIT_SSH_COMMAND='ssh -F /dev/null -i /tmp/hip-ui-home/.ssh/deploy_key -o IdentitiesOnly=yes -o UserKnownHostsFile=/tmp/hip-ui-home/.ssh/known_hosts -o StrictHostKeyChecking=accept-new' pnpm publish-docs"
+2
-1
apps/docs/content-collections.ts
+2
-1
apps/docs/content-collections.ts
+1
-2
apps/docs/package.json
+1
-2
apps/docs/package.json
···
29
29
"@tanstack/react-start": "^1.167.12",
30
30
"@tldraw/editor": "^4.1.2",
31
31
"@window-splitter/react": "^1.1.2",
32
-
"browserslist": "^4.28.0",
32
+
"browserslist": "^4.28.1",
33
33
"change-case": "catalog:",
34
34
"dedent": "catalog:",
35
35
"glob": "^11.0.3",
···
45
45
"react-dom": "catalog:",
46
46
"react-markdown": "^10.1.0",
47
47
"react-stately": "^3.45.0",
48
-
"rehype-autolink-headings": "^7.1.0",
49
48
"rehype-sanitize": "^6.0.0",
50
49
"rehype-slug": "^6.0.0",
51
50
"remark-frontmatter": "^5.0.0",
+1
-1
apps/docs/src/components/color-area/index.tsx
+1
-1
apps/docs/src/components/color-area/index.tsx
+4
-1
apps/docs/src/components/lightbox/index.tsx
+4
-1
apps/docs/src/components/lightbox/index.tsx
···
152
152
initialIndex?: number;
153
153
/** Alt text for the current image */
154
154
alt?: string;
155
+
/** Trigger element to open the lightbox */
156
+
trigger?: React.ReactNode;
155
157
}
156
158
157
159
export function Lightbox({
···
161
163
initialIndex = 0,
162
164
alt = "Image",
163
165
style,
166
+
trigger,
164
167
}: LightboxProps) {
165
168
const [currentIndex, setCurrentIndex] = useState(initialIndex);
166
169
const [previousIndex, setPreviousIndex] = useState<number | null>(null);
···
308
311
309
312
return (
310
313
<DialogTrigger isOpen={isOpen} onOpenChange={onOpenChange}>
311
-
<span {...stylex.props(styles.hiddenTrigger)} />
314
+
{trigger || <span {...stylex.props(styles.hiddenTrigger)} />}
312
315
<ModalOverlay
313
316
isDismissable
314
317
{...stylex.props(styles.overlay, ui.overlay, style)}
+17
-18
apps/docs/src/components/typography/index.tsx
+17
-18
apps/docs/src/components/typography/index.tsx
···
34
34
35
35
const styles = stylex.create({
36
36
pre: {
37
-
paddingBottom: verticalSpace["2xl"],
38
-
paddingLeft: horizontalSpace["2xl"],
39
-
paddingRight: horizontalSpace["2xl"],
40
-
paddingTop: verticalSpace["2xl"],
41
37
borderColor: uiColor.border2,
42
38
borderRadius: radius.lg,
43
39
borderStyle: "solid",
44
40
borderWidth: 1,
45
-
46
41
cornerShape: "squircle",
42
+
display: "flex",
47
43
position: "relative",
48
44
marginBottom: verticalSpace["7xl"],
49
45
marginTop: verticalSpace["7xl"],
46
+
},
47
+
preCode: {
48
+
overflow: "auto",
49
+
paddingBottom: verticalSpace["2xl"],
50
+
paddingLeft: horizontalSpace["2xl"],
51
+
paddingRight: horizontalSpace["2xl"],
52
+
paddingTop: verticalSpace["2xl"],
53
+
width: "100%",
50
54
},
51
55
copyButton: {
52
56
position: "absolute",
···
71
75
paddingTop: verticalSpace["md"],
72
76
},
73
77
unorderedList: {
74
-
marginBottom: 0,
75
-
marginLeft: 0,
76
-
marginRight: 0,
77
-
marginTop: 0,
78
78
gap: gap["xl"],
79
79
display: "flex",
80
80
flexDirection: "column",
81
81
listStyleType: "disc",
82
-
paddingLeft: horizontalSpace["7xl"],
83
-
},
84
-
orderedList: {
85
82
marginBottom: 0,
86
83
marginLeft: 0,
87
84
marginRight: 0,
88
85
marginTop: 0,
86
+
paddingLeft: horizontalSpace["7xl"],
87
+
},
88
+
orderedList: {
89
89
gap: gap["xl"],
90
90
display: "flex",
91
91
flexDirection: "column",
92
92
listStyleType: "decimal",
93
+
marginBottom: 0,
94
+
marginLeft: 0,
95
+
marginRight: 0,
96
+
marginTop: 0,
93
97
paddingLeft: horizontalSpace["7xl"],
94
98
},
95
99
listItem: {
···
387
391
const isPre = use(PreContext);
388
392
389
393
if (isPre) {
390
-
return (
391
-
<code
392
-
{...props}
393
-
// className={className} style={style}
394
-
/>
395
-
);
394
+
return <code {...props} {...stylex.props(styles.preCode, style)} />;
396
395
}
397
396
398
397
return (
+2
-1
apps/docs/src/examples/editable-text/composition.tsx
+2
-1
apps/docs/src/examples/editable-text/composition.tsx
···
35
35
return (
36
36
<Card style={styles.card}>
37
37
<ListBox
38
+
aria-label="Editable text composition"
38
39
items={items}
39
40
selectionMode="single"
40
41
defaultSelectedKeys={["item1"]}
41
42
>
42
43
{(item) => (
43
-
<ListBoxItem key={item.id} id={item.id}>
44
+
<ListBoxItem key={item.id} id={item.id} textValue={item.name}>
44
45
<EditableText onChange={(value) => updateItem(item.id, value)}>
45
46
{item.name}
46
47
</EditableText>
+7
-4
apps/docs/src/examples/foundations/animations.tsx
+7
-4
apps/docs/src/examples/foundations/animations.tsx
···
18
18
import { radius } from "../../components/theme/radius.stylex";
19
19
import {
20
20
horizontalSpace,
21
-
verticalSpace,
22
21
size as sizeSpace,
22
+
verticalSpace,
23
23
} from "../../components/theme/semantic-spacing.stylex";
24
24
25
25
const slideLeftToRight = stylex.keyframes({
···
29
29
},
30
30
to: {
31
31
transform: "translateY(-50%)",
32
-
left: `calc(100% - ${horizontalSpace["17xl"]} - ${horizontalSpace["3xl"]})`,
32
+
left: `calc(100% - ${horizontalSpace["11xl"]} - ${horizontalSpace["3xl"]})`,
33
33
},
34
34
});
35
35
···
78
78
animationTimingFunction: timingFunction,
79
79
backgroundColor: primaryColor.solid1,
80
80
height: sizeSpace["12xl"],
81
-
width: sizeSpace["16xl"],
81
+
width: sizeSpace["10xl"],
82
82
}),
83
83
previewBoxLeftToRight: (
84
84
animationName: unknown,
···
99
99
height: sizeSpace["12xl"],
100
100
left: horizontalSpace["3xl"],
101
101
top: "50%",
102
-
width: sizeSpace["16xl"],
102
+
width: sizeSpace["10xl"],
103
103
}),
104
104
});
105
105
···
134
134
Duration
135
135
</Text>
136
136
<ListBox
137
+
aria-label="Select animation duration"
137
138
items={durationItems}
138
139
selectedKeys={new Set([selectedKey])}
139
140
onSelectionChange={(keys) => {
···
198
199
<Flex direction="column" gap="md" style={styles.listboxContainer}>
199
200
<Text weight="semibold">Timing Function</Text>
200
201
<ListBox
202
+
aria-label="Select animation timing function"
201
203
items={timingFunctionItems}
202
204
selectedKeys={new Set([selectedKey])}
203
205
onSelectionChange={(keys) => {
···
262
264
<Flex direction="column" gap="md" style={styles.listboxContainer}>
263
265
<Text weight="semibold">Animation</Text>
264
266
<ListBox
267
+
aria-label="Select animation"
265
268
items={animationItems}
266
269
selectedKeys={new Set([selectedKey])}
267
270
onSelectionChange={(keys) => {
+9
-4
apps/docs/src/examples/foundations/shadow.tsx
+9
-4
apps/docs/src/examples/foundations/shadow.tsx
···
8
8
import { uiColor } from "../../components/theme/color.stylex";
9
9
import { radius } from "../../components/theme/radius.stylex";
10
10
import {
11
-
verticalSpace,
12
11
size as sizeSpace,
12
+
verticalSpace,
13
13
} from "../../components/theme/semantic-spacing.stylex";
14
14
15
15
const styles = stylex.create({
···
26
26
borderStyle: "solid",
27
27
borderWidth: 1,
28
28
cornerShape: "squircle",
29
-
height: sizeSpace["16xl"],
30
-
width: sizeSpace["16xl"],
29
+
height: sizeSpace["11xl"],
30
+
width: sizeSpace["11xl"],
31
31
},
32
32
shadow: (value: string) => ({
33
33
boxShadow: value,
···
40
40
41
41
export function Shadow() {
42
42
return (
43
-
<Grid columns="repeat(3, 1fr)" columnGap="7xl" style={styles.wrapper}>
43
+
<Grid
44
+
columns="repeat(3, 1fr)"
45
+
columnGap="7xl"
46
+
rowGap="7xl"
47
+
style={styles.wrapper}
48
+
>
44
49
{sortedShadow.map(([key, value]) => (
45
50
<Flex
46
51
key={key}
+19
-1
apps/docs/src/examples/hover-card/basic.tsx
+19
-1
apps/docs/src/examples/hover-card/basic.tsx
···
1
+
import * as stylex from "@stylexjs/stylex";
2
+
import { Button } from "react-aria-components";
3
+
1
4
import { HoverCard } from "@/components/hover-card";
2
5
import { Text } from "@/components/typography/text";
3
6
7
+
const styles = stylex.create({
8
+
button: {
9
+
margin: 0,
10
+
padding: 0,
11
+
borderWidth: 0,
12
+
backgroundColor: "transparent",
13
+
},
14
+
});
15
+
4
16
export function Basic() {
5
17
return (
6
-
<HoverCard trigger={<Text variant="link">Hover me</Text>}>
18
+
<HoverCard
19
+
trigger={
20
+
<Button {...stylex.props(styles.button)}>
21
+
<Text>Hover me</Text>
22
+
</Button>
23
+
}
24
+
>
7
25
<Text>This is a hover card with some content.</Text>
8
26
</HoverCard>
9
27
);
+17
-34
apps/docs/src/examples/image-cropper/blob.tsx
+17
-34
apps/docs/src/examples/image-cropper/blob.tsx
···
11
11
});
12
12
13
13
function createRainbowBlob(): Blob {
14
-
const canvas = document.createElement("canvas");
15
-
canvas.width = 128;
16
-
canvas.height = 128;
17
-
const ctx = canvas.getContext("2d");
18
-
19
-
if (!ctx) {
20
-
return new Blob([], { type: "image/png" });
21
-
}
14
+
const svg = `
15
+
<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 128 128">
16
+
<defs>
17
+
<linearGradient id="rainbow" x1="0%" y1="0%" x2="100%" y2="0%">
18
+
<stop offset="0%" stop-color="#ff0000" />
19
+
<stop offset="17%" stop-color="#ff7f00" />
20
+
<stop offset="33%" stop-color="#ffff00" />
21
+
<stop offset="50%" stop-color="#00ff00" />
22
+
<stop offset="67%" stop-color="#0000ff" />
23
+
<stop offset="83%" stop-color="#4b0082" />
24
+
<stop offset="100%" stop-color="#9400d3" />
25
+
</linearGradient>
26
+
</defs>
27
+
<rect width="128" height="128" fill="url(#rainbow)" />
28
+
</svg>
29
+
`;
22
30
23
-
// Create a horizontal rainbow gradient
24
-
const gradient = ctx.createLinearGradient(0, 0, 128, 0);
25
-
26
-
// Rainbow colors: red, orange, yellow, green, blue, indigo, violet
27
-
gradient.addColorStop(0, "#ff0000"); // Red
28
-
gradient.addColorStop(0.17, "#ff7f00"); // Orange
29
-
gradient.addColorStop(0.33, "#ffff00"); // Yellow
30
-
gradient.addColorStop(0.5, "#00ff00"); // Green
31
-
gradient.addColorStop(0.67, "#0000ff"); // Blue
32
-
gradient.addColorStop(0.83, "#4b0082"); // Indigo
33
-
gradient.addColorStop(1, "#9400d3"); // Violet
34
-
35
-
ctx.fillStyle = gradient;
36
-
ctx.fillRect(0, 0, 128, 128);
37
-
38
-
// Convert to data URL and then to blob synchronously
39
-
const dataUrl = canvas.toDataURL("image/png");
40
-
const byteString = atob(dataUrl.split(",")[1] || "");
41
-
const mimeString =
42
-
dataUrl.split(",")[0]?.match(/:(.*?);/)?.[1] || "image/png";
43
-
const ab = new ArrayBuffer(byteString.length);
44
-
const ia = new Uint8Array(ab);
45
-
for (let i = 0; i < byteString.length; i++) {
46
-
ia[i] = byteString.codePointAt(i);
47
-
}
48
-
return new Blob([ab], { type: mimeString });
31
+
return new Blob([svg], { type: "image/svg+xml" });
49
32
}
50
33
51
34
export function BlobExample() {
+7
-9
apps/docs/src/examples/lightbox/basic.tsx
+7
-9
apps/docs/src/examples/lightbox/basic.tsx
···
13
13
const [isOpen, setIsOpen] = useState(false);
14
14
15
15
return (
16
-
<>
17
-
<Button onPress={() => setIsOpen(true)}>Open Lightbox</Button>
18
-
<Lightbox
19
-
isOpen={isOpen}
20
-
onOpenChange={setIsOpen}
21
-
images={SAMPLE_IMAGES}
22
-
alt="Sample image"
23
-
/>
24
-
</>
16
+
<Lightbox
17
+
isOpen={isOpen}
18
+
onOpenChange={setIsOpen}
19
+
images={SAMPLE_IMAGES}
20
+
alt="Sample image"
21
+
trigger={<Button onPress={() => setIsOpen(true)}>Open Lightbox</Button>}
22
+
/>
25
23
);
26
24
}
+1
-1
apps/docs/src/examples/listbox/basic.tsx
+1
-1
apps/docs/src/examples/listbox/basic.tsx
+6
-1
apps/docs/src/examples/listbox/virtualization.tsx
+6
-1
apps/docs/src/examples/listbox/virtualization.tsx
···
22
22
23
23
export function Virtualization() {
24
24
return (
25
-
<ListBox items={items} isVirtualized style={styles.listBox}>
25
+
<ListBox
26
+
items={items}
27
+
isVirtualized
28
+
style={styles.listBox}
29
+
aria-label="Virtualization list box"
30
+
>
26
31
{(item) => (
27
32
<ListBoxItem key={item.id} id={item.id}>
28
33
{item.name}
+1
-1
apps/docs/src/examples/progress-bar/without-label.tsx
+1
-1
apps/docs/src/examples/progress-bar/without-label.tsx
+1
-1
apps/docs/src/examples/progress-circle/basic.tsx
+1
-1
apps/docs/src/examples/progress-circle/basic.tsx
+3
-3
apps/docs/src/examples/progress-circle/with-label.tsx
+3
-3
apps/docs/src/examples/progress-circle/with-label.tsx
···
13
13
export function WithLabel() {
14
14
return (
15
15
<div {...stylex.props(styles.wrapper)}>
16
-
<ProgressCircle value={50} />
17
-
<ProgressCircle value={75} />
18
-
<ProgressCircle value={100} />
16
+
<ProgressCircle value={50} aria-label="Progress" />
17
+
<ProgressCircle value={75} aria-label="Progress" />
18
+
<ProgressCircle value={100} aria-label="Progress" />
19
19
</div>
20
20
);
21
21
}
+1
-1
apps/docs/src/examples/table/basic.tsx
+1
-1
apps/docs/src/examples/table/basic.tsx
+1
-1
apps/docs/src/examples/table/disabled-rows.tsx
+1
-1
apps/docs/src/examples/table/disabled-rows.tsx
+5
-1
apps/docs/src/examples/table/drag-and-drop.tsx
+5
-1
apps/docs/src/examples/table/drag-and-drop.tsx
···
71
71
72
72
return (
73
73
<ResizableTableContainer {...stylex.props(styles.wrapper)}>
74
-
<Table style={styles.wrapper} dragAndDropHooks={dragAndDropHooks}>
74
+
<Table
75
+
style={styles.wrapper}
76
+
aria-label="Drag and Drop Table"
77
+
dragAndDropHooks={dragAndDropHooks}
78
+
>
75
79
<TableHeader>
76
80
{columns.map((column) => (
77
81
<TableColumn isRowHeader key={column.id} id={column.id}>
+1
-1
apps/docs/src/examples/table/resizable-columns.tsx
+1
-1
apps/docs/src/examples/table/resizable-columns.tsx
+5
-1
apps/docs/src/examples/table/selection.tsx
+5
-1
apps/docs/src/examples/table/selection.tsx
···
31
31
32
32
export function Selection() {
33
33
return (
34
-
<Table selectionMode="multiple" style={styles.table}>
34
+
<Table
35
+
selectionMode="multiple"
36
+
style={styles.table}
37
+
aria-label="Selection Table"
38
+
>
35
39
<TableHeader columns={columns}>
36
40
{(column) => (
37
41
<TableColumn isRowHeader id={column.id}>
+1
apps/docs/src/examples/table/sorting.tsx
+1
apps/docs/src/examples/table/sorting.tsx
+5
-1
apps/docs/src/examples/table/virtualization.tsx
+5
-1
apps/docs/src/examples/table/virtualization.tsx
···
42
42
export function Virtualization() {
43
43
return (
44
44
<div {...stylex.props(styles.wrapper)}>
45
-
<Table isVirtualized style={styles.table}>
45
+
<Table
46
+
isVirtualized
47
+
style={styles.table}
48
+
aria-label="Virtualization Table"
49
+
>
46
50
<TableHeader>
47
51
{columns.map((column) => (
48
52
<TableColumn isRowHeader key={column.id} id={column.id}>
+1
-1
apps/docs/src/examples/tree/basic.tsx
+1
-1
apps/docs/src/examples/tree/basic.tsx
+12
-2
apps/docs/src/examples/tree/drag-and-drop.tsx
+12
-2
apps/docs/src/examples/tree/drag-and-drop.tsx
···
63
63
},
64
64
];
65
65
66
+
interface TreeItemChildren {
67
+
value: { id: string; name: string };
68
+
children?: Array<TreeItemChildren>;
69
+
}
70
+
66
71
function renderTreeItem(item: {
67
72
value: { id: string; name: string };
68
73
children?: Array<{
69
74
value: { id: string; name: string };
70
-
children?: Array<unknown>;
75
+
children?: Array<TreeItemChildren>;
71
76
}>;
72
77
}): React.ReactNode {
73
78
return (
···
106
111
: 0;
107
112
const keyArray = [...e.keys];
108
113
for (let i = 0; i < keyArray.length; i++) {
109
-
tree.move(keyArray[i], e.target.key, targetIndex + i);
114
+
const key = keyArray[i];
115
+
116
+
if (key) {
117
+
tree.move(key, e.target.key, targetIndex + i);
118
+
}
110
119
}
111
120
}
112
121
}
···
118
127
119
128
return (
120
129
<Tree
130
+
aria-label="Drag and Drop Tree"
121
131
style={styles.root}
122
132
items={tree.items}
123
133
dragAndDropHooks={dragAndDropHooks}
+6
-1
apps/docs/src/examples/tree/virtualization.tsx
+6
-1
apps/docs/src/examples/tree/virtualization.tsx
+8
-3
apps/docs/src/lib/PropDocs.tsx
+8
-3
apps/docs/src/lib/PropDocs.tsx
···
24
24
25
25
import { uiColor } from "../components/theme/color.stylex";
26
26
import { radius } from "../components/theme/radius.stylex";
27
-
import { shadow } from "../components/theme/shadow.stylex";
28
27
import { size as sizeSpace } from "../components/theme/semantic-spacing.stylex";
28
+
import { shadow } from "../components/theme/shadow.stylex";
29
29
30
30
const styles = stylex.create({
31
31
sticky: {
···
43
43
overflow: "auto",
44
44
},
45
45
highlightedCode: {
46
+
margin: 0,
47
+
padding: 0,
48
+
borderWidth: 0,
49
+
backgroundColor: "transparent",
46
50
width: "fit-content",
47
51
48
52
/* eslint-disable-next-line @stylexjs/no-legacy-contextual-styles, @stylexjs/valid-styles */
···
92
96
}, [ref]);
93
97
94
98
const codeElement = (
95
-
<div
99
+
<button
100
+
type="button"
96
101
// eslint-disable-next-line @eslint-react/dom/no-dangerously-set-innerhtml
97
102
dangerouslySetInnerHTML={{ __html: code }}
98
103
{...stylex.props(styles.highlightedCode)}
···
130
135
onScroll={(e) => setHasScrollX(e.currentTarget.scrollLeft > 0)}
131
136
>
132
137
<ResizableTableContainer>
133
-
<Table size="md">
138
+
<Table size="md" aria-label={`${doc.displayName} props`}>
134
139
<TableHeader>
135
140
<TableColumn
136
141
isRowHeader
+6
-5
apps/docs/src/showcases/canvas-editor.tsx
+6
-5
apps/docs/src/showcases/canvas-editor.tsx
···
71
71
72
72
import { uiColor } from "../components/theme/color.stylex";
73
73
import { radius } from "../components/theme/radius.stylex";
74
-
import { shadow } from "../components/theme/shadow.stylex";
75
74
import {
76
-
verticalSpace,
77
-
horizontalSpace,
78
75
gap as gapSpace,
76
+
horizontalSpace,
79
77
size as sizeSpace,
78
+
verticalSpace,
80
79
} from "../components/theme/semantic-spacing.stylex";
80
+
import { shadow } from "../components/theme/shadow.stylex";
81
81
82
82
const styles = stylex.create({
83
83
main: {
···
96
96
flexDirection: "column",
97
97
position: "relative",
98
98
height: 800,
99
-
marginTop: verticalSpace["13xl"],
99
+
marginLeft: horizontalSpace["6xl"],
100
+
marginTop: verticalSpace["8xl"],
100
101
width: 1200,
101
102
},
102
103
editor: {
···
430
431
}}
431
432
>
432
433
{(page) => (
433
-
<ListBoxItem key={page.id} id={page.id}>
434
+
<ListBoxItem key={page.id} id={page.id} textValue={page.name}>
434
435
<EditableText
435
436
onChange={(value) => {
436
437
editor.updatePage({
+14
-3
apps/docs/src/showcases/ecommerce.tsx
+14
-3
apps/docs/src/showcases/ecommerce.tsx
···
385
385
Size {item.size}
386
386
</Text>
387
387
</Flex>
388
-
<Select defaultValue={item.count.toString()}>
388
+
<Select
389
+
defaultValue={item.count.toString()}
390
+
aria-label="Select quantity"
391
+
>
389
392
<SelectItem id="1">1</SelectItem>
390
393
<SelectItem id="2">2</SelectItem>
391
394
<SelectItem id="3">3</SelectItem>
···
727
730
<Text weight="semibold" size="lg">
728
731
Shipment tracking
729
732
</Text>
730
-
<SearchField placeholder="Enter package number" />
733
+
<SearchField
734
+
aria-label="Enter package number"
735
+
placeholder="Enter package number"
736
+
/>
731
737
</Flex>
732
738
733
739
<Grid columns="2fr 3fr" columnGap="5xl" style={styles.grow}>
···
868
874
<Flex gap="2xl" direction="column">
869
875
<Flex gap="xl" align="center">
870
876
<SearchField
877
+
aria-label="Search customers"
871
878
placeholder="Search"
872
879
variant="secondary"
873
880
style={styles.grow}
874
881
/>
875
-
<Select defaultValue="all-customers" variant="secondary">
882
+
<Select
883
+
defaultValue="all-customers"
884
+
variant="secondary"
885
+
aria-label="Select customer type"
886
+
>
876
887
<SelectItem id="all-customers">All customers</SelectItem>
877
888
<SelectItem id="new-customers">New customers</SelectItem>
878
889
<SelectItem id="vip-customers">VIP customers</SelectItem>
+49
-49
apps/docs/src/showcases/invoice.tsx
+49
-49
apps/docs/src/showcases/invoice.tsx
···
43
43
import { primary, ui } from "../components/theme/semantic-color.stylex";
44
44
import {
45
45
horizontalSpace,
46
-
verticalSpace,
47
46
size as sizeSpace,
47
+
verticalSpace,
48
48
} from "../components/theme/semantic-spacing.stylex";
49
49
import { fontFamily, typeramp } from "../components/theme/typography.stylex";
50
50
···
78
78
},
79
79
check: {
80
80
color: successColor.solid2,
81
+
flexShrink: 0,
81
82
},
82
83
creditCardWrapper: {
83
84
padding: sizeSpace["6xl"],
···
96
97
cornerShape: "squircle",
97
98
backgroundImage: `linear-gradient(135deg, ${primaryColor.solid2} 0%, ${primaryColor.text1} 100%)`,
98
99
fontFamily: fontFamily["mono"],
99
-
height: sizeSpace["18xl"],
100
+
height: sizeSpace["15xl"],
100
101
},
101
102
copyCardNumber: {
102
103
backgroundColor: {
···
163
164
</Flex>
164
165
165
166
<Grid
166
-
columns="auto max-content 1fr auto"
167
+
columns="auto max-content min-content auto"
167
168
columnGap="2xl"
168
169
rowGap="4xl"
169
170
alignItems="center"
···
227
228
<Text weight="semibold" size="xl">
228
229
$0<Text variant="secondary">{" / mo"}</Text>
229
230
</Text>
230
-
<Flex direction="column" gap="md">
231
-
<Flex align="center" gap="md">
231
+
<Flex direction="column" gap="xl">
232
+
<Flex align="center" gap="lg">
232
233
<CheckCircle {...stylex.props(styles.check)} size={16} />
233
234
<Text size="sm">Expense tracking</Text>
234
235
</Flex>
235
-
<Flex align="center" gap="md">
236
+
<Flex align="center" gap="lg">
236
237
<CheckCircle {...stylex.props(styles.check)} size={16} />
237
238
<Text size="sm">Invoicing</Text>
238
239
</Flex>
239
-
<Flex align="center" gap="md">
240
+
<Flex align="center" gap="lg">
240
241
<CheckCircle {...stylex.props(styles.check)} size={16} />
241
242
<Text size="sm">Payment tracking</Text>
242
243
</Flex>
243
-
<Flex align="center" gap="md">
244
+
<Flex align="center" gap="lg">
244
245
<CheckCircle {...stylex.props(styles.check)} size={16} />
245
246
<Text size="sm">Transaction recording</Text>
246
247
</Flex>
247
-
<Flex align="center" gap="md">
248
+
<Flex align="center" gap="lg">
248
249
<CheckCircle {...stylex.props(styles.check)} size={16} />
249
250
<Text size="sm">Basic reports</Text>
250
251
</Flex>
251
-
<Flex align="center" gap="md">
252
+
<Flex align="center" gap="lg">
252
253
<CheckCircle {...stylex.props(styles.check)} size={16} />
253
254
<Text size="sm">Email support</Text>
254
255
</Flex>
···
267
268
<Text weight="semibold" size="xl">
268
269
$49<Text variant="secondary">{" / mo"}</Text>
269
270
</Text>
270
-
<Flex direction="column" gap="md">
271
-
<Flex align="center" gap="md">
271
+
<Flex direction="column" gap="xl">
272
+
<Flex align="center" gap="lg">
272
273
<CheckCircle {...stylex.props(styles.check)} size={16} />
273
274
<Text size="sm">Online payments</Text>
274
275
</Flex>
275
-
<Flex align="center" gap="md">
276
+
<Flex align="center" gap="lg">
276
277
<CheckCircle {...stylex.props(styles.check)} size={16} />
277
278
<Text size="sm">Recurring invoices</Text>
278
279
</Flex>
279
-
<Flex align="center" gap="md">
280
+
<Flex align="center" gap="lg">
280
281
<CheckCircle {...stylex.props(styles.check)} size={16} />
281
282
<Text size="sm">Bill management</Text>
282
283
</Flex>
283
-
<Flex align="center" gap="md">
284
+
<Flex align="center" gap="lg">
284
285
<CheckCircle {...stylex.props(styles.check)} size={16} />
285
286
<Text size="sm">Inventory tracking</Text>
286
287
</Flex>
287
-
<Flex align="center" gap="md">
288
+
<Flex align="center" gap="lg">
288
289
<CheckCircle {...stylex.props(styles.check)} size={16} />
289
290
<Text size="sm">Detailed reports</Text>
290
291
</Flex>
291
-
<Flex align="center" gap="md">
292
+
<Flex align="center" gap="lg">
292
293
<CheckCircle {...stylex.props(styles.check)} size={16} />
293
294
<Text size="sm">Phone support</Text>
294
295
</Flex>
···
307
308
<Text weight="semibold" size="xl">
308
309
$99<Text variant="secondary">{" / mo"}</Text>
309
310
</Text>
310
-
<Flex direction="column" gap="md">
311
-
<Flex align="center" gap="md">
311
+
<Flex direction="column" gap="xl">
312
+
<Flex align="center" gap="lg">
312
313
<CheckCircle {...stylex.props(styles.check)} size={16} />
313
314
<Text size="sm">Custom invoices</Text>
314
315
</Flex>
315
-
<Flex align="center" gap="md">
316
+
<Flex align="center" gap="lg">
316
317
<CheckCircle {...stylex.props(styles.check)} size={16} />
317
318
<Text size="sm">Multi-business</Text>
318
319
</Flex>
319
-
<Flex align="center" gap="md">
320
+
<Flex align="center" gap="lg">
320
321
<CheckCircle {...stylex.props(styles.check)} size={16} />
321
322
<Text size="sm">Team collaboration</Text>
322
323
</Flex>
323
-
<Flex align="center" gap="md">
324
+
<Flex align="center" gap="lg">
324
325
<CheckCircle {...stylex.props(styles.check)} size={16} />
325
326
<Text size="sm">App integrations</Text>
326
327
</Flex>
327
-
<Flex align="center" gap="md">
328
+
<Flex align="center" gap="lg">
328
329
<CheckCircle {...stylex.props(styles.check)} size={16} />
329
330
<Text size="sm">Advanced security</Text>
330
331
</Flex>
331
-
<Flex align="center" gap="md">
332
+
<Flex align="center" gap="lg">
332
333
<CheckCircle {...stylex.props(styles.check)} size={16} />
333
334
<Text size="sm">Priority support</Text>
334
335
</Flex>
···
370
371
<Grid columns="1fr auto" rowGap="5xl" alignItems="start">
371
372
{sections.map((section, index) => (
372
373
<Fragment key={section.title}>
373
-
<Flex direction="column" gap="xs">
374
+
<Flex direction="column" gap="2xl">
374
375
<Heading5>{section.title}</Heading5>
375
376
<SmallBody variant="secondary">{section.description}</SmallBody>
376
377
</Flex>
377
-
<Flex direction="column" gap="md">
378
+
<Flex direction="column" gap="lg">
378
379
<Switch>Push</Switch>
379
380
<Switch>Email</Switch>
380
381
<Switch isDisabled>Slack</Switch>
···
396
397
const activities = [
397
398
{
398
399
name: "Oliver Chen",
399
-
timestamp: "06-08-2025 10:00 AM",
400
+
timestamp: "2025-06-08T10:00:00",
400
401
description: (
401
402
<>
402
403
Approved invoice <Link href="#">#3461</Link>{" "}
···
407
408
},
408
409
{
409
410
name: "Amelia Rodriguez",
410
-
timestamp: "06-08-2025 10:00 AM",
411
+
timestamp: "2025-06-08T10:00:00",
411
412
description: (
412
413
<>
413
414
Purchased <Link href="#">15 office chairs</Link>{" "}
···
418
419
},
419
420
{
420
421
name: "Theodore Kim",
421
-
timestamp: "06-08-2025 10:00 AM",
422
+
timestamp: "2025-06-08T10:00:00",
422
423
avatar:
423
424
"https://images.unsplash.com/photo-1632765854612-9b02b6ec2b15?&w=64&h=64&dpr=2&q=70&crop=focalpoint&fp-x=0.4&fp-y=0.35&fp-z=1.05&fit=crop",
424
425
description: (
···
429
430
},
430
431
{
431
432
name: "Jasper Eriksson",
432
-
timestamp: "06-08-2025 10:00 AM",
433
+
timestamp: "2025-06-08T10:00:00",
433
434
avatar:
434
435
"https://images.unsplash.com/photo-1586822339087-80cc375ac083?&w=64&h=64&dpr=2&q=70&crop=focalpoint&fp-x=0.5&fp-y=0.6&fp-z=1&fit=crop",
435
436
description: (
···
440
441
},
441
442
{
442
443
name: "Travis Ross",
443
-
timestamp: "06-08-2025 10:00 AM",
444
+
timestamp: "2025-06-08T10:00:00",
444
445
avatar:
445
446
"https://images.unsplash.com/photo-1564564321837-a57b7070ac4f?&w=64&h=64&dpr=2&q=70&crop=focalpoint&fp-x=0.52&fp-y=0.47&fp-z=1.3&fit=crop",
446
447
description: (
···
451
452
},
452
453
{
453
454
name: "Gizela Kavková",
454
-
timestamp: "06-08-2025 10:00 AM",
455
+
timestamp: "2025-06-08T10:00:00",
455
456
avatar:
456
457
"https://images.unsplash.com/photo-1525304937537-4d586f394674?&w=64&h=64&dpr=2&q=70&crop=faces&fit=crop",
457
458
description: (
···
462
463
},
463
464
{
464
465
name: "Gizela Kavková",
465
-
timestamp: "06-08-2025 8:00 AM",
466
+
timestamp: "2025-06-08T08:00:00",
466
467
avatar:
467
468
"https://images.unsplash.com/photo-1525304937537-4d586f394674?&w=64&h=64&dpr=2&q=70&crop=faces&fit=crop",
468
469
description: (
···
473
474
},
474
475
{
475
476
name: "Da-Xia Wu",
476
-
timestamp: "06-08-2025 8:00 AM",
477
+
timestamp: "2025-06-08T08:00:00",
477
478
avatar:
478
479
"https://images.unsplash.com/photo-1541823709867-1b206113eafd?&w=64&h=64&dpr=2&q=70&crop=focalpoint&fp-x=0.5&fp-y=0.3&fp-z=1.5&fit=crop",
479
480
description: <>Joined the team</>,
···
496
497
alignItems="center"
497
498
>
498
499
{activities.map((activity, index) => (
499
-
<Fragment key={activity.timestamp}>
500
+
<Fragment key={`${activity.name}-${activity.timestamp}`}>
500
501
<Avatar
501
502
size="lg"
502
503
src={activity.avatar}
···
611
612
</CardDescription>
612
613
</CardHeader>
613
614
<CardBody>
614
-
<Grid
615
-
columns="1fr 1fr 1fr"
616
-
columnGap="9xl"
617
-
rowGap="9xl"
618
-
alignItems="center"
619
-
>
615
+
<Grid columns="1fr 1fr 1fr" rowGap="5xl" alignItems="center">
620
616
{data.map((item) => (
621
617
<Flex
622
618
key={`${item.label}-${item.change}`}
623
619
direction="column"
624
-
gap="2xl"
620
+
gap="lg"
625
621
>
626
-
<Flex gap="md" align="center">
622
+
<Flex gap="xl" align="center">
627
623
<Text variant="secondary">{item.label}</Text>
628
624
<Badge
629
625
size="sm"
···
742
738
label={
743
739
<Flex justify="between" align="center">
744
740
<span>Password</span>
745
-
<Link style={typeramp.sublabel}>Forgot Password?</Link>
741
+
<Link
742
+
style={typeramp.sublabel as unknown as stylex.StyleXStyles}
743
+
>
744
+
Forgot Password?
745
+
</Link>
746
746
</Flex>
747
747
}
748
748
/>
···
766
766
</CardHeader>
767
767
<CardBody>
768
768
<Flex direction="column" gap="7xl">
769
-
<Grid columns="1fr 1fr" columnGap="5xl">
770
-
<Flex direction="column" gap="md">
769
+
<Grid columns="1fr 1fr" rowGap="5xl" columnGap="5xl">
770
+
<Flex direction="column" gap="lg">
771
771
<Text size="sm" variant="secondary">
772
772
Issued
773
773
</Text>
774
774
<Text weight="medium">June 21, 2023</Text>
775
775
</Flex>
776
-
<Flex direction="column" gap="md">
776
+
<Flex direction="column" gap="lg">
777
777
<Text size="sm" variant="secondary">
778
778
Due
779
779
</Text>
780
780
<Text weight="medium">July 21, 2023</Text>
781
781
</Flex>
782
-
<Flex direction="column" gap="md">
782
+
<Flex direction="column" gap="lg">
783
783
<Text size="sm" variant="secondary">
784
784
To
785
785
</Text>
···
788
788
742 Evergreen Terrace, Springfield, IL 62704
789
789
</Text>
790
790
</Flex>
791
-
<Flex direction="column" gap="md">
791
+
<Flex direction="column" gap="lg">
792
792
<Text size="sm" variant="secondary">
793
793
From
794
794
</Text>
+9
-4
apps/docs/src/showcases/llm.tsx
+9
-4
apps/docs/src/showcases/llm.tsx
···
37
37
import { TextArea } from "../components/text-area";
38
38
import { uiColor } from "../components/theme/color.stylex";
39
39
import { radius } from "../components/theme/radius.stylex";
40
-
import { shadow } from "../components/theme/shadow.stylex";
41
40
import {
42
-
verticalSpace,
43
41
horizontalSpace,
44
42
size as sizeSpace,
43
+
verticalSpace,
45
44
} from "../components/theme/semantic-spacing.stylex";
45
+
import { shadow } from "../components/theme/shadow.stylex";
46
46
import { fontSize, fontWeight } from "../components/theme/typography.stylex";
47
47
import { Text } from "../components/typography/text";
48
48
···
62
62
display: "flex",
63
63
flexDirection: "column",
64
64
height: 700,
65
-
marginTop: verticalSpace["13xl"],
65
+
marginLeft: horizontalSpace["6xl"],
66
+
marginTop: verticalSpace["8xl"],
66
67
width: 1200,
67
68
},
68
69
header: {
···
273
274
<Flex direction="column" gap="2xl" style={styles.mainContent}>
274
275
{viewType === "input" && (
275
276
<TextArea
277
+
aria-label="Prompt"
276
278
placeholder="Write a tagline for an ice cream shop"
277
279
isResizable={false}
278
280
style={styles.promptWrapper}
···
281
283
{viewType === "preview" && (
282
284
<Flex style={styles.promptWrapper} gap="5xl">
283
285
<TextArea
286
+
aria-label="Prompt"
284
287
placeholder="Write a tagline for an ice cream shop"
285
288
isResizable={false}
286
289
style={styles.grow}
···
296
299
<Flex style={styles.promptWrapper} gap="5xl">
297
300
<Flex direction="column" gap="5xl" style={styles.grow}>
298
301
<TextArea
302
+
aria-label="Instructions"
299
303
placeholder="Write a tagline for an ice cream shop"
300
304
isResizable={false}
301
305
style={styles.grow}
302
306
/>
303
307
<TextArea
304
308
label="Instructions"
309
+
aria-label="Instructions"
305
310
placeholder="Write instructions for the AI to follow"
306
311
rows={4}
307
312
/>
···
321
326
</Flex>
322
327
</Flex>
323
328
324
-
<Flex direction="column" gap="9xl" style={styles.sidebar}>
329
+
<Flex direction="column" gap="6xl" style={styles.sidebar}>
325
330
<Flex direction="column" gap="xl">
326
331
<Text size="sm" weight="semibold">
327
332
Mode
+25
-26
apps/docs/src/showcases/music.tsx
+25
-26
apps/docs/src/showcases/music.tsx
···
39
39
import { primaryColor } from "../components/theme/color.stylex";
40
40
import { radius } from "../components/theme/radius.stylex";
41
41
import {
42
-
size as sizeSpace,
43
42
horizontalSpace,
43
+
size as sizeSpace,
44
44
verticalSpace,
45
-
gap as gapSpace,
46
45
} from "../components/theme/semantic-spacing.stylex";
47
46
48
47
const styles = stylex.create({
···
112
111
backgroundColor: primaryColor.solid1,
113
112
color: primaryColor.textContrast,
114
113
},
115
-
membershipCard: {
116
-
gap: gapSpace.md,
117
-
},
118
114
lyricsBody: {
119
115
overflow: "auto",
120
-
height: sizeSpace["25xl"],
116
+
height: sizeSpace["15xl"],
121
117
},
122
118
});
123
119
124
120
function MembershipCard() {
125
121
return (
126
-
<Card style={styles.membershipCard}>
122
+
<Card>
127
123
<CardHeader>
128
124
<CardTitle>Membership</CardTitle>
129
125
<CardHeaderAction>
···
140
136
justify="between"
141
137
style={styles.membershipTier as unknown as stylex.StyleXStyles}
142
138
>
143
-
<Flex direction="column" gap="md">
139
+
<Flex direction="column" gap="xl">
144
140
<Text weight="medium">Individual</Text>
145
141
<Text variant="secondary" size="sm">
146
142
Sign up with 1 account
···
160
156
] as unknown as stylex.StyleXStyles
161
157
}
162
158
>
163
-
<Flex direction="column" gap="xs">
159
+
<Flex direction="column" gap="xl">
164
160
<Text weight="medium">Duo</Text>
165
161
<Text variant="secondary" size="sm">
166
162
Sign up 2 accounts
···
177
173
justify="between"
178
174
style={[styles.membershipTier] as unknown as stylex.StyleXStyles}
179
175
>
180
-
<Flex direction="column" gap="xs">
176
+
<Flex direction="column" gap="xl">
181
177
<Text weight="medium">Family</Text>
182
178
<Text variant="secondary" size="sm">
183
179
Sign up to 6 accounts
···
365
361
<AspectRatio style={styles.albumArt}>
366
362
<AspectRatioImage src={song.albumArt} alt={song.title} />
367
363
</AspectRatio>
368
-
<Flex direction="column" gap="sm" style={styles.grow}>
364
+
<Flex direction="column" gap="xl" style={styles.grow}>
369
365
<Text weight="medium">{song.title}</Text>
370
366
<Text variant="secondary" size="sm">
371
367
{song.artist} - {song.album}
···
417
413
</Flex>
418
414
419
415
<Grid columns="repeat(4, 1fr)" columnGap="xl">
420
-
<Flex direction="column" gap="md" align="center">
416
+
<Flex direction="column" gap="lg" align="center">
421
417
<ToggleButton
422
418
aria-label="Normalize"
423
419
variant="outline"
···
427
423
>
428
424
<GripVertical size={24} />
429
425
</ToggleButton>
430
-
<Flex direction="column" gap="xs" align="center">
426
+
<Flex direction="column" gap="md" align="center">
431
427
<Text id="normalize-label" weight="medium" size="sm">
432
428
Normalize
433
429
</Text>
···
437
433
</Flex>
438
434
</Flex>
439
435
440
-
<Flex direction="column" gap="md" align="center">
436
+
<Flex direction="column" gap="lg" align="center">
441
437
<ToggleButton
442
438
aria-label="Equalizer"
443
439
variant="outline"
···
447
443
>
448
444
<BarChart3 size={24} />
449
445
</ToggleButton>
450
-
<Flex direction="column" gap="xs" align="center">
446
+
<Flex direction="column" gap="md" align="center">
451
447
<Text id="equalizer-label" weight="medium" size="sm">
452
448
Equalizer
453
449
</Text>
···
457
453
</Flex>
458
454
</Flex>
459
455
460
-
<Flex direction="column" gap="md" align="center">
456
+
<Flex direction="column" gap="lg" align="center">
461
457
<ToggleButton
462
458
aria-label="3D Audio"
463
459
aria-labelledby="3d-audio-label"
···
467
463
>
468
464
<Box size={24} />
469
465
</ToggleButton>
470
-
<Flex direction="column" gap="xs" align="center">
466
+
<Flex direction="column" gap="md" align="center">
471
467
<Text id="3d-audio-label" weight="medium" size="sm">
472
468
3D Audio
473
469
</Text>
···
477
473
</Flex>
478
474
</Flex>
479
475
480
-
<Flex direction="column" gap="md" align="center">
476
+
<Flex direction="column" gap="lg" align="center">
481
477
<ToggleButton
482
478
aria-label="Cross-Fade"
483
479
aria-labelledby="cross-fade-label"
···
487
483
>
488
484
<MoveHorizontal size={24} />
489
485
</ToggleButton>
490
-
<Flex direction="column" gap="xs" align="center">
486
+
<Flex direction="column" gap="md" align="center">
491
487
<Text id="cross-fade-label" weight="medium" size="sm">
492
488
Cross-Fade
493
489
</Text>
···
521
517
{/* Automatic downloads */}
522
518
<Flex direction="column" gap="xs">
523
519
<Flex align="center" justify="between">
524
-
<Flex direction="column" gap="xs">
520
+
<Flex direction="column" gap="lg">
525
521
<Text weight="medium" id="automatic-downloads-label">
526
522
Automatic downloads
527
523
</Text>
···
545
541
{/* Lossless audio */}
546
542
<Flex direction="column" gap="xs">
547
543
<Flex align="center" justify="between">
548
-
<Flex direction="column" gap="xs">
544
+
<Flex direction="column" gap="lg">
549
545
<Text weight="medium" id="lossless-audio-label">
550
546
Lossless audio
551
547
</Text>
···
570
566
{/* Spatial audio */}
571
567
<Flex direction="column" gap="xs">
572
568
<Flex align="center" justify="between">
573
-
<Flex direction="column" gap="xs">
569
+
<Flex direction="column" gap="lg">
574
570
<Text weight="medium" id="spatial-audio-label">
575
571
Spatial audio
576
572
</Text>
···
594
590
{/* Normalize volume */}
595
591
<Flex direction="column" gap="xs">
596
592
<Flex align="center" justify="between">
597
-
<Flex direction="column" gap="xs">
593
+
<Flex direction="column" gap="lg">
598
594
<Text weight="medium" id="normalize-volume-label">
599
595
Normalize volume
600
596
</Text>
···
617
613
618
614
{/* Maximum volume */}
619
615
<Flex direction="column" gap="md">
620
-
<Flex direction="column" gap="xs">
616
+
<Flex direction="column" gap="lg">
621
617
<Text weight="medium">Maximum volume</Text>
622
618
<Text variant="secondary" size="sm">
623
619
Limit the maximum volume to protect hearing
···
636
632
step={1}
637
633
showValueLabel={false}
638
634
style={styles.grow}
635
+
aria-label="Maximum volume"
639
636
/>
640
637
<Text variant="secondary" size="xs">
641
638
100%
···
645
642
646
643
{/* Crossfade */}
647
644
<Flex direction="column" gap="md">
648
-
<Flex direction="column" gap="xs">
645
+
<Flex direction="column" gap="lg">
649
646
<Text weight="medium">Crossfade</Text>
650
647
<Text variant="secondary" size="sm">
651
648
Smoothly fade out into the next song.
···
664
661
step={1}
665
662
showValueLabel={false}
666
663
style={styles.grow}
664
+
aria-label="Crossfade"
667
665
/>
668
666
<Text variant="secondary" size="xs">
669
667
10s
···
684
682
<CardDescription>King Krule - Biscuit Town</CardDescription>
685
683
</CardHeader>
686
684
<CardBody style={styles.lyricsBody}>
687
-
<Flex direction="column" gap="md">
685
+
<Flex direction="column" gap="xl">
688
686
<Body>I seem to sink lower, gazing in the rays of the solar</Body>
689
687
<Body>In fact, we made a pact, but now I think it's over</Body>
690
688
<Body>Red on white but he sipped on KA soda</Body>
···
760
758
</CardHeader>
761
759
<CardBody>
762
760
<TagGroup
761
+
aria-label="Genres"
763
762
items={genres}
764
763
selectedKeys={selectedKeys}
765
764
onSelectionChange={(keys) =>
+14
-9
apps/docs/src/showcases/todo-table.tsx
+14
-9
apps/docs/src/showcases/todo-table.tsx
···
21
21
useFilter,
22
22
} from "react-aria-components";
23
23
24
-
import { Avatar } from "@/components/avatar";
24
+
import { Avatar, AvatarButton } from "@/components/avatar";
25
25
import { Badge } from "@/components/badge";
26
26
import { Button } from "@/components/button";
27
27
import { Card } from "@/components/card";
···
331
331
>
332
332
<Autocomplete filter={contains}>
333
333
<Flex direction="column" gap="xs" style={styles.filterSection}>
334
-
<SearchField placeholder={`Search ${title}...`} />
334
+
<SearchField
335
+
placeholder={`Search ${title}...`}
336
+
aria-label={`Search ${title}...`}
337
+
/>
335
338
</Flex>
336
339
<Separator />
337
340
<ListBox
341
+
aria-label="Status filter"
338
342
style={styles.filterSection}
339
343
variant="checkbox"
340
344
selectionMode="multiple"
···
393
397
return (
394
398
<Flex direction="column" gap="5xl" style={styles.main}>
395
399
<Flex align="start" justify="between">
396
-
<Flex direction="column" gap="xs">
400
+
<Flex direction="column" gap="2xl">
397
401
<Heading2>Welcome back!</Heading2>
398
402
<SmallBody variant="secondary">
399
403
Here's a list of your tasks for this month.
···
402
406
<Menu
403
407
placement="bottom end"
404
408
trigger={
405
-
<Pressable>
406
-
<Avatar
407
-
fallback="S"
408
-
src="https://images.unsplash.com/photo-1502823403499-6ccfcf4fb453?&w=256&h=256&q=70&crop=focalpoint&fp-x=0.5&fp-y=0.3&fp-z=1&fit=crop"
409
-
/>
410
-
</Pressable>
409
+
<AvatarButton
410
+
fallback="S"
411
+
src="https://images.unsplash.com/photo-1502823403499-6ccfcf4fb453?&w=256&h=256&q=70&crop=focalpoint&fp-x=0.5&fp-y=0.3&fp-z=1&fit=crop"
412
+
/>
411
413
}
412
414
header={
413
415
<Flex direction="column" gap="xs">
···
432
434
<Flex gap="md">
433
435
<div style={{ minWidth: "400px" }}>
434
436
<SearchField
437
+
aria-label="Filter tasks"
435
438
placeholder="Filter tasks..."
436
439
value={search}
437
440
onChange={setSearch}
···
550
553
<Card>
551
554
<ResizableTableContainer>
552
555
<Table
556
+
aria-label="Todos"
553
557
selectionMode="multiple"
554
558
selectedKeys={selectedRows.map((task) => task.id)}
555
559
onSelectionChange={(keys) => {
···
646
650
Rows per page
647
651
</Text>
648
652
<Select
653
+
aria-label="Rows per page"
649
654
value={rowsPerPage.toString()}
650
655
onChange={(v) =>
651
656
v &&
+5
-6
apps/docs/vite.config.ts
+5
-6
apps/docs/vite.config.ts
···
18
18
import MagicString from "magic-string";
19
19
import path from "node:path";
20
20
import docgen from "react-docgen-typescript";
21
-
import rehypeAutolinkHeadings from "rehype-autolink-headings";
22
21
import rehypeSlug from "rehype-slug";
23
22
import remarkFrontmatter from "remark-frontmatter";
24
23
import { codeToHtml } from "shiki";
···
131
130
name: "docs-shiki",
132
131
async transform(code, id) {
133
132
if (id.endsWith("?shiki")) {
134
-
return dedent`
135
-
export default \`${await highlightCode(code, "tsx")}\`;
136
-
`;
133
+
return `export default ${JSON.stringify(
134
+
await highlightCode(code, "tsx"),
135
+
)};`;
137
136
}
138
137
},
139
138
} as PluginOption;
···
315
314
prerender: {
316
315
enabled: true,
317
316
crawlLinks: true,
318
-
filter: ({ path: p }) => !p.includes("/doc-examples/"),
317
+
filter: ({ path: p }) =>
318
+
!p.includes("/doc-examples/") && p !== "/" && p !== "/docs",
319
319
},
320
320
pages: [
321
321
{
···
328
328
remarkPlugins: [remarkFrontmatter],
329
329
rehypePlugins: [
330
330
rehypeSlug,
331
-
rehypeAutolinkHeadings,
332
331
withToc,
333
332
[withTocExport, { name: "toc" }],
334
333
[
+1
-1
packages/hip-ui/src/components/color-area/index.tsx
+1
-1
packages/hip-ui/src/components/color-area/index.tsx
+4
-1
packages/hip-ui/src/components/lightbox/index.tsx
+4
-1
packages/hip-ui/src/components/lightbox/index.tsx
···
152
152
initialIndex?: number;
153
153
/** Alt text for the current image */
154
154
alt?: string;
155
+
/** Trigger element to open the lightbox */
156
+
trigger?: React.ReactNode;
155
157
}
156
158
157
159
export function Lightbox({
···
161
163
initialIndex = 0,
162
164
alt = "Image",
163
165
style,
166
+
trigger,
164
167
}: LightboxProps) {
165
168
const [currentIndex, setCurrentIndex] = useState(initialIndex);
166
169
const [previousIndex, setPreviousIndex] = useState<number | null>(null);
···
308
311
309
312
return (
310
313
<DialogTrigger isOpen={isOpen} onOpenChange={onOpenChange}>
311
-
<span {...stylex.props(styles.hiddenTrigger)} />
314
+
{trigger || <span {...stylex.props(styles.hiddenTrigger)} />}
312
315
<ModalOverlay
313
316
isDismissable
314
317
{...stylex.props(styles.overlay, ui.overlay, style)}
+5
-73
pnpm-lock.yaml
+5
-73
pnpm-lock.yaml
···
177
177
specifier: ^1.1.2
178
178
version: 1.1.2(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
179
179
browserslist:
180
-
specifier: ^4.28.0
181
-
version: 4.28.0
180
+
specifier: ^4.28.1
181
+
version: 4.28.1
182
182
change-case:
183
183
specifier: 'catalog:'
184
184
version: 5.4.4
···
224
224
react-stately:
225
225
specifier: ^3.45.0
226
226
version: 3.45.0(react@19.2.0)
227
-
rehype-autolink-headings:
228
-
specifier: ^7.1.0
229
-
version: 7.1.0
230
227
rehype-sanitize:
231
228
specifier: ^6.0.0
232
229
version: 6.0.0
···
4275
4272
engines: {node: '>=6.0.0'}
4276
4273
hasBin: true
4277
4274
4278
-
baseline-browser-mapping@2.8.30:
4279
-
resolution: {integrity: sha512-aTUKW4ptQhS64+v2d6IkPzymEzzhw+G0bA1g3uBRV3+ntkH+svttKseW5IOR4Ed6NUVKqnY7qT3dKvzQ7io4AA==}
4280
-
hasBin: true
4281
-
4282
4275
bidi-js@1.0.3:
4283
4276
resolution: {integrity: sha512-RKshQI1R3YQ+n9YJz2QQ147P66ELpa1FQEg20Dk8oW9t2KgLbpDLLp9aGZ7y8WHSshDknG0bknqGw5/tyCs5tw==}
4284
4277
···
4305
4298
resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==}
4306
4299
engines: {node: '>=8'}
4307
4300
4308
-
browserslist@4.28.0:
4309
-
resolution: {integrity: sha512-tbydkR/CxfMwelN0vwdP/pLkDwyAASZ+VfWm4EOwlB6SWhx1sYnWLqo8N5j0rAzPfzfRaxt0mM/4wPU/Su84RQ==}
4310
-
engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
4311
-
hasBin: true
4312
-
4313
4301
browserslist@4.28.1:
4314
4302
resolution: {integrity: sha512-ZC5Bd0LgJXgwGqUknZY/vkUQ04r8NXnJZ3yYi4vDmSiZmC/pdSN0NbNRPxZpbtO4uAfDUAFffO8IZoM3Gj8IkA==}
4315
4303
engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
···
4345
4333
camelcase@8.0.0:
4346
4334
resolution: {integrity: sha512-8WB3Jcas3swSvjIeA2yvCJ+Miyz5l1ZmB6HFb9R1317dt9LCQoswg/BGrmAmkWVEszSrrg4RwmO46qIm2OEnSA==}
4347
4335
engines: {node: '>=16'}
4348
-
4349
-
caniuse-lite@1.0.30001756:
4350
-
resolution: {integrity: sha512-4HnCNKbMLkLdhJz3TToeVWHSnfJvPaq6vu/eRP0Ahub/07n484XHhBF5AJoSGHdVrS8tKFauUQz8Bp9P7LVx7A==}
4351
4336
4352
4337
caniuse-lite@1.0.30001781:
4353
4338
resolution: {integrity: sha512-RdwNCyMsNBftLjW6w01z8bKEvT6e/5tpPVEgtn22TiLGlstHOVecsX2KHFkD5e/vRnIE4EGzpuIODb3mtswtkw==}
···
4655
4640
4656
4641
eastasianwidth@0.2.0:
4657
4642
resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
4658
-
4659
-
electron-to-chromium@1.5.259:
4660
-
resolution: {integrity: sha512-I+oLXgpEJzD6Cwuwt1gYjxsDmu/S/Kd41mmLA3O+/uH2pFRO/DvOjUyGozL8j3KeLV6WyZ7ssPwELMsXCcsJAQ==}
4661
4643
4662
4644
electron-to-chromium@1.5.328:
4663
4645
resolution: {integrity: sha512-QNQ5l45DzYytThO21403XN3FvK0hOkWDG8viNf6jqS42msJ8I4tGDSpBCgvDRRPnkffafiwAym2X2eHeGD2V0w==}
···
5160
5142
hast-util-heading-rank@3.0.0:
5161
5143
resolution: {integrity: sha512-EJKb8oMUXVHcWZTDepnr+WNbfnXKFNf9duMesmr4S8SXTJBJ9M4Yok08pu9vxdJwdlGRhVumk9mEhkEvKGifwA==}
5162
5144
5163
-
hast-util-is-element@3.0.0:
5164
-
resolution: {integrity: sha512-Val9mnv2IWpLbNPqc/pUem+a7Ipj2aHacCwgNfTiK0vJKl0LF+4Ba4+v1oPHFpf3bLYmreq0/l3Gud9S5OH42g==}
5165
-
5166
5145
hast-util-sanitize@5.0.2:
5167
5146
resolution: {integrity: sha512-3yTWghByc50aGS7JlGhk61SPenfE/p1oaFeNwkOOyrscaOkMGrcW9+Cy/QAIOBpZxP1yqDIzFMR0+Np0i0+usg==}
5168
5147
···
6053
6032
neo-async@2.6.2:
6054
6033
resolution: {integrity: sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==}
6055
6034
6056
-
node-releases@2.0.27:
6057
-
resolution: {integrity: sha512-nmh3lCkYZ3grZvqcCH+fjmQ7X+H0OeZgP40OierEaAptX4XofMh5kwNbWh7lBduUzCcV/8kZ+NDLCwm2iorIlA==}
6058
-
6059
6035
node-releases@2.0.36:
6060
6036
resolution: {integrity: sha512-TdC8FSgHz8Mwtw9g5L4gR/Sh9XhSP/0DEkQxfEFXOpiul5IiHgHan2VhYYb6agDSfp4KuvltmGApc8HMgUrIkA==}
6061
6037
···
6509
6485
regjsparser@0.12.0:
6510
6486
resolution: {integrity: sha512-cnE+y8bz4NhMjISKbgeVJtqNbtf5QpjZP+Bslo+UqkIt9QPnX9q095eiRRASJG1/tz6dlNr6Z5NsBiWYokp6EQ==}
6511
6487
hasBin: true
6512
-
6513
-
rehype-autolink-headings@7.1.0:
6514
-
resolution: {integrity: sha512-rItO/pSdvnvsP4QRB1pmPiNHUskikqtPojZKJPPPAVx9Hj8i8TwMBhofrrAYRhYOOBZH9tgmG5lPqDLuIWPWmw==}
6515
6488
6516
6489
rehype-recma@1.0.0:
6517
6490
resolution: {integrity: sha512-lqA4rGUf1JmacCNWWZx0Wv1dHqMwxzsDWYMTowuplHF3xH0N/MmrZ/G3BDZnzAkRmxDadujCjaKM2hqYdCBOGw==}
···
7128
7101
unrs-resolver@1.11.1:
7129
7102
resolution: {integrity: sha512-bSjt9pjaEBnNiGgc9rUiHGKv5l4/TGzDmYw3RhnkJGtLhbnnA/5qJj7x3dNDCRx/PJxu774LlH8lCOlB4hEfKg==}
7130
7103
7131
-
update-browserslist-db@1.1.4:
7132
-
resolution: {integrity: sha512-q0SPT4xyU84saUX+tomz1WLkxUbuaJnR1xWt17M7fJtEJigJeWUNGUqrauFXsHnqev9y9JTRGwk13tFBuKby4A==}
7133
-
hasBin: true
7134
-
peerDependencies:
7135
-
browserslist: '>= 4.21.0'
7136
-
7137
7104
update-browserslist-db@1.2.3:
7138
7105
resolution: {integrity: sha512-Js0m9cx+qOgDxo0eMiFGEueWztz+d4+M3rGlmKPT+T4IS/jP4ylw3Nwpu6cpTTP8R1MAC1kF4VbdLt3ARf209w==}
7139
7106
hasBin: true
···
7656
7623
dependencies:
7657
7624
'@babel/compat-data': 7.28.5
7658
7625
'@babel/helper-validator-option': 7.27.1
7659
-
browserslist: 4.28.0
7626
+
browserslist: 4.28.1
7660
7627
lru-cache: 5.1.1
7661
7628
semver: 6.3.1
7662
7629
···
10677
10644
'@babel/plugin-syntax-jsx': 7.27.1(@babel/core@7.28.5)
10678
10645
'@babel/plugin-syntax-typescript': 7.27.1(@babel/core@7.28.5)
10679
10646
'@stylexjs/babel-plugin': 0.18.1
10680
-
browserslist: 4.28.0
10647
+
browserslist: 4.28.1
10681
10648
lightningcss: 1.30.2
10682
10649
unplugin: 2.3.11
10683
10650
transitivePeerDependencies:
···
11940
11907
11941
11908
baseline-browser-mapping@2.10.11: {}
11942
11909
11943
-
baseline-browser-mapping@2.8.30: {}
11944
-
11945
11910
bidi-js@1.0.3:
11946
11911
dependencies:
11947
11912
require-from-string: 2.0.2
···
11970
11935
dependencies:
11971
11936
fill-range: 7.1.1
11972
11937
11973
-
browserslist@4.28.0:
11974
-
dependencies:
11975
-
baseline-browser-mapping: 2.8.30
11976
-
caniuse-lite: 1.0.30001756
11977
-
electron-to-chromium: 1.5.259
11978
-
node-releases: 2.0.27
11979
-
update-browserslist-db: 1.1.4(browserslist@4.28.0)
11980
-
11981
11938
browserslist@4.28.1:
11982
11939
dependencies:
11983
11940
baseline-browser-mapping: 2.10.11
···
12012
11969
callsites@3.1.0: {}
12013
11970
12014
11971
camelcase@8.0.0: {}
12015
-
12016
-
caniuse-lite@1.0.30001756: {}
12017
11972
12018
11973
caniuse-lite@1.0.30001781: {}
12019
11974
···
12187
12142
12188
12143
core-js-compat@3.46.0:
12189
12144
dependencies:
12190
-
browserslist: 4.28.0
12145
+
browserslist: 4.28.1
12191
12146
12192
12147
core-js@3.46.0: {}
12193
12148
···
12328
12283
gopd: 1.2.0
12329
12284
12330
12285
eastasianwidth@0.2.0: {}
12331
-
12332
-
electron-to-chromium@1.5.259: {}
12333
12286
12334
12287
electron-to-chromium@1.5.328: {}
12335
12288
···
13012
12965
dependencies:
13013
12966
'@types/hast': 3.0.4
13014
12967
13015
-
hast-util-is-element@3.0.0:
13016
-
dependencies:
13017
-
'@types/hast': 3.0.4
13018
-
13019
12968
hast-util-sanitize@5.0.2:
13020
12969
dependencies:
13021
12970
'@types/hast': 3.0.4
···
14218
14167
14219
14168
neo-async@2.6.2: {}
14220
14169
14221
-
node-releases@2.0.27: {}
14222
-
14223
14170
node-releases@2.0.36: {}
14224
14171
14225
14172
normalize-path@3.0.0: {}
···
14918
14865
dependencies:
14919
14866
jsesc: 3.0.2
14920
14867
14921
-
rehype-autolink-headings@7.1.0:
14922
-
dependencies:
14923
-
'@types/hast': 3.0.4
14924
-
'@ungap/structured-clone': 1.3.0
14925
-
hast-util-heading-rank: 3.0.0
14926
-
hast-util-is-element: 3.0.0
14927
-
unified: 11.0.5
14928
-
unist-util-visit: 5.0.0
14929
-
14930
14868
rehype-recma@1.0.0:
14931
14869
dependencies:
14932
14870
'@types/estree': 1.0.8
···
15712
15650
'@unrs/resolver-binding-win32-arm64-msvc': 1.11.1
15713
15651
'@unrs/resolver-binding-win32-ia32-msvc': 1.11.1
15714
15652
'@unrs/resolver-binding-win32-x64-msvc': 1.11.1
15715
-
15716
-
update-browserslist-db@1.1.4(browserslist@4.28.0):
15717
-
dependencies:
15718
-
browserslist: 4.28.0
15719
-
escalade: 3.2.0
15720
-
picocolors: 1.1.1
15721
15653
15722
15654
update-browserslist-db@1.2.3(browserslist@4.28.1):
15723
15655
dependencies: