@jbpark/ui-kit 5.4.6 → 5.4.7

package/dist/Button.d.mts

@@ -1,10 +1,11 @@
-import { Props as Props$1 } from "./core/button.mjs";
-import "./core.mjs";
+import * as React$1 from "react";
 //#region src/components/atoms/button.d.ts
-type ButtonProps = Props$1;
+type NativeButtonProps = React$1.ComponentProps<'button'> & {
+  asChild?: boolean;
+};
 type PresetColors = 'blue' | 'purple' | 'cyan' | 'green' | 'magenta' | 'pink' | 'red' | 'orange' | 'yellow' | 'volcano' | 'geekblue' | 'lime' | 'gold';
-interface Props extends Omit<ButtonProps, 'size' | 'variant' | 'type'> {
-  icon?: React.ReactNode;
+interface Props extends Omit<NativeButtonProps, 'size' | 'variant' | 'type'> {
+  icon?: React$1.ReactNode;
   block?: boolean;
   danger?: boolean;
   disabled?: boolean;
@@ -25,10 +26,10 @@ interface Props extends Omit<ButtonProps, 'size' | 'variant' | 'type'> {
   shape?: 'default' | 'circle' | 'round';
   color?: PresetColors | 'default' | 'primary' | 'danger';
   loading?: boolean | {
-    icon: React.ReactNode;
+    icon: React$1.ReactNode;
   };
 }
-declare const Button: ({ icon, className, type, variant, htmlType, size, color, shape, block, disabled, loading, danger, children, onMouseDown, ...props }: Props) => import("react").JSX.Element;
+declare const Button: ({ icon, className, type, variant, htmlType, size, color, shape, block, disabled, loading, danger, asChild, children, onMouseDown, ...props }: Props) => React$1.JSX.Element;
 //#endregion
 export { Props, Button as default };
 //# sourceMappingURL=Button.d.mts.map

package/dist/Button.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.mts","names":[],"sources":["../src/components/atoms/button.tsx"],"mappings":";;;KASK,cAAc;KAEd;UAeY,cAAc,KAAK;EAClC,OAAO,MAAM;EACb;EACA;EACA;EACA;;;;;;EAMA;EACA;;;;;;EAMA;EACA;EACA,QAAQ;EACR;IAAsB,MAAM,MAAM;;;cAkD9B,WAAU,MAAA,WAAA,MAAA,SAAA,UAAA,MAAA,OAAA,OAAA,OAAA,UAAA,SAAA,QAAA,UAAA,gBAAA,SAgBb,0BAAK,IAAA"}
+{"version":3,"file":"Button.d.mts","names":[],"sources":["../src/components/atoms/button.tsx"],"mappings":";;KAYK,oBAAoB,QAAM;EAC7B;;KAGG;UAeY,cAAc,KAC7B;EAGA,OAAO,QAAM;EACb;EACA;EACA;EACA;;;;;;EAMA;EACA;;;;;;EAMA;EACA;EACA,QAAQ;EACR;IAAsB,MAAM,QAAM;;;cA2E9B,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,13 +1,16 @@
 "use client";
 import { cn } from "./utils.mjs";
-import { Button as Button$1 } from "./core/button.mjs";
 import { useConfig } from "./providers/config/context.mjs";
+import { INTERACTIVE_CHASSIS } from "./lib/chassis.mjs";
+import "react";
+import { Slot } from "@radix-ui/react-slot";
 import { LoaderCircle } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/atoms/button.tsx
-const Core = Button$1;
+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 variantClasses = {
-	solid: "",
+	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"),
 	dashed: cn("border border-dashed border-[color-mix(in_oklch,var(--btn-border),transparent_50%)]", "bg-background text-foreground", "hover:bg-accent"),
 	filled: cn("bg-muted text-foreground", "hover:bg-muted/80"),
@@ -36,7 +39,7 @@ const shapesClasses = {
 	circle: "rounded-full",
 	round: "rounded-2xl"
 };
-const Button = ({ icon, className, type = "default", variant, htmlType = "button", size, color = "default", shape, block = false, disabled, loading, danger, children, onMouseDown, ...props }) => {
+const Button = ({ icon, className, type = "default", variant, htmlType = "button", size, color = "default", shape, block = false, disabled, loading, danger, asChild = false, children, onMouseDown, ...props }) => {
 	const { componentSize, defaultProps } = useConfig();
 	const buttonDefaults = defaultProps?.button;
 	const resolvedSize = size ?? componentSize ?? "middle";
@@ -46,20 +49,23 @@ const Button = ({ icon, className, type = "default", variant, htmlType = "button
 	const colored = computedColor && computedColor !== "default";
 	const resolvedVariant = variant ?? typeToVariant[type] ?? "solid";
 	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(Core, {
-		type: htmlType,
-		disabled: disabled || isLoading,
-		"aria-busy": isLoading,
-		variant: "default",
-		"data-color": computedColor,
-		className: cn("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" ? [
+	return /* @__PURE__ */ jsxs(Comp, {
+		"data-slot": "button",
+		"data-variant": "default",
+		"data-size": "default",
+		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)",
 			"active:bg-(--btn-bg-active)",
 			"text-(--btn-fg)",
 			"border-(--btn-border)"
 		] : ["text-(--btn-bg)", "border-[color-mix(in_oklch,var(--btn-border),transparent_50%)]"]), className),
+		type: htmlType,
+		disabled: disabled || isLoading,
+		"aria-busy": isLoading,
+		"data-color": computedColor,
 		onMouseDown: (e) => {
 			onMouseDown?.(e);
 		},

package/dist/Button.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Button.mjs","names":["button.Button"],"sources":["../src/components/atoms/button.tsx"],"sourcesContent":["'use client';\n\nimport { LoaderCircle } from 'lucide-react';\n\nimport { button } from '@repo/ui/core';\nimport { useConfig } from '@repo/ui/providers';\nimport { cn } from '@repo/ui/utils';\n\nconst Core = button.Button;\ntype ButtonProps = button.Props;\n\ntype PresetColors =\n  | 'blue'\n  | 'purple'\n  | 'cyan'\n  | 'green'\n  | 'magenta'\n  | 'pink'\n  | 'red'\n  | 'orange'\n  | 'yellow'\n  | 'volcano'\n  | 'geekblue'\n  | 'lime'\n  | 'gold';\n\nexport interface Props extends Omit<ButtonProps, 'size' | 'variant' | 'type'> {\n  icon?: React.ReactNode;\n  block?: boolean;\n  danger?: boolean;\n  disabled?: boolean;\n  size?: 'small' | 'middle' | 'large';\n  /**\n   * antd-style visual preset. Maps to a `variant` internally — passing\n   * both `type` and `variant` lets `variant` win, so it can override the\n   * preset for one-off cases without needing every value duplicated here.\n   */\n  type?: 'primary' | 'default' | 'dashed' | 'text' | 'link';\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  color?: PresetColors | 'default' | 'primary' | 'danger';\n  loading?: boolean | { icon: React.ReactNode };\n}\n\nconst variantClasses: Record<string, string> = {\n  solid: '',\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\nconst typeToVariant: Record<string, string> = {\n  primary: 'solid',\n  default: 'outlined',\n  dashed: 'dashed',\n  text: 'text',\n  link: '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 = 'default',\n  variant,\n  htmlType = 'button',\n  size,\n  color = 'default',\n  shape,\n  block = false,\n  disabled,\n  loading,\n  danger,\n  children,\n  onMouseDown,\n  ...props\n}: Props) => {\n  const { componentSize, defaultProps } = useConfig();\n  const buttonDefaults = defaultProps?.button as\n    | Partial<Pick<Props, 'shape'>>\n    | undefined;\n  const resolvedSize = size ?? componentSize ?? 'middle';\n  const resolvedShape = shape ?? buttonDefaults?.shape ?? 'default';\n  const iconOnly = icon && !children;\n  const computedColor = danger ? 'danger' : color;\n  const colored = computedColor && computedColor !== 'default';\n  const resolvedVariant = variant ?? typeToVariant[type] ?? 'solid';\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      type={htmlType}\n      disabled={disabled || isLoading}\n      aria-busy={isLoading}\n      variant=\"default\"\n      data-color={computedColor}\n      className={cn(\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      onMouseDown={e => {\n        onMouseDown?.(e);\n      }}\n      {...props}\n    >\n      {displayIcon}\n      {children}\n    </Core>\n  );\n};\n\nexport default Button;\n"],"mappings":";;;;;;;AAQA,MAAM,OAAOA;AA0Cb,MAAM,iBAAyC;CAC7C,OAAO;CACP,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;AAEA,MAAM,gBAAwC;CAC5C,SAAS;CACT,SAAS;CACT,QAAQ;CACR,MAAM;CACN,MAAM;AACR;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,OAAO,WACP,SACA,WAAW,UACX,MACA,QAAQ,WACR,OACA,QAAQ,OACR,UACA,SACA,QACA,UACA,aACA,GAAG,YACQ;CACX,MAAM,EAAE,eAAe,iBAAiB,UAAU;CAClD,MAAM,iBAAiB,cAAc;CAGrC,MAAM,eAAe,QAAQ,iBAAiB;CAC9C,MAAM,gBAAgB,SAAS,gBAAgB,SAAS;CACxD,MAAM,WAAW,QAAQ,CAAC;CAC1B,MAAM,gBAAgB,SAAS,WAAW;CAC1C,MAAM,UAAU,iBAAiB,kBAAkB;CACnD,MAAM,kBAAkB,WAAW,cAAc,SAAS;CAC1D,MAAM,YAAY,CAAC,CAAC;CAEpB,MAAM,cAAc,UAClB,OAAO,YAAY,WACjB,QAAQ,OAER,oBAAC,cAAD,EAAc,WAAU,eAAgB,CAAA,IAG1C;CAGF,OACE,qBAAC,MAAD;EACE,MAAM;EACN,UAAU,YAAY;EACtB,aAAW;EACX,SAAQ;EACR,cAAY;EACZ,WAAW,GACT,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,cAAa,MAAK;GAChB,cAAc,CAAC;EACjB;EACA,GAAI;EArCN,UAAA,CAuCG,aACA,QACG;;AAEV"}
+{"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';\n\ntype NativeButtonProps = React.ComponentProps<'button'> & {\n  asChild?: boolean;\n};\n\ntype PresetColors =\n  | 'blue'\n  | 'purple'\n  | 'cyan'\n  | 'green'\n  | 'magenta'\n  | 'pink'\n  | 'red'\n  | 'orange'\n  | 'yellow'\n  | 'volcano'\n  | 'geekblue'\n  | 'lime'\n  | 'gold';\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   * antd-style visual preset. Maps to a `variant` internally — passing\n   * both `type` and `variant` lets `variant` win, so it can override the\n   * preset for one-off cases without needing every value duplicated here.\n   */\n  type?: 'primary' | 'default' | 'dashed' | 'text' | 'link';\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  color?: PresetColors | '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\nconst typeToVariant: Record<string, string> = {\n  primary: 'solid',\n  default: 'outlined',\n  dashed: 'dashed',\n  text: 'text',\n  link: '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 = 'default',\n  variant,\n  htmlType = 'button',\n  size,\n  color = 'default',\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'>> | undefined;\n  const resolvedSize = size ?? componentSize ?? 'middle';\n  const resolvedShape = shape ?? buttonDefaults?.shape ?? 'default';\n  const iconOnly = icon && !children;\n  const computedColor = danger ? 'danger' : color;\n  const colored = computedColor && computedColor !== 'default';\n  const resolvedVariant = variant ?? typeToVariant[type] ?? 'solid';\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      data-variant=\"default\"\n      data-size=\"default\"\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":";;;;;;;;;AA+DA,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;AAEA,MAAM,gBAAwC;CAC5C,SAAS;CACT,SAAS;CACT,QAAQ;CACR,MAAM;CACN,MAAM;AACR;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,OAAO,WACP,SACA,WAAW,UACX,MACA,QAAQ,WACR,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;CAC1B,MAAM,gBAAgB,SAAS,WAAW;CAC1C,MAAM,UAAU,iBAAiB,kBAAkB;CACnD,MAAM,kBAAkB,WAAW,cAAc,SAAS;CAC1D,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,gBAAa;EACb,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;EAxCN,UAAA,CA0CG,aACA,QACG;;AAEV"}

package/dist/Tag.d.mts

@@ -1,12 +1,13 @@
-import { Props as Props$1 } from "./core/badge.mjs";
-import "./core.mjs";
+import * as React$1 from "react";
 //#region src/components/atoms/tag.d.ts
-type BadgeProps = Props$1;
-interface Props extends Omit<BadgeProps, 'variant'> {
+type NativeSpanProps = React$1.ComponentProps<'span'> & {
+  asChild?: boolean;
+};
+interface Props extends Omit<NativeSpanProps, 'variant'> {
   variant?: 'default' | 'outlined';
   color?: 'default' | 'primary' | 'success' | 'warning' | 'danger';
 }
-declare const Tag: ({ className, variant, color, children, ...props }: Props) => import("react").JSX.Element;
+declare const Tag: ({ className, variant, color, asChild, 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":";;;KAIK,aAAa;UAED,cAAc,KAAK;EAClC;EACA;;cAqBI,QAAO,WAAA,SAAA,OAAA,aAAA,SAMV,0BAAK,IAAA"}
+{"version":3,"file":"Tag.d.mts","names":[],"sources":["../src/components/atoms/tag.tsx"],"mappings":";;KAQK,kBAAkB,QAAM;EAC3B;;UAGe,cAAc,KAAK;EAClC;EACA;;cAoCI,QAAO,WAAA,SAAA,OAAA,SAAA,aAAA,SAOV,UAAK,QAAA,IAAA"}

package/dist/Tag.mjs

@@ -1,8 +1,10 @@
 import { cn } from "./utils.mjs";
-import { Badge } from "./core/badge.mjs";
+import { INTERACTIVE_CHASSIS } from "./lib/chassis.mjs";
+import "react";
+import { Slot } from "@radix-ui/react-slot";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/atoms/tag.tsx
-const Core = Badge;
+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 fillColorClasses = {
 	default: "border-transparent bg-muted text-muted-foreground",
 	primary: "border-transparent bg-primary/10 text-primary",
@@ -17,10 +19,10 @@ const outlinedColorClasses = {
 	warning: "border-yellow-500 text-yellow-600 dark:text-yellow-400",
 	danger: "border-destructive text-destructive"
 };
-const Tag = ({ className, variant = "default", color = "default", children, ...props }) => {
-	return /* @__PURE__ */ jsx(Core, {
-		variant: "outline",
-		className: cn("rounded-full px-2.5 py-1", "text-xs font-medium", variant === "default" && fillColorClasses[color], variant === "outlined" && outlinedColorClasses[color], className),
+const Tag = ({ className, variant = "default", color = "default", asChild = false, children, ...props }) => {
+	return /* @__PURE__ */ jsx(asChild ? Slot : "span", {
+		"data-slot": "badge",
+		className: cn(TAG_BASE, "rounded-full px-2.5 py-1", "text-xs font-medium", variant === "default" && fillColorClasses[color], variant === "outlined" && outlinedColorClasses[color], className),
 		...props,
 		children
 	});

package/dist/Tag.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.mjs","names":["badge.Badge"],"sources":["../src/components/atoms/tag.tsx"],"sourcesContent":["import { badge } from '@repo/ui/core';\nimport { cn } from '@repo/ui/utils';\n\nconst Core = badge.Badge;\ntype BadgeProps = badge.Props;\n\nexport interface Props extends Omit<BadgeProps, 'variant'> {\n  variant?: 'default' | 'outlined';\n  color?: 'default' | 'primary' | 'success' | 'warning' | 'danger';\n}\n\nconst fillColorClasses: Record<string, string> = {\n  default: 'border-transparent bg-muted text-muted-foreground',\n  primary: 'border-transparent bg-primary/10 text-primary',\n  success:\n    'border-transparent bg-green-500/10 text-green-600 dark:text-green-400',\n  warning:\n    'border-transparent bg-yellow-500/10 text-yellow-600 dark:text-yellow-400',\n  danger: 'border-transparent bg-destructive/10 text-destructive',\n};\n\nconst outlinedColorClasses: Record<string, string> = {\n  default: 'border-border text-foreground',\n  primary: 'border-primary text-primary',\n  success: 'border-green-500 text-green-600 dark:text-green-400',\n  warning: 'border-yellow-500 text-yellow-600 dark:text-yellow-400',\n  danger: 'border-destructive text-destructive',\n};\n\nconst Tag = ({\n  className,\n  variant = 'default',\n  color = 'default',\n  children,\n  ...props\n}: Props) => {\n  return (\n    <Core\n      variant=\"outline\"\n      className={cn(\n        'rounded-full px-2.5 py-1',\n        'text-xs font-medium',\n        variant === 'default' && fillColorClasses[color],\n        variant === 'outlined' && outlinedColorClasses[color],\n        className,\n        //\n      )}\n      {...props}\n    >\n      {children}\n    </Core>\n  );\n};\n\nexport default Tag;\n"],"mappings":";;;;AAGA,MAAM,OAAOA;AAQb,MAAM,mBAA2C;CAC/C,SAAS;CACT,SAAS;CACT,SACE;CACF,SACE;CACF,QAAQ;AACV;AAEA,MAAM,uBAA+C;CACnD,SAAS;CACT,SAAS;CACT,SAAS;CACT,SAAS;CACT,QAAQ;AACV;AAEA,MAAM,OAAO,EACX,WACA,UAAU,WACV,QAAQ,WACR,UACA,GAAG,YACQ;CACX,OACE,oBAAC,MAAD;EACE,SAAQ;EACR,WAAW,GACT,4BACA,uBACA,YAAY,aAAa,iBAAiB,QAC1C,YAAY,cAAc,qBAAqB,QAC/C,SAEF;EACA,GAAI;EAEH;CACG,CAAA;AAEV"}
+{"version":3,"file":"Tag.mjs","names":[],"sources":["../src/components/atoms/tag.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Slot } from '@radix-ui/react-slot';\n\nimport { cn } from '@repo/ui/utils';\n\nimport { INTERACTIVE_CHASSIS } from '../../lib/chassis';\n\ntype NativeSpanProps = React.ComponentProps<'span'> & {\n  asChild?: boolean;\n};\n\nexport interface Props extends Omit<NativeSpanProps, 'variant'> {\n  variant?: 'default' | 'outlined';\n  color?: 'default' | 'primary' | 'success' | 'warning' | 'danger';\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\nconst fillColorClasses: Record<string, string> = {\n  default: 'border-transparent bg-muted text-muted-foreground',\n  primary: 'border-transparent bg-primary/10 text-primary',\n  success:\n    'border-transparent bg-green-500/10 text-green-600 dark:text-green-400',\n  warning:\n    'border-transparent bg-yellow-500/10 text-yellow-600 dark:text-yellow-400',\n  danger: 'border-transparent bg-destructive/10 text-destructive',\n};\n\nconst outlinedColorClasses: Record<string, string> = {\n  default: 'border-border text-foreground',\n  primary: 'border-primary text-primary',\n  success: 'border-green-500 text-green-600 dark:text-green-400',\n  warning: 'border-yellow-500 text-yellow-600 dark:text-yellow-400',\n  danger: 'border-destructive text-destructive',\n};\n\nconst Tag = ({\n  className,\n  variant = 'default',\n  color = 'default',\n  asChild = false,\n  children,\n  ...props\n}: Props) => {\n  const Comp = asChild ? Slot : 'span';\n\n  return (\n    <Comp\n      data-slot=\"badge\"\n      className={cn(\n        TAG_BASE,\n        'rounded-full px-2.5 py-1',\n        'text-xs font-medium',\n        variant === 'default' && fillColorClasses[color],\n        variant === 'outlined' && outlinedColorClasses[color],\n        className,\n        //\n      )}\n      {...props}\n    >\n      {children}\n    </Comp>\n  );\n};\n\nexport default Tag;\n"],"mappings":";;;;;;AAwBA,MAAM,WAAW,GACf,qBACA,kDACA,2DACA,8CACA,wEACF;AAEA,MAAM,mBAA2C;CAC/C,SAAS;CACT,SAAS;CACT,SACE;CACF,SACE;CACF,QAAQ;AACV;AAEA,MAAM,uBAA+C;CACnD,SAAS;CACT,SAAS;CACT,SAAS;CACT,SAAS;CACT,QAAQ;AACV;AAEA,MAAM,OAAO,EACX,WACA,UAAU,WACV,QAAQ,WACR,UAAU,OACV,UACA,GAAG,YACQ;CAGX,OACE,oBAHW,UAAU,OAAO,QAG5B;EACE,aAAU;EACV,WAAW,GACT,UACA,4BACA,uBACA,YAAY,aAAa,iBAAiB,QAC1C,YAAY,cAAc,qBAAqB,QAC/C,SAEF;EACA,GAAI;EAEH;CACG,CAAA;AAEV"}

package/dist/components/atoms/checkbox/checkbox.mjs

@@ -2,8 +2,8 @@
 import { cn } from "../../../utils.mjs";
 import { checkbox_exports } from "../../../core/checkbox.mjs";
 import { label_exports } from "../../../core/label.mjs";
-import { Square, SquareCheck } from "lucide-react";
 import { useId, useRef } from "react";
+import { Square, SquareCheck } from "lucide-react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { useControllableState, useKeyPress } from "@jbpark/use-hooks";
 //#region src/components/atoms/checkbox/checkbox.tsx

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

@@ -1,10 +1,10 @@
 "use client";
 import { cn } from "../../utils.mjs";
-import { calendar_exports } from "../../core/calendar.mjs";
 import Button from "../../Button.mjs";
+import { calendar_exports } from "../../core/calendar.mjs";
 import Popover from "./popover.mjs";
-import { CalendarIcon } from "lucide-react";
 import { useState } from "react";
+import { CalendarIcon } from "lucide-react";
 import { jsx } from "react/jsx-runtime";
 import { useControllableState } from "@jbpark/use-hooks";
 import { format } from "date-fns";

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

@@ -2,8 +2,8 @@
 import { cn } from "../../../utils.mjs";
 import { DEFAULT_LOCALE, useConfig } from "../../../providers/config/context.mjs";
 import FloatButton from "./float-button.mjs";
-import { ArrowUp } from "lucide-react";
 import { useRef } from "react";
+import { ArrowUp } from "lucide-react";
 import { jsx } from "react/jsx-runtime";
 import { useMergedRef, useWindowScroll } from "@jbpark/use-hooks";
 //#region src/components/atoms/float-button/back-top.tsx

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

@@ -1,10 +1,10 @@
 "use client";
 import { cn } from "../../../utils.mjs";
 import { DEFAULT_LOCALE, useConfig } from "../../../providers/config/context.mjs";
-import { input_exports } from "../../../core/input.mjs";
 import Button from "../../../Button.mjs";
-import { CircleX, Search } from "lucide-react";
+import { input_exports } from "../../../core/input.mjs";
 import { useRef, useState } from "react";
+import { CircleX, Search } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useMergedRef } from "@jbpark/use-hooks";
 //#region src/components/atoms/input/search.tsx

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

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

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

@@ -3,8 +3,8 @@ import { cn } from "../../../utils.mjs";
 import { field_exports } from "../../../core/field.mjs";
 import { radio_group_exports } from "../../../core/radio-group.mjs";
 import { RadioGroupContext } from "./context.mjs";
-import { Circle, CircleCheck } from "lucide-react";
 import { useContext, useId, useRef } from "react";
+import { Circle, CircleCheck } from "lucide-react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { useControllableState, useKeyPress } from "@jbpark/use-hooks";
 //#region src/components/atoms/radio/radio.tsx

package/dist/components/molecules/menu/item/item.mjs

@@ -2,8 +2,8 @@
 import { cn } from "../../../../utils.mjs";
 import Label from "./label.mjs";
 import { MENU_CLASSNAMES } from "../menu.mjs";
-import { ChevronDown } from "lucide-react";
 import { createElement, useRef, useState } from "react";
+import { ChevronDown } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { AnimatePresence, motion } from "motion/react";
 //#region src/components/molecules/menu/item/item.tsx

package/dist/components/molecules/upload.mjs

@@ -1,8 +1,8 @@
 "use client";
 import { cn } from "../../utils.mjs";
 import Button from "../../Button.mjs";
-import { Upload, X } from "lucide-react";
 import { useId } from "react";
+import { Upload, X } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useControllableState, useFileDrop, useFileToDataUrl } from "@jbpark/use-hooks";
 //#region src/components/molecules/upload.tsx

package/dist/components/organisms/drawer.mjs

@@ -1,10 +1,10 @@
 "use client";
 import { cn, renderConditional } from "../../utils.mjs";
 import { DEFAULT_LOCALE, useConfig } from "../../providers/config/context.mjs";
-import { drawer_exports } from "../../core/drawer.mjs";
 import Button from "../../Button.mjs";
-import { X } from "lucide-react";
+import { drawer_exports } from "../../core/drawer.mjs";
 import { useEffect } from "react";
+import { X } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/organisms/drawer.tsx
 const { DrawerContent, Drawer: DrawerCore, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle } = drawer_exports;

package/dist/components/organisms/modal.mjs

@@ -1,11 +1,11 @@
 "use client";
 import { cn } from "../../utils.mjs";
 import { DEFAULT_LOCALE, useConfig } from "../../providers/config/context.mjs";
-import { dialog_exports } from "../../core/dialog.mjs";
 import Button from "../../Button.mjs";
+import { dialog_exports } from "../../core/dialog.mjs";
 import { createImperativeStack, isBrowser } from "./imperative-stack.mjs";
-import { Check, CircleQuestionMark, Info, OctagonAlert, OctagonX } from "lucide-react";
 import { useState } from "react";
+import { Check, CircleQuestionMark, Info, OctagonAlert, OctagonX } from "lucide-react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { createPortal } from "react-dom";
 //#region src/components/organisms/modal.tsx

package/dist/components/organisms/toast.mjs

@@ -3,8 +3,8 @@ import { cn } from "../../utils.mjs";
 import { DEFAULT_LOCALE, useConfig } from "../../providers/config/context.mjs";
 import Button from "../../Button.mjs";
 import { createImperativeStack, isBrowser } from "./imperative-stack.mjs";
-import { Check, Info, OctagonAlert, OctagonX, X } from "lucide-react";
 import { useState } from "react";
+import { Check, Info, OctagonAlert, OctagonX, X } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useTimeout } from "@jbpark/use-hooks";
 import { createPortal } from "react-dom";

package/dist/components/templates/container.mjs

@@ -1,6 +1,6 @@
 import { cn } from "../../utils.mjs";
-import { jsx } from "react/jsx-runtime";
 import { Slot } from "@radix-ui/react-slot";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/templates/container.tsx
 const MAX_WIDTH_CLASSES = {
 	"3xs": "max-w-3xs",

package/dist/components/templates/layout/content.mjs

@@ -1,7 +1,7 @@
 import { cn } from "../../../utils.mjs";
 import { SiderRegistryContext } from "./sider-context.mjs";
-import { jsx } from "react/jsx-runtime";
 import { Slot } from "@radix-ui/react-slot";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/templates/layout/content.tsx
 const Content = ({ children, className, asChild = false, ...props }) => {
 	return /* @__PURE__ */ jsx(asChild ? Slot : "main", {

package/dist/components/templates/layout/sider.mjs

@@ -2,8 +2,8 @@
 import { cn } from "../../../utils.mjs";
 import { DEFAULT_LOCALE, useConfig } from "../../../providers/config/context.mjs";
 import { useRegisterSider } from "./sider-context.mjs";
-import { PanelLeftClose, PanelLeftOpen } from "lucide-react";
 import { useEffect, useId, useRef } from "react";
+import { PanelLeftClose, PanelLeftOpen } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useControllableState, useResponsiveSize } from "@jbpark/use-hooks";
 //#region src/components/templates/layout/sider.tsx

package/dist/core/accordion.mjs

@@ -1,10 +1,10 @@
 "use client";
 import { __exportAll } from "../_virtual/_rolldown/runtime.mjs";
 import { cn } from "../utils.mjs";
-import { ChevronDownIcon } from "lucide-react";
 import "react";
-import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { ChevronDownIcon } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
 //#region src/core/accordion.tsx
 var accordion_exports = /* @__PURE__ */ __exportAll({
 	Accordion: () => Accordion,

package/dist/core/badge.d.mts

@@ -4,7 +4,7 @@ declare namespace badge_d_exports {
   export { Badge, Props, badgeVariants };
 }
 declare const badgeVariants: (props?: ({
-  variant?: "outline" | "default" | "destructive" | "secondary" | null | undefined;
+  variant?: "default" | "outline" | "secondary" | "destructive" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type Props = React$1.ComponentProps<'span'> & VariantProps<typeof badgeVariants> & {
   asChild?: boolean;

package/dist/core/badge.mjs

@@ -1,8 +1,8 @@
 import { __exportAll } from "../_virtual/_rolldown/runtime.mjs";
 import { cn } from "../utils.mjs";
 import "react";
-import { jsx } from "react/jsx-runtime";
 import { Slot } from "@radix-ui/react-slot";
+import { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 //#region src/core/badge.tsx
 var badge_exports = /* @__PURE__ */ __exportAll({

package/dist/core/button.d.mts

@@ -4,7 +4,7 @@ declare namespace button_d_exports {
   export { Button, Props, buttonVariants };
 }
 declare const buttonVariants: (props?: ({
-  variant?: "link" | "outline" | "default" | "destructive" | "secondary" | "ghost" | null | undefined;
+  variant?: "link" | "default" | "outline" | "secondary" | "destructive" | "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> & {

package/dist/core/button.mjs

@@ -1,8 +1,8 @@
 import { __exportAll } from "../_virtual/_rolldown/runtime.mjs";
 import { cn } from "../utils.mjs";
 import "react";
-import { jsx } from "react/jsx-runtime";
 import { Slot } from "@radix-ui/react-slot";
+import { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 //#region src/core/button.tsx
 var button_exports = /* @__PURE__ */ __exportAll({

package/dist/core/calendar.mjs

@@ -2,8 +2,8 @@
 import { __exportAll } from "../_virtual/_rolldown/runtime.mjs";
 import { cn } from "../utils.mjs";
 import { Button, buttonVariants } from "./button.mjs";
-import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
 import * as React$1 from "react";
+import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
 import { jsx } from "react/jsx-runtime";
 import { DayPicker, getDefaultClassNames } from "react-day-picker";
 //#region src/core/calendar.tsx

package/dist/core/checkbox.mjs

@@ -1,8 +1,8 @@
 "use client";
 import { __exportAll } from "../_virtual/_rolldown/runtime.mjs";
 import { cn } from "../utils.mjs";
-import { CheckIcon } from "lucide-react";
 import "react";
+import { CheckIcon } from "lucide-react";
 import { jsx } from "react/jsx-runtime";
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 //#region src/core/checkbox.tsx

package/dist/core/dialog.mjs

@@ -3,8 +3,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 { XIcon } from "lucide-react";
 import "react";
+import { XIcon } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 //#region src/core/dialog.tsx

package/dist/core/radio-group.mjs

@@ -1,8 +1,8 @@
 "use client";
 import { __exportAll } from "../_virtual/_rolldown/runtime.mjs";
 import { cn } from "../utils.mjs";
-import { CircleIcon } from "lucide-react";
 import "react";
+import { CircleIcon } from "lucide-react";
 import { jsx } from "react/jsx-runtime";
 import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
 //#region src/core/radio-group.tsx

package/dist/core/select.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 { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
 import "react";
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as SelectPrimitive from "@radix-ui/react-select";
 //#region src/core/select.tsx

package/dist/lib/chassis.mjs

@@ -0,0 +1,23 @@
+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

@@ -0,0 +1 @@
+{"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"}

package/dist/providers/config/config.mjs

@@ -3,8 +3,8 @@ import { cn } from "../../utils.mjs";
 import { Context, DEFAULT_LOCALE, useConfig } from "./context.mjs";
 import { registerRootConfig } from "./registry.mjs";
 import { useCallback, useEffect, useMemo, useState, useSyncExternalStore } from "react";
-import { jsx } from "react/jsx-runtime";
 import { DirectionProvider } from "@radix-ui/react-direction";
+import { jsx } from "react/jsx-runtime";
 //#region src/providers/config/config.tsx
 const DARK_MEDIA_QUERY = "(prefers-color-scheme: dark)";
 const subscribeToSystemColorScheme = (callback) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbpark/ui-kit",
-  "version": "5.4.6",
+  "version": "5.4.7",
   "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",
@@ -108,6 +108,10 @@
     "build": "tsdown",
     "lint": "eslint .",
     "check-dynamic-classes": "node scripts/check-dynamic-tailwind-classes.mjs",
+    "check-api-surface": "node scripts/check-api-surface.mjs",
+    "check-preflight-reset": "node scripts/check-preflight-reset.mjs",
+    "check-ssr-smoke": "node --import ./scripts/loaders/css-stub.mjs scripts/check-ssr-smoke.mjs",
+    "check-regression-net": "pnpm run check-api-surface && pnpm run check-preflight-reset && pnpm run check-ssr-smoke",
     "generate:component": "turbo gen react-component",
     "check-types": "tsc -b",
     "prepublishOnly": "node scripts/prepare-publish.mjs",