@forgedevstack/bear 1.3.3 → 1.3.4

package/dist/components/Popover/Popover.const.js

@@ -0,0 +1,29 @@
+import { EIGHT as r, ELEVEN_THOUSAND as t } from "../../constants/numbers.const.js";
+const e = t, n = r, o = {
+  scale: "animate-scale-in",
+  fade: "animate-fade-in",
+  "slide-down": "animate-grow-up",
+  fold: "animate-alert-dialog-in",
+  none: ""
+}, b = "bottom", s = "top", E = "left", T = "right", l = "start", _ = "end", A = "translateX(-50%)", N = "translateX(-100%)", R = "translateY(-50%)", c = "translateY(-100%)", d = {
+  top: "bear-top-full bear-left-1/2 -bear-translate-x-1/2 bear-border-t-zinc-700 bear-border-x-transparent bear-border-b-transparent",
+  bottom: "bear-bottom-full bear-left-1/2 -bear-translate-x-1/2 bear-border-b-zinc-700 bear-border-x-transparent bear-border-t-transparent",
+  left: "bear-left-full bear-top-1/2 -bear-translate-y-1/2 bear-border-l-zinc-700 bear-border-y-transparent bear-border-r-transparent",
+  right: "bear-right-full bear-top-1/2 -bear-translate-y-1/2 bear-border-r-zinc-700 bear-border-y-transparent bear-border-l-transparent"
+};
+export {
+  _ as ALIGN_END,
+  l as ALIGN_START,
+  b as PLACEMENT_BOTTOM,
+  E as PLACEMENT_LEFT,
+  T as PLACEMENT_RIGHT,
+  s as PLACEMENT_TOP,
+  d as POPOVER_ARROW_STYLES,
+  n as POPOVER_DEFAULT_OFFSET,
+  o as POPOVER_EFFECT_CLASS_MAP,
+  e as POPOVER_Z_INDEX,
+  A as TRANSFORM_TRANSLATE_X_CENTER,
+  N as TRANSFORM_TRANSLATE_X_END,
+  R as TRANSFORM_TRANSLATE_Y_CENTER,
+  c as TRANSFORM_TRANSLATE_Y_END
+};

package/dist/components/Popover/Popover.js

@@ -1,98 +1,102 @@
-import { jsxs as g, jsx as x } from "react/jsx-runtime";
-import { useState as L, useRef as k, useCallback as B, useEffect as u } from "react";
-import { createPortal as T } from "react-dom";
-import { cn as c } from "../../utils/cn.js";
-const W = 11e3;
-function Z(b, t, a) {
-  const e = { position: "fixed", zIndex: W }, s = b.split("-")[0], n = b.includes("start"), o = b.includes("end");
-  return s === "bottom" ? (e.top = t.bottom + a, n ? e.left = t.left : o ? e.left = t.right : e.left = t.left + t.width / 2) : s === "top" ? (e.bottom = window.innerHeight - t.top + a, n ? e.left = t.left : o ? e.left = t.right : e.left = t.left + t.width / 2) : s === "left" ? (e.right = window.innerWidth - t.left + a, n ? e.top = t.top : o ? e.bottom = window.innerHeight - t.bottom : e.top = t.top + t.height / 2) : (e.left = t.right + a, n ? e.top = t.top : o ? e.bottom = window.innerHeight - t.bottom : e.top = t.top + t.height / 2), s === "bottom" || s === "top" ? !n && !o ? e.transform = "translateX(-50%)" : o && (e.transform = "translateX(-100%)") : !n && !o ? e.transform = "translateY(-50%)" : o && (e.transform = "translateY(-100%)"), e;
+import { jsxs as p, jsx as w } from "react/jsx-runtime";
+import { useState as A, useRef as h, useCallback as P, useEffect as m } from "react";
+import { createPortal as j } from "react-dom";
+import { cn as v } from "../../utils/cn.js";
+import { TWO as S } from "../../constants/numbers.const.js";
+import { resolveOverlayEffects as B } from "../../hooks/useFixedAnchorPosition/useFixedAnchorPosition.utils.js";
+import { PLACEMENT_BOTTOM as T, POPOVER_DEFAULT_OFFSET as K, POPOVER_ARROW_STYLES as U, POPOVER_EFFECT_CLASS_MAP as O, ALIGN_START as Z, ALIGN_END as q, PLACEMENT_TOP as M, TRANSFORM_TRANSLATE_X_CENTER as J, TRANSFORM_TRANSLATE_X_END as Q, PLACEMENT_RIGHT as $, PLACEMENT_LEFT as ee, TRANSFORM_TRANSLATE_Y_CENTER as te, TRANSFORM_TRANSLATE_Y_END as oe, POPOVER_Z_INDEX as ne } from "./Popover.const.js";
+function re(l, e, s) {
+  const t = { position: "fixed", zIndex: ne }, [n] = l.split("-"), r = l.includes(Z), i = l.includes(q);
+  return n === T || n === M ? (t.top = n === T ? e.bottom + s : void 0, t.bottom = n === M ? window.innerHeight - e.top + s : void 0, t.left = r ? e.left : i ? e.right : e.left + e.width / S, t.transform = !r && !i ? J : i ? Q : void 0) : (t.left = n === $ ? e.right + s : void 0, t.right = n === ee ? window.innerWidth - e.left + s : void 0, t.bottom = i ? window.innerHeight - e.bottom : void 0, t.top = i ? void 0 : r ? e.top : e.top + e.height / S, t.transform = !r && !i ? te : i ? oe : void 0), t;
 }
-const F = ({
-  children: b,
-  content: t,
-  placement: a = "bottom",
-  trigger: e = "click",
-  open: s,
-  onOpenChange: n,
-  className: o,
-  contentClassName: z,
-  arrow: N = !0,
-  closeOnClickOutside: p = !0,
-  closeOnEscape: m = !0,
-  offset: w = 8
+const fe = ({
+  children: l,
+  content: e,
+  placement: s = T,
+  trigger: t = "click",
+  open: n,
+  onOpenChange: r,
+  className: i,
+  contentClassName: R,
+  arrow: g = !0,
+  closeOnClickOutside: b = !0,
+  closeOnEscape: _ = !0,
+  offset: L = K,
+  openEffect: C,
+  closeEffect: F,
+  effect: k
 }) => {
-  const [I, M] = L(!1), [P, R] = L({}), d = k(null), h = k(null), i = s !== void 0 ? s : I, l = B((r) => {
-    M(r), n == null || n(r);
-  }, [n]);
-  u(() => {
-    if (!i || !d.current) return;
-    const r = () => {
-      if (!d.current) return;
-      const f = d.current.getBoundingClientRect();
-      R(Z(a, f, w));
-    };
-    return r(), window.addEventListener("resize", r), window.addEventListener("scroll", r, !0), () => {
-      window.removeEventListener("resize", r), window.removeEventListener("scroll", r, !0);
-    };
-  }, [i, a, w]), u(() => {
-    if (!p) return;
-    const r = (f) => {
-      var E, y;
-      const v = f.target;
-      (E = d.current) != null && E.contains(v) || (y = h.current) != null && y.contains(v) || l(!1);
+  const [y, D] = A(!1), [I, x] = A({}), E = h(null), f = h(null), d = n !== void 0 ? n : y, a = P((o) => {
+    D(o), r == null || r(o);
+  }, [r]), u = P(() => {
+    if (!E.current || !f.current) return;
+    const o = E.current.firstElementChild;
+    if (!o) return;
+    const c = o.getBoundingClientRect();
+    x(re(s, c, L));
+  }, [s, L]);
+  m(() => {
+    if (d) {
+      u();
+      const o = () => u(), c = () => u();
+      return window.addEventListener("resize", o), window.addEventListener("scroll", c, !0), () => {
+        window.removeEventListener("resize", o), window.removeEventListener("scroll", c, !0);
+      };
+    }
+  }, [d, u]), m(() => {
+    if (!d || !b) return;
+    const o = (c) => {
+      const N = c.target;
+      E.current && !E.current.contains(N) && f.current && !f.current.contains(N) && a(!1);
     };
-    return i && document.addEventListener("mousedown", r), () => document.removeEventListener("mousedown", r);
-  }, [i, p, l]), u(() => {
-    if (!m) return;
-    const r = (f) => {
-      f.key === "Escape" && l(!1);
+    return document.addEventListener("mousedown", o), () => document.removeEventListener("mousedown", o);
+  }, [d, b, a]), m(() => {
+    if (!d || !_) return;
+    const o = (c) => {
+      c.key === "Escape" && a(!1);
     };
-    return i && document.addEventListener("keydown", r), () => document.removeEventListener("keydown", r);
-  }, [i, m, l]);
-  const S = () => {
-    e === "click" && l(!i);
-  }, H = () => {
-    e === "hover" && l(!0);
-  }, X = () => {
-    e === "hover" && l(!1);
-  }, j = {
-    top: "bear-top-full bear-left-1/2 -bear-translate-x-1/2 bear-border-t-zinc-700 bear-border-x-transparent bear-border-b-transparent",
-    bottom: "bear-bottom-full bear-left-1/2 -bear-translate-x-1/2 bear-border-b-zinc-700 bear-border-x-transparent bear-border-t-transparent",
-    left: "bear-left-full bear-top-1/2 -bear-translate-y-1/2 bear-border-l-zinc-700 bear-border-y-transparent bear-border-r-transparent",
-    right: "bear-right-full bear-top-1/2 -bear-translate-y-1/2 bear-border-r-zinc-700 bear-border-y-transparent bear-border-l-transparent"
-  }, D = a.split("-")[0], Y = i && typeof document < "u" && T(
-    /* @__PURE__ */ g(
+    return document.addEventListener("keydown", o), () => document.removeEventListener("keydown", o);
+  }, [d, _, a]);
+  const z = () => {
+    t === "click" && a(!d);
+  }, V = () => {
+    t === "hover" && a(!0);
+  }, G = () => {
+    t === "hover" && a(!1);
+  }, H = s.split("-")[0], { openEffect: W } = B({ openEffect: C, closeEffect: F, effect: k }, "fade"), X = O[W] ?? O.fade, Y = d && typeof document < "u" && j(
+    /* @__PURE__ */ p(
       "div",
       {
-        ref: h,
+        ref: f,
         "data-bear-popover": !0,
-        className: c(
+        className: v(
           "bear-bg-zinc-800 bear-border bear-border-zinc-700 bear-rounded-lg bear-shadow-xl bear-p-3",
-          z
+          X,
+          R
         ),
-        style: P,
+        style: I,
         children: [
-          t,
-          N && /* @__PURE__ */ x("div", { className: c("bear-absolute bear-w-0 bear-h-0 bear-border-8", j[D]) })
+          e,
+          g && /* @__PURE__ */ w("div", { className: v("bear-absolute bear-w-0 bear-h-0 bear-border-8", U[H]) })
         ]
       }
     ),
     document.body
   );
-  return /* @__PURE__ */ g(
+  return /* @__PURE__ */ p(
     "div",
     {
-      ref: d,
-      className: c("bear-relative bear-inline-block", o),
-      onMouseEnter: H,
-      onMouseLeave: X,
+      ref: E,
+      className: v("bear-relative bear-inline-block", i),
+      onMouseEnter: V,
+      onMouseLeave: G,
       children: [
-        /* @__PURE__ */ x("div", { onClick: S, className: "bear-cursor-pointer", children: b }),
+        /* @__PURE__ */ w("div", { onClick: z, className: "bear-cursor-pointer", children: l }),
         Y
       ]
     }
   );
 };
 export {
-  F as Popover
+  fe as Popover
 };

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

@@ -1,4 +1,5 @@
 import { ReactNode } from 'react';
+import { OverlayMotionEffect, OverlayEffectConfig } from '../../hooks/useFixedAnchorPosition';
 export type PopoverPlacement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end';
 export interface PopoverProps {
     testId?: string;
@@ -15,4 +16,10 @@ export interface PopoverProps {
     closeOnClickOutside?: boolean;
     closeOnEscape?: boolean;
     offset?: number;
+    /** Transition effect when opening */
+    openEffect?: OverlayMotionEffect;
+    /** Transition effect when closing */
+    closeEffect?: OverlayMotionEffect;
+    /** Config for open and close transition effects */
+    effect?: OverlayEffectConfig;
 }

package/dist/components/Select/Select.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),f=require("react"),s=require("./Select.const.cjs"),z=require("./helpers/SelectCheckSvg.cjs"),V=require("./helpers/SelectChevronDownSvg.cjs"),W=require("../OverlayPortal/OverlayPortal.cjs"),d=require("../../utils/cn.cjs"),X=require("../../utils/generateBearId.utils.cjs"),H=require("../../utils/useBearId.cjs"),G=require("../../hooks/useClickOutside.cjs");require("../../context/BearProvider.cjs");require("../../hooks/useBearComponent/useBearComponent.cjs");const J=require("../../hooks/useFixedAnchorPosition/useFixedAnchorPosition.cjs"),K=require("../../hooks/useFixedAnchorPosition/useFixedAnchorPosition.utils.cjs"),Q=require("../../hooks/useFormControl/useFormControl.cjs"),Y=C=>{const{options:v,value:l,onChange:t,placeholder:S=s.SELECT_DEFAULT_PLACEHOLDER,label:c,error:x,disabled:k=!1,required:A=!1,size:O="md",fullWidth:L=!1,displayEmpty:E=!1,renderValue:T,native:n=!1,className:q,id:I,testId:j}=C,{openEffect:P,closeEffect:F}=K.resolveOverlayEffects(C),B=H.useBearId("Select"),u=X.resolveBearId(I,B),a=Q.useFormControl(),[b,h]=f.useState(!1),y=f.useRef(null),w=f.useRef(null),{style:D,ready:$}=J.useFixedAnchorPosition({anchorRef:y,open:b&&!n,offsetPx:s.SELECT_MENU_OFFSET_PX,matchWidth:!0}),i=k||!!(a!=null&&a.disabled),m=A||!!(a!=null&&a.required),o=!!x||!!(a!=null&&a.error),_=typeof x=="string"?x:void 0,g=v.find(e=>e.value===l),p=l===void 0||l==="",N=p||E&&p,M=f.useCallback(()=>h(!1),[]);G.useClickOutsideMultiple([y,w],M,{enabled:b&&!n&&!i});const U=e=>{t==null||t(e),h(!1)},Z=T&&!p?T(l):N||!g?S:g.label,R={backgroundColor:"var(--bear-bg-primary)",borderColor:o?void 0:"var(--bear-border-default)",color:g&&!N?"var(--bear-text-primary)":"var(--bear-text-muted)"};return n?r.jsxs("div",{id:u,"data-testid":j,className:d.cn(s.S_E_L_E_C_T_ROOT_CLASS,"bear-relative bear-flex bear-flex-col bear-gap-1.5",L&&"bear-w-full"),children:[c&&r.jsx("label",{htmlFor:`${u}-native`,className:"bear-text-sm bear-font-medium",style:{color:"var(--bear-text-secondary)"},children:c}),r.jsxs("select",{id:`${u}-native`,disabled:i,required:m,value:l??"",onChange:e=>t==null?void 0:t(e.target.value),className:d.cn(`${s.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",i&&"bear-opacity-50 bear-cursor-not-allowed",s.SELECT_SIZE_CLASSES[O],q),style:R,"aria-invalid":o||void 0,"aria-required":m||void 0,"aria-describedby":a==null?void 0:a.helperId,children:[(E||S)&&r.jsx("option",{value:"",disabled:!E,children:S}),v.map(e=>r.jsx("option",{value:e.value,disabled:e.disabled,children:e.label},e.value))]}),_&&r.jsx("p",{className:"bear-text-sm bear-text-red-500",children:_})]}):r.jsxs("div",{ref:y,id:u,"data-testid":j,className:d.cn(s.S_E_L_E_C_T_ROOT_CLASS,"bear-relative bear-flex bear-flex-col bear-gap-1.5",L&&"bear-w-full"),children:[c&&r.jsx("label",{className:"bear-text-sm bear-font-medium",style:{color:"var(--bear-text-secondary)"},children:c}),r.jsxs("button",{type:"button",disabled:i,onClick:()=>!i&&h(!b),className:d.cn(`${s.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",i&&"bear-opacity-50 bear-cursor-not-allowed",s.SELECT_SIZE_CLASSES[O],q),style:R,"aria-haspopup":"listbox","aria-expanded":b,"aria-invalid":o||void 0,"aria-required":m||void 0,"aria-describedby":a==null?void 0:a.helperId,children:[r.jsx("span",{className:`${s.S_E_L_E_C_T_ROOT_CLASS}__value`,children:Z}),r.jsx(V.SelectChevronDownSvg,{className:d.cn("bear-w-4 bear-h-4 bear-shrink-0 bear-transition-transform",b&&"bear-rotate-180")})]}),r.jsx(W.OverlayPortal,{open:b&&!n,ready:$,style:{...D,backgroundColor:"var(--bear-bg-primary)",borderColor:"var(--bear-border-default)"},zIndex:s.SELECT_MENU_Z_INDEX,openEffect:P,closeEffect:F,panelRef:w,className:`${s.S_E_L_E_C_T_ROOT_CLASS}__menu bear-rounded-lg bear-border bear-shadow-lg bear-overflow-hidden`,attributes:{role:"listbox"},children:r.jsx("div",{className:"bear-max-h-60 bear-overflow-y-auto",children:v.map(e=>r.jsxs("button",{type:"button",disabled:e.disabled,onClick:()=>!e.disabled&&U(e.value),role:"option","aria-selected":e.value===l,className:d.cn(`${s.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===l&&"bear-bg-bear-100 bear-text-bear-700 dark:bear-bg-bear-600/20 dark:bear-text-bear-300",!e.disabled&&e.value!==l&&"hover:bear-bg-[var(--bear-bg-tertiary)]"),style:e.disabled?{color:"var(--bear-text-muted)"}:e.value===l?void 0:{color:"var(--bear-text-secondary)"},children:[e.label,e.value===l&&r.jsx(z.SelectCheckSvg,{className:"bear-w-4 bear-h-4 bear-shrink-0 bear-text-bear-600 dark:bear-text-bear-400"})]},e.value))})}),_&&r.jsx("p",{className:"bear-text-sm bear-text-red-500",children:_})]})};exports.Select=Y;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),v=require("react"),s=require("./Select.const.cjs"),W=require("./helpers/SelectCheckSvg.cjs"),X=require("./helpers/SelectChevronDownSvg.cjs"),H=require("../OverlayPortal/OverlayPortal.cjs"),l=require("../../utils/cn.cjs"),Y=require("../../utils/generateBearId.utils.cjs"),G=require("../../utils/useBearId.cjs"),J=require("../../context/BearProvider.cjs");require("../../context/defaultTheme.cjs");const K=require("../../constants/generals.const.cjs"),Q=require("../../hooks/useClickOutside.cjs");require("../../hooks/useBearComponent/useBearComponent.cjs");const ee=require("../../hooks/useFixedAnchorPosition/useFixedAnchorPosition.cjs"),re=require("../../hooks/useFixedAnchorPosition/useFixedAnchorPosition.utils.cjs"),ae=require("../../hooks/useFormControl/useFormControl.cjs"),se=O=>{const{options:x,value:t,onChange:b,placeholder:S=s.SELECT_DEFAULT_PLACEHOLDER,label:c,error:E,disabled:A=!1,required:I=!1,size:T="md",fullWidth:L=!1,displayEmpty:y=!1,renderValue:q,native:n=!1,className:N,id:P,testId:j}=O,{openEffect:B,closeEffect:D}=re.resolveOverlayEffects(O),{density:F}=J.useBearDensityOptional(),u=F===K.DENSITY_COMPACT,M=G.useBearId(s.COMPONENT_NAME_SELECT),_=Y.resolveBearId(P,M),a=ae.useFormControl(),[i,m]=v.useState(!1),h=v.useRef(null),w=v.useRef(null),{style:$,ready:U}=ee.useFixedAnchorPosition({anchorRef:h,open:i&&!n,offsetPx:s.SELECT_MENU_OFFSET_PX,matchWidth:!0}),o=A||!!(a!=null&&a.disabled),g=I||!!(a!=null&&a.required),d=!!E||!!(a!=null&&a.error),f=typeof E=="string"?E:void 0,p=x.find(e=>e.value===t),C=t===void 0||t==="",R=C||y&&C,Z=v.useCallback(()=>m(!1),[]);Q.useClickOutsideMultiple([h,w],Z,{enabled:i&&!n&&!o});const z=e=>{b==null||b(e),m(!1)},V=q&&!C?q(t):R||!p?S:p.label,k={backgroundColor:"var(--bear-bg-primary)",borderColor:d?void 0:"var(--bear-border-default)",color:p&&!R?"var(--bear-text-primary)":"var(--bear-text-muted)"};return n?r.jsxs("div",{id:_,"data-testid":j,className:l.cn(s.S_E_L_E_C_T_ROOT_CLASS,"bear-relative bear-flex bear-flex-col bear-gap-1.5",L&&"bear-w-full"),children:[c&&r.jsx("label",{htmlFor:`${_}-native`,className:"bear-text-sm bear-font-medium",style:{color:"var(--bear-text-secondary)"},children:c}),r.jsxs("select",{id:`${_}-native`,disabled:o,required:g,value:t??"",onChange:e=>b==null?void 0:b(e.target.value),className:l.cn(`${s.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)]",d?"bear-border-red-500 focus:bear-ring-red-500":"focus:bear-border-bear-500 focus:bear-ring-bear-500",o&&"bear-opacity-50 bear-cursor-not-allowed",s.SELECT_SIZE_CLASSES[T],u&&"Bear-Select--compact bear-py-1 bear-text-xs",N),style:k,"aria-invalid":d||void 0,"aria-required":g||void 0,"aria-describedby":a==null?void 0:a.helperId,children:[(y||S)&&r.jsx("option",{value:"",disabled:!y,children:S}),x.map(e=>r.jsx("option",{value:e.value,disabled:e.disabled,children:e.label},e.value))]}),f&&r.jsx("p",{className:"bear-text-sm bear-text-red-500",children:f})]}):r.jsxs("div",{ref:h,id:_,"data-testid":j,className:l.cn(s.S_E_L_E_C_T_ROOT_CLASS,"bear-relative bear-flex bear-flex-col bear-gap-1.5",u&&"Bear-Select--compact",L&&"bear-w-full"),children:[c&&r.jsx("label",{className:l.cn("bear-font-medium",u?"bear-text-xs":"bear-text-sm"),style:{color:"var(--bear-text-secondary)"},children:c}),r.jsxs("button",{type:"button",disabled:o,onClick:()=>!o&&m(!i),className:l.cn(`${s.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)]",d?"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-opacity-50 bear-cursor-not-allowed",s.SELECT_SIZE_CLASSES[T],u&&"bear-py-1 bear-text-xs bear-h-8",N),style:k,"aria-haspopup":"listbox","aria-expanded":i,"aria-invalid":d||void 0,"aria-required":g||void 0,"aria-describedby":a==null?void 0:a.helperId,children:[r.jsx("span",{className:`${s.S_E_L_E_C_T_ROOT_CLASS}__value`,children:V}),r.jsx(X.SelectChevronDownSvg,{className:l.cn("bear-w-4 bear-h-4 bear-shrink-0 bear-transition-transform",i&&"bear-rotate-180")})]}),r.jsx(H.OverlayPortal,{open:i&&!n,ready:U,style:{...$,backgroundColor:"var(--bear-bg-primary)",borderColor:"var(--bear-border-default)"},zIndex:s.SELECT_MENU_Z_INDEX,openEffect:B,closeEffect:D,panelRef:w,className:`${s.S_E_L_E_C_T_ROOT_CLASS}__menu bear-rounded-lg bear-border bear-shadow-lg bear-overflow-hidden`,attributes:{role:"listbox"},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&&z(e.value),role:"option","aria-selected":e.value===t,className:l.cn(`${s.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===t&&"bear-bg-bear-100 bear-text-bear-700 dark:bear-bg-bear-600/20 dark:bear-text-bear-300",!e.disabled&&e.value!==t&&"hover:bear-bg-[var(--bear-bg-tertiary)]"),style:e.disabled?{color:"var(--bear-text-muted)"}:e.value===t?void 0:{color:"var(--bear-text-secondary)"},children:[e.label,e.value===t&&r.jsx(W.SelectCheckSvg,{className:"bear-w-4 bear-h-4 bear-shrink-0 bear-text-bear-600 dark:bear-text-bear-400"})]},e.value))})}),f&&r.jsx("p",{className:"bear-text-sm bear-text-red-500",children:f})]})};exports.Select=se;

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const E="Bear-Select",_="Select an option",S=4,e=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_OFFSET_PX=S;exports.SELECT_MENU_Z_INDEX=e;exports.SELECT_SIZE_CLASSES=t;exports.S_E_L_E_C_T_ROOT_CLASS=E;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const E="Bear-Select",_="Select",S="Select an option",e=4,t=1e4,L={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.COMPONENT_NAME_SELECT=_;exports.SELECT_DEFAULT_PLACEHOLDER=S;exports.SELECT_MENU_OFFSET_PX=e;exports.SELECT_MENU_Z_INDEX=t;exports.SELECT_SIZE_CLASSES=L;exports.S_E_L_E_C_T_ROOT_CLASS=E;

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

@@ -1,4 +1,5 @@
 export declare const S_E_L_E_C_T_ROOT_CLASS = "Bear-Select";
+export declare const COMPONENT_NAME_SELECT = "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;

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

@@ -1,12 +1,13 @@
-const e = "Bear-Select", E = "Select an option", _ = 4, t = 1e4, S = {
+const E = "Bear-Select", e = "Select", _ = "Select an option", t = 4, 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 {
-  E as SELECT_DEFAULT_PLACEHOLDER,
-  _ as SELECT_MENU_OFFSET_PX,
-  t as SELECT_MENU_Z_INDEX,
-  S as SELECT_SIZE_CLASSES,
-  e as S_E_L_E_C_T_ROOT_CLASS
+  e as COMPONENT_NAME_SELECT,
+  _ as SELECT_DEFAULT_PLACEHOLDER,
+  t 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,67 +1,69 @@
 import { jsxs as c, jsx as a } from "react/jsx-runtime";
-import { useState as X, useRef as $, useCallback as Z } from "react";
-import { SELECT_DEFAULT_PLACEHOLDER as H, SELECT_MENU_OFFSET_PX as G, SELECT_SIZE_CLASSES as q, S_E_L_E_C_T_ROOT_CLASS as t, SELECT_MENU_Z_INDEX as J } from "./Select.const.js";
-import { SelectCheckSvg as K } from "./helpers/SelectCheckSvg.js";
-import { SelectChevronDownSvg as Q } from "./helpers/SelectChevronDownSvg.js";
-import { OverlayPortal as Y } from "../OverlayPortal/OverlayPortal.js";
-import { cn as d } from "../../utils/cn.js";
-import { resolveBearId as ee } from "../../utils/generateBearId.utils.js";
-import { useBearId as re } from "../../utils/useBearId.js";
-import { useClickOutsideMultiple as ae } from "../../hooks/useClickOutside.js";
-import "../../context/BearProvider.js";
+import { useState as H, useRef as P, useCallback as Y } from "react";
+import { SELECT_DEFAULT_PLACEHOLDER as G, COMPONENT_NAME_SELECT as J, SELECT_MENU_OFFSET_PX as K, SELECT_SIZE_CLASSES as R, S_E_L_E_C_T_ROOT_CLASS as l, SELECT_MENU_Z_INDEX as Q } from "./Select.const.js";
+import { SelectCheckSvg as ee } from "./helpers/SelectCheckSvg.js";
+import { SelectChevronDownSvg as re } from "./helpers/SelectChevronDownSvg.js";
+import { OverlayPortal as ae } from "../OverlayPortal/OverlayPortal.js";
+import { cn as s } from "../../utils/cn.js";
+import { resolveBearId as te } from "../../utils/generateBearId.utils.js";
+import { useBearId as le } from "../../utils/useBearId.js";
+import { useBearDensityOptional as se } from "../../context/BearProvider.js";
+import "../../context/defaultTheme.js";
+import { DENSITY_COMPACT as be } from "../../constants/generals.const.js";
+import { useClickOutsideMultiple as oe } from "../../hooks/useClickOutside.js";
 import "../../hooks/useBearComponent/useBearComponent.js";
-import { useFixedAnchorPosition as le } from "../../hooks/useFixedAnchorPosition/useFixedAnchorPosition.js";
-import { resolveOverlayEffects as te } from "../../hooks/useFixedAnchorPosition/useFixedAnchorPosition.utils.js";
-import { useFormControl as se } from "../../hooks/useFormControl/useFormControl.js";
-const _e = (w) => {
+import { useFixedAnchorPosition as de } from "../../hooks/useFixedAnchorPosition/useFixedAnchorPosition.js";
+import { resolveOverlayEffects as ie } from "../../hooks/useFixedAnchorPosition/useFixedAnchorPosition.utils.js";
+import { useFormControl as ce } from "../../hooks/useFormControl/useFormControl.js";
+const Oe = (w) => {
   const {
-    options: v,
-    value: l,
-    onChange: s,
-    placeholder: p = H,
+    options: p,
+    value: t,
+    onChange: b,
+    placeholder: x = G,
     label: n,
     error: y,
-    disabled: B = !1,
-    required: D = !1,
-    size: N = "md",
-    fullWidth: k = !1,
+    disabled: A = !1,
+    required: M = !1,
+    size: k = "md",
+    fullWidth: C = !1,
     displayEmpty: h = !1,
-    renderValue: I,
+    renderValue: O,
     native: u = !1,
-    className: L,
-    id: F,
-    testId: O
-  } = w, { openEffect: P, closeEffect: A } = te(w), j = re("Select"), f = ee(F, j), r = se(), [b, x] = X(!1), g = $(null), C = $(null), { style: M, ready: U } = le({
-    anchorRef: g,
-    open: b && !u,
-    offsetPx: G,
+    className: I,
+    id: $,
+    testId: T
+  } = w, { openEffect: q, closeEffect: F } = ie(w), { density: j } = se(), f = j === be, U = le(J), m = te($, U), r = ce(), [o, g] = H(!1), E = P(null), L = P(null), { style: z, ready: V } = de({
+    anchorRef: E,
+    open: o && !u,
+    offsetPx: K,
     matchWidth: !0
-  }), o = B || !!(r != null && r.disabled), _ = D || !!(r != null && r.required), i = !!y || !!(r != null && r.error), m = typeof y == "string" ? y : void 0, E = v.find((e) => e.value === l), S = l === void 0 || l === "", R = S || h && S, z = Z(() => x(!1), []);
-  ae([g, C], z, {
-    enabled: b && !u && !o
+  }), d = A || !!(r != null && r.disabled), _ = M || !!(r != null && r.required), i = !!y || !!(r != null && r.error), v = typeof y == "string" ? y : void 0, S = p.find((e) => e.value === t), N = t === void 0 || t === "", B = N || h && N, W = Y(() => g(!1), []);
+  oe([E, L], W, {
+    enabled: o && !u && !d
   });
-  const V = (e) => {
-    s == null || s(e), x(!1);
-  }, W = I && !S ? I(l) : R || !E ? p : E.label, T = {
+  const X = (e) => {
+    b == null || b(e), g(!1);
+  }, Z = O && !N ? O(t) : B || !S ? x : S.label, D = {
     backgroundColor: "var(--bear-bg-primary)",
     borderColor: i ? void 0 : "var(--bear-border-default)",
-    color: E && !R ? "var(--bear-text-primary)" : "var(--bear-text-muted)"
+    color: S && !B ? "var(--bear-text-primary)" : "var(--bear-text-muted)"
   };
   return u ? /* @__PURE__ */ c(
     "div",
     {
-      id: f,
-      "data-testid": O,
-      className: d(
-        t,
+      id: m,
+      "data-testid": T,
+      className: s(
+        l,
         "bear-relative bear-flex bear-flex-col bear-gap-1.5",
-        k && "bear-w-full"
+        C && "bear-w-full"
       ),
       children: [
         n && /* @__PURE__ */ a(
           "label",
           {
-            htmlFor: `${f}-native`,
+            htmlFor: `${m}-native`,
             className: "bear-text-sm bear-font-medium",
             style: { color: "var(--bear-text-secondary)" },
             children: n
@@ -70,76 +72,79 @@ const _e = (w) => {
         /* @__PURE__ */ c(
           "select",
           {
-            id: `${f}-native`,
-            disabled: o,
+            id: `${m}-native`,
+            disabled: d,
             required: _,
-            value: l ?? "",
-            onChange: (e) => s == null ? void 0 : s(e.target.value),
-            className: d(
-              `${t}__native`,
+            value: t ?? "",
+            onChange: (e) => b == null ? void 0 : b(e.target.value),
+            className: s(
+              `${l}__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)]",
               i ? "bear-border-red-500 focus:bear-ring-red-500" : "focus:bear-border-bear-500 focus:bear-ring-bear-500",
-              o && "bear-opacity-50 bear-cursor-not-allowed",
-              q[N],
-              L
+              d && "bear-opacity-50 bear-cursor-not-allowed",
+              R[k],
+              f && "Bear-Select--compact bear-py-1 bear-text-xs",
+              I
             ),
-            style: T,
+            style: D,
             "aria-invalid": i || void 0,
             "aria-required": _ || void 0,
             "aria-describedby": r == null ? void 0 : r.helperId,
             children: [
-              (h || p) && /* @__PURE__ */ a("option", { value: "", disabled: !h, children: p }),
-              v.map((e) => /* @__PURE__ */ a("option", { value: e.value, disabled: e.disabled, children: e.label }, e.value))
+              (h || x) && /* @__PURE__ */ a("option", { value: "", disabled: !h, children: x }),
+              p.map((e) => /* @__PURE__ */ a("option", { value: e.value, disabled: e.disabled, children: e.label }, e.value))
             ]
           }
         ),
-        m && /* @__PURE__ */ a("p", { className: "bear-text-sm bear-text-red-500", children: m })
+        v && /* @__PURE__ */ a("p", { className: "bear-text-sm bear-text-red-500", children: v })
       ]
     }
   ) : /* @__PURE__ */ c(
     "div",
     {
-      ref: g,
-      id: f,
-      "data-testid": O,
-      className: d(
-        t,
+      ref: E,
+      id: m,
+      "data-testid": T,
+      className: s(
+        l,
         "bear-relative bear-flex bear-flex-col bear-gap-1.5",
-        k && "bear-w-full"
+        f && "Bear-Select--compact",
+        C && "bear-w-full"
       ),
       children: [
-        n && /* @__PURE__ */ a("label", { className: "bear-text-sm bear-font-medium", style: { color: "var(--bear-text-secondary)" }, children: n }),
+        n && /* @__PURE__ */ a("label", { className: s("bear-font-medium", f ? "bear-text-xs" : "bear-text-sm"), style: { color: "var(--bear-text-secondary)" }, children: n }),
         /* @__PURE__ */ c(
           "button",
           {
             type: "button",
-            disabled: o,
-            onClick: () => !o && x(!b),
-            className: d(
-              `${t}__trigger`,
+            disabled: d,
+            onClick: () => !d && g(!o),
+            className: s(
+              `${l}__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)]",
               i ? "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-opacity-50 bear-cursor-not-allowed",
-              q[N],
-              L
+              d && "bear-opacity-50 bear-cursor-not-allowed",
+              R[k],
+              f && "bear-py-1 bear-text-xs bear-h-8",
+              I
             ),
-            style: T,
+            style: D,
             "aria-haspopup": "listbox",
-            "aria-expanded": b,
+            "aria-expanded": o,
             "aria-invalid": i || void 0,
             "aria-required": _ || void 0,
             "aria-describedby": r == null ? void 0 : r.helperId,
             children: [
-              /* @__PURE__ */ a("span", { className: `${t}__value`, children: W }),
+              /* @__PURE__ */ a("span", { className: `${l}__value`, children: Z }),
               /* @__PURE__ */ a(
-                Q,
+                re,
                 {
-                  className: d(
+                  className: s(
                     "bear-w-4 bear-h-4 bear-shrink-0 bear-transition-transform",
-                    b && "bear-rotate-180"
+                    o && "bear-rotate-180"
                   )
                 }
               )
@@ -147,52 +152,52 @@ const _e = (w) => {
           }
         ),
         /* @__PURE__ */ a(
-          Y,
+          ae,
           {
-            open: b && !u,
-            ready: U,
+            open: o && !u,
+            ready: V,
             style: {
-              ...M,
+              ...z,
               backgroundColor: "var(--bear-bg-primary)",
               borderColor: "var(--bear-border-default)"
             },
-            zIndex: J,
-            openEffect: P,
-            closeEffect: A,
-            panelRef: C,
-            className: `${t}__menu bear-rounded-lg bear-border bear-shadow-lg bear-overflow-hidden`,
+            zIndex: Q,
+            openEffect: q,
+            closeEffect: F,
+            panelRef: L,
+            className: `${l}__menu bear-rounded-lg bear-border bear-shadow-lg bear-overflow-hidden`,
             attributes: { role: "listbox" },
-            children: /* @__PURE__ */ a("div", { className: "bear-max-h-60 bear-overflow-y-auto", children: v.map((e) => /* @__PURE__ */ c(
+            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 && V(e.value),
+                onClick: () => !e.disabled && X(e.value),
                 role: "option",
-                "aria-selected": e.value === l,
-                className: d(
-                  `${t}__option`,
+                "aria-selected": e.value === t,
+                className: s(
+                  `${l}__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 === l && "bear-bg-bear-100 bear-text-bear-700 dark:bear-bg-bear-600/20 dark:bear-text-bear-300",
-                  !e.disabled && e.value !== l && "hover:bear-bg-[var(--bear-bg-tertiary)]"
+                  e.value === t && "bear-bg-bear-100 bear-text-bear-700 dark:bear-bg-bear-600/20 dark:bear-text-bear-300",
+                  !e.disabled && e.value !== t && "hover:bear-bg-[var(--bear-bg-tertiary)]"
                 ),
-                style: e.disabled ? { color: "var(--bear-text-muted)" } : e.value === l ? void 0 : { color: "var(--bear-text-secondary)" },
+                style: e.disabled ? { color: "var(--bear-text-muted)" } : e.value === t ? void 0 : { color: "var(--bear-text-secondary)" },
                 children: [
                   e.label,
-                  e.value === l && /* @__PURE__ */ a(K, { 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
             )) })
           }
         ),
-        m && /* @__PURE__ */ a("p", { className: "bear-text-sm bear-text-red-500", children: m })
+        v && /* @__PURE__ */ a("p", { className: "bear-text-sm bear-text-red-500", children: v })
       ]
     }
   );
 };
 export {
-  _e as Select
+  Oe as Select
 };