@reformer/ui-kit 1.0.0-beta.1

package/dist/ui/select.js

@@ -0,0 +1,241 @@
+import { jsxs as d, jsx as e } from "react/jsx-runtime";
+import * as m from "react";
+import * as s from "@radix-ui/react-select";
+import { XIcon as V, ChevronDownIcon as S, CheckIcon as O, ChevronUpIcon as R } from "lucide-react";
+import { c as o } from "../utils-DtaLkIY8.js";
+const D = m.forwardRef(
+  ({
+    className: t,
+    value: a,
+    onChange: r,
+    onBlur: c,
+    resource: u,
+    options: g,
+    placeholder: N,
+    disabled: h,
+    clearable: z = !1,
+    "data-testid": C,
+    "aria-invalid": I,
+    ...k
+  }, _) => {
+    const [b, v] = m.useState([]), [p, x] = m.useState(!1);
+    m.useEffect(() => {
+      u && (x(!0), u.load({}).then((l) => {
+        v(
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          l.items.map((n) => ({
+            id: n.id,
+            label: n.label,
+            value: String(n.value),
+            group: n.group
+          }))
+        );
+      }).catch(() => v([])).finally(() => x(!1)));
+    }, [u]);
+    const y = m.useMemo(() => g ? g.map((l) => ({
+      id: l.value,
+      label: l.label,
+      value: String(l.value),
+      group: l.group
+    })) : b, [g, b]), j = (l) => {
+      r?.(l);
+    }, B = (l) => {
+      l || c?.();
+    }, L = (l) => {
+      l.stopPropagation(), r?.(null);
+    }, w = z && a && !h && !p;
+    return /* @__PURE__ */ d("div", { className: "relative w-full", children: [
+      /* @__PURE__ */ d(
+        s.Root,
+        {
+          "data-slot": "select",
+          value: a || "",
+          onValueChange: j,
+          onOpenChange: B,
+          disabled: h || p,
+          ...k,
+          children: [
+            /* @__PURE__ */ e(
+              U,
+              {
+                ref: _,
+                className: o(t, w && "pr-8"),
+                disabled: p,
+                "data-testid": C,
+                "aria-invalid": I,
+                children: /* @__PURE__ */ e(
+                  T,
+                  {
+                    placeholder: p ? "Loading..." : N || "Select an option..."
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ e(G, { children: p ? /* @__PURE__ */ e("div", { className: "px-2 py-1.5 text-sm text-muted-foreground", children: "Loading..." }) : y.length === 0 ? /* @__PURE__ */ e("div", { className: "px-2 py-1.5 text-sm text-muted-foreground", children: "No options available" }) : (() => {
+              const l = y.reduce(
+                (n, f) => {
+                  const i = f.group || "default";
+                  return n[i] || (n[i] = []), n[i].push(f), n;
+                },
+                {}
+              );
+              return Object.entries(l).map(([n, f]) => /* @__PURE__ */ d(P, { children: [
+                n !== "default" && /* @__PURE__ */ e(E, { children: n }),
+                f.map((i) => /* @__PURE__ */ e(M, { value: i.value, children: i.label }, i.id))
+              ] }, n));
+            })() })
+          ]
+        }
+      ),
+      w && /* @__PURE__ */ e(
+        "button",
+        {
+          type: "button",
+          className: "absolute right-8 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600 transition-colors bg-transparent border-none p-0 cursor-pointer focus:outline-none z-10",
+          onClick: L,
+          "aria-label": "Clear selection",
+          tabIndex: -1,
+          children: /* @__PURE__ */ e(V, { className: "size-4" })
+        }
+      )
+    ] });
+  }
+);
+D.displayName = "Select";
+function P({ ...t }) {
+  return /* @__PURE__ */ e(s.Group, { "data-slot": "select-group", ...t });
+}
+function T({ ...t }) {
+  return /* @__PURE__ */ e(s.Value, { "data-slot": "select-value", ...t });
+}
+function U({
+  className: t,
+  size: a = "default",
+  children: r,
+  "aria-label": c,
+  ...u
+}) {
+  return /* @__PURE__ */ d(
+    s.Trigger,
+    {
+      "data-slot": "select-trigger",
+      "data-size": a,
+      "aria-label": c || "Select an option",
+      className: o(
+        "h-9 w-full rounded-md border border-gray-300 px-3 py-2 text-sm shadow-xs transition-colors",
+        "!bg-white !text-black",
+        "placeholder:text-muted-foreground data-[placeholder]:text-gray-500",
+        "focus-visible:outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        "aria-invalid:border-destructive aria-invalid:ring-destructive/20",
+        "flex items-center justify-between gap-2",
+        "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg]:text-gray-500",
+        t
+      ),
+      style: { backgroundColor: "white", color: "black" },
+      ...u,
+      children: [
+        r,
+        /* @__PURE__ */ e(s.Icon, { asChild: !0, children: /* @__PURE__ */ e(S, { className: "size-4 opacity-50" }) })
+      ]
+    }
+  );
+}
+function G({
+  className: t,
+  children: a,
+  position: r = "popper",
+  ...c
+}) {
+  return /* @__PURE__ */ e(s.Portal, { children: /* @__PURE__ */ d(
+    s.Content,
+    {
+      "data-slot": "select-content",
+      className: o(
+        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-white text-black shadow-md",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+        "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        r === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+        t
+      ),
+      style: r === "popper" ? { width: "var(--radix-select-trigger-width)" } : void 0,
+      position: r,
+      ...c,
+      children: [
+        /* @__PURE__ */ e(X, {}),
+        /* @__PURE__ */ e(s.Viewport, { className: o("p-1", r === "popper" && "w-full"), children: a }),
+        /* @__PURE__ */ e(q, {})
+      ]
+    }
+  ) });
+}
+function E({ className: t, ...a }) {
+  return /* @__PURE__ */ e(
+    s.Label,
+    {
+      "data-slot": "select-label",
+      className: o("text-muted-foreground px-2 py-1.5 text-xs", t),
+      ...a
+    }
+  );
+}
+function M({
+  className: t,
+  children: a,
+  ...r
+}) {
+  return /* @__PURE__ */ d(
+    s.Item,
+    {
+      "data-slot": "select-item",
+      className: o(
+        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-3 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        t
+      ),
+      ...r,
+      children: [
+        /* @__PURE__ */ e("span", { className: "absolute right-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ e(s.ItemIndicator, { children: /* @__PURE__ */ e(O, { className: "size-4" }) }) }),
+        /* @__PURE__ */ e(s.ItemText, { children: a })
+      ]
+    }
+  );
+}
+function X({
+  className: t,
+  ...a
+}) {
+  return /* @__PURE__ */ e(
+    s.ScrollUpButton,
+    {
+      "data-slot": "select-scroll-up-button",
+      className: o("flex cursor-default items-center justify-center py-1", t),
+      ...a,
+      children: /* @__PURE__ */ e(R, { className: "size-4" })
+    }
+  );
+}
+function q({
+  className: t,
+  ...a
+}) {
+  return /* @__PURE__ */ e(
+    s.ScrollDownButton,
+    {
+      "data-slot": "select-scroll-down-button",
+      className: o("flex cursor-default items-center justify-center py-1", t),
+      ...a,
+      children: /* @__PURE__ */ e(S, { className: "size-4" })
+    }
+  );
+}
+export {
+  D as Select,
+  G as SelectContent,
+  P as SelectGroup,
+  M as SelectItem,
+  E as SelectLabel,
+  q as SelectScrollDownButton,
+  X as SelectScrollUpButton,
+  U as SelectTrigger,
+  T as SelectValue
+};

package/dist/ui/textarea.d.ts

@@ -0,0 +1,2 @@
+export * from '../components/ui/textarea'
+export {}

package/dist/ui/textarea.js

@@ -0,0 +1,38 @@
+import { jsx as x } from "react/jsx-runtime";
+import * as r from "react";
+import { c as b } from "../utils-DtaLkIY8.js";
+const g = r.forwardRef(
+  ({ className: t, value: e, onChange: a, onBlur: o, placeholder: i, disabled: n, rows: s = 3, maxLength: d, ...l }, u) => {
+    const c = (m) => {
+      const p = m.target.value;
+      a?.(p || null);
+    }, f = r.useMemo(() => e == null ? "" : String(e), [e]);
+    return /* @__PURE__ */ x(
+      "textarea",
+      {
+        ref: u,
+        value: f,
+        disabled: n,
+        placeholder: i,
+        rows: s,
+        maxLength: d,
+        className: b(
+          "w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-xs transition-colors",
+          "placeholder:text-muted-foreground",
+          "focus-visible:outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+          "disabled:cursor-not-allowed disabled:opacity-50",
+          "aria-invalid:border-destructive aria-invalid:ring-destructive/20",
+          "resize-y",
+          t
+        ),
+        onChange: c,
+        onBlur: o,
+        ...l
+      }
+    );
+  }
+);
+g.displayName = "Textarea";
+export {
+  g as Textarea
+};