@annondeveloper/ui-kit 0.1.0

package/dist/cli/index.js

@@ -0,0 +1,430 @@
+#!/usr/bin/env node
+import * as fs2 from 'fs';
+import * as path2 from 'path';
+import { fileURLToPath } from 'url';
+
+// src/cli/add.ts
+
+// src/cli/registry.ts
+var registry = [
+  {
+    name: "animated-counter",
+    description: "Smoothly animates between numeric values with easing.",
+    files: ["components/animated-counter.tsx"],
+    dependencies: ["framer-motion"],
+    internalDeps: ["utils"]
+  },
+  {
+    name: "badge",
+    description: "Themed badge with color presets, optional icon, and custom variant support.",
+    files: ["components/badge.tsx"],
+    dependencies: ["lucide-react"],
+    internalDeps: ["utils"]
+  },
+  {
+    name: "button",
+    description: "Polymorphic button with variant, size, loading, and icon support.",
+    files: ["components/button.tsx"],
+    dependencies: ["lucide-react"],
+    internalDeps: ["utils"]
+  },
+  {
+    name: "checkbox",
+    description: "Themed checkbox with indeterminate state support.",
+    files: ["components/checkbox.tsx"],
+    dependencies: ["lucide-react"],
+    internalDeps: ["utils"]
+  },
+  {
+    name: "confirm-dialog",
+    description: "Accessible confirmation dialog built on Radix AlertDialog.",
+    files: ["components/confirm-dialog.tsx"],
+    dependencies: ["@radix-ui/react-alert-dialog", "framer-motion", "lucide-react"],
+    internalDeps: ["utils"]
+  },
+  {
+    name: "data-table",
+    description: "Full-featured data table with sorting, filtering, pagination, and density control.",
+    files: ["components/data-table.tsx"],
+    dependencies: ["@tanstack/react-table", "framer-motion", "lucide-react"],
+    internalDeps: ["utils", "truncated-text", "empty-state", "skeleton"]
+  },
+  {
+    name: "dropdown-menu",
+    description: "Animated dropdown menu built on Radix DropdownMenu.",
+    files: ["components/dropdown-menu.tsx"],
+    dependencies: ["@radix-ui/react-dropdown-menu", "framer-motion", "lucide-react"],
+    internalDeps: ["utils"]
+  },
+  {
+    name: "empty-state",
+    description: "Decorative empty-state placeholder with icon, title, and optional actions.",
+    files: ["components/empty-state.tsx"],
+    dependencies: ["lucide-react"],
+    internalDeps: ["utils"]
+  },
+  {
+    name: "filter-pill",
+    description: "Rounded pill-style filter toggle with active state and optional count.",
+    files: ["components/filter-pill.tsx"],
+    dependencies: [],
+    internalDeps: ["utils"]
+  },
+  {
+    name: "form-input",
+    description: "Themed text input with label, error, and helper text. Exports shared class constants.",
+    files: ["components/form-input.tsx"],
+    dependencies: [],
+    internalDeps: ["utils"]
+  },
+  {
+    name: "metric-card",
+    description: "KPI card with animated counter, sparkline, and trend indicator.",
+    files: ["components/metric-card.tsx"],
+    dependencies: ["framer-motion", "lucide-react"],
+    internalDeps: ["utils", "animated-counter", "sparkline"]
+  },
+  {
+    name: "select",
+    description: "Themed select dropdown built on Radix Select.",
+    files: ["components/select.tsx"],
+    dependencies: ["@radix-ui/react-select", "lucide-react"],
+    internalDeps: ["utils"]
+  },
+  {
+    name: "severity-timeline",
+    description: "Vertical timeline with severity-colored dots and expandable detail.",
+    files: ["components/severity-timeline.tsx"],
+    dependencies: ["framer-motion"],
+    internalDeps: ["utils"]
+  },
+  {
+    name: "sheet",
+    description: "Slide-over panel from the right edge with backdrop and keyboard dismiss.",
+    files: ["components/sheet.tsx"],
+    dependencies: ["framer-motion", "lucide-react"],
+    internalDeps: ["utils"]
+  },
+  {
+    name: "skeleton",
+    description: "Shimmer skeleton loaders (block, text lines, card).",
+    files: ["components/skeleton.tsx"],
+    dependencies: [],
+    internalDeps: ["utils"]
+  },
+  {
+    name: "sparkline",
+    description: "Minimal SVG sparkline chart for inline metric trends.",
+    files: ["components/sparkline.tsx"],
+    dependencies: [],
+    internalDeps: ["utils"]
+  },
+  {
+    name: "status-badge",
+    description: "Status indicator with colored dot, label, and configurable status map.",
+    files: ["components/status-badge.tsx"],
+    dependencies: [],
+    internalDeps: ["utils"]
+  },
+  {
+    name: "status-pulse",
+    description: "Animated pulsing status dot with configurable colors.",
+    files: ["components/status-pulse.tsx"],
+    dependencies: ["framer-motion"],
+    internalDeps: ["utils"]
+  },
+  {
+    name: "success-checkmark",
+    description: "Animated SVG checkmark for success confirmations.",
+    files: ["components/success-checkmark.tsx"],
+    dependencies: ["framer-motion"],
+    internalDeps: ["utils"]
+  },
+  {
+    name: "tabs",
+    description: "Animated tab bar with optional icons and keyboard navigation.",
+    files: ["components/tabs.tsx"],
+    dependencies: ["framer-motion", "lucide-react"],
+    internalDeps: ["utils"]
+  },
+  {
+    name: "threshold-gauge",
+    description: "SVG arc gauge with warning/critical threshold coloring.",
+    files: ["components/threshold-gauge.tsx"],
+    dependencies: ["framer-motion"],
+    internalDeps: ["utils"]
+  },
+  {
+    name: "toast",
+    description: "Themed toast notifications powered by Sonner.",
+    files: ["components/toast.tsx"],
+    dependencies: ["sonner"],
+    internalDeps: []
+  },
+  {
+    name: "toggle-switch",
+    description: "Toggle switch with on/off icons and themed styling.",
+    files: ["components/toggle-switch.tsx"],
+    dependencies: ["lucide-react"],
+    internalDeps: ["utils"]
+  },
+  {
+    name: "truncated-text",
+    description: "Text that truncates with ellipsis and shows full content in a tooltip.",
+    files: ["components/truncated-text.tsx"],
+    dependencies: ["@radix-ui/react-tooltip", "lucide-react"],
+    internalDeps: []
+  },
+  {
+    name: "utilization-bar",
+    description: "Horizontal bar showing utilization percentage with threshold coloring.",
+    files: ["components/utilization-bar.tsx"],
+    dependencies: ["framer-motion"],
+    internalDeps: ["utils"]
+  }
+];
+var UTILS_ENTRY = {
+  name: "utils",
+  description: "Shared utility functions (cn, formatters, color helpers).",
+  files: ["utils.ts"],
+  dependencies: ["clsx", "tailwind-merge"],
+  internalDeps: []
+};
+function findComponent(name) {
+  if (name === "utils") return UTILS_ENTRY;
+  return registry.find((c) => c.name === name);
+}
+
+// src/cli/add.ts
+var __dirname$1 = path2.dirname(fileURLToPath(import.meta.url));
+function pkgSrc(rel) {
+  return path2.resolve(__dirname$1, "..", "..", "src", rel);
+}
+function readConfig() {
+  const configPath = path2.join(process.cwd(), ".ui-kit.json");
+  if (!fs2.existsSync(configPath)) return null;
+  return JSON.parse(fs2.readFileSync(configPath, "utf-8"));
+}
+function writeConfig(config) {
+  const configPath = path2.join(process.cwd(), ".ui-kit.json");
+  fs2.writeFileSync(configPath, JSON.stringify(config, null, 2) + "\n");
+}
+function rewriteImports(content) {
+  return content.replace(/from\s+['"]\.\.\/utils['"]/g, "from './utils'");
+}
+function collectDeps(name, seen = /* @__PURE__ */ new Set()) {
+  if (seen.has(name)) return [];
+  seen.add(name);
+  const comp = findComponent(name);
+  if (!comp) return [];
+  const deps = [];
+  for (const dep of comp.internalDeps) {
+    deps.push(...collectDeps(dep, seen));
+    deps.push(dep);
+  }
+  return deps;
+}
+function add(componentName, opts) {
+  const comp = findComponent(componentName);
+  if (!comp) {
+    console.error(`  Error: Unknown component "${componentName}".`);
+    console.error(`  Run "npx @annondeveloper/ui-kit list" to see available components.`);
+    process.exit(1);
+  }
+  const projectRoot = process.cwd();
+  const config = readConfig() || { componentDir: opts.dir, installed: [] };
+  const targetDir = path2.resolve(projectRoot, config.componentDir || opts.dir);
+  fs2.mkdirSync(targetDir, { recursive: true });
+  const allDeps = collectDeps(componentName);
+  const toInstall = [];
+  for (const depName of allDeps) {
+    if (!config.installed.includes(depName)) {
+      const dep = findComponent(depName);
+      if (dep) toInstall.push(dep);
+    }
+  }
+  if (!config.installed.includes(componentName) || opts.overwrite) {
+    toInstall.push(comp);
+  } else {
+    console.log(`  [skip] ${componentName} already installed (use --overwrite)`);
+    if (toInstall.length === 0) return;
+  }
+  const allNpmDeps = /* @__PURE__ */ new Set();
+  for (const entry of toInstall) {
+    for (const file of entry.files) {
+      const src = pkgSrc(file);
+      const dst = path2.join(targetDir, path2.basename(file));
+      if (fs2.existsSync(dst) && !opts.overwrite && config.installed.includes(entry.name)) {
+        console.log(`  [skip] ${path2.relative(projectRoot, dst)} (already exists)`);
+        continue;
+      }
+      if (!fs2.existsSync(src)) {
+        console.error(`  [error] Source file not found: ${src}`);
+        continue;
+      }
+      let content = fs2.readFileSync(src, "utf-8");
+      content = rewriteImports(content);
+      fs2.writeFileSync(dst, content);
+      const label = entry.name === componentName ? "copy" : "dep ";
+      console.log(`  [${label}] ${path2.relative(projectRoot, dst)}`);
+    }
+    for (const dep of entry.dependencies) {
+      allNpmDeps.add(dep);
+    }
+    if (!config.installed.includes(entry.name)) {
+      config.installed.push(entry.name);
+    }
+  }
+  writeConfig(config);
+  if (allNpmDeps.size > 0) {
+    console.log("");
+    console.log("  Required npm dependencies:");
+    console.log("");
+    console.log(`    npm install ${[...allNpmDeps].join(" ")}`);
+    console.log("");
+  }
+}
+var __dirname2 = path2.dirname(fileURLToPath(import.meta.url));
+function pkgSrc2(rel) {
+  return path2.resolve(__dirname2, "..", "..", "src", rel);
+}
+function init(opts) {
+  const projectRoot = process.cwd();
+  const targetDir = path2.resolve(projectRoot, opts.dir);
+  const stylesDir = path2.resolve(projectRoot, "styles");
+  fs2.mkdirSync(targetDir, { recursive: true });
+  fs2.mkdirSync(stylesDir, { recursive: true });
+  const themeSrc = pkgSrc2("theme.css");
+  const themeDst = path2.join(stylesDir, "ui-kit-theme.css");
+  if (fs2.existsSync(themeDst) && !opts.overwrite) {
+    console.log(`  [skip] ${path2.relative(projectRoot, themeDst)} already exists (use --overwrite)`);
+  } else {
+    fs2.copyFileSync(themeSrc, themeDst);
+    console.log(`  [copy] ${path2.relative(projectRoot, themeDst)}`);
+  }
+  const utilsSrc = pkgSrc2("utils.ts");
+  const utilsDst = path2.join(targetDir, "utils.ts");
+  if (fs2.existsSync(utilsDst) && !opts.overwrite) {
+    console.log(`  [skip] ${path2.relative(projectRoot, utilsDst)} already exists (use --overwrite)`);
+  } else {
+    fs2.copyFileSync(utilsSrc, utilsDst);
+    console.log(`  [copy] ${path2.relative(projectRoot, utilsDst)}`);
+  }
+  const configPath = path2.join(projectRoot, ".ui-kit.json");
+  const config = fs2.existsSync(configPath) ? JSON.parse(fs2.readFileSync(configPath, "utf-8")) : { componentDir: opts.dir, installed: [] };
+  config.componentDir = opts.dir;
+  if (!config.installed.includes("utils")) {
+    config.installed.push("utils");
+  }
+  fs2.writeFileSync(configPath, JSON.stringify(config, null, 2) + "\n");
+  console.log(`  [write] .ui-kit.json`);
+  console.log("");
+  console.log("  Setup complete! Next steps:");
+  console.log("");
+  console.log("  1. Import the theme in your root layout or global CSS:");
+  console.log("");
+  console.log("     @import '../styles/ui-kit-theme.css';");
+  console.log("");
+  console.log("  2. Install required peer dependencies:");
+  console.log("");
+  console.log("     npm install clsx tailwind-merge");
+  console.log("");
+  console.log("  3. Add components:");
+  console.log("");
+  console.log("     npx @annondeveloper/ui-kit add button");
+  console.log("     npx @annondeveloper/ui-kit add data-table");
+  console.log("");
+}
+
+// src/cli/list.ts
+function listComponents() {
+  console.log("");
+  console.log("  Available components");
+  console.log("  " + "=".repeat(70));
+  console.log("");
+  const maxName = Math.max(...registry.map((c) => c.name.length));
+  for (const comp of registry) {
+    const name = comp.name.padEnd(maxName + 2);
+    const deps = comp.internalDeps.length > 0 ? `  [deps: ${comp.internalDeps.join(", ")}]` : "";
+    console.log(`  ${name} ${comp.description}${deps}`);
+  }
+  console.log("");
+  console.log(`  ${registry.length} components available`);
+  console.log("");
+}
+
+// src/cli/index.ts
+var HELP = `
+  @annondeveloper/ui-kit CLI
+
+  Usage: npx @annondeveloper/ui-kit <command> [options]
+
+  Commands:
+    init                Set up ui-kit in your project (copies theme.css + utils.ts)
+    add <component>     Add a component to your project
+    list                List all available components
+
+  Options:
+    --dir <path>        Target directory (default: ./components/ui)
+    --overwrite         Overwrite existing files
+    --help, -h          Show this help message
+`;
+function parseArgs(argv) {
+  const args = argv.slice(2);
+  const command = args[0] || "help";
+  const positional = [];
+  const flags = {};
+  for (let i = 1; i < args.length; i++) {
+    const arg = args[i];
+    if (arg === "--help" || arg === "-h") {
+      flags.help = true;
+    } else if (arg === "--overwrite") {
+      flags.overwrite = true;
+    } else if (arg === "--dir" && i + 1 < args.length) {
+      flags.dir = args[++i];
+    } else if (!arg.startsWith("-")) {
+      positional.push(arg);
+    } else {
+      console.error(`  Unknown option: ${arg}`);
+      process.exit(1);
+    }
+  }
+  return { command, positional, flags };
+}
+function main() {
+  const { command, positional, flags } = parseArgs(process.argv);
+  if (flags.help || command === "help" || command === "--help" || command === "-h") {
+    console.log(HELP);
+    process.exit(0);
+  }
+  const dir = flags.dir || "./components/ui";
+  const overwrite = !!flags.overwrite;
+  switch (command) {
+    case "init":
+      console.log("");
+      console.log("  Initializing @annondeveloper/ui-kit...");
+      console.log("");
+      init({ dir, overwrite });
+      break;
+    case "add": {
+      const name = positional[0];
+      if (!name) {
+        console.error("  Error: Please specify a component name.");
+        console.error("  Usage: npx @annondeveloper/ui-kit add <component>");
+        console.error('  Run "npx @annondeveloper/ui-kit list" to see available components.');
+        process.exit(1);
+      }
+      console.log("");
+      add(name, { dir, overwrite });
+      break;
+    }
+    case "list":
+      listComponents();
+      break;
+    default:
+      console.error(`  Unknown command: ${command}`);
+      console.log(HELP);
+      process.exit(1);
+  }
+}
+main();

package/dist/form.d.ts

@@ -0,0 +1,65 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { FieldValues, Control, Path, RegisterOptions } from 'react-hook-form';
+import { S as SelectOption } from './select-nnBJUO8U.js';
+
+interface RHFFormInputProps<T extends FieldValues> {
+    control: Control<T>;
+    name: Path<T>;
+    rules?: RegisterOptions<T, Path<T>>;
+    label: string;
+    type?: string;
+    placeholder?: string;
+    required?: boolean;
+    disabled?: boolean;
+    hint?: string;
+    className?: string;
+    autoComplete?: string;
+}
+/**
+ * FormInput wrapper for react-hook-form.
+ * Shows validation errors from fieldState.error automatically.
+ */
+declare function RHFFormInput<T extends FieldValues>({ control, name, rules, label, type, placeholder, required, disabled, hint, className, autoComplete, }: RHFFormInputProps<T>): react_jsx_runtime.JSX.Element;
+interface RHFSelectProps<T extends FieldValues> {
+    control: Control<T>;
+    name: Path<T>;
+    rules?: RegisterOptions<T, Path<T>>;
+    options: SelectOption[];
+    placeholder?: string;
+    disabled?: boolean;
+    className?: string;
+    label?: string;
+}
+/**
+ * Select wrapper for react-hook-form.
+ * Shows validation errors from fieldState.error automatically.
+ */
+declare function RHFSelect<T extends FieldValues>({ control, name, rules, options, placeholder, disabled, className, label, }: RHFSelectProps<T>): react_jsx_runtime.JSX.Element;
+interface RHFCheckboxProps<T extends FieldValues> {
+    control: Control<T>;
+    name: Path<T>;
+    rules?: RegisterOptions<T, Path<T>>;
+    label?: string;
+    disabled?: boolean;
+    className?: string;
+}
+/**
+ * Checkbox wrapper for react-hook-form.
+ * Shows validation errors from fieldState.error automatically.
+ */
+declare function RHFCheckbox<T extends FieldValues>({ control, name, rules, label, disabled, className, }: RHFCheckboxProps<T>): react_jsx_runtime.JSX.Element;
+interface RHFToggleSwitchProps<T extends FieldValues> {
+    control: Control<T>;
+    name: Path<T>;
+    rules?: RegisterOptions<T, Path<T>>;
+    label?: string;
+    disabled?: boolean;
+    className?: string;
+}
+/**
+ * ToggleSwitch wrapper for react-hook-form.
+ * Shows validation errors from fieldState.error automatically.
+ */
+declare function RHFToggleSwitch<T extends FieldValues>({ control, name, rules, label, disabled, className, }: RHFToggleSwitchProps<T>): react_jsx_runtime.JSX.Element;
+
+export { RHFCheckbox, type RHFCheckboxProps, RHFFormInput, type RHFFormInputProps, RHFSelect, type RHFSelectProps, RHFToggleSwitch, type RHFToggleSwitchProps };

package/dist/form.js

@@ -0,0 +1,148 @@
+import { FormInput, cn, Select, Checkbox, ToggleSwitch } from './chunk-5OKSXPWK.js';
+import { Controller } from 'react-hook-form';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function FieldError({ message }) {
+  if (!message) return null;
+  return /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-[hsl(var(--status-critical))]", children: message });
+}
+function RHFFormInput({
+  control,
+  name,
+  rules,
+  label,
+  type = "text",
+  placeholder,
+  required,
+  disabled,
+  hint,
+  className,
+  autoComplete
+}) {
+  return /* @__PURE__ */ jsx(
+    Controller,
+    {
+      control,
+      name,
+      rules,
+      render: ({ field, fieldState }) => /* @__PURE__ */ jsxs("div", { className: cn("space-y-1.5", className), children: [
+        /* @__PURE__ */ jsx(
+          FormInput,
+          {
+            label,
+            value: field.value ?? "",
+            onChange: field.onChange,
+            type,
+            placeholder,
+            required,
+            disabled,
+            hint: fieldState.error ? void 0 : hint,
+            autoComplete
+          }
+        ),
+        /* @__PURE__ */ jsx(FieldError, { message: fieldState.error?.message })
+      ] })
+    }
+  );
+}
+function RHFSelect({
+  control,
+  name,
+  rules,
+  options,
+  placeholder,
+  disabled,
+  className,
+  label
+}) {
+  return /* @__PURE__ */ jsx(
+    Controller,
+    {
+      control,
+      name,
+      rules,
+      render: ({ field, fieldState }) => /* @__PURE__ */ jsxs("div", { className: cn("space-y-1.5", className), children: [
+        label && /* @__PURE__ */ jsx("label", { className: "mb-1.5 block text-xs font-medium uppercase tracking-wider text-[hsl(var(--text-secondary))]", children: label }),
+        /* @__PURE__ */ jsx(
+          Select,
+          {
+            value: field.value ?? "",
+            onValueChange: field.onChange,
+            options,
+            placeholder,
+            disabled,
+            className: fieldState.error ? "border-[hsl(var(--status-critical))]" : void 0
+          }
+        ),
+        /* @__PURE__ */ jsx(FieldError, { message: fieldState.error?.message })
+      ] })
+    }
+  );
+}
+function RHFCheckbox({
+  control,
+  name,
+  rules,
+  label,
+  disabled,
+  className
+}) {
+  return /* @__PURE__ */ jsx(
+    Controller,
+    {
+      control,
+      name,
+      rules,
+      render: ({ field, fieldState }) => /* @__PURE__ */ jsxs("div", { className: cn("space-y-1", className), children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(
+            Checkbox,
+            {
+              checked: !!field.value,
+              onChange: (e) => field.onChange(e.target.checked),
+              disabled
+            }
+          ),
+          label && /* @__PURE__ */ jsx("span", { className: "text-sm text-[hsl(var(--text-primary))]", children: label })
+        ] }),
+        /* @__PURE__ */ jsx(FieldError, { message: fieldState.error?.message })
+      ] })
+    }
+  );
+}
+function RHFToggleSwitch({
+  control,
+  name,
+  rules,
+  label,
+  disabled,
+  className
+}) {
+  return /* @__PURE__ */ jsx(
+    Controller,
+    {
+      control,
+      name,
+      rules,
+      render: ({ field, fieldState }) => /* @__PURE__ */ jsxs("div", { className: cn("space-y-1", className), children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(
+            ToggleSwitch,
+            {
+              enabled: !!field.value,
+              onChange: field.onChange,
+              disabled,
+              label
+            }
+          ),
+          label && /* @__PURE__ */ jsx("span", { className: "text-sm text-[hsl(var(--text-primary))]", children: label })
+        ] }),
+        /* @__PURE__ */ jsx(FieldError, { message: fieldState.error?.message })
+      ] })
+    }
+  );
+}
+
+export { RHFCheckbox, RHFFormInput, RHFSelect, RHFToggleSwitch };
+//# sourceMappingURL=form.js.map
+//# sourceMappingURL=form.js.map

package/dist/form.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/form-integration.tsx"],"names":[],"mappings":";;;;AAWA,SAAS,UAAA,CAAW,EAAE,OAAA,EAAQ,EAAyB;AACrD,EAAA,IAAI,CAAC,SAAS,OAAO,IAAA;AACrB,EAAA,uBACE,GAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,iDAAA,EAAmD,QAAA,EAAA,OAAA,EAAQ,CAAA;AAE5E;AAsBO,SAAS,YAAA,CAAoC;AAAA,EAClD,OAAA;AAAA,EAAS,IAAA;AAAA,EAAM,KAAA;AAAA,EAAO,KAAA;AAAA,EAAO,IAAA,GAAO,MAAA;AAAA,EACpC,WAAA;AAAA,EAAa,QAAA;AAAA,EAAU,QAAA;AAAA,EAAU,IAAA;AAAA,EAAM,SAAA;AAAA,EAAW;AACpD,CAAA,EAAyB;AACvB,EAAA,uBACE,GAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,OAAA;AAAA,MACA,IAAA;AAAA,MACA,KAAA;AAAA,MACA,MAAA,EAAQ,CAAC,EAAE,KAAA,EAAO,UAAA,EAAW,qBAC3B,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,EAAA,CAAG,aAAA,EAAe,SAAS,CAAA,EACzC,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,SAAA;AAAA,UAAA;AAAA,YACC,KAAA;AAAA,YACA,KAAA,EAAO,MAAM,KAAA,IAAS,EAAA;AAAA,YACtB,UAAU,KAAA,CAAM,QAAA;AAAA,YAChB,IAAA;AAAA,YACA,WAAA;AAAA,YACA,QAAA;AAAA,YACA,QAAA;AAAA,YACA,IAAA,EAAM,UAAA,CAAW,KAAA,GAAQ,MAAA,GAAY,IAAA;AAAA,YACrC;AAAA;AAAA,SACF;AAAA,wBACA,GAAA,CAAC,UAAA,EAAA,EAAW,OAAA,EAAS,UAAA,CAAW,OAAO,OAAA,EAAS;AAAA,OAAA,EAClD;AAAA;AAAA,GAEJ;AAEJ;AAmBO,SAAS,SAAA,CAAiC;AAAA,EAC/C,OAAA;AAAA,EAAS,IAAA;AAAA,EAAM,KAAA;AAAA,EAAO,OAAA;AAAA,EAAS,WAAA;AAAA,EAAa,QAAA;AAAA,EAAU,SAAA;AAAA,EAAW;AACnE,CAAA,EAAsB;AACpB,EAAA,uBACE,GAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,OAAA;AAAA,MACA,IAAA;AAAA,MACA,KAAA;AAAA,MACA,MAAA,EAAQ,CAAC,EAAE,KAAA,EAAO,UAAA,EAAW,qBAC3B,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,EAAA,CAAG,aAAA,EAAe,SAAS,CAAA,EACxC,QAAA,EAAA;AAAA,QAAA,KAAA,oBACC,GAAA,CAAC,OAAA,EAAA,EAAM,SAAA,EAAU,6FAAA,EACd,QAAA,EAAA,KAAA,EACH,CAAA;AAAA,wBAEF,GAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,KAAA,EAAO,MAAM,KAAA,IAAS,EAAA;AAAA,YACtB,eAAe,KAAA,CAAM,QAAA;AAAA,YACrB,OAAA;AAAA,YACA,WAAA;AAAA,YACA,QAAA;AAAA,YACA,SAAA,EAAW,UAAA,CAAW,KAAA,GAAQ,sCAAA,GAAyC;AAAA;AAAA,SACzE;AAAA,wBACA,GAAA,CAAC,UAAA,EAAA,EAAW,OAAA,EAAS,UAAA,CAAW,OAAO,OAAA,EAAS;AAAA,OAAA,EAClD;AAAA;AAAA,GAEJ;AAEJ;AAiBO,SAAS,WAAA,CAAmC;AAAA,EACjD,OAAA;AAAA,EAAS,IAAA;AAAA,EAAM,KAAA;AAAA,EAAO,KAAA;AAAA,EAAO,QAAA;AAAA,EAAU;AACzC,CAAA,EAAwB;AACtB,EAAA,uBACE,GAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,OAAA;AAAA,MACA,IAAA;AAAA,MACA,KAAA;AAAA,MACA,MAAA,EAAQ,CAAC,EAAE,KAAA,EAAO,UAAA,EAAW,qBAC3B,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,EAAA,CAAG,WAAA,EAAa,SAAS,CAAA,EACvC,QAAA,EAAA;AAAA,wBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,WAAU,yBAAA,EACb,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,QAAA;AAAA,YAAA;AAAA,cACC,OAAA,EAAS,CAAC,CAAC,KAAA,CAAM,KAAA;AAAA,cACjB,UAAU,CAAC,CAAA,KAAM,MAAM,QAAA,CAAS,CAAA,CAAE,OAAO,OAAO,CAAA;AAAA,cAChD;AAAA;AAAA,WACF;AAAA,UACC,KAAA,oBACC,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,2CAA2C,QAAA,EAAA,KAAA,EAAM;AAAA,SAAA,EAErE,CAAA;AAAA,wBACA,GAAA,CAAC,UAAA,EAAA,EAAW,OAAA,EAAS,UAAA,CAAW,OAAO,OAAA,EAAS;AAAA,OAAA,EAClD;AAAA;AAAA,GAEJ;AAEJ;AAiBO,SAAS,eAAA,CAAuC;AAAA,EACrD,OAAA;AAAA,EAAS,IAAA;AAAA,EAAM,KAAA;AAAA,EAAO,KAAA;AAAA,EAAO,QAAA;AAAA,EAAU;AACzC,CAAA,EAA4B;AAC1B,EAAA,uBACE,GAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,OAAA;AAAA,MACA,IAAA;AAAA,MACA,KAAA;AAAA,MACA,MAAA,EAAQ,CAAC,EAAE,KAAA,EAAO,UAAA,EAAW,qBAC3B,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,EAAA,CAAG,WAAA,EAAa,SAAS,CAAA,EACvC,QAAA,EAAA;AAAA,wBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,WAAU,yBAAA,EACb,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,YAAA;AAAA,YAAA;AAAA,cACC,OAAA,EAAS,CAAC,CAAC,KAAA,CAAM,KAAA;AAAA,cACjB,UAAU,KAAA,CAAM,QAAA;AAAA,cAChB,QAAA;AAAA,cACA;AAAA;AAAA,WACF;AAAA,UACC,KAAA,oBACC,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,2CAA2C,QAAA,EAAA,KAAA,EAAM;AAAA,SAAA,EAErE,CAAA;AAAA,wBACA,GAAA,CAAC,UAAA,EAAA,EAAW,OAAA,EAAS,UAAA,CAAW,OAAO,OAAA,EAAS;AAAA,OAAA,EAClD;AAAA;AAAA,GAEJ;AAEJ","file":"form.js","sourcesContent":["'use client'\n\nimport { Controller, type Control, type FieldValues, type Path, type RegisterOptions } from 'react-hook-form'\nimport { FormInput, INPUT_CLS } from './components/form-input'\nimport { Select, type SelectOption } from './components/select'\nimport { Checkbox } from './components/checkbox'\nimport { ToggleSwitch } from './components/toggle-switch'\nimport { cn } from './utils'\n\n// ── Shared error display ──────────────────────────────────────────────────\n\nfunction FieldError({ message }: { message?: string }) {\n  if (!message) return null\n  return (\n    <p className=\"mt-1 text-xs text-[hsl(var(--status-critical))]\">{message}</p>\n  )\n}\n\n// ── RHFFormInput ──────────────────────────────────────────────────────────\n\nexport interface RHFFormInputProps<T extends FieldValues> {\n  control: Control<T>\n  name: Path<T>\n  rules?: RegisterOptions<T, Path<T>>\n  label: string\n  type?: string\n  placeholder?: string\n  required?: boolean\n  disabled?: boolean\n  hint?: string\n  className?: string\n  autoComplete?: string\n}\n\n/**\n * FormInput wrapper for react-hook-form.\n * Shows validation errors from fieldState.error automatically.\n */\nexport function RHFFormInput<T extends FieldValues>({\n  control, name, rules, label, type = 'text',\n  placeholder, required, disabled, hint, className, autoComplete,\n}: RHFFormInputProps<T>) {\n  return (\n    <Controller\n      control={control}\n      name={name}\n      rules={rules}\n      render={({ field, fieldState }) => (\n        <div className={cn('space-y-1.5', className)}>\n          <FormInput\n            label={label}\n            value={field.value ?? ''}\n            onChange={field.onChange}\n            type={type}\n            placeholder={placeholder}\n            required={required}\n            disabled={disabled}\n            hint={fieldState.error ? undefined : hint}\n            autoComplete={autoComplete}\n          />\n          <FieldError message={fieldState.error?.message} />\n        </div>\n      )}\n    />\n  )\n}\n\n// ── RHFSelect ─────────────────────────────────────────────────────────────\n\nexport interface RHFSelectProps<T extends FieldValues> {\n  control: Control<T>\n  name: Path<T>\n  rules?: RegisterOptions<T, Path<T>>\n  options: SelectOption[]\n  placeholder?: string\n  disabled?: boolean\n  className?: string\n  label?: string\n}\n\n/**\n * Select wrapper for react-hook-form.\n * Shows validation errors from fieldState.error automatically.\n */\nexport function RHFSelect<T extends FieldValues>({\n  control, name, rules, options, placeholder, disabled, className, label,\n}: RHFSelectProps<T>) {\n  return (\n    <Controller\n      control={control}\n      name={name}\n      rules={rules}\n      render={({ field, fieldState }) => (\n        <div className={cn('space-y-1.5', className)}>\n          {label && (\n            <label className=\"mb-1.5 block text-xs font-medium uppercase tracking-wider text-[hsl(var(--text-secondary))]\">\n              {label}\n            </label>\n          )}\n          <Select\n            value={field.value ?? ''}\n            onValueChange={field.onChange}\n            options={options}\n            placeholder={placeholder}\n            disabled={disabled}\n            className={fieldState.error ? 'border-[hsl(var(--status-critical))]' : undefined}\n          />\n          <FieldError message={fieldState.error?.message} />\n        </div>\n      )}\n    />\n  )\n}\n\n// ── RHFCheckbox ───────────────────────────────────────────────────────────\n\nexport interface RHFCheckboxProps<T extends FieldValues> {\n  control: Control<T>\n  name: Path<T>\n  rules?: RegisterOptions<T, Path<T>>\n  label?: string\n  disabled?: boolean\n  className?: string\n}\n\n/**\n * Checkbox wrapper for react-hook-form.\n * Shows validation errors from fieldState.error automatically.\n */\nexport function RHFCheckbox<T extends FieldValues>({\n  control, name, rules, label, disabled, className,\n}: RHFCheckboxProps<T>) {\n  return (\n    <Controller\n      control={control}\n      name={name}\n      rules={rules}\n      render={({ field, fieldState }) => (\n        <div className={cn('space-y-1', className)}>\n          <div className=\"flex items-center gap-2\">\n            <Checkbox\n              checked={!!field.value}\n              onChange={(e) => field.onChange(e.target.checked)}\n              disabled={disabled}\n            />\n            {label && (\n              <span className=\"text-sm text-[hsl(var(--text-primary))]\">{label}</span>\n            )}\n          </div>\n          <FieldError message={fieldState.error?.message} />\n        </div>\n      )}\n    />\n  )\n}\n\n// ── RHFToggleSwitch ───────────────────────────────────────────────────────\n\nexport interface RHFToggleSwitchProps<T extends FieldValues> {\n  control: Control<T>\n  name: Path<T>\n  rules?: RegisterOptions<T, Path<T>>\n  label?: string\n  disabled?: boolean\n  className?: string\n}\n\n/**\n * ToggleSwitch wrapper for react-hook-form.\n * Shows validation errors from fieldState.error automatically.\n */\nexport function RHFToggleSwitch<T extends FieldValues>({\n  control, name, rules, label, disabled, className,\n}: RHFToggleSwitchProps<T>) {\n  return (\n    <Controller\n      control={control}\n      name={name}\n      rules={rules}\n      render={({ field, fieldState }) => (\n        <div className={cn('space-y-1', className)}>\n          <div className=\"flex items-center gap-2\">\n            <ToggleSwitch\n              enabled={!!field.value}\n              onChange={field.onChange}\n              disabled={disabled}\n              label={label}\n            />\n            {label && (\n              <span className=\"text-sm text-[hsl(var(--text-primary))]\">{label}</span>\n            )}\n          </div>\n          <FieldError message={fieldState.error?.message} />\n        </div>\n      )}\n    />\n  )\n}\n"]}