@forgedevstack/bear 1.2.6 → 1.2.8

package/dist/components/Chip/Chip.js

@@ -1,50 +1,52 @@
-import { jsxs as I, jsx as e } from "react/jsx-runtime";
-import { C_H_I_P_ROOT_CLASS as a, CHIP_DELETE_ICON_SIZES as S, CHIP_COLOR_CLASSES as v, CHIP_SIZE_CLASSES as k } from "./Chip.const.js";
+import { jsxs as h, jsx as e } from "react/jsx-runtime";
+import { C_H_I_P_ROOT_CLASS as a, CHIP_DELETE_ICON_SIZES as E, CHIP_COLOR_CLASSES as v, CHIP_AVATAR_SIZE_CLASSES as L, CHIP_SIZE_COMPACT_CLASSES as k, CHIP_SIZE_CLASSES as A } from "./Chip.const.js";
 import { cn as i } from "../../utils/cn.js";
 import "react";
-import { resolveBearId as L } from "../../utils/generateBearId.utils.js";
-import { useBearId as N } from "../../utils/useBearId.js";
+import { resolveBearId as N } from "../../utils/generateBearId.utils.js";
+import { useBearId as P } from "../../utils/useBearId.js";
+import { useBearDensityOptional as O } from "../../context/BearProvider.js";
 const j = (c) => {
   const {
     children: d,
     variant: m = "filled",
     color: b = "default",
-    size: t = "md",
+    size: o = "md",
     icon: n,
-    avatar: l,
-    onDelete: s,
-    onClick: o,
+    avatar: t,
+    onDelete: l,
+    onClick: s,
     disabled: r = !1,
     className: p,
     id: _,
-    testId: u
-  } = c, C = N("Chip"), f = L(_, C);
-  return /* @__PURE__ */ I(
-    o ? "button" : "span",
+    testId: C
+  } = c, S = P("Chip"), u = N(_, S), { density: I } = O();
+  return /* @__PURE__ */ h(
+    s ? "button" : "span",
     {
-      id: f,
-      "data-testid": u,
-      onClick: o,
+      id: u,
+      "data-testid": C,
+      onClick: s,
       disabled: r,
       className: i(
         a,
         "bear-inline-flex bear-items-center bear-rounded-full bear-font-medium bear-transition-all",
-        k[t],
+        (I === "compact" ? k : A)[o],
+        t && L[o],
         v[m][b],
-        o && !r && "bear-cursor-pointer hover:bear-opacity-80",
+        s && !r && "bear-cursor-pointer hover:bear-opacity-80",
         r && "bear-opacity-50 bear-cursor-not-allowed",
         p
       ),
       children: [
-        l && /* @__PURE__ */ e("span", { className: `${a}__avatar bear--ml-1`, children: l }),
+        t && /* @__PURE__ */ e("span", { className: `${a}__avatar bear--ml-1`, children: t }),
         n && /* @__PURE__ */ e("span", { className: `${a}__icon`, children: n }),
         /* @__PURE__ */ e("span", { className: `${a}__label`, children: d }),
-        s && /* @__PURE__ */ e(
+        l && /* @__PURE__ */ e(
           "button",
           {
             type: "button",
-            onClick: (h) => {
-              h.stopPropagation(), s();
+            onClick: (f) => {
+              f.stopPropagation(), l();
             },
             disabled: r,
             className: i(
@@ -53,7 +55,7 @@ const j = (c) => {
               r && "bear-cursor-not-allowed"
             ),
             "aria-label": "Remove",
-            children: /* @__PURE__ */ e("svg", { className: S[t], fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
+            children: /* @__PURE__ */ e("svg", { className: E[o], fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
           }
         )
       ]

package/dist/components/ChipGroup/ChipGroup.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),i=require("react"),e=require("./ChipGroup.const.cjs"),o=require("../../utils/cn.cjs"),m=require("../../utils/generateBearId.utils.cjs"),O=require("../../utils/useBearId.cjs"),P=c=>{const{id:a,testId:d,children:l,max:r,spacing:u="md",className:_,...S}=c,C=O.useBearId("ChipGroup"),p=m.resolveBearId(a,C),s=i.Children.toArray(l).filter(i.isValidElement),I=typeof r=="number"?s.slice(0,r):s,t=typeof r=="number"?Math.max(0,s.length-r):0;return n.jsxs("div",{...S,id:p,"data-testid":d,className:o.cn(e.CHIP_GROUP_ROOT_CLASS,e.CHIP_GROUP_BASE_CLASSES,e.CHIP_GROUP_SPACING_CLASSES[u],_),children:[I,t>0&&n.jsxs("span",{className:o.cn(`${e.CHIP_GROUP_ROOT_CLASS}__overflow`,e.CHIP_GROUP_OVERFLOW_CLASSES),children:["+",t]})]})};exports.ChipGroup=P;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),s=require("react"),e=require("./ChipGroup.const.cjs"),n=require("../../utils/cn.cjs"),b=require("../../utils/generateBearId.utils.cjs"),h=require("../../utils/useBearId.cjs"),v=S=>{const{id:C,testId:m,children:O,max:l,size:P="md",spacing:p="md",overflowMenu:i=!1,onDeleteAll:_,deleteAllLabel:I=e.CHIP_GROUP_DEFAULT_DELETE_ALL_LABEL,className:A,...R}=S,E=h.useBearId("ChipGroup"),L=b.resolveBearId(C,E),[a,c]=s.useState(!1),o=s.Children.toArray(O).filter(s.isValidElement).map(t=>s.isValidElement(t)?s.cloneElement(t,{size:t.props.size??P}):t),G=typeof l=="number"?o.slice(0,l):o,d=typeof l=="number"?o.slice(l):[],u=d.length;return r.jsxs("div",{...R,id:L,"data-testid":m,className:n.cn(e.CHIP_GROUP_ROOT_CLASS,e.CHIP_GROUP_BASE_CLASSES,e.CHIP_GROUP_SPACING_CLASSES[p],A),children:[G,u>0&&r.jsxs("div",{className:`${e.CHIP_GROUP_ROOT_CLASS}__overflow-wrap bear-relative`,children:[r.jsxs("button",{type:"button",className:n.cn(`${e.CHIP_GROUP_ROOT_CLASS}__overflow`,e.CHIP_GROUP_OVERFLOW_CLASSES),onClick:()=>i&&c(t=>!t),"aria-expanded":i?a:void 0,"aria-haspopup":i?"menu":void 0,children:["+",u]}),i&&a&&r.jsxs("div",{role:"menu",className:n.cn(`${e.CHIP_GROUP_ROOT_CLASS}__menu`,e.CHIP_GROUP_MENU_CLASSES),children:[d.map((t,U)=>r.jsx("div",{role:"menuitem",className:n.cn(`${e.CHIP_GROUP_ROOT_CLASS}__menu-item`,e.CHIP_GROUP_MENU_ITEM_CLASSES),children:t},`overflow-${U}`)),_&&r.jsx("button",{type:"button",role:"menuitem",className:n.cn(`${e.CHIP_GROUP_ROOT_CLASS}__delete-all`,e.CHIP_GROUP_MENU_ITEM_CLASSES,"bear-text-red-600 dark:bear-text-red-400 bear-w-full bear-text-left"),onClick:()=>{_(),c(!1)},children:I})]})]})]})};exports.ChipGroup=v;

package/dist/components/ChipGroup/ChipGroup.const.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e="Bear-ChipGroup",r="bear-inline-flex bear-flex-wrap bear-items-center",a={sm:"bear-gap-1",md:"bear-gap-1.5",lg:"bear-gap-2"},S="bear-inline-flex bear-items-center bear-justify-center bear-rounded-full bear-bg-gray-200 dark:bear-bg-zinc-700 bear-text-gray-700 dark:bear-text-zinc-200 bear-text-xs bear-font-medium bear-h-8 bear-min-w-[2rem] bear-px-2";exports.CHIP_GROUP_BASE_CLASSES=r;exports.CHIP_GROUP_OVERFLOW_CLASSES=S;exports.CHIP_GROUP_ROOT_CLASS=e;exports.CHIP_GROUP_SPACING_CLASSES=a;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e="Bear-ChipGroup",r="bear-inline-flex bear-flex-wrap bear-items-center",a={sm:"bear-gap-1",md:"bear-gap-2",lg:"bear-gap-3"},b="bear-inline-flex bear-items-center bear-justify-center bear-h-8 bear-min-w-8 bear-px-2 bear-rounded-full bear-text-sm bear-font-medium bear-bg-gray-200 bear-text-gray-700 dark:bear-bg-zinc-700 dark:bear-text-zinc-200 bear-border-none bear-cursor-pointer",_="Delete all",S="bear-absolute bear-z-20 bear-top-full bear-left-0 bear-mt-1 bear-min-w-[10rem] bear-rounded-lg bear-border bear-border-[var(--bear-border-default)] bear-bg-[var(--bear-bg-primary)] bear-shadow-lg bear-p-2 bear-flex bear-flex-col bear-gap-2",t="bear-text-sm";exports.CHIP_GROUP_BASE_CLASSES=r;exports.CHIP_GROUP_DEFAULT_DELETE_ALL_LABEL=_;exports.CHIP_GROUP_MENU_CLASSES=S;exports.CHIP_GROUP_MENU_ITEM_CLASSES=t;exports.CHIP_GROUP_OVERFLOW_CLASSES=b;exports.CHIP_GROUP_ROOT_CLASS=e;exports.CHIP_GROUP_SPACING_CLASSES=a;

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

@@ -2,7 +2,10 @@ export declare const CHIP_GROUP_ROOT_CLASS = "Bear-ChipGroup";
 export declare const CHIP_GROUP_BASE_CLASSES = "bear-inline-flex bear-flex-wrap bear-items-center";
 export declare const CHIP_GROUP_SPACING_CLASSES: {
     readonly sm: "bear-gap-1";
-    readonly md: "bear-gap-1.5";
-    readonly lg: "bear-gap-2";
+    readonly md: "bear-gap-2";
+    readonly lg: "bear-gap-3";
 };
-export declare const CHIP_GROUP_OVERFLOW_CLASSES = "bear-inline-flex bear-items-center bear-justify-center bear-rounded-full bear-bg-gray-200 dark:bear-bg-zinc-700 bear-text-gray-700 dark:bear-text-zinc-200 bear-text-xs bear-font-medium bear-h-8 bear-min-w-[2rem] bear-px-2";
+export declare const CHIP_GROUP_OVERFLOW_CLASSES = "bear-inline-flex bear-items-center bear-justify-center bear-h-8 bear-min-w-8 bear-px-2 bear-rounded-full bear-text-sm bear-font-medium bear-bg-gray-200 bear-text-gray-700 dark:bear-bg-zinc-700 dark:bear-text-zinc-200 bear-border-none bear-cursor-pointer";
+export declare const CHIP_GROUP_DEFAULT_DELETE_ALL_LABEL = "Delete all";
+export declare const CHIP_GROUP_MENU_CLASSES = "bear-absolute bear-z-20 bear-top-full bear-left-0 bear-mt-1 bear-min-w-[10rem] bear-rounded-lg bear-border bear-border-[var(--bear-border-default)] bear-bg-[var(--bear-bg-primary)] bear-shadow-lg bear-p-2 bear-flex bear-flex-col bear-gap-2";
+export declare const CHIP_GROUP_MENU_ITEM_CLASSES = "bear-text-sm";

package/dist/components/ChipGroup/ChipGroup.const.js

@@ -1,10 +1,13 @@
 const e = "Bear-ChipGroup", r = "bear-inline-flex bear-flex-wrap bear-items-center", a = {
   sm: "bear-gap-1",
-  md: "bear-gap-1.5",
-  lg: "bear-gap-2"
-}, b = "bear-inline-flex bear-items-center bear-justify-center bear-rounded-full bear-bg-gray-200 dark:bear-bg-zinc-700 bear-text-gray-700 dark:bear-text-zinc-200 bear-text-xs bear-font-medium bear-h-8 bear-min-w-[2rem] bear-px-2";
+  md: "bear-gap-2",
+  lg: "bear-gap-3"
+}, b = "bear-inline-flex bear-items-center bear-justify-center bear-h-8 bear-min-w-8 bear-px-2 bear-rounded-full bear-text-sm bear-font-medium bear-bg-gray-200 bear-text-gray-700 dark:bear-bg-zinc-700 dark:bear-text-zinc-200 bear-border-none bear-cursor-pointer", t = "Delete all", n = "bear-absolute bear-z-20 bear-top-full bear-left-0 bear-mt-1 bear-min-w-[10rem] bear-rounded-lg bear-border bear-border-[var(--bear-border-default)] bear-bg-[var(--bear-bg-primary)] bear-shadow-lg bear-p-2 bear-flex bear-flex-col bear-gap-2", _ = "bear-text-sm";
 export {
   r as CHIP_GROUP_BASE_CLASSES,
+  t as CHIP_GROUP_DEFAULT_DELETE_ALL_LABEL,
+  n as CHIP_GROUP_MENU_CLASSES,
+  _ as CHIP_GROUP_MENU_ITEM_CLASSES,
   b as CHIP_GROUP_OVERFLOW_CLASSES,
   e as CHIP_GROUP_ROOT_CLASS,
   a as CHIP_GROUP_SPACING_CLASSES

package/dist/components/ChipGroup/ChipGroup.js

@@ -1,41 +1,95 @@
-import { jsxs as t } from "react/jsx-runtime";
-import { Children as f, isValidElement as I } from "react";
-import { CHIP_GROUP_OVERFLOW_CLASSES as h, CHIP_GROUP_ROOT_CLASS as s, CHIP_GROUP_SPACING_CLASSES as P, CHIP_GROUP_BASE_CLASSES as A } from "./ChipGroup.const.js";
-import { cn as i } from "../../utils/cn.js";
-import { resolveBearId as O } from "../../utils/generateBearId.utils.js";
-import { useBearId as G } from "../../utils/useBearId.js";
-const y = (m) => {
+import { jsxs as n, jsx as c } from "react/jsx-runtime";
+import { useState as N, Children as U, isValidElement as p, cloneElement as R } from "react";
+import { CHIP_GROUP_DEFAULT_DELETE_ALL_LABEL as x, CHIP_GROUP_ROOT_CLASS as r, CHIP_GROUP_OVERFLOW_CLASSES as w, CHIP_GROUP_MENU_ITEM_CLASSES as u, CHIP_GROUP_MENU_CLASSES as y, CHIP_GROUP_SPACING_CLASSES as H, CHIP_GROUP_BASE_CLASSES as $ } from "./ChipGroup.const.js";
+import { cn as t } from "../../utils/cn.js";
+import { resolveBearId as M } from "../../utils/generateBearId.utils.js";
+import { useBearId as z } from "../../utils/useBearId.js";
+const V = (C) => {
   const {
-    id: n,
-    testId: a,
-    children: d,
-    max: r,
-    spacing: c = "md",
-    className: l,
-    ...p
-  } = m, _ = G("ChipGroup"), S = O(n, _), e = f.toArray(d).filter(I), C = typeof r == "number" ? e.slice(0, r) : e, o = typeof r == "number" ? Math.max(0, e.length - r) : 0;
-  return /* @__PURE__ */ t(
+    id: S,
+    testId: f,
+    children: E,
+    max: o,
+    size: A = "md",
+    spacing: P = "md",
+    overflowMenu: l = !1,
+    onDeleteAll: a,
+    deleteAllLabel: v = x,
+    className: I,
+    ...L
+  } = C, b = z("ChipGroup"), h = M(S, b), [i, m] = N(!1), s = U.toArray(E).filter(p).map(
+    (e) => p(e) ? R(e, {
+      size: e.props.size ?? A
+    }) : e
+  ), O = typeof o == "number" ? s.slice(0, o) : s, d = typeof o == "number" ? s.slice(o) : [], _ = d.length;
+  return /* @__PURE__ */ n(
     "div",
     {
-      ...p,
-      id: S,
-      "data-testid": a,
-      className: i(
-        s,
-        A,
-        P[c],
-        l
+      ...L,
+      id: h,
+      "data-testid": f,
+      className: t(
+        r,
+        $,
+        H[P],
+        I
       ),
       children: [
-        C,
-        o > 0 && /* @__PURE__ */ t("span", { className: i(`${s}__overflow`, h), children: [
-          "+",
-          o
+        O,
+        _ > 0 && /* @__PURE__ */ n("div", { className: `${r}__overflow-wrap bear-relative`, children: [
+          /* @__PURE__ */ n(
+            "button",
+            {
+              type: "button",
+              className: t(`${r}__overflow`, w),
+              onClick: () => l && m((e) => !e),
+              "aria-expanded": l ? i : void 0,
+              "aria-haspopup": l ? "menu" : void 0,
+              children: [
+                "+",
+                _
+              ]
+            }
+          ),
+          l && i && /* @__PURE__ */ n(
+            "div",
+            {
+              role: "menu",
+              className: t(`${r}__menu`, y),
+              children: [
+                d.map((e, G) => /* @__PURE__ */ c(
+                  "div",
+                  {
+                    role: "menuitem",
+                    className: t(`${r}__menu-item`, u),
+                    children: e
+                  },
+                  `overflow-${G}`
+                )),
+                a && /* @__PURE__ */ c(
+                  "button",
+                  {
+                    type: "button",
+                    role: "menuitem",
+                    className: t(
+                      `${r}__delete-all`,
+                      u,
+                      "bear-text-red-600 dark:bear-text-red-400 bear-w-full bear-text-left"
+                    ),
+                    onClick: () => {
+                      a(), m(!1);
+                    },
+                    children: v
+                  }
+                )
+              ]
+            }
+          )
         ] })
       ]
     }
   );
 };
 export {
-  y as ChipGroup
+  V as ChipGroup
 };

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

@@ -1,9 +1,14 @@
 import { HTMLAttributes, ReactNode } from 'react';
+export type ChipGroupSize = 'sm' | 'md' | 'lg';
 export interface ChipGroupProps extends HTMLAttributes<HTMLDivElement> {
     id?: string;
     testId?: string;
     children: ReactNode;
     max?: number;
+    size?: ChipGroupSize;
     spacing?: 'sm' | 'md' | 'lg';
+    overflowMenu?: boolean;
+    onDeleteAll?: () => void;
+    deleteAllLabel?: string;
     className?: string;
 }

package/dist/components/Drawer/Drawer.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("react"),D=require("react-dom"),R=require("../../context/BearProvider.cjs"),S=require("../../utils/cn.cjs"),p=require("../Icon/index.cjs"),r=require("./Drawer.const.cjs"),M=require("./Drawer.utils.cjs"),j=({isOpen:d,onClose:o,title:i,children:k,side:w="right",anchor:y,variant:O="temporary",size:N="md",showCloseButton:u=!0,closeOnBackdrop:_=!0,closeOnEscape:m=!0,className:A,container:E,id:q,testId:T})=>{const{direction:f}=R.useBearDirectionOptional(),l=y??w,n=f==="rtl"&&(l==="left"||l==="right")?l==="left"?"right":"left":l,[s,x]=t.useState(d),[v,c]=t.useState(!1),[g,h]=t.useState(!1);t.useEffect(()=>{if(d){x(!0),c(!1);const a=requestAnimationFrame(()=>h(!0));return()=>cancelAnimationFrame(a)}if(s){h(!1),c(!0);const a=setTimeout(()=>{x(!1),c(!1)},r.DRAWER_ANIMATION_MS);return()=>clearTimeout(a)}},[d,s]);const b=t.useCallback(a=>{m&&a.key==="Escape"&&o()},[m,o]);if(t.useEffect(()=>{if(s){document.addEventListener("keydown",b);const a=M.lockBodyScroll();return()=>{document.removeEventListener("keydown",b),a()}}return()=>{document.removeEventListener("keydown",b)}},[s,b]),!s)return null;const I=e.jsxs("div",{className:"bear-fixed bear-inset-0 bear-z-[11000]",children:[e.jsx("div",{className:S.cn("bear-absolute bear-inset-0 bear-bg-black/60 bear-backdrop-blur-sm bear-transition-opacity",v?"bear-opacity-0":"bear-opacity-100"),style:{transitionDuration:`${r.DRAWER_ANIMATION_MS}ms`},onClick:_?o:void 0,"aria-hidden":"true"}),e.jsxs("div",{role:"dialog","aria-modal":"true","aria-labelledby":i?"drawer-title":void 0,className:S.cn("bear-absolute bear-bg-white dark:bear-bg-neutral-900 bear-shadow-2xl","bear-border-neutral-200 dark:bear-border-neutral-700","bear-flex bear-flex-col bear-overflow-hidden","bear-transform bear-transition-transform",r.BORDER_SIDE_MAP[n],r.POSITION_CLASSES[n],r.SIZE_CLASSES[n][N],g&&!v?r.TRANSFORM_OPEN[n]:r.TRANSFORM_CLOSED[n],A),style:{transitionDuration:`${r.DRAWER_ANIMATION_MS}ms`},children:[(i||u)&&e.jsxs("div",{className:"bear-flex bear-items-center bear-justify-between bear-px-4 bear-py-3 bear-border-b bear-border-neutral-200 dark:bear-border-neutral-700 bear-shrink-0",dir:f,children:[i&&e.jsx("h2",{id:"drawer-title",className:"bear-text-lg bear-font-semibold bear-text-neutral-900 dark:bear-text-white",children:i}),u&&e.jsx("button",{onClick:o,className:"bear-p-1 bear-rounded-lg bear-text-neutral-500 dark:bear-text-neutral-400 hover:bear-text-neutral-900 dark:hover:bear-text-white hover:bear-bg-neutral-100 dark:hover:bear-bg-neutral-700 bear-transition-colors","aria-label":"Close drawer",children:e.jsx(p.XIcon,{className:"bear-w-5 bear-h-5"})})]}),e.jsx("div",{className:"bear-flex-1 bear-min-h-0 bear-overflow-y-auto bear-overscroll-contain bear-p-4 bear-text-neutral-700 dark:bear-text-neutral-300",children:k})]})]});return D.createPortal(I,E??document.body)};exports.Drawer=j;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("react"),M=require("react-dom"),q=require("../../context/BearProvider.cjs"),B=require("../../utils/cn.cjs"),j=require("../../utils/generateBearId.utils.cjs"),O=require("../../utils/useBearId.cjs"),T=require("../Icon/index.cjs"),C=require("../Backdrop/Backdrop.cjs"),r=require("./Drawer.const.cjs"),L=require("./Drawer.utils.cjs"),P=({isOpen:u,onClose:o,title:i,children:w,side:_="right",anchor:I,variant:F="temporary",size:D="md",showCloseButton:m=!0,closeOnBackdrop:N=!0,closeOnEscape:f=!0,className:g,container:A,id:E,testId:p})=>{const y=O.useBearId("Drawer"),c=j.resolveBearId(E,y),{direction:x}=q.useBearDirectionOptional(),l=I??_,n=x==="rtl"&&(l==="left"||l==="right")?l==="left"?"right":"left":l,[s,v]=t.useState(u),[S,b]=t.useState(!1),[h,k]=t.useState(!1);t.useEffect(()=>{if(u){v(!0),b(!1);const a=requestAnimationFrame(()=>k(!0));return()=>cancelAnimationFrame(a)}if(s){k(!1),b(!0);const a=setTimeout(()=>{v(!1),b(!1)},r.DRAWER_ANIMATION_MS);return()=>clearTimeout(a)}},[u,s]);const d=t.useCallback(a=>{f&&a.key==="Escape"&&o()},[f,o]);if(t.useEffect(()=>{if(s){document.addEventListener("keydown",d);const a=L.lockBodyScroll();return()=>{document.removeEventListener("keydown",d),a()}}return()=>{document.removeEventListener("keydown",d)}},[s,d]),!s)return null;const R=e.jsxs("div",{id:c,"data-testid":p,className:"Bear-Drawer bear-fixed bear-inset-0 bear-z-[11000]",children:[e.jsx(C.Backdrop,{open:h&&!S,keepMounted:!0,blur:!0,transitionDuration:r.DRAWER_ANIMATION_MS,className:"Bear-Drawer__backdrop",onClick:N?()=>o():void 0}),e.jsxs("div",{role:"dialog","aria-modal":"true","aria-labelledby":i?`${c}-title`:void 0,className:B.cn("Bear-Drawer__panel","bear-absolute bear-bg-white dark:bear-bg-neutral-900 bear-shadow-2xl","bear-border-neutral-200 dark:bear-border-neutral-700","bear-flex bear-flex-col bear-overflow-hidden","bear-transform bear-transition-transform",r.BORDER_SIDE_MAP[n],r.POSITION_CLASSES[n],r.SIZE_CLASSES[n][D],h&&!S?r.TRANSFORM_OPEN[n]:r.TRANSFORM_CLOSED[n],g),style:{transitionDuration:`${r.DRAWER_ANIMATION_MS}ms`},children:[(i||m)&&e.jsxs("div",{className:"bear-flex bear-items-center bear-justify-between bear-px-4 bear-py-3 bear-border-b bear-border-neutral-200 dark:bear-border-neutral-700 bear-shrink-0",dir:x,children:[i&&e.jsx("h2",{id:`${c}-title`,className:"bear-text-lg bear-font-semibold bear-text-neutral-900 dark:bear-text-white",children:i}),m&&e.jsx("button",{onClick:o,className:"bear-p-1 bear-rounded-lg bear-text-neutral-500 dark:bear-text-neutral-400 hover:bear-text-neutral-900 dark:hover:bear-text-white hover:bear-bg-neutral-100 dark:hover:bear-bg-neutral-700 bear-transition-colors","aria-label":"Close drawer",children:e.jsx(T.XIcon,{className:"bear-w-5 bear-h-5"})})]}),e.jsx("div",{className:"bear-flex-1 bear-min-h-0 bear-overflow-y-auto bear-overscroll-contain bear-p-4 bear-text-neutral-700 dark:bear-text-neutral-300",children:w})]})]});return M.createPortal(R,A??document.body)};exports.Drawer=P;

package/dist/components/Drawer/Drawer.js

@@ -1,53 +1,56 @@
-import { jsxs as d, jsx as t } from "react/jsx-runtime";
-import { useState as c, useEffect as x, useCallback as O } from "react";
-import { createPortal as R } from "react-dom";
-import { useBearDirectionOptional as M } from "../../context/BearProvider.js";
-import { cn as S } from "../../utils/cn.js";
-import { XIcon as C } from "../Icon/index.js";
-import { DRAWER_ANIMATION_MS as u, TRANSFORM_OPEN as L, TRANSFORM_CLOSED as T, SIZE_CLASSES as F, POSITION_CLASSES as P, BORDER_SIDE_MAP as j } from "./Drawer.const.js";
-import { lockBodyScroll as B } from "./Drawer.utils.js";
-const U = ({
+import { jsxs as c, jsx as t } from "react/jsx-runtime";
+import { useState as m, useEffect as S, useCallback as R } from "react";
+import { createPortal as C } from "react-dom";
+import { useBearDirectionOptional as L } from "../../context/BearProvider.js";
+import { cn as T } from "../../utils/cn.js";
+import { resolveBearId as F } from "../../utils/generateBearId.utils.js";
+import { useBearId as P } from "../../utils/useBearId.js";
+import { XIcon as j } from "../Icon/index.js";
+import { Backdrop as $ } from "../Backdrop/Backdrop.js";
+import { DRAWER_ANIMATION_MS as u, TRANSFORM_OPEN as q, TRANSFORM_CLOSED as z, SIZE_CLASSES as H, POSITION_CLASSES as W, BORDER_SIDE_MAP as X } from "./Drawer.const.js";
+import { lockBodyScroll as Z } from "./Drawer.utils.js";
+const ne = ({
   isOpen: s,
   onClose: o,
   title: n,
-  children: w,
-  side: y = "right",
-  anchor: N,
-  variant: $ = "temporary",
-  size: g = "md",
-  showCloseButton: m = !0,
-  closeOnBackdrop: E = !0,
-  closeOnEscape: f = !0,
-  className: I,
-  container: _,
-  id: q,
-  testId: z
+  children: N,
+  side: g = "right",
+  anchor: E,
+  variant: G = "temporary",
+  size: I = "md",
+  showCloseButton: f = !0,
+  closeOnBackdrop: _ = !0,
+  closeOnEscape: p = !0,
+  className: y,
+  container: D,
+  id: A,
+  testId: B
 }) => {
-  const { direction: h } = M(), i = N ?? y, r = h === "rtl" && (i === "left" || i === "right") ? i === "left" ? "right" : "left" : i, [a, v] = c(s), [k, b] = c(!1), [A, p] = c(!1);
-  x(() => {
+  const M = P("Drawer"), d = F(A, M), { direction: h } = L(), i = E ?? g, r = h === "rtl" && (i === "left" || i === "right") ? i === "left" ? "right" : "left" : i, [a, v] = m(s), [k, b] = m(!1), [x, w] = m(!1);
+  S(() => {
     if (s) {
       v(!0), b(!1);
-      const e = requestAnimationFrame(() => p(!0));
+      const e = requestAnimationFrame(() => w(!0));
       return () => cancelAnimationFrame(e);
     }
     if (a) {
-      p(!1), b(!0);
+      w(!1), b(!0);
       const e = setTimeout(() => {
         v(!1), b(!1);
       }, u);
       return () => clearTimeout(e);
     }
   }, [s, a]);
-  const l = O(
+  const l = R(
     (e) => {
-      f && e.key === "Escape" && o();
+      p && e.key === "Escape" && o();
     },
-    [f, o]
+    [p, o]
   );
-  if (x(() => {
+  if (S(() => {
     if (a) {
       document.addEventListener("keydown", l);
-      const e = B();
+      const e = Z();
       return () => {
         document.removeEventListener("keydown", l), e();
       };
@@ -56,64 +59,64 @@ const U = ({
       document.removeEventListener("keydown", l);
     };
   }, [a, l]), !a) return null;
-  const D = /* @__PURE__ */ d("div", { className: "bear-fixed bear-inset-0 bear-z-[11000]", children: [
+  const O = /* @__PURE__ */ c("div", { id: d, "data-testid": B, className: "Bear-Drawer bear-fixed bear-inset-0 bear-z-[11000]", children: [
     /* @__PURE__ */ t(
-      "div",
+      $,
       {
-        className: S(
-          "bear-absolute bear-inset-0 bear-bg-black/60 bear-backdrop-blur-sm bear-transition-opacity",
-          k ? "bear-opacity-0" : "bear-opacity-100"
-        ),
-        style: { transitionDuration: `${u}ms` },
-        onClick: E ? o : void 0,
-        "aria-hidden": "true"
+        open: x && !k,
+        keepMounted: !0,
+        blur: !0,
+        transitionDuration: u,
+        className: "Bear-Drawer__backdrop",
+        onClick: _ ? () => o() : void 0
       }
     ),
-    /* @__PURE__ */ d(
+    /* @__PURE__ */ c(
       "div",
       {
         role: "dialog",
         "aria-modal": "true",
-        "aria-labelledby": n ? "drawer-title" : void 0,
-        className: S(
+        "aria-labelledby": n ? `${d}-title` : void 0,
+        className: T(
+          "Bear-Drawer__panel",
           "bear-absolute bear-bg-white dark:bear-bg-neutral-900 bear-shadow-2xl",
           "bear-border-neutral-200 dark:bear-border-neutral-700",
           "bear-flex bear-flex-col bear-overflow-hidden",
           "bear-transform bear-transition-transform",
-          j[r],
-          P[r],
-          F[r][g],
-          A && !k ? L[r] : T[r],
-          I
+          X[r],
+          W[r],
+          H[r][I],
+          x && !k ? q[r] : z[r],
+          y
         ),
         style: { transitionDuration: `${u}ms` },
         children: [
-          (n || m) && /* @__PURE__ */ d("div", { className: "bear-flex bear-items-center bear-justify-between bear-px-4 bear-py-3 bear-border-b bear-border-neutral-200 dark:bear-border-neutral-700 bear-shrink-0", dir: h, children: [
+          (n || f) && /* @__PURE__ */ c("div", { className: "bear-flex bear-items-center bear-justify-between bear-px-4 bear-py-3 bear-border-b bear-border-neutral-200 dark:bear-border-neutral-700 bear-shrink-0", dir: h, children: [
             n && /* @__PURE__ */ t(
               "h2",
               {
-                id: "drawer-title",
+                id: `${d}-title`,
                 className: "bear-text-lg bear-font-semibold bear-text-neutral-900 dark:bear-text-white",
                 children: n
               }
             ),
-            m && /* @__PURE__ */ t(
+            f && /* @__PURE__ */ t(
               "button",
               {
                 onClick: o,
                 className: "bear-p-1 bear-rounded-lg bear-text-neutral-500 dark:bear-text-neutral-400 hover:bear-text-neutral-900 dark:hover:bear-text-white hover:bear-bg-neutral-100 dark:hover:bear-bg-neutral-700 bear-transition-colors",
                 "aria-label": "Close drawer",
-                children: /* @__PURE__ */ t(C, { className: "bear-w-5 bear-h-5" })
+                children: /* @__PURE__ */ t(j, { className: "bear-w-5 bear-h-5" })
               }
             )
           ] }),
-          /* @__PURE__ */ t("div", { className: "bear-flex-1 bear-min-h-0 bear-overflow-y-auto bear-overscroll-contain bear-p-4 bear-text-neutral-700 dark:bear-text-neutral-300", children: w })
+          /* @__PURE__ */ t("div", { className: "bear-flex-1 bear-min-h-0 bear-overflow-y-auto bear-overscroll-contain bear-p-4 bear-text-neutral-700 dark:bear-text-neutral-300", children: N })
         ]
       }
     )
   ] });
-  return R(D, _ ?? document.body);
+  return C(O, D ?? document.body);
 };
 export {
-  U as Drawer
+  ne as Drawer
 };

package/dist/components/EmptyState/EmptyState.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../../utils/cn.cjs");require("react");const x=({className:b})=>e.jsx("svg",{className:b,fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",children:e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:1.5,d:"M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"})}),o=({icon:b,title:c,description:s,action:l,secondaryAction:n,className:i,size:a="md",variant:d="default"})=>{const r={sm:{icon:"bear-w-12 bear-h-12",title:"bear-text-lg",desc:"bear-text-sm",padding:"bear-py-6 bear-px-4"},md:{icon:"bear-w-16 bear-h-16",title:"bear-text-xl",desc:"bear-text-base",padding:"bear-py-10 bear-px-6"},lg:{icon:"bear-w-20 bear-h-20",title:"bear-text-2xl",desc:"bear-text-lg",padding:"bear-py-14 bear-px-8"}};return e.jsxs("div",{className:t.cn("bear-flex bear-flex-col bear-items-center bear-text-center",r[a].padding,d==="card"&&"bear-bg-zinc-800/50 bear-rounded-xl bear-border bear-border-zinc-700",i),children:[e.jsx("div",{className:t.cn("bear-text-zinc-600 bear-mb-4",r[a].icon),children:b||e.jsx(x,{className:"bear-w-full bear-h-full"})}),e.jsx("h3",{className:t.cn("bear-font-semibold bear-text-white bear-mb-2",r[a].title),children:c}),s&&e.jsx("p",{className:t.cn("bear-text-zinc-400 bear-max-w-md bear-mb-6",r[a].desc),children:s}),(l||n)&&e.jsxs("div",{className:"bear-flex bear-items-center bear-gap-3",children:[l,n]})]})};exports.EmptyState=o;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),e=require("./EmptyState.const.cjs"),a=require("../../utils/cn.cjs");require("react");const A=require("../../utils/generateBearId.utils.cjs"),m=require("../../utils/useBearId.cjs"),C=({className:r})=>s.jsx("svg",{className:r,fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",children:s.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:1.5,d:"M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"})}),h=({icon:r,title:l,description:S,action:n,secondaryAction:c,className:d,size:i="md",variant:E="default",id:T,testId:_})=>{const o=m.useBearId("EmptyState"),u=A.resolveBearId(T,o),t=e.EMPTY_STATE_SIZE_CLASSES[i];return s.jsxs("div",{id:u,"data-testid":_,className:a.cn(e.EMPTY_STATE_ROOT_CLASS,e.EMPTY_STATE_BASE_CLASSES,t.padding,E==="card"&&e.EMPTY_STATE_CARD_CLASSES,d),children:[s.jsx("div",{className:a.cn(e.EMPTY_STATE_ICON_CLASSES,t.icon),children:r||s.jsx(C,{className:"bear-w-full bear-h-full"})}),s.jsx("h3",{className:a.cn(e.EMPTY_STATE_TITLE_CLASSES,t.title),children:l}),S&&s.jsx("p",{className:a.cn(e.EMPTY_STATE_DESCRIPTION_CLASSES,t.desc),children:S}),(n||c)&&s.jsxs("div",{className:`${e.EMPTY_STATE_ROOT_CLASS}__actions bear-flex bear-items-center bear-gap-3`,children:[n,c]})]})};exports.EmptyState=h;

package/dist/components/EmptyState/EmptyState.const.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e="Bear-EmptyState",S="bear-flex bear-flex-col bear-items-center bear-text-center",r="bear-bg-[var(--bear-bg-secondary)] bear-rounded-xl bear-border bear-border-[var(--bear-border-default)]",a="bear-text-[var(--bear-text-muted)] bear-mb-4",t="bear-font-semibold bear-text-[var(--bear-text-primary)] bear-mb-2",b="bear-text-[var(--bear-text-secondary)] bear-max-w-md bear-mb-6",T={sm:{icon:"bear-w-12 bear-h-12",title:"bear-text-lg",desc:"bear-text-sm",padding:"bear-py-6 bear-px-4"},md:{icon:"bear-w-16 bear-h-16",title:"bear-text-xl",desc:"bear-text-base",padding:"bear-py-10 bear-px-6"},lg:{icon:"bear-w-20 bear-h-20",title:"bear-text-2xl",desc:"bear-text-lg",padding:"bear-py-14 bear-px-8"}};exports.EMPTY_STATE_BASE_CLASSES=S;exports.EMPTY_STATE_CARD_CLASSES=r;exports.EMPTY_STATE_DESCRIPTION_CLASSES=b;exports.EMPTY_STATE_ICON_CLASSES=a;exports.EMPTY_STATE_ROOT_CLASS=e;exports.EMPTY_STATE_SIZE_CLASSES=T;exports.EMPTY_STATE_TITLE_CLASSES=t;

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

@@ -1 +1,26 @@
-export declare const E_M_P_T_Y_S_T_A_T_E_ROOT_CLASS = "Bear-EmptyState";
+export declare const EMPTY_STATE_ROOT_CLASS = "Bear-EmptyState";
+export declare const EMPTY_STATE_BASE_CLASSES = "bear-flex bear-flex-col bear-items-center bear-text-center";
+export declare const EMPTY_STATE_CARD_CLASSES = "bear-bg-[var(--bear-bg-secondary)] bear-rounded-xl bear-border bear-border-[var(--bear-border-default)]";
+export declare const EMPTY_STATE_ICON_CLASSES = "bear-text-[var(--bear-text-muted)] bear-mb-4";
+export declare const EMPTY_STATE_TITLE_CLASSES = "bear-font-semibold bear-text-[var(--bear-text-primary)] bear-mb-2";
+export declare const EMPTY_STATE_DESCRIPTION_CLASSES = "bear-text-[var(--bear-text-secondary)] bear-max-w-md bear-mb-6";
+export declare const EMPTY_STATE_SIZE_CLASSES: {
+    readonly sm: {
+        readonly icon: "bear-w-12 bear-h-12";
+        readonly title: "bear-text-lg";
+        readonly desc: "bear-text-sm";
+        readonly padding: "bear-py-6 bear-px-4";
+    };
+    readonly md: {
+        readonly icon: "bear-w-16 bear-h-16";
+        readonly title: "bear-text-xl";
+        readonly desc: "bear-text-base";
+        readonly padding: "bear-py-10 bear-px-6";
+    };
+    readonly lg: {
+        readonly icon: "bear-w-20 bear-h-20";
+        readonly title: "bear-text-2xl";
+        readonly desc: "bear-text-lg";
+        readonly padding: "bear-py-14 bear-px-8";
+    };
+};

package/dist/components/EmptyState/EmptyState.const.js

@@ -0,0 +1,29 @@
+const e = "Bear-EmptyState", r = "bear-flex bear-flex-col bear-items-center bear-text-center", a = "bear-bg-[var(--bear-bg-secondary)] bear-rounded-xl bear-border bear-border-[var(--bear-border-default)]", b = "bear-text-[var(--bear-text-muted)] bear-mb-4", t = "bear-font-semibold bear-text-[var(--bear-text-primary)] bear-mb-2", S = "bear-text-[var(--bear-text-secondary)] bear-max-w-md bear-mb-6", E = {
+  sm: {
+    icon: "bear-w-12 bear-h-12",
+    title: "bear-text-lg",
+    desc: "bear-text-sm",
+    padding: "bear-py-6 bear-px-4"
+  },
+  md: {
+    icon: "bear-w-16 bear-h-16",
+    title: "bear-text-xl",
+    desc: "bear-text-base",
+    padding: "bear-py-10 bear-px-6"
+  },
+  lg: {
+    icon: "bear-w-20 bear-h-20",
+    title: "bear-text-2xl",
+    desc: "bear-text-lg",
+    padding: "bear-py-14 bear-px-8"
+  }
+};
+export {
+  r as EMPTY_STATE_BASE_CLASSES,
+  a as EMPTY_STATE_CARD_CLASSES,
+  S as EMPTY_STATE_DESCRIPTION_CLASSES,
+  b as EMPTY_STATE_ICON_CLASSES,
+  e as EMPTY_STATE_ROOT_CLASS,
+  E as EMPTY_STATE_SIZE_CLASSES,
+  t as EMPTY_STATE_TITLE_CLASSES
+};