@forgedevstack/bear 1.1.3 → 1.1.4

package/dist/components/TimePicker/components/TimePickerDialDropdown/TimePickerDialDropdown.js

@@ -1,84 +1,90 @@
-import { jsxs as i, jsx as e } from "react/jsx-runtime";
-import { useState as M } from "react";
-import { cn as s } from "../../../../utils/cn.js";
-import { TIMEPICKER_DEFAULT_TRANSLATIONS as f, CLOCK_HOURS_12 as I, TIMEPICKER_FOOTER_CLASSES as L, TIMEPICKER_CLEAR_BUTTON_CLASSES as R, TIMEPICKER_CONFIRM_BUTTON_CLASSES as O, TIMEPICKER_DROPDOWN_CLASSES as A } from "../../TimePicker.constants.js";
-import { ClockFaceSvg as w } from "../../helpers/ClockFaceSvg.js";
-const U = ({
-  selectedHour: t,
-  setSelectedHour: d,
-  selectedMinute: b,
+import { jsxs as n, jsx as e } from "react/jsx-runtime";
+import { useState as R, useCallback as v } from "react";
+import { cn as o } from "../../../../utils/cn.js";
+import { TIMEPICKER_DEFAULT_TRANSLATIONS as B, CLOCK_HOURS_12 as L, TIMEPICKER_FOOTER_CLASSES as D, TIMEPICKER_CLEAR_BUTTON_CLASSES as K, TIMEPICKER_CONFIRM_BUTTON_CLASSES as z, TIMEPICKER_DROPDOWN_CLASSES as w } from "../../TimePicker.constants.js";
+import { ClockFaceSvg as F } from "../../helpers/ClockFaceSvg.js";
+const x = "bear-text-blue-600 dark:bear-text-blue-400 bear-font-bold bear-bg-blue-50 dark:bear-bg-blue-900/30 bear-rounded bear-px-1", _ = "bear-text-gray-400 dark:bear-text-zinc-500 hover:bear-text-gray-600 dark:hover:bear-text-zinc-300 bear-cursor-pointer bear-px-1", G = ({
+  selectedHour: i,
+  setSelectedHour: s,
+  selectedMinute: d,
   setSelectedMinute: m,
-  period: k,
-  setPeriod: _,
+  period: u,
+  setPeriod: k,
   format: a,
-  hours: u,
+  hours: p,
   minutes: h,
-  timeValue: p,
-  clearable: x,
-  onChange: o,
-  onConfirm: T,
-  onClose: S,
+  timeValue: T,
+  clearable: S,
+  onChange: l,
+  onConfirm: E,
+  onClose: C,
   translations: N
 }) => {
-  const [v, n] = M("hour"), c = { ...f, ...N }, C = a === "12h" ? t === 12 ? 12 : t % 12 : t, P = b, y = `${C.toString().padStart(2, "0")}:${P.toString().padStart(2, "0")}`, E = a === "12h" ? [...I] : u, l = v === "hour", g = l ? E : h, B = l ? (r) => d(a === "12h" && r === 0 ? 12 : r) : m;
-  return /* @__PURE__ */ i("div", { className: s(A, "Bear-TimePicker__dial bear-w-72"), children: [
-    /* @__PURE__ */ e("div", { className: "Bear-TimePicker__dial-title bear-text-center bear-uppercase bear-text-xs bear-text-gray-500 dark:bear-text-zinc-400 bear-mb-2", children: c.selectTime }),
-    /* @__PURE__ */ i("div", { className: "Bear-TimePicker__dial-display bear-flex bear-items-center bear-justify-center bear-gap-3 bear-mb-4", children: [
-      /* @__PURE__ */ e("span", { className: "Bear-TimePicker__dial-time bear-text-2xl bear-font-bold bear-text-gray-900 dark:bear-text-white", children: y }),
-      a === "12h" && /* @__PURE__ */ e("div", { className: "Bear-TimePicker__dial-period bear-flex bear-flex-col bear-gap-0.5", children: ["AM", "PM"].map((r) => /* @__PURE__ */ e(
-        "button",
-        {
-          onClick: () => _(r),
-          className: s(
-            "Bear-TimePicker__dial-period-btn bear-px-2 bear-py-0.5 bear-rounded bear-text-sm bear-transition-colors",
-            k === r ? "bear-text-blue-600 dark:bear-text-blue-400 bear-font-medium" : "bear-text-gray-400 dark:bear-text-zinc-500 hover:bear-text-gray-600 dark:hover:bear-text-zinc-400"
-          ),
-          children: r
-        },
-        r
-      )) })
-    ] }),
-    /* @__PURE__ */ i("div", { className: "Bear-TimePicker__dial-mode bear-flex bear-items-center bear-justify-center bear-gap-2 bear-mb-2", children: [
+  const [I, c] = R("hour"), b = { ...B, ...N }, P = a === "12h" ? i === 12 ? 12 : i % 12 : i, y = d, A = P.toString().padStart(2, "0"), M = y.toString().padStart(2, "0"), O = a === "12h" ? [...L] : p, t = I === "hour", f = t ? O : h, g = v((r) => {
+    t ? (s(a === "12h" && r === 0 ? 12 : r), c("minute")) : m(r);
+  }, [t, a, s, m]);
+  return /* @__PURE__ */ n("div", { className: o(w, "Bear-TimePicker__dial bear-w-72"), children: [
+    /* @__PURE__ */ e("div", { className: "Bear-TimePicker__dial-title bear-text-center bear-uppercase bear-text-xs bear-text-gray-500 dark:bear-text-zinc-400 bear-mb-2", children: b.selectTime }),
+    /* @__PURE__ */ n("div", { className: "Bear-TimePicker__dial-display bear-flex bear-items-center bear-justify-center bear-gap-1 bear-mb-4", children: [
       /* @__PURE__ */ e(
         "button",
         {
           type: "button",
-          onClick: () => n("hour"),
-          className: "Bear-TimePicker__dial-mode-btn bear-p-1 bear-rounded bear-text-gray-500 hover:bear-bg-gray-100 dark:hover:bear-bg-zinc-700",
-          "aria-label": "Hour mode",
-          children: /* @__PURE__ */ e("svg", { className: "bear-w-4 bear-h-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" }) })
+          onClick: () => c("hour"),
+          className: o(
+            "Bear-TimePicker__dial-hour-btn bear-text-2xl bear-font-bold bear-transition-colors bear-border-none bear-bg-transparent",
+            t ? x : _
+          ),
+          "aria-label": b.hour,
+          children: A
         }
       ),
+      /* @__PURE__ */ e("span", { className: "bear-text-2xl bear-font-bold bear-text-gray-900 dark:bear-text-white", children: ":" }),
       /* @__PURE__ */ e(
         "button",
         {
           type: "button",
-          onClick: () => n("minute"),
-          className: "Bear-TimePicker__dial-mode-btn bear-p-1 bear-rounded bear-text-gray-500 hover:bear-bg-gray-100 dark:hover:bear-bg-zinc-700",
-          "aria-label": "Minute mode",
-          children: /* @__PURE__ */ e("svg", { className: "bear-w-4 bear-h-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }) })
+          onClick: () => c("minute"),
+          className: o(
+            "Bear-TimePicker__dial-minute-btn bear-text-2xl bear-font-bold bear-transition-colors bear-border-none bear-bg-transparent",
+            t ? _ : x
+          ),
+          "aria-label": b.minute,
+          children: M
         }
-      )
+      ),
+      a === "12h" && /* @__PURE__ */ e("div", { className: "Bear-TimePicker__dial-period bear-flex bear-flex-col bear-gap-0.5 bear-ml-2", children: ["AM", "PM"].map((r) => /* @__PURE__ */ e(
+        "button",
+        {
+          onClick: () => k(r),
+          className: o(
+            "Bear-TimePicker__dial-period-btn bear-px-2 bear-py-0.5 bear-rounded bear-text-sm bear-transition-colors",
+            u === r ? "bear-text-blue-600 dark:bear-text-blue-400 bear-font-medium" : "bear-text-gray-400 dark:bear-text-zinc-500 hover:bear-text-gray-600 dark:hover:bear-text-zinc-400"
+          ),
+          children: r
+        },
+        r
+      )) })
     ] }),
     /* @__PURE__ */ e("div", { className: "Bear-TimePicker__dial-face bear-relative bear-w-48 bear-h-48 bear-mx-auto bear-mb-4", children: /* @__PURE__ */ e(
-      w,
+      F,
       {
-        values: g,
-        isHourMode: l,
+        values: f,
+        isHourMode: t,
         format: a,
-        selectedHour: t,
-        selectedMinute: b,
-        onSelect: B
+        selectedHour: i,
+        selectedMinute: d,
+        onSelect: g
       }
     ) }),
-    /* @__PURE__ */ i("div", { className: L, children: [
-      x && p && /* @__PURE__ */ e("button", { onClick: () => {
-        o == null || o(null), S();
-      }, className: R, children: c.cancel }),
-      /* @__PURE__ */ e("button", { onClick: T, className: O, children: c.ok })
+    /* @__PURE__ */ n("div", { className: D, children: [
+      S && T && /* @__PURE__ */ e("button", { onClick: () => {
+        l == null || l(null), C();
+      }, className: K, children: b.cancel }),
+      /* @__PURE__ */ e("button", { onClick: E, className: z, children: b.ok })
     ] })
   ] });
 };
 export {
-  U as TimePickerDialDropdown
+  G as TimePickerDialDropdown
 };

package/dist/components/TimePicker/helpers/ClockFaceSvg.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),m=require("../../../utils/cn.cjs");require("react");const e=require("../TimePicker.constants.cjs"),E=({values:t,isHourMode:n,format:i,selectedHour:r,selectedMinute:l,onSelect:b,className:h})=>{const f=c=>n?(c*30-90)*(Math.PI/180):(c*(360/t.length)-90)*(Math.PI/180),s=(n?(i==="12h"?r===12?0:r%12:r)*30-90:l*6-90)*Math.PI/180;return a.jsxs("svg",{viewBox:"0 0 200 200",className:m.cn("Bear-TimePicker__clock-face bear-w-full bear-h-full",h),children:[a.jsx("circle",{cx:e.CLOCK_CENTER,cy:e.CLOCK_CENTER,r:e.CLOCK_RADIUS,className:"Bear-TimePicker__clock-face-circle bear-fill-none bear-stroke-gray-200 dark:bear-stroke-zinc-700 bear-stroke-2"}),t.map((c,x)=>{const C=f(x),o=e.CLOCK_CENTER+e.CLOCK_RADIUS*.85*Math.cos(C),_=e.CLOCK_CENTER+e.CLOCK_RADIUS*.85*Math.sin(C),k=n?i==="12h"?c===12?r===12:r%12===c:r===c:l===c;return a.jsxs("g",{onClick:()=>b(c),className:"Bear-TimePicker__clock-face-item bear-cursor-pointer",children:[k&&a.jsx("circle",{cx:o,cy:_,r:14,className:"Bear-TimePicker__clock-face-dot bear-fill-blue-500"}),a.jsx("text",{x:o,y:_,textAnchor:"middle",dominantBaseline:"middle",className:m.cn("Bear-TimePicker__clock-face-text bear-text-sm bear-font-medium bear-pointer-events-none",k?"bear-fill-white":"bear-fill-gray-700 dark:bear-fill-zinc-300"),children:typeof c=="number"?c.toString().padStart(2,"0"):c})]},c)}),a.jsx("line",{x1:e.CLOCK_CENTER,y1:e.CLOCK_CENTER,x2:e.CLOCK_CENTER+e.CLOCK_RADIUS*.6*Math.cos(s),y2:e.CLOCK_CENTER+e.CLOCK_RADIUS*.6*Math.sin(s),className:"Bear-TimePicker__clock-face-hand bear-stroke-blue-500 bear-stroke-2",strokeLinecap:"round"})]})};exports.ClockFaceSvg=E;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),m=require("../../../utils/cn.cjs");require("react");const e=require("../TimePicker.constants.cjs"),x=16,S=14,O=.85,R=.6,b=30,n=90,l=Math.PI/180,f=({values:o,isHourMode:t,format:_,selectedHour:a,selectedMinute:C,onSelect:A,className:L})=>{const N=c=>t?(c*b-n)*l:(c*(360/o.length)-n)*l,E=(t?(_==="12h"?a===12?0:a%12:a)*b-n:C*6-n)*l;return r.jsxs("svg",{viewBox:"0 0 200 200",className:m.cn("Bear-TimePicker__clock-face bear-w-full bear-h-full",L),children:[r.jsx("circle",{cx:e.CLOCK_CENTER,cy:e.CLOCK_CENTER,r:e.CLOCK_RADIUS,className:"Bear-TimePicker__clock-face-circle bear-fill-none bear-stroke-gray-200 dark:bear-stroke-zinc-700 bear-stroke-2"}),o.map((c,h)=>{const T=N(h),s=e.CLOCK_CENTER+e.CLOCK_RADIUS*O*Math.cos(T),i=e.CLOCK_CENTER+e.CLOCK_RADIUS*O*Math.sin(T),k=t?_==="12h"?c===12?a===12:a%12===c:a===c:C===c;return r.jsxs("g",{onClick:()=>A(c),className:"Bear-TimePicker__clock-face-item bear-cursor-pointer",children:[r.jsx("circle",{cx:s,cy:i,r:x,fill:"transparent"}),k&&r.jsx("circle",{cx:s,cy:i,r:S,className:"Bear-TimePicker__clock-face-dot bear-fill-blue-500"}),r.jsx("text",{x:s,y:i,textAnchor:"middle",dominantBaseline:"middle",className:m.cn("Bear-TimePicker__clock-face-text bear-text-sm bear-font-medium bear-pointer-events-none",k?"bear-fill-white":"bear-fill-gray-700 dark:bear-fill-zinc-300"),children:typeof c=="number"?c.toString().padStart(2,"0"):c})]},c)}),r.jsx("line",{x1:e.CLOCK_CENTER,y1:e.CLOCK_CENTER,x2:e.CLOCK_CENTER+e.CLOCK_RADIUS*R*Math.cos(E),y2:e.CLOCK_CENTER+e.CLOCK_RADIUS*R*Math.sin(E),className:"Bear-TimePicker__clock-face-hand bear-stroke-blue-500 bear-stroke-2",strokeLinecap:"round"})]})};exports.ClockFaceSvg=f;

package/dist/components/TimePicker/helpers/ClockFaceSvg.d.ts

@@ -1,18 +1,11 @@
 import { FC } from 'react';
 export interface ClockFaceSvgProps {
-    /** Clock face values (hours or minutes) */
     values: readonly number[] | number[];
-    /** Whether in hour mode (different angle calc) */
     isHourMode: boolean;
-    /** Format: 12h or 24h */
     format: '12h' | '24h';
-    /** Current selected hour (for hour mode) */
     selectedHour: number;
-    /** Current selected minute (for minute mode) */
     selectedMinute: number;
-    /** Callback when value is clicked */
     onSelect: (v: number) => void;
-    /** Optional class name */
     className?: string;
 }
 export declare const ClockFaceSvg: FC<ClockFaceSvgProps>;

package/dist/components/TimePicker/helpers/ClockFaceSvg.js

@@ -1,46 +1,47 @@
-import { jsxs as f, jsx as n } from "react/jsx-runtime";
-import { cn as _ } from "../../../utils/cn.js";
+import { jsxs as T, jsx as a } from "react/jsx-runtime";
+import { cn as A } from "../../../utils/cn.js";
 import "react";
-import { CLOCK_RADIUS as c, CLOCK_CENTER as r } from "../TimePicker.constants.js";
-const T = ({
-  values: i,
-  isHourMode: t,
-  format: l,
-  selectedHour: a,
-  selectedMinute: o,
+import { CLOCK_RADIUS as n, CLOCK_CENTER as c } from "../TimePicker.constants.js";
+const I = 16, O = 14, E = 0.85, x = 0.6, N = 30, t = 90, s = Math.PI / 180, C = ({
+  values: _,
+  isHourMode: i,
+  format: m,
+  selectedHour: r,
+  selectedMinute: k,
   onSelect: g,
-  className: x
+  className: p
 }) => {
-  const d = (e) => t ? (e * 30 - 90) * (Math.PI / 180) : (e * (360 / i.length) - 90) * (Math.PI / 180), s = (t ? (l === "12h" ? a === 12 ? 0 : a % 12 : a) * 30 - 90 : o * 6 - 90) * Math.PI / 180;
-  return /* @__PURE__ */ f("svg", { viewBox: "0 0 200 200", className: _("Bear-TimePicker__clock-face bear-w-full bear-h-full", x), children: [
-    /* @__PURE__ */ n(
+  const d = (e) => i ? (e * N - t) * s : (e * (360 / _.length) - t) * s, b = (i ? (m === "12h" ? r === 12 ? 0 : r % 12 : r) * N - t : k * 6 - t) * s;
+  return /* @__PURE__ */ T("svg", { viewBox: "0 0 200 200", className: A("Bear-TimePicker__clock-face bear-w-full bear-h-full", p), children: [
+    /* @__PURE__ */ a(
       "circle",
       {
-        cx: r,
-        cy: r,
-        r: c,
+        cx: c,
+        cy: c,
+        r: n,
         className: "Bear-TimePicker__clock-face-circle bear-fill-none bear-stroke-gray-200 dark:bear-stroke-zinc-700 bear-stroke-2"
       }
     ),
-    i.map((e, p) => {
-      const m = d(p), k = r + c * 0.85 * Math.cos(m), h = r + c * 0.85 * Math.sin(m), b = t ? l === "12h" ? e === 12 ? a === 12 : a % 12 === e : a === e : o === e;
-      return /* @__PURE__ */ f(
+    _.map((e, S) => {
+      const f = d(S), l = c + n * E * Math.cos(f), o = c + n * E * Math.sin(f), h = i ? m === "12h" ? e === 12 ? r === 12 : r % 12 === e : r === e : k === e;
+      return /* @__PURE__ */ T(
         "g",
         {
           onClick: () => g(e),
           className: "Bear-TimePicker__clock-face-item bear-cursor-pointer",
           children: [
-            b && /* @__PURE__ */ n("circle", { cx: k, cy: h, r: 14, className: "Bear-TimePicker__clock-face-dot bear-fill-blue-500" }),
-            /* @__PURE__ */ n(
+            /* @__PURE__ */ a("circle", { cx: l, cy: o, r: I, fill: "transparent" }),
+            h && /* @__PURE__ */ a("circle", { cx: l, cy: o, r: O, className: "Bear-TimePicker__clock-face-dot bear-fill-blue-500" }),
+            /* @__PURE__ */ a(
               "text",
               {
-                x: k,
-                y: h,
+                x: l,
+                y: o,
                 textAnchor: "middle",
                 dominantBaseline: "middle",
-                className: _(
+                className: A(
                   "Bear-TimePicker__clock-face-text bear-text-sm bear-font-medium bear-pointer-events-none",
-                  b ? "bear-fill-white" : "bear-fill-gray-700 dark:bear-fill-zinc-300"
+                  h ? "bear-fill-white" : "bear-fill-gray-700 dark:bear-fill-zinc-300"
                 ),
                 children: typeof e == "number" ? e.toString().padStart(2, "0") : e
               }
@@ -50,13 +51,13 @@ const T = ({
         e
       );
     }),
-    /* @__PURE__ */ n(
+    /* @__PURE__ */ a(
       "line",
       {
-        x1: r,
-        y1: r,
-        x2: r + c * 0.6 * Math.cos(s),
-        y2: r + c * 0.6 * Math.sin(s),
+        x1: c,
+        y1: c,
+        x2: c + n * x * Math.cos(b),
+        y2: c + n * x * Math.sin(b),
         className: "Bear-TimePicker__clock-face-hand bear-stroke-blue-500 bear-stroke-2",
         strokeLinecap: "round"
       }
@@ -64,5 +65,5 @@ const T = ({
   ] });
 };
 export {
-  T as ClockFaceSvg
+  C as ClockFaceSvg
 };

package/dist/components/TreeSelect/TreeSelect.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),n=require("react"),m=require("../../utils/cn.cjs"),a=require("./TreeSelect.const.cjs"),E=require("./TreeSelect.utils.cjs"),_=({node:s,depth:c,selected:o,expanded:t,multiple:i,onToggleExpand:h,onSelect:p})=>{const d=s.children&&s.children.length>0,f=t.has(s.id),S=o.has(s.id);return e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:m.cn(a.NODE_CLASSES,S&&a.NODE_SELECTED_CLASSES,s.disabled&&a.NODE_DISABLED_CLASSES),style:{paddingLeft:c*a.INDENT_PX+12},onClick:()=>!s.disabled&&p(s.id),role:"treeitem","aria-selected":S,"aria-expanded":d?f:void 0,children:[d?e.jsx("svg",{className:m.cn(a.CHEVRON_CLASSES,f&&"bear-rotate-90"),onClick:x=>{x.stopPropagation(),h(s.id)},fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",children:e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M9 5l7 7-7 7"})}):e.jsx("span",{className:"bear-w-4 bear-mr-1"}),i&&e.jsx("span",{className:m.cn("bear-w-4 bear-h-4 bear-mr-2 bear-border bear-rounded bear-flex bear-items-center bear-justify-center bear-text-xs",S?"bear-bg-pink-500 bear-border-pink-500 bear-text-white":"bear-border-gray-300 dark:bear-border-zinc-600"),children:S&&"✓"}),s.icon&&e.jsx("span",{className:"bear-mr-1.5",children:s.icon}),e.jsx("span",{className:"bear-truncate",children:s.label})]}),d&&f&&s.children.map(x=>e.jsx(_,{node:x,depth:c+1,selected:o,expanded:t,multiple:i,onToggleExpand:h,onSelect:p},x.id))]})},z=s=>{const{nodes:c,value:o,onChange:t,multiple:i=!1,label:h,placeholder:p="Select…",disabled:d=!1,clearable:f=!0,searchable:S=!0,expandAll:x=!1,size:g="md",error:N,helperText:v,maxHeight:w=a.DEFAULT_MAX_HEIGHT,className:R,testId:T,...O}=s,[j,A]=n.useState(!1),[L,C]=n.useState(""),y=n.useRef(null),I=n.useMemo(()=>E.collectAllIds(c),[c]),[D,B]=n.useState(()=>x?I:new Set),b=n.useMemo(()=>o?new Set(Array.isArray(o)?o:[o]):new Set,[o]);n.useEffect(()=>{const r=l=>{y.current&&!y.current.contains(l.target)&&(A(!1),C(""))};return document.addEventListener("mousedown",r),()=>document.removeEventListener("mousedown",r)},[]);const H=n.useCallback(r=>{B(l=>{const u=new Set(l);return u.has(r)?u.delete(r):u.add(r),u})},[]),M=n.useCallback(r=>{if(i){const l=new Set(b);l.has(r)?l.delete(r):l.add(r),t==null||t(Array.from(l))}else t==null||t(r),A(!1),C("")},[i,b,t]),P=n.useCallback(()=>{t==null||t(i?[]:"")},[i,t]),k=L?E.filterNodes(c,L):c,q=()=>{if(b.size===0)return e.jsx("span",{className:"bear-text-gray-400 dark:bear-text-zinc-500",children:p});if(i)return e.jsx("div",{className:"bear-flex bear-flex-wrap bear-gap-1",children:Array.from(b).map(l=>{const u=E.findNodeById(c,l);return u?e.jsx("span",{className:a.TAG_CLASSES,children:u.label},l):null})});const r=E.findNodeById(c,Array.from(b)[0]);return(r==null?void 0:r.label)??p};return e.jsxs("div",{ref:y,className:m.cn(a.ROOT_CLASSES,R),"data-testid":T,...O,children:[h&&e.jsx("label",{className:a.LABEL_CLASSES,children:h}),e.jsxs("button",{type:"button",disabled:d,onClick:()=>!d&&A(!j),className:m.cn(a.TRIGGER_CLASSES,a.SIZE_CLASSES[g],d&&"bear-opacity-50 bear-cursor-not-allowed"),children:[e.jsx("span",{className:"bear-flex-1 bear-text-left bear-truncate",children:q()}),e.jsxs("div",{className:"bear-flex bear-items-center bear-gap-1",children:[f&&b.size>0&&e.jsx("span",{className:"bear-text-gray-400 hover:bear-text-gray-600 bear-cursor-pointer",onClick:r=>{r.stopPropagation(),P()},children:"✕"}),e.jsx("svg",{className:m.cn("bear-w-4 bear-h-4 bear-text-gray-400 bear-transition-transform",j&&"bear-rotate-180"),fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",children:e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M19 9l-7 7-7-7"})})]})]}),j&&e.jsxs("div",{className:a.DROPDOWN_CLASSES,children:[S&&e.jsx("input",{className:a.SEARCH_CLASSES,placeholder:"Search…",value:L,onChange:r=>C(r.target.value),autoFocus:!0}),e.jsx("div",{style:{maxHeight:w},className:"bear-overflow-y-auto",role:"tree",children:k.length>0?k.map(r=>e.jsx(_,{node:r,depth:0,selected:b,expanded:D,multiple:i,onToggleExpand:H,onSelect:M},r.id)):e.jsx("div",{className:"bear-py-6 bear-text-center bear-text-sm bear-text-gray-400",children:"No results"})})]}),N&&e.jsx("p",{className:a.ERROR_CLASSES,children:N}),!N&&v&&e.jsx("p",{className:a.HELPER_CLASSES,children:v})]})};exports.TreeSelect=z;

package/dist/components/TreeSelect/TreeSelect.const.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=280,r=20,a={sm:"bear-py-1.5 bear-px-3 bear-text-sm",md:"bear-py-2 bear-px-4 bear-text-base",lg:"bear-py-2.5 bear-px-5 bear-text-lg"},b="Bear-TreeSelect bear-relative bear-inline-block bear-w-full",t="bear-w-full bear-flex bear-items-center bear-justify-between bear-rounded-lg bear-border bear-border-gray-300 dark:bear-border-zinc-600 bear-bg-white dark:bear-bg-zinc-800 bear-text-gray-900 dark:bear-text-white bear-transition-colors focus:bear-ring-2 focus:bear-ring-pink-500 bear-outline-none",S="bear-absolute bear-z-[9999] bear-w-full bear-mt-1 bear-bg-white dark:bear-bg-zinc-800 bear-border bear-border-gray-200 dark:bear-border-zinc-700 bear-rounded-xl bear-shadow-xl bear-overflow-hidden",n="bear-w-full bear-px-3 bear-py-2 bear-text-sm bear-bg-transparent bear-border-b bear-border-gray-200 dark:bear-border-zinc-700 bear-outline-none bear-text-gray-900 dark:bear-text-white",o="bear-flex bear-items-center bear-py-1.5 bear-px-3 bear-cursor-pointer bear-transition-colors hover:bear-bg-gray-50 dark:hover:bear-bg-zinc-700 bear-text-sm bear-text-gray-700 dark:bear-text-zinc-300",E="bear-bg-pink-50 dark:bear-bg-pink-900/20 bear-text-pink-700 dark:bear-text-pink-300",i="bear-opacity-40 bear-cursor-not-allowed",s="bear-w-4 bear-h-4 bear-mr-1 bear-text-gray-400 dark:bear-text-zinc-500 bear-transition-transform bear-cursor-pointer",c="bear-inline-flex bear-items-center bear-gap-1 bear-bg-pink-100 dark:bear-bg-pink-900/30 bear-text-pink-700 dark:bear-text-pink-300 bear-rounded bear-px-1.5 bear-py-0.5 bear-text-xs",d="Bear-TreeSelect__label bear-block bear-text-sm bear-font-medium bear-text-gray-700 dark:bear-text-zinc-300 bear-mb-1.5",x="bear-mt-1 bear-text-xs bear-text-red-500",A="bear-mt-1 bear-text-xs bear-text-gray-500 dark:bear-text-zinc-500";exports.CHEVRON_CLASSES=s;exports.DEFAULT_MAX_HEIGHT=e;exports.DROPDOWN_CLASSES=S;exports.ERROR_CLASSES=x;exports.HELPER_CLASSES=A;exports.INDENT_PX=r;exports.LABEL_CLASSES=d;exports.NODE_CLASSES=o;exports.NODE_DISABLED_CLASSES=i;exports.NODE_SELECTED_CLASSES=E;exports.ROOT_CLASSES=b;exports.SEARCH_CLASSES=n;exports.SIZE_CLASSES=a;exports.TAG_CLASSES=c;exports.TRIGGER_CLASSES=t;

package/dist/components/TreeSelect/TreeSelect.const.d.ts

@@ -0,0 +1,19 @@
+export declare const DEFAULT_MAX_HEIGHT = 280;
+export declare const INDENT_PX = 20;
+export declare const SIZE_CLASSES: {
+    readonly sm: "bear-py-1.5 bear-px-3 bear-text-sm";
+    readonly md: "bear-py-2 bear-px-4 bear-text-base";
+    readonly lg: "bear-py-2.5 bear-px-5 bear-text-lg";
+};
+export declare const ROOT_CLASSES = "Bear-TreeSelect bear-relative bear-inline-block bear-w-full";
+export declare const TRIGGER_CLASSES = "bear-w-full bear-flex bear-items-center bear-justify-between bear-rounded-lg bear-border bear-border-gray-300 dark:bear-border-zinc-600 bear-bg-white dark:bear-bg-zinc-800 bear-text-gray-900 dark:bear-text-white bear-transition-colors focus:bear-ring-2 focus:bear-ring-pink-500 bear-outline-none";
+export declare const DROPDOWN_CLASSES = "bear-absolute bear-z-[9999] bear-w-full bear-mt-1 bear-bg-white dark:bear-bg-zinc-800 bear-border bear-border-gray-200 dark:bear-border-zinc-700 bear-rounded-xl bear-shadow-xl bear-overflow-hidden";
+export declare const SEARCH_CLASSES = "bear-w-full bear-px-3 bear-py-2 bear-text-sm bear-bg-transparent bear-border-b bear-border-gray-200 dark:bear-border-zinc-700 bear-outline-none bear-text-gray-900 dark:bear-text-white";
+export declare const NODE_CLASSES = "bear-flex bear-items-center bear-py-1.5 bear-px-3 bear-cursor-pointer bear-transition-colors hover:bear-bg-gray-50 dark:hover:bear-bg-zinc-700 bear-text-sm bear-text-gray-700 dark:bear-text-zinc-300";
+export declare const NODE_SELECTED_CLASSES = "bear-bg-pink-50 dark:bear-bg-pink-900/20 bear-text-pink-700 dark:bear-text-pink-300";
+export declare const NODE_DISABLED_CLASSES = "bear-opacity-40 bear-cursor-not-allowed";
+export declare const CHEVRON_CLASSES = "bear-w-4 bear-h-4 bear-mr-1 bear-text-gray-400 dark:bear-text-zinc-500 bear-transition-transform bear-cursor-pointer";
+export declare const TAG_CLASSES = "bear-inline-flex bear-items-center bear-gap-1 bear-bg-pink-100 dark:bear-bg-pink-900/30 bear-text-pink-700 dark:bear-text-pink-300 bear-rounded bear-px-1.5 bear-py-0.5 bear-text-xs";
+export declare const LABEL_CLASSES = "Bear-TreeSelect__label bear-block bear-text-sm bear-font-medium bear-text-gray-700 dark:bear-text-zinc-300 bear-mb-1.5";
+export declare const ERROR_CLASSES = "bear-mt-1 bear-text-xs bear-text-red-500";
+export declare const HELPER_CLASSES = "bear-mt-1 bear-text-xs bear-text-gray-500 dark:bear-text-zinc-500";

package/dist/components/TreeSelect/TreeSelect.const.js

@@ -0,0 +1,22 @@
+const e = 280, r = 20, a = {
+  sm: "bear-py-1.5 bear-px-3 bear-text-sm",
+  md: "bear-py-2 bear-px-4 bear-text-base",
+  lg: "bear-py-2.5 bear-px-5 bear-text-lg"
+}, b = "Bear-TreeSelect bear-relative bear-inline-block bear-w-full", t = "bear-w-full bear-flex bear-items-center bear-justify-between bear-rounded-lg bear-border bear-border-gray-300 dark:bear-border-zinc-600 bear-bg-white dark:bear-bg-zinc-800 bear-text-gray-900 dark:bear-text-white bear-transition-colors focus:bear-ring-2 focus:bear-ring-pink-500 bear-outline-none", n = "bear-absolute bear-z-[9999] bear-w-full bear-mt-1 bear-bg-white dark:bear-bg-zinc-800 bear-border bear-border-gray-200 dark:bear-border-zinc-700 bear-rounded-xl bear-shadow-xl bear-overflow-hidden", o = "bear-w-full bear-px-3 bear-py-2 bear-text-sm bear-bg-transparent bear-border-b bear-border-gray-200 dark:bear-border-zinc-700 bear-outline-none bear-text-gray-900 dark:bear-text-white", i = "bear-flex bear-items-center bear-py-1.5 bear-px-3 bear-cursor-pointer bear-transition-colors hover:bear-bg-gray-50 dark:hover:bear-bg-zinc-700 bear-text-sm bear-text-gray-700 dark:bear-text-zinc-300", S = "bear-bg-pink-50 dark:bear-bg-pink-900/20 bear-text-pink-700 dark:bear-text-pink-300", s = "bear-opacity-40 bear-cursor-not-allowed", x = "bear-w-4 bear-h-4 bear-mr-1 bear-text-gray-400 dark:bear-text-zinc-500 bear-transition-transform bear-cursor-pointer", c = "bear-inline-flex bear-items-center bear-gap-1 bear-bg-pink-100 dark:bear-bg-pink-900/30 bear-text-pink-700 dark:bear-text-pink-300 bear-rounded bear-px-1.5 bear-py-0.5 bear-text-xs", d = "Bear-TreeSelect__label bear-block bear-text-sm bear-font-medium bear-text-gray-700 dark:bear-text-zinc-300 bear-mb-1.5", l = "bear-mt-1 bear-text-xs bear-text-red-500", E = "bear-mt-1 bear-text-xs bear-text-gray-500 dark:bear-text-zinc-500";
+export {
+  x as CHEVRON_CLASSES,
+  e as DEFAULT_MAX_HEIGHT,
+  n as DROPDOWN_CLASSES,
+  l as ERROR_CLASSES,
+  E as HELPER_CLASSES,
+  r as INDENT_PX,
+  d as LABEL_CLASSES,
+  i as NODE_CLASSES,
+  s as NODE_DISABLED_CLASSES,
+  S as NODE_SELECTED_CLASSES,
+  b as ROOT_CLASSES,
+  o as SEARCH_CLASSES,
+  a as SIZE_CLASSES,
+  c as TAG_CLASSES,
+  t as TRIGGER_CLASSES
+};

package/dist/components/TreeSelect/TreeSelect.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { TreeSelectProps } from './TreeSelect.types';
+export declare const TreeSelect: FC<TreeSelectProps>;
+export default TreeSelect;

package/dist/components/TreeSelect/TreeSelect.js

@@ -0,0 +1,128 @@
+import { jsxs as S, jsx as r, Fragment as W } from "react/jsx-runtime";
+import { useState as v, useRef as V, useMemo as w, useEffect as X, useCallback as y } from "react";
+import { cn as p } from "../../utils/cn.js";
+import { DEFAULT_MAX_HEIGHT as U, LABEL_CLASSES as Z, SIZE_CLASSES as q, TRIGGER_CLASSES as J, DROPDOWN_CLASSES as K, SEARCH_CLASSES as Q, ERROR_CLASSES as Y, HELPER_CLASSES as $, ROOT_CLASSES as ee, TAG_CLASSES as re, CHEVRON_CLASSES as ae, INDENT_PX as te, NODE_DISABLED_CLASSES as se, NODE_SELECTED_CLASSES as le, NODE_CLASSES as ne } from "./TreeSelect.const.js";
+import { collectAllIds as ce, filterNodes as oe, findNodeById as g } from "./TreeSelect.utils.js";
+const R = ({ node: a, depth: l, selected: c, expanded: t, multiple: n, onToggleExpand: u, onSelect: h }) => {
+  const o = a.children && a.children.length > 0, f = t.has(a.id), b = c.has(a.id);
+  return /* @__PURE__ */ S(W, { children: [
+    /* @__PURE__ */ S(
+      "div",
+      {
+        className: p(ne, b && le, a.disabled && se),
+        style: { paddingLeft: l * te + 12 },
+        onClick: () => !a.disabled && h(a.id),
+        role: "treeitem",
+        "aria-selected": b,
+        "aria-expanded": o ? f : void 0,
+        children: [
+          o ? /* @__PURE__ */ r(
+            "svg",
+            {
+              className: p(ae, f && "bear-rotate-90"),
+              onClick: (m) => {
+                m.stopPropagation(), u(a.id);
+              },
+              fill: "none",
+              viewBox: "0 0 24 24",
+              stroke: "currentColor",
+              children: /* @__PURE__ */ r("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" })
+            }
+          ) : /* @__PURE__ */ r("span", { className: "bear-w-4 bear-mr-1" }),
+          n && /* @__PURE__ */ r("span", { className: p("bear-w-4 bear-h-4 bear-mr-2 bear-border bear-rounded bear-flex bear-items-center bear-justify-center bear-text-xs", b ? "bear-bg-pink-500 bear-border-pink-500 bear-text-white" : "bear-border-gray-300 dark:bear-border-zinc-600"), children: b && "✓" }),
+          a.icon && /* @__PURE__ */ r("span", { className: "bear-mr-1.5", children: a.icon }),
+          /* @__PURE__ */ r("span", { className: "bear-truncate", children: a.label })
+        ]
+      }
+    ),
+    o && f && a.children.map((m) => /* @__PURE__ */ r(R, { node: m, depth: l + 1, selected: c, expanded: t, multiple: n, onToggleExpand: u, onSelect: h }, m.id))
+  ] });
+}, pe = (a) => {
+  const {
+    nodes: l,
+    value: c,
+    onChange: t,
+    multiple: n = !1,
+    label: u,
+    placeholder: h = "Select…",
+    disabled: o = !1,
+    clearable: f = !0,
+    searchable: b = !0,
+    expandAll: m = !1,
+    size: O = "md",
+    error: E,
+    helperText: k,
+    maxHeight: D = U,
+    className: I,
+    testId: T,
+    ...H
+  } = a, [N, x] = v(!1), [A, L] = v(""), C = V(null), j = w(() => ce(l), [l]), [z, B] = v(() => m ? j : /* @__PURE__ */ new Set()), i = w(() => c ? new Set(Array.isArray(c) ? c : [c]) : /* @__PURE__ */ new Set(), [c]);
+  X(() => {
+    const e = (s) => {
+      C.current && !C.current.contains(s.target) && (x(!1), L(""));
+    };
+    return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
+  }, []);
+  const P = y((e) => {
+    B((s) => {
+      const d = new Set(s);
+      return d.has(e) ? d.delete(e) : d.add(e), d;
+    });
+  }, []), G = y((e) => {
+    if (n) {
+      const s = new Set(i);
+      s.has(e) ? s.delete(e) : s.add(e), t == null || t(Array.from(s));
+    } else
+      t == null || t(e), x(!1), L("");
+  }, [n, i, t]), M = y(() => {
+    t == null || t(n ? [] : "");
+  }, [n, t]), _ = A ? oe(l, A) : l, F = () => {
+    if (i.size === 0) return /* @__PURE__ */ r("span", { className: "bear-text-gray-400 dark:bear-text-zinc-500", children: h });
+    if (n)
+      return /* @__PURE__ */ r("div", { className: "bear-flex bear-flex-wrap bear-gap-1", children: Array.from(i).map((s) => {
+        const d = g(l, s);
+        return d ? /* @__PURE__ */ r("span", { className: re, children: d.label }, s) : null;
+      }) });
+    const e = g(l, Array.from(i)[0]);
+    return (e == null ? void 0 : e.label) ?? h;
+  };
+  return /* @__PURE__ */ S("div", { ref: C, className: p(ee, I), "data-testid": T, ...H, children: [
+    u && /* @__PURE__ */ r("label", { className: Z, children: u }),
+    /* @__PURE__ */ S(
+      "button",
+      {
+        type: "button",
+        disabled: o,
+        onClick: () => !o && x(!N),
+        className: p(J, q[O], o && "bear-opacity-50 bear-cursor-not-allowed"),
+        children: [
+          /* @__PURE__ */ r("span", { className: "bear-flex-1 bear-text-left bear-truncate", children: F() }),
+          /* @__PURE__ */ S("div", { className: "bear-flex bear-items-center bear-gap-1", children: [
+            f && i.size > 0 && /* @__PURE__ */ r("span", { className: "bear-text-gray-400 hover:bear-text-gray-600 bear-cursor-pointer", onClick: (e) => {
+              e.stopPropagation(), M();
+            }, children: "✕" }),
+            /* @__PURE__ */ r("svg", { className: p("bear-w-4 bear-h-4 bear-text-gray-400 bear-transition-transform", N && "bear-rotate-180"), fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ r("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) })
+          ] })
+        ]
+      }
+    ),
+    N && /* @__PURE__ */ S("div", { className: K, children: [
+      b && /* @__PURE__ */ r(
+        "input",
+        {
+          className: Q,
+          placeholder: "Search…",
+          value: A,
+          onChange: (e) => L(e.target.value),
+          autoFocus: !0
+        }
+      ),
+      /* @__PURE__ */ r("div", { style: { maxHeight: D }, className: "bear-overflow-y-auto", role: "tree", children: _.length > 0 ? _.map((e) => /* @__PURE__ */ r(R, { node: e, depth: 0, selected: i, expanded: z, multiple: n, onToggleExpand: P, onSelect: G }, e.id)) : /* @__PURE__ */ r("div", { className: "bear-py-6 bear-text-center bear-text-sm bear-text-gray-400", children: "No results" }) })
+    ] }),
+    E && /* @__PURE__ */ r("p", { className: Y, children: E }),
+    !E && k && /* @__PURE__ */ r("p", { className: $, children: k })
+  ] });
+};
+export {
+  pe as TreeSelect
+};

package/dist/components/TreeSelect/TreeSelect.types.d.ts

@@ -0,0 +1,25 @@
+import { HTMLAttributes } from 'react';
+export interface TreeNode {
+    id: string;
+    label: string;
+    children?: TreeNode[];
+    disabled?: boolean;
+    icon?: React.ReactNode;
+}
+export interface TreeSelectProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    nodes: TreeNode[];
+    value?: string | string[];
+    onChange?: (value: string | string[]) => void;
+    multiple?: boolean;
+    label?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    clearable?: boolean;
+    searchable?: boolean;
+    expandAll?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    error?: string;
+    helperText?: string;
+    maxHeight?: number;
+    testId?: string;
+}

package/dist/components/TreeSelect/TreeSelect.utils.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=(t,r)=>{for(const e of t){if(e.id===r)return e;if(e.children){const n=d(e.children,r);if(n)return n}}},c=(t,r)=>{const e=r.toLowerCase();return t.reduce((n,l)=>{const o=l.children?c(l.children,r):[];return(l.label.toLowerCase().includes(e)||o.length>0)&&n.push({...l,children:o.length>0?o:l.children}),n},[])},i=t=>{const r=new Set;for(const e of t)r.add(e.id),e.children&&i(e.children).forEach(n=>r.add(n));return r};exports.collectAllIds=i;exports.filterNodes=c;exports.findNodeById=d;

package/dist/components/TreeSelect/TreeSelect.utils.d.ts

@@ -0,0 +1,5 @@
+import { TreeNode } from './TreeSelect.types';
+export declare const flattenNodes: (nodes: TreeNode[]) => TreeNode[];
+export declare const findNodeById: (nodes: TreeNode[], id: string) => TreeNode | undefined;
+export declare const filterNodes: (nodes: TreeNode[], query: string) => TreeNode[];
+export declare const collectAllIds: (nodes: TreeNode[]) => Set<string>;

package/dist/components/TreeSelect/TreeSelect.utils.js

@@ -0,0 +1,25 @@
+const l = (t, r) => {
+  for (const e of t) {
+    if (e.id === r) return e;
+    if (e.children) {
+      const n = l(e.children, r);
+      if (n) return n;
+    }
+  }
+}, d = (t, r) => {
+  const e = r.toLowerCase();
+  return t.reduce((n, c) => {
+    const o = c.children ? d(c.children, r) : [];
+    return (c.label.toLowerCase().includes(e) || o.length > 0) && n.push({ ...c, children: o.length > 0 ? o : c.children }), n;
+  }, []);
+}, i = (t) => {
+  const r = /* @__PURE__ */ new Set();
+  for (const e of t)
+    r.add(e.id), e.children && i(e.children).forEach((n) => r.add(n));
+  return r;
+};
+export {
+  i as collectAllIds,
+  d as filterNodes,
+  l as findNodeById
+};

package/dist/components/TreeSelect/index.d.ts

@@ -0,0 +1,2 @@
+export { TreeSelect } from './TreeSelect';
+export type { TreeSelectProps, TreeNode } from './TreeSelect.types';