@forgedevstack/bear 1.0.7 → 1.0.9

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

@@ -0,0 +1,50 @@
+export interface ConfettiPiece {
+    id: number;
+    x: number;
+    y: number;
+    rotation: number;
+    color: string;
+    size: number;
+    velocity: {
+        x: number;
+        y: number;
+    };
+    rotationSpeed: number;
+    shape: 'square' | 'circle' | 'triangle';
+}
+export interface ConfettiProps {
+    /** Whether confetti is active */
+    active?: boolean;
+    /** Number of confetti pieces */
+    count?: number;
+    /** Duration in ms before confetti disappears */
+    duration?: number;
+    /** Custom colors array */
+    colors?: string[];
+    /** Confetti origin x position (0-1) */
+    originX?: number;
+    /** Confetti origin y position (0-1) */
+    originY?: number;
+    /** Spread angle in degrees */
+    spread?: number;
+    /** Initial velocity */
+    velocity?: number;
+    /** Gravity effect */
+    gravity?: number;
+    /** Whether to auto-hide after duration */
+    autoHide?: boolean;
+    /** Callback when animation completes */
+    onComplete?: () => void;
+    /** Custom class name */
+    className?: string;
+    /** Test ID */
+    testId?: string;
+}
+export interface UseConfettiReturn {
+    /** Fire confetti */
+    fire: () => void;
+    /** Stop confetti */
+    stop: () => void;
+    /** Whether confetti is active */
+    isActive: boolean;
+}

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

@@ -0,0 +1,4 @@
+export { Confetti, default } from './Confetti';
+export { useConfetti } from './useConfetti';
+export * from './Confetti.types';
+export * from './Confetti.const';

package/dist/components/Confetti/useConfetti.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),u=()=>{const[s,t]=e.useState(!1),c=e.useCallback(()=>{t(!0)},[]),o=e.useCallback(()=>{t(!1)},[]);return{fire:c,stop:o,isActive:s}};exports.useConfetti=u;

package/dist/components/Confetti/useConfetti.d.ts

@@ -0,0 +1,13 @@
+import { UseConfettiReturn } from './Confetti.types';
+/**
+ * useConfetti - Hook to control confetti programmatically
+ *
+ * @example
+ * ```tsx
+ * const { fire, stop, isActive } = useConfetti();
+ *
+ * <Confetti active={isActive} onComplete={stop} />
+ * <Button onClick={fire}>Celebrate!</Button>
+ * ```
+ */
+export declare const useConfetti: () => UseConfettiReturn;

package/dist/components/Confetti/useConfetti.js

@@ -0,0 +1,12 @@
+import { useState as r, useCallback as e } from "react";
+const n = () => {
+  const [s, t] = r(!1), o = e(() => {
+    t(!0);
+  }, []), c = e(() => {
+    t(!1);
+  }, []);
+  return { fire: o, stop: c, isActive: s };
+};
+export {
+  n as useConfetti
+};

package/dist/components/CountdownTimer/CountdownTimer.cjs

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

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

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

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

@@ -0,0 +1,27 @@
+import { CountdownTimerSize } from './CountdownTimer.types';
+/** Milliseconds in time units */
+export declare const MS_PER_SECOND = 1000;
+export declare const MS_PER_MINUTE: number;
+export declare const MS_PER_HOUR: number;
+export declare const MS_PER_DAY: number;
+/** Default labels */
+export declare const DEFAULT_LABELS: {
+    readonly days: "Days";
+    readonly hours: "Hours";
+    readonly minutes: "Minutes";
+    readonly seconds: "Seconds";
+};
+/** Default separator */
+export declare const DEFAULT_SEPARATOR = ":";
+/** Pad length for digits */
+export declare const PAD_LENGTH = 2;
+/** Digit classes per size */
+export declare const SIZE_DIGIT_CLASSES: Record<CountdownTimerSize, string>;
+/** Label classes per size */
+export declare const SIZE_LABEL_CLASSES: Record<CountdownTimerSize, string>;
+/** Gap classes per size */
+export declare const SIZE_GAP_CLASSES: Record<CountdownTimerSize, string>;
+/** Separator horizontal margin */
+export declare const SEPARATOR_MARGIN = "bear-mx-1";
+/** Update interval in ms */
+export declare const UPDATE_INTERVAL = 1000;

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

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

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

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+import { CountdownTimerProps } from './CountdownTimer.types';
+/**
+ * CountdownTimer - Visual countdown with days/hours/minutes/seconds.
+ * Multiple variants, sizes, and theming via BearProvider CSS variables.
+ */
+export declare const CountdownTimer: FC<CountdownTimerProps>;

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