@forgedevstack/bear 1.2.3 → 1.2.5

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

@@ -3,6 +3,7 @@ import { TypographyProps } from '../Typography/Typography.types';
 export type CountdownTimerVariant = 'default' | 'card' | 'minimal' | 'flip' | 'digital';
 export type CountdownTimerSize = 'sm' | 'md' | 'lg' | 'xl';
 export interface CountdownTimerProps {
+    id?: string;
     /** Target date/time to count down to */
     targetDate?: Date | string | number;
     /** Duration in seconds (alternative to targetDate) */

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

@@ -56,6 +56,7 @@ export interface CreditInputTranslations {
  * CreditInput component props
  */
 export interface CreditInputProps {
+    id?: string;
     /** Current credit card value */
     value?: Partial<CreditCardValue>;
     /** Callback when value changes */

package/dist/components/CssBaseline/CssBaseline.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),u=require("react"),a=require("../../utils/generateBearId.utils.cjs"),c=require("../../utils/useBearId.cjs"),t=require("./CssBaseline.const.cjs"),l=({id:s,testId:n,...r})=>{const d=c.useBearId("CssBaseline"),i=a.resolveBearId(s,d);return u.useEffect(()=>{if(typeof document>"u")return;let e=document.getElementById(t.CSS_BASELINE_STYLE_ID);e||(e=document.createElement("style"),e.id=t.CSS_BASELINE_STYLE_ID,document.head.appendChild(e)),e.textContent=t.CSS_BASELINE_RULES},[]),o.jsx("style",{id:i,"data-testid":n,...r})};exports.CssBaseline=l;

package/dist/components/CssBaseline/CssBaseline.const.cjs

@@ -0,0 +1,5 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e="bear-css-baseline",r=`
+*,*::before,*::after{box-sizing:border-box}
+html{-webkit-text-size-adjust:100%;tab-size:4}
+body{margin:0;font-family:var(--bear-font-sans,system-ui,sans-serif);font-size:1rem;line-height:1.5;color:var(--bear-text-primary,#111827);background-color:var(--bear-bg-primary,#ffffff)}
+`;exports.CSS_BASELINE_RULES=r;exports.CSS_BASELINE_STYLE_ID=e;

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

@@ -0,0 +1,2 @@
+export declare const CSS_BASELINE_STYLE_ID = "bear-css-baseline";
+export declare const CSS_BASELINE_RULES = "\n*,*::before,*::after{box-sizing:border-box}\nhtml{-webkit-text-size-adjust:100%;tab-size:4}\nbody{margin:0;font-family:var(--bear-font-sans,system-ui,sans-serif);font-size:1rem;line-height:1.5;color:var(--bear-text-primary,#111827);background-color:var(--bear-bg-primary,#ffffff)}\n";

package/dist/components/CssBaseline/CssBaseline.const.js

@@ -0,0 +1,9 @@
+const e = "bear-css-baseline", r = `
+*,*::before,*::after{box-sizing:border-box}
+html{-webkit-text-size-adjust:100%;tab-size:4}
+body{margin:0;font-family:var(--bear-font-sans,system-ui,sans-serif);font-size:1rem;line-height:1.5;color:var(--bear-text-primary,#111827);background-color:var(--bear-bg-primary,#ffffff)}
+`;
+export {
+  r as CSS_BASELINE_RULES,
+  e as CSS_BASELINE_STYLE_ID
+};

package/dist/components/CssBaseline/CssBaseline.d.ts

@@ -0,0 +1,2 @@
+import { CssBaselineProps } from './CssBaseline.types';
+export declare const CssBaseline: ({ id, testId, ...props }: CssBaselineProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/CssBaseline/CssBaseline.js

@@ -0,0 +1,24 @@
+import { jsx as s } from "react/jsx-runtime";
+import { useEffect as i } from "react";
+import { resolveBearId as f } from "../../utils/generateBearId.utils.js";
+import { useBearId as a } from "../../utils/useBearId.js";
+import { CSS_BASELINE_STYLE_ID as t, CSS_BASELINE_RULES as l } from "./CssBaseline.const.js";
+const S = ({ id: o, testId: d, ...r }) => {
+  const n = a("CssBaseline"), m = f(o, n);
+  return i(() => {
+    if (typeof document > "u")
+      return;
+    let e = document.getElementById(t);
+    e || (e = document.createElement("style"), e.id = t, document.head.appendChild(e)), e.textContent = l;
+  }, []), /* @__PURE__ */ s(
+    "style",
+    {
+      id: m,
+      "data-testid": d,
+      ...r
+    }
+  );
+};
+export {
+  S as CssBaseline
+};

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

@@ -0,0 +1,4 @@
+export interface CssBaselineProps {
+    id?: string;
+    testId?: string;
+}

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

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

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

@@ -1,6 +1,7 @@
 import { ReactNode } from 'react';
 import { InputProps } from '../Input/Input.types';
 export interface CurrencyInputProps extends Omit<InputProps, 'onChange' | 'value' | 'type'> {
+    id?: string;
     /** Current numeric value */
     value?: number;
     /** Change handler receiving the numeric value */

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

@@ -0,0 +1 @@
+export declare const D_A_T_A_T_A_B_L_E_ROOT_CLASS = "Bear-DataTable";

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

@@ -18,6 +18,7 @@ export interface DataTableColumn<T> {
     hideOnMobile?: boolean;
 }
 export interface DataTableProps<T> {
+    id?: string;
     /** Column definitions */
     columns: DataTableColumn<T>[];
     /** Table data */

package/dist/components/DatePicker/DatePicker.cjs

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

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

@@ -0,0 +1 @@
+export declare const D_A_T_E_P_I_C_K_E_R_ROOT_CLASS = "Bear-DatePicker";

package/dist/components/DatePicker/DatePicker.js

@@ -6,8 +6,9 @@ import { cn as B } from "../../utils/cn.js";
 import { useBearStyles as $ } from "../../hooks/useBearStyles.js";
 import "../../hooks/useBearComponent/useBearComponent.js";
 import "../../context/BearProvider.js";
+import "../FormControl/FormControl.context.js";
 import { formatDate as C } from "./DatePicker.utils.js";
-const le = ({
+const be = ({
   value: o,
   onChange: r,
   minDate: _,
@@ -15,7 +16,7 @@ const le = ({
   disabled: l = !1,
   placeholder: P = "Select date",
   label: u,
-  error: n,
+  error: i,
   helperText: k,
   format: N = "MM/DD/YYYY",
   clearable: g = !0,
@@ -32,16 +33,16 @@ const le = ({
   variant: A = "default",
   icon: I
 }) => {
-  const [i, s] = p(!1), [T, W] = p(o ?? /* @__PURE__ */ new Date()), [w, q] = p({ top: 0, left: 0 }), x = z(null), b = z(null), D = $(j, V);
+  const [n, s] = p(!1), [T, W] = p(o ?? /* @__PURE__ */ new Date()), [w, q] = p({ top: 0, left: 0 }), x = z(null), b = z(null), D = $(j, V);
   h(() => {
-    if (i && b.current) {
+    if (n && b.current) {
       const e = b.current.getBoundingClientRect(), c = 8, a = 360, U = window.innerHeight - e.bottom < a && e.top > a;
       q({
         top: U ? e.top - a - c : e.bottom + c,
         left: e.left
       });
     }
-  }, [i]), h(() => {
+  }, [n]), h(() => {
     const e = (c) => {
       var d, m;
       const a = c.target;
@@ -70,13 +71,13 @@ const le = ({
       {
         ref: b,
         type: "button",
-        onClick: () => !l && s(!i),
+        onClick: () => !l && s(!n),
         disabled: l,
         className: B(
           "Bear-DatePicker__trigger bear-w-full bear-flex bear-items-center bear-justify-between bear-rounded-lg bear-border bear-text-left bear-transition-colors",
           K[E],
           Q[A],
-          n ? "bear-border-red-500" : "focus:bear-border-primary-500",
+          i ? "bear-border-red-500" : "focus:bear-border-primary-500",
           l && "bear-opacity-50 bear-cursor-not-allowed",
           o ? "bear-text-zinc-900 dark:bear-text-white" : "bear-text-zinc-500"
         ),
@@ -86,9 +87,9 @@ const le = ({
         ]
       }
     ),
-    n && /* @__PURE__ */ t("p", { className: "Bear-DatePicker__error bear-mt-1 bear-text-xs bear-text-red-400", children: n }),
-    k && !n && /* @__PURE__ */ t("p", { className: "Bear-DatePicker__helper bear-mt-1 bear-text-xs bear-text-zinc-500", children: k }),
-    i && typeof document < "u" && X(
+    i && /* @__PURE__ */ t("p", { className: "Bear-DatePicker__error bear-mt-1 bear-text-xs bear-text-red-400", children: i }),
+    k && !i && /* @__PURE__ */ t("p", { className: "Bear-DatePicker__helper bear-mt-1 bear-text-xs bear-text-zinc-500", children: k }),
+    n && typeof document < "u" && X(
       /* @__PURE__ */ t(
         "div",
         {
@@ -125,5 +126,5 @@ const le = ({
   ] });
 };
 export {
-  le as DatePicker
+  be as DatePicker
 };

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

@@ -2,6 +2,8 @@ import { ReactNode } from 'react';
 import { CalendarSlots } from '../Calendar/Calendar.types';
 import { BisProp } from '../../types/bis.types';
 export interface DatePickerProps {
+    testId?: string;
+    id?: string;
     value?: Date | null;
     onChange?: (date: Date | null) => void;
     onRangeChange?: (range: [Date | null, Date | null]) => void;

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

@@ -8,6 +8,7 @@ export interface DateRangePreset {
     range: () => DateRange;
 }
 export interface DateRangePickerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    id?: string;
     value?: DateRange;
     onChange?: (range: DateRange) => void;
     label?: string;

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

@@ -5,6 +5,7 @@ export interface DescriptionItem {
     span?: number;
 }
 export interface DescriptionsProps extends HTMLAttributes<HTMLDivElement> {
+    id?: string;
     title?: string;
     items: DescriptionItem[];
     columns?: number;

package/dist/components/DiffSquares/DiffSquares.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),A=require("react"),D=require("../../utils/cn.cjs"),F=require("../Typography/Typography.cjs"),S=require("./DiffSquares.const.cjs"),E=require("./DiffSquares.utils.cjs"),N=({additionsText:n,deletionsText:t,cubeCount:c=S.DIFF_SQUARES_DEFAULT_COUNT,cubes:r,additionColor:m="var(--bear-colors-success-500, #22c55e)",deletionColor:q="var(--bear-colors-danger-500, #ef4444)",gap:_=S.DIFF_SQUARES_GAP,summaryTypographyProps:s,onCubeClick:i,onCubeHover:e,className:h,testId:j,...x})=>{const d=A.useMemo(()=>r!=null&&r.length?r:Array.from({length:c},()=>({fill:"full"})),[r,c]),g={variant:"body2",component:"span",...s,className:D.cn("bear-flex bear-shrink-0 bear-items-baseline bear-gap-1.5 bear-font-mono bear-font-semibold",s==null?void 0:s.className)};return l.jsxs("div",{className:D.cn("Bear-DiffSquares bear-inline-flex bear-min-w-0 bear-max-w-full bear-items-center bear-gap-2",h),"data-testid":j,...x,children:[(n!=null||t!=null)&&l.jsxs(F.Typography,{...g,children:[n!=null&&l.jsx("span",{style:{color:m},children:n}),t!=null&&l.jsx("span",{style:{color:q},children:t})]}),l.jsx("span",{className:"bear-inline-flex bear-items-center bear-flex-shrink-0",style:{gap:_},role:"img","aria-label":"Change density",children:d.map((a,f)=>l.jsx("span",{className:S.DIFF_SQUARES_CUBE_CLASS,style:E.getDiffCubeStyle(a,m,q),"aria-hidden":!(a!=null&&a.ariaLabel),title:a==null?void 0:a.ariaLabel,onMouseEnter:()=>e==null?void 0:e(a,f),onMouseLeave:()=>e==null?void 0:e(null,null),onClick:()=>i==null?void 0:i(a,f)},f))})]})};exports.DiffSquares=N;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),A=require("react"),D=require("../../utils/cn.cjs"),F=require("../Typography/Typography.cjs"),S=require("./DiffSquares.const.cjs"),E=require("./DiffSquares.utils.cjs"),N=({additionsText:n,deletionsText:t,cubeCount:c=S.DIFF_SQUARES_DEFAULT_COUNT,cubes:r,additionColor:m="var(--bear-success-500, #22c55e)",deletionColor:q="var(--bear-danger-500, #ef4444)",gap:_=S.DIFF_SQUARES_GAP,summaryTypographyProps:s,onCubeClick:i,onCubeHover:e,className:h,testId:j,...x})=>{const d=A.useMemo(()=>r!=null&&r.length?r:Array.from({length:c},()=>({fill:"full"})),[r,c]),g={variant:"body2",component:"span",...s,className:D.cn("bear-flex bear-shrink-0 bear-items-baseline bear-gap-1.5 bear-font-mono bear-font-semibold",s==null?void 0:s.className)};return l.jsxs("div",{className:D.cn("Bear-DiffSquares bear-inline-flex bear-min-w-0 bear-max-w-full bear-items-center bear-gap-2",h),"data-testid":j,...x,children:[(n!=null||t!=null)&&l.jsxs(F.Typography,{...g,children:[n!=null&&l.jsx("span",{style:{color:m},children:n}),t!=null&&l.jsx("span",{style:{color:q},children:t})]}),l.jsx("span",{className:"bear-inline-flex bear-items-center bear-flex-shrink-0",style:{gap:_},role:"img","aria-label":"Change density",children:d.map((a,f)=>l.jsx("span",{className:S.DIFF_SQUARES_CUBE_CLASS,style:E.getDiffCubeStyle(a,m,q),"aria-hidden":!(a!=null&&a.ariaLabel),title:a==null?void 0:a.ariaLabel,onMouseEnter:()=>e==null?void 0:e(a,f),onMouseLeave:()=>e==null?void 0:e(null,null),onClick:()=>i==null?void 0:i(a,f)},f))})]})};exports.DiffSquares=N;

package/dist/components/DiffSquares/DiffSquares.js

@@ -4,16 +4,16 @@ import { cn as A } from "../../utils/cn.js";
 import { Typography as g } from "../Typography/Typography.js";
 import { DIFF_SQUARES_DEFAULT_COUNT as p, DIFF_SQUARES_GAP as x, DIFF_SQUARES_CUBE_CLASS as I } from "./DiffSquares.const.js";
 import { getDiffCubeStyle as M } from "./DiffSquares.utils.js";
-const B = ({
-  additionsText: s,
-  deletionsText: t,
+const G = ({
+  additionsText: t,
+  deletionsText: i,
   cubeCount: m = p,
   cubes: r,
-  additionColor: S = "var(--bear-colors-success-500, #22c55e)",
-  deletionColor: _ = "var(--bear-colors-danger-500, #ef4444)",
+  additionColor: S = "var(--bear-success-500, #22c55e)",
+  deletionColor: _ = "var(--bear-danger-500, #ef4444)",
   gap: D = x,
   summaryTypographyProps: n,
-  onCubeClick: i,
+  onCubeClick: s,
   onCubeHover: l,
   className: F,
   testId: E,
@@ -35,9 +35,9 @@ const B = ({
       "data-testid": E,
       ...N,
       children: [
-        (s != null || t != null) && /* @__PURE__ */ h(g, { ...d, children: [
-          s != null && /* @__PURE__ */ e("span", { style: { color: S }, children: s }),
-          t != null && /* @__PURE__ */ e("span", { style: { color: _ }, children: t })
+        (t != null || i != null) && /* @__PURE__ */ h(g, { ...d, children: [
+          t != null && /* @__PURE__ */ e("span", { style: { color: S }, children: t }),
+          i != null && /* @__PURE__ */ e("span", { style: { color: _ }, children: i })
         ] }),
         /* @__PURE__ */ e(
           "span",
@@ -55,7 +55,7 @@ const B = ({
                 title: a == null ? void 0 : a.ariaLabel,
                 onMouseEnter: () => l == null ? void 0 : l(a, f),
                 onMouseLeave: () => l == null ? void 0 : l(null, null),
-                onClick: () => i == null ? void 0 : i(a, f)
+                onClick: () => s == null ? void 0 : s(a, f)
               },
               f
             ))
@@ -66,5 +66,5 @@ const B = ({
   );
 };
 export {
-  B as DiffSquares
+  G as DiffSquares
 };

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

@@ -9,6 +9,7 @@ export interface DiffCube {
     ariaLabel?: string;
 }
 export interface DiffSquaresProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    id?: string;
     additionsText?: ReactNode;
     deletionsText?: ReactNode;
     cubeCount?: number;

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

@@ -5,6 +5,7 @@ export type DiffViewMode = 'split' | 'unified';
 export type DiffLineType = 'add' | 'remove' | 'context';
 export type DiffSpacing = 'compact' | 'comfortable' | 'spacious';
 export interface DiffViewerProps {
+    id?: string;
     /** Original text (left side) */
     oldValue: string;
     /** New text (right side) */

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

@@ -0,0 +1 @@
+export declare const D_I_V_I_D_E_R_ROOT_CLASS = "Bear-Divider";

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

@@ -1,5 +1,6 @@
 import { HTMLAttributes, ReactNode } from 'react';
 export interface DividerProps extends HTMLAttributes<HTMLHRElement> {
+    id?: string;
     /** Text to display in the middle of the divider */
     children?: ReactNode;
     /** Orientation of the divider */

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

@@ -19,6 +19,7 @@ export interface DockItem {
     href?: string;
 }
 export interface DockProps {
+    id?: string;
     /** Dock items */
     items: DockItem[];
     /** Position on screen */

package/dist/components/Drawer/Drawer.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("react"),A=require("react-dom"),h=require("../../utils/cn.cjs"),E=require("../Icon/index.cjs"),r=require("./Drawer.const.cjs"),R=require("./Drawer.utils.cjs"),_=({isOpen:i,onClose:o,title:b,children:S,side:n="right",size:k="md",showCloseButton:u=!0,closeOnBackdrop:v=!0,closeOnEscape:d=!0,className:w})=>{const[s,m]=t.useState(i),[f,c]=t.useState(!1),[N,x]=t.useState(!1);t.useEffect(()=>{if(i){m(!0),c(!1);const a=requestAnimationFrame(()=>x(!0));return()=>cancelAnimationFrame(a)}if(s){x(!1),c(!0);const a=setTimeout(()=>{m(!1),c(!1)},r.DRAWER_ANIMATION_MS);return()=>clearTimeout(a)}},[i,s]);const l=t.useCallback(a=>{d&&a.key==="Escape"&&o()},[d,o]);if(t.useEffect(()=>{if(s){document.addEventListener("keydown",l);const a=R.lockBodyScroll();return()=>{document.removeEventListener("keydown",l),a()}}return()=>{document.removeEventListener("keydown",l)}},[s,l]),!s)return null;const y=e.jsxs("div",{className:"bear-fixed bear-inset-0 bear-z-[11000]",children:[e.jsx("div",{className:h.cn("bear-absolute bear-inset-0 bear-bg-black/60 bear-backdrop-blur-sm bear-transition-opacity",f?"bear-opacity-0":"bear-opacity-100"),style:{transitionDuration:`${r.DRAWER_ANIMATION_MS}ms`},onClick:v?o:void 0,"aria-hidden":"true"}),e.jsxs("div",{role:"dialog","aria-modal":"true","aria-labelledby":b?"drawer-title":void 0,className:h.cn("bear-absolute bear-bg-white dark:bear-bg-neutral-900 bear-shadow-2xl","bear-border-neutral-200 dark:bear-border-neutral-700","bear-flex bear-flex-col bear-overflow-hidden","bear-transform bear-transition-transform",r.BORDER_SIDE_MAP[n],r.POSITION_CLASSES[n],r.SIZE_CLASSES[n][k],N&&!f?r.TRANSFORM_OPEN[n]:r.TRANSFORM_CLOSED[n],w),style:{transitionDuration:`${r.DRAWER_ANIMATION_MS}ms`},children:[(b||u)&&e.jsxs("div",{className:"bear-flex bear-items-center bear-justify-between bear-px-4 bear-py-3 bear-border-b bear-border-neutral-200 dark:bear-border-neutral-700 bear-shrink-0",children:[b&&e.jsx("h2",{id:"drawer-title",className:"bear-text-lg bear-font-semibold bear-text-neutral-900 dark:bear-text-white",children:b}),u&&e.jsx("button",{onClick:o,className:"bear-p-1 bear-rounded-lg bear-text-neutral-500 dark:bear-text-neutral-400 hover:bear-text-neutral-900 dark:hover:bear-text-white hover:bear-bg-neutral-100 dark:hover:bear-bg-neutral-700 bear-transition-colors","aria-label":"Close drawer",children:e.jsx(E.XIcon,{className:"bear-w-5 bear-h-5"})})]}),e.jsx("div",{className:"bear-flex-1 bear-min-h-0 bear-overflow-y-auto bear-overscroll-contain bear-p-4 bear-text-neutral-700 dark:bear-text-neutral-300",children:S})]})]});return A.createPortal(y,document.body)};exports.Drawer=_;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("react"),I=require("react-dom"),v=require("../../utils/cn.cjs"),R=require("../Icon/index.cjs"),r=require("./Drawer.const.cjs"),g=require("./Drawer.utils.cjs"),D=({isOpen:l,onClose:o,title:i,children:S,side:h="right",anchor:k,variant:M="temporary",size:w="md",showCloseButton:c=!0,closeOnBackdrop:y=!0,closeOnEscape:u=!0,className:N,container:_,id:j,testId:p})=>{const n=k??h,[s,m]=t.useState(l),[f,d]=t.useState(!1),[A,x]=t.useState(!1);t.useEffect(()=>{if(l){m(!0),d(!1);const a=requestAnimationFrame(()=>x(!0));return()=>cancelAnimationFrame(a)}if(s){x(!1),d(!0);const a=setTimeout(()=>{m(!1),d(!1)},r.DRAWER_ANIMATION_MS);return()=>clearTimeout(a)}},[l,s]);const b=t.useCallback(a=>{u&&a.key==="Escape"&&o()},[u,o]);if(t.useEffect(()=>{if(s){document.addEventListener("keydown",b);const a=g.lockBodyScroll();return()=>{document.removeEventListener("keydown",b),a()}}return()=>{document.removeEventListener("keydown",b)}},[s,b]),!s)return null;const E=e.jsxs("div",{className:"bear-fixed bear-inset-0 bear-z-[11000]",children:[e.jsx("div",{className:v.cn("bear-absolute bear-inset-0 bear-bg-black/60 bear-backdrop-blur-sm bear-transition-opacity",f?"bear-opacity-0":"bear-opacity-100"),style:{transitionDuration:`${r.DRAWER_ANIMATION_MS}ms`},onClick:y?o:void 0,"aria-hidden":"true"}),e.jsxs("div",{role:"dialog","aria-modal":"true","aria-labelledby":i?"drawer-title":void 0,className:v.cn("bear-absolute bear-bg-white dark:bear-bg-neutral-900 bear-shadow-2xl","bear-border-neutral-200 dark:bear-border-neutral-700","bear-flex bear-flex-col bear-overflow-hidden","bear-transform bear-transition-transform",r.BORDER_SIDE_MAP[n],r.POSITION_CLASSES[n],r.SIZE_CLASSES[n][w],A&&!f?r.TRANSFORM_OPEN[n]:r.TRANSFORM_CLOSED[n],N),style:{transitionDuration:`${r.DRAWER_ANIMATION_MS}ms`},children:[(i||c)&&e.jsxs("div",{className:"bear-flex bear-items-center bear-justify-between bear-px-4 bear-py-3 bear-border-b bear-border-neutral-200 dark:bear-border-neutral-700 bear-shrink-0",children:[i&&e.jsx("h2",{id:"drawer-title",className:"bear-text-lg bear-font-semibold bear-text-neutral-900 dark:bear-text-white",children:i}),c&&e.jsx("button",{onClick:o,className:"bear-p-1 bear-rounded-lg bear-text-neutral-500 dark:bear-text-neutral-400 hover:bear-text-neutral-900 dark:hover:bear-text-white hover:bear-bg-neutral-100 dark:hover:bear-bg-neutral-700 bear-transition-colors","aria-label":"Close drawer",children:e.jsx(R.XIcon,{className:"bear-w-5 bear-h-5"})})]}),e.jsx("div",{className:"bear-flex-1 bear-min-h-0 bear-overflow-y-auto bear-overscroll-contain bear-p-4 bear-text-neutral-700 dark:bear-text-neutral-300",children:S})]})]});return I.createPortal(E,_??document.body)};exports.Drawer=D;

package/dist/components/Drawer/Drawer.js

@@ -1,69 +1,74 @@
-import { jsxs as s, jsx as t } from "react/jsx-runtime";
-import { useState as d, useEffect as v, useCallback as g } from "react";
-import { createPortal as A } from "react-dom";
+import { jsxs as l, jsx as t } from "react/jsx-runtime";
+import { useState as d, useEffect as k, useCallback as A } from "react";
+import { createPortal as R } from "react-dom";
 import { cn as x } from "../../utils/cn.js";
-import { XIcon as I } from "../Icon/index.js";
-import { DRAWER_ANIMATION_MS as c, TRANSFORM_OPEN as R, TRANSFORM_CLOSED as _, SIZE_CLASSES as D, POSITION_CLASSES as M, BORDER_SIDE_MAP as O } from "./Drawer.const.js";
-import { lockBodyScroll as C } from "./Drawer.utils.js";
-const z = ({
-  isOpen: l,
+import { XIcon as D } from "../Icon/index.js";
+import { DRAWER_ANIMATION_MS as c, TRANSFORM_OPEN as M, TRANSFORM_CLOSED as O, SIZE_CLASSES as C, POSITION_CLASSES as L, BORDER_SIDE_MAP as T } from "./Drawer.const.js";
+import { lockBodyScroll as F } from "./Drawer.utils.js";
+const G = ({
+  isOpen: b,
   onClose: o,
   title: n,
   children: p,
-  side: r = "right",
+  side: y = "right",
+  anchor: S,
+  variant: P = "temporary",
   size: w = "md",
   showCloseButton: u = !0,
-  closeOnBackdrop: y = !0,
+  closeOnBackdrop: N = !0,
   closeOnEscape: m = !0,
-  className: S
+  className: E,
+  container: g,
+  id: j,
+  testId: $
 }) => {
-  const [a, f] = d(l), [h, i] = d(!1), [N, k] = d(!1);
-  v(() => {
-    if (l) {
-      f(!0), i(!1);
-      const e = requestAnimationFrame(() => k(!0));
+  const r = S ?? y, [a, f] = d(b), [v, s] = d(!1), [I, h] = d(!1);
+  k(() => {
+    if (b) {
+      f(!0), s(!1);
+      const e = requestAnimationFrame(() => h(!0));
       return () => cancelAnimationFrame(e);
     }
     if (a) {
-      k(!1), i(!0);
+      h(!1), s(!0);
       const e = setTimeout(() => {
-        f(!1), i(!1);
+        f(!1), s(!1);
       }, c);
       return () => clearTimeout(e);
     }
-  }, [l, a]);
-  const b = g(
+  }, [b, a]);
+  const i = A(
     (e) => {
       m && e.key === "Escape" && o();
     },
     [m, o]
   );
-  if (v(() => {
+  if (k(() => {
     if (a) {
-      document.addEventListener("keydown", b);
-      const e = C();
+      document.addEventListener("keydown", i);
+      const e = F();
       return () => {
-        document.removeEventListener("keydown", b), e();
+        document.removeEventListener("keydown", i), e();
       };
     }
     return () => {
-      document.removeEventListener("keydown", b);
+      document.removeEventListener("keydown", i);
     };
-  }, [a, b]), !a) return null;
-  const E = /* @__PURE__ */ s("div", { className: "bear-fixed bear-inset-0 bear-z-[11000]", children: [
+  }, [a, i]), !a) return null;
+  const _ = /* @__PURE__ */ l("div", { className: "bear-fixed bear-inset-0 bear-z-[11000]", children: [
     /* @__PURE__ */ t(
       "div",
       {
         className: x(
           "bear-absolute bear-inset-0 bear-bg-black/60 bear-backdrop-blur-sm bear-transition-opacity",
-          h ? "bear-opacity-0" : "bear-opacity-100"
+          v ? "bear-opacity-0" : "bear-opacity-100"
         ),
         style: { transitionDuration: `${c}ms` },
-        onClick: y ? o : void 0,
+        onClick: N ? o : void 0,
         "aria-hidden": "true"
       }
     ),
-    /* @__PURE__ */ s(
+    /* @__PURE__ */ l(
       "div",
       {
         role: "dialog",
@@ -74,15 +79,15 @@ const z = ({
           "bear-border-neutral-200 dark:bear-border-neutral-700",
           "bear-flex bear-flex-col bear-overflow-hidden",
           "bear-transform bear-transition-transform",
-          O[r],
-          M[r],
-          D[r][w],
-          N && !h ? R[r] : _[r],
-          S
+          T[r],
+          L[r],
+          C[r][w],
+          I && !v ? M[r] : O[r],
+          E
         ),
         style: { transitionDuration: `${c}ms` },
         children: [
-          (n || u) && /* @__PURE__ */ s("div", { className: "bear-flex bear-items-center bear-justify-between bear-px-4 bear-py-3 bear-border-b bear-border-neutral-200 dark:bear-border-neutral-700 bear-shrink-0", children: [
+          (n || u) && /* @__PURE__ */ l("div", { className: "bear-flex bear-items-center bear-justify-between bear-px-4 bear-py-3 bear-border-b bear-border-neutral-200 dark:bear-border-neutral-700 bear-shrink-0", children: [
             n && /* @__PURE__ */ t(
               "h2",
               {
@@ -97,7 +102,7 @@ const z = ({
                 onClick: o,
                 className: "bear-p-1 bear-rounded-lg bear-text-neutral-500 dark:bear-text-neutral-400 hover:bear-text-neutral-900 dark:hover:bear-text-white hover:bear-bg-neutral-100 dark:hover:bear-bg-neutral-700 bear-transition-colors",
                 "aria-label": "Close drawer",
-                children: /* @__PURE__ */ t(I, { className: "bear-w-5 bear-h-5" })
+                children: /* @__PURE__ */ t(D, { className: "bear-w-5 bear-h-5" })
               }
             )
           ] }),
@@ -106,8 +111,8 @@ const z = ({
       }
     )
   ] });
-  return A(E, document.body);
+  return R(_, g ?? document.body);
 };
 export {
-  z as Drawer
+  G as Drawer
 };

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

@@ -1,23 +1,18 @@
 import { ReactNode } from 'react';
 export interface DrawerProps {
-    /** Whether the drawer is open */
     isOpen: boolean;
-    /** Callback when drawer should close */
     onClose: () => void;
-    /** Drawer title */
     title?: string;
-    /** Drawer content */
     children: ReactNode;
-    /** Side from which drawer appears */
     side?: 'left' | 'right' | 'top' | 'bottom';
-    /** Drawer size */
+    anchor?: 'left' | 'right' | 'top' | 'bottom';
+    variant?: 'temporary' | 'persistent' | 'permanent';
     size?: 'sm' | 'md' | 'lg' | 'xl';
-    /** Whether to show close button */
     showCloseButton?: boolean;
-    /** Whether clicking backdrop closes drawer */
     closeOnBackdrop?: boolean;
-    /** Whether pressing Escape closes drawer */
     closeOnEscape?: boolean;
-    /** Additional class names */
     className?: string;
+    container?: Element | DocumentFragment | null;
+    id?: string;
+    testId?: string;
 }

package/dist/components/Dropdown/Dropdown.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),t=require("react"),E=require("../../utils/cn.cjs"),J=require("../../hooks/useClickOutside.cjs");require("../../context/BearProvider.cjs");require("../../hooks/useBearComponent/useBearComponent.cjs");const Q=require("../Portal/Portal.cjs"),X=require("./Dropdown.const.cjs"),Y=({trigger:x,items:c,open:j,defaultOpen:q=!1,placement:i="bottom-start",offset:v=4,matchWidth:C=!1,minWidth:h=150,maxHeight:M=300,size:S="md",closeOnSelect:I=!0,closeOnClickOutside:g=!0,disabled:R=!1,onOpenChange:f,className:P,testId:W,...z})=>{const[A,U]=t.useState(q),[b,u]=t.useState(-1),[k,B]=t.useState({top:0,left:0,minWidth:h}),D=t.useRef(null),L=t.useRef(null),N=t.useRef(null),w=j!==void 0,n=w?j:A,p=t.useCallback(e=>{w||U(e),f==null||f(e)},[w,f]),F=t.useCallback(()=>{R||p(!n)},[R,n,p]),d=t.useCallback(()=>{p(!1),u(-1)},[p]),y=t.useCallback(e=>{var r;e.disabled||e.divider||e.header||((r=e.onClick)==null||r.call(e),I&&!e.items&&d())},[I,d]),T=t.useCallback(()=>{n&&g&&d()},[n,g,d]);J.useClickOutsideMultiple([D,L],T,{enabled:n&&g}),t.useEffect(()=>{if(!n)return;const e=c.filter(a=>!a.disabled&&!a.divider&&!a.header),r=a=>{switch(a.key){case"Escape":a.preventDefault(),d();break;case"ArrowDown":a.preventDefault(),u(o=>{const l=o+1;return l>=e.length?0:l});break;case"ArrowUp":a.preventDefault(),u(o=>{const l=o-1;return l<0?e.length-1:l});break;case"Enter":case" ":a.preventDefault(),b>=0&&b<e.length&&y(e[b]);break}};return document.addEventListener("keydown",r),()=>document.removeEventListener("keydown",r)},[n,c,b,d,y]),t.useEffect(()=>{if(!n)return;const e=()=>{var m;const r=(m=N.current)==null?void 0:m.getBoundingClientRect();if(!r)return;const a=window.innerWidth,o=C?r.width:h,Z=i.endsWith("end")?r.right-o:i==="top"||i==="bottom"?r.left+r.width/2-o/2:r.left,G=Math.min(Math.max(8,Z),Math.max(8,a-o-8)),H=i.startsWith("top")?r.top-v:r.bottom+v;B({top:H,left:G,minWidth:o})};return e(),window.addEventListener("resize",e),window.addEventListener("scroll",e,!0),()=>{window.removeEventListener("resize",e),window.removeEventListener("scroll",e,!0)}},[n,C,h,i,v]),t.useEffect(()=>{n||u(-1)},[n]);const _=t.useMemo(()=>c.map((e,r)=>({item:e,index:r})).filter(({item:e})=>!e.disabled&&!e.divider&&!e.header),[c]),K=(e,r)=>{if(e.divider)return s.jsx("div",{className:"bear-my-1 bear-mx-2 bear-h-px",style:{backgroundColor:"var(--bear-border-default)"},role:"separator"},e.key);if(e.header)return s.jsx("div",{className:"bear-px-3 bear-py-1.5 bear-text-xs bear-font-semibold bear-uppercase bear-tracking-wider",style:{color:"var(--bear-text-muted)"},children:e.label},e.key);const a=_.findIndex(l=>l.index===r),o=b===a;return s.jsxs("button",{type:"button",role:"menuitem",disabled:e.disabled,onClick:()=>y(e),onMouseEnter:()=>u(a),className:E.cn("bear-w-full bear-flex bear-items-center bear-gap-2 bear-text-left bear-border-none bear-bg-transparent",X.SIZE_CLASSES[S],"bear-transition-colors bear-cursor-pointer",e.selected&&!e.danger&&"bear-bg-[var(--bear-bg-tertiary)] bear-text-[var(--bear-text-primary)]",o&&!e.danger&&"bear-bg-[var(--bear-bg-tertiary)]",e.danger&&"bear-text-red-600 dark:bear-text-red-400 hover:bear-bg-red-50 dark:hover:bear-bg-red-900/20",!e.danger&&!e.disabled&&"hover:bear-bg-[var(--bear-bg-tertiary)]",e.disabled&&"bear-opacity-50 bear-cursor-not-allowed bear-pointer-events-none"),style:e.disabled?{color:"var(--bear-text-muted)"}:e.danger?void 0:{color:"var(--bear-text-secondary)"},children:[e.icon&&s.jsx("span",{className:"bear-flex-shrink-0 bear-w-5 bear-h-5 bear-flex bear-items-center bear-justify-center",children:e.icon}),s.jsx("span",{className:"bear-flex-1",children:e.label}),e.trailing&&s.jsx("span",{className:"bear-flex-shrink-0",style:{color:"var(--bear-text-muted)"},children:e.trailing}),e.items&&s.jsx("svg",{className:"bear-w-4 bear-h-4 bear-flex-shrink-0",style:{color:"var(--bear-text-muted)"},viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:s.jsx("polyline",{points:"9 18 15 12 9 6"})})]},e.key)},V=t.isValidElement(x)?t.cloneElement(x,{onClick:F,ref:N,"aria-expanded":n,"aria-haspopup":!0}):x;return s.jsxs("div",{ref:D,className:E.cn("bear-relative bear-inline-block",P),"data-testid":W,...z,children:[V,n&&s.jsx(Q.Portal,{children:s.jsx("div",{ref:L,role:"menu",className:E.cn("bear-fixed","bear-border bear-rounded-lg bear-shadow-lg","bear-py-1 bear-overflow-y-auto","bear-duration-100"),style:{backgroundColor:"var(--bear-bg-primary)",borderColor:"var(--bear-border-default)",minWidth:k.minWidth,maxHeight:M,top:k.top,left:k.left,zIndex:11e3},children:c.map((e,r)=>K(e,r))})})]})};exports.Dropdown=Y;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),t=require("react"),E=require("../../utils/cn.cjs"),J=require("../../hooks/useClickOutside.cjs");require("../../context/BearProvider.cjs");require("../../hooks/useBearComponent/useBearComponent.cjs");require("../FormControl/FormControl.context.cjs");const Q=require("../Portal/Portal.cjs"),X=require("./Dropdown.const.cjs"),Y=({trigger:x,items:c,open:j,defaultOpen:m=!1,placement:i="bottom-start",offset:v=4,matchWidth:C=!1,minWidth:h=150,maxHeight:M=300,size:S="md",closeOnSelect:I=!0,closeOnClickOutside:g=!0,disabled:R=!1,onOpenChange:f,className:P,testId:W,...z})=>{const[A,U]=t.useState(m),[b,u]=t.useState(-1),[k,B]=t.useState({top:0,left:0,minWidth:h}),q=t.useRef(null),D=t.useRef(null),L=t.useRef(null),w=j!==void 0,n=w?j:A,p=t.useCallback(e=>{w||U(e),f==null||f(e)},[w,f]),F=t.useCallback(()=>{R||p(!n)},[R,n,p]),d=t.useCallback(()=>{p(!1),u(-1)},[p]),y=t.useCallback(e=>{var r;e.disabled||e.divider||e.header||((r=e.onClick)==null||r.call(e),I&&!e.items&&d())},[I,d]),T=t.useCallback(()=>{n&&g&&d()},[n,g,d]);J.useClickOutsideMultiple([q,D],T,{enabled:n&&g}),t.useEffect(()=>{if(!n)return;const e=c.filter(a=>!a.disabled&&!a.divider&&!a.header),r=a=>{switch(a.key){case"Escape":a.preventDefault(),d();break;case"ArrowDown":a.preventDefault(),u(o=>{const l=o+1;return l>=e.length?0:l});break;case"ArrowUp":a.preventDefault(),u(o=>{const l=o-1;return l<0?e.length-1:l});break;case"Enter":case" ":a.preventDefault(),b>=0&&b<e.length&&y(e[b]);break}};return document.addEventListener("keydown",r),()=>document.removeEventListener("keydown",r)},[n,c,b,d,y]),t.useEffect(()=>{if(!n)return;const e=()=>{var N;const r=(N=L.current)==null?void 0:N.getBoundingClientRect();if(!r)return;const a=window.innerWidth,o=C?r.width:h,Z=i.endsWith("end")?r.right-o:i==="top"||i==="bottom"?r.left+r.width/2-o/2:r.left,G=Math.min(Math.max(8,Z),Math.max(8,a-o-8)),H=i.startsWith("top")?r.top-v:r.bottom+v;B({top:H,left:G,minWidth:o})};return e(),window.addEventListener("resize",e),window.addEventListener("scroll",e,!0),()=>{window.removeEventListener("resize",e),window.removeEventListener("scroll",e,!0)}},[n,C,h,i,v]),t.useEffect(()=>{n||u(-1)},[n]);const _=t.useMemo(()=>c.map((e,r)=>({item:e,index:r})).filter(({item:e})=>!e.disabled&&!e.divider&&!e.header),[c]),K=(e,r)=>{if(e.divider)return s.jsx("div",{className:"bear-my-1 bear-mx-2 bear-h-px",style:{backgroundColor:"var(--bear-border-default)"},role:"separator"},e.key);if(e.header)return s.jsx("div",{className:"bear-px-3 bear-py-1.5 bear-text-xs bear-font-semibold bear-uppercase bear-tracking-wider",style:{color:"var(--bear-text-muted)"},children:e.label},e.key);const a=_.findIndex(l=>l.index===r),o=b===a;return s.jsxs("button",{type:"button",role:"menuitem",disabled:e.disabled,onClick:()=>y(e),onMouseEnter:()=>u(a),className:E.cn("bear-w-full bear-flex bear-items-center bear-gap-2 bear-text-left bear-border-none bear-bg-transparent",X.SIZE_CLASSES[S],"bear-transition-colors bear-cursor-pointer",e.selected&&!e.danger&&"bear-bg-[var(--bear-bg-tertiary)] bear-text-[var(--bear-text-primary)]",o&&!e.danger&&"bear-bg-[var(--bear-bg-tertiary)]",e.danger&&"bear-text-red-600 dark:bear-text-red-400 hover:bear-bg-red-50 dark:hover:bear-bg-red-900/20",!e.danger&&!e.disabled&&"hover:bear-bg-[var(--bear-bg-tertiary)]",e.disabled&&"bear-opacity-50 bear-cursor-not-allowed bear-pointer-events-none"),style:e.disabled?{color:"var(--bear-text-muted)"}:e.danger?void 0:{color:"var(--bear-text-secondary)"},children:[e.icon&&s.jsx("span",{className:"bear-flex-shrink-0 bear-w-5 bear-h-5 bear-flex bear-items-center bear-justify-center",children:e.icon}),s.jsx("span",{className:"bear-flex-1",children:e.label}),e.trailing&&s.jsx("span",{className:"bear-flex-shrink-0",style:{color:"var(--bear-text-muted)"},children:e.trailing}),e.items&&s.jsx("svg",{className:"bear-w-4 bear-h-4 bear-flex-shrink-0",style:{color:"var(--bear-text-muted)"},viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:s.jsx("polyline",{points:"9 18 15 12 9 6"})})]},e.key)},V=t.isValidElement(x)?t.cloneElement(x,{onClick:F,ref:L,"aria-expanded":n,"aria-haspopup":!0}):x;return s.jsxs("div",{ref:q,className:E.cn("bear-relative bear-inline-block",P),"data-testid":W,...z,children:[V,n&&s.jsx(Q.Portal,{children:s.jsx("div",{ref:D,role:"menu",className:E.cn("bear-fixed","bear-border bear-rounded-lg bear-shadow-lg","bear-py-1 bear-overflow-y-auto","bear-duration-100"),style:{backgroundColor:"var(--bear-bg-primary)",borderColor:"var(--bear-border-default)",minWidth:k.minWidth,maxHeight:M,top:k.top,left:k.left,zIndex:11e3},children:c.map((e,r)=>K(e,r))})})]})};exports.Dropdown=Y;

package/dist/components/Dropdown/Dropdown.js

@@ -4,9 +4,10 @@ import { cn as C } from "../../utils/cn.js";
 import { useClickOutsideMultiple as re } from "../../hooks/useClickOutside.js";
 import "../../context/BearProvider.js";
 import "../../hooks/useBearComponent/useBearComponent.js";
+import "../FormControl/FormControl.context.js";
 import { Portal as te } from "../Portal/Portal.js";
 import { SIZE_CLASSES as ae } from "./Dropdown.const.js";
-const pe = ({
+const ve = ({
   trigger: v,
   items: d,
   open: L,
@@ -180,5 +181,5 @@ const pe = ({
   );
 };
 export {
-  pe as Dropdown
+  ve as Dropdown
 };

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

@@ -29,6 +29,7 @@ export interface DropdownItem {
     items?: DropdownItem[];
 }
 export interface DropdownProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    id?: string;
     /** Dropdown trigger element */
     trigger: ReactNode;
     /** Dropdown items */

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

@@ -0,0 +1 @@
+export declare const E_D_I_T_A_B_L_E_ROOT_CLASS = "Bear-Editable";

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

@@ -9,6 +9,8 @@ export interface EditableContextValue {
     cancel: () => void;
 }
 export interface EditableRootProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'onSubmit'> {
+    testId?: string;
+    id?: string;
     children?: ReactNode;
     defaultValue?: string;
     value?: string;

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

@@ -0,0 +1 @@
+export declare const E_M_ROOT_CLASS = "Bear-Em";

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

@@ -1,5 +1,7 @@
 import { HTMLAttributes, ReactNode } from 'react';
 export interface EmProps extends HTMLAttributes<HTMLElement> {
+    testId?: string;
+    id?: string;
     children?: ReactNode;
     variant?: 'default' | 'strong' | 'subtle';
 }

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

@@ -1,4 +1,6 @@
 export interface EmojiPickerProps {
+    testId?: string;
+    id?: string;
     onSelect?: (emoji: string) => void;
     size?: 'sm' | 'md' | 'lg';
     maxHeight?: string | number;