@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
|
@@ -33,6 +33,7 @@ __export(badge_exports, {
|
|
|
33
33
|
badgeVariants: () => badgeVariants
|
|
34
34
|
});
|
|
35
35
|
module.exports = __toCommonJS(badge_exports);
|
|
36
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
36
37
|
var React = __toESM(require("react"));
|
|
37
38
|
var import_react_slot = require("@radix-ui/react-slot");
|
|
38
39
|
var import_class_variance_authority = require("class-variance-authority");
|
|
@@ -141,7 +142,7 @@ const Badge = React.forwardRef(
|
|
|
141
142
|
const colorClasses = colorMap[color][variant];
|
|
142
143
|
const outlineClasses = variant === "outline" ? "border bg-transparent" : "";
|
|
143
144
|
const dotColor = variant === "solid" ? "bg-current" : dotColorMap[color];
|
|
144
|
-
return /* @__PURE__ */
|
|
145
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
145
146
|
Comp,
|
|
146
147
|
{
|
|
147
148
|
ref,
|
|
@@ -151,48 +152,50 @@ const Badge = React.forwardRef(
|
|
|
151
152
|
outlineClasses,
|
|
152
153
|
className
|
|
153
154
|
),
|
|
154
|
-
...props
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
155
|
+
...props,
|
|
156
|
+
children: [
|
|
157
|
+
dot && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
158
|
+
"span",
|
|
159
|
+
{
|
|
160
|
+
className: (0, import_utils.cn)("shrink-0 rounded-full", badgeDotSizes[resolvedSize], dotColor),
|
|
161
|
+
"aria-hidden": "true"
|
|
162
|
+
}
|
|
163
|
+
),
|
|
164
|
+
icon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
165
|
+
"span",
|
|
166
|
+
{
|
|
167
|
+
className: (0, import_utils.cn)("shrink-0 [&>svg]:w-full [&>svg]:h-full", badgeIconSizes[resolvedSize]),
|
|
168
|
+
"aria-hidden": "true",
|
|
169
|
+
children: icon
|
|
170
|
+
}
|
|
171
|
+
),
|
|
172
|
+
children,
|
|
173
|
+
removable && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
174
|
+
"button",
|
|
175
|
+
{
|
|
176
|
+
type: "button",
|
|
177
|
+
className: "shrink-0 -mr-0.5 ml-0.5 rounded-full p-0.5 opacity-70 hover:opacity-100 transition-opacity focus-visible:focus-ring",
|
|
178
|
+
onClick: (e) => {
|
|
179
|
+
e.stopPropagation();
|
|
180
|
+
onRemove?.();
|
|
181
|
+
},
|
|
182
|
+
"aria-label": "Remove",
|
|
183
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
184
|
+
"svg",
|
|
185
|
+
{
|
|
186
|
+
className: "w-3 h-3",
|
|
187
|
+
fill: "none",
|
|
188
|
+
viewBox: "0 0 24 24",
|
|
189
|
+
stroke: "currentColor",
|
|
190
|
+
strokeWidth: 2,
|
|
191
|
+
"aria-hidden": "true",
|
|
192
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" })
|
|
193
|
+
}
|
|
194
|
+
)
|
|
195
|
+
}
|
|
196
|
+
)
|
|
197
|
+
]
|
|
198
|
+
}
|
|
196
199
|
);
|
|
197
200
|
}
|
|
198
201
|
);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/ui/badge.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { Slot } from '@radix-ui/react-slot'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\n\n// Badge color maps for variant × color combinations\n// Uses semantic tokens (*.tint, text-text-*) for v4 dark mode compatibility\nconst colorMap = {\n default: {\n solid: 'bg-foreground text-background',\n subtle: 'bg-background-muted text-foreground',\n outline: 'border-border text-foreground',\n },\n primary: {\n solid: 'bg-primary text-primary-foreground',\n subtle: 'bg-primary-tint text-text-primary',\n outline: 'border-primary text-text-primary',\n },\n success: {\n solid: 'bg-success text-success-foreground',\n subtle: 'bg-success-tint text-text-success',\n outline: 'border-success text-text-success',\n },\n warning: {\n solid: 'bg-warning text-warning-foreground',\n subtle: 'bg-warning-tint text-text-warning',\n outline: 'border-warning text-text-warning',\n },\n error: {\n solid: 'bg-error text-error-foreground',\n subtle: 'bg-error-tint text-text-error',\n outline: 'border-error text-text-error',\n },\n info: {\n solid: 'bg-info text-info-foreground',\n subtle: 'bg-info-tint text-text-info',\n outline: 'border-info text-text-info',\n },\n} as const\n\nconst badgeVariants = cva(\n 'inline-flex items-center justify-center whitespace-nowrap font-semibold transition-colors select-none',\n {\n variants: {\n size: {\n sm: 'h-5 min-w-5 px-1.5 text-2xs gap-1', // 20px height, 6px paddingX, 11px font\n default: 'h-6 min-w-6 px-2 text-xs gap-1', // 24px height, 8px paddingX, 12px font\n lg: 'h-7 min-w-7 px-2.5 text-sm gap-1.5', // 28px height, 10px paddingX, 13px font\n },\n radius: {\n sm: 'rounded-sm', // 2px\n base: 'rounded', // 4px\n md: 'rounded-md', // 6px\n lg: 'rounded-lg', // 8px\n full: 'rounded-full', // 9999px\n },\n },\n defaultVariants: {\n size: 'default',\n radius: 'full',\n },\n }\n)\n\n// Icon sizes per badge size\nconst badgeIconSizes = {\n sm: 'icon-2xs', // 12px\n default: 'icon-2xs', // 12px\n lg: 'icon-xs', // 14px\n} as const\n\n// Dot sizes per badge size\nconst badgeDotSizes = {\n sm: 'w-1 h-1',\n default: 'w-1.5 h-1.5',\n lg: 'w-1.5 h-1.5',\n} as const\n\n// Dot colors per color (matches the solid background)\nconst dotColorMap = {\n default: 'bg-foreground',\n primary: 'bg-primary',\n success: 'bg-success',\n warning: 'bg-warning',\n error: 'bg-error',\n info: 'bg-info',\n} as const\n\nexport type BadgeVariant = 'solid' | 'subtle' | 'outline'\nexport type BadgeColor = 'default' | 'primary' | 'success' | 'warning' | 'error' | 'info'\nexport type BadgeSize = 'sm' | 'default' | 'lg'\nexport type BadgeRadius = 'sm' | 'base' | 'md' | 'lg' | 'full'\n\nexport interface BadgeProps\n extends React.HTMLAttributes<HTMLSpanElement>,\n VariantProps<typeof badgeVariants> {\n /** Visual style */\n variant?: BadgeVariant\n /** Semantic color */\n color?: BadgeColor\n /** Leading icon slot */\n icon?: React.ReactNode\n /** Show a status dot before text */\n dot?: boolean\n /** Show a remove button */\n removable?: boolean\n /** Callback when remove button is clicked */\n onRemove?: () => void\n /** Render as child element (Slot pattern) */\n asChild?: boolean\n}\n\nconst Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(\n ({\n className,\n variant = 'subtle',\n color = 'default',\n size,\n radius,\n icon,\n dot = false,\n removable = false,\n onRemove,\n asChild = false,\n children,\n ...props\n }, ref) => {\n const Comp = asChild ? Slot : 'span'\n const resolvedSize = size || 'default'\n\n // Color classes from variant × color map\n const colorClasses = colorMap[color][variant]\n // Outline variant needs border\n const outlineClasses = variant === 'outline' ? 'border bg-transparent' : ''\n\n // Dot color: in solid variant use currentColor (white/foreground), otherwise use semantic color\n const dotColor = variant === 'solid' ? 'bg-current' : dotColorMap[color]\n\n return (\n <Comp\n ref={ref}\n className={cn(\n badgeVariants({ size, radius }),\n colorClasses,\n outlineClasses,\n className\n )}\n {...props}\n >\n {dot && (\n <span\n className={cn('shrink-0 rounded-full', badgeDotSizes[resolvedSize], dotColor)}\n aria-hidden=\"true\"\n />\n )}\n {icon && (\n <span\n className={cn('shrink-0 [&>svg]:w-full [&>svg]:h-full', badgeIconSizes[resolvedSize])}\n aria-hidden=\"true\"\n >\n {icon}\n </span>\n )}\n {children}\n {removable && (\n <button\n type=\"button\"\n className=\"shrink-0 -mr-0.5 ml-0.5 rounded-full p-0.5 opacity-70 hover:opacity-100 transition-opacity focus-visible:focus-ring\"\n onClick={(e) => {\n e.stopPropagation()\n onRemove?.()\n }}\n aria-label=\"Remove\"\n >\n <svg\n className=\"w-3 h-3\"\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 </button>\n )}\n </Comp>\n )\n }\n)\nBadge.displayName = 'Badge'\n\nexport { Badge, badgeVariants }\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
1
|
+
{"version":3,"sources":["../../../src/components/ui/badge.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { Slot } from '@radix-ui/react-slot'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\n\n// Badge color maps for variant × color combinations\n// Uses semantic tokens (*.tint, text-text-*) for v4 dark mode compatibility\nconst colorMap = {\n default: {\n solid: 'bg-foreground text-background',\n subtle: 'bg-background-muted text-foreground',\n outline: 'border-border text-foreground',\n },\n primary: {\n solid: 'bg-primary text-primary-foreground',\n subtle: 'bg-primary-tint text-text-primary',\n outline: 'border-primary text-text-primary',\n },\n success: {\n solid: 'bg-success text-success-foreground',\n subtle: 'bg-success-tint text-text-success',\n outline: 'border-success text-text-success',\n },\n warning: {\n solid: 'bg-warning text-warning-foreground',\n subtle: 'bg-warning-tint text-text-warning',\n outline: 'border-warning text-text-warning',\n },\n error: {\n solid: 'bg-error text-error-foreground',\n subtle: 'bg-error-tint text-text-error',\n outline: 'border-error text-text-error',\n },\n info: {\n solid: 'bg-info text-info-foreground',\n subtle: 'bg-info-tint text-text-info',\n outline: 'border-info text-text-info',\n },\n} as const\n\nconst badgeVariants = cva(\n 'inline-flex items-center justify-center whitespace-nowrap font-semibold transition-colors select-none',\n {\n variants: {\n size: {\n sm: 'h-5 min-w-5 px-1.5 text-2xs gap-1', // 20px height, 6px paddingX, 11px font\n default: 'h-6 min-w-6 px-2 text-xs gap-1', // 24px height, 8px paddingX, 12px font\n lg: 'h-7 min-w-7 px-2.5 text-sm gap-1.5', // 28px height, 10px paddingX, 13px font\n },\n radius: {\n sm: 'rounded-sm', // 2px\n base: 'rounded', // 4px\n md: 'rounded-md', // 6px\n lg: 'rounded-lg', // 8px\n full: 'rounded-full', // 9999px\n },\n },\n defaultVariants: {\n size: 'default',\n radius: 'full',\n },\n }\n)\n\n// Icon sizes per badge size\nconst badgeIconSizes = {\n sm: 'icon-2xs', // 12px\n default: 'icon-2xs', // 12px\n lg: 'icon-xs', // 14px\n} as const\n\n// Dot sizes per badge size\nconst badgeDotSizes = {\n sm: 'w-1 h-1',\n default: 'w-1.5 h-1.5',\n lg: 'w-1.5 h-1.5',\n} as const\n\n// Dot colors per color (matches the solid background)\nconst dotColorMap = {\n default: 'bg-foreground',\n primary: 'bg-primary',\n success: 'bg-success',\n warning: 'bg-warning',\n error: 'bg-error',\n info: 'bg-info',\n} as const\n\nexport type BadgeVariant = 'solid' | 'subtle' | 'outline'\nexport type BadgeColor = 'default' | 'primary' | 'success' | 'warning' | 'error' | 'info'\nexport type BadgeSize = 'sm' | 'default' | 'lg'\nexport type BadgeRadius = 'sm' | 'base' | 'md' | 'lg' | 'full'\n\nexport interface BadgeProps\n extends React.HTMLAttributes<HTMLSpanElement>,\n VariantProps<typeof badgeVariants> {\n /** Visual style */\n variant?: BadgeVariant\n /** Semantic color */\n color?: BadgeColor\n /** Leading icon slot */\n icon?: React.ReactNode\n /** Show a status dot before text */\n dot?: boolean\n /** Show a remove button */\n removable?: boolean\n /** Callback when remove button is clicked */\n onRemove?: () => void\n /** Render as child element (Slot pattern) */\n asChild?: boolean\n}\n\nconst Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(\n ({\n className,\n variant = 'subtle',\n color = 'default',\n size,\n radius,\n icon,\n dot = false,\n removable = false,\n onRemove,\n asChild = false,\n children,\n ...props\n }, ref) => {\n const Comp = asChild ? Slot : 'span'\n const resolvedSize = size || 'default'\n\n // Color classes from variant × color map\n const colorClasses = colorMap[color][variant]\n // Outline variant needs border\n const outlineClasses = variant === 'outline' ? 'border bg-transparent' : ''\n\n // Dot color: in solid variant use currentColor (white/foreground), otherwise use semantic color\n const dotColor = variant === 'solid' ? 'bg-current' : dotColorMap[color]\n\n return (\n <Comp\n ref={ref}\n className={cn(\n badgeVariants({ size, radius }),\n colorClasses,\n outlineClasses,\n className\n )}\n {...props}\n >\n {dot && (\n <span\n className={cn('shrink-0 rounded-full', badgeDotSizes[resolvedSize], dotColor)}\n aria-hidden=\"true\"\n />\n )}\n {icon && (\n <span\n className={cn('shrink-0 [&>svg]:w-full [&>svg]:h-full', badgeIconSizes[resolvedSize])}\n aria-hidden=\"true\"\n >\n {icon}\n </span>\n )}\n {children}\n {removable && (\n <button\n type=\"button\"\n className=\"shrink-0 -mr-0.5 ml-0.5 rounded-full p-0.5 opacity-70 hover:opacity-100 transition-opacity focus-visible:focus-ring\"\n onClick={(e) => {\n e.stopPropagation()\n onRemove?.()\n }}\n aria-label=\"Remove\"\n >\n <svg\n className=\"w-3 h-3\"\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 </button>\n )}\n </Comp>\n )\n }\n)\nBadge.displayName = 'Badge'\n\nexport { Badge, badgeVariants }\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA6IM;AA3IN,YAAuB;AACvB,wBAAqB;AACrB,sCAAuC;AACvC,mBAAmB;AAInB,MAAM,WAAW;AAAA,EACf,SAAS;AAAA,IACP,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,SAAS;AAAA,IACP,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,SAAS;AAAA,IACP,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,SAAS;AAAA,IACP,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,OAAO;AAAA,IACL,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AACF;AAEA,MAAM,oBAAgB;AAAA,EACpB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,MAAM;AAAA,QACJ,IAAI;AAAA;AAAA,QACJ,SAAS;AAAA;AAAA,QACT,IAAI;AAAA;AAAA,MACN;AAAA,MACA,QAAQ;AAAA,QACN,IAAI;AAAA;AAAA,QACJ,MAAM;AAAA;AAAA,QACN,IAAI;AAAA;AAAA,QACJ,IAAI;AAAA;AAAA,QACJ,MAAM;AAAA;AAAA,MACR;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,MAAM;AAAA,MACN,QAAQ;AAAA,IACV;AAAA,EACF;AACF;AAGA,MAAM,iBAAiB;AAAA,EACrB,IAAI;AAAA;AAAA,EACJ,SAAS;AAAA;AAAA,EACT,IAAI;AAAA;AACN;AAGA,MAAM,gBAAgB;AAAA,EACpB,IAAI;AAAA,EACJ,SAAS;AAAA,EACT,IAAI;AACN;AAGA,MAAM,cAAc;AAAA,EAClB,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AAAA,EACT,OAAO;AAAA,EACP,MAAM;AACR;AA0BA,MAAM,QAAQ,MAAM;AAAA,EAClB,CAAC;AAAA,IACC;AAAA,IACA,UAAU;AAAA,IACV,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA,MAAM;AAAA,IACN,YAAY;AAAA,IACZ;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA,GAAG;AAAA,EACL,GAAG,QAAQ;AACT,UAAM,OAAO,UAAU,yBAAO;AAC9B,UAAM,eAAe,QAAQ;AAG7B,UAAM,eAAe,SAAS,KAAK,EAAE,OAAO;AAE5C,UAAM,iBAAiB,YAAY,YAAY,0BAA0B;AAGzE,UAAM,WAAW,YAAY,UAAU,eAAe,YAAY,KAAK;AAEvE,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,eAAW;AAAA,UACT,cAAc,EAAE,MAAM,OAAO,CAAC;AAAA,UAC9B;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,QACC,GAAG;AAAA,QAEH;AAAA,iBACC;AAAA,YAAC;AAAA;AAAA,cACC,eAAW,iBAAG,yBAAyB,cAAc,YAAY,GAAG,QAAQ;AAAA,cAC5E,eAAY;AAAA;AAAA,UACd;AAAA,UAED,QACC;AAAA,YAAC;AAAA;AAAA,cACC,eAAW,iBAAG,0CAA0C,eAAe,YAAY,CAAC;AAAA,cACpF,eAAY;AAAA,cAEX;AAAA;AAAA,UACH;AAAA,UAED;AAAA,UACA,aACC;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,WAAU;AAAA,cACV,SAAS,CAAC,MAAM;AACd,kBAAE,gBAAgB;AAClB,2BAAW;AAAA,cACb;AAAA,cACA,cAAW;AAAA,cAEX;AAAA,gBAAC;AAAA;AAAA,kBACC,WAAU;AAAA,kBACV,MAAK;AAAA,kBACL,SAAQ;AAAA,kBACR,QAAO;AAAA,kBACP,aAAa;AAAA,kBACb,eAAY;AAAA,kBAEZ,sDAAC,UAAK,eAAc,SAAQ,gBAAe,SAAQ,GAAE,wBAAuB;AAAA;AAAA,cAC9E;AAAA;AAAA,UACF;AAAA;AAAA;AAAA,IAEJ;AAAA,EAEJ;AACF;AACA,MAAM,cAAc;","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 { Slot } from "@radix-ui/react-slot";
|
|
4
5
|
import { cva } from "class-variance-authority";
|
|
@@ -107,7 +108,7 @@ const Badge = React.forwardRef(
|
|
|
107
108
|
const colorClasses = colorMap[color][variant];
|
|
108
109
|
const outlineClasses = variant === "outline" ? "border bg-transparent" : "";
|
|
109
110
|
const dotColor = variant === "solid" ? "bg-current" : dotColorMap[color];
|
|
110
|
-
return /* @__PURE__ */
|
|
111
|
+
return /* @__PURE__ */ jsxs(
|
|
111
112
|
Comp,
|
|
112
113
|
{
|
|
113
114
|
ref,
|
|
@@ -117,48 +118,50 @@ const Badge = React.forwardRef(
|
|
|
117
118
|
outlineClasses,
|
|
118
119
|
className
|
|
119
120
|
),
|
|
120
|
-
...props
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
121
|
+
...props,
|
|
122
|
+
children: [
|
|
123
|
+
dot && /* @__PURE__ */ jsx(
|
|
124
|
+
"span",
|
|
125
|
+
{
|
|
126
|
+
className: cn("shrink-0 rounded-full", badgeDotSizes[resolvedSize], dotColor),
|
|
127
|
+
"aria-hidden": "true"
|
|
128
|
+
}
|
|
129
|
+
),
|
|
130
|
+
icon && /* @__PURE__ */ jsx(
|
|
131
|
+
"span",
|
|
132
|
+
{
|
|
133
|
+
className: cn("shrink-0 [&>svg]:w-full [&>svg]:h-full", badgeIconSizes[resolvedSize]),
|
|
134
|
+
"aria-hidden": "true",
|
|
135
|
+
children: icon
|
|
136
|
+
}
|
|
137
|
+
),
|
|
138
|
+
children,
|
|
139
|
+
removable && /* @__PURE__ */ jsx(
|
|
140
|
+
"button",
|
|
141
|
+
{
|
|
142
|
+
type: "button",
|
|
143
|
+
className: "shrink-0 -mr-0.5 ml-0.5 rounded-full p-0.5 opacity-70 hover:opacity-100 transition-opacity focus-visible:focus-ring",
|
|
144
|
+
onClick: (e) => {
|
|
145
|
+
e.stopPropagation();
|
|
146
|
+
onRemove?.();
|
|
147
|
+
},
|
|
148
|
+
"aria-label": "Remove",
|
|
149
|
+
children: /* @__PURE__ */ jsx(
|
|
150
|
+
"svg",
|
|
151
|
+
{
|
|
152
|
+
className: "w-3 h-3",
|
|
153
|
+
fill: "none",
|
|
154
|
+
viewBox: "0 0 24 24",
|
|
155
|
+
stroke: "currentColor",
|
|
156
|
+
strokeWidth: 2,
|
|
157
|
+
"aria-hidden": "true",
|
|
158
|
+
children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" })
|
|
159
|
+
}
|
|
160
|
+
)
|
|
161
|
+
}
|
|
162
|
+
)
|
|
163
|
+
]
|
|
164
|
+
}
|
|
162
165
|
);
|
|
163
166
|
}
|
|
164
167
|
);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/ui/badge.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { Slot } from '@radix-ui/react-slot'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\n\n// Badge color maps for variant × color combinations\n// Uses semantic tokens (*.tint, text-text-*) for v4 dark mode compatibility\nconst colorMap = {\n default: {\n solid: 'bg-foreground text-background',\n subtle: 'bg-background-muted text-foreground',\n outline: 'border-border text-foreground',\n },\n primary: {\n solid: 'bg-primary text-primary-foreground',\n subtle: 'bg-primary-tint text-text-primary',\n outline: 'border-primary text-text-primary',\n },\n success: {\n solid: 'bg-success text-success-foreground',\n subtle: 'bg-success-tint text-text-success',\n outline: 'border-success text-text-success',\n },\n warning: {\n solid: 'bg-warning text-warning-foreground',\n subtle: 'bg-warning-tint text-text-warning',\n outline: 'border-warning text-text-warning',\n },\n error: {\n solid: 'bg-error text-error-foreground',\n subtle: 'bg-error-tint text-text-error',\n outline: 'border-error text-text-error',\n },\n info: {\n solid: 'bg-info text-info-foreground',\n subtle: 'bg-info-tint text-text-info',\n outline: 'border-info text-text-info',\n },\n} as const\n\nconst badgeVariants = cva(\n 'inline-flex items-center justify-center whitespace-nowrap font-semibold transition-colors select-none',\n {\n variants: {\n size: {\n sm: 'h-5 min-w-5 px-1.5 text-2xs gap-1', // 20px height, 6px paddingX, 11px font\n default: 'h-6 min-w-6 px-2 text-xs gap-1', // 24px height, 8px paddingX, 12px font\n lg: 'h-7 min-w-7 px-2.5 text-sm gap-1.5', // 28px height, 10px paddingX, 13px font\n },\n radius: {\n sm: 'rounded-sm', // 2px\n base: 'rounded', // 4px\n md: 'rounded-md', // 6px\n lg: 'rounded-lg', // 8px\n full: 'rounded-full', // 9999px\n },\n },\n defaultVariants: {\n size: 'default',\n radius: 'full',\n },\n }\n)\n\n// Icon sizes per badge size\nconst badgeIconSizes = {\n sm: 'icon-2xs', // 12px\n default: 'icon-2xs', // 12px\n lg: 'icon-xs', // 14px\n} as const\n\n// Dot sizes per badge size\nconst badgeDotSizes = {\n sm: 'w-1 h-1',\n default: 'w-1.5 h-1.5',\n lg: 'w-1.5 h-1.5',\n} as const\n\n// Dot colors per color (matches the solid background)\nconst dotColorMap = {\n default: 'bg-foreground',\n primary: 'bg-primary',\n success: 'bg-success',\n warning: 'bg-warning',\n error: 'bg-error',\n info: 'bg-info',\n} as const\n\nexport type BadgeVariant = 'solid' | 'subtle' | 'outline'\nexport type BadgeColor = 'default' | 'primary' | 'success' | 'warning' | 'error' | 'info'\nexport type BadgeSize = 'sm' | 'default' | 'lg'\nexport type BadgeRadius = 'sm' | 'base' | 'md' | 'lg' | 'full'\n\nexport interface BadgeProps\n extends React.HTMLAttributes<HTMLSpanElement>,\n VariantProps<typeof badgeVariants> {\n /** Visual style */\n variant?: BadgeVariant\n /** Semantic color */\n color?: BadgeColor\n /** Leading icon slot */\n icon?: React.ReactNode\n /** Show a status dot before text */\n dot?: boolean\n /** Show a remove button */\n removable?: boolean\n /** Callback when remove button is clicked */\n onRemove?: () => void\n /** Render as child element (Slot pattern) */\n asChild?: boolean\n}\n\nconst Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(\n ({\n className,\n variant = 'subtle',\n color = 'default',\n size,\n radius,\n icon,\n dot = false,\n removable = false,\n onRemove,\n asChild = false,\n children,\n ...props\n }, ref) => {\n const Comp = asChild ? Slot : 'span'\n const resolvedSize = size || 'default'\n\n // Color classes from variant × color map\n const colorClasses = colorMap[color][variant]\n // Outline variant needs border\n const outlineClasses = variant === 'outline' ? 'border bg-transparent' : ''\n\n // Dot color: in solid variant use currentColor (white/foreground), otherwise use semantic color\n const dotColor = variant === 'solid' ? 'bg-current' : dotColorMap[color]\n\n return (\n <Comp\n ref={ref}\n className={cn(\n badgeVariants({ size, radius }),\n colorClasses,\n outlineClasses,\n className\n )}\n {...props}\n >\n {dot && (\n <span\n className={cn('shrink-0 rounded-full', badgeDotSizes[resolvedSize], dotColor)}\n aria-hidden=\"true\"\n />\n )}\n {icon && (\n <span\n className={cn('shrink-0 [&>svg]:w-full [&>svg]:h-full', badgeIconSizes[resolvedSize])}\n aria-hidden=\"true\"\n >\n {icon}\n </span>\n )}\n {children}\n {removable && (\n <button\n type=\"button\"\n className=\"shrink-0 -mr-0.5 ml-0.5 rounded-full p-0.5 opacity-70 hover:opacity-100 transition-opacity focus-visible:focus-ring\"\n onClick={(e) => {\n e.stopPropagation()\n onRemove?.()\n }}\n aria-label=\"Remove\"\n >\n <svg\n className=\"w-3 h-3\"\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 </button>\n )}\n </Comp>\n )\n }\n)\nBadge.displayName = 'Badge'\n\nexport { Badge, badgeVariants }\n"],"mappings":";
|
|
1
|
+
{"version":3,"sources":["../../../src/components/ui/badge.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { Slot } from '@radix-ui/react-slot'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\n\n// Badge color maps for variant × color combinations\n// Uses semantic tokens (*.tint, text-text-*) for v4 dark mode compatibility\nconst colorMap = {\n default: {\n solid: 'bg-foreground text-background',\n subtle: 'bg-background-muted text-foreground',\n outline: 'border-border text-foreground',\n },\n primary: {\n solid: 'bg-primary text-primary-foreground',\n subtle: 'bg-primary-tint text-text-primary',\n outline: 'border-primary text-text-primary',\n },\n success: {\n solid: 'bg-success text-success-foreground',\n subtle: 'bg-success-tint text-text-success',\n outline: 'border-success text-text-success',\n },\n warning: {\n solid: 'bg-warning text-warning-foreground',\n subtle: 'bg-warning-tint text-text-warning',\n outline: 'border-warning text-text-warning',\n },\n error: {\n solid: 'bg-error text-error-foreground',\n subtle: 'bg-error-tint text-text-error',\n outline: 'border-error text-text-error',\n },\n info: {\n solid: 'bg-info text-info-foreground',\n subtle: 'bg-info-tint text-text-info',\n outline: 'border-info text-text-info',\n },\n} as const\n\nconst badgeVariants = cva(\n 'inline-flex items-center justify-center whitespace-nowrap font-semibold transition-colors select-none',\n {\n variants: {\n size: {\n sm: 'h-5 min-w-5 px-1.5 text-2xs gap-1', // 20px height, 6px paddingX, 11px font\n default: 'h-6 min-w-6 px-2 text-xs gap-1', // 24px height, 8px paddingX, 12px font\n lg: 'h-7 min-w-7 px-2.5 text-sm gap-1.5', // 28px height, 10px paddingX, 13px font\n },\n radius: {\n sm: 'rounded-sm', // 2px\n base: 'rounded', // 4px\n md: 'rounded-md', // 6px\n lg: 'rounded-lg', // 8px\n full: 'rounded-full', // 9999px\n },\n },\n defaultVariants: {\n size: 'default',\n radius: 'full',\n },\n }\n)\n\n// Icon sizes per badge size\nconst badgeIconSizes = {\n sm: 'icon-2xs', // 12px\n default: 'icon-2xs', // 12px\n lg: 'icon-xs', // 14px\n} as const\n\n// Dot sizes per badge size\nconst badgeDotSizes = {\n sm: 'w-1 h-1',\n default: 'w-1.5 h-1.5',\n lg: 'w-1.5 h-1.5',\n} as const\n\n// Dot colors per color (matches the solid background)\nconst dotColorMap = {\n default: 'bg-foreground',\n primary: 'bg-primary',\n success: 'bg-success',\n warning: 'bg-warning',\n error: 'bg-error',\n info: 'bg-info',\n} as const\n\nexport type BadgeVariant = 'solid' | 'subtle' | 'outline'\nexport type BadgeColor = 'default' | 'primary' | 'success' | 'warning' | 'error' | 'info'\nexport type BadgeSize = 'sm' | 'default' | 'lg'\nexport type BadgeRadius = 'sm' | 'base' | 'md' | 'lg' | 'full'\n\nexport interface BadgeProps\n extends React.HTMLAttributes<HTMLSpanElement>,\n VariantProps<typeof badgeVariants> {\n /** Visual style */\n variant?: BadgeVariant\n /** Semantic color */\n color?: BadgeColor\n /** Leading icon slot */\n icon?: React.ReactNode\n /** Show a status dot before text */\n dot?: boolean\n /** Show a remove button */\n removable?: boolean\n /** Callback when remove button is clicked */\n onRemove?: () => void\n /** Render as child element (Slot pattern) */\n asChild?: boolean\n}\n\nconst Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(\n ({\n className,\n variant = 'subtle',\n color = 'default',\n size,\n radius,\n icon,\n dot = false,\n removable = false,\n onRemove,\n asChild = false,\n children,\n ...props\n }, ref) => {\n const Comp = asChild ? Slot : 'span'\n const resolvedSize = size || 'default'\n\n // Color classes from variant × color map\n const colorClasses = colorMap[color][variant]\n // Outline variant needs border\n const outlineClasses = variant === 'outline' ? 'border bg-transparent' : ''\n\n // Dot color: in solid variant use currentColor (white/foreground), otherwise use semantic color\n const dotColor = variant === 'solid' ? 'bg-current' : dotColorMap[color]\n\n return (\n <Comp\n ref={ref}\n className={cn(\n badgeVariants({ size, radius }),\n colorClasses,\n outlineClasses,\n className\n )}\n {...props}\n >\n {dot && (\n <span\n className={cn('shrink-0 rounded-full', badgeDotSizes[resolvedSize], dotColor)}\n aria-hidden=\"true\"\n />\n )}\n {icon && (\n <span\n className={cn('shrink-0 [&>svg]:w-full [&>svg]:h-full', badgeIconSizes[resolvedSize])}\n aria-hidden=\"true\"\n >\n {icon}\n </span>\n )}\n {children}\n {removable && (\n <button\n type=\"button\"\n className=\"shrink-0 -mr-0.5 ml-0.5 rounded-full p-0.5 opacity-70 hover:opacity-100 transition-opacity focus-visible:focus-ring\"\n onClick={(e) => {\n e.stopPropagation()\n onRemove?.()\n }}\n aria-label=\"Remove\"\n >\n <svg\n className=\"w-3 h-3\"\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 </button>\n )}\n </Comp>\n )\n }\n)\nBadge.displayName = 'Badge'\n\nexport { Badge, badgeVariants }\n"],"mappings":"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","names":[]}
|
|
@@ -39,35 +39,38 @@ __export(breadcrumb_exports, {
|
|
|
39
39
|
breadcrumbSizeMap: () => breadcrumbSizeMap
|
|
40
40
|
});
|
|
41
41
|
module.exports = __toCommonJS(breadcrumb_exports);
|
|
42
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
42
43
|
var React = __toESM(require("react"));
|
|
43
44
|
var import_react_slot = require("@radix-ui/react-slot");
|
|
44
45
|
var import_utils = require("../../lib/utils");
|
|
45
46
|
const BreadcrumbContext = React.createContext({});
|
|
46
47
|
const useBreadcrumbContext = () => React.useContext(BreadcrumbContext);
|
|
47
48
|
function ChevronRightIcon({ className }) {
|
|
48
|
-
return /* @__PURE__ */
|
|
49
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
49
50
|
"svg",
|
|
50
51
|
{
|
|
51
52
|
className,
|
|
52
53
|
fill: "none",
|
|
53
54
|
viewBox: "0 0 24 24",
|
|
54
55
|
stroke: "currentColor",
|
|
55
|
-
strokeWidth: 2
|
|
56
|
-
|
|
57
|
-
|
|
56
|
+
strokeWidth: 2,
|
|
57
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5l7 7-7 7" })
|
|
58
|
+
}
|
|
58
59
|
);
|
|
59
60
|
}
|
|
60
61
|
function EllipsisIcon({ className }) {
|
|
61
|
-
return /* @__PURE__ */
|
|
62
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
62
63
|
"svg",
|
|
63
64
|
{
|
|
64
65
|
className,
|
|
65
66
|
fill: "currentColor",
|
|
66
|
-
viewBox: "0 0 24 24"
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
67
|
+
viewBox: "0 0 24 24",
|
|
68
|
+
children: [
|
|
69
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "6", cy: "12", r: "1.5" }),
|
|
70
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "12", r: "1.5" }),
|
|
71
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "18", cy: "12", r: "1.5" })
|
|
72
|
+
]
|
|
73
|
+
}
|
|
71
74
|
);
|
|
72
75
|
}
|
|
73
76
|
const breadcrumbSizeMap = {
|
|
@@ -76,7 +79,7 @@ const breadcrumbSizeMap = {
|
|
|
76
79
|
lg: { text: "text-md", icon: "icon-sm", gap: "gap-2" }
|
|
77
80
|
};
|
|
78
81
|
const Breadcrumb = React.forwardRef(
|
|
79
|
-
({ className, separator, size = "default", ...props }, ref) => /* @__PURE__ */
|
|
82
|
+
({ className, separator, size = "default", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BreadcrumbContext.Provider, { value: { size, separator }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
80
83
|
"nav",
|
|
81
84
|
{
|
|
82
85
|
ref,
|
|
@@ -84,14 +87,14 @@ const Breadcrumb = React.forwardRef(
|
|
|
84
87
|
className: (0, import_utils.cn)("", className),
|
|
85
88
|
...props
|
|
86
89
|
}
|
|
87
|
-
))
|
|
90
|
+
) })
|
|
88
91
|
);
|
|
89
92
|
Breadcrumb.displayName = "Breadcrumb";
|
|
90
93
|
const BreadcrumbList = React.forwardRef(
|
|
91
94
|
({ className, ...props }, ref) => {
|
|
92
95
|
const { size = "default" } = useBreadcrumbContext();
|
|
93
96
|
const sizeClass = breadcrumbSizeMap[size];
|
|
94
|
-
return /* @__PURE__ */
|
|
97
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
95
98
|
"ol",
|
|
96
99
|
{
|
|
97
100
|
ref,
|
|
@@ -109,7 +112,7 @@ const BreadcrumbList = React.forwardRef(
|
|
|
109
112
|
);
|
|
110
113
|
BreadcrumbList.displayName = "BreadcrumbList";
|
|
111
114
|
const BreadcrumbItem = React.forwardRef(
|
|
112
|
-
({ className, ...props }, ref) => /* @__PURE__ */
|
|
115
|
+
({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
113
116
|
"li",
|
|
114
117
|
{
|
|
115
118
|
ref,
|
|
@@ -122,7 +125,7 @@ BreadcrumbItem.displayName = "BreadcrumbItem";
|
|
|
122
125
|
const BreadcrumbLink = React.forwardRef(
|
|
123
126
|
({ asChild, className, ...props }, ref) => {
|
|
124
127
|
const Comp = asChild ? import_react_slot.Slot : "a";
|
|
125
|
-
return /* @__PURE__ */
|
|
128
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
126
129
|
Comp,
|
|
127
130
|
{
|
|
128
131
|
ref,
|
|
@@ -137,7 +140,7 @@ const BreadcrumbLink = React.forwardRef(
|
|
|
137
140
|
);
|
|
138
141
|
BreadcrumbLink.displayName = "BreadcrumbLink";
|
|
139
142
|
const BreadcrumbPage = React.forwardRef(
|
|
140
|
-
({ className, ...props }, ref) => /* @__PURE__ */
|
|
143
|
+
({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
141
144
|
"span",
|
|
142
145
|
{
|
|
143
146
|
ref,
|
|
@@ -154,16 +157,16 @@ const BreadcrumbSeparator = React.forwardRef(
|
|
|
154
157
|
({ children, className, ...props }, ref) => {
|
|
155
158
|
const { separator, size = "default" } = useBreadcrumbContext();
|
|
156
159
|
const sizeClass = breadcrumbSizeMap[size];
|
|
157
|
-
return /* @__PURE__ */
|
|
160
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
158
161
|
"li",
|
|
159
162
|
{
|
|
160
163
|
ref,
|
|
161
164
|
role: "presentation",
|
|
162
165
|
"aria-hidden": "true",
|
|
163
166
|
className: (0, import_utils.cn)("flex items-center text-text-subtle", className),
|
|
164
|
-
...props
|
|
165
|
-
|
|
166
|
-
|
|
167
|
+
...props,
|
|
168
|
+
children: children ?? separator ?? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChevronRightIcon, { className: sizeClass.icon })
|
|
169
|
+
}
|
|
167
170
|
);
|
|
168
171
|
}
|
|
169
172
|
);
|
|
@@ -172,17 +175,19 @@ const BreadcrumbEllipsis = React.forwardRef(
|
|
|
172
175
|
({ className, ...props }, ref) => {
|
|
173
176
|
const { size = "default" } = useBreadcrumbContext();
|
|
174
177
|
const sizeClass = breadcrumbSizeMap[size];
|
|
175
|
-
return /* @__PURE__ */
|
|
178
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
176
179
|
"span",
|
|
177
180
|
{
|
|
178
181
|
ref,
|
|
179
182
|
role: "presentation",
|
|
180
183
|
"aria-hidden": "true",
|
|
181
184
|
className: (0, import_utils.cn)("flex items-center justify-center", className),
|
|
182
|
-
...props
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
185
|
+
...props,
|
|
186
|
+
children: [
|
|
187
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(EllipsisIcon, { className: sizeClass.icon }),
|
|
188
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "sr-only", children: "More" })
|
|
189
|
+
]
|
|
190
|
+
}
|
|
186
191
|
);
|
|
187
192
|
}
|
|
188
193
|
);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/ui/breadcrumb.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { Slot } from '@radix-ui/react-slot'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\n\n// ─── Context ──────────────────────────────────────────────\n\ntype BreadcrumbContextValue = {\n size?: 'sm' | 'default' | 'lg'\n separator?: React.ReactNode\n}\n\nconst BreadcrumbContext = React.createContext<BreadcrumbContextValue>({})\nconst useBreadcrumbContext = () => React.useContext(BreadcrumbContext)\n\n// ─── Default Separator Icon ───────────────────────────────\n\nfunction ChevronRightIcon({ className }: { className?: string }) {\n return (\n <svg\n className={className}\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke=\"currentColor\"\n strokeWidth={2}\n >\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M9 5l7 7-7 7\" />\n </svg>\n )\n}\n\n// ─── Ellipsis Icon ────────────────────────────────────────\n\nfunction EllipsisIcon({ className }: { className?: string }) {\n return (\n <svg\n className={className}\n fill=\"currentColor\"\n viewBox=\"0 0 24 24\"\n >\n <circle cx=\"6\" cy=\"12\" r=\"1.5\" />\n <circle cx=\"12\" cy=\"12\" r=\"1.5\" />\n <circle cx=\"18\" cy=\"12\" r=\"1.5\" />\n </svg>\n )\n}\n\n// ─── Breadcrumb (Root) ────────────────────────────────────\n\nconst breadcrumbSizeMap = {\n sm: { text: 'text-xs', icon: 'icon-xs', gap: 'gap-1.5' },\n default: { text: 'text-sm', icon: 'icon-xs', gap: 'gap-2' },\n lg: { text: 'text-md', icon: 'icon-sm', gap: 'gap-2' },\n} as const\n\nexport interface BreadcrumbProps extends React.ComponentPropsWithoutRef<'nav'> {\n /** Separator element between items */\n separator?: React.ReactNode\n /** Size of the breadcrumb */\n size?: 'sm' | 'default' | 'lg'\n /** Max items before collapsing (undefined = no collapse) */\n maxItems?: number\n /** Items visible before the ellipsis when collapsed */\n itemsBeforeCollapse?: number\n /** Items visible after the ellipsis when collapsed */\n itemsAfterCollapse?: number\n}\n\nconst Breadcrumb = React.forwardRef<HTMLElement, BreadcrumbProps>(\n ({ className, separator, size = 'default', ...props }, ref) => (\n <BreadcrumbContext.Provider value={{ size, separator }}>\n <nav\n ref={ref}\n aria-label=\"breadcrumb\"\n className={cn('', className)}\n {...props}\n />\n </BreadcrumbContext.Provider>\n )\n)\nBreadcrumb.displayName = 'Breadcrumb'\n\n// ─── BreadcrumbList ───────────────────────────────────────\n\nconst BreadcrumbList = React.forwardRef<HTMLOListElement, React.ComponentPropsWithoutRef<'ol'>>(\n ({ className, ...props }, ref) => {\n const { size = 'default' } = useBreadcrumbContext()\n const sizeClass = breadcrumbSizeMap[size]\n return (\n <ol\n ref={ref}\n className={cn(\n 'flex flex-wrap items-center',\n sizeClass.gap,\n sizeClass.text,\n 'text-text-muted',\n className\n )}\n {...props}\n />\n )\n }\n)\nBreadcrumbList.displayName = 'BreadcrumbList'\n\n// ─── BreadcrumbItem ───────────────────────────────────────\n\nconst BreadcrumbItem = React.forwardRef<HTMLLIElement, React.ComponentPropsWithoutRef<'li'>>(\n ({ className, ...props }, ref) => (\n <li\n ref={ref}\n className={cn('inline-flex items-center gap-1.5', className)}\n {...props}\n />\n )\n)\nBreadcrumbItem.displayName = 'BreadcrumbItem'\n\n// ─── BreadcrumbLink ───────────────────────────────────────\n\nexport interface BreadcrumbLinkProps extends React.ComponentPropsWithoutRef<'a'> {\n /** Use Radix Slot to compose with custom link components */\n asChild?: boolean\n}\n\nconst BreadcrumbLink = React.forwardRef<HTMLAnchorElement, BreadcrumbLinkProps>(\n ({ asChild, className, ...props }, ref) => {\n const Comp = asChild ? Slot : 'a'\n return (\n <Comp\n ref={ref}\n className={cn(\n 'transition-colors duration-fast hover:text-foreground',\n className\n )}\n {...props}\n />\n )\n }\n)\nBreadcrumbLink.displayName = 'BreadcrumbLink'\n\n// ─── BreadcrumbPage ───────────────────────────────────────\n\nconst BreadcrumbPage = React.forwardRef<HTMLSpanElement, React.ComponentPropsWithoutRef<'span'>>(\n ({ className, ...props }, ref) => (\n <span\n ref={ref}\n role=\"link\"\n aria-disabled=\"true\"\n aria-current=\"page\"\n className={cn('text-foreground', className)}\n {...props}\n />\n )\n)\nBreadcrumbPage.displayName = 'BreadcrumbPage'\n\n// ─── BreadcrumbSeparator ──────────────────────────────────\n\nconst BreadcrumbSeparator = React.forwardRef<HTMLLIElement, React.ComponentPropsWithoutRef<'li'>>(\n ({ children, className, ...props }, ref) => {\n const { separator, size = 'default' } = useBreadcrumbContext()\n const sizeClass = breadcrumbSizeMap[size]\n return (\n <li\n ref={ref}\n role=\"presentation\"\n aria-hidden=\"true\"\n className={cn('flex items-center text-text-subtle', className)}\n {...props}\n >\n {children ?? separator ?? <ChevronRightIcon className={sizeClass.icon} />}\n </li>\n )\n }\n)\nBreadcrumbSeparator.displayName = 'BreadcrumbSeparator'\n\n// ─── BreadcrumbEllipsis ───────────────────────────────────\n\nexport interface BreadcrumbEllipsisProps extends React.ComponentPropsWithoutRef<'span'> {}\n\nconst BreadcrumbEllipsis = React.forwardRef<HTMLSpanElement, BreadcrumbEllipsisProps>(\n ({ className, ...props }, ref) => {\n const { size = 'default' } = useBreadcrumbContext()\n const sizeClass = breadcrumbSizeMap[size]\n return (\n <span\n ref={ref}\n role=\"presentation\"\n aria-hidden=\"true\"\n className={cn('flex items-center justify-center', className)}\n {...props}\n >\n <EllipsisIcon className={sizeClass.icon} />\n <span className=\"sr-only\">More</span>\n </span>\n )\n }\n)\nBreadcrumbEllipsis.displayName = 'BreadcrumbEllipsis'\n\n// ─── Exports ──────────────────────────────────────────────\n\nexport {\n Breadcrumb,\n BreadcrumbList,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbPage,\n BreadcrumbSeparator,\n BreadcrumbEllipsis,\n breadcrumbSizeMap,\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
1
|
+
{"version":3,"sources":["../../../src/components/ui/breadcrumb.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { Slot } from '@radix-ui/react-slot'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\n\n// ─── Context ──────────────────────────────────────────────\n\ntype BreadcrumbContextValue = {\n size?: 'sm' | 'default' | 'lg'\n separator?: React.ReactNode\n}\n\nconst BreadcrumbContext = React.createContext<BreadcrumbContextValue>({})\nconst useBreadcrumbContext = () => React.useContext(BreadcrumbContext)\n\n// ─── Default Separator Icon ───────────────────────────────\n\nfunction ChevronRightIcon({ className }: { className?: string }) {\n return (\n <svg\n className={className}\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke=\"currentColor\"\n strokeWidth={2}\n >\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M9 5l7 7-7 7\" />\n </svg>\n )\n}\n\n// ─── Ellipsis Icon ────────────────────────────────────────\n\nfunction EllipsisIcon({ className }: { className?: string }) {\n return (\n <svg\n className={className}\n fill=\"currentColor\"\n viewBox=\"0 0 24 24\"\n >\n <circle cx=\"6\" cy=\"12\" r=\"1.5\" />\n <circle cx=\"12\" cy=\"12\" r=\"1.5\" />\n <circle cx=\"18\" cy=\"12\" r=\"1.5\" />\n </svg>\n )\n}\n\n// ─── Breadcrumb (Root) ────────────────────────────────────\n\nconst breadcrumbSizeMap = {\n sm: { text: 'text-xs', icon: 'icon-xs', gap: 'gap-1.5' },\n default: { text: 'text-sm', icon: 'icon-xs', gap: 'gap-2' },\n lg: { text: 'text-md', icon: 'icon-sm', gap: 'gap-2' },\n} as const\n\nexport interface BreadcrumbProps extends React.ComponentPropsWithoutRef<'nav'> {\n /** Separator element between items */\n separator?: React.ReactNode\n /** Size of the breadcrumb */\n size?: 'sm' | 'default' | 'lg'\n /** Max items before collapsing (undefined = no collapse) */\n maxItems?: number\n /** Items visible before the ellipsis when collapsed */\n itemsBeforeCollapse?: number\n /** Items visible after the ellipsis when collapsed */\n itemsAfterCollapse?: number\n}\n\nconst Breadcrumb = React.forwardRef<HTMLElement, BreadcrumbProps>(\n ({ className, separator, size = 'default', ...props }, ref) => (\n <BreadcrumbContext.Provider value={{ size, separator }}>\n <nav\n ref={ref}\n aria-label=\"breadcrumb\"\n className={cn('', className)}\n {...props}\n />\n </BreadcrumbContext.Provider>\n )\n)\nBreadcrumb.displayName = 'Breadcrumb'\n\n// ─── BreadcrumbList ───────────────────────────────────────\n\nconst BreadcrumbList = React.forwardRef<HTMLOListElement, React.ComponentPropsWithoutRef<'ol'>>(\n ({ className, ...props }, ref) => {\n const { size = 'default' } = useBreadcrumbContext()\n const sizeClass = breadcrumbSizeMap[size]\n return (\n <ol\n ref={ref}\n className={cn(\n 'flex flex-wrap items-center',\n sizeClass.gap,\n sizeClass.text,\n 'text-text-muted',\n className\n )}\n {...props}\n />\n )\n }\n)\nBreadcrumbList.displayName = 'BreadcrumbList'\n\n// ─── BreadcrumbItem ───────────────────────────────────────\n\nconst BreadcrumbItem = React.forwardRef<HTMLLIElement, React.ComponentPropsWithoutRef<'li'>>(\n ({ className, ...props }, ref) => (\n <li\n ref={ref}\n className={cn('inline-flex items-center gap-1.5', className)}\n {...props}\n />\n )\n)\nBreadcrumbItem.displayName = 'BreadcrumbItem'\n\n// ─── BreadcrumbLink ───────────────────────────────────────\n\nexport interface BreadcrumbLinkProps extends React.ComponentPropsWithoutRef<'a'> {\n /** Use Radix Slot to compose with custom link components */\n asChild?: boolean\n}\n\nconst BreadcrumbLink = React.forwardRef<HTMLAnchorElement, BreadcrumbLinkProps>(\n ({ asChild, className, ...props }, ref) => {\n const Comp = asChild ? Slot : 'a'\n return (\n <Comp\n ref={ref}\n className={cn(\n 'transition-colors duration-fast hover:text-foreground',\n className\n )}\n {...props}\n />\n )\n }\n)\nBreadcrumbLink.displayName = 'BreadcrumbLink'\n\n// ─── BreadcrumbPage ───────────────────────────────────────\n\nconst BreadcrumbPage = React.forwardRef<HTMLSpanElement, React.ComponentPropsWithoutRef<'span'>>(\n ({ className, ...props }, ref) => (\n <span\n ref={ref}\n role=\"link\"\n aria-disabled=\"true\"\n aria-current=\"page\"\n className={cn('text-foreground', className)}\n {...props}\n />\n )\n)\nBreadcrumbPage.displayName = 'BreadcrumbPage'\n\n// ─── BreadcrumbSeparator ──────────────────────────────────\n\nconst BreadcrumbSeparator = React.forwardRef<HTMLLIElement, React.ComponentPropsWithoutRef<'li'>>(\n ({ children, className, ...props }, ref) => {\n const { separator, size = 'default' } = useBreadcrumbContext()\n const sizeClass = breadcrumbSizeMap[size]\n return (\n <li\n ref={ref}\n role=\"presentation\"\n aria-hidden=\"true\"\n className={cn('flex items-center text-text-subtle', className)}\n {...props}\n >\n {children ?? separator ?? <ChevronRightIcon className={sizeClass.icon} />}\n </li>\n )\n }\n)\nBreadcrumbSeparator.displayName = 'BreadcrumbSeparator'\n\n// ─── BreadcrumbEllipsis ───────────────────────────────────\n\nexport interface BreadcrumbEllipsisProps extends React.ComponentPropsWithoutRef<'span'> {}\n\nconst BreadcrumbEllipsis = React.forwardRef<HTMLSpanElement, BreadcrumbEllipsisProps>(\n ({ className, ...props }, ref) => {\n const { size = 'default' } = useBreadcrumbContext()\n const sizeClass = breadcrumbSizeMap[size]\n return (\n <span\n ref={ref}\n role=\"presentation\"\n aria-hidden=\"true\"\n className={cn('flex items-center justify-center', className)}\n {...props}\n >\n <EllipsisIcon className={sizeClass.icon} />\n <span className=\"sr-only\">More</span>\n </span>\n )\n }\n)\nBreadcrumbEllipsis.displayName = 'BreadcrumbEllipsis'\n\n// ─── Exports ──────────────────────────────────────────────\n\nexport {\n Breadcrumb,\n BreadcrumbList,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbPage,\n BreadcrumbSeparator,\n BreadcrumbEllipsis,\n breadcrumbSizeMap,\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA4BM;AA1BN,YAAuB;AACvB,wBAAqB;AAErB,mBAAmB;AASnB,MAAM,oBAAoB,MAAM,cAAsC,CAAC,CAAC;AACxE,MAAM,uBAAuB,MAAM,MAAM,WAAW,iBAAiB;AAIrE,SAAS,iBAAiB,EAAE,UAAU,GAA2B;AAC/D,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,MAAK;AAAA,MACL,SAAQ;AAAA,MACR,QAAO;AAAA,MACP,aAAa;AAAA,MAEb,sDAAC,UAAK,eAAc,SAAQ,gBAAe,SAAQ,GAAE,gBAAe;AAAA;AAAA,EACtE;AAEJ;AAIA,SAAS,aAAa,EAAE,UAAU,GAA2B;AAC3D,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,MAAK;AAAA,MACL,SAAQ;AAAA,MAER;AAAA,oDAAC,YAAO,IAAG,KAAI,IAAG,MAAK,GAAE,OAAM;AAAA,QAC/B,4CAAC,YAAO,IAAG,MAAK,IAAG,MAAK,GAAE,OAAM;AAAA,QAChC,4CAAC,YAAO,IAAG,MAAK,IAAG,MAAK,GAAE,OAAM;AAAA;AAAA;AAAA,EAClC;AAEJ;AAIA,MAAM,oBAAoB;AAAA,EACxB,IAAI,EAAE,MAAM,WAAW,MAAM,WAAW,KAAK,UAAU;AAAA,EACvD,SAAS,EAAE,MAAM,WAAW,MAAM,WAAW,KAAK,QAAQ;AAAA,EAC1D,IAAI,EAAE,MAAM,WAAW,MAAM,WAAW,KAAK,QAAQ;AACvD;AAeA,MAAM,aAAa,MAAM;AAAA,EACvB,CAAC,EAAE,WAAW,WAAW,OAAO,WAAW,GAAG,MAAM,GAAG,QACrD,4CAAC,kBAAkB,UAAlB,EAA2B,OAAO,EAAE,MAAM,UAAU,GACnD;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,cAAW;AAAA,MACX,eAAW,iBAAG,IAAI,SAAS;AAAA,MAC1B,GAAG;AAAA;AAAA,EACN,GACF;AAEJ;AACA,WAAW,cAAc;AAIzB,MAAM,iBAAiB,MAAM;AAAA,EAC3B,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAAQ;AAChC,UAAM,EAAE,OAAO,UAAU,IAAI,qBAAqB;AAClD,UAAM,YAAY,kBAAkB,IAAI;AACxC,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,eAAW;AAAA,UACT;AAAA,UACA,UAAU;AAAA,UACV,UAAU;AAAA,UACV;AAAA,UACA;AAAA,QACF;AAAA,QACC,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AACA,eAAe,cAAc;AAI7B,MAAM,iBAAiB,MAAM;AAAA,EAC3B,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QACxB;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,eAAW,iBAAG,oCAAoC,SAAS;AAAA,MAC1D,GAAG;AAAA;AAAA,EACN;AAEJ;AACA,eAAe,cAAc;AAS7B,MAAM,iBAAiB,MAAM;AAAA,EAC3B,CAAC,EAAE,SAAS,WAAW,GAAG,MAAM,GAAG,QAAQ;AACzC,UAAM,OAAO,UAAU,yBAAO;AAC9B,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,eAAW;AAAA,UACT;AAAA,UACA;AAAA,QACF;AAAA,QACC,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AACA,eAAe,cAAc;AAI7B,MAAM,iBAAiB,MAAM;AAAA,EAC3B,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QACxB;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,MAAK;AAAA,MACL,iBAAc;AAAA,MACd,gBAAa;AAAA,MACb,eAAW,iBAAG,mBAAmB,SAAS;AAAA,MACzC,GAAG;AAAA;AAAA,EACN;AAEJ;AACA,eAAe,cAAc;AAI7B,MAAM,sBAAsB,MAAM;AAAA,EAChC,CAAC,EAAE,UAAU,WAAW,GAAG,MAAM,GAAG,QAAQ;AAC1C,UAAM,EAAE,WAAW,OAAO,UAAU,IAAI,qBAAqB;AAC7D,UAAM,YAAY,kBAAkB,IAAI;AACxC,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,MAAK;AAAA,QACL,eAAY;AAAA,QACZ,eAAW,iBAAG,sCAAsC,SAAS;AAAA,QAC5D,GAAG;AAAA,QAEH,sBAAY,aAAa,4CAAC,oBAAiB,WAAW,UAAU,MAAM;AAAA;AAAA,IACzE;AAAA,EAEJ;AACF;AACA,oBAAoB,cAAc;AAMlC,MAAM,qBAAqB,MAAM;AAAA,EAC/B,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAAQ;AAChC,UAAM,EAAE,OAAO,UAAU,IAAI,qBAAqB;AAClD,UAAM,YAAY,kBAAkB,IAAI;AACxC,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,MAAK;AAAA,QACL,eAAY;AAAA,QACZ,eAAW,iBAAG,oCAAoC,SAAS;AAAA,QAC1D,GAAG;AAAA,QAEJ;AAAA,sDAAC,gBAAa,WAAW,UAAU,MAAM;AAAA,UACzC,4CAAC,UAAK,WAAU,WAAU,kBAAI;AAAA;AAAA;AAAA,IAChC;AAAA,EAEJ;AACF;AACA,mBAAmB,cAAc;","names":[]}
|