@alfakit/react 0.0.0-stage → 0.1.0

package/dist/components/fields/code-editor-lazy.d.ts

@@ -0,0 +1,9 @@
+import { LazyComponent } from "../../lib/lazy.js";
+import { CodeEditorSchema } from "@alfakit/core";
+//#region src/components/fields/code-editor-lazy.d.ts
+/** The code editor; its code loads the first time one is shown in the browser. */
+export declare const CodeEditorField: LazyComponent<{
+  component: CodeEditorSchema;
+}>;
+//#endregion
+//# sourceMappingURL=code-editor-lazy.d.ts.map

package/dist/components/fields/code-editor-lazy.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"code-editor-lazy.d.ts","names":["_$______lib_lazy0.LazyComponent"],"sources":["../../../src/components/fields/code-editor-lazy.tsx"],"mappings":";;;;qBA6Ba,iBAA6CA;EAAA,WAAA"}

package/dist/components/fields/code-editor-lazy.js

@@ -0,0 +1,31 @@
+import { lazyComponent } from "../../lib/lazy.js";
+import { useField } from "../form/form-context.js";
+import { FieldWrapper } from "../schema/field-wrapper.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/fields/code-editor-lazy.tsx
+/** What the server renders and hydration shows: the code, read-only and unhighlighted. */
+function CodeEditorPlaceholder({ component }) {
+	const { value, id, error } = useField(component);
+	return /* @__PURE__ */ jsx(FieldWrapper, {
+		field: component,
+		htmlFor: id,
+		error,
+		children: /* @__PURE__ */ jsxs("pre", {
+			dir: "ltr",
+			"data-slot": "code-editor",
+			"aria-busy": "true",
+			className: "border-input dark:bg-input/30 m-0 overflow-auto rounded-md border p-3 font-mono text-sm leading-6 whitespace-pre",
+			style: {
+				minHeight: component.minHeight ? `${component.minHeight}px` : void 0,
+				maxHeight: component.maxHeight ? `${component.maxHeight}px` : void 0
+			},
+			children: [typeof value === "string" ? value : "", "\n"]
+		})
+	});
+}
+/** The code editor; its code loads the first time one is shown in the browser. */
+const CodeEditorField = lazyComponent(() => import("./code-editor.js").then((module) => module.CodeEditorField), (props) => /* @__PURE__ */ jsx(CodeEditorPlaceholder, { ...props }));
+//#endregion
+export { CodeEditorField };
+
+//# sourceMappingURL=code-editor-lazy.js.map

package/dist/components/fields/code-editor-lazy.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"code-editor-lazy.js","names":[],"sources":["../../../src/components/fields/code-editor-lazy.tsx"],"sourcesContent":["import type { CodeEditorSchema } from '@alfakit/core'\nimport { lazyComponent } from '../../lib/lazy'\nimport { useField } from '../form/form-context'\nimport { FieldWrapper } from '../schema/field-wrapper'\n\n/** What the server renders and hydration shows: the code, read-only and unhighlighted. */\nfunction CodeEditorPlaceholder({ component }: { component: CodeEditorSchema }) {\n  const { value, id, error } = useField<string | null>(component)\n\n  return (\n    <FieldWrapper field={component} htmlFor={id} error={error}>\n      <pre\n        dir=\"ltr\"\n        data-slot=\"code-editor\"\n        aria-busy=\"true\"\n        className=\"border-input dark:bg-input/30 m-0 overflow-auto rounded-md border p-3 font-mono text-sm leading-6 whitespace-pre\"\n        style={{\n          minHeight: component.minHeight ? `${component.minHeight}px` : undefined,\n          maxHeight: component.maxHeight ? `${component.maxHeight}px` : undefined,\n        }}\n      >\n        {typeof value === 'string' ? value : ''}\n        {'\\n'}\n      </pre>\n    </FieldWrapper>\n  )\n}\n\n/** The code editor; its code loads the first time one is shown in the browser. */\nexport const CodeEditorField = lazyComponent<{ component: CodeEditorSchema }>(\n  () => import('./code-editor').then((module) => module.CodeEditorField),\n  (props) => <CodeEditorPlaceholder {...props} />,\n)\n"],"mappings":";;;;;;AAMA,SAAS,sBAAsB,EAAE,aAA8C;CAC7E,MAAM,EAAE,OAAO,IAAI,UAAU,SAAwB,SAAS;CAE9D,OACE,oBAAC,cAAD;EAAc,OAAO;EAAW,SAAS;EAAW;EAClD,UAAA,qBAAC,OAAD;GACE,KAAI;GACJ,aAAU;GACV,aAAU;GACV,WAAU;GACV,OAAO;IACL,WAAW,UAAU,YAAY,GAAG,UAAU,UAAU,MAAM,KAAA;IAC9D,WAAW,UAAU,YAAY,GAAG,UAAU,UAAU,MAAM,KAAA;GAChE;GARF,UAAA,CAUG,OAAO,UAAU,WAAW,QAAQ,IACpC,IACE;;CACO,CAAA;AAElB;;AAGA,MAAa,kBAAkB,oBACvB,OAAO,mBAAgB,CAAC,MAAM,WAAW,OAAO,eAAe,IACpE,UAAU,oBAAC,uBAAD,EAAuB,GAAI,MAAQ,CAAA,CAChD"}

package/dist/components/fields/code-editor.js

@@ -0,0 +1,107 @@
+import { useT } from "../../context.js";
+import { cn } from "../../lib/utils.js";
+import { extraProps } from "../../lib/attributes.js";
+import { useField } from "../form/form-context.js";
+import { FieldWrapper } from "../schema/field-wrapper.js";
+import { codeTokenClasses } from "./code-tokens.js";
+import { countCodeLines, highlightCode, indentCode, newlineWithIndent } from "@alfakit/core";
+import { useMemo, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/fields/code-editor.tsx
+/**
+* A textarea layered over its highlighted copy: the browser keeps native editing,
+* selection, undo and screen reader support, and the copy underneath shows the colours.
+* Tab indents (Shift+Tab outdents); Escape then Tab moves focus on.
+*/
+function CodeEditorField({ component }) {
+	const t = useT();
+	const { value, setValue, blur, error, id, disabled, readOnly, aria } = useField(component);
+	const code = typeof value === "string" ? value : "";
+	const tokens = useMemo(() => highlightCode(code, component.language), [code, component.language]);
+	const lines = countCodeLines(code);
+	const releaseTab = useRef(false);
+	const hintId = `${id}-tab-hint`;
+	const locked = disabled || readOnly;
+	const apply = (target, edit) => {
+		setValue(edit.value);
+		requestAnimationFrame(() => target.setSelectionRange(edit.selectionStart, edit.selectionEnd));
+	};
+	const onKeyDown = (event) => {
+		if (locked) return;
+		const target = event.currentTarget;
+		if (event.key === "Escape") {
+			releaseTab.current = true;
+			return;
+		}
+		if (event.key === "Tab" && !releaseTab.current) {
+			event.preventDefault();
+			apply(target, indentCode(code, target.selectionStart, target.selectionEnd, component.tabSize, event.shiftKey));
+		} else if (event.key === "Enter" && !event.shiftKey && !event.metaKey && !event.ctrlKey) {
+			event.preventDefault();
+			apply(target, newlineWithIndent(code, target.selectionStart, target.selectionEnd));
+		}
+		releaseTab.current = false;
+	};
+	const wrap = Boolean(component.wrap);
+	const layer = cn("col-start-1 row-start-1 m-0 min-w-0 border-0 p-3 font-mono text-sm leading-6", wrap ? "break-words whitespace-pre-wrap" : "whitespace-pre");
+	return /* @__PURE__ */ jsxs(FieldWrapper, {
+		field: component,
+		htmlFor: id,
+		error,
+		children: [/* @__PURE__ */ jsxs("div", {
+			dir: "ltr",
+			"data-slot": "code-editor",
+			"data-language": component.language ?? void 0,
+			className: cn("border-input dark:bg-input/30 focus-within:border-ring focus-within:ring-ring/50 flex overflow-auto rounded-md border bg-transparent shadow-xs transition-[color,box-shadow] focus-within:ring-[3px]", error && "border-destructive", disabled && "opacity-50"),
+			style: {
+				minHeight: component.minHeight ? `${component.minHeight}px` : void 0,
+				maxHeight: component.maxHeight ? `${component.maxHeight}px` : void 0
+			},
+			children: [component.lineNumbers && /* @__PURE__ */ jsx("div", {
+				"aria-hidden": "true",
+				className: "bg-muted/40 text-muted-foreground sticky start-0 shrink-0 border-e py-3 ps-3 pe-2 text-end font-mono text-sm leading-6 select-none",
+				children: Array.from({ length: lines }, (_, index) => /* @__PURE__ */ jsx("div", { children: index + 1 }, index))
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "grid min-w-0 flex-1",
+				children: [/* @__PURE__ */ jsxs("pre", {
+					"aria-hidden": "true",
+					className: cn(layer, "pointer-events-none"),
+					children: [tokens.map((token, index) => token.kind === "plain" ? token.text : /* @__PURE__ */ jsx("span", {
+						className: codeTokenClasses[token.kind],
+						children: token.text
+					}, index)), "\n"]
+				}), /* @__PURE__ */ jsx("textarea", {
+					id,
+					name: component.name,
+					value: code,
+					onChange: (event) => setValue(event.target.value),
+					onKeyDown,
+					onBlur: blur,
+					disabled,
+					readOnly,
+					required: component.required,
+					autoFocus: component.autofocus,
+					maxLength: component.maxLength,
+					placeholder: component.placeholder,
+					spellCheck: false,
+					autoCapitalize: "off",
+					autoComplete: "off",
+					autoCorrect: "off",
+					wrap: wrap ? "soft" : "off",
+					...aria,
+					"aria-describedby": [aria["aria-describedby"], locked ? null : hintId].filter(Boolean).join(" ") || void 0,
+					...extraProps(component.extraInputAttributes, cn(layer, "caret-foreground placeholder:text-muted-foreground selection:bg-primary/25 resize-none overflow-hidden bg-transparent text-transparent outline-none selection:text-transparent")),
+					style: { tabSize: component.tabSize }
+				})]
+			})]
+		}), !locked && /* @__PURE__ */ jsx("span", {
+			id: hintId,
+			className: "sr-only",
+			children: t("code_editor.tab_hint", {}, "Tab indents. Press Escape, then Tab, to leave the editor.")
+		})]
+	});
+}
+//#endregion
+export { CodeEditorField, codeTokenClasses };
+
+//# sourceMappingURL=code-editor.js.map

package/dist/components/fields/code-editor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"code-editor.js","names":[],"sources":["../../../src/components/fields/code-editor.tsx"],"sourcesContent":["import type { CodeEditorSchema } from '@alfakit/core'\nimport { countCodeLines, highlightCode, indentCode, newlineWithIndent } from '@alfakit/core'\nimport { useMemo, useRef, type KeyboardEvent } from 'react'\nimport { useT } from '../../context'\nimport { extraProps } from '../../lib/attributes'\nimport { cn } from '../../lib/utils'\nimport { useField } from '../form/form-context'\nimport { FieldWrapper } from '../schema/field-wrapper'\nimport { codeTokenClasses } from './code-tokens'\n\nexport { codeTokenClasses }\n\n/**\n * A textarea layered over its highlighted copy: the browser keeps native editing,\n * selection, undo and screen reader support, and the copy underneath shows the colours.\n * Tab indents (Shift+Tab outdents); Escape then Tab moves focus on.\n */\nexport function CodeEditorField({ component }: { component: CodeEditorSchema }) {\n  const t = useT()\n  const { value, setValue, blur, error, id, disabled, readOnly, aria } = useField<string | null>(\n    component,\n  )\n  const code = typeof value === 'string' ? value : ''\n  const tokens = useMemo(() => highlightCode(code, component.language), [code, component.language])\n  const lines = countCodeLines(code)\n  const releaseTab = useRef(false)\n  const hintId = `${id}-tab-hint`\n  const locked = disabled || readOnly\n\n  const apply = (target: HTMLTextAreaElement, edit: ReturnType<typeof indentCode>) => {\n    setValue(edit.value)\n    // Restore the caret once React has written the new value.\n    requestAnimationFrame(() => target.setSelectionRange(edit.selectionStart, edit.selectionEnd))\n  }\n\n  const onKeyDown = (event: KeyboardEvent<HTMLTextAreaElement>) => {\n    if (locked) return\n\n    const target = event.currentTarget\n\n    if (event.key === 'Escape') {\n      releaseTab.current = true\n      return\n    }\n\n    if (event.key === 'Tab' && !releaseTab.current) {\n      event.preventDefault()\n      apply(\n        target,\n        indentCode(\n          code,\n          target.selectionStart,\n          target.selectionEnd,\n          component.tabSize,\n          event.shiftKey,\n        ),\n      )\n    } else if (event.key === 'Enter' && !event.shiftKey && !event.metaKey && !event.ctrlKey) {\n      event.preventDefault()\n      apply(target, newlineWithIndent(code, target.selectionStart, target.selectionEnd))\n    }\n\n    releaseTab.current = false\n  }\n\n  const wrap = Boolean(component.wrap)\n  const layer = cn(\n    'col-start-1 row-start-1 m-0 min-w-0 border-0 p-3 font-mono text-sm leading-6',\n    wrap ? 'break-words whitespace-pre-wrap' : 'whitespace-pre',\n  )\n\n  return (\n    <FieldWrapper field={component} htmlFor={id} error={error}>\n      <div\n        dir=\"ltr\"\n        data-slot=\"code-editor\"\n        data-language={component.language ?? undefined}\n        className={cn(\n          'border-input dark:bg-input/30 focus-within:border-ring focus-within:ring-ring/50 flex overflow-auto rounded-md border bg-transparent shadow-xs transition-[color,box-shadow] focus-within:ring-[3px]',\n          error && 'border-destructive',\n          disabled && 'opacity-50',\n        )}\n        style={{\n          minHeight: component.minHeight ? `${component.minHeight}px` : undefined,\n          maxHeight: component.maxHeight ? `${component.maxHeight}px` : undefined,\n        }}\n      >\n        {component.lineNumbers && (\n          <div\n            aria-hidden=\"true\"\n            className=\"bg-muted/40 text-muted-foreground sticky start-0 shrink-0 border-e py-3 ps-3 pe-2 text-end font-mono text-sm leading-6 select-none\"\n          >\n            {Array.from({ length: lines }, (_, index) => (\n              <div key={index}>{index + 1}</div>\n            ))}\n          </div>\n        )}\n        <div className=\"grid min-w-0 flex-1\">\n          <pre aria-hidden=\"true\" className={cn(layer, 'pointer-events-none')}>\n            {tokens.map((token, index) =>\n              token.kind === 'plain' ? (\n                token.text\n              ) : (\n                <span key={index} className={codeTokenClasses[token.kind]}>\n                  {token.text}\n                </span>\n              ),\n            )}\n            {/* Keeps a trailing newline's empty line visible. */}\n            {'\\n'}\n          </pre>\n          <textarea\n            id={id}\n            name={component.name}\n            value={code}\n            onChange={(event) => setValue(event.target.value)}\n            onKeyDown={onKeyDown}\n            onBlur={blur}\n            disabled={disabled}\n            readOnly={readOnly}\n            required={component.required}\n            autoFocus={component.autofocus}\n            maxLength={component.maxLength}\n            placeholder={component.placeholder}\n            spellCheck={false}\n            autoCapitalize=\"off\"\n            autoComplete=\"off\"\n            autoCorrect=\"off\"\n            wrap={wrap ? 'soft' : 'off'}\n            {...aria}\n            aria-describedby={\n              [aria['aria-describedby'], locked ? null : hintId].filter(Boolean).join(' ') ||\n              undefined\n            }\n            {...extraProps(\n              component.extraInputAttributes,\n              cn(\n                layer,\n                'caret-foreground placeholder:text-muted-foreground selection:bg-primary/25 resize-none overflow-hidden bg-transparent text-transparent outline-none selection:text-transparent',\n              ),\n            )}\n            style={{ tabSize: component.tabSize }}\n          />\n        </div>\n      </div>\n      {!locked && (\n        <span id={hintId} className=\"sr-only\">\n          {t(\n            'code_editor.tab_hint',\n            {},\n            'Tab indents. Press Escape, then Tab, to leave the editor.',\n          )}\n        </span>\n      )}\n    </FieldWrapper>\n  )\n}\n"],"mappings":"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"}

package/dist/components/fields/code-tokens.js

@@ -0,0 +1,18 @@
+//#region src/components/fields/code-tokens.ts
+/** Token colours; spelled out so Tailwind keeps them. */
+const codeTokenClasses = {
+	plain: "",
+	comment: "text-muted-foreground italic",
+	string: "text-emerald-700 dark:text-emerald-400",
+	number: "text-amber-700 dark:text-amber-400",
+	keyword: "text-violet-700 dark:text-violet-400",
+	literal: "text-orange-700 dark:text-orange-400",
+	tag: "text-sky-700 dark:text-sky-400",
+	attribute: "text-amber-800 dark:text-amber-300",
+	property: "text-sky-800 dark:text-sky-300",
+	variable: "text-rose-700 dark:text-rose-400"
+};
+//#endregion
+export { codeTokenClasses };
+
+//# sourceMappingURL=code-tokens.js.map

package/dist/components/fields/code-tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"code-tokens.js","names":[],"sources":["../../../src/components/fields/code-tokens.ts"],"sourcesContent":["import type { CodeTokenKind } from '@alfakit/core'\n\n/** Token colours; spelled out so Tailwind keeps them. */\nexport const codeTokenClasses: Record<CodeTokenKind, string> = {\n  plain: '',\n  comment: 'text-muted-foreground italic',\n  string: 'text-emerald-700 dark:text-emerald-400',\n  number: 'text-amber-700 dark:text-amber-400',\n  keyword: 'text-violet-700 dark:text-violet-400',\n  literal: 'text-orange-700 dark:text-orange-400',\n  tag: 'text-sky-700 dark:text-sky-400',\n  attribute: 'text-amber-800 dark:text-amber-300',\n  property: 'text-sky-800 dark:text-sky-300',\n  variable: 'text-rose-700 dark:text-rose-400',\n}\n"],"mappings":";;AAGA,MAAa,mBAAkD;CAC7D,OAAO;CACP,SAAS;CACT,QAAQ;CACR,QAAQ;CACR,SAAS;CACT,SAAS;CACT,KAAK;CACL,WAAW;CACX,UAAU;CACV,UAAU;AACZ"}

package/dist/components/fields/color-picker.d.ts

@@ -0,0 +1,7 @@
+import { ColorPickerSchema } from "@alfakit/core";
+//#region src/components/fields/color-picker.d.ts
+export declare function ColorPickerField({ component }: {
+  component: ColorPickerSchema;
+}): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=color-picker.d.ts.map

package/dist/components/fields/color-picker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-picker.d.ts","names":[],"sources":["../../../src/components/fields/color-picker.tsx"],"mappings":";;wBAQgB,mBAAmB;EAAe,WAAW;oBAAmB,IAAA"}

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

@@ -0,0 +1,70 @@
+import { useFormatter, useT } from "../../context.js";
+import { extraProps } from "../../lib/attributes.js";
+import { useField } from "../form/form-context.js";
+import { FieldWrapper } from "../schema/field-wrapper.js";
+import { Input } from "../ui/input.js";
+import { colorAlpha, colorToHex, formatColor, withColorAlpha } from "@alfakit/core";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/fields/color-picker.tsx
+function ColorPickerField({ component }) {
+	const t = useT();
+	const format = useFormatter();
+	const { value, setValue, blur, error, id, disabled, readOnly, aria } = useField(component);
+	const isHex = component.format === "hex";
+	const alpha = Math.round(colorAlpha(value) * 100);
+	return /* @__PURE__ */ jsxs(FieldWrapper, {
+		field: component,
+		htmlFor: id,
+		error,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2",
+			children: [/* @__PURE__ */ jsx("label", {
+				className: "border-input relative size-9 shrink-0 cursor-pointer overflow-hidden rounded-md border shadow-xs",
+				style: { backgroundColor: value ?? "transparent" },
+				"aria-label": t("form.pick_color", {}, "Pick a colour"),
+				children: /* @__PURE__ */ jsx("input", {
+					type: "color",
+					value: colorToHex(value) ?? "#000000",
+					onChange: (event) => setValue(formatColor(event.target.value, component.format, value)),
+					onBlur: blur,
+					disabled: disabled || readOnly,
+					className: "absolute inset-0 size-full cursor-pointer opacity-0"
+				})
+			}), /* @__PURE__ */ jsx(Input, {
+				id,
+				name: component.name,
+				value: value ?? "",
+				onChange: (event) => setValue(event.target.value),
+				onBlur: blur,
+				placeholder: component.placeholder ?? (isHex ? "#000000" : component.format),
+				disabled,
+				readOnly,
+				...aria,
+				...extraProps(component.extraInputAttributes, "font-mono")
+			})]
+		}), component.format === "rgba" && /* @__PURE__ */ jsxs("div", {
+			"data-slot": "color-picker-alpha",
+			className: "mt-2 flex items-center gap-2",
+			children: [/* @__PURE__ */ jsx("input", {
+				type: "range",
+				min: 0,
+				max: 100,
+				step: 1,
+				value: alpha,
+				onChange: (event) => setValue(withColorAlpha(value, Number(event.target.value) / 100)),
+				onBlur: blur,
+				disabled: disabled || readOnly,
+				"aria-label": t("form.color_opacity", {}, "Opacity"),
+				"aria-valuetext": `${alpha}%`,
+				className: "accent-primary h-2 flex-1 cursor-pointer disabled:cursor-not-allowed disabled:opacity-50"
+			}), /* @__PURE__ */ jsx("span", {
+				className: "text-muted-foreground w-10 text-end text-xs tabular-nums",
+				children: format.percent(alpha / 100)
+			})]
+		})]
+	});
+}
+//#endregion
+export { ColorPickerField };
+
+//# sourceMappingURL=color-picker.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"color-picker.js","names":[],"sources":["../../../src/components/fields/color-picker.tsx"],"sourcesContent":["import type { ColorPickerSchema } from '@alfakit/core'\nimport { colorAlpha, colorToHex, formatColor, withColorAlpha } from '@alfakit/core'\nimport { useFormatter, useT } from '../../context'\nimport { extraProps } from '../../lib/attributes'\nimport { useField } from '../form/form-context'\nimport { FieldWrapper } from '../schema/field-wrapper'\nimport { Input } from '../ui/input'\n\nexport function ColorPickerField({ component }: { component: ColorPickerSchema }) {\n  const t = useT()\n  const format = useFormatter()\n  const { value, setValue, blur, error, id, disabled, readOnly, aria } = useField<string | null>(\n    component,\n  )\n  const isHex = component.format === 'hex'\n  // `rgba()`: the native swatch has no alpha, so a slider sets the opacity.\n  const alpha = Math.round(colorAlpha(value) * 100)\n\n  return (\n    <FieldWrapper field={component} htmlFor={id} error={error}>\n      <div className=\"flex items-center gap-2\">\n        <label\n          className=\"border-input relative size-9 shrink-0 cursor-pointer overflow-hidden rounded-md border shadow-xs\"\n          style={{ backgroundColor: value ?? 'transparent' }}\n          aria-label={t('form.pick_color', {}, 'Pick a colour')}\n        >\n          <input\n            type=\"color\"\n            value={colorToHex(value) ?? '#000000'}\n            onChange={(event) => setValue(formatColor(event.target.value, component.format, value))}\n            onBlur={blur}\n            disabled={disabled || readOnly}\n            className=\"absolute inset-0 size-full cursor-pointer opacity-0\"\n          />\n        </label>\n        <Input\n          id={id}\n          name={component.name}\n          value={value ?? ''}\n          onChange={(event) => setValue(event.target.value)}\n          onBlur={blur}\n          placeholder={component.placeholder ?? (isHex ? '#000000' : component.format)}\n          disabled={disabled}\n          readOnly={readOnly}\n          {...aria}\n\n          {...extraProps(component.extraInputAttributes, 'font-mono')}\n        />\n      </div>\n      {component.format === 'rgba' && (\n        <div data-slot=\"color-picker-alpha\" className=\"mt-2 flex items-center gap-2\">\n          <input\n            type=\"range\"\n            min={0}\n            max={100}\n            step={1}\n            value={alpha}\n            onChange={(event) => setValue(withColorAlpha(value, Number(event.target.value) / 100))}\n            onBlur={blur}\n            disabled={disabled || readOnly}\n            aria-label={t('form.color_opacity', {}, 'Opacity')}\n            aria-valuetext={`${alpha}%`}\n            className=\"accent-primary h-2 flex-1 cursor-pointer disabled:cursor-not-allowed disabled:opacity-50\"\n          />\n          <span className=\"text-muted-foreground w-10 text-end text-xs tabular-nums\">\n            {format.percent(alpha / 100)}\n          </span>\n        </div>\n      )}\n    </FieldWrapper>\n  )\n}\n"],"mappings":";;;;;;;;AAQA,SAAgB,iBAAiB,EAAE,aAA+C;CAChF,MAAM,IAAI,KAAK;CACf,MAAM,SAAS,aAAa;CAC5B,MAAM,EAAE,OAAO,UAAU,MAAM,OAAO,IAAI,UAAU,UAAU,SAAS,SACrE,SACF;CACA,MAAM,QAAQ,UAAU,WAAW;CAEnC,MAAM,QAAQ,KAAK,MAAM,WAAW,KAAK,IAAI,GAAG;CAEhD,OACE,qBAAC,cAAD;EAAc,OAAO;EAAW,SAAS;EAAW;EAApD,UAAA,CACE,qBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACE,oBAAC,SAAD;IACE,WAAU;IACV,OAAO,EAAE,iBAAiB,SAAS,cAAc;IACjD,cAAY,EAAE,mBAAmB,CAAC,GAAG,eAAe;IAEpD,UAAA,oBAAC,SAAD;KACE,MAAK;KACL,OAAO,WAAW,KAAK,KAAK;KAC5B,WAAW,UAAU,SAAS,YAAY,MAAM,OAAO,OAAO,UAAU,QAAQ,KAAK,CAAC;KACtF,QAAQ;KACR,UAAU,YAAY;KACtB,WAAU;IACX,CAAA;GACI,CAAA,GACP,oBAAC,OAAD;IACM;IACJ,MAAM,UAAU;IAChB,OAAO,SAAS;IAChB,WAAW,UAAU,SAAS,MAAM,OAAO,KAAK;IAChD,QAAQ;IACR,aAAa,UAAU,gBAAgB,QAAQ,YAAY,UAAU;IAC3D;IACA;IACV,GAAI;IAEJ,GAAI,WAAW,UAAU,sBAAsB,WAAW;GAC3D,CAAA,CACE;EACJ,CAAA,GAAA,UAAU,WAAW,UACpB,qBAAC,OAAD;GAAK,aAAU;GAAqB,WAAU;GAA9C,UAAA,CACE,oBAAC,SAAD;IACE,MAAK;IACL,KAAK;IACL,KAAK;IACL,MAAM;IACN,OAAO;IACP,WAAW,UAAU,SAAS,eAAe,OAAO,OAAO,MAAM,OAAO,KAAK,IAAI,GAAG,CAAC;IACrF,QAAQ;IACR,UAAU,YAAY;IACtB,cAAY,EAAE,sBAAsB,CAAC,GAAG,SAAS;IACjD,kBAAgB,GAAG,MAAM;IACzB,WAAU;GACX,CAAA,GACD,oBAAC,QAAD;IAAM,WAAU;IACb,UAAA,OAAO,QAAQ,QAAQ,GAAG;GACvB,CAAA,CACH;EAEK,CAAA,CAAA;;AAElB"}

package/dist/components/fields/date-picker.d.ts

@@ -0,0 +1,7 @@
+import { DatePickerSchema } from "@alfakit/core";
+//#region src/components/fields/date-picker.d.ts
+export declare function DatePickerField({ component }: {
+  component: DatePickerSchema;
+}): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=date-picker.d.ts.map

package/dist/components/fields/date-picker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker.d.ts","names":[],"sources":["../../../src/components/fields/date-picker.tsx"],"mappings":";;wBA+DgB,kBAAkB;EAAe,WAAW;oBAAkB,IAAA"}

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

@@ -0,0 +1,230 @@
+import { useDirection, useFormatter, useLocalization, useT } from "../../context.js";
+import { cn } from "../../lib/utils.js";
+import { textColorClasses } from "../../lib/colors.js";
+import { Icon } from "../../lib/icons.js";
+import { Button } from "../ui/button.js";
+import { extraProps } from "../../lib/attributes.js";
+import { lazyComponent } from "../../lib/lazy.js";
+import { useField } 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 { LocaleFormatter, formatPhpDate, timeInputStep, wallClockNow, withoutRequired } from "@alfakit/core";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CalendarIcon } from "lucide-react";
+import { format, isValid, parse } from "date-fns";
+//#region src/components/fields/date-picker.tsx
+/**
+* The month grid (react-day-picker) loads the first time a picker opens (or is hovered or
+* focused), not with the form.
+*/
+const Calendar = lazyComponent(() => import("../ui/calendar.js").then((module) => module.Calendar), () => /* @__PURE__ */ jsx("div", {
+	"aria-busy": "true",
+	className: "h-[18.5rem] w-[15.5rem]"
+}));
+/** Convert a PHP date format to a date-fns format string (common tokens only). */
+function phpToDateFnsFormat(format) {
+	const map = {
+		d: "dd",
+		j: "d",
+		D: "EEE",
+		l: "EEEE",
+		m: "MM",
+		n: "M",
+		M: "MMM",
+		F: "MMMM",
+		Y: "yyyy",
+		y: "yy",
+		H: "HH",
+		G: "H",
+		h: "hh",
+		g: "h",
+		i: "mm",
+		s: "ss",
+		A: "a",
+		a: "aaa",
+		U: "t"
+	};
+	return format.split("").map((char) => map[char] ?? (/[a-z]/i.test(char) ? `'${char}'` : char)).join("");
+}
+function DatePickerField({ component }) {
+	const { value, setValue, blur, error, id, disabled, readOnly, aria } = useField(component);
+	const [open, setOpen] = useState(false);
+	const t = useT();
+	const direction = useDirection();
+	const panelFormat = useFormatter();
+	const panelLocale = useLocalization()?.tag ?? "en";
+	const locale = component.locale ?? panelLocale;
+	const format$1 = component.locale ? new LocaleFormatter(component.locale, panelFormat.currencyCode, panelFormat.timeZone) : panelFormat;
+	const storageFormat = phpToDateFnsFormat(component.format);
+	const display = (date) => component.displayFormat ? formatPhpDate(date, component.displayFormat, locale) : format$1.date(date, {
+		...component.hasDate ? { dateStyle: "medium" } : {},
+		...component.hasTime ? { timeStyle: "short" } : {},
+		timeZone: void 0
+	});
+	if (component.native || !component.hasDate) {
+		const nativeType = !component.hasDate ? "time" : component.hasTime ? "datetime-local" : "date";
+		const nativeFormat = nativeType === "time" ? component.hasSeconds ? "HH:mm:ss" : "HH:mm" : nativeType === "datetime-local" ? component.hasSeconds ? "yyyy-MM-dd'T'HH:mm:ss" : "yyyy-MM-dd'T'HH:mm" : "yyyy-MM-dd";
+		const parsed = value ? parse(value, storageFormat, /* @__PURE__ */ new Date()) : null;
+		const nativeValue = parsed && isValid(parsed) ? format(parsed, nativeFormat) : value ?? "";
+		const listId = component.datalist ? `${id}-list` : void 0;
+		return /* @__PURE__ */ jsx(FieldWrapper, {
+			field: component,
+			htmlFor: id,
+			error,
+			children: /* @__PURE__ */ jsxs(DateAffixes, {
+				component,
+				error,
+				children: [/* @__PURE__ */ jsx(Input, {
+					id,
+					type: nativeType,
+					name: component.name,
+					value: nativeValue,
+					step: timeInputStep(component),
+					min: component.minDate ? toNative(component.minDate, storageFormat, nativeFormat) : void 0,
+					max: component.maxDate ? toNative(component.maxDate, storageFormat, nativeFormat) : void 0,
+					onChange: (event) => {
+						const raw = event.target.value;
+						if (raw === "") {
+							setValue(null);
+							return;
+						}
+						const date = parse(raw, nativeFormat, /* @__PURE__ */ new Date());
+						setValue(isValid(date) ? format(date, storageFormat) : raw);
+					},
+					onBlur: blur,
+					disabled,
+					readOnly,
+					required: component.required,
+					lang: component.locale,
+					list: listId,
+					...aria,
+					...extraProps(component.extraInputAttributes)
+				}), component.datalist && /* @__PURE__ */ jsx("datalist", {
+					id: listId,
+					children: component.datalist.map((option) => /* @__PURE__ */ jsx("option", { value: toNative(option, storageFormat, nativeFormat) ?? option }, option))
+				})]
+			})
+		});
+	}
+	const selected = value ? parse(value, storageFormat, /* @__PURE__ */ new Date()) : void 0;
+	const selectedDate = selected && isValid(selected) ? selected : void 0;
+	const focused = component.defaultFocusedDate ? parse(component.defaultFocusedDate, storageFormat, /* @__PURE__ */ new Date()) : void 0;
+	const defaultMonth = selectedDate ?? (focused && isValid(focused) ? focused : void 0);
+	return /* @__PURE__ */ jsx(FieldWrapper, {
+		field: component,
+		htmlFor: id,
+		error,
+		children: /* @__PURE__ */ jsx(DateAffixes, {
+			component,
+			error,
+			children: /* @__PURE__ */ jsxs(Popover, {
+				open,
+				onOpenChange: (next) => setOpen(next && !readOnly),
+				children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+					asChild: true,
+					children: /* @__PURE__ */ jsxs(Button, {
+						id,
+						type: "button",
+						"data-input": "",
+						variant: "outline",
+						disabled,
+						onPointerEnter: () => void Calendar.preload(),
+						onFocus: () => void Calendar.preload(),
+						...withoutRequired(aria),
+						className: cn("w-full justify-start font-normal", !selectedDate && "text-muted-foreground", error && "border-destructive"),
+						children: [/* @__PURE__ */ jsx(CalendarIcon, { className: "size-4" }), selectedDate ? display(selectedDate) : component.placeholder ?? t("form.pick_date", {}, "Pick a date")]
+					})
+				}), /* @__PURE__ */ jsxs(PopoverContent, {
+					className: "w-auto p-0",
+					align: "start",
+					children: [/* @__PURE__ */ jsx(Calendar, {
+						mode: "single",
+						dir: direction,
+						formatters: {
+							formatCaption: (month) => new Intl.DateTimeFormat(locale, {
+								month: "long",
+								year: "numeric"
+							}).format(month),
+							formatWeekdayName: (day) => new Intl.DateTimeFormat(locale, { weekday: "short" }).format(day)
+						},
+						selected: selectedDate,
+						defaultMonth,
+						today: wallClockNow(component.timezone),
+						weekStartsOn: component.firstDayOfWeek,
+						disabled: [
+							...component.minDate ? [{ before: parse(component.minDate, storageFormat, /* @__PURE__ */ new Date()) }] : [],
+							...component.maxDate ? [{ after: parse(component.maxDate, storageFormat, /* @__PURE__ */ new Date()) }] : [],
+							...(component.disabledDates ?? []).map((date) => parse(date, storageFormat, /* @__PURE__ */ new Date()))
+						],
+						onSelect: (date) => {
+							if (!date) {
+								setValue(null);
+								return;
+							}
+							const withTime = selectedDate ? new Date(date.getFullYear(), date.getMonth(), date.getDate(), selectedDate.getHours(), selectedDate.getMinutes(), selectedDate.getSeconds()) : date;
+							setValue(format(withTime, storageFormat));
+							if (component.closeOnDateSelection && !component.hasTime) {
+								setOpen(false);
+								blur();
+							}
+						}
+					}), component.hasTime && /* @__PURE__ */ jsx("div", {
+						className: "border-t p-3",
+						children: /* @__PURE__ */ jsx(Input, {
+							type: "time",
+							step: timeInputStep(component),
+							value: selectedDate ? format(selectedDate, component.hasSeconds ? "HH:mm:ss" : "HH:mm") : "",
+							onChange: (event) => {
+								const base = selectedDate ?? wallClockNow(component.timezone);
+								const [hours = "0", minutes = "0", seconds = "0"] = event.target.value.split(":");
+								const next = new Date(base.getFullYear(), base.getMonth(), base.getDate(), Number(hours), Number(minutes), Number(seconds));
+								setValue(format(next, storageFormat));
+							},
+							onBlur: blur
+						})
+					})]
+				})]
+			})
+		})
+	});
+}
+function toNative(value, storageFormat, nativeFormat) {
+	const date = parse(value, storageFormat, /* @__PURE__ */ new Date());
+	return isValid(date) ? format(date, nativeFormat) : void 0;
+}
+/** Prefix/suffix text and icons (with `prefixIconColor()` / `suffixIconColor()`). */
+function DateAffixes({ component, error, children }) {
+	const hasPrefix = Boolean(component.prefix || component.prefixIcon);
+	const hasSuffix = Boolean(component.suffix || component.suffixIcon);
+	if (!hasPrefix && !hasSuffix) return children;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "input-group",
+		className: cn("border-input dark:bg-input/30 has-[:focus-visible]:border-ring has-[:focus-visible]:ring-ring/50 flex min-h-9 w-full items-stretch overflow-hidden rounded-md border shadow-xs has-[:focus-visible]:ring-[3px]", error && "border-destructive"),
+		children: [
+			hasPrefix && /* @__PURE__ */ jsxs("span", {
+				className: "text-muted-foreground bg-muted/50 flex items-center gap-1 border-e px-3 text-sm whitespace-nowrap",
+				children: [/* @__PURE__ */ jsx(Icon, {
+					name: component.prefixIcon,
+					className: component.prefixIconColor && textColorClasses[component.prefixIconColor]
+				}), component.prefix]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "min-w-0 flex-1 *:h-full *:w-full *:rounded-none *:border-0 *:bg-transparent *:shadow-none *:focus-visible:ring-0 dark:*:bg-transparent",
+				children
+			}),
+			hasSuffix && /* @__PURE__ */ jsxs("span", {
+				className: "text-muted-foreground bg-muted/50 flex items-center gap-1 border-s px-3 text-sm whitespace-nowrap",
+				children: [component.suffix, /* @__PURE__ */ jsx(Icon, {
+					name: component.suffixIcon,
+					className: component.suffixIconColor && textColorClasses[component.suffixIconColor]
+				})]
+			})
+		]
+	});
+}
+//#endregion
+export { DatePickerField, phpToDateFnsFormat };
+
+//# sourceMappingURL=date-picker.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker.js","names":["format","formatDate"],"sources":["../../../src/components/fields/date-picker.tsx"],"sourcesContent":["import {\n  formatPhpDate,\n  LocaleFormatter,\n  timeInputStep,\n  wallClockNow,\n  withoutRequired,\n  type DatePickerSchema,\n} from '@alfakit/core'\nimport { format as formatDate, isValid, parse } from 'date-fns'\nimport { CalendarIcon } from 'lucide-react'\nimport { useState, type ComponentProps, type ReactNode } from 'react'\nimport { useDirection, useFormatter, useLocalization, useT } from '../../context'\nimport { extraProps } from '../../lib/attributes'\nimport { textColorClasses } from '../../lib/colors'\nimport { Icon } from '../../lib/icons'\nimport { lazyComponent } from '../../lib/lazy'\nimport { cn } from '../../lib/utils'\nimport { useField } from '../form/form-context'\nimport { FieldWrapper } from '../schema/field-wrapper'\nimport { Button } from '../ui/button'\nimport type { Calendar as CalendarComponent } from '../ui/calendar'\nimport { Input } from '../ui/input'\nimport { Popover, PopoverContent, PopoverTrigger } from '../ui/popover'\n\n/**\n * The month grid (react-day-picker) loads the first time a picker opens (or is hovered or\n * focused), not with the form.\n */\nconst Calendar = lazyComponent<ComponentProps<typeof CalendarComponent>>(\n  () => import('../ui/calendar').then((module) => module.Calendar),\n  () => <div aria-busy=\"true\" className=\"h-[18.5rem] w-[15.5rem]\" />,\n)\n\n/** Convert a PHP date format to a date-fns format string (common tokens only). */\nexport function phpToDateFnsFormat(format: string): string {\n  const map: Record<string, string> = {\n    d: 'dd',\n    j: 'd',\n    D: 'EEE',\n    l: 'EEEE',\n    m: 'MM',\n    n: 'M',\n    M: 'MMM',\n    F: 'MMMM',\n    Y: 'yyyy',\n    y: 'yy',\n    H: 'HH',\n    G: 'H',\n    h: 'hh',\n    g: 'h',\n    i: 'mm',\n    s: 'ss',\n    A: 'a',\n    a: 'aaa',\n    U: 't',\n  }\n\n  return format\n    .split('')\n    .map((char) => map[char] ?? (/[a-z]/i.test(char) ? `'${char}'` : char))\n    .join('')\n}\n\nexport function DatePickerField({ component }: { component: DatePickerSchema }) {\n  const { value, setValue, blur, error, id, disabled, readOnly, aria } = useField<string | null>(\n    component,\n  )\n  const [open, setOpen] = useState(false)\n\n  const t = useT()\n  const direction = useDirection()\n  const panelFormat = useFormatter()\n  const panelLocale = useLocalization()?.tag ?? 'en'\n  // `locale()` overrides the panel's language for this picker only.\n  const locale = component.locale ?? panelLocale\n  const format = component.locale\n    ? new LocaleFormatter(component.locale, panelFormat.currencyCode, panelFormat.timeZone)\n    : panelFormat\n  const storageFormat = phpToDateFnsFormat(component.format)\n\n  // Month and weekday names come from Intl, so they follow the user's language.\n  const display = (date: Date): string =>\n    component.displayFormat\n      ? formatPhpDate(date, component.displayFormat, locale)\n      : format.date(date, {\n          ...(component.hasDate ? { dateStyle: 'medium' as const } : {}),\n          ...(component.hasTime ? { timeStyle: 'short' as const } : {}),\n          timeZone: undefined,\n        })\n\n  // A time of day has nothing to pick on a calendar: use the time input on its own.\n  if (component.native || !component.hasDate) {\n    const nativeType = !component.hasDate ? 'time' : component.hasTime ? 'datetime-local' : 'date'\n    const nativeFormat =\n      nativeType === 'time'\n        ? component.hasSeconds\n          ? 'HH:mm:ss'\n          : 'HH:mm'\n        : nativeType === 'datetime-local'\n          ? component.hasSeconds\n            ? \"yyyy-MM-dd'T'HH:mm:ss\"\n            : \"yyyy-MM-dd'T'HH:mm\"\n          : 'yyyy-MM-dd'\n\n    const parsed = value ? parse(value, storageFormat, new Date()) : null\n    const nativeValue = parsed && isValid(parsed) ? formatDate(parsed, nativeFormat) : (value ?? '')\n    const listId = component.datalist ? `${id}-list` : undefined\n\n    return (\n      <FieldWrapper field={component} htmlFor={id} error={error}>\n        <DateAffixes component={component} error={error}>\n          <Input\n            id={id}\n            type={nativeType}\n            name={component.name}\n            value={nativeValue}\n            step={timeInputStep(component)}\n            min={\n              component.minDate\n                ? toNative(component.minDate, storageFormat, nativeFormat)\n                : undefined\n            }\n            max={\n              component.maxDate\n                ? toNative(component.maxDate, storageFormat, nativeFormat)\n                : undefined\n            }\n            onChange={(event) => {\n              const raw = event.target.value\n\n              if (raw === '') {\n                setValue(null)\n\n                return\n              }\n\n              const date = parse(raw, nativeFormat, new Date())\n              setValue(isValid(date) ? formatDate(date, storageFormat) : raw)\n            }}\n            onBlur={blur}\n            disabled={disabled}\n            readOnly={readOnly}\n            required={component.required}\n            lang={component.locale}\n            list={listId}\n            {...aria}\n            {...extraProps(component.extraInputAttributes)}\n          />\n          {component.datalist && (\n            <datalist id={listId}>\n              {component.datalist.map((option) => (\n                <option\n                  key={option}\n                  value={toNative(option, storageFormat, nativeFormat) ?? option}\n                />\n              ))}\n            </datalist>\n          )}\n        </DateAffixes>\n      </FieldWrapper>\n    )\n  }\n\n  const selected = value ? parse(value, storageFormat, new Date()) : undefined\n  const selectedDate = selected && isValid(selected) ? selected : undefined\n  const focused = component.defaultFocusedDate\n    ? parse(component.defaultFocusedDate, storageFormat, new Date())\n    : undefined\n  const defaultMonth = selectedDate ?? (focused && isValid(focused) ? focused : undefined)\n\n  return (\n    <FieldWrapper field={component} htmlFor={id} error={error}>\n      <DateAffixes component={component} error={error}>\n        <Popover open={open} onOpenChange={(next) => setOpen(next && !readOnly)}>\n          <PopoverTrigger asChild>\n            <Button\n              id={id}\n              type=\"button\"\n              data-input=\"\"\n              variant=\"outline\"\n              disabled={disabled}\n              onPointerEnter={() => void Calendar.preload()}\n              onFocus={() => void Calendar.preload()}\n              {...withoutRequired(aria)}\n              className={cn(\n                'w-full justify-start font-normal',\n                !selectedDate && 'text-muted-foreground',\n                error && 'border-destructive',\n              )}\n            >\n              <CalendarIcon className=\"size-4\" />\n              {selectedDate\n                ? display(selectedDate)\n                : (component.placeholder ?? t('form.pick_date', {}, 'Pick a date'))}\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar\n              mode=\"single\"\n              dir={direction}\n              formatters={{\n                formatCaption: (month) =>\n                  new Intl.DateTimeFormat(locale, { month: 'long', year: 'numeric' }).format(month),\n                formatWeekdayName: (day) =>\n                  new Intl.DateTimeFormat(locale, { weekday: 'short' }).format(day),\n              }}\n              selected={selectedDate}\n              defaultMonth={defaultMonth}\n              today={wallClockNow(component.timezone)}\n              weekStartsOn={component.firstDayOfWeek as 0 | 1 | 2 | 3 | 4 | 5 | 6}\n              disabled={[\n                ...(component.minDate\n                  ? [{ before: parse(component.minDate, storageFormat, new Date()) }]\n                  : []),\n                ...(component.maxDate\n                  ? [{ after: parse(component.maxDate, storageFormat, new Date()) }]\n                  : []),\n                ...(component.disabledDates ?? []).map((date) =>\n                  parse(date, storageFormat, new Date()),\n                ),\n              ]}\n              onSelect={(date) => {\n                if (!date) {\n                  setValue(null)\n\n                  return\n                }\n\n                const withTime = selectedDate\n                  ? new Date(\n                      date.getFullYear(),\n                      date.getMonth(),\n                      date.getDate(),\n                      selectedDate.getHours(),\n                      selectedDate.getMinutes(),\n                      selectedDate.getSeconds(),\n                    )\n                  : date\n                setValue(formatDate(withTime, storageFormat))\n\n                if (component.closeOnDateSelection && !component.hasTime) {\n                  setOpen(false)\n                  blur()\n                }\n              }}\n            />\n            {component.hasTime && (\n              <div className=\"border-t p-3\">\n                <Input\n                  type=\"time\"\n                  step={timeInputStep(component)}\n                  value={\n                    selectedDate\n                      ? formatDate(selectedDate, component.hasSeconds ? 'HH:mm:ss' : 'HH:mm')\n                      : ''\n                  }\n                  onChange={(event) => {\n                    const base = selectedDate ?? wallClockNow(component.timezone)\n                    const [hours = '0', minutes = '0', seconds = '0'] =\n                      event.target.value.split(':')\n                    const next = new Date(\n                      base.getFullYear(),\n                      base.getMonth(),\n                      base.getDate(),\n                      Number(hours),\n                      Number(minutes),\n                      Number(seconds),\n                    )\n                    setValue(formatDate(next, storageFormat))\n                  }}\n                  onBlur={blur}\n                />\n              </div>\n            )}\n          </PopoverContent>\n        </Popover>\n      </DateAffixes>\n    </FieldWrapper>\n  )\n}\n\nfunction toNative(value: string, storageFormat: string, nativeFormat: string): string | undefined {\n  const date = parse(value, storageFormat, new Date())\n\n  return isValid(date) ? formatDate(date, nativeFormat) : undefined\n}\n\n/** Prefix/suffix text and icons (with `prefixIconColor()` / `suffixIconColor()`). */\nfunction DateAffixes({\n  component,\n  error,\n  children,\n}: {\n  component: DatePickerSchema\n  error?: string\n  children: ReactNode\n}) {\n  const hasPrefix = Boolean(component.prefix || component.prefixIcon)\n  const hasSuffix = Boolean(component.suffix || component.suffixIcon)\n\n  if (!hasPrefix && !hasSuffix) {\n    return children\n  }\n\n  return (\n    <div\n      data-slot=\"input-group\"\n      className={cn(\n        'border-input dark:bg-input/30 has-[:focus-visible]:border-ring has-[:focus-visible]:ring-ring/50 flex min-h-9 w-full items-stretch overflow-hidden rounded-md border shadow-xs has-[:focus-visible]:ring-[3px]',\n        error && 'border-destructive',\n      )}\n    >\n      {hasPrefix && (\n        <span className=\"text-muted-foreground bg-muted/50 flex items-center gap-1 border-e px-3 text-sm whitespace-nowrap\">\n          <Icon\n            name={component.prefixIcon}\n            className={component.prefixIconColor && textColorClasses[component.prefixIconColor]}\n          />\n          {component.prefix}\n        </span>\n      )}\n      <div className=\"min-w-0 flex-1 *:h-full *:w-full *:rounded-none *:border-0 *:bg-transparent *:shadow-none *:focus-visible:ring-0 dark:*:bg-transparent\">\n        {children}\n      </div>\n      {hasSuffix && (\n        <span className=\"text-muted-foreground bg-muted/50 flex items-center gap-1 border-s px-3 text-sm whitespace-nowrap\">\n          {component.suffix}\n          <Icon\n            name={component.suffixIcon}\n            className={component.suffixIconColor && textColorClasses[component.suffixIconColor]}\n          />\n        </span>\n      )}\n    </div>\n  )\n}\n"],"mappings":"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"}

package/dist/components/fields/file-upload.d.ts

@@ -0,0 +1,7 @@
+import { FileUploadSchema } from "@alfakit/core";
+//#region src/components/fields/file-upload.d.ts
+export declare function FileUploadField({ component }: {
+  component: FileUploadSchema;
+}): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=file-upload.d.ts.map

package/dist/components/fields/file-upload.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-upload.d.ts","names":[],"sources":["../../../src/components/fields/file-upload.tsx"],"mappings":";;wBA+CgB,kBAAkB;EAAe,WAAW;oBAAkB,IAAA"}