@memobit/libs 1.0.62 → 1.0.64

package/dist/index.d.ts

@@ -13,6 +13,7 @@ import { ReactElement } from 'react';
 import { ReactNode } from 'react';
 import { ReactPortal } from 'react';
 import { RefAttributes } from 'react';
+import { TouchEvent as TouchEvent_2 } from 'react';
 
 export declare const Accordion: default_2.FC<AccordionProps>;
 
@@ -73,6 +74,32 @@ export declare interface AnalogClockProps {
     className?: string;
 }
 
+export declare const AngleSlider: FC<AngleSliderProps>;
+
+export declare interface AngleSliderProps {
+    disabled?: boolean;
+    /** Text under the dial. Replaced by the degree readout when `showValue` is on. */
+    label?: string;
+    /** Highest angle the dial accepts, in degrees. Defaults to a full turn. */
+    max?: number;
+    /** Lowest angle the dial accepts, in degrees. */
+    min?: number;
+    onChange: (value: number) => void;
+    /** Diameter in pixels. */
+    size?: number;
+    /** Rounding applied to every change, in degrees. */
+    step?: number;
+    /** Draws a tick every N degrees. `0` turns the ticks off. */
+    tickStep?: number;
+    /** Degrees moved per arrow key press. Defaults to `step`. */
+    keyboardStep?: number;
+    showValue?: boolean;
+    value: number;
+    variant?: AngleSliderVariant;
+}
+
+export declare type AngleSliderVariant = 'accent' | 'info' | 'success' | 'warning' | 'danger';
+
 export declare const APP_DATE_FORMAT = "DD MMM YYYY";
 
 export declare const APP_DATE_TIME_FORMAT = "DD MMM YYYY HH:mm";
@@ -187,6 +214,35 @@ export declare interface BannerProps {
 
 export declare type BannerVariant = 'default' | 'success' | 'info' | 'warning' | 'danger';
 
+export declare const Blockquote: FC<BlockquoteProps>;
+
+export declare type BlockquoteAppearance = 'bar' | 'card' | 'plain' | 'pull';
+
+export declare interface BlockquoteProps {
+    /** Centres a `pull` quote; the other appearances read better left-aligned. */
+    align?: 'left' | 'center';
+    /** How the quote is framed: a left rule, a filled card, bare text, or a large pull quote. */
+    appearance?: BlockquoteAppearance;
+    /** Who said it. */
+    author?: string;
+    children: ReactNode;
+    className?: string;
+    /** Turns the source into a link. */
+    href?: string;
+    /** Small icon before the quote — handy for flagging a note or a warning. */
+    icon?: IconName;
+    /** Draws a large decorative quote glyph behind the text. */
+    showQuoteMark?: boolean;
+    size?: BlockquoteSize;
+    /** Where it came from: a book, an article, a ticket. Shown after the author. */
+    source?: string;
+    variant?: BlockquoteVariant;
+}
+
+export declare type BlockquoteSize = 'sm' | 'md' | 'lg';
+
+export declare type BlockquoteVariant = 'default' | 'accent' | 'info' | 'success' | 'warning' | 'danger';
+
 export declare const BMI: default_2.FC<BMIProps>;
 
 declare interface BMIProps {
@@ -304,6 +360,12 @@ export declare const calculateTimelineMarkers: <T extends TimelineMarkersItem>(i
 
 export declare const Calendar: default_2.FC<CalendarProps>;
 
+/** Half-open [start, end): with start 9 and end 18, 17:00 is active and 18:00 is not. */
+export declare interface CalendarActiveHours {
+    start: number;
+    end: number;
+}
+
 export declare interface CalendarDateRange {
     start: Date;
     end: Date;
@@ -325,6 +387,13 @@ export declare interface CalendarEvent<T = unknown> {
     /** Renders in the all-day row of the week view and without a time in the month view. */
     allDay?: boolean;
     title: string;
+    /**
+     * Rendered before the time and title on the default chip — an icon or a badge that
+     * identifies the event at a glance. Prefer this over baking a glyph into `title`,
+     * which pushes it through the same truncation as the text and cannot be coloured
+     * separately. Ignored when `renderEvent` replaces the chip's contents entirely.
+     */
+    leading?: ReactNode;
     variant?: CalendarEventVariant;
     /** Overrides the variant's colour. Any CSS colour — pass a theme token where possible. */
     color?: string;
@@ -439,6 +508,8 @@ export declare type ChipSize = 'xsmall' | 'small' | 'medium' | 'large';
 
 export declare type ChipVariant = 'plain' | 'default' | 'success' | 'info' | 'warning' | 'danger';
 
+export declare const Col: FC<ColProps>;
+
 export declare const CollapsibleSection: default_2.FC<CollapsibleSectionProps>;
 
 declare interface CollapsibleSectionProps {
@@ -468,6 +539,20 @@ export declare interface ColorPickerProps {
     onChange?: (hex: string) => void;
 }
 
+export declare interface ColProps {
+    children: ReactNode;
+    className?: string;
+    /** Column count this cell occupies on desktop. */
+    span?: ColSpan;
+    /** Column count on mobile (<= 768px). Defaults to filling the row. */
+    spanMobile?: ColSpan;
+    /** Column count on tablet (769px - 1024px). Defaults to `span`, clamped by the parent. */
+    spanTablet?: ColSpan;
+    style?: CSSProperties;
+}
+
+export declare type ColSpan = GridColumns;
+
 export declare interface CommandItem {
     id: string;
     label: string;
@@ -1088,14 +1173,17 @@ export declare interface DateRangePreset {
 }
 
 /**
- * A single day's events, listed in a modal. The month grid can only show a chip or
- * three per cell before it starts hiding them behind "+N more", and the chips are too
- * small to aim at on a phone — this is the way into a busy day.
+ * One day laid out against the clock, in a modal.
+ *
+ * A month cell can only carry a chip or three before the rest hide behind "+N more", and
+ * those chips are too small to aim at on a phone. This is the way into a busy day: events
+ * sit at the hour they actually happen, overlapping ones split into lanes, and the empty
+ * stretches are themselves the target for adding something at that time.
  */
-export declare function DayAgenda<T>({ addLabel, className, date, defaultDurationMinutes, emptyLabel, events, isOpen, onAdd, onClose, onEventClick, renderEvent, }: DayAgendaProps<T>): JSX.Element;
+export declare function DayAgenda<T>({ activeHours, addLabel, className, date, dayEndHour, dayStartHour, defaultDurationMinutes, emptyLabel, events, hourHeight, isOpen, onAdd, onClose, onDateChange, onEventClick, renderEvent, }: DayAgendaProps<T>): JSX.Element;
 
 export declare interface DayAgendaProps<T = unknown> {
-    /** The day to list. Only the date part is read. */
+    /** The day to lay out. Only the date part is read. */
     date: Date;
     /**
      * The same array the calendar is given — the day's events are picked out here, so the
@@ -1104,14 +1192,35 @@ export declare interface DayAgendaProps<T = unknown> {
     events: CalendarEvent<T>[];
     isOpen: boolean;
     onClose: () => void;
+    /**
+     * Enables swiping the grid left or right to step a day. Without it the modal shows
+     * only the day it was opened on — which is fine for a one-off, but on a phone the
+     * neighbouring day is usually the next thing wanted.
+     */
+    onDateChange?: (date: Date) => void;
     onEventClick?: (event: CalendarEvent<T>) => void;
-    /** Adds a footer button that hands back the day being listed. */
+    /**
+     * Fires with the hour slot that was clicked, so something added from an empty stretch
+     * starts at the time pointed at rather than at midnight. Also backs the footer button,
+     * which passes the day itself for an entry with no particular time.
+     */
     onAdd?: (date: Date) => void;
     addLabel?: string;
-    /** Replaces the title of a row. The time column and colour bar stay. */
+    /** Replaces a chip's contents. */
     renderEvent?: (event: CalendarEvent<T>) => ReactNode;
     emptyLabel?: string;
-    /** Assumed length of a timed event with no `end`, used for the row's time range. */
+    /** First and last hour rendered. */
+    dayStartHour?: number;
+    dayEndHour?: number;
+    /**
+     * The hours that matter — working hours, opening hours. Everything outside the band
+     * recedes, so the part of the day worth reading is found without counting rows. It
+     * trims nothing, unlike `dayStartHour`/`dayEndHour`.
+     */
+    activeHours?: CalendarActiveHours;
+    /** Height of one hour row, in pixels. */
+    hourHeight?: number;
+    /** Assumed length of a timed event with no `end`. */
     defaultDurationMinutes?: number;
     className?: string;
 }
@@ -1298,7 +1407,7 @@ declare interface ErrorBoundaryState {
     error: Error | null;
 }
 
-export declare function EventCalendar<T>({ className, date, dayAgenda, dayEndHour, dayStartHour, defaultDurationMinutes, emptyLabel, events, firstDayOfWeek, headerExtra, hourHeight, maxEventsPerDay, onDateChange, onDayClick, onEventClick, onEventDrop, onViewChange, renderEvent, showHeader, showWeekNumbers, view, }: EventCalendarProps<T>): JSX.Element;
+export declare function EventCalendar<T>({ activeHours, className, date, dayAgenda, dayEndHour, dayStartHour, defaultDurationMinutes, emptyLabel, events, firstDayOfWeek, headerExtra, hourHeight, maxEventsPerDay, onDateChange, onDayClick, onEventClick, onEventDrop, onViewChange, renderEvent, showHeader, showWeekNumbers, swipeNavigation, view, }: EventCalendarProps<T>): JSX.Element;
 
 export declare interface EventCalendarProps<T = unknown> {
     events: CalendarEvent<T>[];
@@ -1309,8 +1418,14 @@ export declare interface EventCalendarProps<T = unknown> {
     date?: Date;
     onDateChange?: (date: Date) => void;
     firstDayOfWeek?: 0 | 1;
-    /** Adds the ISO week number: a leading column in month view, a suffix on the week title. */
+    /** Adds a leading ISO week-number column to the month grid. The week view names its own period, so it needs none. */
     showWeekNumbers?: boolean;
+    /**
+     * Swiping the grid left or right pages to the next or previous period — the month in
+     * month view, the week in week view. Touch only, so it costs a desktop nothing. Set
+     * false where a horizontal drag already means something else.
+     */
+    swipeNavigation?: boolean;
     onEventClick?: (event: CalendarEvent<T>) => void;
     /** Fires on the empty part of a day cell (month) or an hour slot (week). */
     onDayClick?: (date: Date) => void;
@@ -1335,6 +1450,13 @@ export declare interface EventCalendarProps<T = unknown> {
     /** First and last hour rendered by the week view. */
     dayStartHour?: number;
     dayEndHour?: number;
+    /**
+     * The hours that matter — working hours, opening hours. Everything outside the band
+     * recedes, so the part of the day worth reading is found without counting rows. Unlike
+     * `dayStartHour`/`dayEndHour` this trims nothing: a 21:00 event still shows, just
+     * against a quieter background. Omit to treat every hour alike.
+     */
+    activeHours?: CalendarActiveHours;
     /** Height of one hour row in the week view, in pixels. */
     hourHeight?: number;
     /** Assumed length of a timed event with no `end`. */
@@ -1382,6 +1504,46 @@ declare interface FloatButtonProps {
     actions: FloatButtonAction[];
 }
 
+export declare const FloatingWindow: FC<FloatingWindowProps>;
+
+export declare interface FloatingWindowPosition {
+    x: number;
+    y: number;
+}
+
+export declare interface FloatingWindowProps {
+    children: ReactNode;
+    className?: string;
+    /** Escape closes the window. Off by default — a floating window is not modal. */
+    closeOnEscape?: boolean;
+    /** Opening position in viewport pixels. Centred on the viewport when omitted. */
+    defaultPosition?: FloatingWindowPosition;
+    defaultSize?: FloatingWindowSize;
+    /** Pinned strip along the bottom of the window. */
+    footer?: ReactNode;
+    isOpen: boolean;
+    /** Shows the collapse control. */
+    minimizable?: boolean;
+    minHeight?: number;
+    minWidth?: number;
+    onClose: () => void;
+    /** Reports every settled move and resize, for callers that persist the geometry. */
+    onGeometryChange?: (geometry: FloatingWindowPosition & FloatingWindowSize) => void;
+    /** Shows the maximize control and the edge handles. */
+    resizable?: boolean;
+    title?: string;
+    titleIcon?: IconName;
+    usePortal?: boolean;
+    zIndex?: number;
+}
+
+export declare type FloatingWindowResizeDirection = 'n' | 's' | 'e' | 'w' | 'ne' | 'nw' | 'se' | 'sw';
+
+export declare interface FloatingWindowSize {
+    height: number;
+    width: number;
+}
+
 export declare const foldDiacritics: (input: string) => string;
 
 export declare interface FolderBrowserEntry {
@@ -1488,6 +1650,41 @@ export declare const getThemeConfig: (themeValue: string) => ThemeConfig | undef
 
 export declare const getTodayDateString: () => string;
 
+export declare const Grid: FC<GridProps>;
+
+export declare type GridAlign = 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+
+export declare type GridColumns = 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12;
+
+export declare type GridGap = '0' | '2' | '4' | '6' | '8' | '12' | '16' | '20' | '24' | '32' | '40' | '48';
+
+export declare type GridJustify = 'start' | 'center' | 'end' | 'space-between' | 'space-around';
+
+export declare interface GridProps {
+    /** Vertical alignment of the items inside each row. */
+    align?: GridAlign;
+    children: ReactNode;
+    className?: string;
+    /** Columns from the desktop breakpoint up (> 1024px). */
+    cols?: GridColumns;
+    /** Columns on mobile (<= 768px). Defaults to 1 so content stacks. */
+    colsMobile?: GridColumns;
+    /** Columns on tablet (769px - 1024px). Defaults to `cols` capped at 2. */
+    colsTablet?: GridColumns;
+    /** Spacing token used between columns, and between rows unless `rowGap` overrides it. */
+    gap?: GridGap;
+    /** Horizontal distribution of a partially filled row. */
+    justify?: GridJustify;
+    /**
+     * Switches to a fluid track: every child takes at least this many pixels and rows wrap on
+     * their own. `cols` and the responsive overrides are ignored while this is set.
+     */
+    minColWidth?: number;
+    /** Row spacing token, when rows should breathe differently from columns. */
+    rowGap?: GridGap;
+    style?: CSSProperties;
+}
+
 export declare function highlightText(text: string, searchTerm: string): ReactNode;
 
 /**
@@ -1507,6 +1704,31 @@ export declare const Icon: default_2.FC<IconProps>;
 
 export declare type IconName = 'active' | 'afternoon' | 'ajax' | 'alarm' | 'analysis' | 'angular' | 'announcement' | 'anomaly' | 'ant' | 'antenna' | 'api' | 'appliances' | 'archive' | 'arrow-bidirectional-horizontal' | 'arrow-bidirectional-vertical' | 'arrow-down' | 'arrow-left' | 'arrow-right' | 'arrow-up' | 'atom' | 'avocado' | 'badge' | 'ball' | 'balloon' | 'banana' | 'bank' | 'bat' | 'bath' | 'battery-charging' | 'battery-empty' | 'battery-full' | 'battery-half' | 'beans' | 'bear' | 'bed' | 'bee' | 'beer' | 'bell' | 'benefit' | 'birthday-cake' | 'blood' | 'blueberries' | 'bones' | 'book' | 'bow' | 'brain' | 'bread' | 'breakfast' | 'briefcase' | 'brightness' | 'broken-heart' | 'broom' | 'bug' | 'building' | 'bullet' | 'bunny' | 'burst' | 'bus' | 'butterfly' | 'button-device' | 'cake' | 'calculator' | 'calendar' | 'calendar-day' | 'calendar-month' | 'calendar-week' | 'calendar-year' | 'calibrate' | 'camera' | 'candy' | 'car' | 'carbs' | 'caret-down' | 'caret-left' | 'caret-right' | 'caret-up' | 'carrot' | 'cat' | 'categories' | 'caterpillar' | 'cd-dvd' | 'certificate' | 'chart' | 'checkmark' | 'cheese' | 'cherries' | 'chestnut' | 'chicken' | 'chocolate' | 'christmas-tree' | 'cigarette' | 'clear' | 'clipboard' | 'cloud' | 'coffee' | 'comment' | 'compass' | 'confetti' | 'connected' | 'context' | 'cook' | 'cookies' | 'cooling' | 'corn' | 'correlation' | 'cow' | 'cpu' | 'credit-card' | 'crystal-globe' | 'cube' | 'cucumber' | 'dashboard' | 'death' | 'defect' | 'delete' | 'dental' | 'deselect-all' | 'dessert' | 'detach' | 'devices' | 'digestive' | 'dinner' | 'dinosaur' | 'dishwasher' | 'dns' | 'doctor' | 'document' | 'documents' | 'dog' | 'dolphin' | 'door' | 'dot' | 'download' | 'dragon' | 'drying-machine' | 'duck' | 'duplicates' | 'ears' | 'earth' | 'edit' | 'egg' | 'eggplant' | 'elephant' | 'empty' | 'endocrine' | 'enlarge' | 'equalizer' | 'evening' | 'expense' | 'export' | 'external-link' | 'fan' | 'favorite' | 'fibers' | 'file' | 'filetype-avi' | 'filetype-bat' | 'filetype-c' | 'filetype-css' | 'filetype-csv' | 'filetype-doc' | 'filetype-docx' | 'filetype-gif' | 'filetype-html' | 'filetype-ico' | 'filetype-ini' | 'filetype-javascript' | 'filetype-jpeg' | 'filetype-jpg' | 'filetype-json' | 'filetype-less' | 'filetype-mp3' | 'filetype-mp4' | 'filetype-mpg' | 'filetype-pdf' | 'filetype-php' | 'filetype-png' | 'filetype-ppt' | 'filetype-psd' | 'filetype-rar' | 'filetype-sass' | 'filetype-sql' | 'filetype-tiff' | 'filetype-txt' | 'filetype-typescript' | 'filetype-wav' | 'filetype-xls' | 'filetype-xlsx' | 'filetype-xml' | 'filetype-zip' | 'filters' | 'fire' | 'firewall' | 'fireworks' | 'fish' | 'fishing-rod' | 'fog' | 'folder' | 'folder-open' | 'fondue' | 'food' | 'french-fries' | 'fridge' | 'fruits' | 'gallery' | 'gas-detector' | 'gateway' | 'gauge-high' | 'gauge-low' | 'gauge-medium' | 'gift-box' | 'girl' | 'github' | 'glass' | 'gloves' | 'glycemic-index' | 'goat' | 'graduation' | 'grid' | 'group' | 'gun' | 'hammer' | 'handshake' | 'hd' | 'headphones' | 'heart' | 'heating' | 'help' | 'hiking' | 'history' | 'home' | 'hospital' | 'humidity' | 'ice-cream' | 'identity' | 'image' | 'import' | 'inactive' | 'incognito' | 'information' | 'ingredients' | 'ink-cartridge' | 'ir-emitter' | 'joystick' | 'jupiter' | 'key' | 'knife' | 'laboratory' | 'language' | 'lantern' | 'layers' | 'leaf' | 'lemon' | 'light-bulb' | 'light-switch' | 'lightning' | 'link' | 'linkedin' | 'lipids' | 'list' | 'liver' | 'location' | 'lock' | 'lock-open' | 'logout' | 'lollipop' | 'lunch' | 'lungs' | 'magnet' | 'mail' | 'manage' | 'map' | 'mapping' | 'mars' | 'meat' | 'melon' | 'memory' | 'mental' | 'menu-hamburger' | 'mercury' | 'microphone' | 'microscope' | 'microwave' | 'milk' | 'minimum' | 'minus' | 'money' | 'monitor' | 'monkey' | 'moon' | 'morning' | 'motion' | 'mouse' | 'movie' | 'mushroom' | 'musical-note' | 'mute' | 'nas' | 'neptune' | 'nervous' | 'network' | 'next' | 'night' | 'ninja' | 'noon' | 'nose' | 'not-found' | 'notes' | 'notice' | 'offline' | 'olives' | 'online' | 'optimization' | 'other' | 'outdoor' | 'ownership' | 'pause' | 'pawn' | 'peanut' | 'pear' | 'penguin' | 'pepper' | 'pharmacy' | 'phone' | 'pig' | 'pill' | 'pin' | 'pizza' | 'plane' | 'play' | 'plug' | 'plus' | 'pluto' | 'polenta' | 'police' | 'police-man' | 'popcorn' | 'portions' | 'potato' | 'power' | 'predictions' | 'prescription' | 'previous' | 'printer' | 'proteins' | 'pudding' | 'pumpkin' | 'purifier' | 'puzzle' | 'radio' | 'rain' | 'rainbow' | 'raspberry' | 'reading' | 'referral' | 'reload' | 'repeat' | 'report' | 'reproductive' | 'return' | 'rice' | 'robot' | 'rocket' | 'romania-flag' | 'rooms' | 'router' | 'ruler' | 'running' | 'salad' | 'salt' | 'santa' | 'satellite' | 'saturn' | 'save' | 'scales' | 'scan' | 'school' | 'scissors' | 'score' | 'scss' | 'sd' | 'search' | 'security' | 'seeds' | 'sequence' | 'settings' | 'shield' | 'ship' | 'shopping-cart' | 'shrink' | 'shuffle' | 'signal-full' | 'signal-low' | 'signal-medium' | 'skin' | 'skull' | 'smartphone' | 'smb' | 'smoke-detector' | 'snake' | 'snow' | 'snowman' | 'soft-drink' | 'soup' | 'sources' | 'sparkle' | 'speaker' | 'speedometer' | 'square' | 'ssl' | 'staple' | 'star' | 'status' | 'stethoscope' | 'stop' | 'stop-sign' | 'storm' | 'strawberry' | 'streaming' | 'strength' | 'sugar' | 'sun' | 'surgery' | 'synchronize' | 'table' | 'target' | 'taxi' | 'technical' | 'teeth' | 'telescope' | 'theater' | 'theme-picker' | 'thermometer' | 'threshold' | 'time' | 'toggle-off' | 'toggle-on' | 'tomato' | 'toolbox' | 'train' | 'transactions' | 'transport-box' | 'tree' | 'trend-down' | 'trend-up' | 'trip' | 'trophy' | 'tune' | 'turkey' | 'turtle' | 'tv' | 'unarchive' | 'unassociated' | 'ungroup' | 'unmute' | 'upload' | 'upnp' | 'uranus' | 'user' | 'users' | 'vacuum' | 'vegetables' | 'venus' | 'vertical-dots' | 'video' | 'view' | 'virus' | 'wait' | 'wan' | 'warning' | 'washing-machine' | 'water-leak' | 'web' | 'website-crawl' | 'wifi' | 'wind' | 'workout' | 'wrench' | 'yoga' | 'youtube';
 
+/**
+ * Search and pick one of the library's icons.
+ *
+ * The counterpart to `EmojiPicker`, and usually the better of the two for labelling a
+ * user's own records: an icon inherits `currentColor`, so it can carry the colour the
+ * record already has, and it is drawn at the same weight as the rest of the interface
+ * instead of arriving as a platform-coloured bitmap that renders differently on every
+ * device. Emoji still win on sheer vocabulary, so offering both is reasonable.
+ */
+export declare const IconPicker: FC<IconPickerProps>;
+
+export declare interface IconPickerProps {
+    value?: IconName;
+    onChange?: (icon: IconName) => void;
+    /**
+     * Tints the swatches, so a picker attached to a colour choice previews the icon as it
+     * will actually appear. Icons draw in `currentColor`; omit for the inherited colour.
+     */
+    color?: string;
+    /** Restricts the choice. Useful where only a themed subset makes sense. */
+    icons?: IconName[];
+    placeholder?: string;
+    emptyLabel?: string;
+}
+
 declare interface IconProps {
     className?: string;
     name: IconName;
@@ -1742,6 +1964,32 @@ declare interface InputPhoneProps {
     value?: string;
 }
 
+export declare const InputPIN: FC<InputPINProps>;
+
+export declare interface InputPINProps {
+    autoFocus?: boolean;
+    disabled?: boolean;
+    error?: string;
+    id?: string;
+    label?: string;
+    /** Number of cells. */
+    length?: number;
+    /** Renders a gap after this many cells, the way grouped codes are printed. */
+    groupSize?: number;
+    /** Fired on every edit with the code so far, shorter than `length` while incomplete. */
+    onChange: (value: string) => void;
+    /** Fired once the last cell is filled, with the finished code. */
+    onComplete?: (value: string) => void;
+    /** Masks the characters, for a PIN rather than a one-time code. */
+    secret?: boolean;
+    success?: string;
+    /** `numeric` accepts digits only and asks phones for the number pad. */
+    type?: InputPINType;
+    value: string;
+}
+
+export declare type InputPINType = 'numeric' | 'alphanumeric';
+
 export declare const InputSearch: ForwardRefExoticComponent<InputSearchProps & RefAttributes<HTMLInputElement>>;
 
 export declare interface InputSearchProps {
@@ -2323,12 +2571,49 @@ export declare interface RadioProps {
     className?: string;
 }
 
+export declare const RangeSlider: FC<RangeSliderProps>;
+
+export declare interface RangeSliderProps {
+    disabled?: boolean;
+    /** Renders each readout and tick label — money, units, dates, whatever the range means. */
+    formatValue?: (value: number) => string;
+    label?: string;
+    max?: number;
+    min?: number;
+    /** Smallest gap the two thumbs may be pushed to. Defaults to one `step`. */
+    minDistance?: number;
+    onChange: (value: RangeSliderValue) => void;
+    /** Fired once when a drag or key press settles — the place to kick off a query. */
+    onChangeEnd?: (value: RangeSliderValue) => void;
+    showValues?: boolean;
+    step?: number;
+    /** Renders a thinner track and smaller thumbs. */
+    thin?: boolean;
+    /** Draws a labelled tick every N units. `0` turns the ticks off. */
+    tickStep?: number;
+    value: RangeSliderValue;
+    variant?: RangeSliderVariant;
+}
+
+export declare type RangeSliderValue = [number, number];
+
+export declare type RangeSliderVariant = 'accent' | 'info' | 'success' | 'warning' | 'danger';
+
 export declare const Rating: FC<RatingProps>;
 
-declare type RatingIconType = 'star' | 'bullet' | 'bar';
+export declare type RatingFilled = 'full' | 'half' | 'empty';
+
+export declare type RatingIconType = 'star' | 'bullet' | 'bar' | 'emoji';
 
 declare interface RatingProps {
     align?: 'left' | 'right' | 'space-between';
+    /**
+     * Emoji only: tint the chosen face by where it sits on the scale — red at the sad end,
+     * amber in the middle, green at the happy end — instead of using `variant` throughout.
+     */
+    emojiColorByMood?: boolean;
+    /** Emoji only: pixel size of each face. Faces need more room than a star to stay readable. */
+    emojiSize?: number;
     icon?: RatingIconType;
     maxRate?: number;
     onHover?: (value: number) => void;
@@ -2341,7 +2626,7 @@ declare interface RatingProps {
     variant?: RatingVariant;
 }
 
-declare type RatingVariant = 'success' | 'info' | 'warning' | 'danger';
+export declare type RatingVariant = 'success' | 'info' | 'warning' | 'danger';
 
 export declare const RichTextEditor: ({ advanced, error, format, id, label, onBlur, onChange, placeholder, required, value, }: RichTextEditorProps) => JSX.Element;
 
@@ -2358,6 +2643,33 @@ declare interface RichTextEditorProps {
     value?: string;
 }
 
+export declare const RollingNumber: FC<RollingNumberProps>;
+
+export declare type RollingNumberDirection = 'up' | 'down' | 'none';
+
+export declare interface RollingNumberProps {
+    className?: string;
+    /** Tint the readout green when the value rose and red when it fell, overriding `variant`. */
+    colorByDirection?: boolean;
+    decimals?: number;
+    decimalSeparator?: string;
+    /** Roll duration in milliseconds. */
+    duration?: number;
+    /** Thousands separator. Pass an empty string to switch grouping off. */
+    groupSeparator?: string;
+    prefix?: string;
+    size?: RollingNumberSize;
+    /** Delay added per digit so the columns land one after another, in milliseconds. */
+    stagger?: number;
+    suffix?: string;
+    value: number;
+    variant?: RollingNumberVariant;
+}
+
+export declare type RollingNumberSize = 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'xxxl';
+
+export declare type RollingNumberVariant = 'default' | 'accent' | 'info' | 'success' | 'warning' | 'danger';
+
 export declare interface ScrollInfo {
     scrollTop: number;
     scrollHeight: number;
@@ -2533,6 +2845,37 @@ declare interface SplitPanelProps {
     className?: string;
 }
 
+export declare const Splitter: FC<SplitterProps>;
+
+export declare type SplitterOrientation = 'horizontal' | 'vertical';
+
+export declare interface SplitterPane {
+    content: ReactNode;
+    /** Stable identity for the pane — also used as the React key. */
+    id: string;
+    /** Smallest share this pane may be dragged to, in percent. Defaults to 10. */
+    minSize?: number;
+    /** Starting share of the container, in percent. Omitted panes split what is left evenly. */
+    size?: number;
+}
+
+export declare interface SplitterProps {
+    className?: string;
+    /** Dragging a pane below half its minimum snaps it shut instead of stopping at the minimum. */
+    collapsible?: boolean;
+    /** Thickness of the drag handles in pixels. */
+    gutterSize?: number;
+    /** Percent moved per arrow key press on a focused gutter. */
+    keyboardStep?: number;
+    /** Fired with the full list of pane sizes (percent) whenever a drag or key press settles. */
+    onResize?: (sizes: number[]) => void;
+    /** `horizontal` lays the panes out side by side; `vertical` stacks them. */
+    orientation?: SplitterOrientation;
+    panes: SplitterPane[];
+    /** Double-clicking a gutter restores the sizes the Splitter started with. */
+    resetOnDoubleClick?: boolean;
+}
+
 export declare const StackedBar: ({ animated, height, normalize, orientation, segments, separators, showLabels, showPercentage, thin, width, }: StackedBarProps) => JSX.Element;
 
 export declare type StackedBarOrientation = 'horizontal' | 'vertical';
@@ -2634,6 +2977,12 @@ declare interface SuggestionsListProps {
     onRowClick?: (item: SuggestionsListElement) => void;
 }
 
+export declare interface SwipeHandlers {
+    onTouchStart: (event: TouchEvent_2) => void;
+    onTouchEnd: (event: TouchEvent_2) => void;
+    onTouchCancel: () => void;
+}
+
 export declare type Theme = 'amber-meridian' | 'archive-indigo' | 'arctic-blue' | 'asphalt-code' | 'atelier-media' | 'audit-ember' | 'azure-night' | 'blossom-meadow' | 'blueprint-clay' | 'blush-market' | 'brass-chronicle' | 'carbon-velocity' | 'chalk-circuit' | 'chrono-atlas' | 'clinical-aqua' | 'cobalt-pulse' | 'citrus-vital' | 'command-slate' | 'crawler-dusk' | 'crimson-dusk' | 'cyber-forest' | 'dashdarkx' | 'ember-night' | 'emerald-ledger' | 'frost-petal' | 'garden-harvest' | 'gilded-bear' | 'graphite-shell' | 'horizon-amber' | 'horizon-drift' | 'ivory-serif' | 'lavender-mist' | 'light-blue' | 'lumen' | 'luna' | 'mesh-circuit' | 'midnight-atlas' | 'midnight-amber' | 'midnight-folio' | 'mint-meadow' | 'mintone' | 'neon-tokyo' | 'noir-marquee' | 'ocean-breeze' | 'ocean-depths' | 'orbital-night' | 'sandstone' | 'sandy-parchment' | 'screening-room' | 'signal-burst' | 'signal-clarity' | 'slate-focus' | 'slate-bazaar' | 'spectrum-vault' | 'tailwind-vue-dark' | 'terminal-phosphor' | 'terracotta-kitchen' | 'twilight-pulse' | 'vault-guard' | 'velvet-reel' | 'velvet-tome' | 'verdant-pulse' | 'vital-aurora' | 'vital-signal';
 
 export declare const THEME_CONFIGS: ThemeConfig[];
@@ -2983,6 +3332,35 @@ export declare interface TourHudProps {
     className?: string;
 }
 
+export declare const Transition: FC<TransitionProps>;
+
+export declare interface TransitionProps {
+    /** Play the enter animation on the very first render too. */
+    appear?: boolean;
+    /** Element rendered around the children. */
+    as?: TransitionTag;
+    children: ReactNode;
+    className?: string;
+    /** Delay before the enter animation starts, in milliseconds. */
+    delay?: number;
+    /** Animation length in milliseconds. Also how long the exit is held before unmounting. */
+    duration?: number;
+    easing?: string;
+    /** Keep the element mounted but hidden instead of removing it once the exit finishes. */
+    keepMounted?: boolean;
+    onEntered?: () => void;
+    onExited?: () => void;
+    /** `true` plays the enter animation; `false` plays the exit animation, then unmounts. */
+    show: boolean;
+    type?: TransitionType;
+}
+
+export declare type TransitionStatus = 'unmounted' | 'entering' | 'entered' | 'exiting';
+
+export declare type TransitionTag = 'div' | 'span' | 'section' | 'li';
+
+export declare type TransitionType = 'fade' | 'slide-up' | 'slide-down' | 'slide-left' | 'slide-right' | 'scale' | 'collapse';
+
 export declare const Tree: default_2.FC<TreeProps>;
 
 export declare interface TreeNode {
@@ -3071,6 +3449,40 @@ export declare interface User {
 
 export declare const useSidebar: () => SidebarContextValue;
 
+/**
+ * Turns a touch drag into a direction.
+ *
+ * Touch only, deliberately: a mouse drag on the same element usually already means
+ * something (selecting text, dragging an item), and a phone is where a swipe is the
+ * natural gesture. Nothing is ever `preventDefault`ed, so the element keeps scrolling
+ * normally and a swipe that fails the threshold costs the user nothing.
+ *
+ * Spread the returned handlers onto the element that should respond:
+ *
+ *     const swipe = useSwipe({ onSwipeLeft: next, onSwipeRight: previous });
+ *     return <div {...swipe}>…</div>;
+ */
+export declare const useSwipe: ({ enabled, maxDurationMs, onSwipeDown, onSwipeLeft, onSwipeRight, onSwipeUp, restraint, threshold, }: UseSwipeOptions) => SwipeHandlers;
+
+export declare interface UseSwipeOptions {
+    onSwipeLeft?: () => void;
+    onSwipeRight?: () => void;
+    onSwipeUp?: () => void;
+    onSwipeDown?: () => void;
+    /** Distance along the swipe axis, in px, before it counts as one. */
+    threshold?: number;
+    /**
+     * Allowed drift across the swipe axis, in px. This is what keeps a vertical scroll
+     * inside a calendar grid from registering as a horizontal page turn, so it matters
+     * most when the swiped element scrolls the other way.
+     */
+    restraint?: number;
+    /** A drag slower than this is someone reading, not swiping. */
+    maxDurationMs?: number;
+    /** Set false to detach without changing where the hook is called. */
+    enabled?: boolean;
+}
+
 export declare const useTheme: () => ThemeContextType;
 
 export declare const useToast: () => ToastContextValue;