@forgedevstack/bear 1.0.0

package/dist/components/List/List.js

@@ -0,0 +1,204 @@
+import { jsx as b, jsxs as f } from "react/jsx-runtime";
+import { createContext as I, forwardRef as v, useContext as D } from "react";
+import { cn as l } from "../../utils/cn.js";
+const u = I({}), j = () => D(u), z = v(({
+  variant: r = "default",
+  size: e = "md",
+  hoverable: a = !1,
+  dense: t = !1,
+  disablePadding: s = !1,
+  className: m,
+  children: n,
+  testId: o,
+  ...x
+}, i) => {
+  const c = {
+    xs: "ember-text-xs",
+    sm: "ember-text-sm",
+    md: "ember-text-base",
+    lg: "ember-text-lg",
+    xl: "ember-text-xl"
+  }, y = {
+    default: "",
+    bordered: "ember-border ember-border-gray-200 dark:ember-border-gray-700 ember-rounded-lg",
+    divided: "[&>li:not(:last-child)]:ember-border-b [&>li:not(:last-child)]:ember-border-gray-200 dark:[&>li:not(:last-child)]:ember-border-gray-700"
+  };
+  return /* @__PURE__ */ b(u.Provider, { value: { dense: t, hoverable: a }, children: /* @__PURE__ */ b(
+    "ul",
+    {
+      ref: i,
+      role: "list",
+      className: l(
+        "ember-list-none ember-m-0",
+        !s && "ember-py-2",
+        c[e],
+        y[r],
+        m
+      ),
+      "data-testid": o,
+      ...x,
+      children: n
+    }
+  ) });
+});
+z.displayName = "List";
+const E = v(({
+  primary: r,
+  secondary: e,
+  leading: a,
+  trailing: t,
+  selected: s = !1,
+  disabled: m = !1,
+  clickable: n = !1,
+  divider: o = !1,
+  dense: x,
+  onClick: i,
+  className: c,
+  children: y,
+  testId: h,
+  ...k
+}, N) => {
+  const { dense: w, hoverable: L } = j(), p = x ?? w, d = n || !!i;
+  return /* @__PURE__ */ f(
+    "li",
+    {
+      ref: N,
+      role: d ? "button" : "listitem",
+      tabIndex: d && !m ? 0 : void 0,
+      "aria-selected": s,
+      "aria-disabled": m,
+      onClick: m ? void 0 : i,
+      onKeyDown: (g) => {
+        !m && (g.key === "Enter" || g.key === " ") && (g.preventDefault(), i == null || i());
+      },
+      className: l(
+        "ember-flex ember-items-center ember-gap-3",
+        p ? "ember-py-1 ember-px-3" : "ember-py-2 ember-px-4",
+        d && !m && "ember-cursor-pointer",
+        (L || d) && !m && "hover:ember-bg-gray-100 dark:hover:ember-bg-gray-800",
+        s && "ember-bg-primary-50 dark:ember-bg-primary-900/20",
+        m && "ember-opacity-50 ember-cursor-not-allowed",
+        o && "ember-border-b ember-border-gray-200 dark:ember-border-gray-700",
+        c
+      ),
+      "data-testid": h,
+      ...k,
+      children: [
+        a && /* @__PURE__ */ b("div", { className: "ember-flex-shrink-0 ember-text-gray-500 dark:ember-text-gray-400", children: a }),
+        r || e ? /* @__PURE__ */ f("div", { className: "ember-flex-1 ember-min-w-0", children: [
+          r && /* @__PURE__ */ b("div", { className: "ember-text-gray-900 dark:ember-text-gray-100 ember-truncate", children: r }),
+          e && /* @__PURE__ */ b("div", { className: l(
+            "ember-text-gray-500 dark:ember-text-gray-400 ember-truncate",
+            p ? "ember-text-xs" : "ember-text-sm"
+          ), children: e })
+        ] }) : /* @__PURE__ */ b("div", { className: "ember-flex-1 ember-min-w-0", children: y }),
+        t && /* @__PURE__ */ b("div", { className: "ember-flex-shrink-0 ember-text-gray-500 dark:ember-text-gray-400", children: t })
+      ]
+    }
+  );
+});
+E.displayName = "ListItem";
+const R = ({
+  sticky: r = !1,
+  inset: e = !1,
+  className: a,
+  children: t,
+  testId: s,
+  ...m
+}) => /* @__PURE__ */ b(
+  "li",
+  {
+    role: "presentation",
+    className: l(
+      "ember-py-2 ember-px-4 ember-text-xs ember-font-semibold ember-uppercase ember-tracking-wider",
+      "ember-text-gray-500 dark:ember-text-gray-400",
+      "ember-bg-gray-50 dark:ember-bg-gray-800/50",
+      r && "ember-sticky ember-top-0 ember-z-10",
+      e && "ember-pl-12",
+      a
+    ),
+    "data-testid": s,
+    ...m,
+    children: t
+  }
+), S = ({
+  primary: r,
+  secondary: e,
+  inset: a = !1,
+  dense: t = !1,
+  className: s,
+  ...m
+}) => /* @__PURE__ */ f(
+  "div",
+  {
+    className: l(
+      "ember-flex-1 ember-min-w-0",
+      a && "ember-pl-9",
+      s
+    ),
+    ...m,
+    children: [
+      r && /* @__PURE__ */ b("div", { className: "ember-text-gray-900 dark:ember-text-gray-100", children: r }),
+      e && /* @__PURE__ */ b("div", { className: l(
+        "ember-text-gray-500 dark:ember-text-gray-400",
+        t ? "ember-text-xs" : "ember-text-sm"
+      ), children: e })
+    ]
+  }
+), T = ({
+  align: r = "center",
+  className: e,
+  children: a,
+  ...t
+}) => /* @__PURE__ */ b(
+  "div",
+  {
+    className: l(
+      "ember-flex-shrink-0 ember-min-w-[36px]",
+      "ember-text-gray-500 dark:ember-text-gray-400",
+      r === "top" && "ember-self-start ember-mt-1",
+      e
+    ),
+    ...t,
+    children: a
+  }
+), q = ({
+  selected: r = !1,
+  disabled: e = !1,
+  dense: a = !1,
+  onClick: t,
+  className: s,
+  children: m,
+  ...n
+}) => /* @__PURE__ */ b(
+  "div",
+  {
+    role: "button",
+    tabIndex: e ? -1 : 0,
+    "aria-selected": r,
+    "aria-disabled": e,
+    onClick: e ? void 0 : t,
+    onKeyDown: (o) => {
+      !e && (o.key === "Enter" || o.key === " ") && (o.preventDefault(), t == null || t());
+    },
+    className: l(
+      "ember-flex ember-items-center ember-gap-3 ember-w-full ember-text-left",
+      a ? "ember-py-1 ember-px-3" : "ember-py-2 ember-px-4",
+      "ember-cursor-pointer ember-transition-colors",
+      "hover:ember-bg-gray-100 dark:hover:ember-bg-gray-800",
+      r && "ember-bg-primary-50 dark:ember-bg-primary-900/20",
+      e && "ember-opacity-50 ember-cursor-not-allowed ember-pointer-events-none",
+      s
+    ),
+    ...n,
+    children: m
+  }
+);
+export {
+  z as List,
+  E as ListItem,
+  q as ListItemButton,
+  T as ListItemIcon,
+  S as ListItemText,
+  R as ListSubheader
+};

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

@@ -0,0 +1,72 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { BearSize } from '../../types';
+export interface ListProps extends HTMLAttributes<HTMLUListElement> {
+    /** List variant */
+    variant?: 'default' | 'bordered' | 'divided';
+    /** List size */
+    size?: BearSize;
+    /** Whether items are hoverable */
+    hoverable?: boolean;
+    /** Whether list is dense */
+    dense?: boolean;
+    /** Disable padding */
+    disablePadding?: boolean;
+    /** Test ID */
+    testId?: string;
+}
+export interface ListItemProps extends HTMLAttributes<HTMLLIElement> {
+    /** Primary text content */
+    primary?: ReactNode;
+    /** Secondary text content */
+    secondary?: ReactNode;
+    /** Leading content (icon, avatar) */
+    leading?: ReactNode;
+    /** Trailing content (icon, button, badge) */
+    trailing?: ReactNode;
+    /** Whether item is selected */
+    selected?: boolean;
+    /** Whether item is disabled */
+    disabled?: boolean;
+    /** Whether item is clickable */
+    clickable?: boolean;
+    /** Divider after item */
+    divider?: boolean;
+    /** Dense mode */
+    dense?: boolean;
+    /** Click handler */
+    onClick?: () => void;
+    /** Test ID */
+    testId?: string;
+}
+export interface ListSubheaderProps extends HTMLAttributes<HTMLLIElement> {
+    /** Sticky position */
+    sticky?: boolean;
+    /** Inset for alignment with ListItemText */
+    inset?: boolean;
+    /** Test ID */
+    testId?: string;
+}
+export interface ListItemTextProps extends HTMLAttributes<HTMLDivElement> {
+    /** Primary text */
+    primary?: ReactNode;
+    /** Secondary text */
+    secondary?: ReactNode;
+    /** Inset for alignment */
+    inset?: boolean;
+    /** Dense mode */
+    dense?: boolean;
+}
+export interface ListItemIconProps extends HTMLAttributes<HTMLDivElement> {
+    /** Align icon */
+    align?: 'top' | 'center';
+}
+export interface ListItemButtonProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onClick'> {
+    /** Whether button is selected */
+    selected?: boolean;
+    /** Whether button is disabled */
+    disabled?: boolean;
+    /** Dense mode */
+    dense?: boolean;
+    /** Click handler */
+    onClick?: () => void;
+}

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

@@ -0,0 +1,2 @@
+export { List, ListItem, ListSubheader, ListItemText, ListItemIcon, ListItemButton } from './List';
+export type { ListProps, ListItemProps, ListSubheaderProps, ListItemTextProps, ListItemIconProps, ListItemButtonProps } from './List.types';

package/dist/components/Menu/Menu.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const b=require("react/jsx-runtime"),c=require("react"),l=require("../../utils/cn.cjs"),k=({icon:t,disabled:e=!1,selected:m=!1,divider:d=!1,children:o,onClick:a,className:i,testId:g,...f})=>b.jsxs(b.Fragment,{children:[b.jsxs("div",{role:"menuitem",tabIndex:e?-1:0,className:l.cn("ember-flex ember-items-center ember-gap-3 ember-px-4 ember-py-2 ember-cursor-pointer ember-transition-colors","hover:ember-bg-gray-100 dark:hover:ember-bg-gray-700","focus:ember-outline-none focus:ember-bg-gray-100 dark:focus:ember-bg-gray-700",m&&"ember-bg-pink-50 dark:ember-bg-pink-900/20 ember-text-pink-600",e&&"ember-opacity-50 ember-cursor-not-allowed hover:ember-bg-transparent",i),onClick:e?void 0:a,onKeyDown:u=>{(u.key==="Enter"||u.key===" ")&&!e&&(a==null||a())},"data-testid":g,...f,children:[t&&b.jsx("span",{className:"ember-flex-shrink-0 ember-text-gray-500",children:t}),b.jsx("span",{className:"ember-flex-1 ember-text-sm",children:o})]}),d&&b.jsx(x,{})]}),x=({className:t})=>b.jsx("div",{className:l.cn("ember-h-px ember-bg-gray-200 dark:ember-bg-gray-700 ember-my-1",t)}),w=({open:t=!1,anchorEl:e,onClose:m,children:d,position:o="bottom-start",minWidth:a=180,maxHeight:i=300,className:g,testId:f,...u})=>{const y=c.useRef(null),[p,v]=c.useState({top:0,left:0});return c.useEffect(()=>{if(!t||!e)return;const r=e.getBoundingClientRect();let n=0,s=0;switch(o){case"bottom-start":n=r.bottom+4,s=r.left;break;case"bottom-end":n=r.bottom+4,s=r.right-a;break;case"top-start":n=r.top-4,s=r.left;break;case"top-end":n=r.top-4,s=r.right-a;break}v({top:n,left:s})},[t,e,o,a]),c.useEffect(()=>{if(!t)return;const r=s=>{y.current&&!y.current.contains(s.target)&&e&&!e.contains(s.target)&&(m==null||m())},n=s=>{s.key==="Escape"&&(m==null||m())};return document.addEventListener("mousedown",r),document.addEventListener("keydown",n),()=>{document.removeEventListener("mousedown",r),document.removeEventListener("keydown",n)}},[t,e,m]),t?b.jsx("div",{ref:y,role:"menu",className:l.cn("ember-fixed ember-z-50 ember-bg-white dark:ember-bg-gray-800","ember-border ember-border-gray-200 dark:ember-border-gray-700","ember-rounded-lg ember-shadow-lg ember-py-1","ember-overflow-y-auto",g),style:{top:p.top,left:p.left,minWidth:a,maxHeight:i},"data-testid":f,...u,children:d}):null};exports.Menu=w;exports.MenuDivider=x;exports.MenuItem=k;

package/dist/components/Menu/Menu.d.ts

@@ -0,0 +1,29 @@
+import { FC } from 'react';
+import { MenuProps, MenuItemProps, MenuDividerProps } from './Menu.types';
+/**
+ * MenuItem component for menu items
+ */
+export declare const MenuItem: FC<MenuItemProps>;
+/**
+ * MenuDivider component for separating menu sections
+ */
+export declare const MenuDivider: FC<MenuDividerProps>;
+/**
+ * Menu component for dropdown menus
+ *
+ * @example
+ * ```tsx
+ * const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
+ *
+ * <Button onClick={(e) => setAnchorEl(e.currentTarget)}>Open Menu</Button>
+ *
+ * <Menu open={!!anchorEl} anchorEl={anchorEl} onClose={() => setAnchorEl(null)}>
+ *   <MenuItem onClick={() => {}}>Option 1</MenuItem>
+ *   <MenuItem onClick={() => {}}>Option 2</MenuItem>
+ *   <MenuDivider />
+ *   <MenuItem onClick={() => {}} disabled>Disabled</MenuItem>
+ * </Menu>
+ * ```
+ */
+export declare const Menu: FC<MenuProps>;
+export default Menu;

package/dist/components/Menu/Menu.js

@@ -0,0 +1,111 @@
+import { jsx as n, jsxs as l, Fragment as x } from "react/jsx-runtime";
+import { useRef as w, useState as h, useEffect as k } from "react";
+import { cn as p } from "../../utils/cn.js";
+const R = ({
+  icon: t,
+  disabled: e = !1,
+  selected: a = !1,
+  divider: c = !1,
+  children: o,
+  onClick: b,
+  className: u,
+  testId: f,
+  ...g
+}) => /* @__PURE__ */ l(x, { children: [
+  /* @__PURE__ */ l(
+    "div",
+    {
+      role: "menuitem",
+      tabIndex: e ? -1 : 0,
+      className: p(
+        "ember-flex ember-items-center ember-gap-3 ember-px-4 ember-py-2 ember-cursor-pointer ember-transition-colors",
+        "hover:ember-bg-gray-100 dark:hover:ember-bg-gray-700",
+        "focus:ember-outline-none focus:ember-bg-gray-100 dark:focus:ember-bg-gray-700",
+        a && "ember-bg-pink-50 dark:ember-bg-pink-900/20 ember-text-pink-600",
+        e && "ember-opacity-50 ember-cursor-not-allowed hover:ember-bg-transparent",
+        u
+      ),
+      onClick: e ? void 0 : b,
+      onKeyDown: (d) => {
+        (d.key === "Enter" || d.key === " ") && !e && (b == null || b());
+      },
+      "data-testid": f,
+      ...g,
+      children: [
+        t && /* @__PURE__ */ n("span", { className: "ember-flex-shrink-0 ember-text-gray-500", children: t }),
+        /* @__PURE__ */ n("span", { className: "ember-flex-1 ember-text-sm", children: o })
+      ]
+    }
+  ),
+  c && /* @__PURE__ */ n(N, {})
+] }), N = ({ className: t }) => /* @__PURE__ */ n("div", { className: p("ember-h-px ember-bg-gray-200 dark:ember-bg-gray-700 ember-my-1", t) }), j = ({
+  open: t = !1,
+  anchorEl: e,
+  onClose: a,
+  children: c,
+  position: o = "bottom-start",
+  minWidth: b = 180,
+  maxHeight: u = 300,
+  className: f,
+  testId: g,
+  ...d
+}) => {
+  const i = w(null), [y, v] = h({ top: 0, left: 0 });
+  return k(() => {
+    if (!t || !e) return;
+    const r = e.getBoundingClientRect();
+    let s = 0, m = 0;
+    switch (o) {
+      case "bottom-start":
+        s = r.bottom + 4, m = r.left;
+        break;
+      case "bottom-end":
+        s = r.bottom + 4, m = r.right - b;
+        break;
+      case "top-start":
+        s = r.top - 4, m = r.left;
+        break;
+      case "top-end":
+        s = r.top - 4, m = r.right - b;
+        break;
+    }
+    v({ top: s, left: m });
+  }, [t, e, o, b]), k(() => {
+    if (!t) return;
+    const r = (m) => {
+      i.current && !i.current.contains(m.target) && e && !e.contains(m.target) && (a == null || a());
+    }, s = (m) => {
+      m.key === "Escape" && (a == null || a());
+    };
+    return document.addEventListener("mousedown", r), document.addEventListener("keydown", s), () => {
+      document.removeEventListener("mousedown", r), document.removeEventListener("keydown", s);
+    };
+  }, [t, e, a]), t ? /* @__PURE__ */ n(
+    "div",
+    {
+      ref: i,
+      role: "menu",
+      className: p(
+        "ember-fixed ember-z-50 ember-bg-white dark:ember-bg-gray-800",
+        "ember-border ember-border-gray-200 dark:ember-border-gray-700",
+        "ember-rounded-lg ember-shadow-lg ember-py-1",
+        "ember-overflow-y-auto",
+        f
+      ),
+      style: {
+        top: y.top,
+        left: y.left,
+        minWidth: b,
+        maxHeight: u
+      },
+      "data-testid": g,
+      ...d,
+      children: c
+    }
+  ) : null;
+};
+export {
+  j as Menu,
+  N as MenuDivider,
+  R as MenuItem
+};

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

@@ -0,0 +1,39 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export interface MenuItemProps extends HTMLAttributes<HTMLDivElement> {
+    /** Icon to show before the label */
+    icon?: ReactNode;
+    /** Whether the item is disabled */
+    disabled?: boolean;
+    /** Whether the item is selected/active */
+    selected?: boolean;
+    /** Whether the item shows a divider below */
+    divider?: boolean;
+    /** Label/content */
+    children?: ReactNode;
+    /** Click handler */
+    onClick?: () => void;
+    /** Test ID */
+    testId?: string;
+}
+export interface MenuProps extends HTMLAttributes<HTMLDivElement> {
+    /** Whether menu is open */
+    open?: boolean;
+    /** Anchor element for positioning */
+    anchorEl?: HTMLElement | null;
+    /** Callback when menu should close */
+    onClose?: () => void;
+    /** Menu items */
+    children?: ReactNode;
+    /** Position relative to anchor */
+    position?: 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';
+    /** Min width of the menu */
+    minWidth?: number;
+    /** Max height before scrolling */
+    maxHeight?: number;
+    /** Test ID */
+    testId?: string;
+}
+export interface MenuDividerProps {
+    /** Additional class name */
+    className?: string;
+}

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

@@ -0,0 +1,2 @@
+export { Menu, MenuItem, MenuDivider } from './Menu';
+export type { MenuProps, MenuItemProps, MenuDividerProps } from './Menu.types';

package/dist/components/Modal/Modal.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("react"),y=require("react-dom"),f=require("../../utils/cn.cjs"),g=require("../Icon/icons/navigation.cjs"),v={sm:"bear-max-w-sm",md:"bear-max-w-md",lg:"bear-max-w-lg",xl:"bear-max-w-xl",full:"bear-max-w-full bear-mx-4"},h=({isOpen:b,onClose:r,title:a,children:n,size:o="md",showCloseButton:l=!0,closeOnBackdrop:c=!0,closeOnEscape:s=!0,className:m,footer:d})=>{const t=i.useCallback(x=>{s&&x.key==="Escape"&&r()},[s,r]);if(i.useEffect(()=>(b&&(document.addEventListener("keydown",t),document.body.style.overflow="hidden"),()=>{document.removeEventListener("keydown",t),document.body.style.overflow=""}),[b,t]),!b)return null;const u=e.jsxs("div",{className:"bear-fixed bear-inset-0 bear-z-50 bear-flex bear-items-center bear-justify-center",children:[e.jsx("div",{className:"bear-absolute bear-inset-0 bear-bg-black/60 bear-backdrop-blur-sm bear-transition-opacity",onClick:c?r:void 0,"aria-hidden":"true"}),e.jsxs("div",{role:"dialog","aria-modal":"true","aria-labelledby":a?"modal-title":void 0,className:f.cn("bear-relative bear-w-full bear-bg-gray-900 bear-rounded-xl bear-shadow-2xl","bear-border bear-border-gray-700","bear-transform bear-transition-all","bear-animate-in bear-fade-in bear-zoom-in-95",v[o],m),children:[(a||l)&&e.jsxs("div",{className:"bear-flex bear-items-center bear-justify-between bear-px-6 bear-py-4 bear-border-b bear-border-gray-700",children:[a&&e.jsx("h2",{id:"modal-title",className:"bear-text-lg bear-font-semibold bear-text-white",children:a}),l&&e.jsx("button",{onClick:r,className:"bear-p-1 bear-rounded-lg bear-text-gray-400 hover:bear-text-white hover:bear-bg-gray-700 bear-transition-colors","aria-label":"Close modal",children:e.jsx(g.CloseIcon,{className:"bear-w-5 bear-h-5"})})]}),e.jsx("div",{className:"bear-px-6 bear-py-4 bear-text-gray-300",children:n}),d&&e.jsx("div",{className:"bear-flex bear-items-center bear-justify-end bear-gap-3 bear-px-6 bear-py-4 bear-border-t bear-border-gray-700",children:d})]})]});return y.createPortal(u,document.body)};exports.Modal=h;

package/dist/components/Modal/Modal.d.ts

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

package/dist/components/Modal/Modal.js

@@ -0,0 +1,86 @@
+import { jsxs as l, jsx as e } from "react/jsx-runtime";
+import { useCallback as f, useEffect as y } from "react";
+import { createPortal as g } from "react-dom";
+import { cn as v } from "../../utils/cn.js";
+import { CloseIcon as h } from "../Icon/icons/navigation.js";
+const p = {
+  sm: "bear-max-w-sm",
+  md: "bear-max-w-md",
+  lg: "bear-max-w-lg",
+  xl: "bear-max-w-xl",
+  full: "bear-max-w-full bear-mx-4"
+}, z = ({
+  isOpen: b,
+  onClose: r,
+  title: a,
+  children: n,
+  size: m = "md",
+  showCloseButton: o = !0,
+  closeOnBackdrop: s = !0,
+  closeOnEscape: d = !0,
+  className: c,
+  footer: i
+}) => {
+  const t = f(
+    (x) => {
+      d && x.key === "Escape" && r();
+    },
+    [d, r]
+  );
+  if (y(() => (b && (document.addEventListener("keydown", t), document.body.style.overflow = "hidden"), () => {
+    document.removeEventListener("keydown", t), document.body.style.overflow = "";
+  }), [b, t]), !b) return null;
+  const u = /* @__PURE__ */ l("div", { className: "bear-fixed bear-inset-0 bear-z-50 bear-flex bear-items-center bear-justify-center", children: [
+    /* @__PURE__ */ e(
+      "div",
+      {
+        className: "bear-absolute bear-inset-0 bear-bg-black/60 bear-backdrop-blur-sm bear-transition-opacity",
+        onClick: s ? r : void 0,
+        "aria-hidden": "true"
+      }
+    ),
+    /* @__PURE__ */ l(
+      "div",
+      {
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-labelledby": a ? "modal-title" : void 0,
+        className: v(
+          "bear-relative bear-w-full bear-bg-gray-900 bear-rounded-xl bear-shadow-2xl",
+          "bear-border bear-border-gray-700",
+          "bear-transform bear-transition-all",
+          "bear-animate-in bear-fade-in bear-zoom-in-95",
+          p[m],
+          c
+        ),
+        children: [
+          (a || o) && /* @__PURE__ */ l("div", { className: "bear-flex bear-items-center bear-justify-between bear-px-6 bear-py-4 bear-border-b bear-border-gray-700", children: [
+            a && /* @__PURE__ */ e(
+              "h2",
+              {
+                id: "modal-title",
+                className: "bear-text-lg bear-font-semibold bear-text-white",
+                children: a
+              }
+            ),
+            o && /* @__PURE__ */ e(
+              "button",
+              {
+                onClick: r,
+                className: "bear-p-1 bear-rounded-lg bear-text-gray-400 hover:bear-text-white hover:bear-bg-gray-700 bear-transition-colors",
+                "aria-label": "Close modal",
+                children: /* @__PURE__ */ e(h, { className: "bear-w-5 bear-h-5" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ e("div", { className: "bear-px-6 bear-py-4 bear-text-gray-300", children: n }),
+          i && /* @__PURE__ */ e("div", { className: "bear-flex bear-items-center bear-justify-end bear-gap-3 bear-px-6 bear-py-4 bear-border-t bear-border-gray-700", children: i })
+        ]
+      }
+    )
+  ] });
+  return g(u, document.body);
+};
+export {
+  z as Modal
+};

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

@@ -0,0 +1,23 @@
+import { ReactNode } from 'react';
+export interface ModalProps {
+    /** Whether the modal is open */
+    isOpen: boolean;
+    /** Callback when modal should close */
+    onClose: () => void;
+    /** Modal title */
+    title?: string;
+    /** Modal content */
+    children: ReactNode;
+    /** Modal size */
+    size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
+    /** Whether to show close button */
+    showCloseButton?: boolean;
+    /** Whether clicking backdrop closes modal */
+    closeOnBackdrop?: boolean;
+    /** Whether pressing Escape closes modal */
+    closeOnEscape?: boolean;
+    /** Additional class names for content */
+    className?: string;
+    /** Footer content */
+    footer?: ReactNode;
+}

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

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

package/dist/components/MultiSelect/MultiSelect.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),l=require("react"),i=require("../../utils/cn.cjs"),z=({options:p,value:w,defaultValue:R=[],onChange:s,placeholder:S="Select options...",label:k,helperText:v,error:u,disabled:b=!1,maxSelections:d,searchable:E=!0,className:O,testId:M})=>{const[f,o]=l.useState(!1),[m,g]=l.useState(""),[V,j]=l.useState(R),x=l.useRef(null),h=l.useRef(null),y=w!==void 0,a=y?w:V;l.useEffect(()=>{const e=r=>{x.current&&!x.current.contains(r.target)&&(o(!1),g(""))};return document.addEventListener("mousedown",e),()=>document.removeEventListener("mousedown",e)},[]);const c=p.filter(e=>e.label.toLowerCase().includes(m.toLowerCase())&&!a.includes(e.value)),N=e=>{var n;if(b||d&&a.length>=d)return;const r=[...a,e];y||j(r),s==null||s(r),g(""),(n=h.current)==null||n.focus()},L=e=>{if(b)return;const r=a.filter(n=>n!==e);y||j(r),s==null||s(r)},q=e=>{e.key==="Backspace"&&m===""&&a.length>0&&L(a[a.length-1]),e.key==="Escape"&&(o(!1),g("")),e.key==="Enter"&&c.length>0&&(e.preventDefault(),N(c[0].value))},D=a.map(e=>{var r;return((r=p.find(n=>n.value===e))==null?void 0:r.label)||e});return t.jsxs("div",{className:i.cn("bear-w-full",O),ref:x,"data-testid":M,children:[k&&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:k}),t.jsxs("div",{className:i.cn("bear-relative bear-flex bear-flex-wrap bear-items-center bear-gap-1.5 bear-min-h-[42px] bear-px-3 bear-py-2","bear-rounded-lg bear-border bear-bg-white dark:bear-bg-gray-900","bear-transition-colors bear-cursor-text",u?"bear-border-red-500 focus-within:bear-ring-2 focus-within:bear-ring-red-500/20":"bear-border-gray-300 dark:bear-border-gray-600 focus-within:bear-border-amber-500 focus-within:bear-ring-2 focus-within:bear-ring-amber-500/20",b&&"bear-opacity-50 bear-cursor-not-allowed bear-bg-gray-100 dark:bear-bg-gray-800"),onClick:()=>{var e;b||(o(!0),(e=h.current)==null||e.focus())},children:[D.map((e,r)=>t.jsxs("span",{className:"bear-inline-flex bear-items-center bear-gap-1 bear-px-2 bear-py-0.5 bear-text-sm bear-rounded-md bear-bg-amber-100 dark:bear-bg-amber-900/30 bear-text-amber-800 dark:bear-text-amber-200",children:[e,!b&&t.jsx("button",{type:"button",onClick:n=>{n.stopPropagation(),L(a[r])},className:"bear-ml-0.5 bear-text-amber-600 hover:bear-text-amber-800 dark:bear-text-amber-400 dark:hover:bear-text-amber-200",children:"×"})]},a[r])),E&&!b&&t.jsx("input",{ref:h,type:"text",value:m,onChange:e=>{g(e.target.value),o(!0)},onFocus:()=>o(!0),onKeyDown:q,placeholder:a.length===0?S:"",disabled:b||d!==void 0&&a.length>=d,className:"bear-flex-1 bear-min-w-[80px] bear-bg-transparent bear-outline-none bear-text-sm bear-text-gray-900 dark:bear-text-white placeholder:bear-text-gray-400"}),t.jsx("svg",{className:i.cn("bear-w-4 bear-h-4 bear-text-gray-400 bear-transition-transform bear-ml-auto",f&&"bear-rotate-180"),fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",children:t.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M19 9l-7 7-7-7"})})]}),f&&!b&&c.length>0&&t.jsx("div",{className:"bear-absolute bear-z-50 bear-w-full bear-mt-1 bear-py-1 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-max-h-60 bear-overflow-auto",children:c.map(e=>t.jsx("button",{type:"button",disabled:e.disabled,onClick:()=>N(e.value),className:i.cn("bear-w-full bear-px-3 bear-py-2 bear-text-left bear-text-sm","hover:bear-bg-amber-50 dark:hover:bear-bg-amber-900/20","bear-text-gray-900 dark:bear-text-white",e.disabled&&"bear-opacity-50 bear-cursor-not-allowed"),children:e.label},e.value))}),f&&!b&&c.length===0&&m&&t.jsx("div",{className:"bear-absolute bear-z-50 bear-w-full bear-mt-1 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",children:"No options found"}),(v||u)&&t.jsx("p",{className:i.cn("bear-mt-1.5 bear-text-xs",u?"bear-text-red-500":"bear-text-gray-500 dark:bear-text-gray-400"),children:u||v})]})};exports.MultiSelect=z;

package/dist/components/MultiSelect/MultiSelect.d.ts

@@ -0,0 +1,20 @@
+import { FC } from 'react';
+import { MultiSelectProps } from './MultiSelect.types';
+/**
+ * MultiSelect - Select multiple options with tags
+ *
+ * @example
+ * ```tsx
+ * <MultiSelect
+ *   label="Skills"
+ *   options={[
+ *     { value: 'react', label: 'React' },
+ *     { value: 'vue', label: 'Vue' },
+ *     { value: 'angular', label: 'Angular' },
+ *   ]}
+ *   value={selected}
+ *   onChange={setSelected}
+ * />
+ * ```
+ */
+export declare const MultiSelect: FC<MultiSelectProps>;