@forgedevstack/bear 1.0.7 → 1.0.9

package/dist/components/Cropper/Cropper.js

@@ -0,0 +1,362 @@
+import { jsxs as d, jsx as n } from "react/jsx-runtime";
+import { useRef as U, useState as f, useMemo as ve, useCallback as o, useEffect as Me } from "react";
+import { cn as F } from "../../utils/cn.js";
+import { DEFAULT_CROP as pe, DEFAULT_ZOOM as ke, ASPECT_RATIO_VALUES as Ne, MIN_ZOOM as Oe, MAX_ZOOM as Ie, MIN_CROP_SIZE as K, ZOOM_STEP as P, OVERLAY_COLOR as _e, BORDER_WIDTH as De, BORDER_COLOR as Le, DEFAULT_GRID_OPACITY as Ae, GRID_LINES as y, HANDLE_SIZE as _, ROTATION_STEP as Te, MAX_ROTATION as Q, MIN_ROTATION as S } from "./Cropper.const.js";
+const Re = ({
+  src: D,
+  crop: L,
+  onCropChange: M,
+  onCropComplete: p,
+  aspectRatio: k = "free",
+  shape: N = "rectangle",
+  zoom: A,
+  onZoomChange: O,
+  minZoom: T = Oe,
+  maxZoom: E = Ie,
+  rotation: $,
+  onRotationChange: I,
+  showZoomSlider: g = !1,
+  showRotationSlider: m = !1,
+  showGrid: Z = !1,
+  gridOpacity: C = Ae,
+  overlayColor: ee = _e,
+  borderColor: te = Le,
+  borderWidth: ae = De,
+  width: re = "100%",
+  height: ie = 400,
+  className: ne,
+  style: se,
+  testId: he
+}) => {
+  const H = U(null), Y = U(null), j = U(null), [ce, le] = f(pe), [de, be] = f(ke), [oe, ue] = f(0), [w, X] = f("none"), [v, B] = f(null), [ge, me] = f(!1), [, xe] = f({ w: 0, h: 0 }), a = L ?? ce, u = A ?? de, W = $ ?? oe, h = ve(() => typeof k == "number" ? k : Ne[k] ?? null, [k]), G = o(
+    (e) => {
+      L || le(e), M == null || M(e);
+    },
+    [L, M]
+  ), R = o(
+    (e) => {
+      const t = Math.max(T, Math.min(E, e));
+      A || be(t), O == null || O(t);
+    },
+    [A, O, T, E]
+  ), fe = o(
+    (e) => {
+      const t = Math.max(S, Math.min(Q, e));
+      $ || ue(t), I == null || I(t);
+    },
+    [$, I]
+  );
+  Me(() => {
+    const e = new Image();
+    e.crossOrigin = "anonymous", e.onload = () => {
+      j.current = e, xe({ w: e.naturalWidth, h: e.naturalHeight }), me(!0);
+    }, e.src = D;
+  }, [D]);
+  const l = o(
+    (e) => {
+      const t = H.current;
+      if (!t) return e;
+      const i = t.clientWidth, r = t.clientHeight - (g || m ? 60 : 0);
+      let { x: s, y: x, width: b, height: c } = e;
+      return b = Math.max(K, b), c = Math.max(K, c), h && (c = b / h), s = Math.max(0, Math.min(i - b, s)), x = Math.max(0, Math.min(r - c, x)), { x: s, y: x, width: b, height: c };
+    },
+    [h, g, m]
+  ), V = o(() => {
+    const e = Y.current, t = j.current, i = H.current;
+    if (!e || !t || !i) return "";
+    const r = i.clientWidth, s = i.clientHeight - (g || m ? 60 : 0), x = t.naturalWidth / (r * u), b = t.naturalHeight / (s * u);
+    e.width = a.width * x, e.height = a.height * b;
+    const c = e.getContext("2d");
+    return c ? (N === "circle" && (c.beginPath(), c.arc(e.width / 2, e.height / 2, Math.min(e.width, e.height) / 2, 0, Math.PI * 2), c.clip()), c.drawImage(
+      t,
+      a.x * x,
+      a.y * b,
+      a.width * x,
+      a.height * b,
+      0,
+      0,
+      e.width,
+      e.height
+    ), e.toDataURL("image/png")) : "";
+  }, [a, u, N, g, m]), z = o(
+    (e) => (t) => {
+      t.preventDefault(), t.stopPropagation(), X(e), B({ x: t.clientX, y: t.clientY, crop: { ...a } });
+    },
+    [a]
+  ), we = o(
+    (e) => {
+      if (w === "none" || !v) return;
+      const t = e.clientX - v.x, i = e.clientY - v.y, { crop: r } = v;
+      let s;
+      switch (w) {
+        case "move":
+          s = l({
+            ...r,
+            x: r.x + t,
+            y: r.y + i
+          });
+          break;
+        case "se":
+          s = l({
+            ...r,
+            width: r.width + t,
+            height: h ? (r.width + t) / h : r.height + i
+          });
+          break;
+        case "sw":
+          s = l({
+            ...r,
+            x: r.x + t,
+            width: r.width - t,
+            height: h ? (r.width - t) / h : r.height + i
+          });
+          break;
+        case "ne":
+          s = l({
+            ...r,
+            y: h ? r.y : r.y + i,
+            width: r.width + t,
+            height: h ? (r.width + t) / h : r.height - i
+          });
+          break;
+        case "nw":
+          s = l({
+            x: r.x + t,
+            y: r.y + i,
+            width: r.width - t,
+            height: h ? (r.width - t) / h : r.height - i
+          });
+          break;
+        case "n":
+          s = l({ ...r, y: r.y + i, height: r.height - i });
+          break;
+        case "s":
+          s = l({ ...r, height: r.height + i });
+          break;
+        case "e":
+          s = l({ ...r, width: r.width + t });
+          break;
+        case "w":
+          s = l({ ...r, x: r.x + t, width: r.width - t });
+          break;
+        default:
+          return;
+      }
+      G(s);
+    },
+    [w, v, l, G, h]
+  ), q = o(() => {
+    if (w !== "none") {
+      const e = V();
+      p == null || p(a, e);
+    }
+    X("none"), B(null);
+  }, [w, a, V, p]), ye = o(
+    (e) => {
+      e.preventDefault();
+      const t = e.deltaY > 0 ? -P : P;
+      R(u + t);
+    },
+    [u, R]
+  ), J = g || m ? 60 : 0;
+  return /* @__PURE__ */ d(
+    "div",
+    {
+      className: F(
+        "bear-relative bear-overflow-hidden bear-rounded-lg",
+        "bear-bg-gray-900 bear-select-none",
+        ne
+      ),
+      style: { width: re, height: ie, ...se },
+      "data-testid": he,
+      children: [
+        /* @__PURE__ */ n("canvas", { ref: Y, className: "bear-hidden" }),
+        /* @__PURE__ */ d(
+          "div",
+          {
+            ref: H,
+            className: "bear-relative bear-overflow-hidden bear-cursor-crosshair",
+            style: { height: `calc(100% - ${J}px)` },
+            onMouseMove: we,
+            onMouseUp: q,
+            onMouseLeave: q,
+            onWheel: ye,
+            children: [
+              ge && /* @__PURE__ */ n(
+                "img",
+                {
+                  src: D,
+                  alt: "",
+                  className: "bear-absolute bear-inset-0 bear-w-full bear-h-full bear-object-contain bear-pointer-events-none",
+                  style: {
+                    transform: `scale(${u}) rotate(${W}deg)`,
+                    transition: w !== "none" ? "none" : "transform 0.2s ease"
+                  },
+                  draggable: !1
+                }
+              ),
+              /* @__PURE__ */ d("svg", { className: "bear-absolute bear-inset-0 bear-w-full bear-h-full bear-pointer-events-none", children: [
+                /* @__PURE__ */ n("defs", { children: /* @__PURE__ */ d("mask", { id: "crop-mask", children: [
+                  /* @__PURE__ */ n("rect", { width: "100%", height: "100%", fill: "white" }),
+                  N === "circle" ? /* @__PURE__ */ n(
+                    "ellipse",
+                    {
+                      cx: a.x + a.width / 2,
+                      cy: a.y + a.height / 2,
+                      rx: a.width / 2,
+                      ry: a.height / 2,
+                      fill: "black"
+                    }
+                  ) : /* @__PURE__ */ n("rect", { x: a.x, y: a.y, width: a.width, height: a.height, fill: "black" })
+                ] }) }),
+                /* @__PURE__ */ n("rect", { width: "100%", height: "100%", fill: ee, mask: "url(#crop-mask)" })
+              ] }),
+              /* @__PURE__ */ n(
+                "div",
+                {
+                  className: "bear-absolute bear-pointer-events-none",
+                  style: {
+                    left: a.x,
+                    top: a.y,
+                    width: a.width,
+                    height: a.height,
+                    border: `${ae}px solid ${te}`,
+                    borderRadius: N === "circle" ? "50%" : 0,
+                    boxShadow: "0 0 0 9999px transparent"
+                  },
+                  children: Z && /* @__PURE__ */ d("svg", { className: "bear-absolute bear-inset-0 bear-w-full bear-h-full", style: { opacity: C }, children: [
+                    Array.from({ length: y - 1 }).map((e, t) => /* @__PURE__ */ n(
+                      "line",
+                      {
+                        x1: `${(t + 1) / y * 100}%`,
+                        y1: "0",
+                        x2: `${(t + 1) / y * 100}%`,
+                        y2: "100%",
+                        stroke: "white",
+                        strokeWidth: "0.5"
+                      },
+                      `v-${t}`
+                    )),
+                    Array.from({ length: y - 1 }).map((e, t) => /* @__PURE__ */ n(
+                      "line",
+                      {
+                        x1: "0",
+                        y1: `${(t + 1) / y * 100}%`,
+                        x2: "100%",
+                        y2: `${(t + 1) / y * 100}%`,
+                        stroke: "white",
+                        strokeWidth: "0.5"
+                      },
+                      `h-${t}`
+                    ))
+                  ] })
+                }
+              ),
+              /* @__PURE__ */ n(
+                "div",
+                {
+                  className: "bear-absolute bear-cursor-move",
+                  style: { left: a.x, top: a.y, width: a.width, height: a.height },
+                  onMouseDown: z("move")
+                }
+              ),
+              ["nw", "ne", "sw", "se"].map((e) => {
+                const t = e.includes("w"), i = e.includes("n");
+                return /* @__PURE__ */ n(
+                  "div",
+                  {
+                    className: F(
+                      "bear-absolute bear-bg-white bear-border-2 bear-rounded-sm",
+                      "bear-shadow-md bear-z-10"
+                    ),
+                    style: {
+                      width: _,
+                      height: _,
+                      left: (t ? a.x : a.x + a.width) - _ / 2,
+                      top: (i ? a.y : a.y + a.height) - _ / 2,
+                      borderColor: "var(--bear-primary-500)",
+                      cursor: `${e}-resize`
+                    },
+                    onMouseDown: z(e)
+                  },
+                  e
+                );
+              }),
+              ["n", "s", "e", "w"].map((e) => {
+                const t = e === "n" || e === "s";
+                return /* @__PURE__ */ n(
+                  "div",
+                  {
+                    className: "bear-absolute bear-z-10",
+                    style: {
+                      left: e === "w" ? a.x - 4 : e === "e" ? a.x + a.width - 4 : a.x + a.width / 2 - 12,
+                      top: e === "n" ? a.y - 4 : e === "s" ? a.y + a.height - 4 : a.y + a.height / 2 - 12,
+                      width: t ? 24 : 8,
+                      height: t ? 8 : 24,
+                      cursor: t ? `${e}-resize` : `${e}-resize`
+                    },
+                    onMouseDown: z(e)
+                  },
+                  e
+                );
+              })
+            ]
+          }
+        ),
+        (g || m) && /* @__PURE__ */ d(
+          "div",
+          {
+            className: F(
+              "bear-flex bear-items-center bear-gap-4 bear-px-4",
+              "bear-bg-gray-800/90 bear-backdrop-blur-sm"
+            ),
+            style: { height: J },
+            children: [
+              g && /* @__PURE__ */ d("div", { className: "bear-flex bear-items-center bear-gap-2 bear-flex-1", children: [
+                /* @__PURE__ */ n("svg", { className: "bear-w-4 bear-h-4 bear-text-gray-400", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ n("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7" }) }),
+                /* @__PURE__ */ n(
+                  "input",
+                  {
+                    type: "range",
+                    min: T,
+                    max: E,
+                    step: P,
+                    value: u,
+                    onChange: (e) => R(parseFloat(e.target.value)),
+                    className: "bear-flex-1 bear-h-1 bear-accent-pink-500"
+                  }
+                ),
+                /* @__PURE__ */ d("span", { className: "bear-text-xs bear-text-gray-400 bear-w-10 bear-text-right", children: [
+                  (u * 100).toFixed(0),
+                  "%"
+                ] })
+              ] }),
+              m && /* @__PURE__ */ d("div", { className: "bear-flex bear-items-center bear-gap-2 bear-flex-1", children: [
+                /* @__PURE__ */ n("svg", { className: "bear-w-4 bear-h-4 bear-text-gray-400", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ n("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" }) }),
+                /* @__PURE__ */ n(
+                  "input",
+                  {
+                    type: "range",
+                    min: S,
+                    max: Q,
+                    step: Te,
+                    value: W,
+                    onChange: (e) => fe(parseFloat(e.target.value)),
+                    className: "bear-flex-1 bear-h-1 bear-accent-pink-500"
+                  }
+                ),
+                /* @__PURE__ */ d("span", { className: "bear-text-xs bear-text-gray-400 bear-w-10 bear-text-right", children: [
+                  W,
+                  "°"
+                ] })
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  Re as Cropper
+};

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

@@ -0,0 +1,72 @@
+import { CSSProperties } from 'react';
+/**
+ * Crop area coordinates
+ */
+export interface CropArea {
+    /** X position (px) */
+    x: number;
+    /** Y position (px) */
+    y: number;
+    /** Width (px) */
+    width: number;
+    /** Height (px) */
+    height: number;
+}
+/**
+ * Aspect ratio presets
+ */
+export type AspectRatioPreset = 'free' | '1:1' | '4:3' | '3:2' | '16:9' | '2:3' | '3:4' | '9:16';
+/**
+ * Crop shape
+ */
+export type CropShape = 'rectangle' | 'circle';
+export interface CropperProps {
+    /** Image source URL or data URL */
+    src: string;
+    /** Controlled crop area */
+    crop?: CropArea;
+    /** Called when crop area changes */
+    onCropChange?: (crop: CropArea) => void;
+    /** Called when crop is complete (on mouse up) */
+    onCropComplete?: (crop: CropArea, croppedImageUrl: string) => void;
+    /** Aspect ratio (number or preset) */
+    aspectRatio?: number | AspectRatioPreset;
+    /** Crop shape */
+    shape?: CropShape;
+    /** Zoom level (1 = original) */
+    zoom?: number;
+    /** Called when zoom changes */
+    onZoomChange?: (zoom: number) => void;
+    /** Min zoom level */
+    minZoom?: number;
+    /** Max zoom level */
+    maxZoom?: number;
+    /** Rotation angle in degrees */
+    rotation?: number;
+    /** Called when rotation changes */
+    onRotationChange?: (rotation: number) => void;
+    /** Show zoom slider */
+    showZoomSlider?: boolean;
+    /** Show rotation slider */
+    showRotationSlider?: boolean;
+    /** Show grid overlay */
+    showGrid?: boolean;
+    /** Grid opacity (0-1) */
+    gridOpacity?: number;
+    /** Overlay color (the dark area outside crop) */
+    overlayColor?: string;
+    /** Border color of crop area */
+    borderColor?: string;
+    /** Border width in px */
+    borderWidth?: number;
+    /** Width of the cropper */
+    width?: string | number;
+    /** Height of the cropper */
+    height?: string | number;
+    /** Custom class name */
+    className?: string;
+    /** Custom styles */
+    style?: CSSProperties;
+    /** Test ID */
+    testId?: string;
+}

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

@@ -0,0 +1,2 @@
+export { Cropper } from './Cropper';
+export type { CropperProps, CropArea, AspectRatioPreset, CropShape, } from './Cropper.types';

package/dist/components/DataTable/DataTable.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),s=require("../../utils/cn.cjs"),S=({columns:t,data:i,rowKey:h,variant:l="simple",loading:o=!1,emptyContent:x="No data available",onRowClick:d,clickable:c=!1,sortColumn:y,sortDirection:p="asc",onSort:n,compact:g=!1,stickyHeader:j=!1,maxHeight:f,className:k,testId:N})=>{const v=e=>{const b=t.find(a=>a.key===e);b!=null&&b.sortable&&n&&n(e)},m=g?"bear-px-3 bear-py-2":"bear-px-4 bear-py-3",M=g?"bear-px-3 bear-py-2":"bear-px-4 bear-py-3";return r.jsx("div",{className:s.cn("bear-w-full bear-overflow-hidden bear-rounded-lg bear-border bear-border-gray-200 dark:bear-border-gray-700",k),"data-testid":N,children:r.jsx("div",{className:"bear-overflow-auto",style:{maxHeight:f},children:r.jsxs("table",{className:"bear-w-full bear-border-collapse bear-text-sm",children:[r.jsx("thead",{className:s.cn("bear-bg-gray-50 dark:bear-bg-gray-800",j&&"bear-sticky bear-top-0 bear-z-10"),children:r.jsx("tr",{children:t.map(e=>r.jsx("th",{className:s.cn(M,"bear-text-left bear-font-semibold bear-text-gray-700 dark:bear-text-gray-200","bear-border-b bear-border-gray-200 dark:bear-border-gray-700",e.align==="center"&&"bear-text-center",e.align==="right"&&"bear-text-right",e.sortable&&"bear-cursor-pointer hover:bear-bg-gray-100 dark:hover:bear-bg-gray-700",e.hideOnMobile&&"bear-hidden md:bear-table-cell"),style:{width:e.width},onClick:()=>e.sortable&&v(e.key),children:r.jsxs("div",{className:"bear-flex bear-items-center bear-gap-1",children:[e.header,e.sortable&&y===e.key&&r.jsx("svg",{className:s.cn("bear-w-4 bear-h-4 bear-transition-transform",p==="desc"&&"bear-rotate-180"),fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",children:r.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M5 15l7-7 7 7"})})]})},e.key))})}),r.jsx("tbody",{className:"bear-bg-white dark:bear-bg-gray-900",children:o?r.jsx("tr",{children:r.jsx("td",{colSpan:t.length,className:"bear-py-12 bear-text-center",children:r.jsx("div",{className:"bear-flex bear-justify-center",children:r.jsxs("svg",{className:"bear-animate-spin bear-w-6 bear-h-6 bear-text-amber-500",viewBox:"0 0 24 24",fill:"none",children:[r.jsx("circle",{className:"bear-opacity-25",cx:"12",cy:"12",r:"10",stroke:"currentColor",strokeWidth:"4"}),r.jsx("path",{className:"bear-opacity-75",fill:"currentColor",d:"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"})]})})})}):i.length===0?r.jsx("tr",{children:r.jsx("td",{colSpan:t.length,className:"bear-py-12 bear-text-center bear-text-gray-500 dark:bear-text-gray-400",children:x})}):i.map((e,b)=>r.jsx("tr",{onClick:()=>(c||d)&&(d==null?void 0:d(e,b)),className:s.cn(l==="striped"&&b%2===1&&"bear-bg-gray-50 dark:bear-bg-gray-800/50",l==="bordered"&&"bear-border-b bear-border-gray-200 dark:bear-border-gray-700",(c||d)&&"bear-cursor-pointer hover:bear-bg-amber-50 dark:hover:bear-bg-amber-900/10",l!=="bordered"&&"bear-border-b bear-border-gray-100 dark:bear-border-gray-800"),children:t.map(a=>r.jsx("td",{className:s.cn(m,"bear-text-gray-900 dark:bear-text-white",a.align==="center"&&"bear-text-center",a.align==="right"&&"bear-text-right",a.hideOnMobile&&"bear-hidden md:bear-table-cell"),children:a.cell?a.cell(e,b):a.accessor?a.accessor(e):String(e[a.key]??"")},a.key))},h(e,b)))})]})})})},z=t=>t;exports.DataTable=S;exports.createColumns=z;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),s=require("../../utils/cn.cjs");require("react");const S=({columns:t,data:i,rowKey:h,variant:l="simple",loading:o=!1,emptyContent:x="No data available",onRowClick:d,clickable:c=!1,sortColumn:y,sortDirection:p="asc",onSort:n,compact:g=!1,stickyHeader:j=!1,maxHeight:f,className:k,testId:N})=>{const v=e=>{const b=t.find(a=>a.key===e);b!=null&&b.sortable&&n&&n(e)},m=g?"bear-px-3 bear-py-2":"bear-px-4 bear-py-3",M=g?"bear-px-3 bear-py-2":"bear-px-4 bear-py-3";return r.jsx("div",{className:s.cn("bear-w-full bear-overflow-hidden bear-rounded-lg bear-border bear-border-gray-200 dark:bear-border-gray-700",k),"data-testid":N,children:r.jsx("div",{className:"bear-overflow-auto",style:{maxHeight:f},children:r.jsxs("table",{className:"bear-w-full bear-border-collapse bear-text-sm",children:[r.jsx("thead",{className:s.cn("bear-bg-gray-50 dark:bear-bg-gray-800",j&&"bear-sticky bear-top-0 bear-z-10"),children:r.jsx("tr",{children:t.map(e=>r.jsx("th",{className:s.cn(M,"bear-text-left bear-font-semibold bear-text-gray-700 dark:bear-text-gray-200","bear-border-b bear-border-gray-200 dark:bear-border-gray-700",e.align==="center"&&"bear-text-center",e.align==="right"&&"bear-text-right",e.sortable&&"bear-cursor-pointer hover:bear-bg-gray-100 dark:hover:bear-bg-gray-700",e.hideOnMobile&&"bear-hidden md:bear-table-cell"),style:{width:e.width},onClick:()=>e.sortable&&v(e.key),children:r.jsxs("div",{className:"bear-flex bear-items-center bear-gap-1",children:[e.header,e.sortable&&y===e.key&&r.jsx("svg",{className:s.cn("bear-w-4 bear-h-4 bear-transition-transform",p==="desc"&&"bear-rotate-180"),fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",children:r.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M5 15l7-7 7 7"})})]})},e.key))})}),r.jsx("tbody",{className:"bear-bg-white dark:bear-bg-gray-900",children:o?r.jsx("tr",{children:r.jsx("td",{colSpan:t.length,className:"bear-py-12 bear-text-center",children:r.jsx("div",{className:"bear-flex bear-justify-center",children:r.jsxs("svg",{className:"bear-animate-spin bear-w-6 bear-h-6 bear-text-amber-500",viewBox:"0 0 24 24",fill:"none",children:[r.jsx("circle",{className:"bear-opacity-25",cx:"12",cy:"12",r:"10",stroke:"currentColor",strokeWidth:"4"}),r.jsx("path",{className:"bear-opacity-75",fill:"currentColor",d:"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"})]})})})}):i.length===0?r.jsx("tr",{children:r.jsx("td",{colSpan:t.length,className:"bear-py-12 bear-text-center bear-text-gray-500 dark:bear-text-gray-400",children:x})}):i.map((e,b)=>r.jsx("tr",{onClick:()=>(c||d)&&(d==null?void 0:d(e,b)),className:s.cn(l==="striped"&&b%2===1&&"bear-bg-gray-50 dark:bear-bg-gray-800/50",l==="bordered"&&"bear-border-b bear-border-gray-200 dark:bear-border-gray-700",(c||d)&&"bear-cursor-pointer hover:bear-bg-amber-50 dark:hover:bear-bg-amber-900/10",l!=="bordered"&&"bear-border-b bear-border-gray-100 dark:bear-border-gray-800"),children:t.map(a=>r.jsx("td",{className:s.cn(m,"bear-text-gray-900 dark:bear-text-white",a.align==="center"&&"bear-text-center",a.align==="right"&&"bear-text-right",a.hideOnMobile&&"bear-hidden md:bear-table-cell"),children:a.cell?a.cell(e,b):a.accessor?a.accessor(e):String(e[a.key]??"")},a.key))},h(e,b)))})]})})})},q=t=>t;exports.DataTable=S;exports.createColumns=q;

package/dist/components/DataTable/DataTable.js

@@ -1,6 +1,7 @@
 import { jsx as r, jsxs as i } from "react/jsx-runtime";
 import { cn as d } from "../../utils/cn.js";
-const B = ({
+import "react";
+const L = ({
   columns: t,
   data: h,
   rowKey: n,
@@ -113,8 +114,8 @@ const B = ({
       )
     }
   );
-}, L = (t) => t;
+}, O = (t) => t;
 export {
-  B as DataTable,
-  L as createColumns
+  L as DataTable,
+  O as createColumns
 };

package/dist/components/DatePicker/DatePicker.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),a=require("react"),J=require("react-dom"),K=require("../Calendar/Calendar.cjs"),D=require("../../utils/cn.cjs"),Q=require("../../hooks/useBearStyles.cjs"),U=require("./DatePicker.utils.cjs"),X=({value:c,onChange:t,minDate:y,maxDate:j,disabled:b=!1,placeholder:z="Select date",label:p,error:o,helperText:m,format:B="MM/DD/YYYY",clearable:P=!0,className:_,style:h,bis:v,showWeekNumbers:S=!1,disabledDates:N=[],highlightedDates:g=[],slots:q,weekdayLabels:R,firstDayOfWeek:V=0,size:H="md",variant:M="default",icon:O})=>{const[i,n]=a.useState(!1),[E,L]=a.useState(c??new Date),[x,Y]=a.useState({top:0,left:0}),k=a.useRef(null),d=a.useRef(null),w=Q.useBearStyles(v,h);a.useEffect(()=>{if(i&&d.current){const e=d.current.getBoundingClientRect(),l=8,s=360,G=window.innerHeight-e.bottom<s&&e.top>s;Y({top:G?e.top-s-l:e.bottom+l,left:e.left})}},[i]),a.useEffect(()=>{const e=l=>{var u,f;const s=l.target;(u=k.current)!=null&&u.contains(s)||(f=s.closest)!=null&&f.call(s,"[data-bear-datepicker-calendar]")||n(!1)};return document.addEventListener("mousedown",e),()=>document.removeEventListener("mousedown",e)},[]);const T=a.useCallback(e=>{t==null||t(e),n(!1)},[t]),A=a.useCallback(()=>{t==null||t(null),n(!1)},[t]),I=a.useCallback(e=>{L(e)},[]),W={sm:"bear-py-1.5 bear-px-3 bear-text-sm",md:"bear-py-2 bear-px-4",lg:"bear-py-2.5 bear-px-5 bear-text-lg"},F={default:"bear-bg-white dark:bear-bg-zinc-800 bear-border-zinc-300 dark:bear-border-zinc-600",filled:"bear-bg-zinc-100 dark:bear-bg-zinc-700 bear-border-transparent",outline:"bear-bg-transparent bear-border-zinc-400 dark:bear-border-zinc-500"};return r.jsxs("div",{ref:k,className:D.cn("Bear-DatePicker bear-relative",_),style:Object.keys(w).length?w:void 0,children:[p&&r.jsx("label",{className:"Bear-DatePicker__label bear-block bear-text-sm bear-font-medium bear-text-zinc-700 dark:bear-text-zinc-300 bear-mb-1.5",children:p}),r.jsxs("button",{ref:d,type:"button",onClick:()=>!b&&n(!i),disabled:b,className:D.cn("Bear-DatePicker__trigger bear-w-full bear-flex bear-items-center bear-justify-between bear-rounded-lg bear-border bear-text-left bear-transition-colors",W[H],F[M],o?"bear-border-red-500":"focus:bear-border-pink-500",b&&"bear-opacity-50 bear-cursor-not-allowed",c?"bear-text-zinc-900 dark:bear-text-white":"bear-text-zinc-500"),children:[r.jsx("span",{className:"Bear-DatePicker__value",children:c?U.formatDate(c,B):z}),r.jsx("span",{className:"Bear-DatePicker__icon",children:O??r.jsx("svg",{className:"bear-w-5 bear-h-5 bear-text-zinc-400 bear-shrink-0",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",children:r.jsx("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"})})})]}),o&&r.jsx("p",{className:"Bear-DatePicker__error bear-mt-1 bear-text-xs bear-text-red-400",children:o}),m&&!o&&r.jsx("p",{className:"Bear-DatePicker__helper bear-mt-1 bear-text-xs bear-text-zinc-500",children:m}),i&&typeof document<"u"&&J.createPortal(r.jsx("div",{"data-bear-datepicker-calendar":!0,className:"Bear-DatePicker__dropdown bear-fixed bear-z-[9999]",style:{top:x.top,left:x.left},children:r.jsx(K.Calendar,{viewDate:E,onViewChange:I,value:c??null,onSelect:T,minDate:y,maxDate:j,disabledDates:N,highlightedDates:g,slots:q,weekdayLabels:R,firstDayOfWeek:V,showWeekNumbers:S,clearable:P,onClear:A,showTodayButton:!0,onToday:()=>{t==null||t(new Date),n(!1)}})}),document.body)]})};exports.DatePicker=X;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),a=require("react"),J=require("react-dom"),K=require("../Calendar/Calendar.cjs"),D=require("../../utils/cn.cjs"),Q=require("../../hooks/useBearStyles.cjs");require("../../hooks/useBearComponent/useBearComponent.cjs");const U=require("./DatePicker.utils.cjs"),X=({value:c,onChange:t,minDate:y,maxDate:j,disabled:b=!1,placeholder:z="Select date",label:p,error:o,helperText:m,format:B="MM/DD/YYYY",clearable:P=!0,className:_,style:h,bis:v,showWeekNumbers:S=!1,disabledDates:N=[],highlightedDates:g=[],slots:q,weekdayLabels:R,firstDayOfWeek:V=0,size:H="md",variant:M="default",icon:O})=>{const[i,n]=a.useState(!1),[E,L]=a.useState(c??new Date),[x,Y]=a.useState({top:0,left:0}),k=a.useRef(null),d=a.useRef(null),w=Q.useBearStyles(v,h);a.useEffect(()=>{if(i&&d.current){const e=d.current.getBoundingClientRect(),l=8,s=360,G=window.innerHeight-e.bottom<s&&e.top>s;Y({top:G?e.top-s-l:e.bottom+l,left:e.left})}},[i]),a.useEffect(()=>{const e=l=>{var u,f;const s=l.target;(u=k.current)!=null&&u.contains(s)||(f=s.closest)!=null&&f.call(s,"[data-bear-datepicker-calendar]")||n(!1)};return document.addEventListener("mousedown",e),()=>document.removeEventListener("mousedown",e)},[]);const T=a.useCallback(e=>{t==null||t(e),n(!1)},[t]),A=a.useCallback(()=>{t==null||t(null),n(!1)},[t]),I=a.useCallback(e=>{L(e)},[]),W={sm:"bear-py-1.5 bear-px-3 bear-text-sm",md:"bear-py-2 bear-px-4",lg:"bear-py-2.5 bear-px-5 bear-text-lg"},F={default:"bear-bg-white dark:bear-bg-zinc-800 bear-border-zinc-300 dark:bear-border-zinc-600",filled:"bear-bg-zinc-100 dark:bear-bg-zinc-700 bear-border-transparent",outline:"bear-bg-transparent bear-border-zinc-400 dark:bear-border-zinc-500"};return r.jsxs("div",{ref:k,className:D.cn("Bear-DatePicker bear-relative",_),style:Object.keys(w).length?w:void 0,children:[p&&r.jsx("label",{className:"Bear-DatePicker__label bear-block bear-text-sm bear-font-medium bear-text-zinc-700 dark:bear-text-zinc-300 bear-mb-1.5",children:p}),r.jsxs("button",{ref:d,type:"button",onClick:()=>!b&&n(!i),disabled:b,className:D.cn("Bear-DatePicker__trigger bear-w-full bear-flex bear-items-center bear-justify-between bear-rounded-lg bear-border bear-text-left bear-transition-colors",W[H],F[M],o?"bear-border-red-500":"focus:bear-border-pink-500",b&&"bear-opacity-50 bear-cursor-not-allowed",c?"bear-text-zinc-900 dark:bear-text-white":"bear-text-zinc-500"),children:[r.jsx("span",{className:"Bear-DatePicker__value",children:c?U.formatDate(c,B):z}),r.jsx("span",{className:"Bear-DatePicker__icon",children:O??r.jsx("svg",{className:"bear-w-5 bear-h-5 bear-text-zinc-400 bear-shrink-0",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",children:r.jsx("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"})})})]}),o&&r.jsx("p",{className:"Bear-DatePicker__error bear-mt-1 bear-text-xs bear-text-red-400",children:o}),m&&!o&&r.jsx("p",{className:"Bear-DatePicker__helper bear-mt-1 bear-text-xs bear-text-zinc-500",children:m}),i&&typeof document<"u"&&J.createPortal(r.jsx("div",{"data-bear-datepicker-calendar":!0,className:"Bear-DatePicker__dropdown bear-fixed bear-z-[9999]",style:{top:x.top,left:x.left},children:r.jsx(K.Calendar,{viewDate:E,onViewChange:I,value:c??null,onSelect:T,minDate:y,maxDate:j,disabledDates:N,highlightedDates:g,slots:q,weekdayLabels:R,firstDayOfWeek:V,showWeekNumbers:S,clearable:P,onClear:A,showTodayButton:!0,onToday:()=>{t==null||t(new Date),n(!1)}})}),document.body)]})};exports.DatePicker=X;

package/dist/components/DatePicker/DatePicker.js

@@ -4,8 +4,9 @@ import { createPortal as X } from "react-dom";
 import { Calendar as Z } from "../Calendar/Calendar.js";
 import { cn as B } from "../../utils/cn.js";
 import { useBearStyles as $ } from "../../hooks/useBearStyles.js";
+import "../../hooks/useBearComponent/useBearComponent.js";
 import { formatDate as C } from "./DatePicker.utils.js";
-const ce = ({
+const ie = ({
   value: o,
   onChange: t,
   minDate: _,
@@ -123,5 +124,5 @@ const ce = ({
   ] });
 };
 export {
-  ce as DatePicker
+  ie as DatePicker
 };

package/dist/components/DiffViewer/DiffViewer.cjs

@@ -0,0 +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;

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

@@ -0,0 +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;

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

@@ -0,0 +1,18 @@
+export declare const DIFF_COLORS: {
+    readonly add: {
+        readonly bg: "rgba(34, 197, 94, 0.15)";
+        readonly border: "rgba(34, 197, 94, 0.4)";
+        readonly text: "#22c55e";
+    };
+    readonly remove: {
+        readonly bg: "rgba(239, 68, 68, 0.15)";
+        readonly border: "rgba(239, 68, 68, 0.4)";
+        readonly text: "#ef4444";
+    };
+    readonly context: {
+        readonly bg: "transparent";
+        readonly border: "transparent";
+        readonly text: "inherit";
+    };
+};
+export declare const LINE_NUMBER_WIDTH = 50;

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

@@ -0,0 +1,21 @@
+const r = {
+  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;
+export {
+  r as DIFF_COLORS,
+  t as LINE_NUMBER_WIDTH
+};

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

@@ -0,0 +1,18 @@
+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;