@mieweb/ui 0.7.3-dev.1 → 0.7.3-dev.11

package/dist/{chunk-KFLDXJEE.js → chunk-DMIQS5KK.js}

@@ -1,3 +1,4 @@
+import { floatingGroupLabelVariants, floatingGroupVariants } from './chunk-FXTNCCD2.js';
 import { cn } from './chunk-TQONQSJO.js';
 import * as React from 'react';
 import { cva } from 'class-variance-authority';
@@ -145,6 +146,7 @@ var Checkbox = React.forwardRef(
 Checkbox.displayName = "Checkbox";
 function CheckboxGroup({
   label,
+  labelVariant = "stacked",
   description,
   error,
   orientation = "vertical",
@@ -154,6 +156,19 @@ function CheckboxGroup({
   const groupId = React.useId();
   const descriptionId = `${groupId}-description`;
   const errorId = `${groupId}-error`;
+  const isFloating = labelVariant === "floating" && !!label;
+  const itemsElement = /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "group",
+      "data-slot": "checkbox-group-items",
+      className: cn(
+        "flex gap-4",
+        orientation === "vertical" && "flex-col gap-2"
+      ),
+      children
+    }
+  );
   return /* @__PURE__ */ jsxs(
     "fieldset",
     {
@@ -165,31 +180,47 @@ function CheckboxGroup({
           "legend",
           {
             "data-slot": "checkbox-group-legend",
-            className: "text-foreground mb-1 text-sm font-medium",
+            className: cn(
+              // Legends are excluded from the fieldset's flex layout; explicit
+              // margin matches the stacked Input label's 6px gap.
+              "text-foreground mb-1.5 text-sm font-medium",
+              isFloating && "sr-only"
+            ),
             children: label
           }
         ),
+        isFloating ? /* @__PURE__ */ jsxs(
+          "div",
+          {
+            "data-slot": "checkbox-group-field",
+            className: floatingGroupVariants({ hasError: !!error }),
+            children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  "aria-hidden": "true",
+                  "data-slot": "checkbox-group-floating-label",
+                  className: floatingGroupLabelVariants({ hasError: !!error }),
+                  children: label
+                }
+              ),
+              itemsElement
+            ]
+          }
+        ) : null,
         description && /* @__PURE__ */ jsx(
           "p",
           {
             id: descriptionId,
             "data-slot": "checkbox-group-description",
-            className: "text-muted-foreground mb-3 text-xs",
-            children: description
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            role: "group",
-            "data-slot": "checkbox-group-items",
             className: cn(
-              "flex gap-4",
-              orientation === "vertical" && "flex-col gap-2"
+              "text-muted-foreground text-xs",
+              isFloating ? "mt-1" : "mb-3"
             ),
-            children
+            children: description
           }
         ),
+        !isFloating && itemsElement,
         error && /* @__PURE__ */ jsx(
           "p",
           {
@@ -257,5 +288,5 @@ function MinusIcon({ size, className }) {
 }
 
 export { Checkbox, CheckboxGroup, checkboxVariants };
-//# sourceMappingURL=chunk-KFLDXJEE.js.map
-//# sourceMappingURL=chunk-KFLDXJEE.js.map
+//# sourceMappingURL=chunk-DMIQS5KK.js.map
+//# sourceMappingURL=chunk-DMIQS5KK.js.map

package/dist/chunk-DMIQS5KK.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":"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","file":"chunk-DMIQS5KK.js","sourcesContent":["import * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../utils/cn';\nimport {\n  floatingGroupVariants,\n  floatingGroupLabelVariants,\n} from '../Input/Input';\n\nconst checkboxVariants = cva(\n  [\n    'shrink-0 appearance-none',\n    'border-2 border-input rounded',\n    'bg-background',\n    'transition-all duration-150',\n    'cursor-pointer',\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    'checked:bg-primary-800 checked:border-primary-500',\n    'indeterminate:bg-primary-800 indeterminate:border-primary-500',\n  ],\n  {\n    variants: {\n      size: {\n        sm: 'h-4 w-4',\n        md: 'h-5 w-5',\n        lg: 'h-6 w-6',\n      },\n    },\n    defaultVariants: {\n      size: 'md',\n    },\n  }\n);\n\nexport interface CheckboxProps\n  extends\n    Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'>,\n    VariantProps<typeof checkboxVariants> {\n  /** Label for the checkbox */\n  label?: string;\n  /** Description text below the label */\n  description?: string;\n  /** Indeterminate state (neither checked nor unchecked) */\n  indeterminate?: boolean;\n  /** Error message */\n  error?: string;\n  /** Position of the label */\n  labelPosition?: 'left' | 'right';\n}\n\n/**\n * An accessible checkbox component with support for indeterminate state.\n *\n * @example\n * ```tsx\n * <Checkbox label=\"Accept terms and conditions\" />\n * <Checkbox label=\"Newsletter\" description=\"Receive updates about new features\" />\n * <Checkbox indeterminate label=\"Select all\" />\n * ```\n */\nconst Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(\n  (\n    {\n      className,\n      size,\n      label,\n      description,\n      indeterminate = false,\n      error,\n      labelPosition = 'right',\n      id,\n      disabled,\n      ...props\n    },\n    ref\n  ) => {\n    const internalRef = React.useRef<HTMLInputElement>(null);\n    const generatedId = React.useId();\n    const checkboxId = id || generatedId;\n    const descriptionId = `${checkboxId}-description`;\n    const errorId = `${checkboxId}-error`;\n\n    // Handle indeterminate state\n    React.useEffect(() => {\n      const checkbox = internalRef.current;\n      if (checkbox) {\n        checkbox.indeterminate = indeterminate;\n      }\n    }, [indeterminate]);\n\n    // Combine refs\n    React.useImperativeHandle(ref, () => internalRef.current!);\n\n    const checkboxElement = (\n      <span\n        data-slot=\"checkbox-indicator\"\n        className=\"relative inline-flex items-center justify-center\"\n      >\n        <input\n          ref={internalRef}\n          data-slot=\"checkbox\"\n          id={checkboxId}\n          type=\"checkbox\"\n          disabled={disabled}\n          aria-describedby={\n            [description ? descriptionId : null, error ? errorId : null]\n              .filter(Boolean)\n              .join(' ') || undefined\n          }\n          aria-invalid={!!error}\n          className={cn('peer', checkboxVariants({ size }), className)}\n          {...props}\n        />\n        {/* Custom check icon overlay */}\n        <CheckIcon\n          size={size}\n          className=\"pointer-events-none absolute text-white opacity-0 transition-opacity peer-checked:opacity-100\"\n        />\n        {/* Custom indeterminate icon overlay */}\n        <MinusIcon\n          size={size}\n          className=\"pointer-events-none absolute text-white opacity-0 transition-opacity peer-indeterminate:opacity-100\"\n        />\n      </span>\n    );\n\n    const labelElement = label && (\n      <div className=\"flex flex-col\">\n        <label\n          htmlFor={checkboxId}\n          data-slot=\"checkbox-label\"\n          className={cn(\n            'text-foreground cursor-pointer text-sm font-medium select-none',\n            disabled && 'cursor-not-allowed opacity-50'\n          )}\n        >\n          {label}\n        </label>\n        {description && (\n          <p\n            id={descriptionId}\n            data-slot=\"checkbox-description\"\n            className=\"text-muted-foreground mt-0.5 text-xs\"\n          >\n            {description}\n          </p>\n        )}\n      </div>\n    );\n\n    return (\n      <div data-slot=\"checkbox-wrapper\" className=\"flex flex-col gap-1\">\n        <div\n          data-slot=\"checkbox-row\"\n          className={cn(\n            'flex gap-2',\n            description ? 'items-start' : 'items-center',\n            labelPosition === 'left' && 'flex-row-reverse'\n          )}\n        >\n          {checkboxElement}\n          {labelElement}\n        </div>\n        {error && (\n          <p\n            id={errorId}\n            data-slot=\"checkbox-error\"\n            className=\"text-destructive-700 dark:text-destructive-400 text-sm\"\n            role=\"alert\"\n          >\n            {error}\n          </p>\n        )}\n      </div>\n    );\n  }\n);\n\nCheckbox.displayName = 'Checkbox';\n\n// ============================================================================\n// Checkbox Group\n// ============================================================================\n\nexport interface CheckboxGroupProps {\n  /** Group label */\n  label?: string;\n  /**\n   * How the group label is rendered.\n   * - `stacked` (default): label above the options.\n   * - `floating`: renders the group as a bordered field matching floating\n   *   inputs, with the label fixed in the floated position so mixed forms\n   *   stay vertically aligned.\n   */\n  labelVariant?: 'stacked' | 'floating';\n  /** Description for the group */\n  description?: string;\n  /** Error message for the group */\n  error?: string;\n  /** Orientation of checkboxes */\n  orientation?: 'horizontal' | 'vertical';\n  /** Children checkboxes */\n  children: React.ReactNode;\n  /** Additional class name */\n  className?: string;\n}\n\n/**\n * A container for grouping related checkboxes.\n *\n * @example\n * ```tsx\n * <CheckboxGroup label=\"Interests\" orientation=\"vertical\">\n *   <Checkbox label=\"Sports\" />\n *   <Checkbox label=\"Music\" />\n *   <Checkbox label=\"Travel\" />\n * </CheckboxGroup>\n * ```\n */\nfunction CheckboxGroup({\n  label,\n  labelVariant = 'stacked',\n  description,\n  error,\n  orientation = 'vertical',\n  children,\n  className,\n}: CheckboxGroupProps) {\n  const groupId = React.useId();\n  const descriptionId = `${groupId}-description`;\n  const errorId = `${groupId}-error`;\n\n  const isFloating = labelVariant === 'floating' && !!label;\n\n  const itemsElement = (\n    <div\n      role=\"group\"\n      data-slot=\"checkbox-group-items\"\n      className={cn(\n        'flex gap-4',\n        orientation === 'vertical' && 'flex-col gap-2'\n      )}\n    >\n      {children}\n    </div>\n  );\n\n  return (\n    <fieldset\n      data-slot=\"checkbox-group\"\n      className={cn('flex flex-col', className)}\n      aria-describedby={\n        [description ? descriptionId : null, error ? errorId : null]\n          .filter(Boolean)\n          .join(' ') || undefined\n      }\n    >\n      {label && (\n        <legend\n          data-slot=\"checkbox-group-legend\"\n          className={cn(\n            // Legends are excluded from the fieldset's flex layout; explicit\n            // margin matches the stacked Input label's 6px gap.\n            'text-foreground mb-1.5 text-sm font-medium',\n            isFloating && 'sr-only'\n          )}\n        >\n          {label}\n        </legend>\n      )}\n      {isFloating ? (\n        <div\n          data-slot=\"checkbox-group-field\"\n          className={floatingGroupVariants({ hasError: !!error })}\n        >\n          <span\n            aria-hidden=\"true\"\n            data-slot=\"checkbox-group-floating-label\"\n            className={floatingGroupLabelVariants({ hasError: !!error })}\n          >\n            {label}\n          </span>\n          {itemsElement}\n        </div>\n      ) : null}\n      {description && (\n        <p\n          id={descriptionId}\n          data-slot=\"checkbox-group-description\"\n          className={cn(\n            'text-muted-foreground text-xs',\n            isFloating ? 'mt-1' : 'mb-3'\n          )}\n        >\n          {description}\n        </p>\n      )}\n      {!isFloating && itemsElement}\n      {error && (\n        <p\n          id={errorId}\n          data-slot=\"checkbox-group-error\"\n          className=\"text-destructive mt-2 text-sm\"\n          role=\"alert\"\n        >\n          {error}\n        </p>\n      )}\n    </fieldset>\n  );\n}\n\nCheckboxGroup.displayName = 'CheckboxGroup';\n\n// ============================================================================\n// Check Icon\n// ============================================================================\n\ninterface CheckIconProps {\n  size?: 'sm' | 'md' | 'lg' | null;\n  className?: string;\n}\n\nfunction CheckIcon({ size, className }: CheckIconProps) {\n  const sizeMap = {\n    sm: 10,\n    md: 12,\n    lg: 14,\n  };\n  const iconSize = sizeMap[size || 'md'];\n\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width={iconSize}\n      height={iconSize}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"3\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      className={className}\n      aria-hidden=\"true\"\n    >\n      <path d=\"M20 6 9 17l-5-5\" />\n    </svg>\n  );\n}\n\nfunction MinusIcon({ size, className }: CheckIconProps) {\n  const sizeMap = {\n    sm: 10,\n    md: 12,\n    lg: 14,\n  };\n  const iconSize = sizeMap[size || 'md'];\n\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width={iconSize}\n      height={iconSize}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"3\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      className={className}\n      aria-hidden=\"true\"\n    >\n      <path d=\"M5 12h14\" />\n    </svg>\n  );\n}\n\nexport { Checkbox, CheckboxGroup, checkboxVariants };\n"]}

package/dist/chunk-F7CQ5RO7.cjs

@@ -0,0 +1,269 @@
+'use strict';
+
+var chunkS5RVSXDV_cjs = require('./chunk-S5RVSXDV.cjs');
+var React = require('react');
+var classVarianceAuthority = require('class-variance-authority');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+var inputVariants = classVarianceAuthority.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: ""
+      },
+      labelVariant: {
+        stacked: "",
+        floating: "peer placeholder:text-transparent"
+      }
+    },
+    compoundVariants: [
+      // Floating labels need extra height and asymmetric padding so both
+      // the floated label and the entered text fit inside the field.
+      { labelVariant: "floating", size: "sm", className: "h-11 pt-4 pb-1" },
+      { labelVariant: "floating", size: "md", className: "h-14 pt-5 pb-1.5" },
+      { labelVariant: "floating", size: "lg", className: "h-16 pt-6 pb-2" }
+    ],
+    defaultVariants: {
+      size: "md",
+      hasError: false,
+      labelVariant: "stacked"
+    }
+  }
+);
+var floatingGroupVariants = classVarianceAuthority.cva(
+  ["relative rounded-lg border border-input bg-background px-3"],
+  {
+    variants: {
+      size: {
+        sm: "min-h-11 pt-4 pb-1",
+        md: "min-h-14 pt-5 pb-1.5",
+        lg: "min-h-16 pt-6 pb-2"
+      },
+      hasError: {
+        true: "border-destructive",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      hasError: false
+    }
+  }
+);
+var floatingGroupLabelVariants = classVarianceAuthority.cva(
+  ["absolute start-3 pointer-events-none select-none"],
+  {
+    variants: {
+      size: {
+        sm: "top-0.5 text-[0.65rem]",
+        md: "top-1 text-xs",
+        lg: "top-1.5 text-sm"
+      },
+      hasError: {
+        true: "text-destructive",
+        false: "text-muted-foreground"
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      hasError: false
+    }
+  }
+);
+var floatingLabelVariants = classVarianceAuthority.cva(
+  [
+    "absolute start-3 pointer-events-none select-none",
+    "transition-all duration-200 ease-out",
+    // Rest state: vertically centered, placeholder-sized (input is empty and unfocused).
+    "top-1/2 -translate-y-1/2",
+    // Floated state: focused, has a value, or was autofilled → shrink and move to the top,
+    // staying inside the field.
+    "peer-focus:translate-y-0 peer-[:not(:placeholder-shown)]:translate-y-0 peer-autofill:translate-y-0"
+  ],
+  {
+    variants: {
+      size: {
+        sm: [
+          "text-sm",
+          "peer-focus:top-0.5 peer-[:not(:placeholder-shown)]:top-0.5 peer-autofill:top-0.5",
+          "peer-focus:text-[0.65rem] peer-[:not(:placeholder-shown)]:text-[0.65rem] peer-autofill:text-[0.65rem]"
+        ],
+        md: [
+          "text-base",
+          "peer-focus:top-1 peer-[:not(:placeholder-shown)]:top-1 peer-autofill:top-1",
+          "peer-focus:text-xs peer-[:not(:placeholder-shown)]:text-xs peer-autofill:text-xs"
+        ],
+        lg: [
+          "text-lg",
+          "peer-focus:top-1.5 peer-[:not(:placeholder-shown)]:top-1.5 peer-autofill:top-1.5",
+          "peer-focus:text-sm peer-[:not(:placeholder-shown)]:text-sm peer-autofill:text-sm"
+        ]
+      },
+      hasError: {
+        true: "text-destructive",
+        false: "text-muted-foreground"
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      hasError: false
+    }
+  }
+);
+var Input = React__namespace.forwardRef(
+  ({
+    className,
+    size,
+    hasError,
+    error,
+    helperText,
+    label,
+    labelVariant = "stacked",
+    hideLabel,
+    required,
+    disabled,
+    id,
+    placeholder,
+    "aria-describedby": ariaDescribedBy,
+    ...props
+  }, ref) => {
+    const generatedId = React__namespace.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(" ");
+    const isFloating = labelVariant === "floating" && !!label && !hideLabel;
+    const requiredMark = required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-destructive ms-1", "aria-hidden": "true", children: "*" });
+    const inputElement = /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        "data-slot": "input",
+        id: inputId,
+        ref,
+        className: chunkS5RVSXDV_cjs.cn(
+          inputVariants({
+            size,
+            hasError: hasError || !!error,
+            labelVariant: isFloating ? "floating" : "stacked"
+          }),
+          className
+        ),
+        "aria-invalid": hasError || !!error,
+        "aria-describedby": describedByIds || void 0,
+        required,
+        disabled,
+        placeholder: isFloating ? " " : placeholder,
+        ...props
+      }
+    );
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        "data-slot": "input-wrapper",
+        className: chunkS5RVSXDV_cjs.cn("flex flex-col gap-1.5", disabled && "opacity-50"),
+        children: [
+          label && !isFloating && /* @__PURE__ */ jsxRuntime.jsxs(
+            "label",
+            {
+              "data-slot": "input-label",
+              htmlFor: inputId,
+              className: chunkS5RVSXDV_cjs.cn(
+                "text-foreground text-sm font-medium",
+                hideLabel && "sr-only"
+              ),
+              children: [
+                label,
+                requiredMark
+              ]
+            }
+          ),
+          isFloating ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+            inputElement,
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "label",
+              {
+                "data-slot": "input-label",
+                htmlFor: inputId,
+                className: floatingLabelVariants({
+                  size,
+                  hasError: hasError || !!error
+                }),
+                children: [
+                  label,
+                  requiredMark
+                ]
+              }
+            )
+          ] }) : inputElement,
+          error && /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              id: errorId,
+              "data-slot": "input-error",
+              className: "text-destructive-700 dark:text-destructive-400 text-sm",
+              role: "alert",
+              children: error
+            }
+          ),
+          helperText && !error && /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              id: helperId,
+              "data-slot": "input-helper",
+              className: "text-muted-foreground text-sm",
+              children: helperText
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Input.displayName = "Input";
+
+exports.Input = Input;
+exports.floatingGroupLabelVariants = floatingGroupLabelVariants;
+exports.floatingGroupVariants = floatingGroupVariants;
+exports.floatingLabelVariants = floatingLabelVariants;
+exports.inputVariants = inputVariants;
+//# sourceMappingURL=chunk-F7CQ5RO7.cjs.map
+//# sourceMappingURL=chunk-F7CQ5RO7.cjs.map

package/dist/chunk-F7CQ5RO7.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Input/Input.tsx"],"names":["cva","React","jsx","cn","jsxs"],"mappings":"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","file":"chunk-F7CQ5RO7.cjs","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      labelVariant: {\n        stacked: '',\n        floating: 'peer placeholder:text-transparent',\n      },\n    },\n    compoundVariants: [\n      // Floating labels need extra height and asymmetric padding so both\n      // the floated label and the entered text fit inside the field.\n      { labelVariant: 'floating', size: 'sm', className: 'h-11 pt-4 pb-1' },\n      { labelVariant: 'floating', size: 'md', className: 'h-14 pt-5 pb-1.5' },\n      { labelVariant: 'floating', size: 'lg', className: 'h-16 pt-6 pb-2' },\n    ],\n    defaultVariants: {\n      size: 'md',\n      hasError: false,\n      labelVariant: 'stacked',\n    },\n  }\n);\n\n// Bordered field box for group controls (RadioGroup / CheckboxGroup) rendered\n// with labelVariant=\"floating\". Mirrors the floating input's box metrics so\n// mixed forms stay vertically aligned.\nconst floatingGroupVariants = cva(\n  ['relative rounded-lg border border-input bg-background px-3'],\n  {\n    variants: {\n      size: {\n        sm: 'min-h-11 pt-4 pb-1',\n        md: 'min-h-14 pt-5 pb-1.5',\n        lg: 'min-h-16 pt-6 pb-2',\n      },\n      hasError: {\n        true: 'border-destructive',\n        false: '',\n      },\n    },\n    defaultVariants: {\n      size: 'md',\n      hasError: false,\n    },\n  }\n);\n\n// Group label fixed in the floated position (groups have no empty state to\n// float from, so the label never animates). Metrics match the floated state\n// of floatingLabelVariants.\nconst floatingGroupLabelVariants = cva(\n  ['absolute start-3 pointer-events-none select-none'],\n  {\n    variants: {\n      size: {\n        sm: 'top-0.5 text-[0.65rem]',\n        md: 'top-1 text-xs',\n        lg: 'top-1.5 text-sm',\n      },\n      hasError: {\n        true: 'text-destructive',\n        false: 'text-muted-foreground',\n      },\n    },\n    defaultVariants: {\n      size: 'md',\n      hasError: false,\n    },\n  }\n);\n\nconst floatingLabelVariants = cva(\n  [\n    'absolute start-3 pointer-events-none select-none',\n    'transition-all duration-200 ease-out',\n    // Rest state: vertically centered, placeholder-sized (input is empty and unfocused).\n    'top-1/2 -translate-y-1/2',\n    // Floated state: focused, has a value, or was autofilled → shrink and move to the top,\n    // staying inside the field.\n    'peer-focus:translate-y-0 peer-[:not(:placeholder-shown)]:translate-y-0 peer-autofill:translate-y-0',\n  ],\n  {\n    variants: {\n      size: {\n        sm: [\n          'text-sm',\n          'peer-focus:top-0.5 peer-[:not(:placeholder-shown)]:top-0.5 peer-autofill:top-0.5',\n          'peer-focus:text-[0.65rem] peer-[:not(:placeholder-shown)]:text-[0.65rem] peer-autofill:text-[0.65rem]',\n        ],\n        md: [\n          'text-base',\n          'peer-focus:top-1 peer-[:not(:placeholder-shown)]:top-1 peer-autofill:top-1',\n          'peer-focus:text-xs peer-[:not(:placeholder-shown)]:text-xs peer-autofill:text-xs',\n        ],\n        lg: [\n          'text-lg',\n          'peer-focus:top-1.5 peer-[:not(:placeholder-shown)]:top-1.5 peer-autofill:top-1.5',\n          'peer-focus:text-sm peer-[:not(:placeholder-shown)]:text-sm peer-autofill:text-sm',\n        ],\n      },\n      hasError: {\n        true: 'text-destructive',\n        false: 'text-muted-foreground',\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    Omit<VariantProps<typeof inputVariants>, 'labelVariant'> {\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  /**\n   * How the label is rendered.\n   * - `stacked` (default): label above the input.\n   * - `floating`: label rests inside the input like a placeholder and floats\n   *   to the top of the field (staying inside it) when focused or filled.\n   *   Ignores `placeholder`; when `hideLabel` is set, falls back to a\n   *   visually-hidden stacked label.\n   */\n  labelVariant?: 'stacked' | 'floating';\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 * <Input label=\"Account number\" labelVariant=\"floating\" />\n * ```\n */\nconst Input = React.forwardRef<HTMLInputElement, InputProps>(\n  (\n    {\n      className,\n      size,\n      hasError,\n      error,\n      helperText,\n      label,\n      labelVariant = 'stacked',\n      hideLabel,\n      required,\n      disabled,\n      id,\n      placeholder,\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    const isFloating = labelVariant === 'floating' && !!label && !hideLabel;\n\n    const requiredMark = required && (\n      <span className=\"text-destructive ms-1\" aria-hidden=\"true\">\n        *\n      </span>\n    );\n\n    const inputElement = (\n      <input\n        data-slot=\"input\"\n        id={inputId}\n        ref={ref}\n        className={cn(\n          inputVariants({\n            size,\n            hasError: hasError || !!error,\n            labelVariant: isFloating ? 'floating' : 'stacked',\n          }),\n          className\n        )}\n        aria-invalid={hasError || !!error}\n        aria-describedby={describedByIds || undefined}\n        required={required}\n        disabled={disabled}\n        // A single-space placeholder keeps :placeholder-shown reliable so the\n        // label can float via CSS alone; a user placeholder would clash with\n        // the resting label.\n        placeholder={isFloating ? ' ' : placeholder}\n        {...props}\n      />\n    );\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 && !isFloating && (\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            {requiredMark}\n          </label>\n        )}\n        {isFloating ? (\n          <div className=\"relative\">\n            {inputElement}\n            <label\n              data-slot=\"input-label\"\n              htmlFor={inputId}\n              className={floatingLabelVariants({\n                size,\n                hasError: hasError || !!error,\n              })}\n            >\n              {label}\n              {requiredMark}\n            </label>\n          </div>\n        ) : (\n          inputElement\n        )}\n        {error && (\n          <p\n            id={errorId}\n            data-slot=\"input-error\"\n            className=\"text-destructive-700 dark:text-destructive-400 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 {\n  Input,\n  inputVariants,\n  floatingLabelVariants,\n  floatingGroupVariants,\n  floatingGroupLabelVariants,\n};\n"]}