@hirely/ui 0.1.6 → 0.1.8

package/dist/components/ui/field.es.js

@@ -0,0 +1,110 @@
+"use client";
+import { cn as e } from "../../node_modules/.bun/cnfast@0.0.8/node_modules/cnfast/dist/index.es.js";
+import { cva as t } from "../../node_modules/.bun/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.es.js";
+import { Separator as n } from "./separator.es.js";
+import { Label as r } from "./label.es.js";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { useMemo as o } from "react";
+//#region src/components/ui/field.tsx
+function s({ className: t, ...n }) {
+	return /* @__PURE__ */ i("fieldset", {
+		"data-slot": "field-set",
+		className: e("flex flex-col gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3", t),
+		...n
+	});
+}
+function c({ className: t, variant: n = "legend", ...r }) {
+	return /* @__PURE__ */ i("legend", {
+		"data-slot": "field-legend",
+		"data-variant": n,
+		className: e("mb-1.5 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base", t),
+		...r
+	});
+}
+function l({ className: t, ...n }) {
+	return /* @__PURE__ */ i("div", {
+		"data-slot": "field-group",
+		className: e("group/field-group @container/field-group flex w-full flex-col gap-5 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4", t),
+		...n
+	});
+}
+var u = t("group/field flex w-full gap-2 data-[invalid=true]:text-destructive", {
+	variants: { orientation: {
+		vertical: "flex-col *:w-full [&>.sr-only]:w-auto",
+		horizontal: "flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+		responsive: "flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px"
+	} },
+	defaultVariants: { orientation: "vertical" }
+});
+function d({ className: t, orientation: n = "vertical", ...r }) {
+	return /* @__PURE__ */ i("div", {
+		role: "group",
+		"data-slot": "field",
+		"data-orientation": n,
+		className: e(u({ orientation: n }), t),
+		...r
+	});
+}
+function f({ className: t, ...n }) {
+	return /* @__PURE__ */ i("div", {
+		"data-slot": "field-content",
+		className: e("group/field-content flex flex-1 flex-col gap-0.5 leading-snug", t),
+		...n
+	});
+}
+function p({ className: t, ...n }) {
+	return /* @__PURE__ */ i(r, {
+		"data-slot": "field-label",
+		className: e("group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-data-checked:border-primary/30 has-data-checked:bg-primary/5 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border *:data-[slot=field]:p-2.5 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10", "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col", t),
+		...n
+	});
+}
+function m({ className: t, ...n }) {
+	return /* @__PURE__ */ i("div", {
+		"data-slot": "field-title",
+		className: e("flex w-fit items-center gap-2 text-sm font-medium group-data-[disabled=true]/field:opacity-50", t),
+		...n
+	});
+}
+function h({ className: t, ...n }) {
+	return /* @__PURE__ */ i("p", {
+		"data-slot": "field-description",
+		className: e("text-left text-sm leading-normal font-normal text-muted-foreground group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5", "last:mt-0 nth-last-2:-mt-1", "[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary", t),
+		...n
+	});
+}
+function g({ children: t, className: r, ...o }) {
+	return /* @__PURE__ */ a("div", {
+		"data-slot": "field-separator",
+		"data-content": !!t,
+		className: e("relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2", r),
+		...o,
+		children: [/* @__PURE__ */ i(n, { className: "absolute inset-0 top-1/2" }), t && /* @__PURE__ */ i("span", {
+			className: "relative mx-auto block w-fit bg-background px-2 text-muted-foreground",
+			"data-slot": "field-separator-content",
+			children: t
+		})]
+	});
+}
+function _({ className: t, children: n, errors: r, ...a }) {
+	let s = o(() => {
+		if (n) return n;
+		if (!r?.length) return null;
+		let e = [...new Map(r.map((e) => [e?.message, e])).values()];
+		return e?.length == 1 ? e[0]?.message : /* @__PURE__ */ i("ul", {
+			className: "ml-4 flex list-disc flex-col gap-1",
+			children: e.map((e, t) => e?.message && /* @__PURE__ */ i("li", { children: e.message }, t))
+		});
+	}, [n, r]);
+	return s ? /* @__PURE__ */ i("div", {
+		role: "alert",
+		"data-slot": "field-error",
+		className: e("text-sm font-normal text-destructive", t),
+		...a,
+		children: s
+	}) : null;
+}
+//#endregion
+export { d as Field, f as FieldContent, h as FieldDescription, _ as FieldError, l as FieldGroup, p as FieldLabel, c as FieldLegend, g as FieldSeparator, s as FieldSet, m as FieldTitle };
+
+//# sourceMappingURL=field.es.js.map

package/dist/components/ui/field.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"field.es.js","names":[],"sources":["../../../src/components/ui/field.tsx"],"sourcesContent":["\"use client\"\n\nimport { useMemo } from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"../../lib/utils\"\nimport { Label } from \"./label\"\nimport { Separator } from \"./separator\"\n\nfunction FieldSet({ className, ...props }: React.ComponentProps<\"fieldset\">) {\n  return (\n    <fieldset\n      data-slot=\"field-set\"\n      className={cn(\n        \"flex flex-col gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldLegend({\n  className,\n  variant = \"legend\",\n  ...props\n}: React.ComponentProps<\"legend\"> & { variant?: \"legend\" | \"label\" }) {\n  return (\n    <legend\n      data-slot=\"field-legend\"\n      data-variant={variant}\n      className={cn(\n        \"mb-1.5 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-group\"\n      className={cn(\n        \"group/field-group @container/field-group flex w-full flex-col gap-5 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst fieldVariants = cva(\n  \"group/field flex w-full gap-2 data-[invalid=true]:text-destructive\",\n  {\n    variants: {\n      orientation: {\n        vertical: \"flex-col *:w-full [&>.sr-only]:w-auto\",\n        horizontal:\n          \"flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n        responsive:\n          \"flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n      },\n    },\n    defaultVariants: {\n      orientation: \"vertical\",\n    },\n  }\n)\n\nfunction Field({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof fieldVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"field\"\n      data-orientation={orientation}\n      className={cn(fieldVariants({ orientation }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction FieldContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-content\"\n      className={cn(\n        \"group/field-content flex flex-1 flex-col gap-0.5 leading-snug\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof Label>) {\n  return (\n    <Label\n      data-slot=\"field-label\"\n      className={cn(\n        \"group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-data-checked:border-primary/30 has-data-checked:bg-primary/5 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border *:data-[slot=field]:p-2.5 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10\",\n        \"has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-title\"\n      className={cn(\n        \"flex w-fit items-center gap-2 text-sm font-medium group-data-[disabled=true]/field:opacity-50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"field-description\"\n      className={cn(\n        \"text-left text-sm leading-normal font-normal text-muted-foreground group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5\",\n        \"last:mt-0 nth-last-2:-mt-1\",\n        \"[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  children?: React.ReactNode\n}) {\n  return (\n    <div\n      data-slot=\"field-separator\"\n      data-content={!!children}\n      className={cn(\n        \"relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2\",\n        className\n      )}\n      {...props}\n    >\n      <Separator className=\"absolute inset-0 top-1/2\" />\n      {children && (\n        <span\n          className=\"relative mx-auto block w-fit bg-background px-2 text-muted-foreground\"\n          data-slot=\"field-separator-content\"\n        >\n          {children}\n        </span>\n      )}\n    </div>\n  )\n}\n\nfunction FieldError({\n  className,\n  children,\n  errors,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  errors?: Array<{ message?: string } | undefined>\n}) {\n  const content = useMemo(() => {\n    if (children) {\n      return children\n    }\n\n    if (!errors?.length) {\n      return null\n    }\n\n    const uniqueErrors = [\n      ...new Map(errors.map((error) => [error?.message, error])).values(),\n    ]\n\n    if (uniqueErrors?.length == 1) {\n      return uniqueErrors[0]?.message\n    }\n\n    return (\n      <ul className=\"ml-4 flex list-disc flex-col gap-1\">\n        {uniqueErrors.map(\n          (error, index) =>\n            error?.message && <li key={index}>{error.message}</li>\n        )}\n      </ul>\n    )\n  }, [children, errors])\n\n  if (!content) {\n    return null\n  }\n\n  return (\n    <div\n      role=\"alert\"\n      data-slot=\"field-error\"\n      className={cn(\"text-sm font-normal text-destructive\", className)}\n      {...props}\n    >\n      {content}\n    </div>\n  )\n}\n\nexport {\n  Field,\n  FieldLabel,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLegend,\n  FieldSeparator,\n  FieldSet,\n  FieldContent,\n  FieldTitle,\n}\n"],"mappings":";;;;;;;;AASA,SAAS,EAAS,EAAE,cAAW,GAAG,KAA2C;CAC3E,OACE,kBAAC,YAAD;EACE,aAAU;EACV,WAAW,EACT,oGACA,CACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,EAAY,EACnB,cACA,aAAU,UACV,GAAG,KACiE;CACpE,OACE,kBAAC,UAAD;EACE,aAAU;EACV,gBAAc;EACd,WAAW,EACT,mFACA,CACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,EAAW,EAAE,cAAW,GAAG,KAAsC;CACxE,OACE,kBAAC,OAAD;EACE,aAAU;EACV,WAAW,EACT,wIACA,CACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,IAAM,IAAgB,EACpB,sEACA;CACE,UAAU,EACR,aAAa;EACX,UAAU;EACV,YACE;EACF,YACE;CACJ,EACF;CACA,iBAAiB,EACf,aAAa,WACf;AACF,CACF;AAEA,SAAS,EAAM,EACb,cACA,iBAAc,YACd,GAAG,KACgE;CACnE,OACE,kBAAC,OAAD;EACE,MAAK;EACL,aAAU;EACV,oBAAkB;EAClB,WAAW,EAAG,EAAc,EAAE,eAAY,CAAC,GAAG,CAAS;EACvD,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,EAAa,EAAE,cAAW,GAAG,KAAsC;CAC1E,OACE,kBAAC,OAAD;EACE,aAAU;EACV,WAAW,EACT,iEACA,CACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,EAAW,EAClB,cACA,GAAG,KACkC;CACrC,OACE,kBAAC,GAAD;EACE,aAAU;EACV,WAAW,EACT,2VACA,qEACA,CACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,EAAW,EAAE,cAAW,GAAG,KAAsC;CACxE,OACE,kBAAC,OAAD;EACE,aAAU;EACV,WAAW,EACT,iGACA,CACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,EAAiB,EAAE,cAAW,GAAG,KAAoC;CAC5E,OACE,kBAAC,KAAD;EACE,aAAU;EACV,WAAW,EACT,qJACA,8BACA,qEACA,CACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,EAAe,EACtB,aACA,cACA,GAAG,KAGF;CACD,OACE,kBAAC,OAAD;EACE,aAAU;EACV,gBAAc,CAAC,CAAC;EAChB,WAAW,EACT,6EACA,CACF;EACA,GAAI;YAPN,CASE,kBAAC,GAAD,EAAW,WAAU,2BAA4B,CAAA,GAChD,KACC,kBAAC,QAAD;GACE,WAAU;GACV,aAAU;GAET;EACG,CAAA,CAEL;;AAET;AAEA,SAAS,EAAW,EAClB,cACA,aACA,WACA,GAAG,KAGF;CACD,IAAM,IAAU,QAAc;EAC5B,IAAI,GACF,OAAO;EAGT,IAAI,CAAC,GAAQ,QACX,OAAO;EAGT,IAAM,IAAe,CACnB,GAAG,IAAI,IAAI,EAAO,KAAK,MAAU,CAAC,GAAO,SAAS,CAAK,CAAC,CAAC,CAAC,CAAC,OAAO,CACpE;EAMA,OAJI,GAAc,UAAU,IACnB,EAAa,EAAE,EAAE,UAIxB,kBAAC,MAAD;GAAI,WAAU;aACX,EAAa,KACX,GAAO,MACN,GAAO,WAAW,kBAAC,MAAD,EAAA,UAAiB,EAAM,QAAY,GAA1B,CAA0B,CACzD;EACE,CAAA;CAER,GAAG,CAAC,GAAU,CAAM,CAAC;CAMrB,OAJK,IAKH,kBAAC,OAAD;EACE,MAAK;EACL,aAAU;EACV,WAAW,EAAG,wCAAwC,CAAS;EAC/D,GAAI;YAEH;CACE,CAAA,IAXE;AAaX"}

package/dist/components/ui/generate-ai-button.cjs.js

@@ -0,0 +1,2 @@
+const e=require("../../_virtual/_rolldown/runtime.cjs.js"),t=require("../../node_modules/.bun/cnfast@0.0.8/node_modules/cnfast/dist/index.cjs.js"),n=require("./button.cjs.js");let r=require("lucide-react"),i=require("react/jsx-runtime"),a=require("react");a=e.__toESM(a,1);var o=a.default.forwardRef(({className:e,label:a=`Auto-Fill with AI`,variant:o=`outline`,size:s=`lg`,type:c=`button`,icon:l=(0,i.jsx)(r.Sparkles,{className:`w-4 h-4`}),...u},d)=>(0,i.jsxs)(n.Button,{ref:d,type:c,variant:o,size:s,className:t.cn(`w-full bg-primary/10 cursor-pointer text-primary rounded-full text-xs md:text-sm font-medium transition-all hover:bg-primary/10 hover:text-primary border-primary/20 mb-6`,e),...u,children:[l,a]}));o.displayName=`GenerateAiButton`,exports.GenerateAiButton=o;
+//# sourceMappingURL=generate-ai-button.cjs.js.map

package/dist/components/ui/generate-ai-button.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"generate-ai-button.cjs.js","names":[],"sources":["../../../src/components/ui/generate-ai-button.tsx"],"sourcesContent":["import React from 'react';\nimport { Button } from \"./button\";\nimport { Sparkles } from \"lucide-react\";\nimport { cn } from \"../../lib/utils\";\n\ninterface GenerateAiButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n    label?: string;\n    variant?: \"destructive\" | \"outline\" | \"secondary\" | \"default\" | \"link\" | \"ghost\" | null;\n    size?: \"default\" | \"sm\" | \"lg\" | \"xs\" | \"icon\" | \"icon-xs\" | \"icon-sm\" | \"icon-lg\" | null;\n    type?: \"button\" | \"submit\" | \"reset\" | undefined;\n    icon?: React.ReactNode;\n}\n\nexport const GenerateAiButton = React.forwardRef<HTMLButtonElement, GenerateAiButtonProps>(\n    ({ className, label = \"Auto-Fill with AI\", variant = \"outline\", size = \"lg\", type = \"button\", icon = <Sparkles className=\"w-4 h-4\" />, ...props }, ref) => {\n        return (\n            <Button\n                ref={ref}\n                type={type}\n                variant={variant}\n                size={size}\n                className={cn(\n                    \"w-full bg-primary/10 cursor-pointer text-primary rounded-full text-xs md:text-sm font-medium transition-all hover:bg-primary/10 hover:text-primary border-primary/20 mb-6\",\n                    className\n                )}\n                {...props}\n            >\n                {icon}\n                {label}\n            </Button>\n        );\n    }\n);\n\nGenerateAiButton.displayName = \"GenerateAiButton\";\n"],"mappings":"iRAaA,IAAa,EAAmB,EAAA,QAAM,YACjC,CAAE,YAAW,QAAQ,oBAAqB,UAAU,UAAW,OAAO,KAAM,OAAO,SAAU,QAAO,EAAA,EAAA,IAAA,CAAC,EAAA,SAAD,CAAU,UAAU,SAAW,CAAA,EAAG,GAAG,GAAS,KAE3I,EAAA,EAAA,KAAA,CAAC,EAAA,OAAD,CACS,MACC,OACG,UACH,OACN,UAAW,EAAA,GACP,4KACA,CACJ,EACA,GAAI,WATR,CAWK,EACA,CACG,GAGpB,EAEA,EAAiB,YAAc"}

package/dist/components/ui/generate-ai-button.d.ts

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+interface GenerateAiButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    label?: string;
+    variant?: "destructive" | "outline" | "secondary" | "default" | "link" | "ghost" | null;
+    size?: "default" | "sm" | "lg" | "xs" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null;
+    type?: "button" | "submit" | "reset" | undefined;
+    icon?: React.ReactNode;
+}
+export declare const GenerateAiButton: React.ForwardRefExoticComponent<GenerateAiButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export {};

package/dist/components/ui/generate-ai-button.es.js

@@ -0,0 +1,20 @@
+import { cn as e } from "../../node_modules/.bun/cnfast@0.0.8/node_modules/cnfast/dist/index.es.js";
+import { Button as t } from "./button.es.js";
+import { Sparkles as n } from "lucide-react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import a from "react";
+//#region src/components/ui/generate-ai-button.tsx
+var o = a.forwardRef(({ className: a, label: o = "Auto-Fill with AI", variant: s = "outline", size: c = "lg", type: l = "button", icon: u = /* @__PURE__ */ r(n, { className: "w-4 h-4" }), ...d }, f) => /* @__PURE__ */ i(t, {
+	ref: f,
+	type: l,
+	variant: s,
+	size: c,
+	className: e("w-full bg-primary/10 cursor-pointer text-primary rounded-full text-xs md:text-sm font-medium transition-all hover:bg-primary/10 hover:text-primary border-primary/20 mb-6", a),
+	...d,
+	children: [u, o]
+}));
+o.displayName = "GenerateAiButton";
+//#endregion
+export { o as GenerateAiButton };
+
+//# sourceMappingURL=generate-ai-button.es.js.map

package/dist/components/ui/generate-ai-button.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"generate-ai-button.es.js","names":[],"sources":["../../../src/components/ui/generate-ai-button.tsx"],"sourcesContent":["import React from 'react';\nimport { Button } from \"./button\";\nimport { Sparkles } from \"lucide-react\";\nimport { cn } from \"../../lib/utils\";\n\ninterface GenerateAiButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n    label?: string;\n    variant?: \"destructive\" | \"outline\" | \"secondary\" | \"default\" | \"link\" | \"ghost\" | null;\n    size?: \"default\" | \"sm\" | \"lg\" | \"xs\" | \"icon\" | \"icon-xs\" | \"icon-sm\" | \"icon-lg\" | null;\n    type?: \"button\" | \"submit\" | \"reset\" | undefined;\n    icon?: React.ReactNode;\n}\n\nexport const GenerateAiButton = React.forwardRef<HTMLButtonElement, GenerateAiButtonProps>(\n    ({ className, label = \"Auto-Fill with AI\", variant = \"outline\", size = \"lg\", type = \"button\", icon = <Sparkles className=\"w-4 h-4\" />, ...props }, ref) => {\n        return (\n            <Button\n                ref={ref}\n                type={type}\n                variant={variant}\n                size={size}\n                className={cn(\n                    \"w-full bg-primary/10 cursor-pointer text-primary rounded-full text-xs md:text-sm font-medium transition-all hover:bg-primary/10 hover:text-primary border-primary/20 mb-6\",\n                    className\n                )}\n                {...props}\n            >\n                {icon}\n                {label}\n            </Button>\n        );\n    }\n);\n\nGenerateAiButton.displayName = \"GenerateAiButton\";\n"],"mappings":";;;;;;AAaA,IAAa,IAAmB,EAAM,YACjC,EAAE,cAAW,WAAQ,qBAAqB,aAAU,WAAW,UAAO,MAAM,UAAO,UAAU,UAAO,kBAAC,GAAD,EAAU,WAAU,UAAW,CAAA,GAAG,GAAG,KAAS,MAE3I,kBAAC,GAAD;CACS;CACC;CACG;CACH;CACN,WAAW,EACP,6KACA,CACJ;CACA,GAAI;WATR,CAWK,GACA,CACG;EAGpB;AAEA,EAAiB,cAAc"}

package/dist/components/ui/hover-card.cjs.js

@@ -0,0 +1,2 @@
+"use client";require("../../_virtual/_rolldown/runtime.cjs.js");const e=require("../../node_modules/.bun/cnfast@0.0.8/node_modules/cnfast/dist/index.cjs.js");let t=require("react/jsx-runtime"),n=require("@base-ui/react/preview-card");function r({...e}){return(0,t.jsx)(n.PreviewCard.Root,{"data-slot":`hover-card`,...e})}function i({...e}){return(0,t.jsx)(n.PreviewCard.Trigger,{"data-slot":`hover-card-trigger`,...e})}function a({className:r,side:i=`bottom`,sideOffset:a=4,align:o=`center`,alignOffset:s=4,...c}){return(0,t.jsx)(n.PreviewCard.Portal,{"data-slot":`hover-card-portal`,children:(0,t.jsx)(n.PreviewCard.Positioner,{align:o,alignOffset:s,side:i,sideOffset:a,className:`isolate z-50`,children:(0,t.jsx)(n.PreviewCard.Popup,{"data-slot":`hover-card-content`,className:e.cn(`z-50 w-64 origin-(--transform-origin) rounded-lg bg-popover p-2.5 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95`,r),...c})})})}exports.HoverCard=r,exports.HoverCardContent=a,exports.HoverCardTrigger=i;
+//# sourceMappingURL=hover-card.cjs.js.map

package/dist/components/ui/hover-card.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hover-card.cjs.js","names":[],"sources":["../../../src/components/ui/hover-card.tsx"],"sourcesContent":["\"use client\"\n\nimport { PreviewCard as PreviewCardPrimitive } from \"@base-ui/react/preview-card\"\n\nimport { cn } from \"../../lib/utils\"\n\nfunction HoverCard({ ...props }: PreviewCardPrimitive.Root.Props) {\n  return <PreviewCardPrimitive.Root data-slot=\"hover-card\" {...props} />\n}\n\nfunction HoverCardTrigger({ ...props }: PreviewCardPrimitive.Trigger.Props) {\n  return (\n    <PreviewCardPrimitive.Trigger data-slot=\"hover-card-trigger\" {...props} />\n  )\n}\n\nfunction HoverCardContent({\n  className,\n  side = \"bottom\",\n  sideOffset = 4,\n  align = \"center\",\n  alignOffset = 4,\n  ...props\n}: PreviewCardPrimitive.Popup.Props &\n  Pick<\n    PreviewCardPrimitive.Positioner.Props,\n    \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\"\n  >) {\n  return (\n    <PreviewCardPrimitive.Portal data-slot=\"hover-card-portal\">\n      <PreviewCardPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n        className=\"isolate z-50\"\n      >\n        <PreviewCardPrimitive.Popup\n          data-slot=\"hover-card-content\"\n          className={cn(\n            \"z-50 w-64 origin-(--transform-origin) rounded-lg bg-popover p-2.5 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n            className\n          )}\n          {...props}\n        />\n      </PreviewCardPrimitive.Positioner>\n    </PreviewCardPrimitive.Portal>\n  )\n}\n\nexport { HoverCard, HoverCardTrigger, HoverCardContent }\n"],"mappings":"0OAMA,SAAS,EAAU,CAAE,GAAG,GAA0C,CAChE,OAAO,EAAA,EAAA,IAAA,CAAC,EAAA,YAAqB,KAAtB,CAA2B,YAAU,aAAa,GAAI,CAAQ,CAAA,CACvE,CAEA,SAAS,EAAiB,CAAE,GAAG,GAA6C,CAC1E,OACE,EAAA,EAAA,IAAA,CAAC,EAAA,YAAqB,QAAtB,CAA8B,YAAU,qBAAqB,GAAI,CAAQ,CAAA,CAE7E,CAEA,SAAS,EAAiB,CACxB,YACA,OAAO,SACP,aAAa,EACb,QAAQ,SACR,cAAc,EACd,GAAG,GAKA,CACH,OACE,EAAA,EAAA,IAAA,CAAC,EAAA,YAAqB,OAAtB,CAA6B,YAAU,8BACrC,EAAA,EAAA,IAAA,CAAC,EAAA,YAAqB,WAAtB,CACS,QACM,cACP,OACM,aACZ,UAAU,yBAEV,EAAA,EAAA,IAAA,CAAC,EAAA,YAAqB,MAAtB,CACE,YAAU,qBACV,UAAW,EAAA,GACT,giBACA,CACF,EACA,GAAI,CACL,CAAA,CAC8B,CAAA,CACN,CAAA,CAEjC"}

package/dist/components/ui/hover-card.d.ts

@@ -1,4 +1,4 @@
-import { PreviewCard as PreviewCardPrimitive } from "@base-ui/react/preview-card";
+import { PreviewCard as PreviewCardPrimitive } from '@base-ui/react/preview-card';
 declare function HoverCard({ ...props }: PreviewCardPrimitive.Root.Props): import("react").JSX.Element;
 declare function HoverCardTrigger({ ...props }: PreviewCardPrimitive.Trigger.Props): import("react").JSX.Element;
 declare function HoverCardContent({ className, side, sideOffset, align, alignOffset, ...props }: PreviewCardPrimitive.Popup.Props & Pick<PreviewCardPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset">): import("react").JSX.Element;

package/dist/components/ui/hover-card.es.js

@@ -0,0 +1,38 @@
+"use client";
+import { cn as e } from "../../node_modules/.bun/cnfast@0.0.8/node_modules/cnfast/dist/index.es.js";
+import { jsx as t } from "react/jsx-runtime";
+import { PreviewCard as n } from "@base-ui/react/preview-card";
+//#region src/components/ui/hover-card.tsx
+function r({ ...e }) {
+	return /* @__PURE__ */ t(n.Root, {
+		"data-slot": "hover-card",
+		...e
+	});
+}
+function i({ ...e }) {
+	return /* @__PURE__ */ t(n.Trigger, {
+		"data-slot": "hover-card-trigger",
+		...e
+	});
+}
+function a({ className: r, side: i = "bottom", sideOffset: a = 4, align: o = "center", alignOffset: s = 4, ...c }) {
+	return /* @__PURE__ */ t(n.Portal, {
+		"data-slot": "hover-card-portal",
+		children: /* @__PURE__ */ t(n.Positioner, {
+			align: o,
+			alignOffset: s,
+			side: i,
+			sideOffset: a,
+			className: "isolate z-50",
+			children: /* @__PURE__ */ t(n.Popup, {
+				"data-slot": "hover-card-content",
+				className: e("z-50 w-64 origin-(--transform-origin) rounded-lg bg-popover p-2.5 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", r),
+				...c
+			})
+		})
+	});
+}
+//#endregion
+export { r as HoverCard, a as HoverCardContent, i as HoverCardTrigger };
+
+//# sourceMappingURL=hover-card.es.js.map

package/dist/components/ui/hover-card.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hover-card.es.js","names":[],"sources":["../../../src/components/ui/hover-card.tsx"],"sourcesContent":["\"use client\"\n\nimport { PreviewCard as PreviewCardPrimitive } from \"@base-ui/react/preview-card\"\n\nimport { cn } from \"../../lib/utils\"\n\nfunction HoverCard({ ...props }: PreviewCardPrimitive.Root.Props) {\n  return <PreviewCardPrimitive.Root data-slot=\"hover-card\" {...props} />\n}\n\nfunction HoverCardTrigger({ ...props }: PreviewCardPrimitive.Trigger.Props) {\n  return (\n    <PreviewCardPrimitive.Trigger data-slot=\"hover-card-trigger\" {...props} />\n  )\n}\n\nfunction HoverCardContent({\n  className,\n  side = \"bottom\",\n  sideOffset = 4,\n  align = \"center\",\n  alignOffset = 4,\n  ...props\n}: PreviewCardPrimitive.Popup.Props &\n  Pick<\n    PreviewCardPrimitive.Positioner.Props,\n    \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\"\n  >) {\n  return (\n    <PreviewCardPrimitive.Portal data-slot=\"hover-card-portal\">\n      <PreviewCardPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n        className=\"isolate z-50\"\n      >\n        <PreviewCardPrimitive.Popup\n          data-slot=\"hover-card-content\"\n          className={cn(\n            \"z-50 w-64 origin-(--transform-origin) rounded-lg bg-popover p-2.5 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n            className\n          )}\n          {...props}\n        />\n      </PreviewCardPrimitive.Positioner>\n    </PreviewCardPrimitive.Portal>\n  )\n}\n\nexport { HoverCard, HoverCardTrigger, HoverCardContent }\n"],"mappings":";;;;;AAMA,SAAS,EAAU,EAAE,GAAG,KAA0C;CAChE,OAAO,kBAAC,EAAqB,MAAtB;EAA2B,aAAU;EAAa,GAAI;CAAQ,CAAA;AACvE;AAEA,SAAS,EAAiB,EAAE,GAAG,KAA6C;CAC1E,OACE,kBAAC,EAAqB,SAAtB;EAA8B,aAAU;EAAqB,GAAI;CAAQ,CAAA;AAE7E;AAEA,SAAS,EAAiB,EACxB,cACA,UAAO,UACP,gBAAa,GACb,WAAQ,UACR,iBAAc,GACd,GAAG,KAKA;CACH,OACE,kBAAC,EAAqB,QAAtB;EAA6B,aAAU;YACrC,kBAAC,EAAqB,YAAtB;GACS;GACM;GACP;GACM;GACZ,WAAU;aAEV,kBAAC,EAAqB,OAAtB;IACE,aAAU;IACV,WAAW,EACT,iiBACA,CACF;IACA,GAAI;GACL,CAAA;EAC8B,CAAA;CACN,CAAA;AAEjC"}

package/dist/components/ui/image-cropper.cjs.js

@@ -0,0 +1,2 @@
+require("../../_virtual/_rolldown/runtime.cjs.js");const e=require("../../node_modules/.bun/cnfast@0.0.8/node_modules/cnfast/dist/index.cjs.js"),t=require("./button.cjs.js"),n=require("./slider.cjs.js"),r=require("../../node_modules/.bun/react-easy-crop@6.2.2_7492c01c6988791b/node_modules/react-easy-crop/index.module.cjs.js"),i=require("../../functions/cropImage.cjs.js");let a=require("lucide-react"),o=require("react/jsx-runtime"),s=require("react");function c({imageSrc:c,onCropSave:l,onCancel:u,aspect:d=1,title:f=`Crop Image`,classNames:p,cropHeight:m=`350px`}){let[h,g]=(0,s.useState)({x:0,y:0}),[_,v]=(0,s.useState)(1),[y,b]=(0,s.useState)(0),[x,S]=(0,s.useState)(null),[C,w]=(0,s.useState)(!1),[T,E]=(0,s.useState)(null),D=(0,s.useId)(),O=`${D}-zoom-label`,k=`${D}-rotation-label`,A=(0,s.useCallback)((e,t)=>{S(t)},[]);return(0,o.jsxs)(`div`,{className:e.cn(`flex flex-col gap-4 w-full`,p?.root),children:[(0,o.jsx)(`h2`,{className:`sr-only`,children:f}),(0,o.jsxs)(`div`,{className:e.cn(`w-full bg-neutral-950 rounded-3xl overflow-hidden shadow-2xl border border-neutral-800 relative`,p?.cropArea),style:{height:m},children:[(0,o.jsx)(`div`,{className:e.cn(`absolute inset-0 w-full h-full scale-125 blur-2xl opacity-20 pointer-events-none`,p?.ambientBackground),children:(0,o.jsx)(`img`,{src:c,alt:``,className:`w-full h-full object-cover`})}),(0,o.jsx)(r.default,{image:c,crop:h,zoom:_,rotation:y,aspect:d,onCropChange:g,onCropComplete:A,onZoomChange:v,onRotationChange:b,classes:{containerClassName:`z-10`}})]}),(0,o.jsxs)(`div`,{className:e.cn(`space-y-4 px-1`,p?.controls),children:[(0,o.jsxs)(`div`,{className:e.cn(`space-y-3`,p?.sliderRow),children:[(0,o.jsxs)(`div`,{className:`flex items-center justify-between`,children:[(0,o.jsxs)(`label`,{id:O,className:`flex items-center gap-2 text-sm font-medium text-muted-foreground`,children:[(0,o.jsx)(a.ZoomIn,{className:`w-4 h-4`,"aria-hidden":!0}),(0,o.jsx)(`span`,{children:`Zoom`})]}),(0,o.jsxs)(`span`,{className:`text-xs font-mono bg-secondary px-2 py-1 rounded-md`,children:[Math.round(_*100),`%`]})]}),(0,o.jsx)(n.Slider,{value:[_],min:1,max:3,step:.1,onValueChange:e=>{let t=Array.isArray(e)?e[0]:e;v(t)},"aria-labelledby":O,className:`py-2`})]}),(0,o.jsxs)(`div`,{className:e.cn(`space-y-3`,p?.sliderRow),children:[(0,o.jsxs)(`div`,{className:`flex items-center justify-between`,children:[(0,o.jsxs)(`label`,{id:k,className:`flex items-center gap-2 text-sm font-medium text-muted-foreground`,children:[(0,o.jsx)(a.RotateCw,{className:`w-4 h-4`,"aria-hidden":!0}),(0,o.jsx)(`span`,{children:`Rotation`})]}),(0,o.jsxs)(`span`,{className:`text-xs font-mono bg-secondary px-2 py-1 rounded-md`,children:[y,`°`]})]}),(0,o.jsx)(n.Slider,{value:[y],min:0,max:360,step:1,onValueChange:e=>{let t=Array.isArray(e)?e[0]:e;b(t)},"aria-labelledby":k,className:`py-1`})]}),T&&(0,o.jsx)(`p`,{className:`text-sm text-destructive`,role:`alert`,children:T}),(0,o.jsxs)(`div`,{className:e.cn(`flex justify-end gap-2 pt-2`,p?.actions),children:[(0,o.jsxs)(t.Button,{type:`button`,variant:`ghost`,onClick:u,disabled:C,className:`rounded-full gap-2`,children:[(0,o.jsx)(a.X,{className:`w-4 h-4`,"aria-hidden":!0}),`Cancel`]}),(0,o.jsxs)(t.Button,{type:`button`,onClick:async()=>{if(!(!c||!x))try{w(!0),E(null);let e=await i.default(c,x,y);e&&l(e)}catch(e){console.error(`Failed to crop image:`,e),E(`Failed to crop image. Please try again.`)}finally{w(!1)}},disabled:C||!x,className:`rounded-full gap-2 px-6`,children:[C?(0,o.jsx)(a.Loader2,{className:`w-4 h-4 animate-spin`,"aria-hidden":!0}):(0,o.jsx)(a.Check,{className:`w-4 h-4`,"aria-hidden":!0}),C?`Saving…`:`Apply Crop`]})]})]})]})}exports.ImageCropper=c;
+//# sourceMappingURL=image-cropper.cjs.js.map

package/dist/components/ui/image-cropper.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-cropper.cjs.js","names":[],"sources":["../../../src/components/ui/image-cropper.tsx"],"sourcesContent":["import { useState, useCallback, useId } from \"react\";\nimport Cropper from \"react-easy-crop\";\nimport { ZoomIn, RotateCw, Check, X, Loader2 } from \"lucide-react\";\nimport { Button } from \"./button\";\nimport { Slider } from \"./slider\";\nimport getCroppedImg from \"../../functions/cropImage\";\nimport { cn } from \"../../lib/utils\";\n\nexport interface ImageCropperClassNames {\n    root?: string;\n    cropArea?: string;\n    ambientBackground?: string;\n    controls?: string;\n    sliderRow?: string;\n    actions?: string;\n}\n\ninterface ImageCropperProps {\n    imageSrc: string;\n    onCropSave: (croppedFile: File) => void;\n    onCancel: () => void;\n    aspect?: number;\n    title?: string;\n    classNames?: ImageCropperClassNames;\n    cropHeight?: string;\n}\n\nexport function ImageCropper({\n    imageSrc,\n    onCropSave,\n    onCancel,\n    aspect = 1,\n    title = \"Crop Image\",\n    classNames,\n    cropHeight = \"350px\",\n}: ImageCropperProps) {\n    const [crop, setCrop] = useState({ x: 0, y: 0 });\n    const [zoom, setZoom] = useState(1);\n    const [rotation, setRotation] = useState(0);\n    const [croppedAreaPixels, setCroppedAreaPixels] = useState<any>(null);\n    const [saving, setSaving] = useState(false);\n    const [error, setError] = useState<string | null>(null);\n    const id = useId();\n    const zoomLabelId = `${id}-zoom-label`;\n    const rotationLabelId = `${id}-rotation-label`;\n\n    const onCropComplete = useCallback(\n        (_croppedArea: any, croppedAreaPixels: any) => {\n            setCroppedAreaPixels(croppedAreaPixels);\n        },\n        []\n    );\n\n    const handleSave = async () => {\n        if (!imageSrc || !croppedAreaPixels) return;\n        try {\n            setSaving(true);\n            setError(null);\n            const croppedImage = await getCroppedImg(\n                imageSrc,\n                croppedAreaPixels,\n                rotation\n            );\n            if (croppedImage) {\n                onCropSave(croppedImage);\n            }\n        } catch (e) {\n            console.error(\"Failed to crop image:\", e);\n            setError(\"Failed to crop image. Please try again.\");\n        } finally {\n            setSaving(false);\n        }\n    };\n\n    return (\n        <div className={cn(\"flex flex-col gap-4 w-full\", classNames?.root)}>\n            {/* Heading for screen readers */}\n            <h2 className=\"sr-only\">{title}</h2>\n\n            <div\n                className={cn(\n                    \"w-full bg-neutral-950 rounded-3xl overflow-hidden shadow-2xl border border-neutral-800 relative\",\n                    classNames?.cropArea\n                )}\n                style={{ height: cropHeight }}\n            >\n                {/* Ambient Background layer */}\n                <div\n                    className={cn(\n                        \"absolute inset-0 w-full h-full scale-125 blur-2xl opacity-20 pointer-events-none\",\n                        classNames?.ambientBackground\n                    )}\n                >\n                    <img\n                        src={imageSrc}\n                        alt=\"\"\n                        className=\"w-full h-full object-cover\"\n                    />\n                </div>\n\n                <Cropper\n                    image={imageSrc}\n                    crop={crop}\n                    zoom={zoom}\n                    rotation={rotation}\n                    aspect={aspect}\n                    onCropChange={setCrop}\n                    onCropComplete={onCropComplete}\n                    onZoomChange={setZoom}\n                    onRotationChange={setRotation}\n                    classes={{ containerClassName: \"z-10\" }}\n                />\n            </div>\n\n            <div className={cn(\"space-y-4 px-1\", classNames?.controls)}>\n                {/* Zoom */}\n                <div className={cn(\"space-y-3\", classNames?.sliderRow)}>\n                    <div className=\"flex items-center justify-between\">\n                        <label\n                            id={zoomLabelId}\n                            className=\"flex items-center gap-2 text-sm font-medium text-muted-foreground\"\n                        >\n                            <ZoomIn className=\"w-4 h-4\" aria-hidden />\n                            <span>Zoom</span>\n                        </label>\n                        <span className=\"text-xs font-mono bg-secondary px-2 py-1 rounded-md\">\n                            {Math.round(zoom * 100)}%\n                        </span>\n                    </div>\n                    <Slider\n                        value={[zoom]}\n                        min={1}\n                        max={3}\n                        step={0.1}\n                        onValueChange={(value) => {\n                            const newValue = Array.isArray(value) ? value[0] : value;\n                            setZoom(newValue);\n                        }}\n                        aria-labelledby={zoomLabelId}\n                        className=\"py-2\"\n                    />\n                </div>\n\n                {/* Rotation */}\n                <div className={cn(\"space-y-3\", classNames?.sliderRow)}>\n                    <div className=\"flex items-center justify-between\">\n                        <label\n                            id={rotationLabelId}\n                            className=\"flex items-center gap-2 text-sm font-medium text-muted-foreground\"\n                        >\n                            <RotateCw className=\"w-4 h-4\" aria-hidden />\n                            <span>Rotation</span>\n                        </label>\n                        <span className=\"text-xs font-mono bg-secondary px-2 py-1 rounded-md\">\n                            {rotation}°\n                        </span>\n                    </div>\n                    <Slider\n                        value={[rotation]}\n                        min={0}\n                        max={360}\n                        step={1}\n                        onValueChange={(value) => {\n                            const newValue = Array.isArray(value) ? value[0] : value;\n                            setRotation(newValue);\n                        }}\n                        aria-labelledby={rotationLabelId}\n                        className=\"py-1\"\n                    />\n                </div>\n\n                {error && (\n                    <p className=\"text-sm text-destructive\" role=\"alert\">\n                        {error}\n                    </p>\n                )}\n\n                <div className={cn(\"flex justify-end gap-2 pt-2\", classNames?.actions)}>\n                    <Button\n                        type=\"button\"\n                        variant=\"ghost\"\n                        onClick={onCancel}\n                        disabled={saving}\n                        className=\"rounded-full gap-2\"\n                    >\n                        <X className=\"w-4 h-4\" aria-hidden />\n                        Cancel\n                    </Button>\n                    <Button\n                        type=\"button\"\n                        onClick={handleSave}\n                        disabled={saving || !croppedAreaPixels}\n                        className=\"rounded-full gap-2 px-6\"\n                    >\n                        {saving ? (\n                            <Loader2 className=\"w-4 h-4 animate-spin\" aria-hidden />\n                        ) : (\n                            <Check className=\"w-4 h-4\" aria-hidden />\n                        )}\n                        {saving ? \"Saving…\" : \"Apply Crop\"}\n                    </Button>\n                </div>\n            </div>\n        </div>\n    );\n}"],"mappings":"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"}

package/dist/components/ui/image-cropper.d.ts

@@ -0,0 +1,19 @@
+export interface ImageCropperClassNames {
+    root?: string;
+    cropArea?: string;
+    ambientBackground?: string;
+    controls?: string;
+    sliderRow?: string;
+    actions?: string;
+}
+interface ImageCropperProps {
+    imageSrc: string;
+    onCropSave: (croppedFile: File) => void;
+    onCancel: () => void;
+    aspect?: number;
+    title?: string;
+    classNames?: ImageCropperClassNames;
+    cropHeight?: string;
+}
+export declare function ImageCropper({ imageSrc, onCropSave, onCancel, aspect, title, classNames, cropHeight, }: ImageCropperProps): import("react").JSX.Element;
+export {};

package/dist/components/ui/image-cropper.es.js

@@ -0,0 +1,155 @@
+import { cn as e } from "../../node_modules/.bun/cnfast@0.0.8/node_modules/cnfast/dist/index.es.js";
+import { Button as t } from "./button.es.js";
+import { Slider as n } from "./slider.es.js";
+import r from "../../node_modules/.bun/react-easy-crop@6.2.2_7492c01c6988791b/node_modules/react-easy-crop/index.module.es.js";
+import i from "../../functions/cropImage.es.js";
+import { Check as a, Loader2 as o, RotateCw as s, X as c, ZoomIn as l } from "lucide-react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import { useCallback as f, useId as p, useState as m } from "react";
+//#region src/components/ui/image-cropper.tsx
+function h({ imageSrc: h, onCropSave: g, onCancel: _, aspect: v = 1, title: y = "Crop Image", classNames: b, cropHeight: x = "350px" }) {
+	let [S, C] = m({
+		x: 0,
+		y: 0
+	}), [w, T] = m(1), [E, D] = m(0), [O, k] = m(null), [A, j] = m(!1), [M, N] = m(null), P = p(), F = `${P}-zoom-label`, I = `${P}-rotation-label`, L = f((e, t) => {
+		k(t);
+	}, []);
+	return /* @__PURE__ */ d("div", {
+		className: e("flex flex-col gap-4 w-full", b?.root),
+		children: [
+			/* @__PURE__ */ u("h2", {
+				className: "sr-only",
+				children: y
+			}),
+			/* @__PURE__ */ d("div", {
+				className: e("w-full bg-neutral-950 rounded-3xl overflow-hidden shadow-2xl border border-neutral-800 relative", b?.cropArea),
+				style: { height: x },
+				children: [/* @__PURE__ */ u("div", {
+					className: e("absolute inset-0 w-full h-full scale-125 blur-2xl opacity-20 pointer-events-none", b?.ambientBackground),
+					children: /* @__PURE__ */ u("img", {
+						src: h,
+						alt: "",
+						className: "w-full h-full object-cover"
+					})
+				}), /* @__PURE__ */ u(r, {
+					image: h,
+					crop: S,
+					zoom: w,
+					rotation: E,
+					aspect: v,
+					onCropChange: C,
+					onCropComplete: L,
+					onZoomChange: T,
+					onRotationChange: D,
+					classes: { containerClassName: "z-10" }
+				})]
+			}),
+			/* @__PURE__ */ d("div", {
+				className: e("space-y-4 px-1", b?.controls),
+				children: [
+					/* @__PURE__ */ d("div", {
+						className: e("space-y-3", b?.sliderRow),
+						children: [/* @__PURE__ */ d("div", {
+							className: "flex items-center justify-between",
+							children: [/* @__PURE__ */ d("label", {
+								id: F,
+								className: "flex items-center gap-2 text-sm font-medium text-muted-foreground",
+								children: [/* @__PURE__ */ u(l, {
+									className: "w-4 h-4",
+									"aria-hidden": !0
+								}), /* @__PURE__ */ u("span", { children: "Zoom" })]
+							}), /* @__PURE__ */ d("span", {
+								className: "text-xs font-mono bg-secondary px-2 py-1 rounded-md",
+								children: [Math.round(w * 100), "%"]
+							})]
+						}), /* @__PURE__ */ u(n, {
+							value: [w],
+							min: 1,
+							max: 3,
+							step: .1,
+							onValueChange: (e) => {
+								let t = Array.isArray(e) ? e[0] : e;
+								T(t);
+							},
+							"aria-labelledby": F,
+							className: "py-2"
+						})]
+					}),
+					/* @__PURE__ */ d("div", {
+						className: e("space-y-3", b?.sliderRow),
+						children: [/* @__PURE__ */ d("div", {
+							className: "flex items-center justify-between",
+							children: [/* @__PURE__ */ d("label", {
+								id: I,
+								className: "flex items-center gap-2 text-sm font-medium text-muted-foreground",
+								children: [/* @__PURE__ */ u(s, {
+									className: "w-4 h-4",
+									"aria-hidden": !0
+								}), /* @__PURE__ */ u("span", { children: "Rotation" })]
+							}), /* @__PURE__ */ d("span", {
+								className: "text-xs font-mono bg-secondary px-2 py-1 rounded-md",
+								children: [E, "°"]
+							})]
+						}), /* @__PURE__ */ u(n, {
+							value: [E],
+							min: 0,
+							max: 360,
+							step: 1,
+							onValueChange: (e) => {
+								let t = Array.isArray(e) ? e[0] : e;
+								D(t);
+							},
+							"aria-labelledby": I,
+							className: "py-1"
+						})]
+					}),
+					M && /* @__PURE__ */ u("p", {
+						className: "text-sm text-destructive",
+						role: "alert",
+						children: M
+					}),
+					/* @__PURE__ */ d("div", {
+						className: e("flex justify-end gap-2 pt-2", b?.actions),
+						children: [/* @__PURE__ */ d(t, {
+							type: "button",
+							variant: "ghost",
+							onClick: _,
+							disabled: A,
+							className: "rounded-full gap-2",
+							children: [/* @__PURE__ */ u(c, {
+								className: "w-4 h-4",
+								"aria-hidden": !0
+							}), "Cancel"]
+						}), /* @__PURE__ */ d(t, {
+							type: "button",
+							onClick: async () => {
+								if (!(!h || !O)) try {
+									j(!0), N(null);
+									let e = await i(h, O, E);
+									e && g(e);
+								} catch (e) {
+									console.error("Failed to crop image:", e), N("Failed to crop image. Please try again.");
+								} finally {
+									j(!1);
+								}
+							},
+							disabled: A || !O,
+							className: "rounded-full gap-2 px-6",
+							children: [A ? /* @__PURE__ */ u(o, {
+								className: "w-4 h-4 animate-spin",
+								"aria-hidden": !0
+							}) : /* @__PURE__ */ u(a, {
+								className: "w-4 h-4",
+								"aria-hidden": !0
+							}), A ? "Saving…" : "Apply Crop"]
+						})]
+					})
+				]
+			})
+		]
+	});
+}
+//#endregion
+export { h as ImageCropper };
+
+//# sourceMappingURL=image-cropper.es.js.map

package/dist/components/ui/image-cropper.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-cropper.es.js","names":[],"sources":["../../../src/components/ui/image-cropper.tsx"],"sourcesContent":["import { useState, useCallback, useId } from \"react\";\nimport Cropper from \"react-easy-crop\";\nimport { ZoomIn, RotateCw, Check, X, Loader2 } from \"lucide-react\";\nimport { Button } from \"./button\";\nimport { Slider } from \"./slider\";\nimport getCroppedImg from \"../../functions/cropImage\";\nimport { cn } from \"../../lib/utils\";\n\nexport interface ImageCropperClassNames {\n    root?: string;\n    cropArea?: string;\n    ambientBackground?: string;\n    controls?: string;\n    sliderRow?: string;\n    actions?: string;\n}\n\ninterface ImageCropperProps {\n    imageSrc: string;\n    onCropSave: (croppedFile: File) => void;\n    onCancel: () => void;\n    aspect?: number;\n    title?: string;\n    classNames?: ImageCropperClassNames;\n    cropHeight?: string;\n}\n\nexport function ImageCropper({\n    imageSrc,\n    onCropSave,\n    onCancel,\n    aspect = 1,\n    title = \"Crop Image\",\n    classNames,\n    cropHeight = \"350px\",\n}: ImageCropperProps) {\n    const [crop, setCrop] = useState({ x: 0, y: 0 });\n    const [zoom, setZoom] = useState(1);\n    const [rotation, setRotation] = useState(0);\n    const [croppedAreaPixels, setCroppedAreaPixels] = useState<any>(null);\n    const [saving, setSaving] = useState(false);\n    const [error, setError] = useState<string | null>(null);\n    const id = useId();\n    const zoomLabelId = `${id}-zoom-label`;\n    const rotationLabelId = `${id}-rotation-label`;\n\n    const onCropComplete = useCallback(\n        (_croppedArea: any, croppedAreaPixels: any) => {\n            setCroppedAreaPixels(croppedAreaPixels);\n        },\n        []\n    );\n\n    const handleSave = async () => {\n        if (!imageSrc || !croppedAreaPixels) return;\n        try {\n            setSaving(true);\n            setError(null);\n            const croppedImage = await getCroppedImg(\n                imageSrc,\n                croppedAreaPixels,\n                rotation\n            );\n            if (croppedImage) {\n                onCropSave(croppedImage);\n            }\n        } catch (e) {\n            console.error(\"Failed to crop image:\", e);\n            setError(\"Failed to crop image. Please try again.\");\n        } finally {\n            setSaving(false);\n        }\n    };\n\n    return (\n        <div className={cn(\"flex flex-col gap-4 w-full\", classNames?.root)}>\n            {/* Heading for screen readers */}\n            <h2 className=\"sr-only\">{title}</h2>\n\n            <div\n                className={cn(\n                    \"w-full bg-neutral-950 rounded-3xl overflow-hidden shadow-2xl border border-neutral-800 relative\",\n                    classNames?.cropArea\n                )}\n                style={{ height: cropHeight }}\n            >\n                {/* Ambient Background layer */}\n                <div\n                    className={cn(\n                        \"absolute inset-0 w-full h-full scale-125 blur-2xl opacity-20 pointer-events-none\",\n                        classNames?.ambientBackground\n                    )}\n                >\n                    <img\n                        src={imageSrc}\n                        alt=\"\"\n                        className=\"w-full h-full object-cover\"\n                    />\n                </div>\n\n                <Cropper\n                    image={imageSrc}\n                    crop={crop}\n                    zoom={zoom}\n                    rotation={rotation}\n                    aspect={aspect}\n                    onCropChange={setCrop}\n                    onCropComplete={onCropComplete}\n                    onZoomChange={setZoom}\n                    onRotationChange={setRotation}\n                    classes={{ containerClassName: \"z-10\" }}\n                />\n            </div>\n\n            <div className={cn(\"space-y-4 px-1\", classNames?.controls)}>\n                {/* Zoom */}\n                <div className={cn(\"space-y-3\", classNames?.sliderRow)}>\n                    <div className=\"flex items-center justify-between\">\n                        <label\n                            id={zoomLabelId}\n                            className=\"flex items-center gap-2 text-sm font-medium text-muted-foreground\"\n                        >\n                            <ZoomIn className=\"w-4 h-4\" aria-hidden />\n                            <span>Zoom</span>\n                        </label>\n                        <span className=\"text-xs font-mono bg-secondary px-2 py-1 rounded-md\">\n                            {Math.round(zoom * 100)}%\n                        </span>\n                    </div>\n                    <Slider\n                        value={[zoom]}\n                        min={1}\n                        max={3}\n                        step={0.1}\n                        onValueChange={(value) => {\n                            const newValue = Array.isArray(value) ? value[0] : value;\n                            setZoom(newValue);\n                        }}\n                        aria-labelledby={zoomLabelId}\n                        className=\"py-2\"\n                    />\n                </div>\n\n                {/* Rotation */}\n                <div className={cn(\"space-y-3\", classNames?.sliderRow)}>\n                    <div className=\"flex items-center justify-between\">\n                        <label\n                            id={rotationLabelId}\n                            className=\"flex items-center gap-2 text-sm font-medium text-muted-foreground\"\n                        >\n                            <RotateCw className=\"w-4 h-4\" aria-hidden />\n                            <span>Rotation</span>\n                        </label>\n                        <span className=\"text-xs font-mono bg-secondary px-2 py-1 rounded-md\">\n                            {rotation}°\n                        </span>\n                    </div>\n                    <Slider\n                        value={[rotation]}\n                        min={0}\n                        max={360}\n                        step={1}\n                        onValueChange={(value) => {\n                            const newValue = Array.isArray(value) ? value[0] : value;\n                            setRotation(newValue);\n                        }}\n                        aria-labelledby={rotationLabelId}\n                        className=\"py-1\"\n                    />\n                </div>\n\n                {error && (\n                    <p className=\"text-sm text-destructive\" role=\"alert\">\n                        {error}\n                    </p>\n                )}\n\n                <div className={cn(\"flex justify-end gap-2 pt-2\", classNames?.actions)}>\n                    <Button\n                        type=\"button\"\n                        variant=\"ghost\"\n                        onClick={onCancel}\n                        disabled={saving}\n                        className=\"rounded-full gap-2\"\n                    >\n                        <X className=\"w-4 h-4\" aria-hidden />\n                        Cancel\n                    </Button>\n                    <Button\n                        type=\"button\"\n                        onClick={handleSave}\n                        disabled={saving || !croppedAreaPixels}\n                        className=\"rounded-full gap-2 px-6\"\n                    >\n                        {saving ? (\n                            <Loader2 className=\"w-4 h-4 animate-spin\" aria-hidden />\n                        ) : (\n                            <Check className=\"w-4 h-4\" aria-hidden />\n                        )}\n                        {saving ? \"Saving…\" : \"Apply Crop\"}\n                    </Button>\n                </div>\n            </div>\n        </div>\n    );\n}"],"mappings":"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"}

package/dist/components/ui/image-upload.cjs.js

@@ -0,0 +1,2 @@
+"use client";const e=require("../../_virtual/_rolldown/runtime.cjs.js"),t=require("../../node_modules/.bun/cnfast@0.0.8/node_modules/cnfast/dist/index.cjs.js"),n=require("./button.cjs.js"),r=require("../../node_modules/.bun/react-dropzone@15.0.0_e14d3f224186685e/node_modules/react-dropzone/dist/es/index.cjs.js");let i=require("lucide-react"),a=require("react/jsx-runtime"),o=require("react");o=e.__toESM(o,1);function s({value:e,onChange:s,onRemove:c,className:l,classNames:u,maxSize:d=5*1024*1024,alt:f=`Upload preview`,disabled:p=!1,loading:m=!1}){let[h,g]=(0,o.useState)(null),[_,v]=(0,o.useState)(null);o.default.useEffect(()=>{if(typeof e==`string`)g(e);else if(e instanceof File){let t=URL.createObjectURL(e);return g(t),()=>URL.revokeObjectURL(t)}else g(null)},[e]);let{getRootProps:y,getInputProps:b,isDragActive:x}=r.useDropzone({onDrop:(0,o.useCallback)((e,t)=>{if(v(null),t.length>0){let e=t[0];e.errors[0]?.code===`file-too-large`?v(`File is too large. Max size is ${d/(1024*1024)}MB.`):e.errors[0]?.code===`file-invalid-type`?v(`Invalid file type. Please upload PNG, JPG, WEBP, or JPEG.`):v(`Could not upload file. Please try again.`);return}let n=e[0];n&&s(n)},[s,d]),accept:{"image/*":[`.jpeg`,`.jpg`,`.png`,`.webp`]},maxFiles:1,multiple:!1,maxSize:d,disabled:p}),S=e=>{e.stopPropagation(),v(null),c(),g(null)};return(0,a.jsxs)(`div`,{className:t.cn(`w-full`,l,u?.root),children:[(0,a.jsxs)(`div`,{...y(),className:t.cn(`w-full`,u?.dropzone),children:[(0,a.jsx)(`input`,{...b()}),m?(0,a.jsxs)(`div`,{className:t.cn(`flex flex-col items-center justify-center gap-3 rounded-lg border-2 border-dashed border-muted-foreground/25 bg-muted/50 py-12 text-center`,u?.emptyState),children:[(0,a.jsx)(i.Loader2,{className:`h-8 w-8 animate-spin text-muted-foreground`}),(0,a.jsx)(`p`,{className:`text-sm text-muted-foreground`,children:`Processing image…`})]}):h?(0,a.jsxs)(`div`,{className:t.cn(`relative w-full overflow-hidden rounded-lg border border-border`,`aspect-square max-w-[400px] mx-auto sm:aspect-video sm:max-h-[200px] sm:max-w-none`,`cursor-pointer group/preview`,u?.preview),children:[(0,a.jsx)(n.Button,{type:`button`,onClick:S,variant:`destructive`,size:`icon`,"aria-label":`Remove image`,className:t.cn(`absolute right-2 top-2 z-10 rounded-full h-8 w-8 shadow-lg opacity-0 group-hover/preview:opacity-100 transition-opacity`,u?.removeButton),children:(0,a.jsx)(i.X,{className:`h-4 w-4`})}),(0,a.jsxs)(`div`,{className:t.cn(`absolute inset-0 z-5 bg-black/40 flex flex-col items-center justify-center opacity-0 group-hover/preview:opacity-100 transition-opacity`,u?.swapOverlay),children:[(0,a.jsx)(i.Upload,{className:`w-8 h-8 text-white mb-2`}),(0,a.jsx)(`span`,{className:`text-sm font-bold text-white uppercase tracking-widest`,children:`Swap Image`})]}),(0,a.jsx)(`div`,{className:`absolute inset-0 w-full h-full scale-110 blur-xl opacity-30`,children:(0,a.jsx)(`img`,{sizes:`(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw`,src:h,alt:``,className:`object-cover w-full h-full`})}),(0,a.jsx)(`div`,{className:`absolute inset-0 bg-neutral-900/40`}),(0,a.jsx)(`img`,{sizes:`(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw`,src:h,alt:f,className:t.cn(`size-full object-cover transition-all duration-300 relative z-0`,u?.previewImage)})]}):(0,a.jsx)(`div`,{className:t.cn(`relative flex cursor-pointer flex-col items-center justify-center rounded-lg border-2 border-dashed border-muted-foreground/25 bg-muted/50 p-6 sm:p-12 text-center transition hover:bg-muted/80`,x&&`border-primary bg-primary/5`,p&&`opacity-50 cursor-not-allowed`,u?.emptyState),children:(0,a.jsxs)(`div`,{className:`flex flex-col items-center gap-2 text-muted-foreground`,children:[(0,a.jsx)(`div`,{className:t.cn(`rounded-full bg-background p-4 shadow-sm border border-border`,u?.emptyIcon),children:(0,a.jsx)(i.Upload,{className:`h-6 w-6`})}),(0,a.jsxs)(`div`,{className:`flex flex-col gap-1`,children:[(0,a.jsx)(`p`,{className:`text-sm font-semibold text-foreground`,children:`Click to upload or drag and drop`}),(0,a.jsxs)(`p`,{className:`text-xs`,children:[`PNG, JPG, WEBP or JPEG (max. `,d/(1024*1024),`MB)`]})]})]})})]}),_&&(0,a.jsxs)(`div`,{role:`alert`,className:t.cn(`mt-2 flex items-center gap-2 text-sm text-destructive`,u?.error),children:[(0,a.jsx)(i.AlertCircle,{className:`h-4 w-4 shrink-0`}),(0,a.jsx)(`span`,{children:_})]})]})}exports.ImageUpload=s;
+//# sourceMappingURL=image-upload.cjs.js.map

package/dist/components/ui/image-upload.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-upload.cjs.js","names":[],"sources":["../../../src/components/ui/image-upload.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { useCallback, useState } from \"react\";\nimport { useDropzone, type FileRejection } from \"react-dropzone\";\nimport { Upload, X, AlertCircle, Loader2 } from \"lucide-react\";\nimport { Button } from \"./button\";\nimport { cn } from \"../../lib/utils\";\n\nexport interface ImageUploadClassNames {\n    root?: string;\n    dropzone?: string;\n    preview?: string;\n    previewImage?: string;\n    removeButton?: string;\n    swapOverlay?: string;\n    emptyState?: string;\n    emptyIcon?: string;\n    error?: string;\n}\n\ninterface ImageUploadProps {\n    value?: string | File;\n    onChange: (file?: File) => void;\n    onRemove: () => void;\n    className?: string;\n    classNames?: ImageUploadClassNames;\n    /** Max file size in bytes (default: 5MB) */\n    maxSize?: number;\n    /** Custom alt text for the preview image */\n    alt?: string;\n    /** Disable the upload */\n    disabled?: boolean;\n    /** Show loading spinner */\n    loading?: boolean;\n}\n\nexport function ImageUpload({\n    value,\n    onChange,\n    onRemove,\n    className,\n    classNames,\n    maxSize = 5 * 1024 * 1024, // 5MB default\n    alt = \"Upload preview\",\n    disabled = false,\n    loading = false,\n}: ImageUploadProps) {\n    const [preview, setPreview] = useState<string | null>(null);\n    const [error, setError] = useState<string | null>(null);\n\n    // Generate preview from value\n    React.useEffect(() => {\n        if (typeof value === \"string\") {\n            setPreview(value);\n        } else if (value instanceof File) {\n            const objectUrl = URL.createObjectURL(value);\n            setPreview(objectUrl);\n            return () => URL.revokeObjectURL(objectUrl);\n        } else {\n            setPreview(null);\n        }\n    }, [value]);\n\n    const onDrop = useCallback(\n        (acceptedFiles: File[], rejectedFiles: FileRejection[]) => {\n            setError(null);\n\n            if (rejectedFiles.length > 0) {\n                const rejection = rejectedFiles[0];\n                if (rejection.errors[0]?.code === \"file-too-large\") {\n                    setError(`File is too large. Max size is ${maxSize / (1024 * 1024)}MB.`);\n                } else if (rejection.errors[0]?.code === \"file-invalid-type\") {\n                    setError(\"Invalid file type. Please upload PNG, JPG, WEBP, or JPEG.\");\n                } else {\n                    setError(\"Could not upload file. Please try again.\");\n                }\n                return;\n            }\n\n            const file = acceptedFiles[0];\n            if (file) {\n                onChange(file);\n            }\n        },\n        [onChange, maxSize]\n    );\n\n    const { getRootProps, getInputProps, isDragActive } = useDropzone({\n        onDrop,\n        accept: {\n            \"image/*\": [\".jpeg\", \".jpg\", \".png\", \".webp\"],\n        },\n        maxFiles: 1,\n        multiple: false,\n        maxSize,\n        disabled,\n    });\n\n    const handleRemove = (e: React.MouseEvent) => {\n        e.stopPropagation();\n        setError(null);\n        onRemove();\n        setPreview(null);\n    };\n\n    return (\n        <div className={cn(\"w-full\", className, classNames?.root)}>\n            <div\n                {...getRootProps()}\n                className={cn(\"w-full\", classNames?.dropzone)}\n            >\n                <input {...getInputProps()} />\n\n                {loading ? (\n                    // Loading state\n                    <div\n                        className={cn(\n                            \"flex flex-col items-center justify-center gap-3 rounded-lg border-2 border-dashed border-muted-foreground/25 bg-muted/50 py-12 text-center\",\n                            classNames?.emptyState\n                        )}\n                    >\n                        <Loader2 className=\"h-8 w-8 animate-spin text-muted-foreground\" />\n                        <p className=\"text-sm text-muted-foreground\">Processing image…</p>\n                    </div>\n                ) : preview ? (\n                    // Preview state\n                    <div\n                        className={cn(\n                            \"relative w-full overflow-hidden rounded-lg border border-border\",\n                            \"aspect-square max-w-[400px] mx-auto sm:aspect-video sm:max-h-[200px] sm:max-w-none\", // sensible defaults\n                            \"cursor-pointer group/preview\",\n                            classNames?.preview\n                        )}\n                    >\n                        {/* Remove button */}\n                        <Button\n                            type=\"button\"\n                            onClick={handleRemove}\n                            variant=\"destructive\"\n                            size=\"icon\"\n                            aria-label=\"Remove image\"\n                            className={cn(\n                                \"absolute right-2 top-2 z-10 rounded-full h-8 w-8 shadow-lg opacity-0 group-hover/preview:opacity-100 transition-opacity\",\n                                classNames?.removeButton\n                            )}\n                        >\n                            <X className=\"h-4 w-4\" />\n                        </Button>\n\n                        {/* Swap overlay */}\n                        <div\n                            className={cn(\n                                \"absolute inset-0 z-5 bg-black/40 flex flex-col items-center justify-center opacity-0 group-hover/preview:opacity-100 transition-opacity\",\n                                classNames?.swapOverlay\n                            )}\n                        >\n                            <Upload className=\"w-8 h-8 text-white mb-2\" />\n                            <span className=\"text-sm font-bold text-white uppercase tracking-widest\">\n                                Swap Image\n                            </span>\n                        </div>\n\n                        {/* Ambient blurred background */}\n                        <div className=\"absolute inset-0 w-full h-full scale-110 blur-xl opacity-30\">\n                            <img\n                                sizes=\"(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw\"\n                                src={preview}\n                                alt=\"\"\n                                className=\"object-cover w-full h-full\"\n                            />\n                        </div>\n\n                        {/* Dark tint */}\n                        <div className=\"absolute inset-0 bg-neutral-900/40\" />\n\n                        {/* Main image */}\n                        <img\n                            sizes=\"(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw\"\n                            src={preview}\n                            alt={alt}\n                            className={cn(\n                                \"size-full object-cover transition-all duration-300 relative z-0\",\n                                classNames?.previewImage\n                            )}\n                        />\n                    </div>\n                ) : (\n                    // Empty state\n                    <div\n                        className={cn(\n                            \"relative flex cursor-pointer flex-col items-center justify-center rounded-lg border-2 border-dashed border-muted-foreground/25 bg-muted/50 p-6 sm:p-12 text-center transition hover:bg-muted/80\",\n                            isDragActive && \"border-primary bg-primary/5\",\n                            disabled && \"opacity-50 cursor-not-allowed\",\n                            classNames?.emptyState\n                        )}\n                    >\n                        <div className=\"flex flex-col items-center gap-2 text-muted-foreground\">\n                            <div\n                                className={cn(\n                                    \"rounded-full bg-background p-4 shadow-sm border border-border\",\n                                    classNames?.emptyIcon\n                                )}\n                            >\n                                <Upload className=\"h-6 w-6\" />\n                            </div>\n                            <div className=\"flex flex-col gap-1\">\n                                <p className=\"text-sm font-semibold text-foreground\">\n                                    Click to upload or drag and drop\n                                </p>\n                                <p className=\"text-xs\">\n                                    PNG, JPG, WEBP or JPEG (max. {maxSize / (1024 * 1024)}MB)\n                                </p>\n                            </div>\n                        </div>\n                    </div>\n                )}\n            </div>\n\n            {/* Error message */}\n            {error && (\n                <div\n                    role=\"alert\"\n                    className={cn(\n                        \"mt-2 flex items-center gap-2 text-sm text-destructive\",\n                        classNames?.error\n                    )}\n                >\n                    <AlertCircle className=\"h-4 w-4 shrink-0\" />\n                    <span>{error}</span>\n                </div>\n            )}\n        </div>\n    );\n}"],"mappings":"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"}

package/dist/components/ui/image-upload.d.ts

@@ -0,0 +1,30 @@
+import { default as React } from 'react';
+export interface ImageUploadClassNames {
+    root?: string;
+    dropzone?: string;
+    preview?: string;
+    previewImage?: string;
+    removeButton?: string;
+    swapOverlay?: string;
+    emptyState?: string;
+    emptyIcon?: string;
+    error?: string;
+}
+interface ImageUploadProps {
+    value?: string | File;
+    onChange: (file?: File) => void;
+    onRemove: () => void;
+    className?: string;
+    classNames?: ImageUploadClassNames;
+    /** Max file size in bytes (default: 5MB) */
+    maxSize?: number;
+    /** Custom alt text for the preview image */
+    alt?: string;
+    /** Disable the upload */
+    disabled?: boolean;
+    /** Show loading spinner */
+    loading?: boolean;
+}
+export declare function ImageUpload({ value, onChange, onRemove, className, classNames, maxSize, // 5MB default
+alt, disabled, loading, }: ImageUploadProps): React.JSX.Element;
+export {};