lucent-ui 0.27.2 → 0.29.0

package/dist/index.d.ts

@@ -113,6 +113,20 @@ export declare type BadgeSize = 'sm' | 'md';
 
 export declare type BadgeVariant = 'neutral' | 'success' | 'warning' | 'danger' | 'info' | 'accent';
 
+/**
+ * Modern Bento — the product grid standard.
+ * Layered natural shadows, balanced roundness, consistent spacing.
+ * Best for feature showcases, data dashboards, SaaS products.
+ */
+export declare const bentoPreset: DesignPreset;
+
+/**
+ * Bloom — dark-mode-native glow aesthetic.
+ * Accent-colored ambient glow, generous negative space, large radii.
+ * Best for AI interfaces, creative tools, dark-first products (Vercel/Linear style).
+ */
+export declare const bloomPreset: DesignPreset;
+
 export declare const brandPalette: ColorPalette;
 
 /**
@@ -143,6 +157,26 @@ export declare interface BreadcrumbProps {
     style?: CSSProperties;
 }
 
+/**
+ * Neo-Brutalist — the rebel.
+ * Hard offset shadows, sharp corners, tight spacing.
+ * Best for marketing sites, bold product launches, editorial.
+ */
+export declare const brutalistPreset: DesignPreset;
+
+/**
+ * Neo-Brutalist — thick solid outline + hard offset "block" shadow, 0 blur.
+ *
+ * Light mode: dark outline ring + accent-tinted offset block.
+ * Dark mode: accent-colored outline ring + accent offset block.
+ * The outline flips from dark (absorbing) to bright (emitting) —
+ * in dark mode the thick border itself becomes the light source,
+ * using the accent color instead of black.
+ *
+ * Uses `color-mix()` and CSS vars so it follows the active accent.
+ */
+export declare const brutalistShadow: ShadowPreset;
+
 export declare const Button: ForwardRefExoticComponent<ButtonProps & RefAttributes<HTMLButtonElement>>;
 
 export declare function ButtonGroup({ children, style, }: ButtonGroupProps): JSX_2.Element;
@@ -575,7 +609,7 @@ export declare interface DateRange {
     end: Date;
 }
 
-export declare function DateRangePicker({ value: controlledValue, defaultValue, onChange, placeholder, disabled, min, max, size, label, helperText, errorText, style, }: DateRangePickerProps): JSX_2.Element;
+export declare function DateRangePicker({ value: controlledValue, defaultValue, onChange, placeholder, disabled, min, max, size, label, helperText, errorText, trigger, style, }: DateRangePickerProps): JSX_2.Element;
 
 export declare interface DateRangePickerProps {
     value?: DateRange;
@@ -589,6 +623,8 @@ export declare interface DateRangePickerProps {
     label?: string;
     helperText?: string;
     errorText?: string;
+    /** Custom trigger element. When provided, replaces the default input-style button. */
+    trigger?: ReactNode;
     style?: CSSProperties;
 }
 
@@ -665,6 +701,11 @@ export declare interface DividerProps {
     style?: CSSProperties;
 }
 
+/**
+ * Elevated — light mode uses stronger drop shadows for clear lift.
+ * Dark mode shifts to "inset glow" — light radiating from inside
+ * the element, creating internal luminosity that reads as elevation.
+ */
 export declare const elevatedShadow: ShadowPreset;
 
 export declare const emeraldPalette: ColorPalette;
@@ -744,6 +785,16 @@ export declare function getAccentFg(accentHex: string): string;
  */
 export declare function getContrastText(hex: string): '#000000' | '#ffffff';
 
+/**
+ * Ambient Glow — accent-colored shadows that make elements appear
+ * to emit light. Uses `color-mix()` with `var(--lucent-accent-default)`
+ * so the glow automatically follows the active accent color.
+ *
+ * Particularly effective in dark mode where the glow reads as a
+ * bloom / light source against the dark canvas.
+ */
+export declare const glowShadow: ShadowPreset;
+
 export declare function Icon({ children, size, label, color, style }: IconProps): JSX_2.Element;
 
 export declare const IconManifest: ComponentManifest;
@@ -791,6 +842,23 @@ export declare function isValidPropDescriptor(prop: unknown): prop is PropDescri
 
 export declare const lightTokens: LucentTokens;
 
+/**
+ * Liquid Glass — Apple-inspired premium aesthetic.
+ * Extreme blur shadows, generous spacing, pill radii.
+ * Best for high-end SaaS, floating modals, mobile-first web apps.
+ */
+export declare const liquidGlassPreset: DesignPreset;
+
+/**
+ * Liquid Glass — light mode uses diffused, very large blur drops.
+ *
+ * Dark mode uses frosted light diffusion — soft white glow with an
+ * inner highlight that makes elements appear translucent, as if
+ * backlit through frosted glass. Best paired with
+ * `backdrop-filter: blur()` on the element.
+ */
+export declare const liquidGlassShadow: ShadowPreset;
+
 export declare const LUCENT_UI_VERSION = "0.1.0";
 
 declare interface LucentContextValue {
@@ -921,6 +989,13 @@ export declare interface MenuSeparatorProps {
 
 export declare type MenuSize = 'sm' | 'md' | 'lg';
 
+/**
+ * Utilitarian Minimal — print-inspired, content-first.
+ * No shadows at all — depth through borders and typography hierarchy.
+ * Best for editorial, documentation, reading-heavy products.
+ */
+export declare const minimalPreset: DesignPreset;
+
 export declare const modernPreset: DesignPreset;
 
 declare interface MotionTokens {
@@ -960,6 +1035,16 @@ export declare interface MultiSelectProps {
 
 declare type MultiSelectSize = 'sm' | 'md' | 'lg';
 
+/**
+ * Natural — light mode uses stacked multi-layer shadows for
+ * physically-accurate light falloff.
+ *
+ * Dark mode uses stacked "lit edge" layers — multiple subtle
+ * top-edge highlights at increasing intensity, creating a
+ * graduated brightness that reads as natural overhead lighting.
+ */
+export declare const naturalShadow: ShadowPreset;
+
 export declare function NavLink({ children, href, isActive, icon, disabled, inverse, onClick, as, style, }: NavLinkProps): JSX_2.Element;
 
 export declare interface NavLinkProps {
@@ -1046,6 +1131,18 @@ export declare interface NavMenuSubProps {
     children: ReactNode;
 }
 
+/**
+ * Neumorphic — light mode uses classic dual light/dark shadows
+ * for the extruded soft-UI look.
+ *
+ * Dark mode shifts to "chromatic" — offset split-color accent
+ * glow (warm-shifted on one side, cool-shifted on the other).
+ * Creates a CRT/screen-like depth that reads as physical without
+ * relying on darkening. Uses `color-mix()` so it follows the
+ * active accent automatically.
+ */
+export declare const neumorphicShadow: ShadowPreset;
+
 export declare const oceanPalette: ColorPalette;
 
 export declare function PageLayout({ children, header, sidebar, sidebarWidth, headerHeight, sidebarCollapsed, rightSidebar, rightSidebarWidth, rightSidebarCollapsed, footer, footerHeight, chromeBackground, mainStyle, style, }: PageLayoutProps): JSX_2.Element;
@@ -1083,7 +1180,7 @@ export declare const pillShape: ShapePreset;
 
 export declare const playfulPreset: DesignPreset;
 
-export declare type PresetName = 'modern' | 'enterprise' | 'playful';
+export declare type PresetName = 'modern' | 'enterprise' | 'playful' | 'liquidGlass' | 'bento' | 'brutalist' | 'terminal' | 'softUI' | 'bloom' | 'minimal';
 
 export declare type PresetProp = PresetName | {
     palette?: PaletteName | ColorPalette;
@@ -1330,7 +1427,7 @@ declare interface SemanticColorTokens {
     infoText: string;
 }
 
-export declare type ShadowName = 'flat' | 'subtle' | 'elevated';
+export declare type ShadowName = 'flat' | 'subtle' | 'elevated' | 'liquidGlass' | 'brutalist' | 'neumorphic' | 'natural' | 'glow';
 
 export declare interface ShadowPreset {
     name: string;
@@ -1389,6 +1486,13 @@ export declare interface SliderProps extends Omit<InputHTMLAttributes<HTMLInputE
 
 export declare type SliderSize = 'sm' | 'md' | 'lg';
 
+/**
+ * Soft UI — tactile and organic neumorphism.
+ * Dual-direction shadows, large radii, balanced spacing.
+ * Best for physical product controllers, IoT dashboards, niche apps.
+ */
+export declare const softUIPreset: DesignPreset;
+
 declare interface SpacingTokens {
     space0: string;
     space1: string;
@@ -1491,12 +1595,18 @@ export declare interface StackProps {
     'aria-labelledby'?: string;
 }
 
+/**
+ * Subtle — light mode uses wide, low-opacity diffused shadows.
+ * Dark mode shifts to "ambient" — an enormous, barely-visible
+ * accent-tinted glow that makes surfaces feel warm without
+ * creating visible shadow edges.
+ */
 export declare const subtleShadow: ShadowPreset;
 
 export declare interface TabItem {
     value: string;
     label: ReactNode;
-    content: ReactNode;
+    content?: ReactNode;
     disabled?: boolean;
 }
 
@@ -1552,6 +1662,13 @@ export declare type TagSize = 'sm' | 'md' | 'lg';
 
 export declare type TagVariant = 'neutral' | 'accent' | 'success' | 'warning' | 'danger' | 'info';
 
+/**
+ * Technical Mono — the dev-tool aesthetic.
+ * Glow shadows, perfectly square corners, mathematical grid spacing.
+ * Best for documentation, CLI tools, cybersecurity, developer products.
+ */
+export declare const terminalPreset: DesignPreset;
+
 declare function Text_2({ as, size, weight, color, align, lineHeight, family, truncate, children, style, ...rest }: TextProps): JSX_2.Element;
 export { Text_2 as Text }