@forgedevstack/bear 1.1.8 → 1.2.0

package/README.md

@@ -76,7 +76,7 @@ function App() {
 
 ### Form Components
 
-- `Input` - Text input field
+- `Input` / `TextField` - Text input with optional `InputProps.startAdornment` / `endAdornment` for start/end slots
 - `Select` / `MultiSelect` - Dropdown selection components
 - `Checkbox` - Checkbox input
 - `Radio` / `RadioGroup` - Radio button inputs
@@ -116,7 +116,7 @@ function App() {
 - `DataTable` - Advanced data table with sorting, filtering, and pagination
 - `Carousel` - Image/content carousel
 - `Accordion` - Collapsible content sections
-- `Tabs` - Tabbed interface
+- `Tabs` / `TabList` / `Tab` / `TabPanel` - Tabbed interface; `TabList` supports `maxVisibleTabs` (overflow dropdown) and `wrap` (auto-break)
 - `List` - List component with various item types
 - `Avatar` / `AvatarGroup` - User avatar display
 - `Chip` - Compact element for input, attribute, or action
@@ -286,7 +286,7 @@ const buttonProps: ButtonProps = {
 
 ## How Bear Compares
 
-| Feature | Bear UI | MUI | Ant Design | Chakra UI |
+| Feature | Bear UI | Material UI | Ant Design | Chakra UI |
 |---------|---------|-----|------------|-----------|
 | **Tailwind CSS native** | Yes | No | No | Partial (v3) |
 | **Bundle (tree-shaken)** | ~18 kB | ~80 kB | ~120 kB | ~45 kB |
@@ -297,7 +297,7 @@ const buttonProps: ButtonProps = {
 | **Modular CSS** | `@BearInclude` PostCSS | N/A | N/A | N/A |
 | **React 18 / 19** | Yes | Yes | Yes | Yes |
 | **Zero runtime CSS-in-JS** | Yes | No (Emotion) | No (Less) | No (Emotion) |
-| **Built-in i18n** | Portal (en/es) | MUI X | ConfigProvider | N/A |
+| **Built-in i18n** | Portal (en/es) | X (add-on) | ConfigProvider | N/A |
 
 ## Contributing
 

package/dist/components/AlertDialog/AlertDialog.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),d=require("react"),v=require("react-dom"),a=require("../../utils/cn.cjs"),u=require("../Button/Button.cjs"),_=require("../Typography/Typography.cjs"),t=require("./AlertDialog.const.cjs"),C=b=>{const{isOpen:o,onClose:i,onConfirm:A,title:g,description:l,confirmText:m="Confirm",cancelText:y="Cancel",confirmVariant:f="danger",loading:r=!1,loadingText:E,closeOnBackdrop:p=!1,closeOnEscape:s=!0,icon:n,className:x,testId:D}=b,c=d.useCallback(S=>{s&&S.key==="Escape"&&!r&&i()},[s,i,r]);if(d.useEffect(()=>(o&&(document.addEventListener("keydown",c),document.body.style.overflow="hidden"),()=>{document.removeEventListener("keydown",c),document.body.style.overflow=""}),[o,c]),!o)return null;const L=e.jsxs("div",{className:"Bear-AlertDialog bear-fixed bear-inset-0 bear-z-50 bear-flex bear-items-center bear-justify-center bear-p-4","data-testid":D,children:[e.jsx("div",{className:a.cn("Bear-AlertDialog__backdrop",t.ALERT_DIALOG_BACKDROP_CLASSES),onClick:p&&!r?i:void 0,"aria-hidden":"true"}),e.jsxs("div",{role:"alertdialog","aria-modal":"true","aria-labelledby":"alert-dialog-title","aria-describedby":l?"alert-dialog-description":void 0,className:a.cn("Bear-AlertDialog__container",t.ALERT_DIALOG_CONTAINER_CLASSES,"bear-p-6",x),children:[n&&e.jsx("div",{className:"Bear-AlertDialog__icon bear-mb-4 bear-flex bear-justify-center",children:n}),e.jsx(_.Typography,{variant:"h6",id:"alert-dialog-title",className:a.cn("Bear-AlertDialog__title",t.ALERT_DIALOG_TITLE_CLASSES,n&&"bear-text-center"),children:g}),l&&e.jsx(_.Typography,{variant:"body2",id:"alert-dialog-description",className:a.cn("Bear-AlertDialog__description",t.ALERT_DIALOG_DESCRIPTION_CLASSES,n&&"bear-text-center"),children:l}),e.jsxs("div",{className:a.cn("Bear-AlertDialog__footer",t.ALERT_DIALOG_FOOTER_CLASSES),children:[e.jsx(u.Button,{variant:"ghost",onClick:i,disabled:r,children:y}),e.jsx(u.Button,{variant:f,onClick:A,loading:r,loadingText:E,children:m})]})]})]});return v.createPortal(L,document.body)};exports.AlertDialog=C;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),r=require("react"),B=require("react-dom"),a=require("../../utils/cn.cjs"),v=require("../Button/Button.cjs"),x=require("../Typography/Typography.cjs"),o=require("./AlertDialog.const.cjs"),N=p=>{const{isOpen:d,onClose:i,onConfirm:D,title:L,description:u,confirmText:S="Confirm",cancelText:T="Cancel",confirmVariant:C="danger",loading:n=!1,loadingText:R,closeOnBackdrop:I=!1,closeOnEscape:m=!0,icon:c,className:O,testId:j}=p,A=r.useId(),_=`bear-alert-title-${A}`,y=`bear-alert-desc-${A}`,l=r.useRef(null),E=r.useRef(null),b=r.useCallback(e=>{m&&e.key==="Escape"&&!n&&i()},[m,i,n]),f=r.useCallback(e=>{if(e.key!=="Tab"||!l.current)return;const s=l.current.querySelectorAll('button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])');if(s.length===0)return;const g=s[0],h=s[s.length-1];e.shiftKey&&document.activeElement===g?(e.preventDefault(),h.focus()):!e.shiftKey&&document.activeElement===h&&(e.preventDefault(),g.focus())},[]);if(r.useEffect(()=>(d&&(E.current=document.activeElement,document.addEventListener("keydown",b),document.addEventListener("keydown",f),document.body.style.overflow="hidden",requestAnimationFrame(()=>{var e;return(e=l.current)==null?void 0:e.focus()})),()=>{var e;document.removeEventListener("keydown",b),document.removeEventListener("keydown",f),document.body.style.overflow="",(e=E.current)==null||e.focus()}),[d,b,f]),!d)return null;const k=t.jsxs("div",{className:"Bear-AlertDialog bear-fixed bear-inset-0 bear-z-50 bear-flex bear-items-center bear-justify-center bear-p-4","data-testid":j,children:[t.jsx("div",{className:a.cn("Bear-AlertDialog__backdrop",o.ALERT_DIALOG_BACKDROP_CLASSES),onClick:I&&!n?i:void 0,"aria-hidden":"true"}),t.jsxs("div",{ref:l,role:"alertdialog","aria-modal":"true","aria-labelledby":_,"aria-describedby":u?y:void 0,tabIndex:-1,className:a.cn("Bear-AlertDialog__container",o.ALERT_DIALOG_CONTAINER_CLASSES,"bear-p-6",O),children:[c&&t.jsx("div",{className:"Bear-AlertDialog__icon bear-mb-4 bear-flex bear-justify-center",children:c}),t.jsx(x.Typography,{variant:"h6",id:_,className:a.cn("Bear-AlertDialog__title",o.ALERT_DIALOG_TITLE_CLASSES,c&&"bear-text-center"),children:L}),u&&t.jsx(x.Typography,{variant:"body2",id:y,className:a.cn("Bear-AlertDialog__description",o.ALERT_DIALOG_DESCRIPTION_CLASSES,c&&"bear-text-center"),children:u}),t.jsxs("div",{className:a.cn("Bear-AlertDialog__footer",o.ALERT_DIALOG_FOOTER_CLASSES),children:[t.jsx(v.Button,{variant:"ghost",onClick:i,disabled:n,children:T}),t.jsx(v.Button,{variant:C,onClick:D,loading:n,loadingText:R,children:S})]})]})]});return B.createPortal(k,document.body)};exports.AlertDialog=N;

package/dist/components/AlertDialog/AlertDialog.const.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e="bear-absolute bear-inset-0 bear-bg-black/60 bear-backdrop-blur-sm bear-transition-opacity",r="bear-relative bear-w-full bear-max-w-md bear-bg-white dark:bear-bg-zinc-900 bear-rounded-xl bear-shadow-2xl bear-border bear-border-gray-200 dark:bear-border-zinc-700 bear-transform bear-transition-all bear-animate-in bear-fade-in bear-zoom-in-95",a="bear-text-lg bear-font-semibold bear-text-gray-900 dark:bear-text-white",b="bear-text-sm bear-text-gray-600 dark:bear-text-gray-400 bear-mt-2",t="bear-flex bear-items-center bear-justify-end bear-gap-3 bear-pt-6";exports.ALERT_DIALOG_BACKDROP_CLASSES=e;exports.ALERT_DIALOG_CONTAINER_CLASSES=r;exports.ALERT_DIALOG_DESCRIPTION_CLASSES=b;exports.ALERT_DIALOG_FOOTER_CLASSES=t;exports.ALERT_DIALOG_TITLE_CLASSES=a;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e="bear-absolute bear-inset-0 bear-bg-black/60 bear-backdrop-blur-sm bear-transition-opacity animate-fade-in",a="bear-relative bear-w-full bear-max-w-md bear-bg-white dark:bear-bg-zinc-900 bear-rounded-xl bear-shadow-2xl bear-border bear-border-gray-200 dark:bear-border-zinc-700 bear-transform bear-transition-all animate-alert-dialog-in",r="bear-text-lg bear-font-semibold bear-text-gray-900 dark:bear-text-white",b="bear-text-sm bear-text-gray-600 dark:bear-text-gray-400 bear-mt-2",t="bear-flex bear-items-center bear-justify-end bear-gap-3 bear-pt-6";exports.ALERT_DIALOG_BACKDROP_CLASSES=e;exports.ALERT_DIALOG_CONTAINER_CLASSES=a;exports.ALERT_DIALOG_DESCRIPTION_CLASSES=b;exports.ALERT_DIALOG_FOOTER_CLASSES=t;exports.ALERT_DIALOG_TITLE_CLASSES=r;

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

@@ -1,5 +1,5 @@
-export declare const ALERT_DIALOG_BACKDROP_CLASSES = "bear-absolute bear-inset-0 bear-bg-black/60 bear-backdrop-blur-sm bear-transition-opacity";
-export declare const ALERT_DIALOG_CONTAINER_CLASSES = "bear-relative bear-w-full bear-max-w-md bear-bg-white dark:bear-bg-zinc-900 bear-rounded-xl bear-shadow-2xl bear-border bear-border-gray-200 dark:bear-border-zinc-700 bear-transform bear-transition-all bear-animate-in bear-fade-in bear-zoom-in-95";
+export declare const ALERT_DIALOG_BACKDROP_CLASSES = "bear-absolute bear-inset-0 bear-bg-black/60 bear-backdrop-blur-sm bear-transition-opacity animate-fade-in";
+export declare const ALERT_DIALOG_CONTAINER_CLASSES = "bear-relative bear-w-full bear-max-w-md bear-bg-white dark:bear-bg-zinc-900 bear-rounded-xl bear-shadow-2xl bear-border bear-border-gray-200 dark:bear-border-zinc-700 bear-transform bear-transition-all animate-alert-dialog-in";
 export declare const ALERT_DIALOG_TITLE_CLASSES = "bear-text-lg bear-font-semibold bear-text-gray-900 dark:bear-text-white";
 export declare const ALERT_DIALOG_DESCRIPTION_CLASSES = "bear-text-sm bear-text-gray-600 dark:bear-text-gray-400 bear-mt-2";
 export declare const ALERT_DIALOG_FOOTER_CLASSES = "bear-flex bear-items-center bear-justify-end bear-gap-3 bear-pt-6";

package/dist/components/AlertDialog/AlertDialog.const.js

@@ -1,8 +1,8 @@
-const e = "bear-absolute bear-inset-0 bear-bg-black/60 bear-backdrop-blur-sm bear-transition-opacity", r = "bear-relative bear-w-full bear-max-w-md bear-bg-white dark:bear-bg-zinc-900 bear-rounded-xl bear-shadow-2xl bear-border bear-border-gray-200 dark:bear-border-zinc-700 bear-transform bear-transition-all bear-animate-in bear-fade-in bear-zoom-in-95", a = "bear-text-lg bear-font-semibold bear-text-gray-900 dark:bear-text-white", b = "bear-text-sm bear-text-gray-600 dark:bear-text-gray-400 bear-mt-2", t = "bear-flex bear-items-center bear-justify-end bear-gap-3 bear-pt-6";
+const a = "bear-absolute bear-inset-0 bear-bg-black/60 bear-backdrop-blur-sm bear-transition-opacity animate-fade-in", e = "bear-relative bear-w-full bear-max-w-md bear-bg-white dark:bear-bg-zinc-900 bear-rounded-xl bear-shadow-2xl bear-border bear-border-gray-200 dark:bear-border-zinc-700 bear-transform bear-transition-all animate-alert-dialog-in", r = "bear-text-lg bear-font-semibold bear-text-gray-900 dark:bear-text-white", b = "bear-text-sm bear-text-gray-600 dark:bear-text-gray-400 bear-mt-2", t = "bear-flex bear-items-center bear-justify-end bear-gap-3 bear-pt-6";
 export {
-  e as ALERT_DIALOG_BACKDROP_CLASSES,
-  r as ALERT_DIALOG_CONTAINER_CLASSES,
+  a as ALERT_DIALOG_BACKDROP_CLASSES,
+  e as ALERT_DIALOG_CONTAINER_CLASSES,
   b as ALERT_DIALOG_DESCRIPTION_CLASSES,
   t as ALERT_DIALOG_FOOTER_CLASSES,
-  a as ALERT_DIALOG_TITLE_CLASSES
+  r as ALERT_DIALOG_TITLE_CLASSES
 };

package/dist/components/AlertDialog/AlertDialog.js

@@ -1,96 +1,110 @@
-import { jsxs as d, jsx as e } from "react/jsx-runtime";
-import { useCallback as y, useEffect as D } from "react";
-import { createPortal as h } from "react-dom";
+import { jsxs as m, jsx as t } from "react/jsx-runtime";
+import { useId as w, useRef as y, useCallback as h, useEffect as G } from "react";
+import { createPortal as j } from "react-dom";
 import { cn as a } from "../../utils/cn.js";
-import { Button as s } from "../Button/Button.js";
-import { Typography as m } from "../Typography/Typography.js";
-import { ALERT_DIALOG_BACKDROP_CLASSES as T, ALERT_DIALOG_TITLE_CLASSES as O, ALERT_DIALOG_DESCRIPTION_CLASSES as x, ALERT_DIALOG_FOOTER_CLASSES as N, ALERT_DIALOG_CONTAINER_CLASSES as B } from "./AlertDialog.const.js";
-const z = (_) => {
+import { Button as L } from "../Button/Button.js";
+import { Typography as g } from "../Typography/Typography.js";
+import { ALERT_DIALOG_BACKDROP_CLASSES as F, ALERT_DIALOG_TITLE_CLASSES as K, ALERT_DIALOG_DESCRIPTION_CLASSES as P, ALERT_DIALOG_FOOTER_CLASSES as q, ALERT_DIALOG_CONTAINER_CLASSES as $ } from "./AlertDialog.const.js";
+const W = (C) => {
   const {
-    isOpen: o,
-    onClose: t,
-    onConfirm: f,
-    title: b,
-    description: l,
-    confirmText: A = "Confirm",
-    cancelText: p = "Cancel",
-    confirmVariant: E = "danger",
+    isOpen: c,
+    onClose: n,
+    onConfirm: D,
+    title: S,
+    description: d,
+    confirmText: T = "Confirm",
+    cancelText: x = "Cancel",
+    confirmVariant: I = "danger",
     loading: r = !1,
-    loadingText: g,
-    closeOnBackdrop: L = !1,
-    closeOnEscape: c = !0,
-    icon: i,
-    className: u,
-    testId: C
-  } = _, n = y(
-    (S) => {
-      c && S.key === "Escape" && !r && t();
+    loadingText: O,
+    closeOnBackdrop: k = !1,
+    closeOnEscape: f = !0,
+    icon: o,
+    className: R,
+    testId: N
+  } = C, b = w(), A = `bear-alert-title-${b}`, _ = `bear-alert-desc-${b}`, i = y(null), E = y(null), s = h(
+    (e) => {
+      f && e.key === "Escape" && !r && n();
     },
-    [c, t, r]
-  );
-  if (D(() => (o && (document.addEventListener("keydown", n), document.body.style.overflow = "hidden"), () => {
-    document.removeEventListener("keydown", n), document.body.style.overflow = "";
-  }), [o, n]), !o) return null;
-  const v = /* @__PURE__ */ d(
+    [f, n, r]
+  ), u = h((e) => {
+    if (e.key !== "Tab" || !i.current) return;
+    const l = i.current.querySelectorAll(
+      'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'
+    );
+    if (l.length === 0) return;
+    const p = l[0], v = l[l.length - 1];
+    e.shiftKey && document.activeElement === p ? (e.preventDefault(), v.focus()) : !e.shiftKey && document.activeElement === v && (e.preventDefault(), p.focus());
+  }, []);
+  if (G(() => (c && (E.current = document.activeElement, document.addEventListener("keydown", s), document.addEventListener("keydown", u), document.body.style.overflow = "hidden", requestAnimationFrame(() => {
+    var e;
+    return (e = i.current) == null ? void 0 : e.focus();
+  })), () => {
+    var e;
+    document.removeEventListener("keydown", s), document.removeEventListener("keydown", u), document.body.style.overflow = "", (e = E.current) == null || e.focus();
+  }), [c, s, u]), !c) return null;
+  const B = /* @__PURE__ */ m(
     "div",
     {
       className: "Bear-AlertDialog bear-fixed bear-inset-0 bear-z-50 bear-flex bear-items-center bear-justify-center bear-p-4",
-      "data-testid": C,
+      "data-testid": N,
       children: [
-        /* @__PURE__ */ e(
+        /* @__PURE__ */ t(
           "div",
           {
-            className: a("Bear-AlertDialog__backdrop", T),
-            onClick: L && !r ? t : void 0,
+            className: a("Bear-AlertDialog__backdrop", F),
+            onClick: k && !r ? n : void 0,
             "aria-hidden": "true"
           }
         ),
-        /* @__PURE__ */ d(
+        /* @__PURE__ */ m(
           "div",
           {
+            ref: i,
             role: "alertdialog",
             "aria-modal": "true",
-            "aria-labelledby": "alert-dialog-title",
-            "aria-describedby": l ? "alert-dialog-description" : void 0,
-            className: a("Bear-AlertDialog__container", B, "bear-p-6", u),
+            "aria-labelledby": A,
+            "aria-describedby": d ? _ : void 0,
+            tabIndex: -1,
+            className: a("Bear-AlertDialog__container", $, "bear-p-6", R),
             children: [
-              i && /* @__PURE__ */ e("div", { className: "Bear-AlertDialog__icon bear-mb-4 bear-flex bear-justify-center", children: i }),
-              /* @__PURE__ */ e(
-                m,
+              o && /* @__PURE__ */ t("div", { className: "Bear-AlertDialog__icon bear-mb-4 bear-flex bear-justify-center", children: o }),
+              /* @__PURE__ */ t(
+                g,
                 {
                   variant: "h6",
-                  id: "alert-dialog-title",
-                  className: a("Bear-AlertDialog__title", O, i && "bear-text-center"),
-                  children: b
+                  id: A,
+                  className: a("Bear-AlertDialog__title", K, o && "bear-text-center"),
+                  children: S
                 }
               ),
-              l && /* @__PURE__ */ e(
-                m,
+              d && /* @__PURE__ */ t(
+                g,
                 {
                   variant: "body2",
-                  id: "alert-dialog-description",
-                  className: a("Bear-AlertDialog__description", x, i && "bear-text-center"),
-                  children: l
+                  id: _,
+                  className: a("Bear-AlertDialog__description", P, o && "bear-text-center"),
+                  children: d
                 }
               ),
-              /* @__PURE__ */ d("div", { className: a("Bear-AlertDialog__footer", N), children: [
-                /* @__PURE__ */ e(
-                  s,
+              /* @__PURE__ */ m("div", { className: a("Bear-AlertDialog__footer", q), children: [
+                /* @__PURE__ */ t(
+                  L,
                   {
                     variant: "ghost",
-                    onClick: t,
+                    onClick: n,
                     disabled: r,
-                    children: p
+                    children: x
                   }
                 ),
-                /* @__PURE__ */ e(
-                  s,
+                /* @__PURE__ */ t(
+                  L,
                   {
-                    variant: E,
-                    onClick: f,
+                    variant: I,
+                    onClick: D,
                     loading: r,
-                    loadingText: g,
-                    children: A
+                    loadingText: O,
+                    children: T
                   }
                 )
               ] })
@@ -100,8 +114,8 @@ const z = (_) => {
       ]
     }
   );
-  return h(v, document.body);
+  return j(B, document.body);
 };
 export {
-  z as AlertDialog
+  W as AlertDialog
 };

package/dist/components/BearLogo/BearLogo.d.ts

@@ -1,10 +1,5 @@
-import { FC, SVGAttributes } from 'react';
-export interface BearLogoProps extends SVGAttributes<SVGElement> {
-    /** Logo size in pixels */
-    size?: number;
-    /** Whether to show animated sparkle */
-    animated?: boolean;
-}
+import { FC } from 'react';
+import { BearLogoProps } from './BearLogo.types';
 /**
  * BearLogo - Lotso-inspired pink teddy bear logo from Toy Story
  * Full body sitting teddy bear with characteristic angry eyebrows

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

@@ -0,0 +1,15 @@
+import { SVGAttributes } from 'react';
+export interface BearLogoProps extends SVGAttributes<SVGElement> {
+    /** Logo size in pixels */
+    size?: number;
+    /** Whether to show animated sparkle */
+    animated?: boolean;
+}
+export interface EmberLogoProps {
+    /** Logo size in pixels */
+    size?: number;
+    /** Additional class names */
+    className?: string;
+    /** Whether to animate the logo */
+    animated?: boolean;
+}

package/dist/components/BearLogo/EmberLogo.d.ts

@@ -1,12 +1,5 @@
 import { FC } from 'react';
-export interface EmberLogoProps {
-    /** Logo size in pixels */
-    size?: number;
-    /** Additional class names */
-    className?: string;
-    /** Whether to animate the logo */
-    animated?: boolean;
-}
+import { EmberLogoProps } from './BearLogo.types';
 /**
  * Ember Logo Component
  * A stylized flame representing warmth, energy, and the forge

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

@@ -1,4 +1,3 @@
 export { BearLogo } from './BearLogo';
-export type { BearLogoProps } from './BearLogo';
 export { EmberLogo } from './EmberLogo';
-export type { EmberLogoProps } from './EmberLogo';
+export type { BearLogoProps, EmberLogoProps } from './BearLogo.types';

package/dist/components/Biometric/Biometric.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),N=require("react"),n=require("../../utils/cn.cjs"),q=require("./BiometricIcon.cjs"),z=require("./useBiometric.cjs"),M={sm:48,md:72,lg:96,xl:128},_={sm:80,md:120,lg:160,xl:200},g={idle:"bear-text-gray-500 dark:bear-text-gray-400",scanning:"bear-text-bear-500 dark:bear-text-bear-400",success:"bear-text-green-500 dark:bear-text-green-400",error:"bear-text-red-500 dark:bear-text-red-400"},i={idle:"var(--bear-border-default)",scanning:"var(--bear-primary-500, #ec4899)",success:"var(--bear-success-500, #22c55e)",error:"var(--bear-danger-500, #ef4444)"},w=({type:b="fingerprint",size:l="md",status:o,label:m,successLabel:p="Verified",errorLabel:x="Try again",scanningLabel:f="Scanning...",onScan:a,onSuccess:y,onError:v,disabled:s=!1,animated:t=!0,className:j,testId:B})=>{const{status:k,scan:u}=z.useBiometric({onSuccess:y,onError:v}),e=o??k,C=M[l],d=_[l],c=e==="scanning"?f:e==="success"?p:e==="error"?x:m,h=N.useCallback(()=>{s||e==="scanning"||(a==null||a(),o===void 0&&u())},[s,e,a,o,u]);return r.jsxs("div",{className:n.cn("Bear-Biometric bear-flex bear-flex-col bear-items-center bear-gap-3",j),"data-testid":B,"data-status":e,"data-type":b,children:[r.jsxs("button",{type:"button",disabled:s||e==="scanning",onClick:h,className:n.cn("Bear-Biometric__trigger bear-relative bear-flex bear-items-center bear-justify-center bear-rounded-full bear-border-0 bear-cursor-pointer bear-outline-none","bear-transition-all bear-duration-300","focus-visible:bear-ring-2 focus-visible:bear-ring-bear-500 focus-visible:bear-ring-offset-2",g[e],s&&"bear-opacity-40 bear-cursor-not-allowed"),style:{width:d,height:d,backgroundColor:"var(--bear-bg-secondary)"},"aria-label":c??"Authenticate",children:[t&&e==="scanning"&&r.jsxs(r.Fragment,{children:[r.jsx("span",{className:"bear-absolute bear-inset-0 bear-rounded-full bear-animate-ping bear-opacity-20",style:{backgroundColor:i[e]}}),r.jsx("span",{className:"bear-absolute bear-inset-2 bear-rounded-full bear-animate-ping bear-opacity-10",style:{backgroundColor:i[e],animationDelay:"0.3s"}})]}),r.jsx("span",{className:n.cn("bear-absolute bear-inset-0 bear-rounded-full bear-border-2 bear-transition-colors bear-duration-300",e==="scanning"&&t&&"bear-animate-spin"),style:{borderColor:i[e],borderStyle:e==="scanning"?"dashed":"solid",animationDuration:e==="scanning"?"3s":void 0}}),t&&e==="success"&&r.jsx("span",{className:"bear-absolute bear-inset-0 bear-rounded-full bear-opacity-10",style:{backgroundColor:i.success}}),r.jsx(q.BiometricIcon,{type:b,size:C,status:e,animated:t})]}),c&&r.jsx("span",{className:n.cn("Bear-Biometric__label bear-text-sm bear-font-medium bear-transition-colors bear-duration-300",g[e]),children:c})]})};exports.Biometric=w;

package/dist/components/Biometric/Biometric.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { BiometricProps } from './Biometric.types';
+export declare const Biometric: FC<BiometricProps>;

package/dist/components/Biometric/Biometric.js

@@ -0,0 +1,123 @@
+import { jsxs as c, Fragment as _, jsx as r } from "react/jsx-runtime";
+import { useCallback as j } from "react";
+import { cn as n } from "../../utils/cn.js";
+import { BiometricIcon as M } from "./BiometricIcon.js";
+import { useBiometric as w } from "./useBiometric.js";
+const D = { sm: 48, md: 72, lg: 96, xl: 128 }, A = { sm: 80, md: 120, lg: 160, xl: 200 }, g = {
+  idle: "bear-text-gray-500 dark:bear-text-gray-400",
+  scanning: "bear-text-bear-500 dark:bear-text-bear-400",
+  success: "bear-text-green-500 dark:bear-text-green-400",
+  error: "bear-text-red-500 dark:bear-text-red-400"
+}, i = {
+  idle: "var(--bear-border-default)",
+  scanning: "var(--bear-primary-500, #ec4899)",
+  success: "var(--bear-success-500, #22c55e)",
+  error: "var(--bear-danger-500, #ef4444)"
+}, q = ({
+  type: l = "fingerprint",
+  size: u = "md",
+  status: o,
+  label: p,
+  successLabel: f = "Verified",
+  errorLabel: y = "Try again",
+  scanningLabel: x = "Scanning...",
+  onScan: a,
+  onSuccess: v,
+  onError: k,
+  disabled: s = !1,
+  animated: t = !0,
+  className: C,
+  testId: h
+}) => {
+  const { status: B, scan: d } = w({
+    onSuccess: v,
+    onError: k
+  }), e = o ?? B, N = D[u], m = A[u], b = e === "scanning" ? x : e === "success" ? f : e === "error" ? y : p, z = j(() => {
+    s || e === "scanning" || (a == null || a(), o === void 0 && d());
+  }, [s, e, a, o, d]);
+  return /* @__PURE__ */ c(
+    "div",
+    {
+      className: n("Bear-Biometric bear-flex bear-flex-col bear-items-center bear-gap-3", C),
+      "data-testid": h,
+      "data-status": e,
+      "data-type": l,
+      children: [
+        /* @__PURE__ */ c(
+          "button",
+          {
+            type: "button",
+            disabled: s || e === "scanning",
+            onClick: z,
+            className: n(
+              "Bear-Biometric__trigger bear-relative bear-flex bear-items-center bear-justify-center bear-rounded-full bear-border-0 bear-cursor-pointer bear-outline-none",
+              "bear-transition-all bear-duration-300",
+              "focus-visible:bear-ring-2 focus-visible:bear-ring-bear-500 focus-visible:bear-ring-offset-2",
+              g[e],
+              s && "bear-opacity-40 bear-cursor-not-allowed"
+            ),
+            style: {
+              width: m,
+              height: m,
+              backgroundColor: "var(--bear-bg-secondary)"
+            },
+            "aria-label": b ?? "Authenticate",
+            children: [
+              t && e === "scanning" && /* @__PURE__ */ c(_, { children: [
+                /* @__PURE__ */ r(
+                  "span",
+                  {
+                    className: "bear-absolute bear-inset-0 bear-rounded-full bear-animate-ping bear-opacity-20",
+                    style: { backgroundColor: i[e] }
+                  }
+                ),
+                /* @__PURE__ */ r(
+                  "span",
+                  {
+                    className: "bear-absolute bear-inset-2 bear-rounded-full bear-animate-ping bear-opacity-10",
+                    style: { backgroundColor: i[e], animationDelay: "0.3s" }
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ r(
+                "span",
+                {
+                  className: n(
+                    "bear-absolute bear-inset-0 bear-rounded-full bear-border-2 bear-transition-colors bear-duration-300",
+                    e === "scanning" && t && "bear-animate-spin"
+                  ),
+                  style: {
+                    borderColor: i[e],
+                    borderStyle: e === "scanning" ? "dashed" : "solid",
+                    animationDuration: e === "scanning" ? "3s" : void 0
+                  }
+                }
+              ),
+              t && e === "success" && /* @__PURE__ */ r(
+                "span",
+                {
+                  className: "bear-absolute bear-inset-0 bear-rounded-full bear-opacity-10",
+                  style: { backgroundColor: i.success }
+                }
+              ),
+              /* @__PURE__ */ r(M, { type: l, size: N, status: e, animated: t })
+            ]
+          }
+        ),
+        b && /* @__PURE__ */ r(
+          "span",
+          {
+            className: n(
+              "Bear-Biometric__label bear-text-sm bear-font-medium bear-transition-colors bear-duration-300",
+              g[e]
+            ),
+            children: b
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  q as Biometric
+};

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

@@ -0,0 +1,35 @@
+export type BiometricType = 'fingerprint' | 'face' | 'iris';
+export type BiometricStatus = 'idle' | 'scanning' | 'success' | 'error';
+export interface BiometricProps {
+    type?: BiometricType;
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+    status?: BiometricStatus;
+    label?: string;
+    successLabel?: string;
+    errorLabel?: string;
+    scanningLabel?: string;
+    onScan?: () => void;
+    onSuccess?: () => void;
+    onError?: () => void;
+    disabled?: boolean;
+    animated?: boolean;
+    className?: string;
+    testId?: string;
+}
+export interface BiometricIconProps {
+    type: BiometricType;
+    size: number;
+    status: BiometricStatus;
+    animated: boolean;
+}
+export interface UseBiometricOptions {
+    scanDuration?: number;
+    successDuration?: number;
+    onSuccess?: () => void;
+    onError?: () => void;
+}
+export interface UseBiometricReturn {
+    status: BiometricStatus;
+    scan: () => void;
+    reset: () => void;
+}

package/dist/components/Biometric/BiometricIcon.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),n=require("../../utils/cn.cjs");require("react");const i=({size:o})=>r.jsxs("svg",{width:o,height:o,viewBox:"0 0 64 64",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[r.jsx("path",{d:"M32 8C20.954 8 12 16.954 12 28v8",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",opacity:"0.3"}),r.jsx("path",{d:"M52 28v8c0 11.046-8.954 20-20 20",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",opacity:"0.3"}),r.jsx("path",{d:"M18 24c0-7.732 6.268-14 14-14s14 6.268 14 14",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",opacity:"0.5"}),r.jsx("path",{d:"M18 24v12c0 7.732 6.268 14 14 14",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",opacity:"0.5"}),r.jsx("path",{d:"M46 24v12c0 4.418-2.239 8.313-5.644 10.607",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",opacity:"0.5"}),r.jsx("path",{d:"M24 22c0-4.418 3.582-8 8-8s8 3.582 8 8",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",opacity:"0.7"}),r.jsx("path",{d:"M24 22v14c0 4.418 3.582 8 8 8s8-3.582 8-8V22",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",opacity:"0.7"}),r.jsx("path",{d:"M28 22c0-2.209 1.791-4 4-4s4 1.791 4 4v14c0 2.209-1.791 4-4 4s-4-1.791-4-4V22z",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round"}),r.jsx("path",{d:"M32 22v14",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round"})]}),a=({size:o})=>r.jsxs("svg",{width:o,height:o,viewBox:"0 0 64 64",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[r.jsx("path",{d:"M12 20V12h8",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",strokeLinejoin:"round"}),r.jsx("path",{d:"M52 20V12h-8",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",strokeLinejoin:"round"}),r.jsx("path",{d:"M12 44v8h8",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",strokeLinejoin:"round"}),r.jsx("path",{d:"M52 44v8h-8",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",strokeLinejoin:"round"}),r.jsx("circle",{cx:"24",cy:"28",r:"2.5",fill:"currentColor"}),r.jsx("circle",{cx:"40",cy:"28",r:"2.5",fill:"currentColor"}),r.jsx("path",{d:"M26 40c1.5 2 3.5 3 6 3s4.5-1 6-3",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round"}),r.jsx("path",{d:"M28 34h8",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",opacity:"0.5"})]}),d=({size:o})=>r.jsxs("svg",{width:o,height:o,viewBox:"0 0 64 64",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[r.jsx("ellipse",{cx:"32",cy:"32",rx:"24",ry:"14",stroke:"currentColor",strokeWidth:"2.5",opacity:"0.4"}),r.jsx("circle",{cx:"32",cy:"32",r:"10",stroke:"currentColor",strokeWidth:"2.5",opacity:"0.7"}),r.jsx("circle",{cx:"32",cy:"32",r:"5",fill:"currentColor",opacity:"0.9"}),r.jsx("circle",{cx:"34",cy:"30",r:"1.5",fill:"var(--bear-bg-primary, #fff)"}),r.jsx("path",{d:"M8 32c6-12 16-18 24-18s18 6 24 18",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",opacity:"0.3"}),r.jsx("path",{d:"M8 32c6 12 16 18 24 18s18-6 24-18",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",opacity:"0.3"})]}),k={fingerprint:i,face:a,iris:d},p=({type:o,size:t,status:e,animated:s})=>{const c=k[o];return r.jsx("div",{className:n.cn("Bear-Biometric__icon bear-relative bear-flex bear-items-center bear-justify-center",s&&e==="scanning"&&"bear-animate-pulse"),children:r.jsx(c,{size:t})})};exports.BiometricIcon=p;

package/dist/components/Biometric/BiometricIcon.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { BiometricIconProps } from './Biometric.types';
+export declare const BiometricIcon: FC<BiometricIconProps>;

package/dist/components/Biometric/BiometricIcon.js

@@ -0,0 +1,45 @@
+import { jsx as r, jsxs as t } from "react/jsx-runtime";
+import { cn as s } from "../../utils/cn.js";
+import "react";
+const a = ({ size: o }) => /* @__PURE__ */ t("svg", { width: o, height: o, viewBox: "0 0 64 64", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+  /* @__PURE__ */ r("path", { d: "M32 8C20.954 8 12 16.954 12 28v8", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", opacity: "0.3" }),
+  /* @__PURE__ */ r("path", { d: "M52 28v8c0 11.046-8.954 20-20 20", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", opacity: "0.3" }),
+  /* @__PURE__ */ r("path", { d: "M18 24c0-7.732 6.268-14 14-14s14 6.268 14 14", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", opacity: "0.5" }),
+  /* @__PURE__ */ r("path", { d: "M18 24v12c0 7.732 6.268 14 14 14", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", opacity: "0.5" }),
+  /* @__PURE__ */ r("path", { d: "M46 24v12c0 4.418-2.239 8.313-5.644 10.607", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", opacity: "0.5" }),
+  /* @__PURE__ */ r("path", { d: "M24 22c0-4.418 3.582-8 8-8s8 3.582 8 8", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", opacity: "0.7" }),
+  /* @__PURE__ */ r("path", { d: "M24 22v14c0 4.418 3.582 8 8 8s8-3.582 8-8V22", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", opacity: "0.7" }),
+  /* @__PURE__ */ r("path", { d: "M28 22c0-2.209 1.791-4 4-4s4 1.791 4 4v14c0 2.209-1.791 4-4 4s-4-1.791-4-4V22z", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round" }),
+  /* @__PURE__ */ r("path", { d: "M32 22v14", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round" })
+] }), d = ({ size: o }) => /* @__PURE__ */ t("svg", { width: o, height: o, viewBox: "0 0 64 64", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+  /* @__PURE__ */ r("path", { d: "M12 20V12h8", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ r("path", { d: "M52 20V12h-8", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ r("path", { d: "M12 44v8h8", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ r("path", { d: "M52 44v8h-8", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ r("circle", { cx: "24", cy: "28", r: "2.5", fill: "currentColor" }),
+  /* @__PURE__ */ r("circle", { cx: "40", cy: "28", r: "2.5", fill: "currentColor" }),
+  /* @__PURE__ */ r("path", { d: "M26 40c1.5 2 3.5 3 6 3s4.5-1 6-3", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round" }),
+  /* @__PURE__ */ r("path", { d: "M28 34h8", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", opacity: "0.5" })
+] }), p = ({ size: o }) => /* @__PURE__ */ t("svg", { width: o, height: o, viewBox: "0 0 64 64", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+  /* @__PURE__ */ r("ellipse", { cx: "32", cy: "32", rx: "24", ry: "14", stroke: "currentColor", strokeWidth: "2.5", opacity: "0.4" }),
+  /* @__PURE__ */ r("circle", { cx: "32", cy: "32", r: "10", stroke: "currentColor", strokeWidth: "2.5", opacity: "0.7" }),
+  /* @__PURE__ */ r("circle", { cx: "32", cy: "32", r: "5", fill: "currentColor", opacity: "0.9" }),
+  /* @__PURE__ */ r("circle", { cx: "34", cy: "30", r: "1.5", fill: "var(--bear-bg-primary, #fff)" }),
+  /* @__PURE__ */ r("path", { d: "M8 32c6-12 16-18 24-18s18 6 24 18", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", opacity: "0.3" }),
+  /* @__PURE__ */ r("path", { d: "M8 32c6 12 16 18 24 18s18-6 24-18", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", opacity: "0.3" })
+] }), k = { fingerprint: a, face: d, iris: p }, C = ({ type: o, size: e, status: c, animated: n }) => {
+  const i = k[o];
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      className: s(
+        "Bear-Biometric__icon bear-relative bear-flex bear-items-center bear-justify-center",
+        n && c === "scanning" && "bear-animate-pulse"
+      ),
+      children: /* @__PURE__ */ r(i, { size: e })
+    }
+  );
+};
+export {
+  C as BiometricIcon
+};

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

@@ -0,0 +1,3 @@
+export { Biometric } from './Biometric';
+export { useBiometric } from './useBiometric';
+export type { BiometricProps, BiometricType, BiometricStatus, UseBiometricOptions, UseBiometricReturn } from './Biometric.types';

package/dist/components/Biometric/useBiometric.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react"),d=(o={})=>{const{scanDuration:a=2e3,successDuration:r=1500,onSuccess:c,onError:u}=o,[i,e]=s.useState("idle"),t=s.useRef(),n=s.useCallback(()=>{t.current&&clearTimeout(t.current)},[]),l=s.useCallback(()=>{n(),e("idle")},[n]),m=s.useCallback(()=>{i!=="scanning"&&(n(),e("scanning"),t.current=setTimeout(()=>{Math.random()>.2?(e("success"),c==null||c(),t.current=setTimeout(()=>e("idle"),r)):(e("error"),u==null||u(),t.current=setTimeout(()=>e("idle"),r))},a))},[i,n,a,r,c,u]);return{status:i,scan:m,reset:l}};exports.useBiometric=d;

package/dist/components/Biometric/useBiometric.d.ts

@@ -0,0 +1,2 @@
+import { UseBiometricOptions, UseBiometricReturn } from './Biometric.types';
+export declare const useBiometric: (options?: UseBiometricOptions) => UseBiometricReturn;

package/dist/components/Biometric/useBiometric.js

@@ -0,0 +1,21 @@
+import { useState as f, useRef as d, useCallback as i } from "react";
+const S = (a = {}) => {
+  const {
+    scanDuration: o = 2e3,
+    successDuration: r = 1500,
+    onSuccess: s,
+    onError: c
+  } = a, [u, e] = f("idle"), t = d(), n = i(() => {
+    t.current && clearTimeout(t.current);
+  }, []), l = i(() => {
+    n(), e("idle");
+  }, [n]), m = i(() => {
+    u !== "scanning" && (n(), e("scanning"), t.current = setTimeout(() => {
+      Math.random() > 0.2 ? (e("success"), s == null || s(), t.current = setTimeout(() => e("idle"), r)) : (e("error"), c == null || c(), t.current = setTimeout(() => e("idle"), r));
+    }, o));
+  }, [u, n, o, r, s, c]);
+  return { status: u, scan: m, reset: l };
+};
+export {
+  S as useBiometric
+};