lucent-ui 0.3.0 → 0.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +106 -19
- package/dist/index.d.ts +155 -0
- package/dist/index.js +2935 -1028
- package/dist-server/src/components/molecules/CommandPalette/CommandPalette.manifest.js +89 -0
- package/dist-server/src/components/molecules/DataTable/DataTable.manifest.js +97 -0
- package/dist-server/src/components/molecules/DatePicker/DatePicker.manifest.js +91 -0
- package/dist-server/src/components/molecules/DateRangePicker/DateRangePicker.manifest.js +85 -0
- package/dist-server/src/components/molecules/FileUpload/FileUpload.manifest.js +104 -0
- package/dist-server/src/components/molecules/MultiSelect/MultiSelect.manifest.js +100 -0
- package/dist-server/src/components/molecules/Timeline/Timeline.manifest.js +60 -0
- package/package.json +1 -1
package/dist/index.d.ts
CHANGED
|
@@ -166,6 +166,31 @@ export declare interface CollapsibleProps {
|
|
|
166
166
|
style?: CSSProperties;
|
|
167
167
|
}
|
|
168
168
|
|
|
169
|
+
export declare const COMMAND_PALETTE_MANIFEST: ComponentManifest;
|
|
170
|
+
|
|
171
|
+
export declare interface CommandItem {
|
|
172
|
+
id: string;
|
|
173
|
+
label: string;
|
|
174
|
+
description?: string;
|
|
175
|
+
icon?: ReactNode;
|
|
176
|
+
group?: string;
|
|
177
|
+
onSelect: () => void;
|
|
178
|
+
disabled?: boolean;
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
export declare function CommandPalette({ commands, placeholder, shortcutKey, open: controlledOpen, onOpenChange, style, }: CommandPaletteProps): JSX_2.Element | null;
|
|
182
|
+
|
|
183
|
+
export declare interface CommandPaletteProps {
|
|
184
|
+
commands: CommandItem[];
|
|
185
|
+
placeholder?: string;
|
|
186
|
+
/** Key that triggers open when held with Meta (Mac) or Ctrl (Win). Default: 'k' */
|
|
187
|
+
shortcutKey?: string;
|
|
188
|
+
/** Controlled open state */
|
|
189
|
+
open?: boolean;
|
|
190
|
+
onOpenChange?: (open: boolean) => void;
|
|
191
|
+
style?: CSSProperties;
|
|
192
|
+
}
|
|
193
|
+
|
|
169
194
|
/**
|
|
170
195
|
* The domain of a component.
|
|
171
196
|
* "neutral" means the component is domain-agnostic and reusable
|
|
@@ -237,6 +262,68 @@ export declare interface CompositionNode {
|
|
|
237
262
|
|
|
238
263
|
export declare const darkTokens: LucentTokens;
|
|
239
264
|
|
|
265
|
+
export declare const DATA_TABLE_MANIFEST: ComponentManifest;
|
|
266
|
+
|
|
267
|
+
export declare function DataTable<T extends object>({ columns, rows, pageSize, page: controlledPage, onPageChange, emptyState, style, }: DataTableProps<T>): JSX_2.Element;
|
|
268
|
+
|
|
269
|
+
export declare interface DataTableColumn<T> {
|
|
270
|
+
key: string;
|
|
271
|
+
header: ReactNode;
|
|
272
|
+
/** Custom cell renderer — defaults to `String(row[key])` */
|
|
273
|
+
render?: (row: T, index: number) => ReactNode;
|
|
274
|
+
sortable?: boolean;
|
|
275
|
+
width?: string;
|
|
276
|
+
align?: 'left' | 'center' | 'right';
|
|
277
|
+
}
|
|
278
|
+
|
|
279
|
+
export declare interface DataTableProps<T extends object> {
|
|
280
|
+
columns: DataTableColumn<T>[];
|
|
281
|
+
rows: T[];
|
|
282
|
+
/** Rows per page. Set to 0 to disable pagination. Default: 10 */
|
|
283
|
+
pageSize?: number;
|
|
284
|
+
/** Controlled current page (0-indexed) */
|
|
285
|
+
page?: number;
|
|
286
|
+
onPageChange?: (page: number) => void;
|
|
287
|
+
/** Empty state slot */
|
|
288
|
+
emptyState?: ReactNode;
|
|
289
|
+
style?: CSSProperties;
|
|
290
|
+
}
|
|
291
|
+
|
|
292
|
+
export declare const DATE_PICKER_MANIFEST: ComponentManifest;
|
|
293
|
+
|
|
294
|
+
export declare const DATE_RANGE_PICKER_MANIFEST: ComponentManifest;
|
|
295
|
+
|
|
296
|
+
export declare function DatePicker({ value: controlledValue, defaultValue, onChange, placeholder, disabled, min, max, style, }: DatePickerProps): JSX_2.Element;
|
|
297
|
+
|
|
298
|
+
export declare interface DatePickerProps {
|
|
299
|
+
value?: Date;
|
|
300
|
+
defaultValue?: Date;
|
|
301
|
+
onChange?: (date: Date) => void;
|
|
302
|
+
placeholder?: string;
|
|
303
|
+
disabled?: boolean;
|
|
304
|
+
min?: Date;
|
|
305
|
+
max?: Date;
|
|
306
|
+
style?: CSSProperties;
|
|
307
|
+
}
|
|
308
|
+
|
|
309
|
+
export declare interface DateRange {
|
|
310
|
+
start: Date;
|
|
311
|
+
end: Date;
|
|
312
|
+
}
|
|
313
|
+
|
|
314
|
+
export declare function DateRangePicker({ value: controlledValue, defaultValue, onChange, placeholder, disabled, min, max, style, }: DateRangePickerProps): JSX_2.Element;
|
|
315
|
+
|
|
316
|
+
export declare interface DateRangePickerProps {
|
|
317
|
+
value?: DateRange;
|
|
318
|
+
defaultValue?: DateRange;
|
|
319
|
+
onChange?: (range: DateRange) => void;
|
|
320
|
+
placeholder?: string;
|
|
321
|
+
disabled?: boolean;
|
|
322
|
+
min?: Date;
|
|
323
|
+
max?: Date;
|
|
324
|
+
style?: CSSProperties;
|
|
325
|
+
}
|
|
326
|
+
|
|
240
327
|
export declare function Divider({ orientation, label, spacing, style }: DividerProps): JSX_2.Element;
|
|
241
328
|
|
|
242
329
|
export declare const DividerManifest: ComponentManifest;
|
|
@@ -262,6 +349,24 @@ export declare interface EmptyStateProps {
|
|
|
262
349
|
style?: CSSProperties;
|
|
263
350
|
}
|
|
264
351
|
|
|
352
|
+
export declare const FILE_UPLOAD_MANIFEST: ComponentManifest;
|
|
353
|
+
|
|
354
|
+
export declare function FileUpload({ accept, multiple, maxSize, value: controlledValue, onChange, onError, disabled, style, }: FileUploadProps): JSX_2.Element;
|
|
355
|
+
|
|
356
|
+
export declare interface FileUploadProps {
|
|
357
|
+
/** Accepted MIME types or extensions, e.g. "image/*,.pdf" */
|
|
358
|
+
accept?: string;
|
|
359
|
+
multiple?: boolean;
|
|
360
|
+
/** Max file size in bytes */
|
|
361
|
+
maxSize?: number;
|
|
362
|
+
/** Controlled file list */
|
|
363
|
+
value?: UploadFile[];
|
|
364
|
+
onChange?: (files: UploadFile[]) => void;
|
|
365
|
+
onError?: (message: string) => void;
|
|
366
|
+
disabled?: boolean;
|
|
367
|
+
style?: CSSProperties;
|
|
368
|
+
}
|
|
369
|
+
|
|
265
370
|
export declare function FormField({ label, htmlFor, required, helperText, errorMessage, children, style, }: FormFieldProps): JSX_2.Element;
|
|
266
371
|
|
|
267
372
|
export declare const FormFieldManifest: ComponentManifest;
|
|
@@ -373,6 +478,28 @@ declare interface MotionTokens {
|
|
|
373
478
|
easingDecelerate: string;
|
|
374
479
|
}
|
|
375
480
|
|
|
481
|
+
export declare const MULTI_SELECT_MANIFEST: ComponentManifest;
|
|
482
|
+
|
|
483
|
+
export declare function MultiSelect({ options, value: controlledValue, defaultValue, onChange, placeholder, disabled, max, style, }: MultiSelectProps): JSX_2.Element;
|
|
484
|
+
|
|
485
|
+
export declare interface MultiSelectOption {
|
|
486
|
+
value: string;
|
|
487
|
+
label: string;
|
|
488
|
+
disabled?: boolean;
|
|
489
|
+
}
|
|
490
|
+
|
|
491
|
+
export declare interface MultiSelectProps {
|
|
492
|
+
options: MultiSelectOption[];
|
|
493
|
+
value?: string[];
|
|
494
|
+
defaultValue?: string[];
|
|
495
|
+
onChange?: (values: string[]) => void;
|
|
496
|
+
placeholder?: string;
|
|
497
|
+
disabled?: boolean;
|
|
498
|
+
/** Max number of items that can be selected. No limit by default. */
|
|
499
|
+
max?: number;
|
|
500
|
+
style?: CSSProperties;
|
|
501
|
+
}
|
|
502
|
+
|
|
376
503
|
export declare function NavLink({ children, href, isActive, icon, disabled, onClick, as, style, }: NavLinkProps): JSX_2.Element;
|
|
377
504
|
|
|
378
505
|
export declare interface NavLinkProps {
|
|
@@ -680,6 +807,26 @@ export declare type TextWeight = 'regular' | 'medium' | 'semibold' | 'bold';
|
|
|
680
807
|
|
|
681
808
|
export declare type Theme = 'light' | 'dark';
|
|
682
809
|
|
|
810
|
+
export declare function Timeline({ items, style }: TimelineProps): JSX_2.Element;
|
|
811
|
+
|
|
812
|
+
export declare const TIMELINE_MANIFEST: ComponentManifest;
|
|
813
|
+
|
|
814
|
+
export declare interface TimelineItem {
|
|
815
|
+
id: string;
|
|
816
|
+
title: ReactNode;
|
|
817
|
+
description?: ReactNode;
|
|
818
|
+
date?: string;
|
|
819
|
+
status?: TimelineItemStatus;
|
|
820
|
+
icon?: ReactNode;
|
|
821
|
+
}
|
|
822
|
+
|
|
823
|
+
export declare type TimelineItemStatus = 'default' | 'success' | 'warning' | 'danger' | 'info';
|
|
824
|
+
|
|
825
|
+
export declare interface TimelineProps {
|
|
826
|
+
items: TimelineItem[];
|
|
827
|
+
style?: CSSProperties;
|
|
828
|
+
}
|
|
829
|
+
|
|
683
830
|
export declare function Toggle({ label, size, checked, defaultChecked, disabled, id, onChange, style, ...rest }: ToggleProps): JSX_2.Element;
|
|
684
831
|
|
|
685
832
|
export declare const ToggleManifest: ComponentManifest;
|
|
@@ -730,6 +877,14 @@ declare interface TypographyTokens {
|
|
|
730
877
|
letterSpacingWide: string;
|
|
731
878
|
}
|
|
732
879
|
|
|
880
|
+
export declare interface UploadFile {
|
|
881
|
+
id: string;
|
|
882
|
+
file: File;
|
|
883
|
+
/** 0–100. Undefined = not yet started. */
|
|
884
|
+
progress?: number;
|
|
885
|
+
error?: string;
|
|
886
|
+
}
|
|
887
|
+
|
|
733
888
|
export declare interface UsageExample {
|
|
734
889
|
/** Short label for the example */
|
|
735
890
|
title: string;
|