@forgedevstack/bear 1.2.3 → 1.2.5

package/dist/components/Toast/Toast.js

@@ -1,8 +1,8 @@
 import { jsx as e, jsxs as l } from "react/jsx-runtime";
-import { createContext as N, useContext as T, useState as k, useCallback as n, useRef as E, useEffect as y } from "react";
-import { cn as I } from "../../utils/cn.js";
-import { generateId as S } from "./Toast.utils.js";
-const _ = {
+import { createContext as L, useContext as B, useState as T, useCallback as n, useRef as y, useEffect as N } from "react";
+import { cn as P } from "../../utils/cn.js";
+import { generateBearId as M } from "../../utils/generateBearId.utils.js";
+const W = {
   success: /* @__PURE__ */ l("svg", { width: 20, height: 20, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, children: [
     /* @__PURE__ */ e("path", { d: "M22 11.08V12a10 10 0 1 1-5.93-9.14" }),
     /* @__PURE__ */ e("polyline", { points: "22 4 12 14.01 9 11.01" })
@@ -22,142 +22,148 @@ const _ = {
     /* @__PURE__ */ e("line", { x1: "15", y1: "9", x2: "9", y2: "15" }),
     /* @__PURE__ */ e("line", { x1: "9", y1: "9", x2: "15", y2: "15" })
   ] })
-}, B = () => /* @__PURE__ */ l("svg", { width: 16, height: 16, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, children: [
+}, C = () => /* @__PURE__ */ l("svg", { width: 16, height: 16, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, children: [
   /* @__PURE__ */ e("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
   /* @__PURE__ */ e("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
-] }), W = {
+] }), R = {
   success: "bear-bg-green-500 bear-text-white",
   info: "bear-bg-blue-500 bear-text-white",
   warning: "bear-bg-amber-500 bear-text-white",
   error: "bear-bg-red-500 bear-text-white"
-}, C = {
+}, V = {
   "top-left": "bear-top-4 bear-left-4",
   "top-center": "bear-top-4 bear-left-1/2 bear-transform bear--translate-x-1/2",
   "top-right": "bear-top-4 bear-right-4",
   "bottom-left": "bear-bottom-4 bear-left-4",
   "bottom-center": "bear-bottom-4 bear-left-1/2 bear-transform bear--translate-x-1/2",
   "bottom-right": "bear-bottom-4 bear-right-4"
-}, w = N(null), M = () => {
-  const i = T(w);
+}, k = L(null), q = () => {
+  const i = B(k);
   if (!i)
     throw new Error("useToast must be used within a ToastProvider");
   return i;
-}, L = ({
+}, Y = ({
   message: i,
-  title: b,
-  severity: h = "info",
-  duration: o = 5e3,
-  closable: c = !0,
-  icon: t,
-  action: d,
+  title: h,
+  severity: u = "info",
+  duration: c = 5e3,
+  closable: b = !0,
+  icon: o,
+  action: a,
   onClose: s,
   onRemove: x,
-  className: p,
-  autoScroll: m = !1
+  className: w,
+  autoScroll: f = !1,
+  pauseOnHover: m = !1
 }) => {
-  const [v, g] = k(!1), u = E(null);
-  y(() => {
-    m && u.current && u.current.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "nearest" });
-  }, [m]), y(() => {
-    if (o > 0) {
-      const f = setTimeout(() => {
-        g(!0), setTimeout(() => {
-          x(), s == null || s();
-        }, 200);
-      }, o);
-      return () => clearTimeout(f);
-    }
-  }, [o, x, s]);
-  const r = () => {
+  const [p, g] = T(!1), [v, t] = T(!1), r = y(null), d = y(c), I = y(0);
+  N(() => {
+    f && r.current && r.current.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "nearest" });
+  }, [f]), N(() => {
+    if (c <= 0 || v) return;
+    I.current = Date.now();
+    const _ = setTimeout(() => {
+      g(!0), setTimeout(() => {
+        x(), s == null || s();
+      }, 200);
+    }, d.current);
+    return () => {
+      clearTimeout(_), d.current = Math.max(0, d.current - (Date.now() - I.current));
+    };
+  }, [c, v, x, s]);
+  const S = () => {
     g(!0), setTimeout(() => {
       x(), s == null || s();
     }, 200);
-  }, a = () => t === !1 ? null : t || _[h];
+  }, E = () => o === !1 ? null : o || W[u];
   return /* @__PURE__ */ l(
     "div",
     {
-      ref: u,
+      ref: r,
       role: "alert",
-      className: I(
+      onMouseEnter: m ? () => t(!0) : void 0,
+      onMouseLeave: m ? () => t(!1) : void 0,
+      className: P(
         "bear-flex bear-items-start bear-gap-3 bear-p-4 bear-rounded-lg bear-shadow-lg bear-min-w-[300px] bear-max-w-[400px]",
         "bear-transition-all bear-duration-200",
-        v ? "bear-opacity-0 bear-translate-x-2" : "bear-opacity-100 bear-translate-x-0",
-        W[h],
-        p
+        p ? "bear-opacity-0 bear-translate-x-2" : "bear-opacity-100 bear-translate-x-0",
+        R[u],
+        w
       ),
       children: [
-        a() && /* @__PURE__ */ e("span", { className: "bear-flex-shrink-0 bear-mt-0.5", children: a() }),
+        E() && /* @__PURE__ */ e("span", { className: "bear-flex-shrink-0 bear-mt-0.5", children: E() }),
         /* @__PURE__ */ l("div", { className: "bear-flex-1 bear-min-w-0", children: [
-          b && /* @__PURE__ */ e("div", { className: "bear-font-semibold bear-mb-0.5", children: b }),
+          h && /* @__PURE__ */ e("div", { className: "bear-font-semibold bear-mb-0.5", children: h }),
           /* @__PURE__ */ e("div", { className: "bear-text-sm bear-opacity-90", children: i })
         ] }),
-        d && /* @__PURE__ */ e("div", { className: "bear-flex-shrink-0", children: d }),
-        c && /* @__PURE__ */ e(
+        a && /* @__PURE__ */ e("div", { className: "bear-flex-shrink-0", children: a }),
+        b && /* @__PURE__ */ e(
           "button",
           {
             type: "button",
-            onClick: r,
+            onClick: S,
             className: "bear-flex-shrink-0 bear-p-1 bear-rounded hover:bear-bg-white/20 bear-transition-colors bear-bg-transparent bear-border-none bear-cursor-pointer",
             "aria-label": "Close",
-            children: /* @__PURE__ */ e(B, {})
+            children: /* @__PURE__ */ e(C, {})
           }
         )
       ]
     }
   );
-}, P = ({
+}, j = ({
   position: i = "top-right",
-  maxToasts: b = 5,
-  className: h
+  maxToasts: h = 5,
+  className: u
 }) => {
-  const o = T(w);
-  if (!o) return null;
-  const { _toasts: c, _removeToast: t } = o, d = c.slice(0, b);
+  const c = B(k);
+  if (!c) return null;
+  const { _toasts: b, _removeToast: o } = c, a = b.slice(0, h);
   return /* @__PURE__ */ e(
     "div",
     {
-      className: I(
+      className: P(
         "bear-fixed bear-z-[11000] bear-flex bear-flex-col bear-gap-2",
-        C[i],
-        h
+        V[i],
+        u
       ),
-      children: d.map((s) => /* @__PURE__ */ e(
-        L,
+      children: a.map((s) => /* @__PURE__ */ e(
+        Y,
         {
           ...s,
-          onRemove: () => t(s.id)
+          onRemove: () => o(s.id)
         },
         s.id
       ))
     }
   );
-}, O = ({
+}, F = ({
   children: i,
-  position: b = "top-right"
+  position: h = "top-right",
+  maxToasts: u
 }) => {
-  const [h, o] = k([]), c = n((r) => {
-    o((a) => a.filter((f) => f.id !== r));
-  }, []), t = n((r) => {
-    const a = r.id || S();
-    return o((f) => [...f, { ...r, id: a }]), a;
-  }, []), d = n((r) => t(r), [t]), s = n((r, a) => t({ message: r, severity: "success", ...a }), [t]), x = n((r, a) => t({ message: r, severity: "info", ...a }), [t]), p = n((r, a) => t({ message: r, severity: "warning", ...a }), [t]), m = n((r, a) => t({ message: r, severity: "error", ...a }), [t]), v = n((r) => c(r), [c]), g = n(() => o([]), []), u = {
-    toast: d,
-    success: s,
-    info: x,
-    warning: p,
+  const [c, b] = T([]), o = n((t) => {
+    b((r) => r.filter((d) => d.id !== t));
+  }, []), a = n((t) => {
+    const r = t.id || M("Toast");
+    return b((d) => [...d, { ...t, id: r }]), r;
+  }, []), s = n((t) => a(t), [a]), x = n((t, r) => a({ message: t, severity: "success", ...r }), [a]), w = n((t, r) => a({ message: t, severity: "info", ...r }), [a]), f = n((t, r) => a({ message: t, severity: "warning", ...r }), [a]), m = n((t, r) => a({ message: t, severity: "error", ...r }), [a]), p = n((t) => o(t), [o]), g = n(() => b([]), []), v = {
+    toast: s,
+    success: x,
+    info: w,
+    warning: f,
     error: m,
-    dismiss: v,
+    dismiss: p,
     dismissAll: g,
-    _toasts: h,
-    _removeToast: c
+    _toasts: c,
+    _removeToast: o
   };
-  return /* @__PURE__ */ l(w.Provider, { value: u, children: [
+  return /* @__PURE__ */ l(k.Provider, { value: v, children: [
     i,
-    /* @__PURE__ */ e(P, { position: b })
+    /* @__PURE__ */ e(j, { position: h, maxToasts: u })
   ] });
 };
 export {
-  P as ToastContainer,
-  O as ToastProvider,
-  M as useToast
+  j as ToastContainer,
+  F as ToastProvider,
+  q as useToast
 };

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

@@ -2,6 +2,7 @@ import { ReactNode } from 'react';
 export type ToastPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
 export type ToastSeverity = 'success' | 'info' | 'warning' | 'error';
 export interface ToastProps {
+    testId?: string;
     /** Unique identifier for the toast */
     id?: string;
     /** Toast message content */
@@ -24,6 +25,15 @@ export interface ToastProps {
     className?: string;
     /** Scroll the toast into view when it appears */
     autoScroll?: boolean;
+    /** Pause the auto-dismiss timer while hovered */
+    pauseOnHover?: boolean;
+}
+export interface ToastProviderProps {
+    children: ReactNode;
+    /** Position of the toast stack */
+    position?: ToastPosition;
+    /** Maximum number of visible toasts */
+    maxToasts?: number;
 }
 export interface ToastContainerProps {
     /** Position of toast container */

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

@@ -1,2 +1,2 @@
 export { ToastProvider, ToastContainer, useToast } from './Toast';
-export type { ToastProps, ToastContainerProps, ToastContextValue, ToastSeverity, ToastPosition } from './Toast.types';
+export type { ToastProps, ToastContainerProps, ToastContextValue, ToastProviderProps, ToastSeverity, ToastPosition } from './Toast.types';

package/dist/components/ToggleButton/ToggleButton.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const L=require("react/jsx-runtime"),o=require("react"),I=require("../../utils/cn.cjs"),A=require("../../utils/generateBearId.utils.cjs"),m=require("../../utils/useBearId.cjs"),n=require("./ToggleButton.const.cjs"),N=o.createContext(null),y=()=>o.useContext(N),q=({value:t,selected:T,size:l,fullWidth:d=!1,disabled:g=!1,className:i,children:c,id:B,testId:S,onClick:a,..._})=>{const O=m.useBearId("ToggleButton"),E=A.resolveBearId(B,O),e=y(),G=l??(e==null?void 0:e.size)??"md",r=g||(e==null?void 0:e.disabled)||!1,f=T??(e==null?void 0:e.selectedValues.includes(t))??!1,p=s=>{r||e==null||e.toggleValue(t),a==null||a(s)};return L.jsx("button",{type:"button",id:E,"data-testid":S,"aria-pressed":f,disabled:r,onClick:p,className:I.cn(n.TOGGLE_BUTTON_ROOT_CLASS,n.TOGGLE_BUTTON_BASE_CLASSES,n.TOGGLE_BUTTON_SIZE_CLASSES[G],f&&n.TOGGLE_BUTTON_SELECTED_CLASSES,d&&"bear-flex-1",r&&"bear-opacity-50 bear-cursor-not-allowed",i),..._,children:c})},b=t=>t?Array.isArray(t)?t:[t]:[],C=({value:t,defaultValue:T,onChange:l,exclusive:d=!0,size:g="md",fullWidth:i=!1,disabled:c=!1,className:B,children:S,id:a,testId:_})=>{const O=m.useBearId("ToggleButtonGroup"),E=A.resolveBearId(a,O),[e,G]=o.useState(()=>b(T)),r=t!==void 0?b(t):e,p={selectedValues:r,toggleValue:s=>{let u;d?u=[s]:u=r.includes(s)?r.filter(U=>U!==s):[...r,s],t===void 0&&G(u),l==null||l(d?u[0]??"":u)},size:g,disabled:c};return L.jsx(N.Provider,{value:p,children:L.jsx("div",{id:E,"data-testid":_,role:"group",className:I.cn(n.TOGGLE_BUTTON_GROUP_ROOT_CLASS,n.TOGGLE_BUTTON_GROUP_BASE_CLASSES,i&&"bear-w-full",c&&"bear-opacity-50 bear-pointer-events-none",B),children:o.Children.map(S,s=>o.isValidElement(s)?o.cloneElement(s,{fullWidth:s.props.fullWidth??i}):s)})})};exports.ToggleButton=q;exports.ToggleButtonGroup=C;

package/dist/components/ToggleButton/ToggleButton.const.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r="Bear-ToggleButton",e="Bear-ToggleButtonGroup",a={xs:"bear-h-7 bear-px-2 bear-text-xs",sm:"bear-h-8 bear-px-3 bear-text-sm",md:"bear-h-10 bear-px-4 bear-text-base",lg:"bear-h-12 bear-px-5 bear-text-lg",xl:"bear-h-14 bear-px-6 bear-text-lg"},b="bear-bg-[var(--bear-primary-500)] bear-text-[var(--bear-text-inverted,#fff)] bear-border-[var(--bear-primary-500)] bear-shadow-sm",t="bear-inline-flex bear-items-center bear-justify-center bear-font-medium bear-rounded-md bear-border bear-transition-all bear-duration-200 bear-border-[var(--bear-border-default)] bear-bg-[var(--bear-bg-primary)] bear-text-[var(--bear-text-primary)] hover:bear-bg-[var(--bear-bg-tertiary)]",T="bear-inline-flex bear-rounded-lg bear-border bear-border-[var(--bear-border-default)] bear-bg-[var(--bear-bg-secondary)] bear-overflow-hidden";exports.TOGGLE_BUTTON_BASE_CLASSES=t;exports.TOGGLE_BUTTON_GROUP_BASE_CLASSES=T;exports.TOGGLE_BUTTON_GROUP_ROOT_CLASS=e;exports.TOGGLE_BUTTON_ROOT_CLASS=r;exports.TOGGLE_BUTTON_SELECTED_CLASSES=b;exports.TOGGLE_BUTTON_SIZE_CLASSES=a;

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

@@ -0,0 +1,6 @@
+export declare const TOGGLE_BUTTON_ROOT_CLASS = "Bear-ToggleButton";
+export declare const TOGGLE_BUTTON_GROUP_ROOT_CLASS = "Bear-ToggleButtonGroup";
+export declare const TOGGLE_BUTTON_SIZE_CLASSES: Record<'sm' | 'md' | 'lg' | 'xs' | 'xl', string>;
+export declare const TOGGLE_BUTTON_SELECTED_CLASSES = "bear-bg-[var(--bear-primary-500)] bear-text-[var(--bear-text-inverted,#fff)] bear-border-[var(--bear-primary-500)] bear-shadow-sm";
+export declare const TOGGLE_BUTTON_BASE_CLASSES = "bear-inline-flex bear-items-center bear-justify-center bear-font-medium bear-rounded-md bear-border bear-transition-all bear-duration-200 bear-border-[var(--bear-border-default)] bear-bg-[var(--bear-bg-primary)] bear-text-[var(--bear-text-primary)] hover:bear-bg-[var(--bear-bg-tertiary)]";
+export declare const TOGGLE_BUTTON_GROUP_BASE_CLASSES = "bear-inline-flex bear-rounded-lg bear-border bear-border-[var(--bear-border-default)] bear-bg-[var(--bear-bg-secondary)] bear-overflow-hidden";

package/dist/components/ToggleButton/ToggleButton.const.js

@@ -0,0 +1,15 @@
+const r = "Bear-ToggleButton", e = "Bear-ToggleButtonGroup", a = {
+  xs: "bear-h-7 bear-px-2 bear-text-xs",
+  sm: "bear-h-8 bear-px-3 bear-text-sm",
+  md: "bear-h-10 bear-px-4 bear-text-base",
+  lg: "bear-h-12 bear-px-5 bear-text-lg",
+  xl: "bear-h-14 bear-px-6 bear-text-lg"
+}, b = "bear-bg-[var(--bear-primary-500)] bear-text-[var(--bear-text-inverted,#fff)] bear-border-[var(--bear-primary-500)] bear-shadow-sm", t = "bear-inline-flex bear-items-center bear-justify-center bear-font-medium bear-rounded-md bear-border bear-transition-all bear-duration-200 bear-border-[var(--bear-border-default)] bear-bg-[var(--bear-bg-primary)] bear-text-[var(--bear-text-primary)] hover:bear-bg-[var(--bear-bg-tertiary)]", o = "bear-inline-flex bear-rounded-lg bear-border bear-border-[var(--bear-border-default)] bear-bg-[var(--bear-bg-secondary)] bear-overflow-hidden";
+export {
+  t as TOGGLE_BUTTON_BASE_CLASSES,
+  o as TOGGLE_BUTTON_GROUP_BASE_CLASSES,
+  e as TOGGLE_BUTTON_GROUP_ROOT_CLASS,
+  r as TOGGLE_BUTTON_ROOT_CLASS,
+  b as TOGGLE_BUTTON_SELECTED_CLASSES,
+  a as TOGGLE_BUTTON_SIZE_CLASSES
+};

package/dist/components/ToggleButton/ToggleButton.d.ts

@@ -0,0 +1,3 @@
+import { ToggleButtonProps, ToggleButtonGroupProps } from './ToggleButton.types';
+export declare const ToggleButton: ({ value, selected: selectedProp, size: sizeProp, fullWidth, disabled: disabledProp, className, children, id, testId, onClick, ...props }: ToggleButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ToggleButtonGroup: ({ value: controlledValue, defaultValue, onChange, exclusive, size, fullWidth, disabled, className, children, id, testId, }: ToggleButtonGroupProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/ToggleButton/ToggleButton.js

@@ -0,0 +1,89 @@
+import { jsx as O } from "react/jsx-runtime";
+import { createContext as N, useState as U, Children as C, isValidElement as y, cloneElement as V, useContext as z } from "react";
+import { cn as G } from "../../utils/cn.js";
+import { resolveBearId as L } from "../../utils/generateBearId.utils.js";
+import { useBearId as b } from "../../utils/useBearId.js";
+import { TOGGLE_BUTTON_SELECTED_CLASSES as R, TOGGLE_BUTTON_SIZE_CLASSES as v, TOGGLE_BUTTON_BASE_CLASSES as x, TOGGLE_BUTTON_ROOT_CLASS as P, TOGGLE_BUTTON_GROUP_BASE_CLASSES as w, TOGGLE_BUTTON_GROUP_ROOT_CLASS as j } from "./ToggleButton.const.js";
+const A = N(null), D = () => z(A), K = ({
+  value: t,
+  selected: u,
+  size: o,
+  fullWidth: a = !1,
+  disabled: T = !1,
+  className: d,
+  children: i,
+  id: c,
+  testId: f,
+  onClick: n,
+  ...S
+}) => {
+  const _ = b("ToggleButton"), m = L(c, _), e = D(), p = o ?? (e == null ? void 0 : e.size) ?? "md", s = T || (e == null ? void 0 : e.disabled) || !1, E = u ?? (e == null ? void 0 : e.selectedValues.includes(t)) ?? !1;
+  return /* @__PURE__ */ O(
+    "button",
+    {
+      type: "button",
+      id: m,
+      "data-testid": f,
+      "aria-pressed": E,
+      disabled: s,
+      onClick: (r) => {
+        s || e == null || e.toggleValue(t), n == null || n(r);
+      },
+      className: G(
+        P,
+        x,
+        v[p],
+        E && R,
+        a && "bear-flex-1",
+        s && "bear-opacity-50 bear-cursor-not-allowed",
+        d
+      ),
+      ...S,
+      children: i
+    }
+  );
+}, B = (t) => t ? Array.isArray(t) ? t : [t] : [], M = ({
+  value: t,
+  defaultValue: u,
+  onChange: o,
+  exclusive: a = !0,
+  size: T = "md",
+  fullWidth: d = !1,
+  disabled: i = !1,
+  className: c,
+  children: f,
+  id: n,
+  testId: S
+}) => {
+  const _ = b("ToggleButtonGroup"), m = L(n, _), [e, p] = U(() => B(u)), s = t !== void 0 ? B(t) : e, g = {
+    selectedValues: s,
+    toggleValue: (r) => {
+      let l;
+      a ? l = [r] : l = s.includes(r) ? s.filter((I) => I !== r) : [...s, r], t === void 0 && p(l), o == null || o(a ? l[0] ?? "" : l);
+    },
+    size: T,
+    disabled: i
+  };
+  return /* @__PURE__ */ O(A.Provider, { value: g, children: /* @__PURE__ */ O(
+    "div",
+    {
+      id: m,
+      "data-testid": S,
+      role: "group",
+      className: G(
+        j,
+        w,
+        d && "bear-w-full",
+        i && "bear-opacity-50 bear-pointer-events-none",
+        c
+      ),
+      children: C.map(f, (r) => y(r) ? V(r, {
+        fullWidth: r.props.fullWidth ?? d
+      }) : r)
+    }
+  ) });
+};
+export {
+  K as ToggleButton,
+  M as ToggleButtonGroup
+};

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

@@ -0,0 +1,30 @@
+import { ButtonHTMLAttributes, ReactNode } from 'react';
+import { BearSize } from '../../types';
+export interface ToggleButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'value'> {
+    value: string;
+    selected?: boolean;
+    size?: BearSize;
+    fullWidth?: boolean;
+    id?: string;
+    testId?: string;
+    children?: ReactNode;
+}
+export interface ToggleButtonGroupProps {
+    value?: string | string[];
+    defaultValue?: string | string[];
+    onChange?: (value: string | string[]) => void;
+    exclusive?: boolean;
+    size?: BearSize;
+    fullWidth?: boolean;
+    disabled?: boolean;
+    className?: string;
+    id?: string;
+    testId?: string;
+    children?: ReactNode;
+}
+export interface ToggleButtonContextValue {
+    selectedValues: string[];
+    toggleValue: (value: string) => void;
+    size: BearSize;
+    disabled: boolean;
+}

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

@@ -0,0 +1,2 @@
+export { ToggleButton, ToggleButtonGroup } from './ToggleButton';
+export type { ToggleButtonProps, ToggleButtonGroupProps } from './ToggleButton.types';

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

@@ -0,0 +1 @@
+export declare const T_O_O_L_T_I_P_ROOT_CLASS = "Bear-Tooltip";

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

@@ -1,5 +1,7 @@
 import { ReactNode } from 'react';
 export interface TooltipProps {
+    testId?: string;
+    id?: string;
     /** Tooltip content */
     content: ReactNode;
     /** Trigger element */

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

@@ -25,6 +25,7 @@ export interface TourStep {
 }
 export type TourPlacement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end';
 export interface TourProps {
+    id?: string;
     /** Array of tour steps */
     steps: TourStep[];
     /** Whether tour is open */

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

@@ -0,0 +1 @@
+export declare const T_R_A_N_S_F_E_R_L_I_S_T_ROOT_CLASS = "Bear-TransferList";

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

@@ -12,6 +12,7 @@ export interface TransferListItem {
     icon?: ReactNode;
 }
 export interface TransferListProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    id?: string;
     /** Available items on the left side */
     leftItems: TransferListItem[];
     /** Selected items on the right side */

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

@@ -4,6 +4,7 @@ import { ReactNode, CSSProperties } from 'react';
  */
 export type TransitionName = 'fade' | 'slide-up' | 'slide-down' | 'slide-left' | 'slide-right' | 'scale' | 'scale-y' | 'scale-x' | 'rotate' | 'flip' | 'collapse';
 export interface TransitionProps {
+    id?: string;
     /** Whether the child is visible */
     show: boolean;
     /** Transition name or custom styles */

package/dist/components/TreeSelect/TreeSelect.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),l=require("react"),x=require("../../utils/cn.cjs"),Z=require("../Portal/Portal.cjs"),s=require("./TreeSelect.const.cjs"),N=require("./TreeSelect.utils.cjs"),U=1e4,I=({node:a,depth:i,selected:d,expanded:n,multiple:o,onToggleExpand:f,onSelect:p})=>{const u=a.children&&a.children.length>0,E=n.has(a.id),m=d.has(a.id);return e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:x.cn(s.NODE_CLASSES,m&&s.NODE_SELECTED_CLASSES,a.disabled&&s.NODE_DISABLED_CLASSES),style:{paddingLeft:i*s.INDENT_PX+12},onClick:()=>!a.disabled&&p(a.id),role:"treeitem","aria-selected":m,"aria-expanded":u?E:void 0,children:[u?e.jsx("svg",{className:x.cn(s.CHEVRON_CLASSES,E&&"bear-rotate-90"),onClick:h=>{h.stopPropagation(),f(a.id)},fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",children:e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M9 5l7 7-7 7"})}):e.jsx("span",{className:"bear-w-4 bear-mr-1"}),o&&e.jsx("span",{className:x.cn("bear-w-4 bear-h-4 bear-mr-2 bear-border bear-rounded bear-flex bear-items-center bear-justify-center bear-text-xs",m?"bear-bg-primary-500 bear-border-primary-500 bear-text-white":"bear-border-gray-300 dark:bear-border-zinc-600"),children:m&&"✓"}),a.icon&&e.jsx("span",{className:"bear-mr-1.5",children:a.icon}),e.jsx("span",{className:"bear-truncate",children:a.label})]}),u&&E&&a.children.map(h=>e.jsx(I,{node:h,depth:i+1,selected:d,expanded:n,multiple:o,onToggleExpand:f,onSelect:p},h.id))]})},J=a=>{const{nodes:i,value:d,onChange:n,multiple:o=!1,label:f,placeholder:p="Select…",disabled:u=!1,clearable:E=!0,searchable:m=!0,expandAll:h=!1,size:O="md",error:w,helperText:y,maxHeight:P=s.DEFAULT_MAX_HEIGHT,className:D,testId:M,...z}=a,[b,j]=l.useState(!1),[L,v]=l.useState(""),C=l.useRef(null),_=l.useRef(null),g=l.useRef(null),[A,B]=l.useState({top:0,left:0,width:0}),q=l.useMemo(()=>N.collectAllIds(i),[i]),[H,G]=l.useState(()=>h?q:new Set),S=l.useMemo(()=>d?new Set(Array.isArray(d)?d:[d]):new Set,[d]);l.useEffect(()=>{if(!b)return;const r=()=>{var c;const t=(c=_.current)==null?void 0:c.getBoundingClientRect();t&&B({top:t.bottom+4,left:Math.max(8,Math.min(t.left,window.innerWidth-t.width-8)),width:t.width})};return r(),window.addEventListener("resize",r),window.addEventListener("scroll",r,!0),()=>{window.removeEventListener("resize",r),window.removeEventListener("scroll",r,!0)}},[b]),l.useEffect(()=>{if(!b)return;const r=t=>{var k,T;const c=t.target;(k=C.current)!=null&&k.contains(c)||(T=g.current)!=null&&T.contains(c)||(j(!1),v(""))};return document.addEventListener("mousedown",r),()=>document.removeEventListener("mousedown",r)},[b]);const W=l.useCallback(r=>{G(t=>{const c=new Set(t);return c.has(r)?c.delete(r):c.add(r),c})},[]),F=l.useCallback(r=>{if(o){const t=new Set(S);t.has(r)?t.delete(r):t.add(r),n==null||n(Array.from(t))}else n==null||n(r),j(!1),v("")},[o,S,n]),V=l.useCallback(()=>{n==null||n(o?[]:"")},[o,n]),R=L?N.filterNodes(i,L):i,X=()=>{if(S.size===0)return e.jsx("span",{className:"bear-text-gray-400 dark:bear-text-zinc-500",children:p});if(o)return e.jsx("div",{className:"bear-flex bear-flex-wrap bear-gap-1",children:Array.from(S).map(t=>{const c=N.findNodeById(i,t);return c?e.jsx("span",{className:s.TAG_CLASSES,children:c.label},t):null})});const r=N.findNodeById(i,Array.from(S)[0]);return(r==null?void 0:r.label)??p};return e.jsxs("div",{ref:C,className:x.cn(s.ROOT_CLASSES,D),"data-testid":M,...z,children:[f&&e.jsx("label",{className:s.LABEL_CLASSES,children:f}),e.jsxs("button",{ref:_,type:"button",disabled:u,onClick:()=>!u&&j(!b),className:x.cn(s.TRIGGER_CLASSES,s.SIZE_CLASSES[O],u&&"bear-opacity-50 bear-cursor-not-allowed"),children:[e.jsx("span",{className:"bear-flex-1 bear-text-left bear-truncate",children:X()}),e.jsxs("div",{className:"bear-flex bear-items-center bear-gap-1",children:[E&&S.size>0&&e.jsx("span",{className:"bear-text-gray-400 hover:bear-text-gray-600 bear-cursor-pointer",onClick:r=>{r.stopPropagation(),V()},children:"✕"}),e.jsx("svg",{className:x.cn("bear-w-4 bear-h-4 bear-text-gray-400 bear-transition-transform",b&&"bear-rotate-180"),fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",children:e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M19 9l-7 7-7-7"})})]})]}),b&&e.jsx(Z.Portal,{children:e.jsxs("div",{ref:g,className:x.cn(s.DROPDOWN_CLASSES,"bear-fixed"),style:{top:A.top,left:A.left,width:A.width,zIndex:U},children:[m&&e.jsx("input",{className:s.SEARCH_CLASSES,placeholder:"Search…",value:L,onChange:r=>v(r.target.value),autoFocus:!0}),e.jsx("div",{style:{maxHeight:P},className:"bear-overflow-y-auto",role:"tree",children:R.length>0?R.map(r=>e.jsx(I,{node:r,depth:0,selected:S,expanded:H,multiple:o,onToggleExpand:W,onSelect:F},r.id)):e.jsx("div",{className:"bear-py-6 bear-text-center bear-text-sm bear-text-gray-400",children:"No results"})})]})}),w&&e.jsx("p",{className:s.ERROR_CLASSES,children:w}),!w&&y&&e.jsx("p",{className:s.HELPER_CLASSES,children:y})]})};exports.TreeSelect=J;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),l=require("react"),x=require("../../utils/cn.cjs"),Z=require("../Portal/Portal.cjs"),s=require("./TreeSelect.const.cjs"),N=require("./TreeSelect.utils.cjs"),U=1e4,I=({node:a,depth:i,selected:d,expanded:n,multiple:o,onToggleExpand:h,onSelect:p})=>{const u=a.children&&a.children.length>0,E=n.has(a.id),m=d.has(a.id);return e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:x.cn(s.NODE_CLASSES,m&&s.NODE_SELECTED_CLASSES,a.disabled&&s.NODE_DISABLED_CLASSES),style:{paddingLeft:i*s.INDENT_PX+12},onClick:()=>!a.disabled&&p(a.id),role:"treeitem","aria-selected":m,"aria-expanded":u?E:void 0,children:[u?e.jsx("svg",{className:x.cn(s.CHEVRON_CLASSES,E&&"bear-rotate-90"),onClick:f=>{f.stopPropagation(),h(a.id)},fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",children:e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M9 5l7 7-7 7"})}):e.jsx("span",{className:"bear-w-4 bear-mr-1"}),o&&e.jsx("span",{className:x.cn("bear-w-4 bear-h-4 bear-mr-2 bear-border bear-rounded bear-flex bear-items-center bear-justify-center bear-text-xs",m?"bear-bg-primary-500 bear-border-primary-500 bear-text-white":"bear-border-gray-300 dark:bear-border-zinc-600"),children:m&&"✓"}),a.icon&&e.jsx("span",{className:"bear-mr-1.5",children:a.icon}),e.jsx("span",{className:"bear-truncate",children:a.label})]}),u&&E&&a.children.map(f=>e.jsx(I,{node:f,depth:i+1,selected:d,expanded:n,multiple:o,onToggleExpand:h,onSelect:p},f.id))]})},J=a=>{const{nodes:i,value:d,onChange:n,multiple:o=!1,label:h,placeholder:p="Select…",disabled:u=!1,clearable:E=!0,searchable:m=!0,expandAll:f=!1,size:O="md",error:w,helperText:y,maxHeight:P=s.DEFAULT_MAX_HEIGHT,className:D,testId:M,...z}=a,[b,j]=l.useState(!1),[L,v]=l.useState(""),C=l.useRef(null),_=l.useRef(null),g=l.useRef(null),[A,B]=l.useState({top:0,left:0,width:0}),q=l.useMemo(()=>N.collectAllIds(i),[i]),[H,G]=l.useState(()=>f?q:new Set),S=l.useMemo(()=>d?new Set(Array.isArray(d)?d:[d]):new Set,[d]);l.useEffect(()=>{if(!b)return;const r=()=>{var c;const t=(c=_.current)==null?void 0:c.getBoundingClientRect();t&&B({top:t.bottom+4,left:Math.max(8,Math.min(t.left,window.innerWidth-t.width-8)),width:t.width})};return r(),window.addEventListener("resize",r),window.addEventListener("scroll",r,!0),()=>{window.removeEventListener("resize",r),window.removeEventListener("scroll",r,!0)}},[b]),l.useEffect(()=>{if(!b)return;const r=t=>{var k,T;const c=t.target;(k=C.current)!=null&&k.contains(c)||(T=g.current)!=null&&T.contains(c)||(j(!1),v(""))};return document.addEventListener("mousedown",r),()=>document.removeEventListener("mousedown",r)},[b]);const W=l.useCallback(r=>{G(t=>{const c=new Set(t);return c.has(r)?c.delete(r):c.add(r),c})},[]),F=l.useCallback(r=>{if(o){const t=new Set(S);t.has(r)?t.delete(r):t.add(r),n==null||n(Array.from(t))}else n==null||n(r),j(!1),v("")},[o,S,n]),V=l.useCallback(()=>{n==null||n(o?[]:"")},[o,n]),R=L?N.filterNodes(i,L):i,X=()=>{if(S.size===0)return e.jsx("span",{className:"bear-text-gray-400 dark:bear-text-zinc-500",children:p});if(o)return e.jsx("div",{className:"bear-flex bear-flex-wrap bear-gap-1",children:Array.from(S).map(t=>{const c=N.findNodeById(i,t);return c?e.jsx("span",{className:s.TAG_CLASSES,children:c.label},t):null})});const r=N.findNodeById(i,Array.from(S)[0]);return(r==null?void 0:r.label)??p};return e.jsxs("div",{ref:C,className:x.cn(s.ROOT_CLASSES,D),"data-testid":M,...z,children:[h&&e.jsx("label",{className:s.LABEL_CLASSES,children:h}),e.jsxs("button",{ref:_,type:"button",disabled:u,onClick:()=>!u&&j(!b),className:x.cn(s.TRIGGER_CLASSES,s.SIZE_CLASSES[O],u&&"bear-opacity-50 bear-cursor-not-allowed"),children:[e.jsx("span",{className:"bear-flex-1 bear-text-left bear-truncate",children:X()}),e.jsxs("div",{className:"bear-flex bear-items-center bear-gap-1",children:[E&&S.size>0&&e.jsx("span",{className:"bear-text-gray-400 hover:bear-text-gray-600 bear-cursor-pointer",onClick:r=>{r.stopPropagation(),V()},children:"✕"}),e.jsx("svg",{className:x.cn("bear-w-4 bear-h-4 bear-text-gray-400 bear-transition-transform",b&&"bear-rotate-180"),fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",children:e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M19 9l-7 7-7-7"})})]})]}),b&&e.jsx(Z.Portal,{children:e.jsxs("div",{ref:g,className:x.cn(s.DROPDOWN_CLASSES,"bear-fixed"),style:{top:A.top,left:A.left,width:A.width,zIndex:U},children:[m&&e.jsx("input",{className:s.SEARCH_CLASSES,placeholder:"Search…",value:L,onChange:r=>v(r.target.value),autoFocus:!0}),e.jsx("div",{style:{maxHeight:P},className:"bear-overflow-y-auto",role:"tree",children:R.length>0?R.map(r=>e.jsx(I,{node:r,depth:0,selected:S,expanded:H,multiple:o,onToggleExpand:W,onSelect:F},r.id)):e.jsx("div",{className:"bear-py-6 bear-text-center bear-text-sm bear-text-gray-400",children:"No results"})})]})}),w&&e.jsx("p",{className:s.ERROR_CLASSES,children:w}),!w&&y&&e.jsx("p",{className:s.HELPER_CLASSES,children:y})]})};exports.TreeSelect=J;

package/dist/components/TreeSelect/TreeSelect.js

@@ -1,18 +1,18 @@
-import { jsxs as p, jsx as r, Fragment as Q } from "react/jsx-runtime";
+import { jsxs as h, jsx as r, Fragment as Q } from "react/jsx-runtime";
 import { useState as N, useRef as C, useMemo as D, useEffect as P, useCallback as y } from "react";
 import { cn as b } from "../../utils/cn.js";
 import { Portal as Y } from "../Portal/Portal.js";
 import { DEFAULT_MAX_HEIGHT as $, LABEL_CLASSES as ee, SIZE_CLASSES as re, TRIGGER_CLASSES as te, SEARCH_CLASSES as ae, DROPDOWN_CLASSES as se, ERROR_CLASSES as ne, HELPER_CLASSES as le, ROOT_CLASSES as ie, TAG_CLASSES as oe, CHEVRON_CLASSES as ce, INDENT_PX as de, NODE_DISABLED_CLASSES as me, NODE_SELECTED_CLASSES as be, NODE_CLASSES as ue } from "./TreeSelect.const.js";
-import { collectAllIds as he, filterNodes as pe, findNodeById as z } from "./TreeSelect.utils.js";
-const Se = 1e4, M = ({ node: a, depth: l, selected: o, expanded: s, multiple: i, onToggleExpand: S, onSelect: f }) => {
+import { collectAllIds as fe, filterNodes as he, findNodeById as z } from "./TreeSelect.utils.js";
+const pe = 1e4, M = ({ node: a, depth: l, selected: o, expanded: s, multiple: i, onToggleExpand: p, onSelect: S }) => {
   const c = a.children && a.children.length > 0, E = s.has(a.id), u = o.has(a.id);
-  return /* @__PURE__ */ p(Q, { children: [
-    /* @__PURE__ */ p(
+  return /* @__PURE__ */ h(Q, { children: [
+    /* @__PURE__ */ h(
       "div",
       {
         className: b(ue, u && be, a.disabled && me),
         style: { paddingLeft: l * de + 12 },
-        onClick: () => !a.disabled && f(a.id),
+        onClick: () => !a.disabled && S(a.id),
         role: "treeitem",
         "aria-selected": u,
         "aria-expanded": c ? E : void 0,
@@ -21,8 +21,8 @@ const Se = 1e4, M = ({ node: a, depth: l, selected: o, expanded: s, multiple: i,
             "svg",
             {
               className: b(ce, E && "bear-rotate-90"),
-              onClick: (h) => {
-                h.stopPropagation(), S(a.id);
+              onClick: (f) => {
+                f.stopPropagation(), p(a.id);
               },
               fill: "none",
               viewBox: "0 0 24 24",
@@ -36,7 +36,7 @@ const Se = 1e4, M = ({ node: a, depth: l, selected: o, expanded: s, multiple: i,
         ]
       }
     ),
-    c && E && a.children.map((h) => /* @__PURE__ */ r(M, { node: h, depth: l + 1, selected: o, expanded: s, multiple: i, onToggleExpand: S, onSelect: f }, h.id))
+    c && E && a.children.map((f) => /* @__PURE__ */ r(M, { node: f, depth: l + 1, selected: o, expanded: s, multiple: i, onToggleExpand: p, onSelect: S }, f.id))
   ] });
 }, Ae = (a) => {
   const {
@@ -44,12 +44,12 @@ const Se = 1e4, M = ({ node: a, depth: l, selected: o, expanded: s, multiple: i,
     value: o,
     onChange: s,
     multiple: i = !1,
-    label: S,
-    placeholder: f = "Select…",
+    label: p,
+    placeholder: S = "Select…",
     disabled: c = !1,
     clearable: E = !0,
     searchable: u = !0,
-    expandAll: h = !1,
+    expandAll: f = !1,
     size: B = "md",
     error: w,
     helperText: _,
@@ -57,7 +57,7 @@ const Se = 1e4, M = ({ node: a, depth: l, selected: o, expanded: s, multiple: i,
     className: j,
     testId: G,
     ...W
-  } = a, [d, x] = N(!1), [L, A] = N(""), g = C(null), R = C(null), k = C(null), [v, F] = N({ top: 0, left: 0, width: 0 }), V = D(() => he(l), [l]), [X, Z] = N(() => h ? V : /* @__PURE__ */ new Set()), m = D(() => o ? new Set(Array.isArray(o) ? o : [o]) : /* @__PURE__ */ new Set(), [o]);
+  } = a, [d, x] = N(!1), [L, A] = N(""), g = C(null), R = C(null), k = C(null), [v, F] = N({ top: 0, left: 0, width: 0 }), V = D(() => fe(l), [l]), [X, Z] = N(() => f ? V : /* @__PURE__ */ new Set()), m = D(() => o ? new Set(Array.isArray(o) ? o : [o]) : /* @__PURE__ */ new Set(), [o]);
   P(() => {
     if (!d) return;
     const e = () => {
@@ -94,19 +94,19 @@ const Se = 1e4, M = ({ node: a, depth: l, selected: o, expanded: s, multiple: i,
       s == null || s(e), x(!1), A("");
   }, [i, m, s]), J = y(() => {
     s == null || s(i ? [] : "");
-  }, [i, s]), T = L ? pe(l, L) : l, K = () => {
-    if (m.size === 0) return /* @__PURE__ */ r("span", { className: "bear-text-gray-400 dark:bear-text-zinc-500", children: f });
+  }, [i, s]), T = L ? he(l, L) : l, K = () => {
+    if (m.size === 0) return /* @__PURE__ */ r("span", { className: "bear-text-gray-400 dark:bear-text-zinc-500", children: S });
     if (i)
       return /* @__PURE__ */ r("div", { className: "bear-flex bear-flex-wrap bear-gap-1", children: Array.from(m).map((t) => {
         const n = z(l, t);
         return n ? /* @__PURE__ */ r("span", { className: oe, children: n.label }, t) : null;
       }) });
     const e = z(l, Array.from(m)[0]);
-    return (e == null ? void 0 : e.label) ?? f;
+    return (e == null ? void 0 : e.label) ?? S;
   };
-  return /* @__PURE__ */ p("div", { ref: g, className: b(ie, j), "data-testid": G, ...W, children: [
-    S && /* @__PURE__ */ r("label", { className: ee, children: S }),
-    /* @__PURE__ */ p(
+  return /* @__PURE__ */ h("div", { ref: g, className: b(ie, j), "data-testid": G, ...W, children: [
+    p && /* @__PURE__ */ r("label", { className: ee, children: p }),
+    /* @__PURE__ */ h(
       "button",
       {
         ref: R,
@@ -116,7 +116,7 @@ const Se = 1e4, M = ({ node: a, depth: l, selected: o, expanded: s, multiple: i,
         className: b(te, re[B], c && "bear-opacity-50 bear-cursor-not-allowed"),
         children: [
           /* @__PURE__ */ r("span", { className: "bear-flex-1 bear-text-left bear-truncate", children: K() }),
-          /* @__PURE__ */ p("div", { className: "bear-flex bear-items-center bear-gap-1", children: [
+          /* @__PURE__ */ h("div", { className: "bear-flex bear-items-center bear-gap-1", children: [
             E && m.size > 0 && /* @__PURE__ */ r("span", { className: "bear-text-gray-400 hover:bear-text-gray-600 bear-cursor-pointer", onClick: (e) => {
               e.stopPropagation(), J();
             }, children: "✕" }),
@@ -125,7 +125,7 @@ const Se = 1e4, M = ({ node: a, depth: l, selected: o, expanded: s, multiple: i,
         ]
       }
     ),
-    d && /* @__PURE__ */ r(Y, { children: /* @__PURE__ */ p(
+    d && /* @__PURE__ */ r(Y, { children: /* @__PURE__ */ h(
       "div",
       {
         ref: k,
@@ -134,7 +134,7 @@ const Se = 1e4, M = ({ node: a, depth: l, selected: o, expanded: s, multiple: i,
           top: v.top,
           left: v.left,
           width: v.width,
-          zIndex: Se
+          zIndex: pe
         },
         children: [
           u && /* @__PURE__ */ r(

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

@@ -7,6 +7,7 @@ export interface TreeNode {
     icon?: React.ReactNode;
 }
 export interface TreeSelectProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    id?: string;
     nodes: TreeNode[];
     value?: string | string[];
     onChange?: (value: string | string[]) => void;