@hoardodile/ui 0.0.0

package/dist/components/icon-toggle.js

@@ -0,0 +1,81 @@
+import { clsx } from 'clsx';
+import { extendTailwindMerge } from 'tailwind-merge';
+import { jsx } from 'react/jsx-runtime';
+
+// src/lib/utils.ts
+var mergeTheme = {
+  text: ["tiny", "ui", "doc", "doc-title", "doc-heading", "quote"],
+  spacing: ["chip", "control", "nav", "sidebar", "panel"],
+  tracking: ["label"],
+  shadow: ["card", "dialog"],
+  container: ["reading", "medium", "content"],
+  font: ["doc", "heading"],
+  ease: ["standard"],
+  animate: ["skel", "pop"]
+};
+var twMerge = extendTailwindMerge({
+  extend: { theme: mergeTheme }
+});
+
+// src/lib/utils.ts
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var sizeClasses = {
+  sm: "size-3",
+  md: "size-4",
+  lg: "size-5"
+};
+function Icon({
+  icon: IconComponent,
+  mode,
+  size = "md",
+  selected,
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx(
+    IconComponent,
+    {
+      mode: mode ?? (selected === true ? "bold" : void 0),
+      className: cn("hd-icon", sizeClasses[size], className),
+      ...rest
+    }
+  );
+}
+function IconToggle(props) {
+  const { value, options, onChange, className } = props;
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        "inline-flex shrink-0 items-center gap-0.5 rounded-lg bg-muted p-0.5",
+        className
+      ),
+      children: options.map((option) => {
+        const active = option.value === value;
+        return /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            title: option.label,
+            "aria-label": option.label,
+            "aria-pressed": active,
+            "data-testid": option.testId,
+            onClick: () => onChange(option.value),
+            className: cn(
+              "flex size-7 cursor-pointer items-center justify-center rounded-md",
+              active ? "bg-card text-foreground" : "text-muted-foreground hover:text-secondary-foreground"
+            ),
+            children: /* @__PURE__ */ jsx(Icon, { icon: option.icon, selected: active, className: "size-4" })
+          },
+          option.value
+        );
+      })
+    }
+  );
+}
+
+export { IconToggle };
+//# sourceMappingURL=icon-toggle.js.map
+//# sourceMappingURL=icon-toggle.js.map

package/dist/components/icon-toggle.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/lib/merge-config.ts","../../src/lib/utils.ts","../../src/components/icon.tsx","../../src/components/icon-toggle.tsx"],"names":["jsx"],"mappings":";;;;;AAQO,IAAM,UAAA,GAAa;AAAA,EACzB,MAAM,CAAC,MAAA,EAAQ,MAAM,KAAA,EAAO,WAAA,EAAa,eAAe,OAAO,CAAA;AAAA,EAC/D,SAAS,CAAC,MAAA,EAAQ,SAAA,EAAW,KAAA,EAAO,WAAW,OAAO,CAAA;AAAA,EACtD,QAAA,EAAU,CAAC,OAAO,CAAA;AAAA,EAClB,MAAA,EAAQ,CAAC,MAAA,EAAQ,QAAQ,CAAA;AAAA,EACzB,SAAA,EAAW,CAAC,SAAA,EAAW,QAAA,EAAU,SAAS,CAAA;AAAA,EAC1C,IAAA,EAAM,CAAC,KAAA,EAAO,SAAS,CAAA;AAAA,EACvB,IAAA,EAAM,CAAC,UAAU,CAAA;AAAA,EACjB,OAAA,EAAS,CAAC,MAAA,EAAQ,KAAK;AACxB,CAAA;AAEO,IAAM,UAAU,mBAAA,CAAoB;AAAA,EAC1C,MAAA,EAAQ,EAAE,KAAA,EAAO,UAAA;AAClB,CAAC,CAAA;;;AClBM,SAAS,MAAM,MAAA,EAAsB;AAC3C,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC5B;ACQA,IAAM,WAAA,GAAc;AAAA,EACnB,EAAA,EAAI,QAAA;AAAA,EACJ,EAAA,EAAI,QAAA;AAAA,EACJ,EAAA,EAAI;AACL,CAAA;AAwBO,SAAS,IAAA,CAAK;AAAA,EACpB,IAAA,EAAM,aAAA;AAAA,EACN,IAAA;AAAA,EACA,IAAA,GAAO,IAAA;AAAA,EACP,QAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAG;AACJ,CAAA,EAS6B;AAC5B,EAAA,uBACC,GAAA;AAAA,IAAC,aAAA;AAAA,IAAA;AAAA,MACA,IAAA,EAAM,IAAA,KAAS,QAAA,KAAa,IAAA,GAAO,MAAA,GAAS,MAAA,CAAA;AAAA,MAC5C,WAAW,EAAA,CAAG,SAAA,EAAW,WAAA,CAAY,IAAI,GAAG,SAAS,CAAA;AAAA,MACpD,GAAG;AAAA;AAAA,GACL;AAEF;AC1CO,SAAS,WAA6B,KAAA,EAA2B;AACvE,EAAA,MAAM,EAAE,KAAA,EAAO,OAAA,EAAS,QAAA,EAAU,WAAU,GAAI,KAAA;AAChD,EAAA,uBACCA,GAAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACA,SAAA,EAAW,EAAA;AAAA,QACV,qEAAA;AAAA,QACA;AAAA,OACD;AAAA,MAEC,QAAA,EAAA,OAAA,CAAQ,GAAA,CAAI,CAAC,MAAA,KAAW;AACxB,QAAA,MAAM,MAAA,GAAS,OAAO,KAAA,KAAU,KAAA;AAChC,QAAA,uBACCA,GAAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACA,IAAA,EAAK,QAAA;AAAA,YAEL,OAAO,MAAA,CAAO,KAAA;AAAA,YACd,cAAY,MAAA,CAAO,KAAA;AAAA,YACnB,cAAA,EAAc,MAAA;AAAA,YACd,eAAa,MAAA,CAAO,MAAA;AAAA,YACpB,OAAA,EAAS,MAAM,QAAA,CAAS,MAAA,CAAO,KAAK,CAAA;AAAA,YACpC,SAAA,EAAW,EAAA;AAAA,cACV,mEAAA;AAAA,cACA,SACG,yBAAA,GACA;AAAA,aACJ;AAAA,YAEA,QAAA,kBAAAA,IAAC,IAAA,EAAA,EAAK,IAAA,EAAM,OAAO,IAAA,EAAM,QAAA,EAAU,MAAA,EAAQ,SAAA,EAAU,QAAA,EAAS;AAAA,WAAA;AAAA,UAbzD,MAAA,CAAO;AAAA,SAcb;AAAA,MAEF,CAAC;AAAA;AAAA,GACF;AAEF","file":"icon-toggle.js","sourcesContent":["import { extendTailwindMerge } from \"tailwind-merge\"\n\n// The app's `@theme inline` tokens (theme.css) generate utility names\n// tailwind-merge doesn't know, so it misclassifies them — e.g. `text-ui` is\n// parsed as a text color and dropped next to any `text-*` color. The default\n// class groups are theme-backed, so extending the theme (keys mirror the v4\n// token namespaces one-to-one) registers every custom utility with correct\n// conflict semantics. merge-config.test.ts pins this list against theme.css.\nexport const mergeTheme = {\n\ttext: [\"tiny\", \"ui\", \"doc\", \"doc-title\", \"doc-heading\", \"quote\"],\n\tspacing: [\"chip\", \"control\", \"nav\", \"sidebar\", \"panel\"],\n\ttracking: [\"label\"],\n\tshadow: [\"card\", \"dialog\"],\n\tcontainer: [\"reading\", \"medium\", \"content\"],\n\tfont: [\"doc\", \"heading\"],\n\tease: [\"standard\"],\n\tanimate: [\"skel\", \"pop\"],\n} as const\n\nexport const twMerge = extendTailwindMerge({\n\textend: { theme: mergeTheme },\n})\n","import { type ClassValue, clsx } from \"clsx\"\nimport { twMerge } from \"./merge-config\"\n\nexport function cn(...inputs: ClassValue[]) {\n\treturn twMerge(clsx(inputs))\n}\n","import type { ComponentType } from \"react\"\nimport { cn } from \"../lib/utils.ts\"\nimport type { IconMode } from \"../icons/icon-style.ts\"\n\n/** Anything renderable through `Icon`: a Solar icon (imported from the\n    central registry on the web side) or a local utility mark (marks.tsx) —\n    both take `className`; registry icons take `mode` (marks ignore it). */\nexport type IconType = ComponentType<{ className?: string; mode?: IconMode }>\n\n/** The three sanctioned icon sizes: `sm` 12 inside pills and meta lines,\n    `md` 16 by default, `lg` 20 for primary toolbar actions. */\nexport type IconSize = \"sm\" | \"md\" | \"lg\"\n\nconst sizeClasses = {\n\tsm: \"size-3\",\n\tmd: \"size-4\",\n\tlg: \"size-5\",\n} as const satisfies Record<IconSize, string>\n\n/**\n * Solar icons with the design system's defaults baked in: callers pass\n * the registry icon — by default it renders the boldDuotone weight,\n * whose second tone takes the palette's `--icon-tone` hue (theme.css\n * recolors the duotone accent via `--solar-secondary-color` under the\n * `hd-icon` hook), so colored palettes feel alive while mono stays\n * neutral.\n *\n * Mode is one channel: `mode` picks the weight directly; `selected` maps\n * to `\"bold\"` (the filled, single-color weight — the only sanctioned use\n * of Bold); otherwise the active icon style preference decides.\n *\n * Sizing is class-based, three tiers only — `sm`/`md`/`lg` map to\n * `size-3/4/5` (12/16/20). Escape the tiers with\n * `className=\"size-[18px]\"` — twMerge lets the later class win.\n *\n * ✓/×/+ semantics never use Solar's Circle/Square composites — the\n * container is full-bleed while the informative mark is barely a third\n * of the box, so it goes muddy at small sizes. The plain marks (Check,\n * Cross, Plus from marks.tsx) cover these at every size; `sm` otherwise\n * belongs to simple single-stroke glyphs (arrows, dots, grips).\n */\nexport function Icon({\n\ticon: IconComponent,\n\tmode,\n\tsize = \"md\",\n\tselected,\n\tclassName,\n\t...rest\n}: {\n\ticon: IconType\n\t/** Explicit weight override; `selected` and the style preference lose\n\t    to it. */\n\tmode?: IconMode\n\tsize?: IconSize\n\t/** Selected state — renders the icon's `\"bold\"` weight. */\n\tselected?: boolean\n\tclassName?: string\n} & Record<string, unknown>) {\n\treturn (\n\t\t<IconComponent\n\t\t\tmode={mode ?? (selected === true ? \"bold\" : undefined)}\n\t\t\tclassName={cn(\"hd-icon\", sizeClasses[size], className)}\n\t\t\t{...rest}\n\t\t/>\n\t)\n}\n","import { Icon, type IconType } from \"@hoardodile/ui/components/icon\"\nimport { cn } from \"@hoardodile/ui/lib/utils\"\n\nexport type IconToggleOption<T extends string> = {\n\treadonly value: T\n\treadonly icon: IconType\n\t/** Accessible name (also the tooltip). */\n\treadonly label: string\n\treadonly testId?: string\n}\n\ntype IconToggleProps<T extends string> = {\n\treadonly value: T\n\treadonly options: readonly IconToggleOption<T>[]\n\treadonly onChange: (value: T) => void\n\treadonly className?: string\n}\n\n/**\n * Icon toggle: a segmented control of square icon buttons (grid/masonry\n * view switchers). Muted track; the active button lifts to the card fill\n * and its icon takes the Bold weight.\n */\nexport function IconToggle<T extends string>(props: IconToggleProps<T>) {\n\tconst { value, options, onChange, className } = props\n\treturn (\n\t\t<span\n\t\t\tclassName={cn(\n\t\t\t\t\"inline-flex shrink-0 items-center gap-0.5 rounded-lg bg-muted p-0.5\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t>\n\t\t\t{options.map((option) => {\n\t\t\t\tconst active = option.value === value\n\t\t\t\treturn (\n\t\t\t\t\t<button\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tkey={option.value}\n\t\t\t\t\t\ttitle={option.label}\n\t\t\t\t\t\taria-label={option.label}\n\t\t\t\t\t\taria-pressed={active}\n\t\t\t\t\t\tdata-testid={option.testId}\n\t\t\t\t\t\tonClick={() => onChange(option.value)}\n\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\"flex size-7 cursor-pointer items-center justify-center rounded-md\",\n\t\t\t\t\t\t\tactive\n\t\t\t\t\t\t\t\t? \"bg-card text-foreground\"\n\t\t\t\t\t\t\t\t: \"text-muted-foreground hover:text-secondary-foreground\",\n\t\t\t\t\t\t)}\n\t\t\t\t\t>\n\t\t\t\t\t\t<Icon icon={option.icon} selected={active} className=\"size-4\" />\n\t\t\t\t\t</button>\n\t\t\t\t)\n\t\t\t})}\n\t\t</span>\n\t)\n}\n"]}

package/dist/components/icon.d.ts

@@ -0,0 +1,2 @@
+import 'react';
+export { f as Icon, a as IconSize, I as IconType } from '../icon-BOgL5bpL.js';

package/dist/components/icon.js

@@ -0,0 +1,49 @@
+import { clsx } from 'clsx';
+import { extendTailwindMerge } from 'tailwind-merge';
+import { jsx } from 'react/jsx-runtime';
+
+// src/lib/utils.ts
+var mergeTheme = {
+  text: ["tiny", "ui", "doc", "doc-title", "doc-heading", "quote"],
+  spacing: ["chip", "control", "nav", "sidebar", "panel"],
+  tracking: ["label"],
+  shadow: ["card", "dialog"],
+  container: ["reading", "medium", "content"],
+  font: ["doc", "heading"],
+  ease: ["standard"],
+  animate: ["skel", "pop"]
+};
+var twMerge = extendTailwindMerge({
+  extend: { theme: mergeTheme }
+});
+
+// src/lib/utils.ts
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var sizeClasses = {
+  sm: "size-3",
+  md: "size-4",
+  lg: "size-5"
+};
+function Icon({
+  icon: IconComponent,
+  mode,
+  size = "md",
+  selected,
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx(
+    IconComponent,
+    {
+      mode: mode ?? (selected === true ? "bold" : void 0),
+      className: cn("hd-icon", sizeClasses[size], className),
+      ...rest
+    }
+  );
+}
+
+export { Icon };
+//# sourceMappingURL=icon.js.map
+//# sourceMappingURL=icon.js.map

package/dist/components/icon.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/lib/merge-config.ts","../../src/lib/utils.ts","../../src/components/icon.tsx"],"names":[],"mappings":";;;;;AAQO,IAAM,UAAA,GAAa;AAAA,EACzB,MAAM,CAAC,MAAA,EAAQ,MAAM,KAAA,EAAO,WAAA,EAAa,eAAe,OAAO,CAAA;AAAA,EAC/D,SAAS,CAAC,MAAA,EAAQ,SAAA,EAAW,KAAA,EAAO,WAAW,OAAO,CAAA;AAAA,EACtD,QAAA,EAAU,CAAC,OAAO,CAAA;AAAA,EAClB,MAAA,EAAQ,CAAC,MAAA,EAAQ,QAAQ,CAAA;AAAA,EACzB,SAAA,EAAW,CAAC,SAAA,EAAW,QAAA,EAAU,SAAS,CAAA;AAAA,EAC1C,IAAA,EAAM,CAAC,KAAA,EAAO,SAAS,CAAA;AAAA,EACvB,IAAA,EAAM,CAAC,UAAU,CAAA;AAAA,EACjB,OAAA,EAAS,CAAC,MAAA,EAAQ,KAAK;AACxB,CAAA;AAEO,IAAM,UAAU,mBAAA,CAAoB;AAAA,EAC1C,MAAA,EAAQ,EAAE,KAAA,EAAO,UAAA;AAClB,CAAC,CAAA;;;AClBM,SAAS,MAAM,MAAA,EAAsB;AAC3C,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC5B;ACQA,IAAM,WAAA,GAAc;AAAA,EACnB,EAAA,EAAI,QAAA;AAAA,EACJ,EAAA,EAAI,QAAA;AAAA,EACJ,EAAA,EAAI;AACL,CAAA;AAwBO,SAAS,IAAA,CAAK;AAAA,EACpB,IAAA,EAAM,aAAA;AAAA,EACN,IAAA;AAAA,EACA,IAAA,GAAO,IAAA;AAAA,EACP,QAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAG;AACJ,CAAA,EAS6B;AAC5B,EAAA,uBACC,GAAA;AAAA,IAAC,aAAA;AAAA,IAAA;AAAA,MACA,IAAA,EAAM,IAAA,KAAS,QAAA,KAAa,IAAA,GAAO,MAAA,GAAS,MAAA,CAAA;AAAA,MAC5C,WAAW,EAAA,CAAG,SAAA,EAAW,WAAA,CAAY,IAAI,GAAG,SAAS,CAAA;AAAA,MACpD,GAAG;AAAA;AAAA,GACL;AAEF","file":"icon.js","sourcesContent":["import { extendTailwindMerge } from \"tailwind-merge\"\n\n// The app's `@theme inline` tokens (theme.css) generate utility names\n// tailwind-merge doesn't know, so it misclassifies them — e.g. `text-ui` is\n// parsed as a text color and dropped next to any `text-*` color. The default\n// class groups are theme-backed, so extending the theme (keys mirror the v4\n// token namespaces one-to-one) registers every custom utility with correct\n// conflict semantics. merge-config.test.ts pins this list against theme.css.\nexport const mergeTheme = {\n\ttext: [\"tiny\", \"ui\", \"doc\", \"doc-title\", \"doc-heading\", \"quote\"],\n\tspacing: [\"chip\", \"control\", \"nav\", \"sidebar\", \"panel\"],\n\ttracking: [\"label\"],\n\tshadow: [\"card\", \"dialog\"],\n\tcontainer: [\"reading\", \"medium\", \"content\"],\n\tfont: [\"doc\", \"heading\"],\n\tease: [\"standard\"],\n\tanimate: [\"skel\", \"pop\"],\n} as const\n\nexport const twMerge = extendTailwindMerge({\n\textend: { theme: mergeTheme },\n})\n","import { type ClassValue, clsx } from \"clsx\"\nimport { twMerge } from \"./merge-config\"\n\nexport function cn(...inputs: ClassValue[]) {\n\treturn twMerge(clsx(inputs))\n}\n","import type { ComponentType } from \"react\"\nimport { cn } from \"../lib/utils.ts\"\nimport type { IconMode } from \"../icons/icon-style.ts\"\n\n/** Anything renderable through `Icon`: a Solar icon (imported from the\n    central registry on the web side) or a local utility mark (marks.tsx) —\n    both take `className`; registry icons take `mode` (marks ignore it). */\nexport type IconType = ComponentType<{ className?: string; mode?: IconMode }>\n\n/** The three sanctioned icon sizes: `sm` 12 inside pills and meta lines,\n    `md` 16 by default, `lg` 20 for primary toolbar actions. */\nexport type IconSize = \"sm\" | \"md\" | \"lg\"\n\nconst sizeClasses = {\n\tsm: \"size-3\",\n\tmd: \"size-4\",\n\tlg: \"size-5\",\n} as const satisfies Record<IconSize, string>\n\n/**\n * Solar icons with the design system's defaults baked in: callers pass\n * the registry icon — by default it renders the boldDuotone weight,\n * whose second tone takes the palette's `--icon-tone` hue (theme.css\n * recolors the duotone accent via `--solar-secondary-color` under the\n * `hd-icon` hook), so colored palettes feel alive while mono stays\n * neutral.\n *\n * Mode is one channel: `mode` picks the weight directly; `selected` maps\n * to `\"bold\"` (the filled, single-color weight — the only sanctioned use\n * of Bold); otherwise the active icon style preference decides.\n *\n * Sizing is class-based, three tiers only — `sm`/`md`/`lg` map to\n * `size-3/4/5` (12/16/20). Escape the tiers with\n * `className=\"size-[18px]\"` — twMerge lets the later class win.\n *\n * ✓/×/+ semantics never use Solar's Circle/Square composites — the\n * container is full-bleed while the informative mark is barely a third\n * of the box, so it goes muddy at small sizes. The plain marks (Check,\n * Cross, Plus from marks.tsx) cover these at every size; `sm` otherwise\n * belongs to simple single-stroke glyphs (arrows, dots, grips).\n */\nexport function Icon({\n\ticon: IconComponent,\n\tmode,\n\tsize = \"md\",\n\tselected,\n\tclassName,\n\t...rest\n}: {\n\ticon: IconType\n\t/** Explicit weight override; `selected` and the style preference lose\n\t    to it. */\n\tmode?: IconMode\n\tsize?: IconSize\n\t/** Selected state — renders the icon's `\"bold\"` weight. */\n\tselected?: boolean\n\tclassName?: string\n} & Record<string, unknown>) {\n\treturn (\n\t\t<IconComponent\n\t\t\tmode={mode ?? (selected === true ? \"bold\" : undefined)}\n\t\t\tclassName={cn(\"hd-icon\", sizeClasses[size], className)}\n\t\t\t{...rest}\n\t\t/>\n\t)\n}\n"]}

package/dist/components/image-crop-panel.d.ts

@@ -0,0 +1,80 @@
+import * as React from 'react';
+import { CroppedImage } from './image-cropper.js';
+
+type ImageCropPanelProps = {
+    readonly aspect?: number;
+    readonly mimeType?: "image/png" | "image/jpeg" | "image/webp";
+    readonly accept?: string;
+    readonly previewShape?: "square" | "circle";
+    readonly previewWidth?: number;
+    readonly previewHeight?: number;
+    /**
+     * Called when the user clicks "save". Receives the cropped image
+     * payload. Should return a promise that resolves once the upload is
+     * complete; the panel then notifies via {@link onSaved}.
+     *
+     * @throws The implementation may throw to surface an error toast.
+     */
+    readonly onSave: (cropped: CroppedImage) => Promise<unknown>;
+    readonly onSaved?: () => void;
+    /**
+     * Called when the user clicks the action button but no image has been
+     * selected. The parent (e.g. {@link ImageEditPanel}) can treat this as a
+     * request to remove the existing image.
+     */
+    readonly onClear?: () => void;
+    /**
+     * When set (e.g. canvas snapshot object URL), skips the empty picker and
+     * shows the cropper immediately.
+     */
+    readonly initialSrc?: string;
+    /**
+     * When false, hides file pick / drag-drop and "reselect" (preset image only).
+     */
+    readonly allowChangeSource?: boolean;
+    /** Notifies parent when an async save starts / finishes (for dialog guards). */
+    readonly onSavingChange?: (saving: boolean) => void;
+    /** Exact size (px) of the empty picker frame / crop stage. Overrides the default 240×240. */
+    readonly cropStageWidth?: number;
+    readonly cropStageHeight?: number;
+    /**
+     * When true, the right-hand live preview is hidden until the user turns
+     * the switch on (saves work over large captures / WebGL snapshots).
+     */
+    readonly showPreviewSwitch?: boolean;
+    /**
+     * When true, the live preview pane is never rendered — the crop stage is
+     * the only surface. Used by creation forms whose panel column has no
+     * room for a side-by-side preview.
+     */
+    readonly hidePreview?: boolean;
+    /**
+     * When true, the crop stage fills its parent width and keeps the aspect
+     * ratio implied by {@link cropStageWidth} / {@link cropStageHeight}
+     * (full-bleed `aspect-square w-full` panels). Ignored when only
+     * one stage dimension is given.
+     */
+    readonly fillWidth?: boolean;
+    /** Extra classes on the root panel wrapper. */
+    readonly panelClassName?: string;
+    /** Extra classes on the row that holds the crop stage + preview. */
+    readonly containerClassName?: string;
+    /** Extra classes on the column wrapping the crop stage (e.g. flex-1 min-w-0). */
+    readonly cropColumnClassName?: string;
+    /** Extra classes on the bordered crop stage box (merged with defaults via tailwind-merge). */
+    readonly cropStageClassName?: string;
+    /** When true, the bottom save/remove action button is hidden. */
+    readonly hideActionButton?: boolean;
+    /**
+     * When true, automatically calls {@link onSave} after the user finishes
+     * adjusting the crop (debounced by 600 ms). Useful when the action button
+     * is hidden and the parent only needs the final crop at form-submit time.
+     */
+    readonly autoSaveOnCrop?: boolean;
+};
+/**
+ * Inline image picker + cropper with live preview.
+ */
+declare function ImageCropPanel(props: ImageCropPanelProps): React.JSX.Element;
+
+export { ImageCropPanel, type ImageCropPanelProps };