shadcn-glass-ui 1.0.11 → 2.0.1
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 +213 -0
- package/README.md +174 -17
- 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 +1 -1
- package/dist/r/avatar-glass.json +1 -1
- package/dist/r/circular-metric-glass.json +1 -1
- package/dist/r/circular-progress-glass.json +1 -1
- package/dist/r/combobox-glass.json +1 -1
- package/dist/r/flag-alert-glass.json +1 -1
- package/dist/r/flags-section-glass.json +1 -1
- package/dist/r/insight-card-glass.json +26 -0
- package/dist/r/interactive-card.json +1 -1
- package/dist/r/language-bar-glass.json +1 -1
- package/dist/r/metric-card-glass.json +3 -2
- package/dist/r/metrics-grid-glass.json +1 -1
- package/dist/r/modal-glass.json +1 -1
- package/dist/r/progress-glass.json +1 -1
- package/dist/r/registry.json +19 -1
- package/dist/r/segmented-control-glass.json +1 -1
- package/dist/r/sparkline-glass.json +26 -0
- package/dist/r/stepper-glass.json +41 -0
- package/dist/r/tabs-glass.json +1 -1
- package/dist/r/trust-score-card-glass.json +1 -1
- package/dist/r/year-card-glass.json +1 -1
- 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 +20 -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
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
[**shadcn-glass-ui API Reference v1.0.7**](../README.md)
|
|
2
|
+
|
|
3
|
+
***
|
|
4
|
+
|
|
5
|
+
[shadcn-glass-ui API Reference](../globals.md) / ThemeProvider
|
|
6
|
+
|
|
7
|
+
# Function: ThemeProvider()
|
|
8
|
+
|
|
9
|
+
> **ThemeProvider**(`__namedParameters`): `Element`
|
|
10
|
+
|
|
11
|
+
Defined in: [src/lib/theme-context.tsx:68](https://github.com/Yhooi2/shadcn-glass-ui-library/blob/926c43a35b985ce0dee6d96ce88a1fc3d72f4d67/src/lib/theme-context.tsx#L68)
|
|
12
|
+
|
|
13
|
+
## Parameters
|
|
14
|
+
|
|
15
|
+
### \_\_namedParameters
|
|
16
|
+
|
|
17
|
+
`ThemeProviderProps`
|
|
18
|
+
|
|
19
|
+
## Returns
|
|
20
|
+
|
|
21
|
+
`Element`
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
[**shadcn-glass-ui API Reference v1.0.7**](../README.md)
|
|
2
|
+
|
|
3
|
+
***
|
|
4
|
+
|
|
5
|
+
[shadcn-glass-ui API Reference](../globals.md) / cn
|
|
6
|
+
|
|
7
|
+
# Function: cn()
|
|
8
|
+
|
|
9
|
+
> **cn**(...`inputs`): `string`
|
|
10
|
+
|
|
11
|
+
Defined in: [src/lib/utils.ts:13](https://github.com/Yhooi2/shadcn-glass-ui-library/blob/926c43a35b985ce0dee6d96ce88a1fc3d72f4d67/src/lib/utils.ts#L13)
|
|
12
|
+
|
|
13
|
+
Combine class names with Tailwind merge support (shadcn standard)
|
|
14
|
+
|
|
15
|
+
## Parameters
|
|
16
|
+
|
|
17
|
+
### inputs
|
|
18
|
+
|
|
19
|
+
...`ClassValue`[]
|
|
20
|
+
|
|
21
|
+
Array of class values
|
|
22
|
+
|
|
23
|
+
## Returns
|
|
24
|
+
|
|
25
|
+
`string`
|
|
26
|
+
|
|
27
|
+
Merged class string
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
[**shadcn-glass-ui API Reference v1.0.7**](../README.md)
|
|
2
|
+
|
|
3
|
+
***
|
|
4
|
+
|
|
5
|
+
[shadcn-glass-ui API Reference](../globals.md) / getNextTheme
|
|
6
|
+
|
|
7
|
+
# Function: getNextTheme()
|
|
8
|
+
|
|
9
|
+
> **getNextTheme**(`current`): [`Theme`](../type-aliases/Theme.md)
|
|
10
|
+
|
|
11
|
+
Defined in: [src/lib/theme-context.tsx:140](https://github.com/Yhooi2/shadcn-glass-ui-library/blob/926c43a35b985ce0dee6d96ce88a1fc3d72f4d67/src/lib/theme-context.tsx#L140)
|
|
12
|
+
|
|
13
|
+
## Parameters
|
|
14
|
+
|
|
15
|
+
### current
|
|
16
|
+
|
|
17
|
+
[`Theme`](../type-aliases/Theme.md)
|
|
18
|
+
|
|
19
|
+
## Returns
|
|
20
|
+
|
|
21
|
+
[`Theme`](../type-aliases/Theme.md)
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
[**shadcn-glass-ui API Reference v1.0.7**](../README.md)
|
|
2
|
+
|
|
3
|
+
***
|
|
4
|
+
|
|
5
|
+
[shadcn-glass-ui API Reference](../globals.md) / getThemeConfig
|
|
6
|
+
|
|
7
|
+
# Function: getThemeConfig()
|
|
8
|
+
|
|
9
|
+
> **getThemeConfig**(`theme`): [`ThemeConfig`](../interfaces/ThemeConfig.md)
|
|
10
|
+
|
|
11
|
+
Defined in: [src/lib/theme-context.tsx:147](https://github.com/Yhooi2/shadcn-glass-ui-library/blob/926c43a35b985ce0dee6d96ce88a1fc3d72f4d67/src/lib/theme-context.tsx#L147)
|
|
12
|
+
|
|
13
|
+
## Parameters
|
|
14
|
+
|
|
15
|
+
### theme
|
|
16
|
+
|
|
17
|
+
[`Theme`](../type-aliases/Theme.md)
|
|
18
|
+
|
|
19
|
+
## Returns
|
|
20
|
+
|
|
21
|
+
[`ThemeConfig`](../interfaces/ThemeConfig.md)
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
[**shadcn-glass-ui API Reference v1.0.7**](../README.md)
|
|
2
|
+
|
|
3
|
+
***
|
|
4
|
+
|
|
5
|
+
[shadcn-glass-ui API Reference](../globals.md) / useFocus
|
|
6
|
+
|
|
7
|
+
# Function: useFocus()
|
|
8
|
+
|
|
9
|
+
> **useFocus**(`options`): `UseFocusReturn`
|
|
10
|
+
|
|
11
|
+
Defined in: [src/lib/hooks/use-focus.ts:115](https://github.com/Yhooi2/shadcn-glass-ui-library/blob/926c43a35b985ce0dee6d96ce88a1fc3d72f4d67/src/lib/hooks/use-focus.ts#L115)
|
|
12
|
+
|
|
13
|
+
Hook for managing focus state with optional focus-visible support.
|
|
14
|
+
|
|
15
|
+
## Parameters
|
|
16
|
+
|
|
17
|
+
### options
|
|
18
|
+
|
|
19
|
+
`UseFocusOptions` = `{}`
|
|
20
|
+
|
|
21
|
+
## Returns
|
|
22
|
+
|
|
23
|
+
`UseFocusReturn`
|
|
24
|
+
|
|
25
|
+
## Examples
|
|
26
|
+
|
|
27
|
+
```tsx
|
|
28
|
+
const { isFocused, focusProps } = useFocus();
|
|
29
|
+
|
|
30
|
+
return (
|
|
31
|
+
<input
|
|
32
|
+
{...focusProps}
|
|
33
|
+
style={{
|
|
34
|
+
borderColor: isFocused ? 'violet' : 'gray',
|
|
35
|
+
}}
|
|
36
|
+
/>
|
|
37
|
+
);
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
```tsx
|
|
41
|
+
const { isFocusVisible, focusProps } = useFocus({ focusVisible: true });
|
|
42
|
+
|
|
43
|
+
return (
|
|
44
|
+
<button
|
|
45
|
+
{...focusProps}
|
|
46
|
+
style={{
|
|
47
|
+
outline: isFocusVisible ? '2px solid violet' : 'none',
|
|
48
|
+
}}
|
|
49
|
+
>
|
|
50
|
+
Click or Tab to me
|
|
51
|
+
</button>
|
|
52
|
+
);
|
|
53
|
+
```
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
[**shadcn-glass-ui API Reference v1.0.7**](../README.md)
|
|
2
|
+
|
|
3
|
+
***
|
|
4
|
+
|
|
5
|
+
[shadcn-glass-ui API Reference](../globals.md) / useHover
|
|
6
|
+
|
|
7
|
+
# Function: useHover()
|
|
8
|
+
|
|
9
|
+
> **useHover**(`options`): `UseHoverReturn`
|
|
10
|
+
|
|
11
|
+
Defined in: [src/lib/hooks/use-hover.ts:74](https://github.com/Yhooi2/shadcn-glass-ui-library/blob/926c43a35b985ce0dee6d96ce88a1fc3d72f4d67/src/lib/hooks/use-hover.ts#L74)
|
|
12
|
+
|
|
13
|
+
Hook for managing hover state with optional delays and focus support.
|
|
14
|
+
|
|
15
|
+
## Parameters
|
|
16
|
+
|
|
17
|
+
### options
|
|
18
|
+
|
|
19
|
+
`UseHoverOptions` = `{}`
|
|
20
|
+
|
|
21
|
+
## Returns
|
|
22
|
+
|
|
23
|
+
`UseHoverReturn`
|
|
24
|
+
|
|
25
|
+
## Examples
|
|
26
|
+
|
|
27
|
+
```tsx
|
|
28
|
+
const { isHovered, hoverProps } = useHover();
|
|
29
|
+
|
|
30
|
+
return (
|
|
31
|
+
<div
|
|
32
|
+
{...hoverProps}
|
|
33
|
+
style={{ opacity: isHovered ? 1 : 0.8 }}
|
|
34
|
+
>
|
|
35
|
+
Hover me
|
|
36
|
+
</div>
|
|
37
|
+
);
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
```tsx
|
|
41
|
+
const { isHovered, hoverProps } = useHover({
|
|
42
|
+
enterDelay: 100,
|
|
43
|
+
leaveDelay: 200,
|
|
44
|
+
includeFocus: true,
|
|
45
|
+
onHoverChange: (hover) => console.log('Hovered:', hover),
|
|
46
|
+
});
|
|
47
|
+
```
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
[**shadcn-glass-ui API Reference v1.0.7**](../README.md)
|
|
2
|
+
|
|
3
|
+
***
|
|
4
|
+
|
|
5
|
+
[shadcn-glass-ui API Reference](../globals.md) / useResponsive
|
|
6
|
+
|
|
7
|
+
# Function: useResponsive()
|
|
8
|
+
|
|
9
|
+
> **useResponsive**(): `UseResponsiveReturn`
|
|
10
|
+
|
|
11
|
+
Defined in: [src/lib/hooks/use-responsive.ts:47](https://github.com/Yhooi2/shadcn-glass-ui-library/blob/926c43a35b985ce0dee6d96ce88a1fc3d72f4d67/src/lib/hooks/use-responsive.ts#L47)
|
|
12
|
+
|
|
13
|
+
Hook to detect current responsive breakpoint
|
|
14
|
+
|
|
15
|
+
## Returns
|
|
16
|
+
|
|
17
|
+
`UseResponsiveReturn`
|
|
18
|
+
|
|
19
|
+
Responsive state with current breakpoint and device type flags
|
|
20
|
+
|
|
21
|
+
## Example
|
|
22
|
+
|
|
23
|
+
```tsx
|
|
24
|
+
const { isMobile, isTablet, isDesktop, currentBreakpoint } = useResponsive();
|
|
25
|
+
|
|
26
|
+
return (
|
|
27
|
+
<div className={isMobile ? 'flex-col' : 'flex-row'}>
|
|
28
|
+
{currentBreakpoint === 'lg' && <Sidebar />}
|
|
29
|
+
</div>
|
|
30
|
+
);
|
|
31
|
+
```
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
[**shadcn-glass-ui API Reference v1.0.7**](../README.md)
|
|
2
|
+
|
|
3
|
+
***
|
|
4
|
+
|
|
5
|
+
[shadcn-glass-ui API Reference](../globals.md) / useTheme
|
|
6
|
+
|
|
7
|
+
# Function: useTheme()
|
|
8
|
+
|
|
9
|
+
> **useTheme**(): [`ThemeContextValue`](../interfaces/ThemeContextValue.md)
|
|
10
|
+
|
|
11
|
+
Defined in: [src/lib/theme-context.tsx:125](https://github.com/Yhooi2/shadcn-glass-ui-library/blob/926c43a35b985ce0dee6d96ce88a1fc3d72f4d67/src/lib/theme-context.tsx#L125)
|
|
12
|
+
|
|
13
|
+
## Returns
|
|
14
|
+
|
|
15
|
+
[`ThemeContextValue`](../interfaces/ThemeContextValue.md)
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
[**shadcn-glass-ui API Reference v1.0.7**](../README.md)
|
|
2
|
+
|
|
3
|
+
***
|
|
4
|
+
|
|
5
|
+
[shadcn-glass-ui API Reference](../globals.md) / useWallpaperTint
|
|
6
|
+
|
|
7
|
+
# Function: useWallpaperTint()
|
|
8
|
+
|
|
9
|
+
> **useWallpaperTint**(`options`): `WallpaperTintResult`
|
|
10
|
+
|
|
11
|
+
Defined in: [src/lib/hooks/use-wallpaper-tint.ts:172](https://github.com/Yhooi2/shadcn-glass-ui-library/blob/926c43a35b985ce0dee6d96ce88a1fc3d72f4d67/src/lib/hooks/use-wallpaper-tint.ts#L172)
|
|
12
|
+
|
|
13
|
+
Hook to extract and use wallpaper tint color
|
|
14
|
+
|
|
15
|
+
## Parameters
|
|
16
|
+
|
|
17
|
+
### options
|
|
18
|
+
|
|
19
|
+
`WallpaperTintOptions` = `{}`
|
|
20
|
+
|
|
21
|
+
## Returns
|
|
22
|
+
|
|
23
|
+
`WallpaperTintResult`
|
|
24
|
+
|
|
25
|
+
## Example
|
|
26
|
+
|
|
27
|
+
```tsx
|
|
28
|
+
const { tintColor, isLoading } = useWallpaperTint({
|
|
29
|
+
imageUrl: '/path/to/background.jpg',
|
|
30
|
+
});
|
|
31
|
+
|
|
32
|
+
// Use tintColor in CSS variables
|
|
33
|
+
<div style={{ '--wallpaper-tint': tintColor }}>
|
|
34
|
+
<GlassCard />
|
|
35
|
+
</div>
|
|
36
|
+
```
|
|
@@ -0,0 +1,139 @@
|
|
|
1
|
+
[**shadcn-glass-ui API Reference v1.0.7**](README.md)
|
|
2
|
+
|
|
3
|
+
***
|
|
4
|
+
|
|
5
|
+
# shadcn-glass-ui API Reference v1.0.7
|
|
6
|
+
|
|
7
|
+
## Functions
|
|
8
|
+
|
|
9
|
+
- [useFocus](functions/useFocus.md)
|
|
10
|
+
- [useHover](functions/useHover.md)
|
|
11
|
+
- [useResponsive](functions/useResponsive.md)
|
|
12
|
+
- [useWallpaperTint](functions/useWallpaperTint.md)
|
|
13
|
+
- [ThemeProvider](functions/ThemeProvider.md)
|
|
14
|
+
- [useTheme](functions/useTheme.md)
|
|
15
|
+
- [getNextTheme](functions/getNextTheme.md)
|
|
16
|
+
- [getThemeConfig](functions/getThemeConfig.md)
|
|
17
|
+
- [cn](functions/cn.md)
|
|
18
|
+
|
|
19
|
+
## Interfaces
|
|
20
|
+
|
|
21
|
+
- [ProgressGlassProps](interfaces/ProgressGlassProps.md)
|
|
22
|
+
- [AlertGlassProps](interfaces/AlertGlassProps.md)
|
|
23
|
+
- [AvatarGlassProps](interfaces/AvatarGlassProps.md)
|
|
24
|
+
- [BadgeGlassProps](interfaces/BadgeGlassProps.md)
|
|
25
|
+
- [ButtonGlassProps](interfaces/ButtonGlassProps.md)
|
|
26
|
+
- [CheckboxGlassProps](interfaces/CheckboxGlassProps.md)
|
|
27
|
+
- [DropdownItem](interfaces/DropdownItem.md)
|
|
28
|
+
- [DropdownGlassProps](interfaces/DropdownGlassProps.md)
|
|
29
|
+
- [GlassCardProps](interfaces/GlassCardProps.md)
|
|
30
|
+
- [InputGlassProps](interfaces/InputGlassProps.md)
|
|
31
|
+
- [NotificationGlassProps](interfaces/NotificationGlassProps.md)
|
|
32
|
+
- [SkeletonGlassProps](interfaces/SkeletonGlassProps.md)
|
|
33
|
+
- [SliderGlassProps](interfaces/SliderGlassProps.md)
|
|
34
|
+
- [TabItem](interfaces/TabItem.md)
|
|
35
|
+
- [ToggleGlassProps](interfaces/ToggleGlassProps.md)
|
|
36
|
+
- [TooltipGlassProps](interfaces/TooltipGlassProps.md)
|
|
37
|
+
- [ThemeConfig](interfaces/ThemeConfig.md)
|
|
38
|
+
- [ThemeContextValue](interfaces/ThemeContextValue.md)
|
|
39
|
+
|
|
40
|
+
## Type Aliases
|
|
41
|
+
|
|
42
|
+
- [AvatarStatus](type-aliases/AvatarStatus.md)
|
|
43
|
+
- [Theme](type-aliases/Theme.md)
|
|
44
|
+
- [AlertVariant](type-aliases/AlertVariant.md)
|
|
45
|
+
- [AlertType](type-aliases/AlertType.md)
|
|
46
|
+
- [AvatarSize](type-aliases/AvatarSize.md)
|
|
47
|
+
- [BadgeVariant](type-aliases/BadgeVariant.md)
|
|
48
|
+
- [BadgeSize](type-aliases/BadgeSize.md)
|
|
49
|
+
- [ButtonGlassVariant](type-aliases/ButtonGlassVariant.md)
|
|
50
|
+
- [ButtonGlassSize](type-aliases/ButtonGlassSize.md)
|
|
51
|
+
- [DropdownAlign](type-aliases/DropdownAlign.md)
|
|
52
|
+
- [GlowType](type-aliases/GlowType.md)
|
|
53
|
+
- [IntensityType](type-aliases/IntensityType.md)
|
|
54
|
+
- [PaddingType](type-aliases/PaddingType.md)
|
|
55
|
+
- [InputGlassSize](type-aliases/InputGlassSize.md)
|
|
56
|
+
- [ModalSize](type-aliases/ModalSize.md)
|
|
57
|
+
- [NotificationType](type-aliases/NotificationType.md)
|
|
58
|
+
- [ProgressSize](type-aliases/ProgressSize.md)
|
|
59
|
+
- [ProgressGradient](type-aliases/ProgressGradient.md)
|
|
60
|
+
- [SkeletonVariant](type-aliases/SkeletonVariant.md)
|
|
61
|
+
- [ToggleGlassSize](type-aliases/ToggleGlassSize.md)
|
|
62
|
+
- [TooltipPosition](type-aliases/TooltipPosition.md)
|
|
63
|
+
|
|
64
|
+
## Variables
|
|
65
|
+
|
|
66
|
+
- [ExpandableHeaderGlass](variables/ExpandableHeaderGlass.md)
|
|
67
|
+
- [IconButtonGlass](variables/IconButtonGlass.md)
|
|
68
|
+
- [SearchBoxGlass](variables/SearchBoxGlass.md)
|
|
69
|
+
- [SortDropdownGlass](variables/SortDropdownGlass.md)
|
|
70
|
+
- [StatItemGlass](variables/StatItemGlass.md)
|
|
71
|
+
- [ThemeToggleGlass](variables/ThemeToggleGlass.md)
|
|
72
|
+
- [AICardGlass](variables/AICardGlass.md)
|
|
73
|
+
- [CareerStatsHeaderGlass](variables/CareerStatsHeaderGlass.md)
|
|
74
|
+
- [CircularMetricGlass](variables/CircularMetricGlass.md)
|
|
75
|
+
- [ContributionMetricsGlass](variables/ContributionMetricsGlass.md)
|
|
76
|
+
- [MetricCardGlass](variables/MetricCardGlass.md)
|
|
77
|
+
- [MetricsGridGlass](variables/MetricsGridGlass.md)
|
|
78
|
+
- [RepositoryCardGlass](variables/RepositoryCardGlass.md)
|
|
79
|
+
- [RepositoryHeaderGlass](variables/RepositoryHeaderGlass.md)
|
|
80
|
+
- [RepositoryMetadataGlass](variables/RepositoryMetadataGlass.md)
|
|
81
|
+
- [TrustScoreDisplayGlass](variables/TrustScoreDisplayGlass.md)
|
|
82
|
+
- [UserInfoGlass](variables/UserInfoGlass.md)
|
|
83
|
+
- [UserStatsLineGlass](variables/UserStatsLineGlass.md)
|
|
84
|
+
- [YearCardGlass](variables/YearCardGlass.md)
|
|
85
|
+
- [FormFieldWrapper](variables/FormFieldWrapper.md)
|
|
86
|
+
- [InteractiveCard](variables/InteractiveCard.md)
|
|
87
|
+
- [TouchTarget](variables/TouchTarget.md)
|
|
88
|
+
- [CareerStatsGlass](variables/CareerStatsGlass.md)
|
|
89
|
+
- [FlagsSectionGlass](variables/FlagsSectionGlass.md)
|
|
90
|
+
- [HeaderBrandingGlass](variables/HeaderBrandingGlass.md)
|
|
91
|
+
- [HeaderNavGlass](variables/HeaderNavGlass.md)
|
|
92
|
+
- [ProfileHeaderGlass](variables/ProfileHeaderGlass.md)
|
|
93
|
+
- [ProjectsListGlass](variables/ProjectsListGlass.md)
|
|
94
|
+
- [TrustScoreCardGlass](variables/TrustScoreCardGlass.md)
|
|
95
|
+
- [BaseProgressGlass](variables/BaseProgressGlass.md)
|
|
96
|
+
- [FlagAlertGlass](variables/FlagAlertGlass.md)
|
|
97
|
+
- [LanguageBarGlass](variables/LanguageBarGlass.md)
|
|
98
|
+
- [ProfileAvatarGlass](variables/ProfileAvatarGlass.md)
|
|
99
|
+
- [ProgressGlass](variables/ProgressGlass.md)
|
|
100
|
+
- [RainbowProgressGlass](variables/RainbowProgressGlass.md)
|
|
101
|
+
- [SegmentedControlGlass](variables/SegmentedControlGlass.md)
|
|
102
|
+
- [StatusIndicatorGlass](variables/StatusIndicatorGlass.md)
|
|
103
|
+
- [AlertGlass](variables/AlertGlass.md)
|
|
104
|
+
- [AvatarGlass](variables/AvatarGlass.md)
|
|
105
|
+
- [BadgeGlass](variables/BadgeGlass.md)
|
|
106
|
+
- [ButtonGlass](variables/ButtonGlass.md)
|
|
107
|
+
- [CheckboxGlass](variables/CheckboxGlass.md)
|
|
108
|
+
- [CircularProgressGlass](variables/CircularProgressGlass.md)
|
|
109
|
+
- [ComboBoxGlass](variables/ComboBoxGlass.md)
|
|
110
|
+
- [DropdownGlass](variables/DropdownGlass.md)
|
|
111
|
+
- [GlassCard](variables/GlassCard.md)
|
|
112
|
+
- [InputGlass](variables/InputGlass.md)
|
|
113
|
+
- [ModalGlass](variables/ModalGlass.md)
|
|
114
|
+
- [NotificationGlass](variables/NotificationGlass.md)
|
|
115
|
+
- [PopoverGlass](variables/PopoverGlass.md)
|
|
116
|
+
- [SkeletonGlass](variables/SkeletonGlass.md)
|
|
117
|
+
- [SliderGlass](variables/SliderGlass.md)
|
|
118
|
+
- [TabsGlass](variables/TabsGlass.md)
|
|
119
|
+
- [ToggleGlass](variables/ToggleGlass.md)
|
|
120
|
+
- [TooltipGlass](variables/TooltipGlass.md)
|
|
121
|
+
- [THEMES](variables/THEMES.md)
|
|
122
|
+
- [THEME\_CONFIG](variables/THEME_CONFIG.md)
|
|
123
|
+
- [alertVariants](variables/alertVariants.md)
|
|
124
|
+
- [shadcnAlertVariants](variables/shadcnAlertVariants.md)
|
|
125
|
+
- [avatarSizes](variables/avatarSizes.md)
|
|
126
|
+
- [statusSizes](variables/statusSizes.md)
|
|
127
|
+
- [badgeVariants](variables/badgeVariants.md)
|
|
128
|
+
- [shadcnBadgeVariants](variables/shadcnBadgeVariants.md)
|
|
129
|
+
- [buttonGlassVariants](variables/buttonGlassVariants.md)
|
|
130
|
+
- [shadcnButtonVariants](variables/shadcnButtonVariants.md)
|
|
131
|
+
- [dropdownAlign](variables/dropdownAlign.md)
|
|
132
|
+
- [cardIntensity](variables/cardIntensity.md)
|
|
133
|
+
- [inputVariants](variables/inputVariants.md)
|
|
134
|
+
- [modalSizes](variables/modalSizes.md)
|
|
135
|
+
- [notificationVariants](variables/notificationVariants.md)
|
|
136
|
+
- [progressSizes](variables/progressSizes.md)
|
|
137
|
+
- [skeletonVariants](variables/skeletonVariants.md)
|
|
138
|
+
- [toggleSizes](variables/toggleSizes.md)
|
|
139
|
+
- [tooltipPositions](variables/tooltipPositions.md)
|
|
@@ -0,0 +1,131 @@
|
|
|
1
|
+
[**shadcn-glass-ui API Reference v1.0.7**](../README.md)
|
|
2
|
+
|
|
3
|
+
***
|
|
4
|
+
|
|
5
|
+
[shadcn-glass-ui API Reference](../globals.md) / AlertGlassProps
|
|
6
|
+
|
|
7
|
+
# Interface: AlertGlassProps
|
|
8
|
+
|
|
9
|
+
Defined in: [src/components/glass/ui/alert-glass.tsx:162](https://github.com/Yhooi2/shadcn-glass-ui-library/blob/926c43a35b985ce0dee6d96ce88a1fc3d72f4d67/src/components/glass/ui/alert-glass.tsx#L162)
|
|
10
|
+
|
|
11
|
+
Props for the AlertGlass component
|
|
12
|
+
|
|
13
|
+
A glass-themed alert with semantic variants, dismissible option, and automatic icon selection.
|
|
14
|
+
Features theme-aware styling and WCAG-compliant role attributes.
|
|
15
|
+
|
|
16
|
+
## Accessibility
|
|
17
|
+
|
|
18
|
+
- **Keyboard Navigation:** Dismissible alerts include a keyboard-accessible close button (Tab + Enter/Space)
|
|
19
|
+
- **Focus Management:** Close button receives visible focus ring (WCAG 2.4.7)
|
|
20
|
+
- **Screen Readers:** Uses `role="alert"` for immediate announcement to screen readers (WCAG 4.1.3)
|
|
21
|
+
- **Icon Semantics:** Icons are decorative and hidden from screen readers with `aria-hidden="true"`
|
|
22
|
+
- **Variant Semantics:** Each variant uses distinct colors and icons for multi-modal communication (color + icon)
|
|
23
|
+
- **Touch Targets:** Dismiss button meets minimum 44x44px touch target (WCAG 2.5.5)
|
|
24
|
+
- **Color Contrast:** All variant text and backgrounds meet WCAG AA contrast ratio 4.5:1
|
|
25
|
+
- **Motion:** Transitions respect `prefers-reduced-motion` settings
|
|
26
|
+
|
|
27
|
+
## Example
|
|
28
|
+
|
|
29
|
+
```tsx
|
|
30
|
+
// Basic alert (info/default variant)
|
|
31
|
+
<AlertGlass title="Information" variant="default">
|
|
32
|
+
This is an informational message
|
|
33
|
+
</AlertGlass>
|
|
34
|
+
|
|
35
|
+
// Error alert with aria-live for dynamic updates
|
|
36
|
+
<AlertGlass variant="destructive" title="Error" aria-live="assertive">
|
|
37
|
+
Your session has expired. Please log in again.
|
|
38
|
+
</AlertGlass>
|
|
39
|
+
|
|
40
|
+
// Success alert
|
|
41
|
+
<AlertGlass variant="success" title="Success">
|
|
42
|
+
Your changes have been saved successfully.
|
|
43
|
+
</AlertGlass>
|
|
44
|
+
|
|
45
|
+
// Warning alert
|
|
46
|
+
<AlertGlass variant="warning" title="Warning">
|
|
47
|
+
Your subscription expires in 3 days.
|
|
48
|
+
</AlertGlass>
|
|
49
|
+
|
|
50
|
+
// Dismissible alert with accessible close button
|
|
51
|
+
<AlertGlass
|
|
52
|
+
variant="default"
|
|
53
|
+
title="Welcome"
|
|
54
|
+
dismissible
|
|
55
|
+
onDismiss={() => setShowAlert(false)}
|
|
56
|
+
>
|
|
57
|
+
Check out our new features!
|
|
58
|
+
</AlertGlass>
|
|
59
|
+
|
|
60
|
+
// Alert without title
|
|
61
|
+
<AlertGlass variant="destructive">
|
|
62
|
+
Quick error message without title
|
|
63
|
+
</AlertGlass>
|
|
64
|
+
|
|
65
|
+
// Form validation alert
|
|
66
|
+
<form onSubmit={handleSubmit}>
|
|
67
|
+
{formError && (
|
|
68
|
+
<AlertGlass variant="destructive" title="Validation Error" role="alert">
|
|
69
|
+
{formError}
|
|
70
|
+
</AlertGlass>
|
|
71
|
+
)}
|
|
72
|
+
<InputGlass label="Email" />
|
|
73
|
+
<ButtonGlass type="submit">Submit</ButtonGlass>
|
|
74
|
+
</form>
|
|
75
|
+
```
|
|
76
|
+
|
|
77
|
+
## Extends
|
|
78
|
+
|
|
79
|
+
- `Omit`\<`React.HTMLAttributes`\<`HTMLDivElement`\>, `"style"` \| `"title"`\>.`VariantProps`\<*typeof* [`alertVariants`](../variables/alertVariants.md)\>
|
|
80
|
+
|
|
81
|
+
## Properties
|
|
82
|
+
|
|
83
|
+
### title?
|
|
84
|
+
|
|
85
|
+
> `readonly` `optional` **title**: `string`
|
|
86
|
+
|
|
87
|
+
Defined in: [src/components/glass/ui/alert-glass.tsx:165](https://github.com/Yhooi2/shadcn-glass-ui-library/blob/926c43a35b985ce0dee6d96ce88a1fc3d72f4d67/src/components/glass/ui/alert-glass.tsx#L165)
|
|
88
|
+
|
|
89
|
+
***
|
|
90
|
+
|
|
91
|
+
### children
|
|
92
|
+
|
|
93
|
+
> `readonly` **children**: `ReactNode`
|
|
94
|
+
|
|
95
|
+
Defined in: [src/components/glass/ui/alert-glass.tsx:166](https://github.com/Yhooi2/shadcn-glass-ui-library/blob/926c43a35b985ce0dee6d96ce88a1fc3d72f4d67/src/components/glass/ui/alert-glass.tsx#L166)
|
|
96
|
+
|
|
97
|
+
#### Overrides
|
|
98
|
+
|
|
99
|
+
`Omit.children`
|
|
100
|
+
|
|
101
|
+
***
|
|
102
|
+
|
|
103
|
+
### dismissible?
|
|
104
|
+
|
|
105
|
+
> `readonly` `optional` **dismissible**: `boolean`
|
|
106
|
+
|
|
107
|
+
Defined in: [src/components/glass/ui/alert-glass.tsx:167](https://github.com/Yhooi2/shadcn-glass-ui-library/blob/926c43a35b985ce0dee6d96ce88a1fc3d72f4d67/src/components/glass/ui/alert-glass.tsx#L167)
|
|
108
|
+
|
|
109
|
+
***
|
|
110
|
+
|
|
111
|
+
### onDismiss()?
|
|
112
|
+
|
|
113
|
+
> `readonly` `optional` **onDismiss**: () => `void`
|
|
114
|
+
|
|
115
|
+
Defined in: [src/components/glass/ui/alert-glass.tsx:168](https://github.com/Yhooi2/shadcn-glass-ui-library/blob/926c43a35b985ce0dee6d96ce88a1fc3d72f4d67/src/components/glass/ui/alert-glass.tsx#L168)
|
|
116
|
+
|
|
117
|
+
#### Returns
|
|
118
|
+
|
|
119
|
+
`void`
|
|
120
|
+
|
|
121
|
+
***
|
|
122
|
+
|
|
123
|
+
### variant?
|
|
124
|
+
|
|
125
|
+
> `optional` **variant**: `"default"` \| `"error"` \| `"destructive"` \| `"success"` \| `"warning"` \| `"info"` \| `null`
|
|
126
|
+
|
|
127
|
+
Defined in: [src/lib/variants/alert-glass-variants.ts:27](https://github.com/Yhooi2/shadcn-glass-ui-library/blob/926c43a35b985ce0dee6d96ce88a1fc3d72f4d67/src/lib/variants/alert-glass-variants.ts#L27)
|
|
128
|
+
|
|
129
|
+
#### Inherited from
|
|
130
|
+
|
|
131
|
+
`VariantProps.variant`
|
|
@@ -0,0 +1,114 @@
|
|
|
1
|
+
[**shadcn-glass-ui API Reference v1.0.7**](../README.md)
|
|
2
|
+
|
|
3
|
+
***
|
|
4
|
+
|
|
5
|
+
[shadcn-glass-ui API Reference](../globals.md) / AvatarGlassProps
|
|
6
|
+
|
|
7
|
+
# Interface: AvatarGlassProps
|
|
8
|
+
|
|
9
|
+
Defined in: [src/components/glass/ui/avatar-glass.tsx:56](https://github.com/Yhooi2/shadcn-glass-ui-library/blob/926c43a35b985ce0dee6d96ce88a1fc3d72f4d67/src/components/glass/ui/avatar-glass.tsx#L56)
|
|
10
|
+
|
|
11
|
+
Props for the AvatarGlass component
|
|
12
|
+
|
|
13
|
+
A glass-themed avatar component with status indicators and size variants.
|
|
14
|
+
Displays user initials with theme-aware styling and optional status badge.
|
|
15
|
+
|
|
16
|
+
## Example
|
|
17
|
+
|
|
18
|
+
```tsx
|
|
19
|
+
// Basic avatar
|
|
20
|
+
<AvatarGlass name="John Doe" />
|
|
21
|
+
|
|
22
|
+
// With status indicator
|
|
23
|
+
<AvatarGlass name="Jane Smith" status="online" size="lg" />
|
|
24
|
+
|
|
25
|
+
// Different sizes
|
|
26
|
+
<AvatarGlass name="Alex" size="sm" />
|
|
27
|
+
<AvatarGlass name="Sam" size="xl" />
|
|
28
|
+
|
|
29
|
+
// As a link (asChild pattern)
|
|
30
|
+
<AvatarGlass asChild name="Sarah Connor" status="online">
|
|
31
|
+
<a href="/profile/sarah">View Profile</a>
|
|
32
|
+
</AvatarGlass>
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
## Extends
|
|
36
|
+
|
|
37
|
+
- `Omit`\<`React.HTMLAttributes`\<`HTMLDivElement`\>, `"style"`\>.`VariantProps`\<*typeof* [`avatarSizes`](../variables/avatarSizes.md)\>
|
|
38
|
+
|
|
39
|
+
## Properties
|
|
40
|
+
|
|
41
|
+
### asChild?
|
|
42
|
+
|
|
43
|
+
> `readonly` `optional` **asChild**: `boolean`
|
|
44
|
+
|
|
45
|
+
Defined in: [src/components/glass/ui/avatar-glass.tsx:70](https://github.com/Yhooi2/shadcn-glass-ui-library/blob/926c43a35b985ce0dee6d96ce88a1fc3d72f4d67/src/components/glass/ui/avatar-glass.tsx#L70)
|
|
46
|
+
|
|
47
|
+
Render as child element instead of div (polymorphic rendering).
|
|
48
|
+
Useful for making avatars clickable links.
|
|
49
|
+
|
|
50
|
+
#### Default
|
|
51
|
+
|
|
52
|
+
```ts
|
|
53
|
+
false
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
#### Example
|
|
57
|
+
|
|
58
|
+
```tsx
|
|
59
|
+
<AvatarGlass asChild name="John">
|
|
60
|
+
<a href="/profile">View Profile</a>
|
|
61
|
+
</AvatarGlass>
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
***
|
|
65
|
+
|
|
66
|
+
### name
|
|
67
|
+
|
|
68
|
+
> `readonly` **name**: `string`
|
|
69
|
+
|
|
70
|
+
Defined in: [src/components/glass/ui/avatar-glass.tsx:76](https://github.com/Yhooi2/shadcn-glass-ui-library/blob/926c43a35b985ce0dee6d96ce88a1fc3d72f4d67/src/components/glass/ui/avatar-glass.tsx#L76)
|
|
71
|
+
|
|
72
|
+
Full name of the user. Automatically generates initials (first 2 letters).
|
|
73
|
+
|
|
74
|
+
#### Example
|
|
75
|
+
|
|
76
|
+
```ts
|
|
77
|
+
"John Doe" → "JD"
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
***
|
|
81
|
+
|
|
82
|
+
### status?
|
|
83
|
+
|
|
84
|
+
> `readonly` `optional` **status**: [`AvatarStatus`](../type-aliases/AvatarStatus.md)
|
|
85
|
+
|
|
86
|
+
Defined in: [src/components/glass/ui/avatar-glass.tsx:82](https://github.com/Yhooi2/shadcn-glass-ui-library/blob/926c43a35b985ce0dee6d96ce88a1fc3d72f4d67/src/components/glass/ui/avatar-glass.tsx#L82)
|
|
87
|
+
|
|
88
|
+
Optional status indicator with glow effect
|
|
89
|
+
|
|
90
|
+
#### Default
|
|
91
|
+
|
|
92
|
+
```ts
|
|
93
|
+
undefined
|
|
94
|
+
```
|
|
95
|
+
|
|
96
|
+
***
|
|
97
|
+
|
|
98
|
+
### size?
|
|
99
|
+
|
|
100
|
+
> `readonly` `optional` **size**: `"sm"` \| `"md"` \| `"lg"` \| `"xl"`
|
|
101
|
+
|
|
102
|
+
Defined in: [src/components/glass/ui/avatar-glass.tsx:88](https://github.com/Yhooi2/shadcn-glass-ui-library/blob/926c43a35b985ce0dee6d96ce88a1fc3d72f4d67/src/components/glass/ui/avatar-glass.tsx#L88)
|
|
103
|
+
|
|
104
|
+
Size variant of the avatar
|
|
105
|
+
|
|
106
|
+
#### Default
|
|
107
|
+
|
|
108
|
+
```ts
|
|
109
|
+
"md"
|
|
110
|
+
```
|
|
111
|
+
|
|
112
|
+
#### Overrides
|
|
113
|
+
|
|
114
|
+
`VariantProps.size`
|