@forgedevstack/bear 1.2.0 → 1.2.2

package/dist/components/DateRangePicker/DateRangePicker.js

@@ -1,38 +1,38 @@
-import { jsxs as i, jsx as t } from "react/jsx-runtime";
-import { useState as u, useRef as P, useEffect as T, useCallback as v } from "react";
-import { createPortal as se } from "react-dom";
+import { jsxs as d, jsx as t } from "react/jsx-runtime";
+import { useState as h, useRef as P, useEffect as T, useCallback as _ } from "react";
+import { createPortal as le } from "react-dom";
 import { cn as p } from "../../utils/cn.js";
-import { getDefaultPresets as oe, LABEL_CLASSES as le, SIZE_CLASSES as ce, TRIGGER_CLASSES as ie, PRESET_BTN_CLASSES as $, ERROR_CLASSES as de, HELPER_CLASSES as be, ROOT_CLASSES as me, CALENDAR_HEADER_CLASSES as ue, NAV_BTN_CLASSES as G, MONTH_LABELS as pe, DAY_LABELS as he, DAY_TODAY_CLASSES as Se, DAY_IN_RANGE_CLASSES as fe, DAY_SELECTED_CLASSES as ge, DAY_DISABLED_CLASSES as Ee, DAY_HOVER_CLASSES as Le, DAY_BASE_CLASSES as ke } from "./DateRangePicker.const.js";
-import { formatDate as W, getCalendarDays as Ae, isSameDay as Y, isInRange as Ne } from "./DateRangePicker.utils.js";
-const F = ({ year: E, month: c, range: r, onDayClick: L, onNav: k, minDate: d, maxDate: A }) => {
-  const N = Ae(E, c), h = /* @__PURE__ */ new Date();
-  return h.setHours(0, 0, 0, 0), /* @__PURE__ */ i("div", { className: "bear-w-64", children: [
-    /* @__PURE__ */ i("div", { className: ue, children: [
-      /* @__PURE__ */ t("button", { type: "button", onClick: () => k(-1), className: G, "aria-label": "Previous month", children: /* @__PURE__ */ t("svg", { className: "bear-w-4 bear-h-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ t("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" }) }) }),
-      /* @__PURE__ */ i("span", { className: "bear-text-sm bear-font-semibold bear-text-gray-900 dark:bear-text-white", children: [
-        pe[c],
+import { getDefaultPresets as ie, LABEL_CLASSES as ce, SIZE_CLASSES as de, TRIGGER_CLASSES as be, PRESET_BTN_CLASSES as $, ERROR_CLASSES as me, HELPER_CLASSES as ue, ROOT_CLASSES as he, CALENDAR_HEADER_CLASSES as pe, NAV_BTN_CLASSES as G, MONTH_LABELS as Se, DAY_LABELS as fe, DAY_TODAY_CLASSES as we, DAY_IN_RANGE_CLASSES as Ee, DAY_SELECTED_CLASSES as ge, DAY_DISABLED_CLASSES as Le, DAY_HOVER_CLASSES as ve, DAY_BASE_CLASSES as Ae } from "./DateRangePicker.const.js";
+import { formatDate as F, getCalendarDays as ke, isSameDay as Y, isInRange as xe } from "./DateRangePicker.utils.js";
+const Z = ({ year: L, month: c, range: r, onDayClick: v, onNav: A, minDate: b, maxDate: k }) => {
+  const x = ke(L, c), S = /* @__PURE__ */ new Date();
+  return S.setHours(0, 0, 0, 0), /* @__PURE__ */ d("div", { className: "bear-w-64", children: [
+    /* @__PURE__ */ d("div", { className: pe, children: [
+      /* @__PURE__ */ t("button", { type: "button", onClick: () => A(-1), className: G, "aria-label": "Previous month", children: /* @__PURE__ */ t("svg", { className: "bear-w-4 bear-h-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ t("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" }) }) }),
+      /* @__PURE__ */ d("span", { className: "bear-text-sm bear-font-semibold bear-text-gray-900 dark:bear-text-white", children: [
+        Se[c],
         " ",
-        E
+        L
       ] }),
-      /* @__PURE__ */ t("button", { type: "button", onClick: () => k(1), className: G, "aria-label": "Next month", children: /* @__PURE__ */ t("svg", { className: "bear-w-4 bear-h-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ t("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }) }) })
+      /* @__PURE__ */ t("button", { type: "button", onClick: () => A(1), className: G, "aria-label": "Next month", children: /* @__PURE__ */ t("svg", { className: "bear-w-4 bear-h-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ t("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }) }) })
     ] }),
-    /* @__PURE__ */ t("div", { className: "bear-grid bear-grid-cols-7 bear-gap-0.5 bear-mb-1", children: he.map((a) => /* @__PURE__ */ t("div", { className: "bear-text-xs bear-text-center bear-font-medium bear-text-gray-400 dark:bear-text-zinc-500 bear-py-1", children: a }, a)) }),
-    /* @__PURE__ */ t("div", { className: "bear-grid bear-grid-cols-7 bear-gap-0.5", children: N.map((a, x) => {
-      if (!a) return /* @__PURE__ */ t("div", {}, `e-${x}`);
-      const S = d && a < d || A && a > A, l = Y(a, r.start) || Y(a, r.end), b = Ne(a, r.start, r.end), _ = Y(a, h);
+    /* @__PURE__ */ t("div", { className: "bear-grid bear-grid-cols-7 bear-gap-0.5 bear-mb-1", children: fe.map((a) => /* @__PURE__ */ t("div", { className: "bear-text-xs bear-text-center bear-font-medium bear-text-gray-400 dark:bear-text-zinc-500 bear-py-1", children: a }, a)) }),
+    /* @__PURE__ */ t("div", { className: "bear-grid bear-grid-cols-7 bear-gap-0.5", children: x.map((a, D) => {
+      if (!a) return /* @__PURE__ */ t("div", {}, `e-${D}`);
+      const f = b && a < b || k && a > k, l = Y(a, r.start) || Y(a, r.end), m = xe(a, r.start, r.end), R = Y(a, S);
       return /* @__PURE__ */ t(
         "button",
         {
           type: "button",
-          disabled: !!S,
-          onClick: () => L(a),
+          disabled: !!f,
+          onClick: () => v(a),
           className: p(
-            ke,
-            S ? Ee : Le,
+            Ae,
+            f ? Le : ve,
             l && ge,
-            !l && b && fe,
-            !l && !b && _ && Se,
-            !l && !b && !S && "bear-text-gray-700 dark:bear-text-zinc-300"
+            !l && m && Ee,
+            !l && !m && R && we,
+            !l && !m && !f && "bear-text-gray-700 dark:bear-text-zinc-300"
           ),
           children: a.getDate()
         },
@@ -40,102 +40,107 @@ const F = ({ year: E, month: c, range: r, onDayClick: L, onNav: k, minDate: d, m
       );
     }) })
   ] });
-}, Re = (E) => {
+}, Pe = (L) => {
   const {
     value: c,
     onChange: r,
-    label: L,
-    placeholder: k = "Select date range",
-    disabled: d = !1,
-    clearable: A = !0,
-    minDate: N,
-    maxDate: h,
+    label: v,
+    placeholder: A = "Select date range",
+    disabled: b = !1,
+    clearable: k = !0,
+    minDate: x,
+    maxDate: S,
     presets: a,
-    showPresets: x = !0,
-    size: S = "md",
+    showPresets: D = !0,
+    size: f = "md",
     error: l,
-    helperText: b,
-    className: _,
-    testId: Z,
-    ...q
-  } = E, [w, D] = u(!1), [H, J] = u({ top: 0, left: 0 }), [s, f] = u(c ?? { start: null, end: null }), [M, C] = u("start"), z = P(null), R = P(null), O = P(null), I = /* @__PURE__ */ new Date(), [m, K] = u(I.getMonth()), [g, Q] = u(I.getFullYear()), U = m === 11 ? 0 : m + 1, X = m === 11 ? g + 1 : g;
+    helperText: m,
+    className: R,
+    testId: q,
+    ...J
+  } = L, [N, y] = h(!1), [z, K] = h({ top: 0, left: 0 }), [s, w] = h(c ?? { start: null, end: null }), [H, C] = h("start"), O = P(null), M = P(null), I = P(null), W = /* @__PURE__ */ new Date(), [u, Q] = h(W.getMonth()), [E, U] = h(W.getFullYear()), X = u === 11 ? 0 : u + 1, ee = u === 11 ? E + 1 : E;
   T(() => {
-    c && f(c);
+    c && w(c);
   }, [c]), T(() => {
-    if (w && R.current) {
-      const e = R.current.getBoundingClientRect(), n = 8, o = 400, ne = window.innerHeight - e.bottom < o && e.top > o;
-      J({
-        top: ne ? e.top - o - n : e.bottom + n,
-        left: e.left
-      });
-    }
-  }, [w]), T(() => {
+    if (!N || !M.current) return;
+    const e = 8, n = 420, o = () => {
+      const i = M.current.getBoundingClientRect(), g = window.innerHeight;
+      let B = g - i.bottom < n && i.top > n ? i.top - n - e : i.bottom + e;
+      B = Math.max(8, Math.min(B, g - n - 8));
+      const se = Math.min(640, window.innerWidth - 16);
+      let oe = Math.max(8, Math.min(i.left, window.innerWidth - se - 8));
+      K({ top: B, left: oe });
+    };
+    return o(), window.addEventListener("resize", o), window.addEventListener("scroll", o, !0), () => {
+      window.removeEventListener("resize", o), window.removeEventListener("scroll", o, !0);
+    };
+  }, [N]), T(() => {
     const e = (n) => {
-      var y, B;
+      var i, g;
       const o = n.target;
-      (y = z.current) != null && y.contains(o) || (B = O.current) != null && B.contains(o) || D(!1);
+      (i = O.current) != null && i.contains(o) || (g = I.current) != null && g.contains(o) || y(!1);
     };
     return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
   }, []);
-  const j = v((e) => {
-    if (M === "start")
-      f({ start: e, end: null }), C("end");
+  const j = _((e) => {
+    if (H === "start")
+      w({ start: e, end: null }), C("end");
     else {
       const n = e >= (s.start ?? e) ? { start: s.start, end: e } : { start: e, end: s.start };
-      f(n), C("start"), r == null || r(n);
+      w(n), C("start"), r == null || r(n);
     }
-  }, [M, s.start, r]), ee = v((e) => {
-    f(e), r == null || r(e), D(!1), C("start");
-  }, [r]), te = v(() => {
+  }, [H, s.start, r]), te = _((e) => {
+    w(e), r == null || r(e), y(!1), C("start");
+  }, [r]), re = _(() => {
     const e = { start: null, end: null };
-    f(e), r == null || r(e), C("start");
-  }, [r]), re = v((e) => {
-    let n = m + e, o = g;
-    n < 0 && (n = 11, o--), n > 11 && (n = 0, o++), K(n), Q(o);
-  }, [m, g]), V = a ?? (x ? oe() : []), ae = s.start ? `${W(s.start)}${s.end ? ` – ${W(s.end)}` : ""}` : k;
-  return /* @__PURE__ */ i("div", { ref: z, className: p(me, _), "data-testid": Z, ...q, children: [
-    L && /* @__PURE__ */ t("label", { className: le, children: L }),
-    /* @__PURE__ */ i(
+    w(e), r == null || r(e), C("start");
+  }, [r]), ae = _((e) => {
+    let n = u + e, o = E;
+    n < 0 && (n = 11, o--), n > 11 && (n = 0, o++), Q(n), U(o);
+  }, [u, E]), V = a ?? (D ? ie() : []), ne = s.start ? `${F(s.start)}${s.end ? ` – ${F(s.end)}` : ""}` : A;
+  return /* @__PURE__ */ d("div", { ref: O, className: p(he, R), "data-testid": q, ...J, children: [
+    v && /* @__PURE__ */ t("label", { className: ce, children: v }),
+    /* @__PURE__ */ d(
       "button",
       {
-        ref: R,
+        ref: M,
         type: "button",
-        disabled: d,
-        onClick: () => !d && D(!w),
-        className: p(ie, ce[S], d && "bear-opacity-50 bear-cursor-not-allowed"),
+        disabled: b,
+        onClick: () => !b && y(!N),
+        className: p(be, de[f], b && "bear-opacity-50 bear-cursor-not-allowed"),
         children: [
-          /* @__PURE__ */ t("span", { className: p(!s.start && "bear-text-gray-400 dark:bear-text-zinc-500"), children: ae }),
+          /* @__PURE__ */ t("span", { className: p(!s.start && "bear-text-gray-400 dark:bear-text-zinc-500"), children: ne }),
           /* @__PURE__ */ t("svg", { className: "bear-w-4 bear-h-4 bear-ml-2 bear-text-gray-400", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ t("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" }) })
         ]
       }
     ),
-    w && typeof document < "u" && se(
+    N && typeof document < "u" && le(
       /* @__PURE__ */ t(
         "div",
         {
-          ref: O,
+          ref: I,
           "data-bear-daterangepicker-dropdown": !0,
           className: p(
-            "bear-fixed bear-z-[9999] bear-bg-white dark:bear-bg-zinc-800 bear-border bear-border-gray-200 dark:bear-border-zinc-700 bear-rounded-xl bear-shadow-xl bear-p-4"
+            "bear-fixed bear-z-[10000] bear-max-w-[calc(100vw-16px)] bear-bg-white dark:bear-bg-zinc-800 bear-border bear-border-gray-200 dark:bear-border-zinc-700 bear-rounded-xl bear-shadow-xl bear-p-4 bear-overflow-x-auto"
           ),
-          style: { top: H.top, left: H.left },
-          children: /* @__PURE__ */ i("div", { className: "bear-flex bear-gap-4", children: [
-            V.length > 0 && /* @__PURE__ */ i("div", { className: "bear-border-r bear-border-gray-200 dark:bear-border-zinc-700 bear-pr-3 bear-space-y-1 bear-min-w-[120px]", children: [
-              V.map((e) => /* @__PURE__ */ t("button", { type: "button", onClick: () => ee(e.range()), className: $, children: e.label }, e.label)),
-              A && s.start && /* @__PURE__ */ t("button", { type: "button", onClick: te, className: p($, "bear-text-red-500"), children: "Clear" })
+          style: { top: z.top, left: z.left },
+          children: /* @__PURE__ */ d("div", { className: "bear-flex bear-gap-4", children: [
+            V.length > 0 && /* @__PURE__ */ d("div", { className: "bear-border-r bear-border-gray-200 dark:bear-border-zinc-700 bear-pr-3 bear-space-y-1 bear-min-w-[120px]", children: [
+              V.map((e) => /* @__PURE__ */ t("button", { type: "button", onClick: () => te(e.range()), className: $, children: e.label }, e.label)),
+              k && s.start && /* @__PURE__ */ t("button", { type: "button", onClick: re, className: p($, "bear-text-red-500"), children: "Clear" })
             ] }),
-            /* @__PURE__ */ t(F, { year: g, month: m, range: s, onDayClick: j, onNav: re, minDate: N, maxDate: h }),
-            /* @__PURE__ */ t(F, { year: X, month: U, range: s, onDayClick: j, onNav: () => {
-            }, minDate: N, maxDate: h })
+            /* @__PURE__ */ t(Z, { year: E, month: u, range: s, onDayClick: j, onNav: ae, minDate: x, maxDate: S }),
+            /* @__PURE__ */ t(Z, { year: ee, month: X, range: s, onDayClick: j, onNav: () => {
+            }, minDate: x, maxDate: S })
           ] })
         }
       ),
       document.body
     ),
-    l && /* @__PURE__ */ t("p", { className: de, children: l }),
-    !l && b && /* @__PURE__ */ t("p", { className: be, children: b })
+    l && /* @__PURE__ */ t("p", { className: me, children: l }),
+    !l && m && /* @__PURE__ */ t("p", { className: ue, children: m })
   ] });
 };
 export {
-  Re as DateRangePicker
+  Pe as DateRangePicker
 };

package/dist/components/DiffSquares/DiffSquares.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),A=require("react"),D=require("../../utils/cn.cjs"),F=require("../Typography/Typography.cjs"),S=require("./DiffSquares.const.cjs"),E=require("./DiffSquares.utils.cjs"),N=({additionsText:n,deletionsText:t,cubeCount:c=S.DIFF_SQUARES_DEFAULT_COUNT,cubes:r,additionColor:m="var(--bear-colors-success-500, #22c55e)",deletionColor:q="var(--bear-colors-danger-500, #ef4444)",gap:_=S.DIFF_SQUARES_GAP,summaryTypographyProps:s,onCubeClick:i,onCubeHover:e,className:h,testId:j,...x})=>{const d=A.useMemo(()=>r!=null&&r.length?r:Array.from({length:c},()=>({fill:"full"})),[r,c]),g={variant:"body2",component:"span",...s,className:D.cn("bear-flex bear-shrink-0 bear-items-baseline bear-gap-1.5 bear-font-mono bear-font-semibold",s==null?void 0:s.className)};return l.jsxs("div",{className:D.cn("Bear-DiffSquares bear-inline-flex bear-min-w-0 bear-max-w-full bear-items-center bear-gap-2",h),"data-testid":j,...x,children:[(n!=null||t!=null)&&l.jsxs(F.Typography,{...g,children:[n!=null&&l.jsx("span",{style:{color:m},children:n}),t!=null&&l.jsx("span",{style:{color:q},children:t})]}),l.jsx("span",{className:"bear-inline-flex bear-items-center bear-flex-shrink-0",style:{gap:_},role:"img","aria-label":"Change density",children:d.map((a,f)=>l.jsx("span",{className:S.DIFF_SQUARES_CUBE_CLASS,style:E.getDiffCubeStyle(a,m,q),"aria-hidden":!(a!=null&&a.ariaLabel),title:a==null?void 0:a.ariaLabel,onMouseEnter:()=>e==null?void 0:e(a,f),onMouseLeave:()=>e==null?void 0:e(null,null),onClick:()=>i==null?void 0:i(a,f)},f))})]})};exports.DiffSquares=N;

package/dist/components/DiffSquares/DiffSquares.const.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=5,r="Bear-DiffSquares__cube bear-inline-block bear-w-2.5 bear-h-2.5 sm:bear-w-3 sm:bear-h-3 bear-rounded bear-shrink-0 bear-ring-1 bear-ring-inset bear-ring-black/18 dark:bear-ring-white/22 motion-reduce:bear-animate-none",a=4;exports.DIFF_SQUARES_CUBE_CLASS=r;exports.DIFF_SQUARES_DEFAULT_COUNT=e;exports.DIFF_SQUARES_GAP=a;

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

@@ -0,0 +1,3 @@
+export declare const DIFF_SQUARES_DEFAULT_COUNT = 5;
+export declare const DIFF_SQUARES_CUBE_CLASS = "Bear-DiffSquares__cube bear-inline-block bear-w-2.5 bear-h-2.5 sm:bear-w-3 sm:bear-h-3 bear-rounded bear-shrink-0 bear-ring-1 bear-ring-inset bear-ring-black/18 dark:bear-ring-white/22 motion-reduce:bear-animate-none";
+export declare const DIFF_SQUARES_GAP = 4;

package/dist/components/DiffSquares/DiffSquares.const.js

@@ -0,0 +1,6 @@
+const e = 5, r = "Bear-DiffSquares__cube bear-inline-block bear-w-2.5 bear-h-2.5 sm:bear-w-3 sm:bear-h-3 bear-rounded bear-shrink-0 bear-ring-1 bear-ring-inset bear-ring-black/18 dark:bear-ring-white/22 motion-reduce:bear-animate-none", a = 4;
+export {
+  r as DIFF_SQUARES_CUBE_CLASS,
+  e as DIFF_SQUARES_DEFAULT_COUNT,
+  a as DIFF_SQUARES_GAP
+};

package/dist/components/DiffSquares/DiffSquares.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { DiffSquaresProps } from './DiffSquares.types';
+export declare const DiffSquares: FC<DiffSquaresProps>;

package/dist/components/DiffSquares/DiffSquares.js

@@ -0,0 +1,70 @@
+import { jsxs as h, jsx as e } from "react/jsx-runtime";
+import { useMemo as L } from "react";
+import { cn as A } from "../../utils/cn.js";
+import { Typography as g } from "../Typography/Typography.js";
+import { DIFF_SQUARES_DEFAULT_COUNT as p, DIFF_SQUARES_GAP as x, DIFF_SQUARES_CUBE_CLASS as I } from "./DiffSquares.const.js";
+import { getDiffCubeStyle as M } from "./DiffSquares.utils.js";
+const B = ({
+  additionsText: s,
+  deletionsText: t,
+  cubeCount: m = p,
+  cubes: r,
+  additionColor: S = "var(--bear-colors-success-500, #22c55e)",
+  deletionColor: _ = "var(--bear-colors-danger-500, #ef4444)",
+  gap: D = x,
+  summaryTypographyProps: n,
+  onCubeClick: i,
+  onCubeHover: l,
+  className: F,
+  testId: E,
+  ...N
+}) => {
+  const U = L(() => r != null && r.length ? r : Array.from({ length: m }, () => ({ fill: "full" })), [r, m]), d = {
+    variant: "body2",
+    component: "span",
+    ...n,
+    className: A(
+      "bear-flex bear-shrink-0 bear-items-baseline bear-gap-1.5 bear-font-mono bear-font-semibold",
+      n == null ? void 0 : n.className
+    )
+  };
+  return /* @__PURE__ */ h(
+    "div",
+    {
+      className: A("Bear-DiffSquares bear-inline-flex bear-min-w-0 bear-max-w-full bear-items-center bear-gap-2", F),
+      "data-testid": E,
+      ...N,
+      children: [
+        (s != null || t != null) && /* @__PURE__ */ h(g, { ...d, children: [
+          s != null && /* @__PURE__ */ e("span", { style: { color: S }, children: s }),
+          t != null && /* @__PURE__ */ e("span", { style: { color: _ }, children: t })
+        ] }),
+        /* @__PURE__ */ e(
+          "span",
+          {
+            className: "bear-inline-flex bear-items-center bear-flex-shrink-0",
+            style: { gap: D },
+            role: "img",
+            "aria-label": "Change density",
+            children: U.map((a, f) => /* @__PURE__ */ e(
+              "span",
+              {
+                className: I,
+                style: M(a, S, _),
+                "aria-hidden": !(a != null && a.ariaLabel),
+                title: a == null ? void 0 : a.ariaLabel,
+                onMouseEnter: () => l == null ? void 0 : l(a, f),
+                onMouseLeave: () => l == null ? void 0 : l(null, null),
+                onClick: () => i == null ? void 0 : i(a, f)
+              },
+              f
+            ))
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  B as DiffSquares
+};

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

@@ -0,0 +1,23 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { TypographyProps } from '../Typography/Typography.types';
+export type DiffCubeFill = 'full' | 'empty' | 'half' | 'striped';
+export interface DiffCube {
+    fill?: DiffCubeFill;
+    color?: string;
+    secondaryColor?: string;
+    gradient?: string;
+    ariaLabel?: string;
+}
+export interface DiffSquaresProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    additionsText?: ReactNode;
+    deletionsText?: ReactNode;
+    cubeCount?: number;
+    cubes?: DiffCube[];
+    additionColor?: string;
+    deletionColor?: string;
+    gap?: number;
+    summaryTypographyProps?: Partial<TypographyProps>;
+    onCubeClick?: (cube: DiffCube, index: number) => void;
+    onCubeHover?: (cube: DiffCube | null, index: number | null) => void;
+    testId?: string;
+}

package/dist/components/DiffSquares/DiffSquares.utils.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function l(r,i,a){const t=(r==null?void 0:r.fill)??"full",n=(r==null?void 0:r.color)??i,o=(r==null?void 0:r.secondaryColor)??a;return r!=null&&r.gradient?{background:r.gradient}:t==="empty"?{backgroundColor:"transparent",boxShadow:`inset 0 0 0 1px ${n}55`}:t==="half"?{background:`linear-gradient(90deg, ${n} 50%, ${o} 50%)`}:t==="striped"?{background:`repeating-linear-gradient(135deg, ${n}, ${n} 2px, ${o} 2px, ${o} 4px)`}:{backgroundColor:n}}exports.getDiffCubeStyle=l;

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

@@ -0,0 +1,3 @@
+import { CSSProperties } from 'react';
+import { DiffCube } from './DiffSquares.types';
+export declare function getDiffCubeStyle(cube: DiffCube | undefined, additionFallback: string, deletionFallback: string): CSSProperties;

package/dist/components/DiffSquares/DiffSquares.utils.js

@@ -0,0 +1,12 @@
+function d(r, a, i) {
+  const o = (r == null ? void 0 : r.fill) ?? "full", n = (r == null ? void 0 : r.color) ?? a, t = (r == null ? void 0 : r.secondaryColor) ?? i;
+  return r != null && r.gradient ? { background: r.gradient } : o === "empty" ? {
+    backgroundColor: "transparent",
+    boxShadow: `inset 0 0 0 1px ${n}55`
+  } : o === "half" ? { background: `linear-gradient(90deg, ${n} 50%, ${t} 50%)` } : o === "striped" ? {
+    background: `repeating-linear-gradient(135deg, ${n}, ${n} 2px, ${t} 2px, ${t} 4px)`
+  } : { backgroundColor: n };
+}
+export {
+  d as getDiffCubeStyle
+};

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

@@ -0,0 +1,2 @@
+export { DiffSquares } from './DiffSquares';
+export type { DiffSquaresProps, DiffCube, DiffCubeFill } from './DiffSquares.types';

package/dist/components/DiffViewer/DiffViewer.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),y=require("react"),b=require("../../utils/cn.cjs"),T=require("../../context/BearProvider.cjs"),a=require("../Typography/Typography.cjs"),f=require("./DiffViewer.const.cjs"),h=require("./DiffViewer.utils.cjs"),q=({oldValue:c,newValue:l,viewMode:v="split",showLineNumbers:u=!0,oldTitle:N="Original",newTitle:j="Modified",showStats:x=!0,className:g,testId:m})=>{const{mode:w}=T.useBear(),p=w==="dark",d=y.useMemo(()=>h.computeDiff(c,l),[c,l]),i=y.useMemo(()=>h.computeStats(d),[d]),t=r=>u?e.jsx("span",{className:"select-none text-gray-400 dark:text-gray-600 text-right pr-3",style:{minWidth:f.LINE_NUMBER_WIDTH},children:r??""}):null,n=(r,s)=>{const o=f.DIFF_COLORS[s],D=s==="add"?"+":s==="remove"?"-":" ";return e.jsxs("div",{className:"flex font-mono text-sm",style:{backgroundColor:o.bg,borderLeft:`3px solid ${o.border}`},children:[e.jsx("span",{className:"px-2 select-none font-bold",style:{color:o.text},children:D}),e.jsx("span",{className:"flex-1 whitespace-pre",children:r})]})};if(v==="unified")return e.jsxs("div",{className:b.cn("Bear-DiffViewer","rounded-lg overflow-hidden border",p?"bg-gray-900 border-gray-700":"bg-white border-gray-200",g),"data-testid":m,children:[x&&e.jsxs("div",{className:"flex items-center gap-4 px-4 py-2 border-b border-gray-200 dark:border-gray-700",children:[e.jsxs(a.Typography,{variant:"caption",className:"text-green-600",children:["+",i.additions," additions"]}),e.jsxs(a.Typography,{variant:"caption",className:"text-red-600",children:["-",i.deletions," deletions"]})]}),e.jsx("div",{className:"overflow-x-auto",children:d.map((r,s)=>e.jsxs("div",{className:"flex",children:[t(r.oldLineNumber||r.newLineNumber),e.jsx("div",{className:"flex-1",children:n(r.content,r.type)})]},s))})]});const k=d.filter(r=>r.type!=="add"),L=d.filter(r=>r.type!=="remove");return e.jsxs("div",{className:b.cn("Bear-DiffViewer","rounded-lg overflow-hidden border",p?"bg-gray-900 border-gray-700":"bg-white border-gray-200",g),"data-testid":m,children:[x&&e.jsxs("div",{className:"flex items-center gap-4 px-4 py-2 border-b border-gray-200 dark:border-gray-700",children:[e.jsxs(a.Typography,{variant:"caption",className:"text-green-600",children:["+",i.additions," additions"]}),e.jsxs(a.Typography,{variant:"caption",className:"text-red-600",children:["-",i.deletions," deletions"]})]}),e.jsxs("div",{className:"grid grid-cols-2 divide-x divide-gray-200 dark:divide-gray-700",children:[e.jsxs("div",{children:[e.jsx("div",{className:"px-3 py-2 bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700",children:e.jsx(a.Typography,{variant:"caption",className:"font-semibold",children:N})}),e.jsx("div",{className:"overflow-x-auto",children:k.map((r,s)=>e.jsxs("div",{className:"flex",children:[t(r.oldLineNumber),e.jsx("div",{className:"flex-1",children:n(r.content,r.type==="remove"?"remove":"context")})]},s))})]}),e.jsxs("div",{children:[e.jsx("div",{className:"px-3 py-2 bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700",children:e.jsx(a.Typography,{variant:"caption",className:"font-semibold",children:j})}),e.jsx("div",{className:"overflow-x-auto",children:L.map((r,s)=>e.jsxs("div",{className:"flex",children:[t(r.newLineNumber),e.jsx("div",{className:"flex-1",children:n(r.content,r.type==="add"?"add":"context")})]},s))})]})]})]})};exports.DiffViewer=q;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),n=require("react"),o=require("../../utils/cn.cjs"),R=require("../../context/BearProvider.cjs"),d=require("../Typography/Typography.cjs"),a=require("./DiffViewer.const.cjs"),N=require("./DiffViewer.utils.cjs"),P=({oldValue:m,newValue:p,viewMode:j="split",showLineNumbers:L=!0,oldTitle:T=a.DEFAULT_OLD_TITLE,newTitle:k=a.DEFAULT_NEW_TITLE,showStats:E=!0,spacing:D=a.DEFAULT_SPACING,showLineHoverInfo:c=!1,className:_,testId:h})=>{const{mode:w}=R.useBear(),S=w==="dark",[C,b]=n.useState(null),t=n.useMemo(()=>N.computeDiff(m,p),[m,p]),l=n.useMemo(()=>N.computeStats(t),[t]),f=a.LINE_SPACING[D],q=n.useCallback(r=>{c&&b(r)},[c]),A=n.useCallback(()=>{b(null)},[]),x=r=>L?e.jsx("span",{className:o.cn("select-none text-gray-400 dark:text-gray-600 text-right pr-3",f),style:{minWidth:a.LINE_NUMBER_WIDTH},children:r??""}):null,u=(r,s,i)=>{const g=a.DIFF_COLORS[s],F=s==="add"?"+":s==="remove"?"-":" ",O=i!=null&&C===i;return e.jsxs("div",{className:o.cn("flex font-mono text-sm relative group",f),style:{backgroundColor:g.bg,borderLeft:`3px solid ${g.border}`},onMouseEnter:()=>i!=null&&q(i),onMouseLeave:A,children:[e.jsx("span",{className:"px-2 select-none font-bold",style:{color:g.text},children:F}),e.jsx("span",{className:"flex-1 whitespace-pre",children:r}),c&&O&&s!=="context"&&e.jsx("span",{className:o.cn("absolute right-2 top-1/2 -translate-y-1/2 text-xs px-2 py-0.5 rounded",s==="add"?"bg-green-500/20 text-green-600 dark:text-green-400":"bg-red-500/20 text-red-600 dark:text-red-400"),children:a.LINE_HOVER_LABELS[s]})]})},v=()=>E?e.jsxs("div",{className:"flex items-center gap-4 px-4 py-2 border-b border-gray-200 dark:border-gray-700",children:[e.jsxs(d.Typography,{variant:"caption",className:"text-green-600",children:["+",l.additions," additions"]}),e.jsxs(d.Typography,{variant:"caption",className:"text-red-600",children:["-",l.deletions," deletions"]}),e.jsxs(d.Typography,{variant:"caption",className:"text-gray-500",children:[l.unchanged," unchanged"]})]}):null,y=o.cn("Bear-DiffViewer","rounded-lg overflow-hidden border",S?"bg-gray-900 border-gray-700":"bg-white border-gray-200",_);if(j==="unified")return e.jsxs("div",{className:y,"data-testid":h,children:[v(),e.jsx("div",{className:"overflow-x-auto",children:t.map((r,s)=>e.jsxs("div",{className:"flex",children:[x(r.oldLineNumber||r.newLineNumber),e.jsx("div",{className:"flex-1",children:u(r.content,r.type,s)})]},s))})]});const B=t.filter(r=>r.type!=="add"),M=t.filter(r=>r.type!=="remove");return e.jsxs("div",{className:y,"data-testid":h,children:[v(),e.jsxs("div",{className:"grid grid-cols-2 divide-x divide-gray-200 dark:divide-gray-700",children:[e.jsxs("div",{children:[e.jsx("div",{className:"px-3 py-2 bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700",children:e.jsx(d.Typography,{variant:"caption",className:"font-semibold",children:T})}),e.jsx("div",{className:"overflow-x-auto",children:B.map((r,s)=>e.jsxs("div",{className:"flex",children:[x(r.oldLineNumber),e.jsx("div",{className:"flex-1",children:u(r.content,r.type==="remove"?"remove":"context",s)})]},s))})]}),e.jsxs("div",{children:[e.jsx("div",{className:"px-3 py-2 bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700",children:e.jsx(d.Typography,{variant:"caption",className:"font-semibold",children:k})}),e.jsx("div",{className:"overflow-x-auto",children:M.map((r,s)=>e.jsxs("div",{className:"flex",children:[x(r.newLineNumber),e.jsx("div",{className:"flex-1",children:u(r.content,r.type==="add"?"add":"context",s)})]},s))})]})]})]})};exports.DiffViewer=P;

package/dist/components/DiffViewer/DiffViewer.const.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e={add:{bg:"rgba(34, 197, 94, 0.15)",border:"rgba(34, 197, 94, 0.4)",text:"#22c55e"},remove:{bg:"rgba(239, 68, 68, 0.15)",border:"rgba(239, 68, 68, 0.4)",text:"#ef4444"},context:{bg:"transparent",border:"transparent",text:"inherit"}},t=50;exports.DIFF_COLORS=e;exports.LINE_NUMBER_WIDTH=t;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e={add:{bg:"rgba(34, 197, 94, 0.15)",border:"rgba(34, 197, 94, 0.4)",text:"#22c55e"},remove:{bg:"rgba(239, 68, 68, 0.15)",border:"rgba(239, 68, 68, 0.4)",text:"#ef4444"},context:{bg:"transparent",border:"transparent",text:"inherit"}},t=50,o={compact:"py-0",comfortable:"py-1",spacious:"py-2"},r={add:"Added",remove:"Removed",context:"Unchanged"},E="Original",L="Modified",_="comfortable";exports.DEFAULT_NEW_TITLE=L;exports.DEFAULT_OLD_TITLE=E;exports.DEFAULT_SPACING=_;exports.DIFF_COLORS=e;exports.LINE_HOVER_LABELS=r;exports.LINE_NUMBER_WIDTH=t;exports.LINE_SPACING=o;

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

@@ -1,3 +1,4 @@
+import { DiffSpacing } from './DiffViewer.types';
 export declare const DIFF_COLORS: {
     readonly add: {
         readonly bg: "rgba(34, 197, 94, 0.15)";
@@ -16,3 +17,8 @@ export declare const DIFF_COLORS: {
     };
 };
 export declare const LINE_NUMBER_WIDTH = 50;
+export declare const LINE_SPACING: Record<DiffSpacing, string>;
+export declare const LINE_HOVER_LABELS: Record<string, string>;
+export declare const DEFAULT_OLD_TITLE = "Original";
+export declare const DEFAULT_NEW_TITLE = "Modified";
+export declare const DEFAULT_SPACING: DiffSpacing;

package/dist/components/DiffViewer/DiffViewer.const.js

@@ -1,4 +1,4 @@
-const r = {
+const t = {
   add: {
     bg: "rgba(34, 197, 94, 0.15)",
     border: "rgba(34, 197, 94, 0.4)",
@@ -14,8 +14,21 @@ const r = {
     border: "transparent",
     text: "inherit"
   }
-}, t = 50;
+}, e = 50, o = {
+  compact: "py-0",
+  comfortable: "py-1",
+  spacious: "py-2"
+}, r = {
+  add: "Added",
+  remove: "Removed",
+  context: "Unchanged"
+}, n = "Original", a = "Modified", c = "comfortable";
 export {
-  r as DIFF_COLORS,
-  t as LINE_NUMBER_WIDTH
+  a as DEFAULT_NEW_TITLE,
+  n as DEFAULT_OLD_TITLE,
+  c as DEFAULT_SPACING,
+  t as DIFF_COLORS,
+  r as LINE_HOVER_LABELS,
+  e as LINE_NUMBER_WIDTH,
+  o as LINE_SPACING
 };

package/dist/components/DiffViewer/DiffViewer.d.ts

@@ -1,18 +1,4 @@
 import { FC } from 'react';
 import { DiffViewerProps } from './DiffViewer.types';
-/**
- * DiffViewer - Compare and visualize text/code differences
- *
- * @example
- * ```tsx
- * <DiffViewer
- *   oldValue="const x = 1;"
- *   newValue="const x = 2;"
- *   viewMode="split"
- *   showLineNumbers
- *   showStats
- * />
- * ```
- */
 export declare const DiffViewer: FC<DiffViewerProps>;
 export default DiffViewer;