@forgedevstack/bear 1.0.8 → 1.0.9

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

@@ -0,0 +1,32 @@
+import { ReactNode } from 'react';
+export type MarqueeDirection = 'left' | 'right' | 'up' | 'down';
+export interface MarqueeProps {
+    /** Content to scroll */
+    children: ReactNode;
+    /** Scroll direction */
+    direction?: MarqueeDirection;
+    /** Speed in pixels per second */
+    speed?: number;
+    /** Pause on hover */
+    pauseOnHover?: boolean;
+    /** Pause on click */
+    pauseOnClick?: boolean;
+    /** Whether the marquee is playing */
+    play?: boolean;
+    /** Number of times to loop (0 = infinite) */
+    loop?: number;
+    /** Gradient fade on edges */
+    gradient?: boolean;
+    /** Gradient color (auto-detects dark/light) */
+    gradientColor?: string;
+    /** Gradient width in pixels */
+    gradientWidth?: number;
+    /** Gap between repeated items */
+    gap?: number;
+    /** Custom class name */
+    className?: string;
+    /** Custom style */
+    style?: React.CSSProperties;
+    /** Test ID */
+    testId?: string;
+}

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

@@ -0,0 +1,2 @@
+export { Marquee } from './Marquee';
+export type { MarqueeProps, MarqueeDirection } from './Marquee.types';

package/dist/components/Masonry/Masonry.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react/jsx-runtime"),t=require("react"),L=require("../../utils/cn.cjs"),n=require("./Masonry.const.cjs"),_=m=>{const{children:a,columns:e=n.DEFAULT_COLUMNS,gap:i=n.DEFAULT_GAP,className:d,style:f,testId:y}=m,E=t.useRef(null),[l,r]=t.useState(typeof e=="number"?e:e.base??n.DEFAULT_COLUMNS),o=t.useCallback(()=>{if(typeof e=="number"){r(e);return}const s=window.innerWidth;e.xl&&s>=n.BREAKPOINT_XL?r(e.xl):e.lg&&s>=n.BREAKPOINT_LG?r(e.lg):e.md&&s>=n.BREAKPOINT_MD?r(e.md):e.sm&&s>=n.BREAKPOINT_SM?r(e.sm):r(e.base??n.DEFAULT_COLUMNS)},[e]);t.useEffect(()=>(o(),window.addEventListener("resize",o),()=>window.removeEventListener("resize",o)),[o]);const M=t.useMemo(()=>{const s=Array.from({length:l},()=>[]);return t.Children.forEach(a,(c,b)=>{s[b%l].push(c)}),s},[a,l]);return u.jsx("div",{ref:E,className:L.cn("Bear-Masonry","bear-flex",d),style:{gap:i,...f},"data-testid":y,children:M.map((s,c)=>u.jsx("div",{className:"Bear-Masonry__column bear-flex bear-flex-col bear-flex-1",style:{gap:i},children:s},c))})};exports.Masonry=_;

package/dist/components/Masonry/Masonry.const.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const A=3,T=16,t=1280,E=1024,_=768,O=640;exports.BREAKPOINT_LG=E;exports.BREAKPOINT_MD=_;exports.BREAKPOINT_SM=O;exports.BREAKPOINT_XL=t;exports.DEFAULT_COLUMNS=A;exports.DEFAULT_GAP=T;

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

@@ -0,0 +1,9 @@
+/** Default number of columns */
+export declare const DEFAULT_COLUMNS = 3;
+/** Default gap in pixels */
+export declare const DEFAULT_GAP = 16;
+/** Breakpoint thresholds in pixels */
+export declare const BREAKPOINT_XL = 1280;
+export declare const BREAKPOINT_LG = 1024;
+export declare const BREAKPOINT_MD = 768;
+export declare const BREAKPOINT_SM = 640;

package/dist/components/Masonry/Masonry.const.js

@@ -0,0 +1,9 @@
+const o = 3, t = 16, A = 1280, c = 1024, n = 768, s = 640;
+export {
+  c as BREAKPOINT_LG,
+  n as BREAKPOINT_MD,
+  s as BREAKPOINT_SM,
+  A as BREAKPOINT_XL,
+  o as DEFAULT_COLUMNS,
+  t as DEFAULT_GAP
+};

package/dist/components/Masonry/Masonry.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+import { MasonryProps } from './Masonry.types';
+/**
+ * Masonry - Pinterest-style masonry grid layout.
+ * Supports responsive column counts and theming via BearProvider.
+ */
+export declare const Masonry: FC<MasonryProps>;

package/dist/components/Masonry/Masonry.js

@@ -0,0 +1,51 @@
+import { jsx as i } from "react/jsx-runtime";
+import { useRef as y, useState as h, useCallback as v, useEffect as x, useMemo as A, Children as N } from "react";
+import { cn as _ } from "../../utils/cn.js";
+import { DEFAULT_COLUMNS as t, DEFAULT_GAP as w, BREAKPOINT_XL as L, BREAKPOINT_LG as M, BREAKPOINT_MD as R, BREAKPOINT_SM as B } from "./Masonry.const.js";
+const O = (c) => {
+  const {
+    children: m,
+    columns: e = t,
+    gap: a = w,
+    className: f,
+    style: u,
+    testId: d
+  } = c, p = y(null), [n, r] = h(
+    typeof e == "number" ? e : e.base ?? t
+  ), o = v(() => {
+    if (typeof e == "number") {
+      r(e);
+      return;
+    }
+    const s = window.innerWidth;
+    e.xl && s >= L ? r(e.xl) : e.lg && s >= M ? r(e.lg) : e.md && s >= R ? r(e.md) : e.sm && s >= B ? r(e.sm) : r(e.base ?? t);
+  }, [e]);
+  x(() => (o(), window.addEventListener("resize", o), () => window.removeEventListener("resize", o)), [o]);
+  const E = A(() => {
+    const s = Array.from({ length: n }, () => []);
+    return N.forEach(m, (l, b) => {
+      s[b % n].push(l);
+    }), s;
+  }, [m, n]);
+  return /* @__PURE__ */ i(
+    "div",
+    {
+      ref: p,
+      className: _("Bear-Masonry", "bear-flex", f),
+      style: { gap: a, ...u },
+      "data-testid": d,
+      children: E.map((s, l) => /* @__PURE__ */ i(
+        "div",
+        {
+          className: "Bear-Masonry__column bear-flex bear-flex-col bear-flex-1",
+          style: { gap: a },
+          children: s
+        },
+        l
+      ))
+    }
+  );
+};
+export {
+  O as Masonry
+};

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

@@ -0,0 +1,21 @@
+import { ReactNode } from 'react';
+export interface MasonryProps {
+    /** Items to render in masonry layout */
+    children: ReactNode;
+    /** Number of columns */
+    columns?: number | {
+        base?: number;
+        sm?: number;
+        md?: number;
+        lg?: number;
+        xl?: number;
+    };
+    /** Gap between items in pixels */
+    gap?: number;
+    /** Custom class name */
+    className?: string;
+    /** Custom style */
+    style?: React.CSSProperties;
+    /** Test ID */
+    testId?: string;
+}

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

@@ -0,0 +1,2 @@
+export { Masonry } from './Masonry';
+export type { MasonryProps } from './Masonry.types';

package/dist/components/NavigableSelect/NavigableSelect.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),s=require("react"),n=require("../../utils/cn.cjs"),c=require("./NavigableSelect.const.cjs"),oe=Z=>{const{options:_,value:R,defaultValue:G,onChange:i,multiple:b=!1,searchable:K=!0,placeholder:z=c.DEFAULT_PLACEHOLDER,label:O,helperText:M,error:S,disabled:p=!1,size:m="md",fullWidth:X=!1,maxVisible:Y=c.DEFAULT_MAX_VISIBLE,maxSelections:j,emptyText:$=c.DEFAULT_EMPTY_TEXT,className:J,style:Q,testId:ee}=Z,y=R!==void 0,V=e=>e===void 0?[]:Array.isArray(e)?e:[e],[re,P]=s.useState(V(G)),[g,w]=s.useState(!1),[d,o]=s.useState(-1),[x,B]=s.useState(""),E=s.useRef(null),C=s.useRef(null),q=s.useRef(null),H=s.useRef(null),l=y?V(R):re,h=s.useMemo(()=>{if(!x)return _;const e=x.toLowerCase();return _.filter(a=>{var t;return a.label.toLowerCase().includes(e)||((t=a.description)==null?void 0:t.toLowerCase().includes(e))})},[_,x]),ae=s.useMemo(()=>{const e=new Map;return h.forEach(a=>{const t=a.group||"";e.has(t)||e.set(t,[]),e.get(t).push(a)}),e},[h]),v=s.useMemo(()=>h.filter(e=>!e.disabled),[h]);s.useEffect(()=>{const e=a=>{E.current&&!E.current.contains(a.target)&&(w(!1),B(""))};return document.addEventListener("mousedown",e),()=>document.removeEventListener("mousedown",e)},[]),s.useEffect(()=>{if(!C.current||d<0)return;const e=C.current.querySelector('[data-active="true"]');e==null||e.scrollIntoView({block:c.SCROLL_BLOCK})},[d]);const L=s.useCallback(()=>{p||(w(!0),o(0),setTimeout(()=>{var e;return(e=q.current)==null?void 0:e.focus()},0))},[p]),k=s.useCallback(()=>{var e;w(!1),B(""),o(-1),(e=H.current)==null||e.focus()},[]),I=s.useCallback(e=>{let a;if(b)if(l.includes(e))a=l.filter(t=>t!==e);else{if(j&&l.length>=j)return;a=[...l,e]}else a=[e],k();y||P(a),i==null||i(b?a:a[0]??"")},[l,b,y,j,i,k]),D=s.useCallback(e=>{const a=l.filter(t=>t!==e);y||P(a),i==null||i(b?a:a[0]??"")},[l,b,y,i]),W=s.useCallback(e=>{if(!g){(e.key==="ArrowDown"||e.key==="ArrowUp"||e.key==="Enter"||e.key===" ")&&(e.preventDefault(),L());return}switch(e.key){case"ArrowDown":e.preventDefault(),o(a=>Math.min(a+1,v.length-1));break;case"ArrowUp":e.preventDefault(),o(a=>Math.max(a-1,0));break;case"Enter":case" ":e.preventDefault(),d>=0&&v[d]&&I(v[d].value);break;case"Escape":e.preventDefault(),k();break;case"Backspace":x===""&&b&&l.length>0&&D(l[l.length-1]);break;case"Home":e.preventDefault(),o(0);break;case"End":e.preventDefault(),o(v.length-1);break}},[g,d,v,I,k,L,x,b,l,D]),te=s.useCallback(e=>l.includes(e),[l]),u=l.map(e=>_.find(a=>a.value===e)).filter(Boolean),se=!!S,le=c.TRIGGER_SIZE_CLASSES[m],be=c.OPTION_SIZE_CLASSES[m],ne=c.TAG_SIZE_CLASSES[m],F=c.ICON_SIZE[m],ce=Y*c.OPTION_HEIGHT[m];let A=-1;return r.jsxs("div",{ref:E,className:n.cn("Bear-NavigableSelect","bear-relative bear-flex bear-flex-col bear-gap-1.5",X&&"bear-w-full",J),style:Q,"data-testid":ee,children:[O&&r.jsx("label",{className:"Bear-NavigableSelect__label bear-text-sm bear-font-medium bear-text-gray-700 dark:bear-text-gray-300",children:O}),r.jsxs("button",{ref:H,type:"button",disabled:p,onClick:()=>g?k():L(),onKeyDown:W,className:n.cn("Bear-NavigableSelect__trigger","bear-flex bear-items-center bear-justify-between bear-w-full","bear-rounded-lg bear-border bear-text-left bear-outline-none","bear-transition-all bear-duration-200","bear-bg-white dark:bear-bg-gray-900","bear-text-gray-900 dark:bear-text-white",se?"bear-border-red-500 focus:bear-ring-2 focus:bear-ring-red-500/20":"bear-border-gray-300 dark:bear-border-gray-600 focus:bear-border-[var(--bear-primary-500)] focus:bear-ring-2 focus:bear-ring-[var(--bear-primary-500)]/20",p&&"bear-opacity-50 bear-cursor-not-allowed",le),"aria-haspopup":"listbox","aria-expanded":g,children:[r.jsxs("span",{className:"Bear-NavigableSelect__value bear-flex bear-items-center bear-gap-1.5 bear-flex-wrap bear-flex-1 bear-min-w-0 bear-overflow-hidden",children:[b&&u.length>0&&u.map(e=>r.jsxs("span",{className:n.cn("Bear-NavigableSelect__tag","bear-inline-flex bear-items-center bear-gap-1 bear-rounded-md","bear-bg-[var(--bear-primary-100,#fce7f3)] dark:bear-bg-[var(--bear-primary-900,#831843)]/30","bear-text-[var(--bear-primary-700,#be185d)] dark:bear-text-[var(--bear-primary-300,#f9a8d4)]",ne),children:[e.label,!p&&r.jsx("button",{type:"button",onClick:a=>{a.stopPropagation(),D(e.value)},className:"bear-ml-0.5 hover:bear-opacity-70","aria-label":`Remove ${e.label}`,children:"×"})]},e.value)),!b&&u.length>0&&r.jsxs("span",{className:"bear-truncate",children:[u[0].icon&&r.jsx("span",{className:"bear-mr-1.5",children:u[0].icon}),u[0].label]}),u.length===0&&r.jsx("span",{className:"bear-text-gray-400 dark:bear-text-gray-500",children:z})]}),r.jsx("svg",{className:n.cn(F,"bear-text-gray-400 dark:bear-text-gray-500 bear-transition-transform bear-shrink-0 bear-ml-2",g&&"bear-rotate-180"),fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",strokeWidth:2,children:r.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M19 9l-7 7-7-7"})})]}),g&&r.jsxs("div",{className:n.cn("Bear-NavigableSelect__dropdown","bear-absolute bear-top-full bear-left-0 bear-w-full bear-mt-1","bear-bg-white dark:bear-bg-gray-900","bear-border bear-border-gray-200 dark:bear-border-gray-700","bear-rounded-lg bear-shadow-lg bear-overflow-hidden"),style:{zIndex:c.DROPDOWN_Z_INDEX},children:[K&&r.jsxs("div",{className:"Bear-NavigableSelect__search bear-flex bear-items-center bear-gap-2 bear-px-3 bear-py-2 bear-border-b bear-border-gray-200 dark:bear-border-gray-700",children:[r.jsxs("svg",{className:"bear-w-4 bear-h-4 bear-text-gray-400 dark:bear-text-gray-500 bear-shrink-0",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",strokeWidth:2,children:[r.jsx("circle",{cx:"11",cy:"11",r:"8"}),r.jsx("line",{x1:"21",y1:"21",x2:"16.65",y2:"16.65"})]}),r.jsx("input",{ref:q,type:"text",value:x,onChange:e=>{B(e.target.value),o(0)},onKeyDown:W,placeholder:"Type to search...",className:n.cn("Bear-NavigableSelect__input","bear-flex-1 bear-bg-transparent bear-outline-none bear-text-sm","bear-text-gray-900 dark:bear-text-white","placeholder:bear-text-gray-400 dark:placeholder:bear-text-gray-500"),autoComplete:"off",spellCheck:!1})]}),r.jsxs("div",{ref:C,className:"Bear-NavigableSelect__list bear-overflow-y-auto bear-py-1",style:{maxHeight:ce},role:"listbox","aria-multiselectable":b,children:[h.length===0&&r.jsx("div",{className:"Bear-NavigableSelect__empty bear-px-3 bear-py-4 bear-text-center bear-text-sm bear-text-gray-500 dark:bear-text-gray-400",children:$}),Array.from(ae.entries()).map(([e,a])=>r.jsxs("div",{className:"Bear-NavigableSelect__group",children:[e&&r.jsx("div",{className:"Bear-NavigableSelect__group-title bear-px-3 bear-py-1 bear-text-xs bear-font-semibold bear-uppercase bear-tracking-wider bear-text-gray-400 dark:bear-text-gray-500",children:e}),a.map(t=>{const N=t.disabled,U=!N;U&&A++;const T=A===d,f=te(t.value),ie=A;return r.jsxs("button",{type:"button",disabled:N,className:n.cn("Bear-NavigableSelect__option","bear-w-full bear-flex bear-items-center bear-gap-2.5 bear-text-left bear-cursor-pointer","bear-transition-colors bear-duration-100",be,T&&"bear-bg-gray-100 dark:bear-bg-gray-800",f&&!T&&"bear-bg-[var(--bear-primary-50,#fdf2f8)] dark:bear-bg-[var(--bear-primary-950,#500724)]/20",N&&"bear-opacity-40 bear-cursor-not-allowed"),"data-active":T,onMouseEnter:()=>{U&&o(ie)},onClick:()=>{N||I(t.value)},role:"option","aria-selected":f,"aria-disabled":N,children:[b&&r.jsx("span",{className:n.cn("Bear-NavigableSelect__checkbox","bear-flex bear-items-center bear-justify-center bear-w-4 bear-h-4 bear-rounded bear-border bear-shrink-0","bear-transition-colors",f?"bear-bg-[var(--bear-primary-500)] bear-border-[var(--bear-primary-500)] bear-text-white":"bear-border-gray-300 dark:bear-border-gray-600"),children:f&&r.jsx("svg",{className:"bear-w-3 bear-h-3",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",strokeWidth:3,children:r.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M5 13l4 4L19 7"})})}),t.icon&&r.jsx("span",{className:"Bear-NavigableSelect__option-icon bear-shrink-0 bear-text-gray-500 dark:bear-text-gray-400",children:t.icon}),r.jsxs("div",{className:"Bear-NavigableSelect__option-body bear-flex-1 bear-min-w-0",children:[r.jsx("div",{className:n.cn("Bear-NavigableSelect__option-label bear-truncate",f?"bear-text-[var(--bear-primary-700,#be185d)] dark:bear-text-[var(--bear-primary-300,#f9a8d4)] bear-font-medium":"bear-text-gray-900 dark:bear-text-white"),children:t.label}),t.description&&r.jsx("div",{className:"Bear-NavigableSelect__option-desc bear-text-xs bear-text-gray-500 dark:bear-text-gray-400 bear-truncate",children:t.description})]}),!b&&f&&r.jsx("svg",{className:n.cn(F,"bear-text-[var(--bear-primary-500)] bear-shrink-0"),fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",strokeWidth:2,children:r.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M5 13l4 4L19 7"})})]},t.value)})]},e))]}),r.jsxs("div",{className:"Bear-NavigableSelect__footer bear-flex bear-items-center bear-gap-3 bear-px-3 bear-py-1.5 bear-border-t bear-border-gray-200 dark:bear-border-gray-700 bear-text-[11px] bear-text-gray-400 dark:bear-text-gray-500",children:[r.jsxs("span",{className:"bear-flex bear-items-center bear-gap-1",children:[r.jsx("kbd",{className:"bear-px-1 bear-rounded bear-bg-gray-100 dark:bear-bg-gray-800 bear-border bear-border-gray-200 dark:bear-border-gray-700",children:"↑↓"}),"navigate"]}),r.jsxs("span",{className:"bear-flex bear-items-center bear-gap-1",children:[r.jsx("kbd",{className:"bear-px-1 bear-rounded bear-bg-gray-100 dark:bear-bg-gray-800 bear-border bear-border-gray-200 dark:bear-border-gray-700",children:"↵"}),"select"]}),r.jsxs("span",{className:"bear-flex bear-items-center bear-gap-1",children:[r.jsx("kbd",{className:"bear-px-1 bear-rounded bear-bg-gray-100 dark:bear-bg-gray-800 bear-border bear-border-gray-200 dark:bear-border-gray-700",children:"esc"}),"close"]})]})]}),(M||S)&&r.jsx("p",{className:n.cn("Bear-NavigableSelect__helper bear-text-xs",S?"bear-text-red-500":"bear-text-gray-500 dark:bear-text-gray-400"),children:S||M})]})};exports.NavigableSelect=oe;

package/dist/components/NavigableSelect/NavigableSelect.const.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e="Select an option...",a="No options found",r=8,t={sm:32,md:40,lg:48},b={sm:"bear-h-8 bear-text-sm bear-px-2.5",md:"bear-h-10 bear-text-sm bear-px-3",lg:"bear-h-12 bear-text-base bear-px-4"},E={sm:"bear-px-2.5 bear-py-1.5 bear-text-sm",md:"bear-px-3 bear-py-2 bear-text-sm",lg:"bear-px-4 bear-py-2.5 bear-text-base"},S={sm:"bear-text-xs bear-px-1.5 bear-py-0.5",md:"bear-text-xs bear-px-2 bear-py-0.5",lg:"bear-text-sm bear-px-2 bear-py-1"},_=50,s="nearest",I={sm:"bear-w-3.5 bear-h-3.5",md:"bear-w-4 bear-h-4",lg:"bear-w-5 bear-h-5"};exports.DEFAULT_EMPTY_TEXT=a;exports.DEFAULT_MAX_VISIBLE=r;exports.DEFAULT_PLACEHOLDER=e;exports.DROPDOWN_Z_INDEX=_;exports.ICON_SIZE=I;exports.OPTION_HEIGHT=t;exports.OPTION_SIZE_CLASSES=E;exports.SCROLL_BLOCK=s;exports.TAG_SIZE_CLASSES=S;exports.TRIGGER_SIZE_CLASSES=b;

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

@@ -0,0 +1,23 @@
+import { NavigableSelectSize } from './NavigableSelect.types';
+/** Default placeholder */
+export declare const DEFAULT_PLACEHOLDER = "Select an option...";
+/** Default empty text */
+export declare const DEFAULT_EMPTY_TEXT = "No options found";
+/** Default max visible options */
+export declare const DEFAULT_MAX_VISIBLE = 8;
+/** Option height per size (approx pixels for scroll calculation) */
+export declare const OPTION_HEIGHT: Record<NavigableSelectSize, number>;
+/** Trigger button size classes */
+export declare const TRIGGER_SIZE_CLASSES: Record<NavigableSelectSize, string>;
+/** Option size classes */
+export declare const OPTION_SIZE_CLASSES: Record<NavigableSelectSize, string>;
+/** Tag size classes (multi-select chips) */
+export declare const TAG_SIZE_CLASSES: Record<NavigableSelectSize, string>;
+/** Dropdown z-index */
+export declare const DROPDOWN_Z_INDEX = 50;
+/** Search input debounce delay */
+export declare const SEARCH_DEBOUNCE = 0;
+/** Scroll into view block setting */
+export declare const SCROLL_BLOCK: "nearest";
+/** Icon size per component size */
+export declare const ICON_SIZE: Record<NavigableSelectSize, string>;

package/dist/components/NavigableSelect/NavigableSelect.const.js

@@ -0,0 +1,33 @@
+const e = "Select an option...", a = "No options found", b = 8, r = {
+  sm: 32,
+  md: 40,
+  lg: 48
+}, t = {
+  sm: "bear-h-8 bear-text-sm bear-px-2.5",
+  md: "bear-h-10 bear-text-sm bear-px-3",
+  lg: "bear-h-12 bear-text-base bear-px-4"
+}, s = {
+  sm: "bear-px-2.5 bear-py-1.5 bear-text-sm",
+  md: "bear-px-3 bear-py-2 bear-text-sm",
+  lg: "bear-px-4 bear-py-2.5 bear-text-base"
+}, x = {
+  sm: "bear-text-xs bear-px-1.5 bear-py-0.5",
+  md: "bear-text-xs bear-px-2 bear-py-0.5",
+  lg: "bear-text-sm bear-px-2 bear-py-1"
+}, p = 50, E = "nearest", o = {
+  sm: "bear-w-3.5 bear-h-3.5",
+  md: "bear-w-4 bear-h-4",
+  lg: "bear-w-5 bear-h-5"
+};
+export {
+  a as DEFAULT_EMPTY_TEXT,
+  b as DEFAULT_MAX_VISIBLE,
+  e as DEFAULT_PLACEHOLDER,
+  p as DROPDOWN_Z_INDEX,
+  o as ICON_SIZE,
+  r as OPTION_HEIGHT,
+  s as OPTION_SIZE_CLASSES,
+  E as SCROLL_BLOCK,
+  x as TAG_SIZE_CLASSES,
+  t as TRIGGER_SIZE_CLASSES
+};

package/dist/components/NavigableSelect/NavigableSelect.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+import { NavigableSelectProps } from './NavigableSelect.types';
+/**
+ * NavigableSelect - Keyboard-navigable select with single and multi-select.
+ * Arrow up/down navigation, Enter to select, type-ahead search, and theming via BearProvider.
+ */
+export declare const NavigableSelect: FC<NavigableSelectProps>;

package/dist/components/NavigableSelect/NavigableSelect.js

@@ -0,0 +1,361 @@
+import { jsxs as l, jsx as a } from "react/jsx-runtime";
+import { useState as S, useRef as B, useMemo as V, useEffect as X, useCallback as f } from "react";
+import { cn as s } from "../../utils/cn.js";
+import { DEFAULT_PLACEHOLDER as pe, DEFAULT_MAX_VISIBLE as fe, DEFAULT_EMPTY_TEXT as me, SCROLL_BLOCK as xe, TAG_SIZE_CLASSES as ye, ICON_SIZE as he, TRIGGER_SIZE_CLASSES as ve, DROPDOWN_Z_INDEX as ke, OPTION_SIZE_CLASSES as Ne, OPTION_HEIGHT as _e } from "./NavigableSelect.const.js";
+const Le = (q) => {
+  const {
+    options: _,
+    value: j,
+    defaultValue: Y,
+    onChange: o,
+    multiple: n = !1,
+    searchable: $ = !0,
+    placeholder: J = pe,
+    label: H,
+    helperText: P,
+    error: w,
+    disabled: m = !1,
+    size: x = "md",
+    fullWidth: Q = !1,
+    maxVisible: ee = fe,
+    maxSelections: E,
+    emptyText: re = me,
+    className: ae,
+    style: te,
+    testId: le
+  } = q, y = j !== void 0, W = (e) => e === void 0 ? [] : Array.isArray(e) ? e : [e], [be, F] = S(W(Y)), [g, L] = S(!1), [c, i] = S(-1), [u, C] = S(""), I = B(null), D = B(null), U = B(null), Z = B(null), b = y ? W(j) : be, h = V(() => {
+    if (!u) return _;
+    const e = u.toLowerCase();
+    return _.filter(
+      (r) => {
+        var t;
+        return r.label.toLowerCase().includes(e) || ((t = r.description) == null ? void 0 : t.toLowerCase().includes(e));
+      }
+    );
+  }, [_, u]), ne = V(() => {
+    const e = /* @__PURE__ */ new Map();
+    return h.forEach((r) => {
+      const t = r.group || "";
+      e.has(t) || e.set(t, []), e.get(t).push(r);
+    }), e;
+  }, [h]), v = V(() => h.filter((e) => !e.disabled), [h]);
+  X(() => {
+    const e = (r) => {
+      I.current && !I.current.contains(r.target) && (L(!1), C(""));
+    };
+    return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
+  }, []), X(() => {
+    if (!D.current || c < 0) return;
+    const e = D.current.querySelector('[data-active="true"]');
+    e == null || e.scrollIntoView({ block: xe });
+  }, [c]);
+  const A = f(() => {
+    m || (L(!0), i(0), setTimeout(() => {
+      var e;
+      return (e = U.current) == null ? void 0 : e.focus();
+    }, 0));
+  }, [m]), k = f(() => {
+    var e;
+    L(!1), C(""), i(-1), (e = Z.current) == null || e.focus();
+  }, []), T = f(
+    (e) => {
+      let r;
+      if (n)
+        if (b.includes(e))
+          r = b.filter((t) => t !== e);
+        else {
+          if (E && b.length >= E) return;
+          r = [...b, e];
+        }
+      else
+        r = [e], k();
+      y || F(r), o == null || o(n ? r : r[0] ?? "");
+    },
+    [b, n, y, E, o, k]
+  ), O = f(
+    (e) => {
+      const r = b.filter((t) => t !== e);
+      y || F(r), o == null || o(n ? r : r[0] ?? "");
+    },
+    [b, n, y, o]
+  ), G = f(
+    (e) => {
+      if (!g) {
+        (e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "Enter" || e.key === " ") && (e.preventDefault(), A());
+        return;
+      }
+      switch (e.key) {
+        case "ArrowDown":
+          e.preventDefault(), i((r) => Math.min(r + 1, v.length - 1));
+          break;
+        case "ArrowUp":
+          e.preventDefault(), i((r) => Math.max(r - 1, 0));
+          break;
+        case "Enter":
+        case " ":
+          e.preventDefault(), c >= 0 && v[c] && T(v[c].value);
+          break;
+        case "Escape":
+          e.preventDefault(), k();
+          break;
+        case "Backspace":
+          u === "" && n && b.length > 0 && O(b[b.length - 1]);
+          break;
+        case "Home":
+          e.preventDefault(), i(0);
+          break;
+        case "End":
+          e.preventDefault(), i(v.length - 1);
+          break;
+      }
+    },
+    [g, c, v, T, k, A, u, n, b, O]
+  ), se = f((e) => b.includes(e), [b]), d = b.map((e) => _.find((r) => r.value === e)).filter(Boolean), oe = !!w, ie = ve[x], ce = Ne[x], de = ye[x], K = he[x], ge = ee * _e[x];
+  let R = -1;
+  return /* @__PURE__ */ l(
+    "div",
+    {
+      ref: I,
+      className: s(
+        "Bear-NavigableSelect",
+        "bear-relative bear-flex bear-flex-col bear-gap-1.5",
+        Q && "bear-w-full",
+        ae
+      ),
+      style: te,
+      "data-testid": le,
+      children: [
+        H && /* @__PURE__ */ a("label", { className: "Bear-NavigableSelect__label bear-text-sm bear-font-medium bear-text-gray-700 dark:bear-text-gray-300", children: H }),
+        /* @__PURE__ */ l(
+          "button",
+          {
+            ref: Z,
+            type: "button",
+            disabled: m,
+            onClick: () => g ? k() : A(),
+            onKeyDown: G,
+            className: s(
+              "Bear-NavigableSelect__trigger",
+              "bear-flex bear-items-center bear-justify-between bear-w-full",
+              "bear-rounded-lg bear-border bear-text-left bear-outline-none",
+              "bear-transition-all bear-duration-200",
+              "bear-bg-white dark:bear-bg-gray-900",
+              "bear-text-gray-900 dark:bear-text-white",
+              oe ? "bear-border-red-500 focus:bear-ring-2 focus:bear-ring-red-500/20" : "bear-border-gray-300 dark:bear-border-gray-600 focus:bear-border-[var(--bear-primary-500)] focus:bear-ring-2 focus:bear-ring-[var(--bear-primary-500)]/20",
+              m && "bear-opacity-50 bear-cursor-not-allowed",
+              ie
+            ),
+            "aria-haspopup": "listbox",
+            "aria-expanded": g,
+            children: [
+              /* @__PURE__ */ l("span", { className: "Bear-NavigableSelect__value bear-flex bear-items-center bear-gap-1.5 bear-flex-wrap bear-flex-1 bear-min-w-0 bear-overflow-hidden", children: [
+                n && d.length > 0 && d.map((e) => /* @__PURE__ */ l(
+                  "span",
+                  {
+                    className: s(
+                      "Bear-NavigableSelect__tag",
+                      "bear-inline-flex bear-items-center bear-gap-1 bear-rounded-md",
+                      "bear-bg-[var(--bear-primary-100,#fce7f3)] dark:bear-bg-[var(--bear-primary-900,#831843)]/30",
+                      "bear-text-[var(--bear-primary-700,#be185d)] dark:bear-text-[var(--bear-primary-300,#f9a8d4)]",
+                      de
+                    ),
+                    children: [
+                      e.label,
+                      !m && /* @__PURE__ */ a(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: (r) => {
+                            r.stopPropagation(), O(e.value);
+                          },
+                          className: "bear-ml-0.5 hover:bear-opacity-70",
+                          "aria-label": `Remove ${e.label}`,
+                          children: "×"
+                        }
+                      )
+                    ]
+                  },
+                  e.value
+                )),
+                !n && d.length > 0 && /* @__PURE__ */ l("span", { className: "bear-truncate", children: [
+                  d[0].icon && /* @__PURE__ */ a("span", { className: "bear-mr-1.5", children: d[0].icon }),
+                  d[0].label
+                ] }),
+                d.length === 0 && /* @__PURE__ */ a("span", { className: "bear-text-gray-400 dark:bear-text-gray-500", children: J })
+              ] }),
+              /* @__PURE__ */ a(
+                "svg",
+                {
+                  className: s(
+                    K,
+                    "bear-text-gray-400 dark:bear-text-gray-500 bear-transition-transform bear-shrink-0 bear-ml-2",
+                    g && "bear-rotate-180"
+                  ),
+                  fill: "none",
+                  viewBox: "0 0 24 24",
+                  stroke: "currentColor",
+                  strokeWidth: 2,
+                  children: /* @__PURE__ */ a("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" })
+                }
+              )
+            ]
+          }
+        ),
+        g && /* @__PURE__ */ l(
+          "div",
+          {
+            className: s(
+              "Bear-NavigableSelect__dropdown",
+              "bear-absolute bear-top-full bear-left-0 bear-w-full bear-mt-1",
+              "bear-bg-white dark:bear-bg-gray-900",
+              "bear-border bear-border-gray-200 dark:bear-border-gray-700",
+              "bear-rounded-lg bear-shadow-lg bear-overflow-hidden"
+            ),
+            style: { zIndex: ke },
+            children: [
+              $ && /* @__PURE__ */ l("div", { className: "Bear-NavigableSelect__search bear-flex bear-items-center bear-gap-2 bear-px-3 bear-py-2 bear-border-b bear-border-gray-200 dark:bear-border-gray-700", children: [
+                /* @__PURE__ */ l(
+                  "svg",
+                  {
+                    className: "bear-w-4 bear-h-4 bear-text-gray-400 dark:bear-text-gray-500 bear-shrink-0",
+                    fill: "none",
+                    viewBox: "0 0 24 24",
+                    stroke: "currentColor",
+                    strokeWidth: 2,
+                    children: [
+                      /* @__PURE__ */ a("circle", { cx: "11", cy: "11", r: "8" }),
+                      /* @__PURE__ */ a("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ a(
+                  "input",
+                  {
+                    ref: U,
+                    type: "text",
+                    value: u,
+                    onChange: (e) => {
+                      C(e.target.value), i(0);
+                    },
+                    onKeyDown: G,
+                    placeholder: "Type to search...",
+                    className: s(
+                      "Bear-NavigableSelect__input",
+                      "bear-flex-1 bear-bg-transparent bear-outline-none bear-text-sm",
+                      "bear-text-gray-900 dark:bear-text-white",
+                      "placeholder:bear-text-gray-400 dark:placeholder:bear-text-gray-500"
+                    ),
+                    autoComplete: "off",
+                    spellCheck: !1
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ l(
+                "div",
+                {
+                  ref: D,
+                  className: "Bear-NavigableSelect__list bear-overflow-y-auto bear-py-1",
+                  style: { maxHeight: ge },
+                  role: "listbox",
+                  "aria-multiselectable": n,
+                  children: [
+                    h.length === 0 && /* @__PURE__ */ a("div", { className: "Bear-NavigableSelect__empty bear-px-3 bear-py-4 bear-text-center bear-text-sm bear-text-gray-500 dark:bear-text-gray-400", children: re }),
+                    Array.from(ne.entries()).map(([e, r]) => /* @__PURE__ */ l("div", { className: "Bear-NavigableSelect__group", children: [
+                      e && /* @__PURE__ */ a("div", { className: "Bear-NavigableSelect__group-title bear-px-3 bear-py-1 bear-text-xs bear-font-semibold bear-uppercase bear-tracking-wider bear-text-gray-400 dark:bear-text-gray-500", children: e }),
+                      r.map((t) => {
+                        const N = t.disabled, z = !N;
+                        z && R++;
+                        const M = R === c, p = se(t.value), ue = R;
+                        return /* @__PURE__ */ l(
+                          "button",
+                          {
+                            type: "button",
+                            disabled: N,
+                            className: s(
+                              "Bear-NavigableSelect__option",
+                              "bear-w-full bear-flex bear-items-center bear-gap-2.5 bear-text-left bear-cursor-pointer",
+                              "bear-transition-colors bear-duration-100",
+                              ce,
+                              M && "bear-bg-gray-100 dark:bear-bg-gray-800",
+                              p && !M && "bear-bg-[var(--bear-primary-50,#fdf2f8)] dark:bear-bg-[var(--bear-primary-950,#500724)]/20",
+                              N && "bear-opacity-40 bear-cursor-not-allowed"
+                            ),
+                            "data-active": M,
+                            onMouseEnter: () => {
+                              z && i(ue);
+                            },
+                            onClick: () => {
+                              N || T(t.value);
+                            },
+                            role: "option",
+                            "aria-selected": p,
+                            "aria-disabled": N,
+                            children: [
+                              n && /* @__PURE__ */ a(
+                                "span",
+                                {
+                                  className: s(
+                                    "Bear-NavigableSelect__checkbox",
+                                    "bear-flex bear-items-center bear-justify-center bear-w-4 bear-h-4 bear-rounded bear-border bear-shrink-0",
+                                    "bear-transition-colors",
+                                    p ? "bear-bg-[var(--bear-primary-500)] bear-border-[var(--bear-primary-500)] bear-text-white" : "bear-border-gray-300 dark:bear-border-gray-600"
+                                  ),
+                                  children: p && /* @__PURE__ */ a("svg", { className: "bear-w-3 bear-h-3", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 3, children: /* @__PURE__ */ a("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 13l4 4L19 7" }) })
+                                }
+                              ),
+                              t.icon && /* @__PURE__ */ a("span", { className: "Bear-NavigableSelect__option-icon bear-shrink-0 bear-text-gray-500 dark:bear-text-gray-400", children: t.icon }),
+                              /* @__PURE__ */ l("div", { className: "Bear-NavigableSelect__option-body bear-flex-1 bear-min-w-0", children: [
+                                /* @__PURE__ */ a("div", { className: s(
+                                  "Bear-NavigableSelect__option-label bear-truncate",
+                                  p ? "bear-text-[var(--bear-primary-700,#be185d)] dark:bear-text-[var(--bear-primary-300,#f9a8d4)] bear-font-medium" : "bear-text-gray-900 dark:bear-text-white"
+                                ), children: t.label }),
+                                t.description && /* @__PURE__ */ a("div", { className: "Bear-NavigableSelect__option-desc bear-text-xs bear-text-gray-500 dark:bear-text-gray-400 bear-truncate", children: t.description })
+                              ] }),
+                              !n && p && /* @__PURE__ */ a(
+                                "svg",
+                                {
+                                  className: s(K, "bear-text-[var(--bear-primary-500)] bear-shrink-0"),
+                                  fill: "none",
+                                  viewBox: "0 0 24 24",
+                                  stroke: "currentColor",
+                                  strokeWidth: 2,
+                                  children: /* @__PURE__ */ a("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 13l4 4L19 7" })
+                                }
+                              )
+                            ]
+                          },
+                          t.value
+                        );
+                      })
+                    ] }, e))
+                  ]
+                }
+              ),
+              /* @__PURE__ */ l("div", { className: "Bear-NavigableSelect__footer bear-flex bear-items-center bear-gap-3 bear-px-3 bear-py-1.5 bear-border-t bear-border-gray-200 dark:bear-border-gray-700 bear-text-[11px] bear-text-gray-400 dark:bear-text-gray-500", children: [
+                /* @__PURE__ */ l("span", { className: "bear-flex bear-items-center bear-gap-1", children: [
+                  /* @__PURE__ */ a("kbd", { className: "bear-px-1 bear-rounded bear-bg-gray-100 dark:bear-bg-gray-800 bear-border bear-border-gray-200 dark:bear-border-gray-700", children: "↑↓" }),
+                  "navigate"
+                ] }),
+                /* @__PURE__ */ l("span", { className: "bear-flex bear-items-center bear-gap-1", children: [
+                  /* @__PURE__ */ a("kbd", { className: "bear-px-1 bear-rounded bear-bg-gray-100 dark:bear-bg-gray-800 bear-border bear-border-gray-200 dark:bear-border-gray-700", children: "↵" }),
+                  "select"
+                ] }),
+                /* @__PURE__ */ l("span", { className: "bear-flex bear-items-center bear-gap-1", children: [
+                  /* @__PURE__ */ a("kbd", { className: "bear-px-1 bear-rounded bear-bg-gray-100 dark:bear-bg-gray-800 bear-border bear-border-gray-200 dark:bear-border-gray-700", children: "esc" }),
+                  "close"
+                ] })
+              ] })
+            ]
+          }
+        ),
+        (P || w) && /* @__PURE__ */ a("p", { className: s(
+          "Bear-NavigableSelect__helper bear-text-xs",
+          w ? "bear-text-red-500" : "bear-text-gray-500 dark:bear-text-gray-400"
+        ), children: w || P })
+      ]
+    }
+  );
+};
+export {
+  Le as NavigableSelect
+};