@arqel-dev/fields 0.8.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Arqel Contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,42 @@
+# @arqel-dev/fields
+
+[![License](https://img.shields.io/badge/license-MIT-blue.svg)](../../LICENSE)
+[![React](https://img.shields.io/badge/react-%5E19-61dafb.svg)](https://react.dev)
+[![Status](https://img.shields.io/badge/status-pre--alpha-orange.svg)](#)
+
+Rich React input components for [Arqel](https://arqel.dev), registered into `@arqel-dev/ui`'s FieldRegistry.
+
+## Status
+
+🚧 **Pre-alpha** — FIELDS-JS-001 + FIELDS-JS-002 entregues (9 components básicos: TextInput, TextareaInput, EmailInput, UrlInput, PasswordInput, NumberInput, CurrencyInput, Checkbox, Toggle).
+
+## Install
+
+```bash
+pnpm add @arqel-dev/fields @arqel-dev/ui @arqel-dev/react @arqel-dev/types
+```
+
+## Usage
+
+```tsx
+// resources/js/app.tsx
+import '@arqel-dev/ui/styles.css';
+import '@arqel-dev/fields/register'; // side effect: registers all built-ins
+
+import { createArqelApp } from '@arqel-dev/react/inertia';
+
+createArqelApp({ appName: 'Acme', pages: import.meta.glob('./Pages/**/*.tsx') });
+```
+
+## Subpath imports
+
+```ts
+import { TextInput, EmailInput } from '@arqel-dev/fields/text';
+import { NumberInput, CurrencyInput } from '@arqel-dev/fields/number';
+import { Checkbox, Toggle } from '@arqel-dev/fields/boolean';
+```
+
+## Links
+
+- [Documentação](https://arqel.dev/docs/fields-js) — em construção
+- [PLANNING](../../PLANNING/08-fase-1-mvp.md) — tickets `FIELDS-JS-*`

package/SKILL.md

@@ -0,0 +1,123 @@
+# SKILL.md — @arqel-dev/fields (JS)
+
+> Contexto canónico para AI agents.
+
+## Purpose
+
+`@arqel-dev/fields` é o pacote de inputs ricos do lado React. Cada componente registra-se no `FieldRegistry` de `@arqel-dev/ui` (via `import '@arqel-dev/fields/register'`) e substitui os fallbacks nativos do `<FieldRenderer>`. O nome usado em `registerField('TextInput', ...)` corresponde ao retornado por `Field::component()` no PHP — a Resource servidor não precisa saber nada do React.
+
+## Status
+
+**Entregue (FIELDS-JS-001..006):**
+
+- Pacote `@arqel-dev/fields` com 12 entry points subpath (`./`, `./register`, `./text`, `./number`, `./boolean`, `./select`, `./relationship`, `./date`, `./file`, `./slug`, `./color`, `./hidden`)
+- **21 components no total** — um por field type canônico:
+  - **text/**: `TextInput`, `TextareaInput`, `EmailInput`, `UrlInput`, `PasswordInput` (toggle reveal com `aria-pressed`)
+  - **number/**: `NumberInput` (stepper buttons), `CurrencyInput` (Intl-format on blur, raw on focus)
+  - **boolean/**: `Checkbox`, `Toggle` (role=switch + iOS track/thumb)
+  - **select/**: `SelectInput` (native), `MultiSelectInput` (chips removíveis + native multiple), `RadioGroup` (role=radiogroup + inline/stacked)
+  - **relationship/**: `BelongsToInput` (async combobox via fetch + 300ms debounce ao `field.props.searchRoute`, role=combobox/listbox), `HasManyReadonly` (lista flat readonly)
+  - **date/**: `DateInput` (`type="date"` nativo + min/max), `DateTimeInput` (`type="datetime-local"` + step se `seconds`)
+  - **file/**: `FileInput` (drag-drop + section semântica, armazena `File` no form state), `ImageInput` (preview via `URL.createObjectURL`, sem crop em Phase 1)
+  - **slug/**: `SlugInput` (normaliza para `[a-z0-9-]+` no keystroke + helper `slugify`)
+  - **color/**: `ColorInput` (native picker + presets + hex text input)
+  - **hidden/**: `HiddenInput` (`type="hidden"` value carrier)
+- Side-effect `register.ts` registra todos os 21 no FieldRegistry
+- `getRegisteredFields()` (re-exportado de `@arqel-dev/ui/form`) retorna nomes registrados ordenados
+- 23 testes Vitest passando — registry roundtrip, behaviour + a11y de cada componente
+- Estilo via CSS vars de `@arqel-dev/ui` (sem hardcode); `aria-invalid` quando há erros
+
+**Por chegar (Phase 2):**
+
+- Image crop (`react-image-crop`)
+- Date-picker custom (`react-day-picker`)
+- Combobox searchable de Base UI para `SelectInput`
+- `SlugInput` auto-derivado de outro field (depende de FormContext exposed pelo `useArqelForm`)
+
+## Creating a custom field
+
+```tsx
+// resources/js/fields/MoneyInput.tsx
+import type { FieldRendererProps } from '@arqel-dev/ui/form';
+
+export function MoneyInput({ field, value, onChange, errors, inputId }: FieldRendererProps) {
+  const hasError = errors !== undefined && errors.length > 0;
+  return (
+    <input
+      id={inputId}
+      type="text"
+      inputMode="decimal"
+      className="…"
+      value={typeof value === 'string' ? value : ''}
+      aria-invalid={hasError || undefined}
+      onChange={(e) => onChange(e.target.value)}
+    />
+  );
+}
+```
+
+```tsx
+// resources/js/app.tsx
+import '@arqel-dev/ui/styles.css';
+import '@arqel-dev/fields/register';
+import { registerField } from '@arqel-dev/ui/form';
+import { MoneyInput } from './fields/MoneyInput';
+
+registerField('MoneyInput', MoneyInput); // depois do register.ts default
+```
+
+```php
+// app/Arqel/Fields/MoneyField.php
+final class MoneyField extends Field
+{
+    protected string $type = 'money';
+    protected string $component = 'MoneyInput';
+}
+```
+
+## Key Contracts
+
+```tsx
+// resources/js/app.tsx
+import '@arqel-dev/ui/styles.css';
+import '@arqel-dev/fields/register'; // side effect: registra inputs ricos
+import { createArqelApp } from '@arqel-dev/react/inertia';
+
+createArqelApp({
+  appName: 'Acme Admin',
+  pages: import.meta.glob('./Pages/**/*.tsx'),
+});
+```
+
+A partir desse import, `<FieldRenderer>` resolve `field.component === 'TextInput'` para o componente rico. Sem o import, cai no fallback nativo de `@arqel-dev/ui/form` (`nativeFields.tsx`).
+
+```tsx
+// Override custom: registre depois do side-effect import
+import { registerField } from '@arqel-dev/ui/form';
+import { MyFancyText } from './MyFancyText';
+
+registerField('TextInput', MyFancyText);
+```
+
+## Conventions
+
+- **Nome do componente** segue o `Field::component()` retornado pelo PHP
+- **Props canônicas** vêm de `FieldRendererProps` (re-exportado de `@arqel-dev/ui/form`): `field`, `value`, `onChange`, `errors`, `disabled`, `inputId`, `describedBy`
+- **Estilos** sempre via `@arqel-dev/ui/utils#cn` + CSS vars (`--color-arqel-*`) — nunca hardcode
+- **A11y**: `aria-invalid` quando `errors.length > 0`, `aria-describedby` propagado, labels associados via `inputId` (gerenciado pelo `<FieldRenderer>`)
+- **Side-effect entry**: `register.ts` é o único arquivo com `sideEffects: true` no `package.json`
+
+## Anti-patterns
+
+- ❌ **Importar `register.ts` mais de uma vez** — registra 2x o mesmo componente; se você precisa override, chame `registerField` direto
+- ❌ **Criar wrapper `<label>` interno** — `<FieldRenderer>` já faz isso; o componente recebe `inputId` para `<input id={inputId}>`
+- ❌ **Hardcode de cor** — usa CSS vars
+- ❌ **Importar de `@arqel-dev/fields/text/TextInput.js`** — usa subpaths declarados (`@arqel-dev/fields/text`)
+- ❌ **Render label dentro do componente** — `<FieldRenderer>` é o dono do label
+
+## Related
+
+- Tickets: [`PLANNING/08-fase-1-mvp.md`](../../PLANNING/08-fase-1-mvp.md) §FIELDS-JS-001..006
+- API: [`PLANNING/06-api-react.md`](../../PLANNING/06-api-react.md) §10
+- Source: [`packages-js/fields-js/src/`](src/)
+- Tests: [`packages-js/fields-js/tests/`](tests/)

package/dist/boolean.d.ts

@@ -0,0 +1,8 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { FieldRendererProps } from '@arqel-dev/ui/form';
+
+declare function Checkbox({ field, value, onChange, errors, disabled, inputId, describedBy, }: FieldRendererProps): react_jsx_runtime.JSX.Element;
+
+declare function Toggle({ field, value, onChange, errors, disabled, inputId, describedBy, }: FieldRendererProps): react_jsx_runtime.JSX.Element;
+
+export { Checkbox, Toggle };

package/dist/boolean.js

@@ -0,0 +1,93 @@
+import { cn } from '@arqel-dev/ui/utils';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/shared/styles.ts
+cn(
+  "h-9 w-full rounded-sm border border-[var(--input)]",
+  "bg-background px-3 text-sm text-foreground",
+  "placeholder:text-muted-foreground",
+  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+  "disabled:cursor-not-allowed disabled:opacity-50",
+  "aria-invalid:border-destructive"
+);
+var checkboxClasses = cn(
+  "h-4 w-4 rounded border-[var(--input)]",
+  "text-primary",
+  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+  "disabled:cursor-not-allowed disabled:opacity-50"
+);
+function Checkbox({
+  field,
+  value,
+  onChange,
+  errors,
+  disabled,
+  inputId,
+  describedBy
+}) {
+  const f = field;
+  const hasError = errors !== void 0 && errors.length > 0;
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      id: inputId,
+      type: "checkbox",
+      className: checkboxClasses,
+      checked: value === true,
+      disabled: disabled || f.disabled || f.readonly,
+      "aria-invalid": hasError || void 0,
+      "aria-describedby": describedBy,
+      onChange: (e) => onChange(e.target.checked)
+    }
+  );
+}
+function Toggle({
+  field,
+  value,
+  onChange,
+  errors,
+  disabled,
+  inputId,
+  describedBy
+}) {
+  const f = field;
+  const checked = value === true;
+  const hasError = errors !== void 0 && errors.length > 0;
+  const isDisabled = disabled || f.disabled || f.readonly;
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        id: inputId,
+        type: "button",
+        role: "switch",
+        "aria-checked": checked,
+        "aria-invalid": hasError || void 0,
+        "aria-describedby": describedBy,
+        disabled: isDisabled,
+        onClick: () => onChange(!checked),
+        className: cn(
+          "relative inline-flex h-6 w-11 items-center rounded-full transition-colors",
+          checked ? "bg-primary" : "bg-muted",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          "disabled:cursor-not-allowed disabled:opacity-50"
+        ),
+        children: /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: cn(
+              "inline-block h-5 w-5 transform rounded-full bg-white shadow transition-transform",
+              checked ? "translate-x-5" : "translate-x-0.5"
+            )
+          }
+        )
+      }
+    ),
+    (f.props.onLabel || f.props.offLabel) && /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: checked ? f.props.onLabel : f.props.offLabel })
+  ] });
+}
+
+export { Checkbox, Toggle };
+//# sourceMappingURL=boolean.js.map
+//# sourceMappingURL=boolean.js.map

package/dist/boolean.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/shared/styles.ts","../src/boolean/Checkbox.tsx","../src/boolean/Toggle.tsx"],"names":["jsx","cn"],"mappings":";;;;AAO4B,EAAA;AAAA,EAC1B,oDAAA;AAAA,EACA,4CAAA;AAAA,EACA,mCAAA;AAAA,EACA,yEAAA;AAAA,EACA,iDAAA;AAAA,EACA;AACF;AAEO,IAAM,eAAA,GAAkB,EAAA;AAAA,EAC7B,uCAAA;AAAA,EACA,cAAA;AAAA,EACA,yEAAA;AAAA,EACA;AACF,CAAA;ACjBO,SAAS,QAAA,CAAS;AAAA,EACvB,KAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,OAAA;AAAA,EACA;AACF,CAAA,EAAuB;AACrB,EAAA,MAAM,CAAA,GAAI,KAAA;AACV,EAAA,MAAM,QAAA,GAAW,MAAA,KAAW,MAAA,IAAa,MAAA,CAAO,MAAA,GAAS,CAAA;AACzD,EAAA,uBACE,GAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACC,EAAA,EAAI,OAAA;AAAA,MACJ,IAAA,EAAK,UAAA;AAAA,MACL,SAAA,EAAW,eAAA;AAAA,MACX,SAAS,KAAA,KAAU,IAAA;AAAA,MACnB,QAAA,EAAU,QAAA,IAAY,CAAA,CAAE,QAAA,IAAY,CAAA,CAAE,QAAA;AAAA,MACtC,gBAAc,QAAA,IAAY,MAAA;AAAA,MAC1B,kBAAA,EAAkB,WAAA;AAAA,MAClB,UAAU,CAAC,CAAA,KAAM,QAAA,CAAS,CAAA,CAAE,OAAO,OAAO;AAAA;AAAA,GAC5C;AAEJ;AChBO,SAAS,MAAA,CAAO;AAAA,EACrB,KAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,OAAA;AAAA,EACA;AACF,CAAA,EAAuB;AACrB,EAAA,MAAM,CAAA,GAAI,KAAA;AACV,EAAA,MAAM,UAAU,KAAA,KAAU,IAAA;AAC1B,EAAA,MAAM,QAAA,GAAW,MAAA,KAAW,MAAA,IAAa,MAAA,CAAO,MAAA,GAAS,CAAA;AACzD,EAAA,MAAM,UAAA,GAAa,QAAA,IAAY,CAAA,CAAE,QAAA,IAAY,CAAA,CAAE,QAAA;AAE/C,EAAA,uBACE,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,yBAAA,EACb,QAAA,EAAA;AAAA,oBAAAA,GAAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,EAAA,EAAI,OAAA;AAAA,QACJ,IAAA,EAAK,QAAA;AAAA,QACL,IAAA,EAAK,QAAA;AAAA,QACL,cAAA,EAAc,OAAA;AAAA,QACd,gBAAc,QAAA,IAAY,MAAA;AAAA,QAC1B,kBAAA,EAAkB,WAAA;AAAA,QAClB,QAAA,EAAU,UAAA;AAAA,QACV,OAAA,EAAS,MAAM,QAAA,CAAS,CAAC,OAAO,CAAA;AAAA,QAChC,SAAA,EAAWC,EAAAA;AAAA,UACT,2EAAA;AAAA,UACA,UAAU,YAAA,GAAe,UAAA;AAAA,UACzB,yEAAA;AAAA,UACA;AAAA,SACF;AAAA,QAEA,QAAA,kBAAAD,GAAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,aAAA,EAAY,MAAA;AAAA,YACZ,SAAA,EAAWC,EAAAA;AAAA,cACT,kFAAA;AAAA,cACA,UAAU,eAAA,GAAkB;AAAA;AAC9B;AAAA;AACF;AAAA,KACF;AAAA,IAAA,CACE,EAAE,KAAA,CAAM,OAAA,IAAW,CAAA,CAAE,KAAA,CAAM,6BAC3BD,GAAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,iCACb,QAAA,EAAA,OAAA,GAAU,CAAA,CAAE,MAAM,OAAA,GAAU,CAAA,CAAE,MAAM,QAAA,EACvC;AAAA,GAAA,EAEJ,CAAA;AAEJ","file":"boolean.js","sourcesContent":["/**\n * Shared input styling — keeps the visual contract consistent across\n * every Field component without forcing a wrapper component.\n */\n\nimport { cn } from '@arqel-dev/ui/utils';\n\nexport const inputClasses = cn(\n  'h-9 w-full rounded-sm border border-[var(--input)]',\n  'bg-background px-3 text-sm text-foreground',\n  'placeholder:text-muted-foreground',\n  'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',\n  'disabled:cursor-not-allowed disabled:opacity-50',\n  'aria-invalid:border-destructive',\n);\n\nexport const checkboxClasses = cn(\n  'h-4 w-4 rounded border-[var(--input)]',\n  'text-primary',\n  'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',\n  'disabled:cursor-not-allowed disabled:opacity-50',\n);\n","import type { BooleanFieldSchema } from '@arqel-dev/types/fields';\nimport type { FieldRendererProps } from '@arqel-dev/ui/form';\nimport { checkboxClasses } from '../shared/styles.js';\n\nexport function Checkbox({\n  field,\n  value,\n  onChange,\n  errors,\n  disabled,\n  inputId,\n  describedBy,\n}: FieldRendererProps) {\n  const f = field as BooleanFieldSchema;\n  const hasError = errors !== undefined && errors.length > 0;\n  return (\n    <input\n      id={inputId}\n      type=\"checkbox\"\n      className={checkboxClasses}\n      checked={value === true}\n      disabled={disabled || f.disabled || f.readonly}\n      aria-invalid={hasError || undefined}\n      aria-describedby={describedBy}\n      onChange={(e) => onChange(e.target.checked)}\n    />\n  );\n}\n","/**\n * `<Toggle>` — switch-style boolean control with optional on/off labels.\n *\n * Renders as a `role=\"switch\"` button so screen readers announce it\n * correctly; styling is the canonical iOS-style track/thumb.\n */\n\nimport type { ToggleFieldSchema } from '@arqel-dev/types/fields';\nimport type { FieldRendererProps } from '@arqel-dev/ui/form';\nimport { cn } from '@arqel-dev/ui/utils';\n\nexport function Toggle({\n  field,\n  value,\n  onChange,\n  errors,\n  disabled,\n  inputId,\n  describedBy,\n}: FieldRendererProps) {\n  const f = field as ToggleFieldSchema;\n  const checked = value === true;\n  const hasError = errors !== undefined && errors.length > 0;\n  const isDisabled = disabled || f.disabled || f.readonly;\n\n  return (\n    <div className=\"flex items-center gap-3\">\n      <button\n        id={inputId}\n        type=\"button\"\n        role=\"switch\"\n        aria-checked={checked}\n        aria-invalid={hasError || undefined}\n        aria-describedby={describedBy}\n        disabled={isDisabled}\n        onClick={() => onChange(!checked)}\n        className={cn(\n          'relative inline-flex h-6 w-11 items-center rounded-full transition-colors',\n          checked ? 'bg-primary' : 'bg-muted',\n          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',\n          'disabled:cursor-not-allowed disabled:opacity-50',\n        )}\n      >\n        <span\n          aria-hidden=\"true\"\n          className={cn(\n            'inline-block h-5 w-5 transform rounded-full bg-white shadow transition-transform',\n            checked ? 'translate-x-5' : 'translate-x-0.5',\n          )}\n        />\n      </button>\n      {(f.props.onLabel || f.props.offLabel) && (\n        <span className=\"text-sm text-muted-foreground\">\n          {checked ? f.props.onLabel : f.props.offLabel}\n        </span>\n      )}\n    </div>\n  );\n}\n"]}

package/dist/color.d.ts

@@ -0,0 +1,6 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { FieldRendererProps } from '@arqel-dev/ui/form';
+
+declare function ColorInput({ field, value, onChange, errors, disabled, inputId, describedBy, }: FieldRendererProps): react_jsx_runtime.JSX.Element;
+
+export { ColorInput };

package/dist/color.js

@@ -0,0 +1,63 @@
+import { cn } from '@arqel-dev/ui/utils';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/color/ColorInput.tsx
+function ColorInput({
+  field,
+  value,
+  onChange,
+  errors,
+  disabled,
+  inputId,
+  describedBy
+}) {
+  const f = field;
+  const hasError = errors !== void 0 && errors.length > 0;
+  const isDisabled = disabled || f.disabled || f.readonly;
+  const current = typeof value === "string" && value.length > 0 ? value : "#000000";
+  const presets = f.props.presets ?? [];
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        id: inputId,
+        type: "color",
+        className: cn(
+          "h-9 w-12 cursor-pointer rounded-sm border border-[var(--input)]",
+          "disabled:cursor-not-allowed disabled:opacity-50"
+        ),
+        value: current,
+        disabled: isDisabled,
+        "aria-invalid": hasError || void 0,
+        "aria-describedby": describedBy,
+        onChange: (e) => onChange(e.target.value)
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "text",
+        className: "h-9 w-28 rounded-sm border border-[var(--input)] bg-background px-2 font-mono text-xs",
+        value: current,
+        disabled: isDisabled,
+        onChange: (e) => onChange(e.target.value)
+      }
+    ),
+    presets.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1", children: presets.map((preset) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "aria-label": `Preset ${preset}`,
+        disabled: isDisabled,
+        onClick: () => onChange(preset),
+        className: "h-6 w-6 rounded-full border border-border disabled:cursor-not-allowed disabled:opacity-50",
+        style: { backgroundColor: preset }
+      },
+      preset
+    )) })
+  ] });
+}
+
+export { ColorInput };
+//# sourceMappingURL=color.js.map
+//# sourceMappingURL=color.js.map

package/dist/color.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/color/ColorInput.tsx"],"names":[],"mappings":";;;;AAYO,SAAS,UAAA,CAAW;AAAA,EACzB,KAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,OAAA;AAAA,EACA;AACF,CAAA,EAAuB;AACrB,EAAA,MAAM,CAAA,GAAI,KAAA;AACV,EAAA,MAAM,QAAA,GAAW,MAAA,KAAW,MAAA,IAAa,MAAA,CAAO,MAAA,GAAS,CAAA;AACzD,EAAA,MAAM,UAAA,GAAa,QAAA,IAAY,CAAA,CAAE,QAAA,IAAY,CAAA,CAAE,QAAA;AAC/C,EAAA,MAAM,UAAU,OAAO,KAAA,KAAU,YAAY,KAAA,CAAM,MAAA,GAAS,IAAI,KAAA,GAAQ,SAAA;AACxE,EAAA,MAAM,OAAA,GAAU,CAAA,CAAE,KAAA,CAAM,OAAA,IAAW,EAAC;AAEpC,EAAA,uBACE,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,mCAAA,EACb,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,OAAA;AAAA,MAAA;AAAA,QACC,EAAA,EAAI,OAAA;AAAA,QACJ,IAAA,EAAK,OAAA;AAAA,QACL,SAAA,EAAW,EAAA;AAAA,UACT,iEAAA;AAAA,UACA;AAAA,SACF;AAAA,QACA,KAAA,EAAO,OAAA;AAAA,QACP,QAAA,EAAU,UAAA;AAAA,QACV,gBAAc,QAAA,IAAY,MAAA;AAAA,QAC1B,kBAAA,EAAkB,WAAA;AAAA,QAClB,UAAU,CAAC,CAAA,KAAM,QAAA,CAAS,CAAA,CAAE,OAAO,KAAK;AAAA;AAAA,KAC1C;AAAA,oBACA,GAAA;AAAA,MAAC,OAAA;AAAA,MAAA;AAAA,QACC,IAAA,EAAK,MAAA;AAAA,QACL,SAAA,EAAU,uFAAA;AAAA,QACV,KAAA,EAAO,OAAA;AAAA,QACP,QAAA,EAAU,UAAA;AAAA,QACV,UAAU,CAAC,CAAA,KAAM,QAAA,CAAS,CAAA,CAAE,OAAO,KAAK;AAAA;AAAA,KAC1C;AAAA,IACC,OAAA,CAAQ,MAAA,GAAS,CAAA,oBAChB,GAAA,CAAC,KAAA,EAAA,EAAI,WAAU,sBAAA,EACZ,QAAA,EAAA,OAAA,CAAQ,GAAA,CAAI,CAAC,MAAA,qBACZ,GAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QAEC,IAAA,EAAK,QAAA;AAAA,QACL,YAAA,EAAY,UAAU,MAAM,CAAA,CAAA;AAAA,QAC5B,QAAA,EAAU,UAAA;AAAA,QACV,OAAA,EAAS,MAAM,QAAA,CAAS,MAAM,CAAA;AAAA,QAC9B,SAAA,EAAU,2FAAA;AAAA,QACV,KAAA,EAAO,EAAE,eAAA,EAAiB,MAAA;AAAO,OAAA;AAAA,MAN5B;AAAA,KAQR,CAAA,EACH;AAAA,GAAA,EAEJ,CAAA;AAEJ","file":"color.js","sourcesContent":["/**\n * `<ColorInput>` — native color picker plus optional preset swatches.\n *\n * `field.props.presets: string[]` (hex strings) renders a strip of\n * clickable swatches above the picker. The native `<input type=\"color\">`\n * is a/11y-friendly out of the box.\n */\n\nimport type { ColorFieldSchema } from '@arqel-dev/types/fields';\nimport type { FieldRendererProps } from '@arqel-dev/ui/form';\nimport { cn } from '@arqel-dev/ui/utils';\n\nexport function ColorInput({\n  field,\n  value,\n  onChange,\n  errors,\n  disabled,\n  inputId,\n  describedBy,\n}: FieldRendererProps) {\n  const f = field as ColorFieldSchema;\n  const hasError = errors !== undefined && errors.length > 0;\n  const isDisabled = disabled || f.disabled || f.readonly;\n  const current = typeof value === 'string' && value.length > 0 ? value : '#000000';\n  const presets = f.props.presets ?? [];\n\n  return (\n    <div className=\"flex flex-wrap items-center gap-2\">\n      <input\n        id={inputId}\n        type=\"color\"\n        className={cn(\n          'h-9 w-12 cursor-pointer rounded-sm border border-[var(--input)]',\n          'disabled:cursor-not-allowed disabled:opacity-50',\n        )}\n        value={current}\n        disabled={isDisabled}\n        aria-invalid={hasError || undefined}\n        aria-describedby={describedBy}\n        onChange={(e) => onChange(e.target.value)}\n      />\n      <input\n        type=\"text\"\n        className=\"h-9 w-28 rounded-sm border border-[var(--input)] bg-background px-2 font-mono text-xs\"\n        value={current}\n        disabled={isDisabled}\n        onChange={(e) => onChange(e.target.value)}\n      />\n      {presets.length > 0 && (\n        <div className=\"flex flex-wrap gap-1\">\n          {presets.map((preset) => (\n            <button\n              key={preset}\n              type=\"button\"\n              aria-label={`Preset ${preset}`}\n              disabled={isDisabled}\n              onClick={() => onChange(preset)}\n              className=\"h-6 w-6 rounded-full border border-border disabled:cursor-not-allowed disabled:opacity-50\"\n              style={{ backgroundColor: preset }}\n            />\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n"]}

package/dist/date.d.ts

@@ -0,0 +1,8 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { FieldRendererProps } from '@arqel-dev/ui/form';
+
+declare function DateInput({ field, value, onChange, errors, disabled, inputId, describedBy, }: FieldRendererProps): react_jsx_runtime.JSX.Element;
+
+declare function DateTimeInput({ field, value, onChange, errors, disabled, inputId, describedBy, }: FieldRendererProps): react_jsx_runtime.JSX.Element;
+
+export { DateInput, DateTimeInput };

package/dist/date.js

@@ -0,0 +1,81 @@
+import { cn } from '@arqel-dev/ui/utils';
+import { jsx } from 'react/jsx-runtime';
+
+// src/shared/styles.ts
+var inputClasses = cn(
+  "h-9 w-full rounded-sm border border-[var(--input)]",
+  "bg-background px-3 text-sm text-foreground",
+  "placeholder:text-muted-foreground",
+  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+  "disabled:cursor-not-allowed disabled:opacity-50",
+  "aria-invalid:border-destructive"
+);
+cn(
+  "h-4 w-4 rounded border-[var(--input)]",
+  "text-primary",
+  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+  "disabled:cursor-not-allowed disabled:opacity-50"
+);
+function DateInput({
+  field,
+  value,
+  onChange,
+  errors,
+  disabled,
+  inputId,
+  describedBy
+}) {
+  const f = field;
+  const hasError = errors !== void 0 && errors.length > 0;
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      id: inputId,
+      type: "date",
+      className: inputClasses,
+      value: typeof value === "string" ? value : "",
+      disabled: disabled || f.disabled || f.readonly,
+      readOnly: f.readonly === true,
+      required: f.required === true,
+      min: f.props.minDate,
+      max: f.props.maxDate,
+      "aria-invalid": hasError || void 0,
+      "aria-describedby": describedBy,
+      onChange: (e) => onChange(e.target.value === "" ? null : e.target.value)
+    }
+  );
+}
+function DateTimeInput({
+  field,
+  value,
+  onChange,
+  errors,
+  disabled,
+  inputId,
+  describedBy
+}) {
+  const f = field;
+  const hasError = errors !== void 0 && errors.length > 0;
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      id: inputId,
+      type: "datetime-local",
+      className: inputClasses,
+      value: typeof value === "string" ? value : "",
+      disabled: disabled || f.disabled || f.readonly,
+      readOnly: f.readonly === true,
+      required: f.required === true,
+      min: f.props.minDate,
+      max: f.props.maxDate,
+      step: f.props.seconds ? 1 : void 0,
+      "aria-invalid": hasError || void 0,
+      "aria-describedby": describedBy,
+      onChange: (e) => onChange(e.target.value === "" ? null : e.target.value)
+    }
+  );
+}
+
+export { DateInput, DateTimeInput };
+//# sourceMappingURL=date.js.map
+//# sourceMappingURL=date.js.map

package/dist/date.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/shared/styles.ts","../src/date/DateInput.tsx","../src/date/DateTimeInput.tsx"],"names":["jsx"],"mappings":";;;;AAOO,IAAM,YAAA,GAAe,EAAA;AAAA,EAC1B,oDAAA;AAAA,EACA,4CAAA;AAAA,EACA,mCAAA;AAAA,EACA,yEAAA;AAAA,EACA,iDAAA;AAAA,EACA;AACF,CAAA;AAE+B,EAAA;AAAA,EAC7B,uCAAA;AAAA,EACA,cAAA;AAAA,EACA,yEAAA;AAAA,EACA;AACF;ACRO,SAAS,SAAA,CAAU;AAAA,EACxB,KAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,OAAA;AAAA,EACA;AACF,CAAA,EAAuB;AACrB,EAAA,MAAM,CAAA,GAAI,KAAA;AACV,EAAA,MAAM,QAAA,GAAW,MAAA,KAAW,MAAA,IAAa,MAAA,CAAO,MAAA,GAAS,CAAA;AACzD,EAAA,uBACE,GAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACC,EAAA,EAAI,OAAA;AAAA,MACJ,IAAA,EAAK,MAAA;AAAA,MACL,SAAA,EAAW,YAAA;AAAA,MACX,KAAA,EAAO,OAAO,KAAA,KAAU,QAAA,GAAW,KAAA,GAAQ,EAAA;AAAA,MAC3C,QAAA,EAAU,QAAA,IAAY,CAAA,CAAE,QAAA,IAAY,CAAA,CAAE,QAAA;AAAA,MACtC,QAAA,EAAU,EAAE,QAAA,KAAa,IAAA;AAAA,MACzB,QAAA,EAAU,EAAE,QAAA,KAAa,IAAA;AAAA,MACzB,GAAA,EAAK,EAAE,KAAA,CAAM,OAAA;AAAA,MACb,GAAA,EAAK,EAAE,KAAA,CAAM,OAAA;AAAA,MACb,gBAAc,QAAA,IAAY,MAAA;AAAA,MAC1B,kBAAA,EAAkB,WAAA;AAAA,MAClB,QAAA,EAAU,CAAC,CAAA,KAAM,QAAA,CAAS,CAAA,CAAE,MAAA,CAAO,KAAA,KAAU,EAAA,GAAK,IAAA,GAAO,CAAA,CAAE,MAAA,CAAO,KAAK;AAAA;AAAA,GACzE;AAEJ;ACpCO,SAAS,aAAA,CAAc;AAAA,EAC5B,KAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,OAAA;AAAA,EACA;AACF,CAAA,EAAuB;AACrB,EAAA,MAAM,CAAA,GAAI,KAAA;AACV,EAAA,MAAM,QAAA,GAAW,MAAA,KAAW,MAAA,IAAa,MAAA,CAAO,MAAA,GAAS,CAAA;AACzD,EAAA,uBACEA,GAAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACC,EAAA,EAAI,OAAA;AAAA,MACJ,IAAA,EAAK,gBAAA;AAAA,MACL,SAAA,EAAW,YAAA;AAAA,MACX,KAAA,EAAO,OAAO,KAAA,KAAU,QAAA,GAAW,KAAA,GAAQ,EAAA;AAAA,MAC3C,QAAA,EAAU,QAAA,IAAY,CAAA,CAAE,QAAA,IAAY,CAAA,CAAE,QAAA;AAAA,MACtC,QAAA,EAAU,EAAE,QAAA,KAAa,IAAA;AAAA,MACzB,QAAA,EAAU,EAAE,QAAA,KAAa,IAAA;AAAA,MACzB,GAAA,EAAK,EAAE,KAAA,CAAM,OAAA;AAAA,MACb,GAAA,EAAK,EAAE,KAAA,CAAM,OAAA;AAAA,MACb,IAAA,EAAM,CAAA,CAAE,KAAA,CAAM,OAAA,GAAU,CAAA,GAAI,MAAA;AAAA,MAC5B,gBAAc,QAAA,IAAY,MAAA;AAAA,MAC1B,kBAAA,EAAkB,WAAA;AAAA,MAClB,QAAA,EAAU,CAAC,CAAA,KAAM,QAAA,CAAS,CAAA,CAAE,MAAA,CAAO,KAAA,KAAU,EAAA,GAAK,IAAA,GAAO,CAAA,CAAE,MAAA,CAAO,KAAK;AAAA;AAAA,GACzE;AAEJ","file":"date.js","sourcesContent":["/**\n * Shared input styling — keeps the visual contract consistent across\n * every Field component without forcing a wrapper component.\n */\n\nimport { cn } from '@arqel-dev/ui/utils';\n\nexport const inputClasses = cn(\n  'h-9 w-full rounded-sm border border-[var(--input)]',\n  'bg-background px-3 text-sm text-foreground',\n  'placeholder:text-muted-foreground',\n  'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',\n  'disabled:cursor-not-allowed disabled:opacity-50',\n  'aria-invalid:border-destructive',\n);\n\nexport const checkboxClasses = cn(\n  'h-4 w-4 rounded border-[var(--input)]',\n  'text-primary',\n  'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',\n  'disabled:cursor-not-allowed disabled:opacity-50',\n);\n","/**\n * `<DateInput>` — native `<input type=\"date\">`.\n *\n * Phase 1 leans on the browser's built-in date picker for footprint\n * reasons. A `react-day-picker`-based custom picker lands in Phase 2\n * when we need locale-specific formatting + min/max enforcement\n * beyond what the native control provides.\n */\n\nimport type { DateFieldSchema } from '@arqel-dev/types/fields';\nimport type { FieldRendererProps } from '@arqel-dev/ui/form';\nimport { inputClasses } from '../shared/styles.js';\n\nexport function DateInput({\n  field,\n  value,\n  onChange,\n  errors,\n  disabled,\n  inputId,\n  describedBy,\n}: FieldRendererProps) {\n  const f = field as DateFieldSchema;\n  const hasError = errors !== undefined && errors.length > 0;\n  return (\n    <input\n      id={inputId}\n      type=\"date\"\n      className={inputClasses}\n      value={typeof value === 'string' ? value : ''}\n      disabled={disabled || f.disabled || f.readonly}\n      readOnly={f.readonly === true}\n      required={f.required === true}\n      min={f.props.minDate}\n      max={f.props.maxDate}\n      aria-invalid={hasError || undefined}\n      aria-describedby={describedBy}\n      onChange={(e) => onChange(e.target.value === '' ? null : e.target.value)}\n    />\n  );\n}\n","import type { DateTimeFieldSchema } from '@arqel-dev/types/fields';\nimport type { FieldRendererProps } from '@arqel-dev/ui/form';\nimport { inputClasses } from '../shared/styles.js';\n\nexport function DateTimeInput({\n  field,\n  value,\n  onChange,\n  errors,\n  disabled,\n  inputId,\n  describedBy,\n}: FieldRendererProps) {\n  const f = field as DateTimeFieldSchema;\n  const hasError = errors !== undefined && errors.length > 0;\n  return (\n    <input\n      id={inputId}\n      type=\"datetime-local\"\n      className={inputClasses}\n      value={typeof value === 'string' ? value : ''}\n      disabled={disabled || f.disabled || f.readonly}\n      readOnly={f.readonly === true}\n      required={f.required === true}\n      min={f.props.minDate}\n      max={f.props.maxDate}\n      step={f.props.seconds ? 1 : undefined}\n      aria-invalid={hasError || undefined}\n      aria-describedby={describedBy}\n      onChange={(e) => onChange(e.target.value === '' ? null : e.target.value)}\n    />\n  );\n}\n"]}

package/dist/file.d.ts

@@ -0,0 +1,8 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { FieldRendererProps } from '@arqel-dev/ui/form';
+
+declare function FileInput({ field, value, onChange, errors, disabled, inputId, describedBy, }: FieldRendererProps): react_jsx_runtime.JSX.Element;
+
+declare function ImageInput({ field, value, onChange, errors, disabled, inputId, describedBy, }: FieldRendererProps): react_jsx_runtime.JSX.Element;
+
+export { FileInput, ImageInput };

package/dist/file.js

@@ -0,0 +1,135 @@
+import { cn } from '@arqel-dev/ui/utils';
+import { useState, useEffect } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/file/FileInput.tsx
+function FileInput({
+  field,
+  value,
+  onChange,
+  errors,
+  disabled,
+  inputId,
+  describedBy
+}) {
+  const f = field;
+  const hasError = errors !== void 0 && errors.length > 0;
+  const isDisabled = disabled || f.disabled || f.readonly;
+  const [dragOver, setDragOver] = useState(false);
+  const file = value instanceof File ? value : null;
+  const filename = file?.name ?? (typeof value === "string" ? value : null);
+  const handleFiles = (files) => {
+    if (!files || files.length === 0) return;
+    onChange(files[0]);
+  };
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      "aria-label": "File upload",
+      onDragOver: (e) => {
+        e.preventDefault();
+        if (!isDisabled) setDragOver(true);
+      },
+      onDragLeave: () => setDragOver(false),
+      onDrop: (e) => {
+        e.preventDefault();
+        setDragOver(false);
+        if (!isDisabled) handleFiles(e.dataTransfer.files);
+      },
+      className: cn(
+        "flex flex-col items-center justify-center gap-2 rounded-sm border-2 border-dashed px-4 py-6 text-sm",
+        dragOver ? "border-primary bg-muted" : "border-border",
+        hasError && "border-destructive",
+        isDisabled && "opacity-50"
+      ),
+      children: [
+        filename ? /* @__PURE__ */ jsx("span", { className: "font-medium", children: filename }) : /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Drag a file here or click to browse" }),
+        /* @__PURE__ */ jsxs("label", { className: "cursor-pointer text-xs text-primary hover:underline", children: [
+          filename ? "Choose another file" : "Browse",
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              id: inputId,
+              type: "file",
+              className: "sr-only",
+              disabled: isDisabled,
+              "aria-invalid": hasError || void 0,
+              "aria-describedby": describedBy,
+              onChange: (e) => handleFiles(e.target.files)
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function ImageInput({
+  field,
+  value,
+  onChange,
+  errors,
+  disabled,
+  inputId,
+  describedBy
+}) {
+  const f = field;
+  const hasError = errors !== void 0 && errors.length > 0;
+  const isDisabled = disabled || f.disabled || f.readonly;
+  const [previewUrl, setPreviewUrl] = useState(null);
+  useEffect(() => {
+    if (value instanceof File) {
+      const url = URL.createObjectURL(value);
+      setPreviewUrl(url);
+      return () => URL.revokeObjectURL(url);
+    }
+    if (typeof value === "string" && value.length > 0) {
+      setPreviewUrl(value);
+      return void 0;
+    }
+    setPreviewUrl(null);
+    return void 0;
+  }, [value]);
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+    previewUrl && /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: previewUrl,
+        alt: "Preview",
+        className: cn("max-h-40 w-auto rounded-sm border border-border")
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "label",
+      {
+        className: cn(
+          "inline-flex w-fit cursor-pointer items-center gap-2 rounded-sm border border-border px-3 py-1.5 text-sm",
+          "hover:bg-muted",
+          isDisabled && "cursor-not-allowed opacity-50"
+        ),
+        children: [
+          previewUrl ? "Replace image" : "Choose image",
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              id: inputId,
+              type: "file",
+              accept: "image/*",
+              className: "sr-only",
+              disabled: isDisabled,
+              "aria-invalid": hasError || void 0,
+              "aria-describedby": describedBy,
+              onChange: (e) => {
+                const file = e.target.files?.[0];
+                if (file) onChange(file);
+              }
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+
+export { FileInput, ImageInput };
+//# sourceMappingURL=file.js.map
+//# sourceMappingURL=file.js.map

package/dist/file.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/file/FileInput.tsx","../src/file/ImageInput.tsx"],"names":["useState","jsxs","jsx","cn"],"mappings":"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","file":"file.js","sourcesContent":["/**\n * `<FileInput>` — drag-drop file picker.\n *\n * Phase 1 stores the selected `File` object directly in the form\n * state; the actual upload happens server-side via Inertia's\n * multipart-aware form submission. Progress events are exposed\n * via `useArqelForm`'s `progress` field (Inertia native).\n */\n\nimport type { FileFieldSchema } from '@arqel-dev/types/fields';\nimport type { FieldRendererProps } from '@arqel-dev/ui/form';\nimport { cn } from '@arqel-dev/ui/utils';\nimport { useState } from 'react';\n\nexport function FileInput({\n  field,\n  value,\n  onChange,\n  errors,\n  disabled,\n  inputId,\n  describedBy,\n}: FieldRendererProps) {\n  const f = field as FileFieldSchema;\n  const hasError = errors !== undefined && errors.length > 0;\n  const isDisabled = disabled || f.disabled || f.readonly;\n  const [dragOver, setDragOver] = useState(false);\n\n  const file = value instanceof File ? value : null;\n  const filename = file?.name ?? (typeof value === 'string' ? value : null);\n\n  const handleFiles = (files: FileList | null) => {\n    if (!files || files.length === 0) return;\n    onChange(files[0]);\n  };\n\n  return (\n    <section\n      aria-label=\"File upload\"\n      onDragOver={(e) => {\n        e.preventDefault();\n        if (!isDisabled) setDragOver(true);\n      }}\n      onDragLeave={() => setDragOver(false)}\n      onDrop={(e) => {\n        e.preventDefault();\n        setDragOver(false);\n        if (!isDisabled) handleFiles(e.dataTransfer.files);\n      }}\n      className={cn(\n        'flex flex-col items-center justify-center gap-2 rounded-sm border-2 border-dashed px-4 py-6 text-sm',\n        dragOver ? 'border-primary bg-muted' : 'border-border',\n        hasError && 'border-destructive',\n        isDisabled && 'opacity-50',\n      )}\n    >\n      {filename ? (\n        <span className=\"font-medium\">{filename}</span>\n      ) : (\n        <span className=\"text-muted-foreground\">Drag a file here or click to browse</span>\n      )}\n      <label className=\"cursor-pointer text-xs text-primary hover:underline\">\n        {filename ? 'Choose another file' : 'Browse'}\n        <input\n          id={inputId}\n          type=\"file\"\n          className=\"sr-only\"\n          disabled={isDisabled}\n          aria-invalid={hasError || undefined}\n          aria-describedby={describedBy}\n          onChange={(e) => handleFiles(e.target.files)}\n        />\n      </label>\n    </section>\n  );\n}\n","/**\n * `<ImageInput>` — image picker with preview.\n *\n * Phase 1 ships preview-only (URL or local `URL.createObjectURL`).\n * Crop / aspect-ratio editor lands in Phase 2 with `react-image-crop`.\n */\n\nimport type { ImageFieldSchema } from '@arqel-dev/types/fields';\nimport type { FieldRendererProps } from '@arqel-dev/ui/form';\nimport { cn } from '@arqel-dev/ui/utils';\nimport { useEffect, useState } from 'react';\n\nexport function ImageInput({\n  field,\n  value,\n  onChange,\n  errors,\n  disabled,\n  inputId,\n  describedBy,\n}: FieldRendererProps) {\n  const f = field as ImageFieldSchema;\n  const hasError = errors !== undefined && errors.length > 0;\n  const isDisabled = disabled || f.disabled || f.readonly;\n\n  const [previewUrl, setPreviewUrl] = useState<string | null>(null);\n\n  useEffect(() => {\n    if (value instanceof File) {\n      const url = URL.createObjectURL(value);\n      setPreviewUrl(url);\n      return () => URL.revokeObjectURL(url);\n    }\n    if (typeof value === 'string' && value.length > 0) {\n      setPreviewUrl(value);\n      return undefined;\n    }\n    setPreviewUrl(null);\n    return undefined;\n  }, [value]);\n\n  return (\n    <div className=\"flex flex-col gap-2\">\n      {previewUrl && (\n        <img\n          src={previewUrl}\n          alt=\"Preview\"\n          className={cn('max-h-40 w-auto rounded-sm border border-border')}\n        />\n      )}\n      <label\n        className={cn(\n          'inline-flex w-fit cursor-pointer items-center gap-2 rounded-sm border border-border px-3 py-1.5 text-sm',\n          'hover:bg-muted',\n          isDisabled && 'cursor-not-allowed opacity-50',\n        )}\n      >\n        {previewUrl ? 'Replace image' : 'Choose image'}\n        <input\n          id={inputId}\n          type=\"file\"\n          accept=\"image/*\"\n          className=\"sr-only\"\n          disabled={isDisabled}\n          aria-invalid={hasError || undefined}\n          aria-describedby={describedBy}\n          onChange={(e) => {\n            const file = e.target.files?.[0];\n            if (file) onChange(file);\n          }}\n        />\n      </label>\n    </div>\n  );\n}\n"]}