lucent-ui 0.9.2 → 0.10.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 +67 -36
- package/dist/index.d.ts +99 -1
- package/dist/index.js +1486 -1059
- package/dist-cli/cli/entry.js +32 -0
- package/dist-cli/cli/init/index.js +115 -0
- package/dist-cli/cli/init/prompts.js +25 -0
- package/dist-cli/src/tokens/presets/types.js +1 -0
- package/dist-server/server/index.js +45 -0
- package/dist-server/server/presets.js +105 -0
- package/package.json +2 -1
package/dist/index.d.ts
CHANGED
|
@@ -75,6 +75,8 @@ export declare type BadgeSize = 'sm' | 'md';
|
|
|
75
75
|
|
|
76
76
|
export declare type BadgeVariant = 'neutral' | 'success' | 'warning' | 'danger' | 'info' | 'accent';
|
|
77
77
|
|
|
78
|
+
export declare const brandPalette: ColorPalette;
|
|
79
|
+
|
|
78
80
|
/**
|
|
79
81
|
* Gold brand token overrides — the original lucentui.ai accent palette.
|
|
80
82
|
*
|
|
@@ -214,6 +216,12 @@ export declare const COLOR_PICKER_MANIFEST: ComponentManifest;
|
|
|
214
216
|
|
|
215
217
|
export declare const COLOR_SWATCH_MANIFEST: ComponentManifest;
|
|
216
218
|
|
|
219
|
+
export declare interface ColorPalette {
|
|
220
|
+
name: string;
|
|
221
|
+
light: ThemeAnchors;
|
|
222
|
+
dark: ThemeAnchors;
|
|
223
|
+
}
|
|
224
|
+
|
|
217
225
|
export declare function ColorPicker({ value, onChange, label, disabled, presetGroups, id, style, }: ColorPickerProps): JSX_2.Element;
|
|
218
226
|
|
|
219
227
|
export declare namespace ColorPicker {
|
|
@@ -275,6 +283,8 @@ export declare interface CommandPaletteProps {
|
|
|
275
283
|
style?: CSSProperties;
|
|
276
284
|
}
|
|
277
285
|
|
|
286
|
+
export declare const compactDensity: DensityPreset;
|
|
287
|
+
|
|
278
288
|
/**
|
|
279
289
|
* The domain of a component.
|
|
280
290
|
* "neutral" means the component is domain-agnostic and reusable
|
|
@@ -445,6 +455,17 @@ export declare interface DateRangePickerProps {
|
|
|
445
455
|
style?: CSSProperties;
|
|
446
456
|
}
|
|
447
457
|
|
|
458
|
+
export declare const defaultDensity: DensityPreset;
|
|
459
|
+
|
|
460
|
+
export declare const defaultPalette: ColorPalette;
|
|
461
|
+
|
|
462
|
+
export declare type DensityName = 'compact' | 'default' | 'spacious';
|
|
463
|
+
|
|
464
|
+
export declare interface DensityPreset {
|
|
465
|
+
name: string;
|
|
466
|
+
tokens: SpacingTokens;
|
|
467
|
+
}
|
|
468
|
+
|
|
448
469
|
/**
|
|
449
470
|
* Derives a complete dark-mode token set from a light-mode token set.
|
|
450
471
|
*
|
|
@@ -482,6 +503,14 @@ export declare function deriveDarkFromLight(light: LucentTokens): LucentTokens;
|
|
|
482
503
|
*/
|
|
483
504
|
export declare function deriveTokens(overrides: Partial<LucentTokens>, merged: LucentTokens, theme: Theme): Partial<LucentTokens>;
|
|
484
505
|
|
|
506
|
+
export declare interface DesignPreset {
|
|
507
|
+
name: string;
|
|
508
|
+
palette: ColorPalette;
|
|
509
|
+
shape: ShapePreset;
|
|
510
|
+
density: DensityPreset;
|
|
511
|
+
shadow: ShadowPreset;
|
|
512
|
+
}
|
|
513
|
+
|
|
485
514
|
export declare function Divider({ orientation, label, spacing, style }: DividerProps): JSX_2.Element;
|
|
486
515
|
|
|
487
516
|
export declare const DividerManifest: ComponentManifest;
|
|
@@ -495,6 +524,10 @@ export declare interface DividerProps {
|
|
|
495
524
|
style?: CSSProperties;
|
|
496
525
|
}
|
|
497
526
|
|
|
527
|
+
export declare const elevatedShadow: ShadowPreset;
|
|
528
|
+
|
|
529
|
+
export declare const emeraldPalette: ColorPalette;
|
|
530
|
+
|
|
498
531
|
export declare function EmptyState({ illustration, title, description, action, style, }: EmptyStateProps): JSX_2.Element;
|
|
499
532
|
|
|
500
533
|
export declare const EmptyStateManifest: ComponentManifest;
|
|
@@ -507,6 +540,8 @@ export declare interface EmptyStateProps {
|
|
|
507
540
|
style?: CSSProperties;
|
|
508
541
|
}
|
|
509
542
|
|
|
543
|
+
export declare const enterprisePreset: DesignPreset;
|
|
544
|
+
|
|
510
545
|
export declare const FILE_UPLOAD_MANIFEST: ComponentManifest;
|
|
511
546
|
|
|
512
547
|
export declare function FileUpload({ accept, multiple, maxSize, value: controlledValue, onChange, onError, disabled, style, }: FileUploadProps): JSX_2.Element;
|
|
@@ -525,6 +560,8 @@ export declare interface FileUploadProps {
|
|
|
525
560
|
style?: CSSProperties;
|
|
526
561
|
}
|
|
527
562
|
|
|
563
|
+
export declare const flatShadow: ShadowPreset;
|
|
564
|
+
|
|
528
565
|
export declare function FormField({ label, htmlFor, required, helperText, errorMessage, children, style, }: FormFieldProps): JSX_2.Element;
|
|
529
566
|
|
|
530
567
|
export declare const FormFieldManifest: ComponentManifest;
|
|
@@ -568,6 +605,8 @@ export declare interface IconProps {
|
|
|
568
605
|
|
|
569
606
|
export declare type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
|
|
570
607
|
|
|
608
|
+
export declare const indigoPalette: ColorPalette;
|
|
609
|
+
|
|
571
610
|
export declare const Input: ForwardRefExoticComponent<InputProps & RefAttributes<HTMLInputElement>>;
|
|
572
611
|
|
|
573
612
|
export declare const InputManifest: ComponentManifest;
|
|
@@ -620,12 +659,20 @@ declare interface LucentContextValue {
|
|
|
620
659
|
* <App />
|
|
621
660
|
* </LucentProvider>
|
|
622
661
|
*/
|
|
623
|
-
export declare function LucentProvider({ theme, tokens: tokenOverrides, anchors, children, }: LucentProviderProps): JSX_2.Element;
|
|
662
|
+
export declare function LucentProvider({ theme, preset, tokens: tokenOverrides, anchors, children, }: LucentProviderProps): JSX_2.Element;
|
|
624
663
|
|
|
625
664
|
export declare const LucentProviderManifest: ComponentManifest;
|
|
626
665
|
|
|
627
666
|
export declare interface LucentProviderProps {
|
|
628
667
|
theme?: Theme;
|
|
668
|
+
/**
|
|
669
|
+
* A design preset that bundles palette, shape, density, and shadow tokens.
|
|
670
|
+
* Pass a combined preset name (`"modern"`, `"enterprise"`, `"playful"`) or
|
|
671
|
+
* an object to mix dimensions: `{ palette: 'indigo', shape: 'pill' }`.
|
|
672
|
+
*
|
|
673
|
+
* Precedence (later wins): base theme → preset → anchors → tokens.
|
|
674
|
+
*/
|
|
675
|
+
preset?: PresetProp;
|
|
629
676
|
/**
|
|
630
677
|
* Full or partial token overrides. Individual tokens can be set here and
|
|
631
678
|
* any missing variant tokens will be derived automatically.
|
|
@@ -655,6 +702,8 @@ export declare function makeLibraryCSS(tokens: LucentTokens, selector?: string):
|
|
|
655
702
|
|
|
656
703
|
export declare const MANIFEST_SPEC_VERSION = "1.0";
|
|
657
704
|
|
|
705
|
+
export declare const modernPreset: DesignPreset;
|
|
706
|
+
|
|
658
707
|
declare interface MotionTokens {
|
|
659
708
|
durationFast: string;
|
|
660
709
|
durationBase: string;
|
|
@@ -700,6 +749,8 @@ export declare interface NavLinkProps {
|
|
|
700
749
|
style?: CSSProperties;
|
|
701
750
|
}
|
|
702
751
|
|
|
752
|
+
export declare const oceanPalette: ColorPalette;
|
|
753
|
+
|
|
703
754
|
export declare function PageLayout({ children, header, sidebar, sidebarWidth, headerHeight, sidebarCollapsed, rightSidebar, rightSidebarWidth, rightSidebarCollapsed, footer, footerHeight, mainStyle, style, }: PageLayoutProps): JSX_2.Element;
|
|
704
755
|
|
|
705
756
|
export declare interface PageLayoutProps {
|
|
@@ -727,6 +778,21 @@ export declare interface PageLayoutProps {
|
|
|
727
778
|
style?: CSSProperties;
|
|
728
779
|
}
|
|
729
780
|
|
|
781
|
+
export declare type PaletteName = 'default' | 'brand' | 'indigo' | 'emerald' | 'rose' | 'ocean';
|
|
782
|
+
|
|
783
|
+
export declare const pillShape: ShapePreset;
|
|
784
|
+
|
|
785
|
+
export declare const playfulPreset: DesignPreset;
|
|
786
|
+
|
|
787
|
+
export declare type PresetName = 'modern' | 'enterprise' | 'playful';
|
|
788
|
+
|
|
789
|
+
export declare type PresetProp = PresetName | {
|
|
790
|
+
palette?: PaletteName | ColorPalette;
|
|
791
|
+
shape?: ShapeName | ShapePreset;
|
|
792
|
+
density?: DensityName | DensityPreset;
|
|
793
|
+
shadow?: ShadowName | ShadowPreset;
|
|
794
|
+
};
|
|
795
|
+
|
|
730
796
|
export declare interface PropDescriptor {
|
|
731
797
|
/** Prop name as it appears in the component API */
|
|
732
798
|
name: string;
|
|
@@ -786,6 +852,17 @@ declare interface RadiusTokens {
|
|
|
786
852
|
radiusFull: string;
|
|
787
853
|
}
|
|
788
854
|
|
|
855
|
+
/**
|
|
856
|
+
* Resolves a `PresetProp` into a flat `Partial<LucentTokens>` that can be
|
|
857
|
+
* spread over the base theme. Palette colors are fully derived via
|
|
858
|
+
* `createTheme()`, so all hover/active/subtle/text variants are included.
|
|
859
|
+
*/
|
|
860
|
+
export declare function resolvePreset(preset: PresetProp, theme: Theme): Partial<LucentTokens>;
|
|
861
|
+
|
|
862
|
+
export declare const rosePalette: ColorPalette;
|
|
863
|
+
|
|
864
|
+
export declare const roundedShape: ShapePreset;
|
|
865
|
+
|
|
789
866
|
export declare function SearchInput({ value, onChange, placeholder, results, onResultSelect, isLoading, disabled, id, style, }: SearchInputProps): JSX_2.Element;
|
|
790
867
|
|
|
791
868
|
export declare const SearchInputManifest: ComponentManifest;
|
|
@@ -897,6 +974,14 @@ declare interface SemanticColorTokens {
|
|
|
897
974
|
focusRing: string;
|
|
898
975
|
}
|
|
899
976
|
|
|
977
|
+
export declare type ShadowName = 'flat' | 'subtle' | 'elevated';
|
|
978
|
+
|
|
979
|
+
export declare interface ShadowPreset {
|
|
980
|
+
name: string;
|
|
981
|
+
light: ShadowTokens;
|
|
982
|
+
dark: ShadowTokens;
|
|
983
|
+
}
|
|
984
|
+
|
|
900
985
|
declare interface ShadowTokens {
|
|
901
986
|
shadowNone: string;
|
|
902
987
|
shadowSm: string;
|
|
@@ -905,6 +990,15 @@ declare interface ShadowTokens {
|
|
|
905
990
|
shadowXl: string;
|
|
906
991
|
}
|
|
907
992
|
|
|
993
|
+
export declare type ShapeName = 'sharp' | 'rounded' | 'pill';
|
|
994
|
+
|
|
995
|
+
export declare interface ShapePreset {
|
|
996
|
+
name: string;
|
|
997
|
+
tokens: RadiusTokens;
|
|
998
|
+
}
|
|
999
|
+
|
|
1000
|
+
export declare const sharpShape: ShapePreset;
|
|
1001
|
+
|
|
908
1002
|
export declare function Skeleton({ variant, width, height, lines, animate, radius, style, }: SkeletonProps): JSX_2.Element;
|
|
909
1003
|
|
|
910
1004
|
export declare const SkeletonManifest: ComponentManifest;
|
|
@@ -955,6 +1049,8 @@ declare interface SpacingTokens {
|
|
|
955
1049
|
space24: string;
|
|
956
1050
|
}
|
|
957
1051
|
|
|
1052
|
+
export declare const spaciousDensity: DensityPreset;
|
|
1053
|
+
|
|
958
1054
|
export declare function Spinner({ size, label, color }: SpinnerProps): JSX_2.Element;
|
|
959
1055
|
|
|
960
1056
|
export declare const SpinnerManifest: ComponentManifest;
|
|
@@ -967,6 +1063,8 @@ export declare interface SpinnerProps {
|
|
|
967
1063
|
|
|
968
1064
|
export declare type SpinnerSize = 'xs' | 'sm' | 'md' | 'lg';
|
|
969
1065
|
|
|
1066
|
+
export declare const subtleShadow: ShadowPreset;
|
|
1067
|
+
|
|
970
1068
|
export declare interface TabItem {
|
|
971
1069
|
value: string;
|
|
972
1070
|
label: ReactNode;
|