@ramme-io/ui 3.0.0 → 4.0.0

package/dist/components/forms/Checkbox.js

@@ -0,0 +1,20 @@
+import { jsxs as i, jsx as s } from "react/jsx-runtime";
+import { useState as a } from "react";
+const u = ({ label: e, id: r, className: o, ...c }) => {
+  const [t] = a(() => r || `checkbox-${Math.random().toString(36).substr(2, 9)}`);
+  return /* @__PURE__ */ i("div", { className: "flex items-center", children: [
+    /* @__PURE__ */ s(
+      "input",
+      {
+        id: t,
+        type: "checkbox",
+        className: `form-checkbox h-4 w-4 rounded transition-colors duration-200 ease-in-out cursor-pointer text-primary border-border bg-card focus:ring-primary disabled:opacity-50 disabled:cursor-not-allowed ${o || ""}`,
+        ...c
+      }
+    ),
+    e && /* @__PURE__ */ s("label", { htmlFor: t, className: "ml-2 text-sm text-text cursor-pointer", children: e })
+  ] });
+};
+export {
+  u as Checkbox
+};

package/dist/components/forms/ComboBox.js

@@ -0,0 +1,77 @@
+import { jsxs as D, jsx as i } from "react/jsx-runtime";
+import { useState as l, useRef as g, useEffect as f, useCallback as K } from "react";
+import { Input as q } from "./Input.js";
+import { cn as p } from "../../utils/cn.js";
+const $ = ({
+  options: t,
+  label: v,
+  value: a,
+  onOptionSelect: o,
+  placeholder: x,
+  id: w,
+  className: C,
+  containerClassName: I,
+  ...y
+}) => {
+  const [n, u] = l(""), [m, h] = l(t), [k, r] = l(!1), [b, L] = l(-1), c = g(null), E = g(null), F = w || `combobox-${Math.random().toString(36).substr(2, 9)}`;
+  f(() => {
+    if (a !== void 0) {
+      const e = t.find((s) => s.value === a);
+      u(e ? e.label : "");
+    }
+  }, [a, t]), f(() => {
+    h(n === "" ? t : t.filter(
+      (e) => e.label.toLowerCase().includes(n.toLowerCase())
+    )), L(-1);
+  }, [n, t]);
+  const N = (e) => {
+    u(e.target.value), r(!0);
+  }, O = (e) => {
+    u(e.label), r(!1), o == null || o(e.value, e.label);
+  }, R = () => {
+    r(!0);
+  }, d = K((e) => {
+    c.current && !c.current.contains(e.target) && r(!1);
+  }, []);
+  f(() => (document.addEventListener("mousedown", d), () => {
+    document.removeEventListener("mousedown", d);
+  }), [d]);
+  const j = (e) => {
+  };
+  return /* @__PURE__ */ D("div", { className: p("relative", I), ref: c, children: [
+    /* @__PURE__ */ i(
+      q,
+      {
+        id: F,
+        label: v,
+        type: "text",
+        placeholder: x,
+        value: n,
+        onChange: N,
+        onFocus: R,
+        onKeyDown: j,
+        autoComplete: "off",
+        ref: E,
+        className: C,
+        ...y
+      }
+    ),
+    k && m.length > 0 && /* @__PURE__ */ i("ul", { className: "absolute z-10 w-full mt-1 bg-card border border-border rounded-md shadow-lg py-1 overflow-auto max-h-60 focus:outline-none", children: m.map((e, s) => /* @__PURE__ */ i(
+      "li",
+      {
+        className: p(
+          "px-4 py-2 text-sm cursor-pointer text-foreground hover:bg-muted",
+          b === s && "bg-accent text-accent-foreground"
+        ),
+        onClick: () => O(e),
+        role: "option",
+        "aria-selected": b === s,
+        children: e.label
+      },
+      e.value
+    )) })
+  ] });
+};
+export {
+  $ as ComboBox
+};

package/dist/components/forms/DatePicker.js

@@ -0,0 +1,63 @@
+import { jsxs as c, jsx as r } from "react/jsx-runtime";
+import n from "react-datepicker";
+import { cn as e } from "../../utils/cn.js";
+import { Icon as s } from "../ui/Icon.js";
+import "react-datepicker/dist/react-datepicker.css";
+const m = `
+  .react-datepicker {
+    font-family: inherit !important;
+    background-color: rgb(var(--app-card-bg-color)) !important;
+    border: 1px solid rgb(var(--app-border-color)) !important;
+    border-radius: var(--app-border-radius-md) !important;
+    color: rgb(var(--app-text-color)) !important;
+  }
+  .react-datepicker__header {
+    background-color: rgb(var(--app-bg-color)) !important;
+    border-bottom: 1px solid rgb(var(--app-border-color)) !important;
+  }
+  .react-datepicker__current-month, .react-datepicker__day-name, .react-datepicker__day {
+    color: rgb(var(--app-text-color)) !important;
+  }
+  .react-datepicker__day:hover {
+    background-color: rgb(var(--app-primary-color) / 0.1) !important;
+  }
+  .react-datepicker__day--selected, .react-datepicker__day--keyboard-selected {
+    background-color: rgb(var(--app-primary-color)) !important;
+    color: rgb(var(--app-primary-foreground-color)) !important;
+  }
+  .react-datepicker__navigation-icon::before {
+    border-color: rgb(var(--app-text-color)) !important;
+  }
+`, x = ({
+  label: o,
+  selected: i,
+  onChange: d,
+  className: l,
+  error: t,
+  helperText: a,
+  ...p
+}) => /* @__PURE__ */ c("div", { className: e("w-full flex flex-col", l), children: [
+  /* @__PURE__ */ r("style", { children: m }),
+  o && /* @__PURE__ */ r("label", { className: "block text-sm font-medium text-foreground mb-1.5", children: o }),
+  /* @__PURE__ */ c("div", { className: "relative", children: [
+    /* @__PURE__ */ r(
+      n,
+      {
+        selected: i,
+        onChange: d,
+        className: e(
+          "flex h-10 w-full rounded-md border bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          t ? "border-destructive" : "border-input"
+        ),
+        wrapperClassName: "w-full",
+        showPopperArrow: !1,
+        ...p
+      }
+    ),
+    /* @__PURE__ */ r("div", { className: "absolute right-3 top-2.5 pointer-events-none text-muted-foreground", children: /* @__PURE__ */ r(s, { name: "calendar", className: "h-4 w-4" }) })
+  ] }),
+  a && /* @__PURE__ */ r("p", { className: e("mt-1.5 text-xs", t ? "text-destructive" : "text-muted-foreground"), children: a })
+] });
+export {
+  x as DatePicker
+};

package/dist/components/forms/FileUpload.js

@@ -0,0 +1,96 @@
+import { jsxs as t, jsx as r } from "react/jsx-runtime";
+import { useState as x, useRef as A, useCallback as l } from "react";
+import { Button as j } from "../ui/Button.js";
+import { Icon as i } from "../ui/Icon.js";
+import { cn as v } from "../../utils/cn.js";
+const S = ({
+  onFileUpload: b,
+  multiple: n = !1,
+  acceptedFileTypes: o,
+  label: c,
+  className: N,
+  helperText: m
+}) => {
+  const [y, s] = x(!1), [f, u] = x([]), p = A(null), d = l((e) => {
+    e.preventDefault(), e.stopPropagation(), e.type === "dragenter" || e.type === "dragover" ? s(!0) : e.type === "dragleave" && s(!1);
+  }, []), g = (e) => {
+    u((a) => n ? [...a, ...e] : [e[0]]), b(e);
+  }, D = l((e) => {
+    e.preventDefault(), e.stopPropagation(), s(!1), e.dataTransfer.files && e.dataTransfer.files.length > 0 && g(Array.from(e.dataTransfer.files));
+  }, [n]), w = l((e) => {
+    e.preventDefault(), e.target.files && e.target.files.length > 0 && g(Array.from(e.target.files));
+  }, [n]), k = (e) => {
+    u((a) => a.filter((h, C) => C !== e));
+  };
+  return /* @__PURE__ */ t("div", { className: v("w-full", N), children: [
+    c && /* @__PURE__ */ r("label", { className: "block text-sm font-medium text-foreground mb-1.5", children: c }),
+    /* @__PURE__ */ t(
+      "div",
+      {
+        className: v(
+          "relative flex flex-col items-center justify-center p-6 border-2 border-dashed rounded-lg transition-colors duration-200 ease-in-out cursor-pointer",
+          y ? "border-primary bg-primary/5" : "border-border bg-card hover:bg-muted/50",
+          "min-h-[150px]"
+        ),
+        onDragEnter: d,
+        onDragLeave: d,
+        onDragOver: d,
+        onDrop: D,
+        onClick: () => {
+          var e;
+          return (e = p.current) == null ? void 0 : e.click();
+        },
+        children: [
+          /* @__PURE__ */ r(
+            "input",
+            {
+              ref: p,
+              type: "file",
+              className: "hidden",
+              multiple: n,
+              accept: o,
+              onChange: w
+            }
+          ),
+          /* @__PURE__ */ r("div", { className: "bg-muted p-3 rounded-full mb-3", children: /* @__PURE__ */ r(i, { name: "upload-cloud", className: "h-6 w-6 text-muted-foreground" }) }),
+          /* @__PURE__ */ t("p", { className: "text-sm font-medium text-foreground text-center", children: [
+            /* @__PURE__ */ r("span", { className: "text-primary font-semibold hover:underline", children: "Click to upload" }),
+            " or drag and drop"
+          ] }),
+          /* @__PURE__ */ t("p", { className: "text-xs text-muted-foreground mt-1", children: [
+            o ? o.replace(/,/g, ", ") : "Any file type",
+            n ? "" : " (Single file)"
+          ] })
+        ]
+      }
+    ),
+    f.length > 0 && /* @__PURE__ */ r("div", { className: "mt-4 space-y-2", children: f.map((e, a) => /* @__PURE__ */ t("div", { className: "flex items-center justify-between p-2 rounded-md border border-border bg-card", children: [
+      /* @__PURE__ */ t("div", { className: "flex items-center gap-3 overflow-hidden", children: [
+        /* @__PURE__ */ r("div", { className: "bg-primary/10 p-2 rounded text-primary", children: /* @__PURE__ */ r(i, { name: "file", className: "h-4 w-4" }) }),
+        /* @__PURE__ */ t("div", { className: "min-w-0", children: [
+          /* @__PURE__ */ r("p", { className: "text-sm font-medium text-foreground truncate", children: e.name }),
+          /* @__PURE__ */ t("p", { className: "text-xs text-muted-foreground", children: [
+            (e.size / 1024).toFixed(1),
+            " KB"
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ r(
+        j,
+        {
+          variant: "ghost",
+          size: "icon",
+          className: "h-8 w-8 text-muted-foreground hover:text-destructive",
+          onClick: (h) => {
+            h.stopPropagation(), k(a);
+          },
+          children: /* @__PURE__ */ r(i, { name: "x", className: "h-4 w-4" })
+        }
+      )
+    ] }, `${e.name}-${a}`)) }),
+    m && /* @__PURE__ */ r("p", { className: "mt-1.5 text-xs text-muted-foreground", children: m })
+  ] });
+};
+export {
+  S as FileUpload
+};

package/dist/components/forms/FormTemplate.js

@@ -0,0 +1,87 @@
+import { jsxs as p, jsx as r } from "react/jsx-runtime";
+import { useState as x, useCallback as b } from "react";
+import { Input as C } from "./Input.js";
+import { Select as k } from "./Select.js";
+import { Checkbox as i } from "./Checkbox.js";
+import { Radio as y } from "./Radio.js";
+import { Textarea as S } from "./Textarea.js";
+import { ToggleSwitch as T } from "./ToggleSwitch.js";
+import { ComboBox as F } from "./ComboBox.js";
+import { MultiSelect as N } from "./MultiSelect.js";
+import { DatePicker as w } from "./DatePicker.js";
+import { FileUpload as D } from "./FileUpload.js";
+import { SegmentedControl as G } from "./SegmentedControl.js";
+const H = ({
+  fields: c,
+  onSubmit: u,
+  className: l,
+  children: s
+}) => {
+  const [t, h] = x(() => {
+    const e = {};
+    return c.forEach((a) => {
+      a.type === "checkbox" || a.type === "toggle" ? e[a.name] = a.checked || !1 : a.type === "radio" ? a.checked && (e[a.radioGroup] = a.value) : a.type === "file" ? e[a.name] = [] : e[a.name] = a.value || "";
+    }), e;
+  }), n = b((e, a) => {
+    h((m) => ({ ...m, [e]: a }));
+  }, []), g = (e) => {
+    e.preventDefault(), u(t);
+  }, v = (e) => {
+    const a = {
+      id: e.name,
+      label: e.label,
+      className: e.className,
+      disabled: e.disabled,
+      helperText: e.helperText,
+      required: e.required
+    };
+    switch (e.type) {
+      case "text":
+      case "email":
+      case "password":
+      case "number":
+        return /* @__PURE__ */ r(C, { ...a, name: e.name, type: e.type, placeholder: e.placeholder, value: t[e.name], onChange: (o) => n(e.name, o.target.value) });
+      case "textarea":
+        return /* @__PURE__ */ r(S, { ...a, name: e.name, placeholder: e.placeholder, value: t[e.name], onChange: (o) => n(e.name, o.target.value), rows: e.rows });
+      case "select":
+        const m = e.options.find((o) => o.value === t[e.name]);
+        return /* @__PURE__ */ r(k, { ...a, options: e.options, value: m, onChange: (o) => n(e.name, o == null ? void 0 : o.value) });
+      case "checkbox":
+        return /* @__PURE__ */ r(i, { ...a, name: e.name, checked: t[e.name], onChange: (o) => n(e.name, o.target.checked) });
+      case "toggle":
+        return /* @__PURE__ */ r(T, { ...a, checked: t[e.name], onChange: (o) => n(e.name, o) });
+      case "radio":
+        return /* @__PURE__ */ r(y, { ...a, name: e.radioGroup, value: e.value, checked: t[e.radioGroup] === e.value, onChange: (o) => n(e.radioGroup, o.target.value) });
+      case "combobox":
+        return /* @__PURE__ */ r(F, { ...a, options: e.options, value: t[e.name], onOptionSelect: (o) => n(e.name, o), placeholder: e.placeholder });
+      case "multiselect":
+        return /* @__PURE__ */ r(N, { ...a, options: e.options, value: t[e.name], onChange: (o) => n(e.name, o), placeholder: e.placeholder });
+      case "datepicker":
+        return /* @__PURE__ */ r(w, { ...a, selected: t[e.name], onChange: (o) => n(e.name, o), placeholderText: e.placeholder });
+      case "file":
+        return /* @__PURE__ */ r(D, { ...a, multiple: e.multiple, acceptedFileTypes: e.acceptedFileTypes, onFileUpload: (o) => n(e.name, o) });
+      case "segment":
+        return /* @__PURE__ */ p("div", { className: "space-y-1.5", children: [
+          /* @__PURE__ */ r("label", { className: "block text-sm font-medium text-foreground", children: e.label }),
+          /* @__PURE__ */ r(G, { ...a, options: e.options, value: t[e.name], onChange: (o) => n(e.name, o) }),
+          e.helperText && /* @__PURE__ */ r("p", { className: "text-xs text-muted-foreground", children: e.helperText })
+        ] });
+      default:
+        return null;
+    }
+  };
+  return /* @__PURE__ */ p("form", { onSubmit: g, className: l, children: [
+    /* @__PURE__ */ r("div", { className: "grid grid-cols-1 @md:grid-cols-2 gap-6", children: c.map((e) => /* @__PURE__ */ r(
+      "div",
+      {
+        style: { gridColumn: `span ${e.colSpan || 1}` },
+        children: v(e)
+      },
+      e.name + (e.type === "radio" ? e.value : "")
+    )) }),
+    s && /* @__PURE__ */ r("div", { className: "mt-8", children: s })
+  ] });
+};
+export {
+  H as FormTemplate
+};

package/dist/components/forms/Input.js

@@ -0,0 +1,43 @@
+import { jsxs as n, jsx as e } from "react/jsx-runtime";
+import b from "react";
+import { Icon as g } from "../ui/Icon.js";
+import { cn as o } from "../../utils/cn.js";
+const v = b.forwardRef(
+  ({
+    label: r,
+    icon: t,
+    helperText: i,
+    error: a = !1,
+    required: s = !1,
+    showOptionalLabel: d = !1,
+    className: m,
+    containerClassName: c,
+    ...l
+  }, f) => {
+    const u = "flex h-10 w-full rounded-md border bg-background py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50", p = a ? "border-destructive" : "border-input", x = t ? "pl-10 pr-3" : "px-3";
+    return /* @__PURE__ */ n("div", { className: o("w-full", c), children: [
+      r && /* @__PURE__ */ n("label", { htmlFor: l.id || l.name, className: "block text-sm font-medium text-foreground mb-1", children: [
+        r,
+        s && /* @__PURE__ */ e("span", { className: "text-destructive ml-1", children: "*" }),
+        !s && d && /* @__PURE__ */ e("span", { className: "text-xs text-muted-foreground ml-1", children: "(optional)" })
+      ] }),
+      /* @__PURE__ */ n("div", { className: "relative w-full", children: [
+        t && /* @__PURE__ */ e("div", { className: "absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none", children: /* @__PURE__ */ e(g, { name: t, className: "text-muted-foreground", size: 16 }) }),
+        /* @__PURE__ */ e(
+          "input",
+          {
+            ref: f,
+            className: o(u, p, x, m),
+            required: s,
+            ...l
+          }
+        )
+      ] }),
+      i && /* @__PURE__ */ e("p", { className: o("mt-1.5 text-xs", a ? "text-destructive" : "text-muted-foreground"), children: i })
+    ] });
+  }
+);
+v.displayName = "Input";
+export {
+  v as Input
+};

package/dist/components/forms/Label.d.ts

@@ -1,4 +1,15 @@
 import React from 'react';
 import * as LabelPrimitive from '@radix-ui/react-label';
 import { type VariantProps } from 'class-variance-authority';
+/**
+ * @wizard
+ * @name Label
+ * @description The accessible caption for a form control. Strategic purpose: pairs a field with its name so clicking the label focuses the input, and so screen readers announce the two together. Built on Radix's Label primitive — set `htmlFor` to the input's `id`, or nest the input inside. Dims automatically when the paired control is disabled (via `peer-disabled`).
+ * @tags forms, label, caption, accessibility, field
+ * @category forms
+ * @id label
+ * @param {string} htmlFor - The `id` of the form control this labels. Required for the click-to-focus and screen-reader association unless the control is nested inside.
+ * @param {string} className - Additional CSS classes.
+ * @param {ReactNode} children - The label text.
+ */
 export declare const Label: React.ForwardRefExoticComponent<Omit<LabelPrimitive.LabelProps & React.RefAttributes<HTMLLabelElement>, "ref"> & VariantProps<(props?: import("class-variance-authority/types").ClassProp | undefined) => string> & React.RefAttributes<HTMLLabelElement>>;

package/dist/components/forms/Label.js

@@ -0,0 +1,19 @@
+import { jsx as m } from "react/jsx-runtime";
+import { forwardRef as t } from "react";
+import * as o from "@radix-ui/react-label";
+import { cva as i } from "class-variance-authority";
+import { cn as s } from "../../utils/cn.js";
+const l = i(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+), p = t(({ className: e, ...a }, r) => /* @__PURE__ */ m(
+  o.Root,
+  {
+    ref: r,
+    className: s(l(), e),
+    ...a
+  }
+));
+p.displayName = o.Root.displayName;
+export {
+  p as Label
+};

package/dist/components/forms/MultiSelect.d.ts

@@ -3,6 +3,24 @@ export interface MultiSelectOption {
     value: string | number;
     label: string;
 }
+/**
+ * @wizard
+ * @name MultiSelect
+ * @description A searchable dropdown for picking several options at once, rendering selections as removable chips. Strategic purpose: the canonical multi-value picker — use it for tag, category, and filter inputs rather than a native multiple-select or a hand-rolled checkbox list. For a single value use Select; for a free-text-plus-suggestions field use ComboBox.
+ * @tags forms, select, multiselect, dropdown, tags, filter, input
+ * @category forms
+ * @id multi-select
+ * @param {MultiSelectOption[]} options - Selectable options, each `{ value, label }`.
+ * @param {MultiSelectOption[]} value - Currently selected options. Controlled — pass null or [] for empty.
+ * @param {function} onChange - Called with the new selection array (or null when cleared).
+ * @param {string} label - Caption rendered above the control.
+ * @param {string} placeholder - Text shown when nothing is selected.
+ * @param {boolean} isSearchable - Allows typing to filter the options. Defaults to true.
+ * @param {boolean} isClearable - Shows a control to clear the whole selection.
+ * @param {boolean} isLoading - Shows a loading indicator inside the control.
+ * @param {boolean} isDisabled - Disables interaction.
+ * @param {string} className - Additional CSS classes.
+ */
 export interface MultiSelectProps {
     options: MultiSelectOption[];
     value: MultiSelectOption[] | null;

package/dist/components/forms/MultiSelect.js

@@ -0,0 +1,111 @@
+import { jsxs as I, jsx as e } from "react/jsx-runtime";
+import { useId as S } from "react";
+import k, { components as d } from "react-select";
+import { cn as p } from "../../utils/cn.js";
+import { Icon as i } from "../ui/Icon.js";
+const R = (a) => /* @__PURE__ */ e(d.DropdownIndicator, { ...a, children: /* @__PURE__ */ e(i, { name: "chevron-down", className: "h-4 w-4 text-muted-foreground" }) }), w = (a) => /* @__PURE__ */ e(d.MultiValueRemove, { ...a, children: /* @__PURE__ */ e(i, { name: "x", className: "h-3 w-3" }) }), P = ({
+  options: a,
+  value: u,
+  onChange: m,
+  label: t,
+  placeholder: s = "Select...",
+  isClearable: b = !0,
+  isDisabled: g = !1,
+  isLoading: v = !1,
+  isSearchable: x = !0,
+  className: f,
+  error: c,
+  helperText: l
+}) => {
+  const n = S(), h = (r, o) => {
+    const C = r ? Array.from(r) : null;
+    m(C);
+  }, y = {
+    control: (r, o) => ({
+      ...r,
+      backgroundColor: "rgb(var(--app-card-bg-color))",
+      borderColor: c ? "rgb(var(--app-danger-color))" : o.isFocused ? "rgb(var(--app-primary-color))" : "rgb(var(--app-border-color))",
+      color: "rgb(var(--app-text-color))",
+      borderRadius: "var(--app-border-radius-md)",
+      boxShadow: o.isFocused ? "0 0 0 1px rgb(var(--app-primary-color))" : "none",
+      "&:hover": {
+        borderColor: o.isFocused ? "rgb(var(--app-primary-color))" : "rgb(var(--app-text-color) / 0.5)"
+      },
+      minHeight: "2.5rem"
+    }),
+    menu: (r) => ({
+      ...r,
+      backgroundColor: "rgb(var(--app-card-bg-color))",
+      border: "1px solid rgb(var(--app-border-color))",
+      borderRadius: "var(--app-border-radius-md)",
+      zIndex: 50
+    }),
+    option: (r, o) => ({
+      ...r,
+      backgroundColor: o.isSelected ? "rgb(var(--app-primary-color))" : o.isFocused ? "rgb(var(--app-primary-color) / 0.1)" : "transparent",
+      color: o.isSelected ? "rgb(var(--app-primary-foreground-color))" : "rgb(var(--app-text-color))",
+      cursor: "pointer",
+      "&:active": {
+        backgroundColor: "rgb(var(--app-primary-color) / 0.2)"
+      }
+    }),
+    // --- MULTI-SELECT SPECIFIC STYLES ---
+    multiValue: (r) => ({
+      ...r,
+      backgroundColor: "rgb(var(--app-secondary-color) / 0.2)",
+      borderRadius: "var(--app-border-radius-sm)"
+    }),
+    multiValueLabel: (r) => ({
+      ...r,
+      color: "rgb(var(--app-text-color))",
+      fontSize: "0.875rem",
+      fontWeight: 500
+    }),
+    multiValueRemove: (r) => ({
+      ...r,
+      color: "rgb(var(--app-text-color) / 0.7)",
+      ":hover": {
+        backgroundColor: "rgb(var(--app-danger-color))",
+        color: "rgb(var(--app-danger-foreground-color))"
+      }
+    }),
+    input: (r) => ({
+      ...r,
+      color: "rgb(var(--app-text-color))"
+    }),
+    placeholder: (r) => ({
+      ...r,
+      color: "rgb(var(--app-text-color) / 0.5)"
+    }),
+    menuPortal: (r) => ({
+      ...r,
+      zIndex: 9999
+    })
+  };
+  return /* @__PURE__ */ I("div", { className: p("w-full", f), children: [
+    t && /* @__PURE__ */ e("label", { htmlFor: n, className: "block text-sm font-medium text-foreground mb-1.5", children: t }),
+    /* @__PURE__ */ e(
+      k,
+      {
+        instanceId: n,
+        styles: y,
+        components: { DropdownIndicator: R, MultiValueRemove: w },
+        options: a,
+        value: u,
+        onChange: h,
+        isMulti: !0,
+        isClearable: b,
+        isDisabled: g,
+        isLoading: v,
+        isSearchable: x,
+        placeholder: s,
+        menuPortalTarget: typeof document < "u" ? document.body : null,
+        menuPosition: "fixed"
+      }
+    ),
+    l && /* @__PURE__ */ e("p", { className: p("mt-1.5 text-xs", c ? "text-destructive" : "text-muted-foreground"), children: l })
+  ] });
+};
+export {
+  P as MultiSelect
+};

package/dist/components/forms/Radio.js

@@ -0,0 +1,19 @@
+import { jsxs as a, jsx as r } from "react/jsx-runtime";
+const m = ({ label: t, id: s, className: o, ...i }) => {
+  const e = s || `radio-${Math.random().toString(36).substr(2, 9)}`;
+  return /* @__PURE__ */ a("div", { className: "flex items-center", children: [
+    /* @__PURE__ */ r(
+      "input",
+      {
+        id: e,
+        type: "radio",
+        className: `form-radio h-4 w-4 transition-colors duration-200 ease-in-out cursor-pointer text-primary border-border bg-card focus:ring-primary disabled:opacity-50 disabled:cursor-not-allowed ${o || ""}`,
+        ...i
+      }
+    ),
+    t && /* @__PURE__ */ r("label", { htmlFor: e, className: "ml-2 text-sm text-text cursor-pointer", children: t })
+  ] });
+};
+export {
+  m as Radio
+};

package/dist/components/forms/SearchInput.js

@@ -0,0 +1,13 @@
+import { jsx as t } from "react/jsx-runtime";
+import { Input as o } from "./Input.js";
+const c = (r) => /* @__PURE__ */ t(
+  o,
+  {
+    type: "search",
+    icon: "search",
+    ...r
+  }
+);
+export {
+  c as SearchInput
+};

package/dist/components/forms/SegmentedControl.d.ts

@@ -12,7 +12,7 @@ export interface SegmentedControlProps {
     /** Callback fired when a segment is selected. */
     onChange: (value: any) => void;
     /** The size of the control. */
-    size?: 'sm' | 'md';
+    size?: 'xs' | 'sm' | 'md';
     /** Additional CSS classes. */
     className?: string;
 }

package/dist/components/forms/SegmentedControl.js

@@ -0,0 +1,37 @@
+import { jsx as d } from "react/jsx-runtime";
+import { cn as t } from "../../utils/cn.js";
+const m = ({
+  options: n,
+  value: o,
+  onChange: l,
+  size: r = "md",
+  className: a
+}) => /* @__PURE__ */ d("div", { className: t(
+  // Container: Use 'muted' background for the track (works in all themes)
+  "inline-flex bg-muted border border-border",
+  r === "xs" ? "rounded-md p-0.5" : "rounded-lg p-1",
+  a
+), children: n.map((e) => {
+  const i = e.value === o;
+  return /* @__PURE__ */ d(
+    "button",
+    {
+      onClick: () => !e.disabled && l(e.value),
+      disabled: e.disabled,
+      className: t(
+        "relative rounded-md font-medium transition-all duration-200 ease-in-out focus:outline-none focus-visible:ring-2 focus-visible:ring-primary",
+        // Size Variants
+        r === "xs" ? "text-[10px] px-2 py-0.5" : r === "sm" ? "text-xs px-3 py-1" : "text-sm px-4 py-1.5",
+        // State Styles (Theme Aware)
+        i ? "bg-card text-foreground shadow-sm ring-1 ring-black/5 dark:ring-white/10" : "text-muted-foreground hover:text-foreground hover:bg-background/50",
+        e.disabled && "opacity-50 cursor-not-allowed"
+      ),
+      type: "button",
+      children: e.label
+    },
+    String(e.value)
+  );
+}) });
+export {
+  m as SegmentedControl
+};