@forgedevstack/bear 1.3.0 → 1.3.2

package/dist/components/AppShell/AppShell.const.js

@@ -1,25 +1,8 @@
-const r = "Bear-AppShell", e = !1, a = "md", b = !0, _ = !1, S = !0, A = "bear-flex bear-flex-col bear-min-h-0 bear-w-full bear-bg-[var(--bear-bg-primary)] bear-text-[var(--bear-text-primary)]", L = `${r}__body bear-flex bear-flex-1 bear-min-h-0 bear-w-full`, o = `${r}__header bear-w-full bear-z-30 bear-bg-[var(--bear-bg-primary)] bear-border-b bear-border-[var(--bear-border-default)]`, E = "bear-sticky bear-top-0", P = `${r}__navbar bear-flex-shrink-0 bear-overflow-y-auto bear-border-e bear-border-[var(--bear-border-default)] bear-bg-[var(--bear-bg-secondary)]`, t = {
+const e = {
   sm: "bear-w-56",
   md: "bear-w-64",
   lg: "bear-w-72"
-}, l = "bear-w-0 bear-overflow-hidden bear-border-e-0", d = `${r}__main bear-flex-1 bear-min-w-0 bear-overflow-auto`, n = "bear-p-4 md:bear-p-6", s = `${r}__aside bear-w-64 bear-flex-shrink-0 bear-overflow-y-auto bear-border-s bear-border-[var(--bear-border-default)] bear-bg-[var(--bear-bg-secondary)] bear-hidden lg:bear-block`, c = `${r}__footer bear-w-full bear-z-20 bear-bg-[var(--bear-bg-primary)] bear-border-t bear-border-[var(--bear-border-default)]`, H = "bear-sticky bear-bottom-0";
+};
 export {
-  s as APP_SHELL_ASIDE_CLASSES,
-  A as APP_SHELL_BASE_CLASSES,
-  L as APP_SHELL_BODY_CLASSES,
-  e as APP_SHELL_DEFAULT_NAVBAR_COLLAPSED,
-  a as APP_SHELL_DEFAULT_NAVBAR_WIDTH,
-  S as APP_SHELL_DEFAULT_PADDING,
-  _ as APP_SHELL_DEFAULT_STICKY_FOOTER,
-  b as APP_SHELL_DEFAULT_STICKY_HEADER,
-  c as APP_SHELL_FOOTER_CLASSES,
-  H as APP_SHELL_FOOTER_STICKY_CLASS,
-  o as APP_SHELL_HEADER_CLASSES,
-  E as APP_SHELL_HEADER_STICKY_CLASS,
-  d as APP_SHELL_MAIN_CLASSES,
-  n as APP_SHELL_MAIN_PADDING_CLASS,
-  P as APP_SHELL_NAVBAR_BASE_CLASSES,
-  l as APP_SHELL_NAVBAR_COLLAPSED_CLASS,
-  t as APP_SHELL_NAVBAR_WIDTH_CLASSES,
-  r as APP_SHELL_ROOT_CLASS
+  e as APP_SHELL_NAVBAR_WIDTH_CLASSES
 };

package/dist/components/AppShell/AppShell.d.ts

@@ -1,3 +1,2 @@
-import { FC } from 'react';
 import { AppShellProps } from './AppShell.types';
-export declare const AppShell: FC<AppShellProps>;
+export declare const AppShell: (props: AppShellProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/AppShell/AppShell.js

@@ -1,76 +1,80 @@
-import { jsxs as a, jsx as _ } from "react/jsx-runtime";
-import { APP_SHELL_DEFAULT_NAVBAR_COLLAPSED as D, APP_SHELL_DEFAULT_NAVBAR_WIDTH as N, APP_SHELL_DEFAULT_STICKY_HEADER as I, APP_SHELL_DEFAULT_STICKY_FOOTER as T, APP_SHELL_DEFAULT_PADDING as p, APP_SHELL_HEADER_STICKY_CLASS as h, APP_SHELL_HEADER_CLASSES as R, APP_SHELL_BODY_CLASSES as O, APP_SHELL_NAVBAR_COLLAPSED_CLASS as v, APP_SHELL_NAVBAR_WIDTH_CLASSES as B, APP_SHELL_NAVBAR_BASE_CLASSES as F, APP_SHELL_MAIN_PADDING_CLASS as f, APP_SHELL_MAIN_CLASSES as U, APP_SHELL_ASIDE_CLASSES as V, APP_SHELL_FOOTER_STICKY_CLASS as Y, APP_SHELL_FOOTER_CLASSES as K, APP_SHELL_BASE_CLASSES as b, APP_SHELL_ROOT_CLASS as x } from "./AppShell.const.js";
-import { cn as S } from "../../utils/cn.js";
+import { jsxs as i, jsx as r } from "react/jsx-runtime";
+import { APP_SHELL_NAVBAR_WIDTH_CLASSES as u } from "./AppShell.const.js";
+import { BOOLEAN_FALSE as t, SIZE_MD as y, BOOLEAN_TRUE as s, COMPONENT_NAME_APP_SHELL as x } from "../../constants/generals.const.js";
+import { cn as e } from "../../utils/cn.js";
 import "react";
-import { resolveBearId as W } from "../../utils/generateBearId.utils.js";
-import { useBearId as g } from "../../utils/useBearId.js";
-const q = (d) => {
+import { resolveBearId as B } from "../../utils/generateBearId.utils.js";
+import { useBearId as w } from "../../utils/useBearId.js";
+const C = (m) => {
   const {
-    header: A,
-    navbar: L,
-    aside: E,
-    footer: e,
-    children: r,
-    navbarCollapsed: P = D,
-    navbarWidth: s = N,
-    stickyHeader: i = I,
-    stickyFooter: o = T,
-    padding: t = p,
-    className: H,
-    id: c,
-    testId: l,
-    ...m
-  } = d, n = g("AppShell"), C = W(c, n);
-  return /* @__PURE__ */ a(
+    header: a,
+    navbar: b,
+    aside: d,
+    footer: o,
+    children: p,
+    navbarCollapsed: l = t,
+    navbarWidth: n = y,
+    stickyHeader: c = s,
+    stickyFooter: f = t,
+    padding: h = s,
+    className: v,
+    id: _,
+    testId: A,
+    ...S
+  } = m, N = w(x), g = B(_, N);
+  return /* @__PURE__ */ i(
     "div",
     {
-      ...m,
-      id: C,
-      "data-testid": l,
-      className: S(x, b, H),
+      ...S,
+      id: g,
+      "data-testid": A,
+      className: e(
+        "Bear-AppShell bear-flex bear-flex-col bear-min-h-0 bear-w-full bear-bg-[var(--bear-bg-primary)] bear-text-[var(--bear-text-primary)]",
+        v
+      ),
       children: [
-        A && /* @__PURE__ */ _(
+        a && /* @__PURE__ */ r(
           "div",
           {
-            className: S(
-              R,
-              i && h
+            className: e(
+              "Bear-AppShell__header bear-w-full bear-z-30 bear-bg-[var(--bear-bg-primary)] bear-border-b bear-border-[var(--bear-border-default)]",
+              c && "bear-sticky bear-top-0"
             ),
-            children: A
+            children: a
           }
         ),
-        /* @__PURE__ */ a("div", { className: O, children: [
-          L !== void 0 && /* @__PURE__ */ _(
+        /* @__PURE__ */ i("div", { className: "Bear-AppShell__body bear-flex bear-flex-1 bear-min-h-0 bear-w-full", children: [
+          b !== void 0 && /* @__PURE__ */ r(
             "aside",
             {
-              className: S(
-                F,
-                P ? v : B[s]
+              className: e(
+                "Bear-AppShell__navbar bear-flex-shrink-0 bear-overflow-y-auto bear-border-e bear-border-[var(--bear-border-default)] bear-bg-[var(--bear-bg-secondary)]",
+                l ? "bear-w-0 bear-overflow-hidden bear-border-e-0" : u[n]
               ),
-              "aria-hidden": P || void 0,
-              children: L
+              "aria-hidden": l || void 0,
+              children: b
             }
           ),
-          /* @__PURE__ */ _(
+          /* @__PURE__ */ r(
             "main",
             {
-              className: S(
-                U,
-                t && f
+              className: e(
+                "Bear-AppShell__main bear-flex-1 bear-min-w-0 bear-overflow-auto",
+                h && "bear-p-4 md:bear-p-6"
               ),
-              children: r
+              children: p
             }
           ),
-          E && /* @__PURE__ */ _("aside", { className: V, children: E })
+          d && /* @__PURE__ */ r("aside", { className: "Bear-AppShell__aside bear-w-64 bear-flex-shrink-0 bear-overflow-y-auto bear-border-s bear-border-[var(--bear-border-default)] bear-bg-[var(--bear-bg-secondary)] bear-hidden lg:bear-block", children: d })
         ] }),
-        e && /* @__PURE__ */ _(
+        o && /* @__PURE__ */ r(
           "div",
           {
-            className: S(
-              K,
-              o && Y
+            className: e(
+              "Bear-AppShell__footer bear-w-full bear-z-20 bear-bg-[var(--bear-bg-primary)] bear-border-t bear-border-[var(--bear-border-default)]",
+              f && "bear-sticky bear-bottom-0"
             ),
-            children: e
+            children: o
           }
         )
       ]
@@ -78,5 +82,5 @@ const q = (d) => {
   );
 };
 export {
-  q as AppShell
+  C as AppShell
 };

package/dist/components/AspectRatio/AspectRatio.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),l=require("react"),b=require("../../utils/cn.cjs"),r=l.forwardRef(({id:d,ratio:a=16/9,maxWidth:e,children:s,className:i,style:c,...n},o)=>t.jsx("div",{ref:o,className:b.cn("Bear-AspectRatio bear-relative bear-w-full bear-overflow-hidden",i),style:{maxWidth:typeof e=="number"?`${e}px`:e,...c},...n,children:t.jsx("div",{className:"Bear-AspectRatio__inner bear-w-full bear-relative",style:{paddingBottom:`${1/a*100}%`},children:t.jsx("div",{className:"Bear-AspectRatio__content bear-absolute bear-inset-0 bear-flex bear-items-center bear-justify-center",children:s})})}));r.displayName="AspectRatio";exports.AspectRatio=r;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),u=require("react"),r=require("../../constants/numbers.const.cjs"),b=require("../../constants/generals.const.cjs"),m=require("../../utils/cn.cjs"),a=u.forwardRef((s,i)=>{const{ratio:c=r.ASPECT_RATIO_WIDE,maxWidth:e,children:n,className:o,style:l,...d}=s;return t.jsx("div",{ref:i,className:m.cn("Bear-AspectRatio bear-relative bear-w-full bear-overflow-hidden",o),style:{maxWidth:typeof e=="number"?`${e}${b.UNIT_PX}`:e,...l},...d,children:t.jsx("div",{className:"Bear-AspectRatio__inner bear-w-full bear-relative",style:{paddingBottom:`${r.ONE/c*r.PERCENT_ONE_HUNDRED}%`},children:t.jsx("div",{className:"Bear-AspectRatio__content bear-absolute bear-inset-0 bear-flex bear-items-center bear-justify-center",children:n})})})});a.displayName="AspectRatio";exports.AspectRatio=a;

package/dist/components/AspectRatio/AspectRatio.d.ts

@@ -1,3 +1,2 @@
-import { FC } from 'react';
 import { AspectRatioProps } from './AspectRatio.types';
-export declare const AspectRatio: FC<AspectRatioProps>;
+export declare const AspectRatio: import('react').ForwardRefExoticComponent<AspectRatioProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/AspectRatio/AspectRatio.js

@@ -1,37 +1,39 @@
 import { jsx as r } from "react/jsx-runtime";
 import { forwardRef as c } from "react";
-import { cn as n } from "../../utils/cn.js";
-const p = c(
-  ({
-    id: b,
-    ratio: a = 16 / 9,
+import { ASPECT_RATIO_WIDE as n, ONE as d, PERCENT_ONE_HUNDRED as p } from "../../constants/numbers.const.js";
+import { UNIT_PX as f } from "../../constants/generals.const.js";
+import { cn as b } from "../../utils/cn.js";
+const N = c((t, a) => {
+  const {
+    ratio: i = n,
     maxWidth: e,
-    children: t,
-    className: i,
-    style: o,
-    ...s
-  }, l) => /* @__PURE__ */ r(
+    children: o,
+    className: s,
+    style: l,
+    ...m
+  } = t;
+  return /* @__PURE__ */ r(
     "div",
     {
-      ref: l,
-      className: n("Bear-AspectRatio bear-relative bear-w-full bear-overflow-hidden", i),
+      ref: a,
+      className: b("Bear-AspectRatio bear-relative bear-w-full bear-overflow-hidden", s),
       style: {
-        maxWidth: typeof e == "number" ? `${e}px` : e,
-        ...o
+        maxWidth: typeof e == "number" ? `${e}${f}` : e,
+        ...l
       },
-      ...s,
+      ...m,
       children: /* @__PURE__ */ r(
         "div",
         {
           className: "Bear-AspectRatio__inner bear-w-full bear-relative",
-          style: { paddingBottom: `${1 / a * 100}%` },
-          children: /* @__PURE__ */ r("div", { className: "Bear-AspectRatio__content bear-absolute bear-inset-0 bear-flex bear-items-center bear-justify-center", children: t })
+          style: { paddingBottom: `${d / i * p}%` },
+          children: /* @__PURE__ */ r("div", { className: "Bear-AspectRatio__content bear-absolute bear-inset-0 bear-flex bear-items-center bear-justify-center", children: o })
         }
       )
     }
-  )
-);
-p.displayName = "AspectRatio";
+  );
+});
+N.displayName = "AspectRatio";
 export {
-  p as AspectRatio
+  N as AspectRatio
 };

package/dist/components/Autocomplete/Autocomplete.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),a=require("react"),m=require("../../utils/cn.cjs"),D=require("../Portal/Portal.cjs"),V=require("./Autocomplete.utils.cjs"),M=require("./Autocomplete.const.cjs"),C=({options:z,value:b="",onChange:i,onSelect:x,placeholder:I="Start typing...",label:v,helperText:j,error:u,disabled:f=!1,freeSolo:k=!1,loading:E=!1,filterOptions:q=V.defaultFilter,className:_,testId:B})=>{const[c,s]=a.useState(!1),[n,h]=a.useState(-1),[l,T]=a.useState({top:0,left:0,width:0}),N=a.useRef(null),P=a.useRef(null),p=a.useRef(null),A=a.useRef(null),w=a.useRef(null),o=q(z,b),g=c&&!f&&o.length>0,y=c&&!f&&o.length===0&&!!b&&!E;a.useEffect(()=>{if(!g&&!y)return;const e=()=>{var d;const r=(d=P.current)==null?void 0:d.getBoundingClientRect();r&&T({top:r.bottom+4,left:Math.max(8,Math.min(r.left,window.innerWidth-r.width-8)),width:r.width})};return e(),window.addEventListener("resize",e),window.addEventListener("scroll",e,!0),()=>{window.removeEventListener("resize",e),window.removeEventListener("scroll",e,!0)}},[g,y]),a.useEffect(()=>{if(!c)return;const e=r=>{var R,O;const d=r.target;(R=N.current)!=null&&R.contains(d)||(O=p.current)!=null&&O.contains(d)||s(!1)};return document.addEventListener("mousedown",e),()=>document.removeEventListener("mousedown",e)},[c]),a.useEffect(()=>{h(-1)},[b]),a.useEffect(()=>{if(n>=0&&w.current){const e=w.current.children[n];e&&e.scrollIntoView({block:"nearest"})}},[n]);const U=e=>{const r=e.target.value;i==null||i(r),s(!0)},L=e=>{var r;i==null||i(e.label),x==null||x(e),s(!1),(r=A.current)==null||r.blur()},W=e=>{if(!c){(e.key==="ArrowDown"||e.key==="ArrowUp")&&(s(!0),e.preventDefault());return}switch(e.key){case"ArrowDown":e.preventDefault(),h(r=>r<o.length-1?r+1:0);break;case"ArrowUp":e.preventDefault(),h(r=>r>0?r-1:o.length-1);break;case"Enter":e.preventDefault(),n>=0&&o[n]?L(o[n]):k&&b&&s(!1);break;case"Escape":s(!1);break}};return t.jsxs("div",{className:m.cn("bear-w-full bear-relative",_),ref:N,"data-testid":B,children:[v&&t.jsx("label",{className:"bear-block bear-text-sm bear-font-medium bear-text-gray-700 dark:bear-text-gray-200 bear-mb-1.5",children:v}),t.jsxs("div",{className:"bear-relative",ref:P,children:[t.jsx("input",{ref:A,type:"text",value:b,onChange:U,onFocus:()=>s(!0),onKeyDown:W,placeholder:I,disabled:f,className:m.cn("bear-w-full bear-px-4 bear-py-2.5 bear-pr-10 bear-rounded-lg bear-border","bear-bg-[var(--bear-bg-primary)]","bear-text-sm bear-text-[var(--bear-text-primary)]","placeholder:bear-text-[var(--bear-text-muted)]","bear-transition-colors bear-outline-none",u?"bear-border-red-500 focus:bear-ring-2 focus:bear-ring-red-500/20":"bear-border-[var(--bear-border-default)] focus:bear-border-amber-500 focus:bear-ring-2 focus:bear-ring-amber-500/20",f&&"bear-opacity-50 bear-cursor-not-allowed bear-bg-[var(--bear-bg-secondary)]")}),t.jsx("div",{className:"bear-absolute bear-right-3 bear-top-1/2 bear-transform bear--translate-y-1/2",children:E?t.jsxs("svg",{className:"bear-animate-spin bear-w-4 bear-h-4 bear-text-gray-400",viewBox:"0 0 24 24",fill:"none",children:[t.jsx("circle",{className:"bear-opacity-25",cx:"12",cy:"12",r:"10",stroke:"currentColor",strokeWidth:"4"}),t.jsx("path",{className:"bear-opacity-75",fill:"currentColor",d:"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"})]}):t.jsx("svg",{className:"bear-w-4 bear-h-4 bear-text-gray-400",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",children:t.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"})})})]}),g&&t.jsx(D.Portal,{children:t.jsx("div",{ref:p,className:"bear-fixed bear-rounded-lg bear-border bear-border-[var(--bear-border-default)] bear-shadow-lg bear-bg-[var(--bear-bg-primary)]",style:{top:l.top,left:l.left,width:l.width,zIndex:M.AUTOCOMPLETE_PANEL_Z},children:t.jsx("div",{ref:w,className:"bear-max-h-60 bear-overflow-auto bear-py-1",children:o.map((e,r)=>t.jsxs("button",{type:"button",disabled:e.disabled,onClick:()=>L(e),className:m.cn("bear-w-full bear-px-4 bear-py-2 bear-text-left bear-text-sm bear-transition-colors","bear-text-[var(--bear-text-primary)]",r===n?"bear-bg-[var(--bear-bg-tertiary)]":"hover:bear-bg-[var(--bear-bg-secondary)]",e.disabled&&"bear-opacity-50 bear-cursor-not-allowed"),children:[t.jsx("div",{className:"bear-font-medium",children:e.label}),e.description&&t.jsx("div",{className:"bear-text-xs bear-text-[var(--bear-text-muted)] bear-mt-0.5",children:e.description})]},e.value))})})}),y&&t.jsx(D.Portal,{children:t.jsx("div",{ref:p,className:"bear-fixed bear-py-3 bear-px-4 bear-bg-white dark:bear-bg-gray-800 bear-border bear-border-gray-200 dark:bear-border-gray-700 bear-rounded-lg bear-shadow-lg bear-text-sm bear-text-gray-500",style:{top:l.top,left:l.left,width:l.width,zIndex:M.AUTOCOMPLETE_PANEL_Z},children:k?"Press Enter to use this value":"No results found"})}),(j||u)&&t.jsx("p",{className:m.cn("bear-mt-1.5 bear-text-xs",u?"bear-text-red-500":"bear-text-gray-500 dark:bear-text-gray-400"),children:u||j})]})};exports.Autocomplete=C;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),f=require("../../constants/numbers.const.cjs"),t=require("../../constants/generals.const.cjs"),b=require("../../constants/keys.const.cjs"),n=require("../../utils/cn.cjs");require("react");const g=require("../Portal/Portal.cjs"),W=require("./hooks/useAutocomplete.cjs"),C={[b.KEY_ARROW_DOWN]:"next",[b.KEY_ARROW_UP]:"previous",[b.KEY_ENTER]:"confirm",[b.KEY_ESCAPE]:"close"},U=h=>{const{options:y,value:c=t.EMPTY_STRING,onChange:o,onSelect:_,placeholder:v=t.PLACEHOLDER_START_TYPING,label:d,helperText:u,error:s,disabled:i=t.BOOLEAN_FALSE,freeSolo:x=t.BOOLEAN_FALSE,loading:A=t.BOOLEAN_FALSE,filterOptions:E,className:N,testId:O}=h,{isOpen:R,setIsOpen:l,highlightedIndex:P,containerRef:j,inputWrapRef:D,panelRef:m,inputRef:L,listRef:S,filteredOptions:w,showListPanel:B,showEmptyPanel:K,overlayStyle:p,handleSelect:k,highlightNext:I,highlightPrevious:T,confirmHighlight:Y}=W.useAutocomplete({options:y,value:c,onChange:o,onSelect:_,disabled:i,freeSolo:x,loading:A,filterOptions:E}),q=e=>{o==null||o(e.target.value),l(!0)},F=e=>{if(!R){(e.key===b.KEY_ARROW_DOWN||e.key===b.KEY_ARROW_UP)&&(l(!0),e.preventDefault());return}const a=C[e.key];if(a){if(e.preventDefault(),a==="next"){I();return}if(a==="previous"){T();return}if(a==="confirm"){Y();return}l(t.BOOLEAN_FALSE)}};return r.jsxs("div",{className:n.cn("Bear-Autocomplete bear-w-full bear-relative",N),ref:j,"data-testid":O,children:[d&&r.jsx("label",{className:"Bear-Autocomplete__label bear-block bear-text-sm bear-font-medium bear-text-gray-700 dark:bear-text-gray-200 bear-mb-1.5",children:d}),r.jsx("div",{className:"Bear-Autocomplete__field bear-relative",ref:D,children:r.jsx("input",{ref:L,type:"text",value:c,onChange:q,onFocus:()=>l(!0),onKeyDown:F,placeholder:v,disabled:i,className:n.cn("bear-w-full bear-px-4 bear-py-2.5 bear-pr-10 bear-rounded-lg bear-border","bear-bg-[var(--bear-bg-primary)]","bear-text-sm bear-text-[var(--bear-text-primary)]","placeholder:bear-text-[var(--bear-text-muted)]","bear-transition-colors bear-outline-none",s?"bear-border-red-500 focus:bear-ring-2 focus:bear-ring-red-500/20":"bear-border-[var(--bear-border-default)] focus:bear-border-amber-500 focus:bear-ring-2 focus:bear-ring-amber-500/20",i&&"bear-opacity-50 bear-cursor-not-allowed bear-bg-[var(--bear-bg-secondary)]")})}),B&&r.jsx(g.Portal,{children:r.jsx("div",{ref:m,className:"Bear-Autocomplete__panel bear-fixed bear-rounded-lg bear-border bear-border-[var(--bear-border-default)] bear-shadow-lg bear-bg-[var(--bear-bg-primary)]",style:{...p,zIndex:f.BACKDROP_DEFAULT_Z_INDEX},children:r.jsx("div",{ref:S,className:"bear-max-h-60 bear-overflow-auto bear-py-1",children:w.map((e,a)=>r.jsxs("button",{type:"button",disabled:e.disabled,onClick:()=>k(e),className:n.cn("bear-w-full bear-px-4 bear-py-2 bear-text-left bear-text-sm bear-transition-colors","bear-text-[var(--bear-text-primary)]",a===P?"bear-bg-[var(--bear-bg-tertiary)]":"hover:bear-bg-[var(--bear-bg-secondary)]",e.disabled&&"bear-opacity-50 bear-cursor-not-allowed"),children:[r.jsx("div",{className:"bear-font-medium",children:e.label}),e.description&&r.jsx("div",{className:"bear-text-xs bear-text-[var(--bear-text-muted)] bear-mt-0.5",children:e.description})]},e.value))})})}),K&&r.jsx(g.Portal,{children:r.jsx("div",{ref:m,className:"Bear-Autocomplete__empty bear-fixed bear-py-3 bear-px-4 bear-bg-white dark:bear-bg-gray-800 bear-border bear-border-gray-200 dark:bear-border-gray-700 bear-rounded-lg bear-shadow-lg bear-text-sm bear-text-gray-500",style:{...p,zIndex:f.BACKDROP_DEFAULT_Z_INDEX},children:x?"Press Enter to use this value":"No results found"})}),(u||s)&&r.jsx("p",{className:n.cn("bear-mt-1.5 bear-text-xs",s?"bear-text-red-500":"bear-text-gray-500 dark:bear-text-gray-400"),children:s||u})]})};exports.Autocomplete=U;

package/dist/components/Autocomplete/Autocomplete.d.ts

@@ -1,17 +1,2 @@
-import { FC } from 'react';
 import { AutocompleteProps } from './Autocomplete.types';
-/**
- * Autocomplete - Text input with suggestions
- *
- * @example
- * ```tsx
- * <Autocomplete
- *   label="Country"
- *   options={countries}
- *   value={country}
- *   onChange={setCountry}
- *   onSelect={(opt) => console.log('Selected:', opt)}
- * />
- * ```
- */
-export declare const Autocomplete: FC<AutocompleteProps>;
+export declare const Autocomplete: (props: AutocompleteProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Autocomplete/Autocomplete.js

@@ -1,168 +1,154 @@
-import { jsxs as m, jsx as t } from "react/jsx-runtime";
-import { useState as N, useRef as c, useEffect as p } from "react";
-import { cn as h } from "../../utils/cn.js";
-import { Portal as B } from "../Portal/Portal.js";
-import { defaultFilter as T } from "./Autocomplete.utils.js";
-import { AUTOCOMPLETE_PANEL_Z as W } from "./Autocomplete.const.js";
-const Y = ({
-  options: j,
-  value: b = "",
-  onChange: o,
-  onSelect: w,
-  placeholder: U = "Start typing...",
-  label: E,
-  helperText: L,
-  error: u,
-  disabled: f = !1,
-  freeSolo: P = !1,
-  loading: A = !1,
-  filterOptions: V = T,
-  className: F,
-  testId: H
-}) => {
-  const [l, a] = N(!1), [n, x] = N(-1), [i, K] = N({ top: 0, left: 0, width: 0 }), D = c(null), z = c(null), g = c(null), I = c(null), y = c(null), s = V(j, b), v = l && !f && s.length > 0, k = l && !f && s.length === 0 && !!b && !A;
-  p(() => {
-    if (!v && !k) return;
-    const e = () => {
-      var d;
-      const r = (d = z.current) == null ? void 0 : d.getBoundingClientRect();
-      r && K({
-        top: r.bottom + 4,
-        left: Math.max(8, Math.min(r.left, window.innerWidth - r.width - 8)),
-        width: r.width
-      });
-    };
-    return e(), window.addEventListener("resize", e), window.addEventListener("scroll", e, !0), () => {
-      window.removeEventListener("resize", e), window.removeEventListener("scroll", e, !0);
-    };
-  }, [v, k]), p(() => {
-    if (!l) return;
-    const e = (r) => {
-      var M, O;
-      const d = r.target;
-      (M = D.current) != null && M.contains(d) || (O = g.current) != null && O.contains(d) || a(!1);
-    };
-    return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
-  }, [l]), p(() => {
-    x(-1);
-  }, [b]), p(() => {
-    if (n >= 0 && y.current) {
-      const e = y.current.children[n];
-      e && e.scrollIntoView({ block: "nearest" });
-    }
-  }, [n]);
-  const _ = (e) => {
-    const r = e.target.value;
-    o == null || o(r), a(!0);
-  }, R = (e) => {
-    var r;
-    o == null || o(e.label), w == null || w(e), a(!1), (r = I.current) == null || r.blur();
-  }, C = (e) => {
-    if (!l) {
-      (e.key === "ArrowDown" || e.key === "ArrowUp") && (a(!0), e.preventDefault());
+import { jsxs as f, jsx as r } from "react/jsx-runtime";
+import { BACKDROP_DEFAULT_Z_INDEX as g } from "../../constants/numbers.const.js";
+import { EMPTY_STRING as z, PLACEHOLDER_START_TYPING as G, BOOLEAN_FALSE as l } from "../../constants/generals.const.js";
+import { KEY_ARROW_DOWN as h, KEY_ARROW_UP as y, KEY_ESCAPE as U, KEY_ENTER as M } from "../../constants/keys.const.js";
+import { cn as i } from "../../utils/cn.js";
+import "react";
+import { Portal as x } from "../Portal/Portal.js";
+import { useAutocomplete as X } from "./hooks/useAutocomplete.js";
+const Z = {
+  [h]: "next",
+  [y]: "previous",
+  [M]: "confirm",
+  [U]: "close"
+}, te = (v) => {
+  const {
+    options: _,
+    value: s = z,
+    onChange: t,
+    onSelect: N,
+    placeholder: E = G,
+    label: d,
+    helperText: c,
+    error: b,
+    disabled: n = l,
+    freeSolo: m = l,
+    loading: A = l,
+    filterOptions: R,
+    className: w,
+    testId: O
+  } = v, {
+    isOpen: P,
+    setIsOpen: o,
+    highlightedIndex: D,
+    containerRef: k,
+    inputWrapRef: I,
+    panelRef: u,
+    inputRef: S,
+    listRef: K,
+    filteredOptions: T,
+    showListPanel: B,
+    showEmptyPanel: L,
+    overlayStyle: p,
+    handleSelect: Y,
+    highlightNext: C,
+    highlightPrevious: W,
+    confirmHighlight: F
+  } = X({
+    options: _,
+    value: s,
+    onChange: t,
+    onSelect: N,
+    disabled: n,
+    freeSolo: m,
+    loading: A,
+    filterOptions: R
+  }), H = (e) => {
+    t == null || t(e.target.value), o(!0);
+  }, j = (e) => {
+    if (!P) {
+      (e.key === h || e.key === y) && (o(!0), e.preventDefault());
       return;
     }
-    switch (e.key) {
-      case "ArrowDown":
-        e.preventDefault(), x(
-          (r) => r < s.length - 1 ? r + 1 : 0
-        );
-        break;
-      case "ArrowUp":
-        e.preventDefault(), x(
-          (r) => r > 0 ? r - 1 : s.length - 1
-        );
-        break;
-      case "Enter":
-        e.preventDefault(), n >= 0 && s[n] ? R(s[n]) : P && b && a(!1);
-        break;
-      case "Escape":
-        a(!1);
-        break;
+    const a = Z[e.key];
+    if (a) {
+      if (e.preventDefault(), a === "next") {
+        C();
+        return;
+      }
+      if (a === "previous") {
+        W();
+        return;
+      }
+      if (a === "confirm") {
+        F();
+        return;
+      }
+      o(l);
     }
   };
-  return /* @__PURE__ */ m("div", { className: h("bear-w-full bear-relative", F), ref: D, "data-testid": H, children: [
-    E && /* @__PURE__ */ t("label", { className: "bear-block bear-text-sm bear-font-medium bear-text-gray-700 dark:bear-text-gray-200 bear-mb-1.5", children: E }),
-    /* @__PURE__ */ m("div", { className: "bear-relative", ref: z, children: [
-      /* @__PURE__ */ t(
-        "input",
-        {
-          ref: I,
-          type: "text",
-          value: b,
-          onChange: _,
-          onFocus: () => a(!0),
-          onKeyDown: C,
-          placeholder: U,
-          disabled: f,
-          className: h(
-            "bear-w-full bear-px-4 bear-py-2.5 bear-pr-10 bear-rounded-lg bear-border",
-            "bear-bg-[var(--bear-bg-primary)]",
-            "bear-text-sm bear-text-[var(--bear-text-primary)]",
-            "placeholder:bear-text-[var(--bear-text-muted)]",
-            "bear-transition-colors bear-outline-none",
-            u ? "bear-border-red-500 focus:bear-ring-2 focus:bear-ring-red-500/20" : "bear-border-[var(--bear-border-default)] focus:bear-border-amber-500 focus:bear-ring-2 focus:bear-ring-amber-500/20",
-            f && "bear-opacity-50 bear-cursor-not-allowed bear-bg-[var(--bear-bg-secondary)]"
-          )
-        }
-      ),
-      /* @__PURE__ */ t("div", { className: "bear-absolute bear-right-3 bear-top-1/2 bear-transform bear--translate-y-1/2", children: A ? /* @__PURE__ */ m("svg", { className: "bear-animate-spin bear-w-4 bear-h-4 bear-text-gray-400", viewBox: "0 0 24 24", fill: "none", children: [
-        /* @__PURE__ */ t("circle", { className: "bear-opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
-        /* @__PURE__ */ t("path", { className: "bear-opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })
-      ] }) : /* @__PURE__ */ t("svg", { className: "bear-w-4 bear-h-4 bear-text-gray-400", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ t("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" }) }) })
-    ] }),
-    v && /* @__PURE__ */ t(B, { children: /* @__PURE__ */ t(
+  return /* @__PURE__ */ f("div", { className: i("Bear-Autocomplete bear-w-full bear-relative", w), ref: k, "data-testid": O, children: [
+    d && /* @__PURE__ */ r("label", { className: "Bear-Autocomplete__label bear-block bear-text-sm bear-font-medium bear-text-gray-700 dark:bear-text-gray-200 bear-mb-1.5", children: d }),
+    /* @__PURE__ */ r("div", { className: "Bear-Autocomplete__field bear-relative", ref: I, children: /* @__PURE__ */ r(
+      "input",
+      {
+        ref: S,
+        type: "text",
+        value: s,
+        onChange: H,
+        onFocus: () => o(!0),
+        onKeyDown: j,
+        placeholder: E,
+        disabled: n,
+        className: i(
+          "bear-w-full bear-px-4 bear-py-2.5 bear-pr-10 bear-rounded-lg bear-border",
+          "bear-bg-[var(--bear-bg-primary)]",
+          "bear-text-sm bear-text-[var(--bear-text-primary)]",
+          "placeholder:bear-text-[var(--bear-text-muted)]",
+          "bear-transition-colors bear-outline-none",
+          b ? "bear-border-red-500 focus:bear-ring-2 focus:bear-ring-red-500/20" : "bear-border-[var(--bear-border-default)] focus:bear-border-amber-500 focus:bear-ring-2 focus:bear-ring-amber-500/20",
+          n && "bear-opacity-50 bear-cursor-not-allowed bear-bg-[var(--bear-bg-secondary)]"
+        )
+      }
+    ) }),
+    B && /* @__PURE__ */ r(x, { children: /* @__PURE__ */ r(
       "div",
       {
-        ref: g,
-        className: "bear-fixed bear-rounded-lg bear-border bear-border-[var(--bear-border-default)] bear-shadow-lg bear-bg-[var(--bear-bg-primary)]",
+        ref: u,
+        className: "Bear-Autocomplete__panel bear-fixed bear-rounded-lg bear-border bear-border-[var(--bear-border-default)] bear-shadow-lg bear-bg-[var(--bear-bg-primary)]",
         style: {
-          top: i.top,
-          left: i.left,
-          width: i.width,
-          zIndex: W
+          ...p,
+          zIndex: g
         },
-        children: /* @__PURE__ */ t("div", { ref: y, className: "bear-max-h-60 bear-overflow-auto bear-py-1", children: s.map((e, r) => /* @__PURE__ */ m(
+        children: /* @__PURE__ */ r("div", { ref: K, className: "bear-max-h-60 bear-overflow-auto bear-py-1", children: T.map((e, a) => /* @__PURE__ */ f(
           "button",
           {
             type: "button",
             disabled: e.disabled,
-            onClick: () => R(e),
-            className: h(
+            onClick: () => Y(e),
+            className: i(
               "bear-w-full bear-px-4 bear-py-2 bear-text-left bear-text-sm bear-transition-colors",
               "bear-text-[var(--bear-text-primary)]",
-              r === n ? "bear-bg-[var(--bear-bg-tertiary)]" : "hover:bear-bg-[var(--bear-bg-secondary)]",
+              a === D ? "bear-bg-[var(--bear-bg-tertiary)]" : "hover:bear-bg-[var(--bear-bg-secondary)]",
               e.disabled && "bear-opacity-50 bear-cursor-not-allowed"
             ),
             children: [
-              /* @__PURE__ */ t("div", { className: "bear-font-medium", children: e.label }),
-              e.description && /* @__PURE__ */ t("div", { className: "bear-text-xs bear-text-[var(--bear-text-muted)] bear-mt-0.5", children: e.description })
+              /* @__PURE__ */ r("div", { className: "bear-font-medium", children: e.label }),
+              e.description && /* @__PURE__ */ r("div", { className: "bear-text-xs bear-text-[var(--bear-text-muted)] bear-mt-0.5", children: e.description })
             ]
           },
           e.value
         )) })
       }
     ) }),
-    k && /* @__PURE__ */ t(B, { children: /* @__PURE__ */ t(
+    L && /* @__PURE__ */ r(x, { children: /* @__PURE__ */ r(
       "div",
       {
-        ref: g,
-        className: "bear-fixed bear-py-3 bear-px-4 bear-bg-white dark:bear-bg-gray-800 bear-border bear-border-gray-200 dark:bear-border-gray-700 bear-rounded-lg bear-shadow-lg bear-text-sm bear-text-gray-500",
+        ref: u,
+        className: "Bear-Autocomplete__empty bear-fixed bear-py-3 bear-px-4 bear-bg-white dark:bear-bg-gray-800 bear-border bear-border-gray-200 dark:bear-border-gray-700 bear-rounded-lg bear-shadow-lg bear-text-sm bear-text-gray-500",
         style: {
-          top: i.top,
-          left: i.left,
-          width: i.width,
-          zIndex: W
+          ...p,
+          zIndex: g
         },
-        children: P ? "Press Enter to use this value" : "No results found"
+        children: m ? "Press Enter to use this value" : "No results found"
       }
     ) }),
-    (L || u) && /* @__PURE__ */ t("p", { className: h(
+    (c || b) && /* @__PURE__ */ r("p", { className: i(
       "bear-mt-1.5 bear-text-xs",
-      u ? "bear-text-red-500" : "bear-text-gray-500 dark:bear-text-gray-400"
-    ), children: u || L })
+      b ? "bear-text-red-500" : "bear-text-gray-500 dark:bear-text-gray-400"
+    ), children: b || c })
   ] });
 };
 export {
-  Y as Autocomplete
+  te as Autocomplete
 };

package/dist/components/Autocomplete/hooks/index.d.ts

@@ -0,0 +1 @@
+export { useAutocomplete } from './useAutocomplete';

package/dist/components/Autocomplete/hooks/useAutocomplete.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react"),e=require("../../../constants/numbers.const.cjs"),o=require("../../../constants/generals.const.cjs"),y=require("../../../hooks/useClickOutside.cjs");require("../../../context/BearProvider.cjs");require("react/jsx-runtime");require("../../../hooks/useBearComponent/useBearComponent.cjs");const P=require("../../../hooks/useFixedAnchorPosition/useFixedAnchorPosition.cjs");require("../../FormControl/FormControl.context.cjs");const x=require("../Autocomplete.utils.cjs"),I=S=>{const{options:_,value:l,onChange:c,onSelect:h,disabled:f=o.BOOLEAN_FALSE,freeSolo:m=o.BOOLEAN_FALSE,loading:q=o.BOOLEAN_FALSE,filterOptions:F=x.defaultFilter}=S,[r,u]=n.useState(o.BOOLEAN_FALSE),[s,E]=n.useState(e.NEGATIVE_ONE),a=n.useRef(null),g=n.useRef(null),A=n.useRef(null),d=n.useRef(null),O=n.useRef(null),i=F(_,l??""),R=r&&!f&&i.length>e.ZERO,N=r&&!f&&i.length===e.ZERO&&!!l&&!q,{style:b,ready:B}=P.useFixedAnchorPosition({anchorRef:g,open:R||N,matchWidth:!0});y.useClickOutsideMultiple([a,A],()=>u(o.BOOLEAN_FALSE),{enabled:r}),n.useEffect(()=>{E(e.NEGATIVE_ONE)},[l]),n.useEffect(()=>{if(s<e.ZERO||!O.current)return;const t=O.current.children[s];t&&t.scrollIntoView({block:"nearest"})},[s]);const L=t=>{var p;c==null||c(t.label),h==null||h(t),u(o.BOOLEAN_FALSE),(p=d.current)==null||p.blur()};return{isOpen:r,setIsOpen:u,highlightedIndex:s,containerRef:a,inputWrapRef:g,panelRef:A,inputRef:d,listRef:O,filteredOptions:i,showListPanel:R,showEmptyPanel:N,overlayStyle:b,ready:B,handleSelect:L,highlightNext:()=>{E(t=>t<i.length-e.ONE?t+e.ONE:e.ZERO)},highlightPrevious:()=>{E(t=>t>e.ZERO?t-e.ONE:i.length-e.ONE)},confirmHighlight:()=>{if(s>=e.ZERO&&i[s]){L(i[s]);return}m&&l&&u(o.BOOLEAN_FALSE)}}};exports.useAutocomplete=I;