lucent-ui 0.3.0 → 0.4.1

package/dist/index.d.ts

@@ -166,6 +166,31 @@ export declare interface CollapsibleProps {
     style?: CSSProperties;
 }
 
+export declare const COMMAND_PALETTE_MANIFEST: ComponentManifest;
+
+export declare interface CommandItem {
+    id: string;
+    label: string;
+    description?: string;
+    icon?: ReactNode;
+    group?: string;
+    onSelect: () => void;
+    disabled?: boolean;
+}
+
+export declare function CommandPalette({ commands, placeholder, shortcutKey, open: controlledOpen, onOpenChange, style, }: CommandPaletteProps): JSX_2.Element | null;
+
+export declare interface CommandPaletteProps {
+    commands: CommandItem[];
+    placeholder?: string;
+    /** Key that triggers open when held with Meta (Mac) or Ctrl (Win). Default: 'k' */
+    shortcutKey?: string;
+    /** Controlled open state */
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    style?: CSSProperties;
+}
+
 /**
  * The domain of a component.
  * "neutral" means the component is domain-agnostic and reusable
@@ -237,6 +262,68 @@ export declare interface CompositionNode {
 
 export declare const darkTokens: LucentTokens;
 
+export declare const DATA_TABLE_MANIFEST: ComponentManifest;
+
+export declare function DataTable<T extends object>({ columns, rows, pageSize, page: controlledPage, onPageChange, emptyState, style, }: DataTableProps<T>): JSX_2.Element;
+
+export declare interface DataTableColumn<T> {
+    key: string;
+    header: ReactNode;
+    /** Custom cell renderer — defaults to `String(row[key])` */
+    render?: (row: T, index: number) => ReactNode;
+    sortable?: boolean;
+    width?: string;
+    align?: 'left' | 'center' | 'right';
+}
+
+export declare interface DataTableProps<T extends object> {
+    columns: DataTableColumn<T>[];
+    rows: T[];
+    /** Rows per page. Set to 0 to disable pagination. Default: 10 */
+    pageSize?: number;
+    /** Controlled current page (0-indexed) */
+    page?: number;
+    onPageChange?: (page: number) => void;
+    /** Empty state slot */
+    emptyState?: ReactNode;
+    style?: CSSProperties;
+}
+
+export declare const DATE_PICKER_MANIFEST: ComponentManifest;
+
+export declare const DATE_RANGE_PICKER_MANIFEST: ComponentManifest;
+
+export declare function DatePicker({ value: controlledValue, defaultValue, onChange, placeholder, disabled, min, max, style, }: DatePickerProps): JSX_2.Element;
+
+export declare interface DatePickerProps {
+    value?: Date;
+    defaultValue?: Date;
+    onChange?: (date: Date) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    min?: Date;
+    max?: Date;
+    style?: CSSProperties;
+}
+
+export declare interface DateRange {
+    start: Date;
+    end: Date;
+}
+
+export declare function DateRangePicker({ value: controlledValue, defaultValue, onChange, placeholder, disabled, min, max, style, }: DateRangePickerProps): JSX_2.Element;
+
+export declare interface DateRangePickerProps {
+    value?: DateRange;
+    defaultValue?: DateRange;
+    onChange?: (range: DateRange) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    min?: Date;
+    max?: Date;
+    style?: CSSProperties;
+}
+
 export declare function Divider({ orientation, label, spacing, style }: DividerProps): JSX_2.Element;
 
 export declare const DividerManifest: ComponentManifest;
@@ -262,6 +349,24 @@ export declare interface EmptyStateProps {
     style?: CSSProperties;
 }
 
+export declare const FILE_UPLOAD_MANIFEST: ComponentManifest;
+
+export declare function FileUpload({ accept, multiple, maxSize, value: controlledValue, onChange, onError, disabled, style, }: FileUploadProps): JSX_2.Element;
+
+export declare interface FileUploadProps {
+    /** Accepted MIME types or extensions, e.g. "image/*,.pdf" */
+    accept?: string;
+    multiple?: boolean;
+    /** Max file size in bytes */
+    maxSize?: number;
+    /** Controlled file list */
+    value?: UploadFile[];
+    onChange?: (files: UploadFile[]) => void;
+    onError?: (message: string) => void;
+    disabled?: boolean;
+    style?: CSSProperties;
+}
+
 export declare function FormField({ label, htmlFor, required, helperText, errorMessage, children, style, }: FormFieldProps): JSX_2.Element;
 
 export declare const FormFieldManifest: ComponentManifest;
@@ -373,6 +478,28 @@ declare interface MotionTokens {
     easingDecelerate: string;
 }
 
+export declare const MULTI_SELECT_MANIFEST: ComponentManifest;
+
+export declare function MultiSelect({ options, value: controlledValue, defaultValue, onChange, placeholder, disabled, max, style, }: MultiSelectProps): JSX_2.Element;
+
+export declare interface MultiSelectOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+
+export declare interface MultiSelectProps {
+    options: MultiSelectOption[];
+    value?: string[];
+    defaultValue?: string[];
+    onChange?: (values: string[]) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    /** Max number of items that can be selected. No limit by default. */
+    max?: number;
+    style?: CSSProperties;
+}
+
 export declare function NavLink({ children, href, isActive, icon, disabled, onClick, as, style, }: NavLinkProps): JSX_2.Element;
 
 export declare interface NavLinkProps {
@@ -387,7 +514,7 @@ export declare interface NavLinkProps {
     style?: CSSProperties;
 }
 
-export declare function PageLayout({ children, header, sidebar, sidebarWidth, headerHeight, sidebarCollapsed, mainStyle, style, }: PageLayoutProps): JSX_2.Element;
+export declare function PageLayout({ children, header, sidebar, sidebarWidth, headerHeight, sidebarCollapsed, rightSidebar, rightSidebarWidth, rightSidebarCollapsed, footer, footerHeight, mainStyle, style, }: PageLayoutProps): JSX_2.Element;
 
 export declare interface PageLayoutProps {
     children: ReactNode;
@@ -399,6 +526,16 @@ export declare interface PageLayoutProps {
     headerHeight?: number | string;
     /** Collapse the sidebar to zero width */
     sidebarCollapsed?: boolean;
+    /** Right panel content rendered as a flex sibling of <main> */
+    rightSidebar?: ReactNode;
+    /** Right panel width in px or any CSS value. Default: 240 */
+    rightSidebarWidth?: number | string;
+    /** Collapse the right panel to zero width */
+    rightSidebarCollapsed?: boolean;
+    /** Footer content rendered below the body row */
+    footer?: ReactNode;
+    /** Footer height in px or any CSS value. Default: 48 */
+    footerHeight?: number | string;
     /** Style overrides for the main content card (border, borderRadius, boxShadow, etc.) */
     mainStyle?: CSSProperties;
     style?: CSSProperties;
@@ -680,6 +817,26 @@ export declare type TextWeight = 'regular' | 'medium' | 'semibold' | 'bold';
 
 export declare type Theme = 'light' | 'dark';
 
+export declare function Timeline({ items, style }: TimelineProps): JSX_2.Element;
+
+export declare const TIMELINE_MANIFEST: ComponentManifest;
+
+export declare interface TimelineItem {
+    id: string;
+    title: ReactNode;
+    description?: ReactNode;
+    date?: string;
+    status?: TimelineItemStatus;
+    icon?: ReactNode;
+}
+
+export declare type TimelineItemStatus = 'default' | 'success' | 'warning' | 'danger' | 'info';
+
+export declare interface TimelineProps {
+    items: TimelineItem[];
+    style?: CSSProperties;
+}
+
 export declare function Toggle({ label, size, checked, defaultChecked, disabled, id, onChange, style, ...rest }: ToggleProps): JSX_2.Element;
 
 export declare const ToggleManifest: ComponentManifest;
@@ -730,6 +887,14 @@ declare interface TypographyTokens {
     letterSpacingWide: string;
 }
 
+export declare interface UploadFile {
+    id: string;
+    file: File;
+    /** 0–100. Undefined = not yet started. */
+    progress?: number;
+    error?: string;
+}
+
 export declare interface UsageExample {
     /** Short label for the example */
     title: string;