@forgedevstack/bear 1.0.5 → 1.0.6

package/dist/components/CreditInput/CreditInput.utils.d.ts

@@ -0,0 +1,48 @@
+import { CardType, CreditCardValue } from './CreditInput.types';
+/**
+ * Detect card type from card number
+ */
+export declare const detectCardType: (number: string) => CardType;
+/**
+ * Format card number with spaces
+ */
+export declare const formatCardNumber: (number: string, cardType: CardType) => string;
+/**
+ * Format expiry date as MM/YY
+ */
+export declare const formatExpiry: (value: string) => string;
+/**
+ * Parse expiry date to month and year
+ */
+export declare const parseExpiry: (value: string) => {
+    month: string;
+    year: string;
+};
+/**
+ * Validate card number using Luhn algorithm
+ */
+export declare const validateLuhn: (number: string) => boolean;
+/**
+ * Validate card number length
+ */
+export declare const validateCardLength: (number: string, cardType: CardType) => boolean;
+/**
+ * Validate CVV length
+ */
+export declare const validateCvvLength: (cvv: string, cardType: CardType) => boolean;
+/**
+ * Validate expiry date
+ */
+export declare const validateExpiry: (month: string, year: string) => boolean;
+/**
+ * Create credit card value object
+ */
+export declare const createCreditCardValue: (number: string, expiry: string, cvv: string, name?: string) => CreditCardValue;
+/**
+ * Get max CVV length for card type
+ */
+export declare const getMaxCvvLength: (cardType: CardType) => number;
+/**
+ * Get max card number length for card type
+ */
+export declare const getMaxCardLength: (cardType: CardType) => number;

package/dist/components/CreditInput/CreditInput.utils.js

@@ -0,0 +1,79 @@
+import { CARD_PATTERNS as f, CARD_NUMBER_LENGTHS as i, CARD_FORMATS as u, CVV_LENGTHS as c } from "./CreditInput.const.js";
+const h = (e) => {
+  const t = e.replace(/\D/g, ""), n = ["amex", "diners", "discover", "jcb", "unionpay", "mastercard", "visa"];
+  for (const r of n)
+    if (f[r].test(t))
+      return r;
+  return "unknown";
+}, m = (e, t) => {
+  const n = e.replace(/\D/g, ""), r = u[t] || u.unknown;
+  let s = "", o = 0;
+  for (const a of r) {
+    if (o >= n.length) break;
+    s && (s += " "), s += n.slice(o, o + a), o += a;
+  }
+  return s;
+}, L = (e) => {
+  const t = e.replace(/\D/g, "");
+  if (t.length === 0) return "";
+  if (t.length === 1)
+    return parseInt(t) > 1 ? `0${t}/` : t;
+  if (t.length === 2)
+    return parseInt(t) > 12 ? `0${t[0]}/${t[1]}` : `${t}/`;
+  const n = t.slice(0, 2), r = t.slice(2, 4);
+  return `${n}/${r}`;
+}, v = (e) => {
+  const t = e.split("/");
+  return {
+    month: t[0] || "",
+    year: t[1] || ""
+  };
+}, y = (e) => {
+  const t = e.replace(/\D/g, "");
+  if (t.length === 0) return !1;
+  let n = 0, r = !1;
+  for (let s = t.length - 1; s >= 0; s--) {
+    let o = parseInt(t[s], 10);
+    r && (o *= 2, o > 9 && (o -= 9)), n += o, r = !r;
+  }
+  return n % 10 === 0;
+}, x = (e, t) => {
+  const n = e.replace(/\D/g, "");
+  return (i[t] || i.unknown).includes(n.length);
+}, C = (e, t) => {
+  const n = e.replace(/\D/g, ""), r = c[t] || c.unknown;
+  return n.length === r;
+}, N = (e, t) => {
+  const n = parseInt(e, 10), r = parseInt(t, 10);
+  if (isNaN(n) || isNaN(r) || n < 1 || n > 12) return !1;
+  const s = /* @__PURE__ */ new Date(), o = s.getFullYear() % 100, a = s.getMonth() + 1;
+  return !(r < o || r === o && n < a);
+}, w = (e, t, n, r) => {
+  const s = e.replace(/\D/g, ""), o = h(s), { month: a, year: l } = v(t), g = y(s) && x(s, o), d = N(a, l), p = C(n, o);
+  return {
+    number: m(s, o),
+    rawNumber: s,
+    expiryMonth: a,
+    expiryYear: l,
+    cvv: n.replace(/\D/g, ""),
+    name: r,
+    cardType: o,
+    isValid: g && d && p
+  };
+}, E = (e) => c[e] || c.unknown, M = (e) => {
+  const t = i[e] || i.unknown;
+  return Math.max(...t);
+};
+export {
+  w as createCreditCardValue,
+  h as detectCardType,
+  m as formatCardNumber,
+  L as formatExpiry,
+  M as getMaxCardLength,
+  E as getMaxCvvLength,
+  v as parseExpiry,
+  x as validateCardLength,
+  C as validateCvvLength,
+  N as validateExpiry,
+  y as validateLuhn
+};

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

@@ -0,0 +1,2 @@
+export { CreditInput } from './CreditInput';
+export type { CreditInputProps, CreditCardValue, CardType, CreditInputSize, CreditInputVariant, CreditInputMode, CreditInputTranslations, } from './CreditInput.types';

package/dist/components/DatePicker/DatePicker.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),r=require("react"),H=require("../Calendar/Calendar.cjs"),m=require("../../utils/cn.cjs"),I=require("../../hooks/useBearStyles.cjs"),W=require("./DatePicker.utils.cjs"),_=({value:s,onChange:e,minDate:x,maxDate:f,disabled:n=!1,placeholder:p="Select date",label:i,error:l,helperText:o,format:k="MM/DD/YYYY",clearable:w=!0,className:y,style:j,bis:z,showWeekNumbers:D=!1,disabledDates:S=[],highlightedDates:v=[],slots:q,weekdayLabels:N,firstDayOfWeek:V=0,size:h="md",variant:M="default"})=>{const[u,c]=r.useState(!1),[O,B]=r.useState(s??new Date),b=r.useRef(null),d=I.useBearStyles(z,j);r.useEffect(()=>{const a=T=>{b.current&&!b.current.contains(T.target)&&c(!1)};return document.addEventListener("mousedown",a),()=>document.removeEventListener("mousedown",a)},[]);const L=r.useCallback(a=>{e==null||e(a),c(!1)},[e]),P=r.useCallback(()=>{e==null||e(null),c(!1)},[e]),R=r.useCallback(a=>{B(a)},[]),Y={sm:"bear-py-1.5 bear-px-3 bear-text-sm",md:"bear-py-2 bear-px-4",lg:"bear-py-2.5 bear-px-5 bear-text-lg"},E={default:"bear-bg-zinc-800 bear-border-zinc-600",filled:"bear-bg-zinc-700 bear-border-transparent",outline:"bear-bg-transparent bear-border-zinc-500"};return t.jsxs("div",{ref:b,className:m.cn("bear-relative",y),style:Object.keys(d).length?d:void 0,children:[i&&t.jsx("label",{className:"bear-block bear-text-sm bear-font-medium bear-text-zinc-300 bear-mb-1.5",children:i}),t.jsxs("button",{type:"button",onClick:()=>!n&&c(!u),disabled:n,className:m.cn("bear-w-full bear-flex bear-items-center bear-justify-between bear-rounded-lg bear-border bear-text-left bear-transition-colors",Y[h],E[M],l?"bear-border-red-500":"focus:bear-border-pink-500",n&&"bear-opacity-50 bear-cursor-not-allowed",s?"bear-text-white":"bear-text-zinc-500"),children:[t.jsx("span",{children:s?W.formatDate(s,k):p}),t.jsx("svg",{className:"bear-w-5 bear-h-5 bear-text-zinc-400 bear-shrink-0",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",children:t.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"})})]}),l&&t.jsx("p",{className:"bear-mt-1 bear-text-xs bear-text-red-400",children:l}),o&&!l&&t.jsx("p",{className:"bear-mt-1 bear-text-xs bear-text-zinc-500",children:o}),u&&t.jsx(H.Calendar,{viewDate:O,onViewChange:R,value:s??null,onSelect:L,minDate:x,maxDate:f,disabledDates:S,highlightedDates:v,slots:q,weekdayLabels:N,firstDayOfWeek:V,showWeekNumbers:D,clearable:w,onClear:P,showTodayButton:!0,onToday:()=>{e==null||e(new Date),c(!1)}})]})};exports.DatePicker=_;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),a=require("react"),J=require("react-dom"),K=require("../Calendar/Calendar.cjs"),D=require("../../utils/cn.cjs"),Q=require("../../hooks/useBearStyles.cjs"),U=require("./DatePicker.utils.cjs"),X=({value:c,onChange:t,minDate:y,maxDate:j,disabled:b=!1,placeholder:z="Select date",label:p,error:o,helperText:m,format:B="MM/DD/YYYY",clearable:P=!0,className:_,style:h,bis:v,showWeekNumbers:S=!1,disabledDates:N=[],highlightedDates:g=[],slots:q,weekdayLabels:R,firstDayOfWeek:V=0,size:H="md",variant:M="default",icon:O})=>{const[i,n]=a.useState(!1),[E,L]=a.useState(c??new Date),[x,Y]=a.useState({top:0,left:0}),k=a.useRef(null),d=a.useRef(null),w=Q.useBearStyles(v,h);a.useEffect(()=>{if(i&&d.current){const e=d.current.getBoundingClientRect(),l=8,s=360,G=window.innerHeight-e.bottom<s&&e.top>s;Y({top:G?e.top-s-l:e.bottom+l,left:e.left})}},[i]),a.useEffect(()=>{const e=l=>{var u,f;const s=l.target;(u=k.current)!=null&&u.contains(s)||(f=s.closest)!=null&&f.call(s,"[data-bear-datepicker-calendar]")||n(!1)};return document.addEventListener("mousedown",e),()=>document.removeEventListener("mousedown",e)},[]);const T=a.useCallback(e=>{t==null||t(e),n(!1)},[t]),A=a.useCallback(()=>{t==null||t(null),n(!1)},[t]),I=a.useCallback(e=>{L(e)},[]),W={sm:"bear-py-1.5 bear-px-3 bear-text-sm",md:"bear-py-2 bear-px-4",lg:"bear-py-2.5 bear-px-5 bear-text-lg"},F={default:"bear-bg-white dark:bear-bg-zinc-800 bear-border-zinc-300 dark:bear-border-zinc-600",filled:"bear-bg-zinc-100 dark:bear-bg-zinc-700 bear-border-transparent",outline:"bear-bg-transparent bear-border-zinc-400 dark:bear-border-zinc-500"};return r.jsxs("div",{ref:k,className:D.cn("Bear-DatePicker bear-relative",_),style:Object.keys(w).length?w:void 0,children:[p&&r.jsx("label",{className:"Bear-DatePicker__label bear-block bear-text-sm bear-font-medium bear-text-zinc-700 dark:bear-text-zinc-300 bear-mb-1.5",children:p}),r.jsxs("button",{ref:d,type:"button",onClick:()=>!b&&n(!i),disabled:b,className:D.cn("Bear-DatePicker__trigger bear-w-full bear-flex bear-items-center bear-justify-between bear-rounded-lg bear-border bear-text-left bear-transition-colors",W[H],F[M],o?"bear-border-red-500":"focus:bear-border-pink-500",b&&"bear-opacity-50 bear-cursor-not-allowed",c?"bear-text-zinc-900 dark:bear-text-white":"bear-text-zinc-500"),children:[r.jsx("span",{className:"Bear-DatePicker__value",children:c?U.formatDate(c,B):z}),r.jsx("span",{className:"Bear-DatePicker__icon",children:O??r.jsx("svg",{className:"bear-w-5 bear-h-5 bear-text-zinc-400 bear-shrink-0",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",children:r.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"})})})]}),o&&r.jsx("p",{className:"Bear-DatePicker__error bear-mt-1 bear-text-xs bear-text-red-400",children:o}),m&&!o&&r.jsx("p",{className:"Bear-DatePicker__helper bear-mt-1 bear-text-xs bear-text-zinc-500",children:m}),i&&typeof document<"u"&&J.createPortal(r.jsx("div",{"data-bear-datepicker-calendar":!0,className:"Bear-DatePicker__dropdown bear-fixed bear-z-[9999]",style:{top:x.top,left:x.left},children:r.jsx(K.Calendar,{viewDate:E,onViewChange:I,value:c??null,onSelect:T,minDate:y,maxDate:j,disabledDates:N,highlightedDates:g,slots:q,weekdayLabels:R,firstDayOfWeek:V,showWeekNumbers:S,clearable:P,onClear:A,showTodayButton:!0,onToday:()=>{t==null||t(new Date),n(!1)}})}),document.body)]})};exports.DatePicker=X;

package/dist/components/DatePicker/DatePicker.js

@@ -1,103 +1,127 @@
-import { jsxs as u, jsx as t } from "react/jsx-runtime";
-import { useState as f, useRef as q, useEffect as A, useCallback as c } from "react";
-import { Calendar as F } from "../Calendar/Calendar.js";
-import { cn as p } from "../../utils/cn.js";
-import { useBearStyles as G } from "../../hooks/useBearStyles.js";
-import { formatDate as J } from "./DatePicker.utils.js";
-const $ = ({
-  value: a,
-  onChange: e,
-  minDate: x,
-  maxDate: w,
-  disabled: b = !1,
-  placeholder: k = "Select date",
-  label: o,
-  error: l,
-  helperText: i,
-  format: y = "MM/DD/YYYY",
-  clearable: z = !0,
-  className: v,
-  style: D,
-  bis: N,
-  showWeekNumbers: S = !1,
-  disabledDates: V = [],
-  highlightedDates: h = [],
-  slots: j,
-  weekdayLabels: L,
-  firstDayOfWeek: M = 0,
-  size: O = "md",
-  variant: Y = "default"
+import { jsxs as z, jsx as r } from "react/jsx-runtime";
+import { useState as p, useRef as y, useEffect as h, useCallback as f } from "react";
+import { createPortal as X } from "react-dom";
+import { Calendar as Z } from "../Calendar/Calendar.js";
+import { cn as B } from "../../utils/cn.js";
+import { useBearStyles as $ } from "../../hooks/useBearStyles.js";
+import { formatDate as C } from "./DatePicker.utils.js";
+const ce = ({
+  value: o,
+  onChange: t,
+  minDate: _,
+  maxDate: v,
+  disabled: l = !1,
+  placeholder: P = "Select date",
+  label: u,
+  error: n,
+  helperText: k,
+  format: N = "MM/DD/YYYY",
+  clearable: g = !0,
+  className: S,
+  style: V,
+  bis: j,
+  showWeekNumbers: H = !1,
+  disabledDates: L = [],
+  highlightedDates: M = [],
+  slots: O,
+  weekdayLabels: R,
+  firstDayOfWeek: Y = 0,
+  size: E = "md",
+  variant: A = "default",
+  icon: I
 }) => {
-  const [d, s] = f(!1), [B, E] = f(a ?? /* @__PURE__ */ new Date()), n = q(null), m = G(N, D);
-  A(() => {
-    const r = (W) => {
-      n.current && !n.current.contains(W.target) && s(!1);
+  const [c, s] = p(!1), [T, W] = p(o ?? /* @__PURE__ */ new Date()), [w, q] = p({ top: 0, left: 0 }), x = y(null), b = y(null), D = $(j, V);
+  h(() => {
+    if (c && b.current) {
+      const e = b.current.getBoundingClientRect(), i = 8, a = 360, U = window.innerHeight - e.bottom < a && e.top > a;
+      q({
+        top: U ? e.top - a - i : e.bottom + i,
+        left: e.left
+      });
+    }
+  }, [c]), h(() => {
+    const e = (i) => {
+      var d, m;
+      const a = i.target;
+      (d = x.current) != null && d.contains(a) || (m = a.closest) != null && m.call(a, "[data-bear-datepicker-calendar]") || s(!1);
     };
-    return document.addEventListener("mousedown", r), () => document.removeEventListener("mousedown", r);
+    return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
   }, []);
-  const R = c(
-    (r) => {
-      e == null || e(r), s(!1);
+  const F = f(
+    (e) => {
+      t == null || t(e), s(!1);
     },
-    [e]
-  ), H = c(() => {
-    e == null || e(null), s(!1);
-  }, [e]), I = c((r) => {
-    E(r);
-  }, []), P = { sm: "bear-py-1.5 bear-px-3 bear-text-sm", md: "bear-py-2 bear-px-4", lg: "bear-py-2.5 bear-px-5 bear-text-lg" }, T = {
-    default: "bear-bg-zinc-800 bear-border-zinc-600",
-    filled: "bear-bg-zinc-700 bear-border-transparent",
-    outline: "bear-bg-transparent bear-border-zinc-500"
+    [t]
+  ), G = f(() => {
+    t == null || t(null), s(!1);
+  }, [t]), J = f((e) => {
+    W(e);
+  }, []), K = { sm: "bear-py-1.5 bear-px-3 bear-text-sm", md: "bear-py-2 bear-px-4", lg: "bear-py-2.5 bear-px-5 bear-text-lg" }, Q = {
+    default: "bear-bg-white dark:bear-bg-zinc-800 bear-border-zinc-300 dark:bear-border-zinc-600",
+    filled: "bear-bg-zinc-100 dark:bear-bg-zinc-700 bear-border-transparent",
+    outline: "bear-bg-transparent bear-border-zinc-400 dark:bear-border-zinc-500"
   };
-  return /* @__PURE__ */ u("div", { ref: n, className: p("bear-relative", v), style: Object.keys(m).length ? m : void 0, children: [
-    o && /* @__PURE__ */ t("label", { className: "bear-block bear-text-sm bear-font-medium bear-text-zinc-300 bear-mb-1.5", children: o }),
-    /* @__PURE__ */ u(
+  return /* @__PURE__ */ z("div", { ref: x, className: B("Bear-DatePicker bear-relative", S), style: Object.keys(D).length ? D : void 0, children: [
+    u && /* @__PURE__ */ r("label", { className: "Bear-DatePicker__label bear-block bear-text-sm bear-font-medium bear-text-zinc-700 dark:bear-text-zinc-300 bear-mb-1.5", children: u }),
+    /* @__PURE__ */ z(
       "button",
       {
+        ref: b,
         type: "button",
-        onClick: () => !b && s(!d),
-        disabled: b,
-        className: p(
-          "bear-w-full bear-flex bear-items-center bear-justify-between bear-rounded-lg bear-border bear-text-left bear-transition-colors",
-          P[O],
-          T[Y],
-          l ? "bear-border-red-500" : "focus:bear-border-pink-500",
-          b && "bear-opacity-50 bear-cursor-not-allowed",
-          a ? "bear-text-white" : "bear-text-zinc-500"
+        onClick: () => !l && s(!c),
+        disabled: l,
+        className: B(
+          "Bear-DatePicker__trigger bear-w-full bear-flex bear-items-center bear-justify-between bear-rounded-lg bear-border bear-text-left bear-transition-colors",
+          K[E],
+          Q[A],
+          n ? "bear-border-red-500" : "focus:bear-border-pink-500",
+          l && "bear-opacity-50 bear-cursor-not-allowed",
+          o ? "bear-text-zinc-900 dark:bear-text-white" : "bear-text-zinc-500"
         ),
         children: [
-          /* @__PURE__ */ t("span", { children: a ? J(a, y) : k }),
-          /* @__PURE__ */ t("svg", { className: "bear-w-5 bear-h-5 bear-text-zinc-400 bear-shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ t("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" }) })
+          /* @__PURE__ */ r("span", { className: "Bear-DatePicker__value", children: o ? C(o, N) : P }),
+          /* @__PURE__ */ r("span", { className: "Bear-DatePicker__icon", children: I ?? /* @__PURE__ */ r("svg", { className: "bear-w-5 bear-h-5 bear-text-zinc-400 bear-shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ r("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" }) }) })
         ]
       }
     ),
-    l && /* @__PURE__ */ t("p", { className: "bear-mt-1 bear-text-xs bear-text-red-400", children: l }),
-    i && !l && /* @__PURE__ */ t("p", { className: "bear-mt-1 bear-text-xs bear-text-zinc-500", children: i }),
-    d && /* @__PURE__ */ t(
-      F,
-      {
-        viewDate: B,
-        onViewChange: I,
-        value: a ?? null,
-        onSelect: R,
-        minDate: x,
-        maxDate: w,
-        disabledDates: V,
-        highlightedDates: h,
-        slots: j,
-        weekdayLabels: L,
-        firstDayOfWeek: M,
-        showWeekNumbers: S,
-        clearable: z,
-        onClear: H,
-        showTodayButton: !0,
-        onToday: () => {
-          e == null || e(/* @__PURE__ */ new Date()), s(!1);
+    n && /* @__PURE__ */ r("p", { className: "Bear-DatePicker__error bear-mt-1 bear-text-xs bear-text-red-400", children: n }),
+    k && !n && /* @__PURE__ */ r("p", { className: "Bear-DatePicker__helper bear-mt-1 bear-text-xs bear-text-zinc-500", children: k }),
+    c && typeof document < "u" && X(
+      /* @__PURE__ */ r(
+        "div",
+        {
+          "data-bear-datepicker-calendar": !0,
+          className: "Bear-DatePicker__dropdown bear-fixed bear-z-[9999]",
+          style: { top: w.top, left: w.left },
+          children: /* @__PURE__ */ r(
+            Z,
+            {
+              viewDate: T,
+              onViewChange: J,
+              value: o ?? null,
+              onSelect: F,
+              minDate: _,
+              maxDate: v,
+              disabledDates: L,
+              highlightedDates: M,
+              slots: O,
+              weekdayLabels: R,
+              firstDayOfWeek: Y,
+              showWeekNumbers: H,
+              clearable: g,
+              onClear: G,
+              showTodayButton: !0,
+              onToday: () => {
+                t == null || t(/* @__PURE__ */ new Date()), s(!1);
+              }
+            }
+          )
         }
-      }
+      ),
+      document.body
     )
   ] });
 };
 export {
-  $ as DatePicker
+  ce as DatePicker
 };

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

@@ -30,5 +30,6 @@ export interface DatePickerProps {
     firstDayOfWeek?: number;
     size?: 'sm' | 'md' | 'lg';
     variant?: 'default' | 'filled' | 'outline';
-    leftIcon?: ReactNode;
+    /** Custom icon to replace the default calendar icon (ReactNode). */
+    icon?: ReactNode;
 }

package/dist/components/Drawer/Drawer.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),d=require("react"),f=require("react-dom"),w=require("../../utils/cn.cjs"),x=require("../Icon/index.cjs"),g={left:{sm:"bear-w-64",md:"bear-w-80",lg:"bear-w-96",xl:"bear-w-[32rem]"},right:{sm:"bear-w-64",md:"bear-w-80",lg:"bear-w-96",xl:"bear-w-[32rem]"},top:{sm:"bear-h-32",md:"bear-h-48",lg:"bear-h-64",xl:"bear-h-96"},bottom:{sm:"bear-h-32",md:"bear-h-48",lg:"bear-h-64",xl:"bear-h-96"}},y={left:"bear-left-0 bear-top-0 bear-h-full",right:"bear-right-0 bear-top-0 bear-h-full",top:"bear-top-0 bear-left-0 bear-w-full",bottom:"bear-bottom-0 bear-left-0 bear-w-full"},v=({isOpen:t,onClose:a,title:b,children:n,side:r="right",size:i="md",showCloseButton:l=!0,closeOnBackdrop:c=!0,closeOnEscape:s=!0,className:m})=>{const o=d.useCallback(h=>{s&&h.key==="Escape"&&a()},[s,a]);if(d.useEffect(()=>(t&&(document.addEventListener("keydown",o),document.body.style.overflow="hidden"),()=>{document.removeEventListener("keydown",o),document.body.style.overflow=""}),[t,o]),!t)return null;const u=e.jsxs("div",{className:"bear-fixed bear-inset-0 bear-z-50",children:[e.jsx("div",{className:"bear-absolute bear-inset-0 bear-bg-black/60 bear-backdrop-blur-sm",onClick:c?a:void 0,"aria-hidden":"true"}),e.jsxs("div",{role:"dialog","aria-modal":"true","aria-labelledby":b?"drawer-title":void 0,className:w.cn("bear-absolute bear-bg-gray-900 bear-shadow-2xl","bear-border-gray-700 bear-overflow-hidden","bear-transform bear-transition-transform bear-duration-300",r==="left"&&"bear-border-r",r==="right"&&"bear-border-l",r==="top"&&"bear-border-b",r==="bottom"&&"bear-border-t",y[r],g[r][i],m),children:[(b||l)&&e.jsxs("div",{className:"bear-flex bear-items-center bear-justify-between bear-px-4 bear-py-3 bear-border-b bear-border-gray-700",children:[b&&e.jsx("h2",{id:"drawer-title",className:"bear-text-lg bear-font-semibold bear-text-white",children:b}),l&&e.jsx("button",{onClick:a,className:"bear-p-1 bear-rounded-lg bear-text-gray-400 hover:bear-text-white hover:bear-bg-gray-700 bear-transition-colors","aria-label":"Close drawer",children:e.jsx(x.XIcon,{className:"bear-w-5 bear-h-5"})})]}),e.jsx("div",{className:"bear-flex-1 bear-overflow-y-auto bear-p-4 bear-text-gray-300",children:n})]})]});return f.createPortal(u,document.body)};exports.Drawer=v;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),a=require("react"),N=require("react-dom"),y=require("../../utils/cn.cjs"),k=require("../Icon/index.cjs"),c=300,q={left:{sm:"bear-w-64",md:"bear-w-80",lg:"bear-w-96",xl:"bear-w-[32rem]"},right:{sm:"bear-w-64",md:"bear-w-80",lg:"bear-w-96",xl:"bear-w-[32rem]"},top:{sm:"bear-h-32",md:"bear-h-48",lg:"bear-h-64",xl:"bear-h-96"},bottom:{sm:"bear-h-32",md:"bear-h-48",lg:"bear-h-64",xl:"bear-h-96"}},C={left:"bear-left-0 bear-top-0 bear-h-full",right:"bear-right-0 bear-top-0 bear-h-full",top:"bear-top-0 bear-left-0 bear-w-full",bottom:"bear-bottom-0 bear-left-0 bear-w-full"},D={left:"bear-translate-x-0",right:"bear-translate-x-0",top:"bear-translate-y-0",bottom:"bear-translate-y-0"},E={left:"-bear-translate-x-full",right:"bear-translate-x-full",top:"-bear-translate-y-full",bottom:"bear-translate-y-full"},S=({isOpen:l,onClose:o,title:s,children:x,side:e="right",size:g="md",showCloseButton:d=!0,closeOnBackdrop:w=!0,closeOnEscape:u=!0,className:p})=>{const[t,m]=a.useState(l),[f,n]=a.useState(!1),[v,h]=a.useState(!1);a.useEffect(()=>{if(l){m(!0),n(!1);const b=requestAnimationFrame(()=>h(!0));return()=>cancelAnimationFrame(b)}if(t){h(!1),n(!0);const b=setTimeout(()=>{m(!1),n(!1)},c);return()=>clearTimeout(b)}},[l,t]);const i=a.useCallback(b=>{u&&b.key==="Escape"&&o()},[u,o]);if(a.useEffect(()=>(t&&(document.addEventListener("keydown",i),document.body.style.overflow="hidden"),()=>{document.removeEventListener("keydown",i),document.body.style.overflow=""}),[t,i]),!t)return null;const j=r.jsxs("div",{className:"bear-fixed bear-inset-0 bear-z-50",children:[r.jsx("div",{className:y.cn("bear-absolute bear-inset-0 bear-bg-black/60 bear-backdrop-blur-sm bear-transition-opacity",f?"bear-opacity-0":"bear-opacity-100"),style:{transitionDuration:`${c}ms`},onClick:w?o:void 0,"aria-hidden":"true"}),r.jsxs("div",{role:"dialog","aria-modal":"true","aria-labelledby":s?"drawer-title":void 0,className:y.cn("bear-absolute bear-bg-gray-900 bear-shadow-2xl","bear-border-gray-700 bear-overflow-hidden","bear-transform bear-transition-transform",e==="left"&&"bear-border-r",e==="right"&&"bear-border-l",e==="top"&&"bear-border-b",e==="bottom"&&"bear-border-t",C[e],q[e][g],v&&!f?D[e]:E[e],p),style:{transitionDuration:`${c}ms`},children:[(s||d)&&r.jsxs("div",{className:"bear-flex bear-items-center bear-justify-between bear-px-4 bear-py-3 bear-border-b bear-border-gray-700",children:[s&&r.jsx("h2",{id:"drawer-title",className:"bear-text-lg bear-font-semibold bear-text-white",children:s}),d&&r.jsx("button",{onClick:o,className:"bear-p-1 bear-rounded-lg bear-text-gray-400 hover:bear-text-white hover:bear-bg-gray-700 bear-transition-colors","aria-label":"Close drawer",children:r.jsx(k.XIcon,{className:"bear-w-5 bear-h-5"})})]}),r.jsx("div",{className:"bear-flex-1 bear-overflow-y-auto bear-p-4 bear-text-gray-300",children:x})]})]});return N.createPortal(j,document.body)};exports.Drawer=S;

package/dist/components/Drawer/Drawer.js

@@ -1,9 +1,9 @@
-import { jsxs as l, jsx as r } from "react/jsx-runtime";
-import { useCallback as u, useEffect as w } from "react";
-import { createPortal as g } from "react-dom";
-import { cn as y } from "../../utils/cn.js";
-import { XIcon as p } from "../Icon/index.js";
-const x = {
+import { jsxs as i, jsx as t } from "react/jsx-runtime";
+import { useState as m, useEffect as g, useCallback as A } from "react";
+import { createPortal as E } from "react-dom";
+import { cn as p } from "../../utils/cn.js";
+import { XIcon as I } from "../Icon/index.js";
+const d = 300, D = {
   left: {
     sm: "bear-w-64",
     md: "bear-w-80",
@@ -28,86 +28,117 @@ const x = {
     lg: "bear-h-64",
     xl: "bear-h-96"
   }
-}, v = {
+}, M = {
   left: "bear-left-0 bear-top-0 bear-h-full",
   right: "bear-right-0 bear-top-0 bear-h-full",
   top: "bear-top-0 bear-left-0 bear-w-full",
   bottom: "bear-bottom-0 bear-left-0 bear-w-full"
-}, z = ({
-  isOpen: t,
-  onClose: a,
-  title: b,
-  children: m,
+}, j = {
+  left: "bear-translate-x-0",
+  right: "bear-translate-x-0",
+  top: "bear-translate-y-0",
+  bottom: "bear-translate-y-0"
+}, T = {
+  left: "-bear-translate-x-full",
+  right: "bear-translate-x-full",
+  top: "-bear-translate-y-full",
+  bottom: "bear-translate-y-full"
+}, _ = ({
+  isOpen: l,
+  onClose: b,
+  title: o,
+  children: w,
   side: e = "right",
-  size: s = "md",
-  showCloseButton: d = !0,
-  closeOnBackdrop: n = !0,
-  closeOnEscape: i = !0,
-  className: c
+  size: x = "md",
+  showCloseButton: c = !0,
+  closeOnBackdrop: v = !0,
+  closeOnEscape: f = !0,
+  className: N
 }) => {
-  const o = u(
-    (h) => {
-      i && h.key === "Escape" && a();
+  const [r, u] = m(l), [h, s] = m(!1), [k, y] = m(!1);
+  g(() => {
+    if (l) {
+      u(!0), s(!1);
+      const a = requestAnimationFrame(() => y(!0));
+      return () => cancelAnimationFrame(a);
+    }
+    if (r) {
+      y(!1), s(!0);
+      const a = setTimeout(() => {
+        u(!1), s(!1);
+      }, d);
+      return () => clearTimeout(a);
+    }
+  }, [l, r]);
+  const n = A(
+    (a) => {
+      f && a.key === "Escape" && b();
     },
-    [i, a]
+    [f, b]
   );
-  if (w(() => (t && (document.addEventListener("keydown", o), document.body.style.overflow = "hidden"), () => {
-    document.removeEventListener("keydown", o), document.body.style.overflow = "";
-  }), [t, o]), !t) return null;
-  const f = /* @__PURE__ */ l("div", { className: "bear-fixed bear-inset-0 bear-z-50", children: [
-    /* @__PURE__ */ r(
+  if (g(() => (r && (document.addEventListener("keydown", n), document.body.style.overflow = "hidden"), () => {
+    document.removeEventListener("keydown", n), document.body.style.overflow = "";
+  }), [r, n]), !r) return null;
+  const C = /* @__PURE__ */ i("div", { className: "bear-fixed bear-inset-0 bear-z-50", children: [
+    /* @__PURE__ */ t(
       "div",
       {
-        className: "bear-absolute bear-inset-0 bear-bg-black/60 bear-backdrop-blur-sm",
-        onClick: n ? a : void 0,
+        className: p(
+          "bear-absolute bear-inset-0 bear-bg-black/60 bear-backdrop-blur-sm bear-transition-opacity",
+          h ? "bear-opacity-0" : "bear-opacity-100"
+        ),
+        style: { transitionDuration: `${d}ms` },
+        onClick: v ? b : void 0,
         "aria-hidden": "true"
       }
     ),
-    /* @__PURE__ */ l(
+    /* @__PURE__ */ i(
       "div",
       {
         role: "dialog",
         "aria-modal": "true",
-        "aria-labelledby": b ? "drawer-title" : void 0,
-        className: y(
+        "aria-labelledby": o ? "drawer-title" : void 0,
+        className: p(
           "bear-absolute bear-bg-gray-900 bear-shadow-2xl",
           "bear-border-gray-700 bear-overflow-hidden",
-          "bear-transform bear-transition-transform bear-duration-300",
+          "bear-transform bear-transition-transform",
           e === "left" && "bear-border-r",
           e === "right" && "bear-border-l",
           e === "top" && "bear-border-b",
           e === "bottom" && "bear-border-t",
-          v[e],
-          x[e][s],
-          c
+          M[e],
+          D[e][x],
+          k && !h ? j[e] : T[e],
+          N
         ),
+        style: { transitionDuration: `${d}ms` },
         children: [
-          (b || d) && /* @__PURE__ */ l("div", { className: "bear-flex bear-items-center bear-justify-between bear-px-4 bear-py-3 bear-border-b bear-border-gray-700", children: [
-            b && /* @__PURE__ */ r(
+          (o || c) && /* @__PURE__ */ i("div", { className: "bear-flex bear-items-center bear-justify-between bear-px-4 bear-py-3 bear-border-b bear-border-gray-700", children: [
+            o && /* @__PURE__ */ t(
               "h2",
               {
                 id: "drawer-title",
                 className: "bear-text-lg bear-font-semibold bear-text-white",
-                children: b
+                children: o
               }
             ),
-            d && /* @__PURE__ */ r(
+            c && /* @__PURE__ */ t(
               "button",
               {
-                onClick: a,
+                onClick: b,
                 className: "bear-p-1 bear-rounded-lg bear-text-gray-400 hover:bear-text-white hover:bear-bg-gray-700 bear-transition-colors",
                 "aria-label": "Close drawer",
-                children: /* @__PURE__ */ r(p, { className: "bear-w-5 bear-h-5" })
+                children: /* @__PURE__ */ t(I, { className: "bear-w-5 bear-h-5" })
               }
             )
           ] }),
-          /* @__PURE__ */ r("div", { className: "bear-flex-1 bear-overflow-y-auto bear-p-4 bear-text-gray-300", children: m })
+          /* @__PURE__ */ t("div", { className: "bear-flex-1 bear-overflow-y-auto bear-p-4 bear-text-gray-300", children: w })
         ]
       }
     )
   ] });
-  return g(f, document.body);
+  return E(C, document.body);
 };
 export {
-  z as Drawer
+  _ as Drawer
 };

package/dist/components/Form/Form.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const m=require("react/jsx-runtime"),l=require("react"),T=require("../../utils/cn.cjs"),B=require("./Form.context.cjs"),M=require("./Form.utils.cjs"),j=require("./Form.const.cjs"),q=({children:I,initialValues:u={},onSubmit:g,onError:a,layout:x="vertical",validateOnChange:b=!0,validateOnBlur:y=!0,className:v,testId:S,...C})=>{const[o,i]=l.useState(()=>({...j.FORM_INITIAL_STATE,fields:Object.fromEntries(Object.entries(u).map(([e,t])=>[e,{value:t,error:void 0,touched:!1,validating:!1,dirty:!1}]))})),c=l.useRef({}),_=l.useCallback((e,t)=>{i(s=>({...s,fields:{...s.fields,[e]:{...s.fields[e],value:t,dirty:!0}}}))},[]),n=l.useCallback(e=>{var t;return(t=o.fields[e])==null?void 0:t.value},[o.fields]),O=l.useCallback((e,t)=>{i(s=>({...s,fields:{...s.fields,[e]:{...s.fields[e],error:t}},errors:{...s.errors,[e]:t}}))},[]),E=l.useCallback(e=>{i(t=>{const s={...t.errors};return delete s[e],{...t,fields:{...t.fields,[e]:{...t.fields[e],error:void 0}},errors:s}})},[]),F=l.useCallback(async e=>{var f;const t=c.current[e];if(!t)return!0;i(d=>({...d,fields:{...d.fields,[e]:{...d.fields[e],validating:!0}}}));const s=(f=o.fields[e])==null?void 0:f.value,r=await M.validateFieldValue(s,t);return i(d=>({...d,fields:{...d.fields,[e]:{...d.fields[e],error:r??void 0,validating:!1}},errors:r?{...d.errors,[e]:r}:(()=>{const A={...d.errors};return delete A[e],A})()})),!r},[o.fields]),h=l.useCallback(async()=>{const e=Object.keys(c.current);return(await Promise.all(e.map(F))).every(Boolean)},[F]),R=l.useCallback(e=>{const t=e??u;i({...j.FORM_INITIAL_STATE,fields:Object.fromEntries(Object.entries(t).map(([s,r])=>[s,{value:r,error:void 0,touched:!1,validating:!1,dirty:!1}]))})},[u]),k=l.useCallback((e,t)=>{var s;return t&&(c.current[e]=t),o.fields[e]||i(r=>({...r,fields:{...r.fields,[e]:{value:u[e]??"",error:void 0,touched:!1,validating:!1,dirty:!1}}})),{name:e,value:((s=o.fields[e])==null?void 0:s.value)??u[e]??"",onChange:r=>{_(e,r),b&&t&&setTimeout(()=>F(e),0)},onBlur:()=>{i(r=>({...r,fields:{...r.fields,[e]:{...r.fields[e],touched:!0}}})),y&&t&&F(e)}}},[o.fields,u,_,F,b,y]),N=l.useCallback(e=>async t=>{if(t.preventDefault(),i(f=>({...f,isSubmitting:!0,isSubmitted:!0})),!await h()){i(f=>({...f,isSubmitting:!1})),a==null||a(o.errors);return}const r=Object.fromEntries(Object.entries(o.fields).map(([f,d])=>[f,d.value]));try{await e(r)}finally{i(f=>({...f,isSubmitting:!1}))}},[h,o.fields,o.errors,a]),L=l.useMemo(()=>({state:o,register:k,setValue:_,getValue:n,setError:O,clearError:E,validateField:F,validateForm:h,reset:R,handleSubmit:N,layout:x}),[o,k,_,n,O,E,F,h,R,N,x]);return m.jsx(B.FormContext.Provider,{value:L,children:m.jsx("form",{className:T.cn("Bear-Form",j.FORM_LAYOUT_CLASSES[x],v),onSubmit:g?N(g):void 0,"data-testid":S,...C,children:I})})},w=({name:I,label:u,required:g,rules:a,helperText:x,children:b,className:y})=>{const{register:v,state:S,layout:C}=B.useFormContext(),o={...a,required:g??(a==null?void 0:a.required)},i=v(I,o),c=S.fields[I],_=(c==null?void 0:c.touched)&&(c==null?void 0:c.error);return m.jsxs("div",{className:T.cn("Bear-FormItem",j.FORM_ITEM_LAYOUT_CLASSES[C],y),children:[u&&m.jsxs("label",{className:T.cn("Bear-FormItem__label bear-text-sm bear-font-medium bear-text-zinc-300",C==="horizontal"&&j.FORM_LABEL_WIDTH_HORIZONTAL),children:[u,(g||(a==null?void 0:a.required))&&m.jsx("span",{className:"Bear-FormItem__required bear-text-red-500 bear-ml-0.5",children:"*"})]}),m.jsxs("div",{className:"Bear-FormItem__content bear-flex-1",children:[m.jsx("div",{className:"Bear-FormItem__control",children:typeof b=="function"?b(i):l.isValidElement(b)?l.cloneElement(b,{...i,onChange:n=>{const O=n&&typeof n=="object"&&"target"in n&&n.target&&typeof n.target.value<"u"?n.target.value:n;i.onChange(O)}}):b}),_&&m.jsx("p",{className:"Bear-FormItem__error bear-mt-1 bear-text-xs bear-text-red-400",children:c.error}),x&&!_&&m.jsx("p",{className:"Bear-FormItem__helper bear-mt-1 bear-text-xs bear-text-zinc-500",children:x})]})]})};q.Item=w;exports.Form=q;

package/dist/components/Form/Form.const.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e={required:"This field is required",email:"Please enter a valid email address",pattern:"Invalid format"},r={fields:{},isSubmitting:!1,isValid:!0,isSubmitted:!1,errors:{}},a=/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,l={vertical:"Bear-Form--vertical bear-flex bear-flex-col bear-gap-4",horizontal:"Bear-Form--horizontal bear-flex bear-flex-col bear-gap-4",inline:"Bear-Form--inline bear-flex bear-flex-wrap bear-items-end bear-gap-4"},i={vertical:"Bear-FormItem--vertical bear-flex bear-flex-col bear-gap-1.5",horizontal:"Bear-FormItem--horizontal bear-flex bear-flex-row bear-items-start bear-gap-4",inline:"Bear-FormItem--inline bear-flex bear-flex-col bear-gap-1"},t="bear-w-32 bear-shrink-0";exports.EMAIL_REGEX=a;exports.FORM_DEFAULT_TRANSLATIONS=e;exports.FORM_INITIAL_STATE=r;exports.FORM_ITEM_LAYOUT_CLASSES=i;exports.FORM_LABEL_WIDTH_HORIZONTAL=t;exports.FORM_LAYOUT_CLASSES=l;

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

@@ -0,0 +1,33 @@
+import { FormTranslations, FormState } from './Form.types';
+/**
+ * Default form translations
+ */
+export declare const FORM_DEFAULT_TRANSLATIONS: FormTranslations;
+/**
+ * Initial form state
+ */
+export declare const FORM_INITIAL_STATE: FormState;
+/**
+ * Email validation regex
+ */
+export declare const EMAIL_REGEX: RegExp;
+/**
+ * Layout classes
+ */
+export declare const FORM_LAYOUT_CLASSES: {
+    readonly vertical: "Bear-Form--vertical bear-flex bear-flex-col bear-gap-4";
+    readonly horizontal: "Bear-Form--horizontal bear-flex bear-flex-col bear-gap-4";
+    readonly inline: "Bear-Form--inline bear-flex bear-flex-wrap bear-items-end bear-gap-4";
+};
+/**
+ * Form item layout classes
+ */
+export declare const FORM_ITEM_LAYOUT_CLASSES: {
+    readonly vertical: "Bear-FormItem--vertical bear-flex bear-flex-col bear-gap-1.5";
+    readonly horizontal: "Bear-FormItem--horizontal bear-flex bear-flex-row bear-items-start bear-gap-4";
+    readonly inline: "Bear-FormItem--inline bear-flex bear-flex-col bear-gap-1";
+};
+/**
+ * Label width for horizontal layout
+ */
+export declare const FORM_LABEL_WIDTH_HORIZONTAL = "bear-w-32 bear-shrink-0";