@forsyteco/product-ui 0.0.11 → 0.0.13

package/dist/combobox-BHLjk9D9.mjs

@@ -0,0 +1,293 @@
+import { jsx as o, Fragment as T } from "react/jsx-runtime";
+import * as c from "react";
+import { c as u } from "./tailwind-DtaLkIY8.mjs";
+import { H as j, U as A, B as U, k as z, a as W } from "./combobox-Umb1ZW9S.mjs";
+const F = c.createContext(null);
+function g() {
+  const e = c.useContext(F);
+  if (!e) throw new globalThis.Error("Combobox.* must be used within <Combobox.Root>.");
+  return e;
+}
+function Z(e, t) {
+  const l = t.trim().toLowerCase();
+  return l ? e.label.toLowerCase().includes(l) : !0;
+}
+function q({
+  options: e,
+  value: t,
+  defaultValue: l = null,
+  onChange: s,
+  query: n,
+  defaultQuery: i = "",
+  onQueryChange: a,
+  placeholder: r = "Select an option…",
+  disabled: f = !1,
+  invalid: p = !1,
+  clearable: v = !0,
+  filterFn: b,
+  renderOption: m,
+  className: V,
+  children: B
+}) {
+  const [H, M] = c.useState(l), C = t !== void 0 ? t : H, y = c.useCallback(
+    (d) => {
+      t === void 0 && M(d), s?.(d);
+    },
+    [s, t]
+  ), [Q, S] = c.useState(i), x = n !== void 0 ? n : Q, k = c.useCallback(
+    (d) => {
+      n === void 0 && S(d), a?.(d);
+    },
+    [a, n]
+  ), [N, w] = c.useState(!1), O = c.useRef(null), h = b ?? Z, L = c.useMemo(() => x.trim() ? e.filter((d) => h(d, x)) : e, [e, x, h]), E = c.useMemo(
+    () => ({
+      options: e,
+      filteredOptions: L,
+      value: C,
+      setValue: y,
+      query: x,
+      setQuery: k,
+      placeholder: r,
+      disabled: f,
+      invalid: p,
+      isOpen: N,
+      setIsOpen: w,
+      clearable: v,
+      rootRef: O,
+      filterFn: h,
+      renderOption: m
+    }),
+    [
+      e,
+      L,
+      C,
+      y,
+      x,
+      k,
+      r,
+      f,
+      p,
+      N,
+      v,
+      h,
+      m
+    ]
+  );
+  return /* @__PURE__ */ o(F.Provider, { value: E, children: /* @__PURE__ */ o("div", { ref: O, className: u("relative", V), children: /* @__PURE__ */ o(
+    W,
+    {
+      by: "id",
+      value: C,
+      onChange: (d) => {
+        y(d), w(!1);
+      },
+      onClose: () => w(!1),
+      disabled: f,
+      nullable: !0,
+      children: B
+    }
+  ) }) });
+}
+function D({
+  className: e,
+  ...t
+}) {
+  return /* @__PURE__ */ o(
+    "label",
+    {
+      ...t,
+      className: u("mb-1 block text-sm font-medium text-foreground", e)
+    }
+  );
+}
+function G({
+  className: e,
+  ...t
+}) {
+  return /* @__PURE__ */ o("div", { ...t, className: u("relative", e) });
+}
+function J({
+  className: e,
+  displayValue: t,
+  onValueTextChange: l,
+  onFocus: s,
+  onBlur: n,
+  openOnFocus: i = !0,
+  ...a
+}) {
+  const r = g(), f = t ?? ((b) => b?.label ?? ""), p = a.placeholder ?? r.placeholder, v = {
+    ...a,
+    placeholder: p,
+    displayValue: f
+  };
+  return /* @__PURE__ */ o(
+    z,
+    {
+      ...v,
+      className: u(
+        "w-full rounded-md border bg-background py-2 pl-3 pr-20 text-base leading-5 text-foreground",
+        "border-input focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:ring-offset-background",
+        r.invalid && "border-destructive focus:ring-destructive",
+        r.disabled && "cursor-not-allowed opacity-50",
+        e
+      ),
+      onChange: (b) => {
+        const m = b.target.value;
+        r.setQuery(m), l?.(m), r.disabled || r.setIsOpen(!0);
+      },
+      onFocus: (b) => {
+        !r.disabled && i && r.setIsOpen(!0), s?.(b);
+      },
+      onBlur: n
+    }
+  );
+}
+function K({
+  className: e,
+  "aria-label": t,
+  onClick: l,
+  ...s
+}) {
+  const n = g();
+  return n.clearable && !!n.value && !n.disabled ? /* @__PURE__ */ o(
+    "button",
+    {
+      type: "button",
+      ...s,
+      "aria-label": t ?? "Clear selection",
+      className: u(
+        "absolute inset-y-0 right-7 flex items-center px-2 text-muted-foreground hover:text-foreground",
+        e
+      ),
+      onClick: (a) => {
+        a.preventDefault(), n.setValue(null), n.setQuery(""), n.setIsOpen(!1), l?.(a);
+      },
+      children: /* @__PURE__ */ o("svg", { className: "h-4 w-4", viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ o(
+        "path",
+        {
+          fillRule: "evenodd",
+          d: "M10 8.586 4.293 2.879A1 1 0 1 0 2.879 4.293L8.586 10l-5.707 5.707a1 1 0 1 0 1.414 1.414L10 11.414l5.707 5.707a1 1 0 0 0 1.414-1.414L11.414 10l5.707-5.707A1 1 0 0 0 15.707 2.88L10 8.586Z",
+          clipRule: "evenodd"
+        }
+      ) })
+    }
+  ) : null;
+}
+function X({
+  className: e,
+  children: t,
+  onClick: l,
+  ...s
+}) {
+  const n = g();
+  return /* @__PURE__ */ o(
+    U,
+    {
+      ...s,
+      "aria-label": s["aria-label"] ?? "Toggle options",
+      className: u(
+        "absolute inset-y-0 right-0 flex items-center pr-2 text-muted-foreground",
+        n.disabled && "cursor-not-allowed opacity-50",
+        e
+      ),
+      onClick: l,
+      children: t ?? /* @__PURE__ */ o("svg", { className: "h-5 w-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: /* @__PURE__ */ o("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) })
+    }
+  );
+}
+function Y({
+  className: e,
+  children: t,
+  ...l
+}) {
+  const s = g();
+  if (s.disabled) return null;
+  const n = s.filteredOptions.length > 0;
+  return /* @__PURE__ */ o(
+    A,
+    {
+      ...l,
+      anchor: "bottom start",
+      className: u(
+        "z-10 max-h-60 w-[var(--input-width)] overflow-auto rounded-md bg-background py-1 text-base shadow-lg",
+        "invisible empty:invisible data-open:visible",
+        "ring-1 ring-border focus:outline-none",
+        e
+      ),
+      children: t || (n ? s.filteredOptions.map((i) => /* @__PURE__ */ o(I, { option: i }, i.id)) : /* @__PURE__ */ o(R, {}))
+    }
+  );
+}
+function R({ className: e, ...t }) {
+  return /* @__PURE__ */ o(
+    "div",
+    {
+      ...t,
+      className: u("cursor-default select-none px-4 py-2 text-muted-foreground", e),
+      children: "Nothing found."
+    }
+  );
+}
+function I({
+  option: e,
+  className: t,
+  children: l,
+  ...s
+}) {
+  const n = g();
+  return /* @__PURE__ */ o(
+    j,
+    {
+      ...s,
+      value: e,
+      disabled: e.disabled,
+      className: ({
+        active: i,
+        selected: a,
+        disabled: r
+      }) => u(
+        "relative select-none py-2 pl-3 pr-4",
+        r ? "cursor-not-allowed opacity-50" : "cursor-default",
+        i ? "bg-accent text-accent-foreground" : "text-foreground",
+        a && "font-medium",
+        typeof t == "function" ? t({ active: i, selected: a, disabled: r }) : t
+      ),
+      children: ({
+        active: i,
+        selected: a,
+        disabled: r
+      }) => {
+        const f = l || (n.renderOption ? n.renderOption(e, { active: i, selected: a, disabled: r }) : e.label);
+        return /* @__PURE__ */ o(T, { children: f });
+      }
+    }
+  );
+}
+function _({
+  className: e,
+  ...t
+}) {
+  return /* @__PURE__ */ o("p", { ...t, className: u("mt-1 text-sm text-muted-foreground", e) });
+}
+function $({
+  className: e,
+  ...t
+}) {
+  return /* @__PURE__ */ o("p", { ...t, className: u("mt-1 text-sm text-destructive", e) });
+}
+const ne = {
+  Root: q,
+  Label: D,
+  Control: G,
+  Input: J,
+  ClearButton: K,
+  ToggleButton: X,
+  Options: Y,
+  Option: I,
+  Empty: R,
+  Hint: _,
+  Error: $
+};
+export {
+  ne as C
+};

package/dist/combobox-DxpuSWuM.js

@@ -0,0 +1 @@
+"use strict";const n=require("react/jsx-runtime"),E=require("react"),a=require("./tailwind-D2U2F80P.js"),g=require("./combobox-B1h2hn6a.js");function H(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const o in e)if(o!=="default"){const s=Object.getOwnPropertyDescriptor(e,o);Object.defineProperty(t,o,s.get?s:{enumerable:!0,get:()=>e[o]})}}return t.default=e,Object.freeze(t)}const c=H(E),L=c.createContext(null);function p(){const e=c.useContext(L);if(!e)throw new globalThis.Error("Combobox.* must be used within <Combobox.Root>.");return e}function _(e,t){const o=t.trim().toLowerCase();return o?e.label.toLowerCase().includes(o):!0}function z({options:e,value:t,defaultValue:o=null,onChange:s,query:r,defaultQuery:u="",onQueryChange:i,placeholder:l="Select an option…",disabled:f=!1,invalid:v=!1,clearable:h=!0,filterFn:b,renderOption:x,className:V,children:S}){const[B,M]=c.useState(o),y=t!==void 0?t:B,C=c.useCallback(d=>{t===void 0&&M(d),s?.(d)},[s,t]),[q,Q]=c.useState(u),m=r!==void 0?r:q,O=c.useCallback(d=>{r===void 0&&Q(d),i?.(d)},[i,r]),[k,w]=c.useState(!1),N=c.useRef(null),j=b??_,R=c.useMemo(()=>m.trim()?e.filter(d=>j(d,m)):e,[e,m,j]),T=c.useMemo(()=>({options:e,filteredOptions:R,value:y,setValue:C,query:m,setQuery:O,placeholder:l,disabled:f,invalid:v,isOpen:k,setIsOpen:w,clearable:h,rootRef:N,filterFn:j,renderOption:x}),[e,R,y,C,m,O,l,f,v,k,h,j,x]);return n.jsx(L.Provider,{value:T,children:n.jsx("div",{ref:N,className:a.cn("relative",V),children:n.jsx(g.Ht,{by:"id",value:y,onChange:d=>{C(d),w(!1)},onClose:()=>w(!1),disabled:f,nullable:!0,children:S})})})}function A({className:e,...t}){return n.jsx("label",{...t,className:a.cn("mb-1 block text-sm font-medium text-foreground",e)})}function D({className:e,...t}){return n.jsx("div",{...t,className:a.cn("relative",e)})}function U({className:e,displayValue:t,onValueTextChange:o,onFocus:s,onBlur:r,openOnFocus:u=!0,...i}){const l=p(),f=t??(b=>b?.label??""),v=i.placeholder??l.placeholder,h={...i,placeholder:v,displayValue:f};return n.jsx(g.ko,{...h,className:a.cn("w-full rounded-md border bg-background py-2 pl-3 pr-20 text-base leading-5 text-foreground","border-input focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:ring-offset-background",l.invalid&&"border-destructive focus:ring-destructive",l.disabled&&"cursor-not-allowed opacity-50",e),onChange:b=>{const x=b.target.value;l.setQuery(x),o?.(x),l.disabled||l.setIsOpen(!0)},onFocus:b=>{!l.disabled&&u&&l.setIsOpen(!0),s?.(b)},onBlur:r})}function W({className:e,"aria-label":t,onClick:o,...s}){const r=p();return r.clearable&&!!r.value&&!r.disabled?n.jsx("button",{type:"button",...s,"aria-label":t??"Clear selection",className:a.cn("absolute inset-y-0 right-7 flex items-center px-2 text-muted-foreground hover:text-foreground",e),onClick:i=>{i.preventDefault(),r.setValue(null),r.setQuery(""),r.setIsOpen(!1),o?.(i)},children:n.jsx("svg",{className:"h-4 w-4",viewBox:"0 0 20 20",fill:"currentColor","aria-hidden":"true",children:n.jsx("path",{fillRule:"evenodd",d:"M10 8.586 4.293 2.879A1 1 0 1 0 2.879 4.293L8.586 10l-5.707 5.707a1 1 0 1 0 1.414 1.414L10 11.414l5.707 5.707a1 1 0 0 0 1.414-1.414L11.414 10l5.707-5.707A1 1 0 0 0 15.707 2.88L10 8.586Z",clipRule:"evenodd"})})}):null}function Z({className:e,children:t,onClick:o,...s}){const r=p();return n.jsx(g.Bo,{...s,"aria-label":s["aria-label"]??"Toggle options",className:a.cn("absolute inset-y-0 right-0 flex items-center pr-2 text-muted-foreground",r.disabled&&"cursor-not-allowed opacity-50",e),onClick:o,children:t??n.jsx("svg",{className:"h-5 w-5",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24","aria-hidden":"true",children:n.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M19 9l-7 7-7-7"})})})}function G({className:e,children:t,...o}){const s=p();if(s.disabled)return null;const r=s.filteredOptions.length>0;return n.jsx(g.Uo,{...o,anchor:"bottom start",className:a.cn("z-10 max-h-60 w-[var(--input-width)] overflow-auto rounded-md bg-background py-1 text-base shadow-lg","invisible empty:invisible data-open:visible","ring-1 ring-border focus:outline-none",e),children:t||(r?s.filteredOptions.map(u=>n.jsx(I,{option:u},u.id)):n.jsx(F,{}))})}function F({className:e,...t}){return n.jsx("div",{...t,className:a.cn("cursor-default select-none px-4 py-2 text-muted-foreground",e),children:"Nothing found."})}function I({option:e,className:t,children:o,...s}){const r=p();return n.jsx(g.Ho,{...s,value:e,disabled:e.disabled,className:({active:u,selected:i,disabled:l})=>a.cn("relative select-none py-2 pl-3 pr-4",l?"cursor-not-allowed opacity-50":"cursor-default",u?"bg-accent text-accent-foreground":"text-foreground",i&&"font-medium",typeof t=="function"?t({active:u,selected:i,disabled:l}):t),children:({active:u,selected:i,disabled:l})=>{const f=o||(r.renderOption?r.renderOption(e,{active:u,selected:i,disabled:l}):e.label);return n.jsx(n.Fragment,{children:f})}})}function J({className:e,...t}){return n.jsx("p",{...t,className:a.cn("mt-1 text-sm text-muted-foreground",e)})}function K({className:e,...t}){return n.jsx("p",{...t,className:a.cn("mt-1 text-sm text-destructive",e)})}const X={Root:z,Label:A,Control:D,Input:U,ClearButton:W,ToggleButton:Z,Options:G,Option:I,Empty:F,Hint:J,Error:K};exports.Combobox=X;