@forgedevstack/bear 1.0.5 → 1.0.6

package/dist/components/Form/Form.const.js

@@ -0,0 +1,27 @@
+const e = {
+  required: "This field is required",
+  email: "Please enter a valid email address",
+  pattern: "Invalid format"
+}, r = {
+  fields: {},
+  isSubmitting: !1,
+  isValid: !0,
+  isSubmitted: !1,
+  errors: {}
+}, a = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i, l = {
+  vertical: "Bear-Form--vertical bear-flex bear-flex-col bear-gap-4",
+  horizontal: "Bear-Form--horizontal bear-flex bear-flex-col bear-gap-4",
+  inline: "Bear-Form--inline bear-flex bear-flex-wrap bear-items-end bear-gap-4"
+}, i = {
+  vertical: "Bear-FormItem--vertical bear-flex bear-flex-col bear-gap-1.5",
+  horizontal: "Bear-FormItem--horizontal bear-flex bear-flex-row bear-items-start bear-gap-4",
+  inline: "Bear-FormItem--inline bear-flex bear-flex-col bear-gap-1"
+}, t = "bear-w-32 bear-shrink-0";
+export {
+  a as EMAIL_REGEX,
+  e as FORM_DEFAULT_TRANSLATIONS,
+  r as FORM_INITIAL_STATE,
+  i as FORM_ITEM_LAYOUT_CLASSES,
+  t as FORM_LABEL_WIDTH_HORIZONTAL,
+  l as FORM_LAYOUT_CLASSES
+};

package/dist/components/Form/Form.context.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react"),e=t.createContext(null),n=()=>{const o=t.useContext(e);if(!o)throw new Error("useFormContext must be used within a Form component");return o},r=()=>t.useContext(e);exports.FormContext=e;exports.useFormContext=n;exports.useFormContextSafe=r;

package/dist/components/Form/Form.context.d.ts

@@ -0,0 +1,13 @@
+import { FormContextValue } from './Form.types';
+/**
+ * Form context
+ */
+export declare const FormContext: import('react').Context<FormContextValue | null>;
+/**
+ * Hook to access form context
+ */
+export declare const useFormContext: () => FormContextValue;
+/**
+ * Hook to safely access form context (returns null if not in Form)
+ */
+export declare const useFormContextSafe: () => FormContextValue | null;

package/dist/components/Form/Form.context.js

@@ -0,0 +1,12 @@
+import { createContext as n, useContext as o } from "react";
+const e = n(null), s = () => {
+  const t = o(e);
+  if (!t)
+    throw new Error("useFormContext must be used within a Form component");
+  return t;
+}, m = () => o(e);
+export {
+  e as FormContext,
+  s as useFormContext,
+  m as useFormContextSafe
+};

package/dist/components/Form/Form.d.ts

@@ -0,0 +1,18 @@
+import { FC } from 'react';
+import { FormProps, FormItemProps } from './Form.types';
+/**
+ * Form - Form management component with validation
+ *
+ * @example
+ * ```tsx
+ * <Form onSubmit={handleSubmit} initialValues={{ email: '' }}>
+ *   <Form.Item name="email" label="Email" rules={{ required: true, email: true }}>
+ *     <Input />
+ *   </Form.Item>
+ *   <Button type="submit">Submit</Button>
+ * </Form>
+ * ```
+ */
+export declare const Form: FC<FormProps> & {
+    Item: FC<FormItemProps>;
+};

package/dist/components/Form/Form.js

@@ -0,0 +1,230 @@
+import { jsx as g, jsxs as B } from "react/jsx-runtime";
+import { useState as M, useRef as V, useCallback as u, useMemo as q, isValidElement as z, cloneElement as k } from "react";
+import { cn as E } from "../../utils/cn.js";
+import { FormContext as D, useFormContext as H } from "./Form.context.js";
+import { validateFieldValue as P } from "./Form.utils.js";
+import { FORM_INITIAL_STATE as w, FORM_LAYOUT_CLASSES as U, FORM_LABEL_WIDTH_HORIZONTAL as Y, FORM_ITEM_LAYOUT_CLASSES as p } from "./Form.const.js";
+const W = ({
+  children: I,
+  initialValues: n = {},
+  onSubmit: x,
+  onError: l,
+  layout: F = "vertical",
+  validateOnChange: m = !0,
+  validateOnBlur: h = !0,
+  className: N,
+  testId: S,
+  ...v
+}) => {
+  const [o, i] = M(() => ({
+    ...w,
+    fields: Object.fromEntries(
+      Object.entries(n).map(([e, t]) => [
+        e,
+        { value: t, error: void 0, touched: !1, validating: !1, dirty: !1 }
+      ])
+    )
+  })), a = V({}), b = u((e, t) => {
+    i((r) => ({
+      ...r,
+      fields: {
+        ...r.fields,
+        [e]: {
+          ...r.fields[e],
+          value: t,
+          dirty: !0
+        }
+      }
+    }));
+  }, []), c = u((e) => {
+    var t;
+    return (t = o.fields[e]) == null ? void 0 : t.value;
+  }, [o.fields]), y = u((e, t) => {
+    i((r) => ({
+      ...r,
+      fields: {
+        ...r.fields,
+        [e]: {
+          ...r.fields[e],
+          error: t
+        }
+      },
+      errors: { ...r.errors, [e]: t }
+    }));
+  }, []), A = u((e) => {
+    i((t) => {
+      const r = { ...t.errors };
+      return delete r[e], {
+        ...t,
+        fields: {
+          ...t.fields,
+          [e]: {
+            ...t.fields[e],
+            error: void 0
+          }
+        },
+        errors: r
+      };
+    });
+  }, []), _ = u(async (e) => {
+    var f;
+    const t = a.current[e];
+    if (!t) return !0;
+    i((d) => ({
+      ...d,
+      fields: {
+        ...d.fields,
+        [e]: {
+          ...d.fields[e],
+          validating: !0
+        }
+      }
+    }));
+    const r = (f = o.fields[e]) == null ? void 0 : f.value, s = await P(r, t);
+    return i((d) => ({
+      ...d,
+      fields: {
+        ...d.fields,
+        [e]: {
+          ...d.fields[e],
+          error: s ?? void 0,
+          validating: !1
+        }
+      },
+      errors: s ? { ...d.errors, [e]: s } : (() => {
+        const T = { ...d.errors };
+        return delete T[e], T;
+      })()
+    })), !s;
+  }, [o.fields]), O = u(async () => {
+    const e = Object.keys(a.current);
+    return (await Promise.all(e.map(_))).every(Boolean);
+  }, [_]), L = u((e) => {
+    i({
+      ...w,
+      fields: Object.fromEntries(
+        Object.entries(e ?? n).map(([r, s]) => [
+          r,
+          { value: s, error: void 0, touched: !1, validating: !1, dirty: !1 }
+        ])
+      )
+    });
+  }, [n]), R = u((e, t) => {
+    var r;
+    return t && (a.current[e] = t), o.fields[e] || i((s) => ({
+      ...s,
+      fields: {
+        ...s.fields,
+        [e]: {
+          value: n[e] ?? "",
+          error: void 0,
+          touched: !1,
+          validating: !1,
+          dirty: !1
+        }
+      }
+    })), {
+      name: e,
+      value: ((r = o.fields[e]) == null ? void 0 : r.value) ?? n[e] ?? "",
+      onChange: (s) => {
+        b(e, s), m && t && setTimeout(() => _(e), 0);
+      },
+      onBlur: () => {
+        i((s) => ({
+          ...s,
+          fields: {
+            ...s.fields,
+            [e]: {
+              ...s.fields[e],
+              touched: !0
+            }
+          }
+        })), h && t && _(e);
+      }
+    };
+  }, [o.fields, n, b, _, m, h]), j = u(
+    (e) => async (t) => {
+      if (t.preventDefault(), i((f) => ({ ...f, isSubmitting: !0, isSubmitted: !0 })), !await O()) {
+        i((f) => ({ ...f, isSubmitting: !1 })), l == null || l(o.errors);
+        return;
+      }
+      const s = Object.fromEntries(
+        Object.entries(o.fields).map(([f, d]) => [f, d.value])
+      );
+      try {
+        await e(s);
+      } finally {
+        i((f) => ({ ...f, isSubmitting: !1 }));
+      }
+    },
+    [O, o.fields, o.errors, l]
+  ), C = q(
+    () => ({
+      state: o,
+      register: R,
+      setValue: b,
+      getValue: c,
+      setError: y,
+      clearError: A,
+      validateField: _,
+      validateForm: O,
+      reset: L,
+      handleSubmit: j,
+      layout: F
+    }),
+    [o, R, b, c, y, A, _, O, L, j, F]
+  );
+  return /* @__PURE__ */ g(D.Provider, { value: C, children: /* @__PURE__ */ g(
+    "form",
+    {
+      className: E("Bear-Form", U[F], N),
+      onSubmit: x ? j(x) : void 0,
+      "data-testid": S,
+      ...v,
+      children: I
+    }
+  ) });
+}, Z = ({
+  name: I,
+  label: n,
+  required: x,
+  rules: l,
+  helperText: F,
+  children: m,
+  className: h
+}) => {
+  const { register: N, state: S, layout: v } = H(), o = {
+    ...l,
+    required: x ?? (l == null ? void 0 : l.required)
+  }, i = N(I, o), a = S.fields[I], b = (a == null ? void 0 : a.touched) && (a == null ? void 0 : a.error);
+  return /* @__PURE__ */ B("div", { className: E("Bear-FormItem", p[v], h), children: [
+    n && /* @__PURE__ */ B(
+      "label",
+      {
+        className: E(
+          "Bear-FormItem__label bear-text-sm bear-font-medium bear-text-zinc-300",
+          v === "horizontal" && Y
+        ),
+        children: [
+          n,
+          (x || (l == null ? void 0 : l.required)) && /* @__PURE__ */ g("span", { className: "Bear-FormItem__required bear-text-red-500 bear-ml-0.5", children: "*" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ B("div", { className: "Bear-FormItem__content bear-flex-1", children: [
+      /* @__PURE__ */ g("div", { className: "Bear-FormItem__control", children: typeof m == "function" ? m(i) : z(m) ? k(m, {
+        ...i,
+        onChange: (c) => {
+          const y = c && typeof c == "object" && "target" in c && c.target && typeof c.target.value < "u" ? c.target.value : c;
+          i.onChange(y);
+        }
+      }) : m }),
+      b && /* @__PURE__ */ g("p", { className: "Bear-FormItem__error bear-mt-1 bear-text-xs bear-text-red-400", children: a.error }),
+      F && !b && /* @__PURE__ */ g("p", { className: "Bear-FormItem__helper bear-mt-1 bear-text-xs bear-text-zinc-500", children: F })
+    ] })
+  ] });
+};
+W.Item = Z;
+export {
+  W as Form
+};

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

@@ -0,0 +1,166 @@
+import { ReactNode, FormHTMLAttributes } from 'react';
+/**
+ * Validation rule types
+ */
+export type ValidationRule = {
+    /** Required field validation */
+    required?: boolean | string;
+    /** Minimum length validation */
+    minLength?: {
+        value: number;
+        message: string;
+    };
+    /** Maximum length validation */
+    maxLength?: {
+        value: number;
+        message: string;
+    };
+    /** Minimum value validation (for numbers) */
+    min?: {
+        value: number;
+        message: string;
+    };
+    /** Maximum value validation (for numbers) */
+    max?: {
+        value: number;
+        message: string;
+    };
+    /** Pattern validation (regex) */
+    pattern?: {
+        value: RegExp;
+        message: string;
+    };
+    /** Custom validation function */
+    validate?: (value: unknown) => boolean | string | Promise<boolean | string>;
+    /** Email validation */
+    email?: boolean | string;
+};
+/**
+ * Form field state
+ */
+export interface FormFieldState {
+    /** Current value */
+    value: unknown;
+    /** Error message if validation failed */
+    error?: string;
+    /** Whether field has been touched */
+    touched: boolean;
+    /** Whether field is currently being validated */
+    validating: boolean;
+    /** Whether field is dirty (value changed) */
+    dirty: boolean;
+}
+/**
+ * Form state
+ */
+export interface FormState {
+    /** Field states by name */
+    fields: Record<string, FormFieldState>;
+    /** Whether form is currently submitting */
+    isSubmitting: boolean;
+    /** Whether form is valid */
+    isValid: boolean;
+    /** Whether form has been submitted */
+    isSubmitted: boolean;
+    /** Form-level errors */
+    errors: Record<string, string>;
+}
+/**
+ * Form context value
+ */
+export interface FormContextValue {
+    /** Current form state */
+    state: FormState;
+    /** Register a field */
+    register: (name: string, rules?: ValidationRule) => {
+        name: string;
+        value: unknown;
+        onChange: (value: unknown) => void;
+        onBlur: () => void;
+    };
+    /** Set field value */
+    setValue: (name: string, value: unknown) => void;
+    /** Get field value */
+    getValue: (name: string) => unknown;
+    /** Set field error */
+    setError: (name: string, error: string) => void;
+    /** Clear field error */
+    clearError: (name: string) => void;
+    /** Validate a field */
+    validateField: (name: string) => Promise<boolean>;
+    /** Validate all fields */
+    validateForm: () => Promise<boolean>;
+    /** Reset form */
+    reset: (values?: Record<string, unknown>) => void;
+    /** Handle form submission */
+    handleSubmit: (onSubmit: (data: Record<string, unknown>) => void | Promise<void>) => (e: React.FormEvent) => void;
+    /** Form layout */
+    layout: FormLayout;
+}
+/**
+ * Form layout options
+ */
+export type FormLayout = 'vertical' | 'horizontal' | 'inline';
+/**
+ * Form component props
+ */
+export interface FormProps extends Omit<FormHTMLAttributes<HTMLFormElement>, 'onSubmit' | 'onError'> {
+    /** Child elements */
+    children: ReactNode;
+    /** Initial form values */
+    initialValues?: Record<string, unknown>;
+    /** Form submission handler */
+    onSubmit?: (data: Record<string, unknown>) => void | Promise<void>;
+    /** Form validation error handler */
+    onError?: (errors: Record<string, string>) => void;
+    /** Form layout */
+    layout?: FormLayout;
+    /** Whether to validate on change */
+    validateOnChange?: boolean;
+    /** Whether to validate on blur */
+    validateOnBlur?: boolean;
+    /** Custom class name */
+    className?: string;
+    /** Test ID */
+    testId?: string;
+}
+/**
+ * Field props from register
+ */
+export interface FormFieldProps {
+    name: string;
+    value: unknown;
+    onChange: (value: unknown) => void;
+    onBlur: () => void;
+}
+/**
+ * Form.Item props
+ */
+export interface FormItemProps {
+    /** Field name */
+    name: string;
+    /** Field label */
+    label?: string;
+    /** Required indicator */
+    required?: boolean;
+    /** Validation rules */
+    rules?: ValidationRule;
+    /** Helper text */
+    helperText?: string;
+    /** Children (form control or render prop) */
+    children: ReactNode | ((field: FormFieldProps) => ReactNode);
+    /** Custom class name */
+    className?: string;
+}
+/**
+ * Form translations
+ */
+export interface FormTranslations {
+    required: string;
+    email: string;
+    minLength: string;
+    maxLength: string;
+    min: string;
+    max: string;
+    pattern: string;
+}

package/dist/components/Form/Form.utils.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const m=require("./Form.const.cjs"),r=async(i,t)=>{const n=typeof i=="string"?i:String(i??""),e=typeof i=="number"?i:Number(i);if(t.required&&(i==null||n.trim()===""))return typeof t.required=="string"?t.required:m.FORM_DEFAULT_TRANSLATIONS.required;if(i==null||n==="")return null;if(t.email&&!m.EMAIL_REGEX.test(n))return typeof t.email=="string"?t.email:m.FORM_DEFAULT_TRANSLATIONS.email;if(t.minLength&&n.length<t.minLength.value)return t.minLength.message;if(t.maxLength&&n.length>t.maxLength.value)return t.maxLength.message;if(t.min&&!isNaN(e)&&e<t.min.value)return t.min.message;if(t.max&&!isNaN(e)&&e>t.max.value)return t.max.message;if(t.pattern&&!t.pattern.value.test(n))return t.pattern.message;if(t.validate){const a=await t.validate(i);if(typeof a=="string")return a;if(a===!1)return m.FORM_DEFAULT_TRANSLATIONS.pattern}return null};exports.validateFieldValue=r;

package/dist/components/Form/Form.utils.d.ts

@@ -0,0 +1,17 @@
+import { ValidationRule } from './Form.types';
+/**
+ * Validate a single field value against rules
+ */
+export declare const validateFieldValue: (value: unknown, rules: ValidationRule) => Promise<string | null>;
+/**
+ * Deep clone an object
+ */
+export declare const deepClone: <T>(obj: T) => T;
+/**
+ * Get nested value from object by path
+ */
+export declare const getNestedValue: (obj: Record<string, unknown>, path: string) => unknown;
+/**
+ * Set nested value in object by path
+ */
+export declare const setNestedValue: (obj: Record<string, unknown>, path: string, value: unknown) => Record<string, unknown>;

package/dist/components/Form/Form.utils.js

@@ -0,0 +1,31 @@
+import { FORM_DEFAULT_TRANSLATIONS as m, EMAIL_REGEX as f } from "./Form.const.js";
+const g = async (i, t) => {
+  const n = typeof i == "string" ? i : String(i ?? ""), e = typeof i == "number" ? i : Number(i);
+  if (t.required && (i == null || n.trim() === ""))
+    return typeof t.required == "string" ? t.required : m.required;
+  if (i == null || n === "")
+    return null;
+  if (t.email && !f.test(n))
+    return typeof t.email == "string" ? t.email : m.email;
+  if (t.minLength && n.length < t.minLength.value)
+    return t.minLength.message;
+  if (t.maxLength && n.length > t.maxLength.value)
+    return t.maxLength.message;
+  if (t.min && !isNaN(e) && e < t.min.value)
+    return t.min.message;
+  if (t.max && !isNaN(e) && e > t.max.value)
+    return t.max.message;
+  if (t.pattern && !t.pattern.value.test(n))
+    return t.pattern.message;
+  if (t.validate) {
+    const a = await t.validate(i);
+    if (typeof a == "string")
+      return a;
+    if (a === !1)
+      return m.pattern;
+  }
+  return null;
+};
+export {
+  g as validateFieldValue
+};

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

@@ -0,0 +1,3 @@
+export { Form } from './Form';
+export { useFormContext, useFormContextSafe } from './Form.context';
+export type { FormProps, FormItemProps, FormState, FormFieldState, FormContextValue, FormLayout, ValidationRule, FormTranslations, } from './Form.types';

package/dist/components/NotificationCenter/NotificationCenter.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),n=require("react"),q=require("react-dom"),c=require("../../utils/cn.cjs"),m=require("./NotificationCenter.const.cjs"),F=require("./NotificationCenter.utils.cjs"),W=({notification:r,onRead:d,onDismiss:g,onClick:b,translations:v})=>{const p=()=>{r.read||d==null||d(r.id),b==null||b(r)};return e.jsxs("div",{onClick:p,className:c.cn("Bear-NotificationCenter__item bear-flex bear-gap-3 bear-p-3 bear-border-b bear-border-gray-200 dark:bear-border-zinc-700 last:bear-border-b-0 bear-cursor-pointer bear-transition-colors hover:bear-bg-gray-100 dark:hover:bear-bg-zinc-700/50",!r.read&&"bear-bg-gray-50 dark:bear-bg-zinc-800/50"),children:[e.jsx("div",{className:"Bear-NotificationCenter__item-icon bear-shrink-0",children:r.avatar?e.jsx("img",{src:r.avatar,alt:"",className:"bear-w-10 bear-h-10 bear-rounded-full bear-object-cover"}):r.icon?e.jsx("div",{className:c.cn("bear-w-10 bear-h-10 bear-rounded-full bear-flex bear-items-center bear-justify-center",m.NOTIFICATION_TYPE_COLORS[r.type]),children:r.icon}):e.jsxs("div",{className:c.cn("bear-w-10 bear-h-10 bear-rounded-full bear-flex bear-items-center bear-justify-center",m.NOTIFICATION_TYPE_COLORS[r.type]),children:[r.type==="success"&&e.jsx("svg",{className:"bear-w-5 bear-h-5",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",children:e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M5 13l4 4L19 7"})}),r.type==="error"&&e.jsx("svg",{className:"bear-w-5 bear-h-5",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",children:e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M6 18L18 6M6 6l12 12"})}),r.type==="warning"&&e.jsx("svg",{className:"bear-w-5 bear-h-5",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",children:e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"})}),r.type==="info"&&e.jsx("svg",{className:"bear-w-5 bear-h-5",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",children:e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"})})]})}),e.jsxs("div",{className:"Bear-NotificationCenter__item-content bear-flex-1 bear-min-w-0",children:[e.jsxs("div",{className:"bear-flex bear-items-start bear-justify-between bear-gap-2",children:[e.jsx("p",{className:c.cn("Bear-NotificationCenter__item-title bear-text-sm bear-font-medium bear-truncate",r.read?"bear-text-gray-600 dark:bear-text-zinc-300":"bear-text-gray-900 dark:bear-text-white"),children:r.title}),!r.read&&e.jsx("span",{className:"Bear-NotificationCenter__item-badge bear-w-2 bear-h-2 bear-rounded-full bear-bg-pink-500 bear-shrink-0 bear-mt-1.5"})]}),r.description&&e.jsx("p",{className:"Bear-NotificationCenter__item-description bear-text-xs bear-text-gray-500 dark:bear-text-zinc-400 bear-mt-0.5 bear-line-clamp-2",children:r.description}),e.jsx("p",{className:"Bear-NotificationCenter__item-time bear-text-xs bear-text-gray-400 dark:bear-text-zinc-500 bear-mt-1",children:F.formatRelativeTime(r.timestamp,v)}),r.actions&&r.actions.length>0&&e.jsx("div",{className:"Bear-NotificationCenter__item-actions bear-flex bear-gap-2 bear-mt-2",children:r.actions.map((a,j)=>e.jsx("button",{type:"button",onClick:x=>{x.stopPropagation(),a.onClick()},className:c.cn("bear-px-2 bear-py-1 bear-text-xs bear-rounded bear-transition-colors",a.variant==="primary"&&"bear-bg-pink-500 bear-text-white hover:bear-bg-pink-600",a.variant==="secondary"&&"bear-bg-gray-200 dark:bear-bg-zinc-600 bear-text-gray-900 dark:bear-text-white hover:bear-bg-gray-300 dark:hover:bear-bg-zinc-500",a.variant==="danger"&&"bear-bg-red-500 bear-text-white hover:bear-bg-red-600",!a.variant&&"bear-bg-gray-100 dark:bear-bg-zinc-700 bear-text-gray-700 dark:bear-text-zinc-300 hover:bear-bg-gray-200 dark:hover:bear-bg-zinc-600"),children:a.label},j))})]}),g&&e.jsx("button",{type:"button",onClick:a=>{a.stopPropagation(),g(r.id)},className:"Bear-NotificationCenter__item-dismiss bear-p-1 bear-rounded bear-text-gray-500 dark:bear-text-zinc-500 hover:bear-text-gray-700 dark:hover:bear-text-zinc-300 hover:bear-bg-gray-200 dark:hover:bear-bg-zinc-700 bear-transition-colors bear-shrink-0",children:e.jsx("svg",{className:"bear-w-4 bear-h-4",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",children:e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M6 18L18 6M6 6l12 12"})})})]})},D=({notifications:r,onNotificationClick:d,onMarkAsRead:g,onMarkAllAsRead:b,onDismiss:v,onClearAll:p,maxVisible:a=m.NOTIFICATION_CENTER_MAX_VISIBLE,groupByCategory:j=!1,position:x="top-right",trigger:C,open:I,onOpenChange:T,className:O,testId:E,translations:_,icon:M})=>{const[A,R]=n.useState(!1),[w,S]=n.useState({top:0,left:0}),[f,P]=n.useState(!1),B=n.useRef(null),y=n.useRef(null),h=I??A,N=T??R,o=n.useMemo(()=>({...m.NOTIFICATION_CENTER_DEFAULT_TRANSLATIONS,..._}),[_]),i=n.useMemo(()=>r.filter(t=>!t.read).length,[r]),z=n.useMemo(()=>f?r:r.slice(0,a),[r,a,f]);n.useEffect(()=>{if(h&&y.current){const t=y.current.getBoundingClientRect(),k=window.scrollY||document.documentElement.scrollTop,s=window.scrollX||document.documentElement.scrollLeft;let u=t.bottom+k+8,l=t.left+s;x.includes("left")?l=t.left+s:l=t.right+s-360,x.includes("bottom")&&(u=t.top+k-8),S({top:u,left:Math.max(8,l)})}},[h,x]),n.useEffect(()=>{const t=k=>{var u,l;const s=k.target;(u=B.current)!=null&&u.contains(s)||(l=s.closest)!=null&&l.call(s,"[data-bear-notification-center]")||N(!1)};return document.addEventListener("mousedown",t),()=>document.removeEventListener("mousedown",t)},[N]);const L=n.useCallback(()=>{N(!h)},[h,N]);return e.jsxs("div",{ref:B,className:c.cn("Bear-NotificationCenter bear-relative bear-inline-block",O),"data-testid":E,children:[C?e.jsx("div",{onClick:L,children:C}):e.jsxs("button",{ref:y,type:"button",onClick:L,className:"Bear-NotificationCenter__trigger bear-relative bear-p-2 bear-rounded-lg bear-text-gray-500 dark:bear-text-zinc-400 hover:bear-text-gray-900 dark:hover:bear-text-white hover:bear-bg-gray-100 dark:hover:bear-bg-zinc-800 bear-transition-colors",children:[M??e.jsx("svg",{className:"bear-w-6 bear-h-6",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",children:e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"})}),i>0&&e.jsx("span",{className:"Bear-NotificationCenter__badge bear-absolute bear-top-0 bear-right-0 bear-w-5 bear-h-5 bear-flex bear-items-center bear-justify-center bear-text-xs bear-font-medium bear-text-white bear-bg-pink-500 bear-rounded-full",children:i>99?"99+":i})]}),h&&typeof document<"u"&&q.createPortal(e.jsxs("div",{"data-bear-notification-center":!0,className:"Bear-NotificationCenter__dropdown bear-fixed bear-w-[360px] bear-bg-white dark:bear-bg-zinc-800 bear-border bear-border-gray-200 dark:bear-border-zinc-700 bear-rounded-lg bear-shadow-xl bear-overflow-hidden",style:{top:w.top,left:w.left,zIndex:m.NOTIFICATION_CENTER_Z_INDEX},children:[e.jsxs("div",{className:"Bear-NotificationCenter__header bear-flex bear-items-center bear-justify-between bear-px-4 bear-py-3 bear-border-b bear-border-gray-200 dark:bear-border-zinc-700",children:[e.jsxs("h3",{className:"Bear-NotificationCenter__title bear-text-sm bear-font-semibold bear-text-gray-900 dark:bear-text-white",children:[o.title,i>0&&e.jsxs("span",{className:"bear-ml-2 bear-text-xs bear-font-normal bear-text-gray-500 dark:bear-text-zinc-400",children:["(",i," ",o.new.toLowerCase(),")"]})]}),e.jsxs("div",{className:"bear-flex bear-gap-2",children:[b&&i>0&&e.jsx("button",{type:"button",onClick:b,className:"Bear-NotificationCenter__mark-all bear-text-xs bear-text-pink-400 hover:bear-text-pink-300 bear-transition-colors",children:o.markAllRead}),p&&r.length>0&&e.jsx("button",{type:"button",onClick:p,className:"Bear-NotificationCenter__clear-all bear-text-xs bear-text-gray-500 dark:bear-text-zinc-400 hover:bear-text-gray-700 dark:hover:bear-text-zinc-300 bear-transition-colors",children:o.clearAll})]})]}),e.jsx("div",{className:"Bear-NotificationCenter__list bear-max-h-[400px] bear-overflow-y-auto",children:z.length===0?e.jsx("div",{className:"Bear-NotificationCenter__empty bear-py-8 bear-text-center bear-text-sm bear-text-gray-500 dark:bear-text-zinc-500",children:o.noNotifications}):z.map(t=>e.jsx(W,{notification:t,onRead:g,onDismiss:v,onClick:d,translations:o},t.id))}),!f&&r.length>a&&e.jsx("div",{className:"Bear-NotificationCenter__footer bear-border-t bear-border-gray-200 dark:bear-border-zinc-700",children:e.jsxs("button",{type:"button",onClick:()=>P(!0),className:"bear-w-full bear-py-2 bear-text-sm bear-text-pink-500 dark:bear-text-pink-400 hover:bear-bg-gray-100 dark:hover:bear-bg-zinc-700/50 bear-transition-colors",children:[o.showMore," (",r.length-a," more)"]})})]}),document.body)]})};exports.NotificationCenter=D;

package/dist/components/NotificationCenter/NotificationCenter.const.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e={title:"Notifications",noNotifications:"No notifications",markAllRead:"Mark all as read",clearAll:"Clear all",showMore:"Show more",justNow:"Just now",minutesAgo:"{count}m ago",hoursAgo:"{count}h ago",daysAgo:"{count}d ago",new:"New"},T=5,o=9999,I={info:"bear-text-blue-400 bear-bg-blue-500/20",success:"bear-text-green-400 bear-bg-green-500/20",warning:"bear-text-amber-400 bear-bg-amber-500/20",error:"bear-text-red-400 bear-bg-red-500/20"},N={MINUTE:60*1e3,HOUR:3600*1e3,DAY:1440*60*1e3};exports.NOTIFICATION_CENTER_DEFAULT_TRANSLATIONS=e;exports.NOTIFICATION_CENTER_MAX_VISIBLE=T;exports.NOTIFICATION_CENTER_Z_INDEX=o;exports.NOTIFICATION_TYPE_COLORS=I;exports.TIME_THRESHOLDS=N;

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

@@ -0,0 +1,25 @@
+import { NotificationCenterTranslations, NotificationType } from './NotificationCenter.types';
+/**
+ * Default translations
+ */
+export declare const NOTIFICATION_CENTER_DEFAULT_TRANSLATIONS: NotificationCenterTranslations;
+/**
+ * Maximum visible notifications default
+ */
+export declare const NOTIFICATION_CENTER_MAX_VISIBLE = 5;
+/**
+ * Dropdown z-index
+ */
+export declare const NOTIFICATION_CENTER_Z_INDEX = 9999;
+/**
+ * Type icon colors
+ */
+export declare const NOTIFICATION_TYPE_COLORS: Record<NotificationType, string>;
+/**
+ * Time thresholds for relative time formatting (in ms)
+ */
+export declare const TIME_THRESHOLDS: {
+    readonly MINUTE: number;
+    readonly HOUR: number;
+    readonly DAY: number;
+};

package/dist/components/NotificationCenter/NotificationCenter.const.js

@@ -0,0 +1,28 @@
+const e = {
+  title: "Notifications",
+  noNotifications: "No notifications",
+  markAllRead: "Mark all as read",
+  clearAll: "Clear all",
+  showMore: "Show more",
+  justNow: "Just now",
+  minutesAgo: "{count}m ago",
+  hoursAgo: "{count}h ago",
+  daysAgo: "{count}d ago",
+  new: "New"
+}, o = 5, t = 9999, a = {
+  info: "bear-text-blue-400 bear-bg-blue-500/20",
+  success: "bear-text-green-400 bear-bg-green-500/20",
+  warning: "bear-text-amber-400 bear-bg-amber-500/20",
+  error: "bear-text-red-400 bear-bg-red-500/20"
+}, r = {
+  MINUTE: 60 * 1e3,
+  HOUR: 3600 * 1e3,
+  DAY: 1440 * 60 * 1e3
+};
+export {
+  e as NOTIFICATION_CENTER_DEFAULT_TRANSLATIONS,
+  o as NOTIFICATION_CENTER_MAX_VISIBLE,
+  t as NOTIFICATION_CENTER_Z_INDEX,
+  a as NOTIFICATION_TYPE_COLORS,
+  r as TIME_THRESHOLDS
+};

package/dist/components/NotificationCenter/NotificationCenter.d.ts

@@ -0,0 +1,15 @@
+import { FC } from 'react';
+import { NotificationCenterProps } from './NotificationCenter.types';
+/**
+ * NotificationCenter - Notification management component
+ *
+ * @example
+ * ```tsx
+ * <NotificationCenter
+ *   notifications={notifications}
+ *   onMarkAsRead={handleMarkAsRead}
+ *   onDismiss={handleDismiss}
+ * />
+ * ```
+ */
+export declare const NotificationCenter: FC<NotificationCenterProps>;