@geomak/ui 4.0.0 → 5.0.1

package/dist/index.d.cts

@@ -1919,68 +1919,71 @@ interface FileInputProps {
  */
 declare function FileInput({ allowMultiple, onChange, name, accept, }: FileInputProps): react_jsx_runtime.JSX.Element;
 
-/** ─────────────────── DatePicker ─────────────────── */
 interface DatePickerProps {
-    value: Date;
-    onChange: (e: {
-        target: {
-            value: Date;
-            id?: string;
-            name?: string;
-        };
-    }) => void;
-    layout?: 'horizontal' | 'vertical';
+    /** Current date. `null` / `undefined` means "no date selected". */
+    value?: Date | null;
+    /** Fires with the next date (or `null` if cleared via the clear button). */
+    onChange?: (date: Date | null) => void;
     label?: React$1.ReactNode;
+    /** Text shown in the trigger when no date is selected. Default `"Select a date…"`. */
+    placeholder?: string;
     htmlFor?: string;
     name?: string;
-    style?: React$1.CSSProperties;
-    errorMessage?: React$1.ReactNode;
-    disableBefore?: Date | string;
-    disableAfter?: Date | string;
+    /** Label/trigger orientation. Defaults to `'horizontal'`. */
+    layout?: 'horizontal' | 'vertical';
     disabled?: boolean;
-}
-/**
- * Custom calendar date picker.
- *
- * @example
- * <DatePicker.DatePicker
- *   label="Report date"
- *   value={form.date}
- *   onChange={({ target }) => setField('date', target.value)}
- *   disableAfter={new Date()}
- * />
- */
-declare function DatePickerBase({ value, onChange, layout, label, htmlFor, name, style, errorMessage, disableBefore, disableAfter, disabled, }: DatePickerProps): react_jsx_runtime.JSX.Element;
-/** ─────────────────── TemporalPicker (year/number scroll) ─────────────────── */
-interface TemporalPickerProps {
-    value: number;
-    onChange: (e: {
-        target: {
-            value: number;
-        };
-    }) => void;
-    type?: 'year';
-    upperLimit?: number;
-    lowerLimit?: number;
     errorMessage?: React$1.ReactNode;
-    label?: React$1.ReactNode;
-    layout?: string;
+    /** Earliest selectable date. Dates before this render disabled. */
+    min?: Date;
+    /** Latest selectable date. Dates after this render disabled. */
+    max?: Date;
     style?: React$1.CSSProperties;
+    /**
+     * Custom formatter for the trigger display. Defaults to
+     * `YYYY-MM-DD` via `toISOString().slice(0, 10)`.
+     */
+    format?: (date: Date) => string;
+    /** 0 = Sunday, 1 = Monday. Default `0`. */
+    weekStartsOn?: 0 | 1;
+    /** Allow the user to clear the date with a button in the popover. Default `true`. */
+    clearable?: boolean;
 }
-declare function TemporalPickerBase({ value, onChange, lowerLimit, upperLimit, errorMessage, label, layout, style, }: TemporalPickerProps): react_jsx_runtime.JSX.Element;
-/** ─────────────────── Namespace export ─────────────────── */
+type TemporalPickerProps = DatePickerProps;
 /**
- * Temporal date/time picker namespace.
+ * Calendar date picker built on `@radix-ui/react-popover`.
  *
- * @example
- * import Temporal from '@geomak/ui'
+ * Renders the calendar as a real `<table role="grid">` with weekday `<th>`
+ * headers and per-day `<td role="gridcell">` cells, so screen readers get
+ * proper row/column context.
+ *
+ * **Keyboard model** (focus is anywhere inside the grid):
+ * - `←` `→` — previous / next day
+ * - `↑` `↓` — previous / next week
+ * - `PageUp` / `PageDown` — previous / next month
+ * - `Home` / `End` — first / last day of the current week
+ * - `Enter` / `Space` — select the focused day
+ * - `Esc` — close the popover
  *
- * <Temporal.DatePicker value={date} onChange={handleChange} label="Date" />
- * <Temporal.TemporalPicker value={year} type="year" lowerLimit={2018} upperLimit={2026} onChange={handleChange} />
+ * @example Required date
+ * ```tsx
+ * const [date, setDate] = useState<Date | null>(null)
+ * <DatePicker
+ *   label="Report date"
+ *   value={date}
+ *   onChange={setDate}
+ *   max={new Date()}
+ * />
+ * ```
+ *
+ * @example Custom format
+ * ```tsx
+ * <DatePicker
+ *   value={date}
+ *   onChange={setDate}
+ *   format={(d) => new Intl.DateTimeFormat('en-GB', { dateStyle: 'long' }).format(d)}
+ * />
+ * ```
  */
-declare const Temporal: {
-    DatePicker: typeof DatePickerBase;
-    TemporalPicker: typeof TemporalPickerBase;
-};
+declare function DatePicker({ value, onChange, label, placeholder, htmlFor, name: _name, layout, disabled, errorMessage, min, max, style, format, weekStartsOn, clearable, }: DatePickerProps): react_jsx_runtime.JSX.Element;
 
-export { AppShell, type AppShellProps, AutoComplete, type AutoCompleteProps, Button, type ButtonProps, Catalog, CatalogCarousel, type CatalogCarouselProps, CatalogGrid, type CatalogGridProps, type CatalogProps, Checkbox, type CheckboxProps, ContextMenu, type ContextMenuActionItem, type ContextMenuPosition, type ContextMenuProps, type DatePickerProps, Drawer, type DrawerProps, Dropdown, type DropdownItem, DropdownPill, type DropdownPillProps, type DropdownProps, type ExpandRowOptions, FadingBase, type FadingBaseProps, FileInput, type FileInputProps, GridCard, type GridCardItem, type GridCardProps, Icon, IconButton, type IconButtonProps, List, type ListItem, type ListProps, LoadingSpinner, type LoadingSpinnerProps, MenuBar, MenuBarItem, type MenuBarItemConfig, type MenuBarItemProps, type MenuBarProps, Modal, type ModalProps, type NotificationPayload, NotificationProvider, NumberInput, type NumberInputProps, OpaqueGridCard, type OpaqueGridCardProps, type PaginationOptions, Password, type PasswordProps, Portal, type PortalProps, ScalableContainer, type ScalableContainerProps, SearchInput, type SearchInputProps, Sidebar, type SidebarItem, type SidebarProps, type SidebarSection, SkeletonBox, type SkeletonBoxProps, SkeletonCard, type SkeletonCardProps, SkeletonCircle, type SkeletonCircleProps, SkeletonText, type SkeletonTextProps, Switch, type SwitchInputProps, type TabItem, Table, type TableColumn, type TableProps, Tabs, type TabsProps, Temporal, type TemporalPickerProps, TextInput, type TextInputProps, type ThemeColors, type ThemeConfig, type ThemeDensity, type ThemeMotion, ThemeProvider, type ThemeProviderProps, type ThemeRadius, type ThemeShadows, ThemeSwitch, type ThemeSwitchProps, type ThemeTypography, ToggleButton, type ToggleButtonProps, type ToggleItem, Tooltip, type TooltipProps, TooltipProvider, TopBar, type TopBarProps, Tree, type TreeItemClickPayload, type TreeNode, type TreeProps, TreeSelect, type TreeSelectProps, Wizard, type WizardProps, type WizardStep, useNotification };
+export { AppShell, type AppShellProps, AutoComplete, type AutoCompleteProps, Button, type ButtonProps, Catalog, CatalogCarousel, type CatalogCarouselProps, CatalogGrid, type CatalogGridProps, type CatalogProps, Checkbox, type CheckboxProps, ContextMenu, type ContextMenuActionItem, type ContextMenuPosition, type ContextMenuProps, type DatePickerProps, Drawer, type DrawerProps, Dropdown, type DropdownItem, DropdownPill, type DropdownPillProps, type DropdownProps, type ExpandRowOptions, FadingBase, type FadingBaseProps, FileInput, type FileInputProps, GridCard, type GridCardItem, type GridCardProps, Icon, IconButton, type IconButtonProps, List, type ListItem, type ListProps, LoadingSpinner, type LoadingSpinnerProps, MenuBar, MenuBarItem, type MenuBarItemConfig, type MenuBarItemProps, type MenuBarProps, Modal, type ModalProps, type NotificationPayload, NotificationProvider, NumberInput, type NumberInputProps, OpaqueGridCard, type OpaqueGridCardProps, type PaginationOptions, Password, type PasswordProps, Portal, type PortalProps, ScalableContainer, type ScalableContainerProps, SearchInput, type SearchInputProps, Sidebar, type SidebarItem, type SidebarProps, type SidebarSection, SkeletonBox, type SkeletonBoxProps, SkeletonCard, type SkeletonCardProps, SkeletonCircle, type SkeletonCircleProps, SkeletonText, type SkeletonTextProps, Switch, type SwitchInputProps, type TabItem, Table, type TableColumn, type TableProps, Tabs, type TabsProps, DatePicker as Temporal, type TemporalPickerProps, TextInput, type TextInputProps, type ThemeColors, type ThemeConfig, type ThemeDensity, type ThemeMotion, ThemeProvider, type ThemeProviderProps, type ThemeRadius, type ThemeShadows, ThemeSwitch, type ThemeSwitchProps, type ThemeTypography, ToggleButton, type ToggleButtonProps, type ToggleItem, Tooltip, type TooltipProps, TooltipProvider, TopBar, type TopBarProps, Tree, type TreeItemClickPayload, type TreeNode, type TreeProps, TreeSelect, type TreeSelectProps, Wizard, type WizardProps, type WizardStep, useNotification };

package/dist/index.d.ts

@@ -1919,68 +1919,71 @@ interface FileInputProps {
  */
 declare function FileInput({ allowMultiple, onChange, name, accept, }: FileInputProps): react_jsx_runtime.JSX.Element;
 
-/** ─────────────────── DatePicker ─────────────────── */
 interface DatePickerProps {
-    value: Date;
-    onChange: (e: {
-        target: {
-            value: Date;
-            id?: string;
-            name?: string;
-        };
-    }) => void;
-    layout?: 'horizontal' | 'vertical';
+    /** Current date. `null` / `undefined` means "no date selected". */
+    value?: Date | null;
+    /** Fires with the next date (or `null` if cleared via the clear button). */
+    onChange?: (date: Date | null) => void;
     label?: React$1.ReactNode;
+    /** Text shown in the trigger when no date is selected. Default `"Select a date…"`. */
+    placeholder?: string;
     htmlFor?: string;
     name?: string;
-    style?: React$1.CSSProperties;
-    errorMessage?: React$1.ReactNode;
-    disableBefore?: Date | string;
-    disableAfter?: Date | string;
+    /** Label/trigger orientation. Defaults to `'horizontal'`. */
+    layout?: 'horizontal' | 'vertical';
     disabled?: boolean;
-}
-/**
- * Custom calendar date picker.
- *
- * @example
- * <DatePicker.DatePicker
- *   label="Report date"
- *   value={form.date}
- *   onChange={({ target }) => setField('date', target.value)}
- *   disableAfter={new Date()}
- * />
- */
-declare function DatePickerBase({ value, onChange, layout, label, htmlFor, name, style, errorMessage, disableBefore, disableAfter, disabled, }: DatePickerProps): react_jsx_runtime.JSX.Element;
-/** ─────────────────── TemporalPicker (year/number scroll) ─────────────────── */
-interface TemporalPickerProps {
-    value: number;
-    onChange: (e: {
-        target: {
-            value: number;
-        };
-    }) => void;
-    type?: 'year';
-    upperLimit?: number;
-    lowerLimit?: number;
     errorMessage?: React$1.ReactNode;
-    label?: React$1.ReactNode;
-    layout?: string;
+    /** Earliest selectable date. Dates before this render disabled. */
+    min?: Date;
+    /** Latest selectable date. Dates after this render disabled. */
+    max?: Date;
     style?: React$1.CSSProperties;
+    /**
+     * Custom formatter for the trigger display. Defaults to
+     * `YYYY-MM-DD` via `toISOString().slice(0, 10)`.
+     */
+    format?: (date: Date) => string;
+    /** 0 = Sunday, 1 = Monday. Default `0`. */
+    weekStartsOn?: 0 | 1;
+    /** Allow the user to clear the date with a button in the popover. Default `true`. */
+    clearable?: boolean;
 }
-declare function TemporalPickerBase({ value, onChange, lowerLimit, upperLimit, errorMessage, label, layout, style, }: TemporalPickerProps): react_jsx_runtime.JSX.Element;
-/** ─────────────────── Namespace export ─────────────────── */
+type TemporalPickerProps = DatePickerProps;
 /**
- * Temporal date/time picker namespace.
+ * Calendar date picker built on `@radix-ui/react-popover`.
  *
- * @example
- * import Temporal from '@geomak/ui'
+ * Renders the calendar as a real `<table role="grid">` with weekday `<th>`
+ * headers and per-day `<td role="gridcell">` cells, so screen readers get
+ * proper row/column context.
+ *
+ * **Keyboard model** (focus is anywhere inside the grid):
+ * - `←` `→` — previous / next day
+ * - `↑` `↓` — previous / next week
+ * - `PageUp` / `PageDown` — previous / next month
+ * - `Home` / `End` — first / last day of the current week
+ * - `Enter` / `Space` — select the focused day
+ * - `Esc` — close the popover
  *
- * <Temporal.DatePicker value={date} onChange={handleChange} label="Date" />
- * <Temporal.TemporalPicker value={year} type="year" lowerLimit={2018} upperLimit={2026} onChange={handleChange} />
+ * @example Required date
+ * ```tsx
+ * const [date, setDate] = useState<Date | null>(null)
+ * <DatePicker
+ *   label="Report date"
+ *   value={date}
+ *   onChange={setDate}
+ *   max={new Date()}
+ * />
+ * ```
+ *
+ * @example Custom format
+ * ```tsx
+ * <DatePicker
+ *   value={date}
+ *   onChange={setDate}
+ *   format={(d) => new Intl.DateTimeFormat('en-GB', { dateStyle: 'long' }).format(d)}
+ * />
+ * ```
  */
-declare const Temporal: {
-    DatePicker: typeof DatePickerBase;
-    TemporalPicker: typeof TemporalPickerBase;
-};
+declare function DatePicker({ value, onChange, label, placeholder, htmlFor, name: _name, layout, disabled, errorMessage, min, max, style, format, weekStartsOn, clearable, }: DatePickerProps): react_jsx_runtime.JSX.Element;
 
-export { AppShell, type AppShellProps, AutoComplete, type AutoCompleteProps, Button, type ButtonProps, Catalog, CatalogCarousel, type CatalogCarouselProps, CatalogGrid, type CatalogGridProps, type CatalogProps, Checkbox, type CheckboxProps, ContextMenu, type ContextMenuActionItem, type ContextMenuPosition, type ContextMenuProps, type DatePickerProps, Drawer, type DrawerProps, Dropdown, type DropdownItem, DropdownPill, type DropdownPillProps, type DropdownProps, type ExpandRowOptions, FadingBase, type FadingBaseProps, FileInput, type FileInputProps, GridCard, type GridCardItem, type GridCardProps, Icon, IconButton, type IconButtonProps, List, type ListItem, type ListProps, LoadingSpinner, type LoadingSpinnerProps, MenuBar, MenuBarItem, type MenuBarItemConfig, type MenuBarItemProps, type MenuBarProps, Modal, type ModalProps, type NotificationPayload, NotificationProvider, NumberInput, type NumberInputProps, OpaqueGridCard, type OpaqueGridCardProps, type PaginationOptions, Password, type PasswordProps, Portal, type PortalProps, ScalableContainer, type ScalableContainerProps, SearchInput, type SearchInputProps, Sidebar, type SidebarItem, type SidebarProps, type SidebarSection, SkeletonBox, type SkeletonBoxProps, SkeletonCard, type SkeletonCardProps, SkeletonCircle, type SkeletonCircleProps, SkeletonText, type SkeletonTextProps, Switch, type SwitchInputProps, type TabItem, Table, type TableColumn, type TableProps, Tabs, type TabsProps, Temporal, type TemporalPickerProps, TextInput, type TextInputProps, type ThemeColors, type ThemeConfig, type ThemeDensity, type ThemeMotion, ThemeProvider, type ThemeProviderProps, type ThemeRadius, type ThemeShadows, ThemeSwitch, type ThemeSwitchProps, type ThemeTypography, ToggleButton, type ToggleButtonProps, type ToggleItem, Tooltip, type TooltipProps, TooltipProvider, TopBar, type TopBarProps, Tree, type TreeItemClickPayload, type TreeNode, type TreeProps, TreeSelect, type TreeSelectProps, Wizard, type WizardProps, type WizardStep, useNotification };
+export { AppShell, type AppShellProps, AutoComplete, type AutoCompleteProps, Button, type ButtonProps, Catalog, CatalogCarousel, type CatalogCarouselProps, CatalogGrid, type CatalogGridProps, type CatalogProps, Checkbox, type CheckboxProps, ContextMenu, type ContextMenuActionItem, type ContextMenuPosition, type ContextMenuProps, type DatePickerProps, Drawer, type DrawerProps, Dropdown, type DropdownItem, DropdownPill, type DropdownPillProps, type DropdownProps, type ExpandRowOptions, FadingBase, type FadingBaseProps, FileInput, type FileInputProps, GridCard, type GridCardItem, type GridCardProps, Icon, IconButton, type IconButtonProps, List, type ListItem, type ListProps, LoadingSpinner, type LoadingSpinnerProps, MenuBar, MenuBarItem, type MenuBarItemConfig, type MenuBarItemProps, type MenuBarProps, Modal, type ModalProps, type NotificationPayload, NotificationProvider, NumberInput, type NumberInputProps, OpaqueGridCard, type OpaqueGridCardProps, type PaginationOptions, Password, type PasswordProps, Portal, type PortalProps, ScalableContainer, type ScalableContainerProps, SearchInput, type SearchInputProps, Sidebar, type SidebarItem, type SidebarProps, type SidebarSection, SkeletonBox, type SkeletonBoxProps, SkeletonCard, type SkeletonCardProps, SkeletonCircle, type SkeletonCircleProps, SkeletonText, type SkeletonTextProps, Switch, type SwitchInputProps, type TabItem, Table, type TableColumn, type TableProps, Tabs, type TabsProps, DatePicker as Temporal, type TemporalPickerProps, TextInput, type TextInputProps, type ThemeColors, type ThemeConfig, type ThemeDensity, type ThemeMotion, ThemeProvider, type ThemeProviderProps, type ThemeRadius, type ThemeShadows, ThemeSwitch, type ThemeSwitchProps, type ThemeTypography, ToggleButton, type ToggleButtonProps, type ToggleItem, Tooltip, type TooltipProps, TooltipProvider, TopBar, type TopBarProps, Tree, type TreeItemClickPayload, type TreeNode, type TreeProps, TreeSelect, type TreeSelectProps, Wizard, type WizardProps, type WizardStep, useNotification };