@forgedevstack/bear 1.1.9 → 1.2.1

package/dist/components/ColorPicker/ColorPicker.js

@@ -1,96 +1,158 @@
-import { jsxs as S, jsx as s } from "react/jsx-runtime";
-import { useState as n, useRef as T, useEffect as O } from "react";
-import { cn as _ } from "../../utils/cn.js";
-import { COLOR_PICKER_DEFAULT_VALUE as f, COLOR_PICKER_LABEL_CLASSES as b, COLOR_PICKER_SWATCH_SIZE as N, COLOR_PICKER_SWATCH_CLASSES as K, COLOR_PICKER_INPUT_CLASSES as k, COLOR_PICKER_POPUP_CLASSES as v, COLOR_PICKER_NATIVE_INPUT_CLASSES as y, COLOR_PICKER_GRID_CLASSES as w, COLOR_PICKER_DEFAULT_PRESETS as U, COLOR_PICKER_PRESET_ACTIVE_CLASSES as V, COLOR_PICKER_PRESET_INACTIVE_CLASSES as x, COLOR_PICKER_PRESET_ITEM_CLASSES as D, COLOR_PICKER_HEX_PATTERN as H } from "./ColorPicker.const.js";
-const B = ({
-  value: r = f,
-  onChange: t,
-  presets: u = U,
-  showInput: L = !0,
-  showPresets: P = !0,
-  disabled: a = !1,
-  label: C,
-  size: m = "md",
-  className: I
+import { jsxs as b, jsx as a } from "react/jsx-runtime";
+import { useState as p, useRef as R, useEffect as m } from "react";
+import { cn as C } from "../../utils/cn.js";
+import { Portal as D } from "../Portal/Portal.js";
+import { COLOR_PICKER_DEFAULT_VALUE as z, COLOR_PICKER_LABEL_CLASSES as V, COLOR_PICKER_SWATCH_SIZE as B, COLOR_PICKER_SWATCH_CLASSES as W, COLOR_PICKER_INPUT_CLASSES as X, COLOR_PICKER_POPUP_Z_INDEX as j, COLOR_PICKER_POPUP_CLASSES as F, COLOR_PICKER_HUE_BACKGROUND as G, COLOR_PICKER_HUE_STRIP_CLASSES as Z, COLOR_PICKER_GRID_CLASSES as $, COLOR_PICKER_DEFAULT_PRESETS as Y, COLOR_PICKER_PRESET_ACTIVE_CLASSES as q, COLOR_PICKER_PRESET_INACTIVE_CLASSES as J, COLOR_PICKER_PRESET_ITEM_CLASSES as Q, COLOR_PICKER_HEX_PATTERN as ee } from "./ColorPicker.const.js";
+import { hexToRgb as f, rgbToHsv as P, hsvToHex as te } from "./ColorPicker.utils.js";
+const ce = ({
+  value: i = z,
+  onChange: o,
+  presets: g = Y,
+  showInput: K = !0,
+  showPresets: N = !0,
+  disabled: l = !1,
+  label: S,
+  size: x = "md",
+  className: y
 }) => {
-  const [i, o] = n(!1), [p, E] = n(r), l = T(null);
-  O(() => {
-    E(r);
-  }, [r]), O(() => {
-    const e = (c) => {
-      l.current && !l.current.contains(c.target) && o(!1);
+  const [s, O] = p(!1), [k, u] = p(i), [c, E] = p({ h: 330, s: 80, v: 90 }), [L, H] = p({ top: 0, left: 0 }), _ = R(null), I = R(null), h = R(null), v = R(c);
+  v.current = c, m(() => {
+    u(i);
+  }, [i]), m(() => {
+    if (!s || !_.current) return;
+    const e = () => {
+      const t = _.current.getBoundingClientRect(), r = 256;
+      let n = t.left;
+      n = Math.max(8, Math.min(n, window.innerWidth - r - 8)), H({ top: t.bottom + 8, left: n });
+    };
+    return e(), window.addEventListener("resize", e), window.addEventListener("scroll", e, !0), () => {
+      window.removeEventListener("resize", e), window.removeEventListener("scroll", e, !0);
+    };
+  }, [s]), m(() => {
+    if (s) {
+      const e = f(i);
+      e && E(P(e.r, e.g, e.b));
+    }
+  }, [s, i]), m(() => {
+    if (!s) return;
+    const e = (t) => {
+      var n, d;
+      const r = t.target;
+      (n = _.current) != null && n.contains(r) || (d = I.current) != null && d.contains(r) || O(!1);
     };
     return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
-  }, []);
-  const A = (e) => {
-    const c = e.target.value;
-    E(c), H.test(c) && (t == null || t(c));
-  }, d = (e) => {
-    E(e), t == null || t(e);
-  }, R = N[m];
-  return /* @__PURE__ */ S("div", { ref: l, className: _("bear-relative bear-inline-block", I), children: [
-    C && /* @__PURE__ */ s("label", { className: b, children: C }),
-    /* @__PURE__ */ S("div", { className: "bear-flex bear-items-center bear-gap-2", children: [
-      /* @__PURE__ */ s(
+  }, [s]);
+  const w = (e, t, r) => {
+    E({ h: e, s: t, v: r });
+    const n = te(e, t, r);
+    o == null || o(n), u(n);
+  }, A = (e) => {
+    const t = h.current;
+    if (!t) return;
+    const r = t.getBoundingClientRect(), n = Math.max(0, Math.min(1, (e.clientX - r.left) / r.width)), d = Math.max(0, Math.min(1, (e.clientY - r.top) / r.height));
+    w(v.current.h, n * 100, (1 - d) * 100);
+  }, M = (e) => {
+    const t = e.target.value;
+    if (u(t), ee.test(t)) {
+      o == null || o(t);
+      const r = f(t);
+      r && E(P(r.r, r.g, r.b));
+    }
+  }, U = (e) => {
+    u(e), o == null || o(e);
+    const t = f(e);
+    t && E(P(t.r, t.g, t.b));
+  }, T = B[x];
+  return /* @__PURE__ */ b("div", { ref: _, className: C("bear-relative bear-inline-block", y), children: [
+    S && /* @__PURE__ */ a("label", { className: V, children: S }),
+    /* @__PURE__ */ b("div", { className: "bear-flex bear-items-center bear-gap-2", children: [
+      /* @__PURE__ */ a(
         "button",
         {
           type: "button",
-          onClick: () => !a && o(!i),
-          disabled: a,
-          className: _(
-            K,
-            R.swatch,
-            a && "bear-opacity-50 bear-cursor-not-allowed"
+          onClick: () => !l && O(!s),
+          disabled: l,
+          className: C(
+            W,
+            T.swatch,
+            l && "bear-opacity-50 bear-cursor-not-allowed"
           ),
-          style: { backgroundColor: r },
+          style: { backgroundColor: i },
           "aria-label": "Pick color"
         }
       ),
-      L && /* @__PURE__ */ s(
+      K && /* @__PURE__ */ a(
         "input",
         {
           type: "text",
-          value: p,
-          onChange: A,
-          disabled: a,
+          value: k,
+          onChange: M,
+          disabled: l,
           placeholder: "#000000",
-          className: _(
-            k,
-            a && "bear-opacity-50 bear-cursor-not-allowed"
+          className: C(
+            X,
+            l && "bear-opacity-50 bear-cursor-not-allowed"
           )
         }
       )
     ] }),
-    i && /* @__PURE__ */ S("div", { className: v, children: [
-      /* @__PURE__ */ s(
-        "input",
-        {
-          type: "color",
-          value: r,
-          onChange: (e) => {
-            t == null || t(e.target.value), E(e.target.value);
-          },
-          className: y
-        }
-      ),
-      P && /* @__PURE__ */ s("div", { className: w, children: u.map((e) => /* @__PURE__ */ s(
-        "button",
-        {
-          type: "button",
-          onClick: () => d(e),
-          className: _(
-            D,
-            R.presetSwatch,
-            r === e ? V : x
+    s && /* @__PURE__ */ a(D, { children: /* @__PURE__ */ b(
+      "div",
+      {
+        ref: I,
+        className: F,
+        style: { position: "fixed", top: L.top, left: L.left, zIndex: j },
+        children: [
+          /* @__PURE__ */ a(
+            "div",
+            {
+              ref: h,
+              role: "presentation",
+              className: "bear-relative bear-mb-3 bear-h-28 bear-w-full bear-cursor-crosshair bear-rounded-lg bear-border bear-border-gray-300 dark:bear-border-zinc-600 bear-touch-none",
+              style: {
+                backgroundImage: `linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, hsl(${Math.round(c.h)}, 100%, 50%))`
+              },
+              onPointerDown: (e) => {
+                A(e), e.currentTarget.setPointerCapture(e.pointerId);
+              },
+              onPointerMove: (e) => {
+                (e.pressure > 0 || e.buttons > 0) && A(e);
+              }
+            }
+          ),
+          /* @__PURE__ */ a(
+            "input",
+            {
+              type: "range",
+              min: 0,
+              max: 359,
+              value: Math.round(c.h),
+              "aria-label": "Hue",
+              onChange: (e) => w(Number(e.target.value), c.s, c.v),
+              className: Z,
+              style: { background: G }
+            }
           ),
-          style: { backgroundColor: e },
-          "aria-label": `Color ${e}`
-        },
-        e
-      )) })
-    ] })
+          N && /* @__PURE__ */ a("div", { className: $, children: g.map((e) => /* @__PURE__ */ a(
+            "button",
+            {
+              type: "button",
+              onClick: () => U(e),
+              className: C(
+                Q,
+                T.presetSwatch,
+                i === e ? q : J
+              ),
+              style: { backgroundColor: e },
+              "aria-label": `Color ${e}`
+            },
+            e
+          )) })
+        ]
+      }
+    ) })
   ] });
 };
 export {
-  B as ColorPicker
+  ce as ColorPicker
 };

package/dist/components/ColorPicker/ColorPicker.utils.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function f(n){const e=n.replace("#","");return/^[0-9A-Fa-f]{6}$/.test(e)?{r:parseInt(e.slice(0,2),16),g:parseInt(e.slice(2,4),16),b:parseInt(e.slice(4,6),16)}:null}function l(n,e,o){const t=r=>Math.max(0,Math.min(255,Math.round(r))).toString(16).padStart(2,"0");return`#${t(n)}${t(e)}${t(o)}`}function T(n,e,o){n/=255,e/=255,o/=255;const t=Math.max(n,e,o),r=Math.min(n,e,o),s=t-r;let c=0;s!==0&&(t===n?c=((e-o)/s+(e<o?6:0))/6:t===e?c=((o-n)/s+2)/6:c=((n-e)/s+4)/6);const i=t===0?0:s/t,a=t;return{h:c*360,s:i*100,v:a*100}}function u(n,e,o){e/=100,o/=100;const t=o*e,r=(n%360+360)%360/60,s=t*(1-Math.abs(r%2-1));let c=0,i=0,a=0;r>=0&&r<1?[c,i,a]=[t,s,0]:r<2?[c,i,a]=[s,t,0]:r<3?[c,i,a]=[0,t,s]:r<4?[c,i,a]=[0,s,t]:r<5?[c,i,a]=[s,0,t]:[c,i,a]=[t,0,s];const h=o-t;return{r:Math.round((c+h)*255),g:Math.round((i+h)*255),b:Math.round((a+h)*255)}}function b(n,e,o){const{r:t,g:r,b:s}=u(n,e,o);return l(t,r,s)}exports.hexToRgb=f;exports.hsvToHex=b;exports.hsvToRgb=u;exports.rgbToHex=l;exports.rgbToHsv=T;

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

@@ -0,0 +1,17 @@
+export declare function hexToRgb(hex: string): {
+    r: number;
+    g: number;
+    b: number;
+} | null;
+export declare function rgbToHex(r: number, g: number, b: number): string;
+export declare function rgbToHsv(r: number, g: number, b: number): {
+    h: number;
+    s: number;
+    v: number;
+};
+export declare function hsvToRgb(h: number, s: number, v: number): {
+    r: number;
+    g: number;
+    b: number;
+};
+export declare function hsvToHex(h: number, s: number, v: number): string;

package/dist/components/ColorPicker/ColorPicker.utils.js

@@ -0,0 +1,43 @@
+function f(e) {
+  const n = e.replace("#", "");
+  return /^[0-9A-Fa-f]{6}$/.test(n) ? {
+    r: parseInt(n.slice(0, 2), 16),
+    g: parseInt(n.slice(2, 4), 16),
+    b: parseInt(n.slice(4, 6), 16)
+  } : null;
+}
+function l(e, n, s) {
+  const t = (r) => Math.max(0, Math.min(255, Math.round(r))).toString(16).padStart(2, "0");
+  return `#${t(e)}${t(n)}${t(s)}`;
+}
+function M(e, n, s) {
+  e /= 255, n /= 255, s /= 255;
+  const t = Math.max(e, n, s), r = Math.min(e, n, s), o = t - r;
+  let c = 0;
+  o !== 0 && (t === e ? c = ((n - s) / o + (n < s ? 6 : 0)) / 6 : t === n ? c = ((s - e) / o + 2) / 6 : c = ((e - n) / o + 4) / 6);
+  const i = t === 0 ? 0 : o / t, a = t;
+  return { h: c * 360, s: i * 100, v: a * 100 };
+}
+function u(e, n, s) {
+  n /= 100, s /= 100;
+  const t = s * n, r = (e % 360 + 360) % 360 / 60, o = t * (1 - Math.abs(r % 2 - 1));
+  let c = 0, i = 0, a = 0;
+  r >= 0 && r < 1 ? [c, i, a] = [t, o, 0] : r < 2 ? [c, i, a] = [o, t, 0] : r < 3 ? [c, i, a] = [0, t, o] : r < 4 ? [c, i, a] = [0, o, t] : r < 5 ? [c, i, a] = [o, 0, t] : [c, i, a] = [t, 0, o];
+  const h = s - t;
+  return {
+    r: Math.round((c + h) * 255),
+    g: Math.round((i + h) * 255),
+    b: Math.round((a + h) * 255)
+  };
+}
+function x(e, n, s) {
+  const { r: t, g: r, b: o } = u(e, n, s);
+  return l(t, r, o);
+}
+export {
+  f as hexToRgb,
+  x as hsvToHex,
+  u as hsvToRgb,
+  l as rgbToHex,
+  M as rgbToHsv
+};

package/dist/components/CountdownTimer/CountdownTimer.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),t=require("react"),d=require("../../utils/cn.cjs"),e=require("./CountdownTimer.const.cjs"),s=require("./CountdownTimer.utils.cjs"),G=y=>{const{targetDate:c,duration:b,variant:w="default",size:m="md",showDays:A=!0,showHours:L=!0,showMinutes:v=!0,showSeconds:I=!0,showLabels:D=!0,showSeparator:R=!0,separator:N=e.DEFAULT_SEPARATOR,labels:E,onComplete:o,onTick:l,paused:C=!1,render:h,className:j,style:k,testId:B}=y,u=t.useMemo(()=>({...e.DEFAULT_LABELS,...E}),[E]),x=t.useRef(!1),P=t.useCallback(()=>c?new Date(c).getTime():b?Date.now()+b*e.MS_PER_SECOND:Date.now(),[c,b]),[S]=t.useState(P),[n,Z]=t.useState(()=>s.calcRemaining(S,Date.now()));if(t.useEffect(()=>{if(C)return;const a=()=>{const p=s.calcRemaining(S,Date.now());Z(p),l==null||l(p),p.isComplete&&!x.current&&(x.current=!0,o==null||o())};a();const _=setInterval(a,e.UPDATE_INTERVAL);return()=>clearInterval(_)},[S,C,o,l]),h)return r.jsx(r.Fragment,{children:h(n)});const f=e.SIZE_DIGIT_CLASSES[m]??e.SIZE_DIGIT_CLASSES.md,q=e.SIZE_LABEL_CLASSES[m]??e.SIZE_LABEL_CLASSES.md,F=e.SIZE_GAP_CLASSES[m]??e.SIZE_GAP_CLASSES.md,i=[];A&&i.push({value:s.pad(n.days),label:u.days}),L&&i.push({value:s.pad(n.hours),label:u.hours}),v&&i.push({value:s.pad(n.minutes),label:u.minutes}),I&&i.push({value:s.pad(n.seconds),label:u.seconds});const g=w==="card",T=w==="flip";return r.jsx("div",{className:d.cn("Bear-CountdownTimer","bear-flex bear-items-center",F,j),style:k,"data-testid":B,role:"timer","aria-label":"Countdown timer",children:i.map((a,_)=>r.jsxs("div",{className:"Bear-CountdownTimer__segment bear-flex bear-items-center",children:[_>0&&R&&!g&&r.jsx("span",{className:d.cn("Bear-CountdownTimer__separator",f,e.SEPARATOR_MARGIN,"bear-text-gray-400 dark:bear-text-gray-500"),"aria-hidden":"true",children:N}),r.jsxs("div",{className:"Bear-CountdownTimer__unit bear-flex bear-flex-col bear-items-center",children:[r.jsx("div",{className:d.cn("Bear-CountdownTimer__digit",f,"bear-tabular-nums bear-tracking-wider",g&&["bear-px-3 bear-py-2 bear-rounded-lg","bear-bg-gray-100 dark:bear-bg-gray-800","bear-border bear-border-gray-200 dark:bear-border-gray-700"],T&&["bear-px-3 bear-py-2 bear-rounded-lg","bear-bg-gray-900 dark:bear-bg-gray-100","bear-text-white dark:bear-text-gray-900","bear-shadow-lg"],!g&&!T&&"bear-text-[var(--bear-text-primary)]"),children:a.value}),D&&r.jsx("span",{className:d.cn("Bear-CountdownTimer__label",q,"bear-mt-1 bear-uppercase bear-tracking-widest","bear-text-gray-500 dark:bear-text-gray-400"),children:a.label})]})]},a.label))})};exports.CountdownTimer=G;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),t=require("react"),d=require("../../utils/cn.cjs"),f=require("../Typography/Typography.cjs"),e=require("./CountdownTimer.const.cjs"),s=require("./CountdownTimer.utils.cjs"),te=L=>{const{targetDate:u,duration:m,variant:p="default",size:I="md",showDays:N=!0,showHours:v=!0,showMinutes:D=!0,showSeconds:B=!0,showLabels:P=!0,showSeparator:k=!0,separator:O=e.DEFAULT_SEPARATOR,labels:T,onComplete:l,onTick:b,paused:x=!1,render:w,className:j,style:G,testId:q,digitTypographyProps:Z,labelTypographyProps:F,separatorTypographyProps:K,narrowLayout:A=!0}=L,c=t.useMemo(()=>({...e.DEFAULT_LABELS,...T}),[T]),E=t.useRef(!1),M=t.useCallback(()=>u?new Date(u).getTime():m?Date.now()+m*e.MS_PER_SECOND:Date.now(),[u,m]),[g]=t.useState(M),[n,W]=t.useState(()=>s.calcRemaining(g,Date.now()));if(t.useEffect(()=>{if(x)return;const r=()=>{const _=s.calcRemaining(g,Date.now());W(_),b==null||b(_),_.isComplete&&!E.current&&(E.current=!0,l==null||l())};r();const y=setInterval(r,e.UPDATE_INTERVAL);return()=>clearInterval(y)},[g,x,l,b]),w)return a.jsx(a.Fragment,{children:w(n)});const i=I,C=e.SIZE_DIGIT_CLASSES[i]??e.SIZE_DIGIT_CLASSES.md,z=e.SIZE_LABEL_CLASSES[i]??e.SIZE_LABEL_CLASSES.md,U=e.SIZE_GAP_CLASSES[i]??e.SIZE_GAP_CLASSES.md,h=A?e.NARROW_DIGIT_BREAKPOINT_CLASSES[i]??e.NARROW_DIGIT_BREAKPOINT_CLASSES.md:"",V=A?e.NARROW_LABEL_BREAKPOINT_CLASSES[i]??e.NARROW_LABEL_BREAKPOINT_CLASSES.md:"",o=[];N&&o.push({value:s.pad(n.days),label:c.days}),v&&o.push({value:s.pad(n.hours),label:c.hours}),D&&o.push({value:s.pad(n.minutes),label:c.minutes}),B&&o.push({value:s.pad(n.seconds),label:c.seconds});const S=p==="card",R=p==="flip",H=p==="digital",{className:J,variant:Q,...X}=Z??{},{className:Y,variant:$,...ee}=F??{},{className:ae,...re}=K??{};return a.jsx("div",{className:d.cn("Bear-CountdownTimer","bear-flex bear-max-w-full bear-min-w-0 bear-flex-wrap bear-items-center bear-justify-center",U,j),style:G,"data-testid":q,role:"timer","aria-label":"Countdown timer",children:o.map((r,y)=>a.jsxs("div",{className:"Bear-CountdownTimer__segment bear-flex bear-min-w-0 bear-items-center bear-justify-center",children:[y>0&&k&&!S&&a.jsx("span",{className:d.cn("Bear-CountdownTimer__separator",C,h,e.SEPARATOR_MARGIN,"bear-text-gray-400 dark:bear-text-gray-500",ae),"aria-hidden":"true",...re,children:O}),a.jsxs("div",{className:"Bear-CountdownTimer__unit bear-flex bear-min-w-0 bear-flex-col bear-items-center",children:[a.jsx(f.Typography,{component:"div",variant:Q??"body2",align:"center",className:d.cn("Bear-CountdownTimer__digit",C,h,"bear-tabular-nums bear-tracking-wider",S&&["bear-px-3 bear-py-2 max-[480px]:bear-px-2 max-[480px]:bear-py-1.5 bear-rounded-lg","bear-bg-gray-100 dark:bear-bg-gray-800","bear-border bear-border-gray-200 dark:bear-border-gray-700"],R&&["bear-px-3 bear-py-2 max-[480px]:bear-px-2 max-[480px]:bear-py-1.5 bear-rounded-lg","bear-bg-gray-900 dark:bear-bg-gray-100","bear-text-white dark:bear-text-gray-900","bear-shadow-lg"],H&&["bear-rounded-md bear-px-2 bear-py-1","bear-bg-black bear-text-emerald-400 dark:bear-bg-zinc-900 dark:bear-text-emerald-300","bear-font-mono"],!S&&!R&&"bear-text-[var(--bear-text-primary)]",J),...X,children:r.value}),P&&a.jsx(f.Typography,{component:"span",variant:$??"caption",align:"center",className:d.cn("Bear-CountdownTimer__label",z,V,"bear-mt-1 bear-uppercase bear-tracking-widest","bear-text-gray-500 dark:bear-text-gray-400",Y),...ee,children:r.label})]})]},r.label))})};exports.CountdownTimer=te;

package/dist/components/CountdownTimer/CountdownTimer.const.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const S=1e3,E=60*S,t=60*E,e=24*t,_={days:"Days",hours:"Hours",minutes:"Minutes",seconds:"Seconds"},A=":",s=2,o={sm:"bear-text-lg bear-font-bold",md:"bear-text-3xl bear-font-bold",lg:"bear-text-5xl bear-font-bold",xl:"bear-text-7xl bear-font-bold"},a={sm:"bear-text-[10px]",md:"bear-text-xs",lg:"bear-text-sm",xl:"bear-text-base"},b={sm:"bear-gap-2",md:"bear-gap-3",lg:"bear-gap-4",xl:"bear-gap-5"},r="bear-mx-1",n=1e3;exports.DEFAULT_LABELS=_;exports.DEFAULT_SEPARATOR=A;exports.MS_PER_DAY=e;exports.MS_PER_HOUR=t;exports.MS_PER_MINUTE=E;exports.MS_PER_SECOND=S;exports.PAD_LENGTH=s;exports.SEPARATOR_MARGIN=r;exports.SIZE_DIGIT_CLASSES=o;exports.SIZE_GAP_CLASSES=b;exports.SIZE_LABEL_CLASSES=a;exports.UPDATE_INTERVAL=n;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=1e3,t=60*e,x=60*t,S=24*x,a={days:"Days",hours:"Hours",minutes:"Minutes",seconds:"Seconds"},E=":",_=2,A={sm:"bear-text-lg bear-font-bold",md:"bear-text-3xl bear-font-bold",lg:"bear-text-5xl bear-font-bold",xl:"bear-text-7xl bear-font-bold"},b={sm:"bear-text-[10px]",md:"bear-text-xs",lg:"bear-text-sm",xl:"bear-text-base"},s={sm:"bear-gap-2",md:"bear-gap-3",lg:"bear-gap-4",xl:"bear-gap-5"},r={sm:"max-[480px]:bear-text-base",md:"max-[480px]:bear-text-2xl max-[480px]:bear-leading-none",lg:"max-[480px]:bear-text-3xl max-[480px]:bear-leading-tight",xl:"max-[480px]:bear-text-4xl max-[480px]:bear-leading-tight"},R={sm:"max-[480px]:bear-text-[9px]",md:"max-[480px]:bear-text-[10px]",lg:"max-[480px]:bear-text-xs",xl:"max-[480px]:bear-text-sm"},o="bear-mx-1",L=1e3;exports.DEFAULT_LABELS=a;exports.DEFAULT_SEPARATOR=E;exports.MS_PER_DAY=S;exports.MS_PER_HOUR=x;exports.MS_PER_MINUTE=t;exports.MS_PER_SECOND=e;exports.NARROW_DIGIT_BREAKPOINT_CLASSES=r;exports.NARROW_LABEL_BREAKPOINT_CLASSES=R;exports.PAD_LENGTH=_;exports.SEPARATOR_MARGIN=o;exports.SIZE_DIGIT_CLASSES=A;exports.SIZE_GAP_CLASSES=s;exports.SIZE_LABEL_CLASSES=b;exports.UPDATE_INTERVAL=L;

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

@@ -21,6 +21,8 @@ export declare const SIZE_DIGIT_CLASSES: Record<CountdownTimerSize, string>;
 export declare const SIZE_LABEL_CLASSES: Record<CountdownTimerSize, string>;
 /** Gap classes per size */
 export declare const SIZE_GAP_CLASSES: Record<CountdownTimerSize, string>;
+export declare const NARROW_DIGIT_BREAKPOINT_CLASSES: Record<CountdownTimerSize, string>;
+export declare const NARROW_LABEL_BREAKPOINT_CLASSES: Record<CountdownTimerSize, string>;
 /** Separator horizontal margin */
 export declare const SEPARATOR_MARGIN = "bear-mx-1";
 /** Update interval in ms */

package/dist/components/CountdownTimer/CountdownTimer.const.js

@@ -1,35 +1,47 @@
-const t = 1e3, e = 6e4, s = 36e5, E = 864e5, o = {
+const e = 1e3, t = 6e4, x = 36e5, a = 864e5, b = {
   days: "Days",
   hours: "Hours",
   minutes: "Minutes",
   seconds: "Seconds"
-}, S = ":", _ = 2, a = {
+}, s = ":", r = 2, E = {
   sm: "bear-text-lg bear-font-bold",
   md: "bear-text-3xl bear-font-bold",
   lg: "bear-text-5xl bear-font-bold",
   xl: "bear-text-7xl bear-font-bold"
-}, b = {
+}, S = {
   sm: "bear-text-[10px]",
   md: "bear-text-xs",
   lg: "bear-text-sm",
   xl: "bear-text-base"
-}, n = {
+}, _ = {
   sm: "bear-gap-2",
   md: "bear-gap-3",
   lg: "bear-gap-4",
   xl: "bear-gap-5"
-}, r = "bear-mx-1", x = 1e3;
+}, o = {
+  sm: "max-[480px]:bear-text-base",
+  md: "max-[480px]:bear-text-2xl max-[480px]:bear-leading-none",
+  lg: "max-[480px]:bear-text-3xl max-[480px]:bear-leading-tight",
+  xl: "max-[480px]:bear-text-4xl max-[480px]:bear-leading-tight"
+}, n = {
+  sm: "max-[480px]:bear-text-[9px]",
+  md: "max-[480px]:bear-text-[10px]",
+  lg: "max-[480px]:bear-text-xs",
+  xl: "max-[480px]:bear-text-sm"
+}, m = "bear-mx-1", l = 1e3;
 export {
-  o as DEFAULT_LABELS,
-  S as DEFAULT_SEPARATOR,
-  E as MS_PER_DAY,
-  s as MS_PER_HOUR,
-  e as MS_PER_MINUTE,
-  t as MS_PER_SECOND,
-  _ as PAD_LENGTH,
-  r as SEPARATOR_MARGIN,
-  a as SIZE_DIGIT_CLASSES,
-  n as SIZE_GAP_CLASSES,
-  b as SIZE_LABEL_CLASSES,
-  x as UPDATE_INTERVAL
+  b as DEFAULT_LABELS,
+  s as DEFAULT_SEPARATOR,
+  a as MS_PER_DAY,
+  x as MS_PER_HOUR,
+  t as MS_PER_MINUTE,
+  e as MS_PER_SECOND,
+  o as NARROW_DIGIT_BREAKPOINT_CLASSES,
+  n as NARROW_LABEL_BREAKPOINT_CLASSES,
+  r as PAD_LENGTH,
+  m as SEPARATOR_MARGIN,
+  E as SIZE_DIGIT_CLASSES,
+  _ as SIZE_GAP_CLASSES,
+  S as SIZE_LABEL_CLASSES,
+  l as UPDATE_INTERVAL
 };

package/dist/components/CountdownTimer/CountdownTimer.js

@@ -1,98 +1,128 @@
-import { jsx as t, Fragment as H, jsxs as C } from "react/jsx-runtime";
-import { useMemo as V, useRef as q, useCallback as J, useState as E, useEffect as K } from "react";
-import { cn as o } from "../../utils/cn.js";
-import { DEFAULT_SEPARATOR as Q, DEFAULT_LABELS as W, MS_PER_SECOND as X, UPDATE_INTERVAL as Y, SEPARATOR_MARGIN as $, SIZE_DIGIT_CLASSES as T, SIZE_LABEL_CLASSES as A, SIZE_GAP_CLASSES as v } from "./CountdownTimer.const.js";
-import { calcRemaining as D, pad as l } from "./CountdownTimer.utils.js";
-const ne = (L) => {
+import { jsx as s, Fragment as be, jsxs as A } from "react/jsx-runtime";
+import { useMemo as de, useRef as me, useCallback as ce, useState as E, useEffect as ue } from "react";
+import { cn as l } from "../../utils/cn.js";
+import { Typography as v } from "../Typography/Typography.js";
+import { DEFAULT_SEPARATOR as pe, DEFAULT_LABELS as ge, MS_PER_SECOND as ye, UPDATE_INTERVAL as xe, SEPARATOR_MARGIN as fe, NARROW_DIGIT_BREAKPOINT_CLASSES as R, SIZE_DIGIT_CLASSES as L, NARROW_LABEL_BREAKPOINT_CLASSES as N, SIZE_LABEL_CLASSES as D, SIZE_GAP_CLASSES as I } from "./CountdownTimer.const.js";
+import { calcRemaining as k, pad as b } from "./CountdownTimer.utils.js";
+const Ae = (B) => {
   const {
     targetDate: d,
-    duration: b,
-    variant: f = "default",
-    size: u = "md",
-    showDays: I = !0,
-    showHours: N = !0,
-    showMinutes: k = !0,
-    showSeconds: R = !0,
-    showLabels: B = !0,
-    showSeparator: P = !0,
-    separator: F = Q,
-    labels: w,
-    onComplete: s,
-    onTick: n,
-    paused: h = !1,
-    render: _,
-    className: M,
-    style: G,
-    testId: O
-  } = L, i = V(() => ({ ...W, ...w }), [w]), S = q(!1), U = J(() => d ? new Date(d).getTime() : b ? Date.now() + b * X : Date.now(), [d, b]), [c] = E(U), [r, Z] = E(() => D(c, Date.now()));
-  if (K(() => {
-    if (h) return;
+    duration: m,
+    variant: c = "default",
+    size: P = "md",
+    showDays: O = !0,
+    showHours: F = !0,
+    showMinutes: j = !0,
+    showSeconds: G = !0,
+    showLabels: M = !0,
+    showSeparator: z = !0,
+    separator: K = pe,
+    labels: x,
+    onComplete: n,
+    onTick: o,
+    paused: f = !1,
+    render: w,
+    className: U,
+    style: V,
+    testId: Z,
+    digitTypographyProps: W,
+    labelTypographyProps: H,
+    separatorTypographyProps: q,
+    narrowLayout: T = !0
+  } = B, i = de(() => ({ ...ge, ...x }), [x]), _ = me(!1), J = ce(() => d ? new Date(d).getTime() : m ? Date.now() + m * ye : Date.now(), [d, m]), [u] = E(J), [a, Q] = E(() => k(u, Date.now()));
+  if (ue(() => {
+    if (f) return;
     const e = () => {
-      const p = D(c, Date.now());
-      Z(p), n == null || n(p), p.isComplete && !S.current && (S.current = !0, s == null || s());
+      const y = k(u, Date.now());
+      Q(y), o == null || o(y), y.isComplete && !_.current && (_.current = !0, n == null || n());
     };
     e();
-    const g = setInterval(e, Y);
+    const g = setInterval(e, xe);
     return () => clearInterval(g);
-  }, [c, h, s, n]), _) return /* @__PURE__ */ t(H, { children: _(r) });
-  const y = T[u] ?? T.md, j = A[u] ?? A.md, z = v[u] ?? v.md, a = [];
-  I && a.push({ value: l(r.days), label: i.days }), N && a.push({ value: l(r.hours), label: i.hours }), k && a.push({ value: l(r.minutes), label: i.minutes }), R && a.push({ value: l(r.seconds), label: i.seconds });
-  const m = f === "card", x = f === "flip";
-  return /* @__PURE__ */ t(
+  }, [u, f, n, o]), w) return /* @__PURE__ */ s(be, { children: w(a) });
+  const r = P, h = L[r] ?? L.md, X = D[r] ?? D.md, Y = I[r] ?? I.md, S = T ? R[r] ?? R.md : "", $ = T ? N[r] ?? N.md : "", t = [];
+  O && t.push({ value: b(a.days), label: i.days }), F && t.push({ value: b(a.hours), label: i.hours }), j && t.push({ value: b(a.minutes), label: i.minutes }), G && t.push({ value: b(a.seconds), label: i.seconds });
+  const p = c === "card", C = c === "flip", ee = c === "digital", { className: ae, variant: re, ...te } = W ?? {}, { className: se, variant: ne, ...oe } = H ?? {}, { className: ie, ...le } = q ?? {};
+  return /* @__PURE__ */ s(
     "div",
     {
-      className: o("Bear-CountdownTimer", "bear-flex bear-items-center", z, M),
-      style: G,
-      "data-testid": O,
+      className: l(
+        "Bear-CountdownTimer",
+        "bear-flex bear-max-w-full bear-min-w-0 bear-flex-wrap bear-items-center bear-justify-center",
+        Y,
+        U
+      ),
+      style: V,
+      "data-testid": Z,
       role: "timer",
       "aria-label": "Countdown timer",
-      children: a.map((e, g) => /* @__PURE__ */ C("div", { className: "Bear-CountdownTimer__segment bear-flex bear-items-center", children: [
-        g > 0 && P && !m && /* @__PURE__ */ t(
+      children: t.map((e, g) => /* @__PURE__ */ A("div", { className: "Bear-CountdownTimer__segment bear-flex bear-min-w-0 bear-items-center bear-justify-center", children: [
+        g > 0 && z && !p && /* @__PURE__ */ s(
           "span",
           {
-            className: o(
+            className: l(
               "Bear-CountdownTimer__separator",
-              y,
-              $,
-              "bear-text-gray-400 dark:bear-text-gray-500"
+              h,
+              S,
+              fe,
+              "bear-text-gray-400 dark:bear-text-gray-500",
+              ie
             ),
             "aria-hidden": "true",
-            children: F
+            ...le,
+            children: K
           }
         ),
-        /* @__PURE__ */ C("div", { className: "Bear-CountdownTimer__unit bear-flex bear-flex-col bear-items-center", children: [
-          /* @__PURE__ */ t(
-            "div",
+        /* @__PURE__ */ A("div", { className: "Bear-CountdownTimer__unit bear-flex bear-min-w-0 bear-flex-col bear-items-center", children: [
+          /* @__PURE__ */ s(
+            v,
             {
-              className: o(
+              component: "div",
+              variant: re ?? "body2",
+              align: "center",
+              className: l(
                 "Bear-CountdownTimer__digit",
-                y,
+                h,
+                S,
                 "bear-tabular-nums bear-tracking-wider",
-                m && [
-                  "bear-px-3 bear-py-2 bear-rounded-lg",
+                p && [
+                  "bear-px-3 bear-py-2 max-[480px]:bear-px-2 max-[480px]:bear-py-1.5 bear-rounded-lg",
                   "bear-bg-gray-100 dark:bear-bg-gray-800",
                   "bear-border bear-border-gray-200 dark:bear-border-gray-700"
                 ],
-                x && [
-                  "bear-px-3 bear-py-2 bear-rounded-lg",
+                C && [
+                  "bear-px-3 bear-py-2 max-[480px]:bear-px-2 max-[480px]:bear-py-1.5 bear-rounded-lg",
                   "bear-bg-gray-900 dark:bear-bg-gray-100",
                   "bear-text-white dark:bear-text-gray-900",
                   "bear-shadow-lg"
                 ],
-                !m && !x && "bear-text-[var(--bear-text-primary)]"
+                ee && [
+                  "bear-rounded-md bear-px-2 bear-py-1",
+                  "bear-bg-black bear-text-emerald-400 dark:bear-bg-zinc-900 dark:bear-text-emerald-300",
+                  "bear-font-mono"
+                ],
+                !p && !C && "bear-text-[var(--bear-text-primary)]",
+                ae
               ),
+              ...te,
               children: e.value
             }
           ),
-          B && /* @__PURE__ */ t(
-            "span",
+          M && /* @__PURE__ */ s(
+            v,
             {
-              className: o(
+              component: "span",
+              variant: ne ?? "caption",
+              align: "center",
+              className: l(
                 "Bear-CountdownTimer__label",
-                j,
+                X,
+                $,
                 "bear-mt-1 bear-uppercase bear-tracking-widest",
-                "bear-text-gray-500 dark:bear-text-gray-400"
+                "bear-text-gray-500 dark:bear-text-gray-400",
+                se
               ),
+              ...oe,
               children: e.label
             }
           )
@@ -102,5 +132,5 @@ const ne = (L) => {
   );
 };
 export {
-  ne as CountdownTimer
+  Ae as CountdownTimer
 };

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

@@ -1,5 +1,6 @@
 import { ReactNode } from 'react';
-export type CountdownTimerVariant = 'default' | 'card' | 'minimal' | 'flip';
+import { TypographyProps } from '../Typography/Typography.types';
+export type CountdownTimerVariant = 'default' | 'card' | 'minimal' | 'flip' | 'digital';
 export type CountdownTimerSize = 'sm' | 'md' | 'lg' | 'xl';
 export interface CountdownTimerProps {
     /** Target date/time to count down to */
@@ -23,7 +24,7 @@ export interface CountdownTimerProps {
     /** Whether to show separator */
     showSeparator?: boolean;
     /** Separator character */
-    separator?: string;
+    separator?: string | number;
     /** Custom labels */
     labels?: {
         days?: string;
@@ -45,6 +46,14 @@ export interface CountdownTimerProps {
     style?: React.CSSProperties;
     /** Test ID */
     testId?: string;
+    /** Typography props for digit blocks (merged with size presets). */
+    digitTypographyProps?: Partial<TypographyProps>;
+    /** Typography props for unit labels. */
+    labelTypographyProps?: Partial<TypographyProps>;
+    /** Typography props for separators (e.g., ":" size/style). */
+    separatorTypographyProps?: Partial<TypographyProps>;
+    /** When true (default), use smaller digits and wrapping on narrow widths. */
+    narrowLayout?: boolean;
 }
 export interface CountdownTime {
     days: number;