@sudobility/components 4.0.23 → 4.0.24
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.esm.js +2152 -1590
- package/dist/index.umd.js +11 -11
- package/dist/layout/Topbar/Topbar.d.ts +44 -0
- package/dist/layout/Topbar/Topbar.d.ts.map +1 -0
- package/dist/layout/Topbar/TopbarActions.d.ts +67 -0
- package/dist/layout/Topbar/TopbarActions.d.ts.map +1 -0
- package/dist/layout/Topbar/TopbarContext.d.ts +19 -0
- package/dist/layout/Topbar/TopbarContext.d.ts.map +1 -0
- package/dist/layout/Topbar/TopbarLogo.d.ts +33 -0
- package/dist/layout/Topbar/TopbarLogo.d.ts.map +1 -0
- package/dist/layout/Topbar/TopbarMenuToggle.d.ts +25 -0
- package/dist/layout/Topbar/TopbarMenuToggle.d.ts.map +1 -0
- package/dist/layout/Topbar/TopbarNav.d.ts +68 -0
- package/dist/layout/Topbar/TopbarNav.d.ts.map +1 -0
- package/dist/layout/Topbar/TopbarSlots.d.ts +31 -0
- package/dist/layout/Topbar/TopbarSlots.d.ts.map +1 -0
- package/dist/layout/Topbar/index.d.ts +53 -0
- package/dist/layout/Topbar/index.d.ts.map +1 -0
- package/dist/layout/index.d.ts +1 -0
- package/dist/layout/index.d.ts.map +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import { default as React, ReactNode } from 'react';
|
|
2
|
+
import { TopbarVariant } from './TopbarContext';
|
|
3
|
+
export interface TopbarProps {
|
|
4
|
+
/** Content to render inside the topbar */
|
|
5
|
+
children: ReactNode;
|
|
6
|
+
/** Visual variant of the topbar */
|
|
7
|
+
variant?: TopbarVariant;
|
|
8
|
+
/** Whether the topbar should stick to the top of the viewport */
|
|
9
|
+
sticky?: boolean;
|
|
10
|
+
/** Additional CSS classes */
|
|
11
|
+
className?: string;
|
|
12
|
+
/** Height variant */
|
|
13
|
+
height?: 'sm' | 'md' | 'lg';
|
|
14
|
+
/** Whether to show a backdrop blur effect (for transparent variant) */
|
|
15
|
+
blur?: boolean;
|
|
16
|
+
/** Z-index level */
|
|
17
|
+
zIndex?: 'default' | 'high' | 'highest';
|
|
18
|
+
/** ARIA label for the header landmark */
|
|
19
|
+
'aria-label'?: string;
|
|
20
|
+
}
|
|
21
|
+
/**
|
|
22
|
+
* Topbar - A flexible, responsive top navigation bar component
|
|
23
|
+
*
|
|
24
|
+
* @example
|
|
25
|
+
* ```tsx
|
|
26
|
+
* <Topbar variant="app" sticky>
|
|
27
|
+
* <TopbarLeft>
|
|
28
|
+
* <TopbarMenuToggle />
|
|
29
|
+
* <TopbarLogo src="/logo.svg" alt="App Logo" />
|
|
30
|
+
* </TopbarLeft>
|
|
31
|
+
* <TopbarCenter>
|
|
32
|
+
* <TopbarNav items={navItems} />
|
|
33
|
+
* </TopbarCenter>
|
|
34
|
+
* <TopbarRight>
|
|
35
|
+
* <TopbarActions>
|
|
36
|
+
* <Button>Sign In</Button>
|
|
37
|
+
* </TopbarActions>
|
|
38
|
+
* </TopbarRight>
|
|
39
|
+
* </Topbar>
|
|
40
|
+
* ```
|
|
41
|
+
*/
|
|
42
|
+
export declare const Topbar: React.FC<TopbarProps>;
|
|
43
|
+
export type { TopbarVariant };
|
|
44
|
+
//# sourceMappingURL=Topbar.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Topbar.d.ts","sourceRoot":"","sources":["../../../src/layout/Topbar/Topbar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEzC,OAAO,EAAkB,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEhE,MAAM,WAAW,WAAW;IAC1B,0CAA0C;IAC1C,QAAQ,EAAE,SAAS,CAAC;IACpB,mCAAmC;IACnC,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,iEAAiE;IACjE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qBAAqB;IACrB,MAAM,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC5B,uEAAuE;IACvE,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,oBAAoB;IACpB,MAAM,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,SAAS,CAAC;IACxC,yCAAyC;IACzC,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAuBD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAmDxC,CAAC;AAEF,YAAY,EAAE,aAAa,EAAE,CAAC"}
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
import { default as React, ReactNode } from 'react';
|
|
2
|
+
export interface TopbarActionsProps {
|
|
3
|
+
/** Action elements (buttons, icons, etc.) */
|
|
4
|
+
children: ReactNode;
|
|
5
|
+
/** Additional CSS classes */
|
|
6
|
+
className?: string;
|
|
7
|
+
/** Gap between action items */
|
|
8
|
+
gap?: 'sm' | 'md' | 'lg';
|
|
9
|
+
/** Alignment of actions */
|
|
10
|
+
align?: 'left' | 'center' | 'right';
|
|
11
|
+
}
|
|
12
|
+
/**
|
|
13
|
+
* TopbarActions - Container for action buttons and icons in the topbar
|
|
14
|
+
*
|
|
15
|
+
* @example
|
|
16
|
+
* ```tsx
|
|
17
|
+
* <TopbarActions>
|
|
18
|
+
* <IconButton icon={BellIcon} aria-label="Notifications" />
|
|
19
|
+
* <IconButton icon={SettingsIcon} aria-label="Settings" />
|
|
20
|
+
* <Button variant="primary">Sign In</Button>
|
|
21
|
+
* </TopbarActions>
|
|
22
|
+
* ```
|
|
23
|
+
*/
|
|
24
|
+
export declare const TopbarActions: React.FC<TopbarActionsProps>;
|
|
25
|
+
/**
|
|
26
|
+
* TopbarIconButton - Standardized icon button for topbar actions
|
|
27
|
+
*/
|
|
28
|
+
export interface TopbarIconButtonProps {
|
|
29
|
+
/** Icon component to render */
|
|
30
|
+
icon: React.ComponentType<{
|
|
31
|
+
className?: string;
|
|
32
|
+
}>;
|
|
33
|
+
/** Click handler */
|
|
34
|
+
onClick?: () => void;
|
|
35
|
+
/** ARIA label for accessibility */
|
|
36
|
+
'aria-label': string;
|
|
37
|
+
/** Additional CSS classes */
|
|
38
|
+
className?: string;
|
|
39
|
+
/** Whether the button is disabled */
|
|
40
|
+
disabled?: boolean;
|
|
41
|
+
/** Badge count (e.g., for notifications) */
|
|
42
|
+
badge?: number;
|
|
43
|
+
/** Size variant */
|
|
44
|
+
size?: 'sm' | 'md' | 'lg';
|
|
45
|
+
}
|
|
46
|
+
export declare const TopbarIconButton: React.FC<TopbarIconButtonProps>;
|
|
47
|
+
/**
|
|
48
|
+
* TopbarSearch - Search input component for the topbar
|
|
49
|
+
*/
|
|
50
|
+
export interface TopbarSearchProps {
|
|
51
|
+
/** Placeholder text */
|
|
52
|
+
placeholder?: string;
|
|
53
|
+
/** Current value */
|
|
54
|
+
value?: string;
|
|
55
|
+
/** Change handler */
|
|
56
|
+
onChange?: (value: string) => void;
|
|
57
|
+
/** Submit handler */
|
|
58
|
+
onSubmit?: (value: string) => void;
|
|
59
|
+
/** Additional CSS classes */
|
|
60
|
+
className?: string;
|
|
61
|
+
/** Width variant */
|
|
62
|
+
width?: 'sm' | 'md' | 'lg' | 'full';
|
|
63
|
+
/** Whether to show on mobile */
|
|
64
|
+
showOnMobile?: boolean;
|
|
65
|
+
}
|
|
66
|
+
export declare const TopbarSearch: React.FC<TopbarSearchProps>;
|
|
67
|
+
//# sourceMappingURL=TopbarActions.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TopbarActions.d.ts","sourceRoot":"","sources":["../../../src/layout/Topbar/TopbarActions.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGzC,MAAM,WAAW,kBAAkB;IACjC,6CAA6C;IAC7C,QAAQ,EAAE,SAAS,CAAC;IACpB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+BAA+B;IAC/B,GAAG,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACzB,2BAA2B;IAC3B,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;CACrC;AAcD;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAkBtD,CAAC;AAEF;;GAEG;AACH,MAAM,WAAW,qBAAqB;IACpC,+BAA+B;IAC/B,IAAI,EAAE,KAAK,CAAC,aAAa,CAAC;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAClD,oBAAoB;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,mCAAmC;IACnC,YAAY,EAAE,MAAM,CAAC;IACrB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qCAAqC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4CAA4C;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mBAAmB;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CAC3B;AAcD,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CA6C5D,CAAC;AAEF;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC,uBAAuB;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,oBAAoB;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qBAAqB;IACrB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,qBAAqB;IACrB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oBAAoB;IACpB,KAAK,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;IACpC,gCAAgC;IAChC,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AASD,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAiEpD,CAAC"}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { default as React, ReactNode } from 'react';
|
|
2
|
+
export type TopbarVariant = 'default' | 'app' | 'minimal' | 'transparent';
|
|
3
|
+
interface TopbarContextValue {
|
|
4
|
+
variant: TopbarVariant;
|
|
5
|
+
sticky: boolean;
|
|
6
|
+
mobileMenuOpen: boolean;
|
|
7
|
+
setMobileMenuOpen: (open: boolean) => void;
|
|
8
|
+
toggleMobileMenu: () => void;
|
|
9
|
+
}
|
|
10
|
+
declare const TopbarContext: React.Context<TopbarContextValue | null>;
|
|
11
|
+
export interface TopbarProviderProps {
|
|
12
|
+
children: ReactNode;
|
|
13
|
+
variant?: TopbarVariant;
|
|
14
|
+
sticky?: boolean;
|
|
15
|
+
}
|
|
16
|
+
export declare const TopbarProvider: React.FC<TopbarProviderProps>;
|
|
17
|
+
export declare const useTopbar: () => TopbarContextValue;
|
|
18
|
+
export { TopbarContext };
|
|
19
|
+
//# sourceMappingURL=TopbarContext.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TopbarContext.d.ts","sourceRoot":"","sources":["../../../src/layout/Topbar/TopbarContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAKZ,SAAS,EACV,MAAM,OAAO,CAAC;AAEf,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,KAAK,GAAG,SAAS,GAAG,aAAa,CAAC;AAE1E,UAAU,kBAAkB;IAC1B,OAAO,EAAE,aAAa,CAAC;IACvB,MAAM,EAAE,OAAO,CAAC;IAChB,cAAc,EAAE,OAAO,CAAC;IACxB,iBAAiB,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAC3C,gBAAgB,EAAE,MAAM,IAAI,CAAC;CAC9B;AAED,QAAA,MAAM,aAAa,0CAAiD,CAAC;AAErE,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,SAAS,CAAC;IACpB,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAwBxD,CAAC;AAEF,eAAO,MAAM,SAAS,QAAO,kBAM5B,CAAC;AAEF,OAAO,EAAE,aAAa,EAAE,CAAC"}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import { default as React, ReactNode } from 'react';
|
|
2
|
+
export interface TopbarLogoProps {
|
|
3
|
+
/** Logo content - can be an image, SVG, or custom component */
|
|
4
|
+
children?: ReactNode;
|
|
5
|
+
/** Image source URL (alternative to children) */
|
|
6
|
+
src?: string;
|
|
7
|
+
/** Alt text for the logo image */
|
|
8
|
+
alt?: string;
|
|
9
|
+
/** Click handler - typically navigates to home */
|
|
10
|
+
onClick?: () => void;
|
|
11
|
+
/** Link href (alternative to onClick) */
|
|
12
|
+
href?: string;
|
|
13
|
+
/** Additional CSS classes */
|
|
14
|
+
className?: string;
|
|
15
|
+
/** Size variant */
|
|
16
|
+
size?: 'sm' | 'md' | 'lg';
|
|
17
|
+
}
|
|
18
|
+
/**
|
|
19
|
+
* TopbarLogo - Logo component for the topbar
|
|
20
|
+
*
|
|
21
|
+
* @example
|
|
22
|
+
* ```tsx
|
|
23
|
+
* // With image
|
|
24
|
+
* <TopbarLogo src="/logo.svg" alt="Company Logo" onClick={() => navigate('/')} />
|
|
25
|
+
*
|
|
26
|
+
* // With custom content
|
|
27
|
+
* <TopbarLogo onClick={() => navigate('/')}>
|
|
28
|
+
* <MyLogoComponent />
|
|
29
|
+
* </TopbarLogo>
|
|
30
|
+
* ```
|
|
31
|
+
*/
|
|
32
|
+
export declare const TopbarLogo: React.FC<TopbarLogoProps>;
|
|
33
|
+
//# sourceMappingURL=TopbarLogo.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TopbarLogo.d.ts","sourceRoot":"","sources":["../../../src/layout/Topbar/TopbarLogo.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGzC,MAAM,WAAW,eAAe;IAC9B,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,iDAAiD;IACjD,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,kCAAkC;IAClC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,kDAAkD;IAClD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,yCAAyC;IACzC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mBAAmB;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CAC3B;AAQD;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAoDhD,CAAC"}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
export interface TopbarMenuToggleProps {
|
|
3
|
+
/** Custom icon component to use instead of default hamburger */
|
|
4
|
+
icon?: React.ComponentType<{
|
|
5
|
+
className?: string;
|
|
6
|
+
}>;
|
|
7
|
+
/** ARIA label for the toggle button */
|
|
8
|
+
'aria-label'?: string;
|
|
9
|
+
/** Additional CSS classes */
|
|
10
|
+
className?: string;
|
|
11
|
+
/** Custom onClick handler (overrides default toggle behavior) */
|
|
12
|
+
onClick?: () => void;
|
|
13
|
+
/** Breakpoint at which to hide the toggle (shows on smaller screens) */
|
|
14
|
+
hideAbove?: 'sm' | 'md' | 'lg' | 'xl';
|
|
15
|
+
}
|
|
16
|
+
/**
|
|
17
|
+
* TopbarMenuToggle - Hamburger menu toggle button for mobile navigation
|
|
18
|
+
*
|
|
19
|
+
* @example
|
|
20
|
+
* ```tsx
|
|
21
|
+
* <TopbarMenuToggle hideAbove="lg" />
|
|
22
|
+
* ```
|
|
23
|
+
*/
|
|
24
|
+
export declare const TopbarMenuToggle: React.FC<TopbarMenuToggleProps>;
|
|
25
|
+
//# sourceMappingURL=TopbarMenuToggle.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TopbarMenuToggle.d.ts","sourceRoot":"","sources":["../../../src/layout/Topbar/TopbarMenuToggle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,WAAW,qBAAqB;IACpC,gEAAgE;IAChE,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACnD,uCAAuC;IACvC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iEAAiE;IACjE,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,wEAAwE;IACxE,SAAS,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CACvC;AAwCD;;;;;;;GAOG;AACH,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAsC5D,CAAC"}
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
export interface TopbarNavItem {
|
|
3
|
+
/** Unique identifier for the item */
|
|
4
|
+
id: string;
|
|
5
|
+
/** Display label */
|
|
6
|
+
label: string;
|
|
7
|
+
/** Navigation path or URL */
|
|
8
|
+
href?: string;
|
|
9
|
+
/** Click handler (alternative to href) */
|
|
10
|
+
onClick?: () => void;
|
|
11
|
+
/** Icon component */
|
|
12
|
+
icon?: React.ComponentType<{
|
|
13
|
+
className?: string;
|
|
14
|
+
}>;
|
|
15
|
+
/** Whether this item is currently active */
|
|
16
|
+
active?: boolean;
|
|
17
|
+
/** Sub-navigation items for dropdown */
|
|
18
|
+
children?: TopbarNavItem[];
|
|
19
|
+
/** Whether this item is disabled */
|
|
20
|
+
disabled?: boolean;
|
|
21
|
+
}
|
|
22
|
+
export interface TopbarNavProps {
|
|
23
|
+
/** Navigation items to display */
|
|
24
|
+
items: TopbarNavItem[];
|
|
25
|
+
/** Additional CSS classes */
|
|
26
|
+
className?: string;
|
|
27
|
+
/** Breakpoint at which to collapse navigation into dropdown */
|
|
28
|
+
collapseBelow?: 'sm' | 'md' | 'lg' | 'xl';
|
|
29
|
+
/** Custom link component for routing integration */
|
|
30
|
+
LinkComponent?: React.ComponentType<{
|
|
31
|
+
href: string;
|
|
32
|
+
className?: string;
|
|
33
|
+
children: React.ReactNode;
|
|
34
|
+
}>;
|
|
35
|
+
/** Alignment of nav items */
|
|
36
|
+
align?: 'left' | 'center' | 'right';
|
|
37
|
+
}
|
|
38
|
+
/**
|
|
39
|
+
* TopbarNav - Navigation component with responsive collapse
|
|
40
|
+
*
|
|
41
|
+
* @example
|
|
42
|
+
* ```tsx
|
|
43
|
+
* const navItems = [
|
|
44
|
+
* { id: 'home', label: 'Home', href: '/' },
|
|
45
|
+
* { id: 'about', label: 'About', href: '/about' },
|
|
46
|
+
* { id: 'contact', label: 'Contact', href: '/contact' },
|
|
47
|
+
* ];
|
|
48
|
+
*
|
|
49
|
+
* <TopbarNav items={navItems} collapseBelow="md" />
|
|
50
|
+
* ```
|
|
51
|
+
*/
|
|
52
|
+
export declare const TopbarNav: React.FC<TopbarNavProps>;
|
|
53
|
+
/**
|
|
54
|
+
* TopbarMobileNav - Mobile navigation dropdown menu
|
|
55
|
+
* Renders navigation items in a full-width dropdown on mobile
|
|
56
|
+
*/
|
|
57
|
+
export interface TopbarMobileNavProps {
|
|
58
|
+
/** Navigation items to display */
|
|
59
|
+
items: TopbarNavItem[];
|
|
60
|
+
/** Whether the menu is open */
|
|
61
|
+
isOpen?: boolean;
|
|
62
|
+
/** Additional CSS classes */
|
|
63
|
+
className?: string;
|
|
64
|
+
/** Custom link component for routing integration */
|
|
65
|
+
LinkComponent?: TopbarNavProps['LinkComponent'];
|
|
66
|
+
}
|
|
67
|
+
export declare const TopbarMobileNav: React.FC<TopbarMobileNavProps>;
|
|
68
|
+
//# sourceMappingURL=TopbarNav.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TopbarNav.d.ts","sourceRoot":"","sources":["../../../src/layout/Topbar/TopbarNav.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAKhD,MAAM,WAAW,aAAa;IAC5B,qCAAqC;IACrC,EAAE,EAAE,MAAM,CAAC;IACX,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,6BAA6B;IAC7B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,0CAA0C;IAC1C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,qBAAqB;IACrB,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACnD,4CAA4C;IAC5C,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,wCAAwC;IACxC,QAAQ,CAAC,EAAE,aAAa,EAAE,CAAC;IAC3B,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,cAAc;IAC7B,kCAAkC;IAClC,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+DAA+D;IAC/D,aAAa,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1C,oDAAoD;IACpD,aAAa,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAClC,IAAI,EAAE,MAAM,CAAC;QACb,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;KAC3B,CAAC,CAAC;IACH,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;CACrC;AAeD;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAmH9C,CAAC;AAoEF;;;GAGG;AACH,MAAM,WAAW,oBAAoB;IACnC,kCAAkC;IAClC,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB,+BAA+B;IAC/B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oDAAoD;IACpD,aAAa,CAAC,EAAE,cAAc,CAAC,eAAe,CAAC,CAAC;CACjD;AAED,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAyC1D,CAAC"}
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import { default as React, ReactNode } from 'react';
|
|
2
|
+
interface SlotProps {
|
|
3
|
+
children: ReactNode;
|
|
4
|
+
className?: string;
|
|
5
|
+
}
|
|
6
|
+
/**
|
|
7
|
+
* TopbarLeft - Container for left-aligned content (logo, menu toggle)
|
|
8
|
+
*/
|
|
9
|
+
export declare const TopbarLeft: React.FC<SlotProps>;
|
|
10
|
+
/**
|
|
11
|
+
* TopbarCenter - Container for center content (search, navigation)
|
|
12
|
+
* Grows to fill available space on desktop, hidden on mobile by default
|
|
13
|
+
*/
|
|
14
|
+
export declare const TopbarCenter: React.FC<SlotProps>;
|
|
15
|
+
/**
|
|
16
|
+
* TopbarRight - Container for right-aligned content (actions, user menu)
|
|
17
|
+
*/
|
|
18
|
+
export declare const TopbarRight: React.FC<SlotProps>;
|
|
19
|
+
/**
|
|
20
|
+
* TopbarMobileContent - Secondary row shown only on mobile
|
|
21
|
+
* Useful for search bars or additional controls
|
|
22
|
+
*/
|
|
23
|
+
export declare const TopbarMobileContent: React.FC<SlotProps>;
|
|
24
|
+
/**
|
|
25
|
+
* TopbarDivider - Visual separator between topbar sections
|
|
26
|
+
*/
|
|
27
|
+
export declare const TopbarDivider: React.FC<{
|
|
28
|
+
className?: string;
|
|
29
|
+
}>;
|
|
30
|
+
export {};
|
|
31
|
+
//# sourceMappingURL=TopbarSlots.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TopbarSlots.d.ts","sourceRoot":"","sources":["../../../src/layout/Topbar/TopbarSlots.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGzC,UAAU,SAAS;IACjB,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAM1C,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAQ5C,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAM3C,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAKnD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAa1D,CAAC"}
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Topbar Components - Flexible, responsive top navigation bar
|
|
3
|
+
*
|
|
4
|
+
* @example
|
|
5
|
+
* ```tsx
|
|
6
|
+
* import {
|
|
7
|
+
* Topbar,
|
|
8
|
+
* TopbarLeft,
|
|
9
|
+
* TopbarCenter,
|
|
10
|
+
* TopbarRight,
|
|
11
|
+
* TopbarLogo,
|
|
12
|
+
* TopbarNav,
|
|
13
|
+
* TopbarMenuToggle,
|
|
14
|
+
* TopbarActions,
|
|
15
|
+
* TopbarMobileNav,
|
|
16
|
+
* } from '@sudobility/components';
|
|
17
|
+
*
|
|
18
|
+
* function Header() {
|
|
19
|
+
* const navItems = [
|
|
20
|
+
* { id: 'home', label: 'Home', href: '/' },
|
|
21
|
+
* { id: 'about', label: 'About', href: '/about' },
|
|
22
|
+
* ];
|
|
23
|
+
*
|
|
24
|
+
* return (
|
|
25
|
+
* <>
|
|
26
|
+
* <Topbar variant="app" sticky>
|
|
27
|
+
* <TopbarLeft>
|
|
28
|
+
* <TopbarMenuToggle />
|
|
29
|
+
* <TopbarLogo src="/logo.svg" alt="Logo" onClick={() => navigate('/')} />
|
|
30
|
+
* </TopbarLeft>
|
|
31
|
+
* <TopbarCenter>
|
|
32
|
+
* <TopbarNav items={navItems} />
|
|
33
|
+
* </TopbarCenter>
|
|
34
|
+
* <TopbarRight>
|
|
35
|
+
* <TopbarActions>
|
|
36
|
+
* <Button>Sign In</Button>
|
|
37
|
+
* </TopbarActions>
|
|
38
|
+
* </TopbarRight>
|
|
39
|
+
* </Topbar>
|
|
40
|
+
* <TopbarMobileNav items={navItems} />
|
|
41
|
+
* </>
|
|
42
|
+
* );
|
|
43
|
+
* }
|
|
44
|
+
* ```
|
|
45
|
+
*/
|
|
46
|
+
export { Topbar, type TopbarProps, type TopbarVariant } from './Topbar';
|
|
47
|
+
export { TopbarProvider, useTopbar, TopbarContext, type TopbarProviderProps, } from './TopbarContext';
|
|
48
|
+
export { TopbarLeft, TopbarCenter, TopbarRight, TopbarMobileContent, TopbarDivider, } from './TopbarSlots';
|
|
49
|
+
export { TopbarLogo, type TopbarLogoProps } from './TopbarLogo';
|
|
50
|
+
export { TopbarMenuToggle, type TopbarMenuToggleProps, } from './TopbarMenuToggle';
|
|
51
|
+
export { TopbarNav, TopbarMobileNav, type TopbarNavProps, type TopbarNavItem, type TopbarMobileNavProps, } from './TopbarNav';
|
|
52
|
+
export { TopbarActions, TopbarIconButton, TopbarSearch, type TopbarActionsProps, type TopbarIconButtonProps, type TopbarSearchProps, } from './TopbarActions';
|
|
53
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/layout/Topbar/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AAGH,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,KAAK,aAAa,EAAE,MAAM,UAAU,CAAC;AAGxE,OAAO,EACL,cAAc,EACd,SAAS,EACT,aAAa,EACb,KAAK,mBAAmB,GACzB,MAAM,iBAAiB,CAAC;AAGzB,OAAO,EACL,UAAU,EACV,YAAY,EACZ,WAAW,EACX,mBAAmB,EACnB,aAAa,GACd,MAAM,eAAe,CAAC;AAGvB,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,cAAc,CAAC;AAGhE,OAAO,EACL,gBAAgB,EAChB,KAAK,qBAAqB,GAC3B,MAAM,oBAAoB,CAAC;AAG5B,OAAO,EACL,SAAS,EACT,eAAe,EACf,KAAK,cAAc,EACnB,KAAK,aAAa,EAClB,KAAK,oBAAoB,GAC1B,MAAM,aAAa,CAAC;AAGrB,OAAO,EACL,aAAa,EACb,gBAAgB,EAChB,YAAY,EACZ,KAAK,kBAAkB,EACvB,KAAK,qBAAqB,EAC1B,KAAK,iBAAiB,GACvB,MAAM,iBAAiB,CAAC"}
|
package/dist/layout/index.d.ts
CHANGED
|
@@ -4,4 +4,5 @@
|
|
|
4
4
|
export { StandardPageLayout } from './StandardPageLayout';
|
|
5
5
|
export { PageHeader } from './PageHeader';
|
|
6
6
|
export { MasterDetailLayout, type MasterDetailLayoutProps, MasterListItem, type MasterListItemProps, } from './MasterDetailLayout';
|
|
7
|
+
export { Topbar, type TopbarProps, type TopbarVariant, TopbarProvider, useTopbar, TopbarContext, type TopbarProviderProps, TopbarLeft, TopbarCenter, TopbarRight, TopbarMobileContent, TopbarDivider, TopbarLogo, type TopbarLogoProps, TopbarMenuToggle, type TopbarMenuToggleProps, TopbarNav, TopbarMobileNav, type TopbarNavProps, type TopbarNavItem, type TopbarMobileNavProps, TopbarActions, TopbarIconButton, TopbarSearch, type TopbarActionsProps, type TopbarIconButtonProps, type TopbarSearchProps, } from './Topbar';
|
|
7
8
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/layout/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EACL,kBAAkB,EAClB,KAAK,uBAAuB,EAC5B,cAAc,EACd,KAAK,mBAAmB,GACzB,MAAM,sBAAsB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/layout/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EACL,kBAAkB,EAClB,KAAK,uBAAuB,EAC5B,cAAc,EACd,KAAK,mBAAmB,GACzB,MAAM,sBAAsB,CAAC;AAG9B,OAAO,EACL,MAAM,EACN,KAAK,WAAW,EAChB,KAAK,aAAa,EAClB,cAAc,EACd,SAAS,EACT,aAAa,EACb,KAAK,mBAAmB,EACxB,UAAU,EACV,YAAY,EACZ,WAAW,EACX,mBAAmB,EACnB,aAAa,EACb,UAAU,EACV,KAAK,eAAe,EACpB,gBAAgB,EAChB,KAAK,qBAAqB,EAC1B,SAAS,EACT,eAAe,EACf,KAAK,cAAc,EACnB,KAAK,aAAa,EAClB,KAAK,oBAAoB,EACzB,aAAa,EACb,gBAAgB,EAChB,YAAY,EACZ,KAAK,kBAAkB,EACvB,KAAK,qBAAqB,EAC1B,KAAK,iBAAiB,GACvB,MAAM,UAAU,CAAC"}
|