@alfakit/react 0.0.0-stage → 0.1.0

package/dist/components/fields/icon-picker.js

@@ -0,0 +1,228 @@
+import { useChoice, useDirection, useFormatter, useT } from "../../context.js";
+import { cn } from "../../lib/utils.js";
+import { Icon } from "../../lib/icons.js";
+import { Button } from "../ui/button.js";
+import { useStore } from "../../hooks/use-store.js";
+import { extraProps } from "../../lib/attributes.js";
+import { Spinner } from "../ui/spinner.js";
+import { useField, useFormStore } from "../form/form-context.js";
+import { FieldWrapper } from "../schema/field-wrapper.js";
+import { Input } from "../ui/input.js";
+import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover.js";
+import { ICON_PICKER_SIZES, IconPickerValue } from "./icon-picker-value.js";
+import { Textarea } from "../ui/textarea.js";
+import { IconPickerSearch, fieldIds, iconPickerPreview, isCustomSvgIcon } from "@alfakit/core";
+import { useEffect, useId, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronsUpDownIcon, XIcon } from "lucide-react";
+//#region src/components/fields/icon-picker.tsx
+/**
+* `IconPicker::make()`: a trigger showing the selected icon and a popover with a search
+* box, a set filter and a grid of icons loaded from the server a page at a time. The grid
+* is a listbox driven from the search box (`aria-activedescendant`): arrow keys move,
+* Enter picks, Escape closes.
+*/
+function IconPickerField({ component }) {
+	const t = useT();
+	const choice = useChoice();
+	const format = useFormatter();
+	const rtl = useDirection() === "rtl";
+	const form = useFormStore();
+	const { value, setValue, blur, error, id, disabled, readOnly, aria } = useField(component);
+	const search = useMemo(() => new IconPickerSearch(form, component.statePath), [form, component.statePath]);
+	const state = useStore(search.store);
+	const [open, setOpen] = useState(false);
+	const [svg, setSvg] = useState("");
+	const grid = useRef(null);
+	const listId = `${useId()}-icons`;
+	const size = ICON_PICKER_SIZES[component.previewSize] ?? ICON_PICKER_SIZES.md;
+	const columns = Math.max(1, component.gridColumns);
+	const current = typeof value === "string" && value !== "" ? value : null;
+	const locked = disabled || readOnly;
+	useEffect(() => () => search.destroy(), [search]);
+	useEffect(() => {
+		if (state.active < 0) return;
+		grid.current?.ownerDocument.getElementById(`${listId}-${state.active}`)?.scrollIntoView?.({ block: "nearest" });
+	}, [state.active, listId]);
+	const pick = (next) => {
+		setValue(next);
+		setOpen(false);
+		blur();
+	};
+	const onKeyDown = (event) => {
+		if (event.key === "Enter") {
+			const icon = state.icons[state.active];
+			if (icon) {
+				event.preventDefault();
+				pick(icon.value);
+			}
+			return;
+		}
+		if ((event.key === "Home" || event.key === "End") && state.search !== "") return;
+		if (search.move(event.key, columns, rtl) !== null) event.preventDefault();
+	};
+	const status = state.loading ? t("form.icon_picker.loading", {}, "Loading icons…") : state.error ? t("form.icon_picker.error", {}, "The icons could not be loaded.") : state.icons.length === 0 ? t("form.icon_picker.no_results", {}, "No icons found.") : choice("form.icon_picker.results", state.total, { count: format.number(state.total) }, ":count icon|:count icons");
+	return /* @__PURE__ */ jsx(FieldWrapper, {
+		field: component,
+		htmlFor: id,
+		error,
+		children: /* @__PURE__ */ jsxs("div", {
+			"data-slot": "icon-picker",
+			className: "flex items-center gap-2",
+			children: [/* @__PURE__ */ jsxs(Popover, {
+				open,
+				onOpenChange: (next) => {
+					setOpen(next);
+					if (next) search.open();
+				},
+				children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+					asChild: true,
+					children: /* @__PURE__ */ jsxs(Button, {
+						id,
+						type: "button",
+						variant: "outline",
+						"data-slot": "icon-picker-trigger",
+						"data-input": "",
+						"aria-haspopup": "dialog",
+						"aria-expanded": open,
+						...aria,
+						"aria-labelledby": `${fieldIds(id).label} ${id}-value`,
+						"aria-readonly": readOnly || void 0,
+						disabled: locked,
+						...extraProps(component.extraInputAttributes, cn("h-9 min-w-0 flex-1 justify-between px-3 font-normal hover:bg-transparent", error && "border-destructive")),
+						children: [/* @__PURE__ */ jsx(IconPickerValue, {
+							id: `${id}-value`,
+							component,
+							value: current,
+							preview: iconPickerPreview(component.selected, current, search.preview(current))
+						}), /* @__PURE__ */ jsx(ChevronsUpDownIcon, { className: "size-4 shrink-0 opacity-50" })]
+					})
+				}), /* @__PURE__ */ jsxs(PopoverContent, {
+					align: "start",
+					"data-slot": "icon-picker-content",
+					className: "flex w-80 max-w-[calc(100vw-2rem)] flex-col gap-2 p-2",
+					onOpenAutoFocus: (event) => {
+						if (!component.searchable) {
+							event.preventDefault();
+							grid.current?.focus();
+						}
+					},
+					children: [
+						component.searchable && /* @__PURE__ */ jsx(Input, {
+							type: "search",
+							role: "combobox",
+							autoComplete: "off",
+							"aria-autocomplete": "list",
+							"aria-expanded": "true",
+							"aria-controls": listId,
+							"aria-activedescendant": state.active >= 0 ? `${listId}-${state.active}` : void 0,
+							"aria-label": t("form.icon_picker.search_label", {}, "Search icons"),
+							placeholder: t("form.icon_picker.search", {}, "Search icons…"),
+							value: state.search,
+							onChange: (event) => search.setSearch(event.target.value),
+							onKeyDown
+						}),
+						component.sets.length > 1 && /* @__PURE__ */ jsxs("select", {
+							"data-slot": "icon-picker-set",
+							"aria-label": t("form.icon_picker.set", {}, "Icon set"),
+							value: state.set ?? "",
+							onChange: (event) => search.setSet(event.target.value || null),
+							className: "border-input dark:bg-input/30 h-8 w-full rounded-md border bg-transparent px-2 text-sm",
+							children: [/* @__PURE__ */ jsx("option", {
+								value: "",
+								children: t("form.icon_picker.all_sets", {}, "All sets")
+							}), component.sets.map((set) => /* @__PURE__ */ jsx("option", {
+								value: set.key,
+								children: set.label
+							}, set.key))]
+						}),
+						/* @__PURE__ */ jsx("div", {
+							ref: grid,
+							id: listId,
+							role: "listbox",
+							"data-slot": "icon-picker-grid",
+							"aria-label": component.label ?? t("form.icon_picker.icons", {}, "Icons"),
+							"aria-busy": state.loading || void 0,
+							tabIndex: component.searchable ? -1 : 0,
+							"aria-activedescendant": !component.searchable && state.active >= 0 ? `${listId}-${state.active}` : void 0,
+							onKeyDown: component.searchable ? void 0 : onKeyDown,
+							onScroll: (event) => {
+								const target = event.currentTarget;
+								if (target.scrollTop + target.clientHeight >= target.scrollHeight - 48) search.loadMore();
+							},
+							className: "grid max-h-72 gap-1 overflow-y-auto outline-none",
+							style: { gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` },
+							children: state.icons.map((icon, index) => /* @__PURE__ */ jsx("div", {
+								id: `${listId}-${index}`,
+								role: "option",
+								"data-slot": "icon-picker-option",
+								"aria-selected": icon.value === current,
+								"aria-label": icon.value,
+								title: icon.value,
+								"data-active": index === state.active || void 0,
+								onMouseDown: (event) => event.preventDefault(),
+								onClick: () => pick(icon.value),
+								className: cn("hover:bg-accent hover:text-accent-foreground flex cursor-pointer items-center justify-center rounded-md", size.cell, index === state.active && "bg-accent text-accent-foreground ring-ring ring-2", icon.value === current && "bg-primary/10 text-primary"),
+								children: /* @__PURE__ */ jsx(Icon, {
+									name: icon.icon ?? icon.value,
+									className: size.icon
+								})
+							}, icon.value))
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "flex items-center justify-between gap-2",
+							children: [/* @__PURE__ */ jsxs("p", {
+								role: "status",
+								"aria-live": "polite",
+								className: "text-muted-foreground flex items-center gap-1 text-xs",
+								children: [state.loading && /* @__PURE__ */ jsx(Spinner, { className: "size-3" }), status]
+							}), state.hasMore && /* @__PURE__ */ jsx(Button, {
+								type: "button",
+								variant: "ghost",
+								size: "sm",
+								disabled: state.loading,
+								onClick: () => search.loadMore(),
+								children: t("form.icon_picker.load_more", {}, "Load more icons")
+							})]
+						}),
+						component.allowCustomSvg && /* @__PURE__ */ jsxs("div", {
+							"data-slot": "icon-picker-custom",
+							className: "flex flex-col gap-2 border-t pt-2",
+							children: [/* @__PURE__ */ jsx(Textarea, {
+								dir: "ltr",
+								rows: 3,
+								"aria-label": t("form.icon_picker.custom_svg_label", {}, "Paste SVG markup"),
+								placeholder: "<svg viewBox=\"0 0 24 24\">…</svg>",
+								value: svg,
+								onChange: (event) => setSvg(event.target.value),
+								className: "font-mono text-xs"
+							}), /* @__PURE__ */ jsx(Button, {
+								type: "button",
+								variant: "secondary",
+								size: "sm",
+								disabled: !isCustomSvgIcon(svg),
+								onClick: () => {
+									pick(svg.trim());
+									setSvg("");
+								},
+								children: t("form.icon_picker.use_svg", {}, "Use SVG")
+							})]
+						})
+					]
+				})]
+			}), current !== null && !locked && /* @__PURE__ */ jsx(Button, {
+				type: "button",
+				variant: "ghost",
+				size: "icon",
+				"data-slot": "icon-picker-clear",
+				"aria-label": t("form.icon_picker.clear", {}, "Clear icon"),
+				onClick: () => pick(null),
+				children: /* @__PURE__ */ jsx(XIcon, {})
+			})]
+		})
+	});
+}
+//#endregion
+export { IconPickerField };
+
+//# sourceMappingURL=icon-picker.js.map

package/dist/components/fields/icon-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-picker.js","names":[],"sources":["../../../src/components/fields/icon-picker.tsx"],"sourcesContent":["import {\n  fieldIds,\n  iconPickerPreview,\n  IconPickerSearch,\n  isCustomSvgIcon,\n  type IconPickerSchema,\n} from '@alfakit/core'\nimport { ChevronsUpDownIcon, XIcon } from 'lucide-react'\nimport { useEffect, useId, useMemo, useRef, useState, type KeyboardEvent } from 'react'\nimport { useChoice, useDirection, useFormatter, useT } from '../../context'\nimport { useStore } from '../../hooks/use-store'\nimport { extraProps } from '../../lib/attributes'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport { useField, useFormStore } from '../form/form-context'\nimport { FieldWrapper } from '../schema/field-wrapper'\nimport { Button } from '../ui/button'\nimport { Input } from '../ui/input'\nimport { Popover, PopoverContent, PopoverTrigger } from '../ui/popover'\nimport { Spinner } from '../ui/spinner'\nimport { Textarea } from '../ui/textarea'\nimport { ICON_PICKER_SIZES, IconPickerValue } from './icon-picker-value'\n\n/**\n * `IconPicker::make()`: a trigger showing the selected icon and a popover with a search\n * box, a set filter and a grid of icons loaded from the server a page at a time. The grid\n * is a listbox driven from the search box (`aria-activedescendant`): arrow keys move,\n * Enter picks, Escape closes.\n */\nexport function IconPickerField({ component }: { component: IconPickerSchema }) {\n  const t = useT()\n  const choice = useChoice()\n  const format = useFormatter()\n  const rtl = useDirection() === 'rtl'\n  const form = useFormStore()\n  const { value, setValue, blur, error, id, disabled, readOnly, aria } = useField<string | null>(\n    component,\n  )\n  const search = useMemo(\n    () => new IconPickerSearch(form, component.statePath),\n    [form, component.statePath],\n  )\n  const state = useStore(search.store)\n  const [open, setOpen] = useState(false)\n  const [svg, setSvg] = useState('')\n  const grid = useRef<HTMLDivElement>(null)\n  const listId = `${useId()}-icons`\n  const size = ICON_PICKER_SIZES[component.previewSize] ?? ICON_PICKER_SIZES.md\n  const columns = Math.max(1, component.gridColumns)\n  const current = typeof value === 'string' && value !== '' ? value : null\n  const locked = disabled || readOnly\n\n  useEffect(() => () => search.destroy(), [search])\n\n  // Keep the highlighted icon in view while the arrow keys move it.\n  useEffect(() => {\n    if (state.active < 0) return\n\n    grid.current?.ownerDocument\n      .getElementById(`${listId}-${state.active}`)\n      ?.scrollIntoView?.({ block: 'nearest' })\n  }, [state.active, listId])\n\n  const pick = (next: string | null) => {\n    setValue(next)\n    setOpen(false)\n    blur()\n  }\n\n  const onKeyDown = (event: KeyboardEvent) => {\n    if (event.key === 'Enter') {\n      const icon = state.icons[state.active]\n\n      if (icon) {\n        event.preventDefault()\n        pick(icon.value)\n      }\n\n      return\n    }\n\n    // Home/End stay with the text cursor while there is a search to edit.\n    if ((event.key === 'Home' || event.key === 'End') && state.search !== '') return\n\n    if (search.move(event.key, columns, rtl) !== null) event.preventDefault()\n  }\n\n  const status = state.loading\n    ? t('form.icon_picker.loading', {}, 'Loading icons…')\n    : state.error\n      ? t('form.icon_picker.error', {}, 'The icons could not be loaded.')\n      : state.icons.length === 0\n        ? t('form.icon_picker.no_results', {}, 'No icons found.')\n        : choice(\n            'form.icon_picker.results',\n            state.total,\n            { count: format.number(state.total) },\n            ':count icon|:count icons',\n          )\n\n  return (\n    <FieldWrapper field={component} htmlFor={id} error={error}>\n      <div data-slot=\"icon-picker\" className=\"flex items-center gap-2\">\n        <Popover\n          open={open}\n          onOpenChange={(next) => {\n            setOpen(next)\n\n            if (next) search.open()\n          }}\n        >\n          <PopoverTrigger asChild>\n            <Button\n              id={id}\n              type=\"button\"\n              variant=\"outline\"\n              data-slot=\"icon-picker-trigger\"\n              data-input=\"\"\n              aria-haspopup=\"dialog\"\n              aria-expanded={open}\n              {...aria}\n              aria-labelledby={`${fieldIds(id).label} ${id}-value`}\n              aria-readonly={readOnly || undefined}\n              disabled={locked}\n              {...extraProps(\n                component.extraInputAttributes,\n                cn(\n                  'h-9 min-w-0 flex-1 justify-between px-3 font-normal hover:bg-transparent',\n                  error && 'border-destructive',\n                ),\n              )}\n            >\n              <IconPickerValue\n                id={`${id}-value`}\n                component={component}\n                value={current}\n                preview={iconPickerPreview(component.selected, current, search.preview(current))}\n              />\n              <ChevronsUpDownIcon className=\"size-4 shrink-0 opacity-50\" />\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent\n            align=\"start\"\n            data-slot=\"icon-picker-content\"\n            className=\"flex w-80 max-w-[calc(100vw-2rem)] flex-col gap-2 p-2\"\n            onOpenAutoFocus={(event) => {\n              if (!component.searchable) {\n                event.preventDefault()\n                grid.current?.focus()\n              }\n            }}\n          >\n            {component.searchable && (\n              <Input\n                type=\"search\"\n                role=\"combobox\"\n                autoComplete=\"off\"\n                aria-autocomplete=\"list\"\n                aria-expanded=\"true\"\n                aria-controls={listId}\n                aria-activedescendant={state.active >= 0 ? `${listId}-${state.active}` : undefined}\n                aria-label={t('form.icon_picker.search_label', {}, 'Search icons')}\n                placeholder={t('form.icon_picker.search', {}, 'Search icons…')}\n                value={state.search}\n                onChange={(event) => search.setSearch(event.target.value)}\n                onKeyDown={onKeyDown}\n              />\n            )}\n            {component.sets.length > 1 && (\n              <select\n                data-slot=\"icon-picker-set\"\n                aria-label={t('form.icon_picker.set', {}, 'Icon set')}\n                value={state.set ?? ''}\n                onChange={(event) => search.setSet(event.target.value || null)}\n                className=\"border-input dark:bg-input/30 h-8 w-full rounded-md border bg-transparent px-2 text-sm\"\n              >\n                <option value=\"\">{t('form.icon_picker.all_sets', {}, 'All sets')}</option>\n                {component.sets.map((set) => (\n                  <option key={set.key} value={set.key}>\n                    {set.label}\n                  </option>\n                ))}\n              </select>\n            )}\n            <div\n              ref={grid}\n              id={listId}\n              role=\"listbox\"\n              data-slot=\"icon-picker-grid\"\n              aria-label={component.label ?? t('form.icon_picker.icons', {}, 'Icons')}\n              aria-busy={state.loading || undefined}\n              tabIndex={component.searchable ? -1 : 0}\n              aria-activedescendant={\n                !component.searchable && state.active >= 0 ? `${listId}-${state.active}` : undefined\n              }\n              onKeyDown={component.searchable ? undefined : onKeyDown}\n              onScroll={(event) => {\n                const target = event.currentTarget\n\n                if (target.scrollTop + target.clientHeight >= target.scrollHeight - 48) {\n                  search.loadMore()\n                }\n              }}\n              className=\"grid max-h-72 gap-1 overflow-y-auto outline-none\"\n              style={{ gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` }}\n            >\n              {state.icons.map((icon, index) => (\n                <div\n                  key={icon.value}\n                  id={`${listId}-${index}`}\n                  role=\"option\"\n                  data-slot=\"icon-picker-option\"\n                  aria-selected={icon.value === current}\n                  aria-label={icon.value}\n                  title={icon.value}\n                  data-active={index === state.active || undefined}\n                  onMouseDown={(event) => event.preventDefault()}\n                  onClick={() => pick(icon.value)}\n                  className={cn(\n                    'hover:bg-accent hover:text-accent-foreground flex cursor-pointer items-center justify-center rounded-md',\n                    size.cell,\n                    index === state.active && 'bg-accent text-accent-foreground ring-ring ring-2',\n                    icon.value === current && 'bg-primary/10 text-primary',\n                  )}\n                >\n                  <Icon name={icon.icon ?? icon.value} className={size.icon} />\n                </div>\n              ))}\n            </div>\n            <div className=\"flex items-center justify-between gap-2\">\n              <p\n                role=\"status\"\n                aria-live=\"polite\"\n                className=\"text-muted-foreground flex items-center gap-1 text-xs\"\n              >\n                {state.loading && <Spinner className=\"size-3\" />}\n                {status}\n              </p>\n              {state.hasMore && (\n                <Button\n                  type=\"button\"\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  disabled={state.loading}\n                  onClick={() => search.loadMore()}\n                >\n                  {t('form.icon_picker.load_more', {}, 'Load more icons')}\n                </Button>\n              )}\n            </div>\n            {component.allowCustomSvg && (\n              <div data-slot=\"icon-picker-custom\" className=\"flex flex-col gap-2 border-t pt-2\">\n                <Textarea\n                  dir=\"ltr\"\n                  rows={3}\n                  aria-label={t('form.icon_picker.custom_svg_label', {}, 'Paste SVG markup')}\n                  placeholder={'<svg viewBox=\"0 0 24 24\">…</svg>'}\n                  value={svg}\n                  onChange={(event) => setSvg(event.target.value)}\n                  className=\"font-mono text-xs\"\n                />\n                <Button\n                  type=\"button\"\n                  variant=\"secondary\"\n                  size=\"sm\"\n                  disabled={!isCustomSvgIcon(svg)}\n                  onClick={() => {\n                    pick(svg.trim())\n                    setSvg('')\n                  }}\n                >\n                  {t('form.icon_picker.use_svg', {}, 'Use SVG')}\n                </Button>\n              </div>\n            )}\n          </PopoverContent>\n        </Popover>\n        {current !== null && !locked && (\n          <Button\n            type=\"button\"\n            variant=\"ghost\"\n            size=\"icon\"\n            data-slot=\"icon-picker-clear\"\n            aria-label={t('form.icon_picker.clear', {}, 'Clear icon')}\n            onClick={() => pick(null)}\n          >\n            <XIcon />\n          </Button>\n        )}\n      </div>\n    </FieldWrapper>\n  )\n}\n"],"mappings":"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"}

package/dist/components/fields/image-editor-dialog-lazy.js

@@ -0,0 +1,18 @@
+import { lazyComponent } from "../../lib/lazy.js";
+import { useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/fields/image-editor-dialog-lazy.tsx
+const LoadedImageEditorDialog = lazyComponent(() => import("./image-editor-dialog.js").then((module) => module.ImageEditorDialog), () => null);
+/**
+* `FileUpload::imageEditor()`'s dialog; the editor's code loads with the first image to
+* edit, not with the form. It stays mounted afterwards (closing animations).
+*/
+function ImageEditorDialog(props) {
+	const [requested, setRequested] = useState(false);
+	if (props.request && !requested) setRequested(true);
+	return requested || props.request ? /* @__PURE__ */ jsx(LoadedImageEditorDialog, { ...props }) : null;
+}
+//#endregion
+export { ImageEditorDialog };
+
+//# sourceMappingURL=image-editor-dialog-lazy.js.map

package/dist/components/fields/image-editor-dialog-lazy.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-editor-dialog-lazy.js","names":[],"sources":["../../../src/components/fields/image-editor-dialog-lazy.tsx"],"sourcesContent":["import { useState, type ComponentProps } from 'react'\nimport { lazyComponent } from '../../lib/lazy'\nimport type { ImageEditorDialog as ImageEditorDialogComponent } from './image-editor-dialog'\n\ntype ImageEditorDialogProps = ComponentProps<typeof ImageEditorDialogComponent>\n\nconst LoadedImageEditorDialog = lazyComponent<ImageEditorDialogProps>(\n  () => import('./image-editor-dialog').then((module) => module.ImageEditorDialog),\n  () => null,\n)\n\n/**\n * `FileUpload::imageEditor()`'s dialog; the editor's code loads with the first image to\n * edit, not with the form. It stays mounted afterwards (closing animations).\n */\nexport function ImageEditorDialog(props: ImageEditorDialogProps) {\n  const [requested, setRequested] = useState(false)\n\n  if (props.request && !requested) setRequested(true)\n\n  return requested || props.request ? <LoadedImageEditorDialog {...props} /> : null\n}\n"],"mappings":";;;;AAMA,MAAM,0BAA0B,oBACxB,OAAO,2BAAwB,CAAC,MAAM,WAAW,OAAO,iBAAiB,SACzE,IACR;;;;;AAMA,SAAgB,kBAAkB,OAA+B;CAC/D,MAAM,CAAC,WAAW,gBAAgB,SAAS,KAAK;CAEhD,IAAI,MAAM,WAAW,CAAC,WAAW,aAAa,IAAI;CAElD,OAAO,aAAa,MAAM,UAAU,oBAAC,yBAAD,EAAyB,GAAI,MAAQ,CAAA,IAAI;AAC/E"}

package/dist/components/fields/image-editor-dialog.js

@@ -0,0 +1,328 @@
+import { useT } from "../../context.js";
+import { cn } from "../../lib/utils.js";
+import { Button } from "../ui/button.js";
+import { useStore } from "../../hooks/use-store.js";
+import { Spinner } from "../ui/spinner.js";
+import { Input } from "../ui/input.js";
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "../ui/dialog.js";
+import { ImageEditor, loadEditorImage } from "@alfakit/core";
+import { useEffect, useId, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { FlipHorizontal2Icon, FlipVertical2Icon, RotateCcwIcon, RotateCwIcon, Undo2Icon, ZoomInIcon, ZoomOutIcon } from "lucide-react";
+//#region src/components/fields/image-editor-dialog.tsx
+const HANDLES = [
+	"nw",
+	"ne",
+	"sw",
+	"se"
+];
+/**
+* `FileUpload::imageEditor()`: crop, zoom, rotate and flip an image before it is uploaded
+* (or to replace an uploaded one). Resolves the request with the edited file, or null
+* when cancelled.
+*/
+function ImageEditorDialog({ request, options }) {
+	const t = useT();
+	const [loaded, setLoaded] = useState(null);
+	const [saving, setSaving] = useState(false);
+	const hintId = useId();
+	useEffect(() => {
+		if (!request) return;
+		let cancelled = false;
+		loadEditorImage(request.file).then((bitmap) => {
+			if (cancelled) return bitmap.close();
+			setLoaded({
+				bitmap,
+				editor: new ImageEditor({
+					width: bitmap.width,
+					height: bitmap.height,
+					aspectRatios: options.aspectRatios,
+					circle: options.circle,
+					mode: options.mode,
+					emptyFillColor: options.emptyFillColor,
+					viewportWidth: options.viewportWidth,
+					viewportHeight: options.viewportHeight
+				})
+			});
+		}).catch(() => !cancelled && request.resolve(request.file));
+		return () => {
+			cancelled = true;
+			setLoaded((current) => {
+				current?.bitmap.close();
+				return null;
+			});
+		};
+	}, [request, options]);
+	const finish = (file) => {
+		request?.resolve(file);
+	};
+	const save = async () => {
+		if (!request || !loaded) return;
+		setSaving(true);
+		try {
+			finish(await loaded.editor.export(loaded.bitmap, request.file));
+		} catch {
+			finish(request.file);
+		} finally {
+			setSaving(false);
+		}
+	};
+	return /* @__PURE__ */ jsx(Dialog, {
+		open: request !== null,
+		onOpenChange: (open) => !open && finish(null),
+		children: /* @__PURE__ */ jsxs(DialogContent, {
+			className: "sm:max-w-3xl",
+			"data-slot": "image-editor",
+			children: [
+				/* @__PURE__ */ jsxs(DialogHeader, { children: [/* @__PURE__ */ jsx(DialogTitle, { children: t("image_editor.title", {}, "Edit image") }), /* @__PURE__ */ jsxs(DialogDescription, {
+					id: hintId,
+					className: "sr-only",
+					children: [
+						t("image_editor.keyboard_hint", {}, "Arrow keys move the crop area. Shift and arrow keys resize it."),
+						" ",
+						t("image_editor.zoom_hint", {}, "Plus and minus keys zoom the image.")
+					]
+				})] }),
+				loaded ? /* @__PURE__ */ jsx(ImageEditorCanvas, {
+					editor: loaded.editor,
+					bitmap: loaded.bitmap,
+					hintId
+				}) : /* @__PURE__ */ jsx("div", {
+					className: "flex h-48 items-center justify-center",
+					children: /* @__PURE__ */ jsx(Spinner, {})
+				}),
+				/* @__PURE__ */ jsxs(DialogFooter, { children: [/* @__PURE__ */ jsx(Button, {
+					type: "button",
+					variant: "outline",
+					onClick: () => finish(null),
+					children: t("image_editor.cancel", {}, "Cancel")
+				}), /* @__PURE__ */ jsxs(Button, {
+					type: "button",
+					disabled: !loaded || saving,
+					onClick: () => void save(),
+					children: [saving && /* @__PURE__ */ jsx(Spinner, {}), t("image_editor.save", {}, "Apply")]
+				})] })
+			]
+		})
+	});
+}
+/** The numeric inputs, in the order Filament shows them. */
+const NUMERIC_FIELDS = [
+	[
+		"x",
+		"image_editor.x",
+		"X"
+	],
+	[
+		"y",
+		"image_editor.y",
+		"Y"
+	],
+	[
+		"width",
+		"image_editor.width",
+		"Width"
+	],
+	[
+		"height",
+		"image_editor.height",
+		"Height"
+	],
+	[
+		"rotate",
+		"image_editor.rotation",
+		"Rotation"
+	]
+];
+function ImageEditorCanvas({ editor, bitmap, hintId }) {
+	const t = useT();
+	const state = useStore(editor.store);
+	const canvas = useRef(null);
+	const frame = useRef(null);
+	const inputsId = useId();
+	useEffect(() => {
+		const element = frame.current;
+		if (!element) return;
+		const measure = () => editor.setContainer(element.clientWidth, element.clientHeight);
+		measure();
+		if (typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver(measure);
+		observer.observe(element);
+		return () => observer.disconnect();
+	}, [editor]);
+	useEffect(() => {
+		const element = frame.current;
+		if (!element) return;
+		const onWheel = (event) => {
+			const rect = element.getBoundingClientRect();
+			if (editor.wheel(event, {
+				x: event.clientX - rect.left,
+				y: event.clientY - rect.top
+			})) event.preventDefault();
+		};
+		element.addEventListener("wheel", onWheel, { passive: false });
+		return () => element.removeEventListener("wheel", onWheel);
+	}, [editor]);
+	useEffect(() => {
+		if (canvas.current) editor.drawPreview(canvas.current, bitmap, globalThis.devicePixelRatio || 1);
+	}, [
+		editor,
+		bitmap,
+		state
+	]);
+	const box = editor.cropBox();
+	const data = editor.getData();
+	const start = (mode) => (event) => {
+		event.preventDefault();
+		event.stopPropagation();
+		event.currentTarget.setPointerCapture?.(event.pointerId);
+		editor.startDrag(mode, event.clientX, event.clientY, void 0, event.pointerId ?? 0);
+	};
+	const end = (event) => editor.endDrag(event.pointerId ?? 0);
+	const commit = (field) => (event) => {
+		const input = event.currentTarget;
+		const value = input.value.trim() === "" ? NaN : Number(input.value);
+		editor.setData({ [field]: value });
+		input.value = String(editor.getData()[field]);
+	};
+	const ratioLabel = (ratio) => ratio ?? t("image_editor.free", {}, "Free");
+	const tool = (label, icon, onClick, disabled = false) => /* @__PURE__ */ jsx(Button, {
+		type: "button",
+		variant: "outline",
+		size: "icon-sm",
+		"aria-label": label,
+		title: label,
+		disabled,
+		onClick,
+		children: icon
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-4 md:flex-row",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex min-w-0 flex-1 flex-col gap-3",
+			children: [/* @__PURE__ */ jsxs("div", {
+				ref: frame,
+				dir: "ltr",
+				"data-slot": "image-editor-viewport",
+				className: "bg-muted/40 relative h-72 w-full cursor-grab touch-none overflow-hidden rounded-md select-none sm:h-96",
+				onPointerDown: start("pan"),
+				onPointerMove: (event) => editor.dragTo(event.clientX, event.clientY, event.pointerId ?? 0),
+				onPointerUp: end,
+				onPointerCancel: end,
+				children: [/* @__PURE__ */ jsx("canvas", {
+					ref: canvas,
+					className: "pointer-events-none absolute inset-0 block size-full"
+				}), /* @__PURE__ */ jsx("div", {
+					role: "group",
+					tabIndex: 0,
+					"aria-label": t("image_editor.crop_area", {}, "Crop area"),
+					"aria-describedby": hintId,
+					"data-slot": "image-editor-crop",
+					className: cn("ring-ring/50 absolute cursor-move border-2 border-white shadow-[0_0_0_9999px_rgb(0_0_0/0.5)] outline-none focus-visible:ring-[3px]", editor.circle && "rounded-full"),
+					style: {
+						left: `${box.left}%`,
+						top: `${box.top}%`,
+						width: `${box.width}%`,
+						height: `${box.height}%`
+					},
+					onPointerDown: start("move"),
+					onKeyDown: (event) => {
+						if (editor.handleKey(event)) event.preventDefault();
+					},
+					children: HANDLES.map((handle) => /* @__PURE__ */ jsx("span", {
+						"data-handle": handle,
+						"aria-hidden": "true",
+						className: "absolute size-3 -translate-x-1/2 -translate-y-1/2 rounded-sm border border-black/40 bg-white",
+						style: {
+							left: handle.endsWith("w") ? "0%" : "100%",
+							top: handle.startsWith("n") ? "0%" : "100%",
+							cursor: handle === "nw" || handle === "se" ? "nwse-resize" : "nesw-resize"
+						},
+						onPointerDown: start(handle)
+					}, handle))
+				})]
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-wrap items-center justify-between gap-2",
+				children: [editor.aspectRatios.length > 1 ? /* @__PURE__ */ jsx("div", {
+					role: "group",
+					"aria-label": t("image_editor.aspect_ratio", {}, "Aspect ratio"),
+					className: "flex flex-wrap gap-1",
+					children: editor.aspectRatios.map((ratio) => /* @__PURE__ */ jsx(Button, {
+						type: "button",
+						size: "sm",
+						variant: state.aspectRatio === ratio ? "default" : "outline",
+						"aria-pressed": state.aspectRatio === ratio,
+						onClick: () => editor.setAspectRatio(ratio),
+						children: ratioLabel(ratio)
+					}, ratio ?? "free"))
+				}) : /* @__PURE__ */ jsx("span", {}), /* @__PURE__ */ jsxs("div", {
+					className: "flex flex-wrap gap-1",
+					children: [
+						tool(t("image_editor.zoom_out", {}, "Zoom out"), /* @__PURE__ */ jsx(ZoomOutIcon, {}), () => editor.zoomOut(), !editor.canZoomOut),
+						tool(t("image_editor.zoom_in", {}, "Zoom in"), /* @__PURE__ */ jsx(ZoomInIcon, {}), () => editor.zoomIn(), !editor.canZoomIn),
+						tool(t("image_editor.rotate_left", {}, "Rotate left"), /* @__PURE__ */ jsx(RotateCcwIcon, {}), () => editor.rotate(-1)),
+						tool(t("image_editor.rotate_right", {}, "Rotate right"), /* @__PURE__ */ jsx(RotateCwIcon, {}), () => editor.rotate(1)),
+						tool(t("image_editor.flip_horizontal", {}, "Flip horizontally"), /* @__PURE__ */ jsx(FlipHorizontal2Icon, {}), () => editor.flip("x")),
+						tool(t("image_editor.flip_vertical", {}, "Flip vertically"), /* @__PURE__ */ jsx(FlipVertical2Icon, {}), () => editor.flip("y")),
+						tool(t("image_editor.reset", {}, "Reset"), /* @__PURE__ */ jsx(Undo2Icon, {}), () => editor.reset())
+					]
+				})]
+			})]
+		}), /* @__PURE__ */ jsxs("div", {
+			role: "group",
+			"aria-label": t("image_editor.inputs", {}, "Position and size"),
+			"data-slot": "image-editor-inputs",
+			className: "grid grid-cols-2 content-start gap-x-3 gap-y-2 sm:grid-cols-4 md:w-40 md:shrink-0 md:grid-cols-1",
+			children: [NUMERIC_FIELDS.map(([field, key, fallback]) => /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col gap-1",
+				children: [/* @__PURE__ */ jsx("label", {
+					htmlFor: `${inputsId}-${field}`,
+					className: "text-muted-foreground text-xs",
+					children: t(key, {}, fallback)
+				}), /* @__PURE__ */ jsx(Input, {
+					id: `${inputsId}-${field}`,
+					type: "number",
+					inputMode: "decimal",
+					step: 1,
+					"data-field": field,
+					className: "h-8 tabular-nums",
+					defaultValue: data[field],
+					onBlur: commit(field),
+					onKeyDown: (event) => {
+						if (event.key === "Enter") {
+							event.preventDefault();
+							commit(field)(event);
+						}
+					}
+				}, `${field}:${data[field]}`)]
+			}, field)), /* @__PURE__ */ jsx("div", {
+				className: "col-span-2 flex gap-1 sm:col-span-4 md:col-span-1",
+				children: [[
+					"x",
+					"image_editor.scale_x",
+					"Scale X"
+				], [
+					"y",
+					"image_editor.scale_y",
+					"Scale Y"
+				]].map(([axis, key, fallback]) => {
+					const flipped = axis === "x" ? state.flipX : state.flipY;
+					return /* @__PURE__ */ jsx(Button, {
+						type: "button",
+						size: "sm",
+						variant: flipped ? "default" : "outline",
+						"aria-pressed": flipped,
+						"data-field": `scale${axis.toUpperCase()}`,
+						className: "flex-1",
+						onClick: () => editor.flip(axis),
+						children: t(key, {}, fallback)
+					}, axis);
+				})
+			})]
+		})]
+	});
+}
+//#endregion
+export { ImageEditorDialog };
+
+//# sourceMappingURL=image-editor-dialog.js.map