react-component-kit-ui 0.0.0-stage → 0.1.0

package/dist/types/components/lib/forms/ModernSelect.d.ts

@@ -0,0 +1,23 @@
+import './ModernSelect.css';
+/**
+ * ModernSelect — A styled dropdown selector with a custom arrow and glassmorphism styling.
+ *
+ * @param {string} label - Input labeling title.
+ * @param {string} id - HTML ID for the select element.
+ * @param {string} name - HTML name binding.
+ * @param {Array<{label: string, value: string, disabled?: boolean}>} options - List of select options.
+ * @param {boolean} required - HTML required attribute.
+ */
+export interface ModernSelectProps {
+    label: string;
+    id: string;
+    name?: string;
+    options: Array<{
+        label: string;
+        value: string;
+        disabled?: boolean;
+    }>;
+    required?: boolean;
+}
+export declare function ModernSelect({ label, id, name, options, required }: ModernSelectProps): import("react").JSX.Element;
+export default ModernSelect;

package/dist/types/components/lib/forms/NeumorphicSwitch.d.ts

@@ -0,0 +1,17 @@
+import './NeumorphicSwitch.css';
+/**
+ * NeumorphicSwitch — A soft-UI checkbox toggle with realistic inset and outset shadow states.
+ *
+ * @param {string} label - Optional descriptive text suffix.
+ * @param {string} id - HTML ID for input linkage.
+ * @param {string} name - HTML name binding.
+ * @param {boolean} checked - Initial toggle state. Default is false.
+ */
+export interface NeumorphicSwitchProps {
+    label?: string;
+    id?: string;
+    name?: string;
+    checked?: boolean;
+}
+export declare function NeumorphicSwitch({ label, id, name, checked }: NeumorphicSwitchProps): import("react").JSX.Element;
+export default NeumorphicSwitch;

package/dist/types/components/lib/forms/OTPInput.d.ts

@@ -0,0 +1,17 @@
+import './OTPInput.css';
+/**
+ * OTPInput — A specialized input group for One-Time Password verification codes.
+ *
+ * @param {string} label - Optional grouping label title.
+ * @param {string} id - Base HTML ID for the inputs.
+ * @param {number} length - Number of OTP digits. Default is 4.
+ * @param {string} name - Base name for form submission (will be indexed).
+ */
+export interface OTPInputProps {
+    label?: string;
+    id: string;
+    length?: number;
+    name?: string;
+}
+export declare function OTPInput({ label, id, length, name }: OTPInputProps): import("react").JSX.Element;
+export default OTPInput;

package/dist/types/components/lib/forms/PasswordStrengthInput.d.ts

@@ -0,0 +1,19 @@
+import './PasswordStrengthInput.css';
+/**
+ * PasswordStrengthInput — Secure password input field with visual strength estimator bar and eye toggle.
+ *
+ * @param {string} id - HTML ID for the password input.
+ * @param {string} label - Input label text. Default is 'Password'.
+ * @param {string} name - Form field name. Default is 'password'.
+ * @param {string} placeholder - Placeholder text. Default is 'Enter secure password'.
+ * @param {boolean} required - HTML required field attribute.
+ */
+export interface PasswordStrengthInputProps {
+    id: string;
+    label?: string;
+    name?: string;
+    placeholder?: string;
+    required?: boolean;
+}
+export declare function PasswordStrengthInput({ id, label, name, placeholder, required, }: PasswordStrengthInputProps): import("react").JSX.Element;
+export default PasswordStrengthInput;

package/dist/types/components/lib/forms/PhoneCountryInput.d.ts

@@ -0,0 +1,19 @@
+import './PhoneCountryInput.css';
+/**
+ * PhoneCountryInput — Accessible phone input with country dial code selector and dark glass styling.
+ *
+ * @param {string} id - HTML ID for the phone input.
+ * @param {string} label - Input label text. Default is 'Phone Number'.
+ * @param {string} name - Form field name. Default is 'phone'.
+ * @param {string} placeholder - Phone placeholder. Default is '612 345 678'.
+ * @param {boolean} required - HTML required field attribute.
+ */
+export interface PhoneCountryInputProps {
+    id: string;
+    label?: string;
+    name?: string;
+    placeholder?: string;
+    required?: boolean;
+}
+export declare function PhoneCountryInput({ id, label, name, placeholder, required, }: PhoneCountryInputProps): import("react").JSX.Element;
+export default PhoneCountryInput;

package/dist/types/components/lib/forms/RatingStars.d.ts

@@ -0,0 +1,17 @@
+import './RatingStars.css';
+/**
+ * RatingStars — A classic star-rating input for user reviews and feedback.
+ *
+ * @param {string} name - HTML name for form submission. Default is "rating".
+ * @param {number} maxRating - Maximum number of stars. Default is 5.
+ * @param {string} idPrefix - Prefix used to generate unique IDs for radio buttons.
+ * @param {number} initialValue - Currently selected rating.
+ */
+export interface RatingStarsProps {
+    name?: string;
+    maxRating?: number;
+    idPrefix?: string;
+    initialValue?: number;
+}
+export declare function RatingStars({ name, maxRating, idPrefix, initialValue }: RatingStarsProps): import("react").JSX.Element;
+export default RatingStars;

package/dist/types/components/lib/forms/SearchReveal.d.ts

@@ -0,0 +1,15 @@
+import './SearchReveal.css';
+/**
+ * SearchReveal — A dynamic minimal search pod that expands smoothly into a full input field on hover or focus.
+ *
+ * @param {string} id - Standard HTML ID property.
+ * @param {string} placeholder - Default placeholder ("Search...").
+ * @param {string} name - Standard HTML name grouping.
+ */
+export interface SearchRevealProps {
+    id: string;
+    placeholder?: string;
+    name?: string;
+}
+export declare function SearchReveal({ id, placeholder, name }: SearchRevealProps): import("react").JSX.Element;
+export default SearchReveal;

package/dist/types/components/lib/forms/SegmentedControl.d.ts

@@ -0,0 +1,19 @@
+import './SegmentedControl.css';
+/**
+ * SegmentedControl — A horizontal group of button-like radio choices for switching views or modes.
+ *
+ * @param {string} name - Shared HTML name for the internal radio inputs.
+ * @param {Array<{label: string, value: string, checked?: boolean}>} options - Selectable segments.
+ * @param {string} idPrefix - Prefix for auto-generating input IDs.
+ */
+export interface SegmentedControlProps {
+    name: string;
+    options: Array<{
+        label: string;
+        value: string;
+        checked?: boolean;
+    }>;
+    idPrefix?: string;
+}
+export declare function SegmentedControl({ name, options, idPrefix }: SegmentedControlProps): import("react").JSX.Element;
+export default SegmentedControl;

package/dist/types/components/lib/forms/SimpleFileInput.d.ts

@@ -0,0 +1,17 @@
+import './SimpleFileInput.css';
+/**
+ * SimpleFileInput — A minimalist file upload button that masks the native browser input.
+ *
+ * @param {string} label - The text displayed on the button. Default is "Choose File".
+ * @param {string} id - HTML ID for the file input.
+ * @param {string} name - HTML name binding.
+ * @param {string} accept - Allowed file formats.
+ */
+export interface SimpleFileInputProps {
+    label?: string;
+    id: string;
+    name?: string;
+    accept?: string;
+}
+export declare function SimpleFileInput({ label, id, name, accept }: SimpleFileInputProps): import("react").JSX.Element;
+export default SimpleFileInput;

package/dist/types/components/lib/forms/StepperInput.d.ts

@@ -0,0 +1,23 @@
+import './StepperInput.css';
+/**
+ * StepperInput — A numeric input with increment and decrement buttons for precise control.
+ *
+ * @param {string} label - Optional input label.
+ * @param {string} id - HTML ID for the number input.
+ * @param {string} name - HTML name binding.
+ * @param {number} value - Initial default value. Default is 1.
+ * @param {number} min - Minimum allowed value.
+ * @param {number} max - Maximum allowed value.
+ * @param {number} step - Numeric increment step. Default is 1.
+ */
+export interface StepperInputProps {
+    label?: string;
+    id: string;
+    name?: string;
+    value?: number;
+    min?: number;
+    max?: number;
+    step?: number;
+}
+export declare function StepperInput({ label, id, name, value, min, max, step }: StepperInputProps): import("react").JSX.Element;
+export default StepperInput;

package/dist/types/components/lib/forms/TagsAutocompleteInput.d.ts

@@ -0,0 +1,19 @@
+import './TagsAutocompleteInput.css';
+/**
+ * TagsAutocompleteInput — Tag entry field with pill badges, keyboard deletion, and suggestion dropdown.
+ *
+ * @param {string} id - HTML ID for the tag input.
+ * @param {string} label - Input label. Default is 'Tags'.
+ * @param {string[]} initialTags - Pre-populated list of tags. Default is ['React', 'TypeScript'].
+ * @param {string[]} suggestions - Autocomplete candidate options.
+ * @param {string} placeholder - Input placeholder. Default is 'Add tag & press Enter...'.
+ */
+export interface TagsAutocompleteInputProps {
+    id: string;
+    label?: string;
+    initialTags?: string[];
+    suggestions?: string[];
+    placeholder?: string;
+}
+export declare function TagsAutocompleteInput({ id, label, initialTags, suggestions, placeholder, }: TagsAutocompleteInputProps): import("react").JSX.Element;
+export default TagsAutocompleteInput;

package/dist/types/components/lib/forms/index.d.ts

@@ -0,0 +1,24 @@
+export { default as AnimatedInput } from './AnimatedInput';
+export { default as ChipInput } from './ChipInput';
+export { default as ColorPickerInput } from './ColorPickerInput';
+export { default as CurrencyInput } from './CurrencyInput';
+export { default as CustomRadioGroup } from './CustomRadioGroup';
+export { default as CyberpunkCheckbox } from './CyberpunkCheckbox';
+export { default as DragDropUpload } from './DragDropUpload';
+export { default as ErrorInput } from './ErrorInput';
+export { default as FloatingPassword } from './FloatingPassword';
+export { default as FormGroupVertical } from './FormGroupVertical';
+export { default as GlassSlider } from './GlassSlider';
+export { default as GlassTextarea } from './GlassTextarea';
+export { default as ModernSelect } from './ModernSelect';
+export { default as NeumorphicSwitch } from './NeumorphicSwitch';
+export { default as OTPInput } from './OTPInput';
+export { default as RatingStars } from './RatingStars';
+export { default as SearchReveal } from './SearchReveal';
+export { default as SegmentedControl } from './SegmentedControl';
+export { default as SimpleFileInput } from './SimpleFileInput';
+export { default as StepperInput } from './StepperInput';
+export { default as GlassInlineToggleGroup } from './GlassInlineToggleGroup';
+export { default as PasswordStrengthInput } from './PasswordStrengthInput';
+export { default as PhoneCountryInput } from './PhoneCountryInput';
+export { default as TagsAutocompleteInput } from './TagsAutocompleteInput';

package/dist/types/components/lib/galaxy-scene.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Mounts the interactive 3D galaxy on a canvas. Returns a cleanup function.
+ * GPU particle shader, cursor-reactive, pauses off-screen / hidden tab, honours reduced motion.
+ */
+export declare function mountGalaxy(canvas: any, THREE: any): () => void;

package/dist/types/components/lib/layout/BentoGrid3.d.ts

@@ -0,0 +1,14 @@
+import type { ReactNode } from 'react';
+import './BentoGrid3.css';
+/**
+ * BentoGrid3 — Modern dashboard grid inspired by Bento-box layouts.
+ */
+export interface BentoGrid3Props {
+    className?: string;
+    slot1?: ReactNode;
+    slot2?: ReactNode;
+    slot3?: ReactNode;
+    slot4?: ReactNode;
+}
+export declare function BentoGrid3({ className, slot1, slot2, slot3, slot4 }: BentoGrid3Props): import("react").JSX.Element;
+export default BentoGrid3;

package/dist/types/components/lib/layout/CenterFixedBox.d.ts

@@ -0,0 +1,11 @@
+import type { ReactNode } from 'react';
+import './CenterFixedBox.css';
+/**
+ * CenterFixedBox — Absolute center box helper component.
+ */
+export interface CenterFixedBoxProps {
+    className?: string;
+    children?: ReactNode;
+}
+export declare function CenterFixedBox({ className, children }: CenterFixedBoxProps): import("react").JSX.Element;
+export default CenterFixedBox;

package/dist/types/components/lib/layout/CenteredContainer.d.ts

@@ -0,0 +1,27 @@
+import type { ReactNode } from 'react';
+import './CenteredContainer.css';
+/**
+ * CenteredContainer — A responsive centered container with configurable max-width.
+ *
+ * Provides consistent horizontal padding and centers content within a max-width constraint.
+ * Uses the global container token for consistency across the library.
+ *
+ * @param {string} maxWidth - Maximum width of the container. Default: '1200px'.
+ * @param {string} padding - Horizontal padding on each side. Default: '1.5rem'.
+ * @param {string} className - Additional CSS class to apply.
+ *
+ * @example
+ * ```react
+ * <CenteredContainer maxWidth="900px">
+ *   <p>Centered content</p>
+ * </CenteredContainer>
+ * ```
+ */
+export interface CenteredContainerProps {
+    maxWidth?: string;
+    padding?: string;
+    className?: string;
+    children?: ReactNode;
+}
+export declare function CenteredContainer({ maxWidth, padding, className, children }: CenteredContainerProps): import("react").JSX.Element;
+export default CenteredContainer;

package/dist/types/components/lib/layout/ClusterHorizontal.d.ts

@@ -0,0 +1,13 @@
+import type { ReactNode } from 'react';
+import './ClusterHorizontal.css';
+/**
+ * ClusterHorizontal — Auto-wrapping flex row for buttons, badges, or list items.
+ */
+export interface ClusterHorizontalProps {
+    gap?: string;
+    align?: 'flex-start' | 'center' | 'flex-end';
+    className?: string;
+    children?: ReactNode;
+}
+export declare function ClusterHorizontal({ gap, align, className, children }: ClusterHorizontalProps): import("react").JSX.Element;
+export default ClusterHorizontal;

package/dist/types/components/lib/layout/DiagonalSectionDivider.d.ts

@@ -0,0 +1,17 @@
+import './DiagonalSectionDivider.css';
+/**
+ * DiagonalSectionDivider — Angled SVG/clip-path section divider creating fluid diagonal page transitions.
+ *
+ * @param {'top' | 'bottom'} position - Attachment position. Default is 'bottom'.
+ * @param {'left-to-right' | 'right-to-left'} direction - Slant angle direction. Default is 'left-to-right'.
+ * @param {string} height - Height of the diagonal incline in pixels. Default is '60px'.
+ * @param {string} fillColor - Fill color for the divider polygon. Default is '#050505'.
+ */
+export interface DiagonalSectionDividerProps {
+    position?: 'top' | 'bottom';
+    direction?: 'left-to-right' | 'right-to-left';
+    height?: string;
+    fillColor?: string;
+}
+export declare function DiagonalSectionDivider({ position, direction, height, fillColor, }: DiagonalSectionDividerProps): import("react").JSX.Element;
+export default DiagonalSectionDivider;

package/dist/types/components/lib/layout/FeatureHero.d.ts

@@ -0,0 +1,35 @@
+import type { ReactNode } from 'react';
+import './FeatureHero.css';
+/**
+ * FeatureHero — A visually striking hero section with animated gradient background and glassmorphism overlay.
+ *
+ * Features a full-screen hero with subtle gradient background, glass-effect card overlay,
+ * and customizable title, subtitle, and action slots. Designed for landing pages and
+ * product showcase sections.
+ *
+ * @param {string} title - Main headline text. Default: 'Experience the Next Dimension of Design'.
+ * @param {string} subtitle - Supporting description text. Default: 'Build stunning interfaces faster than ever with our premium component ecosystem.'.
+ * @param {string} gradientFrom - Start color of the background gradient. Default: 'rgba(99,102,241,0.15)'.
+ * @param {string} gradientTo - End color of the background gradient. Default: 'transparent'.
+ * @param {string} className - Additional CSS class to apply.
+ *
+ * @example
+ * ```react
+ * <FeatureHero
+ *   title="Ship Faster with Premium Components"
+ *   subtitle="200+ production-ready UI components for React."
+ * >
+ *   <a href="/docs">Browse Components</a>
+ * </FeatureHero>
+ * ```
+ */
+export interface FeatureHeroProps {
+    title?: string;
+    subtitle?: string;
+    gradientFrom?: string;
+    gradientTo?: string;
+    className?: string;
+    children?: ReactNode;
+}
+export declare function FeatureHero({ title, subtitle, gradientFrom, gradientTo, className, children }: FeatureHeroProps): import("react").JSX.Element;
+export default FeatureHero;

package/dist/types/components/lib/layout/FooterCenteredMinimal.d.ts

@@ -0,0 +1,23 @@
+import type { ReactNode } from 'react';
+import './FooterCenteredMinimal.css';
+/**
+ * FooterCenteredMinimal — A minimal centered footer with copyright text.
+ *
+ * Displays a simple, clean footer with a logo slot and copyright text.
+ * Suitable for landing pages, documentation sites, and minimal layouts.
+ *
+ * @param {string} copyright - Copyright text. Default: '© 2026 Built with React Components Kit.'.
+ * @param {string} className - Additional CSS class to apply.
+ *
+ * @example
+ * ```react
+ * <FooterCenteredMinimal copyright="© 2026 MyCompany. All rights reserved." />
+ * ```
+ */
+export interface FooterCenteredMinimalProps {
+    copyright?: string;
+    className?: string;
+    logo?: ReactNode;
+}
+export declare function FooterCenteredMinimal({ copyright, className, logo }: FooterCenteredMinimalProps): import("react").JSX.Element;
+export default FooterCenteredMinimal;

package/dist/types/components/lib/layout/FullBleedSection.d.ts

@@ -0,0 +1,11 @@
+import type { ReactNode } from 'react';
+import './FullBleedSection.css';
+/**
+ * FullBleedSection — Section that breaks out of the container to hit viewport edges.
+ */
+export interface FullBleedSectionProps {
+    className?: string;
+    children?: ReactNode;
+}
+export declare function FullBleedSection({ className, children }: FullBleedSectionProps): import("react").JSX.Element;
+export default FullBleedSection;

package/dist/types/components/lib/layout/GalleryGrid4.d.ts

@@ -0,0 +1,11 @@
+import type { ReactNode } from 'react';
+import './GalleryGrid4.css';
+/**
+ * GalleryGrid4 — 4-Column aspect ratio grid for visual galleries and photos.
+ */
+export interface GalleryGrid4Props {
+    className?: string;
+    children?: ReactNode;
+}
+export declare function GalleryGrid4({ className, children }: GalleryGrid4Props): import("react").JSX.Element;
+export default GalleryGrid4;

package/dist/types/components/lib/layout/GlassCardGrid.d.ts

@@ -0,0 +1,16 @@
+import type { ReactNode } from 'react';
+import './GlassCardGrid.css';
+/**
+ * GlassCardGrid — A responsive grid specifically designed for card layouts with auto-fill columns.
+ *
+ * @param {string} minWidth - Minimum width of columns (default: '300px').
+ * @param {string} gap - Gap between items (default: '2rem').
+ */
+export interface GlassCardGridProps {
+    minWidth?: string;
+    gap?: string;
+    className?: string;
+    children?: ReactNode;
+}
+export declare function GlassCardGrid({ minWidth, gap, className, children }: GlassCardGridProps): import("react").JSX.Element;
+export default GlassCardGrid;

package/dist/types/components/lib/layout/GlassSectionHeader.d.ts

@@ -0,0 +1,30 @@
+import './GlassSectionHeader.css';
+/**
+ * GlassSectionHeader — A section header with glassmorphism styling and accent underline.
+ *
+ * Displays a title with an optional subtitle and a decorative accent line.
+ * The accent line uses the primary color from design tokens.
+ * Suitable for introducing new sections on landing pages or documentation.
+ *
+ * @param {string} title - Main heading text. Required.
+ * @param {string} subtitle - Supporting description. Optional.
+ * @param {'left' | 'center'} align - Text alignment. Default: 'left'.
+ * @param {string} className - Additional CSS class to apply.
+ *
+ * @example
+ * ```react
+ * <GlassSectionHeader
+ *   title="Why React Components Kit"
+ *   subtitle="Build faster with premium components"
+ *   align="center"
+ * />
+ * ```
+ */
+export interface GlassSectionHeaderProps {
+    title: string;
+    subtitle?: string;
+    align?: 'left' | 'center';
+    className?: string;
+}
+export declare function GlassSectionHeader({ title, subtitle, align, className }: GlassSectionHeaderProps): import("react").JSX.Element;
+export default GlassSectionHeader;

package/dist/types/components/lib/layout/HolyGrailGrid.d.ts

@@ -0,0 +1,23 @@
+import type { ReactNode } from 'react';
+import './HolyGrailGrid.css';
+/**
+ * HolyGrailGrid — Production-grade CSS grid layout container with sticky header, dual sidebars, fluid content, and footer.
+ *
+ * @param {string} leftWidth - Left sidebar width. Default is '240px'.
+ * @param {string} rightWidth - Right sidebar width. Default is '220px'.
+ * @param {string} gap - Spacing gap between grid regions. Default is '1.5rem'.
+ * @param {string} className - Optional CSS class.
+ */
+export interface HolyGrailGridProps {
+    leftWidth?: string;
+    rightWidth?: string;
+    gap?: string;
+    className?: string;
+    children?: ReactNode;
+    header?: ReactNode;
+    left?: ReactNode;
+    right?: ReactNode;
+    footer?: ReactNode;
+}
+export declare function HolyGrailGrid({ leftWidth, rightWidth, gap, className, children, header, left, right, footer }: HolyGrailGridProps): import("react").JSX.Element;
+export default HolyGrailGrid;

package/dist/types/components/lib/layout/LandingSectionSplit.d.ts

@@ -0,0 +1,14 @@
+import type { ReactNode } from 'react';
+import './LandingSectionSplit.css';
+/**
+ * LandingSectionSplit — Landing page section with text on one side and a media container on the other.
+ */
+export interface LandingSectionSplitProps {
+    title?: string;
+    subtitle?: string;
+    className?: string;
+    actions?: ReactNode;
+    media?: ReactNode;
+}
+export declare function LandingSectionSplit({ title, subtitle, className, actions, media }: LandingSectionSplitProps): import("react").JSX.Element;
+export default LandingSectionSplit;

package/dist/types/components/lib/layout/MasonryGrid.d.ts

@@ -0,0 +1,13 @@
+import type { ReactNode } from 'react';
+import './MasonryGrid.css';
+/**
+ * MasonryGrid — A CSS-based masonry layout for items of varying heights.
+ */
+export interface MasonryGridProps {
+    columns?: number;
+    gap?: string;
+    className?: string;
+    children?: ReactNode;
+}
+export declare function MasonryGrid({ columns, gap, className, children }: MasonryGridProps): import("react").JSX.Element;
+export default MasonryGrid;

package/dist/types/components/lib/layout/MinimalFooterGrid.d.ts

@@ -0,0 +1,10 @@
+import './MinimalFooterGrid.css';
+/**
+ * MinimalFooterGrid — Multi-column grid footer for project links and brand info.
+ */
+export interface MinimalFooterGridProps {
+    brandName?: string;
+    className?: string;
+}
+export declare function MinimalFooterGrid({ brandName, className }: MinimalFooterGridProps): import("react").JSX.Element;
+export default MinimalFooterGrid;

package/dist/types/components/lib/layout/ScrollSnapSection.d.ts

@@ -0,0 +1,12 @@
+import type { ReactNode } from 'react';
+import './ScrollSnapSection.css';
+/**
+ * ScrollSnapSection — Layout wrapper that snaps sections to the full viewport height.
+ */
+export interface ScrollSnapSectionProps {
+    height?: string;
+    className?: string;
+    children?: ReactNode;
+}
+export declare function ScrollSnapSection({ height, className, children }: ScrollSnapSectionProps): import("react").JSX.Element;
+export default ScrollSnapSection;

package/dist/types/components/lib/layout/SectionDividerText.d.ts

@@ -0,0 +1,23 @@
+import type { ReactNode } from 'react';
+import './SectionDividerText.css';
+/**
+ * SectionDividerText — A text-based section divider with decorative lines on each side.
+ *
+ * Displays uppercase text centered between two horizontal lines. Ideal for separating
+ * content sections on landing pages or documentation pages.
+ *
+ * @param {string} color - Text and line color using CSS color value. Default: 'var(--c-text-3)'.
+ * @param {string} fontSize - Size of the divider text. Default: '0.75rem'.
+ *
+ * @example
+ * ```react
+ * <SectionDividerText>Features</SectionDividerText>
+ * ```
+ */
+export interface SectionDividerTextProps {
+    color?: string;
+    fontSize?: string;
+    children?: ReactNode;
+}
+export declare function SectionDividerText({ color, fontSize, children }: SectionDividerTextProps): import("react").JSX.Element;
+export default SectionDividerText;

package/dist/types/components/lib/layout/SidebarLayoutWrapper.d.ts

@@ -0,0 +1,33 @@
+import type { ReactNode } from 'react';
+import './SidebarLayoutWrapper.css';
+/**
+ * SidebarLayoutWrapper — A two-column layout with a sidebar and main content area.
+ *
+ * Creates a full-height page layout with a fixed-width sidebar column and a flexible main column.
+ * Stacks vertically on mobile screens (below 768px). Uses named slots for sidebar and main content.
+ *
+ * @param {string} sidebarWidth - Width of the sidebar column. Default: '280px'.
+ * @param {string} breakpoint - Screen width at which the layout stacks vertically. Default: '768px'.
+ * @param {string} className - Additional CSS class to apply.
+ *
+ * @example
+ * ```react
+ * <SidebarLayoutWrapper sidebarWidth="260px">
+ *   <div slot="sidebar">
+ *     <nav>Navigation links</nav>
+ *   </div>
+ *   <div slot="main">
+ *     <h1>Main content</h1>
+ *   </div>
+ * </SidebarLayoutWrapper>
+ * ```
+ */
+export interface SidebarLayoutWrapperProps {
+    sidebarWidth?: string;
+    breakpoint?: string;
+    className?: string;
+    sidebar?: ReactNode;
+    main?: ReactNode;
+}
+export declare function SidebarLayoutWrapper({ sidebarWidth, breakpoint, className, sidebar, main }: SidebarLayoutWrapperProps): import("react").JSX.Element;
+export default SidebarLayoutWrapper;

package/dist/types/components/lib/layout/SplitScreenLayout.d.ts

@@ -0,0 +1,12 @@
+import type { ReactNode } from 'react';
+import './SplitScreenLayout.css';
+/**
+ * SplitScreenLayout — A layout divided into two equal halves, perfect for landing pages.
+ */
+export interface SplitScreenLayoutProps {
+    className?: string;
+    left?: ReactNode;
+    right?: ReactNode;
+}
+export declare function SplitScreenLayout({ className, left, right }: SplitScreenLayoutProps): import("react").JSX.Element;
+export default SplitScreenLayout;

package/dist/types/components/lib/layout/StepLayoutVertical.d.ts

@@ -0,0 +1,9 @@
+import './StepLayoutVertical.css';
+/**
+ * StepLayoutVertical — Vertical Progress Steps with space for detailed descriptions.
+ */
+export interface StepLayoutVerticalProps {
+    className?: string;
+}
+export declare function StepLayoutVertical({ className }: StepLayoutVerticalProps): import("react").JSX.Element;
+export default StepLayoutVertical;