@forgedevstack/bear 1.0.7 → 1.0.8

package/dist/components/Tour/Tour.d.ts

@@ -0,0 +1,17 @@
+import { FC } from 'react';
+import { TourProps } from './Tour.types';
+/**
+ * Tour - Feature tour/onboarding walkthrough
+ *
+ * @example
+ * ```tsx
+ * const steps = [
+ *   { target: '#welcome-btn', title: 'Welcome!', description: 'Click here to start' },
+ *   { target: '#settings', title: 'Settings', description: 'Configure your preferences' },
+ * ];
+ *
+ * <Tour steps={steps} open={showTour} onClose={() => setShowTour(false)} />
+ * ```
+ */
+export declare const Tour: FC<TourProps>;
+export default Tour;

package/dist/components/Tour/Tour.js

@@ -0,0 +1,179 @@
+import { jsxs as u, jsx as n } from "react/jsx-runtime";
+import { useState as w, useRef as F, useCallback as T, useEffect as x } from "react";
+import { cn as y } from "../../utils/cn.js";
+import { Button as O } from "../Button/Button.js";
+import { Typography as A } from "../Typography/Typography.js";
+import { TOUR_DEFAULTS as o, TOUR_TOOLTIP_OFFSET as _, TOUR_Z_INDEX as S, TOUR_PLACEMENT_STYLES as J } from "./Tour.const.js";
+const ot = ({
+  steps: s,
+  open: f = !1,
+  current: B,
+  onClose: d,
+  onStepChange: b,
+  onFinish: m,
+  showIndicators: R = o.SHOW_INDICATORS,
+  showCloseButton: U = o.SHOW_CLOSE_BUTTON,
+  showSkipButton: z = o.SHOW_SKIP_BUTTON,
+  showPrevButton: D = o.SHOW_PREV_BUTTON,
+  finishText: H = o.FINISH_TEXT,
+  skipText: M = o.SKIP_TEXT,
+  maskOpacity: I = o.MASK_OPACITY,
+  maskColor: P = o.MASK_COLOR,
+  animated: v = o.ANIMATED,
+  className: W,
+  testId: X
+}) => {
+  const [G, L] = w(0), [r, K] = w(null), [k, V] = w({ top: 0, left: 0 }), j = F(null), c = B ?? G, t = s[c], h = c === s.length - 1, Y = c === 0, p = T(() => t ? typeof t.target == "function" ? t.target() : document.querySelector(t.target) : null, [t]), E = T(() => {
+    const e = p();
+    if (e) {
+      const a = e.getBoundingClientRect();
+      K(a);
+    }
+  }, [p]);
+  x(() => {
+    if (!r || !t) return;
+    const e = t.placement || o.PLACEMENT, a = t.spotlightPadding ?? o.SPOTLIGHT_PADDING;
+    let l = 0, i = 0;
+    switch (e) {
+      case "top":
+      case "top-start":
+      case "top-end":
+        l = r.top - _ - a, i = e === "top" ? r.left + r.width / 2 : e === "top-start" ? r.left : r.right;
+        break;
+      case "bottom":
+      case "bottom-start":
+      case "bottom-end":
+        l = r.bottom + _ + a, i = e === "bottom" ? r.left + r.width / 2 : e === "bottom-start" ? r.left : r.right;
+        break;
+      case "left":
+      case "left-start":
+      case "left-end":
+        i = r.left - _ - a, l = e === "left" ? r.top + r.height / 2 : e === "left-start" ? r.top : r.bottom;
+        break;
+      case "right":
+      case "right-start":
+      case "right-end":
+        i = r.right + _ + a, l = e === "right" ? r.top + r.height / 2 : e === "right-start" ? r.top : r.bottom;
+        break;
+    }
+    V({ top: l, left: i });
+  }, [r, t]), x(() => {
+    if (!f) return;
+    E();
+    const e = () => E();
+    return window.addEventListener("resize", e), window.addEventListener("scroll", e, !0), () => {
+      window.removeEventListener("resize", e), window.removeEventListener("scroll", e, !0);
+    };
+  }, [f, c, E]), x(() => {
+    if (!f) return;
+    const e = p();
+    e && e.scrollIntoView({ behavior: "smooth", block: "center" });
+  }, [f, c, p]);
+  const q = T(async () => {
+    var e, a, l;
+    if (t != null && t.onAfterStep && await t.onAfterStep(), h)
+      m == null || m(), d == null || d();
+    else {
+      const i = c + 1;
+      L(i), b == null || b(i), (e = s[i]) != null && e.onBeforeStep && await ((l = (a = s[i]).onBeforeStep) == null ? void 0 : l.call(a));
+    }
+  }, [c, h, t, s, m, d, b]), Z = T(async () => {
+    var a, l, i;
+    t != null && t.onAfterStep && await t.onAfterStep();
+    const e = c - 1;
+    L(e), b == null || b(e), (a = s[e]) != null && a.onBeforeStep && await ((i = (l = s[e]).onBeforeStep) == null ? void 0 : i.call(l));
+  }, [c, t, s, b]), N = T(() => {
+    d == null || d();
+  }, [d]), $ = (t == null ? void 0 : t.placement) || o.PLACEMENT, g = (t == null ? void 0 : t.spotlightPadding) ?? o.SPOTLIGHT_PADDING;
+  return !f || !t ? null : /* @__PURE__ */ u(
+    "div",
+    {
+      className: y("Bear-Tour", W),
+      "data-testid": X,
+      children: [
+        /* @__PURE__ */ n(
+          "div",
+          {
+            className: "Bear-Tour__overlay bear-fixed bear-inset-0",
+            style: {
+              zIndex: S.OVERLAY,
+              backgroundColor: P,
+              opacity: I,
+              transition: v ? "opacity 0.3s" : "none"
+            },
+            onClick: N
+          }
+        ),
+        r && /* @__PURE__ */ n(
+          "div",
+          {
+            className: "Bear-Tour__spotlight bear-fixed bear-pointer-events-none",
+            style: {
+              zIndex: S.SPOTLIGHT,
+              top: r.top - g,
+              left: r.left - g,
+              width: r.width + g * 2,
+              height: r.height + g * 2,
+              borderRadius: 8,
+              boxShadow: `0 0 0 9999px ${P}`,
+              opacity: I,
+              transition: v ? "all 0.3s ease" : "none"
+            }
+          }
+        ),
+        /* @__PURE__ */ u(
+          "div",
+          {
+            ref: j,
+            className: "Bear-Tour__tooltip bear-fixed bear-bg-white dark:bear-bg-neutral-800 bear-rounded-lg bear-shadow-xl bear-p-4",
+            style: {
+              zIndex: S.TOOLTIP,
+              top: k.top,
+              left: k.left,
+              minWidth: 280,
+              maxWidth: 360,
+              ...J[$],
+              transition: v ? "all 0.3s ease" : "none"
+            },
+            children: [
+              U && /* @__PURE__ */ n(
+                "button",
+                {
+                  className: "Bear-Tour__close bear-absolute bear-top-2 bear-right-2 bear-p-1 bear-text-neutral-400 hover:bear-text-neutral-600 dark:hover:bear-text-neutral-300 bear-cursor-pointer bear-bg-transparent bear-border-none",
+                  onClick: N,
+                  "aria-label": "Close tour",
+                  children: /* @__PURE__ */ n("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ n("path", { d: "M18 6L6 18M6 6l12 12" }) })
+                }
+              ),
+              /* @__PURE__ */ u("div", { className: "Bear-Tour__content bear-pr-6", children: [
+                t.title && /* @__PURE__ */ n(A, { variant: "h6", className: "bear-mb-2", children: t.title }),
+                t.description && /* @__PURE__ */ n(A, { variant: "body2", color: "secondary", className: "bear-mb-4", children: t.description }),
+                t.content
+              ] }),
+              /* @__PURE__ */ u("div", { className: "Bear-Tour__footer bear-flex bear-items-center bear-justify-between bear-mt-4 bear-pt-3 bear-border-t bear-border-neutral-200 dark:bear-border-neutral-700", children: [
+                R && /* @__PURE__ */ n("div", { className: "bear-flex bear-gap-1.5", children: s.map((e, a) => /* @__PURE__ */ n(
+                  "div",
+                  {
+                    className: y(
+                      "bear-w-2 bear-h-2 bear-rounded-full bear-transition-colors",
+                      a === c ? "bear-bg-[var(--bear-primary-500)]" : "bear-bg-neutral-300 dark:bear-bg-neutral-600"
+                    )
+                  },
+                  a
+                )) }),
+                /* @__PURE__ */ u("div", { className: "bear-flex bear-gap-2 bear-ml-auto", children: [
+                  z && !h && /* @__PURE__ */ n(O, { variant: "ghost", size: "sm", onClick: N, children: M }),
+                  D && !Y && /* @__PURE__ */ n(O, { variant: "outline", size: "sm", onClick: Z, children: t.prevText || o.PREV_TEXT }),
+                  /* @__PURE__ */ n(O, { variant: "primary", size: "sm", onClick: q, children: h ? H : t.nextText || o.NEXT_TEXT })
+                ] })
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  ot as Tour
+};

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

@@ -0,0 +1,80 @@
+import { ReactNode } from 'react';
+export interface TourStep {
+    /** Target element selector or ref */
+    target: string | (() => HTMLElement | null);
+    /** Step title */
+    title?: ReactNode;
+    /** Step description */
+    description?: ReactNode;
+    /** Custom content */
+    content?: ReactNode;
+    /** Placement of the tooltip */
+    placement?: TourPlacement;
+    /** Disable interaction with target */
+    disableInteraction?: boolean;
+    /** Show spotlight on target */
+    spotlightPadding?: number;
+    /** Custom next button text */
+    nextText?: string;
+    /** Custom prev button text */
+    prevText?: string;
+    /** Before step callback */
+    onBeforeStep?: () => Promise<void> | void;
+    /** After step callback */
+    onAfterStep?: () => Promise<void> | void;
+}
+export type TourPlacement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end';
+export interface TourProps {
+    /** Array of tour steps */
+    steps: TourStep[];
+    /** Whether tour is open */
+    open?: boolean;
+    /** Current step index */
+    current?: number;
+    /** Called when tour closes */
+    onClose?: () => void;
+    /** Called when step changes */
+    onStepChange?: (current: number) => void;
+    /** Called when tour finishes */
+    onFinish?: () => void;
+    /** Show step indicators */
+    showIndicators?: boolean;
+    /** Show close button */
+    showCloseButton?: boolean;
+    /** Show skip button */
+    showSkipButton?: boolean;
+    /** Show prev button */
+    showPrevButton?: boolean;
+    /** Finish button text */
+    finishText?: string;
+    /** Skip button text */
+    skipText?: string;
+    /** Custom class name */
+    className?: string;
+    /** Mask/overlay opacity */
+    maskOpacity?: number;
+    /** Mask color */
+    maskColor?: string;
+    /** Animation enabled */
+    animated?: boolean;
+    /** Test ID */
+    testId?: string;
+}
+export interface UseTourReturn {
+    /** Start the tour */
+    start: () => void;
+    /** Stop the tour */
+    stop: () => void;
+    /** Go to next step */
+    next: () => void;
+    /** Go to previous step */
+    prev: () => void;
+    /** Go to specific step */
+    goTo: (step: number) => void;
+    /** Whether tour is active */
+    isActive: boolean;
+    /** Current step index */
+    currentStep: number;
+    /** Total steps count */
+    totalSteps: number;
+}

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

@@ -0,0 +1,4 @@
+export { Tour, default } from './Tour';
+export { useTour } from './useTour';
+export * from './Tour.types';
+export * from './Tour.const';

package/dist/components/Tour/useTour.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react"),b=l=>{const[o,a]=t.useState(!1),[c,n]=t.useState(0),u=t.useCallback(()=>{n(0),a(!0)},[]),s=t.useCallback(()=>{a(!1),n(0)},[]),r=t.useCallback(()=>{c<l.length-1?n(e=>e+1):s()},[c,l.length,s]),i=t.useCallback(()=>{c>0&&n(e=>e-1)},[c]),g=t.useCallback(e=>{e>=0&&e<l.length&&n(e)},[l.length]);return{start:u,stop:s,next:r,prev:i,goTo:g,isActive:o,currentStep:c,totalSteps:l.length}};exports.useTour=b;

package/dist/components/Tour/useTour.d.ts

@@ -0,0 +1,14 @@
+import { UseTourReturn, TourStep } from './Tour.types';
+/**
+ * useTour - Hook to control tour programmatically
+ *
+ * @example
+ * ```tsx
+ * const steps = [...];
+ * const { start, stop, next, prev, isActive, currentStep } = useTour(steps);
+ *
+ * <Tour steps={steps} open={isActive} current={currentStep} onClose={stop} />
+ * <Button onClick={start}>Start Tour</Button>
+ * ```
+ */
+export declare const useTour: (steps: TourStep[]) => UseTourReturn;

package/dist/components/Tour/useTour.js

@@ -0,0 +1,27 @@
+import { useState as s, useCallback as r } from "react";
+const S = (e) => {
+  const [u, l] = s(!1), [n, o] = s(0), a = r(() => {
+    o(0), l(!0);
+  }, []), c = r(() => {
+    l(!1), o(0);
+  }, []), i = r(() => {
+    n < e.length - 1 ? o((t) => t + 1) : c();
+  }, [n, e.length, c]), f = r(() => {
+    n > 0 && o((t) => t - 1);
+  }, [n]), g = r((t) => {
+    t >= 0 && t < e.length && o(t);
+  }, [e.length]);
+  return {
+    start: a,
+    stop: c,
+    next: i,
+    prev: f,
+    goTo: g,
+    isActive: u,
+    currentStep: n,
+    totalSteps: e.length
+  };
+};
+export {
+  S as useTour
+};

package/dist/components/Typography/Typography.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const T=require("react/jsx-runtime"),A=require("../../utils/cn.cjs"),C={h1:"h1",h2:"h2",h3:"h3",h4:"h4",h5:"h5",h6:"h6",subtitle1:"h6",subtitle2:"h6",body1:"p",body2:"p",caption:"span",overline:"span",code:"code"},E={h1:"bear-text-5xl bear-font-bold bear-tracking-tight",h2:"bear-text-4xl bear-font-bold bear-tracking-tight",h3:"bear-text-3xl bear-font-semibold",h4:"bear-text-2xl bear-font-semibold",h5:"bear-text-xl bear-font-medium",h6:"bear-text-lg bear-font-medium",subtitle1:"bear-text-lg bear-font-normal",subtitle2:"bear-text-base bear-font-medium",body1:"bear-text-base bear-font-normal",body2:"bear-text-sm bear-font-normal",caption:"bear-text-xs",overline:"bear-text-xs bear-uppercase bear-tracking-wider",code:"bear-text-sm bear-font-mono bear-bg-gray-100 dark:bear-bg-gray-800 bear-px-1.5 bear-py-0.5 bear-rounded"},B={thin:"bear-font-thin",light:"bear-font-light",normal:"bear-font-normal",medium:"bear-font-medium",semibold:"bear-font-semibold",bold:"bear-font-bold",extrabold:"bear-font-extrabold"},_={left:"bear-text-left",center:"bear-text-center",right:"bear-text-right",justify:"bear-text-justify"},i={primary:"bear-text-gray-900 dark:bear-text-gray-100",secondary:"bear-text-gray-600 dark:bear-text-gray-400",muted:"bear-text-gray-400 dark:bear-text-gray-500",success:"bear-text-green-600 dark:bear-text-green-400",danger:"bear-text-red-600 dark:bear-text-red-400",warning:"bear-text-amber-600 dark:bear-text-amber-400"},I={tight:"bear-leading-tight",normal:"bear-leading-normal",relaxed:"bear-leading-relaxed",loose:"bear-leading-loose"},L=({variant:t="body1",component:d,align:b,weight:o,color:e="primary",truncate:a=!1,maxLines:r,italic:s=!1,underline:h=!1,strikethrough:x=!1,noWrap:g=!1,inline:y=!1,paragraph:p=!1,lineHeight:n,children:m,className:f,style:c,testId:u,...S})=>{const k=d||C[t],l=e&&!i[e];return T.jsx(k,{className:A.cn("Bear-Typography",`Bear-Typography--${t}`,E[t],o&&B[o],b&&_[b],!l&&e&&i[e],n&&I[n],s&&"Bear-Typography--italic bear-italic",h&&"Bear-Typography--underline bear-underline",x&&"Bear-Typography--strikethrough bear-line-through",g&&"bear-whitespace-nowrap",y&&"bear-inline",p&&"bear-mb-4",a&&!r&&"Bear-Typography--truncate bear-truncate",a&&r&&"bear-overflow-hidden",f),style:{...c,...l&&{color:e},...a&&r&&{display:"-webkit-box",WebkitLineClamp:r,WebkitBoxOrient:"vertical"}},"data-testid":u,...S,children:m})};exports.Typography=L;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const _=require("react/jsx-runtime"),i=require("react"),W=require("../../utils/cn.cjs"),L=require("../../context/BearProvider.cjs"),N={h1:"h1",h2:"h2",h3:"h3",h4:"h4",h5:"h5",h6:"h6",subtitle1:"h6",subtitle2:"h6",body1:"p",body2:"p",caption:"span",overline:"span",code:"code",inherit:"span"},H={h1:"bear-text-5xl bear-font-bold bear-tracking-tight",h2:"bear-text-4xl bear-font-bold bear-tracking-tight",h3:"bear-text-3xl bear-font-semibold",h4:"bear-text-2xl bear-font-semibold",h5:"bear-text-xl bear-font-medium",h6:"bear-text-lg bear-font-medium",subtitle1:"bear-text-lg bear-font-normal",subtitle2:"bear-text-base bear-font-medium",body1:"bear-text-base bear-font-normal",body2:"bear-text-sm bear-font-normal",caption:"bear-text-xs",overline:"bear-text-xs bear-uppercase bear-tracking-wider",code:"bear-text-sm bear-font-mono bear-bg-gray-100 dark:bear-bg-gray-800 bear-px-1.5 bear-py-0.5 bear-rounded",inherit:""},R={thin:"bear-font-thin",light:"bear-font-light",normal:"bear-font-normal",medium:"bear-font-medium",semibold:"bear-font-semibold",bold:"bear-font-bold",extrabold:"bear-font-extrabold"},j={thin:100,light:300,normal:400,medium:500,semibold:600,bold:700,extrabold:800},w={left:"bear-text-left",center:"bear-text-center",right:"bear-text-right",justify:"bear-text-justify"},y={primary:"bear-text-gray-900 dark:bear-text-gray-100",secondary:"bear-text-gray-600 dark:bear-text-gray-400",muted:"bear-text-gray-400 dark:bear-text-gray-500",success:"bear-text-green-600 dark:bear-text-green-400",danger:"bear-text-red-600 dark:bear-text-red-400",warning:"bear-text-amber-600 dark:bear-text-amber-400"},M={tight:"bear-leading-tight",normal:"bear-leading-normal",relaxed:"bear-leading-relaxed",loose:"bear-leading-loose"},q=["h1","h2","h3","h4","h5","h6","subtitle1","subtitle2","body1","body2","caption","overline","code","inherit"],G=({variant:t="body1",component:s,align:h,weight:d,color:o="primary",truncate:l=!1,maxLines:b,italic:m=!1,underline:u=!1,strikethrough:c=!1,noWrap:p=!1,inline:x=!1,paragraph:S=!1,lineHeight:f,children:T,className:k,style:A,testId:C,...B})=>{const r=i.useContext(L.BearContext),n=q.includes(t),e=i.useMemo(()=>{if(!(n||!(r!=null&&r.customTypography)))return r.customTypography[t]},[n,r==null?void 0:r.customTypography,t]),I=i.useMemo(()=>s||(e!=null&&e.component?e.component:n?N[t]:"span"),[s,e,n,t]),g=o&&!y[o],E=i.useMemo(()=>{if(!e)return{};const a={};return e.fontSize&&(a.fontSize=e.fontSize),e.lineHeight&&(a.lineHeight=e.lineHeight),e.letterSpacing&&(a.letterSpacing=e.letterSpacing),e.textTransform&&(a.textTransform=e.textTransform),e.fontFamily&&(a.fontFamily=e.fontFamily),e.fontWeight&&(a.fontWeight=typeof e.fontWeight=="number"?e.fontWeight:j[e.fontWeight]||400),a},[e]);return _.jsx(I,{className:W.cn("Bear-Typography",`Bear-Typography--${t}`,n&&H[t],d&&R[d],h&&w[h],!g&&o&&y[o],f&&M[f],m&&"Bear-Typography--italic bear-italic",u&&"Bear-Typography--underline bear-underline",c&&"Bear-Typography--strikethrough bear-line-through",p&&"bear-whitespace-nowrap",x&&"bear-inline",S&&"bear-mb-4",l&&!b&&"Bear-Typography--truncate bear-truncate",l&&b&&"bear-overflow-hidden",k),style:{...E,...A,...g&&{color:o},...l&&b&&{display:"-webkit-box",WebkitLineClamp:b,WebkitBoxOrient:"vertical"}},"data-testid":C,...B,children:T})};exports.Typography=G;

package/dist/components/Typography/Typography.d.ts

@@ -5,9 +5,13 @@ import { TypographyProps } from './Typography.types';
  *
  * @example
  * ```tsx
+ * // Built-in variants
  * <Typography variant="h1">Heading 1</Typography>
  * <Typography variant="body1" color="secondary">Body text</Typography>
- * <Typography variant="caption" truncate maxLines={2}>Long text...</Typography>
+ *
+ * // Custom variants (defined in BearProvider)
+ * <Typography variant="b250">Custom 25px text</Typography>
+ * <Typography variant="display1">Large display text</Typography>
  * ```
  */
 export declare const Typography: FC<TypographyProps>;

package/dist/components/Typography/Typography.js

@@ -1,6 +1,8 @@
-import { jsx as A } from "react/jsx-runtime";
-import { cn as T } from "../../utils/cn.js";
-const C = {
+import { jsx as _ } from "react/jsx-runtime";
+import { useContext as W, useMemo as s } from "react";
+import { cn as L } from "../../utils/cn.js";
+import { BearContext as N } from "../../context/BearProvider.js";
+const H = {
   h1: "h1",
   h2: "h2",
   h3: "h3",
@@ -13,8 +15,9 @@ const C = {
   body2: "p",
   caption: "span",
   overline: "span",
-  code: "code"
-}, E = {
+  code: "code",
+  inherit: "span"
+}, w = {
   h1: "bear-text-5xl bear-font-bold bear-tracking-tight",
   h2: "bear-text-4xl bear-font-bold bear-tracking-tight",
   h3: "bear-text-3xl bear-font-semibold",
@@ -27,8 +30,10 @@ const C = {
   body2: "bear-text-sm bear-font-normal",
   caption: "bear-text-xs",
   overline: "bear-text-xs bear-uppercase bear-tracking-wider",
-  code: "bear-text-sm bear-font-mono bear-bg-gray-100 dark:bear-bg-gray-800 bear-px-1.5 bear-py-0.5 bear-rounded"
-}, B = {
+  code: "bear-text-sm bear-font-mono bear-bg-gray-100 dark:bear-bg-gray-800 bear-px-1.5 bear-py-0.5 bear-rounded",
+  inherit: ""
+  // Inherits all styles from parent
+}, G = {
   thin: "bear-font-thin",
   light: "bear-font-light",
   normal: "bear-font-normal",
@@ -36,81 +41,112 @@ const C = {
   semibold: "bear-font-semibold",
   bold: "bear-font-bold",
   extrabold: "bear-font-extrabold"
-}, _ = {
+}, R = {
+  thin: 100,
+  light: 300,
+  normal: 400,
+  medium: 500,
+  semibold: 600,
+  bold: 700,
+  extrabold: 800
+}, V = {
   left: "bear-text-left",
   center: "bear-text-center",
   right: "bear-text-right",
   justify: "bear-text-justify"
-}, i = {
+}, g = {
   primary: "bear-text-gray-900 dark:bear-text-gray-100",
   secondary: "bear-text-gray-600 dark:bear-text-gray-400",
   muted: "bear-text-gray-400 dark:bear-text-gray-500",
   success: "bear-text-green-600 dark:bear-text-green-400",
   danger: "bear-text-red-600 dark:bear-text-red-400",
   warning: "bear-text-amber-600 dark:bear-text-amber-400"
-}, I = {
+}, j = {
   tight: "bear-leading-tight",
   normal: "bear-leading-normal",
   relaxed: "bear-leading-relaxed",
   loose: "bear-leading-loose"
-}, N = ({
-  variant: a = "body1",
-  component: d,
-  align: b,
-  weight: o,
-  color: e = "primary",
-  truncate: t = !1,
-  maxLines: r,
-  italic: s = !1,
-  underline: x = !1,
-  strikethrough: h = !1,
-  noWrap: g = !1,
-  inline: m = !1,
-  paragraph: y = !1,
-  lineHeight: n,
-  children: p,
-  className: f,
-  style: c,
-  testId: u,
-  ...S
+}, z = [
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "h5",
+  "h6",
+  "subtitle1",
+  "subtitle2",
+  "body1",
+  "body2",
+  "caption",
+  "overline",
+  "code",
+  "inherit"
+], P = ({
+  variant: t = "body1",
+  component: i,
+  align: h,
+  weight: d,
+  color: o = "primary",
+  truncate: l = !1,
+  maxLines: b,
+  italic: p = !1,
+  underline: y = !1,
+  strikethrough: x = !1,
+  noWrap: u = !1,
+  inline: c = !1,
+  paragraph: S = !1,
+  lineHeight: f,
+  children: T,
+  className: k,
+  style: A,
+  testId: C,
+  ...I
 }) => {
-  const k = d || C[a], l = e && !i[e];
-  return /* @__PURE__ */ A(
-    k,
+  const r = W(N), n = z.includes(t), e = s(() => {
+    if (!(n || !(r != null && r.customTypography)))
+      return r.customTypography[t];
+  }, [n, r == null ? void 0 : r.customTypography, t]), B = s(() => i || (e != null && e.component ? e.component : n ? H[t] : "span"), [i, e, n, t]), m = o && !g[o], E = s(() => {
+    if (!e) return {};
+    const a = {};
+    return e.fontSize && (a.fontSize = e.fontSize), e.lineHeight && (a.lineHeight = e.lineHeight), e.letterSpacing && (a.letterSpacing = e.letterSpacing), e.textTransform && (a.textTransform = e.textTransform), e.fontFamily && (a.fontFamily = e.fontFamily), e.fontWeight && (a.fontWeight = typeof e.fontWeight == "number" ? e.fontWeight : R[e.fontWeight] || 400), a;
+  }, [e]);
+  return /* @__PURE__ */ _(
+    B,
     {
-      className: T(
+      className: L(
         "Bear-Typography",
-        `Bear-Typography--${a}`,
-        E[a],
-        o && B[o],
-        b && _[b],
-        !l && e && i[e],
-        n && I[n],
-        s && "Bear-Typography--italic bear-italic",
-        x && "Bear-Typography--underline bear-underline",
-        h && "Bear-Typography--strikethrough bear-line-through",
-        g && "bear-whitespace-nowrap",
-        m && "bear-inline",
-        y && "bear-mb-4",
-        t && !r && "Bear-Typography--truncate bear-truncate",
-        t && r && "bear-overflow-hidden",
-        f
+        `Bear-Typography--${t}`,
+        n && w[t],
+        d && G[d],
+        h && V[h],
+        !m && o && g[o],
+        f && j[f],
+        p && "Bear-Typography--italic bear-italic",
+        y && "Bear-Typography--underline bear-underline",
+        x && "Bear-Typography--strikethrough bear-line-through",
+        u && "bear-whitespace-nowrap",
+        c && "bear-inline",
+        S && "bear-mb-4",
+        l && !b && "Bear-Typography--truncate bear-truncate",
+        l && b && "bear-overflow-hidden",
+        k
       ),
       style: {
-        ...c,
-        ...l && { color: e },
-        ...t && r && {
+        ...E,
+        ...A,
+        ...m && { color: o },
+        ...l && b && {
           display: "-webkit-box",
-          WebkitLineClamp: r,
+          WebkitLineClamp: b,
           WebkitBoxOrient: "vertical"
         }
       },
-      "data-testid": u,
-      ...S,
-      children: p
+      "data-testid": C,
+      ...I,
+      children: T
     }
   );
 };
 export {
-  N as Typography
+  P as Typography
 };

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

@@ -1,8 +1,35 @@
 import { HTMLAttributes, ReactNode, ElementType } from 'react';
-export type TypographyVariant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'subtitle1' | 'subtitle2' | 'body1' | 'body2' | 'caption' | 'overline' | 'code';
+/** Built-in typography variants */
+export type BuiltInTypographyVariant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'subtitle1' | 'subtitle2' | 'body1' | 'body2' | 'caption' | 'overline' | 'code' | 'inherit';
+/** Typography variant - can be built-in or custom (string) */
+export type TypographyVariant = BuiltInTypographyVariant | (string & {});
 export type TypographyAlign = 'left' | 'center' | 'right' | 'justify';
+/**
+ * Custom typography variant definition
+ * Define your own text styles like "b250", "display1", etc.
+ */
+export interface CustomTypography {
+    /** Font size in px, rem, or em (e.g., "25px", "1.5rem") */
+    fontSize?: string;
+    /** Font weight */
+    fontWeight?: 'thin' | 'light' | 'normal' | 'medium' | 'semibold' | 'bold' | 'extrabold' | number;
+    /** Line height (e.g., "1.2", "1.5", "32px") */
+    lineHeight?: string;
+    /** Letter spacing (e.g., "0.05em", "1px") */
+    letterSpacing?: string;
+    /** Text transform */
+    textTransform?: 'none' | 'uppercase' | 'lowercase' | 'capitalize';
+    /** Font family override */
+    fontFamily?: string;
+    /** HTML element to render as */
+    component?: ElementType;
+}
+/** Map of custom typography variants */
+export type CustomTypographyMap = {
+    [key: string]: CustomTypography;
+};
 export interface TypographyProps extends HTMLAttributes<HTMLElement> {
-    /** Typography variant */
+    /** Typography variant - built-in or custom */
     variant?: TypographyVariant;
     /** HTML element to render as */
     component?: ElementType;