@forgedevstack/bear 1.0.8 → 1.1.0

package/dist/components/Map/Map.js

@@ -0,0 +1,259 @@
+import { jsxs as L, jsx as n } from "react/jsx-runtime";
+import { useRef as we, useState as m, useCallback as p, useMemo as Q } from "react";
+import { cn as y } from "../../utils/cn.js";
+import { DEFAULT_VIEWPORT as ze, MIN_ZOOM as Te, MAX_ZOOM as Ie, TILE_SIZE as l, TILE_ATTRIBUTIONS as Ne, MARKER_SIZE as f, DEFAULT_MARKER_COLOR as ke, ZOOM_BUTTON_SIZE as D, TILE_URLS as V } from "./Map.const.js";
+const Re = ({
+  markers: U = [],
+  viewport: ee,
+  controlledViewport: S,
+  onViewportChange: w,
+  onMarkerClick: X,
+  onMapClick: E,
+  onMarkerDrag: Le,
+  tileProvider: z = "openstreetmap",
+  customTileUrl: re,
+  width: u = "100%",
+  height: g = 400,
+  showZoomControls: ae = !0,
+  showAttribution: te = !0,
+  scrollWheelZoom: W = !0,
+  doubleClickZoom: j = !0,
+  draggable: A = !0,
+  minZoom: R = Te,
+  maxZoom: Y = Ie,
+  className: oe,
+  style: ne,
+  testId: le
+}) => {
+  const T = we(null), [se, be] = m(
+    ee ?? ze
+  ), [_, B] = m(!1), [I, C] = m(null), [M, H] = m(null), [ce, $] = m(null), [F, ie] = m(null), r = S ?? se, b = p(
+    (e) => {
+      const a = {
+        ...e,
+        zoom: Math.max(R, Math.min(Y, e.zoom)),
+        lat: Math.max(-85, Math.min(85, e.lat)),
+        lng: ((e.lng + 180) % 360 + 360) % 360 - 180
+      };
+      S || be(a), w == null || w(a);
+    },
+    [S, w, R, Y]
+  ), x = (e, a) => (e + 180) / 360 * Math.pow(2, a), v = (e, a) => {
+    const o = e * Math.PI / 180;
+    return (1 - Math.log(Math.tan(o) + 1 / Math.cos(o)) / Math.PI) / 2 * Math.pow(2, a);
+  }, K = (e, a) => e / Math.pow(2, a) * 360 - 180, Z = (e, a) => {
+    const o = Math.PI - 2 * Math.PI * e / Math.pow(2, a);
+    return 180 / Math.PI * Math.atan(0.5 * (Math.exp(o) - Math.exp(-o)));
+  }, de = (e, a, o) => (z === "custom" ? re ?? V.openstreetmap : V[z]).replace("{x}", String(e)).replace("{y}", String(a)).replace("{z}", String(o)), ue = Q(() => {
+    const e = T.current, a = (e == null ? void 0 : e.clientWidth) ?? (typeof u == "number" ? u : 800), o = typeof g == "number" ? g : 400, t = Math.round(r.zoom), c = x(r.lng, t), s = v(r.lat, t), i = Math.ceil(a / l) + 2, h = Math.ceil(o / l) + 2, d = Math.pow(2, t), N = [];
+    for (let O = -Math.floor(i / 2); O <= Math.ceil(i / 2); O++)
+      for (let P = -Math.floor(h / 2); P <= Math.ceil(h / 2); P++) {
+        const J = Math.floor(c) + O, k = Math.floor(s) + P;
+        if (k < 0 || k >= d) continue;
+        const Me = (J % d + d) % d, xe = a / 2 + (J - c) * l, ve = o / 2 + (k - s) * l;
+        N.push({ x: Me, y: k, z: t, px: xe, py: ve });
+      }
+    return N;
+  }, [r.lat, r.lng, r.zoom, u, g]), ge = Q(() => {
+    const e = T.current, a = (e == null ? void 0 : e.clientWidth) ?? (typeof u == "number" ? u : 800), o = typeof g == "number" ? g : 400, t = r.zoom, c = x(r.lng, t), s = v(r.lat, t);
+    return U.map((i) => {
+      const h = x(i.lng, t), d = v(i.lat, t);
+      return {
+        marker: i,
+        px: a / 2 + (h - c) * l,
+        py: o / 2 + (d - s) * l
+      };
+    });
+  }, [U, r, u, g]), pe = p(
+    (e) => {
+      A && (B(!0), C({ x: e.clientX, y: e.clientY }), H({ ...r }));
+    },
+    [A, r]
+  ), he = p(
+    (e) => {
+      if (!_ || !I || !M) return;
+      const a = e.clientX - I.x, o = e.clientY - I.y, t = M.zoom, c = x(M.lng, t) - a / l, s = v(M.lat, t) - o / l;
+      b({
+        lat: Z(s, t),
+        lng: K(c, t),
+        zoom: t
+      });
+    },
+    [_, I, M, b]
+  ), q = p(() => {
+    B(!1), C(null), H(null);
+  }, []), me = p(
+    (e) => {
+      if (!W) return;
+      e.preventDefault();
+      const a = e.deltaY > 0 ? -0.5 : 0.5;
+      b({ ...r, zoom: r.zoom + a });
+    },
+    [W, r, b]
+  ), ye = p(
+    (e) => {
+      j && (e.preventDefault(), b({ ...r, zoom: r.zoom + 1 }));
+    },
+    [j, r, b]
+  ), fe = p(
+    (e) => {
+      if (!E) return;
+      const a = T.current;
+      if (!a) return;
+      const o = a.getBoundingClientRect(), t = e.clientX - o.left, c = e.clientY - o.top, s = r.zoom, i = x(r.lng, s), h = v(r.lat, s), d = i + (t - a.clientWidth / 2) / l, N = h + (c - a.clientHeight / 2) / l;
+      E(Z(N, s), K(d, s));
+    },
+    [E, r]
+  ), G = z !== "custom" ? Ne[z] : "";
+  return /* @__PURE__ */ L(
+    "div",
+    {
+      ref: T,
+      className: y(
+        "bear-relative bear-overflow-hidden bear-rounded-lg bear-select-none",
+        "bear-border bear-border-gray-200 dark:bear-border-gray-700",
+        _ ? "bear-cursor-grabbing" : "bear-cursor-grab",
+        oe
+      ),
+      style: { width: u, height: g, ...ne },
+      onMouseDown: pe,
+      onMouseMove: he,
+      onMouseUp: q,
+      onMouseLeave: q,
+      onWheel: me,
+      onDoubleClick: ye,
+      onClick: fe,
+      "data-testid": le,
+      role: "application",
+      "aria-label": "Interactive map",
+      children: [
+        /* @__PURE__ */ n("div", { className: "bear-absolute bear-inset-0 bear-overflow-hidden", children: ue.map((e) => /* @__PURE__ */ n(
+          "img",
+          {
+            src: de(e.x, e.y, e.z),
+            alt: "",
+            className: "bear-absolute bear-pointer-events-none",
+            style: {
+              left: e.px,
+              top: e.py,
+              width: l,
+              height: l
+            },
+            loading: "lazy",
+            draggable: !1
+          },
+          `${e.z}-${e.x}-${e.y}`
+        )) }),
+        ge.map(({ marker: e, px: a, py: o }) => /* @__PURE__ */ L(
+          "div",
+          {
+            className: "bear-absolute bear-z-10 bear-pointer-events-auto",
+            style: {
+              left: a - f / 2,
+              top: o - f,
+              width: f,
+              height: f
+            },
+            onClick: (t) => {
+              t.stopPropagation(), ie(F === e.id ? null : e.id), X == null || X(e);
+            },
+            onMouseEnter: () => $(e.id),
+            onMouseLeave: () => $(null),
+            children: [
+              e.icon ? /* @__PURE__ */ n("div", { className: "bear-text-2xl bear-flex bear-items-center bear-justify-center bear-w-full bear-h-full", children: e.icon }) : /* @__PURE__ */ L("svg", { width: f, height: f, viewBox: "0 0 32 42", fill: "none", children: [
+                /* @__PURE__ */ n(
+                  "path",
+                  {
+                    d: "M16 0C7.16 0 0 7.16 0 16c0 12 16 26 16 26s16-14 16-26C32 7.16 24.84 0 16 0z",
+                    fill: e.color ?? ke,
+                    className: y(
+                      "bear-transition-all bear-duration-200",
+                      ce === e.id && "bear-drop-shadow-lg"
+                    )
+                  }
+                ),
+                /* @__PURE__ */ n("circle", { cx: "16", cy: "15", r: "6", fill: "white" })
+              ] }),
+              e.label && /* @__PURE__ */ n(
+                "div",
+                {
+                  className: y(
+                    "bear-absolute bear-left-1/2 bear--translate-x-1/2 bear-top-full bear-mt-1",
+                    "bear-bg-white dark:bear-bg-gray-800 bear-text-xs bear-font-medium",
+                    "bear-px-2 bear-py-0.5 bear-rounded bear-shadow-md bear-whitespace-nowrap",
+                    "bear-text-gray-800 dark:bear-text-gray-200",
+                    "bear-border bear-border-gray-200 dark:bear-border-gray-600"
+                  ),
+                  children: e.label
+                }
+              ),
+              F === e.id && e.popup && /* @__PURE__ */ n(
+                "div",
+                {
+                  className: y(
+                    "bear-absolute bear-left-1/2 bear--translate-x-1/2 bear-bottom-full bear-mb-2",
+                    "bear-bg-white dark:bear-bg-gray-800 bear-rounded-lg bear-shadow-xl",
+                    "bear-p-3 bear-min-w-[150px] bear-max-w-[250px]",
+                    "bear-border bear-border-gray-200 dark:bear-border-gray-600",
+                    "bear-z-20"
+                  ),
+                  onClick: (t) => t.stopPropagation(),
+                  children: e.popup
+                }
+              )
+            ]
+          },
+          e.id
+        )),
+        ae && /* @__PURE__ */ L("div", { className: "bear-absolute bear-top-3 bear-right-3 bear-z-20 bear-flex bear-flex-col bear-gap-1", children: [
+          /* @__PURE__ */ n(
+            "button",
+            {
+              onClick: (e) => {
+                e.stopPropagation(), b({ ...r, zoom: r.zoom + 1 });
+              },
+              disabled: r.zoom >= Y,
+              className: y(
+                "bear-flex bear-items-center bear-justify-center bear-rounded-md",
+                "bear-bg-white dark:bear-bg-gray-800 bear-shadow-md",
+                "bear-text-gray-700 dark:bear-text-gray-200",
+                "hover:bear-bg-gray-50 dark:hover:bear-bg-gray-700",
+                "bear-border bear-border-gray-200 dark:bear-border-gray-600",
+                "bear-transition-colors bear-duration-150",
+                "disabled:bear-opacity-50 disabled:bear-cursor-not-allowed"
+              ),
+              style: { width: D, height: D },
+              "aria-label": "Zoom in",
+              children: /* @__PURE__ */ n("svg", { className: "bear-w-4 bear-h-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ n("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 4v16m8-8H4" }) })
+            }
+          ),
+          /* @__PURE__ */ n(
+            "button",
+            {
+              onClick: (e) => {
+                e.stopPropagation(), b({ ...r, zoom: r.zoom - 1 });
+              },
+              disabled: r.zoom <= R,
+              className: y(
+                "bear-flex bear-items-center bear-justify-center bear-rounded-md",
+                "bear-bg-white dark:bear-bg-gray-800 bear-shadow-md",
+                "bear-text-gray-700 dark:bear-text-gray-200",
+                "hover:bear-bg-gray-50 dark:hover:bear-bg-gray-700",
+                "bear-border bear-border-gray-200 dark:bear-border-gray-600",
+                "bear-transition-colors bear-duration-150",
+                "disabled:bear-opacity-50 disabled:bear-cursor-not-allowed"
+              ),
+              style: { width: D, height: D },
+              "aria-label": "Zoom out",
+              children: /* @__PURE__ */ n("svg", { className: "bear-w-4 bear-h-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ n("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M20 12H4" }) })
+            }
+          )
+        ] }),
+        te && G && /* @__PURE__ */ n("div", { className: "bear-absolute bear-bottom-1 bear-right-1 bear-z-20 bear-text-[10px] bear-text-gray-500 bear-bg-white/80 dark:bear-bg-gray-900/80 bear-px-1.5 bear-py-0.5 bear-rounded", children: G })
+      ]
+    }
+  );
+};
+export {
+  Re as Map
+};

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

@@ -0,0 +1,81 @@
+import { CSSProperties, ReactNode } from 'react';
+/**
+ * Marker to display on the map
+ */
+export interface MapMarker {
+    /** Unique identifier */
+    id: string;
+    /** Latitude coordinate */
+    lat: number;
+    /** Longitude coordinate */
+    lng: number;
+    /** Marker label */
+    label?: string;
+    /** Marker color */
+    color?: string;
+    /** Custom icon (emoji or ReactNode) */
+    icon?: ReactNode;
+    /** Popup content on click */
+    popup?: ReactNode;
+    /** Whether this marker is draggable */
+    draggable?: boolean;
+}
+/**
+ * Map viewport configuration
+ */
+export interface MapViewport {
+    /** Center latitude */
+    lat: number;
+    /** Center longitude */
+    lng: number;
+    /** Zoom level (1-20) */
+    zoom: number;
+}
+/**
+ * Map tile provider
+ */
+export type MapTileProvider = 'openstreetmap' | 'cartodb-light' | 'cartodb-dark' | 'stamen-terrain' | 'custom';
+export interface MapProps {
+    /** Map markers */
+    markers?: MapMarker[];
+    /** Initial viewport */
+    viewport?: MapViewport;
+    /** Current viewport (controlled) */
+    controlledViewport?: MapViewport;
+    /** Called when viewport changes */
+    onViewportChange?: (viewport: MapViewport) => void;
+    /** Called when a marker is clicked */
+    onMarkerClick?: (marker: MapMarker) => void;
+    /** Called when the map is clicked */
+    onMapClick?: (lat: number, lng: number) => void;
+    /** Called when a marker is dragged */
+    onMarkerDrag?: (marker: MapMarker, lat: number, lng: number) => void;
+    /** Map tile provider */
+    tileProvider?: MapTileProvider;
+    /** Custom tile URL template (for 'custom' provider) */
+    customTileUrl?: string;
+    /** Map width */
+    width?: string | number;
+    /** Map height */
+    height?: string | number;
+    /** Show zoom controls */
+    showZoomControls?: boolean;
+    /** Show attribution */
+    showAttribution?: boolean;
+    /** Enable scroll wheel zoom */
+    scrollWheelZoom?: boolean;
+    /** Enable double-click zoom */
+    doubleClickZoom?: boolean;
+    /** Enable dragging */
+    draggable?: boolean;
+    /** Min zoom level */
+    minZoom?: number;
+    /** Max zoom level */
+    maxZoom?: number;
+    /** Custom class name */
+    className?: string;
+    /** Custom styles */
+    style?: CSSProperties;
+    /** Test ID */
+    testId?: string;
+}

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

@@ -0,0 +1,2 @@
+export { Map } from './Map';
+export type { MapProps, MapMarker, MapViewport, MapTileProvider } from './Map.types';

package/dist/components/Marquee/Marquee.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),e=require("react"),l=require("../../utils/cn.cjs"),o=require("./Marquee.const.cjs"),j=m=>{const{children:b,direction:u="left",speed:q=o.DEFAULT_SPEED,pauseOnHover:r=!1,pauseOnClick:h=!1,play:n=!0,gradient:M=!1,gradientWidth:v=o.DEFAULT_GRADIENT_WIDTH,gap:d=o.DEFAULT_GAP,className:g,style:x,testId:E}=m,t=e.useRef(null),[_,k]=e.useState(0),[C,y]=e.useState(0),[N,s]=e.useState(!n);e.useEffect(()=>{s(!n)},[n]);const f=e.useCallback(()=>{t.current&&(k(t.current.scrollWidth),y(t.current.scrollHeight))},[]);e.useEffect(()=>{f();const c=new ResizeObserver(f);return t.current&&c.observe(t.current),()=>c.disconnect()},[f]);const a=u==="left"||u==="right",p=(a?_:C)/q,A=o.MARQUEE_ANIMATION[u],R=e.useCallback(()=>{r&&s(!0)},[r]),S=e.useCallback(()=>{r&&n&&s(!1)},[r,n]),T=e.useCallback(()=>{h&&s(c=>!c)},[h]);return i.jsx("div",{className:l.cn("Bear-Marquee","bear-overflow-hidden bear-relative",M&&a&&"Bear-Marquee--gradient-h",M&&!a&&"Bear-Marquee--gradient-v",g),style:{"--bear-marquee-gradient-w":`${v}px`,...x},onMouseEnter:R,onMouseLeave:S,onClick:T,"data-testid":E,role:"marquee","aria-live":"off",children:i.jsxs("div",{className:l.cn("Bear-Marquee__track","bear-flex bear-w-max",!a&&"bear-flex-col"),style:{gap:d,animation:`${A} ${p}s linear infinite`,animationPlayState:N?"paused":"running"},children:[i.jsx("div",{ref:t,className:l.cn("Bear-Marquee__content","bear-flex bear-shrink-0",!a&&"bear-flex-col"),style:{gap:d},children:b}),i.jsx("div",{className:l.cn("Bear-Marquee__content","bear-flex bear-shrink-0",!a&&"bear-flex-col"),style:{gap:d},"aria-hidden":"true",children:b})]})})};exports.Marquee=j;

package/dist/components/Marquee/Marquee.const.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=50,A=40,E=24,r={left:"bear-marquee-left",right:"bear-marquee-right",up:"bear-marquee-up",down:"bear-marquee-down"};exports.DEFAULT_GAP=E;exports.DEFAULT_GRADIENT_WIDTH=A;exports.DEFAULT_SPEED=e;exports.MARQUEE_ANIMATION=r;

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

@@ -0,0 +1,11 @@
+import { MarqueeDirection } from './Marquee.types';
+/** Default speed in pixels per second */
+export declare const DEFAULT_SPEED = 50;
+/** Default gradient width in pixels */
+export declare const DEFAULT_GRADIENT_WIDTH = 40;
+/** Default gap between items in pixels */
+export declare const DEFAULT_GAP = 24;
+/** Animation name per direction */
+export declare const MARQUEE_ANIMATION: Record<MarqueeDirection, string>;
+/** Full content duplication count for seamless loop */
+export declare const DUPLICATE_COUNT = 1;

package/dist/components/Marquee/Marquee.const.js

@@ -0,0 +1,12 @@
+const e = 50, r = 40, t = 24, a = {
+  left: "bear-marquee-left",
+  right: "bear-marquee-right",
+  up: "bear-marquee-up",
+  down: "bear-marquee-down"
+};
+export {
+  t as DEFAULT_GAP,
+  r as DEFAULT_GRADIENT_WIDTH,
+  e as DEFAULT_SPEED,
+  a as MARQUEE_ANIMATION
+};

package/dist/components/Marquee/Marquee.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+import { MarqueeProps } from './Marquee.types';
+/**
+ * Marquee - Infinite scrolling content with smooth animation.
+ * Supports pause-on-hover, gradient edges, and theming via BearProvider.
+ */
+export declare const Marquee: FC<MarqueeProps>;

package/dist/components/Marquee/Marquee.js

@@ -0,0 +1,106 @@
+import { jsx as d, jsxs as T } from "react/jsx-runtime";
+import { useRef as L, useState as f, useEffect as v, useCallback as i } from "react";
+import { cn as o } from "../../utils/cn.js";
+import { DEFAULT_SPEED as P, DEFAULT_GRADIENT_WIDTH as R, DEFAULT_GAP as W, MARQUEE_ANIMATION as w } from "./Marquee.const.js";
+const j = (M) => {
+  const {
+    children: m,
+    direction: c = "left",
+    speed: p = P,
+    pauseOnHover: a = !1,
+    pauseOnClick: h = !1,
+    play: r = !0,
+    gradient: b = !1,
+    gradientWidth: g = R,
+    gap: l = W,
+    className: x,
+    style: E,
+    testId: _
+  } = M, e = L(null), [q, N] = f(0), [A, k] = f(0), [y, n] = f(!r);
+  v(() => {
+    n(!r);
+  }, [r]);
+  const u = i(() => {
+    e.current && (N(e.current.scrollWidth), k(e.current.scrollHeight));
+  }, []);
+  v(() => {
+    u();
+    const s = new ResizeObserver(u);
+    return e.current && s.observe(e.current), () => s.disconnect();
+  }, [u]);
+  const t = c === "left" || c === "right", C = (t ? q : A) / p, B = w[c], D = i(() => {
+    a && n(!0);
+  }, [a]), H = i(() => {
+    a && r && n(!1);
+  }, [a, r]), I = i(() => {
+    h && n((s) => !s);
+  }, [h]);
+  return /* @__PURE__ */ d(
+    "div",
+    {
+      className: o(
+        "Bear-Marquee",
+        "bear-overflow-hidden bear-relative",
+        b && t && "Bear-Marquee--gradient-h",
+        b && !t && "Bear-Marquee--gradient-v",
+        x
+      ),
+      style: {
+        "--bear-marquee-gradient-w": `${g}px`,
+        ...E
+      },
+      onMouseEnter: D,
+      onMouseLeave: H,
+      onClick: I,
+      "data-testid": _,
+      role: "marquee",
+      "aria-live": "off",
+      children: /* @__PURE__ */ T(
+        "div",
+        {
+          className: o(
+            "Bear-Marquee__track",
+            "bear-flex bear-w-max",
+            !t && "bear-flex-col"
+          ),
+          style: {
+            gap: l,
+            animation: `${B} ${C}s linear infinite`,
+            animationPlayState: y ? "paused" : "running"
+          },
+          children: [
+            /* @__PURE__ */ d(
+              "div",
+              {
+                ref: e,
+                className: o(
+                  "Bear-Marquee__content",
+                  "bear-flex bear-shrink-0",
+                  !t && "bear-flex-col"
+                ),
+                style: { gap: l },
+                children: m
+              }
+            ),
+            /* @__PURE__ */ d(
+              "div",
+              {
+                className: o(
+                  "Bear-Marquee__content",
+                  "bear-flex bear-shrink-0",
+                  !t && "bear-flex-col"
+                ),
+                style: { gap: l },
+                "aria-hidden": "true",
+                children: m
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
+export {
+  j as Marquee
+};

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

@@ -0,0 +1,32 @@
+import { ReactNode } from 'react';
+export type MarqueeDirection = 'left' | 'right' | 'up' | 'down';
+export interface MarqueeProps {
+    /** Content to scroll */
+    children: ReactNode;
+    /** Scroll direction */
+    direction?: MarqueeDirection;
+    /** Speed in pixels per second */
+    speed?: number;
+    /** Pause on hover */
+    pauseOnHover?: boolean;
+    /** Pause on click */
+    pauseOnClick?: boolean;
+    /** Whether the marquee is playing */
+    play?: boolean;
+    /** Number of times to loop (0 = infinite) */
+    loop?: number;
+    /** Gradient fade on edges */
+    gradient?: boolean;
+    /** Gradient color (auto-detects dark/light) */
+    gradientColor?: string;
+    /** Gradient width in pixels */
+    gradientWidth?: number;
+    /** Gap between repeated items */
+    gap?: number;
+    /** Custom class name */
+    className?: string;
+    /** Custom style */
+    style?: React.CSSProperties;
+    /** Test ID */
+    testId?: string;
+}

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

@@ -0,0 +1,2 @@
+export { Marquee } from './Marquee';
+export type { MarqueeProps, MarqueeDirection } from './Marquee.types';

package/dist/components/Masonry/Masonry.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react/jsx-runtime"),t=require("react"),L=require("../../utils/cn.cjs"),n=require("./Masonry.const.cjs"),_=m=>{const{children:a,columns:e=n.DEFAULT_COLUMNS,gap:i=n.DEFAULT_GAP,className:d,style:f,testId:y}=m,E=t.useRef(null),[l,r]=t.useState(typeof e=="number"?e:e.base??n.DEFAULT_COLUMNS),o=t.useCallback(()=>{if(typeof e=="number"){r(e);return}const s=window.innerWidth;e.xl&&s>=n.BREAKPOINT_XL?r(e.xl):e.lg&&s>=n.BREAKPOINT_LG?r(e.lg):e.md&&s>=n.BREAKPOINT_MD?r(e.md):e.sm&&s>=n.BREAKPOINT_SM?r(e.sm):r(e.base??n.DEFAULT_COLUMNS)},[e]);t.useEffect(()=>(o(),window.addEventListener("resize",o),()=>window.removeEventListener("resize",o)),[o]);const M=t.useMemo(()=>{const s=Array.from({length:l},()=>[]);return t.Children.forEach(a,(c,b)=>{s[b%l].push(c)}),s},[a,l]);return u.jsx("div",{ref:E,className:L.cn("Bear-Masonry","bear-flex",d),style:{gap:i,...f},"data-testid":y,children:M.map((s,c)=>u.jsx("div",{className:"Bear-Masonry__column bear-flex bear-flex-col bear-flex-1",style:{gap:i},children:s},c))})};exports.Masonry=_;

package/dist/components/Masonry/Masonry.const.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const A=3,T=16,t=1280,E=1024,_=768,O=640;exports.BREAKPOINT_LG=E;exports.BREAKPOINT_MD=_;exports.BREAKPOINT_SM=O;exports.BREAKPOINT_XL=t;exports.DEFAULT_COLUMNS=A;exports.DEFAULT_GAP=T;

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

@@ -0,0 +1,9 @@
+/** Default number of columns */
+export declare const DEFAULT_COLUMNS = 3;
+/** Default gap in pixels */
+export declare const DEFAULT_GAP = 16;
+/** Breakpoint thresholds in pixels */
+export declare const BREAKPOINT_XL = 1280;
+export declare const BREAKPOINT_LG = 1024;
+export declare const BREAKPOINT_MD = 768;
+export declare const BREAKPOINT_SM = 640;

package/dist/components/Masonry/Masonry.const.js

@@ -0,0 +1,9 @@
+const o = 3, t = 16, A = 1280, c = 1024, n = 768, s = 640;
+export {
+  c as BREAKPOINT_LG,
+  n as BREAKPOINT_MD,
+  s as BREAKPOINT_SM,
+  A as BREAKPOINT_XL,
+  o as DEFAULT_COLUMNS,
+  t as DEFAULT_GAP
+};

package/dist/components/Masonry/Masonry.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+import { MasonryProps } from './Masonry.types';
+/**
+ * Masonry - Pinterest-style masonry grid layout.
+ * Supports responsive column counts and theming via BearProvider.
+ */
+export declare const Masonry: FC<MasonryProps>;

package/dist/components/Masonry/Masonry.js

@@ -0,0 +1,51 @@
+import { jsx as i } from "react/jsx-runtime";
+import { useRef as y, useState as h, useCallback as v, useEffect as x, useMemo as A, Children as N } from "react";
+import { cn as _ } from "../../utils/cn.js";
+import { DEFAULT_COLUMNS as t, DEFAULT_GAP as w, BREAKPOINT_XL as L, BREAKPOINT_LG as M, BREAKPOINT_MD as R, BREAKPOINT_SM as B } from "./Masonry.const.js";
+const O = (c) => {
+  const {
+    children: m,
+    columns: e = t,
+    gap: a = w,
+    className: f,
+    style: u,
+    testId: d
+  } = c, p = y(null), [n, r] = h(
+    typeof e == "number" ? e : e.base ?? t
+  ), o = v(() => {
+    if (typeof e == "number") {
+      r(e);
+      return;
+    }
+    const s = window.innerWidth;
+    e.xl && s >= L ? r(e.xl) : e.lg && s >= M ? r(e.lg) : e.md && s >= R ? r(e.md) : e.sm && s >= B ? r(e.sm) : r(e.base ?? t);
+  }, [e]);
+  x(() => (o(), window.addEventListener("resize", o), () => window.removeEventListener("resize", o)), [o]);
+  const E = A(() => {
+    const s = Array.from({ length: n }, () => []);
+    return N.forEach(m, (l, b) => {
+      s[b % n].push(l);
+    }), s;
+  }, [m, n]);
+  return /* @__PURE__ */ i(
+    "div",
+    {
+      ref: p,
+      className: _("Bear-Masonry", "bear-flex", f),
+      style: { gap: a, ...u },
+      "data-testid": d,
+      children: E.map((s, l) => /* @__PURE__ */ i(
+        "div",
+        {
+          className: "Bear-Masonry__column bear-flex bear-flex-col bear-flex-1",
+          style: { gap: a },
+          children: s
+        },
+        l
+      ))
+    }
+  );
+};
+export {
+  O as Masonry
+};

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

@@ -0,0 +1,21 @@
+import { ReactNode } from 'react';
+export interface MasonryProps {
+    /** Items to render in masonry layout */
+    children: ReactNode;
+    /** Number of columns */
+    columns?: number | {
+        base?: number;
+        sm?: number;
+        md?: number;
+        lg?: number;
+        xl?: number;
+    };
+    /** Gap between items in pixels */
+    gap?: number;
+    /** Custom class name */
+    className?: string;
+    /** Custom style */
+    style?: React.CSSProperties;
+    /** Test ID */
+    testId?: string;
+}

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

@@ -0,0 +1,2 @@
+export { Masonry } from './Masonry';
+export type { MasonryProps } from './Masonry.types';