@forgedevstack/bear 1.3.2 → 1.3.3

package/README.md

@@ -2,6 +2,10 @@
 
 Strong, reliable React UI components. AeroCraft-powered, zero config required. The protective force of ForgeStack.
 
+[![Support ForgeStack on Ko-fi](https://ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/forgestack)
+
+Sponsor Bear on [Ko-fi](https://ko-fi.com/forgestack).
+
 ## Portal
 
 Visit the [Bear UI Portal](https://bearui.com/) to explore all components, view live examples, and browse the documentation.

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/Chart/BarChart.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),s=require("../../constants/numbers.const.cjs"),l=require("../../utils/cn.cjs");require("react");const c=require("./Chart.const.cjs"),m=require("./Chart.utils.cjs"),B=w=>{const{data:o,height:R=c.CHART.DEFAULT_HEIGHT,showLabels:x=!0,showValues:C=!1,animated:$=!0,color:j,orientation:v="vertical",barRadius:t=c.CHART.DEFAULT_BAR_RADIUS,barGap:y=c.CHART.DEFAULT_BAR_GAP,stacked:b=!1,className:A,...E}=w,u=o.map(a=>m.getStackTotal(a.stacks,a.value)),N=Math.max(...u,s.ONE),e=v==="vertical";return r.jsx("div",{className:l.cn("Bear-Chart Bear-Chart--bar bear-w-full",A),style:{height:R},...E,children:r.jsx("div",{className:l.cn("bear-h-full",e?"bear-flex bear-items-end bear-justify-between":"bear-flex bear-flex-col bear-justify-between"),style:{gap:`${y}rem`},children:o.map((a,h)=>{const d=b&&a.stacks&&a.stacks.length>s.ZERO?a.stacks:[a.value],n=u[h],f=n/N*c.CHART.VIEWBOX;return r.jsxs("div",{className:l.cn(e?"bear-flex-1 bear-flex bear-flex-col bear-items-center bear-gap-1":"bear-flex-1 bear-flex bear-items-center bear-gap-2"),children:[x&&!e&&r.jsx("span",{className:"bear-w-16 bear-truncate bear-text-xs bear-text-gray-600 dark:bear-text-slate-300",children:a.label}),r.jsx("div",{className:l.cn(e?"bear-w-full bear-flex-1 bear-flex bear-items-end":"bear-flex-1 bear-h-full bear-flex bear-items-center"),children:r.jsx("div",{className:l.cn("bear-flex",e?"bear-w-full bear-flex-col-reverse":"bear-h-3/4 bear-flex-row",$&&(e?"animate-grow-up":"animate-grow-right")),style:e?{height:`${f}%`}:{width:`${f}%`},children:d.map((T,i)=>{const k=n>s.ZERO?T/n*c.CHART.VIEWBOX:s.ZERO,O=i===s.ZERO,p=i===d.length-s.ONE,g=b?e?p?`${t}px ${t}px 0 0`:"0":p?`0 ${t}px ${t}px 0`:"0":e?`${t}px ${t}px 0 0`:`0 ${t}px ${t}px 0`;return r.jsx("div",{className:"bear-transition-all bear-duration-500 bear-ease-out",style:{[e?"height":"width"]:`${k}%`,[e?"width":"height"]:"100%",backgroundColor:m.getChartColor(b?i:h,a.color||j),borderRadius:g,opacity:.9}},`${a.label}-${i}`)})})}),C&&r.jsx("span",{className:"bear-text-xs bear-text-gray-500 dark:bear-text-slate-400",children:n}),x&&e&&r.jsx("span",{className:"bear-max-w-full bear-truncate bear-text-xs bear-text-gray-600 dark:bear-text-slate-300",children:a.label})]},a.label)})})})};exports.BarChart=B;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../../constants/numbers.const.cjs"),p=require("../../utils/cn.cjs");require("react");const V=require("../../utils/generateBearId.utils.cjs"),w=require("../../utils/useBearId.cjs"),c=require("./Chart.const.cjs"),x=require("./Chart.utils.cjs"),z=g=>{const{data:i,height:m=c.CHART.DEFAULT_HEIGHT,showLabels:h=!0,showValues:v=!1,animated:R=!0,color:$,orientation:b="vertical",barRadius:r=c.CHART.DEFAULT_BAR_RADIUS,barGap:A=c.CHART.DEFAULT_BAR_GAP,stacked:l=!1,className:E,id:N,testId:j,...T}=g,O=w.useBearId("BarChart"),k=V.resolveBearId(N,O),d=i.map(a=>x.getStackTotal(a.stacks,a.value)),q=Math.max(...d,s.ONE),t=b==="vertical",y={"--Bear-Chart-height":`${m}px`,"--Bear-Chart-gap":`${A}rem`};return e.jsx("div",{id:k,"data-testid":j,className:p.cn("Bear-Chart Bear-Chart--bar",t?"Bear-Chart--vertical":"Bear-Chart--horizontal",E),style:y,...T,children:e.jsx("div",{className:"Bear-Chart__track",children:i.map((a,u)=>{const C=l&&a.stacks&&a.stacks.length>s.ZERO?a.stacks:[a.value],o=d[u],I={"--Bear-Chart-size":`${o/q*c.CHART.VIEWBOX}%`};return e.jsxs("div",{className:"Bear-Chart__col",children:[h&&!t&&e.jsx("span",{className:"Bear-Chart__label",children:a.label}),e.jsx("div",{className:"Bear-Chart__plot",children:e.jsx("div",{className:p.cn("Bear-Chart__stack",R&&(t?"animate-grow-up":"animate-grow-right")),style:I,children:C.map((H,n)=>{const S=o>s.ZERO?H/o*c.CHART.VIEWBOX:s.ZERO,L=n===s.ZERO,B=n===C.length-s.ONE,_=l?t?B?`${r}px ${r}px 0 0`:"0":B?`0 ${r}px ${r}px 0`:"0":t?`${r}px ${r}px 0 0`:`0 ${r}px ${r}px 0`,P={"--Bear-Chart-segment":`${S}%`,"--Bear-Chart-color":x.getChartColor(l?n:u,a.color||$),"--Bear-Chart-radius":_};return e.jsx("div",{className:"Bear-Chart__segment",style:P},`${a.label}-${n}`)})})}),v&&e.jsx("span",{className:"Bear-Chart__value",children:o}),h&&t&&e.jsx("span",{className:"Bear-Chart__label",children:a.label})]},a.label)})})})};exports.BarChart=z;

package/dist/components/Chart/BarChart.js

@@ -1,85 +1,78 @@
-import { jsx as t, jsxs as V } from "react/jsx-runtime";
-import { ONE as g, ZERO as i } from "../../constants/numbers.const.js";
-import { cn as l } from "../../utils/cn.js";
+import { jsx as t, jsxs as F } from "react/jsx-runtime";
+import { ONE as _, ZERO as h } from "../../constants/numbers.const.js";
+import { cn as u } from "../../utils/cn.js";
 import "react";
+import { resolveBearId as O } from "../../utils/generateBearId.utils.js";
+import { useBearId as P } from "../../utils/useBearId.js";
 import { CHART as s } from "./Chart.const.js";
-import { getStackTotal as _, getChartColor as j } from "./Chart.utils.js";
-const P = (w) => {
+import { getStackTotal as U, getChartColor as G } from "./Chart.utils.js";
+const Q = ($) => {
   const {
     data: n,
-    height: $ = s.DEFAULT_HEIGHT,
-    showLabels: x = !0,
+    height: g = s.DEFAULT_HEIGHT,
+    showLabels: i = !0,
     showValues: v = !1,
     animated: N = !0,
-    color: k,
-    orientation: y = "vertical",
+    color: b,
+    orientation: x = "vertical",
     barRadius: r = s.DEFAULT_BAR_RADIUS,
-    barGap: A = s.DEFAULT_BAR_GAP,
-    stacked: b = !1,
-    className: E,
-    ...B
-  } = w, h = n.map((a) => _(a.stacks, a.value)), C = Math.max(...h, g), e = y === "vertical";
-  return /* @__PURE__ */ t("div", { className: l("Bear-Chart Bear-Chart--bar bear-w-full", E), style: { height: $ }, ...B, children: /* @__PURE__ */ t(
+    barGap: f = s.DEFAULT_BAR_GAP,
+    stacked: l = !1,
+    className: k,
+    id: A,
+    testId: E,
+    ...y
+  } = $, I = P("BarChart"), R = O(A, I), m = n.map((a) => U(a.stacks, a.value)), T = Math.max(...m, _), e = x === "vertical", L = {
+    "--Bear-Chart-height": `${g}px`,
+    "--Bear-Chart-gap": `${f}rem`
+  };
+  return /* @__PURE__ */ t(
     "div",
     {
-      className: l("bear-h-full", e ? "bear-flex bear-items-end bear-justify-between" : "bear-flex bear-flex-col bear-justify-between"),
-      style: { gap: `${A}rem` },
-      children: n.map((a, f) => {
-        const d = b && a.stacks && a.stacks.length > i ? a.stacks : [a.value], c = h[f], p = c / C * s.VIEWBOX;
-        return /* @__PURE__ */ V(
-          "div",
-          {
-            className: l(
-              e ? "bear-flex-1 bear-flex bear-flex-col bear-items-center bear-gap-1" : "bear-flex-1 bear-flex bear-items-center bear-gap-2"
-            ),
-            children: [
-              x && !e && /* @__PURE__ */ t("span", { className: "bear-w-16 bear-truncate bear-text-xs bear-text-gray-600 dark:bear-text-slate-300", children: a.label }),
-              /* @__PURE__ */ t(
-                "div",
-                {
-                  className: l(
-                    e ? "bear-w-full bear-flex-1 bear-flex bear-items-end" : "bear-flex-1 bear-h-full bear-flex bear-items-center"
-                  ),
-                  children: /* @__PURE__ */ t(
-                    "div",
-                    {
-                      className: l(
-                        "bear-flex",
-                        e ? "bear-w-full bear-flex-col-reverse" : "bear-h-3/4 bear-flex-row",
-                        N && (e ? "animate-grow-up" : "animate-grow-right")
-                      ),
-                      style: e ? { height: `${p}%` } : { width: `${p}%` },
-                      children: d.map((R, o) => {
-                        const T = c > i ? R / c * s.VIEWBOX : i, L = o === i, m = o === d.length - g, u = b ? e ? m ? `${r}px ${r}px 0 0` : "0" : m ? `0 ${r}px ${r}px 0` : "0" : e ? `${r}px ${r}px 0 0` : `0 ${r}px ${r}px 0`;
-                        return /* @__PURE__ */ t(
-                          "div",
-                          {
-                            className: "bear-transition-all bear-duration-500 bear-ease-out",
-                            style: {
-                              [e ? "height" : "width"]: `${T}%`,
-                              [e ? "width" : "height"]: "100%",
-                              backgroundColor: j(b ? o : f, a.color || k),
-                              borderRadius: u,
-                              opacity: 0.9
-                            }
-                          },
-                          `${a.label}-${o}`
-                        );
-                      })
-                    }
-                  )
-                }
-              ),
-              v && /* @__PURE__ */ t("span", { className: "bear-text-xs bear-text-gray-500 dark:bear-text-slate-400", children: c }),
-              x && e && /* @__PURE__ */ t("span", { className: "bear-max-w-full bear-truncate bear-text-xs bear-text-gray-600 dark:bear-text-slate-300", children: a.label })
-            ]
-          },
-          a.label
-        );
-      })
+      id: R,
+      "data-testid": E,
+      className: u(
+        "Bear-Chart Bear-Chart--bar",
+        e ? "Bear-Chart--vertical" : "Bear-Chart--horizontal",
+        k
+      ),
+      style: L,
+      ...y,
+      children: /* @__PURE__ */ t("div", { className: "Bear-Chart__track", children: n.map((a, p) => {
+        const d = l && a.stacks && a.stacks.length > h ? a.stacks : [a.value], o = m[p], S = {
+          "--Bear-Chart-size": `${o / T * s.VIEWBOX}%`
+        };
+        return /* @__PURE__ */ F("div", { className: "Bear-Chart__col", children: [
+          i && !e && /* @__PURE__ */ t("span", { className: "Bear-Chart__label", children: a.label }),
+          /* @__PURE__ */ t("div", { className: "Bear-Chart__plot", children: /* @__PURE__ */ t(
+            "div",
+            {
+              className: u("Bear-Chart__stack", N && (e ? "animate-grow-up" : "animate-grow-right")),
+              style: S,
+              children: d.map((V, c) => {
+                const w = o > h ? V / o * s.VIEWBOX : h, z = c === h, B = c === d.length - _, C = l ? e ? B ? `${r}px ${r}px 0 0` : "0" : B ? `0 ${r}px ${r}px 0` : "0" : e ? `${r}px ${r}px 0 0` : `0 ${r}px ${r}px 0`, D = {
+                  "--Bear-Chart-segment": `${w}%`,
+                  "--Bear-Chart-color": G(l ? c : p, a.color || b),
+                  "--Bear-Chart-radius": C
+                };
+                return /* @__PURE__ */ t(
+                  "div",
+                  {
+                    className: "Bear-Chart__segment",
+                    style: D
+                  },
+                  `${a.label}-${c}`
+                );
+              })
+            }
+          ) }),
+          v && /* @__PURE__ */ t("span", { className: "Bear-Chart__value", children: o }),
+          i && e && /* @__PURE__ */ t("span", { className: "Bear-Chart__label", children: a.label })
+        ] }, a.label);
+      }) })
     }
-  ) });
+  );
 };
 export {
-  P as BarChart
+  Q as BarChart
 };

package/dist/components/Chart/Chart.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("./BarChart.cjs"),C=require("./LineChart.cjs"),n=require("./PieChart.cjs"),i=require("./RadarChart.cjs"),A=require("./FunnelChart.cjs"),t=require("./Chart.const.cjs"),s={[t.CHART_TYPES.BAR]:r=>e.jsx(a.BarChart,{...r}),[t.CHART_TYPES.STACKED]:r=>e.jsx(a.BarChart,{...r,stacked:!0}),[t.CHART_TYPES.LINE]:r=>e.jsx(C.LineChart,{...r}),[t.CHART_TYPES.AREA]:r=>e.jsx(C.LineChart,{...r,fill:!0}),[t.CHART_TYPES.PIE]:r=>e.jsx(n.PieChart,{...r}),[t.CHART_TYPES.DONUT]:r=>e.jsx(n.PieChart,{...r,innerRadius:t.CHART.DEFAULT_INNER_RADIUS}),[t.CHART_TYPES.RADAR]:r=>e.jsx(i.RadarChart,{...r}),[t.CHART_TYPES.FUNNEL]:r=>e.jsx(A.FunnelChart,{...r})},E=r=>{const{type:R,...T}=r;return(s[R]??s[t.CHART_TYPES.BAR])(T)};exports.Chart=E;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime");require("react");const A=require("../../utils/generateBearId.utils.cjs"),c=require("../../utils/useBearId.cjs"),a=require("./BarChart.cjs"),s=require("./LineChart.cjs"),n=require("./PieChart.cjs"),E=require("./RadarChart.cjs"),d=require("./FunnelChart.cjs"),e=require("./Chart.const.cjs"),C={[e.CHART_TYPES.BAR]:r=>t.jsx(a.BarChart,{...r}),[e.CHART_TYPES.STACKED]:r=>t.jsx(a.BarChart,{...r,stacked:!0}),[e.CHART_TYPES.LINE]:r=>t.jsx(s.LineChart,{...r}),[e.CHART_TYPES.AREA]:r=>t.jsx(s.LineChart,{...r,fill:!0}),[e.CHART_TYPES.PIE]:r=>t.jsx(n.PieChart,{...r}),[e.CHART_TYPES.DONUT]:r=>t.jsx(n.PieChart,{...r,innerRadius:e.CHART.DEFAULT_INNER_RADIUS}),[e.CHART_TYPES.RADAR]:r=>t.jsx(E.RadarChart,{...r}),[e.CHART_TYPES.FUNNEL]:r=>t.jsx(d.FunnelChart,{...r})},h=r=>{const{type:R=e.CHART_TYPES.BAR,id:i,...T}=r,o=c.useBearId("Chart"),u=A.resolveBearId(i,o);return(C[R]??C[e.CHART_TYPES.BAR])({...T,id:u})};exports.Chart=h;

package/dist/components/Chart/Chart.js

@@ -1,23 +1,26 @@
 import { jsx as o } from "react/jsx-runtime";
-import { BarChart as R } from "./BarChart.js";
-import { LineChart as e } from "./LineChart.js";
-import { PieChart as m } from "./PieChart.js";
-import { RadarChart as A } from "./RadarChart.js";
-import { FunnelChart as E } from "./FunnelChart.js";
-import { CHART_TYPES as t, CHART as p } from "./Chart.const.js";
+import "react";
+import { resolveBearId as s } from "../../utils/generateBearId.utils.js";
+import { useBearId as C } from "../../utils/useBearId.js";
+import { BarChart as e } from "./BarChart.js";
+import { LineChart as m } from "./LineChart.js";
+import { PieChart as i } from "./PieChart.js";
+import { RadarChart as E } from "./RadarChart.js";
+import { FunnelChart as f } from "./FunnelChart.js";
+import { CHART_TYPES as t, CHART as c } from "./Chart.const.js";
 const a = {
-  [t.BAR]: (r) => /* @__PURE__ */ o(R, { ...r }),
-  [t.STACKED]: (r) => /* @__PURE__ */ o(R, { ...r, stacked: !0 }),
-  [t.LINE]: (r) => /* @__PURE__ */ o(e, { ...r }),
-  [t.AREA]: (r) => /* @__PURE__ */ o(e, { ...r, fill: !0 }),
-  [t.PIE]: (r) => /* @__PURE__ */ o(m, { ...r }),
-  [t.DONUT]: (r) => /* @__PURE__ */ o(m, { ...r, innerRadius: p.DEFAULT_INNER_RADIUS }),
-  [t.RADAR]: (r) => /* @__PURE__ */ o(A, { ...r }),
-  [t.FUNNEL]: (r) => /* @__PURE__ */ o(E, { ...r })
-}, d = (r) => {
-  const { type: i, ...n } = r;
-  return (a[i] ?? a[t.BAR])(n);
+  [t.BAR]: (r) => /* @__PURE__ */ o(e, { ...r }),
+  [t.STACKED]: (r) => /* @__PURE__ */ o(e, { ...r, stacked: !0 }),
+  [t.LINE]: (r) => /* @__PURE__ */ o(m, { ...r }),
+  [t.AREA]: (r) => /* @__PURE__ */ o(m, { ...r, fill: !0 }),
+  [t.PIE]: (r) => /* @__PURE__ */ o(i, { ...r }),
+  [t.DONUT]: (r) => /* @__PURE__ */ o(i, { ...r, innerRadius: c.DEFAULT_INNER_RADIUS }),
+  [t.RADAR]: (r) => /* @__PURE__ */ o(E, { ...r }),
+  [t.FUNNEL]: (r) => /* @__PURE__ */ o(f, { ...r })
+}, U = (r) => {
+  const { type: R = t.BAR, id: n, ...d } = r, p = C("Chart"), A = s(n, p);
+  return (a[R] ?? a[t.BAR])({ ...d, id: A });
 };
 export {
-  d as Chart
+  U as Chart
 };

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

@@ -10,7 +10,7 @@ export interface ChartDataPoint {
 }
 export interface ChartProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
     testId?: string;
-    type: ChartType;
+    type?: ChartType;
     data: ChartDataPoint[];
     height?: number;
     showLabels?: boolean;

package/dist/components/Chart/FunnelChart.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),n=require("../../constants/numbers.const.cjs"),o=require("../../utils/cn.cjs");require("react");const b=require("../Box/Box.cjs"),l=require("../Flex/Flex.cjs"),p=require("../Typography/Typography.cjs"),r=require("./Chart.const.cjs"),H=require("./Chart.utils.cjs"),_=s=>{const{data:a,height:c=r.CHART.DEFAULT_HEIGHT,showLabels:u=!0,showValues:i=!0,animated:h=!0,color:d,className:m,...C}=s,g=Math.max(...a.map(e=>e.value),n.ONE);return t.jsx(l.Flex,{direction:"column",gap:1,justify:"center",className:o.cn("Bear-Chart Bear-Chart--funnel bear-w-full",m),style:{height:c},...C,children:a.map((e,x)=>{const N=Math.max(e.value/g*r.CHART.VIEWBOX,r.CHART.FUNNEL_MIN_WIDTH),T=H.getChartColor(x,e.color||d);return t.jsxs(l.Flex,{direction:"column",align:"center",gap:1,className:"bear-w-full",children:[t.jsx(b.Box,{className:o.cn("Bear-Chart__funnel-step bear-rounded-md",h&&"animate-grow-right"),style:{width:`${N}%`,height:`${r.CHART.VIEWBOX/Math.max(a.length,n.ONE)/2}%`,minHeight:r.CHART.FUNNEL_MIN_WIDTH,backgroundColor:T}}),u&&t.jsxs(p.Typography,{variant:"caption",color:"muted",children:[e.label,i?` · ${e.value}`:""]})]},e.label)})})};exports.FunnelChart=_;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),n=require("../../constants/numbers.const.cjs"),s=require("../../utils/cn.cjs");require("react");const N=require("../../utils/generateBearId.utils.cjs"),_=require("../../utils/useBearId.cjs"),b=require("../Box/Box.cjs"),o=require("../Flex/Flex.cjs"),F=require("../Typography/Typography.cjs"),t=require("./Chart.const.cjs"),j=require("./Chart.utils.cjs"),E=l=>{const{data:a,height:c=t.CHART.DEFAULT_HEIGHT,showLabels:u=!0,showValues:i=!0,animated:h=!0,color:d,className:C,id:g,testId:m,...x}=l,B=_.useBearId("FunnelChart"),p=N.resolveBearId(g,B),I=Math.max(...a.map(e=>e.value),n.ONE),q={"--Bear-Chart-height":`${c}px`};return r.jsx(o.Flex,{id:p,"data-testid":m,direction:"column",gap:1,justify:"center",className:s.cn("Bear-Chart Bear-Chart--funnel",C),style:q,...x,children:a.map((e,y)=>{const T={"--Bear-Chart-size":`${Math.max(e.value/I*t.CHART.VIEWBOX,t.CHART.FUNNEL_MIN_WIDTH)}%`,"--Bear-Chart-step-height":`${t.CHART.VIEWBOX/Math.max(a.length,n.ONE)/2}%`,"--Bear-Chart-color":j.getChartColor(y,e.color||d)};return r.jsxs(o.Flex,{direction:"column",align:"center",gap:1,className:"bear-w-full",children:[r.jsx(b.Box,{className:s.cn("Bear-Chart__funnel-step bear-rounded-md",h&&"animate-grow-right"),style:T}),u&&r.jsxs(F.Typography,{variant:"caption",color:"muted",children:[e.label,i?` · ${e.value}`:""]})]},e.label)})})};exports.FunnelChart=E;

package/dist/components/Chart/FunnelChart.js

@@ -1,51 +1,53 @@
-import { jsx as o, jsxs as e } from "react/jsx-runtime";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
 import { ONE as l } from "../../constants/numbers.const.js";
 import { cn as n } from "../../utils/cn.js";
 import "react";
-import { Box as b } from "../Box/Box.js";
-import { Flex as m } from "../Flex/Flex.js";
-import { Typography as w } from "../Typography/Typography.js";
-import { CHART as a } from "./Chart.const.js";
-import { getChartColor as E } from "./Chart.utils.js";
-const L = (c) => {
+import { resolveBearId as E } from "../../utils/generateBearId.utils.js";
+import { useBearId as b } from "../../utils/useBearId.js";
+import { Box as v } from "../Box/Box.js";
+import { Flex as s } from "../Flex/Flex.js";
+import { Typography as F } from "../Typography/Typography.js";
+import { CHART as t } from "./Chart.const.js";
+import { getChartColor as T } from "./Chart.utils.js";
+const S = (m) => {
   const {
-    data: t,
-    height: i = a.DEFAULT_HEIGHT,
-    showLabels: s = !0,
+    data: e,
+    height: i = t.DEFAULT_HEIGHT,
+    showLabels: c = !0,
     showValues: h = !0,
-    animated: u = !0,
+    animated: d = !0,
     color: p,
-    className: d,
-    ...f
-  } = c, g = Math.max(...t.map((r) => r.value), l);
-  return /* @__PURE__ */ o(
-    m,
+    className: u,
+    id: f,
+    testId: g,
+    ...B
+  } = m, C = b("FunnelChart"), x = E(f, C), I = Math.max(...e.map((r) => r.value), l), N = { "--Bear-Chart-height": `${i}px` };
+  return /* @__PURE__ */ a(
+    s,
     {
+      id: x,
+      "data-testid": g,
       direction: "column",
       gap: 1,
       justify: "center",
-      className: n("Bear-Chart Bear-Chart--funnel bear-w-full", d),
-      style: { height: i },
-      ...f,
-      children: t.map((r, N) => {
-        const x = Math.max(r.value / g * a.VIEWBOX, a.FUNNEL_MIN_WIDTH), C = E(N, r.color || p);
-        return /* @__PURE__ */ e(m, { direction: "column", align: "center", gap: 1, className: "bear-w-full", children: [
-          /* @__PURE__ */ o(
-            b,
+      className: n("Bear-Chart Bear-Chart--funnel", u),
+      style: N,
+      ...B,
+      children: e.map((r, y) => {
+        const w = {
+          "--Bear-Chart-size": `${Math.max(r.value / I * t.VIEWBOX, t.FUNNEL_MIN_WIDTH)}%`,
+          "--Bear-Chart-step-height": `${t.VIEWBOX / Math.max(e.length, l) / 2}%`,
+          "--Bear-Chart-color": T(y, r.color || p)
+        };
+        return /* @__PURE__ */ o(s, { direction: "column", align: "center", gap: 1, className: "bear-w-full", children: [
+          /* @__PURE__ */ a(
+            v,
             {
-              className: n(
-                "Bear-Chart__funnel-step bear-rounded-md",
-                u && "animate-grow-right"
-              ),
-              style: {
-                width: `${x}%`,
-                height: `${a.VIEWBOX / Math.max(t.length, l) / 2}%`,
-                minHeight: a.FUNNEL_MIN_WIDTH,
-                backgroundColor: C
-              }
+              className: n("Bear-Chart__funnel-step bear-rounded-md", d && "animate-grow-right"),
+              style: w
             }
           ),
-          s && /* @__PURE__ */ e(w, { variant: "caption", color: "muted", children: [
+          c && /* @__PURE__ */ o(F, { variant: "caption", color: "muted", children: [
             r.label,
             h ? ` · ${r.value}` : ""
           ] })
@@ -55,5 +57,5 @@ const L = (c) => {
   );
 };
 export {
-  L as FunnelChart
+  S as FunnelChart
 };

package/dist/components/Chart/LineChart.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),c=require("../../constants/numbers.const.cjs"),r=require("../../utils/cn.cjs");require("react");const a=require("./Chart.const.cjs"),m=require("./Chart.utils.cjs"),E=p=>{const{data:l,height:x=a.CHART.DEFAULT_HEIGHT,showLabels:b=!0,showDots:f=!0,smooth:T=!0,fill:C=!1,stepped:d=!1,strokeWidth:j=a.CHART.DEFAULT_STROKE_WIDTH,color:t="var(--bear-primary-500, #ec4899)",animated:n=!0,className:y,...R}=p,i=m.calculateLinePoints(l),h=m.generateLinePath(i,T&&!d,d),A=i.length===c.ZERO?"":`${h} L ${a.CHART.VIEWBOX},${a.CHART.VIEWBOX} L 0,${a.CHART.VIEWBOX} Z`;return e.jsxs("div",{className:r.cn("Bear-Chart Bear-Chart--line bear-w-full",y),style:{height:x},...R,children:[e.jsxs("svg",{viewBox:`0 0 ${a.CHART.VIEWBOX} ${a.CHART.VIEWBOX}`,preserveAspectRatio:"none",className:"bear-h-full bear-w-full",children:[e.jsx("defs",{children:e.jsxs("linearGradient",{id:"line-gradient",x1:"0%",y1:"0%",x2:"0%",y2:"100%",children:[e.jsx("stop",{offset:"0%",stopColor:t,stopOpacity:"0.3"}),e.jsx("stop",{offset:"100%",stopColor:t,stopOpacity:"0"})]})}),C&&e.jsx("path",{d:A,fill:"url(#line-gradient)",className:r.cn(n&&"animate-fade-in")}),e.jsx("path",{d:h,fill:"none",stroke:t,strokeWidth:j/c.TEN,strokeLinecap:"round",strokeLinejoin:"round",className:r.cn(n&&"animate-draw-line")}),f&&i.map((s,o)=>{var u;return e.jsx("circle",{cx:s.x,cy:s.y,r:a.CHART.DOT_RADIUS,fill:t,className:r.cn(n&&"animate-scale-in"),style:{animationDelay:`${o*c.FIFTY}ms`}},((u=l[o])==null?void 0:u.label)??o)})]}),b&&e.jsx("div",{className:"bear-mt-2 bear-flex bear-justify-between",children:l.map(s=>e.jsx("span",{className:"bear-text-xs bear-text-gray-600 dark:bear-text-slate-300",children:s.label},s.label))})]})};exports.LineChart=E;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),c=require("../../constants/numbers.const.cjs"),r=require("../../utils/cn.cjs");require("react");const O=require("../../utils/generateBearId.utils.cjs"),b=require("../../utils/useBearId.cjs"),t=require("./Chart.const.cjs"),C=require("./Chart.utils.cjs"),$=I=>{const{data:n,height:T=t.CHART.DEFAULT_HEIGHT,showLabels:x=!0,showDots:B=!0,smooth:j=!0,fill:_=!1,stepped:d=!1,strokeWidth:f=t.CHART.DEFAULT_STROKE_WIDTH,color:a="var(--bear-primary-500, #ec4899)",animated:i=!0,className:y,id:R,testId:g,...A}=I,L=b.useBearId("LineChart"),h=O.resolveBearId(R,L),u=`${h}-gradient`,o=C.calculateLinePoints(n),p=C.generateLinePath(o,j&&!d,d),E=o.length===c.ZERO?"":`${p} L ${t.CHART.VIEWBOX},${t.CHART.VIEWBOX} L 0,${t.CHART.VIEWBOX} Z`,H={"--Bear-Chart-height":`${T}px`};return e.jsxs("div",{id:h,"data-testid":g,className:r.cn("Bear-Chart Bear-Chart--line",y),style:H,...A,children:[e.jsxs("svg",{viewBox:`0 0 ${t.CHART.VIEWBOX} ${t.CHART.VIEWBOX}`,preserveAspectRatio:"none",className:"Bear-Chart__svg",children:[e.jsx("defs",{children:e.jsxs("linearGradient",{id:u,x1:"0%",y1:"0%",x2:"0%",y2:"100%",children:[e.jsx("stop",{offset:"0%",stopColor:a,stopOpacity:"0.3"}),e.jsx("stop",{offset:"100%",stopColor:a,stopOpacity:"0"})]})}),_&&e.jsx("path",{d:E,fill:`url(#${u})`,className:r.cn(i&&"animate-fade-in")}),e.jsx("path",{d:p,fill:"none",stroke:a,strokeWidth:f/c.TEN,strokeLinecap:"round",strokeLinejoin:"round",className:r.cn(i&&"animate-draw-line")}),B&&o.map((s,l)=>{var m;return e.jsx("circle",{cx:s.x,cy:s.y,r:t.CHART.DOT_RADIUS,fill:a,className:r.cn(i&&"animate-scale-in"),style:{animationDelay:`${l*c.FIFTY}ms`}},((m=n[l])==null?void 0:m.label)??l)})]}),x&&e.jsx("div",{className:"Bear-Chart__labels",children:n.map(s=>e.jsx("span",{className:"Bear-Chart__label",children:s.label},s.label))})]})};exports.LineChart=$;