@forgedevstack/bear 1.2.5 → 1.2.7

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

@@ -1 +1,50 @@
 export declare const C_H_I_P_ROOT_CLASS = "Bear-Chip";
+export declare const CHIP_COLOR_CLASSES: {
+    readonly filled: {
+        readonly default: "bear-bg-gray-600 bear-text-white dark:bear-bg-zinc-600";
+        readonly primary: "bear-bg-primary-500 bear-text-white";
+        readonly secondary: "bear-bg-purple-500 bear-text-white";
+        readonly success: "bear-bg-green-500 bear-text-white";
+        readonly warning: "bear-bg-yellow-500 bear-text-black";
+        readonly error: "bear-bg-red-500 bear-text-white";
+        readonly info: "bear-bg-blue-500 bear-text-white";
+    };
+    readonly outlined: {
+        readonly default: "bear-border bear-border-gray-400 bear-text-gray-700 dark:bear-border-zinc-500 dark:bear-text-zinc-300";
+        readonly primary: "bear-border bear-border-primary-500 bear-text-primary-600 dark:bear-text-primary-400";
+        readonly secondary: "bear-border bear-border-purple-500 bear-text-purple-600 dark:bear-text-purple-400";
+        readonly success: "bear-border bear-border-green-500 bear-text-green-700 dark:bear-text-green-400";
+        readonly warning: "bear-border bear-border-yellow-500 bear-text-yellow-700 dark:bear-text-yellow-400";
+        readonly error: "bear-border bear-border-red-500 bear-text-red-600 dark:bear-text-red-400";
+        readonly info: "bear-border bear-border-blue-500 bear-text-blue-600 dark:bear-text-blue-400";
+    };
+    readonly soft: {
+        readonly default: "bear-bg-gray-500/15 bear-text-gray-700 dark:bear-bg-zinc-500/20 dark:bear-text-zinc-300";
+        readonly primary: "bear-bg-primary-500/15 bear-text-primary-700 dark:bear-bg-primary-500/20 dark:bear-text-primary-400";
+        readonly secondary: "bear-bg-purple-500/15 bear-text-purple-700 dark:bear-bg-purple-500/20 dark:bear-text-purple-400";
+        readonly success: "bear-bg-green-500/15 bear-text-green-700 dark:bear-bg-green-500/20 dark:bear-text-green-400";
+        readonly warning: "bear-bg-yellow-500/15 bear-text-yellow-800 dark:bear-bg-yellow-500/20 dark:bear-text-yellow-400";
+        readonly error: "bear-bg-red-500/15 bear-text-red-700 dark:bear-bg-red-500/20 dark:bear-text-red-400";
+        readonly info: "bear-bg-blue-500/15 bear-text-blue-700 dark:bear-bg-blue-500/20 dark:bear-text-blue-400";
+    };
+};
+export declare const CHIP_SIZE_CLASSES: {
+    readonly sm: "bear-h-6 bear-text-xs bear-px-2 bear-gap-1";
+    readonly md: "bear-h-8 bear-text-sm bear-px-3 bear-gap-1.5";
+    readonly lg: "bear-h-10 bear-text-base bear-px-4 bear-gap-2";
+};
+export declare const CHIP_SIZE_COMPACT_CLASSES: {
+    readonly sm: "bear-h-5 bear-text-xs bear-px-1.5 bear-gap-0.5";
+    readonly md: "bear-h-6 bear-text-xs bear-px-2 bear-gap-1";
+    readonly lg: "bear-h-8 bear-text-sm bear-px-3 bear-gap-1.5";
+};
+export declare const CHIP_AVATAR_SIZE_CLASSES: {
+    readonly sm: "[&_.Bear-Avatar]:bear-w-4 [&_.Bear-Avatar]:bear-h-4";
+    readonly md: "[&_.Bear-Avatar]:bear-w-5 [&_.Bear-Avatar]:bear-h-5";
+    readonly lg: "[&_.Bear-Avatar]:bear-w-6 [&_.Bear-Avatar]:bear-h-6";
+};
+export declare const CHIP_DELETE_ICON_SIZES: {
+    readonly sm: "bear-w-3 bear-h-3";
+    readonly md: "bear-w-4 bear-h-4";
+    readonly lg: "bear-w-5 bear-h-5";
+};

package/dist/components/Chip/Chip.const.js

@@ -0,0 +1,53 @@
+const e = "Bear-Chip", r = {
+  filled: {
+    default: "bear-bg-gray-600 bear-text-white dark:bear-bg-zinc-600",
+    primary: "bear-bg-primary-500 bear-text-white",
+    secondary: "bear-bg-purple-500 bear-text-white",
+    success: "bear-bg-green-500 bear-text-white",
+    warning: "bear-bg-yellow-500 bear-text-black",
+    error: "bear-bg-red-500 bear-text-white",
+    info: "bear-bg-blue-500 bear-text-white"
+  },
+  outlined: {
+    default: "bear-border bear-border-gray-400 bear-text-gray-700 dark:bear-border-zinc-500 dark:bear-text-zinc-300",
+    primary: "bear-border bear-border-primary-500 bear-text-primary-600 dark:bear-text-primary-400",
+    secondary: "bear-border bear-border-purple-500 bear-text-purple-600 dark:bear-text-purple-400",
+    success: "bear-border bear-border-green-500 bear-text-green-700 dark:bear-text-green-400",
+    warning: "bear-border bear-border-yellow-500 bear-text-yellow-700 dark:bear-text-yellow-400",
+    error: "bear-border bear-border-red-500 bear-text-red-600 dark:bear-text-red-400",
+    info: "bear-border bear-border-blue-500 bear-text-blue-600 dark:bear-text-blue-400"
+  },
+  soft: {
+    default: "bear-bg-gray-500/15 bear-text-gray-700 dark:bear-bg-zinc-500/20 dark:bear-text-zinc-300",
+    primary: "bear-bg-primary-500/15 bear-text-primary-700 dark:bear-bg-primary-500/20 dark:bear-text-primary-400",
+    secondary: "bear-bg-purple-500/15 bear-text-purple-700 dark:bear-bg-purple-500/20 dark:bear-text-purple-400",
+    success: "bear-bg-green-500/15 bear-text-green-700 dark:bear-bg-green-500/20 dark:bear-text-green-400",
+    warning: "bear-bg-yellow-500/15 bear-text-yellow-800 dark:bear-bg-yellow-500/20 dark:bear-text-yellow-400",
+    error: "bear-bg-red-500/15 bear-text-red-700 dark:bear-bg-red-500/20 dark:bear-text-red-400",
+    info: "bear-bg-blue-500/15 bear-text-blue-700 dark:bear-bg-blue-500/20 dark:bear-text-blue-400"
+  }
+}, a = {
+  sm: "bear-h-6 bear-text-xs bear-px-2 bear-gap-1",
+  md: "bear-h-8 bear-text-sm bear-px-3 bear-gap-1.5",
+  lg: "bear-h-10 bear-text-base bear-px-4 bear-gap-2"
+}, b = {
+  sm: "bear-h-5 bear-text-xs bear-px-1.5 bear-gap-0.5",
+  md: "bear-h-6 bear-text-xs bear-px-2 bear-gap-1",
+  lg: "bear-h-8 bear-text-sm bear-px-3 bear-gap-1.5"
+}, t = {
+  sm: "[&_.Bear-Avatar]:bear-w-4 [&_.Bear-Avatar]:bear-h-4",
+  md: "[&_.Bear-Avatar]:bear-w-5 [&_.Bear-Avatar]:bear-h-5",
+  lg: "[&_.Bear-Avatar]:bear-w-6 [&_.Bear-Avatar]:bear-h-6"
+}, d = {
+  sm: "bear-w-3 bear-h-3",
+  md: "bear-w-4 bear-h-4",
+  lg: "bear-w-5 bear-h-5"
+};
+export {
+  t as CHIP_AVATAR_SIZE_CLASSES,
+  r as CHIP_COLOR_CLASSES,
+  d as CHIP_DELETE_ICON_SIZES,
+  a as CHIP_SIZE_CLASSES,
+  b as CHIP_SIZE_COMPACT_CLASSES,
+  e as C_H_I_P_ROOT_CLASS
+};

package/dist/components/Chip/Chip.js

@@ -1,80 +1,61 @@
-import { jsxs as m, jsx as e } from "react/jsx-runtime";
-import { cn as l } from "../../utils/cn.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";
-const z = ({
-  children: s,
-  variant: i = "filled",
-  color: p = "default",
-  size: b = "md",
-  icon: t,
-  avatar: o,
-  onDelete: n,
-  onClick: a,
-  disabled: r = !1,
-  className: d
-}) => {
-  const c = {
-    filled: {
-      default: "bear-bg-zinc-600 bear-text-white",
-      primary: "bear-bg-primary-500 bear-text-white",
-      secondary: "bear-bg-purple-500 bear-text-white",
-      success: "bear-bg-green-500 bear-text-white",
-      warning: "bear-bg-yellow-500 bear-text-black",
-      error: "bear-bg-red-500 bear-text-white",
-      info: "bear-bg-blue-500 bear-text-white"
-    },
-    outlined: {
-      default: "bear-border bear-border-zinc-500 bear-text-zinc-300",
-      primary: "bear-border bear-border-primary-500 bear-text-primary-400",
-      secondary: "bear-border bear-border-purple-500 bear-text-purple-400",
-      success: "bear-border bear-border-green-500 bear-text-green-400",
-      warning: "bear-border bear-border-yellow-500 bear-text-yellow-400",
-      error: "bear-border bear-border-red-500 bear-text-red-400",
-      info: "bear-border bear-border-blue-500 bear-text-blue-400"
-    },
-    soft: {
-      default: "bear-bg-zinc-500/20 bear-text-zinc-300",
-      primary: "bear-bg-primary-500/20 bear-text-primary-400",
-      secondary: "bear-bg-purple-500/20 bear-text-purple-400",
-      success: "bear-bg-green-500/20 bear-text-green-400",
-      warning: "bear-bg-yellow-500/20 bear-text-yellow-400",
-      error: "bear-bg-red-500/20 bear-text-red-400",
-      info: "bear-bg-blue-500/20 bear-text-blue-400"
-    }
-  }, x = {
-    sm: "bear-h-6 bear-text-xs bear-px-2 bear-gap-1",
-    md: "bear-h-8 bear-text-sm bear-px-3 bear-gap-1.5",
-    lg: "bear-h-10 bear-text-base bear-px-4 bear-gap-2"
-  }, u = { sm: "bear-w-3 bear-h-3", md: "bear-w-4 bear-h-4", lg: "bear-w-5 bear-h-5" };
-  return /* @__PURE__ */ m(
-    a ? "button" : "span",
+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: o = "md",
+    icon: n,
+    avatar: t,
+    onDelete: l,
+    onClick: s,
+    disabled: r = !1,
+    className: p,
+    id: _,
+    testId: C
+  } = c, S = P("Chip"), u = N(_, S), { density: I } = O();
+  return /* @__PURE__ */ h(
+    s ? "button" : "span",
     {
-      onClick: a,
+      id: u,
+      "data-testid": C,
+      onClick: s,
       disabled: r,
-      className: l(
+      className: i(
+        a,
         "bear-inline-flex bear-items-center bear-rounded-full bear-font-medium bear-transition-all",
-        x[b],
-        c[i][p],
-        a && !r && "bear-cursor-pointer hover:bear-opacity-80",
+        (I === "compact" ? k : A)[o],
+        t && L[o],
+        v[m][b],
+        s && !r && "bear-cursor-pointer hover:bear-opacity-80",
         r && "bear-opacity-50 bear-cursor-not-allowed",
-        d
+        p
       ),
       children: [
-        o && /* @__PURE__ */ e("span", { className: "bear--ml-1", children: o }),
-        t && /* @__PURE__ */ e("span", { children: t }),
-        /* @__PURE__ */ e("span", { children: s }),
-        n && /* @__PURE__ */ e(
+        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 }),
+        l && /* @__PURE__ */ e(
           "button",
           {
-            onClick: (g) => {
-              g.stopPropagation(), n();
+            type: "button",
+            onClick: (f) => {
+              f.stopPropagation(), l();
             },
             disabled: r,
-            className: l(
-              "bear-ml-1 bear-rounded-full bear-p-0.5 hover:bear-bg-black/20 bear-transition-colors",
+            className: i(
+              `${a}__delete`,
+              "bear-ml-1 bear-rounded-full bear-p-0.5 hover:bear-bg-black/10 dark:hover:bear-bg-black/20 bear-transition-colors",
               r && "bear-cursor-not-allowed"
             ),
-            children: /* @__PURE__ */ e("svg", { className: u[b], 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" }) })
+            "aria-label": "Remove",
+            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" }) })
           }
         )
       ]
@@ -82,5 +63,5 @@ const z = ({
   );
 };
 export {
-  z as Chip
+  j as Chip
 };

package/dist/components/ChipGroup/ChipGroup.cjs

@@ -0,0 +1 @@
+"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

@@ -0,0 +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-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

@@ -0,0 +1,11 @@
+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-2";
+    readonly lg: "bear-gap-3";
+};
+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

@@ -0,0 +1,14 @@
+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", 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.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { ChipGroupProps } from './ChipGroup.types';
+export declare const ChipGroup: FC<ChipGroupProps>;

package/dist/components/ChipGroup/ChipGroup.js

@@ -0,0 +1,95 @@
+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: 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",
+    {
+      ...L,
+      id: h,
+      "data-testid": f,
+      className: t(
+        r,
+        $,
+        H[P],
+        I
+      ),
+      children: [
+        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 {
+  V as ChipGroup
+};

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

@@ -0,0 +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/ChipGroup/index.d.ts

@@ -0,0 +1,2 @@
+export { ChipGroup } from './ChipGroup';
+export type { ChipGroupProps } from './ChipGroup.types';

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"),I=require("react-dom"),v=require("../../utils/cn.cjs"),R=require("../Icon/index.cjs"),r=require("./Drawer.const.cjs"),g=require("./Drawer.utils.cjs"),D=({isOpen:l,onClose:o,title:i,children:S,side:h="right",anchor:k,variant:M="temporary",size:w="md",showCloseButton:c=!0,closeOnBackdrop:y=!0,closeOnEscape:u=!0,className:N,container:_,id:j,testId:p})=>{const n=k??h,[s,m]=t.useState(l),[f,d]=t.useState(!1),[A,x]=t.useState(!1);t.useEffect(()=>{if(l){m(!0),d(!1);const a=requestAnimationFrame(()=>x(!0));return()=>cancelAnimationFrame(a)}if(s){x(!1),d(!0);const a=setTimeout(()=>{m(!1),d(!1)},r.DRAWER_ANIMATION_MS);return()=>clearTimeout(a)}},[l,s]);const b=t.useCallback(a=>{u&&a.key==="Escape"&&o()},[u,o]);if(t.useEffect(()=>{if(s){document.addEventListener("keydown",b);const a=g.lockBodyScroll();return()=>{document.removeEventListener("keydown",b),a()}}return()=>{document.removeEventListener("keydown",b)}},[s,b]),!s)return null;const E=e.jsxs("div",{className:"bear-fixed bear-inset-0 bear-z-[11000]",children:[e.jsx("div",{className:v.cn("bear-absolute bear-inset-0 bear-bg-black/60 bear-backdrop-blur-sm bear-transition-opacity",f?"bear-opacity-0":"bear-opacity-100"),style:{transitionDuration:`${r.DRAWER_ANIMATION_MS}ms`},onClick:y?o:void 0,"aria-hidden":"true"}),e.jsxs("div",{role:"dialog","aria-modal":"true","aria-labelledby":i?"drawer-title":void 0,className:v.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][w],A&&!f?r.TRANSFORM_OPEN[n]:r.TRANSFORM_CLOSED[n],N),style:{transitionDuration:`${r.DRAWER_ANIMATION_MS}ms`},children:[(i||c)&&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",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}),c&&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(R.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:S})]})]});return I.createPortal(E,_??document.body)};exports.Drawer=D;
+"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,118 +1,122 @@
-import { jsxs as l, jsx as t } from "react/jsx-runtime";
-import { useState as d, useEffect as k, useCallback as A } from "react";
-import { createPortal as R } from "react-dom";
-import { cn as x } from "../../utils/cn.js";
-import { XIcon as D } from "../Icon/index.js";
-import { DRAWER_ANIMATION_MS as c, TRANSFORM_OPEN as M, TRANSFORM_CLOSED as O, SIZE_CLASSES as C, POSITION_CLASSES as L, BORDER_SIDE_MAP as T } from "./Drawer.const.js";
-import { lockBodyScroll as F } from "./Drawer.utils.js";
-const G = ({
-  isOpen: b,
+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: p,
-  side: y = "right",
-  anchor: S,
-  variant: P = "temporary",
-  size: w = "md",
-  showCloseButton: u = !0,
-  closeOnBackdrop: N = !0,
-  closeOnEscape: m = !0,
-  className: E,
-  container: g,
-  id: j,
-  testId: $
+  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 r = S ?? y, [a, f] = d(b), [v, s] = d(!1), [I, h] = d(!1);
-  k(() => {
-    if (b) {
-      f(!0), s(!1);
-      const e = requestAnimationFrame(() => h(!0));
+  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(() => w(!0));
       return () => cancelAnimationFrame(e);
     }
     if (a) {
-      h(!1), s(!0);
+      w(!1), b(!0);
       const e = setTimeout(() => {
-        f(!1), s(!1);
-      }, c);
+        v(!1), b(!1);
+      }, u);
       return () => clearTimeout(e);
     }
-  }, [b, a]);
-  const i = A(
+  }, [s, a]);
+  const l = R(
     (e) => {
-      m && e.key === "Escape" && o();
+      p && e.key === "Escape" && o();
     },
-    [m, o]
+    [p, o]
   );
-  if (k(() => {
+  if (S(() => {
     if (a) {
-      document.addEventListener("keydown", i);
-      const e = F();
+      document.addEventListener("keydown", l);
+      const e = Z();
       return () => {
-        document.removeEventListener("keydown", i), e();
+        document.removeEventListener("keydown", l), e();
       };
     }
     return () => {
-      document.removeEventListener("keydown", i);
+      document.removeEventListener("keydown", l);
     };
-  }, [a, i]), !a) return null;
-  const _ = /* @__PURE__ */ l("div", { className: "bear-fixed bear-inset-0 bear-z-[11000]", children: [
+  }, [a, l]), !a) return null;
+  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: x(
-          "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: `${c}ms` },
-        onClick: N ? o : void 0,
-        "aria-hidden": "true"
+        open: x && !k,
+        keepMounted: !0,
+        blur: !0,
+        transitionDuration: u,
+        className: "Bear-Drawer__backdrop",
+        onClick: _ ? () => o() : void 0
       }
     ),
-    /* @__PURE__ */ l(
+    /* @__PURE__ */ c(
       "div",
       {
         role: "dialog",
         "aria-modal": "true",
-        "aria-labelledby": n ? "drawer-title" : void 0,
-        className: x(
+        "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",
-          T[r],
-          L[r],
-          C[r][w],
-          I && !v ? M[r] : O[r],
-          E
+          X[r],
+          W[r],
+          H[r][I],
+          x && !k ? q[r] : z[r],
+          y
         ),
-        style: { transitionDuration: `${c}ms` },
+        style: { transitionDuration: `${u}ms` },
         children: [
-          (n || u) && /* @__PURE__ */ l("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", 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
               }
             ),
-            u && /* @__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(D, { 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: p })
+          /* @__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(_, g ?? document.body);
+  return C(O, D ?? document.body);
 };
 export {
-  G 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;