@forgedevstack/bear 1.3.0 → 1.3.2

package/dist/components/ActiveBar/ActiveBar.js

@@ -1,90 +1,97 @@
-import { jsxs as g, jsx as t } from "react/jsx-runtime";
-import { forwardRef as w, useRef as k, useState as v, useEffect as $ } from "react";
-const N = {
-  sm: "text-sm px-3 py-1.5",
-  md: "text-sm px-4 py-2",
-  lg: "text-base px-5 py-2.5"
-}, S = w(({
-  items: a,
-  activeId: s,
-  onItemClick: n,
-  variant: e = "default",
-  size: y = "md",
-  fullWidth: d = !1,
-  animated: l = !0,
-  className: x = "",
-  ...c
-}, f) => {
-  const o = k(null), [p, b] = v({});
-  $(() => {
-    if (!l || e !== "underline") return;
-    const r = a.findIndex((m) => m.id === s);
-    if (r === -1 || !o.current) return;
-    const i = o.current.querySelectorAll("button")[r];
-    i && b({
-      left: i.offsetLeft,
-      width: i.offsetWidth
+import { jsxs as p, jsx as n } from "react/jsx-runtime";
+import { forwardRef as v, useRef as y, useState as x, useEffect as T } from "react";
+import { NEGATIVE_ONE as I } from "../../constants/numbers.const.js";
+import { VARIANT_DEFAULT as R, SIZE_MD as g, BOOLEAN_FALSE as h, BOOLEAN_TRUE as L, EMPTY_STRING as V, VARIANT_UNDERLINE as A, QUERY_BUTTON as O } from "../../constants/generals.const.js";
+import { cn as m } from "../../utils/cn.js";
+import { Box as U } from "../Box/Box.js";
+import { Button as w } from "../Button/Button.js";
+import { Typography as C } from "../Typography/Typography.js";
+import { ACTIVE_BAR_VARIANT_CLASSES as u, ACTIVE_BAR_SHAPE_CLASSES as j, ACTIVE_BAR_SIZE_CLASSES as D } from "./ActiveBar.const.js";
+const F = (e, s, a, t, i, r) => {
+  const b = s ? u[i].active : u[i].inactive;
+  return /* @__PURE__ */ p(
+    w,
+    {
+      variant: "ghost",
+      onClick: () => r == null ? void 0 : r(e),
+      className: m(
+        a && "bear-flex-1",
+        D[t],
+        b,
+        j[i],
+        "bear-flex bear-items-center bear-justify-center bear-gap-2 bear-transition-all bear-duration-200"
+      ),
+      children: [
+        e.icon,
+        /* @__PURE__ */ n(C, { children: e.label }),
+        e.badge !== void 0 && /* @__PURE__ */ n(
+          U,
+          {
+            as: "span",
+            className: "bear-px-1.5 bear-py-0.5 bear-text-xs bear-rounded-full bear-bg-primary-100 dark:bear-bg-primary-900/30 bear-text-primary-600 dark:bear-text-primary-400",
+            children: e.badge
+          }
+        )
+      ]
+    },
+    e.id
+  );
+}, G = v((e, s) => {
+  const {
+    items: a,
+    activeId: t,
+    onItemClick: i,
+    variant: r = R,
+    size: b = g,
+    fullWidth: c = h,
+    animated: l = L,
+    className: E = V,
+    ..._
+  } = e, d = y(null), [B, N] = x({});
+  return T(() => {
+    if (!l || r !== A)
+      return;
+    const o = a.findIndex((S) => S.id === t);
+    if (o === I || !d.current)
+      return;
+    const f = d.current.querySelectorAll(O)[o];
+    f && N({
+      left: f.offsetLeft,
+      width: f.offsetWidth
     });
-  }, [s, a, l, e]);
-  const h = (r) => {
-    switch (e) {
-      case "pills":
-        return r ? "bg-primary-500 text-white shadow-lg shadow-primary-500/30" : "text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800";
-      case "underline":
-        return r ? "text-primary-500 font-medium" : "text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200";
-      default:
-        return r ? "bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white font-medium" : "text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800/50";
-    }
-  };
-  return /* @__PURE__ */ g(
+  }, [t, a, l, r]), /* @__PURE__ */ p(
     "div",
     {
-      ref: f,
-      className: `bear-active-bar relative ${d ? "w-full" : "inline-flex"} ${x}`.trim(),
-      ...c,
+      ref: s,
+      className: m("Bear-ActiveBar bear-relative", c ? "bear-w-full" : "bear-inline-flex", E),
+      ..._,
       children: [
-        /* @__PURE__ */ t(
+        /* @__PURE__ */ n(
           "div",
           {
-            ref: o,
-            className: `flex ${d ? "w-full" : ""} ${e === "underline" ? "border-b border-gray-200 dark:border-gray-700" : "gap-1"}`,
-            children: a.map((r) => {
-              const u = r.id === s;
-              return /* @__PURE__ */ g(
-                "button",
-                {
-                  onClick: () => n == null ? void 0 : n(r),
-                  className: `
-                ${d ? "flex-1" : ""}
-                ${N[y]}
-                ${h(u)}
-                ${e === "pills" ? "rounded-full" : e === "underline" ? "relative pb-3" : "rounded-lg"}
-                flex items-center justify-center gap-2
-                transition-all duration-200
-              `,
-                  children: [
-                    r.icon,
-                    /* @__PURE__ */ t("span", { children: r.label }),
-                    r.badge !== void 0 && /* @__PURE__ */ t("span", { className: "px-1.5 py-0.5 text-xs rounded-full bg-primary-100 dark:bg-primary-900/30 text-primary-600 dark:text-primary-400", children: r.badge })
-                  ]
-                },
-                r.id
-              );
-            })
+            ref: d,
+            className: m(
+              "Bear-ActiveBar__list bear-flex",
+              c && "bear-w-full",
+              r === A ? "bear-border-b bear-border-gray-200 dark:bear-border-gray-700" : "bear-gap-1"
+            ),
+            children: a.map(
+              (o) => F(o, o.id === t, c, b, r, i)
+            )
           }
         ),
-        l && e === "underline" && /* @__PURE__ */ t(
+        l && r === A && /* @__PURE__ */ n(
           "div",
           {
-            className: "absolute bottom-0 h-0.5 bg-primary-500 transition-all duration-300 ease-out",
-            style: p
+            className: "Bear-ActiveBar__indicator bear-absolute bear-bottom-0 bear-h-0.5 bear-bg-primary-500 bear-transition-all bear-duration-300 bear-ease-out",
+            style: B
           }
         )
       ]
     }
   );
 });
-S.displayName = "ActiveBar";
+G.displayName = "ActiveBar";
 export {
-  S as ActiveBar
+  G as ActiveBar
 };

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

@@ -1,4 +1,6 @@
 import { HTMLAttributes, ReactNode } from 'react';
+import { ActiveBarVariant, CompactBearSize } from '../../types';
+export type { ActiveBarVariant, CompactBearSize };
 export interface ActiveBarItem {
     id: string;
     label: string;
@@ -11,8 +13,8 @@ export interface ActiveBarProps extends HTMLAttributes<HTMLDivElement> {
     items: ActiveBarItem[];
     activeId?: string;
     onItemClick?: (item: ActiveBarItem) => void;
-    variant?: 'default' | 'pills' | 'underline';
-    size?: 'sm' | 'md' | 'lg';
+    variant?: ActiveBarVariant;
+    size?: CompactBearSize;
     fullWidth?: boolean;
     animated?: boolean;
 }

package/dist/components/ActivityItem/ActivityItem.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),d=require("../../utils/cn.cjs");require("react");const m=({icon:s,iconBg:r="rgba(16, 185, 129, 0.2)",title:a,description:i,user:t,time:l,onClick:c,className:n,...x})=>e.jsxs("div",{className:d.cn("flex items-start gap-4 p-4 hover:bg-slate-700/30 dark:hover:bg-slate-700/30 rounded-xl transition-colors cursor-pointer",n),onClick:c,...x,children:[e.jsx("div",{className:"flex items-center justify-center w-10 h-10 rounded-xl flex-shrink-0",style:{background:r},children:s}),e.jsxs("div",{className:"flex-1 min-w-0",children:[e.jsx("p",{className:"text-gray-900 dark:text-white font-medium truncate",children:a}),e.jsx("p",{className:"text-gray-500 dark:text-slate-400 text-sm truncate",children:i})]}),e.jsxs("div",{className:"text-right flex-shrink-0",children:[e.jsx("p",{className:"text-gray-500 dark:text-slate-400 text-sm",children:l}),t&&e.jsx("p",{className:"text-gray-400 dark:text-slate-500 text-xs",children:t})]})]});exports.ActivityItem=m;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),d=require("../../constants/generals.const.cjs"),u=require("../../utils/cn.cjs");require("react");const a=require("../Box/Box.cjs"),s=require("../Flex/Flex.cjs"),r=require("../Typography/Typography.cjs"),h=i=>{const{icon:c,iconBg:n=d.ACTIVITY_ICON_BG,title:l,description:o,user:t,time:b,onClick:x,className:m,...y}=i;return e.jsxs(s.Flex,{className:u.cn("Bear-ActivityItem bear-items-start bear-gap-4 bear-p-4 hover:bear-bg-slate-700/30 dark:hover:bear-bg-slate-700/30 bear-rounded-xl bear-transition-colors bear-cursor-pointer",m),onClick:x,...y,children:[e.jsx(s.Flex,{className:"Bear-ActivityItem__icon bear-items-center bear-justify-center bear-w-10 bear-h-10 bear-rounded-xl bear-flex-shrink-0",style:{background:n},children:c}),e.jsxs(a.Box,{className:"Bear-ActivityItem__body bear-flex-1 bear-min-w-0",children:[e.jsx(r.Typography,{className:"Bear-ActivityItem__title bear-text-gray-900 dark:bear-text-white bear-font-medium bear-truncate",children:l}),e.jsx(r.Typography,{className:"Bear-ActivityItem__description bear-text-gray-500 dark:bear-text-slate-400 bear-text-sm bear-truncate",children:o})]}),e.jsxs(a.Box,{className:"Bear-ActivityItem__meta bear-text-right bear-flex-shrink-0",children:[e.jsx(r.Typography,{className:"Bear-ActivityItem__time bear-text-gray-500 dark:bear-text-slate-400 bear-text-sm",children:b}),t&&e.jsx(r.Typography,{className:"Bear-ActivityItem__user bear-text-gray-400 dark:bear-text-slate-500 bear-text-xs",children:t})]})]})};exports.ActivityItem=h;

package/dist/components/ActivityItem/ActivityItem.d.ts

@@ -1,7 +1,2 @@
-import { FC } from 'react';
 import { ActivityItemProps } from './ActivityItem.types';
-/**
- * ActivityItem Component
- * A single activity/event item for activity feeds
- */
-export declare const ActivityItem: FC<ActivityItemProps>;
+export declare const ActivityItem: (props: ActivityItemProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/ActivityItem/ActivityItem.js

@@ -1,45 +1,52 @@
 import { jsxs as t, jsx as e } from "react/jsx-runtime";
-import { cn as m } from "../../utils/cn.js";
+import { ACTIVITY_ICON_BG as h } from "../../constants/generals.const.js";
+import { cn as _ } from "../../utils/cn.js";
 import "react";
-const g = ({
-  icon: a,
-  iconBg: s = "rgba(16, 185, 129, 0.2)",
-  title: l,
-  description: i,
-  user: r,
-  time: c,
-  onClick: n,
-  className: d,
-  ...x
-}) => /* @__PURE__ */ t(
-  "div",
-  {
-    className: m(
-      "flex items-start gap-4 p-4 hover:bg-slate-700/30 dark:hover:bg-slate-700/30 rounded-xl transition-colors cursor-pointer",
-      d
-    ),
-    onClick: n,
-    ...x,
-    children: [
-      /* @__PURE__ */ e(
-        "div",
-        {
-          className: "flex items-center justify-center w-10 h-10 rounded-xl flex-shrink-0",
-          style: { background: s },
-          children: a
-        }
+import { Box as i } from "../Box/Box.js";
+import { Flex as s } from "../Flex/Flex.js";
+import { Typography as r } from "../Typography/Typography.js";
+const A = (c) => {
+  const {
+    icon: m,
+    iconBg: b = h,
+    title: o,
+    description: l,
+    user: a,
+    time: n,
+    onClick: x,
+    className: d,
+    ...y
+  } = c;
+  return /* @__PURE__ */ t(
+    s,
+    {
+      className: _(
+        "Bear-ActivityItem bear-items-start bear-gap-4 bear-p-4 hover:bear-bg-slate-700/30 dark:hover:bear-bg-slate-700/30 bear-rounded-xl bear-transition-colors bear-cursor-pointer",
+        d
       ),
-      /* @__PURE__ */ t("div", { className: "flex-1 min-w-0", children: [
-        /* @__PURE__ */ e("p", { className: "text-gray-900 dark:text-white font-medium truncate", children: l }),
-        /* @__PURE__ */ e("p", { className: "text-gray-500 dark:text-slate-400 text-sm truncate", children: i })
-      ] }),
-      /* @__PURE__ */ t("div", { className: "text-right flex-shrink-0", children: [
-        /* @__PURE__ */ e("p", { className: "text-gray-500 dark:text-slate-400 text-sm", children: c }),
-        r && /* @__PURE__ */ e("p", { className: "text-gray-400 dark:text-slate-500 text-xs", children: r })
-      ] })
-    ]
-  }
-);
+      onClick: x,
+      ...y,
+      children: [
+        /* @__PURE__ */ e(
+          s,
+          {
+            className: "Bear-ActivityItem__icon bear-items-center bear-justify-center bear-w-10 bear-h-10 bear-rounded-xl bear-flex-shrink-0",
+            style: { background: b },
+            children: m
+          }
+        ),
+        /* @__PURE__ */ t(i, { className: "Bear-ActivityItem__body bear-flex-1 bear-min-w-0", children: [
+          /* @__PURE__ */ e(r, { className: "Bear-ActivityItem__title bear-text-gray-900 dark:bear-text-white bear-font-medium bear-truncate", children: o }),
+          /* @__PURE__ */ e(r, { className: "Bear-ActivityItem__description bear-text-gray-500 dark:bear-text-slate-400 bear-text-sm bear-truncate", children: l })
+        ] }),
+        /* @__PURE__ */ t(i, { className: "Bear-ActivityItem__meta bear-text-right bear-flex-shrink-0", children: [
+          /* @__PURE__ */ e(r, { className: "Bear-ActivityItem__time bear-text-gray-500 dark:bear-text-slate-400 bear-text-sm", children: n }),
+          a && /* @__PURE__ */ e(r, { className: "Bear-ActivityItem__user bear-text-gray-400 dark:bear-text-slate-500 bear-text-xs", children: a })
+        ] })
+      ]
+    }
+  );
+};
 export {
-  g as ActivityItem
+  A as ActivityItem
 };

package/dist/components/Affix/Affix.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),r=require("react"),P=require("react-dom"),h=require("../../utils/cn.cjs"),t=require("./Affix.const.cjs"),T=E=>{const{children:S,position:c="top",offset:s=t.DEFAULT_OFFSET,zIndex:O=t.DEFAULT_Z_INDEX,withinPortal:R=!1,className:g,testId:m,...p}=E,[e,a]=r.useState(!1),[w,l]=r.useState(0),v=r.useRef(null),x=r.useRef(null),i=r.useCallback(()=>{const f=v.current,o=x.current;if(!f)return;const d=f.getBoundingClientRect();if(c==="top"){if(e)d.top>s&&(a(!1),l(0));else if(d.top<=s){const u=(o==null?void 0:o.offsetHeight)??f.offsetHeight??0;l(u),a(!0)}}else{const u=window.innerHeight;if(e)d.bottom<u-s&&(a(!1),l(0));else if(d.bottom>=u-s){const L=(o==null?void 0:o.offsetHeight)??f.offsetHeight??0;l(L),a(!0)}}},[s,c,e]);r.useEffect(()=>(i(),window.addEventListener("scroll",i,{passive:!0}),window.addEventListener("resize",i),()=>{window.removeEventListener("scroll",i),window.removeEventListener("resize",i)}),[i]);const A=c==="top"?t.POSITION_TOP_CLASSES:t.POSITION_BOTTOM_CLASSES,_=n.jsxs(n.Fragment,{children:[n.jsx("div",{ref:v,style:e?{height:w}:void 0,className:h.cn(!e&&"bear-contents"),"aria-hidden":e,children:!e&&n.jsx("div",{ref:x,className:h.cn(t.ROOT_CLASS,t.WRAPPER_CLASSES,A,g),"data-testid":m,...p,children:S})}),e&&n.jsx("div",{className:h.cn(t.ROOT_CLASS,t.WRAPPER_CLASSES,A,"bear-fixed",g),style:{[c]:s,zIndex:O},"data-testid":m,...p,children:S})]});return R?P.createPortal(n.jsx("div",{className:"Bear-Affix__portal",children:_}),document.body):_};exports.Affix=T;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),o=require("react"),E=require("react-dom"),c=require("../../constants/numbers.const.cjs"),i=require("../../constants/generals.const.cjs");require("../../context/BearProvider.cjs");const l=require("../../utils/cn.cjs");require("../../hooks/useBearComponent/useBearComponent.cjs");const P=require("../../hooks/useWindowLayout/useWindowLayout.cjs");require("../FormControl/FormControl.context.cjs");const _=require("./Affix.utils.cjs"),S=A=>{const{children:d,position:t=i.POSITION_TOP,offset:n=c.ZERO,zIndex:O=c.AFFIX_DEFAULT_Z_INDEX,withinPortal:p=i.BOOLEAN_FALSE,className:u,testId:f,...b}=A,[e,N]=o.useState(i.BOOLEAN_FALSE),[q,I]=o.useState(c.ZERO),h=o.useRef(null),x=o.useRef(null),v=o.useCallback(()=>{const a=h.current,B=x.current;if(!a)return;const m=a.getBoundingClientRect(),s=_.resolveAffixLayoutChange({position:t,isFixed:e,offset:n,rectTop:m.top,rectBottom:m.bottom,viewportBottom:window.innerHeight,measuredHeight:_.resolveAffixHeight(B,a)});s&&(N(s.isFixed),I(s.placeholderHeight))},[n,t,e]);P.useWindowLayout({onLayout:v});const g=r.jsxs("div",{className:"Bear-Affix",children:[r.jsx("div",{ref:h,style:e?{height:q}:void 0,className:l.cn("Bear-Affix__placeholder",!e&&"bear-contents"),"aria-hidden":e,children:!e&&r.jsx("div",{ref:x,className:l.cn("Bear-Affix__content bear-bg-white dark:bear-bg-zinc-900 bear-transition-[top,bottom] bear-duration-200",t===i.POSITION_TOP?"bear-top-0 bear-left-0 bear-right-0":"bear-bottom-0 bear-left-0 bear-right-0",u),"data-testid":f,...b,children:d})}),e&&r.jsx("div",{className:l.cn("Bear-Affix__content bear-bg-white dark:bear-bg-zinc-900 bear-transition-[top,bottom] bear-duration-200 bear-fixed",t===i.POSITION_TOP?"bear-top-0 bear-left-0 bear-right-0":"bear-bottom-0 bear-left-0 bear-right-0",u),style:{[t]:n,zIndex:O},"data-testid":f,...b,children:d})]});return p?E.createPortal(r.jsx("div",{className:"Bear-Affix__portal",children:g}),document.body):g};exports.Affix=S;

package/dist/components/Affix/Affix.d.ts

@@ -1,4 +1,3 @@
-import { FC } from 'react';
 import { AffixProps } from './Affix.types';
-export declare const Affix: FC<AffixProps>;
+export declare const Affix: (props: AffixProps) => import("react/jsx-runtime").JSX.Element;
 export default Affix;

package/dist/components/Affix/Affix.js

@@ -1,69 +1,84 @@
-import { jsxs as P, Fragment as C, jsx as a } from "react/jsx-runtime";
-import { useState as E, useRef as _, useCallback as F, useEffect as H } from "react";
-import { createPortal as R } from "react-dom";
-import { cn as d } from "../../utils/cn.js";
-import { DEFAULT_OFFSET as b, DEFAULT_Z_INDEX as B, POSITION_TOP_CLASSES as y, POSITION_BOTTOM_CLASSES as z, WRAPPER_CLASSES as L, ROOT_CLASS as O } from "./Affix.const.js";
-const W = (x) => {
+import { jsxs as y, jsx as r } from "react/jsx-runtime";
+import { useState as u, useRef as g, useCallback as H } from "react";
+import { createPortal as L } from "react-dom";
+import { ZERO as x, AFFIX_DEFAULT_Z_INDEX as O } from "../../constants/numbers.const.js";
+import { POSITION_TOP as n, BOOLEAN_FALSE as _ } from "../../constants/generals.const.js";
+import "../../context/BearProvider.js";
+import { cn as s } from "../../utils/cn.js";
+import "../../hooks/useBearComponent/useBearComponent.js";
+import { useWindowLayout as P } from "../../hooks/useWindowLayout/useWindowLayout.js";
+import "../FormControl/FormControl.context.js";
+import { resolveAffixLayoutChange as R, resolveAffixHeight as k } from "./Affix.utils.js";
+const G = (A) => {
   const {
-    children: h,
-    position: i = "top",
-    offset: t = b,
-    zIndex: A = B,
-    withinPortal: T = !1,
-    className: m,
-    testId: p,
-    ...u
-  } = x, [e, r] = E(!1), [I, n] = E(0), S = _(null), g = _(null), s = F(() => {
-    const c = S.current, o = g.current;
-    if (!c) return;
-    const l = c.getBoundingClientRect();
-    if (i === "top") {
-      if (e)
-        l.top > t && (r(!1), n(0));
-      else if (l.top <= t) {
-        const f = (o == null ? void 0 : o.offsetHeight) ?? c.offsetHeight ?? 0;
-        n(f), r(!0);
-      }
-    } else {
-      const f = window.innerHeight;
-      if (e)
-        l.bottom < f - t && (r(!1), n(0));
-      else if (l.bottom >= f - t) {
-        const N = (o == null ? void 0 : o.offsetHeight) ?? c.offsetHeight ?? 0;
-        n(N), r(!0);
-      }
-    }
-  }, [t, i, e]);
-  H(() => (s(), window.addEventListener("scroll", s, { passive: !0 }), window.addEventListener("resize", s), () => {
-    window.removeEventListener("scroll", s), window.removeEventListener("resize", s);
-  }), [s]);
-  const v = i === "top" ? y : z, w = /* @__PURE__ */ P(C, { children: [
-    /* @__PURE__ */ a(
+    children: c,
+    position: t = n,
+    offset: o = x,
+    zIndex: v = O,
+    withinPortal: B = _,
+    className: l,
+    testId: f,
+    ...d
+  } = A, [e, N] = u(_), [w, E] = u(x), m = g(null), b = g(null), F = H(() => {
+    const i = m.current, I = b.current;
+    if (!i)
+      return;
+    const p = i.getBoundingClientRect(), a = R({
+      position: t,
+      isFixed: e,
+      offset: o,
+      rectTop: p.top,
+      rectBottom: p.bottom,
+      viewportBottom: window.innerHeight,
+      measuredHeight: k(I, i)
+    });
+    a && (N(a.isFixed), E(a.placeholderHeight));
+  }, [o, t, e]);
+  P({ onLayout: F });
+  const h = /* @__PURE__ */ y("div", { className: "Bear-Affix", children: [
+    /* @__PURE__ */ r(
       "div",
       {
-        ref: S,
-        style: e ? { height: I } : void 0,
-        className: d(!e && "bear-contents"),
+        ref: m,
+        style: e ? { height: w } : void 0,
+        className: s("Bear-Affix__placeholder", !e && "bear-contents"),
         "aria-hidden": e,
-        children: !e && /* @__PURE__ */ a("div", { ref: g, className: d(O, L, v, m), "data-testid": p, ...u, children: h })
+        children: !e && /* @__PURE__ */ r(
+          "div",
+          {
+            ref: b,
+            className: s(
+              "Bear-Affix__content bear-bg-white dark:bear-bg-zinc-900 bear-transition-[top,bottom] bear-duration-200",
+              t === n ? "bear-top-0 bear-left-0 bear-right-0" : "bear-bottom-0 bear-left-0 bear-right-0",
+              l
+            ),
+            "data-testid": f,
+            ...d,
+            children: c
+          }
+        )
       }
     ),
-    e && /* @__PURE__ */ a(
+    e && /* @__PURE__ */ r(
       "div",
       {
-        className: d(O, L, v, "bear-fixed", m),
+        className: s(
+          "Bear-Affix__content bear-bg-white dark:bear-bg-zinc-900 bear-transition-[top,bottom] bear-duration-200 bear-fixed",
+          t === n ? "bear-top-0 bear-left-0 bear-right-0" : "bear-bottom-0 bear-left-0 bear-right-0",
+          l
+        ),
         style: {
-          [i]: t,
-          zIndex: A
+          [t]: o,
+          zIndex: v
         },
-        "data-testid": p,
-        ...u,
-        children: h
+        "data-testid": f,
+        ...d,
+        children: c
       }
     )
   ] });
-  return T ? R(/* @__PURE__ */ a("div", { className: "Bear-Affix__portal", children: w }), document.body) : w;
+  return B ? L(/* @__PURE__ */ r("div", { className: "Bear-Affix__portal", children: h }), document.body) : h;
 };
 export {
-  W as Affix
+  G as Affix
 };

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

@@ -1,5 +1,18 @@
 import { ReactNode, HTMLAttributes } from 'react';
 export type AffixPosition = 'top' | 'bottom';
+export type AffixLayoutInput = {
+    position: AffixPosition;
+    isFixed: boolean;
+    offset: number;
+    rectTop: number;
+    rectBottom: number;
+    viewportBottom: number;
+    measuredHeight: number;
+};
+export type AffixLayoutResult = {
+    isFixed: boolean;
+    placeholderHeight: number;
+};
 export interface AffixProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
     id?: string;
     children: ReactNode;

package/dist/components/Affix/Affix.utils.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("../../constants/numbers.const.cjs"),h=require("../../constants/generals.const.cjs"),a=(e,t)=>(e==null?void 0:e.offsetHeight)??t.offsetHeight??o.ZERO,g=e=>{const{position:t,isFixed:i,offset:r,rectTop:s,rectBottom:f,viewportBottom:u,measuredHeight:l}=e;return t===h.POSITION_TOP?!i&&s<=r?{isFixed:!0,placeholderHeight:l}:i&&s>r?{isFixed:!1,placeholderHeight:o.ZERO}:null:!i&&f>=u-r?{isFixed:!0,placeholderHeight:l}:i&&f<u-r?{isFixed:!1,placeholderHeight:o.ZERO}:null};exports.resolveAffixHeight=a;exports.resolveAffixLayoutChange=g;

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

@@ -0,0 +1,3 @@
+import { AffixLayoutInput, AffixLayoutResult } from './Affix.types';
+export declare const resolveAffixHeight: (contentEl: HTMLElement | null, placeholderEl: HTMLElement) => number;
+export declare const resolveAffixLayoutChange: (input: AffixLayoutInput) => AffixLayoutResult | null;

package/dist/components/Affix/Affix.utils.js

@@ -0,0 +1,10 @@
+import { ZERO as o } from "../../constants/numbers.const.js";
+import { POSITION_TOP as u } from "../../constants/generals.const.js";
+const a = (e, t) => (e == null ? void 0 : e.offsetHeight) ?? t.offsetHeight ?? o, g = (e) => {
+  const { position: t, isFixed: i, offset: r, rectTop: f, rectBottom: s, viewportBottom: h, measuredHeight: l } = e;
+  return t === u ? !i && f <= r ? { isFixed: !0, placeholderHeight: l } : i && f > r ? { isFixed: !1, placeholderHeight: o } : null : !i && s >= h - r ? { isFixed: !0, placeholderHeight: l } : i && s < h - r ? { isFixed: !1, placeholderHeight: o } : null;
+};
+export {
+  a as resolveAffixHeight,
+  g as resolveAffixLayoutChange
+};

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

@@ -1,2 +1,2 @@
 export { Affix, default } from './Affix';
-export type { AffixProps, AffixPosition } from './Affix.types';
+export type { AffixProps, AffixPosition, AffixLayoutInput, AffixLayoutResult } from './Affix.types';

package/dist/components/Alert/Alert.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),_=require("react"),x=require("../../utils/cn.cjs"),r=require("./Alert.const.cjs"),m={success:e.jsxs("svg",{width:20,height:20,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:2,"aria-hidden":"true",children:[e.jsx("path",{d:"M22 11.08V12a10 10 0 1 1-5.93-9.14"}),e.jsx("polyline",{points:"22 4 12 14.01 9 11.01"})]}),info:e.jsxs("svg",{width:20,height:20,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:2,"aria-hidden":"true",children:[e.jsx("circle",{cx:"12",cy:"12",r:"10"}),e.jsx("line",{x1:"12",y1:"16",x2:"12",y2:"12"}),e.jsx("line",{x1:"12",y1:"8",x2:"12.01",y2:"8"})]}),warning:e.jsxs("svg",{width:20,height:20,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:2,"aria-hidden":"true",children:[e.jsx("path",{d:"M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"}),e.jsx("line",{x1:"12",y1:"9",x2:"12",y2:"13"}),e.jsx("line",{x1:"12",y1:"17",x2:"12.01",y2:"17"})]}),error:e.jsxs("svg",{width:20,height:20,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:2,"aria-hidden":"true",children:[e.jsx("circle",{cx:"12",cy:"12",r:"10"}),e.jsx("line",{x1:"15",y1:"9",x2:"9",y2:"15"}),e.jsx("line",{x1:"9",y1:"9",x2:"15",y2:"15"})]})},w=()=>e.jsxs("svg",{width:18,height:18,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:2,"aria-hidden":"true",children:[e.jsx("line",{x1:"18",y1:"6",x2:"6",y2:"18"}),e.jsx("line",{x1:"6",y1:"6",x2:"18",y2:"18"})]}),k=h=>{const{severity:t=r.ALERT_DEFAULTS.SEVERITY,variant:a=r.ALERT_DEFAULTS.VARIANT,title:l,icon:n=r.ALERT_DEFAULTS.SHOW_ICON,action:c,closable:u=r.ALERT_DEFAULTS.CLOSABLE,onClose:i,children:d,className:v,testId:g,...j}=h,[f,y]=_.useState(!0);if(!f)return null;const o=a==="filled",s={success:{bg:"var(--bear-success-50)",border:"var(--bear-success-500)",text:"var(--bear-success-800)",icon:"var(--bear-success-600)"},info:{bg:"var(--bear-info-50)",border:"var(--bear-info-500)",text:"var(--bear-info-800)",icon:"var(--bear-info-600)"},warning:{bg:"var(--bear-warning-50)",border:"var(--bear-warning-500)",text:"var(--bear-warning-800)",icon:"var(--bear-warning-600)"},error:{bg:"var(--bear-danger-50)",border:"var(--bear-danger-500)",text:"var(--bear-danger-800)",icon:"var(--bear-danger-600)"}}[t],A=()=>{y(!1),i==null||i()},b=()=>n===!1?null:n!==!0?n:m[t];return e.jsxs("div",{role:"alert","aria-live":"polite",className:x.cn("Bear-Alert","bear-flex bear-items-start bear-gap-3 bear-p-4 bear-rounded-lg",r.ALERT_VARIANT_CLASSES[a](t),v),style:{backgroundColor:o?void 0:s.bg,borderColor:a==="outlined"?s.border:void 0,color:o?void 0:s.text},"data-testid":g,...j,children:[b()&&e.jsx("span",{className:"Bear-Alert__icon bear-flex-shrink-0 bear-mt-0.5",style:{color:o?"currentColor":s.icon},children:b()}),e.jsxs("div",{className:"Bear-Alert__content bear-flex-1 bear-min-w-0",children:[l&&e.jsx("div",{className:"Bear-Alert__title bear-font-semibold bear-mb-1",children:l}),d&&e.jsx("div",{className:"Bear-Alert__message bear-text-sm",children:d})]}),c&&e.jsx("div",{className:"Bear-Alert__action bear-flex-shrink-0",children:c}),u&&e.jsx("button",{type:"button",onClick:A,className:x.cn("Bear-Alert__close","bear-flex-shrink-0 bear-p-1 bear-rounded hover:bear-bg-black/10 bear-transition-colors","bear-bg-transparent bear-border-none bear-cursor-pointer"),"aria-label":"Close alert",children:e.jsx(w,{})})]})};exports.Alert=k;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),h=require("react"),e=require("../../constants/generals.const.cjs"),R=require("../../utils/cn.cjs"),i=require("../Box/Box.cjs"),g=require("../Button/Button.cjs"),j=require("../Flex/Flex.cjs"),t=require("@forgedevstack/bear-icons"),b=require("../Typography/Typography.cjs"),x=require("./Alert.const.cjs"),S=I=>{const{severity:s=e.INFO,variant:o=e.VARIANT_STANDARD,title:A,icon:a=e.BOOLEAN_TRUE,action:u,closable:B=e.BOOLEAN_FALSE,onClose:c,children:_,className:E,testId:N,...L}=I,[O,T]=h.useState(e.BOOLEAN_TRUE);if(!O)return null;const l=o===e.VARIANT_FILLED,n=x.ALERT_SEVERITY_COLORS[s],m=()=>{T(e.BOOLEAN_FALSE),c==null||c()},d=a===e.BOOLEAN_FALSE?null:a!==e.BOOLEAN_TRUE?a:s===e.INFO?r.jsx(t.InfoIcon,{}):s==="success"?r.jsx(t.BearIcons.CheckCircleIcon,{}):s==="warning"?r.jsx(t.BearIcons.WarningIcon,{}):r.jsx(t.BearIcons.ErrorIcon,{});return r.jsxs(j.Flex,{role:"alert","aria-live":"polite",className:R.cn("Bear-Alert bear-items-start bear-gap-3 bear-p-4 bear-rounded-lg",x.ALERT_VARIANT_CLASSES[o](s),E),style:{backgroundColor:l?void 0:n.bg,borderColor:o===e.VARIANT_OUTLINED?n.border:void 0,color:l?void 0:n.text},"data-testid":N,...L,children:[d&&r.jsx(i.Box,{as:"span",className:"Bear-Alert__icon bear-flex-shrink-0 bear-mt-0.5",style:{color:l?"currentColor":n.icon},children:d}),r.jsxs(i.Box,{className:"Bear-Alert__content bear-flex-1 bear-min-w-0",children:[A&&r.jsx(b.Typography,{weight:"semibold",className:"Bear-Alert__title bear-mb-1",children:A}),_&&r.jsx(b.Typography,{className:"Bear-Alert__message bear-text-sm",children:_})]}),u&&r.jsx(i.Box,{className:"Bear-Alert__action bear-flex-shrink-0",children:u}),B&&r.jsx(g.Button,{variant:e.VARIANT_GHOST,onClick:m,className:"Bear-Alert__close bear-flex-shrink-0 bear-p-1","aria-label":e.LABEL_CLOSE_ALERT,children:r.jsx(t.CloseIcon,{})})]})};exports.Alert=S;

package/dist/components/Alert/Alert.const.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("../../utils/cn.cjs");require("react");const a={filled:e=>r.cn("bear-text-white bear-alert-filled",e==="success"&&"bear-alert-filled-success",e==="info"&&"bear-alert-filled-info",e==="warning"&&"bear-alert-filled-warning",e==="error"&&"bear-alert-filled-error"),outlined:()=>"bear-bg-transparent bear-border",standard:()=>""},l={SEVERITY:"info",VARIANT:"standard",SHOW_ICON:!0,CLOSABLE:!1};exports.ALERT_DEFAULTS=l;exports.ALERT_VARIANT_CLASSES=a;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../utils/cn.cjs");require("react");const a={success:{bg:"var(--bear-success-50)",border:"var(--bear-success-500)",text:"var(--bear-success-800)",icon:"var(--bear-success-600)"},info:{bg:"var(--bear-info-50)",border:"var(--bear-info-500)",text:"var(--bear-info-800)",icon:"var(--bear-info-600)"},warning:{bg:"var(--bear-warning-50)",border:"var(--bear-warning-500)",text:"var(--bear-warning-800)",icon:"var(--bear-warning-600)"},error:{bg:"var(--bear-danger-50)",border:"var(--bear-danger-500)",text:"var(--bear-danger-800)",icon:"var(--bear-danger-600)"}},n={filled:r=>e.cn("bear-text-white bear-alert-filled",r==="success"&&"bear-alert-filled-success",r==="info"&&"bear-alert-filled-info",r==="warning"&&"bear-alert-filled-warning",r==="error"&&"bear-alert-filled-error"),outlined:()=>"bear-bg-transparent bear-border",standard:()=>""};exports.ALERT_SEVERITY_COLORS=a;exports.ALERT_VARIANT_CLASSES=n;

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

@@ -1,8 +1,4 @@
 import { AlertSeverity, AlertVariant } from './Alert.types';
-/**
- * Alert severity colors using CSS variables for theme support
- * These map to the theme's success, info, warning, and danger color scales
- */
 export declare const ALERT_SEVERITY_COLORS: Record<AlertSeverity, {
     bg: string;
     border: string;
@@ -10,9 +6,3 @@ export declare const ALERT_SEVERITY_COLORS: Record<AlertSeverity, {
     icon: string;
 }>;
 export declare const ALERT_VARIANT_CLASSES: Record<AlertVariant, (severity: AlertSeverity) => string>;
-export declare const ALERT_DEFAULTS: {
-    SEVERITY: AlertSeverity;
-    VARIANT: AlertVariant;
-    SHOW_ICON: boolean;
-    CLOSABLE: boolean;
-};

package/dist/components/Alert/Alert.const.js

@@ -1,7 +1,32 @@
-import { cn as e } from "../../utils/cn.js";
+import { cn as a } from "../../utils/cn.js";
 import "react";
-const t = {
-  filled: (r) => e(
+const b = {
+  success: {
+    bg: "var(--bear-success-50)",
+    border: "var(--bear-success-500)",
+    text: "var(--bear-success-800)",
+    icon: "var(--bear-success-600)"
+  },
+  info: {
+    bg: "var(--bear-info-50)",
+    border: "var(--bear-info-500)",
+    text: "var(--bear-info-800)",
+    icon: "var(--bear-info-600)"
+  },
+  warning: {
+    bg: "var(--bear-warning-50)",
+    border: "var(--bear-warning-500)",
+    text: "var(--bear-warning-800)",
+    icon: "var(--bear-warning-600)"
+  },
+  error: {
+    bg: "var(--bear-danger-50)",
+    border: "var(--bear-danger-500)",
+    text: "var(--bear-danger-800)",
+    icon: "var(--bear-danger-600)"
+  }
+}, o = {
+  filled: (r) => a(
     "bear-text-white bear-alert-filled",
     r === "success" && "bear-alert-filled-success",
     r === "info" && "bear-alert-filled-info",
@@ -10,13 +35,8 @@ const t = {
   ),
   outlined: () => "bear-bg-transparent bear-border",
   standard: () => ""
-}, n = {
-  SEVERITY: "info",
-  VARIANT: "standard",
-  SHOW_ICON: !0,
-  CLOSABLE: !1
 };
 export {
-  n as ALERT_DEFAULTS,
-  t as ALERT_VARIANT_CLASSES
+  b as ALERT_SEVERITY_COLORS,
+  o as ALERT_VARIANT_CLASSES
 };