@forgedevstack/bear 1.3.4 → 1.3.6

package/dist/components/ToggleGroup/ToggleGroup.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const P=require("react/jsx-runtime"),O=require("react"),v=require("../../utils/cn.cjs"),H=require("../../utils/generateBearId.utils.cjs"),Z=require("../../utils/useBearId.cjs"),F=require("./ToggleGroup.context.cjs"),t=require("./ToggleGroup.const.cjs"),T=require("../../constants/numbers.const.cjs"),E=require("../../constants/generals.const.cjs"),z=R=>{const{type:n=t.TOGGLE_GROUP_TYPE_SINGLE,value:g,defaultValue:I,onChange:s,onValueChange:l,orientation:G=t.TOGGLE_GROUP_ORIENTATION_HORIZONTAL,size:f=t.TOGGLE_GROUP_DEFAULT_SIZE,variant:L=t.TOGGLE_GROUP_DEFAULT_VARIANT,disabled:a=!1,fullWidth:A=!1,className:y,children:S,id:p,testId:U,...b}=R,x=Z.useBearId(t.COMPONENT_NAME_TOGGLE_GROUP),w=H.resolveBearId(p,x),[M,q]=O.useState(()=>n===t.TOGGLE_GROUP_TYPE_SINGLE?I??E.EMPTY_STRING:E.EMPTY_STRING),[m,Y]=O.useState(()=>n===t.TOGGLE_GROUP_TYPE_MULTIPLE?I??[]:[]),_=g!==void 0,c=_?g:n===t.TOGGLE_GROUP_TYPE_SINGLE?M:m,k=e=>{if(!a)if(n===t.TOGGLE_GROUP_TYPE_SINGLE){const r=c===e?E.EMPTY_STRING:e;_||q(r),s==null||s(r),l==null||l(r)}else{const r=Array.isArray(c)?c:[],o=r.includes(e)?r.filter(i=>i!==e):[...r,e];_||Y(o),s==null||s(o),l==null||l(o)}},B=O.useMemo(()=>({type:n,value:c,onItemToggle:k,size:f,variant:L,disabled:a}),[n,c,f,L,a]),D=e=>{var N;const r=e.target;if(!r||r.getAttribute("role")!=="radio")return;const o=Array.from(e.currentTarget.querySelectorAll('button[role="radio"]:not([disabled])')),i=o.indexOf(r);if(i===-1)return;const d=G===t.TOGGLE_GROUP_ORIENTATION_HORIZONTAL,h=d&&e.key==="ArrowRight"||!d&&e.key==="ArrowDown",j=d&&e.key==="ArrowLeft"||!d&&e.key==="ArrowUp";let u=i;if(h)u=(i+T.ONE)%o.length;else if(j)u=(i-T.ONE+o.length)%o.length;else if(e.key==="Home")u=T.ZERO;else if(e.key==="End")u=o.length-T.ONE;else return;e.preventDefault(),(N=o[u])==null||N.focus()};return P.jsx(F.ToggleGroupContext.Provider,{value:B,children:P.jsx("div",{id:w,"data-testid":U,role:"group","aria-orientation":G,onKeyDown:D,className:v.cn("Bear-ToggleGroup","inline-flex items-center gap-1 rounded-lg border border-[var(--bear-border-subtle)] bg-[var(--bear-surface-base)] p-1",t.ORIENTATION_CLASS_MAP[G],A&&"w-full justify-stretch",a&&"opacity-60 cursor-not-allowed",y),...b,children:S})})};exports.ToggleGroup=z;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const R=require("react/jsx-runtime"),G=require("react"),v=require("../../utils/cn.cjs"),H=require("../../utils/generateBearId.utils.cjs"),Z=require("../../utils/useBearId.cjs"),F=require("./ToggleGroup.context.cjs"),t=require("./ToggleGroup.const.cjs"),_=require("../../constants/numbers.const.cjs"),E=require("../../constants/generals.const.cjs"),z=A=>{const{type:n=t.TOGGLE_GROUP_TYPE_SINGLE,value:g,defaultValue:f,onChange:s,onValueChange:l,orientation:O=t.TOGGLE_GROUP_ORIENTATION_HORIZONTAL,size:I=t.TOGGLE_GROUP_DEFAULT_SIZE,variant:L=t.TOGGLE_GROUP_DEFAULT_VARIANT,disabled:u=!1,fullWidth:y=!1,className:S,children:b,id:p,testId:U,...x}=A,w=Z.useBearId(t.COMPONENT_NAME_TOGGLE_GROUP),M=H.resolveBearId(p,w),[q,m]=G.useState(()=>n===t.TOGGLE_GROUP_TYPE_SINGLE?f??E.EMPTY_STRING:E.EMPTY_STRING),[k,Y]=G.useState(()=>n===t.TOGGLE_GROUP_TYPE_MULTIPLE?f??[]:[]),d=g!==void 0,i=d?g:n===t.TOGGLE_GROUP_TYPE_SINGLE?q:k,N=G.useCallback(e=>{if(!u)if(n===t.TOGGLE_GROUP_TYPE_SINGLE){const r=i===e?E.EMPTY_STRING:e;d||m(r),s==null||s(r),l==null||l(r)}else{const r=Array.isArray(i)?i:[],o=r.includes(e)?r.filter(c=>c!==e):[...r,e];d||Y(o),s==null||s(o),l==null||l(o)}},[u,n,i,d,s,l]),B=G.useMemo(()=>({type:n,value:i,onItemToggle:N,size:I,variant:L,disabled:u}),[n,i,N,I,L,u]),D=e=>{var P;const r=e.target;if(!r||r.getAttribute("role")!=="radio")return;const o=Array.from(e.currentTarget.querySelectorAll('button[role="radio"]:not([disabled])')),c=o.indexOf(r);if(c===-1)return;const T=O===t.TOGGLE_GROUP_ORIENTATION_HORIZONTAL,h=T&&e.key==="ArrowRight"||!T&&e.key==="ArrowDown",j=T&&e.key==="ArrowLeft"||!T&&e.key==="ArrowUp";let a=c;if(h)a=(c+_.ONE)%o.length;else if(j)a=(c-_.ONE+o.length)%o.length;else if(e.key==="Home")a=_.ZERO;else if(e.key==="End")a=o.length-_.ONE;else return;e.preventDefault(),(P=o[a])==null||P.focus()};return R.jsx(F.ToggleGroupContext.Provider,{value:B,children:R.jsx("div",{id:M,"data-testid":U,role:"group","aria-orientation":O,onKeyDown:D,className:v.cn("Bear-ToggleGroup","inline-flex max-w-full items-center gap-1 rounded-lg border border-[var(--bear-border-subtle)] bg-[var(--bear-surface-base)] p-1",t.ORIENTATION_CLASS_MAP[O],y&&"w-full justify-stretch",u&&"opacity-60 cursor-not-allowed",S),...x,children:b})})};exports.ToggleGroup=z;

package/dist/components/ToggleGroup/ToggleGroup.js

@@ -1,82 +1,85 @@
-import { jsx as A } from "react/jsx-runtime";
-import { useState as I, useMemo as Z } from "react";
-import { cn as j } from "../../utils/cn.js";
-import { resolveBearId as z } from "../../utils/generateBearId.utils.js";
-import { useBearId as K } from "../../utils/useBearId.js";
-import { ToggleGroupContext as q } from "./ToggleGroup.context.js";
-import { TOGGLE_GROUP_TYPE_SINGLE as u, TOGGLE_GROUP_ORIENTATION_HORIZONTAL as L, TOGGLE_GROUP_DEFAULT_SIZE as W, TOGGLE_GROUP_DEFAULT_VARIANT as J, COMPONENT_NAME_TOGGLE_GROUP as Q, TOGGLE_GROUP_TYPE_MULTIPLE as X, ORIENTATION_CLASS_MAP as $ } from "./ToggleGroup.const.js";
+import { jsx as I } from "react/jsx-runtime";
+import { useState as L, useCallback as Z, useMemo as j } from "react";
+import { cn as z } from "../../utils/cn.js";
+import { resolveBearId as K } from "../../utils/generateBearId.utils.js";
+import { useBearId as q } from "../../utils/useBearId.js";
+import { ToggleGroupContext as W } from "./ToggleGroup.context.js";
+import { TOGGLE_GROUP_TYPE_SINGLE as f, TOGGLE_GROUP_ORIENTATION_HORIZONTAL as y, TOGGLE_GROUP_DEFAULT_SIZE as J, TOGGLE_GROUP_DEFAULT_VARIANT as Q, COMPONENT_NAME_TOGGLE_GROUP as X, TOGGLE_GROUP_TYPE_MULTIPLE as $, ORIENTATION_CLASS_MAP as C } from "./ToggleGroup.const.js";
 import { ONE as m, ZERO as V } from "../../constants/numbers.const.js";
 import { EMPTY_STRING as G } from "../../constants/generals.const.js";
-const dr = (y) => {
+const dr = (N) => {
   const {
-    type: o = u,
+    type: o = f,
     value: O,
     defaultValue: p,
     onChange: l,
     onValueChange: n,
-    orientation: f = L,
-    size: E = W,
-    variant: _ = J,
+    orientation: T = y,
+    size: E = J,
+    variant: _ = Q,
     disabled: c = !1,
-    fullWidth: N = !1,
+    fullWidth: b = !1,
     className: P,
     children: R,
-    id: b,
-    testId: U,
-    ...w
-  } = y, x = K(Q), S = z(b, x), [M, k] = I(() => o === u ? p ?? G : G), [D, h] = I(() => o === X ? p ?? [] : []), T = O !== void 0, i = T ? O : o === u ? M : D, B = (r) => {
-    if (!c)
-      if (o === u) {
-        const e = i === r ? G : r;
-        T || k(e), l == null || l(e), n == null || n(e);
-      } else {
-        const e = Array.isArray(i) ? i : [], t = e.includes(r) ? e.filter((s) => s !== r) : [...e, r];
-        T || h(t), l == null || l(t), n == null || n(t);
-      }
-  }, v = Z(
+    id: w,
+    testId: x,
+    ...U
+  } = N, S = q(X), k = K(w, S), [M, D] = L(() => o === f ? p ?? G : G), [h, B] = L(() => o === $ ? p ?? [] : []), a = O !== void 0, s = a ? O : o === f ? M : h, g = Z(
+    (r) => {
+      if (!c)
+        if (o === f) {
+          const e = s === r ? G : r;
+          a || D(e), l == null || l(e), n == null || n(e);
+        } else {
+          const e = Array.isArray(s) ? s : [], t = e.includes(r) ? e.filter((i) => i !== r) : [...e, r];
+          a || B(t), l == null || l(t), n == null || n(t);
+        }
+    },
+    [c, o, s, a, l, n]
+  ), v = j(
     () => ({
       type: o,
-      value: i,
-      onItemToggle: B,
+      value: s,
+      onItemToggle: g,
       size: E,
       variant: _,
       disabled: c
     }),
-    [o, i, E, _, c]
+    [o, s, g, E, _, c]
   ), F = (r) => {
-    var g;
+    var A;
     const e = r.target;
     if (!e || e.getAttribute("role") !== "radio") return;
     const t = Array.from(
       r.currentTarget.querySelectorAll('button[role="radio"]:not([disabled])')
-    ), s = t.indexOf(e);
-    if (s === -1) return;
-    const a = f === L, H = a && r.key === "ArrowRight" || !a && r.key === "ArrowDown", Y = a && r.key === "ArrowLeft" || !a && r.key === "ArrowUp";
-    let d = s;
-    if (H) d = (s + m) % t.length;
-    else if (Y) d = (s - m + t.length) % t.length;
+    ), i = t.indexOf(e);
+    if (i === -1) return;
+    const u = T === y, H = u && r.key === "ArrowRight" || !u && r.key === "ArrowDown", Y = u && r.key === "ArrowLeft" || !u && r.key === "ArrowUp";
+    let d = i;
+    if (H) d = (i + m) % t.length;
+    else if (Y) d = (i - m + t.length) % t.length;
     else if (r.key === "Home") d = V;
     else if (r.key === "End") d = t.length - m;
     else return;
-    r.preventDefault(), (g = t[d]) == null || g.focus();
+    r.preventDefault(), (A = t[d]) == null || A.focus();
   };
-  return /* @__PURE__ */ A(q.Provider, { value: v, children: /* @__PURE__ */ A(
+  return /* @__PURE__ */ I(W.Provider, { value: v, children: /* @__PURE__ */ I(
     "div",
     {
-      id: S,
-      "data-testid": U,
+      id: k,
+      "data-testid": x,
       role: "group",
-      "aria-orientation": f,
+      "aria-orientation": T,
       onKeyDown: F,
-      className: j(
+      className: z(
         "Bear-ToggleGroup",
-        "inline-flex items-center gap-1 rounded-lg border border-[var(--bear-border-subtle)] bg-[var(--bear-surface-base)] p-1",
-        $[f],
-        N && "w-full justify-stretch",
+        "inline-flex max-w-full items-center gap-1 rounded-lg border border-[var(--bear-border-subtle)] bg-[var(--bear-surface-base)] p-1",
+        C[T],
+        b && "w-full justify-stretch",
         c && "opacity-60 cursor-not-allowed",
         P
       ),
-      ...w,
+      ...U,
       children: R
     }
   ) });

package/dist/components/Tooltip/Tooltip.const.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const T=require("../../constants/numbers.const.cjs"),O={scale:"animate-scale-in",fade:"animate-fade-in","slide-down":"animate-grow-up",fold:"animate-alert-dialog-in",none:""},I=T.TWO_HUNDRED,P=T.EIGHT,_=T.EIGHT,t="top",L="bottom",n="left",e="right";exports.TOOLTIP_DEFAULT_DELAY=I;exports.TOOLTIP_EFFECT_CLASS_MAP=O;exports.TOOLTIP_POSITION_BOTTOM=L;exports.TOOLTIP_POSITION_LEFT=n;exports.TOOLTIP_POSITION_RIGHT=e;exports.TOOLTIP_POSITION_TOP=t;exports.TOOLTIP_SPACING=P;exports.TOOLTIP_VIEWPORT_PADDING=_;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const T=require("../../constants/numbers.const.cjs"),O=require("../OverlayPortal/OverlayPortal.const.cjs"),I=O.OVERLAY_EFFECT_CLASS_MAP,_=T.TWO_HUNDRED,P=T.EIGHT,L=T.EIGHT,t="top",o="bottom",E="left",S="right";exports.TOOLTIP_DEFAULT_DELAY=_;exports.TOOLTIP_EFFECT_CLASS_MAP=I;exports.TOOLTIP_POSITION_BOTTOM=o;exports.TOOLTIP_POSITION_LEFT=E;exports.TOOLTIP_POSITION_RIGHT=S;exports.TOOLTIP_POSITION_TOP=t;exports.TOOLTIP_SPACING=P;exports.TOOLTIP_VIEWPORT_PADDING=L;

package/dist/components/Tooltip/Tooltip.const.js

@@ -1,18 +1,13 @@
 import { TWO_HUNDRED as O, EIGHT as T } from "../../constants/numbers.const.js";
-const t = {
-  scale: "animate-scale-in",
-  fade: "animate-fade-in",
-  "slide-down": "animate-grow-up",
-  fold: "animate-alert-dialog-in",
-  none: ""
-}, o = O, n = T, P = T, _ = "top", a = "bottom", e = "left", L = "right";
+import { OVERLAY_EFFECT_CLASS_MAP as I } from "../OverlayPortal/OverlayPortal.const.js";
+const o = I, t = O, L = T, E = T, A = "top", S = "bottom", c = "left", n = "right";
 export {
-  o as TOOLTIP_DEFAULT_DELAY,
-  t as TOOLTIP_EFFECT_CLASS_MAP,
-  a as TOOLTIP_POSITION_BOTTOM,
-  e as TOOLTIP_POSITION_LEFT,
-  L as TOOLTIP_POSITION_RIGHT,
-  _ as TOOLTIP_POSITION_TOP,
-  n as TOOLTIP_SPACING,
-  P as TOOLTIP_VIEWPORT_PADDING
+  t as TOOLTIP_DEFAULT_DELAY,
+  o as TOOLTIP_EFFECT_CLASS_MAP,
+  S as TOOLTIP_POSITION_BOTTOM,
+  c as TOOLTIP_POSITION_LEFT,
+  n as TOOLTIP_POSITION_RIGHT,
+  A as TOOLTIP_POSITION_TOP,
+  L as TOOLTIP_SPACING,
+  E as TOOLTIP_VIEWPORT_PADDING
 };

package/dist/components/Transition/Transition.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react"),P=require("../../utils/cn.cjs"),q=require("./Transition.const.cjs"),$=({show:u,name:F="fade",duration:i=q.DEFAULT_DURATION,delay:n=0,easing:y=q.DEFAULT_EASING,enterFrom:l,enterTo:o,leaveFrom:f,leaveTo:I,unmountOnHide:T=!0,onEnter:m,onEntered:d,onLeave:c,onLeft:S,children:v,className:N,as:A="div"})=>{const[M,R]=s.useState(u),[b,a]=s.useState(u?"idle":"exit-active"),e=s.useRef(null),x=s.useRef(!1);if(s.useEffect(()=>{if(e.current&&clearTimeout(e.current),!(!x.current&&(x.current=!0,!u)))return u?(R(!0),a("enter"),m==null||m(),requestAnimationFrame(()=>{requestAnimationFrame(()=>{a("enter-active"),e.current=setTimeout(()=>{a("idle"),d==null||d()},i+n)})})):(a("exit"),c==null||c(),requestAnimationFrame(()=>{requestAnimationFrame(()=>{a("exit-active"),e.current=setTimeout(()=>{T&&R(!1),S==null||S()},i+n)})})),()=>{e.current&&clearTimeout(e.current)}},[u]),!M&&T)return null;const t=q.TRANSITION_PRESETS[F];let r={transition:`all ${i}ms ${y} ${n}ms`};switch(b){case"enter":r={...r,...l??(t==null?void 0:t.enter)};break;case"enter-active":case"idle":r={...r,...o??(t==null?void 0:t.enterActive)};break;case"exit":r={...r,...f??(t==null?void 0:t.exit)};break;case"exit-active":r={...r,...I??(t==null?void 0:t.exitActive)};break}return s.createElement(A,{className:P.cn(N),style:r},v)},g=({children:u,initial:F,animate:i,exit:n,transition:y={},whileHover:l,whileTap:o,inView:f=!0,as:I="div",className:T,testId:m})=>{const[d,c]=s.useState(F??{}),[S,v]=s.useState(!1),[N,A]=s.useState(!1),M=s.useRef(!1),{duration:R=300,delay:b=0,easing:a=q.DEFAULT_EASING}=y;s.useEffect(()=>{M.current?f&&i?c(i):!f&&n&&c(n):(M.current=!0,requestAnimationFrame(()=>{f&&i&&c(i)}))},[f]);let e={...d,transition:`all ${R}ms ${a} ${b}ms`};return N&&o?e={...e,...o}:S&&l&&(e={...e,...l}),s.createElement(I,{className:P.cn(T),style:e,"data-testid":m,onMouseEnter:l?()=>v(!0):void 0,onMouseLeave:l?()=>{v(!1),A(!1)}:void 0,onMouseDown:o?()=>A(!0):void 0,onMouseUp:o?()=>A(!1):void 0},u)};exports.Motion=g;exports.Transition=$;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react"),g=require("../../utils/cn.cjs"),q=require("./Transition.const.cjs"),U=({show:u,name:y="fade",duration:r=q.DEFAULT_DURATION,delay:a=0,easing:F=q.DEFAULT_EASING,enterFrom:n,enterTo:l,leaveFrom:o,leaveTo:I,unmountOnHide:v=!0,onEnter:m,onEntered:d,onLeave:c,onLeft:S,children:M,className:N,style:A,nodeRef:R,elementProps:b,as:x="div"})=>{const[P,i]=t.useState(u),[D,T]=t.useState(u?"enter":"exit-active"),f=t.useRef(null),$=t.useRef(!1);if(t.useEffect(()=>{if(f.current&&clearTimeout(f.current),!(!$.current&&($.current=!0,!u)))return u?(i(!0),T("enter"),m==null||m(),requestAnimationFrame(()=>{requestAnimationFrame(()=>{T("enter-active"),f.current=setTimeout(()=>{T("idle"),d==null||d()},r+a)})})):(T("exit"),c==null||c(),requestAnimationFrame(()=>{requestAnimationFrame(()=>{T("exit-active"),f.current=setTimeout(()=>{v&&i(!1),S==null||S()},r+a)})})),()=>{f.current&&clearTimeout(f.current)}},[u]),!P&&v)return null;const e=q.TRANSITION_PRESETS[y];let s={transition:`all ${r}ms ${F} ${a}ms`};switch(D){case"enter":s={...s,...n??(e==null?void 0:e.enter)};break;case"enter-active":case"idle":s={...s,...l??(e==null?void 0:e.enterActive)};break;case"exit":s={...s,...o??(e==null?void 0:e.exit)};break;case"exit-active":s={...s,...I??(e==null?void 0:e.exitActive)};break}return t.createElement(x,{ref:R,className:g.cn(N),style:{...A,...s},...b},M)},_=({children:u,initial:y,animate:r,exit:a,transition:F={},whileHover:n,whileTap:l,inView:o=!0,as:I="div",className:v,testId:m})=>{const[d,c]=t.useState(y??{}),[S,M]=t.useState(!1),[N,A]=t.useState(!1),R=t.useRef(!1),{duration:b=300,delay:x=0,easing:P=q.DEFAULT_EASING}=F;t.useEffect(()=>{R.current?o&&r?c(r):!o&&a&&c(a):(R.current=!0,requestAnimationFrame(()=>{o&&r&&c(r)}))},[o]);let i={...d,transition:`all ${b}ms ${P} ${x}ms`};return N&&l?i={...i,...l}:S&&n&&(i={...i,...n}),t.createElement(I,{className:g.cn(v),style:i,"data-testid":m,onMouseEnter:n?()=>M(!0):void 0,onMouseLeave:n?()=>{M(!1),A(!1)}:void 0,onMouseDown:l?()=>A(!0):void 0,onMouseUp:l?()=>A(!1):void 0},u)};exports.Motion=_;exports.Transition=U;

package/dist/components/Transition/Transition.const.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=300,e="cubic-bezier(0.4, 0, 0.2, 1)",r={fade:{enter:{opacity:0},enterActive:{opacity:1},exit:{opacity:1},exitActive:{opacity:0}},"slide-up":{enter:{opacity:0,transform:"translateY(16px)"},enterActive:{opacity:1,transform:"translateY(0)"},exit:{opacity:1,transform:"translateY(0)"},exitActive:{opacity:0,transform:"translateY(16px)"}},"slide-down":{enter:{opacity:0,transform:"translateY(-16px)"},enterActive:{opacity:1,transform:"translateY(0)"},exit:{opacity:1,transform:"translateY(0)"},exitActive:{opacity:0,transform:"translateY(-16px)"}},"slide-left":{enter:{opacity:0,transform:"translateX(-16px)"},enterActive:{opacity:1,transform:"translateX(0)"},exit:{opacity:1,transform:"translateX(0)"},exitActive:{opacity:0,transform:"translateX(-16px)"}},"slide-right":{enter:{opacity:0,transform:"translateX(16px)"},enterActive:{opacity:1,transform:"translateX(0)"},exit:{opacity:1,transform:"translateX(0)"},exitActive:{opacity:0,transform:"translateX(16px)"}},scale:{enter:{opacity:0,transform:"scale(0.9)"},enterActive:{opacity:1,transform:"scale(1)"},exit:{opacity:1,transform:"scale(1)"},exitActive:{opacity:0,transform:"scale(0.9)"}},"scale-y":{enter:{opacity:0,transform:"scaleY(0.02)",transformOrigin:"top center"},enterActive:{opacity:1,transform:"scaleY(1)",transformOrigin:"top center"},exit:{opacity:1,transform:"scaleY(1)",transformOrigin:"top center"},exitActive:{opacity:0,transform:"scaleY(0.02)",transformOrigin:"top center"}},fold:{enter:{opacity:0,transform:"scaleY(0.02)",transformOrigin:"top center"},enterActive:{opacity:1,transform:"scaleY(1)",transformOrigin:"top center"},exit:{opacity:1,transform:"scaleY(1)",transformOrigin:"top center"},exitActive:{opacity:0,transform:"scaleY(0.02)",transformOrigin:"top center"}},"scale-x":{enter:{opacity:0,transform:"scaleX(0)"},enterActive:{opacity:1,transform:"scaleX(1)"},exit:{opacity:1,transform:"scaleX(1)"},exitActive:{opacity:0,transform:"scaleX(0)"}},rotate:{enter:{opacity:0,transform:"rotate(-90deg)"},enterActive:{opacity:1,transform:"rotate(0)"},exit:{opacity:1,transform:"rotate(0)"},exitActive:{opacity:0,transform:"rotate(90deg)"}},flip:{enter:{opacity:0,transform:"perspective(400px) rotateY(-90deg)"},enterActive:{opacity:1,transform:"perspective(400px) rotateY(0)"},exit:{opacity:1,transform:"perspective(400px) rotateY(0)"},exitActive:{opacity:0,transform:"perspective(400px) rotateY(90deg)"}},collapse:{enter:{height:"0px",overflow:"hidden",opacity:0},enterActive:{height:"auto",overflow:"hidden",opacity:1},exit:{height:"auto",overflow:"hidden",opacity:1},exitActive:{height:"0px",overflow:"hidden",opacity:0}}};exports.DEFAULT_DURATION=t;exports.DEFAULT_EASING=e;exports.TRANSITION_PRESETS=r;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=300,e="cubic-bezier(0.4, 0, 0.2, 1)",r={fade:{enter:{opacity:0},enterActive:{opacity:1},exit:{opacity:1},exitActive:{opacity:0}},"slide-up":{enter:{opacity:0,transform:"translateY(16px)"},enterActive:{opacity:1,transform:"translateY(0)"},exit:{opacity:1,transform:"translateY(0)"},exitActive:{opacity:0,transform:"translateY(16px)"}},"slide-down":{enter:{opacity:0,transform:"translateY(-16px)",transformOrigin:"top center"},enterActive:{opacity:1,transform:"translateY(0)",transformOrigin:"top center"},exit:{opacity:1,transform:"translateY(0)",transformOrigin:"top center"},exitActive:{opacity:0,transform:"translateY(-16px)",transformOrigin:"top center"}},"slide-left":{enter:{opacity:0,transform:"translateX(-16px)"},enterActive:{opacity:1,transform:"translateX(0)"},exit:{opacity:1,transform:"translateX(0)"},exitActive:{opacity:0,transform:"translateX(-16px)"}},"slide-right":{enter:{opacity:0,transform:"translateX(16px)"},enterActive:{opacity:1,transform:"translateX(0)"},exit:{opacity:1,transform:"translateX(0)"},exitActive:{opacity:0,transform:"translateX(16px)"}},scale:{enter:{opacity:0,transform:"scale(0.96)",transformOrigin:"top center"},enterActive:{opacity:1,transform:"scale(1)",transformOrigin:"top center"},exit:{opacity:1,transform:"scale(1)",transformOrigin:"top center"},exitActive:{opacity:0,transform:"scale(0.96)",transformOrigin:"top center"}},"scale-y":{enter:{opacity:0,transform:"scaleY(0.02)",transformOrigin:"top center"},enterActive:{opacity:1,transform:"scaleY(1)",transformOrigin:"top center"},exit:{opacity:1,transform:"scaleY(1)",transformOrigin:"top center"},exitActive:{opacity:0,transform:"scaleY(0.02)",transformOrigin:"top center"}},fold:{enter:{opacity:0,transform:"scaleY(0.02)",transformOrigin:"top center"},enterActive:{opacity:1,transform:"scaleY(1)",transformOrigin:"top center"},exit:{opacity:1,transform:"scaleY(1)",transformOrigin:"top center"},exitActive:{opacity:0,transform:"scaleY(0.02)",transformOrigin:"top center"}},elastic:{enter:{opacity:0,transform:"scale(1.12)",transformOrigin:"top center"},enterActive:{opacity:1,transform:"scale(1)",transformOrigin:"top center"},exit:{opacity:1,transform:"scale(1)",transformOrigin:"top center"},exitActive:{opacity:0,transform:"scale(1.12)",transformOrigin:"top center"}},reveal:{enter:{maxHeight:0,overflow:"hidden",opacity:0},enterActive:{maxHeight:"24rem",overflow:"hidden",opacity:1},exit:{maxHeight:"24rem",overflow:"hidden",opacity:1},exitActive:{maxHeight:0,overflow:"hidden",opacity:0}},expand:{enter:{maxHeight:0,overflow:"hidden",opacity:0,transformOrigin:"top center"},enterActive:{maxHeight:"24rem",overflow:"hidden",opacity:1,transformOrigin:"top center"},exit:{maxHeight:"24rem",overflow:"hidden",opacity:1,transformOrigin:"top center"},exitActive:{maxHeight:0,overflow:"hidden",opacity:0,transformOrigin:"top center"}},"scale-x":{enter:{opacity:0,transform:"scaleX(0)"},enterActive:{opacity:1,transform:"scaleX(1)"},exit:{opacity:1,transform:"scaleX(1)"},exitActive:{opacity:0,transform:"scaleX(0)"}},rotate:{enter:{opacity:0,transform:"rotate(-90deg)"},enterActive:{opacity:1,transform:"rotate(0)"},exit:{opacity:1,transform:"rotate(0)"},exitActive:{opacity:0,transform:"rotate(90deg)"}},flip:{enter:{opacity:0,transform:"perspective(400px) rotateY(-90deg)"},enterActive:{opacity:1,transform:"perspective(400px) rotateY(0)"},exit:{opacity:1,transform:"perspective(400px) rotateY(0)"},exitActive:{opacity:0,transform:"perspective(400px) rotateY(90deg)"}},collapse:{enter:{height:"0px",overflow:"hidden",opacity:0},enterActive:{height:"auto",overflow:"hidden",opacity:1},exit:{height:"auto",overflow:"hidden",opacity:1},exitActive:{height:"0px",overflow:"hidden",opacity:0}}};exports.DEFAULT_DURATION=t;exports.DEFAULT_EASING=e;exports.TRANSITION_PRESETS=r;

package/dist/components/Transition/Transition.const.js

@@ -12,10 +12,10 @@ const t = 300, e = "cubic-bezier(0.4, 0, 0.2, 1)", r = {
     exitActive: { opacity: 0, transform: "translateY(16px)" }
   },
   "slide-down": {
-    enter: { opacity: 0, transform: "translateY(-16px)" },
-    enterActive: { opacity: 1, transform: "translateY(0)" },
-    exit: { opacity: 1, transform: "translateY(0)" },
-    exitActive: { opacity: 0, transform: "translateY(-16px)" }
+    enter: { opacity: 0, transform: "translateY(-16px)", transformOrigin: "top center" },
+    enterActive: { opacity: 1, transform: "translateY(0)", transformOrigin: "top center" },
+    exit: { opacity: 1, transform: "translateY(0)", transformOrigin: "top center" },
+    exitActive: { opacity: 0, transform: "translateY(-16px)", transformOrigin: "top center" }
   },
   "slide-left": {
     enter: { opacity: 0, transform: "translateX(-16px)" },
@@ -30,10 +30,10 @@ const t = 300, e = "cubic-bezier(0.4, 0, 0.2, 1)", r = {
     exitActive: { opacity: 0, transform: "translateX(16px)" }
   },
   scale: {
-    enter: { opacity: 0, transform: "scale(0.9)" },
-    enterActive: { opacity: 1, transform: "scale(1)" },
-    exit: { opacity: 1, transform: "scale(1)" },
-    exitActive: { opacity: 0, transform: "scale(0.9)" }
+    enter: { opacity: 0, transform: "scale(0.96)", transformOrigin: "top center" },
+    enterActive: { opacity: 1, transform: "scale(1)", transformOrigin: "top center" },
+    exit: { opacity: 1, transform: "scale(1)", transformOrigin: "top center" },
+    exitActive: { opacity: 0, transform: "scale(0.96)", transformOrigin: "top center" }
   },
   "scale-y": {
     enter: { opacity: 0, transform: "scaleY(0.02)", transformOrigin: "top center" },
@@ -47,6 +47,24 @@ const t = 300, e = "cubic-bezier(0.4, 0, 0.2, 1)", r = {
     exit: { opacity: 1, transform: "scaleY(1)", transformOrigin: "top center" },
     exitActive: { opacity: 0, transform: "scaleY(0.02)", transformOrigin: "top center" }
   },
+  elastic: {
+    enter: { opacity: 0, transform: "scale(1.12)", transformOrigin: "top center" },
+    enterActive: { opacity: 1, transform: "scale(1)", transformOrigin: "top center" },
+    exit: { opacity: 1, transform: "scale(1)", transformOrigin: "top center" },
+    exitActive: { opacity: 0, transform: "scale(1.12)", transformOrigin: "top center" }
+  },
+  reveal: {
+    enter: { maxHeight: 0, overflow: "hidden", opacity: 0 },
+    enterActive: { maxHeight: "24rem", overflow: "hidden", opacity: 1 },
+    exit: { maxHeight: "24rem", overflow: "hidden", opacity: 1 },
+    exitActive: { maxHeight: 0, overflow: "hidden", opacity: 0 }
+  },
+  expand: {
+    enter: { maxHeight: 0, overflow: "hidden", opacity: 0, transformOrigin: "top center" },
+    enterActive: { maxHeight: "24rem", overflow: "hidden", opacity: 1, transformOrigin: "top center" },
+    exit: { maxHeight: "24rem", overflow: "hidden", opacity: 1, transformOrigin: "top center" },
+    exitActive: { maxHeight: 0, overflow: "hidden", opacity: 0, transformOrigin: "top center" }
+  },
   "scale-x": {
     enter: { opacity: 0, transform: "scaleX(0)" },
     enterActive: { opacity: 1, transform: "scaleX(1)" },

package/dist/components/Transition/Transition.js

@@ -1,110 +1,113 @@
-import { useState as v, useRef as q, useEffect as P, createElement as b } from "react";
-import { cn as k } from "../../utils/cn.js";
-import { DEFAULT_DURATION as U, TRANSITION_PRESETS as g, DEFAULT_EASING as D } from "./Transition.const.js";
-const O = ({
+import { useState as S, useRef as P, useEffect as k, createElement as D } from "react";
+import { cn as U } from "../../utils/cn.js";
+import { DEFAULT_DURATION as C, TRANSITION_PRESETS as G, DEFAULT_EASING as g } from "./Transition.const.js";
+const B = ({
   show: i,
   name: M = "fade",
-  duration: r = U,
-  delay: a = 0,
-  easing: I = D,
-  enterFrom: n,
-  enterTo: l,
-  leaveFrom: o,
-  leaveTo: N,
-  unmountOnHide: S = !0,
-  onEnter: m,
-  onEntered: f,
+  duration: s = C,
+  delay: u = 0,
+  easing: y = g,
+  enterFrom: a,
+  enterTo: n,
+  leaveFrom: l,
+  leaveTo: I,
+  unmountOnHide: T = !0,
+  onEnter: f,
+  onEntered: m,
   onLeave: c,
   onLeft: d,
-  children: T,
-  className: R,
-  as: A = "div"
+  children: x,
+  className: N,
+  style: A,
+  nodeRef: F,
+  elementProps: R,
+  as: $ = "div"
 }) => {
-  const [x, F] = v(i), [$, u] = v(
-    i ? "idle" : "exit-active"
-  ), e = q(null), y = q(!1);
-  if (P(() => {
-    if (e.current && clearTimeout(e.current), !(!y.current && (y.current = !0, !i)))
-      return i ? (F(!0), u("enter"), m == null || m(), requestAnimationFrame(() => {
+  const [q, r] = S(i), [_, v] = S(
+    i ? "enter" : "exit-active"
+  ), o = P(null), b = P(!1);
+  if (k(() => {
+    if (o.current && clearTimeout(o.current), !(!b.current && (b.current = !0, !i)))
+      return i ? (r(!0), v("enter"), f == null || f(), requestAnimationFrame(() => {
         requestAnimationFrame(() => {
-          u("enter-active"), e.current = setTimeout(() => {
-            u("idle"), f == null || f();
-          }, r + a);
+          v("enter-active"), o.current = setTimeout(() => {
+            v("idle"), m == null || m();
+          }, s + u);
         });
-      })) : (u("exit"), c == null || c(), requestAnimationFrame(() => {
+      })) : (v("exit"), c == null || c(), requestAnimationFrame(() => {
         requestAnimationFrame(() => {
-          u("exit-active"), e.current = setTimeout(() => {
-            S && F(!1), d == null || d();
-          }, r + a);
+          v("exit-active"), o.current = setTimeout(() => {
+            T && r(!1), d == null || d();
+          }, s + u);
         });
       })), () => {
-        e.current && clearTimeout(e.current);
+        o.current && clearTimeout(o.current);
       };
-  }, [i]), !x && S) return null;
-  const t = g[M];
-  let s = {
-    transition: `all ${r}ms ${I} ${a}ms`
+  }, [i]), !q && T) return null;
+  const e = G[M];
+  let t = {
+    transition: `all ${s}ms ${y} ${u}ms`
   };
-  switch ($) {
+  switch (_) {
     case "enter":
-      s = { ...s, ...n ?? (t == null ? void 0 : t.enter) };
+      t = { ...t, ...a ?? (e == null ? void 0 : e.enter) };
       break;
     case "enter-active":
     case "idle":
-      s = { ...s, ...l ?? (t == null ? void 0 : t.enterActive) };
+      t = { ...t, ...n ?? (e == null ? void 0 : e.enterActive) };
       break;
     case "exit":
-      s = { ...s, ...o ?? (t == null ? void 0 : t.exit) };
+      t = { ...t, ...l ?? (e == null ? void 0 : e.exit) };
       break;
     case "exit-active":
-      s = { ...s, ...N ?? (t == null ? void 0 : t.exitActive) };
+      t = { ...t, ...I ?? (e == null ? void 0 : e.exitActive) };
       break;
   }
-  return b(
-    A,
-    { className: k(R), style: s },
-    T
+  return D(
+    $,
+    { ref: F, className: U(N), style: { ...A, ...t }, ...R },
+    x
   );
-}, j = ({
+}, E = ({
   children: i,
   initial: M,
-  animate: r,
-  exit: a,
-  transition: I = {},
-  whileHover: n,
-  whileTap: l,
-  inView: o = !0,
-  as: N = "div",
-  className: S,
-  testId: m
+  animate: s,
+  exit: u,
+  transition: y = {},
+  whileHover: a,
+  whileTap: n,
+  inView: l = !0,
+  as: I = "div",
+  className: T,
+  testId: f
 }) => {
-  const [f, c] = v(M ?? {}), [d, T] = v(!1), [R, A] = v(!1), x = q(!1), { duration: F = 300, delay: $ = 0, easing: u = D } = I;
-  P(() => {
-    x.current ? o && r ? c(r) : !o && a && c(a) : (x.current = !0, requestAnimationFrame(() => {
-      o && r && c(r);
+  const [m, c] = S(M ?? {}), [d, x] = S(!1), [N, A] = S(!1), F = P(!1), { duration: R = 300, delay: $ = 0, easing: q = g } = y;
+  k(() => {
+    F.current ? l && s ? c(s) : !l && u && c(u) : (F.current = !0, requestAnimationFrame(() => {
+      l && s && c(s);
     }));
-  }, [o]);
-  let e = {
-    ...f,
-    transition: `all ${F}ms ${u} ${$}ms`
+  }, [l]);
+  let r = {
+    ...m,
+    transition: `all ${R}ms ${q} ${$}ms`
   };
-  return R && l ? e = { ...e, ...l } : d && n && (e = { ...e, ...n }), b(
-    N,
+  return N && n ? r = { ...r, ...n } : d && a && (r = { ...r, ...a }), D(
+    I,
     {
-      className: k(S),
-      style: e,
-      "data-testid": m,
-      onMouseEnter: n ? () => T(!0) : void 0,
-      onMouseLeave: n ? () => {
-        T(!1), A(!1);
+      className: U(T),
+      style: r,
+      "data-testid": f,
+      onMouseEnter: a ? () => x(!0) : void 0,
+      onMouseLeave: a ? () => {
+        x(!1), A(!1);
       } : void 0,
-      onMouseDown: l ? () => A(!0) : void 0,
-      onMouseUp: l ? () => A(!1) : void 0
+      onMouseDown: n ? () => A(!0) : void 0,
+      onMouseUp: n ? () => A(!1) : void 0
     },
     i
   );
 };
 export {
-  j as Motion,
-  O as Transition
+  E as Motion,
+  B as Transition
 };

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

@@ -1,8 +1,8 @@
-import { ReactNode, CSSProperties } from 'react';
+import { CSSProperties, ReactNode, Ref } from 'react';
 /**
  * Built-in transition names
  */
-export type TransitionName = 'fade' | 'slide-up' | 'slide-down' | 'slide-left' | 'slide-right' | 'scale' | 'scale-y' | 'scale-x' | 'fold' | 'rotate' | 'flip' | 'collapse';
+export type TransitionName = 'fade' | 'slide-up' | 'slide-down' | 'slide-left' | 'slide-right' | 'scale' | 'scale-y' | 'scale-x' | 'fold' | 'elastic' | 'reveal' | 'expand' | 'rotate' | 'flip' | 'collapse';
 export interface TransitionProps {
     id?: string;
     /** Whether the child is visible */
@@ -37,6 +37,12 @@ export interface TransitionProps {
     children: ReactNode;
     /** Custom class name */
     className?: string;
+    /** Layout styles merged under the motion styles */
+    style?: CSSProperties;
+    /** Ref for the animated element */
+    nodeRef?: Ref<HTMLDivElement>;
+    /** DOM attributes placed on the animated element */
+    elementProps?: Record<string, string | undefined>;
     /** As which HTML element */
     as?: keyof JSX.IntrinsicElements;
 }

package/dist/components/Typography/Typography.const.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e="body1",t="primary",r={h1:"h1",h2:"h2",h3:"h3",h4:"h4",h5:"h5",h6:"h6",subtitle1:"h6",subtitle2:"h6",body1:"p",body2:"p",caption:"span",overline:"span",code:"code",inherit:"span"},a={h1:"bear-text-5xl bear-font-bold bear-tracking-tight",h2:"bear-text-4xl bear-font-bold bear-tracking-tight",h3:"bear-text-3xl bear-font-semibold",h4:"bear-text-2xl bear-font-semibold",h5:"bear-text-xl bear-font-medium",h6:"bear-text-lg bear-font-medium",subtitle1:"bear-text-lg bear-font-normal",subtitle2:"bear-text-base bear-font-medium",body1:"bear-text-base bear-font-normal",body2:"bear-text-sm bear-font-normal",caption:"bear-text-xs",overline:"bear-text-xs bear-uppercase bear-tracking-wider",code:"bear-text-sm bear-font-mono bear-bg-gray-100 dark:bear-bg-gray-800 bear-px-1.5 bear-py-0.5 bear-rounded",inherit:""},b={thin:"bear-font-thin",light:"bear-font-light",normal:"bear-font-normal",medium:"bear-font-medium",semibold:"bear-font-semibold",bold:"bear-font-bold",extrabold:"bear-font-extrabold"},o={thin:100,light:300,normal:400,medium:500,semibold:600,bold:700,extrabold:800},n={left:"bear-text-left",center:"bear-text-center",right:"bear-text-right",justify:"bear-text-justify"},i={primary:"bear-text-gray-900 dark:bear-text-gray-100",secondary:"bear-text-gray-600 dark:bear-text-gray-400",muted:"bear-text-gray-400 dark:bear-text-gray-500",success:"bear-text-green-600 dark:bear-text-green-400",danger:"bear-text-red-600 dark:bear-text-red-400",warning:"bear-text-amber-600 dark:bear-text-amber-400"},d={tight:"bear-leading-tight",normal:"bear-leading-normal",relaxed:"bear-leading-relaxed",loose:"bear-leading-loose"},l=["h1","h2","h3","h4","h5","h6","subtitle1","subtitle2","body1","body2","caption","overline","code","inherit"];exports.ALIGN_CLASSES=n;exports.BUILT_IN_VARIANTS=l;exports.COLOR_CLASSES=i;exports.DEFAULT_COLOR=t;exports.DEFAULT_VARIANT=e;exports.LINE_HEIGHT_CLASSES=d;exports.VARIANT_CLASSES=a;exports.VARIANT_MAP=r;exports.WEIGHT_CLASSES=b;exports.WEIGHT_VALUES=o;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e="body1",t="primary",r={h1:"h1",h2:"h2",h3:"h3",h4:"h4",h5:"h5",h6:"h6",subtitle1:"h6",subtitle2:"h6",body1:"p",body2:"p",caption:"span",overline:"span",code:"code",inherit:"span"},a={h1:"bear-text-5xl bear-font-bold bear-tracking-tight",h2:"bear-text-4xl bear-font-bold bear-tracking-tight",h3:"bear-text-3xl bear-font-semibold",h4:"bear-text-2xl bear-font-semibold",h5:"bear-text-xl bear-font-medium",h6:"bear-text-lg bear-font-medium",subtitle1:"bear-text-lg bear-font-normal",subtitle2:"bear-text-base bear-font-medium",body1:"bear-text-base bear-font-normal",body2:"bear-text-sm bear-font-normal",caption:"bear-text-xs",overline:"bear-text-xs bear-uppercase bear-tracking-wider",code:"bear-text-sm bear-font-mono bear-bg-gray-100 dark:bear-bg-gray-800 bear-px-1.5 bear-py-0.5 bear-rounded",inherit:""},b={thin:"bear-font-thin",light:"bear-font-light",normal:"bear-font-normal",medium:"bear-font-medium",semibold:"bear-font-semibold",bold:"bear-font-bold",extrabold:"bear-font-extrabold"},o={thin:100,light:300,normal:400,medium:500,semibold:600,bold:700,extrabold:800},n={left:"bear-text-left",center:"bear-text-center",right:"bear-text-right",justify:"bear-text-justify"},i={primary:"bear-text-gray-900 dark:bear-text-gray-100",secondary:"bear-text-gray-600 dark:bear-text-gray-400",muted:"bear-text-gray-400 dark:bear-text-gray-500",success:"bear-text-green-600 dark:bear-text-green-400",danger:"bear-text-red-600 dark:bear-text-red-400",warning:"bear-text-amber-600 dark:bear-text-amber-400",info:"bear-text-blue-800 dark:bear-text-blue-200"},l={tight:"bear-leading-tight",normal:"bear-leading-normal",relaxed:"bear-leading-relaxed",loose:"bear-leading-loose"},d=["h1","h2","h3","h4","h5","h6","subtitle1","subtitle2","body1","body2","caption","overline","code","inherit"];exports.ALIGN_CLASSES=n;exports.BUILT_IN_VARIANTS=d;exports.COLOR_CLASSES=i;exports.DEFAULT_COLOR=t;exports.DEFAULT_VARIANT=e;exports.LINE_HEIGHT_CLASSES=l;exports.VARIANT_CLASSES=a;exports.VARIANT_MAP=r;exports.WEIGHT_CLASSES=b;exports.WEIGHT_VALUES=o;

package/dist/components/Typography/Typography.const.js

@@ -55,7 +55,8 @@ const e = "body1", t = "primary", r = {
   muted: "bear-text-gray-400 dark:bear-text-gray-500",
   success: "bear-text-green-600 dark:bear-text-green-400",
   danger: "bear-text-red-600 dark:bear-text-red-400",
-  warning: "bear-text-amber-600 dark:bear-text-amber-400"
+  warning: "bear-text-amber-600 dark:bear-text-amber-400",
+  info: "bear-text-blue-800 dark:bear-text-blue-200"
 }, d = {
   tight: "bear-leading-tight",
   normal: "bear-leading-normal",