@forgedevstack/bear 1.0.3 → 1.0.4-alpha

package/dist/components/TimePicker/TimePicker.js

@@ -1,129 +1,130 @@
-import { jsx as r, jsxs as b } from "react/jsx-runtime";
-import { useState as d, useRef as L, useEffect as g } from "react";
-import { DateTimePicker as C } from "../DateTimePicker/DateTimePicker.js";
-import { cn as c } from "../../utils/cn.js";
-import { formatTime as D } from "./TimePicker.utils.js";
-import { TIMEPICKER_HOURS_12H as K, TIMEPICKER_HOURS_24H as U, TIMEPICKER_MINUTES_DIVISOR as V, variantClasses as B, sizeClasses as F } from "./TimePicker.constants.js";
-const Y = ({
-  mode: P = "time",
+import { jsx as t, jsxs as i } from "react/jsx-runtime";
+import { useState as E, useRef as z, useEffect as x } from "react";
+import { DateTimePicker as F } from "../DateTimePicker/DateTimePicker.js";
+import { cn as l } from "../../utils/cn.js";
+import { formatTime as W } from "./TimePicker.utils.js";
+import { TIMEPICKER_HOURS_12H as q, TIMEPICKER_HOURS_24H as G, TIMEPICKER_MINUTES_DIVISOR as J, TIMEPICKER_LABEL_CLASSES as Q, variantClasses as X, sizeClasses as Y, TIMEPICKER_BUTTON_CLASSES as Z, TIMEPICKER_ERROR_CLASSES as $, TIMEPICKER_HELPER_CLASSES as g, TIMEPICKER_DROPDOWN_CLASSES as ee, TIMEPICKER_COLUMN_HEADER_CLASSES as u, TIMEPICKER_COLUMN_CLASSES as y, TIMEPICKER_OPTION_ACTIVE_CLASSES as N, TIMEPICKER_OPTION_INACTIVE_CLASSES as f, TIMEPICKER_OPTION_CLASSES as R, TIMEPICKER_FOOTER_CLASSES as te, TIMEPICKER_CLEAR_BUTTON_CLASSES as re, TIMEPICKER_CONFIRM_BUTTON_CLASSES as se, TIMEPICKER_ROOT_CLASSES as ie } from "./TimePicker.constants.js";
+const Ee = ({
+  mode: H = "time",
   value: m,
-  onChange: a,
+  onChange: s,
   disabled: n = !1,
-  placeholder: h = "Select time",
-  label: u,
-  error: s,
-  helperText: x,
-  format: l = "12h",
-  minuteStep: f = 5,
-  clearable: v = !0,
-  className: N,
-  size: k = "md",
-  variant: w = "default",
-  ...R
+  placeholder: T = "Select time",
+  label: S,
+  error: c,
+  helperText: I,
+  format: o = "12h",
+  minuteStep: _ = 5,
+  clearable: M = !0,
+  className: P,
+  size: b = "md",
+  variant: O = "default",
+  ...U
 }) => {
-  if (P === "datetime")
-    return /* @__PURE__ */ r(
-      C,
+  if (H === "datetime")
+    return /* @__PURE__ */ t(
+      F,
       {
         value: m instanceof Date ? m : null,
-        onChange: (e) => a == null ? void 0 : a(e),
+        onChange: (e) => s == null ? void 0 : s(e),
         disabled: n,
-        placeholder: h,
-        label: u,
-        error: s,
-        helperText: x,
-        timeFormat: l,
-        minuteStep: f,
-        clearable: v,
-        className: N,
-        size: k,
-        variant: w,
-        ...R
+        placeholder: T,
+        label: S,
+        error: c,
+        helperText: I,
+        timeFormat: o,
+        minuteStep: _,
+        clearable: M,
+        className: P,
+        size: b,
+        variant: O,
+        ...U
       }
     );
-  const i = m, [z, o] = d(!1), [y, M] = d(12), [E, I] = d(0), [S, _] = d("AM"), p = L(null);
-  g(() => {
-    if (i && typeof i == "string") {
-      const [e, t] = i.split(" "), [T, j] = e.split(":").map(Number);
-      M(T), I(j), t && _(t);
+  const a = m, [A, d] = E(!1), [L, p] = E(12), [h, v] = E(0), [k, K] = E("AM"), C = z(null);
+  x(() => {
+    if (a && typeof a == "string") {
+      const [e, r] = a.split(" "), [V, j] = e.split(":").map(Number);
+      p(V), v(j), r && K(r);
     }
-  }, [i]), g(() => {
-    const e = (t) => {
-      p.current && !p.current.contains(t.target) && o(!1);
+  }, [a]), x(() => {
+    const e = (r) => {
+      C.current && !C.current.contains(r.target) && d(!1);
     };
     return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
   }, []);
-  const H = () => {
-    a == null || a(D(y, E, S, l)), o(!1);
-  }, O = l === "12h" ? Array.from({ length: K }, (e, t) => t + 1) : Array.from({ length: U }, (e, t) => t), A = Array.from(
-    { length: V / f },
-    (e, t) => t * f
+  const w = () => {
+    s == null || s(W(L, h, k, o)), d(!1);
+  }, D = o === "12h" ? Array.from({ length: q }, (e, r) => r + 1) : Array.from({ length: G }, (e, r) => r), B = Array.from(
+    { length: J / _ },
+    (e, r) => r * _
   );
-  return /* @__PURE__ */ b("div", { ref: p, className: c("bear-relative", N), children: [
-    u && /* @__PURE__ */ r("label", { className: "bear-block bear-text-sm bear-font-medium bear-text-zinc-300 bear-mb-1.5", children: u }),
-    /* @__PURE__ */ b(
+  return /* @__PURE__ */ i("div", { ref: C, className: l(ie, P), children: [
+    S && /* @__PURE__ */ t("label", { className: Q, children: S }),
+    /* @__PURE__ */ i(
       "button",
       {
         type: "button",
-        onClick: () => !n && o(!z),
+        onClick: () => !n && d(!A),
         disabled: n,
-        className: c(
-          "bear-w-full bear-flex bear-items-center bear-justify-between bear-rounded-lg bear-border bear-text-left bear-transition-colors",
-          F[k],
-          B[w],
-          s ? "bear-border-red-500" : "focus:bear-border-pink-500",
+        className: l(
+          Z,
+          Y[b],
+          X[O],
+          c ? "bear-border-red-500" : "focus:bear-border-pink-500",
           n && "bear-opacity-50 bear-cursor-not-allowed",
-          i ? "bear-text-white" : "bear-text-zinc-500"
+          a ? "bear-text-gray-900 dark:bear-text-white" : "bear-text-gray-400 dark:bear-text-zinc-500"
         ),
         children: [
-          /* @__PURE__ */ r("span", { children: i || h }),
-          /* @__PURE__ */ r("svg", { className: "bear-w-5 bear-h-5 bear-text-zinc-400", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ r("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" }) })
+          /* @__PURE__ */ t("span", { children: a || T }),
+          /* @__PURE__ */ t("svg", { className: "bear-w-5 bear-h-5 bear-text-gray-400 dark:bear-text-zinc-400", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ t("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" }) })
         ]
       }
     ),
-    s && /* @__PURE__ */ r("p", { className: "bear-mt-1 bear-text-xs bear-text-red-400", children: s }),
-    x && !s && /* @__PURE__ */ r("p", { className: "bear-mt-1 bear-text-xs bear-text-zinc-500", children: x }),
-    z && /* @__PURE__ */ b("div", { className: "bear-absolute bear-z-50 bear-mt-1 bear-bg-zinc-800 bear-border bear-border-zinc-700 bear-rounded-lg bear-shadow-xl bear-p-3 bear-w-64", children: [
-      /* @__PURE__ */ b("div", { className: "bear-flex bear-gap-2 bear-mb-3", children: [
-        /* @__PURE__ */ b("div", { className: "bear-flex-1", children: [
-          /* @__PURE__ */ r("div", { className: "bear-text-xs bear-text-zinc-500 bear-mb-1 bear-text-center", children: "Hour" }),
-          /* @__PURE__ */ r("div", { className: "bear-h-32 bear-overflow-y-auto bear-space-y-1 bear-scrollbar-thin", children: O.map((e) => /* @__PURE__ */ r(
+    c && /* @__PURE__ */ t("p", { className: $, children: c }),
+    I && !c && /* @__PURE__ */ t("p", { className: g, children: I }),
+    A && /* @__PURE__ */ i("div", { className: ee, children: [
+      /* @__PURE__ */ i("div", { className: "bear-flex bear-gap-2 bear-mb-3", children: [
+        /* @__PURE__ */ i("div", { className: "bear-flex-1", children: [
+          /* @__PURE__ */ t("div", { className: u, children: "Hour" }),
+          /* @__PURE__ */ t("div", { className: y, children: D.map((e) => /* @__PURE__ */ t(
             "button",
             {
-              onClick: () => M(e),
-              className: c(
-                "bear-w-full bear-py-1 bear-rounded bear-text-sm bear-transition-colors",
-                y === e ? "bear-bg-pink-500 bear-text-white" : "bear-text-zinc-300 hover:bear-bg-zinc-700"
+              onClick: () => p(e),
+              className: l(
+                R,
+                L === e ? N : f
               ),
               children: e.toString().padStart(2, "0")
             },
             e
           )) })
         ] }),
-        /* @__PURE__ */ b("div", { className: "bear-flex-1", children: [
-          /* @__PURE__ */ r("div", { className: "bear-text-xs bear-text-zinc-500 bear-mb-1 bear-text-center", children: "Minute" }),
-          /* @__PURE__ */ r("div", { className: "bear-h-32 bear-overflow-y-auto bear-space-y-1 bear-scrollbar-thin", children: A.map((e) => /* @__PURE__ */ r(
+        /* @__PURE__ */ i("div", { className: "bear-flex-1", children: [
+          /* @__PURE__ */ t("div", { className: u, children: "Minute" }),
+          /* @__PURE__ */ t("div", { className: y, children: B.map((e) => /* @__PURE__ */ t(
             "button",
             {
-              onClick: () => I(e),
-              className: c(
-                "bear-w-full bear-py-1 bear-rounded bear-text-sm bear-transition-colors",
-                E === e ? "bear-bg-pink-500 bear-text-white" : "bear-text-zinc-300 hover:bear-bg-zinc-700"
+              onClick: () => v(e),
+              className: l(
+                R,
+                h === e ? N : f
               ),
               children: e.toString().padStart(2, "0")
             },
             e
           )) })
         ] }),
-        l === "12h" && /* @__PURE__ */ b("div", { className: "bear-flex-1", children: [
-          /* @__PURE__ */ r("div", { className: "bear-text-xs bear-text-zinc-500 bear-mb-1 bear-text-center", children: "Period" }),
-          /* @__PURE__ */ r("div", { className: "bear-space-y-1", children: ["AM", "PM"].map((e) => /* @__PURE__ */ r(
+        o === "12h" && /* @__PURE__ */ i("div", { className: "bear-flex-1", children: [
+          /* @__PURE__ */ t("div", { className: u, children: "Period" }),
+          /* @__PURE__ */ t("div", { className: "bear-space-y-1", children: ["AM", "PM"].map((e) => /* @__PURE__ */ t(
             "button",
             {
-              onClick: () => _(e),
-              className: c(
-                "bear-w-full bear-py-2 bear-rounded bear-text-sm bear-transition-colors",
-                S === e ? "bear-bg-pink-500 bear-text-white" : "bear-text-zinc-300 hover:bear-bg-zinc-700"
+              onClick: () => K(e),
+              className: l(
+                R,
+                "bear-py-2",
+                k === e ? N : f
               ),
               children: e
             },
@@ -131,15 +132,15 @@ const Y = ({
           )) })
         ] })
       ] }),
-      /* @__PURE__ */ b("div", { className: "bear-flex bear-gap-2 bear-pt-2 bear-border-t bear-border-zinc-700", children: [
-        v && i && /* @__PURE__ */ r("button", { onClick: () => {
-          a == null || a(""), o(!1);
-        }, className: "bear-flex-1 bear-py-1.5 bear-text-sm bear-text-zinc-400 hover:bear-text-white bear-rounded bear-border bear-border-zinc-600", children: "Clear" }),
-        /* @__PURE__ */ r("button", { onClick: H, className: "bear-flex-1 bear-py-1.5 bear-text-sm bear-bg-pink-500 bear-text-white bear-rounded hover:bear-bg-pink-600", children: "Confirm" })
+      /* @__PURE__ */ i("div", { className: te, children: [
+        M && a && /* @__PURE__ */ t("button", { onClick: () => {
+          s == null || s(""), d(!1);
+        }, className: re, children: "Clear" }),
+        /* @__PURE__ */ t("button", { onClick: w, className: se, children: "Confirm" })
       ] })
     ] })
   ] });
 };
 export {
-  Y as TimePicker
+  Ee as TimePicker
 };

package/dist/components/Timeline/Timeline.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),a=require("../../utils/cn.cjs"),m=({items:i,orientation:h="vertical",position:t="left",className:u,size:l="md",showConnector:g=!0})=>{const s={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"},n={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=h==="vertical";return r.jsx("div",{className:a.cn("bear-relative",b?"":"bear-flex bear-items-start",u),children:i.map((e,d)=>{const c=t==="left"||t==="alternate"&&d%2===0,f=d===i.length-1,o=e.color||"default",x=e.dotVariant==="icon"&&e.icon;return r.jsxs("div",{className:a.cn("bear-relative",b?"bear-pb-6":"bear-flex-1 bear-pr-4",b&&t==="alternate"&&(c?"bear-pr-8 bear-text-right":"bear-pl-8")),children:[r.jsx("div",{className:a.cn("bear-absolute",b?t==="alternate"?c?"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?r.jsx("div",{className:a.cn("bear-rounded-full bear-flex bear-items-center bear-justify-center bear-text-white",n[l].iconDot,s[o]),children:e.icon}):r.jsx("div",{className:a.cn("bear-rounded-full",n[l].dot,e.dotVariant==="outlined"?`bear-border-2 bear-bg-zinc-900 ${s[o]}`:s[o])})}),g&&!f&&r.jsx("div",{className:a.cn("bear-absolute bear-bg-zinc-700",b?t==="alternate"?c?"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")}),r.jsxs("div",{className:a.cn(b&&t!=="alternate"&&"bear-pl-6",b&&t==="alternate"&&!c&&"bear-pl-6"),children:[e.date&&r.jsx("div",{className:a.cn("bear-text-zinc-500 bear-mb-1",n[l].text),children:e.date}),r.jsx("div",{className:a.cn("bear-font-medium bear-text-white",n[l].title),children:e.title}),e.description&&r.jsx("div",{className:a.cn("bear-text-zinc-400 bear-mt-1",n[l].text),children:e.description})]})]},e.id)})})};exports.Timeline=m;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),T=require("react"),s=require("../../utils/cn.cjs"),t=require("./Timeline.const.cjs"),d=T.forwardRef(({items:I,position:n="left",size:i="md",showLine:S=!0,pending:a,reverse:o=!1,lineColor:E,testId:N,className:x,...f},L)=>{const _=t.TIMELINE_POSITIONS[n],m=t.TIMELINE_DOT_SIZES[i],u=t.TIMELINE_DOT_ICON_SIZES[i],h=t.TIMELINE_TITLE_SIZES[i],M=t.TIMELINE_DESC_SIZES[i],p=T.useMemo(()=>{let e=[...I];return o&&(e=e.reverse()),a&&e.push({title:typeof a=="string"?a:"Loading...",description:typeof a=="boolean"?void 0:a,color:"gray"}),e},[I,o,a]),O=e=>{const c=e.color||"pink",l=e.active;return e.icon?r.jsx("div",{className:s.cn(t.TIMELINE_DOT_BASE,u,t.TIMELINE_DOT_COLORS[c],"flex items-center justify-center text-white",l&&"ring-4 ring-pink-500/30"),style:{top:"2px",...n==="left"?{left:"-4px"}:{},...n==="right"?{right:"-4px"}:{},...n==="alternate"?{left:"50%",transform:"translateX(-50%)"}:{}},children:e.icon}):r.jsx("div",{className:s.cn(t.TIMELINE_DOT_BASE,m,t.TIMELINE_DOT_COLORS[c],l&&"ring-4 ring-pink-500/30 scale-125"),style:{top:"6px",...n==="left"?{left:"0"}:{},...n==="right"?{right:"0"}:{},...n==="alternate"?{left:"50%",transform:"translateX(-50%)"}:{}}})},g=e=>{if(n!=="alternate")return{};const c=e%2===0;return{wrapper:c?"pr-8 text-right w-1/2":"pl-8 text-left w-1/2 ml-auto",content:c?"text-right":"text-left"}};return r.jsxs("div",{ref:L,className:s.cn(t.TIMELINE_BASE_CLASSES,x),"data-testid":N,...f,children:[S&&r.jsx("div",{className:s.cn(t.TIMELINE_LINE_BASE,_.line,E?"":t.TIMELINE_LINE_COLOR),style:E?{backgroundColor:E}:void 0}),p.map((e,c)=>{const l=g(c);return r.jsxs("div",{className:s.cn(t.TIMELINE_ITEM_BASE,n!=="alternate"&&_.wrapper,l.wrapper),children:[O(e),r.jsxs("div",{className:s.cn(t.TIMELINE_CONTENT_BASE,l.content),children:[e.time&&r.jsx("div",{className:s.cn(t.TIMELINE_TIME_CLASSES,"mb-1"),children:e.time}),r.jsx("h4",{className:s.cn("Bear-Timeline__title font-medium text-gray-900 dark:text-white",h,e.active&&"text-pink-600 dark:text-pink-400"),children:e.title}),e.description&&r.jsx("div",{className:s.cn("Bear-Timeline__description text-gray-600 dark:text-gray-400 mt-1",M),children:e.description}),e.extra&&r.jsx("div",{className:"Bear-Timeline__extra mt-3",children:e.extra})]})]},c)})]})});d.displayName="Timeline";exports.Timeline=d;

package/dist/components/Timeline/Timeline.const.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const E="Bear-Timeline relative",t="Bear-Timeline__item relative pb-8 last:pb-0",e={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"}},I="Bear-Timeline__dot absolute rounded-full border-2 border-white dark:border-zinc-900 z-10 transition-all",_={sm:"w-3 h-3",md:"w-4 h-4",lg:"w-5 h-5"},T={sm:"w-6 h-6",md:"w-8 h-8",lg:"w-10 h-10"},r={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"},S="Bear-Timeline__line absolute top-0 w-0.5 h-full",n="bg-gray-200 dark:bg-zinc-700",L="Bear-Timeline__content",l={sm:"text-sm",md:"text-base",lg:"text-lg"},N={sm:"text-xs",md:"text-sm",lg:"text-base"},a="text-xs text-gray-500 dark:text-gray-400";exports.TIMELINE_BASE_CLASSES=E;exports.TIMELINE_CONTENT_BASE=L;exports.TIMELINE_DESC_SIZES=N;exports.TIMELINE_DOT_BASE=I;exports.TIMELINE_DOT_COLORS=r;exports.TIMELINE_DOT_ICON_SIZES=T;exports.TIMELINE_DOT_SIZES=_;exports.TIMELINE_ITEM_BASE=t;exports.TIMELINE_LINE_BASE=S;exports.TIMELINE_LINE_COLOR=n;exports.TIMELINE_POSITIONS=e;exports.TIMELINE_TIME_CLASSES=a;exports.TIMELINE_TITLE_SIZES=l;

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

@@ -0,0 +1,40 @@
+import { TimelineSize } from './Timeline.types';
+export declare const TIMELINE_BASE_CLASSES = "Bear-Timeline relative";
+export declare const TIMELINE_ITEM_BASE = "Bear-Timeline__item relative pb-8 last:pb-0";
+export declare const TIMELINE_POSITIONS: {
+    left: {
+        wrapper: string;
+        content: string;
+        dot: string;
+        line: string;
+    };
+    right: {
+        wrapper: string;
+        content: string;
+        dot: string;
+        line: string;
+    };
+    alternate: {
+        wrapper: string;
+        content: string;
+        dot: string;
+        line: string;
+    };
+};
+export declare const TIMELINE_DOT_BASE = "Bear-Timeline__dot absolute rounded-full border-2 border-white dark:border-zinc-900 z-10 transition-all";
+export declare const TIMELINE_DOT_SIZES: Record<TimelineSize, string>;
+export declare const TIMELINE_DOT_ICON_SIZES: Record<TimelineSize, string>;
+export declare const TIMELINE_DOT_COLORS: {
+    pink: string;
+    green: string;
+    blue: string;
+    amber: string;
+    red: string;
+    gray: string;
+};
+export declare const TIMELINE_LINE_BASE = "Bear-Timeline__line absolute top-0 w-0.5 h-full";
+export declare const TIMELINE_LINE_COLOR = "bg-gray-200 dark:bg-zinc-700";
+export declare const TIMELINE_CONTENT_BASE = "Bear-Timeline__content";
+export declare const TIMELINE_TITLE_SIZES: Record<TimelineSize, string>;
+export declare const TIMELINE_DESC_SIZES: Record<TimelineSize, string>;
+export declare const TIMELINE_TIME_CLASSES = "text-xs text-gray-500 dark:text-gray-400";

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
 };