@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.
@@ -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"}
@@ -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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sudobility/components",
3
- "version": "4.0.23",
3
+ "version": "4.0.24",
4
4
  "description": "Reusable UI components and design system - Reorganized for better maintainability",
5
5
  "type": "module",
6
6
  "main": "dist/index.umd.js",