@forgedevstack/bear 1.0.7 → 1.0.9

package/dist/context/BearProvider.d.ts

@@ -1,18 +1,79 @@
 import { ReactNode } from 'react';
-import { BearTheme, BearThemeOverride } from '../types';
+import { BearTheme, BearThemeOverride, CustomVariant, CustomVariantsMap } from '../types';
+import { BearComponentOverrides, ButtonVariantsConfig } from '../types/component.types';
+import { CustomTypography, CustomTypographyMap } from '../components/Typography/Typography.types';
 interface BearContextValue {
     theme: BearTheme;
     mode: 'light' | 'dark';
     setMode: (mode: 'light' | 'dark') => void;
     toggleMode: () => void;
     updateTheme: (overrides: BearThemeOverride) => void;
+    /** Component style overrides */
+    components: BearComponentOverrides;
+    /** Variant configurations */
+    variants: {
+        Button?: ButtonVariantsConfig;
+    };
+    /** Custom variants map */
+    customVariants: CustomVariantsMap;
+    /** Check if a variant exists (built-in or custom) */
+    hasVariant: (name: string) => boolean;
+    /** Get variant colors */
+    getVariant: (name: string) => CustomVariant | undefined;
+    /** Register a new custom variant at runtime */
+    addVariant: (name: string, config: CustomVariant) => void;
+    /** Custom typography variants */
+    customTypography: CustomTypographyMap;
+    /** Check if typography variant exists */
+    hasTypography: (name: string) => boolean;
+    /** Get typography config */
+    getTypography: (name: string) => CustomTypography | undefined;
+    /** Add custom typography at runtime */
+    addTypography: (name: string, config: CustomTypography) => void;
+    /** Register component overrides */
+    registerComponent: <K extends keyof BearComponentOverrides>(componentKey: K, styles: BearComponentOverrides[K]) => void;
+    /** Register variant overrides */
+    registerVariant: <K extends 'Button'>(componentKey: K, variantConfig: ButtonVariantsConfig) => void;
 }
+/** Bear context - use useBear() hook instead of consuming directly */
+export declare const BearContext: import('react').Context<BearContextValue | null>;
 interface BearProviderProps {
     children: ReactNode;
     /** Initial theme mode */
     defaultMode?: 'light' | 'dark';
     /** Theme overrides applied on top of default theme */
     theme?: BearThemeOverride;
+    /** Global component style overrides */
+    components?: BearComponentOverrides;
+    /** Variant color configurations for built-in variants */
+    variants?: {
+        Button?: ButtonVariantsConfig;
+    };
+    /**
+     * Custom variants - add your own color variants!
+     * @example
+     * ```tsx
+     * <BearProvider customVariants={{
+     *   redBrand: { bg: '#dc2626', bgHover: '#b91c1c', text: '#ffffff' },
+     *   oceanBlue: { bg: '#0ea5e9', bgHover: '#0284c7', text: '#ffffff' },
+     * }}>
+     * ```
+     * Then use: `<Button variant="redBrand">Click me</Button>`
+     */
+    customVariants?: CustomVariantsMap;
+    /**
+     * Custom typography variants - add your own text styles!
+     * @example
+     * ```tsx
+     * <BearProvider customTypography={{
+     *   b250: { fontSize: '25px', fontWeight: 'bold', lineHeight: '1.2' },
+     *   display1: { fontSize: '4rem', fontWeight: 800, letterSpacing: '-0.025em' },
+     *   label: { fontSize: '12px', fontWeight: 'medium', textTransform: 'uppercase' },
+     * }}>
+     * ```
+     * Then use: `<Typography variant="b250">Custom text</Typography>`
+     */
+    customTypography?: CustomTypographyMap;
     /** Persist theme preference to localStorage */
     persistPreference?: boolean;
     /** localStorage key for persisting preference */
@@ -27,20 +88,42 @@ interface BearProviderProps {
  *
  * function App() {
  *   return (
- *     <BearProvider defaultMode="dark">
- *       <YourApp />
+ *     <BearProvider
+ *       defaultMode="dark"
+ *       // Simple: just pass a color string!
+ *       theme={{
+ *         colors: {
+ *           primary: '#3b82f6', // or 'blue', 'red', '#hex'
+ *         }
+ *       }}
+ *       // Or full control with color scales:
+ *       // theme={{
+ *       //   colors: {
+ *       //     primary: { 500: '#ec4899', 600: '#db2777', ... }
+ *       //   }
+ *       // }}
+ *       customVariants={{
+ *         redBrand: { bg: '#dc2626', bgHover: '#b91c1c', text: '#fff' },
+ *         oceanBlue: { bg: '#0ea5e9', bgHover: '#0284c7', text: '#fff' },
+ *       }}
+ *     >
+ *       <Button variant="redBrand">Red Brand Button</Button>
+ *       <Button variant="primary">Uses theme primary</Button>
  *     </BearProvider>
  *   );
  * }
  * ```
  */
-export declare const BearProvider: ({ children, defaultMode, theme: themeOverrides, persistPreference, storageKey, }: BearProviderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const BearProvider: ({ children, defaultMode, theme: themeOverrides, components: initialComponents, variants: initialVariants, customVariants: initialCustomVariants, customTypography: initialCustomTypography, persistPreference, storageKey, }: BearProviderProps) => import("react/jsx-runtime").JSX.Element;
 /**
  * Hook to access the Bear theme context
  *
  * @example
  * ```tsx
- * const { theme, mode, toggleMode } = useBear();
+ * const { theme, mode, toggleMode, addVariant } = useBear();
+ *
+ * // Add a variant at runtime
+ * addVariant('myBrand', { bg: '#ff6b6b', bgHover: '#ee5a5a', text: '#fff' });
  * ```
  */
 export declare const useBear: () => BearContextValue;
@@ -61,4 +144,26 @@ export declare const useBearMode: () => {
     setMode: (mode: "light" | "dark") => void;
     toggleMode: () => void;
 };
+/**
+ * Hook to work with custom variants
+ *
+ * @example
+ * ```tsx
+ * const { addVariant, hasVariant, getVariant } = useBearVariants();
+ *
+ * // Add a new variant dynamically
+ * addVariant('hotPink', { bg: '#ec4899', bgHover: '#db2777', text: '#fff' });
+ *
+ * // Check if variant exists
+ * if (hasVariant('hotPink')) {
+ *   // use it!
+ * }
+ * ```
+ */
+export declare const useBearVariants: () => {
+    customVariants: CustomVariantsMap;
+    hasVariant: (name: string) => boolean;
+    getVariant: (name: string) => CustomVariant | undefined;
+    addVariant: (name: string, config: CustomVariant) => void;
+};
 export {};

package/dist/context/BearProvider.js

@@ -1,71 +1,216 @@
-import { jsx as B } from "react/jsx-runtime";
-import { createContext as T, useContext as p, useState as f, useMemo as h, useCallback as u, useEffect as E } from "react";
-import { defaultDarkTheme as g, defaultLightTheme as M } from "./defaultTheme.js";
-const m = T(null), L = "bear-theme-mode", j = ({
+import { jsx as ee } from "react/jsx-runtime";
+import { createContext as te, useContext as _, useState as m, useMemo as T, useCallback as i, useEffect as re } from "react";
+import { defaultDarkTheme as F, defaultLightTheme as se } from "./defaultTheme.js";
+const j = te(null), oe = "bear-theme-mode", ne = ["primary", "secondary", "success", "warning", "danger", "info", "ghost", "outline", "error"], W = (t) => {
+  const o = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(t);
+  return o ? {
+    r: parseInt(o[1], 16),
+    g: parseInt(o[2], 16),
+    b: parseInt(o[3], 16)
+  } : null;
+}, N = (t, o, s) => "#" + [t, o, s].map((c) => {
+  const b = Math.max(0, Math.min(255, Math.round(c))).toString(16);
+  return b.length === 1 ? "0" + b : b;
+}).join(""), P = (t, o) => {
+  const s = W(t);
+  if (!s) return t;
+  const c = o / 100;
+  return N(
+    s.r + (255 - s.r) * c,
+    s.g + (255 - s.g) * c,
+    s.b + (255 - s.b) * c
+  );
+}, x = (t, o) => {
+  const s = W(t);
+  if (!s) return t;
+  const c = 1 - o / 100;
+  return N(s.r * c, s.g * c, s.b * c);
+}, ae = (t) => ({
+  50: P(t, 95),
+  100: P(t, 85),
+  200: P(t, 70),
+  300: P(t, 50),
+  400: P(t, 25),
+  500: t,
+  600: x(t, 10),
+  700: x(t, 25),
+  800: x(t, 40),
+  900: x(t, 55),
+  950: x(t, 70)
+}), ce = (t) => typeof t != "string" ? !1 : t.startsWith("#") || t.startsWith("rgb") || /^[a-z]+$/i.test(t), R = {
+  red: "#ef4444",
+  blue: "#3b82f6",
+  green: "#22c55e",
+  yellow: "#eab308",
+  orange: "#f97316",
+  purple: "#a855f7",
+  pink: "#ec4899",
+  cyan: "#06b6d4",
+  teal: "#14b8a6",
+  indigo: "#6366f1",
+  violet: "#8b5cf6",
+  rose: "#f43f5e",
+  amber: "#f59e0b",
+  lime: "#84cc16",
+  emerald: "#10b981",
+  sky: "#0ea5e9",
+  slate: "#64748b",
+  gray: "#6b7280",
+  zinc: "#71717a",
+  neutral: "#737373",
+  stone: "#78716c",
+  white: "#ffffff",
+  black: "#000000"
+}, be = (t) => {
+  const o = t.toLowerCase();
+  return R[o] ? R[o] : (t.startsWith("#"), t);
+};
+function v(t, o) {
+  if (!o) return t;
+  const s = { ...t }, c = t, b = o, $ = s;
+  for (const p in b)
+    if (Object.prototype.hasOwnProperty.call(b, p)) {
+      const l = b[p], d = c[p];
+      l && typeof l == "object" && !Array.isArray(l) && d && typeof d == "object" && !Array.isArray(d) ? $[p] = v(
+        d,
+        l
+      ) : l !== void 0 && ($[p] = l);
+    }
+  return s;
+}
+const f = (t, o, s) => {
+  Object.entries(s).forEach(([c, b]) => {
+    t.style.setProperty(`--bear-${o}-${c}`, b);
+  });
+}, ie = (t, o, s) => {
+  t.style.setProperty(`--bear-${o}-bg`, s.bg), s.bgHover && t.style.setProperty(`--bear-${o}-bg-hover`, s.bgHover), s.bgActive && t.style.setProperty(`--bear-${o}-bg-active`, s.bgActive), s.text && t.style.setProperty(`--bear-${o}-text`, s.text), s.border && t.style.setProperty(`--bear-${o}-border`, s.border), s.ring && t.style.setProperty(`--bear-${o}-ring`, s.ring);
+}, ue = ({
   children: t,
-  defaultMode: c = "light",
-  theme: n,
-  persistPreference: d = !0,
-  storageKey: l = L
+  defaultMode: o = "light",
+  theme: s,
+  components: c = {},
+  variants: b = {},
+  customVariants: $ = {},
+  customTypography: p = {},
+  persistPreference: l = !0,
+  storageKey: d = oe
 }) => {
-  const [o, x] = f(() => {
-    if (typeof window < "u" && d) {
-      const e = localStorage.getItem(l);
+  const [y, G] = m(() => {
+    if (typeof window < "u" && l) {
+      const e = localStorage.getItem(d);
       if (e === "light" || e === "dark")
         return e;
       if (window.matchMedia("(prefers-color-scheme: dark)").matches)
         return "dark";
     }
-    return c;
-  }), [s, P] = f(n || {}), r = h(() => {
-    const e = o === "dark" ? g : M;
-    return Object.keys(s).length === 0 ? e : {
-      ...e,
-      ...s,
-      colors: s.colors ? { ...e.colors, ...s.colors } : e.colors
-    };
-  }, [o, s]), a = u((e) => {
-    x(e), typeof window < "u" && d && localStorage.setItem(l, e);
-  }, [d, l]), y = u(() => {
-    a(o === "light" ? "dark" : "light");
-  }, [o, a]), b = u((e) => {
-    P((i) => ({ ...i, ...e }));
+    return o;
+  }), [k, Y] = m(s || {}), [V, q] = m(c), [h, J] = m(b), [u, Q] = m($), [g, X] = m(p), O = T(() => {
+    if (!k || Object.keys(k).length === 0)
+      return {};
+    const e = { ...k };
+    if (e.colors) {
+      const n = ["primary", "secondary", "success", "warning", "danger", "info", "neutral"];
+      for (const r of n) {
+        const z = e.colors[r];
+        if (ce(z)) {
+          const K = be(z);
+          e.colors[r] = ae(K);
+        }
+      }
+    }
+    return e;
+  }, [k]), a = T(() => {
+    const e = y === "dark" ? F : se;
+    return Object.keys(O).length === 0 ? e : v(e, O);
+  }, [y, O]), w = i((e) => {
+    G(e), typeof window < "u" && l && localStorage.setItem(d, e);
+  }, [l, d]), A = i(() => {
+    w(y === "light" ? "dark" : "light");
+  }, [y, w]), E = i((e) => {
+    Y((n) => v(n, e));
+  }, []), B = i((e, n) => {
+    q((r) => ({
+      ...r,
+      [e]: {
+        ...r[e] || {},
+        ...n
+      }
+    }));
+  }, []), M = i((e, n) => {
+    J((r) => ({
+      ...r,
+      [e]: {
+        ...r[e] || {},
+        ...n
+      }
+    }));
+  }, []), S = i((e) => ne.includes(e) || e in u, [u]), I = i((e) => u[e], [u]), L = i((e, n) => {
+    Q((r) => ({
+      ...r,
+      [e]: n
+    }));
+  }, []), C = i((e) => e in g, [g]), H = i((e) => g[e], [g]), D = i((e, n) => {
+    X((r) => ({
+      ...r,
+      [e]: n
+    }));
   }, []);
-  E(() => {
+  re(() => {
     if (typeof document < "u") {
       const e = document.documentElement;
-      o === "dark" ? e.classList.add("dark") : e.classList.remove("dark"), e.classList.remove("bear-light", "bear-dark"), e.classList.add(`bear-${o}`), Object.entries(r.colors.primary).forEach(([i, w]) => {
-        e.style.setProperty(`--bear-primary-${i}`, w);
-      }), e.style.setProperty("--bear-bg-primary", r.colors.background.primary), e.style.setProperty("--bear-bg-secondary", r.colors.background.secondary), e.style.setProperty("--bear-bg-tertiary", r.colors.background.tertiary), e.style.setProperty("--bear-text-primary", r.colors.text.primary), e.style.setProperty("--bear-text-secondary", r.colors.text.secondary), e.style.setProperty("--bear-text-muted", r.colors.text.muted), e.style.setProperty("--bear-border-default", r.colors.border.default);
+      y === "dark" ? e.classList.add("dark") : e.classList.remove("dark"), e.classList.remove("bear-light", "bear-dark"), e.classList.add(`bear-${y}`), f(e, "primary", a.colors.primary), f(e, "secondary", a.colors.secondary), f(e, "success", a.colors.success), f(e, "warning", a.colors.warning), f(e, "danger", a.colors.danger), f(e, "info", a.colors.info), f(e, "neutral", a.colors.neutral), e.style.setProperty("--bear-bg-primary", a.colors.background.primary), e.style.setProperty("--bear-bg-secondary", a.colors.background.secondary), e.style.setProperty("--bear-bg-tertiary", a.colors.background.tertiary), e.style.setProperty("--bear-text-primary", a.colors.text.primary), e.style.setProperty("--bear-text-secondary", a.colors.text.secondary), e.style.setProperty("--bear-text-muted", a.colors.text.muted), e.style.setProperty("--bear-text-inverted", a.colors.text.inverted), e.style.setProperty("--bear-border-default", a.colors.border.default), e.style.setProperty("--bear-border-subtle", a.colors.border.subtle), e.style.setProperty("--bear-border-strong", a.colors.border.strong), h.Button && Object.entries(h.Button).forEach(([n, r]) => {
+        r && (r.bg && e.style.setProperty(`--bear-btn-${n}-bg`, r.bg), r.bgHover && e.style.setProperty(`--bear-btn-${n}-bg-hover`, r.bgHover), r.bgActive && e.style.setProperty(`--bear-btn-${n}-bg-active`, r.bgActive), r.bgDisabled && e.style.setProperty(`--bear-btn-${n}-bg-disabled`, r.bgDisabled), r.text && e.style.setProperty(`--bear-btn-${n}-text`, r.text), r.textDisabled && e.style.setProperty(`--bear-btn-${n}-text-disabled`, r.textDisabled), r.border && e.style.setProperty(`--bear-btn-${n}-border`, r.border), r.borderHover && e.style.setProperty(`--bear-btn-${n}-border-hover`, r.borderHover), r.ring && e.style.setProperty(`--bear-btn-${n}-ring`, r.ring));
+      }), Object.entries(u).forEach(([n, r]) => {
+        ie(e, n, r);
+      }), e.style.setProperty("--bear-font-sans", a.typography.fontFamily.sans), e.style.setProperty("--bear-font-mono", a.typography.fontFamily.mono), Object.entries(a.shadows).forEach(([n, r]) => {
+        e.style.setProperty(`--bear-shadow-${n}`, r);
+      }), Object.entries(a.borderRadius).forEach(([n, r]) => {
+        e.style.setProperty(`--bear-radius-${n}`, r);
+      }), Object.entries(a.spacing).forEach(([n, r]) => {
+        e.style.setProperty(`--bear-spacing-${n}`, r);
+      });
     }
-  }, [r, o]);
-  const v = h(() => ({
-    theme: r,
-    mode: o,
-    setMode: a,
-    toggleMode: y,
-    updateTheme: b
-  }), [r, o, a, y, b]);
-  return /* @__PURE__ */ B(m.Provider, { value: v, children: t });
-}, k = () => {
-  const t = p(m);
+  }, [a, y, h, u]);
+  const Z = T(() => ({
+    theme: a,
+    mode: y,
+    setMode: w,
+    toggleMode: A,
+    updateTheme: E,
+    components: V,
+    variants: h,
+    customVariants: u,
+    hasVariant: S,
+    getVariant: I,
+    addVariant: L,
+    customTypography: g,
+    hasTypography: C,
+    getTypography: H,
+    addTypography: D,
+    registerComponent: B,
+    registerVariant: M
+  }), [a, y, w, A, E, V, h, u, S, I, L, g, C, H, D, B, M]);
+  return /* @__PURE__ */ ee(j.Provider, { value: Z, children: t });
+}, U = () => {
+  const t = _(j);
   if (!t)
     throw new Error("useBear must be used within a BearProvider");
   return t;
-}, A = () => {
-  const { theme: t } = k();
+}, pe = () => {
+  const { theme: t } = U();
   return t;
-}, D = () => {
-  const t = p(m);
-  return t ? t.theme : g;
-}, I = () => {
-  const { mode: t, setMode: c, toggleMode: n } = k();
-  return { mode: t, setMode: c, toggleMode: n };
+}, fe = () => {
+  const t = _(j);
+  return t ? t.theme : F;
+}, ge = () => {
+  const { mode: t, setMode: o, toggleMode: s } = U();
+  return { mode: t, setMode: o, toggleMode: s };
 };
 export {
-  j as BearProvider,
-  k as useBear,
-  I as useBearMode,
-  A as useBearTheme,
-  D as useBearThemeOptional
+  j as BearContext,
+  ue as BearProvider,
+  U as useBear,
+  ge as useBearMode,
+  pe as useBearTheme,
+  fe as useBearThemeOptional
 };

package/dist/context/defaultTheme.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r={50:"#fff7ed",100:"#ffedd5",200:"#fed7aa",300:"#fdba74",400:"#fb923c",500:"#f97316",600:"#ea580c",700:"#c2410c",800:"#9a3412",900:"#7c2d12",950:"#431407"},f={50:"#faf5ff",100:"#f3e8ff",200:"#e9d5ff",300:"#d8b4fe",400:"#c084fc",500:"#a855f7",600:"#9333ea",700:"#7c3aed",800:"#6b21a8",900:"#581c87",950:"#3b0764"},a={50:"#f0fdf4",100:"#dcfce7",200:"#bbf7d0",300:"#86efac",400:"#4ade80",500:"#22c55e",600:"#16a34a",700:"#15803d",800:"#166534",900:"#14532d",950:"#052e16"},o={50:"#fefce8",100:"#fef9c3",200:"#fef08a",300:"#fde047",400:"#facc15",500:"#eab308",600:"#ca8a04",700:"#a16207",800:"#854d0e",900:"#713f12",950:"#422006"},x={50:"#fef2f2",100:"#fee2e2",200:"#fecaca",300:"#fca5a5",400:"#f87171",500:"#ef4444",600:"#dc2626",700:"#b91c1c",800:"#991b1b",900:"#7f1d1d",950:"#450a0a"},d={50:"#eff6ff",100:"#dbeafe",200:"#bfdbfe",300:"#93c5fd",400:"#60a5fa",500:"#3b82f6",600:"#2563eb",700:"#1d4ed8",800:"#1e40af",900:"#1e3a8a",950:"#172554"},p={50:"#fafafa",100:"#f4f4f5",200:"#e4e4e7",300:"#d4d4d8",400:"#a1a1aa",500:"#71717a",600:"#52525b",700:"#3f3f46",800:"#27272a",900:"#18181b",950:"#09090b"},e={mode:"light",colors:{primary:r,secondary:f,success:a,warning:o,danger:x,info:d,neutral:p,background:{primary:"#ffffff",secondary:"#f9fafb",tertiary:"#f3f4f6"},text:{primary:"#111827",secondary:"#4b5563",muted:"#9ca3af",inverted:"#ffffff"},border:{default:"#e5e7eb",subtle:"#f3f4f6",strong:"#d1d5db"}},typography:{fontFamily:{sans:"Inter, system-ui, -apple-system, sans-serif",mono:"JetBrains Mono, Fira Code, monospace"},fontSize:{xs:"0.75rem",sm:"0.875rem",base:"1rem",lg:"1.125rem",xl:"1.25rem","2xl":"1.5rem","3xl":"1.875rem","4xl":"2.25rem"},fontWeight:{normal:400,medium:500,semibold:600,bold:700},lineHeight:{tight:1.25,normal:1.5,relaxed:1.75}},spacing:{0:"0",1:"0.25rem",2:"0.5rem",3:"0.75rem",4:"1rem",5:"1.25rem",6:"1.5rem",8:"2rem",10:"2.5rem",12:"3rem",16:"4rem",20:"5rem",24:"6rem",32:"8rem"},borderRadius:{none:"0",sm:"0.25rem",md:"0.375rem",lg:"0.5rem",xl:"0.75rem","2xl":"1rem",full:"9999px"},shadows:{none:"none",sm:"0 1px 2px 0 rgb(0 0 0 / 0.05)",md:"0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",lg:"0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",xl:"0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)","2xl":"0 25px 50px -12px rgb(0 0 0 / 0.25)",inner:"inset 0 2px 4px 0 rgb(0 0 0 / 0.05)"},breakpoints:{sm:"640px",md:"768px",lg:"1024px",xl:"1280px","2xl":"1536px"}},s={...e,mode:"dark",colors:{...e.colors,background:{primary:"#09090b",secondary:"#18181b",tertiary:"#27272a"},text:{primary:"#fafafa",secondary:"#a1a1aa",muted:"#71717a",inverted:"#09090b"},border:{default:"#27272a",subtle:"#18181b",strong:"#3f3f46"}},shadows:{none:"none",sm:"0 1px 2px 0 rgb(0 0 0 / 0.3)",md:"0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3)",lg:"0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.3)",xl:"0 20px 25px -5px rgb(0 0 0 / 0.5), 0 8px 10px -6px rgb(0 0 0 / 0.3)","2xl":"0 25px 50px -12px rgb(0 0 0 / 0.6)",inner:"inset 0 2px 4px 0 rgb(0 0 0 / 0.2)"}};exports.defaultDarkTheme=s;exports.defaultLightTheme=e;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r={50:"#fdf2f8",100:"#fce7f3",200:"#fbcfe8",300:"#f9a8d4",400:"#f472b6",500:"#ec4899",600:"#db2777",700:"#be185d",800:"#9d174d",900:"#831843",950:"#500724"},f={50:"#faf5ff",100:"#f3e8ff",200:"#e9d5ff",300:"#d8b4fe",400:"#c084fc",500:"#a855f7",600:"#9333ea",700:"#7c3aed",800:"#6b21a8",900:"#581c87",950:"#3b0764"},a={50:"#f0fdf4",100:"#dcfce7",200:"#bbf7d0",300:"#86efac",400:"#4ade80",500:"#22c55e",600:"#16a34a",700:"#15803d",800:"#166534",900:"#14532d",950:"#052e16"},o={50:"#fefce8",100:"#fef9c3",200:"#fef08a",300:"#fde047",400:"#facc15",500:"#eab308",600:"#ca8a04",700:"#a16207",800:"#854d0e",900:"#713f12",950:"#422006"},x={50:"#fef2f2",100:"#fee2e2",200:"#fecaca",300:"#fca5a5",400:"#f87171",500:"#ef4444",600:"#dc2626",700:"#b91c1c",800:"#991b1b",900:"#7f1d1d",950:"#450a0a"},d={50:"#eff6ff",100:"#dbeafe",200:"#bfdbfe",300:"#93c5fd",400:"#60a5fa",500:"#3b82f6",600:"#2563eb",700:"#1d4ed8",800:"#1e40af",900:"#1e3a8a",950:"#172554"},p={50:"#fafafa",100:"#f4f4f5",200:"#e4e4e7",300:"#d4d4d8",400:"#a1a1aa",500:"#71717a",600:"#52525b",700:"#3f3f46",800:"#27272a",900:"#18181b",950:"#09090b"},e={mode:"light",colors:{primary:r,secondary:f,success:a,warning:o,danger:x,info:d,neutral:p,background:{primary:"#ffffff",secondary:"#f9fafb",tertiary:"#f3f4f6"},text:{primary:"#111827",secondary:"#4b5563",muted:"#9ca3af",inverted:"#ffffff"},border:{default:"#e5e7eb",subtle:"#f3f4f6",strong:"#d1d5db"}},typography:{fontFamily:{sans:"Inter, system-ui, -apple-system, sans-serif",mono:"JetBrains Mono, Fira Code, monospace"},fontSize:{xs:"0.75rem",sm:"0.875rem",base:"1rem",lg:"1.125rem",xl:"1.25rem","2xl":"1.5rem","3xl":"1.875rem","4xl":"2.25rem"},fontWeight:{normal:400,medium:500,semibold:600,bold:700},lineHeight:{tight:1.25,normal:1.5,relaxed:1.75}},spacing:{0:"0",1:"0.25rem",2:"0.5rem",3:"0.75rem",4:"1rem",5:"1.25rem",6:"1.5rem",8:"2rem",10:"2.5rem",12:"3rem",16:"4rem",20:"5rem",24:"6rem",32:"8rem"},borderRadius:{none:"0",sm:"0.25rem",md:"0.375rem",lg:"0.5rem",xl:"0.75rem","2xl":"1rem",full:"9999px"},shadows:{none:"none",sm:"0 1px 2px 0 rgb(0 0 0 / 0.05)",md:"0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",lg:"0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",xl:"0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)","2xl":"0 25px 50px -12px rgb(0 0 0 / 0.25)",inner:"inset 0 2px 4px 0 rgb(0 0 0 / 0.05)"},breakpoints:{sm:"640px",md:"768px",lg:"1024px",xl:"1280px","2xl":"1536px"}},s={...e,mode:"dark",colors:{...e.colors,background:{primary:"#09090b",secondary:"#18181b",tertiary:"#27272a"},text:{primary:"#fafafa",secondary:"#a1a1aa",muted:"#71717a",inverted:"#09090b"},border:{default:"#27272a",subtle:"#18181b",strong:"#3f3f46"}},shadows:{none:"none",sm:"0 1px 2px 0 rgb(0 0 0 / 0.3)",md:"0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3)",lg:"0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.3)",xl:"0 20px 25px -5px rgb(0 0 0 / 0.5), 0 8px 10px -6px rgb(0 0 0 / 0.3)","2xl":"0 25px 50px -12px rgb(0 0 0 / 0.6)",inner:"inset 0 2px 4px 0 rgb(0 0 0 / 0.2)"}};exports.defaultDarkTheme=s;exports.defaultLightTheme=e;

package/dist/context/defaultTheme.js

@@ -1,15 +1,15 @@
 const r = {
-  50: "#fff7ed",
-  100: "#ffedd5",
-  200: "#fed7aa",
-  300: "#fdba74",
-  400: "#fb923c",
-  500: "#f97316",
-  600: "#ea580c",
-  700: "#c2410c",
-  800: "#9a3412",
-  900: "#7c2d12",
-  950: "#431407"
+  50: "#fdf2f8",
+  100: "#fce7f3",
+  200: "#fbcfe8",
+  300: "#f9a8d4",
+  400: "#f472b6",
+  500: "#ec4899",
+  600: "#db2777",
+  700: "#be185d",
+  800: "#9d174d",
+  900: "#831843",
+  950: "#500724"
 }, f = {
   50: "#faf5ff",
   100: "#f3e8ff",

package/dist/hooks/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./useMediaQuery.cjs"),t=require("./useClickOutside.cjs"),a=require("./useDisclosure.cjs"),l=require("./useBearStyles.cjs"),i=require("./bearStyled.cjs"),c=require("./useSlide/useSlide.cjs"),n=require("./useParallax/useParallax.cjs"),d=require("./useBounce/useBounce.cjs"),b=require("./useFloat/useFloat.cjs"),q=require("./usePulse/usePulse.cjs"),y=require("./useShake/useShake.cjs"),S=require("./useClipboard/useClipboard.cjs"),s=require("./useDebounce/useDebounce.cjs"),u=require("./useThrottle/useThrottle.cjs"),D=require("./useLocalStorage/useLocalStorage.cjs"),r=require("./useKeyPress/useKeyPress.cjs"),o=require("./useIntersectionObserver/useIntersectionObserver.cjs"),P=require("./useDragDrop/useDragDrop.cjs"),k=require("./useLazyLoad/useLazyLoad.cjs");exports.useIsDesktop=e.useIsDesktop;exports.useIsMobile=e.useIsMobile;exports.useIsTablet=e.useIsTablet;exports.useMediaQuery=e.useMediaQuery;exports.usePrefersDark=e.usePrefersDark;exports.usePrefersReducedMotion=e.usePrefersReducedMotion;exports.useClickOutside=t.useClickOutside;exports.useDisclosure=a.useDisclosure;exports.useBearStyles=l.useBearStyles;exports.bearStyled=i.bearStyled;exports.useSlide=c.useSlide;exports.useParallax=n.useParallax;exports.useBounce=d.useBounce;exports.useFloat=b.useFloat;exports.usePulse=q.usePulse;exports.useShake=y.useShake;exports.useClipboard=S.useClipboard;exports.useDebounce=s.useDebounce;exports.useDebouncedCallback=s.useDebouncedCallback;exports.useThrottle=u.useThrottle;exports.useThrottledCallback=u.useThrottledCallback;exports.useLocalStorage=D.useLocalStorage;exports.useKeyPress=r.useKeyPress;exports.useKeyPressState=r.useKeyPressState;exports.useInView=o.useInView;exports.useIntersectionObserver=o.useIntersectionObserver;exports.useDragDrop=P.useDragDrop;exports.useLazyLoad=k.useLazyLoad;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./useMediaQuery.cjs"),n=require("./useClickOutside.cjs"),a=require("./useDisclosure.cjs"),l=require("./useBearStyles.cjs"),c=require("./bearStyled.cjs"),d=require("./useSlide/useSlide.cjs"),b=require("./useParallax/useParallax.cjs"),q=require("./useBounce/useBounce.cjs"),p=require("./useFloat/useFloat.cjs"),P=require("./usePulse/usePulse.cjs"),S=require("./useShake/useShake.cjs"),y=require("./useClipboard/useClipboard.cjs"),u=require("./useDebounce/useDebounce.cjs"),r=require("./useThrottle/useThrottle.cjs"),C=require("./useLocalStorage/useLocalStorage.cjs"),o=require("./useKeyPress/useKeyPress.cjs"),t=require("./useIntersectionObserver/useIntersectionObserver.cjs"),D=require("./useDragDrop/useDragDrop.cjs"),g=require("./useLazyLoad/useLazyLoad.cjs"),s=require("./useBearComponent/useBearComponent.cjs"),k=require("./useSpotlight/useSpotlight.cjs"),B=require("./useOnline/useOnline.cjs"),I=require("./useWebSocket/useWebSocket.cjs"),L=require("./useIdle/useIdle.cjs"),h=require("./usePageVisibility/usePageVisibility.cjs"),m=require("./useLongPress/useLongPress.cjs"),v=require("./useAnimate.cjs"),i=require("./useResponsive.cjs");exports.useIsDesktop=e.useIsDesktop;exports.useIsMobile=e.useIsMobile;exports.useIsTablet=e.useIsTablet;exports.useMediaQuery=e.useMediaQuery;exports.usePrefersDark=e.usePrefersDark;exports.usePrefersReducedMotion=e.usePrefersReducedMotion;exports.useClickOutside=n.useClickOutside;exports.useDisclosure=a.useDisclosure;exports.useBearStyles=l.useBearStyles;exports.bearStyled=c.bearStyled;exports.useSlide=d.useSlide;exports.useParallax=b.useParallax;exports.useBounce=q.useBounce;exports.useFloat=p.useFloat;exports.usePulse=P.usePulse;exports.useShake=S.useShake;exports.useClipboard=y.useClipboard;exports.useDebounce=u.useDebounce;exports.useDebouncedCallback=u.useDebouncedCallback;exports.useThrottle=r.useThrottle;exports.useThrottledCallback=r.useThrottledCallback;exports.useLocalStorage=C.useLocalStorage;exports.useKeyPress=o.useKeyPress;exports.useKeyPressState=o.useKeyPressState;exports.useInView=t.useInView;exports.useIntersectionObserver=t.useIntersectionObserver;exports.useDragDrop=D.useDragDrop;exports.useLazyLoad=g.useLazyLoad;exports.BearComponentProvider=s.BearComponentProvider;exports.useBC=s.useBC;exports.useBearComponent=s.useBearComponent;exports.useBearComponentContext=s.useBearComponentContext;exports.useSpotlight=k.useSpotlight;exports.useOnline=B.useOnline;exports.useWebSocket=I.useWebSocket;exports.useIdle=L.useIdle;exports.usePageVisibility=h.usePageVisibility;exports.useLongPress=m.useLongPress;exports.useAnimate=v.useAnimate;exports.useResponsive=i.useResponsive;exports.useResponsiveProps=i.useResponsiveProps;

package/dist/hooks/index.d.ts

@@ -31,3 +31,21 @@ export { useDragDrop } from './useDragDrop';
 export type { UseDragDropOptions, UseDragDropReturn, DragDropId } from './useDragDrop';
 export { useLazyLoad } from './useLazyLoad';
 export type { UseLazyLoadOptions, UseLazyLoadReturn } from './useLazyLoad';
+export { useBearComponent, useBC, BearComponentProvider, useBearComponentContext } from './useBearComponent';
+export type { UseBearComponentReturn, BearComponentContextValue } from './useBearComponent';
+export { useSpotlight } from './useSpotlight';
+export type { UseSpotlightOptions, UseSpotlightReturn } from './useSpotlight';
+export { useOnline } from './useOnline';
+export type { UseOnlineOptions, UseOnlineReturn } from './useOnline';
+export { useWebSocket } from './useWebSocket';
+export type { UseWebSocketOptions, UseWebSocketReturn, WebSocketStatus } from './useWebSocket';
+export { useIdle } from './useIdle';
+export type { UseIdleOptions, UseIdleReturn } from './useIdle';
+export { usePageVisibility } from './usePageVisibility';
+export type { UsePageVisibilityOptions, UsePageVisibilityReturn } from './usePageVisibility';
+export { useLongPress } from './useLongPress';
+export type { UseLongPressOptions, UseLongPressReturn } from './useLongPress';
+export { useAnimate } from './useAnimate';
+export type { UseAnimateOptions, UseAnimateReturn, AnimationPreset, AnimationKeyframe } from './useAnimate';
+export { useResponsive, useResponsiveProps } from './useResponsive';
+export type { ResponsiveProp } from './useResponsive';

package/dist/hooks/index.js

@@ -1,49 +1,71 @@
-import { useIsDesktop as o, useIsMobile as s, useIsTablet as t, useMediaQuery as u, usePrefersDark as p, usePrefersReducedMotion as a } from "./useMediaQuery.js";
+import { useIsDesktop as r, useIsMobile as s, useIsTablet as t, useMediaQuery as u, usePrefersDark as p, usePrefersReducedMotion as m } from "./useMediaQuery.js";
 import { useClickOutside as x } from "./useClickOutside.js";
-import { useDisclosure as m } from "./useDisclosure.js";
-import { useBearStyles as d } from "./useBearStyles.js";
+import { useDisclosure as l } from "./useDisclosure.js";
+import { useBearStyles as n } from "./useBearStyles.js";
 import { bearStyled as b } from "./bearStyled.js";
-import { useSlide as D } from "./useSlide/useSlide.js";
-import { useParallax as y } from "./useParallax/useParallax.js";
-import { useBounce as S } from "./useBounce/useBounce.js";
-import { useFloat as C } from "./useFloat/useFloat.js";
-import { usePulse as L } from "./usePulse/usePulse.js";
-import { useShake as T } from "./useShake/useShake.js";
-import { useClipboard as B } from "./useClipboard/useClipboard.js";
-import { useDebounce as O, useDebouncedCallback as v } from "./useDebounce/useDebounce.js";
-import { useThrottle as z, useThrottledCallback as F } from "./useThrottle/useThrottle.js";
-import { useLocalStorage as R } from "./useLocalStorage/useLocalStorage.js";
-import { useKeyPress as j, useKeyPressState as q } from "./useKeyPress/useKeyPress.js";
-import { useInView as E, useIntersectionObserver as G } from "./useIntersectionObserver/useIntersectionObserver.js";
-import { useDragDrop as J } from "./useDragDrop/useDragDrop.js";
-import { useLazyLoad as U } from "./useLazyLoad/useLazyLoad.js";
+import { useSlide as P } from "./useSlide/useSlide.js";
+import { useParallax as S } from "./useParallax/useParallax.js";
+import { useBounce as y } from "./useBounce/useBounce.js";
+import { useFloat as B } from "./useFloat/useFloat.js";
+import { usePulse as g } from "./usePulse/usePulse.js";
+import { useShake as v } from "./useShake/useShake.js";
+import { useClipboard as M } from "./useClipboard/useClipboard.js";
+import { useDebounce as R, useDebouncedCallback as T } from "./useDebounce/useDebounce.js";
+import { useThrottle as V, useThrottledCallback as w } from "./useThrottle/useThrottle.js";
+import { useLocalStorage as A } from "./useLocalStorage/useLocalStorage.js";
+import { useKeyPress as Q, useKeyPressState as W } from "./useKeyPress/useKeyPress.js";
+import { useInView as q, useIntersectionObserver as E } from "./useIntersectionObserver/useIntersectionObserver.js";
+import { useDragDrop as H } from "./useDragDrop/useDragDrop.js";
+import { useLazyLoad as N } from "./useLazyLoad/useLazyLoad.js";
+import { BearComponentProvider as X, useBC as Y, useBearComponent as Z, useBearComponentContext as _ } from "./useBearComponent/useBearComponent.js";
+import { useSpotlight as ee } from "./useSpotlight/useSpotlight.js";
+import { useOnline as re } from "./useOnline/useOnline.js";
+import { useWebSocket as te } from "./useWebSocket/useWebSocket.js";
+import { useIdle as pe } from "./useIdle/useIdle.js";
+import { usePageVisibility as fe } from "./usePageVisibility/usePageVisibility.js";
+import { useLongPress as ae } from "./useLongPress/useLongPress.js";
+import { useAnimate as ie } from "./useAnimate.js";
+import { useResponsive as de, useResponsiveProps as be } from "./useResponsive.js";
 export {
+  X as BearComponentProvider,
   b as bearStyled,
-  d as useBearStyles,
-  S as useBounce,
+  ie as useAnimate,
+  Y as useBC,
+  Z as useBearComponent,
+  _ as useBearComponentContext,
+  n as useBearStyles,
+  y as useBounce,
   x as useClickOutside,
-  B as useClipboard,
-  O as useDebounce,
-  v as useDebouncedCallback,
-  m as useDisclosure,
-  J as useDragDrop,
-  C as useFloat,
-  E as useInView,
-  G as useIntersectionObserver,
-  o as useIsDesktop,
+  M as useClipboard,
+  R as useDebounce,
+  T as useDebouncedCallback,
+  l as useDisclosure,
+  H as useDragDrop,
+  B as useFloat,
+  pe as useIdle,
+  q as useInView,
+  E as useIntersectionObserver,
+  r as useIsDesktop,
   s as useIsMobile,
   t as useIsTablet,
-  j as useKeyPress,
-  q as useKeyPressState,
-  U as useLazyLoad,
-  R as useLocalStorage,
+  Q as useKeyPress,
+  W as useKeyPressState,
+  N as useLazyLoad,
+  A as useLocalStorage,
+  ae as useLongPress,
   u as useMediaQuery,
-  y as useParallax,
+  re as useOnline,
+  fe as usePageVisibility,
+  S as useParallax,
   p as usePrefersDark,
-  a as usePrefersReducedMotion,
-  L as usePulse,
-  T as useShake,
-  D as useSlide,
-  z as useThrottle,
-  F as useThrottledCallback
+  m as usePrefersReducedMotion,
+  g as usePulse,
+  de as useResponsive,
+  be as useResponsiveProps,
+  v as useShake,
+  P as useSlide,
+  ee as useSpotlight,
+  V as useThrottle,
+  w as useThrottledCallback,
+  te as useWebSocket
 };

package/dist/hooks/useAnimate.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react"),f={fadeIn:[{opacity:0},{opacity:1}],fadeOut:[{opacity:1},{opacity:0}],slideInLeft:[{transform:"translateX(-100%)",opacity:0},{transform:"translateX(0)",opacity:1}],slideInRight:[{transform:"translateX(100%)",opacity:0},{transform:"translateX(0)",opacity:1}],slideInUp:[{transform:"translateY(100%)",opacity:0},{transform:"translateY(0)",opacity:1}],slideInDown:[{transform:"translateY(-100%)",opacity:0},{transform:"translateY(0)",opacity:1}],slideOutLeft:[{transform:"translateX(0)",opacity:1},{transform:"translateX(-100%)",opacity:0}],slideOutRight:[{transform:"translateX(0)",opacity:1},{transform:"translateX(100%)",opacity:0}],slideOutUp:[{transform:"translateY(0)",opacity:1},{transform:"translateY(-100%)",opacity:0}],slideOutDown:[{transform:"translateY(0)",opacity:1},{transform:"translateY(100%)",opacity:0}],scaleIn:[{transform:"scale(0)",opacity:0},{transform:"scale(1)",opacity:1}],scaleOut:[{transform:"scale(1)",opacity:1},{transform:"scale(0)",opacity:0}],rotateIn:[{transform:"rotate(-180deg) scale(0)",opacity:0},{transform:"rotate(0) scale(1)",opacity:1}],rotateOut:[{transform:"rotate(0) scale(1)",opacity:1},{transform:"rotate(180deg) scale(0)",opacity:0}],flipX:[{transform:"perspective(400px) rotateX(90deg)",opacity:0},{transform:"perspective(400px) rotateX(0)",opacity:1}],flipY:[{transform:"perspective(400px) rotateY(90deg)",opacity:0},{transform:"perspective(400px) rotateY(0)",opacity:1}],bounceIn:[{transform:"scale(0.3)",opacity:0},{transform:"scale(1.05)"},{transform:"scale(0.9)"},{transform:"scale(1)",opacity:1}],bounceOut:[{transform:"scale(1)",opacity:1},{transform:"scale(0.9)"},{transform:"scale(1.05)"},{transform:"scale(0.3)",opacity:0}],pulse:[{transform:"scale(1)"},{transform:"scale(1.05)"},{transform:"scale(1)"}],shake:[{transform:"translateX(0)"},{transform:"translateX(-10px)"},{transform:"translateX(10px)"},{transform:"translateX(-10px)"},{transform:"translateX(10px)"},{transform:"translateX(0)"}],swing:[{transform:"rotate(0deg)"},{transform:"rotate(15deg)"},{transform:"rotate(-10deg)"},{transform:"rotate(5deg)"},{transform:"rotate(-5deg)"},{transform:"rotate(0deg)"}],rubberBand:[{transform:"scale(1)"},{transform:"scaleX(1.25) scaleY(0.75)"},{transform:"scaleX(0.75) scaleY(1.25)"},{transform:"scaleX(1.15) scaleY(0.85)"},{transform:"scaleX(0.95) scaleY(1.05)"},{transform:"scale(1)"}],tada:[{transform:"scale(1) rotate(0deg)"},{transform:"scale(0.9) rotate(-3deg)"},{transform:"scale(1.1) rotate(3deg)"},{transform:"scale(1.1) rotate(-3deg)"},{transform:"scale(1.1) rotate(3deg)"},{transform:"scale(1) rotate(0deg)"}],wobble:[{transform:"translateX(0) rotate(0deg)"},{transform:"translateX(-25%) rotate(-5deg)"},{transform:"translateX(20%) rotate(3deg)"},{transform:"translateX(-15%) rotate(-3deg)"},{transform:"translateX(10%) rotate(2deg)"},{transform:"translateX(0) rotate(0deg)"}],jello:[{transform:"skewX(0deg) skewY(0deg)"},{transform:"skewX(-12.5deg) skewY(-12.5deg)"},{transform:"skewX(6.25deg) skewY(6.25deg)"},{transform:"skewX(-3.125deg) skewY(-3.125deg)"},{transform:"skewX(1.5625deg) skewY(1.5625deg)"},{transform:"skewX(0deg) skewY(0deg)"}]},k=(l={})=>{const i=a.useRef(null),e=a.useRef(null),[y,s]=a.useState(!1),[g,c]=a.useState(!1),m=a.useCallback((t,w)=>{var d;const p=i.current;if(!p)return;(d=e.current)==null||d.cancel();const r={...l,...w};let o;typeof t=="string"?o=f[t]??f.fadeIn:Array.isArray(t)?o=t:o=f.fadeIn;const n=p.animate(o,{duration:r.duration??300,delay:r.delay??0,easing:r.easing??"ease",iterations:r.iterations??1,fill:r.fill??"forwards",direction:r.direction??"normal"});return e.current=n,s(!0),c(!1),n.onfinish=()=>{s(!1),c(!0)},n.oncancel=()=>{s(!1)},n},[l]),u=a.useCallback(()=>{var t;(t=e.current)==null||t.pause(),s(!1)},[]),X=a.useCallback(()=>{var t;(t=e.current)==null||t.cancel(),s(!1),c(!1)},[]),Y=a.useCallback(()=>{var t;(t=e.current)==null||t.reverse()},[]);return a.useEffect(()=>{l.autoPlay&&m()},[]),{ref:i,play:m,pause:u,cancel:X,reverse:Y,isPlaying:y,isFinished:g}};exports.useAnimate=k;