@zentauri-ui/zentauri-components 0.0.84 → 0.0.92

package/dist/ui/inputs.mjs

@@ -0,0 +1,428 @@
+"use client";
+
+import {
+  cn
+} from "../chunk-MEWYFWBX.mjs";
+
+// src/ui/inputs/animations.ts
+var inputAnimationPresets = {
+  none: {},
+  lift: {
+    whileHover: { y: -1 },
+    whileFocus: { y: -1 },
+    transition: { type: "spring", stiffness: 480, damping: 32 }
+  },
+  press: {
+    whileTap: { scale: 0.99 },
+    transition: { type: "spring", stiffness: 520, damping: 30 }
+  },
+  glow: {
+    whileFocus: {
+      boxShadow: "0 0 0 1px rgba(255,255,255,0.2), 0 12px 28px rgba(15,23,42,0.35)"
+    },
+    whileHover: {
+      boxShadow: "0 0 0 1px rgba(255,255,255,0.12), 0 8px 20px rgba(15,23,42,0.25)"
+    },
+    transition: { duration: 0.2, ease: "easeOut" }
+  },
+  tilt: {
+    whileHover: { scale: 1.005 },
+    whileFocus: { scale: 1.008 },
+    whileTap: { scale: 0.995 },
+    transition: { type: "spring", stiffness: 380, damping: 24 }
+  },
+  bounce: {
+    whileFocus: { y: -2, scale: 1.01 },
+    whileHover: { y: -1, scale: 1.005 },
+    transition: { type: "spring", bounce: 0.35, duration: 0.4 }
+  }
+};
+
+// src/ui/inputs/input.tsx
+import { useId } from "react";
+import { motion } from "framer-motion";
+
+// src/ui/inputs/variants.ts
+import { cva } from "class-variance-authority";
+var inputVariants = cva(
+  [
+    "w-full min-w-0 rounded-xl border bg-white/5 text-slate-50 shadow-[0_1px_2px_rgba(15,23,42,0.12)]",
+    "ring-offset-slate-950 transition-colors",
+    "placeholder:text-slate-500",
+    "focus-visible:outline-none",
+    "disabled:cursor-not-allowed disabled:opacity-50",
+    "read-only:cursor-default read-only:bg-white/[0.03]",
+    "file:h-8"
+  ],
+  {
+    variants: {
+      as: {
+        input: "",
+        textarea: "h-auto! resize-y py-2 align-top",
+        file: [
+          // Reset native padding so we control it fully
+          "p-0! cursor-pointer",
+          // File-selector button base styles
+          "file:cursor-pointer file:border-0 file:border-r file:border-white/10",
+          "file:bg-white/10 file:text-slate-200 file:font-medium",
+          "file:transition-colors file:duration-200",
+          "hover:file:bg-white/15",
+          // Content area padding
+          "[&:not(:disabled)]:file:hover:text-white",
+          "disabled:file:cursor-not-allowed"
+        ],
+        checkbox: [
+          "shrink-0 cursor-pointer appearance-none relative",
+          "min-h-0! shadow-none outline-none",
+          "border-2 border-white/30 [&:not(:checked)]:bg-transparent",
+          "transition-[color,box-shadow,border-color,background-color]",
+          "disabled:cursor-not-allowed disabled:opacity-50",
+          "read-only:cursor-default",
+          "checked:after:absolute checked:after:content-[''] checked:after:size-3 checked:after:top-1/2 checked:after:left-1/2 checked:after:-translate-x-1/2 checked:after:-translate-y-1/2 checked:after:rounded-full checked:after:bg-current"
+        ],
+        radio: [
+          "shrink-0 cursor-pointer appearance-none rounded-full",
+          "min-h-0! shadow-none outline-none",
+          "border-2 border-white/30 bg-transparent! read-only:bg-transparent!",
+          "ring-2 ring-white/20 ring-offset-2 ring-offset-slate-950",
+          "transition-[color,box-shadow,background-color,border-color,box-shadow]",
+          "disabled:cursor-not-allowed disabled:opacity-50",
+          "read-only:cursor-default"
+        ]
+      },
+      appearance: {
+        default: "border-white/10 focus-visible:border-white/20",
+        warning: "border-yellow-500/80 text-yellow-50 placeholder:text-yellow-300/70 focus-visible:border-yellow-400 focus-visible:ring-yellow-400/80",
+        error: "border-rose-500/80 text-rose-50 placeholder:text-rose-300/70 focus-visible:border-rose-400 focus-visible:ring-rose-400/80",
+        success: "border-emerald-500/70 text-emerald-50 placeholder:text-emerald-300/70 focus-visible:border-emerald-400 focus-visible:ring-emerald-400/80",
+        info: "border-blue-500/80 text-blue-50 placeholder:text-blue-300/70 focus-visible:border-blue-400 focus-visible:ring-blue-400/80",
+        violet: "border-violet-500/80 text-violet-50 placeholder:text-violet-300/70 focus-visible:border-violet-400 focus-visible:ring-violet-400/80",
+        amber: "border-amber-500/80 text-amber-50 placeholder:text-amber-300/70 focus-visible:border-amber-400 focus-visible:ring-amber-400/80",
+        pink: "border-pink-500/80 text-pink-50 placeholder:text-pink-300/70 focus-visible:border-pink-400 focus-visible:ring-pink-400/80",
+        indigo: "border-indigo-500/80 text-indigo-50 placeholder:text-indigo-300/70 focus-visible:border-indigo-400 focus-visible:ring-indigo-400/80",
+        orange: "border-orange-500/80 text-orange-50 placeholder:text-orange-300/70 focus-visible:border-orange-400 focus-visible:ring-orange-400/80"
+      },
+      size: {
+        sm: "h-8 px-3 text-xs",
+        md: "h-9 md:h-11 px-4 text-sm",
+        lg: "h-10 md:h-12 px-5 text-base"
+      },
+      ring: {
+        true: "focus-visible:ring-2 focus-visible:ring-offset-2",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      as: "input",
+      appearance: "default",
+      size: "md",
+      ring: true
+    },
+    compoundVariants: [
+      // ── textarea size overrides ──────────────────────────────────────────
+      {
+        as: "textarea",
+        size: "sm",
+        class: "min-h-[5rem]"
+      },
+      {
+        as: "textarea",
+        size: "md",
+        class: "min-h-[6rem]"
+      },
+      {
+        as: "textarea",
+        size: "lg",
+        class: "min-h-[7.5rem]"
+      },
+      // ── file input: size – height & file-button padding ──────────────────
+      {
+        as: "file",
+        size: "sm",
+        class: "h-8 text-xs pl-1 file:h-8 file:px-3 file:text-xs"
+      },
+      {
+        as: "file",
+        size: "md",
+        class: "h-9 md:h-11 text-sm pl-1 file:h-9 md:file:h-11 file:px-4 file:text-sm"
+      },
+      {
+        as: "file",
+        size: "lg",
+        class: "h-10 md:h-12 text-base pl-1 file:h-10 md:file:h-12 file:px-5 file:text-base"
+      },
+      // ── file input: appearance – file-button accent colour ───────────────
+      {
+        as: "file",
+        appearance: "default",
+        class: "file:text-slate-200"
+      },
+      {
+        as: "file",
+        appearance: "warning",
+        class: "file:bg-yellow-500/20 file:text-yellow-200 file:border-yellow-500/40 hover:file:bg-yellow-500/30"
+      },
+      {
+        as: "file",
+        appearance: "error",
+        class: "file:bg-rose-500/20 file:text-rose-200 file:border-rose-500/40 hover:file:bg-rose-500/30"
+      },
+      {
+        as: "file",
+        appearance: "success",
+        class: "file:bg-emerald-500/20 file:text-emerald-200 file:border-emerald-500/40 hover:file:bg-emerald-500/30"
+      },
+      {
+        as: "file",
+        appearance: "info",
+        class: "file:bg-blue-500/20 file:text-blue-200 file:border-blue-500/40 hover:file:bg-blue-500/30"
+      },
+      {
+        as: "file",
+        appearance: "violet",
+        class: "file:bg-violet-500/20 file:text-violet-200 file:border-violet-500/40 hover:file:bg-violet-500/30"
+      },
+      {
+        as: "file",
+        appearance: "amber",
+        class: "file:bg-amber-500/20 file:text-amber-200 file:border-amber-500/40 hover:file:bg-amber-500/30"
+      },
+      {
+        as: "file",
+        appearance: "pink",
+        class: "file:bg-pink-500/20 file:text-pink-200 file:border-pink-500/40 hover:file:bg-pink-500/30"
+      },
+      {
+        as: "file",
+        appearance: "indigo",
+        class: "file:bg-indigo-500/20 file:text-indigo-200 file:border-indigo-500/40 hover:file:bg-indigo-500/30"
+      },
+      // ── checkbox / radio: size (overrides text-field height & padding) ───
+      {
+        as: "checkbox",
+        size: "sm",
+        class: "h-4! w-4! min-h-0! rounded-[0.35rem]! px-0! py-0!"
+      },
+      {
+        as: "checkbox",
+        size: "md",
+        class: "h-5! w-5! min-h-0! rounded-md! px-0! py-0!"
+      },
+      {
+        as: "checkbox",
+        size: "lg",
+        class: "h-6! w-6! min-h-0! rounded-md! px-0! py-0!"
+      },
+      {
+        as: "radio",
+        size: "sm",
+        class: "h-4! w-4! min-h-0! px-0! py-0!"
+      },
+      {
+        as: "radio",
+        size: "md",
+        class: "h-5! w-5! min-h-0! px-0! py-0!"
+      },
+      {
+        as: "radio",
+        size: "lg",
+        class: "h-6! w-6! min-h-0! px-0! py-0!"
+      },
+      // ── checkbox: appearance (border + tick color; fill stays transparent) ─
+      {
+        as: "checkbox",
+        appearance: "default",
+        class: "border-slate-400/70! checked:border-slate-200 checked:text-slate-200 hover:border-slate-300 focus-visible:border-slate-300 focus-visible:ring-slate-400/70"
+      },
+      {
+        as: "checkbox",
+        appearance: "warning",
+        class: "border-yellow-500/70! checked:border-yellow-400 checked:text-yellow-300 hover:border-yellow-400 focus-visible:border-yellow-400 focus-visible:ring-yellow-400/80"
+      },
+      {
+        as: "checkbox",
+        appearance: "error",
+        class: "border-rose-500/70! checked:border-rose-400 checked:text-rose-300 hover:border-rose-400 focus-visible:border-rose-400 focus-visible:ring-rose-400/80"
+      },
+      {
+        as: "checkbox",
+        appearance: "success",
+        class: "border-emerald-500/70! checked:border-emerald-400 checked:text-emerald-300 hover:border-emerald-400 focus-visible:border-emerald-400 focus-visible:ring-emerald-400/80"
+      },
+      {
+        as: "checkbox",
+        appearance: "info",
+        class: "border-blue-500/70! checked:border-blue-400 checked:text-blue-300 hover:border-blue-400 focus-visible:border-blue-400 focus-visible:ring-blue-400/80"
+      },
+      {
+        as: "checkbox",
+        appearance: "violet",
+        class: "border-violet-500/70! checked:after:bg-violet-400 checked:border-violet-400 checked:text-violet-300 hover:border-violet-400 focus-visible:border-violet-400 focus-visible:ring-violet-400/80"
+      },
+      {
+        as: "checkbox",
+        appearance: "amber",
+        class: "border-amber-500/70! checked:border-amber-400! checked:text-amber-300 hover:border-amber-400! focus-visible:border-amber-400! focus-visible:ring-amber-400/80!"
+      },
+      {
+        as: "checkbox",
+        appearance: "pink",
+        class: "border-pink-500/70! checked:border-pink-400 checked:text-pink-300 hover:border-pink-400 focus-visible:border-pink-400 focus-visible:ring-pink-400/80"
+      },
+      {
+        as: "checkbox",
+        appearance: "indigo",
+        class: "border-indigo-500/70! checked:border-indigo-400! checked:text-indigo-300 hover:border-indigo-400! focus-visible:border-indigo-400! focus-visible:ring-indigo-400/80!"
+      },
+      // ── radio: appearance (transparent fill, inner dot, coloured offset ring) ─
+      {
+        as: "radio",
+        appearance: "default",
+        class: "border-slate-400/70! checked:border-slate-200 checked:bg-transparent! checked:shadow-[inset_0_0_0_0.28rem_rgb(226,232,240)]! hover:border-slate-300 focus-visible:border-slate-300 focus-visible:ring-slate-400/70 checked:ring-2! checked:ring-offset-2! checked:ring-offset-slate-950! checked:ring-slate-300/90!"
+      },
+      {
+        as: "radio",
+        appearance: "warning",
+        class: "border-yellow-500/70! checked:border-yellow-400 checked:bg-transparent! checked:shadow-[inset_0_0_0_0.28rem_rgb(250,204,21)]! hover:border-yellow-400 focus-visible:border-yellow-400 focus-visible:ring-yellow-400/80 checked:ring-2! checked:ring-offset-2! checked:ring-offset-slate-950! checked:ring-yellow-400/90!"
+      },
+      {
+        as: "radio",
+        appearance: "error",
+        class: "border-rose-500/70! checked:border-rose-400 checked:bg-transparent! checked:shadow-[inset_0_0_0_0.28rem_rgb(251,113,133)]! hover:border-rose-400 focus-visible:border-rose-400 focus-visible:ring-rose-400/80 checked:ring-2! checked:ring-offset-2! checked:ring-offset-slate-950! checked:ring-rose-400/90!"
+      },
+      {
+        as: "radio",
+        appearance: "success",
+        class: "border-emerald-500/70! checked:border-emerald-400 checked:bg-transparent! checked:shadow-[inset_0_0_0_0.28rem_rgb(52,211,153)]! hover:border-emerald-400 focus-visible:border-emerald-400 focus-visible:ring-emerald-400/80 checked:ring-2! checked:ring-offset-2! checked:ring-offset-slate-950! checked:ring-emerald-400/90!"
+      },
+      {
+        as: "radio",
+        appearance: "info",
+        class: "border-blue-500/70! checked:border-blue-400 checked:bg-transparent! checked:shadow-[inset_0_0_0_0.28rem_rgb(96,165,250)]! hover:border-blue-400 focus-visible:border-blue-400 focus-visible:ring-blue-400/80 checked:ring-2! checked:ring-offset-2! checked:ring-offset-slate-950! checked:ring-blue-400/90!"
+      },
+      {
+        as: "radio",
+        appearance: "violet",
+        class: "border-violet-500/70! checked:border-violet-400 checked:bg-transparent! checked:shadow-[inset_0_0_0_0.28rem_rgb(167,139,250)]! hover:border-violet-400 focus-visible:border-violet-400 focus-visible:ring-violet-400/80 checked:ring-2! checked:ring-offset-2! checked:ring-offset-slate-950! checked:ring-violet-400/90!"
+      },
+      {
+        as: "radio",
+        appearance: "amber",
+        class: "border-amber-500/70! checked:border-amber-400 checked:bg-transparent! checked:shadow-[inset_0_0_0_0.28rem_rgb(251,191,36)]! hover:border-amber-400 focus-visible:border-amber-400 focus-visible:ring-amber-400/80 checked:ring-2! checked:ring-offset-2! checked:ring-offset-slate-950! checked:ring-amber-400/90!"
+      },
+      {
+        as: "radio",
+        appearance: "pink",
+        class: "border-pink-500/70! checked:border-pink-400 checked:bg-transparent! checked:shadow-[inset_0_0_0_0.28rem_rgb(244,114,182)]! hover:border-pink-400 focus-visible:border-pink-400 focus-visible:ring-pink-400/80 checked:ring-2! checked:ring-offset-2! checked:ring-offset-slate-950! checked:ring-pink-400/90!"
+      },
+      {
+        as: "radio",
+        appearance: "indigo",
+        class: "border-indigo-500/70! checked:border-indigo-400 checked:bg-transparent! checked:shadow-[inset_0_0_0_0.28rem_rgb(129,140,248)]! hover:border-indigo-400 focus-visible:border-indigo-400 focus-visible:ring-indigo-400/80 checked:ring-2! checked:ring-offset-2! checked:ring-offset-slate-950! checked:ring-indigo-400/90!"
+      }
+    ]
+  }
+);
+
+// src/ui/inputs/input.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var Input = (props) => {
+  const generatedId = useId();
+  if (props.as === "textarea") {
+    const {
+      className: className2,
+      appearance: appearance2,
+      size: size2,
+      animation: animation2 = "none",
+      ring: ring2 = true,
+      ref: ref2,
+      "aria-invalid": ariaInvalidProp2,
+      errorMessage: errorMessage2,
+      id: id2,
+      as: as2,
+      ...rest2
+    } = props;
+    const controlId2 = id2 ?? generatedId;
+    const errorId2 = `${controlId2}-error`;
+    const motionProps2 = inputAnimationPresets[animation2];
+    const ariaInvalid2 = ariaInvalidProp2 !== void 0 ? ariaInvalidProp2 : appearance2 === "error" ? true : void 0;
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        motion.textarea,
+        {
+          ref: ref2,
+          id: controlId2,
+          "data-slot": "input",
+          className: cn(
+            inputVariants({ appearance: appearance2, size: size2, ring: ring2, as: as2 }),
+            className2
+          ),
+          initial: false,
+          "aria-invalid": ariaInvalid2,
+          "aria-describedby": errorMessage2 && appearance2 === "error" ? errorId2 : void 0,
+          ...motionProps2,
+          ...rest2
+        }
+      ),
+      errorMessage2 && appearance2 === "error" && /* @__PURE__ */ jsx(
+        "p",
+        {
+          id: errorId2,
+          className: "text-sm text-rose-500 mt-2 pl-4 wrap-break-word",
+          children: errorMessage2
+        }
+      )
+    ] });
+  }
+  const {
+    className,
+    appearance,
+    size,
+    animation = "none",
+    ring = true,
+    ref,
+    "aria-invalid": ariaInvalidProp,
+    errorMessage,
+    id,
+    as,
+    ...rest
+  } = props;
+  const controlId = id ?? generatedId;
+  const errorId = `${controlId}-error`;
+  const motionProps = inputAnimationPresets[animation];
+  const ariaInvalid = ariaInvalidProp !== void 0 ? ariaInvalidProp : appearance === "error" ? true : void 0;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      motion.input,
+      {
+        ref,
+        id: controlId,
+        "data-slot": "input",
+        className: cn(
+          inputVariants({ appearance, size, ring, as: as ?? "input" }),
+          className
+        ),
+        initial: false,
+        "aria-invalid": ariaInvalid,
+        "aria-describedby": errorMessage && appearance === "error" ? errorId : void 0,
+        ...motionProps,
+        ...rest
+      }
+    ),
+    errorMessage && appearance === "error" && /* @__PURE__ */ jsx(
+      "p",
+      {
+        id: errorId,
+        className: "text-sm text-rose-500 mt-2 pl-4 wrap-break-word",
+        children: errorMessage
+      }
+    )
+  ] });
+};
+Input.displayName = "Input";
+export {
+  Input,
+  inputAnimationPresets,
+  inputVariants
+};
+//# sourceMappingURL=inputs.mjs.map

package/dist/ui/inputs.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/ui/inputs/animations.ts","../../src/ui/inputs/input.tsx","../../src/ui/inputs/variants.ts"],"sourcesContent":["import type { InputAnimationPresets } from \"./types\";\n\nexport const inputAnimationPresets: InputAnimationPresets = {\n  none: {},\n  lift: {\n    whileHover: { y: -1 },\n    whileFocus: { y: -1 },\n    transition: { type: \"spring\", stiffness: 480, damping: 32 },\n  },\n  press: {\n    whileTap: { scale: 0.99 },\n    transition: { type: \"spring\", stiffness: 520, damping: 30 },\n  },\n  glow: {\n    whileFocus: {\n      boxShadow:\n        \"0 0 0 1px rgba(255,255,255,0.2), 0 12px 28px rgba(15,23,42,0.35)\",\n    },\n    whileHover: {\n      boxShadow:\n        \"0 0 0 1px rgba(255,255,255,0.12), 0 8px 20px rgba(15,23,42,0.25)\",\n    },\n    transition: { duration: 0.2, ease: \"easeOut\" },\n  },\n  tilt: {\n    whileHover: { scale: 1.005 },\n    whileFocus: { scale: 1.008 },\n    whileTap: { scale: 0.995 },\n    transition: { type: \"spring\", stiffness: 380, damping: 24 },\n  },\n  bounce: {\n    whileFocus: { y: -2, scale: 1.01 },\n    whileHover: { y: -1, scale: 1.005 },\n    transition: { type: \"spring\", bounce: 0.35, duration: 0.4 },\n  },\n};\n","\"use client\";\n\nimport { useId } from \"react\";\nimport { motion } from \"framer-motion\";\n\nimport { cn } from \"../../lib/utils\";\nimport { inputAnimationPresets } from \"./animations\";\nimport type { InputProps } from \"./types\";\nimport { inputVariants } from \"./variants\";\n\nexport const Input = (props: InputProps) => {\n  const generatedId = useId();\n\n  if (props.as === \"textarea\") {\n    const {\n      className,\n      appearance,\n      size,\n      animation = \"none\",\n      ring = true,\n      ref,\n      \"aria-invalid\": ariaInvalidProp,\n      errorMessage,\n      id,\n      as,\n      ...rest\n    } = props;\n\n    const controlId = id ?? generatedId;\n    const errorId = `${controlId}-error`;\n    const motionProps = inputAnimationPresets[animation];\n    const ariaInvalid =\n      ariaInvalidProp !== undefined\n        ? ariaInvalidProp\n        : appearance === \"error\"\n          ? true\n          : undefined;\n\n    return (\n      <>\n        <motion.textarea\n          ref={ref}\n          id={controlId}\n          data-slot=\"input\"\n          className={cn(\n            inputVariants({ appearance, size, ring, as }),\n            className,\n          )}\n          initial={false}\n          aria-invalid={ariaInvalid}\n          aria-describedby={\n            errorMessage && appearance === \"error\" ? errorId : undefined\n          }\n          {...motionProps}\n          {...rest}\n        />\n        {errorMessage && appearance === \"error\" && (\n          <p\n            id={errorId}\n            className=\"text-sm text-rose-500 mt-2 pl-4 wrap-break-word\"\n          >\n            {errorMessage}\n          </p>\n        )}\n      </>\n    );\n  }\n\n  const {\n    className,\n    appearance,\n    size,\n    animation = \"none\",\n    ring = true,\n    ref,\n    \"aria-invalid\": ariaInvalidProp,\n    errorMessage,\n    id,\n    as,\n    ...rest\n  } = props;\n\n  const controlId = id ?? generatedId;\n  const errorId = `${controlId}-error`;\n  const motionProps = inputAnimationPresets[animation];\n  const ariaInvalid =\n    ariaInvalidProp !== undefined\n      ? ariaInvalidProp\n      : appearance === \"error\"\n        ? true\n        : undefined;\n\n  return (\n    <>\n      <motion.input\n        ref={ref}\n        id={controlId}\n        data-slot=\"input\"\n        className={cn(\n          inputVariants({ appearance, size, ring, as: as ?? \"input\" }),\n          className,\n        )}\n        initial={false}\n        aria-invalid={ariaInvalid}\n        aria-describedby={\n          errorMessage && appearance === \"error\" ? errorId : undefined\n        }\n        {...motionProps}\n        {...rest}\n      />\n      {errorMessage && appearance === \"error\" && (\n        <p\n          id={errorId}\n          className=\"text-sm text-rose-500 mt-2 pl-4 wrap-break-word\"\n        >\n          {errorMessage}\n        </p>\n      )}\n    </>\n  );\n};\n\nInput.displayName = \"Input\";\n","import { cva } from \"class-variance-authority\";\n\nexport const inputVariants = cva(\n  [\n    \"w-full min-w-0 rounded-xl border bg-white/5 text-slate-50 shadow-[0_1px_2px_rgba(15,23,42,0.12)]\",\n    \"ring-offset-slate-950 transition-colors\",\n    \"placeholder:text-slate-500\",\n    \"focus-visible:outline-none\",\n    \"disabled:cursor-not-allowed disabled:opacity-50\",\n    \"read-only:cursor-default read-only:bg-white/[0.03]\",\n    \"file:h-8\"\n  ],\n  {\n    variants: {\n      as: {\n        input: \"\",\n        textarea: \"h-auto! resize-y py-2 align-top\",\n        file: [\n          // Reset native padding so we control it fully\n          \"p-0! cursor-pointer\",\n          // File-selector button base styles\n          \"file:cursor-pointer file:border-0 file:border-r file:border-white/10\",\n          \"file:bg-white/10 file:text-slate-200 file:font-medium\",\n          \"file:transition-colors file:duration-200\",\n          \"hover:file:bg-white/15\",\n          // Content area padding\n          \"[&:not(:disabled)]:file:hover:text-white\",\n          \"disabled:file:cursor-not-allowed\",\n        ],\n        checkbox: [\n          \"shrink-0 cursor-pointer appearance-none relative\",\n          \"min-h-0! shadow-none outline-none\",\n          \"border-2 border-white/30 [&:not(:checked)]:bg-transparent\",\n          \"transition-[color,box-shadow,border-color,background-color]\",\n          \"disabled:cursor-not-allowed disabled:opacity-50\",\n          \"read-only:cursor-default\",\n          \"checked:after:absolute checked:after:content-[''] checked:after:size-3 checked:after:top-1/2 checked:after:left-1/2 checked:after:-translate-x-1/2 checked:after:-translate-y-1/2 checked:after:rounded-full checked:after:bg-current\"\n        ],\n        radio: [\n          \"shrink-0 cursor-pointer appearance-none rounded-full\",\n          \"min-h-0! shadow-none outline-none\",\n          \"border-2 border-white/30 bg-transparent! read-only:bg-transparent!\",\n          \"ring-2 ring-white/20 ring-offset-2 ring-offset-slate-950\",\n          \"transition-[color,box-shadow,background-color,border-color,box-shadow]\",\n          \"disabled:cursor-not-allowed disabled:opacity-50\",\n          \"read-only:cursor-default\",\n        ],\n      },\n      appearance: {\n        default: \"border-white/10 focus-visible:border-white/20\",\n        warning: \"border-yellow-500/80 text-yellow-50 placeholder:text-yellow-300/70 focus-visible:border-yellow-400 focus-visible:ring-yellow-400/80\",\n        error:\n          \"border-rose-500/80 text-rose-50 placeholder:text-rose-300/70 focus-visible:border-rose-400 focus-visible:ring-rose-400/80\",\n        success:\n          \"border-emerald-500/70 text-emerald-50 placeholder:text-emerald-300/70 focus-visible:border-emerald-400 focus-visible:ring-emerald-400/80\",\n        info: \"border-blue-500/80 text-blue-50 placeholder:text-blue-300/70 focus-visible:border-blue-400 focus-visible:ring-blue-400/80\",\n        violet: \"border-violet-500/80 text-violet-50 placeholder:text-violet-300/70 focus-visible:border-violet-400 focus-visible:ring-violet-400/80\",\n        amber: \"border-amber-500/80 text-amber-50 placeholder:text-amber-300/70 focus-visible:border-amber-400 focus-visible:ring-amber-400/80\",\n        pink: \"border-pink-500/80 text-pink-50 placeholder:text-pink-300/70 focus-visible:border-pink-400 focus-visible:ring-pink-400/80\",\n        indigo: \"border-indigo-500/80 text-indigo-50 placeholder:text-indigo-300/70 focus-visible:border-indigo-400 focus-visible:ring-indigo-400/80\",\n        orange: \"border-orange-500/80 text-orange-50 placeholder:text-orange-300/70 focus-visible:border-orange-400 focus-visible:ring-orange-400/80\",\n\n      },\n      size: {\n        sm: \"h-8 px-3 text-xs\",\n        md: \"h-9 md:h-11 px-4 text-sm\",\n        lg: \"h-10 md:h-12 px-5 text-base\",\n      },\n      ring: {\n        true: \"focus-visible:ring-2 focus-visible:ring-offset-2\",\n        false: \"\",\n      },\n    },\n    defaultVariants: {\n      as: \"input\",\n      appearance: \"default\",\n      size: \"md\",\n      ring: true,\n    },\n    compoundVariants: [\n      // ── textarea size overrides ──────────────────────────────────────────\n      {\n        as: \"textarea\",\n        size: \"sm\",\n        class: \"min-h-[5rem]\",\n      },\n      {\n        as: \"textarea\",\n        size: \"md\",\n        class: \"min-h-[6rem]\",\n      },\n      {\n        as: \"textarea\",\n        size: \"lg\",\n        class: \"min-h-[7.5rem]\",\n      },\n      // ── file input: size – height & file-button padding ──────────────────\n      {\n        as: \"file\",\n        size: \"sm\",\n        class: \"h-8 text-xs pl-1 file:h-8 file:px-3 file:text-xs\",\n      },\n      {\n        as: \"file\",\n        size: \"md\",\n        class: \"h-9 md:h-11 text-sm pl-1 file:h-9 md:file:h-11 file:px-4 file:text-sm\",\n      },\n      {\n        as: \"file\",\n        size: \"lg\",\n        class: \"h-10 md:h-12 text-base pl-1 file:h-10 md:file:h-12 file:px-5 file:text-base\",\n      },\n      // ── file input: appearance – file-button accent colour ───────────────\n      {\n        as: \"file\",\n        appearance: \"default\",\n        class: \"file:text-slate-200\",\n      },\n      {\n        as: \"file\",\n        appearance: \"warning\",\n        class: \"file:bg-yellow-500/20 file:text-yellow-200 file:border-yellow-500/40 hover:file:bg-yellow-500/30\",\n      },\n      {\n        as: \"file\",\n        appearance: \"error\",\n        class: \"file:bg-rose-500/20 file:text-rose-200 file:border-rose-500/40 hover:file:bg-rose-500/30\",\n      },\n      {\n        as: \"file\",\n        appearance: \"success\",\n        class: \"file:bg-emerald-500/20 file:text-emerald-200 file:border-emerald-500/40 hover:file:bg-emerald-500/30\",\n      },\n      {\n        as: \"file\",\n        appearance: \"info\",\n        class: \"file:bg-blue-500/20 file:text-blue-200 file:border-blue-500/40 hover:file:bg-blue-500/30\",\n      },\n      {\n        as: \"file\",\n        appearance: \"violet\",\n        class: \"file:bg-violet-500/20 file:text-violet-200 file:border-violet-500/40 hover:file:bg-violet-500/30\",\n      },\n      {\n        as: \"file\",\n        appearance: \"amber\",\n        class: \"file:bg-amber-500/20 file:text-amber-200 file:border-amber-500/40 hover:file:bg-amber-500/30\",\n      },\n      {\n        as: \"file\",\n        appearance: \"pink\",\n        class: \"file:bg-pink-500/20 file:text-pink-200 file:border-pink-500/40 hover:file:bg-pink-500/30\",\n      },\n      {\n        as: \"file\",\n        appearance: \"indigo\",\n        class: \"file:bg-indigo-500/20 file:text-indigo-200 file:border-indigo-500/40 hover:file:bg-indigo-500/30\",\n      },\n      // ── checkbox / radio: size (overrides text-field height & padding) ───\n      {\n        as: \"checkbox\",\n        size: \"sm\",\n        class:\n          \"h-4! w-4! min-h-0! rounded-[0.35rem]! px-0! py-0!\",\n      },\n      {\n        as: \"checkbox\",\n        size: \"md\",\n        class:\n          \"h-5! w-5! min-h-0! rounded-md! px-0! py-0!\",\n      },\n      {\n        as: \"checkbox\",\n        size: \"lg\",\n        class:\n          \"h-6! w-6! min-h-0! rounded-md! px-0! py-0!\",\n      },\n      {\n        as: \"radio\",\n        size: \"sm\",\n        class: \"h-4! w-4! min-h-0! px-0! py-0!\",\n      },\n      {\n        as: \"radio\",\n        size: \"md\",\n        class: \"h-5! w-5! min-h-0! px-0! py-0!\",\n      },\n      {\n        as: \"radio\",\n        size: \"lg\",\n        class: \"h-6! w-6! min-h-0! px-0! py-0!\",\n      },\n      // ── checkbox: appearance (border + tick color; fill stays transparent) ─\n      {\n        as: \"checkbox\",\n        appearance: \"default\",\n        class:\n          \"border-slate-400/70! checked:border-slate-200 checked:text-slate-200 hover:border-slate-300 focus-visible:border-slate-300 focus-visible:ring-slate-400/70\",\n      },\n      {\n        as: \"checkbox\",\n        appearance: \"warning\",\n        class:\n          \"border-yellow-500/70! checked:border-yellow-400 checked:text-yellow-300 hover:border-yellow-400 focus-visible:border-yellow-400 focus-visible:ring-yellow-400/80\",\n      },\n      {\n        as: \"checkbox\",\n        appearance: \"error\",\n        class:\n          \"border-rose-500/70! checked:border-rose-400 checked:text-rose-300 hover:border-rose-400 focus-visible:border-rose-400 focus-visible:ring-rose-400/80\",\n      },\n      {\n        as: \"checkbox\",\n        appearance: \"success\",\n        class:\n          \"border-emerald-500/70! checked:border-emerald-400 checked:text-emerald-300 hover:border-emerald-400 focus-visible:border-emerald-400 focus-visible:ring-emerald-400/80\",\n      },\n      {\n        as: \"checkbox\",\n        appearance: \"info\",\n        class:\n          \"border-blue-500/70! checked:border-blue-400 checked:text-blue-300 hover:border-blue-400 focus-visible:border-blue-400 focus-visible:ring-blue-400/80\",\n      },\n      {\n        as: \"checkbox\",\n        appearance: \"violet\",\n        class:\n          \"border-violet-500/70! checked:after:bg-violet-400 checked:border-violet-400 checked:text-violet-300 hover:border-violet-400 focus-visible:border-violet-400 focus-visible:ring-violet-400/80\",\n      },\n      {\n        as: \"checkbox\",\n        appearance: \"amber\",\n        class:\n          \"border-amber-500/70! checked:border-amber-400! checked:text-amber-300 hover:border-amber-400! focus-visible:border-amber-400! focus-visible:ring-amber-400/80!\",\n      },\n      {\n        as: \"checkbox\",\n        appearance: \"pink\",\n        class:\n          \"border-pink-500/70! checked:border-pink-400 checked:text-pink-300 hover:border-pink-400 focus-visible:border-pink-400 focus-visible:ring-pink-400/80\",\n      },\n      {\n        as: \"checkbox\",\n        appearance: \"indigo\",\n        class:\n          \"border-indigo-500/70! checked:border-indigo-400! checked:text-indigo-300 hover:border-indigo-400! focus-visible:border-indigo-400! focus-visible:ring-indigo-400/80!\",\n      },\n      // ── radio: appearance (transparent fill, inner dot, coloured offset ring) ─\n      {\n        as: \"radio\",\n        appearance: \"default\",\n        class:\n          \"border-slate-400/70! checked:border-slate-200 checked:bg-transparent! checked:shadow-[inset_0_0_0_0.28rem_rgb(226,232,240)]! hover:border-slate-300 focus-visible:border-slate-300 focus-visible:ring-slate-400/70 checked:ring-2! checked:ring-offset-2! checked:ring-offset-slate-950! checked:ring-slate-300/90!\",\n      },\n      {\n        as: \"radio\",\n        appearance: \"warning\",\n        class:\n          \"border-yellow-500/70! checked:border-yellow-400 checked:bg-transparent! checked:shadow-[inset_0_0_0_0.28rem_rgb(250,204,21)]! hover:border-yellow-400 focus-visible:border-yellow-400 focus-visible:ring-yellow-400/80 checked:ring-2! checked:ring-offset-2! checked:ring-offset-slate-950! checked:ring-yellow-400/90!\",\n      },\n      {\n        as: \"radio\",\n        appearance: \"error\",\n        class:\n          \"border-rose-500/70! checked:border-rose-400 checked:bg-transparent! checked:shadow-[inset_0_0_0_0.28rem_rgb(251,113,133)]! hover:border-rose-400 focus-visible:border-rose-400 focus-visible:ring-rose-400/80 checked:ring-2! checked:ring-offset-2! checked:ring-offset-slate-950! checked:ring-rose-400/90!\",\n      },\n      {\n        as: \"radio\",\n        appearance: \"success\",\n        class:\n          \"border-emerald-500/70! checked:border-emerald-400 checked:bg-transparent! checked:shadow-[inset_0_0_0_0.28rem_rgb(52,211,153)]! hover:border-emerald-400 focus-visible:border-emerald-400 focus-visible:ring-emerald-400/80 checked:ring-2! checked:ring-offset-2! checked:ring-offset-slate-950! checked:ring-emerald-400/90!\",\n      },\n      {\n        as: \"radio\",\n        appearance: \"info\",\n        class:\n          \"border-blue-500/70! checked:border-blue-400 checked:bg-transparent! checked:shadow-[inset_0_0_0_0.28rem_rgb(96,165,250)]! hover:border-blue-400 focus-visible:border-blue-400 focus-visible:ring-blue-400/80 checked:ring-2! checked:ring-offset-2! checked:ring-offset-slate-950! checked:ring-blue-400/90!\",\n      },\n      {\n        as: \"radio\",\n        appearance: \"violet\",\n        class:\n          \"border-violet-500/70! checked:border-violet-400 checked:bg-transparent! checked:shadow-[inset_0_0_0_0.28rem_rgb(167,139,250)]! hover:border-violet-400 focus-visible:border-violet-400 focus-visible:ring-violet-400/80 checked:ring-2! checked:ring-offset-2! checked:ring-offset-slate-950! checked:ring-violet-400/90!\",\n      },\n      {\n        as: \"radio\",\n        appearance: \"amber\",\n        class:\n          \"border-amber-500/70! checked:border-amber-400 checked:bg-transparent! checked:shadow-[inset_0_0_0_0.28rem_rgb(251,191,36)]! hover:border-amber-400 focus-visible:border-amber-400 focus-visible:ring-amber-400/80 checked:ring-2! checked:ring-offset-2! checked:ring-offset-slate-950! checked:ring-amber-400/90!\",\n      },\n      {\n        as: \"radio\",\n        appearance: \"pink\",\n        class:\n          \"border-pink-500/70! checked:border-pink-400 checked:bg-transparent! checked:shadow-[inset_0_0_0_0.28rem_rgb(244,114,182)]! hover:border-pink-400 focus-visible:border-pink-400 focus-visible:ring-pink-400/80 checked:ring-2! checked:ring-offset-2! checked:ring-offset-slate-950! checked:ring-pink-400/90!\",\n      },\n      {\n        as: \"radio\",\n        appearance: \"indigo\",\n        class:\n          \"border-indigo-500/70! checked:border-indigo-400 checked:bg-transparent! checked:shadow-[inset_0_0_0_0.28rem_rgb(129,140,248)]! hover:border-indigo-400 focus-visible:border-indigo-400 focus-visible:ring-indigo-400/80 checked:ring-2! checked:ring-offset-2! checked:ring-offset-slate-950! checked:ring-indigo-400/90!\",\n      },\n    ],\n  },\n);\n"],"mappings":"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","names":["className","appearance","size","animation","ring","ref","ariaInvalidProp","errorMessage","id","as","rest","controlId","errorId","motionProps","ariaInvalid"]}

package/dist/ui/modal.d.mts

@@ -0,0 +1,84 @@
+import * as react from 'react';
+import { ReactNode, Ref, CSSProperties, HTMLAttributes } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { VariantProps } from 'class-variance-authority';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { HTMLMotionProps } from 'framer-motion';
+
+declare const modalOverlayVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+declare const modalTriggerVariants: (props?: ({
+    appearance?: "default" | "glass" | "sky" | "rose" | "purple" | "pink" | "orange" | "yellow" | "teal" | "indigo" | "emerald" | "gray" | "amber" | "violet" | "gradient-blue" | "gradient-green" | "gradient-red" | "gradient-yellow" | "gradient-purple" | "gradient-teal" | "gradient-indigo" | "gradient-pink" | "gradient-orange" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const modalContentVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | "xl" | "full" | null | undefined;
+    position?: "center" | "top" | "bottom" | null | undefined;
+    appearance?: "default" | "glass" | "sky" | "rose" | "purple" | "pink" | "orange" | "yellow" | "teal" | "indigo" | "emerald" | "gray" | "amber" | "violet" | "gradient-blue" | "gradient-green" | "gradient-red" | "gradient-yellow" | "gradient-purple" | "gradient-teal" | "gradient-indigo" | "gradient-pink" | "gradient-orange" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+
+type ModalAnimation = "none" | "fade" | "scale" | "slide-up" | "slide-down";
+type ModalContentVariantProps = VariantProps<typeof modalContentVariants>;
+type ModalProps = {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    children?: ReactNode;
+};
+type ModalTriggerProps = HTMLAttributes<HTMLButtonElement> & {
+    ref?: Ref<HTMLButtonElement>;
+    appearance?: VariantProps<typeof modalTriggerVariants>["appearance"];
+};
+type ModalContentProps = ModalContentVariantProps & {
+    animation?: ModalAnimation;
+    className?: string;
+    children?: ReactNode;
+    ref?: Ref<HTMLDivElement>;
+    id?: string;
+    style?: CSSProperties;
+};
+type ModalSectionProps = {
+    className?: string;
+    children?: ReactNode;
+};
+
+declare function Modal({ open, defaultOpen, onOpenChange, children }: ModalProps): react_jsx_runtime.JSX.Element;
+declare namespace Modal {
+    var displayName: string;
+}
+declare function ModalTrigger({ className, children, appearance, onClick, ref, ...rest }: ModalTriggerProps): react_jsx_runtime.JSX.Element;
+declare namespace ModalTrigger {
+    var displayName: string;
+}
+declare function ModalContent({ className, size, position, appearance, animation, children, ref, id, style, }: ModalContentProps): react.ReactPortal | null;
+declare namespace ModalContent {
+    var displayName: string;
+}
+declare function ModalHeader({ className, children }: ModalSectionProps): react_jsx_runtime.JSX.Element;
+declare namespace ModalHeader {
+    var displayName: string;
+}
+declare function ModalBody({ className, children }: ModalSectionProps): react_jsx_runtime.JSX.Element;
+declare namespace ModalBody {
+    var displayName: string;
+}
+declare function ModalFooter({ className, children }: ModalSectionProps): react_jsx_runtime.JSX.Element;
+declare namespace ModalFooter {
+    var displayName: string;
+}
+declare function ModalTitle({ className, children }: ModalSectionProps): react_jsx_runtime.JSX.Element;
+declare namespace ModalTitle {
+    var displayName: string;
+}
+declare function ModalDescription({ className, children }: ModalSectionProps): react_jsx_runtime.JSX.Element;
+declare namespace ModalDescription {
+    var displayName: string;
+}
+declare function ModalClose({ className, children, ...rest }: ModalSectionProps): react_jsx_runtime.JSX.Element;
+declare namespace ModalClose {
+    var displayName: string;
+}
+
+type ModalPresetMotionProps = Pick<HTMLMotionProps<"div">, "initial" | "animate" | "exit" | "transition">;
+type ModalAnimationPresets = Record<ModalAnimation, ModalPresetMotionProps>;
+declare const modalOverlayAnimationPresets: ModalAnimationPresets;
+
+export { Modal, type ModalAnimation, ModalBody, ModalClose, ModalContent, type ModalContentProps, ModalDescription, ModalFooter, ModalHeader, type ModalProps, type ModalSectionProps, ModalTitle, ModalTrigger, type ModalTriggerProps, modalContentVariants, modalOverlayAnimationPresets, modalOverlayVariants };

package/dist/ui/modal.d.ts

@@ -0,0 +1,84 @@
+import * as react from 'react';
+import { ReactNode, Ref, CSSProperties, HTMLAttributes } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { VariantProps } from 'class-variance-authority';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { HTMLMotionProps } from 'framer-motion';
+
+declare const modalOverlayVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+declare const modalTriggerVariants: (props?: ({
+    appearance?: "default" | "glass" | "sky" | "rose" | "purple" | "pink" | "orange" | "yellow" | "teal" | "indigo" | "emerald" | "gray" | "amber" | "violet" | "gradient-blue" | "gradient-green" | "gradient-red" | "gradient-yellow" | "gradient-purple" | "gradient-teal" | "gradient-indigo" | "gradient-pink" | "gradient-orange" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const modalContentVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | "xl" | "full" | null | undefined;
+    position?: "center" | "top" | "bottom" | null | undefined;
+    appearance?: "default" | "glass" | "sky" | "rose" | "purple" | "pink" | "orange" | "yellow" | "teal" | "indigo" | "emerald" | "gray" | "amber" | "violet" | "gradient-blue" | "gradient-green" | "gradient-red" | "gradient-yellow" | "gradient-purple" | "gradient-teal" | "gradient-indigo" | "gradient-pink" | "gradient-orange" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+
+type ModalAnimation = "none" | "fade" | "scale" | "slide-up" | "slide-down";
+type ModalContentVariantProps = VariantProps<typeof modalContentVariants>;
+type ModalProps = {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    children?: ReactNode;
+};
+type ModalTriggerProps = HTMLAttributes<HTMLButtonElement> & {
+    ref?: Ref<HTMLButtonElement>;
+    appearance?: VariantProps<typeof modalTriggerVariants>["appearance"];
+};
+type ModalContentProps = ModalContentVariantProps & {
+    animation?: ModalAnimation;
+    className?: string;
+    children?: ReactNode;
+    ref?: Ref<HTMLDivElement>;
+    id?: string;
+    style?: CSSProperties;
+};
+type ModalSectionProps = {
+    className?: string;
+    children?: ReactNode;
+};
+
+declare function Modal({ open, defaultOpen, onOpenChange, children }: ModalProps): react_jsx_runtime.JSX.Element;
+declare namespace Modal {
+    var displayName: string;
+}
+declare function ModalTrigger({ className, children, appearance, onClick, ref, ...rest }: ModalTriggerProps): react_jsx_runtime.JSX.Element;
+declare namespace ModalTrigger {
+    var displayName: string;
+}
+declare function ModalContent({ className, size, position, appearance, animation, children, ref, id, style, }: ModalContentProps): react.ReactPortal | null;
+declare namespace ModalContent {
+    var displayName: string;
+}
+declare function ModalHeader({ className, children }: ModalSectionProps): react_jsx_runtime.JSX.Element;
+declare namespace ModalHeader {
+    var displayName: string;
+}
+declare function ModalBody({ className, children }: ModalSectionProps): react_jsx_runtime.JSX.Element;
+declare namespace ModalBody {
+    var displayName: string;
+}
+declare function ModalFooter({ className, children }: ModalSectionProps): react_jsx_runtime.JSX.Element;
+declare namespace ModalFooter {
+    var displayName: string;
+}
+declare function ModalTitle({ className, children }: ModalSectionProps): react_jsx_runtime.JSX.Element;
+declare namespace ModalTitle {
+    var displayName: string;
+}
+declare function ModalDescription({ className, children }: ModalSectionProps): react_jsx_runtime.JSX.Element;
+declare namespace ModalDescription {
+    var displayName: string;
+}
+declare function ModalClose({ className, children, ...rest }: ModalSectionProps): react_jsx_runtime.JSX.Element;
+declare namespace ModalClose {
+    var displayName: string;
+}
+
+type ModalPresetMotionProps = Pick<HTMLMotionProps<"div">, "initial" | "animate" | "exit" | "transition">;
+type ModalAnimationPresets = Record<ModalAnimation, ModalPresetMotionProps>;
+declare const modalOverlayAnimationPresets: ModalAnimationPresets;
+
+export { Modal, type ModalAnimation, ModalBody, ModalClose, ModalContent, type ModalContentProps, ModalDescription, ModalFooter, ModalHeader, type ModalProps, type ModalSectionProps, ModalTitle, ModalTrigger, type ModalTriggerProps, modalContentVariants, modalOverlayAnimationPresets, modalOverlayVariants };