@forgedevstack/bear 1.2.5 → 1.2.7

package/dist/components/Modal/Modal.js

@@ -1,98 +1,103 @@
-import { jsxs as t, jsx as o } from "react/jsx-runtime";
-import { useCallback as y, useEffect as D } from "react";
-import { createPortal as N } from "react-dom";
-import { cn as e } from "../../utils/cn.js";
-import { CloseIcon as w } from "../Icon/icons/navigation.js";
-import { MODAL_BACKDROP_CLASSES as x, MODAL_TITLE_CLASSES as I, MODAL_CLOSE_CLASSES as R, MODAL_HEADER_CLASSES as T, MODAL_BODY_CLASSES as j, MODAL_FOOTER_CLASSES as P, MODAL_SIZE_CLASSES as g, MODAL_CONTAINER_CLASSES as z } from "./Modal.const.js";
-const G = (_) => {
+import { jsxs as s, jsx as e } from "react/jsx-runtime";
+import { useCallback as D, useEffect as I } from "react";
+import { createPortal as w } from "react-dom";
+import { cn as o } from "../../utils/cn.js";
+import { resolveBearId as x } from "../../utils/generateBearId.utils.js";
+import { useBearId as T } from "../../utils/useBearId.js";
+import { CloseIcon as g } from "../Icon/icons/navigation.js";
+import { Backdrop as j } from "../Backdrop/Backdrop.js";
+import { MODAL_TITLE_CLASSES as R, MODAL_CLOSE_CLASSES as z, MODAL_HEADER_CLASSES as P, MODAL_BODY_CLASSES as $, MODAL_FOOTER_CLASSES as F, MODAL_SIZE_CLASSES as H, MODAL_CONTAINER_CLASSES as K } from "./Modal.const.js";
+const X = (u) => {
   const {
-    isOpen: r,
-    onClose: a,
+    isOpen: a,
+    onClose: r,
     title: l,
     children: S,
-    size: u = "md",
-    showCloseButton: s = !0,
-    closeOnEscape: f = !0,
+    size: p = "md",
+    showCloseButton: c = !0,
+    closeOnEscape: b = !0,
     disableEscapeKeyDown: E = !1,
     lockBodyScroll: C = !0,
-    cancelPreventScroll: b = !1,
+    cancelPreventScroll: B = !1,
     closeOnBackdrop: L = !0,
-    hideBackdrop: p = !1,
-    keepMounted: A = !1,
-    isCancelBackgroundClick: c,
-    className: M,
-    footer: n,
-    testId: B,
-    id: O
-  } = _, i = C && !b, h = c !== void 0 ? c : L, m = f && !E, d = y(
-    (v) => {
-      m && v.key === "Escape" && a();
+    hideBackdrop: M = !1,
+    keepMounted: n = !1,
+    isCancelBackgroundClick: i,
+    className: k,
+    footer: m,
+    testId: A,
+    id: h
+  } = u, v = T("Modal"), d = x(h, v), _ = C && !B, O = i !== void 0 ? i : L, f = b && !E, t = D(
+    (N) => {
+      f && N.key === "Escape" && r();
     },
-    [m, a]
+    [f, r]
   );
-  if (D(() => {
-    if (r)
-      return document.addEventListener("keydown", d), i && (document.body.style.overflow = "hidden"), () => {
-        document.removeEventListener("keydown", d), document.body.style.overflow = "";
+  if (I(() => {
+    if (a)
+      return document.addEventListener("keydown", t), _ && (document.body.style.overflow = "hidden"), () => {
+        document.removeEventListener("keydown", t), document.body.style.overflow = "";
       };
-  }, [r, d, i]), !r && !A) return null;
-  const k = /* @__PURE__ */ t(
+  }, [a, t, _]), !a && !n) return null;
+  const y = /* @__PURE__ */ s(
     "div",
     {
       className: "Bear-Modal bear-fixed bear-inset-0 bear-z-[11000] bear-flex bear-items-center bear-justify-center bear-p-4",
-      "data-testid": B,
-      id: O,
+      "data-testid": A,
+      id: d,
       children: [
-        !p && /* @__PURE__ */ o(
-          "div",
+        !M && /* @__PURE__ */ e(
+          j,
           {
-            className: e("Bear-Modal__backdrop", x),
-            onClick: h ? a : void 0,
-            "aria-hidden": "true"
+            open: a,
+            keepMounted: n,
+            blur: !0,
+            className: "Bear-Modal__backdrop",
+            onClick: O ? () => r() : void 0
           }
         ),
-        /* @__PURE__ */ t(
+        /* @__PURE__ */ s(
           "div",
           {
             role: "dialog",
             "aria-modal": "true",
-            "aria-labelledby": l ? "modal-title" : void 0,
-            className: e(
+            "aria-labelledby": l ? `${d}-title` : void 0,
+            className: o(
               "Bear-Modal__container",
-              z,
-              g[u],
-              M
+              K,
+              H[p],
+              k
             ),
             children: [
-              (l || s) && /* @__PURE__ */ t("div", { className: e("Bear-Modal__header", T), children: [
-                l && /* @__PURE__ */ o(
+              (l || c) && /* @__PURE__ */ s("div", { className: o("Bear-Modal__header", P), children: [
+                l && /* @__PURE__ */ e(
                   "h2",
                   {
-                    id: "modal-title",
-                    className: e("Bear-Modal__title", I),
+                    id: `${d}-title`,
+                    className: o("Bear-Modal__title", R),
                     children: l
                   }
                 ),
-                s && /* @__PURE__ */ o(
+                c && /* @__PURE__ */ e(
                   "button",
                   {
-                    onClick: a,
-                    className: e("Bear-Modal__close", R),
+                    onClick: r,
+                    className: o("Bear-Modal__close", z),
                     "aria-label": "Close modal",
-                    children: /* @__PURE__ */ o(w, { className: "bear-w-5 bear-h-5" })
+                    children: /* @__PURE__ */ e(g, { className: "bear-w-5 bear-h-5" })
                   }
                 )
               ] }),
-              /* @__PURE__ */ o("div", { className: e("Bear-Modal__body", j), children: S }),
-              n && /* @__PURE__ */ o("div", { className: e("Bear-Modal__footer", P), children: n })
+              /* @__PURE__ */ e("div", { className: o("Bear-Modal__body", $), children: S }),
+              m && /* @__PURE__ */ e("div", { className: o("Bear-Modal__footer", F), children: m })
             ]
           }
         )
       ]
     }
   );
-  return N(k, document.body);
+  return w(y, document.body);
 };
 export {
-  G as Modal
+  X as Modal
 };

package/dist/components/PageHeader/PageHeader.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),e=require("./PageHeader.const.cjs"),E=require("../Typography/Typography.cjs"),a=require("../Flex/Flex.cjs"),s=require("../../utils/cn.cjs");require("react");const R=require("../../utils/generateBearId.utils.cjs"),u=require("../../utils/useBearId.cjs"),P=n=>{const{id:t,testId:A,title:i,description:_,breadcrumbs:o,actions:c,className:S}=n,d=u.useBearId("PageHeader"),l=R.resolveBearId(t,d);return r.jsxs("header",{id:l,"data-testid":A,className:s.cn(e.PAGE_HEADER_ROOT_CLASS,e.PAGE_HEADER_BASE_CLASSES,S),children:[o,r.jsxs(a.Flex,{className:s.cn(`${e.PAGE_HEADER_ROOT_CLASS}__row`,e.PAGE_HEADER_ROW_CLASSES),children:[r.jsxs(a.Flex,{direction:"column",gap:1,className:`${e.PAGE_HEADER_ROOT_CLASS}__copy`,children:[r.jsx(E.Typography,{component:"h1",className:s.cn(`${e.PAGE_HEADER_ROOT_CLASS}__title`,e.PAGE_HEADER_TITLE_CLASSES),children:i}),_&&r.jsx(E.Typography,{component:"p",className:s.cn(`${e.PAGE_HEADER_ROOT_CLASS}__description`,e.PAGE_HEADER_DESCRIPTION_CLASSES),children:_})]}),c&&r.jsx("div",{className:s.cn(`${e.PAGE_HEADER_ROOT_CLASS}__actions`,e.PAGE_HEADER_ACTIONS_CLASSES),children:c})]})]})};exports.PageHeader=P;

package/dist/components/PageHeader/PageHeader.const.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e="Bear-PageHeader",E="bear-flex bear-flex-col bear-gap-3 bear-w-full",S="bear-flex bear-flex-col sm:bear-flex-row sm:bear-items-start sm:bear-justify-between bear-gap-3",A="bear-text-2xl bear-font-semibold bear-text-[var(--bear-text-primary)]",a="bear-text-sm bear-text-[var(--bear-text-secondary)] bear-max-w-2xl",r="bear-flex bear-flex-wrap bear-items-center bear-gap-2";exports.PAGE_HEADER_ACTIONS_CLASSES=r;exports.PAGE_HEADER_BASE_CLASSES=E;exports.PAGE_HEADER_DESCRIPTION_CLASSES=a;exports.PAGE_HEADER_ROOT_CLASS=e;exports.PAGE_HEADER_ROW_CLASSES=S;exports.PAGE_HEADER_TITLE_CLASSES=A;

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

@@ -0,0 +1,6 @@
+export declare const PAGE_HEADER_ROOT_CLASS = "Bear-PageHeader";
+export declare const PAGE_HEADER_BASE_CLASSES = "bear-flex bear-flex-col bear-gap-3 bear-w-full";
+export declare const PAGE_HEADER_ROW_CLASSES = "bear-flex bear-flex-col sm:bear-flex-row sm:bear-items-start sm:bear-justify-between bear-gap-3";
+export declare const PAGE_HEADER_TITLE_CLASSES = "bear-text-2xl bear-font-semibold bear-text-[var(--bear-text-primary)]";
+export declare const PAGE_HEADER_DESCRIPTION_CLASSES = "bear-text-sm bear-text-[var(--bear-text-secondary)] bear-max-w-2xl";
+export declare const PAGE_HEADER_ACTIONS_CLASSES = "bear-flex bear-flex-wrap bear-items-center bear-gap-2";

package/dist/components/PageHeader/PageHeader.const.js

@@ -0,0 +1,9 @@
+const e = "Bear-PageHeader", a = "bear-flex bear-flex-col bear-gap-3 bear-w-full", r = "bear-flex bear-flex-col sm:bear-flex-row sm:bear-items-start sm:bear-justify-between bear-gap-3", t = "bear-text-2xl bear-font-semibold bear-text-[var(--bear-text-primary)]", E = "bear-text-sm bear-text-[var(--bear-text-secondary)] bear-max-w-2xl", b = "bear-flex bear-flex-wrap bear-items-center bear-gap-2";
+export {
+  b as PAGE_HEADER_ACTIONS_CLASSES,
+  a as PAGE_HEADER_BASE_CLASSES,
+  E as PAGE_HEADER_DESCRIPTION_CLASSES,
+  e as PAGE_HEADER_ROOT_CLASS,
+  r as PAGE_HEADER_ROW_CLASSES,
+  t as PAGE_HEADER_TITLE_CLASSES
+};

package/dist/components/PageHeader/PageHeader.d.ts

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

package/dist/components/PageHeader/PageHeader.js

@@ -0,0 +1,57 @@
+import { jsxs as o, jsx as t } from "react/jsx-runtime";
+import { PAGE_HEADER_ROOT_CLASS as e, PAGE_HEADER_TITLE_CLASSES as p, PAGE_HEADER_DESCRIPTION_CLASSES as h, PAGE_HEADER_ACTIONS_CLASSES as I, PAGE_HEADER_ROW_CLASSES as N, PAGE_HEADER_BASE_CLASSES as P } from "./PageHeader.const.js";
+import { Typography as c } from "../Typography/Typography.js";
+import { Flex as i } from "../Flex/Flex.js";
+import { cn as r } from "../../utils/cn.js";
+import "react";
+import { resolveBearId as R } from "../../utils/generateBearId.utils.js";
+import { useBearId as C } from "../../utils/useBearId.js";
+const $ = (_) => {
+  const {
+    id: m,
+    testId: E,
+    title: d,
+    description: s,
+    breadcrumbs: n,
+    actions: a,
+    className: A
+  } = _, S = C("PageHeader"), l = R(m, S);
+  return /* @__PURE__ */ o(
+    "header",
+    {
+      id: l,
+      "data-testid": E,
+      className: r(e, P, A),
+      children: [
+        n,
+        /* @__PURE__ */ o(i, { className: r(`${e}__row`, N), children: [
+          /* @__PURE__ */ o(i, { direction: "column", gap: 1, className: `${e}__copy`, children: [
+            /* @__PURE__ */ t(
+              c,
+              {
+                component: "h1",
+                className: r(`${e}__title`, p),
+                children: d
+              }
+            ),
+            s && /* @__PURE__ */ t(
+              c,
+              {
+                component: "p",
+                className: r(
+                  `${e}__description`,
+                  h
+                ),
+                children: s
+              }
+            )
+          ] }),
+          a && /* @__PURE__ */ t("div", { className: r(`${e}__actions`, I), children: a })
+        ] })
+      ]
+    }
+  );
+};
+export {
+  $ as PageHeader
+};

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

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+export interface PageHeaderProps {
+    id?: string;
+    testId?: string;
+    title: ReactNode;
+    description?: ReactNode;
+    breadcrumbs?: ReactNode;
+    actions?: ReactNode;
+    className?: string;
+}

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

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

package/dist/components/Progress/Progress.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../../utils/cn.cjs");require("react");const m={sm:"bear-h-1.5",md:"bear-h-2.5",lg:"bear-h-4"},f={default:"bear-bg-bear-500",success:"bear-bg-green-500",warning:"bear-bg-amber-500",danger:"bear-bg-red-500",info:"bear-bg-blue-500"},x=({value:b,max:n=100,size:l="md",color:o="default",showLabel:i=!1,labelPosition:d="outside",striped:r=!1,animated:c=!1,indeterminate:a=!1,className:g,testId:u})=>{const s=Math.min(100,Math.max(0,b/n*100));return e.jsxs("div",{className:t.cn("bear-w-full",g),"data-testid":u,children:[i&&d==="outside"&&e.jsxs("div",{className:"bear-flex bear-justify-between bear-mb-1",children:[e.jsx("span",{className:"bear-text-sm bear-font-medium bear-text-gray-700 dark:bear-text-gray-200",children:"Progress"}),e.jsxs("span",{className:"bear-text-sm bear-font-medium bear-text-gray-700 dark:bear-text-gray-200",children:[Math.round(s),"%"]})]}),e.jsx("div",{className:t.cn("bear-w-full bear-bg-gray-200 dark:bear-bg-gray-700 bear-rounded-full bear-overflow-hidden",m[l]),children:e.jsx("div",{className:t.cn("bear-h-full bear-rounded-full bear-transition-all bear-duration-300 bear-ease-out","bear-flex bear-items-center bear-justify-center",f[o],r&&"bear-bg-stripes",c&&"bear-animate-stripes",a&&"bear-animate-indeterminate"),style:{width:a?"50%":`${s}%`,backgroundSize:r?"1rem 1rem":void 0,backgroundImage:r?"linear-gradient(45deg, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent)":void 0},role:"progressbar","aria-valuenow":a?void 0:b,"aria-valuemin":0,"aria-valuemax":n,children:i&&d==="inside"&&l==="lg"&&!a&&e.jsxs("span",{className:"bear-text-xs bear-font-medium bear-text-white",children:[Math.round(s),"%"]})})})]})};exports.Progress=x;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),e=require("./Progress.const.cjs"),s=require("../../utils/cn.cjs");require("react");const E=require("../../utils/generateBearId.utils.cjs"),P=require("../../utils/useBearId.cjs"),v=m=>{const{id:_,value:l,max:n=100,bufferValue:d,size:b="md",color:R="default",showLabel:o=!1,label:u=e.PROGRESS_DEFAULT_LABEL,labelPosition:S="outside",striped:i=!1,animated:g=!1,indeterminate:r=!1,className:x,testId:f}=m,O=P.useBearId("Progress"),h=E.resolveBearId(_,O),t=Math.min(100,Math.max(0,l/n*100)),c=d==null?null:Math.min(100,Math.max(t,Math.max(0,d/n*100)));return a.jsxs("div",{id:h,className:s.cn(e.PROGRESS_ROOT_CLASS,"bear-w-full",x),"data-testid":f,children:[o&&S==="outside"&&a.jsxs("div",{className:`${e.PROGRESS_ROOT_CLASS}__label-row bear-flex bear-justify-between bear-mb-1`,children:[a.jsx("span",{className:"bear-text-sm bear-font-medium bear-text-gray-700 dark:bear-text-gray-200",children:u}),a.jsxs("span",{className:"bear-text-sm bear-font-medium bear-text-gray-700 dark:bear-text-gray-200",children:[Math.round(t),"%"]})]}),a.jsxs("div",{className:s.cn(`${e.PROGRESS_ROOT_CLASS}__track`,e.PROGRESS_TRACK_CLASSES,e.PROGRESS_SIZE_CLASSES[b]),children:[c!=null&&!r&&a.jsx("div",{className:s.cn(`${e.PROGRESS_ROOT_CLASS}__buffer`,"bear-absolute bear-inset-y-0 bear-left-0 bear-rounded-full",e.PROGRESS_BUFFER_CLASSES),style:{width:`${c}%`}}),a.jsx("div",{className:s.cn(`${e.PROGRESS_ROOT_CLASS}__bar`,"bear-relative bear-h-full bear-rounded-full bear-transition-all bear-duration-300 bear-ease-out","bear-flex bear-items-center bear-justify-center",e.PROGRESS_COLOR_CLASSES[R],i&&"bear-bg-stripes",g&&"bear-animate-stripes",r&&"bear-animate-indeterminate"),style:{width:r?"50%":`${t}%`,backgroundSize:i?"1rem 1rem":void 0,backgroundImage:i?"linear-gradient(45deg, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent)":void 0},role:"progressbar","aria-valuenow":r?void 0:l,"aria-valuemin":0,"aria-valuemax":n,"aria-label":u,children:o&&S==="inside"&&b==="lg"&&!r&&a.jsxs("span",{className:"bear-text-xs bear-font-medium bear-text-white",children:[Math.round(t),"%"]})})]})]})};exports.Progress=v;

package/dist/components/Progress/Progress.const.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const S="Bear-Progress",e={sm:"bear-h-1.5",md:"bear-h-2.5",lg:"bear-h-4"},r={default:"bear-bg-bear-500",success:"bear-bg-green-500",warning:"bear-bg-amber-500",danger:"bear-bg-red-500",info:"bear-bg-blue-500"},b="bear-bg-bear-500/30 dark:bear-bg-bear-400/25",R="bear-w-full bear-bg-gray-200 dark:bear-bg-gray-700 bear-rounded-full bear-overflow-hidden bear-relative",a="Progress";exports.PROGRESS_BUFFER_CLASSES=b;exports.PROGRESS_COLOR_CLASSES=r;exports.PROGRESS_DEFAULT_LABEL=a;exports.PROGRESS_ROOT_CLASS=S;exports.PROGRESS_SIZE_CLASSES=e;exports.PROGRESS_TRACK_CLASSES=R;

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

@@ -1 +1,16 @@
-export declare const P_R_O_G_R_E_S_S_ROOT_CLASS = "Bear-Progress";
+export declare const PROGRESS_ROOT_CLASS = "Bear-Progress";
+export declare const PROGRESS_SIZE_CLASSES: {
+    readonly sm: "bear-h-1.5";
+    readonly md: "bear-h-2.5";
+    readonly lg: "bear-h-4";
+};
+export declare const PROGRESS_COLOR_CLASSES: {
+    readonly default: "bear-bg-bear-500";
+    readonly success: "bear-bg-green-500";
+    readonly warning: "bear-bg-amber-500";
+    readonly danger: "bear-bg-red-500";
+    readonly info: "bear-bg-blue-500";
+};
+export declare const PROGRESS_BUFFER_CLASSES = "bear-bg-bear-500/30 dark:bear-bg-bear-400/25";
+export declare const PROGRESS_TRACK_CLASSES = "bear-w-full bear-bg-gray-200 dark:bear-bg-gray-700 bear-rounded-full bear-overflow-hidden bear-relative";
+export declare const PROGRESS_DEFAULT_LABEL = "Progress";

package/dist/components/Progress/Progress.const.js

@@ -0,0 +1,19 @@
+const r = "Bear-Progress", e = {
+  sm: "bear-h-1.5",
+  md: "bear-h-2.5",
+  lg: "bear-h-4"
+}, b = {
+  default: "bear-bg-bear-500",
+  success: "bear-bg-green-500",
+  warning: "bear-bg-amber-500",
+  danger: "bear-bg-red-500",
+  info: "bear-bg-blue-500"
+}, a = "bear-bg-bear-500/30 dark:bear-bg-bear-400/25", S = "bear-w-full bear-bg-gray-200 dark:bear-bg-gray-700 bear-rounded-full bear-overflow-hidden bear-relative", g = "Progress";
+export {
+  a as PROGRESS_BUFFER_CLASSES,
+  b as PROGRESS_COLOR_CLASSES,
+  g as PROGRESS_DEFAULT_LABEL,
+  r as PROGRESS_ROOT_CLASS,
+  e as PROGRESS_SIZE_CLASSES,
+  S as PROGRESS_TRACK_CLASSES
+};

package/dist/components/Progress/Progress.d.ts

@@ -1,13 +1,3 @@
 import { FC } from 'react';
 import { ProgressProps } from './Progress.types';
-/**
- * Progress - Progress bar with multiple variants
- *
- * @example
- * ```tsx
- * <Progress value={75} showLabel />
- * <Progress value={50} color="success" striped animated />
- * <Progress indeterminate />
- * ```
- */
 export declare const Progress: FC<ProgressProps>;

package/dist/components/Progress/Progress.js

@@ -1,75 +1,85 @@
-import { jsxs as a, jsx as t } from "react/jsx-runtime";
-import { cn as b } from "../../utils/cn.js";
+import { jsxs as a, jsx as n } from "react/jsx-runtime";
+import { PROGRESS_DEFAULT_LABEL as E, PROGRESS_ROOT_CLASS as r, PROGRESS_BUFFER_CLASSES as L, PROGRESS_COLOR_CLASSES as O, PROGRESS_SIZE_CLASSES as P, PROGRESS_TRACK_CLASSES as y } from "./Progress.const.js";
+import { cn as s } from "../../utils/cn.js";
 import "react";
-const f = {
-  sm: "bear-h-1.5",
-  md: "bear-h-2.5",
-  lg: "bear-h-4"
-}, h = {
-  default: "bear-bg-bear-500",
-  success: "bear-bg-green-500",
-  warning: "bear-bg-amber-500",
-  danger: "bear-bg-red-500",
-  info: "bear-bg-blue-500"
-}, y = ({
-  value: n,
-  max: l = 100,
-  size: d = "md",
-  color: m = "default",
-  showLabel: i = !1,
-  labelPosition: o = "outside",
-  striped: r = !1,
-  animated: g = !1,
-  indeterminate: e = !1,
-  className: c,
-  testId: u
-}) => {
-  const s = Math.min(100, Math.max(0, n / l * 100));
-  return /* @__PURE__ */ a("div", { className: b("bear-w-full", c), "data-testid": u, children: [
-    i && o === "outside" && /* @__PURE__ */ a("div", { className: "bear-flex bear-justify-between bear-mb-1", children: [
-      /* @__PURE__ */ t("span", { className: "bear-text-sm bear-font-medium bear-text-gray-700 dark:bear-text-gray-200", children: "Progress" }),
-      /* @__PURE__ */ a("span", { className: "bear-text-sm bear-font-medium bear-text-gray-700 dark:bear-text-gray-200", children: [
-        Math.round(s),
-        "%"
-      ] })
-    ] }),
-    /* @__PURE__ */ t(
-      "div",
-      {
-        className: b(
-          "bear-w-full bear-bg-gray-200 dark:bear-bg-gray-700 bear-rounded-full bear-overflow-hidden",
-          f[d]
-        ),
-        children: /* @__PURE__ */ t(
-          "div",
-          {
-            className: b(
-              "bear-h-full bear-rounded-full bear-transition-all bear-duration-300 bear-ease-out",
-              "bear-flex bear-items-center bear-justify-center",
-              h[m],
-              r && "bear-bg-stripes",
-              g && "bear-animate-stripes",
-              e && "bear-animate-indeterminate"
-            ),
-            style: {
-              width: e ? "50%" : `${s}%`,
-              backgroundSize: r ? "1rem 1rem" : void 0,
-              backgroundImage: r ? "linear-gradient(45deg, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent)" : void 0
-            },
-            role: "progressbar",
-            "aria-valuenow": e ? void 0 : n,
-            "aria-valuemin": 0,
-            "aria-valuemax": l,
-            children: i && o === "inside" && d === "lg" && !e && /* @__PURE__ */ a("span", { className: "bear-text-xs bear-font-medium bear-text-white", children: [
-              Math.round(s),
-              "%"
-            ] })
-          }
-        )
-      }
-    )
-  ] });
+import { resolveBearId as N } from "../../utils/generateBearId.utils.js";
+import { useBearId as w } from "../../utils/useBearId.js";
+const k = (S) => {
+  const {
+    id: g,
+    value: d,
+    max: i = 100,
+    bufferValue: b,
+    size: o = "md",
+    color: _ = "default",
+    showLabel: m = !1,
+    label: u = E,
+    labelPosition: c = "outside",
+    striped: l = !1,
+    animated: h = !1,
+    indeterminate: e = !1,
+    className: p,
+    testId: x
+  } = S, R = w("Progress"), v = N(g, R), t = Math.min(100, Math.max(0, d / i * 100)), f = b == null ? null : Math.min(100, Math.max(t, Math.max(0, b / i * 100)));
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      id: v,
+      className: s(r, "bear-w-full", p),
+      "data-testid": x,
+      children: [
+        m && c === "outside" && /* @__PURE__ */ a("div", { className: `${r}__label-row bear-flex bear-justify-between bear-mb-1`, children: [
+          /* @__PURE__ */ n("span", { className: "bear-text-sm bear-font-medium bear-text-gray-700 dark:bear-text-gray-200", children: u }),
+          /* @__PURE__ */ a("span", { className: "bear-text-sm bear-font-medium bear-text-gray-700 dark:bear-text-gray-200", children: [
+            Math.round(t),
+            "%"
+          ] })
+        ] }),
+        /* @__PURE__ */ a("div", { className: s(`${r}__track`, y, P[o]), children: [
+          f != null && !e && /* @__PURE__ */ n(
+            "div",
+            {
+              className: s(
+                `${r}__buffer`,
+                "bear-absolute bear-inset-y-0 bear-left-0 bear-rounded-full",
+                L
+              ),
+              style: { width: `${f}%` }
+            }
+          ),
+          /* @__PURE__ */ n(
+            "div",
+            {
+              className: s(
+                `${r}__bar`,
+                "bear-relative bear-h-full bear-rounded-full bear-transition-all bear-duration-300 bear-ease-out",
+                "bear-flex bear-items-center bear-justify-center",
+                O[_],
+                l && "bear-bg-stripes",
+                h && "bear-animate-stripes",
+                e && "bear-animate-indeterminate"
+              ),
+              style: {
+                width: e ? "50%" : `${t}%`,
+                backgroundSize: l ? "1rem 1rem" : void 0,
+                backgroundImage: l ? "linear-gradient(45deg, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent)" : void 0
+              },
+              role: "progressbar",
+              "aria-valuenow": e ? void 0 : d,
+              "aria-valuemin": 0,
+              "aria-valuemax": i,
+              "aria-label": u,
+              children: m && c === "inside" && o === "lg" && !e && /* @__PURE__ */ a("span", { className: "bear-text-xs bear-font-medium bear-text-white", children: [
+                Math.round(t),
+                "%"
+              ] })
+            }
+          )
+        ] })
+      ]
+    }
+  );
 };
 export {
-  y as Progress
+  k as Progress
 };

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

@@ -1,25 +1,16 @@
 export interface ProgressProps {
     id?: string;
-    /** Progress value (0-100) */
     value: number;
-    /** Maximum value */
     max?: number;
-    /** Size variant */
+    bufferValue?: number;
     size?: 'sm' | 'md' | 'lg';
-    /** Color variant */
     color?: 'default' | 'success' | 'warning' | 'danger' | 'info';
-    /** Show percentage label */
     showLabel?: boolean;
-    /** Label position */
+    label?: string;
     labelPosition?: 'inside' | 'outside';
-    /** Striped animation */
     striped?: boolean;
-    /** Animated stripes */
     animated?: boolean;
-    /** Indeterminate loading state */
     indeterminate?: boolean;
-    /** Custom class name */
     className?: string;
-    /** Test ID */
     testId?: string;
 }

package/dist/components/PropsPlayground/PropsPlayground.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),c=require("react"),n=require("../../utils/cn.cjs"),j=require("../Icon/Icon.cjs"),l=require("./PropsPlayground.const.cjs"),$=require("./PropsPlayground.utils.cjs"),q=({size:b})=>e.jsx(j.Icon,{size:b,children:e.jsx("polyline",{points:"6 9 12 15 18 9"})}),I=({size:b})=>e.jsx(j.Icon,{size:b,children:e.jsx("polyline",{points:"9 18 15 12 9 6"})}),O=({size:b})=>e.jsxs(j.Icon,{size:b,children:[e.jsx("line",{x1:"4",y1:"21",x2:"4",y2:"14"}),e.jsx("line",{x1:"4",y1:"10",x2:"4",y2:"3"}),e.jsx("line",{x1:"12",y1:"21",x2:"12",y2:"12"}),e.jsx("line",{x1:"12",y1:"8",x2:"12",y2:"3"}),e.jsx("line",{x1:"20",y1:"21",x2:"20",y2:"16"}),e.jsx("line",{x1:"20",y1:"12",x2:"20",y2:"3"}),e.jsx("line",{x1:"1",y1:"14",x2:"7",y2:"14"}),e.jsx("line",{x1:"9",y1:"8",x2:"15",y2:"8"}),e.jsx("line",{x1:"17",y1:"16",x2:"23",y2:"16"})]}),R=({config:b,render:v,title:z="Props",size:S="md",defaultCollapsed:C=!1,showReset:w=!0,columns:P=3,className:L,testId:E})=>{const u=c.useMemo(()=>$.getDefaults(b),[b]),[g,f]=c.useState(u),[m,A]=c.useState(C),o=c.useCallback((r,s)=>{f(i=>({...i,[r]:s}))},[]),_=c.useCallback(()=>{f(u)},[u]),t=l.SIZE_CLASSES[S],N=Object.keys(b).length,p=n.cn("bear-w-full bear-rounded-md bear-border bear-border-zinc-700","bear-bg-zinc-800 bear-text-zinc-100","placeholder:bear-text-zinc-500","focus:bear-outline-none focus:bear-ring-2 focus:bear-ring-primary-500/30 focus:bear-border-primary-500","bear-transition-colors",t.input);return e.jsxs("div",{"data-testid":E,className:n.cn(l.ROOT_CLASS,"bear-rounded-lg bear-border bear-border-zinc-700 bear-overflow-hidden",L),children:[e.jsxs("button",{type:"button",onClick:()=>A(r=>!r),className:n.cn("bear-w-full bear-flex bear-items-center bear-gap-2 bear-text-left bear-font-medium bear-transition-colors","bear-bg-zinc-800/60 hover:bear-bg-zinc-800","bear-text-zinc-200 bear-border-b bear-border-zinc-700","bear-px-4 bear-py-3",t.text),children:[e.jsx("span",{className:"bear-text-primary-500",children:m?e.jsx(I,{size:12}):e.jsx(q,{size:12})}),e.jsx("span",{className:"bear-text-primary-500",children:e.jsx(O,{size:14})}),e.jsx("span",{className:"bear-font-semibold",children:z}),e.jsxs("span",{className:"bear-ml-auto bear-flex bear-items-center bear-gap-2",children:[e.jsxs("span",{className:"bear-text-[10px] bear-font-medium bear-text-zinc-500",children:[N," ",N===1?"control":"controls"]}),w&&!m&&e.jsx("button",{type:"button",onClick:r=>{r.stopPropagation(),_()},className:"bear-text-[10px] bear-font-semibold bear-text-primary-500 hover:bear-text-primary-400 hover:bear-underline",children:"Reset"})]})]}),!m&&e.jsx("div",{className:n.cn("bear-bg-zinc-900/50",t.padding),children:e.jsx("div",{className:n.cn("bear-grid",t.gap,l.COLUMN_CLASSES[P]),children:Object.entries(b).map(([r,s])=>{const i=g[r],d=r.replace(/([A-Z])/g," $1").replace(/^./,a=>a.toUpperCase()).trim();if(s.type==="boolean"){const a=i===!0;return e.jsxs("div",{className:"bear-rounded-lg bear-border bear-border-zinc-700/60 bear-bg-zinc-800/30 bear-p-3",children:[e.jsx("span",{className:n.cn("bear-block bear-font-semibold bear-uppercase bear-tracking-wider bear-text-primary-500 bear-mb-2",t.label),children:l.TYPE_LABELS.boolean}),e.jsxs("label",{className:"bear-flex bear-items-center bear-gap-2.5 bear-cursor-pointer",children:[e.jsx("button",{type:"button",role:"switch","aria-checked":a,onClick:()=>o(r,!a),className:n.cn("bear-relative bear-inline-flex bear-h-5 bear-w-9 bear-flex-shrink-0 bear-rounded-full bear-border-2 bear-border-transparent bear-transition-colors",a?"bear-bg-primary-500":"bear-bg-zinc-600"),children:e.jsx("span",{className:n.cn("bear-pointer-events-none bear-inline-block bear-h-4 bear-w-4 bear-transform bear-rounded-full bear-bg-white bear-shadow bear-transition",a?"bear-translate-x-4":"bear-translate-x-0")})}),e.jsx("span",{className:n.cn("bear-font-medium bear-text-zinc-200 bear-truncate",t.text),children:d})]})]},r)}if(s.type==="select"&&s.options)return e.jsxs("div",{className:"bear-rounded-lg bear-border bear-border-zinc-700/60 bear-bg-zinc-800/30 bear-p-3",children:[e.jsxs("div",{className:"bear-flex bear-items-center bear-justify-between bear-mb-1.5",children:[e.jsx("label",{htmlFor:`pp-${r}`,className:n.cn("bear-font-medium bear-text-zinc-300 bear-truncate",t.label),children:d}),e.jsx("span",{className:n.cn("bear-font-semibold bear-uppercase bear-tracking-wider bear-text-primary-500",t.label),children:l.TYPE_LABELS.select})]}),e.jsx("select",{id:`pp-${r}`,value:String(i),onChange:a=>{const x=s.options.find(h=>String(h.value)===a.target.value);o(r,x?x.value:a.target.value)},className:n.cn(p,"bear-cursor-pointer bear-appearance-none"),children:s.options.map(a=>e.jsx("option",{value:String(a.value),children:a.label},String(a.value)))})]},r);if(s.type==="number"){const a=Number(i),x=Number.isNaN(a)?s.default:a;return e.jsxs("div",{className:"bear-rounded-lg bear-border bear-border-zinc-700/60 bear-bg-zinc-800/30 bear-p-3",children:[e.jsxs("div",{className:"bear-flex bear-items-center bear-justify-between bear-mb-1.5",children:[e.jsx("label",{htmlFor:`pp-${r}`,className:n.cn("bear-font-medium bear-text-zinc-300 bear-truncate",t.label),children:d}),e.jsx("span",{className:n.cn("bear-font-semibold bear-uppercase bear-tracking-wider bear-text-primary-500",t.label),children:l.TYPE_LABELS.number})]}),e.jsx("input",{id:`pp-${r}`,type:"number",value:x,min:s.min,max:s.max,step:s.step,onChange:h=>{const y=h.target.valueAsNumber;o(r,Number.isNaN(y)?s.default:y)},className:p})]},r)}return e.jsxs("div",{className:"bear-rounded-lg bear-border bear-border-zinc-700/60 bear-bg-zinc-800/30 bear-p-3",children:[e.jsxs("div",{className:"bear-flex bear-items-center bear-justify-between bear-mb-1.5",children:[e.jsx("label",{htmlFor:`pp-${r}`,className:n.cn("bear-font-medium bear-text-zinc-300 bear-truncate",t.label),children:d}),e.jsx("span",{className:n.cn("bear-font-semibold bear-uppercase bear-tracking-wider bear-text-primary-500",t.label),children:l.TYPE_LABELS.string})]}),e.jsx("input",{id:`pp-${r}`,type:"text",value:String(i??""),onChange:a=>o(r,a.target.value),placeholder:s.placeholder,className:p})]},r)})})}),e.jsx("div",{className:"bear-border-t bear-border-zinc-700 bear-p-6 bear-bg-zinc-900 bear-flex bear-items-center bear-justify-center bear-min-h-[180px]",children:e.jsx("div",{className:"bear-w-full",children:v(g)})})]})};exports.PropsPlayground=R;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),c=require("react"),n=require("../../utils/cn.cjs"),j=require("../Icon/Icon.cjs"),l=require("./PropsPlayground.const.cjs"),$=require("./PropsPlayground.utils.cjs"),q=({size:b})=>e.jsx(j.Icon,{size:b,children:e.jsx("polyline",{points:"6 9 12 15 18 9"})}),I=({size:b})=>e.jsx(j.Icon,{size:b,children:e.jsx("polyline",{points:"9 18 15 12 9 6"})}),O=({size:b})=>e.jsxs(j.Icon,{size:b,children:[e.jsx("line",{x1:"4",y1:"21",x2:"4",y2:"14"}),e.jsx("line",{x1:"4",y1:"10",x2:"4",y2:"3"}),e.jsx("line",{x1:"12",y1:"21",x2:"12",y2:"12"}),e.jsx("line",{x1:"12",y1:"8",x2:"12",y2:"3"}),e.jsx("line",{x1:"20",y1:"21",x2:"20",y2:"16"}),e.jsx("line",{x1:"20",y1:"12",x2:"20",y2:"3"}),e.jsx("line",{x1:"1",y1:"14",x2:"7",y2:"14"}),e.jsx("line",{x1:"9",y1:"8",x2:"15",y2:"8"}),e.jsx("line",{x1:"17",y1:"16",x2:"23",y2:"16"})]}),R=({config:b,render:v,title:z="Props",size:S="md",defaultCollapsed:C=!1,showReset:w=!0,columns:P=3,className:L,testId:E})=>{const u=c.useMemo(()=>$.getDefaults(b),[b]),[g,f]=c.useState(u),[m,A]=c.useState(C),o=c.useCallback((r,s)=>{f(i=>({...i,[r]:s}))},[]),_=c.useCallback(()=>{f(u)},[u]),t=l.SIZE_CLASSES[S],N=Object.keys(b).length,p=n.cn("bear-w-full bear-rounded-md bear-border bear-border-zinc-700","bear-bg-zinc-800 bear-text-zinc-100","placeholder:bear-text-zinc-500","focus:bear-outline-none focus:bear-ring-2 focus:bear-ring-primary-500/30 focus:bear-border-primary-500","bear-transition-colors",t.input);return e.jsxs("div",{"data-testid":E,className:n.cn(l.ROOT_CLASS,"bear-rounded-lg bear-border bear-border-zinc-700 bear-overflow-hidden",L),children:[e.jsxs("button",{type:"button",onClick:()=>A(r=>!r),className:n.cn("bear-w-full bear-flex bear-items-center bear-gap-2 bear-text-left bear-font-medium bear-transition-colors","bear-bg-zinc-800/60 hover:bear-bg-zinc-800","bear-text-zinc-200 bear-border-b bear-border-zinc-700","bear-px-4 bear-py-3",t.text),children:[e.jsx("span",{className:"bear-text-primary-500",children:m?e.jsx(I,{size:12}):e.jsx(q,{size:12})}),e.jsx("span",{className:"bear-text-primary-500",children:e.jsx(O,{size:14})}),e.jsx("span",{className:"bear-font-semibold",children:z}),e.jsxs("span",{className:"bear-ml-auto bear-flex bear-items-center bear-gap-2",children:[e.jsxs("span",{className:"bear-text-[10px] bear-font-medium bear-text-zinc-500",children:[N," ",N===1?"control":"controls"]}),w&&!m&&e.jsx("button",{type:"button",onClick:r=>{r.stopPropagation(),_()},className:"bear-text-[10px] bear-font-semibold bear-text-primary-500 hover:bear-text-primary-400 hover:bear-underline",children:"Reset"})]})]}),!m&&e.jsx("div",{className:n.cn("bear-bg-gray-50 dark:bear-bg-zinc-900/50",t.padding),children:e.jsx("div",{className:n.cn("bear-grid",t.gap,l.COLUMN_CLASSES[P]),children:Object.entries(b).map(([r,s])=>{const i=g[r],d=r.replace(/([A-Z])/g," $1").replace(/^./,a=>a.toUpperCase()).trim();if(s.type==="boolean"){const a=i===!0;return e.jsxs("div",{className:"bear-rounded-lg bear-border bear-border-zinc-700/60 bear-bg-zinc-800/30 bear-p-3",children:[e.jsx("span",{className:n.cn("bear-block bear-font-semibold bear-uppercase bear-tracking-wider bear-text-primary-500 bear-mb-2",t.label),children:l.TYPE_LABELS.boolean}),e.jsxs("label",{className:"bear-flex bear-items-center bear-gap-2.5 bear-cursor-pointer",children:[e.jsx("button",{type:"button",role:"switch","aria-checked":a,onClick:()=>o(r,!a),className:n.cn("bear-relative bear-inline-flex bear-h-5 bear-w-9 bear-flex-shrink-0 bear-rounded-full bear-border-2 bear-border-transparent bear-transition-colors",a?"bear-bg-primary-500":"bear-bg-zinc-600"),children:e.jsx("span",{className:n.cn("bear-pointer-events-none bear-inline-block bear-h-4 bear-w-4 bear-transform bear-rounded-full bear-bg-white bear-shadow bear-transition",a?"bear-translate-x-4":"bear-translate-x-0")})}),e.jsx("span",{className:n.cn("bear-font-medium bear-text-zinc-200 bear-truncate",t.text),children:d})]})]},r)}if(s.type==="select"&&s.options)return e.jsxs("div",{className:"bear-rounded-lg bear-border bear-border-zinc-700/60 bear-bg-zinc-800/30 bear-p-3",children:[e.jsxs("div",{className:"bear-flex bear-items-center bear-justify-between bear-mb-1.5",children:[e.jsx("label",{htmlFor:`pp-${r}`,className:n.cn("bear-font-medium bear-text-zinc-300 bear-truncate",t.label),children:d}),e.jsx("span",{className:n.cn("bear-font-semibold bear-uppercase bear-tracking-wider bear-text-primary-500",t.label),children:l.TYPE_LABELS.select})]}),e.jsx("select",{id:`pp-${r}`,value:String(i),onChange:a=>{const x=s.options.find(h=>String(h.value)===a.target.value);o(r,x?x.value:a.target.value)},className:n.cn(p,"bear-cursor-pointer bear-appearance-none"),children:s.options.map(a=>e.jsx("option",{value:String(a.value),children:a.label},String(a.value)))})]},r);if(s.type==="number"){const a=Number(i),x=Number.isNaN(a)?s.default:a;return e.jsxs("div",{className:"bear-rounded-lg bear-border bear-border-zinc-700/60 bear-bg-zinc-800/30 bear-p-3",children:[e.jsxs("div",{className:"bear-flex bear-items-center bear-justify-between bear-mb-1.5",children:[e.jsx("label",{htmlFor:`pp-${r}`,className:n.cn("bear-font-medium bear-text-zinc-300 bear-truncate",t.label),children:d}),e.jsx("span",{className:n.cn("bear-font-semibold bear-uppercase bear-tracking-wider bear-text-primary-500",t.label),children:l.TYPE_LABELS.number})]}),e.jsx("input",{id:`pp-${r}`,type:"number",value:x,min:s.min,max:s.max,step:s.step,onChange:h=>{const y=h.target.valueAsNumber;o(r,Number.isNaN(y)?s.default:y)},className:p})]},r)}return e.jsxs("div",{className:"bear-rounded-lg bear-border bear-border-zinc-700/60 bear-bg-zinc-800/30 bear-p-3",children:[e.jsxs("div",{className:"bear-flex bear-items-center bear-justify-between bear-mb-1.5",children:[e.jsx("label",{htmlFor:`pp-${r}`,className:n.cn("bear-font-medium bear-text-zinc-300 bear-truncate",t.label),children:d}),e.jsx("span",{className:n.cn("bear-font-semibold bear-uppercase bear-tracking-wider bear-text-primary-500",t.label),children:l.TYPE_LABELS.string})]}),e.jsx("input",{id:`pp-${r}`,type:"text",value:String(i??""),onChange:a=>o(r,a.target.value),placeholder:s.placeholder,className:p})]},r)})})}),e.jsx("div",{className:"bear-border-t bear-border-gray-200 dark:bear-border-zinc-700 bear-p-6 bear-bg-white dark:bear-bg-zinc-900 bear-flex bear-items-center bear-justify-center bear-min-h-[180px]",children:e.jsx("div",{className:"bear-w-full",children:v(g)})})]})};exports.PropsPlayground=R;