@forgedevstack/bear 1.2.5 → 1.2.7

package/dist/components/PropsPlayground/PropsPlayground.js

@@ -1,10 +1,10 @@
-import { jsxs as b, jsx as e } from "react/jsx-runtime";
-import { useMemo as _, useState as z, useCallback as C } from "react";
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import { useMemo as _, useState as z, useCallback as w } from "react";
 import { cn as n } from "../../utils/cn.js";
-import { Icon as f } from "../Icon/Icon.js";
+import { Icon as g } from "../Icon/Icon.js";
 import { SIZE_CLASSES as F, TYPE_LABELS as m, COLUMN_CLASSES as I, ROOT_CLASS as V } from "./PropsPlayground.const.js";
-import { getDefaults as D } from "./PropsPlayground.utils.js";
-const M = ({ size: i }) => /* @__PURE__ */ e(f, { size: i, children: /* @__PURE__ */ e("polyline", { points: "6 9 12 15 18 9" }) }), T = ({ size: i }) => /* @__PURE__ */ e(f, { size: i, children: /* @__PURE__ */ e("polyline", { points: "9 18 15 12 9 6" }) }), U = ({ size: i }) => /* @__PURE__ */ b(f, { size: i, children: [
+import { getDefaults as k } from "./PropsPlayground.utils.js";
+const D = ({ size: i }) => /* @__PURE__ */ e(g, { size: i, children: /* @__PURE__ */ e("polyline", { points: "6 9 12 15 18 9" }) }), M = ({ size: i }) => /* @__PURE__ */ e(g, { size: i, children: /* @__PURE__ */ e("polyline", { points: "9 18 15 12 9 6" }) }), T = ({ size: i }) => /* @__PURE__ */ t(g, { size: i, children: [
   /* @__PURE__ */ e("line", { x1: "4", y1: "21", x2: "4", y2: "14" }),
   /* @__PURE__ */ e("line", { x1: "4", y1: "10", x2: "4", y2: "3" }),
   /* @__PURE__ */ e("line", { x1: "12", y1: "21", x2: "12", y2: "12" }),
@@ -14,9 +14,9 @@ const M = ({ size: i }) => /* @__PURE__ */ e(f, { size: i, children: /* @__PURE_
   /* @__PURE__ */ e("line", { x1: "1", y1: "14", x2: "7", y2: "14" }),
   /* @__PURE__ */ e("line", { x1: "9", y1: "8", x2: "15", y2: "8" }),
   /* @__PURE__ */ e("line", { x1: "17", y1: "16", x2: "23", y2: "16" })
-] }), J = ({
+] }), H = ({
   config: i,
-  render: w,
+  render: C,
   title: S = "Props",
   size: j = "md",
   defaultCollapsed: $ = !1,
@@ -25,12 +25,12 @@ const M = ({ size: i }) => /* @__PURE__ */ e(f, { size: i, children: /* @__PURE_
   className: E,
   testId: O
 }) => {
-  const p = _(() => D(i), [i]), [g, N] = z(p), [u, P] = z($), o = C(
-    (r, t) => {
-      N((s) => ({ ...s, [r]: t }));
+  const p = _(() => k(i), [i]), [f, N] = z(p), [u, P] = z($), o = w(
+    (r, b) => {
+      N((s) => ({ ...s, [r]: b }));
     },
     []
-  ), R = C(() => {
+  ), R = w(() => {
     N(p);
   }, [p]), l = F[j], v = Object.keys(i).length, h = n(
     "bear-w-full bear-rounded-md bear-border bear-border-zinc-700",
@@ -40,7 +40,7 @@ const M = ({ size: i }) => /* @__PURE__ */ e(f, { size: i, children: /* @__PURE_
     "bear-transition-colors",
     l.input
   );
-  return /* @__PURE__ */ b(
+  return /* @__PURE__ */ t(
     "div",
     {
       "data-testid": O,
@@ -50,7 +50,7 @@ const M = ({ size: i }) => /* @__PURE__ */ e(f, { size: i, children: /* @__PURE_
         E
       ),
       children: [
-        /* @__PURE__ */ b(
+        /* @__PURE__ */ t(
           "button",
           {
             type: "button",
@@ -63,11 +63,11 @@ const M = ({ size: i }) => /* @__PURE__ */ e(f, { size: i, children: /* @__PURE_
               l.text
             ),
             children: [
-              /* @__PURE__ */ e("span", { className: "bear-text-primary-500", children: u ? /* @__PURE__ */ e(T, { size: 12 }) : /* @__PURE__ */ e(M, { size: 12 }) }),
-              /* @__PURE__ */ e("span", { className: "bear-text-primary-500", children: /* @__PURE__ */ e(U, { size: 14 }) }),
+              /* @__PURE__ */ e("span", { className: "bear-text-primary-500", children: u ? /* @__PURE__ */ e(M, { size: 12 }) : /* @__PURE__ */ e(D, { size: 12 }) }),
+              /* @__PURE__ */ e("span", { className: "bear-text-primary-500", children: /* @__PURE__ */ e(T, { size: 14 }) }),
               /* @__PURE__ */ e("span", { className: "bear-font-semibold", children: S }),
-              /* @__PURE__ */ b("span", { className: "bear-ml-auto bear-flex bear-items-center bear-gap-2", children: [
-                /* @__PURE__ */ b("span", { className: "bear-text-[10px] bear-font-medium bear-text-zinc-500", children: [
+              /* @__PURE__ */ t("span", { className: "bear-ml-auto bear-flex bear-items-center bear-gap-2", children: [
+                /* @__PURE__ */ t("span", { className: "bear-text-[10px] bear-font-medium bear-text-zinc-500", children: [
                   v,
                   " ",
                   v === 1 ? "control" : "controls"
@@ -87,17 +87,17 @@ const M = ({ size: i }) => /* @__PURE__ */ e(f, { size: i, children: /* @__PURE_
             ]
           }
         ),
-        !u && /* @__PURE__ */ e("div", { className: n("bear-bg-zinc-900/50", l.padding), children: /* @__PURE__ */ e("div", { className: n("bear-grid", l.gap, I[L]), children: Object.entries(i).map(([r, t]) => {
-          const s = g[r], c = r.replace(/([A-Z])/g, " $1").replace(/^./, (a) => a.toUpperCase()).trim();
-          if (t.type === "boolean") {
+        !u && /* @__PURE__ */ e("div", { className: n("bear-bg-gray-50 dark:bear-bg-zinc-900/50", l.padding), children: /* @__PURE__ */ e("div", { className: n("bear-grid", l.gap, I[L]), children: Object.entries(i).map(([r, b]) => {
+          const s = f[r], c = r.replace(/([A-Z])/g, " $1").replace(/^./, (a) => a.toUpperCase()).trim();
+          if (b.type === "boolean") {
             const a = s === !0;
-            return /* @__PURE__ */ b(
+            return /* @__PURE__ */ t(
               "div",
               {
                 className: "bear-rounded-lg bear-border bear-border-zinc-700/60 bear-bg-zinc-800/30 bear-p-3",
                 children: [
                   /* @__PURE__ */ e("span", { className: n("bear-block bear-font-semibold bear-uppercase bear-tracking-wider bear-text-primary-500 bear-mb-2", l.label), children: m.boolean }),
-                  /* @__PURE__ */ b("label", { className: "bear-flex bear-items-center bear-gap-2.5 bear-cursor-pointer", children: [
+                  /* @__PURE__ */ t("label", { className: "bear-flex bear-items-center bear-gap-2.5 bear-cursor-pointer", children: [
                     /* @__PURE__ */ e(
                       "button",
                       {
@@ -127,13 +127,13 @@ const M = ({ size: i }) => /* @__PURE__ */ e(f, { size: i, children: /* @__PURE_
               r
             );
           }
-          if (t.type === "select" && t.options)
-            return /* @__PURE__ */ b(
+          if (b.type === "select" && b.options)
+            return /* @__PURE__ */ t(
               "div",
               {
                 className: "bear-rounded-lg bear-border bear-border-zinc-700/60 bear-bg-zinc-800/30 bear-p-3",
                 children: [
-                  /* @__PURE__ */ b("div", { className: "bear-flex bear-items-center bear-justify-between bear-mb-1.5", children: [
+                  /* @__PURE__ */ t("div", { className: "bear-flex bear-items-center bear-justify-between bear-mb-1.5", children: [
                     /* @__PURE__ */ e("label", { htmlFor: `pp-${r}`, className: n("bear-font-medium bear-text-zinc-300 bear-truncate", l.label), children: c }),
                     /* @__PURE__ */ e("span", { className: n("bear-font-semibold bear-uppercase bear-tracking-wider bear-text-primary-500", l.label), children: m.select })
                   ] }),
@@ -143,25 +143,25 @@ const M = ({ size: i }) => /* @__PURE__ */ e(f, { size: i, children: /* @__PURE_
                       id: `pp-${r}`,
                       value: String(s),
                       onChange: (a) => {
-                        const d = t.options.find((x) => String(x.value) === a.target.value);
+                        const d = b.options.find((x) => String(x.value) === a.target.value);
                         o(r, d ? d.value : a.target.value);
                       },
                       className: n(h, "bear-cursor-pointer bear-appearance-none"),
-                      children: t.options.map((a) => /* @__PURE__ */ e("option", { value: String(a.value), children: a.label }, String(a.value)))
+                      children: b.options.map((a) => /* @__PURE__ */ e("option", { value: String(a.value), children: a.label }, String(a.value)))
                     }
                   )
                 ]
               },
               r
             );
-          if (t.type === "number") {
-            const a = Number(s), d = Number.isNaN(a) ? t.default : a;
-            return /* @__PURE__ */ b(
+          if (b.type === "number") {
+            const a = Number(s), d = Number.isNaN(a) ? b.default : a;
+            return /* @__PURE__ */ t(
               "div",
               {
                 className: "bear-rounded-lg bear-border bear-border-zinc-700/60 bear-bg-zinc-800/30 bear-p-3",
                 children: [
-                  /* @__PURE__ */ b("div", { className: "bear-flex bear-items-center bear-justify-between bear-mb-1.5", children: [
+                  /* @__PURE__ */ t("div", { className: "bear-flex bear-items-center bear-justify-between bear-mb-1.5", children: [
                     /* @__PURE__ */ e("label", { htmlFor: `pp-${r}`, className: n("bear-font-medium bear-text-zinc-300 bear-truncate", l.label), children: c }),
                     /* @__PURE__ */ e("span", { className: n("bear-font-semibold bear-uppercase bear-tracking-wider bear-text-primary-500", l.label), children: m.number })
                   ] }),
@@ -171,12 +171,12 @@ const M = ({ size: i }) => /* @__PURE__ */ e(f, { size: i, children: /* @__PURE_
                       id: `pp-${r}`,
                       type: "number",
                       value: d,
-                      min: t.min,
-                      max: t.max,
-                      step: t.step,
+                      min: b.min,
+                      max: b.max,
+                      step: b.step,
                       onChange: (x) => {
                         const y = x.target.valueAsNumber;
-                        o(r, Number.isNaN(y) ? t.default : y);
+                        o(r, Number.isNaN(y) ? b.default : y);
                       },
                       className: h
                     }
@@ -186,12 +186,12 @@ const M = ({ size: i }) => /* @__PURE__ */ e(f, { size: i, children: /* @__PURE_
               r
             );
           }
-          return /* @__PURE__ */ b(
+          return /* @__PURE__ */ t(
             "div",
             {
               className: "bear-rounded-lg bear-border bear-border-zinc-700/60 bear-bg-zinc-800/30 bear-p-3",
               children: [
-                /* @__PURE__ */ b("div", { className: "bear-flex bear-items-center bear-justify-between bear-mb-1.5", children: [
+                /* @__PURE__ */ t("div", { className: "bear-flex bear-items-center bear-justify-between bear-mb-1.5", children: [
                   /* @__PURE__ */ e("label", { htmlFor: `pp-${r}`, className: n("bear-font-medium bear-text-zinc-300 bear-truncate", l.label), children: c }),
                   /* @__PURE__ */ e("span", { className: n("bear-font-semibold bear-uppercase bear-tracking-wider bear-text-primary-500", l.label), children: m.string })
                 ] }),
@@ -202,7 +202,7 @@ const M = ({ size: i }) => /* @__PURE__ */ e(f, { size: i, children: /* @__PURE_
                     type: "text",
                     value: String(s ?? ""),
                     onChange: (a) => o(r, a.target.value),
-                    placeholder: t.placeholder,
+                    placeholder: b.placeholder,
                     className: h
                   }
                 )
@@ -211,11 +211,11 @@ const M = ({ size: i }) => /* @__PURE__ */ e(f, { size: i, children: /* @__PURE_
             r
           );
         }) }) }),
-        /* @__PURE__ */ e("div", { className: "bear-border-t bear-border-zinc-700 bear-p-6 bear-bg-zinc-900 bear-flex bear-items-center bear-justify-center bear-min-h-[180px]", children: /* @__PURE__ */ e("div", { className: "bear-w-full", children: w(g) }) })
+        /* @__PURE__ */ e("div", { className: "bear-border-t bear-border-gray-200 dark:bear-border-zinc-700 bear-p-6 bear-bg-white dark:bear-bg-zinc-900 bear-flex bear-items-center bear-justify-center bear-min-h-[180px]", children: /* @__PURE__ */ e("div", { className: "bear-w-full", children: C(f) }) })
       ]
     }
   );
 };
 export {
-  J as PropsPlayground
+  H as PropsPlayground
 };

package/dist/components/Select/Select.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),t=require("react"),o=require("../../utils/cn.cjs"),S=require("../../hooks/useClickOutside.cjs");require("../../context/BearProvider.cjs");require("../../hooks/useBearComponent/useBearComponent.cjs");require("../FormControl/FormControl.context.cjs");const g=require("../Icon/index.cjs"),R=require("../Portal/Portal.cjs"),E={sm:"bear-h-8 bear-text-sm bear-px-3",md:"bear-h-10 bear-text-base bear-px-4",lg:"bear-h-12 bear-text-lg bear-px-5"},P=({options:x,value:s,onChange:n,placeholder:y="Select an option",label:m,error:i,disabled:d=!1,size:j="md",fullWidth:k=!1,className:p})=>{const[a,c]=t.useState(!1),[u,q]=t.useState({top:0,left:0,width:0}),f=t.useRef(null),v=t.useRef(null),w=!!i,l=x.find(e=>e.value===s),C=t.useCallback(()=>c(!1),[]);S.useClickOutsideMultiple([f,v],C,{enabled:a});const N=e=>{n==null||n(e),c(!1)};return t.useEffect(()=>{if(!a)return;const e=()=>{var h;const b=(h=f.current)==null?void 0:h.getBoundingClientRect();b&&q({top:b.bottom+4,left:Math.max(8,Math.min(b.left,window.innerWidth-b.width-8)),width:b.width})};return e(),window.addEventListener("resize",e),window.addEventListener("scroll",e,!0),()=>{window.removeEventListener("resize",e),window.removeEventListener("scroll",e,!0)}},[a]),r.jsxs("div",{ref:f,className:o.cn("bear-relative bear-flex bear-flex-col bear-gap-1.5",k&&"bear-w-full"),children:[m&&r.jsx("label",{className:"bear-text-sm bear-font-medium",style:{color:"var(--bear-text-secondary)"},children:m}),r.jsxs("button",{type:"button",disabled:d,onClick:()=>!d&&c(!a),className:o.cn("bear-flex bear-items-center bear-justify-between bear-w-full","bear-rounded-lg bear-border bear-text-left bear-outline-none bear-transition-all bear-duration-200","focus:bear-ring-2 focus:bear-ring-offset-2 focus:bear-ring-offset-[var(--bear-bg-primary)]",w?"bear-border-red-500 focus:bear-ring-red-500":"focus:bear-border-bear-500 focus:bear-ring-bear-500 dark:focus:bear-border-bear-500 dark:focus:bear-ring-bear-500",d&&"bear-opacity-50 bear-cursor-not-allowed",E[j],p),style:{backgroundColor:"var(--bear-bg-primary)",borderColor:w?void 0:"var(--bear-border-default)",color:l?"var(--bear-text-primary)":"var(--bear-text-muted)"},children:[r.jsx("span",{children:(l==null?void 0:l.label)||y}),r.jsx(g.ChevronDownIcon,{className:o.cn("bear-w-4 bear-h-4 bear-shrink-0 bear-transition-transform",a&&"bear-rotate-180"),style:{color:"var(--bear-text-muted)"}})]}),a&&r.jsx(R.Portal,{children:r.jsx("div",{ref:v,className:"bear-fixed bear-rounded-lg bear-border bear-shadow-lg bear-overflow-hidden",style:{backgroundColor:"var(--bear-bg-primary)",borderColor:"var(--bear-border-default)",top:u.top,left:u.left,width:u.width,zIndex:1e4},children:r.jsx("div",{className:"bear-max-h-60 bear-overflow-y-auto",children:x.map(e=>r.jsxs("button",{type:"button",disabled:e.disabled,onClick:()=>!e.disabled&&N(e.value),className:o.cn("bear-flex bear-items-center bear-justify-between bear-w-full bear-px-4 bear-py-2","bear-text-left bear-transition-colors",e.disabled&&"bear-cursor-not-allowed",e.value===s&&"bear-bg-bear-100 bear-text-bear-700 dark:bear-bg-bear-600/20 dark:bear-text-bear-300",!e.disabled&&e.value!==s&&"hover:bear-bg-[var(--bear-bg-tertiary)]"),style:e.disabled?{color:"var(--bear-text-muted)"}:e.value===s?void 0:{color:"var(--bear-text-secondary)"},children:[e.label,e.value===s&&r.jsx(g.CheckIcon,{className:"bear-w-4 bear-h-4 bear-shrink-0 bear-text-bear-600 dark:bear-text-bear-400"})]},e.value))})})}),i&&r.jsx("p",{className:"bear-text-sm bear-text-red-500",children:i})]})};exports.Select=P;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),b=require("react"),t=require("./Select.const.cjs"),A=require("../Icon/index.cjs"),Z=require("../Portal/Portal.cjs"),n=require("../../utils/cn.cjs"),G=require("../../utils/generateBearId.utils.cjs"),V=require("../../utils/useBearId.cjs"),W=require("../../hooks/useClickOutside.cjs");require("../../context/BearProvider.cjs");require("../../hooks/useBearComponent/useBearComponent.cjs");const H=require("../../hooks/useFormControl/useFormControl.cjs"),J=P=>{const{options:E,value:s,onChange:i,placeholder:x=t.SELECT_DEFAULT_PLACEHOLDER,label:u,error:S,disabled:D=!1,required:M=!1,size:C="md",fullWidth:T=!1,displayEmpty:m=!1,renderValue:O,native:_=!1,className:j,id:B,testId:N}=P,$=V.useBearId("Select"),f=G.resolveBearId(B,$),a=H.useFormControl(),[l,h]=b.useState(!1),[g,F]=b.useState({top:0,left:0,width:0}),w=b.useRef(null),q=b.useRef(null),d=D||!!(a!=null&&a.disabled),y=M||!!(a!=null&&a.required),o=!!S||!!(a!=null&&a.error),v=typeof S=="string"?S:void 0,p=E.find(e=>e.value===s),L=s===void 0||s==="",I=L||m&&L,U=b.useCallback(()=>h(!1),[]);W.useClickOutsideMultiple([w,q],U,{enabled:l&&!_&&!d});const z=e=>{i==null||i(e),h(!1)};b.useEffect(()=>{if(!l||_)return;const e=()=>{var k;const c=(k=w.current)==null?void 0:k.getBoundingClientRect();c&&F({top:c.bottom+t.SELECT_MENU_OFFSET_PX,left:Math.max(t.SELECT_MENU_EDGE_PAD_PX,Math.min(c.left,window.innerWidth-c.width-t.SELECT_MENU_EDGE_PAD_PX)),width:c.width})};return e(),window.addEventListener("resize",e),window.addEventListener("scroll",e,!0),()=>{window.removeEventListener("resize",e),window.removeEventListener("scroll",e,!0)}},[l,_]);const X=O&&!L?O(s):I||!p?x:p.label,R={backgroundColor:"var(--bear-bg-primary)",borderColor:o?void 0:"var(--bear-border-default)",color:p&&!I?"var(--bear-text-primary)":"var(--bear-text-muted)"};return _?r.jsxs("div",{id:f,"data-testid":N,className:n.cn(t.S_E_L_E_C_T_ROOT_CLASS,"bear-relative bear-flex bear-flex-col bear-gap-1.5",T&&"bear-w-full"),children:[u&&r.jsx("label",{htmlFor:`${f}-native`,className:"bear-text-sm bear-font-medium",style:{color:"var(--bear-text-secondary)"},children:u}),r.jsxs("select",{id:`${f}-native`,disabled:d,required:y,value:s??"",onChange:e=>i==null?void 0:i(e.target.value),className:n.cn(`${t.S_E_L_E_C_T_ROOT_CLASS}__native`,"bear-w-full bear-rounded-lg bear-border bear-outline-none bear-transition-all bear-duration-200","focus:bear-ring-2 focus:bear-ring-offset-2 focus:bear-ring-offset-[var(--bear-bg-primary)]",o?"bear-border-red-500 focus:bear-ring-red-500":"focus:bear-border-bear-500 focus:bear-ring-bear-500",d&&"bear-opacity-50 bear-cursor-not-allowed",t.SELECT_SIZE_CLASSES[C],j),style:R,"aria-invalid":o||void 0,"aria-required":y||void 0,"aria-describedby":a==null?void 0:a.helperId,children:[(m||x)&&r.jsx("option",{value:"",disabled:!m,children:x}),E.map(e=>r.jsx("option",{value:e.value,disabled:e.disabled,children:e.label},e.value))]}),v&&r.jsx("p",{className:"bear-text-sm bear-text-red-500",children:v})]}):r.jsxs("div",{ref:w,id:f,"data-testid":N,className:n.cn(t.S_E_L_E_C_T_ROOT_CLASS,"bear-relative bear-flex bear-flex-col bear-gap-1.5",T&&"bear-w-full"),children:[u&&r.jsx("label",{className:"bear-text-sm bear-font-medium",style:{color:"var(--bear-text-secondary)"},children:u}),r.jsxs("button",{type:"button",disabled:d,onClick:()=>!d&&h(!l),className:n.cn(`${t.S_E_L_E_C_T_ROOT_CLASS}__trigger`,"bear-flex bear-items-center bear-justify-between bear-w-full","bear-rounded-lg bear-border bear-text-left bear-outline-none bear-transition-all bear-duration-200","focus:bear-ring-2 focus:bear-ring-offset-2 focus:bear-ring-offset-[var(--bear-bg-primary)]",o?"bear-border-red-500 focus:bear-ring-red-500":"focus:bear-border-bear-500 focus:bear-ring-bear-500 dark:focus:bear-border-bear-500 dark:focus:bear-ring-bear-500",d&&"bear-opacity-50 bear-cursor-not-allowed",t.SELECT_SIZE_CLASSES[C],j),style:R,"aria-haspopup":"listbox","aria-expanded":l,"aria-invalid":o||void 0,"aria-required":y||void 0,"aria-describedby":a==null?void 0:a.helperId,children:[r.jsx("span",{className:`${t.S_E_L_E_C_T_ROOT_CLASS}__value`,children:X}),r.jsx(A.ChevronDownIcon,{className:n.cn("bear-w-4 bear-h-4 bear-shrink-0 bear-transition-transform",l&&"bear-rotate-180"),style:{color:"var(--bear-text-muted)"}})]}),l&&r.jsx(Z.Portal,{children:r.jsx("div",{ref:q,className:`${t.S_E_L_E_C_T_ROOT_CLASS}__menu bear-fixed bear-rounded-lg bear-border bear-shadow-lg bear-overflow-hidden`,style:{backgroundColor:"var(--bear-bg-primary)",borderColor:"var(--bear-border-default)",top:g.top,left:g.left,width:g.width,zIndex:t.SELECT_MENU_Z_INDEX},role:"listbox",children:r.jsx("div",{className:"bear-max-h-60 bear-overflow-y-auto",children:E.map(e=>r.jsxs("button",{type:"button",disabled:e.disabled,onClick:()=>!e.disabled&&z(e.value),role:"option","aria-selected":e.value===s,className:n.cn(`${t.S_E_L_E_C_T_ROOT_CLASS}__option`,"bear-flex bear-items-center bear-justify-between bear-w-full bear-px-4 bear-py-2","bear-text-left bear-transition-colors",e.disabled&&"bear-cursor-not-allowed",e.value===s&&"bear-bg-bear-100 bear-text-bear-700 dark:bear-bg-bear-600/20 dark:bear-text-bear-300",!e.disabled&&e.value!==s&&"hover:bear-bg-[var(--bear-bg-tertiary)]"),style:e.disabled?{color:"var(--bear-text-muted)"}:e.value===s?void 0:{color:"var(--bear-text-secondary)"},children:[e.label,e.value===s&&r.jsx(A.CheckIcon,{className:"bear-w-4 bear-h-4 bear-shrink-0 bear-text-bear-600 dark:bear-text-bear-400"})]},e.value))})})}),v&&r.jsx("p",{className:"bear-text-sm bear-text-red-500",children:v})]})};exports.Select=J;

package/dist/components/Select/Select.const.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const E="Bear-Select",_="Select an option",S=4,e=8,L=1e4,t={sm:"bear-h-8 bear-text-sm bear-px-3",md:"bear-h-10 bear-text-base bear-px-4",lg:"bear-h-12 bear-text-lg bear-px-5"};exports.SELECT_DEFAULT_PLACEHOLDER=_;exports.SELECT_MENU_EDGE_PAD_PX=e;exports.SELECT_MENU_OFFSET_PX=S;exports.SELECT_MENU_Z_INDEX=L;exports.SELECT_SIZE_CLASSES=t;exports.S_E_L_E_C_T_ROOT_CLASS=E;

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

@@ -1 +1,10 @@
 export declare const S_E_L_E_C_T_ROOT_CLASS = "Bear-Select";
+export declare const SELECT_DEFAULT_PLACEHOLDER = "Select an option";
+export declare const SELECT_MENU_OFFSET_PX = 4;
+export declare const SELECT_MENU_EDGE_PAD_PX = 8;
+export declare const SELECT_MENU_Z_INDEX = 10000;
+export declare const SELECT_SIZE_CLASSES: {
+    readonly sm: "bear-h-8 bear-text-sm bear-px-3";
+    readonly md: "bear-h-10 bear-text-base bear-px-4";
+    readonly lg: "bear-h-12 bear-text-lg bear-px-5";
+};

package/dist/components/Select/Select.const.js

@@ -0,0 +1,13 @@
+const E = "Bear-Select", _ = "Select an option", e = 4, t = 8, S = 1e4, a = {
+  sm: "bear-h-8 bear-text-sm bear-px-3",
+  md: "bear-h-10 bear-text-base bear-px-4",
+  lg: "bear-h-12 bear-text-lg bear-px-5"
+};
+export {
+  _ as SELECT_DEFAULT_PLACEHOLDER,
+  t as SELECT_MENU_EDGE_PAD_PX,
+  e as SELECT_MENU_OFFSET_PX,
+  S as SELECT_MENU_Z_INDEX,
+  a as SELECT_SIZE_CLASSES,
+  E as S_E_L_E_C_T_ROOT_CLASS
+};

package/dist/components/Select/Select.js

@@ -1,106 +1,191 @@
-import { jsxs as u, jsx as r } from "react/jsx-runtime";
-import { useState as p, useRef as g, useCallback as I, useEffect as L } from "react";
-import { cn as o } from "../../utils/cn.js";
-import { useClickOutsideMultiple as M } from "../../hooks/useClickOutside.js";
+import { jsxs as c, jsx as a } from "react/jsx-runtime";
+import { useState as B, useRef as R, useCallback as G, useEffect as H } from "react";
+import { SELECT_DEFAULT_PLACEHOLDER as J, SELECT_SIZE_CLASSES as $, S_E_L_E_C_T_ROOT_CLASS as s, SELECT_MENU_Z_INDEX as K, SELECT_MENU_EDGE_PAD_PX as q, SELECT_MENU_OFFSET_PX as Q } from "./Select.const.js";
+import { ChevronDownIcon as Y, CheckIcon as ee } from "../Icon/index.js";
+import { Portal as re } from "../Portal/Portal.js";
+import { cn as b } from "../../utils/cn.js";
+import { resolveBearId as ae } from "../../utils/generateBearId.utils.js";
+import { useBearId as te } from "../../utils/useBearId.js";
+import { useClickOutsideMultiple as le } from "../../hooks/useClickOutside.js";
 import "../../context/BearProvider.js";
 import "../../hooks/useBearComponent/useBearComponent.js";
-import "../FormControl/FormControl.context.js";
-import { ChevronDownIcon as P, CheckIcon as R } from "../Icon/index.js";
-import { Portal as S } from "../Portal/Portal.js";
-const B = {
-  sm: "bear-h-8 bear-text-sm bear-px-3",
-  md: "bear-h-10 bear-text-base bear-px-4",
-  lg: "bear-h-12 bear-text-lg bear-px-5"
-}, K = ({
-  options: m,
-  value: t,
-  onChange: s,
-  placeholder: y = "Select an option",
-  label: x,
-  error: n,
-  disabled: d = !1,
-  size: k = "md",
-  fullWidth: N = !1,
-  className: C
-}) => {
-  const [a, i] = p(!1), [c, E] = p({ top: 0, left: 0, width: 0 }), f = g(null), v = g(null), w = !!n, l = m.find((e) => e.value === t), j = I(() => i(!1), []);
-  M([f, v], j, { enabled: a });
-  const z = (e) => {
-    s == null || s(e), i(!1);
+import { useFormControl as se } from "../../hooks/useFormControl/useFormControl.js";
+const xe = (A) => {
+  const {
+    options: p,
+    value: t,
+    onChange: i,
+    placeholder: h = J,
+    label: u,
+    error: x,
+    disabled: F = !1,
+    required: j = !1,
+    size: L = "md",
+    fullWidth: k = !1,
+    displayEmpty: w = !1,
+    renderValue: I,
+    native: f = !1,
+    className: C,
+    id: z,
+    testId: P
+  } = A, U = te("Select"), m = ae(z, U), r = se(), [l, g] = B(!1), [y, X] = B({
+    top: 0,
+    left: 0,
+    width: 0
+  }), E = R(null), T = R(null), d = F || !!(r != null && r.disabled), _ = j || !!(r != null && r.required), o = !!x || !!(r != null && r.error), v = typeof x == "string" ? x : void 0, N = p.find((e) => e.value === t), S = t === void 0 || t === "", D = S || w && S, V = G(() => g(!1), []);
+  le([E, T], V, {
+    enabled: l && !f && !d
+  });
+  const W = (e) => {
+    i == null || i(e), g(!1);
   };
-  return L(() => {
-    if (!a) return;
+  H(() => {
+    if (!l || f) return;
     const e = () => {
-      var h;
-      const b = (h = f.current) == null ? void 0 : h.getBoundingClientRect();
-      b && E({
-        top: b.bottom + 4,
-        left: Math.max(8, Math.min(b.left, window.innerWidth - b.width - 8)),
-        width: b.width
+      var O;
+      const n = (O = E.current) == null ? void 0 : O.getBoundingClientRect();
+      n && X({
+        top: n.bottom + Q,
+        left: Math.max(
+          q,
+          Math.min(n.left, window.innerWidth - n.width - q)
+        ),
+        width: n.width
       });
     };
     return e(), window.addEventListener("resize", e), window.addEventListener("scroll", e, !0), () => {
       window.removeEventListener("resize", e), window.removeEventListener("scroll", e, !0);
     };
-  }, [a]), /* @__PURE__ */ u(
+  }, [l, f]);
+  const Z = I && !S ? I(t) : D || !N ? h : N.label, M = {
+    backgroundColor: "var(--bear-bg-primary)",
+    borderColor: o ? void 0 : "var(--bear-border-default)",
+    color: N && !D ? "var(--bear-text-primary)" : "var(--bear-text-muted)"
+  };
+  return f ? /* @__PURE__ */ c(
     "div",
     {
-      ref: f,
-      className: o("bear-relative bear-flex bear-flex-col bear-gap-1.5", N && "bear-w-full"),
+      id: m,
+      "data-testid": P,
+      className: b(
+        s,
+        "bear-relative bear-flex bear-flex-col bear-gap-1.5",
+        k && "bear-w-full"
+      ),
       children: [
-        x && /* @__PURE__ */ r("label", { className: "bear-text-sm bear-font-medium", style: { color: "var(--bear-text-secondary)" }, children: x }),
-        /* @__PURE__ */ u(
+        u && /* @__PURE__ */ a(
+          "label",
+          {
+            htmlFor: `${m}-native`,
+            className: "bear-text-sm bear-font-medium",
+            style: { color: "var(--bear-text-secondary)" },
+            children: u
+          }
+        ),
+        /* @__PURE__ */ c(
+          "select",
+          {
+            id: `${m}-native`,
+            disabled: d,
+            required: _,
+            value: t ?? "",
+            onChange: (e) => i == null ? void 0 : i(e.target.value),
+            className: b(
+              `${s}__native`,
+              "bear-w-full bear-rounded-lg bear-border bear-outline-none bear-transition-all bear-duration-200",
+              "focus:bear-ring-2 focus:bear-ring-offset-2 focus:bear-ring-offset-[var(--bear-bg-primary)]",
+              o ? "bear-border-red-500 focus:bear-ring-red-500" : "focus:bear-border-bear-500 focus:bear-ring-bear-500",
+              d && "bear-opacity-50 bear-cursor-not-allowed",
+              $[L],
+              C
+            ),
+            style: M,
+            "aria-invalid": o || void 0,
+            "aria-required": _ || void 0,
+            "aria-describedby": r == null ? void 0 : r.helperId,
+            children: [
+              (w || h) && /* @__PURE__ */ a("option", { value: "", disabled: !w, children: h }),
+              p.map((e) => /* @__PURE__ */ a("option", { value: e.value, disabled: e.disabled, children: e.label }, e.value))
+            ]
+          }
+        ),
+        v && /* @__PURE__ */ a("p", { className: "bear-text-sm bear-text-red-500", children: v })
+      ]
+    }
+  ) : /* @__PURE__ */ c(
+    "div",
+    {
+      ref: E,
+      id: m,
+      "data-testid": P,
+      className: b(
+        s,
+        "bear-relative bear-flex bear-flex-col bear-gap-1.5",
+        k && "bear-w-full"
+      ),
+      children: [
+        u && /* @__PURE__ */ a("label", { className: "bear-text-sm bear-font-medium", style: { color: "var(--bear-text-secondary)" }, children: u }),
+        /* @__PURE__ */ c(
           "button",
           {
             type: "button",
             disabled: d,
-            onClick: () => !d && i(!a),
-            className: o(
+            onClick: () => !d && g(!l),
+            className: b(
+              `${s}__trigger`,
               "bear-flex bear-items-center bear-justify-between bear-w-full",
               "bear-rounded-lg bear-border bear-text-left bear-outline-none bear-transition-all bear-duration-200",
               "focus:bear-ring-2 focus:bear-ring-offset-2 focus:bear-ring-offset-[var(--bear-bg-primary)]",
-              w ? "bear-border-red-500 focus:bear-ring-red-500" : "focus:bear-border-bear-500 focus:bear-ring-bear-500 dark:focus:bear-border-bear-500 dark:focus:bear-ring-bear-500",
+              o ? "bear-border-red-500 focus:bear-ring-red-500" : "focus:bear-border-bear-500 focus:bear-ring-bear-500 dark:focus:bear-border-bear-500 dark:focus:bear-ring-bear-500",
               d && "bear-opacity-50 bear-cursor-not-allowed",
-              B[k],
+              $[L],
               C
             ),
-            style: {
-              backgroundColor: "var(--bear-bg-primary)",
-              borderColor: w ? void 0 : "var(--bear-border-default)",
-              color: l ? "var(--bear-text-primary)" : "var(--bear-text-muted)"
-            },
+            style: M,
+            "aria-haspopup": "listbox",
+            "aria-expanded": l,
+            "aria-invalid": o || void 0,
+            "aria-required": _ || void 0,
+            "aria-describedby": r == null ? void 0 : r.helperId,
             children: [
-              /* @__PURE__ */ r("span", { children: (l == null ? void 0 : l.label) || y }),
-              /* @__PURE__ */ r(
-                P,
+              /* @__PURE__ */ a("span", { className: `${s}__value`, children: Z }),
+              /* @__PURE__ */ a(
+                Y,
                 {
-                  className: o("bear-w-4 bear-h-4 bear-shrink-0 bear-transition-transform", a && "bear-rotate-180"),
+                  className: b(
+                    "bear-w-4 bear-h-4 bear-shrink-0 bear-transition-transform",
+                    l && "bear-rotate-180"
+                  ),
                   style: { color: "var(--bear-text-muted)" }
                 }
               )
             ]
           }
         ),
-        a && /* @__PURE__ */ r(S, { children: /* @__PURE__ */ r(
+        l && /* @__PURE__ */ a(re, { children: /* @__PURE__ */ a(
           "div",
           {
-            ref: v,
-            className: "bear-fixed bear-rounded-lg bear-border bear-shadow-lg bear-overflow-hidden",
+            ref: T,
+            className: `${s}__menu bear-fixed bear-rounded-lg bear-border bear-shadow-lg bear-overflow-hidden`,
             style: {
               backgroundColor: "var(--bear-bg-primary)",
               borderColor: "var(--bear-border-default)",
-              top: c.top,
-              left: c.left,
-              width: c.width,
-              zIndex: 1e4
+              top: y.top,
+              left: y.left,
+              width: y.width,
+              zIndex: K
             },
-            children: /* @__PURE__ */ r("div", { className: "bear-max-h-60 bear-overflow-y-auto", children: m.map((e) => /* @__PURE__ */ u(
+            role: "listbox",
+            children: /* @__PURE__ */ a("div", { className: "bear-max-h-60 bear-overflow-y-auto", children: p.map((e) => /* @__PURE__ */ c(
               "button",
               {
                 type: "button",
                 disabled: e.disabled,
-                onClick: () => !e.disabled && z(e.value),
-                className: o(
+                onClick: () => !e.disabled && W(e.value),
+                role: "option",
+                "aria-selected": e.value === t,
+                className: b(
+                  `${s}__option`,
                   "bear-flex bear-items-center bear-justify-between bear-w-full bear-px-4 bear-py-2",
                   "bear-text-left bear-transition-colors",
                   e.disabled && "bear-cursor-not-allowed",
@@ -110,18 +195,18 @@ const B = {
                 style: e.disabled ? { color: "var(--bear-text-muted)" } : e.value === t ? void 0 : { color: "var(--bear-text-secondary)" },
                 children: [
                   e.label,
-                  e.value === t && /* @__PURE__ */ r(R, { className: "bear-w-4 bear-h-4 bear-shrink-0 bear-text-bear-600 dark:bear-text-bear-400" })
+                  e.value === t && /* @__PURE__ */ a(ee, { className: "bear-w-4 bear-h-4 bear-shrink-0 bear-text-bear-600 dark:bear-text-bear-400" })
                 ]
               },
               e.value
             )) })
           }
         ) }),
-        n && /* @__PURE__ */ r("p", { className: "bear-text-sm bear-text-red-500", children: n })
+        v && /* @__PURE__ */ a("p", { className: "bear-text-sm bear-text-red-500", children: v })
       ]
     }
   );
 };
 export {
-  K as Select
+  xe as Select
 };

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

@@ -18,9 +18,11 @@ export interface SelectProps {
     /** Select label */
     label?: string;
     /** Error message */
-    error?: string;
+    error?: string | boolean;
     /** Whether select is disabled */
     disabled?: boolean;
+    /** Whether the field is required */
+    required?: boolean;
     /** Select size */
     size?: 'sm' | 'md' | 'lg';
     /** Whether select is full width */

package/dist/components/Snackbar/Snackbar.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),E=require("react-dom"),T=require("../../utils/cn.cjs");require("react");const K=require("../../utils/generateBearId.utils.cjs"),w=require("../../utils/useBearId.cjs"),z=require("../Paper/Paper.cjs"),d=require("../Flex/Flex.cjs"),p=require("../Typography/Typography.cjs"),L=require("../Progress/Progress.cjs"),U=require("../CloseButton/CloseButton.cjs"),s=require("./Snackbar.const.cjs"),X=require("./hooks/useSnackbar.cjs"),Z=(c,a,o,t)=>{const e={zIndex:s.SNACKBAR_Z_INDEX};return c==="top"?e.top=t:e.bottom=t,a==="left"?(e.left=o,e.right="auto"):a==="right"?(e.right=o,e.left="auto"):(e.left="50%",e.right="auto",e.transform="translateX(-50%)"),e},H=c=>{const{open:a,message:o,description:t,action:e,autoHideDuration:f=s.SNACKBAR_DEFAULT_AUTO_HIDE_MS,onClose:i,anchorOrigin:u={vertical:"bottom",horizontal:"center"},offsetX:h=s.SNACKBAR_DEFAULT_OFFSET_X,offsetY:A=s.SNACKBAR_DEFAULT_OFFSET_Y,size:B="md",progress:x=null,progressPosition:b="bottom",progressColor:C="default",countdownProgress:N=!1,showCloseButton:k,closeOnClickOutside:y,container:I,id:O,testId:q,className:D}=c,F=w.useBearId("Snackbar"),R=K.resolveBearId(O,F),_=I??(typeof document<"u"?document.body:null),n=!!i,j=k??n,S=y??n,{surfaceRef:v,progressValue:g}=X.useSnackbar({open:a,autoHideDuration:f,onClose:i,countdownProgress:N,staticProgress:x,closeOnClickOutside:S});if(!a||!_)return null;const l=typeof g=="number",m=l?r.jsx(L.Progress,{value:g,size:"sm",color:C,className:"Bear-Snackbar__progress"}):null,P=r.jsxs(r.Fragment,{children:[S&&n&&r.jsx("div",{className:"Bear-Snackbar__backdrop bear-fixed bear-inset-0",style:{zIndex:s.SNACKBAR_BACKDROP_Z_INDEX},"aria-hidden":!0}),r.jsxs(z.Paper,{ref:v,id:R,"data-testid":q,role:"status","aria-live":"polite",elevation:4,rounded:"lg",padding:"none",background:"transparent",className:T.cn(s.SNACKBAR_ROOT_CLASS,s.SNACKBAR_SURFACE_CLASSES,"bear-fixed bear-flex bear-flex-col bear-overflow-hidden","bear-border bear-border-[var(--bear-border-default)]",s.SNACKBAR_SIZE_PADDING[B],D),style:Z(u.vertical,u.horizontal,h,A),children:[l&&b==="top"&&m,r.jsxs(d.Flex,{className:"Bear-Snackbar__content bear-w-full",align:"center",gap:3,children:[r.jsxs(d.Flex,{direction:"column",className:"Bear-Snackbar__text bear-flex-1 bear-min-w-0",gap:1,children:[o&&r.jsx(p.Typography,{variant:"body2",className:"Bear-Snackbar__message",children:o}),t&&r.jsx(p.Typography,{variant:"caption",color:"muted",className:"Bear-Snackbar__description",children:t})]}),e&&r.jsx(d.Flex,{className:"Bear-Snackbar__action bear-shrink-0",align:"center",children:e}),j&&n&&r.jsx(U.CloseButton,{size:"sm",onClick:i,"aria-label":"Dismiss notification",className:"Bear-Snackbar__close bear-shrink-0"})]}),l&&b==="bottom"&&m]})]});return E.createPortal(P,_)};exports.Snackbar=H;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),K=require("react-dom"),w=require("../../utils/cn.cjs");require("react");const z=require("../../utils/generateBearId.utils.cjs"),L=require("../../utils/useBearId.cjs"),U=require("../../utils/liveRegion.utils.cjs"),X=require("../Paper/Paper.cjs"),d=require("../Flex/Flex.cjs"),B=require("../Typography/Typography.cjs"),Z=require("../Progress/Progress.cjs"),H=require("../CloseButton/CloseButton.cjs"),s=require("./Snackbar.const.cjs"),M=require("./hooks/useSnackbar.cjs"),G=(i,a,o,t)=>{const e={zIndex:s.SNACKBAR_Z_INDEX};return i==="top"?e.top=t:e.bottom=t,a==="left"?(e.left=o,e.right="auto"):a==="right"?(e.right=o,e.left="auto"):(e.left="50%",e.right="auto",e.transform="translateX(-50%)"),e},V=i=>{const{open:a,message:o,description:t,severity:e="default",action:u,autoHideDuration:h=s.SNACKBAR_DEFAULT_AUTO_HIDE_MS,onClose:c,anchorOrigin:b={vertical:"bottom",horizontal:"center"},offsetX:A=s.SNACKBAR_DEFAULT_OFFSET_X,offsetY:x=s.SNACKBAR_DEFAULT_OFFSET_Y,size:C="md",progress:N=null,progressPosition:_="bottom",progressColor:k="default",countdownProgress:v=!1,showCloseButton:y,closeOnClickOutside:R,container:q,id:I,testId:O,className:D}=i,F=L.useBearId("Snackbar"),P=z.resolveBearId(I,F),g=q??(typeof document<"u"?document.body:null),n=!!c,j=y??n,S=R??n,{surfaceRef:E,progressValue:m}=M.useSnackbar({open:a,autoHideDuration:h,onClose:c,countdownProgress:v,staticProgress:N,closeOnClickOutside:S});if(!a||!g)return null;const p=U.getBearLiveRegionProps(e),l=typeof m=="number",f=l?r.jsx(Z.Progress,{value:m,size:"sm",color:k,className:"Bear-Snackbar__progress"}):null,T=r.jsxs(r.Fragment,{children:[S&&n&&r.jsx("div",{className:"Bear-Snackbar__backdrop bear-fixed bear-inset-0",style:{zIndex:s.SNACKBAR_BACKDROP_Z_INDEX},"aria-hidden":!0}),r.jsxs(X.Paper,{ref:E,id:P,"data-testid":O,role:p.role,"aria-live":p["aria-live"],elevation:4,rounded:"lg",padding:"none",background:"transparent",className:w.cn(s.SNACKBAR_ROOT_CLASS,s.SNACKBAR_SURFACE_CLASSES,"bear-fixed bear-flex bear-flex-col bear-overflow-hidden","bear-border bear-border-[var(--bear-border-default)]",s.SNACKBAR_SIZE_PADDING[C],D),style:G(b.vertical,b.horizontal,A,x),children:[l&&_==="top"&&f,r.jsxs(d.Flex,{className:"Bear-Snackbar__content bear-w-full",align:"center",gap:3,children:[r.jsxs(d.Flex,{direction:"column",className:"Bear-Snackbar__text bear-flex-1 bear-min-w-0",gap:1,children:[o&&r.jsx(B.Typography,{variant:"body2",className:"Bear-Snackbar__message",children:o}),t&&r.jsx(B.Typography,{variant:"caption",color:"muted",className:"Bear-Snackbar__description",children:t})]}),u&&r.jsx(d.Flex,{className:"Bear-Snackbar__action bear-shrink-0",align:"center",children:u}),j&&n&&r.jsx(H.CloseButton,{size:"sm",onClick:c,"aria-label":"Dismiss notification",className:"Bear-Snackbar__close bear-shrink-0"})]}),l&&_==="bottom"&&f]})]});return K.createPortal(T,g)};exports.Snackbar=V;