@forgedevstack/bear 1.0.2 → 1.0.4-alpha

package/dist/components/Icon/index.js

@@ -1,38 +1,45 @@
 import "react/jsx-runtime";
 import * as o from "./icons/action.js";
+import { EditIcon as m } from "./icons/action.js";
 import * as n from "./icons/navigation.js";
-import { ChevronDownIcon as s } from "./icons/navigation.js";
+import { CloseIcon as a, ChevronDownIcon as I, ChevronRightIcon as h, ChevronLeftIcon as C, ChevronsLeftIcon as f, ChevronsRightIcon as v } from "./icons/navigation.js";
 import * as t from "./icons/content.js";
-import * as r from "./icons/communication.js";
-import * as m from "./icons/status.js";
-import { CheckIcon as e } from "./icons/status.js";
-import * as i from "./icons/media.js";
-import * as c from "./icons/editor.js";
-import * as a from "./icons/misc.js";
-import { XIcon as p } from "./icons/misc.js";
-const v = e, d = s, u = p, k = {
+import * as c from "./icons/communication.js";
+import * as r from "./icons/status.js";
+import { CheckIcon as p } from "./icons/status.js";
+import * as s from "./icons/media.js";
+import * as i from "./icons/editor.js";
+import * as e from "./icons/misc.js";
+import { XIcon as $ } from "./icons/misc.js";
+const E = p, k = a, l = m, w = I, D = h, X = C, M = f, x = v, A = $, B = {
   // Flat access to common icons (shortcuts)
   ...o,
   ...n,
   ...t,
+  ...c,
   ...r,
-  ...m,
+  ...s,
   ...i,
-  ...c,
-  ...a,
+  ...e,
   // Category-based access
   Action: o,
   Navigation: n,
   Content: t,
-  Communication: r,
-  Status: m,
-  Media: i,
-  Editor: c,
-  Misc: a
+  Communication: c,
+  Status: r,
+  Media: s,
+  Editor: i,
+  Misc: e
 };
 export {
-  k as BearIcons,
-  v as CheckIcon,
-  d as ChevronDownIcon,
-  u as XIcon
+  B as BearIcons,
+  E as CheckIcon,
+  w as ChevronDownIcon,
+  X as ChevronLeftIcon,
+  D as ChevronRightIcon,
+  M as ChevronsLeftIcon,
+  x as ChevronsRightIcon,
+  k as CloseIcon,
+  l as EditIcon,
+  A as XIcon
 };

package/dist/components/Input/Input.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),g=require("react"),s=require("../../utils/cn.cjs"),m={sm:"bear-h-8 bear-text-sm bear-px-3",md:"bear-h-10 bear-text-base bear-px-4",lg:"bear-h-12 bear-text-lg bear-px-5"},o=g.forwardRef(({label:t,helperText:l,error:r,size:i="md",leftAddon:a,rightAddon:b,fullWidth:u=!1,className:x,disabled:c,...d},f)=>{const n=!!r;return e.jsxs("div",{className:s.cn("bear-flex bear-flex-col bear-gap-1.5",u&&"bear-w-full"),children:[t&&e.jsx("label",{className:"bear-text-sm bear-font-medium bear-text-gray-300",children:t}),e.jsxs("div",{className:"bear-relative bear-flex bear-items-center",children:[a&&e.jsx("div",{className:"bear-absolute bear-left-3 bear-text-gray-400",children:a}),e.jsx("input",{ref:f,disabled:c,className:s.cn("bear-w-full bear-rounded-lg bear-border bear-bg-gray-800","bear-text-white placeholder:bear-text-gray-500","bear-outline-none bear-transition-all bear-duration-200","focus:bear-ring-2 focus:bear-ring-offset-2 focus:bear-ring-offset-gray-900",n?"bear-border-red-500 focus:bear-ring-red-500":"bear-border-gray-600 focus:bear-border-bear-500 focus:bear-ring-bear-500",c&&"bear-opacity-50 bear-cursor-not-allowed",a&&"bear-pl-10",b&&"bear-pr-10",m[i],x),...d}),b&&e.jsx("div",{className:"bear-absolute bear-right-3 bear-text-gray-400",children:b})]}),(l||r)&&e.jsx("p",{className:s.cn("bear-text-sm",n?"bear-text-red-500":"bear-text-gray-400"),children:r||l})]})});o.displayName="Input";exports.Input=o;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),f=require("react"),b=require("../../utils/cn.cjs"),_={sm:"bear-h-8 bear-text-sm bear-px-3",md:"bear-h-10 bear-text-base bear-px-4",lg:"bear-h-12 bear-text-lg bear-px-5"},u=f.forwardRef(({label:s,helperText:n,error:r,size:c="md",leftAddon:a,rightAddon:t,fullWidth:i=!1,className:d,disabled:l,...p},x)=>{const o=!!r;return e.jsxs("div",{className:b.cn("Bear-Input bear-flex bear-flex-col bear-gap-1.5",i&&"bear-w-full"),children:[s&&e.jsx("label",{className:"Bear-Input__label bear-text-sm bear-font-medium bear-text-gray-300",children:s}),e.jsxs("div",{className:"Bear-Input__wrapper bear-relative bear-flex bear-items-center",children:[a&&e.jsx("div",{className:"Bear-Input__addon Bear-Input__addon--left bear-absolute bear-left-3 bear-text-gray-400",children:a}),e.jsx("input",{ref:x,disabled:l,className:b.cn("Bear-Input__field","bear-w-full bear-rounded-lg bear-border bear-bg-gray-800","bear-text-white placeholder:bear-text-gray-500","bear-outline-none bear-transition-all bear-duration-200","focus:bear-ring-2 focus:bear-ring-offset-2 focus:bear-ring-offset-gray-900",o?"Bear-Input__field--error bear-border-red-500 focus:bear-ring-red-500":"bear-border-gray-600 focus:bear-border-bear-500 focus:bear-ring-bear-500",l&&"Bear-Input__field--disabled bear-opacity-50 bear-cursor-not-allowed",a&&"bear-pl-10",t&&"bear-pr-10",_[c],d),...p}),t&&e.jsx("div",{className:"Bear-Input__addon Bear-Input__addon--right bear-absolute bear-right-3 bear-text-gray-400",children:t})]}),(n||r)&&e.jsx("p",{className:b.cn("Bear-Input__helper bear-text-sm",o?"Bear-Input__helper--error bear-text-red-500":"bear-text-gray-400"),children:r||n})]})});u.displayName="Input";exports.Input=u;

package/dist/components/Input/Input.js

@@ -1,64 +1,65 @@
 import { jsxs as i, jsx as e } from "react/jsx-runtime";
-import { forwardRef as d } from "react";
-import { cn as t } from "../../utils/cn.js";
-const g = {
+import { forwardRef as m } from "react";
+import { cn as b } from "../../utils/cn.js";
+const _ = {
   sm: "bear-h-8 bear-text-sm bear-px-3",
   md: "bear-h-10 bear-text-base bear-px-4",
   lg: "bear-h-12 bear-text-lg bear-px-5"
-}, p = d(
+}, x = m(
   ({
-    label: s,
-    helperText: l,
+    label: l,
+    helperText: s,
     error: r,
-    size: n = "md",
+    size: p = "md",
     leftAddon: a,
-    rightAddon: b,
-    fullWidth: m = !1,
-    className: f,
-    disabled: o,
-    ...x
-  }, u) => {
-    const c = !!r;
-    return /* @__PURE__ */ i("div", { className: t("bear-flex bear-flex-col bear-gap-1.5", m && "bear-w-full"), children: [
-      s && /* @__PURE__ */ e("label", { className: "bear-text-sm bear-font-medium bear-text-gray-300", children: s }),
-      /* @__PURE__ */ i("div", { className: "bear-relative bear-flex bear-items-center", children: [
-        a && /* @__PURE__ */ e("div", { className: "bear-absolute bear-left-3 bear-text-gray-400", children: a }),
+    rightAddon: t,
+    fullWidth: u = !1,
+    className: d,
+    disabled: n,
+    ...c
+  }, f) => {
+    const o = !!r;
+    return /* @__PURE__ */ i("div", { className: b("Bear-Input bear-flex bear-flex-col bear-gap-1.5", u && "bear-w-full"), children: [
+      l && /* @__PURE__ */ e("label", { className: "Bear-Input__label bear-text-sm bear-font-medium bear-text-gray-300", children: l }),
+      /* @__PURE__ */ i("div", { className: "Bear-Input__wrapper bear-relative bear-flex bear-items-center", children: [
+        a && /* @__PURE__ */ e("div", { className: "Bear-Input__addon Bear-Input__addon--left bear-absolute bear-left-3 bear-text-gray-400", children: a }),
         /* @__PURE__ */ e(
           "input",
           {
-            ref: u,
-            disabled: o,
-            className: t(
+            ref: f,
+            disabled: n,
+            className: b(
+              "Bear-Input__field",
               "bear-w-full bear-rounded-lg bear-border bear-bg-gray-800",
               "bear-text-white placeholder:bear-text-gray-500",
               "bear-outline-none bear-transition-all bear-duration-200",
               "focus:bear-ring-2 focus:bear-ring-offset-2 focus:bear-ring-offset-gray-900",
-              c ? "bear-border-red-500 focus:bear-ring-red-500" : "bear-border-gray-600 focus:bear-border-bear-500 focus:bear-ring-bear-500",
-              o && "bear-opacity-50 bear-cursor-not-allowed",
+              o ? "Bear-Input__field--error bear-border-red-500 focus:bear-ring-red-500" : "bear-border-gray-600 focus:bear-border-bear-500 focus:bear-ring-bear-500",
+              n && "Bear-Input__field--disabled bear-opacity-50 bear-cursor-not-allowed",
               a && "bear-pl-10",
-              b && "bear-pr-10",
-              g[n],
-              f
+              t && "bear-pr-10",
+              _[p],
+              d
             ),
-            ...x
+            ...c
           }
         ),
-        b && /* @__PURE__ */ e("div", { className: "bear-absolute bear-right-3 bear-text-gray-400", children: b })
+        t && /* @__PURE__ */ e("div", { className: "Bear-Input__addon Bear-Input__addon--right bear-absolute bear-right-3 bear-text-gray-400", children: t })
       ] }),
-      (l || r) && /* @__PURE__ */ e(
+      (s || r) && /* @__PURE__ */ e(
         "p",
         {
-          className: t(
-            "bear-text-sm",
-            c ? "bear-text-red-500" : "bear-text-gray-400"
+          className: b(
+            "Bear-Input__helper bear-text-sm",
+            o ? "Bear-Input__helper--error bear-text-red-500" : "bear-text-gray-400"
           ),
-          children: r || l
+          children: r || s
         }
       )
     ] });
   }
 );
-p.displayName = "Input";
+x.displayName = "Input";
 export {
-  p as Input
+  x as Input
 };

package/dist/components/Mark/Mark.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const k=require("react/jsx-runtime"),b=require("react"),i={default:"bg-yellow-300 dark:bg-yellow-600/50 text-gray-900 dark:text-white",pink:"bg-pink-300 dark:bg-pink-600/50 text-gray-900 dark:text-white",blue:"bg-blue-300 dark:bg-blue-600/50 text-gray-900 dark:text-white",green:"bg-green-300 dark:bg-green-600/50 text-gray-900 dark:text-white",red:"bg-red-300 dark:bg-red-600/50 text-gray-900 dark:text-white"},e=b.forwardRef(({children:r,color:t="default",className:a="",...d},g)=>k.jsx("mark",{ref:g,className:`bear-mark px-0.5 rounded-sm ${i[t]} ${a}`.trim(),...d,children:r}));e.displayName="Mark";exports.Mark=e;

package/dist/components/Mark/Mark.d.ts

@@ -0,0 +1,2 @@
+import { MarkProps } from './Mark.types';
+export declare const Mark: import('react').ForwardRefExoticComponent<MarkProps & import('react').RefAttributes<HTMLElement>>;

package/dist/components/Mark/Mark.js

@@ -0,0 +1,26 @@
+import { jsx as g } from "react/jsx-runtime";
+import { forwardRef as k } from "react";
+const b = {
+  default: "bg-yellow-300 dark:bg-yellow-600/50 text-gray-900 dark:text-white",
+  pink: "bg-pink-300 dark:bg-pink-600/50 text-gray-900 dark:text-white",
+  blue: "bg-blue-300 dark:bg-blue-600/50 text-gray-900 dark:text-white",
+  green: "bg-green-300 dark:bg-green-600/50 text-gray-900 dark:text-white",
+  red: "bg-red-300 dark:bg-red-600/50 text-gray-900 dark:text-white"
+}, l = k(({
+  children: e,
+  color: r = "default",
+  className: t = "",
+  ...a
+}, d) => /* @__PURE__ */ g(
+  "mark",
+  {
+    ref: d,
+    className: `bear-mark px-0.5 rounded-sm ${b[r]} ${t}`.trim(),
+    ...a,
+    children: e
+  }
+));
+l.displayName = "Mark";
+export {
+  l as Mark
+};

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

@@ -0,0 +1,5 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export interface MarkProps extends HTMLAttributes<HTMLElement> {
+    children?: ReactNode;
+    color?: 'default' | 'pink' | 'blue' | 'green' | 'red';
+}

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

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

package/dist/components/Modal/Modal.cjs

@@ -1 +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;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("react"),C=require("react-dom"),o=require("../../utils/cn.cjs"),O=require("../Icon/icons/navigation.cjs"),a=require("./Modal.const.cjs"),v=_=>{const{isOpen:t,onClose:r,title:s,children:u,size:S="md",showCloseButton:n=!0,closeOnBackdrop:m=!0,closeOnEscape:d=!0,className:E,footer:c,testId:b,id:L}=_,l=i.useCallback(A=>{d&&A.key==="Escape"&&r()},[d,r]);if(i.useEffect(()=>(t&&(document.addEventListener("keydown",l),document.body.style.overflow="hidden"),()=>{document.removeEventListener("keydown",l),document.body.style.overflow=""}),[t,l]),!t)return null;const M=e.jsxs("div",{className:"Bear-Modal bear-fixed bear-inset-0 bear-z-50 bear-flex bear-items-center bear-justify-center",id:L,"data-testid":b,children:[e.jsx("div",{className:o.cn("Bear-Modal__backdrop",a.MODAL_BACKDROP_CLASSES),onClick:m?r:void 0,"aria-hidden":"true"}),e.jsxs("div",{role:"dialog","aria-modal":"true","aria-labelledby":s?"modal-title":void 0,className:o.cn("Bear-Modal__container",a.MODAL_CONTAINER_CLASSES,a.MODAL_SIZE_CLASSES[S],E),children:[(s||n)&&e.jsxs("div",{className:o.cn("Bear-Modal__header",a.MODAL_HEADER_CLASSES),children:[s&&e.jsx("h2",{id:"modal-title",className:o.cn("Bear-Modal__title",a.MODAL_TITLE_CLASSES),children:s}),n&&e.jsx("button",{onClick:r,className:o.cn("Bear-Modal__close",a.MODAL_CLOSE_CLASSES),"aria-label":"Close modal",children:e.jsx(O.CloseIcon,{className:"bear-w-5 bear-h-5"})})]}),e.jsx("div",{className:o.cn("Bear-Modal__body",a.MODAL_BODY_CLASSES),children:u}),c&&e.jsx("div",{className:o.cn("Bear-Modal__footer",a.MODAL_FOOTER_CLASSES),children:c})]})]});return C.createPortal(M,document.body)};exports.Modal=v;

package/dist/components/Modal/Modal.const.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r={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"},e="bear-absolute bear-inset-0 bear-bg-black/60 bear-backdrop-blur-sm bear-transition-opacity",a="bear-relative bear-w-full bear-bg-white dark:bear-bg-zinc-900 bear-rounded-xl bear-shadow-2xl bear-border bear-border-gray-200 dark:bear-border-zinc-700 bear-transform bear-transition-all bear-animate-in bear-fade-in bear-zoom-in-95",b="bear-flex bear-items-center bear-justify-between bear-px-6 bear-py-4 bear-border-b bear-border-gray-200 dark:bear-border-zinc-700",t="bear-text-lg bear-font-semibold bear-text-gray-900 dark:bear-text-white",S="bear-p-1 bear-rounded-lg bear-text-gray-400 dark:bear-text-zinc-500 hover:bear-text-gray-600 dark:hover:bear-text-white hover:bear-bg-gray-100 dark:hover:bear-bg-zinc-700 bear-transition-colors",o="bear-px-6 bear-py-4 bear-text-gray-600 dark:bear-text-gray-300",A="bear-flex bear-items-center bear-justify-end bear-gap-3 bear-px-6 bear-py-4 bear-border-t bear-border-gray-200 dark:bear-border-zinc-700";exports.MODAL_BACKDROP_CLASSES=e;exports.MODAL_BODY_CLASSES=o;exports.MODAL_CLOSE_CLASSES=S;exports.MODAL_CONTAINER_CLASSES=a;exports.MODAL_FOOTER_CLASSES=A;exports.MODAL_HEADER_CLASSES=b;exports.MODAL_SIZE_CLASSES=r;exports.MODAL_TITLE_CLASSES=t;

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

@@ -0,0 +1,10 @@
+import { ModalSize } from './Modal.types';
+export declare const MODAL_Z_INDEX = 50;
+export declare const MODAL_SIZE_CLASSES: Record<ModalSize, string>;
+export declare const MODAL_BACKDROP_CLASSES = "bear-absolute bear-inset-0 bear-bg-black/60 bear-backdrop-blur-sm bear-transition-opacity";
+export declare const MODAL_CONTAINER_CLASSES = "bear-relative bear-w-full bear-bg-white dark:bear-bg-zinc-900 bear-rounded-xl bear-shadow-2xl bear-border bear-border-gray-200 dark:bear-border-zinc-700 bear-transform bear-transition-all bear-animate-in bear-fade-in bear-zoom-in-95";
+export declare const MODAL_HEADER_CLASSES = "bear-flex bear-items-center bear-justify-between bear-px-6 bear-py-4 bear-border-b bear-border-gray-200 dark:bear-border-zinc-700";
+export declare const MODAL_TITLE_CLASSES = "bear-text-lg bear-font-semibold bear-text-gray-900 dark:bear-text-white";
+export declare const MODAL_CLOSE_CLASSES = "bear-p-1 bear-rounded-lg bear-text-gray-400 dark:bear-text-zinc-500 hover:bear-text-gray-600 dark:hover:bear-text-white hover:bear-bg-gray-100 dark:hover:bear-bg-zinc-700 bear-transition-colors";
+export declare const MODAL_BODY_CLASSES = "bear-px-6 bear-py-4 bear-text-gray-600 dark:bear-text-gray-300";
+export declare const MODAL_FOOTER_CLASSES = "bear-flex bear-items-center bear-justify-end bear-gap-3 bear-px-6 bear-py-4 bear-border-t bear-border-gray-200 dark:bear-border-zinc-700";

package/dist/components/Modal/Modal.const.js

@@ -0,0 +1,17 @@
+const r = {
+  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"
+}, e = "bear-absolute bear-inset-0 bear-bg-black/60 bear-backdrop-blur-sm bear-transition-opacity", a = "bear-relative bear-w-full bear-bg-white dark:bear-bg-zinc-900 bear-rounded-xl bear-shadow-2xl bear-border bear-border-gray-200 dark:bear-border-zinc-700 bear-transform bear-transition-all bear-animate-in bear-fade-in bear-zoom-in-95", b = "bear-flex bear-items-center bear-justify-between bear-px-6 bear-py-4 bear-border-b bear-border-gray-200 dark:bear-border-zinc-700", t = "bear-text-lg bear-font-semibold bear-text-gray-900 dark:bear-text-white", o = "bear-p-1 bear-rounded-lg bear-text-gray-400 dark:bear-text-zinc-500 hover:bear-text-gray-600 dark:hover:bear-text-white hover:bear-bg-gray-100 dark:hover:bear-bg-zinc-700 bear-transition-colors", n = "bear-px-6 bear-py-4 bear-text-gray-600 dark:bear-text-gray-300", d = "bear-flex bear-items-center bear-justify-end bear-gap-3 bear-px-6 bear-py-4 bear-border-t bear-border-gray-200 dark:bear-border-zinc-700";
+export {
+  e as MODAL_BACKDROP_CLASSES,
+  n as MODAL_BODY_CLASSES,
+  o as MODAL_CLOSE_CLASSES,
+  a as MODAL_CONTAINER_CLASSES,
+  d as MODAL_FOOTER_CLASSES,
+  b as MODAL_HEADER_CLASSES,
+  r as MODAL_SIZE_CLASSES,
+  t as MODAL_TITLE_CLASSES
+};

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

@@ -1,3 +1,14 @@
 import { FC } from 'react';
 import { ModalProps } from './Modal.types';
+/**
+ * Modal - Dialog component for displaying content on top of the main UI
+ *
+ * @example
+ * ```tsx
+ * <Modal isOpen={isOpen} onClose={handleClose} title="Modal Title">
+ *   Modal content goes here
+ * </Modal>
+ * ```
+ */
 export declare const Modal: FC<ModalProps>;
+export default Modal;

package/dist/components/Modal/Modal.js

@@ -1,85 +1,88 @@
-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();
+import { jsxs as d, jsx as a } from "react/jsx-runtime";
+import { useCallback as b, useEffect as f } from "react";
+import { createPortal as M } from "react-dom";
+import { cn as e } from "../../utils/cn.js";
+import { CloseIcon as O } from "../Icon/icons/navigation.js";
+import { MODAL_BACKDROP_CLASSES as h, MODAL_TITLE_CLASSES as p, MODAL_CLOSE_CLASSES as v, MODAL_HEADER_CLASSES as B, MODAL_BODY_CLASSES as N, MODAL_FOOTER_CLASSES as y, MODAL_SIZE_CLASSES as D, MODAL_CONTAINER_CLASSES as k } from "./Modal.const.js";
+const z = (c) => {
+  const {
+    isOpen: l,
+    onClose: o,
+    title: r,
+    children: m,
+    size: _ = "md",
+    showCloseButton: s = !0,
+    closeOnBackdrop: S = !0,
+    closeOnEscape: i = !0,
+    className: E,
+    footer: n,
+    testId: L,
+    id: u
+  } = c, t = b(
+    (C) => {
+      i && C.key === "Escape" && o();
     },
-    [d, r]
+    [i, o]
   );
-  if (y(() => (b && (document.addEventListener("keydown", t), document.body.style.overflow = "hidden"), () => {
+  if (f(() => (l && (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
+  }), [l, t]), !l) return null;
+  const A = /* @__PURE__ */ d(
+    "div",
+    {
+      className: "Bear-Modal bear-fixed bear-inset-0 bear-z-50 bear-flex bear-items-center bear-justify-center",
+      id: u,
+      "data-testid": L,
+      children: [
+        /* @__PURE__ */ a(
+          "div",
+          {
+            className: e("Bear-Modal__backdrop", h),
+            onClick: S ? o : void 0,
+            "aria-hidden": "true"
+          }
         ),
-        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
-              }
+        /* @__PURE__ */ d(
+          "div",
+          {
+            role: "dialog",
+            "aria-modal": "true",
+            "aria-labelledby": r ? "modal-title" : void 0,
+            className: e(
+              "Bear-Modal__container",
+              k,
+              D[_],
+              E
             ),
-            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);
+            children: [
+              (r || s) && /* @__PURE__ */ d("div", { className: e("Bear-Modal__header", B), children: [
+                r && /* @__PURE__ */ a(
+                  "h2",
+                  {
+                    id: "modal-title",
+                    className: e("Bear-Modal__title", p),
+                    children: r
+                  }
+                ),
+                s && /* @__PURE__ */ a(
+                  "button",
+                  {
+                    onClick: o,
+                    className: e("Bear-Modal__close", v),
+                    "aria-label": "Close modal",
+                    children: /* @__PURE__ */ a(O, { className: "bear-w-5 bear-h-5" })
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ a("div", { className: e("Bear-Modal__body", N), children: m }),
+              n && /* @__PURE__ */ a("div", { className: e("Bear-Modal__footer", y), children: n })
+            ]
+          }
+        )
+      ]
+    }
+  );
+  return M(A, document.body);
 };
 export {
   z as Modal

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

@@ -1,4 +1,5 @@
 import { ReactNode } from 'react';
+export type ModalSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';
 export interface ModalProps {
     /** Whether the modal is open */
     isOpen: boolean;
@@ -9,7 +10,7 @@ export interface ModalProps {
     /** Modal content */
     children: ReactNode;
     /** Modal size */
-    size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
+    size?: ModalSize;
     /** Whether to show close button */
     showCloseButton?: boolean;
     /** Whether clicking backdrop closes modal */
@@ -20,4 +21,8 @@ export interface ModalProps {
     className?: string;
     /** Footer content */
     footer?: ReactNode;
+    /** Test ID for testing purposes */
+    testId?: string;
+    /** Unique ID for accessibility */
+    id?: string;
 }

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

@@ -1,2 +1,3 @@
-export { Modal } from './Modal';
-export type { ModalProps } from './Modal.types';
+export { Modal, default } from './Modal';
+export * from './Modal.types';
+export * from './Modal.const';

package/dist/components/Rating/Rating.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("react"),y=require("../../utils/cn.cjs"),U={xs:14,sm:18,md:24,lg:30,xl:36},W="#fbbf24",Y="#d1d5db",Z=({value:j,defaultValue:F=0,max:u=5,size:L="md",readOnly:o=!1,disabled:r=!1,precision:S=1,color:m=W,emptyColor:h=Y,filledIcon:v,emptyIcon:k,halfIcon:g,highlightOnHover:l=!0,showLabel:C=!1,formatLabel:E,onChange:c,className:_,testId:A,...T})=>{const[$,q]=i.useState(F),[M,w]=i.useState(null),f=j!==void 0,z=f?j:$,p=M!==null&&!o&&!r?M:z,x=U[L],B=i.useCallback(t=>{o||r||(f||q(t),c==null||c(t))},[f,c,o,r]),G=i.useCallback(t=>{o||r||!l||w(t)},[o,r,l]),N=i.useCallback(()=>{o||r||!l||w(null)},[o,r,l]),b=i.useMemo(()=>({FilledStar:({size:s,color:a})=>e.jsx("svg",{width:s,height:s,viewBox:"0 0 24 24",fill:a,stroke:"none",children:e.jsx("polygon",{points:"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"})}),EmptyStar:({size:s,color:a})=>e.jsx("svg",{width:s,height:s,viewBox:"0 0 24 24",fill:"none",stroke:a,strokeWidth:"2",children:e.jsx("polygon",{points:"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"})}),HalfStar:({size:s,color:a,emptyColor:R})=>e.jsxs("svg",{width:s,height:s,viewBox:"0 0 24 24",children:[e.jsx("defs",{children:e.jsxs("linearGradient",{id:"halfGrad",children:[e.jsx("stop",{offset:"50%",stopColor:a}),e.jsx("stop",{offset:"50%",stopColor:R,stopOpacity:"0"})]})}),e.jsx("polygon",{points:"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2",fill:"url(#halfGrad)",stroke:R,strokeWidth:"2"})]})}),[]),P=t=>{const n=p-t,d=n>=1,s=S===.5&&n>=.5&&n<1,a=n<(S===.5?.5:1);return v&&d?v:g&&s?g:k&&a?k:d?e.jsx(b.FilledStar,{size:x,color:m}):s?e.jsx(b.HalfStar,{size:x,color:m,emptyColor:h}):e.jsx(b.EmptyStar,{size:x,color:h})},D=i.useMemo(()=>Array.from({length:u},(t,n)=>n+1),[u]),H=E?E(p):`${p} out of ${u}`;return e.jsxs("div",{className:y.cn("bear-inline-flex bear-items-center bear-gap-1",r&&"bear-opacity-50 bear-cursor-not-allowed",_),role:"radiogroup","aria-label":"Rating","data-testid":A,onMouseLeave:N,...T,children:[D.map(t=>e.jsx("button",{type:"button",role:"radio","aria-checked":z>=t,"aria-label":`${t} star${t>1?"s":""}`,className:y.cn("bear-p-0.5 bear-rounded bear-transition-transform bear-bg-transparent bear-border-none",!o&&!r&&"hover:bear-scale-110 bear-cursor-pointer",o&&"bear-cursor-default",r&&"bear-cursor-not-allowed"),onClick:()=>B(t),onMouseEnter:()=>G(t),disabled:r||o,children:P(t-1)},t)),C&&e.jsx("span",{className:"bear-ml-2 bear-text-sm bear-text-gray-600 dark:bear-text-gray-400",children:H})]})};exports.Rating=Z;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),c=require("react"),x=require("../../utils/cn.cjs"),n=require("./Rating.const.cjs"),y=({size:i,filled:R,half:_,color:S,emptyColor:a})=>t.jsx("svg",{width:i,height:i,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:_?t.jsxs(t.Fragment,{children:[t.jsx("defs",{children:t.jsxs("linearGradient",{id:`half-${i}`,children:[t.jsx("stop",{offset:"50%",stopColor:S}),t.jsx("stop",{offset:"50%",stopColor:a})]})}),t.jsx("path",{d:"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z",fill:`url(#half-${i})`,stroke:S,strokeWidth:"1"})]}):t.jsx("path",{d:"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z",fill:R?S:a,stroke:R?S:a,strokeWidth:"1"})}),V=c.forwardRef(({value:i,defaultValue:R=0,max:_=n.RATING_DEFAULT_MAX,size:S="md",onChange:a,allowHalf:u=!1,allowClear:M=!0,disabled:l=!1,readOnly:o=!1,filledIcon:T,emptyIcon:E,halfIcon:d,color:k=n.RATING_DEFAULT_COLOR,emptyColor:p=n.RATING_DEFAULT_EMPTY_COLOR,showValue:q=!1,labelFormatter:j,labels:h=n.RATING_DEFAULT_LABELS,testId:F,className:U,...w},X)=>{const[P,W]=c.useState(R),[m,v]=c.useState(null),L=i!==void 0?i:P,f=m!==null?m:L,N=n.RATING_SIZE_CLASSES[S],G=c.useCallback((e,s=!1)=>{if(l||o)return;const r=s&&u?e+.5:e+1,A=M&&r===L?0:r;W(A),a==null||a(A)},[l,o,u,M,L,a]),C=c.useCallback((e,s)=>{if(l||o)return;const r=s.currentTarget.getBoundingClientRect(),A=s.clientX-r.left<r.width/2;v(u&&A?e+.5:e+1)},[l,o,u]),I=c.useCallback(()=>{v(null)},[]),Y=e=>f>=e+1?"filled":f>=e+.5&&u?"half":"empty",B=c.useMemo(()=>{if(j)return j(f);const e=Math.ceil(f)-1;return h[e]||""},[f,j,h]),$=c.useMemo(()=>Array.from({length:_}).map((e,s)=>{const r=Y(s),A=x.cn(n.RATING_STAR_BASE_CLASSES,l&&n.RATING_STAR_DISABLED_CLASSES,o&&n.RATING_STAR_READONLY_CLASSES,!l&&!o&&"hover:scale-110"),z=()=>r==="filled"&&T?T:r==="half"&&d?d:r==="empty"&&E?E:t.jsx(y,{size:N.icon,filled:r==="filled",half:r==="half",color:k,emptyColor:p});return t.jsx("span",{className:A,onClick:g=>{const D=g.currentTarget.getBoundingClientRect(),Z=g.clientX-D.left<D.width/2;G(s,Z)},onMouseMove:g=>C(s,g),onMouseLeave:I,role:"radio","aria-checked":L>=s+1,"aria-label":h[s],children:z()},s)}),[_,f,l,o,T,E,d,N,k,p,G,C,I,L,h,u]);return t.jsxs("div",{ref:X,className:x.cn(n.RATING_BASE_CLASSES,U),role:"radiogroup","aria-label":"Rating","data-testid":F,...w,children:[$,q&&t.jsxs("span",{className:x.cn("Bear-Rating__value ml-2 text-gray-600 dark:text-gray-400",N.text),children:[f.toFixed(u?1:0),B&&t.jsxs("span",{className:"ml-1 text-gray-400 dark:text-gray-500",children:["(",B,")"]})]})]})});V.displayName="Rating";exports.Rating=V;

package/dist/components/Rating/Rating.const.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const A="Bear-Rating inline-flex items-center gap-1",S={sm:{icon:16,text:"text-xs"},md:{icon:20,text:"text-sm"},lg:{icon:28,text:"text-base"}},_="Bear-Rating__star cursor-pointer transition-all duration-150",t="cursor-not-allowed opacity-50",T="cursor-default",E="#fbbf24",R="#d1d5db",e=5,L=["Terrible","Bad","Average","Good","Excellent"];exports.RATING_BASE_CLASSES=A;exports.RATING_DEFAULT_COLOR=E;exports.RATING_DEFAULT_EMPTY_COLOR=R;exports.RATING_DEFAULT_LABELS=L;exports.RATING_DEFAULT_MAX=e;exports.RATING_SIZE_CLASSES=S;exports.RATING_STAR_BASE_CLASSES=_;exports.RATING_STAR_DISABLED_CLASSES=t;exports.RATING_STAR_READONLY_CLASSES=T;

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

@@ -0,0 +1,14 @@
+import { RatingSize } from './Rating.types';
+export declare const RATING_BASE_CLASSES = "Bear-Rating inline-flex items-center gap-1";
+export declare const RATING_SIZE_CLASSES: Record<RatingSize, {
+    icon: number;
+    text: string;
+}>;
+export declare const RATING_STAR_BASE_CLASSES = "Bear-Rating__star cursor-pointer transition-all duration-150";
+export declare const RATING_STAR_DISABLED_CLASSES = "cursor-not-allowed opacity-50";
+export declare const RATING_STAR_READONLY_CLASSES = "cursor-default";
+export declare const RATING_DEFAULT_COLOR = "#fbbf24";
+export declare const RATING_DEFAULT_EMPTY_COLOR = "#d1d5db";
+export declare const RATING_DEFAULT_EMPTY_COLOR_DARK = "#52525b";
+export declare const RATING_DEFAULT_MAX = 5;
+export declare const RATING_DEFAULT_LABELS: string[];

package/dist/components/Rating/Rating.const.js

@@ -0,0 +1,22 @@
+const t = "Bear-Rating inline-flex items-center gap-1", A = {
+  sm: { icon: 16, text: "text-xs" },
+  md: { icon: 20, text: "text-sm" },
+  lg: { icon: 28, text: "text-base" }
+}, e = "Bear-Rating__star cursor-pointer transition-all duration-150", o = "cursor-not-allowed opacity-50", _ = "cursor-default", n = "#fbbf24", S = "#d1d5db", s = 5, c = [
+  "Terrible",
+  "Bad",
+  "Average",
+  "Good",
+  "Excellent"
+];
+export {
+  t as RATING_BASE_CLASSES,
+  n as RATING_DEFAULT_COLOR,
+  S as RATING_DEFAULT_EMPTY_COLOR,
+  c as RATING_DEFAULT_LABELS,
+  s as RATING_DEFAULT_MAX,
+  A as RATING_SIZE_CLASSES,
+  e as RATING_STAR_BASE_CLASSES,
+  o as RATING_STAR_DISABLED_CLASSES,
+  _ as RATING_STAR_READONLY_CLASSES
+};

package/dist/components/Rating/Rating.d.ts

@@ -1,19 +1,14 @@
-import { FC } from 'react';
 import { RatingProps } from './Rating.types';
 /**
- * Rating component for displaying and capturing user ratings
+ * Rating - Star rating component
  *
  * @example
  * ```tsx
- * // Basic rating
- * <Rating value={3} onChange={(v) => setRating(v)} />
+ * const [rating, setRating] = useState(3);
  *
- * // Read-only rating with half stars
- * <Rating value={3.5} readOnly precision={0.5} />
- *
- * // Custom size and color
- * <Rating value={4} size="lg" color="#ec4899" />
+ * <Rating value={rating} onChange={setRating} />
+ * <Rating value={3.5} allowHalf readOnly />
  * ```
  */
-export declare const Rating: FC<RatingProps>;
+export declare const Rating: import('react').ForwardRefExoticComponent<RatingProps & import('react').RefAttributes<HTMLDivElement>>;
 export default Rating;