@forgedevstack/bear 1.3.3 → 1.3.5

package/dist/components/ToggleGroup/ToggleGroup.js

@@ -0,0 +1,89 @@
+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 = (N) => {
+  const {
+    type: o = f,
+    value: O,
+    defaultValue: p,
+    onChange: l,
+    onValueChange: n,
+    orientation: T = y,
+    size: E = J,
+    variant: _ = Q,
+    disabled: c = !1,
+    fullWidth: b = !1,
+    className: P,
+    children: R,
+    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: s,
+      onItemToggle: g,
+      size: E,
+      variant: _,
+      disabled: c
+    }),
+    [o, s, g, E, _, c]
+  ), F = (r) => {
+    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])')
+    ), 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(), (A = t[d]) == null || A.focus();
+  };
+  return /* @__PURE__ */ I(W.Provider, { value: v, children: /* @__PURE__ */ I(
+    "div",
+    {
+      id: k,
+      "data-testid": x,
+      role: "group",
+      "aria-orientation": T,
+      onKeyDown: F,
+      className: z(
+        "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",
+        C[T],
+        b && "w-full justify-stretch",
+        c && "opacity-60 cursor-not-allowed",
+        P
+      ),
+      ...U,
+      children: R
+    }
+  ) });
+};
+export {
+  dr as ToggleGroup
+};

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

@@ -0,0 +1,48 @@
+import { ReactNode, HTMLAttributes } from 'react';
+export type ToggleGroupType = 'single' | 'multiple';
+export type ToggleGroupOrientation = 'horizontal' | 'vertical';
+export type ToggleGroupSize = 'sm' | 'md' | 'lg';
+export type ToggleGroupVariant = 'subtle' | 'outline' | 'filled';
+export interface ToggleGroupContextValue {
+    type: ToggleGroupType;
+    value: string | string[];
+    onItemToggle: (itemValue: string) => void;
+    size: ToggleGroupSize;
+    variant: ToggleGroupVariant;
+    disabled?: boolean;
+}
+export interface ToggleGroupSingleProps {
+    type?: 'single';
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    onValueChange?: (value: string) => void;
+}
+export interface ToggleGroupMultipleProps {
+    type: 'multiple';
+    value?: string[];
+    defaultValue?: string[];
+    onChange?: (value: string[]) => void;
+    onValueChange?: (value: string[]) => void;
+}
+export type ToggleGroupBaseProps = {
+    orientation?: ToggleGroupOrientation;
+    size?: ToggleGroupSize;
+    variant?: ToggleGroupVariant;
+    disabled?: boolean;
+    fullWidth?: boolean;
+    className?: string;
+    children: ReactNode;
+    id?: string;
+    testId?: string;
+} & Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'>;
+export type ToggleGroupProps = ToggleGroupBaseProps & (ToggleGroupSingleProps | ToggleGroupMultipleProps);
+export interface ToggleGroupItemProps extends HTMLAttributes<HTMLButtonElement> {
+    value: string;
+    disabled?: boolean;
+    children: ReactNode;
+    className?: string;
+    id?: string;
+    testId?: string;
+    ariaLabel?: string;
+}

package/dist/components/ToggleGroup/ToggleGroupItem.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const O=require("react/jsx-runtime"),f=require("../../utils/cn.cjs");require("react");const m=require("../../utils/generateBearId.utils.cjs"),p=require("../../utils/useBearId.cjs"),P=require("./hooks/useToggleGroupContext.cjs"),s=require("./ToggleGroup.const.cjs"),y=require("../Button/Button.cjs"),R=l=>{const{value:r,disabled:u=!1,children:d,className:c,id:_,testId:G,ariaLabel:T,onClick:i,...g}=l,A=p.useBearId(s.COMPONENT_NAME_TOGGLE_GROUP_ITEM),E=m.resolveBearId(_,A),e=P.useToggleGroupContext(),t=e?e.type===s.TOGGLE_GROUP_TYPE_SINGLE?e.value===r:Array.isArray(e.value)&&e.value.includes(r):!1,n=u||!!(e!=null&&e.disabled),I=(e==null?void 0:e.size)??s.TOGGLE_GROUP_DEFAULT_SIZE,S=(e==null?void 0:e.variant)??s.TOGGLE_GROUP_DEFAULT_VARIANT,b=L=>{!n&&e&&e.onItemToggle(r),i==null||i(L)},a=s.VARIANT_CLASS_MAP[S]??s.VARIANT_CLASS_MAP[s.TOGGLE_GROUP_DEFAULT_VARIANT],v=s.SIZE_CLASS_MAP[I]??s.SIZE_CLASS_MAP[s.TOGGLE_GROUP_DEFAULT_SIZE],o=(e==null?void 0:e.type)===s.TOGGLE_GROUP_TYPE_SINGLE;return O.jsx(y.Button,{type:"button",id:E,testId:G,role:o?"radio":"button","aria-checked":o?t:void 0,"aria-pressed":o?void 0:t,"aria-label":T,disabled:n,onClick:b,variant:"ghost",className:f.cn("Bear-ToggleGroup__item","inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--bear-primary-500)] focus-visible:ring-offset-1 disabled:pointer-events-none disabled:opacity-50 select-none cursor-pointer",v,t?a.active:a.base,c),...g,children:d})};exports.ToggleGroupItem=R;

package/dist/components/ToggleGroup/ToggleGroupItem.d.ts

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

package/dist/components/ToggleGroup/ToggleGroupItem.js

@@ -0,0 +1,50 @@
+import { jsx as O } from "react/jsx-runtime";
+import { cn as N } from "../../utils/cn.js";
+import "react";
+import { resolveBearId as P } from "../../utils/generateBearId.utils.js";
+import { useBearId as R } from "../../utils/useBearId.js";
+import { useToggleGroupContext as U } from "./hooks/useToggleGroupContext.js";
+import { COMPONENT_NAME_TOGGLE_GROUP_ITEM as B, TOGGLE_GROUP_TYPE_SINGLE as n, TOGGLE_GROUP_DEFAULT_SIZE as l, TOGGLE_GROUP_DEFAULT_VARIANT as d, VARIANT_CLASS_MAP as m, SIZE_CLASS_MAP as c } from "./ToggleGroup.const.js";
+import { Button as C } from "../Button/Button.js";
+const Z = (u) => {
+  const {
+    value: i,
+    disabled: f = !1,
+    children: p,
+    className: _,
+    id: v,
+    testId: b,
+    ariaLabel: G,
+    onClick: r,
+    ...T
+  } = u, g = R(B), A = P(v, g), e = U(), s = e ? e.type === n ? e.value === i : Array.isArray(e.value) && e.value.includes(i) : !1, t = f || !!(e != null && e.disabled), E = (e == null ? void 0 : e.size) ?? l, I = (e == null ? void 0 : e.variant) ?? d, S = (L) => {
+    !t && e && e.onItemToggle(i), r == null || r(L);
+  }, a = m[I] ?? m[d], y = c[E] ?? c[l], o = (e == null ? void 0 : e.type) === n;
+  return /* @__PURE__ */ O(
+    C,
+    {
+      type: "button",
+      id: A,
+      testId: b,
+      role: o ? "radio" : "button",
+      "aria-checked": o ? s : void 0,
+      "aria-pressed": o ? void 0 : s,
+      "aria-label": G,
+      disabled: t,
+      onClick: S,
+      variant: "ghost",
+      className: N(
+        "Bear-ToggleGroup__item",
+        "inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--bear-primary-500)] focus-visible:ring-offset-1 disabled:pointer-events-none disabled:opacity-50 select-none cursor-pointer",
+        y,
+        s ? a.active : a.base,
+        _
+      ),
+      ...T,
+      children: p
+    }
+  );
+};
+export {
+  Z as ToggleGroupItem
+};

package/dist/components/ToggleGroup/hooks/useToggleGroupContext.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),t=require("../ToggleGroup.context.cjs"),o=()=>e.useContext(t.ToggleGroupContext);exports.useToggleGroupContext=o;

package/dist/components/ToggleGroup/hooks/useToggleGroupContext.d.ts

@@ -0,0 +1 @@
+export declare const useToggleGroupContext: () => import('..').ToggleGroupContextValue | null;

package/dist/components/ToggleGroup/hooks/useToggleGroupContext.js

@@ -0,0 +1,6 @@
+import { useContext as o } from "react";
+import { ToggleGroupContext as t } from "../ToggleGroup.context.js";
+const n = () => o(t);
+export {
+  n as useToggleGroupContext
+};

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

@@ -0,0 +1,4 @@
+export { ToggleGroup } from './ToggleGroup';
+export { ToggleGroupItem } from './ToggleGroupItem';
+export { useToggleGroupContext } from './hooks/useToggleGroupContext';
+export type { ToggleGroupProps, ToggleGroupItemProps, ToggleGroupType, ToggleGroupOrientation, ToggleGroupSize, ToggleGroupVariant, ToggleGroupContextValue, } from './ToggleGroup.types';

package/dist/components/Tooltip/Tooltip.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),t=require("react"),M=require("react-dom"),B=require("../../utils/cn.cjs"),j=({content:p,children:w,position:x,placement:R,delay:v=200,className:y,disabled:T=!1})=>{const u=R||x||"top",[i,b]=t.useState(!1),[f,E]=t.useState({x:0,y:0}),d=t.useRef(null),h=t.useRef(null),s=t.useRef(),c=t.useCallback(()=>{if(!d.current||!h.current)return;const e=d.current.getBoundingClientRect(),r=h.current.getBoundingClientRect(),l=8;let o=0,n=0;switch(u){case"top":o=e.left+(e.width-r.width)/2,n=e.top-r.height-l;break;case"bottom":o=e.left+(e.width-r.width)/2,n=e.bottom+l;break;case"left":o=e.left-r.width-l,n=e.top+(e.height-r.height)/2;break;case"right":o=e.right+l,n=e.top+(e.height-r.height)/2;break}o=Math.max(8,Math.min(o,window.innerWidth-r.width-8)),n=Math.max(8,Math.min(n,window.innerHeight-r.height-8)),E({x:o,y:n})},[u]),g=()=>{T||(s.current=setTimeout(()=>{b(!0)},v))},m=()=>{s.current&&clearTimeout(s.current),b(!1)};return t.useEffect(()=>{i&&c()},[i,c]),t.useEffect(()=>{if(!i)return;const e=()=>{requestAnimationFrame(()=>c())};return e(),window.addEventListener("resize",e),window.addEventListener("scroll",e,!0),()=>{window.removeEventListener("resize",e),window.removeEventListener("scroll",e,!0)}},[i,c]),t.useEffect(()=>()=>{s.current&&clearTimeout(s.current)},[]),a.jsxs(a.Fragment,{children:[a.jsx("div",{ref:d,onMouseEnter:g,onMouseLeave:m,onFocus:g,onBlur:m,className:"Bear-Tooltip__trigger bear-inline-block",children:w}),i&&M.createPortal(a.jsx("div",{ref:h,role:"tooltip",style:{left:f.x,top:f.y},className:B.cn("bear-fixed bear-z-[11000]","Bear-Tooltip",`Bear-Tooltip--${u}`,"bear-px-3 bear-py-2 bear-rounded-lg","bear-bg-gray-800 bear-text-white bear-text-sm","bear-border bear-border-gray-700","bear-shadow-lg","bear-animate-in bear-fade-in bear-duration-150",y),children:a.jsx("span",{className:"Bear-Tooltip__content",children:p})}),document.body)]})};exports.Tooltip=j;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),o=require("react"),F=require("react-dom"),B=require("../../utils/cn.cjs"),G=require("../../hooks/useFixedAnchorPosition/useFixedAnchorPosition.utils.cjs"),e=require("./Tooltip.const.cjs"),a=require("../../constants/numbers.const.cjs"),q=p=>{const{content:L,children:b,position:g,placement:m,delay:x=e.TOOLTIP_DEFAULT_DELAY,className:R,disabled:w=!1,openEffect:y,closeEffect:N,effect:S}=p,T=m||g||e.TOOLTIP_POSITION_TOP,[n,u]=o.useState(!1),[f,A]=o.useState({x:a.ZERO,y:a.ZERO}),l=o.useRef(null),O=o.useRef(null),s=o.useRef(),c=o.useCallback(()=>{if(!l.current||!O.current)return;const t=l.current.getBoundingClientRect(),r=O.current.getBoundingClientRect(),I=t.left+(t.width-r.width)/a.TWO,_=t.top+(t.height-r.height)/a.TWO,E={[e.TOOLTIP_POSITION_TOP]:{x:I,y:t.top-r.height-e.TOOLTIP_SPACING},[e.TOOLTIP_POSITION_BOTTOM]:{x:I,y:t.bottom+e.TOOLTIP_SPACING},[e.TOOLTIP_POSITION_LEFT]:{x:t.left-r.width-e.TOOLTIP_SPACING,y:_},[e.TOOLTIP_POSITION_RIGHT]:{x:t.right+e.TOOLTIP_SPACING,y:_}},h=E[T]??E[e.TOOLTIP_POSITION_TOP],M=Math.max(e.TOOLTIP_VIEWPORT_PADDING,Math.min(h.x,window.innerWidth-r.width-e.TOOLTIP_VIEWPORT_PADDING)),D=Math.max(e.TOOLTIP_VIEWPORT_PADDING,Math.min(h.y,window.innerHeight-r.height-e.TOOLTIP_VIEWPORT_PADDING));A({x:M,y:D})},[T]),P=()=>{w||(s.current=setTimeout(()=>{u(!0)},x))},d=()=>{s.current&&clearTimeout(s.current),u(!1)};o.useEffect(()=>{n&&c()},[n,c]),o.useEffect(()=>{if(!n)return;const t=()=>{requestAnimationFrame(()=>c())};return t(),window.addEventListener("resize",t),window.addEventListener("scroll",t,!0),()=>{window.removeEventListener("resize",t),window.removeEventListener("scroll",t,!0)}},[n,c]),o.useEffect(()=>()=>{s.current&&clearTimeout(s.current)},[]);const{openEffect:C}=G.resolveOverlayEffects({openEffect:y,closeEffect:N,effect:S},"fade"),v=e.TOOLTIP_EFFECT_CLASS_MAP[C]??e.TOOLTIP_EFFECT_CLASS_MAP.fade;return i.jsxs(i.Fragment,{children:[i.jsx("div",{ref:l,onMouseEnter:P,onMouseLeave:d,onFocus:P,onBlur:d,className:"Bear-Tooltip__trigger bear-inline-block",children:b}),n&&F.createPortal(i.jsx("div",{ref:O,role:"tooltip",style:{left:f.x,top:f.y},className:B.cn("bear-fixed bear-z-[11000]","Bear-Tooltip",`Bear-Tooltip--${T}`,"bear-px-3 bear-py-2 bear-rounded-lg","bear-bg-gray-800 bear-text-white bear-text-sm","bear-border bear-border-gray-700","bear-shadow-lg",v,R),children:i.jsx("span",{className:"Bear-Tooltip__content",children:L})}),document.body)]})};exports.Tooltip=q;

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

@@ -0,0 +1 @@
+"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.d.ts

@@ -1 +1,9 @@
 export declare const T_O_O_L_T_I_P_ROOT_CLASS = "Bear-Tooltip";
+export declare const TOOLTIP_EFFECT_CLASS_MAP: Record<string, string>;
+export declare const TOOLTIP_DEFAULT_DELAY = 200;
+export declare const TOOLTIP_SPACING = 8;
+export declare const TOOLTIP_VIEWPORT_PADDING = 8;
+export declare const TOOLTIP_POSITION_TOP = "top";
+export declare const TOOLTIP_POSITION_BOTTOM = "bottom";
+export declare const TOOLTIP_POSITION_LEFT = "left";
+export declare const TOOLTIP_POSITION_RIGHT = "right";

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

@@ -0,0 +1,13 @@
+import { TWO_HUNDRED as O, EIGHT as T } from "../../constants/numbers.const.js";
+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 {
+  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/Tooltip/Tooltip.js

@@ -1,78 +1,76 @@
-import { jsxs as k, Fragment as L, jsx as d } from "react/jsx-runtime";
-import { useState as w, useRef as h, useCallback as C, useEffect as b } from "react";
-import { createPortal as _ } from "react-dom";
-import { cn as z } from "../../utils/cn.js";
-const V = ({
-  content: x,
-  children: v,
-  position: y,
-  placement: M,
-  delay: R = 200,
-  className: T,
-  disabled: B = !1
-}) => {
-  const c = M || y || "top", [i, m] = w(!1), [f, E] = w({ x: 0, y: 0 }), l = h(null), u = h(null), n = h(), a = C(() => {
-    if (!l.current || !u.current) return;
-    const e = l.current.getBoundingClientRect(), t = u.current.getBoundingClientRect(), s = 8;
-    let r = 0, o = 0;
-    switch (c) {
-      case "top":
-        r = e.left + (e.width - t.width) / 2, o = e.top - t.height - s;
-        break;
-      case "bottom":
-        r = e.left + (e.width - t.width) / 2, o = e.bottom + s;
-        break;
-      case "left":
-        r = e.left - t.width - s, o = e.top + (e.height - t.height) / 2;
-        break;
-      case "right":
-        r = e.right + s, o = e.top + (e.height - t.height) / 2;
-        break;
-    }
-    r = Math.max(8, Math.min(r, window.innerWidth - t.width - 8)), o = Math.max(8, Math.min(o, window.innerHeight - t.height - 8)), E({ x: r, y: o });
-  }, [c]), g = () => {
-    B || (n.current = setTimeout(() => {
+import { jsxs as j, Fragment as k, jsx as f } from "react/jsx-runtime";
+import { useState as I, useRef as d, useCallback as H, useEffect as u } from "react";
+import { createPortal as Y } from "react-dom";
+import { cn as q } from "../../utils/cn.js";
+import { resolveOverlayEffects as U } from "../../hooks/useFixedAnchorPosition/useFixedAnchorPosition.utils.js";
+import { TOOLTIP_DEFAULT_DELAY as X, TOOLTIP_POSITION_RIGHT as Z, TOOLTIP_SPACING as i, TOOLTIP_POSITION_LEFT as $, TOOLTIP_POSITION_BOTTOM as J, TOOLTIP_POSITION_TOP as T, TOOLTIP_VIEWPORT_PADDING as s, TOOLTIP_EFFECT_CLASS_MAP as _ } from "./Tooltip.const.js";
+import { ZERO as w, TWO as L } from "../../constants/numbers.const.js";
+const ie = (x) => {
+  const {
+    content: y,
+    children: v,
+    position: R,
+    placement: M,
+    delay: N = X,
+    className: B,
+    disabled: C = !1,
+    openEffect: S,
+    closeEffect: A,
+    effect: F
+  } = x, c = M || R || T, [o, m] = I(!1), [p, D] = I({ x: w, y: w }), a = d(null), l = d(null), r = d(), n = H(() => {
+    if (!a.current || !l.current) return;
+    const e = a.current.getBoundingClientRect(), t = l.current.getBoundingClientRect(), g = e.left + (e.width - t.width) / L, P = e.top + (e.height - t.height) / L, b = {
+      [T]: { x: g, y: e.top - t.height - i },
+      [J]: { x: g, y: e.bottom + i },
+      [$]: { x: e.left - t.width - i, y: P },
+      [Z]: { x: e.right + i, y: P }
+    }, E = b[c] ?? b[T], V = Math.max(s, Math.min(E.x, window.innerWidth - t.width - s)), W = Math.max(s, Math.min(E.y, window.innerHeight - t.height - s));
+    D({ x: V, y: W });
+  }, [c]), O = () => {
+    C || (r.current = setTimeout(() => {
       m(!0);
-    }, R));
-  }, p = () => {
-    n.current && clearTimeout(n.current), m(!1);
+    }, N));
+  }, h = () => {
+    r.current && clearTimeout(r.current), m(!1);
   };
-  return b(() => {
-    i && a();
-  }, [i, a]), b(() => {
-    if (!i) return;
+  u(() => {
+    o && n();
+  }, [o, n]), u(() => {
+    if (!o) return;
     const e = () => {
-      requestAnimationFrame(() => a());
+      requestAnimationFrame(() => n());
     };
     return e(), window.addEventListener("resize", e), window.addEventListener("scroll", e, !0), () => {
       window.removeEventListener("resize", e), window.removeEventListener("scroll", e, !0);
     };
-  }, [i, a]), b(() => () => {
-    n.current && clearTimeout(n.current);
-  }, []), /* @__PURE__ */ k(L, { children: [
-    /* @__PURE__ */ d(
+  }, [o, n]), u(() => () => {
+    r.current && clearTimeout(r.current);
+  }, []);
+  const { openEffect: z } = U({ openEffect: S, closeEffect: A, effect: F }, "fade"), G = _[z] ?? _.fade;
+  return /* @__PURE__ */ j(k, { children: [
+    /* @__PURE__ */ f(
       "div",
       {
-        ref: l,
-        onMouseEnter: g,
-        onMouseLeave: p,
-        onFocus: g,
-        onBlur: p,
+        ref: a,
+        onMouseEnter: O,
+        onMouseLeave: h,
+        onFocus: O,
+        onBlur: h,
         className: "Bear-Tooltip__trigger bear-inline-block",
         children: v
       }
     ),
-    i && _(
-      /* @__PURE__ */ d(
+    o && Y(
+      /* @__PURE__ */ f(
         "div",
         {
-          ref: u,
+          ref: l,
           role: "tooltip",
           style: {
-            left: f.x,
-            top: f.y
+            left: p.x,
+            top: p.y
           },
-          className: z(
+          className: q(
             "bear-fixed bear-z-[11000]",
             "Bear-Tooltip",
             `Bear-Tooltip--${c}`,
@@ -80,10 +78,10 @@ const V = ({
             "bear-bg-gray-800 bear-text-white bear-text-sm",
             "bear-border bear-border-gray-700",
             "bear-shadow-lg",
-            "bear-animate-in bear-fade-in bear-duration-150",
-            T
+            G,
+            B
           ),
-          children: /* @__PURE__ */ d("span", { className: "Bear-Tooltip__content", children: x })
+          children: /* @__PURE__ */ f("span", { className: "Bear-Tooltip__content", children: y })
         }
       ),
       document.body
@@ -91,5 +89,5 @@ const V = ({
   ] });
 };
 export {
-  V as Tooltip
+  ie as Tooltip
 };

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

@@ -1,4 +1,5 @@
 import { ReactNode } from 'react';
+import { OverlayMotionEffect, OverlayEffectConfig } from '../../hooks/useFixedAnchorPosition';
 export interface TooltipProps {
     testId?: string;
     id?: string;
@@ -16,4 +17,10 @@ export interface TooltipProps {
     className?: string;
     /** Whether tooltip is disabled */
     disabled?: boolean;
+    /** Transition effect when opening */
+    openEffect?: OverlayMotionEffect;
+    /** Transition effect when closing */
+    closeEffect?: OverlayMotionEffect;
+    /** Config for open and close transition effects */
+    effect?: OverlayEffectConfig;
 }

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)" },