shadcn-glass-ui 2.0.8 → 2.0.10

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.
Files changed (64) hide show
  1. package/README.md +153 -109
  2. package/dist/cli/index.cjs +1 -1
  3. package/dist/components.cjs +4 -4
  4. package/dist/components.d.ts +63 -322
  5. package/dist/components.js +2 -2
  6. package/dist/hooks.cjs +2 -2
  7. package/dist/index.cjs +43 -6
  8. package/dist/index.cjs.map +1 -1
  9. package/dist/index.js +12 -3
  10. package/dist/index.js.map +1 -1
  11. package/dist/r/alert-glass.json +2 -1
  12. package/dist/r/avatar-glass.json +2 -3
  13. package/dist/r/button-glass.json +1 -1
  14. package/dist/r/circular-progress-glass.json +1 -1
  15. package/dist/r/combobox-glass.json +1 -1
  16. package/dist/r/dropdown-glass.json +3 -5
  17. package/dist/r/dropdown-menu-glass.json +42 -0
  18. package/dist/r/language-bar-glass.json +2 -2
  19. package/dist/r/popover-glass.json +1 -1
  20. package/dist/r/profile-avatar-glass.json +5 -3
  21. package/dist/r/rainbow-progress-glass.json +1 -1
  22. package/dist/r/registry.json +10 -4
  23. package/dist/r/sort-dropdown-glass.json +3 -4
  24. package/dist/r/tooltip-glass.json +3 -5
  25. package/dist/r/trust-score-card-glass.json +1 -1
  26. package/dist/r/trust-score-display-glass.json +1 -1
  27. package/dist/shadcn-glass-ui.css +1 -1
  28. package/dist/{theme-context-CVW50BKW.cjs → theme-context-DNe_2vWJ.cjs} +2 -2
  29. package/dist/theme-context-DNe_2vWJ.cjs.map +1 -0
  30. package/dist/{theme-context-BZoCplcU.js → theme-context-_T5r1KG4.js} +1 -1
  31. package/dist/theme-context-_T5r1KG4.js.map +1 -0
  32. package/dist/themes.cjs +1 -1
  33. package/dist/themes.d.ts +89 -1
  34. package/dist/themes.js +1 -1
  35. package/dist/{trust-score-card-glass-BcZbul0P.js → trust-score-card-glass-A7kas5OS.js} +353 -279
  36. package/dist/trust-score-card-glass-A7kas5OS.js.map +1 -0
  37. package/dist/{trust-score-card-glass-r3qM09Jp.cjs → trust-score-card-glass-Dgu46oWI.cjs} +551 -313
  38. package/dist/trust-score-card-glass-Dgu46oWI.cjs.map +1 -0
  39. package/dist/{use-focus-ZE8ozmZE.cjs → use-focus-BRkQtQCj.cjs} +2 -2
  40. package/dist/{use-focus-ZE8ozmZE.cjs.map → use-focus-BRkQtQCj.cjs.map} +1 -1
  41. package/dist/{use-wallpaper-tint-BuS80tbN.cjs → use-wallpaper-tint-CfShPBo2.cjs} +2 -2
  42. package/dist/{use-wallpaper-tint-BuS80tbN.cjs.map → use-wallpaper-tint-CfShPBo2.cjs.map} +1 -1
  43. package/dist/{utils-DLXayspX.cjs → utils-BXN7AcRu.cjs} +2 -2
  44. package/dist/{utils-DLXayspX.cjs.map → utils-BXN7AcRu.cjs.map} +1 -1
  45. package/dist/utils.cjs +1 -1
  46. package/docs/AI_USAGE.md +1 -32
  47. package/docs/API_PATTERNS_COMPARISON.md +10 -9
  48. package/docs/COMPONENTS_CATALOG.md +140 -45
  49. package/docs/DROPDOWN_ARCHITECTURE.md +290 -0
  50. package/docs/GETTING_STARTED.md +6 -5
  51. package/docs/TOKEN_ARCHITECTURE.md +100 -0
  52. package/docs/api/README.md +3 -3
  53. package/docs/migration/compound-components-v2.md +384 -0
  54. package/docs/visual-testing-guide.md +50 -12
  55. package/package.json +2 -2
  56. package/dist/theme-context-BZoCplcU.js.map +0 -1
  57. package/dist/theme-context-CVW50BKW.cjs.map +0 -1
  58. package/dist/trust-score-card-glass-BcZbul0P.js.map +0 -1
  59. package/dist/trust-score-card-glass-r3qM09Jp.cjs.map +0 -1
  60. package/docs/ADVANCED_PATTERNS.md +0 -408
  61. package/docs/BREAKING_CHANGES.md +0 -213
  62. package/docs/announcements/v1.0.5-devto.md +0 -363
  63. package/docs/announcements/v1.0.5-reddit.md +0 -115
  64. package/docs/announcements/v1.0.5-twitter.md +0 -70
@@ -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
- * Props for the AlertGlass component
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<AvatarGlassProps & RefAttributes<HTMLDivElement>>;
37
+ export declare const AvatarGlass: React_2.ForwardRefExoticComponent<AvatarGlassRootProps & React_2.RefAttributes<HTMLSpanElement>>;
102
38
 
103
- /**
104
- * Props for the AvatarGlass component
105
- *
106
- * A glass-themed avatar component with status indicators and size variants.
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 const avatarSizes: (props?: ({
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 menu items, Enter/Space activates, Escape closes (WCAG 2.1.1)
622
- * - **Focus Management:** Focus trapped within menu when open, returned to trigger on close (WCAG 2.4.3)
623
- * - **Screen Readers:** Uses `role="menu"` and `role="menuitem"` for proper menu semantics (WCAG 4.1.3)
624
- * - **ARIA Attributes:** Items marked with `data-highlighted` state for screen reader announcement
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.ForwardRefExoticComponent<PopoverGlassProps & React_2.RefAttributes<HTMLDivElement>>;
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
- readonly status?: ProfileAvatarStatus;
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 = "sm" | "md" | "lg" | "xl";
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 = "sm" | "md" | "lg" | "xl";
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<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
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: ForwardRefExoticComponent<TooltipGlassProps & RefAttributes<HTMLDivElement>>;
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
@@ -1,5 +1,5 @@
1
- import { $ as BaseProgressGlass, At as ButtonGlass, Bt as TouchTarget, Ct as GlassCard, Et as ComboBoxGlass, G as SegmentedControlGlass, K as RainbowProgressGlass, Lt as AlertGlass, Mt as BadgeGlass, Ot as CircularProgressGlass, Pt as AvatarGlass, Q as StatusIndicatorGlass, Rt as InteractiveCard, St as InputGlass, Tt as DropdownGlass, X as LanguageBarGlass, Y as ProfileAvatarGlass, Z as FlagAlertGlass, _ as ContributionMetricsGlass, _t as PopoverGlass, a as HeaderBrandingGlass, b as AICardGlass, bt as ModalGlass, c as YearCardGlass, ct as ExpandableHeaderGlass, d as TrustScoreDisplayGlass, dt as ToggleGlass, et as ThemeToggleGlass, f as RepositoryMetadataGlass, g as MetricCardGlass, h as MetricsGridGlass, ht as SkeletonGlass, i as HeaderNavGlass, kt as CheckboxGlass, l as UserStatsLineGlass, lt as TooltipGlass, m as RepositoryCardGlass, mt as SliderGlass, n as ProjectsListGlass, nt as SortDropdownGlass, o as FlagsSectionGlass, p as RepositoryHeaderGlass, pt as TabsGlass, 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 NotificationGlass, y as CareerStatsHeaderGlass, zt as FormFieldWrapper } from "./trust-score-card-glass-BcZbul0P.js";
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-BZoCplcU.js";
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-ZE8ozmZE.cjs");
2
- const require_use_wallpaper_tint = require("./use-wallpaper-tint-BuS80tbN.cjs");
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-r3qM09Jp.cjs");
2
- const require_utils = require("./utils-DLXayspX.cjs");
3
- const require_use_focus = require("./use-focus-ZE8ozmZE.cjs");
4
- const require_theme_context = require("./theme-context-CVW50BKW.cjs");
5
- const require_use_wallpaper_tint = require("./use-wallpaper-tint-BuS80tbN.cjs");
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 = require_trust_score_card_glass.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;