shadcn-glass-ui 1.0.10 → 2.0.0
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 +259 -16
- package/README.md +248 -28
- package/context7.json +58 -0
- package/dist/cli/index.cjs +470 -0
- package/dist/cli/index.cjs.map +1 -0
- package/dist/cli/index.d.ts +18 -0
- package/dist/cli/index.js +469 -0
- package/dist/cli/index.js.map +1 -0
- package/dist/components.cjs +4 -4
- package/dist/components.d.ts +153 -22
- package/dist/components.js +2 -2
- package/dist/hooks.cjs +2 -2
- package/dist/index.cjs +872 -5
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +0 -2390
- package/dist/index.js +844 -3
- package/dist/index.js.map +1 -1
- package/dist/r/ai-card-glass.json +5 -12
- package/dist/r/avatar-glass.json +5 -15
- package/dist/r/circular-metric-glass.json +5 -11
- package/dist/r/circular-progress-glass.json +5 -12
- package/dist/r/combobox-glass.json +5 -13
- package/dist/r/flag-alert-glass.json +5 -11
- package/dist/r/flags-section-glass.json +5 -12
- package/dist/r/insight-card-glass.json +17 -0
- package/dist/r/interactive-card.json +5 -12
- package/dist/r/language-bar-glass.json +5 -11
- package/dist/r/metric-card-glass.json +6 -13
- package/dist/r/metrics-grid-glass.json +5 -11
- package/dist/r/modal-glass.json +5 -15
- package/dist/r/popover-glass.json +1 -1
- package/dist/r/progress-glass.json +5 -13
- package/dist/r/registry.json +20 -2
- package/dist/r/segmented-control-glass.json +5 -11
- package/dist/r/sparkline-glass.json +17 -0
- package/dist/r/stepper-glass.json +33 -0
- package/dist/r/tabs-glass.json +4 -9
- package/dist/r/trust-score-card-glass.json +5 -12
- package/dist/r/year-card-glass.json +5 -13
- package/dist/shadcn-glass-ui.css +1 -1
- package/dist/{theme-context-XtasSxRT.cjs → theme-context-CVW50BKW.cjs} +2 -2
- package/dist/{theme-context-XtasSxRT.cjs.map → theme-context-CVW50BKW.cjs.map} +1 -1
- package/dist/themes.cjs +1 -1
- package/dist/trust-score-card-glass-BcZbul0P.js +26895 -0
- package/dist/trust-score-card-glass-BcZbul0P.js.map +1 -0
- package/dist/trust-score-card-glass-r3qM09Jp.cjs +27689 -0
- package/dist/trust-score-card-glass-r3qM09Jp.cjs.map +1 -0
- package/dist/{use-focus-BbpE2qGq.cjs → use-focus-ZE8ozmZE.cjs} +2 -2
- package/dist/{use-focus-BbpE2qGq.cjs.map → use-focus-ZE8ozmZE.cjs.map} +1 -1
- package/dist/{use-wallpaper-tint-CIqtoETa.cjs → use-wallpaper-tint-BuS80tbN.cjs} +2 -2
- package/dist/{use-wallpaper-tint-CIqtoETa.cjs.map → use-wallpaper-tint-BuS80tbN.cjs.map} +1 -1
- package/dist/{utils-CGCOTvxT.js → utils-CcyeqpKQ.js} +1 -1
- package/dist/{utils-CGCOTvxT.js.map → utils-CcyeqpKQ.js.map} +1 -1
- package/dist/{utils-CriE74ig.cjs → utils-DLXayspX.cjs} +2 -2
- package/dist/{utils-CriE74ig.cjs.map → utils-DLXayspX.cjs.map} +1 -1
- package/dist/utils.cjs +1 -1
- package/dist/utils.js +1 -1
- package/docs/AI_IMPROVEMENTS_COMPLETE.md +574 -0
- package/docs/AI_USAGE.md +1328 -0
- package/docs/API_PATTERNS_COMPARISON.md +418 -0
- package/docs/BEST_PRACTICES.md +800 -0
- package/docs/COMPLIANCE_CHECKLIST.md +307 -0
- package/docs/COMPLIANCE_TESTING.md +436 -0
- package/docs/COMPONENTS_CATALOG.md +1076 -0
- package/docs/CSS_VARIABLES_AUDIT.md +306 -0
- package/docs/CSS_VARIABLES_REFACTORING_PLAN.md +330 -0
- package/docs/EXPORTS_MAP.json +875 -0
- package/docs/EXPORTS_STRUCTURE.md +729 -0
- package/docs/GETTING_STARTED.md +655 -0
- package/docs/METRIC_CARD_API_REDESIGN.md +354 -0
- package/docs/PRIMITIVE_MAPPING.md +404 -0
- package/docs/PUBLISHING.md +593 -0
- package/docs/REGISTRY_SUMMARY.md +96 -0
- package/docs/REGISTRY_USAGE.md +339 -0
- package/docs/SECURITY.md +117 -0
- package/docs/THEME_CREATION_GUIDE.md +455 -0
- package/docs/TOKEN_ARCHITECTURE.md +365 -0
- package/docs/announcements/v1.0.5-devto.md +363 -0
- package/docs/announcements/v1.0.5-reddit.md +115 -0
- package/docs/announcements/v1.0.5-twitter.md +70 -0
- package/docs/api/README.md +725 -0
- package/docs/api/functions/ThemeProvider.md +21 -0
- package/docs/api/functions/cn.md +27 -0
- package/docs/api/functions/getNextTheme.md +21 -0
- package/docs/api/functions/getThemeConfig.md +21 -0
- package/docs/api/functions/useFocus.md +53 -0
- package/docs/api/functions/useHover.md +47 -0
- package/docs/api/functions/useResponsive.md +31 -0
- package/docs/api/functions/useTheme.md +15 -0
- package/docs/api/functions/useWallpaperTint.md +36 -0
- package/docs/api/globals.md +139 -0
- package/docs/api/interfaces/AlertGlassProps.md +131 -0
- package/docs/api/interfaces/AvatarGlassProps.md +114 -0
- package/docs/api/interfaces/BadgeGlassProps.md +118 -0
- package/docs/api/interfaces/ButtonGlassProps.md +179 -0
- package/docs/api/interfaces/CheckboxGlassProps.md +125 -0
- package/docs/api/interfaces/DropdownGlassProps.md +123 -0
- package/docs/api/interfaces/DropdownItem.md +53 -0
- package/docs/api/interfaces/GlassCardProps.md +151 -0
- package/docs/api/interfaces/InputGlassProps.md +169 -0
- package/docs/api/interfaces/NotificationGlassProps.md +67 -0
- package/docs/api/interfaces/ProgressGlassProps.md +49 -0
- package/docs/api/interfaces/SkeletonGlassProps.md +41 -0
- package/docs/api/interfaces/SliderGlassProps.md +107 -0
- package/docs/api/interfaces/TabItem.md +25 -0
- package/docs/api/interfaces/ThemeConfig.md +25 -0
- package/docs/api/interfaces/ThemeContextValue.md +47 -0
- package/docs/api/interfaces/ToggleGlassProps.md +59 -0
- package/docs/api/interfaces/TooltipGlassProps.md +119 -0
- package/docs/api/type-aliases/AlertType.md +11 -0
- package/docs/api/type-aliases/AlertVariant.md +11 -0
- package/docs/api/type-aliases/AvatarSize.md +11 -0
- package/docs/api/type-aliases/AvatarStatus.md +13 -0
- package/docs/api/type-aliases/BadgeSize.md +11 -0
- package/docs/api/type-aliases/BadgeVariant.md +11 -0
- package/docs/api/type-aliases/ButtonGlassSize.md +11 -0
- package/docs/api/type-aliases/ButtonGlassVariant.md +11 -0
- package/docs/api/type-aliases/DropdownAlign.md +11 -0
- package/docs/api/type-aliases/GlowType.md +11 -0
- package/docs/api/type-aliases/InputGlassSize.md +11 -0
- package/docs/api/type-aliases/IntensityType.md +11 -0
- package/docs/api/type-aliases/ModalSize.md +11 -0
- package/docs/api/type-aliases/NotificationType.md +11 -0
- package/docs/api/type-aliases/PaddingType.md +11 -0
- package/docs/api/type-aliases/ProgressGradient.md +11 -0
- package/docs/api/type-aliases/ProgressSize.md +11 -0
- package/docs/api/type-aliases/SkeletonVariant.md +11 -0
- package/docs/api/type-aliases/Theme.md +11 -0
- package/docs/api/type-aliases/ToggleGlassSize.md +11 -0
- package/docs/api/type-aliases/TooltipPosition.md +11 -0
- package/docs/api/variables/AICardGlass.md +11 -0
- package/docs/api/variables/AlertGlass.md +11 -0
- package/docs/api/variables/AvatarGlass.md +11 -0
- package/docs/api/variables/BadgeGlass.md +11 -0
- package/docs/api/variables/BaseProgressGlass.md +11 -0
- package/docs/api/variables/ButtonGlass.md +11 -0
- package/docs/api/variables/CareerStatsGlass.md +11 -0
- package/docs/api/variables/CareerStatsHeaderGlass.md +11 -0
- package/docs/api/variables/CheckboxGlass.md +11 -0
- package/docs/api/variables/CircularMetricGlass.md +22 -0
- package/docs/api/variables/CircularProgressGlass.md +11 -0
- package/docs/api/variables/ComboBoxGlass.md +27 -0
- package/docs/api/variables/ContributionMetricsGlass.md +11 -0
- package/docs/api/variables/DropdownGlass.md +11 -0
- package/docs/api/variables/ExpandableHeaderGlass.md +11 -0
- package/docs/api/variables/FlagAlertGlass.md +11 -0
- package/docs/api/variables/FlagsSectionGlass.md +11 -0
- package/docs/api/variables/FormFieldWrapper.md +44 -0
- package/docs/api/variables/GlassCard.md +11 -0
- package/docs/api/variables/HeaderBrandingGlass.md +11 -0
- package/docs/api/variables/HeaderNavGlass.md +11 -0
- package/docs/api/variables/IconButtonGlass.md +11 -0
- package/docs/api/variables/InputGlass.md +11 -0
- package/docs/api/variables/InteractiveCard.md +45 -0
- package/docs/api/variables/LanguageBarGlass.md +11 -0
- package/docs/api/variables/MetricCardGlass.md +11 -0
- package/docs/api/variables/MetricsGridGlass.md +11 -0
- package/docs/api/variables/ModalGlass.md +72 -0
- package/docs/api/variables/NotificationGlass.md +11 -0
- package/docs/api/variables/PopoverGlass.md +11 -0
- package/docs/api/variables/ProfileAvatarGlass.md +11 -0
- package/docs/api/variables/ProfileHeaderGlass.md +11 -0
- package/docs/api/variables/ProgressGlass.md +11 -0
- package/docs/api/variables/ProjectsListGlass.md +11 -0
- package/docs/api/variables/RainbowProgressGlass.md +11 -0
- package/docs/api/variables/RepositoryCardGlass.md +11 -0
- package/docs/api/variables/RepositoryHeaderGlass.md +11 -0
- package/docs/api/variables/RepositoryMetadataGlass.md +11 -0
- package/docs/api/variables/SearchBoxGlass.md +11 -0
- package/docs/api/variables/SegmentedControlGlass.md +11 -0
- package/docs/api/variables/SkeletonGlass.md +11 -0
- package/docs/api/variables/SliderGlass.md +11 -0
- package/docs/api/variables/SortDropdownGlass.md +11 -0
- package/docs/api/variables/StatItemGlass.md +11 -0
- package/docs/api/variables/StatusIndicatorGlass.md +11 -0
- package/docs/api/variables/THEMES.md +11 -0
- package/docs/api/variables/THEME_CONFIG.md +11 -0
- package/docs/api/variables/TabsGlass.md +52 -0
- package/docs/api/variables/ThemeToggleGlass.md +11 -0
- package/docs/api/variables/ToggleGlass.md +11 -0
- package/docs/api/variables/TooltipGlass.md +11 -0
- package/docs/api/variables/TouchTarget.md +35 -0
- package/docs/api/variables/TrustScoreCardGlass.md +11 -0
- package/docs/api/variables/TrustScoreDisplayGlass.md +11 -0
- package/docs/api/variables/UserInfoGlass.md +11 -0
- package/docs/api/variables/UserStatsLineGlass.md +11 -0
- package/docs/api/variables/YearCardGlass.md +11 -0
- package/docs/api/variables/alertVariants.md +21 -0
- package/docs/api/variables/avatarSizes.md +21 -0
- package/docs/api/variables/badgeVariants.md +21 -0
- package/docs/api/variables/buttonGlassVariants.md +21 -0
- package/docs/api/variables/cardIntensity.md +21 -0
- package/docs/api/variables/dropdownAlign.md +21 -0
- package/docs/api/variables/inputVariants.md +21 -0
- package/docs/api/variables/modalSizes.md +21 -0
- package/docs/api/variables/notificationVariants.md +21 -0
- package/docs/api/variables/progressSizes.md +21 -0
- package/docs/api/variables/shadcnAlertVariants.md +21 -0
- package/docs/api/variables/shadcnBadgeVariants.md +21 -0
- package/docs/api/variables/shadcnButtonVariants.md +21 -0
- package/docs/api/variables/skeletonVariants.md +21 -0
- package/docs/api/variables/statusSizes.md +21 -0
- package/docs/api/variables/toggleSizes.md +21 -0
- package/docs/api/variables/tooltipPositions.md +21 -0
- package/docs/design-system/UI_DESIGN.md +628 -0
- package/docs/migration/CSS_VARIABLES_MIGRATION_2.0.md +325 -0
- package/docs/migration/modal-glass-compound-api.md +458 -0
- package/docs/migration/select-to-combobox.md +386 -0
- package/docs/migration/tabs-glass-compound-api.md +579 -0
- package/docs/technical/DEPENDENCIES.md +291 -0
- package/docs/visual-testing-guide.md +324 -0
- package/package.json +16 -3
- package/dist/trust-score-card-glass-CNcQveNY.cjs +0 -8231
- package/dist/trust-score-card-glass-CNcQveNY.cjs.map +0 -1
- package/dist/trust-score-card-glass-CowcDyxH.js +0 -7795
- package/dist/trust-score-card-glass-CowcDyxH.js.map +0 -1
package/dist/index.d.ts
CHANGED
|
@@ -1,2391 +1 @@
|
|
|
1
|
-
import { ButtonHTMLAttributes } from 'react';
|
|
2
|
-
import { ClassProp } from 'class-variance-authority/types';
|
|
3
|
-
import { ClassValue } from 'clsx';
|
|
4
|
-
import { FC } from 'react';
|
|
5
|
-
import { FocusEvent as FocusEvent_2 } from 'react';
|
|
6
|
-
import { ForwardRefExoticComponent } from 'react';
|
|
7
|
-
import { HTMLAttributes } from 'react';
|
|
8
|
-
import { InputHTMLAttributes } from 'react';
|
|
9
|
-
import { JSX } from 'react/jsx-runtime';
|
|
10
|
-
import { KeyboardEvent as KeyboardEvent_2 } from 'react';
|
|
11
|
-
import { LucideIcon } from 'lucide-react';
|
|
12
|
-
import { MouseEvent as MouseEvent_2 } from 'react';
|
|
13
|
-
import * as React_2 from 'react';
|
|
14
|
-
import { ReactNode } from 'react';
|
|
15
|
-
import { RefAttributes } from 'react';
|
|
16
|
-
import { VariantProps } from 'class-variance-authority';
|
|
17
|
-
|
|
18
|
-
export declare const AICardGlass: ForwardRefExoticComponent<AICardGlassProps & RefAttributes<HTMLDivElement>>;
|
|
19
|
-
|
|
20
|
-
declare interface AICardGlassProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
21
|
-
readonly onGenerate?: () => void;
|
|
22
|
-
readonly features?: readonly string[];
|
|
23
|
-
readonly estimatedTime?: string;
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
export declare const AlertGlass: ForwardRefExoticComponent<AlertGlassProps & RefAttributes<HTMLDivElement>>;
|
|
27
|
-
|
|
28
|
-
/**
|
|
29
|
-
* Props for the AlertGlass component
|
|
30
|
-
*
|
|
31
|
-
* A glass-themed alert with semantic variants, dismissible option, and automatic icon selection.
|
|
32
|
-
* Features theme-aware styling and WCAG-compliant role attributes.
|
|
33
|
-
*
|
|
34
|
-
* @accessibility
|
|
35
|
-
* - **Keyboard Navigation:** Dismissible alerts include a keyboard-accessible close button (Tab + Enter/Space)
|
|
36
|
-
* - **Focus Management:** Close button receives visible focus ring (WCAG 2.4.7)
|
|
37
|
-
* - **Screen Readers:** Uses `role="alert"` for immediate announcement to screen readers (WCAG 4.1.3)
|
|
38
|
-
* - **Icon Semantics:** Icons are decorative and hidden from screen readers with `aria-hidden="true"`
|
|
39
|
-
* - **Variant Semantics:** Each variant uses distinct colors and icons for multi-modal communication (color + icon)
|
|
40
|
-
* - **Touch Targets:** Dismiss button meets minimum 44x44px touch target (WCAG 2.5.5)
|
|
41
|
-
* - **Color Contrast:** All variant text and backgrounds meet WCAG AA contrast ratio 4.5:1
|
|
42
|
-
* - **Motion:** Transitions respect `prefers-reduced-motion` settings
|
|
43
|
-
*
|
|
44
|
-
* @example
|
|
45
|
-
* ```tsx
|
|
46
|
-
* // Basic alert (info/default variant)
|
|
47
|
-
* <AlertGlass title="Information" variant="default">
|
|
48
|
-
* This is an informational message
|
|
49
|
-
* </AlertGlass>
|
|
50
|
-
*
|
|
51
|
-
* // Error alert with aria-live for dynamic updates
|
|
52
|
-
* <AlertGlass variant="destructive" title="Error" aria-live="assertive">
|
|
53
|
-
* Your session has expired. Please log in again.
|
|
54
|
-
* </AlertGlass>
|
|
55
|
-
*
|
|
56
|
-
* // Success alert
|
|
57
|
-
* <AlertGlass variant="success" title="Success">
|
|
58
|
-
* Your changes have been saved successfully.
|
|
59
|
-
* </AlertGlass>
|
|
60
|
-
*
|
|
61
|
-
* // Warning alert
|
|
62
|
-
* <AlertGlass variant="warning" title="Warning">
|
|
63
|
-
* Your subscription expires in 3 days.
|
|
64
|
-
* </AlertGlass>
|
|
65
|
-
*
|
|
66
|
-
* // Dismissible alert with accessible close button
|
|
67
|
-
* <AlertGlass
|
|
68
|
-
* variant="default"
|
|
69
|
-
* title="Welcome"
|
|
70
|
-
* dismissible
|
|
71
|
-
* onDismiss={() => setShowAlert(false)}
|
|
72
|
-
* >
|
|
73
|
-
* Check out our new features!
|
|
74
|
-
* </AlertGlass>
|
|
75
|
-
*
|
|
76
|
-
* // Alert without title
|
|
77
|
-
* <AlertGlass variant="destructive">
|
|
78
|
-
* Quick error message without title
|
|
79
|
-
* </AlertGlass>
|
|
80
|
-
*
|
|
81
|
-
* // Form validation alert
|
|
82
|
-
* <form onSubmit={handleSubmit}>
|
|
83
|
-
* {formError && (
|
|
84
|
-
* <AlertGlass variant="destructive" title="Validation Error" role="alert">
|
|
85
|
-
* {formError}
|
|
86
|
-
* </AlertGlass>
|
|
87
|
-
* )}
|
|
88
|
-
* <InputGlass label="Email" />
|
|
89
|
-
* <ButtonGlass type="submit">Submit</ButtonGlass>
|
|
90
|
-
* </form>
|
|
91
|
-
* ```
|
|
92
|
-
*/
|
|
93
|
-
export declare interface AlertGlassProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'style' | 'title'>, VariantProps<typeof alertVariants> {
|
|
94
|
-
readonly title?: string;
|
|
95
|
-
readonly children: ReactNode;
|
|
96
|
-
readonly dismissible?: boolean;
|
|
97
|
-
readonly onDismiss?: () => void;
|
|
98
|
-
}
|
|
99
|
-
|
|
100
|
-
export declare type AlertType = AlertVariant;
|
|
101
|
-
|
|
102
|
-
/**
|
|
103
|
-
* AlertGlass CVA Variants
|
|
104
|
-
* Extracted for Fast Refresh compatibility
|
|
105
|
-
*/
|
|
106
|
-
export declare type AlertVariant = 'default' | 'destructive' | 'success' | 'warning' | 'info' | 'error';
|
|
107
|
-
|
|
108
|
-
export declare const alertVariants: (props?: ({
|
|
109
|
-
variant?: "default" | "destructive" | "success" | "warning" | "info" | "error" | null | undefined;
|
|
110
|
-
} & ClassProp) | undefined) => string;
|
|
111
|
-
|
|
112
|
-
export declare const AvatarGlass: ForwardRefExoticComponent<AvatarGlassProps & RefAttributes<HTMLDivElement>>;
|
|
113
|
-
|
|
114
|
-
/**
|
|
115
|
-
* Props for the AvatarGlass component
|
|
116
|
-
*
|
|
117
|
-
* A glass-themed avatar component with status indicators and size variants.
|
|
118
|
-
* Displays user initials with theme-aware styling and optional status badge.
|
|
119
|
-
*
|
|
120
|
-
* @example
|
|
121
|
-
* ```tsx
|
|
122
|
-
* // Basic avatar
|
|
123
|
-
* <AvatarGlass name="John Doe" />
|
|
124
|
-
*
|
|
125
|
-
* // With status indicator
|
|
126
|
-
* <AvatarGlass name="Jane Smith" status="online" size="lg" />
|
|
127
|
-
*
|
|
128
|
-
* // Different sizes
|
|
129
|
-
* <AvatarGlass name="Alex" size="sm" />
|
|
130
|
-
* <AvatarGlass name="Sam" size="xl" />
|
|
131
|
-
*
|
|
132
|
-
* // As a link (asChild pattern)
|
|
133
|
-
* <AvatarGlass asChild name="Sarah Connor" status="online">
|
|
134
|
-
* <a href="/profile/sarah">View Profile</a>
|
|
135
|
-
* </AvatarGlass>
|
|
136
|
-
* ```
|
|
137
|
-
*/
|
|
138
|
-
export declare interface AvatarGlassProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'style'>, VariantProps<typeof avatarSizes> {
|
|
139
|
-
/**
|
|
140
|
-
* Render as child element instead of div (polymorphic rendering).
|
|
141
|
-
* Useful for making avatars clickable links.
|
|
142
|
-
* @default false
|
|
143
|
-
* @example
|
|
144
|
-
* ```tsx
|
|
145
|
-
* <AvatarGlass asChild name="John">
|
|
146
|
-
* <a href="/profile">View Profile</a>
|
|
147
|
-
* </AvatarGlass>
|
|
148
|
-
* ```
|
|
149
|
-
*/
|
|
150
|
-
readonly asChild?: boolean;
|
|
151
|
-
/**
|
|
152
|
-
* Full name of the user. Automatically generates initials (first 2 letters).
|
|
153
|
-
* @example "John Doe" → "JD"
|
|
154
|
-
*/
|
|
155
|
-
readonly name: string;
|
|
156
|
-
/**
|
|
157
|
-
* Optional status indicator with glow effect
|
|
158
|
-
* @default undefined
|
|
159
|
-
*/
|
|
160
|
-
readonly status?: AvatarStatus;
|
|
161
|
-
/**
|
|
162
|
-
* Size variant of the avatar
|
|
163
|
-
* @default "md"
|
|
164
|
-
*/
|
|
165
|
-
readonly size?: 'sm' | 'md' | 'lg' | 'xl';
|
|
166
|
-
}
|
|
167
|
-
|
|
168
|
-
/**
|
|
169
|
-
* AvatarGlass CVA Variants
|
|
170
|
-
* Extracted for Fast Refresh compatibility
|
|
171
|
-
*/
|
|
172
|
-
export declare type AvatarSize = 'sm' | 'md' | 'lg' | 'xl';
|
|
173
|
-
|
|
174
|
-
export declare const avatarSizes: (props?: ({
|
|
175
|
-
size?: "sm" | "md" | "lg" | "xl" | null | undefined;
|
|
176
|
-
} & ClassProp) | undefined) => string;
|
|
177
|
-
|
|
178
|
-
/**
|
|
179
|
-
* Avatar status indicator type
|
|
180
|
-
*/
|
|
181
|
-
export declare type AvatarStatus = 'online' | 'offline' | 'busy' | 'away';
|
|
182
|
-
|
|
183
|
-
export declare const BadgeGlass: ForwardRefExoticComponent<BadgeGlassProps & RefAttributes<HTMLSpanElement>>;
|
|
184
|
-
|
|
185
|
-
/**
|
|
186
|
-
* Props for the BadgeGlass component
|
|
187
|
-
*
|
|
188
|
-
* A glass-themed badge with semantic variants and optional animated status dot.
|
|
189
|
-
* Features shadcn/ui compatible variants plus extended Glass UI variants.
|
|
190
|
-
*
|
|
191
|
-
* @accessibility
|
|
192
|
-
* - **Keyboard Navigation:** Badges are non-interactive by default (display-only)
|
|
193
|
-
* - **Focus Management:** N/A - badges do not receive focus unless wrapped in interactive elements
|
|
194
|
-
* - **Screen Readers:** Semantic `<span>` element, content announced naturally
|
|
195
|
-
* - **Status Indicators:** Use `aria-label` to provide context for status badges (e.g., "Status: Active")
|
|
196
|
-
* - **Animated Dot:** Pulse animation respects `prefers-reduced-motion` settings
|
|
197
|
-
* - **Touch Targets:** N/A for display badges, ensure 44x44px if wrapping in button/link (WCAG 2.5.5)
|
|
198
|
-
* - **Color Contrast:** All variant text meets WCAG AA contrast ratio 4.5:1 against badge background
|
|
199
|
-
* - **Motion:** Dot pulse animation can be disabled for users with motion sensitivity
|
|
200
|
-
*
|
|
201
|
-
* @example
|
|
202
|
-
* ```tsx
|
|
203
|
-
* // Basic badge with variant
|
|
204
|
-
* <BadgeGlass variant="default">New</BadgeGlass>
|
|
205
|
-
*
|
|
206
|
-
* // Status badge with aria-label for screen readers
|
|
207
|
-
* <BadgeGlass variant="success" aria-label="Status: Active">
|
|
208
|
-
* Active
|
|
209
|
-
* </BadgeGlass>
|
|
210
|
-
*
|
|
211
|
-
* // Different variants (shadcn/ui compatible)
|
|
212
|
-
* <BadgeGlass variant="default">Default</BadgeGlass>
|
|
213
|
-
* <BadgeGlass variant="secondary">Secondary</BadgeGlass>
|
|
214
|
-
* <BadgeGlass variant="destructive">Error</BadgeGlass>
|
|
215
|
-
* <BadgeGlass variant="outline">Outline</BadgeGlass>
|
|
216
|
-
*
|
|
217
|
-
* // Extended Glass UI variants
|
|
218
|
-
* <BadgeGlass variant="success">Success</BadgeGlass>
|
|
219
|
-
* <BadgeGlass variant="warning">Warning</BadgeGlass>
|
|
220
|
-
* <BadgeGlass variant="info">Info</BadgeGlass>
|
|
221
|
-
*
|
|
222
|
-
* // With animated status dot
|
|
223
|
-
* <BadgeGlass variant="success" dot aria-label="Status: Online">
|
|
224
|
-
* Online
|
|
225
|
-
* </BadgeGlass>
|
|
226
|
-
* <BadgeGlass variant="destructive" dot aria-label="Status: Offline">
|
|
227
|
-
* Offline
|
|
228
|
-
* </BadgeGlass>
|
|
229
|
-
*
|
|
230
|
-
* // Size variants
|
|
231
|
-
* <BadgeGlass size="sm">Small</BadgeGlass>
|
|
232
|
-
* <BadgeGlass size="md">Medium</BadgeGlass>
|
|
233
|
-
* <BadgeGlass size="lg">Large</BadgeGlass>
|
|
234
|
-
*
|
|
235
|
-
* // Inside interactive elements (ensure accessible labels)
|
|
236
|
-
* <button aria-label="Filter by active status">
|
|
237
|
-
* Filter: <BadgeGlass variant="success">Active</BadgeGlass>
|
|
238
|
-
* </button>
|
|
239
|
-
*
|
|
240
|
-
* // Count badge with semantic meaning
|
|
241
|
-
* <div>
|
|
242
|
-
* <span>Notifications</span>
|
|
243
|
-
* <BadgeGlass variant="destructive" aria-label="3 unread notifications">
|
|
244
|
-
* 3
|
|
245
|
-
* </BadgeGlass>
|
|
246
|
-
* </div>
|
|
247
|
-
* ```
|
|
248
|
-
*/
|
|
249
|
-
export declare interface BadgeGlassProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'style'>, VariantProps<typeof badgeVariants> {
|
|
250
|
-
readonly children: ReactNode;
|
|
251
|
-
readonly variant?: BadgeVariant;
|
|
252
|
-
readonly dot?: boolean;
|
|
253
|
-
}
|
|
254
|
-
|
|
255
|
-
export declare type BadgeSize = 'sm' | 'md' | 'lg';
|
|
256
|
-
|
|
257
|
-
/**
|
|
258
|
-
* BadgeGlass CVA Variants
|
|
259
|
-
* Extracted for Fast Refresh compatibility
|
|
260
|
-
*/
|
|
261
|
-
export declare type BadgeVariant = 'default' | 'secondary' | 'destructive' | 'outline' | 'success' | 'warning' | 'info';
|
|
262
|
-
|
|
263
|
-
export declare const badgeVariants: (props?: ({
|
|
264
|
-
size?: "sm" | "md" | "lg" | null | undefined;
|
|
265
|
-
} & ClassProp) | undefined) => string;
|
|
266
|
-
|
|
267
|
-
export declare const BaseProgressGlass: ForwardRefExoticComponent<BaseProgressGlassProps & RefAttributes<HTMLDivElement>>;
|
|
268
|
-
|
|
269
|
-
declare interface BaseProgressGlassProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
|
|
270
|
-
readonly value?: number;
|
|
271
|
-
readonly max?: number;
|
|
272
|
-
readonly children?: ReactNode | ((percentage: number) => ReactNode);
|
|
273
|
-
}
|
|
274
|
-
|
|
275
|
-
declare type Breakpoint = keyof typeof BREAKPOINTS;
|
|
276
|
-
|
|
277
|
-
/**
|
|
278
|
-
* Tailwind CSS breakpoints
|
|
279
|
-
* @see https://tailwindcss.com/docs/responsive-design
|
|
280
|
-
*/
|
|
281
|
-
declare const BREAKPOINTS: {
|
|
282
|
-
readonly xs: 0;
|
|
283
|
-
readonly sm: 640;
|
|
284
|
-
readonly md: 768;
|
|
285
|
-
readonly lg: 1024;
|
|
286
|
-
readonly xl: 1280;
|
|
287
|
-
readonly '2xl': 1536;
|
|
288
|
-
};
|
|
289
|
-
|
|
290
|
-
export declare const ButtonGlass: ForwardRefExoticComponent<ButtonGlassProps & RefAttributes<HTMLButtonElement>>;
|
|
291
|
-
|
|
292
|
-
/**
|
|
293
|
-
* Props for the ButtonGlass component
|
|
294
|
-
*
|
|
295
|
-
* A glass-themed button with ripple effects, loading states, and icon support.
|
|
296
|
-
* Features theme-aware styling and hover animations.
|
|
297
|
-
*
|
|
298
|
-
* @accessibility
|
|
299
|
-
* - **Keyboard Navigation:** Fully keyboard accessible with native `<button>` element
|
|
300
|
-
* - **Focus Management:** Visible focus ring using `--focus-glow` CSS variable (WCAG 2.4.7)
|
|
301
|
-
* - **Screen Readers:** Semantic `<button>` element, disabled state announced automatically
|
|
302
|
-
* - **Loading State:** When loading=true, button is disabled and loading spinner is visible
|
|
303
|
-
* - **Touch Targets:** Minimum 44x44px touch target (WCAG 2.5.5) via size variants
|
|
304
|
-
* - **Color Contrast:** All variants meet WCAG AA contrast ratio 4.5:1 minimum
|
|
305
|
-
* - **Motion:** Respects `prefers-reduced-motion` for ripple/shine animations
|
|
306
|
-
*
|
|
307
|
-
* @example
|
|
308
|
-
* ```tsx
|
|
309
|
-
* // Basic button
|
|
310
|
-
* <ButtonGlass variant="primary">Click me</ButtonGlass>
|
|
311
|
-
*
|
|
312
|
-
* // With icon and aria-label for icon-only buttons
|
|
313
|
-
* <ButtonGlass icon={Check} iconPosition="left">Save</ButtonGlass>
|
|
314
|
-
* <ButtonGlass icon={X} size="icon" aria-label="Close dialog" />
|
|
315
|
-
*
|
|
316
|
-
* // Loading state (automatically disables and shows spinner)
|
|
317
|
-
* <ButtonGlass loading aria-live="polite">Processing...</ButtonGlass>
|
|
318
|
-
*
|
|
319
|
-
* // Different variants
|
|
320
|
-
* <ButtonGlass variant="ghost">Cancel</ButtonGlass>
|
|
321
|
-
* <ButtonGlass variant="success">Confirm</ButtonGlass>
|
|
322
|
-
* <ButtonGlass variant="destructive">Delete</ButtonGlass>
|
|
323
|
-
*
|
|
324
|
-
* // As a link (asChild pattern) - maintains semantic HTML
|
|
325
|
-
* <ButtonGlass asChild variant="primary">
|
|
326
|
-
* <a href="/dashboard">Go to Dashboard</a>
|
|
327
|
-
* </ButtonGlass>
|
|
328
|
-
*
|
|
329
|
-
* // With Next.js Link
|
|
330
|
-
* <ButtonGlass asChild variant="ghost">
|
|
331
|
-
* <Link href="/settings">Settings</Link>
|
|
332
|
-
* </ButtonGlass>
|
|
333
|
-
*
|
|
334
|
-
* // Form submit button
|
|
335
|
-
* <ButtonGlass type="submit" variant="primary">
|
|
336
|
-
* Submit Form
|
|
337
|
-
* </ButtonGlass>
|
|
338
|
-
* ```
|
|
339
|
-
*/
|
|
340
|
-
export declare interface ButtonGlassProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'style'>, VariantProps<typeof buttonGlassVariants> {
|
|
341
|
-
/**
|
|
342
|
-
* Render as child element instead of button (polymorphic rendering).
|
|
343
|
-
* Useful for rendering buttons as links or other interactive elements.
|
|
344
|
-
*
|
|
345
|
-
* **Note:** When using `asChild`, decorative effects (ripple, shine, glow)
|
|
346
|
-
* are disabled to maintain compatibility with Radix UI Slot.
|
|
347
|
-
* Only styles and event handlers are passed to the child element.
|
|
348
|
-
*
|
|
349
|
-
* @default false
|
|
350
|
-
* @example
|
|
351
|
-
* ```tsx
|
|
352
|
-
* <ButtonGlass asChild>
|
|
353
|
-
* <a href="/about">About Us</a>
|
|
354
|
-
* </ButtonGlass>
|
|
355
|
-
* ```
|
|
356
|
-
*/
|
|
357
|
-
readonly asChild?: boolean;
|
|
358
|
-
/**
|
|
359
|
-
* Visual style variant of the button
|
|
360
|
-
* @default "primary"
|
|
361
|
-
*/
|
|
362
|
-
readonly variant?: ButtonGlassVariant;
|
|
363
|
-
/**
|
|
364
|
-
* Show loading spinner and disable interactions
|
|
365
|
-
* @default false
|
|
366
|
-
*/
|
|
367
|
-
readonly loading?: boolean;
|
|
368
|
-
/**
|
|
369
|
-
* Icon component from lucide-react to display
|
|
370
|
-
* @example icon={Check}
|
|
371
|
-
*/
|
|
372
|
-
readonly icon?: LucideIcon;
|
|
373
|
-
/**
|
|
374
|
-
* Position of the icon relative to button text
|
|
375
|
-
* @default "left"
|
|
376
|
-
*/
|
|
377
|
-
readonly iconPosition?: 'left' | 'right';
|
|
378
|
-
/**
|
|
379
|
-
* Size variant of the button
|
|
380
|
-
* @default "md"
|
|
381
|
-
*/
|
|
382
|
-
readonly size?: 'sm' | 'md' | 'lg' | 'icon';
|
|
383
|
-
}
|
|
384
|
-
|
|
385
|
-
export declare type ButtonGlassSize = 'sm' | 'md' | 'lg' | 'xl' | 'icon';
|
|
386
|
-
|
|
387
|
-
/**
|
|
388
|
-
* ButtonGlass CVA Variants
|
|
389
|
-
* Extracted for Fast Refresh compatibility
|
|
390
|
-
*/
|
|
391
|
-
export declare type ButtonGlassVariant = 'primary' | 'secondary' | 'ghost' | 'destructive' | 'success' | 'text';
|
|
392
|
-
|
|
393
|
-
export declare const buttonGlassVariants: (props?: ({
|
|
394
|
-
variant?: "destructive" | "success" | "text" | "secondary" | "primary" | "ghost" | null | undefined;
|
|
395
|
-
size?: "sm" | "md" | "lg" | "xl" | "icon" | null | undefined;
|
|
396
|
-
} & ClassProp) | undefined) => string;
|
|
397
|
-
|
|
398
|
-
export declare const cardIntensity: (props?: ({
|
|
399
|
-
intensity?: "medium" | "strong" | "subtle" | null | undefined;
|
|
400
|
-
hover?: boolean | null | undefined;
|
|
401
|
-
padding?: "default" | "none" | "compact" | "featured" | null | undefined;
|
|
402
|
-
} & ClassProp) | undefined) => string;
|
|
403
|
-
|
|
404
|
-
export declare const CareerStatsGlass: ForwardRefExoticComponent<CareerStatsGlassProps & RefAttributes<HTMLDivElement>>;
|
|
405
|
-
|
|
406
|
-
declare interface CareerStatsGlassProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
407
|
-
readonly totalCommits?: number;
|
|
408
|
-
readonly totalPRs?: number;
|
|
409
|
-
readonly totalRepos?: number;
|
|
410
|
-
readonly years?: readonly YearData[];
|
|
411
|
-
}
|
|
412
|
-
|
|
413
|
-
export declare const CareerStatsHeaderGlass: ForwardRefExoticComponent<CareerStatsHeaderGlassProps & RefAttributes<HTMLDivElement>>;
|
|
414
|
-
|
|
415
|
-
declare interface CareerStatsHeaderGlassProps extends HTMLAttributes<HTMLDivElement> {
|
|
416
|
-
/** Total commits count */
|
|
417
|
-
readonly totalCommits: number;
|
|
418
|
-
/** Total pull requests count */
|
|
419
|
-
readonly totalPRs: number;
|
|
420
|
-
/** Total repositories count */
|
|
421
|
-
readonly totalRepos: number;
|
|
422
|
-
/** Header title */
|
|
423
|
-
readonly title?: string;
|
|
424
|
-
/** Stats wrap on mobile */
|
|
425
|
-
readonly wrapStats?: boolean;
|
|
426
|
-
}
|
|
427
|
-
|
|
428
|
-
export declare const CheckboxGlass: ForwardRefExoticComponent<CheckboxGlassProps & RefAttributes<HTMLInputElement>>;
|
|
429
|
-
|
|
430
|
-
/**
|
|
431
|
-
* Props for the CheckboxGlass component
|
|
432
|
-
*
|
|
433
|
-
* A glass-themed checkbox with accessible keyboard navigation, focus management,
|
|
434
|
-
* and touch-friendly targets. Features glow effects and theme-aware styling.
|
|
435
|
-
*
|
|
436
|
-
* @accessibility
|
|
437
|
-
* - **Keyboard Navigation:** Full keyboard support with Enter/Space to toggle, Tab to focus (WCAG 2.1.1)
|
|
438
|
-
* - **Focus Management:** Visible focus ring using `--focus-glow` CSS variable (WCAG 2.4.7)
|
|
439
|
-
* - **Screen Readers:** Dual implementation with native `<input type="checkbox">` (hidden) + visual `<div role="checkbox">`
|
|
440
|
-
* - **ARIA Attributes:** Uses `role="checkbox"` and `aria-checked` for proper state announcement
|
|
441
|
-
* - **Label Association:** Visual label automatically associated with checkbox via `<label>` wrapper
|
|
442
|
-
* - **Touch Targets:** 44x44px minimum touch area per Apple HIG (WCAG 2.5.5 compliance)
|
|
443
|
-
* - **Color Contrast:** Check mark and backgrounds meet WCAG AA contrast ratio 4.5:1
|
|
444
|
-
* - **Motion:** Transitions respect `prefers-reduced-motion` settings
|
|
445
|
-
*
|
|
446
|
-
* @example
|
|
447
|
-
* ```tsx
|
|
448
|
-
* // Basic checkbox with label
|
|
449
|
-
* <CheckboxGlass checked={agreed} onChange={setAgreed} label="I agree to terms" />
|
|
450
|
-
*
|
|
451
|
-
* // Checkbox with accessible name (no visual label)
|
|
452
|
-
* <CheckboxGlass
|
|
453
|
-
* checked={checked}
|
|
454
|
-
* onChange={setChecked}
|
|
455
|
-
* aria-label="Select all items"
|
|
456
|
-
* />
|
|
457
|
-
*
|
|
458
|
-
* // Form integration with validation
|
|
459
|
-
* <form onSubmit={handleSubmit}>
|
|
460
|
-
* <CheckboxGlass
|
|
461
|
-
* checked={newsletter}
|
|
462
|
-
* onChange={setNewsletter}
|
|
463
|
-
* label="Subscribe to newsletter"
|
|
464
|
-
* aria-describedby="newsletter-help"
|
|
465
|
-
* />
|
|
466
|
-
* <p id="newsletter-help">Receive weekly updates</p>
|
|
467
|
-
* <CheckboxGlass
|
|
468
|
-
* checked={terms}
|
|
469
|
-
* onChange={setTerms}
|
|
470
|
-
* label="Accept terms and conditions"
|
|
471
|
-
* required
|
|
472
|
-
* aria-invalid={submitted && !terms}
|
|
473
|
-
* />
|
|
474
|
-
* {submitted && !terms && (
|
|
475
|
-
* <span role="alert">You must accept the terms</span>
|
|
476
|
-
* )}
|
|
477
|
-
* </form>
|
|
478
|
-
*
|
|
479
|
-
* // Disabled checkbox (state announced to screen readers)
|
|
480
|
-
* <CheckboxGlass
|
|
481
|
-
* checked={true}
|
|
482
|
-
* onChange={() => {}}
|
|
483
|
-
* label="This option is locked"
|
|
484
|
-
* disabled
|
|
485
|
-
* />
|
|
486
|
-
*
|
|
487
|
-
* // Checkbox group with fieldset
|
|
488
|
-
* <fieldset>
|
|
489
|
-
* <legend>Select your interests</legend>
|
|
490
|
-
* <CheckboxGlass
|
|
491
|
-
* checked={interests.tech}
|
|
492
|
-
* onChange={(checked) => setInterests({ ...interests, tech: checked })}
|
|
493
|
-
* label="Technology"
|
|
494
|
-
* />
|
|
495
|
-
* <CheckboxGlass
|
|
496
|
-
* checked={interests.design}
|
|
497
|
-
* onChange={(checked) => setInterests({ ...interests, design: checked })}
|
|
498
|
-
* label="Design"
|
|
499
|
-
* />
|
|
500
|
-
* </fieldset>
|
|
501
|
-
* ```
|
|
502
|
-
*/
|
|
503
|
-
export declare interface CheckboxGlassProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
|
|
504
|
-
readonly checked: boolean;
|
|
505
|
-
readonly onChange?: (checked: boolean) => void;
|
|
506
|
-
readonly label?: string;
|
|
507
|
-
}
|
|
508
|
-
|
|
509
|
-
declare type CircularMetricColor = 'emerald' | 'amber' | 'blue' | 'red';
|
|
510
|
-
|
|
511
|
-
/**
|
|
512
|
-
* CircularMetricGlass - Compact circular progress metric display
|
|
513
|
-
*
|
|
514
|
-
* Designed for mobile layouts where rectangular MetricCardGlass is too wide.
|
|
515
|
-
* Shows a circular progress indicator with percentage inside and label below.
|
|
516
|
-
*
|
|
517
|
-
* @example
|
|
518
|
-
* ```tsx
|
|
519
|
-
* <CircularMetricGlass label="Reg" value={84} color="emerald" />
|
|
520
|
-
* ```
|
|
521
|
-
*/
|
|
522
|
-
export declare const CircularMetricGlass: ForwardRefExoticComponent<CircularMetricGlassProps & RefAttributes<HTMLDivElement>>;
|
|
523
|
-
|
|
524
|
-
declare interface CircularMetricGlassProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
525
|
-
/** Metric label (e.g., "Reg", "Imp") */
|
|
526
|
-
readonly label: string;
|
|
527
|
-
/** Metric value (0-100) */
|
|
528
|
-
readonly value: number;
|
|
529
|
-
/** Metric color */
|
|
530
|
-
readonly color?: CircularMetricColor;
|
|
531
|
-
/** Size variant */
|
|
532
|
-
readonly size?: 'sm' | 'md';
|
|
533
|
-
}
|
|
534
|
-
|
|
535
|
-
export declare const CircularProgressGlass: ForwardRefExoticComponent<CircularProgressGlassProps & RefAttributes<HTMLDivElement>>;
|
|
536
|
-
|
|
537
|
-
declare interface CircularProgressGlassProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'>, VariantProps<typeof circularProgressVariants> {
|
|
538
|
-
/** Progress value (0-100) for determinate variant */
|
|
539
|
-
readonly value?: number;
|
|
540
|
-
/** Variant type */
|
|
541
|
-
readonly variant?: 'determinate' | 'indeterminate';
|
|
542
|
-
/** Stroke width in pixels */
|
|
543
|
-
readonly thickness?: number;
|
|
544
|
-
/** Background track width in pixels */
|
|
545
|
-
readonly trackWidth?: number;
|
|
546
|
-
/** Progress color gradient */
|
|
547
|
-
readonly color?: CircularProgressGradient;
|
|
548
|
-
/** Track color (background circle) */
|
|
549
|
-
readonly trackColor?: string;
|
|
550
|
-
/** Show percentage label in center */
|
|
551
|
-
readonly showLabel?: boolean;
|
|
552
|
-
/** Custom label text (overrides percentage) */
|
|
553
|
-
readonly label?: string;
|
|
554
|
-
/** Custom color for the center label text */
|
|
555
|
-
readonly labelColor?: string;
|
|
556
|
-
/** Show glow effect */
|
|
557
|
-
readonly showGlow?: boolean;
|
|
558
|
-
/** Glow intensity */
|
|
559
|
-
readonly glowIntensity?: 'low' | 'medium' | 'high';
|
|
560
|
-
/** Stroke linecap style */
|
|
561
|
-
readonly strokeLinecap?: 'round' | 'butt' | 'square';
|
|
562
|
-
/** Animation duration in seconds */
|
|
563
|
-
readonly animationDuration?: number;
|
|
564
|
-
}
|
|
565
|
-
|
|
566
|
-
declare type CircularProgressGradient = 'violet' | 'blue' | 'cyan' | 'amber' | 'emerald' | 'rose';
|
|
567
|
-
|
|
568
|
-
declare const circularProgressVariants: (props?: ({
|
|
569
|
-
size?: "sm" | "md" | "lg" | "xl" | null | undefined;
|
|
570
|
-
} & ClassProp) | undefined) => string;
|
|
571
|
-
|
|
572
|
-
/**
|
|
573
|
-
* Combine class names with Tailwind merge support (shadcn standard)
|
|
574
|
-
* @param inputs - Array of class values
|
|
575
|
-
* @returns Merged class string
|
|
576
|
-
*/
|
|
577
|
-
export declare const cn: (...inputs: ClassValue[]) => string;
|
|
578
|
-
|
|
579
|
-
export declare const ComboBoxGlass: <T = string>(props: ComboBoxGlassProps<T> & {
|
|
580
|
-
ref?: React.ForwardedRef<HTMLButtonElement>;
|
|
581
|
-
}) => ReturnType<typeof ComboBoxGlassInner>;
|
|
582
|
-
|
|
583
|
-
declare function ComboBoxGlassInner<T = string>({ options, value, onChange, placeholder, emptyText, searchPlaceholder, glassVariant, disabled, className, popoverClassName, clearable, side, align, label, error, success, required, size, searchable, icon: TriggerIcon, }: ComboBoxGlassProps<T>, ref: React.ForwardedRef<HTMLButtonElement>): JSX.Element;
|
|
584
|
-
|
|
585
|
-
declare namespace ComboBoxGlassInner {
|
|
586
|
-
var displayName: string;
|
|
587
|
-
}
|
|
588
|
-
|
|
589
|
-
declare interface ComboBoxGlassProps<T = string> {
|
|
590
|
-
/** Available options */
|
|
591
|
-
readonly options: readonly ComboBoxOption<T>[];
|
|
592
|
-
/** Currently selected value */
|
|
593
|
-
readonly value?: T;
|
|
594
|
-
/** Callback when value changes */
|
|
595
|
-
readonly onChange?: (value: T | undefined) => void;
|
|
596
|
-
/** Placeholder text for trigger button */
|
|
597
|
-
readonly placeholder?: string;
|
|
598
|
-
/** Text shown when no results found */
|
|
599
|
-
readonly emptyText?: string;
|
|
600
|
-
/** Placeholder for search input */
|
|
601
|
-
readonly searchPlaceholder?: string;
|
|
602
|
-
/** Glass variant style */
|
|
603
|
-
readonly glassVariant?: GlassVariant;
|
|
604
|
-
/** Disabled state */
|
|
605
|
-
readonly disabled?: boolean;
|
|
606
|
-
/** Custom className for container */
|
|
607
|
-
readonly className?: string;
|
|
608
|
-
/** Custom className for popover content */
|
|
609
|
-
readonly popoverClassName?: string;
|
|
610
|
-
/** Allow clearing selection */
|
|
611
|
-
readonly clearable?: boolean;
|
|
612
|
-
/** Popover side */
|
|
613
|
-
readonly side?: 'top' | 'right' | 'bottom' | 'left';
|
|
614
|
-
/** Popover alignment */
|
|
615
|
-
readonly align?: 'start' | 'center' | 'end';
|
|
616
|
-
/** Label text displayed above the field */
|
|
617
|
-
readonly label?: string;
|
|
618
|
-
/** Error message - displays in red below the field */
|
|
619
|
-
readonly error?: string;
|
|
620
|
-
/** Success message - displays in green if no error */
|
|
621
|
-
readonly success?: string;
|
|
622
|
-
/** Shows required asterisk (*) next to label */
|
|
623
|
-
readonly required?: boolean;
|
|
624
|
-
/** Size variant (affects trigger button height and padding) */
|
|
625
|
-
readonly size?: InputGlassSize;
|
|
626
|
-
/** Enable/disable search functionality */
|
|
627
|
-
readonly searchable?: boolean;
|
|
628
|
-
/** Optional icon for trigger button (displayed before text) */
|
|
629
|
-
readonly icon?: LucideIcon;
|
|
630
|
-
}
|
|
631
|
-
|
|
632
|
-
declare interface ComboBoxOption<T = string> {
|
|
633
|
-
readonly value: T;
|
|
634
|
-
readonly label: string;
|
|
635
|
-
readonly disabled?: boolean;
|
|
636
|
-
/** Optional icon component for the option */
|
|
637
|
-
readonly icon?: LucideIcon;
|
|
638
|
-
}
|
|
639
|
-
|
|
640
|
-
export declare const ContributionMetricsGlass: ForwardRefExoticComponent<ContributionMetricsGlassProps & RefAttributes<HTMLDivElement>>;
|
|
641
|
-
|
|
642
|
-
declare interface ContributionMetricsGlassProps extends HTMLAttributes<HTMLDivElement> {
|
|
643
|
-
/** User's commit count */
|
|
644
|
-
readonly userCommits: number;
|
|
645
|
-
/** User's contribution percentage */
|
|
646
|
-
readonly userContribution: number;
|
|
647
|
-
/** Total project commits (calculated if not provided) */
|
|
648
|
-
readonly totalProjectCommits?: number;
|
|
649
|
-
/** Estimated lines of code */
|
|
650
|
-
readonly estimatedLines?: number;
|
|
651
|
-
/** Grid layout (1 or 2 columns) */
|
|
652
|
-
readonly columns?: 1 | 2;
|
|
653
|
-
}
|
|
654
|
-
|
|
655
|
-
/**
|
|
656
|
-
* DropdownGlass CVA Variants
|
|
657
|
-
* Extracted for Fast Refresh compatibility
|
|
658
|
-
*/
|
|
659
|
-
export declare type DropdownAlign = 'left' | 'right';
|
|
660
|
-
|
|
661
|
-
export declare const dropdownAlign: (props?: ({
|
|
662
|
-
align?: "left" | "right" | null | undefined;
|
|
663
|
-
} & ClassProp) | undefined) => string;
|
|
664
|
-
|
|
665
|
-
export declare const DropdownGlass: React_2.ForwardRefExoticComponent<DropdownGlassProps & React_2.RefAttributes<HTMLDivElement>>;
|
|
666
|
-
|
|
667
|
-
/**
|
|
668
|
-
* Props for the DropdownGlass component
|
|
669
|
-
*
|
|
670
|
-
* A glass-themed dropdown menu with accessible keyboard navigation, based on Radix UI primitives.
|
|
671
|
-
* Features theme-aware styling, smooth animations, and WCAG-compliant interactions.
|
|
672
|
-
*
|
|
673
|
-
* @accessibility
|
|
674
|
-
* - **Keyboard Navigation:** Arrow keys navigate menu items, Enter/Space activates, Escape closes (WCAG 2.1.1)
|
|
675
|
-
* - **Focus Management:** Focus trapped within menu when open, returned to trigger on close (WCAG 2.4.3)
|
|
676
|
-
* - **Screen Readers:** Uses `role="menu"` and `role="menuitem"` for proper menu semantics (WCAG 4.1.3)
|
|
677
|
-
* - **ARIA Attributes:** Items marked with `data-highlighted` state for screen reader announcement
|
|
678
|
-
* - **Trigger Association:** Menu automatically associated with trigger button via Radix UI primitives
|
|
679
|
-
* - **Touch Targets:** All menu items meet minimum 44x44px touch target (WCAG 2.5.5)
|
|
680
|
-
* - **Color Contrast:** Menu text and backgrounds meet WCAG AA contrast ratio 4.5:1
|
|
681
|
-
* - **Motion:** Open/close animations respect `prefers-reduced-motion` settings
|
|
682
|
-
*
|
|
683
|
-
* @example
|
|
684
|
-
* ```tsx
|
|
685
|
-
* // Basic dropdown with icon items
|
|
686
|
-
* <DropdownGlass
|
|
687
|
-
* trigger={
|
|
688
|
-
* <button aria-label="Open menu">
|
|
689
|
-
* <MoreVertical className="w-5 h-5" />
|
|
690
|
-
* </button>
|
|
691
|
-
* }
|
|
692
|
-
* items={[
|
|
693
|
-
* { label: 'Edit', icon: Edit, onClick: handleEdit },
|
|
694
|
-
* { label: 'Delete', icon: Trash, onClick: handleDelete, danger: true }
|
|
695
|
-
* ]}
|
|
696
|
-
* />
|
|
697
|
-
*
|
|
698
|
-
* // Dropdown with dividers and alignment
|
|
699
|
-
* <DropdownGlass
|
|
700
|
-
* trigger={<ButtonGlass>Actions</ButtonGlass>}
|
|
701
|
-
* align="right"
|
|
702
|
-
* items={[
|
|
703
|
-
* { label: 'View', icon: Eye, onClick: () => navigate('/view') },
|
|
704
|
-
* { label: 'Edit', icon: Edit, onClick: () => setEditMode(true) },
|
|
705
|
-
* { divider: true },
|
|
706
|
-
* { label: 'Archive', icon: Archive, onClick: handleArchive },
|
|
707
|
-
* { divider: true },
|
|
708
|
-
* { label: 'Delete', icon: Trash, onClick: handleDelete, danger: true }
|
|
709
|
-
* ]}
|
|
710
|
-
* />
|
|
711
|
-
*
|
|
712
|
-
* // Dropdown in table row (ensure trigger has accessible label)
|
|
713
|
-
* <DropdownGlass
|
|
714
|
-
* trigger={
|
|
715
|
-
* <button aria-label={`Actions for ${user.name}`}>
|
|
716
|
-
* <MoreHorizontal />
|
|
717
|
-
* </button>
|
|
718
|
-
* }
|
|
719
|
-
* items={[
|
|
720
|
-
* { label: 'View Profile', onClick: () => viewProfile(user.id) },
|
|
721
|
-
* { label: 'Send Message', onClick: () => sendMessage(user.id) }
|
|
722
|
-
* ]}
|
|
723
|
-
* />
|
|
724
|
-
*
|
|
725
|
-
* // Dropdown with keyboard-friendly trigger
|
|
726
|
-
* <DropdownGlass
|
|
727
|
-
* trigger={
|
|
728
|
-
* <ButtonGlass
|
|
729
|
-
* icon={Settings}
|
|
730
|
-
* variant="ghost"
|
|
731
|
-
* aria-haspopup="menu"
|
|
732
|
-
* aria-label="Settings menu"
|
|
733
|
-
* >
|
|
734
|
-
* Settings
|
|
735
|
-
* </ButtonGlass>
|
|
736
|
-
* }
|
|
737
|
-
* items={[
|
|
738
|
-
* { label: 'Preferences', icon: Sliders, onClick: () => navigate('/settings/preferences') },
|
|
739
|
-
* { label: 'Security', icon: Lock, onClick: () => navigate('/settings/security') },
|
|
740
|
-
* { divider: true },
|
|
741
|
-
* { label: 'Log Out', icon: LogOut, onClick: handleLogout }
|
|
742
|
-
* ]}
|
|
743
|
-
* />
|
|
744
|
-
*
|
|
745
|
-
* // Advanced: Using Radix primitives directly (see component JSDoc for examples)
|
|
746
|
-
* ```
|
|
747
|
-
*/
|
|
748
|
-
export declare interface DropdownGlassProps {
|
|
749
|
-
readonly trigger: React_2.ReactNode;
|
|
750
|
-
readonly items: readonly DropdownItem[];
|
|
751
|
-
readonly align?: 'left' | 'right';
|
|
752
|
-
readonly className?: string;
|
|
753
|
-
}
|
|
754
|
-
|
|
755
|
-
export declare interface DropdownItem {
|
|
756
|
-
readonly label?: string;
|
|
757
|
-
readonly icon?: LucideIcon;
|
|
758
|
-
readonly onClick?: () => void;
|
|
759
|
-
readonly danger?: boolean;
|
|
760
|
-
readonly divider?: boolean;
|
|
761
|
-
}
|
|
762
|
-
|
|
763
|
-
export declare const ExpandableHeaderGlass: ForwardRefExoticComponent<ExpandableHeaderGlassProps & RefAttributes<HTMLButtonElement>>;
|
|
764
|
-
|
|
765
|
-
declare interface ExpandableHeaderGlassProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'title'> {
|
|
766
|
-
/** Header title */
|
|
767
|
-
readonly title: ReactNode;
|
|
768
|
-
/** Leading icon component */
|
|
769
|
-
readonly icon?: LucideIcon;
|
|
770
|
-
/** Icon color (CSS variable or color value) */
|
|
771
|
-
readonly iconColor?: string;
|
|
772
|
-
/** Expanded state */
|
|
773
|
-
readonly expanded: boolean;
|
|
774
|
-
/** Toggle callback */
|
|
775
|
-
readonly onToggle?: () => void;
|
|
776
|
-
}
|
|
777
|
-
|
|
778
|
-
export declare const FlagAlertGlass: ForwardRefExoticComponent<FlagAlertGlassProps & RefAttributes<HTMLDivElement>>;
|
|
779
|
-
|
|
780
|
-
declare interface FlagAlertGlassProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
781
|
-
readonly type?: FlagType;
|
|
782
|
-
readonly title: string;
|
|
783
|
-
readonly description?: string;
|
|
784
|
-
}
|
|
785
|
-
|
|
786
|
-
declare interface FlagData {
|
|
787
|
-
readonly type: FlagType;
|
|
788
|
-
readonly title: string;
|
|
789
|
-
readonly description?: string;
|
|
790
|
-
}
|
|
791
|
-
|
|
792
|
-
export declare const FlagsSectionGlass: ForwardRefExoticComponent<FlagsSectionGlassProps & RefAttributes<HTMLDivElement>>;
|
|
793
|
-
|
|
794
|
-
declare interface FlagsSectionGlassProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
795
|
-
readonly flags?: readonly FlagData[];
|
|
796
|
-
readonly expanded?: boolean;
|
|
797
|
-
readonly onToggle?: () => void;
|
|
798
|
-
}
|
|
799
|
-
|
|
800
|
-
declare type FlagType = "warning" | "danger";
|
|
801
|
-
|
|
802
|
-
/**
|
|
803
|
-
* FormFieldWrapper component
|
|
804
|
-
*
|
|
805
|
-
* Provides consistent structure for form fields with labels and validation messages.
|
|
806
|
-
* Used by InputGlass, SliderGlass, and other form components.
|
|
807
|
-
*
|
|
808
|
-
* @example
|
|
809
|
-
* ```tsx
|
|
810
|
-
* // Basic usage
|
|
811
|
-
* <FormFieldWrapper label="Email" htmlFor="email-input">
|
|
812
|
-
* <input id="email-input" type="email" />
|
|
813
|
-
* </FormFieldWrapper>
|
|
814
|
-
*
|
|
815
|
-
* // With validation
|
|
816
|
-
* <FormFieldWrapper
|
|
817
|
-
* label="Username"
|
|
818
|
-
* error="Username is required"
|
|
819
|
-
* required
|
|
820
|
-
* htmlFor="username"
|
|
821
|
-
* >
|
|
822
|
-
* <input id="username" />
|
|
823
|
-
* </FormFieldWrapper>
|
|
824
|
-
*
|
|
825
|
-
* // Success state
|
|
826
|
-
* <FormFieldWrapper
|
|
827
|
-
* label="Password"
|
|
828
|
-
* success="Strong password"
|
|
829
|
-
* htmlFor="password"
|
|
830
|
-
* >
|
|
831
|
-
* <input id="password" type="password" />
|
|
832
|
-
* </FormFieldWrapper>
|
|
833
|
-
* ```
|
|
834
|
-
*/
|
|
835
|
-
export declare const FormFieldWrapper: ForwardRefExoticComponent<FormFieldWrapperProps & RefAttributes<HTMLDivElement>>;
|
|
836
|
-
|
|
837
|
-
/**
|
|
838
|
-
* Props for the FormFieldWrapper component
|
|
839
|
-
*/
|
|
840
|
-
declare interface FormFieldWrapperProps extends HTMLAttributes<HTMLDivElement> {
|
|
841
|
-
/**
|
|
842
|
-
* Label text displayed above the field
|
|
843
|
-
*/
|
|
844
|
-
label?: string;
|
|
845
|
-
/**
|
|
846
|
-
* Error message - takes priority over success
|
|
847
|
-
* Displays in red below the field
|
|
848
|
-
*/
|
|
849
|
-
error?: string;
|
|
850
|
-
/**
|
|
851
|
-
* Success message - displays in green if no error
|
|
852
|
-
* Displays below the field
|
|
853
|
-
*/
|
|
854
|
-
success?: string;
|
|
855
|
-
/**
|
|
856
|
-
* ID to link label with input via htmlFor
|
|
857
|
-
* Should match the input's id attribute
|
|
858
|
-
*/
|
|
859
|
-
htmlFor?: string;
|
|
860
|
-
/**
|
|
861
|
-
* Shows red asterisk (*) next to label
|
|
862
|
-
* @default false
|
|
863
|
-
*/
|
|
864
|
-
required?: boolean;
|
|
865
|
-
/**
|
|
866
|
-
* The form control element(s) to wrap
|
|
867
|
-
*/
|
|
868
|
-
children: ReactNode;
|
|
869
|
-
}
|
|
870
|
-
|
|
871
|
-
export declare function getNextTheme(current: Theme): Theme;
|
|
872
|
-
|
|
873
|
-
export declare function getThemeConfig(theme: Theme): ThemeConfig;
|
|
874
|
-
|
|
875
|
-
export declare const GlassCard: ForwardRefExoticComponent<GlassCardProps & RefAttributes<HTMLDivElement>>;
|
|
876
|
-
|
|
877
|
-
/**
|
|
878
|
-
* Props for the GlassCard component
|
|
879
|
-
*
|
|
880
|
-
* A glass-themed container with configurable blur, glow effects, and hover animations.
|
|
881
|
-
* Features polymorphic rendering via `asChild` for semantic HTML flexibility.
|
|
882
|
-
*
|
|
883
|
-
* @accessibility
|
|
884
|
-
* - **Keyboard Navigation:** When used with `asChild` as a link/button, inherits native keyboard support (Enter/Space activation)
|
|
885
|
-
* - **Focus Management:** Focus ring applied to child element when using `asChild` pattern with interactive elements
|
|
886
|
-
* - **Screen Readers:** Semantic HTML preserved via `asChild` - use appropriate elements (`<a>`, `<button>`, `<article>`)
|
|
887
|
-
* - **Hover State:** Hover effects are purely visual and do not affect functionality (progressive enhancement)
|
|
888
|
-
* - **Touch Targets:** When interactive, ensure child element meets minimum 44x44px touch target (WCAG 2.5.5)
|
|
889
|
-
* - **Color Contrast:** Card border and background meet WCAG AA contrast requirements, content contrast is consumer's responsibility
|
|
890
|
-
* - **Motion:** Hover scale animation respects `prefers-reduced-motion` settings via CSS transitions
|
|
891
|
-
*
|
|
892
|
-
* @example
|
|
893
|
-
* ```tsx
|
|
894
|
-
* // Basic card
|
|
895
|
-
* <GlassCard intensity="medium">Content</GlassCard>
|
|
896
|
-
*
|
|
897
|
-
* // As a clickable link with accessible name
|
|
898
|
-
* <GlassCard asChild intensity="medium">
|
|
899
|
-
* <a href="/details" aria-label="View product details">
|
|
900
|
-
* <h3>Product Title</h3>
|
|
901
|
-
* <p>Description</p>
|
|
902
|
-
* </a>
|
|
903
|
-
* </GlassCard>
|
|
904
|
-
*
|
|
905
|
-
* // Different intensity levels
|
|
906
|
-
* <GlassCard intensity="subtle">Subtle blur</GlassCard>
|
|
907
|
-
* <GlassCard intensity="medium">Standard blur</GlassCard>
|
|
908
|
-
* <GlassCard intensity="strong">Heavy blur</GlassCard>
|
|
909
|
-
*
|
|
910
|
-
* // With glow effects
|
|
911
|
-
* <GlassCard glow="blue">Blue glow card</GlassCard>
|
|
912
|
-
* <GlassCard glow="violet">Violet glow card</GlassCard>
|
|
913
|
-
* <GlassCard glow="cyan">Cyan glow card</GlassCard>
|
|
914
|
-
*
|
|
915
|
-
* // As a button (interactive) with role
|
|
916
|
-
* <GlassCard asChild hover intensity="medium">
|
|
917
|
-
* <button onClick={handleClick} aria-label="Open settings">
|
|
918
|
-
* <Settings className="w-6 h-6" />
|
|
919
|
-
* <span>Settings</span>
|
|
920
|
-
* </button>
|
|
921
|
-
* </GlassCard>
|
|
922
|
-
*
|
|
923
|
-
* // Article card with semantic HTML
|
|
924
|
-
* <GlassCard asChild intensity="medium" padding="lg">
|
|
925
|
-
* <article>
|
|
926
|
-
* <header><h2>Article Title</h2></header>
|
|
927
|
-
* <p>Article content...</p>
|
|
928
|
-
* <footer>Published: Jan 1, 2025</footer>
|
|
929
|
-
* </article>
|
|
930
|
-
* </GlassCard>
|
|
931
|
-
* ```
|
|
932
|
-
*/
|
|
933
|
-
export declare interface GlassCardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'style'>, VariantProps<typeof cardIntensity> {
|
|
934
|
-
/**
|
|
935
|
-
* Render as child element instead of div (polymorphic rendering).
|
|
936
|
-
* Useful for making cards clickable links or custom interactive elements.
|
|
937
|
-
* @default false
|
|
938
|
-
* @example
|
|
939
|
-
* ```tsx
|
|
940
|
-
* <GlassCard asChild>
|
|
941
|
-
* <a href="/article">Article Content</a>
|
|
942
|
-
* </GlassCard>
|
|
943
|
-
* ```
|
|
944
|
-
*/
|
|
945
|
-
readonly asChild?: boolean;
|
|
946
|
-
readonly children: ReactNode;
|
|
947
|
-
readonly glow?: GlowType;
|
|
948
|
-
readonly padding?: PaddingType;
|
|
949
|
-
}
|
|
950
|
-
|
|
951
|
-
declare type GlassVariant = 'glass' | 'frosted' | 'fluted' | 'crystal';
|
|
952
|
-
|
|
953
|
-
/**
|
|
954
|
-
* GlassCard CVA Variants
|
|
955
|
-
* Extracted for Fast Refresh compatibility
|
|
956
|
-
*/
|
|
957
|
-
export declare type GlowType = 'blue' | 'violet' | 'cyan' | null;
|
|
958
|
-
|
|
959
|
-
export declare const HeaderBrandingGlass: ForwardRefExoticComponent<HeaderBrandingGlassProps & RefAttributes<HTMLDivElement>>;
|
|
960
|
-
|
|
961
|
-
declare interface HeaderBrandingGlassProps extends HTMLAttributes<HTMLDivElement> {
|
|
962
|
-
/** Logo icon component */
|
|
963
|
-
readonly logoIcon: LucideIcon;
|
|
964
|
-
/** Main title */
|
|
965
|
-
readonly title: string;
|
|
966
|
-
/** Subtitle (hidden on mobile) */
|
|
967
|
-
readonly subtitle?: string;
|
|
968
|
-
/** Logo click handler */
|
|
969
|
-
readonly onLogoClick?: () => void;
|
|
970
|
-
/** Logo aria label */
|
|
971
|
-
readonly logoAriaLabel?: string;
|
|
972
|
-
}
|
|
973
|
-
|
|
974
|
-
export declare const HeaderNavGlass: ForwardRefExoticComponent<HeaderNavGlassProps & RefAttributes<HTMLElement>>;
|
|
975
|
-
|
|
976
|
-
declare interface HeaderNavGlassProps extends React.HTMLAttributes<HTMLElement> {
|
|
977
|
-
readonly username?: string;
|
|
978
|
-
readonly onSearch?: (value: string) => void;
|
|
979
|
-
readonly onThemeToggle?: () => void;
|
|
980
|
-
}
|
|
981
|
-
|
|
982
|
-
export declare const IconButtonGlass: ForwardRefExoticComponent<IconButtonGlassProps & RefAttributes<HTMLButtonElement>>;
|
|
983
|
-
|
|
984
|
-
declare interface IconButtonGlassProps extends ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof iconButtonVariants> {
|
|
985
|
-
/** Lucide icon component */
|
|
986
|
-
readonly icon: LucideIcon;
|
|
987
|
-
/** Icon size in pixels (default: 20) */
|
|
988
|
-
readonly iconSize?: number;
|
|
989
|
-
/** Accessible label for screen readers */
|
|
990
|
-
readonly 'aria-label': string;
|
|
991
|
-
}
|
|
992
|
-
|
|
993
|
-
declare const iconButtonVariants: (props?: ({
|
|
994
|
-
size?: "sm" | "md" | "lg" | "touch" | null | undefined;
|
|
995
|
-
variant?: "ghost" | "subtle" | "gradient" | null | undefined;
|
|
996
|
-
} & ClassProp) | undefined) => string;
|
|
997
|
-
|
|
998
|
-
export declare const InputGlass: ForwardRefExoticComponent<InputGlassProps & RefAttributes<HTMLInputElement>>;
|
|
999
|
-
|
|
1000
|
-
/**
|
|
1001
|
-
* Props for the InputGlass component
|
|
1002
|
-
*
|
|
1003
|
-
* A glass-themed input field with labels, validation states, and icon support.
|
|
1004
|
-
* Features focus glow effects and theme-aware styling.
|
|
1005
|
-
*
|
|
1006
|
-
* @accessibility
|
|
1007
|
-
* - **Keyboard Navigation:** Full keyboard support with native `<input>` element, standard tab navigation
|
|
1008
|
-
* - **Focus Management:** Visible focus ring using `--focus-glow` CSS variable (WCAG 2.4.7)
|
|
1009
|
-
* - **Screen Readers:** Semantic `<label>` elements properly associated via `htmlFor`, error/success messages announced with `aria-describedby`
|
|
1010
|
-
* - **Error State:** Red border and error message displayed below input, programmatically associated for screen readers
|
|
1011
|
-
* - **Success State:** Green border and success message displayed below input, programmatically associated for screen readers
|
|
1012
|
-
* - **Touch Targets:** Minimum 44x44px touch target on mobile devices (WCAG 2.5.5)
|
|
1013
|
-
* - **Color Contrast:** All text meets WCAG AA contrast ratio 4.5:1 minimum against backgrounds
|
|
1014
|
-
* - **Motion:** Icon color transitions respect `prefers-reduced-motion` settings
|
|
1015
|
-
*
|
|
1016
|
-
* @example
|
|
1017
|
-
* ```tsx
|
|
1018
|
-
* // Basic input with label
|
|
1019
|
-
* <InputGlass label="Email" placeholder="you@example.com" />
|
|
1020
|
-
*
|
|
1021
|
-
* // With aria-describedby for additional context
|
|
1022
|
-
* <InputGlass
|
|
1023
|
-
* label="Username"
|
|
1024
|
-
* placeholder="Enter username"
|
|
1025
|
-
* aria-describedby="username-help"
|
|
1026
|
-
* />
|
|
1027
|
-
* <span id="username-help">Must be 3-20 characters</span>
|
|
1028
|
-
*
|
|
1029
|
-
* // With validation states (automatically announced to screen readers)
|
|
1030
|
-
* <InputGlass label="Username" error="Username is required" />
|
|
1031
|
-
* <InputGlass label="Password" success="Strong password" type="password" />
|
|
1032
|
-
*
|
|
1033
|
-
* // With icon and accessible label
|
|
1034
|
-
* <InputGlass
|
|
1035
|
-
* icon={Search}
|
|
1036
|
-
* placeholder="Search..."
|
|
1037
|
-
* aria-label="Search products"
|
|
1038
|
-
* />
|
|
1039
|
-
* <InputGlass icon={Mail} iconPosition="right" type="email" />
|
|
1040
|
-
*
|
|
1041
|
-
* // Disabled state (automatically announced)
|
|
1042
|
-
* <InputGlass label="Email" disabled value="locked@example.com" />
|
|
1043
|
-
*
|
|
1044
|
-
* // Form integration with accessible error handling
|
|
1045
|
-
* <form onSubmit={handleSubmit}>
|
|
1046
|
-
* <InputGlass
|
|
1047
|
-
* label="Email"
|
|
1048
|
-
* type="email"
|
|
1049
|
-
* required
|
|
1050
|
-
* error={errors.email}
|
|
1051
|
-
* aria-invalid={!!errors.email}
|
|
1052
|
-
* />
|
|
1053
|
-
* <InputGlass
|
|
1054
|
-
* label="Password"
|
|
1055
|
-
* type="password"
|
|
1056
|
-
* icon={Lock}
|
|
1057
|
-
* error={errors.password}
|
|
1058
|
-
* />
|
|
1059
|
-
* <ButtonGlass type="submit">Sign In</ButtonGlass>
|
|
1060
|
-
* </form>
|
|
1061
|
-
* ```
|
|
1062
|
-
*/
|
|
1063
|
-
export declare interface InputGlassProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'>, VariantProps<typeof inputVariants> {
|
|
1064
|
-
/**
|
|
1065
|
-
* Label text displayed above the input field
|
|
1066
|
-
*/
|
|
1067
|
-
readonly label?: string;
|
|
1068
|
-
/**
|
|
1069
|
-
* Error message to display below the input (red styling)
|
|
1070
|
-
*/
|
|
1071
|
-
readonly error?: string;
|
|
1072
|
-
/**
|
|
1073
|
-
* Success message to display below the input (green styling)
|
|
1074
|
-
*/
|
|
1075
|
-
readonly success?: string;
|
|
1076
|
-
/**
|
|
1077
|
-
* Icon component from lucide-react to display
|
|
1078
|
-
* @example icon={Search}
|
|
1079
|
-
*/
|
|
1080
|
-
readonly icon?: LucideIcon;
|
|
1081
|
-
/**
|
|
1082
|
-
* Position of the icon relative to input text
|
|
1083
|
-
* @default "left"
|
|
1084
|
-
*/
|
|
1085
|
-
readonly iconPosition?: 'left' | 'right';
|
|
1086
|
-
/**
|
|
1087
|
-
* @deprecated Use `size` prop instead. Will be removed in v4.0
|
|
1088
|
-
* @default "md"
|
|
1089
|
-
*/
|
|
1090
|
-
readonly inputSize?: 'sm' | 'md' | 'lg';
|
|
1091
|
-
}
|
|
1092
|
-
|
|
1093
|
-
/**
|
|
1094
|
-
* InputGlass CVA Variants
|
|
1095
|
-
* Extracted for Fast Refresh compatibility
|
|
1096
|
-
*/
|
|
1097
|
-
export declare type InputGlassSize = 'sm' | 'md' | 'lg';
|
|
1098
|
-
|
|
1099
|
-
export declare const inputVariants: (props?: ({
|
|
1100
|
-
size?: "sm" | "md" | "lg" | null | undefined;
|
|
1101
|
-
} & ClassProp) | undefined) => string;
|
|
1102
|
-
|
|
1103
|
-
export declare type IntensityType = 'subtle' | 'medium' | 'strong';
|
|
1104
|
-
|
|
1105
|
-
/**
|
|
1106
|
-
* InteractiveCard component
|
|
1107
|
-
*
|
|
1108
|
-
* Provides consistent hover animations and glass effects for card components.
|
|
1109
|
-
* Replaces ~80 lines of duplicated hover state management across 4+ components.
|
|
1110
|
-
*
|
|
1111
|
-
* @example
|
|
1112
|
-
* ```tsx
|
|
1113
|
-
* // Basic usage
|
|
1114
|
-
* <InteractiveCard>
|
|
1115
|
-
* <h3>Card Title</h3>
|
|
1116
|
-
* <p>Card content</p>
|
|
1117
|
-
* </InteractiveCard>
|
|
1118
|
-
*
|
|
1119
|
-
* // With hover effects
|
|
1120
|
-
* <InteractiveCard
|
|
1121
|
-
* hoverLift
|
|
1122
|
-
* hoverGlow="var(--glow-primary)"
|
|
1123
|
-
* hoverBg="var(--card-hover-bg)"
|
|
1124
|
-
* hoverBorderColor="var(--card-hover-border)"
|
|
1125
|
-
* >
|
|
1126
|
-
* <MetricContent />
|
|
1127
|
-
* </InteractiveCard>
|
|
1128
|
-
*
|
|
1129
|
-
* // Custom blur and rounding
|
|
1130
|
-
* <InteractiveCard
|
|
1131
|
-
* blur="md"
|
|
1132
|
-
* rounded="rounded-3xl"
|
|
1133
|
-
* baseBg="var(--metric-emerald-bg)"
|
|
1134
|
-
* >
|
|
1135
|
-
* <StatusCard />
|
|
1136
|
-
* </InteractiveCard>
|
|
1137
|
-
* ```
|
|
1138
|
-
*/
|
|
1139
|
-
export declare const InteractiveCard: ForwardRefExoticComponent<InteractiveCardProps & RefAttributes<HTMLDivElement>>;
|
|
1140
|
-
|
|
1141
|
-
/**
|
|
1142
|
-
* Props for the InteractiveCard component
|
|
1143
|
-
*/
|
|
1144
|
-
declare interface InteractiveCardProps extends HTMLAttributes<HTMLDivElement> {
|
|
1145
|
-
/**
|
|
1146
|
-
* Enable hover lift effect (translateY -2px)
|
|
1147
|
-
* @default true
|
|
1148
|
-
*/
|
|
1149
|
-
hoverLift?: boolean;
|
|
1150
|
-
/**
|
|
1151
|
-
* CSS variable for hover glow effect
|
|
1152
|
-
* @example 'var(--glow-primary)'
|
|
1153
|
-
*/
|
|
1154
|
-
hoverGlow?: string;
|
|
1155
|
-
/**
|
|
1156
|
-
* CSS variable for hover background
|
|
1157
|
-
* @example 'var(--card-hover-bg)'
|
|
1158
|
-
*/
|
|
1159
|
-
hoverBg?: string;
|
|
1160
|
-
/**
|
|
1161
|
-
* CSS variable for base background
|
|
1162
|
-
* @default 'var(--card-bg)'
|
|
1163
|
-
*/
|
|
1164
|
-
baseBg?: string;
|
|
1165
|
-
/**
|
|
1166
|
-
* CSS variable for border color
|
|
1167
|
-
* @default 'var(--card-border)'
|
|
1168
|
-
*/
|
|
1169
|
-
borderColor?: string;
|
|
1170
|
-
/**
|
|
1171
|
-
* CSS variable for hover border color
|
|
1172
|
-
*/
|
|
1173
|
-
hoverBorderColor?: string;
|
|
1174
|
-
/**
|
|
1175
|
-
* Blur level for glass effect
|
|
1176
|
-
* @default 'sm'
|
|
1177
|
-
*/
|
|
1178
|
-
blur?: 'sm' | 'md' | 'lg' | 'xl';
|
|
1179
|
-
/**
|
|
1180
|
-
* Disable all hover interactions
|
|
1181
|
-
* @default false
|
|
1182
|
-
*/
|
|
1183
|
-
disabled?: boolean;
|
|
1184
|
-
/**
|
|
1185
|
-
* Border radius class
|
|
1186
|
-
* @default 'rounded-2xl'
|
|
1187
|
-
*/
|
|
1188
|
-
rounded?: 'rounded-xl' | 'rounded-2xl' | 'rounded-3xl';
|
|
1189
|
-
/**
|
|
1190
|
-
* Transition speed
|
|
1191
|
-
* @default 'var(--transition-slow)'
|
|
1192
|
-
*/
|
|
1193
|
-
transition?: string;
|
|
1194
|
-
}
|
|
1195
|
-
|
|
1196
|
-
export declare const LanguageBarGlass: ForwardRefExoticComponent<LanguageBarGlassProps & RefAttributes<HTMLDivElement>>;
|
|
1197
|
-
|
|
1198
|
-
declare interface LanguageBarGlassProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
1199
|
-
readonly languages: readonly LanguageData[];
|
|
1200
|
-
readonly showLegend?: boolean;
|
|
1201
|
-
}
|
|
1202
|
-
|
|
1203
|
-
declare interface LanguageData {
|
|
1204
|
-
readonly name: string;
|
|
1205
|
-
readonly percent: number;
|
|
1206
|
-
readonly color?: string;
|
|
1207
|
-
}
|
|
1208
|
-
|
|
1209
|
-
export declare const MetricCardGlass: ForwardRefExoticComponent<MetricCardGlassProps & RefAttributes<HTMLDivElement>>;
|
|
1210
|
-
|
|
1211
|
-
declare interface MetricCardGlassProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
1212
|
-
readonly label: string;
|
|
1213
|
-
readonly value: number;
|
|
1214
|
-
readonly color?: MetricColor;
|
|
1215
|
-
}
|
|
1216
|
-
|
|
1217
|
-
declare type MetricColor = "emerald" | "amber" | "blue" | "red";
|
|
1218
|
-
|
|
1219
|
-
declare interface MetricData {
|
|
1220
|
-
readonly label: string;
|
|
1221
|
-
readonly value: number;
|
|
1222
|
-
readonly color: MetricColor;
|
|
1223
|
-
}
|
|
1224
|
-
|
|
1225
|
-
declare interface MetricData_2 {
|
|
1226
|
-
readonly label: string;
|
|
1227
|
-
readonly value: number;
|
|
1228
|
-
readonly color: MetricColor;
|
|
1229
|
-
}
|
|
1230
|
-
|
|
1231
|
-
export declare const MetricsGridGlass: ForwardRefExoticComponent<MetricsGridGlassProps & RefAttributes<HTMLDivElement>>;
|
|
1232
|
-
|
|
1233
|
-
declare interface MetricsGridGlassProps extends HTMLAttributes<HTMLDivElement> {
|
|
1234
|
-
/** Array of metrics to display */
|
|
1235
|
-
readonly metrics: readonly MetricData[];
|
|
1236
|
-
/** Number of columns on desktop (1-6) */
|
|
1237
|
-
readonly columns?: 1 | 2 | 3 | 4 | 5 | 6;
|
|
1238
|
-
/** Gap size */
|
|
1239
|
-
readonly gap?: 'sm' | 'md' | 'lg';
|
|
1240
|
-
}
|
|
1241
|
-
|
|
1242
|
-
declare interface ModalBodyProps {
|
|
1243
|
-
children: ReactNode;
|
|
1244
|
-
className?: string;
|
|
1245
|
-
}
|
|
1246
|
-
|
|
1247
|
-
declare interface ModalCloseProps {
|
|
1248
|
-
className?: string;
|
|
1249
|
-
}
|
|
1250
|
-
|
|
1251
|
-
declare interface ModalContentProps {
|
|
1252
|
-
children: ReactNode;
|
|
1253
|
-
className?: string;
|
|
1254
|
-
}
|
|
1255
|
-
|
|
1256
|
-
declare interface ModalDescriptionProps {
|
|
1257
|
-
children: ReactNode;
|
|
1258
|
-
className?: string;
|
|
1259
|
-
}
|
|
1260
|
-
|
|
1261
|
-
declare interface ModalFooterProps {
|
|
1262
|
-
children: ReactNode;
|
|
1263
|
-
className?: string;
|
|
1264
|
-
}
|
|
1265
|
-
|
|
1266
|
-
/**
|
|
1267
|
-
* ModalGlass - Compound Component API
|
|
1268
|
-
*
|
|
1269
|
-
* @example
|
|
1270
|
-
* ```tsx
|
|
1271
|
-
* <ModalGlass.Root open={open} onOpenChange={setOpen}>
|
|
1272
|
-
* <ModalGlass.Overlay />
|
|
1273
|
-
* <ModalGlass.Content>
|
|
1274
|
-
* <ModalGlass.Header>
|
|
1275
|
-
* <ModalGlass.Title>Confirm</ModalGlass.Title>
|
|
1276
|
-
* <ModalGlass.Description>Are you sure?</ModalGlass.Description>
|
|
1277
|
-
* <ModalGlass.Close />
|
|
1278
|
-
* </ModalGlass.Header>
|
|
1279
|
-
* <ModalGlass.Body>
|
|
1280
|
-
* <p>Body content</p>
|
|
1281
|
-
* </ModalGlass.Body>
|
|
1282
|
-
* <ModalGlass.Footer>
|
|
1283
|
-
* <ButtonGlass>Cancel</ButtonGlass>
|
|
1284
|
-
* </ModalGlass.Footer>
|
|
1285
|
-
* </ModalGlass.Content>
|
|
1286
|
-
* </ModalGlass.Root>
|
|
1287
|
-
* ```
|
|
1288
|
-
*/
|
|
1289
|
-
export declare const ModalGlass: {
|
|
1290
|
-
Root: FC<ModalRootProps>;
|
|
1291
|
-
Overlay: FC<ModalOverlayProps>;
|
|
1292
|
-
Content: ForwardRefExoticComponent<ModalContentProps & RefAttributes<HTMLDivElement>>;
|
|
1293
|
-
Header: FC<ModalHeaderProps>;
|
|
1294
|
-
Body: FC<ModalBodyProps>;
|
|
1295
|
-
Footer: FC<ModalFooterProps>;
|
|
1296
|
-
Title: FC<ModalTitleProps>;
|
|
1297
|
-
Description: FC<ModalDescriptionProps>;
|
|
1298
|
-
Close: FC<ModalCloseProps>;
|
|
1299
|
-
};
|
|
1300
|
-
|
|
1301
|
-
declare interface ModalHeaderProps {
|
|
1302
|
-
children: ReactNode;
|
|
1303
|
-
className?: string;
|
|
1304
|
-
}
|
|
1305
|
-
|
|
1306
|
-
declare interface ModalOverlayProps {
|
|
1307
|
-
className?: string;
|
|
1308
|
-
}
|
|
1309
|
-
|
|
1310
|
-
/**
|
|
1311
|
-
* Props for ModalGlass.Root component
|
|
1312
|
-
*
|
|
1313
|
-
* Root component that provides context and manages open/close state for the modal.
|
|
1314
|
-
* Handles keyboard events, body scroll lock, and accessibility attributes.
|
|
1315
|
-
*
|
|
1316
|
-
* @accessibility
|
|
1317
|
-
* - **Keyboard Navigation:** Escape key closes modal, Tab key traps focus within modal content
|
|
1318
|
-
* - **Focus Management:** Focus automatically moved to modal on open, returned to trigger on close (WCAG 2.4.3)
|
|
1319
|
-
* - **Screen Readers:** Uses `role="dialog"` and `aria-modal="true"` for proper modal semantics (WCAG 4.1.3)
|
|
1320
|
-
* - **Title Association:** Modal title automatically linked via `aria-labelledby="modal-title"`
|
|
1321
|
-
* - **Description Association:** Optional description linked via `aria-describedby="modal-description"`
|
|
1322
|
-
* - **Body Scroll Lock:** Prevents background scrolling when modal is open (improves UX and focus management)
|
|
1323
|
-
* - **Touch Targets:** All interactive elements (close button, action buttons) meet 44x44px minimum (WCAG 2.5.5)
|
|
1324
|
-
* - **Color Contrast:** Modal content and overlay meet WCAG AA contrast requirements
|
|
1325
|
-
* - **Motion:** Open/close animations respect `prefers-reduced-motion` settings
|
|
1326
|
-
*
|
|
1327
|
-
* @example
|
|
1328
|
-
* ```tsx
|
|
1329
|
-
* // Basic modal with title and description
|
|
1330
|
-
* <ModalGlass.Root open={open} onOpenChange={setOpen}>
|
|
1331
|
-
* <ModalGlass.Overlay />
|
|
1332
|
-
* <ModalGlass.Content>
|
|
1333
|
-
* <ModalGlass.Header>
|
|
1334
|
-
* <ModalGlass.Title>Confirm Action</ModalGlass.Title>
|
|
1335
|
-
* <ModalGlass.Description>
|
|
1336
|
-
* This action cannot be undone.
|
|
1337
|
-
* </ModalGlass.Description>
|
|
1338
|
-
* <ModalGlass.Close />
|
|
1339
|
-
* </ModalGlass.Header>
|
|
1340
|
-
* <ModalGlass.Body>
|
|
1341
|
-
* <p>Are you sure you want to proceed?</p>
|
|
1342
|
-
* </ModalGlass.Body>
|
|
1343
|
-
* <ModalGlass.Footer>
|
|
1344
|
-
* <ButtonGlass variant="ghost" onClick={() => setOpen(false)}>
|
|
1345
|
-
* Cancel
|
|
1346
|
-
* </ButtonGlass>
|
|
1347
|
-
* <ButtonGlass variant="destructive" onClick={handleConfirm}>
|
|
1348
|
-
* Confirm
|
|
1349
|
-
* </ButtonGlass>
|
|
1350
|
-
* </ModalGlass.Footer>
|
|
1351
|
-
* </ModalGlass.Content>
|
|
1352
|
-
* </ModalGlass.Root>
|
|
1353
|
-
*
|
|
1354
|
-
* // Different sizes
|
|
1355
|
-
* <ModalGlass.Root open={open} onOpenChange={setOpen} size="sm">
|
|
1356
|
-
* {// Small modal content}
|
|
1357
|
-
* </ModalGlass.Root>
|
|
1358
|
-
* <ModalGlass.Root open={open} onOpenChange={setOpen} size="lg">
|
|
1359
|
-
* {// Large modal content}
|
|
1360
|
-
* </ModalGlass.Root>
|
|
1361
|
-
*
|
|
1362
|
-
* // Form modal with proper focus management
|
|
1363
|
-
* <ModalGlass.Root open={open} onOpenChange={setOpen}>
|
|
1364
|
-
* <ModalGlass.Overlay />
|
|
1365
|
-
* <ModalGlass.Content>
|
|
1366
|
-
* <ModalGlass.Header>
|
|
1367
|
-
* <ModalGlass.Title>Create Account</ModalGlass.Title>
|
|
1368
|
-
* <ModalGlass.Close />
|
|
1369
|
-
* </ModalGlass.Header>
|
|
1370
|
-
* <ModalGlass.Body>
|
|
1371
|
-
* <form id="signup-form" onSubmit={handleSubmit}>
|
|
1372
|
-
* <InputGlass label="Email" type="email" required />
|
|
1373
|
-
* <InputGlass label="Password" type="password" required />
|
|
1374
|
-
* </form>
|
|
1375
|
-
* </ModalGlass.Body>
|
|
1376
|
-
* <ModalGlass.Footer>
|
|
1377
|
-
* <ButtonGlass variant="ghost" onClick={() => setOpen(false)}>
|
|
1378
|
-
* Cancel
|
|
1379
|
-
* </ButtonGlass>
|
|
1380
|
-
* <ButtonGlass type="submit" form="signup-form">
|
|
1381
|
-
* Sign Up
|
|
1382
|
-
* </ButtonGlass>
|
|
1383
|
-
* </ModalGlass.Footer>
|
|
1384
|
-
* </ModalGlass.Content>
|
|
1385
|
-
* </ModalGlass.Root>
|
|
1386
|
-
*
|
|
1387
|
-
* // Alert modal (no close button)
|
|
1388
|
-
* <ModalGlass.Root open={showAlert} onOpenChange={setShowAlert}>
|
|
1389
|
-
* <ModalGlass.Overlay />
|
|
1390
|
-
* <ModalGlass.Content>
|
|
1391
|
-
* <ModalGlass.Header>
|
|
1392
|
-
* <ModalGlass.Title>Session Expired</ModalGlass.Title>
|
|
1393
|
-
* </ModalGlass.Header>
|
|
1394
|
-
* <ModalGlass.Body>
|
|
1395
|
-
* Your session has expired. Please log in again.
|
|
1396
|
-
* </ModalGlass.Body>
|
|
1397
|
-
* <ModalGlass.Footer>
|
|
1398
|
-
* <ButtonGlass onClick={handleLogin}>Log In</ButtonGlass>
|
|
1399
|
-
* </ModalGlass.Footer>
|
|
1400
|
-
* </ModalGlass.Content>
|
|
1401
|
-
* </ModalGlass.Root>
|
|
1402
|
-
* ```
|
|
1403
|
-
*/
|
|
1404
|
-
declare interface ModalRootProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
1405
|
-
/** Open state */
|
|
1406
|
-
open: boolean;
|
|
1407
|
-
/** Callback when open state changes */
|
|
1408
|
-
onOpenChange?: (open: boolean) => void;
|
|
1409
|
-
/** Size variant */
|
|
1410
|
-
size?: ModalSize;
|
|
1411
|
-
/** Child components */
|
|
1412
|
-
children: ReactNode;
|
|
1413
|
-
}
|
|
1414
|
-
|
|
1415
|
-
/**
|
|
1416
|
-
* ModalGlass CVA Variants
|
|
1417
|
-
* Extracted for Fast Refresh compatibility
|
|
1418
|
-
*/
|
|
1419
|
-
export declare type ModalSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';
|
|
1420
|
-
|
|
1421
|
-
export declare const modalSizes: (props?: ({
|
|
1422
|
-
size?: "sm" | "md" | "lg" | "xl" | "full" | null | undefined;
|
|
1423
|
-
} & ClassProp) | undefined) => string;
|
|
1424
|
-
|
|
1425
|
-
declare interface ModalTitleProps {
|
|
1426
|
-
children: ReactNode;
|
|
1427
|
-
className?: string;
|
|
1428
|
-
}
|
|
1429
|
-
|
|
1430
|
-
export declare const NotificationGlass: ForwardRefExoticComponent<NotificationGlassProps & RefAttributes<HTMLDivElement>>;
|
|
1431
|
-
|
|
1432
|
-
export declare interface NotificationGlassProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title' | 'style'>, VariantProps<typeof notificationVariants> {
|
|
1433
|
-
readonly title: string;
|
|
1434
|
-
readonly message: string;
|
|
1435
|
-
/** Notification variant (shadcn/ui compatible) */
|
|
1436
|
-
readonly variant?: 'default' | 'destructive' | 'success' | 'warning';
|
|
1437
|
-
/** @deprecated Use variant prop instead. Will be removed in next major version. */
|
|
1438
|
-
readonly type?: NotificationType;
|
|
1439
|
-
readonly onClose: () => void;
|
|
1440
|
-
}
|
|
1441
|
-
|
|
1442
|
-
/**
|
|
1443
|
-
* NotificationGlass CVA Variants
|
|
1444
|
-
* Extracted for Fast Refresh compatibility
|
|
1445
|
-
*/
|
|
1446
|
-
export declare type NotificationType = 'info' | 'success' | 'warning' | 'error';
|
|
1447
|
-
|
|
1448
|
-
export declare const notificationVariants: (props?: ({
|
|
1449
|
-
type?: "success" | "warning" | "info" | "error" | null | undefined;
|
|
1450
|
-
} & ClassProp) | undefined) => string;
|
|
1451
|
-
|
|
1452
|
-
declare type OwnershipFilter = 'your' | 'contrib' | 'all';
|
|
1453
|
-
|
|
1454
|
-
export declare type PaddingType = 'none' | 'compact' | 'default' | 'featured';
|
|
1455
|
-
|
|
1456
|
-
export declare const PopoverGlass: React_2.ForwardRefExoticComponent<PopoverGlassProps & React_2.RefAttributes<HTMLDivElement>>;
|
|
1457
|
-
|
|
1458
|
-
declare interface PopoverGlassProps {
|
|
1459
|
-
/** The trigger element that opens the popover */
|
|
1460
|
-
readonly trigger: React_2.ReactNode;
|
|
1461
|
-
/** The content to display inside the popover */
|
|
1462
|
-
readonly children: React_2.ReactNode;
|
|
1463
|
-
/** The preferred side of the trigger to render against */
|
|
1464
|
-
readonly side?: 'top' | 'right' | 'bottom' | 'left';
|
|
1465
|
-
/** The preferred alignment against the trigger */
|
|
1466
|
-
readonly align?: 'start' | 'center' | 'end';
|
|
1467
|
-
/** The distance in pixels from the trigger */
|
|
1468
|
-
readonly sideOffset?: number;
|
|
1469
|
-
/** Controlled open state */
|
|
1470
|
-
readonly open?: boolean;
|
|
1471
|
-
/** Callback when open state changes */
|
|
1472
|
-
readonly onOpenChange?: (open: boolean) => void;
|
|
1473
|
-
/** Whether to show the arrow pointer */
|
|
1474
|
-
readonly showArrow?: boolean;
|
|
1475
|
-
/** Additional class name for the content wrapper */
|
|
1476
|
-
readonly className?: string;
|
|
1477
|
-
}
|
|
1478
|
-
|
|
1479
|
-
export declare const ProfileAvatarGlass: ForwardRefExoticComponent<ProfileAvatarGlassProps & RefAttributes<HTMLDivElement>>;
|
|
1480
|
-
|
|
1481
|
-
declare interface ProfileAvatarGlassProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
1482
|
-
readonly initials: string;
|
|
1483
|
-
readonly size?: ProfileAvatarSize;
|
|
1484
|
-
readonly status?: ProfileAvatarStatus;
|
|
1485
|
-
readonly glowing?: boolean;
|
|
1486
|
-
}
|
|
1487
|
-
|
|
1488
|
-
declare type ProfileAvatarSize = "sm" | "md" | "lg" | "xl";
|
|
1489
|
-
|
|
1490
|
-
declare type ProfileAvatarStatus = "online" | "offline" | "busy" | "away";
|
|
1491
|
-
|
|
1492
|
-
export declare const ProfileHeaderGlass: ForwardRefExoticComponent<ProfileHeaderGlassProps & RefAttributes<HTMLDivElement>>;
|
|
1493
|
-
|
|
1494
|
-
declare interface ProfileHeaderGlassProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
1495
|
-
readonly name?: string;
|
|
1496
|
-
readonly username?: string;
|
|
1497
|
-
readonly joinDate?: string;
|
|
1498
|
-
readonly stats?: ProfileStats;
|
|
1499
|
-
readonly languages?: readonly LanguageData[];
|
|
1500
|
-
readonly onAIGenerate?: () => void;
|
|
1501
|
-
}
|
|
1502
|
-
|
|
1503
|
-
declare interface ProfileStats {
|
|
1504
|
-
readonly repos?: number;
|
|
1505
|
-
readonly followers?: number;
|
|
1506
|
-
readonly following?: number;
|
|
1507
|
-
}
|
|
1508
|
-
|
|
1509
|
-
export declare const ProgressGlass: ForwardRefExoticComponent<ProgressGlassProps & RefAttributes<HTMLDivElement>>;
|
|
1510
|
-
|
|
1511
|
-
export declare interface ProgressGlassProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'style'>, VariantProps<typeof progressSizes> {
|
|
1512
|
-
readonly value: number;
|
|
1513
|
-
readonly gradient?: ProgressGradient;
|
|
1514
|
-
readonly showLabel?: boolean;
|
|
1515
|
-
}
|
|
1516
|
-
|
|
1517
|
-
export declare type ProgressGradient = 'violet' | 'blue' | 'cyan' | 'amber' | 'emerald' | 'rose';
|
|
1518
|
-
|
|
1519
|
-
/**
|
|
1520
|
-
* ProgressGlass CVA Variants
|
|
1521
|
-
* Extracted for Fast Refresh compatibility
|
|
1522
|
-
*/
|
|
1523
|
-
export declare type ProgressSize = 'sm' | 'md' | 'lg' | 'xl';
|
|
1524
|
-
|
|
1525
|
-
export declare const progressSizes: (props?: ({
|
|
1526
|
-
size?: "sm" | "md" | "lg" | "xl" | null | undefined;
|
|
1527
|
-
} & ClassProp) | undefined) => string;
|
|
1528
|
-
|
|
1529
|
-
export declare const ProjectsListGlass: ForwardRefExoticComponent<ProjectsListGlassProps & RefAttributes<HTMLDivElement>>;
|
|
1530
|
-
|
|
1531
|
-
declare interface ProjectsListGlassProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
1532
|
-
/** List of repositories to display */
|
|
1533
|
-
readonly repositories: readonly Repository[];
|
|
1534
|
-
/** Show only flagged (non-green) repositories */
|
|
1535
|
-
readonly showFlaggedOnly?: boolean;
|
|
1536
|
-
/** Filter by creation year */
|
|
1537
|
-
readonly selectedYear?: number | null;
|
|
1538
|
-
/** Callback to clear all filters */
|
|
1539
|
-
readonly onClearFilters?: () => void;
|
|
1540
|
-
/** Custom title (overrides auto-generated) */
|
|
1541
|
-
readonly title?: string;
|
|
1542
|
-
/** Current ownership filter */
|
|
1543
|
-
readonly ownershipFilter?: OwnershipFilter;
|
|
1544
|
-
/** Callback when ownership filter changes */
|
|
1545
|
-
readonly onOwnershipChange?: (filter: OwnershipFilter) => void;
|
|
1546
|
-
/** Current sort field */
|
|
1547
|
-
readonly sortBy?: SortField;
|
|
1548
|
-
/** Current sort order */
|
|
1549
|
-
readonly sortOrder?: SortOrder;
|
|
1550
|
-
/** Callback when sort changes */
|
|
1551
|
-
readonly onSortChange?: (field: SortField, order: SortOrder) => void;
|
|
1552
|
-
/** Show header controls (sort dropdown, ownership filter). Default: true when callbacks provided */
|
|
1553
|
-
readonly showControls?: boolean;
|
|
1554
|
-
}
|
|
1555
|
-
|
|
1556
|
-
export declare const RainbowProgressGlass: ForwardRefExoticComponent<RainbowProgressGlassProps & RefAttributes<HTMLDivElement>>;
|
|
1557
|
-
|
|
1558
|
-
declare interface RainbowProgressGlassProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
1559
|
-
readonly value: number;
|
|
1560
|
-
readonly size?: RainbowProgressSize;
|
|
1561
|
-
readonly showGlow?: boolean;
|
|
1562
|
-
}
|
|
1563
|
-
|
|
1564
|
-
declare type RainbowProgressSize = "sm" | "md" | "lg" | "xl";
|
|
1565
|
-
|
|
1566
|
-
declare interface Repository {
|
|
1567
|
-
readonly name: string;
|
|
1568
|
-
readonly languages: string;
|
|
1569
|
-
readonly commits: number;
|
|
1570
|
-
readonly contribution: number;
|
|
1571
|
-
readonly stars?: number;
|
|
1572
|
-
readonly flagType?: RepositoryFlagType;
|
|
1573
|
-
readonly issues?: readonly string[];
|
|
1574
|
-
readonly createdYear?: number;
|
|
1575
|
-
/** Ownership type for Your/Contrib filtering */
|
|
1576
|
-
readonly ownership?: 'your' | 'contrib';
|
|
1577
|
-
}
|
|
1578
|
-
|
|
1579
|
-
export declare const RepositoryCardGlass: ForwardRefExoticComponent<RepositoryCardGlassProps & RefAttributes<HTMLDivElement>>;
|
|
1580
|
-
|
|
1581
|
-
declare interface RepositoryCardGlassProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
1582
|
-
readonly name: string;
|
|
1583
|
-
readonly languages: string;
|
|
1584
|
-
readonly commits: number;
|
|
1585
|
-
readonly contribution: number;
|
|
1586
|
-
readonly stars?: number;
|
|
1587
|
-
readonly flagType?: RepositoryFlagType;
|
|
1588
|
-
readonly issues?: readonly string[];
|
|
1589
|
-
readonly expanded?: boolean;
|
|
1590
|
-
readonly onToggle?: () => void;
|
|
1591
|
-
readonly onGitHubClick?: () => void;
|
|
1592
|
-
readonly onAIAnalysisClick?: () => void;
|
|
1593
|
-
}
|
|
1594
|
-
|
|
1595
|
-
declare type RepositoryFlagType = "green" | "yellow" | "red";
|
|
1596
|
-
|
|
1597
|
-
declare type RepositoryFlagType_2 = 'green' | 'yellow' | 'red';
|
|
1598
|
-
|
|
1599
|
-
export declare const RepositoryHeaderGlass: ForwardRefExoticComponent<RepositoryHeaderGlassProps & RefAttributes<HTMLDivElement>>;
|
|
1600
|
-
|
|
1601
|
-
declare interface RepositoryHeaderGlassProps extends HTMLAttributes<HTMLDivElement> {
|
|
1602
|
-
/** Repository name */
|
|
1603
|
-
readonly name: string;
|
|
1604
|
-
/** Flag/status type */
|
|
1605
|
-
readonly flagType?: RepositoryFlagType_2;
|
|
1606
|
-
/** Star count */
|
|
1607
|
-
readonly stars?: number;
|
|
1608
|
-
/** Is expanded state */
|
|
1609
|
-
readonly expanded?: boolean;
|
|
1610
|
-
/** Abbreviated star count for mobile (1.2k instead of 1234) */
|
|
1611
|
-
readonly abbreviatedStars?: boolean;
|
|
1612
|
-
}
|
|
1613
|
-
|
|
1614
|
-
export declare const RepositoryMetadataGlass: ForwardRefExoticComponent<RepositoryMetadataGlassProps & RefAttributes<HTMLDivElement>>;
|
|
1615
|
-
|
|
1616
|
-
declare interface RepositoryMetadataGlassProps extends HTMLAttributes<HTMLDivElement> {
|
|
1617
|
-
/** Programming languages used */
|
|
1618
|
-
readonly languages: string;
|
|
1619
|
-
/** Number of commits */
|
|
1620
|
-
readonly commits: number;
|
|
1621
|
-
/** Contribution percentage */
|
|
1622
|
-
readonly contribution: number;
|
|
1623
|
-
/** Stacked layout for mobile */
|
|
1624
|
-
readonly stacked?: boolean;
|
|
1625
|
-
}
|
|
1626
|
-
|
|
1627
|
-
export declare const SearchBoxGlass: ForwardRefExoticComponent<SearchBoxGlassProps & RefAttributes<HTMLInputElement>>;
|
|
1628
|
-
|
|
1629
|
-
declare interface SearchBoxGlassProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onSubmit' | 'onChange'> {
|
|
1630
|
-
/** Callback when search is submitted (Enter key or button click) */
|
|
1631
|
-
readonly onSubmit?: (value: string) => void;
|
|
1632
|
-
/** Initial search value */
|
|
1633
|
-
readonly defaultValue?: string;
|
|
1634
|
-
/** Controlled value */
|
|
1635
|
-
readonly value?: string;
|
|
1636
|
-
/** Controlled change handler */
|
|
1637
|
-
readonly onChange?: (value: string) => void;
|
|
1638
|
-
/** Compact variant for mobile (icon only button) */
|
|
1639
|
-
readonly variant?: 'default' | 'compact';
|
|
1640
|
-
/** Input width class (default: w-48) */
|
|
1641
|
-
readonly inputWidth?: string;
|
|
1642
|
-
}
|
|
1643
|
-
|
|
1644
|
-
export declare const SegmentedControlGlass: ForwardRefExoticComponent<SegmentedControlGlassProps & RefAttributes<HTMLDivElement>>;
|
|
1645
|
-
|
|
1646
|
-
declare interface SegmentedControlGlassProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
|
|
1647
|
-
readonly options: readonly SegmentOption[];
|
|
1648
|
-
readonly value: string;
|
|
1649
|
-
readonly onChange?: (value: string) => void;
|
|
1650
|
-
}
|
|
1651
|
-
|
|
1652
|
-
declare interface SegmentOption {
|
|
1653
|
-
readonly value: string;
|
|
1654
|
-
readonly label: string;
|
|
1655
|
-
}
|
|
1656
|
-
|
|
1657
|
-
/**
|
|
1658
|
-
* Alert CVA Variants (shadcn/ui)
|
|
1659
|
-
* Extracted for Fast Refresh compatibility
|
|
1660
|
-
*/
|
|
1661
|
-
export declare const shadcnAlertVariants: (props?: ({
|
|
1662
|
-
variant?: "default" | "destructive" | null | undefined;
|
|
1663
|
-
} & ClassProp) | undefined) => string;
|
|
1664
|
-
|
|
1665
|
-
/**
|
|
1666
|
-
* Badge CVA Variants (shadcn/ui)
|
|
1667
|
-
* Extracted for Fast Refresh compatibility
|
|
1668
|
-
*/
|
|
1669
|
-
export declare const shadcnBadgeVariants: (props?: ({
|
|
1670
|
-
variant?: "default" | "destructive" | "secondary" | "outline" | null | undefined;
|
|
1671
|
-
} & ClassProp) | undefined) => string;
|
|
1672
|
-
|
|
1673
|
-
/**
|
|
1674
|
-
* Button CVA Variants (shadcn/ui)
|
|
1675
|
-
* Extracted for Fast Refresh compatibility
|
|
1676
|
-
*/
|
|
1677
|
-
export declare const shadcnButtonVariants: (props?: ({
|
|
1678
|
-
variant?: "default" | "destructive" | "link" | "secondary" | "outline" | "ghost" | null | undefined;
|
|
1679
|
-
size?: "default" | "sm" | "lg" | "icon" | "icon-sm" | "icon-lg" | null | undefined;
|
|
1680
|
-
} & ClassProp) | undefined) => string;
|
|
1681
|
-
|
|
1682
|
-
export declare const SkeletonGlass: ForwardRefExoticComponent<SkeletonGlassProps & RefAttributes<HTMLDivElement>>;
|
|
1683
|
-
|
|
1684
|
-
export declare interface SkeletonGlassProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof skeletonVariants> {
|
|
1685
|
-
readonly width?: string | number;
|
|
1686
|
-
readonly height?: string | number;
|
|
1687
|
-
}
|
|
1688
|
-
|
|
1689
|
-
/**
|
|
1690
|
-
* SkeletonGlass CVA Variants
|
|
1691
|
-
* Extracted for Fast Refresh compatibility
|
|
1692
|
-
*/
|
|
1693
|
-
export declare type SkeletonVariant = 'text' | 'title' | 'avatar' | 'thumbnail' | 'card';
|
|
1694
|
-
|
|
1695
|
-
export declare const skeletonVariants: (props?: ({
|
|
1696
|
-
variant?: "title" | "text" | "avatar" | "thumbnail" | "card" | null | undefined;
|
|
1697
|
-
} & ClassProp) | undefined) => string;
|
|
1698
|
-
|
|
1699
|
-
export declare const SliderGlass: ForwardRefExoticComponent<SliderGlassProps & RefAttributes<HTMLInputElement>>;
|
|
1700
|
-
|
|
1701
|
-
export declare interface SliderGlassProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value'> {
|
|
1702
|
-
readonly value: number;
|
|
1703
|
-
readonly onChange: (value: number) => void;
|
|
1704
|
-
readonly min?: number;
|
|
1705
|
-
readonly max?: number;
|
|
1706
|
-
readonly step?: number;
|
|
1707
|
-
readonly showValue?: boolean;
|
|
1708
|
-
readonly label?: string;
|
|
1709
|
-
readonly error?: string;
|
|
1710
|
-
readonly success?: string;
|
|
1711
|
-
}
|
|
1712
|
-
|
|
1713
|
-
export declare const SortDropdownGlass: ForwardRefExoticComponent<SortDropdownGlassProps & RefAttributes<HTMLDivElement>>;
|
|
1714
|
-
|
|
1715
|
-
declare interface SortDropdownGlassProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
|
|
1716
|
-
/** Current sort field */
|
|
1717
|
-
readonly sortBy: SortField;
|
|
1718
|
-
/** Current sort order */
|
|
1719
|
-
readonly sortOrder: SortOrder;
|
|
1720
|
-
/** Callback when sort changes */
|
|
1721
|
-
readonly onSortChange: (field: SortField, order: SortOrder) => void;
|
|
1722
|
-
/** Available sort options (default: all) */
|
|
1723
|
-
readonly options?: readonly SortField[];
|
|
1724
|
-
/** Compact mode for mobile */
|
|
1725
|
-
readonly compact?: boolean;
|
|
1726
|
-
}
|
|
1727
|
-
|
|
1728
|
-
declare type SortField = 'commits' | 'stars' | 'name' | 'contribution';
|
|
1729
|
-
|
|
1730
|
-
declare type SortOrder = 'asc' | 'desc';
|
|
1731
|
-
|
|
1732
|
-
export declare const StatItemGlass: ForwardRefExoticComponent<StatItemGlassProps & RefAttributes<HTMLSpanElement>>;
|
|
1733
|
-
|
|
1734
|
-
declare interface StatItemGlassProps extends HTMLAttributes<HTMLSpanElement>, VariantProps<typeof statItemVariants> {
|
|
1735
|
-
/** Lucide icon component */
|
|
1736
|
-
readonly icon: LucideIcon;
|
|
1737
|
-
/** Stat value (number or formatted string) */
|
|
1738
|
-
readonly value: number | string;
|
|
1739
|
-
/** Stat label */
|
|
1740
|
-
readonly label: string;
|
|
1741
|
-
/** Icon size in pixels */
|
|
1742
|
-
readonly iconSize?: number;
|
|
1743
|
-
/** Abbreviated format for mobile (1.2k instead of 1234) */
|
|
1744
|
-
readonly abbreviated?: boolean;
|
|
1745
|
-
}
|
|
1746
|
-
|
|
1747
|
-
declare const statItemVariants: (props?: ({
|
|
1748
|
-
size?: "sm" | "md" | "lg" | null | undefined;
|
|
1749
|
-
layout?: "horizontal" | "vertical" | null | undefined;
|
|
1750
|
-
} & ClassProp) | undefined) => string;
|
|
1751
|
-
|
|
1752
|
-
export declare const StatusIndicatorGlass: ForwardRefExoticComponent<StatusIndicatorGlassProps & RefAttributes<HTMLDivElement>>;
|
|
1753
|
-
|
|
1754
|
-
declare interface StatusIndicatorGlassProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
1755
|
-
readonly type?: StatusType;
|
|
1756
|
-
readonly size?: StatusSize;
|
|
1757
|
-
}
|
|
1758
|
-
|
|
1759
|
-
declare type StatusSize = "normal" | "large";
|
|
1760
|
-
|
|
1761
|
-
export declare const statusSizes: (props?: ({
|
|
1762
|
-
size?: "sm" | "md" | "lg" | "xl" | null | undefined;
|
|
1763
|
-
} & ClassProp) | undefined) => string;
|
|
1764
|
-
|
|
1765
|
-
declare type StatusType = "green" | "yellow" | "red";
|
|
1766
|
-
|
|
1767
|
-
export declare interface TabItem {
|
|
1768
|
-
readonly id: string;
|
|
1769
|
-
readonly label: string;
|
|
1770
|
-
}
|
|
1771
|
-
|
|
1772
|
-
declare interface TabsContentProps {
|
|
1773
|
-
/** Value of the tab this content belongs to */
|
|
1774
|
-
value: string;
|
|
1775
|
-
/** Content to display when tab is active */
|
|
1776
|
-
children: ReactNode;
|
|
1777
|
-
/** Optional className */
|
|
1778
|
-
className?: string;
|
|
1779
|
-
}
|
|
1780
|
-
|
|
1781
|
-
/**
|
|
1782
|
-
* TabsGlass - Compound Component API
|
|
1783
|
-
*
|
|
1784
|
-
* @example
|
|
1785
|
-
* ```tsx
|
|
1786
|
-
* <TabsGlass.Root value={activeTab} onValueChange={setActiveTab}>
|
|
1787
|
-
* <TabsGlass.List>
|
|
1788
|
-
* <TabsGlass.Trigger value="tab1">Overview</TabsGlass.Trigger>
|
|
1789
|
-
* <TabsGlass.Trigger value="tab2">Analytics</TabsGlass.Trigger>
|
|
1790
|
-
* </TabsGlass.List>
|
|
1791
|
-
* <TabsGlass.Content value="tab1">
|
|
1792
|
-
* <p>Overview content</p>
|
|
1793
|
-
* </TabsGlass.Content>
|
|
1794
|
-
* <TabsGlass.Content value="tab2">
|
|
1795
|
-
* <p>Analytics content</p>
|
|
1796
|
-
* </TabsGlass.Content>
|
|
1797
|
-
* </TabsGlass.Root>
|
|
1798
|
-
* ```
|
|
1799
|
-
*
|
|
1800
|
-
* @since v1.0.0 - Legacy API removed (tabs/activeTab/onChange props)
|
|
1801
|
-
*/
|
|
1802
|
-
export declare const TabsGlass: {
|
|
1803
|
-
Root: FC<TabsRootProps>;
|
|
1804
|
-
List: ForwardRefExoticComponent<TabsListProps & RefAttributes<HTMLDivElement>>;
|
|
1805
|
-
Trigger: ForwardRefExoticComponent<TabsTriggerProps & RefAttributes<HTMLButtonElement>>;
|
|
1806
|
-
Content: FC<TabsContentProps>;
|
|
1807
|
-
};
|
|
1808
|
-
|
|
1809
|
-
declare interface TabsListProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
1810
|
-
children: ReactNode;
|
|
1811
|
-
className?: string;
|
|
1812
|
-
}
|
|
1813
|
-
|
|
1814
|
-
/**
|
|
1815
|
-
* Props for TabsGlass.Root component
|
|
1816
|
-
*
|
|
1817
|
-
* Root component that manages tab state and provides context for child components.
|
|
1818
|
-
* Features accessible keyboard navigation and ARIA attributes.
|
|
1819
|
-
*
|
|
1820
|
-
* @accessibility
|
|
1821
|
-
* - **Keyboard Navigation:** Arrow keys navigate between tabs, Tab moves to tab panel content (WCAG 2.1.1)
|
|
1822
|
-
* - **Focus Management:** Visible focus ring on active tab using `--focus-glow` CSS variable (WCAG 2.4.7)
|
|
1823
|
-
* - **Screen Readers:** Uses `role="tablist"`, `role="tab"`, `role="tabpanel"` for proper tab semantics (WCAG 4.1.3)
|
|
1824
|
-
* - **ARIA Attributes:** Tabs marked with `aria-selected`, panels with `aria-hidden` for state announcement
|
|
1825
|
-
* - **Active State:** Visual indicator (underline) plus color change for multi-modal feedback
|
|
1826
|
-
* - **Touch Targets:** Tab triggers meet minimum 44x44px touch target (WCAG 2.5.5)
|
|
1827
|
-
* - **Color Contrast:** Active and inactive tab text meet WCAG AA contrast ratio 4.5:1
|
|
1828
|
-
* - **Motion:** Transitions and indicator animations respect `prefers-reduced-motion` settings
|
|
1829
|
-
*
|
|
1830
|
-
* @example
|
|
1831
|
-
* ```tsx
|
|
1832
|
-
* // Basic tabs
|
|
1833
|
-
* <TabsGlass.Root value={activeTab} onValueChange={setActiveTab}>
|
|
1834
|
-
* <TabsGlass.List>
|
|
1835
|
-
* <TabsGlass.Trigger value="overview">Overview</TabsGlass.Trigger>
|
|
1836
|
-
* <TabsGlass.Trigger value="analytics">Analytics</TabsGlass.Trigger>
|
|
1837
|
-
* <TabsGlass.Trigger value="settings">Settings</TabsGlass.Trigger>
|
|
1838
|
-
* </TabsGlass.List>
|
|
1839
|
-
* <TabsGlass.Content value="overview">
|
|
1840
|
-
* <h2>Overview</h2>
|
|
1841
|
-
* <p>Overview content here</p>
|
|
1842
|
-
* </TabsGlass.Content>
|
|
1843
|
-
* <TabsGlass.Content value="analytics">
|
|
1844
|
-
* <h2>Analytics</h2>
|
|
1845
|
-
* <p>Analytics content here</p>
|
|
1846
|
-
* </TabsGlass.Content>
|
|
1847
|
-
* <TabsGlass.Content value="settings">
|
|
1848
|
-
* <h2>Settings</h2>
|
|
1849
|
-
* <p>Settings content here</p>
|
|
1850
|
-
* </TabsGlass.Content>
|
|
1851
|
-
* </TabsGlass.Root>
|
|
1852
|
-
*
|
|
1853
|
-
* // Tabs with icons (ensure accessible labels)
|
|
1854
|
-
* <TabsGlass.Root value={activeTab} onValueChange={setActiveTab}>
|
|
1855
|
-
* <TabsGlass.List>
|
|
1856
|
-
* <TabsGlass.Trigger value="home" aria-label="Home dashboard">
|
|
1857
|
-
* <Home className="w-4 h-4" />
|
|
1858
|
-
* </TabsGlass.Trigger>
|
|
1859
|
-
* <TabsGlass.Trigger value="search" aria-label="Search">
|
|
1860
|
-
* <Search className="w-4 h-4" />
|
|
1861
|
-
* </TabsGlass.Trigger>
|
|
1862
|
-
* </TabsGlass.List>
|
|
1863
|
-
* <TabsGlass.Content value="home">Dashboard content</TabsGlass.Content>
|
|
1864
|
-
* <TabsGlass.Content value="search">Search content</TabsGlass.Content>
|
|
1865
|
-
* </TabsGlass.Root>
|
|
1866
|
-
*
|
|
1867
|
-
* // Disabled tab (announced to screen readers)
|
|
1868
|
-
* <TabsGlass.Root value={activeTab} onValueChange={setActiveTab}>
|
|
1869
|
-
* <TabsGlass.List>
|
|
1870
|
-
* <TabsGlass.Trigger value="tab1">Available Tab</TabsGlass.Trigger>
|
|
1871
|
-
* <TabsGlass.Trigger value="tab2" disabled>
|
|
1872
|
-
* Locked Tab
|
|
1873
|
-
* </TabsGlass.Trigger>
|
|
1874
|
-
* </TabsGlass.List>
|
|
1875
|
-
* <TabsGlass.Content value="tab1">Content 1</TabsGlass.Content>
|
|
1876
|
-
* </TabsGlass.Root>
|
|
1877
|
-
*
|
|
1878
|
-
* // Form tabs with proper focus management
|
|
1879
|
-
* <TabsGlass.Root value={currentStep} onValueChange={setCurrentStep}>
|
|
1880
|
-
* <TabsGlass.List aria-label="Registration steps">
|
|
1881
|
-
* <TabsGlass.Trigger value="account">Account Info</TabsGlass.Trigger>
|
|
1882
|
-
* <TabsGlass.Trigger value="profile">Profile Details</TabsGlass.Trigger>
|
|
1883
|
-
* <TabsGlass.Trigger value="confirm">Confirmation</TabsGlass.Trigger>
|
|
1884
|
-
* </TabsGlass.List>
|
|
1885
|
-
* <TabsGlass.Content value="account">
|
|
1886
|
-
* <InputGlass label="Email" type="email" />
|
|
1887
|
-
* </TabsGlass.Content>
|
|
1888
|
-
* <TabsGlass.Content value="profile">
|
|
1889
|
-
* <InputGlass label="Name" />
|
|
1890
|
-
* </TabsGlass.Content>
|
|
1891
|
-
* <TabsGlass.Content value="confirm">
|
|
1892
|
-
* <p>Review your information</p>
|
|
1893
|
-
* </TabsGlass.Content>
|
|
1894
|
-
* </TabsGlass.Root>
|
|
1895
|
-
* ```
|
|
1896
|
-
*/
|
|
1897
|
-
declare interface TabsRootProps {
|
|
1898
|
-
/** Current active tab value */
|
|
1899
|
-
value: string;
|
|
1900
|
-
/** Callback when tab value changes */
|
|
1901
|
-
onValueChange?: (value: string) => void;
|
|
1902
|
-
/** Child components */
|
|
1903
|
-
children: ReactNode;
|
|
1904
|
-
/** Optional className for container */
|
|
1905
|
-
className?: string;
|
|
1906
|
-
}
|
|
1907
|
-
|
|
1908
|
-
declare interface TabsTriggerProps {
|
|
1909
|
-
/** Value of this tab */
|
|
1910
|
-
value: string;
|
|
1911
|
-
/** Tab label/content */
|
|
1912
|
-
children: ReactNode;
|
|
1913
|
-
/** Optional className */
|
|
1914
|
-
className?: string;
|
|
1915
|
-
/** Disabled state */
|
|
1916
|
-
disabled?: boolean;
|
|
1917
|
-
}
|
|
1918
|
-
|
|
1919
|
-
export declare type Theme = "light" | "aurora" | "glass";
|
|
1920
|
-
|
|
1921
|
-
export declare const THEME_CONFIG: Record<Theme, ThemeConfig>;
|
|
1922
|
-
|
|
1923
|
-
export declare interface ThemeConfig {
|
|
1924
|
-
readonly label: string;
|
|
1925
|
-
readonly icon: LucideIcon;
|
|
1926
|
-
}
|
|
1927
|
-
|
|
1928
|
-
export declare interface ThemeContextValue {
|
|
1929
|
-
readonly theme: Theme;
|
|
1930
|
-
readonly setTheme: (theme: Theme) => void;
|
|
1931
|
-
readonly cycleTheme: () => void;
|
|
1932
|
-
}
|
|
1933
|
-
|
|
1934
|
-
export declare function ThemeProvider({ children, defaultTheme, storageKey, }: ThemeProviderProps): JSX.Element;
|
|
1935
|
-
|
|
1936
|
-
declare interface ThemeProviderProps {
|
|
1937
|
-
readonly children: ReactNode;
|
|
1938
|
-
readonly defaultTheme?: Theme;
|
|
1939
|
-
readonly storageKey?: string;
|
|
1940
|
-
}
|
|
1941
|
-
|
|
1942
|
-
export declare const THEMES: readonly Theme[];
|
|
1943
|
-
|
|
1944
|
-
export declare const ThemeToggleGlass: ForwardRefExoticComponent<ThemeToggleGlassProps & RefAttributes<HTMLButtonElement>>;
|
|
1945
|
-
|
|
1946
|
-
declare interface ThemeToggleGlassProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
|
1947
|
-
/** Custom theme toggle handler (overrides default cycleTheme) */
|
|
1948
|
-
readonly onToggle?: () => void;
|
|
1949
|
-
/** Icon size in pixels (default: 20) */
|
|
1950
|
-
readonly iconSize?: number;
|
|
1951
|
-
/** Show icon only (hide label on mobile) */
|
|
1952
|
-
readonly iconOnly?: boolean;
|
|
1953
|
-
}
|
|
1954
|
-
|
|
1955
|
-
export declare const ToggleGlass: ForwardRefExoticComponent<ToggleGlassProps & RefAttributes<HTMLButtonElement>>;
|
|
1956
|
-
|
|
1957
|
-
export declare interface ToggleGlassProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onChange'>, VariantProps<typeof toggleSizes> {
|
|
1958
|
-
readonly checked: boolean;
|
|
1959
|
-
readonly onChange?: (checked: boolean) => void;
|
|
1960
|
-
readonly label?: string;
|
|
1961
|
-
}
|
|
1962
|
-
|
|
1963
|
-
/**
|
|
1964
|
-
* ToggleGlass CVA Variants
|
|
1965
|
-
* Extracted for Fast Refresh compatibility
|
|
1966
|
-
*/
|
|
1967
|
-
export declare type ToggleGlassSize = 'sm' | 'md' | 'lg';
|
|
1968
|
-
|
|
1969
|
-
export declare const toggleSizes: (props?: ({
|
|
1970
|
-
size?: "sm" | "md" | "lg" | null | undefined;
|
|
1971
|
-
} & ClassProp) | undefined) => string;
|
|
1972
|
-
|
|
1973
|
-
export declare const TooltipGlass: ForwardRefExoticComponent<TooltipGlassProps & RefAttributes<HTMLDivElement>>;
|
|
1974
|
-
|
|
1975
|
-
/**
|
|
1976
|
-
* Props for the TooltipGlass component
|
|
1977
|
-
*
|
|
1978
|
-
* A glass-themed tooltip with configurable positioning and unified dark design.
|
|
1979
|
-
* Features smooth animations and WCAG-compliant accessibility attributes.
|
|
1980
|
-
*
|
|
1981
|
-
* @accessibility
|
|
1982
|
-
* - **Keyboard Navigation:** Tooltip appears on focus for keyboard users (same as hover)
|
|
1983
|
-
* - **Focus Management:** Tooltip does not trap focus, allows normal navigation flow
|
|
1984
|
-
* - **Screen Readers:** Uses `aria-describedby` to associate tooltip with trigger element (WCAG 4.1.3)
|
|
1985
|
-
* - **ARIA Attributes:** Tooltip marked with `role="tooltip"` and unique ID for proper association
|
|
1986
|
-
* - **Dismissible:** Tooltip dismisses on mouse leave, focus blur, or Escape key
|
|
1987
|
-
* - **Touch Targets:** N/A - tooltips appear on hover/focus, do not require direct interaction
|
|
1988
|
-
* - **Color Contrast:** Tooltip text meets WCAG AA contrast ratio 4.5:1 against dark background
|
|
1989
|
-
* - **Motion:** Fade-in animation respects `prefers-reduced-motion` settings
|
|
1990
|
-
*
|
|
1991
|
-
* @example
|
|
1992
|
-
* ```tsx
|
|
1993
|
-
* // Basic tooltip
|
|
1994
|
-
* <TooltipGlass content="Click to edit">
|
|
1995
|
-
* <button><Edit className="w-4 h-4" /></button>
|
|
1996
|
-
* </TooltipGlass>
|
|
1997
|
-
*
|
|
1998
|
-
* // Different positions
|
|
1999
|
-
* <TooltipGlass content="Top tooltip" position="top">
|
|
2000
|
-
* <ButtonGlass>Hover me</ButtonGlass>
|
|
2001
|
-
* </TooltipGlass>
|
|
2002
|
-
* <TooltipGlass content="Bottom tooltip" position="bottom">
|
|
2003
|
-
* <ButtonGlass>Hover me</ButtonGlass>
|
|
2004
|
-
* </TooltipGlass>
|
|
2005
|
-
* <TooltipGlass content="Left tooltip" position="left">
|
|
2006
|
-
* <ButtonGlass>Hover me</ButtonGlass>
|
|
2007
|
-
* </TooltipGlass>
|
|
2008
|
-
* <TooltipGlass content="Right tooltip" position="right">
|
|
2009
|
-
* <ButtonGlass>Hover me</ButtonGlass>
|
|
2010
|
-
* </TooltipGlass>
|
|
2011
|
-
*
|
|
2012
|
-
* // Icon button with accessible tooltip (provides label)
|
|
2013
|
-
* <TooltipGlass content="Delete item">
|
|
2014
|
-
* <ButtonGlass
|
|
2015
|
-
* icon={Trash}
|
|
2016
|
-
* size="icon"
|
|
2017
|
-
* variant="ghost"
|
|
2018
|
-
* aria-label="Delete item"
|
|
2019
|
-
* />
|
|
2020
|
-
* </TooltipGlass>
|
|
2021
|
-
*
|
|
2022
|
-
* // Informational tooltip on text
|
|
2023
|
-
* <TooltipGlass content="This feature requires a Pro subscription">
|
|
2024
|
-
* <span className="underline decoration-dotted">Pro Feature</span>
|
|
2025
|
-
* </TooltipGlass>
|
|
2026
|
-
*
|
|
2027
|
-
* // Badge with tooltip for additional context
|
|
2028
|
-
* <TooltipGlass content="Last updated 2 hours ago" position="top">
|
|
2029
|
-
* <BadgeGlass variant="success" dot>
|
|
2030
|
-
* Active
|
|
2031
|
-
* </BadgeGlass>
|
|
2032
|
-
* </TooltipGlass>
|
|
2033
|
-
*
|
|
2034
|
-
* // Disabled button with explanation tooltip
|
|
2035
|
-
* <TooltipGlass content="Save your changes first to enable this action">
|
|
2036
|
-
* <span>
|
|
2037
|
-
* <ButtonGlass disabled aria-describedby="tooltip-id">
|
|
2038
|
-
* Export
|
|
2039
|
-
* </ButtonGlass>
|
|
2040
|
-
* </span>
|
|
2041
|
-
* </TooltipGlass>
|
|
2042
|
-
* ```
|
|
2043
|
-
*/
|
|
2044
|
-
export declare interface TooltipGlassProps extends VariantProps<typeof tooltipPositions> {
|
|
2045
|
-
readonly children: ReactNode;
|
|
2046
|
-
readonly content: string;
|
|
2047
|
-
readonly position?: TooltipPosition;
|
|
2048
|
-
readonly className?: string;
|
|
2049
|
-
}
|
|
2050
|
-
|
|
2051
|
-
/**
|
|
2052
|
-
* TooltipGlass CVA Variants
|
|
2053
|
-
* Extracted for Fast Refresh compatibility
|
|
2054
|
-
*/
|
|
2055
|
-
export declare type TooltipPosition = 'top' | 'bottom' | 'left' | 'right';
|
|
2056
|
-
|
|
2057
|
-
export declare const tooltipPositions: (props?: ({
|
|
2058
|
-
position?: "bottom" | "left" | "right" | "top" | null | undefined;
|
|
2059
|
-
} & ClassProp) | undefined) => string;
|
|
2060
|
-
|
|
2061
|
-
/**
|
|
2062
|
-
* TouchTarget wrapper component
|
|
2063
|
-
*
|
|
2064
|
-
* Ensures interactive elements meet accessibility standards for touch devices.
|
|
2065
|
-
* Automatically applies minimum dimensions and optional centering.
|
|
2066
|
-
*
|
|
2067
|
-
* @example
|
|
2068
|
-
* ```tsx
|
|
2069
|
-
* // Basic usage with default 44px minimum
|
|
2070
|
-
* <TouchTarget>
|
|
2071
|
-
* <button className="w-8 h-8">×</button>
|
|
2072
|
-
* </TouchTarget>
|
|
2073
|
-
*
|
|
2074
|
-
* // Material Design 48px minimum
|
|
2075
|
-
* <TouchTarget minSize={48}>
|
|
2076
|
-
* <Checkbox />
|
|
2077
|
-
* </TouchTarget>
|
|
2078
|
-
*
|
|
2079
|
-
* // Custom alignment
|
|
2080
|
-
* <TouchTarget center={false} className="justify-start">
|
|
2081
|
-
* <IconButton />
|
|
2082
|
-
* </TouchTarget>
|
|
2083
|
-
* ```
|
|
2084
|
-
*/
|
|
2085
|
-
export declare const TouchTarget: ForwardRefExoticComponent<TouchTargetProps & RefAttributes<HTMLDivElement>>;
|
|
2086
|
-
|
|
2087
|
-
/**
|
|
2088
|
-
* Props for the TouchTarget component
|
|
2089
|
-
*/
|
|
2090
|
-
declare interface TouchTargetProps extends HTMLAttributes<HTMLDivElement> {
|
|
2091
|
-
/**
|
|
2092
|
-
* Child element(s) to wrap with touch target
|
|
2093
|
-
*/
|
|
2094
|
-
children: ReactNode;
|
|
2095
|
-
/**
|
|
2096
|
-
* Minimum touch target size in pixels
|
|
2097
|
-
* @default 44 - Apple HIG minimum
|
|
2098
|
-
*/
|
|
2099
|
-
minSize?: 44 | 48;
|
|
2100
|
-
/**
|
|
2101
|
-
* Center content within touch target
|
|
2102
|
-
* @default true
|
|
2103
|
-
*/
|
|
2104
|
-
center?: boolean;
|
|
2105
|
-
}
|
|
2106
|
-
|
|
2107
|
-
export declare const TrustScoreCardGlass: ForwardRefExoticComponent<TrustScoreCardGlassProps & RefAttributes<HTMLDivElement>>;
|
|
2108
|
-
|
|
2109
|
-
declare interface TrustScoreCardGlassProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
2110
|
-
readonly score?: number;
|
|
2111
|
-
readonly metrics?: readonly MetricData_2[];
|
|
2112
|
-
}
|
|
2113
|
-
|
|
2114
|
-
export declare const TrustScoreDisplayGlass: ForwardRefExoticComponent<TrustScoreDisplayGlassProps & RefAttributes<HTMLDivElement>>;
|
|
2115
|
-
|
|
2116
|
-
declare interface TrustScoreDisplayGlassProps extends HTMLAttributes<HTMLDivElement> {
|
|
2117
|
-
/** Score value (0-100) */
|
|
2118
|
-
readonly score: number;
|
|
2119
|
-
/** Maximum score (default: 100) */
|
|
2120
|
-
readonly maxScore?: number;
|
|
2121
|
-
/** Title text */
|
|
2122
|
-
readonly title?: string;
|
|
2123
|
-
/** Show icon */
|
|
2124
|
-
readonly showIcon?: boolean;
|
|
2125
|
-
/** Size variant */
|
|
2126
|
-
readonly size?: 'sm' | 'md' | 'lg';
|
|
2127
|
-
}
|
|
2128
|
-
|
|
2129
|
-
/**
|
|
2130
|
-
* Hook for managing focus state with optional focus-visible support.
|
|
2131
|
-
*
|
|
2132
|
-
* @example Basic usage
|
|
2133
|
-
* ```tsx
|
|
2134
|
-
* const { isFocused, focusProps } = useFocus();
|
|
2135
|
-
*
|
|
2136
|
-
* return (
|
|
2137
|
-
* <input
|
|
2138
|
-
* {...focusProps}
|
|
2139
|
-
* style={{
|
|
2140
|
-
* borderColor: isFocused ? 'violet' : 'gray',
|
|
2141
|
-
* }}
|
|
2142
|
-
* />
|
|
2143
|
-
* );
|
|
2144
|
-
* ```
|
|
2145
|
-
*
|
|
2146
|
-
* @example Focus-visible for keyboard navigation
|
|
2147
|
-
* ```tsx
|
|
2148
|
-
* const { isFocusVisible, focusProps } = useFocus({ focusVisible: true });
|
|
2149
|
-
*
|
|
2150
|
-
* return (
|
|
2151
|
-
* <button
|
|
2152
|
-
* {...focusProps}
|
|
2153
|
-
* style={{
|
|
2154
|
-
* outline: isFocusVisible ? '2px solid violet' : 'none',
|
|
2155
|
-
* }}
|
|
2156
|
-
* >
|
|
2157
|
-
* Click or Tab to me
|
|
2158
|
-
* </button>
|
|
2159
|
-
* );
|
|
2160
|
-
* ```
|
|
2161
|
-
*/
|
|
2162
|
-
export declare function useFocus(options?: UseFocusOptions): UseFocusReturn;
|
|
2163
|
-
|
|
2164
|
-
declare interface UseFocusOptions {
|
|
2165
|
-
/** Callback when focus state changes */
|
|
2166
|
-
onFocusChange?: (isFocused: boolean) => void;
|
|
2167
|
-
/** Include focus-visible behavior (keyboard focus only) */
|
|
2168
|
-
focusVisible?: boolean;
|
|
2169
|
-
/** Callback for keyboard events while focused */
|
|
2170
|
-
onKeyDown?: (e: KeyboardEvent_2) => void;
|
|
2171
|
-
}
|
|
2172
|
-
|
|
2173
|
-
declare interface UseFocusReturn {
|
|
2174
|
-
/** Current focus state */
|
|
2175
|
-
isFocused: boolean;
|
|
2176
|
-
/** True only when focused via keyboard (if focusVisible enabled) */
|
|
2177
|
-
isFocusVisible: boolean;
|
|
2178
|
-
/** Props to spread on the target element */
|
|
2179
|
-
focusProps: {
|
|
2180
|
-
onFocus: (e: FocusEvent_2) => void;
|
|
2181
|
-
onBlur: (e: FocusEvent_2) => void;
|
|
2182
|
-
onKeyDown?: (e: KeyboardEvent_2) => void;
|
|
2183
|
-
};
|
|
2184
|
-
/** Manually set focus state */
|
|
2185
|
-
setIsFocused: (value: boolean) => void;
|
|
2186
|
-
/** Reference to track if last focus was from keyboard */
|
|
2187
|
-
focusRef: React.RefObject<boolean>;
|
|
2188
|
-
}
|
|
2189
|
-
|
|
2190
|
-
/**
|
|
2191
|
-
* Hook for managing hover state with optional delays and focus support.
|
|
2192
|
-
*
|
|
2193
|
-
* @example
|
|
2194
|
-
* ```tsx
|
|
2195
|
-
* const { isHovered, hoverProps } = useHover();
|
|
2196
|
-
*
|
|
2197
|
-
* return (
|
|
2198
|
-
* <div
|
|
2199
|
-
* {...hoverProps}
|
|
2200
|
-
* style={{ opacity: isHovered ? 1 : 0.8 }}
|
|
2201
|
-
* >
|
|
2202
|
-
* Hover me
|
|
2203
|
-
* </div>
|
|
2204
|
-
* );
|
|
2205
|
-
* ```
|
|
2206
|
-
*
|
|
2207
|
-
* @example With options
|
|
2208
|
-
* ```tsx
|
|
2209
|
-
* const { isHovered, hoverProps } = useHover({
|
|
2210
|
-
* enterDelay: 100,
|
|
2211
|
-
* leaveDelay: 200,
|
|
2212
|
-
* includeFocus: true,
|
|
2213
|
-
* onHoverChange: (hover) => console.log('Hovered:', hover),
|
|
2214
|
-
* });
|
|
2215
|
-
* ```
|
|
2216
|
-
*/
|
|
2217
|
-
export declare function useHover(options?: UseHoverOptions): UseHoverReturn;
|
|
2218
|
-
|
|
2219
|
-
declare interface UseHoverOptions {
|
|
2220
|
-
/** Delay before hover state becomes true (ms) */
|
|
2221
|
-
enterDelay?: number;
|
|
2222
|
-
/** Delay before hover state becomes false (ms) */
|
|
2223
|
-
leaveDelay?: number;
|
|
2224
|
-
/** Include focus events for accessibility */
|
|
2225
|
-
includeFocus?: boolean;
|
|
2226
|
-
/** Callback when hover state changes */
|
|
2227
|
-
onHoverChange?: (isHovered: boolean) => void;
|
|
2228
|
-
}
|
|
2229
|
-
|
|
2230
|
-
declare interface UseHoverReturn {
|
|
2231
|
-
/** Current hover state */
|
|
2232
|
-
isHovered: boolean;
|
|
2233
|
-
/** Props to spread on the target element */
|
|
2234
|
-
hoverProps: {
|
|
2235
|
-
onMouseEnter: (e: MouseEvent_2) => void;
|
|
2236
|
-
onMouseLeave: (e: MouseEvent_2) => void;
|
|
2237
|
-
onFocus?: (e: FocusEvent_2) => void;
|
|
2238
|
-
onBlur?: (e: FocusEvent_2) => void;
|
|
2239
|
-
};
|
|
2240
|
-
/** Manually set hover state */
|
|
2241
|
-
setIsHovered: (value: boolean) => void;
|
|
2242
|
-
}
|
|
2243
|
-
|
|
2244
|
-
/**
|
|
2245
|
-
* Hook to detect current responsive breakpoint
|
|
2246
|
-
*
|
|
2247
|
-
* @returns Responsive state with current breakpoint and device type flags
|
|
2248
|
-
*
|
|
2249
|
-
* @example
|
|
2250
|
-
* ```tsx
|
|
2251
|
-
* const { isMobile, isTablet, isDesktop, currentBreakpoint } = useResponsive();
|
|
2252
|
-
*
|
|
2253
|
-
* return (
|
|
2254
|
-
* <div className={isMobile ? 'flex-col' : 'flex-row'}>
|
|
2255
|
-
* {currentBreakpoint === 'lg' && <Sidebar />}
|
|
2256
|
-
* </div>
|
|
2257
|
-
* );
|
|
2258
|
-
* ```
|
|
2259
|
-
*/
|
|
2260
|
-
export declare function useResponsive(): UseResponsiveReturn;
|
|
2261
|
-
|
|
2262
|
-
declare interface UseResponsiveReturn {
|
|
2263
|
-
/** Window width is less than 768px (mobile) */
|
|
2264
|
-
isMobile: boolean;
|
|
2265
|
-
/** Window width is >= 768px and < 1024px (tablet) */
|
|
2266
|
-
isTablet: boolean;
|
|
2267
|
-
/** Window width is >= 1024px (desktop) */
|
|
2268
|
-
isDesktop: boolean;
|
|
2269
|
-
/** Current active breakpoint */
|
|
2270
|
-
currentBreakpoint: Breakpoint;
|
|
2271
|
-
/** Current window width in pixels */
|
|
2272
|
-
width: number;
|
|
2273
|
-
}
|
|
2274
|
-
|
|
2275
|
-
export declare const UserInfoGlass: ForwardRefExoticComponent<UserInfoGlassProps & RefAttributes<HTMLDivElement>>;
|
|
2276
|
-
|
|
2277
|
-
declare interface UserInfoGlassProps extends HTMLAttributes<HTMLDivElement> {
|
|
2278
|
-
/** Full name */
|
|
2279
|
-
readonly name: string;
|
|
2280
|
-
/** Username (without @) */
|
|
2281
|
-
readonly username: string;
|
|
2282
|
-
/** Join date string (e.g., "Jan 2023") */
|
|
2283
|
-
readonly joinDate: string;
|
|
2284
|
-
/** Username link URL (default: #) */
|
|
2285
|
-
readonly profileUrl?: string;
|
|
2286
|
-
/** Layout orientation */
|
|
2287
|
-
readonly layout?: 'vertical' | 'horizontal';
|
|
2288
|
-
}
|
|
2289
|
-
|
|
2290
|
-
export declare const UserStatsLineGlass: ForwardRefExoticComponent<UserStatsLineGlassProps & RefAttributes<HTMLDivElement>>;
|
|
2291
|
-
|
|
2292
|
-
declare interface UserStatsLineGlassProps extends HTMLAttributes<HTMLDivElement> {
|
|
2293
|
-
/** Number of repositories */
|
|
2294
|
-
readonly repos: number;
|
|
2295
|
-
/** Number of followers */
|
|
2296
|
-
readonly followers: number;
|
|
2297
|
-
/** Number of following */
|
|
2298
|
-
readonly following: number;
|
|
2299
|
-
/** Wrap stats on mobile */
|
|
2300
|
-
readonly wrap?: boolean;
|
|
2301
|
-
/** Abbreviated numbers for mobile (1.2k instead of 1234) */
|
|
2302
|
-
readonly abbreviated?: boolean;
|
|
2303
|
-
}
|
|
2304
|
-
|
|
2305
|
-
export declare function useTheme(): ThemeContextValue;
|
|
2306
|
-
|
|
2307
|
-
/**
|
|
2308
|
-
* Hook to extract and use wallpaper tint color
|
|
2309
|
-
*
|
|
2310
|
-
* @example
|
|
2311
|
-
* ```tsx
|
|
2312
|
-
* const { tintColor, isLoading } = useWallpaperTint({
|
|
2313
|
-
* imageUrl: '/path/to/background.jpg',
|
|
2314
|
-
* });
|
|
2315
|
-
*
|
|
2316
|
-
* // Use tintColor in CSS variables
|
|
2317
|
-
* <div style={{ '--wallpaper-tint': tintColor }}>
|
|
2318
|
-
* <GlassCard />
|
|
2319
|
-
* </div>
|
|
2320
|
-
* ```
|
|
2321
|
-
*/
|
|
2322
|
-
export declare const useWallpaperTint: (options?: WallpaperTintOptions) => WallpaperTintResult;
|
|
2323
|
-
|
|
2324
|
-
declare interface WallpaperTintOptions {
|
|
2325
|
-
/**
|
|
2326
|
-
* The image URL to sample for tint color
|
|
2327
|
-
*/
|
|
2328
|
-
imageUrl?: string;
|
|
2329
|
-
/**
|
|
2330
|
-
* Debounce delay in milliseconds
|
|
2331
|
-
* @default 300
|
|
2332
|
-
*/
|
|
2333
|
-
debounceMs?: number;
|
|
2334
|
-
/**
|
|
2335
|
-
* Number of sample points to take from the image
|
|
2336
|
-
* @default 10
|
|
2337
|
-
*/
|
|
2338
|
-
sampleSize?: number;
|
|
2339
|
-
/**
|
|
2340
|
-
* Whether to enable the tint extraction
|
|
2341
|
-
* @default true
|
|
2342
|
-
*/
|
|
2343
|
-
enabled?: boolean;
|
|
2344
|
-
}
|
|
2345
|
-
|
|
2346
|
-
declare interface WallpaperTintResult {
|
|
2347
|
-
/**
|
|
2348
|
-
* The extracted tint color in RGB format
|
|
2349
|
-
* Example: "120, 80, 200"
|
|
2350
|
-
*/
|
|
2351
|
-
tintColor: string | null;
|
|
2352
|
-
/**
|
|
2353
|
-
* Whether the tint extraction is in progress
|
|
2354
|
-
*/
|
|
2355
|
-
isLoading: boolean;
|
|
2356
|
-
/**
|
|
2357
|
-
* Error message if extraction failed
|
|
2358
|
-
*/
|
|
2359
|
-
error: string | null;
|
|
2360
|
-
/**
|
|
2361
|
-
* Re-extract the tint color from the current image
|
|
2362
|
-
*/
|
|
2363
|
-
refresh: () => void;
|
|
2364
|
-
}
|
|
2365
|
-
|
|
2366
|
-
export declare const YearCardGlass: ForwardRefExoticComponent<YearCardGlassProps & RefAttributes<HTMLDivElement>>;
|
|
2367
|
-
|
|
2368
|
-
declare interface YearCardGlassProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
2369
|
-
readonly year: string | number;
|
|
2370
|
-
readonly emoji: string;
|
|
2371
|
-
readonly label: string;
|
|
2372
|
-
readonly commits: string;
|
|
2373
|
-
readonly progress: number;
|
|
2374
|
-
readonly isExpanded?: boolean;
|
|
2375
|
-
readonly gradient?: ProgressGradient;
|
|
2376
|
-
readonly prs?: number;
|
|
2377
|
-
readonly repos?: number;
|
|
2378
|
-
readonly onShowYear?: () => void;
|
|
2379
|
-
}
|
|
2380
|
-
|
|
2381
|
-
declare interface YearData {
|
|
2382
|
-
readonly year: string | number;
|
|
2383
|
-
readonly emoji: string;
|
|
2384
|
-
readonly label: string;
|
|
2385
|
-
readonly commits: string;
|
|
2386
|
-
readonly progress: number;
|
|
2387
|
-
readonly prs?: number;
|
|
2388
|
-
readonly repos?: number;
|
|
2389
|
-
}
|
|
2390
|
-
|
|
2391
1
|
export { }
|