@refraktor/core 0.0.1 → 0.0.3
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/.turbo/turbo-build.log +1 -1
- package/build/components/breadcrumbs/breadcrumbs.d.ts +4 -0
- package/build/components/breadcrumbs/breadcrumbs.d.ts.map +1 -0
- package/build/components/breadcrumbs/breadcrumbs.js +64 -0
- package/build/components/breadcrumbs/breadcrumbs.styles.d.ts +12 -0
- package/build/components/breadcrumbs/breadcrumbs.styles.d.ts.map +1 -0
- package/build/components/breadcrumbs/breadcrumbs.styles.js +43 -0
- package/build/components/breadcrumbs/breadcrumbs.test.d.ts +2 -0
- package/build/components/breadcrumbs/breadcrumbs.test.d.ts.map +1 -0
- package/build/components/breadcrumbs/breadcrumbs.test.js +72 -0
- package/build/components/breadcrumbs/breadcrumbs.types.d.ts +56 -0
- package/build/components/breadcrumbs/breadcrumbs.types.d.ts.map +1 -0
- package/build/components/breadcrumbs/breadcrumbs.types.js +1 -0
- package/build/components/breadcrumbs/breadcrumbs.utils.d.ts +10 -0
- package/build/components/breadcrumbs/breadcrumbs.utils.d.ts.map +1 -0
- package/build/components/breadcrumbs/breadcrumbs.utils.js +36 -0
- package/build/components/breadcrumbs/index.d.ts +3 -0
- package/build/components/breadcrumbs/index.d.ts.map +1 -0
- package/build/components/breadcrumbs/index.js +1 -0
- package/build/components/drawer/drawer-close/drawer-close.d.ts +4 -0
- package/build/components/drawer/drawer-close/drawer-close.d.ts.map +1 -0
- package/build/components/drawer/drawer-close/drawer-close.js +19 -0
- package/build/components/drawer/drawer-close/index.d.ts +2 -0
- package/build/components/drawer/drawer-close/index.d.ts.map +1 -0
- package/build/components/drawer/drawer-close/index.js +1 -0
- package/build/components/drawer/drawer-content/drawer-content.d.ts +4 -0
- package/build/components/drawer/drawer-content/drawer-content.d.ts.map +1 -0
- package/build/components/drawer/drawer-content/drawer-content.js +41 -0
- package/build/components/drawer/drawer-content/index.d.ts +2 -0
- package/build/components/drawer/drawer-content/index.d.ts.map +1 -0
- package/build/components/drawer/drawer-content/index.js +1 -0
- package/build/components/drawer/drawer-header/drawer-header.d.ts +4 -0
- package/build/components/drawer/drawer-header/drawer-header.d.ts.map +1 -0
- package/build/components/drawer/drawer-header/drawer-header.js +13 -0
- package/build/components/drawer/drawer-header/index.d.ts +2 -0
- package/build/components/drawer/drawer-header/index.d.ts.map +1 -0
- package/build/components/drawer/drawer-header/index.js +1 -0
- package/build/components/drawer/drawer-overlay/drawer-overlay.d.ts +4 -0
- package/build/components/drawer/drawer-overlay/drawer-overlay.d.ts.map +1 -0
- package/build/components/drawer/drawer-overlay/drawer-overlay.js +31 -0
- package/build/components/drawer/drawer-overlay/index.d.ts +2 -0
- package/build/components/drawer/drawer-overlay/index.d.ts.map +1 -0
- package/build/components/drawer/drawer-overlay/index.js +1 -0
- package/build/components/drawer/drawer-root/drawer-root.d.ts +4 -0
- package/build/components/drawer/drawer-root/drawer-root.d.ts.map +1 -0
- package/build/components/drawer/drawer-root/drawer-root.js +50 -0
- package/build/components/drawer/drawer-root/index.d.ts +2 -0
- package/build/components/drawer/drawer-root/index.d.ts.map +1 -0
- package/build/components/drawer/drawer-root/index.js +1 -0
- package/build/components/drawer/drawer.context.d.ts +23 -0
- package/build/components/drawer/drawer.context.d.ts.map +1 -0
- package/build/components/drawer/drawer.context.js +2 -0
- package/build/components/drawer/drawer.d.ts +4 -0
- package/build/components/drawer/drawer.d.ts.map +1 -0
- package/build/components/drawer/drawer.js +19 -0
- package/build/components/drawer/drawer.styles.d.ts +6 -0
- package/build/components/drawer/drawer.styles.d.ts.map +1 -0
- package/build/components/drawer/drawer.styles.js +21 -0
- package/build/components/drawer/drawer.test.d.ts +2 -0
- package/build/components/drawer/drawer.test.d.ts.map +1 -0
- package/build/components/drawer/drawer.test.js +70 -0
- package/build/components/drawer/drawer.types.d.ts +116 -0
- package/build/components/drawer/drawer.types.d.ts.map +1 -0
- package/build/components/drawer/drawer.types.js +1 -0
- package/build/components/drawer/index.d.ts +8 -0
- package/build/components/drawer/index.d.ts.map +1 -0
- package/build/components/drawer/index.js +6 -0
- package/build/components/drawer/use-drawer.d.ts +17 -0
- package/build/components/drawer/use-drawer.d.ts.map +1 -0
- package/build/components/drawer/use-drawer.js +61 -0
- package/build/components/index.d.ts +4 -0
- package/build/components/index.d.ts.map +1 -1
- package/build/components/index.js +4 -0
- package/build/components/menu/menu-dropdown/menu-dropdown.d.ts.map +1 -1
- package/build/components/menu/menu-dropdown/menu-dropdown.js +3 -2
- package/build/components/menu/menu-sub-dropdown/menu-sub-dropdown.d.ts.map +1 -1
- package/build/components/menu/menu-sub-dropdown/menu-sub-dropdown.js +2 -1
- package/build/components/menu/use-menu.d.ts.map +1 -1
- package/build/components/menu/use-menu.js +2 -1
- package/build/components/modal/modal-close/modal-close.d.ts.map +1 -1
- package/build/components/modal/modal-close/modal-close.js +1 -1
- package/build/components/modal/modal-content/modal-content.d.ts.map +1 -1
- package/build/components/modal/modal-content/modal-content.js +1 -1
- package/build/components/modal/modal-header/modal-header.d.ts.map +1 -1
- package/build/components/modal/modal-header/modal-header.js +1 -1
- package/build/components/modal/modal-overlay/modal-overlay.d.ts.map +1 -1
- package/build/components/modal/modal-overlay/modal-overlay.js +10 -2
- package/build/components/modal/modal.test.js +16 -0
- package/build/components/modal/modal.types.d.ts +4 -0
- package/build/components/modal/modal.types.d.ts.map +1 -1
- package/build/components/number-input/number-input.d.ts.map +1 -1
- package/build/components/number-input/number-input.js +22 -15
- package/build/components/number-input/number-input.test.d.ts +2 -0
- package/build/components/number-input/number-input.test.d.ts.map +1 -0
- package/build/components/number-input/number-input.test.js +14 -0
- package/build/components/number-input/number-input.types.d.ts +2 -2
- package/build/components/number-input/number-input.types.d.ts.map +1 -1
- package/build/components/popover/popover-dropdown/popover-dropdown.d.ts.map +1 -1
- package/build/components/popover/popover-dropdown/popover-dropdown.js +2 -1
- package/build/components/popover/use-popover.d.ts.map +1 -1
- package/build/components/popover/use-popover.js +2 -1
- package/build/components/portal/portal.js +1 -1
- package/build/components/segmented-control/index.d.ts +3 -0
- package/build/components/segmented-control/index.d.ts.map +1 -0
- package/build/components/segmented-control/index.js +1 -0
- package/build/components/segmented-control/segmented-control.d.ts +4 -0
- package/build/components/segmented-control/segmented-control.d.ts.map +1 -0
- package/build/components/segmented-control/segmented-control.js +113 -0
- package/build/components/segmented-control/segmented-control.styles.d.ts +9 -0
- package/build/components/segmented-control/segmented-control.styles.d.ts.map +1 -0
- package/build/components/segmented-control/segmented-control.styles.js +28 -0
- package/build/components/segmented-control/segmented-control.test.d.ts +2 -0
- package/build/components/segmented-control/segmented-control.test.d.ts.map +1 -0
- package/build/components/segmented-control/segmented-control.test.js +81 -0
- package/build/components/segmented-control/segmented-control.types.d.ts +49 -0
- package/build/components/segmented-control/segmented-control.types.d.ts.map +1 -0
- package/build/components/segmented-control/segmented-control.types.js +1 -0
- package/build/components/select/select-dropdown/select-dropdown.d.ts.map +1 -1
- package/build/components/select/select-dropdown/select-dropdown.js +3 -2
- package/build/components/select/select-item/select-item.d.ts.map +1 -1
- package/build/components/select/select-item/select-item.js +1 -1
- package/build/components/select/select-root/select-root.d.ts.map +1 -1
- package/build/components/select/select-root/select-root.js +36 -6
- package/build/components/select/select-trigger/select-trigger.d.ts.map +1 -1
- package/build/components/select/select-trigger/select-trigger.js +1 -1
- package/build/components/select/select.context.d.ts +2 -0
- package/build/components/select/select.context.d.ts.map +1 -1
- package/build/components/select/select.test.js +17 -0
- package/build/components/select/select.types.d.ts +10 -0
- package/build/components/select/select.types.d.ts.map +1 -1
- package/build/components/select/use-select.d.ts.map +1 -1
- package/build/components/select/use-select.js +2 -1
- package/build/components/split-pane/index.d.ts +3 -0
- package/build/components/split-pane/index.d.ts.map +1 -0
- package/build/components/split-pane/index.js +1 -0
- package/build/components/split-pane/split-pane.d.ts +4 -0
- package/build/components/split-pane/split-pane.d.ts.map +1 -0
- package/build/components/split-pane/split-pane.js +201 -0
- package/build/components/split-pane/split-pane.styles.d.ts +3 -0
- package/build/components/split-pane/split-pane.styles.d.ts.map +1 -0
- package/build/components/split-pane/split-pane.styles.js +8 -0
- package/build/components/split-pane/split-pane.test.d.ts +2 -0
- package/build/components/split-pane/split-pane.test.d.ts.map +1 -0
- package/build/components/split-pane/split-pane.test.js +105 -0
- package/build/components/split-pane/split-pane.types.d.ts +51 -0
- package/build/components/split-pane/split-pane.types.d.ts.map +1 -0
- package/build/components/split-pane/split-pane.types.js +1 -0
- package/build/components/switch/switch.js +1 -1
- package/build/components/table/index.d.ts +9 -0
- package/build/components/table/index.d.ts.map +1 -0
- package/build/components/table/index.js +7 -0
- package/build/components/table/table-body/index.d.ts +2 -0
- package/build/components/table/table-body/index.d.ts.map +1 -0
- package/build/components/table/table-body/index.js +1 -0
- package/build/components/table/table-body/table-body.d.ts +4 -0
- package/build/components/table/table-body/table-body.d.ts.map +1 -0
- package/build/components/table/table-body/table-body.js +17 -0
- package/build/components/table/table-caption/index.d.ts +2 -0
- package/build/components/table/table-caption/index.d.ts.map +1 -0
- package/build/components/table/table-caption/index.js +1 -0
- package/build/components/table/table-caption/table-caption.d.ts +4 -0
- package/build/components/table/table-caption/table-caption.d.ts.map +1 -0
- package/build/components/table/table-caption/table-caption.js +13 -0
- package/build/components/table/table-cell/index.d.ts +2 -0
- package/build/components/table/table-cell/index.d.ts.map +1 -0
- package/build/components/table/table-cell/index.js +1 -0
- package/build/components/table/table-cell/table-cell.d.ts +4 -0
- package/build/components/table/table-cell/table-cell.d.ts.map +1 -0
- package/build/components/table/table-cell/table-cell.js +13 -0
- package/build/components/table/table-head/index.d.ts +2 -0
- package/build/components/table/table-head/index.d.ts.map +1 -0
- package/build/components/table/table-head/index.js +1 -0
- package/build/components/table/table-head/table-head.d.ts +4 -0
- package/build/components/table/table-head/table-head.d.ts.map +1 -0
- package/build/components/table/table-head/table-head.js +11 -0
- package/build/components/table/table-header-cell/index.d.ts +2 -0
- package/build/components/table/table-header-cell/index.d.ts.map +1 -0
- package/build/components/table/table-header-cell/index.js +1 -0
- package/build/components/table/table-header-cell/table-header-cell.d.ts +4 -0
- package/build/components/table/table-header-cell/table-header-cell.d.ts.map +1 -0
- package/build/components/table/table-header-cell/table-header-cell.js +13 -0
- package/build/components/table/table-row/index.d.ts +2 -0
- package/build/components/table/table-row/index.d.ts.map +1 -0
- package/build/components/table/table-row/index.js +1 -0
- package/build/components/table/table-row/table-row.d.ts +4 -0
- package/build/components/table/table-row/table-row.d.ts.map +1 -0
- package/build/components/table/table-row/table-row.js +11 -0
- package/build/components/table/table.context.d.ts +16 -0
- package/build/components/table/table.context.d.ts.map +1 -0
- package/build/components/table/table.context.js +2 -0
- package/build/components/table/table.d.ts +4 -0
- package/build/components/table/table.d.ts.map +1 -0
- package/build/components/table/table.js +46 -0
- package/build/components/table/table.styles.d.ts +16 -0
- package/build/components/table/table.styles.d.ts.map +1 -0
- package/build/components/table/table.styles.js +39 -0
- package/build/components/table/table.test.d.ts +2 -0
- package/build/components/table/table.test.d.ts.map +1 -0
- package/build/components/table/table.test.js +59 -0
- package/build/components/table/table.types.d.ts +113 -0
- package/build/components/table/table.types.d.ts.map +1 -0
- package/build/components/table/table.types.js +1 -0
- package/build/components/tabs/tabs-tab/tabs-tab.d.ts.map +1 -1
- package/build/components/tabs/tabs-tab/tabs-tab.js +0 -6
- package/build/components/tooltip/tooltip.d.ts.map +1 -1
- package/build/components/tooltip/tooltip.js +7 -3
- package/build/components/tooltip/use-tooltip.d.ts.map +1 -1
- package/build/components/tooltip/use-tooltip.js +2 -1
- package/build/components/transition/transition.d.ts.map +1 -1
- package/build/components/transition/transition.js +16 -12
- package/build/style.css +1 -1
- package/package.json +2 -2
- package/src/components/breadcrumbs/breadcrumbs.styles.ts +55 -0
- package/src/components/breadcrumbs/breadcrumbs.test.tsx +136 -0
- package/src/components/breadcrumbs/breadcrumbs.tsx +199 -0
- package/src/components/breadcrumbs/breadcrumbs.types.ts +78 -0
- package/src/components/breadcrumbs/breadcrumbs.utils.ts +70 -0
- package/src/components/breadcrumbs/index.ts +6 -0
- package/src/components/drawer/drawer-close/drawer-close.tsx +43 -0
- package/src/components/drawer/drawer-close/index.ts +1 -0
- package/src/components/drawer/drawer-content/drawer-content.tsx +98 -0
- package/src/components/drawer/drawer-content/index.ts +1 -0
- package/src/components/drawer/drawer-header/drawer-header.tsx +40 -0
- package/src/components/drawer/drawer-header/index.ts +1 -0
- package/src/components/drawer/drawer-overlay/drawer-overlay.tsx +86 -0
- package/src/components/drawer/drawer-overlay/index.ts +1 -0
- package/src/components/drawer/drawer-root/drawer-root.tsx +94 -0
- package/src/components/drawer/drawer-root/index.ts +1 -0
- package/src/components/drawer/drawer.context.ts +25 -0
- package/src/components/drawer/drawer.styles.ts +32 -0
- package/src/components/drawer/drawer.test.tsx +166 -0
- package/src/components/drawer/drawer.tsx +30 -0
- package/src/components/drawer/drawer.types.ts +158 -0
- package/src/components/drawer/index.ts +16 -0
- package/src/components/drawer/use-drawer.ts +101 -0
- package/src/components/index.ts +10 -6
- package/src/components/menu/menu-dropdown/menu-dropdown.tsx +4 -3
- package/src/components/menu/menu-sub-dropdown/menu-sub-dropdown.tsx +2 -0
- package/src/components/menu/use-menu.ts +2 -1
- package/src/components/modal/modal-close/modal-close.tsx +1 -5
- package/src/components/modal/modal-content/modal-content.tsx +3 -4
- package/src/components/modal/modal-header/modal-header.tsx +4 -2
- package/src/components/modal/modal-overlay/modal-overlay.tsx +66 -44
- package/src/components/modal/modal.test.tsx +124 -88
- package/src/components/modal/modal.types.ts +6 -0
- package/src/components/modal/use-modal.ts +101 -101
- package/src/components/number-input/number-input.test.tsx +22 -0
- package/src/components/number-input/number-input.tsx +79 -51
- package/src/components/number-input/number-input.types.ts +8 -8
- package/src/components/popover/popover-dropdown/popover-dropdown.tsx +2 -0
- package/src/components/popover/use-popover.ts +2 -1
- package/src/components/portal/portal.tsx +1 -1
- package/src/components/segmented-control/index.ts +6 -0
- package/src/components/segmented-control/segmented-control.styles.ts +37 -0
- package/src/components/segmented-control/segmented-control.test.tsx +152 -0
- package/src/components/segmented-control/segmented-control.tsx +245 -0
- package/src/components/segmented-control/segmented-control.types.ts +75 -0
- package/src/components/select/select-dropdown/select-dropdown.tsx +4 -3
- package/src/components/select/select-item/select-item.tsx +1 -2
- package/src/components/select/select-root/select-root.tsx +87 -11
- package/src/components/select/select-trigger/select-trigger.tsx +2 -0
- package/src/components/select/select.context.ts +2 -0
- package/src/components/select/select.test.tsx +35 -0
- package/src/components/select/select.types.ts +15 -0
- package/src/components/select/use-select.ts +2 -1
- package/src/components/switch/switch.tsx +1 -1
- package/src/components/table/index.ts +24 -0
- package/src/components/table/table-body/index.ts +1 -0
- package/src/components/table/table-body/table-body.tsx +37 -0
- package/src/components/table/table-caption/index.ts +1 -0
- package/src/components/table/table-caption/table-caption.tsx +32 -0
- package/src/components/table/table-cell/index.ts +1 -0
- package/src/components/table/table-cell/table-cell.tsx +33 -0
- package/src/components/table/table-head/index.ts +1 -0
- package/src/components/table/table-head/table-head.tsx +29 -0
- package/src/components/table/table-header-cell/index.ts +1 -0
- package/src/components/table/table-header-cell/table-header-cell.tsx +33 -0
- package/src/components/table/table-row/index.ts +1 -0
- package/src/components/table/table-row/table-row.tsx +30 -0
- package/src/components/table/table.context.ts +18 -0
- package/src/components/table/table.styles.ts +62 -0
- package/src/components/table/table.test.tsx +145 -0
- package/src/components/table/table.tsx +91 -0
- package/src/components/table/table.types.ts +145 -0
- package/src/components/tabs/tabs-tab/tabs-tab.tsx +0 -8
- package/src/components/tooltip/tooltip.tsx +7 -1
- package/src/components/tooltip/use-tooltip.ts +2 -1
- package/src/components/transition/transition.tsx +18 -14
- package/src/style.css +0 -1
- package/tsconfig.tsbuildinfo +1 -1
|
@@ -23,7 +23,7 @@ const Switch = factory((_props, ref) => {
|
|
|
23
23
|
handleChange(event.currentTarget.checked);
|
|
24
24
|
onChange?.(event);
|
|
25
25
|
};
|
|
26
|
-
return (_jsxs("div", { className: cx("inline-flex flex-col", classes.root, className), children: [_jsxs("label", { className: cx("inline-flex items-center cursor-pointer select-none", disabled && "opacity-50 cursor-not-allowed", labelPosition === "left" ? "flex-row-reverse" : "flex-row"), htmlFor: _id, children: [_jsx("input", { ...props, id: _id, ref: ref, type: "checkbox", className: cx("sr-only", classes.input), checked: value, onChange: handleOnChange, disabled: disabled }), _jsx("div", { className: cx("relative bg-[var(--refraktor-bg)] transition-all shrink-0 group", "data-[checked=true]:bg-[var(--refraktor-primary)]", "flex items-center p-0.5", sizeClass.track, getRadius(radius), classes.track), "data-checked": value, children: _jsx("span", { className: cx("bg-[var(--refraktor-colors-white)] group-data-[checked=true]:bg-[var(--refraktor-primary-text)] shadow-sm transition-all pointer-events-none", sizeClass.thumb, getRadius(radius), classes.thumb) }) }), label && (_jsx("span", { className: cx("text-[var(--refraktor-text)]", labelPosition === "left" ? "mr-
|
|
26
|
+
return (_jsxs("div", { className: cx("inline-flex flex-col", classes.root, className), children: [_jsxs("label", { className: cx("inline-flex items-center cursor-pointer select-none", disabled && "opacity-50 cursor-not-allowed", labelPosition === "left" ? "flex-row-reverse" : "flex-row"), htmlFor: _id, children: [_jsx("input", { ...props, id: _id, ref: ref, type: "checkbox", className: cx("sr-only", classes.input), checked: value, onChange: handleOnChange, disabled: disabled }), _jsx("div", { className: cx("relative bg-[var(--refraktor-bg)] transition-all shrink-0 group", "data-[checked=true]:bg-[var(--refraktor-primary)]", "flex items-center p-0.5", sizeClass.track, getRadius(radius), classes.track), "data-checked": value, children: _jsx("span", { className: cx("bg-[var(--refraktor-colors-white)] group-data-[checked=true]:bg-[var(--refraktor-primary-text)] shadow-sm transition-all pointer-events-none", sizeClass.thumb, getRadius(radius), classes.thumb) }) }), label && (_jsx("span", { className: cx("text-[var(--refraktor-text)]", labelPosition === "left" ? "mr-2" : "ml-2", sizeClass.label, classes.label), children: label }))] }), description && (_jsx("p", { className: "text-[var(--refraktor-text-tertiary)] text-xs mt-1", children: description })), error && error !== true && (_jsx("p", { className: "text-[var(--refraktor-colors-red-5)] text-xs mt-1", children: error }))] }));
|
|
27
27
|
});
|
|
28
28
|
Switch.displayName = "@refraktor/core/Switch";
|
|
29
29
|
Switch.configure = createComponentConfig();
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
export { default as Table } from "./table";
|
|
2
|
+
export { TableHead } from "./table-head";
|
|
3
|
+
export { TableBody } from "./table-body";
|
|
4
|
+
export { TableRow } from "./table-row";
|
|
5
|
+
export { TableHeaderCell } from "./table-header-cell";
|
|
6
|
+
export { TableCell } from "./table-cell";
|
|
7
|
+
export { TableCaption } from "./table-caption";
|
|
8
|
+
export type { TableProps, TableHeadProps, TableBodyProps, TableRowProps, TableHeaderCellProps, TableCellProps, TableCaptionProps, TableClassNames, TableFactoryPayload, TableHeadFactoryPayload, TableBodyFactoryPayload, TableRowFactoryPayload, TableHeaderCellFactoryPayload, TableCellFactoryPayload, TableCaptionFactoryPayload } from "./table.types";
|
|
9
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/table/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,YAAY,EACR,UAAU,EACV,cAAc,EACd,cAAc,EACd,aAAa,EACb,oBAAoB,EACpB,cAAc,EACd,iBAAiB,EACjB,eAAe,EACf,mBAAmB,EACnB,uBAAuB,EACvB,uBAAuB,EACvB,sBAAsB,EACtB,6BAA6B,EAC7B,uBAAuB,EACvB,0BAA0B,EAC7B,MAAM,eAAe,CAAC"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
export { default as Table } from "./table";
|
|
2
|
+
export { TableHead } from "./table-head";
|
|
3
|
+
export { TableBody } from "./table-body";
|
|
4
|
+
export { TableRow } from "./table-row";
|
|
5
|
+
export { TableHeaderCell } from "./table-header-cell";
|
|
6
|
+
export { TableCell } from "./table-cell";
|
|
7
|
+
export { TableCaption } from "./table-caption";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/table/table-body/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,cAAc,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as TableBody } from "./table-body";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"table-body.d.ts","sourceRoot":"","sources":["../../../../src/components/table/table-body/table-body.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,uBAAuB,EAAE,MAAM,gBAAgB,CAAC;AAEzD,QAAA,MAAM,SAAS,gEA0Bd,CAAC;AAIF,eAAe,SAAS,CAAC"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { useTheme } from "../../../theme";
|
|
3
|
+
import { factory } from "../../../utils";
|
|
4
|
+
import { useTableContext } from "../table.context";
|
|
5
|
+
import { getBodyStyles } from "../table.styles";
|
|
6
|
+
const TableBody = factory(({ children, className, ...props }, ref) => {
|
|
7
|
+
const { cx } = useTheme();
|
|
8
|
+
const { striped, highlightOnHover, withRowBorders, getStyles } = useTableContext();
|
|
9
|
+
const bodyStyles = getBodyStyles({
|
|
10
|
+
striped,
|
|
11
|
+
highlightOnHover,
|
|
12
|
+
withRowBorders
|
|
13
|
+
});
|
|
14
|
+
return (_jsx("tbody", { ref: ref, className: cx("align-top", bodyStyles, getStyles("body"), className), ...props, children: children }));
|
|
15
|
+
});
|
|
16
|
+
TableBody.displayName = "@refraktor/core/Table.Body";
|
|
17
|
+
export default TableBody;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/table/table-caption/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,iBAAiB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as TableCaption } from "./table-caption";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"table-caption.d.ts","sourceRoot":"","sources":["../../../../src/components/table/table-caption/table-caption.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,0BAA0B,EAAE,MAAM,gBAAgB,CAAC;AAE5D,QAAA,MAAM,YAAY,mEAqBjB,CAAC;AAIF,eAAe,YAAY,CAAC"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { useTheme } from "../../../theme";
|
|
3
|
+
import { factory } from "../../../utils";
|
|
4
|
+
import { useTableContext } from "../table.context";
|
|
5
|
+
import { getSize } from "../table.styles";
|
|
6
|
+
const TableCaption = factory(({ children, className, ...props }, ref) => {
|
|
7
|
+
const { cx } = useTheme();
|
|
8
|
+
const { size, getStyles } = useTableContext();
|
|
9
|
+
const sizeStyles = getSize(size);
|
|
10
|
+
return (_jsx("caption", { ref: ref, className: cx("caption-bottom mt-2 text-[var(--refraktor-text-secondary)]", sizeStyles.caption, getStyles("caption"), className), ...props, children: children }));
|
|
11
|
+
});
|
|
12
|
+
TableCaption.displayName = "@refraktor/core/Table.Caption";
|
|
13
|
+
export default TableCaption;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/table/table-cell/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,cAAc,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as TableCell } from "./table-cell";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"table-cell.d.ts","sourceRoot":"","sources":["../../../../src/components/table/table-cell/table-cell.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,uBAAuB,EAAE,MAAM,gBAAgB,CAAC;AAEzD,QAAA,MAAM,SAAS,gEAsBd,CAAC;AAIF,eAAe,SAAS,CAAC"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { useTheme } from "../../../theme";
|
|
3
|
+
import { factory } from "../../../utils";
|
|
4
|
+
import { useTableContext } from "../table.context";
|
|
5
|
+
import { getColumnBorder, getSize } from "../table.styles";
|
|
6
|
+
const TableCell = factory(({ children, className, ...props }, ref) => {
|
|
7
|
+
const { cx } = useTheme();
|
|
8
|
+
const { size, withColumnBorders, getStyles } = useTableContext();
|
|
9
|
+
const sizeStyles = getSize(size);
|
|
10
|
+
return (_jsx("td", { ref: ref, className: cx("align-middle text-[var(--refraktor-text)]", sizeStyles.cell, getColumnBorder(withColumnBorders), getStyles("cell"), className), ...props, children: children }));
|
|
11
|
+
});
|
|
12
|
+
TableCell.displayName = "@refraktor/core/Table.Cell";
|
|
13
|
+
export default TableCell;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/table/table-head/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,cAAc,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as TableHead } from "./table-head";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"table-head.d.ts","sourceRoot":"","sources":["../../../../src/components/table/table-head/table-head.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,uBAAuB,EAAE,MAAM,gBAAgB,CAAC;AAEzD,QAAA,MAAM,SAAS,gEAmBd,CAAC;AAIF,eAAe,SAAS,CAAC"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { useTheme } from "../../../theme";
|
|
3
|
+
import { factory } from "../../../utils";
|
|
4
|
+
import { useTableContext } from "../table.context";
|
|
5
|
+
const TableHead = factory(({ children, className, ...props }, ref) => {
|
|
6
|
+
const { cx } = useTheme();
|
|
7
|
+
const { getStyles } = useTableContext();
|
|
8
|
+
return (_jsx("thead", { ref: ref, className: cx("border-b border-[var(--refraktor-border)] bg-[var(--refraktor-bg-subtle)]", getStyles("head"), className), ...props, children: children }));
|
|
9
|
+
});
|
|
10
|
+
TableHead.displayName = "@refraktor/core/Table.Head";
|
|
11
|
+
export default TableHead;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/table/table-header-cell/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,qBAAqB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as TableHeaderCell } from "./table-header-cell";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"table-header-cell.d.ts","sourceRoot":"","sources":["../../../../src/components/table/table-header-cell/table-header-cell.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,6BAA6B,EAAE,MAAM,gBAAgB,CAAC;AAE/D,QAAA,MAAM,eAAe,sEAsBpB,CAAC;AAIF,eAAe,eAAe,CAAC"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { useTheme } from "../../../theme";
|
|
3
|
+
import { factory } from "../../../utils";
|
|
4
|
+
import { useTableContext } from "../table.context";
|
|
5
|
+
import { getColumnBorder, getSize } from "../table.styles";
|
|
6
|
+
const TableHeaderCell = factory(({ children, className, ...props }, ref) => {
|
|
7
|
+
const { cx } = useTheme();
|
|
8
|
+
const { size, withColumnBorders, getStyles } = useTableContext();
|
|
9
|
+
const sizeStyles = getSize(size);
|
|
10
|
+
return (_jsx("th", { ref: ref, className: cx("text-left font-medium align-middle text-[var(--refraktor-text-secondary)]", sizeStyles.headerCell, getColumnBorder(withColumnBorders), getStyles("headerCell"), className), ...props, children: children }));
|
|
11
|
+
});
|
|
12
|
+
TableHeaderCell.displayName = "@refraktor/core/Table.HeaderCell";
|
|
13
|
+
export default TableHeaderCell;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/table/table-row/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,aAAa,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as TableRow } from "./table-row";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"table-row.d.ts","sourceRoot":"","sources":["../../../../src/components/table/table-row/table-row.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,sBAAsB,EAAE,MAAM,gBAAgB,CAAC;AAExD,QAAA,MAAM,QAAQ,+DAoBb,CAAC;AAIF,eAAe,QAAQ,CAAC"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { useTheme } from "../../../theme";
|
|
3
|
+
import { factory } from "../../../utils";
|
|
4
|
+
import { useTableContext } from "../table.context";
|
|
5
|
+
const TableRow = factory(({ children, className, ...props }, ref) => {
|
|
6
|
+
const { cx } = useTheme();
|
|
7
|
+
const { highlightOnHover, getStyles } = useTableContext();
|
|
8
|
+
return (_jsx("tr", { ref: ref, className: cx("align-middle", highlightOnHover && "transition-colors", getStyles("row"), className), ...props, children: children }));
|
|
9
|
+
});
|
|
10
|
+
TableRow.displayName = "@refraktor/core/Table.Row";
|
|
11
|
+
export default TableRow;
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { RefraktorRadius, RefraktorSize } from "../../theme";
|
|
2
|
+
import { TableClassNames } from "./table.types";
|
|
3
|
+
export interface TableContextValue {
|
|
4
|
+
size: RefraktorSize;
|
|
5
|
+
radius: RefraktorRadius;
|
|
6
|
+
striped: boolean;
|
|
7
|
+
highlightOnHover: boolean;
|
|
8
|
+
withRowBorders: boolean;
|
|
9
|
+
withColumnBorders: boolean;
|
|
10
|
+
getStyles: (part: keyof TableClassNames) => string | undefined;
|
|
11
|
+
}
|
|
12
|
+
export declare const TableProvider: ({ children, value }: {
|
|
13
|
+
children: React.ReactNode;
|
|
14
|
+
value: TableContextValue;
|
|
15
|
+
}) => import("react/jsx-runtime").JSX.Element, useTableContext: () => TableContextValue;
|
|
16
|
+
//# sourceMappingURL=table.context.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"table.context.d.ts","sourceRoot":"","sources":["../../../src/components/table/table.context.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAC7D,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAEhD,MAAM,WAAW,iBAAiB;IAC9B,IAAI,EAAE,aAAa,CAAC;IACpB,MAAM,EAAE,eAAe,CAAC;IACxB,OAAO,EAAE,OAAO,CAAC;IACjB,gBAAgB,EAAE,OAAO,CAAC;IAC1B,cAAc,EAAE,OAAO,CAAC;IACxB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,SAAS,EAAE,CAAC,IAAI,EAAE,MAAM,eAAe,KAAK,MAAM,GAAG,SAAS,CAAC;CAClE;AAED,eAAO,MAAO,aAAa;;;+CAAE,eAAe,yBAGvC,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../../../src/components/table/table.tsx"],"names":[],"mappings":"AAiBA,OAAO,EAAmB,mBAAmB,EAAc,MAAM,eAAe,CAAC;AAWjF,QAAA,MAAM,KAAK,yDAkDT,CAAC;AAYH,eAAe,KAAK,CAAC"}
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { useId } from "@refraktor/utils";
|
|
3
|
+
import { useCallback } from "react";
|
|
4
|
+
import { useTheme } from "../../theme";
|
|
5
|
+
import { createClassNamesConfig, createComponentConfig, factory, useClassNames, useProps } from "../../utils";
|
|
6
|
+
import { TableBody } from "./table-body";
|
|
7
|
+
import { TableCaption } from "./table-caption";
|
|
8
|
+
import { TableCell } from "./table-cell";
|
|
9
|
+
import { TableProvider } from "./table.context";
|
|
10
|
+
import { TableHead } from "./table-head";
|
|
11
|
+
import { TableHeaderCell } from "./table-header-cell";
|
|
12
|
+
import { TableRow } from "./table-row";
|
|
13
|
+
const defaultProps = {
|
|
14
|
+
size: "md",
|
|
15
|
+
radius: "default",
|
|
16
|
+
striped: false,
|
|
17
|
+
highlightOnHover: false,
|
|
18
|
+
withRowBorders: true,
|
|
19
|
+
withColumnBorders: false
|
|
20
|
+
};
|
|
21
|
+
const Table = factory((_props, ref) => {
|
|
22
|
+
const { cx, getRadius } = useTheme();
|
|
23
|
+
const { id, children, size, radius, striped, highlightOnHover, withRowBorders, withColumnBorders, className, classNames, ...props } = useProps("Table", defaultProps, _props);
|
|
24
|
+
const classes = useClassNames("Table", classNames);
|
|
25
|
+
const _id = useId(id);
|
|
26
|
+
const getStyles = useCallback((part) => classes[part], [classes]);
|
|
27
|
+
return (_jsx(TableProvider, { value: {
|
|
28
|
+
size,
|
|
29
|
+
radius,
|
|
30
|
+
striped,
|
|
31
|
+
highlightOnHover,
|
|
32
|
+
withRowBorders,
|
|
33
|
+
withColumnBorders,
|
|
34
|
+
getStyles
|
|
35
|
+
}, children: _jsx("table", { ref: ref, id: _id, className: cx("w-full border-collapse text-left text-[var(--refraktor-text)]", getRadius(radius), classes.root, className), ...props, children: children }) }));
|
|
36
|
+
});
|
|
37
|
+
Table.displayName = "@refraktor/core/Table";
|
|
38
|
+
Table.configure = createComponentConfig();
|
|
39
|
+
Table.classNames = createClassNamesConfig();
|
|
40
|
+
Table.Head = TableHead;
|
|
41
|
+
Table.Body = TableBody;
|
|
42
|
+
Table.Row = TableRow;
|
|
43
|
+
Table.HeaderCell = TableHeaderCell;
|
|
44
|
+
Table.Cell = TableCell;
|
|
45
|
+
Table.Caption = TableCaption;
|
|
46
|
+
export default Table;
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { RefraktorSize } from "../../theme";
|
|
2
|
+
type TableSizeStyles = {
|
|
3
|
+
headerCell: string;
|
|
4
|
+
cell: string;
|
|
5
|
+
caption: string;
|
|
6
|
+
};
|
|
7
|
+
type TableBodyStyleOptions = {
|
|
8
|
+
striped: boolean;
|
|
9
|
+
highlightOnHover: boolean;
|
|
10
|
+
withRowBorders: boolean;
|
|
11
|
+
};
|
|
12
|
+
export declare const getSize: (size?: RefraktorSize) => TableSizeStyles;
|
|
13
|
+
export declare const getColumnBorder: (withColumnBorders?: boolean) => "" | "border-r border-[var(--refraktor-border)] last:border-r-0";
|
|
14
|
+
export declare const getBodyStyles: ({ striped, highlightOnHover, withRowBorders }: TableBodyStyleOptions) => string;
|
|
15
|
+
export {};
|
|
16
|
+
//# sourceMappingURL=table.styles.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"table.styles.d.ts","sourceRoot":"","sources":["../../../src/components/table/table.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAE5C,KAAK,eAAe,GAAG;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,KAAK,qBAAqB,GAAG;IACzB,OAAO,EAAE,OAAO,CAAC;IACjB,gBAAgB,EAAE,OAAO,CAAC;IAC1B,cAAc,EAAE,OAAO,CAAC;CAC3B,CAAC;AA8BF,eAAO,MAAM,OAAO,GAAI,OAAM,aAAoB,oBAAgB,CAAC;AAEnE,eAAO,MAAM,eAAe,GAAI,2BAAyB,qEAG7C,CAAC;AAEb,eAAO,MAAM,aAAa,GAAI,+CAI3B,qBAAqB,WAQN,CAAC"}
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
const sizes = {
|
|
2
|
+
xs: {
|
|
3
|
+
headerCell: "px-2 py-1.5 text-xs",
|
|
4
|
+
cell: "px-2 py-1.5 text-xs",
|
|
5
|
+
caption: "text-xs"
|
|
6
|
+
},
|
|
7
|
+
sm: {
|
|
8
|
+
headerCell: "px-2.5 py-2 text-xs",
|
|
9
|
+
cell: "px-2.5 py-2 text-sm",
|
|
10
|
+
caption: "text-xs"
|
|
11
|
+
},
|
|
12
|
+
md: {
|
|
13
|
+
headerCell: "px-3 py-2.5 text-sm",
|
|
14
|
+
cell: "px-3 py-2.5 text-sm",
|
|
15
|
+
caption: "text-sm"
|
|
16
|
+
},
|
|
17
|
+
lg: {
|
|
18
|
+
headerCell: "px-3.5 py-3 text-base",
|
|
19
|
+
cell: "px-3.5 py-3 text-base",
|
|
20
|
+
caption: "text-base"
|
|
21
|
+
},
|
|
22
|
+
xl: {
|
|
23
|
+
headerCell: "px-4 py-3.5 text-lg",
|
|
24
|
+
cell: "px-4 py-3.5 text-lg",
|
|
25
|
+
caption: "text-lg"
|
|
26
|
+
}
|
|
27
|
+
};
|
|
28
|
+
export const getSize = (size = "md") => sizes[size];
|
|
29
|
+
export const getColumnBorder = (withColumnBorders = false) => withColumnBorders
|
|
30
|
+
? "border-r border-[var(--refraktor-border)] last:border-r-0"
|
|
31
|
+
: "";
|
|
32
|
+
export const getBodyStyles = ({ striped, highlightOnHover, withRowBorders }) => [
|
|
33
|
+
striped && "[&_tr:nth-child(odd)]:bg-[var(--refraktor-bg-subtle)]",
|
|
34
|
+
highlightOnHover && "[&_tr:hover]:bg-[var(--refraktor-bg-hover)]",
|
|
35
|
+
withRowBorders &&
|
|
36
|
+
"[&_tr]:border-b [&_tr]:border-[var(--refraktor-border)] [&_tr:last-child]:border-b-0"
|
|
37
|
+
]
|
|
38
|
+
.filter(Boolean)
|
|
39
|
+
.join(" ");
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"table.test.d.ts","sourceRoot":"","sources":["../../../src/components/table/table.test.tsx"],"names":[],"mappings":""}
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { createRef } from "react";
|
|
3
|
+
import { describe, expect, it } from "vitest";
|
|
4
|
+
import { render, screen } from "../../vitest";
|
|
5
|
+
import Table from "./table";
|
|
6
|
+
describe("@refraktor/core/Table", () => {
|
|
7
|
+
it("renders semantic table structure with subcomponents", async () => {
|
|
8
|
+
await render(_jsxs(Table, { children: [_jsx(Table.Caption, { children: "Users" }), _jsx(Table.Head, { children: _jsxs(Table.Row, { children: [_jsx(Table.HeaderCell, { children: "Name" }), _jsx(Table.HeaderCell, { children: "Email" })] }) }), _jsx(Table.Body, { children: _jsxs(Table.Row, { children: [_jsx(Table.Cell, { children: "Ada" }), _jsx(Table.Cell, { children: "ada@example.com" })] }) })] }));
|
|
9
|
+
expect(screen.getByRole("table")).toBeInTheDocument();
|
|
10
|
+
expect(screen.getByText("Users")).toBeInTheDocument();
|
|
11
|
+
expect(screen.getByRole("columnheader", { name: "Name" })).toBeInTheDocument();
|
|
12
|
+
expect(screen.getByRole("cell", { name: "Ada" })).toBeInTheDocument();
|
|
13
|
+
});
|
|
14
|
+
it("applies body behavior styles", async () => {
|
|
15
|
+
const { container } = await render(_jsxs(Table, { striped: true, highlightOnHover: true, withRowBorders: true, children: [_jsx(Table.Head, { children: _jsx(Table.Row, { children: _jsx(Table.HeaderCell, { children: "Name" }) }) }), _jsx(Table.Body, { children: _jsx(Table.Row, { children: _jsx(Table.Cell, { children: "Ada" }) }) })] }));
|
|
16
|
+
const body = container.querySelector("tbody");
|
|
17
|
+
expect(body.className).toContain("nth-child(odd)");
|
|
18
|
+
expect(body.className).toContain("[&_tr:hover]:bg-[var(--refraktor-bg-hover)]");
|
|
19
|
+
expect(body.className).toContain("[&_tr]:border-b");
|
|
20
|
+
});
|
|
21
|
+
it("applies column borders and size styles", async () => {
|
|
22
|
+
await render(_jsxs(Table, { withColumnBorders: true, size: "xl", children: [_jsx(Table.Head, { children: _jsx(Table.Row, { children: _jsx(Table.HeaderCell, { children: "Name" }) }) }), _jsx(Table.Body, { children: _jsx(Table.Row, { children: _jsx(Table.Cell, { children: "Ada" }) }) })] }));
|
|
23
|
+
const headerCell = screen.getByRole("columnheader", { name: "Name" });
|
|
24
|
+
const cell = screen.getByRole("cell", { name: "Ada" });
|
|
25
|
+
expect(headerCell.className).toContain("border-r");
|
|
26
|
+
expect(cell.className).toContain("border-r");
|
|
27
|
+
expect(cell.className).toContain("px-4");
|
|
28
|
+
});
|
|
29
|
+
it("supports root and slot class names", async () => {
|
|
30
|
+
const { container } = await render(_jsxs(Table, { className: "custom-root", classNames: {
|
|
31
|
+
head: "custom-head",
|
|
32
|
+
body: "custom-body",
|
|
33
|
+
row: "custom-row",
|
|
34
|
+
headerCell: "custom-header-cell",
|
|
35
|
+
cell: "custom-cell",
|
|
36
|
+
caption: "custom-caption"
|
|
37
|
+
}, children: [_jsx(Table.Caption, { children: "Users" }), _jsx(Table.Head, { children: _jsx(Table.Row, { children: _jsx(Table.HeaderCell, { children: "Name" }) }) }), _jsx(Table.Body, { children: _jsx(Table.Row, { children: _jsx(Table.Cell, { children: "Ada" }) }) })] }));
|
|
38
|
+
const root = container.firstElementChild;
|
|
39
|
+
const head = container.querySelector("thead");
|
|
40
|
+
const body = container.querySelector("tbody");
|
|
41
|
+
const row = screen.getAllByRole("row")[0];
|
|
42
|
+
const headerCell = screen.getByRole("columnheader", { name: "Name" });
|
|
43
|
+
const cell = screen.getByRole("cell", { name: "Ada" });
|
|
44
|
+
const caption = screen.getByText("Users");
|
|
45
|
+
expect(root).toHaveClass("custom-root");
|
|
46
|
+
expect(head).toHaveClass("custom-head");
|
|
47
|
+
expect(body).toHaveClass("custom-body");
|
|
48
|
+
expect(row).toHaveClass("custom-row");
|
|
49
|
+
expect(headerCell).toHaveClass("custom-header-cell");
|
|
50
|
+
expect(cell).toHaveClass("custom-cell");
|
|
51
|
+
expect(caption).toHaveClass("custom-caption");
|
|
52
|
+
});
|
|
53
|
+
it("forwards ref to table root", async () => {
|
|
54
|
+
const ref = createRef();
|
|
55
|
+
await render(_jsx(Table, { ref: ref, children: _jsx(Table.Body, { children: _jsx(Table.Row, { children: _jsx(Table.Cell, { children: "Ada" }) }) }) }));
|
|
56
|
+
expect(ref.current).toBeInstanceOf(HTMLTableElement);
|
|
57
|
+
expect(ref.current?.tagName).toBe("TABLE");
|
|
58
|
+
});
|
|
59
|
+
});
|
|
@@ -0,0 +1,113 @@
|
|
|
1
|
+
import { ComponentPropsWithoutRef, ReactNode } from "react";
|
|
2
|
+
import { RefraktorRadius, RefraktorSize } from "../../theme";
|
|
3
|
+
import { createClassNamesConfig, createComponentConfig, FactoryPayload } from "../../utils";
|
|
4
|
+
import { TableBody } from "./table-body";
|
|
5
|
+
import { TableCaption } from "./table-caption";
|
|
6
|
+
import { TableCell } from "./table-cell";
|
|
7
|
+
import { TableHead } from "./table-head";
|
|
8
|
+
import { TableHeaderCell } from "./table-header-cell";
|
|
9
|
+
import { TableRow } from "./table-row";
|
|
10
|
+
export type TableClassNames = {
|
|
11
|
+
root?: string;
|
|
12
|
+
head?: string;
|
|
13
|
+
body?: string;
|
|
14
|
+
row?: string;
|
|
15
|
+
headerCell?: string;
|
|
16
|
+
cell?: string;
|
|
17
|
+
caption?: string;
|
|
18
|
+
};
|
|
19
|
+
export interface TableProps extends ComponentPropsWithoutRef<"table"> {
|
|
20
|
+
/** Children containing table subcomponents */
|
|
21
|
+
children: ReactNode;
|
|
22
|
+
/** Shared table size @default `md` */
|
|
23
|
+
size?: RefraktorSize;
|
|
24
|
+
/** Shared table radius @default `default` */
|
|
25
|
+
radius?: RefraktorRadius;
|
|
26
|
+
/** Whether odd body rows are striped @default `false` */
|
|
27
|
+
striped?: boolean;
|
|
28
|
+
/** Whether body rows highlight on hover @default `false` */
|
|
29
|
+
highlightOnHover?: boolean;
|
|
30
|
+
/** Whether body rows have bottom border @default `true` */
|
|
31
|
+
withRowBorders?: boolean;
|
|
32
|
+
/** Whether cells have vertical separators @default `false` */
|
|
33
|
+
withColumnBorders?: boolean;
|
|
34
|
+
/** Used for editing root class name */
|
|
35
|
+
className?: string;
|
|
36
|
+
/** Used for styling different parts of the component */
|
|
37
|
+
classNames?: TableClassNames;
|
|
38
|
+
}
|
|
39
|
+
export interface TableHeadProps extends ComponentPropsWithoutRef<"thead"> {
|
|
40
|
+
/** Header content */
|
|
41
|
+
children: ReactNode;
|
|
42
|
+
/** Used for editing root class name */
|
|
43
|
+
className?: string;
|
|
44
|
+
}
|
|
45
|
+
export interface TableBodyProps extends ComponentPropsWithoutRef<"tbody"> {
|
|
46
|
+
/** Body content */
|
|
47
|
+
children: ReactNode;
|
|
48
|
+
/** Used for editing root class name */
|
|
49
|
+
className?: string;
|
|
50
|
+
}
|
|
51
|
+
export interface TableRowProps extends ComponentPropsWithoutRef<"tr"> {
|
|
52
|
+
/** Row content */
|
|
53
|
+
children: ReactNode;
|
|
54
|
+
/** Used for editing root class name */
|
|
55
|
+
className?: string;
|
|
56
|
+
}
|
|
57
|
+
export interface TableHeaderCellProps extends ComponentPropsWithoutRef<"th"> {
|
|
58
|
+
/** Header cell content */
|
|
59
|
+
children: ReactNode;
|
|
60
|
+
/** Used for editing root class name */
|
|
61
|
+
className?: string;
|
|
62
|
+
}
|
|
63
|
+
export interface TableCellProps extends ComponentPropsWithoutRef<"td"> {
|
|
64
|
+
/** Cell content */
|
|
65
|
+
children: ReactNode;
|
|
66
|
+
/** Used for editing root class name */
|
|
67
|
+
className?: string;
|
|
68
|
+
}
|
|
69
|
+
export interface TableCaptionProps extends ComponentPropsWithoutRef<"caption"> {
|
|
70
|
+
/** Caption content */
|
|
71
|
+
children?: ReactNode;
|
|
72
|
+
/** Used for editing root class name */
|
|
73
|
+
className?: string;
|
|
74
|
+
}
|
|
75
|
+
export interface TableFactoryPayload extends FactoryPayload {
|
|
76
|
+
props: TableProps;
|
|
77
|
+
ref: HTMLTableElement;
|
|
78
|
+
compound: {
|
|
79
|
+
configure: ReturnType<typeof createComponentConfig<TableProps>>;
|
|
80
|
+
classNames: ReturnType<typeof createClassNamesConfig<TableClassNames>>;
|
|
81
|
+
Head: typeof TableHead;
|
|
82
|
+
Body: typeof TableBody;
|
|
83
|
+
Row: typeof TableRow;
|
|
84
|
+
HeaderCell: typeof TableHeaderCell;
|
|
85
|
+
Cell: typeof TableCell;
|
|
86
|
+
Caption: typeof TableCaption;
|
|
87
|
+
};
|
|
88
|
+
}
|
|
89
|
+
export interface TableHeadFactoryPayload extends FactoryPayload {
|
|
90
|
+
props: TableHeadProps;
|
|
91
|
+
ref: HTMLTableSectionElement;
|
|
92
|
+
}
|
|
93
|
+
export interface TableBodyFactoryPayload extends FactoryPayload {
|
|
94
|
+
props: TableBodyProps;
|
|
95
|
+
ref: HTMLTableSectionElement;
|
|
96
|
+
}
|
|
97
|
+
export interface TableRowFactoryPayload extends FactoryPayload {
|
|
98
|
+
props: TableRowProps;
|
|
99
|
+
ref: HTMLTableRowElement;
|
|
100
|
+
}
|
|
101
|
+
export interface TableHeaderCellFactoryPayload extends FactoryPayload {
|
|
102
|
+
props: TableHeaderCellProps;
|
|
103
|
+
ref: HTMLTableCellElement;
|
|
104
|
+
}
|
|
105
|
+
export interface TableCellFactoryPayload extends FactoryPayload {
|
|
106
|
+
props: TableCellProps;
|
|
107
|
+
ref: HTMLTableCellElement;
|
|
108
|
+
}
|
|
109
|
+
export interface TableCaptionFactoryPayload extends FactoryPayload {
|
|
110
|
+
props: TableCaptionProps;
|
|
111
|
+
ref: HTMLTableCaptionElement;
|
|
112
|
+
}
|
|
113
|
+
//# sourceMappingURL=table.types.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"table.types.d.ts","sourceRoot":"","sources":["../../../src/components/table/table.types.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tabs-tab.d.ts","sourceRoot":"","sources":["../../../../src/components/tabs/tabs-tab/tabs-tab.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAC;AAEtD,QAAA,MAAM,OAAO,
|
|
1
|
+
{"version":3,"file":"tabs-tab.d.ts","sourceRoot":"","sources":["../../../../src/components/tabs/tabs-tab/tabs-tab.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAC;AAEtD,QAAA,MAAM,OAAO,8DAqMZ,CAAC;AAIF,eAAe,OAAO,CAAC"}
|