sherick-ui 2.3.0 → 2.5.0

package/dist/types/dev.d.cts

@@ -18,7 +18,7 @@ declare const elevation: {
 declare const recessedTop = "shadow-sherick-recessed-top";
 declare const shape: {
     readonly control: "rounded-[1rem]";
-    readonly mark: "rounded-[0.625rem]";
+    readonly mark: "rounded-[0.375rem]";
     readonly row: "rounded-[0.75rem]";
     readonly prominent: "rounded-[1.25rem]";
     readonly surface: "rounded-[1.5rem]";
@@ -32,6 +32,13 @@ declare const edgeTone: {
     readonly header: "border-sherick-edge/[0.10]";
     readonly rule: "border-sherick-edge/[0.075]";
 };
+declare const rim: {
+    readonly field: "border-[1.5px] border-sherick-rim";
+    readonly fieldError: "border-[1.5px] border-sherick-danger";
+    readonly dashed: string;
+    readonly dashedHover: "hover:after:bg-sherick-ink-muted";
+    readonly dashedDragging: "data-[dragging]:after:bg-sherick-primary";
+};
 declare const edge: {
     readonly row: string;
     readonly header: string;
@@ -49,17 +56,17 @@ declare const state: {
     readonly text: "cursor-text";
     readonly rowHover: "hover:bg-sherick-ink/[0.05]";
     readonly field: {
-        readonly hover: "hover:bg-sherick-surface-high/[0.82]";
-        readonly focus: "focus:bg-sherick-surface-high/[0.9]";
-        readonly focusWithin: "[&&]:focus-within:bg-sherick-surface-high/[0.9]";
-        readonly engaged: "bg-sherick-surface-high/[0.9]";
-        readonly errorHover: "hover:bg-sherick-danger/[0.10]";
-        readonly errorFocus: "focus:bg-sherick-danger/[0.13]";
-        readonly errorEngaged: "bg-sherick-danger/[0.13]";
-        readonly invalid: "data-[invalid]:bg-sherick-danger/[0.075]";
-        readonly invalidHover: "data-[invalid]:hover:bg-sherick-danger/[0.10]";
-        readonly invalidEngaged: "data-[invalid]:bg-sherick-danger/[0.13]";
-        readonly invalidFocusWithin: "[&&]:data-[invalid]:focus-within:bg-sherick-danger/[0.13]";
+        readonly hover: "hover:bg-sherick-canvas/[0.85] hover:border-sherick-ink-muted";
+        readonly focus: "focus:bg-sherick-canvas focus:border-sherick-ink-muted";
+        readonly focusWithin: "[&&]:focus-within:bg-sherick-canvas [&&]:focus-within:border-sherick-ink-muted";
+        readonly engaged: "bg-sherick-canvas border-sherick-ink-muted";
+        readonly errorHover: "hover:bg-sherick-canvas/[0.85]";
+        readonly errorFocus: "focus:bg-sherick-canvas";
+        readonly errorEngaged: "bg-sherick-canvas";
+        readonly invalid: "data-[invalid]:border-sherick-danger";
+        readonly invalidHover: "data-[invalid]:hover:border-sherick-danger";
+        readonly invalidEngaged: "data-[invalid]:border-sherick-danger";
+        readonly invalidFocusWithin: "[&&]:data-[invalid]:focus-within:border-sherick-danger";
     };
 };
 declare const stateLayerQuietComposite: string;
@@ -69,6 +76,7 @@ declare const stateLayer: {
     readonly tonalNeutral: string;
     readonly filled: string;
     readonly track: string;
+    readonly mark: string;
     readonly activeRow: "data-[highlighted]:before:opacity-[0.05]";
 };
 declare const hitArea = "relative after:pointer-events-auto after:absolute after:inset-[min(0px,calc((100%-2.75rem)/2))] after:content-['']";
@@ -77,8 +85,8 @@ declare const material: {
     readonly matteQuiet: "bg-sherick-surface/[0.42] text-sherick-ink";
     readonly matte: "bg-sherick-surface/[0.78] text-sherick-ink";
     readonly matteHigh: "bg-sherick-surface-high/[0.72] text-sherick-ink";
-    readonly control: "bg-sherick-surface-high/[0.66] text-sherick-ink placeholder:text-sherick-ink-muted";
-    readonly controlError: "bg-sherick-danger/[0.075] text-sherick-ink placeholder:text-sherick-danger";
+    readonly control: "bg-sherick-canvas/[0.7] text-sherick-ink placeholder:text-sherick-ink-muted";
+    readonly controlError: "bg-sherick-canvas/[0.7] text-sherick-ink placeholder:text-sherick-danger";
     readonly handle: "bg-sherick-ink-muted text-sherick-canvas";
     readonly acrylic: "bg-sherick-surface-float/[var(--sui-glass-fill)] bg-[image:var(--sui-glass-gradient)] text-sherick-ink backdrop-blur-[var(--sui-glass-blur)] backdrop-saturate-[var(--sui-glass-saturation)] backdrop-brightness-[var(--sui-glass-brightness)]";
     readonly acrylicDense: "bg-sherick-surface-float/[var(--sui-glass-dense-fill)] bg-[image:var(--sui-glass-gradient-dense)] text-sherick-ink backdrop-blur-[var(--sui-glass-dense-blur)] backdrop-saturate-[var(--sui-glass-dense-saturation)] backdrop-brightness-[var(--sui-glass-dense-brightness)]";
@@ -194,8 +202,9 @@ declare const selectable: {
     readonly markSurface: string;
     readonly rest: string;
     readonly mark: string;
-    readonly selected: "group-data-[checked]:bg-sherick-primary-strong group-data-[checked]:text-sherick-on-primary";
-    readonly indeterminate: "group-data-[indeterminate]:bg-sherick-primary-strong group-data-[indeterminate]:text-sherick-on-primary";
+    readonly selected: "group-data-[checked]:bg-sherick-primary-strong group-data-[checked]:text-sherick-on-primary group-data-[checked]:shadow-sherick-flat group-data-[checked]:after:opacity-0";
+    readonly indeterminate: "group-data-[indeterminate]:bg-sherick-primary-strong group-data-[indeterminate]:text-sherick-on-primary group-data-[indeterminate]:shadow-sherick-flat group-data-[indeterminate]:after:opacity-0";
+    readonly thumb: "bg-current";
 };
 declare const recipeAlphas: {
     readonly state: {
@@ -215,6 +224,9 @@ declare const recipeAlphas: {
             readonly hover: number;
             readonly press: number;
         };
+        readonly mark: {
+            readonly hover: number;
+        };
     };
     readonly tint: {
         readonly neutralSoft: number;
@@ -227,9 +239,6 @@ declare const recipeAlphas: {
         readonly control: number;
         readonly hover: number;
         readonly engaged: number;
-        readonly invalid: number;
-        readonly invalidHover: number;
-        readonly invalidFocus: number;
     };
 };
 declare const fieldLayout = "flex min-w-0 w-full flex-col [overflow-wrap:anywhere]";
@@ -242,7 +251,7 @@ type MotionIntent = "feedback" | "tactile" | "arrive" | "orient" | "relocate" |
 /** Non-spatial feedback: hover, focus, field tone, a highlighted row, a filled surface.
  *  It never translates, scales or resizes; reduced motion simply drops the interpolation
  *  and the state still arrives. */
-declare const motionFeedback = "transition-[background-color,color,box-shadow,opacity] duration-press ease-press motion-reduce:transition-none";
+declare const motionFeedback = "transition-[background-color,border-color,color,box-shadow,opacity] duration-press ease-press motion-reduce:transition-none";
 declare const motionTactile: string;
 declare const motionTactileWide: string;
 declare const motionTactileField: string;
@@ -318,6 +327,10 @@ declare const motionActivityIndeterminate = "animate-sherick-indeterminate [[dir
  *  is, and arrowing through a list with a soft fade on every row leaves a smear of half-lit rows.
  *  The row's layer therefore changes in one step, for the pointer and the keyboard alike. */
 declare const motionRowLayer = "before:transition-none";
+/** A rim drawn as an overlay of its own — an empty selection mark's lip, a drop target's dashes —
+ *  carries its own feedback timing: it steps up on hover and fades as a selection fill arrives,
+ *  on the same press curve as the surface beneath it. */
+declare const motionRim = "after:transition-[background-color,border-color,opacity] after:duration-press after:ease-press motion-reduce:after:transition-none";
 declare const motionStateLayer = "before:transition-opacity before:duration-release before:ease-release active:before:duration-tactile active:before:ease-press group-active:before:duration-tactile group-active:before:ease-press motion-reduce:before:transition-none";
 declare const motionDisclose = "transition-[height] duration-release ease-release data-[starting-style]:h-0 data-[ending-style]:h-0 data-[ending-style]:duration-overlay-exit data-[ending-style]:ease-exit motion-reduce:transition-none";
 declare const motionPresenceSheet: string;
@@ -330,5 +343,5 @@ declare const motionPresenceToast: string;
  */
 declare const cn: (...inputs: ClassValue[]) => string;
 
-export { cn, currentDestination, density, detail, disclosure, edge, edgeTone, elevation, fieldLayout, fieldMessage, focusRing, focusRingDrag, focusRingHeld, focusRingInset, focusRingWithin, groupFocusRing, hitArea, iconSlot, list, material, matteInset, mediaCanvas, motionActivityIndeterminate, motionActivityPulse, motionActivitySpin, motionArrive, motionDirect, motionDisclose, motionFeedback, motionInkPress, motionOrient, motionPresenceAnchored, motionPresenceModal, motionPresenceScrim, motionPresenceSheet, motionPresenceToast, motionPresenceTooltip, motionRelocate, motionRelocateLong, motionRowLayer, motionStateLayer, motionTactile, motionTactileField, motionTactileWide, overlay, parentFocusRingInset, recessedTop, recipeAlphas, selectable, selectableRowSurface, shape, stacking, state, stateLayer, stateLayerQuietComposite, text, tone, type };
+export { cn, currentDestination, density, detail, disclosure, edge, edgeTone, elevation, fieldLayout, fieldMessage, focusRing, focusRingDrag, focusRingHeld, focusRingInset, focusRingWithin, groupFocusRing, hitArea, iconSlot, list, material, matteInset, mediaCanvas, motionActivityIndeterminate, motionActivityPulse, motionActivitySpin, motionArrive, motionDirect, motionDisclose, motionFeedback, motionInkPress, motionOrient, motionPresenceAnchored, motionPresenceModal, motionPresenceScrim, motionPresenceSheet, motionPresenceToast, motionPresenceTooltip, motionRelocate, motionRelocateLong, motionRim, motionRowLayer, motionStateLayer, motionTactile, motionTactileField, motionTactileWide, overlay, parentFocusRingInset, recessedTop, recipeAlphas, rim, selectable, selectableRowSurface, shape, stacking, state, stateLayer, stateLayerQuietComposite, text, tone, type };
 export type { MotionIntent };

package/dist/types/dev.d.ts

@@ -18,7 +18,7 @@ declare const elevation: {
 declare const recessedTop = "shadow-sherick-recessed-top";
 declare const shape: {
     readonly control: "rounded-[1rem]";
-    readonly mark: "rounded-[0.625rem]";
+    readonly mark: "rounded-[0.375rem]";
     readonly row: "rounded-[0.75rem]";
     readonly prominent: "rounded-[1.25rem]";
     readonly surface: "rounded-[1.5rem]";
@@ -32,6 +32,13 @@ declare const edgeTone: {
     readonly header: "border-sherick-edge/[0.10]";
     readonly rule: "border-sherick-edge/[0.075]";
 };
+declare const rim: {
+    readonly field: "border-[1.5px] border-sherick-rim";
+    readonly fieldError: "border-[1.5px] border-sherick-danger";
+    readonly dashed: string;
+    readonly dashedHover: "hover:after:bg-sherick-ink-muted";
+    readonly dashedDragging: "data-[dragging]:after:bg-sherick-primary";
+};
 declare const edge: {
     readonly row: string;
     readonly header: string;
@@ -49,17 +56,17 @@ declare const state: {
     readonly text: "cursor-text";
     readonly rowHover: "hover:bg-sherick-ink/[0.05]";
     readonly field: {
-        readonly hover: "hover:bg-sherick-surface-high/[0.82]";
-        readonly focus: "focus:bg-sherick-surface-high/[0.9]";
-        readonly focusWithin: "[&&]:focus-within:bg-sherick-surface-high/[0.9]";
-        readonly engaged: "bg-sherick-surface-high/[0.9]";
-        readonly errorHover: "hover:bg-sherick-danger/[0.10]";
-        readonly errorFocus: "focus:bg-sherick-danger/[0.13]";
-        readonly errorEngaged: "bg-sherick-danger/[0.13]";
-        readonly invalid: "data-[invalid]:bg-sherick-danger/[0.075]";
-        readonly invalidHover: "data-[invalid]:hover:bg-sherick-danger/[0.10]";
-        readonly invalidEngaged: "data-[invalid]:bg-sherick-danger/[0.13]";
-        readonly invalidFocusWithin: "[&&]:data-[invalid]:focus-within:bg-sherick-danger/[0.13]";
+        readonly hover: "hover:bg-sherick-canvas/[0.85] hover:border-sherick-ink-muted";
+        readonly focus: "focus:bg-sherick-canvas focus:border-sherick-ink-muted";
+        readonly focusWithin: "[&&]:focus-within:bg-sherick-canvas [&&]:focus-within:border-sherick-ink-muted";
+        readonly engaged: "bg-sherick-canvas border-sherick-ink-muted";
+        readonly errorHover: "hover:bg-sherick-canvas/[0.85]";
+        readonly errorFocus: "focus:bg-sherick-canvas";
+        readonly errorEngaged: "bg-sherick-canvas";
+        readonly invalid: "data-[invalid]:border-sherick-danger";
+        readonly invalidHover: "data-[invalid]:hover:border-sherick-danger";
+        readonly invalidEngaged: "data-[invalid]:border-sherick-danger";
+        readonly invalidFocusWithin: "[&&]:data-[invalid]:focus-within:border-sherick-danger";
     };
 };
 declare const stateLayerQuietComposite: string;
@@ -69,6 +76,7 @@ declare const stateLayer: {
     readonly tonalNeutral: string;
     readonly filled: string;
     readonly track: string;
+    readonly mark: string;
     readonly activeRow: "data-[highlighted]:before:opacity-[0.05]";
 };
 declare const hitArea = "relative after:pointer-events-auto after:absolute after:inset-[min(0px,calc((100%-2.75rem)/2))] after:content-['']";
@@ -77,8 +85,8 @@ declare const material: {
     readonly matteQuiet: "bg-sherick-surface/[0.42] text-sherick-ink";
     readonly matte: "bg-sherick-surface/[0.78] text-sherick-ink";
     readonly matteHigh: "bg-sherick-surface-high/[0.72] text-sherick-ink";
-    readonly control: "bg-sherick-surface-high/[0.66] text-sherick-ink placeholder:text-sherick-ink-muted";
-    readonly controlError: "bg-sherick-danger/[0.075] text-sherick-ink placeholder:text-sherick-danger";
+    readonly control: "bg-sherick-canvas/[0.7] text-sherick-ink placeholder:text-sherick-ink-muted";
+    readonly controlError: "bg-sherick-canvas/[0.7] text-sherick-ink placeholder:text-sherick-danger";
     readonly handle: "bg-sherick-ink-muted text-sherick-canvas";
     readonly acrylic: "bg-sherick-surface-float/[var(--sui-glass-fill)] bg-[image:var(--sui-glass-gradient)] text-sherick-ink backdrop-blur-[var(--sui-glass-blur)] backdrop-saturate-[var(--sui-glass-saturation)] backdrop-brightness-[var(--sui-glass-brightness)]";
     readonly acrylicDense: "bg-sherick-surface-float/[var(--sui-glass-dense-fill)] bg-[image:var(--sui-glass-gradient-dense)] text-sherick-ink backdrop-blur-[var(--sui-glass-dense-blur)] backdrop-saturate-[var(--sui-glass-dense-saturation)] backdrop-brightness-[var(--sui-glass-dense-brightness)]";
@@ -194,8 +202,9 @@ declare const selectable: {
     readonly markSurface: string;
     readonly rest: string;
     readonly mark: string;
-    readonly selected: "group-data-[checked]:bg-sherick-primary-strong group-data-[checked]:text-sherick-on-primary";
-    readonly indeterminate: "group-data-[indeterminate]:bg-sherick-primary-strong group-data-[indeterminate]:text-sherick-on-primary";
+    readonly selected: "group-data-[checked]:bg-sherick-primary-strong group-data-[checked]:text-sherick-on-primary group-data-[checked]:shadow-sherick-flat group-data-[checked]:after:opacity-0";
+    readonly indeterminate: "group-data-[indeterminate]:bg-sherick-primary-strong group-data-[indeterminate]:text-sherick-on-primary group-data-[indeterminate]:shadow-sherick-flat group-data-[indeterminate]:after:opacity-0";
+    readonly thumb: "bg-current";
 };
 declare const recipeAlphas: {
     readonly state: {
@@ -215,6 +224,9 @@ declare const recipeAlphas: {
             readonly hover: number;
             readonly press: number;
         };
+        readonly mark: {
+            readonly hover: number;
+        };
     };
     readonly tint: {
         readonly neutralSoft: number;
@@ -227,9 +239,6 @@ declare const recipeAlphas: {
         readonly control: number;
         readonly hover: number;
         readonly engaged: number;
-        readonly invalid: number;
-        readonly invalidHover: number;
-        readonly invalidFocus: number;
     };
 };
 declare const fieldLayout = "flex min-w-0 w-full flex-col [overflow-wrap:anywhere]";
@@ -242,7 +251,7 @@ type MotionIntent = "feedback" | "tactile" | "arrive" | "orient" | "relocate" |
 /** Non-spatial feedback: hover, focus, field tone, a highlighted row, a filled surface.
  *  It never translates, scales or resizes; reduced motion simply drops the interpolation
  *  and the state still arrives. */
-declare const motionFeedback = "transition-[background-color,color,box-shadow,opacity] duration-press ease-press motion-reduce:transition-none";
+declare const motionFeedback = "transition-[background-color,border-color,color,box-shadow,opacity] duration-press ease-press motion-reduce:transition-none";
 declare const motionTactile: string;
 declare const motionTactileWide: string;
 declare const motionTactileField: string;
@@ -318,6 +327,10 @@ declare const motionActivityIndeterminate = "animate-sherick-indeterminate [[dir
  *  is, and arrowing through a list with a soft fade on every row leaves a smear of half-lit rows.
  *  The row's layer therefore changes in one step, for the pointer and the keyboard alike. */
 declare const motionRowLayer = "before:transition-none";
+/** A rim drawn as an overlay of its own — an empty selection mark's lip, a drop target's dashes —
+ *  carries its own feedback timing: it steps up on hover and fades as a selection fill arrives,
+ *  on the same press curve as the surface beneath it. */
+declare const motionRim = "after:transition-[background-color,border-color,opacity] after:duration-press after:ease-press motion-reduce:after:transition-none";
 declare const motionStateLayer = "before:transition-opacity before:duration-release before:ease-release active:before:duration-tactile active:before:ease-press group-active:before:duration-tactile group-active:before:ease-press motion-reduce:before:transition-none";
 declare const motionDisclose = "transition-[height] duration-release ease-release data-[starting-style]:h-0 data-[ending-style]:h-0 data-[ending-style]:duration-overlay-exit data-[ending-style]:ease-exit motion-reduce:transition-none";
 declare const motionPresenceSheet: string;
@@ -330,5 +343,5 @@ declare const motionPresenceToast: string;
  */
 declare const cn: (...inputs: ClassValue[]) => string;
 
-export { cn, currentDestination, density, detail, disclosure, edge, edgeTone, elevation, fieldLayout, fieldMessage, focusRing, focusRingDrag, focusRingHeld, focusRingInset, focusRingWithin, groupFocusRing, hitArea, iconSlot, list, material, matteInset, mediaCanvas, motionActivityIndeterminate, motionActivityPulse, motionActivitySpin, motionArrive, motionDirect, motionDisclose, motionFeedback, motionInkPress, motionOrient, motionPresenceAnchored, motionPresenceModal, motionPresenceScrim, motionPresenceSheet, motionPresenceToast, motionPresenceTooltip, motionRelocate, motionRelocateLong, motionRowLayer, motionStateLayer, motionTactile, motionTactileField, motionTactileWide, overlay, parentFocusRingInset, recessedTop, recipeAlphas, selectable, selectableRowSurface, shape, stacking, state, stateLayer, stateLayerQuietComposite, text, tone, type };
+export { cn, currentDestination, density, detail, disclosure, edge, edgeTone, elevation, fieldLayout, fieldMessage, focusRing, focusRingDrag, focusRingHeld, focusRingInset, focusRingWithin, groupFocusRing, hitArea, iconSlot, list, material, matteInset, mediaCanvas, motionActivityIndeterminate, motionActivityPulse, motionActivitySpin, motionArrive, motionDirect, motionDisclose, motionFeedback, motionInkPress, motionOrient, motionPresenceAnchored, motionPresenceModal, motionPresenceScrim, motionPresenceSheet, motionPresenceToast, motionPresenceTooltip, motionRelocate, motionRelocateLong, motionRim, motionRowLayer, motionStateLayer, motionTactile, motionTactileField, motionTactileWide, overlay, parentFocusRingInset, recessedTop, recipeAlphas, rim, selectable, selectableRowSurface, shape, stacking, state, stateLayer, stateLayerQuietComposite, text, tone, type };
 export type { MotionIntent };

package/dist/types/index.d.cts

@@ -236,6 +236,7 @@ interface CalendarLabels {
     /** Reported when a date — or a range — cannot be selected or is not acceptable. */
     unavailableRange: string;
 }
+type CalendarDateTime = string;
 
 interface CalendarBaseProps extends Omit<ComponentProps<"div">, "children" | "value" | "defaultValue" | "defaultChecked" | "onChange"> {
     /** The month on screen, normalized to its first day. Undefined means the calendar owns it. */
@@ -674,6 +675,78 @@ interface DateRangePickerProps {
  */
 declare const DateRangePicker: React__default.ForwardRefExoticComponent<DateRangePickerProps & React__default.RefAttributes<HTMLInputElement>>;
 
+interface TimePanelLabels {
+    /** Names the panel's group of columns. */
+    time: string;
+    hour: string;
+    minute: string;
+    period: string;
+    /** Shown in place of the reading until one is chosen. */
+    chooseTime: string;
+}
+
+interface DateTimePickerLabels extends CalendarLabels, TimePanelLabels {
+    /** The action that closes the popup. */
+    done: string;
+    /** Reported when the entered date and time cannot be accepted. */
+    unavailableDateTime: string;
+}
+interface DateTimePickerProps {
+    /** The selected date and time, `YYYY-MM-DDTHH:mm`, or `null` for none. Undefined makes the picker
+     *  uncontrolled. */
+    value?: CalendarDateTime | null;
+    defaultValue?: CalendarDateTime | null;
+    /** Receives the next date and time, or `null` when the field is cleared. */
+    onValueChange?: (value: CalendarDateTime | null) => void;
+    /** The field's label. It names the native field, its control and the popup. */
+    label: string;
+    description?: ReactNode;
+    error?: ReactNode;
+    required?: boolean;
+    disabled?: boolean;
+    /** Styles the field's own column. */
+    className?: string;
+    id?: string;
+    /** The form that owns the field, when it renders outside it. */
+    form?: string;
+    /** Identifies the field when it is submitted. */
+    name?: string;
+    open?: boolean;
+    defaultOpen?: boolean;
+    /** Base's own open-change callback, event details included. */
+    onOpenChange?: Popover$1.Root.Props["onOpenChange"];
+    /** The earliest acceptable date and time, inclusive. */
+    min?: CalendarDateTime;
+    /** The latest acceptable date and time, inclusive. */
+    max?: CalendarDateTime;
+    /** Whether a date cannot be chosen at any time. Unavailable dates stay visible and are never selected. */
+    isDateUnavailable?: (date: CalendarDate) => boolean;
+    /** The interval, in minutes, between the minutes the popup offers. Typed entry stays
+     *  minute-precise. Defaults to 5. */
+    minuteStep?: number;
+    /** Shows a twelve-hour clock with a day period, or a twenty-four-hour clock. Defaults to the
+     *  locale's own. */
+    hourCycle?: 12 | 24;
+    locale?: string;
+    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    today?: CalendarDate;
+    labels?: Partial<DateTimePickerLabels>;
+}
+/**
+ * A date and a time of day: a native `datetime-local` input, with a named control beside it that
+ * opens the shared `Calendar` and a column for each part of the clock in a popover.
+ *
+ * The native input stays the field's control, so the browser owns its entry, its mobile UI, its
+ * form submission and the `required` and `min`/`max` constraints; `isDateUnavailable` is reported
+ * through the field's own validation, and a value the popup would refuse is never accepted — the
+ * input keeps what was typed and the field says why. In the popup, a half-chosen value waits for
+ * its other half, a choice that crosses a bound settles on the bound, and Done closes the surface.
+ *
+ * Values are civil `YYYY-MM-DDTHH:mm` readings with no time zone, exactly as the native input
+ * submits them.
+ */
+declare const DateTimePicker: React__default.ForwardRefExoticComponent<DateTimePickerProps & React__default.RefAttributes<HTMLInputElement>>;
+
 declare const edgeTone: {
     readonly row: "border-sherick-edge/[0.06]";
     readonly header: "border-sherick-edge/[0.10]";
@@ -1653,5 +1726,5 @@ interface DirectionProviderProps {
 /** Declares writing direction to the interaction and positioning primitives, including portals. */
 declare const DirectionProvider: ({ direction, children }: DirectionProviderProps) => React__default.JSX.Element;
 
-export { Accordion, Alert, AlertDialog, Avatar, Badge, Breadcrumb, Button, Calendar, Card, Checkbox, Chip, ChipGroup, Collapsible, Combobox, Command, CommandPalette, DatePicker, DateRangePicker, Dialog, DirectionProvider, Divider, Drawer, Field, FileUpload, IconButton, Input, Media, Menu, NavGroup, NavItem, NumberField, Pagination, Popover, Progress, RadioGroup, Search, SegmentedControl, Select, Skeleton, Slider, Spinner, Stepper, Switch, Table, Tabs, Textarea, ToastProvider, ToastViewport, ToggleGroup, Tooltip, TreeView, createToastManager, useToast };
-export type { AccordionHeadingLevel, AccordionItemProps, AccordionPanelProps, AccordionProps, AccordionTriggerProps, AlertDialogProps, AlertProps, AvatarProps, BadgeProps, BreadcrumbItem, BreadcrumbProps, ButtonAppearance, ButtonProps, ButtonSize, CalendarDate, CalendarLabels, CalendarProps, CardProps, CheckboxProps, ChipGroupProps, ChipProps, CollapsiblePanelProps, CollapsibleProps, CollapsibleTriggerProps, ComboboxOption, ComboboxProps, CommandItem, CommandPaletteProps, CommandProps, DatePickerProps, DateRange, DateRangePickerProps, DialogContentProps, DialogDescriptionProps, DialogFooterProps, DialogHeaderProps, DialogProps, DirectionProviderProps, DividerProps, DividerWeight, DrawerContentProps, DrawerDescriptionProps, DrawerFooterProps, DrawerHeaderProps, DrawerProps, DrawerSide, DrawerTriggerProps, FieldProps, FileRejection, FileUploadProps, IconButtonAppearance, IconButtonProps, InputProps, MediaImageProps, MediaVideoProps, MenuContentProps, MenuItemProps, MenuProps, MenuSeparatorProps, MenuTriggerProps, NavGroupHeadingLevel, NavGroupItem, NavGroupProps, NavItemProps, NumberFieldProps, OverlayAlign, OverlaySide, PaginationProps, PopoverContentProps, PopoverProps, PopoverTriggerProps, ProgressProps, RadioGroupOption, RadioGroupProps, SearchProps, SegmentedControlOption, SegmentedControlProps, SelectOption, SelectProps, SkeletonProps, SliderProps, SpinnerProps, StepperItem, StepperProps, SwitchProps, Tab, TableColumn, TableProps, TabsProps, TextareaProps, ToastActionOptions, ToastManager, ToastOptions, ToastPosition, ToastPromiseOptions, ToastProviderProps, ToastType, ToastUpdateOptions, ToastViewportProps, ToggleGroupItemProps, ToggleGroupProps, TooltipProps, TreeViewItem, TreeViewProps, Variant };
+export { Accordion, Alert, AlertDialog, Avatar, Badge, Breadcrumb, Button, Calendar, Card, Checkbox, Chip, ChipGroup, Collapsible, Combobox, Command, CommandPalette, DatePicker, DateRangePicker, DateTimePicker, Dialog, DirectionProvider, Divider, Drawer, Field, FileUpload, IconButton, Input, Media, Menu, NavGroup, NavItem, NumberField, Pagination, Popover, Progress, RadioGroup, Search, SegmentedControl, Select, Skeleton, Slider, Spinner, Stepper, Switch, Table, Tabs, Textarea, ToastProvider, ToastViewport, ToggleGroup, Tooltip, TreeView, createToastManager, useToast };
+export type { AccordionHeadingLevel, AccordionItemProps, AccordionPanelProps, AccordionProps, AccordionTriggerProps, AlertDialogProps, AlertProps, AvatarProps, BadgeProps, BreadcrumbItem, BreadcrumbProps, ButtonAppearance, ButtonProps, ButtonSize, CalendarDate, CalendarDateTime, CalendarLabels, CalendarProps, CardProps, CheckboxProps, ChipGroupProps, ChipProps, CollapsiblePanelProps, CollapsibleProps, CollapsibleTriggerProps, ComboboxOption, ComboboxProps, CommandItem, CommandPaletteProps, CommandProps, DatePickerProps, DateRange, DateRangePickerProps, DateTimePickerLabels, DateTimePickerProps, DialogContentProps, DialogDescriptionProps, DialogFooterProps, DialogHeaderProps, DialogProps, DirectionProviderProps, DividerProps, DividerWeight, DrawerContentProps, DrawerDescriptionProps, DrawerFooterProps, DrawerHeaderProps, DrawerProps, DrawerSide, DrawerTriggerProps, FieldProps, FileRejection, FileUploadProps, IconButtonAppearance, IconButtonProps, InputProps, MediaImageProps, MediaVideoProps, MenuContentProps, MenuItemProps, MenuProps, MenuSeparatorProps, MenuTriggerProps, NavGroupHeadingLevel, NavGroupItem, NavGroupProps, NavItemProps, NumberFieldProps, OverlayAlign, OverlaySide, PaginationProps, PopoverContentProps, PopoverProps, PopoverTriggerProps, ProgressProps, RadioGroupOption, RadioGroupProps, SearchProps, SegmentedControlOption, SegmentedControlProps, SelectOption, SelectProps, SkeletonProps, SliderProps, SpinnerProps, StepperItem, StepperProps, SwitchProps, Tab, TableColumn, TableProps, TabsProps, TextareaProps, ToastActionOptions, ToastManager, ToastOptions, ToastPosition, ToastPromiseOptions, ToastProviderProps, ToastType, ToastUpdateOptions, ToastViewportProps, ToggleGroupItemProps, ToggleGroupProps, TooltipProps, TreeViewItem, TreeViewProps, Variant };

package/dist/types/index.d.ts

@@ -236,6 +236,7 @@ interface CalendarLabels {
     /** Reported when a date — or a range — cannot be selected or is not acceptable. */
     unavailableRange: string;
 }
+type CalendarDateTime = string;
 
 interface CalendarBaseProps extends Omit<ComponentProps<"div">, "children" | "value" | "defaultValue" | "defaultChecked" | "onChange"> {
     /** The month on screen, normalized to its first day. Undefined means the calendar owns it. */
@@ -674,6 +675,78 @@ interface DateRangePickerProps {
  */
 declare const DateRangePicker: React__default.ForwardRefExoticComponent<DateRangePickerProps & React__default.RefAttributes<HTMLInputElement>>;
 
+interface TimePanelLabels {
+    /** Names the panel's group of columns. */
+    time: string;
+    hour: string;
+    minute: string;
+    period: string;
+    /** Shown in place of the reading until one is chosen. */
+    chooseTime: string;
+}
+
+interface DateTimePickerLabels extends CalendarLabels, TimePanelLabels {
+    /** The action that closes the popup. */
+    done: string;
+    /** Reported when the entered date and time cannot be accepted. */
+    unavailableDateTime: string;
+}
+interface DateTimePickerProps {
+    /** The selected date and time, `YYYY-MM-DDTHH:mm`, or `null` for none. Undefined makes the picker
+     *  uncontrolled. */
+    value?: CalendarDateTime | null;
+    defaultValue?: CalendarDateTime | null;
+    /** Receives the next date and time, or `null` when the field is cleared. */
+    onValueChange?: (value: CalendarDateTime | null) => void;
+    /** The field's label. It names the native field, its control and the popup. */
+    label: string;
+    description?: ReactNode;
+    error?: ReactNode;
+    required?: boolean;
+    disabled?: boolean;
+    /** Styles the field's own column. */
+    className?: string;
+    id?: string;
+    /** The form that owns the field, when it renders outside it. */
+    form?: string;
+    /** Identifies the field when it is submitted. */
+    name?: string;
+    open?: boolean;
+    defaultOpen?: boolean;
+    /** Base's own open-change callback, event details included. */
+    onOpenChange?: Popover$1.Root.Props["onOpenChange"];
+    /** The earliest acceptable date and time, inclusive. */
+    min?: CalendarDateTime;
+    /** The latest acceptable date and time, inclusive. */
+    max?: CalendarDateTime;
+    /** Whether a date cannot be chosen at any time. Unavailable dates stay visible and are never selected. */
+    isDateUnavailable?: (date: CalendarDate) => boolean;
+    /** The interval, in minutes, between the minutes the popup offers. Typed entry stays
+     *  minute-precise. Defaults to 5. */
+    minuteStep?: number;
+    /** Shows a twelve-hour clock with a day period, or a twenty-four-hour clock. Defaults to the
+     *  locale's own. */
+    hourCycle?: 12 | 24;
+    locale?: string;
+    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    today?: CalendarDate;
+    labels?: Partial<DateTimePickerLabels>;
+}
+/**
+ * A date and a time of day: a native `datetime-local` input, with a named control beside it that
+ * opens the shared `Calendar` and a column for each part of the clock in a popover.
+ *
+ * The native input stays the field's control, so the browser owns its entry, its mobile UI, its
+ * form submission and the `required` and `min`/`max` constraints; `isDateUnavailable` is reported
+ * through the field's own validation, and a value the popup would refuse is never accepted — the
+ * input keeps what was typed and the field says why. In the popup, a half-chosen value waits for
+ * its other half, a choice that crosses a bound settles on the bound, and Done closes the surface.
+ *
+ * Values are civil `YYYY-MM-DDTHH:mm` readings with no time zone, exactly as the native input
+ * submits them.
+ */
+declare const DateTimePicker: React__default.ForwardRefExoticComponent<DateTimePickerProps & React__default.RefAttributes<HTMLInputElement>>;
+
 declare const edgeTone: {
     readonly row: "border-sherick-edge/[0.06]";
     readonly header: "border-sherick-edge/[0.10]";
@@ -1653,5 +1726,5 @@ interface DirectionProviderProps {
 /** Declares writing direction to the interaction and positioning primitives, including portals. */
 declare const DirectionProvider: ({ direction, children }: DirectionProviderProps) => React__default.JSX.Element;
 
-export { Accordion, Alert, AlertDialog, Avatar, Badge, Breadcrumb, Button, Calendar, Card, Checkbox, Chip, ChipGroup, Collapsible, Combobox, Command, CommandPalette, DatePicker, DateRangePicker, Dialog, DirectionProvider, Divider, Drawer, Field, FileUpload, IconButton, Input, Media, Menu, NavGroup, NavItem, NumberField, Pagination, Popover, Progress, RadioGroup, Search, SegmentedControl, Select, Skeleton, Slider, Spinner, Stepper, Switch, Table, Tabs, Textarea, ToastProvider, ToastViewport, ToggleGroup, Tooltip, TreeView, createToastManager, useToast };
-export type { AccordionHeadingLevel, AccordionItemProps, AccordionPanelProps, AccordionProps, AccordionTriggerProps, AlertDialogProps, AlertProps, AvatarProps, BadgeProps, BreadcrumbItem, BreadcrumbProps, ButtonAppearance, ButtonProps, ButtonSize, CalendarDate, CalendarLabels, CalendarProps, CardProps, CheckboxProps, ChipGroupProps, ChipProps, CollapsiblePanelProps, CollapsibleProps, CollapsibleTriggerProps, ComboboxOption, ComboboxProps, CommandItem, CommandPaletteProps, CommandProps, DatePickerProps, DateRange, DateRangePickerProps, DialogContentProps, DialogDescriptionProps, DialogFooterProps, DialogHeaderProps, DialogProps, DirectionProviderProps, DividerProps, DividerWeight, DrawerContentProps, DrawerDescriptionProps, DrawerFooterProps, DrawerHeaderProps, DrawerProps, DrawerSide, DrawerTriggerProps, FieldProps, FileRejection, FileUploadProps, IconButtonAppearance, IconButtonProps, InputProps, MediaImageProps, MediaVideoProps, MenuContentProps, MenuItemProps, MenuProps, MenuSeparatorProps, MenuTriggerProps, NavGroupHeadingLevel, NavGroupItem, NavGroupProps, NavItemProps, NumberFieldProps, OverlayAlign, OverlaySide, PaginationProps, PopoverContentProps, PopoverProps, PopoverTriggerProps, ProgressProps, RadioGroupOption, RadioGroupProps, SearchProps, SegmentedControlOption, SegmentedControlProps, SelectOption, SelectProps, SkeletonProps, SliderProps, SpinnerProps, StepperItem, StepperProps, SwitchProps, Tab, TableColumn, TableProps, TabsProps, TextareaProps, ToastActionOptions, ToastManager, ToastOptions, ToastPosition, ToastPromiseOptions, ToastProviderProps, ToastType, ToastUpdateOptions, ToastViewportProps, ToggleGroupItemProps, ToggleGroupProps, TooltipProps, TreeViewItem, TreeViewProps, Variant };
+export { Accordion, Alert, AlertDialog, Avatar, Badge, Breadcrumb, Button, Calendar, Card, Checkbox, Chip, ChipGroup, Collapsible, Combobox, Command, CommandPalette, DatePicker, DateRangePicker, DateTimePicker, Dialog, DirectionProvider, Divider, Drawer, Field, FileUpload, IconButton, Input, Media, Menu, NavGroup, NavItem, NumberField, Pagination, Popover, Progress, RadioGroup, Search, SegmentedControl, Select, Skeleton, Slider, Spinner, Stepper, Switch, Table, Tabs, Textarea, ToastProvider, ToastViewport, ToggleGroup, Tooltip, TreeView, createToastManager, useToast };
+export type { AccordionHeadingLevel, AccordionItemProps, AccordionPanelProps, AccordionProps, AccordionTriggerProps, AlertDialogProps, AlertProps, AvatarProps, BadgeProps, BreadcrumbItem, BreadcrumbProps, ButtonAppearance, ButtonProps, ButtonSize, CalendarDate, CalendarDateTime, CalendarLabels, CalendarProps, CardProps, CheckboxProps, ChipGroupProps, ChipProps, CollapsiblePanelProps, CollapsibleProps, CollapsibleTriggerProps, ComboboxOption, ComboboxProps, CommandItem, CommandPaletteProps, CommandProps, DatePickerProps, DateRange, DateRangePickerProps, DateTimePickerLabels, DateTimePickerProps, DialogContentProps, DialogDescriptionProps, DialogFooterProps, DialogHeaderProps, DialogProps, DirectionProviderProps, DividerProps, DividerWeight, DrawerContentProps, DrawerDescriptionProps, DrawerFooterProps, DrawerHeaderProps, DrawerProps, DrawerSide, DrawerTriggerProps, FieldProps, FileRejection, FileUploadProps, IconButtonAppearance, IconButtonProps, InputProps, MediaImageProps, MediaVideoProps, MenuContentProps, MenuItemProps, MenuProps, MenuSeparatorProps, MenuTriggerProps, NavGroupHeadingLevel, NavGroupItem, NavGroupProps, NavItemProps, NumberFieldProps, OverlayAlign, OverlaySide, PaginationProps, PopoverContentProps, PopoverProps, PopoverTriggerProps, ProgressProps, RadioGroupOption, RadioGroupProps, SearchProps, SegmentedControlOption, SegmentedControlProps, SelectOption, SelectProps, SkeletonProps, SliderProps, SpinnerProps, StepperItem, StepperProps, SwitchProps, Tab, TableColumn, TableProps, TabsProps, TextareaProps, ToastActionOptions, ToastManager, ToastOptions, ToastPosition, ToastPromiseOptions, ToastProviderProps, ToastType, ToastUpdateOptions, ToastViewportProps, ToggleGroupItemProps, ToggleGroupProps, TooltipProps, TreeViewItem, TreeViewProps, Variant };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sherick-ui",
-  "version": "2.3.0",
+  "version": "2.5.0",
   "description": "A reusable React component library inspired by Material 3 Expressive.",
   "repository": {
     "type": "git",