@forgedevstack/bear 1.0.5 → 1.0.6

package/dist/components/PhoneInput/PhoneInput.js

@@ -0,0 +1,194 @@
+import { jsxs as d, jsx as n } from "react/jsx-runtime";
+import { useState as u, useRef as x, useMemo as _, useEffect as N, useCallback as M } from "react";
+import { createPortal as re } from "react-dom";
+import { cn as s } from "../../utils/cn.js";
+import { PHONE_INPUT_DEFAULT_TRANSLATIONS as te, COUNTRIES as ae, DEFAULT_COUNTRY_CODE as ne, PHONE_INPUT_SIZE_CLASSES as Q, PHONE_INPUT_VARIANT_CLASSES as oe, PHONE_INPUT_DROPDOWN_Z_INDEX as be } from "./PhoneInput.const.js";
+import { sortCountriesWithPreferred as ce, getCountryByCode as de, filterCountries as se, formatPhoneNumber as X, createPhoneValue as Y, parsePhoneDigits as ie } from "./PhoneInput.utils.js";
+const xe = ({
+  value: r,
+  onChange: b,
+  defaultCountry: E = ne,
+  placeholder: Z,
+  label: S,
+  helperText: O,
+  error: m,
+  disabled: f = !1,
+  required: F = !1,
+  size: R = "md",
+  variant: q = "default",
+  onlyCountries: i,
+  excludeCountries: l,
+  preferredCountries: T = [],
+  searchable: g = !0,
+  showFlags: L = !0,
+  showDialCode: G = !0,
+  className: J,
+  testId: K,
+  translations: D,
+  icon: $
+}) => {
+  const [c, k] = u(!1), [P, w] = u(""), [I, U] = u(""), [A, C] = u({ top: 0, left: 0 }), V = x(null), z = x(null), H = x(null), y = x(null), B = _(() => ({
+    ...te,
+    ...D
+  }), [D]), p = _(() => {
+    let e = [...ae];
+    if (i != null && i.length) {
+      const o = new Set(i.map((a) => a.toUpperCase()));
+      e = e.filter((a) => o.has(a.code));
+    }
+    if (l != null && l.length) {
+      const o = new Set(l.map((a) => a.toUpperCase()));
+      e = e.filter((a) => !o.has(a.code));
+    }
+    return ce(e, T);
+  }, [i, l, T]), t = _(() => {
+    const e = (r == null ? void 0 : r.countryCode) || E;
+    return de(p, e) || p[0];
+  }, [r == null ? void 0 : r.countryCode, E, p]), j = _(() => se(p, P), [p, P]);
+  N(() => {
+    if ((r == null ? void 0 : r.number) !== void 0) {
+      const e = X(r.number, t == null ? void 0 : t.format);
+      U(e);
+    }
+  }, [r == null ? void 0 : r.number, t == null ? void 0 : t.format]), N(() => {
+    if (c && z.current) {
+      const e = z.current.getBoundingClientRect(), o = window.scrollY || document.documentElement.scrollTop, a = window.scrollX || document.documentElement.scrollLeft;
+      C({
+        top: e.bottom + o + 4,
+        left: e.left + a
+      });
+    }
+  }, [c]), N(() => {
+    c && g && y.current && y.current.focus();
+  }, [c, g]), N(() => {
+    const e = (o) => {
+      var h, W;
+      const a = o.target;
+      (h = V.current) != null && h.contains(a) || (W = a.closest) != null && W.call(a, "[data-bear-phone-dropdown]") || (k(!1), w(""));
+    };
+    return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
+  }, []);
+  const v = M((e) => {
+    var a;
+    const o = Y(e, (r == null ? void 0 : r.number) || I);
+    b == null || b(o), k(!1), w(""), (a = H.current) == null || a.focus();
+  }, [r == null ? void 0 : r.number, I, b]), ee = M((e) => {
+    const o = ie(e.target.value), a = X(o, t == null ? void 0 : t.format);
+    if (U(a), t) {
+      const h = Y(t, o);
+      b == null || b(h);
+    }
+  }, [t, b]);
+  return /* @__PURE__ */ d(
+    "div",
+    {
+      ref: V,
+      className: s("Bear-PhoneInput bear-relative", J),
+      "data-testid": K,
+      children: [
+        S && /* @__PURE__ */ d("label", { className: "Bear-PhoneInput__label bear-block bear-text-sm bear-font-medium bear-text-zinc-700 dark:bear-text-zinc-300 bear-mb-1.5", children: [
+          S,
+          F && /* @__PURE__ */ n("span", { className: "bear-text-red-500 bear-ml-0.5", children: "*" })
+        ] }),
+        /* @__PURE__ */ d("div", { className: s(
+          "Bear-PhoneInput__wrapper bear-flex bear-items-center bear-rounded-lg bear-border bear-transition-colors",
+          oe[q],
+          m ? "bear-border-red-500" : "focus-within:bear-border-pink-500",
+          f && "bear-opacity-50 bear-cursor-not-allowed"
+        ), children: [
+          /* @__PURE__ */ d(
+            "button",
+            {
+              ref: z,
+              type: "button",
+              onClick: () => !f && k(!c),
+              disabled: f,
+              className: s(
+                "Bear-PhoneInput__country-trigger bear-flex bear-items-center bear-gap-1 bear-border-r bear-border-zinc-300 dark:bear-border-zinc-600 bear-shrink-0 bear-text-gray-900 dark:bear-text-white",
+                Q[R]
+              ),
+              children: [
+                L && t && /* @__PURE__ */ n("span", { className: "Bear-PhoneInput__flag bear-text-lg", children: t.flag }),
+                G && t && /* @__PURE__ */ n("span", { className: "Bear-PhoneInput__dial-code bear-text-gray-600 dark:bear-text-zinc-400", children: t.dialCode }),
+                $ ?? /* @__PURE__ */ n(
+                  "svg",
+                  {
+                    className: s(
+                      "Bear-PhoneInput__chevron bear-w-4 bear-h-4 bear-text-gray-500 dark:bear-text-zinc-400 bear-transition-transform",
+                      c && "bear-rotate-180"
+                    ),
+                    fill: "none",
+                    viewBox: "0 0 24 24",
+                    stroke: "currentColor",
+                    children: /* @__PURE__ */ n("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" })
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ n(
+            "input",
+            {
+              ref: H,
+              type: "tel",
+              value: I,
+              onChange: ee,
+              placeholder: Z || B.placeholder,
+              disabled: f,
+              className: s(
+                "Bear-PhoneInput__input bear-flex-1 bear-bg-transparent bear-border-0 bear-outline-none bear-text-gray-900 dark:bear-text-white placeholder:bear-text-gray-400 dark:placeholder:bear-text-zinc-500",
+                Q[R]
+              )
+            }
+          )
+        ] }),
+        m && /* @__PURE__ */ n("p", { className: "Bear-PhoneInput__error bear-mt-1 bear-text-xs bear-text-red-400", children: m }),
+        O && !m && /* @__PURE__ */ n("p", { className: "Bear-PhoneInput__helper bear-mt-1 bear-text-xs bear-text-zinc-500 dark:bear-text-zinc-400", children: O }),
+        c && typeof document < "u" && re(
+          /* @__PURE__ */ d(
+            "div",
+            {
+              "data-bear-phone-dropdown": !0,
+              className: "Bear-PhoneInput__dropdown bear-fixed bear-w-64 bear-bg-white dark:bear-bg-zinc-800 bear-border bear-border-zinc-200 dark:bear-border-zinc-700 bear-rounded-lg bear-shadow-xl bear-overflow-hidden",
+              style: { top: A.top, left: A.left, zIndex: be },
+              children: [
+                g && /* @__PURE__ */ n("div", { className: "Bear-PhoneInput__search bear-p-2 bear-border-b bear-border-zinc-200 dark:bear-border-zinc-700", children: /* @__PURE__ */ n(
+                  "input",
+                  {
+                    ref: y,
+                    type: "text",
+                    value: P,
+                    onChange: (e) => w(e.target.value),
+                    placeholder: B.searchCountry,
+                    className: "bear-w-full bear-px-3 bear-py-2 bear-bg-gray-50 dark:bear-bg-zinc-700 bear-border bear-border-zinc-200 dark:bear-border-zinc-600 bear-rounded bear-text-sm bear-text-gray-900 dark:bear-text-white placeholder:bear-text-gray-400 dark:placeholder:bear-text-zinc-500 bear-outline-none focus:bear-border-pink-500"
+                  }
+                ) }),
+                /* @__PURE__ */ n("div", { className: "Bear-PhoneInput__country-list bear-max-h-60 bear-overflow-y-auto", children: j.length === 0 ? /* @__PURE__ */ n("div", { className: "bear-px-3 bear-py-4 bear-text-center bear-text-sm bear-text-gray-500 dark:bear-text-zinc-500", children: B.noResults }) : j.map((e) => /* @__PURE__ */ d(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => v(e),
+                    className: s(
+                      "Bear-PhoneInput__country-option bear-w-full bear-flex bear-items-center bear-gap-3 bear-px-3 bear-py-2 bear-text-left bear-text-sm bear-transition-colors",
+                      (t == null ? void 0 : t.code) === e.code ? "bear-bg-pink-500/20 bear-text-pink-600 dark:bear-text-pink-400" : "bear-text-gray-700 dark:bear-text-zinc-300 hover:bear-bg-gray-100 dark:hover:bear-bg-zinc-700"
+                    ),
+                    children: [
+                      L && /* @__PURE__ */ n("span", { className: "Bear-PhoneInput__country-flag bear-text-lg", children: e.flag }),
+                      /* @__PURE__ */ n("span", { className: "Bear-PhoneInput__country-name bear-flex-1", children: e.name }),
+                      /* @__PURE__ */ n("span", { className: "Bear-PhoneInput__country-dial bear-text-gray-500 dark:bear-text-zinc-500", children: e.dialCode })
+                    ]
+                  },
+                  e.code
+                )) })
+              ]
+            }
+          ),
+          document.body
+        )
+      ]
+    }
+  );
+};
+export {
+  xe as PhoneInput
+};

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

@@ -0,0 +1,108 @@
+import { ReactNode } from 'react';
+/**
+ * Country data interface
+ */
+export interface CountryData {
+    /** ISO 3166-1 alpha-2 country code (e.g., 'US', 'GB') */
+    code: string;
+    /** Country name */
+    name: string;
+    /** Dial code (e.g., '+1', '+44') */
+    dialCode: string;
+    /** Flag emoji */
+    flag: string;
+    /** Phone number format mask (e.g., '(###) ###-####') */
+    format?: string;
+}
+/**
+ * Phone number value
+ */
+export interface PhoneValue {
+    /** Country code */
+    countryCode: string;
+    /** Dial code */
+    dialCode: string;
+    /** Phone number (without dial code) */
+    number: string;
+    /** Full formatted phone number */
+    formattedNumber: string;
+    /** Raw phone number (digits only) */
+    rawNumber: string;
+}
+/**
+ * PhoneInput size variants
+ */
+export type PhoneInputSize = 'sm' | 'md' | 'lg';
+/**
+ * PhoneInput variant styles
+ */
+export type PhoneInputVariant = 'default' | 'filled' | 'outline';
+/**
+ * PhoneInput translations
+ */
+export interface PhoneInputTranslations {
+    placeholder: string;
+    searchCountry: string;
+    noResults: string;
+}
+/**
+ * PhoneInput component props
+ */
+export interface PhoneInputProps {
+    /** Current phone value */
+    value?: PhoneValue;
+    /** Callback when value changes */
+    onChange?: (value: PhoneValue) => void;
+    /** Default country code */
+    defaultCountry?: string;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Input label */
+    label?: string;
+    /** Helper text */
+    helperText?: string;
+    /** Error message */
+    error?: string;
+    /** Whether input is disabled */
+    disabled?: boolean;
+    /** Whether input is required */
+    required?: boolean;
+    /** Size variant */
+    size?: PhoneInputSize;
+    /** Style variant */
+    variant?: PhoneInputVariant;
+    /** Only allow specific countries */
+    onlyCountries?: string[];
+    /** Exclude specific countries */
+    excludeCountries?: string[];
+    /** Preferred countries (shown at top) */
+    preferredCountries?: string[];
+    /** Whether to show country search */
+    searchable?: boolean;
+    /** Whether to show flags */
+    showFlags?: boolean;
+    /** Whether to show dial code in input */
+    showDialCode?: boolean;
+    /** Custom class name */
+    className?: string;
+    /** Test ID */
+    testId?: string;
+    /** Translation strings */
+    translations?: Partial<PhoneInputTranslations>;
+    /** Custom country selector icon */
+    icon?: ReactNode;
+}
+/**
+ * CountrySelector component props
+ */
+export interface CountrySelectorProps {
+    countries: CountryData[];
+    selectedCountry: CountryData | null;
+    onSelect: (country: CountryData) => void;
+    isOpen: boolean;
+    onToggle: () => void;
+    searchable: boolean;
+    showFlags: boolean;
+    translations: PhoneInputTranslations;
+    disabled?: boolean;
+}

package/dist/components/PhoneInput/PhoneInput.utils.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=(e,t)=>{if(!t)return e;const o=e.replace(/\D/g,"");let r="",s=0;for(const n of t){if(s>=o.length)break;n==="#"?(r+=o[s],s++):r+=n}return r},d=e=>e.replace(/\D/g,""),l=(e,t)=>{const o=i(t,e.format);return{countryCode:e.code,dialCode:e.dialCode,number:t,formattedNumber:`${e.dialCode} ${o}`,rawNumber:d(t)}},c=(e,t)=>{if(!t.trim())return e;const o=t.toLowerCase();return e.filter(r=>r.name.toLowerCase().includes(o)||r.code.toLowerCase().includes(o)||r.dialCode.includes(t))},f=(e,t)=>{if(t.length===0)return e;const o=new Set(t.map(n=>n.toUpperCase())),r=e.filter(n=>o.has(n.code)),s=e.filter(n=>!o.has(n.code));return r.sort((n,a)=>t.indexOf(n.code)-t.indexOf(a.code)),[...r,...s]},C=(e,t)=>e.find(o=>o.code.toUpperCase()===t.toUpperCase());exports.createPhoneValue=l;exports.filterCountries=c;exports.formatPhoneNumber=i;exports.getCountryByCode=C;exports.parsePhoneDigits=d;exports.sortCountriesWithPreferred=f;

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

@@ -0,0 +1,25 @@
+import { CountryData, PhoneValue } from './PhoneInput.types';
+/**
+ * Format phone number according to country format
+ */
+export declare const formatPhoneNumber: (number: string, format?: string) => string;
+/**
+ * Parse raw phone input to digits only
+ */
+export declare const parsePhoneDigits: (input: string) => string;
+/**
+ * Create phone value object
+ */
+export declare const createPhoneValue: (country: CountryData, rawNumber: string) => PhoneValue;
+/**
+ * Filter countries by search query
+ */
+export declare const filterCountries: (countries: CountryData[], query: string) => CountryData[];
+/**
+ * Sort countries with preferred countries first
+ */
+export declare const sortCountriesWithPreferred: (countries: CountryData[], preferred: string[]) => CountryData[];
+/**
+ * Get country by code
+ */
+export declare const getCountryByCode: (countries: CountryData[], code: string) => CountryData | undefined;

package/dist/components/PhoneInput/PhoneInput.utils.js

@@ -0,0 +1,39 @@
+const i = (e, t) => {
+  if (!t) return e;
+  const o = e.replace(/\D/g, "");
+  let r = "", s = 0;
+  for (const n of t) {
+    if (s >= o.length) break;
+    n === "#" ? (r += o[s], s++) : r += n;
+  }
+  return r;
+}, a = (e) => e.replace(/\D/g, ""), l = (e, t) => {
+  const o = i(t, e.format);
+  return {
+    countryCode: e.code,
+    dialCode: e.dialCode,
+    number: t,
+    formattedNumber: `${e.dialCode} ${o}`,
+    rawNumber: a(t)
+  };
+}, c = (e, t) => {
+  if (!t.trim()) return e;
+  const o = t.toLowerCase();
+  return e.filter(
+    (r) => r.name.toLowerCase().includes(o) || r.code.toLowerCase().includes(o) || r.dialCode.includes(t)
+  );
+}, f = (e, t) => {
+  if (t.length === 0) return e;
+  const o = new Set(t.map((n) => n.toUpperCase())), r = e.filter((n) => o.has(n.code)), s = e.filter((n) => !o.has(n.code));
+  return r.sort(
+    (n, d) => t.indexOf(n.code) - t.indexOf(d.code)
+  ), [...r, ...s];
+}, C = (e, t) => e.find((o) => o.code.toUpperCase() === t.toUpperCase());
+export {
+  l as createPhoneValue,
+  c as filterCountries,
+  i as formatPhoneNumber,
+  C as getCountryByCode,
+  a as parsePhoneDigits,
+  f as sortCountriesWithPreferred
+};

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

@@ -0,0 +1,2 @@
+export { PhoneInput } from './PhoneInput';
+export type { PhoneInputProps, PhoneValue, CountryData, PhoneInputSize, PhoneInputVariant, PhoneInputTranslations, } from './PhoneInput.types';

package/dist/components/SignPad/SignPad.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),a=require("react"),_=require("../../utils/cn.cjs"),w=require("../Button/Button.cjs"),s=require("./SignPad.const.cjs"),V=y=>{const{onChange:r,width:P=s.SIGN_PAD_DEFAULT_WIDTH,height:A=s.SIGN_PAD_DEFAULT_HEIGHT,strokeColor:B,strokeWidth:b=s.SIGN_PAD_DEFAULT_STROKE_WIDTH,backgroundColor:O,placeholder:U=s.SIGN_PAD_DEFAULT_PLACEHOLDER,disabled:o=!1,readOnly:i=!1,showClear:I=!0,showSave:v=!1,clearText:M="Clear",saveText:j="Save",outputFormat:h=s.SIGN_PAD_DEFAULT_OUTPUT_FORMAT,outputQuality:D=s.SIGN_PAD_DEFAULT_OUTPUT_QUALITY,className:F,testId:H,id:K,...W}=y,l=a.useRef(null),[g,k]=a.useState(!1),[u,L]=a.useState(!1),[f,E]=a.useState(null),[T,q]=a.useState(!1);a.useEffect(()=>{const e=()=>{const n=document.documentElement.classList.contains("dark");q(n)};e();const t=new MutationObserver(e);return t.observe(document.documentElement,{attributes:!0,attributeFilter:["class"]}),()=>t.disconnect()},[]);const R=B||(T?s.SIGN_PAD_STROKE_DARK:s.SIGN_PAD_STROKE_LIGHT),S=O||(T?s.SIGN_PAD_BG_DARK:s.SIGN_PAD_BG_LIGHT);a.useEffect(()=>{const e=l.current;if(!e)return;const t=e.getContext("2d");t&&(e.width=P,e.height=A,t.fillStyle=S,t.fillRect(0,0,P,A))},[P,A,S,T]);const C=a.useCallback(e=>{const t=l.current;if(!t)return{x:0,y:0};const n=t.getBoundingClientRect(),d=t.width/n.width,G=t.height/n.height;if("touches"in e){const p=e.touches[0];return{x:(p.clientX-n.left)*d,y:(p.clientY-n.top)*G}}return{x:(e.clientX-n.left)*d,y:(e.clientY-n.top)*G}},[]),x=a.useCallback(e=>{if(o||i)return;const t=C(e);k(!0),E(t)},[o,i,C]),m=a.useCallback(e=>{if(!g||o||i)return;const t=l.current,n=t==null?void 0:t.getContext("2d");if(!t||!n||!f)return;const d=C(e);n.beginPath(),n.moveTo(f.x,f.y),n.lineTo(d.x,d.y),n.strokeStyle=R,n.lineWidth=b,n.lineCap="round",n.lineJoin="round",n.stroke(),E(d),L(!0)},[g,o,i,f,R,b,C]),N=a.useCallback(()=>{if(g&&u){const e=l.current;if(e&&r){const t=e.toDataURL(h,D);r(t)}}k(!1),E(null)},[g,u,r,h,D]),X=a.useCallback(()=>{const e=l.current,t=e==null?void 0:e.getContext("2d");!e||!t||(t.fillStyle=S==="transparent"?"rgba(0,0,0,0)":S,t.clearRect(0,0,e.width,e.height),t.fillRect(0,0,e.width,e.height),L(!1),r==null||r(null))},[S,r]),Y=a.useCallback(()=>{const e=l.current;if(!e||!u)return;const t=e.toDataURL(h,D);r==null||r(t)},[u,r,h,D]);return c.jsxs("div",{id:K,"data-testid":H,className:_.cn("Bear-SignPad",s.SIGN_PAD_ROOT_CLASSES,o&&"Bear-SignPad--disabled bear-opacity-50",i&&"Bear-SignPad--readonly",F),...W,children:[c.jsxs("div",{className:_.cn("Bear-SignPad__canvas-wrapper",s.SIGN_PAD_CANVAS_WRAPPER_CLASSES,!o&&!i&&s.SIGN_PAD_CANVAS_WRAPPER_HOVER,o&&"bear-cursor-not-allowed",!o&&!i&&"bear-cursor-crosshair"),children:[c.jsx("canvas",{ref:l,className:"Bear-SignPad__canvas bear-block bear-rounded-lg",style:{width:P,height:A},onMouseDown:x,onMouseMove:m,onMouseUp:N,onMouseLeave:N,onTouchStart:x,onTouchMove:m,onTouchEnd:N}),!u&&c.jsx("div",{className:_.cn("Bear-SignPad__placeholder",s.SIGN_PAD_PLACEHOLDER_CLASSES),children:U}),c.jsx("div",{className:_.cn("Bear-SignPad__line",s.SIGN_PAD_LINE_CLASSES)}),c.jsx("span",{className:_.cn("Bear-SignPad__x-mark",s.SIGN_PAD_X_MARK_CLASSES),children:"×"})]}),(I||v)&&c.jsxs("div",{className:_.cn("Bear-SignPad__actions",s.SIGN_PAD_ACTIONS_CLASSES),children:[I&&c.jsx(w.Button,{size:"sm",variant:"ghost",onClick:X,disabled:o||!u,children:M}),v&&c.jsx(w.Button,{size:"sm",variant:"primary",onClick:Y,disabled:o||!u,children:j})]})]})};exports.SignPad=V;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),s=require("react"),_=require("../../utils/cn.cjs"),p=require("../Button/Button.cjs"),a=require("./SignPad.const.cjs"),V=y=>{const{onChange:r,width:P=a.SIGN_PAD_DEFAULT_WIDTH,height:A=a.SIGN_PAD_DEFAULT_HEIGHT,strokeColor:B,strokeWidth:N=a.SIGN_PAD_DEFAULT_STROKE_WIDTH,backgroundColor:O,placeholder:U=a.SIGN_PAD_DEFAULT_PLACEHOLDER,disabled:o=!1,readOnly:l=!1,showClear:I=!0,showSave:v=!1,clearText:M="Clear",saveText:j="Save",outputFormat:h=a.SIGN_PAD_DEFAULT_OUTPUT_FORMAT,outputQuality:D=a.SIGN_PAD_DEFAULT_OUTPUT_QUALITY,className:F,testId:H,id:K,...W}=y,i=s.useRef(null),[f,x]=s.useState(!1),[u,m]=s.useState(!1),[g,C]=s.useState(null),[E,q]=s.useState(!1);s.useEffect(()=>{const e=()=>{const n=document.documentElement.classList.contains("dark");q(n)};e();const t=new MutationObserver(e);return t.observe(document.documentElement,{attributes:!0,attributeFilter:["class"]}),()=>t.disconnect()},[]);const k=B||(E?a.SIGN_PAD_STROKE_DARK:a.SIGN_PAD_STROKE_LIGHT),S=O||(E?a.SIGN_PAD_BG_DARK:a.SIGN_PAD_BG_LIGHT);s.useEffect(()=>{const e=i.current;if(!e)return;const t=e.getContext("2d");t&&(e.width=P,e.height=A,t.fillStyle=S,t.fillRect(0,0,P,A))},[P,A,S,E]);const b=s.useCallback(e=>{const t=i.current;if(!t)return{x:0,y:0};const n=t.getBoundingClientRect(),d=t.width/n.width,w=t.height/n.height;if("touches"in e){const G=e.touches[0];return{x:(G.clientX-n.left)*d,y:(G.clientY-n.top)*w}}return{x:(e.clientX-n.left)*d,y:(e.clientY-n.top)*w}},[]),L=s.useCallback(e=>{if(o||l)return;const t=b(e);x(!0),C(t)},[o,l,b]),R=s.useCallback(e=>{if(!f||o||l)return;const t=i.current,n=t==null?void 0:t.getContext("2d");if(!t||!n||!g)return;const d=b(e);n.beginPath(),n.moveTo(g.x,g.y),n.lineTo(d.x,d.y),n.strokeStyle=k,n.lineWidth=N,n.lineCap="round",n.lineJoin="round",n.stroke(),C(d),m(!0)},[f,o,l,g,k,N,b]),T=s.useCallback(()=>{if(f&&u){const e=i.current;if(e&&r){const t=e.toDataURL(h,D);r(t)}}x(!1),C(null)},[f,u,r,h,D]),X=s.useCallback(()=>{const e=i.current,t=e==null?void 0:e.getContext("2d");!e||!t||(t.fillStyle=S==="transparent"?"rgba(0,0,0,0)":S,t.clearRect(0,0,e.width,e.height),t.fillRect(0,0,e.width,e.height),m(!1),r==null||r(null))},[S,r]),Y=s.useCallback(()=>{const e=i.current;if(!e||!u)return;const t=e.toDataURL(h,D);r==null||r(t)},[u,r,h,D]);return c.jsxs("div",{id:K,"data-testid":H,className:_.cn("Bear-SignPad bear-max-w-full bear-w-full",a.SIGN_PAD_ROOT_CLASSES,o&&"Bear-SignPad--disabled bear-opacity-50",l&&"Bear-SignPad--readonly",F),...W,children:[c.jsxs("div",{className:_.cn("Bear-SignPad__canvas-wrapper bear-max-w-full bear-overflow-hidden",a.SIGN_PAD_CANVAS_WRAPPER_CLASSES,!o&&!l&&a.SIGN_PAD_CANVAS_WRAPPER_HOVER,o&&"bear-cursor-not-allowed",!o&&!l&&"bear-cursor-crosshair"),children:[c.jsx("canvas",{ref:i,className:"Bear-SignPad__canvas bear-block bear-rounded-lg bear-max-w-full",style:{width:P,height:A},onMouseDown:L,onMouseMove:R,onMouseUp:T,onMouseLeave:T,onTouchStart:L,onTouchMove:R,onTouchEnd:T}),!u&&c.jsx("div",{className:_.cn("Bear-SignPad__placeholder",a.SIGN_PAD_PLACEHOLDER_CLASSES),children:U}),c.jsx("div",{className:_.cn("Bear-SignPad__line",a.SIGN_PAD_LINE_CLASSES)}),c.jsx("span",{className:_.cn("Bear-SignPad__x-mark",a.SIGN_PAD_X_MARK_CLASSES),children:"×"})]}),(I||v)&&c.jsxs("div",{className:_.cn("Bear-SignPad__actions",a.SIGN_PAD_ACTIONS_CLASSES),children:[I&&c.jsx(p.Button,{size:"sm",variant:"ghost",onClick:X,disabled:o||!u,children:M}),v&&c.jsx(p.Button,{size:"sm",variant:"primary",onClick:Y,disabled:o||!u,children:j})]})]})};exports.SignPad=V;

package/dist/components/SignPad/SignPad.js

@@ -1,99 +1,99 @@
 import { jsxs as I, jsx as l } from "react/jsx-runtime";
-import { useRef as J, useState as m, useEffect as y, useCallback as d } from "react";
+import { useRef as J, useState as g, useEffect as y, useCallback as d } from "react";
 import { cn as _ } from "../../utils/cn.js";
 import { Button as O } from "../Button/Button.js";
-import { SIGN_PAD_DEFAULT_WIDTH as q, SIGN_PAD_DEFAULT_HEIGHT as Z, SIGN_PAD_DEFAULT_STROKE_WIDTH as $, SIGN_PAD_DEFAULT_PLACEHOLDER as tt, SIGN_PAD_DEFAULT_OUTPUT_FORMAT as et, SIGN_PAD_DEFAULT_OUTPUT_QUALITY as nt, SIGN_PAD_BG_DARK as rt, SIGN_PAD_BG_LIGHT as ot, SIGN_PAD_STROKE_DARK as at, SIGN_PAD_STROKE_LIGHT as st, SIGN_PAD_PLACEHOLDER_CLASSES as ct, SIGN_PAD_LINE_CLASSES as it, SIGN_PAD_X_MARK_CLASSES as lt, SIGN_PAD_CANVAS_WRAPPER_HOVER as dt, SIGN_PAD_CANVAS_WRAPPER_CLASSES as _t, SIGN_PAD_ACTIONS_CLASSES as ut, SIGN_PAD_ROOT_CLASSES as St } from "./SignPad.const.js";
-const gt = (U) => {
+import { SIGN_PAD_DEFAULT_WIDTH as q, SIGN_PAD_DEFAULT_HEIGHT as Z, SIGN_PAD_DEFAULT_STROKE_WIDTH as $, SIGN_PAD_DEFAULT_PLACEHOLDER as tt, SIGN_PAD_DEFAULT_OUTPUT_FORMAT as et, SIGN_PAD_DEFAULT_OUTPUT_QUALITY as rt, SIGN_PAD_BG_DARK as nt, SIGN_PAD_BG_LIGHT as at, SIGN_PAD_STROKE_DARK as ot, SIGN_PAD_STROKE_LIGHT as st, SIGN_PAD_PLACEHOLDER_CLASSES as ct, SIGN_PAD_LINE_CLASSES as it, SIGN_PAD_X_MARK_CLASSES as lt, SIGN_PAD_CANVAS_WRAPPER_HOVER as dt, SIGN_PAD_CANVAS_WRAPPER_CLASSES as _t, SIGN_PAD_ACTIONS_CLASSES as ut, SIGN_PAD_ROOT_CLASSES as St } from "./SignPad.const.js";
+const mt = (U) => {
   const {
-    onChange: r,
+    onChange: n,
     width: S = q,
     height: A = Z,
     strokeColor: B,
-    strokeWidth: p = $,
+    strokeWidth: b = $,
     backgroundColor: M,
     placeholder: F = tt,
-    disabled: o = !1,
-    readOnly: a = !1,
+    disabled: a = !1,
+    readOnly: o = !1,
     showClear: v = !0,
-    showSave: C = !1,
+    showSave: p = !1,
     clearText: H = "Clear",
     saveText: K = "Save",
     outputFormat: h = et,
-    outputQuality: P = nt,
+    outputQuality: P = rt,
     className: W,
     testId: X,
     id: Y,
     ...V
-  } = U, s = J(null), [D, L] = m(!1), [c, R] = m(!1), [f, E] = m(null), [N, j] = m(!1);
+  } = U, s = J(null), [f, C] = g(!1), [c, L] = g(!1), [D, E] = g(null), [N, j] = g(!1);
   y(() => {
     const t = () => {
-      const n = document.documentElement.classList.contains("dark");
-      j(n);
+      const r = document.documentElement.classList.contains("dark");
+      j(r);
     };
     t();
     const e = new MutationObserver(t);
     return e.observe(document.documentElement, { attributes: !0, attributeFilter: ["class"] }), () => e.disconnect();
   }, []);
-  const G = B || (N ? at : st), u = M || (N ? rt : ot);
+  const R = B || (N ? ot : st), u = M || (N ? nt : at);
   y(() => {
     const t = s.current;
     if (!t) return;
     const e = t.getContext("2d");
     e && (t.width = S, t.height = A, e.fillStyle = u, e.fillRect(0, 0, S, A));
   }, [S, A, u, N]);
-  const g = d((t) => {
+  const m = d((t) => {
     const e = s.current;
     if (!e) return { x: 0, y: 0 };
-    const n = e.getBoundingClientRect(), i = e.width / n.width, w = e.height / n.height;
+    const r = e.getBoundingClientRect(), i = e.width / r.width, k = e.height / r.height;
     if ("touches" in t) {
       const x = t.touches[0];
       return {
-        x: (x.clientX - n.left) * i,
-        y: (x.clientY - n.top) * w
+        x: (x.clientX - r.left) * i,
+        y: (x.clientY - r.top) * k
       };
     }
     return {
-      x: (t.clientX - n.left) * i,
-      y: (t.clientY - n.top) * w
+      x: (t.clientX - r.left) * i,
+      y: (t.clientY - r.top) * k
     };
-  }, []), b = d((t) => {
-    if (o || a) return;
-    const e = g(t);
-    L(!0), E(e);
-  }, [o, a, g]), k = d((t) => {
-    if (!D || o || a) return;
-    const e = s.current, n = e == null ? void 0 : e.getContext("2d");
-    if (!e || !n || !f) return;
-    const i = g(t);
-    n.beginPath(), n.moveTo(f.x, f.y), n.lineTo(i.x, i.y), n.strokeStyle = G, n.lineWidth = p, n.lineCap = "round", n.lineJoin = "round", n.stroke(), E(i), R(!0);
-  }, [D, o, a, f, G, p, g]), T = d(() => {
-    if (D && c) {
+  }, []), w = d((t) => {
+    if (a || o) return;
+    const e = m(t);
+    C(!0), E(e);
+  }, [a, o, m]), G = d((t) => {
+    if (!f || a || o) return;
+    const e = s.current, r = e == null ? void 0 : e.getContext("2d");
+    if (!e || !r || !D) return;
+    const i = m(t);
+    r.beginPath(), r.moveTo(D.x, D.y), r.lineTo(i.x, i.y), r.strokeStyle = R, r.lineWidth = b, r.lineCap = "round", r.lineJoin = "round", r.stroke(), E(i), L(!0);
+  }, [f, a, o, D, R, b, m]), T = d(() => {
+    if (f && c) {
       const t = s.current;
-      if (t && r) {
+      if (t && n) {
         const e = t.toDataURL(h, P);
-        r(e);
+        n(e);
       }
     }
-    L(!1), E(null);
-  }, [D, c, r, h, P]), z = d(() => {
+    C(!1), E(null);
+  }, [f, c, n, h, P]), z = d(() => {
     const t = s.current, e = t == null ? void 0 : t.getContext("2d");
-    !t || !e || (e.fillStyle = u === "transparent" ? "rgba(0,0,0,0)" : u, e.clearRect(0, 0, t.width, t.height), e.fillRect(0, 0, t.width, t.height), R(!1), r == null || r(null));
-  }, [u, r]), Q = d(() => {
+    !t || !e || (e.fillStyle = u === "transparent" ? "rgba(0,0,0,0)" : u, e.clearRect(0, 0, t.width, t.height), e.fillRect(0, 0, t.width, t.height), L(!1), n == null || n(null));
+  }, [u, n]), Q = d(() => {
     const t = s.current;
     if (!t || !c) return;
     const e = t.toDataURL(h, P);
-    r == null || r(e);
-  }, [c, r, h, P]);
+    n == null || n(e);
+  }, [c, n, h, P]);
   return /* @__PURE__ */ I(
     "div",
     {
       id: Y,
       "data-testid": X,
       className: _(
-        "Bear-SignPad",
+        "Bear-SignPad bear-max-w-full bear-w-full",
         St,
-        o && "Bear-SignPad--disabled bear-opacity-50",
-        a && "Bear-SignPad--readonly",
+        a && "Bear-SignPad--disabled bear-opacity-50",
+        o && "Bear-SignPad--readonly",
         W
       ),
       ...V,
@@ -102,25 +102,25 @@ const gt = (U) => {
           "div",
           {
             className: _(
-              "Bear-SignPad__canvas-wrapper",
+              "Bear-SignPad__canvas-wrapper bear-max-w-full bear-overflow-hidden",
               _t,
-              !o && !a && dt,
-              o && "bear-cursor-not-allowed",
-              !o && !a && "bear-cursor-crosshair"
+              !a && !o && dt,
+              a && "bear-cursor-not-allowed",
+              !a && !o && "bear-cursor-crosshair"
             ),
             children: [
               /* @__PURE__ */ l(
                 "canvas",
                 {
                   ref: s,
-                  className: "Bear-SignPad__canvas bear-block bear-rounded-lg",
+                  className: "Bear-SignPad__canvas bear-block bear-rounded-lg bear-max-w-full",
                   style: { width: S, height: A },
-                  onMouseDown: b,
-                  onMouseMove: k,
+                  onMouseDown: w,
+                  onMouseMove: G,
                   onMouseUp: T,
                   onMouseLeave: T,
-                  onTouchStart: b,
-                  onTouchMove: k,
+                  onTouchStart: w,
+                  onTouchMove: G,
                   onTouchEnd: T
                 }
               ),
@@ -130,24 +130,24 @@ const gt = (U) => {
             ]
           }
         ),
-        (v || C) && /* @__PURE__ */ I("div", { className: _("Bear-SignPad__actions", ut), children: [
+        (v || p) && /* @__PURE__ */ I("div", { className: _("Bear-SignPad__actions", ut), children: [
           v && /* @__PURE__ */ l(
             O,
             {
               size: "sm",
               variant: "ghost",
               onClick: z,
-              disabled: o || !c,
+              disabled: a || !c,
               children: H
             }
           ),
-          C && /* @__PURE__ */ l(
+          p && /* @__PURE__ */ l(
             O,
             {
               size: "sm",
               variant: "primary",
               onClick: Q,
-              disabled: o || !c,
+              disabled: a || !c,
               children: K
             }
           )
@@ -157,5 +157,5 @@ const gt = (U) => {
   );
 };
 export {
-  gt as SignPad
+  mt as SignPad
 };

package/dist/components/TimePicker/TimePicker.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),E=require("react"),H=require("../DateTimePicker/DateTimePicker.cjs"),n=require("../../utils/cn.cjs"),U=require("./TimePicker.utils.cjs"),e=require("./TimePicker.constants.cjs"),D=({mode:b="time",value:_,onChange:c,disabled:S=!1,placeholder:m="Select time",label:d,error:a,helperText:C,format:l="12h",minuteStep:o=5,clearable:u=!0,className:P,size:N="md",variant:R="default",...K})=>{if(b==="datetime")return s.jsx(H.DateTimePicker,{value:_ instanceof Date?_:null,onChange:t=>c==null?void 0:c(t),disabled:S,placeholder:m,label:d,error:a,helperText:C,timeFormat:l,minuteStep:o,clearable:u,className:P,size:N,variant:R,...K});const i=_,[M,I]=E.useState(!1),[O,A]=E.useState(12),[x,L]=E.useState(0),[f,j]=E.useState("AM"),T=E.useRef(null);E.useEffect(()=>{if(i&&typeof i=="string"){const[t,r]=i.split(" "),[p,y]=t.split(":").map(Number);A(p),L(y),r&&j(r)}},[i]),E.useEffect(()=>{const t=r=>{T.current&&!T.current.contains(r.target)&&I(!1)};return document.addEventListener("mousedown",t),()=>document.removeEventListener("mousedown",t)},[]);const k=()=>{c==null||c(U.formatTime(O,x,f,l)),I(!1)},h=l==="12h"?Array.from({length:e.TIMEPICKER_HOURS_12H},(t,r)=>r+1):Array.from({length:e.TIMEPICKER_HOURS_24H},(t,r)=>r),v=Array.from({length:e.TIMEPICKER_MINUTES_DIVISOR/o},(t,r)=>r*o);return s.jsxs("div",{ref:T,className:n.cn(e.TIMEPICKER_ROOT_CLASSES,P),children:[d&&s.jsx("label",{className:e.TIMEPICKER_LABEL_CLASSES,children:d}),s.jsxs("button",{type:"button",onClick:()=>!S&&I(!M),disabled:S,className:n.cn(e.TIMEPICKER_BUTTON_CLASSES,e.sizeClasses[N],e.variantClasses[R],a?"bear-border-red-500":"focus:bear-border-pink-500",S&&"bear-opacity-50 bear-cursor-not-allowed",i?"bear-text-gray-900 dark:bear-text-white":"bear-text-gray-400 dark:bear-text-zinc-500"),children:[s.jsx("span",{children:i||m}),s.jsx("svg",{className:"bear-w-5 bear-h-5 bear-text-gray-400 dark:bear-text-zinc-400",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",children:s.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"})})]}),a&&s.jsx("p",{className:e.TIMEPICKER_ERROR_CLASSES,children:a}),C&&!a&&s.jsx("p",{className:e.TIMEPICKER_HELPER_CLASSES,children:C}),M&&s.jsxs("div",{className:e.TIMEPICKER_DROPDOWN_CLASSES,children:[s.jsxs("div",{className:"bear-flex bear-gap-2 bear-mb-3",children:[s.jsxs("div",{className:"bear-flex-1",children:[s.jsx("div",{className:e.TIMEPICKER_COLUMN_HEADER_CLASSES,children:"Hour"}),s.jsx("div",{className:e.TIMEPICKER_COLUMN_CLASSES,children:h.map(t=>s.jsx("button",{onClick:()=>A(t),className:n.cn(e.TIMEPICKER_OPTION_CLASSES,O===t?e.TIMEPICKER_OPTION_ACTIVE_CLASSES:e.TIMEPICKER_OPTION_INACTIVE_CLASSES),children:t.toString().padStart(2,"0")},t))})]}),s.jsxs("div",{className:"bear-flex-1",children:[s.jsx("div",{className:e.TIMEPICKER_COLUMN_HEADER_CLASSES,children:"Minute"}),s.jsx("div",{className:e.TIMEPICKER_COLUMN_CLASSES,children:v.map(t=>s.jsx("button",{onClick:()=>L(t),className:n.cn(e.TIMEPICKER_OPTION_CLASSES,x===t?e.TIMEPICKER_OPTION_ACTIVE_CLASSES:e.TIMEPICKER_OPTION_INACTIVE_CLASSES),children:t.toString().padStart(2,"0")},t))})]}),l==="12h"&&s.jsxs("div",{className:"bear-flex-1",children:[s.jsx("div",{className:e.TIMEPICKER_COLUMN_HEADER_CLASSES,children:"Period"}),s.jsx("div",{className:"bear-space-y-1",children:["AM","PM"].map(t=>s.jsx("button",{onClick:()=>j(t),className:n.cn(e.TIMEPICKER_OPTION_CLASSES,"bear-py-2",f===t?e.TIMEPICKER_OPTION_ACTIVE_CLASSES:e.TIMEPICKER_OPTION_INACTIVE_CLASSES),children:t},t))})]})]}),s.jsxs("div",{className:e.TIMEPICKER_FOOTER_CLASSES,children:[u&&i&&s.jsx("button",{onClick:()=>{c==null||c(""),I(!1)},className:e.TIMEPICKER_CLEAR_BUTTON_CLASSES,children:"Clear"}),s.jsx("button",{onClick:k,className:e.TIMEPICKER_CONFIRM_BUTTON_CLASSES,children:"Confirm"})]})]})]})};exports.TimePicker=D;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),r=require("react"),V=require("../../utils/cn.cjs"),G=require("../../hooks/useMediaQuery.cjs"),J=require("./TimePicker.utils.cjs"),e=require("./TimePicker.constants.cjs"),X=require("./components/TimePickerColumnsDropdown/TimePickerColumnsDropdown.cjs"),Y=require("./components/TimePickerDialDropdown/TimePickerDialDropdown.cjs"),Z=s.jsx("svg",{className:"bear-w-5 bear-h-5 bear-text-gray-400 dark:bear-text-zinc-400",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",children:s.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"})}),g=t=>{const j={value:t.value,onChange:t.onChange,disabled:t.disabled??!1,placeholder:t.placeholder??"Select time",label:t.label,error:t.error,helperText:t.helperText,format:t.format??e.TIMEPICKER_FORMAT_12H,minuteStep:t.minuteStep??5,clearable:t.clearable??!0,className:t.className,size:t.size??"md",variant:t.variant??"default",dropdownVariant:t.dropdownVariant??e.TIMEPICKER_VARIANT_COLUMNS,dropdownVariantBreakpoint:t.dropdownVariantBreakpoint??e.TIMEPICKER_DEFAULT_BREAKPOINT,icon:t.icon,translations:t.translations},{value:y,onChange:l,disabled:T,placeholder:D,label:M,error:i,helperText:S,format:c,minuteStep:_,clearable:A,className:H,size:U,variant:q,dropdownVariant:f,dropdownVariantBreakpoint:F,icon:z,translations:b}=j,B=G.useMediaQuery(`(min-width: ${F}px)`),p=f===e.TIMEPICKER_VARIANT_AUTO?B?e.TIMEPICKER_VARIANT_DIAL:e.TIMEPICKER_VARIANT_COLUMNS:f,h=p===e.TIMEPICKER_VARIANT_DIAL&&c===e.TIMEPICKER_FORMAT_24H?e.TIMEPICKER_VARIANT_COLUMNS:p,n=y,[C,d]=r.useState(!1),[u,k]=r.useState(12),[E,N]=r.useState(0),[I,K]=r.useState("AM"),R=r.useRef(null);r.useEffect(()=>{if(n&&typeof n=="string"){const[o,a]=n.split(" "),[W,$]=o.split(":").map(Number);k(W),N($),a&&K(a)}},[n]),r.useEffect(()=>{const o=a=>{R.current&&!R.current.contains(a.target)&&d(!1)};return document.addEventListener("mousedown",o),()=>document.removeEventListener("mousedown",o)},[]);const O=r.useCallback(()=>{l==null||l(J.formatTime(u,E,I,c??e.TIMEPICKER_FORMAT_12H)),d(!1)},[l,u,E,I,c]),x=c===e.TIMEPICKER_FORMAT_12H?Array.from({length:e.TIMEPICKER_HOURS_12H},(o,a)=>a+1):Array.from({length:e.TIMEPICKER_HOURS_24H},(o,a)=>a),L=Array.from({length:e.TIMEPICKER_MINUTES_DIVISOR/(_??5)},(o,a)=>a*(_??5)),w=r.useCallback(()=>d(!1),[]),v=c??e.TIMEPICKER_FORMAT_12H,P=_??5,m=r.useMemo(()=>({selectedHour:u,setSelectedHour:k,selectedMinute:E,setSelectedMinute:N,period:I,setPeriod:K,format:v,hours:x,minutes:L,timeValue:n,clearable:A??!0,onChange:l,onConfirm:O,onClose:w,translations:b}),[u,E,I,v,x,L,n,A,l,O,w,b]),Q=r.useCallback(()=>C?h===e.TIMEPICKER_VARIANT_DIAL?s.jsx(Y.TimePickerDialDropdown,{...m,minuteStep:P}):s.jsx(X.TimePickerColumnsDropdown,{...m}):null,[C,h,m,P]);return s.jsxs("div",{ref:R,className:V.cn(e.TIMEPICKER_ROOT_CLASSES,H),children:[M&&s.jsx("label",{className:e.TIMEPICKER_LABEL_CLASSES,children:M}),s.jsxs("button",{type:"button",onClick:()=>!T&&d(!C),disabled:T,className:V.cn(e.TIMEPICKER_BUTTON_CLASSES,e.sizeClasses[U??"md"],e.variantClasses[q??"default"],i?"bear-border-red-500":"focus:bear-border-pink-500",T&&"bear-opacity-50 bear-cursor-not-allowed",n?"bear-text-gray-900 dark:bear-text-white":"bear-text-gray-400 dark:bear-text-zinc-500"),children:[s.jsx("span",{children:n||D}),z??Z]}),i&&s.jsx("p",{className:e.TIMEPICKER_ERROR_CLASSES,children:i}),S&&!i&&s.jsx("p",{className:e.TIMEPICKER_HELPER_CLASSES,children:S}),Q()]})};exports.TimePicker=g;