@dashforge/tw 0.3.0-beta → 0.5.0-beta
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +246 -0
- package/PARITY.md +483 -0
- package/PERFORMANCE.md +169 -0
- package/dist/index.esm.js +1055 -2
- package/dist/src/components/Accordion/Accordion.d.ts +21 -0
- package/dist/src/components/Accordion/Accordion.d.ts.map +1 -0
- package/dist/src/components/Accordion/accordion.types.d.ts +74 -0
- package/dist/src/components/Accordion/accordion.types.d.ts.map +1 -0
- package/dist/src/components/Accordion/accordion.variants.d.ts +58 -0
- package/dist/src/components/Accordion/accordion.variants.d.ts.map +1 -0
- package/dist/src/components/Dialog/Dialog.d.ts +17 -0
- package/dist/src/components/Dialog/Dialog.d.ts.map +1 -0
- package/dist/src/components/Dialog/dialog.types.d.ts +75 -0
- package/dist/src/components/Dialog/dialog.types.d.ts.map +1 -0
- package/dist/src/components/Dialog/dialog.variants.d.ts +80 -0
- package/dist/src/components/Dialog/dialog.variants.d.ts.map +1 -0
- package/dist/src/components/Pagination/Pagination.d.ts +32 -0
- package/dist/src/components/Pagination/Pagination.d.ts.map +1 -0
- package/dist/src/components/Pagination/pagination.helpers.d.ts +23 -0
- package/dist/src/components/Pagination/pagination.helpers.d.ts.map +1 -0
- package/dist/src/components/Pagination/pagination.types.d.ts +120 -0
- package/dist/src/components/Pagination/pagination.types.d.ts.map +1 -0
- package/dist/src/components/Pagination/pagination.variants.d.ts +150 -0
- package/dist/src/components/Pagination/pagination.variants.d.ts.map +1 -0
- package/dist/src/components/Popover/Popover.d.ts +15 -0
- package/dist/src/components/Popover/Popover.d.ts.map +1 -0
- package/dist/src/components/Popover/popover.types.d.ts +45 -0
- package/dist/src/components/Popover/popover.types.d.ts.map +1 -0
- package/dist/src/components/Popover/popover.variants.d.ts +34 -0
- package/dist/src/components/Popover/popover.variants.d.ts.map +1 -0
- package/dist/src/components/Skeleton/Skeleton.d.ts +23 -0
- package/dist/src/components/Skeleton/Skeleton.d.ts.map +1 -0
- package/dist/src/components/Skeleton/skeleton.types.d.ts +56 -0
- package/dist/src/components/Skeleton/skeleton.types.d.ts.map +1 -0
- package/dist/src/components/Skeleton/skeleton.variants.d.ts +110 -0
- package/dist/src/components/Skeleton/skeleton.variants.d.ts.map +1 -0
- package/dist/src/components/Tabs/Tabs.d.ts +15 -0
- package/dist/src/components/Tabs/Tabs.d.ts.map +1 -0
- package/dist/src/components/Tabs/tabs.types.d.ts +55 -0
- package/dist/src/components/Tabs/tabs.types.d.ts.map +1 -0
- package/dist/src/components/Tabs/tabs.variants.d.ts +82 -0
- package/dist/src/components/Tabs/tabs.variants.d.ts.map +1 -0
- package/dist/src/components/Tooltip/Tooltip.d.ts +29 -0
- package/dist/src/components/Tooltip/Tooltip.d.ts.map +1 -0
- package/dist/src/components/Tooltip/tooltip.types.d.ts +47 -0
- package/dist/src/components/Tooltip/tooltip.types.d.ts.map +1 -0
- package/dist/src/components/Tooltip/tooltip.variants.d.ts +34 -0
- package/dist/src/components/Tooltip/tooltip.variants.d.ts.map +1 -0
- package/dist/src/index.d.ts +22 -1
- package/dist/src/index.d.ts.map +1 -1
- package/package.json +8 -3
- package/src/components/Accordion/Accordion.test.tsx +95 -0
- package/src/components/Accordion/Accordion.tsx +97 -0
- package/src/components/Accordion/accordion.types.ts +66 -0
- package/src/components/Accordion/accordion.variants.ts +30 -0
- package/src/components/Dialog/Dialog.test.tsx +96 -0
- package/src/components/Dialog/Dialog.tsx +93 -0
- package/src/components/Dialog/dialog.types.ts +62 -0
- package/src/components/Dialog/dialog.variants.ts +62 -0
- package/src/components/Pagination/Pagination.test.tsx +314 -0
- package/src/components/Pagination/Pagination.tsx +275 -0
- package/src/components/Pagination/pagination.helpers.ts +102 -0
- package/src/components/Pagination/pagination.types.ts +117 -0
- package/src/components/Pagination/pagination.variants.ts +111 -0
- package/src/components/Popover/Popover.test.tsx +72 -0
- package/src/components/Popover/Popover.tsx +55 -0
- package/src/components/Popover/popover.types.ts +42 -0
- package/src/components/Popover/popover.variants.ts +18 -0
- package/src/components/Skeleton/Skeleton.test.tsx +127 -0
- package/src/components/Skeleton/Skeleton.tsx +49 -0
- package/src/components/Skeleton/skeleton.types.ts +59 -0
- package/src/components/Skeleton/skeleton.variants.ts +86 -0
- package/src/components/Tabs/Tabs.test.tsx +74 -0
- package/src/components/Tabs/Tabs.tsx +66 -0
- package/src/components/Tabs/tabs.types.ts +49 -0
- package/src/components/Tabs/tabs.variants.ts +58 -0
- package/src/components/Tooltip/Tooltip.test.tsx +73 -0
- package/src/components/Tooltip/Tooltip.tsx +70 -0
- package/src/components/Tooltip/tooltip.types.ts +44 -0
- package/src/components/Tooltip/tooltip.variants.ts +18 -0
- package/src/index.ts +57 -1
|
@@ -0,0 +1,150 @@
|
|
|
1
|
+
import { type VariantProps } from 'tailwind-variants';
|
|
2
|
+
/**
|
|
3
|
+
* `<Pagination>` variant recipe.
|
|
4
|
+
*
|
|
5
|
+
* Slots:
|
|
6
|
+
* - `root` — outer `<nav>` container
|
|
7
|
+
* - `summary` — "Showing X-Y of Z" text
|
|
8
|
+
* - `list` — `<ul>` of page buttons
|
|
9
|
+
* - `pageButton` — individual page number button
|
|
10
|
+
* - `activeButton` — modifier applied to the current page
|
|
11
|
+
* - `navButton` — first/prev/next/last buttons
|
|
12
|
+
* - `ellipsis` — `…` rendered when range gap
|
|
13
|
+
* - `pageSizeSelector` — native `<select>` for page size
|
|
14
|
+
* - `jumpInput` — direct page jump `<input>`
|
|
15
|
+
*
|
|
16
|
+
* Variant axes:
|
|
17
|
+
* - `variant` — `default` (full kit) | `compact` (number buttons +
|
|
18
|
+
* prev/next only) | `minimal` ("X / Y pages" + prev/next only).
|
|
19
|
+
* - `size` — `sm` | `md` (default) | `lg`. Drives padding + text
|
|
20
|
+
* size on the buttons.
|
|
21
|
+
*/
|
|
22
|
+
export declare const paginationVariants: import("tailwind-variants").TVReturnType<{
|
|
23
|
+
variant: {
|
|
24
|
+
default: {};
|
|
25
|
+
compact: {};
|
|
26
|
+
minimal: {};
|
|
27
|
+
};
|
|
28
|
+
size: {
|
|
29
|
+
sm: {
|
|
30
|
+
summary: string;
|
|
31
|
+
pageButton: string;
|
|
32
|
+
navButton: string;
|
|
33
|
+
ellipsis: string;
|
|
34
|
+
pageSizeSelector: string;
|
|
35
|
+
jumpInput: string;
|
|
36
|
+
};
|
|
37
|
+
md: {
|
|
38
|
+
summary: string;
|
|
39
|
+
pageButton: string;
|
|
40
|
+
navButton: string;
|
|
41
|
+
ellipsis: string;
|
|
42
|
+
pageSizeSelector: string;
|
|
43
|
+
jumpInput: string;
|
|
44
|
+
};
|
|
45
|
+
lg: {
|
|
46
|
+
summary: string;
|
|
47
|
+
pageButton: string;
|
|
48
|
+
navButton: string;
|
|
49
|
+
ellipsis: string;
|
|
50
|
+
pageSizeSelector: string;
|
|
51
|
+
jumpInput: string;
|
|
52
|
+
};
|
|
53
|
+
};
|
|
54
|
+
}, {
|
|
55
|
+
root: string;
|
|
56
|
+
summary: string;
|
|
57
|
+
list: string;
|
|
58
|
+
pageButton: string[];
|
|
59
|
+
activeButton: string[];
|
|
60
|
+
navButton: string[];
|
|
61
|
+
ellipsis: string;
|
|
62
|
+
pageSizeSelector: string[];
|
|
63
|
+
jumpInput: string[];
|
|
64
|
+
}, undefined, {
|
|
65
|
+
variant: {
|
|
66
|
+
default: {};
|
|
67
|
+
compact: {};
|
|
68
|
+
minimal: {};
|
|
69
|
+
};
|
|
70
|
+
size: {
|
|
71
|
+
sm: {
|
|
72
|
+
summary: string;
|
|
73
|
+
pageButton: string;
|
|
74
|
+
navButton: string;
|
|
75
|
+
ellipsis: string;
|
|
76
|
+
pageSizeSelector: string;
|
|
77
|
+
jumpInput: string;
|
|
78
|
+
};
|
|
79
|
+
md: {
|
|
80
|
+
summary: string;
|
|
81
|
+
pageButton: string;
|
|
82
|
+
navButton: string;
|
|
83
|
+
ellipsis: string;
|
|
84
|
+
pageSizeSelector: string;
|
|
85
|
+
jumpInput: string;
|
|
86
|
+
};
|
|
87
|
+
lg: {
|
|
88
|
+
summary: string;
|
|
89
|
+
pageButton: string;
|
|
90
|
+
navButton: string;
|
|
91
|
+
ellipsis: string;
|
|
92
|
+
pageSizeSelector: string;
|
|
93
|
+
jumpInput: string;
|
|
94
|
+
};
|
|
95
|
+
};
|
|
96
|
+
}, {
|
|
97
|
+
root: string;
|
|
98
|
+
summary: string;
|
|
99
|
+
list: string;
|
|
100
|
+
pageButton: string[];
|
|
101
|
+
activeButton: string[];
|
|
102
|
+
navButton: string[];
|
|
103
|
+
ellipsis: string;
|
|
104
|
+
pageSizeSelector: string[];
|
|
105
|
+
jumpInput: string[];
|
|
106
|
+
}, import("tailwind-variants").TVReturnType<{
|
|
107
|
+
variant: {
|
|
108
|
+
default: {};
|
|
109
|
+
compact: {};
|
|
110
|
+
minimal: {};
|
|
111
|
+
};
|
|
112
|
+
size: {
|
|
113
|
+
sm: {
|
|
114
|
+
summary: string;
|
|
115
|
+
pageButton: string;
|
|
116
|
+
navButton: string;
|
|
117
|
+
ellipsis: string;
|
|
118
|
+
pageSizeSelector: string;
|
|
119
|
+
jumpInput: string;
|
|
120
|
+
};
|
|
121
|
+
md: {
|
|
122
|
+
summary: string;
|
|
123
|
+
pageButton: string;
|
|
124
|
+
navButton: string;
|
|
125
|
+
ellipsis: string;
|
|
126
|
+
pageSizeSelector: string;
|
|
127
|
+
jumpInput: string;
|
|
128
|
+
};
|
|
129
|
+
lg: {
|
|
130
|
+
summary: string;
|
|
131
|
+
pageButton: string;
|
|
132
|
+
navButton: string;
|
|
133
|
+
ellipsis: string;
|
|
134
|
+
pageSizeSelector: string;
|
|
135
|
+
jumpInput: string;
|
|
136
|
+
};
|
|
137
|
+
};
|
|
138
|
+
}, {
|
|
139
|
+
root: string;
|
|
140
|
+
summary: string;
|
|
141
|
+
list: string;
|
|
142
|
+
pageButton: string[];
|
|
143
|
+
activeButton: string[];
|
|
144
|
+
navButton: string[];
|
|
145
|
+
ellipsis: string;
|
|
146
|
+
pageSizeSelector: string[];
|
|
147
|
+
jumpInput: string[];
|
|
148
|
+
}, undefined, unknown, unknown, undefined>>;
|
|
149
|
+
export type PaginationVariants = VariantProps<typeof paginationVariants>;
|
|
150
|
+
//# sourceMappingURL=pagination.variants.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"pagination.variants.d.ts","sourceRoot":"","sources":["../../../../src/components/Pagination/pagination.variants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAE1D;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CAsF7B,CAAC;AAEH,MAAM,MAAM,kBAAkB,GAAG,YAAY,CAAC,OAAO,kBAAkB,CAAC,CAAC"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import type { PopoverProps } from './popover.types.js';
|
|
2
|
+
/**
|
|
3
|
+
* Dashforge TW `<Popover>` — clickable floating content panel.
|
|
4
|
+
*
|
|
5
|
+
* Built on `@radix-ui/react-popover`:
|
|
6
|
+
* - Focus trap inside the popover (Tab cycles within).
|
|
7
|
+
* - Outside-click + Escape dismiss.
|
|
8
|
+
* - APG dialog-like semantics (`role="dialog"` on content).
|
|
9
|
+
* - Portal-rendered.
|
|
10
|
+
*
|
|
11
|
+
* Use `<Popover>` for menus / pickers / settings panels with
|
|
12
|
+
* interactive children. Use `<Tooltip>` for read-only hints.
|
|
13
|
+
*/
|
|
14
|
+
export declare function Popover(props: PopoverProps): import("react/jsx-runtime").JSX.Element;
|
|
15
|
+
//# sourceMappingURL=Popover.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../../../../src/components/Popover/Popover.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAEvD;;;;;;;;;;;GAWG;AACH,wBAAgB,OAAO,CAAC,KAAK,EAAE,YAAY,2CAqC1C"}
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import type { ReactNode } from 'react';
|
|
2
|
+
export interface PopoverSlotProps {
|
|
3
|
+
content?: {
|
|
4
|
+
className?: string;
|
|
5
|
+
};
|
|
6
|
+
arrow?: {
|
|
7
|
+
className?: string;
|
|
8
|
+
};
|
|
9
|
+
}
|
|
10
|
+
/**
|
|
11
|
+
* Props for `<Popover>`.
|
|
12
|
+
*
|
|
13
|
+
* Built on `@radix-ui/react-popover`. Use for richer floating UI
|
|
14
|
+
* than a tooltip — e.g. action menus, color pickers, settings
|
|
15
|
+
* panels.
|
|
16
|
+
*
|
|
17
|
+
* Differences vs `<Tooltip>`:
|
|
18
|
+
* - Popover is **clickable** and captures focus inside (focus trap).
|
|
19
|
+
* - Popover supports arbitrary interactive content (forms, buttons).
|
|
20
|
+
* - Popover dismisses on outside-click / Escape (Radix-managed).
|
|
21
|
+
* - No `role="tooltip"` — popovers are conceptually mini-dialogs.
|
|
22
|
+
*/
|
|
23
|
+
export interface PopoverProps {
|
|
24
|
+
/** The trigger element (wrapped in Radix's `asChild` slot). */
|
|
25
|
+
children: ReactNode;
|
|
26
|
+
/** Popover body content. */
|
|
27
|
+
content: ReactNode;
|
|
28
|
+
/** Side of the trigger to render on. @default 'bottom' */
|
|
29
|
+
side?: 'top' | 'right' | 'bottom' | 'left';
|
|
30
|
+
/** Alignment along the perpendicular axis. @default 'center' */
|
|
31
|
+
align?: 'start' | 'center' | 'end';
|
|
32
|
+
/** Show an arrow indicator. @default false */
|
|
33
|
+
showArrow?: boolean;
|
|
34
|
+
/** Controlled open state. */
|
|
35
|
+
open?: boolean;
|
|
36
|
+
/** Called when open state changes. */
|
|
37
|
+
onOpenChange?: (open: boolean) => void;
|
|
38
|
+
/** Side offset in pixels. @default 8 */
|
|
39
|
+
sideOffset?: number;
|
|
40
|
+
/** Width of the popover content. CSS value. */
|
|
41
|
+
width?: string;
|
|
42
|
+
/** Per-slot overrides. */
|
|
43
|
+
slotProps?: PopoverSlotProps;
|
|
44
|
+
}
|
|
45
|
+
//# sourceMappingURL=popover.types.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"popover.types.d.ts","sourceRoot":"","sources":["../../../../src/components/Popover/popover.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,gBAAgB;IAC/B,OAAO,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACjC,KAAK,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CAChC;AAED;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,YAAY;IAC3B,+DAA+D;IAC/D,QAAQ,EAAE,SAAS,CAAC;IACpB,4BAA4B;IAC5B,OAAO,EAAE,SAAS,CAAC;IACnB,0DAA0D;IAC1D,IAAI,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC3C,gEAAgE;IAChE,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IACnC,8CAA8C;IAC9C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,6BAA6B;IAC7B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,sCAAsC;IACtC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,wCAAwC;IACxC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,+CAA+C;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0BAA0B;IAC1B,SAAS,CAAC,EAAE,gBAAgB,CAAC;CAC9B"}
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import { type VariantProps } from 'tailwind-variants';
|
|
2
|
+
export declare const popoverVariants: import("tailwind-variants").TVReturnType<{
|
|
3
|
+
[key: string]: {
|
|
4
|
+
[key: string]: import("tailwind-merge").ClassNameValue | {
|
|
5
|
+
content?: import("tailwind-merge").ClassNameValue;
|
|
6
|
+
arrow?: import("tailwind-merge").ClassNameValue;
|
|
7
|
+
};
|
|
8
|
+
};
|
|
9
|
+
} | {
|
|
10
|
+
[x: string]: {
|
|
11
|
+
[x: string]: import("tailwind-merge").ClassNameValue | {
|
|
12
|
+
content?: import("tailwind-merge").ClassNameValue;
|
|
13
|
+
arrow?: import("tailwind-merge").ClassNameValue;
|
|
14
|
+
};
|
|
15
|
+
};
|
|
16
|
+
} | {}, {
|
|
17
|
+
content: string[];
|
|
18
|
+
arrow: string;
|
|
19
|
+
}, undefined, {
|
|
20
|
+
[key: string]: {
|
|
21
|
+
[key: string]: import("tailwind-merge").ClassNameValue | {
|
|
22
|
+
content?: import("tailwind-merge").ClassNameValue;
|
|
23
|
+
arrow?: import("tailwind-merge").ClassNameValue;
|
|
24
|
+
};
|
|
25
|
+
};
|
|
26
|
+
} | {}, {
|
|
27
|
+
content: string[];
|
|
28
|
+
arrow: string;
|
|
29
|
+
}, import("tailwind-variants").TVReturnType<unknown, {
|
|
30
|
+
content: string[];
|
|
31
|
+
arrow: string;
|
|
32
|
+
}, undefined, unknown, unknown, undefined>>;
|
|
33
|
+
export type PopoverVariants = VariantProps<typeof popoverVariants>;
|
|
34
|
+
//# sourceMappingURL=popover.variants.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"popover.variants.d.ts","sourceRoot":"","sources":["../../../../src/components/Popover/popover.variants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAE1D,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CAa1B,CAAC;AAEH,MAAM,MAAM,eAAe,GAAG,YAAY,CAAC,OAAO,eAAe,CAAC,CAAC"}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import type { SkeletonProps } from './skeleton.types.js';
|
|
2
|
+
/**
|
|
3
|
+
* Dashforge TW `<Skeleton>` — loading placeholder primitive.
|
|
4
|
+
*
|
|
5
|
+
* Renders as a non-interactive `<span aria-hidden="true">` so screen
|
|
6
|
+
* readers skip it. The surrounding component is responsible for
|
|
7
|
+
* announcing loading state via `aria-busy` or `aria-live` if needed.
|
|
8
|
+
*
|
|
9
|
+
* Variants:
|
|
10
|
+
* - `variant` — `text` (default, line shape) / `rectangle` / `circle`
|
|
11
|
+
* - `animation` — `pulse` (default) / `wave` / `none`
|
|
12
|
+
*
|
|
13
|
+
* Both animations are gated by `prefers-reduced-motion` (WCAG 2.3.3).
|
|
14
|
+
*
|
|
15
|
+
* @example
|
|
16
|
+
* ```tsx
|
|
17
|
+
* <Skeleton variant="text" width="200px" />
|
|
18
|
+
* <Skeleton variant="rectangle" width="100%" height="120px" />
|
|
19
|
+
* <Skeleton variant="circle" width="40px" />
|
|
20
|
+
* ```
|
|
21
|
+
*/
|
|
22
|
+
export declare function Skeleton(props: SkeletonProps): import("react/jsx-runtime").JSX.Element;
|
|
23
|
+
//# sourceMappingURL=Skeleton.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../../../src/components/Skeleton/Skeleton.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAEzD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,2CAuB5C"}
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
import type { SkeletonVariants } from './skeleton.variants.js';
|
|
2
|
+
export interface SkeletonSlotProps {
|
|
3
|
+
/** Root element override. */
|
|
4
|
+
root?: {
|
|
5
|
+
className?: string;
|
|
6
|
+
};
|
|
7
|
+
}
|
|
8
|
+
/**
|
|
9
|
+
* Props for `<Skeleton>`.
|
|
10
|
+
*
|
|
11
|
+
* Visual loading placeholder shown while data / images / components
|
|
12
|
+
* are being prepared. Three shapes (`variant`), three animations
|
|
13
|
+
* (`animation`), and free-form `width` / `height` for arbitrary
|
|
14
|
+
* dimensions.
|
|
15
|
+
*
|
|
16
|
+
* Rendered as a non-interactive `<span aria-hidden="true">` so screen
|
|
17
|
+
* readers skip it entirely.
|
|
18
|
+
*
|
|
19
|
+
* Compose by nesting: e.g. avatar + two text lines for a card
|
|
20
|
+
* placeholder.
|
|
21
|
+
*
|
|
22
|
+
* @example
|
|
23
|
+
* ```tsx
|
|
24
|
+
* <Skeleton variant="text" width="200px" />
|
|
25
|
+
* <Skeleton variant="rectangle" width="100%" height="120px" />
|
|
26
|
+
* <Skeleton variant="circle" width="40px" />
|
|
27
|
+
*
|
|
28
|
+
* // Compose to mimic a card shape
|
|
29
|
+
* <div className="flex gap-3">
|
|
30
|
+
* <Skeleton variant="circle" width="48px" />
|
|
31
|
+
* <div className="flex flex-col gap-2 flex-1">
|
|
32
|
+
* <Skeleton variant="text" width="60%" />
|
|
33
|
+
* <Skeleton variant="text" width="40%" />
|
|
34
|
+
* </div>
|
|
35
|
+
* </div>
|
|
36
|
+
* ```
|
|
37
|
+
*/
|
|
38
|
+
export interface SkeletonProps extends Pick<SkeletonVariants, 'variant' | 'animation'> {
|
|
39
|
+
/**
|
|
40
|
+
* CSS width (e.g. `"200px"`, `"100%"`, `"60%"`).
|
|
41
|
+
*
|
|
42
|
+
* Defaults: `text` → `100%`, `rectangle` → `100%`, `circle` → `40px`.
|
|
43
|
+
*/
|
|
44
|
+
width?: string;
|
|
45
|
+
/**
|
|
46
|
+
* CSS height (e.g. `"1em"`, `"120px"`).
|
|
47
|
+
*
|
|
48
|
+
* Defaults: `text` → `1em`, `rectangle` → `100px`, `circle` → matches `width`.
|
|
49
|
+
*/
|
|
50
|
+
height?: string;
|
|
51
|
+
/** Root-level Tailwind override (wins via `tailwind-merge`). */
|
|
52
|
+
sx?: string;
|
|
53
|
+
/** Per-slot overrides. */
|
|
54
|
+
slotProps?: SkeletonSlotProps;
|
|
55
|
+
}
|
|
56
|
+
//# sourceMappingURL=skeleton.types.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"skeleton.types.d.ts","sourceRoot":"","sources":["../../../../src/components/Skeleton/skeleton.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAE/D,MAAM,WAAW,iBAAiB;IAChC,6BAA6B;IAC7B,IAAI,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CAC/B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,gBAAgB,EAAE,SAAS,GAAG,WAAW,CAAC;IACvD;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,gEAAgE;IAChE,EAAE,CAAC,EAAE,MAAM,CAAC;IAEZ,0BAA0B;IAC1B,SAAS,CAAC,EAAE,iBAAiB,CAAC;CAC/B"}
|
|
@@ -0,0 +1,110 @@
|
|
|
1
|
+
import { type VariantProps } from 'tailwind-variants';
|
|
2
|
+
/**
|
|
3
|
+
* `<Skeleton>` variant recipe.
|
|
4
|
+
*
|
|
5
|
+
* Slots:
|
|
6
|
+
* - `root` — single element (atomic component)
|
|
7
|
+
*
|
|
8
|
+
* Variant axes:
|
|
9
|
+
* - `variant` (`text` | `rectangle` | `circle`) — shape / radius
|
|
10
|
+
* - `animation` (`pulse` | `wave` | `none`) — how the placeholder
|
|
11
|
+
* "breathes" while data loads. Always gated on
|
|
12
|
+
* `prefers-reduced-motion` (no exception — animations are
|
|
13
|
+
* purely cosmetic).
|
|
14
|
+
*
|
|
15
|
+
* Implementation notes:
|
|
16
|
+
*
|
|
17
|
+
* - `pulse` uses Tailwind's built-in `animate-pulse` (opacity
|
|
18
|
+
* 1.0 ↔ 0.5 over 2s, ease-in-out infinite).
|
|
19
|
+
* - `wave` overlays a moving gradient. Implemented with a
|
|
20
|
+
* `relative` container + an `::after` pseudo-element via a
|
|
21
|
+
* Tailwind arbitrary-value class. The gradient slides
|
|
22
|
+
* horizontally over the surface, mimicking the MUI Skeleton
|
|
23
|
+
* "wave" look.
|
|
24
|
+
* - Color uses neutral-200 (light) and neutral-800 (dark) for
|
|
25
|
+
* the base, picked up automatically by the dashforge preset's
|
|
26
|
+
* CSS-variable layer.
|
|
27
|
+
*
|
|
28
|
+
* Accessibility: the root has `aria-hidden="true"` (set on the JSX
|
|
29
|
+
* side, not here). Screen readers skip the skeleton entirely;
|
|
30
|
+
* the surrounding component is responsible for announcing
|
|
31
|
+
* loading state via `aria-busy` or `aria-live` if needed.
|
|
32
|
+
*/
|
|
33
|
+
export declare const skeletonVariants: import("tailwind-variants").TVReturnType<{
|
|
34
|
+
variant: {
|
|
35
|
+
text: {
|
|
36
|
+
root: string;
|
|
37
|
+
};
|
|
38
|
+
rectangle: {
|
|
39
|
+
root: string;
|
|
40
|
+
};
|
|
41
|
+
circle: {
|
|
42
|
+
root: string;
|
|
43
|
+
};
|
|
44
|
+
};
|
|
45
|
+
animation: {
|
|
46
|
+
pulse: {
|
|
47
|
+
root: string;
|
|
48
|
+
};
|
|
49
|
+
wave: {
|
|
50
|
+
root: string[];
|
|
51
|
+
};
|
|
52
|
+
none: {
|
|
53
|
+
root: string;
|
|
54
|
+
};
|
|
55
|
+
};
|
|
56
|
+
}, {
|
|
57
|
+
root: string[];
|
|
58
|
+
}, undefined, {
|
|
59
|
+
variant: {
|
|
60
|
+
text: {
|
|
61
|
+
root: string;
|
|
62
|
+
};
|
|
63
|
+
rectangle: {
|
|
64
|
+
root: string;
|
|
65
|
+
};
|
|
66
|
+
circle: {
|
|
67
|
+
root: string;
|
|
68
|
+
};
|
|
69
|
+
};
|
|
70
|
+
animation: {
|
|
71
|
+
pulse: {
|
|
72
|
+
root: string;
|
|
73
|
+
};
|
|
74
|
+
wave: {
|
|
75
|
+
root: string[];
|
|
76
|
+
};
|
|
77
|
+
none: {
|
|
78
|
+
root: string;
|
|
79
|
+
};
|
|
80
|
+
};
|
|
81
|
+
}, {
|
|
82
|
+
root: string[];
|
|
83
|
+
}, import("tailwind-variants").TVReturnType<{
|
|
84
|
+
variant: {
|
|
85
|
+
text: {
|
|
86
|
+
root: string;
|
|
87
|
+
};
|
|
88
|
+
rectangle: {
|
|
89
|
+
root: string;
|
|
90
|
+
};
|
|
91
|
+
circle: {
|
|
92
|
+
root: string;
|
|
93
|
+
};
|
|
94
|
+
};
|
|
95
|
+
animation: {
|
|
96
|
+
pulse: {
|
|
97
|
+
root: string;
|
|
98
|
+
};
|
|
99
|
+
wave: {
|
|
100
|
+
root: string[];
|
|
101
|
+
};
|
|
102
|
+
none: {
|
|
103
|
+
root: string;
|
|
104
|
+
};
|
|
105
|
+
};
|
|
106
|
+
}, {
|
|
107
|
+
root: string[];
|
|
108
|
+
}, undefined, unknown, unknown, undefined>>;
|
|
109
|
+
export type SkeletonVariants = VariantProps<typeof skeletonVariants>;
|
|
110
|
+
//# sourceMappingURL=skeleton.variants.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"skeleton.variants.d.ts","sourceRoot":"","sources":["../../../../src/components/Skeleton/skeleton.variants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAE1D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CAkD3B,CAAC;AAEH,MAAM,MAAM,gBAAgB,GAAG,YAAY,CAAC,OAAO,gBAAgB,CAAC,CAAC"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import type { TabsProps } from './tabs.types.js';
|
|
2
|
+
/**
|
|
3
|
+
* Dashforge TW `<Tabs>` — declarative tab navigation.
|
|
4
|
+
*
|
|
5
|
+
* Built on `@radix-ui/react-tabs`:
|
|
6
|
+
* - APG tabs pattern (arrow-key navigation, automatic activation,
|
|
7
|
+
* `role="tablist"` + `role="tab"` + `role="tabpanel"`).
|
|
8
|
+
* - Controlled / uncontrolled (`value` / `defaultValue`).
|
|
9
|
+
*
|
|
10
|
+
* Two variant axes:
|
|
11
|
+
* - `variant` — `underline` (default) | `pill`
|
|
12
|
+
* - `orientation` — `horizontal` (default) | `vertical`
|
|
13
|
+
*/
|
|
14
|
+
export declare function Tabs(props: TabsProps): import("react/jsx-runtime").JSX.Element;
|
|
15
|
+
//# sourceMappingURL=Tabs.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../../src/components/Tabs/Tabs.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAEjD;;;;;;;;;;;GAWG;AACH,wBAAgB,IAAI,CAAC,KAAK,EAAE,SAAS,2CAgDpC"}
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
import type { ReactNode } from 'react';
|
|
2
|
+
import type { TabsVariants } from './tabs.variants.js';
|
|
3
|
+
export interface TabsSlotProps {
|
|
4
|
+
root?: {
|
|
5
|
+
className?: string;
|
|
6
|
+
};
|
|
7
|
+
list?: {
|
|
8
|
+
className?: string;
|
|
9
|
+
};
|
|
10
|
+
trigger?: {
|
|
11
|
+
className?: string;
|
|
12
|
+
};
|
|
13
|
+
content?: {
|
|
14
|
+
className?: string;
|
|
15
|
+
};
|
|
16
|
+
}
|
|
17
|
+
/**
|
|
18
|
+
* Single tab item — paired `{ value, label, content }`. The `value`
|
|
19
|
+
* is the canonical id (selected via the `value` / `defaultValue`
|
|
20
|
+
* props on the root); the `label` is the trigger button text, and
|
|
21
|
+
* `content` is what renders in the panel when this tab is active.
|
|
22
|
+
*/
|
|
23
|
+
export interface TabItem {
|
|
24
|
+
value: string;
|
|
25
|
+
label: ReactNode;
|
|
26
|
+
/** Tab panel content. */
|
|
27
|
+
content: ReactNode;
|
|
28
|
+
/** Per-tab disabled flag. */
|
|
29
|
+
disabled?: boolean;
|
|
30
|
+
}
|
|
31
|
+
/**
|
|
32
|
+
* Props for `<Tabs>`.
|
|
33
|
+
*
|
|
34
|
+
* Built on `@radix-ui/react-tabs`. Two variant axes:
|
|
35
|
+
* - `variant` — `underline` (default) | `pill`
|
|
36
|
+
* - `orientation` — `horizontal` (default) | `vertical`
|
|
37
|
+
*
|
|
38
|
+
* Supports controlled (`value` + `onValueChange`) and uncontrolled
|
|
39
|
+
* (`defaultValue`) modes — the `value` prop wins when both are set.
|
|
40
|
+
*/
|
|
41
|
+
export interface TabsProps extends TabsVariants {
|
|
42
|
+
/** Tab items array (declarative — alternative to passing children). */
|
|
43
|
+
items: TabItem[];
|
|
44
|
+
/** Controlled active value. */
|
|
45
|
+
value?: string;
|
|
46
|
+
/** Default active value (uncontrolled). Defaults to first item's value. */
|
|
47
|
+
defaultValue?: string;
|
|
48
|
+
/** Fires when the active tab changes. */
|
|
49
|
+
onValueChange?: (value: string) => void;
|
|
50
|
+
/** Root className shortcut. */
|
|
51
|
+
sx?: string;
|
|
52
|
+
/** Per-slot overrides. */
|
|
53
|
+
slotProps?: TabsSlotProps;
|
|
54
|
+
}
|
|
55
|
+
//# sourceMappingURL=tabs.types.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"tabs.types.d.ts","sourceRoot":"","sources":["../../../../src/components/Tabs/tabs.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAEvD,MAAM,WAAW,aAAa;IAC5B,IAAI,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC9B,IAAI,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC9B,OAAO,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACjC,OAAO,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CAClC;AAED;;;;;GAKG;AACH,MAAM,WAAW,OAAO;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,SAAS,CAAC;IACjB,yBAAyB;IACzB,OAAO,EAAE,SAAS,CAAC;IACnB,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;;;;;;GASG;AACH,MAAM,WAAW,SAAU,SAAQ,YAAY;IAC7C,uEAAuE;IACvE,KAAK,EAAE,OAAO,EAAE,CAAC;IACjB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2EAA2E;IAC3E,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,yCAAyC;IACzC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,+BAA+B;IAC/B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,0BAA0B;IAC1B,SAAS,CAAC,EAAE,aAAa,CAAC;CAC3B"}
|
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
import { type VariantProps } from 'tailwind-variants';
|
|
2
|
+
export declare const tabsVariants: import("tailwind-variants").TVReturnType<{
|
|
3
|
+
variant: {
|
|
4
|
+
underline: {
|
|
5
|
+
list: string;
|
|
6
|
+
trigger: string[];
|
|
7
|
+
};
|
|
8
|
+
pill: {
|
|
9
|
+
list: string;
|
|
10
|
+
trigger: string[];
|
|
11
|
+
};
|
|
12
|
+
};
|
|
13
|
+
orientation: {
|
|
14
|
+
horizontal: {
|
|
15
|
+
root: string;
|
|
16
|
+
list: string;
|
|
17
|
+
};
|
|
18
|
+
vertical: {
|
|
19
|
+
root: string;
|
|
20
|
+
list: string;
|
|
21
|
+
};
|
|
22
|
+
};
|
|
23
|
+
}, {
|
|
24
|
+
root: string;
|
|
25
|
+
list: string;
|
|
26
|
+
trigger: string[];
|
|
27
|
+
content: string[];
|
|
28
|
+
}, undefined, {
|
|
29
|
+
variant: {
|
|
30
|
+
underline: {
|
|
31
|
+
list: string;
|
|
32
|
+
trigger: string[];
|
|
33
|
+
};
|
|
34
|
+
pill: {
|
|
35
|
+
list: string;
|
|
36
|
+
trigger: string[];
|
|
37
|
+
};
|
|
38
|
+
};
|
|
39
|
+
orientation: {
|
|
40
|
+
horizontal: {
|
|
41
|
+
root: string;
|
|
42
|
+
list: string;
|
|
43
|
+
};
|
|
44
|
+
vertical: {
|
|
45
|
+
root: string;
|
|
46
|
+
list: string;
|
|
47
|
+
};
|
|
48
|
+
};
|
|
49
|
+
}, {
|
|
50
|
+
root: string;
|
|
51
|
+
list: string;
|
|
52
|
+
trigger: string[];
|
|
53
|
+
content: string[];
|
|
54
|
+
}, import("tailwind-variants").TVReturnType<{
|
|
55
|
+
variant: {
|
|
56
|
+
underline: {
|
|
57
|
+
list: string;
|
|
58
|
+
trigger: string[];
|
|
59
|
+
};
|
|
60
|
+
pill: {
|
|
61
|
+
list: string;
|
|
62
|
+
trigger: string[];
|
|
63
|
+
};
|
|
64
|
+
};
|
|
65
|
+
orientation: {
|
|
66
|
+
horizontal: {
|
|
67
|
+
root: string;
|
|
68
|
+
list: string;
|
|
69
|
+
};
|
|
70
|
+
vertical: {
|
|
71
|
+
root: string;
|
|
72
|
+
list: string;
|
|
73
|
+
};
|
|
74
|
+
};
|
|
75
|
+
}, {
|
|
76
|
+
root: string;
|
|
77
|
+
list: string;
|
|
78
|
+
trigger: string[];
|
|
79
|
+
content: string[];
|
|
80
|
+
}, undefined, unknown, unknown, undefined>>;
|
|
81
|
+
export type TabsVariants = VariantProps<typeof tabsVariants>;
|
|
82
|
+
//# sourceMappingURL=tabs.variants.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"tabs.variants.d.ts","sourceRoot":"","sources":["../../../../src/components/Tabs/tabs.variants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAE1D,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CAqDvB,CAAC;AAEH,MAAM,MAAM,YAAY,GAAG,YAAY,CAAC,OAAO,YAAY,CAAC,CAAC"}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import type { TooltipProps } from './tooltip.types.js';
|
|
2
|
+
/**
|
|
3
|
+
* Dashforge TW `<Tooltip>` — hoverable / focusable tooltip.
|
|
4
|
+
*
|
|
5
|
+
* Built on `@radix-ui/react-tooltip`:
|
|
6
|
+
* - APG tooltip pattern: `role="tooltip"`, `aria-describedby` wired
|
|
7
|
+
* to the trigger automatically (Radix manages the id linkage).
|
|
8
|
+
* - Shows on hover OR keyboard focus.
|
|
9
|
+
* - Dismissed on Escape or pointer leave.
|
|
10
|
+
*
|
|
11
|
+
* Wrap any single React node — it becomes the trigger via Radix's
|
|
12
|
+
* `asChild` slot. The trigger inherits `aria-describedby` so screen
|
|
13
|
+
* readers announce the tooltip content along with the trigger.
|
|
14
|
+
*
|
|
15
|
+
* @example
|
|
16
|
+
* ```tsx
|
|
17
|
+
* <Tooltip content="Delete this item">
|
|
18
|
+
* <Button variant="ghost">
|
|
19
|
+
* <TrashIcon />
|
|
20
|
+
* </Button>
|
|
21
|
+
* </Tooltip>
|
|
22
|
+
* ```
|
|
23
|
+
*
|
|
24
|
+
* Each consumer can also wrap the entire app once in
|
|
25
|
+
* `<RadixTooltip.Provider>` to share delay/skip configuration; we
|
|
26
|
+
* include a per-component provider here for ease-of-use.
|
|
27
|
+
*/
|
|
28
|
+
export declare function Tooltip(props: TooltipProps): import("react/jsx-runtime").JSX.Element;
|
|
29
|
+
//# sourceMappingURL=Tooltip.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../../src/components/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAEvD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,OAAO,CAAC,KAAK,EAAE,YAAY,2CAsC1C"}
|