@moving-walls/design-system 1.0.23 → 2.0.0

package/dist/components/ui/AdvancedTable/index.d.ts

@@ -0,0 +1,3 @@
+export { useAdvancedTable } from './useAdvancedTable';
+export type { UseAdvancedTableOptions } from './useAdvancedTable';
+export type { AdvancedTableColumn, AdvancedTableSort, AdvancedTableFilter, AdvancedTableState, AdvancedTableColumnType, AdvancedTableSortDirection, AdvancedTableFilterOperator, AdvancedTableSelectionMode, AdvancedTableDensity, } from './types';

package/dist/components/ui/AdvancedTable/types.d.ts

@@ -0,0 +1,51 @@
+export type AdvancedTableColumnType = 'text' | 'number' | 'date' | 'boolean' | 'badge' | 'progress' | 'image' | 'link' | 'custom';
+export type AdvancedTableSortDirection = 'asc' | 'desc' | null;
+export type AdvancedTableFilterOperator = 'equals' | 'contains' | 'startsWith' | 'endsWith' | 'gt' | 'lt' | 'gte' | 'lte' | 'between' | 'in' | 'notIn';
+export type AdvancedTableSelectionMode = 'none' | 'single' | 'multiple';
+export type AdvancedTableDensity = 'compact' | 'normal' | 'comfortable';
+export interface AdvancedTableColumn<T = unknown> {
+    id: string;
+    header: string | React.ReactNode;
+    accessorKey?: keyof T | string;
+    accessorFn?: (row: T) => unknown;
+    cell?: (value: unknown, row: T, column: AdvancedTableColumn<T>) => React.ReactNode;
+    sortable?: boolean;
+    filterable?: boolean;
+    searchable?: boolean;
+    type?: AdvancedTableColumnType;
+    width?: number | string;
+    minWidth?: number;
+    maxWidth?: number;
+    align?: 'left' | 'center' | 'right';
+    sticky?: 'left' | 'right';
+    resizable?: boolean;
+    hidden?: boolean;
+    pinned?: boolean;
+    freezable?: boolean;
+    aggregate?: 'sum' | 'avg' | 'count' | 'min' | 'max' | 'custom';
+    aggregateFn?: (values: unknown[]) => unknown;
+    footer?: React.ReactNode | ((values: unknown[]) => React.ReactNode);
+    meta?: Record<string, unknown>;
+}
+export interface AdvancedTableSort {
+    columnId: string;
+    direction: AdvancedTableSortDirection;
+}
+export interface AdvancedTableFilter {
+    columnId: string;
+    value: unknown;
+    operator?: AdvancedTableFilterOperator;
+}
+export interface AdvancedTableState {
+    sorting: AdvancedTableSort[];
+    filters: AdvancedTableFilter[];
+    globalFilter: string;
+    columnVisibility: Record<string, boolean>;
+    columnOrder: string[];
+    columnSizing: Record<string, number>;
+    density: AdvancedTableDensity;
+    frozenColumns: {
+        left: string[];
+        right: string[];
+    };
+}

package/dist/components/ui/AdvancedTable/useAdvancedTable.d.ts

@@ -0,0 +1,27 @@
+import type { AdvancedTableColumn, AdvancedTableSort, AdvancedTableFilter, AdvancedTableState, AdvancedTableDensity } from './types';
+export interface UseAdvancedTableOptions<T> {
+    data: T[];
+    columns: AdvancedTableColumn<T>[];
+    initialState?: Partial<AdvancedTableState>;
+    getRowId?: (row: T, index: number) => string | number;
+}
+export declare function useAdvancedTable<T>({ data, columns, initialState, getRowId, }: UseAdvancedTableOptions<T>): {
+    processedData: T[];
+    visibleColumns: AdvancedTableColumn<T>[];
+    state: AdvancedTableState;
+    sorting: AdvancedTableSort[];
+    filters: AdvancedTableFilter[];
+    globalFilter: string;
+    density: AdvancedTableDensity;
+    selectedRows: Set<string | number>;
+    toggleSort: (columnId: string) => void;
+    addFilter: (filter: AdvancedTableFilter) => void;
+    removeFilter: (columnId: string) => void;
+    clearFilters: () => void;
+    setGlobalFilter: import("react").Dispatch<import("react").SetStateAction<string>>;
+    setDensity: import("react").Dispatch<import("react").SetStateAction<AdvancedTableDensity>>;
+    toggleColumnVisibility: (columnId: string) => void;
+    toggleRowSelection: (rowId: string | number) => void;
+    selectAllRows: () => void;
+    clearSelection: () => void;
+};

package/dist/components/ui/AgGridTable/types.d.ts

@@ -39,4 +39,6 @@ export interface AgGridTableProps<T = unknown> {
     cacheBlockSize?: number;
     footerData?: any[];
     pagination?: boolean;
+    /** Fired when the user scrolls to the bottom of the grid body. Useful for infinite scroll. */
+    onBodyScrollEnd?: () => void;
 }

package/dist/components/ui/Calendar/index.d.ts

@@ -0,0 +1,3 @@
+export { useCalendar } from './useCalendar';
+export type { UseCalendarOptions } from './useCalendar';
+export type { CalendarEvent, CalendarView } from './types';

package/dist/components/ui/Calendar/types.d.ts

@@ -0,0 +1,14 @@
+export interface CalendarEvent {
+    id: string;
+    title: string;
+    date: Date;
+    color?: string;
+    allDay?: boolean;
+    startTime?: string;
+    endTime?: string;
+    description?: string;
+    category?: string;
+    attendees?: string[];
+    location?: string;
+}
+export type CalendarView = 'month' | 'week' | 'day';

package/dist/components/ui/Calendar/useCalendar.d.ts

@@ -0,0 +1,26 @@
+import type { CalendarEvent, CalendarView } from './types';
+export interface UseCalendarOptions {
+    value?: Date;
+    events?: CalendarEvent[];
+    view?: CalendarView;
+    onViewChange?: (view: CalendarView) => void;
+    onChange?: (date: Date) => void;
+    hourFormat?: 12 | 24;
+}
+export declare function useCalendar({ value, events, view, onViewChange, onChange, hourFormat, }: UseCalendarOptions): {
+    currentDate: Date;
+    currentView: CalendarView;
+    today: Date;
+    year: number;
+    month: number;
+    handleViewChange: (newView: CalendarView) => void;
+    handleDateSelect: (date: Date) => void;
+    navigateMonth: (delta: number) => void;
+    navigateWeek: (delta: number) => void;
+    navigateDay: (delta: number) => void;
+    goToToday: () => void;
+    getEventsForDate: (date: Date) => CalendarEvent[];
+    getEventsForTimeSlot: (date: Date, timeSlot: string) => CalendarEvent[];
+    formatTime: (time: string) => string;
+    getWeekDates: (date: Date) => Date[];
+};

package/dist/components/ui/CollapsibleInfoPanel.d.ts

@@ -0,0 +1,12 @@
+export interface CollapsibleInfoPanelProps extends React.HTMLAttributes<HTMLDivElement> {
+    title: string;
+    icon?: React.ReactNode;
+    defaultOpen?: boolean;
+    children: React.ReactNode;
+}
+/**
+ * A collapsible panel for secondary information on mobile.
+ * Wraps the design system Accordion for converting sidebar panels
+ * (tips, insights, help text) into expandable sections.
+ */
+export declare const CollapsibleInfoPanel: import("react").ForwardRefExoticComponent<CollapsibleInfoPanelProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/ui/DateRangePicker.d.ts

@@ -6,6 +6,11 @@ interface DateRangePickerProps {
     value?: DateRange;
     onChange?: (range: DateRange) => void;
     placeholder?: string;
+    /** Labels for i18n. Override to translate. */
+    labels?: {
+        selectStart?: string;
+        selectEnd?: string;
+    };
     disabled?: boolean;
     required?: boolean;
     clearable?: boolean;
@@ -21,5 +26,5 @@ interface DateRangePickerProps {
     }>;
     align?: 'left' | 'right';
 }
-export declare function DateRangePicker({ value, onChange, placeholder, disabled, required, clearable, minDate, maxDate, numberOfMonths, className, format, presets, align }: DateRangePickerProps): import("react/jsx-runtime").JSX.Element;
+export declare function DateRangePicker({ value, onChange, placeholder, labels, disabled, required, clearable, minDate, maxDate, numberOfMonths, className, format, presets, align }: DateRangePickerProps): import("react/jsx-runtime").JSX.Element;
 export default DateRangePicker;

package/dist/components/ui/DesktopOnly.d.ts

@@ -0,0 +1,8 @@
+export interface DesktopOnlyProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+}
+/**
+ * Renders children only on desktop (hidden below md breakpoint).
+ * Uses CSS-based visibility — both layouts are in the DOM.
+ */
+export declare const DesktopOnly: import("react").ForwardRefExoticComponent<DesktopOnlyProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/ui/DragDrop/DragDropZone.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+export interface DragDropZoneProps {
+    onFileDrop: (files: File[]) => void;
+    accept?: string[];
+    multiple?: boolean;
+    maxSize?: number;
+    maxFiles?: number;
+    disabled?: boolean;
+    className?: string;
+    children?: React.ReactNode;
+    showPreview?: boolean;
+    compact?: boolean;
+}
+export declare function DragDropZone({ onFileDrop, accept, multiple, maxSize, maxFiles, disabled, className, children, showPreview, compact }: DragDropZoneProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/ui/DragDrop/FilePreview.d.ts

@@ -0,0 +1,7 @@
+import type { DroppedFile } from './types';
+export interface FilePreviewProps {
+    file: DroppedFile;
+    onRemove: () => void;
+    showActions?: boolean;
+}
+export declare function FilePreview({ file, onRemove, showActions }: FilePreviewProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/ui/DragDrop/SortableList.d.ts

@@ -0,0 +1,8 @@
+import type { SortableItem } from './types';
+export interface SortableListProps {
+    items: SortableItem[];
+    onReorder: (items: SortableItem[]) => void;
+    className?: string;
+    itemClassName?: string;
+}
+export declare function SortableList({ items, onReorder, className, itemClassName }: SortableListProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/ui/DragDrop/index.d.ts

@@ -0,0 +1,9 @@
+export { useDragDrop } from './useDragDrop';
+export { DragDropZone } from './DragDropZone';
+export { FilePreview } from './FilePreview';
+export type { FilePreviewProps } from './FilePreview';
+export { SortableList } from './SortableList';
+export type { SortableListProps } from './SortableList';
+export type { DroppedFile, SortableItem } from './types';
+export { DragDropZone as DragDrop } from './DragDropZone';
+export type { DragDropZoneProps as DragDropProps } from './DragDropZone';

package/dist/components/ui/DragDrop/types.d.ts

@@ -0,0 +1,12 @@
+export interface DroppedFile {
+    id: string;
+    file: File;
+    status: 'pending' | 'uploading' | 'success' | 'error';
+    progress?: number;
+    error?: string;
+    preview?: string;
+}
+export interface SortableItem {
+    id: string;
+    content: React.ReactNode;
+}

package/dist/components/ui/DragDrop/useDragDrop.d.ts

@@ -0,0 +1,16 @@
+export declare function useDragDrop({ onDrop, accept, multiple, maxSize, onError }: {
+    onDrop: (files: File[]) => void;
+    accept?: string[];
+    multiple?: boolean;
+    maxSize?: number;
+    onError?: (error: string) => void;
+}): {
+    isDragActive: boolean;
+    isDragReject: boolean;
+    dragProps: {
+        onDrop: (e: React.DragEvent) => void;
+        onDragEnter: (e: React.DragEvent) => void;
+        onDragLeave: (e: React.DragEvent) => void;
+        onDragOver: (e: React.DragEvent) => void;
+    };
+};

package/dist/components/ui/FocusScope.d.ts

@@ -0,0 +1,14 @@
+export interface FocusScopeProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Whether to trap focus within this scope. */
+    trapped?: boolean;
+    /** Whether to auto-focus the first focusable element on mount. */
+    autoFocus?: boolean;
+    /** Called when Escape is pressed while focus is within the scope. */
+    onEscape?: () => void;
+    children: React.ReactNode;
+}
+/**
+ * Traps keyboard focus within its children.
+ * Use in modals, dialogs, and sheets to prevent focus from escaping.
+ */
+export declare const FocusScope: import("react").ForwardRefExoticComponent<FocusScopeProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/ui/MobileDataCard.d.ts

@@ -0,0 +1,18 @@
+export interface MobileDataCardField {
+    label: string;
+    value: React.ReactNode;
+}
+export interface MobileDataCardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
+    title: string;
+    subtitle?: string;
+    statusBadge?: React.ReactNode;
+    fields: MobileDataCardField[];
+    actions?: React.ReactNode;
+    onClick?: () => void;
+}
+/**
+ * A mobile-optimized card for displaying a single data row.
+ * Replaces AG Grid table rows on mobile viewports.
+ * Minimum 44px touch target when clickable.
+ */
+export declare const MobileDataCard: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<MobileDataCardProps & import("react").RefAttributes<HTMLDivElement>>>;

package/dist/components/ui/MobileOnly.d.ts

@@ -0,0 +1,8 @@
+export interface MobileOnlyProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+}
+/**
+ * Renders children only on mobile (hidden on md+ screens).
+ * Uses CSS-based visibility — both layouts are in the DOM.
+ */
+export declare const MobileOnly: import("react").ForwardRefExoticComponent<MobileOnlyProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/ui/MobilePagination.d.ts

@@ -0,0 +1,10 @@
+export interface MobilePaginationProps extends React.HTMLAttributes<HTMLDivElement> {
+    page: number;
+    totalPages: number;
+    onPageChange: (page: number) => void;
+}
+/**
+ * Prev/Next pagination for mobile card lists.
+ * Shows "Page X of Y" with disabled states at boundaries.
+ */
+export declare const MobilePagination: import("react").ForwardRefExoticComponent<MobilePaginationProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/ui/MobileToolbar.d.ts

@@ -0,0 +1,12 @@
+export interface MobileToolbarProps extends React.HTMLAttributes<HTMLDivElement> {
+    searchValue: string;
+    onSearchChange: (value: string) => void;
+    searchPlaceholder?: string;
+    onFilterClick?: () => void;
+    activeFilterCount?: number;
+}
+/**
+ * A mobile-optimized toolbar with search input and optional filter button.
+ * Filter button shows an active count badge when filters are applied.
+ */
+export declare const MobileToolbar: import("react").ForwardRefExoticComponent<MobileToolbarProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/ui/ResponsiveStack.d.ts

@@ -0,0 +1,14 @@
+export interface ResponsiveStackProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Breakpoint at which to switch from column to row. Defaults to 'md'. */
+    breakpoint?: 'sm' | 'md' | 'lg' | 'xl';
+    /** Gap between items (Tailwind gap-N value). */
+    gap?: number;
+    /** Whether to reverse the column direction on mobile. */
+    reverse?: boolean;
+    children: React.ReactNode;
+}
+/**
+ * Stacks children vertically on mobile, horizontally on desktop.
+ * Replaces the common `flex flex-col md:flex-row` pattern.
+ */
+export declare const ResponsiveStack: import("react").ForwardRefExoticComponent<ResponsiveStackProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/ui/ScheduleGrid.d.ts

@@ -23,6 +23,11 @@ export interface ScheduleGridProps {
         label: string;
     }>;
     showPresets?: boolean;
+    /** Labels for i18n. Override to translate. */
+    labels?: {
+        selectAll?: string;
+        deselectAll?: string;
+    };
 }
-export declare function ScheduleGrid({ value, onChange, flightStartDate, flightEndDate, className, presets, showPresets, }: ScheduleGridProps): import("react/jsx-runtime").JSX.Element;
+export declare function ScheduleGrid({ value, onChange, flightStartDate, flightEndDate, className, presets, showPresets, labels, }: ScheduleGridProps): import("react/jsx-runtime").JSX.Element;
 export default ScheduleGrid;

package/dist/components/ui/TimeRangePicker.d.ts

@@ -14,10 +14,17 @@ interface TimeRangePickerProps {
     minTime?: string;
     maxTime?: string;
     className?: string;
+    /** Labels for i18n. Override to translate. */
+    labels?: {
+        fromTime?: string;
+        toTime?: string;
+        selectStart?: string;
+        selectEnd?: string;
+    };
     presets?: Array<{
         label: string;
         range: TimeRange;
     }>;
 }
-export declare function TimeRangePicker({ value, onChange, placeholder, disabled, required, clearable, format, minuteStep, minTime, maxTime, className, presets }: TimeRangePickerProps): import("react/jsx-runtime").JSX.Element;
+export declare function TimeRangePicker({ value, onChange, placeholder, disabled, required, clearable, format, minuteStep, minTime, maxTime, className, labels, presets }: TimeRangePickerProps): import("react/jsx-runtime").JSX.Element;
 export default TimeRangePicker;

package/dist/components/ui/VisuallyHidden.d.ts

@@ -0,0 +1,10 @@
+export interface VisuallyHiddenProps extends React.HTMLAttributes<HTMLElement> {
+    /** The HTML element to render. Defaults to 'span'. */
+    as?: React.ElementType;
+    children: React.ReactNode;
+}
+/**
+ * Renders content that is visually hidden but accessible to screen readers.
+ * Use this instead of ad-hoc `sr-only` classes for consistent accessibility.
+ */
+export declare const VisuallyHidden: import("react").ForwardRefExoticComponent<VisuallyHiddenProps & import("react").RefAttributes<HTMLElement>>;

package/dist/components/ui/index.d.ts

@@ -37,6 +37,7 @@ export { Skeleton } from './Skeleton';
 export { Separator } from './Separator';
 export { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from './Table';
 export { AdvancedTable } from './AdvancedTable';
+export { useAdvancedTable } from './AdvancedTable/useAdvancedTable';
 export type { AdvancedTableColumn, AdvancedTableSort, AdvancedTableFilter, AdvancedTableSelection, AdvancedTablePagination, AdvancedTableRowAction, AdvancedTableBulkAction, AdvancedTableToolbarAction, AdvancedTableState } from './AdvancedTable';
 export { EmptyState, NoDataEmptyState, NoResultsEmptyState } from './EmptyState';
 export { Chip, Tag } from './Chip';
@@ -75,6 +76,8 @@ export { ToastProvider, useToast } from './Toast';
 export type { Toast } from './Toast';
 export { Command, CommandGroup, CommandItem, CommandSeparator } from './Command';
 export { Calendar } from './Calendar';
+export { useCalendar } from './Calendar/useCalendar';
+export type { CalendarEvent, CalendarView } from './Calendar/types';
 export { SnackbarProvider, useSnackbar, useSnackbarHelpers } from './Snackbar';
 export { PanelGroup, Panel, PanelResizer, PanelHeader, SplitPanel, StackPanel, SidebarPanel } from './Panel';
 export { Notification, NotificationList, NotificationBadge, NotificationBell } from './Notification';
@@ -84,10 +87,29 @@ export { Thumbnail, VideoThumbnail, ImageThumbnail, ThumbnailGallery } from './T
 export { Image } from './Image';
 export type { ImageProps } from './Image';
 export { DragDrop, SortableList, useDragDrop } from './DragDrop';
+export type { DroppedFile, SortableListProps } from './DragDrop';
 export { Heading, Text, Label, Display } from './Typography';
 export type { HeadingProps, TextProps, LabelProps, DisplayProps } from './Typography';
 export { AgGridTable } from './AgGridTable';
 export type { AgGridSortState, AgGridSortDirection, AgGridTableProps, AgGridTableServerSideConfig, ColDef } from './AgGridTable';
+export { MobileDataCard } from './MobileDataCard';
+export type { MobileDataCardProps, MobileDataCardField } from './MobileDataCard';
+export { MobilePagination } from './MobilePagination';
+export type { MobilePaginationProps } from './MobilePagination';
+export { MobileToolbar } from './MobileToolbar';
+export type { MobileToolbarProps } from './MobileToolbar';
+export { MobileOnly } from './MobileOnly';
+export type { MobileOnlyProps } from './MobileOnly';
+export { DesktopOnly } from './DesktopOnly';
+export type { DesktopOnlyProps } from './DesktopOnly';
+export { ResponsiveStack } from './ResponsiveStack';
+export type { ResponsiveStackProps } from './ResponsiveStack';
+export { CollapsibleInfoPanel } from './CollapsibleInfoPanel';
+export type { CollapsibleInfoPanelProps } from './CollapsibleInfoPanel';
+export { VisuallyHidden } from './VisuallyHidden';
+export type { VisuallyHiddenProps } from './VisuallyHidden';
+export { FocusScope } from './FocusScope';
+export type { FocusScopeProps } from './FocusScope';
 export { PageHeader } from './PageHeader';
 export type { PageHeaderProps } from './PageHeader';
 export { AppHeader, SidebarToggleButton } from './AppHeader';

package/dist/hooks/index.d.ts

@@ -1,2 +1,5 @@
 export { useIconSearch } from './useIconSearch';
 export { useKeyboardShortcuts } from './useKeyboardShortcuts';
+export { useMediaQuery, useIsMobile, useIsTablet, useIsDesktop, usePrefersDarkMode, usePrefersReducedMotion } from './useMediaQuery';
+export { useResponsiveSheet } from './useResponsiveSheet';
+export type { UseResponsiveSheetOptions } from './useResponsiveSheet';

package/dist/hooks/useMediaQuery.d.ts

@@ -0,0 +1,6 @@
+export declare function useMediaQuery(query: string): boolean;
+export declare function useIsMobile(): boolean;
+export declare function useIsTablet(): boolean;
+export declare function useIsDesktop(): boolean;
+export declare function usePrefersDarkMode(): boolean;
+export declare function usePrefersReducedMotion(): boolean;

package/dist/hooks/useResponsiveSheet.d.ts

@@ -0,0 +1,19 @@
+export interface UseResponsiveSheetOptions {
+    /** Desktop width class (e.g., 'w-[640px]', 'w-[400px]'). */
+    desktopWidth?: string;
+    /** Desktop max-width class. Defaults to same as desktopWidth with max-w prefix. */
+    desktopMaxWidth?: string;
+}
+/**
+ * Returns responsive className for Sheet components.
+ * Mobile: fullscreen. Desktop: specified width.
+ *
+ * Usage:
+ * ```tsx
+ * const { className } = useResponsiveSheet({ desktopWidth: 'md:w-[640px]' })
+ * <SheetContent className={className}>...</SheetContent>
+ * ```
+ */
+export declare function useResponsiveSheet(options?: UseResponsiveSheetOptions): {
+    className: string;
+};