@forgedevstack/bear 1.0.8 → 1.1.0

package/dist/components/CountdownTimer/CountdownTimer.js

@@ -0,0 +1,115 @@
+import { jsx as o, Fragment as J, jsxs as T } from "react/jsx-runtime";
+import { useMemo as K, useRef as Q, useCallback as W, useState as A, useEffect as X } from "react";
+import { cn as u } from "../../utils/cn.js";
+import { DEFAULT_SEPARATOR as $, DEFAULT_LABELS as ee, MS_PER_SECOND as h, UPDATE_INTERVAL as re, SEPARATOR_MARGIN as ae, SIZE_DIGIT_CLASSES as v, SIZE_LABEL_CLASSES as D, SIZE_GAP_CLASSES as M, MS_PER_MINUTE as R, MS_PER_HOUR as L, MS_PER_DAY as N, PAD_LENGTH as te } from "./CountdownTimer.const.js";
+const b = (a) => String(a).padStart(te, "0"), I = (a, t) => {
+  const e = Math.max(0, a - t);
+  return {
+    days: Math.floor(e / N),
+    hours: Math.floor(e % N / L),
+    minutes: Math.floor(e % L / R),
+    seconds: Math.floor(e % R / h),
+    totalSeconds: Math.floor(e / h),
+    isComplete: e <= 0
+  };
+}, ie = (a) => {
+  const {
+    targetDate: t,
+    duration: e,
+    variant: _ = "default",
+    size: c = "md",
+    showDays: P = !0,
+    showHours: k = !0,
+    showMinutes: B = !0,
+    showSeconds: F = !0,
+    showLabels: U = !0,
+    showSeparator: G = !0,
+    separator: O = $,
+    labels: S,
+    onComplete: l,
+    onTick: i,
+    paused: w = !1,
+    render: E,
+    className: H,
+    style: Z,
+    testId: j
+  } = a, d = K(() => ({ ...ee, ...S }), [S]), y = Q(!1), z = W(() => t ? new Date(t).getTime() : e ? Date.now() + e * h : Date.now(), [t, e]), [m] = A(z), [s, V] = A(() => I(m, Date.now()));
+  if (X(() => {
+    if (w) return;
+    const r = () => {
+      const p = I(m, Date.now());
+      V(p), i == null || i(p), p.isComplete && !y.current && (y.current = !0, l == null || l());
+    };
+    r();
+    const f = setInterval(r, re);
+    return () => clearInterval(f);
+  }, [m, w, l, i]), E) return /* @__PURE__ */ o(J, { children: E(s) });
+  const x = v[c] ?? v.md, Y = D[c] ?? D.md, q = M[c] ?? M.md, n = [];
+  P && n.push({ value: b(s.days), label: d.days }), k && n.push({ value: b(s.hours), label: d.hours }), B && n.push({ value: b(s.minutes), label: d.minutes }), F && n.push({ value: b(s.seconds), label: d.seconds });
+  const g = _ === "card", C = _ === "flip";
+  return /* @__PURE__ */ o(
+    "div",
+    {
+      className: u("Bear-CountdownTimer", "bear-flex bear-items-center", q, H),
+      style: Z,
+      "data-testid": j,
+      role: "timer",
+      "aria-label": "Countdown timer",
+      children: n.map((r, f) => /* @__PURE__ */ T("div", { className: "Bear-CountdownTimer__segment bear-flex bear-items-center", children: [
+        f > 0 && G && !g && /* @__PURE__ */ o(
+          "span",
+          {
+            className: u(
+              "Bear-CountdownTimer__separator",
+              x,
+              ae,
+              "bear-text-gray-400 dark:bear-text-gray-500"
+            ),
+            "aria-hidden": "true",
+            children: O
+          }
+        ),
+        /* @__PURE__ */ T("div", { className: "Bear-CountdownTimer__unit bear-flex bear-flex-col bear-items-center", children: [
+          /* @__PURE__ */ o(
+            "div",
+            {
+              className: u(
+                "Bear-CountdownTimer__digit",
+                x,
+                "bear-tabular-nums bear-tracking-wider",
+                g && [
+                  "bear-px-3 bear-py-2 bear-rounded-lg",
+                  "bear-bg-gray-100 dark:bear-bg-gray-800",
+                  "bear-border bear-border-gray-200 dark:bear-border-gray-700"
+                ],
+                C && [
+                  "bear-px-3 bear-py-2 bear-rounded-lg",
+                  "bear-bg-gray-900 dark:bear-bg-gray-100",
+                  "bear-text-white dark:bear-text-gray-900",
+                  "bear-shadow-lg"
+                ],
+                !g && !C && "bear-text-[var(--bear-text-primary)]"
+              ),
+              children: r.value
+            }
+          ),
+          U && /* @__PURE__ */ o(
+            "span",
+            {
+              className: u(
+                "Bear-CountdownTimer__label",
+                Y,
+                "bear-mt-1 bear-uppercase bear-tracking-widest",
+                "bear-text-gray-500 dark:bear-text-gray-400"
+              ),
+              children: r.label
+            }
+          )
+        ] })
+      ] }, r.label))
+    }
+  );
+};
+export {
+  ie as CountdownTimer
+};

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

@@ -0,0 +1,56 @@
+import { ReactNode } from 'react';
+export type CountdownTimerVariant = 'default' | 'card' | 'minimal' | 'flip';
+export type CountdownTimerSize = 'sm' | 'md' | 'lg' | 'xl';
+export interface CountdownTimerProps {
+    /** Target date/time to count down to */
+    targetDate?: Date | string | number;
+    /** Duration in seconds (alternative to targetDate) */
+    duration?: number;
+    /** Visual variant */
+    variant?: CountdownTimerVariant | (string & {});
+    /** Size preset */
+    size?: CountdownTimerSize;
+    /** Whether to show days */
+    showDays?: boolean;
+    /** Whether to show hours */
+    showHours?: boolean;
+    /** Whether to show minutes */
+    showMinutes?: boolean;
+    /** Whether to show seconds */
+    showSeconds?: boolean;
+    /** Whether to show labels */
+    showLabels?: boolean;
+    /** Whether to show separator */
+    showSeparator?: boolean;
+    /** Separator character */
+    separator?: string;
+    /** Custom labels */
+    labels?: {
+        days?: string;
+        hours?: string;
+        minutes?: string;
+        seconds?: string;
+    };
+    /** Called when countdown reaches zero */
+    onComplete?: () => void;
+    /** Called every second */
+    onTick?: (remaining: CountdownTime) => void;
+    /** Whether countdown is paused */
+    paused?: boolean;
+    /** Custom renderer */
+    render?: (time: CountdownTime) => ReactNode;
+    /** Custom class name */
+    className?: string;
+    /** Custom style */
+    style?: React.CSSProperties;
+    /** Test ID */
+    testId?: string;
+}
+export interface CountdownTime {
+    days: number;
+    hours: number;
+    minutes: number;
+    seconds: number;
+    totalSeconds: number;
+    isComplete: boolean;
+}

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

@@ -0,0 +1,2 @@
+export { CountdownTimer } from './CountdownTimer';
+export type { CountdownTimerProps, CountdownTime, CountdownTimerVariant, CountdownTimerSize } from './CountdownTimer.types';

package/dist/components/Cropper/Cropper.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),i=require("react"),S=require("../../utils/cn.cjs"),n=require("./Cropper.const.cjs"),ue=({src:p,crop:O,onCropChange:y,onCropComplete:v,aspectRatio:M="free",shape:I="rectangle",zoom:_,onZoomChange:N,minZoom:j=n.MIN_ZOOM,maxZoom:E=n.MAX_ZOOM,rotation:D,onRotationChange:k,showZoomSlider:o=!1,showRotationSlider:g=!1,showGrid:X=!1,gridOpacity:Y=n.DEFAULT_GRID_OPACITY,overlayColor:q=n.OVERLAY_COLOR,borderColor:B=n.BORDER_COLOR,borderWidth:V=n.BORDER_WIDTH,width:J="100%",height:K=400,className:Q,style:C,testId:Z})=>{const L=i.useRef(null),H=i.useRef(null),$=i.useRef(null),[ee,te]=i.useState(n.DEFAULT_CROP),[ae,re]=i.useState(n.DEFAULT_ZOOM),[se,ne]=i.useState(0),[f,W]=i.useState("none"),[w,P]=i.useState(null),[ie,ce]=i.useState(!1),[,le]=i.useState({w:0,h:0}),a=O??ee,x=_??ae,A=D??se,h=i.useMemo(()=>typeof M=="number"?M:n.ASPECT_RATIO_VALUES[M]??null,[M]),z=i.useCallback(e=>{O||te(e),y==null||y(e)},[O,y]),T=i.useCallback(e=>{const t=Math.max(j,Math.min(E,e));_||re(t),N==null||N(t)},[_,N,j,E]),he=i.useCallback(e=>{const t=Math.max(n.MIN_ROTATION,Math.min(n.MAX_ROTATION,e));D||ne(t),k==null||k(t)},[D,k]);i.useEffect(()=>{const e=new Image;e.crossOrigin="anonymous",e.onload=()=>{$.current=e,le({w:e.naturalWidth,h:e.naturalHeight}),ce(!0)},e.src=p},[p]);const b=i.useCallback(e=>{const t=L.current;if(!t)return e;const c=t.clientWidth,r=t.clientHeight-(o||g?60:0);let{x:l,y:m,width:u,height:d}=e;return u=Math.max(n.MIN_CROP_SIZE,u),d=Math.max(n.MIN_CROP_SIZE,d),h&&(d=u/h),l=Math.max(0,Math.min(c-u,l)),m=Math.max(0,Math.min(r-d,m)),{x:l,y:m,width:u,height:d}},[h,o,g]),G=i.useCallback(()=>{const e=H.current,t=$.current,c=L.current;if(!e||!t||!c)return"";const r=c.clientWidth,l=c.clientHeight-(o||g?60:0),m=t.naturalWidth/(r*x),u=t.naturalHeight/(l*x);e.width=a.width*m,e.height=a.height*u;const d=e.getContext("2d");return d?(I==="circle"&&(d.beginPath(),d.arc(e.width/2,e.height/2,Math.min(e.width,e.height)/2,0,Math.PI*2),d.clip()),d.drawImage(t,a.x*m,a.y*u,a.width*m,a.height*u,0,0,e.width,e.height),e.toDataURL("image/png")):""},[a,x,I,o,g]),R=i.useCallback(e=>t=>{t.preventDefault(),t.stopPropagation(),W(e),P({x:t.clientX,y:t.clientY,crop:{...a}})},[a]),de=i.useCallback(e=>{if(f==="none"||!w)return;const t=e.clientX-w.x,c=e.clientY-w.y,{crop:r}=w;let l;switch(f){case"move":l=b({...r,x:r.x+t,y:r.y+c});break;case"se":l=b({...r,width:r.width+t,height:h?(r.width+t)/h:r.height+c});break;case"sw":l=b({...r,x:r.x+t,width:r.width-t,height:h?(r.width-t)/h:r.height+c});break;case"ne":l=b({...r,y:h?r.y:r.y+c,width:r.width+t,height:h?(r.width+t)/h:r.height-c});break;case"nw":l=b({x:r.x+t,y:r.y+c,width:r.width-t,height:h?(r.width-t)/h:r.height-c});break;case"n":l=b({...r,y:r.y+c,height:r.height-c});break;case"s":l=b({...r,height:r.height+c});break;case"e":l=b({...r,width:r.width+t});break;case"w":l=b({...r,x:r.x+t,width:r.width-t});break;default:return}z(l)},[f,w,b,z,h]),U=i.useCallback(()=>{if(f!=="none"){const e=G();v==null||v(a,e)}W("none"),P(null)},[f,a,G,v]),be=i.useCallback(e=>{e.preventDefault();const t=e.deltaY>0?-n.ZOOM_STEP:n.ZOOM_STEP;T(x+t)},[x,T]),F=o||g?60:0;return s.jsxs("div",{className:S.cn("bear-relative bear-overflow-hidden bear-rounded-lg","bear-bg-gray-900 bear-select-none",Q),style:{width:J,height:K,...C},"data-testid":Z,children:[s.jsx("canvas",{ref:H,className:"bear-hidden"}),s.jsxs("div",{ref:L,className:"bear-relative bear-overflow-hidden bear-cursor-crosshair",style:{height:`calc(100% - ${F}px)`},onMouseMove:de,onMouseUp:U,onMouseLeave:U,onWheel:be,children:[ie&&s.jsx("img",{src:p,alt:"",className:"bear-absolute bear-inset-0 bear-w-full bear-h-full bear-object-contain bear-pointer-events-none",style:{transform:`scale(${x}) rotate(${A}deg)`,transition:f!=="none"?"none":"transform 0.2s ease"},draggable:!1}),s.jsxs("svg",{className:"bear-absolute bear-inset-0 bear-w-full bear-h-full bear-pointer-events-none",children:[s.jsx("defs",{children:s.jsxs("mask",{id:"crop-mask",children:[s.jsx("rect",{width:"100%",height:"100%",fill:"white"}),I==="circle"?s.jsx("ellipse",{cx:a.x+a.width/2,cy:a.y+a.height/2,rx:a.width/2,ry:a.height/2,fill:"black"}):s.jsx("rect",{x:a.x,y:a.y,width:a.width,height:a.height,fill:"black"})]})}),s.jsx("rect",{width:"100%",height:"100%",fill:q,mask:"url(#crop-mask)"})]}),s.jsx("div",{className:"bear-absolute bear-pointer-events-none",style:{left:a.x,top:a.y,width:a.width,height:a.height,border:`${V}px solid ${B}`,borderRadius:I==="circle"?"50%":0,boxShadow:"0 0 0 9999px transparent"},children:X&&s.jsxs("svg",{className:"bear-absolute bear-inset-0 bear-w-full bear-h-full",style:{opacity:Y},children:[Array.from({length:n.GRID_LINES-1}).map((e,t)=>s.jsx("line",{x1:`${(t+1)/n.GRID_LINES*100}%`,y1:"0",x2:`${(t+1)/n.GRID_LINES*100}%`,y2:"100%",stroke:"white",strokeWidth:"0.5"},`v-${t}`)),Array.from({length:n.GRID_LINES-1}).map((e,t)=>s.jsx("line",{x1:"0",y1:`${(t+1)/n.GRID_LINES*100}%`,x2:"100%",y2:`${(t+1)/n.GRID_LINES*100}%`,stroke:"white",strokeWidth:"0.5"},`h-${t}`))]})}),s.jsx("div",{className:"bear-absolute bear-cursor-move",style:{left:a.x,top:a.y,width:a.width,height:a.height},onMouseDown:R("move")}),["nw","ne","sw","se"].map(e=>{const t=e.includes("w"),c=e.includes("n");return s.jsx("div",{className:S.cn("bear-absolute bear-bg-white bear-border-2 bear-rounded-sm","bear-shadow-md bear-z-10"),style:{width:n.HANDLE_SIZE,height:n.HANDLE_SIZE,left:(t?a.x:a.x+a.width)-n.HANDLE_SIZE/2,top:(c?a.y:a.y+a.height)-n.HANDLE_SIZE/2,borderColor:"var(--bear-primary-500)",cursor:`${e}-resize`},onMouseDown:R(e)},e)}),["n","s","e","w"].map(e=>{const t=e==="n"||e==="s";return s.jsx("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:R(e)},e)})]}),(o||g)&&s.jsxs("div",{className:S.cn("bear-flex bear-items-center bear-gap-4 bear-px-4","bear-bg-gray-800/90 bear-backdrop-blur-sm"),style:{height:F},children:[o&&s.jsxs("div",{className:"bear-flex bear-items-center bear-gap-2 bear-flex-1",children:[s.jsx("svg",{className:"bear-w-4 bear-h-4 bear-text-gray-400",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",children:s.jsx("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"})}),s.jsx("input",{type:"range",min:j,max:E,step:n.ZOOM_STEP,value:x,onChange:e=>T(parseFloat(e.target.value)),className:"bear-flex-1 bear-h-1 bear-accent-pink-500"}),s.jsxs("span",{className:"bear-text-xs bear-text-gray-400 bear-w-10 bear-text-right",children:[(x*100).toFixed(0),"%"]})]}),g&&s.jsxs("div",{className:"bear-flex bear-items-center bear-gap-2 bear-flex-1",children:[s.jsx("svg",{className:"bear-w-4 bear-h-4 bear-text-gray-400",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",children:s.jsx("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"})}),s.jsx("input",{type:"range",min:n.MIN_ROTATION,max:n.MAX_ROTATION,step:n.ROTATION_STEP,value:A,onChange:e=>he(parseFloat(e.target.value)),className:"bear-flex-1 bear-h-1 bear-accent-pink-500"}),s.jsxs("span",{className:"bear-text-xs bear-text-gray-400 bear-w-10 bear-text-right",children:[A,"°"]})]})]})]})};exports.Cropper=ue;

package/dist/components/Cropper/Cropper.const.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const O={x:50,y:50,width:200,height:200},_=20,T=1,R=.5,A=5,E=.1,I=-180,t=180,o=1,n="rgba(0, 0, 0, 0.6)",M="#ffffff",c=2,s=3,D=.4,L=12,N={free:null,"1:1":1,"4:3":4/3,"3:2":3/2,"16:9":16/9,"2:3":2/3,"3:4":3/4,"9:16":9/16};exports.ASPECT_RATIO_VALUES=N;exports.BORDER_COLOR=M;exports.BORDER_WIDTH=c;exports.DEFAULT_CROP=O;exports.DEFAULT_GRID_OPACITY=D;exports.DEFAULT_ZOOM=T;exports.GRID_LINES=s;exports.HANDLE_SIZE=L;exports.MAX_ROTATION=t;exports.MAX_ZOOM=A;exports.MIN_CROP_SIZE=_;exports.MIN_ROTATION=I;exports.MIN_ZOOM=R;exports.OVERLAY_COLOR=n;exports.ROTATION_STEP=o;exports.ZOOM_STEP=E;

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

@@ -0,0 +1,31 @@
+import { CropArea, AspectRatioPreset } from './Cropper.types';
+/** Default crop area */
+export declare const DEFAULT_CROP: CropArea;
+/** Min crop dimensions */
+export declare const MIN_CROP_SIZE = 20;
+/** Default zoom */
+export declare const DEFAULT_ZOOM = 1;
+/** Zoom range */
+export declare const MIN_ZOOM = 0.5;
+export declare const MAX_ZOOM = 5;
+/** Zoom step for slider */
+export declare const ZOOM_STEP = 0.1;
+/** Rotation range */
+export declare const MIN_ROTATION = -180;
+export declare const MAX_ROTATION = 180;
+/** Rotation step for slider */
+export declare const ROTATION_STEP = 1;
+/** Default overlay color */
+export declare const OVERLAY_COLOR = "rgba(0, 0, 0, 0.6)";
+/** Default border color */
+export declare const BORDER_COLOR = "#ffffff";
+/** Default border width */
+export declare const BORDER_WIDTH = 2;
+/** Grid line count per axis */
+export declare const GRID_LINES = 3;
+/** Default grid opacity */
+export declare const DEFAULT_GRID_OPACITY = 0.4;
+/** Handle size in px */
+export declare const HANDLE_SIZE = 12;
+/** Aspect ratio numeric values */
+export declare const ASPECT_RATIO_VALUES: Record<AspectRatioPreset, number | null>;

package/dist/components/Cropper/Cropper.const.js

@@ -0,0 +1,33 @@
+const O = {
+  x: 50,
+  y: 50,
+  width: 200,
+  height: 200
+}, t = 20, _ = 1, n = 0.5, o = 5, c = 0.1, s = -180, R = 180, T = 1, A = "rgba(0, 0, 0, 0.6)", E = "#ffffff", I = 2, D = 3, L = 0.4, M = 12, N = {
+  free: null,
+  "1:1": 1,
+  "4:3": 4 / 3,
+  "3:2": 3 / 2,
+  "16:9": 16 / 9,
+  "2:3": 2 / 3,
+  "3:4": 3 / 4,
+  "9:16": 9 / 16
+};
+export {
+  N as ASPECT_RATIO_VALUES,
+  E as BORDER_COLOR,
+  I as BORDER_WIDTH,
+  O as DEFAULT_CROP,
+  L as DEFAULT_GRID_OPACITY,
+  _ as DEFAULT_ZOOM,
+  D as GRID_LINES,
+  M as HANDLE_SIZE,
+  R as MAX_ROTATION,
+  o as MAX_ZOOM,
+  t as MIN_CROP_SIZE,
+  s as MIN_ROTATION,
+  n as MIN_ZOOM,
+  A as OVERLAY_COLOR,
+  T as ROTATION_STEP,
+  c as ZOOM_STEP
+};

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

@@ -0,0 +1,21 @@
+import { FC } from 'react';
+import { CropperProps } from './Cropper.types';
+/**
+ * Cropper - Image cropping component with zoom, rotate, and aspect ratio
+ *
+ * @description
+ * Interactive image cropper with handles, zoom, rotation, grid overlay,
+ * and aspect ratio presets. Outputs cropped image as data URL.
+ *
+ * @example
+ * ```tsx
+ * <Cropper
+ *   src="/photo.jpg"
+ *   aspectRatio="16:9"
+ *   showZoomSlider
+ *   showGrid
+ *   onCropComplete={(crop, url) => console.log(url)}
+ * />
+ * ```
+ */
+export declare const Cropper: FC<CropperProps>;

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