@mks2508/sidebar-headless 0.1.0 → 0.2.1
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/CHANGELOG.md +126 -0
- package/LICENSE +21 -21
- package/README.md +652 -120
- package/dist/MobileOptimizations.css +570 -0
- package/dist/index.cjs +53167 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.css +911 -237
- package/dist/index.css.map +1 -1
- package/dist/index.d.cts +578 -6
- package/dist/index.d.ts +578 -6
- package/dist/index.js +9252 -667
- package/dist/index.js.map +1 -1
- package/dist/tooltip-keyframes.css +329 -0
- package/package.json +106 -99
package/dist/index.d.cts
CHANGED
|
@@ -1,12 +1,19 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
2
|
import * as react from 'react';
|
|
3
|
-
import { ReactNode, CSSProperties, ElementType, ComponentType, RefObject, MouseEvent } from 'react';
|
|
4
|
-
import
|
|
3
|
+
import react__default, { ReactNode, CSSProperties, ElementType, ComponentType, RefObject, MouseEvent as MouseEvent$1, HTMLAttributes, ComponentPropsWithoutRef } from 'react';
|
|
4
|
+
import * as class_variance_authority_types from 'class-variance-authority/types';
|
|
5
|
+
import { VariantProps } from 'class-variance-authority';
|
|
5
6
|
import { ClassValue } from 'clsx';
|
|
6
7
|
|
|
7
|
-
|
|
8
|
+
/**
|
|
9
|
+
* Glass configuration interface (local definition to avoid external dependency issues)
|
|
10
|
+
* Made flexible to handle all liquid glass configuration properties
|
|
11
|
+
*/
|
|
12
|
+
interface SidebarLiquidConfig {
|
|
8
13
|
/** Habilitar chromatic aberration (Phase 2) - solo para tooltips por defecto */
|
|
9
14
|
enableChromaticAberration?: boolean;
|
|
15
|
+
/** Allow any property to avoid external dependency issues */
|
|
16
|
+
[key: string]: any;
|
|
10
17
|
}
|
|
11
18
|
|
|
12
19
|
/**
|
|
@@ -1106,7 +1113,7 @@ interface SidebarSubLinkProps {
|
|
|
1106
1113
|
LinkComponent?: ComponentType<any>;
|
|
1107
1114
|
linkProps?: Record<string, any>;
|
|
1108
1115
|
className?: string;
|
|
1109
|
-
onClick?: (e: MouseEvent<HTMLAnchorElement>) => void;
|
|
1116
|
+
onClick?: (e: MouseEvent$1<HTMLAnchorElement>) => void;
|
|
1110
1117
|
animationOrder?: number;
|
|
1111
1118
|
animationState?: 'entering' | 'leaving' | 'static';
|
|
1112
1119
|
style?: CSSProperties;
|
|
@@ -1253,7 +1260,7 @@ interface UseSidebarIndicatorReturn {
|
|
|
1253
1260
|
/** Label del item hovered (para tooltip simple) */
|
|
1254
1261
|
hoveredLabel: string | null;
|
|
1255
1262
|
/** Manejador de evento mousemove */
|
|
1256
|
-
handleMouseMove: (e: MouseEvent<HTMLDivElement>) => void;
|
|
1263
|
+
handleMouseMove: (e: MouseEvent$1<HTMLDivElement>) => void;
|
|
1257
1264
|
/** Manejador de evento mouseenter */
|
|
1258
1265
|
handleMouseEnter: () => void;
|
|
1259
1266
|
/** Manejador de evento mouseleave */
|
|
@@ -1658,6 +1665,571 @@ declare function generateSidebarStyles({ dimensions, animations, collapseMode, h
|
|
|
1658
1665
|
*/
|
|
1659
1666
|
declare function generateIndicatorStyles(isVisible: boolean): React.CSSProperties;
|
|
1660
1667
|
|
|
1668
|
+
/**
|
|
1669
|
+
* Visual variant of the navigation bar
|
|
1670
|
+
* @enum {string}
|
|
1671
|
+
* @description Defines the visual style of the bottom navigation
|
|
1672
|
+
*/
|
|
1673
|
+
declare enum NavVariant {
|
|
1674
|
+
/** Glassmorphism effect with blur and transparency */
|
|
1675
|
+
GLASS = "glass",
|
|
1676
|
+
/** Solid background without transparency */
|
|
1677
|
+
SOLID = "solid",
|
|
1678
|
+
/** Transparent background - headless mode for custom styling */
|
|
1679
|
+
HEADLESS = "headless"
|
|
1680
|
+
}
|
|
1681
|
+
/**
|
|
1682
|
+
* Size preset for the navigation bar
|
|
1683
|
+
* @enum {string}
|
|
1684
|
+
* @description Controls the overall size and spacing of navigation elements
|
|
1685
|
+
*/
|
|
1686
|
+
declare enum NavSize {
|
|
1687
|
+
/** Compact size - 56px height, smaller touch targets */
|
|
1688
|
+
SMALL = "sm",
|
|
1689
|
+
/** Default size - 72px height, optimal touch targets */
|
|
1690
|
+
MEDIUM = "md",
|
|
1691
|
+
/** Large size - 88px height, larger touch targets */
|
|
1692
|
+
LARGE = "lg"
|
|
1693
|
+
}
|
|
1694
|
+
/**
|
|
1695
|
+
* Position of the label relative to the icon
|
|
1696
|
+
* @enum {string}
|
|
1697
|
+
* @description Determines how labels are displayed in navigation items
|
|
1698
|
+
*/
|
|
1699
|
+
declare enum LabelPosition {
|
|
1700
|
+
/** Label below the icon (default mobile pattern) */
|
|
1701
|
+
BELOW = "below",
|
|
1702
|
+
/** Label beside the icon (horizontal layout) */
|
|
1703
|
+
BESIDE = "beside",
|
|
1704
|
+
/** No label, icon only */
|
|
1705
|
+
HIDDEN = "hidden"
|
|
1706
|
+
}
|
|
1707
|
+
/**
|
|
1708
|
+
* Animation type for navigation interactions
|
|
1709
|
+
* @enum {string}
|
|
1710
|
+
* @description Defines the animation behavior for navigation items
|
|
1711
|
+
*/
|
|
1712
|
+
declare enum AnimationType {
|
|
1713
|
+
/** Spring animation for natural feel */
|
|
1714
|
+
SPRING = "spring",
|
|
1715
|
+
/** Tween animation for precise timing */
|
|
1716
|
+
TWEEN = "tween",
|
|
1717
|
+
/** No animation */
|
|
1718
|
+
NONE = "none"
|
|
1719
|
+
}
|
|
1720
|
+
/**
|
|
1721
|
+
* State of a navigation item
|
|
1722
|
+
* @enum {string}
|
|
1723
|
+
* @description Represents the current state of a navigation item
|
|
1724
|
+
*/
|
|
1725
|
+
declare enum NavItemState {
|
|
1726
|
+
/** Default inactive state */
|
|
1727
|
+
INACTIVE = "inactive",
|
|
1728
|
+
/** Currently selected/active item */
|
|
1729
|
+
ACTIVE = "active",
|
|
1730
|
+
/** Disabled and non-interactive */
|
|
1731
|
+
DISABLED = "disabled"
|
|
1732
|
+
}
|
|
1733
|
+
/**
|
|
1734
|
+
* Icon size preset
|
|
1735
|
+
* @enum {number}
|
|
1736
|
+
* @description Standard icon sizes in pixels
|
|
1737
|
+
*/
|
|
1738
|
+
declare enum IconSize {
|
|
1739
|
+
/** Small icons - 18px */
|
|
1740
|
+
SMALL = 18,
|
|
1741
|
+
/** Medium icons - 24px (default) */
|
|
1742
|
+
MEDIUM = 24,
|
|
1743
|
+
/** Large icons - 28px */
|
|
1744
|
+
LARGE = 28
|
|
1745
|
+
}
|
|
1746
|
+
/**
|
|
1747
|
+
* Z-index levels for layering
|
|
1748
|
+
* @enum {number}
|
|
1749
|
+
* @description Consistent z-index values for proper stacking
|
|
1750
|
+
*/
|
|
1751
|
+
declare enum ZIndexLevel {
|
|
1752
|
+
/** Below default content */
|
|
1753
|
+
BELOW = 40,
|
|
1754
|
+
/** Default navigation level */
|
|
1755
|
+
DEFAULT = 50,
|
|
1756
|
+
/** Above most content */
|
|
1757
|
+
ELEVATED = 60,
|
|
1758
|
+
/** Maximum elevation */
|
|
1759
|
+
MAX = 100
|
|
1760
|
+
}
|
|
1761
|
+
/**
|
|
1762
|
+
* Blur intensity for glassmorphism
|
|
1763
|
+
* @enum {number}
|
|
1764
|
+
* @description Backdrop blur values in pixels
|
|
1765
|
+
*/
|
|
1766
|
+
declare enum BlurIntensity {
|
|
1767
|
+
/** Subtle blur - 8px */
|
|
1768
|
+
LIGHT = 8,
|
|
1769
|
+
/** Standard blur - 20px (default) */
|
|
1770
|
+
MEDIUM = 20,
|
|
1771
|
+
/** Heavy blur - 40px */
|
|
1772
|
+
HEAVY = 40
|
|
1773
|
+
}
|
|
1774
|
+
/**
|
|
1775
|
+
* Border radius preset for navigation
|
|
1776
|
+
* @enum {string}
|
|
1777
|
+
* @description Defines the border radius style
|
|
1778
|
+
*/
|
|
1779
|
+
declare enum NavBorderRadius {
|
|
1780
|
+
/** No border radius */
|
|
1781
|
+
NONE = "none",
|
|
1782
|
+
/** Small radius - 8px */
|
|
1783
|
+
SMALL = "sm",
|
|
1784
|
+
/** Medium radius - 16px (default) */
|
|
1785
|
+
MEDIUM = "md",
|
|
1786
|
+
/** Large radius - 24px */
|
|
1787
|
+
LARGE = "lg",
|
|
1788
|
+
/** Extra large radius - 32px */
|
|
1789
|
+
EXTRA_LARGE = "xl",
|
|
1790
|
+
/** Full rounded (pill shape) */
|
|
1791
|
+
FULL = "full"
|
|
1792
|
+
}
|
|
1793
|
+
/**
|
|
1794
|
+
* Gap spacing preset for items
|
|
1795
|
+
* @enum {number}
|
|
1796
|
+
* @description Standard gap values in rem units
|
|
1797
|
+
*/
|
|
1798
|
+
declare enum NavGap {
|
|
1799
|
+
/** No gap */
|
|
1800
|
+
NONE = 0,
|
|
1801
|
+
/** Extra small - 0.25rem (4px) */
|
|
1802
|
+
EXTRA_SMALL = 0.25,
|
|
1803
|
+
/** Small - 0.5rem (8px) */
|
|
1804
|
+
SMALL = 0.5,
|
|
1805
|
+
/** Medium - 1rem (16px) */
|
|
1806
|
+
MEDIUM = 1,
|
|
1807
|
+
/** Large - 1.5rem (24px) */
|
|
1808
|
+
LARGE = 1.5,
|
|
1809
|
+
/** Extra large - 2rem (32px) */
|
|
1810
|
+
EXTRA_LARGE = 2
|
|
1811
|
+
}
|
|
1812
|
+
/**
|
|
1813
|
+
* Spring animation configuration
|
|
1814
|
+
* @interface SpringConfig
|
|
1815
|
+
* @description Configuration for spring-based animations
|
|
1816
|
+
*/
|
|
1817
|
+
interface SpringConfig {
|
|
1818
|
+
/** Spring stiffness (default: 400) */
|
|
1819
|
+
stiffness: number;
|
|
1820
|
+
/** Damping ratio (default: 30) */
|
|
1821
|
+
damping: number;
|
|
1822
|
+
/** Mass of the animated element (default: 1) */
|
|
1823
|
+
mass: number;
|
|
1824
|
+
}
|
|
1825
|
+
/**
|
|
1826
|
+
* Tween animation configuration
|
|
1827
|
+
* @interface TweenConfig
|
|
1828
|
+
* @description Configuration for tween-based animations
|
|
1829
|
+
*/
|
|
1830
|
+
interface TweenConfig {
|
|
1831
|
+
/** Duration in seconds */
|
|
1832
|
+
duration: number;
|
|
1833
|
+
/** Easing function name */
|
|
1834
|
+
ease: "linear" | "easeIn" | "easeOut" | "easeInOut";
|
|
1835
|
+
}
|
|
1836
|
+
/**
|
|
1837
|
+
* Animation configuration union type
|
|
1838
|
+
* @interface AnimationConfig
|
|
1839
|
+
* @description Complete animation configuration options
|
|
1840
|
+
*/
|
|
1841
|
+
interface AnimationConfig {
|
|
1842
|
+
/** Type of animation to use */
|
|
1843
|
+
type: AnimationType;
|
|
1844
|
+
/** Spring configuration (when type is SPRING) */
|
|
1845
|
+
spring?: SpringConfig;
|
|
1846
|
+
/** Tween configuration (when type is TWEEN) */
|
|
1847
|
+
tween?: TweenConfig;
|
|
1848
|
+
/** Scale factor for press animation */
|
|
1849
|
+
pressScale?: number;
|
|
1850
|
+
/** Scale factor for hover animation */
|
|
1851
|
+
hoverScale?: number;
|
|
1852
|
+
}
|
|
1853
|
+
/**
|
|
1854
|
+
* Glassmorphism style configuration
|
|
1855
|
+
* @interface GlassConfig
|
|
1856
|
+
* @description Configuration for glassmorphism visual effects
|
|
1857
|
+
*/
|
|
1858
|
+
interface GlassConfig {
|
|
1859
|
+
/** Blur intensity in pixels */
|
|
1860
|
+
blur: BlurIntensity | number;
|
|
1861
|
+
/** Saturation percentage (100-200) */
|
|
1862
|
+
saturation: number;
|
|
1863
|
+
/** Background opacity (0-1) */
|
|
1864
|
+
opacity: number;
|
|
1865
|
+
/** Border opacity (0-1) */
|
|
1866
|
+
borderOpacity: number;
|
|
1867
|
+
}
|
|
1868
|
+
/**
|
|
1869
|
+
* Base props shared by all MobileBottomNav components
|
|
1870
|
+
* @interface BaseNavProps
|
|
1871
|
+
* @description Common properties for navigation components
|
|
1872
|
+
*/
|
|
1873
|
+
interface BaseNavProps {
|
|
1874
|
+
/** Additional CSS classes */
|
|
1875
|
+
className?: string;
|
|
1876
|
+
/** Inline styles */
|
|
1877
|
+
style?: react__default.CSSProperties;
|
|
1878
|
+
/** Test ID for testing */
|
|
1879
|
+
"data-testid"?: string;
|
|
1880
|
+
}
|
|
1881
|
+
/**
|
|
1882
|
+
* Motion-specific props for components using Framer Motion
|
|
1883
|
+
* @interface MotionProps
|
|
1884
|
+
* @description Props that are specific to Framer Motion components
|
|
1885
|
+
*/
|
|
1886
|
+
interface MotionProps {
|
|
1887
|
+
onDrag?: (event: MouseEvent | TouchEvent | PointerEvent, info: any) => void;
|
|
1888
|
+
onDragStart?: (event: MouseEvent | TouchEvent | PointerEvent, info: any) => void;
|
|
1889
|
+
onDragEnd?: (event: MouseEvent | TouchEvent | PointerEvent, info: any) => void;
|
|
1890
|
+
drag?: boolean | "x" | "y";
|
|
1891
|
+
dragConstraints?: any;
|
|
1892
|
+
dragMomentum?: boolean;
|
|
1893
|
+
dragElastic?: boolean;
|
|
1894
|
+
dragPropagation?: boolean;
|
|
1895
|
+
dragTransition?: any;
|
|
1896
|
+
whileTap?: any;
|
|
1897
|
+
whileHover?: any;
|
|
1898
|
+
animate?: any;
|
|
1899
|
+
initial?: any;
|
|
1900
|
+
exit?: any;
|
|
1901
|
+
transition?: any;
|
|
1902
|
+
}
|
|
1903
|
+
/**
|
|
1904
|
+
* Root component props
|
|
1905
|
+
* @interface RootProps
|
|
1906
|
+
* @description Properties for the MobileBottomNav.Root component
|
|
1907
|
+
*/
|
|
1908
|
+
interface RootProps extends BaseNavProps, Omit<HTMLAttributes<HTMLElement>, "className" | "style" | keyof MotionProps> {
|
|
1909
|
+
/** Child components (NavList, custom content) */
|
|
1910
|
+
children: ReactNode;
|
|
1911
|
+
/** Visual variant of the navigation */
|
|
1912
|
+
variant?: NavVariant;
|
|
1913
|
+
/** Size preset */
|
|
1914
|
+
size?: NavSize;
|
|
1915
|
+
/** Z-index level */
|
|
1916
|
+
zIndex?: ZIndexLevel | number;
|
|
1917
|
+
/** Show/hide the navigation */
|
|
1918
|
+
visible?: boolean;
|
|
1919
|
+
/** Glassmorphism configuration (only for GLASS variant) */
|
|
1920
|
+
glassConfig?: Partial<GlassConfig>;
|
|
1921
|
+
/** Animation configuration */
|
|
1922
|
+
animationConfig?: Partial<AnimationConfig>;
|
|
1923
|
+
/** ARIA label for accessibility */
|
|
1924
|
+
"aria-label"?: string;
|
|
1925
|
+
/** Use full width container (adds max-width and centers) */
|
|
1926
|
+
full?: boolean;
|
|
1927
|
+
/** Border radius preset or custom value */
|
|
1928
|
+
rounded?: NavBorderRadius | number;
|
|
1929
|
+
/** Gap between nav items (uses NavGap enum or custom rem value) */
|
|
1930
|
+
gap?: NavGap | number;
|
|
1931
|
+
}
|
|
1932
|
+
/**
|
|
1933
|
+
* Props for the NavList component
|
|
1934
|
+
* @interface NavListProps
|
|
1935
|
+
* @extends {BaseNavProps}
|
|
1936
|
+
* @description Configuration for the navigation items container
|
|
1937
|
+
*/
|
|
1938
|
+
interface NavListProps extends BaseNavProps, Omit<ComponentPropsWithoutRef<"ul">, "className" | "style"> {
|
|
1939
|
+
/** NavItem children */
|
|
1940
|
+
children: ReactNode;
|
|
1941
|
+
/** Gap between items (in rem or px) */
|
|
1942
|
+
gap?: number;
|
|
1943
|
+
/** Justify content alignment */
|
|
1944
|
+
justify?: "start" | "center" | "end" | "around" | "between" | "evenly";
|
|
1945
|
+
}
|
|
1946
|
+
/**
|
|
1947
|
+
* Props for the NavItem component
|
|
1948
|
+
* @interface NavItemProps
|
|
1949
|
+
* @extends {BaseNavProps}
|
|
1950
|
+
* @extends {Omit<ComponentPropsWithoutRef<"button">, "className" | "style" | "children">}
|
|
1951
|
+
* @description Configuration for individual navigation items
|
|
1952
|
+
*/
|
|
1953
|
+
interface NavItemProps extends BaseNavProps, Omit<ComponentPropsWithoutRef<"button">, "className" | "style" | "children"> {
|
|
1954
|
+
/** Icon element to display */
|
|
1955
|
+
icon: ReactNode;
|
|
1956
|
+
/** Label text */
|
|
1957
|
+
label: string;
|
|
1958
|
+
/** Current state of the item */
|
|
1959
|
+
state?: NavItemState;
|
|
1960
|
+
/** Label position relative to icon */
|
|
1961
|
+
labelPosition?: LabelPosition;
|
|
1962
|
+
/** Click handler */
|
|
1963
|
+
onClick?: () => void;
|
|
1964
|
+
/** Href for navigation (renders as anchor) */
|
|
1965
|
+
href?: string;
|
|
1966
|
+
/** Icon size */
|
|
1967
|
+
iconSize?: IconSize | number;
|
|
1968
|
+
/** Show badge indicator */
|
|
1969
|
+
badge?: ReactNode;
|
|
1970
|
+
/** Accessible name override */
|
|
1971
|
+
"aria-label"?: string;
|
|
1972
|
+
}
|
|
1973
|
+
/**
|
|
1974
|
+
* Navigation context value
|
|
1975
|
+
* @interface NavContextValue
|
|
1976
|
+
* @description Shared context for navigation components
|
|
1977
|
+
*/
|
|
1978
|
+
interface NavContextValue {
|
|
1979
|
+
/** Current variant */
|
|
1980
|
+
variant: NavVariant;
|
|
1981
|
+
/** Current size */
|
|
1982
|
+
size: NavSize;
|
|
1983
|
+
/** Animation configuration */
|
|
1984
|
+
animationConfig: AnimationConfig;
|
|
1985
|
+
/** Gap between items (inherited from Root) */
|
|
1986
|
+
gap?: NavGap | number;
|
|
1987
|
+
/** Currently active item ID */
|
|
1988
|
+
activeItemId?: string;
|
|
1989
|
+
/** Callback to set active item */
|
|
1990
|
+
setActiveItem?: (id: string) => void;
|
|
1991
|
+
}
|
|
1992
|
+
/**
|
|
1993
|
+
* Default spring animation configuration
|
|
1994
|
+
* @constant
|
|
1995
|
+
*/
|
|
1996
|
+
declare const DEFAULT_SPRING_CONFIG: SpringConfig;
|
|
1997
|
+
/**
|
|
1998
|
+
* Default tween animation configuration
|
|
1999
|
+
* @constant
|
|
2000
|
+
*/
|
|
2001
|
+
declare const DEFAULT_TWEEN_CONFIG: TweenConfig;
|
|
2002
|
+
/**
|
|
2003
|
+
* Default animation configuration
|
|
2004
|
+
* @constant
|
|
2005
|
+
*/
|
|
2006
|
+
declare const DEFAULT_ANIMATION_CONFIG: AnimationConfig;
|
|
2007
|
+
/**
|
|
2008
|
+
* Default glassmorphism configuration
|
|
2009
|
+
* @constant
|
|
2010
|
+
*/
|
|
2011
|
+
declare const DEFAULT_GLASS_CONFIG: GlassConfig;
|
|
2012
|
+
|
|
2013
|
+
/**
|
|
2014
|
+
* @fileoverview MobileBottomNav component with slot architecture
|
|
2015
|
+
* @description A composable bottom navigation component optimized for mobile devices
|
|
2016
|
+
* @module MobileBottomNav
|
|
2017
|
+
* @version 2.0.0 - iOS 26 compatibility update
|
|
2018
|
+
*/
|
|
2019
|
+
|
|
2020
|
+
/**
|
|
2021
|
+
* Spacer component to prevent content from being hidden under navigation
|
|
2022
|
+
*
|
|
2023
|
+
* @component
|
|
2024
|
+
* @example
|
|
2025
|
+
* \`\`\`tsx
|
|
2026
|
+
* <main>
|
|
2027
|
+
* {content}
|
|
2028
|
+
* <MobileBottomNav.Spacer />
|
|
2029
|
+
* </main>
|
|
2030
|
+
* \`\`\`
|
|
2031
|
+
*
|
|
2032
|
+
* @param {object} props - Component props
|
|
2033
|
+
* @returns {React.ReactElement} Spacer element
|
|
2034
|
+
*/
|
|
2035
|
+
interface SpacerProps {
|
|
2036
|
+
/** Additional CSS classes */
|
|
2037
|
+
className?: string;
|
|
2038
|
+
/** Size matching the navigation */
|
|
2039
|
+
size?: NavSize;
|
|
2040
|
+
}
|
|
2041
|
+
/**
|
|
2042
|
+
* MobileBottomNav compound component
|
|
2043
|
+
*
|
|
2044
|
+
* A fully accessible, mobile-optimized bottom navigation with:
|
|
2045
|
+
* - Slot-based architecture (Root, NavList, NavItem)
|
|
2046
|
+
* - Glassmorphism visual effects
|
|
2047
|
+
* - Motion animations
|
|
2048
|
+
* - Safe area support for notched devices
|
|
2049
|
+
* - Headless mode for custom styling
|
|
2050
|
+
*
|
|
2051
|
+
* @example
|
|
2052
|
+
* \`\`\`tsx
|
|
2053
|
+
* <MobileBottomNav.Root variant={NavVariant.GLASS}>
|
|
2054
|
+
* <MobileBottomNav.NavList>
|
|
2055
|
+
* <MobileBottomNav.NavItem
|
|
2056
|
+
* icon={<Home />}
|
|
2057
|
+
* label="Home"
|
|
2058
|
+
* state={NavItemState.ACTIVE}
|
|
2059
|
+
* />
|
|
2060
|
+
* <MobileBottomNav.NavItem
|
|
2061
|
+
* icon={<Search />}
|
|
2062
|
+
* label="Search"
|
|
2063
|
+
* />
|
|
2064
|
+
* </MobileBottomNav.NavList>
|
|
2065
|
+
* </MobileBottomNav.Root>
|
|
2066
|
+
* \`\`\`
|
|
2067
|
+
*/
|
|
2068
|
+
declare const MobileBottomNav: {
|
|
2069
|
+
Root: react.ForwardRefExoticComponent<RootProps & react.RefAttributes<HTMLElement>>;
|
|
2070
|
+
NavList: react.ForwardRefExoticComponent<NavListProps & react.RefAttributes<HTMLUListElement>>;
|
|
2071
|
+
NavItem: react.ForwardRefExoticComponent<NavItemProps & react.RefAttributes<HTMLButtonElement>>;
|
|
2072
|
+
Spacer: react.FC<SpacerProps>;
|
|
2073
|
+
};
|
|
2074
|
+
|
|
2075
|
+
/**
|
|
2076
|
+
* Root container styles with variant support
|
|
2077
|
+
* @description Styles for the main navigation wrapper
|
|
2078
|
+
*/
|
|
2079
|
+
declare const rootVariants: (props?: ({
|
|
2080
|
+
variant?: NavVariant | null | undefined;
|
|
2081
|
+
size?: NavSize | null | undefined;
|
|
2082
|
+
visible?: boolean | null | undefined;
|
|
2083
|
+
full?: boolean | null | undefined;
|
|
2084
|
+
rounded?: "none" | "sm" | "md" | "lg" | "xl" | "full" | null | undefined;
|
|
2085
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
2086
|
+
/**
|
|
2087
|
+
* Extract variant props type for Root
|
|
2088
|
+
*/
|
|
2089
|
+
type RootVariantProps = VariantProps<typeof rootVariants>;
|
|
2090
|
+
/**
|
|
2091
|
+
* Navigation list styles
|
|
2092
|
+
* @description Styles for the ul element containing nav items
|
|
2093
|
+
*/
|
|
2094
|
+
declare const navListVariants: (props?: ({
|
|
2095
|
+
size?: NavSize | null | undefined;
|
|
2096
|
+
justify?: "center" | "start" | "end" | "around" | "between" | "evenly" | null | undefined;
|
|
2097
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
2098
|
+
/**
|
|
2099
|
+
* Extract variant props type for NavList
|
|
2100
|
+
*/
|
|
2101
|
+
type NavListVariantProps = VariantProps<typeof navListVariants>;
|
|
2102
|
+
/**
|
|
2103
|
+
* Navigation item styles
|
|
2104
|
+
* @description Styles for individual navigation buttons/links
|
|
2105
|
+
*/
|
|
2106
|
+
declare const navItemVariants: (props?: ({
|
|
2107
|
+
state?: NavItemState | null | undefined;
|
|
2108
|
+
labelPosition?: LabelPosition | null | undefined;
|
|
2109
|
+
size?: NavSize | null | undefined;
|
|
2110
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
2111
|
+
/**
|
|
2112
|
+
* Extract variant props type for NavItem
|
|
2113
|
+
*/
|
|
2114
|
+
type NavItemVariantProps = VariantProps<typeof navItemVariants>;
|
|
2115
|
+
/**
|
|
2116
|
+
* Icon container styles
|
|
2117
|
+
* @description Styles for the icon wrapper
|
|
2118
|
+
*/
|
|
2119
|
+
declare const iconVariants: (props?: ({
|
|
2120
|
+
size?: IconSize | null | undefined;
|
|
2121
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
2122
|
+
/**
|
|
2123
|
+
* Extract variant props type for Icon
|
|
2124
|
+
*/
|
|
2125
|
+
type IconVariantProps = VariantProps<typeof iconVariants>;
|
|
2126
|
+
/**
|
|
2127
|
+
* Label text styles
|
|
2128
|
+
* @description Styles for the navigation item label
|
|
2129
|
+
*/
|
|
2130
|
+
declare const labelVariants: (props?: ({
|
|
2131
|
+
position?: LabelPosition | null | undefined;
|
|
2132
|
+
size?: NavSize | null | undefined;
|
|
2133
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
2134
|
+
/**
|
|
2135
|
+
* Extract variant props type for Label
|
|
2136
|
+
*/
|
|
2137
|
+
type LabelVariantProps = VariantProps<typeof labelVariants>;
|
|
2138
|
+
/**
|
|
2139
|
+
* Badge indicator styles
|
|
2140
|
+
* @description Styles for notification badges on nav items
|
|
2141
|
+
*/
|
|
2142
|
+
declare const badgeVariants: (props?: ({
|
|
2143
|
+
type?: "dot" | "count" | null | undefined;
|
|
2144
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
2145
|
+
/**
|
|
2146
|
+
* Extract variant props type for Badge
|
|
2147
|
+
*/
|
|
2148
|
+
type BadgeVariantProps = VariantProps<typeof badgeVariants>;
|
|
2149
|
+
/**
|
|
2150
|
+
* Spacer styles to prevent content from going under navigation
|
|
2151
|
+
* @description Used as a placeholder element below main content
|
|
2152
|
+
*/
|
|
2153
|
+
declare const spacerVariants: (props?: ({
|
|
2154
|
+
size?: NavSize | null | undefined;
|
|
2155
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
2156
|
+
/**
|
|
2157
|
+
* Extract variant props type for Spacer
|
|
2158
|
+
*/
|
|
2159
|
+
type SpacerVariantProps = VariantProps<typeof spacerVariants>;
|
|
2160
|
+
|
|
2161
|
+
/**
|
|
2162
|
+
* iOS version detection result
|
|
2163
|
+
* @interface IOSVersion
|
|
2164
|
+
*/
|
|
2165
|
+
interface IOSVersion {
|
|
2166
|
+
/** Whether the device is running iOS */
|
|
2167
|
+
isIOS: boolean;
|
|
2168
|
+
/** Whether the browser is Safari */
|
|
2169
|
+
isSafari: boolean;
|
|
2170
|
+
/** Major iOS version number (e.g., 26 for iOS 26) */
|
|
2171
|
+
majorVersion: number | null;
|
|
2172
|
+
/** Minor iOS version number */
|
|
2173
|
+
minorVersion: number | null;
|
|
2174
|
+
/** Whether this is iOS 26 or later with known bugs */
|
|
2175
|
+
hasViewportBugs: boolean;
|
|
2176
|
+
}
|
|
2177
|
+
/**
|
|
2178
|
+
* Detects iOS version and Safari browser
|
|
2179
|
+
* @returns {IOSVersion} iOS detection result
|
|
2180
|
+
*/
|
|
2181
|
+
declare function detectIOSVersion(): IOSVersion;
|
|
2182
|
+
/**
|
|
2183
|
+
* Configuration for iOS Safari fix
|
|
2184
|
+
* @interface IOSSafariFixConfig
|
|
2185
|
+
*/
|
|
2186
|
+
interface IOSSafariFixConfig {
|
|
2187
|
+
/** Enable scroll-based body fix (moves scroll from window to body) */
|
|
2188
|
+
enableScrollFix?: boolean;
|
|
2189
|
+
/** Enable keyboard visibility detection */
|
|
2190
|
+
enableKeyboardFix?: boolean;
|
|
2191
|
+
/** Callback when keyboard visibility changes */
|
|
2192
|
+
onKeyboardVisibilityChange?: (visible: boolean) => void;
|
|
2193
|
+
/** Enable debug logging */
|
|
2194
|
+
debug?: boolean;
|
|
2195
|
+
}
|
|
2196
|
+
/**
|
|
2197
|
+
* Hook to apply iOS Safari viewport bug fixes
|
|
2198
|
+
*
|
|
2199
|
+
* @param {IOSSafariFixConfig} config - Configuration options
|
|
2200
|
+
* @returns {{ isKeyboardVisible: boolean; iosInfo: IOSVersion }} Hook state
|
|
2201
|
+
*
|
|
2202
|
+
* @example
|
|
2203
|
+
* ```tsx
|
|
2204
|
+
* const { isKeyboardVisible, iosInfo } = useIOSSafariFix({
|
|
2205
|
+
* enableScrollFix: true,
|
|
2206
|
+
* enableKeyboardFix: true,
|
|
2207
|
+
* onKeyboardVisibilityChange: (visible) => console.log('Keyboard:', visible)
|
|
2208
|
+
* });
|
|
2209
|
+
* ```
|
|
2210
|
+
*/
|
|
2211
|
+
declare function useIOSSafariFix(config?: IOSSafariFixConfig): {
|
|
2212
|
+
isKeyboardVisible: boolean;
|
|
2213
|
+
iosInfo: IOSVersion;
|
|
2214
|
+
};
|
|
2215
|
+
/**
|
|
2216
|
+
* Hook to force reset fixed element positioning after iOS viewport bugs
|
|
2217
|
+
*
|
|
2218
|
+
* @param {React.RefObject<HTMLElement>} elementRef - Ref to the fixed element
|
|
2219
|
+
* @returns {{ forceReset: () => void }} Reset function
|
|
2220
|
+
*
|
|
2221
|
+
* @example
|
|
2222
|
+
* ```tsx
|
|
2223
|
+
* const navRef = useRef<HTMLElement>(null);
|
|
2224
|
+
* const { forceReset } = useIOSFixedReset(navRef);
|
|
2225
|
+
*
|
|
2226
|
+
* // Call forceReset() after keyboard dismissal or scroll issues
|
|
2227
|
+
* ```
|
|
2228
|
+
*/
|
|
2229
|
+
declare function useIOSFixedReset(elementRef: react__default.RefObject<HTMLElement | null>): {
|
|
2230
|
+
forceReset: () => void;
|
|
2231
|
+
};
|
|
2232
|
+
|
|
1661
2233
|
declare function cn(...inputs: ClassValue[]): string;
|
|
1662
2234
|
|
|
1663
|
-
export { DEFAULT_ANIMATIONS, DEFAULT_CONFIG, DEFAULT_DIMENSIONS, DEFAULT_SAFE_AREAS, DEFAULT_VISUAL_STYLE, SIDEBAR_ARIA_LABELS, SIDEBAR_ARIA_ROLES, SIDEBAR_BREAKPOINTS, SIDEBAR_CSS_VARIABLES, SIDEBAR_DATA_ATTRIBUTES, SIDEBAR_DEBUG_PATTERNS, SIDEBAR_KEYBOARD_KEYS, SIDEBAR_LIMITS, SIDEBAR_TAILWIND_CLASSES, SIDEBAR_VISUAL_PRESETS, Sidebar, type SidebarAnimations, SidebarBorderRadius, SidebarCollapseMode, type SidebarConfig, SidebarContent, type SidebarContentProps, type SidebarContextValue, type SidebarDimensions, SidebarFluidIndicator, SidebarHideBehaviour, SidebarHideOpensBehavior, SidebarIconLibrary, SidebarIndicator, type SidebarIndicatorProps, type SidebarIndicatorRenderProp, type SidebarIndicatorState, SidebarItem, type SidebarItemProps, type SidebarItemRenderProp, type SidebarItemState, SidebarLayoutBehaviour, SidebarNav, type SidebarNavProps, type SidebarProps, type SidebarRenderProp, SidebarSafeArea, SidebarSafeAreaPosition, type SidebarSafeAreaProps, type SidebarSafeAreas, type SidebarState, SidebarSubContent, type SidebarSubContentProps, SidebarSubLink, type SidebarSubLinkProps, SidebarTimingFunction, SidebarToggle, type SidebarToggleProps, type SidebarToggleRenderProp, type SidebarToggleState, SidebarTooltip, type SidebarTooltipProps, SidebarTransitionDuration, type SidebarVisualPreset, type SidebarVisualStyle, SidebarWidth, SidebarZIndex, cn, generateIndicatorStyles, generateSidebarStyles, useSidebarContext, useSidebarIndicator, useSidebarKeyboard, useSubContent };
|
|
2235
|
+
export { type AnimationConfig, AnimationType, type BadgeVariantProps, type BaseNavProps, BlurIntensity, DEFAULT_ANIMATIONS, DEFAULT_ANIMATION_CONFIG, DEFAULT_CONFIG, DEFAULT_DIMENSIONS, DEFAULT_GLASS_CONFIG, DEFAULT_SAFE_AREAS, DEFAULT_SPRING_CONFIG, DEFAULT_TWEEN_CONFIG, DEFAULT_VISUAL_STYLE, type GlassConfig, type IOSSafariFixConfig, IconSize, type IconVariantProps, LabelPosition, type LabelVariantProps, MobileBottomNav, type NavContextValue, type NavItemProps, NavItemState, type NavItemVariantProps, type NavListProps, type NavListVariantProps, NavSize, NavVariant, type RootProps, type RootVariantProps, SIDEBAR_ARIA_LABELS, SIDEBAR_ARIA_ROLES, SIDEBAR_BREAKPOINTS, SIDEBAR_CSS_VARIABLES, SIDEBAR_DATA_ATTRIBUTES, SIDEBAR_DEBUG_PATTERNS, SIDEBAR_KEYBOARD_KEYS, SIDEBAR_LIMITS, SIDEBAR_TAILWIND_CLASSES, SIDEBAR_VISUAL_PRESETS, Sidebar, type SidebarAnimations, SidebarBorderRadius, SidebarCollapseMode, type SidebarConfig, SidebarContent, type SidebarContentProps, type SidebarContextValue, type SidebarDimensions, SidebarFluidIndicator, SidebarHideBehaviour, SidebarHideOpensBehavior, SidebarIconLibrary, SidebarIndicator, type SidebarIndicatorProps, type SidebarIndicatorRenderProp, type SidebarIndicatorState, SidebarItem, type SidebarItemProps, type SidebarItemRenderProp, type SidebarItemState, SidebarLayoutBehaviour, SidebarNav, type SidebarNavProps, type SidebarProps, type SidebarRenderProp, SidebarSafeArea, SidebarSafeAreaPosition, type SidebarSafeAreaProps, type SidebarSafeAreas, type SidebarState, SidebarSubContent, type SidebarSubContentProps, SidebarSubLink, type SidebarSubLinkProps, SidebarTimingFunction, SidebarToggle, type SidebarToggleProps, type SidebarToggleRenderProp, type SidebarToggleState, SidebarTooltip, type SidebarTooltipProps, SidebarTransitionDuration, type SidebarVisualPreset, type SidebarVisualStyle, SidebarWidth, SidebarZIndex, type SpacerVariantProps, type SpringConfig, type TweenConfig, ZIndexLevel, badgeVariants, cn, detectIOSVersion, generateIndicatorStyles, generateSidebarStyles, iconVariants, labelVariants, navItemVariants, navListVariants, rootVariants, spacerVariants, useIOSFixedReset, useIOSSafariFix, useSidebarContext, useSidebarIndicator, useSidebarKeyboard, useSubContent };
|