@karakuri-ui/react 0.3.10 → 0.3.11

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.
Files changed (69) hide show
  1. package/dist/components/ui/accordion.d.mts +1 -1
  2. package/dist/components/ui/accordion.d.ts +1 -1
  3. package/dist/components/ui/alert.d.mts +2 -2
  4. package/dist/components/ui/alert.d.ts +2 -2
  5. package/dist/components/ui/avatar.d.mts +2 -2
  6. package/dist/components/ui/avatar.d.ts +2 -2
  7. package/dist/components/ui/badge.d.mts +2 -2
  8. package/dist/components/ui/badge.d.ts +2 -2
  9. package/dist/components/ui/badge.js +54 -43
  10. package/dist/components/ui/badge.js.map +1 -1
  11. package/dist/components/ui/badge.mjs +55 -44
  12. package/dist/components/ui/badge.mjs.map +1 -1
  13. package/dist/components/ui/button.d.mts +3 -3
  14. package/dist/components/ui/button.d.ts +3 -3
  15. package/dist/components/ui/button.js +31 -20
  16. package/dist/components/ui/button.js.map +1 -1
  17. package/dist/components/ui/button.mjs +31 -20
  18. package/dist/components/ui/button.mjs.map +1 -1
  19. package/dist/components/ui/card.d.mts +1 -1
  20. package/dist/components/ui/card.d.ts +1 -1
  21. package/dist/components/ui/chart.d.mts +1 -1
  22. package/dist/components/ui/chart.d.ts +1 -1
  23. package/dist/components/ui/checkbox.d.mts +1 -1
  24. package/dist/components/ui/checkbox.d.ts +1 -1
  25. package/dist/components/ui/divider.d.mts +1 -1
  26. package/dist/components/ui/divider.d.ts +1 -1
  27. package/dist/components/ui/field.d.mts +1 -1
  28. package/dist/components/ui/field.d.ts +1 -1
  29. package/dist/components/ui/icon-button.d.mts +2 -2
  30. package/dist/components/ui/icon-button.d.ts +2 -2
  31. package/dist/components/ui/icon-button.js +24 -13
  32. package/dist/components/ui/icon-button.js.map +1 -1
  33. package/dist/components/ui/icon-button.mjs +24 -13
  34. package/dist/components/ui/icon-button.mjs.map +1 -1
  35. package/dist/components/ui/input.d.mts +3 -3
  36. package/dist/components/ui/input.d.ts +3 -3
  37. package/dist/components/ui/metric-card.d.mts +2 -2
  38. package/dist/components/ui/metric-card.d.ts +2 -2
  39. package/dist/components/ui/navigation-menu.js +25 -11
  40. package/dist/components/ui/navigation-menu.js.map +1 -1
  41. package/dist/components/ui/navigation-menu.mjs +25 -11
  42. package/dist/components/ui/navigation-menu.mjs.map +1 -1
  43. package/dist/components/ui/popover.d.mts +1 -1
  44. package/dist/components/ui/popover.d.ts +1 -1
  45. package/dist/components/ui/progress.d.mts +1 -1
  46. package/dist/components/ui/progress.d.ts +1 -1
  47. package/dist/components/ui/radio-group.d.mts +1 -1
  48. package/dist/components/ui/radio-group.d.ts +1 -1
  49. package/dist/components/ui/segmented.d.mts +5 -5
  50. package/dist/components/ui/segmented.d.ts +5 -5
  51. package/dist/components/ui/slider.d.mts +1 -1
  52. package/dist/components/ui/slider.d.ts +1 -1
  53. package/dist/components/ui/spinner.d.mts +1 -1
  54. package/dist/components/ui/spinner.d.ts +1 -1
  55. package/dist/components/ui/switch.d.mts +1 -1
  56. package/dist/components/ui/switch.d.ts +1 -1
  57. package/dist/components/ui/tabs.d.mts +1 -1
  58. package/dist/components/ui/tabs.d.ts +1 -1
  59. package/dist/components/ui/textarea.d.mts +2 -2
  60. package/dist/components/ui/textarea.d.ts +2 -2
  61. package/dist/components/ui/toast.d.mts +1 -1
  62. package/dist/components/ui/toast.d.ts +1 -1
  63. package/dist/components/ui/toggle-group.d.mts +2 -2
  64. package/dist/components/ui/toggle-group.d.ts +2 -2
  65. package/dist/components/ui/toggle.d.mts +2 -2
  66. package/dist/components/ui/toggle.d.ts +2 -2
  67. package/dist/components/ui/tooltip.d.mts +1 -1
  68. package/dist/components/ui/tooltip.d.ts +1 -1
  69. package/package.json +5 -5
@@ -25,7 +25,7 @@ interface AccordionItemProps extends React.ComponentPropsWithoutRef<typeof Accor
25
25
  }
26
26
  declare const AccordionItem: React.ForwardRefExoticComponent<AccordionItemProps & React.RefAttributes<HTMLDivElement>>;
27
27
  declare const accordionTriggerVariants: (props?: ({
28
- size?: "sm" | "default" | "lg" | null | undefined;
28
+ size?: "default" | "sm" | "lg" | null | undefined;
29
29
  iconPosition?: "left" | "right" | null | undefined;
30
30
  } & class_variance_authority_types.ClassProp) | undefined) => string;
31
31
  interface AccordionTriggerProps extends React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger> {
@@ -25,7 +25,7 @@ interface AccordionItemProps extends React.ComponentPropsWithoutRef<typeof Accor
25
25
  }
26
26
  declare const AccordionItem: React.ForwardRefExoticComponent<AccordionItemProps & React.RefAttributes<HTMLDivElement>>;
27
27
  declare const accordionTriggerVariants: (props?: ({
28
- size?: "sm" | "default" | "lg" | null | undefined;
28
+ size?: "default" | "sm" | "lg" | null | undefined;
29
29
  iconPosition?: "left" | "right" | null | undefined;
30
30
  } & class_variance_authority_types.ClassProp) | undefined) => string;
31
31
  interface AccordionTriggerProps extends React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger> {
@@ -3,8 +3,8 @@ import * as React from 'react';
3
3
  import { VariantProps } from 'class-variance-authority';
4
4
 
5
5
  declare const alertVariants: (props?: ({
6
- size?: "sm" | "default" | "lg" | null | undefined;
7
- radius?: "sm" | "lg" | "none" | "base" | "md" | "xl" | "2xl" | "3xl" | "full" | null | undefined;
6
+ size?: "default" | "sm" | "lg" | null | undefined;
7
+ radius?: "sm" | "lg" | "base" | "none" | "md" | "xl" | "2xl" | "3xl" | "full" | null | undefined;
8
8
  } & class_variance_authority_types.ClassProp) | undefined) => string;
9
9
  type AlertVariant = 'default' | 'outline' | 'filled';
10
10
  type AlertColor = 'info' | 'success' | 'warning' | 'error';
@@ -3,8 +3,8 @@ import * as React from 'react';
3
3
  import { VariantProps } from 'class-variance-authority';
4
4
 
5
5
  declare const alertVariants: (props?: ({
6
- size?: "sm" | "default" | "lg" | null | undefined;
7
- radius?: "sm" | "lg" | "none" | "base" | "md" | "xl" | "2xl" | "3xl" | "full" | null | undefined;
6
+ size?: "default" | "sm" | "lg" | null | undefined;
7
+ radius?: "sm" | "lg" | "base" | "none" | "md" | "xl" | "2xl" | "3xl" | "full" | null | undefined;
8
8
  } & class_variance_authority_types.ClassProp) | undefined) => string;
9
9
  type AlertVariant = 'default' | 'outline' | 'filled';
10
10
  type AlertColor = 'info' | 'success' | 'warning' | 'error';
@@ -4,8 +4,8 @@ import * as AvatarPrimitive from '@radix-ui/react-avatar';
4
4
  import { VariantProps } from 'class-variance-authority';
5
5
 
6
6
  declare const avatarVariants: (props?: ({
7
- size?: "sm" | "default" | "lg" | "xl" | "2xl" | "xs" | null | undefined;
8
- shape?: "square" | "circle" | null | undefined;
7
+ size?: "default" | "sm" | "lg" | "xl" | "2xl" | "xs" | null | undefined;
8
+ shape?: "circle" | "square" | null | undefined;
9
9
  } & class_variance_authority_types.ClassProp) | undefined) => string;
10
10
  declare const avatarColors: readonly [{
11
11
  readonly vivid: {
@@ -4,8 +4,8 @@ import * as AvatarPrimitive from '@radix-ui/react-avatar';
4
4
  import { VariantProps } from 'class-variance-authority';
5
5
 
6
6
  declare const avatarVariants: (props?: ({
7
- size?: "sm" | "default" | "lg" | "xl" | "2xl" | "xs" | null | undefined;
8
- shape?: "square" | "circle" | null | undefined;
7
+ size?: "default" | "sm" | "lg" | "xl" | "2xl" | "xs" | null | undefined;
8
+ shape?: "circle" | "square" | null | undefined;
9
9
  } & class_variance_authority_types.ClassProp) | undefined) => string;
10
10
  declare const avatarColors: readonly [{
11
11
  readonly vivid: {
@@ -3,7 +3,7 @@ import * as React from 'react';
3
3
  import { VariantProps } from 'class-variance-authority';
4
4
 
5
5
  declare const badgeVariants: (props?: ({
6
- size?: "sm" | "default" | "lg" | null | undefined;
6
+ size?: "default" | "sm" | "lg" | null | undefined;
7
7
  radius?: "sm" | "lg" | "base" | "md" | "full" | null | undefined;
8
8
  } & class_variance_authority_types.ClassProp) | undefined) => string;
9
9
  type BadgeVariant = 'solid' | 'subtle' | 'outline';
@@ -19,7 +19,7 @@ interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement>, VariantProps
19
19
  icon?: React.ReactNode;
20
20
  /** Show a status dot before text */
21
21
  dot?: boolean;
22
- /** Show a remove button */
22
+ /** Show a remove button (not rendered with asChild — a button inside a link is invalid HTML) */
23
23
  removable?: boolean;
24
24
  /** Callback when remove button is clicked */
25
25
  onRemove?: () => void;
@@ -3,7 +3,7 @@ import * as React from 'react';
3
3
  import { VariantProps } from 'class-variance-authority';
4
4
 
5
5
  declare const badgeVariants: (props?: ({
6
- size?: "sm" | "default" | "lg" | null | undefined;
6
+ size?: "default" | "sm" | "lg" | null | undefined;
7
7
  radius?: "sm" | "lg" | "base" | "md" | "full" | null | undefined;
8
8
  } & class_variance_authority_types.ClassProp) | undefined) => string;
9
9
  type BadgeVariant = 'solid' | 'subtle' | 'outline';
@@ -19,7 +19,7 @@ interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement>, VariantProps
19
19
  icon?: React.ReactNode;
20
20
  /** Show a status dot before text */
21
21
  dot?: boolean;
22
- /** Show a remove button */
22
+ /** Show a remove button (not rendered with asChild — a button inside a link is invalid HTML) */
23
23
  removable?: boolean;
24
24
  /** Callback when remove button is clicked */
25
25
  onRemove?: () => void;
@@ -122,6 +122,16 @@ const dotColorMap = {
122
122
  error: "bg-error",
123
123
  info: "bg-info"
124
124
  };
125
+ const REACT_LAZY_TYPE = /* @__PURE__ */ Symbol.for("react.lazy");
126
+ function renderInsideChild(children, render) {
127
+ let child = children;
128
+ const resolve = React.use;
129
+ if (typeof child === "object" && child !== null && child.$$typeof === REACT_LAZY_TYPE && typeof resolve === "function") {
130
+ child = resolve(child._payload);
131
+ }
132
+ if (!React.isValidElement(child)) return render(children);
133
+ return React.cloneElement(child, void 0, render(child.props.children));
134
+ }
125
135
  const Badge = React.forwardRef(
126
136
  ({
127
137
  className,
@@ -142,7 +152,49 @@ const Badge = React.forwardRef(
142
152
  const colorClasses = colorMap[color][variant];
143
153
  const outlineClasses = variant === "outline" ? "border bg-transparent" : "";
144
154
  const dotColor = variant === "solid" ? "bg-current" : dotColorMap[color];
145
- return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
155
+ const renderContent = (content) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
156
+ dot && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
157
+ "span",
158
+ {
159
+ className: (0, import_utils.cn)("shrink-0 rounded-full", badgeDotSizes[resolvedSize], dotColor),
160
+ "aria-hidden": "true"
161
+ }
162
+ ),
163
+ icon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
164
+ "span",
165
+ {
166
+ className: (0, import_utils.cn)("shrink-0 [&>svg]:w-full [&>svg]:h-full", badgeIconSizes[resolvedSize]),
167
+ "aria-hidden": "true",
168
+ children: icon
169
+ }
170
+ ),
171
+ content,
172
+ removable && !asChild && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
173
+ "button",
174
+ {
175
+ type: "button",
176
+ 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",
177
+ onClick: (e) => {
178
+ e.stopPropagation();
179
+ onRemove?.();
180
+ },
181
+ "aria-label": "Remove",
182
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
183
+ "svg",
184
+ {
185
+ className: "w-3 h-3",
186
+ fill: "none",
187
+ viewBox: "0 0 24 24",
188
+ stroke: "currentColor",
189
+ strokeWidth: 2,
190
+ "aria-hidden": "true",
191
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" })
192
+ }
193
+ )
194
+ }
195
+ )
196
+ ] });
197
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
146
198
  Comp,
147
199
  {
148
200
  ref,
@@ -153,48 +205,7 @@ const Badge = React.forwardRef(
153
205
  className
154
206
  ),
155
207
  ...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
- ]
208
+ children: asChild ? renderInsideChild(children, renderContent) : renderContent(children)
198
209
  }
199
210
  );
200
211
  }
@@ -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":"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","names":[]}
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\nconst REACT_LAZY_TYPE = Symbol.for('react.lazy')\n\n// asChild: Slot merges props only into a single child element, so the dot and\n// icon must go inside that child, not next to it. Lazy children (from Server\n// Components) are resolved the same way Radix Slot does.\nfunction renderInsideChild(\n children: React.ReactNode,\n render: (content: React.ReactNode) => React.ReactNode\n): React.ReactNode {\n let child: unknown = children\n const resolve = (React as { use?: (usable: unknown) => unknown }).use\n if (\n typeof child === 'object' && child !== null &&\n (child as { $$typeof?: symbol }).$$typeof === REACT_LAZY_TYPE &&\n typeof resolve === 'function'\n ) {\n child = resolve((child as { _payload: unknown })._payload)\n }\n if (!React.isValidElement<{ children?: React.ReactNode }>(child)) return render(children)\n return React.cloneElement(child, undefined, render(child.props.children))\n}\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 (not rendered with asChild — a button inside a link is invalid HTML) */\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 const renderContent = (content: React.ReactNode) => (\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 {content}\n {/* A button inside the asChild element (usually a link) would be invalid HTML */}\n {removable && !asChild && (\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 </>\n )\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 {asChild ? renderInsideChild(children, renderContent) : renderContent(children)}\n </Comp>\n )\n }\n)\nBadge.displayName = 'Badge'\n\nexport { Badge, badgeVariants }\n"],"mappings":"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","names":[]}
@@ -1,5 +1,5 @@
1
1
  "use client";
2
- import { jsx, jsxs } from "react/jsx-runtime";
2
+ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
3
3
  import * as React from "react";
4
4
  import { Slot } from "@radix-ui/react-slot";
5
5
  import { cva } from "class-variance-authority";
@@ -88,6 +88,16 @@ const dotColorMap = {
88
88
  error: "bg-error",
89
89
  info: "bg-info"
90
90
  };
91
+ const REACT_LAZY_TYPE = /* @__PURE__ */ Symbol.for("react.lazy");
92
+ function renderInsideChild(children, render) {
93
+ let child = children;
94
+ const resolve = React.use;
95
+ if (typeof child === "object" && child !== null && child.$$typeof === REACT_LAZY_TYPE && typeof resolve === "function") {
96
+ child = resolve(child._payload);
97
+ }
98
+ if (!React.isValidElement(child)) return render(children);
99
+ return React.cloneElement(child, void 0, render(child.props.children));
100
+ }
91
101
  const Badge = React.forwardRef(
92
102
  ({
93
103
  className,
@@ -108,7 +118,49 @@ const Badge = React.forwardRef(
108
118
  const colorClasses = colorMap[color][variant];
109
119
  const outlineClasses = variant === "outline" ? "border bg-transparent" : "";
110
120
  const dotColor = variant === "solid" ? "bg-current" : dotColorMap[color];
111
- return /* @__PURE__ */ jsxs(
121
+ const renderContent = (content) => /* @__PURE__ */ jsxs(Fragment, { children: [
122
+ dot && /* @__PURE__ */ jsx(
123
+ "span",
124
+ {
125
+ className: cn("shrink-0 rounded-full", badgeDotSizes[resolvedSize], dotColor),
126
+ "aria-hidden": "true"
127
+ }
128
+ ),
129
+ icon && /* @__PURE__ */ jsx(
130
+ "span",
131
+ {
132
+ className: cn("shrink-0 [&>svg]:w-full [&>svg]:h-full", badgeIconSizes[resolvedSize]),
133
+ "aria-hidden": "true",
134
+ children: icon
135
+ }
136
+ ),
137
+ content,
138
+ removable && !asChild && /* @__PURE__ */ jsx(
139
+ "button",
140
+ {
141
+ type: "button",
142
+ 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",
143
+ onClick: (e) => {
144
+ e.stopPropagation();
145
+ onRemove?.();
146
+ },
147
+ "aria-label": "Remove",
148
+ children: /* @__PURE__ */ jsx(
149
+ "svg",
150
+ {
151
+ className: "w-3 h-3",
152
+ fill: "none",
153
+ viewBox: "0 0 24 24",
154
+ stroke: "currentColor",
155
+ strokeWidth: 2,
156
+ "aria-hidden": "true",
157
+ children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" })
158
+ }
159
+ )
160
+ }
161
+ )
162
+ ] });
163
+ return /* @__PURE__ */ jsx(
112
164
  Comp,
113
165
  {
114
166
  ref,
@@ -119,48 +171,7 @@ const Badge = React.forwardRef(
119
171
  className
120
172
  ),
121
173
  ...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
- ]
174
+ children: asChild ? renderInsideChild(children, renderContent) : renderContent(children)
164
175
  }
165
176
  );
166
177
  }
@@ -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":";AA6IM,SAWI,KAXJ;AA3IN,YAAY,WAAW;AACvB,SAAS,YAAY;AACrB,SAAS,WAA8B;AACvC,SAAS,UAAU;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,gBAAgB;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,OAAO;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,WAAW;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,WAAW,GAAG,yBAAyB,cAAc,YAAY,GAAG,QAAQ;AAAA,cAC5E,eAAY;AAAA;AAAA,UACd;AAAA,UAED,QACC;AAAA,YAAC;AAAA;AAAA,cACC,WAAW,GAAG,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,8BAAC,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
+ {"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\nconst REACT_LAZY_TYPE = Symbol.for('react.lazy')\n\n// asChild: Slot merges props only into a single child element, so the dot and\n// icon must go inside that child, not next to it. Lazy children (from Server\n// Components) are resolved the same way Radix Slot does.\nfunction renderInsideChild(\n children: React.ReactNode,\n render: (content: React.ReactNode) => React.ReactNode\n): React.ReactNode {\n let child: unknown = children\n const resolve = (React as { use?: (usable: unknown) => unknown }).use\n if (\n typeof child === 'object' && child !== null &&\n (child as { $$typeof?: symbol }).$$typeof === REACT_LAZY_TYPE &&\n typeof resolve === 'function'\n ) {\n child = resolve((child as { _payload: unknown })._payload)\n }\n if (!React.isValidElement<{ children?: React.ReactNode }>(child)) return render(children)\n return React.cloneElement(child, undefined, render(child.props.children))\n}\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 (not rendered with asChild — a button inside a link is invalid HTML) */\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 const renderContent = (content: React.ReactNode) => (\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 {content}\n {/* A button inside the asChild element (usually a link) would be invalid HTML */}\n {removable && !asChild && (\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 </>\n )\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 {asChild ? renderInsideChild(children, renderContent) : renderContent(children)}\n </Comp>\n )\n }\n)\nBadge.displayName = 'Badge'\n\nexport { Badge, badgeVariants }\n"],"mappings":"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","names":[]}
@@ -10,9 +10,9 @@ declare const solidColorMap: {
10
10
  };
11
11
  type ButtonColor = keyof typeof solidColorMap;
12
12
  declare const buttonVariants: (props?: ({
13
- variant?: "outline" | "link" | "solid" | "ghost" | null | undefined;
14
- size?: "sm" | "default" | "lg" | "md" | "icon" | "xs" | null | undefined;
15
- radius?: "sm" | "default" | "lg" | "none" | "base" | "xl" | "2xl" | "3xl" | "full" | null | undefined;
13
+ variant?: "link" | "outline" | "solid" | "ghost" | null | undefined;
14
+ size?: "default" | "sm" | "lg" | "icon" | "md" | "xs" | null | undefined;
15
+ radius?: "default" | "sm" | "lg" | "base" | "none" | "xl" | "2xl" | "3xl" | "full" | null | undefined;
16
16
  fullWidth?: boolean | null | undefined;
17
17
  } & class_variance_authority_types.ClassProp) | undefined) => string;
18
18
  interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
@@ -10,9 +10,9 @@ declare const solidColorMap: {
10
10
  };
11
11
  type ButtonColor = keyof typeof solidColorMap;
12
12
  declare const buttonVariants: (props?: ({
13
- variant?: "outline" | "link" | "solid" | "ghost" | null | undefined;
14
- size?: "sm" | "default" | "lg" | "md" | "icon" | "xs" | null | undefined;
15
- radius?: "sm" | "default" | "lg" | "none" | "base" | "xl" | "2xl" | "3xl" | "full" | null | undefined;
13
+ variant?: "link" | "outline" | "solid" | "ghost" | null | undefined;
14
+ size?: "default" | "sm" | "lg" | "icon" | "md" | "xs" | null | undefined;
15
+ radius?: "default" | "sm" | "lg" | "base" | "none" | "xl" | "2xl" | "3xl" | "full" | null | undefined;
16
16
  fullWidth?: boolean | null | undefined;
17
17
  } & class_variance_authority_types.ClassProp) | undefined) => string;
18
18
  interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
@@ -101,6 +101,16 @@ const buttonVariants = (0, import_class_variance_authority.cva)(
101
101
  }
102
102
  }
103
103
  );
104
+ const REACT_LAZY_TYPE = /* @__PURE__ */ Symbol.for("react.lazy");
105
+ function renderInsideChild(children, render) {
106
+ let child = children;
107
+ const resolve = React.use;
108
+ if (typeof child === "object" && child !== null && child.$$typeof === REACT_LAZY_TYPE && typeof resolve === "function") {
109
+ child = resolve(child._payload);
110
+ }
111
+ if (!React.isValidElement(child)) return render(children);
112
+ return React.cloneElement(child, void 0, render(child.props.children));
113
+ }
104
114
  const Button = React.forwardRef(
105
115
  ({
106
116
  className,
@@ -144,6 +154,26 @@ const Button = React.forwardRef(
144
154
  // icon-only → 20px
145
155
  }[size || "default"];
146
156
  const selectedStyles = selected ? variant === "outline" ? "bg-background-muted" : variant === "ghost" ? "font-semibold" : "" : "";
157
+ const renderContent = (content) => loading ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
158
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
159
+ "svg",
160
+ {
161
+ className: (0, import_utils.cn)(iconSizeClass, "animate-spin"),
162
+ fill: "none",
163
+ viewBox: "0 0 24 24",
164
+ "aria-hidden": "true",
165
+ children: [
166
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
167
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })
168
+ ]
169
+ }
170
+ ),
171
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: content })
172
+ ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
173
+ leftIcon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: (0, import_utils.cn)(iconSizeClass, "[&>svg]:w-full [&>svg]:h-full"), "aria-hidden": "true", children: leftIcon }),
174
+ content,
175
+ rightIcon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: (0, import_utils.cn)(iconSizeClass, "[&>svg]:w-full [&>svg]:h-full"), "aria-hidden": "true", children: rightIcon })
176
+ ] });
147
177
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
148
178
  Comp,
149
179
  {
@@ -153,26 +183,7 @@ const Button = React.forwardRef(
153
183
  "aria-busy": loading || void 0,
154
184
  "aria-pressed": selected || void 0,
155
185
  ...props,
156
- children: loading ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
157
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
158
- "svg",
159
- {
160
- className: (0, import_utils.cn)(iconSizeClass, "animate-spin"),
161
- fill: "none",
162
- viewBox: "0 0 24 24",
163
- "aria-hidden": "true",
164
- children: [
165
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
166
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })
167
- ]
168
- }
169
- ),
170
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children })
171
- ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
172
- leftIcon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: (0, import_utils.cn)(iconSizeClass, "[&>svg]:w-full [&>svg]:h-full"), "aria-hidden": "true", children: leftIcon }),
173
- children,
174
- rightIcon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: (0, import_utils.cn)(iconSizeClass, "[&>svg]:w-full [&>svg]:h-full"), "aria-hidden": "true", children: rightIcon })
175
- ] })
186
+ children: asChild ? renderInsideChild(children, renderContent) : renderContent(children)
176
187
  }
177
188
  );
178
189
  }
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/ui/button.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'\nimport { useButtonGroup } from './button-group'\n\n// Solid color maps (applied when variant=\"solid\")\nconst solidColorMap = {\n default: 'bg-foreground text-background hover:bg-foreground/90 active:bg-foreground/80',\n primary: 'bg-primary text-primary-foreground hover:bg-primary-hover active:bg-primary-active',\n secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary-hover active:bg-secondary-active',\n destructive: 'bg-error text-error-foreground hover:bg-error-hover active:bg-error-active',\n} as const\n\nexport type ButtonColor = keyof typeof solidColorMap\n\nconst buttonVariants = cva(\n 'inline-flex items-center justify-center whitespace-nowrap transition-all duration-micro focus-visible:focus-ring disabled:pointer-events-none disabled:opacity-50',\n {\n variants: {\n variant: {\n solid: 'font-semibold',\n outline: 'border border-border-form bg-background text-foreground hover:bg-background-muted font-normal',\n ghost: 'text-foreground hover:bg-background-muted font-normal',\n link: 'text-text-link underline-offset-4 hover:underline font-normal',\n },\n size: {\n xs: 'h-7 px-2.5 text-xs gap-1', // 28px height, 10px paddingX, 12px font\n sm: 'h-8 px-3 text-sm gap-2', // 32px height, 12px paddingX, 13px font\n md: 'h-9 px-3.5 text-md gap-2', // 36px height, 14px paddingX, 14px font\n default: 'h-10 px-4 text-md gap-2', // 40px height, 16px paddingX, 14px font\n lg: 'h-12 px-6 text-base gap-2', // 48px height, 24px paddingX, 16px font\n icon: 'h-10 w-10',\n },\n radius: {\n none: 'rounded-none', // 0px - primitive.borderRadius.none\n sm: 'rounded-sm', // 2px - primitive.borderRadius.sm\n base: 'rounded', // 4px - primitive.borderRadius.base\n default: 'rounded-md', // 6px - primitive.borderRadius.md (Figma button default)\n lg: 'rounded-lg', // 8px - primitive.borderRadius.lg\n xl: 'rounded-xl', // 12px - primitive.borderRadius.xl\n '2xl': 'rounded-2xl', // 16px - primitive.borderRadius.2xl\n '3xl': 'rounded-3xl', // 24px - primitive.borderRadius.3xl\n full: 'rounded-full', // 9999px - primitive.borderRadius.full\n },\n fullWidth: {\n true: 'w-full',\n false: 'w-auto',\n },\n },\n defaultVariants: {\n variant: 'solid',\n size: 'default',\n radius: 'default',\n fullWidth: false,\n },\n }\n)\n\nexport interface ButtonProps\n extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n VariantProps<typeof buttonVariants> {\n /** Solid variant color */\n color?: ButtonColor\n asChild?: boolean\n loading?: boolean\n leftIcon?: React.ReactNode\n rightIcon?: React.ReactNode\n selected?: boolean\n fontWeight?: 'normal' | 'semibold'\n pressEffect?: boolean\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n ({\n className,\n variant: variantProp,\n color: colorProp,\n size: sizeProp,\n radius: radiusProp,\n fullWidth,\n asChild = false,\n loading = false,\n disabled: disabledProp,\n leftIcon,\n rightIcon,\n selected = false,\n fontWeight: fontWeightProp,\n pressEffect,\n children,\n ...props\n }, ref) => {\n const Comp = asChild ? Slot : 'button'\n const groupContext = useButtonGroup()\n\n // Use context values as fallback, individual props take precedence\n const variant = variantProp ?? groupContext?.variant ?? 'solid'\n const color = colorProp ?? 'default'\n const size = sizeProp ?? groupContext?.size\n const radius = radiusProp ?? groupContext?.radius\n const disabled = disabledProp ?? groupContext?.disabled\n\n // Priority: direct prop > ButtonGroup context > variant default (no class)\n const fontWeight = fontWeightProp ?? groupContext?.fontWeight\n\n // FontWeight class (overrides variant default)\n const fontWeightClass = fontWeight === 'normal' ? 'font-normal' : fontWeight === 'semibold' ? 'font-semibold' : ''\n\n // Icon size for button with text (5-step scale)\n // xs~sm: 14px, md~default~lg: 16px\n const iconSizeClass = {\n xs: 'icon-xs', // 14px\n sm: 'icon-xs', // 14px\n md: 'icon-sm', // 16px\n default: 'icon-sm', // 16px\n lg: 'icon-sm', // 16px\n icon: 'icon-md', // icon-only → 20px\n }[size || 'default']\n\n // Selected styles by variant (used in ButtonGroup)\n const selectedStyles = selected ? (\n variant === 'outline' ? 'bg-background-muted' :\n variant === 'ghost' ? 'font-semibold' : ''\n ) : ''\n\n return (\n <Comp\n className={cn(buttonVariants({ variant, size, radius, fullWidth }), variant === 'solid' && solidColorMap[color], pressEffect !== false && 'active:scale-pressed', fontWeightClass, selectedStyles, className)}\n ref={ref}\n disabled={disabled || loading}\n aria-busy={loading || undefined}\n aria-pressed={selected || undefined}\n {...props}\n >\n {loading ? (\n <>\n <svg\n className={cn(iconSizeClass, 'animate-spin')}\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n aria-hidden=\"true\"\n >\n <circle className=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" strokeWidth=\"4\" />\n <path className=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\" />\n </svg>\n <span>{children}</span>\n </>\n ) : (\n <>\n {leftIcon && <span className={cn(iconSizeClass, '[&>svg]:w-full [&>svg]:h-full')} aria-hidden=\"true\">{leftIcon}</span>}\n {children}\n {rightIcon && <span className={cn(iconSizeClass, '[&>svg]:w-full [&>svg]:h-full')} aria-hidden=\"true\">{rightIcon}</span>}\n </>\n )}\n </Comp>\n )\n }\n)\nButton.displayName = 'Button'\n\nexport { Button, buttonVariants }\n"],"mappings":"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","names":[]}
1
+ {"version":3,"sources":["../../../src/components/ui/button.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'\nimport { useButtonGroup } from './button-group'\n\n// Solid color maps (applied when variant=\"solid\")\nconst solidColorMap = {\n default: 'bg-foreground text-background hover:bg-foreground/90 active:bg-foreground/80',\n primary: 'bg-primary text-primary-foreground hover:bg-primary-hover active:bg-primary-active',\n secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary-hover active:bg-secondary-active',\n destructive: 'bg-error text-error-foreground hover:bg-error-hover active:bg-error-active',\n} as const\n\nexport type ButtonColor = keyof typeof solidColorMap\n\nconst buttonVariants = cva(\n 'inline-flex items-center justify-center whitespace-nowrap transition-all duration-micro focus-visible:focus-ring disabled:pointer-events-none disabled:opacity-50',\n {\n variants: {\n variant: {\n solid: 'font-semibold',\n outline: 'border border-border-form bg-background text-foreground hover:bg-background-muted font-normal',\n ghost: 'text-foreground hover:bg-background-muted font-normal',\n link: 'text-text-link underline-offset-4 hover:underline font-normal',\n },\n size: {\n xs: 'h-7 px-2.5 text-xs gap-1', // 28px height, 10px paddingX, 12px font\n sm: 'h-8 px-3 text-sm gap-2', // 32px height, 12px paddingX, 13px font\n md: 'h-9 px-3.5 text-md gap-2', // 36px height, 14px paddingX, 14px font\n default: 'h-10 px-4 text-md gap-2', // 40px height, 16px paddingX, 14px font\n lg: 'h-12 px-6 text-base gap-2', // 48px height, 24px paddingX, 16px font\n icon: 'h-10 w-10',\n },\n radius: {\n none: 'rounded-none', // 0px - primitive.borderRadius.none\n sm: 'rounded-sm', // 2px - primitive.borderRadius.sm\n base: 'rounded', // 4px - primitive.borderRadius.base\n default: 'rounded-md', // 6px - primitive.borderRadius.md (Figma button default)\n lg: 'rounded-lg', // 8px - primitive.borderRadius.lg\n xl: 'rounded-xl', // 12px - primitive.borderRadius.xl\n '2xl': 'rounded-2xl', // 16px - primitive.borderRadius.2xl\n '3xl': 'rounded-3xl', // 24px - primitive.borderRadius.3xl\n full: 'rounded-full', // 9999px - primitive.borderRadius.full\n },\n fullWidth: {\n true: 'w-full',\n false: 'w-auto',\n },\n },\n defaultVariants: {\n variant: 'solid',\n size: 'default',\n radius: 'default',\n fullWidth: false,\n },\n }\n)\n\nconst REACT_LAZY_TYPE = Symbol.for('react.lazy')\n\n// asChild: Slot merges props only into a single child element, so icons and\n// wrappers must go inside that child, not next to it. Lazy children (from\n// Server Components) are resolved the same way Radix Slot does.\nfunction renderInsideChild(\n children: React.ReactNode,\n render: (content: React.ReactNode) => React.ReactNode\n): React.ReactNode {\n let child: unknown = children\n const resolve = (React as { use?: (usable: unknown) => unknown }).use\n if (\n typeof child === 'object' && child !== null &&\n (child as { $$typeof?: symbol }).$$typeof === REACT_LAZY_TYPE &&\n typeof resolve === 'function'\n ) {\n child = resolve((child as { _payload: unknown })._payload)\n }\n if (!React.isValidElement<{ children?: React.ReactNode }>(child)) return render(children)\n return React.cloneElement(child, undefined, render(child.props.children))\n}\n\nexport interface ButtonProps\n extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n VariantProps<typeof buttonVariants> {\n /** Solid variant color */\n color?: ButtonColor\n asChild?: boolean\n loading?: boolean\n leftIcon?: React.ReactNode\n rightIcon?: React.ReactNode\n selected?: boolean\n fontWeight?: 'normal' | 'semibold'\n pressEffect?: boolean\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n ({\n className,\n variant: variantProp,\n color: colorProp,\n size: sizeProp,\n radius: radiusProp,\n fullWidth,\n asChild = false,\n loading = false,\n disabled: disabledProp,\n leftIcon,\n rightIcon,\n selected = false,\n fontWeight: fontWeightProp,\n pressEffect,\n children,\n ...props\n }, ref) => {\n const Comp = asChild ? Slot : 'button'\n const groupContext = useButtonGroup()\n\n // Use context values as fallback, individual props take precedence\n const variant = variantProp ?? groupContext?.variant ?? 'solid'\n const color = colorProp ?? 'default'\n const size = sizeProp ?? groupContext?.size\n const radius = radiusProp ?? groupContext?.radius\n const disabled = disabledProp ?? groupContext?.disabled\n\n // Priority: direct prop > ButtonGroup context > variant default (no class)\n const fontWeight = fontWeightProp ?? groupContext?.fontWeight\n\n // FontWeight class (overrides variant default)\n const fontWeightClass = fontWeight === 'normal' ? 'font-normal' : fontWeight === 'semibold' ? 'font-semibold' : ''\n\n // Icon size for button with text (5-step scale)\n // xs~sm: 14px, md~default~lg: 16px\n const iconSizeClass = {\n xs: 'icon-xs', // 14px\n sm: 'icon-xs', // 14px\n md: 'icon-sm', // 16px\n default: 'icon-sm', // 16px\n lg: 'icon-sm', // 16px\n icon: 'icon-md', // icon-only → 20px\n }[size || 'default']\n\n // Selected styles by variant (used in ButtonGroup)\n const selectedStyles = selected ? (\n variant === 'outline' ? 'bg-background-muted' :\n variant === 'ghost' ? 'font-semibold' : ''\n ) : ''\n\n const renderContent = (content: React.ReactNode) => loading ? (\n <>\n <svg\n className={cn(iconSizeClass, 'animate-spin')}\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n aria-hidden=\"true\"\n >\n <circle className=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" strokeWidth=\"4\" />\n <path className=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\" />\n </svg>\n <span>{content}</span>\n </>\n ) : (\n <>\n {leftIcon && <span className={cn(iconSizeClass, '[&>svg]:w-full [&>svg]:h-full')} aria-hidden=\"true\">{leftIcon}</span>}\n {content}\n {rightIcon && <span className={cn(iconSizeClass, '[&>svg]:w-full [&>svg]:h-full')} aria-hidden=\"true\">{rightIcon}</span>}\n </>\n )\n\n return (\n <Comp\n className={cn(buttonVariants({ variant, size, radius, fullWidth }), variant === 'solid' && solidColorMap[color], pressEffect !== false && 'active:scale-pressed', fontWeightClass, selectedStyles, className)}\n ref={ref}\n disabled={disabled || loading}\n aria-busy={loading || undefined}\n aria-pressed={selected || undefined}\n {...props}\n >\n {asChild ? renderInsideChild(children, renderContent) : renderContent(children)}\n </Comp>\n )\n }\n)\nButton.displayName = 'Button'\n\nexport { Button, buttonVariants }\n"],"mappings":"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","names":[]}