shadcn-glass-ui 2.0.6 → 2.0.9
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/README.md +159 -105
- package/dist/cli/index.cjs +1 -1
- package/dist/components.cjs +4 -4
- package/dist/components.d.ts +63 -322
- package/dist/components.js +2 -2
- package/dist/hooks.cjs +2 -2
- package/dist/index.cjs +43 -6
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +12 -3
- package/dist/index.js.map +1 -1
- package/dist/r/alert-glass.json +2 -1
- package/dist/r/avatar-glass.json +2 -3
- package/dist/r/button-glass.json +1 -1
- package/dist/r/circular-progress-glass.json +1 -1
- package/dist/r/combobox-glass.json +1 -1
- package/dist/r/dropdown-glass.json +3 -5
- package/dist/r/dropdown-menu-glass.json +42 -0
- package/dist/r/language-bar-glass.json +2 -2
- package/dist/r/popover-glass.json +1 -1
- package/dist/r/profile-avatar-glass.json +5 -3
- package/dist/r/rainbow-progress-glass.json +1 -1
- package/dist/r/registry.json +10 -4
- package/dist/r/sort-dropdown-glass.json +3 -4
- package/dist/r/tooltip-glass.json +3 -5
- package/dist/r/trust-score-card-glass.json +1 -1
- package/dist/r/trust-score-display-glass.json +1 -1
- package/dist/shadcn-glass-ui.css +1 -1
- package/dist/{theme-context-CVW50BKW.cjs → theme-context-DNe_2vWJ.cjs} +2 -2
- package/dist/theme-context-DNe_2vWJ.cjs.map +1 -0
- package/dist/{theme-context-BZoCplcU.js → theme-context-_T5r1KG4.js} +1 -1
- package/dist/theme-context-_T5r1KG4.js.map +1 -0
- package/dist/themes.cjs +1 -1
- package/dist/themes.d.ts +89 -1
- package/dist/themes.js +1 -1
- package/dist/{trust-score-card-glass-BcZbul0P.js → trust-score-card-glass-A7kas5OS.js} +353 -279
- package/dist/trust-score-card-glass-A7kas5OS.js.map +1 -0
- package/dist/{trust-score-card-glass-r3qM09Jp.cjs → trust-score-card-glass-Dgu46oWI.cjs} +551 -313
- package/dist/trust-score-card-glass-Dgu46oWI.cjs.map +1 -0
- package/dist/{use-focus-ZE8ozmZE.cjs → use-focus-BRkQtQCj.cjs} +2 -2
- package/dist/{use-focus-ZE8ozmZE.cjs.map → use-focus-BRkQtQCj.cjs.map} +1 -1
- package/dist/{use-wallpaper-tint-BuS80tbN.cjs → use-wallpaper-tint-CfShPBo2.cjs} +2 -2
- package/dist/{use-wallpaper-tint-BuS80tbN.cjs.map → use-wallpaper-tint-CfShPBo2.cjs.map} +1 -1
- package/dist/{utils-DLXayspX.cjs → utils-BXN7AcRu.cjs} +2 -2
- package/dist/{utils-DLXayspX.cjs.map → utils-BXN7AcRu.cjs.map} +1 -1
- package/dist/utils.cjs +1 -1
- package/docs/AI_USAGE.md +1 -32
- package/docs/API_PATTERNS_COMPARISON.md +10 -9
- package/docs/COMPONENTS_CATALOG.md +140 -45
- package/docs/DROPDOWN_ARCHITECTURE.md +290 -0
- package/docs/GETTING_STARTED.md +6 -5
- package/docs/TOKEN_ARCHITECTURE.md +100 -0
- package/docs/api/README.md +3 -3
- package/docs/migration/compound-components-v2.md +384 -0
- package/docs/visual-testing-guide.md +50 -12
- package/package.json +2 -2
- package/dist/theme-context-BZoCplcU.js.map +0 -1
- package/dist/theme-context-CVW50BKW.cjs.map +0 -1
- package/dist/trust-score-card-glass-BcZbul0P.js.map +0 -1
- package/dist/trust-score-card-glass-r3qM09Jp.cjs.map +0 -1
- package/docs/ADVANCED_PATTERNS.md +0 -408
- package/docs/BREAKING_CHANGES.md +0 -213
- package/docs/announcements/v1.0.5-devto.md +0 -363
- package/docs/announcements/v1.0.5-reddit.md +0 -115
- package/docs/announcements/v1.0.5-twitter.md +0 -70
package/dist/components.d.ts
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import * as AvatarPrimitive from '@radix-ui/react-avatar';
|
|
1
2
|
import { ButtonHTMLAttributes } from 'react';
|
|
2
3
|
import { ClassProp } from 'class-variance-authority/types';
|
|
3
4
|
import { default as default_2 } from 'react';
|
|
@@ -7,9 +8,11 @@ import { HTMLAttributes } from 'react';
|
|
|
7
8
|
import { InputHTMLAttributes } from 'react';
|
|
8
9
|
import { JSX } from 'react/jsx-runtime';
|
|
9
10
|
import { LucideIcon } from 'lucide-react';
|
|
11
|
+
import * as PopoverPrimitive from '@radix-ui/react-popover';
|
|
10
12
|
import * as React_2 from 'react';
|
|
11
13
|
import { ReactNode } from 'react';
|
|
12
14
|
import { RefAttributes } from 'react';
|
|
15
|
+
import * as TooltipPrimitive from '@radix-ui/react-tooltip';
|
|
13
16
|
import { VariantProps } from 'class-variance-authority';
|
|
14
17
|
|
|
15
18
|
export declare const AICardGlass: ForwardRefExoticComponent<AICardGlassProps & RefAttributes<HTMLDivElement>>;
|
|
@@ -22,145 +25,25 @@ declare interface AICardGlassProps extends React.HTMLAttributes<HTMLDivElement>
|
|
|
22
25
|
|
|
23
26
|
export declare const AlertGlass: ForwardRefExoticComponent<AlertGlassProps & RefAttributes<HTMLDivElement>>;
|
|
24
27
|
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
* A glass-themed alert with semantic variants, dismissible option, and automatic icon selection.
|
|
29
|
-
* Features theme-aware styling and WCAG-compliant role attributes.
|
|
30
|
-
*
|
|
31
|
-
* @accessibility
|
|
32
|
-
* - **Keyboard Navigation:** Dismissible alerts include a keyboard-accessible close button (Tab + Enter/Space)
|
|
33
|
-
* - **Focus Management:** Close button receives visible focus ring (WCAG 2.4.7)
|
|
34
|
-
* - **Screen Readers:** Uses `role="alert"` for immediate announcement to screen readers (WCAG 4.1.3)
|
|
35
|
-
* - **Icon Semantics:** Icons are decorative and hidden from screen readers with `aria-hidden="true"`
|
|
36
|
-
* - **Variant Semantics:** Each variant uses distinct colors and icons for multi-modal communication (color + icon)
|
|
37
|
-
* - **Touch Targets:** Dismiss button meets minimum 44x44px touch target (WCAG 2.5.5)
|
|
38
|
-
* - **Color Contrast:** All variant text and backgrounds meet WCAG AA contrast ratio 4.5:1
|
|
39
|
-
* - **Motion:** Transitions respect `prefers-reduced-motion` settings
|
|
40
|
-
*
|
|
41
|
-
* @example
|
|
42
|
-
* ```tsx
|
|
43
|
-
* // Basic alert (info/default variant)
|
|
44
|
-
* <AlertGlass title="Information" variant="default">
|
|
45
|
-
* This is an informational message
|
|
46
|
-
* </AlertGlass>
|
|
47
|
-
*
|
|
48
|
-
* // Error alert with aria-live for dynamic updates
|
|
49
|
-
* <AlertGlass variant="destructive" title="Error" aria-live="assertive">
|
|
50
|
-
* Your session has expired. Please log in again.
|
|
51
|
-
* </AlertGlass>
|
|
52
|
-
*
|
|
53
|
-
* // Success alert
|
|
54
|
-
* <AlertGlass variant="success" title="Success">
|
|
55
|
-
* Your changes have been saved successfully.
|
|
56
|
-
* </AlertGlass>
|
|
57
|
-
*
|
|
58
|
-
* // Warning alert
|
|
59
|
-
* <AlertGlass variant="warning" title="Warning">
|
|
60
|
-
* Your subscription expires in 3 days.
|
|
61
|
-
* </AlertGlass>
|
|
62
|
-
*
|
|
63
|
-
* // Dismissible alert with accessible close button
|
|
64
|
-
* <AlertGlass
|
|
65
|
-
* variant="default"
|
|
66
|
-
* title="Welcome"
|
|
67
|
-
* dismissible
|
|
68
|
-
* onDismiss={() => setShowAlert(false)}
|
|
69
|
-
* >
|
|
70
|
-
* Check out our new features!
|
|
71
|
-
* </AlertGlass>
|
|
72
|
-
*
|
|
73
|
-
* // Alert without title
|
|
74
|
-
* <AlertGlass variant="destructive">
|
|
75
|
-
* Quick error message without title
|
|
76
|
-
* </AlertGlass>
|
|
77
|
-
*
|
|
78
|
-
* // Form validation alert
|
|
79
|
-
* <form onSubmit={handleSubmit}>
|
|
80
|
-
* {formError && (
|
|
81
|
-
* <AlertGlass variant="destructive" title="Validation Error" role="alert">
|
|
82
|
-
* {formError}
|
|
83
|
-
* </AlertGlass>
|
|
84
|
-
* )}
|
|
85
|
-
* <InputGlass label="Email" />
|
|
86
|
-
* <ButtonGlass type="submit">Submit</ButtonGlass>
|
|
87
|
-
* </form>
|
|
88
|
-
* ```
|
|
89
|
-
*/
|
|
90
|
-
declare interface AlertGlassProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'style' | 'title'>, VariantProps<typeof alertVariants> {
|
|
91
|
-
readonly title?: string;
|
|
92
|
-
readonly children: ReactNode;
|
|
93
|
-
readonly dismissible?: boolean;
|
|
94
|
-
readonly onDismiss?: () => void;
|
|
28
|
+
declare interface AlertGlassProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'style'>, VariantProps<typeof alertVariants> {
|
|
29
|
+
dismissible?: boolean;
|
|
30
|
+
onDismiss?: () => void;
|
|
95
31
|
}
|
|
96
32
|
|
|
97
33
|
declare const alertVariants: (props?: ({
|
|
98
34
|
variant?: "default" | "destructive" | "success" | "warning" | "info" | "error" | null | undefined;
|
|
99
35
|
} & ClassProp) | undefined) => string;
|
|
100
36
|
|
|
101
|
-
export declare const AvatarGlass: ForwardRefExoticComponent<
|
|
37
|
+
export declare const AvatarGlass: React_2.ForwardRefExoticComponent<AvatarGlassRootProps & React_2.RefAttributes<HTMLSpanElement>>;
|
|
102
38
|
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
* Displays user initials with theme-aware styling and optional status badge.
|
|
108
|
-
*
|
|
109
|
-
* @example
|
|
110
|
-
* ```tsx
|
|
111
|
-
* // Basic avatar
|
|
112
|
-
* <AvatarGlass name="John Doe" />
|
|
113
|
-
*
|
|
114
|
-
* // With status indicator
|
|
115
|
-
* <AvatarGlass name="Jane Smith" status="online" size="lg" />
|
|
116
|
-
*
|
|
117
|
-
* // Different sizes
|
|
118
|
-
* <AvatarGlass name="Alex" size="sm" />
|
|
119
|
-
* <AvatarGlass name="Sam" size="xl" />
|
|
120
|
-
*
|
|
121
|
-
* // As a link (asChild pattern)
|
|
122
|
-
* <AvatarGlass asChild name="Sarah Connor" status="online">
|
|
123
|
-
* <a href="/profile/sarah">View Profile</a>
|
|
124
|
-
* </AvatarGlass>
|
|
125
|
-
* ```
|
|
126
|
-
*/
|
|
127
|
-
declare interface AvatarGlassProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'style'>, VariantProps<typeof avatarSizes> {
|
|
128
|
-
/**
|
|
129
|
-
* Render as child element instead of div (polymorphic rendering).
|
|
130
|
-
* Useful for making avatars clickable links.
|
|
131
|
-
* @default false
|
|
132
|
-
* @example
|
|
133
|
-
* ```tsx
|
|
134
|
-
* <AvatarGlass asChild name="John">
|
|
135
|
-
* <a href="/profile">View Profile</a>
|
|
136
|
-
* </AvatarGlass>
|
|
137
|
-
* ```
|
|
138
|
-
*/
|
|
139
|
-
readonly asChild?: boolean;
|
|
140
|
-
/**
|
|
141
|
-
* Full name of the user. Automatically generates initials (first 2 letters).
|
|
142
|
-
* @example "John Doe" → "JD"
|
|
143
|
-
*/
|
|
144
|
-
readonly name: string;
|
|
145
|
-
/**
|
|
146
|
-
* Optional status indicator with glow effect
|
|
147
|
-
* @default undefined
|
|
148
|
-
*/
|
|
149
|
-
readonly status?: AvatarStatus;
|
|
150
|
-
/**
|
|
151
|
-
* Size variant of the avatar
|
|
152
|
-
* @default "md"
|
|
153
|
-
*/
|
|
154
|
-
readonly size?: 'sm' | 'md' | 'lg' | 'xl';
|
|
39
|
+
declare interface AvatarGlassRootProps extends React_2.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root> {
|
|
40
|
+
size?: AvatarSize;
|
|
41
|
+
status?: AvatarStatus;
|
|
42
|
+
glowing?: boolean;
|
|
155
43
|
}
|
|
156
44
|
|
|
157
|
-
declare
|
|
158
|
-
size?: "sm" | "md" | "lg" | "xl" | null | undefined;
|
|
159
|
-
} & ClassProp) | undefined) => string;
|
|
45
|
+
declare type AvatarSize = 'sm' | 'md' | 'lg' | 'xl';
|
|
160
46
|
|
|
161
|
-
/**
|
|
162
|
-
* Avatar status indicator type
|
|
163
|
-
*/
|
|
164
47
|
declare type AvatarStatus = 'online' | 'offline' | 'busy' | 'away';
|
|
165
48
|
|
|
166
49
|
export declare const BadgeGlass: ForwardRefExoticComponent<BadgeGlassProps & RefAttributes<HTMLSpanElement>>;
|
|
@@ -609,93 +492,31 @@ declare interface ContributionMetricsGlassProps extends HTMLAttributes<HTMLDivEl
|
|
|
609
492
|
readonly columns?: 1 | 2;
|
|
610
493
|
}
|
|
611
494
|
|
|
495
|
+
/**
|
|
496
|
+
* DropdownGlass - Simple API wrapper
|
|
497
|
+
*
|
|
498
|
+
* For complex dropdowns with checkboxes, radio groups, sub-menus, etc.,
|
|
499
|
+
* use the compound components from dropdown-menu-glass.tsx directly.
|
|
500
|
+
*/
|
|
612
501
|
export declare const DropdownGlass: React_2.ForwardRefExoticComponent<DropdownGlassProps & React_2.RefAttributes<HTMLDivElement>>;
|
|
613
502
|
|
|
614
503
|
/**
|
|
615
|
-
* Props for the DropdownGlass component
|
|
616
|
-
*
|
|
617
|
-
* A glass-themed dropdown menu with accessible keyboard navigation, based on Radix UI primitives.
|
|
618
|
-
* Features theme-aware styling, smooth animations, and WCAG-compliant interactions.
|
|
504
|
+
* Props for the DropdownGlass component (Simple API)
|
|
619
505
|
*
|
|
620
506
|
* @accessibility
|
|
621
|
-
* - **Keyboard Navigation:** Arrow keys navigate
|
|
622
|
-
* - **Focus Management:** Focus trapped within menu when open
|
|
623
|
-
* - **Screen Readers:** Uses
|
|
624
|
-
* - **
|
|
625
|
-
* - **Trigger Association:** Menu automatically associated with trigger button via Radix UI primitives
|
|
626
|
-
* - **Touch Targets:** All menu items meet minimum 44x44px touch target (WCAG 2.5.5)
|
|
627
|
-
* - **Color Contrast:** Menu text and backgrounds meet WCAG AA contrast ratio 4.5:1
|
|
628
|
-
* - **Motion:** Open/close animations respect `prefers-reduced-motion` settings
|
|
629
|
-
*
|
|
630
|
-
* @example
|
|
631
|
-
* ```tsx
|
|
632
|
-
* // Basic dropdown with icon items
|
|
633
|
-
* <DropdownGlass
|
|
634
|
-
* trigger={
|
|
635
|
-
* <button aria-label="Open menu">
|
|
636
|
-
* <MoreVertical className="w-5 h-5" />
|
|
637
|
-
* </button>
|
|
638
|
-
* }
|
|
639
|
-
* items={[
|
|
640
|
-
* { label: 'Edit', icon: Edit, onClick: handleEdit },
|
|
641
|
-
* { label: 'Delete', icon: Trash, onClick: handleDelete, danger: true }
|
|
642
|
-
* ]}
|
|
643
|
-
* />
|
|
644
|
-
*
|
|
645
|
-
* // Dropdown with dividers and alignment
|
|
646
|
-
* <DropdownGlass
|
|
647
|
-
* trigger={<ButtonGlass>Actions</ButtonGlass>}
|
|
648
|
-
* align="right"
|
|
649
|
-
* items={[
|
|
650
|
-
* { label: 'View', icon: Eye, onClick: () => navigate('/view') },
|
|
651
|
-
* { label: 'Edit', icon: Edit, onClick: () => setEditMode(true) },
|
|
652
|
-
* { divider: true },
|
|
653
|
-
* { label: 'Archive', icon: Archive, onClick: handleArchive },
|
|
654
|
-
* { divider: true },
|
|
655
|
-
* { label: 'Delete', icon: Trash, onClick: handleDelete, danger: true }
|
|
656
|
-
* ]}
|
|
657
|
-
* />
|
|
658
|
-
*
|
|
659
|
-
* // Dropdown in table row (ensure trigger has accessible label)
|
|
660
|
-
* <DropdownGlass
|
|
661
|
-
* trigger={
|
|
662
|
-
* <button aria-label={`Actions for ${user.name}`}>
|
|
663
|
-
* <MoreHorizontal />
|
|
664
|
-
* </button>
|
|
665
|
-
* }
|
|
666
|
-
* items={[
|
|
667
|
-
* { label: 'View Profile', onClick: () => viewProfile(user.id) },
|
|
668
|
-
* { label: 'Send Message', onClick: () => sendMessage(user.id) }
|
|
669
|
-
* ]}
|
|
670
|
-
* />
|
|
671
|
-
*
|
|
672
|
-
* // Dropdown with keyboard-friendly trigger
|
|
673
|
-
* <DropdownGlass
|
|
674
|
-
* trigger={
|
|
675
|
-
* <ButtonGlass
|
|
676
|
-
* icon={Settings}
|
|
677
|
-
* variant="ghost"
|
|
678
|
-
* aria-haspopup="menu"
|
|
679
|
-
* aria-label="Settings menu"
|
|
680
|
-
* >
|
|
681
|
-
* Settings
|
|
682
|
-
* </ButtonGlass>
|
|
683
|
-
* }
|
|
684
|
-
* items={[
|
|
685
|
-
* { label: 'Preferences', icon: Sliders, onClick: () => navigate('/settings/preferences') },
|
|
686
|
-
* { label: 'Security', icon: Lock, onClick: () => navigate('/settings/security') },
|
|
687
|
-
* { divider: true },
|
|
688
|
-
* { label: 'Log Out', icon: LogOut, onClick: handleLogout }
|
|
689
|
-
* ]}
|
|
690
|
-
* />
|
|
691
|
-
*
|
|
692
|
-
* // Advanced: Using Radix primitives directly (see component JSDoc for examples)
|
|
693
|
-
* ```
|
|
507
|
+
* - **Keyboard Navigation:** Arrow keys navigate, Enter/Space activates, Escape closes
|
|
508
|
+
* - **Focus Management:** Focus trapped within menu when open
|
|
509
|
+
* - **Screen Readers:** Uses role="menu" and role="menuitem"
|
|
510
|
+
* - **Touch Targets:** All items meet minimum 44x44px
|
|
694
511
|
*/
|
|
695
512
|
declare interface DropdownGlassProps {
|
|
513
|
+
/** Trigger element (button, etc.) */
|
|
696
514
|
readonly trigger: React_2.ReactNode;
|
|
515
|
+
/** Menu items array */
|
|
697
516
|
readonly items: readonly DropdownItem[];
|
|
517
|
+
/** Dropdown alignment */
|
|
698
518
|
readonly align?: 'left' | 'right';
|
|
519
|
+
/** Additional className */
|
|
699
520
|
readonly className?: string;
|
|
700
521
|
}
|
|
701
522
|
|
|
@@ -1144,6 +965,19 @@ declare interface LanguageBarGlassProps extends React.HTMLAttributes<HTMLDivElem
|
|
|
1144
965
|
declare interface LanguageData {
|
|
1145
966
|
readonly name: string;
|
|
1146
967
|
readonly percent: number;
|
|
968
|
+
/**
|
|
969
|
+
* Custom color for the language segment.
|
|
970
|
+
* Accepts any valid CSS color value:
|
|
971
|
+
* - OKLCH (recommended): `oklch(66.6% 0.159 303)`
|
|
972
|
+
* - Hex: `#3b82f6`
|
|
973
|
+
* - RGB: `rgb(59, 130, 246)`
|
|
974
|
+
* - HSL: `hsl(221, 83%, 53%)`
|
|
975
|
+
*
|
|
976
|
+
* **Note:** CSS variables like `var(--oklch-blue-500)` may not work if they're
|
|
977
|
+
* tree-shaken out in production builds. Use direct color values instead.
|
|
978
|
+
*
|
|
979
|
+
* If not provided, falls back to default language colors defined in `defaultLangColors`.
|
|
980
|
+
*/
|
|
1147
981
|
readonly color?: string;
|
|
1148
982
|
}
|
|
1149
983
|
|
|
@@ -1479,41 +1313,34 @@ declare type OwnershipFilter = 'your' | 'contrib' | 'all';
|
|
|
1479
1313
|
|
|
1480
1314
|
declare type PaddingType = 'none' | 'compact' | 'default' | 'featured';
|
|
1481
1315
|
|
|
1482
|
-
export declare const PopoverGlass: React_2.
|
|
1483
|
-
|
|
1484
|
-
declare interface PopoverGlassProps {
|
|
1485
|
-
/** The trigger element that opens the popover */
|
|
1486
|
-
readonly trigger: React_2.ReactNode;
|
|
1487
|
-
/** The content to display inside the popover */
|
|
1488
|
-
readonly children: React_2.ReactNode;
|
|
1489
|
-
/** The preferred side of the trigger to render against */
|
|
1490
|
-
readonly side?: 'top' | 'right' | 'bottom' | 'left';
|
|
1491
|
-
/** The preferred alignment against the trigger */
|
|
1492
|
-
readonly align?: 'start' | 'center' | 'end';
|
|
1493
|
-
/** The distance in pixels from the trigger */
|
|
1494
|
-
readonly sideOffset?: number;
|
|
1495
|
-
/** Controlled open state */
|
|
1496
|
-
readonly open?: boolean;
|
|
1497
|
-
/** Callback when open state changes */
|
|
1498
|
-
readonly onOpenChange?: (open: boolean) => void;
|
|
1499
|
-
/** Whether to show the arrow pointer */
|
|
1500
|
-
readonly showArrow?: boolean;
|
|
1501
|
-
/** Additional class name for the content wrapper */
|
|
1502
|
-
readonly className?: string;
|
|
1503
|
-
}
|
|
1316
|
+
export declare const PopoverGlass: React_2.FC<PopoverPrimitive.PopoverProps>;
|
|
1504
1317
|
|
|
1318
|
+
/**
|
|
1319
|
+
* ProfileAvatarGlass - Large profile avatar with bold styling
|
|
1320
|
+
*
|
|
1321
|
+
* Built on top of the same CSS variables as AvatarGlass but with
|
|
1322
|
+
* profile-specific sizing and bold font weight.
|
|
1323
|
+
*
|
|
1324
|
+
* @example
|
|
1325
|
+
* ```tsx
|
|
1326
|
+
* <ProfileAvatarGlass initials="JD" size="lg" glowing />
|
|
1327
|
+
* <ProfileAvatarGlass initials="AS" status="online" />
|
|
1328
|
+
* ```
|
|
1329
|
+
*/
|
|
1505
1330
|
export declare const ProfileAvatarGlass: ForwardRefExoticComponent<ProfileAvatarGlassProps & RefAttributes<HTMLDivElement>>;
|
|
1506
1331
|
|
|
1507
1332
|
declare interface ProfileAvatarGlassProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
1333
|
+
/** User initials to display */
|
|
1508
1334
|
readonly initials: string;
|
|
1335
|
+
/** Size variant (profile-specific sizing - larger than AvatarGlass) */
|
|
1509
1336
|
readonly size?: ProfileAvatarSize;
|
|
1510
|
-
|
|
1337
|
+
/** Optional status indicator */
|
|
1338
|
+
readonly status?: AvatarStatus;
|
|
1339
|
+
/** Enable pulsing glow animation */
|
|
1511
1340
|
readonly glowing?: boolean;
|
|
1512
1341
|
}
|
|
1513
1342
|
|
|
1514
|
-
declare type ProfileAvatarSize =
|
|
1515
|
-
|
|
1516
|
-
declare type ProfileAvatarStatus = "online" | "offline" | "busy" | "away";
|
|
1343
|
+
declare type ProfileAvatarSize = 'sm' | 'md' | 'lg' | 'xl';
|
|
1517
1344
|
|
|
1518
1345
|
export declare const ProfileHeaderGlass: ForwardRefExoticComponent<ProfileHeaderGlassProps & RefAttributes<HTMLDivElement>>;
|
|
1519
1346
|
|
|
@@ -1581,7 +1408,7 @@ declare interface RainbowProgressGlassProps extends React.HTMLAttributes<HTMLDiv
|
|
|
1581
1408
|
readonly showGlow?: boolean;
|
|
1582
1409
|
}
|
|
1583
1410
|
|
|
1584
|
-
declare type RainbowProgressSize =
|
|
1411
|
+
declare type RainbowProgressSize = 'sm' | 'md' | 'lg' | 'xl';
|
|
1585
1412
|
|
|
1586
1413
|
declare interface Repository {
|
|
1587
1414
|
readonly name: string;
|
|
@@ -1699,9 +1526,9 @@ declare interface SliderGlassProps extends Omit<React.InputHTMLAttributes<HTMLIn
|
|
|
1699
1526
|
readonly success?: string;
|
|
1700
1527
|
}
|
|
1701
1528
|
|
|
1702
|
-
export declare const SortDropdownGlass: ForwardRefExoticComponent<SortDropdownGlassProps & RefAttributes<HTMLDivElement>>;
|
|
1529
|
+
export declare const SortDropdownGlass: React_2.ForwardRefExoticComponent<SortDropdownGlassProps & React_2.RefAttributes<HTMLDivElement>>;
|
|
1703
1530
|
|
|
1704
|
-
declare interface SortDropdownGlassProps extends Omit<
|
|
1531
|
+
declare interface SortDropdownGlassProps extends Omit<React_2.HTMLAttributes<HTMLDivElement>, 'onChange'> {
|
|
1705
1532
|
/** Current sort field */
|
|
1706
1533
|
readonly sortBy: SortField;
|
|
1707
1534
|
/** Current sort order */
|
|
@@ -1919,93 +1746,7 @@ declare const toggleSizes: (props?: ({
|
|
|
1919
1746
|
size?: "sm" | "md" | "lg" | null | undefined;
|
|
1920
1747
|
} & ClassProp) | undefined) => string;
|
|
1921
1748
|
|
|
1922
|
-
export declare const TooltipGlass:
|
|
1923
|
-
|
|
1924
|
-
/**
|
|
1925
|
-
* Props for the TooltipGlass component
|
|
1926
|
-
*
|
|
1927
|
-
* A glass-themed tooltip with configurable positioning and unified dark design.
|
|
1928
|
-
* Features smooth animations and WCAG-compliant accessibility attributes.
|
|
1929
|
-
*
|
|
1930
|
-
* @accessibility
|
|
1931
|
-
* - **Keyboard Navigation:** Tooltip appears on focus for keyboard users (same as hover)
|
|
1932
|
-
* - **Focus Management:** Tooltip does not trap focus, allows normal navigation flow
|
|
1933
|
-
* - **Screen Readers:** Uses `aria-describedby` to associate tooltip with trigger element (WCAG 4.1.3)
|
|
1934
|
-
* - **ARIA Attributes:** Tooltip marked with `role="tooltip"` and unique ID for proper association
|
|
1935
|
-
* - **Dismissible:** Tooltip dismisses on mouse leave, focus blur, or Escape key
|
|
1936
|
-
* - **Touch Targets:** N/A - tooltips appear on hover/focus, do not require direct interaction
|
|
1937
|
-
* - **Color Contrast:** Tooltip text meets WCAG AA contrast ratio 4.5:1 against dark background
|
|
1938
|
-
* - **Motion:** Fade-in animation respects `prefers-reduced-motion` settings
|
|
1939
|
-
*
|
|
1940
|
-
* @example
|
|
1941
|
-
* ```tsx
|
|
1942
|
-
* // Basic tooltip
|
|
1943
|
-
* <TooltipGlass content="Click to edit">
|
|
1944
|
-
* <button><Edit className="w-4 h-4" /></button>
|
|
1945
|
-
* </TooltipGlass>
|
|
1946
|
-
*
|
|
1947
|
-
* // Different positions
|
|
1948
|
-
* <TooltipGlass content="Top tooltip" position="top">
|
|
1949
|
-
* <ButtonGlass>Hover me</ButtonGlass>
|
|
1950
|
-
* </TooltipGlass>
|
|
1951
|
-
* <TooltipGlass content="Bottom tooltip" position="bottom">
|
|
1952
|
-
* <ButtonGlass>Hover me</ButtonGlass>
|
|
1953
|
-
* </TooltipGlass>
|
|
1954
|
-
* <TooltipGlass content="Left tooltip" position="left">
|
|
1955
|
-
* <ButtonGlass>Hover me</ButtonGlass>
|
|
1956
|
-
* </TooltipGlass>
|
|
1957
|
-
* <TooltipGlass content="Right tooltip" position="right">
|
|
1958
|
-
* <ButtonGlass>Hover me</ButtonGlass>
|
|
1959
|
-
* </TooltipGlass>
|
|
1960
|
-
*
|
|
1961
|
-
* // Icon button with accessible tooltip (provides label)
|
|
1962
|
-
* <TooltipGlass content="Delete item">
|
|
1963
|
-
* <ButtonGlass
|
|
1964
|
-
* icon={Trash}
|
|
1965
|
-
* size="icon"
|
|
1966
|
-
* variant="ghost"
|
|
1967
|
-
* aria-label="Delete item"
|
|
1968
|
-
* />
|
|
1969
|
-
* </TooltipGlass>
|
|
1970
|
-
*
|
|
1971
|
-
* // Informational tooltip on text
|
|
1972
|
-
* <TooltipGlass content="This feature requires a Pro subscription">
|
|
1973
|
-
* <span className="underline decoration-dotted">Pro Feature</span>
|
|
1974
|
-
* </TooltipGlass>
|
|
1975
|
-
*
|
|
1976
|
-
* // Badge with tooltip for additional context
|
|
1977
|
-
* <TooltipGlass content="Last updated 2 hours ago" position="top">
|
|
1978
|
-
* <BadgeGlass variant="success" dot>
|
|
1979
|
-
* Active
|
|
1980
|
-
* </BadgeGlass>
|
|
1981
|
-
* </TooltipGlass>
|
|
1982
|
-
*
|
|
1983
|
-
* // Disabled button with explanation tooltip
|
|
1984
|
-
* <TooltipGlass content="Save your changes first to enable this action">
|
|
1985
|
-
* <span>
|
|
1986
|
-
* <ButtonGlass disabled aria-describedby="tooltip-id">
|
|
1987
|
-
* Export
|
|
1988
|
-
* </ButtonGlass>
|
|
1989
|
-
* </span>
|
|
1990
|
-
* </TooltipGlass>
|
|
1991
|
-
* ```
|
|
1992
|
-
*/
|
|
1993
|
-
declare interface TooltipGlassProps extends VariantProps<typeof tooltipPositions> {
|
|
1994
|
-
readonly children: ReactNode;
|
|
1995
|
-
readonly content: string;
|
|
1996
|
-
readonly position?: TooltipPosition;
|
|
1997
|
-
readonly className?: string;
|
|
1998
|
-
}
|
|
1999
|
-
|
|
2000
|
-
/**
|
|
2001
|
-
* TooltipGlass CVA Variants
|
|
2002
|
-
* Extracted for Fast Refresh compatibility
|
|
2003
|
-
*/
|
|
2004
|
-
declare type TooltipPosition = 'top' | 'bottom' | 'left' | 'right';
|
|
2005
|
-
|
|
2006
|
-
declare const tooltipPositions: (props?: ({
|
|
2007
|
-
position?: "bottom" | "left" | "right" | "top" | null | undefined;
|
|
2008
|
-
} & ClassProp) | undefined) => string;
|
|
1749
|
+
export declare const TooltipGlass: React_2.FC<TooltipPrimitive.TooltipProps>;
|
|
2009
1750
|
|
|
2010
1751
|
/**
|
|
2011
1752
|
* TouchTarget wrapper component
|
package/dist/components.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { $ as BaseProgressGlass, At as
|
|
1
|
+
import { $ as BaseProgressGlass, At as GlassCard, Dt as ModalGlass, G as SegmentedControlGlass, Jt as ComboBoxGlass, K as RainbowProgressGlass, Mt as DropdownGlass, Q as StatusIndicatorGlass, Qt as ButtonGlass, Tt as NotificationGlass, X as LanguageBarGlass, Xt as CircularProgressGlass, Y as ProfileAvatarGlass, Z as FlagAlertGlass, Zt as CheckboxGlass, _ as ContributionMetricsGlass, _t as SliderGlass, a as HeaderBrandingGlass, b as AICardGlass, bt as PopoverGlass, c as YearCardGlass, cn as AlertGlass, ct as ExpandableHeaderGlass, d as TrustScoreDisplayGlass, dn as InteractiveCard, en as BadgeGlass, et as ThemeToggleGlass, f as RepositoryMetadataGlass, fn as FormFieldWrapper, g as MetricCardGlass, gt as TabsGlass, h as MetricsGridGlass, i as HeaderNavGlass, kt as InputGlass, l as UserStatsLineGlass, lt as TooltipGlass, m as RepositoryCardGlass, mt as ToggleGlass, n as ProjectsListGlass, nn as AvatarGlass, nt as SortDropdownGlass, o as FlagsSectionGlass, p as RepositoryHeaderGlass, pn as TouchTarget, q as ProgressGlass, r as ProfileHeaderGlass, rt as SearchBoxGlass, s as CareerStatsGlass, st as IconButtonGlass, t as TrustScoreCardGlass, tt as StatItemGlass, u as UserInfoGlass, v as CircularMetricGlass, vt as SkeletonGlass, y as CareerStatsHeaderGlass } from "./trust-score-card-glass-A7kas5OS.js";
|
|
2
2
|
import "./utils-CcyeqpKQ.js";
|
|
3
3
|
import "./use-focus-CX0TJJIj.js";
|
|
4
|
-
import "./theme-context-
|
|
4
|
+
import "./theme-context-_T5r1KG4.js";
|
|
5
5
|
export { AICardGlass, AlertGlass, AvatarGlass, BadgeGlass, BaseProgressGlass, ButtonGlass, CareerStatsGlass, CareerStatsHeaderGlass, CheckboxGlass, CircularMetricGlass, CircularProgressGlass, ComboBoxGlass, ContributionMetricsGlass, DropdownGlass, ExpandableHeaderGlass, FlagAlertGlass, FlagsSectionGlass, FormFieldWrapper, GlassCard, HeaderBrandingGlass, HeaderNavGlass, IconButtonGlass, InputGlass, InteractiveCard, LanguageBarGlass, MetricCardGlass, MetricsGridGlass, ModalGlass, NotificationGlass, PopoverGlass, ProfileAvatarGlass, ProfileHeaderGlass, ProgressGlass, ProjectsListGlass, RainbowProgressGlass, RepositoryCardGlass, RepositoryHeaderGlass, RepositoryMetadataGlass, SearchBoxGlass, SegmentedControlGlass, SkeletonGlass, SliderGlass, SortDropdownGlass, StatItemGlass, StatusIndicatorGlass, TabsGlass, ThemeToggleGlass, ToggleGlass, TooltipGlass, TouchTarget, TrustScoreCardGlass, TrustScoreDisplayGlass, UserInfoGlass, UserStatsLineGlass, YearCardGlass };
|
package/dist/hooks.cjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
const require_use_focus = require("./use-focus-
|
|
2
|
-
const require_use_wallpaper_tint = require("./use-wallpaper-tint-
|
|
1
|
+
const require_use_focus = require("./use-focus-BRkQtQCj.cjs");
|
|
2
|
+
const require_use_wallpaper_tint = require("./use-wallpaper-tint-CfShPBo2.cjs");
|
|
3
3
|
exports.useFocus = require_use_focus.useFocus;
|
|
4
4
|
exports.useHover = require_use_focus.useHover;
|
|
5
5
|
exports.useResponsive = require_use_wallpaper_tint.useResponsive;
|
package/dist/index.cjs
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
const require_trust_score_card_glass = require("./trust-score-card-glass-
|
|
2
|
-
const require_utils = require("./utils-
|
|
3
|
-
const require_use_focus = require("./use-focus-
|
|
4
|
-
const require_theme_context = require("./theme-context-
|
|
5
|
-
const require_use_wallpaper_tint = require("./use-wallpaper-tint-
|
|
1
|
+
const require_trust_score_card_glass = require("./trust-score-card-glass-Dgu46oWI.cjs");
|
|
2
|
+
const require_utils = require("./utils-BXN7AcRu.cjs");
|
|
3
|
+
const require_use_focus = require("./use-focus-BRkQtQCj.cjs");
|
|
4
|
+
const require_theme_context = require("./theme-context-DNe_2vWJ.cjs");
|
|
5
|
+
const require_use_wallpaper_tint = require("./use-wallpaper-tint-CfShPBo2.cjs");
|
|
6
6
|
let react = require("react");
|
|
7
7
|
react = require_trust_score_card_glass.__toESM(react);
|
|
8
8
|
let lucide_react = require("lucide-react");
|
|
@@ -852,6 +852,15 @@ const dropdownAlign = (0, class_variance_authority.cva)("absolute mt-2 min-w-[16
|
|
|
852
852
|
} },
|
|
853
853
|
defaultVariants: { align: "left" }
|
|
854
854
|
});
|
|
855
|
+
const tooltipPositions = (0, class_variance_authority.cva)("absolute z-50 px-2 py-1 md:px-3 md:py-1.5 rounded-lg text-[10px] md:text-xs font-medium whitespace-nowrap transition-opacity duration-200", {
|
|
856
|
+
variants: { position: {
|
|
857
|
+
top: "bottom-full left-1/2 -translate-x-1/2 mb-2",
|
|
858
|
+
bottom: "top-full left-1/2 -translate-x-1/2 mt-2",
|
|
859
|
+
left: "right-full top-1/2 -translate-y-1/2 mr-2",
|
|
860
|
+
right: "left-full top-1/2 -translate-y-1/2 ml-2"
|
|
861
|
+
} },
|
|
862
|
+
defaultVariants: { position: "top" }
|
|
863
|
+
});
|
|
855
864
|
const alertVariants$1 = (0, class_variance_authority.cva)("relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current", {
|
|
856
865
|
variants: { variant: {
|
|
857
866
|
default: "bg-card text-card-foreground",
|
|
@@ -894,7 +903,12 @@ const buttonVariants = (0, class_variance_authority.cva)("inline-flex items-cent
|
|
|
894
903
|
});
|
|
895
904
|
exports.AICardGlass = require_trust_score_card_glass.AICardGlass;
|
|
896
905
|
exports.AlertGlass = require_trust_score_card_glass.AlertGlass;
|
|
906
|
+
exports.AlertGlassDescription = require_trust_score_card_glass.AlertGlassDescription;
|
|
907
|
+
exports.AlertGlassTitle = require_trust_score_card_glass.AlertGlassTitle;
|
|
897
908
|
exports.AvatarGlass = require_trust_score_card_glass.AvatarGlass;
|
|
909
|
+
exports.AvatarGlassFallback = require_trust_score_card_glass.AvatarGlassFallback;
|
|
910
|
+
exports.AvatarGlassImage = require_trust_score_card_glass.AvatarGlassImage;
|
|
911
|
+
exports.AvatarGlassSimple = require_trust_score_card_glass.AvatarGlassSimple;
|
|
898
912
|
exports.BadgeGlass = require_trust_score_card_glass.BadgeGlass;
|
|
899
913
|
exports.Bar = require_trust_score_card_glass.Bar;
|
|
900
914
|
exports.BarChart = require_trust_score_card_glass.BarChart;
|
|
@@ -915,6 +929,21 @@ exports.CircularProgressGlass = require_trust_score_card_glass.CircularProgressG
|
|
|
915
929
|
exports.ComboBoxGlass = require_trust_score_card_glass.ComboBoxGlass;
|
|
916
930
|
exports.ContributionMetricsGlass = require_trust_score_card_glass.ContributionMetricsGlass;
|
|
917
931
|
exports.DropdownGlass = require_trust_score_card_glass.DropdownGlass;
|
|
932
|
+
exports.DropdownMenuGlass = require_trust_score_card_glass.DropdownMenuGlass;
|
|
933
|
+
exports.DropdownMenuGlassCheckboxItem = require_trust_score_card_glass.DropdownMenuGlassCheckboxItem;
|
|
934
|
+
exports.DropdownMenuGlassContent = require_trust_score_card_glass.DropdownMenuGlassContent;
|
|
935
|
+
exports.DropdownMenuGlassGroup = require_trust_score_card_glass.DropdownMenuGlassGroup;
|
|
936
|
+
exports.DropdownMenuGlassItem = require_trust_score_card_glass.DropdownMenuGlassItem;
|
|
937
|
+
exports.DropdownMenuGlassLabel = require_trust_score_card_glass.DropdownMenuGlassLabel;
|
|
938
|
+
exports.DropdownMenuGlassPortal = require_trust_score_card_glass.DropdownMenuGlassPortal;
|
|
939
|
+
exports.DropdownMenuGlassRadioGroup = require_trust_score_card_glass.DropdownMenuGlassRadioGroup;
|
|
940
|
+
exports.DropdownMenuGlassRadioItem = require_trust_score_card_glass.DropdownMenuGlassRadioItem;
|
|
941
|
+
exports.DropdownMenuGlassSeparator = require_trust_score_card_glass.DropdownMenuGlassSeparator;
|
|
942
|
+
exports.DropdownMenuGlassShortcut = require_trust_score_card_glass.DropdownMenuGlassShortcut;
|
|
943
|
+
exports.DropdownMenuGlassSub = require_trust_score_card_glass.DropdownMenuGlassSub;
|
|
944
|
+
exports.DropdownMenuGlassSubContent = require_trust_score_card_glass.DropdownMenuGlassSubContent;
|
|
945
|
+
exports.DropdownMenuGlassSubTrigger = require_trust_score_card_glass.DropdownMenuGlassSubTrigger;
|
|
946
|
+
exports.DropdownMenuGlassTrigger = require_trust_score_card_glass.DropdownMenuGlassTrigger;
|
|
918
947
|
exports.ExpandableHeaderGlass = require_trust_score_card_glass.ExpandableHeaderGlass;
|
|
919
948
|
exports.FlagAlertGlass = require_trust_score_card_glass.FlagAlertGlass;
|
|
920
949
|
exports.FlagsSectionGlass = require_trust_score_card_glass.FlagsSectionGlass;
|
|
@@ -932,6 +961,10 @@ exports.MetricsGridGlass = require_trust_score_card_glass.MetricsGridGlass;
|
|
|
932
961
|
exports.ModalGlass = require_trust_score_card_glass.ModalGlass;
|
|
933
962
|
exports.NotificationGlass = require_trust_score_card_glass.NotificationGlass;
|
|
934
963
|
exports.PopoverGlass = require_trust_score_card_glass.PopoverGlass;
|
|
964
|
+
exports.PopoverGlassAnchor = require_trust_score_card_glass.PopoverGlassAnchor;
|
|
965
|
+
exports.PopoverGlassContent = require_trust_score_card_glass.PopoverGlassContent;
|
|
966
|
+
exports.PopoverGlassLegacy = require_trust_score_card_glass.PopoverGlassLegacy;
|
|
967
|
+
exports.PopoverGlassTrigger = require_trust_score_card_glass.PopoverGlassTrigger;
|
|
935
968
|
exports.ProfileAvatarGlass = require_trust_score_card_glass.ProfileAvatarGlass;
|
|
936
969
|
exports.ProfileHeaderGlass = require_trust_score_card_glass.ProfileHeaderGlass;
|
|
937
970
|
exports.ProgressGlass = require_trust_score_card_glass.ProgressGlass;
|
|
@@ -957,6 +990,10 @@ exports.ThemeProvider = require_theme_context.ThemeProvider;
|
|
|
957
990
|
exports.ThemeToggleGlass = require_trust_score_card_glass.ThemeToggleGlass;
|
|
958
991
|
exports.ToggleGlass = require_trust_score_card_glass.ToggleGlass;
|
|
959
992
|
exports.TooltipGlass = require_trust_score_card_glass.TooltipGlass;
|
|
993
|
+
exports.TooltipGlassContent = require_trust_score_card_glass.TooltipGlassContent;
|
|
994
|
+
exports.TooltipGlassProvider = require_trust_score_card_glass.TooltipGlassProvider;
|
|
995
|
+
exports.TooltipGlassSimple = require_trust_score_card_glass.TooltipGlassSimple;
|
|
996
|
+
exports.TooltipGlassTrigger = require_trust_score_card_glass.TooltipGlassTrigger;
|
|
960
997
|
exports.TouchTarget = require_trust_score_card_glass.TouchTarget;
|
|
961
998
|
exports.TrustScoreCardGlass = require_trust_score_card_glass.TrustScoreCardGlass;
|
|
962
999
|
exports.TrustScoreDisplayGlass = require_trust_score_card_glass.TrustScoreDisplayGlass;
|
|
@@ -994,7 +1031,7 @@ exports.stepperListVariants = stepperListVariants;
|
|
|
994
1031
|
exports.stepperRootVariants = stepperRootVariants;
|
|
995
1032
|
exports.stepperStepContainerVariants = stepperStepContainerVariants;
|
|
996
1033
|
exports.toggleSizes = require_trust_score_card_glass.toggleSizes;
|
|
997
|
-
exports.tooltipPositions =
|
|
1034
|
+
exports.tooltipPositions = tooltipPositions;
|
|
998
1035
|
exports.useChart = useChart;
|
|
999
1036
|
exports.useFocus = require_use_focus.useFocus;
|
|
1000
1037
|
exports.useHover = require_use_focus.useHover;
|