@appcorp/shadcn 1.2.0 → 2.0.0

package/components/enhanced-textarea.js

@@ -1,48 +1,3 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -54,17 +9,15 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.EnhancedTextarea = void 0;
-var React = __importStar(require("react"));
-var utils_1 = require("../lib/utils");
-var textarea_1 = require("./ui/textarea");
-var enhanced_label_1 = require("./enhanced-label");
-var EnhancedTextarea = React.forwardRef(function (_a, ref) {
-    var className = _a.className, error = _a.error, info = _a.info, label = _a.label, required = _a.required, id = _a.id, testIdWrapper = _a.testIdWrapper, testIdLabel = _a.testIdLabel, testIdTextarea = _a.testIdTextarea, testIdMessage = _a.testIdMessage, testIdError = _a.testIdError, testIdInfo = _a.testIdInfo, props = __rest(_a, ["className", "error", "info", "label", "required", "id", "testIdWrapper", "testIdLabel", "testIdTextarea", "testIdMessage", "testIdError", "testIdInfo"]);
+import * as React from "react";
+import { cn } from "../lib/utils";
+import { Textarea } from "./ui/textarea";
+import { EnhancedLabel } from "./enhanced-label";
+const EnhancedTextarea = React.forwardRef((_a, ref) => {
+    var { className, error, info, label, required, id, testIdWrapper, testIdLabel, testIdTextarea, testIdMessage, testIdError, testIdInfo } = _a, props = __rest(_a, ["className", "error", "info", "label", "required", "id", "testIdWrapper", "testIdLabel", "testIdTextarea", "testIdMessage", "testIdError", "testIdInfo"]);
     // Determine if there's an error (for aria-invalid and styling)
-    var hasError = Boolean(error);
-    var textareaElement = (React.createElement(textarea_1.Textarea, __assign({ ref: ref, id: id, "data-testid": testIdTextarea, "aria-invalid": hasError, required: required, className: (0, utils_1.cn)(
+    const hasError = Boolean(error);
+    const textareaElement = (React.createElement(Textarea, Object.assign({ ref: ref, id: id, "data-testid": testIdTextarea, "aria-invalid": hasError, required: required, className: cn(
         // Error state styling
         hasError &&
             "border-destructive focus-visible:border-destructive focus-visible:ring-destructive/20", 
@@ -74,7 +27,7 @@ var EnhancedTextarea = React.forwardRef(function (_a, ref) {
     // If label is provided, render the complete textarea with label structure
     if (label) {
         return (React.createElement("div", { className: "w-full space-y-2", "data-testid": testIdWrapper },
-            React.createElement(enhanced_label_1.EnhancedLabel, { htmlFor: id, required: required, testIdLabel: testIdLabel }, label),
+            React.createElement(EnhancedLabel, { htmlFor: id, required: required, testIdLabel: testIdLabel }, label),
             textareaElement,
             (error || info) && (React.createElement("div", { "data-testid": testIdMessage }, error ? (React.createElement("p", { className: "text-xs text-destructive", "data-testid": testIdError }, error)) : info ? (React.createElement("p", { className: "text-xs text-blue-600 dark:text-blue-400", "data-testid": testIdInfo }, info)) : null))));
     }
@@ -83,5 +36,5 @@ var EnhancedTextarea = React.forwardRef(function (_a, ref) {
         textareaElement,
         (error || info) && (React.createElement("div", { "data-testid": testIdMessage }, error ? (React.createElement("p", { className: "text-xs text-destructive", "data-testid": testIdError }, error)) : info ? (React.createElement("p", { className: "text-xs text-blue-600 dark:text-blue-400", "data-testid": testIdInfo }, info)) : null))));
 });
-exports.EnhancedTextarea = EnhancedTextarea;
 EnhancedTextarea.displayName = "EnhancedTextarea";
+export { EnhancedTextarea };

package/components/field.d.ts

@@ -8,7 +8,7 @@ declare function FieldLegend({ className, variant, ...props }: React.ComponentPr
 declare function FieldGroup({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare const fieldVariants: (props?: ({
     orientation?: "horizontal" | "vertical" | "responsive" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function Field({ className, orientation, ...props }: React.ComponentProps<"div"> & VariantProps<typeof fieldVariants>): React.JSX.Element;
 declare function FieldContent({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare function FieldLabel({ className, ...props }: React.ComponentProps<typeof Label>): React.JSX.Element;

package/components/field.js

@@ -1,49 +1,4 @@
 "use client";
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -55,35 +10,24 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Field = Field;
-exports.FieldLabel = FieldLabel;
-exports.FieldDescription = FieldDescription;
-exports.FieldError = FieldError;
-exports.FieldGroup = FieldGroup;
-exports.FieldLegend = FieldLegend;
-exports.FieldSeparator = FieldSeparator;
-exports.FieldSet = FieldSet;
-exports.FieldContent = FieldContent;
-exports.FieldTitle = FieldTitle;
-var react_1 = __importStar(require("react"));
-var class_variance_authority_1 = require("class-variance-authority");
-var utils_1 = require("../lib/utils");
-var label_1 = require("./ui/label");
-var separator_1 = require("./ui/separator");
+import React, { useMemo } from "react";
+import { cva } from "class-variance-authority";
+import { cn } from "../lib/utils";
+import { Label } from "./ui/label";
+import { Separator } from "./ui/separator";
 function FieldSet(_a) {
-    var className = _a.className, props = __rest(_a, ["className"]);
-    return (react_1.default.createElement("fieldset", __assign({ "data-slot": "field-set", className: (0, utils_1.cn)("flex flex-col gap-6", "has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3", className) }, props)));
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (React.createElement("fieldset", Object.assign({ "data-slot": "field-set", className: cn("flex flex-col gap-6", "has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3", className) }, props)));
 }
 function FieldLegend(_a) {
-    var className = _a.className, _b = _a.variant, variant = _b === void 0 ? "legend" : _b, props = __rest(_a, ["className", "variant"]);
-    return (react_1.default.createElement("legend", __assign({ "data-slot": "field-legend", "data-variant": variant, className: (0, utils_1.cn)("mb-3 font-medium", "data-[variant=legend]:text-base", "data-[variant=label]:text-sm", className) }, props)));
+    var { className, variant = "legend" } = _a, props = __rest(_a, ["className", "variant"]);
+    return (React.createElement("legend", Object.assign({ "data-slot": "field-legend", "data-variant": variant, className: cn("mb-3 font-medium", "data-[variant=legend]:text-base", "data-[variant=label]:text-sm", className) }, props)));
 }
 function FieldGroup(_a) {
-    var className = _a.className, props = __rest(_a, ["className"]);
-    return (react_1.default.createElement("div", __assign({ "data-slot": "field-group", className: (0, utils_1.cn)("group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4", className) }, props)));
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (React.createElement("div", Object.assign({ "data-slot": "field-group", className: cn("group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4", className) }, props)));
 }
-var fieldVariants = (0, class_variance_authority_1.cva)("group/field data-[invalid=true]:text-destructive flex w-full gap-3", {
+const fieldVariants = cva("group/field data-[invalid=true]:text-destructive flex w-full gap-3", {
     variants: {
         orientation: {
             vertical: ["flex-col [&>*]:w-full [&>.sr-only]:w-auto"],
@@ -104,34 +48,34 @@ var fieldVariants = (0, class_variance_authority_1.cva)("group/field data-[inval
     },
 });
 function Field(_a) {
-    var className = _a.className, _b = _a.orientation, orientation = _b === void 0 ? "vertical" : _b, props = __rest(_a, ["className", "orientation"]);
-    return (react_1.default.createElement("div", __assign({ role: "group", "data-slot": "field", "data-orientation": orientation, className: (0, utils_1.cn)(fieldVariants({ orientation: orientation }), className) }, props)));
+    var { className, orientation = "vertical" } = _a, props = __rest(_a, ["className", "orientation"]);
+    return (React.createElement("div", Object.assign({ role: "group", "data-slot": "field", "data-orientation": orientation, className: cn(fieldVariants({ orientation }), className) }, props)));
 }
 function FieldContent(_a) {
-    var className = _a.className, props = __rest(_a, ["className"]);
-    return (react_1.default.createElement("div", __assign({ "data-slot": "field-content", className: (0, utils_1.cn)("group/field-content flex flex-1 flex-col gap-1.5 leading-snug", className) }, props)));
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (React.createElement("div", Object.assign({ "data-slot": "field-content", className: cn("group/field-content flex flex-1 flex-col gap-1.5 leading-snug", className) }, props)));
 }
 function FieldLabel(_a) {
-    var className = _a.className, props = __rest(_a, ["className"]);
-    return (react_1.default.createElement(label_1.Label, __assign({ "data-slot": "field-label", className: (0, utils_1.cn)("group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50", "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>[data-slot=field]]:p-4", "has-data-[state=checked]:bg-primary/5 has-data-[state=checked]:border-primary dark:has-data-[state=checked]:bg-primary/10", className) }, props)));
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (React.createElement(Label, Object.assign({ "data-slot": "field-label", className: cn("group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50", "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>[data-slot=field]]:p-4", "has-data-[state=checked]:bg-primary/5 has-data-[state=checked]:border-primary dark:has-data-[state=checked]:bg-primary/10", className) }, props)));
 }
 function FieldTitle(_a) {
-    var className = _a.className, props = __rest(_a, ["className"]);
-    return (react_1.default.createElement("div", __assign({ "data-slot": "field-label", className: (0, utils_1.cn)("flex w-fit items-center gap-2 text-sm font-medium leading-snug group-data-[disabled=true]/field:opacity-50", className) }, props)));
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (React.createElement("div", Object.assign({ "data-slot": "field-label", className: cn("flex w-fit items-center gap-2 text-sm font-medium leading-snug group-data-[disabled=true]/field:opacity-50", className) }, props)));
 }
 function FieldDescription(_a) {
-    var className = _a.className, props = __rest(_a, ["className"]);
-    return (react_1.default.createElement("p", __assign({ "data-slot": "field-description", className: (0, utils_1.cn)("text-muted-foreground text-sm font-normal leading-normal group-has-[[data-orientation=horizontal]]/field:text-balance", "nth-last-2:-mt-1 last:mt-0 [[data-variant=legend]+&]:-mt-1.5", "[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4", className) }, props)));
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (React.createElement("p", Object.assign({ "data-slot": "field-description", className: cn("text-muted-foreground text-sm font-normal leading-normal group-has-[[data-orientation=horizontal]]/field:text-balance", "nth-last-2:-mt-1 last:mt-0 [[data-variant=legend]+&]:-mt-1.5", "[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4", className) }, props)));
 }
 function FieldSeparator(_a) {
-    var children = _a.children, className = _a.className, props = __rest(_a, ["children", "className"]);
-    return (react_1.default.createElement("div", __assign({ "data-slot": "field-separator", "data-content": !!children, className: (0, utils_1.cn)("relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2", className) }, props),
-        react_1.default.createElement(separator_1.Separator, { className: "absolute inset-0 top-1/2" }),
-        children && (react_1.default.createElement("span", { className: "bg-background text-muted-foreground relative mx-auto block w-fit px-2", "data-slot": "field-separator-content" }, children))));
+    var { children, className } = _a, props = __rest(_a, ["children", "className"]);
+    return (React.createElement("div", Object.assign({ "data-slot": "field-separator", "data-content": !!children, className: cn("relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2", className) }, props),
+        React.createElement(Separator, { className: "absolute inset-0 top-1/2" }),
+        children && (React.createElement("span", { className: "bg-background text-muted-foreground relative mx-auto block w-fit px-2", "data-slot": "field-separator-content" }, children))));
 }
 function FieldError(_a) {
-    var className = _a.className, children = _a.children, errors = _a.errors, props = __rest(_a, ["className", "children", "errors"]);
-    var content = (0, react_1.useMemo)(function () {
+    var { className, children, errors } = _a, props = __rest(_a, ["className", "children", "errors"]);
+    const content = useMemo(() => {
         var _a;
         if (children) {
             return children;
@@ -142,12 +86,11 @@ function FieldError(_a) {
         if ((errors === null || errors === void 0 ? void 0 : errors.length) === 1 && ((_a = errors[0]) === null || _a === void 0 ? void 0 : _a.message)) {
             return errors[0].message;
         }
-        return (react_1.default.createElement("ul", { className: "ml-4 flex list-disc flex-col gap-1" }, errors.map(function (error, index) {
-            return (error === null || error === void 0 ? void 0 : error.message) && react_1.default.createElement("li", { key: index }, error.message);
-        })));
+        return (React.createElement("ul", { className: "ml-4 flex list-disc flex-col gap-1" }, errors.map((error, index) => (error === null || error === void 0 ? void 0 : error.message) && React.createElement("li", { key: index }, error.message))));
     }, [children, errors]);
     if (!content) {
         return null;
     }
-    return (react_1.default.createElement("div", __assign({ role: "alert", "data-slot": "field-error", className: (0, utils_1.cn)("text-destructive text-sm font-normal", className) }, props), content));
+    return (React.createElement("div", Object.assign({ role: "alert", "data-slot": "field-error", className: cn("text-destructive text-sm font-normal", className) }, props), content));
 }
+export { Field, FieldLabel, FieldDescription, FieldError, FieldGroup, FieldLegend, FieldSeparator, FieldSet, FieldContent, FieldTitle, };

package/components/image-resize-dialog.js

@@ -1,129 +1,44 @@
 "use client";
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
-    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (g && (g = 0, op[0] && (_ = 0)), _) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ImageResizeDialog = void 0;
-var react_1 = __importStar(require("react"));
-var react_easy_crop_1 = __importDefault(require("react-easy-crop"));
-var dialog_1 = require("./ui/dialog");
-var button_1 = require("./ui/button");
-var slider_1 = require("./ui/slider");
+import React, { Suspense, useCallback, useState } from "react";
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from "./ui/dialog";
+import { Button } from "./ui/button";
+import { Slider } from "./ui/slider";
+const Cropper = React.lazy(() => import("react-easy-crop"));
 /**
  * Create a cropped image from the provided source and crop area.
  */
-function getCroppedImg(imageSrc_1, pixelCrop_1) {
-    return __awaiter(this, arguments, void 0, function (imageSrc, pixelCrop, fileName) {
-        var image, canvas, ctx;
-        if (fileName === void 0) { fileName = "cropped-image.jpg"; }
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0: return [4 /*yield*/, createImage(imageSrc)];
-                case 1:
-                    image = _a.sent();
-                    canvas = document.createElement("canvas");
-                    ctx = canvas.getContext("2d");
-                    if (!ctx) {
-                        throw new Error("No 2d context");
-                    }
-                    // Set canvas size to match the crop area
-                    canvas.width = pixelCrop.width;
-                    canvas.height = pixelCrop.height;
-                    // Draw the cropped image
-                    ctx.drawImage(image, pixelCrop.x, pixelCrop.y, pixelCrop.width, pixelCrop.height, 0, 0, pixelCrop.width, pixelCrop.height);
-                    // Convert canvas to blob and then to File
-                    return [2 /*return*/, new Promise(function (resolve, reject) {
-                            canvas.toBlob(function (blob) {
-                                if (!blob) {
-                                    reject(new Error("Canvas is empty"));
-                                    return;
-                                }
-                                var file = new File([blob], fileName, { type: "image/jpeg" });
-                                resolve(file);
-                            }, "image/jpeg");
-                        })];
+async function getCroppedImg(imageSrc, pixelCrop, fileName = "cropped-image.jpg") {
+    const image = await createImage(imageSrc);
+    const canvas = document.createElement("canvas");
+    const ctx = canvas.getContext("2d");
+    if (!ctx) {
+        throw new Error("No 2d context");
+    }
+    // Set canvas size to match the crop area
+    canvas.width = pixelCrop.width;
+    canvas.height = pixelCrop.height;
+    // Draw the cropped image
+    ctx.drawImage(image, pixelCrop.x, pixelCrop.y, pixelCrop.width, pixelCrop.height, 0, 0, pixelCrop.width, pixelCrop.height);
+    // Convert canvas to blob and then to File
+    return new Promise((resolve, reject) => {
+        canvas.toBlob((blob) => {
+            if (!blob) {
+                reject(new Error("Canvas is empty"));
+                return;
             }
-        });
+            const file = new File([blob], fileName, { type: "image/jpeg" });
+            resolve(file);
+        }, "image/jpeg");
     });
 }
 /**
  * Create an HTMLImageElement from a URL.
  */
 function createImage(url) {
-    return new Promise(function (resolve, reject) {
-        var image = new Image();
-        image.addEventListener("load", function () { return resolve(image); });
-        image.addEventListener("error", function (error) { return reject(error); });
+    return new Promise((resolve, reject) => {
+        const image = new Image();
+        image.addEventListener("load", () => resolve(image));
+        image.addEventListener("error", (error) => reject(error));
         image.src = url;
     });
 }
@@ -131,50 +46,37 @@ function createImage(url) {
  * A dialog component that allows users to crop/resize an image to a square aspect ratio.
  * Uses react-easy-crop for the cropping functionality.
  */
-var ImageResizeDialog = function (_a) {
-    var open = _a.open, onClose = _a.onClose, imageUrl = _a.imageUrl, onCropComplete = _a.onCropComplete, _b = _a.fileName, fileName = _b === void 0 ? "cropped-image.jpg" : _b;
-    var _c = (0, react_1.useState)({ x: 0, y: 0 }), crop = _c[0], setCrop = _c[1];
-    var _d = (0, react_1.useState)(1), zoom = _d[0], setZoom = _d[1];
-    var _e = (0, react_1.useState)(null), croppedAreaPixels = _e[0], setCroppedAreaPixels = _e[1];
-    var handleCropComplete = (0, react_1.useCallback)(function (_croppedArea, croppedAreaPixels) {
+export const ImageResizeDialog = ({ open, onClose, imageUrl, onCropComplete, fileName = "cropped-image.jpg", }) => {
+    const [crop, setCrop] = useState({ x: 0, y: 0 });
+    const [zoom, setZoom] = useState(1);
+    const [croppedAreaPixels, setCroppedAreaPixels] = useState(null);
+    const handleCropComplete = useCallback((_croppedArea, croppedAreaPixels) => {
         setCroppedAreaPixels(croppedAreaPixels);
     }, []);
-    var handleSave = (0, react_1.useCallback)(function () { return __awaiter(void 0, void 0, void 0, function () {
-        var croppedImage, error_1;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    if (!croppedAreaPixels)
-                        return [2 /*return*/];
-                    _a.label = 1;
-                case 1:
-                    _a.trys.push([1, 3, , 4]);
-                    return [4 /*yield*/, getCroppedImg(imageUrl, croppedAreaPixels, fileName)];
-                case 2:
-                    croppedImage = _a.sent();
-                    onCropComplete(croppedImage);
-                    onClose();
-                    return [3 /*break*/, 4];
-                case 3:
-                    error_1 = _a.sent();
-                    console.error("Failed to crop image:", error_1);
-                    return [3 /*break*/, 4];
-                case 4: return [2 /*return*/];
-            }
-        });
-    }); }, [croppedAreaPixels, imageUrl, fileName, onCropComplete, onClose]);
-    return (react_1.default.createElement(dialog_1.Dialog, { open: open, onOpenChange: onClose },
-        react_1.default.createElement(dialog_1.DialogContent, { className: "max-w-3xl", "data-slot": "image-resize-dialog", "data-testid": "image-resize-dialog" },
-            react_1.default.createElement(dialog_1.DialogHeader, null,
-                react_1.default.createElement(dialog_1.DialogTitle, null, "Resize Image"),
-                react_1.default.createElement(dialog_1.DialogDescription, null, "Adjust the crop area to create a square image. Use the slider to zoom in or out.")),
-            react_1.default.createElement("div", { className: "relative h-[400px] w-full bg-muted rounded-md overflow-hidden" },
-                react_1.default.createElement(react_easy_crop_1.default, { image: imageUrl, crop: crop, zoom: zoom, aspect: 1, onCropChange: setCrop, onCropComplete: handleCropComplete, onZoomChange: setZoom })),
-            react_1.default.createElement("div", { className: "space-y-2" },
-                react_1.default.createElement("label", { className: "text-sm font-medium" }, "Zoom"),
-                react_1.default.createElement(slider_1.Slider, { value: [zoom], onValueChange: function (values) { return setZoom(values[0] || 1); }, min: 1, max: 3, step: 0.1, className: "w-full", "data-testid": "zoom-slider" })),
-            react_1.default.createElement(dialog_1.DialogFooter, null,
-                react_1.default.createElement(button_1.Button, { variant: "outline", onClick: onClose, "data-testid": "cancel-button" }, "Cancel"),
-                react_1.default.createElement(button_1.Button, { onClick: handleSave, "data-testid": "save-button" }, "Save")))));
+    const handleSave = useCallback(async () => {
+        if (!croppedAreaPixels)
+            return;
+        try {
+            const croppedImage = await getCroppedImg(imageUrl, croppedAreaPixels, fileName);
+            onCropComplete(croppedImage);
+            onClose();
+        }
+        catch (error) {
+            console.error("Failed to crop image:", error);
+        }
+    }, [croppedAreaPixels, imageUrl, fileName, onCropComplete, onClose]);
+    return (React.createElement(Dialog, { open: open, onOpenChange: onClose },
+        React.createElement(DialogContent, { className: "max-w-3xl", "data-slot": "image-resize-dialog", "data-testid": "image-resize-dialog" },
+            React.createElement(DialogHeader, null,
+                React.createElement(DialogTitle, null, "Resize Image"),
+                React.createElement(DialogDescription, null, "Adjust the crop area to create a square image. Use the slider to zoom in or out.")),
+            React.createElement("div", { className: "relative h-[400px] w-full bg-muted rounded-md overflow-hidden" },
+                React.createElement(Suspense, { fallback: React.createElement("div", { className: "flex h-full w-full items-center justify-center text-muted-foreground text-sm" }, "Loading crop editor...") },
+                    React.createElement(Cropper, { image: imageUrl, crop: crop, zoom: zoom, aspect: 1, onCropChange: setCrop, onCropComplete: handleCropComplete, onZoomChange: setZoom }))),
+            React.createElement("div", { className: "space-y-2" },
+                React.createElement("label", { className: "text-sm font-medium" }, "Zoom"),
+                React.createElement(Slider, { value: [zoom], onValueChange: (values) => setZoom(values[0] || 1), min: 1, max: 3, step: 0.1, className: "w-full", "data-testid": "zoom-slider" })),
+            React.createElement(DialogFooter, null,
+                React.createElement(Button, { variant: "outline", onClick: onClose, "data-testid": "cancel-button" }, "Cancel"),
+                React.createElement(Button, { onClick: handleSave, "data-testid": "save-button" }, "Save")))));
 };
-exports.ImageResizeDialog = ImageResizeDialog;