@forgedevstack/bear 1.3.2 → 1.3.4

package/dist/components/AlertDialog/AlertDialog.js

@@ -1,118 +1,101 @@
-import { jsxs as b, jsx as r } from "react/jsx-runtime";
-import { useId as K, useRef as _, useCallback as h, useEffect as P } from "react";
-import { createPortal as S } from "react-dom";
-import { ZERO as A } from "../../constants/numbers.const.js";
-import { LABEL_CONFIRM as $, LABEL_CANCEL as z, VARIANT_DANGER as q, BOOLEAN_FALSE as v, BOOLEAN_TRUE as V, ALERT_DESC_ID_PREFIX as X, ALERT_TITLE_ID_PREFIX as Y } from "../../constants/generals.const.js";
-import { KEY_ESCAPE as G, KEY_TAB as M } from "../../constants/keys.const.js";
-import { cn as m } from "../../utils/cn.js";
-import { Button as k } from "../Button/Button.js";
-import { Typography as L } from "../Typography/Typography.js";
-const ae = (B) => {
+import { jsxs as l, jsx as e } from "react/jsx-runtime";
+import { useId as I, useRef as k, useEffect as L } from "react";
+import { createPortal as T } from "react-dom";
+import { LABEL_CONFIRM as C, LABEL_CANCEL as R, VARIANT_DANGER as O, BOOLEAN_FALSE as m, BOOLEAN_TRUE as w, ALERT_DESC_ID_PREFIX as j, ALERT_TITLE_ID_PREFIX as F } from "../../constants/generals.const.js";
+import { cn as n } from "../../utils/cn.js";
+import { useFocusTrap as $ } from "../../hooks/useFocusTrap/useFocusTrap.js";
+import { Button as f } from "../Button/Button.js";
+import { Typography as g } from "../Typography/Typography.js";
+const q = (p) => {
   const {
-    isOpen: l,
-    onClose: a,
-    onConfirm: D,
-    title: N,
-    description: d,
-    confirmText: C = $,
-    cancelText: I = z,
-    confirmVariant: R = q,
-    loading: t = v,
-    loadingText: T,
-    closeOnBackdrop: w = v,
-    closeOnEscape: u = V,
-    icon: o,
-    className: O,
-    testId: F
-  } = B, f = K(), p = `${Y}${f}`, E = `${X}${f}`, n = _(null), g = _(null), c = h(
-    (e) => {
-      u && e.key === G && !t && a();
-    },
-    [u, a, t]
-  ), s = h((e) => {
-    if (e.key !== M || !n.current)
-      return;
-    const i = n.current.querySelectorAll(
-      'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'
-    );
-    if (i.length === A)
-      return;
-    const y = i[A], x = i[i.length - 1];
-    e.shiftKey && document.activeElement === y ? (e.preventDefault(), x.focus()) : !e.shiftKey && document.activeElement === x && (e.preventDefault(), y.focus());
-  }, []);
-  if (P(() => (l && (g.current = document.activeElement, document.addEventListener("keydown", c), document.addEventListener("keydown", s), document.body.style.overflow = "hidden", requestAnimationFrame(() => {
-    var e;
-    return (e = n.current) == null ? void 0 : e.focus();
-  })), () => {
-    var e;
-    document.removeEventListener("keydown", c), document.removeEventListener("keydown", s), document.body.style.overflow = "", (e = g.current) == null || e.focus();
-  }), [l, c, s]), !l)
+    isOpen: r,
+    onClose: i,
+    onConfirm: u,
+    title: _,
+    description: o,
+    confirmText: x = C,
+    cancelText: A = R,
+    confirmVariant: y = O,
+    loading: a = m,
+    loadingText: E,
+    closeOnBackdrop: h = m,
+    closeOnEscape: v = w,
+    icon: t,
+    className: N,
+    testId: B
+  } = p, d = I(), b = `${F}${d}`, s = `${j}${d}`, c = k(null);
+  if ($(c, {
+    enabled: r,
+    onEscape: v && !a ? i : void 0
+  }), L(() => (r && (document.body.style.overflow = "hidden"), () => {
+    document.body.style.overflow = "";
+  }), [r]), !r)
     return null;
-  const j = /* @__PURE__ */ b(
+  const D = /* @__PURE__ */ l(
     "div",
     {
       className: "Bear-AlertDialog bear-fixed bear-inset-0 bear-z-50 bear-flex bear-items-center bear-justify-center bear-p-4",
-      "data-testid": F,
+      "data-testid": B,
       children: [
-        /* @__PURE__ */ r(
+        /* @__PURE__ */ e(
           "div",
           {
             className: "Bear-AlertDialog__backdrop bear-absolute bear-inset-0 bear-bg-black/60 bear-backdrop-blur-sm bear-transition-opacity animate-fade-in",
-            onClick: w && !t ? a : void 0,
+            onClick: h && !a ? i : void 0,
             "aria-hidden": "true"
           }
         ),
-        /* @__PURE__ */ b(
+        /* @__PURE__ */ l(
           "div",
           {
-            ref: n,
+            ref: c,
             role: "alertdialog",
             "aria-modal": "true",
-            "aria-labelledby": p,
-            "aria-describedby": d ? E : void 0,
+            "aria-labelledby": b,
+            "aria-describedby": o ? s : void 0,
             tabIndex: -1,
-            className: m(
+            className: n(
               "Bear-AlertDialog__container bear-relative bear-w-full bear-max-w-md bear-bg-white dark:bear-bg-zinc-900 bear-rounded-xl bear-shadow-2xl bear-border bear-border-gray-200 dark:bear-border-zinc-700 bear-transform bear-transition-all animate-alert-dialog-in bear-p-6",
-              O
+              N
             ),
             children: [
-              o && /* @__PURE__ */ r("div", { className: "Bear-AlertDialog__icon bear-mb-4 bear-flex bear-justify-center", children: o }),
-              /* @__PURE__ */ r(
-                L,
+              t && /* @__PURE__ */ e("div", { className: "Bear-AlertDialog__icon bear-mb-4 bear-flex bear-justify-center", children: t }),
+              /* @__PURE__ */ e(
+                g,
                 {
                   variant: "h6",
-                  id: p,
-                  className: m("Bear-AlertDialog__title bear-text-lg bear-font-semibold bear-text-gray-900 dark:bear-text-white", o && "bear-text-center"),
-                  children: N
+                  id: b,
+                  className: n("Bear-AlertDialog__title bear-text-lg bear-font-semibold bear-text-gray-900 dark:bear-text-white", t && "bear-text-center"),
+                  children: _
                 }
               ),
-              d && /* @__PURE__ */ r(
-                L,
+              o && /* @__PURE__ */ e(
+                g,
                 {
                   variant: "body2",
-                  id: E,
-                  className: m("Bear-AlertDialog__description bear-text-sm bear-text-gray-600 dark:bear-text-gray-400 bear-mt-2", o && "bear-text-center"),
-                  children: d
+                  id: s,
+                  className: n("Bear-AlertDialog__description bear-text-sm bear-text-gray-600 dark:bear-text-gray-400 bear-mt-2", t && "bear-text-center"),
+                  children: o
                 }
               ),
-              /* @__PURE__ */ b("div", { className: "Bear-AlertDialog__footer bear-flex bear-items-center bear-justify-end bear-gap-3 bear-pt-6", children: [
-                /* @__PURE__ */ r(
-                  k,
+              /* @__PURE__ */ l("div", { className: "Bear-AlertDialog__footer bear-flex bear-items-center bear-justify-end bear-gap-3 bear-pt-6", children: [
+                /* @__PURE__ */ e(
+                  f,
                   {
                     variant: "ghost",
-                    onClick: a,
-                    disabled: t,
-                    children: I
+                    onClick: i,
+                    disabled: a,
+                    children: A
                   }
                 ),
-                /* @__PURE__ */ r(
-                  k,
+                /* @__PURE__ */ e(
+                  f,
                   {
-                    variant: R,
-                    onClick: D,
-                    loading: t,
-                    loadingText: T,
-                    children: C
+                    variant: y,
+                    onClick: u,
+                    loading: a,
+                    loadingText: E,
+                    children: x
                   }
                 )
               ] })
@@ -122,8 +105,8 @@ const ae = (B) => {
       ]
     }
   );
-  return S(j, document.body);
+  return T(D, document.body);
 };
 export {
-  ae as AlertDialog
+  q as AlertDialog
 };

package/dist/components/ApprovalCard/ApprovalCard.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),y=require("../../constants/generals.const.cjs"),g=require("../../utils/cn.cjs");require("react");const j=require("../../utils/generateBearId.utils.cjs"),q=require("../../utils/useBearId.cjs"),h=require("../Box/Box.cjs"),o=require("../Button/Button.cjs"),a=require("../Flex/Flex.cjs"),i=require("../Typography/Typography.cjs"),B=require("./ApprovalCard.const.cjs"),b=c=>{const{id:l,testId:d,title:u,children:r,onApprove:t,onReject:n,translations:p,className:A}=c,x=q.useBearId(y.COMPONENT_NAME_APPROVAL_CARD),v=j.resolveBearId(l,x),s={...B.APPROVAL_CARD_DEFAULT_TRANSLATIONS,...p};return e.jsx(h.Box,{id:v,"data-testid":d,className:g.cn("Bear-ApprovalCard",A),children:e.jsxs(a.Flex,{direction:"column",gap:3,align:"start",children:[e.jsx(i.Typography,{variant:"subtitle1",children:u}),r&&e.jsx(i.Typography,{variant:"body2",children:r}),e.jsxs(a.Flex,{gap:2,children:[n&&e.jsx(o.Button,{type:"button",variant:"outline",size:"sm",onClick:n,children:s.rejectLabel}),t&&e.jsx(o.Button,{type:"button",variant:"primary",size:"sm",onClick:t,children:s.approveLabel})]})]})})};exports.ApprovalCard=b;

package/dist/components/ApprovalCard/ApprovalCard.const.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../constants/generals.const.cjs"),A={approveLabel:e.LABEL_APPROVE,rejectLabel:e.LABEL_REJECT};exports.APPROVAL_CARD_DEFAULT_TRANSLATIONS=A;

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

@@ -0,0 +1,2 @@
+import { ApprovalCardTranslations } from './ApprovalCard.types';
+export declare const APPROVAL_CARD_DEFAULT_TRANSLATIONS: ApprovalCardTranslations;

package/dist/components/ApprovalCard/ApprovalCard.const.js

@@ -0,0 +1,8 @@
+import { LABEL_REJECT as A, LABEL_APPROVE as L } from "../../constants/generals.const.js";
+const E = {
+  approveLabel: L,
+  rejectLabel: A
+};
+export {
+  E as APPROVAL_CARD_DEFAULT_TRANSLATIONS
+};

package/dist/components/ApprovalCard/ApprovalCard.d.ts

@@ -0,0 +1,2 @@
+import { ApprovalCardProps } from './ApprovalCard.types';
+export declare const ApprovalCard: (props: ApprovalCardProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/ApprovalCard/ApprovalCard.js

@@ -0,0 +1,25 @@
+import { jsx as r, jsxs as a } from "react/jsx-runtime";
+import { COMPONENT_NAME_APPROVAL_CARD as u } from "../../constants/generals.const.js";
+import { cn as b } from "../../utils/cn.js";
+import "react";
+import { resolveBearId as C } from "../../utils/generateBearId.utils.js";
+import { useBearId as N } from "../../utils/useBearId.js";
+import { Box as y } from "../Box/Box.js";
+import { Button as n } from "../Button/Button.js";
+import { Flex as m } from "../Flex/Flex.js";
+import { Typography as p } from "../Typography/Typography.js";
+import { APPROVAL_CARD_DEFAULT_TRANSLATIONS as I } from "./ApprovalCard.const.js";
+const E = (l) => {
+  const { id: s, testId: d, title: c, children: t, onApprove: o, onReject: e, translations: A, className: f } = l, v = N(u), h = C(s, v), i = { ...I, ...A };
+  return /* @__PURE__ */ r(y, { id: h, "data-testid": d, className: b("Bear-ApprovalCard", f), children: /* @__PURE__ */ a(m, { direction: "column", gap: 3, align: "start", children: [
+    /* @__PURE__ */ r(p, { variant: "subtitle1", children: c }),
+    t && /* @__PURE__ */ r(p, { variant: "body2", children: t }),
+    /* @__PURE__ */ a(m, { gap: 2, children: [
+      e && /* @__PURE__ */ r(n, { type: "button", variant: "outline", size: "sm", onClick: e, children: i.rejectLabel }),
+      o && /* @__PURE__ */ r(n, { type: "button", variant: "primary", size: "sm", onClick: o, children: i.approveLabel })
+    ] })
+  ] }) });
+};
+export {
+  E as ApprovalCard
+};

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

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+export interface ApprovalCardTranslations {
+    approveLabel: string;
+    rejectLabel: string;
+}
+export interface ApprovalCardProps {
+    id?: string;
+    testId?: string;
+    title: string;
+    children?: ReactNode;
+    onApprove?: () => void;
+    onReject?: () => void;
+    translations?: Partial<ApprovalCardTranslations>;
+    className?: string;
+}

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

@@ -0,0 +1,2 @@
+export { ApprovalCard } from './ApprovalCard';
+export type { ApprovalCardProps, ApprovalCardTranslations } from './ApprovalCard.types';

package/dist/components/ArtifactCard/ArtifactCard.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),T=require("../../constants/generals.const.cjs"),_=require("../../utils/cn.cjs");require("react");const g=require("../../utils/generateBearId.utils.cjs"),q=require("../../utils/useBearId.cjs"),x=require("../Badge/Badge.cjs"),n=require("../Box/Box.cjs"),I=require("../Button/Button.cjs"),h=require("../Flex/Flex.cjs"),j=require("../Typography/Typography.cjs"),a=require("./ArtifactCard.const.cjs"),p=i=>{const{id:c,testId:o,title:d,kind:r=a.ARTIFACT_CARD_DEFAULT_KIND,children:t,onOpen:s,translations:l,className:u}=i,A=q.useBearId(T.COMPONENT_NAME_ARTIFACT_CARD),B=g.resolveBearId(c,A),C={...a.ARTIFACT_CARD_DEFAULT_TRANSLATIONS,...l};return e.jsxs(n.Box,{id:B,"data-testid":o,className:_.cn("Bear-ArtifactCard",`Bear-ArtifactCard--${r}`,u),children:[e.jsxs(h.Flex,{align:"center",justify:"between",gap:2,children:[e.jsx(j.Typography,{variant:"subtitle2",children:d}),e.jsx(x.Badge,{size:"sm",children:r})]}),t&&e.jsx(n.Box,{className:"Bear-ArtifactCard__body",children:t}),s&&e.jsx(I.Button,{type:"button",variant:"ghost",size:"sm",onClick:s,children:C.openLabel})]})};exports.ArtifactCard=p;

package/dist/components/ArtifactCard/ArtifactCard.const.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const A=require("../../constants/generals.const.cjs"),T={openLabel:A.LABEL_OPEN_ARTIFACT},_="doc";exports.ARTIFACT_CARD_DEFAULT_KIND=_;exports.ARTIFACT_CARD_DEFAULT_TRANSLATIONS=T;

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

@@ -0,0 +1,3 @@
+import { ArtifactCardKind, ArtifactCardTranslations } from './ArtifactCard.types';
+export declare const ARTIFACT_CARD_DEFAULT_TRANSLATIONS: ArtifactCardTranslations;
+export declare const ARTIFACT_CARD_DEFAULT_KIND: ArtifactCardKind;

package/dist/components/ArtifactCard/ArtifactCard.const.js

@@ -0,0 +1,8 @@
+import { LABEL_OPEN_ARTIFACT as A } from "../../constants/generals.const.js";
+const _ = {
+  openLabel: A
+}, o = "doc";
+export {
+  o as ARTIFACT_CARD_DEFAULT_KIND,
+  _ as ARTIFACT_CARD_DEFAULT_TRANSLATIONS
+};

package/dist/components/ArtifactCard/ArtifactCard.d.ts

@@ -0,0 +1,2 @@
+import { ArtifactCardProps } from './ArtifactCard.types';
+export declare const ArtifactCard: (props: ArtifactCardProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/ArtifactCard/ArtifactCard.js

@@ -0,0 +1,43 @@
+import { jsxs as i, jsx as r } from "react/jsx-runtime";
+import { COMPONENT_NAME_ARTIFACT_CARD as C } from "../../constants/generals.const.js";
+import { cn as T } from "../../utils/cn.js";
+import "react";
+import { resolveBearId as _ } from "../../utils/generateBearId.utils.js";
+import { useBearId as I } from "../../utils/useBearId.js";
+import { Badge as N } from "../Badge/Badge.js";
+import { Box as a } from "../Box/Box.js";
+import { Button as h } from "../Button/Button.js";
+import { Flex as B } from "../Flex/Flex.js";
+import { Typography as R } from "../Typography/Typography.js";
+import { ARTIFACT_CARD_DEFAULT_KIND as b, ARTIFACT_CARD_DEFAULT_TRANSLATIONS as g } from "./ArtifactCard.const.js";
+const M = (m) => {
+  const {
+    id: n,
+    testId: s,
+    title: d,
+    kind: t = b,
+    children: o,
+    onOpen: e,
+    translations: c,
+    className: l
+  } = m, p = I(C), A = _(n, p), f = { ...g, ...c };
+  return /* @__PURE__ */ i(
+    a,
+    {
+      id: A,
+      "data-testid": s,
+      className: T("Bear-ArtifactCard", `Bear-ArtifactCard--${t}`, l),
+      children: [
+        /* @__PURE__ */ i(B, { align: "center", justify: "between", gap: 2, children: [
+          /* @__PURE__ */ r(R, { variant: "subtitle2", children: d }),
+          /* @__PURE__ */ r(N, { size: "sm", children: t })
+        ] }),
+        o && /* @__PURE__ */ r(a, { className: "Bear-ArtifactCard__body", children: o }),
+        e && /* @__PURE__ */ r(h, { type: "button", variant: "ghost", size: "sm", onClick: e, children: f.openLabel })
+      ]
+    }
+  );
+};
+export {
+  M as ArtifactCard
+};

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

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+export type ArtifactCardKind = 'code' | 'doc' | 'preview';
+export interface ArtifactCardTranslations {
+    openLabel: string;
+}
+export interface ArtifactCardProps {
+    id?: string;
+    testId?: string;
+    title: string;
+    kind?: ArtifactCardKind;
+    children?: ReactNode;
+    onOpen?: () => void;
+    translations?: Partial<ArtifactCardTranslations>;
+    className?: string;
+}

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

@@ -0,0 +1,2 @@
+export { ArtifactCard } from './ArtifactCard';
+export type { ArtifactCardKind, ArtifactCardProps, ArtifactCardTranslations, } from './ArtifactCard.types';

package/dist/components/Banner/Banner.const.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../constants/generals.const.cjs"),r=require("@forgedevstack/bear-icons"),a={dismissLabel:e.LABEL_DISMISS},n={info:r.InfoIcon,success:r.CheckCircleIcon,warning:r.WarningIcon,error:r.ErrorIcon},b={static:"",sticky:"bear-sticky bear-top-0 bear-z-40"},s={info:"bear-bg-[var(--bear-info-50,#eff6ff)] bear-text-[var(--bear-info-800,#1e40af)]",success:"bear-bg-[var(--bear-success-50,#f0fdf4)] bear-text-[var(--bear-success-800,#166534)]",warning:"bear-bg-[var(--bear-warning-50,#fffbeb)] bear-text-[var(--bear-warning-800,#92400e)]",error:"bear-bg-[var(--bear-danger-50,#fef2f2)] bear-text-[var(--bear-danger-800,#991b1b)]"};exports.BANNER_DEFAULT_ICON_MAP=n;exports.BANNER_DEFAULT_TRANSLATIONS=a;exports.BANNER_POSITION_CLASSES=b;exports.BANNER_SEVERITY_CLASSES=s;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../constants/generals.const.cjs"),r=require("@forgedevstack/bear-icons");require("react/jsx-runtime");const a={dismissLabel:e.LABEL_DISMISS},n={info:r.InfoIcon,success:r.CheckCircleIcon,warning:r.WarningIcon,error:r.ErrorIcon},b={static:"",sticky:"bear-sticky bear-top-0 bear-z-40"},s={info:"bear-bg-[var(--bear-info-50,#eff6ff)] bear-text-[var(--bear-info-800,#1e40af)]",success:"bear-bg-[var(--bear-success-50,#f0fdf4)] bear-text-[var(--bear-success-800,#166534)]",warning:"bear-bg-[var(--bear-warning-50,#fffbeb)] bear-text-[var(--bear-warning-800,#92400e)]",error:"bear-bg-[var(--bear-danger-50,#fef2f2)] bear-text-[var(--bear-danger-800,#991b1b)]"};exports.BANNER_DEFAULT_ICON_MAP=n;exports.BANNER_DEFAULT_TRANSLATIONS=a;exports.BANNER_POSITION_CLASSES=b;exports.BANNER_SEVERITY_CLASSES=s;

package/dist/components/Banner/Banner.const.js

@@ -1,24 +1,25 @@
 import { LABEL_DISMISS as r } from "../../constants/generals.const.js";
 import { ErrorIcon as e, WarningIcon as a, CheckCircleIcon as b, InfoIcon as n } from "@forgedevstack/bear-icons";
-const c = {
+import "react/jsx-runtime";
+const f = {
   dismissLabel: r
-}, f = {
+}, t = {
   info: n,
   success: b,
   warning: a,
   error: e
-}, t = {
+}, i = {
   static: "",
   sticky: "bear-sticky bear-top-0 bear-z-40"
-}, i = {
+}, S = {
   info: "bear-bg-[var(--bear-info-50,#eff6ff)] bear-text-[var(--bear-info-800,#1e40af)]",
   success: "bear-bg-[var(--bear-success-50,#f0fdf4)] bear-text-[var(--bear-success-800,#166534)]",
   warning: "bear-bg-[var(--bear-warning-50,#fffbeb)] bear-text-[var(--bear-warning-800,#92400e)]",
   error: "bear-bg-[var(--bear-danger-50,#fef2f2)] bear-text-[var(--bear-danger-800,#991b1b)]"
 };
 export {
-  f as BANNER_DEFAULT_ICON_MAP,
-  c as BANNER_DEFAULT_TRANSLATIONS,
-  t as BANNER_POSITION_CLASSES,
-  i as BANNER_SEVERITY_CLASSES
+  t as BANNER_DEFAULT_ICON_MAP,
+  f as BANNER_DEFAULT_TRANSLATIONS,
+  i as BANNER_POSITION_CLASSES,
+  S as BANNER_SEVERITY_CLASSES
 };

package/dist/components/BottomSheet/BottomSheet.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),t=require("react"),w=require("react-dom"),d=require("../../constants/numbers.const.cjs"),e=require("../../constants/generals.const.cjs"),g=require("../../constants/keys.const.cjs"),b=require("../../utils/cn.cjs"),l=require("../Box/Box.cjs"),R=require("../Button/Button.cjs"),E=require("../Flex/Flex.cjs"),j=require("@forgedevstack/bear-icons"),q=require("../Typography/Typography.cjs"),F=require("./BottomSheet.const.cjs"),v=A=>{const{isOpen:i,onClose:o,title:s,children:_,size:y=e.SIZE_MD,showCloseButton:m=e.BOOLEAN_TRUE,closeOnBackdrop:L=e.BOOLEAN_TRUE,closeOnEscape:O=e.BOOLEAN_TRUE,showHandle:N=e.BOOLEAN_TRUE,enableScroll:f=e.BOOLEAN_TRUE,isSticky:S=e.BOOLEAN_FALSE,className:p}=A,[a,h]=t.useState(i),[x,c]=t.useState(e.BOOLEAN_FALSE),[T,B]=t.useState(e.BOOLEAN_FALSE);t.useEffect(()=>{if(i){h(e.BOOLEAN_TRUE),c(e.BOOLEAN_FALSE);const n=requestAnimationFrame(()=>B(e.BOOLEAN_TRUE));return()=>cancelAnimationFrame(n)}if(a){B(e.BOOLEAN_FALSE),c(e.BOOLEAN_TRUE);const n=setTimeout(()=>{h(e.BOOLEAN_FALSE),c(e.BOOLEAN_FALSE)},d.THREE_HUNDRED);return()=>clearTimeout(n)}},[i,a]);const u=t.useCallback(n=>{O&&n.key===g.KEY_ESCAPE&&o()},[O,o]);if(t.useEffect(()=>(a&&(document.addEventListener("keydown",u),document.body.style.overflow="hidden"),()=>{document.removeEventListener("keydown",u),document.body.style.overflow=""}),[a,u]),!a)return null;const k=r.jsxs(E.Flex,{className:"bear-fixed bear-inset-0 bear-items-end bear-justify-center",style:{zIndex:d.BACKDROP_DEFAULT_Z_INDEX},children:[r.jsx(l.Box,{className:b.cn("bear-absolute bear-inset-0 bear-bg-black/60 bear-backdrop-blur-sm bear-transition-opacity",x?"bear-opacity-0":"bear-opacity-100"),style:{transitionDuration:`${d.THREE_HUNDRED}ms`},onClick:L?o:void 0,"aria-hidden":"true"}),r.jsxs(l.Box,{role:"dialog","aria-modal":"true","aria-labelledby":s?"bottom-sheet-title":void 0,className:b.cn("Bear-BottomSheet bear-relative bear-w-full bear-rounded-t-2xl bear-shadow-2xl bear-transition-transform bear-duration-300","bear-flex bear-flex-col bear-min-h-0 bear-overflow-hidden","bear-bg-white dark:bear-bg-neutral-900 bear-border-t bear-border-neutral-200 dark:bear-border-neutral-700",F.BOTTOM_SHEET_SIZE_CLASSES[y],T&&!x?"bear-translate-y-0":"bear-translate-y-full",p),children:[N&&r.jsx(E.Flex,{className:"bear-justify-center bear-pt-2 bear-pb-1",children:r.jsx(l.Box,{className:"bear-w-12 bear-h-1 bear-rounded-full bear-bg-neutral-300 dark:bear-bg-neutral-600","aria-hidden":!0})}),(s||m)&&r.jsxs(E.Flex,{className:b.cn("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",S&&"bear-sticky bear-top-0 bear-z-10 bear-bg-white dark:bear-bg-neutral-900"),children:[s&&r.jsx(q.Typography,{id:"bottom-sheet-title",weight:"semibold",className:"bear-text-lg bear-text-neutral-900 dark:bear-text-white",children:s}),m&&r.jsx(R.Button,{variant:e.VARIANT_GHOST,onClick:o,"aria-label":e.LABEL_CLOSE,children:r.jsx(j.XIcon,{className:"bear-w-5 bear-h-5"})})]}),r.jsx(l.Box,{className:b.cn("bear-flex-1 bear-min-h-0 bear-p-4 bear-text-neutral-700 dark:bear-text-neutral-300",f?"bear-overflow-y-auto":"bear-overflow-hidden"),children:_})]})]});return w.createPortal(k,document.body)};exports.BottomSheet=v;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),t=require("react"),R=require("react-dom"),g=require("../../hooks/useFocusTrap/useFocusTrap.cjs"),m=require("../../constants/numbers.const.cjs"),e=require("../../constants/generals.const.cjs"),F=require("../../constants/keys.const.cjs"),l=require("../../utils/cn.cjs"),b=require("../Box/Box.cjs"),j=require("../Button/Button.cjs"),O=require("../Flex/Flex.cjs"),q=require("@forgedevstack/bear-icons"),v=require("../Typography/Typography.cjs"),C=require("./BottomSheet.const.cjs"),U=_=>{const{isOpen:i,onClose:n,title:o,children:f,size:y=e.SIZE_MD,showCloseButton:h=e.BOOLEAN_TRUE,closeOnBackdrop:L=e.BOOLEAN_TRUE,closeOnEscape:c=e.BOOLEAN_TRUE,showHandle:N=e.BOOLEAN_TRUE,enableScroll:S=e.BOOLEAN_TRUE,isSticky:p=e.BOOLEAN_FALSE,className:T}=_,[a,x]=t.useState(i),[u,d]=t.useState(e.BOOLEAN_FALSE),[k,B]=t.useState(e.BOOLEAN_FALSE);t.useEffect(()=>{if(i){x(e.BOOLEAN_TRUE),d(e.BOOLEAN_FALSE);const s=requestAnimationFrame(()=>B(e.BOOLEAN_TRUE));return()=>cancelAnimationFrame(s)}if(a){B(e.BOOLEAN_FALSE),d(e.BOOLEAN_TRUE);const s=setTimeout(()=>{x(e.BOOLEAN_FALSE),d(e.BOOLEAN_FALSE)},m.THREE_HUNDRED);return()=>clearTimeout(s)}},[i,a]);const A=t.useRef(null);g.useFocusTrap(A,{enabled:a&&!u,onEscape:c?n:void 0});const E=t.useCallback(s=>{c&&s.key===F.KEY_ESCAPE&&n()},[c,n]);if(t.useEffect(()=>(a&&(document.addEventListener("keydown",E),document.body.style.overflow="hidden"),()=>{document.removeEventListener("keydown",E),document.body.style.overflow=""}),[a,E]),!a)return null;const w=r.jsxs(O.Flex,{className:"bear-fixed bear-inset-0 bear-items-end bear-justify-center",style:{zIndex:m.BACKDROP_DEFAULT_Z_INDEX},children:[r.jsx(b.Box,{className:l.cn("bear-absolute bear-inset-0 bear-bg-black/60 bear-backdrop-blur-sm bear-transition-opacity",u?"bear-opacity-0":"bear-opacity-100"),style:{transitionDuration:`${m.THREE_HUNDRED}ms`},onClick:L?n:void 0,"aria-hidden":"true"}),r.jsxs(b.Box,{ref:A,role:"dialog",tabIndex:-1,"aria-modal":"true","aria-labelledby":o?"bottom-sheet-title":void 0,className:l.cn("Bear-BottomSheet bear-relative bear-w-full bear-rounded-t-2xl bear-shadow-2xl bear-transition-transform bear-duration-300","bear-flex bear-flex-col bear-min-h-0 bear-overflow-hidden","bear-bg-white dark:bear-bg-neutral-900 bear-border-t bear-border-neutral-200 dark:bear-border-neutral-700",C.BOTTOM_SHEET_SIZE_CLASSES[y],k&&!u?"bear-translate-y-0":"bear-translate-y-full",T),children:[N&&r.jsx(O.Flex,{className:"bear-justify-center bear-pt-2 bear-pb-1",children:r.jsx(b.Box,{className:"bear-w-12 bear-h-1 bear-rounded-full bear-bg-neutral-300 dark:bear-bg-neutral-600","aria-hidden":!0})}),(o||h)&&r.jsxs(O.Flex,{className:l.cn("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",p&&"bear-sticky bear-top-0 bear-z-10 bear-bg-white dark:bear-bg-neutral-900"),children:[o&&r.jsx(v.Typography,{id:"bottom-sheet-title",weight:"semibold",className:"bear-text-lg bear-text-neutral-900 dark:bear-text-white",children:o}),h&&r.jsx(j.Button,{variant:e.VARIANT_GHOST,onClick:n,"aria-label":e.LABEL_CLOSE,children:r.jsx(q.XIcon,{className:"bear-w-5 bear-h-5"})})]}),r.jsx(b.Box,{className:l.cn("bear-flex-1 bear-min-h-0 bear-p-4 bear-text-neutral-700 dark:bear-text-neutral-300",S?"bear-overflow-y-auto":"bear-overflow-hidden"),children:f})]})]});return R.createPortal(w,document.body)};exports.BottomSheet=U;

package/dist/components/BottomSheet/BottomSheet.js

@@ -1,99 +1,107 @@
-import { jsxs as c, jsx as r } from "react/jsx-runtime";
-import { useState as u, useEffect as w, useCallback as L } from "react";
-import { createPortal as I } from "react-dom";
-import { THREE_HUNDRED as x, BACKDROP_DEFAULT_Z_INDEX as D } from "../../constants/numbers.const.js";
-import { SIZE_MD as H, BOOLEAN_TRUE as e, BOOLEAN_FALSE as a, LABEL_CLOSE as j, VARIANT_GHOST as F } from "../../constants/generals.const.js";
-import { KEY_ESCAPE as R } from "../../constants/keys.const.js";
+import { jsxs as f, jsx as r } from "react/jsx-runtime";
+import { useState as p, useEffect as w, useRef as I, useCallback as D } from "react";
+import { createPortal as R } from "react-dom";
+import { useFocusTrap as F } from "../../hooks/useFocusTrap/useFocusTrap.js";
+import { THREE_HUNDRED as N, BACKDROP_DEFAULT_Z_INDEX as H } from "../../constants/numbers.const.js";
+import { SIZE_MD as j, BOOLEAN_TRUE as e, BOOLEAN_FALSE as a, LABEL_CLOSE as M, VARIANT_GHOST as z } from "../../constants/generals.const.js";
+import { KEY_ESCAPE as P } from "../../constants/keys.const.js";
 import { cn as i } from "../../utils/cn.js";
-import { Box as l } from "../Box/Box.js";
-import { Button as M } from "../Button/Button.js";
-import { Flex as f } from "../Flex/Flex.js";
-import { XIcon as z } from "@forgedevstack/bear-icons";
-import { Typography as P } from "../Typography/Typography.js";
-import { BOTTOM_SHEET_SIZE_CLASSES as U } from "./BottomSheet.const.js";
-const ae = (N) => {
+import { Box as s } from "../Box/Box.js";
+import { Button as U } from "../Button/Button.js";
+import { Flex as h } from "../Flex/Flex.js";
+import { XIcon as Z } from "@forgedevstack/bear-icons";
+import { Typography as K } from "../Typography/Typography.js";
+import { BOTTOM_SHEET_SIZE_CLASSES as X } from "./BottomSheet.const.js";
+const be = (S) => {
   const {
-    isOpen: s,
-    onClose: n,
+    isOpen: l,
+    onClose: o,
     title: b,
-    children: S,
-    size: O = H,
-    showCloseButton: p = e,
-    closeOnBackdrop: g = e,
-    closeOnEscape: h = e,
+    children: O,
+    size: g = j,
+    showCloseButton: y = e,
+    closeOnBackdrop: v = e,
+    closeOnEscape: d = e,
     showHandle: _ = e,
-    enableScroll: v = e,
-    isSticky: A = a,
-    className: B
-  } = N, [t, y] = u(s), [E, d] = u(a), [C, k] = u(a);
+    enableScroll: A = e,
+    isSticky: B = a,
+    className: T
+  } = S, [t, E] = p(l), [m, c] = p(a), [C, k] = p(a);
   w(() => {
-    if (s) {
-      y(e), d(a);
-      const o = requestAnimationFrame(() => k(e));
-      return () => cancelAnimationFrame(o);
+    if (l) {
+      E(e), c(a);
+      const n = requestAnimationFrame(() => k(e));
+      return () => cancelAnimationFrame(n);
     }
     if (t) {
-      k(a), d(e);
-      const o = setTimeout(() => {
-        y(a), d(a);
-      }, x);
-      return () => clearTimeout(o);
+      k(a), c(e);
+      const n = setTimeout(() => {
+        E(a), c(a);
+      }, N);
+      return () => clearTimeout(n);
     }
-  }, [s, t]);
-  const m = L(
-    (o) => {
-      h && o.key === R && n();
+  }, [l, t]);
+  const x = I(null);
+  F(x, {
+    enabled: t && !m,
+    onEscape: d ? o : void 0
+  });
+  const u = D(
+    (n) => {
+      d && n.key === P && o();
     },
-    [h, n]
+    [d, o]
   );
-  if (w(() => (t && (document.addEventListener("keydown", m), document.body.style.overflow = "hidden"), () => {
-    document.removeEventListener("keydown", m), document.body.style.overflow = "";
-  }), [t, m]), !t)
+  if (w(() => (t && (document.addEventListener("keydown", u), document.body.style.overflow = "hidden"), () => {
+    document.removeEventListener("keydown", u), document.body.style.overflow = "";
+  }), [t, u]), !t)
     return null;
-  const T = /* @__PURE__ */ c(
-    f,
+  const L = /* @__PURE__ */ f(
+    h,
     {
       className: "bear-fixed bear-inset-0 bear-items-end bear-justify-center",
-      style: { zIndex: D },
+      style: { zIndex: H },
       children: [
         /* @__PURE__ */ r(
-          l,
+          s,
           {
             className: i(
               "bear-absolute bear-inset-0 bear-bg-black/60 bear-backdrop-blur-sm bear-transition-opacity",
-              E ? "bear-opacity-0" : "bear-opacity-100"
+              m ? "bear-opacity-0" : "bear-opacity-100"
             ),
-            style: { transitionDuration: `${x}ms` },
-            onClick: g ? n : void 0,
+            style: { transitionDuration: `${N}ms` },
+            onClick: v ? o : void 0,
             "aria-hidden": "true"
           }
         ),
-        /* @__PURE__ */ c(
-          l,
+        /* @__PURE__ */ f(
+          s,
           {
+            ref: x,
             role: "dialog",
+            tabIndex: -1,
             "aria-modal": "true",
             "aria-labelledby": b ? "bottom-sheet-title" : void 0,
             className: i(
               "Bear-BottomSheet bear-relative bear-w-full bear-rounded-t-2xl bear-shadow-2xl bear-transition-transform bear-duration-300",
               "bear-flex bear-flex-col bear-min-h-0 bear-overflow-hidden",
               "bear-bg-white dark:bear-bg-neutral-900 bear-border-t bear-border-neutral-200 dark:bear-border-neutral-700",
-              U[O],
-              C && !E ? "bear-translate-y-0" : "bear-translate-y-full",
-              B
+              X[g],
+              C && !m ? "bear-translate-y-0" : "bear-translate-y-full",
+              T
             ),
             children: [
-              _ && /* @__PURE__ */ r(f, { className: "bear-justify-center bear-pt-2 bear-pb-1", children: /* @__PURE__ */ r(l, { className: "bear-w-12 bear-h-1 bear-rounded-full bear-bg-neutral-300 dark:bear-bg-neutral-600", "aria-hidden": !0 }) }),
-              (b || p) && /* @__PURE__ */ c(
-                f,
+              _ && /* @__PURE__ */ r(h, { className: "bear-justify-center bear-pt-2 bear-pb-1", children: /* @__PURE__ */ r(s, { className: "bear-w-12 bear-h-1 bear-rounded-full bear-bg-neutral-300 dark:bear-bg-neutral-600", "aria-hidden": !0 }) }),
+              (b || y) && /* @__PURE__ */ f(
+                h,
                 {
                   className: i(
                     "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",
-                    A && "bear-sticky bear-top-0 bear-z-10 bear-bg-white dark:bear-bg-neutral-900"
+                    B && "bear-sticky bear-top-0 bear-z-10 bear-bg-white dark:bear-bg-neutral-900"
                   ),
                   children: [
                     b && /* @__PURE__ */ r(
-                      P,
+                      K,
                       {
                         id: "bottom-sheet-title",
                         weight: "semibold",
@@ -101,18 +109,18 @@ const ae = (N) => {
                         children: b
                       }
                     ),
-                    p && /* @__PURE__ */ r(M, { variant: F, onClick: n, "aria-label": j, children: /* @__PURE__ */ r(z, { className: "bear-w-5 bear-h-5" }) })
+                    y && /* @__PURE__ */ r(U, { variant: z, onClick: o, "aria-label": M, children: /* @__PURE__ */ r(Z, { className: "bear-w-5 bear-h-5" }) })
                   ]
                 }
               ),
               /* @__PURE__ */ r(
-                l,
+                s,
                 {
                   className: i(
                     "bear-flex-1 bear-min-h-0 bear-p-4 bear-text-neutral-700 dark:bear-text-neutral-300",
-                    v ? "bear-overflow-y-auto" : "bear-overflow-hidden"
+                    A ? "bear-overflow-y-auto" : "bear-overflow-hidden"
                   ),
-                  children: S
+                  children: O
                 }
               )
             ]
@@ -121,8 +129,8 @@ const ae = (N) => {
       ]
     }
   );
-  return I(T, document.body);
+  return R(L, document.body);
 };
 export {
-  ae as BottomSheet
+  be as BottomSheet
 };