@karakuri-ui/react 0.2.3 → 0.2.4

package/dist/components/ui/button-group.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/ui/button-group.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../../lib/utils'\n\n// ButtonGroup Context\ntype ButtonGroupContextValue = {\n  variant?: 'outline' | 'ghost'\n  size?: 'xs' | 'sm' | 'md' | 'default' | 'lg'\n  radius?: 'none' | 'sm' | 'base' | 'default' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'\n  fontWeight?: 'normal' | 'semibold'\n  disabled?: boolean\n}\n\nconst ButtonGroupContext = React.createContext<ButtonGroupContextValue | null>(null)\n\nexport function useButtonGroup() {\n  return React.useContext(ButtonGroupContext)\n}\n\nexport interface ButtonGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n  orientation?: 'horizontal' | 'vertical'\n  attached?: boolean\n  variant?: 'outline' | 'ghost'\n  size?: 'xs' | 'sm' | 'md' | 'default' | 'lg'\n  radius?: 'none' | 'sm' | 'base' | 'default' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'\n  fontWeight?: 'normal' | 'semibold'\n  disabled?: boolean\n}\n\nconst ButtonGroup = React.forwardRef<HTMLDivElement, ButtonGroupProps>(\n  ({\n    className,\n    orientation = 'horizontal',\n    attached = true,\n    variant,\n    size,\n    radius,\n    fontWeight,\n    disabled,\n    children,\n    ...props\n  }, ref) => {\n    const contextValue = React.useMemo(() => ({\n      variant,\n      size,\n      radius,\n      fontWeight,\n      disabled,\n    }), [variant, size, radius, fontWeight, disabled])\n\n    return (\n      <ButtonGroupContext.Provider value={contextValue}>\n        <div\n          ref={ref}\n          role=\"group\"\n          className={cn(\n            'inline-flex',\n            orientation === 'vertical' ? 'flex-col' : 'flex-row',\n            // Attached mode: use negative margin to overlap borders, raise z-index on hover/focus\n            attached && orientation === 'horizontal' && [\n              '[&>*:not(:first-child)]:rounded-l-none',\n              '[&>*:not(:last-child)]:rounded-r-none',\n              '[&>*:not(:first-child)]:-ml-px',\n              '[&>*]:relative',\n              '[&>*:hover]:z-10',\n              '[&>*:focus-visible]:z-10',\n              '[&>*:active]:scale-none',\n              '[&>*:hover]:border-border-form',\n            ],\n            attached && orientation === 'vertical' && [\n              '[&>*:not(:first-child)]:rounded-t-none',\n              '[&>*:not(:last-child)]:rounded-b-none',\n              '[&>*:not(:first-child)]:-mt-px',\n              '[&>*]:relative',\n              '[&>*]:w-full',\n              '[&>*:hover]:z-10',\n              '[&>*:focus-visible]:z-10',\n              '[&>*:active]:scale-none',\n              '[&>*:hover]:border-border-form',\n            ],\n            !attached && 'gap-2',\n            className\n          )}\n          {...props}\n        >\n          {children}\n        </div>\n      </ButtonGroupContext.Provider>\n    )\n  }\n)\nButtonGroup.displayName = 'ButtonGroup'\n\nexport { ButtonGroup }\n"],"mappings":";AAEA,YAAY,WAAW;AACvB,SAAS,UAAU;AAWnB,MAAM,qBAAqB,MAAM,cAA8C,IAAI;AAE5E,SAAS,iBAAiB;AAC/B,SAAO,MAAM,WAAW,kBAAkB;AAC5C;AAYA,MAAM,cAAc,MAAM;AAAA,EACxB,CAAC;AAAA,IACC;AAAA,IACA,cAAc;AAAA,IACd,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GAAG,QAAQ;AACT,UAAM,eAAe,MAAM,QAAQ,OAAO;AAAA,MACxC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,IAAI,CAAC,SAAS,MAAM,QAAQ,YAAY,QAAQ,CAAC;AAEjD,WACE,oCAAC,mBAAmB,UAAnB,EAA4B,OAAO,gBAClC;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,MAAK;AAAA,QACL,WAAW;AAAA,UACT;AAAA,UACA,gBAAgB,aAAa,aAAa;AAAA;AAAA,UAE1C,YAAY,gBAAgB,gBAAgB;AAAA,YAC1C;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UACF;AAAA,UACA,YAAY,gBAAgB,cAAc;AAAA,YACxC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UACF;AAAA,UACA,CAAC,YAAY;AAAA,UACb;AAAA,QACF;AAAA,QACC,GAAG;AAAA;AAAA,MAEH;AAAA,IACH,CACF;AAAA,EAEJ;AACF;AACA,YAAY,cAAc;","names":[]}

package/dist/components/ui/button.d.mts

@@ -0,0 +1,31 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+import { VariantProps } from 'class-variance-authority';
+
+declare const solidColorMap: {
+    readonly default: "bg-foreground text-background hover:bg-foreground/90 active:bg-foreground/80";
+    readonly primary: "bg-primary text-primary-foreground hover:bg-primary-hover active:bg-primary-active";
+    readonly secondary: "bg-secondary text-secondary-foreground hover:bg-secondary-hover active:bg-secondary-active";
+    readonly destructive: "bg-error text-error-foreground hover:bg-error-hover active:bg-error-active";
+};
+type ButtonColor = keyof typeof solidColorMap;
+declare const buttonVariants: (props?: ({
+    variant?: "link" | "outline" | "solid" | "ghost" | null | undefined;
+    size?: "default" | "sm" | "lg" | "icon" | "md" | "xs" | null | undefined;
+    radius?: "default" | "sm" | "lg" | "base" | "none" | "xl" | "2xl" | "3xl" | "full" | null | undefined;
+    fullWidth?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+    /** Solid variant color */
+    color?: ButtonColor;
+    asChild?: boolean;
+    loading?: boolean;
+    leftIcon?: React.ReactNode;
+    rightIcon?: React.ReactNode;
+    selected?: boolean;
+    fontWeight?: 'normal' | 'semibold';
+    pressEffect?: boolean;
+}
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+
+export { Button, type ButtonColor, type ButtonProps, buttonVariants };

package/dist/components/ui/button.d.ts

@@ -0,0 +1,31 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+import { VariantProps } from 'class-variance-authority';
+
+declare const solidColorMap: {
+    readonly default: "bg-foreground text-background hover:bg-foreground/90 active:bg-foreground/80";
+    readonly primary: "bg-primary text-primary-foreground hover:bg-primary-hover active:bg-primary-active";
+    readonly secondary: "bg-secondary text-secondary-foreground hover:bg-secondary-hover active:bg-secondary-active";
+    readonly destructive: "bg-error text-error-foreground hover:bg-error-hover active:bg-error-active";
+};
+type ButtonColor = keyof typeof solidColorMap;
+declare const buttonVariants: (props?: ({
+    variant?: "link" | "outline" | "solid" | "ghost" | null | undefined;
+    size?: "default" | "sm" | "lg" | "icon" | "md" | "xs" | null | undefined;
+    radius?: "default" | "sm" | "lg" | "base" | "none" | "xl" | "2xl" | "3xl" | "full" | null | undefined;
+    fullWidth?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+    /** Solid variant color */
+    color?: ButtonColor;
+    asChild?: boolean;
+    loading?: boolean;
+    leftIcon?: React.ReactNode;
+    rightIcon?: React.ReactNode;
+    selected?: boolean;
+    fontWeight?: 'normal' | 'semibold';
+    pressEffect?: boolean;
+}
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+
+export { Button, type ButtonColor, type ButtonProps, buttonVariants };

package/dist/components/ui/button.js

@@ -0,0 +1,176 @@
+"use strict";
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var button_exports = {};
+__export(button_exports, {
+  Button: () => Button,
+  buttonVariants: () => buttonVariants
+});
+module.exports = __toCommonJS(button_exports);
+var React = __toESM(require("react"));
+var import_react_slot = require("@radix-ui/react-slot");
+var import_class_variance_authority = require("class-variance-authority");
+var import_utils = require("../../lib/utils");
+var import_button_group = require("./button-group");
+const solidColorMap = {
+  default: "bg-foreground text-background hover:bg-foreground/90 active:bg-foreground/80",
+  primary: "bg-primary text-primary-foreground hover:bg-primary-hover active:bg-primary-active",
+  secondary: "bg-secondary text-secondary-foreground hover:bg-secondary-hover active:bg-secondary-active",
+  destructive: "bg-error text-error-foreground hover:bg-error-hover active:bg-error-active"
+};
+const buttonVariants = (0, import_class_variance_authority.cva)(
+  "inline-flex items-center justify-center whitespace-nowrap transition-all duration-micro focus-visible:focus-ring disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        solid: "font-semibold",
+        outline: "border border-border-form bg-background text-foreground hover:bg-background-muted font-normal",
+        ghost: "text-foreground hover:bg-background-muted font-normal",
+        link: "text-text-link underline-offset-4 hover:underline font-normal"
+      },
+      size: {
+        xs: "h-7 px-2.5 text-xs gap-1",
+        // 28px height, 10px paddingX, 12px font
+        sm: "h-8 px-3 text-sm gap-2",
+        // 32px height, 12px paddingX, 13px font
+        md: "h-9 px-3.5 text-md gap-2",
+        // 36px height, 14px paddingX, 14px font
+        default: "h-10 px-4 text-md gap-2",
+        // 40px height, 16px paddingX, 14px font
+        lg: "h-12 px-6 text-base gap-2",
+        // 48px height, 24px paddingX, 16px font
+        icon: "h-10 w-10"
+      },
+      radius: {
+        none: "rounded-none",
+        // 0px - primitive.borderRadius.none
+        sm: "rounded-sm",
+        // 2px - primitive.borderRadius.sm
+        base: "rounded",
+        // 4px - primitive.borderRadius.base
+        default: "rounded-md",
+        // 6px - primitive.borderRadius.md (Figma button default)
+        lg: "rounded-lg",
+        // 8px - primitive.borderRadius.lg
+        xl: "rounded-xl",
+        // 12px - primitive.borderRadius.xl
+        "2xl": "rounded-2xl",
+        // 16px - primitive.borderRadius.2xl
+        "3xl": "rounded-3xl",
+        // 24px - primitive.borderRadius.3xl
+        full: "rounded-full"
+        // 9999px - primitive.borderRadius.full
+      },
+      fullWidth: {
+        true: "w-full",
+        false: "w-auto"
+      }
+    },
+    defaultVariants: {
+      variant: "solid",
+      size: "default",
+      radius: "default",
+      fullWidth: false
+    }
+  }
+);
+const Button = React.forwardRef(
+  ({
+    className,
+    variant: variantProp,
+    color: colorProp,
+    size: sizeProp,
+    radius: radiusProp,
+    fullWidth,
+    asChild = false,
+    loading = false,
+    disabled: disabledProp,
+    leftIcon,
+    rightIcon,
+    selected = false,
+    fontWeight: fontWeightProp,
+    pressEffect,
+    children,
+    ...props
+  }, ref) => {
+    const Comp = asChild ? import_react_slot.Slot : "button";
+    const groupContext = (0, import_button_group.useButtonGroup)();
+    const variant = variantProp ?? groupContext?.variant ?? "solid";
+    const color = colorProp ?? "default";
+    const size = sizeProp ?? groupContext?.size;
+    const radius = radiusProp ?? groupContext?.radius;
+    const disabled = disabledProp ?? groupContext?.disabled;
+    const fontWeight = fontWeightProp ?? groupContext?.fontWeight;
+    const fontWeightClass = fontWeight === "normal" ? "font-normal" : fontWeight === "semibold" ? "font-semibold" : "";
+    const iconSizeClass = {
+      xs: "icon-xs",
+      // 14px
+      sm: "icon-xs",
+      // 14px
+      md: "icon-sm",
+      // 16px
+      default: "icon-sm",
+      // 16px
+      lg: "icon-sm",
+      // 16px
+      icon: "icon-md"
+      // icon-only → 20px
+    }[size || "default"];
+    const selectedStyles = selected ? variant === "outline" ? "bg-background-muted" : variant === "ghost" ? "font-semibold" : "" : "";
+    return /* @__PURE__ */ React.createElement(
+      Comp,
+      {
+        className: (0, import_utils.cn)(buttonVariants({ variant, size, radius, fullWidth }), variant === "solid" && solidColorMap[color], pressEffect !== false && "active:scale-pressed", fontWeightClass, selectedStyles, className),
+        ref,
+        disabled: disabled || loading,
+        "aria-busy": loading || void 0,
+        "aria-pressed": selected || void 0,
+        ...props
+      },
+      loading ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+        "svg",
+        {
+          className: (0, import_utils.cn)(iconSizeClass, "animate-spin"),
+          fill: "none",
+          viewBox: "0 0 24 24",
+          "aria-hidden": "true"
+        },
+        /* @__PURE__ */ React.createElement("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
+        /* @__PURE__ */ React.createElement("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })
+      ), /* @__PURE__ */ React.createElement("span", null, children)) : /* @__PURE__ */ React.createElement(React.Fragment, null, leftIcon && /* @__PURE__ */ React.createElement("span", { className: (0, import_utils.cn)(iconSizeClass, "[&>svg]:w-full [&>svg]:h-full"), "aria-hidden": "true" }, leftIcon), children, rightIcon && /* @__PURE__ */ React.createElement("span", { className: (0, import_utils.cn)(iconSizeClass, "[&>svg]:w-full [&>svg]:h-full"), "aria-hidden": "true" }, rightIcon))
+    );
+  }
+);
+Button.displayName = "Button";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Button,
+  buttonVariants
+});
+//# sourceMappingURL=button.js.map

package/dist/components/ui/button.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/ui/button.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { Slot } from '@radix-ui/react-slot'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\nimport { useButtonGroup } from './button-group'\n\n// Solid color maps (applied when variant=\"solid\")\nconst solidColorMap = {\n  default: 'bg-foreground text-background hover:bg-foreground/90 active:bg-foreground/80',\n  primary: 'bg-primary text-primary-foreground hover:bg-primary-hover active:bg-primary-active',\n  secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary-hover active:bg-secondary-active',\n  destructive: 'bg-error text-error-foreground hover:bg-error-hover active:bg-error-active',\n} as const\n\nexport type ButtonColor = keyof typeof solidColorMap\n\nconst buttonVariants = cva(\n  'inline-flex items-center justify-center whitespace-nowrap transition-all duration-micro focus-visible:focus-ring disabled:pointer-events-none disabled:opacity-50',\n  {\n    variants: {\n      variant: {\n        solid: 'font-semibold',\n        outline: 'border border-border-form bg-background text-foreground hover:bg-background-muted font-normal',\n        ghost: 'text-foreground hover:bg-background-muted font-normal',\n        link: 'text-text-link underline-offset-4 hover:underline font-normal',\n      },\n      size: {\n        xs: 'h-7 px-2.5 text-xs gap-1',     // 28px height, 10px paddingX, 12px font\n        sm: 'h-8 px-3 text-sm gap-2',       // 32px height, 12px paddingX, 13px font\n        md: 'h-9 px-3.5 text-md gap-2',     // 36px height, 14px paddingX, 14px font\n        default: 'h-10 px-4 text-md gap-2', // 40px height, 16px paddingX, 14px font\n        lg: 'h-12 px-6 text-base gap-2',    // 48px height, 24px paddingX, 16px font\n        icon: 'h-10 w-10',\n      },\n      radius: {\n        none: 'rounded-none',      // 0px - primitive.borderRadius.none\n        sm: 'rounded-sm',          // 2px - primitive.borderRadius.sm\n        base: 'rounded',           // 4px - primitive.borderRadius.base\n        default: 'rounded-md',     // 6px - primitive.borderRadius.md (Figma button default)\n        lg: 'rounded-lg',          // 8px - primitive.borderRadius.lg\n        xl: 'rounded-xl',          // 12px - primitive.borderRadius.xl\n        '2xl': 'rounded-2xl',      // 16px - primitive.borderRadius.2xl\n        '3xl': 'rounded-3xl',      // 24px - primitive.borderRadius.3xl\n        full: 'rounded-full',      // 9999px - primitive.borderRadius.full\n      },\n      fullWidth: {\n        true: 'w-full',\n        false: 'w-auto',\n      },\n    },\n    defaultVariants: {\n      variant: 'solid',\n      size: 'default',\n      radius: 'default',\n      fullWidth: false,\n    },\n  }\n)\n\nexport interface ButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof buttonVariants> {\n  /** Solid variant color */\n  color?: ButtonColor\n  asChild?: boolean\n  loading?: boolean\n  leftIcon?: React.ReactNode\n  rightIcon?: React.ReactNode\n  selected?: boolean\n  fontWeight?: 'normal' | 'semibold'\n  pressEffect?: boolean\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  ({\n    className,\n    variant: variantProp,\n    color: colorProp,\n    size: sizeProp,\n    radius: radiusProp,\n    fullWidth,\n    asChild = false,\n    loading = false,\n    disabled: disabledProp,\n    leftIcon,\n    rightIcon,\n    selected = false,\n    fontWeight: fontWeightProp,\n    pressEffect,\n    children,\n    ...props\n  }, ref) => {\n    const Comp = asChild ? Slot : 'button'\n    const groupContext = useButtonGroup()\n\n    // Use context values as fallback, individual props take precedence\n    const variant = variantProp ?? groupContext?.variant ?? 'solid'\n    const color = colorProp ?? 'default'\n    const size = sizeProp ?? groupContext?.size\n    const radius = radiusProp ?? groupContext?.radius\n    const disabled = disabledProp ?? groupContext?.disabled\n\n    // Priority: direct prop > ButtonGroup context > variant default (no class)\n    const fontWeight = fontWeightProp ?? groupContext?.fontWeight\n\n    // FontWeight class (overrides variant default)\n    const fontWeightClass = fontWeight === 'normal' ? 'font-normal' : fontWeight === 'semibold' ? 'font-semibold' : ''\n\n    // Icon size for button with text (5-step scale)\n    // xs~sm: 14px, md~default~lg: 16px\n    const iconSizeClass = {\n      xs: 'icon-xs',      // 14px\n      sm: 'icon-xs',      // 14px\n      md: 'icon-sm',      // 16px\n      default: 'icon-sm', // 16px\n      lg: 'icon-sm',      // 16px\n      icon: 'icon-md',    // icon-only → 20px\n    }[size || 'default']\n\n    // Selected styles by variant (used in ButtonGroup)\n    const selectedStyles = selected ? (\n      variant === 'outline' ? 'bg-background-muted' :\n      variant === 'ghost' ? 'font-semibold' : ''\n    ) : ''\n\n    return (\n      <Comp\n        className={cn(buttonVariants({ variant, size, radius, fullWidth }), variant === 'solid' && solidColorMap[color], pressEffect !== false && 'active:scale-pressed', fontWeightClass, selectedStyles, className)}\n        ref={ref}\n        disabled={disabled || loading}\n        aria-busy={loading || undefined}\n        aria-pressed={selected || undefined}\n        {...props}\n      >\n        {loading ? (\n          <>\n            <svg\n              className={cn(iconSizeClass, 'animate-spin')}\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              aria-hidden=\"true\"\n            >\n              <circle className=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" strokeWidth=\"4\" />\n              <path className=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\" />\n            </svg>\n            <span>{children}</span>\n          </>\n        ) : (\n          <>\n            {leftIcon && <span className={cn(iconSizeClass, '[&>svg]:w-full [&>svg]:h-full')} aria-hidden=\"true\">{leftIcon}</span>}\n            {children}\n            {rightIcon && <span className={cn(iconSizeClass, '[&>svg]:w-full [&>svg]:h-full')} aria-hidden=\"true\">{rightIcon}</span>}\n          </>\n        )}\n      </Comp>\n    )\n  }\n)\nButton.displayName = 'Button'\n\nexport { Button, buttonVariants }\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,YAAuB;AACvB,wBAAqB;AACrB,sCAAuC;AACvC,mBAAmB;AACnB,0BAA+B;AAG/B,MAAM,gBAAgB;AAAA,EACpB,SAAS;AAAA,EACT,SAAS;AAAA,EACT,WAAW;AAAA,EACX,aAAa;AACf;AAIA,MAAM,qBAAiB;AAAA,EACrB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,OAAO;AAAA,QACP,SAAS;AAAA,QACT,OAAO;AAAA,QACP,MAAM;AAAA,MACR;AAAA,MACA,MAAM;AAAA,QACJ,IAAI;AAAA;AAAA,QACJ,IAAI;AAAA;AAAA,QACJ,IAAI;AAAA;AAAA,QACJ,SAAS;AAAA;AAAA,QACT,IAAI;AAAA;AAAA,QACJ,MAAM;AAAA,MACR;AAAA,MACA,QAAQ;AAAA,QACN,MAAM;AAAA;AAAA,QACN,IAAI;AAAA;AAAA,QACJ,MAAM;AAAA;AAAA,QACN,SAAS;AAAA;AAAA,QACT,IAAI;AAAA;AAAA,QACJ,IAAI;AAAA;AAAA,QACJ,OAAO;AAAA;AAAA,QACP,OAAO;AAAA;AAAA,QACP,MAAM;AAAA;AAAA,MACR;AAAA,MACA,WAAW;AAAA,QACT,MAAM;AAAA,QACN,OAAO;AAAA,MACT;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,MAAM;AAAA,MACN,QAAQ;AAAA,MACR,WAAW;AAAA,IACb;AAAA,EACF;AACF;AAgBA,MAAM,SAAS,MAAM;AAAA,EACnB,CAAC;AAAA,IACC;AAAA,IACA,SAAS;AAAA,IACT,OAAO;AAAA,IACP,MAAM;AAAA,IACN,QAAQ;AAAA,IACR;AAAA,IACA,UAAU;AAAA,IACV,UAAU;AAAA,IACV,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GAAG,QAAQ;AACT,UAAM,OAAO,UAAU,yBAAO;AAC9B,UAAM,mBAAe,oCAAe;AAGpC,UAAM,UAAU,eAAe,cAAc,WAAW;AACxD,UAAM,QAAQ,aAAa;AAC3B,UAAM,OAAO,YAAY,cAAc;AACvC,UAAM,SAAS,cAAc,cAAc;AAC3C,UAAM,WAAW,gBAAgB,cAAc;AAG/C,UAAM,aAAa,kBAAkB,cAAc;AAGnD,UAAM,kBAAkB,eAAe,WAAW,gBAAgB,eAAe,aAAa,kBAAkB;AAIhH,UAAM,gBAAgB;AAAA,MACpB,IAAI;AAAA;AAAA,MACJ,IAAI;AAAA;AAAA,MACJ,IAAI;AAAA;AAAA,MACJ,SAAS;AAAA;AAAA,MACT,IAAI;AAAA;AAAA,MACJ,MAAM;AAAA;AAAA,IACR,EAAE,QAAQ,SAAS;AAGnB,UAAM,iBAAiB,WACrB,YAAY,YAAY,wBACxB,YAAY,UAAU,kBAAkB,KACtC;AAEJ,WACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAW,iBAAG,eAAe,EAAE,SAAS,MAAM,QAAQ,UAAU,CAAC,GAAG,YAAY,WAAW,cAAc,KAAK,GAAG,gBAAgB,SAAS,wBAAwB,iBAAiB,gBAAgB,SAAS;AAAA,QAC5M;AAAA,QACA,UAAU,YAAY;AAAA,QACtB,aAAW,WAAW;AAAA,QACtB,gBAAc,YAAY;AAAA,QACzB,GAAG;AAAA;AAAA,MAEH,UACC,0DACE;AAAA,QAAC;AAAA;AAAA,UACC,eAAW,iBAAG,eAAe,cAAc;AAAA,UAC3C,MAAK;AAAA,UACL,SAAQ;AAAA,UACR,eAAY;AAAA;AAAA,QAEZ,oCAAC,YAAO,WAAU,cAAa,IAAG,MAAK,IAAG,MAAK,GAAE,MAAK,QAAO,gBAAe,aAAY,KAAI;AAAA,QAC5F,oCAAC,UAAK,WAAU,cAAa,MAAK,gBAAe,GAAE,mHAAkH;AAAA,MACvK,GACA,oCAAC,cAAM,QAAS,CAClB,IAEA,0DACG,YAAY,oCAAC,UAAK,eAAW,iBAAG,eAAe,+BAA+B,GAAG,eAAY,UAAQ,QAAS,GAC9G,UACA,aAAa,oCAAC,UAAK,eAAW,iBAAG,eAAe,+BAA+B,GAAG,eAAY,UAAQ,SAAU,CACnH;AAAA,IAEJ;AAAA,EAEJ;AACF;AACA,OAAO,cAAc;","names":[]}

package/dist/components/ui/button.mjs

@@ -0,0 +1,141 @@
+"use client";
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import { cn } from "../../lib/utils";
+import { useButtonGroup } from "./button-group";
+const solidColorMap = {
+  default: "bg-foreground text-background hover:bg-foreground/90 active:bg-foreground/80",
+  primary: "bg-primary text-primary-foreground hover:bg-primary-hover active:bg-primary-active",
+  secondary: "bg-secondary text-secondary-foreground hover:bg-secondary-hover active:bg-secondary-active",
+  destructive: "bg-error text-error-foreground hover:bg-error-hover active:bg-error-active"
+};
+const buttonVariants = cva(
+  "inline-flex items-center justify-center whitespace-nowrap transition-all duration-micro focus-visible:focus-ring disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        solid: "font-semibold",
+        outline: "border border-border-form bg-background text-foreground hover:bg-background-muted font-normal",
+        ghost: "text-foreground hover:bg-background-muted font-normal",
+        link: "text-text-link underline-offset-4 hover:underline font-normal"
+      },
+      size: {
+        xs: "h-7 px-2.5 text-xs gap-1",
+        // 28px height, 10px paddingX, 12px font
+        sm: "h-8 px-3 text-sm gap-2",
+        // 32px height, 12px paddingX, 13px font
+        md: "h-9 px-3.5 text-md gap-2",
+        // 36px height, 14px paddingX, 14px font
+        default: "h-10 px-4 text-md gap-2",
+        // 40px height, 16px paddingX, 14px font
+        lg: "h-12 px-6 text-base gap-2",
+        // 48px height, 24px paddingX, 16px font
+        icon: "h-10 w-10"
+      },
+      radius: {
+        none: "rounded-none",
+        // 0px - primitive.borderRadius.none
+        sm: "rounded-sm",
+        // 2px - primitive.borderRadius.sm
+        base: "rounded",
+        // 4px - primitive.borderRadius.base
+        default: "rounded-md",
+        // 6px - primitive.borderRadius.md (Figma button default)
+        lg: "rounded-lg",
+        // 8px - primitive.borderRadius.lg
+        xl: "rounded-xl",
+        // 12px - primitive.borderRadius.xl
+        "2xl": "rounded-2xl",
+        // 16px - primitive.borderRadius.2xl
+        "3xl": "rounded-3xl",
+        // 24px - primitive.borderRadius.3xl
+        full: "rounded-full"
+        // 9999px - primitive.borderRadius.full
+      },
+      fullWidth: {
+        true: "w-full",
+        false: "w-auto"
+      }
+    },
+    defaultVariants: {
+      variant: "solid",
+      size: "default",
+      radius: "default",
+      fullWidth: false
+    }
+  }
+);
+const Button = React.forwardRef(
+  ({
+    className,
+    variant: variantProp,
+    color: colorProp,
+    size: sizeProp,
+    radius: radiusProp,
+    fullWidth,
+    asChild = false,
+    loading = false,
+    disabled: disabledProp,
+    leftIcon,
+    rightIcon,
+    selected = false,
+    fontWeight: fontWeightProp,
+    pressEffect,
+    children,
+    ...props
+  }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    const groupContext = useButtonGroup();
+    const variant = variantProp ?? groupContext?.variant ?? "solid";
+    const color = colorProp ?? "default";
+    const size = sizeProp ?? groupContext?.size;
+    const radius = radiusProp ?? groupContext?.radius;
+    const disabled = disabledProp ?? groupContext?.disabled;
+    const fontWeight = fontWeightProp ?? groupContext?.fontWeight;
+    const fontWeightClass = fontWeight === "normal" ? "font-normal" : fontWeight === "semibold" ? "font-semibold" : "";
+    const iconSizeClass = {
+      xs: "icon-xs",
+      // 14px
+      sm: "icon-xs",
+      // 14px
+      md: "icon-sm",
+      // 16px
+      default: "icon-sm",
+      // 16px
+      lg: "icon-sm",
+      // 16px
+      icon: "icon-md"
+      // icon-only → 20px
+    }[size || "default"];
+    const selectedStyles = selected ? variant === "outline" ? "bg-background-muted" : variant === "ghost" ? "font-semibold" : "" : "";
+    return /* @__PURE__ */ React.createElement(
+      Comp,
+      {
+        className: cn(buttonVariants({ variant, size, radius, fullWidth }), variant === "solid" && solidColorMap[color], pressEffect !== false && "active:scale-pressed", fontWeightClass, selectedStyles, className),
+        ref,
+        disabled: disabled || loading,
+        "aria-busy": loading || void 0,
+        "aria-pressed": selected || void 0,
+        ...props
+      },
+      loading ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+        "svg",
+        {
+          className: cn(iconSizeClass, "animate-spin"),
+          fill: "none",
+          viewBox: "0 0 24 24",
+          "aria-hidden": "true"
+        },
+        /* @__PURE__ */ React.createElement("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
+        /* @__PURE__ */ React.createElement("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })
+      ), /* @__PURE__ */ React.createElement("span", null, children)) : /* @__PURE__ */ React.createElement(React.Fragment, null, leftIcon && /* @__PURE__ */ React.createElement("span", { className: cn(iconSizeClass, "[&>svg]:w-full [&>svg]:h-full"), "aria-hidden": "true" }, leftIcon), children, rightIcon && /* @__PURE__ */ React.createElement("span", { className: cn(iconSizeClass, "[&>svg]:w-full [&>svg]:h-full"), "aria-hidden": "true" }, rightIcon))
+    );
+  }
+);
+Button.displayName = "Button";
+export {
+  Button,
+  buttonVariants
+};
+//# sourceMappingURL=button.mjs.map

package/dist/components/ui/button.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/ui/button.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { Slot } from '@radix-ui/react-slot'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\nimport { useButtonGroup } from './button-group'\n\n// Solid color maps (applied when variant=\"solid\")\nconst solidColorMap = {\n  default: 'bg-foreground text-background hover:bg-foreground/90 active:bg-foreground/80',\n  primary: 'bg-primary text-primary-foreground hover:bg-primary-hover active:bg-primary-active',\n  secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary-hover active:bg-secondary-active',\n  destructive: 'bg-error text-error-foreground hover:bg-error-hover active:bg-error-active',\n} as const\n\nexport type ButtonColor = keyof typeof solidColorMap\n\nconst buttonVariants = cva(\n  'inline-flex items-center justify-center whitespace-nowrap transition-all duration-micro focus-visible:focus-ring disabled:pointer-events-none disabled:opacity-50',\n  {\n    variants: {\n      variant: {\n        solid: 'font-semibold',\n        outline: 'border border-border-form bg-background text-foreground hover:bg-background-muted font-normal',\n        ghost: 'text-foreground hover:bg-background-muted font-normal',\n        link: 'text-text-link underline-offset-4 hover:underline font-normal',\n      },\n      size: {\n        xs: 'h-7 px-2.5 text-xs gap-1',     // 28px height, 10px paddingX, 12px font\n        sm: 'h-8 px-3 text-sm gap-2',       // 32px height, 12px paddingX, 13px font\n        md: 'h-9 px-3.5 text-md gap-2',     // 36px height, 14px paddingX, 14px font\n        default: 'h-10 px-4 text-md gap-2', // 40px height, 16px paddingX, 14px font\n        lg: 'h-12 px-6 text-base gap-2',    // 48px height, 24px paddingX, 16px font\n        icon: 'h-10 w-10',\n      },\n      radius: {\n        none: 'rounded-none',      // 0px - primitive.borderRadius.none\n        sm: 'rounded-sm',          // 2px - primitive.borderRadius.sm\n        base: 'rounded',           // 4px - primitive.borderRadius.base\n        default: 'rounded-md',     // 6px - primitive.borderRadius.md (Figma button default)\n        lg: 'rounded-lg',          // 8px - primitive.borderRadius.lg\n        xl: 'rounded-xl',          // 12px - primitive.borderRadius.xl\n        '2xl': 'rounded-2xl',      // 16px - primitive.borderRadius.2xl\n        '3xl': 'rounded-3xl',      // 24px - primitive.borderRadius.3xl\n        full: 'rounded-full',      // 9999px - primitive.borderRadius.full\n      },\n      fullWidth: {\n        true: 'w-full',\n        false: 'w-auto',\n      },\n    },\n    defaultVariants: {\n      variant: 'solid',\n      size: 'default',\n      radius: 'default',\n      fullWidth: false,\n    },\n  }\n)\n\nexport interface ButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof buttonVariants> {\n  /** Solid variant color */\n  color?: ButtonColor\n  asChild?: boolean\n  loading?: boolean\n  leftIcon?: React.ReactNode\n  rightIcon?: React.ReactNode\n  selected?: boolean\n  fontWeight?: 'normal' | 'semibold'\n  pressEffect?: boolean\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  ({\n    className,\n    variant: variantProp,\n    color: colorProp,\n    size: sizeProp,\n    radius: radiusProp,\n    fullWidth,\n    asChild = false,\n    loading = false,\n    disabled: disabledProp,\n    leftIcon,\n    rightIcon,\n    selected = false,\n    fontWeight: fontWeightProp,\n    pressEffect,\n    children,\n    ...props\n  }, ref) => {\n    const Comp = asChild ? Slot : 'button'\n    const groupContext = useButtonGroup()\n\n    // Use context values as fallback, individual props take precedence\n    const variant = variantProp ?? groupContext?.variant ?? 'solid'\n    const color = colorProp ?? 'default'\n    const size = sizeProp ?? groupContext?.size\n    const radius = radiusProp ?? groupContext?.radius\n    const disabled = disabledProp ?? groupContext?.disabled\n\n    // Priority: direct prop > ButtonGroup context > variant default (no class)\n    const fontWeight = fontWeightProp ?? groupContext?.fontWeight\n\n    // FontWeight class (overrides variant default)\n    const fontWeightClass = fontWeight === 'normal' ? 'font-normal' : fontWeight === 'semibold' ? 'font-semibold' : ''\n\n    // Icon size for button with text (5-step scale)\n    // xs~sm: 14px, md~default~lg: 16px\n    const iconSizeClass = {\n      xs: 'icon-xs',      // 14px\n      sm: 'icon-xs',      // 14px\n      md: 'icon-sm',      // 16px\n      default: 'icon-sm', // 16px\n      lg: 'icon-sm',      // 16px\n      icon: 'icon-md',    // icon-only → 20px\n    }[size || 'default']\n\n    // Selected styles by variant (used in ButtonGroup)\n    const selectedStyles = selected ? (\n      variant === 'outline' ? 'bg-background-muted' :\n      variant === 'ghost' ? 'font-semibold' : ''\n    ) : ''\n\n    return (\n      <Comp\n        className={cn(buttonVariants({ variant, size, radius, fullWidth }), variant === 'solid' && solidColorMap[color], pressEffect !== false && 'active:scale-pressed', fontWeightClass, selectedStyles, className)}\n        ref={ref}\n        disabled={disabled || loading}\n        aria-busy={loading || undefined}\n        aria-pressed={selected || undefined}\n        {...props}\n      >\n        {loading ? (\n          <>\n            <svg\n              className={cn(iconSizeClass, 'animate-spin')}\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              aria-hidden=\"true\"\n            >\n              <circle className=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" strokeWidth=\"4\" />\n              <path className=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\" />\n            </svg>\n            <span>{children}</span>\n          </>\n        ) : (\n          <>\n            {leftIcon && <span className={cn(iconSizeClass, '[&>svg]:w-full [&>svg]:h-full')} aria-hidden=\"true\">{leftIcon}</span>}\n            {children}\n            {rightIcon && <span className={cn(iconSizeClass, '[&>svg]:w-full [&>svg]:h-full')} aria-hidden=\"true\">{rightIcon}</span>}\n          </>\n        )}\n      </Comp>\n    )\n  }\n)\nButton.displayName = 'Button'\n\nexport { Button, buttonVariants }\n"],"mappings":"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","names":[]}

package/dist/components/ui/card.d.mts

@@ -0,0 +1,77 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+import { VariantProps } from 'class-variance-authority';
+
+type CardSize = 'sm' | 'default' | 'lg';
+type CardDirection = 'vertical' | 'horizontal';
+declare const cardVariants: (props?: ({
+    variant?: "default" | "outline" | "ghost" | null | undefined;
+    size?: "default" | "sm" | "lg" | null | undefined;
+    radius?: "sm" | "lg" | "base" | "md" | "xl" | "2xl" | null | undefined;
+    direction?: "horizontal" | "vertical" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type CardVariant = 'default' | 'outline' | 'ghost';
+type CardRadius = 'sm' | 'base' | 'md' | 'lg' | 'xl' | '2xl';
+interface CardProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof cardVariants> {
+    /** Visual style */
+    variant?: CardVariant;
+    /** Content padding scale */
+    size?: CardSize;
+    /** Border radius */
+    radius?: CardRadius;
+    /** Layout direction */
+    direction?: CardDirection;
+    /** Enable hover effect for interactive cards */
+    interactive?: boolean;
+    /** Render as child element (Slot pattern) */
+    asChild?: boolean;
+}
+interface CardImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
+    /** Gradient overlay on image */
+    overlay?: boolean;
+    /** Overlay opacity (10–90). Default: 60 */
+    overlayOpacity?: number;
+    /** Custom class for overlay gradient (overrides overlayOpacity) */
+    overlayClassName?: string;
+}
+declare const CardImage: React.ForwardRefExoticComponent<CardImageProps & React.RefAttributes<HTMLImageElement>>;
+interface CardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+declare const CardHeader: React.ForwardRefExoticComponent<CardHeaderProps & React.RefAttributes<HTMLDivElement>>;
+interface CardTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
+    /** Leading icon */
+    icon?: React.ReactNode;
+}
+declare const CardTitle: React.ForwardRefExoticComponent<CardTitleProps & React.RefAttributes<HTMLHeadingElement>>;
+interface CardDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {
+}
+declare const CardDescription: React.ForwardRefExoticComponent<CardDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
+interface CardActionProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+declare const CardAction: React.ForwardRefExoticComponent<CardActionProps & React.RefAttributes<HTMLDivElement>>;
+interface CardContentProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+declare const CardContent: React.ForwardRefExoticComponent<CardContentProps & React.RefAttributes<HTMLDivElement>>;
+interface CardFooterProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+declare const CardFooter: React.ForwardRefExoticComponent<CardFooterProps & React.RefAttributes<HTMLDivElement>>;
+declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>> & {
+    Image: React.ForwardRefExoticComponent<CardImageProps & React.RefAttributes<HTMLImageElement>>;
+    Header: React.ForwardRefExoticComponent<CardHeaderProps & React.RefAttributes<HTMLDivElement>>;
+    Title: React.ForwardRefExoticComponent<CardTitleProps & React.RefAttributes<HTMLHeadingElement>>;
+    Description: React.ForwardRefExoticComponent<CardDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
+    Action: React.ForwardRefExoticComponent<CardActionProps & React.RefAttributes<HTMLDivElement>>;
+    Content: React.ForwardRefExoticComponent<CardContentProps & React.RefAttributes<HTMLDivElement>>;
+    Footer: React.ForwardRefExoticComponent<CardFooterProps & React.RefAttributes<HTMLDivElement>>;
+};
+declare namespace Card {
+    type ImageProps = CardImageProps;
+    type HeaderProps = CardHeaderProps;
+    type TitleProps = CardTitleProps;
+    type DescriptionProps = CardDescriptionProps;
+    type ActionProps = CardActionProps;
+    type ContentProps = CardContentProps;
+    type FooterProps = CardFooterProps;
+}
+
+export { Card, CardAction, type CardActionProps, CardContent, type CardContentProps, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, CardImage, type CardImageProps, type CardProps, type CardRadius, CardTitle, type CardTitleProps, type CardVariant, cardVariants };

package/dist/components/ui/card.d.ts

@@ -0,0 +1,77 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+import { VariantProps } from 'class-variance-authority';
+
+type CardSize = 'sm' | 'default' | 'lg';
+type CardDirection = 'vertical' | 'horizontal';
+declare const cardVariants: (props?: ({
+    variant?: "default" | "outline" | "ghost" | null | undefined;
+    size?: "default" | "sm" | "lg" | null | undefined;
+    radius?: "sm" | "lg" | "base" | "md" | "xl" | "2xl" | null | undefined;
+    direction?: "horizontal" | "vertical" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type CardVariant = 'default' | 'outline' | 'ghost';
+type CardRadius = 'sm' | 'base' | 'md' | 'lg' | 'xl' | '2xl';
+interface CardProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof cardVariants> {
+    /** Visual style */
+    variant?: CardVariant;
+    /** Content padding scale */
+    size?: CardSize;
+    /** Border radius */
+    radius?: CardRadius;
+    /** Layout direction */
+    direction?: CardDirection;
+    /** Enable hover effect for interactive cards */
+    interactive?: boolean;
+    /** Render as child element (Slot pattern) */
+    asChild?: boolean;
+}
+interface CardImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
+    /** Gradient overlay on image */
+    overlay?: boolean;
+    /** Overlay opacity (10–90). Default: 60 */
+    overlayOpacity?: number;
+    /** Custom class for overlay gradient (overrides overlayOpacity) */
+    overlayClassName?: string;
+}
+declare const CardImage: React.ForwardRefExoticComponent<CardImageProps & React.RefAttributes<HTMLImageElement>>;
+interface CardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+declare const CardHeader: React.ForwardRefExoticComponent<CardHeaderProps & React.RefAttributes<HTMLDivElement>>;
+interface CardTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
+    /** Leading icon */
+    icon?: React.ReactNode;
+}
+declare const CardTitle: React.ForwardRefExoticComponent<CardTitleProps & React.RefAttributes<HTMLHeadingElement>>;
+interface CardDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {
+}
+declare const CardDescription: React.ForwardRefExoticComponent<CardDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
+interface CardActionProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+declare const CardAction: React.ForwardRefExoticComponent<CardActionProps & React.RefAttributes<HTMLDivElement>>;
+interface CardContentProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+declare const CardContent: React.ForwardRefExoticComponent<CardContentProps & React.RefAttributes<HTMLDivElement>>;
+interface CardFooterProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+declare const CardFooter: React.ForwardRefExoticComponent<CardFooterProps & React.RefAttributes<HTMLDivElement>>;
+declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>> & {
+    Image: React.ForwardRefExoticComponent<CardImageProps & React.RefAttributes<HTMLImageElement>>;
+    Header: React.ForwardRefExoticComponent<CardHeaderProps & React.RefAttributes<HTMLDivElement>>;
+    Title: React.ForwardRefExoticComponent<CardTitleProps & React.RefAttributes<HTMLHeadingElement>>;
+    Description: React.ForwardRefExoticComponent<CardDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
+    Action: React.ForwardRefExoticComponent<CardActionProps & React.RefAttributes<HTMLDivElement>>;
+    Content: React.ForwardRefExoticComponent<CardContentProps & React.RefAttributes<HTMLDivElement>>;
+    Footer: React.ForwardRefExoticComponent<CardFooterProps & React.RefAttributes<HTMLDivElement>>;
+};
+declare namespace Card {
+    type ImageProps = CardImageProps;
+    type HeaderProps = CardHeaderProps;
+    type TitleProps = CardTitleProps;
+    type DescriptionProps = CardDescriptionProps;
+    type ActionProps = CardActionProps;
+    type ContentProps = CardContentProps;
+    type FooterProps = CardFooterProps;
+}
+
+export { Card, CardAction, type CardActionProps, CardContent, type CardContentProps, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, CardImage, type CardImageProps, type CardProps, type CardRadius, CardTitle, type CardTitleProps, type CardVariant, cardVariants };