@jbpark/ui-kit 8.1.0 → 9.0.0

package/dist/Button.d.mts

@@ -1,15 +1,43 @@
-import { DeprecatedPresetColor, PresetColor } from "./lib/colors.mjs";
+import { Button as Button$1 } from "./core/button.mjs";
+import "./core/index.mjs";
+import { PresetColor } from "./lib/colors.mjs";
 import * as React$1 from "react";
 //#region src/components/atoms/button.d.ts
-type NativeButtonProps = React$1.ComponentProps<'button'> & {
-  asChild?: boolean;
-};
-interface Props extends Omit<NativeButtonProps, 'size' | 'variant' | 'type'> {
+declare const Core: typeof Button$1;
+/**
+ * shadcn's own `variant` words, accepted on top of this component's own
+ * vocabulary rather than replacing it. They are sugar in exactly the sense
+ * `type` is: each expands to a `(color, variant)` pair, so a snippet copied
+ * from the shadcn docs renders as the nearest thing on this library's scale
+ * instead of erroring.
+ *
+ * `link` is deliberately absent: it already exists as one of this component's
+ * own variants and already renders what shadcn's `link` renders, so mapping it
+ * would change `variant="link"`'s resolved colour from `default` to `primary`
+ * for existing callers.
+ */
+type ShadcnVariant = 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost';
+/**
+ * shadcn's `size` words. The `icon*` entries additionally force the icon-only
+ * (square, unpadded) treatment, which this component otherwise infers from
+ * `icon` being set with no children — without that, the shadcn idiom of
+ * passing the icon as *children* (`<Button size="icon"><Trash /></Button>`)
+ * would render a normal padded button.
+ */
+type ShadcnSize = 'default' | 'xs' | 'sm' | 'lg' | 'icon' | 'icon-xs' | 'icon-sm' | 'icon-lg';
+interface Props extends Omit<React$1.ComponentProps<typeof Core>, 'size' | 'variant' | 'type'> {
   icon?: React$1.ReactNode;
   block?: boolean;
   danger?: boolean;
   disabled?: boolean;
-  size?: 'small' | 'middle' | 'large';
+  /**
+   * Size on this library's antd-style scale. shadcn's words are accepted too
+   * and map onto that scale: `sm`/`xs` → `small`, `default` → `middle`,
+   * `lg` → `large`. There is no separate `xs` step here, so `xs` renders as
+   * `small`. The `icon*` entries pick the same sizes and additionally force
+   * the icon-only treatment.
+   */
+  size?: 'small' | 'middle' | 'large' | ShadcnSize;
   /**
    * Syntactic sugar for a `(color, variant)` pair. **Will follow `variant` and
    * `color` if provided** — `type` only fills in the axes you leave unset.
@@ -31,8 +59,19 @@ interface Props extends Omit<NativeButtonProps, 'size' | 'variant' | 'type'> {
   /**
    * Visual fill style, independent of `color`. Defaults to `'outlined'`.
    * Takes precedence over whatever `type` would have supplied.
+   *
+   * shadcn's words are accepted here as well and expand to a `(color, variant)`
+   * pair the same way `type` does — `destructive` ≡ `color="danger"
+   * variant="solid"`, `outline` ≡ `outlined`, `secondary` ≡ `filled`,
+   * `ghost` ≡ `text`, `default` ≡ `color="primary" variant="solid"`. An
+   * explicit `color` still wins over the one the word implies.
+   *
+   * ⚠️ `variant="default"` (shadcn: a filled primary button) and
+   * `type="default"` (antd: a plain outlined button) mean opposite things.
+   * They are different props, so nothing collides at runtime, but don't read
+   * one as the other.
    */
-  variant?: 'solid' | 'outlined' | 'dashed' | 'filled' | 'text' | 'link';
+  variant?: 'solid' | 'outlined' | 'dashed' | 'filled' | 'text' | 'link' | ShadcnVariant;
   /**
    * Native `<button>` `type` (`button`/`submit`/`reset`), kept separate
    * from the antd-style `type` above. Defaults to `'button'` so a Button
@@ -44,12 +83,9 @@ interface Props extends Omit<NativeButtonProps, 'size' | 'variant' | 'type'> {
    * Color, independent of `variant`. Defaults to `'default'`, or to whatever
    * `type` maps to when `type` is set. `danger` overrides this.
    *
-   * Preset hues use Tailwind's colour names (#342). The pre-8.0 spellings
-   * `magenta`/`geekblue`/`gold`/`volcano` still work and render unchanged, but
-   * are deprecated — use `fuchsia`/`indigo`/`amber` instead (`volcano` has no
-   * successor; it is `orange` one lightness step darker).
+   * Preset hues use Tailwind's colour names (#342).
    */
-  color?: PresetColor | DeprecatedPresetColor | 'default' | 'primary' | 'danger';
+  color?: PresetColor | 'default' | 'primary' | 'danger';
   loading?: boolean | {
     icon: React$1.ReactNode;
   };

package/dist/Button.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.mts","names":[],"sources":["../src/components/atoms/button.tsx"],"mappings":";;;KAaK,oBAAoB,QAAM;EAC7B;;UAGe,cAAc,KAC7B;EAGA,OAAO,QAAM;EACb;EACA;EACA;EACA;;;;;;;;;;;;;;;;;;EAkBA;;;;;EAKA;;;;;;EAMA;EACA;;;;;;;;;;EAUA,QACE,cAAc;EAChB;IAAsB,MAAM,QAAM;;;cAqF9B,WAAU,MAAA,WAAA,MAAA,SAAA,UAAA,MAAA,OAAA,OAAA,OAAA,UAAA,SAAA,QAAA,SAAA,UAAA,gBAAA,SAiBb,UAAK,QAAA,IAAA"}
+{"version":3,"file":"Button.d.mts","names":[],"sources":["../src/components/atoms/button.tsx"],"mappings":";;;;;cAaM,aAAI;;;;;;;;;;;;;KAcL;;;;;;;;KAUA;UAGY,cAAc,KAC7B,QAAM,sBAAsB;EAG5B,OAAO,QAAM;EACb;EACA;EACA;;;;;;;;EAQA,sCAAsC;;;;;;;;;;;;;;;;;;EAkBtC;;;;;;;;;;;;;;;;EAgBA,yEAOI;;;;;;EAMJ;EACA;;;;;;;EAOA,QAAQ;EACR;IAAsB,MAAM,QAAM;;;cAmH9B,WAAU,MAAA,WAAA,MAAA,SAAA,UAAA,MAAA,OAAA,OAAA,OAAA,UAAA,SAAA,QAAA,SAAA,UAAA,gBAAA,SAiBb,UAAK,QAAA,IAAA"}

package/dist/Button.mjs

@@ -1,14 +1,14 @@
 "use client";
 import { cn } from "./utils.mjs";
 import { useConfig } from "./providers/config/context.mjs";
-import { INTERACTIVE_CHASSIS } from "./lib/chassis.mjs";
+import { Button as Button$1 } from "./core/button.mjs";
 import "react";
-import { Slot } from "@radix-ui/react-slot";
+import { Slottable } from "@radix-ui/react-slot";
 import { LoaderCircle } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/atoms/button.tsx
-const BUTTON_CHASSIS = cn(INTERACTIVE_CHASSIS, "outline-none", "disabled:pointer-events-none disabled:opacity-50", "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4");
-const BUTTON_BASE = cn(BUTTON_CHASSIS, "gap-2 whitespace-nowrap font-medium transition-all", "has-[>svg]:px-3");
+const Core = Button$1;
+const BUTTON_BASE = cn("gap-2 whitespace-nowrap font-medium transition-all", "has-[>svg]:px-3");
 const variantClasses = {
 	solid: cn("bg-primary text-primary-foreground", "hover:bg-primary/90"),
 	outlined: cn("border border-[color-mix(in_oklch,var(--btn-border),transparent_50%)]", "bg-background text-foreground", "hover:bg-accent"),
@@ -46,6 +46,51 @@ const typeToColorVariant = {
 		variant: "link"
 	}
 };
+/**
+* shadcn's variant words → the `(color, variant)` pair each stands for here.
+* Same contract as `typeToColorVariant` above: the word only fills axes the
+* caller left unset, so an explicit `color` still wins over the implied one.
+*/
+const shadcnVariantToColorVariant = {
+	default: {
+		color: "primary",
+		variant: "solid"
+	},
+	destructive: {
+		color: "danger",
+		variant: "solid"
+	},
+	outline: {
+		color: "default",
+		variant: "outlined"
+	},
+	secondary: {
+		color: "default",
+		variant: "filled"
+	},
+	ghost: {
+		color: "default",
+		variant: "text"
+	}
+};
+/** shadcn's size words → this library's scale. */
+const shadcnSizeToSize = {
+	default: "middle",
+	xs: "small",
+	sm: "small",
+	lg: "large",
+	icon: "middle",
+	"icon-xs": "small",
+	"icon-sm": "small",
+	"icon-lg": "large"
+};
+/** The `size` words that also mean "render this icon-only". */
+const ICON_SIZES = /* @__PURE__ */ new Set([
+	"icon",
+	"icon-xs",
+	"icon-sm",
+	"icon-lg"
+]);
 const sizesClasses = {
 	small: "h-6 px-3 text-sm",
 	middle: "h-8 px-4 text-base",
@@ -64,18 +109,24 @@ const shapesClasses = {
 const Button = ({ icon, className, type, variant, htmlType = "button", size, color, shape, block = false, disabled, loading, danger, asChild = false, children, onMouseDown, ...props }) => {
 	const { componentSize, defaultProps } = useConfig();
 	const buttonDefaults = defaultProps?.button;
-	const resolvedSize = size ?? componentSize ?? "middle";
 	const resolvedShape = shape ?? buttonDefaults?.shape ?? "default";
-	const iconOnly = icon && !children;
+	const variantAlias = variant && variant in shadcnVariantToColorVariant ? shadcnVariantToColorVariant[variant] : void 0;
+	const ownVariant = variantAlias?.variant ?? variant;
+	const resolvedSize = (size && size in shadcnSizeToSize ? shadcnSizeToSize[size] : size) ?? componentSize ?? "middle";
+	const iconOnly = size != null && ICON_SIZES.has(size) || !!(icon && !children);
 	const typeDefaults = type ? typeToColorVariant[type] : void 0;
-	const resolvedVariant = variant ?? typeDefaults?.variant ?? buttonDefaults?.variant ?? "outlined";
-	const computedColor = danger ? "danger" : color ?? typeDefaults?.color ?? buttonDefaults?.color ?? "default";
+	const resolvedVariant = ownVariant ?? typeDefaults?.variant ?? buttonDefaults?.variant ?? "outlined";
+	const computedColor = danger ? "danger" : color ?? variantAlias?.color ?? typeDefaults?.color ?? buttonDefaults?.color ?? "default";
 	const colored = computedColor !== "default";
 	const isLoading = !!loading;
-	const Comp = asChild ? Slot : "button";
 	const displayIcon = loading ? typeof loading === "object" ? loading.icon : /* @__PURE__ */ jsx(LoaderCircle, { className: "animate-spin" }) : icon;
-	return /* @__PURE__ */ jsxs(Comp, {
+	return /* @__PURE__ */ jsxs(Core, {
+		variant: null,
+		size: null,
+		asChild,
 		"data-slot": "button",
+		"data-variant": resolvedVariant,
+		"data-size": resolvedSize,
 		className: cn(BUTTON_BASE, "inline-flex items-center justify-center gap-x-2", "rounded-lg", "cursor-pointer", "h-auto py-0", "transition-all", variantClasses[resolvedVariant], sizesClasses[resolvedSize], iconOnly && ["p-0", iconClasses[resolvedSize]], shapesClasses[resolvedShape], block && "w-full", colored && (resolvedVariant === "solid" ? [
 			"bg-(--btn-bg)",
 			"hover:bg-(--btn-bg-hover)",
@@ -91,7 +142,7 @@ const Button = ({ icon, className, type, variant, htmlType = "button", size, col
 			onMouseDown?.(e);
 		},
 		...props,
-		children: [displayIcon, children]
+		children: [displayIcon, /* @__PURE__ */ jsx(Slottable, { children })]
 	});
 };
 //#endregion

package/dist/Button.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Button.mjs","names":[],"sources":["../src/components/atoms/button.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport { Slot } from '@radix-ui/react-slot';\nimport { LoaderCircle } from 'lucide-react';\n\nimport { useConfig } from '@repo/ui/providers';\nimport { cn } from '@repo/ui/utils';\n\nimport { INTERACTIVE_CHASSIS } from '../../lib/chassis';\nimport { type DeprecatedPresetColor, type PresetColor } from '../../lib/colors';\n\ntype NativeButtonProps = React.ComponentProps<'button'> & {\n  asChild?: boolean;\n};\n\nexport interface Props extends Omit<\n  NativeButtonProps,\n  'size' | 'variant' | 'type'\n> {\n  icon?: React.ReactNode;\n  block?: boolean;\n  danger?: boolean;\n  disabled?: boolean;\n  size?: 'small' | 'middle' | 'large';\n  /**\n   * Syntactic sugar for a `(color, variant)` pair. **Will follow `variant` and\n   * `color` if provided** — `type` only fills in the axes you leave unset.\n   *\n   * | `type`    | equivalent to                          |\n   * | --------- | -------------------------------------- |\n   * | `primary` | `color=\"primary\" variant=\"solid\"`      |\n   * | `default` | `color=\"default\" variant=\"outlined\"`   |\n   * | `dashed`  | `color=\"default\" variant=\"dashed\"`     |\n   * | `text`    | `color=\"default\" variant=\"text\"`       |\n   * | `link`    | `color=\"primary\" variant=\"link\"`       |\n   *\n   * So `<Button type=\"primary\">` is the same as\n   * `<Button color=\"primary\" variant=\"solid\">`, and\n   * `<Button type=\"primary\" variant=\"filled\">` keeps the primary color but\n   * renders filled. `danger` still overrides the resolved color.\n   */\n  type?: 'primary' | 'default' | 'dashed' | 'text' | 'link';\n  /**\n   * Visual fill style, independent of `color`. Defaults to `'outlined'`.\n   * Takes precedence over whatever `type` would have supplied.\n   */\n  variant?: 'solid' | 'outlined' | 'dashed' | 'filled' | 'text' | 'link';\n  /**\n   * Native `<button>` `type` (`button`/`submit`/`reset`), kept separate\n   * from the antd-style `type` above. Defaults to `'button'` so a Button\n   * placed inside a `<form>` doesn't submit it unless explicitly opted in.\n   */\n  htmlType?: 'button' | 'submit' | 'reset';\n  shape?: 'default' | 'circle' | 'round';\n  /**\n   * Color, independent of `variant`. Defaults to `'default'`, or to whatever\n   * `type` maps to when `type` is set. `danger` overrides this.\n   *\n   * Preset hues use Tailwind's colour names (#342). The pre-8.0 spellings\n   * `magenta`/`geekblue`/`gold`/`volcano` still work and render unchanged, but\n   * are deprecated — use `fuchsia`/`indigo`/`amber` instead (`volcano` has no\n   * successor; it is `orange` one lightness step darker).\n   */\n  color?:\n    PresetColor | DeprecatedPresetColor | 'default' | 'primary' | 'danger';\n  loading?: boolean | { icon: React.ReactNode };\n}\n\n// Chassis absorbed from core/button's cva base (#278 ③ / #294 Phase 4). The\n// shared focus/aria set lives in INTERACTIVE_CHASSIS; a Button additionally\n// disables and sizes its icons. Kept as constants so the absorb relocates this\n// treatment rather than dropping it (the #177 class of silent regression the\n// #300/#301 net guards).\nconst BUTTON_CHASSIS = cn(\n  INTERACTIVE_CHASSIS,\n  'outline-none',\n  'disabled:pointer-events-none disabled:opacity-50',\n  \"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n);\n\n// Presentation the atom builds on. The size/variant/shape classes below still\n// override the incidental leftovers exactly as they did when this wrapped\n// core/button, so the rendered output is unchanged (verified against a\n// pre-refactor render matrix).\nconst BUTTON_BASE = cn(\n  BUTTON_CHASSIS,\n  'gap-2 whitespace-nowrap font-medium transition-all',\n  'has-[>svg]:px-3',\n);\n\nconst variantClasses: Record<string, string> = {\n  // solid used to inherit its fill from core/button's default variant; carry it\n  // explicitly now that the primitive is absorbed. A colored solid overrides\n  // this with the --btn-* custom properties further down.\n  solid: cn('bg-primary text-primary-foreground', 'hover:bg-primary/90'),\n  outlined: cn(\n    'border border-[color-mix(in_oklch,var(--btn-border),transparent_50%)]',\n    'bg-background text-foreground',\n    'hover:bg-accent',\n  ),\n  dashed: cn(\n    'border border-dashed border-[color-mix(in_oklch,var(--btn-border),transparent_50%)]',\n    'bg-background text-foreground',\n    'hover:bg-accent',\n  ),\n  filled: cn('bg-muted text-foreground', 'hover:bg-muted/80'),\n  text: cn('bg-transparent text-foreground', 'hover:bg-accent'),\n  link: cn(\n    'bg-transparent text-primary',\n    'underline-offset-4 hover:underline',\n    'hover:bg-primary/10',\n  ),\n};\n\n/**\n * antd-style syntactic sugar: each `type` expands to a `(color, variant)` pair.\n * Explicit `color`/`variant` props win over whatever the `type` maps to, so\n * `type` only fills in the axes the caller left unset.\n *\n * Mirrors antd: `<Button type=\"primary\">` ≡ `<Button color=\"primary\" variant=\"solid\">`.\n */\nconst typeToColorVariant: Record<\n  NonNullable<Props['type']>,\n  { color: NonNullable<Props['color']>; variant: NonNullable<Props['variant']> }\n> = {\n  primary: { color: 'primary', variant: 'solid' },\n  default: { color: 'default', variant: 'outlined' },\n  dashed: { color: 'default', variant: 'dashed' },\n  text: { color: 'default', variant: 'text' },\n  link: { color: 'primary', variant: 'link' },\n};\n\nconst sizesClasses: Record<string, string> = {\n  small: 'h-6 px-3 text-sm',\n  middle: 'h-8 px-4 text-base',\n  large: 'h-10 px-5 text-lg',\n};\n\nconst iconClasses: Record<string, string> = {\n  small: `size-6 [&_svg:not([class*='size-'])]:size-3`,\n  middle: `size-8 [&_svg:not([class*='size-'])]:size-4`,\n  large: `size-10 [&_svg:not([class*='size-'])]:size-5`,\n};\n\nconst shapesClasses = {\n  default: 'rounded-sm',\n  circle: 'rounded-full',\n  round: 'rounded-2xl',\n};\n\nconst Button = ({\n  icon,\n  className,\n  type,\n  variant,\n  htmlType = 'button',\n  size,\n  color,\n  shape,\n  block = false,\n  disabled,\n  loading,\n  danger,\n  asChild = false,\n  children,\n  onMouseDown,\n  ...props\n}: Props) => {\n  const { componentSize, defaultProps } = useConfig();\n  const buttonDefaults = defaultProps?.button as\n    Partial<Pick<Props, 'shape' | 'variant' | 'color'>> | undefined;\n  const resolvedSize = size ?? componentSize ?? 'middle';\n  const resolvedShape = shape ?? buttonDefaults?.shape ?? 'default';\n  const iconOnly = icon && !children;\n  // `type` is syntactic sugar that expands to a (color, variant) pair; explicit\n  // `color`/`variant` win over it, so `type` only fills the axes left unset.\n  // A `Config` default sits below the call-site `type` (which is more specific)\n  // but above the library built-in. `danger` still trumps everything, matching\n  // antd. Defaults live here rather than on the parameters so `type` gets a\n  // chance to supply them first.\n  const typeDefaults = type ? typeToColorVariant[type] : undefined;\n  const resolvedVariant =\n    variant ?? typeDefaults?.variant ?? buttonDefaults?.variant ?? 'outlined';\n  const computedColor = danger\n    ? 'danger'\n    : (color ?? typeDefaults?.color ?? buttonDefaults?.color ?? 'default');\n  const colored = computedColor !== 'default';\n  const isLoading = !!loading;\n\n  const Comp = asChild ? Slot : 'button';\n\n  const displayIcon = loading ? (\n    typeof loading === 'object' ? (\n      loading.icon\n    ) : (\n      <LoaderCircle className=\"animate-spin\" />\n    )\n  ) : (\n    icon\n  );\n\n  return (\n    <Comp\n      data-slot=\"button\"\n      className={cn(\n        BUTTON_BASE,\n        'inline-flex items-center justify-center gap-x-2',\n        'rounded-lg',\n        'cursor-pointer',\n        'h-auto py-0',\n        'transition-all',\n        variantClasses[resolvedVariant],\n        sizesClasses[resolvedSize],\n        iconOnly && ['p-0', iconClasses[resolvedSize]],\n        shapesClasses[resolvedShape],\n        block && 'w-full',\n        colored &&\n          (resolvedVariant === 'solid'\n            ? [\n                'bg-(--btn-bg)',\n                'hover:bg-(--btn-bg-hover)',\n                'active:bg-(--btn-bg-active)',\n                'text-(--btn-fg)',\n                'border-(--btn-border)',\n              ]\n            : [\n                'text-(--btn-bg)',\n                'border-[color-mix(in_oklch,var(--btn-border),transparent_50%)]',\n                //\n              ]),\n        className,\n        //\n      )}\n      type={htmlType}\n      disabled={disabled || isLoading}\n      aria-busy={isLoading}\n      data-color={computedColor}\n      onMouseDown={e => {\n        onMouseDown?.(e);\n      }}\n      {...props}\n    >\n      {displayIcon}\n      {children}\n    </Comp>\n  );\n};\n\nexport default Button;\n"],"mappings":";;;;;;;;;AA2EA,MAAM,iBAAiB,GACrB,qBACA,gBACA,oDACA,mFACF;AAMA,MAAM,cAAc,GAClB,gBACA,sDACA,iBACF;AAEA,MAAM,iBAAyC;CAI7C,OAAO,GAAG,sCAAsC,qBAAqB;CACrE,UAAU,GACR,yEACA,iCACA,iBACF;CACA,QAAQ,GACN,uFACA,iCACA,iBACF;CACA,QAAQ,GAAG,4BAA4B,mBAAmB;CAC1D,MAAM,GAAG,kCAAkC,iBAAiB;CAC5D,MAAM,GACJ,+BACA,sCACA,qBACF;AACF;;;;;;;;AASA,MAAM,qBAGF;CACF,SAAS;EAAE,OAAO;EAAW,SAAS;CAAQ;CAC9C,SAAS;EAAE,OAAO;EAAW,SAAS;CAAW;CACjD,QAAQ;EAAE,OAAO;EAAW,SAAS;CAAS;CAC9C,MAAM;EAAE,OAAO;EAAW,SAAS;CAAO;CAC1C,MAAM;EAAE,OAAO;EAAW,SAAS;CAAO;AAC5C;AAEA,MAAM,eAAuC;CAC3C,OAAO;CACP,QAAQ;CACR,OAAO;AACT;AAEA,MAAM,cAAsC;CAC1C,OAAO;CACP,QAAQ;CACR,OAAO;AACT;AAEA,MAAM,gBAAgB;CACpB,SAAS;CACT,QAAQ;CACR,OAAO;AACT;AAEA,MAAM,UAAU,EACd,MACA,WACA,MACA,SACA,WAAW,UACX,MACA,OACA,OACA,QAAQ,OACR,UACA,SACA,QACA,UAAU,OACV,UACA,aACA,GAAG,YACQ;CACX,MAAM,EAAE,eAAe,iBAAiB,UAAU;CAClD,MAAM,iBAAiB,cAAc;CAErC,MAAM,eAAe,QAAQ,iBAAiB;CAC9C,MAAM,gBAAgB,SAAS,gBAAgB,SAAS;CACxD,MAAM,WAAW,QAAQ,CAAC;CAO1B,MAAM,eAAe,OAAO,mBAAmB,QAAQ,KAAA;CACvD,MAAM,kBACJ,WAAW,cAAc,WAAW,gBAAgB,WAAW;CACjE,MAAM,gBAAgB,SAClB,WACC,SAAS,cAAc,SAAS,gBAAgB,SAAS;CAC9D,MAAM,UAAU,kBAAkB;CAClC,MAAM,YAAY,CAAC,CAAC;CAEpB,MAAM,OAAO,UAAU,OAAO;CAE9B,MAAM,cAAc,UAClB,OAAO,YAAY,WACjB,QAAQ,OAER,oBAAC,cAAD,EAAc,WAAU,eAAgB,CAAA,IAG1C;CAGF,OACE,qBAAC,MAAD;EACE,aAAU;EACV,WAAW,GACT,aACA,mDACA,cACA,kBACA,eACA,kBACA,eAAe,kBACf,aAAa,eACb,YAAY,CAAC,OAAO,YAAY,aAAa,GAC7C,cAAc,gBACd,SAAS,UACT,YACG,oBAAoB,UACjB;GACE;GACA;GACA;GACA;GACA;EACF,IACA,CACE,mBACA,gEAEF,IACN,SAEF;EACA,MAAM;EACN,UAAU,YAAY;EACtB,aAAW;EACX,cAAY;EACZ,cAAa,MAAK;GAChB,cAAc,CAAC;EACjB;EACA,GAAI;EAtCN,UAAA,CAwCG,aACA,QACG;;AAEV"}
+{"version":3,"file":"Button.mjs","names":["button.Button"],"sources":["../src/components/atoms/button.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport { Slottable } from '@radix-ui/react-slot';\nimport { LoaderCircle } from 'lucide-react';\n\nimport { useConfig } from '@repo/ui/providers';\nimport { cn } from '@repo/ui/utils';\n\nimport { button } from '../../core';\nimport { type PresetColor } from '../../lib/colors';\n\nconst Core = button.Button;\n\n/**\n * shadcn's own `variant` words, accepted on top of this component's own\n * vocabulary rather than replacing it. They are sugar in exactly the sense\n * `type` is: each expands to a `(color, variant)` pair, so a snippet copied\n * from the shadcn docs renders as the nearest thing on this library's scale\n * instead of erroring.\n *\n * `link` is deliberately absent: it already exists as one of this component's\n * own variants and already renders what shadcn's `link` renders, so mapping it\n * would change `variant=\"link\"`'s resolved colour from `default` to `primary`\n * for existing callers.\n */\ntype ShadcnVariant =\n  'default' | 'destructive' | 'outline' | 'secondary' | 'ghost';\n\n/**\n * shadcn's `size` words. The `icon*` entries additionally force the icon-only\n * (square, unpadded) treatment, which this component otherwise infers from\n * `icon` being set with no children — without that, the shadcn idiom of\n * passing the icon as *children* (`<Button size=\"icon\"><Trash /></Button>`)\n * would render a normal padded button.\n */\ntype ShadcnSize =\n  'default' | 'xs' | 'sm' | 'lg' | 'icon' | 'icon-xs' | 'icon-sm' | 'icon-lg';\n\nexport interface Props extends Omit<\n  React.ComponentProps<typeof Core>,\n  'size' | 'variant' | 'type'\n> {\n  icon?: React.ReactNode;\n  block?: boolean;\n  danger?: boolean;\n  disabled?: boolean;\n  /**\n   * Size on this library's antd-style scale. shadcn's words are accepted too\n   * and map onto that scale: `sm`/`xs` → `small`, `default` → `middle`,\n   * `lg` → `large`. There is no separate `xs` step here, so `xs` renders as\n   * `small`. The `icon*` entries pick the same sizes and additionally force\n   * the icon-only treatment.\n   */\n  size?: 'small' | 'middle' | 'large' | ShadcnSize;\n  /**\n   * Syntactic sugar for a `(color, variant)` pair. **Will follow `variant` and\n   * `color` if provided** — `type` only fills in the axes you leave unset.\n   *\n   * | `type`    | equivalent to                          |\n   * | --------- | -------------------------------------- |\n   * | `primary` | `color=\"primary\" variant=\"solid\"`      |\n   * | `default` | `color=\"default\" variant=\"outlined\"`   |\n   * | `dashed`  | `color=\"default\" variant=\"dashed\"`     |\n   * | `text`    | `color=\"default\" variant=\"text\"`       |\n   * | `link`    | `color=\"primary\" variant=\"link\"`       |\n   *\n   * So `<Button type=\"primary\">` is the same as\n   * `<Button color=\"primary\" variant=\"solid\">`, and\n   * `<Button type=\"primary\" variant=\"filled\">` keeps the primary color but\n   * renders filled. `danger` still overrides the resolved color.\n   */\n  type?: 'primary' | 'default' | 'dashed' | 'text' | 'link';\n  /**\n   * Visual fill style, independent of `color`. Defaults to `'outlined'`.\n   * Takes precedence over whatever `type` would have supplied.\n   *\n   * shadcn's words are accepted here as well and expand to a `(color, variant)`\n   * pair the same way `type` does — `destructive` ≡ `color=\"danger\"\n   * variant=\"solid\"`, `outline` ≡ `outlined`, `secondary` ≡ `filled`,\n   * `ghost` ≡ `text`, `default` ≡ `color=\"primary\" variant=\"solid\"`. An\n   * explicit `color` still wins over the one the word implies.\n   *\n   * ⚠️ `variant=\"default\"` (shadcn: a filled primary button) and\n   * `type=\"default\"` (antd: a plain outlined button) mean opposite things.\n   * They are different props, so nothing collides at runtime, but don't read\n   * one as the other.\n   */\n  variant?:\n    | 'solid'\n    | 'outlined'\n    | 'dashed'\n    | 'filled'\n    | 'text'\n    | 'link'\n    | ShadcnVariant;\n  /**\n   * Native `<button>` `type` (`button`/`submit`/`reset`), kept separate\n   * from the antd-style `type` above. Defaults to `'button'` so a Button\n   * placed inside a `<form>` doesn't submit it unless explicitly opted in.\n   */\n  htmlType?: 'button' | 'submit' | 'reset';\n  shape?: 'default' | 'circle' | 'round';\n  /**\n   * Color, independent of `variant`. Defaults to `'default'`, or to whatever\n   * `type` maps to when `type` is set. `danger` overrides this.\n   *\n   * Preset hues use Tailwind's colour names (#342).\n   */\n  color?: PresetColor | 'default' | 'primary' | 'danger';\n  loading?: boolean | { icon: React.ReactNode };\n}\n\n// Geometry, the focus/aria/disabled chassis and the svg sizing come from\n// `core/button` again (#278 ③ is reversed here — see the core membership rule\n// in CLAUDE.md). Unlike Tag, Button pins no core variant at all: it passes\n// `variant={null} size={null}`, which cva treats as \"skip this axis entirely\",\n// so the primitive contributes only its base string and the atom keeps full\n// ownership of every colour and size class below. That leaves nothing for the\n// `variant=\"…\"` smell check to flag.\n//\n// The base still carries `rounded-md` and `text-sm`; the `rounded-*` from\n// `shapesClasses` and the `text-*` from `sizesClasses` come later in the class\n// list and override them, exactly as they did when this was absorbed.\nconst BUTTON_BASE = cn(\n  'gap-2 whitespace-nowrap font-medium transition-all',\n  'has-[>svg]:px-3',\n);\n\nconst variantClasses: Record<string, string> = {\n  // solid used to inherit its fill from core/button's default variant; carry it\n  // explicitly now that the primitive is absorbed. A colored solid overrides\n  // this with the --btn-* custom properties further down.\n  solid: cn('bg-primary text-primary-foreground', 'hover:bg-primary/90'),\n  outlined: cn(\n    'border border-[color-mix(in_oklch,var(--btn-border),transparent_50%)]',\n    'bg-background text-foreground',\n    'hover:bg-accent',\n  ),\n  dashed: cn(\n    'border border-dashed border-[color-mix(in_oklch,var(--btn-border),transparent_50%)]',\n    'bg-background text-foreground',\n    'hover:bg-accent',\n  ),\n  filled: cn('bg-muted text-foreground', 'hover:bg-muted/80'),\n  text: cn('bg-transparent text-foreground', 'hover:bg-accent'),\n  link: cn(\n    'bg-transparent text-primary',\n    'underline-offset-4 hover:underline',\n    'hover:bg-primary/10',\n  ),\n};\n\n/**\n * antd-style syntactic sugar: each `type` expands to a `(color, variant)` pair.\n * Explicit `color`/`variant` props win over whatever the `type` maps to, so\n * `type` only fills in the axes the caller left unset.\n *\n * Mirrors antd: `<Button type=\"primary\">` ≡ `<Button color=\"primary\" variant=\"solid\">`.\n */\nconst typeToColorVariant: Record<\n  NonNullable<Props['type']>,\n  { color: NonNullable<Props['color']>; variant: NonNullable<Props['variant']> }\n> = {\n  primary: { color: 'primary', variant: 'solid' },\n  default: { color: 'default', variant: 'outlined' },\n  dashed: { color: 'default', variant: 'dashed' },\n  text: { color: 'default', variant: 'text' },\n  link: { color: 'primary', variant: 'link' },\n};\n\n/** The half of `variant` that is this component's own vocabulary. */\ntype OwnVariant = Exclude<NonNullable<Props['variant']>, ShadcnVariant>;\n\ntype OwnSize = 'small' | 'middle' | 'large';\n\n/**\n * shadcn's variant words → the `(color, variant)` pair each stands for here.\n * Same contract as `typeToColorVariant` above: the word only fills axes the\n * caller left unset, so an explicit `color` still wins over the implied one.\n */\nconst shadcnVariantToColorVariant: Record<\n  ShadcnVariant,\n  { color: NonNullable<Props['color']>; variant: OwnVariant }\n> = {\n  default: { color: 'primary', variant: 'solid' },\n  destructive: { color: 'danger', variant: 'solid' },\n  outline: { color: 'default', variant: 'outlined' },\n  secondary: { color: 'default', variant: 'filled' },\n  ghost: { color: 'default', variant: 'text' },\n};\n\n/** shadcn's size words → this library's scale. */\nconst shadcnSizeToSize: Record<ShadcnSize, OwnSize> = {\n  default: 'middle',\n  xs: 'small',\n  sm: 'small',\n  lg: 'large',\n  icon: 'middle',\n  'icon-xs': 'small',\n  'icon-sm': 'small',\n  'icon-lg': 'large',\n};\n\n/** The `size` words that also mean \"render this icon-only\". */\nconst ICON_SIZES = new Set<string>(['icon', 'icon-xs', 'icon-sm', 'icon-lg']);\n\nconst sizesClasses: Record<string, string> = {\n  small: 'h-6 px-3 text-sm',\n  middle: 'h-8 px-4 text-base',\n  large: 'h-10 px-5 text-lg',\n};\n\nconst iconClasses: Record<string, string> = {\n  small: `size-6 [&_svg:not([class*='size-'])]:size-3`,\n  middle: `size-8 [&_svg:not([class*='size-'])]:size-4`,\n  large: `size-10 [&_svg:not([class*='size-'])]:size-5`,\n};\n\nconst shapesClasses = {\n  default: 'rounded-sm',\n  circle: 'rounded-full',\n  round: 'rounded-2xl',\n};\n\nconst Button = ({\n  icon,\n  className,\n  type,\n  variant,\n  htmlType = 'button',\n  size,\n  color,\n  shape,\n  block = false,\n  disabled,\n  loading,\n  danger,\n  asChild = false,\n  children,\n  onMouseDown,\n  ...props\n}: Props) => {\n  const { componentSize, defaultProps } = useConfig();\n  const buttonDefaults = defaultProps?.button as\n    Partial<Pick<Props, 'shape' | 'variant' | 'color'>> | undefined;\n  const resolvedShape = shape ?? buttonDefaults?.shape ?? 'default';\n  // Both `variant` and `size` accept this library's own words *and* shadcn's.\n  // Translate the shadcn ones first so everything below reasons in one\n  // vocabulary; a word this library already owns (`link`, `text`, `small`, …)\n  // is passed through untouched.\n  const variantAlias =\n    variant && variant in shadcnVariantToColorVariant\n      ? shadcnVariantToColorVariant[variant as ShadcnVariant]\n      : undefined;\n  const ownVariant =\n    variantAlias?.variant ?? (variant as OwnVariant | undefined);\n  const ownSize =\n    size && size in shadcnSizeToSize\n      ? shadcnSizeToSize[size as ShadcnSize]\n      : (size as OwnSize | undefined);\n  const resolvedSize = ownSize ?? componentSize ?? 'middle';\n  // A shadcn `size=\"icon*\"` says \"icon-only\" explicitly; otherwise it is\n  // inferred from an `icon` with no children, which is how this component has\n  // always detected it.\n  const iconOnly =\n    (size != null && ICON_SIZES.has(size)) || !!(icon && !children);\n  // `type` is syntactic sugar that expands to a (color, variant) pair; explicit\n  // `color`/`variant` win over it, so `type` only fills the axes left unset.\n  // A shadcn `variant` word carries an implied colour and sits between the two:\n  // more specific than `type`, less than an explicit `color`.\n  // A `Config` default sits below the call-site `type` (which is more specific)\n  // but above the library built-in. `danger` still trumps everything, matching\n  // antd. Defaults live here rather than on the parameters so `type` gets a\n  // chance to supply them first.\n  const typeDefaults = type ? typeToColorVariant[type] : undefined;\n  const resolvedVariant =\n    ownVariant ??\n    typeDefaults?.variant ??\n    buttonDefaults?.variant ??\n    'outlined';\n  const computedColor = danger\n    ? 'danger'\n    : (color ??\n      variantAlias?.color ??\n      typeDefaults?.color ??\n      buttonDefaults?.color ??\n      'default');\n  const colored = computedColor !== 'default';\n  const isLoading = !!loading;\n\n  const displayIcon = loading ? (\n    typeof loading === 'object' ? (\n      loading.icon\n    ) : (\n      <LoaderCircle className=\"animate-spin\" />\n    )\n  ) : (\n    icon\n  );\n\n  return (\n    <Core\n      // cva skips an axis entirely when it is passed `null`, so the primitive\n      // contributes only its base string and this atom keeps ownership of\n      // every colour/size class.\n      variant={null}\n      size={null}\n      asChild={asChild}\n      data-slot=\"button\"\n      data-variant={resolvedVariant}\n      data-size={resolvedSize}\n      className={cn(\n        BUTTON_BASE,\n        'inline-flex items-center justify-center gap-x-2',\n        'rounded-lg',\n        'cursor-pointer',\n        'h-auto py-0',\n        'transition-all',\n        variantClasses[resolvedVariant],\n        sizesClasses[resolvedSize],\n        iconOnly && ['p-0', iconClasses[resolvedSize]],\n        shapesClasses[resolvedShape],\n        block && 'w-full',\n        colored &&\n          (resolvedVariant === 'solid'\n            ? [\n                'bg-(--btn-bg)',\n                'hover:bg-(--btn-bg-hover)',\n                'active:bg-(--btn-bg-active)',\n                'text-(--btn-fg)',\n                'border-(--btn-border)',\n              ]\n            : [\n                'text-(--btn-bg)',\n                'border-[color-mix(in_oklch,var(--btn-border),transparent_50%)]',\n                //\n              ]),\n        className,\n        //\n      )}\n      type={htmlType}\n      disabled={disabled || isLoading}\n      aria-busy={isLoading}\n      data-color={computedColor}\n      onMouseDown={e => {\n        onMouseDown?.(e);\n      }}\n      {...props}\n    >\n      {displayIcon}\n      {/*\n        A Button renders two children (the icon slot and the caller's content),\n        but Radix's Slot accepts multiple children only when exactly one is\n        marked `Slottable` — without this marker `asChild` threw\n        \"Slot failed to slot onto its children\" for *every* call, icon or not.\n        `Slottable` is a plain fragment when `asChild` is false, so the\n        non-asChild markup is unchanged.\n      */}\n      <Slottable>{children}</Slottable>\n    </Core>\n  );\n};\n\nexport default Button;\n"],"mappings":"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"}

package/dist/Tag.d.mts

@@ -1,10 +1,10 @@
-import { DeprecatedPresetColor, PresetColor } from "./lib/colors.mjs";
+import { Badge } from "./core/badge.mjs";
+import "./core/index.mjs";
+import { PresetColor } from "./lib/colors.mjs";
 import * as React$1 from "react";
 //#region src/components/atoms/tag.d.ts
-type NativeSpanProps = React$1.ComponentProps<'span'> & {
-  asChild?: boolean;
-};
-interface Props extends Omit<NativeSpanProps, 'variant' | 'color'> {
+declare const Core: typeof Badge;
+interface Props extends Omit<React$1.ComponentProps<typeof Core>, 'variant' | 'color'> {
   /**
    * Fill style, aligned with `Button`'s vocabulary (#320). The pre-7.0
    * `'default'` spelling was removed — use `'filled'`, which renders
@@ -20,14 +20,11 @@ interface Props extends Omit<NativeSpanProps, 'variant' | 'color'> {
    * `success`/`warning` have no `Button` counterpart on purpose: a Tag marks
    * state, which is why antd's Tag also carries them while its Button does not.
    *
-   * Preset hues use Tailwind's colour names (#342). The pre-8.0 spellings
-   * `magenta`/`geekblue`/`gold`/`volcano` still work and render unchanged, but
-   * are deprecated — use `fuchsia`/`indigo`/`amber` instead (`volcano` has no
-   * successor; it is `orange` one lightness step darker).
+   * Preset hues use Tailwind's colour names (#342).
    */
-  color?: 'default' | 'primary' | 'success' | 'warning' | 'danger' | PresetColor | DeprecatedPresetColor;
+  color?: 'default' | 'primary' | 'success' | 'warning' | 'danger' | PresetColor;
 }
-declare const Tag: ({ className, variant, color, asChild, children, ...props }: Props) => React$1.JSX.Element;
+declare const Tag: ({ className, variant, color, children, ...props }: Props) => React$1.JSX.Element;
 //#endregion
 export { Props, Tag as default };
 //# sourceMappingURL=Tag.d.mts.map

package/dist/Tag.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.d.mts","names":[],"sources":["../src/components/atoms/tag.tsx"],"mappings":";;;KAYK,kBAAkB,QAAM;EAC3B;;UAGe,cAAc,KAAK;;;;;;EAMlC;;;;;;;;;;;;;;;EAeA,mEAMI,cACA;;cA+BA,QAAO,WAAA,SAAA,OAAA,SAAA,aAAA,SAOV,UAAK,QAAA,IAAA"}
+{"version":3,"file":"Tag.d.mts","names":[],"sources":["../src/components/atoms/tag.tsx"],"mappings":";;;;;cAUM,aAAI;UAEO,cAAc,KAC7B,QAAM,sBAAsB;;;;;;EAQ5B;;;;;;;;;;;;EAYA,mEAC6D;;cA0BzD,QAAO,WAAA,SAAA,OAAA,aAAA,SAAmD,UAAK,QAAA,IAAA"}

package/dist/Tag.mjs

@@ -1,24 +1,25 @@
 "use client";
 import { cn } from "./utils.mjs";
 import { useConfig } from "./providers/config/context.mjs";
-import { INTERACTIVE_CHASSIS } from "./lib/chassis.mjs";
+import { Badge } from "./core/badge.mjs";
 import "react";
-import { Slot } from "@radix-ui/react-slot";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/atoms/tag.tsx
-const TAG_BASE = cn(INTERACTIVE_CHASSIS, "border w-fit whitespace-nowrap overflow-hidden", "text-xs font-medium gap-1 transition-[color,box-shadow]", "[&>svg]:size-3 [&>svg]:pointer-events-none", "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground");
+const Core = Badge;
+const CORE_VARIANT = "outline";
 const fillClasses = cn("border-transparent bg-(--tag-tint) text-(--tag-fg)");
 const outlinedClasses = cn("border-(--tag-bg) text-(--tag-fg)");
-const Tag = ({ className, variant, color, asChild = false, children, ...props }) => {
+const Tag = ({ className, variant, color, children, ...props }) => {
 	const { defaultProps } = useConfig();
 	const tagDefaults = defaultProps?.tag;
 	const resolvedVariant = variant ?? tagDefaults?.variant ?? "filled";
 	const resolvedColor = color ?? tagDefaults?.color ?? "default";
-	return /* @__PURE__ */ jsx(asChild ? Slot : "span", {
-		"data-slot": "badge",
+	return /* @__PURE__ */ jsx(Core, {
+		variant: CORE_VARIANT,
+		"data-slot": "tag",
 		"data-color": resolvedColor,
 		"data-variant": resolvedVariant,
-		className: cn(TAG_BASE, "rounded-full px-2.5 py-1", "text-xs font-medium", resolvedVariant === "outlined" ? outlinedClasses : fillClasses, className),
+		className: cn("rounded-full px-2.5 py-1", resolvedVariant === "outlined" ? outlinedClasses : fillClasses, className),
 		...props,
 		children
 	});

package/dist/Tag.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.mjs","names":[],"sources":["../src/components/atoms/tag.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport { Slot } from '@radix-ui/react-slot';\n\nimport { useConfig } from '@repo/ui/providers';\nimport { cn } from '@repo/ui/utils';\n\nimport { INTERACTIVE_CHASSIS } from '../../lib/chassis';\nimport { type DeprecatedPresetColor, type PresetColor } from '../../lib/colors';\n\ntype NativeSpanProps = React.ComponentProps<'span'> & {\n  asChild?: boolean;\n};\n\nexport interface Props extends Omit<NativeSpanProps, 'variant' | 'color'> {\n  /**\n   * Fill style, aligned with `Button`'s vocabulary (#320). The pre-7.0\n   * `'default'` spelling was removed — use `'filled'`, which renders\n   * identically.\n   */\n  variant?: 'filled' | 'outlined';\n  /**\n   * Colour. Every value — the semantic states (`primary`/`success`/`warning`/\n   * `danger`) as well as the palette shared with `Button` (`blue`, `red`,\n   * `amber`, …) — resolves through the same `data-color` + `--tag-*` system\n   * (#320), so any of them can be re-themed the same way.\n   *\n   * `success`/`warning` have no `Button` counterpart on purpose: a Tag marks\n   * state, which is why antd's Tag also carries them while its Button does not.\n   *\n   * Preset hues use Tailwind's colour names (#342). The pre-8.0 spellings\n   * `magenta`/`geekblue`/`gold`/`volcano` still work and render unchanged, but\n   * are deprecated — use `fuchsia`/`indigo`/`amber` instead (`volcano` has no\n   * successor; it is `orange` one lightness step darker).\n   */\n  color?:\n    | 'default'\n    | 'primary'\n    | 'success'\n    | 'warning'\n    | 'danger'\n    | PresetColor\n    | DeprecatedPresetColor;\n}\n\n// Base absorbed from core/badge's cva base + its `outline` variant, which Tag\n// always rendered as (#278 ③ / #294 Phase 4). The shared focus/aria/centering\n// set lives in INTERACTIVE_CHASSIS; a Tag adds badge geometry and its svg\n// sizing but — unlike Button — no `disabled:*` (a Tag is not disableable). The\n// rounded/padding leftovers are overridden by the atom classes below exactly as\n// before, so the rendered output is unchanged (verified against a pre-refactor\n// render matrix).\nconst TAG_BASE = cn(\n  INTERACTIVE_CHASSIS,\n  'border w-fit whitespace-nowrap overflow-hidden',\n  'text-xs font-medium gap-1 transition-[color,box-shadow]',\n  '[&>svg]:size-3 [&>svg]:pointer-events-none',\n  'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',\n);\n\n// Every colour — semantic states and shared presets alike — resolves from the\n// `--tag-*` custom properties that `globals.css` sets per `data-color` (#320).\n// Before 7.0 only the presets took this path while the states carried bespoke\n// Tailwind classes, which meant `[data-color]` hooks and `--tag-*` overrides\n// worked on some colours but silently not on others.\n//\n//   --tag-bg    the hue; the border in `outlined`\n//   --tag-fg    text colour (defaults to --tag-bg)\n//   --tag-tint  the fill behind `filled` (defaults to a 10% --tag-bg wash)\nconst fillClasses = cn('border-transparent bg-(--tag-tint) text-(--tag-fg)');\n\nconst outlinedClasses = cn('border-(--tag-bg) text-(--tag-fg)');\n\nconst Tag = ({\n  className,\n  variant,\n  color,\n  asChild = false,\n  children,\n  ...props\n}: Props) => {\n  const { defaultProps } = useConfig();\n  const tagDefaults = defaultProps?.tag as\n    Partial<Pick<Props, 'variant' | 'color'>> | undefined;\n  // An explicit prop wins over a `Config` default, which wins over the built-in\n  // — the same resolution order `Button` uses.\n  const resolvedVariant = variant ?? tagDefaults?.variant ?? 'filled';\n  const resolvedColor = color ?? tagDefaults?.color ?? 'default';\n  const isOutlined = resolvedVariant === 'outlined';\n  const Comp = asChild ? Slot : 'span';\n\n  return (\n    <Comp\n      data-slot=\"badge\"\n      // Emitted for every colour, not just the presets, so consumers can hook\n      // `[data-color]` / `[data-variant]` uniformly. `data-variant` is what\n      // lets `globals.css` give `default` a different text colour when\n      // outlined without reintroducing a second class path here.\n      data-color={resolvedColor}\n      data-variant={resolvedVariant}\n      className={cn(\n        TAG_BASE,\n        'rounded-full px-2.5 py-1',\n        'text-xs font-medium',\n        isOutlined ? outlinedClasses : fillClasses,\n        className,\n        //\n      )}\n      {...props}\n    >\n      {children}\n    </Comp>\n  );\n};\n\nexport default Tag;\n"],"mappings":";;;;;;;;AAsDA,MAAM,WAAW,GACf,qBACA,kDACA,2DACA,8CACA,wEACF;AAWA,MAAM,cAAc,GAAG,oDAAoD;AAE3E,MAAM,kBAAkB,GAAG,mCAAmC;AAE9D,MAAM,OAAO,EACX,WACA,SACA,OACA,UAAU,OACV,UACA,GAAG,YACQ;CACX,MAAM,EAAE,iBAAiB,UAAU;CACnC,MAAM,cAAc,cAAc;CAIlC,MAAM,kBAAkB,WAAW,aAAa,WAAW;CAC3D,MAAM,gBAAgB,SAAS,aAAa,SAAS;CAIrD,OACE,oBAHW,UAAU,OAAO,QAG5B;EACE,aAAU;EAKV,cAAY;EACZ,gBAAc;EACd,WAAW,GACT,UACA,4BACA,uBAfa,oBAAoB,aAgBpB,kBAAkB,aAC/B,SAEF;EACA,GAAI;EAEH;CACG,CAAA;AAEV"}
+{"version":3,"file":"Tag.mjs","names":["badge.Badge"],"sources":["../src/components/atoms/tag.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport { useConfig } from '@repo/ui/providers';\nimport { cn } from '@repo/ui/utils';\n\nimport { badge } from '../../core';\nimport { type PresetColor } from '../../lib/colors';\n\nconst Core = badge.Badge;\n\nexport interface Props extends Omit<\n  React.ComponentProps<typeof Core>,\n  'variant' | 'color'\n> {\n  /**\n   * Fill style, aligned with `Button`'s vocabulary (#320). The pre-7.0\n   * `'default'` spelling was removed — use `'filled'`, which renders\n   * identically.\n   */\n  variant?: 'filled' | 'outlined';\n  /**\n   * Colour. Every value — the semantic states (`primary`/`success`/`warning`/\n   * `danger`) as well as the palette shared with `Button` (`blue`, `red`,\n   * `amber`, …) — resolves through the same `data-color` + `--tag-*` system\n   * (#320), so any of them can be re-themed the same way.\n   *\n   * `success`/`warning` have no `Button` counterpart on purpose: a Tag marks\n   * state, which is why antd's Tag also carries them while its Button does not.\n   *\n   * Preset hues use Tailwind's colour names (#342).\n   */\n  color?:\n    'default' | 'primary' | 'success' | 'warning' | 'danger' | PresetColor;\n}\n\n// Geometry, the focus/aria chassis and the svg sizing all come from\n// `core/badge` now (#278 ③ is reversed here — see the core membership rule in\n// CLAUDE.md). Tag pins the core `outline` variant because it supplies exactly\n// the neutral base Tag wants — a border plus `text-foreground` and the `[a&]`\n// hover treatment — and then repaints border/text/fill from the `--tag-*`\n// custom properties below. Pinning one core variant is deliberate and is why\n// the membership rule had to change; the alternative (absorbing the primitive)\n// is what left `core/badge` orphaned and three upstream releases stale.\nconst CORE_VARIANT = 'outline';\n\n// Every colour — semantic states and shared presets alike — resolves from the\n// `--tag-*` custom properties that `globals.css` sets per `data-color` (#320).\n// Before 7.0 only the presets took this path while the states carried bespoke\n// Tailwind classes, which meant `[data-color]` hooks and `--tag-*` overrides\n// worked on some colours but silently not on others.\n//\n//   --tag-bg    the hue; the border in `outlined`\n//   --tag-fg    text colour (defaults to --tag-bg)\n//   --tag-tint  the fill behind `filled` (defaults to a 10% --tag-bg wash)\nconst fillClasses = cn('border-transparent bg-(--tag-tint) text-(--tag-fg)');\n\nconst outlinedClasses = cn('border-(--tag-bg) text-(--tag-fg)');\n\nconst Tag = ({ className, variant, color, children, ...props }: Props) => {\n  const { defaultProps } = useConfig();\n  const tagDefaults = defaultProps?.tag as\n    Partial<Pick<Props, 'variant' | 'color'>> | undefined;\n  // An explicit prop wins over a `Config` default, which wins over the built-in\n  // — the same resolution order `Button` uses.\n  const resolvedVariant = variant ?? tagDefaults?.variant ?? 'filled';\n  const resolvedColor = color ?? tagDefaults?.color ?? 'default';\n  const isOutlined = resolvedVariant === 'outlined';\n\n  return (\n    <Core\n      variant={CORE_VARIANT}\n      // Overrides the core primitive's own `data-slot=\"badge\"`. The slot now\n      // matches the public component name, which frees `badge` for the\n      // antd-style Badge (a count/dot decorator, a different component from\n      // this chip — shadcn's Badge is what antd calls a Tag).\n      data-slot=\"tag\"\n      // Emitted for every colour, not just the presets, so consumers can hook\n      // `[data-color]` / `[data-variant]` uniformly. `data-variant` is what\n      // lets `globals.css` give `default` a different text colour when\n      // outlined without reintroducing a second class path here; it also\n      // replaces the core primitive's own `data-variant`, which would\n      // otherwise report the pinned core variant rather than Tag's.\n      data-color={resolvedColor}\n      data-variant={resolvedVariant}\n      className={cn(\n        'rounded-full px-2.5 py-1',\n        isOutlined ? outlinedClasses : fillClasses,\n        className,\n        //\n      )}\n      {...props}\n    >\n      {children}\n    </Core>\n  );\n};\n\nexport default Tag;\n"],"mappings":";;;;;;;AAUA,MAAM,OAAOA;AAmCb,MAAM,eAAe;AAWrB,MAAM,cAAc,GAAG,oDAAoD;AAE3E,MAAM,kBAAkB,GAAG,mCAAmC;AAE9D,MAAM,OAAO,EAAE,WAAW,SAAS,OAAO,UAAU,GAAG,YAAmB;CACxE,MAAM,EAAE,iBAAiB,UAAU;CACnC,MAAM,cAAc,cAAc;CAIlC,MAAM,kBAAkB,WAAW,aAAa,WAAW;CAC3D,MAAM,gBAAgB,SAAS,aAAa,SAAS;CAGrD,OACE,oBAAC,MAAD;EACE,SAAS;EAKT,aAAU;EAOV,cAAY;EACZ,gBAAc;EACd,WAAW,GACT,4BAnBa,oBAAoB,aAoBpB,kBAAkB,aAC/B,SAEF;EACA,GAAI;EAEH;CACG,CAAA;AAEV"}

package/dist/components/atoms/date-picker.mjs

@@ -1,7 +1,7 @@
 "use client";
 import { cn } from "../../utils.mjs";
-import Button from "../../Button.mjs";
 import { calendar_exports } from "../../core/calendar.mjs";
+import Button from "../../Button.mjs";
 import Popover from "./popover.mjs";
 import { useState } from "react";
 import { CalendarIcon } from "lucide-react";

package/dist/components/atoms/float-button/float-button.mjs

@@ -1,6 +1,6 @@
 import { cn } from "../../../utils.mjs";
-import Button from "../../../Button.mjs";
 import { OVERLAY_LAYER } from "../../../lib/z-layers.mjs";
+import Button from "../../../Button.mjs";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/atoms/float-button/float-button.tsx
 const FloatButton = ({ className, children, ...props }) => {

package/dist/components/atoms/input/search.mjs

@@ -1,8 +1,8 @@
 "use client";
 import { cn } from "../../../utils.mjs";
 import { DEFAULT_LOCALE, useConfig } from "../../../providers/config/context.mjs";
-import Button from "../../../Button.mjs";
 import { input_exports } from "../../../core/input.mjs";
+import Button from "../../../Button.mjs";
 import { useRef, useState } from "react";
 import { CircleX, Search } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/components/atoms/radio/group.mjs

@@ -1,7 +1,7 @@
 "use client";
 import { cn } from "../../../utils.mjs";
-import Button from "../../../Button.mjs";
 import { radio_group_exports } from "../../../core/radio-group.mjs";
+import Button from "../../../Button.mjs";
 import { normalizeOptions, warnOnDuplicateOptionValues } from "../option-group.mjs";
 import { RadioGroupContext } from "./context.mjs";
 import Radio from "./radio.mjs";

package/dist/components/atoms/radio/radio.d.mts

@@ -1,6 +1,6 @@
-import { OptionValue } from "../option-group.mjs";
 import { RadioGroup } from "../../../core/radio-group.mjs";
 import "../../../core/index.mjs";
+import { OptionValue } from "../option-group.mjs";
 //#region src/components/atoms/radio/radio.d.ts
 declare const Core: typeof RadioGroup;
 interface Props extends Omit<React.ComponentPropsWithoutRef<typeof Core>, 'onChange' | 'value'> {

package/dist/components/organisms/drawer.mjs

@@ -1,8 +1,8 @@
 "use client";
 import { cn } from "../../utils.mjs";
 import { DEFAULT_LOCALE, useConfig } from "../../providers/config/context.mjs";
-import Button from "../../Button.mjs";
 import { drawer_exports } from "../../core/drawer.mjs";
+import Button from "../../Button.mjs";
 import { useEffect } from "react";
 import { X } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/components/organisms/modal.d.mts

@@ -30,12 +30,11 @@ type ModalStatus = 'info' | 'success' | 'error' | 'warning';
 interface StaticProps extends Props {
   status?: ModalStatus;
   /**
-   * @deprecated Use `status` for the semantic state. Kept as an alias so
-   * existing `type="info|success|error|warning"` calls keep working. `confirm`
-   * is an interaction mode, not a status — call `Modal.confirm()` instead
-   * (still accepted here as `type="confirm"` for back-compat).
+   * Interaction mode set by `Modal.confirm()` to request the two-button
+   * footer. `confirm` is a mode, not a status, so it rides its own axis rather
+   * than `status` — call `Modal.confirm()` rather than setting this directly.
    */
-  type?: ModalStatus | 'confirm';
+  mode?: 'confirm';
   id?: string;
   icon?: React.ReactNode;
   container?: HTMLElement;

package/dist/components/organisms/modal.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"modal.d.mts","names":[],"sources":["../../../src/components/organisms/modal.tsx"],"mappings":";;UAiCiB;EACf;EACA;EACA;IAGM,YAAY,MAAM;IAClB;;EAEN,YAAY,MAAM;EAClB,QAAQ,MAAM;EACd,UAAU,MAAM;EAChB,SAAS,MAAM;EACf;EACA;IACE;IACA;IACA;IACA;;EAEF,QAAQ,MAAM;EACd;EACA;EACA,YAAY;EACZ,WAAW,MAAM;EACjB;EACA;;KAGG;UAEK,oBAAoB;EAC5B,SAAS;;;;;;;EAOT,OAAO;EACP;EACA,OAAO,MAAM;EACb,YAAY;;cAGR;KAkBH,MAAA,cAAA,UAAA,WAAA,WAAA,YAAA,OAAA,OAAA,SAAA,QAAA,WAAA,UAAA,QAAA,YAAA,MAAA,aAAA,SAAA,QAAK,MAAA,IAAA;;;EAwNa,KAAA,OAAA;EAEG,QAAA,OAAA;EAEF,MAAA,OAAA;EAEE,QAAA,OAAA;EAIA,QAAA,OAAA"}
+{"version":3,"file":"modal.d.mts","names":[],"sources":["../../../src/components/organisms/modal.tsx"],"mappings":";;UAiCiB;EACf;EACA;EACA;IAGM,YAAY,MAAM;IAClB;;EAEN,YAAY,MAAM;EAClB,QAAQ,MAAM;EACd,UAAU,MAAM;EAChB,SAAS,MAAM;EACf;EACA;IACE;IACA;IACA;IACA;;EAEF,QAAQ,MAAM;EACd;EACA;EACA,YAAY;EACZ,WAAW,MAAM;EACjB;EACA;;KAGG;UAEK,oBAAoB;EAC5B,SAAS;;;;;;EAMT;EACA;EACA,OAAO,MAAM;EACb,YAAY;;cAGR;KAkBH,MAAA,cAAA,UAAA,WAAA,WAAA,YAAA,OAAA,OAAA,SAAA,QAAA,WAAA,UAAA,QAAA,YAAA,MAAA,aAAA,SAAA,QAAK,MAAA,IAAA;;;EAqNa,KAAA,OAAA;EAEG,QAAA,OAAA;EAEF,MAAA,OAAA;EAEE,QAAA,OAAA;EAIA,QAAA,OAAA"}

package/dist/components/organisms/modal.mjs

@@ -1,8 +1,8 @@
 "use client";
 import { cn } from "../../utils.mjs";
 import { DEFAULT_LOCALE, useConfig } from "../../providers/config/context.mjs";
-import Button from "../../Button.mjs";
 import { dialog_exports } from "../../core/dialog.mjs";
+import Button from "../../Button.mjs";
 import { createImperativeStack, isBrowser } from "./imperative-stack.mjs";
 import { useState } from "react";
 import { Check, CircleQuestionMark, Info, OctagonAlert, OctagonX } from "lucide-react";
@@ -65,13 +65,12 @@ const STATIC_ICONS = {
 	warning: /* @__PURE__ */ jsx(OctagonAlert, { className: "text-yellow-400" }),
 	confirm: /* @__PURE__ */ jsx(CircleQuestionMark, {})
 };
-const StaticModal = ({ id, status, type, title, content, okText, cancelText, container, icon, onOk, onCancel, ...props }) => {
+const StaticModal = ({ id, status, mode, title, content, okText, cancelText, container, icon, onOk, onCancel, ...props }) => {
 	const { locale } = useConfig();
 	const [open, setOpen] = useState(true);
 	const resolvedOkText = okText ?? locale.ok ?? DEFAULT_LOCALE.ok;
 	const resolvedCancelText = cancelText ?? locale.cancel ?? DEFAULT_LOCALE.cancel;
-	const isConfirm = type === "confirm";
-	const resolvedStatus = status ?? (isConfirm ? void 0 : type);
+	const isConfirm = mode === "confirm";
 	const closeModal = (callback) => {
 		callback?.();
 		setOpen(false);
@@ -108,7 +107,7 @@ const StaticModal = ({ id, status, type, title, content, okText, cancelText, con
 		},
 		title: /* @__PURE__ */ jsxs("p", {
 			className: cn("text-center text-lg leading-normal whitespace-pre-wrap", "flex items-center justify-center gap-x-2"),
-			children: [icon || (isConfirm ? STATIC_ICONS.confirm : resolvedStatus && STATIC_ICONS[resolvedStatus]), title]
+			children: [icon || (isConfirm ? STATIC_ICONS.confirm : status && STATIC_ICONS[status]), title]
 		}),
 		container,
 		onCancel: () => closeModal(onCancel),
@@ -146,7 +145,7 @@ Modal.warning = (props) => modalStack.render({
 	...props
 });
 Modal.confirm = (props) => modalStack.render({
-	type: "confirm",
+	mode: "confirm",
 	...props
 });
 //#endregion

package/dist/components/organisms/modal.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"modal.mjs","names":["dialog"],"sources":["../../../src/components/organisms/modal.tsx"],"sourcesContent":["'use client';\n\nimport React, { useState } from 'react';\nimport { createPortal } from 'react-dom';\n\nimport {\n  Check,\n  CircleQuestionMark,\n  Info,\n  OctagonAlert,\n  OctagonX,\n} from 'lucide-react';\n\nimport { DEFAULT_LOCALE, useConfig } from '@repo/ui/providers';\nimport { cn } from '@repo/ui/utils';\n\nimport { dialog } from '../../core';\nimport Button from '../atoms/button';\nimport {\n  type ImperativeStack,\n  createImperativeStack,\n  isBrowser,\n} from './imperative-stack';\n\nconst {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n} = dialog;\n\nexport interface Props {\n  open?: boolean;\n  maskClosable?: boolean;\n  closable?:\n    | boolean\n    | {\n        closeIcon?: React.ReactNode;\n        disabled?: boolean;\n      };\n  closeIcon?: React.ReactNode;\n  title?: React.ReactNode;\n  content?: React.ReactNode;\n  footer?: React.ReactNode;\n  className?: string;\n  classNames?: {\n    mask?: string;\n    header?: string;\n    body?: string;\n    footer?: string;\n  };\n  style?: React.CSSProperties;\n  okText?: string;\n  cancelText?: string;\n  container?: HTMLElement;\n  children?: React.ReactNode;\n  onOk?: () => void;\n  onCancel?: () => void;\n}\n\ntype ModalStatus = 'info' | 'success' | 'error' | 'warning';\n\ninterface StaticProps extends Props {\n  status?: ModalStatus;\n  /**\n   * @deprecated Use `status` for the semantic state. Kept as an alias so\n   * existing `type=\"info|success|error|warning\"` calls keep working. `confirm`\n   * is an interaction mode, not a status — call `Modal.confirm()` instead\n   * (still accepted here as `type=\"confirm\"` for back-compat).\n   */\n  type?: ModalStatus | 'confirm';\n  id?: string;\n  icon?: React.ReactNode;\n  container?: HTMLElement;\n}\n\nconst Modal = ({\n  open = false,\n  maskClosable,\n  closable = false,\n  closeIcon,\n  className,\n  classNames,\n  style,\n  title,\n  content,\n  footer,\n  container,\n  children,\n  okText,\n  cancelText,\n  onOk,\n  onCancel,\n  ...props\n}: Props) => {\n  const { locale, defaultProps } = useConfig();\n  const modalDefaults = defaultProps?.modal as\n    Partial<Pick<Props, 'maskClosable'>> | undefined;\n  // Explicit prop > `Config` default > built-in, matching Button/Tag.\n  const resolvedMaskClosable =\n    maskClosable ?? modalDefaults?.maskClosable ?? false;\n\n  if (typeof window === 'undefined') {\n    return null;\n  }\n\n  return (\n    <Dialog\n      open={open}\n      onOpenChange={(open: boolean) => {\n        if (!open) {\n          onCancel?.();\n        }\n      }}\n      {...props}\n    >\n      <DialogContent\n        className={cn(\n          'rounded-lg p-4 max-sm:max-w-[80%]',\n          'border-none outline-none',\n          className,\n        )}\n        classNames={{\n          ...classNames,\n          mask: cn('bg-black/60', classNames?.mask),\n        }}\n        style={style}\n        closable={closable}\n        closeIcon={closeIcon}\n        container={container}\n        onPointerDownOutside={event => {\n          if (!resolvedMaskClosable) {\n            event.preventDefault();\n          }\n        }}\n      >\n        {/**\n         * @todo [Dialog & AlertDialog] fix: can't get id correctly in shadow dom\n         * @see https://github.com/radix-ui/primitives/pull/3384\n         **/}\n        <DialogHeader\n          className={cn(\n            classNames?.header,\n            !title && 'hidden',\n            //\n          )}\n        >\n          <DialogTitle>{title}</DialogTitle>\n          <DialogDescription className=\"hidden\" />\n        </DialogHeader>\n        <div className={cn('break-all', classNames?.body)}>\n          {children ?? content}\n        </div>\n        {footer !== null && (\n          <DialogFooter\n            className={cn('flex-row justify-end gap-x-2', classNames?.footer)}\n          >\n            {footer || (\n              <>\n                <Button onClick={onOk}>\n                  {okText ?? locale.ok ?? DEFAULT_LOCALE.ok}\n                </Button>\n                <Button variant=\"outlined\" onClick={onCancel}>\n                  {cancelText ?? locale.cancel ?? DEFAULT_LOCALE.cancel}\n                </Button>\n              </>\n            )}\n          </DialogFooter>\n        )}\n      </DialogContent>\n    </Dialog>\n  );\n};\n\nconst STATIC_ICONS = {\n  info: <Info className=\"text-blue-400\" />,\n  success: <Check className=\"text-green-400\" />,\n  error: <OctagonX className=\"text-red-400\" />,\n  warning: <OctagonAlert className=\"text-yellow-400\" />,\n  confirm: <CircleQuestionMark />,\n};\n\nconst StaticModal = ({\n  id,\n  status,\n  type,\n  title,\n  content,\n  okText,\n  cancelText,\n  container,\n  icon,\n  onOk,\n  onCancel,\n  ...props\n}: StaticProps & { id: string }): React.ReactPortal | null => {\n  const { locale } = useConfig();\n  const [open, setOpen] = useState(true);\n  const resolvedOkText = okText ?? locale.ok ?? DEFAULT_LOCALE.ok;\n  const resolvedCancelText =\n    cancelText ?? locale.cancel ?? DEFAULT_LOCALE.cancel;\n  // `confirm` is an interaction mode (two-button footer), not a status. The\n  // semantic state comes from `status`, with `type` as its deprecated alias.\n  const isConfirm = type === 'confirm';\n  const resolvedStatus = status ?? (isConfirm ? undefined : type);\n\n  const closeModal = (callback?: () => void) => {\n    callback?.();\n    setOpen(false);\n    setTimeout(() => {\n      modalStack.destroy(id);\n    }, 200);\n  };\n\n  const footer = isConfirm ? (\n    <div className=\"grid w-full grid-cols-5 gap-x-2\">\n      <Button\n        variant=\"outlined\"\n        className=\"col-span-2\"\n        onClick={() => closeModal(onCancel)}\n      >\n        {resolvedCancelText}\n      </Button>\n      <Button className=\"col-span-3\" onClick={() => closeModal(onOk)}>\n        {resolvedOkText}\n      </Button>\n    </div>\n  ) : (\n    <Button\n      className={cn(\n        'grow',\n        //\n      )}\n      onClick={() => closeModal(onOk)}\n    >\n      {resolvedOkText}\n    </Button>\n  );\n\n  if (!isBrowser) {\n    return null;\n  }\n\n  return createPortal(\n    <Modal\n      open={open}\n      footer={footer}\n      className={cn(\n        'z-10000',\n        'box-content w-100',\n        'rounded-3xl p-4',\n        'gap-y-0',\n      )}\n      classNames={{\n        mask: 'z-10000 bg-black/[.6]',\n        body: cn(\n          'text-black-70 whitespace-pre-wrap text-center',\n          content && 'mt-3',\n        ),\n        footer: 'mt-9',\n      }}\n      title={\n        <p\n          className={cn(\n            'text-center text-lg leading-normal whitespace-pre-wrap',\n            'flex items-center justify-center gap-x-2',\n            //\n          )}\n        >\n          {icon ||\n            (isConfirm\n              ? STATIC_ICONS.confirm\n              : resolvedStatus && STATIC_ICONS[resolvedStatus])}\n          {title}\n        </p>\n      }\n      container={container}\n      onCancel={() => closeModal(onCancel)}\n      {...props}\n    >\n      {content}\n    </Modal>,\n    modalStack.getRootElement(container)!,\n  );\n};\n\n// No `role`/`aria-modal` here — this element is only a mount point for the\n// imperative stack, not the dialog itself. Radix already renders its own\n// `role=\"dialog\"`/`aria-modal=\"true\"` on the actual `DialogContent` via\n// portal once a modal is open. Setting it here as well would (a) leave\n// `aria-modal=\"true\"` on the page permanently, even with zero modals open,\n// hiding the rest of the document from screen readers, and (b) duplicate\n// Radix's own dialog role once one is open.\nconst modalStack: ImperativeStack<StaticProps> =\n  createImperativeStack<StaticProps>({\n    createRootElement: () => {\n      const el = document.createElement('div');\n      el.style.zIndex = '10000';\n      el.style.position = 'absolute';\n      return el;\n    },\n    StackItem: StaticModal,\n  });\n\nModal.destroy = modalStack.destroy;\n\nModal.destroyAll = () => {\n  modalStack.destroy();\n};\n\nModal.info = (props: StaticProps) =>\n  modalStack.render({ status: 'info', ...props });\nModal.success = (props: StaticProps) =>\n  modalStack.render({ status: 'success', ...props });\nModal.error = (props: StaticProps) =>\n  modalStack.render({ status: 'error', ...props });\nModal.warning = (props: StaticProps) =>\n  modalStack.render({ status: 'warning', ...props });\n// `confirm` is a mode, not a status, so it rides the `type` axis (the only\n// place it lives) rather than `status`.\nModal.confirm = (props: StaticProps) =>\n  modalStack.render({ type: 'confirm', ...props });\n\nexport default Modal;\n"],"mappings":"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"}
+{"version":3,"file":"modal.mjs","names":["dialog"],"sources":["../../../src/components/organisms/modal.tsx"],"sourcesContent":["'use client';\n\nimport React, { useState } from 'react';\nimport { createPortal } from 'react-dom';\n\nimport {\n  Check,\n  CircleQuestionMark,\n  Info,\n  OctagonAlert,\n  OctagonX,\n} from 'lucide-react';\n\nimport { DEFAULT_LOCALE, useConfig } from '@repo/ui/providers';\nimport { cn } from '@repo/ui/utils';\n\nimport { dialog } from '../../core';\nimport Button from '../atoms/button';\nimport {\n  type ImperativeStack,\n  createImperativeStack,\n  isBrowser,\n} from './imperative-stack';\n\nconst {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n} = dialog;\n\nexport interface Props {\n  open?: boolean;\n  maskClosable?: boolean;\n  closable?:\n    | boolean\n    | {\n        closeIcon?: React.ReactNode;\n        disabled?: boolean;\n      };\n  closeIcon?: React.ReactNode;\n  title?: React.ReactNode;\n  content?: React.ReactNode;\n  footer?: React.ReactNode;\n  className?: string;\n  classNames?: {\n    mask?: string;\n    header?: string;\n    body?: string;\n    footer?: string;\n  };\n  style?: React.CSSProperties;\n  okText?: string;\n  cancelText?: string;\n  container?: HTMLElement;\n  children?: React.ReactNode;\n  onOk?: () => void;\n  onCancel?: () => void;\n}\n\ntype ModalStatus = 'info' | 'success' | 'error' | 'warning';\n\ninterface StaticProps extends Props {\n  status?: ModalStatus;\n  /**\n   * Interaction mode set by `Modal.confirm()` to request the two-button\n   * footer. `confirm` is a mode, not a status, so it rides its own axis rather\n   * than `status` — call `Modal.confirm()` rather than setting this directly.\n   */\n  mode?: 'confirm';\n  id?: string;\n  icon?: React.ReactNode;\n  container?: HTMLElement;\n}\n\nconst Modal = ({\n  open = false,\n  maskClosable,\n  closable = false,\n  closeIcon,\n  className,\n  classNames,\n  style,\n  title,\n  content,\n  footer,\n  container,\n  children,\n  okText,\n  cancelText,\n  onOk,\n  onCancel,\n  ...props\n}: Props) => {\n  const { locale, defaultProps } = useConfig();\n  const modalDefaults = defaultProps?.modal as\n    Partial<Pick<Props, 'maskClosable'>> | undefined;\n  // Explicit prop > `Config` default > built-in, matching Button/Tag.\n  const resolvedMaskClosable =\n    maskClosable ?? modalDefaults?.maskClosable ?? false;\n\n  if (typeof window === 'undefined') {\n    return null;\n  }\n\n  return (\n    <Dialog\n      open={open}\n      onOpenChange={(open: boolean) => {\n        if (!open) {\n          onCancel?.();\n        }\n      }}\n      {...props}\n    >\n      <DialogContent\n        className={cn(\n          'rounded-lg p-4 max-sm:max-w-[80%]',\n          'border-none outline-none',\n          className,\n        )}\n        classNames={{\n          ...classNames,\n          mask: cn('bg-black/60', classNames?.mask),\n        }}\n        style={style}\n        closable={closable}\n        closeIcon={closeIcon}\n        container={container}\n        onPointerDownOutside={event => {\n          if (!resolvedMaskClosable) {\n            event.preventDefault();\n          }\n        }}\n      >\n        {/**\n         * @todo [Dialog & AlertDialog] fix: can't get id correctly in shadow dom\n         * @see https://github.com/radix-ui/primitives/pull/3384\n         **/}\n        <DialogHeader\n          className={cn(\n            classNames?.header,\n            !title && 'hidden',\n            //\n          )}\n        >\n          <DialogTitle>{title}</DialogTitle>\n          <DialogDescription className=\"hidden\" />\n        </DialogHeader>\n        <div className={cn('break-all', classNames?.body)}>\n          {children ?? content}\n        </div>\n        {footer !== null && (\n          <DialogFooter\n            className={cn('flex-row justify-end gap-x-2', classNames?.footer)}\n          >\n            {footer || (\n              <>\n                <Button onClick={onOk}>\n                  {okText ?? locale.ok ?? DEFAULT_LOCALE.ok}\n                </Button>\n                <Button variant=\"outlined\" onClick={onCancel}>\n                  {cancelText ?? locale.cancel ?? DEFAULT_LOCALE.cancel}\n                </Button>\n              </>\n            )}\n          </DialogFooter>\n        )}\n      </DialogContent>\n    </Dialog>\n  );\n};\n\nconst STATIC_ICONS = {\n  info: <Info className=\"text-blue-400\" />,\n  success: <Check className=\"text-green-400\" />,\n  error: <OctagonX className=\"text-red-400\" />,\n  warning: <OctagonAlert className=\"text-yellow-400\" />,\n  confirm: <CircleQuestionMark />,\n};\n\nconst StaticModal = ({\n  id,\n  status,\n  mode,\n  title,\n  content,\n  okText,\n  cancelText,\n  container,\n  icon,\n  onOk,\n  onCancel,\n  ...props\n}: StaticProps & { id: string }): React.ReactPortal | null => {\n  const { locale } = useConfig();\n  const [open, setOpen] = useState(true);\n  const resolvedOkText = okText ?? locale.ok ?? DEFAULT_LOCALE.ok;\n  const resolvedCancelText =\n    cancelText ?? locale.cancel ?? DEFAULT_LOCALE.cancel;\n  // `confirm` is an interaction mode (two-button footer), not a status; the\n  // semantic state comes from `status`.\n  const isConfirm = mode === 'confirm';\n\n  const closeModal = (callback?: () => void) => {\n    callback?.();\n    setOpen(false);\n    setTimeout(() => {\n      modalStack.destroy(id);\n    }, 200);\n  };\n\n  const footer = isConfirm ? (\n    <div className=\"grid w-full grid-cols-5 gap-x-2\">\n      <Button\n        variant=\"outlined\"\n        className=\"col-span-2\"\n        onClick={() => closeModal(onCancel)}\n      >\n        {resolvedCancelText}\n      </Button>\n      <Button className=\"col-span-3\" onClick={() => closeModal(onOk)}>\n        {resolvedOkText}\n      </Button>\n    </div>\n  ) : (\n    <Button\n      className={cn(\n        'grow',\n        //\n      )}\n      onClick={() => closeModal(onOk)}\n    >\n      {resolvedOkText}\n    </Button>\n  );\n\n  if (!isBrowser) {\n    return null;\n  }\n\n  return createPortal(\n    <Modal\n      open={open}\n      footer={footer}\n      className={cn(\n        'z-10000',\n        'box-content w-100',\n        'rounded-3xl p-4',\n        'gap-y-0',\n      )}\n      classNames={{\n        mask: 'z-10000 bg-black/[.6]',\n        body: cn(\n          'text-black-70 whitespace-pre-wrap text-center',\n          content && 'mt-3',\n        ),\n        footer: 'mt-9',\n      }}\n      title={\n        <p\n          className={cn(\n            'text-center text-lg leading-normal whitespace-pre-wrap',\n            'flex items-center justify-center gap-x-2',\n            //\n          )}\n        >\n          {icon ||\n            (isConfirm ? STATIC_ICONS.confirm : status && STATIC_ICONS[status])}\n          {title}\n        </p>\n      }\n      container={container}\n      onCancel={() => closeModal(onCancel)}\n      {...props}\n    >\n      {content}\n    </Modal>,\n    modalStack.getRootElement(container)!,\n  );\n};\n\n// No `role`/`aria-modal` here — this element is only a mount point for the\n// imperative stack, not the dialog itself. Radix already renders its own\n// `role=\"dialog\"`/`aria-modal=\"true\"` on the actual `DialogContent` via\n// portal once a modal is open. Setting it here as well would (a) leave\n// `aria-modal=\"true\"` on the page permanently, even with zero modals open,\n// hiding the rest of the document from screen readers, and (b) duplicate\n// Radix's own dialog role once one is open.\nconst modalStack: ImperativeStack<StaticProps> =\n  createImperativeStack<StaticProps>({\n    createRootElement: () => {\n      const el = document.createElement('div');\n      el.style.zIndex = '10000';\n      el.style.position = 'absolute';\n      return el;\n    },\n    StackItem: StaticModal,\n  });\n\nModal.destroy = modalStack.destroy;\n\nModal.destroyAll = () => {\n  modalStack.destroy();\n};\n\nModal.info = (props: StaticProps) =>\n  modalStack.render({ status: 'info', ...props });\nModal.success = (props: StaticProps) =>\n  modalStack.render({ status: 'success', ...props });\nModal.error = (props: StaticProps) =>\n  modalStack.render({ status: 'error', ...props });\nModal.warning = (props: StaticProps) =>\n  modalStack.render({ status: 'warning', ...props });\n// `confirm` is a mode, not a status, so it rides its own `mode` axis rather\n// than `status`.\nModal.confirm = (props: StaticProps) =>\n  modalStack.render({ mode: 'confirm', ...props });\n\nexport default Modal;\n"],"mappings":"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"}

package/dist/components/organisms/toast.d.mts

@@ -2,12 +2,6 @@
 type ToastStatus = 'info' | 'success' | 'error' | 'warning';
 interface Props {
   status?: ToastStatus;
-  /**
-   * @deprecated Use `status`. Kept as an alias so existing
-   * `type="info|success|error|warning"` usage keeps working; `status` matches
-   * the shared semantic-state vocabulary used by `Result`.
-   */
-  type?: ToastStatus;
   title: React.ReactNode;
   description?: React.ReactNode;
   icon?: React.ReactNode;
@@ -22,7 +16,7 @@ interface StaticProps extends Props {
   container?: HTMLElement;
 }
 declare const Toast: {
-  ({ status, type, title, description, icon, closable, action, className, onClose }: Props): import("react").JSX.Element;
+  ({ status, title, description, icon, closable, action, className, onClose }: Props): import("react").JSX.Element;
   destroy: (id?: string) => void;
   destroyAll(): void;
   info(title: React.ReactNode, props?: TriggerOptions): string | undefined;
@@ -30,7 +24,7 @@ declare const Toast: {
   error(title: React.ReactNode, props?: TriggerOptions): string | undefined;
   warning(title: React.ReactNode, props?: TriggerOptions): string | undefined;
 };
-type TriggerOptions = Omit<StaticProps, 'status' | 'type' | 'title'>;
+type TriggerOptions = Omit<StaticProps, 'status' | 'title'>;
 //#endregion
 export { Props, type StaticProps as ToastOptions, Toast as default };
 //# sourceMappingURL=toast.d.mts.map

package/dist/components/organisms/toast.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"toast.d.mts","names":[],"sources":["../../../src/components/organisms/toast.tsx"],"mappings":";KAkBK;UAEY;EACf,SAAS;;;;;;EAMT,OAAO;EACP,OAAO,MAAM;EACb,cAAc,MAAM;EACpB,OAAO,MAAM;EACb;EACA,SAAS,MAAM;EACf;EACA;;UAGQ,oBAAoB;EAC5B;EACA;EACA,YAAY;;cAUR;KAUH,QAAA,MAAA,OAAA,aAAA,MAAA,UAAA,QAAA,WAAA,WAAA,wBAAK,IAAA;;;EAsHa,KAAA,OAAA,MAAM,WAAS,QAAU;EAEtB,QAAA,OAAA,MAAM,WAAS,QAAU;EAE3B,MAAA,OAAA,MAAM,WAAS,QAAU;EAEvB,QAAA,OAAA,MAAM,WAAS,QAAU;;KAR5C,iBAAiB,KAAK"}
+{"version":3,"file":"toast.d.mts","names":[],"sources":["../../../src/components/organisms/toast.tsx"],"mappings":";KAkBK;UAEY;EACf,SAAS;EACT,OAAO,MAAM;EACb,cAAc,MAAM;EACpB,OAAO,MAAM;EACb;EACA,SAAS,MAAM;EACf;EACA;;UAGQ,oBAAoB;EAC5B;EACA;EACA,YAAY;;cAUR;KASH,QAAA,OAAA,aAAA,MAAA,UAAA,QAAA,WAAA,WAAA,wBAAK,IAAA;;;EAoHa,KAAA,OAAA,MAAM,WAAS,QAAU;EAEtB,QAAA,OAAA,MAAM,WAAS,QAAU;EAE3B,MAAA,OAAA,MAAM,WAAS,QAAU;EAEvB,QAAA,OAAA,MAAM,WAAS,QAAU;;KAR5C,iBAAiB,KAAK"}

package/dist/components/organisms/toast.mjs

@@ -15,16 +15,15 @@ const STATUS_ICONS = {
 	error: /* @__PURE__ */ jsx(OctagonX, { className: "text-red-400" }),
 	warning: /* @__PURE__ */ jsx(OctagonAlert, { className: "text-yellow-400" })
 };
-const Toast = ({ status, type, title, description, icon, closable = true, action, className, onClose }) => {
+const Toast = ({ status, title, description, icon, closable = true, action, className, onClose }) => {
 	const { locale } = useConfig();
-	const resolvedStatus = status ?? type;
 	return /* @__PURE__ */ jsxs("div", {
-		role: resolvedStatus === "error" ? "alert" : "status",
+		role: status === "error" ? "alert" : "status",
 		className: cn("pointer-events-auto flex w-80 items-start gap-3 rounded-lg", "bg-background text-foreground border p-4 shadow-lg", className),
 		children: [
-			(icon || resolvedStatus) && /* @__PURE__ */ jsx("div", {
+			(icon || status) && /* @__PURE__ */ jsx("div", {
 				className: "mt-0.5 shrink-0 [&_svg]:size-5",
-				children: icon || resolvedStatus && STATUS_ICONS[resolvedStatus]
+				children: icon || status && STATUS_ICONS[status]
 			}),
 			/* @__PURE__ */ jsxs("div", {
 				className: "flex-1 space-y-1",

package/dist/components/organisms/toast.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"toast.mjs","names":[],"sources":["../../../src/components/organisms/toast.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { useTimeout } from '@jbpark/use-hooks';\nimport { Check, Info, OctagonAlert, OctagonX, X } from 'lucide-react';\n\nimport { DEFAULT_LOCALE, useConfig } from '@repo/ui/providers';\nimport { cn } from '@repo/ui/utils';\n\nimport Button from '../atoms/button';\nimport {\n  type ImperativeStack,\n  createImperativeStack,\n  isBrowser,\n} from './imperative-stack';\n\ntype ToastStatus = 'info' | 'success' | 'error' | 'warning';\n\nexport interface Props {\n  status?: ToastStatus;\n  /**\n   * @deprecated Use `status`. Kept as an alias so existing\n   * `type=\"info|success|error|warning\"` usage keeps working; `status` matches\n   * the shared semantic-state vocabulary used by `Result`.\n   */\n  type?: ToastStatus;\n  title: React.ReactNode;\n  description?: React.ReactNode;\n  icon?: React.ReactNode;\n  closable?: boolean;\n  action?: React.ReactNode;\n  className?: string;\n  onClose?: () => void;\n}\n\ninterface StaticProps extends Props {\n  id?: string;\n  duration?: number;\n  container?: HTMLElement;\n}\n\nconst STATUS_ICONS: Record<ToastStatus, React.ReactNode> = {\n  info: <Info className=\"text-blue-400\" />,\n  success: <Check className=\"text-green-400\" />,\n  error: <OctagonX className=\"text-red-400\" />,\n  warning: <OctagonAlert className=\"text-yellow-400\" />,\n};\n\nconst Toast = ({\n  status,\n  type,\n  title,\n  description,\n  icon,\n  closable = true,\n  action,\n  className,\n  onClose,\n}: Props) => {\n  const { locale } = useConfig();\n  // `type` is the deprecated alias for `status`; prefer `status` when both set.\n  const resolvedStatus = status ?? type;\n\n  return (\n    <div\n      role={resolvedStatus === 'error' ? 'alert' : 'status'}\n      className={cn(\n        'pointer-events-auto flex w-80 items-start gap-3 rounded-lg',\n        'bg-background text-foreground border p-4 shadow-lg',\n        className,\n        //\n      )}\n    >\n      {(icon || resolvedStatus) && (\n        <div className=\"mt-0.5 shrink-0 [&_svg]:size-5\">\n          {icon || (resolvedStatus && STATUS_ICONS[resolvedStatus])}\n        </div>\n      )}\n      <div className=\"flex-1 space-y-1\">\n        <p className=\"text-sm font-medium\">{title}</p>\n        {description && (\n          <p className=\"text-muted-foreground text-sm\">{description}</p>\n        )}\n        {action && <div className=\"pt-1\">{action}</div>}\n      </div>\n      {closable && (\n        <Button\n          variant=\"text\"\n          shape=\"circle\"\n          size=\"small\"\n          aria-label={locale.close ?? DEFAULT_LOCALE.close}\n          icon={<X />}\n          onClick={onClose}\n        />\n      )}\n    </div>\n  );\n};\n\nconst DEFAULT_DURATION = 4000;\n\nconst StaticToast = ({\n  id,\n  duration = DEFAULT_DURATION,\n  container,\n  onClose,\n  ...props\n}: StaticProps & { id: string }): React.ReactPortal | null => {\n  const [visible, setVisible] = useState(true);\n\n  const close = () => {\n    onClose?.();\n    setVisible(false);\n    setTimeout(() => {\n      toastStack.destroy(id);\n    }, 200);\n  };\n\n  const { reset, clear } = useTimeout(close, duration || null);\n\n  if (!isBrowser) {\n    return null;\n  }\n\n  return createPortal(\n    <div\n      className={cn(\n        'transition-all duration-200',\n        visible ? 'opacity-100' : 'translate-x-2 opacity-0',\n      )}\n      // Without this, a toast with a closable/action button (or one the\n      // user is mid-read on) could auto-dismiss itself out from under\n      // them — hovering or focusing anything inside pauses the timer,\n      // moving away restarts it from the full duration.\n      onMouseEnter={clear}\n      onMouseLeave={reset}\n      onFocus={clear}\n      onBlur={reset}\n    >\n      <Toast {...props} onClose={close} />\n    </div>,\n    toastStack.getRootElement(container)!,\n  );\n};\n\nconst toastStack: ImperativeStack<StaticProps> =\n  createImperativeStack<StaticProps>({\n    createRootElement: () => {\n      const el = document.createElement('div');\n      el.setAttribute('role', 'region');\n      // Plain DOM, created outside any React tree — no Config to read a\n      // locale override from until #226 gives the imperative stack a way\n      // to inherit one.\n      el.setAttribute('aria-label', 'Notifications');\n      el.style.zIndex = '10000';\n      el.style.position = 'fixed';\n      el.style.right = '0';\n      el.style.bottom = '0';\n      el.style.display = 'flex';\n      el.style.flexDirection = 'column-reverse';\n      el.style.gap = '8px';\n      el.style.padding = '16px';\n      el.style.pointerEvents = 'none';\n      return el;\n    },\n    StackItem: StaticToast,\n  });\n\nToast.destroy = toastStack.destroy;\n\nToast.destroyAll = () => {\n  toastStack.destroy();\n};\n\ntype TriggerOptions = Omit<StaticProps, 'status' | 'type' | 'title'>;\n\nToast.info = (title: React.ReactNode, props?: TriggerOptions) =>\n  toastStack.render({ status: 'info', title, ...props });\nToast.success = (title: React.ReactNode, props?: TriggerOptions) =>\n  toastStack.render({ status: 'success', title, ...props });\nToast.error = (title: React.ReactNode, props?: TriggerOptions) =>\n  toastStack.render({ status: 'error', title, ...props });\nToast.warning = (title: React.ReactNode, props?: TriggerOptions) =>\n  toastStack.render({ status: 'warning', title, ...props });\n\nexport default Toast;\nexport type { StaticProps as ToastOptions };\n"],"mappings":"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"}
+{"version":3,"file":"toast.mjs","names":[],"sources":["../../../src/components/organisms/toast.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { useTimeout } from '@jbpark/use-hooks';\nimport { Check, Info, OctagonAlert, OctagonX, X } from 'lucide-react';\n\nimport { DEFAULT_LOCALE, useConfig } from '@repo/ui/providers';\nimport { cn } from '@repo/ui/utils';\n\nimport Button from '../atoms/button';\nimport {\n  type ImperativeStack,\n  createImperativeStack,\n  isBrowser,\n} from './imperative-stack';\n\ntype ToastStatus = 'info' | 'success' | 'error' | 'warning';\n\nexport interface Props {\n  status?: ToastStatus;\n  title: React.ReactNode;\n  description?: React.ReactNode;\n  icon?: React.ReactNode;\n  closable?: boolean;\n  action?: React.ReactNode;\n  className?: string;\n  onClose?: () => void;\n}\n\ninterface StaticProps extends Props {\n  id?: string;\n  duration?: number;\n  container?: HTMLElement;\n}\n\nconst STATUS_ICONS: Record<ToastStatus, React.ReactNode> = {\n  info: <Info className=\"text-blue-400\" />,\n  success: <Check className=\"text-green-400\" />,\n  error: <OctagonX className=\"text-red-400\" />,\n  warning: <OctagonAlert className=\"text-yellow-400\" />,\n};\n\nconst Toast = ({\n  status,\n  title,\n  description,\n  icon,\n  closable = true,\n  action,\n  className,\n  onClose,\n}: Props) => {\n  const { locale } = useConfig();\n\n  return (\n    <div\n      role={status === 'error' ? 'alert' : 'status'}\n      className={cn(\n        'pointer-events-auto flex w-80 items-start gap-3 rounded-lg',\n        'bg-background text-foreground border p-4 shadow-lg',\n        className,\n        //\n      )}\n    >\n      {(icon || status) && (\n        <div className=\"mt-0.5 shrink-0 [&_svg]:size-5\">\n          {icon || (status && STATUS_ICONS[status])}\n        </div>\n      )}\n      <div className=\"flex-1 space-y-1\">\n        <p className=\"text-sm font-medium\">{title}</p>\n        {description && (\n          <p className=\"text-muted-foreground text-sm\">{description}</p>\n        )}\n        {action && <div className=\"pt-1\">{action}</div>}\n      </div>\n      {closable && (\n        <Button\n          variant=\"text\"\n          shape=\"circle\"\n          size=\"small\"\n          aria-label={locale.close ?? DEFAULT_LOCALE.close}\n          icon={<X />}\n          onClick={onClose}\n        />\n      )}\n    </div>\n  );\n};\n\nconst DEFAULT_DURATION = 4000;\n\nconst StaticToast = ({\n  id,\n  duration = DEFAULT_DURATION,\n  container,\n  onClose,\n  ...props\n}: StaticProps & { id: string }): React.ReactPortal | null => {\n  const [visible, setVisible] = useState(true);\n\n  const close = () => {\n    onClose?.();\n    setVisible(false);\n    setTimeout(() => {\n      toastStack.destroy(id);\n    }, 200);\n  };\n\n  const { reset, clear } = useTimeout(close, duration || null);\n\n  if (!isBrowser) {\n    return null;\n  }\n\n  return createPortal(\n    <div\n      className={cn(\n        'transition-all duration-200',\n        visible ? 'opacity-100' : 'translate-x-2 opacity-0',\n      )}\n      // Without this, a toast with a closable/action button (or one the\n      // user is mid-read on) could auto-dismiss itself out from under\n      // them — hovering or focusing anything inside pauses the timer,\n      // moving away restarts it from the full duration.\n      onMouseEnter={clear}\n      onMouseLeave={reset}\n      onFocus={clear}\n      onBlur={reset}\n    >\n      <Toast {...props} onClose={close} />\n    </div>,\n    toastStack.getRootElement(container)!,\n  );\n};\n\nconst toastStack: ImperativeStack<StaticProps> =\n  createImperativeStack<StaticProps>({\n    createRootElement: () => {\n      const el = document.createElement('div');\n      el.setAttribute('role', 'region');\n      // Plain DOM, created outside any React tree — no Config to read a\n      // locale override from until #226 gives the imperative stack a way\n      // to inherit one.\n      el.setAttribute('aria-label', 'Notifications');\n      el.style.zIndex = '10000';\n      el.style.position = 'fixed';\n      el.style.right = '0';\n      el.style.bottom = '0';\n      el.style.display = 'flex';\n      el.style.flexDirection = 'column-reverse';\n      el.style.gap = '8px';\n      el.style.padding = '16px';\n      el.style.pointerEvents = 'none';\n      return el;\n    },\n    StackItem: StaticToast,\n  });\n\nToast.destroy = toastStack.destroy;\n\nToast.destroyAll = () => {\n  toastStack.destroy();\n};\n\ntype TriggerOptions = Omit<StaticProps, 'status' | 'title'>;\n\nToast.info = (title: React.ReactNode, props?: TriggerOptions) =>\n  toastStack.render({ status: 'info', title, ...props });\nToast.success = (title: React.ReactNode, props?: TriggerOptions) =>\n  toastStack.render({ status: 'success', title, ...props });\nToast.error = (title: React.ReactNode, props?: TriggerOptions) =>\n  toastStack.render({ status: 'error', title, ...props });\nToast.warning = (title: React.ReactNode, props?: TriggerOptions) =>\n  toastStack.render({ status: 'warning', title, ...props });\n\nexport default Toast;\nexport type { StaticProps as ToastOptions };\n"],"mappings":";;;;;;;;;;;AAqCA,MAAM,eAAqD;CACzD,MAAM,oBAAC,MAAD,EAAM,WAAU,gBAAiB,CAAA;CACvC,SAAS,oBAAC,OAAD,EAAO,WAAU,iBAAkB,CAAA;CAC5C,OAAO,oBAAC,UAAD,EAAU,WAAU,eAAgB,CAAA;CAC3C,SAAS,oBAAC,cAAD,EAAc,WAAU,kBAAmB,CAAA;AACtD;AAEA,MAAM,SAAS,EACb,QACA,OACA,aACA,MACA,WAAW,MACX,QACA,WACA,cACW;CACX,MAAM,EAAE,WAAW,UAAU;CAE7B,OACE,qBAAC,OAAD;EACE,MAAM,WAAW,UAAU,UAAU;EACrC,WAAW,GACT,8DACA,sDACA,SAEF;EAPF,UAAA;IASI,QAAQ,WACR,oBAAC,OAAD;IAAK,WAAU;IACZ,UAAA,QAAS,UAAU,aAAa;GAC9B,CAAA;GAEP,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA;KACE,oBAAC,KAAD;MAAG,WAAU;MAAuB,UAAA;KAAS,CAAA;KAC5C,eACC,oBAAC,KAAD;MAAG,WAAU;MAAiC,UAAA;KAAe,CAAA;KAE9D,UAAU,oBAAC,OAAD;MAAK,WAAU;MAAQ,UAAA;KAAY,CAAA;IAC3C;;GACJ,YACC,oBAAC,QAAD;IACE,SAAQ;IACR,OAAM;IACN,MAAK;IACL,cAAY,OAAO,SAAS,eAAe;IAC3C,MAAM,oBAAC,GAAD,CAAI,CAAA;IACV,SAAS;GACV,CAAA;EAEA;;AAET;AAEA,MAAM,mBAAmB;AAEzB,MAAM,eAAe,EACnB,IACA,WAAW,kBACX,WACA,SACA,GAAG,YACyD;CAC5D,MAAM,CAAC,SAAS,cAAc,SAAS,IAAI;CAE3C,MAAM,cAAc;EAClB,UAAU;EACV,WAAW,KAAK;EAChB,iBAAiB;GACf,WAAW,QAAQ,EAAE;EACvB,GAAG,GAAG;CACR;CAEA,MAAM,EAAE,OAAO,UAAU,WAAW,OAAO,YAAY,IAAI;CAE3D,IAAI,CAAC,WACH,OAAO;CAGT,OAAO,aACL,oBAAC,OAAD;EACE,WAAW,GACT,+BACA,UAAU,gBAAgB,yBAC5B;EAKA,cAAc;EACd,cAAc;EACd,SAAS;EACT,QAAQ;EAER,UAAA,oBAAC,OAAD;GAAO,GAAI;GAAO,SAAS;EAAQ,CAAA;CAChC,CAAA,GACL,WAAW,eAAe,SAAS,CACrC;AACF;AAEA,MAAM,aACJ,sBAAmC;CACjC,yBAAyB;EACvB,MAAM,KAAK,SAAS,cAAc,KAAK;EACvC,GAAG,aAAa,QAAQ,QAAQ;EAIhC,GAAG,aAAa,cAAc,eAAe;EAC7C,GAAG,MAAM,SAAS;EAClB,GAAG,MAAM,WAAW;EACpB,GAAG,MAAM,QAAQ;EACjB,GAAG,MAAM,SAAS;EAClB,GAAG,MAAM,UAAU;EACnB,GAAG,MAAM,gBAAgB;EACzB,GAAG,MAAM,MAAM;EACf,GAAG,MAAM,UAAU;EACnB,GAAG,MAAM,gBAAgB;EACzB,OAAO;CACT;CACA,WAAW;AACb,CAAC;AAEH,MAAM,UAAU,WAAW;AAE3B,MAAM,mBAAmB;CACvB,WAAW,QAAQ;AACrB;AAIA,MAAM,QAAQ,OAAwB,UACpC,WAAW,OAAO;CAAE,QAAQ;CAAQ;CAAO,GAAG;AAAM,CAAC;AACvD,MAAM,WAAW,OAAwB,UACvC,WAAW,OAAO;CAAE,QAAQ;CAAW;CAAO,GAAG;AAAM,CAAC;AAC1D,MAAM,SAAS,OAAwB,UACrC,WAAW,OAAO;CAAE,QAAQ;CAAS;CAAO,GAAG;AAAM,CAAC;AACxD,MAAM,WAAW,OAAwB,UACvC,WAAW,OAAO;CAAE,QAAQ;CAAW;CAAO,GAAG;AAAM,CAAC"}

package/dist/core/badge.d.mts

@@ -1,2 +1,25 @@
-import "react";
-import "class-variance-authority";
+import * as React$1 from "react";
+import { VariantProps } from "class-variance-authority";
+//#region src/core/badge.d.ts
+/**
+ * Vendored from shadcn's `new-york-v4` badge registry entry.
+ *
+ * Two deliberate local adaptations, both of which must survive the next sync:
+ * - upstream imports `Slot` from the unified `radix-ui` package; this repo
+ *   installs the individual `@radix-ui/*` packages (13 of them) and has no
+ *   `radix-ui` dependency, so the import stays on `@radix-ui/react-slot`.
+ * - `cn` resolves through `@repo/ui/utils` rather than upstream's `cn` alias.
+ *
+ * Everything else is upstream verbatim, including the `rounded-full` /
+ * `border-transparent` base and the `ghost` / `link` variants.
+ */
+declare const badgeVariants: (props?: ({
+  variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type Props = React$1.ComponentProps<'span'> & VariantProps<typeof badgeVariants> & {
+  asChild?: boolean;
+};
+declare function Badge({ className, variant, asChild, ...props }: Props): React$1.JSX.Element;
+//#endregion
+export { Badge, type Props, badgeVariants };
+//# sourceMappingURL=badge.d.mts.map

package/dist/core/badge.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.d.mts","names":[],"sources":["../../src/core/badge.tsx"],"mappings":";;;;;;;;;;;;;;;cAmBM,gBAAa;;6CA0BlB;KAEI,QAAQ,QAAM,yBACjB,oBAAoB;EAClB;;iBAGK,QACP,WACA,SACA,YACG,SACF,QAAK,QAAA,IAAA"}

package/dist/core/badge.mjs

@@ -0,0 +1,47 @@
+import { cn } from "../utils.mjs";
+import "react";
+import { Slot } from "@radix-ui/react-slot";
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+//#region src/core/badge.tsx
+/**
+* Vendored from shadcn's `new-york-v4` badge registry entry.
+*
+* Two deliberate local adaptations, both of which must survive the next sync:
+* - upstream imports `Slot` from the unified `radix-ui` package; this repo
+*   installs the individual `@radix-ui/*` packages (13 of them) and has no
+*   `radix-ui` dependency, so the import stays on `@radix-ui/react-slot`.
+* - `cn` resolves through `@repo/ui/utils` rather than upstream's `cn` alias.
+*
+* Everything else is upstream verbatim, including the `rounded-full` /
+* `border-transparent` base and the `ghost` / `link` variants.
+*/
+const badgeVariants = cva(`inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden
+  rounded-full border border-transparent px-2 py-0.5 text-xs font-medium
+  whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring
+  focus-visible:ring-[3px] focus-visible:ring-ring/50
+  aria-invalid:border-destructive aria-invalid:ring-destructive/20
+  dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none
+  [&>svg]:size-3`, {
+	variants: { variant: {
+		default: "bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+		secondary: "bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+		destructive: "bg-destructive text-white focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40 [a&]:hover:bg-destructive/90",
+		outline: "border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+		ghost: "[a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+		link: "text-primary underline-offset-4 [a&]:hover:underline"
+	} },
+	defaultVariants: { variant: "default" }
+});
+function Badge({ className, variant = "default", asChild = false, ...props }) {
+	return /* @__PURE__ */ jsx(asChild ? Slot : "span", {
+		"data-slot": "badge",
+		"data-variant": variant,
+		className: cn(badgeVariants({ variant }), className),
+		...props
+	});
+}
+//#endregion
+export { Badge, badgeVariants };
+
+//# sourceMappingURL=badge.mjs.map

package/dist/core/badge.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.mjs","names":[],"sources":["../../src/core/badge.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Slot } from '@radix-ui/react-slot';\nimport { type VariantProps, cva } from 'class-variance-authority';\n\nimport { cn } from '@repo/ui/utils';\n\n/**\n * Vendored from shadcn's `new-york-v4` badge registry entry.\n *\n * Two deliberate local adaptations, both of which must survive the next sync:\n * - upstream imports `Slot` from the unified `radix-ui` package; this repo\n *   installs the individual `@radix-ui/*` packages (13 of them) and has no\n *   `radix-ui` dependency, so the import stays on `@radix-ui/react-slot`.\n * - `cn` resolves through `@repo/ui/utils` rather than upstream's `cn` alias.\n *\n * Everything else is upstream verbatim, including the `rounded-full` /\n * `border-transparent` base and the `ghost` / `link` variants.\n */\nconst badgeVariants = cva(\n  `inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden\n  rounded-full border border-transparent px-2 py-0.5 text-xs font-medium\n  whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring\n  focus-visible:ring-[3px] focus-visible:ring-ring/50\n  aria-invalid:border-destructive aria-invalid:ring-destructive/20\n  dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none\n  [&>svg]:size-3`,\n  {\n    variants: {\n      variant: {\n        default: 'bg-primary text-primary-foreground [a&]:hover:bg-primary/90',\n        secondary:\n          'bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90',\n        destructive:\n          'bg-destructive text-white focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40 [a&]:hover:bg-destructive/90',\n        outline:\n          'border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',\n        ghost: '[a&]:hover:bg-accent [a&]:hover:text-accent-foreground',\n        link: 'text-primary underline-offset-4 [a&]:hover:underline',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  },\n);\n\ntype Props = React.ComponentProps<'span'> &\n  VariantProps<typeof badgeVariants> & {\n    asChild?: boolean;\n  };\n\nfunction Badge({\n  className,\n  variant = 'default',\n  asChild = false,\n  ...props\n}: Props) {\n  const Comp = asChild ? Slot : 'span';\n\n  return (\n    <Comp\n      data-slot=\"badge\"\n      data-variant={variant}\n      className={cn(badgeVariants({ variant }), className)}\n      {...props}\n    />\n  );\n}\n\nexport { Badge, badgeVariants, type Props };\n"],"mappings":";;;;;;;;;;;;;;;;;;AAmBA,MAAM,gBAAgB,IACpB;;;;;;mBAOA;CACE,UAAU,EACR,SAAS;EACP,SAAS;EACT,WACE;EACF,aACE;EACF,SACE;EACF,OAAO;EACP,MAAM;CACR,EACF;CACA,iBAAiB,EACf,SAAS,UACX;AACF,CACF;AAOA,SAAS,MAAM,EACb,WACA,UAAU,WACV,UAAU,OACV,GAAG,SACK;CAGR,OACE,oBAHW,UAAU,OAAO,QAG5B;EACE,aAAU;EACV,gBAAc;EACd,WAAW,GAAG,cAAc,EAAE,QAAQ,CAAC,GAAG,SAAS;EACnD,GAAI;CACL,CAAA;AAEL"}

package/dist/core/button.d.mts

@@ -1,2 +1,14 @@
-import "react";
-import "class-variance-authority";
+import * as React$1 from "react";
+import { VariantProps } from "class-variance-authority";
+//#region src/core/button.d.ts
+declare const buttonVariants: (props?: ({
+  variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
+  size?: "icon" | "default" | "xs" | "sm" | "lg" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type Props = React$1.ComponentProps<'button'> & VariantProps<typeof buttonVariants> & {
+  asChild?: boolean;
+};
+declare function Button({ className, variant, size, asChild, ...props }: Props): React$1.JSX.Element;
+//#endregion
+export { Button, type Props, buttonVariants };
+//# sourceMappingURL=button.d.mts.map

package/dist/core/button.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.d.mts","names":[],"sources":["../../src/core/button.tsx"],"mappings":";;;cAOM,iBAAc;;;6CAgCnB;KAEI,QAAQ,QAAM,2BACjB,oBAAoB;EAClB;;iBAGK,SACP,WACA,SACA,MACA,YACG,SACF,QAAK,QAAA,IAAA"}

package/dist/core/dialog.mjs

@@ -2,8 +2,8 @@
 import { __exportAll } from "../_virtual/_rolldown/runtime.mjs";
 import { cn } from "../utils.mjs";
 import { useConfig } from "../providers/config/context.mjs";
-import Button from "../Button.mjs";
 import { OVERLAY_LAYER } from "../lib/z-layers.mjs";
+import Button from "../Button.mjs";
 import "react";
 import { XIcon } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/core/field.d.mts

@@ -1,2 +1,2 @@
 import "./label.mjs";
-import "class-variance-authority";
+import { VariantProps } from "class-variance-authority";

package/dist/lib/colors.d.mts

@@ -5,41 +5,16 @@
  * `data-color`), so the same word means the same hue on either component
  * (#320).
  *
- * The names track **Tailwind's own palette names** (#342). They always did
- * track Tailwind's *values* — every preset was a Tailwind hue, just spelled
- * with antd's vocabulary — so four of them said one thing and rendered
- * another: `magenta` rendered Tailwind's `fuchsia`, `geekblue` rendered
- * `indigo`, `gold` rendered `amber`. Aligning the spelling makes the name and
- * the value agree, and lets `globals.css` resolve each entry straight from the
- * matching `--color-*` theme variable instead of a hand-copied hex.
+ * The names track **Tailwind's own palette names** (#342): every preset is a
+ * Tailwind hue spelled the way Tailwind spells it, so the name and the value
+ * agree and `globals.css` can resolve each entry straight from the matching
+ * `--color-*` theme variable instead of a hand-copied hex. The pre-8.0 antd
+ * spellings were removed in 9.0.0.
  *
  * Keep this list in sync with the `[data-color='…']` rules there.
  */
 declare const PRESET_COLORS: readonly ["blue", "purple", "cyan", "green", "fuchsia", "pink", "red", "orange", "yellow", "indigo", "lime", "amber"];
 type PresetColor = (typeof PRESET_COLORS)[number];
-/**
- * Pre-8.0 spellings, still accepted and still rendering exactly what they
- * rendered before — they are aliases, not a behaviour change:
- *
- * | deprecated | renders           | canonical spelling            |
- * | ---------- | ----------------- | ----------------------------- |
- * | `magenta`  | `--color-fuchsia-500` | `fuchsia`                 |
- * | `geekblue` | `--color-indigo-500`  | `indigo`                  |
- * | `gold`     | `--color-amber-500`   | `amber`                   |
- * | `volcano`  | `--color-orange-600`  | *(none — see below)*      |
- *
- * `volcano` is the odd one out and has no canonical successor. Every other
- * preset is a distinct hue at Tailwind's `500` step, but `volcano` is
- * `orange-600` — the same hue as `orange`, one step darker. That makes it a
- * lightness variant masquerading as a hue, so it doesn't belong in a list
- * whose axis is "one entry per hue". It keeps rendering `orange-600` until the
- * next major; callers who want that exact shade can set `--btn-bg`/`--tag-bg`
- * directly.
- *
- * All four are removed in the next major.
- */
-declare const DEPRECATED_PRESET_COLORS: readonly ["magenta", "geekblue", "gold", "volcano"];
-type DeprecatedPresetColor = (typeof DEPRECATED_PRESET_COLORS)[number];
 //#endregion
-export { DEPRECATED_PRESET_COLORS, DeprecatedPresetColor, PRESET_COLORS, PresetColor };
+export { PRESET_COLORS, PresetColor };
 //# sourceMappingURL=colors.d.mts.map

package/dist/lib/colors.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"colors.d.mts","names":[],"sources":["../../src/lib/colors.ts"],"mappings":";;;;;;;;;;;;;;;;;cAgBa;KAeD,sBAAsB;;;;;;;;;;;;;;;;;;;;;;cAuBrB;KAOD,gCAAgC"}
+{"version":3,"file":"colors.d.mts","names":[],"sources":["../../src/lib/colors.ts"],"mappings":";;;;;;;;;;;;;;;cAca;KAeD,sBAAsB"}

package/dist/style.css

@@ -103,54 +103,42 @@
   }
 }
 @layer components {
-  :is([data-slot="button"], [data-slot="badge"])[data-color="blue"] {
+  :is([data-slot="button"], [data-slot="tag"])[data-color="blue"] {
     --preset-color: var(--color-blue-500);
   }
-  :is([data-slot="button"], [data-slot="badge"])[data-color="purple"] {
+  :is([data-slot="button"], [data-slot="tag"])[data-color="purple"] {
     --preset-color: var(--color-purple-500);
   }
-  :is([data-slot="button"], [data-slot="badge"])[data-color="cyan"] {
+  :is([data-slot="button"], [data-slot="tag"])[data-color="cyan"] {
     --preset-color: var(--color-cyan-500);
   }
-  :is([data-slot="button"], [data-slot="badge"])[data-color="green"] {
+  :is([data-slot="button"], [data-slot="tag"])[data-color="green"] {
     --preset-color: var(--color-green-500);
   }
-  :is([data-slot="button"], [data-slot="badge"])[data-color="fuchsia"] {
+  :is([data-slot="button"], [data-slot="tag"])[data-color="fuchsia"] {
     --preset-color: var(--color-fuchsia-500);
   }
-  :is([data-slot="button"], [data-slot="badge"])[data-color="pink"] {
+  :is([data-slot="button"], [data-slot="tag"])[data-color="pink"] {
     --preset-color: var(--color-pink-500);
   }
-  :is([data-slot="button"], [data-slot="badge"])[data-color="red"] {
+  :is([data-slot="button"], [data-slot="tag"])[data-color="red"] {
     --preset-color: var(--color-red-500);
   }
-  :is([data-slot="button"], [data-slot="badge"])[data-color="orange"] {
+  :is([data-slot="button"], [data-slot="tag"])[data-color="orange"] {
     --preset-color: var(--color-orange-500);
   }
-  :is([data-slot="button"], [data-slot="badge"])[data-color="yellow"] {
+  :is([data-slot="button"], [data-slot="tag"])[data-color="yellow"] {
     --preset-color: var(--color-yellow-500);
   }
-  :is([data-slot="button"], [data-slot="badge"])[data-color="indigo"] {
+  :is([data-slot="button"], [data-slot="tag"])[data-color="indigo"] {
     --preset-color: var(--color-indigo-500);
   }
-  :is([data-slot="button"], [data-slot="badge"])[data-color="lime"] {
+  :is([data-slot="button"], [data-slot="tag"])[data-color="lime"] {
     --preset-color: var(--color-lime-500);
   }
-  :is([data-slot="button"], [data-slot="badge"])[data-color="amber"] {
+  :is([data-slot="button"], [data-slot="tag"])[data-color="amber"] {
     --preset-color: var(--color-amber-500);
   }
-  :is([data-slot="button"], [data-slot="badge"])[data-color="magenta"] {
-    --preset-color: var(--color-fuchsia-500);
-  }
-  :is([data-slot="button"], [data-slot="badge"])[data-color="geekblue"] {
-    --preset-color: var(--color-indigo-500);
-  }
-  :is([data-slot="button"], [data-slot="badge"])[data-color="gold"] {
-    --preset-color: var(--color-amber-500);
-  }
-  :is([data-slot="button"], [data-slot="badge"])[data-color="volcano"] {
-    --preset-color: var(--color-orange-600);
-  }
   [data-slot="button"][data-color] {
     --btn-bg: var(--preset-color);
     --btn-fg: white;
@@ -164,7 +152,7 @@
       --btn-bg-active: color-mix(in oklch, var(--btn-bg), black 22%);
     }
   }
-  [data-slot="button"][data-color="yellow"], [data-slot="button"][data-color="lime"], [data-slot="button"][data-color="amber"], [data-slot="button"][data-color="gold"] {
+  [data-slot="button"][data-color="yellow"], [data-slot="button"][data-color="lime"], [data-slot="button"][data-color="amber"] {
     --btn-fg: black;
   }
   [data-slot="button"][data-color="default"] {
@@ -178,7 +166,7 @@
   [data-slot="button"][data-color="danger"] {
     --btn-bg: var(--destructive);
   }
-  [data-slot="badge"][data-color] {
+  [data-slot="tag"][data-color] {
     --tag-bg: var(--preset-color);
     --tag-fg: var(--tag-bg);
     --tag-tint: var(--tag-bg);
@@ -186,32 +174,32 @@
       --tag-tint: color-mix(in oklab, var(--tag-bg), transparent 90%);
     }
   }
-  [data-slot="badge"][data-color="default"] {
+  [data-slot="tag"][data-color="default"] {
     --tag-bg: var(--border);
     --tag-tint: var(--muted);
     --tag-fg: var(--muted-foreground);
   }
-  [data-slot="badge"][data-color="default"][data-variant="outlined"] {
+  [data-slot="tag"][data-color="default"][data-variant="outlined"] {
     --tag-fg: var(--foreground);
   }
-  [data-slot="badge"][data-color="primary"] {
+  [data-slot="tag"][data-color="primary"] {
     --tag-bg: var(--primary);
   }
-  [data-slot="badge"][data-color="danger"] {
+  [data-slot="tag"][data-color="danger"] {
     --tag-bg: var(--destructive);
   }
-  [data-slot="badge"][data-color="success"] {
+  [data-slot="tag"][data-color="success"] {
     --tag-bg: var(--color-green-500);
     --tag-fg: var(--color-green-600);
   }
-  [data-slot="badge"][data-color="warning"] {
+  [data-slot="tag"][data-color="warning"] {
     --tag-bg: var(--color-yellow-500);
     --tag-fg: var(--color-yellow-600);
   }
-  :is(.dark, [data-theme="dark"]) [data-slot="badge"][data-color="success"] {
+  :is(.dark, [data-theme="dark"]) [data-slot="tag"][data-color="success"] {
     --tag-fg: var(--color-green-400);
   }
-  :is(.dark, [data-theme="dark"]) [data-slot="badge"][data-color="warning"] {
+  :is(.dark, [data-theme="dark"]) [data-slot="tag"][data-color="warning"] {
     --tag-fg: var(--color-yellow-400);
   }
   [data-slot="col"] {
@@ -3034,6 +3022,9 @@
     a.\[a\&\]\:hover\:text-accent-foreground:hover {
       color: var(--accent-foreground);
     }
+    a.\[a\&\]\:hover\:underline:hover {
+      text-decoration-line: underline;
+    }
   }
 }
 :root {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbpark/ui-kit",
-  "version": "8.1.0",
+  "version": "9.0.0",
   "description": "Modern React UI component library built with TypeScript, Tailwind CSS, and Radix UI. Featuring atoms, molecules, organisms and layout templates for building beautiful interfaces.",
   "keywords": [
     "react",

package/dist/lib/chassis.mjs

@@ -1,23 +0,0 @@
-import { cn } from "../utils.mjs";
-//#region src/lib/chassis.ts
-/**
-* Shared a11y/state chassis for interactive single-element atoms (Button, Tag).
-*
-* Extracted from `core/button` and `core/badge`'s cva base strings during the
-* #278 step ③ absorb (see #294 Phase 4). When an atom stops wrapping its core
-* primitive it must carry this chassis itself — the focus ring, the
-* `aria-invalid` treatment and the flex centering are load-bearing and have no
-* type- or lint-level signal, so dropping them regresses silently (the #177
-* class of bug the regression net in #300/#301 guards).
-*
-* Common set only. A Tag is not disableable, does not size icons and (as a
-* non-focusable `span`) carries no `outline-none`, so those live on the Button
-* extension in `atoms/button`, NOT here — folding them into one shared constant
-* would push `disabled:*` onto Tag, which is semantically wrong (#301's
-* per-component chassis finding).
-*/
-const INTERACTIVE_CHASSIS = cn("inline-flex items-center justify-center shrink-0", "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]", "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive");
-//#endregion
-export { INTERACTIVE_CHASSIS };
-
-//# sourceMappingURL=chassis.mjs.map

package/dist/lib/chassis.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"chassis.mjs","names":[],"sources":["../../src/lib/chassis.ts"],"sourcesContent":["import { cn } from '@repo/ui/utils';\n\n/**\n * Shared a11y/state chassis for interactive single-element atoms (Button, Tag).\n *\n * Extracted from `core/button` and `core/badge`'s cva base strings during the\n * #278 step ③ absorb (see #294 Phase 4). When an atom stops wrapping its core\n * primitive it must carry this chassis itself — the focus ring, the\n * `aria-invalid` treatment and the flex centering are load-bearing and have no\n * type- or lint-level signal, so dropping them regresses silently (the #177\n * class of bug the regression net in #300/#301 guards).\n *\n * Common set only. A Tag is not disableable, does not size icons and (as a\n * non-focusable `span`) carries no `outline-none`, so those live on the Button\n * extension in `atoms/button`, NOT here — folding them into one shared constant\n * would push `disabled:*` onto Tag, which is semantically wrong (#301's\n * per-component chassis finding).\n */\nexport const INTERACTIVE_CHASSIS = cn(\n  'inline-flex items-center justify-center shrink-0',\n  'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',\n  'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;AAkBA,MAAa,sBAAsB,GACjC,oDACA,iFACA,wGACF"}