lucent-ui 0.9.2 → 0.11.0

package/dist/index.d.ts

@@ -75,6 +75,8 @@ export declare type BadgeSize = 'sm' | 'md';
 
 export declare type BadgeVariant = 'neutral' | 'success' | 'warning' | 'danger' | 'info' | 'accent';
 
+export declare const brandPalette: ColorPalette;
+
 /**
  * Gold brand token overrides — the original lucentui.ai accent palette.
  *
@@ -126,7 +128,7 @@ export declare interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElem
 
 export declare type ButtonSize = 'sm' | 'md' | 'lg';
 
-export declare type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger';
+export declare type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger';
 
 export declare function Card({ header, footer, children, padding, shadow, radius, style, }: CardProps): JSX_2.Element;
 
@@ -214,6 +216,12 @@ export declare const COLOR_PICKER_MANIFEST: ComponentManifest;
 
 export declare const COLOR_SWATCH_MANIFEST: ComponentManifest;
 
+export declare interface ColorPalette {
+    name: string;
+    light: ThemeAnchors;
+    dark: ThemeAnchors;
+}
+
 export declare function ColorPicker({ value, onChange, label, disabled, presetGroups, id, style, }: ColorPickerProps): JSX_2.Element;
 
 export declare namespace ColorPicker {
@@ -275,6 +283,8 @@ export declare interface CommandPaletteProps {
     style?: CSSProperties;
 }
 
+export declare const compactDensity: DensityPreset;
+
 /**
  * The domain of a component.
  * "neutral" means the component is domain-agnostic and reusable
@@ -445,6 +455,17 @@ export declare interface DateRangePickerProps {
     style?: CSSProperties;
 }
 
+export declare const defaultDensity: DensityPreset;
+
+export declare const defaultPalette: ColorPalette;
+
+export declare type DensityName = 'compact' | 'default' | 'spacious';
+
+export declare interface DensityPreset {
+    name: string;
+    tokens: SpacingTokens;
+}
+
 /**
  * Derives a complete dark-mode token set from a light-mode token set.
  *
@@ -482,6 +503,14 @@ export declare function deriveDarkFromLight(light: LucentTokens): LucentTokens;
  */
 export declare function deriveTokens(overrides: Partial<LucentTokens>, merged: LucentTokens, theme: Theme): Partial<LucentTokens>;
 
+export declare interface DesignPreset {
+    name: string;
+    palette: ColorPalette;
+    shape: ShapePreset;
+    density: DensityPreset;
+    shadow: ShadowPreset;
+}
+
 export declare function Divider({ orientation, label, spacing, style }: DividerProps): JSX_2.Element;
 
 export declare const DividerManifest: ComponentManifest;
@@ -495,6 +524,10 @@ export declare interface DividerProps {
     style?: CSSProperties;
 }
 
+export declare const elevatedShadow: ShadowPreset;
+
+export declare const emeraldPalette: ColorPalette;
+
 export declare function EmptyState({ illustration, title, description, action, style, }: EmptyStateProps): JSX_2.Element;
 
 export declare const EmptyStateManifest: ComponentManifest;
@@ -507,6 +540,8 @@ export declare interface EmptyStateProps {
     style?: CSSProperties;
 }
 
+export declare const enterprisePreset: DesignPreset;
+
 export declare const FILE_UPLOAD_MANIFEST: ComponentManifest;
 
 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 {
     style?: CSSProperties;
 }
 
+export declare const flatShadow: ShadowPreset;
+
 export declare function FormField({ label, htmlFor, required, helperText, errorMessage, children, style, }: FormFieldProps): JSX_2.Element;
 
 export declare const FormFieldManifest: ComponentManifest;
@@ -540,14 +577,15 @@ export declare interface FormFieldProps {
 }
 
 /**
- * Returns `'#000000'` or `'#ffffff'` — whichever has higher WCAG contrast
- * against the given background hex color.
+ * Returns `'#000000'` or `'#ffffff'` — whichever is more readable on the
+ * given background, using APCA perceptual contrast.
  *
- * Use this to guarantee AA-compliant text on any solid accent surface.
+ * APCA correctly handles saturated blues/purples where WCAG 2.1 fails.
  *
  * @example
- * getContrastText('#e9c96b') // → '#000000'  (gold bg → black text, 8.6:1)
- * getContrastText('#111827') // → '#ffffff'  (near-black bg → white text, 16.7:1)
+ * getContrastText('#0ea5e9') // → '#ffffff'  (sky blue → white, APCA says white is more readable)
+ * getContrastText('#e9c96b') // → '#000000'  (gold → black)
+ * getContrastText('#111827') // → '#ffffff'  (near-black → white)
  */
 export declare function getContrastText(hex: string): '#000000' | '#ffffff';
 
@@ -568,6 +606,8 @@ export declare interface IconProps {
 
 export declare type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 
+export declare const indigoPalette: ColorPalette;
+
 export declare const Input: ForwardRefExoticComponent<InputProps & RefAttributes<HTMLInputElement>>;
 
 export declare const InputManifest: ComponentManifest;
@@ -620,12 +660,20 @@ declare interface LucentContextValue {
  *   <App />
  * </LucentProvider>
  */
-export declare function LucentProvider({ theme, tokens: tokenOverrides, anchors, children, }: LucentProviderProps): JSX_2.Element;
+export declare function LucentProvider({ theme, preset, tokens: tokenOverrides, anchors, children, }: LucentProviderProps): JSX_2.Element;
 
 export declare const LucentProviderManifest: ComponentManifest;
 
 export declare interface LucentProviderProps {
     theme?: Theme;
+    /**
+     * A design preset that bundles palette, shape, density, and shadow tokens.
+     * Pass a combined preset name (`"modern"`, `"enterprise"`, `"playful"`) or
+     * an object to mix dimensions: `{ palette: 'indigo', shape: 'pill' }`.
+     *
+     * Precedence (later wins): base theme → preset → anchors → tokens.
+     */
+    preset?: PresetProp;
     /**
      * Full or partial token overrides. Individual tokens can be set here and
      * any missing variant tokens will be derived automatically.
@@ -655,6 +703,8 @@ export declare function makeLibraryCSS(tokens: LucentTokens, selector?: string):
 
 export declare const MANIFEST_SPEC_VERSION = "1.0";
 
+export declare const modernPreset: DesignPreset;
+
 declare interface MotionTokens {
     durationFast: string;
     durationBase: string;
@@ -700,6 +750,8 @@ export declare interface NavLinkProps {
     style?: CSSProperties;
 }
 
+export declare const oceanPalette: ColorPalette;
+
 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 {
@@ -727,6 +779,21 @@ export declare interface PageLayoutProps {
     style?: CSSProperties;
 }
 
+export declare type PaletteName = 'default' | 'brand' | 'indigo' | 'violet' | 'emerald' | 'teal' | 'rose' | 'coral' | 'amber' | 'ocean' | 'slate' | 'sage';
+
+export declare const pillShape: ShapePreset;
+
+export declare const playfulPreset: DesignPreset;
+
+export declare type PresetName = 'modern' | 'enterprise' | 'playful';
+
+export declare type PresetProp = PresetName | {
+    palette?: PaletteName | ColorPalette;
+    shape?: ShapeName | ShapePreset;
+    density?: DensityName | DensityPreset;
+    shadow?: ShadowName | ShadowPreset;
+};
+
 export declare interface PropDescriptor {
     /** Prop name as it appears in the component API */
     name: string;
@@ -786,7 +853,18 @@ declare interface RadiusTokens {
     radiusFull: string;
 }
 
-export declare function SearchInput({ value, onChange, placeholder, results, onResultSelect, isLoading, disabled, id, style, }: SearchInputProps): JSX_2.Element;
+/**
+ * Resolves a `PresetProp` into a flat `Partial<LucentTokens>` that can be
+ * spread over the base theme. Palette colors are fully derived via
+ * `createTheme()`, so all hover/active/subtle/text variants are included.
+ */
+export declare function resolvePreset(preset: PresetProp, theme: Theme): Partial<LucentTokens>;
+
+export declare const rosePalette: ColorPalette;
+
+export declare const roundedShape: ShapePreset;
+
+export declare function SearchInput({ value, onChange, placeholder, size, results, onResultSelect, isLoading, disabled, id, style, }: SearchInputProps): JSX_2.Element;
 
 export declare const SearchInputManifest: ComponentManifest;
 
@@ -794,6 +872,7 @@ export declare interface SearchInputProps {
     value: string;
     onChange: (value: string) => void;
     placeholder?: string;
+    size?: InputSize;
     results?: SearchResult[];
     onResultSelect?: (result: SearchResult) => void;
     isLoading?: boolean;
@@ -897,6 +976,14 @@ declare interface SemanticColorTokens {
     focusRing: string;
 }
 
+export declare type ShadowName = 'flat' | 'subtle' | 'elevated';
+
+export declare interface ShadowPreset {
+    name: string;
+    light: ShadowTokens;
+    dark: ShadowTokens;
+}
+
 declare interface ShadowTokens {
     shadowNone: string;
     shadowSm: string;
@@ -905,6 +992,15 @@ declare interface ShadowTokens {
     shadowXl: string;
 }
 
+export declare type ShapeName = 'sharp' | 'rounded' | 'pill';
+
+export declare interface ShapePreset {
+    name: string;
+    tokens: RadiusTokens;
+}
+
+export declare const sharpShape: ShapePreset;
+
 export declare function Skeleton({ variant, width, height, lines, animate, radius, style, }: SkeletonProps): JSX_2.Element;
 
 export declare const SkeletonManifest: ComponentManifest;
@@ -955,6 +1051,8 @@ declare interface SpacingTokens {
     space24: string;
 }
 
+export declare const spaciousDensity: DensityPreset;
+
 export declare function Spinner({ size, label, color }: SpinnerProps): JSX_2.Element;
 
 export declare const SpinnerManifest: ComponentManifest;
@@ -967,6 +1065,8 @@ export declare interface SpinnerProps {
 
 export declare type SpinnerSize = 'xs' | 'sm' | 'md' | 'lg';
 
+export declare const subtleShadow: ShadowPreset;
+
 export declare interface TabItem {
     value: string;
     label: ReactNode;