@forgedevstack/bear 1.0.2 → 1.0.4-alpha

package/dist/components/Timeline/Timeline.const.js

@@ -0,0 +1,58 @@
+const t = "Bear-Timeline relative", e = "Bear-Timeline__item relative pb-8 last:pb-0", r = {
+  left: {
+    wrapper: "pl-8",
+    content: "text-left",
+    dot: "left-0",
+    line: "left-3"
+  },
+  right: {
+    wrapper: "pr-8 text-right",
+    content: "text-right",
+    dot: "right-0",
+    line: "right-3"
+  },
+  alternate: {
+    wrapper: "",
+    content: "",
+    dot: "",
+    line: "left-1/2 -translate-x-1/2"
+  }
+}, E = "Bear-Timeline__dot absolute rounded-full border-2 border-white dark:border-zinc-900 z-10 transition-all", n = {
+  sm: "w-3 h-3",
+  md: "w-4 h-4",
+  lg: "w-5 h-5"
+}, I = {
+  sm: "w-6 h-6",
+  md: "w-8 h-8",
+  lg: "w-10 h-10"
+}, l = {
+  pink: "bg-pink-500",
+  green: "bg-green-500",
+  blue: "bg-blue-500",
+  amber: "bg-amber-500",
+  red: "bg-red-500",
+  gray: "bg-gray-400 dark:bg-zinc-600"
+}, _ = "Bear-Timeline__line absolute top-0 w-0.5 h-full", a = "bg-gray-200 dark:bg-zinc-700", i = "Bear-Timeline__content", o = {
+  sm: "text-sm",
+  md: "text-base",
+  lg: "text-lg"
+}, T = {
+  sm: "text-xs",
+  md: "text-sm",
+  lg: "text-base"
+}, s = "text-xs text-gray-500 dark:text-gray-400";
+export {
+  t as TIMELINE_BASE_CLASSES,
+  i as TIMELINE_CONTENT_BASE,
+  T as TIMELINE_DESC_SIZES,
+  E as TIMELINE_DOT_BASE,
+  l as TIMELINE_DOT_COLORS,
+  I as TIMELINE_DOT_ICON_SIZES,
+  n as TIMELINE_DOT_SIZES,
+  e as TIMELINE_ITEM_BASE,
+  _ as TIMELINE_LINE_BASE,
+  a as TIMELINE_LINE_COLOR,
+  r as TIMELINE_POSITIONS,
+  s as TIMELINE_TIME_CLASSES,
+  o as TIMELINE_TITLE_SIZES
+};

package/dist/components/Timeline/Timeline.d.ts

@@ -1,3 +1,17 @@
-import { FC } from 'react';
 import { TimelineProps } from './Timeline.types';
-export declare const Timeline: FC<TimelineProps>;
+/**
+ * Timeline - Vertical timeline for events
+ *
+ * @example
+ * ```tsx
+ * <Timeline
+ *   items={[
+ *     { title: 'Step 1', description: 'Description', time: '2024-01-01' },
+ *     { title: 'Step 2', description: 'Description', time: '2024-01-02', active: true },
+ *     { title: 'Step 3', description: 'Description', time: '2024-01-03' },
+ *   ]}
+ * />
+ * ```
+ */
+export declare const Timeline: import('react').ForwardRefExoticComponent<TimelineProps & import('react').RefAttributes<HTMLDivElement>>;
+export default Timeline;

package/dist/components/Timeline/Timeline.js

@@ -1,71 +1,139 @@
-import { jsx as a, jsxs as h } from "react/jsx-runtime";
+import { jsxs as o, jsx as l } from "react/jsx-runtime";
+import { forwardRef as y, useMemo as O } from "react";
 import { cn as r } from "../../utils/cn.js";
-const w = ({
-  items: d,
-  orientation: f = "vertical",
-  position: t = "left",
-  className: m,
-  size: l = "md",
-  showConnector: g = !0
-}) => {
-  const c = {
-    default: "bear-bg-zinc-600 bear-border-zinc-600",
-    primary: "bear-bg-pink-500 bear-border-pink-500",
-    success: "bear-bg-green-500 bear-border-green-500",
-    warning: "bear-bg-yellow-500 bear-border-yellow-500",
-    error: "bear-bg-red-500 bear-border-red-500",
-    info: "bear-bg-blue-500 bear-border-blue-500"
-  }, o = {
-    sm: { dot: "bear-w-2.5 bear-h-2.5", iconDot: "bear-w-6 bear-h-6", text: "bear-text-xs", title: "bear-text-sm" },
-    md: { dot: "bear-w-3 bear-h-3", iconDot: "bear-w-8 bear-h-8", text: "bear-text-sm", title: "bear-text-base" },
-    lg: { dot: "bear-w-4 bear-h-4", iconDot: "bear-w-10 bear-h-10", text: "bear-text-base", title: "bear-text-lg" }
-  }, b = f === "vertical";
-  return /* @__PURE__ */ a("div", { className: r(
-    "bear-relative",
-    b ? "" : "bear-flex bear-items-start",
-    m
-  ), children: d.map((e, i) => {
-    const n = t === "left" || t === "alternate" && i % 2 === 0, u = i === d.length - 1, s = e.color || "default", x = e.dotVariant === "icon" && e.icon;
-    return /* @__PURE__ */ h(
+import { TIMELINE_LINE_COLOR as k, TIMELINE_POSITIONS as A, TIMELINE_LINE_BASE as w, TIMELINE_TIME_CLASSES as B, TIMELINE_TITLE_SIZES as C, TIMELINE_DESC_SIZES as D, TIMELINE_CONTENT_BASE as Z, TIMELINE_ITEM_BASE as b, TIMELINE_BASE_CLASSES as j, TIMELINE_DOT_COLORS as _, TIMELINE_DOT_ICON_SIZES as R, TIMELINE_DOT_BASE as N, TIMELINE_DOT_SIZES as X } from "./Timeline.const.js";
+const z = y(
+  ({
+    items: E,
+    position: e = "left",
+    size: c = "md",
+    showLine: S = !0,
+    pending: n,
+    reverse: I = !1,
+    lineColor: i,
+    testId: T,
+    className: f,
+    ...m
+  }, p) => {
+    const d = A[e], x = X[c], L = R[c], h = C[c], M = D[c], u = O(() => {
+      let t = [...E];
+      return I && (t = t.reverse()), n && t.push({
+        title: typeof n == "string" ? n : "Loading...",
+        description: typeof n == "boolean" ? void 0 : n,
+        color: "gray"
+      }), t;
+    }, [E, I, n]), v = (t) => {
+      const a = t.color || "pink", s = t.active;
+      return t.icon ? /* @__PURE__ */ l(
+        "div",
+        {
+          className: r(
+            N,
+            L,
+            _[a],
+            "flex items-center justify-center text-white",
+            s && "ring-4 ring-pink-500/30"
+          ),
+          style: {
+            top: "2px",
+            ...e === "left" ? { left: "-4px" } : {},
+            ...e === "right" ? { right: "-4px" } : {},
+            ...e === "alternate" ? { left: "50%", transform: "translateX(-50%)" } : {}
+          },
+          children: t.icon
+        }
+      ) : /* @__PURE__ */ l(
+        "div",
+        {
+          className: r(
+            N,
+            x,
+            _[a],
+            s && "ring-4 ring-pink-500/30 scale-125"
+          ),
+          style: {
+            top: "6px",
+            ...e === "left" ? { left: "0" } : {},
+            ...e === "right" ? { right: "0" } : {},
+            ...e === "alternate" ? { left: "50%", transform: "translateX(-50%)" } : {}
+          }
+        }
+      );
+    }, g = (t) => {
+      if (e !== "alternate") return {};
+      const a = t % 2 === 0;
+      return {
+        wrapper: a ? "pr-8 text-right w-1/2" : "pl-8 text-left w-1/2 ml-auto",
+        content: a ? "text-right" : "text-left"
+      };
+    };
+    return /* @__PURE__ */ o(
       "div",
       {
-        className: r(
-          "bear-relative",
-          b ? "bear-pb-6" : "bear-flex-1 bear-pr-4",
-          b && t === "alternate" && (n ? "bear-pr-8 bear-text-right" : "bear-pl-8")
-        ),
+        ref: p,
+        className: r(j, f),
+        "data-testid": T,
+        ...m,
         children: [
-          /* @__PURE__ */ a("div", { className: r(
-            "bear-absolute",
-            b ? t === "alternate" ? n ? "bear-right-0 bear-translate-x-1/2" : "bear-left-0 -bear-translate-x-1/2" : "bear-left-0" : "bear-top-0",
-            x ? "" : "bear-top-1"
-          ), children: x ? /* @__PURE__ */ a("div", { className: r(
-            "bear-rounded-full bear-flex bear-items-center bear-justify-center bear-text-white",
-            o[l].iconDot,
-            c[s]
-          ), children: e.icon }) : /* @__PURE__ */ a("div", { className: r(
-            "bear-rounded-full",
-            o[l].dot,
-            e.dotVariant === "outlined" ? `bear-border-2 bear-bg-zinc-900 ${c[s]}` : c[s]
-          ) }) }),
-          g && !u && /* @__PURE__ */ a("div", { className: r(
-            "bear-absolute bear-bg-zinc-700",
-            b ? t === "alternate" ? n ? "bear-right-0 bear-w-0.5 bear-top-4 bear-bottom-0 bear-translate-x-1/2" : "bear-left-0 bear-w-0.5 bear-top-4 bear-bottom-0 -bear-translate-x-1/2" : "bear-left-1 bear-w-0.5 bear-top-4 bear-bottom-0" : "bear-left-3 bear-h-0.5 bear-top-1.5 bear-right-0"
-          ) }),
-          /* @__PURE__ */ h("div", { className: r(
-            b && t !== "alternate" && "bear-pl-6",
-            b && t === "alternate" && !n && "bear-pl-6"
-          ), children: [
-            e.date && /* @__PURE__ */ a("div", { className: r("bear-text-zinc-500 bear-mb-1", o[l].text), children: e.date }),
-            /* @__PURE__ */ a("div", { className: r("bear-font-medium bear-text-white", o[l].title), children: e.title }),
-            e.description && /* @__PURE__ */ a("div", { className: r("bear-text-zinc-400 bear-mt-1", o[l].text), children: e.description })
-          ] })
+          S && /* @__PURE__ */ l(
+            "div",
+            {
+              className: r(
+                w,
+                d.line,
+                i ? "" : k
+              ),
+              style: i ? { backgroundColor: i } : void 0
+            }
+          ),
+          u.map((t, a) => {
+            const s = g(a);
+            return /* @__PURE__ */ o(
+              "div",
+              {
+                className: r(
+                  b,
+                  e !== "alternate" && d.wrapper,
+                  s.wrapper
+                ),
+                children: [
+                  v(t),
+                  /* @__PURE__ */ o("div", { className: r(Z, s.content), children: [
+                    t.time && /* @__PURE__ */ l("div", { className: r(B, "mb-1"), children: t.time }),
+                    /* @__PURE__ */ l(
+                      "h4",
+                      {
+                        className: r(
+                          "Bear-Timeline__title font-medium text-gray-900 dark:text-white",
+                          h,
+                          t.active && "text-pink-600 dark:text-pink-400"
+                        ),
+                        children: t.title
+                      }
+                    ),
+                    t.description && /* @__PURE__ */ l(
+                      "div",
+                      {
+                        className: r(
+                          "Bear-Timeline__description text-gray-600 dark:text-gray-400 mt-1",
+                          M
+                        ),
+                        children: t.description
+                      }
+                    ),
+                    t.extra && /* @__PURE__ */ l("div", { className: "Bear-Timeline__extra mt-3", children: t.extra })
+                  ] })
+                ]
+              },
+              a
+            );
+          })
         ]
-      },
-      e.id
+      }
     );
-  }) });
-};
+  }
+);
+z.displayName = "Timeline";
 export {
-  w as Timeline
+  z as Timeline
 };

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

@@ -1,18 +1,37 @@
-import { ReactNode } from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+export type TimelinePosition = 'left' | 'right' | 'alternate';
+export type TimelineSize = 'sm' | 'md' | 'lg';
 export interface TimelineItem {
-    id: string;
+    /** Item title */
     title: string;
+    /** Item description/content */
     description?: ReactNode;
-    date?: string;
+    /** Time/date label */
+    time?: string;
+    /** Custom icon */
     icon?: ReactNode;
-    color?: 'default' | 'primary' | 'success' | 'warning' | 'error' | 'info';
-    dotVariant?: 'filled' | 'outlined' | 'icon';
+    /** Dot color */
+    color?: 'pink' | 'green' | 'blue' | 'amber' | 'red' | 'gray';
+    /** Is active/current item */
+    active?: boolean;
+    /** Extra content below description */
+    extra?: ReactNode;
 }
-export interface TimelineProps {
+export interface TimelineProps extends HTMLAttributes<HTMLDivElement> {
+    /** Array of timeline items */
     items: TimelineItem[];
-    orientation?: 'vertical' | 'horizontal';
-    position?: 'left' | 'right' | 'alternate';
-    className?: string;
-    size?: 'sm' | 'md' | 'lg';
-    showConnector?: boolean;
+    /** Position of content relative to line */
+    position?: TimelinePosition;
+    /** Size */
+    size?: TimelineSize;
+    /** Show connecting line */
+    showLine?: boolean;
+    /** Pending/loading state for last item */
+    pending?: boolean | ReactNode;
+    /** Reverse order */
+    reverse?: boolean;
+    /** Custom line color */
+    lineColor?: string;
+    /** Test ID */
+    testId?: string;
 }

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

@@ -1,2 +1,2 @@
 export { Timeline } from './Timeline';
-export type { TimelineProps, TimelineItem } from './Timeline.types';
+export type { TimelineProps, TimelineItem, TimelinePosition, TimelineSize } from './Timeline.types';

package/dist/components/Tooltip/Tooltip.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),r=require("react"),j=require("react-dom"),v=require("../../utils/cn.cjs"),q=({content:p,children:x,position:w,placement:R,delay:y=200,className:M,disabled:k=!1})=>{const d=R||w||"top",[c,h]=r.useState(!1),[b,T]=r.useState({x:0,y:0}),u=r.useRef(null),l=r.useRef(null),n=r.useRef(),f=r.useCallback(()=>{if(!u.current||!l.current)return;const e=u.current.getBoundingClientRect(),t=l.current.getBoundingClientRect(),s=8;let o=0,i=0;switch(d){case"top":o=e.left+(e.width-t.width)/2,i=e.top-t.height-s;break;case"bottom":o=e.left+(e.width-t.width)/2,i=e.bottom+s;break;case"left":o=e.left-t.width-s,i=e.top+(e.height-t.height)/2;break;case"right":o=e.right+s,i=e.top+(e.height-t.height)/2;break}o=Math.max(8,Math.min(o,window.innerWidth-t.width-8)),i=Math.max(8,Math.min(i,window.innerHeight-t.height-8)),T({x:o,y:i})},[d]),g=()=>{k||(n.current=setTimeout(()=>{h(!0)},y))},m=()=>{n.current&&clearTimeout(n.current),h(!1)};return r.useEffect(()=>{c&&f()},[c,f]),r.useEffect(()=>()=>{n.current&&clearTimeout(n.current)},[]),a.jsxs(a.Fragment,{children:[a.jsx("div",{ref:u,onMouseEnter:g,onMouseLeave:m,onFocus:g,onBlur:m,className:"bear-inline-block",children:x}),c&&j.createPortal(a.jsx("div",{ref:l,role:"tooltip",style:{position:"fixed",left:b.x,top:b.y,zIndex:9999},className:v.cn("bear-px-3 bear-py-2 bear-rounded-lg","bear-bg-gray-800 bear-text-white bear-text-sm","bear-border bear-border-gray-700","bear-shadow-lg","bear-animate-in bear-fade-in bear-duration-150",M),children:p}),document.body)]})};exports.Tooltip=q;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),r=require("react"),j=require("react-dom"),k=require("../../utils/cn.cjs"),v=({content:m,children:x,position:w,placement:R,delay:y=200,className:T,disabled:M=!1})=>{const c=R||w||"top",[l,h]=r.useState(!1),[b,B]=r.useState({x:0,y:0}),u=r.useRef(null),d=r.useRef(null),n=r.useRef(),f=r.useCallback(()=>{if(!u.current||!d.current)return;const e=u.current.getBoundingClientRect(),t=d.current.getBoundingClientRect(),a=8;let o=0,i=0;switch(c){case"top":o=e.left+(e.width-t.width)/2,i=e.top-t.height-a;break;case"bottom":o=e.left+(e.width-t.width)/2,i=e.bottom+a;break;case"left":o=e.left-t.width-a,i=e.top+(e.height-t.height)/2;break;case"right":o=e.right+a,i=e.top+(e.height-t.height)/2;break}o=Math.max(8,Math.min(o,window.innerWidth-t.width-8)),i=Math.max(8,Math.min(i,window.innerHeight-t.height-8)),B({x:o,y:i})},[c]),g=()=>{M||(n.current=setTimeout(()=>{h(!0)},y))},p=()=>{n.current&&clearTimeout(n.current),h(!1)};return r.useEffect(()=>{l&&f()},[l,f]),r.useEffect(()=>()=>{n.current&&clearTimeout(n.current)},[]),s.jsxs(s.Fragment,{children:[s.jsx("div",{ref:u,onMouseEnter:g,onMouseLeave:p,onFocus:g,onBlur:p,className:"Bear-Tooltip__trigger bear-inline-block",children:x}),l&&j.createPortal(s.jsx("div",{ref:d,role:"tooltip",style:{position:"fixed",left:b.x,top:b.y,zIndex:9999},className:k.cn("Bear-Tooltip",`Bear-Tooltip--${c}`,"bear-px-3 bear-py-2 bear-rounded-lg","bear-bg-gray-800 bear-text-white bear-text-sm","bear-border bear-border-gray-700","bear-shadow-lg","bear-animate-in bear-fade-in bear-duration-150",T),children:s.jsx("span",{className:"Bear-Tooltip__content",children:m})}),document.body)]})};exports.Tooltip=v;

package/dist/components/Tooltip/Tooltip.js

@@ -1,21 +1,21 @@
-import { jsxs as B, Fragment as E, jsx as m } from "react/jsx-runtime";
-import { useState as p, useRef as l, useCallback as j, useEffect as w } from "react";
-import { createPortal as F } from "react-dom";
-import { cn as I } from "../../utils/cn.js";
-const z = ({
+import { jsxs as C, Fragment as _, jsx as u } from "react/jsx-runtime";
+import { useState as m, useRef as h, useCallback as E, useEffect as w } from "react";
+import { createPortal as N } from "react-dom";
+import { cn as j } from "../../utils/cn.js";
+const V = ({
   content: x,
   children: y,
   position: M,
   placement: R,
-  delay: k = 200,
-  className: v,
-  disabled: C = !1
+  delay: T = 200,
+  className: B,
+  disabled: k = !1
 }) => {
-  const u = R || M || "top", [a, h] = p(!1), [d, T] = p({ x: 0, y: 0 }), s = l(null), c = l(null), i = l(), b = j(() => {
-    if (!s.current || !c.current) return;
-    const e = s.current.getBoundingClientRect(), t = c.current.getBoundingClientRect(), n = 8;
+  const a = R || M || "top", [s, d] = m(!1), [b, v] = m({ x: 0, y: 0 }), c = h(null), l = h(null), i = h(), f = E(() => {
+    if (!c.current || !l.current) return;
+    const e = c.current.getBoundingClientRect(), t = l.current.getBoundingClientRect(), n = 8;
     let r = 0, o = 0;
-    switch (u) {
+    switch (a) {
       case "top":
         r = e.left + (e.width - t.width) / 2, o = e.top - t.height - n;
         break;
@@ -29,52 +29,54 @@ const z = ({
         r = e.right + n, o = e.top + (e.height - t.height) / 2;
         break;
     }
-    r = Math.max(8, Math.min(r, window.innerWidth - t.width - 8)), o = Math.max(8, Math.min(o, window.innerHeight - t.height - 8)), T({ x: r, y: o });
-  }, [u]), f = () => {
-    C || (i.current = setTimeout(() => {
-      h(!0);
-    }, k));
+    r = Math.max(8, Math.min(r, window.innerWidth - t.width - 8)), o = Math.max(8, Math.min(o, window.innerHeight - t.height - 8)), v({ x: r, y: o });
+  }, [a]), p = () => {
+    k || (i.current = setTimeout(() => {
+      d(!0);
+    }, T));
   }, g = () => {
-    i.current && clearTimeout(i.current), h(!1);
+    i.current && clearTimeout(i.current), d(!1);
   };
   return w(() => {
-    a && b();
-  }, [a, b]), w(() => () => {
+    s && f();
+  }, [s, f]), w(() => () => {
     i.current && clearTimeout(i.current);
-  }, []), /* @__PURE__ */ B(E, { children: [
-    /* @__PURE__ */ m(
+  }, []), /* @__PURE__ */ C(_, { children: [
+    /* @__PURE__ */ u(
       "div",
       {
-        ref: s,
-        onMouseEnter: f,
+        ref: c,
+        onMouseEnter: p,
         onMouseLeave: g,
-        onFocus: f,
+        onFocus: p,
         onBlur: g,
-        className: "bear-inline-block",
+        className: "Bear-Tooltip__trigger bear-inline-block",
         children: y
       }
     ),
-    a && F(
-      /* @__PURE__ */ m(
+    s && N(
+      /* @__PURE__ */ u(
         "div",
         {
-          ref: c,
+          ref: l,
           role: "tooltip",
           style: {
             position: "fixed",
-            left: d.x,
-            top: d.y,
+            left: b.x,
+            top: b.y,
             zIndex: 9999
           },
-          className: I(
+          className: j(
+            "Bear-Tooltip",
+            `Bear-Tooltip--${a}`,
             "bear-px-3 bear-py-2 bear-rounded-lg",
             "bear-bg-gray-800 bear-text-white bear-text-sm",
             "bear-border bear-border-gray-700",
             "bear-shadow-lg",
             "bear-animate-in bear-fade-in bear-duration-150",
-            v
+            B
           ),
-          children: x
+          children: /* @__PURE__ */ u("span", { className: "Bear-Tooltip__content", children: x })
         }
       ),
       document.body
@@ -82,5 +84,5 @@ const z = ({
   ] });
 };
 export {
-  z as Tooltip
+  V as Tooltip
 };

package/dist/components/Typography/Typography.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const A=require("react/jsx-runtime"),C=require("../../utils/cn.cjs"),E={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"},T={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"},_={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"},I={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"},L={tight:"bear-leading-tight",normal:"bear-leading-normal",relaxed:"bear-leading-relaxed",loose:"bear-leading-loose"},j=({variant:a="body1",component:d,align:b,weight:o,color:e="primary",truncate:r=!1,maxLines:t,italic:s=!1,underline:x=!1,strikethrough:h=!1,noWrap:g=!1,inline:m=!1,paragraph:f=!1,lineHeight:n,children:c,className:y,style:u,testId:p,...S})=>{const k=d||E[a],l=e&&!i[e];return A.jsx(k,{className:C.cn(T[a],o&&_[o],b&&I[b],!l&&e&&i[e],n&&L[n],s&&"bear-italic",x&&"bear-underline",h&&"bear-line-through",g&&"bear-whitespace-nowrap",m&&"bear-inline",f&&"bear-mb-4",r&&!t&&"bear-truncate",r&&t&&"bear-overflow-hidden",y),style:{...u,...l&&{color:e},...r&&t&&{display:"-webkit-box",WebkitLineClamp:t,WebkitBoxOrient:"vertical"}},"data-testid":p,...S,children:c})};exports.Typography=j;
+"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;

package/dist/components/Typography/Typography.js

@@ -1,6 +1,6 @@
 import { jsx as A } from "react/jsx-runtime";
-import { cn as C } from "../../utils/cn.js";
-const E = {
+import { cn as T } from "../../utils/cn.js";
+const C = {
   h1: "h1",
   h2: "h2",
   h3: "h3",
@@ -14,7 +14,7 @@ const E = {
   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",
@@ -28,7 +28,7 @@ const E = {
   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"
-}, I = {
+}, B = {
   thin: "bear-font-thin",
   light: "bear-font-light",
   normal: "bear-font-normal",
@@ -36,7 +36,7 @@ const E = {
   semibold: "bear-font-semibold",
   bold: "bear-font-bold",
   extrabold: "bear-font-extrabold"
-}, L = {
+}, _ = {
   left: "bear-text-left",
   center: "bear-text-center",
   right: "bear-text-right",
@@ -48,67 +48,69 @@ const E = {
   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"
-}, w = {
+}, I = {
   tight: "bear-leading-tight",
   normal: "bear-leading-normal",
   relaxed: "bear-leading-relaxed",
   loose: "bear-leading-loose"
-}, j = ({
+}, N = ({
   variant: a = "body1",
   component: d,
   align: b,
   weight: o,
   color: e = "primary",
-  truncate: r = !1,
-  maxLines: t,
+  truncate: t = !1,
+  maxLines: r,
   italic: s = !1,
   underline: x = !1,
-  strikethrough: m = !1,
-  noWrap: h = !1,
-  inline: f = !1,
-  paragraph: g = !1,
+  strikethrough: h = !1,
+  noWrap: g = !1,
+  inline: m = !1,
+  paragraph: y = !1,
   lineHeight: n,
-  children: c,
-  className: y,
-  style: p,
+  children: p,
+  className: f,
+  style: c,
   testId: u,
   ...S
 }) => {
-  const k = d || E[a], l = e && !i[e];
+  const k = d || C[a], l = e && !i[e];
   return /* @__PURE__ */ A(
     k,
     {
-      className: C(
-        _[a],
-        o && I[o],
-        b && L[b],
+      className: T(
+        "Bear-Typography",
+        `Bear-Typography--${a}`,
+        E[a],
+        o && B[o],
+        b && _[b],
         !l && e && i[e],
-        n && w[n],
-        s && "bear-italic",
-        x && "bear-underline",
-        m && "bear-line-through",
-        h && "bear-whitespace-nowrap",
-        f && "bear-inline",
-        g && "bear-mb-4",
-        r && !t && "bear-truncate",
-        r && t && "bear-overflow-hidden",
-        y
+        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
       ),
       style: {
-        ...p,
+        ...c,
         ...l && { color: e },
-        ...r && t && {
+        ...t && r && {
           display: "-webkit-box",
-          WebkitLineClamp: t,
+          WebkitLineClamp: r,
           WebkitBoxOrient: "vertical"
         }
       },
       "data-testid": u,
       ...S,
-      children: c
+      children: p
     }
   );
 };
 export {
-  j as Typography
+  N as Typography
 };