@karakuri-ui/react 0.2.4 → 0.3.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/README.md +5 -5
- package/dist/components/ui/accordion.d.mts +1 -10
- package/dist/components/ui/accordion.d.ts +1 -10
- package/dist/components/ui/accordion.js +2 -7
- package/dist/components/ui/accordion.js.map +1 -1
- package/dist/components/ui/accordion.mjs +2 -7
- package/dist/components/ui/accordion.mjs.map +1 -1
- package/dist/components/ui/alert.d.mts +3 -12
- package/dist/components/ui/alert.d.ts +3 -12
- package/dist/components/ui/alert.js +2 -8
- package/dist/components/ui/alert.js.map +1 -1
- package/dist/components/ui/alert.mjs +2 -7
- package/dist/components/ui/alert.mjs.map +1 -1
- package/dist/components/ui/avatar.d.mts +1 -10
- package/dist/components/ui/avatar.d.ts +1 -10
- package/dist/components/ui/avatar.js +3 -8
- package/dist/components/ui/avatar.js.map +1 -1
- package/dist/components/ui/avatar.mjs +3 -8
- package/dist/components/ui/avatar.mjs.map +1 -1
- package/dist/components/ui/breadcrumb.d.mts +1 -12
- package/dist/components/ui/breadcrumb.d.ts +1 -12
- package/dist/components/ui/breadcrumb.js +2 -10
- package/dist/components/ui/breadcrumb.js.map +1 -1
- package/dist/components/ui/breadcrumb.mjs +2 -10
- package/dist/components/ui/breadcrumb.mjs.map +1 -1
- package/dist/components/ui/card.d.mts +1 -18
- package/dist/components/ui/card.d.ts +1 -18
- package/dist/components/ui/card.js +2 -11
- package/dist/components/ui/card.js.map +1 -1
- package/dist/components/ui/card.mjs +2 -11
- package/dist/components/ui/card.mjs.map +1 -1
- package/dist/components/ui/chart.d.mts +2 -18
- package/dist/components/ui/chart.d.ts +2 -18
- package/dist/components/ui/chart.js +2 -17
- package/dist/components/ui/chart.js.map +1 -1
- package/dist/components/ui/chart.mjs +2 -16
- package/dist/components/ui/chart.mjs.map +1 -1
- package/dist/components/ui/drawer.d.mts +2 -17
- package/dist/components/ui/drawer.d.ts +2 -17
- package/dist/components/ui/drawer.js +1 -15
- package/dist/components/ui/drawer.js.map +1 -1
- package/dist/components/ui/drawer.mjs +1 -14
- package/dist/components/ui/drawer.mjs.map +1 -1
- package/dist/components/ui/dropdown.d.mts +1 -26
- package/dist/components/ui/dropdown.d.ts +1 -26
- package/dist/components/ui/dropdown.js +1 -16
- package/dist/components/ui/dropdown.js.map +1 -1
- package/dist/components/ui/dropdown.mjs +1 -16
- package/dist/components/ui/dropdown.mjs.map +1 -1
- package/dist/components/ui/field.d.mts +1 -8
- package/dist/components/ui/field.d.ts +1 -8
- package/dist/components/ui/field.js +2 -7
- package/dist/components/ui/field.js.map +1 -1
- package/dist/components/ui/field.mjs +2 -7
- package/dist/components/ui/field.mjs.map +1 -1
- package/dist/components/ui/index.d.mts +4 -4
- package/dist/components/ui/index.d.ts +4 -4
- package/dist/components/ui/index.js +0 -8
- package/dist/components/ui/index.js.map +1 -1
- package/dist/components/ui/index.mjs +4 -8
- package/dist/components/ui/index.mjs.map +1 -1
- package/dist/components/ui/metric-card.d.mts +1 -16
- package/dist/components/ui/metric-card.d.ts +1 -16
- package/dist/components/ui/metric-card.js +2 -10
- package/dist/components/ui/metric-card.js.map +1 -1
- package/dist/components/ui/metric-card.mjs +2 -10
- package/dist/components/ui/metric-card.mjs.map +1 -1
- package/dist/components/ui/modal.d.mts +2 -32
- package/dist/components/ui/modal.d.ts +2 -32
- package/dist/components/ui/modal.js +2 -27
- package/dist/components/ui/modal.js.map +1 -1
- package/dist/components/ui/modal.mjs +2 -27
- package/dist/components/ui/modal.mjs.map +1 -1
- package/dist/components/ui/navigation-menu.d.mts +1 -20
- package/dist/components/ui/navigation-menu.d.ts +1 -20
- package/dist/components/ui/navigation-menu.js +2 -12
- package/dist/components/ui/navigation-menu.js.map +1 -1
- package/dist/components/ui/navigation-menu.mjs +2 -12
- package/dist/components/ui/navigation-menu.mjs.map +1 -1
- package/dist/components/ui/pagination.d.mts +1 -18
- package/dist/components/ui/pagination.d.ts +1 -18
- package/dist/components/ui/pagination.js +2 -13
- package/dist/components/ui/pagination.js.map +1 -1
- package/dist/components/ui/pagination.mjs +2 -13
- package/dist/components/ui/pagination.mjs.map +1 -1
- package/dist/components/ui/popover.d.mts +3 -15
- package/dist/components/ui/popover.d.ts +3 -15
- package/dist/components/ui/popover.js +1 -11
- package/dist/components/ui/popover.js.map +1 -1
- package/dist/components/ui/popover.mjs +1 -10
- package/dist/components/ui/popover.mjs.map +1 -1
- package/dist/components/ui/radio-group.d.mts +1 -6
- package/dist/components/ui/radio-group.d.ts +1 -6
- package/dist/components/ui/radio-group.js +2 -5
- package/dist/components/ui/radio-group.js.map +1 -1
- package/dist/components/ui/radio-group.mjs +2 -5
- package/dist/components/ui/radio-group.mjs.map +1 -1
- package/dist/components/ui/segmented.d.mts +1 -6
- package/dist/components/ui/segmented.d.ts +1 -6
- package/dist/components/ui/segmented.js +2 -5
- package/dist/components/ui/segmented.js.map +1 -1
- package/dist/components/ui/segmented.mjs +2 -5
- package/dist/components/ui/segmented.mjs.map +1 -1
- package/dist/components/ui/select.d.mts +4 -15
- package/dist/components/ui/select.d.ts +4 -15
- package/dist/components/ui/select.js +5 -14
- package/dist/components/ui/select.js.map +1 -1
- package/dist/components/ui/select.mjs +5 -14
- package/dist/components/ui/select.mjs.map +1 -1
- package/dist/components/ui/table.d.mts +1 -15
- package/dist/components/ui/table.d.ts +1 -15
- package/dist/components/ui/table.js +2 -11
- package/dist/components/ui/table.js.map +1 -1
- package/dist/components/ui/table.mjs +2 -11
- package/dist/components/ui/table.mjs.map +1 -1
- package/dist/components/ui/tabs.d.mts +1 -10
- package/dist/components/ui/tabs.d.ts +1 -10
- package/dist/components/ui/tabs.js +1 -6
- package/dist/components/ui/tabs.js.map +1 -1
- package/dist/components/ui/tabs.mjs +1 -6
- package/dist/components/ui/tabs.mjs.map +1 -1
- package/dist/components/ui/toggle-group.d.mts +1 -6
- package/dist/components/ui/toggle-group.d.ts +1 -6
- package/dist/components/ui/toggle-group.js +2 -5
- package/dist/components/ui/toggle-group.js.map +1 -1
- package/dist/components/ui/toggle-group.mjs +2 -5
- package/dist/components/ui/toggle-group.mjs.map +1 -1
- package/dist/components/ui/tooltip.d.mts +3 -14
- package/dist/components/ui/tooltip.d.ts +3 -14
- package/dist/components/ui/tooltip.js +1 -10
- package/dist/components/ui/tooltip.js.map +1 -1
- package/dist/components/ui/tooltip.mjs +1 -9
- package/dist/components/ui/tooltip.mjs.map +1 -1
- package/dist/lib/code-generator.d.mts +60 -0
- package/dist/lib/code-generator.d.ts +60 -0
- package/dist/lib/code-generator.js +224 -0
- package/dist/lib/code-generator.js.map +1 -0
- package/dist/lib/code-generator.mjs +159 -0
- package/dist/lib/code-generator.mjs.map +1 -0
- package/package.json +4 -2
|
@@ -17,6 +17,7 @@ interface TableProps extends React.HTMLAttributes<HTMLTableElement>, VariantProp
|
|
|
17
17
|
/** Additional className for the scroll wrapper (e.g. max-h-[400px]) */
|
|
18
18
|
wrapperClassName?: string;
|
|
19
19
|
}
|
|
20
|
+
declare const Table: React.ForwardRefExoticComponent<TableProps & React.RefAttributes<HTMLTableElement>>;
|
|
20
21
|
declare const TableHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
|
|
21
22
|
declare const TableBody: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
|
|
22
23
|
declare const TableFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
|
|
@@ -56,19 +57,4 @@ interface TableCellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {
|
|
|
56
57
|
declare const TableCell: React.ForwardRefExoticComponent<TableCellProps & React.RefAttributes<HTMLTableCellElement>>;
|
|
57
58
|
declare const TableCaption: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableCaptionElement> & React.RefAttributes<HTMLTableCaptionElement>>;
|
|
58
59
|
|
|
59
|
-
declare const Table: React.ForwardRefExoticComponent<TableProps & React.RefAttributes<HTMLTableElement>> & {
|
|
60
|
-
Header: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
|
|
61
|
-
Body: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
|
|
62
|
-
Footer: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
|
|
63
|
-
Row: React.ForwardRefExoticComponent<TableRowProps & React.RefAttributes<HTMLTableRowElement>>;
|
|
64
|
-
Head: React.ForwardRefExoticComponent<TableHeadProps & React.RefAttributes<HTMLTableCellElement>>;
|
|
65
|
-
Cell: React.ForwardRefExoticComponent<TableCellProps & React.RefAttributes<HTMLTableCellElement>>;
|
|
66
|
-
Caption: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableCaptionElement> & React.RefAttributes<HTMLTableCaptionElement>>;
|
|
67
|
-
};
|
|
68
|
-
declare namespace Table {
|
|
69
|
-
type RowProps = TableRowProps;
|
|
70
|
-
type HeadProps = TableHeadProps;
|
|
71
|
-
type CellProps = TableCellProps;
|
|
72
|
-
}
|
|
73
|
-
|
|
74
60
|
export { type SortDirection, type SortIconSet, Table, TableBody, TableCaption, TableCell, type TableCellProps, TableFooter, TableHead, type TableHeadProps, TableHeader, type TableProps, TableRow, type TableRowProps, type TableSize, type TableVariant };
|
|
@@ -73,7 +73,7 @@ const tableVariants = (0, import_class_variance_authority.cva)(
|
|
|
73
73
|
}
|
|
74
74
|
}
|
|
75
75
|
);
|
|
76
|
-
const
|
|
76
|
+
const Table = React.forwardRef(
|
|
77
77
|
({ className, size = "default", variant = "default", stickyHeader = false, wrapperClassName, ...props }, ref) => /* @__PURE__ */ React.createElement(TableContext.Provider, { value: { size, variant, stickyHeader } }, /* @__PURE__ */ React.createElement("div", { className: (0, import_utils.cn)("relative w-full overflow-auto", wrapperClassName) }, /* @__PURE__ */ React.createElement(
|
|
78
78
|
"table",
|
|
79
79
|
{
|
|
@@ -83,7 +83,7 @@ const TableRoot = React.forwardRef(
|
|
|
83
83
|
}
|
|
84
84
|
)))
|
|
85
85
|
);
|
|
86
|
-
|
|
86
|
+
Table.displayName = "Table";
|
|
87
87
|
const TableHeader = React.forwardRef(({ className, ...props }, ref) => {
|
|
88
88
|
const { stickyHeader } = React.useContext(TableContext);
|
|
89
89
|
return /* @__PURE__ */ React.createElement(
|
|
@@ -217,15 +217,6 @@ const TableCaption = React.forwardRef(({ className, ...props }, ref) => /* @__PU
|
|
|
217
217
|
}
|
|
218
218
|
));
|
|
219
219
|
TableCaption.displayName = "TableCaption";
|
|
220
|
-
const Table = Object.assign(TableRoot, {
|
|
221
|
-
Header: TableHeader,
|
|
222
|
-
Body: TableBody,
|
|
223
|
-
Footer: TableFooter,
|
|
224
|
-
Row: TableRow,
|
|
225
|
-
Head: TableHead,
|
|
226
|
-
Cell: TableCell,
|
|
227
|
-
Caption: TableCaption
|
|
228
|
-
});
|
|
229
220
|
// Annotate the CommonJS export names for ESM import in node:
|
|
230
221
|
0 && (module.exports = {
|
|
231
222
|
Table,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/ui/table.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\n\n// Size variants for table density\ntype TableSize = 'sm' | 'default' | 'lg'\n\n// Visual style variants\ntype TableVariant = 'default' | 'bordered' | 'striped'\n\n// Root context — set at Root, consumed by children\nconst TableContext = React.createContext<{\n size: TableSize\n variant: TableVariant\n stickyHeader: boolean\n}>({ size: 'default', variant: 'default', stickyHeader: false })\n\n// Cell padding per size\nconst cellPaddingMap: Record<TableSize, string> = {\n sm: 'px-3 py-2 text-sm',\n default: 'px-4 py-3 text-sm',\n lg: 'px-6 py-4 text-base',\n}\n\n// Head cell padding per size\nconst headPaddingMap: Record<TableSize, string> = {\n sm: 'px-3 py-2 text-xs',\n default: 'px-4 py-3 text-xs',\n lg: 'px-6 py-3.5 text-sm',\n}\n\n// Checkbox column padding override per size (right padding removed — next column's left padding handles the gap)\nconst checkboxPaddingMap: Record<TableSize, string> = {\n sm: '[&:has([role=checkbox])]:pl-1 [&:has([role=checkbox])]:pr-0',\n default: '[&:has([role=checkbox])]:pl-2 [&:has([role=checkbox])]:pr-0',\n lg: '[&:has([role=checkbox])]:pl-3 [&:has([role=checkbox])]:pr-0',\n}\n\nconst tableVariants = cva(\n 'w-full caption-bottom text-sm',\n {\n variants: {\n variant: {\n default: '',\n bordered: 'border border-border',\n striped: '',\n },\n },\n defaultVariants: {\n variant: 'default',\n },\n }\n)\n\n// ─── Root ────────────────────────────────────────────────────────\nexport interface TableProps\n extends React.HTMLAttributes<HTMLTableElement>,\n VariantProps<typeof tableVariants> {\n /** Table density */\n size?: TableSize\n /** Visual style */\n variant?: TableVariant\n /** Sticky header when scrolling */\n stickyHeader?: boolean\n /** Additional className for the scroll wrapper (e.g. max-h-[400px]) */\n wrapperClassName?: string\n}\n\nconst TableRoot = React.forwardRef<HTMLTableElement, TableProps>(\n ({ className, size = 'default', variant = 'default', stickyHeader = false, wrapperClassName, ...props }, ref) => (\n <TableContext.Provider value={{ size, variant, stickyHeader }}>\n <div className={cn('relative w-full overflow-auto', wrapperClassName)}>\n <table\n ref={ref}\n className={cn(tableVariants({ variant }), className)}\n {...props}\n />\n </div>\n </TableContext.Provider>\n )\n)\nTableRoot.displayName = 'Table'\n\n// ─── Header ──────────────────────────────────────────────────────\nconst TableHeader = React.forwardRef<\n HTMLTableSectionElement,\n React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => {\n const { stickyHeader } = React.useContext(TableContext)\n return (\n <thead\n ref={ref}\n className={cn(\n '[&_tr]:border-b [&_tr]:border-border',\n stickyHeader && 'sticky top-0 z-10 bg-background',\n className\n )}\n {...props}\n />\n )\n})\nTableHeader.displayName = 'TableHeader'\n\n// ─── Body ────────────────────────────────────────────────────────\nconst TableBody = React.forwardRef<\n HTMLTableSectionElement,\n React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => {\n const { variant } = React.useContext(TableContext)\n return (\n <tbody\n ref={ref}\n className={cn(\n '[&_tr:last-child]:border-b-0',\n variant === 'striped' && '[&_tr:nth-child(even)]:bg-background-muted',\n className\n )}\n {...props}\n />\n )\n})\nTableBody.displayName = 'TableBody'\n\n// ─── Footer ──────────────────────────────────────────────────────\nconst TableFooter = React.forwardRef<\n HTMLTableSectionElement,\n React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n <tfoot\n ref={ref}\n className={cn(\n 'border-t border-border bg-background-muted/50 font-normal [&>tr]:last:border-b-0',\n className\n )}\n {...props}\n />\n))\nTableFooter.displayName = 'TableFooter'\n\n// ─── Row ─────────────────────────────────────────────────────────\nexport interface TableRowProps extends React.HTMLAttributes<HTMLTableRowElement> {\n /** Enable hover highlight */\n interactive?: boolean\n /** Selected state background */\n selected?: boolean\n}\n\nconst TableRow = React.forwardRef<HTMLTableRowElement, TableRowProps>(\n ({ className, interactive = false, selected = false, ...props }, ref) => (\n <tr\n ref={ref}\n data-selected={selected || undefined}\n className={cn(\n 'border-b border-border transition-colors duration-fast',\n interactive && 'hover:bg-background-muted/50 cursor-pointer',\n className\n )}\n {...props}\n />\n )\n)\nTableRow.displayName = 'TableRow'\n\n// ─── Head Cell ───────────────────────────────────────────────────\ntype SortDirection = 'asc' | 'desc' | null\n\n// Default sort icons\nconst defaultSortIcons = {\n asc: (\n <svg className=\"icon-xs\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" strokeWidth={2} aria-hidden=\"true\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M5 15l7-7 7 7\" />\n </svg>\n ),\n desc: (\n <svg className=\"icon-xs\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" strokeWidth={2} aria-hidden=\"true\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M19 9l-7 7-7-7\" />\n </svg>\n ),\n default: (\n <svg className=\"icon-xs\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" strokeWidth={2} aria-hidden=\"true\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4\" />\n </svg>\n ),\n}\n\nexport interface SortIconSet {\n /** Icon for ascending state */\n asc?: React.ReactNode\n /** Icon for descending state */\n desc?: React.ReactNode\n /** Icon for unsorted (default) state */\n default?: React.ReactNode\n}\n\nexport interface TableHeadProps extends React.ThHTMLAttributes<HTMLTableCellElement> {\n /** Text alignment */\n align?: 'left' | 'center' | 'right'\n /** Enable sort indicator */\n sortable?: boolean\n /** Current sort direction */\n sortDirection?: SortDirection\n /** Sort click handler */\n onSort?: () => void\n /** Custom sort icons (overrides built-in icons) */\n sortIcon?: SortIconSet\n}\n\nconst TableHead = React.forwardRef<HTMLTableCellElement, TableHeadProps>(\n ({ className, align = 'left', sortable = false, sortDirection = null, onSort, sortIcon, children, ...props }, ref) => {\n const { size } = React.useContext(TableContext)\n const icons = { ...defaultSortIcons, ...sortIcon }\n\n const content = sortable ? (\n <button\n type=\"button\"\n className=\"inline-flex items-center gap-1.5 hover:text-foreground transition-colors duration-fast group\"\n onClick={onSort}\n >\n {children}\n <span className={cn(\n 'shrink-0 transition-colors duration-fast',\n sortDirection ? 'text-foreground' : 'text-text-muted'\n )}>\n {sortDirection === 'asc' ? icons.asc\n : sortDirection === 'desc' ? icons.desc\n : icons.default}\n </span>\n </button>\n ) : children\n\n return (\n <th\n ref={ref}\n className={cn(\n 'text-left align-middle font-semibold text-text-muted whitespace-nowrap',\n headPaddingMap[size],\n checkboxPaddingMap[size],\n align === 'center' && 'text-center',\n align === 'right' && 'text-right',\n sortable && 'select-none',\n className\n )}\n aria-sort={sortDirection === 'asc' ? 'ascending' : sortDirection === 'desc' ? 'descending' : undefined}\n {...props}\n >\n {content}\n </th>\n )\n }\n)\nTableHead.displayName = 'TableHead'\n\n// ─── Data Cell ───────────────────────────────────────────────────\nexport interface TableCellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {\n /** Text alignment */\n align?: 'left' | 'center' | 'right'\n}\n\nconst TableCell = React.forwardRef<HTMLTableCellElement, TableCellProps>(\n ({ className, align = 'left', ...props }, ref) => {\n const { size } = React.useContext(TableContext)\n return (\n <td\n ref={ref}\n className={cn(\n 'text-foreground align-middle',\n cellPaddingMap[size],\n checkboxPaddingMap[size],\n align === 'center' && 'text-center',\n align === 'right' && 'text-right',\n className\n )}\n {...props}\n />\n )\n }\n)\nTableCell.displayName = 'TableCell'\n\n// ─── Caption ─────────────────────────────────────────────────────\nconst TableCaption = React.forwardRef<\n HTMLTableCaptionElement,\n React.HTMLAttributes<HTMLTableCaptionElement>\n>(({ className, ...props }, ref) => (\n <caption\n ref={ref}\n className={cn('mt-4 text-sm text-text-muted', className)}\n {...props}\n />\n))\nTableCaption.displayName = 'TableCaption'\n\nexport type { TableSize, TableVariant, SortDirection }\n\n// ─── Namespace ──────────────────────────────────────────\nconst Table = Object.assign(TableRoot, {\n Header: TableHeader,\n Body: TableBody,\n Footer: TableFooter,\n Row: TableRow,\n Head: TableHead,\n Cell: TableCell,\n Caption: TableCaption,\n})\n\n// eslint-disable-next-line @typescript-eslint/no-namespace\nnamespace Table {\n export type RowProps = TableRowProps\n export type HeadProps = TableHeadProps\n export type CellProps = TableCellProps\n}\n\nexport {\n Table,\n TableHeader,\n TableBody,\n TableFooter,\n TableRow,\n TableHead,\n TableCell,\n TableCaption,\n}\n"],"mappings":"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","names":[]}
|
|
1
|
+
{"version":3,"sources":["../../../src/components/ui/table.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\n\n// Size variants for table density\ntype TableSize = 'sm' | 'default' | 'lg'\n\n// Visual style variants\ntype TableVariant = 'default' | 'bordered' | 'striped'\n\n// Root context — set at Root, consumed by children\nconst TableContext = React.createContext<{\n size: TableSize\n variant: TableVariant\n stickyHeader: boolean\n}>({ size: 'default', variant: 'default', stickyHeader: false })\n\n// Cell padding per size\nconst cellPaddingMap: Record<TableSize, string> = {\n sm: 'px-3 py-2 text-sm',\n default: 'px-4 py-3 text-sm',\n lg: 'px-6 py-4 text-base',\n}\n\n// Head cell padding per size\nconst headPaddingMap: Record<TableSize, string> = {\n sm: 'px-3 py-2 text-xs',\n default: 'px-4 py-3 text-xs',\n lg: 'px-6 py-3.5 text-sm',\n}\n\n// Checkbox column padding override per size (right padding removed — next column's left padding handles the gap)\nconst checkboxPaddingMap: Record<TableSize, string> = {\n sm: '[&:has([role=checkbox])]:pl-1 [&:has([role=checkbox])]:pr-0',\n default: '[&:has([role=checkbox])]:pl-2 [&:has([role=checkbox])]:pr-0',\n lg: '[&:has([role=checkbox])]:pl-3 [&:has([role=checkbox])]:pr-0',\n}\n\nconst tableVariants = cva(\n 'w-full caption-bottom text-sm',\n {\n variants: {\n variant: {\n default: '',\n bordered: 'border border-border',\n striped: '',\n },\n },\n defaultVariants: {\n variant: 'default',\n },\n }\n)\n\n// ─── Root ────────────────────────────────────────────────────────\nexport interface TableProps\n extends React.HTMLAttributes<HTMLTableElement>,\n VariantProps<typeof tableVariants> {\n /** Table density */\n size?: TableSize\n /** Visual style */\n variant?: TableVariant\n /** Sticky header when scrolling */\n stickyHeader?: boolean\n /** Additional className for the scroll wrapper (e.g. max-h-[400px]) */\n wrapperClassName?: string\n}\n\nconst Table = React.forwardRef<HTMLTableElement, TableProps>(\n ({ className, size = 'default', variant = 'default', stickyHeader = false, wrapperClassName, ...props }, ref) => (\n <TableContext.Provider value={{ size, variant, stickyHeader }}>\n <div className={cn('relative w-full overflow-auto', wrapperClassName)}>\n <table\n ref={ref}\n className={cn(tableVariants({ variant }), className)}\n {...props}\n />\n </div>\n </TableContext.Provider>\n )\n)\nTable.displayName = 'Table'\n\n// ─── Header ──────────────────────────────────────────────────────\nconst TableHeader = React.forwardRef<\n HTMLTableSectionElement,\n React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => {\n const { stickyHeader } = React.useContext(TableContext)\n return (\n <thead\n ref={ref}\n className={cn(\n '[&_tr]:border-b [&_tr]:border-border',\n stickyHeader && 'sticky top-0 z-10 bg-background',\n className\n )}\n {...props}\n />\n )\n})\nTableHeader.displayName = 'TableHeader'\n\n// ─── Body ────────────────────────────────────────────────────────\nconst TableBody = React.forwardRef<\n HTMLTableSectionElement,\n React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => {\n const { variant } = React.useContext(TableContext)\n return (\n <tbody\n ref={ref}\n className={cn(\n '[&_tr:last-child]:border-b-0',\n variant === 'striped' && '[&_tr:nth-child(even)]:bg-background-muted',\n className\n )}\n {...props}\n />\n )\n})\nTableBody.displayName = 'TableBody'\n\n// ─── Footer ──────────────────────────────────────────────────────\nconst TableFooter = React.forwardRef<\n HTMLTableSectionElement,\n React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n <tfoot\n ref={ref}\n className={cn(\n 'border-t border-border bg-background-muted/50 font-normal [&>tr]:last:border-b-0',\n className\n )}\n {...props}\n />\n))\nTableFooter.displayName = 'TableFooter'\n\n// ─── Row ─────────────────────────────────────────────────────────\nexport interface TableRowProps extends React.HTMLAttributes<HTMLTableRowElement> {\n /** Enable hover highlight */\n interactive?: boolean\n /** Selected state background */\n selected?: boolean\n}\n\nconst TableRow = React.forwardRef<HTMLTableRowElement, TableRowProps>(\n ({ className, interactive = false, selected = false, ...props }, ref) => (\n <tr\n ref={ref}\n data-selected={selected || undefined}\n className={cn(\n 'border-b border-border transition-colors duration-fast',\n interactive && 'hover:bg-background-muted/50 cursor-pointer',\n className\n )}\n {...props}\n />\n )\n)\nTableRow.displayName = 'TableRow'\n\n// ─── Head Cell ───────────────────────────────────────────────────\ntype SortDirection = 'asc' | 'desc' | null\n\n// Default sort icons\nconst defaultSortIcons = {\n asc: (\n <svg className=\"icon-xs\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" strokeWidth={2} aria-hidden=\"true\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M5 15l7-7 7 7\" />\n </svg>\n ),\n desc: (\n <svg className=\"icon-xs\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" strokeWidth={2} aria-hidden=\"true\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M19 9l-7 7-7-7\" />\n </svg>\n ),\n default: (\n <svg className=\"icon-xs\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" strokeWidth={2} aria-hidden=\"true\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4\" />\n </svg>\n ),\n}\n\nexport interface SortIconSet {\n /** Icon for ascending state */\n asc?: React.ReactNode\n /** Icon for descending state */\n desc?: React.ReactNode\n /** Icon for unsorted (default) state */\n default?: React.ReactNode\n}\n\nexport interface TableHeadProps extends React.ThHTMLAttributes<HTMLTableCellElement> {\n /** Text alignment */\n align?: 'left' | 'center' | 'right'\n /** Enable sort indicator */\n sortable?: boolean\n /** Current sort direction */\n sortDirection?: SortDirection\n /** Sort click handler */\n onSort?: () => void\n /** Custom sort icons (overrides built-in icons) */\n sortIcon?: SortIconSet\n}\n\nconst TableHead = React.forwardRef<HTMLTableCellElement, TableHeadProps>(\n ({ className, align = 'left', sortable = false, sortDirection = null, onSort, sortIcon, children, ...props }, ref) => {\n const { size } = React.useContext(TableContext)\n const icons = { ...defaultSortIcons, ...sortIcon }\n\n const content = sortable ? (\n <button\n type=\"button\"\n className=\"inline-flex items-center gap-1.5 hover:text-foreground transition-colors duration-fast group\"\n onClick={onSort}\n >\n {children}\n <span className={cn(\n 'shrink-0 transition-colors duration-fast',\n sortDirection ? 'text-foreground' : 'text-text-muted'\n )}>\n {sortDirection === 'asc' ? icons.asc\n : sortDirection === 'desc' ? icons.desc\n : icons.default}\n </span>\n </button>\n ) : children\n\n return (\n <th\n ref={ref}\n className={cn(\n 'text-left align-middle font-semibold text-text-muted whitespace-nowrap',\n headPaddingMap[size],\n checkboxPaddingMap[size],\n align === 'center' && 'text-center',\n align === 'right' && 'text-right',\n sortable && 'select-none',\n className\n )}\n aria-sort={sortDirection === 'asc' ? 'ascending' : sortDirection === 'desc' ? 'descending' : undefined}\n {...props}\n >\n {content}\n </th>\n )\n }\n)\nTableHead.displayName = 'TableHead'\n\n// ─── Data Cell ───────────────────────────────────────────────────\nexport interface TableCellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {\n /** Text alignment */\n align?: 'left' | 'center' | 'right'\n}\n\nconst TableCell = React.forwardRef<HTMLTableCellElement, TableCellProps>(\n ({ className, align = 'left', ...props }, ref) => {\n const { size } = React.useContext(TableContext)\n return (\n <td\n ref={ref}\n className={cn(\n 'text-foreground align-middle',\n cellPaddingMap[size],\n checkboxPaddingMap[size],\n align === 'center' && 'text-center',\n align === 'right' && 'text-right',\n className\n )}\n {...props}\n />\n )\n }\n)\nTableCell.displayName = 'TableCell'\n\n// ─── Caption ─────────────────────────────────────────────────────\nconst TableCaption = React.forwardRef<\n HTMLTableCaptionElement,\n React.HTMLAttributes<HTMLTableCaptionElement>\n>(({ className, ...props }, ref) => (\n <caption\n ref={ref}\n className={cn('mt-4 text-sm text-text-muted', className)}\n {...props}\n />\n))\nTableCaption.displayName = 'TableCaption'\n\nexport type { TableSize, TableVariant, SortDirection }\n\nexport {\n Table,\n TableHeader,\n TableBody,\n TableFooter,\n TableRow,\n TableHead,\n TableCell,\n TableCaption,\n}\n"],"mappings":"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","names":[]}
|
|
@@ -33,7 +33,7 @@ const tableVariants = cva(
|
|
|
33
33
|
}
|
|
34
34
|
}
|
|
35
35
|
);
|
|
36
|
-
const
|
|
36
|
+
const Table = React.forwardRef(
|
|
37
37
|
({ className, size = "default", variant = "default", stickyHeader = false, wrapperClassName, ...props }, ref) => /* @__PURE__ */ React.createElement(TableContext.Provider, { value: { size, variant, stickyHeader } }, /* @__PURE__ */ React.createElement("div", { className: cn("relative w-full overflow-auto", wrapperClassName) }, /* @__PURE__ */ React.createElement(
|
|
38
38
|
"table",
|
|
39
39
|
{
|
|
@@ -43,7 +43,7 @@ const TableRoot = React.forwardRef(
|
|
|
43
43
|
}
|
|
44
44
|
)))
|
|
45
45
|
);
|
|
46
|
-
|
|
46
|
+
Table.displayName = "Table";
|
|
47
47
|
const TableHeader = React.forwardRef(({ className, ...props }, ref) => {
|
|
48
48
|
const { stickyHeader } = React.useContext(TableContext);
|
|
49
49
|
return /* @__PURE__ */ React.createElement(
|
|
@@ -177,15 +177,6 @@ const TableCaption = React.forwardRef(({ className, ...props }, ref) => /* @__PU
|
|
|
177
177
|
}
|
|
178
178
|
));
|
|
179
179
|
TableCaption.displayName = "TableCaption";
|
|
180
|
-
const Table = Object.assign(TableRoot, {
|
|
181
|
-
Header: TableHeader,
|
|
182
|
-
Body: TableBody,
|
|
183
|
-
Footer: TableFooter,
|
|
184
|
-
Row: TableRow,
|
|
185
|
-
Head: TableHead,
|
|
186
|
-
Cell: TableCell,
|
|
187
|
-
Caption: TableCaption
|
|
188
|
-
});
|
|
189
180
|
export {
|
|
190
181
|
Table,
|
|
191
182
|
TableBody,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/ui/table.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\n\n// Size variants for table density\ntype TableSize = 'sm' | 'default' | 'lg'\n\n// Visual style variants\ntype TableVariant = 'default' | 'bordered' | 'striped'\n\n// Root context — set at Root, consumed by children\nconst TableContext = React.createContext<{\n size: TableSize\n variant: TableVariant\n stickyHeader: boolean\n}>({ size: 'default', variant: 'default', stickyHeader: false })\n\n// Cell padding per size\nconst cellPaddingMap: Record<TableSize, string> = {\n sm: 'px-3 py-2 text-sm',\n default: 'px-4 py-3 text-sm',\n lg: 'px-6 py-4 text-base',\n}\n\n// Head cell padding per size\nconst headPaddingMap: Record<TableSize, string> = {\n sm: 'px-3 py-2 text-xs',\n default: 'px-4 py-3 text-xs',\n lg: 'px-6 py-3.5 text-sm',\n}\n\n// Checkbox column padding override per size (right padding removed — next column's left padding handles the gap)\nconst checkboxPaddingMap: Record<TableSize, string> = {\n sm: '[&:has([role=checkbox])]:pl-1 [&:has([role=checkbox])]:pr-0',\n default: '[&:has([role=checkbox])]:pl-2 [&:has([role=checkbox])]:pr-0',\n lg: '[&:has([role=checkbox])]:pl-3 [&:has([role=checkbox])]:pr-0',\n}\n\nconst tableVariants = cva(\n 'w-full caption-bottom text-sm',\n {\n variants: {\n variant: {\n default: '',\n bordered: 'border border-border',\n striped: '',\n },\n },\n defaultVariants: {\n variant: 'default',\n },\n }\n)\n\n// ─── Root ────────────────────────────────────────────────────────\nexport interface TableProps\n extends React.HTMLAttributes<HTMLTableElement>,\n VariantProps<typeof tableVariants> {\n /** Table density */\n size?: TableSize\n /** Visual style */\n variant?: TableVariant\n /** Sticky header when scrolling */\n stickyHeader?: boolean\n /** Additional className for the scroll wrapper (e.g. max-h-[400px]) */\n wrapperClassName?: string\n}\n\nconst TableRoot = React.forwardRef<HTMLTableElement, TableProps>(\n ({ className, size = 'default', variant = 'default', stickyHeader = false, wrapperClassName, ...props }, ref) => (\n <TableContext.Provider value={{ size, variant, stickyHeader }}>\n <div className={cn('relative w-full overflow-auto', wrapperClassName)}>\n <table\n ref={ref}\n className={cn(tableVariants({ variant }), className)}\n {...props}\n />\n </div>\n </TableContext.Provider>\n )\n)\nTableRoot.displayName = 'Table'\n\n// ─── Header ──────────────────────────────────────────────────────\nconst TableHeader = React.forwardRef<\n HTMLTableSectionElement,\n React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => {\n const { stickyHeader } = React.useContext(TableContext)\n return (\n <thead\n ref={ref}\n className={cn(\n '[&_tr]:border-b [&_tr]:border-border',\n stickyHeader && 'sticky top-0 z-10 bg-background',\n className\n )}\n {...props}\n />\n )\n})\nTableHeader.displayName = 'TableHeader'\n\n// ─── Body ────────────────────────────────────────────────────────\nconst TableBody = React.forwardRef<\n HTMLTableSectionElement,\n React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => {\n const { variant } = React.useContext(TableContext)\n return (\n <tbody\n ref={ref}\n className={cn(\n '[&_tr:last-child]:border-b-0',\n variant === 'striped' && '[&_tr:nth-child(even)]:bg-background-muted',\n className\n )}\n {...props}\n />\n )\n})\nTableBody.displayName = 'TableBody'\n\n// ─── Footer ──────────────────────────────────────────────────────\nconst TableFooter = React.forwardRef<\n HTMLTableSectionElement,\n React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n <tfoot\n ref={ref}\n className={cn(\n 'border-t border-border bg-background-muted/50 font-normal [&>tr]:last:border-b-0',\n className\n )}\n {...props}\n />\n))\nTableFooter.displayName = 'TableFooter'\n\n// ─── Row ─────────────────────────────────────────────────────────\nexport interface TableRowProps extends React.HTMLAttributes<HTMLTableRowElement> {\n /** Enable hover highlight */\n interactive?: boolean\n /** Selected state background */\n selected?: boolean\n}\n\nconst TableRow = React.forwardRef<HTMLTableRowElement, TableRowProps>(\n ({ className, interactive = false, selected = false, ...props }, ref) => (\n <tr\n ref={ref}\n data-selected={selected || undefined}\n className={cn(\n 'border-b border-border transition-colors duration-fast',\n interactive && 'hover:bg-background-muted/50 cursor-pointer',\n className\n )}\n {...props}\n />\n )\n)\nTableRow.displayName = 'TableRow'\n\n// ─── Head Cell ───────────────────────────────────────────────────\ntype SortDirection = 'asc' | 'desc' | null\n\n// Default sort icons\nconst defaultSortIcons = {\n asc: (\n <svg className=\"icon-xs\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" strokeWidth={2} aria-hidden=\"true\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M5 15l7-7 7 7\" />\n </svg>\n ),\n desc: (\n <svg className=\"icon-xs\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" strokeWidth={2} aria-hidden=\"true\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M19 9l-7 7-7-7\" />\n </svg>\n ),\n default: (\n <svg className=\"icon-xs\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" strokeWidth={2} aria-hidden=\"true\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4\" />\n </svg>\n ),\n}\n\nexport interface SortIconSet {\n /** Icon for ascending state */\n asc?: React.ReactNode\n /** Icon for descending state */\n desc?: React.ReactNode\n /** Icon for unsorted (default) state */\n default?: React.ReactNode\n}\n\nexport interface TableHeadProps extends React.ThHTMLAttributes<HTMLTableCellElement> {\n /** Text alignment */\n align?: 'left' | 'center' | 'right'\n /** Enable sort indicator */\n sortable?: boolean\n /** Current sort direction */\n sortDirection?: SortDirection\n /** Sort click handler */\n onSort?: () => void\n /** Custom sort icons (overrides built-in icons) */\n sortIcon?: SortIconSet\n}\n\nconst TableHead = React.forwardRef<HTMLTableCellElement, TableHeadProps>(\n ({ className, align = 'left', sortable = false, sortDirection = null, onSort, sortIcon, children, ...props }, ref) => {\n const { size } = React.useContext(TableContext)\n const icons = { ...defaultSortIcons, ...sortIcon }\n\n const content = sortable ? (\n <button\n type=\"button\"\n className=\"inline-flex items-center gap-1.5 hover:text-foreground transition-colors duration-fast group\"\n onClick={onSort}\n >\n {children}\n <span className={cn(\n 'shrink-0 transition-colors duration-fast',\n sortDirection ? 'text-foreground' : 'text-text-muted'\n )}>\n {sortDirection === 'asc' ? icons.asc\n : sortDirection === 'desc' ? icons.desc\n : icons.default}\n </span>\n </button>\n ) : children\n\n return (\n <th\n ref={ref}\n className={cn(\n 'text-left align-middle font-semibold text-text-muted whitespace-nowrap',\n headPaddingMap[size],\n checkboxPaddingMap[size],\n align === 'center' && 'text-center',\n align === 'right' && 'text-right',\n sortable && 'select-none',\n className\n )}\n aria-sort={sortDirection === 'asc' ? 'ascending' : sortDirection === 'desc' ? 'descending' : undefined}\n {...props}\n >\n {content}\n </th>\n )\n }\n)\nTableHead.displayName = 'TableHead'\n\n// ─── Data Cell ───────────────────────────────────────────────────\nexport interface TableCellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {\n /** Text alignment */\n align?: 'left' | 'center' | 'right'\n}\n\nconst TableCell = React.forwardRef<HTMLTableCellElement, TableCellProps>(\n ({ className, align = 'left', ...props }, ref) => {\n const { size } = React.useContext(TableContext)\n return (\n <td\n ref={ref}\n className={cn(\n 'text-foreground align-middle',\n cellPaddingMap[size],\n checkboxPaddingMap[size],\n align === 'center' && 'text-center',\n align === 'right' && 'text-right',\n className\n )}\n {...props}\n />\n )\n }\n)\nTableCell.displayName = 'TableCell'\n\n// ─── Caption ─────────────────────────────────────────────────────\nconst TableCaption = React.forwardRef<\n HTMLTableCaptionElement,\n React.HTMLAttributes<HTMLTableCaptionElement>\n>(({ className, ...props }, ref) => (\n <caption\n ref={ref}\n className={cn('mt-4 text-sm text-text-muted', className)}\n {...props}\n />\n))\nTableCaption.displayName = 'TableCaption'\n\nexport type { TableSize, TableVariant, SortDirection }\n\n// ─── Namespace ──────────────────────────────────────────\nconst Table = Object.assign(TableRoot, {\n Header: TableHeader,\n Body: TableBody,\n Footer: TableFooter,\n Row: TableRow,\n Head: TableHead,\n Cell: TableCell,\n Caption: TableCaption,\n})\n\n// eslint-disable-next-line @typescript-eslint/no-namespace\nnamespace Table {\n export type RowProps = TableRowProps\n export type HeadProps = TableHeadProps\n export type CellProps = TableCellProps\n}\n\nexport {\n Table,\n TableHeader,\n TableBody,\n TableFooter,\n TableRow,\n TableHead,\n TableCell,\n TableCaption,\n}\n"],"mappings":"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","names":[]}
|
|
1
|
+
{"version":3,"sources":["../../../src/components/ui/table.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\n\n// Size variants for table density\ntype TableSize = 'sm' | 'default' | 'lg'\n\n// Visual style variants\ntype TableVariant = 'default' | 'bordered' | 'striped'\n\n// Root context — set at Root, consumed by children\nconst TableContext = React.createContext<{\n size: TableSize\n variant: TableVariant\n stickyHeader: boolean\n}>({ size: 'default', variant: 'default', stickyHeader: false })\n\n// Cell padding per size\nconst cellPaddingMap: Record<TableSize, string> = {\n sm: 'px-3 py-2 text-sm',\n default: 'px-4 py-3 text-sm',\n lg: 'px-6 py-4 text-base',\n}\n\n// Head cell padding per size\nconst headPaddingMap: Record<TableSize, string> = {\n sm: 'px-3 py-2 text-xs',\n default: 'px-4 py-3 text-xs',\n lg: 'px-6 py-3.5 text-sm',\n}\n\n// Checkbox column padding override per size (right padding removed — next column's left padding handles the gap)\nconst checkboxPaddingMap: Record<TableSize, string> = {\n sm: '[&:has([role=checkbox])]:pl-1 [&:has([role=checkbox])]:pr-0',\n default: '[&:has([role=checkbox])]:pl-2 [&:has([role=checkbox])]:pr-0',\n lg: '[&:has([role=checkbox])]:pl-3 [&:has([role=checkbox])]:pr-0',\n}\n\nconst tableVariants = cva(\n 'w-full caption-bottom text-sm',\n {\n variants: {\n variant: {\n default: '',\n bordered: 'border border-border',\n striped: '',\n },\n },\n defaultVariants: {\n variant: 'default',\n },\n }\n)\n\n// ─── Root ────────────────────────────────────────────────────────\nexport interface TableProps\n extends React.HTMLAttributes<HTMLTableElement>,\n VariantProps<typeof tableVariants> {\n /** Table density */\n size?: TableSize\n /** Visual style */\n variant?: TableVariant\n /** Sticky header when scrolling */\n stickyHeader?: boolean\n /** Additional className for the scroll wrapper (e.g. max-h-[400px]) */\n wrapperClassName?: string\n}\n\nconst Table = React.forwardRef<HTMLTableElement, TableProps>(\n ({ className, size = 'default', variant = 'default', stickyHeader = false, wrapperClassName, ...props }, ref) => (\n <TableContext.Provider value={{ size, variant, stickyHeader }}>\n <div className={cn('relative w-full overflow-auto', wrapperClassName)}>\n <table\n ref={ref}\n className={cn(tableVariants({ variant }), className)}\n {...props}\n />\n </div>\n </TableContext.Provider>\n )\n)\nTable.displayName = 'Table'\n\n// ─── Header ──────────────────────────────────────────────────────\nconst TableHeader = React.forwardRef<\n HTMLTableSectionElement,\n React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => {\n const { stickyHeader } = React.useContext(TableContext)\n return (\n <thead\n ref={ref}\n className={cn(\n '[&_tr]:border-b [&_tr]:border-border',\n stickyHeader && 'sticky top-0 z-10 bg-background',\n className\n )}\n {...props}\n />\n )\n})\nTableHeader.displayName = 'TableHeader'\n\n// ─── Body ────────────────────────────────────────────────────────\nconst TableBody = React.forwardRef<\n HTMLTableSectionElement,\n React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => {\n const { variant } = React.useContext(TableContext)\n return (\n <tbody\n ref={ref}\n className={cn(\n '[&_tr:last-child]:border-b-0',\n variant === 'striped' && '[&_tr:nth-child(even)]:bg-background-muted',\n className\n )}\n {...props}\n />\n )\n})\nTableBody.displayName = 'TableBody'\n\n// ─── Footer ──────────────────────────────────────────────────────\nconst TableFooter = React.forwardRef<\n HTMLTableSectionElement,\n React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n <tfoot\n ref={ref}\n className={cn(\n 'border-t border-border bg-background-muted/50 font-normal [&>tr]:last:border-b-0',\n className\n )}\n {...props}\n />\n))\nTableFooter.displayName = 'TableFooter'\n\n// ─── Row ─────────────────────────────────────────────────────────\nexport interface TableRowProps extends React.HTMLAttributes<HTMLTableRowElement> {\n /** Enable hover highlight */\n interactive?: boolean\n /** Selected state background */\n selected?: boolean\n}\n\nconst TableRow = React.forwardRef<HTMLTableRowElement, TableRowProps>(\n ({ className, interactive = false, selected = false, ...props }, ref) => (\n <tr\n ref={ref}\n data-selected={selected || undefined}\n className={cn(\n 'border-b border-border transition-colors duration-fast',\n interactive && 'hover:bg-background-muted/50 cursor-pointer',\n className\n )}\n {...props}\n />\n )\n)\nTableRow.displayName = 'TableRow'\n\n// ─── Head Cell ───────────────────────────────────────────────────\ntype SortDirection = 'asc' | 'desc' | null\n\n// Default sort icons\nconst defaultSortIcons = {\n asc: (\n <svg className=\"icon-xs\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" strokeWidth={2} aria-hidden=\"true\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M5 15l7-7 7 7\" />\n </svg>\n ),\n desc: (\n <svg className=\"icon-xs\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" strokeWidth={2} aria-hidden=\"true\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M19 9l-7 7-7-7\" />\n </svg>\n ),\n default: (\n <svg className=\"icon-xs\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" strokeWidth={2} aria-hidden=\"true\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4\" />\n </svg>\n ),\n}\n\nexport interface SortIconSet {\n /** Icon for ascending state */\n asc?: React.ReactNode\n /** Icon for descending state */\n desc?: React.ReactNode\n /** Icon for unsorted (default) state */\n default?: React.ReactNode\n}\n\nexport interface TableHeadProps extends React.ThHTMLAttributes<HTMLTableCellElement> {\n /** Text alignment */\n align?: 'left' | 'center' | 'right'\n /** Enable sort indicator */\n sortable?: boolean\n /** Current sort direction */\n sortDirection?: SortDirection\n /** Sort click handler */\n onSort?: () => void\n /** Custom sort icons (overrides built-in icons) */\n sortIcon?: SortIconSet\n}\n\nconst TableHead = React.forwardRef<HTMLTableCellElement, TableHeadProps>(\n ({ className, align = 'left', sortable = false, sortDirection = null, onSort, sortIcon, children, ...props }, ref) => {\n const { size } = React.useContext(TableContext)\n const icons = { ...defaultSortIcons, ...sortIcon }\n\n const content = sortable ? (\n <button\n type=\"button\"\n className=\"inline-flex items-center gap-1.5 hover:text-foreground transition-colors duration-fast group\"\n onClick={onSort}\n >\n {children}\n <span className={cn(\n 'shrink-0 transition-colors duration-fast',\n sortDirection ? 'text-foreground' : 'text-text-muted'\n )}>\n {sortDirection === 'asc' ? icons.asc\n : sortDirection === 'desc' ? icons.desc\n : icons.default}\n </span>\n </button>\n ) : children\n\n return (\n <th\n ref={ref}\n className={cn(\n 'text-left align-middle font-semibold text-text-muted whitespace-nowrap',\n headPaddingMap[size],\n checkboxPaddingMap[size],\n align === 'center' && 'text-center',\n align === 'right' && 'text-right',\n sortable && 'select-none',\n className\n )}\n aria-sort={sortDirection === 'asc' ? 'ascending' : sortDirection === 'desc' ? 'descending' : undefined}\n {...props}\n >\n {content}\n </th>\n )\n }\n)\nTableHead.displayName = 'TableHead'\n\n// ─── Data Cell ───────────────────────────────────────────────────\nexport interface TableCellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {\n /** Text alignment */\n align?: 'left' | 'center' | 'right'\n}\n\nconst TableCell = React.forwardRef<HTMLTableCellElement, TableCellProps>(\n ({ className, align = 'left', ...props }, ref) => {\n const { size } = React.useContext(TableContext)\n return (\n <td\n ref={ref}\n className={cn(\n 'text-foreground align-middle',\n cellPaddingMap[size],\n checkboxPaddingMap[size],\n align === 'center' && 'text-center',\n align === 'right' && 'text-right',\n className\n )}\n {...props}\n />\n )\n }\n)\nTableCell.displayName = 'TableCell'\n\n// ─── Caption ─────────────────────────────────────────────────────\nconst TableCaption = React.forwardRef<\n HTMLTableCaptionElement,\n React.HTMLAttributes<HTMLTableCaptionElement>\n>(({ className, ...props }, ref) => (\n <caption\n ref={ref}\n className={cn('mt-4 text-sm text-text-muted', className)}\n {...props}\n />\n))\nTableCaption.displayName = 'TableCaption'\n\nexport type { TableSize, TableVariant, SortDirection }\n\nexport {\n Table,\n TableHeader,\n TableBody,\n TableFooter,\n TableRow,\n TableHead,\n TableCell,\n TableCaption,\n}\n"],"mappings":"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","names":[]}
|
|
@@ -26,15 +26,6 @@ declare const TabsTrigger: React.ForwardRefExoticComponent<TabsTriggerProps & Re
|
|
|
26
26
|
interface TabsContentProps extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content> {
|
|
27
27
|
}
|
|
28
28
|
declare const TabsContent: React.ForwardRefExoticComponent<TabsContentProps & React.RefAttributes<HTMLDivElement>>;
|
|
29
|
-
declare const Tabs: React.ForwardRefExoticComponent<TabsPrimitive.TabsProps & React.RefAttributes<HTMLDivElement
|
|
30
|
-
List: React.ForwardRefExoticComponent<TabsListProps & React.RefAttributes<HTMLDivElement>>;
|
|
31
|
-
Trigger: React.ForwardRefExoticComponent<TabsTriggerProps & React.RefAttributes<HTMLButtonElement>>;
|
|
32
|
-
Content: React.ForwardRefExoticComponent<TabsContentProps & React.RefAttributes<HTMLDivElement>>;
|
|
33
|
-
};
|
|
34
|
-
declare namespace Tabs {
|
|
35
|
-
type ListProps = TabsListProps;
|
|
36
|
-
type TriggerProps = TabsTriggerProps;
|
|
37
|
-
type ContentProps = TabsContentProps;
|
|
38
|
-
}
|
|
29
|
+
declare const Tabs: React.ForwardRefExoticComponent<TabsPrimitive.TabsProps & React.RefAttributes<HTMLDivElement>>;
|
|
39
30
|
|
|
40
31
|
export { Tabs, TabsContent, type TabsContentProps, TabsList, type TabsListProps, TabsTrigger, type TabsTriggerProps, tabsListVariants, tabsTriggerVariants };
|
|
@@ -26,15 +26,6 @@ declare const TabsTrigger: React.ForwardRefExoticComponent<TabsTriggerProps & Re
|
|
|
26
26
|
interface TabsContentProps extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content> {
|
|
27
27
|
}
|
|
28
28
|
declare const TabsContent: React.ForwardRefExoticComponent<TabsContentProps & React.RefAttributes<HTMLDivElement>>;
|
|
29
|
-
declare const Tabs: React.ForwardRefExoticComponent<TabsPrimitive.TabsProps & React.RefAttributes<HTMLDivElement
|
|
30
|
-
List: React.ForwardRefExoticComponent<TabsListProps & React.RefAttributes<HTMLDivElement>>;
|
|
31
|
-
Trigger: React.ForwardRefExoticComponent<TabsTriggerProps & React.RefAttributes<HTMLButtonElement>>;
|
|
32
|
-
Content: React.ForwardRefExoticComponent<TabsContentProps & React.RefAttributes<HTMLDivElement>>;
|
|
33
|
-
};
|
|
34
|
-
declare namespace Tabs {
|
|
35
|
-
type ListProps = TabsListProps;
|
|
36
|
-
type TriggerProps = TabsTriggerProps;
|
|
37
|
-
type ContentProps = TabsContentProps;
|
|
38
|
-
}
|
|
29
|
+
declare const Tabs: React.ForwardRefExoticComponent<TabsPrimitive.TabsProps & React.RefAttributes<HTMLDivElement>>;
|
|
39
30
|
|
|
40
31
|
export { Tabs, TabsContent, type TabsContentProps, TabsList, type TabsListProps, TabsTrigger, type TabsTriggerProps, tabsListVariants, tabsTriggerVariants };
|
|
@@ -220,12 +220,7 @@ const TabsContent = React.forwardRef(({ className, ...props }, ref) => /* @__PUR
|
|
|
220
220
|
}
|
|
221
221
|
));
|
|
222
222
|
TabsContent.displayName = "TabsContent";
|
|
223
|
-
const
|
|
224
|
-
const Tabs = Object.assign(TabsRoot, {
|
|
225
|
-
List: TabsList,
|
|
226
|
-
Trigger: TabsTrigger,
|
|
227
|
-
Content: TabsContent
|
|
228
|
-
});
|
|
223
|
+
const Tabs = TabsPrimitive.Root;
|
|
229
224
|
// Annotate the CommonJS export names for ESM import in node:
|
|
230
225
|
0 && (module.exports = {
|
|
231
226
|
Tabs,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/ui/tabs.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport * as TabsPrimitive from '@radix-ui/react-tabs'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\n\n// Context to pass style props from TabsList to TabsTrigger\ntype TabsStyleContextValue = {\n variant?: 'line' | 'enclosed' | 'pill'\n size?: 'sm' | 'md' | 'default' | 'lg'\n fitted?: boolean\n color?: 'default' | 'primary'\n radius?: 'none' | 'sm' | 'base' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'\n}\nconst TabsStyleContext = React.createContext<TabsStyleContextValue>({})\nconst useTabsStyleContext = () => React.useContext(TabsStyleContext)\n\n// ─── TabsList ────────────────────────────────────────────────\n\nconst tabsListVariants = cva(\n 'inline-flex items-center text-text-subtle',\n {\n variants: {\n variant: {\n line: 'border-b border-border bg-transparent gap-0',\n enclosed: 'border-b border-border bg-transparent gap-0',\n pill: 'bg-background-muted p-1 gap-1',\n },\n fitted: {\n true: 'w-full',\n false: '',\n },\n },\n defaultVariants: {\n variant: 'line',\n fitted: false,\n },\n }\n)\n\nexport interface TabsListProps\n extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>,\n VariantProps<typeof tabsListVariants> {\n size?: 'sm' | 'md' | 'default' | 'lg'\n /** Indicator color for line variant */\n color?: 'default' | 'primary'\n /** Top border-radius for enclosed variant, container radius for pill variant */\n radius?: 'none' | 'sm' | 'base' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'\n}\n\nconst TabsList = React.forwardRef<\n React.ElementRef<typeof TabsPrimitive.List>,\n TabsListProps\n>(({ className, variant, size, fitted, color, radius, ...props }, ref) => {\n const resolvedVariant = variant || 'line'\n return (\n <TabsStyleContext.Provider value={{ variant: resolvedVariant, size: size || 'default', fitted: fitted ?? false, color: color || 'default', radius: radius || 'md' }}>\n <TabsPrimitive.List\n ref={ref}\n className={cn(\n tabsListVariants({ variant, fitted }),\n resolvedVariant === 'pill' && pillListRadiusClasses[radius || 'md'],\n className\n )}\n {...props}\n />\n </TabsStyleContext.Provider>\n )\n})\nTabsList.displayName = 'TabsList'\n\n// ─── TabsTrigger ─────────────────────────────────────────────\n\nconst tabsTriggerVariants = cva(\n [\n 'inline-flex items-center justify-center gap-2 whitespace-nowrap',\n 'transition-all duration-micro ease-out cursor-pointer',\n 'focus-visible:focus-ring',\n 'disabled:pointer-events-none disabled:text-text-subtle disabled:opacity-50',\n ].join(' '),\n {\n variants: {\n variant: {\n line: [\n 'border-b-2 border-transparent -mb-px',\n 'hover:text-foreground hover:border-border',\n 'data-[state=active]:text-foreground data-[state=active]:font-semibold',\n ].join(' '),\n enclosed: [\n 'border border-transparent -mb-px',\n 'hover:text-foreground',\n 'data-[state=active]:text-foreground data-[state=active]:font-semibold data-[state=active]:bg-background',\n 'data-[state=active]:border-border data-[state=active]:border-b-background',\n ].join(' '),\n pill: [\n 'hover:text-foreground',\n 'data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:font-semibold data-[state=active]:shadow-sm',\n ].join(' '),\n },\n size: {\n sm: 'h-8 text-sm', // 32px, 13px\n md: 'h-9 text-sm', // 36px, 13px\n default: 'h-10 text-md', // 40px, 14px\n lg: 'h-12 text-base', // 48px, 16px\n },\n fitted: {\n true: 'flex-1',\n false: '',\n },\n },\n compoundVariants: [\n // Padding per variant × size\n { variant: 'line', size: 'sm', className: 'px-3' },\n { variant: 'line', size: 'md', className: 'px-3.5' },\n { variant: 'line', size: 'default', className: 'px-4' },\n { variant: 'line', size: 'lg', className: 'px-6' },\n { variant: 'enclosed', size: 'sm', className: 'px-3' },\n { variant: 'enclosed', size: 'md', className: 'px-3.5' },\n { variant: 'enclosed', size: 'default', className: 'px-4' },\n { variant: 'enclosed', size: 'lg', className: 'px-6' },\n // Pill: reduced height + Segmented-matching font/padding\n { variant: 'pill', size: 'sm', className: 'h-6 text-xs px-3.5' },\n { variant: 'pill', size: 'md', className: 'h-7 text-sm px-3.5' },\n { variant: 'pill', size: 'default', className: 'h-8 text-sm px-4' },\n { variant: 'pill', size: 'lg', className: 'h-10 text-md px-6' },\n ],\n defaultVariants: {\n variant: 'line',\n size: 'default',\n fitted: false,\n },\n }\n)\n\n// Icon size mapping for tabs (same as Button icon+text pattern)\nconst triggerIconSizeClasses = {\n sm: '[&>svg]:icon-xs', // 14px\n md: '[&>svg]:icon-sm', // 16px\n default: '[&>svg]:icon-sm', // 16px\n lg: '[&>svg]:icon-sm', // 16px\n} as const\n\nexport interface TabsTriggerProps\n extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>,\n Omit<VariantProps<typeof tabsTriggerVariants>, 'variant' | 'size' | 'fitted'> {}\n\n// Line variant: active indicator color\nconst lineColorClasses = {\n default: 'data-[state=active]:border-foreground',\n primary: 'data-[state=active]:border-primary',\n} as const\n\n// Enclosed variant: top border-radius\nconst enclosedRadiusClasses = {\n none: 'rounded-t-none',\n sm: 'rounded-t-sm',\n base: 'rounded-t',\n md: 'rounded-t-md',\n lg: 'rounded-t-lg',\n xl: 'rounded-t-xl',\n} as const\n\n// Pill variant: container radius (applied to TabsList, matches Segmented scale)\nconst pillListRadiusClasses = {\n none: 'rounded-none',\n sm: 'rounded-sm',\n base: 'rounded',\n md: 'rounded-md',\n lg: 'rounded-lg',\n xl: 'rounded-xl',\n '2xl': 'rounded-2xl',\n '3xl': 'rounded-3xl',\n full: 'rounded-full',\n} as const\n\n// Pill variant: item radius (one step smaller than container, matches Segmented item scale)\nconst pillItemRadiusClasses = {\n none: 'rounded-none',\n sm: 'rounded-sm',\n base: 'rounded',\n md: 'rounded-md',\n lg: 'rounded-md',\n xl: 'rounded-lg',\n '2xl': 'rounded-xl',\n '3xl': 'rounded-2xl',\n full: 'rounded-full',\n} as const\n\nconst TabsTrigger = React.forwardRef<\n React.ElementRef<typeof TabsPrimitive.Trigger>,\n TabsTriggerProps\n>(({ className, children, ...props }, ref) => {\n const { variant, size, fitted, color, radius } = useTabsStyleContext()\n const resolvedSize = size || 'default'\n\n return (\n <TabsPrimitive.Trigger\n ref={ref}\n className={cn(\n tabsTriggerVariants({ variant, size: resolvedSize, fitted }),\n triggerIconSizeClasses[resolvedSize],\n variant === 'line' && lineColorClasses[color || 'default'],\n variant === 'enclosed' && enclosedRadiusClasses[(radius || 'md') as keyof typeof enclosedRadiusClasses],\n variant === 'pill' && pillItemRadiusClasses[radius || 'md'],\n className\n )}\n {...props}\n >\n {children}\n </TabsPrimitive.Trigger>\n )\n})\nTabsTrigger.displayName = 'TabsTrigger'\n\n// ─── TabsContent ─────────────────────────────────────────────\n\nexport interface TabsContentProps\n extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content> {}\n\nconst TabsContent = React.forwardRef<\n React.ElementRef<typeof TabsPrimitive.Content>,\n TabsContentProps\n>(({ className, ...props }, ref) => (\n <TabsPrimitive.Content\n ref={ref}\n className={cn(\n 'mt-4 focus-visible:focus-ring',\n className\n )}\n {...props}\n />\n))\nTabsContent.displayName = 'TabsContent'\n\n// ─── Tabs (Root) ─────────────────────────────────────────────\n\nconst TabsRoot = TabsPrimitive.Root\n\n// ─── Namespace ──────────────────────────────────────────\nconst Tabs = Object.assign(TabsRoot, {\n List: TabsList,\n Trigger: TabsTrigger,\n Content: TabsContent,\n})\n\n// eslint-disable-next-line @typescript-eslint/no-namespace\nnamespace Tabs {\n export type ListProps = TabsListProps\n export type TriggerProps = TabsTriggerProps\n export type ContentProps = TabsContentProps\n}\n\nexport {\n Tabs,\n TabsList,\n TabsTrigger,\n TabsContent,\n tabsListVariants,\n tabsTriggerVariants,\n}\n"],"mappings":"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","names":[]}
|
|
1
|
+
{"version":3,"sources":["../../../src/components/ui/tabs.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport * as TabsPrimitive from '@radix-ui/react-tabs'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\n\n// Context to pass style props from TabsList to TabsTrigger\ntype TabsStyleContextValue = {\n variant?: 'line' | 'enclosed' | 'pill'\n size?: 'sm' | 'md' | 'default' | 'lg'\n fitted?: boolean\n color?: 'default' | 'primary'\n radius?: 'none' | 'sm' | 'base' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'\n}\nconst TabsStyleContext = React.createContext<TabsStyleContextValue>({})\nconst useTabsStyleContext = () => React.useContext(TabsStyleContext)\n\n// ─── TabsList ────────────────────────────────────────────────\n\nconst tabsListVariants = cva(\n 'inline-flex items-center text-text-subtle',\n {\n variants: {\n variant: {\n line: 'border-b border-border bg-transparent gap-0',\n enclosed: 'border-b border-border bg-transparent gap-0',\n pill: 'bg-background-muted p-1 gap-1',\n },\n fitted: {\n true: 'w-full',\n false: '',\n },\n },\n defaultVariants: {\n variant: 'line',\n fitted: false,\n },\n }\n)\n\nexport interface TabsListProps\n extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>,\n VariantProps<typeof tabsListVariants> {\n size?: 'sm' | 'md' | 'default' | 'lg'\n /** Indicator color for line variant */\n color?: 'default' | 'primary'\n /** Top border-radius for enclosed variant, container radius for pill variant */\n radius?: 'none' | 'sm' | 'base' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'\n}\n\nconst TabsList = React.forwardRef<\n React.ElementRef<typeof TabsPrimitive.List>,\n TabsListProps\n>(({ className, variant, size, fitted, color, radius, ...props }, ref) => {\n const resolvedVariant = variant || 'line'\n return (\n <TabsStyleContext.Provider value={{ variant: resolvedVariant, size: size || 'default', fitted: fitted ?? false, color: color || 'default', radius: radius || 'md' }}>\n <TabsPrimitive.List\n ref={ref}\n className={cn(\n tabsListVariants({ variant, fitted }),\n resolvedVariant === 'pill' && pillListRadiusClasses[radius || 'md'],\n className\n )}\n {...props}\n />\n </TabsStyleContext.Provider>\n )\n})\nTabsList.displayName = 'TabsList'\n\n// ─── TabsTrigger ─────────────────────────────────────────────\n\nconst tabsTriggerVariants = cva(\n [\n 'inline-flex items-center justify-center gap-2 whitespace-nowrap',\n 'transition-all duration-micro ease-out cursor-pointer',\n 'focus-visible:focus-ring',\n 'disabled:pointer-events-none disabled:text-text-subtle disabled:opacity-50',\n ].join(' '),\n {\n variants: {\n variant: {\n line: [\n 'border-b-2 border-transparent -mb-px',\n 'hover:text-foreground hover:border-border',\n 'data-[state=active]:text-foreground data-[state=active]:font-semibold',\n ].join(' '),\n enclosed: [\n 'border border-transparent -mb-px',\n 'hover:text-foreground',\n 'data-[state=active]:text-foreground data-[state=active]:font-semibold data-[state=active]:bg-background',\n 'data-[state=active]:border-border data-[state=active]:border-b-background',\n ].join(' '),\n pill: [\n 'hover:text-foreground',\n 'data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:font-semibold data-[state=active]:shadow-sm',\n ].join(' '),\n },\n size: {\n sm: 'h-8 text-sm', // 32px, 13px\n md: 'h-9 text-sm', // 36px, 13px\n default: 'h-10 text-md', // 40px, 14px\n lg: 'h-12 text-base', // 48px, 16px\n },\n fitted: {\n true: 'flex-1',\n false: '',\n },\n },\n compoundVariants: [\n // Padding per variant × size\n { variant: 'line', size: 'sm', className: 'px-3' },\n { variant: 'line', size: 'md', className: 'px-3.5' },\n { variant: 'line', size: 'default', className: 'px-4' },\n { variant: 'line', size: 'lg', className: 'px-6' },\n { variant: 'enclosed', size: 'sm', className: 'px-3' },\n { variant: 'enclosed', size: 'md', className: 'px-3.5' },\n { variant: 'enclosed', size: 'default', className: 'px-4' },\n { variant: 'enclosed', size: 'lg', className: 'px-6' },\n // Pill: reduced height + Segmented-matching font/padding\n { variant: 'pill', size: 'sm', className: 'h-6 text-xs px-3.5' },\n { variant: 'pill', size: 'md', className: 'h-7 text-sm px-3.5' },\n { variant: 'pill', size: 'default', className: 'h-8 text-sm px-4' },\n { variant: 'pill', size: 'lg', className: 'h-10 text-md px-6' },\n ],\n defaultVariants: {\n variant: 'line',\n size: 'default',\n fitted: false,\n },\n }\n)\n\n// Icon size mapping for tabs (same as Button icon+text pattern)\nconst triggerIconSizeClasses = {\n sm: '[&>svg]:icon-xs', // 14px\n md: '[&>svg]:icon-sm', // 16px\n default: '[&>svg]:icon-sm', // 16px\n lg: '[&>svg]:icon-sm', // 16px\n} as const\n\nexport interface TabsTriggerProps\n extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>,\n Omit<VariantProps<typeof tabsTriggerVariants>, 'variant' | 'size' | 'fitted'> {}\n\n// Line variant: active indicator color\nconst lineColorClasses = {\n default: 'data-[state=active]:border-foreground',\n primary: 'data-[state=active]:border-primary',\n} as const\n\n// Enclosed variant: top border-radius\nconst enclosedRadiusClasses = {\n none: 'rounded-t-none',\n sm: 'rounded-t-sm',\n base: 'rounded-t',\n md: 'rounded-t-md',\n lg: 'rounded-t-lg',\n xl: 'rounded-t-xl',\n} as const\n\n// Pill variant: container radius (applied to TabsList, matches Segmented scale)\nconst pillListRadiusClasses = {\n none: 'rounded-none',\n sm: 'rounded-sm',\n base: 'rounded',\n md: 'rounded-md',\n lg: 'rounded-lg',\n xl: 'rounded-xl',\n '2xl': 'rounded-2xl',\n '3xl': 'rounded-3xl',\n full: 'rounded-full',\n} as const\n\n// Pill variant: item radius (one step smaller than container, matches Segmented item scale)\nconst pillItemRadiusClasses = {\n none: 'rounded-none',\n sm: 'rounded-sm',\n base: 'rounded',\n md: 'rounded-md',\n lg: 'rounded-md',\n xl: 'rounded-lg',\n '2xl': 'rounded-xl',\n '3xl': 'rounded-2xl',\n full: 'rounded-full',\n} as const\n\nconst TabsTrigger = React.forwardRef<\n React.ElementRef<typeof TabsPrimitive.Trigger>,\n TabsTriggerProps\n>(({ className, children, ...props }, ref) => {\n const { variant, size, fitted, color, radius } = useTabsStyleContext()\n const resolvedSize = size || 'default'\n\n return (\n <TabsPrimitive.Trigger\n ref={ref}\n className={cn(\n tabsTriggerVariants({ variant, size: resolvedSize, fitted }),\n triggerIconSizeClasses[resolvedSize],\n variant === 'line' && lineColorClasses[color || 'default'],\n variant === 'enclosed' && enclosedRadiusClasses[(radius || 'md') as keyof typeof enclosedRadiusClasses],\n variant === 'pill' && pillItemRadiusClasses[radius || 'md'],\n className\n )}\n {...props}\n >\n {children}\n </TabsPrimitive.Trigger>\n )\n})\nTabsTrigger.displayName = 'TabsTrigger'\n\n// ─── TabsContent ─────────────────────────────────────────────\n\nexport interface TabsContentProps\n extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content> {}\n\nconst TabsContent = React.forwardRef<\n React.ElementRef<typeof TabsPrimitive.Content>,\n TabsContentProps\n>(({ className, ...props }, ref) => (\n <TabsPrimitive.Content\n ref={ref}\n className={cn(\n 'mt-4 focus-visible:focus-ring',\n className\n )}\n {...props}\n />\n))\nTabsContent.displayName = 'TabsContent'\n\n// ─── Tabs (Root) ─────────────────────────────────────────────\n\nconst Tabs = TabsPrimitive.Root\n\nexport {\n Tabs,\n TabsList,\n TabsTrigger,\n TabsContent,\n tabsListVariants,\n tabsTriggerVariants,\n}\n"],"mappings":"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","names":[]}
|
|
@@ -182,12 +182,7 @@ const TabsContent = React.forwardRef(({ className, ...props }, ref) => /* @__PUR
|
|
|
182
182
|
}
|
|
183
183
|
));
|
|
184
184
|
TabsContent.displayName = "TabsContent";
|
|
185
|
-
const
|
|
186
|
-
const Tabs = Object.assign(TabsRoot, {
|
|
187
|
-
List: TabsList,
|
|
188
|
-
Trigger: TabsTrigger,
|
|
189
|
-
Content: TabsContent
|
|
190
|
-
});
|
|
185
|
+
const Tabs = TabsPrimitive.Root;
|
|
191
186
|
export {
|
|
192
187
|
Tabs,
|
|
193
188
|
TabsContent,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/ui/tabs.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport * as TabsPrimitive from '@radix-ui/react-tabs'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\n\n// Context to pass style props from TabsList to TabsTrigger\ntype TabsStyleContextValue = {\n variant?: 'line' | 'enclosed' | 'pill'\n size?: 'sm' | 'md' | 'default' | 'lg'\n fitted?: boolean\n color?: 'default' | 'primary'\n radius?: 'none' | 'sm' | 'base' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'\n}\nconst TabsStyleContext = React.createContext<TabsStyleContextValue>({})\nconst useTabsStyleContext = () => React.useContext(TabsStyleContext)\n\n// ─── TabsList ────────────────────────────────────────────────\n\nconst tabsListVariants = cva(\n 'inline-flex items-center text-text-subtle',\n {\n variants: {\n variant: {\n line: 'border-b border-border bg-transparent gap-0',\n enclosed: 'border-b border-border bg-transparent gap-0',\n pill: 'bg-background-muted p-1 gap-1',\n },\n fitted: {\n true: 'w-full',\n false: '',\n },\n },\n defaultVariants: {\n variant: 'line',\n fitted: false,\n },\n }\n)\n\nexport interface TabsListProps\n extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>,\n VariantProps<typeof tabsListVariants> {\n size?: 'sm' | 'md' | 'default' | 'lg'\n /** Indicator color for line variant */\n color?: 'default' | 'primary'\n /** Top border-radius for enclosed variant, container radius for pill variant */\n radius?: 'none' | 'sm' | 'base' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'\n}\n\nconst TabsList = React.forwardRef<\n React.ElementRef<typeof TabsPrimitive.List>,\n TabsListProps\n>(({ className, variant, size, fitted, color, radius, ...props }, ref) => {\n const resolvedVariant = variant || 'line'\n return (\n <TabsStyleContext.Provider value={{ variant: resolvedVariant, size: size || 'default', fitted: fitted ?? false, color: color || 'default', radius: radius || 'md' }}>\n <TabsPrimitive.List\n ref={ref}\n className={cn(\n tabsListVariants({ variant, fitted }),\n resolvedVariant === 'pill' && pillListRadiusClasses[radius || 'md'],\n className\n )}\n {...props}\n />\n </TabsStyleContext.Provider>\n )\n})\nTabsList.displayName = 'TabsList'\n\n// ─── TabsTrigger ─────────────────────────────────────────────\n\nconst tabsTriggerVariants = cva(\n [\n 'inline-flex items-center justify-center gap-2 whitespace-nowrap',\n 'transition-all duration-micro ease-out cursor-pointer',\n 'focus-visible:focus-ring',\n 'disabled:pointer-events-none disabled:text-text-subtle disabled:opacity-50',\n ].join(' '),\n {\n variants: {\n variant: {\n line: [\n 'border-b-2 border-transparent -mb-px',\n 'hover:text-foreground hover:border-border',\n 'data-[state=active]:text-foreground data-[state=active]:font-semibold',\n ].join(' '),\n enclosed: [\n 'border border-transparent -mb-px',\n 'hover:text-foreground',\n 'data-[state=active]:text-foreground data-[state=active]:font-semibold data-[state=active]:bg-background',\n 'data-[state=active]:border-border data-[state=active]:border-b-background',\n ].join(' '),\n pill: [\n 'hover:text-foreground',\n 'data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:font-semibold data-[state=active]:shadow-sm',\n ].join(' '),\n },\n size: {\n sm: 'h-8 text-sm', // 32px, 13px\n md: 'h-9 text-sm', // 36px, 13px\n default: 'h-10 text-md', // 40px, 14px\n lg: 'h-12 text-base', // 48px, 16px\n },\n fitted: {\n true: 'flex-1',\n false: '',\n },\n },\n compoundVariants: [\n // Padding per variant × size\n { variant: 'line', size: 'sm', className: 'px-3' },\n { variant: 'line', size: 'md', className: 'px-3.5' },\n { variant: 'line', size: 'default', className: 'px-4' },\n { variant: 'line', size: 'lg', className: 'px-6' },\n { variant: 'enclosed', size: 'sm', className: 'px-3' },\n { variant: 'enclosed', size: 'md', className: 'px-3.5' },\n { variant: 'enclosed', size: 'default', className: 'px-4' },\n { variant: 'enclosed', size: 'lg', className: 'px-6' },\n // Pill: reduced height + Segmented-matching font/padding\n { variant: 'pill', size: 'sm', className: 'h-6 text-xs px-3.5' },\n { variant: 'pill', size: 'md', className: 'h-7 text-sm px-3.5' },\n { variant: 'pill', size: 'default', className: 'h-8 text-sm px-4' },\n { variant: 'pill', size: 'lg', className: 'h-10 text-md px-6' },\n ],\n defaultVariants: {\n variant: 'line',\n size: 'default',\n fitted: false,\n },\n }\n)\n\n// Icon size mapping for tabs (same as Button icon+text pattern)\nconst triggerIconSizeClasses = {\n sm: '[&>svg]:icon-xs', // 14px\n md: '[&>svg]:icon-sm', // 16px\n default: '[&>svg]:icon-sm', // 16px\n lg: '[&>svg]:icon-sm', // 16px\n} as const\n\nexport interface TabsTriggerProps\n extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>,\n Omit<VariantProps<typeof tabsTriggerVariants>, 'variant' | 'size' | 'fitted'> {}\n\n// Line variant: active indicator color\nconst lineColorClasses = {\n default: 'data-[state=active]:border-foreground',\n primary: 'data-[state=active]:border-primary',\n} as const\n\n// Enclosed variant: top border-radius\nconst enclosedRadiusClasses = {\n none: 'rounded-t-none',\n sm: 'rounded-t-sm',\n base: 'rounded-t',\n md: 'rounded-t-md',\n lg: 'rounded-t-lg',\n xl: 'rounded-t-xl',\n} as const\n\n// Pill variant: container radius (applied to TabsList, matches Segmented scale)\nconst pillListRadiusClasses = {\n none: 'rounded-none',\n sm: 'rounded-sm',\n base: 'rounded',\n md: 'rounded-md',\n lg: 'rounded-lg',\n xl: 'rounded-xl',\n '2xl': 'rounded-2xl',\n '3xl': 'rounded-3xl',\n full: 'rounded-full',\n} as const\n\n// Pill variant: item radius (one step smaller than container, matches Segmented item scale)\nconst pillItemRadiusClasses = {\n none: 'rounded-none',\n sm: 'rounded-sm',\n base: 'rounded',\n md: 'rounded-md',\n lg: 'rounded-md',\n xl: 'rounded-lg',\n '2xl': 'rounded-xl',\n '3xl': 'rounded-2xl',\n full: 'rounded-full',\n} as const\n\nconst TabsTrigger = React.forwardRef<\n React.ElementRef<typeof TabsPrimitive.Trigger>,\n TabsTriggerProps\n>(({ className, children, ...props }, ref) => {\n const { variant, size, fitted, color, radius } = useTabsStyleContext()\n const resolvedSize = size || 'default'\n\n return (\n <TabsPrimitive.Trigger\n ref={ref}\n className={cn(\n tabsTriggerVariants({ variant, size: resolvedSize, fitted }),\n triggerIconSizeClasses[resolvedSize],\n variant === 'line' && lineColorClasses[color || 'default'],\n variant === 'enclosed' && enclosedRadiusClasses[(radius || 'md') as keyof typeof enclosedRadiusClasses],\n variant === 'pill' && pillItemRadiusClasses[radius || 'md'],\n className\n )}\n {...props}\n >\n {children}\n </TabsPrimitive.Trigger>\n )\n})\nTabsTrigger.displayName = 'TabsTrigger'\n\n// ─── TabsContent ─────────────────────────────────────────────\n\nexport interface TabsContentProps\n extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content> {}\n\nconst TabsContent = React.forwardRef<\n React.ElementRef<typeof TabsPrimitive.Content>,\n TabsContentProps\n>(({ className, ...props }, ref) => (\n <TabsPrimitive.Content\n ref={ref}\n className={cn(\n 'mt-4 focus-visible:focus-ring',\n className\n )}\n {...props}\n />\n))\nTabsContent.displayName = 'TabsContent'\n\n// ─── Tabs (Root) ─────────────────────────────────────────────\n\nconst TabsRoot = TabsPrimitive.Root\n\n// ─── Namespace ──────────────────────────────────────────\nconst Tabs = Object.assign(TabsRoot, {\n List: TabsList,\n Trigger: TabsTrigger,\n Content: TabsContent,\n})\n\n// eslint-disable-next-line @typescript-eslint/no-namespace\nnamespace Tabs {\n export type ListProps = TabsListProps\n export type TriggerProps = TabsTriggerProps\n export type ContentProps = TabsContentProps\n}\n\nexport {\n Tabs,\n TabsList,\n TabsTrigger,\n TabsContent,\n tabsListVariants,\n tabsTriggerVariants,\n}\n"],"mappings":"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","names":[]}
|
|
1
|
+
{"version":3,"sources":["../../../src/components/ui/tabs.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport * as TabsPrimitive from '@radix-ui/react-tabs'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\n\n// Context to pass style props from TabsList to TabsTrigger\ntype TabsStyleContextValue = {\n variant?: 'line' | 'enclosed' | 'pill'\n size?: 'sm' | 'md' | 'default' | 'lg'\n fitted?: boolean\n color?: 'default' | 'primary'\n radius?: 'none' | 'sm' | 'base' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'\n}\nconst TabsStyleContext = React.createContext<TabsStyleContextValue>({})\nconst useTabsStyleContext = () => React.useContext(TabsStyleContext)\n\n// ─── TabsList ────────────────────────────────────────────────\n\nconst tabsListVariants = cva(\n 'inline-flex items-center text-text-subtle',\n {\n variants: {\n variant: {\n line: 'border-b border-border bg-transparent gap-0',\n enclosed: 'border-b border-border bg-transparent gap-0',\n pill: 'bg-background-muted p-1 gap-1',\n },\n fitted: {\n true: 'w-full',\n false: '',\n },\n },\n defaultVariants: {\n variant: 'line',\n fitted: false,\n },\n }\n)\n\nexport interface TabsListProps\n extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>,\n VariantProps<typeof tabsListVariants> {\n size?: 'sm' | 'md' | 'default' | 'lg'\n /** Indicator color for line variant */\n color?: 'default' | 'primary'\n /** Top border-radius for enclosed variant, container radius for pill variant */\n radius?: 'none' | 'sm' | 'base' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'\n}\n\nconst TabsList = React.forwardRef<\n React.ElementRef<typeof TabsPrimitive.List>,\n TabsListProps\n>(({ className, variant, size, fitted, color, radius, ...props }, ref) => {\n const resolvedVariant = variant || 'line'\n return (\n <TabsStyleContext.Provider value={{ variant: resolvedVariant, size: size || 'default', fitted: fitted ?? false, color: color || 'default', radius: radius || 'md' }}>\n <TabsPrimitive.List\n ref={ref}\n className={cn(\n tabsListVariants({ variant, fitted }),\n resolvedVariant === 'pill' && pillListRadiusClasses[radius || 'md'],\n className\n )}\n {...props}\n />\n </TabsStyleContext.Provider>\n )\n})\nTabsList.displayName = 'TabsList'\n\n// ─── TabsTrigger ─────────────────────────────────────────────\n\nconst tabsTriggerVariants = cva(\n [\n 'inline-flex items-center justify-center gap-2 whitespace-nowrap',\n 'transition-all duration-micro ease-out cursor-pointer',\n 'focus-visible:focus-ring',\n 'disabled:pointer-events-none disabled:text-text-subtle disabled:opacity-50',\n ].join(' '),\n {\n variants: {\n variant: {\n line: [\n 'border-b-2 border-transparent -mb-px',\n 'hover:text-foreground hover:border-border',\n 'data-[state=active]:text-foreground data-[state=active]:font-semibold',\n ].join(' '),\n enclosed: [\n 'border border-transparent -mb-px',\n 'hover:text-foreground',\n 'data-[state=active]:text-foreground data-[state=active]:font-semibold data-[state=active]:bg-background',\n 'data-[state=active]:border-border data-[state=active]:border-b-background',\n ].join(' '),\n pill: [\n 'hover:text-foreground',\n 'data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:font-semibold data-[state=active]:shadow-sm',\n ].join(' '),\n },\n size: {\n sm: 'h-8 text-sm', // 32px, 13px\n md: 'h-9 text-sm', // 36px, 13px\n default: 'h-10 text-md', // 40px, 14px\n lg: 'h-12 text-base', // 48px, 16px\n },\n fitted: {\n true: 'flex-1',\n false: '',\n },\n },\n compoundVariants: [\n // Padding per variant × size\n { variant: 'line', size: 'sm', className: 'px-3' },\n { variant: 'line', size: 'md', className: 'px-3.5' },\n { variant: 'line', size: 'default', className: 'px-4' },\n { variant: 'line', size: 'lg', className: 'px-6' },\n { variant: 'enclosed', size: 'sm', className: 'px-3' },\n { variant: 'enclosed', size: 'md', className: 'px-3.5' },\n { variant: 'enclosed', size: 'default', className: 'px-4' },\n { variant: 'enclosed', size: 'lg', className: 'px-6' },\n // Pill: reduced height + Segmented-matching font/padding\n { variant: 'pill', size: 'sm', className: 'h-6 text-xs px-3.5' },\n { variant: 'pill', size: 'md', className: 'h-7 text-sm px-3.5' },\n { variant: 'pill', size: 'default', className: 'h-8 text-sm px-4' },\n { variant: 'pill', size: 'lg', className: 'h-10 text-md px-6' },\n ],\n defaultVariants: {\n variant: 'line',\n size: 'default',\n fitted: false,\n },\n }\n)\n\n// Icon size mapping for tabs (same as Button icon+text pattern)\nconst triggerIconSizeClasses = {\n sm: '[&>svg]:icon-xs', // 14px\n md: '[&>svg]:icon-sm', // 16px\n default: '[&>svg]:icon-sm', // 16px\n lg: '[&>svg]:icon-sm', // 16px\n} as const\n\nexport interface TabsTriggerProps\n extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>,\n Omit<VariantProps<typeof tabsTriggerVariants>, 'variant' | 'size' | 'fitted'> {}\n\n// Line variant: active indicator color\nconst lineColorClasses = {\n default: 'data-[state=active]:border-foreground',\n primary: 'data-[state=active]:border-primary',\n} as const\n\n// Enclosed variant: top border-radius\nconst enclosedRadiusClasses = {\n none: 'rounded-t-none',\n sm: 'rounded-t-sm',\n base: 'rounded-t',\n md: 'rounded-t-md',\n lg: 'rounded-t-lg',\n xl: 'rounded-t-xl',\n} as const\n\n// Pill variant: container radius (applied to TabsList, matches Segmented scale)\nconst pillListRadiusClasses = {\n none: 'rounded-none',\n sm: 'rounded-sm',\n base: 'rounded',\n md: 'rounded-md',\n lg: 'rounded-lg',\n xl: 'rounded-xl',\n '2xl': 'rounded-2xl',\n '3xl': 'rounded-3xl',\n full: 'rounded-full',\n} as const\n\n// Pill variant: item radius (one step smaller than container, matches Segmented item scale)\nconst pillItemRadiusClasses = {\n none: 'rounded-none',\n sm: 'rounded-sm',\n base: 'rounded',\n md: 'rounded-md',\n lg: 'rounded-md',\n xl: 'rounded-lg',\n '2xl': 'rounded-xl',\n '3xl': 'rounded-2xl',\n full: 'rounded-full',\n} as const\n\nconst TabsTrigger = React.forwardRef<\n React.ElementRef<typeof TabsPrimitive.Trigger>,\n TabsTriggerProps\n>(({ className, children, ...props }, ref) => {\n const { variant, size, fitted, color, radius } = useTabsStyleContext()\n const resolvedSize = size || 'default'\n\n return (\n <TabsPrimitive.Trigger\n ref={ref}\n className={cn(\n tabsTriggerVariants({ variant, size: resolvedSize, fitted }),\n triggerIconSizeClasses[resolvedSize],\n variant === 'line' && lineColorClasses[color || 'default'],\n variant === 'enclosed' && enclosedRadiusClasses[(radius || 'md') as keyof typeof enclosedRadiusClasses],\n variant === 'pill' && pillItemRadiusClasses[radius || 'md'],\n className\n )}\n {...props}\n >\n {children}\n </TabsPrimitive.Trigger>\n )\n})\nTabsTrigger.displayName = 'TabsTrigger'\n\n// ─── TabsContent ─────────────────────────────────────────────\n\nexport interface TabsContentProps\n extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content> {}\n\nconst TabsContent = React.forwardRef<\n React.ElementRef<typeof TabsPrimitive.Content>,\n TabsContentProps\n>(({ className, ...props }, ref) => (\n <TabsPrimitive.Content\n ref={ref}\n className={cn(\n 'mt-4 focus-visible:focus-ring',\n className\n )}\n {...props}\n />\n))\nTabsContent.displayName = 'TabsContent'\n\n// ─── Tabs (Root) ─────────────────────────────────────────────\n\nconst Tabs = TabsPrimitive.Root\n\nexport {\n Tabs,\n TabsList,\n TabsTrigger,\n TabsContent,\n tabsListVariants,\n tabsTriggerVariants,\n}\n"],"mappings":"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","names":[]}
|
|
@@ -33,15 +33,10 @@ type ToggleGroupBaseProps = Omit<React.ComponentPropsWithoutRef<'div'>, 'default
|
|
|
33
33
|
children?: React.ReactNode;
|
|
34
34
|
};
|
|
35
35
|
type ToggleGroupProps = ToggleGroupBaseProps & VariantProps<typeof toggleGroupVariants> & VariantProps<typeof toggleGroupItemVariants> & (ToggleGroupSingleProps | ToggleGroupMultipleProps);
|
|
36
|
+
declare const ToggleGroup: React.ForwardRefExoticComponent<ToggleGroupProps & React.RefAttributes<HTMLDivElement>>;
|
|
36
37
|
interface ToggleGroupItemProps extends React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item>, Omit<VariantProps<typeof toggleGroupItemVariants>, 'fontWeight'> {
|
|
37
38
|
fontWeight?: 'normal' | 'semibold';
|
|
38
39
|
}
|
|
39
40
|
declare const ToggleGroupItem: React.ForwardRefExoticComponent<ToggleGroupItemProps & React.RefAttributes<HTMLButtonElement>>;
|
|
40
|
-
declare const ToggleGroup: React.ForwardRefExoticComponent<ToggleGroupProps & React.RefAttributes<HTMLDivElement>> & {
|
|
41
|
-
Item: React.ForwardRefExoticComponent<ToggleGroupItemProps & React.RefAttributes<HTMLButtonElement>>;
|
|
42
|
-
};
|
|
43
|
-
declare namespace ToggleGroup {
|
|
44
|
-
type ItemProps = ToggleGroupItemProps;
|
|
45
|
-
}
|
|
46
41
|
|
|
47
42
|
export { ToggleGroup, ToggleGroupItem, type ToggleGroupItemProps, type ToggleGroupProps, toggleGroupItemVariants, toggleGroupVariants };
|
|
@@ -33,15 +33,10 @@ type ToggleGroupBaseProps = Omit<React.ComponentPropsWithoutRef<'div'>, 'default
|
|
|
33
33
|
children?: React.ReactNode;
|
|
34
34
|
};
|
|
35
35
|
type ToggleGroupProps = ToggleGroupBaseProps & VariantProps<typeof toggleGroupVariants> & VariantProps<typeof toggleGroupItemVariants> & (ToggleGroupSingleProps | ToggleGroupMultipleProps);
|
|
36
|
+
declare const ToggleGroup: React.ForwardRefExoticComponent<ToggleGroupProps & React.RefAttributes<HTMLDivElement>>;
|
|
36
37
|
interface ToggleGroupItemProps extends React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item>, Omit<VariantProps<typeof toggleGroupItemVariants>, 'fontWeight'> {
|
|
37
38
|
fontWeight?: 'normal' | 'semibold';
|
|
38
39
|
}
|
|
39
40
|
declare const ToggleGroupItem: React.ForwardRefExoticComponent<ToggleGroupItemProps & React.RefAttributes<HTMLButtonElement>>;
|
|
40
|
-
declare const ToggleGroup: React.ForwardRefExoticComponent<ToggleGroupProps & React.RefAttributes<HTMLDivElement>> & {
|
|
41
|
-
Item: React.ForwardRefExoticComponent<ToggleGroupItemProps & React.RefAttributes<HTMLButtonElement>>;
|
|
42
|
-
};
|
|
43
|
-
declare namespace ToggleGroup {
|
|
44
|
-
type ItemProps = ToggleGroupItemProps;
|
|
45
|
-
}
|
|
46
41
|
|
|
47
42
|
export { ToggleGroup, ToggleGroupItem, type ToggleGroupItemProps, type ToggleGroupProps, toggleGroupItemVariants, toggleGroupVariants };
|
|
@@ -103,7 +103,7 @@ const ToggleGroupContext = React.createContext({
|
|
|
103
103
|
radius: "default",
|
|
104
104
|
fontWeight: "normal"
|
|
105
105
|
});
|
|
106
|
-
const
|
|
106
|
+
const ToggleGroup = React.forwardRef(({ className, orientation, variant, size, radius, fontWeight, children, ...props }, ref) => /* @__PURE__ */ React.createElement(
|
|
107
107
|
ToggleGroupPrimitive.Root,
|
|
108
108
|
{
|
|
109
109
|
ref,
|
|
@@ -137,7 +137,7 @@ const ToggleGroupRoot = React.forwardRef(({ className, orientation, variant, siz
|
|
|
137
137
|
},
|
|
138
138
|
/* @__PURE__ */ React.createElement(ToggleGroupContext.Provider, { value: { variant, size, radius, fontWeight } }, children)
|
|
139
139
|
));
|
|
140
|
-
|
|
140
|
+
ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
|
|
141
141
|
const iconSizeClasses = {
|
|
142
142
|
xs: "[&>svg]:icon-xs",
|
|
143
143
|
// 14px
|
|
@@ -173,9 +173,6 @@ const ToggleGroupItem = React.forwardRef(({ className, variant, size, radius, fo
|
|
|
173
173
|
);
|
|
174
174
|
});
|
|
175
175
|
ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
|
|
176
|
-
const ToggleGroup = Object.assign(ToggleGroupRoot, {
|
|
177
|
-
Item: ToggleGroupItem
|
|
178
|
-
});
|
|
179
176
|
// Annotate the CommonJS export names for ESM import in node:
|
|
180
177
|
0 && (module.exports = {
|
|
181
178
|
ToggleGroup,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/ui/toggle-group.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\n\nconst toggleGroupVariants = cva(\n 'inline-flex items-center justify-center',\n {\n variants: {\n orientation: {\n horizontal: 'flex-row',\n vertical: 'flex-col',\n },\n },\n defaultVariants: {\n orientation: 'horizontal',\n },\n }\n)\n\nconst toggleGroupItemVariants = cva(\n 'inline-flex items-center justify-center text-sm text-text-muted transition-all duration-micro focus-visible:focus-ring disabled:pointer-events-none disabled:opacity-50',\n {\n variants: {\n variant: {\n default: 'bg-transparent hover:bg-background-muted hover:text-foreground data-[state=on]:bg-background-muted data-[state=on]:text-foreground',\n outline: 'border border-border-form bg-transparent hover:bg-background-muted hover:text-foreground data-[state=on]:bg-background-muted data-[state=on]:text-foreground',\n },\n fontWeight: {\n normal: 'font-normal',\n semibold: 'font-semibold',\n },\n size: {\n xs: 'h-7 px-2.5 text-xs gap-1', // 28px height, 10px paddingX, 12px font\n sm: 'h-8 px-3 text-sm gap-2', // 32px height, 12px paddingX, 13px font\n md: 'h-9 px-3.5 text-md gap-2', // 36px height, 14px paddingX, 14px font\n default: 'h-10 px-4 text-md gap-2', // 40px height, 16px paddingX, 14px font\n lg: 'h-12 px-6 text-base gap-2', // 48px height, 24px paddingX, 16px font\n },\n radius: {\n none: 'rounded-none',\n sm: 'rounded-sm',\n base: 'rounded',\n default: 'rounded-md',\n lg: 'rounded-lg',\n xl: 'rounded-xl',\n '2xl': 'rounded-2xl',\n '3xl': 'rounded-3xl',\n full: 'rounded-full',\n },\n },\n defaultVariants: {\n variant: 'default',\n size: 'default',\n radius: 'default',\n fontWeight: 'normal',\n },\n }\n)\n\nconst ToggleGroupContext = React.createContext<\n VariantProps<typeof toggleGroupItemVariants>\n>({\n variant: 'default',\n size: 'default',\n radius: 'default',\n fontWeight: 'normal',\n})\n\ntype ToggleGroupSingleProps = {\n type: 'single'\n value?: string\n defaultValue?: string\n onValueChange?: (value: string) => void\n}\n\ntype ToggleGroupMultipleProps = {\n type: 'multiple'\n value?: string[]\n defaultValue?: string[]\n onValueChange?: (value: string[]) => void\n}\n\ntype ToggleGroupBaseProps = Omit<\n React.ComponentPropsWithoutRef<'div'>,\n 'defaultValue' | 'dir'\n> & {\n disabled?: boolean\n rovingFocus?: boolean\n orientation?: 'horizontal' | 'vertical'\n dir?: 'ltr' | 'rtl'\n loop?: boolean\n children?: React.ReactNode\n}\n\nexport type ToggleGroupProps = ToggleGroupBaseProps &\n VariantProps<typeof toggleGroupVariants> &\n VariantProps<typeof toggleGroupItemVariants> &\n (ToggleGroupSingleProps | ToggleGroupMultipleProps)\n\nconst
|
|
1
|
+
{"version":3,"sources":["../../../src/components/ui/toggle-group.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\n\nconst toggleGroupVariants = cva(\n 'inline-flex items-center justify-center',\n {\n variants: {\n orientation: {\n horizontal: 'flex-row',\n vertical: 'flex-col',\n },\n },\n defaultVariants: {\n orientation: 'horizontal',\n },\n }\n)\n\nconst toggleGroupItemVariants = cva(\n 'inline-flex items-center justify-center text-sm text-text-muted transition-all duration-micro focus-visible:focus-ring disabled:pointer-events-none disabled:opacity-50',\n {\n variants: {\n variant: {\n default: 'bg-transparent hover:bg-background-muted hover:text-foreground data-[state=on]:bg-background-muted data-[state=on]:text-foreground',\n outline: 'border border-border-form bg-transparent hover:bg-background-muted hover:text-foreground data-[state=on]:bg-background-muted data-[state=on]:text-foreground',\n },\n fontWeight: {\n normal: 'font-normal',\n semibold: 'font-semibold',\n },\n size: {\n xs: 'h-7 px-2.5 text-xs gap-1', // 28px height, 10px paddingX, 12px font\n sm: 'h-8 px-3 text-sm gap-2', // 32px height, 12px paddingX, 13px font\n md: 'h-9 px-3.5 text-md gap-2', // 36px height, 14px paddingX, 14px font\n default: 'h-10 px-4 text-md gap-2', // 40px height, 16px paddingX, 14px font\n lg: 'h-12 px-6 text-base gap-2', // 48px height, 24px paddingX, 16px font\n },\n radius: {\n none: 'rounded-none',\n sm: 'rounded-sm',\n base: 'rounded',\n default: 'rounded-md',\n lg: 'rounded-lg',\n xl: 'rounded-xl',\n '2xl': 'rounded-2xl',\n '3xl': 'rounded-3xl',\n full: 'rounded-full',\n },\n },\n defaultVariants: {\n variant: 'default',\n size: 'default',\n radius: 'default',\n fontWeight: 'normal',\n },\n }\n)\n\nconst ToggleGroupContext = React.createContext<\n VariantProps<typeof toggleGroupItemVariants>\n>({\n variant: 'default',\n size: 'default',\n radius: 'default',\n fontWeight: 'normal',\n})\n\ntype ToggleGroupSingleProps = {\n type: 'single'\n value?: string\n defaultValue?: string\n onValueChange?: (value: string) => void\n}\n\ntype ToggleGroupMultipleProps = {\n type: 'multiple'\n value?: string[]\n defaultValue?: string[]\n onValueChange?: (value: string[]) => void\n}\n\ntype ToggleGroupBaseProps = Omit<\n React.ComponentPropsWithoutRef<'div'>,\n 'defaultValue' | 'dir'\n> & {\n disabled?: boolean\n rovingFocus?: boolean\n orientation?: 'horizontal' | 'vertical'\n dir?: 'ltr' | 'rtl'\n loop?: boolean\n children?: React.ReactNode\n}\n\nexport type ToggleGroupProps = ToggleGroupBaseProps &\n VariantProps<typeof toggleGroupVariants> &\n VariantProps<typeof toggleGroupItemVariants> &\n (ToggleGroupSingleProps | ToggleGroupMultipleProps)\n\nconst ToggleGroup = React.forwardRef<\n React.ElementRef<typeof ToggleGroupPrimitive.Root>,\n ToggleGroupProps\n>(({ className, orientation, variant, size, radius, fontWeight, children, ...props }, ref) => (\n <ToggleGroupPrimitive.Root\n ref={ref}\n className={cn(\n toggleGroupVariants({ orientation }),\n // Attached style for horizontal\n orientation !== 'vertical' && [\n '[&>*:not(:first-child)]:rounded-l-none',\n '[&>*:not(:last-child)]:rounded-r-none',\n '[&>*:not(:first-child)]:-ml-px',\n '[&>*]:relative',\n '[&>*:hover]:z-10',\n '[&>*:focus-visible]:z-10',\n '[&>*:active]:scale-none',\n ],\n // Attached style for vertical\n orientation === 'vertical' && [\n '[&>*:not(:first-child)]:rounded-t-none',\n '[&>*:not(:last-child)]:rounded-b-none',\n '[&>*:not(:first-child)]:-mt-px',\n '[&>*]:relative',\n '[&>*]:w-full',\n '[&>*:hover]:z-10',\n '[&>*:focus-visible]:z-10',\n '[&>*:active]:scale-none',\n ],\n className\n )}\n orientation={orientation}\n {...(props as React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root>)}\n >\n <ToggleGroupContext.Provider value={{ variant, size, radius, fontWeight }}>\n {children}\n </ToggleGroupContext.Provider>\n </ToggleGroupPrimitive.Root>\n))\nToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName\n\nexport interface ToggleGroupItemProps\n extends React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item>,\n Omit<VariantProps<typeof toggleGroupItemVariants>, 'fontWeight'> {\n fontWeight?: 'normal' | 'semibold'\n}\n\n// Icon size for toggle group (5-step scale, Icon+Text mode)\n// xs~sm: 14px, md~default~lg: 16px\nconst iconSizeClasses = {\n xs: '[&>svg]:icon-xs', // 14px\n sm: '[&>svg]:icon-xs', // 14px\n md: '[&>svg]:icon-sm', // 16px\n default: '[&>svg]:icon-sm', // 16px\n lg: '[&>svg]:icon-sm', // 16px\n}\n\nconst ToggleGroupItem = React.forwardRef<\n React.ElementRef<typeof ToggleGroupPrimitive.Item>,\n ToggleGroupItemProps\n>(({ className, variant, size, radius, fontWeight, children, ...props }, ref) => {\n const context = React.useContext(ToggleGroupContext)\n const resolvedSize = size || context.size || 'default'\n\n return (\n <ToggleGroupPrimitive.Item\n ref={ref}\n className={cn(\n toggleGroupItemVariants({\n variant: variant || context.variant,\n size: resolvedSize,\n radius: radius || context.radius,\n fontWeight: fontWeight || context.fontWeight,\n }),\n iconSizeClasses[resolvedSize],\n className\n )}\n {...props}\n >\n {children}\n </ToggleGroupPrimitive.Item>\n )\n})\nToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName\n\nexport { ToggleGroup, ToggleGroupItem, toggleGroupVariants, toggleGroupItemVariants }\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,YAAuB;AACvB,2BAAsC;AACtC,sCAAuC;AACvC,mBAAmB;AAEnB,MAAM,0BAAsB;AAAA,EAC1B;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,aAAa;AAAA,QACX,YAAY;AAAA,QACZ,UAAU;AAAA,MACZ;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,aAAa;AAAA,IACf;AAAA,EACF;AACF;AAEA,MAAM,8BAA0B;AAAA,EAC9B;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SAAS;AAAA,QACT,SAAS;AAAA,MACX;AAAA,MACA,YAAY;AAAA,QACV,QAAQ;AAAA,QACR,UAAU;AAAA,MACZ;AAAA,MACA,MAAM;AAAA,QACJ,IAAI;AAAA;AAAA,QACJ,IAAI;AAAA;AAAA,QACJ,IAAI;AAAA;AAAA,QACJ,SAAS;AAAA;AAAA,QACT,IAAI;AAAA;AAAA,MACN;AAAA,MACA,QAAQ;AAAA,QACN,MAAM;AAAA,QACN,IAAI;AAAA,QACJ,MAAM;AAAA,QACN,SAAS;AAAA,QACT,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,OAAO;AAAA,QACP,OAAO;AAAA,QACP,MAAM;AAAA,MACR;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,MAAM;AAAA,MACN,QAAQ;AAAA,MACR,YAAY;AAAA,IACd;AAAA,EACF;AACF;AAEA,MAAM,qBAAqB,MAAM,cAE/B;AAAA,EACA,SAAS;AAAA,EACT,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,YAAY;AACd,CAAC;AAiCD,MAAM,cAAc,MAAM,WAGxB,CAAC,EAAE,WAAW,aAAa,SAAS,MAAM,QAAQ,YAAY,UAAU,GAAG,MAAM,GAAG,QACpF;AAAA,EAAC,qBAAqB;AAAA,EAArB;AAAA,IACC;AAAA,IACA,eAAW;AAAA,MACT,oBAAoB,EAAE,YAAY,CAAC;AAAA;AAAA,MAEnC,gBAAgB,cAAc;AAAA,QAC5B;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA;AAAA,MAEA,gBAAgB,cAAc;AAAA,QAC5B;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,IACC,GAAI;AAAA;AAAA,EAEL,oCAAC,mBAAmB,UAAnB,EAA4B,OAAO,EAAE,SAAS,MAAM,QAAQ,WAAW,KACrE,QACH;AACF,CACD;AACD,YAAY,cAAc,qBAAqB,KAAK;AAUpD,MAAM,kBAAkB;AAAA,EACtB,IAAI;AAAA;AAAA,EACJ,IAAI;AAAA;AAAA,EACJ,IAAI;AAAA;AAAA,EACJ,SAAS;AAAA;AAAA,EACT,IAAI;AAAA;AACN;AAEA,MAAM,kBAAkB,MAAM,WAG5B,CAAC,EAAE,WAAW,SAAS,MAAM,QAAQ,YAAY,UAAU,GAAG,MAAM,GAAG,QAAQ;AAC/E,QAAM,UAAU,MAAM,WAAW,kBAAkB;AACnD,QAAM,eAAe,QAAQ,QAAQ,QAAQ;AAE7C,SACE;AAAA,IAAC,qBAAqB;AAAA,IAArB;AAAA,MACC;AAAA,MACA,eAAW;AAAA,QACT,wBAAwB;AAAA,UACtB,SAAS,WAAW,QAAQ;AAAA,UAC5B,MAAM;AAAA,UACN,QAAQ,UAAU,QAAQ;AAAA,UAC1B,YAAY,cAAc,QAAQ;AAAA,QACpC,CAAC;AAAA,QACD,gBAAgB,YAAY;AAAA,QAC5B;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,IAEH;AAAA,EACH;AAEJ,CAAC;AACD,gBAAgB,cAAc,qBAAqB,KAAK;","names":[]}
|
|
@@ -67,7 +67,7 @@ const ToggleGroupContext = React.createContext({
|
|
|
67
67
|
radius: "default",
|
|
68
68
|
fontWeight: "normal"
|
|
69
69
|
});
|
|
70
|
-
const
|
|
70
|
+
const ToggleGroup = React.forwardRef(({ className, orientation, variant, size, radius, fontWeight, children, ...props }, ref) => /* @__PURE__ */ React.createElement(
|
|
71
71
|
ToggleGroupPrimitive.Root,
|
|
72
72
|
{
|
|
73
73
|
ref,
|
|
@@ -101,7 +101,7 @@ const ToggleGroupRoot = React.forwardRef(({ className, orientation, variant, siz
|
|
|
101
101
|
},
|
|
102
102
|
/* @__PURE__ */ React.createElement(ToggleGroupContext.Provider, { value: { variant, size, radius, fontWeight } }, children)
|
|
103
103
|
));
|
|
104
|
-
|
|
104
|
+
ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
|
|
105
105
|
const iconSizeClasses = {
|
|
106
106
|
xs: "[&>svg]:icon-xs",
|
|
107
107
|
// 14px
|
|
@@ -137,9 +137,6 @@ const ToggleGroupItem = React.forwardRef(({ className, variant, size, radius, fo
|
|
|
137
137
|
);
|
|
138
138
|
});
|
|
139
139
|
ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
|
|
140
|
-
const ToggleGroup = Object.assign(ToggleGroupRoot, {
|
|
141
|
-
Item: ToggleGroupItem
|
|
142
|
-
});
|
|
143
140
|
export {
|
|
144
141
|
ToggleGroup,
|
|
145
142
|
ToggleGroupItem,
|