@forgedevstack/bear 1.1.8 → 1.1.9

package/dist/components/Input/Input.js

@@ -1,127 +1,179 @@
-import { jsxs as s, jsx as t } from "react/jsx-runtime";
-import { forwardRef as ae, useContext as te, useState as se, useRef as be, useCallback as B, useEffect as le } from "react";
-import { cn as f } from "../../utils/cn.js";
-import { BearContext as ne } from "../../context/BearProvider.js";
-import { ClearIcon as D } from "./components/ClearIcon/ClearIcon.js";
-import { applyAutoFormat as ce } from "./Input.utils.js";
-import { validateFieldValue as ie } from "../Form/Form.utils.js";
+import { jsxs as u, jsx as t } from "react/jsx-runtime";
+import { forwardRef as se, useContext as be, useState as le, useRef as ne, useCallback as w, useEffect as oe } from "react";
+import { cn as l } from "../../utils/cn.js";
+import { BearContext as ie } from "../../context/BearProvider.js";
+import { ClearIcon as ce } from "./components/ClearIcon/ClearIcon.js";
+import { applyAutoFormat as de } from "./Input.utils.js";
+import { validateFieldValue as fe } from "../Form/Form.utils.js";
 const ue = {
-  sm: "bear-h-8 bear-text-sm bear-px-3",
-  md: "bear-h-10 bear-text-base bear-px-4",
-  lg: "bear-h-12 bear-text-lg bear-px-5"
-}, oe = ae(
+  sm: "bear-h-8",
+  md: "bear-h-10",
+  lg: "bear-h-12"
+}, pe = {
+  sm: "bear-text-sm bear-px-3",
+  md: "bear-text-base bear-px-4",
+  lg: "bear-text-lg bear-px-5"
+}, xe = se(
   ({
-    label: k,
-    helperText: F,
-    error: d,
-    success: N,
-    size: G = "md",
-    leftAddon: p,
-    rightAddon: b,
-    fullWidth: H = !1,
-    clearable: J = !1,
-    onClear: w,
-    showCharCount: v = !1,
+    label: y,
+    helperText: V,
+    error: p,
+    success: B,
+    size: k = "md",
+    InputProps: s,
+    leftAddon: q,
+    rightAddon: D,
+    fullWidth: F = !1,
+    clearable: G = !1,
+    onClear: J,
+    showCharCount: I = !1,
     charCountMax: K,
-    autoFormat: g,
+    autoFormat: x,
     validation: a,
     validateOnBlur: Q,
-    validateOnChange: E = !1,
-    className: T,
-    disabled: x,
-    value: _,
-    defaultValue: y,
-    maxLength: j,
-    onChange: l,
-    onBlur: n,
-    ...U
-  }, W) => {
-    var q;
-    const h = te(ne), e = (q = h == null ? void 0 : h.components) == null ? void 0 : q.Input, X = e == null ? void 0 : e.root, Y = e == null ? void 0 : e.input, Z = e == null ? void 0 : e.label, $ = e == null ? void 0 : e.helper, P = e == null ? void 0 : e.prefix, M = e == null ? void 0 : e.suffix, [S, R] = se(null), z = be(!1), C = a ? Q ?? !0 : !1, L = d || S, c = !!L, O = !!N && !c, i = K ?? j, m = typeof _ == "string" ? _.length : typeof y == "string" ? y.length : 0, A = i != null && m > i, I = J && !x && m > 0, V = L || N || F, u = B(async (r) => {
+    validateOnChange: N = !1,
+    className: U,
+    disabled: m,
+    value: h,
+    defaultValue: g,
+    maxLength: C,
+    onChange: n,
+    onBlur: o,
+    ...W
+  }, X) => {
+    var T;
+    const _ = be(ie), e = (T = _ == null ? void 0 : _.components) == null ? void 0 : T.Input, Y = e == null ? void 0 : e.root, Z = e == null ? void 0 : e.input, $ = e == null ? void 0 : e.label, z = e == null ? void 0 : e.helper, S = e == null ? void 0 : e.prefix, P = e == null ? void 0 : e.suffix, [ee, E] = le(null), j = ne(!1), A = a ? Q ?? !0 : !1, R = p || ee, b = !!R, i = !!B && !b, c = K ?? C, v = typeof h == "string" ? h.length : typeof g == "string" ? g.length : 0, L = c != null && v > c, re = G && !m && v > 0, M = (s == null ? void 0 : s.startAdornment) ?? q, H = (s == null ? void 0 : s.endAdornment) ?? D, O = R || B || V, d = w(async (r) => {
       if (!a) return;
-      z.current = !0;
-      const o = await ie(r, a);
-      z.current = !1, R(o);
+      j.current = !0;
+      const f = await fe(r, a);
+      j.current = !1, E(f);
     }, [a]);
-    le(() => {
-      d && R(null);
-    }, [d]);
-    const ee = B(
+    oe(() => {
+      p && E(null);
+    }, [p]);
+    const ae = w(
       (r) => {
-        if (g) {
-          const o = ce(r.target.value, g);
-          o !== r.target.value && (r.target.value = o);
+        if (x) {
+          const f = de(r.target.value, x);
+          f !== r.target.value && (r.target.value = f);
         }
-        l == null || l(r), E && a && u(r.target.value);
+        n == null || n(r), N && a && d(r.target.value);
       },
-      [g, l, E, a, u]
-    ), re = B(
+      [x, n, N, a, d]
+    ), te = w(
       (r) => {
-        n == null || n(r), C && a && u(r.target.value);
+        o == null || o(r), A && a && d(r.target.value);
       },
-      [n, C, a, u]
+      [o, A, a, d]
     );
-    return /* @__PURE__ */ s("div", { className: f("Bear-Input bear-flex bear-flex-col bear-gap-1.5", H && "bear-w-full"), style: X, children: [
-      k && /* @__PURE__ */ t("label", { className: "Bear-Input__label bear-text-sm bear-font-medium bear-text-gray-700 dark:bear-text-gray-300", style: Z, children: k }),
-      /* @__PURE__ */ s("div", { className: "Bear-Input__wrapper bear-relative bear-flex bear-items-center", children: [
-        p && /* @__PURE__ */ t("div", { className: "Bear-Input__addon Bear-Input__addon--left bear-absolute bear-left-3 bear-text-gray-500 dark:bear-text-gray-400", style: P, children: p }),
-        /* @__PURE__ */ t(
-          "input",
-          {
-            ref: W,
-            disabled: x,
-            value: _,
-            defaultValue: y,
-            maxLength: j,
-            "aria-invalid": c || void 0,
-            onChange: ee,
-            onBlur: re,
-            className: f(
-              "Bear-Input__field",
-              "bear-w-full bear-rounded-lg bear-border bear-outline-none bear-transition-all bear-duration-200",
-              "bear-bg-white bear-text-gray-900 placeholder:bear-text-gray-400",
-              "bear-border-gray-300 focus:bear-ring-2 focus:bear-ring-offset-2 focus:bear-ring-offset-white",
-              "dark:bear-bg-gray-800 dark:bear-text-white dark:placeholder:bear-text-gray-500 dark:bear-border-gray-600 dark:focus:bear-ring-offset-gray-900",
-              c ? "Bear-Input__field--error bear-border-red-500 focus:bear-ring-red-500" : O ? "Bear-Input__field--success bear-border-green-500 focus:bear-ring-green-500" : "focus:bear-border-bear-500 focus:bear-ring-bear-500 dark:focus:bear-border-bear-500 dark:focus:bear-ring-bear-500",
-              x && "Bear-Input__field--disabled bear-opacity-50 bear-cursor-not-allowed",
-              p && "bear-pl-10",
-              (b || I) && "bear-pr-10",
-              ue[G],
-              T
+    return /* @__PURE__ */ u("div", { className: l("Bear-Input bear-flex bear-flex-col bear-gap-1.5", F && "bear-w-full"), style: Y, children: [
+      y && /* @__PURE__ */ t("label", { className: "Bear-Input__label bear-text-sm bear-font-medium", style: { color: "var(--bear-text-secondary)", ...$ }, children: y }),
+      /* @__PURE__ */ u(
+        "div",
+        {
+          className: l(
+            "Bear-Input__wrapper bear-flex bear-items-center bear-rounded-lg bear-border bear-overflow-hidden bear-transition-all bear-duration-200",
+            "focus-within:bear-ring-2 focus-within:bear-ring-offset-2",
+            "focus-within:bear-ring-offset-[var(--bear-bg-primary)]",
+            b ? "Bear-Input__wrapper--error bear-border-red-500 focus-within:bear-ring-red-500" : i ? "Bear-Input__wrapper--success bear-border-green-500 focus-within:bear-ring-green-500" : "focus-within:bear-border-bear-500 focus-within:bear-ring-bear-500 dark:focus-within:bear-border-bear-500 dark:focus-within:bear-ring-bear-500",
+            m && "bear-opacity-50 bear-cursor-not-allowed",
+            ue[k]
+          ),
+          style: {
+            backgroundColor: "var(--bear-bg-primary)",
+            borderColor: b || i ? void 0 : "var(--bear-border-default)"
+          },
+          children: [
+            M && /* @__PURE__ */ t(
+              "div",
+              {
+                className: "Bear-Input__addon Bear-Input__addon--left bear-flex bear-items-center bear-self-stretch bear-shrink-0 bear-px-3 bear-text-sm bear-font-medium bear-select-none bear-pointer-events-none",
+                style: {
+                  backgroundColor: "var(--bear-bg-tertiary)",
+                  borderRight: "1px solid var(--bear-border-default)",
+                  color: "var(--bear-text-secondary)",
+                  ...S
+                },
+                children: M
+              }
             ),
-            style: Y,
-            ...U
-          }
-        ),
-        I && !b && /* @__PURE__ */ t("div", { className: "Bear-Input__addon Bear-Input__addon--right bear-absolute bear-right-3 bear-text-gray-500 dark:bear-text-gray-400", style: M, children: /* @__PURE__ */ t(D, { onClick: w }) }),
-        b && /* @__PURE__ */ s("div", { className: "Bear-Input__addon Bear-Input__addon--right bear-absolute bear-right-3 bear-flex bear-items-center bear-gap-1.5 bear-text-gray-500 dark:bear-text-gray-400", style: M, children: [
-          I && /* @__PURE__ */ t(D, { onClick: w }),
-          b
-        ] })
-      ] }),
-      /* @__PURE__ */ s("div", { className: "Bear-Input__footer bear-flex bear-items-center bear-justify-between bear-gap-2", children: [
-        V ? /* @__PURE__ */ t(
+            /* @__PURE__ */ t(
+              "input",
+              {
+                ref: X,
+                disabled: m,
+                value: h,
+                defaultValue: g,
+                maxLength: C,
+                "aria-invalid": b || void 0,
+                onChange: ae,
+                onBlur: te,
+                className: l(
+                  "Bear-Input__field",
+                  "bear-flex-1 bear-min-w-0 bear-h-full bear-border-0 bear-outline-none bear-bg-transparent",
+                  "placeholder:opacity-100 placeholder:[color:var(--bear-text-muted)]",
+                  pe[k],
+                  U
+                ),
+                style: {
+                  color: "var(--bear-text-primary)",
+                  ...Z
+                },
+                ...W
+              }
+            ),
+            re && /* @__PURE__ */ t(
+              "div",
+              {
+                className: "Bear-Input__clear bear-flex bear-items-center bear-self-stretch bear-shrink-0 bear-px-2 bear-cursor-pointer",
+                style: { color: "var(--bear-text-muted)" },
+                children: /* @__PURE__ */ t(ce, { onClick: J })
+              }
+            ),
+            H && /* @__PURE__ */ t(
+              "div",
+              {
+                className: "Bear-Input__addon Bear-Input__addon--right bear-flex bear-items-center bear-self-stretch bear-shrink-0 bear-px-3 bear-gap-1.5",
+                style: {
+                  backgroundColor: "var(--bear-bg-tertiary)",
+                  borderLeft: "1px solid var(--bear-border-default)",
+                  color: "var(--bear-text-secondary)",
+                  ...P
+                },
+                children: H
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ u("div", { className: "Bear-Input__footer bear-flex bear-items-center bear-justify-between bear-gap-2", children: [
+        O ? /* @__PURE__ */ t(
           "p",
           {
-            className: f(
+            className: l(
               "Bear-Input__helper bear-text-sm bear-flex-1",
-              c ? "Bear-Input__helper--error bear-text-red-500" : O ? "Bear-Input__helper--success bear-text-green-500" : "bear-text-gray-500 dark:bear-text-gray-400"
+              b && "Bear-Input__helper--error bear-text-red-500",
+              i && "Bear-Input__helper--success bear-text-green-500"
             ),
-            style: $,
-            children: V
+            style: {
+              ...b || i ? {} : { color: "var(--bear-text-muted)" },
+              ...z
+            },
+            children: O
           }
-        ) : v ? /* @__PURE__ */ t("span", {}) : null,
-        v && i != null && /* @__PURE__ */ s(
+        ) : I ? /* @__PURE__ */ t("span", {}) : null,
+        I && c != null && /* @__PURE__ */ u(
           "span",
           {
-            className: f(
+            className: l(
               "Bear-Input__char-count bear-text-xs bear-tabular-nums bear-shrink-0",
-              A ? "bear-text-red-500" : "bear-text-gray-400 dark:bear-text-gray-500"
+              L && "bear-text-red-500"
             ),
+            style: L ? void 0 : { color: "var(--bear-text-muted)" },
             children: [
-              m,
+              v,
               "/",
-              i
+              c
             ]
           }
         )
@@ -129,7 +181,7 @@ const ue = {
     ] });
   }
 );
-oe.displayName = "Input";
+xe.displayName = "Input";
 export {
-  oe as Input
+  xe as Input
 };

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

@@ -1,6 +1,10 @@
 import { InputHTMLAttributes, ReactNode } from 'react';
 import { ValidationRule } from '../Form/Form.types';
 export type AutoFormatType = 'capitalize' | 'uppercase' | 'lowercase' | 'titleCase' | 'sentenceCase' | 'none';
+export interface InputPropsInput {
+    startAdornment?: ReactNode;
+    endAdornment?: ReactNode;
+}
 export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
     /** Input label */
     label?: string;
@@ -12,9 +16,11 @@ export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
     success?: string;
     /** Input size */
     size?: 'sm' | 'md' | 'lg';
-    /** Left addon */
+    /** Start/end slots (takes precedence over leftAddon/rightAddon when set) */
+    InputProps?: InputPropsInput;
+    /** Left addon (legacy; use InputProps.startAdornment for start slot) */
     leftAddon?: ReactNode;
-    /** Right addon */
+    /** Right addon (legacy; use InputProps.endAdornment for end slot) */
     rightAddon?: ReactNode;
     /** Whether input is full width */
     fullWidth?: boolean;

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

@@ -1,2 +1,2 @@
 export { Input } from './Input';
-export type { InputProps, AutoFormatType } from './Input.types';
+export type { InputProps, InputPropsInput, AutoFormatType } from './Input.types';

package/dist/components/Popover/Popover.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),a=require("react"),u=require("../../utils/cn.cjs"),S=({children:p,content:v,placement:b="bottom",trigger:l="click",open:c,onOpenChange:o,className:h,contentClassName:y,arrow:x=!0,closeOnClickOutside:f=!0,closeOnEscape:d=!0,offset:m=8})=>{const[g,k]=a.useState(!1),s=a.useRef(null),E=a.useRef(null),t=c!==void 0?c:g,r=a.useCallback(e=>{k(e),o==null||o(e)},[o]);a.useEffect(()=>{if(!f)return;const e=i=>{s.current&&!s.current.contains(i.target)&&r(!1)};return t&&document.addEventListener("mousedown",e),()=>document.removeEventListener("mousedown",e)},[t,f,r]),a.useEffect(()=>{if(!d)return;const e=i=>{i.key==="Escape"&&r(!1)};return t&&document.addEventListener("keydown",e),()=>document.removeEventListener("keydown",e)},[t,d,r]);const w=()=>{l==="click"&&r(!t)},z=()=>{l==="hover"&&r(!0)},j=()=>{l==="hover"&&r(!1)},L={top:"bear-bottom-full bear-left-1/2 -bear-translate-x-1/2 bear-mb-2","top-start":"bear-bottom-full bear-left-0 bear-mb-2","top-end":"bear-bottom-full bear-right-0 bear-mb-2",bottom:"bear-top-full bear-left-1/2 -bear-translate-x-1/2 bear-mt-2","bottom-start":"bear-top-full bear-left-0 bear-mt-2","bottom-end":"bear-top-full bear-right-0 bear-mt-2",left:"bear-right-full bear-top-1/2 -bear-translate-y-1/2 bear-mr-2","left-start":"bear-right-full bear-top-0 bear-mr-2","left-end":"bear-right-full bear-bottom-0 bear-mr-2",right:"bear-left-full bear-top-1/2 -bear-translate-y-1/2 bear-ml-2","right-start":"bear-left-full bear-top-0 bear-ml-2","right-end":"bear-left-full bear-bottom-0 bear-ml-2"},R={top:"bear-top-full bear-left-1/2 -bear-translate-x-1/2 bear-border-t-zinc-700 bear-border-x-transparent bear-border-b-transparent",bottom:"bear-bottom-full bear-left-1/2 -bear-translate-x-1/2 bear-border-b-zinc-700 bear-border-x-transparent bear-border-t-transparent",left:"bear-left-full bear-top-1/2 -bear-translate-y-1/2 bear-border-l-zinc-700 bear-border-y-transparent bear-border-r-transparent",right:"bear-right-full bear-top-1/2 -bear-translate-y-1/2 bear-border-r-zinc-700 bear-border-y-transparent bear-border-l-transparent"},M=b.split("-")[0];return n.jsxs("div",{ref:s,className:u.cn("bear-relative bear-inline-block",h),onMouseEnter:z,onMouseLeave:j,children:[n.jsx("div",{onClick:w,className:"bear-cursor-pointer",children:p}),t&&n.jsxs("div",{ref:E,className:u.cn("bear-absolute bear-z-50 bear-bg-zinc-800 bear-border bear-border-zinc-700 bear-rounded-lg bear-shadow-xl bear-p-3",L[b],y),style:{marginTop:b.startsWith("bottom")?m:void 0,marginBottom:b.startsWith("top")?m:void 0},children:[v,x&&n.jsx("div",{className:u.cn("bear-absolute bear-w-0 bear-h-0 bear-border-8",R[M])})]})]})};exports.Popover=S;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react/jsx-runtime"),l=require("react"),D=require("react-dom"),p=require("../../utils/cn.cjs"),H=1e4;function X(f,t,a){const e={position:"fixed",zIndex:H},s=f.split("-")[0],r=f.includes("start"),n=f.includes("end");return s==="bottom"?(e.top=t.bottom+a,r?e.left=t.left:n?e.left=t.right:e.left=t.left+t.width/2):s==="top"?(e.bottom=window.innerHeight-t.top+a,r?e.left=t.left:n?e.left=t.right:e.left=t.left+t.width/2):s==="left"?(e.right=window.innerWidth-t.left+a,r?e.top=t.top:n?e.bottom=window.innerHeight-t.bottom:e.top=t.top+t.height/2):(e.left=t.right+a,r?e.top=t.top:n?e.bottom=window.innerHeight-t.bottom:e.top=t.top+t.height/2),s==="bottom"||s==="top"?!r&&!n?e.transform="translateX(-50%)":n&&(e.transform="translateX(-100%)"):!r&&!n?e.transform="translateY(-50%)":n&&(e.transform="translateY(-100%)"),e}const T=({children:f,content:t,placement:a="bottom",trigger:e="click",open:s,onOpenChange:r,className:n,contentClassName:E,arrow:k=!0,closeOnClickOutside:m=!0,closeOnEscape:h=!0,offset:v=8})=>{const[z,R]=l.useState(!1),[S,j]=l.useState({}),d=l.useRef(null),w=l.useRef(null),i=s!==void 0?s:z,b=l.useCallback(o=>{R(o),r==null||r(o)},[r]);l.useEffect(()=>{if(i&&d.current){const o=d.current.getBoundingClientRect();j(X(a,o,v))}},[i,a,v]),l.useEffect(()=>{if(!m)return;const o=c=>{var g,x;const y=c.target;(g=d.current)!=null&&g.contains(y)||(x=w.current)!=null&&x.contains(y)||b(!1)};return i&&document.addEventListener("mousedown",o),()=>document.removeEventListener("mousedown",o)},[i,m,b]),l.useEffect(()=>{if(!h)return;const o=c=>{c.key==="Escape"&&b(!1)};return i&&document.addEventListener("keydown",o),()=>document.removeEventListener("keydown",o)},[i,h,b]);const L=()=>{e==="click"&&b(!i)},P=()=>{e==="hover"&&b(!0)},M=()=>{e==="hover"&&b(!1)},N={top:"bear-top-full bear-left-1/2 -bear-translate-x-1/2 bear-border-t-zinc-700 bear-border-x-transparent bear-border-b-transparent",bottom:"bear-bottom-full bear-left-1/2 -bear-translate-x-1/2 bear-border-b-zinc-700 bear-border-x-transparent bear-border-t-transparent",left:"bear-left-full bear-top-1/2 -bear-translate-y-1/2 bear-border-l-zinc-700 bear-border-y-transparent bear-border-r-transparent",right:"bear-right-full bear-top-1/2 -bear-translate-y-1/2 bear-border-r-zinc-700 bear-border-y-transparent bear-border-l-transparent"},q=a.split("-")[0],I=i&&typeof document<"u"&&D.createPortal(u.jsxs("div",{ref:w,"data-bear-popover":!0,className:p.cn("bear-bg-zinc-800 bear-border bear-border-zinc-700 bear-rounded-lg bear-shadow-xl bear-p-3",E),style:S,children:[t,k&&u.jsx("div",{className:p.cn("bear-absolute bear-w-0 bear-h-0 bear-border-8",N[q])})]}),document.body);return u.jsxs("div",{ref:d,className:p.cn("bear-relative bear-inline-block",n),onMouseEnter:P,onMouseLeave:M,children:[u.jsx("div",{onClick:L,className:"bear-cursor-pointer",children:f}),I]})};exports.Popover=T;

package/dist/components/Popover/Popover.js

@@ -1,93 +1,93 @@
-import { jsxs as c, jsx as m } from "react/jsx-runtime";
-import { useState as I, useRef as p, useCallback as T, useEffect as h } from "react";
-import { cn as s } from "../../utils/cn.js";
-const P = ({
-  children: v,
-  content: y,
+import { jsxs as x, jsx as E } from "react/jsx-runtime";
+import { useState as k, useRef as z, useCallback as B, useEffect as u } from "react";
+import { createPortal as T } from "react-dom";
+import { cn as c } from "../../utils/cn.js";
+const W = 1e4;
+function Z(b, t, a) {
+  const e = { position: "fixed", zIndex: W }, s = b.split("-")[0], r = b.includes("start"), o = b.includes("end");
+  return s === "bottom" ? (e.top = t.bottom + a, r ? e.left = t.left : o ? e.left = t.right : e.left = t.left + t.width / 2) : s === "top" ? (e.bottom = window.innerHeight - t.top + a, r ? e.left = t.left : o ? e.left = t.right : e.left = t.left + t.width / 2) : s === "left" ? (e.right = window.innerWidth - t.left + a, r ? e.top = t.top : o ? e.bottom = window.innerHeight - t.bottom : e.top = t.top + t.height / 2) : (e.left = t.right + a, r ? e.top = t.top : o ? e.bottom = window.innerHeight - t.bottom : e.top = t.top + t.height / 2), s === "bottom" || s === "top" ? !r && !o ? e.transform = "translateX(-50%)" : o && (e.transform = "translateX(-100%)") : !r && !o ? e.transform = "translateY(-50%)" : o && (e.transform = "translateY(-100%)"), e;
+}
+const F = ({
+  children: b,
+  content: t,
   placement: a = "bottom",
-  trigger: o = "click",
-  open: i,
-  onOpenChange: b,
-  className: x,
-  contentClassName: k,
-  arrow: g = !0,
-  closeOnClickOutside: f = !0,
-  closeOnEscape: d = !0,
-  offset: u = 8
+  trigger: e = "click",
+  open: s,
+  onOpenChange: r,
+  className: o,
+  contentClassName: L,
+  arrow: N = !0,
+  closeOnClickOutside: p = !0,
+  closeOnEscape: m = !0,
+  offset: h = 8
 }) => {
-  const [w, E] = I(!1), l = p(null), z = p(null), t = i !== void 0 ? i : w, r = T((e) => {
-    E(e), b == null || b(e);
-  }, [b]);
-  h(() => {
-    if (!f) return;
-    const e = (n) => {
-      l.current && !l.current.contains(n.target) && r(!1);
+  const [I, M] = k(!1), [P, R] = k({}), f = z(null), v = z(null), i = s !== void 0 ? s : I, l = B((n) => {
+    M(n), r == null || r(n);
+  }, [r]);
+  u(() => {
+    if (i && f.current) {
+      const n = f.current.getBoundingClientRect();
+      R(Z(a, n, h));
+    }
+  }, [i, a, h]), u(() => {
+    if (!p) return;
+    const n = (d) => {
+      var y, g;
+      const w = d.target;
+      (y = f.current) != null && y.contains(w) || (g = v.current) != null && g.contains(w) || l(!1);
     };
-    return t && document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
-  }, [t, f, r]), h(() => {
-    if (!d) return;
-    const e = (n) => {
-      n.key === "Escape" && r(!1);
+    return i && document.addEventListener("mousedown", n), () => document.removeEventListener("mousedown", n);
+  }, [i, p, l]), u(() => {
+    if (!m) return;
+    const n = (d) => {
+      d.key === "Escape" && l(!1);
     };
-    return t && document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
-  }, [t, d, r]);
-  const L = () => {
-    o === "click" && r(!t);
-  }, M = () => {
-    o === "hover" && r(!0);
-  }, N = () => {
-    o === "hover" && r(!1);
-  }, R = {
-    top: "bear-bottom-full bear-left-1/2 -bear-translate-x-1/2 bear-mb-2",
-    "top-start": "bear-bottom-full bear-left-0 bear-mb-2",
-    "top-end": "bear-bottom-full bear-right-0 bear-mb-2",
-    bottom: "bear-top-full bear-left-1/2 -bear-translate-x-1/2 bear-mt-2",
-    "bottom-start": "bear-top-full bear-left-0 bear-mt-2",
-    "bottom-end": "bear-top-full bear-right-0 bear-mt-2",
-    left: "bear-right-full bear-top-1/2 -bear-translate-y-1/2 bear-mr-2",
-    "left-start": "bear-right-full bear-top-0 bear-mr-2",
-    "left-end": "bear-right-full bear-bottom-0 bear-mr-2",
-    right: "bear-left-full bear-top-1/2 -bear-translate-y-1/2 bear-ml-2",
-    "right-start": "bear-left-full bear-top-0 bear-ml-2",
-    "right-end": "bear-left-full bear-bottom-0 bear-ml-2"
-  }, S = {
+    return i && document.addEventListener("keydown", n), () => document.removeEventListener("keydown", n);
+  }, [i, m, l]);
+  const S = () => {
+    e === "click" && l(!i);
+  }, H = () => {
+    e === "hover" && l(!0);
+  }, X = () => {
+    e === "hover" && l(!1);
+  }, j = {
     top: "bear-top-full bear-left-1/2 -bear-translate-x-1/2 bear-border-t-zinc-700 bear-border-x-transparent bear-border-b-transparent",
     bottom: "bear-bottom-full bear-left-1/2 -bear-translate-x-1/2 bear-border-b-zinc-700 bear-border-x-transparent bear-border-t-transparent",
     left: "bear-left-full bear-top-1/2 -bear-translate-y-1/2 bear-border-l-zinc-700 bear-border-y-transparent bear-border-r-transparent",
     right: "bear-right-full bear-top-1/2 -bear-translate-y-1/2 bear-border-r-zinc-700 bear-border-y-transparent bear-border-l-transparent"
-  }, j = a.split("-")[0];
-  return /* @__PURE__ */ c(
+  }, D = a.split("-")[0], Y = i && typeof document < "u" && T(
+    /* @__PURE__ */ x(
+      "div",
+      {
+        ref: v,
+        "data-bear-popover": !0,
+        className: c(
+          "bear-bg-zinc-800 bear-border bear-border-zinc-700 bear-rounded-lg bear-shadow-xl bear-p-3",
+          L
+        ),
+        style: P,
+        children: [
+          t,
+          N && /* @__PURE__ */ E("div", { className: c("bear-absolute bear-w-0 bear-h-0 bear-border-8", j[D]) })
+        ]
+      }
+    ),
+    document.body
+  );
+  return /* @__PURE__ */ x(
     "div",
     {
-      ref: l,
-      className: s("bear-relative bear-inline-block", x),
-      onMouseEnter: M,
-      onMouseLeave: N,
+      ref: f,
+      className: c("bear-relative bear-inline-block", o),
+      onMouseEnter: H,
+      onMouseLeave: X,
       children: [
-        /* @__PURE__ */ m("div", { onClick: L, className: "bear-cursor-pointer", children: v }),
-        t && /* @__PURE__ */ c(
-          "div",
-          {
-            ref: z,
-            className: s(
-              "bear-absolute bear-z-50 bear-bg-zinc-800 bear-border bear-border-zinc-700 bear-rounded-lg bear-shadow-xl bear-p-3",
-              R[a],
-              k
-            ),
-            style: { marginTop: a.startsWith("bottom") ? u : void 0, marginBottom: a.startsWith("top") ? u : void 0 },
-            children: [
-              y,
-              g && /* @__PURE__ */ m("div", { className: s(
-                "bear-absolute bear-w-0 bear-h-0 bear-border-8",
-                S[j]
-              ) })
-            ]
-          }
-        )
+        /* @__PURE__ */ E("div", { onClick: S, className: "bear-cursor-pointer", children: b }),
+        Y
       ]
     }
   );
 };
 export {
-  P as Popover
+  F as Popover
 };

package/dist/components/Select/Select.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),n=require("react"),a=require("../../utils/cn.cjs"),j=require("../../hooks/useClickOutside.cjs");require("../../context/BearProvider.cjs");require("../../hooks/useBearComponent/useBearComponent.cjs");const f=require("../Icon/index.cjs"),N={sm:"bear-h-8 bear-text-sm bear-px-3",md:"bear-h-10 bear-text-base bear-px-4",lg:"bear-h-12 bear-text-lg bear-px-5"},p=({options:i,value:t,onChange:s,placeholder:g="Select an option",label:u,error:l,disabled:c=!1,size:y="md",fullWidth:h=!1,className:m})=>{const[o,d]=n.useState(!1),x=n.useRef(null),k=!!l,b=i.find(e=>e.value===t),w=n.useCallback(()=>d(!1),[]);j.useClickOutside(x,w);const v=e=>{s==null||s(e),d(!1)};return r.jsxs("div",{ref:x,className:a.cn("bear-relative bear-flex bear-flex-col bear-gap-1.5",h&&"bear-w-full"),children:[u&&r.jsx("label",{className:"bear-text-sm bear-font-medium bear-text-gray-700 dark:bear-text-gray-300",children:u}),r.jsxs("button",{type:"button",disabled:c,onClick:()=>!c&&d(!o),className:a.cn("bear-flex bear-items-center bear-justify-between bear-w-full","bear-rounded-lg bear-border bear-text-left bear-outline-none bear-transition-all bear-duration-200","bear-bg-white bear-text-gray-900 bear-border-gray-300","focus:bear-ring-2 focus:bear-ring-offset-2 focus:bear-ring-offset-white","dark:bear-bg-gray-800 dark:bear-text-white dark:bear-border-gray-600 dark:focus:bear-ring-offset-gray-900",k?"bear-border-red-500 focus:bear-ring-red-500":"focus:bear-border-bear-500 focus:bear-ring-bear-500 dark:focus:bear-border-bear-500 dark:focus:bear-ring-bear-500",c&&"bear-opacity-50 bear-cursor-not-allowed",N[y],m),children:[r.jsx("span",{className:b?"bear-text-gray-900 dark:bear-text-white":"bear-text-gray-500 dark:bear-text-gray-500",children:(b==null?void 0:b.label)||g}),r.jsx(f.ChevronDownIcon,{className:a.cn("bear-w-4 bear-h-4 bear-text-gray-500 dark:bear-text-gray-400 bear-transition-transform",o&&"bear-rotate-180")})]}),o&&r.jsx("div",{className:a.cn("bear-absolute bear-z-50 bear-w-full bear-mt-1","bear-rounded-lg bear-border bear-shadow-lg bear-overflow-hidden bear-top-full","bear-bg-white bear-border-gray-200 dark:bear-bg-gray-800 dark:bear-border-gray-600"),children:r.jsx("div",{className:"bear-max-h-60 bear-overflow-y-auto",children:i.map(e=>r.jsxs("button",{type:"button",disabled:e.disabled,onClick:()=>!e.disabled&&v(e.value),className:a.cn("bear-flex bear-items-center bear-justify-between bear-w-full bear-px-4 bear-py-2","bear-text-left bear-transition-colors",e.disabled?"bear-text-gray-500 bear-cursor-not-allowed":"bear-text-gray-700 dark:bear-text-gray-300 hover:bear-bg-gray-100 hover:bear-text-gray-900 dark:hover:bear-bg-gray-700 dark:hover:bear-text-white",e.value===t&&"bear-bg-bear-100 bear-text-bear-700 dark:bear-bg-bear-600/20 dark:bear-text-bear-300"),children:[e.label,e.value===t&&r.jsx(f.CheckIcon,{className:"bear-w-4 bear-h-4 bear-text-bear-600 dark:bear-text-bear-400"})]},e.value))})}),l&&r.jsx("p",{className:"bear-text-sm bear-text-red-500",children:l})]})};exports.Select=p;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),n=require("react"),s=require("../../utils/cn.cjs"),j=require("../../hooks/useClickOutside.cjs");require("../../context/BearProvider.cjs");require("../../hooks/useBearComponent/useBearComponent.cjs");const m=require("../Icon/index.cjs"),p={sm:"bear-h-8 bear-text-sm bear-px-3",md:"bear-h-10 bear-text-base bear-px-4",lg:"bear-h-12 bear-text-lg bear-px-5"},N=({options:u,value:a,onChange:t,placeholder:v="Select an option",label:i,error:l,disabled:o=!1,size:y="md",fullWidth:g=!1,className:h})=>{const[c,d]=n.useState(!1),f=n.useRef(null),x=!!l,b=u.find(e=>e.value===a),k=n.useCallback(()=>d(!1),[]);j.useClickOutside(f,k);const w=e=>{t==null||t(e),d(!1)};return r.jsxs("div",{ref:f,className:s.cn("bear-relative bear-flex bear-flex-col bear-gap-1.5",g&&"bear-w-full"),children:[i&&r.jsx("label",{className:"bear-text-sm bear-font-medium",style:{color:"var(--bear-text-secondary)"},children:i}),r.jsxs("button",{type:"button",disabled:o,onClick:()=>!o&&d(!c),className:s.cn("bear-flex bear-items-center bear-justify-between bear-w-full","bear-rounded-lg bear-border bear-text-left bear-outline-none bear-transition-all bear-duration-200","focus:bear-ring-2 focus:bear-ring-offset-2 focus:bear-ring-offset-[var(--bear-bg-primary)]",x?"bear-border-red-500 focus:bear-ring-red-500":"focus:bear-border-bear-500 focus:bear-ring-bear-500 dark:focus:bear-border-bear-500 dark:focus:bear-ring-bear-500",o&&"bear-opacity-50 bear-cursor-not-allowed",p[y],h),style:{backgroundColor:"var(--bear-bg-primary)",borderColor:x?void 0:"var(--bear-border-default)",color:b?"var(--bear-text-primary)":"var(--bear-text-muted)"},children:[r.jsx("span",{children:(b==null?void 0:b.label)||v}),r.jsx(m.ChevronDownIcon,{className:s.cn("bear-w-4 bear-h-4 bear-shrink-0 bear-transition-transform",c&&"bear-rotate-180"),style:{color:"var(--bear-text-muted)"}})]}),c&&r.jsx("div",{className:"bear-absolute bear-z-50 bear-w-full bear-mt-1 bear-rounded-lg bear-border bear-shadow-lg bear-overflow-hidden bear-top-full",style:{backgroundColor:"var(--bear-bg-primary)",borderColor:"var(--bear-border-default)"},children:r.jsx("div",{className:"bear-max-h-60 bear-overflow-y-auto",children:u.map(e=>r.jsxs("button",{type:"button",disabled:e.disabled,onClick:()=>!e.disabled&&w(e.value),className:s.cn("bear-flex bear-items-center bear-justify-between bear-w-full bear-px-4 bear-py-2","bear-text-left bear-transition-colors",e.disabled&&"bear-cursor-not-allowed",e.value===a&&"bear-bg-bear-100 bear-text-bear-700 dark:bear-bg-bear-600/20 dark:bear-text-bear-300",!e.disabled&&e.value!==a&&"hover:bear-bg-[var(--bear-bg-tertiary)]"),style:e.disabled?{color:"var(--bear-text-muted)"}:e.value===a?void 0:{color:"var(--bear-text-secondary)"},children:[e.label,e.value===a&&r.jsx(m.CheckIcon,{className:"bear-w-4 bear-h-4 bear-shrink-0 bear-text-bear-600 dark:bear-text-bear-400"})]},e.value))})}),l&&r.jsx("p",{className:"bear-text-sm bear-text-red-500",children:l})]})};exports.Select=N;