@forgedevstack/bear 1.3.2 → 1.3.4

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

@@ -0,0 +1,15 @@
+import { ToggleGroupOrientation, ToggleGroupSize, ToggleGroupVariant } from './ToggleGroup.types';
+export declare const TOGGLE_GROUP_TYPE_SINGLE = "single";
+export declare const TOGGLE_GROUP_TYPE_MULTIPLE = "multiple";
+export declare const TOGGLE_GROUP_ORIENTATION_HORIZONTAL = "horizontal";
+export declare const TOGGLE_GROUP_ORIENTATION_VERTICAL = "vertical";
+export declare const TOGGLE_GROUP_DEFAULT_SIZE: ToggleGroupSize;
+export declare const TOGGLE_GROUP_DEFAULT_VARIANT: ToggleGroupVariant;
+export declare const COMPONENT_NAME_TOGGLE_GROUP = "ToggleGroup";
+export declare const COMPONENT_NAME_TOGGLE_GROUP_ITEM = "ToggleGroupItem";
+export declare const SIZE_CLASS_MAP: Record<ToggleGroupSize, string>;
+export declare const VARIANT_CLASS_MAP: Record<ToggleGroupVariant, {
+    base: string;
+    active: string;
+}>;
+export declare const ORIENTATION_CLASS_MAP: Record<ToggleGroupOrientation, string>;

package/dist/components/ToggleGroup/ToggleGroup.const.js

@@ -0,0 +1,33 @@
+const r = "single", e = "multiple", t = "horizontal", a = "md", b = "subtle", o = "ToggleGroup", s = "ToggleGroupItem", _ = {
+  sm: "h-8 px-2.5 text-xs",
+  md: "h-9 px-3 text-sm",
+  lg: "h-10 px-4 text-base"
+}, v = {
+  subtle: {
+    base: "text-[var(--bear-text-secondary)] hover:bg-[var(--bear-bg-subtle)] hover:text-[var(--bear-text-primary)]",
+    active: "bg-[var(--bear-bg-subtle)] text-[var(--bear-text-primary)] font-medium"
+  },
+  outline: {
+    base: "text-[var(--bear-text-secondary)] hover:bg-[var(--bear-bg-subtle)] hover:text-[var(--bear-text-primary)] border border-transparent",
+    active: "border-[var(--bear-primary-500)] text-[var(--bear-primary-600)] dark:text-[var(--bear-primary-400)] bg-[var(--bear-primary-50)] dark:bg-[var(--bear-primary-950)] font-medium"
+  },
+  filled: {
+    base: "text-[var(--bear-text-secondary)] hover:bg-[var(--bear-bg-subtle)]",
+    active: "bg-[var(--bear-primary-500)] text-white hover:bg-[var(--bear-primary-600)] font-medium"
+  }
+}, x = {
+  horizontal: "flex-row",
+  vertical: "flex-col"
+};
+export {
+  o as COMPONENT_NAME_TOGGLE_GROUP,
+  s as COMPONENT_NAME_TOGGLE_GROUP_ITEM,
+  x as ORIENTATION_CLASS_MAP,
+  _ as SIZE_CLASS_MAP,
+  a as TOGGLE_GROUP_DEFAULT_SIZE,
+  b as TOGGLE_GROUP_DEFAULT_VARIANT,
+  t as TOGGLE_GROUP_ORIENTATION_HORIZONTAL,
+  e as TOGGLE_GROUP_TYPE_MULTIPLE,
+  r as TOGGLE_GROUP_TYPE_SINGLE,
+  v as VARIANT_CLASS_MAP
+};

package/dist/components/ToggleGroup/ToggleGroup.context.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),t=e.createContext(null);exports.ToggleGroupContext=t;

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

@@ -0,0 +1,2 @@
+import { ToggleGroupContextValue } from './ToggleGroup.types';
+export declare const ToggleGroupContext: import('react').Context<ToggleGroupContextValue | null>;

package/dist/components/ToggleGroup/ToggleGroup.context.js

@@ -0,0 +1,5 @@
+import { createContext as o } from "react";
+const e = o(null);
+export {
+  e as ToggleGroupContext
+};

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

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

package/dist/components/ToggleGroup/ToggleGroup.js

@@ -0,0 +1,86 @@
+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 { 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 {
+    type: o = u,
+    value: O,
+    defaultValue: p,
+    onChange: l,
+    onValueChange: n,
+    orientation: f = L,
+    size: E = W,
+    variant: _ = J,
+    disabled: c = !1,
+    fullWidth: N = !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(
+    () => ({
+      type: o,
+      value: i,
+      onItemToggle: B,
+      size: E,
+      variant: _,
+      disabled: c
+    }),
+    [o, i, E, _, c]
+  ), F = (r) => {
+    var g;
+    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;
+    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();
+  };
+  return /* @__PURE__ */ A(q.Provider, { value: v, children: /* @__PURE__ */ A(
+    "div",
+    {
+      id: S,
+      "data-testid": U,
+      role: "group",
+      "aria-orientation": f,
+      onKeyDown: F,
+      className: j(
+        "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",
+        c && "opacity-60 cursor-not-allowed",
+        P
+      ),
+      ...w,
+      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/ToolCall/ToolCall.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),g=require("../../constants/generals.const.cjs"),x=require("../../utils/cn.cjs");require("react");const y=require("../../utils/generateBearId.utils.cjs"),A=require("../../utils/useBearId.cjs"),C=require("../Badge/Badge.cjs"),o=require("../Box/Box.cjs"),O=require("../Flex/Flex.cjs"),a=require("../Typography/Typography.cjs"),t=require("./ToolCall.const.cjs"),h=n=>{const{id:i,testId:c,name:u,status:l=t.TOOL_CALL_DEFAULT_STATUS,kind:d=t.TOOL_CALL_DEFAULT_KIND,input:r,output:s,translations:T,className:_}=n,L=A.useBearId(g.COMPONENT_NAME_TOOL_CALL),p=y.resolveBearId(i,L),B={...t.TOOL_CALL_DEFAULT_TRANSLATIONS,...T}[t.TOOL_CALL_STATUS_LABEL_KEY[l]];return e.jsxs(o.Box,{id:p,"data-testid":c,className:x.cn("Bear-ToolCall",`Bear-ToolCall--${l}`,`Bear-ToolCall--${d}`,_),children:[e.jsxs(O.Flex,{align:"center",justify:"between",gap:2,children:[e.jsx(a.Typography,{variant:"subtitle2",children:u}),e.jsx(C.Badge,{size:"sm",children:B})]}),r&&e.jsx(o.Box,{className:"Bear-ToolCall__input",children:typeof r=="string"?e.jsx(a.Typography,{variant:"body2",children:r}):r}),s&&e.jsx(o.Box,{className:"Bear-ToolCall__output",children:typeof s=="string"?e.jsx(a.Typography,{variant:"body2",children:s}):s})]})};exports.ToolCall=h;

package/dist/components/ToolCall/ToolCall.const.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const L={pendingLabel:"Waiting",runningLabel:"Running",successLabel:"Done",errorLabel:"Failed"},e="pending",n="generic",T={pending:"pendingLabel",running:"runningLabel",success:"successLabel",error:"errorLabel"};exports.TOOL_CALL_DEFAULT_KIND=n;exports.TOOL_CALL_DEFAULT_STATUS=e;exports.TOOL_CALL_DEFAULT_TRANSLATIONS=L;exports.TOOL_CALL_STATUS_LABEL_KEY=T;

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

@@ -0,0 +1,5 @@
+import { ToolCallKind, ToolCallStatus, ToolCallTranslations } from './ToolCall.types';
+export declare const TOOL_CALL_DEFAULT_TRANSLATIONS: ToolCallTranslations;
+export declare const TOOL_CALL_DEFAULT_STATUS: ToolCallStatus;
+export declare const TOOL_CALL_DEFAULT_KIND: ToolCallKind;
+export declare const TOOL_CALL_STATUS_LABEL_KEY: Record<ToolCallStatus, keyof ToolCallTranslations>;

package/dist/components/ToolCall/ToolCall.const.js

@@ -0,0 +1,17 @@
+const n = {
+  pendingLabel: "Waiting",
+  runningLabel: "Running",
+  successLabel: "Done",
+  errorLabel: "Failed"
+}, L = "pending", e = "generic", r = {
+  pending: "pendingLabel",
+  running: "runningLabel",
+  success: "successLabel",
+  error: "errorLabel"
+};
+export {
+  e as TOOL_CALL_DEFAULT_KIND,
+  L as TOOL_CALL_DEFAULT_STATUS,
+  n as TOOL_CALL_DEFAULT_TRANSLATIONS,
+  r as TOOL_CALL_STATUS_LABEL_KEY
+};

package/dist/components/ToolCall/ToolCall.d.ts

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

package/dist/components/ToolCall/ToolCall.js

@@ -0,0 +1,43 @@
+import { jsxs as i, jsx as o } from "react/jsx-runtime";
+import { COMPONENT_NAME_TOOL_CALL as f } from "../../constants/generals.const.js";
+import { cn as O } from "../../utils/cn.js";
+import "react";
+import { resolveBearId as u } from "../../utils/generateBearId.utils.js";
+import { useBearId as C } from "../../utils/useBearId.js";
+import { Badge as B } from "../Badge/Badge.js";
+import { Box as e } from "../Box/Box.js";
+import { Flex as N } from "../Flex/Flex.js";
+import { Typography as a } from "../Typography/Typography.js";
+import { TOOL_CALL_DEFAULT_STATUS as h, TOOL_CALL_DEFAULT_KIND as b, TOOL_CALL_DEFAULT_TRANSLATIONS as g, TOOL_CALL_STATUS_LABEL_KEY as y } from "./ToolCall.const.js";
+const k = (s) => {
+  const {
+    id: n,
+    testId: m,
+    name: d,
+    status: l = h,
+    kind: L = b,
+    input: r,
+    output: t,
+    translations: T,
+    className: p
+  } = s, c = C(f), _ = u(n, c), A = { ...g, ...T }[y[l]];
+  return /* @__PURE__ */ i(
+    e,
+    {
+      id: _,
+      "data-testid": m,
+      className: O("Bear-ToolCall", `Bear-ToolCall--${l}`, `Bear-ToolCall--${L}`, p),
+      children: [
+        /* @__PURE__ */ i(N, { align: "center", justify: "between", gap: 2, children: [
+          /* @__PURE__ */ o(a, { variant: "subtitle2", children: d }),
+          /* @__PURE__ */ o(B, { size: "sm", children: A })
+        ] }),
+        r && /* @__PURE__ */ o(e, { className: "Bear-ToolCall__input", children: typeof r == "string" ? /* @__PURE__ */ o(a, { variant: "body2", children: r }) : r }),
+        t && /* @__PURE__ */ o(e, { className: "Bear-ToolCall__output", children: typeof t == "string" ? /* @__PURE__ */ o(a, { variant: "body2", children: t }) : t })
+      ]
+    }
+  );
+};
+export {
+  k as ToolCall
+};

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

@@ -0,0 +1,20 @@
+import { ReactNode } from 'react';
+export type ToolCallStatus = 'pending' | 'running' | 'success' | 'error';
+export type ToolCallKind = 'search' | 'plan' | 'edit' | 'generic';
+export interface ToolCallTranslations {
+    pendingLabel: string;
+    runningLabel: string;
+    successLabel: string;
+    errorLabel: string;
+}
+export interface ToolCallProps {
+    id?: string;
+    testId?: string;
+    name: string;
+    status?: ToolCallStatus;
+    kind?: ToolCallKind;
+    input?: ReactNode;
+    output?: ReactNode;
+    translations?: Partial<ToolCallTranslations>;
+    className?: string;
+}

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

@@ -0,0 +1,2 @@
+export { ToolCall } from './ToolCall';
+export type { ToolCallKind, ToolCallProps, ToolCallStatus, ToolCallTranslations, } from './ToolCall.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={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=_;

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,18 @@
+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";
+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
+};

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;
 }