@petrarca/sonnet-ui 0.4.2 → 0.6.0

package/dist/index.d.ts

@@ -9,6 +9,8 @@ import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import { DialogProps } from '@radix-ui/react-dialog';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import { DatePrecision, TimeGranularity, PageResult } from '@petrarca/sonnet-core';
+import * as SelectPrimitive from '@radix-ui/react-select';
 import * as LabelPrimitive from '@radix-ui/react-label';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
@@ -17,7 +19,6 @@ import * as TabsPrimitive from '@radix-ui/react-tabs';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import { RowData, PaginationState, OnChangeFn } from '@tanstack/react-table';
 export { PaginationState } from '@tanstack/react-table';
-import { PageResult } from '@petrarca/sonnet-core';
 import { UISchema, JsonSchemaProperty, JsonSchema } from '@petrarca/sonnet-core/schema';
 import { EntitySelectMode } from '@petrarca/sonnet-core/hooks';
 import { EntityOptionFetcher, EntityOption } from '@petrarca/sonnet-core/entityOptions';
@@ -50,6 +51,49 @@ interface ButtonProps$1 extends React$1.ButtonHTMLAttributes<HTMLButtonElement>,
 }
 declare const Button: React$1.ForwardRefExoticComponent<ButtonProps$1 & React$1.RefAttributes<HTMLButtonElement>>;
 
+/**
+ * IconButton -- a compact, square icon-only button with an accessible label
+ * and a tooltip. The house standard for inline affordances (rename, delete,
+ * edit) and small toolbar actions across the Sonnet apps.
+ *
+ * - `variant` defaults to "ghost" (borderless, for inline/hover-reveal rows).
+ *   Use "outline" for standalone toolbar buttons.
+ * - `tone="destructive"` tints the hover state red (e.g. delete).
+ * - The `label` is both the tooltip text and the aria-label, so the button is
+ *   always accessible without visible text.
+ * - Do not size the icon yourself: the underlying Button forces child SVGs to
+ *   `size-4` (16px), so pass a bare `<Icon />` (no h-/w- class).
+ * - `revealOnHover` applies the house row-action convention: the button is
+ *   hidden at rest and revealed when the row is hovered or the button is
+ *   keyboard-focused; a disabled action stays faintly visible (opacity-30)
+ *   rather than hidden. The row must set the `group/row` class for this.
+ *
+ * Usage:
+ *   <IconButton label="Delete" tone="destructive" onClick={...}>
+ *     <Trash2 />
+ *   </IconButton>
+ *
+ *   // row-action (parent row has className="... group/row"):
+ *   <IconButton label="Edit" revealOnHover onClick={...}><Pencil /></IconButton>
+ */
+interface IconButtonProps extends Omit<ButtonProps$1, "size" | "children" | "aria-label"> {
+    /** Tooltip text and accessible label. */
+    label: string;
+    /** The icon to render. */
+    children: React$1.ReactNode;
+    /** Hover tone. "destructive" tints hover red. Default "default". */
+    tone?: "default" | "destructive";
+    /** Tooltip side. */
+    tooltipSide?: "top" | "right" | "bottom" | "left";
+    /**
+     * Row-action reveal: hidden at rest, shown on row hover (`group/row`) or
+     * keyboard focus. Disabled buttons stay at opacity-30 instead of hidden, so
+     * the affordance reads as "present but unavailable". Default false.
+     */
+    revealOnHover?: boolean;
+}
+declare const IconButton: React$1.ForwardRefExoticComponent<IconButtonProps & React$1.RefAttributes<HTMLButtonElement>>;
+
 declare const Card: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
 declare const CardHeader: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
 declare const CardTitle: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
@@ -185,6 +229,144 @@ declare const DropdownMenuShortcut: {
 
 declare const Input: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & React$1.RefAttributes<HTMLInputElement>>;
 
+/** Renders a field-level error message below an input. */
+declare function InputError({ error, }: {
+    error: string | undefined;
+}): React$1.ReactElement | null;
+
+/**
+ * DateInput -- text input with a calendar popover for a single date.
+ *
+ * The value is a partial ISO 8601 date string -- `"YYYY"`, `"YYYY-MM"`, or
+ * `"YYYY-MM-DD"` depending on `precision`. Typed entry is parsed leniently
+ * (see {@link parseDate}); `"t"`, `"today"`, or `"."` enter the current date;
+ * calendar selection drills down to the terminal precision. Empty value emits "".
+ */
+
+interface DateInputProps {
+    /** Partial ISO date string (`YYYY`, `YYYY-MM`, or `YYYY-MM-DD`), or "". */
+    value?: string;
+    /** Called with the new partial ISO date string, or "" when cleared. */
+    onChange: (value: string) => void;
+    /** Selection precision. Default `"day"`. */
+    precision?: DatePrecision;
+    /** BCP-47 locale override for display/parsing. Defaults to the app locale. */
+    locale?: string;
+    id?: string;
+    name?: string;
+    placeholder?: string;
+    required?: boolean;
+    disabled?: boolean;
+    error?: string;
+    className?: string;
+    onBlur?: () => void;
+}
+declare function DateInput({ value, onChange, precision, locale, id, name, placeholder, required, disabled, error, className, onBlur, }: DateInputProps): React$1.ReactElement;
+
+/**
+ * Calendar -- month/year/decade grid for selecting a single day.
+ *
+ * A controlled, dependency-light calendar operating on native `Date`. Renders
+ * three drill-down views (days, months, years) with header navigation. Styling
+ * uses semantic design tokens only.
+ */
+
+interface CalendarProps {
+    /** Currently selected day, or null. */
+    value: Date | null;
+    /** Called when the user picks a date at the terminal precision. */
+    onSelect: (date: Date) => void;
+    /** Month shown when no value is selected. Defaults to today. */
+    defaultViewDate?: Date;
+    /**
+     * Precision at which selection completes: `"year"` stops on the years view,
+     * `"month"` on the months view, `"day"` on the days view (default).
+     */
+    precision?: DatePrecision;
+    /** BCP-47 locale for month/weekday labels and week-start. */
+    locale?: string;
+}
+declare function Calendar({ value, onSelect, defaultViewDate, precision, locale, }: CalendarProps): React$1.ReactElement;
+
+/**
+ * TimeInput -- text input for a zone-free time of day.
+ *
+ * The value is a normalized ISO time string -- `"HH:mm"` (minute granularity,
+ * default) or `"HH:mm:ss"` (second granularity). A time of day carries no date
+ * and no timezone (Temporal.PlainTime); consumers that need an instant combine
+ * it with a date and zone at persistence time. Typed entry is parsed leniently
+ * (see {@link parseTime}); `"n"`, `"now"`, or `"."` enter the current time.
+ * Empty value emits "".
+ */
+
+interface TimeInputProps {
+    /** Normalized ISO time string (`"HH:mm"` or `"HH:mm:ss"`), or "". */
+    value?: string;
+    /** Called with the new normalized ISO time string, or "" when cleared. */
+    onChange: (value: string) => void;
+    /** Time granularity. Default `"minute"`. */
+    granularity?: TimeGranularity;
+    id?: string;
+    name?: string;
+    placeholder?: string;
+    required?: boolean;
+    disabled?: boolean;
+    error?: string;
+    className?: string;
+    onBlur?: () => void;
+}
+declare function TimeInput({ value, onChange, granularity, id, name, placeholder, required, disabled, error, className, onBlur, }: TimeInputProps): React$1.ReactElement;
+
+/**
+ * DateTimeInput -- combined date + time entry for a plain wall-clock datetime.
+ *
+ * The value is a plain wall-clock ISO string `"YYYY-MM-DDTHH:mm[:ss]"` with no
+ * timezone (Temporal.PlainDateTime). Timezone is intentionally not part of the
+ * input: a wall-clock datetime means "this local time", and resolving it to an
+ * absolute instant (UTC) is the consumer's responsibility at persistence time.
+ *
+ * The optional `timeZone` prop is a pass-through context value (e.g. a clinic's
+ * zone supplied programmatically) shown as a hint -- it is never applied to the
+ * value and is never entered by the user. Cross-zone apps that need an explicit
+ * zone picker should compose one separately.
+ *
+ * Composes {@link DateInput} (day precision) and {@link TimeInput}.
+ */
+
+interface DateTimeInputProps {
+    /** Plain wall-clock ISO datetime `"YYYY-MM-DDTHH:mm[:ss]"`, or "". */
+    value?: string;
+    /** Called with the new plain wall-clock ISO datetime, or "" when cleared. */
+    onChange: (value: string) => void;
+    /** Time granularity. Default `"minute"`. */
+    granularity?: TimeGranularity;
+    /**
+     * Optional timezone context (IANA id, e.g. `"Europe/Berlin"`). Shown as a
+     * hint only; never applied to the value and never user-entered.
+     */
+    timeZone?: string;
+    /** BCP-47 locale override for the date part. Defaults to the app locale. */
+    locale?: string;
+    idPrefix?: string;
+    required?: boolean;
+    disabled?: boolean;
+    error?: string;
+    className?: string;
+    onBlur?: () => void;
+}
+declare function DateTimeInput({ value, onChange, granularity, timeZone, locale, idPrefix, required, disabled, error, className, onBlur, }: DateTimeInputProps): React$1.ReactElement;
+
+declare const Select: React$1.FC<SelectPrimitive.SelectProps>;
+declare const SelectGroup: React$1.ForwardRefExoticComponent<SelectPrimitive.SelectGroupProps & React$1.RefAttributes<HTMLDivElement>>;
+declare const SelectValue: React$1.ForwardRefExoticComponent<SelectPrimitive.SelectValueProps & React$1.RefAttributes<HTMLSpanElement>>;
+declare const SelectTrigger: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectTriggerProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
+declare const SelectScrollUpButton: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollUpButtonProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const SelectScrollDownButton: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollDownButtonProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const SelectContent: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const SelectLabel: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectLabelProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const SelectItem: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectItemProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const SelectSeparator: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectSeparatorProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+
 declare function InputGroup({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
 declare const inputGroupAddonVariants: (props?: ({
     align?: "inline-start" | "inline-end" | "block-start" | "block-end" | null | undefined;
@@ -413,6 +595,12 @@ interface TabsListProps extends React$1.ComponentPropsWithoutRef<typeof TabsPrim
 declare const TabsList: React$1.ForwardRefExoticComponent<TabsListProps & React$1.RefAttributes<HTMLDivElement>>;
 declare const TabsTrigger: React$1.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsTriggerProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
 declare const TabsContent: React$1.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+/**
+ * TabsSeparator -- a thin, non-interactive vertical divider placed inside a
+ * TabsList to visually group related triggers (e.g. preview tabs vs. source
+ * tabs). Presentational only; not part of the roving-tabindex order.
+ */
+declare const TabsSeparator: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
 
 declare const Textarea: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "ref"> & React$1.RefAttributes<HTMLTextAreaElement>>;
 
@@ -623,6 +811,23 @@ declare function createRenderer<TRow = Record<string, unknown>>(render: (row: TR
  * Extractable to @petrarca/sonnet-ui.
  */
 
+/** How a row's detail (onRowClick) is opened. */
+type RowActivation = "click" | "double-click";
+/**
+ * Props of EntityTable that can be defaulted app-wide via SonnetConfigProvider.
+ * Behavioral, non-data props only.
+ */
+interface EntityTableConfigurable {
+    rowActivation: RowActivation;
+    showChevron: boolean;
+}
+declare module "@petrarca/sonnet-core" {
+    interface SonnetComponentDefaults {
+        EntityTable?: {
+            defaultProps?: Partial<EntityTableConfigurable>;
+        };
+    }
+}
 /** Declarative row action rendered as a button in a trailing "Actions" column. */
 interface RowAction<TRow> {
     label: string;
@@ -646,6 +851,30 @@ interface EntityTableProps<TRow extends RowData> {
     isFiltered?: boolean;
     emptyMessage?: string;
     onRowClick?: (row: TRow) => void;
+    /**
+     * How onRowClick (open detail) is triggered. Resolved against app-wide
+     * config (SonnetConfigProvider) then the built-in default "click".
+     *
+     *   "click"        -- single-click on a row opens detail (default,
+     *                     preserves existing behavior). The chevron is a
+     *                     non-interactive affordance.
+     *   "double-click" -- single-click sets the active row (and fires
+     *                     onActiveRowChange); double-click, or clicking the
+     *                     trailing chevron button, opens detail.
+     */
+    rowActivation?: RowActivation;
+    /**
+     * Fired when the active (single-selected) row changes. Only meaningful when
+     * rowActivation is "double-click" and selectionMode is off. null when the
+     * active row is cleared.
+     */
+    onActiveRowChange?: (row: TRow | null) => void;
+    /**
+     * Whether to show the trailing chevron column. Resolved against app-wide
+     * config then a built-in default of "show when onRowClick is set". In
+     * "double-click" mode the chevron is an interactive button that opens detail.
+     */
+    showChevron?: boolean;
     selectionMode?: boolean;
     onSelectionChange?: (selectedRows: TRow[]) => void;
     pagination?: PaginationState;
@@ -744,6 +973,13 @@ interface EntitySelectProps {
     minChars?: number;
     /** Currently selected value (controlled). */
     value?: string | null;
+    /**
+     * The option for the current value, supplying its label. Use when the
+     * selected value is set before any options have loaded (e.g. an edit form
+     * in typeahead/explicit mode) so the trigger can render the label without
+     * fetching the full list. Must match `value`; ignored otherwise.
+     */
+    selectedOption?: EntityOption | null;
     /** Called when the selection changes. */
     onChange?: (value: string | null) => void;
     /** Called when the selection changes, passing the full option (value + label). */
@@ -760,6 +996,12 @@ interface EntitySelectProps {
     emptyMessage?: string;
     /** Whether the field is required (shows asterisk). */
     required?: boolean;
+    /**
+     * Show a clear (X) affordance that resets the selection to null when a value
+     * is set. Use for optional entity references (e.g. an assignment that can be
+     * removed). Ignored when required or disabled.
+     */
+    clearable?: boolean;
     /** Whether the select is disabled. */
     disabled?: boolean;
     /** Description text below the label. */
@@ -1087,4 +1329,4 @@ type Props = {
  */
 declare function ClipboardMenu({ onAddItem }: Props): react_jsx_runtime.JSX.Element;
 
-export { Alert, AlertDescription, AlertTitle, Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, Button, CELL_RENDERERS, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, type CellRenderer, type CellRendererProps, Checkbox, ClipboardButton, ClipboardItemComponent as ClipboardItem, ClipboardMenu, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EntitySelect, type EntitySelectProps, EntityTable, type EntityTableProps, EntityTree, type EntityTreeHandle, type EntityTreeProps, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, Label, Popover, PopoverContent, PopoverTrigger, PropertyList, type PropertyListLayout, type PropertyListProps, PropertyValue, type PropertyValueProps, ResizeHandle, type ResizeHandleProps, type ResolvedColumn, type RowAction, ScrollArea, ScrollBar, SearchInput, type SearchMode, Separator, Sheet, SheetBody, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetTitle, SheetTrigger, SimpleGroup, SimpleStack, SimpleTooltip, Skeleton, Spinner, Stepper, StepperContent, StepperDescription, StepperIndicator, StepperItem, StepperList, StepperNext, StepperPrev, type StepperProps, StepperSeparator, StepperTitle, StepperTrigger, type TableUiSchema, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type TreeNode, TreeView, type TreeViewHandle, type TreeViewProps, badgeVariants, buttonVariants, createRenderer, useStore as useStepper };
+export { Alert, AlertDescription, AlertTitle, Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, Button, CELL_RENDERERS, Calendar, type CalendarProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, type CellRenderer, type CellRendererProps, Checkbox, ClipboardButton, ClipboardItemComponent as ClipboardItem, ClipboardMenu, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, DateInput, type DateInputProps, DateTimeInput, type DateTimeInputProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EntitySelect, type EntitySelectProps, EntityTable, type EntityTableProps, EntityTree, type EntityTreeHandle, type EntityTreeProps, IconButton, type IconButtonProps, Input, InputError, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, Label, Popover, PopoverContent, PopoverTrigger, PropertyList, type PropertyListLayout, type PropertyListProps, PropertyValue, type PropertyValueProps, ResizeHandle, type ResizeHandleProps, type ResolvedColumn, type RowAction, ScrollArea, ScrollBar, SearchInput, type SearchMode, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetBody, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetTitle, SheetTrigger, SimpleGroup, SimpleStack, SimpleTooltip, Skeleton, Spinner, Stepper, StepperContent, StepperDescription, StepperIndicator, StepperItem, StepperList, StepperNext, StepperPrev, type StepperProps, StepperSeparator, StepperTitle, StepperTrigger, type TableUiSchema, Tabs, TabsContent, TabsList, TabsSeparator, TabsTrigger, Textarea, TimeInput, type TimeInputProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type TreeNode, TreeView, type TreeViewHandle, type TreeViewProps, badgeVariants, buttonVariants, createRenderer, useStore as useStepper };