sherick-ui 2.4.0 → 2.5.0

package/dist/styles.css

@@ -583,6 +583,9 @@
 :where(.sui-scope).h-1\.5 {
     height: 0.375rem
 }
+:where(.sui-scope).h-10 {
+    height: 2.5rem
+}
 :where(.sui-scope).h-11 {
     height: 2.75rem
 }
@@ -592,6 +595,9 @@
 :where(.sui-scope).h-32 {
     height: 8rem
 }
+:where(.sui-scope).h-48 {
+    height: 12rem
+}
 :where(.sui-scope).h-5 {
     height: 1.25rem
 }
@@ -754,6 +760,9 @@
 :where(.sui-scope).max-w-\[min\(28rem\2c 90vw\)\] {
     max-width: min(28rem, 90vw)
 }
+:where(.sui-scope).max-w-\[min\(34rem\2c var\(--available-width\)\)\] {
+    max-width: min(34rem, var(--available-width))
+}
 :where(.sui-scope).max-w-\[var\(--available-width\)\] {
     max-width: var(--available-width)
 }
@@ -865,6 +874,10 @@
 :where(.sui-scope).resize-y {
     resize: vertical
 }
+:where(.sui-scope).scroll-py-11 {
+    scroll-padding-top: 2.75rem;
+    scroll-padding-bottom: 2.75rem
+}
 :where(.sui-scope).list-decimal {
     list-style-type: decimal
 }
@@ -1839,6 +1852,9 @@
 :where(.sui-scope).\[overflow-wrap\:normal\] {
     overflow-wrap: normal
 }
+:where(.sui-scope).\[scrollbar-width\:thin\] {
+    scrollbar-width: thin
+}
 :where(.sui-scope).\[transform-origin\:var\(--transform-origin\)\] {
     transform-origin: var(--transform-origin)
 }
@@ -2517,9 +2533,45 @@
     }
 }
 @media (min-width: 640px) {
+    :where(.sui-scope).sm\:ms-3 {
+        margin-inline-start: 0.75rem
+    }
+    :where(.sui-scope).sm\:mt-0 {
+        margin-top: 0px
+    }
+    :where(.sui-scope).sm\:grid {
+        display: grid
+    }
+    :where(.sui-scope).sm\:h-0 {
+        height: 0px
+    }
+    :where(.sui-scope).sm\:h-auto {
+        height: auto
+    }
+    :where(.sui-scope).sm\:min-h-full {
+        min-height: 100%
+    }
+    :where(.sui-scope).sm\:w-14 {
+        width: 3.5rem
+    }
     :where(.sui-scope).sm\:w-\[22\.5rem\] {
         width: 22.5rem
     }
+    :where(.sui-scope).sm\:flex-1 {
+        flex: 1 1 0%
+    }
+    :where(.sui-scope).sm\:flex-none {
+        flex: none
+    }
+    :where(.sui-scope).sm\:grid-cols-\[auto_auto\] {
+        grid-template-columns: auto auto
+    }
+    :where(.sui-scope).sm\:border-s {
+        border-inline-start-width: 1px
+    }
+    :where(.sui-scope).sm\:border-t-0 {
+        border-top-width: 0px
+    }
     :where(.sui-scope).sm\:p-8 {
         padding: 2rem
     }
@@ -2527,9 +2579,15 @@
         padding-left: 1.75rem;
         padding-right: 1.75rem
     }
+    :where(.sui-scope).sm\:ps-3 {
+        padding-inline-start: 0.75rem
+    }
     :where(.sui-scope).sm\:ps-7 {
         padding-inline-start: 1.75rem
     }
+    :where(.sui-scope).sm\:pt-0 {
+        padding-top: 0px
+    }
 }
 :where(.sui-scope).rtl\:-scale-x-100:where([dir="rtl"], [dir="rtl"] *) {
     --tw-scale-x: -1;

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.4.0",
+  "version": "2.5.0",
   "description": "A reusable React component library inspired by Material 3 Expressive.",
   "repository": {
     "type": "git",