@forgedevstack/bear 1.3.2 → 1.3.4

package/dist/components/CommandPalette/CommandPalette.js

@@ -1,89 +1,66 @@
-import { jsxs as l, jsx as a, Fragment as Y } from "react/jsx-runtime";
-import { useState as N, useRef as j, useCallback as C, useMemo as f, useEffect as I } from "react";
+import { jsxs as c, jsx as a, Fragment as Y } from "react/jsx-runtime";
+import { useState as v, useRef as z, useCallback as N, useMemo as p, useEffect as I } from "react";
 import { createPortal as Z } from "react-dom";
-import { cn as H } from "../../utils/cn.js";
-import { COMMAND_PALETTE_DEFAULT_TRANSLATIONS as $, COMMAND_PALETTE_MAX_RECENT as J, COMMAND_PALETTE_TRIGGER_KEY as ee, COMMAND_PALETTE_Z_INDEX as re } from "./CommandPalette.const.js";
-import { defaultFilterFn as ae, groupCommandsByCategory as te, formatShortcut as ne } from "./CommandPalette.utils.js";
-const D = ({
-  command: t,
-  isHighlighted: w,
-  onSelect: m
-}) => /* @__PURE__ */ l(
-  "button",
-  {
-    type: "button",
-    onClick: m,
-    disabled: t.disabled,
-    className: H(
-      "Bear-CommandPalette__item bear-w-full bear-flex bear-items-center bear-gap-3 bear-px-4 bear-py-2.5 bear-text-left bear-transition-colors",
-      w ? "bear-bg-primary-500/20 bear-text-primary-400" : "bear-text-gray-700 dark:bear-text-zinc-300 hover:bear-bg-gray-100 dark:hover:bear-bg-zinc-700",
-      t.disabled && "bear-opacity-50 bear-cursor-not-allowed"
-    ),
-    children: [
-      t.icon && /* @__PURE__ */ a("span", { className: "Bear-CommandPalette__item-icon bear-text-gray-500 dark:bear-text-zinc-400 bear-shrink-0", children: t.icon }),
-      /* @__PURE__ */ l("div", { className: "Bear-CommandPalette__item-content bear-flex-1 bear-min-w-0", children: [
-        /* @__PURE__ */ a("div", { className: "Bear-CommandPalette__item-label bear-text-sm bear-font-medium bear-truncate", children: t.label }),
-        t.description && /* @__PURE__ */ a("div", { className: "Bear-CommandPalette__item-description bear-text-xs bear-text-gray-500 dark:bear-text-zinc-500 bear-truncate", children: t.description })
-      ] }),
-      t.shortcut && /* @__PURE__ */ a("div", { className: "Bear-CommandPalette__item-shortcut bear-flex bear-gap-1 bear-shrink-0", children: ne(t.shortcut).map((P, h) => /* @__PURE__ */ a(
-        "kbd",
-        {
-          className: "bear-px-1.5 bear-py-0.5 bear-text-xs bear-font-mono bear-bg-gray-200 bear-text-gray-600 dark:bear-bg-zinc-700 dark:bear-text-zinc-400 bear-rounded",
-          children: P
-        },
-        h
-      )) })
-    ]
-  }
-), ce = ({
-  commands: t,
-  open: w,
-  onOpenChange: m,
-  placeholder: P,
-  showRecent: h = !0,
-  maxRecent: g = J,
-  recentIds: F,
-  onRecentChange: y,
-  groupByCategory: z = !1,
-  filterFn: A = ae,
-  triggerKey: T = ee,
-  className: R,
+import { cn as $ } from "../../utils/cn.js";
+import { useFocusTrap as J } from "../../hooks/useFocusTrap/useFocusTrap.js";
+import { COMMAND_PALETTE_DEFAULT_TRANSLATIONS as ee, COMMAND_PALETTE_MAX_RECENT as re, COMMAND_PALETTE_TRIGGER_KEY as ae, COMMAND_PALETTE_Z_INDEX as te } from "./CommandPalette.const.js";
+import { defaultFilterFn as ne, groupCommandsByCategory as le } from "./CommandPalette.utils.js";
+import { CommandItem as D } from "./CommandItem.js";
+const fe = ({
+  commands: m,
+  open: O,
+  onOpenChange: x,
+  placeholder: R,
+  showRecent: A = !0,
+  maxRecent: h = re,
+  recentIds: j,
+  onRecentChange: g,
+  groupByCategory: w = !1,
+  filterFn: B = ne,
+  triggerKey: T = ae,
+  className: H,
   testId: q,
   translations: L,
   icon: G,
   footer: M
 }) => {
-  const [U, X] = N(!1), [i, S] = N(""), [n, k] = N(0), [Q, V] = N([]), K = j(null), B = j(null), u = w ?? U, d = C((e) => {
-    m == null || m(e), X(e);
-  }, [m]), s = F ?? Q, O = C((e) => {
-    y == null || y(e), V(e);
-  }, [y]), _ = f(() => ({
-    ...$,
+  const [U, X] = v(!1), [n, S] = v(""), [t, k] = v(0), [Q, V] = v([]), C = z(null), E = z(null), F = z(null), i = O ?? U, l = N((e) => {
+    x == null || x(e), X(e);
+  }, [x]);
+  J(F, {
+    enabled: i,
+    initialFocusRef: C,
+    onEscape: () => l(!1)
+  });
+  const s = j ?? Q, K = N((e) => {
+    g == null || g(e), V(e);
+  }, [g]), y = p(() => ({
+    ...ee,
     ...L
-  }), [L]), p = f(() => i.trim() ? t.filter((e) => A(e, i)) : t, [t, i, A]), b = f(() => !h || i.trim() ? [] : s.slice(0, g).map((e) => t.find((r) => r.id === e)).filter(Boolean), [h, i, s, g, t]), v = f(() => z ? te(p) : null, [p, z]), o = f(() => {
+  }), [L]), u = p(() => n.trim() ? m.filter((e) => B(e, n)) : m, [m, n, B]), d = p(() => !A || n.trim() ? [] : s.slice(0, h).map((e) => m.find((r) => r.id === e)).filter(Boolean), [A, n, s, h, m]), _ = p(() => w ? le(u) : null, [u, w]), o = p(() => {
     const e = [];
-    return b.length > 0 && e.push(...b), e.push(...p.filter((r) => !s.includes(r.id))), e;
-  }, [b, p, s]);
+    return d.length > 0 && e.push(...d), e.push(...u.filter((r) => !s.includes(r.id))), e;
+  }, [d, u, s]);
   I(() => {
     const e = (r) => {
-      (r.metaKey || r.ctrlKey) && r.key.toLowerCase() === T && (r.preventDefault(), d(!u)), r.key === "Escape" && u && (r.preventDefault(), d(!1));
+      (r.metaKey || r.ctrlKey) && r.key.toLowerCase() === T && (r.preventDefault(), l(!i)), r.key === "Escape" && i && (r.preventDefault(), l(!1));
     };
     return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
-  }, [u, T, d]), I(() => {
-    u && (S(""), k(0), setTimeout(() => {
+  }, [i, T, l]), I(() => {
+    i && (S(""), k(0), setTimeout(() => {
       var e;
-      return (e = K.current) == null ? void 0 : e.focus();
+      return (e = C.current) == null ? void 0 : e.focus();
     }, 50));
-  }, [u]), I(() => {
-    if (n >= 0 && B.current) {
-      const r = B.current.querySelectorAll("[data-command-item]")[n];
+  }, [i]), I(() => {
+    if (t >= 0 && E.current) {
+      const r = E.current.querySelectorAll("[data-command-item]")[t];
       r && r.scrollIntoView({ block: "nearest" });
     }
-  }, [n]);
-  const x = C((e) => {
-    const r = [e.id, ...s.filter((c) => c !== e.id)].slice(0, g);
-    O(r), d(!1), e.onSelect();
-  }, [s, g, O, d]), W = C((e) => {
+  }, [t]);
+  const f = N((e) => {
+    const r = [e.id, ...s.filter((b) => b !== e.id)].slice(0, h);
+    K(r), l(!1), e.onSelect();
+  }, [s, h, K, l]), W = N((e) => {
     switch (e.key) {
       case "ArrowDown":
         e.preventDefault(), k((r) => r < o.length - 1 ? r + 1 : 0);
@@ -92,93 +69,101 @@ const D = ({
         e.preventDefault(), k((r) => r > 0 ? r - 1 : o.length - 1);
         break;
       case "Enter":
-        e.preventDefault(), o[n] && !o[n].disabled && x(o[n]);
+        e.preventDefault(), o[t] && !o[t].disabled && f(o[t]);
         break;
       case "Escape":
-        e.preventDefault(), d(!1);
+        e.preventDefault(), l(!1);
         break;
     }
-  }, [o, n, x, d]);
-  return u && typeof document < "u" ? Z(
-    /* @__PURE__ */ l(
+  }, [o, t, f, l]);
+  return i && typeof document < "u" ? Z(
+    /* @__PURE__ */ c(
       "div",
       {
-        className: H("Bear-CommandPalette bear-fixed bear-inset-0 bear-flex bear-items-start bear-justify-center bear-pt-[15vh]", R),
-        style: { zIndex: re },
+        className: $("Bear-CommandPalette bear-fixed bear-inset-0 bear-flex bear-items-start bear-justify-center bear-pt-[15vh]", H),
+        style: { zIndex: te },
         "data-testid": q,
         children: [
           /* @__PURE__ */ a(
             "div",
             {
               className: "Bear-CommandPalette__backdrop bear-absolute bear-inset-0 bear-bg-black/50 bear-backdrop-blur-sm",
-              onClick: () => d(!1)
+              onClick: () => l(!1)
             }
           ),
-          /* @__PURE__ */ l("div", { className: "Bear-CommandPalette__content bear-relative bear-w-full bear-max-w-xl bear-bg-white dark:bear-bg-zinc-800 bear-border bear-border-gray-200 dark:bear-border-zinc-700 bear-rounded-xl bear-shadow-2xl bear-overflow-hidden", children: [
-            /* @__PURE__ */ l("div", { className: "Bear-CommandPalette__search bear-flex bear-items-center bear-gap-3 bear-px-4 bear-py-3 bear-border-b bear-border-gray-200 dark:bear-border-zinc-700", children: [
-              G ?? /* @__PURE__ */ a("svg", { className: "bear-w-5 bear-h-5 bear-text-gray-500 dark:bear-text-zinc-400 bear-shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ a("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" }) }),
-              /* @__PURE__ */ a(
-                "input",
-                {
-                  ref: K,
-                  type: "text",
-                  value: i,
-                  onChange: (e) => {
-                    S(e.target.value), k(0);
-                  },
-                  onKeyDown: W,
-                  placeholder: P || _.placeholder,
-                  className: "Bear-CommandPalette__input bear-flex-1 bear-bg-transparent bear-border-0 bear-outline-none bear-text-gray-900 dark:bear-text-white placeholder:bear-text-gray-400 dark:placeholder:bear-text-zinc-500"
-                }
-              ),
-              /* @__PURE__ */ a("kbd", { className: "bear-px-2 bear-py-1 bear-text-xs bear-font-mono bear-bg-gray-200 bear-text-gray-600 dark:bear-bg-zinc-700 dark:bear-text-zinc-400 bear-rounded", children: "esc" })
-            ] }),
-            /* @__PURE__ */ a(
-              "div",
-              {
-                ref: B,
-                className: "Bear-CommandPalette__list bear-max-h-[60vh] bear-overflow-y-auto",
-                children: o.length === 0 ? /* @__PURE__ */ a("div", { className: "Bear-CommandPalette__empty bear-px-4 bear-py-8 bear-text-center bear-text-sm bear-text-gray-500 dark:bear-text-zinc-500", children: _.noResults }) : /* @__PURE__ */ l(Y, { children: [
-                  b.length > 0 && !i.trim() && /* @__PURE__ */ l("div", { className: "Bear-CommandPalette__group", children: [
-                    /* @__PURE__ */ a("div", { className: "Bear-CommandPalette__group-header bear-px-4 bear-py-2 bear-text-xs bear-font-medium bear-text-gray-500 dark:bear-text-zinc-500 bear-uppercase bear-tracking-wider bear-bg-gray-50 dark:bear-bg-zinc-800/50", children: _.recentCommands }),
-                    b.map((e, r) => /* @__PURE__ */ a("div", { "data-command-item": !0, children: /* @__PURE__ */ a(
-                      D,
-                      {
-                        command: e,
-                        isHighlighted: n === r,
-                        onSelect: () => x(e)
-                      }
-                    ) }, `recent-${e.id}`))
-                  ] }),
-                  z && v ? v.map((e) => {
-                    const r = b.length + v.slice(0, v.indexOf(e)).reduce((c, E) => c + E.commands.length, 0);
-                    return /* @__PURE__ */ l("div", { className: "Bear-CommandPalette__group", children: [
-                      /* @__PURE__ */ a("div", { className: "Bear-CommandPalette__group-header bear-px-4 bear-py-2 bear-text-xs bear-font-medium bear-text-gray-500 dark:bear-text-zinc-500 bear-uppercase bear-tracking-wider bear-bg-gray-50 dark:bear-bg-zinc-800/50", children: e.name }),
-                      e.commands.map((c, E) => /* @__PURE__ */ a("div", { "data-command-item": !0, children: /* @__PURE__ */ a(
-                        D,
-                        {
-                          command: c,
-                          isHighlighted: n === r + E,
-                          onSelect: () => x(c)
-                        }
-                      ) }, c.id))
-                    ] }, e.name);
-                  }) : /* @__PURE__ */ l("div", { className: "Bear-CommandPalette__group", children: [
-                    !i.trim() && b.length > 0 && /* @__PURE__ */ a("div", { className: "Bear-CommandPalette__group-header bear-px-4 bear-py-2 bear-text-xs bear-font-medium bear-text-gray-500 dark:bear-text-zinc-500 bear-uppercase bear-tracking-wider bear-bg-gray-50 dark:bear-bg-zinc-800/50", children: _.allCommands }),
-                    p.filter((e) => !s.includes(e.id) || i.trim()).map((e, r) => /* @__PURE__ */ a("div", { "data-command-item": !0, children: /* @__PURE__ */ a(
-                      D,
-                      {
-                        command: e,
-                        isHighlighted: n === b.length + r,
-                        onSelect: () => x(e)
-                      }
-                    ) }, e.id))
-                  ] })
-                ] })
-              }
-            ),
-            M && /* @__PURE__ */ a("div", { className: "Bear-CommandPalette__footer bear-px-4 bear-py-2 bear-border-t bear-border-gray-200 dark:bear-border-zinc-700 bear-text-xs bear-text-gray-500 dark:bear-text-zinc-500", children: M })
-          ] })
+          /* @__PURE__ */ c(
+            "div",
+            {
+              ref: F,
+              tabIndex: -1,
+              className: "Bear-CommandPalette__content bear-relative bear-w-full bear-max-w-xl bear-bg-white dark:bear-bg-zinc-800 bear-border bear-border-gray-200 dark:bear-border-zinc-700 bear-rounded-xl bear-shadow-2xl bear-overflow-hidden",
+              children: [
+                /* @__PURE__ */ c("div", { className: "Bear-CommandPalette__search bear-flex bear-items-center bear-gap-3 bear-px-4 bear-py-3 bear-border-b bear-border-gray-200 dark:bear-border-zinc-700", children: [
+                  G ?? /* @__PURE__ */ a("svg", { className: "bear-w-5 bear-h-5 bear-text-gray-500 dark:bear-text-zinc-400 bear-shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ a("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" }) }),
+                  /* @__PURE__ */ a(
+                    "input",
+                    {
+                      ref: C,
+                      type: "text",
+                      value: n,
+                      onChange: (e) => {
+                        S(e.target.value), k(0);
+                      },
+                      onKeyDown: W,
+                      placeholder: R || y.placeholder,
+                      className: "Bear-CommandPalette__input bear-flex-1 bear-bg-transparent bear-border-0 bear-outline-none bear-text-gray-900 dark:bear-text-white placeholder:bear-text-gray-400 dark:placeholder:bear-text-zinc-500"
+                    }
+                  ),
+                  /* @__PURE__ */ a("kbd", { className: "bear-px-2 bear-py-1 bear-text-xs bear-font-mono bear-bg-gray-200 bear-text-gray-600 dark:bear-bg-zinc-700 dark:bear-text-zinc-400 bear-rounded", children: "esc" })
+                ] }),
+                /* @__PURE__ */ a(
+                  "div",
+                  {
+                    ref: E,
+                    className: "Bear-CommandPalette__list bear-max-h-[60vh] bear-overflow-y-auto",
+                    children: o.length === 0 ? /* @__PURE__ */ a("div", { className: "Bear-CommandPalette__empty bear-px-4 bear-py-8 bear-text-center bear-text-sm bear-text-gray-500 dark:bear-text-zinc-500", children: y.noResults }) : /* @__PURE__ */ c(Y, { children: [
+                      d.length > 0 && !n.trim() && /* @__PURE__ */ c("div", { className: "Bear-CommandPalette__group", children: [
+                        /* @__PURE__ */ a("div", { className: "Bear-CommandPalette__group-header bear-px-4 bear-py-2 bear-text-xs bear-font-medium bear-text-gray-500 dark:bear-text-zinc-500 bear-uppercase bear-tracking-wider bear-bg-gray-50 dark:bear-bg-zinc-800/50", children: y.recentCommands }),
+                        d.map((e, r) => /* @__PURE__ */ a("div", { "data-command-item": !0, children: /* @__PURE__ */ a(
+                          D,
+                          {
+                            command: e,
+                            isHighlighted: t === r,
+                            onSelect: () => f(e)
+                          }
+                        ) }, `recent-${e.id}`))
+                      ] }),
+                      w && _ ? _.map((e) => {
+                        const r = d.length + _.slice(0, _.indexOf(e)).reduce((b, P) => b + P.commands.length, 0);
+                        return /* @__PURE__ */ c("div", { className: "Bear-CommandPalette__group", children: [
+                          /* @__PURE__ */ a("div", { className: "Bear-CommandPalette__group-header bear-px-4 bear-py-2 bear-text-xs bear-font-medium bear-text-gray-500 dark:bear-text-zinc-500 bear-uppercase bear-tracking-wider bear-bg-gray-50 dark:bear-bg-zinc-800/50", children: e.name }),
+                          e.commands.map((b, P) => /* @__PURE__ */ a("div", { "data-command-item": !0, children: /* @__PURE__ */ a(
+                            D,
+                            {
+                              command: b,
+                              isHighlighted: t === r + P,
+                              onSelect: () => f(b)
+                            }
+                          ) }, b.id))
+                        ] }, e.name);
+                      }) : /* @__PURE__ */ c("div", { className: "Bear-CommandPalette__group", children: [
+                        !n.trim() && d.length > 0 && /* @__PURE__ */ a("div", { className: "Bear-CommandPalette__group-header bear-px-4 bear-py-2 bear-text-xs bear-font-medium bear-text-gray-500 dark:bear-text-zinc-500 bear-uppercase bear-tracking-wider bear-bg-gray-50 dark:bear-bg-zinc-800/50", children: y.allCommands }),
+                        u.filter((e) => !s.includes(e.id) || n.trim()).map((e, r) => /* @__PURE__ */ a("div", { "data-command-item": !0, children: /* @__PURE__ */ a(
+                          D,
+                          {
+                            command: e,
+                            isHighlighted: t === d.length + r,
+                            onSelect: () => f(e)
+                          }
+                        ) }, e.id))
+                      ] })
+                    ] })
+                  }
+                ),
+                M && /* @__PURE__ */ a("div", { className: "Bear-CommandPalette__footer bear-px-4 bear-py-2 bear-border-t bear-border-gray-200 dark:bear-border-zinc-700 bear-text-xs bear-text-gray-500 dark:bear-text-zinc-500", children: M })
+              ]
+            }
+          )
         ]
       }
     ),
@@ -186,5 +171,5 @@ const D = ({
   ) : null;
 };
 export {
-  ce as CommandPalette
+  fe as CommandPalette
 };

package/dist/components/ContextMeter/ContextMeter.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),p=require("../../constants/numbers.const.cjs"),c=require("../../constants/generals.const.cjs"),B=require("../../utils/cn.cjs");require("react");const q=require("../../utils/generateBearId.utils.cjs"),b=require("../../utils/useBearId.cjs"),n=require("../Box/Box.cjs"),g=require("../Flex/Flex.cjs"),i=require("../Typography/Typography.cjs"),l=require("./ContextMeter.const.cjs"),u=require("./ContextMeter.utils.cjs"),m=x=>{const{id:d,testId:T,used:t,max:r=l.CONTEXT_METER_MAX_DEFAULT,translations:_,className:M}=x,C=b.useBearId(c.COMPONENT_NAME_CONTEXT_METER),s=q.resolveBearId(d,C),E={...l.CONTEXT_METER_DEFAULT_TRANSLATIONS,..._},a=u.resolveContextMeterPercent(t,r),N=u.resolveContextMeterTone(a),o=`${s}-label`;return e.jsxs(n.Box,{id:s,"data-testid":T,className:B.cn("Bear-ContextMeter",`Bear-ContextMeter--${N}`,M),style:{"--Bear-ContextMeter-percent":`${a}${c.PERCENT_UNIT}`},children:[e.jsxs(g.Flex,{justify:"between",align:"center",gap:2,children:[e.jsx(i.Typography,{id:o,variant:"caption",children:E.label}),e.jsxs(i.Typography,{variant:"caption",children:[t,"/",r]})]}),e.jsx(n.Box,{className:"Bear-ContextMeter__track",role:"progressbar","aria-labelledby":o,"aria-valuemin":p.ZERO,"aria-valuemax":r,"aria-valuenow":t,children:e.jsx(n.Box,{className:"Bear-ContextMeter__fill"})})]})};exports.ContextMeter=m;

package/dist/components/ContextMeter/ContextMeter.const.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const E=require("../../constants/numbers.const.cjs"),T={label:"Context"},_=E.CONTEXT_METER_DEFAULT_MAX,N=E.SEVENTY_TWO,R=E.NINETY,C=E.ONE_HUNDRED;exports.CONTEXT_METER_DANGER_PERCENT=R;exports.CONTEXT_METER_DEFAULT_TRANSLATIONS=T;exports.CONTEXT_METER_MAX_DEFAULT=_;exports.CONTEXT_METER_PERCENT_CAP=C;exports.CONTEXT_METER_WARN_PERCENT=N;

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

@@ -0,0 +1,6 @@
+import { ContextMeterTranslations } from './ContextMeter.types';
+export declare const CONTEXT_METER_DEFAULT_TRANSLATIONS: ContextMeterTranslations;
+export declare const CONTEXT_METER_MAX_DEFAULT = 100;
+export declare const CONTEXT_METER_WARN_PERCENT = 72;
+export declare const CONTEXT_METER_DANGER_PERCENT = 90;
+export declare const CONTEXT_METER_PERCENT_CAP = 100;

package/dist/components/ContextMeter/ContextMeter.const.js

@@ -0,0 +1,11 @@
+import { CONTEXT_METER_DEFAULT_MAX as E, ONE_HUNDRED as T, NINETY as _, SEVENTY_TWO as N } from "../../constants/numbers.const.js";
+const C = {
+  label: "Context"
+}, A = E, o = N, t = _, O = T;
+export {
+  t as CONTEXT_METER_DANGER_PERCENT,
+  C as CONTEXT_METER_DEFAULT_TRANSLATIONS,
+  A as CONTEXT_METER_MAX_DEFAULT,
+  O as CONTEXT_METER_PERCENT_CAP,
+  o as CONTEXT_METER_WARN_PERCENT
+};

package/dist/components/ContextMeter/ContextMeter.d.ts

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

package/dist/components/ContextMeter/ContextMeter.js

@@ -0,0 +1,49 @@
+import { jsxs as t, jsx as o } from "react/jsx-runtime";
+import { ZERO as N } from "../../constants/numbers.const.js";
+import { COMPONENT_NAME_CONTEXT_METER as _, PERCENT_UNIT as f } from "../../constants/generals.const.js";
+import { cn as C } from "../../utils/cn.js";
+import "react";
+import { resolveBearId as b } from "../../utils/generateBearId.utils.js";
+import { useBearId as v } from "../../utils/useBearId.js";
+import { Box as a } from "../Box/Box.js";
+import { Flex as B } from "../Flex/Flex.js";
+import { Typography as s } from "../Typography/Typography.js";
+import { CONTEXT_METER_MAX_DEFAULT as I, CONTEXT_METER_DEFAULT_TRANSLATIONS as u } from "./ContextMeter.const.js";
+import { resolveContextMeterPercent as O, resolveContextMeterTone as h } from "./ContextMeter.utils.js";
+const D = (m) => {
+  const { id: c, testId: p, used: e, max: r = I, translations: d, className: T } = m, E = v(_), n = b(c, E), x = { ...u, ...d }, i = O(e, r), M = h(i), l = `${n}-label`;
+  return /* @__PURE__ */ t(
+    a,
+    {
+      id: n,
+      "data-testid": p,
+      className: C("Bear-ContextMeter", `Bear-ContextMeter--${M}`, T),
+      style: { "--Bear-ContextMeter-percent": `${i}${f}` },
+      children: [
+        /* @__PURE__ */ t(B, { justify: "between", align: "center", gap: 2, children: [
+          /* @__PURE__ */ o(s, { id: l, variant: "caption", children: x.label }),
+          /* @__PURE__ */ t(s, { variant: "caption", children: [
+            e,
+            "/",
+            r
+          ] })
+        ] }),
+        /* @__PURE__ */ o(
+          a,
+          {
+            className: "Bear-ContextMeter__track",
+            role: "progressbar",
+            "aria-labelledby": l,
+            "aria-valuemin": N,
+            "aria-valuemax": r,
+            "aria-valuenow": e,
+            children: /* @__PURE__ */ o(a, { className: "Bear-ContextMeter__fill" })
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  D as ContextMeter
+};

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

@@ -0,0 +1,11 @@
+export interface ContextMeterTranslations {
+    label: string;
+}
+export interface ContextMeterProps {
+    id?: string;
+    testId?: string;
+    used: number;
+    max?: number;
+    translations?: Partial<ContextMeterTranslations>;
+    className?: string;
+}

package/dist/components/ContextMeter/ContextMeter.utils.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("../../constants/numbers.const.cjs"),e=require("./ContextMeter.const.cjs"),o=(t,n)=>{if(n<=r.ZERO)return r.ZERO;const E=t/n*e.CONTEXT_METER_PERCENT_CAP;return E<r.ZERO?r.ZERO:E>e.CONTEXT_METER_PERCENT_CAP?e.CONTEXT_METER_PERCENT_CAP:E},T=t=>t>=e.CONTEXT_METER_DANGER_PERCENT?"danger":t>=e.CONTEXT_METER_WARN_PERCENT?"warn":"ok";exports.resolveContextMeterPercent=o;exports.resolveContextMeterTone=T;

package/dist/components/ContextMeter/ContextMeter.utils.d.ts

@@ -0,0 +1,2 @@
+export declare const resolveContextMeterPercent: (used: number, max: number) => number;
+export declare const resolveContextMeterTone: (percent: number) => "danger" | "warn" | "ok";

package/dist/components/ContextMeter/ContextMeter.utils.js

@@ -0,0 +1,12 @@
+import { ZERO as e } from "../../constants/numbers.const.js";
+import { CONTEXT_METER_PERCENT_CAP as E, CONTEXT_METER_DANGER_PERCENT as o, CONTEXT_METER_WARN_PERCENT as T } from "./ContextMeter.const.js";
+const _ = (r, n) => {
+  if (n <= e)
+    return e;
+  const t = r / n * E;
+  return t < e ? e : t > E ? E : t;
+}, N = (r) => r >= o ? "danger" : r >= T ? "warn" : "ok";
+export {
+  _ as resolveContextMeterPercent,
+  N as resolveContextMeterTone
+};

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

@@ -0,0 +1,2 @@
+export { ContextMeter } from './ContextMeter';
+export type { ContextMeterProps, ContextMeterTranslations } from './ContextMeter.types';

package/dist/components/Drawer/Drawer.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),L=require("react-dom"),P=require("../../context/BearProvider.cjs"),j=require("../../utils/cn.cjs");require("react");const C=require("../../utils/generateBearId.utils.cjs"),F=require("../../utils/useBearId.cjs"),r=require("../../constants/generals.const.cjs"),M=require("../../hooks/useFixedAnchorPosition/useFixedAnchorPosition.const.cjs"),U=require("../../hooks/useFixedAnchorPosition/useFixedAnchorPosition.utils.cjs"),g=require("../Backdrop/Backdrop.cjs"),t=require("../Box/Box.cjs"),s=require("./Drawer.const.cjs"),S=require("./helpers/DrawerOptionalHeader.cjs"),W=require("./hooks/useDrawer.cjs"),$=c=>{const{isOpen:E,onClose:o,title:a,children:D,side:O=s.DRAWER_DEFAULT_SIDE,anchor:p,variant:H="temporary",size:w=s.DRAWER_DEFAULT_SIZE,showCloseButton:i=r.BOOLEAN_TRUE,closeOnBackdrop:A=r.BOOLEAN_TRUE,closeOnEscape:q=r.BOOLEAN_TRUE,className:N,container:R,id:f,testId:m}=c,{openEffect:l,closeEffect:d}=U.resolveOverlayEffects(c,M.OVERLAY_OPEN_EFFECT_DEFAULT),x=F.useBearId(r.COMPONENT_NAME_DRAWER),u=C.resolveBearId(f,x),{direction:I}=P.useBearDirectionOptional(),_=p??O,{isMounted:v,isPanelOpen:n}=W.useDrawer({isOpen:E,onClose:o,closeOnEscape:q,openEffect:l,closeEffect:d}),T=n?l:d;if(!v)return null;const b=!!a||i,B=`${u}-title`,h=A?()=>o():void 0,k=a?B:void 0,y=e.jsxs(t.Box,{id:u,testId:m,className:"Bear-Drawer",children:[e.jsx(g.Backdrop,{open:n,keepMounted:!0,blur:!0,nested:!0,transitionDuration:s.DRAWER_ANIMATION_MS,className:"Bear-Drawer__backdrop",onClick:h}),e.jsxs(t.Box,{role:"dialog","aria-modal":r.BOOLEAN_TRUE,"aria-labelledby":k,className:j.cn("Bear-Drawer__panel",`Bear-Drawer__panel--${_}`,`Bear-Drawer__panel--${w}`,`Bear-Drawer__panel--effect-${T}`,n&&"Bear-Drawer__panel--open",N),children:[e.jsx(S.DrawerOptionalHeader,{showHeader:b,side:_,title:a,titleId:B,showCloseButton:i,onClose:o,direction:I}),e.jsx(t.Box,{className:"Bear-Drawer__body",children:D})]})]});return L.createPortal(y,R??document.body)};exports.Drawer=$;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),C=require("react"),j=require("react-dom"),W=require("../../context/BearProvider.cjs"),N=require("../../utils/cn.cjs"),g=require("../../utils/generateBearId.utils.cjs"),$=require("../../utils/useBearId.cjs"),V=require("../../hooks/useFocusTrap/useFocusTrap.cjs"),e=require("../../constants/generals.const.cjs"),H=require("../../hooks/useFixedAnchorPosition/useFixedAnchorPosition.const.cjs"),Y=require("../../hooks/useFixedAnchorPosition/useFixedAnchorPosition.utils.cjs"),z=require("../Backdrop/Backdrop.cjs"),l=require("../Box/Box.cjs"),t=require("./Drawer.const.cjs"),Z=require("./helpers/DrawerOptionalHeader.cjs"),G=require("./hooks/useDrawer.cjs"),J=d=>{const{isOpen:w,onClose:s,title:c,children:T,side:f=t.DRAWER_DEFAULT_SIDE,anchor:q,variant:i=t.DRAWER_DEFAULT_VARIANT,size:I=t.DRAWER_DEFAULT_SIZE,showCloseButton:u=e.BOOLEAN_TRUE,closeOnBackdrop:L=e.BOOLEAN_TRUE,closeOnEscape:E=e.BOOLEAN_TRUE,className:m,container:x,id:F,testId:b}=d,r=i===e.DRAWER_VARIANT_PERMANENT,o=i===e.DRAWER_VARIANT_TEMPORARY,{openEffect:_,closeEffect:A}=Y.resolveOverlayEffects(d,H.OVERLAY_OPEN_EFFECT_DEFAULT),v=$.useBearId(e.COMPONENT_NAME_DRAWER),B=g.resolveBearId(F,v),{direction:P}=W.useBearDirectionOptional(),O=q??f,{isMounted:h,isPanelOpen:a}=G.useDrawer({isOpen:r?e.BOOLEAN_TRUE:w,onClose:s,closeOnEscape:r?e.BOOLEAN_FALSE:E,openEffect:_,closeEffect:A,lockScroll:o,alwaysMounted:r}),y=a?_:A,D=C.useRef(null);if(V.useFocusTrap(D,{enabled:o&&a,onEscape:E?s:void 0}),!h)return null;const M=!!c||u,R=`${B}-title`,S=L&&o?()=>s():void 0,k=c?R:void 0,U=r?"complementary":"dialog",p=n.jsxs(l.Box,{id:B,"data-testid":b,className:N.cn("Bear-Drawer",`Bear-Drawer--${i}`),children:[o&&n.jsx(z.Backdrop,{open:a,keepMounted:!0,blur:!0,nested:!0,transitionDuration:t.DRAWER_ANIMATION_MS,className:"Bear-Drawer__backdrop",onClick:S}),n.jsxs(l.Box,{ref:D,role:U,tabIndex:-1,"aria-modal":o?e.BOOLEAN_TRUE:e.BOOLEAN_FALSE,"aria-labelledby":k,className:N.cn("Bear-Drawer__panel",`Bear-Drawer__panel--${O}`,`Bear-Drawer__panel--${I}`,`Bear-Drawer__panel--effect-${y}`,a&&"Bear-Drawer__panel--open",m),children:[n.jsx(Z.DrawerOptionalHeader,{showHeader:M,side:O,title:c,titleId:R,showCloseButton:r?e.BOOLEAN_FALSE:u,onClose:s,direction:P}),n.jsx(l.Box,{className:"Bear-Drawer__body",children:T})]})]});return r?p:j.createPortal(p,x??document.body)};exports.Drawer=J;

package/dist/components/Drawer/Drawer.const.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const _=require("../../constants/numbers.const.cjs"),E=require("../../constants/generals.const.cjs"),D=_.THREE_HUNDRED,R=E.POSITION_RIGHT,e=E.SIZE_MD;exports.DRAWER_ANIMATION_MS=D;exports.DRAWER_DEFAULT_SIDE=R;exports.DRAWER_DEFAULT_SIZE=e;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const R=require("../../constants/numbers.const.cjs"),A=require("../../constants/generals.const.cjs"),E=R.THREE_HUNDRED,_=A.POSITION_RIGHT,D=A.SIZE_MD,T=A.DRAWER_VARIANT_TEMPORARY;exports.DRAWER_ANIMATION_MS=E;exports.DRAWER_DEFAULT_SIDE=_;exports.DRAWER_DEFAULT_SIZE=D;exports.DRAWER_DEFAULT_VARIANT=T;

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

@@ -1,4 +1,5 @@
-import { DrawerProps } from './Drawer.types';
+import { DrawerProps, DrawerVariant } from './Drawer.types';
 export declare const DRAWER_ANIMATION_MS = 300;
 export declare const DRAWER_DEFAULT_SIDE: NonNullable<DrawerProps['side']>;
 export declare const DRAWER_DEFAULT_SIZE: NonNullable<DrawerProps['size']>;
+export declare const DRAWER_DEFAULT_VARIANT: DrawerVariant;

package/dist/components/Drawer/Drawer.const.js

@@ -1,8 +1,9 @@
-import { THREE_HUNDRED as E } from "../../constants/numbers.const.js";
-import { POSITION_RIGHT as D, SIZE_MD as R } from "../../constants/generals.const.js";
-const I = E, A = D, t = R;
+import { THREE_HUNDRED as R } from "../../constants/numbers.const.js";
+import { POSITION_RIGHT as A, DRAWER_VARIANT_TEMPORARY as E, SIZE_MD as _ } from "../../constants/generals.const.js";
+const T = R, o = A, t = _, N = E;
 export {
-  I as DRAWER_ANIMATION_MS,
-  A as DRAWER_DEFAULT_SIDE,
-  t as DRAWER_DEFAULT_SIZE
+  T as DRAWER_ANIMATION_MS,
+  o as DRAWER_DEFAULT_SIDE,
+  t as DRAWER_DEFAULT_SIZE,
+  N as DRAWER_DEFAULT_VARIANT
 };

package/dist/components/Drawer/Drawer.d.ts

@@ -1,2 +1,2 @@
 import { DrawerProps } from './Drawer.types';
-export declare const Drawer: (props: DrawerProps) => import('react').ReactPortal | null;
+export declare const Drawer: (props: DrawerProps) => import("react/jsx-runtime").JSX.Element | null;