@api7/ui-components 0.5.0 → 0.6.0

package/README.md

@@ -94,7 +94,7 @@ Add the optional ones only if you import those entry points.
 | Import                           | Contents                                                                                                                                         |
 | -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
 | `@api7/ui-components`            | Components, `toast` and `Toaster`, `ConfigProvider`, `useLocale` and `useMessages`, and in CSS the theme for the Tailwind CSS of the application |
-| `@api7/ui-components/form`       | Form components built on TanStack Form                                                                                                           |
+| `@api7/ui-components/form`       | Form fields built on TanStack Form. Their form row, `LabeledField`, is in the main entry and works with any form library                         |
 | `@api7/ui-components/data-table` | The data table built on TanStack Table                                                                                                           |
 | `@api7/ui-components/tokens`     | Design token data (`palette`, `themes`, `FAMILIES`, `STEPS` and the contrast helpers) for documentation pages                                    |
 
@@ -213,6 +213,35 @@ export function NameForm({ onSave }: { onSave: (name: string) => void }) {
 
 Validators are the ones of TanStack Form, so a function or a Standard Schema such as a zod schema both work. A string returned by a validator is shown under the field.
 
+### With another form library
+
+The form row that these fields draw is `LabeledField` from the main entry, and it does not depend on TanStack Form. It takes the label, `labelTooltip`, `optional`, `description` and `layout` like the fields above, and the state of the field as props: `name`, `invalid`, `touched`, `dirty` and `errors`, a list of messages shown while `invalid` is true. The control inside it gets its id, `aria-invalid` and `aria-describedby` from the field, so it is wired the same way as in a TanStack form. `group` renders a fieldset with the label as its legend, for a group of controls such as radio buttons.
+
+With react-hook-form, read the state with `useController` and pass it in:
+
+```tsx
+import { Input, LabeledField } from '@api7/ui-components';
+import { useController } from 'react-hook-form';
+
+export function NameField() {
+  const { field, fieldState } = useController({ name: 'name', rules: { required: 'Name is required' } });
+  return (
+    <LabeledField
+      label="Name"
+      name={field.name}
+      invalid={fieldState.invalid}
+      touched={fieldState.isTouched}
+      dirty={fieldState.isDirty}
+      errors={fieldState.error?.message ? [fieldState.error.message] : []}
+    >
+      <Input ref={field.ref} value={field.value} onValueChange={field.onChange} onBlur={field.onBlur} />
+    </LabeledField>
+  );
+}
+```
+
+`invalid` decides when the error shows. The fields of `/form` show it once the field is touched, and react-hook-form sets `fieldState.invalid` after its own validation mode runs, on submit by default.
+
 ## Joining a field and a button
 
 `InputGroup` joins an `Input` with a `Button` or an `InputGroupAddon` into one control. The group draws no border, ring or state of its own. Each part keeps its own border, hover, focus, invalid and disabled styling, and they touch with one divider between them, so the field and the button read as one. Only the outer corners of the group are round. An `Input` and a `Button` that stand alone are not changed.
@@ -350,3 +379,19 @@ To change a color, redeclare the variable after the import, on the same selector
 ```
 
 An `@theme` block with the same variable changes only the value of a page root that has no `data-theme` attribute. A `data-theme` region, including `<html data-theme="…">`, keeps the library value, because the library rules are not in a layer and Tailwind emits `@theme` values in the theme layer. Use `@theme` only for values that do not change with the theme, such as `--font-sans`.
+
+## Popover arrows
+
+`PopoverContent` has no arrow by default. Add `PopoverArrow` inside it for a pointer that follows the trigger when viewport collision handling shifts or flips the popup. The arrow uses the popover background token and accepts the Base UI arrow props, including `className` and `style` for appearance overrides.
+
+```tsx
+import { Popover, PopoverArrow, PopoverContent, PopoverTrigger } from '@api7/ui-components';
+
+<Popover>
+  <PopoverTrigger>View ID</PopoverTrigger>
+  <PopoverContent align="center" sideOffset={12}>
+    <PopoverArrow />
+    ID: service-production
+  </PopoverContent>
+</Popover>;
+```

package/dist/components/alert/alert.d.ts

@@ -1,6 +1,5 @@
 import { ComponentProps, ReactNode } from "react";
 import { VariantProps } from "class-variance-authority";
-//#region src/components/alert/alert.d.ts
 declare const alertVariants: (props?: ({
   variant?: "destructive" | "success" | "warning" | "info" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
@@ -12,5 +11,4 @@ export type AlertDescriptionProps = ComponentProps<'div'>;
 declare function Alert({ variant, icon, className, children, ...props }: AlertProps): import("react").JSX.Element;
 declare function AlertTitle({ className, ...props }: AlertTitleProps): import("react").JSX.Element;
 declare function AlertDescription({ className, ...props }: AlertDescriptionProps): import("react").JSX.Element;
-//#endregion
 export { Alert, AlertDescription, AlertTitle, alertVariants };

package/dist/components/alert/alert.js

@@ -2,7 +2,7 @@ import { cn } from "../../lib/cn.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import { CircleAlert, CircleCheck, Info, TriangleAlert } from "lucide-react";
-//#region src/components/alert/alert.tsx
+// src/components/alert/alert.tsx
 const alertVariants = cva("relative flex w-full gap-2 rounded-sm px-3 py-2 text-sm text-foreground [&>svg]:mt-0.5 [&>svg]:size-4 [&>svg]:shrink-0", {
 	variants: { variant: {
 		info: "bg-info-subtle [&>svg]:text-info",
@@ -46,5 +46,4 @@ function AlertDescription({ className, ...props }) {
 		"data-slot": "alert-description"
 	});
 }
-//#endregion
 export { Alert, AlertDescription, AlertTitle, alertVariants };

package/dist/components/avatar/avatar.d.ts

@@ -1,5 +1,4 @@
 import { ComponentProps } from "react";
-//#region src/components/avatar/avatar.d.ts
 declare const SIZES: {
   readonly sm: {
     readonly px: 24;
@@ -29,5 +28,4 @@ export type AvatarProps = Omit<ComponentProps<'span'>, 'children'> & {
   alt?: string;
 };
 declare function Avatar({ src, name, size, alt, className, style, ...props }: AvatarProps): import("react").JSX.Element;
-//#endregion
 export { Avatar };

package/dist/components/avatar/avatar.js

@@ -1,7 +1,7 @@
 import { cn } from "../../lib/cn.js";
 import { useState } from "react";
 import { jsx } from "react/jsx-runtime";
-//#region src/components/avatar/avatar.tsx
+// src/components/avatar/avatar.tsx
 const SIZES = {
 	sm: {
 		px: 24,
@@ -59,5 +59,4 @@ function Avatar({ src, name, size = "md", alt = "", className, style, ...props }
 		})
 	});
 }
-//#endregion
 export { Avatar };

package/dist/components/badge/badge.d.ts

@@ -1,6 +1,5 @@
 import { ComponentProps } from "react";
 import { VariantProps } from "class-variance-authority";
-//#region src/components/badge/badge.d.ts
 declare const badgeVariants: (props?: ({
   color?: "gray" | "slate" | "blue" | "green" | "red" | "yellow" | "orange" | "cyan" | "indigo" | "purple" | "pink" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
@@ -10,5 +9,4 @@ export type BadgeProps = Omit<ComponentProps<'span'>, 'color'> & {
   dot?: boolean;
 };
 declare function Badge({ color, dot, className, children, ...props }: BadgeProps): import("react").JSX.Element;
-//#endregion
 export { Badge, badgeVariants };

package/dist/components/badge/badge.js

@@ -1,7 +1,7 @@
 import { cn } from "../../lib/cn.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
-//#region src/components/badge/badge.tsx
+// src/components/badge/badge.tsx
 const badgeVariants = cva("inline-flex min-h-5 max-w-[500px] items-center gap-1.5 rounded-full px-2 text-xs font-medium", {
 	variants: { color: {
 		gray: "bg-(--badge-gray-bg) text-(color:--badge-gray-fg)",
@@ -34,5 +34,4 @@ function Badge({ color = "gray", dot = false, className, children, ...props }) {
 		})]
 	});
 }
-//#endregion
 export { Badge, badgeVariants };

package/dist/components/button/button.d.ts

@@ -1,6 +1,5 @@
 import { VariantProps } from "class-variance-authority";
 import { Button } from "@base-ui/react/button";
-//#region src/components/button/button.d.ts
 declare const buttonVariants: (props?: ({
   variant?: "primary" | "secondary" | "destructive" | "link" | "outline" | "ghost" | null | undefined;
   size?: "sm" | "md" | "lg" | "icon" | null | undefined;
@@ -17,5 +16,4 @@ export interface ButtonProps extends Omit<Button.Props, 'className'>, VariantPro
   loadingLabel?: string;
 }
 declare function Button$1({ className, variant, size, loading, loadingLabel, disabled, focusableWhenDisabled, children, ...props }: ButtonProps): import("react").JSX.Element;
-//#endregion
 export { Button$1 as Button, buttonVariants };

package/dist/components/button/button.js

@@ -5,7 +5,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import { LoaderCircle } from "lucide-react";
 import { Button } from "@base-ui/react/button";
-//#region src/components/button/button.tsx
+// src/components/button/button.tsx
 const buttonVariants = cva("inline-flex shrink-0 items-center justify-center gap-2 rounded-md border border-transparent text-sm font-medium whitespace-nowrap transition-colors outline-none select-none focus-visible:ring-2 focus-visible:ring-ring/40 disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5", {
 	variants: {
 		variant: {
@@ -58,5 +58,4 @@ function Button$1({ className, variant, size, loading = false, loadingLabel, dis
 		]
 	});
 }
-//#endregion
 export { Button$1 as Button, buttonVariants };

package/dist/components/calendar/calendar.d.ts

@@ -1,6 +1,5 @@
 import { ComponentProps } from "react";
 import { DayPicker } from "react-day-picker";
-//#region src/components/calendar/calendar.d.ts
 export type CalendarProps = ComponentProps<typeof DayPicker>;
 /**
  * Wraps react-day-picker's DayPicker with this library's visual conventions. Locale falls back to
@@ -15,5 +14,4 @@ export type CalendarProps = ComponentProps<typeof DayPicker>;
  * var(--color-primary); }` in the app's CSS.
  */
 declare function Calendar({ className, classNames, locale, navLayout, components, ...props }: CalendarProps): import("react").JSX.Element;
-//#endregion
 export { Calendar };

package/dist/components/calendar/calendar.js

@@ -7,7 +7,7 @@ import { jsx } from "react/jsx-runtime";
 import { ChevronDown, ChevronLeft, ChevronRight } from "lucide-react";
 import { DayPicker, getDefaultClassNames } from "react-day-picker";
 import { enUS, zhCN } from "react-day-picker/locale";
-//#region src/components/calendar/calendar.tsx
+// src/components/calendar/calendar.tsx
 /** Merges a consumer's `classNames` prop with ours key by key. Consumer classes are appended to the
 * key's own classes (the cell's fixed size, range-band fillers and state looks), which they cannot
 * replace: only `` utilities take part in `cn`'s conflict resolution. */
@@ -159,5 +159,4 @@ function CalendarDayButton({ className, day, modifiers, ref: forwardedRef, ...pr
 		className: cn("absolute inset-0 m-auto flex size-6 items-center justify-center rounded-sm text-sm outline-none hover:bg-accent-hover focus-visible:ring-2 focus-visible:ring-ring/40", className)
 	});
 }
-//#endregion
 export { Calendar };

package/dist/components/checkbox/checkbox.d.ts

@@ -1,8 +1,6 @@
 import { Checkbox } from "@base-ui/react/checkbox";
-//#region src/components/checkbox/checkbox.d.ts
 export type CheckboxProps = Omit<Checkbox.Root.Props, 'className'> & {
   className?: string;
 };
 declare function Checkbox$1({ className, ...props }: CheckboxProps): import("react").JSX.Element;
-//#endregion
 export { Checkbox$1 as Checkbox };

package/dist/components/checkbox/checkbox.js

@@ -3,7 +3,7 @@ import { cn } from "../../lib/cn.js";
 import { jsx } from "react/jsx-runtime";
 import { CheckIcon, MinusIcon } from "lucide-react";
 import { Checkbox } from "@base-ui/react/checkbox";
-//#region src/components/checkbox/checkbox.tsx
+// src/components/checkbox/checkbox.tsx
 function Checkbox$1({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Checkbox.Root, {
 		"data-base-ui-swipe-ignore": true,
@@ -20,5 +20,4 @@ function Checkbox$1({ className, ...props }) {
 		})
 	});
 }
-//#endregion
 export { Checkbox$1 as Checkbox };

package/dist/components/combobox/combobox.d.ts

@@ -1,6 +1,5 @@
 import { ReactNode } from "react";
 import { Combobox } from "@base-ui/react/combobox";
-//#region src/components/combobox/combobox.d.ts
 type WithClassName<P> = Omit<P, 'className'> & {
   className?: string;
 };
@@ -44,5 +43,4 @@ export type ComboboxChipProps = WithClassName<Combobox.Chip.Props> & {
 declare function ComboboxChip({ className, children, removeLabel, ...props }: ComboboxChipProps): import("react").JSX.Element;
 export type ComboboxChipsInputProps = WithClassName<Combobox.Input.Props>;
 declare function ComboboxChipsInput({ className, ...props }: ComboboxChipsInputProps): import("react").JSX.Element;
-//#endregion
 export { Combobox$1 as Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, ComboboxValue };

package/dist/components/combobox/combobox.js

@@ -6,7 +6,7 @@ import { controlFocus, controlFocusWithin, controlSurface } from "../../lib/cont
 import { jsx, jsxs } from "react/jsx-runtime";
 import { CheckIcon, ChevronDownIcon, XIcon } from "lucide-react";
 import { Combobox } from "@base-ui/react/combobox";
-//#region src/components/combobox/combobox.tsx
+// src/components/combobox/combobox.tsx
 function Combobox$1(props) {
 	return /* @__PURE__ */ jsx(Combobox.Root, { ...props });
 }
@@ -138,5 +138,4 @@ function ComboboxChipsInput({ className, ...props }) {
 		"data-slot": "combobox-chips-input"
 	});
 }
-//#endregion
 export { Combobox$1 as Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, ComboboxValue };

package/dist/components/data-table/data-table.d.ts

@@ -1,7 +1,6 @@
 import { DataTableColumnFilter } from "./filter-header.js";
 import { ComponentProps, ReactNode } from "react";
 import { ColumnDef, ColumnFiltersState, PaginationState, RowData, SortingState, TableFeatures } from "@tanstack/react-table";
-//#region src/components/data-table/data-table.d.ts
 declare const dataTableFeatures: {
   columnFilteringFeature: import("@tanstack/react-table").TableFeature;
   columnVisibilityFeature: import("@tanstack/react-table").TableFeature;
@@ -84,5 +83,4 @@ export interface DataTableProps<TData extends RowData> {
 }
 declare function DataTable<TData extends RowData>({ columns, data, getRowId, sorting, defaultSorting, onSortingChange, manualSorting, columnFilters, onColumnFiltersChange, manualFiltering, pagination, defaultPagination, onPaginationChange, manualPagination, rowCount, pageSizeOptions, hidePagination, paginationLabel, loading, empty, toolbar, className }: DataTableProps<TData>): import("react").JSX.Element;
 declare function DataTableRowActions({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
-//#endregion
 export { DataTable, type DataTableColumnDef, type DataTableFeatures, DataTableRowActions, createDataTableColumnHelper, dataTableFeatures };

package/dist/components/data-table/data-table.js

@@ -9,7 +9,7 @@ import { SortHeader } from "./sort-header.js";
 import { useEffect, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { columnFilteringFeature, columnVisibilityFeature, constructFilterFn, createColumnHelper, createFilteredRowModel, createPaginatedRowModel, createSortedRowModel, flexRender, rowPaginationFeature, rowSortingFeature, sortFn_alphanumeric, sortFn_basic, sortFn_datetime, sortFn_text, tableFeatures, useTable } from "@tanstack/react-table";
-//#region src/components/data-table/data-table.tsx
+// src/components/data-table/data-table.tsx
 const LOADING_ROW_COUNT = 4;
 const filterFn_oneOf = constructFilterFn({
 	filter: (value, chosen) => chosen.includes(String(value)),
@@ -175,5 +175,4 @@ function DataTableRowActions({ className, ...props }) {
 		"data-slot": "data-table-row-actions"
 	});
 }
-//#endregion
 export { DataTable, DataTableRowActions, createDataTableColumnHelper, dataTableFeatures };

package/dist/components/data-table/filter-header.d.ts

@@ -1,7 +1,6 @@
 import "./data-table.js";
 import { ReactNode } from "react";
 import { RowData } from "@tanstack/react-table";
-//#region src/components/data-table/filter-header.d.ts
 export interface DataTableColumnFilterOption {
   value: string;
   label: ReactNode;
@@ -18,5 +17,4 @@ export interface DataTableColumnFilter {
    * checked: the last checked value cannot be unchecked, and Reset checks the default again.
    */
   defaultValue?: string[];
-}
-//#endregion
+}

package/dist/components/data-table/filter-header.js

@@ -4,7 +4,7 @@ import { Button } from "../button/button.js";
 import { Menu, MenuCheckboxItem, MenuContent, MenuItem, MenuSeparator, MenuTrigger } from "../menu/menu.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Funnel } from "lucide-react";
-//#region src/components/data-table/filter-header.tsx
+// src/components/data-table/filter-header.tsx
 function FilterHeader({ column, filter }) {
 	const messages = useMessages();
 	const filterValue = column.getFilterValue();
@@ -51,5 +51,4 @@ function FilterHeader({ column, filter }) {
 		]
 	})] });
 }
-//#endregion
 export { FilterHeader };

package/dist/components/data-table/sort-header.js

@@ -2,7 +2,7 @@
 import { cn } from "../../lib/cn.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ArrowDown, ArrowUp, ChevronsUpDown } from "lucide-react";
-//#region src/components/data-table/sort-header.tsx
+// src/components/data-table/sort-header.tsx
 function SortHeader({ column, children }) {
 	const sorted = column.getIsSorted();
 	const Icon = sorted === "asc" ? ArrowUp : sorted === "desc" ? ArrowDown : ChevronsUpDown;
@@ -13,5 +13,4 @@ function SortHeader({ column, children }) {
 		children: [children, /* @__PURE__ */ jsx(Icon, { className: "size-3.5" })]
 	});
 }
-//#endregion
 export { SortHeader };

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

@@ -1,7 +1,6 @@
 import { CalendarProps } from "../calendar/calendar.js";
 import { FocusEventHandler } from "react";
 import { DateRange, DateRange as DateRange$1 } from "react-day-picker";
-//#region src/components/date-picker/date-picker.d.ts
 export interface DatePickerProps {
   /** Controlled value. Passing the `value` key at all makes the picker controlled, so `value={undefined}` clears it. */
   value?: Date;
@@ -51,5 +50,4 @@ export interface DateRangePickerProps {
 }
 /** Popover trigger + two-month range Calendar, with optional preset ranges listed beside the calendar. */
 declare function DateRangePicker(props: DateRangePickerProps): import("react").JSX.Element;
-//#endregion
 export { DatePicker, type DateRange$1 as DateRange, DateRangePicker };

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

@@ -8,7 +8,7 @@ import { useCallback, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { CalendarIcon } from "lucide-react";
 import { Field } from "@base-ui/react/field";
-//#region src/components/date-picker/date-picker.tsx
+// src/components/date-picker/date-picker.tsx
 function pad(value) {
 	return String(value).padStart(2, "0");
 }
@@ -232,5 +232,4 @@ function DateRangePicker(props) {
 		})]
 	});
 }
-//#endregion
 export { DatePicker, DateRangePicker };

package/dist/components/description-list/description-list.d.ts

@@ -1,6 +1,5 @@
 import { ComponentProps } from "react";
 import { VariantProps } from "class-variance-authority";
-//#region src/components/description-list/description-list.d.ts
 declare const descriptionListVariants: (props?: ({
   variant?: "default" | "outline" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
@@ -22,5 +21,4 @@ declare function DescriptionList({ className, variant, columns, style, ...props
 declare function DescriptionListItem({ className, colSpan, style, ...props }: DescriptionListItemProps): import("react").JSX.Element;
 declare function DescriptionListLabel({ className, ...props }: DescriptionListLabelProps): import("react").JSX.Element;
 declare function DescriptionListValue({ className, ...props }: DescriptionListValueProps): import("react").JSX.Element;
-//#endregion
 export { DescriptionList, DescriptionListItem, DescriptionListLabel, DescriptionListValue, descriptionListVariants };

package/dist/components/description-list/description-list.js

@@ -3,7 +3,7 @@ import { cn } from "../../lib/cn.js";
 import { createContext, useContext } from "react";
 import { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
-//#region src/components/description-list/description-list.tsx
+// src/components/description-list/description-list.tsx
 const descriptionListVariants = cva("grid w-full grid-cols-[repeat(var(--description-list-columns,1),var(--description-list-label-width,160px)_minmax(0,1fr))] text-sm leading-5", {
 	variants: { variant: {
 		default: "",
@@ -85,5 +85,4 @@ function DescriptionListValue({ className, ...props }) {
 		"data-slot": "description-list-value"
 	});
 }
-//#endregion
 export { DescriptionList, DescriptionListItem, DescriptionListLabel, DescriptionListValue, descriptionListVariants };

package/dist/components/dialog/dialog.d.ts

@@ -1,6 +1,5 @@
 import { ComponentProps } from "react";
 import { Dialog } from "@base-ui/react/dialog";
-//#region src/components/dialog/dialog.d.ts
 type WithClassName<P> = Omit<P, 'className'> & {
   className?: string;
 };
@@ -26,5 +25,4 @@ export type DialogFooterProps = ComponentProps<'div'>;
 declare function DialogFooter({ className, ...props }: DialogFooterProps): import("react").JSX.Element;
 export type DialogCloseProps = WithClassName<Dialog.Close.Props>;
 declare function DialogClose({ className, ...props }: DialogCloseProps): import("react").JSX.Element;
-//#endregion
 export { Dialog$1 as Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger };

package/dist/components/dialog/dialog.js

@@ -6,7 +6,7 @@ import { createContext, useContext } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { XIcon } from "lucide-react";
 import { Dialog } from "@base-ui/react/dialog";
-//#region src/components/dialog/dialog.tsx
+// src/components/dialog/dialog.tsx
 const DialogModalContext = createContext(true);
 function Dialog$1({ modal = true, ...props }) {
 	return /* @__PURE__ */ jsx(DialogModalContext.Provider, {
@@ -92,5 +92,4 @@ function DialogClose({ className, ...props }) {
 		"data-slot": "dialog-close"
 	});
 }
-//#endregion
 export { Dialog$1 as Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger };

package/dist/components/drawer/drawer.d.ts

@@ -1,6 +1,5 @@
 import { ComponentProps } from "react";
 import { Drawer } from "@base-ui/react/drawer";
-//#region src/components/drawer/drawer.d.ts
 type WithClassName<P> = Omit<P, 'className'> & {
   className?: string;
 };
@@ -26,5 +25,4 @@ export type DrawerFooterProps = ComponentProps<'div'>;
 declare function DrawerFooter({ className, ...props }: DrawerFooterProps): import("react").JSX.Element;
 export type DrawerCloseProps = WithClassName<Drawer.Close.Props>;
 declare function DrawerClose({ className, ...props }: DrawerCloseProps): import("react").JSX.Element;
-//#endregion
 export { Drawer$1 as Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger };

package/dist/components/drawer/drawer.js

@@ -6,7 +6,7 @@ import { createContext, useContext } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { XIcon } from "lucide-react";
 import { Drawer } from "@base-ui/react/drawer";
-//#region src/components/drawer/drawer.tsx
+// src/components/drawer/drawer.tsx
 const DrawerModalContext = createContext(true);
 function Drawer$1({ swipeDirection = "right", modal = true, ...props }) {
 	return /* @__PURE__ */ jsx(DrawerModalContext.Provider, {
@@ -98,5 +98,4 @@ function DrawerClose({ className, ...props }) {
 		"data-slot": "drawer-close"
 	});
 }
-//#endregion
 export { Drawer$1 as Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger };

package/dist/components/empty/empty.d.ts

@@ -1,6 +1,5 @@
 import { ComponentProps } from "react";
 import { VariantProps } from "class-variance-authority";
-//#region src/components/empty/empty.d.ts
 declare const emptyMediaVariants: (props?: ({
   variant?: "default" | "icon" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
@@ -16,5 +15,4 @@ declare function EmptyMedia({ variant, className, ...props }: EmptyMediaProps):
 declare function EmptyTitle({ className, ...props }: EmptyTitleProps): import("react").JSX.Element;
 declare function EmptyDescription({ className, ...props }: EmptyDescriptionProps): import("react").JSX.Element;
 declare function EmptyContent({ className, ...props }: EmptyContentProps): import("react").JSX.Element;
-//#endregion
 export { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, emptyMediaVariants };

package/dist/components/empty/empty.js

@@ -1,7 +1,7 @@
 import { cn } from "../../lib/cn.js";
 import { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
-//#region src/components/empty/empty.tsx
+// src/components/empty/empty.tsx
 const emptyVariants = cva("flex w-full min-w-0 flex-col items-center justify-center gap-3 rounded-sm border-[3px] border-dashed border-border px-4 py-4 text-center");
 const emptyMediaVariants = cva("flex shrink-0 items-center justify-center", {
 	variants: { variant: {
@@ -53,5 +53,4 @@ function EmptyContent({ className, ...props }) {
 		"data-slot": "empty-content"
 	});
 }
-//#endregion
 export { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, emptyMediaVariants };

package/dist/components/field/field.d.ts

@@ -1,6 +1,5 @@
 import { Field } from "@base-ui/react/field";
 import { Fieldset } from "@base-ui/react/fieldset";
-//#region src/components/field/field.d.ts
 type WithClassName<P> = Omit<P, 'className'> & {
   className?: string;
 };
@@ -16,5 +15,4 @@ declare function FieldDescription({ className, ...props }: FieldDescriptionProps
 declare function FieldError({ className, ...props }: FieldErrorProps): import("react").JSX.Element;
 declare function Fieldset$1({ className, ...props }: FieldsetProps): import("react").JSX.Element;
 declare function FieldsetLegend({ className, ...props }: FieldsetLegendProps): import("react").JSX.Element;
-//#endregion
 export { Field$1 as Field, FieldDescription, FieldError, FieldLabel, Fieldset$1 as Fieldset, FieldsetLegend };

package/dist/components/field/field.js

@@ -3,7 +3,7 @@ import { cn } from "../../lib/cn.js";
 import { jsx } from "react/jsx-runtime";
 import { Field } from "@base-ui/react/field";
 import { Fieldset } from "@base-ui/react/fieldset";
-//#region src/components/field/field.tsx
+// src/components/field/field.tsx
 function Field$1({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Field.Root, {
 		className: cn("flex flex-col gap-1.5", className),
@@ -46,5 +46,4 @@ function FieldsetLegend({ className, ...props }) {
 		"data-slot": "fieldset-legend"
 	});
 }
-//#endregion
 export { Field$1 as Field, FieldDescription, FieldError, FieldLabel, Fieldset$1 as Fieldset, FieldsetLegend };

package/dist/components/field/labeled-field.d.ts

@@ -0,0 +1,33 @@
+import { ReactNode } from "react";
+export type LabeledFieldLayout = 'stacked' | 'inline-end' | 'inline-start';
+export interface LabeledFieldProps {
+  label?: ReactNode;
+  description?: ReactNode;
+  /** Info icon next to the label that shows this content in a tooltip. */
+  labelTooltip?: ReactNode;
+  /** Appends the "Optional" marker to the label. */
+  optional?: boolean;
+  optionalLabel?: string;
+  moreInfoLabel?: string;
+  className?: string;
+  layout?: LabeledFieldLayout;
+  /**
+   * Renders a fieldset whose legend is the label, for a group of controls such as radio
+   * buttons. Only the stacked layout applies to a group.
+   */
+  group?: boolean;
+  /** Name of the field, given to the control inside it. */
+  name?: string;
+  /** Marks the field and its control invalid and shows the errors. */
+  invalid?: boolean;
+  touched?: boolean;
+  dirty?: boolean;
+  /** Messages shown under the field while it is invalid. */
+  errors?: readonly string[];
+  children: ReactNode;
+}
+/**
+ * A form row: label, optional marker, label tooltip, control, description and errors. It
+ * takes the field state as props, so any form library or plain React state can drive it.
+ */
+export declare function LabeledField({ label, description, labelTooltip, optional, optionalLabel, moreInfoLabel, className, layout, group, name, invalid, touched, dirty, errors, children }: LabeledFieldProps): import("react").JSX.Element;

package/dist/components/field/labeled-field.js

@@ -0,0 +1,67 @@
+"use client";
+import { useMessages } from "../../config/config-provider.js";
+import { Field, FieldDescription, FieldError, FieldLabel, Fieldset, FieldsetLegend } from "./field.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../tooltip/tooltip.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { InfoIcon } from "lucide-react";
+// src/components/field/labeled-field.tsx
+/** Appended inside a label so the accessible name reads "Name Optional". */
+function OptionalMarker({ label }) {
+	const messages = useMessages();
+	return /* @__PURE__ */ jsxs("span", {
+		className: "font-medium text-muted-foreground",
+		children: [" ", label ?? messages.form.optional]
+	});
+}
+/** Info icon button next to a label; kept outside the label so clicking it does not focus the control. */
+function LabelTooltip({ content, label }) {
+	const messages = useMessages();
+	return /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+		render: /* @__PURE__ */ jsx("button", {
+			type: "button",
+			"aria-label": label ?? messages.form.moreInfo,
+			className: "inline-flex text-muted-foreground"
+		}),
+		children: /* @__PURE__ */ jsx(InfoIcon, { className: "size-3.5" })
+	}), /* @__PURE__ */ jsx(TooltipContent, { children: content })] });
+}
+/**
+* A form row: label, optional marker, label tooltip, control, description and errors. It
+* takes the field state as props, so any form library or plain React state can drive it.
+*/
+function LabeledField({ label, description, labelTooltip, optional, optionalLabel, moreInfoLabel, className, layout = "stacked", group = false, name, invalid = false, touched, dirty, errors = [], children }) {
+	const labelRow = label && /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center gap-1",
+		children: [/* @__PURE__ */ jsxs(group ? FieldsetLegend : FieldLabel, { children: [label, optional && /* @__PURE__ */ jsx(OptionalMarker, { label: optionalLabel })] }), labelTooltip && /* @__PURE__ */ jsx(LabelTooltip, {
+			content: labelTooltip,
+			label: moreInfoLabel
+		})]
+	});
+	let body;
+	if (group) body = /* @__PURE__ */ jsxs(Fieldset, { children: [labelRow, children] });
+	else if (layout === "stacked") body = /* @__PURE__ */ jsxs(Fragment, { children: [labelRow, children] });
+	else body = /* @__PURE__ */ jsx("div", {
+		className: "flex flex-row items-center gap-2.5",
+		children: layout === "inline-end" ? /* @__PURE__ */ jsxs(Fragment, { children: [labelRow, children] }) : /* @__PURE__ */ jsxs(Fragment, { children: [children, labelRow] })
+	});
+	return /* @__PURE__ */ jsxs(Field, {
+		name,
+		invalid,
+		touched,
+		dirty,
+		className,
+		"data-slot": "form-item",
+		children: [
+			body,
+			description && /* @__PURE__ */ jsx(FieldDescription, { children: description }),
+			invalid && errors.length > 0 && /* @__PURE__ */ jsx(FieldError, {
+				match: true,
+				children: errors.map((message) => /* @__PURE__ */ jsx("span", {
+					className: "block",
+					children: message
+				}, message))
+			})
+		]
+	});
+}
+export { LabeledField };