@mieweb/ui 0.2.2 → 0.3.0-dev.60

package/dist/{chunk-RRQGH7C5.cjs → chunk-VQW36LLX.cjs}

@@ -108,6 +108,7 @@ var Switch = React__namespace.forwardRef(
       "button",
       {
         ref,
+        "data-slot": "switch",
         id: switchId,
         type: "button",
         role: "switch",
@@ -122,6 +123,7 @@ var Switch = React__namespace.forwardRef(
         children: /* @__PURE__ */ jsxRuntime.jsx(
           "span",
           {
+            "data-slot": "switch-thumb",
             "data-state": isChecked ? "checked" : "unchecked",
             className: switchThumbVariants({ size })
           }
@@ -143,6 +145,7 @@ var Switch = React__namespace.forwardRef(
         "label",
         {
           htmlFor: switchId,
+          "data-slot": "switch-label",
           className: chunkOR5DRJCW_cjs.cn(
             "text-foreground cursor-pointer font-medium select-none",
             labelSizeClasses[size || "md"],
@@ -155,6 +158,7 @@ var Switch = React__namespace.forwardRef(
         "p",
         {
           id: descriptionId,
+          "data-slot": "switch-description",
           className: chunkOR5DRJCW_cjs.cn(
             "text-muted-foreground",
             descriptionSizeClasses[size || "md"]
@@ -166,6 +170,7 @@ var Switch = React__namespace.forwardRef(
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
+        "data-slot": "switch-wrapper",
         className: chunkOR5DRJCW_cjs.cn(
           "flex items-center gap-3",
           labelPosition === "left" && "flex-row-reverse"
@@ -183,5 +188,5 @@ Switch.displayName = "Switch";
 exports.Switch = Switch;
 exports.switchThumbVariants = switchThumbVariants;
 exports.switchTrackVariants = switchTrackVariants;
-//# sourceMappingURL=chunk-RRQGH7C5.cjs.map
-//# sourceMappingURL=chunk-RRQGH7C5.cjs.map
+//# sourceMappingURL=chunk-VQW36LLX.cjs.map
+//# sourceMappingURL=chunk-VQW36LLX.cjs.map

package/dist/chunk-VQW36LLX.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Switch/Switch.tsx"],"names":["cva","React","jsx","cn","jsxs"],"mappings":"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","file":"chunk-VQW36LLX.cjs","sourcesContent":["import * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../utils/cn';\n\nconst switchTrackVariants = cva(\n  [\n    'relative inline-flex shrink-0',\n    'cursor-pointer rounded-full',\n    'transition-colors duration-200 ease-in-out',\n    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',\n    'disabled:cursor-not-allowed disabled:opacity-50',\n    'bg-neutral-200 dark:bg-neutral-700',\n    'data-[state=checked]:bg-primary-500',\n  ],\n  {\n    variants: {\n      size: {\n        sm: 'h-5 w-9',\n        md: 'h-6 w-11',\n        lg: 'h-7 w-14',\n      },\n    },\n    defaultVariants: {\n      size: 'md',\n    },\n  }\n);\n\nconst switchThumbVariants = cva(\n  [\n    'pointer-events-none inline-block rounded-full',\n    'bg-white shadow-lg',\n    'ring-0 transition-transform duration-200 ease-in-out',\n  ],\n  {\n    variants: {\n      size: {\n        sm: 'h-4 w-4 data-[state=checked]:translate-x-4 translate-x-0.5',\n        md: 'h-5 w-5 data-[state=checked]:translate-x-5 translate-x-0.5',\n        lg: 'h-6 w-6 data-[state=checked]:translate-x-7 translate-x-0.5',\n      },\n    },\n    defaultVariants: {\n      size: 'md',\n    },\n  }\n);\n\nexport interface SwitchProps\n  extends\n    Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onChange'>,\n    VariantProps<typeof switchTrackVariants> {\n  /** Controlled checked state */\n  checked?: boolean;\n  /** Default checked state (uncontrolled) */\n  defaultChecked?: boolean;\n  /** Callback when checked state changes */\n  onCheckedChange?: (checked: boolean) => void;\n  /** Label for the switch */\n  label?: string;\n  /** Description text */\n  description?: string;\n  /** Position of the label */\n  labelPosition?: 'left' | 'right';\n  /** ID for the switch */\n  id?: string;\n}\n\n/**\n * An accessible toggle switch component.\n *\n * @example\n * ```tsx\n * <Switch label=\"Enable notifications\" />\n * <Switch\n *   label=\"Dark mode\"\n *   description=\"Toggle between light and dark theme\"\n * />\n * ```\n */\nconst Switch = React.forwardRef<HTMLButtonElement, SwitchProps>(\n  (\n    {\n      className,\n      size,\n      checked: controlledChecked,\n      defaultChecked = false,\n      onCheckedChange,\n      label,\n      description,\n      labelPosition = 'right',\n      disabled,\n      id,\n      ...props\n    },\n    ref\n  ) => {\n    const [uncontrolledChecked, setUncontrolledChecked] =\n      React.useState(defaultChecked);\n\n    const generatedId = React.useId();\n    const switchId = id || generatedId;\n    const descriptionId = `${switchId}-description`;\n\n    const isControlled = controlledChecked !== undefined;\n    const isChecked = isControlled ? controlledChecked : uncontrolledChecked;\n\n    const handleToggle = React.useCallback(() => {\n      if (disabled) return;\n\n      const newValue = !isChecked;\n      if (!isControlled) {\n        setUncontrolledChecked(newValue);\n      }\n      onCheckedChange?.(newValue);\n    }, [disabled, isChecked, isControlled, onCheckedChange]);\n\n    const handleKeyDown = React.useCallback(\n      (e: React.KeyboardEvent<HTMLButtonElement>) => {\n        if (e.key === 'Enter' || e.key === ' ') {\n          e.preventDefault();\n          handleToggle();\n        }\n      },\n      [handleToggle]\n    );\n\n    const switchElement = (\n      <button\n        ref={ref}\n        data-slot=\"switch\"\n        id={switchId}\n        type=\"button\"\n        role=\"switch\"\n        aria-checked={isChecked}\n        aria-describedby={description ? descriptionId : undefined}\n        data-state={isChecked ? 'checked' : 'unchecked'}\n        disabled={disabled}\n        onClick={handleToggle}\n        onKeyDown={handleKeyDown}\n        className={cn(switchTrackVariants({ size }), 'items-center', className)}\n        {...props}\n      >\n        <span\n          data-slot=\"switch-thumb\"\n          data-state={isChecked ? 'checked' : 'unchecked'}\n          className={switchThumbVariants({ size })}\n        />\n      </button>\n    );\n\n    const labelSizeClasses = {\n      sm: 'text-xs',\n      md: 'text-sm',\n      lg: 'text-base',\n    };\n\n    const descriptionSizeClasses = {\n      sm: 'text-[10px]',\n      md: 'text-xs',\n      lg: 'text-sm',\n    };\n\n    const labelElement = label && (\n      <div className=\"flex flex-col gap-0.5\">\n        <label\n          htmlFor={switchId}\n          data-slot=\"switch-label\"\n          className={cn(\n            'text-foreground cursor-pointer font-medium select-none',\n            labelSizeClasses[size || 'md'],\n            disabled && 'cursor-not-allowed opacity-50'\n          )}\n        >\n          {label}\n        </label>\n        {description && (\n          <p\n            id={descriptionId}\n            data-slot=\"switch-description\"\n            className={cn(\n              'text-muted-foreground',\n              descriptionSizeClasses[size || 'md']\n            )}\n          >\n            {description}\n          </p>\n        )}\n      </div>\n    );\n\n    return (\n      <div\n        data-slot=\"switch-wrapper\"\n        className={cn(\n          'flex items-center gap-3',\n          labelPosition === 'left' && 'flex-row-reverse'\n        )}\n      >\n        {switchElement}\n        {labelElement}\n      </div>\n    );\n  }\n);\n\nSwitch.displayName = 'Switch';\n\nexport { Switch, switchTrackVariants, switchThumbVariants };\n"]}

package/dist/{chunk-IY7UQPDO.cjs → chunk-WGPMTW36.cjs}

@@ -63,6 +63,7 @@ var Alert = React__namespace.forwardRef(
       {
         ref,
         role: "alert",
+        "data-slot": "alert",
         className: chunkOR5DRJCW_cjs.cn(
           alertVariants({ variant }),
           React__namespace.isValidElement(icon) && "pl-11",
@@ -77,6 +78,7 @@ var Alert = React__namespace.forwardRef(
             "button",
             {
               type: "button",
+              "data-slot": "alert-dismiss",
               onClick: onDismiss,
               className: chunkOR5DRJCW_cjs.cn(
                 "absolute top-2 right-2 rounded-md p-1",
@@ -98,6 +100,7 @@ var AlertTitle = React__namespace.forwardRef(({ className, children, ...props },
   "h5",
   {
     ref,
+    "data-slot": "alert-title",
     className: chunkOR5DRJCW_cjs.cn("mb-1 leading-none font-semibold tracking-tight", className),
     ...props,
     children
@@ -108,6 +111,7 @@ var AlertDescription = React__namespace.forwardRef(({ className, ...props }, ref
   "p",
   {
     ref,
+    "data-slot": "alert-description",
     className: chunkOR5DRJCW_cjs.cn("text-sm [&_p]:leading-relaxed", className),
     ...props
   }
@@ -118,5 +122,5 @@ exports.Alert = Alert;
 exports.AlertDescription = AlertDescription;
 exports.AlertTitle = AlertTitle;
 exports.alertVariants = alertVariants;
-//# sourceMappingURL=chunk-IY7UQPDO.cjs.map
-//# sourceMappingURL=chunk-IY7UQPDO.cjs.map
+//# sourceMappingURL=chunk-WGPMTW36.cjs.map
+//# sourceMappingURL=chunk-WGPMTW36.cjs.map

package/dist/chunk-WGPMTW36.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Alert/Alert.tsx"],"names":["cva","React","jsxs","cn","jsx","X"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,IAAM,aAAA,GAAgBA,0BAAA;AAAA,EACpB;AAAA,IACE,uCAAA;AAAA,IACA,oEAAA;AAAA,IACA;AAAA,GACF;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,OAAA,EAAS;AAAA,QACP,OAAA,EAAS,6CAAA;AAAA,QACT,IAAA,EAAM,qHAAA;AAAA,QACN,OAAA,EACE,yGAAA;AAAA,QACF,OAAA,EACE,+GAAA;AAAA,QACF,MAAA,EACE;AAAA;AACJ,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,OAAA,EAAS;AAAA;AACX;AAEJ;AA2BA,IAAM,KAAA,GAAcC,gBAAA,CAAA,UAAA;AAAA,EAClB,CACE;AAAA,IACE,SAAA;AAAA,IACA,OAAA;AAAA,IACA,IAAA;AAAA,IACA,WAAA;AAAA,IACA,SAAA;AAAA,IACA,YAAA,GAAe,eAAA;AAAA,IACf,QAAA;AAAA,IACA,GAAG;AAAA,KAEL,GAAA,KACG;AACH,IAAA,uBACEC,eAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,IAAA,EAAK,OAAA;AAAA,QACL,WAAA,EAAU,OAAA;AAAA,QACV,SAAA,EAAWC,oBAAA;AAAA,UACT,aAAA,CAAc,EAAE,OAAA,EAAS,CAAA;AAAA,UACnBF,gBAAA,CAAA,cAAA,CAAe,IAAI,CAAA,IAAK,OAAA;AAAA,UAC9B,WAAA,IAAe,OAAA;AAAA,UACf;AAAA,SACF;AAAA,QACC,GAAG,KAAA;AAAA,QAEH,QAAA,EAAA;AAAA,UAAMA,gBAAA,CAAA,cAAA,CAAe,IAAI,CAAA,IAAK,IAAA;AAAA,0BAC/BG,cAAA,CAAC,SAAK,QAAA,EAAS,CAAA;AAAA,UACd,WAAA,oBACCA,cAAA;AAAA,YAAC,QAAA;AAAA,YAAA;AAAA,cACC,IAAA,EAAK,QAAA;AAAA,cACL,WAAA,EAAU,eAAA;AAAA,cACV,OAAA,EAAS,SAAA;AAAA,cACT,SAAA,EAAWD,oBAAA;AAAA,gBACT,uCAAA;AAAA,gBACA,8BAAA;AAAA,gBACA,qGAAA;AAAA,gBACA;AAAA,eACF;AAAA,cACA,YAAA,EAAY,YAAA;AAAA,cAEZ,QAAA,kBAAAC,cAAA,CAACC,aAAA,EAAA,EAAE,IAAA,EAAM,EAAA,EAAI,eAAY,MAAA,EAAO;AAAA;AAAA;AAClC;AAAA;AAAA,KAEJ;AAAA,EAEJ;AACF;AAEA,KAAA,CAAM,WAAA,GAAc,OAAA;AAKpB,IAAM,UAAA,GAAmBJ,4BAGvB,CAAC,EAAE,WAAW,QAAA,EAAU,GAAG,KAAA,EAAM,EAAG,GAAA,qBACpCG,cAAA;AAAA,EAAC,IAAA;AAAA,EAAA;AAAA,IACC,GAAA;AAAA,IACA,WAAA,EAAU,aAAA;AAAA,IACV,SAAA,EAAWD,oBAAA,CAAG,gDAAA,EAAkD,SAAS,CAAA;AAAA,IACxE,GAAG,KAAA;AAAA,IAEH;AAAA;AACH,CACD;AAED,UAAA,CAAW,WAAA,GAAc,YAAA;AAKzB,IAAM,gBAAA,GAAyBF,4BAG7B,CAAC,EAAE,WAAW,GAAG,KAAA,IAAS,GAAA,qBAC1BG,cAAA;AAAA,EAAC,GAAA;AAAA,EAAA;AAAA,IACC,GAAA;AAAA,IACA,WAAA,EAAU,mBAAA;AAAA,IACV,SAAA,EAAWD,oBAAA,CAAG,+BAAA,EAAiC,SAAS,CAAA;AAAA,IACvD,GAAG;AAAA;AACN,CACD;AAED,gBAAA,CAAiB,WAAA,GAAc,kBAAA","file":"chunk-WGPMTW36.cjs","sourcesContent":["import * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { X } from 'lucide-react';\nimport { cn } from '../../utils/cn';\n\nconst alertVariants = cva(\n  [\n    'relative w-full rounded-lg border p-4',\n    '[&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-current',\n    '[&>svg+div]:translate-y-[-3px]',\n  ],\n  {\n    variants: {\n      variant: {\n        default: 'bg-background text-foreground border-border',\n        info: 'bg-primary-50 text-primary-900 border-primary-200 dark:bg-primary-950 dark:text-primary-100 dark:border-primary-800',\n        success:\n          'bg-green-50 text-green-900 border-green-200 dark:bg-green-950 dark:text-green-100 dark:border-green-800',\n        warning:\n          'bg-yellow-50 text-yellow-900 border-yellow-200 dark:bg-yellow-950 dark:text-yellow-100 dark:border-yellow-800',\n        danger:\n          'bg-red-50 text-red-900 border-red-200 dark:bg-red-950 dark:text-red-100 dark:border-red-800',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  }\n);\n\nexport interface AlertProps\n  extends\n    React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof alertVariants> {\n  /** Icon to display in the alert */\n  icon?: React.ReactElement | null;\n  /** Whether the alert can be dismissed */\n  dismissible?: boolean;\n  /** Callback when the alert is dismissed */\n  onDismiss?: () => void;\n  /** Accessible label for the dismiss button */\n  dismissLabel?: string;\n}\n\n/**\n * An alert component for displaying important messages.\n *\n * @example\n * ```tsx\n * <Alert variant=\"success\">\n *   <AlertTitle>Success!</AlertTitle>\n *   <AlertDescription>Your changes have been saved.</AlertDescription>\n * </Alert>\n * ```\n */\nconst Alert = React.forwardRef<HTMLDivElement, AlertProps>(\n  (\n    {\n      className,\n      variant,\n      icon,\n      dismissible,\n      onDismiss,\n      dismissLabel = 'Dismiss alert',\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    return (\n      <div\n        ref={ref}\n        role=\"alert\"\n        data-slot=\"alert\"\n        className={cn(\n          alertVariants({ variant }),\n          React.isValidElement(icon) && 'pl-11',\n          dismissible && 'pr-10',\n          className\n        )}\n        {...props}\n      >\n        {React.isValidElement(icon) && icon}\n        <div>{children}</div>\n        {dismissible && (\n          <button\n            type=\"button\"\n            data-slot=\"alert-dismiss\"\n            onClick={onDismiss}\n            className={cn(\n              'absolute top-2 right-2 rounded-md p-1',\n              'opacity-70 hover:opacity-100',\n              'focus-visible:ring-ring focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none',\n              'transition-opacity'\n            )}\n            aria-label={dismissLabel}\n          >\n            <X size={16} aria-hidden=\"true\" />\n          </button>\n        )}\n      </div>\n    );\n  }\n);\n\nAlert.displayName = 'Alert';\n\n/**\n * Title for an Alert component.\n */\nconst AlertTitle = React.forwardRef<\n  globalThis.HTMLHeadingElement,\n  React.HTMLAttributes<globalThis.HTMLHeadingElement>\n>(({ className, children, ...props }, ref) => (\n  <h5\n    ref={ref}\n    data-slot=\"alert-title\"\n    className={cn('mb-1 leading-none font-semibold tracking-tight', className)}\n    {...props}\n  >\n    {children}\n  </h5>\n));\n\nAlertTitle.displayName = 'AlertTitle';\n\n/**\n * Description text for an Alert component.\n */\nconst AlertDescription = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n  <p\n    ref={ref}\n    data-slot=\"alert-description\"\n    className={cn('text-sm [&_p]:leading-relaxed', className)}\n    {...props}\n  />\n));\n\nAlertDescription.displayName = 'AlertDescription';\n\nexport { Alert, AlertTitle, AlertDescription, alertVariants };\n"]}

package/dist/{chunk-SOFX4T7M.js → chunk-WOYUQ4AT.js}

@@ -1,6 +1,33 @@
 // src/brands/types.ts
 function generateBrandCSS(brand) {
   const { colors, typography, borderRadius, boxShadow } = brand;
+  const scaleNames = [
+    "primary",
+    "secondary",
+    "neutral",
+    "destructive",
+    "success",
+    "warning",
+    "info"
+  ];
+  const scaleBlocks = scaleNames.filter(
+    (name) => name in colors && typeof colors[name] === "object" && colors[name] !== void 0
+  ).map((name) => {
+    const scale = colors[name];
+    const label = name.charAt(0).toUpperCase() + name.slice(1);
+    return `  /* ${label} Color Scale */
+  --mieweb-${name}-50: ${scale[50]};
+  --mieweb-${name}-100: ${scale[100]};
+  --mieweb-${name}-200: ${scale[200]};
+  --mieweb-${name}-300: ${scale[300]};
+  --mieweb-${name}-400: ${scale[400]};
+  --mieweb-${name}-500: ${scale[500]};
+  --mieweb-${name}-600: ${scale[600]};
+  --mieweb-${name}-700: ${scale[700]};
+  --mieweb-${name}-800: ${scale[800]};
+  --mieweb-${name}-900: ${scale[900]};
+  --mieweb-${name}-950: ${scale[950]};`;
+  }).join("\n\n");
   return `/**
  * ${brand.displayName} Brand Theme
  * Generated by @mieweb/ui
@@ -12,18 +39,7 @@ function generateBrandCSS(brand) {
    ============================================ */
 
 :root {
-  /* Primary Color Scale */
-  --mieweb-primary-50: ${colors.primary[50]};
-  --mieweb-primary-100: ${colors.primary[100]};
-  --mieweb-primary-200: ${colors.primary[200]};
-  --mieweb-primary-300: ${colors.primary[300]};
-  --mieweb-primary-400: ${colors.primary[400]};
-  --mieweb-primary-500: ${colors.primary[500]};
-  --mieweb-primary-600: ${colors.primary[600]};
-  --mieweb-primary-700: ${colors.primary[700]};
-  --mieweb-primary-800: ${colors.primary[800]};
-  --mieweb-primary-900: ${colors.primary[900]};
-  --mieweb-primary-950: ${colors.primary[950]};
+${scaleBlocks}
 
   /* Light Mode Semantic Colors */
   --mieweb-background: ${colors.light.background};
@@ -84,12 +100,26 @@ function generateBrandCSS(brand) {
 }
 function generateTailwindTheme(brand) {
   const { colors, typography, borderRadius, boxShadow } = brand;
+  const colorConfig = {
+    primary: colors.primary,
+    // Expose brand colors under the brand name for semantic usage
+    [brand.name]: colors.primary
+  };
+  const optionalScales = [
+    "secondary",
+    "neutral",
+    "destructive",
+    "success",
+    "warning",
+    "info"
+  ];
+  for (const scale of optionalScales) {
+    if (colors[scale]) {
+      colorConfig[scale] = colors[scale];
+    }
+  }
   return {
-    colors: {
-      primary: colors.primary,
-      // Expose brand colors under the brand name for semantic usage
-      [brand.name]: colors.primary
-    },
+    colors: colorConfig,
     fontFamily: {
       sans: typography.fontFamily.sans,
       ...typography.fontFamily.mono ? { mono: typography.fontFamily.mono } : {}
@@ -120,5 +150,5 @@ function createBrandPreset(brand) {
 }
 
 export { createBrandPreset, generateBrandCSS, generateTailwindTheme };
-//# sourceMappingURL=chunk-SOFX4T7M.js.map
-//# sourceMappingURL=chunk-SOFX4T7M.js.map
+//# sourceMappingURL=chunk-WOYUQ4AT.js.map
+//# sourceMappingURL=chunk-WOYUQ4AT.js.map

package/dist/chunk-WOYUQ4AT.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/brands/types.ts"],"names":[],"mappings":"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","file":"chunk-WOYUQ4AT.js","sourcesContent":["/**\n * @mieweb/ui Brand System Types\n *\n * This module provides type definitions and utilities for brand themes.\n * Brands define colors, typography, spacing, and other design tokens that\n * can be applied to @mieweb/ui components.\n */\n\n// ============================================================================\n// Type Definitions\n// ============================================================================\n\n/**\n * Primary color scale (50-950) following Tailwind conventions.\n */\nexport interface ColorScale {\n  50: string;\n  100: string;\n  200: string;\n  300: string;\n  400: string;\n  500: string;\n  600: string;\n  700: string;\n  800: string;\n  900: string;\n  950: string;\n}\n\n/**\n * Semantic colors for a specific color mode (light or dark).\n */\nexport interface SemanticColors {\n  /** Page background color */\n  background: string;\n  /** Primary text color */\n  foreground: string;\n  /** Card/panel background */\n  card: string;\n  /** Card text color */\n  cardForeground: string;\n  /** Muted/subtle background */\n  muted: string;\n  /** Muted/secondary text */\n  mutedForeground: string;\n  /** Border color */\n  border: string;\n  /** Input border color */\n  input: string;\n  /** Focus ring color */\n  ring: string;\n  /** Destructive/error color */\n  destructive: string;\n  /** Text on destructive backgrounds */\n  destructiveForeground: string;\n  /** Success color */\n  success: string;\n  /** Text on success backgrounds */\n  successForeground: string;\n  /** Warning color */\n  warning: string;\n  /** Text on warning backgrounds */\n  warningForeground: string;\n}\n\n/**\n * Complete color configuration for a brand.\n */\nexport interface BrandColors {\n  /** Primary brand color scale */\n  primary: ColorScale;\n  /** Secondary color scale (optional — falls back to library defaults) */\n  secondary?: ColorScale;\n  /** Neutral / gray color scale (optional — falls back to library defaults) */\n  neutral?: ColorScale;\n  /** Destructive / error color scale (optional — falls back to library defaults) */\n  destructive?: ColorScale;\n  /** Success color scale (optional — falls back to library defaults) */\n  success?: ColorScale;\n  /** Warning color scale (optional — falls back to library defaults) */\n  warning?: ColorScale;\n  /** Info color scale (optional — falls back to library defaults) */\n  info?: ColorScale;\n  /** Light mode semantic colors */\n  light: SemanticColors;\n  /** Dark mode semantic colors */\n  dark: SemanticColors;\n}\n\n/**\n * Typography configuration for a brand.\n */\nexport interface BrandTypography {\n  /** Font family stack for body text */\n  fontFamily: {\n    sans: string[];\n    mono?: string[];\n  };\n  /** Base font size (usually 16px) */\n  baseFontSize?: string;\n}\n\n/**\n * Border radius configuration.\n */\nexport interface BrandBorderRadius {\n  none: string;\n  sm: string;\n  md: string;\n  lg: string;\n  xl: string;\n  '2xl': string;\n  full: string;\n}\n\n/**\n * Box shadow configuration.\n */\nexport interface BrandBoxShadow {\n  card: string;\n  dropdown: string;\n  modal: string;\n}\n\n/**\n * Complete brand configuration.\n */\nexport interface BrandConfig {\n  /** Unique identifier (lowercase, no spaces) */\n  name: string;\n  /** Human-readable display name */\n  displayName: string;\n  /** Brand description */\n  description?: string;\n  /** Color configuration */\n  colors: BrandColors;\n  /** Typography settings */\n  typography: BrandTypography;\n  /** Border radius scale */\n  borderRadius: BrandBorderRadius;\n  /** Box shadow definitions */\n  boxShadow: BrandBoxShadow;\n}\n\n// ============================================================================\n// CSS Generation\n// ============================================================================\n\n/**\n * Generate CSS custom properties from a brand configuration.\n * This creates a standalone CSS file that can be imported into any project.\n */\nexport function generateBrandCSS(brand: BrandConfig): string {\n  const { colors, typography, borderRadius, boxShadow } = brand;\n\n  // Collect all color scales (primary + any optional scales)\n  const scaleNames = [\n    'primary',\n    'secondary',\n    'neutral',\n    'destructive',\n    'success',\n    'warning',\n    'info',\n  ] as const;\n\n  const scaleBlocks = scaleNames\n    .filter(\n      (name) =>\n        name in colors &&\n        typeof colors[name] === 'object' &&\n        colors[name] !== undefined\n    )\n    .map((name) => {\n      const scale = colors[name] as ColorScale;\n      const label = name.charAt(0).toUpperCase() + name.slice(1);\n      return `  /* ${label} Color Scale */\n  --mieweb-${name}-50: ${scale[50]};\n  --mieweb-${name}-100: ${scale[100]};\n  --mieweb-${name}-200: ${scale[200]};\n  --mieweb-${name}-300: ${scale[300]};\n  --mieweb-${name}-400: ${scale[400]};\n  --mieweb-${name}-500: ${scale[500]};\n  --mieweb-${name}-600: ${scale[600]};\n  --mieweb-${name}-700: ${scale[700]};\n  --mieweb-${name}-800: ${scale[800]};\n  --mieweb-${name}-900: ${scale[900]};\n  --mieweb-${name}-950: ${scale[950]};`;\n    })\n    .join('\\n\\n');\n\n  return `/**\n * ${brand.displayName} Brand Theme\n * Generated by @mieweb/ui\n * ${brand.description || ''}\n */\n\n/* ============================================\n   ${brand.displayName} Design Tokens\n   ============================================ */\n\n:root {\n${scaleBlocks}\n\n  /* Light Mode Semantic Colors */\n  --mieweb-background: ${colors.light.background};\n  --mieweb-foreground: ${colors.light.foreground};\n  --mieweb-card: ${colors.light.card};\n  --mieweb-card-foreground: ${colors.light.cardForeground};\n  --mieweb-muted: ${colors.light.muted};\n  --mieweb-muted-foreground: ${colors.light.mutedForeground};\n  --mieweb-border: ${colors.light.border};\n  --mieweb-input: ${colors.light.input};\n  --mieweb-ring: ${colors.light.ring};\n  --mieweb-destructive: ${colors.light.destructive};\n  --mieweb-destructive-foreground: ${colors.light.destructiveForeground};\n  --mieweb-success: ${colors.light.success};\n  --mieweb-success-foreground: ${colors.light.successForeground};\n  --mieweb-warning: ${colors.light.warning};\n  --mieweb-warning-foreground: ${colors.light.warningForeground};\n\n  /* Typography */\n  --mieweb-font-sans: ${typography.fontFamily.sans.map((f) => (f.includes(' ') ? `\"${f}\"` : f)).join(', ')};\n  ${typography.fontFamily.mono ? `--mieweb-font-mono: ${typography.fontFamily.mono.map((f) => (f.includes(' ') ? `\"${f}\"` : f)).join(', ')};` : ''}\n\n  /* Border Radius */\n  --mieweb-radius-none: ${borderRadius.none};\n  --mieweb-radius-sm: ${borderRadius.sm};\n  --mieweb-radius-md: ${borderRadius.md};\n  --mieweb-radius-lg: ${borderRadius.lg};\n  --mieweb-radius-xl: ${borderRadius.xl};\n  --mieweb-radius-2xl: ${borderRadius['2xl']};\n  --mieweb-radius-full: ${borderRadius.full};\n\n  /* Shadows */\n  --mieweb-shadow-card: ${boxShadow.card};\n  --mieweb-shadow-dropdown: ${boxShadow.dropdown};\n  --mieweb-shadow-modal: ${boxShadow.modal};\n}\n\n/* Dark Mode */\n[data-theme=\"dark\"],\n.dark {\n  --mieweb-background: ${colors.dark.background};\n  --mieweb-foreground: ${colors.dark.foreground};\n  --mieweb-card: ${colors.dark.card};\n  --mieweb-card-foreground: ${colors.dark.cardForeground};\n  --mieweb-muted: ${colors.dark.muted};\n  --mieweb-muted-foreground: ${colors.dark.mutedForeground};\n  --mieweb-border: ${colors.dark.border};\n  --mieweb-input: ${colors.dark.input};\n  --mieweb-ring: ${colors.dark.ring};\n  --mieweb-destructive: ${colors.dark.destructive};\n  --mieweb-destructive-foreground: ${colors.dark.destructiveForeground};\n  --mieweb-success: ${colors.dark.success};\n  --mieweb-success-foreground: ${colors.dark.successForeground};\n  --mieweb-warning: ${colors.dark.warning};\n  --mieweb-warning-foreground: ${colors.dark.warningForeground};\n}\n`;\n}\n\n// ============================================================================\n// Tailwind Theme Generation\n// ============================================================================\n\n/**\n * Generate Tailwind CSS theme configuration from a brand.\n * Use this in your tailwind.config.js to apply the brand.\n */\nexport function generateTailwindTheme(brand: BrandConfig) {\n  const { colors, typography, borderRadius, boxShadow } = brand;\n\n  // Build color config including all provided optional scales\n  const colorConfig: Record<string, ColorScale> = {\n    primary: colors.primary,\n    // Expose brand colors under the brand name for semantic usage\n    [brand.name]: colors.primary,\n  };\n\n  const optionalScales = [\n    'secondary',\n    'neutral',\n    'destructive',\n    'success',\n    'warning',\n    'info',\n  ] as const;\n\n  for (const scale of optionalScales) {\n    if (colors[scale]) {\n      colorConfig[scale] = colors[scale];\n    }\n  }\n\n  return {\n    colors: colorConfig,\n    fontFamily: {\n      sans: typography.fontFamily.sans,\n      ...(typography.fontFamily.mono\n        ? { mono: typography.fontFamily.mono }\n        : {}),\n    },\n    borderRadius: {\n      none: borderRadius.none,\n      sm: borderRadius.sm,\n      md: borderRadius.md,\n      lg: borderRadius.lg,\n      xl: borderRadius.xl,\n      '2xl': borderRadius['2xl'],\n      full: borderRadius.full,\n    },\n    boxShadow: {\n      card: boxShadow.card,\n      dropdown: boxShadow.dropdown,\n      modal: boxShadow.modal,\n    },\n  };\n}\n\n/**\n * Generate a complete Tailwind preset for a brand.\n * This includes the mieweb/ui base preset plus brand-specific overrides.\n */\nexport function createBrandPreset(brand: BrandConfig) {\n  return {\n    darkMode: ['class', '[data-theme=\"dark\"]'] as const,\n    theme: {\n      extend: generateTailwindTheme(brand),\n    },\n  };\n}\n"]}

package/dist/{chunk-SD44QJIP.js → chunk-WTDCNXZO.js}

@@ -11,7 +11,7 @@ var scrollLockState = {
   originalOverflow: null};
 var modalOverlayVariants = cva(
   [
-    "fixed inset-0 z-50",
+    "fixed inset-0",
     "bg-black/50 backdrop-blur-sm",
     "data-[state=open]:animate-in data-[state=open]:fade-in-0",
     "data-[state=closed]:animate-out data-[state=closed]:fade-out-0"
@@ -23,10 +23,17 @@ var modalOverlayVariants = cva(
 );
 var modalContentVariants = cva(
   [
-    "fixed left-1/2 top-1/2 z-50",
-    "-translate-x-1/2 -translate-y-1/2",
-    "w-full bg-card text-card-foreground",
-    "border border-border rounded-xl shadow-lg",
+    "relative w-full bg-card text-card-foreground",
+    "border border-border shadow-lg",
+    // Full-screen on mobile, rounded on larger screens
+    "rounded-none sm:rounded-xl",
+    "flex flex-col",
+    // Full viewport height on mobile, constrained on larger screens
+    "max-h-dvh sm:max-h-[calc(100dvh-2rem)]",
+    "min-h-dvh sm:min-h-0",
+    // If a <form> is used as a direct child (wrapping ModalBody + ModalFooter),
+    // make it participate in the flex column layout so overflow constraints work.
+    "[&>form]:flex [&>form]:flex-col [&>form]:flex-1 [&>form]:min-h-0",
     "focus:outline-none",
     "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
     "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
@@ -35,13 +42,13 @@ var modalContentVariants = cva(
   {
     variants: {
       size: {
-        sm: "max-w-sm",
-        md: "max-w-md",
-        lg: "max-w-lg",
-        xl: "max-w-xl",
-        "2xl": "max-w-2xl",
-        "3xl": "max-w-3xl",
-        "4xl": "max-w-4xl",
+        sm: "sm:max-w-sm",
+        md: "sm:max-w-md",
+        lg: "sm:max-w-lg",
+        xl: "sm:max-w-xl",
+        "2xl": "sm:max-w-2xl",
+        "3xl": "sm:max-w-3xl",
+        "4xl": "sm:max-w-4xl",
         full: "max-w-[calc(100vw-2rem)]"
       }
     },
@@ -107,26 +114,34 @@ function Modal({
           {
             className: cn(modalOverlayVariants()),
             "data-state": open ? "open" : "closed",
-            onClick: handleOverlayClick,
             "aria-hidden": "true"
           }
         ),
-        /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx("div", { className: "fixed inset-0 overflow-y-auto", children: /* @__PURE__ */ jsx(
           "div",
           {
-            ref: focusTrapRef,
-            role: "dialog",
-            "aria-modal": "true",
-            "aria-label": ariaLabel,
-            "aria-labelledby": ariaLabelledBy || `${modalId}-title`,
-            "aria-describedby": ariaDescribedBy,
-            id: modalId,
-            tabIndex: -1,
-            "data-state": open ? "open" : "closed",
-            className: cn(modalContentVariants({ size }), className),
-            children
+            className: "flex min-h-full items-center justify-center p-0 sm:p-4",
+            onClick: handleOverlayClick,
+            children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                ref: focusTrapRef,
+                role: "dialog",
+                "aria-modal": "true",
+                "aria-label": ariaLabel,
+                "aria-labelledby": ariaLabelledBy || `${modalId}-title`,
+                "aria-describedby": ariaDescribedBy,
+                id: modalId,
+                tabIndex: -1,
+                "data-state": open ? "open" : "closed",
+                "data-slot": "modal",
+                className: cn(modalContentVariants({ size }), className),
+                onClick: (e) => e.stopPropagation(),
+                children
+              }
+            )
           }
-        )
+        ) })
       ] })
     }
   );
@@ -147,8 +162,9 @@ var ModalHeader = React.forwardRef(
     "div",
     {
       ref,
+      "data-slot": "modal-header",
       className: cn(
-        "flex items-center justify-between",
+        "flex shrink-0 items-center justify-between",
         "border-border border-b px-6 py-4",
         className
       ),
@@ -165,6 +181,7 @@ var ModalTitle = React.forwardRef(
       {
         ref,
         id: `${modalId}-title`,
+        "data-slot": "modal-title",
         className: cn(
           "text-lg leading-none font-semibold tracking-tight",
           className
@@ -194,6 +211,7 @@ var ModalClose = React.forwardRef(
         ref,
         type: "button",
         onClick: handleClick,
+        "data-slot": "modal-close",
         className: cn(
           "inline-flex h-8 w-8 items-center justify-center rounded-lg",
           "text-muted-foreground hover:text-foreground",
@@ -210,7 +228,15 @@ var ModalClose = React.forwardRef(
 );
 ModalClose.displayName = "ModalClose";
 var ModalBody = React.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("px-6 py-4", className), ...props })
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      "data-slot": "modal-body",
+      className: cn("min-h-0 flex-1 overflow-y-auto px-6 py-4", className),
+      ...props
+    }
+  )
 );
 ModalBody.displayName = "ModalBody";
 var ModalFooter = React.forwardRef(
@@ -218,8 +244,9 @@ var ModalFooter = React.forwardRef(
     "div",
     {
       ref,
+      "data-slot": "modal-footer",
       className: cn(
-        "flex items-center justify-end gap-3",
+        "flex shrink-0 items-center justify-end gap-3",
         "border-border border-t px-6 py-4",
         className
       ),
@@ -251,5 +278,5 @@ function CloseIcon() {
 }
 
 export { Modal, ModalBody, ModalClose, ModalFooter, ModalHeader, ModalTitle, modalContentVariants, modalOverlayVariants };
-//# sourceMappingURL=chunk-SD44QJIP.js.map
-//# sourceMappingURL=chunk-SD44QJIP.js.map
+//# sourceMappingURL=chunk-WTDCNXZO.js.map
+//# sourceMappingURL=chunk-WTDCNXZO.js.map

package/dist/chunk-WTDCNXZO.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Modal/Modal.tsx"],"names":[],"mappings":"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","file":"chunk-WTDCNXZO.js","sourcesContent":["import * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../utils/cn';\nimport { isStorybookDocsMode } from '../../utils/environment';\nimport { useFocusTrap } from '../../hooks/useFocusTrap';\nimport { useEscapeKey } from '../../hooks/useEscapeKey';\n\n/**\n * Modal scroll lock state manager.\n * Uses a singleton pattern with ref-like storage to track open modals\n * and manage body scroll locking across multiple modal instances.\n * Includes reset capability for testing environments.\n */\nconst scrollLockState = {\n  count: 0,\n  originalOverflow: null as string | null,\n  reset() {\n    this.count = 0;\n    this.originalOverflow = null;\n  },\n};\n\n// Export for testing environments\nexport const __resetScrollLockState = () => scrollLockState.reset();\n\nconst modalOverlayVariants = cva(\n  [\n    'fixed inset-0',\n    'bg-black/50 backdrop-blur-sm',\n    'data-[state=open]:animate-in data-[state=open]:fade-in-0',\n    'data-[state=closed]:animate-out data-[state=closed]:fade-out-0',\n  ],\n  {\n    variants: {},\n    defaultVariants: {},\n  }\n);\n\nconst modalContentVariants = cva(\n  [\n    'relative w-full bg-card text-card-foreground',\n    'border border-border shadow-lg',\n    // Full-screen on mobile, rounded on larger screens\n    'rounded-none sm:rounded-xl',\n    'flex flex-col',\n    // Full viewport height on mobile, constrained on larger screens\n    'max-h-dvh sm:max-h-[calc(100dvh-2rem)]',\n    'min-h-dvh sm:min-h-0',\n    // If a <form> is used as a direct child (wrapping ModalBody + ModalFooter),\n    // make it participate in the flex column layout so overflow constraints work.\n    '[&>form]:flex [&>form]:flex-col [&>form]:flex-1 [&>form]:min-h-0',\n    'focus:outline-none',\n    'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',\n    'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',\n    'duration-200',\n  ],\n  {\n    variants: {\n      size: {\n        sm: 'sm:max-w-sm',\n        md: 'sm:max-w-md',\n        lg: 'sm:max-w-lg',\n        xl: 'sm:max-w-xl',\n        '2xl': 'sm:max-w-2xl',\n        '3xl': 'sm:max-w-3xl',\n        '4xl': 'sm:max-w-4xl',\n        full: 'max-w-[calc(100vw-2rem)]',\n      },\n    },\n    defaultVariants: {\n      size: 'md',\n    },\n  }\n);\n\nexport interface ModalProps extends VariantProps<typeof modalContentVariants> {\n  /** Whether the modal is open */\n  open: boolean;\n  /** Callback when the modal should close */\n  onOpenChange: (open: boolean) => void;\n  /** Modal content */\n  children: React.ReactNode;\n  /** Whether to close when clicking the overlay */\n  closeOnOverlayClick?: boolean;\n  /** Whether to close when pressing Escape */\n  closeOnEscape?: boolean;\n  /** Additional class name for the modal content */\n  className?: string;\n  /** ID for the modal, used for accessibility */\n  id?: string;\n  /** Accessible label for the modal */\n  'aria-label'?: string;\n  /** ID of the element that labels the modal */\n  'aria-labelledby'?: string;\n  /** ID of the element that describes the modal */\n  'aria-describedby'?: string;\n}\n\n/**\n * An accessible modal/dialog component.\n *\n * @example\n * ```tsx\n * <Modal open={isOpen} onOpenChange={setIsOpen} size=\"lg\">\n *   <ModalHeader>\n *     <ModalTitle>Confirm Action</ModalTitle>\n *     <ModalClose />\n *   </ModalHeader>\n *   <ModalBody>\n *     Are you sure you want to continue?\n *   </ModalBody>\n *   <ModalFooter>\n *     <Button variant=\"secondary\" onClick={() => setIsOpen(false)}>Cancel</Button>\n *     <Button onClick={handleConfirm}>Confirm</Button>\n *   </ModalFooter>\n * </Modal>\n * ```\n */\nfunction Modal({\n  open,\n  onOpenChange,\n  children,\n  size,\n  closeOnOverlayClick = true,\n  closeOnEscape = true,\n  className,\n  id,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledBy,\n  'aria-describedby': ariaDescribedBy,\n}: ModalProps) {\n  const generatedId = React.useId();\n  const modalId = id || generatedId;\n\n  // Focus trap (only active when modal is open)\n  const focusTrapRef = useFocusTrap<HTMLDivElement>(open);\n\n  // Handle escape key\n  useEscapeKey(() => {\n    if (closeOnEscape && open) {\n      onOpenChange(false);\n    }\n  }, open);\n\n  // Handle overlay click\n  const handleOverlayClick = React.useCallback(\n    (e: React.MouseEvent) => {\n      if (closeOnOverlayClick && e.target === e.currentTarget) {\n        onOpenChange(false);\n      }\n    },\n    [closeOnOverlayClick, onOpenChange]\n  );\n\n  // Prevent body scroll when modal is open (handles multiple modals)\n  // Skip scroll lock in Storybook docs mode where multiple stories render inline\n  React.useEffect(() => {\n    // Skip scroll lock entirely in Storybook docs mode\n    if (!open || isStorybookDocsMode()) {\n      return undefined;\n    }\n\n    scrollLockState.count++;\n    // Only capture and set overflow when first modal opens\n    if (scrollLockState.count === 1) {\n      scrollLockState.originalOverflow = document.body.style.overflow;\n      document.body.style.overflow = 'hidden';\n    }\n\n    return () => {\n      scrollLockState.count--;\n      // Only restore overflow when last modal closes\n      if (\n        scrollLockState.count === 0 &&\n        scrollLockState.originalOverflow !== null\n      ) {\n        document.body.style.overflow = scrollLockState.originalOverflow;\n        scrollLockState.originalOverflow = null;\n      }\n    };\n  }, [open]);\n\n  if (!open) return null;\n\n  return (\n    <ModalContext.Provider\n      value={{ onClose: () => onOpenChange(false), modalId }}\n    >\n      {/* Portal to body */}\n      <div className=\"fixed inset-0 z-50\">\n        {/* Overlay backdrop */}\n        <div\n          className={cn(modalOverlayVariants())}\n          data-state={open ? 'open' : 'closed'}\n          aria-hidden=\"true\"\n        />\n        {/* Scrollable centering container — click outside to close */}\n        <div className=\"fixed inset-0 overflow-y-auto\">\n          {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}\n          <div\n            className=\"flex min-h-full items-center justify-center p-0 sm:p-4\"\n            onClick={handleOverlayClick}\n          >\n            {/* Content */}\n            {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions */}\n            <div\n              ref={focusTrapRef}\n              role=\"dialog\"\n              aria-modal=\"true\"\n              aria-label={ariaLabel}\n              aria-labelledby={ariaLabelledBy || `${modalId}-title`}\n              aria-describedby={ariaDescribedBy}\n              id={modalId}\n              tabIndex={-1}\n              data-state={open ? 'open' : 'closed'}\n              data-slot=\"modal\"\n              className={cn(modalContentVariants({ size }), className)}\n              onClick={(e) => e.stopPropagation()}\n            >\n              {children}\n            </div>\n          </div>\n        </div>\n      </div>\n    </ModalContext.Provider>\n  );\n}\n\nModal.displayName = 'Modal';\n\n// ============================================================================\n// Modal Context\n// ============================================================================\n\ninterface ModalContextValue {\n  onClose: () => void;\n  modalId: string;\n}\n\nconst ModalContext = React.createContext<ModalContextValue | undefined>(\n  undefined\n);\n\nfunction useModalContext() {\n  const context = React.useContext(ModalContext);\n  if (!context) {\n    throw new Error('Modal components must be used within a Modal');\n  }\n  return context;\n}\n\n// ============================================================================\n// Modal Header\n// ============================================================================\n\nexport type ModalHeaderProps = React.HTMLAttributes<HTMLDivElement>;\n\n/**\n * Header section of a Modal.\n */\nconst ModalHeader = React.forwardRef<HTMLDivElement, ModalHeaderProps>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      data-slot=\"modal-header\"\n      className={cn(\n        'flex shrink-0 items-center justify-between',\n        'border-border border-b px-6 py-4',\n        className\n      )}\n      {...props}\n    />\n  )\n);\n\nModalHeader.displayName = 'ModalHeader';\n\n// ============================================================================\n// Modal Title\n// ============================================================================\n\nexport type ModalTitleProps = React.HTMLAttributes<HTMLHeadingElement>;\n\n/**\n * Title for a Modal.\n */\nconst ModalTitle = React.forwardRef<HTMLHeadingElement, ModalTitleProps>(\n  ({ className, children, ...props }, ref) => {\n    const { modalId } = useModalContext();\n    return (\n      <h2\n        ref={ref}\n        id={`${modalId}-title`}\n        data-slot=\"modal-title\"\n        className={cn(\n          'text-lg leading-none font-semibold tracking-tight',\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </h2>\n    );\n  }\n);\n\nModalTitle.displayName = 'ModalTitle';\n\n// ============================================================================\n// Modal Close Button\n// ============================================================================\n\nexport type ModalCloseProps = React.ButtonHTMLAttributes<HTMLButtonElement>;\n\n/**\n * Close button for a Modal.\n */\nconst ModalClose = React.forwardRef<HTMLButtonElement, ModalCloseProps>(\n  ({ className, children, onClick, ...props }, ref) => {\n    const { onClose } = useModalContext();\n\n    const handleClick = React.useCallback(\n      (e: React.MouseEvent<HTMLButtonElement>) => {\n        onClick?.(e);\n        if (!e.defaultPrevented) {\n          onClose();\n        }\n      },\n      [onClick, onClose]\n    );\n\n    return (\n      <button\n        ref={ref}\n        type=\"button\"\n        onClick={handleClick}\n        data-slot=\"modal-close\"\n        className={cn(\n          'inline-flex h-8 w-8 items-center justify-center rounded-lg',\n          'text-muted-foreground hover:text-foreground',\n          'hover:bg-muted transition-colors',\n          'focus-visible:ring-ring focus-visible:ring-2 focus-visible:outline-none',\n          className\n        )}\n        aria-label=\"Close\"\n        {...props}\n      >\n        {children || <CloseIcon />}\n      </button>\n    );\n  }\n);\n\nModalClose.displayName = 'ModalClose';\n\n// ============================================================================\n// Modal Body\n// ============================================================================\n\nexport type ModalBodyProps = React.HTMLAttributes<HTMLDivElement>;\n\n/**\n * Main content area of a Modal.\n */\nconst ModalBody = React.forwardRef<HTMLDivElement, ModalBodyProps>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      data-slot=\"modal-body\"\n      className={cn('min-h-0 flex-1 overflow-y-auto px-6 py-4', className)}\n      {...props}\n    />\n  )\n);\n\nModalBody.displayName = 'ModalBody';\n\n// ============================================================================\n// Modal Footer\n// ============================================================================\n\nexport type ModalFooterProps = React.HTMLAttributes<HTMLDivElement>;\n\n/**\n * Footer section of a Modal, typically for action buttons.\n */\nconst ModalFooter = React.forwardRef<HTMLDivElement, ModalFooterProps>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      data-slot=\"modal-footer\"\n      className={cn(\n        'flex shrink-0 items-center justify-end gap-3',\n        'border-border border-t px-6 py-4',\n        className\n      )}\n      {...props}\n    />\n  )\n);\n\nModalFooter.displayName = 'ModalFooter';\n\n// ============================================================================\n// Close Icon\n// ============================================================================\n\nfunction CloseIcon() {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"16\"\n      height=\"16\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"M18 6 6 18\" />\n      <path d=\"m6 6 12 12\" />\n    </svg>\n  );\n}\n\nexport {\n  Modal,\n  ModalHeader,\n  ModalTitle,\n  ModalClose,\n  ModalBody,\n  ModalFooter,\n  modalContentVariants,\n  modalOverlayVariants,\n};\n"]}

package/dist/chunk-XHESCAUE.js

@@ -0,0 +1,124 @@
+import { cn } from './chunk-F3SOEIN2.js';
+import * as React from 'react';
+import { cva } from 'class-variance-authority';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var inputVariants = cva(
+  [
+    "w-full px-3 py-2",
+    "border border-input rounded-lg",
+    "bg-background text-foreground",
+    "placeholder:text-muted-foreground",
+    "transition-colors duration-200",
+    "focus:outline-none focus:ring-2 focus:ring-ring focus:border-transparent",
+    "disabled:cursor-not-allowed disabled:opacity-50"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "h-8 text-sm",
+        md: "h-10 text-base",
+        lg: "h-12 text-lg"
+      },
+      hasError: {
+        true: "border-destructive focus:ring-destructive",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      hasError: false
+    }
+  }
+);
+var Input = React.forwardRef(
+  ({
+    className,
+    size,
+    hasError,
+    error,
+    helperText,
+    label,
+    hideLabel,
+    required,
+    disabled,
+    id,
+    "aria-describedby": ariaDescribedBy,
+    ...props
+  }, ref) => {
+    const generatedId = React.useId();
+    const inputId = id || generatedId;
+    const errorId = `${inputId}-error`;
+    const helperId = `${inputId}-helper`;
+    const describedByIds = [
+      error ? errorId : null,
+      helperText && !error ? helperId : null,
+      ariaDescribedBy
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-slot": "input-wrapper",
+        className: cn("flex flex-col gap-1.5", disabled && "opacity-50"),
+        children: [
+          label && /* @__PURE__ */ jsxs(
+            "label",
+            {
+              "data-slot": "input-label",
+              htmlFor: inputId,
+              className: cn(
+                "text-foreground text-sm font-medium",
+                hideLabel && "sr-only"
+              ),
+              children: [
+                label,
+                required && /* @__PURE__ */ jsx("span", { className: "text-destructive ml-1", "aria-hidden": "true", children: "*" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              "data-slot": "input",
+              id: inputId,
+              ref,
+              className: cn(
+                inputVariants({ size, hasError: hasError || !!error }),
+                className
+              ),
+              "aria-invalid": hasError || !!error,
+              "aria-describedby": describedByIds || void 0,
+              required,
+              disabled,
+              ...props
+            }
+          ),
+          error && /* @__PURE__ */ jsx(
+            "p",
+            {
+              id: errorId,
+              "data-slot": "input-error",
+              className: "text-destructive text-sm",
+              role: "alert",
+              children: error
+            }
+          ),
+          helperText && !error && /* @__PURE__ */ jsx(
+            "p",
+            {
+              id: helperId,
+              "data-slot": "input-helper",
+              className: "text-muted-foreground text-sm",
+              children: helperText
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Input.displayName = "Input";
+
+export { Input, inputVariants };
+//# sourceMappingURL=chunk-XHESCAUE.js.map
+//# sourceMappingURL=chunk-XHESCAUE.js.map

package/dist/chunk-XHESCAUE.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Input/Input.tsx"],"names":[],"mappings":"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","file":"chunk-XHESCAUE.js","sourcesContent":["import * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../utils/cn';\n\nconst inputVariants = cva(\n  [\n    'w-full px-3 py-2',\n    'border border-input rounded-lg',\n    'bg-background text-foreground',\n    'placeholder:text-muted-foreground',\n    'transition-colors duration-200',\n    'focus:outline-none focus:ring-2 focus:ring-ring focus:border-transparent',\n    'disabled:cursor-not-allowed disabled:opacity-50',\n  ],\n  {\n    variants: {\n      size: {\n        sm: 'h-8 text-sm',\n        md: 'h-10 text-base',\n        lg: 'h-12 text-lg',\n      },\n      hasError: {\n        true: 'border-destructive focus:ring-destructive',\n        false: '',\n      },\n    },\n    defaultVariants: {\n      size: 'md',\n      hasError: false,\n    },\n  }\n);\n\nexport interface InputProps\n  extends\n    Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>,\n    VariantProps<typeof inputVariants> {\n  /** Error message to display below the input */\n  error?: string;\n  /** Helper text to display below the input */\n  helperText?: string;\n  /** Label for the input */\n  label?: string;\n  /** Whether the label should be visually hidden (still accessible) */\n  hideLabel?: boolean;\n  /** Whether the input is required */\n  required?: boolean;\n}\n\n/**\n * A styled input component with support for labels, errors, and helper text.\n *\n * @example\n * ```tsx\n * <Input label=\"Email\" type=\"email\" placeholder=\"you@example.com\" />\n * <Input label=\"Password\" type=\"password\" error=\"Password is required\" hasError />\n * ```\n */\nconst Input = React.forwardRef<HTMLInputElement, InputProps>(\n  (\n    {\n      className,\n      size,\n      hasError,\n      error,\n      helperText,\n      label,\n      hideLabel,\n      required,\n      disabled,\n      id,\n      'aria-describedby': ariaDescribedBy,\n      ...props\n    },\n    ref\n  ) => {\n    const generatedId = React.useId();\n    const inputId = id || generatedId;\n    const errorId = `${inputId}-error`;\n    const helperId = `${inputId}-helper`;\n\n    const describedByIds = [\n      error ? errorId : null,\n      helperText && !error ? helperId : null,\n      ariaDescribedBy,\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    return (\n      <div\n        data-slot=\"input-wrapper\"\n        className={cn('flex flex-col gap-1.5', disabled && 'opacity-50')}\n      >\n        {label && (\n          <label\n            data-slot=\"input-label\"\n            htmlFor={inputId}\n            className={cn(\n              'text-foreground text-sm font-medium',\n              hideLabel && 'sr-only'\n            )}\n          >\n            {label}\n            {required && (\n              <span className=\"text-destructive ml-1\" aria-hidden=\"true\">\n                *\n              </span>\n            )}\n          </label>\n        )}\n        <input\n          data-slot=\"input\"\n          id={inputId}\n          ref={ref}\n          className={cn(\n            inputVariants({ size, hasError: hasError || !!error }),\n            className\n          )}\n          aria-invalid={hasError || !!error}\n          aria-describedby={describedByIds || undefined}\n          required={required}\n          disabled={disabled}\n          {...props}\n        />\n        {error && (\n          <p\n            id={errorId}\n            data-slot=\"input-error\"\n            className=\"text-destructive text-sm\"\n            role=\"alert\"\n          >\n            {error}\n          </p>\n        )}\n        {helperText && !error && (\n          <p\n            id={helperId}\n            data-slot=\"input-helper\"\n            className=\"text-muted-foreground text-sm\"\n          >\n            {helperText}\n          </p>\n        )}\n      </div>\n    );\n  }\n);\n\nInput.displayName = 'Input';\n\nexport { Input, inputVariants };\n"]}