@karakuri-ui/react 0.3.3 → 0.3.4
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 +27 -4
- package/dist/components/ui/accordion.js +27 -24
- package/dist/components/ui/accordion.js.map +1 -1
- package/dist/components/ui/accordion.mjs +27 -24
- package/dist/components/ui/accordion.mjs.map +1 -1
- package/dist/components/ui/alert.js +45 -27
- package/dist/components/ui/alert.js.map +1 -1
- package/dist/components/ui/alert.mjs +45 -27
- package/dist/components/ui/alert.mjs.map +1 -1
- package/dist/components/ui/avatar.js +41 -32
- package/dist/components/ui/avatar.js.map +1 -1
- package/dist/components/ui/avatar.mjs +41 -32
- package/dist/components/ui/avatar.mjs.map +1 -1
- package/dist/components/ui/badge.js +46 -43
- package/dist/components/ui/badge.js.map +1 -1
- package/dist/components/ui/badge.mjs +46 -43
- package/dist/components/ui/badge.mjs.map +1 -1
- package/dist/components/ui/breadcrumb.js +30 -25
- package/dist/components/ui/breadcrumb.js.map +1 -1
- package/dist/components/ui/breadcrumb.mjs +30 -25
- package/dist/components/ui/breadcrumb.mjs.map +1 -1
- package/dist/components/ui/button-group.js +6 -5
- package/dist/components/ui/button-group.js.map +1 -1
- package/dist/components/ui/button-group.mjs +6 -5
- package/dist/components/ui/button-group.mjs.map +1 -1
- package/dist/components/ui/button.js +24 -14
- package/dist/components/ui/button.js.map +1 -1
- package/dist/components/ui/button.mjs +24 -14
- package/dist/components/ui/button.mjs.map +1 -1
- package/dist/components/ui/card.js +53 -39
- package/dist/components/ui/card.js.map +1 -1
- package/dist/components/ui/card.mjs +53 -39
- package/dist/components/ui/card.mjs.map +1 -1
- package/dist/components/ui/chart.d.mts +1 -1
- package/dist/components/ui/chart.d.ts +1 -1
- package/dist/components/ui/chart.js +154 -130
- package/dist/components/ui/chart.js.map +1 -1
- package/dist/components/ui/chart.mjs +154 -130
- package/dist/components/ui/chart.mjs.map +1 -1
- package/dist/components/ui/checkbox.js +47 -40
- package/dist/components/ui/checkbox.js.map +1 -1
- package/dist/components/ui/checkbox.mjs +47 -40
- package/dist/components/ui/checkbox.mjs.map +1 -1
- package/dist/components/ui/divider.js +16 -13
- package/dist/components/ui/divider.js.map +1 -1
- package/dist/components/ui/divider.mjs +16 -13
- package/dist/components/ui/divider.mjs.map +1 -1
- package/dist/components/ui/drawer.js +44 -35
- package/dist/components/ui/drawer.js.map +1 -1
- package/dist/components/ui/drawer.mjs +44 -35
- package/dist/components/ui/drawer.mjs.map +1 -1
- package/dist/components/ui/dropdown.js +31 -24
- package/dist/components/ui/dropdown.js.map +1 -1
- package/dist/components/ui/dropdown.mjs +31 -24
- package/dist/components/ui/dropdown.mjs.map +1 -1
- package/dist/components/ui/field.js +18 -15
- package/dist/components/ui/field.js.map +1 -1
- package/dist/components/ui/field.mjs +18 -15
- package/dist/components/ui/field.mjs.map +1 -1
- package/dist/components/ui/icon-button.js +17 -14
- package/dist/components/ui/icon-button.js.map +1 -1
- package/dist/components/ui/icon-button.mjs +17 -14
- package/dist/components/ui/icon-button.mjs.map +1 -1
- package/dist/components/ui/input.js +34 -29
- package/dist/components/ui/input.js.map +1 -1
- package/dist/components/ui/input.mjs +34 -29
- package/dist/components/ui/input.mjs.map +1 -1
- package/dist/components/ui/metric-card.js +24 -21
- package/dist/components/ui/metric-card.js.map +1 -1
- package/dist/components/ui/metric-card.mjs +24 -21
- package/dist/components/ui/metric-card.mjs.map +1 -1
- package/dist/components/ui/modal.js +91 -74
- package/dist/components/ui/modal.js.map +1 -1
- package/dist/components/ui/modal.mjs +91 -74
- package/dist/components/ui/modal.mjs.map +1 -1
- package/dist/components/ui/navigation-menu.js +114 -93
- package/dist/components/ui/navigation-menu.js.map +1 -1
- package/dist/components/ui/navigation-menu.mjs +114 -93
- package/dist/components/ui/navigation-menu.mjs.map +1 -1
- package/dist/components/ui/pagination.js +66 -55
- package/dist/components/ui/pagination.js.map +1 -1
- package/dist/components/ui/pagination.mjs +66 -55
- package/dist/components/ui/pagination.mjs.map +1 -1
- package/dist/components/ui/popover.js +39 -36
- package/dist/components/ui/popover.js.map +1 -1
- package/dist/components/ui/popover.mjs +39 -36
- package/dist/components/ui/popover.mjs.map +1 -1
- package/dist/components/ui/progress.js +73 -64
- package/dist/components/ui/progress.js.map +1 -1
- package/dist/components/ui/progress.mjs +73 -64
- package/dist/components/ui/progress.mjs.map +1 -1
- package/dist/components/ui/radio-group.js +23 -19
- package/dist/components/ui/radio-group.js.map +1 -1
- package/dist/components/ui/radio-group.mjs +23 -19
- package/dist/components/ui/radio-group.mjs.map +1 -1
- package/dist/components/ui/segmented.js +7 -6
- package/dist/components/ui/segmented.js.map +1 -1
- package/dist/components/ui/segmented.mjs +7 -6
- package/dist/components/ui/segmented.mjs.map +1 -1
- package/dist/components/ui/select.js +55 -48
- package/dist/components/ui/select.js.map +1 -1
- package/dist/components/ui/select.mjs +55 -48
- package/dist/components/ui/select.mjs.map +1 -1
- package/dist/components/ui/skeleton.js +20 -19
- package/dist/components/ui/skeleton.js.map +1 -1
- package/dist/components/ui/skeleton.mjs +20 -19
- package/dist/components/ui/skeleton.mjs.map +1 -1
- package/dist/components/ui/slider.js +68 -58
- package/dist/components/ui/slider.js.map +1 -1
- package/dist/components/ui/slider.mjs +68 -58
- package/dist/components/ui/slider.mjs.map +1 -1
- package/dist/components/ui/spinner.js +185 -176
- package/dist/components/ui/spinner.js.map +1 -1
- package/dist/components/ui/spinner.mjs +185 -176
- package/dist/components/ui/spinner.mjs.map +1 -1
- package/dist/components/ui/switch.js +39 -28
- package/dist/components/ui/switch.js.map +1 -1
- package/dist/components/ui/switch.mjs +39 -28
- package/dist/components/ui/switch.mjs.map +1 -1
- package/dist/components/ui/table.js +26 -23
- package/dist/components/ui/table.js.map +1 -1
- package/dist/components/ui/table.mjs +26 -23
- package/dist/components/ui/table.mjs.map +1 -1
- package/dist/components/ui/tabs.js +25 -9
- package/dist/components/ui/tabs.js.map +1 -1
- package/dist/components/ui/tabs.mjs +25 -9
- package/dist/components/ui/tabs.mjs.map +1 -1
- package/dist/components/ui/textarea.js +2 -1
- package/dist/components/ui/textarea.js.map +1 -1
- package/dist/components/ui/textarea.mjs +2 -1
- package/dist/components/ui/textarea.mjs.map +1 -1
- package/dist/components/ui/toast.js +104 -80
- package/dist/components/ui/toast.js.map +1 -1
- package/dist/components/ui/toast.mjs +104 -80
- package/dist/components/ui/toast.mjs.map +1 -1
- package/dist/components/ui/toggle-group.js +9 -8
- package/dist/components/ui/toggle-group.js.map +1 -1
- package/dist/components/ui/toggle-group.mjs +9 -8
- package/dist/components/ui/toggle-group.mjs.map +1 -1
- package/dist/components/ui/toggle.js +3 -2
- package/dist/components/ui/toggle.js.map +1 -1
- package/dist/components/ui/toggle.mjs +3 -2
- package/dist/components/ui/toggle.mjs.map +1 -1
- package/dist/components/ui/tooltip.js +18 -15
- package/dist/components/ui/tooltip.js.map +1 -1
- package/dist/components/ui/tooltip.mjs +18 -15
- package/dist/components/ui/tooltip.mjs.map +1 -1
- package/package.json +27 -19
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/ui/divider.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport * as SeparatorPrimitive from '@radix-ui/react-separator'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\n\n// ─── Divider ─────────────────────────────────────────────────\n\nconst dividerVariants = cva('shrink-0', {\n variants: {\n orientation: {\n horizontal: 'w-full',\n vertical: 'h-full self-stretch',\n },\n variant: {\n solid: 'border-solid',\n dashed: 'border-dashed',\n dotted: 'border-dotted',\n },\n color: {\n default: 'border-border-subtle',\n muted: 'border-border-subtle',\n strong: 'border-border-strong',\n },\n spacing: {\n sm: '',\n md: '',\n default: '',\n lg: '',\n },\n },\n compoundVariants: [\n // Horizontal spacing\n { orientation: 'horizontal', spacing: 'sm', className: 'my-2' },\n { orientation: 'horizontal', spacing: 'md', className: 'my-3' },\n { orientation: 'horizontal', spacing: 'default', className: 'my-4' },\n { orientation: 'horizontal', spacing: 'lg', className: 'my-8' },\n // Vertical spacing\n { orientation: 'vertical', spacing: 'sm', className: 'mx-2' },\n { orientation: 'vertical', spacing: 'md', className: 'mx-3' },\n { orientation: 'vertical', spacing: 'default', className: 'mx-4' },\n { orientation: 'vertical', spacing: 'lg', className: 'mx-8' },\n // Horizontal line style (border-top)\n { orientation: 'horizontal', className: 'border-t border-l-0' },\n // Vertical line style (border-left)\n { orientation: 'vertical', className: 'border-l border-t-0' },\n ],\n defaultVariants: {\n orientation: 'horizontal',\n variant: 'solid',\n color: 'default',\n spacing: 'default',\n },\n})\n\nexport interface DividerProps\n extends Omit<React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>, 'children' | 'color' | 'orientation'> {\n /** Direction of the divider */\n orientation?: 'horizontal' | 'vertical'\n /** Line style */\n variant?: 'solid' | 'dashed' | 'dotted'\n /** Line color intensity */\n color?: 'default' | 'muted' | 'strong'\n /** Spacing around the divider */\n spacing?: 'sm' | 'md' | 'default' | 'lg'\n /** Content to display on the divider line (horizontal only) */\n label?: React.ReactNode\n /** Label position along the line */\n labelPosition?: 'left' | 'center' | 'right'\n}\n\nconst Divider = React.forwardRef<\n React.ElementRef<typeof SeparatorPrimitive.Root>,\n DividerProps\n>(({\n className,\n orientation = 'horizontal',\n variant = 'solid',\n color = 'default',\n spacing = 'default',\n label,\n labelPosition = 'center',\n decorative = true,\n ...props\n}, ref) => {\n // Line style class for label mode\n const lineClass = cn(\n 'flex-1',\n variant === 'dashed' ? 'border-dashed' : variant === 'dotted' ? 'border-dotted' : 'border-solid',\n color === 'muted' ? 'border-border-subtle' : color === 'strong' ? 'border-border-strong' : 'border-border-subtle',\n 'border-t'\n )\n\n // Spacing class for label wrapper\n const spacingClass =\n spacing === 'sm' ? 'my-2'\n : spacing === 'md' ? 'my-3'\n : spacing === 'lg' ? 'my-8'\n : 'my-4'\n\n // Horizontal with label: render as flex container with two lines\n if (label && orientation === 'horizontal') {\n return (\n <div\n role={decorative ? 'none' : 'separator'}\n aria-orientation=\"horizontal\"\n className={cn(\n 'flex items-center w-full',\n spacingClass,\n className\n )}\n >\n <div className={cn(\n lineClass,\n labelPosition === 'left' ? 'max-w-[10%]' : ''\n )} />\n <span className=\"px-3 text-sm text-text-muted shrink-0 select-none\">{label}</span>\n <div className={cn(\n lineClass,\n labelPosition === 'right' ? 'max-w-[10%]' : ''\n )} />\n </div>\n )\n }\n\n // Default: Radix Separator\n return (\n <SeparatorPrimitive.Root\n ref={ref}\n decorative={decorative}\n orientation={orientation}\n className={cn(\n dividerVariants({ orientation, variant, color, spacing }),\n className\n )}\n {...props}\n />\n )\n})\nDivider.displayName = 'Divider'\n\n// ─── Exports ─────────────────────────────────────────────────\n\nexport { Divider, dividerVariants }\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
1
|
+
{"version":3,"sources":["../../../src/components/ui/divider.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport * as SeparatorPrimitive from '@radix-ui/react-separator'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\n\n// ─── Divider ─────────────────────────────────────────────────\n\nconst dividerVariants = cva('shrink-0', {\n variants: {\n orientation: {\n horizontal: 'w-full',\n vertical: 'h-full self-stretch',\n },\n variant: {\n solid: 'border-solid',\n dashed: 'border-dashed',\n dotted: 'border-dotted',\n },\n color: {\n default: 'border-border-subtle',\n muted: 'border-border-subtle',\n strong: 'border-border-strong',\n },\n spacing: {\n sm: '',\n md: '',\n default: '',\n lg: '',\n },\n },\n compoundVariants: [\n // Horizontal spacing\n { orientation: 'horizontal', spacing: 'sm', className: 'my-2' },\n { orientation: 'horizontal', spacing: 'md', className: 'my-3' },\n { orientation: 'horizontal', spacing: 'default', className: 'my-4' },\n { orientation: 'horizontal', spacing: 'lg', className: 'my-8' },\n // Vertical spacing\n { orientation: 'vertical', spacing: 'sm', className: 'mx-2' },\n { orientation: 'vertical', spacing: 'md', className: 'mx-3' },\n { orientation: 'vertical', spacing: 'default', className: 'mx-4' },\n { orientation: 'vertical', spacing: 'lg', className: 'mx-8' },\n // Horizontal line style (border-top)\n { orientation: 'horizontal', className: 'border-t border-l-0' },\n // Vertical line style (border-left)\n { orientation: 'vertical', className: 'border-l border-t-0' },\n ],\n defaultVariants: {\n orientation: 'horizontal',\n variant: 'solid',\n color: 'default',\n spacing: 'default',\n },\n})\n\nexport interface DividerProps\n extends Omit<React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>, 'children' | 'color' | 'orientation'> {\n /** Direction of the divider */\n orientation?: 'horizontal' | 'vertical'\n /** Line style */\n variant?: 'solid' | 'dashed' | 'dotted'\n /** Line color intensity */\n color?: 'default' | 'muted' | 'strong'\n /** Spacing around the divider */\n spacing?: 'sm' | 'md' | 'default' | 'lg'\n /** Content to display on the divider line (horizontal only) */\n label?: React.ReactNode\n /** Label position along the line */\n labelPosition?: 'left' | 'center' | 'right'\n}\n\nconst Divider = React.forwardRef<\n React.ElementRef<typeof SeparatorPrimitive.Root>,\n DividerProps\n>(({\n className,\n orientation = 'horizontal',\n variant = 'solid',\n color = 'default',\n spacing = 'default',\n label,\n labelPosition = 'center',\n decorative = true,\n ...props\n}, ref) => {\n // Line style class for label mode\n const lineClass = cn(\n 'flex-1',\n variant === 'dashed' ? 'border-dashed' : variant === 'dotted' ? 'border-dotted' : 'border-solid',\n color === 'muted' ? 'border-border-subtle' : color === 'strong' ? 'border-border-strong' : 'border-border-subtle',\n 'border-t'\n )\n\n // Spacing class for label wrapper\n const spacingClass =\n spacing === 'sm' ? 'my-2'\n : spacing === 'md' ? 'my-3'\n : spacing === 'lg' ? 'my-8'\n : 'my-4'\n\n // Horizontal with label: render as flex container with two lines\n if (label && orientation === 'horizontal') {\n return (\n <div\n role={decorative ? 'none' : 'separator'}\n aria-orientation=\"horizontal\"\n className={cn(\n 'flex items-center w-full',\n spacingClass,\n className\n )}\n >\n <div className={cn(\n lineClass,\n labelPosition === 'left' ? 'max-w-[10%]' : ''\n )} />\n <span className=\"px-3 text-sm text-text-muted shrink-0 select-none\">{label}</span>\n <div className={cn(\n lineClass,\n labelPosition === 'right' ? 'max-w-[10%]' : ''\n )} />\n </div>\n )\n }\n\n // Default: Radix Separator\n return (\n <SeparatorPrimitive.Root\n ref={ref}\n decorative={decorative}\n orientation={orientation}\n className={cn(\n dividerVariants({ orientation, variant, color, spacing }),\n className\n )}\n {...props}\n />\n )\n})\nDivider.displayName = 'Divider'\n\n// ─── Exports ─────────────────────────────────────────────────\n\nexport { Divider, dividerVariants }\n"],"mappings":"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","names":[]}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
"use client";
|
|
2
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
3
|
import * as React from "react";
|
|
3
4
|
import * as SeparatorPrimitive from "@radix-ui/react-separator";
|
|
4
5
|
import { cva } from "class-variance-authority";
|
|
@@ -68,7 +69,7 @@ const Divider = React.forwardRef(({
|
|
|
68
69
|
);
|
|
69
70
|
const spacingClass = spacing === "sm" ? "my-2" : spacing === "md" ? "my-3" : spacing === "lg" ? "my-8" : "my-4";
|
|
70
71
|
if (label && orientation === "horizontal") {
|
|
71
|
-
return /* @__PURE__ */
|
|
72
|
+
return /* @__PURE__ */ jsxs(
|
|
72
73
|
"div",
|
|
73
74
|
{
|
|
74
75
|
role: decorative ? "none" : "separator",
|
|
@@ -77,20 +78,22 @@ const Divider = React.forwardRef(({
|
|
|
77
78
|
"flex items-center w-full",
|
|
78
79
|
spacingClass,
|
|
79
80
|
className
|
|
80
|
-
)
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
81
|
+
),
|
|
82
|
+
children: [
|
|
83
|
+
/* @__PURE__ */ jsx("div", { className: cn(
|
|
84
|
+
lineClass,
|
|
85
|
+
labelPosition === "left" ? "max-w-[10%]" : ""
|
|
86
|
+
) }),
|
|
87
|
+
/* @__PURE__ */ jsx("span", { className: "px-3 text-sm text-text-muted shrink-0 select-none", children: label }),
|
|
88
|
+
/* @__PURE__ */ jsx("div", { className: cn(
|
|
89
|
+
lineClass,
|
|
90
|
+
labelPosition === "right" ? "max-w-[10%]" : ""
|
|
91
|
+
) })
|
|
92
|
+
]
|
|
93
|
+
}
|
|
91
94
|
);
|
|
92
95
|
}
|
|
93
|
-
return /* @__PURE__ */
|
|
96
|
+
return /* @__PURE__ */ jsx(
|
|
94
97
|
SeparatorPrimitive.Root,
|
|
95
98
|
{
|
|
96
99
|
ref,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/ui/divider.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport * as SeparatorPrimitive from '@radix-ui/react-separator'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\n\n// ─── Divider ─────────────────────────────────────────────────\n\nconst dividerVariants = cva('shrink-0', {\n variants: {\n orientation: {\n horizontal: 'w-full',\n vertical: 'h-full self-stretch',\n },\n variant: {\n solid: 'border-solid',\n dashed: 'border-dashed',\n dotted: 'border-dotted',\n },\n color: {\n default: 'border-border-subtle',\n muted: 'border-border-subtle',\n strong: 'border-border-strong',\n },\n spacing: {\n sm: '',\n md: '',\n default: '',\n lg: '',\n },\n },\n compoundVariants: [\n // Horizontal spacing\n { orientation: 'horizontal', spacing: 'sm', className: 'my-2' },\n { orientation: 'horizontal', spacing: 'md', className: 'my-3' },\n { orientation: 'horizontal', spacing: 'default', className: 'my-4' },\n { orientation: 'horizontal', spacing: 'lg', className: 'my-8' },\n // Vertical spacing\n { orientation: 'vertical', spacing: 'sm', className: 'mx-2' },\n { orientation: 'vertical', spacing: 'md', className: 'mx-3' },\n { orientation: 'vertical', spacing: 'default', className: 'mx-4' },\n { orientation: 'vertical', spacing: 'lg', className: 'mx-8' },\n // Horizontal line style (border-top)\n { orientation: 'horizontal', className: 'border-t border-l-0' },\n // Vertical line style (border-left)\n { orientation: 'vertical', className: 'border-l border-t-0' },\n ],\n defaultVariants: {\n orientation: 'horizontal',\n variant: 'solid',\n color: 'default',\n spacing: 'default',\n },\n})\n\nexport interface DividerProps\n extends Omit<React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>, 'children' | 'color' | 'orientation'> {\n /** Direction of the divider */\n orientation?: 'horizontal' | 'vertical'\n /** Line style */\n variant?: 'solid' | 'dashed' | 'dotted'\n /** Line color intensity */\n color?: 'default' | 'muted' | 'strong'\n /** Spacing around the divider */\n spacing?: 'sm' | 'md' | 'default' | 'lg'\n /** Content to display on the divider line (horizontal only) */\n label?: React.ReactNode\n /** Label position along the line */\n labelPosition?: 'left' | 'center' | 'right'\n}\n\nconst Divider = React.forwardRef<\n React.ElementRef<typeof SeparatorPrimitive.Root>,\n DividerProps\n>(({\n className,\n orientation = 'horizontal',\n variant = 'solid',\n color = 'default',\n spacing = 'default',\n label,\n labelPosition = 'center',\n decorative = true,\n ...props\n}, ref) => {\n // Line style class for label mode\n const lineClass = cn(\n 'flex-1',\n variant === 'dashed' ? 'border-dashed' : variant === 'dotted' ? 'border-dotted' : 'border-solid',\n color === 'muted' ? 'border-border-subtle' : color === 'strong' ? 'border-border-strong' : 'border-border-subtle',\n 'border-t'\n )\n\n // Spacing class for label wrapper\n const spacingClass =\n spacing === 'sm' ? 'my-2'\n : spacing === 'md' ? 'my-3'\n : spacing === 'lg' ? 'my-8'\n : 'my-4'\n\n // Horizontal with label: render as flex container with two lines\n if (label && orientation === 'horizontal') {\n return (\n <div\n role={decorative ? 'none' : 'separator'}\n aria-orientation=\"horizontal\"\n className={cn(\n 'flex items-center w-full',\n spacingClass,\n className\n )}\n >\n <div className={cn(\n lineClass,\n labelPosition === 'left' ? 'max-w-[10%]' : ''\n )} />\n <span className=\"px-3 text-sm text-text-muted shrink-0 select-none\">{label}</span>\n <div className={cn(\n lineClass,\n labelPosition === 'right' ? 'max-w-[10%]' : ''\n )} />\n </div>\n )\n }\n\n // Default: Radix Separator\n return (\n <SeparatorPrimitive.Root\n ref={ref}\n decorative={decorative}\n orientation={orientation}\n className={cn(\n dividerVariants({ orientation, variant, color, spacing }),\n className\n )}\n {...props}\n />\n )\n})\nDivider.displayName = 'Divider'\n\n// ─── Exports ─────────────────────────────────────────────────\n\nexport { Divider, dividerVariants }\n"],"mappings":";
|
|
1
|
+
{"version":3,"sources":["../../../src/components/ui/divider.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport * as SeparatorPrimitive from '@radix-ui/react-separator'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\n\n// ─── Divider ─────────────────────────────────────────────────\n\nconst dividerVariants = cva('shrink-0', {\n variants: {\n orientation: {\n horizontal: 'w-full',\n vertical: 'h-full self-stretch',\n },\n variant: {\n solid: 'border-solid',\n dashed: 'border-dashed',\n dotted: 'border-dotted',\n },\n color: {\n default: 'border-border-subtle',\n muted: 'border-border-subtle',\n strong: 'border-border-strong',\n },\n spacing: {\n sm: '',\n md: '',\n default: '',\n lg: '',\n },\n },\n compoundVariants: [\n // Horizontal spacing\n { orientation: 'horizontal', spacing: 'sm', className: 'my-2' },\n { orientation: 'horizontal', spacing: 'md', className: 'my-3' },\n { orientation: 'horizontal', spacing: 'default', className: 'my-4' },\n { orientation: 'horizontal', spacing: 'lg', className: 'my-8' },\n // Vertical spacing\n { orientation: 'vertical', spacing: 'sm', className: 'mx-2' },\n { orientation: 'vertical', spacing: 'md', className: 'mx-3' },\n { orientation: 'vertical', spacing: 'default', className: 'mx-4' },\n { orientation: 'vertical', spacing: 'lg', className: 'mx-8' },\n // Horizontal line style (border-top)\n { orientation: 'horizontal', className: 'border-t border-l-0' },\n // Vertical line style (border-left)\n { orientation: 'vertical', className: 'border-l border-t-0' },\n ],\n defaultVariants: {\n orientation: 'horizontal',\n variant: 'solid',\n color: 'default',\n spacing: 'default',\n },\n})\n\nexport interface DividerProps\n extends Omit<React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>, 'children' | 'color' | 'orientation'> {\n /** Direction of the divider */\n orientation?: 'horizontal' | 'vertical'\n /** Line style */\n variant?: 'solid' | 'dashed' | 'dotted'\n /** Line color intensity */\n color?: 'default' | 'muted' | 'strong'\n /** Spacing around the divider */\n spacing?: 'sm' | 'md' | 'default' | 'lg'\n /** Content to display on the divider line (horizontal only) */\n label?: React.ReactNode\n /** Label position along the line */\n labelPosition?: 'left' | 'center' | 'right'\n}\n\nconst Divider = React.forwardRef<\n React.ElementRef<typeof SeparatorPrimitive.Root>,\n DividerProps\n>(({\n className,\n orientation = 'horizontal',\n variant = 'solid',\n color = 'default',\n spacing = 'default',\n label,\n labelPosition = 'center',\n decorative = true,\n ...props\n}, ref) => {\n // Line style class for label mode\n const lineClass = cn(\n 'flex-1',\n variant === 'dashed' ? 'border-dashed' : variant === 'dotted' ? 'border-dotted' : 'border-solid',\n color === 'muted' ? 'border-border-subtle' : color === 'strong' ? 'border-border-strong' : 'border-border-subtle',\n 'border-t'\n )\n\n // Spacing class for label wrapper\n const spacingClass =\n spacing === 'sm' ? 'my-2'\n : spacing === 'md' ? 'my-3'\n : spacing === 'lg' ? 'my-8'\n : 'my-4'\n\n // Horizontal with label: render as flex container with two lines\n if (label && orientation === 'horizontal') {\n return (\n <div\n role={decorative ? 'none' : 'separator'}\n aria-orientation=\"horizontal\"\n className={cn(\n 'flex items-center w-full',\n spacingClass,\n className\n )}\n >\n <div className={cn(\n lineClass,\n labelPosition === 'left' ? 'max-w-[10%]' : ''\n )} />\n <span className=\"px-3 text-sm text-text-muted shrink-0 select-none\">{label}</span>\n <div className={cn(\n lineClass,\n labelPosition === 'right' ? 'max-w-[10%]' : ''\n )} />\n </div>\n )\n }\n\n // Default: Radix Separator\n return (\n <SeparatorPrimitive.Root\n ref={ref}\n decorative={decorative}\n orientation={orientation}\n className={cn(\n dividerVariants({ orientation, variant, color, spacing }),\n className\n )}\n {...props}\n />\n )\n})\nDivider.displayName = 'Divider'\n\n// ─── Exports ─────────────────────────────────────────────────\n\nexport { Divider, dividerVariants }\n"],"mappings":";AAwGM,SASE,KATF;AAtGN,YAAY,WAAW;AACvB,YAAY,wBAAwB;AACpC,SAAS,WAA8B;AACvC,SAAS,UAAU;AAInB,MAAM,kBAAkB,IAAI,YAAY;AAAA,EACtC,UAAU;AAAA,IACR,aAAa;AAAA,MACX,YAAY;AAAA,MACZ,UAAU;AAAA,IACZ;AAAA,IACA,SAAS;AAAA,MACP,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,QAAQ;AAAA,IACV;AAAA,IACA,OAAO;AAAA,MACL,SAAS;AAAA,MACT,OAAO;AAAA,MACP,QAAQ;AAAA,IACV;AAAA,IACA,SAAS;AAAA,MACP,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,SAAS;AAAA,MACT,IAAI;AAAA,IACN;AAAA,EACF;AAAA,EACA,kBAAkB;AAAA;AAAA,IAEhB,EAAE,aAAa,cAAc,SAAS,MAAM,WAAW,OAAO;AAAA,IAC9D,EAAE,aAAa,cAAc,SAAS,MAAM,WAAW,OAAO;AAAA,IAC9D,EAAE,aAAa,cAAc,SAAS,WAAW,WAAW,OAAO;AAAA,IACnE,EAAE,aAAa,cAAc,SAAS,MAAM,WAAW,OAAO;AAAA;AAAA,IAE9D,EAAE,aAAa,YAAY,SAAS,MAAM,WAAW,OAAO;AAAA,IAC5D,EAAE,aAAa,YAAY,SAAS,MAAM,WAAW,OAAO;AAAA,IAC5D,EAAE,aAAa,YAAY,SAAS,WAAW,WAAW,OAAO;AAAA,IACjE,EAAE,aAAa,YAAY,SAAS,MAAM,WAAW,OAAO;AAAA;AAAA,IAE5D,EAAE,aAAa,cAAc,WAAW,sBAAsB;AAAA;AAAA,IAE9D,EAAE,aAAa,YAAY,WAAW,sBAAsB;AAAA,EAC9D;AAAA,EACA,iBAAiB;AAAA,IACf,aAAa;AAAA,IACb,SAAS;AAAA,IACT,OAAO;AAAA,IACP,SAAS;AAAA,EACX;AACF,CAAC;AAkBD,MAAM,UAAU,MAAM,WAGpB,CAAC;AAAA,EACD;AAAA,EACA,cAAc;AAAA,EACd,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,UAAU;AAAA,EACV;AAAA,EACA,gBAAgB;AAAA,EAChB,aAAa;AAAA,EACb,GAAG;AACL,GAAG,QAAQ;AAET,QAAM,YAAY;AAAA,IAChB;AAAA,IACA,YAAY,WAAW,kBAAkB,YAAY,WAAW,kBAAkB;AAAA,IAClF,UAAU,UAAU,yBAAyB,UAAU,WAAW,yBAAyB;AAAA,IAC3F;AAAA,EACF;AAGA,QAAM,eACJ,YAAY,OAAO,SACjB,YAAY,OAAO,SACnB,YAAY,OAAO,SACnB;AAGJ,MAAI,SAAS,gBAAgB,cAAc;AACzC,WACE;AAAA,MAAC;AAAA;AAAA,QACC,MAAM,aAAa,SAAS;AAAA,QAC5B,oBAAiB;AAAA,QACjB,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,QAEA;AAAA,8BAAC,SAAI,WAAW;AAAA,YACd;AAAA,YACA,kBAAkB,SAAS,gBAAgB;AAAA,UAC7C,GAAG;AAAA,UACH,oBAAC,UAAK,WAAU,qDAAqD,iBAAM;AAAA,UAC3E,oBAAC,SAAI,WAAW;AAAA,YACd;AAAA,YACA,kBAAkB,UAAU,gBAAgB;AAAA,UAC9C,GAAG;AAAA;AAAA;AAAA,IACL;AAAA,EAEJ;AAGA,SACE;AAAA,IAAC,mBAAmB;AAAA,IAAnB;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW;AAAA,QACT,gBAAgB,EAAE,aAAa,SAAS,OAAO,QAAQ,CAAC;AAAA,QACxD;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ,CAAC;AACD,QAAQ,cAAc;","names":[]}
|
|
@@ -44,11 +44,12 @@ __export(drawer_exports, {
|
|
|
44
44
|
drawerSizeVertical: () => drawerSizeVertical
|
|
45
45
|
});
|
|
46
46
|
module.exports = __toCommonJS(drawer_exports);
|
|
47
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
47
48
|
var React = __toESM(require("react"));
|
|
48
49
|
var DialogPrimitive = __toESM(require("@radix-ui/react-dialog"));
|
|
49
50
|
var import_class_variance_authority = require("class-variance-authority");
|
|
50
51
|
var import_utils = require("../../lib/utils");
|
|
51
|
-
const DefaultCloseIcon = ({ className }) => /* @__PURE__ */
|
|
52
|
+
const DefaultCloseIcon = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
52
53
|
"svg",
|
|
53
54
|
{
|
|
54
55
|
className,
|
|
@@ -56,9 +57,9 @@ const DefaultCloseIcon = ({ className }) => /* @__PURE__ */ React.createElement(
|
|
|
56
57
|
viewBox: "0 0 24 24",
|
|
57
58
|
stroke: "currentColor",
|
|
58
59
|
strokeWidth: 2,
|
|
59
|
-
"aria-hidden": "true"
|
|
60
|
-
|
|
61
|
-
|
|
60
|
+
"aria-hidden": "true",
|
|
61
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" })
|
|
62
|
+
}
|
|
62
63
|
);
|
|
63
64
|
const ANIMATION_CLASSES = {
|
|
64
65
|
right: "data-[state=open]:animate-drawer-right-enter data-[state=closed]:animate-drawer-right-exit",
|
|
@@ -91,12 +92,12 @@ const drawerSizeVertical = (0, import_class_variance_authority.cva)("", {
|
|
|
91
92
|
defaultVariants: { size: "md" }
|
|
92
93
|
});
|
|
93
94
|
function Drawer(props) {
|
|
94
|
-
return /* @__PURE__ */
|
|
95
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogPrimitive.Root, { ...props });
|
|
95
96
|
}
|
|
96
97
|
const DrawerTrigger = DialogPrimitive.Trigger;
|
|
97
98
|
const DrawerPortal = DialogPrimitive.Portal;
|
|
98
99
|
const DrawerClose = DialogPrimitive.Close;
|
|
99
|
-
const DrawerOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
|
|
100
|
+
const DrawerOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
100
101
|
DialogPrimitive.Overlay,
|
|
101
102
|
{
|
|
102
103
|
ref,
|
|
@@ -118,33 +119,41 @@ const SIDE_POSITION = {
|
|
|
118
119
|
const DrawerContent = React.forwardRef(({ className, children, side = "right", size = "md", showCloseButton = true, closeIcon, ...props }, ref) => {
|
|
119
120
|
const isHorizontal = side === "left" || side === "right";
|
|
120
121
|
const sizeClass = isHorizontal ? drawerSizeHorizontal({ size }) : drawerSizeVertical({ size });
|
|
121
|
-
return /* @__PURE__ */
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
122
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DrawerPortal, { children: [
|
|
123
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(DrawerOverlay, {}),
|
|
124
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
125
|
+
DialogPrimitive.Content,
|
|
126
|
+
{
|
|
127
|
+
ref,
|
|
128
|
+
className: (0, import_utils.cn)(
|
|
129
|
+
"fixed z-modal flex flex-col bg-background text-foreground shadow-xl",
|
|
130
|
+
"focus:outline-none",
|
|
131
|
+
SIDE_POSITION[side],
|
|
132
|
+
isHorizontal ? "max-w-full h-full" : "max-h-full w-full",
|
|
133
|
+
sizeClass,
|
|
134
|
+
ANIMATION_CLASSES[side],
|
|
135
|
+
className
|
|
136
|
+
),
|
|
137
|
+
...props,
|
|
138
|
+
children: [
|
|
139
|
+
children,
|
|
140
|
+
showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DialogPrimitive.Close, { className: (0, import_utils.cn)(
|
|
141
|
+
"absolute right-4 top-4 rounded-md p-1",
|
|
142
|
+
"text-text-muted hover:text-foreground",
|
|
143
|
+
"transition-colors duration-fast",
|
|
144
|
+
"focus-visible:focus-ring focus-visible:outline-none",
|
|
145
|
+
"disabled:pointer-events-none"
|
|
146
|
+
), children: [
|
|
147
|
+
closeIcon || /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DefaultCloseIcon, { className: "icon-sm" }),
|
|
148
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "sr-only", children: "Close" })
|
|
149
|
+
] })
|
|
150
|
+
]
|
|
151
|
+
}
|
|
152
|
+
)
|
|
153
|
+
] });
|
|
145
154
|
});
|
|
146
155
|
DrawerContent.displayName = "DrawerContent";
|
|
147
|
-
const DrawerHeader = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
|
|
156
|
+
const DrawerHeader = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
148
157
|
"div",
|
|
149
158
|
{
|
|
150
159
|
ref,
|
|
@@ -153,7 +162,7 @@ const DrawerHeader = React.forwardRef(({ className, ...props }, ref) => /* @__PU
|
|
|
153
162
|
}
|
|
154
163
|
));
|
|
155
164
|
DrawerHeader.displayName = "DrawerHeader";
|
|
156
|
-
const DrawerTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
|
|
165
|
+
const DrawerTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
157
166
|
DialogPrimitive.Title,
|
|
158
167
|
{
|
|
159
168
|
ref,
|
|
@@ -162,7 +171,7 @@ const DrawerTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PUR
|
|
|
162
171
|
}
|
|
163
172
|
));
|
|
164
173
|
DrawerTitle.displayName = "DrawerTitle";
|
|
165
|
-
const DrawerDescription = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
|
|
174
|
+
const DrawerDescription = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
166
175
|
DialogPrimitive.Description,
|
|
167
176
|
{
|
|
168
177
|
ref,
|
|
@@ -171,7 +180,7 @@ const DrawerDescription = React.forwardRef(({ className, ...props }, ref) => /*
|
|
|
171
180
|
}
|
|
172
181
|
));
|
|
173
182
|
DrawerDescription.displayName = "DrawerDescription";
|
|
174
|
-
const DrawerBody = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
|
|
183
|
+
const DrawerBody = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
175
184
|
"div",
|
|
176
185
|
{
|
|
177
186
|
ref,
|
|
@@ -180,7 +189,7 @@ const DrawerBody = React.forwardRef(({ className, ...props }, ref) => /* @__PURE
|
|
|
180
189
|
}
|
|
181
190
|
));
|
|
182
191
|
DrawerBody.displayName = "DrawerBody";
|
|
183
|
-
const DrawerFooter = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
|
|
192
|
+
const DrawerFooter = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
184
193
|
"div",
|
|
185
194
|
{
|
|
186
195
|
ref,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/ui/drawer.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport * as DialogPrimitive from '@radix-ui/react-dialog'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\n\n// ─── Default Close Icon (built-in, no external dependency) ──\nconst DefaultCloseIcon = ({ className }: { className?: string }) => (\n <svg\n className={className}\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke=\"currentColor\"\n strokeWidth={2}\n aria-hidden=\"true\"\n >\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M6 18L18 6M6 6l12 12\" />\n </svg>\n)\n\n// ─── Types ──────────────────────────────────────────────────\nexport type DrawerSide = 'left' | 'right' | 'top' | 'bottom'\nexport type DrawerSize = 'sm' | 'md' | 'lg' | 'xl' | 'full'\n\n// ─── Animation class mapping (static strings for Tailwind scanner) ──\nconst ANIMATION_CLASSES: Record<DrawerSide, string> = {\n right: 'data-[state=open]:animate-drawer-right-enter data-[state=closed]:animate-drawer-right-exit',\n left: 'data-[state=open]:animate-drawer-left-enter data-[state=closed]:animate-drawer-left-exit',\n top: 'data-[state=open]:animate-drawer-top-enter data-[state=closed]:animate-drawer-top-exit',\n bottom: 'data-[state=open]:animate-drawer-bottom-enter data-[state=closed]:animate-drawer-bottom-exit',\n}\n\n// ─── Size variants ──────────────────────────────────────────\nconst drawerSizeHorizontal = cva('', {\n variants: {\n size: {\n sm: 'w-[320px]',\n md: 'w-[400px]',\n lg: 'w-[480px]',\n xl: 'w-[640px]',\n full: 'w-full',\n },\n },\n defaultVariants: { size: 'md' },\n})\n\nconst drawerSizeVertical = cva('', {\n variants: {\n size: {\n sm: 'h-[320px]',\n md: 'h-[400px]',\n lg: 'h-[480px]',\n xl: 'h-[640px]',\n full: 'h-full',\n },\n },\n defaultVariants: { size: 'md' },\n})\n\n// ═══════════════════════════════════════════════════════════════\n// Drawer\n// ═══════════════════════════════════════════════════════════════\n\n// ─── Drawer (Root) — wrapper to keep our own component identity separate from DialogPrimitive.Root ──\nfunction Drawer(props: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Root>) {\n return <DialogPrimitive.Root {...props} />\n}\n\n// ─── DrawerTrigger ──────────────────────────────────────────\nconst DrawerTrigger = DialogPrimitive.Trigger\n\n// ─── DrawerPortal ───────────────────────────────────────────\nconst DrawerPortal = DialogPrimitive.Portal\n\n// ─── DrawerClose ────────────────────────────────────────────\nconst DrawerClose = DialogPrimitive.Close\n\n// ─── DrawerOverlay ──────────────────────────────────────────\nconst DrawerOverlay = React.forwardRef<\n React.ElementRef<typeof DialogPrimitive.Overlay>,\n React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n <DialogPrimitive.Overlay\n ref={ref}\n className={cn(\n 'fixed inset-0 z-overlay bg-black/50',\n 'data-[state=open]:animate-modal-overlay-enter data-[state=closed]:animate-modal-overlay-exit',\n className\n )}\n {...props}\n />\n))\nDrawerOverlay.displayName = 'DrawerOverlay'\n\n// ─── DrawerContent ──────────────────────────────────────────\nexport interface DrawerContentProps\n extends Omit<React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>, 'children'> {\n /** Side from which the drawer slides in */\n side?: DrawerSide\n /** Panel size (width for left/right, height for top/bottom) */\n size?: DrawerSize\n /** Show built-in close button */\n showCloseButton?: boolean\n /** Custom close icon (replaces default X) */\n closeIcon?: React.ReactNode\n children?: React.ReactNode\n}\n\nconst SIDE_POSITION: Record<DrawerSide, string> = {\n right: 'inset-y-0 right-0',\n left: 'inset-y-0 left-0',\n top: 'inset-x-0 top-0',\n bottom: 'inset-x-0 bottom-0',\n}\n\nconst DrawerContent = React.forwardRef<\n React.ElementRef<typeof DialogPrimitive.Content>,\n DrawerContentProps\n>(({ className, children, side = 'right', size = 'md', showCloseButton = true, closeIcon, ...props }, ref) => {\n const isHorizontal = side === 'left' || side === 'right'\n const sizeClass = isHorizontal\n ? drawerSizeHorizontal({ size })\n : drawerSizeVertical({ size })\n\n return (\n <DrawerPortal>\n <DrawerOverlay />\n <DialogPrimitive.Content\n ref={ref}\n className={cn(\n 'fixed z-modal flex flex-col bg-background text-foreground shadow-xl',\n 'focus:outline-none',\n SIDE_POSITION[side],\n isHorizontal ? 'max-w-full h-full' : 'max-h-full w-full',\n sizeClass,\n ANIMATION_CLASSES[side],\n className,\n )}\n {...props}\n >\n {children}\n {showCloseButton && (\n <DialogPrimitive.Close className={cn(\n 'absolute right-4 top-4 rounded-md p-1',\n 'text-text-muted hover:text-foreground',\n 'transition-colors duration-fast',\n 'focus-visible:focus-ring focus-visible:outline-none',\n 'disabled:pointer-events-none'\n )}>\n {closeIcon || <DefaultCloseIcon className=\"icon-sm\" />}\n <span className=\"sr-only\">Close</span>\n </DialogPrimitive.Close>\n )}\n </DialogPrimitive.Content>\n </DrawerPortal>\n )\n})\nDrawerContent.displayName = 'DrawerContent'\n\n// ─── DrawerHeader ───────────────────────────────────────────\nconst DrawerHeader = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n <div\n ref={ref}\n className={cn('flex flex-col gap-1.5 p-6 pb-0', className)}\n {...props}\n />\n))\nDrawerHeader.displayName = 'DrawerHeader'\n\n// ─── DrawerTitle ────────────────────────────────────────────\nconst DrawerTitle = React.forwardRef<\n React.ElementRef<typeof DialogPrimitive.Title>,\n React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n <DialogPrimitive.Title\n ref={ref}\n className={cn('text-lg font-semibold text-foreground', className)}\n {...props}\n />\n))\nDrawerTitle.displayName = 'DrawerTitle'\n\n// ─── DrawerDescription ─────────────────────────────────────\nconst DrawerDescription = React.forwardRef<\n React.ElementRef<typeof DialogPrimitive.Description>,\n React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n <DialogPrimitive.Description\n ref={ref}\n className={cn('text-md text-text-muted', className)}\n {...props}\n />\n))\nDrawerDescription.displayName = 'DrawerDescription'\n\n// ─── DrawerBody ─────────────────────────────────────────────\nconst DrawerBody = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n <div\n ref={ref}\n className={cn('flex-1 overflow-y-auto p-6', className)}\n {...props}\n />\n))\nDrawerBody.displayName = 'DrawerBody'\n\n// ─── DrawerFooter ───────────────────────────────────────────\nconst DrawerFooter = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n <div\n ref={ref}\n className={cn(\n 'flex items-center justify-end gap-3 p-6 pt-0',\n className\n )}\n {...props}\n />\n))\nDrawerFooter.displayName = 'DrawerFooter'\n\n// ─── Exports ────────────────────────────────────────────────\nexport {\n Drawer,\n DrawerTrigger,\n DrawerPortal,\n DrawerOverlay,\n DrawerContent,\n DrawerHeader,\n DrawerTitle,\n DrawerDescription,\n DrawerBody,\n DrawerFooter,\n DrawerClose,\n drawerSizeHorizontal,\n drawerSizeVertical,\n}\n"],"mappings":"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","names":[]}
|
|
1
|
+
{"version":3,"sources":["../../../src/components/ui/drawer.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport * as DialogPrimitive from '@radix-ui/react-dialog'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\n\n// ─── Default Close Icon (built-in, no external dependency) ──\nconst DefaultCloseIcon = ({ className }: { className?: string }) => (\n <svg\n className={className}\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke=\"currentColor\"\n strokeWidth={2}\n aria-hidden=\"true\"\n >\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M6 18L18 6M6 6l12 12\" />\n </svg>\n)\n\n// ─── Types ──────────────────────────────────────────────────\nexport type DrawerSide = 'left' | 'right' | 'top' | 'bottom'\nexport type DrawerSize = 'sm' | 'md' | 'lg' | 'xl' | 'full'\n\n// ─── Animation class mapping (static strings for Tailwind scanner) ──\nconst ANIMATION_CLASSES: Record<DrawerSide, string> = {\n right: 'data-[state=open]:animate-drawer-right-enter data-[state=closed]:animate-drawer-right-exit',\n left: 'data-[state=open]:animate-drawer-left-enter data-[state=closed]:animate-drawer-left-exit',\n top: 'data-[state=open]:animate-drawer-top-enter data-[state=closed]:animate-drawer-top-exit',\n bottom: 'data-[state=open]:animate-drawer-bottom-enter data-[state=closed]:animate-drawer-bottom-exit',\n}\n\n// ─── Size variants ──────────────────────────────────────────\nconst drawerSizeHorizontal = cva('', {\n variants: {\n size: {\n sm: 'w-[320px]',\n md: 'w-[400px]',\n lg: 'w-[480px]',\n xl: 'w-[640px]',\n full: 'w-full',\n },\n },\n defaultVariants: { size: 'md' },\n})\n\nconst drawerSizeVertical = cva('', {\n variants: {\n size: {\n sm: 'h-[320px]',\n md: 'h-[400px]',\n lg: 'h-[480px]',\n xl: 'h-[640px]',\n full: 'h-full',\n },\n },\n defaultVariants: { size: 'md' },\n})\n\n// ═══════════════════════════════════════════════════════════════\n// Drawer\n// ═══════════════════════════════════════════════════════════════\n\n// ─── Drawer (Root) — wrapper to keep our own component identity separate from DialogPrimitive.Root ──\nfunction Drawer(props: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Root>) {\n return <DialogPrimitive.Root {...props} />\n}\n\n// ─── DrawerTrigger ──────────────────────────────────────────\nconst DrawerTrigger = DialogPrimitive.Trigger\n\n// ─── DrawerPortal ───────────────────────────────────────────\nconst DrawerPortal = DialogPrimitive.Portal\n\n// ─── DrawerClose ────────────────────────────────────────────\nconst DrawerClose = DialogPrimitive.Close\n\n// ─── DrawerOverlay ──────────────────────────────────────────\nconst DrawerOverlay = React.forwardRef<\n React.ElementRef<typeof DialogPrimitive.Overlay>,\n React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n <DialogPrimitive.Overlay\n ref={ref}\n className={cn(\n 'fixed inset-0 z-overlay bg-black/50',\n 'data-[state=open]:animate-modal-overlay-enter data-[state=closed]:animate-modal-overlay-exit',\n className\n )}\n {...props}\n />\n))\nDrawerOverlay.displayName = 'DrawerOverlay'\n\n// ─── DrawerContent ──────────────────────────────────────────\nexport interface DrawerContentProps\n extends Omit<React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>, 'children'> {\n /** Side from which the drawer slides in */\n side?: DrawerSide\n /** Panel size (width for left/right, height for top/bottom) */\n size?: DrawerSize\n /** Show built-in close button */\n showCloseButton?: boolean\n /** Custom close icon (replaces default X) */\n closeIcon?: React.ReactNode\n children?: React.ReactNode\n}\n\nconst SIDE_POSITION: Record<DrawerSide, string> = {\n right: 'inset-y-0 right-0',\n left: 'inset-y-0 left-0',\n top: 'inset-x-0 top-0',\n bottom: 'inset-x-0 bottom-0',\n}\n\nconst DrawerContent = React.forwardRef<\n React.ElementRef<typeof DialogPrimitive.Content>,\n DrawerContentProps\n>(({ className, children, side = 'right', size = 'md', showCloseButton = true, closeIcon, ...props }, ref) => {\n const isHorizontal = side === 'left' || side === 'right'\n const sizeClass = isHorizontal\n ? drawerSizeHorizontal({ size })\n : drawerSizeVertical({ size })\n\n return (\n <DrawerPortal>\n <DrawerOverlay />\n <DialogPrimitive.Content\n ref={ref}\n className={cn(\n 'fixed z-modal flex flex-col bg-background text-foreground shadow-xl',\n 'focus:outline-none',\n SIDE_POSITION[side],\n isHorizontal ? 'max-w-full h-full' : 'max-h-full w-full',\n sizeClass,\n ANIMATION_CLASSES[side],\n className,\n )}\n {...props}\n >\n {children}\n {showCloseButton && (\n <DialogPrimitive.Close className={cn(\n 'absolute right-4 top-4 rounded-md p-1',\n 'text-text-muted hover:text-foreground',\n 'transition-colors duration-fast',\n 'focus-visible:focus-ring focus-visible:outline-none',\n 'disabled:pointer-events-none'\n )}>\n {closeIcon || <DefaultCloseIcon className=\"icon-sm\" />}\n <span className=\"sr-only\">Close</span>\n </DialogPrimitive.Close>\n )}\n </DialogPrimitive.Content>\n </DrawerPortal>\n )\n})\nDrawerContent.displayName = 'DrawerContent'\n\n// ─── DrawerHeader ───────────────────────────────────────────\nconst DrawerHeader = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n <div\n ref={ref}\n className={cn('flex flex-col gap-1.5 p-6 pb-0', className)}\n {...props}\n />\n))\nDrawerHeader.displayName = 'DrawerHeader'\n\n// ─── DrawerTitle ────────────────────────────────────────────\nconst DrawerTitle = React.forwardRef<\n React.ElementRef<typeof DialogPrimitive.Title>,\n React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n <DialogPrimitive.Title\n ref={ref}\n className={cn('text-lg font-semibold text-foreground', className)}\n {...props}\n />\n))\nDrawerTitle.displayName = 'DrawerTitle'\n\n// ─── DrawerDescription ─────────────────────────────────────\nconst DrawerDescription = React.forwardRef<\n React.ElementRef<typeof DialogPrimitive.Description>,\n React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n <DialogPrimitive.Description\n ref={ref}\n className={cn('text-md text-text-muted', className)}\n {...props}\n />\n))\nDrawerDescription.displayName = 'DrawerDescription'\n\n// ─── DrawerBody ─────────────────────────────────────────────\nconst DrawerBody = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n <div\n ref={ref}\n className={cn('flex-1 overflow-y-auto p-6', className)}\n {...props}\n />\n))\nDrawerBody.displayName = 'DrawerBody'\n\n// ─── DrawerFooter ───────────────────────────────────────────\nconst DrawerFooter = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n <div\n ref={ref}\n className={cn(\n 'flex items-center justify-end gap-3 p-6 pt-0',\n className\n )}\n {...props}\n />\n))\nDrawerFooter.displayName = 'DrawerFooter'\n\n// ─── Exports ────────────────────────────────────────────────\nexport {\n Drawer,\n DrawerTrigger,\n DrawerPortal,\n DrawerOverlay,\n DrawerContent,\n DrawerHeader,\n DrawerTitle,\n DrawerDescription,\n DrawerBody,\n DrawerFooter,\n DrawerClose,\n drawerSizeHorizontal,\n drawerSizeVertical,\n}\n"],"mappings":"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","names":[]}
|
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
"use client";
|
|
2
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
3
|
import * as React from "react";
|
|
3
4
|
import * as DialogPrimitive from "@radix-ui/react-dialog";
|
|
4
5
|
import { cva } from "class-variance-authority";
|
|
5
6
|
import { cn } from "../../lib/utils";
|
|
6
|
-
const DefaultCloseIcon = ({ className }) => /* @__PURE__ */
|
|
7
|
+
const DefaultCloseIcon = ({ className }) => /* @__PURE__ */ jsx(
|
|
7
8
|
"svg",
|
|
8
9
|
{
|
|
9
10
|
className,
|
|
@@ -11,9 +12,9 @@ const DefaultCloseIcon = ({ className }) => /* @__PURE__ */ React.createElement(
|
|
|
11
12
|
viewBox: "0 0 24 24",
|
|
12
13
|
stroke: "currentColor",
|
|
13
14
|
strokeWidth: 2,
|
|
14
|
-
"aria-hidden": "true"
|
|
15
|
-
|
|
16
|
-
|
|
15
|
+
"aria-hidden": "true",
|
|
16
|
+
children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" })
|
|
17
|
+
}
|
|
17
18
|
);
|
|
18
19
|
const ANIMATION_CLASSES = {
|
|
19
20
|
right: "data-[state=open]:animate-drawer-right-enter data-[state=closed]:animate-drawer-right-exit",
|
|
@@ -46,12 +47,12 @@ const drawerSizeVertical = cva("", {
|
|
|
46
47
|
defaultVariants: { size: "md" }
|
|
47
48
|
});
|
|
48
49
|
function Drawer(props) {
|
|
49
|
-
return /* @__PURE__ */
|
|
50
|
+
return /* @__PURE__ */ jsx(DialogPrimitive.Root, { ...props });
|
|
50
51
|
}
|
|
51
52
|
const DrawerTrigger = DialogPrimitive.Trigger;
|
|
52
53
|
const DrawerPortal = DialogPrimitive.Portal;
|
|
53
54
|
const DrawerClose = DialogPrimitive.Close;
|
|
54
|
-
const DrawerOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
|
|
55
|
+
const DrawerOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
55
56
|
DialogPrimitive.Overlay,
|
|
56
57
|
{
|
|
57
58
|
ref,
|
|
@@ -73,33 +74,41 @@ const SIDE_POSITION = {
|
|
|
73
74
|
const DrawerContent = React.forwardRef(({ className, children, side = "right", size = "md", showCloseButton = true, closeIcon, ...props }, ref) => {
|
|
74
75
|
const isHorizontal = side === "left" || side === "right";
|
|
75
76
|
const sizeClass = isHorizontal ? drawerSizeHorizontal({ size }) : drawerSizeVertical({ size });
|
|
76
|
-
return /* @__PURE__ */
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
77
|
+
return /* @__PURE__ */ jsxs(DrawerPortal, { children: [
|
|
78
|
+
/* @__PURE__ */ jsx(DrawerOverlay, {}),
|
|
79
|
+
/* @__PURE__ */ jsxs(
|
|
80
|
+
DialogPrimitive.Content,
|
|
81
|
+
{
|
|
82
|
+
ref,
|
|
83
|
+
className: cn(
|
|
84
|
+
"fixed z-modal flex flex-col bg-background text-foreground shadow-xl",
|
|
85
|
+
"focus:outline-none",
|
|
86
|
+
SIDE_POSITION[side],
|
|
87
|
+
isHorizontal ? "max-w-full h-full" : "max-h-full w-full",
|
|
88
|
+
sizeClass,
|
|
89
|
+
ANIMATION_CLASSES[side],
|
|
90
|
+
className
|
|
91
|
+
),
|
|
92
|
+
...props,
|
|
93
|
+
children: [
|
|
94
|
+
children,
|
|
95
|
+
showCloseButton && /* @__PURE__ */ jsxs(DialogPrimitive.Close, { className: cn(
|
|
96
|
+
"absolute right-4 top-4 rounded-md p-1",
|
|
97
|
+
"text-text-muted hover:text-foreground",
|
|
98
|
+
"transition-colors duration-fast",
|
|
99
|
+
"focus-visible:focus-ring focus-visible:outline-none",
|
|
100
|
+
"disabled:pointer-events-none"
|
|
101
|
+
), children: [
|
|
102
|
+
closeIcon || /* @__PURE__ */ jsx(DefaultCloseIcon, { className: "icon-sm" }),
|
|
103
|
+
/* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
|
|
104
|
+
] })
|
|
105
|
+
]
|
|
106
|
+
}
|
|
107
|
+
)
|
|
108
|
+
] });
|
|
100
109
|
});
|
|
101
110
|
DrawerContent.displayName = "DrawerContent";
|
|
102
|
-
const DrawerHeader = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
|
|
111
|
+
const DrawerHeader = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
103
112
|
"div",
|
|
104
113
|
{
|
|
105
114
|
ref,
|
|
@@ -108,7 +117,7 @@ const DrawerHeader = React.forwardRef(({ className, ...props }, ref) => /* @__PU
|
|
|
108
117
|
}
|
|
109
118
|
));
|
|
110
119
|
DrawerHeader.displayName = "DrawerHeader";
|
|
111
|
-
const DrawerTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
|
|
120
|
+
const DrawerTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
112
121
|
DialogPrimitive.Title,
|
|
113
122
|
{
|
|
114
123
|
ref,
|
|
@@ -117,7 +126,7 @@ const DrawerTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PUR
|
|
|
117
126
|
}
|
|
118
127
|
));
|
|
119
128
|
DrawerTitle.displayName = "DrawerTitle";
|
|
120
|
-
const DrawerDescription = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
|
|
129
|
+
const DrawerDescription = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
121
130
|
DialogPrimitive.Description,
|
|
122
131
|
{
|
|
123
132
|
ref,
|
|
@@ -126,7 +135,7 @@ const DrawerDescription = React.forwardRef(({ className, ...props }, ref) => /*
|
|
|
126
135
|
}
|
|
127
136
|
));
|
|
128
137
|
DrawerDescription.displayName = "DrawerDescription";
|
|
129
|
-
const DrawerBody = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
|
|
138
|
+
const DrawerBody = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
130
139
|
"div",
|
|
131
140
|
{
|
|
132
141
|
ref,
|
|
@@ -135,7 +144,7 @@ const DrawerBody = React.forwardRef(({ className, ...props }, ref) => /* @__PURE
|
|
|
135
144
|
}
|
|
136
145
|
));
|
|
137
146
|
DrawerBody.displayName = "DrawerBody";
|
|
138
|
-
const DrawerFooter = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
|
|
147
|
+
const DrawerFooter = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
139
148
|
"div",
|
|
140
149
|
{
|
|
141
150
|
ref,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/ui/drawer.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport * as DialogPrimitive from '@radix-ui/react-dialog'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\n\n// ─── Default Close Icon (built-in, no external dependency) ──\nconst DefaultCloseIcon = ({ className }: { className?: string }) => (\n <svg\n className={className}\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke=\"currentColor\"\n strokeWidth={2}\n aria-hidden=\"true\"\n >\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M6 18L18 6M6 6l12 12\" />\n </svg>\n)\n\n// ─── Types ──────────────────────────────────────────────────\nexport type DrawerSide = 'left' | 'right' | 'top' | 'bottom'\nexport type DrawerSize = 'sm' | 'md' | 'lg' | 'xl' | 'full'\n\n// ─── Animation class mapping (static strings for Tailwind scanner) ──\nconst ANIMATION_CLASSES: Record<DrawerSide, string> = {\n right: 'data-[state=open]:animate-drawer-right-enter data-[state=closed]:animate-drawer-right-exit',\n left: 'data-[state=open]:animate-drawer-left-enter data-[state=closed]:animate-drawer-left-exit',\n top: 'data-[state=open]:animate-drawer-top-enter data-[state=closed]:animate-drawer-top-exit',\n bottom: 'data-[state=open]:animate-drawer-bottom-enter data-[state=closed]:animate-drawer-bottom-exit',\n}\n\n// ─── Size variants ──────────────────────────────────────────\nconst drawerSizeHorizontal = cva('', {\n variants: {\n size: {\n sm: 'w-[320px]',\n md: 'w-[400px]',\n lg: 'w-[480px]',\n xl: 'w-[640px]',\n full: 'w-full',\n },\n },\n defaultVariants: { size: 'md' },\n})\n\nconst drawerSizeVertical = cva('', {\n variants: {\n size: {\n sm: 'h-[320px]',\n md: 'h-[400px]',\n lg: 'h-[480px]',\n xl: 'h-[640px]',\n full: 'h-full',\n },\n },\n defaultVariants: { size: 'md' },\n})\n\n// ═══════════════════════════════════════════════════════════════\n// Drawer\n// ═══════════════════════════════════════════════════════════════\n\n// ─── Drawer (Root) — wrapper to keep our own component identity separate from DialogPrimitive.Root ──\nfunction Drawer(props: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Root>) {\n return <DialogPrimitive.Root {...props} />\n}\n\n// ─── DrawerTrigger ──────────────────────────────────────────\nconst DrawerTrigger = DialogPrimitive.Trigger\n\n// ─── DrawerPortal ───────────────────────────────────────────\nconst DrawerPortal = DialogPrimitive.Portal\n\n// ─── DrawerClose ────────────────────────────────────────────\nconst DrawerClose = DialogPrimitive.Close\n\n// ─── DrawerOverlay ──────────────────────────────────────────\nconst DrawerOverlay = React.forwardRef<\n React.ElementRef<typeof DialogPrimitive.Overlay>,\n React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n <DialogPrimitive.Overlay\n ref={ref}\n className={cn(\n 'fixed inset-0 z-overlay bg-black/50',\n 'data-[state=open]:animate-modal-overlay-enter data-[state=closed]:animate-modal-overlay-exit',\n className\n )}\n {...props}\n />\n))\nDrawerOverlay.displayName = 'DrawerOverlay'\n\n// ─── DrawerContent ──────────────────────────────────────────\nexport interface DrawerContentProps\n extends Omit<React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>, 'children'> {\n /** Side from which the drawer slides in */\n side?: DrawerSide\n /** Panel size (width for left/right, height for top/bottom) */\n size?: DrawerSize\n /** Show built-in close button */\n showCloseButton?: boolean\n /** Custom close icon (replaces default X) */\n closeIcon?: React.ReactNode\n children?: React.ReactNode\n}\n\nconst SIDE_POSITION: Record<DrawerSide, string> = {\n right: 'inset-y-0 right-0',\n left: 'inset-y-0 left-0',\n top: 'inset-x-0 top-0',\n bottom: 'inset-x-0 bottom-0',\n}\n\nconst DrawerContent = React.forwardRef<\n React.ElementRef<typeof DialogPrimitive.Content>,\n DrawerContentProps\n>(({ className, children, side = 'right', size = 'md', showCloseButton = true, closeIcon, ...props }, ref) => {\n const isHorizontal = side === 'left' || side === 'right'\n const sizeClass = isHorizontal\n ? drawerSizeHorizontal({ size })\n : drawerSizeVertical({ size })\n\n return (\n <DrawerPortal>\n <DrawerOverlay />\n <DialogPrimitive.Content\n ref={ref}\n className={cn(\n 'fixed z-modal flex flex-col bg-background text-foreground shadow-xl',\n 'focus:outline-none',\n SIDE_POSITION[side],\n isHorizontal ? 'max-w-full h-full' : 'max-h-full w-full',\n sizeClass,\n ANIMATION_CLASSES[side],\n className,\n )}\n {...props}\n >\n {children}\n {showCloseButton && (\n <DialogPrimitive.Close className={cn(\n 'absolute right-4 top-4 rounded-md p-1',\n 'text-text-muted hover:text-foreground',\n 'transition-colors duration-fast',\n 'focus-visible:focus-ring focus-visible:outline-none',\n 'disabled:pointer-events-none'\n )}>\n {closeIcon || <DefaultCloseIcon className=\"icon-sm\" />}\n <span className=\"sr-only\">Close</span>\n </DialogPrimitive.Close>\n )}\n </DialogPrimitive.Content>\n </DrawerPortal>\n )\n})\nDrawerContent.displayName = 'DrawerContent'\n\n// ─── DrawerHeader ───────────────────────────────────────────\nconst DrawerHeader = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n <div\n ref={ref}\n className={cn('flex flex-col gap-1.5 p-6 pb-0', className)}\n {...props}\n />\n))\nDrawerHeader.displayName = 'DrawerHeader'\n\n// ─── DrawerTitle ────────────────────────────────────────────\nconst DrawerTitle = React.forwardRef<\n React.ElementRef<typeof DialogPrimitive.Title>,\n React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n <DialogPrimitive.Title\n ref={ref}\n className={cn('text-lg font-semibold text-foreground', className)}\n {...props}\n />\n))\nDrawerTitle.displayName = 'DrawerTitle'\n\n// ─── DrawerDescription ─────────────────────────────────────\nconst DrawerDescription = React.forwardRef<\n React.ElementRef<typeof DialogPrimitive.Description>,\n React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n <DialogPrimitive.Description\n ref={ref}\n className={cn('text-md text-text-muted', className)}\n {...props}\n />\n))\nDrawerDescription.displayName = 'DrawerDescription'\n\n// ─── DrawerBody ─────────────────────────────────────────────\nconst DrawerBody = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n <div\n ref={ref}\n className={cn('flex-1 overflow-y-auto p-6', className)}\n {...props}\n />\n))\nDrawerBody.displayName = 'DrawerBody'\n\n// ─── DrawerFooter ───────────────────────────────────────────\nconst DrawerFooter = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n <div\n ref={ref}\n className={cn(\n 'flex items-center justify-end gap-3 p-6 pt-0',\n className\n )}\n {...props}\n />\n))\nDrawerFooter.displayName = 'DrawerFooter'\n\n// ─── Exports ────────────────────────────────────────────────\nexport {\n Drawer,\n DrawerTrigger,\n DrawerPortal,\n DrawerOverlay,\n DrawerContent,\n DrawerHeader,\n DrawerTitle,\n DrawerDescription,\n DrawerBody,\n DrawerFooter,\n DrawerClose,\n drawerSizeHorizontal,\n drawerSizeVertical,\n}\n"],"mappings":"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","names":[]}
|
|
1
|
+
{"version":3,"sources":["../../../src/components/ui/drawer.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport * as DialogPrimitive from '@radix-ui/react-dialog'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\n\n// ─── Default Close Icon (built-in, no external dependency) ──\nconst DefaultCloseIcon = ({ className }: { className?: string }) => (\n <svg\n className={className}\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke=\"currentColor\"\n strokeWidth={2}\n aria-hidden=\"true\"\n >\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M6 18L18 6M6 6l12 12\" />\n </svg>\n)\n\n// ─── Types ──────────────────────────────────────────────────\nexport type DrawerSide = 'left' | 'right' | 'top' | 'bottom'\nexport type DrawerSize = 'sm' | 'md' | 'lg' | 'xl' | 'full'\n\n// ─── Animation class mapping (static strings for Tailwind scanner) ──\nconst ANIMATION_CLASSES: Record<DrawerSide, string> = {\n right: 'data-[state=open]:animate-drawer-right-enter data-[state=closed]:animate-drawer-right-exit',\n left: 'data-[state=open]:animate-drawer-left-enter data-[state=closed]:animate-drawer-left-exit',\n top: 'data-[state=open]:animate-drawer-top-enter data-[state=closed]:animate-drawer-top-exit',\n bottom: 'data-[state=open]:animate-drawer-bottom-enter data-[state=closed]:animate-drawer-bottom-exit',\n}\n\n// ─── Size variants ──────────────────────────────────────────\nconst drawerSizeHorizontal = cva('', {\n variants: {\n size: {\n sm: 'w-[320px]',\n md: 'w-[400px]',\n lg: 'w-[480px]',\n xl: 'w-[640px]',\n full: 'w-full',\n },\n },\n defaultVariants: { size: 'md' },\n})\n\nconst drawerSizeVertical = cva('', {\n variants: {\n size: {\n sm: 'h-[320px]',\n md: 'h-[400px]',\n lg: 'h-[480px]',\n xl: 'h-[640px]',\n full: 'h-full',\n },\n },\n defaultVariants: { size: 'md' },\n})\n\n// ═══════════════════════════════════════════════════════════════\n// Drawer\n// ═══════════════════════════════════════════════════════════════\n\n// ─── Drawer (Root) — wrapper to keep our own component identity separate from DialogPrimitive.Root ──\nfunction Drawer(props: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Root>) {\n return <DialogPrimitive.Root {...props} />\n}\n\n// ─── DrawerTrigger ──────────────────────────────────────────\nconst DrawerTrigger = DialogPrimitive.Trigger\n\n// ─── DrawerPortal ───────────────────────────────────────────\nconst DrawerPortal = DialogPrimitive.Portal\n\n// ─── DrawerClose ────────────────────────────────────────────\nconst DrawerClose = DialogPrimitive.Close\n\n// ─── DrawerOverlay ──────────────────────────────────────────\nconst DrawerOverlay = React.forwardRef<\n React.ElementRef<typeof DialogPrimitive.Overlay>,\n React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n <DialogPrimitive.Overlay\n ref={ref}\n className={cn(\n 'fixed inset-0 z-overlay bg-black/50',\n 'data-[state=open]:animate-modal-overlay-enter data-[state=closed]:animate-modal-overlay-exit',\n className\n )}\n {...props}\n />\n))\nDrawerOverlay.displayName = 'DrawerOverlay'\n\n// ─── DrawerContent ──────────────────────────────────────────\nexport interface DrawerContentProps\n extends Omit<React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>, 'children'> {\n /** Side from which the drawer slides in */\n side?: DrawerSide\n /** Panel size (width for left/right, height for top/bottom) */\n size?: DrawerSize\n /** Show built-in close button */\n showCloseButton?: boolean\n /** Custom close icon (replaces default X) */\n closeIcon?: React.ReactNode\n children?: React.ReactNode\n}\n\nconst SIDE_POSITION: Record<DrawerSide, string> = {\n right: 'inset-y-0 right-0',\n left: 'inset-y-0 left-0',\n top: 'inset-x-0 top-0',\n bottom: 'inset-x-0 bottom-0',\n}\n\nconst DrawerContent = React.forwardRef<\n React.ElementRef<typeof DialogPrimitive.Content>,\n DrawerContentProps\n>(({ className, children, side = 'right', size = 'md', showCloseButton = true, closeIcon, ...props }, ref) => {\n const isHorizontal = side === 'left' || side === 'right'\n const sizeClass = isHorizontal\n ? drawerSizeHorizontal({ size })\n : drawerSizeVertical({ size })\n\n return (\n <DrawerPortal>\n <DrawerOverlay />\n <DialogPrimitive.Content\n ref={ref}\n className={cn(\n 'fixed z-modal flex flex-col bg-background text-foreground shadow-xl',\n 'focus:outline-none',\n SIDE_POSITION[side],\n isHorizontal ? 'max-w-full h-full' : 'max-h-full w-full',\n sizeClass,\n ANIMATION_CLASSES[side],\n className,\n )}\n {...props}\n >\n {children}\n {showCloseButton && (\n <DialogPrimitive.Close className={cn(\n 'absolute right-4 top-4 rounded-md p-1',\n 'text-text-muted hover:text-foreground',\n 'transition-colors duration-fast',\n 'focus-visible:focus-ring focus-visible:outline-none',\n 'disabled:pointer-events-none'\n )}>\n {closeIcon || <DefaultCloseIcon className=\"icon-sm\" />}\n <span className=\"sr-only\">Close</span>\n </DialogPrimitive.Close>\n )}\n </DialogPrimitive.Content>\n </DrawerPortal>\n )\n})\nDrawerContent.displayName = 'DrawerContent'\n\n// ─── DrawerHeader ───────────────────────────────────────────\nconst DrawerHeader = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n <div\n ref={ref}\n className={cn('flex flex-col gap-1.5 p-6 pb-0', className)}\n {...props}\n />\n))\nDrawerHeader.displayName = 'DrawerHeader'\n\n// ─── DrawerTitle ────────────────────────────────────────────\nconst DrawerTitle = React.forwardRef<\n React.ElementRef<typeof DialogPrimitive.Title>,\n React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n <DialogPrimitive.Title\n ref={ref}\n className={cn('text-lg font-semibold text-foreground', className)}\n {...props}\n />\n))\nDrawerTitle.displayName = 'DrawerTitle'\n\n// ─── DrawerDescription ─────────────────────────────────────\nconst DrawerDescription = React.forwardRef<\n React.ElementRef<typeof DialogPrimitive.Description>,\n React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n <DialogPrimitive.Description\n ref={ref}\n className={cn('text-md text-text-muted', className)}\n {...props}\n />\n))\nDrawerDescription.displayName = 'DrawerDescription'\n\n// ─── DrawerBody ─────────────────────────────────────────────\nconst DrawerBody = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n <div\n ref={ref}\n className={cn('flex-1 overflow-y-auto p-6', className)}\n {...props}\n />\n))\nDrawerBody.displayName = 'DrawerBody'\n\n// ─── DrawerFooter ───────────────────────────────────────────\nconst DrawerFooter = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n <div\n ref={ref}\n className={cn(\n 'flex items-center justify-end gap-3 p-6 pt-0',\n className\n )}\n {...props}\n />\n))\nDrawerFooter.displayName = 'DrawerFooter'\n\n// ─── Exports ────────────────────────────────────────────────\nexport {\n Drawer,\n DrawerTrigger,\n DrawerPortal,\n DrawerOverlay,\n DrawerContent,\n DrawerHeader,\n DrawerTitle,\n DrawerDescription,\n DrawerBody,\n DrawerFooter,\n DrawerClose,\n drawerSizeHorizontal,\n drawerSizeVertical,\n}\n"],"mappings":"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","names":[]}
|