alinea 2.0.0-preview.13 → 2.0.0-preview.14

package/dist/components/CheckboxGroup.js

@@ -1,8 +1,8 @@
 import {
   $ed8ccb2e23e76301$export$4aa08d5625cb8ead
-} from "../chunks/chunk-QHHMKJUO.js";
+} from "../chunks/chunk-7DDPSWRY.js";
 import "../chunks/chunk-NUFRM6SI.js";
-import "../chunks/chunk-HOETF6HN.js";
+import "../chunks/chunk-PMGIIYDD.js";
 import "../chunks/chunk-RKDPDEF7.js";
 import "../chunks/chunk-PSSMQKAH.js";
 import {

package/dist/components/Collapsible.js

@@ -14,13 +14,13 @@ import { FoldIcon } from "./FoldIcon.js";
 
 // src/components/Collapsible.module.css
 var Collapsible_default = {
-  "CollapsibleTrigger-icon": "alinea-CollapsibleTrigger-icon",
-  "CollapsibleTriggerIcon": "alinea-CollapsibleTrigger-icon",
+  "CollapsibleTrigger-title": "alinea-CollapsibleTrigger-title",
+  "CollapsibleTriggerTitle": "alinea-CollapsibleTrigger-title",
+  "CollapsibleContent": "alinea-CollapsibleContent",
   "CollapsibleTrigger": "alinea-CollapsibleTrigger",
   "Collapsible": "alinea-Collapsible",
-  "CollapsibleContent": "alinea-CollapsibleContent",
-  "CollapsibleTrigger-title": "alinea-CollapsibleTrigger-title",
-  "CollapsibleTriggerTitle": "alinea-CollapsibleTrigger-title"
+  "CollapsibleTrigger-icon": "alinea-CollapsibleTrigger-icon",
+  "CollapsibleTriggerIcon": "alinea-CollapsibleTrigger-icon"
 };
 
 // src/components/Collapsible.tsx

package/dist/components/ColorSwatch.js

@@ -1,8 +1,8 @@
 import {
   $eeaff5a2d2421ecc$export$cae13e90592f246a
-} from "../chunks/chunk-QHHMKJUO.js";
+} from "../chunks/chunk-7DDPSWRY.js";
 import "../chunks/chunk-NUFRM6SI.js";
-import "../chunks/chunk-HOETF6HN.js";
+import "../chunks/chunk-PMGIIYDD.js";
 import "../chunks/chunk-RKDPDEF7.js";
 import "../chunks/chunk-PSSMQKAH.js";
 import {

package/dist/components/ColorSwatchPicker.js

@@ -1,9 +1,9 @@
 import {
   $a36727cf8b43b57f$export$abcd89c27081c2ef,
   $a36727cf8b43b57f$export$b46792416e3d8515
-} from "../chunks/chunk-QHHMKJUO.js";
+} from "../chunks/chunk-7DDPSWRY.js";
 import "../chunks/chunk-NUFRM6SI.js";
-import "../chunks/chunk-HOETF6HN.js";
+import "../chunks/chunk-PMGIIYDD.js";
 import "../chunks/chunk-RKDPDEF7.js";
 import "../chunks/chunk-PSSMQKAH.js";
 import {
@@ -16,8 +16,8 @@ import { ColorSwatch } from "./ColorSwatch.js";
 
 // src/components/ColorSwatchPicker.module.css
 var ColorSwatchPicker_default = {
-  "ColorSwatchPicker": "alinea-ColorSwatchPicker",
-  "ColorSwatchPickerItem": "alinea-ColorSwatchPickerItem"
+  "ColorSwatchPickerItem": "alinea-ColorSwatchPickerItem",
+  "ColorSwatchPicker": "alinea-ColorSwatchPicker"
 };
 
 // src/components/ColorSwatchPicker.tsx

package/dist/components/ComboBox.d.ts

@@ -1,10 +1,11 @@
-import { type ReactNode } from 'react';
-import type { AriaProps, DataProps, FieldSharedProps, OpenStateProps, StyleProps } from './types.js';
-export interface ComboBoxProps extends FieldSharedProps, OpenStateProps, StyleProps, AriaProps, DataProps {
-    value?: string | null;
-    defaultValue?: string | null;
+import { type ReactElement, type ReactNode } from 'react';
+import type { AriaProps, DataProps, FieldSharedProps, IconType, Key, OpenStateProps, StyleProps } from './types.js';
+export interface ComboBoxProps<V extends Key = Key> extends FieldSharedProps, OpenStateProps, StyleProps, AriaProps, DataProps {
+    /** The value of the selected ComboBoxItem */
+    value?: V | null;
+    defaultValue?: V | null;
     /** Called with the selected value, or null when the selection is cleared */
-    onValueChange?: (value: string | null) => void;
+    onValueChange?: (value: V | null) => void;
     inputValue?: string;
     defaultInputValue?: string;
     onInputValueChange?: (value: string) => void;
@@ -13,19 +14,36 @@ export interface ComboBoxProps extends FieldSharedProps, OpenStateProps, StylePr
     allowsCustomValue?: boolean;
     /** Shown in the list when no item matches, the list stays closed if unset */
     emptyMessage?: ReactNode;
+    /**
+     * Whether an item is shown for the typed text, defaults to a case and
+     * accent insensitive match anywhere in its text. Pass false to show every
+     * item, eg. when the server already filtered them.
+     */
+    filter?: false | ((textValue: string, inputValue: string) => boolean);
+    /** Shows a spinner, eg. while the items for the typed text load */
+    loading?: boolean;
     /** Name of the hidden form input carrying the value */
     name?: string;
     autoFocus?: boolean;
-    /** ComboBoxItem elements */
+    /** ComboBoxItem and ComboBoxGroup elements */
     children: ReactNode;
 }
 /** A labelled text input that filters a list of options to pick from */
-export declare function ComboBox({ label, description, error, required, disabled, readOnly, icon, shared, value, defaultValue, onValueChange, inputValue, defaultInputValue, onInputValueChange, open, defaultOpen, onOpenChange, placeholder, emptyMessage, autoFocus, className, style, children, ...props }: ComboBoxProps): import("react").JSX.Element;
+export declare function ComboBox<V extends Key = Key>({ label, description, error, required, disabled, readOnly, icon, shared, value, defaultValue, onValueChange, inputValue, defaultInputValue, onInputValueChange, open, defaultOpen, onOpenChange, placeholder, emptyMessage, filter, loading, autoFocus, className, style, children, ...props }: ComboBoxProps<V>): import("react").JSX.Element;
 export interface ComboBoxItemProps extends StyleProps {
-    value: string;
+    value: Key;
     /** Text used for filtering and the input, defaults to string children */
     textValue?: string;
     disabled?: boolean;
+    /** Icon shown before the label in the list */
+    icon?: IconType | ReactElement;
+    /** Secondary text shown below the label in the list */
+    description?: ReactNode;
     children: ReactNode;
 }
 export declare function ComboBoxItem(props: ComboBoxItemProps): import("react").JSX.Element;
+export interface ComboBoxGroupProps extends AriaProps {
+    label?: ReactNode;
+    children: ReactNode;
+}
+export declare function ComboBoxGroup(props: ComboBoxGroupProps): import("react").JSX.Element;

package/dist/components/ComboBox.js

@@ -4,9 +4,9 @@ import {
   $928221da08ecbc62$export$41f133550aa26f48,
   $dbdc5e6e7ce01b4b$export$72b9695b8216309a,
   $dbdc5e6e7ce01b4b$export$c02625b26074192c
-} from "../chunks/chunk-QHHMKJUO.js";
+} from "../chunks/chunk-7DDPSWRY.js";
 import "../chunks/chunk-NUFRM6SI.js";
-import "../chunks/chunk-HOETF6HN.js";
+import "../chunks/chunk-PMGIIYDD.js";
 import "../chunks/chunk-RKDPDEF7.js";
 import "../chunks/chunk-PSSMQKAH.js";
 import {
@@ -24,27 +24,34 @@ import { IcRoundClose, IcRoundKeyboardArrowDown } from "alinea/dashboard/icons";
 
 // src/components/ComboBox.module.css
 var ComboBox_default = {
-  "ComboBoxTrigger": "alinea-ComboBoxTrigger",
+  "ComboBoxTrigger-spinner": "alinea-ComboBoxTrigger-spinner",
+  "ComboBoxTriggerSpinner": "alinea-ComboBoxTrigger-spinner",
   "ComboBoxContent-list": "alinea-ComboBoxContent-list",
   "ComboBoxContentList": "alinea-ComboBoxContent-list",
+  "ComboBoxTrigger-input": "alinea-ComboBoxTrigger-input",
+  "ComboBoxTriggerInput": "alinea-ComboBoxTrigger-input",
+  "ComboBoxTrigger": "alinea-ComboBoxTrigger",
   "ComboBoxContent-empty": "alinea-ComboBoxContent-empty",
   "ComboBoxContentEmpty": "alinea-ComboBoxContent-empty",
   "ComboBoxTrigger-action": "alinea-ComboBoxTrigger-action",
   "ComboBoxTriggerAction": "alinea-ComboBoxTrigger-action",
   "ComboBoxTrigger-arrow": "alinea-ComboBoxTrigger-arrow",
   "ComboBoxTriggerArrow": "alinea-ComboBoxTrigger-arrow",
-  "ComboBoxTrigger-input": "alinea-ComboBoxTrigger-input",
-  "ComboBoxTriggerInput": "alinea-ComboBoxTrigger-input",
   "ComboBox": "alinea-ComboBox"
 };
 
 // src/components/ComboBox.tsx
 import { Field } from "./Field.js";
 import { Icon } from "./Icon.js";
+import { ListBoxGroup } from "./internal/ListBoxGroup.js";
 import { ListBoxOption } from "./internal/ListBoxOption.js";
 import { PopoverSurface } from "./internal/PopoverSurface.js";
+import { Spinner } from "./Spinner.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 var styles = dist_default(ComboBox_default);
+function showAll() {
+  return true;
+}
 function ComboBox({
   label,
   description,
@@ -65,6 +72,8 @@ function ComboBox({
   onOpenChange,
   placeholder,
   emptyMessage,
+  filter,
+  loading,
   autoFocus,
   className,
   style,
@@ -82,7 +91,7 @@ function ComboBox({
       style,
       selectedKey: value,
       defaultSelectedKey: defaultValue,
-      onSelectionChange: (key) => onValueChange?.(key === null ? null : String(key)),
+      onSelectionChange: (key) => onValueChange?.(key),
       inputValue,
       defaultInputValue,
       onInputChange: onInputValueChange,
@@ -94,6 +103,7 @@ function ComboBox({
       isRequired: required,
       isInvalid: error ? true : void 0,
       allowsEmptyCollection: emptyMessage !== void 0,
+      defaultFilter: filter === false ? showAll : filter,
       children: /* @__PURE__ */ jsxs(
         Field,
         {
@@ -121,7 +131,8 @@ function ComboBox({
                 placeholder,
                 autoFocus,
                 invalid: Boolean(error),
-                clearable: !disabled && !readOnly
+                clearable: !disabled && !readOnly,
+                loading
               }
             ),
             /* @__PURE__ */ jsx(
@@ -139,7 +150,7 @@ function ComboBox({
                       {
                         "data-slot": "combobox-empty",
                         className: styles.ComboBoxContent.empty(),
-                        children: emptyMessage
+                        children: loading ? /* @__PURE__ */ jsx(Spinner, { size: "sm" }) : emptyMessage
                       }
                     ),
                     children
@@ -179,7 +190,8 @@ function ComboBoxTrigger({
   placeholder,
   autoFocus,
   invalid,
-  clearable
+  clearable,
+  loading
 }) {
   const state = useContext($dbdc5e6e7ce01b4b$export$c02625b26074192c);
   const inputRef = useRef(null);
@@ -202,6 +214,14 @@ function ComboBoxTrigger({
             className: styles.ComboBoxTrigger.input()
           }
         ),
+        loading && /* @__PURE__ */ jsx(
+          Spinner,
+          {
+            size: "sm",
+            "data-slot": "combobox-spinner",
+            className: styles.ComboBoxTrigger.spinner()
+          }
+        ),
         hasClear && /* @__PURE__ */ jsx(
           $7705c033048f6da7$export$353f5b6fc5456de1,
           {
@@ -239,7 +259,18 @@ function ComboBoxTrigger({
 function ComboBoxItem(props) {
   return /* @__PURE__ */ jsx(ListBoxOption, { slot: "combobox-item", ...props });
 }
+function ComboBoxGroup(props) {
+  return /* @__PURE__ */ jsx(
+    ListBoxGroup,
+    {
+      slot: "combobox-group",
+      labelSlot: "combobox-group-label",
+      ...props
+    }
+  );
+}
 export {
   ComboBox,
+  ComboBoxGroup,
   ComboBoxItem
 };

package/dist/components/Command.js

@@ -6,11 +6,11 @@ import {
   $928221da08ecbc62$export$a11e76429ed99b4,
   $928221da08ecbc62$export$dca12b0bb56e4fc,
   $e28ab3efe3e87743$export$1ff3c3f08ae963c0
-} from "../chunks/chunk-QHHMKJUO.js";
+} from "../chunks/chunk-7DDPSWRY.js";
 import "../chunks/chunk-NUFRM6SI.js";
 import {
   $ef182bb9912241d8$export$3274cf84b703fff
-} from "../chunks/chunk-HOETF6HN.js";
+} from "../chunks/chunk-PMGIIYDD.js";
 import "../chunks/chunk-RKDPDEF7.js";
 import "../chunks/chunk-PSSMQKAH.js";
 import {
@@ -27,23 +27,23 @@ import { IcRoundSearch } from "alinea/dashboard/icons";
 
 // src/components/Command.module.css
 var Command_default = {
-  "CommandGroup-heading": "alinea-CommandGroup-heading",
-  "CommandGroupHeading": "alinea-CommandGroup-heading",
-  "CommandInput": "alinea-CommandInput",
-  "Command": "alinea-Command",
-  "CommandEmpty": "alinea-CommandEmpty",
-  "CommandGroup": "alinea-CommandGroup",
-  "CommandItem": "alinea-CommandItem",
-  "CommandSeparator": "alinea-CommandSeparator",
+  "is-focusVisible": "alinea-is-focusVisible",
+  "isFocusVisible": "alinea-is-focusVisible",
   "CommandItem-icon": "alinea-CommandItem-icon",
   "CommandItemIcon": "alinea-CommandItem-icon",
   "CommandItem-label": "alinea-CommandItem-label",
   "CommandItemLabel": "alinea-CommandItem-label",
-  "is-focusVisible": "alinea-is-focusVisible",
-  "isFocusVisible": "alinea-is-focusVisible",
+  "CommandInput": "alinea-CommandInput",
+  "CommandList": "alinea-CommandList",
+  "CommandSeparator": "alinea-CommandSeparator",
+  "Command": "alinea-Command",
+  "CommandGroup": "alinea-CommandGroup",
+  "CommandGroup-heading": "alinea-CommandGroup-heading",
+  "CommandGroupHeading": "alinea-CommandGroup-heading",
+  "CommandEmpty": "alinea-CommandEmpty",
   "is-highlighted": "alinea-is-highlighted",
   "isHighlighted": "alinea-is-highlighted",
-  "CommandList": "alinea-CommandList"
+  "CommandItem": "alinea-CommandItem"
 };
 
 // src/components/Command.tsx

package/dist/components/ContentCard.js

@@ -12,43 +12,43 @@ import {
 
 // src/components/ContentCard.module.css
 var ContentCard_default = {
-  "ContentCard-icon": "alinea-ContentCard-icon",
-  "ContentCardIcon": "alinea-ContentCard-icon",
-  "ContentCard-suffix": "alinea-ContentCard-suffix",
-  "ContentCardSuffix": "alinea-ContentCard-suffix",
+  "ContentCard-pulse": "alinea-ContentCard-pulse",
+  "ContentCardPulse": "alinea-ContentCard-pulse",
+  "ContentCard-title-text": "alinea-ContentCard-title-text",
+  "ContentCardTitleText": "alinea-ContentCard-title-text",
+  "is-icon": "alinea-is-icon",
+  "isIcon": "alinea-is-icon",
+  "ContentCard-title": "alinea-ContentCard-title",
+  "ContentCardTitle": "alinea-ContentCard-title",
+  "is-skeleton": "alinea-is-skeleton",
+  "isSkeleton": "alinea-is-skeleton",
   "is-breadcrumbs": "alinea-is-breadcrumbs",
   "isBreadcrumbs": "alinea-is-breadcrumbs",
-  "ContentCard-breadcrumbs": "alinea-ContentCard-breadcrumbs",
-  "ContentCardBreadcrumbs": "alinea-ContentCard-breadcrumbs",
   "ContentCard-breadcrumbs-separator": "alinea-ContentCard-breadcrumbs-separator",
   "ContentCardBreadcrumbsSeparator": "alinea-ContentCard-breadcrumbs-separator",
-  "ContentCard-description-text": "alinea-ContentCard-description-text",
-  "ContentCardDescriptionText": "alinea-ContentCard-description-text",
-  "is-wide": "alinea-is-wide",
-  "isWide": "alinea-is-wide",
+  "ContentCard-body": "alinea-ContentCard-body",
+  "ContentCardBody": "alinea-ContentCard-body",
+  "ContentCard-suffix": "alinea-ContentCard-suffix",
+  "ContentCardSuffix": "alinea-ContentCard-suffix",
+  "ContentCard-image": "alinea-ContentCard-image",
+  "ContentCardImage": "alinea-ContentCard-image",
+  "ContentCard-media": "alinea-ContentCard-media",
+  "ContentCardMedia": "alinea-ContentCard-media",
   "ContentCard-details": "alinea-ContentCard-details",
   "ContentCardDetails": "alinea-ContentCard-details",
+  "is-wide": "alinea-is-wide",
+  "isWide": "alinea-is-wide",
+  "ContentCard-description-text": "alinea-ContentCard-description-text",
+  "ContentCardDescriptionText": "alinea-ContentCard-description-text",
   "ContentCard": "alinea-ContentCard",
+  "ContentCard-description": "alinea-ContentCard-description",
+  "ContentCardDescription": "alinea-ContentCard-description",
   "ContentCard-skeleton": "alinea-ContentCard-skeleton",
   "ContentCardSkeleton": "alinea-ContentCard-skeleton",
-  "ContentCard-pulse": "alinea-ContentCard-pulse",
-  "ContentCardPulse": "alinea-ContentCard-pulse",
-  "ContentCard-title": "alinea-ContentCard-title",
-  "ContentCardTitle": "alinea-ContentCard-title",
-  "ContentCard-media": "alinea-ContentCard-media",
-  "ContentCardMedia": "alinea-ContentCard-media",
-  "ContentCard-image": "alinea-ContentCard-image",
-  "ContentCardImage": "alinea-ContentCard-image",
-  "ContentCard-body": "alinea-ContentCard-body",
-  "ContentCardBody": "alinea-ContentCard-body",
-  "ContentCard-title-text": "alinea-ContentCard-title-text",
-  "ContentCardTitleText": "alinea-ContentCard-title-text",
-  "is-skeleton": "alinea-is-skeleton",
-  "isSkeleton": "alinea-is-skeleton",
-  "is-icon": "alinea-is-icon",
-  "isIcon": "alinea-is-icon",
-  "ContentCard-description": "alinea-ContentCard-description",
-  "ContentCardDescription": "alinea-ContentCard-description"
+  "ContentCard-breadcrumbs": "alinea-ContentCard-breadcrumbs",
+  "ContentCardBreadcrumbs": "alinea-ContentCard-breadcrumbs",
+  "ContentCard-icon": "alinea-ContentCard-icon",
+  "ContentCardIcon": "alinea-ContentCard-icon"
 };
 
 // src/components/ContentCard.tsx

package/dist/components/ContentGrid.js

@@ -5,9 +5,9 @@ import {
   $7705c033048f6da7$export$353f5b6fc5456de1,
   $cc8e610d5d6e3fe4$export$cb6da89c6af1a8ec,
   $fc34f5dff94ff74a$export$7d2b12578154a735
-} from "../chunks/chunk-QHHMKJUO.js";
+} from "../chunks/chunk-7DDPSWRY.js";
 import "../chunks/chunk-NUFRM6SI.js";
-import "../chunks/chunk-HOETF6HN.js";
+import "../chunks/chunk-PMGIIYDD.js";
 import "../chunks/chunk-RKDPDEF7.js";
 import "../chunks/chunk-PSSMQKAH.js";
 import {
@@ -26,24 +26,24 @@ import {
 var ContentGrid_default = {
   "ContentGrid-dropIndicator": "alinea-ContentGrid-dropIndicator",
   "ContentGridDropIndicator": "alinea-ContentGrid-dropIndicator",
-  "ContentGrid": "alinea-ContentGrid",
+  "ContentGridItem-card": "alinea-ContentGridItem-card",
+  "ContentGridItemCard": "alinea-ContentGridItem-card",
   "is-dropTarget": "alinea-is-dropTarget",
   "isDropTarget": "alinea-is-dropTarget",
+  "ContentGridItem-checkbox": "alinea-ContentGridItem-checkbox",
+  "ContentGridItemCheckbox": "alinea-ContentGridItem-checkbox",
+  "ContentGridItem": "alinea-ContentGridItem",
+  "ContentGrid": "alinea-ContentGrid",
   "is-active": "alinea-is-active",
   "isActive": "alinea-is-active",
+  "ContentGridItem-drag": "alinea-ContentGridItem-drag",
+  "ContentGridItemDrag": "alinea-ContentGridItem-drag",
   "ContentGrid-empty": "alinea-ContentGrid-empty",
   "ContentGridEmpty": "alinea-ContentGrid-empty",
   "is-dragging": "alinea-is-dragging",
   "isDragging": "alinea-is-dragging",
-  "ContentGridItem": "alinea-ContentGridItem",
-  "ContentGridItem-drag": "alinea-ContentGridItem-drag",
-  "ContentGridItemDrag": "alinea-ContentGridItem-drag",
-  "ContentGridItem-card": "alinea-ContentGridItem-card",
-  "ContentGridItemCard": "alinea-ContentGridItem-card",
   "ContentGrid-list": "alinea-ContentGrid-list",
-  "ContentGridList": "alinea-ContentGrid-list",
-  "ContentGridItem-checkbox": "alinea-ContentGridItem-checkbox",
-  "ContentGridItemCheckbox": "alinea-ContentGridItem-checkbox"
+  "ContentGridList": "alinea-ContentGrid-list"
 };
 
 // src/components/ContentGrid.tsx

package/dist/components/DataList.js

@@ -5,9 +5,9 @@ import "../chunks/chunk-CQ52GEHY.js";
 
 // src/components/DataList.module.css
 var DataList_default = {
-  "DataList": "alinea-DataList",
   "DataListItem": "alinea-DataListItem",
   "DataListValue": "alinea-DataListValue",
+  "DataList": "alinea-DataList",
   "DataListLabel": "alinea-DataListLabel"
 };
 

package/dist/components/DateField.d.ts

@@ -10,6 +10,10 @@ export interface DateFieldProps extends FieldSharedProps, StyleProps, AriaProps,
     min?: string;
     /** The latest valid date, `YYYY-MM-DD` */
     max?: string;
+    /**
+     * Name of the hidden form input, which submits the date like a native
+     * date input: `YYYY-MM-DD`, or an empty string when no date is set
+     */
     name?: string;
     autoFocus?: boolean;
 }

package/dist/components/DateField.js

@@ -1,8 +1,8 @@
 import {
   $5400c097f4765e59$export$d9781c7894a82487
-} from "../chunks/chunk-QHHMKJUO.js";
+} from "../chunks/chunk-7DDPSWRY.js";
 import "../chunks/chunk-NUFRM6SI.js";
-import "../chunks/chunk-HOETF6HN.js";
+import "../chunks/chunk-PMGIIYDD.js";
 import "../chunks/chunk-RKDPDEF7.js";
 import "../chunks/chunk-PSSMQKAH.js";
 import "../chunks/chunk-CQ52GEHY.js";

package/dist/components/DatePicker.js

@@ -1,8 +1,8 @@
 import {
   $e539d00f123fdfd8$export$5109c6dd95d8fb00
-} from "../chunks/chunk-QHHMKJUO.js";
+} from "../chunks/chunk-7DDPSWRY.js";
 import "../chunks/chunk-NUFRM6SI.js";
-import "../chunks/chunk-HOETF6HN.js";
+import "../chunks/chunk-PMGIIYDD.js";
 import "../chunks/chunk-RKDPDEF7.js";
 import "../chunks/chunk-PSSMQKAH.js";
 import "../chunks/chunk-CQ52GEHY.js";

package/dist/components/DateRangePicker.js

@@ -1,8 +1,8 @@
 import {
   $e539d00f123fdfd8$export$17334619f3ac2224
-} from "../chunks/chunk-QHHMKJUO.js";
+} from "../chunks/chunk-7DDPSWRY.js";
 import "../chunks/chunk-NUFRM6SI.js";
-import "../chunks/chunk-HOETF6HN.js";
+import "../chunks/chunk-PMGIIYDD.js";
 import "../chunks/chunk-RKDPDEF7.js";
 import "../chunks/chunk-PSSMQKAH.js";
 import "../chunks/chunk-CQ52GEHY.js";

package/dist/components/Dialog.d.ts

@@ -1,11 +1,14 @@
 import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
 import { type ButtonProps } from './Button.js';
+import { type FormProps } from './Form.js';
 import { type TriggerProps } from './internal/Trigger.js';
-import type { AriaProps, DataProps, OpenStateProps, StyleProps } from './types.js';
+import type { AriaProps, DataProps, OpenStateProps, StyleProps, ValidationErrors } from './types.js';
 export interface DialogProps extends OpenStateProps {
+    /** Called when the dialog closes, after `onOpenChange(false)` */
+    onClose?: () => void;
     children: ReactNode;
 }
-export declare function Dialog({ open, defaultOpen, onOpenChange, children }: DialogProps): import("react").JSX.Element;
+export declare function Dialog({ open, defaultOpen, onOpenChange, onClose, children }: DialogProps): import("react").JSX.Element;
 export interface DialogTriggerProps extends TriggerProps {
 }
 export declare function DialogTrigger(props: DialogTriggerProps): import("react").JSX.Element;
@@ -21,9 +24,17 @@ export interface DialogContentProps extends StyleProps, AriaProps, DataProps {
     dismissable?: boolean;
     /** Defaults to true */
     showCloseButton?: boolean;
+    /**
+     * Renders the content as a Form, submitted by a `type="submit"` Button.
+     * The dialog closes once this resolves without returning errors, which
+     * are shown on the fields otherwise.
+     */
+    onSubmit?: FormProps['onSubmit'];
+    /** Errors keyed by field name, when the content is a form */
+    validationErrors?: ValidationErrors;
     children: ReactNode;
 }
-export declare function DialogContent({ role, size, dismissable, showCloseButton, className, style, children, id, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby, ...props }: DialogContentProps): import("react").JSX.Element;
+export declare function DialogContent({ role, size, dismissable, showCloseButton, onSubmit, validationErrors, className, style, children, id, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby, ...props }: DialogContentProps): import("react").JSX.Element;
 export interface DialogHeaderProps extends ComponentPropsWithoutRef<'div'> {
 }
 export declare function DialogHeader({ className, ...props }: DialogHeaderProps): import("react").JSX.Element;

package/dist/components/Dialog.js

@@ -5,9 +5,9 @@ import {
   $f2ff30fde7b014be$export$2e1e1122cf0cba88,
   $f2ff30fde7b014be$export$3ddf2d174ce01153,
   $f2ff30fde7b014be$export$d2f961adcb0afbe
-} from "../chunks/chunk-QHHMKJUO.js";
+} from "../chunks/chunk-7DDPSWRY.js";
 import "../chunks/chunk-NUFRM6SI.js";
-import "../chunks/chunk-HOETF6HN.js";
+import "../chunks/chunk-PMGIIYDD.js";
 import "../chunks/chunk-RKDPDEF7.js";
 import "../chunks/chunk-PSSMQKAH.js";
 import {
@@ -24,20 +24,23 @@ import { Button } from "./Button.js";
 
 // src/components/Dialog.module.css
 var Dialog_default = {
-  "DialogFooter": "alinea-DialogFooter",
-  "DialogTitle": "alinea-DialogTitle",
+  "DialogContent-form": "alinea-DialogContent-form",
+  "DialogContentForm": "alinea-DialogContent-form",
+  "DialogDescription": "alinea-DialogDescription",
+  "DialogHeader": "alinea-DialogHeader",
+  "DialogContent": "alinea-DialogContent",
   "DialogContent-dialog": "alinea-DialogContent-dialog",
   "DialogContentDialog": "alinea-DialogContent-dialog",
-  "DialogContent": "alinea-DialogContent",
-  "DialogDescription": "alinea-DialogDescription",
-  "DialogContent-overlay": "alinea-DialogContent-overlay",
-  "DialogContentOverlay": "alinea-DialogContent-overlay",
   "DialogContent-close": "alinea-DialogContent-close",
   "DialogContentClose": "alinea-DialogContent-close",
-  "DialogHeader": "alinea-DialogHeader"
+  "DialogContent-overlay": "alinea-DialogContent-overlay",
+  "DialogContentOverlay": "alinea-DialogContent-overlay",
+  "DialogFooter": "alinea-DialogFooter",
+  "DialogTitle": "alinea-DialogTitle"
 };
 
 // src/components/Dialog.tsx
+import { Form } from "./Form.js";
 import { Slot } from "./internal/Slot.js";
 import {
   OptionalTrigger,
@@ -49,6 +52,7 @@ function Dialog({
   open,
   defaultOpen,
   onOpenChange,
+  onClose,
   children
 }) {
   return /* @__PURE__ */ jsxs(
@@ -56,7 +60,10 @@ function Dialog({
     {
       isOpen: open,
       defaultOpen,
-      onOpenChange,
+      onOpenChange: (next) => {
+        onOpenChange?.(next);
+        if (!next) onClose?.();
+      },
       children: [
         /* @__PURE__ */ jsx(OptionalTrigger, {}),
         children
@@ -72,6 +79,8 @@ function DialogContent({
   size = "default",
   dismissable = true,
   showCloseButton = true,
+  onSubmit,
+  validationErrors,
   className,
   style,
   children,
@@ -85,6 +94,7 @@ function DialogContent({
     $8b8d26808cb8cb53$export$8948f78d83984c69,
     {
       "data-slot": "dialog-overlay",
+      "data-alinea-theme": "",
       isDismissable: dismissable,
       className: styles.DialogContent.overlay(),
       children: /* @__PURE__ */ jsx(
@@ -106,7 +116,7 @@ function DialogContent({
               "aria-describedby": ariaDescribedby,
               className: styles.DialogContent.dialog(),
               children: [
-                children,
+                onSubmit ? /* @__PURE__ */ jsx(DialogForm, { onSubmit, validationErrors, children }) : children,
                 showCloseButton && /* @__PURE__ */ jsx(
                   DialogClose,
                   {
@@ -125,6 +135,23 @@ function DialogContent({
     }
   );
 }
+function DialogForm({ onSubmit, validationErrors, children }) {
+  const state = useContext($f2ff30fde7b014be$export$d2f961adcb0afbe);
+  async function submit(data) {
+    const errors = await onSubmit(data);
+    if (!errors || Object.keys(errors).length === 0) state?.close();
+    return errors;
+  }
+  return /* @__PURE__ */ jsx(
+    Form,
+    {
+      validationErrors,
+      onSubmit: submit,
+      className: styles.DialogContent.form(),
+      children
+    }
+  );
+}
 function DialogHeader({ className, ...props }) {
   return /* @__PURE__ */ jsx(
     "div",