@getgreenline/blaze-ui 1.0.49-beta.0 → 1.0.49-beta.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/alert-dialog.d.ts.map +1 -1
- package/dist/components/alert-dialog.js +2 -2
- package/dist/components/badge.js +6 -6
- package/dist/components/button-group.js +5 -5
- package/dist/components/button.js +10 -10
- package/dist/components/chart.js +3 -3
- package/dist/components/command.js +4 -4
- package/dist/components/context-menu.js +2 -2
- package/dist/components/data-table.js +8 -8
- package/dist/components/dialog.js +2 -2
- package/dist/components/drawer.js +1 -1
- package/dist/components/dropdown-menu.js +6 -6
- package/dist/components/field.js +14 -14
- package/dist/components/form.js +1 -1
- package/dist/components/header-app-switcher.js +2 -2
- package/dist/components/hierarchical-select.js +3 -3
- package/dist/components/hover-card.js +1 -1
- package/dist/components/item.js +6 -6
- package/dist/components/login-screen.js +3 -3
- package/dist/components/login-screen.views.js +3 -3
- package/dist/components/menubar.js +1 -1
- package/dist/components/multi-search-select.js +3 -3
- package/dist/components/multi-select.js +3 -3
- package/dist/components/navigation-menu.js +6 -6
- package/dist/components/pagination.js +3 -3
- package/dist/components/popover.js +1 -1
- package/dist/components/resizable.js +2 -2
- package/dist/components/search-bar.js +1 -1
- package/dist/components/select.js +4 -4
- package/dist/components/sheet.js +2 -2
- package/dist/components/sidebar.js +25 -25
- package/dist/components/slider.js +2 -2
- package/dist/components/table.js +6 -6
- package/dist/components/tabs.js +1 -1
- package/dist/components/toggle-group.js +2 -2
- package/dist/components/toggle.js +1 -1
- package/dist/components/tooltip.js +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"alert-dialog.d.ts","sourceRoot":"","sources":["../../src/components/alert-dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,oBAAoB,MAAM,8BAA8B,CAAA;AAMpE,iBAAS,WAAW,CAAC,EACnB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,IAAI,CAAC,2CAExD;AAED,iBAAS,kBAAkB,CAAC,EAC1B,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,OAAO,CAAC,2CAI3D;AAED,iBAAS,iBAAiB,CAAC,EACzB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,MAAM,CAAC,2CAI1D;AAED,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,OAAO,CAAC,2CAW3D;AAED,UAAU,
|
|
1
|
+
{"version":3,"file":"alert-dialog.d.ts","sourceRoot":"","sources":["../../src/components/alert-dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,oBAAoB,MAAM,8BAA8B,CAAA;AAMpE,iBAAS,WAAW,CAAC,EACnB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,IAAI,CAAC,2CAExD;AAED,iBAAS,kBAAkB,CAAC,EAC1B,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,OAAO,CAAC,2CAI3D;AAED,iBAAS,iBAAiB,CAAC,EACzB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,MAAM,CAAC,2CAI1D;AAED,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,OAAO,CAAC,2CAW3D;AAED,UAAU,uBAAwB,SAAQ,KAAK,CAAC,cAAc,CAC5D,OAAO,oBAAoB,CAAC,OAAO,CACpC;IACC,gBAAgB,CAAC,EAAE,MAAM,CAAA;CAC1B;AAED,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,gBAAgB,EAChB,GAAG,KAAK,EACT,EAAE,uBAAuB,2CAgBzB;AAED,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAW7B;AAED,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAW7B;AAED,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,KAAK,CAAC,2CAQzD;AAED,iBAAS,sBAAsB,CAAC,EAC9B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,WAAW,CAAC,2CAQ/D;AAED,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,MAAM,CAAC,2CAO1D;AAED,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,MAAM,CAAC,2CAO1D;AAED,OAAO,EACL,WAAW,EACX,iBAAiB,EACjB,kBAAkB,EAClB,kBAAkB,EAClB,kBAAkB,EAClB,iBAAiB,EACjB,iBAAiB,EACjB,gBAAgB,EAChB,sBAAsB,EACtB,iBAAiB,EACjB,iBAAiB,GAClB,CAAA"}
|
|
@@ -14,10 +14,10 @@ function AlertDialogPortal({ ...props }) {
|
|
|
14
14
|
return (jsx(AlertDialogPrimitive.Portal, { "data-slot": "alert-dialog-portal", ...props }));
|
|
15
15
|
}
|
|
16
16
|
function AlertDialogOverlay({ className, ...props }) {
|
|
17
|
-
return (jsx(AlertDialogPrimitive.Overlay, { "data-slot": "alert-dialog-overlay", className: cn("tw:data-[state=open]:animate-in tw:data-[state=closed]:animate-out tw:data-[state=closed]:fade-out-0 tw:data-[state=open]:fade-in-0 tw:fixed tw:inset-0 tw:z-50 tw:bg-black/50", className), ...props }));
|
|
17
|
+
return (jsx(AlertDialogPrimitive.Overlay, { "data-slot": "alert-dialog-overlay", className: cn("tw:data-[state=open]:animate-in tw:data-[state=closed]:animate-out tw:data-[state=closed]:fill-mode-forwards tw:data-[state=closed]:fade-out-0 tw:data-[state=open]:fade-in-0 tw:fixed tw:inset-0 tw:z-50 tw:bg-black/50", className), ...props }));
|
|
18
18
|
}
|
|
19
19
|
function AlertDialogContent({ className, overlayClassName, ...props }) {
|
|
20
|
-
return (jsxs(AlertDialogPortal, { children: [jsx(AlertDialogOverlay, { className: overlayClassName }), jsx(AlertDialogPrimitive.Content, { "data-slot": "alert-dialog-content", className: cn("tw:bg-background tw:data-[state=open]:animate-in tw:data-[state=closed]:animate-out tw:data-[state=closed]:fade-out-0 tw:data-[state=open]:fade-in-0 tw:data-[state=closed]:zoom-out-95 tw:data-[state=open]:zoom-in-95 tw:fixed tw:top-1/2 tw:left-1/2 tw:z-50 tw:grid tw:w-full tw:max-w-[calc(100%-2rem)] tw:-translate-x-1/2 tw:-translate-y-1/2 tw:gap-4 tw:rounded-lg tw:border tw:p-6 tw:shadow-lg tw:duration-200 tw:sm:max-w-lg", className), ...props, children: jsx(PortalWrapper, { children: props.children }) })] }));
|
|
20
|
+
return (jsxs(AlertDialogPortal, { children: [jsx(AlertDialogOverlay, { className: overlayClassName }), jsx(AlertDialogPrimitive.Content, { "data-slot": "alert-dialog-content", className: cn("tw:bg-background tw:data-[state=open]:animate-in tw:data-[state=closed]:animate-out tw:data-[state=closed]:fill-mode-forwards tw:data-[state=closed]:fade-out-0 tw:data-[state=open]:fade-in-0 tw:data-[state=closed]:zoom-out-95 tw:data-[state=open]:zoom-in-95 tw:fixed tw:top-1/2 tw:left-1/2 tw:z-50 tw:grid tw:w-full tw:max-w-[calc(100%-2rem)] tw:-translate-x-1/2 tw:-translate-y-1/2 tw:gap-4 tw:rounded-lg tw:border tw:p-6 tw:shadow-lg tw:duration-200 tw:sm:max-w-lg", className), ...props, children: jsx(PortalWrapper, { children: props.children }) })] }));
|
|
21
21
|
}
|
|
22
22
|
function AlertDialogHeader({ className, ...props }) {
|
|
23
23
|
return (jsx("div", { "data-slot": "alert-dialog-header", className: cn("tw:flex tw:flex-col tw:gap-2 tw:text-center tw:sm:text-left", className), ...props }));
|
package/dist/components/badge.js
CHANGED
|
@@ -3,14 +3,14 @@ import { Slot } from '@radix-ui/react-slot';
|
|
|
3
3
|
import { cva } from 'class-variance-authority';
|
|
4
4
|
import { cn } from '../lib/utils.js';
|
|
5
5
|
|
|
6
|
-
const badgeVariants = cva("tw:!inline-flex tw:!items-center tw:!justify-center tw:!rounded-md tw:!border tw:!px-2 tw:!py-0.5 tw:!text-[12px] tw:!font-medium tw:!w-fit tw:!whitespace-nowrap tw:!shrink-0 [&>svg]
|
|
6
|
+
const badgeVariants = cva("tw:!inline-flex tw:!items-center tw:!justify-center tw:!rounded-md tw:!border tw:!px-2 tw:!py-0.5 tw:!text-[12px] tw:!font-medium tw:!w-fit tw:!whitespace-nowrap tw:!shrink-0 tw:[&>svg]:!size-3 tw:!gap-1 tw:[&>svg]:!pointer-events-none tw:focus-visible:!border-ring tw:focus-visible:!ring-ring/50 tw:focus-visible:!ring-[3px] tw:aria-invalid:!ring-destructive/20 tw:dark:aria-invalid:!ring-destructive/40 tw:aria-invalid:!border-destructive tw:!transition-[color,box-shadow] tw:!overflow-hidden", {
|
|
7
7
|
variants: {
|
|
8
8
|
variant: {
|
|
9
|
-
default: "tw:!border-transparent tw:!bg-primary tw:!text-primary-foreground [a&]:hover
|
|
10
|
-
secondary: "tw:!border-transparent tw:!bg-secondary tw:!text-secondary-foreground [a&]:hover
|
|
11
|
-
soft: "tw:!border-primary/20 tw:!bg-primary/10 tw:!text-primary dark
|
|
12
|
-
destructive: "tw:!border-transparent tw:!bg-destructive tw:!text-white [a&]:hover
|
|
13
|
-
outline: "tw:!text-foreground [a&]:hover
|
|
9
|
+
default: "tw:!border-transparent tw:!bg-primary tw:!text-primary-foreground tw:[a&]:hover:!bg-primary/90",
|
|
10
|
+
secondary: "tw:!border-transparent tw:!bg-secondary tw:!text-secondary-foreground tw:[a&]:hover:!bg-secondary/90",
|
|
11
|
+
soft: "tw:!border-primary/20 tw:!bg-primary/10 tw:!text-primary tw:dark:!border-primary/30 tw:dark:!bg-primary/20",
|
|
12
|
+
destructive: "tw:!border-transparent tw:!bg-destructive tw:!text-white tw:[a&]:hover:!bg-destructive/90 tw:focus-visible:!ring-destructive/20 tw:dark:focus-visible:!ring-destructive/40 tw:dark:!bg-destructive/60",
|
|
13
|
+
outline: "tw:!text-foreground tw:[a&]:hover:!bg-accent tw:[a&]:hover:!text-accent-foreground",
|
|
14
14
|
},
|
|
15
15
|
},
|
|
16
16
|
defaultVariants: {
|
|
@@ -4,11 +4,11 @@ import { cva } from 'class-variance-authority';
|
|
|
4
4
|
import { cn } from '../lib/utils.js';
|
|
5
5
|
import { Separator } from './separator.js';
|
|
6
6
|
|
|
7
|
-
const buttonGroupVariants = cva("tw:flex tw:w-fit tw:items-stretch [&>*]:focus-visible:
|
|
7
|
+
const buttonGroupVariants = cva("tw:flex tw:w-fit tw:items-stretch tw:[&>*]:focus-visible:z-10 tw:[&>*]:focus-visible:relative tw:[&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit tw:[&>input]:flex-1 tw:has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md tw:has-[>[data-slot=button-group]]:gap-2", {
|
|
8
8
|
variants: {
|
|
9
9
|
orientation: {
|
|
10
|
-
horizontal: "[&>*:not(:first-child)]:
|
|
11
|
-
vertical: "tw:flex-col [&>*:not(:first-child)]:
|
|
10
|
+
horizontal: "tw:[&>*:not(:first-child)]:rounded-l-none tw:[&>*:not(:first-child)]:border-l-0 tw:[&>*:not(:last-child)]:rounded-r-none",
|
|
11
|
+
vertical: "tw:flex-col tw:[&>*:not(:first-child)]:rounded-t-none tw:[&>*:not(:first-child)]:border-t-0 tw:[&>*:not(:last-child)]:rounded-b-none",
|
|
12
12
|
},
|
|
13
13
|
},
|
|
14
14
|
defaultVariants: {
|
|
@@ -20,10 +20,10 @@ function ButtonGroup({ className, orientation, ...props }) {
|
|
|
20
20
|
}
|
|
21
21
|
function ButtonGroupText({ className, asChild = false, ...props }) {
|
|
22
22
|
const Comp = asChild ? Slot : "div";
|
|
23
|
-
return (jsx(Comp, { className: cn("tw:bg-muted tw:flex tw:items-center tw:gap-2 tw:rounded-md tw:border tw:px-4 tw:text-sm tw:font-medium tw:shadow-xs [&_svg]:
|
|
23
|
+
return (jsx(Comp, { className: cn("tw:bg-muted tw:flex tw:items-center tw:gap-2 tw:rounded-md tw:border tw:px-4 tw:text-sm tw:font-medium tw:shadow-xs tw:[&_svg]:pointer-events-none tw:[&_svg:not([class*='size-'])]:size-4", className), ...props }));
|
|
24
24
|
}
|
|
25
25
|
function ButtonGroupSeparator({ className, orientation = "vertical", ...props }) {
|
|
26
|
-
return (jsx(Separator, { "data-slot": "button-group-separator", orientation: orientation, className: cn("tw:bg-input tw:relative
|
|
26
|
+
return (jsx(Separator, { "data-slot": "button-group-separator", orientation: orientation, className: cn("tw:bg-input tw:relative tw:!m-0 tw:self-stretch tw:data-[orientation=vertical]:h-auto", className), ...props }));
|
|
27
27
|
}
|
|
28
28
|
|
|
29
29
|
export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants };
|
|
@@ -5,20 +5,20 @@ import { cva } from 'class-variance-authority';
|
|
|
5
5
|
import { LoaderCircleIcon } from 'lucide-react';
|
|
6
6
|
import { cn } from '../lib/utils.js';
|
|
7
7
|
|
|
8
|
-
const buttonVariants = cva("tw:!relative tw:!inline-flex tw:!items-center tw:!justify-center tw:!gap-2 tw:!whitespace-nowrap tw:rounded-md tw:text-sm tw:!font-medium tw:!transition-all tw:!cursor-pointer disabled
|
|
8
|
+
const buttonVariants = cva("tw:!relative tw:!inline-flex tw:!items-center tw:!justify-center tw:!gap-2 tw:!whitespace-nowrap tw:rounded-md tw:text-sm tw:!font-medium tw:!transition-all tw:!cursor-pointer tw:disabled:!cursor-not-allowed tw:disabled:!pointer-events-none tw:data-[disabled]:!pointer-events-none tw:data-[loading]:!pointer-events-none tw:disabled:!opacity-50 tw:data-[disabled]:!opacity-50 tw:[&_svg]:!pointer-events-none tw:[&_svg:not([class*='size-'])]:!size-4 tw:!shrink-0 tw:[&_svg]:!shrink-0 tw:!outline-none tw:focus-visible:!border-ring tw:focus-visible:!ring-ring/50 tw:focus-visible:!ring-[3px] tw:aria-invalid:!ring-destructive/20 tw:dark:aria-invalid:!ring-destructive/40 tw:aria-invalid:!border-destructive", {
|
|
9
9
|
variants: {
|
|
10
10
|
variant: {
|
|
11
|
-
default: "tw:!bg-primary tw:!text-primary-foreground tw:!shadow-xs hover
|
|
12
|
-
destructive: "tw:!bg-destructive tw:!text-white tw:!shadow-xs hover
|
|
13
|
-
outline: "tw:!border tw:!bg-background tw:!shadow-xs hover
|
|
14
|
-
secondary: "tw:!bg-secondary tw:!text-secondary-foreground tw:!shadow-xs hover
|
|
15
|
-
ghost: "hover
|
|
16
|
-
link: "tw:!text-primary tw:!underline-offset-4 hover
|
|
11
|
+
default: "tw:!bg-primary tw:!text-primary-foreground tw:!shadow-xs tw:hover:!bg-primary/90",
|
|
12
|
+
destructive: "tw:!bg-destructive tw:!text-white tw:!shadow-xs tw:hover:!bg-destructive/90 tw:focus-visible:!ring-destructive/20 tw:dark:focus-visible:!ring-destructive/40 tw:dark:!bg-destructive/60",
|
|
13
|
+
outline: "tw:!border tw:!bg-background tw:!shadow-xs tw:hover:!bg-accent tw:hover:!text-accent-foreground tw:dark:!bg-input/30 tw:dark:!border-input tw:dark:hover:!bg-input/50",
|
|
14
|
+
secondary: "tw:!bg-secondary tw:!text-secondary-foreground tw:!shadow-xs tw:hover:!bg-secondary/80",
|
|
15
|
+
ghost: "tw:hover:!bg-accent tw:hover:!text-accent-foreground tw:dark:hover:!bg-accent/50",
|
|
16
|
+
link: "tw:!text-primary tw:!underline-offset-4 tw:hover:!underline",
|
|
17
17
|
},
|
|
18
18
|
size: {
|
|
19
|
-
default: "tw:!h-9 tw:!px-4 tw:!py-2 has-[>svg]
|
|
20
|
-
sm: "tw:!h-8 tw:!rounded-md tw:!gap-1.5 tw:!px-3 has-[>svg]
|
|
21
|
-
lg: "tw:!h-10 tw:!rounded-md tw:!px-6 has-[>svg]
|
|
19
|
+
default: "tw:!h-9 tw:!px-4 tw:!py-2 tw:has-[>svg]:!px-3",
|
|
20
|
+
sm: "tw:!h-8 tw:!rounded-md tw:!gap-1.5 tw:!px-3 tw:has-[>svg]:!px-2.5",
|
|
21
|
+
lg: "tw:!h-10 tw:!rounded-md tw:!px-6 tw:has-[>svg]:!px-4",
|
|
22
22
|
icon: "tw:!size-9",
|
|
23
23
|
},
|
|
24
24
|
},
|
package/dist/components/chart.js
CHANGED
|
@@ -16,7 +16,7 @@ function useChart() {
|
|
|
16
16
|
function ChartContainer({ id, className, children, config, ...props }) {
|
|
17
17
|
const uniqueId = React.useId();
|
|
18
18
|
const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
|
|
19
|
-
return (jsx(ChartContext.Provider, { value: { config }, children: jsxs("div", { "data-slot": "chart", "data-chart": chartId, className: cn("[&_.recharts-cartesian-axis-tick_text]:
|
|
19
|
+
return (jsx(ChartContext.Provider, { value: { config }, children: jsxs("div", { "data-slot": "chart", "data-chart": chartId, className: cn("tw:[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground tw:[&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 tw:[&_.recharts-curve.recharts-tooltip-cursor]:stroke-border tw:[&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border tw:[&_.recharts-radial-bar-background-sector]:fill-muted tw:[&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted tw:[&_.recharts-reference-line_[stroke='#ccc']]:stroke-border tw:flex tw:aspect-video tw:justify-center tw:text-xs tw:[&_.recharts-dot[stroke='#fff']]:stroke-transparent tw:[&_.recharts-layer]:outline-hidden tw:[&_.recharts-sector]:outline-hidden tw:[&_.recharts-sector[stroke='#fff']]:stroke-transparent tw:[&_.recharts-surface]:outline-hidden", className), ...props, children: [jsx(ChartStyle, { id: chartId, config: config }), jsx(RechartsPrimitive.ResponsiveContainer, { children: children })] }) }));
|
|
20
20
|
}
|
|
21
21
|
const ChartStyle = ({ id, config }) => {
|
|
22
22
|
const colorConfig = Object.entries(config).filter(([, config]) => config.theme || config.color);
|
|
@@ -78,7 +78,7 @@ function ChartTooltipContent({ active, payload, className, indicator = "dot", hi
|
|
|
78
78
|
const key = `${nameKey || item.name || item.dataKey || "value"}`;
|
|
79
79
|
const itemConfig = getPayloadConfigFromPayload(config, item, key);
|
|
80
80
|
const indicatorColor = color || item.payload?.fill || item.color;
|
|
81
|
-
return (jsx("div", { className: cn("[&>svg]:
|
|
81
|
+
return (jsx("div", { className: cn("tw:[&>svg]:text-muted-foreground tw:flex tw:w-full tw:flex-wrap tw:items-stretch tw:gap-2 tw:[&>svg]:h-2.5 tw:[&>svg]:w-2.5", indicator === "dot" && "tw:items-center"), children: formatter && item?.value !== undefined && item.name ? (formatter(item.value, item.name, item, index, item.payload)) : (jsxs(Fragment, { children: [itemConfig?.icon ? (jsx(itemConfig.icon, {})) : (!hideIndicator && (jsx("div", { className: cn("tw:shrink-0 tw:rounded-[2px] tw:border-(--color-border) tw:bg-(--color-bg)", {
|
|
82
82
|
"tw:h-2.5 tw:w-2.5": indicator === "dot",
|
|
83
83
|
"tw:w-1": indicator === "line",
|
|
84
84
|
"tw:w-0 tw:border-[1.5px] tw:border-dashed tw:bg-transparent": indicator === "dashed",
|
|
@@ -100,7 +100,7 @@ function ChartLegendContent({ className, hideIcon = false, payload, verticalAlig
|
|
|
100
100
|
.map((item) => {
|
|
101
101
|
const key = `${nameKey || item.dataKey || "value"}`;
|
|
102
102
|
const itemConfig = getPayloadConfigFromPayload(config, item, key);
|
|
103
|
-
return (jsxs("div", { className: cn("[&>svg]:
|
|
103
|
+
return (jsxs("div", { className: cn("tw:[&>svg]:text-muted-foreground tw:flex tw:items-center tw:gap-1.5 tw:[&>svg]:h-3 tw:[&>svg]:w-3"), children: [itemConfig?.icon && !hideIcon ? (jsx(itemConfig.icon, {})) : (jsx("div", { className: "tw:h-2 tw:w-2 tw:shrink-0 tw:rounded-[2px]", style: {
|
|
104
104
|
backgroundColor: item.color,
|
|
105
105
|
} })), itemConfig?.label] }, String(item.value ?? item.dataKey ?? item.name)));
|
|
106
106
|
}) }));
|
|
@@ -8,10 +8,10 @@ function Command({ className, ...props }) {
|
|
|
8
8
|
return (jsx(Command$1, { "data-slot": "command", className: cn("tw:bg-popover tw:text-popover-foreground tw:flex tw:h-full tw:w-full tw:flex-col tw:overflow-hidden tw:rounded-md", className), ...props }));
|
|
9
9
|
}
|
|
10
10
|
function CommandDialog({ title = "Command Palette", description = "Search for a command to run...", children, className, showCloseButton = true, ...props }) {
|
|
11
|
-
return (jsxs(Dialog, { ...props, children: [jsxs(DialogHeader, { className: "tw:sr-only", children: [jsx(DialogTitle, { children: title }), jsx(DialogDescription, { children: description })] }), jsx(DialogContent, { className: cn("tw:overflow-hidden tw:p-0", className), showCloseButton: showCloseButton, children: jsx(Command, { className: "[&_[cmdk-group-heading]]:
|
|
11
|
+
return (jsxs(Dialog, { ...props, children: [jsxs(DialogHeader, { className: "tw:sr-only", children: [jsx(DialogTitle, { children: title }), jsx(DialogDescription, { children: description })] }), jsx(DialogContent, { className: cn("tw:overflow-hidden tw:p-0", className), showCloseButton: showCloseButton, children: jsx(Command, { className: "tw:[&_[cmdk-group-heading]]:text-muted-foreground tw:**:data-[slot=command-input-wrapper]:h-12 tw:[&_[cmdk-group-heading]]:px-2 tw:[&_[cmdk-group-heading]]:font-medium tw:[&_[cmdk-group]]:px-2 tw:[&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 tw:[&_[cmdk-input-wrapper]_svg]:h-5 tw:[&_[cmdk-input-wrapper]_svg]:w-5 tw:[&_[cmdk-input]]:h-12 tw:[&_[cmdk-item]]:px-2 tw:[&_[cmdk-item]]:py-3 tw:[&_[cmdk-item]_svg]:h-5 tw:[&_[cmdk-item]_svg]:w-5", children: children }) })] }));
|
|
12
12
|
}
|
|
13
13
|
function CommandInput({ className, ...props }) {
|
|
14
|
-
return (jsxs("div", { "data-slot": "command-input-wrapper", className: "tw:flex tw:h-9 tw:items-center tw:gap-2 tw:border-b tw:px-3", children: [jsx(SearchIcon, { className: "tw:size-4 tw:shrink-0 tw:opacity-50" }), jsx(Command$1.Input, { "data-slot": "command-input", className: cn("placeholder:
|
|
14
|
+
return (jsxs("div", { "data-slot": "command-input-wrapper", className: "tw:flex tw:h-9 tw:items-center tw:gap-2 tw:border-b tw:px-3", children: [jsx(SearchIcon, { className: "tw:size-4 tw:shrink-0 tw:opacity-50" }), jsx(Command$1.Input, { "data-slot": "command-input", className: cn("tw:placeholder:text-muted-foreground tw:flex tw:h-10 tw:w-full tw:rounded-md tw:bg-transparent tw:py-3 tw:text-sm tw:outline-hidden tw:disabled:cursor-not-allowed tw:disabled:opacity-50", className), ...props })] }));
|
|
15
15
|
}
|
|
16
16
|
function CommandList({ className, ...props }) {
|
|
17
17
|
return (jsx(Command$1.List, { "data-slot": "command-list", className: cn("tw:max-h-[300px] tw:scroll-py-1 tw:overflow-x-hidden tw:overflow-y-auto", className), ...props }));
|
|
@@ -20,13 +20,13 @@ function CommandEmpty({ ...props }) {
|
|
|
20
20
|
return (jsx(Command$1.Empty, { "data-slot": "command-empty", className: "tw:py-6 tw:text-center tw:text-sm", ...props }));
|
|
21
21
|
}
|
|
22
22
|
function CommandGroup({ className, ...props }) {
|
|
23
|
-
return (jsx(Command$1.Group, { "data-slot": "command-group", className: cn("tw:text-foreground [&_[cmdk-group-heading]]:
|
|
23
|
+
return (jsx(Command$1.Group, { "data-slot": "command-group", className: cn("tw:text-foreground tw:[&_[cmdk-group-heading]]:text-muted-foreground tw:overflow-hidden tw:p-1 tw:[&_[cmdk-group-heading]]:px-2 tw:[&_[cmdk-group-heading]]:py-1.5 tw:[&_[cmdk-group-heading]]:text-xs tw:[&_[cmdk-group-heading]]:font-medium", className), ...props }));
|
|
24
24
|
}
|
|
25
25
|
function CommandSeparator({ className, ...props }) {
|
|
26
26
|
return (jsx(Command$1.Separator, { "data-slot": "command-separator", className: cn("tw:bg-border tw:-mx-1 tw:h-px", className), ...props }));
|
|
27
27
|
}
|
|
28
28
|
function CommandItem({ className, ...props }) {
|
|
29
|
-
return (jsx(Command$1.Item, { "data-slot": "command-item", className: cn("data-[selected=true]:
|
|
29
|
+
return (jsx(Command$1.Item, { "data-slot": "command-item", className: cn("tw:data-[selected=true]:bg-accent tw:data-[selected=true]:text-accent-foreground tw:[&_svg:not([class*='text-'])]:text-muted-foreground tw:relative tw:flex tw:cursor-default tw:items-center tw:gap-2 tw:rounded-sm tw:px-2 tw:py-1.5 tw:text-sm tw:outline-hidden tw:select-none tw:data-[disabled=true]:pointer-events-none tw:data-[disabled=true]:opacity-50 tw:[&_svg]:pointer-events-none tw:[&_svg]:shrink-0 tw:[&_svg:not([class*='size-'])]:size-4", className), ...props }));
|
|
30
30
|
}
|
|
31
31
|
function CommandShortcut({ className, ...props }) {
|
|
32
32
|
return (jsx("span", { "data-slot": "command-shortcut", className: cn("tw:text-muted-foreground tw:ml-auto tw:text-xs tw:tracking-widest", className), ...props }));
|
|
@@ -25,10 +25,10 @@ function ContextMenuSubTrigger({ className, inset, children, ...props }) {
|
|
|
25
25
|
return (jsxs(ContextMenuPrimitive.SubTrigger, { "data-slot": "context-menu-sub-trigger", "data-inset": inset, className: cn("tw:focus:bg-accent tw:focus:text-accent-foreground tw:data-[state=open]:bg-accent tw:data-[state=open]:text-accent-foreground tw:[&_svg:not([class*='text-'])]:text-muted-foreground tw:flex tw:cursor-default tw:items-center tw:rounded-sm tw:px-2 tw:py-1.5 tw:text-sm tw:outline-hidden tw:select-none tw:data-[inset]:pl-8 tw:[&_svg]:pointer-events-none tw:[&_svg]:shrink-0 tw:[&_svg:not([class*='size-'])]:size-4", className), ...props, children: [children, jsx(ChevronRightIcon, { className: "tw:ml-auto" })] }));
|
|
26
26
|
}
|
|
27
27
|
function ContextMenuSubContent({ className, ...props }) {
|
|
28
|
-
return (jsx(ContextMenuPrimitive.SubContent, { "data-slot": "context-menu-sub-content", className: cn("tw:bg-popover tw:text-popover-foreground tw:data-[state=open]:animate-in tw:data-[state=closed]:animate-out tw:data-[state=closed]:fade-out-0 tw:data-[state=open]:fade-in-0 tw:data-[state=closed]:zoom-out-95 tw:data-[state=open]:zoom-in-95 tw:data-[side=bottom]:slide-in-from-top-2 tw:data-[side=left]:slide-in-from-right-2 tw:data-[side=right]:slide-in-from-left-2 tw:data-[side=top]:slide-in-from-bottom-2 tw:z-50 tw:min-w-[8rem] tw:origin-(--radix-context-menu-content-transform-origin) tw:overflow-hidden tw:rounded-md tw:border tw:p-1 tw:shadow-lg", className), ...props }));
|
|
28
|
+
return (jsx(ContextMenuPrimitive.SubContent, { "data-slot": "context-menu-sub-content", className: cn("tw:bg-popover tw:text-popover-foreground tw:data-[state=open]:animate-in tw:data-[state=closed]:animate-out tw:data-[state=closed]:fill-mode-forwards tw:data-[state=closed]:fade-out-0 tw:data-[state=open]:fade-in-0 tw:data-[state=closed]:zoom-out-95 tw:data-[state=open]:zoom-in-95 tw:data-[side=bottom]:slide-in-from-top-2 tw:data-[side=left]:slide-in-from-right-2 tw:data-[side=right]:slide-in-from-left-2 tw:data-[side=top]:slide-in-from-bottom-2 tw:z-50 tw:min-w-[8rem] tw:origin-(--radix-context-menu-content-transform-origin) tw:overflow-hidden tw:rounded-md tw:border tw:p-1 tw:shadow-lg", className), ...props }));
|
|
29
29
|
}
|
|
30
30
|
function ContextMenuContent({ className, ...props }) {
|
|
31
|
-
return (jsx(ContextMenuPrimitive.Portal, { children: jsx(ContextMenuPrimitive.Content, { "data-slot": "context-menu-content", className: cn("tw:bg-popover tw:text-popover-foreground tw:data-[state=open]:animate-in tw:data-[state=closed]:animate-out tw:data-[state=closed]:fade-out-0 tw:data-[state=open]:fade-in-0 tw:data-[state=closed]:zoom-out-95 tw:data-[state=open]:zoom-in-95 tw:data-[side=bottom]:slide-in-from-top-2 tw:data-[side=left]:slide-in-from-right-2 tw:data-[side=right]:slide-in-from-left-2 tw:data-[side=top]:slide-in-from-bottom-2 tw:z-50 tw:max-h-(--radix-context-menu-content-available-height) tw:min-w-[8rem] tw:origin-(--radix-context-menu-content-transform-origin) tw:overflow-x-hidden tw:overflow-y-auto tw:rounded-md tw:border tw:p-1 tw:shadow-md", className), ...props }) }));
|
|
31
|
+
return (jsx(ContextMenuPrimitive.Portal, { children: jsx(ContextMenuPrimitive.Content, { "data-slot": "context-menu-content", className: cn("tw:bg-popover tw:text-popover-foreground tw:data-[state=open]:animate-in tw:data-[state=closed]:animate-out tw:data-[state=closed]:fill-mode-forwards tw:data-[state=closed]:fade-out-0 tw:data-[state=open]:fade-in-0 tw:data-[state=closed]:zoom-out-95 tw:data-[state=open]:zoom-in-95 tw:data-[side=bottom]:slide-in-from-top-2 tw:data-[side=left]:slide-in-from-right-2 tw:data-[side=right]:slide-in-from-left-2 tw:data-[side=top]:slide-in-from-bottom-2 tw:z-50 tw:max-h-(--radix-context-menu-content-available-height) tw:min-w-[8rem] tw:origin-(--radix-context-menu-content-transform-origin) tw:overflow-x-hidden tw:overflow-y-auto tw:rounded-md tw:border tw:p-1 tw:shadow-md", className), ...props }) }));
|
|
32
32
|
}
|
|
33
33
|
function ContextMenuItem({ className, inset, variant = "default", ...props }) {
|
|
34
34
|
return (jsx(ContextMenuPrimitive.Item, { "data-slot": "context-menu-item", "data-inset": inset, "data-variant": variant, className: cn("tw:focus:bg-accent tw:focus:text-accent-foreground tw:data-[variant=destructive]:text-destructive tw:data-[variant=destructive]:focus:bg-destructive/10 tw:dark:data-[variant=destructive]:focus:bg-destructive/20 tw:data-[variant=destructive]:focus:text-destructive tw:data-[variant=destructive]:*:[svg]:!text-destructive tw:[&_svg:not([class*='text-'])]:text-muted-foreground tw:relative tw:flex tw:cursor-default tw:items-center tw:gap-2 tw:rounded-sm tw:px-2 tw:py-1.5 tw:text-sm tw:outline-hidden tw:select-none tw:data-[disabled]:pointer-events-none tw:data-[disabled]:opacity-50 tw:data-[inset]:pl-8 tw:[&_svg]:pointer-events-none tw:[&_svg]:shrink-0 tw:[&_svg:not([class*='size-'])]:size-4", className), ...props }));
|
|
@@ -229,8 +229,8 @@ function DataTable({ columns, data, onRowClick, onSelectionChange, selectedRowId
|
|
|
229
229
|
setDraggedRowId(null);
|
|
230
230
|
setDragOverRowId(null);
|
|
231
231
|
};
|
|
232
|
-
return (jsxs(React.Fragment, { children: [jsxs("tr", { className: cn("tw:border-b tw:transition-colors hover:
|
|
233
|
-
"tw:cursor-pointer tw:focus-visible:outline-none tw:focus-visible:ring-2 tw:focus-visible:ring-ring tw:focus-visible:ring-inset", rowBgClass, isDragging && "tw:opacity-50", isDragOver && "tw:ring-2 tw:ring-primary tw:ring-inset"), tabIndex: isRowClickable ? 0 : undefined, onClick: isRowClickable ? handleRowClick : undefined, onKeyDown: isRowClickable ? handleRowKeyDown : undefined, draggable: reorderable, onDragStart: reorderable ? handleDragStart : undefined, onDragEnd: reorderable ? handleDragEnd : undefined, onDragOver: reorderable ? handleDragOver : undefined, onDragLeave: reorderable ? handleDragLeave : undefined, onDrop: reorderable ? handleDrop : undefined, children: [isExpandable && (jsx("td", { className: cn("tw:p-2 tw:w-12", rowBgClass), onClick: (event) => event.stopPropagation(), children: jsx("div", { style: { paddingLeft: indentPadding }, children: canExpand ? (jsx("button", { onClick: () => toggleRowExpansion(row.id), className: "tw:flex tw:items-center tw:justify-center hover:
|
|
232
|
+
return (jsxs(React.Fragment, { children: [jsxs("tr", { className: cn("tw:border-b tw:transition-colors tw:hover:bg-accent/50", isRowClickable &&
|
|
233
|
+
"tw:cursor-pointer tw:focus-visible:outline-none tw:focus-visible:ring-2 tw:focus-visible:ring-ring tw:focus-visible:ring-inset", rowBgClass, isDragging && "tw:opacity-50", isDragOver && "tw:ring-2 tw:ring-primary tw:ring-inset"), tabIndex: isRowClickable ? 0 : undefined, onClick: isRowClickable ? handleRowClick : undefined, onKeyDown: isRowClickable ? handleRowKeyDown : undefined, draggable: reorderable, onDragStart: reorderable ? handleDragStart : undefined, onDragEnd: reorderable ? handleDragEnd : undefined, onDragOver: reorderable ? handleDragOver : undefined, onDragLeave: reorderable ? handleDragLeave : undefined, onDrop: reorderable ? handleDrop : undefined, children: [isExpandable && (jsx("td", { className: cn("tw:p-2 tw:w-12", rowBgClass), onClick: (event) => event.stopPropagation(), children: jsx("div", { style: { paddingLeft: indentPadding }, children: canExpand ? (jsx("button", { onClick: () => toggleRowExpansion(row.id), className: "tw:flex tw:items-center tw:justify-center tw:hover:bg-accent tw:rounded tw:p-1", "aria-label": isExpanded ? "Collapse row" : "Expand row", "aria-expanded": isExpanded, children: isExpanded ? (jsx(ChevronDownIcon, { className: "tw:text-muted-foreground tw:size-4 tw:shrink-0 tw:transition-transform tw:duration-200" })) : (jsx(ChevronRightIcon, { className: "tw:text-muted-foreground tw:size-4 tw:shrink-0 tw:transition-transform tw:duration-200" })) })) : (jsx("span", { className: "tw:w-6" })) }) })), hasRowSelection && (jsx("td", { className: cn("tw:p-2 tw:w-12", rowBgClass), onClick: (event) => event.stopPropagation(), children: jsx("div", { className: "tw:flex tw:items-center tw:justify-center", children: jsx(Checkbox, { checked: selectedRows.has(row.id), onCheckedChange: () => toggleRowSelection(row.id), "aria-label": `Select row ${rowIndex + 1}`, className: "tw:h-[22px] tw:w-[22px]" }) }) })), reorderable && (jsx("td", { className: cn("tw:p-2 tw:w-12", rowBgClass), onClick: (event) => event.stopPropagation(), children: jsxs("div", { className: "tw:flex tw:flex-col tw:items-center tw:gap-0.5", children: [jsx("button", { onClick: () => onReorder?.(row.id, "up", parentRow?.id), className: "tw:flex tw:items-center tw:justify-center tw:hover:bg-accent tw:rounded tw:p-0.5 tw:text-muted-foreground tw:hover:text-foreground tw:transition-colors", disabled: rowIndex === 0, "aria-label": "Move row up", children: jsx(ChevronUpIcon, { className: cn("tw:size-4", rowIndex === 0 && "tw:opacity-30") }) }), jsx("button", { onClick: () => onReorder?.(row.id, "down", parentRow?.id), className: "tw:flex tw:items-center tw:justify-center tw:hover:bg-accent tw:rounded tw:p-0.5 tw:text-muted-foreground tw:hover:text-foreground tw:transition-colors", disabled: rowIndex === totalSiblings - 1, "aria-label": "Move row down", children: jsx(ChevronDownIcon, { className: cn("tw:size-4", rowIndex === totalSiblings - 1 && "tw:opacity-30") }) })] }) })), visibleColumns.map((column, colIndex) => {
|
|
234
234
|
const clickableField = getClickableField(column.key);
|
|
235
235
|
const cellContent = column.render
|
|
236
236
|
? column.render(row[column.key], row, rowIndex, depth)
|
|
@@ -246,9 +246,9 @@ function DataTable({ columns, data, onRowClick, onSelectionChange, selectedRowId
|
|
|
246
246
|
}, children: clickableField ? (jsx("button", { type: "button", onClick: (event) => {
|
|
247
247
|
event.stopPropagation();
|
|
248
248
|
clickableField.onClick(row);
|
|
249
|
-
}, className: "tw:inline tw:cursor-pointer tw:appearance-none tw:border-0 tw:bg-transparent tw:p-0 tw:text-inherit tw:font-[inherit] tw:transition-colors hover
|
|
250
|
-
}), showActionsColumn && (jsx("td", { className: cn("tw:p-2 tw:text-right tw:sticky tw:right-0", rowBgClass), onClick: (event) => event.stopPropagation(), children: visibleActionsForRow.length > 0 && (jsxs(Menu.Root, { modal: false, children: [jsx(Menu.Trigger, { id: `base-ui-row-action-${row.id}`, render: (props) => (jsx(Button, { variant: "ghost", size: "icon", className: "tw:h-8 tw:w-8", "aria-label": "Row actions", ...props, id: `base-ui-row-action-${row.id}`, children: jsx(MoreHorizontalIcon, { className: "tw:size-4" }) })) }), jsx(Menu.Portal, { children: jsx(Menu.Positioner, { side: "bottom", align: "end", sideOffset: 4, collisionPadding: 8, children: jsx(Menu.Popup, { "aria-labelledby": "base-ui-toggle-columns-trigger", className: cn("tw:bg-popover tw:font-sans tw:text-popover-foreground tw:data-[state=open]:animate-in tw:data-[state=closed]:animate-out tw:data-[state=closed]:fade-out-0 tw:data-[state=open]:fade-in-0 tw:data-[state=closed]:zoom-out-95 tw:data-[state=open]:zoom-in-95 tw:data-[side=bottom]:slide-in-from-top-2 tw:data-[side=left]:slide-in-from-right-2 tw:data-[side=right]:slide-in-from-left-2 tw:data-[side=top]:slide-in-from-bottom-2 tw:z-50 tw:min-w-[8rem] tw:overflow-x-hidden tw:overflow-y-auto tw:rounded-md tw:border tw:p-1 tw:shadow-md"), children: visibleActionsForRow.map((action, index) => (jsxs(Menu.Item, { onClick: () => action.onClick(row), className: cn("tw:focus:bg-accent tw:focus:text-accent-foreground tw:relative tw:flex tw:cursor-default tw:items-center tw:gap-2 tw:rounded-sm tw:px-2 tw:py-1.5 tw:text-[14px] tw:outline-hidden tw:select-none tw:data-[disabled]:pointer-events-none tw:data-[disabled]:opacity-50", action.variant === "destructive" &&
|
|
251
|
-
"tw:text-destructive focus:
|
|
249
|
+
}, className: "tw:inline tw:cursor-pointer tw:appearance-none tw:border-0 tw:bg-transparent tw:p-0 tw:text-inherit tw:font-[inherit] tw:transition-colors tw:hover:!text-primary/80 tw:hover:underline", children: cellContent })) : (cellContent) }) }, column.key));
|
|
250
|
+
}), showActionsColumn && (jsx("td", { className: cn("tw:p-2 tw:text-right tw:sticky tw:right-0", rowBgClass), onClick: (event) => event.stopPropagation(), children: visibleActionsForRow.length > 0 && (jsxs(Menu.Root, { modal: false, children: [jsx(Menu.Trigger, { id: `base-ui-row-action-${row.id}`, render: (props) => (jsx(Button, { variant: "ghost", size: "icon", className: "tw:h-8 tw:w-8", "aria-label": "Row actions", ...props, id: `base-ui-row-action-${row.id}`, children: jsx(MoreHorizontalIcon, { className: "tw:size-4" }) })) }), jsx(Menu.Portal, { children: jsx(Menu.Positioner, { side: "bottom", align: "end", sideOffset: 4, collisionPadding: 8, children: jsx(Menu.Popup, { "aria-labelledby": "base-ui-toggle-columns-trigger", className: cn("tw:bg-popover tw:font-sans tw:text-popover-foreground tw:data-[state=open]:animate-in tw:data-[state=closed]:animate-out tw:data-[state=closed]:fill-mode-forwards tw:data-[state=closed]:fade-out-0 tw:data-[state=open]:fade-in-0 tw:data-[state=closed]:zoom-out-95 tw:data-[state=open]:zoom-in-95 tw:data-[side=bottom]:slide-in-from-top-2 tw:data-[side=left]:slide-in-from-right-2 tw:data-[side=right]:slide-in-from-left-2 tw:data-[side=top]:slide-in-from-bottom-2 tw:z-50 tw:min-w-[8rem] tw:overflow-x-hidden tw:overflow-y-auto tw:rounded-md tw:border tw:p-1 tw:shadow-md"), children: visibleActionsForRow.map((action, index) => (jsxs(Menu.Item, { onClick: () => action.onClick(row), className: cn("tw:focus:bg-accent tw:focus:text-accent-foreground tw:relative tw:flex tw:cursor-default tw:items-center tw:gap-2 tw:rounded-sm tw:px-2 tw:py-1.5 tw:text-[14px] tw:outline-hidden tw:select-none tw:data-[disabled]:pointer-events-none tw:data-[disabled]:opacity-50", action.variant === "destructive" &&
|
|
251
|
+
"tw:text-destructive tw:focus:text-destructive"), children: [action.icon && (jsx("span", { className: "tw:mr-2", children: action.icon })), action.label] }, index))) }) }) })] })) }))] }), expandable && !treeData && isExpanded && renderExpandedRow && (jsx("tr", { className: "tw:border-b tw:bg-muted/30", children: jsx("td", { colSpan: visibleColumns.length +
|
|
252
252
|
(showActionsColumn ? 1 : 0) +
|
|
253
253
|
(hasRowSelection ? 1 : 0) +
|
|
254
254
|
(isExpandable ? 1 : 0) +
|
|
@@ -328,7 +328,7 @@ function DataTable({ columns, data, onRowClick, onSelectionChange, selectedRowId
|
|
|
328
328
|
});
|
|
329
329
|
return `${totalWidth}px`;
|
|
330
330
|
};
|
|
331
|
-
return (jsxs("div", { className: cn("tw:w-full tw:h-full tw:flex tw:flex-col", className), children: [jsxs("div", { className: "tw:relative tw:flex-1 tw:flex tw:flex-col tw:min-h-0 tw:overflow-hidden tw:rounded-md tw:border", children: [jsx("div", { ref: scrollContainerRef, className: "tw:flex-1 tw:overflow-auto tw:bg-card [&::-webkit-scrollbar]:
|
|
331
|
+
return (jsxs("div", { className: cn("tw:w-full tw:h-full tw:flex tw:flex-col", className), children: [jsxs("div", { className: "tw:relative tw:flex-1 tw:flex tw:flex-col tw:min-h-0 tw:overflow-hidden tw:rounded-md tw:border", children: [jsx("div", { ref: scrollContainerRef, className: "tw:flex-1 tw:overflow-auto tw:bg-card tw:[&::-webkit-scrollbar]:h-2 tw:[&::-webkit-scrollbar]:w-2 tw:[&::-webkit-scrollbar-track]:bg-muted tw:[&::-webkit-scrollbar-thumb]:bg-muted-foreground/30 tw:[&::-webkit-scrollbar-thumb]:rounded-full tw:hover:[&::-webkit-scrollbar-thumb]:bg-muted-foreground/50", children: jsxs("table", { className: "tw:w-full tw:table-fixed tw:caption-bottom tw:text-sm", role: "grid", "aria-busy": loading, style: { minWidth: calculateMinTableWidth() }, children: [jsx("thead", { className: "tw:border-b tw:sticky tw:top-0 tw:z-10 tw:bg-card", children: jsxs("tr", { children: [isExpandable && (jsx("th", { scope: "col", className: "tw:h-10 tw:w-12 tw:px-2" })), hasRowSelection && (jsx("th", { scope: "col", className: "tw:h-10 tw:w-12 tw:px-2", children: jsx("div", { className: "tw:flex tw:items-center tw:justify-center", children: jsx(Checkbox, { checked: data.length > 0 &&
|
|
332
332
|
data.every((row) => selectedRows.has(row.id)), onCheckedChange: toggleAllRows, "aria-label": "Select all rows", className: "tw:h-[22px] tw:w-[22px]" }) }) })), reorderable && (jsx("th", { scope: "col", className: "tw:h-10 tw:w-12 tw:px-2" })), visibleColumns.map((column) => (jsx("th", { scope: "col", "aria-sort": column.sortable && sortConfig.key === column.key
|
|
333
333
|
? sortConfig.direction === "asc"
|
|
334
334
|
? "ascending"
|
|
@@ -341,7 +341,7 @@ function DataTable({ columns, data, onRowClick, onSelectionChange, selectedRowId
|
|
|
341
341
|
: sortConfig.direction === "desc"
|
|
342
342
|
? ", currently sorted descending"
|
|
343
343
|
: ""
|
|
344
|
-
: ""}`, className: cn("tw:flex tw:items-center hover:
|
|
344
|
+
: ""}`, className: cn("tw:flex tw:items-center tw:hover:text-foreground/80 tw:transition-colors", loading && "tw:opacity-50 tw:cursor-not-allowed"), children: [column.label, getSortIcon(column.key)] })) : (column.label) }, column.key))), showActionsColumn && (jsx("th", { scope: "col", className: "tw:h-10 tw:w-20 tw:px-2 tw:sticky tw:right-0 tw:bg-card", children: jsx("div", { className: "tw:flex tw:items-center tw:justify-end tw:pr-1", children: showColumnVisibility && (jsxs(Menu.Root, { modal: false, children: [jsx(Menu.Trigger, { id: "base-ui-toggle-columns-trigger", render: (props) => (jsx(Button, { variant: "ghost", size: "icon", className: "tw:h-8 tw:w-8", "aria-label": "Toggle column visibility", ...props, id: "base-ui-toggle-columns-trigger", children: jsx(SettingsIcon, { className: "tw:size-5 tw:text-muted-foreground" }) })) }), jsx(Menu.Portal, { children: jsx(Menu.Positioner, { side: "bottom", align: "end", sideOffset: 4, collisionPadding: 8, children: jsx(Menu.Popup, { "aria-labelledby": `base-ui-toggle-columns-trigger`, className: cn("tw:bg-popover tw:font-sans tw:text-popover-foreground tw:data-[state=open]:animate-in tw:data-[state=closed]:animate-out tw:data-[state=closed]:fill-mode-forwards tw:data-[state=closed]:fade-out-0 tw:data-[state=open]:fade-in-0 tw:data-[state=closed]:zoom-out-95 tw:data-[state=open]:zoom-in-95 tw:data-[side=bottom]:slide-in-from-top-2 tw:data-[side=left]:slide-in-from-right-2 tw:data-[side=right]:slide-in-from-left-2 tw:data-[side=top]:slide-in-from-bottom-2 tw:z-50 tw:min-w-[8rem] tw:overflow-x-hidden tw:overflow-y-auto tw:rounded-md tw:border tw:p-1 tw:shadow-md", menuPopupClassName), children: jsxs(Menu.Group, { children: [jsx(Menu.GroupLabel, { className: "tw:px-2 tw:py-1.5 tw:text-[14px] tw:font-medium", children: "Toggle Columns" }), jsx("div", { className: "tw:bg-border tw:-mx-1 tw:my-1 tw:h-px" }), filterableColumns.map((column) => {
|
|
345
345
|
const isVisible = !hiddenColumns.includes(column.key);
|
|
346
346
|
return (jsxs(Menu.Item, { onClick: () => toggleColumnVisibility(column.key), closeOnClick: false, className: cn("tw:focus:bg-accent tw:focus:text-accent-foreground tw:relative tw:flex tw:cursor-default tw:items-center tw:gap-2 tw:rounded-sm tw:py-1.5 tw:pr-2 tw:pl-8 tw:text-[14px] tw:outline-hidden tw:select-none tw:data-[disabled]:pointer-events-none tw:data-[disabled]:opacity-50"), children: [jsx("span", { className: "tw:pointer-events-none tw:absolute tw:left-2 tw:flex tw:size-3.5 tw:items-center tw:justify-center", children: isVisible && (jsx(CheckIcon, { className: "tw:size-4" })) }), column.label] }, column.key));
|
|
347
347
|
})] }) }) }) })] })) }) }))] }) }), jsx("tbody", { className: "tw:relative", children: data.length === 0 && !loading ? (jsx("tr", { children: jsx("td", { colSpan: visibleColumns.length +
|
|
@@ -358,7 +358,7 @@ function DataTable({ columns, data, onRowClick, onSelectionChange, selectedRowId
|
|
|
358
358
|
const options = pagination.pageSizeOptions ?? DEFAULT_PAGE_SIZE_OPTIONS;
|
|
359
359
|
if (options.length === 0)
|
|
360
360
|
return jsx("div", {});
|
|
361
|
-
return (jsxs("div", { className: "tw:flex tw:items-center tw:gap-2 tw:z-10", children: [jsx("span", { className: "tw:text-[14px] tw:text-muted-foreground tw:whitespace-nowrap", id: "rows-per-page-label", children: "Rows per page:" }), jsxs(Select, { value: String(pagination.pageSize ?? options[0]), onValueChange: (val) => !loading && pagination.onPageSizeChange?.(Number(val)), disabled: loading, children: [jsx(SelectTrigger, { id: "base-ui-pagination-trigger", className: "tw:flex tw:h-[32px] tw:w-[70px] tw:items-center tw:justify-between tw:rounded-md tw:border tw:border-input tw:bg-transparent tw:px-3 tw:py-2 tw:text-[14px] tw:shadow-sm tw:ring-offset-background placeholder:
|
|
361
|
+
return (jsxs("div", { className: "tw:flex tw:items-center tw:gap-2 tw:z-10", children: [jsx("span", { className: "tw:text-[14px] tw:text-muted-foreground tw:whitespace-nowrap", id: "rows-per-page-label", children: "Rows per page:" }), jsxs(Select, { value: String(pagination.pageSize ?? options[0]), onValueChange: (val) => !loading && pagination.onPageSizeChange?.(Number(val)), disabled: loading, children: [jsx(SelectTrigger, { id: "base-ui-pagination-trigger", className: "tw:flex tw:h-[32px] tw:w-[70px] tw:items-center tw:justify-between tw:rounded-md tw:border tw:border-input tw:bg-transparent tw:px-3 tw:py-2 tw:text-[14px] tw:shadow-sm tw:ring-offset-background tw:placeholder:text-muted-foreground tw:focus:outline-none tw:focus:ring-1 tw:focus:ring-ring tw:disabled:cursor-not-allowed tw:disabled:opacity-50", children: jsx(SelectValue, {}) }), jsx(SelectContent, { side: "top", align: "end", className: selectContentClassName, children: options.map((size) => (jsx(SelectItem, { value: String(size), children: size }, size))) })] })] }));
|
|
362
362
|
})(), pagination.showTotalItems &&
|
|
363
363
|
pagination.totalItems !== undefined && (jsx("div", { className: "tw:absolute tw:left-1/2 tw:-translate-x-1/2 tw:flex tw:justify-center tw:items-center", children: jsxs("span", { className: "tw:text-[14px] tw:text-muted-foreground", children: ["Total: ", pagination.totalItems] }) })), jsx("div", { className: "tw:z-10", children: jsx(Pagination, { className: "tw:!mx-0 tw:!w-auto", "aria-label": "Table pagination", children: jsxs(PaginationContent, { children: [jsx(PaginationItem, { children: jsx(PaginationPrevious, { href: "#", onClick: (e) => {
|
|
364
364
|
e.preventDefault();
|
|
@@ -16,10 +16,10 @@ function DialogClose({ ...props }) {
|
|
|
16
16
|
return jsx(DialogPrimitive.Close, { "data-slot": "dialog-close", ...props });
|
|
17
17
|
}
|
|
18
18
|
function DialogOverlay({ className, ...props }) {
|
|
19
|
-
return (jsx(DialogPrimitive.Overlay, { "data-slot": "dialog-overlay", className: cn("tw:data-[state=open]:animate-in tw:data-[state=closed]:animate-out tw:data-[state=closed]:fade-out-0 tw:data-[state=open]:fade-in-0 tw:fixed tw:inset-0 tw:z-50 tw:bg-black/50", className), ...props }));
|
|
19
|
+
return (jsx(DialogPrimitive.Overlay, { "data-slot": "dialog-overlay", className: cn("tw:data-[state=open]:animate-in tw:data-[state=closed]:animate-out tw:data-[state=closed]:fill-mode-forwards tw:data-[state=closed]:fade-out-0 tw:data-[state=open]:fade-in-0 tw:fixed tw:inset-0 tw:z-50 tw:bg-black/50", className), ...props }));
|
|
20
20
|
}
|
|
21
21
|
function DialogContent({ className, children, showCloseButton = true, ...props }) {
|
|
22
|
-
return (jsxs(DialogPortal, { "data-slot": "dialog-portal", children: [jsx(DialogOverlay, {}), jsxs(DialogPrimitive.Content, { "data-slot": "dialog-content", className: cn("tw:bg-background tw:data-[state=open]:animate-in tw:data-[state=closed]:animate-out tw:data-[state=closed]:fade-out-0 tw:data-[state=open]:fade-in-0 tw:data-[state=closed]:zoom-out-95 tw:data-[state=open]:zoom-in-95 tw:fixed tw:top-[50%] tw:left-[50%] tw:z-50 tw:grid tw:w-full tw:max-w-[calc(100%-2rem)] tw:translate-x-[-50%] tw:translate-y-[-50%] tw:gap-4 tw:rounded-lg tw:border tw:p-6 tw:shadow-lg tw:duration-200 tw:sm:max-w-lg", className), ...props, children: [children, showCloseButton && (jsxs(DialogPrimitive.Close, { "data-slot": "dialog-close", className: "tw:ring-offset-background tw:focus:ring-ring tw:data-[state=open]:bg-accent tw:data-[state=open]:text-muted-foreground tw:absolute tw:top-4 tw:right-4 tw:rounded-xs tw:opacity-70 tw:transition-opacity tw:hover:opacity-100 tw:focus:ring-2 tw:focus:ring-offset-2 tw:focus:outline-hidden tw:disabled:pointer-events-none tw:[&_svg]:pointer-events-none tw:[&_svg]:shrink-0 tw:[&_svg:not([class*='size-'])]:size-4", children: [jsx(XIcon, {}), jsx("span", { className: "tw:sr-only", children: "Close" })] }))] })] }));
|
|
22
|
+
return (jsxs(DialogPortal, { "data-slot": "dialog-portal", children: [jsx(DialogOverlay, {}), jsxs(DialogPrimitive.Content, { "data-slot": "dialog-content", className: cn("tw:bg-background tw:data-[state=open]:animate-in tw:data-[state=closed]:animate-out tw:data-[state=closed]:fill-mode-forwards tw:data-[state=closed]:fade-out-0 tw:data-[state=open]:fade-in-0 tw:data-[state=closed]:zoom-out-95 tw:data-[state=open]:zoom-in-95 tw:fixed tw:top-[50%] tw:left-[50%] tw:z-50 tw:grid tw:w-full tw:max-w-[calc(100%-2rem)] tw:translate-x-[-50%] tw:translate-y-[-50%] tw:gap-4 tw:rounded-lg tw:border tw:p-6 tw:shadow-lg tw:duration-200 tw:sm:max-w-lg", className), ...props, children: [children, showCloseButton && (jsxs(DialogPrimitive.Close, { "data-slot": "dialog-close", className: "tw:ring-offset-background tw:focus:ring-ring tw:data-[state=open]:bg-accent tw:data-[state=open]:text-muted-foreground tw:absolute tw:top-4 tw:right-4 tw:rounded-xs tw:opacity-70 tw:transition-opacity tw:hover:opacity-100 tw:focus:ring-2 tw:focus:ring-offset-2 tw:focus:outline-hidden tw:disabled:pointer-events-none tw:[&_svg]:pointer-events-none tw:[&_svg]:shrink-0 tw:[&_svg:not([class*='size-'])]:size-4", children: [jsx(XIcon, {}), jsx("span", { className: "tw:sr-only", children: "Close" })] }))] })] }));
|
|
23
23
|
}
|
|
24
24
|
function DialogHeader({ className, ...props }) {
|
|
25
25
|
return (jsx("div", { "data-slot": "dialog-header", className: cn("tw:flex tw:flex-col tw:gap-2 tw:text-center tw:sm:text-left", className), ...props }));
|
|
@@ -15,7 +15,7 @@ function DrawerClose({ ...props }) {
|
|
|
15
15
|
return jsx(Drawer$1.Close, { "data-slot": "drawer-close", ...props });
|
|
16
16
|
}
|
|
17
17
|
function DrawerOverlay({ className, ...props }) {
|
|
18
|
-
return (jsx(Drawer$1.Overlay, { "data-slot": "drawer-overlay", className: cn("tw:data-[state=open]:animate-in tw:data-[state=closed]:animate-out tw:data-[state=closed]:fade-out-0 tw:data-[state=open]:fade-in-0 tw:fixed tw:inset-0 tw:z-50 tw:bg-black/50", className), ...props }));
|
|
18
|
+
return (jsx(Drawer$1.Overlay, { "data-slot": "drawer-overlay", className: cn("tw:data-[state=open]:animate-in tw:data-[state=closed]:animate-out tw:data-[state=closed]:fill-mode-forwards tw:data-[state=closed]:fade-out-0 tw:data-[state=open]:fade-in-0 tw:fixed tw:inset-0 tw:z-50 tw:bg-black/50", className), ...props }));
|
|
19
19
|
}
|
|
20
20
|
function DrawerContent({ className, children, ...props }) {
|
|
21
21
|
return (jsxs(DrawerPortal, { "data-slot": "drawer-portal", children: [jsx(DrawerOverlay, {}), jsxs(Drawer$1.Content, { "data-slot": "drawer-content", className: cn("tw:group/drawer-content tw:bg-background tw:fixed tw:z-50 tw:flex tw:h-auto tw:flex-col", "tw:data-[vaul-drawer-direction=top]:inset-x-0 tw:data-[vaul-drawer-direction=top]:top-0 tw:data-[vaul-drawer-direction=top]:mb-24 tw:data-[vaul-drawer-direction=top]:max-h-[80vh] tw:data-[vaul-drawer-direction=top]:rounded-b-lg tw:data-[vaul-drawer-direction=top]:border-b", "tw:data-[vaul-drawer-direction=bottom]:inset-x-0 tw:data-[vaul-drawer-direction=bottom]:bottom-0 tw:data-[vaul-drawer-direction=bottom]:mt-24 tw:data-[vaul-drawer-direction=bottom]:max-h-[80vh] tw:data-[vaul-drawer-direction=bottom]:rounded-t-lg tw:data-[vaul-drawer-direction=bottom]:border-t", "tw:data-[vaul-drawer-direction=right]:inset-y-0 tw:data-[vaul-drawer-direction=right]:right-0 tw:data-[vaul-drawer-direction=right]:w-3/4 tw:data-[vaul-drawer-direction=right]:border-l tw:data-[vaul-drawer-direction=right]:sm:max-w-sm", "tw:data-[vaul-drawer-direction=left]:inset-y-0 tw:data-[vaul-drawer-direction=left]:left-0 tw:data-[vaul-drawer-direction=left]:w-3/4 tw:data-[vaul-drawer-direction=left]:border-r tw:data-[vaul-drawer-direction=left]:sm:max-w-sm", className), ...props, children: [jsx("div", { className: "tw:bg-muted tw:mx-auto tw:mt-4 tw:hidden tw:h-2 tw:w-[100px] tw:shrink-0 tw:rounded-full tw:group-data-[vaul-drawer-direction=bottom]/drawer-content:block" }), children] })] }));
|
|
@@ -13,13 +13,13 @@ function DropdownMenuTrigger({ ...props }) {
|
|
|
13
13
|
return (jsx(DropdownMenuPrimitive.Trigger, { "data-slot": "dropdown-menu-trigger", ...props }));
|
|
14
14
|
}
|
|
15
15
|
function DropdownMenuContent({ className, sideOffset = 4, ...props }) {
|
|
16
|
-
return (jsx(DropdownMenuPrimitive.Portal, { children: jsx(DropdownMenuPrimitive.Content, { "data-slot": "dropdown-menu-content", sideOffset: sideOffset, className: cn("tw:!bg-popover tw:!text-popover-foreground data-[state=open]
|
|
16
|
+
return (jsx(DropdownMenuPrimitive.Portal, { children: jsx(DropdownMenuPrimitive.Content, { "data-slot": "dropdown-menu-content", sideOffset: sideOffset, className: cn("tw:!bg-popover tw:!text-popover-foreground tw:data-[state=open]:!animate-in tw:data-[state=closed]:!animate-out tw:data-[state=closed]:!fill-mode-forwards tw:data-[state=closed]:!fade-out-0 tw:data-[state=open]:!fade-in-0 tw:data-[state=closed]:!zoom-out-95 tw:data-[state=open]:!zoom-in-95 tw:data-[side=bottom]:!slide-in-from-top-2 tw:data-[side=left]:!slide-in-from-right-2 tw:data-[side=right]:!slide-in-from-left-2 tw:data-[side=top]:!slide-in-from-bottom-2 tw:!z-50 tw:!max-h-(--radix-dropdown-menu-content-available-height) tw:!min-w-[8rem] tw:!origin-(--radix-dropdown-menu-content-transform-origin) tw:!overflow-x-hidden tw:!overflow-y-auto tw:!rounded-md tw:!border tw:!p-1 tw:!shadow-md", className), ...props }) }));
|
|
17
17
|
}
|
|
18
18
|
function DropdownMenuGroup({ ...props }) {
|
|
19
19
|
return (jsx(DropdownMenuPrimitive.Group, { "data-slot": "dropdown-menu-group", ...props }));
|
|
20
20
|
}
|
|
21
21
|
function DropdownMenuItem({ className, inset, variant = "default", ...props }) {
|
|
22
|
-
return (jsx(DropdownMenuPrimitive.Item, { "data-slot": "dropdown-menu-item", "data-inset": inset, "data-variant": variant, className: cn("focus
|
|
22
|
+
return (jsx(DropdownMenuPrimitive.Item, { "data-slot": "dropdown-menu-item", "data-inset": inset, "data-variant": variant, className: cn("tw:focus:!bg-accent tw:focus:!text-accent-foreground tw:data-[variant=destructive]:!text-destructive tw:data-[variant=destructive]:focus:!bg-destructive/10 tw:dark:data-[variant=destructive]:focus:!bg-destructive/20 tw:data-[variant=destructive]:focus:!text-destructive tw:data-[variant=destructive]:*:svg:!text-destructive tw:[&_svg:not([class*='text-'])]:!text-muted-foreground tw:!relative tw:!flex tw:!cursor-default tw:!items-center tw:!gap-2 tw:!rounded-sm tw:!px-2 tw:!py-1.5 tw:!text-[14px] tw:!outline-hidden tw:!select-none tw:data-[disabled]:!pointer-events-none tw:data-[disabled]:!opacity-50 tw:data-[inset]:!pl-8 tw:[&_svg]:!pointer-events-none tw:[&_svg]:!shrink-0 tw:[&_svg:not([class*='size-'])]:!size-4", className), ...props }));
|
|
23
23
|
}
|
|
24
24
|
function DropdownMenuCheckboxItem({ className, children, checked, ...props }) {
|
|
25
25
|
return (jsxs(DropdownMenuPrimitive.CheckboxItem, { "data-slot": "dropdown-menu-checkbox-item", className: cn("tw:focus:bg-accent tw:focus:text-accent-foreground tw:relative tw:flex tw:cursor-default tw:items-center tw:gap-2 tw:rounded-sm tw:py-1.5 tw:pr-2 tw:pl-8 tw:text-[14px] tw:outline-hidden tw:select-none tw:data-[disabled]:pointer-events-none tw:data-[disabled]:opacity-50 tw:[&_svg]:pointer-events-none tw:[&_svg]:shrink-0 tw:[&_svg:not([class*='size-'])]:size-4", className), checked: checked, ...props, children: [jsx("span", { className: "tw:!pointer-events-none tw:!absolute tw:!left-2 tw:!flex tw:!size-3.5 tw:!items-center tw:!justify-center", children: jsx(DropdownMenuPrimitive.ItemIndicator, { children: jsx(CheckIcon, { className: "tw:!size-4" }) }) }), children] }));
|
|
@@ -28,10 +28,10 @@ function DropdownMenuRadioGroup({ ...props }) {
|
|
|
28
28
|
return (jsx(DropdownMenuPrimitive.RadioGroup, { "data-slot": "dropdown-menu-radio-group", ...props }));
|
|
29
29
|
}
|
|
30
30
|
function DropdownMenuRadioItem({ className, children, ...props }) {
|
|
31
|
-
return (jsxs(DropdownMenuPrimitive.RadioItem, { "data-slot": "dropdown-menu-radio-item", className: cn("focus
|
|
31
|
+
return (jsxs(DropdownMenuPrimitive.RadioItem, { "data-slot": "dropdown-menu-radio-item", className: cn("tw:focus:!bg-accent tw:focus:!text-accent-foreground tw:!relative tw:!flex tw:!cursor-default tw:!items-center tw:!gap-2 tw:!rounded-sm tw:!py-1.5 tw:!pr-2 tw:!pl-8 tw:!text-[14px] tw:!outline-hidden tw:!select-none tw:data-[disabled]:!pointer-events-none tw:data-[disabled]:!opacity-50 tw:[&_svg]:!pointer-events-none tw:[&_svg]:!shrink-0 tw:[&_svg:not([class*='size-'])]:!size-4", className), ...props, children: [jsx("span", { className: "tw:!pointer-events-none tw:!absolute tw:!left-2 tw:!flex tw:!size-3.5 tw:!items-center tw:!justify-center", children: jsx(DropdownMenuPrimitive.ItemIndicator, { children: jsx(CircleIcon, { className: "tw:!size-2 tw:!fill-current" }) }) }), children] }));
|
|
32
32
|
}
|
|
33
33
|
function DropdownMenuLabel({ className, inset, ...props }) {
|
|
34
|
-
return (jsx(DropdownMenuPrimitive.Label, { "data-slot": "dropdown-menu-label", "data-inset": inset, className: cn("tw:!px-2 tw:!py-1.5 tw:!text-[14px] tw:!font-medium data-[inset]
|
|
34
|
+
return (jsx(DropdownMenuPrimitive.Label, { "data-slot": "dropdown-menu-label", "data-inset": inset, className: cn("tw:!px-2 tw:!py-1.5 tw:!text-[14px] tw:!font-medium tw:data-[inset]:!pl-8", className), ...props }));
|
|
35
35
|
}
|
|
36
36
|
function DropdownMenuSeparator({ className, ...props }) {
|
|
37
37
|
return (jsx(DropdownMenuPrimitive.Separator, { "data-slot": "dropdown-menu-separator", className: cn("tw:!bg-border tw:!-mx-1 tw:!my-1 tw:!h-px", className), ...props }));
|
|
@@ -43,10 +43,10 @@ function DropdownMenuSub({ ...props }) {
|
|
|
43
43
|
return jsx(DropdownMenuPrimitive.Sub, { "data-slot": "dropdown-menu-sub", ...props });
|
|
44
44
|
}
|
|
45
45
|
function DropdownMenuSubTrigger({ className, inset, children, ...props }) {
|
|
46
|
-
return (jsxs(DropdownMenuPrimitive.SubTrigger, { "data-slot": "dropdown-menu-sub-trigger", "data-inset": inset, className: cn("focus
|
|
46
|
+
return (jsxs(DropdownMenuPrimitive.SubTrigger, { "data-slot": "dropdown-menu-sub-trigger", "data-inset": inset, className: cn("tw:focus:!bg-accent tw:focus:!text-accent-foreground tw:data-[state=open]:!bg-accent tw:data-[state=open]:!text-accent-foreground tw:[&_svg:not([class*='text-'])]:!text-muted-foreground tw:!flex tw:!cursor-default tw:!items-center tw:!gap-2 tw:!rounded-sm tw:!px-2 tw:!py-1.5 tw:!text-[14px] tw:!outline-hidden tw:!select-none tw:data-[inset]:!pl-8 tw:[&_svg]:!pointer-events-none tw:[&_svg]:!shrink-0 tw:[&_svg:not([class*='size-'])]:!size-4", className), ...props, children: [children, jsx(ChevronRightIcon, { className: "tw:ml-auto tw:size-4" })] }));
|
|
47
47
|
}
|
|
48
48
|
function DropdownMenuSubContent({ className, ...props }) {
|
|
49
|
-
return (jsx(DropdownMenuPrimitive.SubContent, { "data-slot": "dropdown-menu-sub-content", className: cn("tw:!bg-popover tw:!text-popover-foreground data-[state=open]
|
|
49
|
+
return (jsx(DropdownMenuPrimitive.SubContent, { "data-slot": "dropdown-menu-sub-content", className: cn("tw:!bg-popover tw:!text-popover-foreground tw:data-[state=open]:!animate-in tw:data-[state=closed]:!animate-out tw:data-[state=closed]:!fill-mode-forwards tw:data-[state=closed]:!fade-out-0 tw:data-[state=open]:!fade-in-0 tw:data-[state=closed]:!zoom-out-95 tw:data-[state=open]:!zoom-in-95 tw:data-[side=bottom]:!slide-in-from-top-2 tw:data-[side=left]:!slide-in-from-right-2 tw:data-[side=right]:!slide-in-from-left-2 tw:data-[side=top]:!slide-in-from-bottom-2 tw:!z-50 tw:!min-w-[8rem] tw:!origin-(--radix-dropdown-menu-content-transform-origin) tw:!overflow-hidden tw:!rounded-md tw:!border tw:!p-1 tw:!shadow-lg", className), ...props }));
|
|
50
50
|
}
|
|
51
51
|
|
|
52
52
|
export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger };
|
package/dist/components/field.js
CHANGED
|
@@ -6,27 +6,27 @@ import { Label } from './label.js';
|
|
|
6
6
|
import { Separator } from './separator.js';
|
|
7
7
|
|
|
8
8
|
function FieldSet({ className, ...props }) {
|
|
9
|
-
return (jsx("fieldset", { "data-slot": "field-set", className: cn("tw:flex tw:flex-col tw:gap-6", "has-[>[data-slot=checkbox-group]]:
|
|
9
|
+
return (jsx("fieldset", { "data-slot": "field-set", className: cn("tw:flex tw:flex-col tw:gap-6", "tw:has-[>[data-slot=checkbox-group]]:gap-3 tw:has-[>[data-slot=radio-group]]:gap-3", className), ...props }));
|
|
10
10
|
}
|
|
11
11
|
function FieldLegend({ className, variant = "legend", ...props }) {
|
|
12
|
-
return (jsx("legend", { "data-slot": "field-legend", "data-variant": variant, className: cn("tw:mb-3 tw:font-medium", "data-[variant=legend]:
|
|
12
|
+
return (jsx("legend", { "data-slot": "field-legend", "data-variant": variant, className: cn("tw:mb-3 tw:font-medium", "tw:data-[variant=legend]:text-base", "tw:data-[variant=label]:text-sm", className), ...props }));
|
|
13
13
|
}
|
|
14
14
|
function FieldGroup({ className, ...props }) {
|
|
15
|
-
return (jsx("div", { "data-slot": "field-group", className: cn("group/field-group @container/field-group tw:flex tw:w-full tw:flex-col tw:gap-7 data-[slot=checkbox-group]:
|
|
15
|
+
return (jsx("div", { "data-slot": "field-group", className: cn("group/field-group @container/field-group tw:flex tw:w-full tw:flex-col tw:gap-7 tw:data-[slot=checkbox-group]:gap-3 tw:[&>[data-slot=field-group]]:gap-4", className), ...props }));
|
|
16
16
|
}
|
|
17
|
-
const fieldVariants = cva("group/field tw:flex tw:w-full tw:gap-3 data-[invalid=true]:
|
|
17
|
+
const fieldVariants = cva("group/field tw:flex tw:w-full tw:gap-3 tw:data-[invalid=true]:text-destructive", {
|
|
18
18
|
variants: {
|
|
19
19
|
orientation: {
|
|
20
|
-
vertical: ["tw:flex-col [&>*]:
|
|
20
|
+
vertical: ["tw:flex-col tw:[&>*]:w-full tw:[&>.tw:sr-only]:w-auto"],
|
|
21
21
|
horizontal: [
|
|
22
22
|
"tw:flex-row tw:items-center",
|
|
23
|
-
"[&>[data-slot=field-label]]:
|
|
24
|
-
"has-[>[data-slot=field-content]]:
|
|
23
|
+
"tw:[&>[data-slot=field-label]]:flex-auto",
|
|
24
|
+
"tw:has-[>[data-slot=field-content]]:items-start tw:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
|
|
25
25
|
],
|
|
26
26
|
responsive: [
|
|
27
|
-
"tw:flex-col [&>*]:
|
|
28
|
-
"
|
|
29
|
-
"
|
|
27
|
+
"tw:flex-col tw:[&>*]:w-full tw:[&>.tw:sr-only]:w-auto tw:@md/field-group:flex-row tw:@md/field-group:items-center tw:@md/field-group:[&>*]:w-auto",
|
|
28
|
+
"tw:@md/field-group:[&>[data-slot=field-label]]:flex-auto",
|
|
29
|
+
"tw:@md/field-group:has-[>[data-slot=field-content]]:items-start tw:@md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
|
|
30
30
|
],
|
|
31
31
|
},
|
|
32
32
|
},
|
|
@@ -41,16 +41,16 @@ function FieldContent({ className, ...props }) {
|
|
|
41
41
|
return (jsx("div", { "data-slot": "field-content", className: cn("group/field-content tw:flex tw:flex-1 tw:flex-col tw:gap-1.5 tw:leading-snug", className), ...props }));
|
|
42
42
|
}
|
|
43
43
|
function FieldLabel({ className, ...props }) {
|
|
44
|
-
return (jsx(Label, { "data-slot": "field-label", className: cn("group/field-label peer/field-label tw:flex tw:w-fit tw:gap-2 tw:leading-snug group-data-[disabled=true]/field
|
|
44
|
+
return (jsx(Label, { "data-slot": "field-label", className: cn("group/field-label peer/field-label tw:flex tw:w-fit tw:gap-2 tw:leading-snug tw:group-data-[disabled=true]/field:!cursor-not-allowed tw:group-data-[disabled=true]/field:!opacity-50", "tw:has-[>[data-slot=field]]:w-full tw:has-[>[data-slot=field]]:flex-col tw:has-[>[data-slot=field]]:rounded-md tw:has-[>[data-slot=field]]:border tw:[&>*]:data-[slot=field]:p-4", "tw:has-data-[state=checked]:bg-primary/5 tw:has-data-[state=checked]:border-primary tw:dark:has-data-[state=checked]:bg-primary/10", className), ...props }));
|
|
45
45
|
}
|
|
46
46
|
function FieldTitle({ className, ...props }) {
|
|
47
|
-
return (jsx("div", { "data-slot": "field-label", className: cn("tw:flex tw:w-fit tw:items-center tw:gap-2 tw:text-sm tw:leading-snug tw:font-medium group-data-[disabled=true]/field
|
|
47
|
+
return (jsx("div", { "data-slot": "field-label", className: cn("tw:flex tw:w-fit tw:items-center tw:gap-2 tw:text-sm tw:leading-snug tw:font-medium tw:group-data-[disabled=true]/field:!cursor-not-allowed tw:group-data-[disabled=true]/field:!opacity-50", className), ...props }));
|
|
48
48
|
}
|
|
49
49
|
function FieldDescription({ className, ...props }) {
|
|
50
|
-
return (jsx("p", { "data-slot": "field-description", className: cn("tw:text-muted-foreground tw:text-sm tw:leading-normal tw:font-normal group-has-[[data-orientation=horizontal]]/field:
|
|
50
|
+
return (jsx("p", { "data-slot": "field-description", className: cn("tw:text-muted-foreground tw:text-sm tw:leading-normal tw:font-normal tw:group-has-[[data-orientation=horizontal]]/field:text-balance", "tw:last:mt-0 tw:nth-last-2:-mt-1 tw:[[data-variant=legend]+&]:-mt-1.5", "tw:[&>a:hover]:text-primary tw:[&>a]:underline tw:[&>a]:underline-offset-4", className), ...props }));
|
|
51
51
|
}
|
|
52
52
|
function FieldSeparator({ children, className, ...props }) {
|
|
53
|
-
return (jsxs("div", { "data-slot": "field-separator", "data-content": !!children, className: cn("tw:relative tw:-my-2 tw:h-5 tw:text-sm group-data-[variant=outline]/field-group
|
|
53
|
+
return (jsxs("div", { "data-slot": "field-separator", "data-content": !!children, className: cn("tw:relative tw:-my-2 tw:h-5 tw:text-sm tw:group-data-[variant=outline]/field-group:-mb-2", className), ...props, children: [jsx(Separator, { className: "tw:absolute tw:inset-0 tw:top-1/2" }), children && (jsx("span", { className: "tw:bg-background tw:text-muted-foreground tw:relative tw:mx-auto tw:block tw:w-fit tw:px-2", "data-slot": "field-separator-content", children: children }))] }));
|
|
54
54
|
}
|
|
55
55
|
function FieldError({ className, children, errors, ...props }) {
|
|
56
56
|
const content = useMemo(() => {
|
package/dist/components/form.js
CHANGED
|
@@ -36,7 +36,7 @@ function FormItem({ className, ...props }) {
|
|
|
36
36
|
}
|
|
37
37
|
function FormLabel({ className, ...props }) {
|
|
38
38
|
const { error, formItemId } = useFormField();
|
|
39
|
-
return (jsx(Label, { "data-slot": "form-label", "data-error": !!error, className: cn("data-[error=true]:
|
|
39
|
+
return (jsx(Label, { "data-slot": "form-label", "data-error": !!error, className: cn("tw:data-[error=true]:text-destructive", className), htmlFor: formItemId, ...props }));
|
|
40
40
|
}
|
|
41
41
|
function FormControl({ ...props }) {
|
|
42
42
|
const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
|
|
@@ -111,7 +111,7 @@ const getTileClassName = (isCurrent, isDisabled) => {
|
|
|
111
111
|
if (isCurrent) {
|
|
112
112
|
return "tw:cursor-default";
|
|
113
113
|
}
|
|
114
|
-
return "hover:
|
|
114
|
+
return "tw:hover:bg-accent tw:cursor-pointer";
|
|
115
115
|
};
|
|
116
116
|
const gridColsClass = {
|
|
117
117
|
1: "tw:grid-cols-1",
|
|
@@ -137,7 +137,7 @@ function HeaderAppSwitcher({ commonHost, currentApp = "Retail", visibleApps, col
|
|
|
137
137
|
const isDisabled = Boolean(app.disabled);
|
|
138
138
|
const isCurrent = Boolean(app.isCurrent);
|
|
139
139
|
const tileClassName = getTileClassName(isCurrent, isDisabled);
|
|
140
|
-
const tileContent = (jsxs(Fragment, { children: [jsxs("span", { className: "tw:relative tw:flex tw:size-9 tw:items-center tw:justify-center tw:[&>svg]:
|
|
140
|
+
const tileContent = (jsxs(Fragment, { children: [jsxs("span", { className: "tw:relative tw:flex tw:size-9 tw:items-center tw:justify-center tw:[&>svg]:size-9 tw:[&>svg]:shrink-0", children: [app.logo, app.badge ? (jsx(Badge, { variant: "soft", className: appBadgeClassName, children: app.badge })) : null] }), jsx("span", { className: cn("tw:text-center tw:text-xs tw:font-normal tw:leading-4 tw:text-popover-foreground", isDisabled && "tw:text-muted-foreground"), children: app.name })] }));
|
|
141
141
|
const baseClassName = `tw:relative tw:flex tw:min-h-14 tw:flex-col tw:items-center tw:gap-2.5 tw:rounded-md tw:p-0 tw:transition-colors ${tileClassName}`;
|
|
142
142
|
const Wrapper = isDisabled || isCurrent ? "div" : "a";
|
|
143
143
|
const wrapperProps = isDisabled || isCurrent
|
|
@@ -134,9 +134,9 @@ function HierarchicalSelect(props) {
|
|
|
134
134
|
e.preventDefault();
|
|
135
135
|
e.currentTarget.click();
|
|
136
136
|
}
|
|
137
|
-
}, className: cn("tw:!flex tw:!w-full tw:!items-center tw:!justify-between tw:!gap-2 tw:!rounded-md tw:!border tw:!border-input tw:!bg-transparent tw:px-3 tw:py-2 tw:!text-[length:var(--hs-font-size,14px)] tw:!whitespace-nowrap tw:!shadow-xs tw:!transition-[color,box-shadow] tw:!outline-none tw:h-9 tw:!cursor-default", "focus-visible
|
|
138
|
-
"tw:!cursor-not-allowed tw:!opacity-50 tw:!pointer-events-none", "dark
|
|
139
|
-
"tw:!bg-accent tw:!text-accent-foreground"), children: [jsx(FolderTreeIcon, { "aria-hidden": true, className: "tw:!size-4 tw:!shrink-0 tw:!text-muted-foreground" }), jsx("span", { className: "tw:!flex-1 tw:!text-left tw:!truncate", children: group.parent.label }), group.children.length > 0 && (jsx("span", { "data-slot": "hierarchical-select-badge", className: "tw:!inline-flex tw:!items-center tw:!justify-center tw:!rounded-full tw:!bg-muted tw:!px-1.5 tw:!py-0.5 tw:!text-[10px] tw:!font-medium tw:!text-muted-foreground tw:!leading-none", children: group.children.length })), isSelected(group.parent.id) && (jsx(CheckIcon, { "aria-hidden": true, className: "tw:!size-4 tw:!shrink-0" }))] }), group.children.length > 0 && (jsx("div", { "data-slot": "hierarchical-select-children", role: "group", "aria-label": `${group.parent.label} subcategories`, className: "tw:!ml-4 tw:!border-l tw:!border-border tw:!pl-2", children: group.children.map((child) => (jsxs("button", { type: "button", "data-slot": "hierarchical-select-child", role: "option", "aria-selected": isSelected(child.id), onClick: () => handleSelect(child.id), className: cn("tw:!relative tw:!flex tw:!w-full tw:!cursor-default tw:!items-center tw:!gap-2 tw:!rounded-sm tw:!px-2 tw:!py-1.5 tw:!text-[14px] tw:!outline-hidden tw:!select-none tw:!transition-colors", "hover
|
|
137
|
+
}, className: cn("tw:!flex tw:!w-full tw:!items-center tw:!justify-between tw:!gap-2 tw:!rounded-md tw:!border tw:!border-input tw:!bg-transparent tw:px-3 tw:py-2 tw:!text-[length:var(--hs-font-size,14px)] tw:!whitespace-nowrap tw:!shadow-xs tw:!transition-[color,box-shadow] tw:!outline-none tw:h-9 tw:!cursor-default", "tw:focus-visible:!border-ring tw:focus-visible:!ring-ring/50 tw:focus-visible:!ring-[3px]", disabled &&
|
|
138
|
+
"tw:!cursor-not-allowed tw:!opacity-50 tw:!pointer-events-none", "tw:dark:!bg-input/30 tw:dark:hover:!bg-input/50", !displayValue && "tw:!text-muted-foreground", className), style: triggerStyle, children: [jsx("span", { "data-slot": "hierarchical-select-value", className: "tw:!truncate tw:!flex-1 tw:!text-left", children: displayValue ?? placeholder }), isMulti && hasSelection && (jsx("button", { type: "button", "data-slot": "hierarchical-select-clear", "aria-label": "Clear selection", onClick: handleClear, className: "tw:!shrink-0 tw:!flex tw:!items-center tw:!justify-center tw:!size-4 tw:!rounded-sm tw:!text-muted-foreground tw:hover:!text-foreground tw:!transition-colors tw:!pointer-events-auto", children: jsx(XIcon, { className: "tw:!size-3" }) })), jsx(ChevronDownIcon, { "data-slot": "hierarchical-select-chevron", "aria-hidden": true, className: cn("tw:!size-4 tw:!shrink-0 tw:!opacity-50 tw:!transition-transform tw:!duration-200", open && "tw:!rotate-180") })] }) }), jsx(PopoverPrimitive.Portal, { container: portalContainer, children: jsxs(PopoverPrimitive.Content, { "data-slot": "hierarchical-select-content", align: "start", sideOffset: 4, className: cn("tw:!bg-popover tw:!text-popover-foreground tw:!z-[9999] tw:!w-[var(--radix-popover-trigger-width)] tw:!origin-(--radix-popover-content-transform-origin) tw:!rounded-md tw:!border tw:!shadow-md tw:!outline-hidden", "tw:data-[state=open]:!animate-in tw:data-[state=closed]:!animate-out tw:data-[state=closed]:!fill-mode-forwards tw:data-[state=closed]:!fade-out-0 tw:data-[state=open]:!fade-in-0 tw:data-[state=closed]:!zoom-out-95 tw:data-[state=open]:!zoom-in-95", "tw:data-[side=bottom]:!slide-in-from-top-2 tw:data-[side=left]:!slide-in-from-right-2 tw:data-[side=right]:!slide-in-from-left-2 tw:data-[side=top]:!slide-in-from-bottom-2"), children: [jsxs("div", { "data-slot": "hierarchical-select-search", className: "tw:!flex tw:!items-center tw:!gap-2 tw:!border-b tw:!px-3 tw:!sticky tw:!top-0 tw:!bg-popover tw:!z-10", children: [jsx(SearchIcon, { className: "tw:!size-4 tw:!shrink-0 tw:!text-muted-foreground" }), jsx("input", { ref: searchInputRef, id: searchId, "data-slot": "hierarchical-select-search-input", type: "text", role: "searchbox", "aria-label": searchPlaceholder, "aria-autocomplete": "list", value: search, onChange: (e) => setSearch(e.target.value), placeholder: searchPlaceholder, className: "tw:!flex tw:!h-9 tw:!w-full tw:!bg-transparent tw:!py-2 tw:!text-[14px] tw:!outline-none tw:placeholder:!text-muted-foreground" })] }), jsx("div", { id: listboxId, "data-slot": "hierarchical-select-list", role: "listbox", "aria-multiselectable": isMulti, "aria-label": label ?? placeholder, className: "tw:!max-h-[320px] tw:!overflow-y-auto tw:!overflow-x-hidden tw:!p-1", children: filtered.length === 0 ? (jsxs("div", { "data-slot": "hierarchical-select-empty", role: "status", "aria-live": "polite", className: "tw:!flex tw:!flex-col tw:!items-center tw:!justify-center tw:!gap-2 tw:!py-8 tw:!text-center", children: [jsx("div", { className: "tw:!flex tw:!size-10 tw:!items-center tw:!justify-center tw:!rounded-full tw:!bg-muted", children: jsx(SearchIcon, { "aria-hidden": true, className: "tw:!size-4 tw:!text-muted-foreground" }) }), jsx("div", { className: "tw:!text-[14px] tw:!font-medium", children: emptyMessage }), jsx("p", { className: "tw:!text-[12px] tw:!text-muted-foreground", children: "Try adjusting your search query" })] })) : (filtered.map((group) => (jsxs("div", { "data-slot": "hierarchical-select-group", role: "group", "aria-label": group.parent.label, className: "tw:!mb-1", children: [jsxs("button", { type: "button", "data-slot": "hierarchical-select-parent", role: "option", "aria-selected": isSelected(group.parent.id), onClick: () => handleSelect(group.parent.id), className: cn("tw:!relative tw:!flex tw:!w-full tw:!cursor-default tw:!items-center tw:!gap-2 tw:!rounded-sm tw:!px-2 tw:!py-1.5 tw:!text-[14px] tw:!font-semibold tw:!outline-hidden tw:!select-none tw:!transition-colors", "tw:hover:!bg-accent tw:hover:!text-accent-foreground", isSelected(group.parent.id) &&
|
|
139
|
+
"tw:!bg-accent tw:!text-accent-foreground"), children: [jsx(FolderTreeIcon, { "aria-hidden": true, className: "tw:!size-4 tw:!shrink-0 tw:!text-muted-foreground" }), jsx("span", { className: "tw:!flex-1 tw:!text-left tw:!truncate", children: group.parent.label }), group.children.length > 0 && (jsx("span", { "data-slot": "hierarchical-select-badge", className: "tw:!inline-flex tw:!items-center tw:!justify-center tw:!rounded-full tw:!bg-muted tw:!px-1.5 tw:!py-0.5 tw:!text-[10px] tw:!font-medium tw:!text-muted-foreground tw:!leading-none", children: group.children.length })), isSelected(group.parent.id) && (jsx(CheckIcon, { "aria-hidden": true, className: "tw:!size-4 tw:!shrink-0" }))] }), group.children.length > 0 && (jsx("div", { "data-slot": "hierarchical-select-children", role: "group", "aria-label": `${group.parent.label} subcategories`, className: "tw:!ml-4 tw:!border-l tw:!border-border tw:!pl-2", children: group.children.map((child) => (jsxs("button", { type: "button", "data-slot": "hierarchical-select-child", role: "option", "aria-selected": isSelected(child.id), onClick: () => handleSelect(child.id), className: cn("tw:!relative tw:!flex tw:!w-full tw:!cursor-default tw:!items-center tw:!gap-2 tw:!rounded-sm tw:!px-2 tw:!py-1.5 tw:!text-[14px] tw:!outline-hidden tw:!select-none tw:!transition-colors", "tw:hover:!bg-accent tw:hover:!text-accent-foreground", "tw:!text-muted-foreground", isSelected(child.id) &&
|
|
140
140
|
"tw:!bg-accent tw:!text-accent-foreground"), children: [jsx("span", { "aria-hidden": true, className: "tw:!size-1.5 tw:!rounded-full tw:!bg-muted-foreground/50 tw:!shrink-0" }), jsx("span", { className: "tw:!flex-1 tw:!text-left tw:!truncate", children: child.label }), isSelected(child.id) && (jsx(CheckIcon, { "aria-hidden": true, className: "tw:!size-4 tw:!shrink-0" }))] }, child.id))) }))] }, group.parent.id)))) }), jsx("div", { "data-slot": "hierarchical-select-footer", "aria-live": "polite", "aria-atomic": "true", className: "tw:!border-t tw:!px-3 tw:!py-2 tw:!text-[12px] tw:!text-muted-foreground", children: search ? (jsxs("span", { children: [visibleCount, " result", visibleCount !== 1 ? "s" : "", " for \u201C", search, "\u201D"] })) : (jsxs("span", { children: [visibleCount, " categor", visibleCount !== 1 ? "ies" : "y"] })) })] }) })] }));
|
|
141
141
|
}
|
|
142
142
|
|
|
@@ -9,7 +9,7 @@ function HoverCardTrigger({ ...props }) {
|
|
|
9
9
|
return (jsx(HoverCardPrimitive.Trigger, { "data-slot": "hover-card-trigger", ...props }));
|
|
10
10
|
}
|
|
11
11
|
function HoverCardContent({ className, align = "center", sideOffset = 4, ...props }) {
|
|
12
|
-
return (jsx(HoverCardPrimitive.Portal, { "data-slot": "hover-card-portal", children: jsx(HoverCardPrimitive.Content, { "data-slot": "hover-card-content", align: align, sideOffset: sideOffset, className: cn("tw:bg-popover tw:text-popover-foreground tw:data-[state=open]:animate-in tw:data-[state=closed]:animate-out tw:data-[state=closed]:fade-out-0 tw:data-[state=open]:fade-in-0 tw:data-[state=closed]:zoom-out-95 tw:data-[state=open]:zoom-in-95 tw:data-[side=bottom]:slide-in-from-top-2 tw:data-[side=left]:slide-in-from-right-2 tw:data-[side=right]:slide-in-from-left-2 tw:data-[side=top]:slide-in-from-bottom-2 tw:z-50 tw:w-64 tw:origin-(--radix-hover-card-content-transform-origin) tw:rounded-md tw:border tw:p-4 tw:shadow-md tw:outline-hidden", className), ...props }) }));
|
|
12
|
+
return (jsx(HoverCardPrimitive.Portal, { "data-slot": "hover-card-portal", children: jsx(HoverCardPrimitive.Content, { "data-slot": "hover-card-content", align: align, sideOffset: sideOffset, className: cn("tw:bg-popover tw:text-popover-foreground tw:data-[state=open]:animate-in tw:data-[state=closed]:animate-out tw:data-[state=closed]:fill-mode-forwards tw:data-[state=closed]:fade-out-0 tw:data-[state=open]:fade-in-0 tw:data-[state=closed]:zoom-out-95 tw:data-[state=open]:zoom-in-95 tw:data-[side=bottom]:slide-in-from-top-2 tw:data-[side=left]:slide-in-from-right-2 tw:data-[side=right]:slide-in-from-left-2 tw:data-[side=top]:slide-in-from-bottom-2 tw:z-50 tw:w-64 tw:origin-(--radix-hover-card-content-transform-origin) tw:rounded-md tw:border tw:p-4 tw:shadow-md tw:outline-hidden", className), ...props }) }));
|
|
13
13
|
}
|
|
14
14
|
|
|
15
15
|
export { HoverCard, HoverCardContent, HoverCardTrigger };
|