@component-labs/ui 0.0.1
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/dist/HMKTUWOU-DlOdK4rt.js +25 -0
- package/dist/HMKTUWOU-DlOdK4rt.js.map +1 -0
- package/dist/HOITXJDS-DBccNHOl.js +48 -0
- package/dist/HOITXJDS-DBccNHOl.js.map +1 -0
- package/dist/I7KWAPMF-CcAk8kiH.js +86 -0
- package/dist/I7KWAPMF-CcAk8kiH.js.map +1 -0
- package/dist/IQYAUKXT-CoP_Jrsi.js +546 -0
- package/dist/IQYAUKXT-CoP_Jrsi.js.map +1 -0
- package/dist/PZ3OL7I2-h7WHitqi.js +61 -0
- package/dist/PZ3OL7I2-h7WHitqi.js.map +1 -0
- package/dist/Provider.d.ts +8 -0
- package/dist/Provider.d.ts.map +1 -0
- package/dist/Q5W46E73-DjlVG3LH.js +353 -0
- package/dist/Q5W46E73-DjlVG3LH.js.map +1 -0
- package/dist/U6HHPQDW-BkT6kvCd.js +888 -0
- package/dist/U6HHPQDW-BkT6kvCd.js.map +1 -0
- package/dist/X6LNAU2F-DroCIVyL.js +1692 -0
- package/dist/X6LNAU2F-DroCIVyL.js.map +1 -0
- package/dist/Z32PU2LQ-CPSDShGU.js +1116 -0
- package/dist/Z32PU2LQ-CPSDShGU.js.map +1 -0
- package/dist/button.d.ts +4 -0
- package/dist/button.d.ts.map +1 -0
- package/dist/button.js +252 -0
- package/dist/button.js.map +1 -0
- package/dist/checkbox.d.ts +4 -0
- package/dist/checkbox.d.ts.map +1 -0
- package/dist/checkbox.js +210 -0
- package/dist/checkbox.js.map +1 -0
- package/dist/combobox.d.ts +4 -0
- package/dist/combobox.d.ts.map +1 -0
- package/dist/combobox.js +948 -0
- package/dist/combobox.js.map +1 -0
- package/dist/components/button/Button.d.ts +26 -0
- package/dist/components/button/Button.d.ts.map +1 -0
- package/dist/components/button/Button.docs.d.ts +4 -0
- package/dist/components/button/Button.docs.d.ts.map +1 -0
- package/dist/components/button/Button.showcase.d.ts +40 -0
- package/dist/components/button/Button.showcase.d.ts.map +1 -0
- package/dist/components/checkbox/Checkbox.d.ts +19 -0
- package/dist/components/checkbox/Checkbox.d.ts.map +1 -0
- package/dist/components/checkbox/Checkbox.docs.d.ts +4 -0
- package/dist/components/checkbox/Checkbox.docs.d.ts.map +1 -0
- package/dist/components/checkbox/Checkbox.showcase.d.ts +35 -0
- package/dist/components/checkbox/Checkbox.showcase.d.ts.map +1 -0
- package/dist/components/combobox/Combobox.d.ts +36 -0
- package/dist/components/combobox/Combobox.d.ts.map +1 -0
- package/dist/components/combobox/Combobox.docs.d.ts +4 -0
- package/dist/components/combobox/Combobox.docs.d.ts.map +1 -0
- package/dist/components/combobox/Combobox.showcase.d.ts +43 -0
- package/dist/components/combobox/Combobox.showcase.d.ts.map +1 -0
- package/dist/components/data-table/DataTable.d.ts +86 -0
- package/dist/components/data-table/DataTable.d.ts.map +1 -0
- package/dist/components/data-table/DataTable.docs.d.ts +4 -0
- package/dist/components/data-table/DataTable.docs.d.ts.map +1 -0
- package/dist/components/data-table/DataTable.showcase.d.ts +36 -0
- package/dist/components/data-table/DataTable.showcase.d.ts.map +1 -0
- package/dist/components/date-picker/date-picker.d.ts +1 -0
- package/dist/components/date-picker/date-picker.d.ts.map +1 -0
- package/dist/components/dialog/Dialog.d.ts +56 -0
- package/dist/components/dialog/Dialog.d.ts.map +1 -0
- package/dist/components/dialog/Dialog.docs.d.ts +4 -0
- package/dist/components/dialog/Dialog.docs.d.ts.map +1 -0
- package/dist/components/input/Input.d.ts +22 -0
- package/dist/components/input/Input.d.ts.map +1 -0
- package/dist/components/input/Input.docs.d.ts +4 -0
- package/dist/components/input/Input.docs.d.ts.map +1 -0
- package/dist/components/menu/Menu.d.ts +41 -0
- package/dist/components/menu/Menu.d.ts.map +1 -0
- package/dist/components/menu/Menu.docs.d.ts +4 -0
- package/dist/components/menu/Menu.docs.d.ts.map +1 -0
- package/dist/components/menu/Menu.showcase.d.ts +43 -0
- package/dist/components/menu/Menu.showcase.d.ts.map +1 -0
- package/dist/components/slider/date-picker.d.ts +1 -0
- package/dist/components/slider/date-picker.d.ts.map +1 -0
- package/dist/components/sub-menu/date-picker.d.ts +1 -0
- package/dist/components/sub-menu/date-picker.d.ts.map +1 -0
- package/dist/components/switch/Switch.d.ts +17 -0
- package/dist/components/switch/Switch.d.ts.map +1 -0
- package/dist/components/switch/Switch.docs.d.ts +4 -0
- package/dist/components/switch/Switch.docs.d.ts.map +1 -0
- package/dist/components/toast/date-picker.d.ts +1 -0
- package/dist/components/toast/date-picker.d.ts.map +1 -0
- package/dist/data-table.d.ts +4 -0
- package/dist/data-table.d.ts.map +1 -0
- package/dist/data-table.js +298 -0
- package/dist/data-table.js.map +1 -0
- package/dist/dialog.d.ts +4 -0
- package/dist/dialog.d.ts.map +1 -0
- package/dist/dialog.js +323 -0
- package/dist/dialog.js.map +1 -0
- package/dist/index.d.ts +27 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/input.d.ts +4 -0
- package/dist/input.d.ts.map +1 -0
- package/dist/input.js +230 -0
- package/dist/input.js.map +1 -0
- package/dist/lib/IntersectionObserver.d.ts +30 -0
- package/dist/lib/IntersectionObserver.d.ts.map +1 -0
- package/dist/lib/utils.d.ts +7 -0
- package/dist/lib/utils.d.ts.map +1 -0
- package/dist/menu.d.ts +4 -0
- package/dist/menu.d.ts.map +1 -0
- package/dist/menu.js +1335 -0
- package/dist/menu.js.map +1 -0
- package/dist/switch.d.ts +4 -0
- package/dist/switch.d.ts.map +1 -0
- package/dist/switch.js +194 -0
- package/dist/switch.js.map +1 -0
- package/dist/types/docs.d.ts +24 -0
- package/dist/types/docs.d.ts.map +1 -0
- package/dist/utils-BZvHF7th.js +2806 -0
- package/dist/utils-BZvHF7th.js.map +1 -0
- package/package.json +98 -0
- package/src/styles.css +91 -0
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DataTable.showcase.d.ts","sourceRoot":"","sources":["../../../src/components/data-table/DataTable.showcase.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;;;;;AASxC,wBAGE;AAMF,UAAU,IAAI;IACZ,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,QAAQ,GAAG,UAAU,CAAC;CAC/B;AAsSD,wBAAgB,UAAU,CAAC,KAAK,EAAE;IAChC,IAAI,EAAE,IAAI,EAAE,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;CACrB,2CAuDA;yBA3De,UAAU"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
//# sourceMappingURL=date-picker.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"date-picker.d.ts","sourceRoot":"","sources":["../../../src/components/date-picker/date-picker.tsx"],"names":[],"mappings":""}
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
import { DialogProps as AriaDialogProps } from '@ariakit/react';
|
|
2
|
+
import { ReactNode } from 'react';
|
|
3
|
+
|
|
4
|
+
export interface DialogRootProps {
|
|
5
|
+
children: ReactNode;
|
|
6
|
+
open?: boolean;
|
|
7
|
+
onOpenChange?: (open: boolean) => void;
|
|
8
|
+
defaultOpen?: boolean;
|
|
9
|
+
}
|
|
10
|
+
export declare function DialogRoot({ children, open, onOpenChange, defaultOpen, }: DialogRootProps): import("react/jsx-runtime").JSX.Element;
|
|
11
|
+
export interface DialogTriggerProps {
|
|
12
|
+
children: ReactNode;
|
|
13
|
+
className?: string;
|
|
14
|
+
}
|
|
15
|
+
export declare function DialogTrigger({ children, className }: DialogTriggerProps): import("react/jsx-runtime").JSX.Element;
|
|
16
|
+
export interface DialogContentProps extends Omit<AriaDialogProps, "store"> {
|
|
17
|
+
/** Whether to show the backdrop overlay */
|
|
18
|
+
backdrop?: boolean;
|
|
19
|
+
}
|
|
20
|
+
export declare const DialogContent: import('react').ForwardRefExoticComponent<Omit<DialogContentProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
|
|
21
|
+
export interface DialogHeaderProps {
|
|
22
|
+
children: ReactNode;
|
|
23
|
+
className?: string;
|
|
24
|
+
}
|
|
25
|
+
export declare function DialogHeader({ children, className }: DialogHeaderProps): import("react/jsx-runtime").JSX.Element;
|
|
26
|
+
export interface DialogTitleProps {
|
|
27
|
+
children: ReactNode;
|
|
28
|
+
className?: string;
|
|
29
|
+
}
|
|
30
|
+
export declare const DialogTitle: import('react').ForwardRefExoticComponent<DialogTitleProps & import('react').RefAttributes<HTMLHeadingElement>>;
|
|
31
|
+
export interface DialogDescriptionProps {
|
|
32
|
+
children: ReactNode;
|
|
33
|
+
className?: string;
|
|
34
|
+
}
|
|
35
|
+
export declare const DialogDescription: import('react').ForwardRefExoticComponent<DialogDescriptionProps & import('react').RefAttributes<HTMLParagraphElement>>;
|
|
36
|
+
export interface DialogFooterProps {
|
|
37
|
+
children: ReactNode;
|
|
38
|
+
className?: string;
|
|
39
|
+
}
|
|
40
|
+
export declare function DialogFooter({ children, className }: DialogFooterProps): import("react/jsx-runtime").JSX.Element;
|
|
41
|
+
export interface DialogCloseProps {
|
|
42
|
+
children: ReactNode;
|
|
43
|
+
className?: string;
|
|
44
|
+
}
|
|
45
|
+
export declare const DialogClose: import('react').ForwardRefExoticComponent<DialogCloseProps & import('react').RefAttributes<HTMLButtonElement>>;
|
|
46
|
+
export declare const Dialog: {
|
|
47
|
+
Root: typeof DialogRoot;
|
|
48
|
+
Trigger: typeof DialogTrigger;
|
|
49
|
+
Content: import('react').ForwardRefExoticComponent<Omit<DialogContentProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
|
|
50
|
+
Header: typeof DialogHeader;
|
|
51
|
+
Title: import('react').ForwardRefExoticComponent<DialogTitleProps & import('react').RefAttributes<HTMLHeadingElement>>;
|
|
52
|
+
Description: import('react').ForwardRefExoticComponent<DialogDescriptionProps & import('react').RefAttributes<HTMLParagraphElement>>;
|
|
53
|
+
Footer: typeof DialogFooter;
|
|
54
|
+
Close: import('react').ForwardRefExoticComponent<DialogCloseProps & import('react').RefAttributes<HTMLButtonElement>>;
|
|
55
|
+
};
|
|
56
|
+
//# sourceMappingURL=Dialog.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../src/components/dialog/Dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,EAML,KAAK,WAAW,IAAI,eAAe,EAEpC,MAAM,gBAAgB,CAAC;AAExB,OAAO,EAAc,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAmBnD,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,SAAS,CAAC;IACpB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,IAAI,EACJ,YAAY,EACZ,WAAW,GACZ,EAAE,eAAe,2CAQjB;AAgBD,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,kBAAkB,2CAYxE;AAGD,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,eAAe,EAAE,OAAO,CAAC;IACxE,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,aAAa,4HAuBzB,CAAC;AAKF,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,YAAY,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,iBAAiB,2CAMtE;AAGD,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,WAAW,iHAcvB,CAAC;AAKF,MAAM,WAAW,sBAAsB;IACrC,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,iBAAiB,yHAY5B,CAAC;AAKH,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,YAAY,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,iBAAiB,2CAMtE;AAGD,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,WAAW,gHAQvB,CAAC;AAKF,eAAO,MAAM,MAAM;;;;;;;;;CASlB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Dialog.docs.d.ts","sourceRoot":"","sources":["../../../src/components/dialog/Dialog.docs.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAErD,eAAO,MAAM,UAAU,EAAE,YA0HxB,CAAC"}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { VariantProps } from 'class-variance-authority';
|
|
2
|
+
import { InputHTMLAttributes, ReactNode } from 'react';
|
|
3
|
+
|
|
4
|
+
declare const inputVariants: (props?: ({
|
|
5
|
+
variant?: "default" | "outline" | "error" | null | undefined;
|
|
6
|
+
size?: "sm" | "md" | "lg" | null | undefined;
|
|
7
|
+
} & import('class-variance-authority/types').ClassProp) | undefined) => string;
|
|
8
|
+
export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size">, VariantProps<typeof inputVariants> {
|
|
9
|
+
/** Label text above the input */
|
|
10
|
+
label?: ReactNode;
|
|
11
|
+
/** Helper text below the input */
|
|
12
|
+
helperText?: ReactNode;
|
|
13
|
+
/** Error message (sets variant to error automatically) */
|
|
14
|
+
error?: string;
|
|
15
|
+
/** Icon to display before the input text */
|
|
16
|
+
startIcon?: ReactNode;
|
|
17
|
+
/** Icon to display after the input text */
|
|
18
|
+
endIcon?: ReactNode;
|
|
19
|
+
}
|
|
20
|
+
export declare const Input: import('react').ForwardRefExoticComponent<InputProps & import('react').RefAttributes<HTMLInputElement>>;
|
|
21
|
+
export {};
|
|
22
|
+
//# sourceMappingURL=Input.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../src/components/input/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAc,KAAK,mBAAmB,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAG7E,QAAA,MAAM,aAAa;;;8EA0ClB,CAAC;AAEF,MAAM,WAAW,UACf,SAAQ,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC,EACzD,YAAY,CAAC,OAAO,aAAa,CAAC;IACpC,iCAAiC;IACjC,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,kCAAkC;IAClC,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,0DAA0D;IAC1D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4CAA4C;IAC5C,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,2CAA2C;IAC3C,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AAED,eAAO,MAAM,KAAK,yGA8DjB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Input.docs.d.ts","sourceRoot":"","sources":["../../../src/components/input/Input.docs.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAErD,eAAO,MAAM,SAAS,EAAE,YAqIvB,CAAC"}
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import { MenuButtonProps, MenuItemCheckboxProps, MenuItemProps, MenuProps as AriaMenuProps, MenuProviderProps, MenuSeparatorProps } from '@ariakit/react';
|
|
2
|
+
import { VariantProps } from 'class-variance-authority';
|
|
3
|
+
import { ReactNode } from 'react';
|
|
4
|
+
|
|
5
|
+
declare const menuButtonVariants: (props?: ({
|
|
6
|
+
variant?: "default" | "ghost" | "primary" | null | undefined;
|
|
7
|
+
size?: "sm" | "md" | "lg" | null | undefined;
|
|
8
|
+
} & import('class-variance-authority/types').ClassProp) | undefined) => string;
|
|
9
|
+
export interface MenuRootProps extends MenuProviderProps {
|
|
10
|
+
children: ReactNode;
|
|
11
|
+
}
|
|
12
|
+
export declare function MenuRoot({ children, ...props }: MenuRootProps): import("react/jsx-runtime").JSX.Element;
|
|
13
|
+
export interface MenuTriggerProps extends MenuButtonProps, VariantProps<typeof menuButtonVariants> {
|
|
14
|
+
/** Show arrow icon */
|
|
15
|
+
showArrow?: boolean;
|
|
16
|
+
}
|
|
17
|
+
export declare const MenuTrigger: import('react').ForwardRefExoticComponent<Omit<MenuTriggerProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;
|
|
18
|
+
export interface MenuContentProps extends AriaMenuProps {
|
|
19
|
+
/** Gutter space between trigger and menu */
|
|
20
|
+
gutter?: number;
|
|
21
|
+
}
|
|
22
|
+
export declare const MenuContent: import('react').ForwardRefExoticComponent<Omit<MenuContentProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
|
|
23
|
+
export interface MenuItemComponentProps extends MenuItemProps {
|
|
24
|
+
}
|
|
25
|
+
export declare const MenuItemComponent: import('react').ForwardRefExoticComponent<Omit<MenuItemComponentProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
|
|
26
|
+
export interface MenuItemCheckboxComponentProps extends MenuItemCheckboxProps {
|
|
27
|
+
}
|
|
28
|
+
export declare const MenuItemCheckboxComponent: import('react').ForwardRefExoticComponent<Omit<MenuItemCheckboxComponentProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
|
|
29
|
+
export interface MenuSeparatorComponentProps extends MenuSeparatorProps {
|
|
30
|
+
}
|
|
31
|
+
export declare const MenuSeparatorComponent: import('react').ForwardRefExoticComponent<Omit<MenuSeparatorComponentProps, "ref"> & import('react').RefAttributes<HTMLHRElement>>;
|
|
32
|
+
export declare const Menu: {
|
|
33
|
+
Root: typeof MenuRoot;
|
|
34
|
+
Trigger: import('react').ForwardRefExoticComponent<Omit<MenuTriggerProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;
|
|
35
|
+
Content: import('react').ForwardRefExoticComponent<Omit<MenuContentProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
|
|
36
|
+
Item: import('react').ForwardRefExoticComponent<Omit<MenuItemComponentProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
|
|
37
|
+
ItemCheckbox: import('react').ForwardRefExoticComponent<Omit<MenuItemCheckboxComponentProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
|
|
38
|
+
Separator: import('react').ForwardRefExoticComponent<Omit<MenuSeparatorComponentProps, "ref"> & import('react').RefAttributes<HTMLHRElement>>;
|
|
39
|
+
};
|
|
40
|
+
export {};
|
|
41
|
+
//# sourceMappingURL=Menu.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../src/components/menu/Menu.tsx"],"names":[],"mappings":"AAAA,OAAO,EASL,KAAK,eAAe,EACpB,KAAK,qBAAqB,EAC1B,KAAK,aAAa,EAClB,KAAK,SAAS,IAAI,aAAa,EAC/B,KAAK,iBAAiB,EACtB,KAAK,kBAAkB,EACxB,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAc,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGnD,QAAA,MAAM,kBAAkB;;;8EAwCvB,CAAC;AA4BF,MAAM,WAAW,aAAc,SAAQ,iBAAiB;IACtD,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,QAAQ,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,2CAE7D;AAGD,MAAM,WAAW,gBACf,SAAQ,eAAe,EACrB,YAAY,CAAC,OAAO,kBAAkB,CAAC;IACzC,sBAAsB;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,WAAW,6HAevB,CAAC;AAKF,MAAM,WAAW,gBAAiB,SAAQ,aAAa;IACrD,4CAA4C;IAC5C,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,WAAW,0HAavB,CAAC;AAKF,MAAM,WAAW,sBAAuB,SAAQ,aAAa;CAAG;AAEhE,eAAO,MAAM,iBAAiB,gIAa5B,CAAC;AAKH,MAAM,WAAW,8BACf,SAAQ,qBAAqB;CAAG;AAElC,eAAO,MAAM,yBAAyB,wIA+BpC,CAAC;AAKH,MAAM,WAAW,2BAA4B,SAAQ,kBAAkB;CAAG;AAE1E,eAAO,MAAM,sBAAsB,oIAWjC,CAAC;AAKH,eAAO,MAAM,IAAI;;;;;;;CAOhB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Menu.docs.d.ts","sourceRoot":"","sources":["../../../src/components/menu/Menu.docs.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAErD,eAAO,MAAM,QAAQ,EAAE,YAgHtB,CAAC"}
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
declare const _default: {
|
|
2
|
+
title: string;
|
|
3
|
+
component: {
|
|
4
|
+
Root: typeof import('./Menu').MenuRoot;
|
|
5
|
+
Trigger: import('react').ForwardRefExoticComponent<Omit<import('./Menu').MenuTriggerProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;
|
|
6
|
+
Content: import('react').ForwardRefExoticComponent<Omit<import('./Menu').MenuContentProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
|
|
7
|
+
Item: import('react').ForwardRefExoticComponent<Omit<import('./Menu').MenuItemComponentProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
|
|
8
|
+
ItemCheckbox: import('react').ForwardRefExoticComponent<Omit<import('./Menu').MenuItemCheckboxComponentProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
|
|
9
|
+
Separator: import('react').ForwardRefExoticComponent<Omit<import('./Menu').MenuSeparatorComponentProps, "ref"> & import('react').RefAttributes<HTMLHRElement>>;
|
|
10
|
+
};
|
|
11
|
+
};
|
|
12
|
+
export default _default;
|
|
13
|
+
export declare function BasicMenu(): import("react/jsx-runtime").JSX.Element;
|
|
14
|
+
export declare function MenuWithCheckbox(): import("react/jsx-runtime").JSX.Element;
|
|
15
|
+
export declare function Playground(props: {
|
|
16
|
+
variant: "default" | "primary" | "ghost";
|
|
17
|
+
size: "sm" | "md" | "lg";
|
|
18
|
+
label: string;
|
|
19
|
+
showArrow: boolean;
|
|
20
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
21
|
+
export declare namespace Playground {
|
|
22
|
+
var props: {
|
|
23
|
+
variant: {
|
|
24
|
+
type: string;
|
|
25
|
+
options: string[];
|
|
26
|
+
default: string;
|
|
27
|
+
};
|
|
28
|
+
size: {
|
|
29
|
+
type: string;
|
|
30
|
+
options: string[];
|
|
31
|
+
default: string;
|
|
32
|
+
};
|
|
33
|
+
label: {
|
|
34
|
+
type: string;
|
|
35
|
+
default: string;
|
|
36
|
+
};
|
|
37
|
+
showArrow: {
|
|
38
|
+
type: string;
|
|
39
|
+
default: boolean;
|
|
40
|
+
};
|
|
41
|
+
};
|
|
42
|
+
}
|
|
43
|
+
//# sourceMappingURL=Menu.showcase.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Menu.showcase.d.ts","sourceRoot":"","sources":["../../../src/components/menu/Menu.showcase.tsx"],"names":[],"mappings":";;;;;;;;;;;AAIA,wBAGE;AAGF,wBAAgB,SAAS,4CAexB;AAGD,wBAAgB,gBAAgB,4CA2B/B;AAGD,wBAAgB,UAAU,CAAC,KAAK,EAAE;IAChC,OAAO,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IACzC,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,OAAO,CAAC;CACpB,2CAyBA;yBA9Be,UAAU"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
//# sourceMappingURL=date-picker.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"date-picker.d.ts","sourceRoot":"","sources":["../../../src/components/slider/date-picker.tsx"],"names":[],"mappings":""}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
//# sourceMappingURL=date-picker.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"date-picker.d.ts","sourceRoot":"","sources":["../../../src/components/sub-menu/date-picker.tsx"],"names":[],"mappings":""}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { CheckboxProps as AriaCheckboxProps } from '@ariakit/react';
|
|
2
|
+
import { VariantProps } from 'class-variance-authority';
|
|
3
|
+
import { ReactNode } from 'react';
|
|
4
|
+
|
|
5
|
+
declare const switchVariants: (props?: ({
|
|
6
|
+
variant?: "default" | "success" | null | undefined;
|
|
7
|
+
size?: "sm" | "md" | "lg" | null | undefined;
|
|
8
|
+
} & import('class-variance-authority/types').ClassProp) | undefined) => string;
|
|
9
|
+
export interface SwitchProps extends Omit<AriaCheckboxProps, "size">, VariantProps<typeof switchVariants> {
|
|
10
|
+
/** Label text to display next to the switch */
|
|
11
|
+
label?: ReactNode;
|
|
12
|
+
/** Description text to display below the label */
|
|
13
|
+
description?: ReactNode;
|
|
14
|
+
}
|
|
15
|
+
export declare const Switch: import('react').ForwardRefExoticComponent<Omit<SwitchProps, "ref"> & import('react').RefAttributes<HTMLInputElement>>;
|
|
16
|
+
export {};
|
|
17
|
+
//# sourceMappingURL=Switch.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../src/components/switch/Switch.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,aAAa,IAAI,iBAAiB,EACxC,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAc,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGnD,QAAA,MAAM,cAAc;;;8EA8BnB,CAAC;AAqBF,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,iBAAiB,EAAE,MAAM,CAAC,EACrC,YAAY,CAAC,OAAO,cAAc,CAAC;IACrC,+CAA+C;IAC/C,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,kDAAkD;IAClD,WAAW,CAAC,EAAE,SAAS,CAAC;CACzB;AAED,eAAO,MAAM,MAAM,uHA0ClB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Switch.docs.d.ts","sourceRoot":"","sources":["../../../src/components/switch/Switch.docs.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAErD,eAAO,MAAM,UAAU,EAAE,YA6GxB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
//# sourceMappingURL=date-picker.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"date-picker.d.ts","sourceRoot":"","sources":["../../../src/components/toast/date-picker.tsx"],"names":[],"mappings":""}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"data-table.d.ts","sourceRoot":"","sources":["../src/data-table.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,mCAAmC,CAAC;AAC9D,YAAY,EAAE,UAAU,IAAI,cAAc,EAAE,MAAM,mCAAmC,CAAC;AACtF,OAAO,EAAE,aAAa,EAAE,MAAM,wCAAwC,CAAC"}
|
|
@@ -0,0 +1,298 @@
|
|
|
1
|
+
import { jsx as e, jsxs as p } from "react/jsx-runtime";
|
|
2
|
+
import E, { useRef as R, useEffect as A, isValidElement as D, cloneElement as I } from "react";
|
|
3
|
+
import { e as S, f as $ } from "./IQYAUKXT-CoP_Jrsi.js";
|
|
4
|
+
function C({
|
|
5
|
+
onIntersect: o,
|
|
6
|
+
enabled: t = !0,
|
|
7
|
+
rootMargin: i = "100px",
|
|
8
|
+
threshold: m = 0.1,
|
|
9
|
+
children: b,
|
|
10
|
+
className: n = ""
|
|
11
|
+
}) {
|
|
12
|
+
const s = R(null);
|
|
13
|
+
return A(() => {
|
|
14
|
+
const d = s.current;
|
|
15
|
+
if (!d || !t) return;
|
|
16
|
+
const r = new window.IntersectionObserver(
|
|
17
|
+
(c) => {
|
|
18
|
+
const [a] = c;
|
|
19
|
+
a != null && a.isIntersecting && o();
|
|
20
|
+
},
|
|
21
|
+
{
|
|
22
|
+
rootMargin: i,
|
|
23
|
+
threshold: m
|
|
24
|
+
}
|
|
25
|
+
);
|
|
26
|
+
return r.observe(d), () => {
|
|
27
|
+
r.disconnect();
|
|
28
|
+
};
|
|
29
|
+
}, [o, t, i, m]), /* @__PURE__ */ e("div", { ref: s, className: n, children: b });
|
|
30
|
+
}
|
|
31
|
+
function O({
|
|
32
|
+
data: o,
|
|
33
|
+
label: t = "Data Table",
|
|
34
|
+
description: i,
|
|
35
|
+
tableHeader: m,
|
|
36
|
+
tableRow: b,
|
|
37
|
+
loadingRow: n,
|
|
38
|
+
emptyRow: s,
|
|
39
|
+
tableFooter: d,
|
|
40
|
+
isLoading: r = !1,
|
|
41
|
+
pageLimit: c = 10,
|
|
42
|
+
isFetchingNextPage: a = !1,
|
|
43
|
+
hasNextPage: g = !1,
|
|
44
|
+
fetchNextPage: y = void 0,
|
|
45
|
+
isError: h = !1,
|
|
46
|
+
triggerOffset: u = 5,
|
|
47
|
+
rootMargin: v = "200px",
|
|
48
|
+
className: N = "",
|
|
49
|
+
children: x
|
|
50
|
+
}) {
|
|
51
|
+
const f = !r && o.length === 0, T = S({ defaultActiveId: null }), P = () => {
|
|
52
|
+
h || !g || a || !y || y();
|
|
53
|
+
};
|
|
54
|
+
if (u < 0 || u > c)
|
|
55
|
+
throw new Error(
|
|
56
|
+
`triggerOffset (${u}) must be between 0 and pageLimit (${c})`
|
|
57
|
+
);
|
|
58
|
+
return /* @__PURE__ */ e($, { store: T, children: /* @__PURE__ */ p(
|
|
59
|
+
"div",
|
|
60
|
+
{
|
|
61
|
+
className: `overflow-x-auto rounded-lg border border-black/10 ${N}`,
|
|
62
|
+
role: "region",
|
|
63
|
+
"aria-label": t,
|
|
64
|
+
"aria-describedby": i ? `${t}-description` : void 0,
|
|
65
|
+
children: [
|
|
66
|
+
i && /* @__PURE__ */ e("div", { id: `${t}-description`, className: "sr-only", children: i }),
|
|
67
|
+
t,
|
|
68
|
+
/* @__PURE__ */ p("div", { role: "table", "aria-label": t, className: "w-full", children: [
|
|
69
|
+
/* @__PURE__ */ e("div", { role: "rowgroup", children: m }),
|
|
70
|
+
/* @__PURE__ */ p("div", { role: "rowgroup", children: [
|
|
71
|
+
r && n && Array.from({ length: c }).map((w, l) => D(n) ? I(n, { key: `loading-${l}` }) : /* @__PURE__ */ e("div", { role: "row", children: n }, `loading-${l}`)),
|
|
72
|
+
f && s && /* @__PURE__ */ e("div", { role: "row", children: /* @__PURE__ */ e(
|
|
73
|
+
"div",
|
|
74
|
+
{
|
|
75
|
+
role: "cell",
|
|
76
|
+
className: "px-4 py-8 text-center text-sm text-black/60",
|
|
77
|
+
children: s
|
|
78
|
+
}
|
|
79
|
+
) }),
|
|
80
|
+
!r && !f && o.map((w, l) => {
|
|
81
|
+
const k = l === o.length - u && g && !a && !h;
|
|
82
|
+
return /* @__PURE__ */ p(E.Fragment, { children: [
|
|
83
|
+
b(w, l),
|
|
84
|
+
k && /* @__PURE__ */ e("div", { role: "row", children: /* @__PURE__ */ e("div", { role: "cell", className: "p-0", children: /* @__PURE__ */ e(
|
|
85
|
+
C,
|
|
86
|
+
{
|
|
87
|
+
onIntersect: P,
|
|
88
|
+
enabled: !a && !h,
|
|
89
|
+
rootMargin: v,
|
|
90
|
+
className: "h-1"
|
|
91
|
+
}
|
|
92
|
+
) }) })
|
|
93
|
+
] }, `row-${l}`);
|
|
94
|
+
})
|
|
95
|
+
] }),
|
|
96
|
+
d && /* @__PURE__ */ e("div", { role: "rowgroup", children: d }),
|
|
97
|
+
x
|
|
98
|
+
] }),
|
|
99
|
+
/* @__PURE__ */ p(
|
|
100
|
+
"div",
|
|
101
|
+
{
|
|
102
|
+
className: "sr-only",
|
|
103
|
+
role: "status",
|
|
104
|
+
"aria-live": "polite",
|
|
105
|
+
"aria-atomic": "true",
|
|
106
|
+
children: [
|
|
107
|
+
r && "Loading data...",
|
|
108
|
+
a && "Loading more items...",
|
|
109
|
+
f && "No items to display"
|
|
110
|
+
]
|
|
111
|
+
}
|
|
112
|
+
)
|
|
113
|
+
]
|
|
114
|
+
}
|
|
115
|
+
) });
|
|
116
|
+
}
|
|
117
|
+
const W = {
|
|
118
|
+
name: "Data Table",
|
|
119
|
+
description: "Sortable, filterable data table with infinite scroll and TanStack Query integration, built on Ariakit for accessibility.",
|
|
120
|
+
category: "Data Display",
|
|
121
|
+
installation: "pnpm add @component-labs/ui",
|
|
122
|
+
usage: `import { DataTable } from "@component-labs/ui";
|
|
123
|
+
|
|
124
|
+
<DataTable
|
|
125
|
+
data={items}
|
|
126
|
+
label="Products"
|
|
127
|
+
tableHeader={<tr><th>Name</th><th>Price</th></tr>}
|
|
128
|
+
tableRow={(item) => <tr><td>{item.name}</td><td>{item.price}</td></tr>}
|
|
129
|
+
/>`,
|
|
130
|
+
props: [
|
|
131
|
+
{
|
|
132
|
+
name: "data",
|
|
133
|
+
type: "T[]",
|
|
134
|
+
description: "Array of data items to display in the table",
|
|
135
|
+
required: !0
|
|
136
|
+
},
|
|
137
|
+
{
|
|
138
|
+
name: "label",
|
|
139
|
+
type: "string",
|
|
140
|
+
description: "Accessible label for the table",
|
|
141
|
+
required: !0
|
|
142
|
+
},
|
|
143
|
+
{
|
|
144
|
+
name: "tableHeader",
|
|
145
|
+
type: "ReactElement",
|
|
146
|
+
description: "Table header component",
|
|
147
|
+
required: !0
|
|
148
|
+
},
|
|
149
|
+
{
|
|
150
|
+
name: "tableRow",
|
|
151
|
+
type: "(item: T, index: number) => ReactElement",
|
|
152
|
+
description: "Function to render each table row",
|
|
153
|
+
required: !0
|
|
154
|
+
},
|
|
155
|
+
{
|
|
156
|
+
name: "description",
|
|
157
|
+
type: "string",
|
|
158
|
+
description: "Optional description for assistive technology"
|
|
159
|
+
},
|
|
160
|
+
{
|
|
161
|
+
name: "loadingRow",
|
|
162
|
+
type: "ReactElement",
|
|
163
|
+
description: "Skeleton row component shown during loading"
|
|
164
|
+
},
|
|
165
|
+
{
|
|
166
|
+
name: "emptyRow",
|
|
167
|
+
type: "ReactElement",
|
|
168
|
+
description: "Component shown when no data is available"
|
|
169
|
+
},
|
|
170
|
+
{
|
|
171
|
+
name: "tableFooter",
|
|
172
|
+
type: "ReactElement",
|
|
173
|
+
description: "Optional table footer component"
|
|
174
|
+
},
|
|
175
|
+
{
|
|
176
|
+
name: "pageLimit",
|
|
177
|
+
type: "number",
|
|
178
|
+
description: "Number of skeleton rows to show during loading",
|
|
179
|
+
default: "10"
|
|
180
|
+
},
|
|
181
|
+
{
|
|
182
|
+
name: "isLoading",
|
|
183
|
+
type: "boolean",
|
|
184
|
+
description: "Initial loading state",
|
|
185
|
+
default: "false"
|
|
186
|
+
},
|
|
187
|
+
{
|
|
188
|
+
name: "hasNextPage",
|
|
189
|
+
type: "boolean",
|
|
190
|
+
description: "Whether there are more pages to fetch",
|
|
191
|
+
default: "false"
|
|
192
|
+
},
|
|
193
|
+
{
|
|
194
|
+
name: "fetchNextPage",
|
|
195
|
+
type: "() => void",
|
|
196
|
+
description: "Callback to fetch the next page"
|
|
197
|
+
},
|
|
198
|
+
{
|
|
199
|
+
name: "isFetchingNextPage",
|
|
200
|
+
type: "boolean",
|
|
201
|
+
description: "Whether currently fetching next page",
|
|
202
|
+
default: "false"
|
|
203
|
+
},
|
|
204
|
+
{
|
|
205
|
+
name: "isError",
|
|
206
|
+
type: "boolean",
|
|
207
|
+
description: "Error state - prevents infinite retry loops",
|
|
208
|
+
default: "false"
|
|
209
|
+
},
|
|
210
|
+
{
|
|
211
|
+
name: "triggerOffset",
|
|
212
|
+
type: "number",
|
|
213
|
+
description: "Number of rows from end to trigger fetchNextPage",
|
|
214
|
+
default: "5"
|
|
215
|
+
},
|
|
216
|
+
{
|
|
217
|
+
name: "rootMargin",
|
|
218
|
+
type: "string",
|
|
219
|
+
description: "IntersectionObserver rootMargin",
|
|
220
|
+
default: "'200px'"
|
|
221
|
+
}
|
|
222
|
+
],
|
|
223
|
+
examples: [
|
|
224
|
+
{
|
|
225
|
+
title: "Basic Table",
|
|
226
|
+
code: `const products = [
|
|
227
|
+
{ id: 1, name: "Product A", price: "$10" },
|
|
228
|
+
{ id: 2, name: "Product B", price: "$20" },
|
|
229
|
+
];
|
|
230
|
+
|
|
231
|
+
<DataTable
|
|
232
|
+
data={products}
|
|
233
|
+
label="Products"
|
|
234
|
+
tableHeader={
|
|
235
|
+
<tr>
|
|
236
|
+
<th>Name</th>
|
|
237
|
+
<th>Price</th>
|
|
238
|
+
</tr>
|
|
239
|
+
}
|
|
240
|
+
tableRow={(product) => (
|
|
241
|
+
<tr key={product.id}>
|
|
242
|
+
<td>{product.name}</td>
|
|
243
|
+
<td>{product.price}</td>
|
|
244
|
+
</tr>
|
|
245
|
+
)}
|
|
246
|
+
/>`,
|
|
247
|
+
description: "Simple data table with static data"
|
|
248
|
+
},
|
|
249
|
+
{
|
|
250
|
+
title: "With Infinite Scroll",
|
|
251
|
+
code: `const { data, isLoading, fetchNextPage, hasNextPage, isFetchingNextPage } =
|
|
252
|
+
useInfiniteQuery({ ... });
|
|
253
|
+
|
|
254
|
+
<DataTable
|
|
255
|
+
data={data?.pages.flatMap(p => p.items) ?? []}
|
|
256
|
+
label="Items"
|
|
257
|
+
isLoading={isLoading}
|
|
258
|
+
hasNextPage={hasNextPage}
|
|
259
|
+
fetchNextPage={fetchNextPage}
|
|
260
|
+
isFetchingNextPage={isFetchingNextPage}
|
|
261
|
+
tableHeader={<tr><th>Name</th></tr>}
|
|
262
|
+
tableRow={(item) => <tr><td>{item.name}</td></tr>}
|
|
263
|
+
loadingRow={<tr><td><Skeleton /></td></tr>}
|
|
264
|
+
/>`,
|
|
265
|
+
description: "Infinite scroll with TanStack Query"
|
|
266
|
+
},
|
|
267
|
+
{
|
|
268
|
+
title: "With Empty State",
|
|
269
|
+
code: `<DataTable
|
|
270
|
+
data={[]}
|
|
271
|
+
label="Users"
|
|
272
|
+
tableHeader={<tr><th>Name</th><th>Email</th></tr>}
|
|
273
|
+
tableRow={(user) => <tr><td>{user.name}</td><td>{user.email}</td></tr>}
|
|
274
|
+
emptyRow={
|
|
275
|
+
<div className="text-center py-8">
|
|
276
|
+
<p>No users found</p>
|
|
277
|
+
<Button onClick={addUser}>Add User</Button>
|
|
278
|
+
</div>
|
|
279
|
+
}
|
|
280
|
+
/>`,
|
|
281
|
+
description: "Custom empty state when no data"
|
|
282
|
+
}
|
|
283
|
+
],
|
|
284
|
+
accessibility: [
|
|
285
|
+
"Built on Ariakit's Composite component for keyboard navigation",
|
|
286
|
+
"Proper ARIA table roles (table, row, cell, rowgroup)",
|
|
287
|
+
"Screen reader announcements for loading states",
|
|
288
|
+
"Accessible labels and descriptions",
|
|
289
|
+
"Keyboard navigation between cells",
|
|
290
|
+
"Live region announcements for data changes"
|
|
291
|
+
],
|
|
292
|
+
relatedComponents: ["Carousel"]
|
|
293
|
+
};
|
|
294
|
+
export {
|
|
295
|
+
O as DataTable,
|
|
296
|
+
W as dataTableDocs
|
|
297
|
+
};
|
|
298
|
+
//# sourceMappingURL=data-table.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"data-table.js","sources":["../src/lib/IntersectionObserver.tsx","../src/components/data-table/DataTable.tsx","../src/components/data-table/DataTable.docs.ts"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useRef } from \"react\";\n\ninterface IntersectionObserverProps {\n onIntersect: () => void;\n enabled?: boolean;\n rootMargin?: string;\n threshold?: number;\n children?: React.ReactNode;\n className?: string;\n}\n\n/**\n * Reusable Intersection Observer component\n * Triggers a callback when the component enters the viewport\n *\n * @param onIntersect - Callback to trigger when element intersects\n * @param enabled - Whether the observer is active (default: true)\n * @param rootMargin - Margin around the root (default: \"100px\")\n * @param threshold - Intersection threshold 0-1 (default: 0.1)\n * @param children - Optional children to render\n * @param className - Optional CSS classes\n */\nexport function IntersectionObserver({\n onIntersect,\n enabled = true,\n rootMargin = \"100px\",\n threshold = 0.1,\n children,\n className = \"\",\n}: IntersectionObserverProps) {\n const targetRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n const target = targetRef.current;\n if (!target || !enabled) return;\n\n const observer = new window.IntersectionObserver(\n (entries) => {\n const [entry] = entries;\n if (entry?.isIntersecting) {\n onIntersect();\n }\n },\n {\n rootMargin,\n threshold,\n },\n );\n\n observer.observe(target);\n\n return () => {\n observer.disconnect();\n };\n }, [onIntersect, enabled, rootMargin, threshold]);\n\n return (\n <div ref={targetRef} className={className}>\n {children}\n </div>\n );\n}\n\n/**\n * Simpler hook-based version if you want more control\n */\nexport function useIntersectionObserver(\n callback: () => void,\n options?: {\n enabled?: boolean;\n rootMargin?: string;\n threshold?: number;\n },\n) {\n const targetRef = useRef<HTMLDivElement>(null);\n const { enabled = true, rootMargin = \"100px\", threshold = 0.1 } = options ?? {};\n\n useEffect(() => {\n const target = targetRef.current;\n if (!target || !enabled) return;\n\n const observer = new window.IntersectionObserver(\n (entries) => {\n const [entry] = entries;\n if (entry?.isIntersecting) {\n callback();\n }\n },\n {\n rootMargin,\n threshold,\n },\n );\n\n observer.observe(target);\n\n return () => {\n observer.disconnect();\n };\n }, [callback, enabled, rootMargin, threshold]);\n\n return targetRef;\n}\n","\"use client\";\n\nimport React, {\n type ReactNode,\n type ReactElement,\n cloneElement,\n isValidElement,\n} from \"react\";\nimport { IntersectionObserver } from \"../../lib/IntersectionObserver\";\nimport { Composite, useCompositeStore } from \"@ariakit/react\";\n\n// ============================================================================\n// Types and Interfaces\n// ============================================================================\n\nexport interface TableProps<T> {\n /** Array of data items to display in the table */\n data: T[];\n\n /** Accessible label for the table */\n label: string;\n\n /** Optional description for assistive technology */\n description?: string;\n\n /**\n * Table header component\n * Can be a React element or component\n * @example tableHeader={<TableHeader />}\n * @example tableHeader={<tr><th>Name</th></tr>}\n */\n tableHeader: ReactElement;\n\n /**\n * Table row component - receives the data item as prop\n * @param item - The data item for this row\n * @param index - The index of this item in the data array\n * @example tableRow={(item) => <ProductRow product={item} />}\n * @example tableRow={(item) => <tr><td>{item.name}</td></tr>}\n */\n tableRow: (item: T, index: number) => ReactElement;\n\n /**\n * Loading skeleton row component\n * Rendered multiple times (pageLimit) during loading\n * @example loadingRow={<SkeletonRow />}\n * @example loadingRow={<tr><td><Skeleton /></td></tr>}\n */\n loadingRow?: ReactElement;\n\n /**\n * Empty state component\n * Shown when no data is available and not loading\n * @example emptyRow={<EmptyState message=\"No items found\" />}\n * @example emptyRow={<tr><td>No data</td></tr>}\n */\n emptyRow?: ReactElement;\n\n /**\n * Optional table footer component\n * @example tableFooter={<TableFooter />}\n * @example tableFooter={<tfoot><tr><td>Total</td></tr></tfoot>}\n */\n tableFooter?: ReactElement;\n\n // ============================================================================\n // TANSTACK QUERY INTEGRATION\n // ============================================================================\n\n /** Number of skeleton rows to show during loading states */\n pageLimit?: number;\n\n /** Initial loading state - shows skeleton rows for entire first page */\n isLoading?: boolean;\n\n /** Whether there are more pages to fetch (enables IntersectionObserver) */\n hasNextPage?: boolean;\n\n /** Callback to fetch the next page when user scrolls near the end */\n fetchNextPage?: () => void;\n\n /** Whether currently fetching next page - shows additional skeleton rows */\n isFetchingNextPage?: boolean;\n\n /**\n * Error state - disables IntersectionObserver to prevent infinite loops\n * IMPORTANT: Pass this to prevent continuous failed fetch attempts\n */\n isError?: boolean;\n\n // ============================================================================\n // INFINITE SCROLL CONFIGURATION\n // ============================================================================\n\n /**\n * Number of rows from the end to trigger fetchNextPage\n * @default 5\n * @example triggerOffset={10} - Trigger when user is 10 rows from bottom\n */\n triggerOffset?: number;\n\n /**\n * IntersectionObserver rootMargin (how far before trigger enters viewport)\n * @default \"200px\"\n * @example rootMargin=\"500px\" - Start fetching 500px before trigger is visible\n */\n rootMargin?: string;\n\n // ============================================================================\n // STYLING & MISC\n // ============================================================================\n\n /** Additional CSS classes for the table container */\n className?: string;\n\n /** Additional children to render inside table element (rare use case) */\n children?: ReactNode;\n}\n\n/**\n * Table<T>\n *\n * A fully accessible table component with row-based rendering.\n *\n * @template T - Row data type\n */\nexport function DataTable<T>({\n data,\n label = \"Data Table\",\n description,\n tableHeader,\n tableRow,\n loadingRow,\n emptyRow,\n tableFooter,\n isLoading = false,\n pageLimit = 10,\n isFetchingNextPage = false,\n hasNextPage = false,\n fetchNextPage = undefined,\n isError = false,\n triggerOffset = 5,\n rootMargin = \"200px\",\n className = \"\",\n children,\n}: TableProps<T>) {\n const isEmpty = !isLoading && data.length === 0;\n const store = useCompositeStore({ defaultActiveId: null });\n\n const handleLoadMore = () => {\n if (isError || !hasNextPage || isFetchingNextPage || !fetchNextPage) {\n return;\n }\n fetchNextPage();\n };\n\n if (triggerOffset < 0 || triggerOffset > pageLimit) {\n throw new Error(\n `triggerOffset (${triggerOffset}) must be between 0 and pageLimit (${pageLimit})`,\n );\n }\n\n return (\n <Composite store={store}>\n <div\n className={`overflow-x-auto rounded-lg border border-black/10 ${className}`}\n role=\"region\"\n aria-label={label}\n aria-describedby={description ? `${label}-description` : undefined}\n >\n {description && (\n <div id={`${label}-description`} className=\"sr-only\">\n {description}\n </div>\n )}\n\n {label}\n\n <div role=\"table\" aria-label={label} className=\"w-full\">\n <div role=\"rowgroup\">{tableHeader}</div>\n\n <div role=\"rowgroup\">\n {isLoading &&\n loadingRow &&\n Array.from({ length: pageLimit }).map((_, index) => {\n if (isValidElement(loadingRow)) {\n return cloneElement(loadingRow, { key: `loading-${index}` });\n }\n return (\n <div key={`loading-${index}`} role=\"row\">\n {loadingRow}\n </div>\n );\n })}\n\n {isEmpty && emptyRow && (\n <div role=\"row\">\n <div\n role=\"cell\"\n className=\"px-4 py-8 text-center text-sm text-black/60\"\n >\n {emptyRow}\n </div>\n </div>\n )}\n\n {!isLoading &&\n !isEmpty &&\n data.map((item, index) => {\n const isNearEnd = index === data.length - triggerOffset;\n const shouldShowTrigger =\n isNearEnd && hasNextPage && !isFetchingNextPage && !isError;\n\n return (\n <React.Fragment key={`row-${index}`}>\n {tableRow(item, index)}\n\n {shouldShowTrigger && (\n <div role=\"row\">\n <div role=\"cell\" className=\"p-0\">\n <IntersectionObserver\n onIntersect={handleLoadMore}\n enabled={!isFetchingNextPage && !isError}\n rootMargin={rootMargin}\n className=\"h-1\"\n />\n </div>\n </div>\n )}\n </React.Fragment>\n );\n })}\n </div>\n\n {tableFooter && <div role=\"rowgroup\">{tableFooter}</div>}\n\n {children}\n </div>\n\n <div\n className=\"sr-only\"\n role=\"status\"\n aria-live=\"polite\"\n aria-atomic=\"true\"\n >\n {isLoading && \"Loading data...\"}\n {isFetchingNextPage && \"Loading more items...\"}\n {isEmpty && \"No items to display\"}\n </div>\n </div>\n </Composite>\n );\n}\n\nexport default DataTable;\n","import type { ComponentDoc } from \"../../types/docs\";\n\nexport const dataTableDocs: ComponentDoc = {\n name: \"Data Table\",\n description: \"Sortable, filterable data table with infinite scroll and TanStack Query integration, built on Ariakit for accessibility.\",\n category: \"Data Display\",\n installation: `pnpm add @component-labs/ui`,\n usage: `import { DataTable } from \"@component-labs/ui\";\n\n<DataTable\n data={items}\n label=\"Products\"\n tableHeader={<tr><th>Name</th><th>Price</th></tr>}\n tableRow={(item) => <tr><td>{item.name}</td><td>{item.price}</td></tr>}\n/>`,\n props: [\n {\n name: \"data\",\n type: \"T[]\",\n description: \"Array of data items to display in the table\",\n required: true,\n },\n {\n name: \"label\",\n type: \"string\",\n description: \"Accessible label for the table\",\n required: true,\n },\n {\n name: \"tableHeader\",\n type: \"ReactElement\",\n description: \"Table header component\",\n required: true,\n },\n {\n name: \"tableRow\",\n type: \"(item: T, index: number) => ReactElement\",\n description: \"Function to render each table row\",\n required: true,\n },\n {\n name: \"description\",\n type: \"string\",\n description: \"Optional description for assistive technology\",\n },\n {\n name: \"loadingRow\",\n type: \"ReactElement\",\n description: \"Skeleton row component shown during loading\",\n },\n {\n name: \"emptyRow\",\n type: \"ReactElement\",\n description: \"Component shown when no data is available\",\n },\n {\n name: \"tableFooter\",\n type: \"ReactElement\",\n description: \"Optional table footer component\",\n },\n {\n name: \"pageLimit\",\n type: \"number\",\n description: \"Number of skeleton rows to show during loading\",\n default: \"10\",\n },\n {\n name: \"isLoading\",\n type: \"boolean\",\n description: \"Initial loading state\",\n default: \"false\",\n },\n {\n name: \"hasNextPage\",\n type: \"boolean\",\n description: \"Whether there are more pages to fetch\",\n default: \"false\",\n },\n {\n name: \"fetchNextPage\",\n type: \"() => void\",\n description: \"Callback to fetch the next page\",\n },\n {\n name: \"isFetchingNextPage\",\n type: \"boolean\",\n description: \"Whether currently fetching next page\",\n default: \"false\",\n },\n {\n name: \"isError\",\n type: \"boolean\",\n description: \"Error state - prevents infinite retry loops\",\n default: \"false\",\n },\n {\n name: \"triggerOffset\",\n type: \"number\",\n description: \"Number of rows from end to trigger fetchNextPage\",\n default: \"5\",\n },\n {\n name: \"rootMargin\",\n type: \"string\",\n description: \"IntersectionObserver rootMargin\",\n default: \"'200px'\",\n },\n ],\n examples: [\n {\n title: \"Basic Table\",\n code: `const products = [\n { id: 1, name: \"Product A\", price: \"$10\" },\n { id: 2, name: \"Product B\", price: \"$20\" },\n];\n\n<DataTable\n data={products}\n label=\"Products\"\n tableHeader={\n <tr>\n <th>Name</th>\n <th>Price</th>\n </tr>\n }\n tableRow={(product) => (\n <tr key={product.id}>\n <td>{product.name}</td>\n <td>{product.price}</td>\n </tr>\n )}\n/>`,\n description: \"Simple data table with static data\",\n },\n {\n title: \"With Infinite Scroll\",\n code: `const { data, isLoading, fetchNextPage, hasNextPage, isFetchingNextPage } =\n useInfiniteQuery({ ... });\n\n<DataTable\n data={data?.pages.flatMap(p => p.items) ?? []}\n label=\"Items\"\n isLoading={isLoading}\n hasNextPage={hasNextPage}\n fetchNextPage={fetchNextPage}\n isFetchingNextPage={isFetchingNextPage}\n tableHeader={<tr><th>Name</th></tr>}\n tableRow={(item) => <tr><td>{item.name}</td></tr>}\n loadingRow={<tr><td><Skeleton /></td></tr>}\n/>`,\n description: \"Infinite scroll with TanStack Query\",\n },\n {\n title: \"With Empty State\",\n code: `<DataTable\n data={[]}\n label=\"Users\"\n tableHeader={<tr><th>Name</th><th>Email</th></tr>}\n tableRow={(user) => <tr><td>{user.name}</td><td>{user.email}</td></tr>}\n emptyRow={\n <div className=\"text-center py-8\">\n <p>No users found</p>\n <Button onClick={addUser}>Add User</Button>\n </div>\n }\n/>`,\n description: \"Custom empty state when no data\",\n },\n ],\n accessibility: [\n \"Built on Ariakit's Composite component for keyboard navigation\",\n \"Proper ARIA table roles (table, row, cell, rowgroup)\",\n \"Screen reader announcements for loading states\",\n \"Accessible labels and descriptions\",\n \"Keyboard navigation between cells\",\n \"Live region announcements for data changes\",\n ],\n relatedComponents: [\"Carousel\"],\n};\n"],"names":["IntersectionObserver","onIntersect","enabled","rootMargin","threshold","children","className","targetRef","useRef","useEffect","target","observer","entries","entry","jsx","DataTable","data","label","description","tableHeader","tableRow","loadingRow","emptyRow","tableFooter","isLoading","pageLimit","isFetchingNextPage","hasNextPage","fetchNextPage","isError","triggerOffset","isEmpty","store","useCompositeStore","handleLoadMore","Composite","jsxs","_","index","isValidElement","cloneElement","item","shouldShowTrigger","React","dataTableDocs"],"mappings":"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"}
|