@forgedevstack/bear 1.2.6 → 1.2.8

package/README.md

@@ -1,6 +1,6 @@
 # @forgedevstack/bear
 
-Strong, reliable React UI components. Tailwind-powered, zero config required. The protective force of ForgeStack.
+Strong, reliable React UI components. AeroCraft-powered, zero config required. The protective force of ForgeStack.
 
 ## Portal
 
@@ -19,7 +19,11 @@ cd portal && npm run test:e2e:smoke
 cd portal && npm run test:e2e
 ```
 
-`BEAR_E2E_SMOKE=1` runs `e2e/specs/smoke.spec.ts` only. The e2e webServer builds Bear, then starts the portal on port `5174`.
+`BEAR_E2E_SMOKE=1` runs `e2e/specs/smoke.spec.ts` only (includes RTL direction + Toast aria-live checks). The e2e webServer builds Bear, then starts the portal on port `5174`.
+
+### Auto DOM ids
+
+Public components generate root `id` values as `Bear-{Component}-{alphanumeric}` (e.g. `Bear-Button-a48293100123`). Pass `id` to override; keep `testId` on `data-testid`.
 
 ## Features
 

package/dist/components/AppBar/AppBar.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const A=require("react/jsx-runtime"),_=require("./AppBar.const.cjs"),N=require("../../context/BearProvider.cjs");require("../../context/defaultTheme.cjs");const e=require("../../utils/cn.cjs");require("react");const l=require("../../utils/generateBearId.utils.cjs"),I=r=>{const{children:t,position:n=_.DEFAULT_APP_BAR_POSITION,variant:E=_.DEFAULT_APP_BAR_VARIANT,color:S=_.DEFAULT_APP_BAR_COLOR,className:s,leftContent:R,rightContent:B,centerContent:a,elevation:i=_.DEFAULT_APP_BAR_ELEVATION,dense:C,disableGutters:c=_.DEFAULT_APP_BAR_DISABLE_GUTTERS,enableColorOnDark:O=_.DEFAULT_APP_BAR_ENABLE_COLOR_ON_DARK,id:o,testId:T}=r,{density:L}=N.useBearDensityOptional(),P=C??L==="compact",d=o||l.generateBearId("AppBar");return A.jsx("header",{id:d,"data-testid":T,className:e.cn(_.APP_BAR_ROOT_CLASS,_.APP_BAR_BASE_CLASS,P?_.APP_BAR_HEIGHT_DENSE:_.APP_BAR_HEIGHT_COMFORTABLE,!c&&(P?_.APP_BAR_GUTTER_X_DENSE:_.APP_BAR_GUTTER_X),_.APP_BAR_POSITION_CLASSES[n],_.APP_BAR_VARIANT_CLASSES[E],_.APP_BAR_COLOR_CLASSES[S],O&&S==="default"&&_.APP_BAR_COLOR_ON_DARK_CLASS,i&&_.APP_BAR_ELEVATION_CLASS,P&&_.APP_BAR_DENSE_MODIFIER_CLASS,s),style:{backgroundColor:S==="primary"?"var(--bear-primary-600)":void 0},children:t??A.jsxs(A.Fragment,{children:[A.jsx("div",{className:e.cn(_.APP_BAR_SECTION_CLASS,_.APP_BAR_SECTION_BASE_CLASS),children:R}),A.jsx("div",{className:e.cn(_.APP_BAR_SECTION_CLASS,_.APP_BAR_SECTION_CENTER_CLASS,_.APP_BAR_SECTION_BASE_CLASS,_.APP_BAR_SECTION_GROW_CLASS),children:a}),A.jsx("div",{className:e.cn(_.APP_BAR_SECTION_CLASS,_.APP_BAR_SECTION_END_CLASS,_.APP_BAR_SECTION_BASE_CLASS),children:B})]})})};exports.AppBar=I;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const A=require("react/jsx-runtime"),_=require("./AppBar.const.cjs"),N=require("../../context/BearProvider.cjs");require("../../context/defaultTheme.cjs");const e=require("../../utils/cn.cjs");require("react");const l=require("../../utils/generateBearId.utils.cjs"),u=require("../../utils/useBearId.cjs"),D=P=>{const{children:t,position:n=_.DEFAULT_APP_BAR_POSITION,variant:s=_.DEFAULT_APP_BAR_VARIANT,color:r=_.DEFAULT_APP_BAR_COLOR,className:E,leftContent:B,rightContent:R,centerContent:a,elevation:i=_.DEFAULT_APP_BAR_ELEVATION,dense:C,disableGutters:c=_.DEFAULT_APP_BAR_DISABLE_GUTTERS,enableColorOnDark:o=_.DEFAULT_APP_BAR_ENABLE_COLOR_ON_DARK,id:O,testId:T}=P,{density:d}=N.useBearDensityOptional(),S=C??d==="compact",L=u.useBearId("AppBar"),I=l.resolveBearId(O,L);return A.jsx("header",{id:I,"data-testid":T,className:e.cn(_.APP_BAR_ROOT_CLASS,_.APP_BAR_BASE_CLASS,S?_.APP_BAR_HEIGHT_DENSE:_.APP_BAR_HEIGHT_COMFORTABLE,!c&&(S?_.APP_BAR_GUTTER_X_DENSE:_.APP_BAR_GUTTER_X),_.APP_BAR_POSITION_CLASSES[n],_.APP_BAR_VARIANT_CLASSES[s],_.APP_BAR_COLOR_CLASSES[r],o&&r==="default"&&_.APP_BAR_COLOR_ON_DARK_CLASS,i&&_.APP_BAR_ELEVATION_CLASS,S&&_.APP_BAR_DENSE_MODIFIER_CLASS,E),style:{backgroundColor:r==="primary"?"var(--bear-primary-600)":void 0},children:t??A.jsxs(A.Fragment,{children:[A.jsx("div",{className:e.cn(_.APP_BAR_SECTION_CLASS,_.APP_BAR_SECTION_BASE_CLASS),children:B}),A.jsx("div",{className:e.cn(_.APP_BAR_SECTION_CLASS,_.APP_BAR_SECTION_CENTER_CLASS,_.APP_BAR_SECTION_BASE_CLASS,_.APP_BAR_SECTION_GROW_CLASS),children:a}),A.jsx("div",{className:e.cn(_.APP_BAR_SECTION_CLASS,_.APP_BAR_SECTION_END_CLASS,_.APP_BAR_SECTION_BASE_CLASS),children:R})]})})};exports.AppBar=D;

package/dist/components/AppBar/AppBar.js

@@ -1,71 +1,72 @@
-import { jsx as _, jsxs as l, Fragment as m } from "react/jsx-runtime";
-import { DEFAULT_APP_BAR_POSITION as I, DEFAULT_APP_BAR_VARIANT as p, DEFAULT_APP_BAR_COLOR as D, DEFAULT_APP_BAR_ELEVATION as F, DEFAULT_APP_BAR_DISABLE_GUTTERS as U, DEFAULT_APP_BAR_ENABLE_COLOR_ON_DARK as h, APP_BAR_SECTION_BASE_CLASS as r, APP_BAR_SECTION_CLASS as S, APP_BAR_SECTION_GROW_CLASS as v, APP_BAR_SECTION_CENTER_CLASS as f, APP_BAR_SECTION_END_CLASS as G, APP_BAR_DENSE_MODIFIER_CLASS as u, APP_BAR_ELEVATION_CLASS as y, APP_BAR_COLOR_ON_DARK_CLASS as b, APP_BAR_COLOR_CLASSES as g, APP_BAR_VARIANT_CLASSES as H, APP_BAR_POSITION_CLASSES as V, APP_BAR_GUTTER_X_DENSE as x, APP_BAR_GUTTER_X as j, APP_BAR_HEIGHT_DENSE as k, APP_BAR_HEIGHT_COMFORTABLE as K, APP_BAR_BASE_CLASS as M, APP_BAR_ROOT_CLASS as X } from "./AppBar.const.js";
-import { useBearDensityOptional as W } from "../../context/BearProvider.js";
+import { jsx as _, jsxs as m, Fragment as I } from "react/jsx-runtime";
+import { DEFAULT_APP_BAR_POSITION as p, DEFAULT_APP_BAR_VARIANT as D, DEFAULT_APP_BAR_COLOR as v, DEFAULT_APP_BAR_ELEVATION as F, DEFAULT_APP_BAR_DISABLE_GUTTERS as U, DEFAULT_APP_BAR_ENABLE_COLOR_ON_DARK as f, APP_BAR_SECTION_BASE_CLASS as P, APP_BAR_SECTION_CLASS as t, APP_BAR_SECTION_GROW_CLASS as h, APP_BAR_SECTION_CENTER_CLASS as G, APP_BAR_SECTION_END_CLASS as u, APP_BAR_DENSE_MODIFIER_CLASS as y, APP_BAR_ELEVATION_CLASS as b, APP_BAR_COLOR_ON_DARK_CLASS as g, APP_BAR_COLOR_CLASSES as H, APP_BAR_VARIANT_CLASSES as V, APP_BAR_POSITION_CLASSES as x, APP_BAR_GUTTER_X_DENSE as j, APP_BAR_GUTTER_X as k, APP_BAR_HEIGHT_DENSE as K, APP_BAR_HEIGHT_COMFORTABLE as M, APP_BAR_BASE_CLASS as X, APP_BAR_ROOT_CLASS as W } from "./AppBar.const.js";
+import { useBearDensityOptional as q } from "../../context/BearProvider.js";
 import "../../context/defaultTheme.js";
 import { cn as A } from "../../utils/cn.js";
 import "react";
-import { generateBearId as q } from "../../utils/generateBearId.utils.js";
-const __ = (t) => {
+import { resolveBearId as w } from "../../utils/generateBearId.utils.js";
+import { useBearId as z } from "../../utils/useBearId.js";
+const r_ = (S) => {
   const {
-    children: E,
-    position: R = I,
-    variant: o = p,
-    color: P = D,
+    children: o,
+    position: E = p,
+    variant: R = D,
+    color: e = v,
     className: a,
     leftContent: n,
-    rightContent: i,
-    centerContent: B,
-    elevation: s = F,
+    rightContent: s,
+    centerContent: i,
+    elevation: B = F,
     dense: C,
     disableGutters: O = U,
-    enableColorOnDark: L = h,
+    enableColorOnDark: L = f,
     id: T,
     testId: d
-  } = t, { density: N } = W(), e = C ?? N === "compact", c = T || q("AppBar");
+  } = S, { density: N } = q(), r = C ?? N === "compact", c = z("AppBar"), l = w(T, c);
   return /* @__PURE__ */ _(
     "header",
     {
-      id: c,
+      id: l,
       "data-testid": d,
       className: A(
+        W,
         X,
-        M,
-        e ? k : K,
-        !O && (e ? x : j),
+        r ? K : M,
+        !O && (r ? j : k),
+        x[E],
         V[R],
-        H[o],
-        g[P],
-        L && P === "default" && b,
-        s && y,
-        e && u,
+        H[e],
+        L && e === "default" && g,
+        B && b,
+        r && y,
         a
       ),
       style: {
-        backgroundColor: P === "primary" ? "var(--bear-primary-600)" : void 0
+        backgroundColor: e === "primary" ? "var(--bear-primary-600)" : void 0
       },
-      children: E ?? /* @__PURE__ */ l(m, { children: [
-        /* @__PURE__ */ _("div", { className: A(S, r), children: n }),
+      children: o ?? /* @__PURE__ */ m(I, { children: [
+        /* @__PURE__ */ _("div", { className: A(t, P), children: n }),
         /* @__PURE__ */ _(
           "div",
           {
             className: A(
-              S,
-              f,
-              r,
-              v
+              t,
+              G,
+              P,
+              h
             ),
-            children: B
+            children: i
           }
         ),
         /* @__PURE__ */ _(
           "div",
           {
             className: A(
-              S,
-              G,
-              r
+              t,
+              u,
+              P
             ),
-            children: i
+            children: s
           }
         )
       ] })
@@ -73,5 +74,5 @@ const __ = (t) => {
   );
 };
 export {
-  __ as AppBar
+  r_ as AppBar
 };

package/dist/components/AppShell/AppShell.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const S=require("react/jsx-runtime"),e=require("./AppShell.const.cjs"),_=require("../../utils/cn.cjs");require("react");const I=require("../../utils/generateBearId.utils.cjs"),N=require("../../utils/useBearId.cjs"),T=r=>{const{header:A,navbar:L,aside:s,footer:E,children:P,navbarCollapsed:a=e.APP_SHELL_DEFAULT_NAVBAR_COLLAPSED,navbarWidth:d=e.APP_SHELL_DEFAULT_NAVBAR_WIDTH,stickyHeader:i=e.APP_SHELL_DEFAULT_STICKY_HEADER,stickyFooter:c=e.APP_SHELL_DEFAULT_STICKY_FOOTER,padding:n=e.APP_SHELL_DEFAULT_PADDING,className:t,id:l,testId:H,...o}=r,C=N.useBearId("AppShell"),D=I.resolveBearId(l,C);return S.jsxs("div",{...o,id:D,"data-testid":H,className:_.cn(e.APP_SHELL_ROOT_CLASS,e.APP_SHELL_BASE_CLASSES,t),children:[A&&S.jsx("div",{className:_.cn(e.APP_SHELL_HEADER_CLASSES,i&&e.APP_SHELL_HEADER_STICKY_CLASS),children:A}),S.jsxs("div",{className:e.APP_SHELL_BODY_CLASSES,children:[L!==void 0&&S.jsx("aside",{className:_.cn(e.APP_SHELL_NAVBAR_BASE_CLASSES,a?e.APP_SHELL_NAVBAR_COLLAPSED_CLASS:e.APP_SHELL_NAVBAR_WIDTH_CLASSES[d]),"aria-hidden":a||void 0,children:L}),S.jsx("main",{className:_.cn(e.APP_SHELL_MAIN_CLASSES,n&&e.APP_SHELL_MAIN_PADDING_CLASS),children:P}),s&&S.jsx("aside",{className:e.APP_SHELL_ASIDE_CLASSES,children:s})]}),E&&S.jsx("div",{className:_.cn(e.APP_SHELL_FOOTER_CLASSES,c&&e.APP_SHELL_FOOTER_STICKY_CLASS),children:E})]})};exports.AppShell=T;

package/dist/components/AppShell/AppShell.const.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const _="Bear-AppShell",S=!1,r="md",A=!0,L=!1,e=!0,a="bear-flex bear-flex-col bear-min-h-0 bear-w-full bear-bg-[var(--bear-bg-primary)] bear-text-[var(--bear-text-primary)]",E=`${_}__body bear-flex bear-flex-1 bear-min-h-0 bear-w-full`,b=`${_}__header bear-w-full bear-z-30 bear-bg-[var(--bear-bg-primary)] bear-border-b bear-border-[var(--bear-border-default)]`,P="bear-sticky bear-top-0",o=`${_}__navbar bear-flex-shrink-0 bear-overflow-y-auto bear-border-e bear-border-[var(--bear-border-default)] bear-bg-[var(--bear-bg-secondary)]`,H={sm:"bear-w-56",md:"bear-w-64",lg:"bear-w-72"},t="bear-w-0 bear-overflow-hidden bear-border-e-0",C=`${_}__main bear-flex-1 bear-min-w-0 bear-overflow-auto`,D="bear-p-4 md:bear-p-6",l=`${_}__aside bear-w-64 bear-flex-shrink-0 bear-overflow-y-auto bear-border-s bear-border-[var(--bear-border-default)] bear-bg-[var(--bear-bg-secondary)] bear-hidden lg:bear-block`,d=`${_}__footer bear-w-full bear-z-20 bear-bg-[var(--bear-bg-primary)] bear-border-t bear-border-[var(--bear-border-default)]`,n="bear-sticky bear-bottom-0";exports.APP_SHELL_ASIDE_CLASSES=l;exports.APP_SHELL_BASE_CLASSES=a;exports.APP_SHELL_BODY_CLASSES=E;exports.APP_SHELL_DEFAULT_NAVBAR_COLLAPSED=S;exports.APP_SHELL_DEFAULT_NAVBAR_WIDTH=r;exports.APP_SHELL_DEFAULT_PADDING=e;exports.APP_SHELL_DEFAULT_STICKY_FOOTER=L;exports.APP_SHELL_DEFAULT_STICKY_HEADER=A;exports.APP_SHELL_FOOTER_CLASSES=d;exports.APP_SHELL_FOOTER_STICKY_CLASS=n;exports.APP_SHELL_HEADER_CLASSES=b;exports.APP_SHELL_HEADER_STICKY_CLASS=P;exports.APP_SHELL_MAIN_CLASSES=C;exports.APP_SHELL_MAIN_PADDING_CLASS=D;exports.APP_SHELL_NAVBAR_BASE_CLASSES=o;exports.APP_SHELL_NAVBAR_COLLAPSED_CLASS=t;exports.APP_SHELL_NAVBAR_WIDTH_CLASSES=H;exports.APP_SHELL_ROOT_CLASS=_;

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

@@ -0,0 +1,19 @@
+import { AppShellNavbarWidth } from './AppShell.types';
+export declare const APP_SHELL_ROOT_CLASS = "Bear-AppShell";
+export declare const APP_SHELL_DEFAULT_NAVBAR_COLLAPSED = false;
+export declare const APP_SHELL_DEFAULT_NAVBAR_WIDTH: AppShellNavbarWidth;
+export declare const APP_SHELL_DEFAULT_STICKY_HEADER = true;
+export declare const APP_SHELL_DEFAULT_STICKY_FOOTER = false;
+export declare const APP_SHELL_DEFAULT_PADDING = true;
+export declare const APP_SHELL_BASE_CLASSES = "bear-flex bear-flex-col bear-min-h-0 bear-w-full bear-bg-[var(--bear-bg-primary)] bear-text-[var(--bear-text-primary)]";
+export declare const APP_SHELL_BODY_CLASSES = "Bear-AppShell__body bear-flex bear-flex-1 bear-min-h-0 bear-w-full";
+export declare const APP_SHELL_HEADER_CLASSES = "Bear-AppShell__header bear-w-full bear-z-30 bear-bg-[var(--bear-bg-primary)] bear-border-b bear-border-[var(--bear-border-default)]";
+export declare const APP_SHELL_HEADER_STICKY_CLASS = "bear-sticky bear-top-0";
+export declare const APP_SHELL_NAVBAR_BASE_CLASSES = "Bear-AppShell__navbar bear-flex-shrink-0 bear-overflow-y-auto bear-border-e bear-border-[var(--bear-border-default)] bear-bg-[var(--bear-bg-secondary)]";
+export declare const APP_SHELL_NAVBAR_WIDTH_CLASSES: Record<AppShellNavbarWidth, string>;
+export declare const APP_SHELL_NAVBAR_COLLAPSED_CLASS = "bear-w-0 bear-overflow-hidden bear-border-e-0";
+export declare const APP_SHELL_MAIN_CLASSES = "Bear-AppShell__main bear-flex-1 bear-min-w-0 bear-overflow-auto";
+export declare const APP_SHELL_MAIN_PADDING_CLASS = "bear-p-4 md:bear-p-6";
+export declare const APP_SHELL_ASIDE_CLASSES = "Bear-AppShell__aside bear-w-64 bear-flex-shrink-0 bear-overflow-y-auto bear-border-s bear-border-[var(--bear-border-default)] bear-bg-[var(--bear-bg-secondary)] bear-hidden lg:bear-block";
+export declare const APP_SHELL_FOOTER_CLASSES = "Bear-AppShell__footer bear-w-full bear-z-20 bear-bg-[var(--bear-bg-primary)] bear-border-t bear-border-[var(--bear-border-default)]";
+export declare const APP_SHELL_FOOTER_STICKY_CLASS = "bear-sticky bear-bottom-0";

package/dist/components/AppShell/AppShell.const.js

@@ -0,0 +1,25 @@
+const r = "Bear-AppShell", e = !1, a = "md", b = !0, _ = !1, S = !0, A = "bear-flex bear-flex-col bear-min-h-0 bear-w-full bear-bg-[var(--bear-bg-primary)] bear-text-[var(--bear-text-primary)]", L = `${r}__body bear-flex bear-flex-1 bear-min-h-0 bear-w-full`, o = `${r}__header bear-w-full bear-z-30 bear-bg-[var(--bear-bg-primary)] bear-border-b bear-border-[var(--bear-border-default)]`, E = "bear-sticky bear-top-0", P = `${r}__navbar bear-flex-shrink-0 bear-overflow-y-auto bear-border-e bear-border-[var(--bear-border-default)] bear-bg-[var(--bear-bg-secondary)]`, t = {
+  sm: "bear-w-56",
+  md: "bear-w-64",
+  lg: "bear-w-72"
+}, l = "bear-w-0 bear-overflow-hidden bear-border-e-0", d = `${r}__main bear-flex-1 bear-min-w-0 bear-overflow-auto`, n = "bear-p-4 md:bear-p-6", s = `${r}__aside bear-w-64 bear-flex-shrink-0 bear-overflow-y-auto bear-border-s bear-border-[var(--bear-border-default)] bear-bg-[var(--bear-bg-secondary)] bear-hidden lg:bear-block`, c = `${r}__footer bear-w-full bear-z-20 bear-bg-[var(--bear-bg-primary)] bear-border-t bear-border-[var(--bear-border-default)]`, H = "bear-sticky bear-bottom-0";
+export {
+  s as APP_SHELL_ASIDE_CLASSES,
+  A as APP_SHELL_BASE_CLASSES,
+  L as APP_SHELL_BODY_CLASSES,
+  e as APP_SHELL_DEFAULT_NAVBAR_COLLAPSED,
+  a as APP_SHELL_DEFAULT_NAVBAR_WIDTH,
+  S as APP_SHELL_DEFAULT_PADDING,
+  _ as APP_SHELL_DEFAULT_STICKY_FOOTER,
+  b as APP_SHELL_DEFAULT_STICKY_HEADER,
+  c as APP_SHELL_FOOTER_CLASSES,
+  H as APP_SHELL_FOOTER_STICKY_CLASS,
+  o as APP_SHELL_HEADER_CLASSES,
+  E as APP_SHELL_HEADER_STICKY_CLASS,
+  d as APP_SHELL_MAIN_CLASSES,
+  n as APP_SHELL_MAIN_PADDING_CLASS,
+  P as APP_SHELL_NAVBAR_BASE_CLASSES,
+  l as APP_SHELL_NAVBAR_COLLAPSED_CLASS,
+  t as APP_SHELL_NAVBAR_WIDTH_CLASSES,
+  r as APP_SHELL_ROOT_CLASS
+};

package/dist/components/AppShell/AppShell.d.ts

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

package/dist/components/AppShell/AppShell.js

@@ -0,0 +1,82 @@
+import { jsxs as a, jsx as _ } from "react/jsx-runtime";
+import { APP_SHELL_DEFAULT_NAVBAR_COLLAPSED as D, APP_SHELL_DEFAULT_NAVBAR_WIDTH as N, APP_SHELL_DEFAULT_STICKY_HEADER as I, APP_SHELL_DEFAULT_STICKY_FOOTER as T, APP_SHELL_DEFAULT_PADDING as p, APP_SHELL_HEADER_STICKY_CLASS as h, APP_SHELL_HEADER_CLASSES as R, APP_SHELL_BODY_CLASSES as O, APP_SHELL_NAVBAR_COLLAPSED_CLASS as v, APP_SHELL_NAVBAR_WIDTH_CLASSES as B, APP_SHELL_NAVBAR_BASE_CLASSES as F, APP_SHELL_MAIN_PADDING_CLASS as f, APP_SHELL_MAIN_CLASSES as U, APP_SHELL_ASIDE_CLASSES as V, APP_SHELL_FOOTER_STICKY_CLASS as Y, APP_SHELL_FOOTER_CLASSES as K, APP_SHELL_BASE_CLASSES as b, APP_SHELL_ROOT_CLASS as x } from "./AppShell.const.js";
+import { cn as S } from "../../utils/cn.js";
+import "react";
+import { resolveBearId as W } from "../../utils/generateBearId.utils.js";
+import { useBearId as g } from "../../utils/useBearId.js";
+const q = (d) => {
+  const {
+    header: A,
+    navbar: L,
+    aside: E,
+    footer: e,
+    children: r,
+    navbarCollapsed: P = D,
+    navbarWidth: s = N,
+    stickyHeader: i = I,
+    stickyFooter: o = T,
+    padding: t = p,
+    className: H,
+    id: c,
+    testId: l,
+    ...m
+  } = d, n = g("AppShell"), C = W(c, n);
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      ...m,
+      id: C,
+      "data-testid": l,
+      className: S(x, b, H),
+      children: [
+        A && /* @__PURE__ */ _(
+          "div",
+          {
+            className: S(
+              R,
+              i && h
+            ),
+            children: A
+          }
+        ),
+        /* @__PURE__ */ a("div", { className: O, children: [
+          L !== void 0 && /* @__PURE__ */ _(
+            "aside",
+            {
+              className: S(
+                F,
+                P ? v : B[s]
+              ),
+              "aria-hidden": P || void 0,
+              children: L
+            }
+          ),
+          /* @__PURE__ */ _(
+            "main",
+            {
+              className: S(
+                U,
+                t && f
+              ),
+              children: r
+            }
+          ),
+          E && /* @__PURE__ */ _("aside", { className: V, children: E })
+        ] }),
+        e && /* @__PURE__ */ _(
+          "div",
+          {
+            className: S(
+              K,
+              o && Y
+            ),
+            children: e
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  q as AppShell
+};

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

@@ -0,0 +1,16 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export type AppShellNavbarWidth = 'sm' | 'md' | 'lg';
+export interface AppShellProps extends HTMLAttributes<HTMLDivElement> {
+    header?: ReactNode;
+    navbar?: ReactNode;
+    aside?: ReactNode;
+    footer?: ReactNode;
+    children?: ReactNode;
+    navbarCollapsed?: boolean;
+    navbarWidth?: AppShellNavbarWidth;
+    stickyHeader?: boolean;
+    stickyFooter?: boolean;
+    padding?: boolean;
+    id?: string;
+    testId?: string;
+}

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

@@ -0,0 +1,2 @@
+export { AppShell } from './AppShell';
+export type { AppShellProps, AppShellNavbarWidth } from './AppShell.types';

package/dist/components/Autocomplete/Autocomplete.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),a=require("react"),x=require("../../utils/cn.cjs"),D=require("../Portal/Portal.cjs"),V=require("./Autocomplete.utils.cjs"),M=require("./Autocomplete.const.cjs"),C=({options:z,value:b="",onChange:i,onSelect:g,placeholder:I="Start typing...",label:k,helperText:v,error:u,disabled:f=!1,freeSolo:j=!1,loading:E=!1,filterOptions:q=V.defaultFilter,className:_,testId:B})=>{const[c,s]=a.useState(!1),[n,m]=a.useState(-1),[l,T]=a.useState({top:0,left:0,width:0}),N=a.useRef(null),P=a.useRef(null),h=a.useRef(null),A=a.useRef(null),w=a.useRef(null),o=q(z,b),y=c&&!f&&o.length>0,p=c&&!f&&o.length===0&&!!b&&!E;a.useEffect(()=>{if(!y&&!p)return;const e=()=>{var d;const r=(d=P.current)==null?void 0:d.getBoundingClientRect();r&&T({top:r.bottom+4,left:Math.max(8,Math.min(r.left,window.innerWidth-r.width-8)),width:r.width})};return e(),window.addEventListener("resize",e),window.addEventListener("scroll",e,!0),()=>{window.removeEventListener("resize",e),window.removeEventListener("scroll",e,!0)}},[y,p]),a.useEffect(()=>{if(!c)return;const e=r=>{var R,O;const d=r.target;(R=N.current)!=null&&R.contains(d)||(O=h.current)!=null&&O.contains(d)||s(!1)};return document.addEventListener("mousedown",e),()=>document.removeEventListener("mousedown",e)},[c]),a.useEffect(()=>{m(-1)},[b]),a.useEffect(()=>{if(n>=0&&w.current){const e=w.current.children[n];e&&e.scrollIntoView({block:"nearest"})}},[n]);const U=e=>{const r=e.target.value;i==null||i(r),s(!0)},L=e=>{var r;i==null||i(e.label),g==null||g(e),s(!1),(r=A.current)==null||r.blur()},W=e=>{if(!c){(e.key==="ArrowDown"||e.key==="ArrowUp")&&(s(!0),e.preventDefault());return}switch(e.key){case"ArrowDown":e.preventDefault(),m(r=>r<o.length-1?r+1:0);break;case"ArrowUp":e.preventDefault(),m(r=>r>0?r-1:o.length-1);break;case"Enter":e.preventDefault(),n>=0&&o[n]?L(o[n]):j&&b&&s(!1);break;case"Escape":s(!1);break}};return t.jsxs("div",{className:x.cn("bear-w-full bear-relative",_),ref:N,"data-testid":B,children:[k&&t.jsx("label",{className:"bear-block bear-text-sm bear-font-medium bear-text-gray-700 dark:bear-text-gray-200 bear-mb-1.5",children:k}),t.jsxs("div",{className:"bear-relative",ref:P,children:[t.jsx("input",{ref:A,type:"text",value:b,onChange:U,onFocus:()=>s(!0),onKeyDown:W,placeholder:I,disabled:f,className:x.cn("bear-w-full bear-px-4 bear-py-2.5 bear-pr-10 bear-rounded-lg bear-border","bear-bg-white dark:bear-bg-gray-900","bear-text-sm bear-text-gray-900 dark:bear-text-white","placeholder:bear-text-gray-400","bear-transition-colors bear-outline-none",u?"bear-border-red-500 focus:bear-ring-2 focus:bear-ring-red-500/20":"bear-border-gray-300 dark:bear-border-gray-600 focus:bear-border-amber-500 focus:bear-ring-2 focus:bear-ring-amber-500/20",f&&"bear-opacity-50 bear-cursor-not-allowed bear-bg-gray-100 dark:bear-bg-gray-800")}),t.jsx("div",{className:"bear-absolute bear-right-3 bear-top-1/2 bear-transform bear--translate-y-1/2",children:E?t.jsxs("svg",{className:"bear-animate-spin bear-w-4 bear-h-4 bear-text-gray-400",viewBox:"0 0 24 24",fill:"none",children:[t.jsx("circle",{className:"bear-opacity-25",cx:"12",cy:"12",r:"10",stroke:"currentColor",strokeWidth:"4"}),t.jsx("path",{className:"bear-opacity-75",fill:"currentColor",d:"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"})]}):t.jsx("svg",{className:"bear-w-4 bear-h-4 bear-text-gray-400",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",children:t.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"})})})]}),y&&t.jsx(D.Portal,{children:t.jsx("div",{ref:h,className:"bear-fixed bear-rounded-lg bear-border bear-border-gray-200 dark:bear-border-gray-700 bear-shadow-lg bear-bg-white dark:bear-bg-gray-800",style:{top:l.top,left:l.left,width:l.width,zIndex:M.AUTOCOMPLETE_PANEL_Z},children:t.jsx("div",{ref:w,className:"bear-max-h-60 bear-overflow-auto bear-py-1",children:o.map((e,r)=>t.jsxs("button",{type:"button",disabled:e.disabled,onClick:()=>L(e),className:x.cn("bear-w-full bear-px-4 bear-py-2 bear-text-left bear-text-sm bear-transition-colors","bear-text-gray-900 dark:bear-text-white",r===n?"bear-bg-amber-50 dark:bear-bg-amber-900/20":"hover:bear-bg-gray-50 dark:hover:bear-bg-gray-700",e.disabled&&"bear-opacity-50 bear-cursor-not-allowed"),children:[t.jsx("div",{className:"bear-font-medium",children:e.label}),e.description&&t.jsx("div",{className:"bear-text-xs bear-text-gray-500 dark:bear-text-gray-400 bear-mt-0.5",children:e.description})]},e.value))})})}),p&&t.jsx(D.Portal,{children:t.jsx("div",{ref:h,className:"bear-fixed bear-py-3 bear-px-4 bear-bg-white dark:bear-bg-gray-800 bear-border bear-border-gray-200 dark:bear-border-gray-700 bear-rounded-lg bear-shadow-lg bear-text-sm bear-text-gray-500",style:{top:l.top,left:l.left,width:l.width,zIndex:M.AUTOCOMPLETE_PANEL_Z},children:j?"Press Enter to use this value":"No results found"})}),(v||u)&&t.jsx("p",{className:x.cn("bear-mt-1.5 bear-text-xs",u?"bear-text-red-500":"bear-text-gray-500 dark:bear-text-gray-400"),children:u||v})]})};exports.Autocomplete=C;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),a=require("react"),m=require("../../utils/cn.cjs"),D=require("../Portal/Portal.cjs"),V=require("./Autocomplete.utils.cjs"),M=require("./Autocomplete.const.cjs"),C=({options:z,value:b="",onChange:i,onSelect:x,placeholder:I="Start typing...",label:v,helperText:j,error:u,disabled:f=!1,freeSolo:k=!1,loading:E=!1,filterOptions:q=V.defaultFilter,className:_,testId:B})=>{const[c,s]=a.useState(!1),[n,h]=a.useState(-1),[l,T]=a.useState({top:0,left:0,width:0}),N=a.useRef(null),P=a.useRef(null),p=a.useRef(null),A=a.useRef(null),w=a.useRef(null),o=q(z,b),g=c&&!f&&o.length>0,y=c&&!f&&o.length===0&&!!b&&!E;a.useEffect(()=>{if(!g&&!y)return;const e=()=>{var d;const r=(d=P.current)==null?void 0:d.getBoundingClientRect();r&&T({top:r.bottom+4,left:Math.max(8,Math.min(r.left,window.innerWidth-r.width-8)),width:r.width})};return e(),window.addEventListener("resize",e),window.addEventListener("scroll",e,!0),()=>{window.removeEventListener("resize",e),window.removeEventListener("scroll",e,!0)}},[g,y]),a.useEffect(()=>{if(!c)return;const e=r=>{var R,O;const d=r.target;(R=N.current)!=null&&R.contains(d)||(O=p.current)!=null&&O.contains(d)||s(!1)};return document.addEventListener("mousedown",e),()=>document.removeEventListener("mousedown",e)},[c]),a.useEffect(()=>{h(-1)},[b]),a.useEffect(()=>{if(n>=0&&w.current){const e=w.current.children[n];e&&e.scrollIntoView({block:"nearest"})}},[n]);const U=e=>{const r=e.target.value;i==null||i(r),s(!0)},L=e=>{var r;i==null||i(e.label),x==null||x(e),s(!1),(r=A.current)==null||r.blur()},W=e=>{if(!c){(e.key==="ArrowDown"||e.key==="ArrowUp")&&(s(!0),e.preventDefault());return}switch(e.key){case"ArrowDown":e.preventDefault(),h(r=>r<o.length-1?r+1:0);break;case"ArrowUp":e.preventDefault(),h(r=>r>0?r-1:o.length-1);break;case"Enter":e.preventDefault(),n>=0&&o[n]?L(o[n]):k&&b&&s(!1);break;case"Escape":s(!1);break}};return t.jsxs("div",{className:m.cn("bear-w-full bear-relative",_),ref:N,"data-testid":B,children:[v&&t.jsx("label",{className:"bear-block bear-text-sm bear-font-medium bear-text-gray-700 dark:bear-text-gray-200 bear-mb-1.5",children:v}),t.jsxs("div",{className:"bear-relative",ref:P,children:[t.jsx("input",{ref:A,type:"text",value:b,onChange:U,onFocus:()=>s(!0),onKeyDown:W,placeholder:I,disabled:f,className:m.cn("bear-w-full bear-px-4 bear-py-2.5 bear-pr-10 bear-rounded-lg bear-border","bear-bg-[var(--bear-bg-primary)]","bear-text-sm bear-text-[var(--bear-text-primary)]","placeholder:bear-text-[var(--bear-text-muted)]","bear-transition-colors bear-outline-none",u?"bear-border-red-500 focus:bear-ring-2 focus:bear-ring-red-500/20":"bear-border-[var(--bear-border-default)] focus:bear-border-amber-500 focus:bear-ring-2 focus:bear-ring-amber-500/20",f&&"bear-opacity-50 bear-cursor-not-allowed bear-bg-[var(--bear-bg-secondary)]")}),t.jsx("div",{className:"bear-absolute bear-right-3 bear-top-1/2 bear-transform bear--translate-y-1/2",children:E?t.jsxs("svg",{className:"bear-animate-spin bear-w-4 bear-h-4 bear-text-gray-400",viewBox:"0 0 24 24",fill:"none",children:[t.jsx("circle",{className:"bear-opacity-25",cx:"12",cy:"12",r:"10",stroke:"currentColor",strokeWidth:"4"}),t.jsx("path",{className:"bear-opacity-75",fill:"currentColor",d:"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"})]}):t.jsx("svg",{className:"bear-w-4 bear-h-4 bear-text-gray-400",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",children:t.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"})})})]}),g&&t.jsx(D.Portal,{children:t.jsx("div",{ref:p,className:"bear-fixed bear-rounded-lg bear-border bear-border-[var(--bear-border-default)] bear-shadow-lg bear-bg-[var(--bear-bg-primary)]",style:{top:l.top,left:l.left,width:l.width,zIndex:M.AUTOCOMPLETE_PANEL_Z},children:t.jsx("div",{ref:w,className:"bear-max-h-60 bear-overflow-auto bear-py-1",children:o.map((e,r)=>t.jsxs("button",{type:"button",disabled:e.disabled,onClick:()=>L(e),className:m.cn("bear-w-full bear-px-4 bear-py-2 bear-text-left bear-text-sm bear-transition-colors","bear-text-[var(--bear-text-primary)]",r===n?"bear-bg-[var(--bear-bg-tertiary)]":"hover:bear-bg-[var(--bear-bg-secondary)]",e.disabled&&"bear-opacity-50 bear-cursor-not-allowed"),children:[t.jsx("div",{className:"bear-font-medium",children:e.label}),e.description&&t.jsx("div",{className:"bear-text-xs bear-text-[var(--bear-text-muted)] bear-mt-0.5",children:e.description})]},e.value))})})}),y&&t.jsx(D.Portal,{children:t.jsx("div",{ref:p,className:"bear-fixed bear-py-3 bear-px-4 bear-bg-white dark:bear-bg-gray-800 bear-border bear-border-gray-200 dark:bear-border-gray-700 bear-rounded-lg bear-shadow-lg bear-text-sm bear-text-gray-500",style:{top:l.top,left:l.left,width:l.width,zIndex:M.AUTOCOMPLETE_PANEL_Z},children:k?"Press Enter to use this value":"No results found"})}),(j||u)&&t.jsx("p",{className:m.cn("bear-mt-1.5 bear-text-xs",u?"bear-text-red-500":"bear-text-gray-500 dark:bear-text-gray-400"),children:u||j})]})};exports.Autocomplete=C;

package/dist/components/Autocomplete/Autocomplete.js

@@ -1,6 +1,6 @@
 import { jsxs as m, jsx as t } from "react/jsx-runtime";
-import { useState as N, useRef as c, useEffect as h } from "react";
-import { cn as g } from "../../utils/cn.js";
+import { useState as N, useRef as c, useEffect as p } from "react";
+import { cn as h } from "../../utils/cn.js";
 import { Portal as B } from "../Portal/Portal.js";
 import { defaultFilter as T } from "./Autocomplete.utils.js";
 import { AUTOCOMPLETE_PANEL_Z as W } from "./Autocomplete.const.js";
@@ -20,9 +20,9 @@ const Y = ({
   className: F,
   testId: H
 }) => {
-  const [l, a] = N(!1), [n, p] = N(-1), [i, K] = N({ top: 0, left: 0, width: 0 }), D = c(null), z = c(null), y = c(null), I = c(null), x = c(null), s = V(j, b), k = l && !f && s.length > 0, v = l && !f && s.length === 0 && !!b && !A;
-  h(() => {
-    if (!k && !v) return;
+  const [l, a] = N(!1), [n, x] = N(-1), [i, K] = N({ top: 0, left: 0, width: 0 }), D = c(null), z = c(null), g = c(null), I = c(null), y = c(null), s = V(j, b), v = l && !f && s.length > 0, k = l && !f && s.length === 0 && !!b && !A;
+  p(() => {
+    if (!v && !k) return;
     const e = () => {
       var d;
       const r = (d = z.current) == null ? void 0 : d.getBoundingClientRect();
@@ -35,19 +35,19 @@ const Y = ({
     return e(), window.addEventListener("resize", e), window.addEventListener("scroll", e, !0), () => {
       window.removeEventListener("resize", e), window.removeEventListener("scroll", e, !0);
     };
-  }, [k, v]), h(() => {
+  }, [v, k]), p(() => {
     if (!l) return;
     const e = (r) => {
       var M, O;
       const d = r.target;
-      (M = D.current) != null && M.contains(d) || (O = y.current) != null && O.contains(d) || a(!1);
+      (M = D.current) != null && M.contains(d) || (O = g.current) != null && O.contains(d) || a(!1);
     };
     return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
-  }, [l]), h(() => {
-    p(-1);
-  }, [b]), h(() => {
-    if (n >= 0 && x.current) {
-      const e = x.current.children[n];
+  }, [l]), p(() => {
+    x(-1);
+  }, [b]), p(() => {
+    if (n >= 0 && y.current) {
+      const e = y.current.children[n];
       e && e.scrollIntoView({ block: "nearest" });
     }
   }, [n]);
@@ -64,12 +64,12 @@ const Y = ({
     }
     switch (e.key) {
       case "ArrowDown":
-        e.preventDefault(), p(
+        e.preventDefault(), x(
           (r) => r < s.length - 1 ? r + 1 : 0
         );
         break;
       case "ArrowUp":
-        e.preventDefault(), p(
+        e.preventDefault(), x(
           (r) => r > 0 ? r - 1 : s.length - 1
         );
         break;
@@ -81,7 +81,7 @@ const Y = ({
         break;
     }
   };
-  return /* @__PURE__ */ m("div", { className: g("bear-w-full bear-relative", F), ref: D, "data-testid": H, children: [
+  return /* @__PURE__ */ m("div", { className: h("bear-w-full bear-relative", F), ref: D, "data-testid": H, children: [
     E && /* @__PURE__ */ t("label", { className: "bear-block bear-text-sm bear-font-medium bear-text-gray-700 dark:bear-text-gray-200 bear-mb-1.5", children: E }),
     /* @__PURE__ */ m("div", { className: "bear-relative", ref: z, children: [
       /* @__PURE__ */ t(
@@ -95,14 +95,14 @@ const Y = ({
           onKeyDown: C,
           placeholder: U,
           disabled: f,
-          className: g(
+          className: h(
             "bear-w-full bear-px-4 bear-py-2.5 bear-pr-10 bear-rounded-lg bear-border",
-            "bear-bg-white dark:bear-bg-gray-900",
-            "bear-text-sm bear-text-gray-900 dark:bear-text-white",
-            "placeholder:bear-text-gray-400",
+            "bear-bg-[var(--bear-bg-primary)]",
+            "bear-text-sm bear-text-[var(--bear-text-primary)]",
+            "placeholder:bear-text-[var(--bear-text-muted)]",
             "bear-transition-colors bear-outline-none",
-            u ? "bear-border-red-500 focus:bear-ring-2 focus:bear-ring-red-500/20" : "bear-border-gray-300 dark:bear-border-gray-600 focus:bear-border-amber-500 focus:bear-ring-2 focus:bear-ring-amber-500/20",
-            f && "bear-opacity-50 bear-cursor-not-allowed bear-bg-gray-100 dark:bear-bg-gray-800"
+            u ? "bear-border-red-500 focus:bear-ring-2 focus:bear-ring-red-500/20" : "bear-border-[var(--bear-border-default)] focus:bear-border-amber-500 focus:bear-ring-2 focus:bear-ring-amber-500/20",
+            f && "bear-opacity-50 bear-cursor-not-allowed bear-bg-[var(--bear-bg-secondary)]"
           )
         }
       ),
@@ -111,42 +111,42 @@ const Y = ({
         /* @__PURE__ */ t("path", { className: "bear-opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })
       ] }) : /* @__PURE__ */ t("svg", { className: "bear-w-4 bear-h-4 bear-text-gray-400", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ t("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" }) }) })
     ] }),
-    k && /* @__PURE__ */ t(B, { children: /* @__PURE__ */ t(
+    v && /* @__PURE__ */ t(B, { children: /* @__PURE__ */ t(
       "div",
       {
-        ref: y,
-        className: "bear-fixed bear-rounded-lg bear-border bear-border-gray-200 dark:bear-border-gray-700 bear-shadow-lg bear-bg-white dark:bear-bg-gray-800",
+        ref: g,
+        className: "bear-fixed bear-rounded-lg bear-border bear-border-[var(--bear-border-default)] bear-shadow-lg bear-bg-[var(--bear-bg-primary)]",
         style: {
           top: i.top,
           left: i.left,
           width: i.width,
           zIndex: W
         },
-        children: /* @__PURE__ */ t("div", { ref: x, className: "bear-max-h-60 bear-overflow-auto bear-py-1", children: s.map((e, r) => /* @__PURE__ */ m(
+        children: /* @__PURE__ */ t("div", { ref: y, className: "bear-max-h-60 bear-overflow-auto bear-py-1", children: s.map((e, r) => /* @__PURE__ */ m(
           "button",
           {
             type: "button",
             disabled: e.disabled,
             onClick: () => R(e),
-            className: g(
+            className: h(
               "bear-w-full bear-px-4 bear-py-2 bear-text-left bear-text-sm bear-transition-colors",
-              "bear-text-gray-900 dark:bear-text-white",
-              r === n ? "bear-bg-amber-50 dark:bear-bg-amber-900/20" : "hover:bear-bg-gray-50 dark:hover:bear-bg-gray-700",
+              "bear-text-[var(--bear-text-primary)]",
+              r === n ? "bear-bg-[var(--bear-bg-tertiary)]" : "hover:bear-bg-[var(--bear-bg-secondary)]",
               e.disabled && "bear-opacity-50 bear-cursor-not-allowed"
             ),
             children: [
               /* @__PURE__ */ t("div", { className: "bear-font-medium", children: e.label }),
-              e.description && /* @__PURE__ */ t("div", { className: "bear-text-xs bear-text-gray-500 dark:bear-text-gray-400 bear-mt-0.5", children: e.description })
+              e.description && /* @__PURE__ */ t("div", { className: "bear-text-xs bear-text-[var(--bear-text-muted)] bear-mt-0.5", children: e.description })
             ]
           },
           e.value
         )) })
       }
     ) }),
-    v && /* @__PURE__ */ t(B, { children: /* @__PURE__ */ t(
+    k && /* @__PURE__ */ t(B, { children: /* @__PURE__ */ t(
       "div",
       {
-        ref: y,
+        ref: g,
         className: "bear-fixed bear-py-3 bear-px-4 bear-bg-white dark:bear-bg-gray-800 bear-border bear-border-gray-200 dark:bear-border-gray-700 bear-rounded-lg bear-shadow-lg bear-text-sm bear-text-gray-500",
         style: {
           top: i.top,
@@ -157,7 +157,7 @@ const Y = ({
         children: P ? "Press Enter to use this value" : "No results found"
       }
     ) }),
-    (L || u) && /* @__PURE__ */ t("p", { className: g(
+    (L || u) && /* @__PURE__ */ t("p", { className: h(
       "bear-mt-1.5 bear-text-xs",
       u ? "bear-text-red-500" : "bear-text-gray-500 dark:bear-text-gray-400"
     ), children: u || L })

package/dist/components/Backdrop/Backdrop.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const _=require("react/jsx-runtime"),e=require("./Backdrop.const.cjs"),A=require("../../utils/cn.cjs");require("react");const C=require("../../utils/generateBearId.utils.cjs"),I=require("../../utils/useBearId.cjs"),D=n=>{const{id:d,testId:i,open:r=!0,invisible:a=!1,blur:c=!1,zIndex:o=e.BACKDROP_DEFAULT_Z_INDEX,onClick:S,children:t,className:u,...s}=n,B=I.useBearId("Backdrop"),l=C.resolveBearId(d,B);return!r&&!t?null:_.jsx("div",{...s,id:l,"data-testid":i,"aria-hidden":!r,onClick:S,className:A.cn(e.BACKDROP_ROOT_CLASS,e.BACKDROP_BASE_CLASSES,r?e.BACKDROP_VISIBLE_CLASSES:e.BACKDROP_HIDDEN_CLASSES,!a&&e.BACKDROP_TINT_CLASSES,c&&e.BACKDROP_BLUR_CLASSES,u),style:{zIndex:o,...s.style},children:t})};exports.Backdrop=D;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const D=require("react/jsx-runtime"),e=require("./Backdrop.const.cjs"),I=require("../../utils/cn.cjs");require("react");const O=require("../../utils/generateBearId.utils.cjs"),R=require("../../utils/useBearId.cjs"),E=s=>{const{id:n,testId:i,open:r=!0,invisible:a=!1,blur:o=!1,zIndex:d=e.BACKDROP_DEFAULT_Z_INDEX,transitionDuration:S=e.BACKDROP_DEFAULT_TRANSITION_MS,keepMounted:c=!1,onClick:u,children:t,className:_,style:B,...l}=s,A=R.useBearId("Backdrop"),C=O.resolveBearId(n,A);return!r&&!c&&!t?null:D.jsx("div",{...l,id:C,"data-testid":i,"aria-hidden":!r,onClick:u,className:I.cn(e.BACKDROP_ROOT_CLASS,e.BACKDROP_BASE_CLASSES,r?e.BACKDROP_VISIBLE_CLASSES:e.BACKDROP_HIDDEN_CLASSES,!a&&e.BACKDROP_TINT_CLASSES,o&&e.BACKDROP_BLUR_CLASSES,_),style:{zIndex:d,transitionDuration:`${S}ms`,...B},children:t})};exports.Backdrop=E;

package/dist/components/Backdrop/Backdrop.const.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const S="Bear-Backdrop",e=11e3,A="bear-fixed bear-inset-0 bear-flex bear-items-center bear-justify-center bear-transition-opacity bear-duration-200",_="bear-opacity-100 bear-pointer-events-auto",r="bear-opacity-0 bear-pointer-events-none",t="bear-bg-black/50 dark:bear-bg-black/60",a="bear-backdrop-blur-sm";exports.BACKDROP_BASE_CLASSES=A;exports.BACKDROP_BLUR_CLASSES=a;exports.BACKDROP_DEFAULT_Z_INDEX=e;exports.BACKDROP_HIDDEN_CLASSES=r;exports.BACKDROP_ROOT_CLASS=S;exports.BACKDROP_TINT_CLASSES=t;exports.BACKDROP_VISIBLE_CLASSES=_;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const S="Bear-Backdrop",e=11e3,A=200,_="bear-fixed bear-inset-0 bear-flex bear-items-center bear-justify-center bear-transition-opacity",t="bear-opacity-100 bear-pointer-events-auto",C="bear-opacity-0 bear-pointer-events-none",r="bear-bg-black/50 dark:bear-bg-black/60",a="bear-backdrop-blur-sm";exports.BACKDROP_BASE_CLASSES=_;exports.BACKDROP_BLUR_CLASSES=a;exports.BACKDROP_DEFAULT_TRANSITION_MS=A;exports.BACKDROP_DEFAULT_Z_INDEX=e;exports.BACKDROP_HIDDEN_CLASSES=C;exports.BACKDROP_ROOT_CLASS=S;exports.BACKDROP_TINT_CLASSES=r;exports.BACKDROP_VISIBLE_CLASSES=t;

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

@@ -1,6 +1,7 @@
 export declare const BACKDROP_ROOT_CLASS = "Bear-Backdrop";
 export declare const BACKDROP_DEFAULT_Z_INDEX = 11000;
-export declare const BACKDROP_BASE_CLASSES = "bear-fixed bear-inset-0 bear-flex bear-items-center bear-justify-center bear-transition-opacity bear-duration-200";
+export declare const BACKDROP_DEFAULT_TRANSITION_MS = 200;
+export declare const BACKDROP_BASE_CLASSES = "bear-fixed bear-inset-0 bear-flex bear-items-center bear-justify-center bear-transition-opacity";
 export declare const BACKDROP_VISIBLE_CLASSES = "bear-opacity-100 bear-pointer-events-auto";
 export declare const BACKDROP_HIDDEN_CLASSES = "bear-opacity-0 bear-pointer-events-none";
 export declare const BACKDROP_TINT_CLASSES = "bear-bg-black/50 dark:bear-bg-black/60";

package/dist/components/Backdrop/Backdrop.const.js

@@ -1,10 +1,11 @@
-const e = "Bear-Backdrop", a = 11e3, r = "bear-fixed bear-inset-0 bear-flex bear-items-center bear-justify-center bear-transition-opacity bear-duration-200", t = "bear-opacity-100 bear-pointer-events-auto", b = "bear-opacity-0 bear-pointer-events-none", n = "bear-bg-black/50 dark:bear-bg-black/60", o = "bear-backdrop-blur-sm";
+const e = "Bear-Backdrop", a = 11e3, r = 200, t = "bear-fixed bear-inset-0 bear-flex bear-items-center bear-justify-center bear-transition-opacity", S = "bear-opacity-100 bear-pointer-events-auto", b = "bear-opacity-0 bear-pointer-events-none", n = "bear-bg-black/50 dark:bear-bg-black/60", o = "bear-backdrop-blur-sm";
 export {
-  r as BACKDROP_BASE_CLASSES,
+  t as BACKDROP_BASE_CLASSES,
   o as BACKDROP_BLUR_CLASSES,
+  r as BACKDROP_DEFAULT_TRANSITION_MS,
   a as BACKDROP_DEFAULT_Z_INDEX,
   b as BACKDROP_HIDDEN_CLASSES,
   e as BACKDROP_ROOT_CLASS,
   n as BACKDROP_TINT_CLASSES,
-  t as BACKDROP_VISIBLE_CLASSES
+  S as BACKDROP_VISIBLE_CLASSES
 };

package/dist/components/Backdrop/Backdrop.js

@@ -1,43 +1,50 @@
-import { jsx as B } from "react/jsx-runtime";
-import { BACKDROP_DEFAULT_Z_INDEX as C, BACKDROP_BLUR_CLASSES as l, BACKDROP_TINT_CLASSES as c, BACKDROP_VISIBLE_CLASSES as D, BACKDROP_HIDDEN_CLASSES as I, BACKDROP_BASE_CLASSES as p, BACKDROP_ROOT_CLASS as E } from "./Backdrop.const.js";
-import { cn as L } from "../../utils/cn.js";
+import { jsx as l } from "react/jsx-runtime";
+import { BACKDROP_DEFAULT_Z_INDEX as I, BACKDROP_DEFAULT_TRANSITION_MS as c, BACKDROP_BLUR_CLASSES as p, BACKDROP_TINT_CLASSES as E, BACKDROP_VISIBLE_CLASSES as O, BACKDROP_HIDDEN_CLASSES as R, BACKDROP_BASE_CLASSES as L, BACKDROP_ROOT_CLASS as f } from "./Backdrop.const.js";
+import { cn as u } from "../../utils/cn.js";
 import "react";
-import { resolveBearId as O } from "../../utils/generateBearId.utils.js";
-import { useBearId as R } from "../../utils/useBearId.js";
-const k = (o) => {
+import { resolveBearId as K } from "../../utils/generateBearId.utils.js";
+import { useBearId as P } from "../../utils/useBearId.js";
+const b = (t) => {
   const {
-    id: s,
-    testId: S,
+    id: o,
+    testId: i,
     open: r = !0,
-    invisible: d = !1,
-    blur: i = !1,
-    zIndex: a = C,
-    onClick: n,
+    invisible: s = !1,
+    blur: n = !1,
+    zIndex: S = I,
+    transitionDuration: a = c,
+    keepMounted: d = !1,
+    onClick: A,
     children: e,
-    className: A,
-    ...t
-  } = o, _ = R("Backdrop"), m = O(s, _);
-  return !r && !e ? null : /* @__PURE__ */ B(
+    className: _,
+    style: m,
+    ...B
+  } = t, C = P("Backdrop"), D = K(o, C);
+  return !r && !d && !e ? null : /* @__PURE__ */ l(
     "div",
     {
-      ...t,
-      id: m,
-      "data-testid": S,
+      ...B,
+      id: D,
+      "data-testid": i,
       "aria-hidden": !r,
-      onClick: n,
-      className: L(
-        E,
-        p,
-        r ? D : I,
-        !d && c,
-        i && l,
-        A
+      onClick: A,
+      className: u(
+        f,
+        L,
+        r ? O : R,
+        !s && E,
+        n && p,
+        _
       ),
-      style: { zIndex: a, ...t.style },
+      style: {
+        zIndex: S,
+        transitionDuration: `${a}ms`,
+        ...m
+      },
       children: e
     }
   );
 };
 export {
-  k as Backdrop
+  b as Backdrop
 };