@ahrowe/ui 0.37.0 → 0.39.0

package/dist/types/common/commandPalette/commandPalette.d.ts

@@ -0,0 +1,4 @@
+import { ReactElement } from 'react';
+import { CommandPaletteProps } from './commandPalette.types.js';
+declare function CommandPalette(props: CommandPaletteProps): ReactElement;
+export default CommandPalette;

package/dist/types/common/commandPalette/commandPalette.types.d.ts

@@ -0,0 +1,42 @@
+import { CSSProperties } from 'react';
+import { MenuEntry } from '../menu/menu.types.js';
+import { Presentation } from '../configProvider/presentation.types.js';
+import { SlotClassNames, SlotStyles, HtmlProps } from '../types/slots.types.js';
+export type CommandPaletteSlots = 'root' | 'search' | 'input' | 'list' | 'item' | 'itemIcon' | 'itemLabel' | 'itemShortcut' | 'heading' | 'separator' | 'empty';
+export interface CommandPaletteLabels {
+    /** Accessible name of the dialog and the search field. Default: "Search commands". */
+    label?: string;
+    /** Placeholder in the search field. Default: "Type a command or search…". */
+    placeholder?: string;
+    /** Shown when nothing matches. Default: "No results". */
+    empty?: string;
+    /** Shown while `isLoading` and nothing matches yet. Default: "Searching…". */
+    loading?: string;
+    /** Announced to screen readers as the matches change. */
+    results?: (count: number) => string;
+}
+export interface CommandPaletteProps extends HtmlProps<HTMLDivElement> {
+    /** The commands, in the same shape `Menu` takes. Headings group them; separators split groups. */
+    items: MenuEntry[];
+    isOpen: boolean;
+    onClose: () => void;
+    /** Called with the id of the command that was run, after its own `onClick`. */
+    onAction?: (id: string) => void;
+    /** Called on every keystroke, and with `''` each time the palette opens. */
+    onQueryChange?: (query: string) => void;
+    /**
+     * Filter `items` by the query. Default `true`. Set `false` when `items` are already the results,
+     * e.g. fetched from a server in `onQueryChange`.
+     */
+    filter?: boolean;
+    /** Shows the `loading` label instead of `empty` while nothing matches. */
+    isLoading?: boolean;
+    /** Centred dialog, bottom sheet, or a sheet only on a small touch screen. */
+    presentation?: Presentation;
+    /** Text this component renders of its own. */
+    labels?: CommandPaletteLabels;
+    className?: string;
+    style?: CSSProperties;
+    classNames?: SlotClassNames<CommandPaletteSlots>;
+    styles?: SlotStyles<CommandPaletteSlots>;
+}

package/dist/types/common/commandPalette/filterCommands.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+import { MenuAction, MenuEntry } from '../menu/menu.types.js';
+export interface CommandGroup {
+    heading?: ReactNode;
+    /** Whether a separator started this group, so the divider can be drawn above it. */
+    separated: boolean;
+    actions: MenuAction[];
+}
+/** Splits entries into groups at each heading and separator, keeping their order. */
+export declare function groupCommands(items: MenuEntry[]): CommandGroup[];
+/**
+ * The groups with only the actions matching `query`, best matches first within each group, and
+ * the group holding the best match first. A heading moves with its group, never away from it.
+ */
+export declare function filterCommands(groups: CommandGroup[], query: string): CommandGroup[];

package/dist/types/common/commandPalette/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './commandPalette.js';
+export * from './commandPalette.types.js';

package/dist/types/common/configProvider/configProvider.types.d.ts

@@ -15,6 +15,9 @@ import { SearchInputLabels } from '../searchInput/searchInput.types.js';
 import { TooltipLabels } from '../tooltip/tooltip.types.js';
 import { VirtualListLabels } from '../virtualList/virtualList.types.js';
 import { ButtonProps } from '../button/button.types.js';
+import { CopyButtonProps } from '../copyButton/copyButton.types.js';
+import { CommandPaletteProps } from '../commandPalette/commandPalette.types.js';
+import { WeatherIconProps } from '../weatherIcon/weatherIcon.types.js';
 import { ActionButtonsProps } from '../actionButtons/actionButtons.types.js';
 import { ConfirmModalProps } from '../confirmModal/confirmModal.types.js';
 import { BadgeProps } from '../badge/badge.types.js';
@@ -91,6 +94,7 @@ export interface ComponentDefaults {
     RadioGroup?: Partial<RadioGroupProps>;
     DatePicker?: Partial<DatePickerProps>;
     Button?: Partial<ButtonProps>;
+    CopyButton?: Partial<CopyButtonProps>;
     ActionButtons?: Partial<ActionButtonsProps>;
     ConfirmModal?: Partial<ConfirmModalProps>;
     Badge?: Partial<BadgeProps>;
@@ -118,6 +122,8 @@ export interface ComponentDefaults {
     RoomViewer?: Partial<RoomViewerProps>;
     Popover?: Partial<PopoverProps>;
     Modal?: Partial<ModalProps>;
+    CommandPalette?: Partial<CommandPaletteProps>;
+    WeatherIcon?: Partial<WeatherIconProps>;
 }
 export interface ConfigProviderProps {
     children: React.ReactNode;

package/dist/types/common/copyButton/copyButton.d.ts

@@ -0,0 +1,4 @@
+import { ReactElement } from 'react';
+import { CopyButtonProps } from './copyButton.types.js';
+declare function CopyButton(props: CopyButtonProps): ReactElement;
+export default CopyButton;

package/dist/types/common/copyButton/copyButton.types.d.ts

@@ -0,0 +1,36 @@
+import { CSSProperties, MouseEvent, Ref } from 'react';
+import { IconContent } from '../types/icon.types.js';
+import { SlotClassNames, SlotStyles, HtmlProps } from '../types/slots.types.js';
+export type CopyButtonSlots = 'root' | 'icon';
+export interface CopyButtonLabels {
+    /** Accessible name and tooltip before copying. Default: "Copy". */
+    copy?: string;
+    /** Accessible name and tooltip after a successful copy, also announced. Default: "Copied". */
+    copied?: string;
+    /** Announced when the copy fails. Default: "Could not copy". */
+    failed?: string;
+}
+export interface CopyButtonProps extends Omit<HtmlProps<HTMLDivElement>, 'onCopy' | 'onError'> {
+    /** Text written to the clipboard on click. */
+    value: string;
+    /** How long the copied state shows, in ms. Default: 2000. */
+    timeout?: number;
+    /** Icon before copying. Default: `faCopy`. */
+    icon?: IconContent;
+    /** Icon while the copied state shows. Default: `faCheck`. */
+    copiedIcon?: IconContent;
+    /** Called after a successful copy. */
+    onCopy?: (value: string) => void;
+    /** Called when the clipboard refuses the write, e.g. outside a secure context. */
+    onError?: () => void;
+    /** Called on every click, before the copy. */
+    onClick?: (event: MouseEvent<HTMLDivElement>) => void;
+    /** Text this component renders of its own. */
+    labels?: CopyButtonLabels;
+    /** Ref to the root element. */
+    ref?: Ref<HTMLDivElement>;
+    className?: string;
+    style?: CSSProperties;
+    classNames?: SlotClassNames<CopyButtonSlots>;
+    styles?: SlotStyles<CopyButtonSlots>;
+}

package/dist/types/common/copyButton/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './copyButton.js';
+export * from './copyButton.types.js';

package/dist/types/common/datePicker/components/datePickerMonth/datePickerMonth.types.d.ts

@@ -8,16 +8,16 @@ export interface DatePickerMonthProps {
     month?: number;
     /** Year to display. */
     year?: number;
-    /** Called with the day that was picked. */
-    onSelect?: (date: Date) => void;
+    /** Called with the day that was picked, `'YYYY-MM-DD'`. */
+    onSelect?: (day: string) => void;
     /** First day of the highlighted range, and the day that starts with the tab stop. */
-    selectionStart?: Date;
+    selectionStart?: string | null;
     /** Last day of the highlighted range. */
-    selectionEnd?: Date;
+    selectionEnd?: string | null;
     /** Days before this are not selectable. */
-    minDate?: Date | null;
+    minDate?: string | null;
     /** Days after this are not selectable. */
-    maxDate?: Date | null;
+    maxDate?: string | null;
     /** Called to shift the displayed month by ±1 when arrow navigation runs past its edge. */
     onNavigateMonth?: (delta: 1 | -1) => void;
 }

package/dist/types/common/datePicker/dateFunctions.d.ts

@@ -1,26 +1,17 @@
-export declare function getDaysInMonth(month: number, year: number): number;
-export declare function getDateFromDayMonthAndYear(day: number, month: number, year: number): Date;
+import { DayParts } from '../utils/day.js';
 export declare function getMonthName(locale: string, year: number, month: number, day: number, short?: boolean): string;
 export declare function getMonthNames(locale?: string): string[];
 export declare function getWeekDays(locale: string, short?: boolean): string[];
+/** 1 (Monday) to 7 (Sunday). */
 export declare function getStartWeekDayOfMonth(month: number, year: number): number;
-/**
- * Adds `delta` days to a day/month/year triple, rolling over into adjacent months/years as
- * needed. Pure integer arithmetic over `getDaysInMonth` rather than a `Date` object, so it
- * can't drift a day from local-vs-UTC ambiguity the way mutating a UTC-constructed `Date`
- * with its local `setDate` would.
- */
-export declare function addDays(day: number, month: number, year: number, delta: number): {
-    day: number;
-    month: number;
-    year: number;
-};
-export declare function getDayMonthAndYearOfDate(date: Date): {
-    day: number;
-    month: number;
-    year: number;
-};
-export declare function getDateString(date: Date): string;
+/** `delta` days from a day, rolling over into the months and years around it. */
+export declare function addDays(day: number, month: number, year: number, delta: number): DayParts;
+/** Today in the user's time zone. */
+export declare function getToday(): DayParts;
+/** A `'YYYY-MM-DD'` day as the field shows it, `dd.mm.yyyy`, or `''` for anything else. */
+export declare function getDateString(value: string | null | undefined): string;
+/** What the field holds, `dd.mm.yyyy`, as `'YYYY-MM-DD'`; `null` while incomplete, or for a day that does not exist. */
+export declare function parseDateString(text: string): string | null;
 export interface DateMaskSelection {
     start: number;
     end: number;

package/dist/types/common/datePicker/datePicker.types.d.ts

@@ -3,8 +3,10 @@ import { FormValidator } from '../../services/formValidation/index.js';
 import { HtmlProps, SlotClassNames, SlotStyles } from '../types/slots.types.js';
 export type DatePickerSlots = 'root' | 'input' | 'header' | 'monthDropdown' | 'yearDropdown' | 'calendar' | 'clearButton';
 /**
- * `onChange` and `onSelect` report a date rather than a DOM event, so the native
+ * `onChange` and `onSelect` report a day rather than a DOM event, so the native
  * handlers of those names are dropped instead of being widened to accept both.
+ *
+ * Every day is a `'YYYY-MM-DD'` string, never a `Date`: see docs/DatePicker.md.
  */
 export interface DatePickerProps extends Omit<HtmlProps<HTMLDivElement>, 'onChange' | 'onSelect'> {
     /** Class on the root element. */
@@ -12,33 +14,37 @@ export interface DatePickerProps extends Omit<HtmlProps<HTMLDivElement>, 'onChan
     style?: CSSProperties;
     classNames?: SlotClassNames<DatePickerSlots>;
     styles?: SlotStyles<DatePickerSlots>;
-    /** Selected date, controlled. Ignored while a `formValidator` owns the value. */
-    selected?: Date;
+    /** Selected day, `'YYYY-MM-DD'`, controlled. Ignored while a `formValidator` owns the value. */
+    selected?: string | null;
     /** Floating label on the input. */
     label?: string;
     /**
      * Called when a day is picked in the calendar, after `onChange`. Picking also
      * closes the picker.
      */
-    onSelect?: (date: Date | null) => void;
+    onSelect?: (day: string | null) => void;
     /**
      * Called whenever the value changes, whether picked in the calendar or typed
-     * into the input. `null` when the field was cleared or holds no valid date.
+     * into the input. `null` when the field was cleared or holds no valid day.
      */
-    onChange?: (date: Date | null) => void;
-    /** Hands the value to a validator, which then owns it. See docs/FormValidator.md. */
-    formValidator?: FormValidator | null;
-    /** Earliest selectable date. Also bounds the year dropdown. */
-    minDate?: Date | null;
-    /** Latest selectable date. Also bounds the year dropdown. */
-    maxDate?: Date | null;
+    onChange?: (day: string | null) => void;
+    /**
+     * Hands the value to a validator, which then owns it. See docs/FormValidator.md. The three
+     * forms are what TypeScript infers for `new FormValidator<string | null>(null)`,
+     * `new FormValidator(null)` and `new FormValidator('')`; a `Date` validator fits none of them.
+     */
+    formValidator?: FormValidator<string | null> | FormValidator<string> | FormValidator<null> | null;
+    /** Earliest selectable day, `'YYYY-MM-DD'`. Also bounds the year dropdown. */
+    minDate?: string | null;
+    /** Latest selectable day, `'YYYY-MM-DD'`. Also bounds the year dropdown. */
+    maxDate?: string | null;
     /**
      * Start of a highlighted range. Defaults to the selected date, so two pickers
      * sharing a start and an end highlight the span between them.
      */
-    startDate?: Date;
+    startDate?: string | null;
     /** End of the highlighted range. */
-    endDate?: Date;
+    endDate?: string | null;
     /** Render the calendar in place instead of in a popover. */
     isInline?: boolean;
     /** Open the calendar in a modal, with the input read-only. */

package/dist/types/common/datePicker/index.d.ts

@@ -1,2 +1,3 @@
 export { default } from './datePicker.js';
 export * from './datePicker.types.js';
+export { dateToDay, dayToDate } from '../utils/day.js';

package/dist/types/common/errorBoundary/errorBoundary.d.ts

@@ -2,13 +2,10 @@ import { default as React } from 'react';
 import { ErrorBoundaryProps, ErrorBoundaryState } from './errorBoundary.types.js';
 declare class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
     state: ErrorBoundaryState;
-    private copyResetTimeout;
     static getDerivedStateFromError(error: Error): Partial<ErrorBoundaryState>;
     componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void;
     componentDidUpdate(prevProps: ErrorBoundaryProps): void;
-    componentWillUnmount(): void;
     private reset;
-    private copyStackTrace;
     render(): React.ReactNode;
 }
 export default ErrorBoundary;

package/dist/types/common/errorBoundary/errorBoundary.types.d.ts

@@ -13,9 +13,9 @@ export interface ErrorBoundaryFallbackProps {
 export interface ErrorBoundaryLabels {
     /** Accordion header for the stack trace section. Default: "Stack trace". */
     stackTrace?: string;
-    /** Copy button label before copying. Default: "Copy". */
+    /** Copy button's tooltip and accessible name before copying. Default: "Copy". */
     copy?: string;
-    /** Copy button label right after a successful copy. Default: "Copied". */
+    /** Copy button's tooltip and accessible name right after a successful copy. Default: "Copied". */
     copied?: string;
     /** Reset button label. Default: "Try again". */
     reset?: string;
@@ -53,5 +53,4 @@ export interface ErrorBoundaryProps extends Omit<HtmlProps, 'title' | 'onError'>
 export interface ErrorBoundaryState {
     error: Error | null;
     errorInfo: ErrorInfo | null;
-    copied: boolean;
 }

package/dist/types/common/hooks/index.d.ts

@@ -11,3 +11,5 @@ export type { UseSwipeDismissOptions, UseSwipeDismissResult } from './useSwipeDi
 export { useOverlay } from './useOverlay.js';
 export type { UseOverlayArgs } from './useOverlay.js';
 export { tabbablesIn } from './useFocusBoundary.js';
+export { useClipboard } from './useClipboard.js';
+export type { UseClipboardOptions, UseClipboardResult } from './useClipboard.js';

package/dist/types/common/hooks/useClipboard.d.ts

@@ -0,0 +1,16 @@
+export interface UseClipboardOptions {
+    /** How long `copied` stays `true` after a successful copy, in ms. Default: 2000. */
+    timeout?: number;
+}
+export interface UseClipboardResult {
+    /** Writes `text` to the clipboard. Resolves `true` on success, `false` on failure. */
+    copy: (text: string) => Promise<boolean>;
+    /** `true` for `timeout` ms after a successful copy. */
+    copied: boolean;
+    /** Why the last copy failed, until the next attempt. */
+    error: Error | null;
+    /** Clears `copied` and `error` early. */
+    reset: () => void;
+}
+export declare function useClipboard({ timeout }?: UseClipboardOptions): UseClipboardResult;
+export default useClipboard;

package/dist/types/common/inputDropdown/inputDropdown.types.d.ts

@@ -1,7 +1,11 @@
 import { default as React } from 'react';
 import { SlotClassNames, SlotStyles, HtmlProps } from '../types/slots.types.js';
 import { FormValidator } from '../../services/formValidation/index.js';
-export type InputDropdownSlots = 'root' | 'dropdown' | 'item';
+export type InputDropdownSlots = 'root' | 'dropdown' | 'item' | 'empty';
+export interface InputDropdownLabels {
+    /** Shown when nothing matches the typed text and `allowCustomValue` is off (default `No matches`). */
+    empty?: string;
+}
 export interface InputDropdownItem {
     label?: string;
     value: string;
@@ -29,6 +33,8 @@ export interface InputDropdownProps extends Omit<HtmlProps, 'onSelect'> {
     onChange?: (value: unknown) => void;
     placeholder?: string;
     readOnly?: boolean;
+    /** Overrides the text InputDropdown renders of its own. Merged per key. */
+    labels?: InputDropdownLabels;
     className?: string;
     style?: React.CSSProperties;
     classNames?: SlotClassNames<InputDropdownSlots>;

package/dist/types/common/menu/menu.types.d.ts

@@ -20,6 +20,8 @@ export interface MenuAction {
      * into a `useHotkeys` map, so the one spelling covers both ends.
      */
     shortcut?: string;
+    /** Extra search terms for `CommandPalette`, which also matches a string `label`. `Menu` ignores them. */
+    keywords?: string[];
     disabled?: boolean;
     /** Renders in the destructive colour. For deleting, discarding, revoking. */
     danger?: boolean;

package/dist/types/common/popover/popover.types.d.ts

@@ -24,6 +24,11 @@ export type PopoverSlots = 'root' | 'trigger' | 'floating' | 'panel' | 'arrow' |
 export interface PopoverProps extends Omit<HtmlProps, 'content'> {
     /** The trigger element. */
     children?: ReactNode;
+    /**
+     * Place the panel against this element instead of `children`, for one Popover does not wrap.
+     * Open it with `isOpen`; `null` falls back to `children`.
+     */
+    anchor?: HTMLElement | null;
     /** The popover body. */
     content?: ReactNode;
     /** Preferred side (default `Bottom`). */

package/dist/types/common/themeProvider/themeProvider.d.ts

@@ -9,6 +9,11 @@ interface State {
     resolvedVariables: Record<string, string>;
     colorFadeActive: boolean;
     currentThemeColor: string | null;
+    /** What `resolvedVariables` was resolved from, to tell a theme change from any other render. */
+    resolvedFrom: {
+        themes: Theme[] | undefined;
+        currentThemeId: string | undefined;
+    };
 }
 declare class ThemeProvider extends Component<Props, State> {
     state: State;
@@ -16,6 +21,7 @@ declare class ThemeProvider extends Component<Props, State> {
     private wrapperRef;
     private themeColorMeta;
     private createdThemeColorMeta;
+    static getDerivedStateFromProps(props: Props, state: State): Partial<State> | null;
     componentDidMount(): void;
     componentDidUpdate(prevProps: Props, prevState: State): void;
     componentWillUnmount(): void;
@@ -26,13 +32,8 @@ declare class ThemeProvider extends Component<Props, State> {
      * (and removes it again on unmount).
      */
     private syncThemeColorMeta;
-    /**
-     * Resolves the full variable set for a given theme ID by walking up the
-     * baseThemeId chain.  Returns variables ordered from deepest ancestor to
-     * the requested theme so callers can merge in order (later entries win).
-     */
-    private resolveChain;
-    private applyTheme;
+    /** `--primary-color` as the browser resolved it, which may be a `var()` of another variable. */
+    private readThemeColor;
     render(): React.JSX.Element;
 }
 export default ThemeProvider;

package/dist/types/common/utils/day.d.ts

@@ -0,0 +1,16 @@
+export interface DayParts {
+    year: number;
+    /** 1 to 12. */
+    month: number;
+    day: number;
+}
+export declare function daysInMonth({ year, month }: Pick<DayParts, 'year' | 'month'>): number;
+/** The parts of a `'YYYY-MM-DD'` string, or `null` for anything else, 31 February included. */
+export declare function parseDay(value: unknown): DayParts | null;
+/** `value` itself when it is a `'YYYY-MM-DD'` day that exists, otherwise `null`. */
+export declare function asDay(value: unknown): string | null;
+export declare function formatDay({ year, month, day }: DayParts): string;
+/** The day `date` falls on in the browser's time zone, as `'YYYY-MM-DD'`; `''` for an Invalid Date. */
+export declare function dateToDay(date: Date): string;
+/** The first moment of a `'YYYY-MM-DD'` day in the browser's time zone. An Invalid Date for anything else. */
+export declare function dayToDate(day: string): Date;

package/dist/types/common/weatherIcon/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './weatherIcon.js';
+export { WeatherType } from './weatherIcon.types.js';
+export type { WeatherIconLabels, WeatherIconProps } from './weatherIcon.types.js';

package/dist/types/common/weatherIcon/parts.d.ts

@@ -0,0 +1,26 @@
+import { ReactElement } from 'react';
+import { WeatherPartProps } from './weatherIcon.types.js';
+/** Exported so a scene can clip what sits behind the cloud to this same silhouette. */
+export declare const CLOUD_PATH = "M 26.3 62.9 C 15.4 65.0 15.0 48.5 27.8 49.8 C 23.9 43.9 34.2 34.0 43.0 39.6 C 46.0 26.2 73.9 32.0 68.9 46.3 C 85.0 44.3 84.6 64.2 72.4 62.5 Z";
+export declare function Cloud({ className, delayed }: {
+    className?: string;
+    delayed?: boolean;
+}): ReactElement;
+export declare function Sun({ className }: {
+    className?: string;
+}): ReactElement;
+export declare function Moon({ className }: {
+    className?: string;
+}): ReactElement;
+export declare enum RainIntensity {
+    Light = "light",
+    Medium = "medium",
+    Heavy = "heavy"
+}
+export declare function Rain({ animated, intensity, }: WeatherPartProps & {
+    intensity?: RainIntensity;
+}): ReactElement;
+export declare function Snow({ animated }: WeatherPartProps): ReactElement;
+export declare function Hail({ animated }: WeatherPartProps): ReactElement;
+export declare function Fog(): ReactElement;
+export declare function Lightning(): ReactElement;

package/dist/types/common/weatherIcon/weatherIcon.d.ts

@@ -0,0 +1,4 @@
+import { ReactElement } from 'react';
+import { WeatherIconProps } from './weatherIcon.types.js';
+declare function WeatherIcon(props: WeatherIconProps): ReactElement;
+export default WeatherIcon;

package/dist/types/common/weatherIcon/weatherIcon.types.d.ts

@@ -0,0 +1,44 @@
+import { CSSProperties, SVGAttributes } from 'react';
+import { DataProps } from '../types/slots.types.js';
+export declare enum WeatherType {
+    Sunny = "sunny",
+    ClearNight = "clearNight",
+    Cloudy = "cloudy",
+    PartlyCloudy = "partlyCloudy",
+    PartlyCloudyNight = "partlyCloudyNight",
+    RainyLight = "rainyLight",
+    Rainy = "rainy",
+    RainyHeavy = "rainyHeavy",
+    Snowy = "snowy",
+    Hail = "hail",
+    Foggy = "foggy",
+    Thunderstorm = "thunderstorm"
+}
+/** The accessible name of each weather, read out by screen readers. */
+export type WeatherIconLabels = Partial<Record<`${WeatherType}`, string>>;
+/**
+ * The root is an `<svg>`, so the native attributes come from `SVGAttributes` rather than
+ * `HtmlProps`. Its `type` is the attribute of `<script>` and `<style>`, not of an `<svg>`.
+ */
+export interface WeatherIconProps extends DataProps, Omit<SVGAttributes<SVGSVGElement>, 'type'> {
+    /**
+     * The weather to draw. Takes the enum or its string value, so an API's own enum with the same
+     * values passes as it is.
+     */
+    type: WeatherType | `${WeatherType}`;
+    /** Width and height, any CSS size. Default `64`. */
+    size?: number | string;
+    /**
+     * Default `true`. `false` draws a still frame, for small or repeated icons where the motion is
+     * too small to see but costs the same. Always still under `prefers-reduced-motion`.
+     */
+    animated?: boolean;
+    /** Text this component renders of its own. */
+    labels?: WeatherIconLabels;
+    className?: string;
+    style?: CSSProperties;
+}
+/** What a falling part needs to know to pick its still frame. */
+export interface WeatherPartProps {
+    animated: boolean;
+}

package/dist/types/index.d.ts

@@ -31,10 +31,14 @@ export { default as Chip } from './common/chip/index.js';
 export * from './common/chip/index.js';
 export { default as ColorPicker } from './common/colorPicker/index.js';
 export * from './common/colorPicker/index.js';
+export { default as CommandPalette } from './common/commandPalette/index.js';
+export * from './common/commandPalette/index.js';
 export { default as ConfigProvider } from './common/configProvider/index.js';
 export * from './common/configProvider/index.js';
 export { default as ConfirmModal } from './common/confirmModal/index.js';
 export * from './common/confirmModal/index.js';
+export { default as CopyButton } from './common/copyButton/index.js';
+export * from './common/copyButton/index.js';
 export { default as DatePicker } from './common/datePicker/index.js';
 export * from './common/datePicker/index.js';
 export { default as Divider } from './common/divider/index.js';
@@ -146,10 +150,12 @@ export { default as Tree } from './common/tree/index.js';
 export * from './common/tree/index.js';
 export { default as VirtualList } from './common/virtualList/index.js';
 export * from './common/virtualList/index.js';
+export { default as WeatherIcon } from './common/weatherIcon/index.js';
+export * from './common/weatherIcon/index.js';
 export { default as Wizard } from './common/wizard/index.js';
 export * from './common/wizard/index.js';
 export * from './common/hooks/index.js';
 export { FormValidator, FormValidatorGroup, Validators, ValidatableComponent, useFormValidator, useFormValidatorGroup, } from './services/formValidation/index.js';
 export type { ValidationError, ValidatorFunction, ErrorParser, FormValidatorGroupOptions, InferGroupValues, MergedValues, } from './services/formValidation/index.js';
 export { mapLocale, setLocale, getLocale } from './services/localization.js';
-export { isNumber, isDate, isISODate, isEmail, isBic, isURL, hasEightPasswordChars, hasOnePasswordLetter, hasOnePasswordDigit, isPassword, } from '@ahrowe/form-validation';
+export { isNumber, isDate, isDay, isISODate, isEmail, isBic, isURL, hasEightPasswordChars, hasOnePasswordLetter, hasOnePasswordDigit, isPassword, } from '@ahrowe/form-validation';

package/docs/ButtonGroup.md

@@ -77,6 +77,8 @@ import { Input } from '@ahrowe/ui';
 
 **How it works:** the first and last children keep rounded outer corners; every child in between is flattened on both sides. Adjacent borders are collapsed with a `-1px` margin so two 1px borders don't stack into a visible double line, and whichever child is hovered/focused gets a `z-index` bump so its border/focus ring isn't clipped by its neighbors.
 
+**One border per seam:** the overlap alone keeps both borders, and at a fractional scale (browser zoom, a 125% or 150% display) they round to different device pixels, so one seam reads 2px next to a 1px one. Each child therefore clips away the 1px it shares with the next one, and the later child's border is the one you see, as it always was. A focused child keeps its whole border, and the next child clips its shared 1px instead. This is a `clip-path` on the children, so a `clip-path` of your own on a grouped child is overridden.
+
 Flattening reaches a child's visible border even when that border doesn't live on the child's own root element — the case for `Input`, `Dropdown`, and everything built on either of them (`NumberInput`, `DatePicker`, `TimeInput`, `InputDropdown`, `Textarea`), whose actual border sits on a `fieldset` nested inside a `<label>`, as well as `ColorPicker`'s swatch and `Checkbox`'s checkmark box. Alongside the direct `border-radius` reset it applies to each child's root, `ButtonGroup` also sets `--group-radius-tl`/`-tr`/`-br`/`-bl` custom properties per position. Unlike `border-radius` itself, custom properties inherit through any nesting depth, so a descendant whose own `border-radius` reads `var(--group-radius-tl, var(--default-border-radius))` (etc.) picks up the right corner overrides no matter how deep it's nested — no consumer-facing prop needed.
 
 **Separators:** any child with `role="separator"` (what `Divider` sets) is excluded from that border-collapsing margin, on both sides — it stays fully visible between its neighbors instead of being partially hidden under one of them. Use a vertical `Divider` (see [Divider.md](Divider.md)) between two buttons when their style has no visible border of its own to merge (`Primary`, `Delete`), so there's still a clear seam between them.

package/docs/CLAUDE.md

@@ -20,6 +20,10 @@ enums and slot names. Do not infer props from a component's name.
   RadioGroup, DatePicker, TimeInput, OtpInput, IconPicker) take `formValidator`, which then owns
   the value: `new FormValidator('', [Validators.required()])`. Whole forms use
   `useFormValidatorGroup`. See FormValidator.md and FormValidatorGroup.md.
+- **Days and times are strings**, never a `Date`: DatePicker holds `'YYYY-MM-DD'`, TimeInput
+  `'HH:MM'`. `dateToDay` and `dayToDate` convert in the browser's time zone; never use
+  `toISOString().slice(0, 10)`, which gives the UTC day. DatePicker.md shows how to turn a day
+  into a moment in a given time zone.
 - **Styling.** `className` and `style` hit the root element; `classNames.<slot>` and `styles.<slot>`
   hit named inner elements. Slot names are on each doc's **Slots** line. Every native attribute of
   the root element passes through (`id`, `aria-*`, `data-*`, `on*`).
@@ -59,9 +63,11 @@ enums and slot names. Do not infer props from a component's name.
 | Checkbox.md | Checkbox | Boolean toggle input — settings, multi-select lists, accept terms, feature flags |
 | Chip.md | Chip, ChipContainer, ChipStyleType | Compact tag, label, or filter token — selected items, applied filters, category badges, user avatars with remove |
 | ColorPicker.md | ColorPicker | Hex colour selection — theme editors, annotation tools, customisation panels |
+| CommandPalette.md | CommandPalette | A search-first dialog for running any command or jumping anywhere in the app from the keyboard, usually opened with ⌘K / Ctrl+K |
 | ConfigProvider.md | ConfigProvider | Set global **default props** for library components once, near the root of your app, instead of repeating the same prop on every instance |
 | ConfirmModal.md | ConfirmModal | Confirmation dialog before destructive or irreversible actions — delete, archive, send, overwrite |
-| DatePicker.md | DatePicker | Date selection input — booking forms, birth date fields, date range pickers, deadline selectors |
+| CopyButton.md | CopyButton | Icon-only button that copies a value to the clipboard: an invoice number, an ID in a table row, an API key or share link inside an `Input` |
+| DatePicker.md | DatePicker, dateToDay, dayToDate | Date selection input — booking forms, birth date fields, date range pickers, deadline selectors |
 | Divider.md | Divider, DividerTextPosition, DividerOrientation | A rule that separates sections of content — horizontal by default, filling the width of its parent |
 | Drawer.md | Drawer | Inline horizontal panel that collapses and expands by animating its width — side panels, navigation rails, detail/filter panes that slide open beside the main content |
 | DropZone.md | DropZone, DropZoneReturnType, DropZoneStatus | Drag-and-drop file upload area, optionally click-to-open the native picker |
@@ -73,7 +79,7 @@ enums and slot names. Do not infer props from a component's name.
 | FloorPlan.md | emptyFloorPlan, addWall, derivePlan | The shared data model behind `RoomDrawer` and `RoomViewer` |
 | FormValidator.md | FormValidator, Validators, useFormValidator | Track and validate a single form field's value, dirty/touched state, and errors |
 | FormValidatorGroup.md | useFormValidatorGroup, FormValidatorGroup, FormValidator, Validators | Manage a whole form — multiple fields, a single submit handler, validate-on-submit, dirty/touched tracking across the form, and mapping server-side errors back onto the right fields |
-| Hooks.md | useHotkeys, formatHotkey, useMediaQuery, useCoarsePointer, useVisualViewportSize, useScrollEdges, useSwipeDismiss, useOverlay, tabbablesIn | Standalone React hooks the library uses internally and publishes for the same jobs in your own code: keyboard shortcuts, media queries, the mobile keyboard's viewport, scroll-edge detection, swipe-to-dismiss, and the Escape / focus-trap / scroll-lock behaviour behind a custom overlay |
+| Hooks.md | useHotkeys, formatHotkey, useMediaQuery, useCoarsePointer, useVisualViewportSize, useScrollEdges, useSwipeDismiss, useOverlay, useClipboard, tabbablesIn | Standalone React hooks the library uses internally and publishes for the same jobs in your own code: keyboard shortcuts, media queries, the mobile keyboard's viewport, scroll-edge detection, swipe-to-dismiss, copying to the clipboard, and the Escape / focus-trap / scroll-lock behaviour behind a custom overlay |
 | IconPicker.md | IconPicker | Pick one item from a visual icon/image grid — category selectors, emoji-style pickers, avatar selectors, anything where each option is best represented by an icon or image rather than text alone |
 | IdleManager.md | IdleManager | Show something only once the user has stopped interacting — a screen saver, a session-timeout warning, an "are you still there?" prompt, an idle dashboard view |
 | Input.md | Input, InputType | Text input with floating label, validation state, and type variants |
@@ -119,6 +125,7 @@ enums and slot names. Do not infer props from a component's name.
 | Tooltip.md | Tooltip | Contextual help, info icons, field explanations, error pointers |
 | Tree.md | Tree, flattenTree | A hierarchical list the user can expand, collapse and pick from: categories, nested locations, folder structures, org charts |
 | VirtualList.md | VirtualList | Efficiently render large lists or tables — thousands of rows rendered with a virtualised scroll window so only visible rows are in the DOM |
+| WeatherIcon.md | WeatherIcon, WeatherType | An animated weather symbol for a forecast, a dashboard widget or a day selector, one per condition a forecast reports |
 | Wizard.md | Wizard | Animated step container for multi-step forms and flows |
 
 <!-- components:end -->