@kaanolin/react 1.1.2

package/dist/Select-C2A4HgEF.js

@@ -0,0 +1,551 @@
+import { jsxs as k, jsx as o } from "react/jsx-runtime";
+import * as t from "react";
+import { c as n } from "./cx-CMoRfr5S.js";
+import { cva as y } from "class-variance-authority";
+import { r as le, a as oe, l as ae, h as ne } from "./form-field.styles-Bt9srSak.js";
+import { H as ie } from "./icons-BFvETcdo.js";
+const ce = y(
+  [
+    "flex",
+    "w-full",
+    "items-center",
+    "justify-between",
+    "gap-2",
+    "rounded-lg",
+    "border",
+    "border-border-primary",
+    "bg-bg-primary",
+    "text-text-primary",
+    "font-body",
+    "shadow-xs",
+    "outline-none",
+    "transition-colors",
+    "cursor-pointer",
+    "focus:ring-4"
+  ],
+  {
+    variants: {
+      size: {
+        small: ["text-sm", "py-2", "px-3", "h-10"],
+        medium: ["text-md", "py-2.5", "px-3.5", "h-11"],
+        large: ["text-lg", "py-3", "px-4", "h-12"]
+      },
+      variant: {
+        default: ["focus:border-brand-300", "focus:ring-focus-ring/24"],
+        error: [
+          "border-border-error_subtle",
+          "focus:border-border-error",
+          "focus:ring-focus-ring-error/24"
+        ],
+        success: [
+          "border-border-brand",
+          "focus:border-border-brand_alt",
+          "focus:ring-focus-ring/24"
+        ]
+      },
+      disabled: {
+        false: null,
+        true: [
+          "bg-bg-disabled",
+          "border-border-disabled",
+          "text-text-disabled",
+          "cursor-not-allowed",
+          "pointer-events-none",
+          "shadow-none",
+          "focus:ring-0"
+        ]
+      },
+      open: {
+        false: null,
+        true: ["ring-4", "ring-focus-ring/24", "border-brand-300"]
+      }
+    },
+    compoundVariants: [
+      {
+        open: !0,
+        variant: "error",
+        class: ["ring-focus-ring-error/24", "border-border-error"]
+      },
+      {
+        open: !0,
+        variant: "success",
+        class: ["ring-focus-ring/24", "border-border-brand_alt"]
+      }
+    ],
+    defaultVariants: {
+      size: "medium",
+      variant: "default",
+      disabled: !1,
+      open: !1
+    }
+  }
+), de = y(
+  [
+    "size-5",
+    "shrink-0",
+    "text-fg-quaternary",
+    "transition-transform",
+    "duration-200"
+  ],
+  {
+    variants: {
+      open: {
+        false: null,
+        true: ["rotate-180"]
+      },
+      disabled: {
+        false: null,
+        true: ["text-fg-disabled"]
+      }
+    },
+    defaultVariants: { open: !1, disabled: !1 }
+  }
+), ue = y([
+  "absolute",
+  "z-50",
+  "mt-1",
+  "w-full",
+  "bg-bg-primary",
+  "border",
+  "border-border-secondary",
+  "rounded-lg",
+  "shadow-lg",
+  "overflow-hidden",
+  "py-1"
+]), fe = y(["max-h-60", "overflow-y-auto"]), be = y(
+  [
+    "flex",
+    "items-center",
+    "justify-between",
+    "w-full",
+    "px-3.5",
+    "py-2.5",
+    "text-sm",
+    "text-text-primary",
+    "cursor-pointer",
+    "transition-colors",
+    "outline-none"
+  ],
+  {
+    variants: {
+      highlighted: {
+        false: null,
+        true: ["bg-bg-primary_hover"]
+      },
+      selected: {
+        false: null,
+        true: null
+      },
+      disabled: {
+        false: null,
+        true: [
+          "text-text-disabled",
+          "cursor-not-allowed",
+          "pointer-events-none"
+        ]
+      }
+    },
+    defaultVariants: { highlighted: !1, selected: !1, disabled: !1 }
+  }
+), pe = y([
+  "px-3.5",
+  "py-2",
+  "text-xs",
+  "font-medium",
+  "text-text-tertiary",
+  "select-none"
+]), me = y([
+  "border-t",
+  "border-border-secondary",
+  "my-1"
+]), F = t.createContext(null);
+function he() {
+  const r = t.useContext(F);
+  if (!r)
+    throw new Error("Select sub-components must be used within <Select>");
+  return r;
+}
+const xe = t.forwardRef(
+  ({
+    value: r,
+    defaultValue: i,
+    onValueChange: a,
+    placeholder: I = "Select...",
+    label: v,
+    helperText: b,
+    tooltip: d,
+    isRequired: w,
+    hideRequiredIndicator: V,
+    className: C,
+    id: $,
+    children: P,
+    onOpenChange: p,
+    size: U,
+    variant: T,
+    disabled: N = !1
+  }, J) => {
+    const m = $ || t.useId(), K = `${m}-listbox`, [s, _] = t.useState(!1), [Q, X] = t.useState(i), [c, h] = t.useState(null), [, Y] = t.useReducer((e) => e + 1, 0), u = r !== void 0 ? r : Q, j = t.useRef(null), z = t.useRef(null), L = t.useRef(/* @__PURE__ */ new Map()), Z = t.useRef(0), H = t.useRef(""), q = t.useRef(
+      void 0
+    ), S = t.useCallback(() => Array.from(L.current.values()).filter((e) => !e.disabled).sort((e, l) => e.index - l.index), []), O = t.useCallback(() => {
+      if (!u) return null;
+      const e = L.current.get(u);
+      return (e == null ? void 0 : e.label) ?? null;
+    }, [u]), x = t.useCallback(() => {
+      _(!1), h(null), p == null || p(!1);
+    }, [p]), R = t.useCallback(() => {
+      N || (_(!0), p == null || p(!0));
+    }, [N, p]);
+    t.useEffect(() => {
+      if (!s) return;
+      const e = S();
+      e.length !== 0 && (u && e.some((l) => l.value === u) ? h(u) : h(e[0].value));
+    }, [s, u, S]);
+    const E = t.useCallback(
+      (e) => {
+        var l;
+        r === void 0 && X(e), a == null || a(e), x(), (l = j.current) == null || l.focus();
+      },
+      [r, a, x]
+    ), A = t.useCallback(
+      (e, l, f) => {
+        const g = Z.current++;
+        return L.current.set(e, {
+          value: e,
+          label: l,
+          disabled: f,
+          index: g
+        }), Y(), g;
+      },
+      []
+    ), B = t.useCallback((e) => {
+      L.current.delete(e);
+    }, []);
+    t.useEffect(() => {
+      if (!s || !c || !z.current) return;
+      const e = z.current.querySelector(
+        `[data-value="${CSS.escape(c)}"]`
+      );
+      e && typeof e.scrollIntoView == "function" && e.scrollIntoView({ block: "nearest" });
+    }, [s, c]);
+    const G = t.useCallback(
+      (e) => {
+        clearTimeout(q.current), H.current += e.toLowerCase();
+        const f = S().find(
+          (g) => g.label.toLowerCase().startsWith(H.current)
+        );
+        f && h(f.value), q.current = setTimeout(() => {
+          H.current = "";
+        }, 500);
+      },
+      [S]
+    ), W = t.useCallback(
+      (e) => {
+        var g;
+        const l = S(), f = l.findIndex(
+          (D) => D.value === c
+        );
+        switch (e.key) {
+          case "ArrowDown": {
+            if (e.preventDefault(), !s) {
+              R();
+              return;
+            }
+            const D = f < l.length - 1 ? f + 1 : 0;
+            h(l[D].value);
+            break;
+          }
+          case "ArrowUp": {
+            if (e.preventDefault(), !s) {
+              R();
+              return;
+            }
+            const D = f > 0 ? f - 1 : l.length - 1;
+            h(l[D].value);
+            break;
+          }
+          case "Enter":
+          case " ": {
+            if (e.preventDefault(), !s) {
+              R();
+              return;
+            }
+            c && E(c);
+            break;
+          }
+          case "Escape": {
+            e.preventDefault(), x(), (g = j.current) == null || g.focus();
+            break;
+          }
+          case "Tab": {
+            x();
+            break;
+          }
+          case "Home": {
+            e.preventDefault(), s && l.length && h(l[0].value);
+            break;
+          }
+          case "End": {
+            e.preventDefault(), s && l.length && h(l[l.length - 1].value);
+            break;
+          }
+          default:
+            e.key.length === 1 && !e.ctrlKey && !e.metaKey && s && (e.preventDefault(), G(e.key));
+        }
+      },
+      [
+        s,
+        c,
+        S,
+        R,
+        x,
+        E,
+        G
+      ]
+    ), ee = () => {
+      s ? x() : R();
+    }, M = O(), te = !!M, re = T === "error", se = t.useMemo(
+      () => ({
+        selectId: m,
+        selectedValue: u,
+        highlightedValue: c,
+        onSelect: E,
+        registerItem: A,
+        unregisterItem: B
+      }),
+      [
+        m,
+        u,
+        c,
+        E,
+        A,
+        B
+      ]
+    );
+    return /* @__PURE__ */ k("div", { ref: J, className: "flex w-full flex-col items-start gap-1.5", children: [
+      v && /* @__PURE__ */ k("label", { htmlFor: m, className: n(ae()), children: [
+        v,
+        w && !V && /* @__PURE__ */ o("span", { className: n(le()), children: "*" }),
+        d && /* @__PURE__ */ o(
+          "span",
+          {
+            className: n(oe()),
+            title: d,
+            role: "img",
+            "aria-label": d,
+            children: /* @__PURE__ */ o(ie, {})
+          }
+        )
+      ] }),
+      /* @__PURE__ */ k("div", { className: "relative w-full", children: [
+        /* @__PURE__ */ k(
+          "button",
+          {
+            ref: j,
+            type: "button",
+            id: m,
+            role: "combobox",
+            "aria-haspopup": "listbox",
+            "aria-expanded": s,
+            "aria-controls": s ? K : void 0,
+            "aria-describedby": b ? `${m}-helper` : void 0,
+            "aria-required": w || void 0,
+            "aria-invalid": re || void 0,
+            disabled: !!N,
+            onClick: ee,
+            onKeyDown: W,
+            className: n(
+              ce({
+                size: U,
+                variant: T,
+                disabled: !!N,
+                open: s
+              }),
+              C
+            ),
+            children: [
+              /* @__PURE__ */ o(
+                "span",
+                {
+                  className: n(
+                    "truncate text-left",
+                    !te && "text-text-placeholder"
+                  ),
+                  children: M ?? I
+                }
+              ),
+              /* @__PURE__ */ o(
+                we,
+                {
+                  className: n(
+                    de({ open: s, disabled: !!N })
+                  )
+                }
+              )
+            ]
+          }
+        ),
+        s && /* @__PURE__ */ o(
+          "div",
+          {
+            className: "fixed inset-0 z-40",
+            onClick: x,
+            "aria-hidden": "true",
+            "data-testid": "select-overlay"
+          }
+        ),
+        /* @__PURE__ */ o(F.Provider, { value: se, children: /* @__PURE__ */ o(
+          "ul",
+          {
+            ref: z,
+            id: K,
+            role: "listbox",
+            "aria-activedescendant": s && c ? `${m}-option-${c}` : void 0,
+            tabIndex: -1,
+            onKeyDown: W,
+            className: n(
+              ue(),
+              !s && "hidden"
+            ),
+            "aria-hidden": !s || void 0,
+            children: /* @__PURE__ */ o("div", { className: n(fe()), children: P })
+          }
+        ) })
+      ] }),
+      b && /* @__PURE__ */ o(
+        "p",
+        {
+          id: `${m}-helper`,
+          className: n(ne({ variant: T })),
+          children: b
+        }
+      )
+    ] });
+  }
+);
+xe.displayName = "Select";
+const ge = t.forwardRef(
+  ({ value: r, disabled: i = !1, children: a, className: I, ...v }, b) => {
+    const d = he(), w = d.selectedValue === r, V = d.highlightedValue === r, C = typeof a == "string" ? a : typeof a == "number" ? String(a) : r;
+    t.useEffect(() => (d.registerItem(r, C, i), () => d.unregisterItem(r)), [r, C, i]);
+    const $ = () => {
+      i || d.onSelect(r);
+    };
+    return /* @__PURE__ */ k(
+      "li",
+      {
+        ref: b,
+        id: `${d.selectId}-option-${r}`,
+        role: "option",
+        "aria-selected": w,
+        "aria-disabled": i || void 0,
+        "data-value": r,
+        onClick: $,
+        className: n(
+          be({
+            highlighted: V,
+            selected: w,
+            disabled: i
+          }),
+          I
+        ),
+        ...v,
+        children: [
+          /* @__PURE__ */ o("span", { className: "truncate", children: a }),
+          w && /* @__PURE__ */ o(
+            Se,
+            {
+              className: "size-5 shrink-0 text-brand-600",
+              "aria-hidden": "true"
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+ge.displayName = "SelectItem";
+const ye = t.forwardRef(
+  ({ label: r, children: i, className: a, ...I }, v) => {
+    const b = t.useId();
+    return /* @__PURE__ */ k(
+      "div",
+      {
+        ref: v,
+        role: "group",
+        "aria-labelledby": b,
+        ...I,
+        children: [
+          /* @__PURE__ */ o(
+            "div",
+            {
+              id: b,
+              className: n(pe(), a),
+              children: r
+            }
+          ),
+          i
+        ]
+      }
+    );
+  }
+);
+ye.displayName = "SelectGroup";
+const ve = t.forwardRef(({ className: r, ...i }, a) => /* @__PURE__ */ o(
+  "hr",
+  {
+    ref: a,
+    className: n(me(), r),
+    "aria-hidden": "true",
+    ...i
+  }
+));
+ve.displayName = "SelectSeparator";
+function we(r) {
+  return /* @__PURE__ */ o(
+    "svg",
+    {
+      width: "20",
+      height: "20",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      ...r,
+      children: /* @__PURE__ */ o("polyline", { points: "6 9 12 15 18 9" })
+    }
+  );
+}
+function Se(r) {
+  return /* @__PURE__ */ o(
+    "svg",
+    {
+      width: "20",
+      height: "20",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      ...r,
+      children: /* @__PURE__ */ o("polyline", { points: "20 6 9 17 4 12" })
+    }
+  );
+}
+export {
+  xe as S,
+  ye as a,
+  ge as b,
+  ve as c,
+  fe as d,
+  ue as e,
+  pe as f,
+  be as g,
+  me as h,
+  ce as i,
+  de as s
+};

package/dist/Textarea-BHhXafu9.js

@@ -0,0 +1,117 @@
+import { jsxs as n, jsx as r } from "react/jsx-runtime";
+import * as c from "react";
+import { c as e } from "./cx-CMoRfr5S.js";
+import { cva as h } from "class-variance-authority";
+import { r as v, a as N, l as w, h as S } from "./form-field.styles-Bt9srSak.js";
+import { H as z } from "./icons-BFvETcdo.js";
+const I = h(
+  [
+    "flex",
+    "w-full",
+    "rounded-lg",
+    "border",
+    "border-border-primary",
+    "bg-bg-primary",
+    "text-text-primary",
+    "font-body",
+    "shadow-xs",
+    "outline-none",
+    "transition-colors",
+    "resize-y",
+    "placeholder:text-text-placeholder",
+    "focus:ring-4"
+  ],
+  {
+    variants: {
+      size: {
+        small: ["text-sm", "py-2", "px-3"],
+        medium: ["text-md", "py-2.5", "px-3.5"],
+        large: ["text-lg", "py-3", "px-4"]
+      },
+      variant: {
+        default: ["focus:border-brand-300", "focus:ring-focus-ring/24"],
+        error: [
+          "border-border-error_subtle",
+          "focus:border-border-error",
+          "focus:ring-focus-ring-error/24"
+        ],
+        success: [
+          "border-border-brand",
+          "focus:border-border-brand_alt",
+          "focus:ring-focus-ring/24"
+        ]
+      },
+      disabled: {
+        false: null,
+        true: [
+          "bg-bg-disabled",
+          "border-border-disabled",
+          "text-text-disabled",
+          "cursor-not-allowed",
+          "pointer-events-none",
+          "shadow-none",
+          "resize-none",
+          "focus:ring-0"
+        ]
+      }
+    },
+    defaultVariants: {
+      size: "medium",
+      variant: "default",
+      disabled: !1
+    }
+  }
+), T = c.forwardRef(
+  ({
+    className: b,
+    size: m,
+    variant: s,
+    disabled: d = !1,
+    label: t,
+    helperText: o,
+    id: f,
+    tooltip: l,
+    isRequired: i,
+    hideRequiredIndicator: u,
+    rows: p = 4,
+    ...x
+  }, g) => {
+    const a = f || c.useId(), y = s === "error";
+    return /* @__PURE__ */ n("div", { className: "flex w-full flex-col items-start gap-1.5", children: [
+      t && /* @__PURE__ */ n("label", { htmlFor: a, className: e(w()), children: [
+        t,
+        i && !u && /* @__PURE__ */ r("span", { className: e(v()), children: "*" }),
+        l && /* @__PURE__ */ r(
+          "span",
+          {
+            className: e(N()),
+            title: l,
+            role: "img",
+            "aria-label": l,
+            children: /* @__PURE__ */ r(z, {})
+          }
+        )
+      ] }),
+      /* @__PURE__ */ r(
+        "textarea",
+        {
+          id: a,
+          className: e(I({ size: m, variant: s, disabled: !!d }), b),
+          ref: g,
+          rows: p,
+          disabled: !!d,
+          required: i || void 0,
+          "aria-invalid": y || void 0,
+          "aria-describedby": o ? `${a}-helper` : void 0,
+          ...x
+        }
+      ),
+      o && /* @__PURE__ */ r("p", { id: `${a}-helper`, className: e(S({ variant: s })), children: o })
+    ] });
+  }
+);
+T.displayName = "Textarea";
+export {
+  T,
+  I as t
+};

package/dist/Textarea-Ceix8Thf.cjs

@@ -0,0 +1 @@
+"use strict";const s=require("react/jsx-runtime"),v=require("react"),o=require("./cx-C5SviAs-.cjs"),N=require("class-variance-authority"),i=require("./form-field.styles-BHdf4QA5.cjs"),S=require("./icons-jGx5qsVM.cjs");function q(r){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const e in r)if(e!=="default"){const a=Object.getOwnPropertyDescriptor(r,e);Object.defineProperty(t,e,a.get?a:{enumerable:!0,get:()=>r[e]})}}return t.default=r,Object.freeze(t)}const b=q(v),x=N.cva(["flex","w-full","rounded-lg","border","border-border-primary","bg-bg-primary","text-text-primary","font-body","shadow-xs","outline-none","transition-colors","resize-y","placeholder:text-text-placeholder","focus:ring-4"],{variants:{size:{small:["text-sm","py-2","px-3"],medium:["text-md","py-2.5","px-3.5"],large:["text-lg","py-3","px-4"]},variant:{default:["focus:border-brand-300","focus:ring-focus-ring/24"],error:["border-border-error_subtle","focus:border-border-error","focus:ring-focus-ring-error/24"],success:["border-border-brand","focus:border-border-brand_alt","focus:ring-focus-ring/24"]},disabled:{false:null,true:["bg-bg-disabled","border-border-disabled","text-text-disabled","cursor-not-allowed","pointer-events-none","shadow-none","resize-none","focus:ring-0"]}},defaultVariants:{size:"medium",variant:"default",disabled:!1}}),f=b.forwardRef(({className:r,size:t,variant:e,disabled:a=!1,label:d,helperText:n,id:m,tooltip:c,isRequired:u,hideRequiredIndicator:p,rows:g=4,...y},h)=>{const l=m||b.useId(),j=e==="error";return s.jsxs("div",{className:"flex w-full flex-col items-start gap-1.5",children:[d&&s.jsxs("label",{htmlFor:l,className:o.cx(i.labelStyles()),children:[d,u&&!p&&s.jsx("span",{className:o.cx(i.requiredIndicatorStyles()),children:"*"}),c&&s.jsx("span",{className:o.cx(i.labelTooltipStyles()),title:c,role:"img","aria-label":c,children:s.jsx(S.HelpCircleIcon,{})})]}),s.jsx("textarea",{id:l,className:o.cx(x({size:t,variant:e,disabled:!!a}),r),ref:h,rows:g,disabled:!!a,required:u||void 0,"aria-invalid":j||void 0,"aria-describedby":n?`${l}-helper`:void 0,...y}),n&&s.jsx("p",{id:`${l}-helper`,className:o.cx(i.helperTextStyles({variant:e})),children:n})]})});f.displayName="Textarea";exports.Textarea=f;exports.textareaStyles=x;

package/dist/_shared/form-field.styles.d.ts

@@ -0,0 +1,7 @@
+export declare const labelStyles: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const requiredIndicatorStyles: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const labelTooltipStyles: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const helperTextStyles: (props?: ({
+    variant?: "default" | "error" | "success" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+//# sourceMappingURL=form-field.styles.d.ts.map

package/dist/_shared/form-field.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-field.styles.d.ts","sourceRoot":"","sources":["../../src/_shared/form-field.styles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,WAAW,oFAQtB,CAAC;AAEH,eAAO,MAAM,uBAAuB,oFAA+B,CAAC;AAEpE,eAAO,MAAM,kBAAkB,oFAK7B,CAAC;AAIH,eAAO,MAAM,gBAAgB;;8EAW3B,CAAC"}

package/dist/_shared/icons.d.ts

@@ -0,0 +1,2 @@
+export declare const HelpCircleIcon: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=icons.d.ts.map

package/dist/_shared/icons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../src/_shared/icons.tsx"],"names":[],"mappings":"AAAA,eAAO,MAAM,cAAc,+CAe1B,CAAC"}

package/dist/_shared/index.d.ts

@@ -0,0 +1,3 @@
+export { labelStyles, requiredIndicatorStyles, labelTooltipStyles, helperTextStyles, } from './form-field.styles';
+export { HelpCircleIcon } from './icons';
+//# sourceMappingURL=index.d.ts.map

package/dist/_shared/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/_shared/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,WAAW,EACX,uBAAuB,EACvB,kBAAkB,EAClB,gBAAgB,GACjB,MAAM,qBAAqB,CAAC;AAE7B,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC"}