@panneau/fields 5.0.0-alpha.1 → 5.0.0-alpha.10

package/README.md

@@ -4,6 +4,7 @@ Controlled field components for the protocol's built-in field types, built on [`
 
 ```bash
 npm install @panneau/fields@^5.0.0-alpha.0 @panneau/ui@^5.0.0-alpha.0 react-aria-components react-intl
+npm install @uppy/core@^6.3.0 @uppy/aws-s3@^6.3.0   # only for @panneau/fields/uppy
 ```
 
 ```tsx
@@ -19,25 +20,34 @@ import { PanneauRoot } from '@panneau/ui';
 
 Every field takes `value`, `onChange`, `onBlur`, `errors`, `disabled`, `readOnly`, `required`, `label` and `description`, plus `className` and `xxxClassName` props for its inner elements. Fields keep no value of their own, and an empty value is `null`.
 
-| Import                      | Components                                   | Value                                          |
-| --------------------------- | -------------------------------------------- | ---------------------------------------------- |
-| `@panneau/fields/text`      | `TextField`                                  | `string`                                       |
-| `@panneau/fields/textarea`  | `TextAreaField`                              | `string`                                       |
-| `@panneau/fields/number`    | `NumberField`                                | `number`                                       |
-| `@panneau/fields/boolean`   | `BooleanField` (checkbox, switch)            | `boolean`                                      |
-| `@panneau/fields/date`      | `DateField`                                  | `'2026-10-15'`                                 |
-| `@panneau/fields/datetime`  | `DateTimeField`                              | `'2026-10-15T13:30:00Z'`, or without an offset |
-| `@panneau/fields/time`      | `TimeField`                                  | `'09:30'`                                      |
-| `@panneau/fields/select`    | `SelectField` (dropdown, radios, checkboxes) | an option's value, or a list with `multiple`   |
-| `@panneau/fields/email`     | `EmailField`                                 | `string`                                       |
-| `@panneau/fields/url`       | `UrlField`                                   | `string`, with `https://` added on blur        |
-| `@panneau/fields/color`     | `ColorField`                                 | `'#1d4ed8'`                                    |
-| `@panneau/fields/slug`      | `SlugField`, `slugify()`                     | `string`, following a `source` until edited    |
-| `@panneau/fields/localized` | `LocalizedField`                             | `{ fr: …, en: … }`                             |
-| `@panneau/fields/group`     | `GroupField`                                 | an object                                      |
-| `@panneau/fields/repeater`  | `RepeaterField` (items or typed blocks)      | a list of objects; blocks have a `type`        |
-| `@panneau/fields/relation`  | `RelationField`, `createRelationSource()`    | `{ id, label }`, or a list with `multiple`     |
-| `@panneau/fields/locales`   | `en`, `fr`                                   | deprecated: use `@panneau/intl`                |
+| Import                      | Components                                   | Value                                                               |
+| --------------------------- | -------------------------------------------- | ------------------------------------------------------------------- |
+| `@panneau/fields/text`      | `TextField`                                  | `string`                                                            |
+| `@panneau/fields/textarea`  | `TextAreaField`                              | `string`                                                            |
+| `@panneau/fields/number`    | `NumberField`                                | `number`                                                            |
+| `@panneau/fields/boolean`   | `BooleanField` (checkbox, switch)            | `boolean`                                                           |
+| `@panneau/fields/date`      | `DateField`                                  | `'2026-10-15'`                                                      |
+| `@panneau/fields/datetime`  | `DateTimeField`                              | `'2026-10-15T13:30:00Z'`, or without an offset                      |
+| `@panneau/fields/time`      | `TimeField`                                  | `'09:30'`                                                           |
+| `@panneau/fields/select`    | `SelectField` (dropdown, radios, checkboxes) | an option's value, or a list with `multiple`                        |
+| `@panneau/fields/email`     | `EmailField`                                 | `string`                                                            |
+| `@panneau/fields/url`       | `UrlField`                                   | `string`, with `https://` added on blur                             |
+| `@panneau/fields/color`     | `ColorField`                                 | `'#1d4ed8'`                                                         |
+| `@panneau/fields/slug`      | `SlugField`, `slugify()`, `sourceText()`     | `string`, following a `source` until edited, checked with `onCheck` |
+| `@panneau/fields/tel`       | `TelField`                                   | `string`, as typed                                                  |
+| `@panneau/fields/range`     | `RangeField` (a slider)                      | `number`, `null` until moved                                        |
+| `@panneau/fields/duration`  | `DurationField`, `formatDuration()`          | seconds, typed in hours, minutes and seconds                        |
+| `@panneau/fields/json`      | `JsonField`, `parseJson()`                   | an object or an array; the text while it doesn't parse              |
+| `@panneau/fields/tags`      | `TagsField`                                  | a list of strings, free or among suggestions                        |
+| `@panneau/fields/embed`     | `EmbedField`                                 | `{ url, title, thumbnailUrl, … }`, from the backend (below)         |
+| `@panneau/fields/location`  | `LocationField`, `createNominatimSource()`   | `{ lat, lng, address }`, on a map (below)                           |
+| `@panneau/fields/localized` | `LocalizedField`                             | `{ fr: …, en: … }`                                                  |
+| `@panneau/fields/group`     | `GroupField`                                 | an object                                                           |
+| `@panneau/fields/repeater`  | `RepeaterField` (items or typed blocks)      | a list of objects; blocks have a `type`                             |
+| `@panneau/fields/relation`  | `RelationField`, `createRelationSource()`    | `{ id, label }`, or a list with `multiple`                          |
+| `@panneau/fields/file`      | `FileField`                                  | a file, or a list with `multiple` (below)                           |
+| `@panneau/fields/uppy`      | `createUppyUploadSource()`                   | the upload source on Uppy 6 (below)                                 |
+| `@panneau/fields/locales`   | `en`, `fr`                                   | deprecated: use `@panneau/intl`                                     |
 
 ## From a definition
 
@@ -65,10 +75,81 @@ import {
 - **Relations** search a `RelationSource`. `createRelationSource()` makes one from any adapter with a `list()` method, such as the `DataAdapter` of `@panneau/data`. Labels come from the resource's `itemTitle`. Without a source, a relation field shows its references, read-only.
     - **Plain ids.** Values can be ids (`"12"`, `["12", "13"]`), as a product's own API gives them. The field shows their labels once the source's optional `resolve(resource, ids)` gives them (`createRelationSource()` implements it with the adapter's `get()`), and their ids until then. Fields that show the same ids share one request. `useRelationReferences()` does the same for other components.
     - **Creating from the picker.** When the source has `create(resource, text)`, the picker offers "Create “…”" for a text that matches no item, and adds the new item. `createRelationSource(adapter, { create: true })` creates it with the adapter's `create()`, with the text as its `itemTitle` (in every locale when it is localized), on the resources that allow `create`; a function gives other values. A field's `onCreate` prop replaces the source's, and can open a dialog with a full form: it resolves with the new reference, or `null`. `onCreate={null}` turns creating off.
-- **Plugin slot:** a type without an entry, such as `richtext` and `media` until Phase 2, renders a placeholder that names it. A plugin that provides the type replaces it.
+- **Files** upload through the `uploadSource` of the provider (below). Without one, the value holds the files themselves.
+- **Plugin slot:** a type without an entry, such as `richtext` and `media` without their plugins (`@panneau/editor`, `@panneau/media`), renders a placeholder that names it. A plugin that provides the type replaces it.
+
+## Files and uploads
+
+`FileField` (the `file` type) holds files that belong to an item, outside the media library: an attachment, a PDF, a CSV ([decision 0025](../../docs/decisions/0025-presigned-uploads.md)). Its value is a file, or a list of them with `multiple`:
+
+- a **stored file**, `{ name, url, mime, size }`, as items give it: the field shows it with a link;
+- an **uploaded file**, `{ upload, name, mime, size }`, once the browser sent the file to storage: requests send its `upload`;
+- the **`File` itself**, without an upload source: the adapter sends it in `multipart/form-data`.
+
+A new file replaces the file of a single value, and is added to a multiple one. `accept` and `maxSize` (from the field's `accept`, its `accept` rule and its `maxSize` rule) refuse files before they are sent. A read-only field only shows its files.
+
+**Upload sources.** An `UploadSource` makes an uploader for each field, which reports each file's progress and gives its upload once it is done. `createUppyUploadSource()` of `@panneau/fields/uppy` makes one on Uppy 6: files go to S3-compatible storage with URLs that the backend signs, in parts when they are large (they can pause and resume), and each upload is completed with the backend. `@uppy/core` and `@uppy/aws-s3` 6 are optional peer dependencies, only for that entry point: nothing else in the package imports Uppy. Make the source once, and pass it as `uploadSource` to `FieldsProvider`, or to `FormView` of `@panneau/forms`, when the definition announces direct uploads:
+
+```tsx
+import { createUppyUploadSource } from '@panneau/fields/uppy';
+
+const uploadSource =
+    definition.uploads?.mode === 'presigned' && adapter.presignedUploads !== undefined
+        ? createUppyUploadSource(
+              adapter.presignedUploads({ endpoint: definition.uploads.endpoint }),
+          )
+        : null;
+
+<FieldsProvider components={builtInFields} uploadSource={uploadSource}>
+    …
+</FieldsProvider>;
+```
+
+`adapter.presignedUploads()` comes from `@panneau/data`; `createUppyUploadSource()` only needs an object with its `signRequest()` and `complete()` (`PresignedUploadsLike`), so fields don't depend on `@panneau/data`. A field's `uploadSource` prop overrides the provider's, and `null` turns uploads off.
+
+**Building blocks.** `@panneau/fields` also exports what the file field is made of, for other fields that take files (the media field of `@panneau/media`): `useUploads()` (checks files, uploads them through a source, and gives their state), `UploadList` (a progress bar per file, with pause, resume, cancel and retry), `FilePicker` (a button and a drop zone), and `formatSize()`, `matchesMime()`, `getAccept()`, `getMaxSize()`.
 
 ## Messages
 
 Strings go through react-intl, with English defaults. Add the messages of every Panneau package to the app's with `withPanneauMessages()` from [`@panneau/intl`](../intl), or use `fieldsPlugin`, which carries the French messages of every package (`ui`, `fields` and `forms`).
 
 The package layout, scripts and API reports are explained in [`docs/packages.md`](../../docs/packages.md).
+
+## Checking a value
+
+A field with `check` in the definition, such as a `slug`, checks its value with the backend as it is typed ([decision 0032](../../docs/decisions/0032-field-checks-and-slugs.md)). The slug field then shows the URL the backend gives, says when the slug is taken with a free one to use, and is read-only when the backend says the field doesn't apply to the item. Give forms a check source for the item they edit:
+
+```tsx
+import { createFieldCheckSource } from '@panneau/fields';
+
+<FormView form={form} checkSource={createFieldCheckSource(adapter, 'pages', item?.id ?? null)} />;
+```
+
+Without one, fields don't check, and the slug shows its fixed `settings.prefix`.
+
+## Embeds and places
+
+An `embed` field shows the title and the thumbnail of a URL's video, sound or post. It gets them from the backend (`GET /embeds`), through the embed source of the provider; without one, it keeps the URL alone:
+
+```tsx
+import { createEmbedSource } from '@panneau/fields';
+
+<FieldsProvider embedSource={createEmbedSource(adapter)}>…</FieldsProvider>;
+```
+
+A `location` field places a point on a Leaflet map, loaded when the field is first shown. The tiles are OpenStreetMap's by default. `maps` sets other tiles and an address search, a `GeocodingSource`: `createNominatimSource()` searches OpenStreetMap's Nominatim, whose [usage policy](https://operations.osmfoundation.org/policies/nominatim/) suits small volumes; a product with more uses its own service. Without a geocoding source, the field has no address search, and the latitude and longitude are typed or picked on the map.
+
+```tsx
+import { createNominatimSource } from '@panneau/fields';
+
+<FieldsProvider
+    maps={{
+        tiles: { url: 'https://tiles.example.com/{z}/{x}/{y}.png', attribution: '© Example' },
+        geocoding: createNominatimSource({ email: 'dev@example.com', countryCodes: ['ca'] }),
+    }}
+>
+    …
+</FieldsProvider>;
+```
+
+`<Panneau>` and `createPanneauApp()` give the embed source of their adapter, and take `maps`.

package/dist/boolean/BooleanField.d.ts

@@ -1,4 +1,4 @@
-import type { FieldEntryProps, FieldProps } from '../shared/types';
+import type { FieldEntryProps, FieldProps } from '../shared/types.js';
 export interface BooleanFieldProps extends Omit<FieldProps<boolean>, 'labelClassName'> {
     /** `checkbox` (default) for a choice saved with the form, `switch` for an on and off setting. */
     widget?: 'checkbox' | 'switch';

package/dist/boolean/BooleanField.js

@@ -4,23 +4,84 @@ import { Checkbox, Switch } from "@panneau/ui";
 import { jsx } from "react/jsx-runtime";
 //#region src/boolean/BooleanField.tsx
 /** A yes or no value, as a checkbox or a switch with its label. An empty value is `false`. */
-function BooleanField({ value, onChange, label, widget = "checkbox", disabled, readOnly, required, controlClassName, ...props }) {
-	const shared = {
-		...props,
-		isSelected: value === true,
-		onChange: (next) => onChange?.(next),
-		isDisabled: disabled,
-		isReadOnly: readOnly,
-		isRequired: required,
-		children: label
-	};
-	return widget === "switch" ? /* @__PURE__ */ jsx(Switch, {
-		...shared,
-		switchClassName: controlClassName
-	}) : /* @__PURE__ */ jsx(Checkbox, {
-		...shared,
-		checkboxClassName: controlClassName
-	});
+function BooleanField(t0) {
+	const $ = c(24);
+	let controlClassName;
+	let disabled;
+	let label;
+	let onChange;
+	let props;
+	let readOnly;
+	let required;
+	let t1;
+	let value;
+	if ($[0] !== t0) {
+		({value, onChange, label, widget: t1, disabled, readOnly, required, controlClassName, ...props} = t0);
+		$[0] = t0;
+		$[1] = controlClassName;
+		$[2] = disabled;
+		$[3] = label;
+		$[4] = onChange;
+		$[5] = props;
+		$[6] = readOnly;
+		$[7] = required;
+		$[8] = t1;
+		$[9] = value;
+	} else {
+		controlClassName = $[1];
+		disabled = $[2];
+		label = $[3];
+		onChange = $[4];
+		props = $[5];
+		readOnly = $[6];
+		required = $[7];
+		t1 = $[8];
+		value = $[9];
+	}
+	const widget = t1 === void 0 ? "checkbox" : t1;
+	const t2 = value === true;
+	let t3;
+	if ($[10] !== onChange) {
+		t3 = (next) => onChange?.(next);
+		$[10] = onChange;
+		$[11] = t3;
+	} else t3 = $[11];
+	let t4;
+	if ($[12] !== disabled || $[13] !== label || $[14] !== props || $[15] !== readOnly || $[16] !== required || $[17] !== t2 || $[18] !== t3) {
+		t4 = {
+			...props,
+			isSelected: t2,
+			onChange: t3,
+			isDisabled: disabled,
+			isReadOnly: readOnly,
+			isRequired: required,
+			children: label
+		};
+		$[12] = disabled;
+		$[13] = label;
+		$[14] = props;
+		$[15] = readOnly;
+		$[16] = required;
+		$[17] = t2;
+		$[18] = t3;
+		$[19] = t4;
+	} else t4 = $[19];
+	const shared = t4;
+	let t5;
+	if ($[20] !== controlClassName || $[21] !== shared || $[22] !== widget) {
+		t5 = widget === "switch" ? /* @__PURE__ */ jsx(Switch, {
+			...shared,
+			switchClassName: controlClassName
+		}) : /* @__PURE__ */ jsx(Checkbox, {
+			...shared,
+			checkboxClassName: controlClassName
+		});
+		$[20] = controlClassName;
+		$[21] = shared;
+		$[22] = widget;
+		$[23] = t5;
+	} else t5 = $[23];
+	return t5;
 }
 /** The `boolean` type: setting `widget` (`checkbox` or `switch`). */
 function BooleanFieldEntry(props) {

package/dist/boolean/BooleanField.js.map

@@ -1 +1 @@
-{"version":3,"file":"BooleanField.js","names":["_c"],"sources":["../../src/boolean/BooleanField.tsx"],"sourcesContent":["import { Checkbox, Switch } from '@panneau/ui';\n\nimport { getFieldProps, getSetting, isString } from '../shared/entry';\nimport type { FieldEntryProps, FieldProps } from '../shared/types';\n\nexport interface BooleanFieldProps extends Omit<FieldProps<boolean>, 'labelClassName'> {\n    /** `checkbox` (default) for a choice saved with the form, `switch` for an on and off setting. */\n    widget?: 'checkbox' | 'switch';\n    controlClassName?: string;\n}\n\n/** A yes or no value, as a checkbox or a switch with its label. An empty value is `false`. */\nexport function BooleanField({\n    value,\n    onChange,\n    label,\n    widget = 'checkbox',\n    disabled,\n    readOnly,\n    required,\n    controlClassName,\n    ...props\n}: BooleanFieldProps) {\n    const shared = {\n        ...props,\n        isSelected: value === true,\n        onChange: (next: boolean) => onChange?.(next),\n        isDisabled: disabled,\n        isReadOnly: readOnly,\n        isRequired: required,\n        children: label,\n    };\n    return widget === 'switch' ? (\n        <Switch {...shared} switchClassName={controlClassName} />\n    ) : (\n        <Checkbox {...shared} checkboxClassName={controlClassName} />\n    );\n}\n\n/** The `boolean` type: setting `widget` (`checkbox` or `switch`). */\nexport function BooleanFieldEntry(props: FieldEntryProps) {\n    const widget = getSetting(props.field, 'widget', isString);\n    return (\n        <BooleanField\n            {...getFieldProps(props)}\n            value={props.value === true}\n            onChange={props.onChange}\n            {...(widget === 'switch' || widget === 'checkbox' ? { widget } : {})}\n        />\n    );\n}\n"],"mappings":";;;;;;AAYA,SAAgB,aAAa,EACzB,OACA,UACA,OACA,SAAS,YACT,UACA,UACA,UACA,kBACA,GAAG,SACe;CAClB,MAAM,SAAS;EACX,GAAG;EACH,YAAY,UAAU;EACtB,WAAW,SAAkB,WAAW,IAAI;EAC5C,YAAY;EACZ,YAAY;EACZ,YAAY;EACZ,UAAU;CACd;CACA,OAAO,WAAW,WACd,oBAAC,QAAD;EAAQ,GAAI;EAAQ,iBAAiB;CAAiB,CAAA,IAEtD,oBAAC,UAAD;EAAU,GAAI;EAAQ,mBAAmB;CAAiB,CAAA;AAElE;;AAGA,SAAO,kBAAA,OAAA;CAAA,MAAA,IAAAA,EAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,MAAA,OAAA;EACY,KAAA,WAAW,MAAK,OAAQ,UAAU,QAAQ;EAAC,EAAA,KAAA,MAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAA1D,MAAA,SAAe;CAA4C,IAAA;CAAA,IAAA,EAAA,OAAA,OAAA;EAG/C,KAAA,cAAc,KAAK;EAAC,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CACjB,MAAA,KAAA,MAAK,UAAW;CAAI,IAAA;CAAA,IAAA,EAAA,OAAA,QAAA;EAEtB,KAAA,WAAW,YAAY,WAAW,aAAlC,EAAA,OAA6D,IAA7D,CAA6D;EAAC,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,MAAA,YAAA,EAAA,OAAA,MAAA,EAAA,OAAA,MAAA,EAAA,OAAA,IAAA;EAJvE,KAAA,oBAAC,cAAD;GAAa,GACL;GACG,OAAA;GACG,UAAA,MAAK;GAAS,GACnB;EAA8D,CAAA;EACrE,EAAA,KAAA,MAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,MAAA;CAAA,OAAA,KAAA,EAAA;CAAA,OALF;AAKE"}
+{"version":3,"file":"BooleanField.js","names":["Checkbox","Switch","getFieldProps","getSetting","isString","FieldEntryProps","FieldProps","BooleanFieldProps","Omit","widget","controlClassName","BooleanField","t0","$","_c","disabled","label","onChange","props","readOnly","required","t1","value","undefined","t2","t3","next","t4","isSelected","isDisabled","isReadOnly","isRequired","children","shared","t5","BooleanFieldEntry","field","_c"],"sources":["../../src/boolean/BooleanField.tsx"],"sourcesContent":["import { Checkbox, Switch } from '@panneau/ui';\n\nimport { getFieldProps, getSetting, isString } from '../shared/entry';\nimport type { FieldEntryProps, FieldProps } from '../shared/types';\n\nexport interface BooleanFieldProps extends Omit<FieldProps<boolean>, 'labelClassName'> {\n    /** `checkbox` (default) for a choice saved with the form, `switch` for an on and off setting. */\n    widget?: 'checkbox' | 'switch';\n    controlClassName?: string;\n}\n\n/** A yes or no value, as a checkbox or a switch with its label. An empty value is `false`. */\nexport function BooleanField({\n    value,\n    onChange,\n    label,\n    widget = 'checkbox',\n    disabled,\n    readOnly,\n    required,\n    controlClassName,\n    ...props\n}: BooleanFieldProps) {\n    const shared = {\n        ...props,\n        isSelected: value === true,\n        onChange: (next: boolean) => onChange?.(next),\n        isDisabled: disabled,\n        isReadOnly: readOnly,\n        isRequired: required,\n        children: label,\n    };\n    return widget === 'switch' ? (\n        <Switch {...shared} switchClassName={controlClassName} />\n    ) : (\n        <Checkbox {...shared} checkboxClassName={controlClassName} />\n    );\n}\n\n/** The `boolean` type: setting `widget` (`checkbox` or `switch`). */\nexport function BooleanFieldEntry(props: FieldEntryProps) {\n    const widget = getSetting(props.field, 'widget', isString);\n    return (\n        <BooleanField\n            {...getFieldProps(props)}\n            value={props.value === true}\n            onChange={props.onChange}\n            {...(widget === 'switch' || widget === 'checkbox' ? { widget } : {})}\n        />\n    );\n}\n"],"mappings":"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"}

package/dist/boolean/index.d.ts

@@ -1,2 +1,2 @@
-export { BooleanField, BooleanFieldEntry, type BooleanFieldProps } from './BooleanField';
+export { BooleanField, BooleanFieldEntry, type BooleanFieldProps } from './BooleanField.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/color/ColorField.css

@@ -1,4 +1,4 @@
-.panneau-swatch-J24Ak3 {
+.panneau-color-field-swatch {
     position: relative;
     display: inline-flex;
     width: 1.5rem;
@@ -8,12 +8,12 @@
     border-radius: var(--panneau-radius-sm);
 }
 
-.panneau-swatch-J24Ak3:focus-within {
+.panneau-color-field-swatch:focus-within {
     outline: var(--panneau-focus-width) solid var(--panneau-color-focus);
     outline-offset: 2px;
 }
 
-.panneau-picker-b7gdnM {
+.panneau-color-field-picker {
     position: absolute;
     inset: -0.5rem;
     width: calc(100% + 1rem);
@@ -24,10 +24,10 @@
     border: 0;
 }
 
-.panneau-picker-b7gdnM:disabled {
+.panneau-color-field-picker:disabled {
     cursor: not-allowed;
 }
 
-.panneau-input-1t8LLx {
+.panneau-color-field-input {
     font-family: var(--panneau-font-family-mono);
 }

package/dist/color/ColorField.d.ts

@@ -1,5 +1,5 @@
-import type { FieldEntryProps } from '../shared/types';
-import { type TextFieldProps } from '../text/TextField';
+import type { FieldEntryProps } from '../shared/types.js';
+import { type TextFieldProps } from '../text/TextField.js';
 export type ColorFieldProps = Omit<TextFieldProps, 'type' | 'prefix' | 'maxLength'>;
 /**
  * Normalizes a hexadecimal color: `#` prefix, lowercase, and 3 digits expanded to 6. Returns the

package/dist/color/ColorField.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorField.js","names":["value","onChange","disabled","readOnly","_c","styles"],"sources":["../../src/color/ColorField.tsx"],"sourcesContent":["import { usePanneauIntl } from '@panneau/ui';\n\nimport { cx } from '../shared/cx';\nimport { getFieldProps, isString } from '../shared/entry';\nimport { messages } from '../shared/messages';\nimport type { FieldEntryProps } from '../shared/types';\nimport { TextField, type TextFieldProps } from '../text/TextField';\nimport styles from './ColorField.module.css';\n\nexport type ColorFieldProps = Omit<TextFieldProps, 'type' | 'prefix' | 'maxLength'>;\n\n/**\n * Normalizes a hexadecimal color: `#` prefix, lowercase, and 3 digits expanded to 6. Returns the\n * text as is when it isn't a hexadecimal color.\n */\nexport function normalizeColor(value: string): string {\n    const trimmed = value.trim().toLowerCase();\n    const digits = trimmed.replace(/^#/, '');\n    if (/^[0-9a-f]{3}$/.test(digits)) {\n        return `#${[...digits].map((digit) => digit + digit).join('')}`;\n    }\n    if (/^[0-9a-f]{6}$/.test(digits) || /^[0-9a-f]{8}$/.test(digits)) {\n        return `#${digits}`;\n    }\n    return trimmed;\n}\n\n/**\n * A color as a hexadecimal value (`#1d4ed8`): typed, or picked with the browser's color picker.\n * The value is normalized on blur.\n */\nexport function ColorField({\n    value,\n    onChange,\n    onBlur,\n    disabled,\n    readOnly,\n    inputClassName,\n    ...props\n}: ColorFieldProps) {\n    const intl = usePanneauIntl();\n    const valid = value !== null && value !== undefined && /^#[0-9a-f]{6}$/i.test(value);\n    return (\n        <TextField\n            autoComplete=\"off\"\n            {...props}\n            value={value}\n            onChange={onChange}\n            disabled={disabled}\n            readOnly={readOnly}\n            inputClassName={cx(styles.input, inputClassName)}\n            onBlur={() => {\n                if (value !== null && value !== undefined) {\n                    const next = normalizeColor(value);\n                    if (next !== value) {\n                        onChange?.(next === '' ? null : next);\n                    }\n                }\n                onBlur?.();\n            }}\n            prefix={\n                <span\n                    className={styles.swatch}\n                    style={{ backgroundColor: valid ? value : 'transparent' }}\n                >\n                    <input\n                        type=\"color\"\n                        className={styles.picker}\n                        value={valid ? value.toLowerCase() : '#000000'}\n                        onChange={(event) => onChange?.(event.target.value)}\n                        disabled={disabled === true || readOnly === true}\n                        aria-label={intl.formatMessage(messages.pickColor)}\n                    />\n                </span>\n            }\n        />\n    );\n}\n\n/** The `color` type. */\nexport function ColorFieldEntry(props: FieldEntryProps) {\n    return (\n        <ColorField\n            {...getFieldProps(props)}\n            value={isString(props.value) ? props.value : null}\n            onChange={props.onChange}\n        />\n    );\n}\n"],"mappings":"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"}
+{"version":3,"file":"ColorField.js","names":["usePanneauIntl","cx","getFieldProps","isString","messages","FieldEntryProps","TextField","TextFieldProps","styles","ColorFieldProps","Omit","normalizeColor","value","trimmed","trim","toLowerCase","digits","replace","test","map","digit","join","ColorField","t0","$","_c","disabled","inputClassName","onBlur","onChange","props","readOnly","intl","t1","undefined","valid","t2","input","t3","next","t4","t5","backgroundColor","t6","t7","event","target","t8","t9","formatMessage","pickColor","t10","picker","t11","swatch","t12","ColorFieldEntry","_c","styles"],"sources":["../../src/color/ColorField.tsx"],"sourcesContent":["import { usePanneauIntl } from '@panneau/ui';\n\nimport { cx } from '../shared/cx';\nimport { getFieldProps, isString } from '../shared/entry';\nimport { messages } from '../shared/messages';\nimport type { FieldEntryProps } from '../shared/types';\nimport { TextField, type TextFieldProps } from '../text/TextField';\nimport styles from './ColorField.module.css';\n\nexport type ColorFieldProps = Omit<TextFieldProps, 'type' | 'prefix' | 'maxLength'>;\n\n/**\n * Normalizes a hexadecimal color: `#` prefix, lowercase, and 3 digits expanded to 6. Returns the\n * text as is when it isn't a hexadecimal color.\n */\nexport function normalizeColor(value: string): string {\n    const trimmed = value.trim().toLowerCase();\n    const digits = trimmed.replace(/^#/, '');\n    if (/^[0-9a-f]{3}$/.test(digits)) {\n        return `#${[...digits].map((digit) => digit + digit).join('')}`;\n    }\n    if (/^[0-9a-f]{6}$/.test(digits) || /^[0-9a-f]{8}$/.test(digits)) {\n        return `#${digits}`;\n    }\n    return trimmed;\n}\n\n/**\n * A color as a hexadecimal value (`#1d4ed8`): typed, or picked with the browser's color picker.\n * The value is normalized on blur.\n */\nexport function ColorField({\n    value,\n    onChange,\n    onBlur,\n    disabled,\n    readOnly,\n    inputClassName,\n    ...props\n}: ColorFieldProps) {\n    const intl = usePanneauIntl();\n    const valid = value !== null && value !== undefined && /^#[0-9a-f]{6}$/i.test(value);\n    return (\n        <TextField\n            autoComplete=\"off\"\n            {...props}\n            value={value}\n            onChange={onChange}\n            disabled={disabled}\n            readOnly={readOnly}\n            inputClassName={cx(styles.input, inputClassName)}\n            onBlur={() => {\n                if (value !== null && value !== undefined) {\n                    const next = normalizeColor(value);\n                    if (next !== value) {\n                        onChange?.(next === '' ? null : next);\n                    }\n                }\n                onBlur?.();\n            }}\n            prefix={\n                <span\n                    className={styles.swatch}\n                    style={{ backgroundColor: valid ? value : 'transparent' }}\n                >\n                    <input\n                        type=\"color\"\n                        className={styles.picker}\n                        value={valid ? value.toLowerCase() : '#000000'}\n                        onChange={(event) => onChange?.(event.target.value)}\n                        disabled={disabled === true || readOnly === true}\n                        aria-label={intl.formatMessage(messages.pickColor)}\n                    />\n                </span>\n            }\n        />\n    );\n}\n\n/** The `color` type. */\nexport function ColorFieldEntry(props: FieldEntryProps) {\n    return (\n        <ColorField\n            {...getFieldProps(props)}\n            value={isString(props.value) ? props.value : null}\n            onChange={props.onChange}\n        />\n    );\n}\n"],"mappings":"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"}

package/dist/color/ColorField.module.js

@@ -1,8 +1,8 @@
 import "./ColorField.css";
 //#region src/color/ColorField.module.css
-var swatch = "panneau-swatch-J24Ak3";
-var picker = "panneau-picker-b7gdnM";
-var input = "panneau-input-1t8LLx";
+var swatch = "panneau-color-field-swatch";
+var picker = "panneau-color-field-picker";
+var input = "panneau-color-field-input";
 var ColorField_module_default = {
 	swatch,
 	picker,

package/dist/color/index.d.ts

@@ -1,2 +1,2 @@
-export { ColorField, ColorFieldEntry, type ColorFieldProps, normalizeColor } from './ColorField';
+export { ColorField, ColorFieldEntry, type ColorFieldProps, normalizeColor } from './ColorField.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/date/DateField.d.ts

@@ -1,4 +1,4 @@
-import type { FieldEntryProps, FieldProps } from '../shared/types';
+import type { FieldEntryProps, FieldProps } from '../shared/types.js';
 export interface DateFieldProps extends FieldProps<string> {
     /** Earliest date (`2026-01-01`). */
     min?: string;

package/dist/date/DateField.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateField.js","names":["disabled","readOnly","required","_c"],"sources":["../../src/date/DateField.tsx"],"sourcesContent":["import { DatePicker } from '@panneau/ui';\n\nimport { toCalendarDate } from '../shared/dates';\nimport { getFieldProps, isString } from '../shared/entry';\nimport type { FieldEntryProps, FieldProps } from '../shared/types';\n\nexport interface DateFieldProps extends FieldProps<string> {\n    /** Earliest date (`2026-01-01`). */\n    min?: string;\n    /** Latest date. */\n    max?: string;\n    controlClassName?: string;\n}\n\n/**\n * A date as an ISO string (`2026-10-15`), typed in the order of the locale or picked in a\n * calendar.\n */\nexport function DateField({\n    value,\n    onChange,\n    min,\n    max,\n    disabled,\n    readOnly,\n    required,\n    ...props\n}: DateFieldProps) {\n    const minValue = toCalendarDate(min);\n    const maxValue = toCalendarDate(max);\n    return (\n        <DatePicker\n            {...props}\n            granularity=\"day\"\n            value={toCalendarDate(value)}\n            onChange={(date) => onChange?.(date === null ? null : date.toString().slice(0, 10))}\n            {...(minValue !== null ? { minValue } : {})}\n            {...(maxValue !== null ? { maxValue } : {})}\n            isDisabled={disabled}\n            isReadOnly={readOnly}\n            isRequired={required}\n        />\n    );\n}\n\n/** The `date` type. */\nexport function DateFieldEntry(props: FieldEntryProps) {\n    return (\n        <DateField\n            {...getFieldProps(props)}\n            value={isString(props.value) ? props.value : null}\n            onChange={props.onChange}\n        />\n    );\n}\n"],"mappings":"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"}
+{"version":3,"file":"DateField.js","names":["DatePicker","toCalendarDate","getFieldProps","isString","FieldEntryProps","FieldProps","DateFieldProps","min","max","controlClassName","DateField","t0","$","_c","disabled","onChange","props","readOnly","required","value","t1","minValue","t2","maxValue","t3","t4","date","toString","slice","t5","t6","t7","DateFieldEntry","_c"],"sources":["../../src/date/DateField.tsx"],"sourcesContent":["import { DatePicker } from '@panneau/ui';\n\nimport { toCalendarDate } from '../shared/dates';\nimport { getFieldProps, isString } from '../shared/entry';\nimport type { FieldEntryProps, FieldProps } from '../shared/types';\n\nexport interface DateFieldProps extends FieldProps<string> {\n    /** Earliest date (`2026-01-01`). */\n    min?: string;\n    /** Latest date. */\n    max?: string;\n    controlClassName?: string;\n}\n\n/**\n * A date as an ISO string (`2026-10-15`), typed in the order of the locale or picked in a\n * calendar.\n */\nexport function DateField({\n    value,\n    onChange,\n    min,\n    max,\n    disabled,\n    readOnly,\n    required,\n    ...props\n}: DateFieldProps) {\n    const minValue = toCalendarDate(min);\n    const maxValue = toCalendarDate(max);\n    return (\n        <DatePicker\n            {...props}\n            granularity=\"day\"\n            value={toCalendarDate(value)}\n            onChange={(date) => onChange?.(date === null ? null : date.toString().slice(0, 10))}\n            {...(minValue !== null ? { minValue } : {})}\n            {...(maxValue !== null ? { maxValue } : {})}\n            isDisabled={disabled}\n            isReadOnly={readOnly}\n            isRequired={required}\n        />\n    );\n}\n\n/** The `date` type. */\nexport function DateFieldEntry(props: FieldEntryProps) {\n    return (\n        <DateField\n            {...getFieldProps(props)}\n            value={isString(props.value) ? props.value : null}\n            onChange={props.onChange}\n        />\n    );\n}\n"],"mappings":"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"}

package/dist/date/index.d.ts

@@ -1,2 +1,2 @@
-export { DateField, DateFieldEntry, type DateFieldProps } from './DateField';
+export { DateField, DateFieldEntry, type DateFieldProps } from './DateField.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/datetime/DateTimeField.d.ts

@@ -1,4 +1,4 @@
-import type { FieldEntryProps, FieldProps } from '../shared/types';
+import type { FieldEntryProps, FieldProps } from '../shared/types.js';
 export interface DateTimeFieldProps extends FieldProps<string> {
     /**
      * Time zone the date and time are shown and typed in, for values with an offset. Defaults to

package/dist/datetime/DateTimeField.js

@@ -10,28 +10,115 @@ import { getLocalTimeZone, now } from "@internationalized/date";
 * the time zone of the browser and written back in UTC. Values without one
 * (`2026-10-15T09:30:00`) are kept without one.
 */
-function DateTimeField({ value, onChange, timeZone = getLocalTimeZone(), withSeconds = false, disabled, readOnly, required, ...props }) {
-	const current = toDateTime(value, timeZone);
-	return /* @__PURE__ */ jsx(DatePicker, {
-		...props,
-		granularity: withSeconds ? "second" : "minute",
-		hideTimeZone: true,
-		value: current,
-		onChange: (next) => {
-			if (next === null) {
-				onChange?.(null);
-				return;
-			}
-			if ("hour" in next) onChange?.(fromDateTime(next));
-		},
-		placeholderValue: current ?? now(timeZone).set({
+function DateTimeField(t0) {
+	const $ = c(34);
+	let disabled;
+	let onChange;
+	let props;
+	let readOnly;
+	let required;
+	let t1;
+	let t2;
+	let value;
+	if ($[0] !== t0) {
+		({value, onChange, timeZone: t1, withSeconds: t2, disabled, readOnly, required, ...props} = t0);
+		$[0] = t0;
+		$[1] = disabled;
+		$[2] = onChange;
+		$[3] = props;
+		$[4] = readOnly;
+		$[5] = required;
+		$[6] = t1;
+		$[7] = t2;
+		$[8] = value;
+	} else {
+		disabled = $[1];
+		onChange = $[2];
+		props = $[3];
+		readOnly = $[4];
+		required = $[5];
+		t1 = $[6];
+		t2 = $[7];
+		value = $[8];
+	}
+	let T0;
+	let t3;
+	let t4;
+	let t5;
+	let t6;
+	let t7;
+	let t8;
+	if ($[9] !== onChange || $[10] !== props || $[11] !== t1 || $[12] !== t2 || $[13] !== value) {
+		const timeZone = t1 === void 0 ? getLocalTimeZone() : t1;
+		const withSeconds = t2 === void 0 ? false : t2;
+		const current = toDateTime(value, timeZone);
+		T0 = DatePicker;
+		t3 = props;
+		t4 = withSeconds ? "second" : "minute";
+		t5 = true;
+		t6 = current;
+		if ($[21] !== onChange) {
+			t7 = (next) => {
+				if (next === null) {
+					onChange?.(null);
+					return;
+				}
+				if ("hour" in next) onChange?.(fromDateTime(next));
+			};
+			$[21] = onChange;
+			$[22] = t7;
+		} else t7 = $[22];
+		t8 = current ?? now(timeZone).set({
 			second: 0,
 			millisecond: 0
-		}),
-		isDisabled: disabled,
-		isReadOnly: readOnly,
-		isRequired: required
-	});
+		});
+		$[9] = onChange;
+		$[10] = props;
+		$[11] = t1;
+		$[12] = t2;
+		$[13] = value;
+		$[14] = T0;
+		$[15] = t3;
+		$[16] = t4;
+		$[17] = t5;
+		$[18] = t6;
+		$[19] = t7;
+		$[20] = t8;
+	} else {
+		T0 = $[14];
+		t3 = $[15];
+		t4 = $[16];
+		t5 = $[17];
+		t6 = $[18];
+		t7 = $[19];
+		t8 = $[20];
+	}
+	let t9;
+	if ($[23] !== T0 || $[24] !== disabled || $[25] !== readOnly || $[26] !== required || $[27] !== t3 || $[28] !== t4 || $[29] !== t5 || $[30] !== t6 || $[31] !== t7 || $[32] !== t8) {
+		t9 = /* @__PURE__ */ jsx(T0, {
+			...t3,
+			granularity: t4,
+			hideTimeZone: t5,
+			value: t6,
+			onChange: t7,
+			placeholderValue: t8,
+			isDisabled: disabled,
+			isReadOnly: readOnly,
+			isRequired: required
+		});
+		$[23] = T0;
+		$[24] = disabled;
+		$[25] = readOnly;
+		$[26] = required;
+		$[27] = t3;
+		$[28] = t4;
+		$[29] = t5;
+		$[30] = t6;
+		$[31] = t7;
+		$[32] = t8;
+		$[33] = t9;
+	} else t9 = $[33];
+	return t9;
 }
 /** The `datetime` type: setting `timeZone`. */
 function DateTimeFieldEntry(props) {