shadcn-glass-ui 2.2.4 → 2.3.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 +48 -0
- package/dist/cli/index.cjs +1 -1
- package/dist/components/glass/index.d.ts +7 -5
- package/dist/components/glass/index.d.ts.map +1 -1
- package/dist/components/glass/specialized/flag-alert-glass.d.ts.map +1 -1
- package/dist/components/glass/specialized/progress-glass.d.ts.map +1 -1
- package/dist/components/glass/ui/avatar-glass.d.ts.map +1 -1
- package/dist/components/glass/ui/checkbox-glass.d.ts +66 -58
- package/dist/components/glass/ui/checkbox-glass.d.ts.map +1 -1
- package/dist/components/glass/ui/circular-progress-glass.d.ts.map +1 -1
- package/dist/components/glass/ui/dropdown-menu-glass.d.ts +11 -5
- package/dist/components/glass/ui/dropdown-menu-glass.d.ts.map +1 -1
- package/dist/components/glass/ui/glass-card.d.ts.map +1 -1
- package/dist/components/glass/ui/index.d.ts +7 -1
- package/dist/components/glass/ui/index.d.ts.map +1 -1
- package/dist/components/glass/ui/notification-glass.d.ts.map +1 -1
- package/dist/components/glass/ui/popover-glass.d.ts +6 -3
- package/dist/components/glass/ui/popover-glass.d.ts.map +1 -1
- package/dist/components/glass/ui/skeleton-glass.d.ts.map +1 -1
- package/dist/components/glass/ui/slider-glass.d.ts.map +1 -1
- package/dist/components/glass/ui/stepper-glass.d.ts.map +1 -1
- package/dist/components/glass/ui/tabs-glass.d.ts +111 -110
- package/dist/components/glass/ui/tabs-glass.d.ts.map +1 -1
- package/dist/components/glass/ui/toggle-glass.d.ts.map +1 -1
- package/dist/components.cjs +4 -4
- package/dist/components.mjs +1 -1
- package/dist/hooks.cjs +2 -2
- package/dist/index.cjs +17 -5
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +4 -2
- package/dist/index.d.ts.map +1 -1
- package/dist/index.mjs +9 -2
- package/dist/index.mjs.map +1 -1
- package/dist/lib/types.d.ts +2 -2
- package/dist/lib/types.d.ts.map +1 -1
- package/dist/lib/variants/skeleton-glass-variants.d.ts +1 -1
- package/dist/r/avatar-glass.json +1 -1
- package/dist/r/checkbox-glass.json +6 -6
- package/dist/r/circular-progress-glass.json +1 -1
- package/dist/r/dropdown-glass.json +1 -1
- package/dist/r/dropdown-menu-glass.json +1 -1
- package/dist/r/flag-alert-glass.json +1 -1
- package/dist/r/glass-card.json +3 -2
- package/dist/r/notification-glass.json +1 -1
- package/dist/r/popover-glass.json +1 -1
- package/dist/r/progress-glass.json +1 -1
- package/dist/r/registry.json +2 -2
- package/dist/r/skeleton-glass.json +1 -1
- package/dist/r/slider-glass.json +1 -1
- package/dist/r/stepper-glass.json +1 -1
- package/dist/r/tabs-glass.json +8 -5
- package/dist/r/toggle-glass.json +1 -1
- package/dist/shadcn-glass-ui.css +1 -1
- package/dist/{theme-context-DBAPfMto.cjs → theme-context-7NcW0KZL.cjs} +2 -2
- package/dist/{theme-context-DBAPfMto.cjs.map → theme-context-7NcW0KZL.cjs.map} +1 -1
- package/dist/themes.cjs +1 -1
- package/dist/{trust-score-card-glass-BUt9MIF0.mjs → trust-score-card-glass-BGqBcdyJ.mjs} +126 -154
- package/dist/trust-score-card-glass-BGqBcdyJ.mjs.map +1 -0
- package/dist/{trust-score-card-glass-_v9hGnCW.cjs → trust-score-card-glass-DtgFygh5.cjs} +159 -155
- package/dist/trust-score-card-glass-DtgFygh5.cjs.map +1 -0
- package/dist/{use-focus-DBs46Dxv.cjs → use-focus-BFBcpBh1.cjs} +2 -2
- package/dist/{use-focus-DBs46Dxv.cjs.map → use-focus-BFBcpBh1.cjs.map} +1 -1
- package/dist/{use-wallpaper-tint-DNdTbD1y.cjs → use-wallpaper-tint-DTTStm5f.cjs} +2 -2
- package/dist/{use-wallpaper-tint-DNdTbD1y.cjs.map → use-wallpaper-tint-DTTStm5f.cjs.map} +1 -1
- package/dist/{utils-D5ef293O.cjs → utils-CiuCe_Aq.cjs} +2 -2
- package/dist/{utils-D5ef293O.cjs.map → utils-CiuCe_Aq.cjs.map} +1 -1
- package/dist/utils.cjs +1 -1
- package/package.json +5 -1
- package/dist/trust-score-card-glass-BUt9MIF0.mjs.map +0 -1
- package/dist/trust-score-card-glass-_v9hGnCW.cjs.map +0 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
const require_trust_score_card_glass = require("./trust-score-card-glass-
|
|
1
|
+
const require_trust_score_card_glass = require("./trust-score-card-glass-DtgFygh5.cjs");
|
|
2
2
|
let react = require("react");
|
|
3
3
|
let lucide_react = require("lucide-react");
|
|
4
4
|
let react_jsx_runtime = require("react/jsx-runtime");
|
|
@@ -99,4 +99,4 @@ Object.defineProperty(exports, "useTheme", {
|
|
|
99
99
|
}
|
|
100
100
|
});
|
|
101
101
|
|
|
102
|
-
//# sourceMappingURL=theme-context-
|
|
102
|
+
//# sourceMappingURL=theme-context-7NcW0KZL.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"theme-context-
|
|
1
|
+
{"version":3,"file":"theme-context-7NcW0KZL.cjs","names":["THEMES: readonly Theme[]","THEME_CONFIG: Record<Theme, ThemeConfig>","DEFAULT_THEME: Theme","value: ThemeContextValue"],"sources":["../src/lib/theme-context.tsx"],"sourcesContent":["/**\n * Theme System for Glass UI Components\n *\n * Multi-theme support with CSS variables for glass, light, and aurora themes.\n * Provides ThemeProvider context and useTheme hook for theme management.\n *\n * @module theme-context\n *\n * @example\n * ```tsx\n * // Wrap your app with ThemeProvider\n * import { ThemeProvider } from 'shadcn-glass-ui';\n *\n * function App() {\n * return (\n * <ThemeProvider defaultTheme=\"glass\">\n * <YourApp />\n * </ThemeProvider>\n * );\n * }\n * ```\n *\n * @example\n * ```tsx\n * // Use the theme hook in components\n * import { useTheme } from 'shadcn-glass-ui';\n *\n * function ThemeSwitcher() {\n * const { theme, setTheme, cycleTheme } = useTheme();\n *\n * return (\n * <div>\n * <p>Current theme: {theme}</p>\n * <button onClick={cycleTheme}>Cycle Theme</button>\n * <button onClick={() => setTheme('glass')}>Set Glass</button>\n * </div>\n * );\n * }\n * ```\n *\n * @see {@link docs/THEME_CREATION_GUIDE.md} for creating custom themes\n * @see {@link docs/TOKEN_ARCHITECTURE.md} for CSS variable system\n */\n\nimport { createContext, useContext, useState, useEffect, useCallback, type ReactNode } from 'react';\nimport { Sun, Moon, Palette, type LucideIcon } from 'lucide-react';\n\n// ========================================\n// TYPES\n// ========================================\n\n/**\n * Available theme options for Glass UI components.\n * - `light` - Light theme with subtle glass effects\n * - `aurora` - Gradient theme with aurora/northern lights effects\n * - `glass` - Dark glassmorphism theme (default)\n */\nexport type Theme = 'light' | 'aurora' | 'glass';\n\n/** @deprecated Use Theme instead */\nexport type ThemeName = Theme;\n\n/**\n * Configuration for a single theme including display label and icon.\n */\nexport interface ThemeConfig {\n /** Human-readable theme name for UI display */\n readonly label: string;\n /** Lucide icon component for theme toggle buttons */\n readonly icon: LucideIcon;\n}\n\n/**\n * Context value returned by useTheme hook.\n */\nexport interface ThemeContextValue {\n /** Current active theme */\n readonly theme: Theme;\n /** Set a specific theme */\n readonly setTheme: (theme: Theme) => void;\n /** Cycle to next theme in order: light → aurora → glass → light */\n readonly cycleTheme: () => void;\n}\n\n// ========================================\n// CONSTANTS\n// ========================================\n\n/** Array of all available themes in cycle order */\nexport const THEMES: readonly Theme[] = ['light', 'aurora', 'glass'] as const;\n\n/**\n * Theme configuration map with labels and icons.\n * Used by ThemeToggleGlass and other theme switching components.\n */\n// eslint-disable-next-line react-refresh/only-export-components\nexport const THEME_CONFIG: Record<Theme, ThemeConfig> = {\n light: { label: 'Light', icon: Sun },\n aurora: { label: 'Aurora', icon: Moon },\n glass: { label: 'Glass', icon: Palette },\n} as const;\n\nconst STORAGE_KEY = 'glass-ui-theme';\nconst DEFAULT_THEME: Theme = 'glass';\n\n// ========================================\n// CONTEXT\n// ========================================\n\nconst ThemeContext = createContext<ThemeContextValue | null>(null);\n\n// ========================================\n// PROVIDER\n// ========================================\n\ninterface ThemeProviderProps {\n /** Child components to wrap with theme context */\n readonly children: ReactNode;\n /** Initial theme to use (default: \"glass\") */\n readonly defaultTheme?: Theme;\n /** localStorage key for persistence (default: \"glass-ui-theme\") */\n readonly storageKey?: string;\n}\n\n/**\n * Theme provider component that manages theme state and persistence.\n *\n * Wraps your application to provide theme context to all child components.\n * Theme is automatically persisted to localStorage and applied to document.\n *\n * @param props - Provider configuration\n * @param props.children - Child components to wrap\n * @param props.defaultTheme - Initial theme (default: \"glass\")\n * @param props.storageKey - localStorage key (default: \"glass-ui-theme\")\n *\n * @example\n * ```tsx\n * <ThemeProvider defaultTheme=\"glass\">\n * <App />\n * </ThemeProvider>\n * ```\n */\nexport function ThemeProvider({\n children,\n defaultTheme = DEFAULT_THEME,\n storageKey = STORAGE_KEY,\n}: ThemeProviderProps) {\n const [theme, setThemeState] = useState<Theme>(() => {\n if (typeof window === 'undefined') {\n return defaultTheme;\n }\n\n const stored = localStorage.getItem(storageKey);\n if (stored && THEMES.includes(stored as Theme)) {\n return stored as Theme;\n }\n\n return defaultTheme;\n });\n\n // Apply theme to document\n useEffect(() => {\n const root = document.documentElement;\n root.setAttribute('data-theme', theme);\n localStorage.setItem(storageKey, theme);\n }, [theme, storageKey]);\n\n const setTheme = useCallback((newTheme: Theme) => {\n if (THEMES.includes(newTheme)) {\n setThemeState(newTheme);\n }\n }, []);\n\n const cycleTheme = useCallback(() => {\n setThemeState((current) => {\n const currentIndex = THEMES.indexOf(current);\n const nextIndex = (currentIndex + 1) % THEMES.length;\n return THEMES[nextIndex];\n });\n }, []);\n\n const value: ThemeContextValue = {\n theme,\n setTheme,\n cycleTheme,\n };\n\n return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;\n}\n\n// ========================================\n// HOOK\n// ========================================\n\n/**\n * Hook to access theme context values.\n *\n * Must be used within a ThemeProvider. Returns the current theme,\n * a setter function, and a cycle function.\n *\n * @returns Theme context value with theme, setTheme, and cycleTheme\n * @throws Error if used outside of ThemeProvider\n *\n * @example\n * ```tsx\n * function MyComponent() {\n * const { theme, setTheme, cycleTheme } = useTheme();\n *\n * return (\n * <button onClick={cycleTheme}>\n * Current: {theme}\n * </button>\n * );\n * }\n * ```\n */\n// eslint-disable-next-line react-refresh/only-export-components\nexport function useTheme(): ThemeContextValue {\n const context = useContext(ThemeContext);\n\n if (!context) {\n throw new Error('useTheme must be used within a ThemeProvider');\n }\n\n return context;\n}\n\n// ========================================\n// UTILITIES\n// ========================================\n\n/**\n * Get the next theme in the cycle order.\n *\n * @param current - Current theme\n * @returns Next theme in cycle (light → aurora → glass → light)\n *\n * @example\n * ```tsx\n * const next = getNextTheme('glass'); // returns 'light'\n * ```\n */\n// eslint-disable-next-line react-refresh/only-export-components\nexport function getNextTheme(current: Theme): Theme {\n const currentIndex = THEMES.indexOf(current);\n const nextIndex = (currentIndex + 1) % THEMES.length;\n return THEMES[nextIndex];\n}\n\n/**\n * Get configuration for a specific theme.\n *\n * @param theme - Theme to get configuration for\n * @returns Theme configuration with label and icon\n *\n * @example\n * ```tsx\n * const config = getThemeConfig('glass');\n * // { label: 'Glass', icon: Palette }\n * ```\n */\n// eslint-disable-next-line react-refresh/only-export-components\nexport function getThemeConfig(theme: Theme): ThemeConfig {\n return THEME_CONFIG[theme];\n}\n"],"mappings":";;;;AAyFA,MAAaA,SAA2B;CAAC;CAAS;CAAU;CAAQ;AAOpE,MAAaC,eAA2C;CACtD,OAAO;EAAE,OAAO;EAAS,MAAM,aAAA;EAAK;CACpC,QAAQ;EAAE,OAAO;EAAU,MAAM,aAAA;EAAM;CACvC,OAAO;EAAE,OAAO;EAAS,MAAM,aAAA;EAAS;CACzC;AAED,IAAM,cAAc;AACpB,IAAMC,gBAAuB;AAM7B,IAAM,gBAAA,GAAA,MAAA,eAAuD,KAAK;AAiClE,SAAgB,cAAc,EAC5B,UACA,eAAe,eACf,aAAa,eACQ;CACrB,MAAM,CAAC,OAAO,kBAAA,GAAA,MAAA,gBAAuC;AACnD,MAAI,OAAO,WAAW,YACpB,QAAO;EAGT,MAAM,SAAS,aAAa,QAAQ,WAAW;AAC/C,MAAI,UAAU,OAAO,SAAS,OAAgB,CAC5C,QAAO;AAGT,SAAO;GACP;AAGF,EAAA,GAAA,MAAA,iBAAgB;AACD,WAAS,gBACjB,aAAa,cAAc,MAAM;AACtC,eAAa,QAAQ,YAAY,MAAM;IACtC,CAAC,OAAO,WAAW,CAAC;CAgBvB,MAAMC,QAA2B;EAC/B;EACA,WAAA,GAAA,MAAA,cAhB4B,aAAoB;AAChD,OAAI,OAAO,SAAS,SAAS,CAC3B,eAAc,SAAS;KAExB,EAAE,CAAC;EAaJ,aAAA,GAAA,MAAA,mBAXmC;AACnC,kBAAe,YAAY;AAGzB,WAAO,QAFc,OAAO,QAAQ,QAAQ,GACV,KAAK,OAAO;KAE9C;KACD,EAAE,CAAC;EAML;AAED,QAAO,iBAAA,GAAA,kBAAA,KAAC,aAAa,UAAA;EAAgB;EAAQ;GAAiC;;AA8BhF,SAAgB,WAA8B;CAC5C,MAAM,WAAA,GAAA,MAAA,YAAqB,aAAa;AAExC,KAAI,CAAC,QACH,OAAM,IAAI,MAAM,+CAA+C;AAGjE,QAAO;;AAmBT,SAAgB,aAAa,SAAuB;AAGlD,QAAO,QAFc,OAAO,QAAQ,QAAQ,GACV,KAAK,OAAO;;AAiBhD,SAAgB,eAAe,OAA2B;AACxD,QAAO,aAAa"}
|
package/dist/themes.cjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
const require_theme_context = require("./theme-context-
|
|
1
|
+
const require_theme_context = require("./theme-context-7NcW0KZL.cjs");
|
|
2
2
|
exports.THEMES = require_theme_context.THEMES;
|
|
3
3
|
exports.THEME_CONFIG = require_theme_context.THEME_CONFIG;
|
|
4
4
|
exports.ThemeProvider = require_theme_context.ThemeProvider;
|
|
@@ -2,17 +2,19 @@ import { t as cn } from "./utils-B792GPM_.mjs";
|
|
|
2
2
|
import { n as useHover, t as useFocus } from "./use-focus-C5kPAKr_.mjs";
|
|
3
3
|
import { o as useTheme } from "./theme-context-DLS2uAgJ.mjs";
|
|
4
4
|
import * as React from "react";
|
|
5
|
-
import {
|
|
5
|
+
import { forwardRef, useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
|
|
6
6
|
import { AlertCircle, AlertTriangle, ArrowDown, ArrowUp, Calendar, Check, CheckCircle, CheckIcon, ChevronDown, ChevronRight, ChevronRightIcon, ChevronUp, ChevronsUpDownIcon, CircleIcon, Clock, Code, ExternalLink, FolderGit2, GitPullRequest, Github, Info, Minus, Moon, Palette, RefreshCw, Search, SearchIcon, Sparkles, Star, Sun, Target, TrendingDown, TrendingUp, User, Users, X, Zap } from "lucide-react";
|
|
7
7
|
import { cva } from "class-variance-authority";
|
|
8
8
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
9
9
|
import * as AvatarPrimitive from "@radix-ui/react-avatar";
|
|
10
10
|
import { Slot } from "@radix-ui/react-slot";
|
|
11
|
+
import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
|
|
11
12
|
import * as PopoverPrimitive from "@radix-ui/react-popover";
|
|
12
13
|
import { Command } from "cmdk";
|
|
13
14
|
import * as DialogPrimitive from "@radix-ui/react-dialog";
|
|
14
15
|
import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
|
|
15
16
|
import * as SliderPrimitive from "@radix-ui/react-slider";
|
|
17
|
+
import * as TabsPrimitive from "@radix-ui/react-tabs";
|
|
16
18
|
import * as TooltipPrimitive from "@radix-ui/react-tooltip";
|
|
17
19
|
import { Bar, BarChart, Cell, ResponsiveContainer, Tooltip } from "recharts";
|
|
18
20
|
const alertVariants = cva("flex items-start gap-2 md:gap-3 p-3 md:p-4 rounded-xl transition-all duration-300 backdrop-blur-sm min-w-96 max-w-2xl", {
|
|
@@ -261,6 +263,7 @@ var AvatarGlassRoot = React.forwardRef(({ className, size = "md", status, glowin
|
|
|
261
263
|
glowing
|
|
262
264
|
},
|
|
263
265
|
children: /* @__PURE__ */ jsxs("div", {
|
|
266
|
+
"data-slot": "avatar",
|
|
264
267
|
className: cn("relative inline-flex", className),
|
|
265
268
|
onMouseEnter: hoverProps.onMouseEnter,
|
|
266
269
|
onMouseLeave: hoverProps.onMouseLeave,
|
|
@@ -271,6 +274,7 @@ var AvatarGlassRoot = React.forwardRef(({ className, size = "md", status, glowin
|
|
|
271
274
|
...props,
|
|
272
275
|
children
|
|
273
276
|
}), status && /* @__PURE__ */ jsx("span", {
|
|
277
|
+
"data-slot": "avatar-status",
|
|
274
278
|
className: cn(statusSizes({ size })),
|
|
275
279
|
style: {
|
|
276
280
|
background: getStatusVars$1(status).bg,
|
|
@@ -286,6 +290,7 @@ AvatarGlassRoot.displayName = "AvatarGlass";
|
|
|
286
290
|
var AvatarGlassImage = React.forwardRef(({ className, ...props }, ref) => {
|
|
287
291
|
return /* @__PURE__ */ jsx(AvatarPrimitive.Image, {
|
|
288
292
|
ref,
|
|
293
|
+
"data-slot": "avatar-image",
|
|
289
294
|
className: cn("aspect-square h-full w-full object-cover", className),
|
|
290
295
|
...props
|
|
291
296
|
});
|
|
@@ -294,6 +299,7 @@ AvatarGlassImage.displayName = "AvatarGlassImage";
|
|
|
294
299
|
var AvatarGlassFallback = React.forwardRef(({ className, ...props }, ref) => {
|
|
295
300
|
return /* @__PURE__ */ jsx(AvatarPrimitive.Fallback, {
|
|
296
301
|
ref,
|
|
302
|
+
"data-slot": "avatar-fallback",
|
|
297
303
|
className: cn("flex h-full w-full items-center justify-center font-semibold uppercase", className),
|
|
298
304
|
...props
|
|
299
305
|
});
|
|
@@ -528,61 +534,51 @@ const ButtonGlass = forwardRef(({ asChild = false, className, variant = "default
|
|
|
528
534
|
});
|
|
529
535
|
});
|
|
530
536
|
ButtonGlass.displayName = "ButtonGlass";
|
|
531
|
-
const CheckboxGlass = forwardRef(({ className,
|
|
532
|
-
const
|
|
533
|
-
|
|
537
|
+
const CheckboxGlass = React.forwardRef(({ className, label, onChange, onCheckedChange, disabled, checked, ...props }, ref) => {
|
|
538
|
+
const handleCheckedChange = React.useCallback((newChecked) => {
|
|
539
|
+
onCheckedChange?.(newChecked);
|
|
540
|
+
if (onChange && typeof newChecked === "boolean") onChange(newChecked);
|
|
541
|
+
}, [onCheckedChange, onChange]);
|
|
542
|
+
const isIndeterminate = checked === "indeterminate";
|
|
543
|
+
const showIndicator = checked === true || isIndeterminate;
|
|
534
544
|
const checkboxStyles = {
|
|
535
|
-
background:
|
|
536
|
-
|
|
537
|
-
boxShadow: isFocusVisible && !disabled ? "var(--focus-glow)" : isHovered && !disabled ? "var(--checkbox-glow)" : "none"
|
|
545
|
+
background: showIndicator ? "var(--checkbox-checked-bg)" : "var(--checkbox-bg)",
|
|
546
|
+
borderColor: showIndicator ? "var(--checkbox-checked-bg)" : "var(--checkbox-border)"
|
|
538
547
|
};
|
|
539
548
|
return /* @__PURE__ */ jsxs("label", {
|
|
540
549
|
className: cn("inline-flex items-center gap-2 md:gap-2.5", disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer", className),
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
|
|
544
|
-
/* @__PURE__ */ jsx("input", {
|
|
550
|
+
children: [/* @__PURE__ */ jsx("span", {
|
|
551
|
+
className: "inline-flex items-center justify-center min-w-11 min-h-11",
|
|
552
|
+
children: /* @__PURE__ */ jsx(CheckboxPrimitive.Root, {
|
|
545
553
|
ref,
|
|
546
|
-
|
|
554
|
+
"data-slot": "checkbox",
|
|
547
555
|
checked,
|
|
548
|
-
|
|
556
|
+
onCheckedChange: handleCheckedChange,
|
|
549
557
|
disabled,
|
|
550
|
-
className: "
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
style: checkboxStyles,
|
|
561
|
-
role: "checkbox",
|
|
562
|
-
"aria-checked": checked,
|
|
563
|
-
"aria-label": label || "Checkbox",
|
|
564
|
-
tabIndex: disabled ? -1 : 0,
|
|
565
|
-
onKeyDown: (e) => {
|
|
566
|
-
if (!disabled && (e.key === "Enter" || e.key === " ")) {
|
|
567
|
-
e.preventDefault();
|
|
568
|
-
onChange?.(!checked);
|
|
569
|
-
}
|
|
570
|
-
},
|
|
571
|
-
children: checked && /* @__PURE__ */ jsx(Check, {
|
|
558
|
+
className: cn("peer relative w-6 h-6 md:w-5 md:h-5 shrink-0", "rounded-md border-2 transition-all duration-300", "flex items-center justify-center", "focus-visible:outline-none focus-visible:shadow-(--focus-glow)", "hover:shadow-(--checkbox-glow)", "disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:shadow-none"),
|
|
559
|
+
style: checkboxStyles,
|
|
560
|
+
...props,
|
|
561
|
+
children: /* @__PURE__ */ jsx(CheckboxPrimitive.Indicator, {
|
|
562
|
+
"data-slot": "checkbox-indicator",
|
|
563
|
+
className: "flex items-center justify-center text-current",
|
|
564
|
+
children: isIndeterminate ? /* @__PURE__ */ jsx(Minus, {
|
|
565
|
+
className: "w-3.5 h-3.5 md:w-3 md:h-3",
|
|
566
|
+
style: { color: "var(--text-inverse)" }
|
|
567
|
+
}) : /* @__PURE__ */ jsx(Check, {
|
|
572
568
|
className: "w-3.5 h-3.5 md:w-3 md:h-3",
|
|
573
569
|
style: { color: "var(--text-inverse)" }
|
|
574
570
|
})
|
|
575
571
|
})
|
|
576
|
-
}),
|
|
577
|
-
label && /* @__PURE__ */ jsx("span", {
|
|
578
|
-
className: "text-xs md:text-sm",
|
|
579
|
-
style: { color: "var(--text-secondary)" },
|
|
580
|
-
children: label
|
|
581
572
|
})
|
|
582
|
-
|
|
573
|
+
}), label && /* @__PURE__ */ jsx("span", {
|
|
574
|
+
className: "text-xs md:text-sm",
|
|
575
|
+
style: { color: "var(--text-secondary)" },
|
|
576
|
+
children: label
|
|
577
|
+
})]
|
|
583
578
|
});
|
|
584
579
|
});
|
|
585
580
|
CheckboxGlass.displayName = "CheckboxGlass";
|
|
581
|
+
const Checkbox = CheckboxGlass;
|
|
586
582
|
var circularProgressVariants = cva("relative inline-flex items-center justify-center p-4", {
|
|
587
583
|
variants: { size: {
|
|
588
584
|
sm: "w-20 h-20",
|
|
@@ -658,6 +654,7 @@ const CircularProgressGlass = forwardRef(({ className, size = "md", value = 0, v
|
|
|
658
654
|
const glowId = `circular-glow-${uniqueId}`;
|
|
659
655
|
return /* @__PURE__ */ jsxs("div", {
|
|
660
656
|
ref,
|
|
657
|
+
"data-slot": "circular-progress",
|
|
661
658
|
className: cn(circularProgressVariants({ size }), className),
|
|
662
659
|
...props,
|
|
663
660
|
children: [
|
|
@@ -931,14 +928,33 @@ function ComboBoxGlassInner({ options, value, onValueChange, placeholder = "Sele
|
|
|
931
928
|
}
|
|
932
929
|
const ComboBoxGlass = forwardRef(ComboBoxGlassInner);
|
|
933
930
|
ComboBoxGlassInner.displayName = "ComboBoxGlass";
|
|
934
|
-
var
|
|
935
|
-
|
|
936
|
-
var
|
|
931
|
+
var DropdownMenuGlassRoot = (props) => /* @__PURE__ */ jsx(DropdownMenuPrimitive.Root, { ...props });
|
|
932
|
+
DropdownMenuGlassRoot.displayName = "DropdownMenuGlass";
|
|
933
|
+
var DropdownMenuGlass = DropdownMenuGlassRoot;
|
|
934
|
+
var DropdownMenuGlassTrigger = React.forwardRef((props, ref) => /* @__PURE__ */ jsx(DropdownMenuPrimitive.Trigger, {
|
|
935
|
+
"data-slot": "dropdown-menu-trigger",
|
|
936
|
+
ref,
|
|
937
|
+
...props
|
|
938
|
+
}));
|
|
939
|
+
DropdownMenuGlassTrigger.displayName = "DropdownMenuGlassTrigger";
|
|
940
|
+
var DropdownMenuGlassGroup = React.forwardRef((props, ref) => /* @__PURE__ */ jsx(DropdownMenuPrimitive.Group, {
|
|
941
|
+
"data-slot": "dropdown-menu-group",
|
|
942
|
+
ref,
|
|
943
|
+
...props
|
|
944
|
+
}));
|
|
945
|
+
DropdownMenuGlassGroup.displayName = "DropdownMenuGlassGroup";
|
|
937
946
|
var DropdownMenuGlassPortal = DropdownMenuPrimitive.Portal;
|
|
938
|
-
var DropdownMenuGlassSub = DropdownMenuPrimitive.Sub;
|
|
939
|
-
|
|
947
|
+
var DropdownMenuGlassSub = (props) => /* @__PURE__ */ jsx(DropdownMenuPrimitive.Sub, { ...props });
|
|
948
|
+
DropdownMenuGlassSub.displayName = "DropdownMenuGlassSub";
|
|
949
|
+
var DropdownMenuGlassRadioGroup = React.forwardRef((props, ref) => /* @__PURE__ */ jsx(DropdownMenuPrimitive.RadioGroup, {
|
|
950
|
+
"data-slot": "dropdown-menu-radio-group",
|
|
951
|
+
ref,
|
|
952
|
+
...props
|
|
953
|
+
}));
|
|
954
|
+
DropdownMenuGlassRadioGroup.displayName = "DropdownMenuGlassRadioGroup";
|
|
940
955
|
var DropdownMenuGlassSubTrigger = React.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs(DropdownMenuPrimitive.SubTrigger, {
|
|
941
956
|
ref,
|
|
957
|
+
"data-slot": "dropdown-menu-sub-trigger",
|
|
942
958
|
className: cn(getDropdownItemClasses(), "data-[state=open]:bg-[var(--dropdown-item-hover)]", inset && "pl-8", className),
|
|
943
959
|
...props,
|
|
944
960
|
children: [children, /* @__PURE__ */ jsx(ChevronRightIcon, { className: "ml-auto h-4 w-4" })]
|
|
@@ -946,6 +962,7 @@ var DropdownMenuGlassSubTrigger = React.forwardRef(({ className, inset, children
|
|
|
946
962
|
DropdownMenuGlassSubTrigger.displayName = "DropdownMenuGlassSubTrigger";
|
|
947
963
|
var DropdownMenuGlassSubContent = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenuPrimitive.SubContent, {
|
|
948
964
|
ref,
|
|
965
|
+
"data-slot": "dropdown-menu-sub-content",
|
|
949
966
|
className: cn(dropdownContentClasses, "p-1.5", className),
|
|
950
967
|
style: getDropdownContentStyles(),
|
|
951
968
|
...props
|
|
@@ -953,6 +970,7 @@ var DropdownMenuGlassSubContent = React.forwardRef(({ className, ...props }, ref
|
|
|
953
970
|
DropdownMenuGlassSubContent.displayName = "DropdownMenuGlassSubContent";
|
|
954
971
|
var DropdownMenuGlassContent = React.forwardRef(({ className, sideOffset = 8, ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.Content, {
|
|
955
972
|
ref,
|
|
973
|
+
"data-slot": "dropdown-menu-content",
|
|
956
974
|
sideOffset,
|
|
957
975
|
className: cn(dropdownContentClasses, "p-1.5", className),
|
|
958
976
|
style: getDropdownContentStyles(),
|
|
@@ -961,12 +979,14 @@ var DropdownMenuGlassContent = React.forwardRef(({ className, sideOffset = 8, ..
|
|
|
961
979
|
DropdownMenuGlassContent.displayName = "DropdownMenuGlassContent";
|
|
962
980
|
var DropdownMenuGlassItem = React.forwardRef(({ className, inset, variant = "default", ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenuPrimitive.Item, {
|
|
963
981
|
ref,
|
|
982
|
+
"data-slot": "dropdown-menu-item",
|
|
964
983
|
className: cn(getDropdownItemClasses({ danger: variant === "destructive" }), inset && "pl-8", className),
|
|
965
984
|
...props
|
|
966
985
|
}));
|
|
967
986
|
DropdownMenuGlassItem.displayName = "DropdownMenuGlassItem";
|
|
968
987
|
var DropdownMenuGlassCheckboxItem = React.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs(DropdownMenuPrimitive.CheckboxItem, {
|
|
969
988
|
ref,
|
|
989
|
+
"data-slot": "dropdown-menu-checkbox-item",
|
|
970
990
|
className: cn(getDropdownItemClasses(), "pl-8 pr-2", className),
|
|
971
991
|
checked,
|
|
972
992
|
...props,
|
|
@@ -978,6 +998,7 @@ var DropdownMenuGlassCheckboxItem = React.forwardRef(({ className, children, che
|
|
|
978
998
|
DropdownMenuGlassCheckboxItem.displayName = "DropdownMenuGlassCheckboxItem";
|
|
979
999
|
var DropdownMenuGlassRadioItem = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(DropdownMenuPrimitive.RadioItem, {
|
|
980
1000
|
ref,
|
|
1001
|
+
"data-slot": "dropdown-menu-radio-item",
|
|
981
1002
|
className: cn(getDropdownItemClasses(), "pl-8 pr-2", className),
|
|
982
1003
|
...props,
|
|
983
1004
|
children: [/* @__PURE__ */ jsx("span", {
|
|
@@ -988,18 +1009,21 @@ var DropdownMenuGlassRadioItem = React.forwardRef(({ className, children, ...pro
|
|
|
988
1009
|
DropdownMenuGlassRadioItem.displayName = "DropdownMenuGlassRadioItem";
|
|
989
1010
|
var DropdownMenuGlassLabel = React.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenuPrimitive.Label, {
|
|
990
1011
|
ref,
|
|
1012
|
+
"data-slot": "dropdown-menu-label",
|
|
991
1013
|
className: cn(dropdownLabelClasses, inset && "pl-8", className),
|
|
992
1014
|
...props
|
|
993
1015
|
}));
|
|
994
1016
|
DropdownMenuGlassLabel.displayName = "DropdownMenuGlassLabel";
|
|
995
1017
|
var DropdownMenuGlassSeparator = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenuPrimitive.Separator, {
|
|
996
1018
|
ref,
|
|
1019
|
+
"data-slot": "dropdown-menu-separator",
|
|
997
1020
|
className: cn(dropdownSeparatorClasses, "-mx-1 my-1", className),
|
|
998
1021
|
...props
|
|
999
1022
|
}));
|
|
1000
1023
|
DropdownMenuGlassSeparator.displayName = "DropdownMenuGlassSeparator";
|
|
1001
1024
|
var DropdownMenuGlassShortcut = ({ className, ...props }) => {
|
|
1002
1025
|
return /* @__PURE__ */ jsx("span", {
|
|
1026
|
+
"data-slot": "dropdown-menu-shortcut",
|
|
1003
1027
|
className: cn("ml-auto text-xs tracking-widest text-(--text-muted)", className),
|
|
1004
1028
|
...props
|
|
1005
1029
|
});
|
|
@@ -1008,6 +1032,7 @@ DropdownMenuGlassShortcut.displayName = "DropdownMenuGlassShortcut";
|
|
|
1008
1032
|
const DropdownGlass = React.forwardRef(({ trigger, items, align = "left", className }, ref) => {
|
|
1009
1033
|
return /* @__PURE__ */ jsx("div", {
|
|
1010
1034
|
ref,
|
|
1035
|
+
"data-slot": "dropdown",
|
|
1011
1036
|
className: cn("relative inline-block", className),
|
|
1012
1037
|
children: /* @__PURE__ */ jsxs(DropdownMenuGlass, { children: [/* @__PURE__ */ jsx(DropdownMenuGlassTrigger, {
|
|
1013
1038
|
asChild: true,
|
|
@@ -1083,6 +1108,7 @@ const GlassCard = forwardRef(({ asChild = false, children, className, intensity
|
|
|
1083
1108
|
};
|
|
1084
1109
|
return /* @__PURE__ */ jsx(asChild ? Slot : "div", {
|
|
1085
1110
|
ref,
|
|
1111
|
+
"data-slot": "card",
|
|
1086
1112
|
className: cn(cardIntensity({
|
|
1087
1113
|
intensity,
|
|
1088
1114
|
hover,
|
|
@@ -1365,6 +1391,7 @@ const NotificationGlass = forwardRef(({ variant: variantProp, type: typeProp, ti
|
|
|
1365
1391
|
};
|
|
1366
1392
|
return /* @__PURE__ */ jsxs("div", {
|
|
1367
1393
|
ref,
|
|
1394
|
+
"data-slot": "notification",
|
|
1368
1395
|
className: cn(notificationVariants({ type: effectiveType }), className),
|
|
1369
1396
|
style: containerStyles,
|
|
1370
1397
|
role: "alert",
|
|
@@ -1405,9 +1432,20 @@ const NotificationGlass = forwardRef(({ variant: variantProp, type: typeProp, ti
|
|
|
1405
1432
|
});
|
|
1406
1433
|
});
|
|
1407
1434
|
NotificationGlass.displayName = "NotificationGlass";
|
|
1408
|
-
var PopoverGlassRoot = PopoverPrimitive.Root;
|
|
1409
|
-
|
|
1410
|
-
var
|
|
1435
|
+
var PopoverGlassRoot = (props) => /* @__PURE__ */ jsx(PopoverPrimitive.Root, { ...props });
|
|
1436
|
+
PopoverGlassRoot.displayName = "PopoverGlass";
|
|
1437
|
+
var PopoverGlassTrigger = React.forwardRef((props, ref) => /* @__PURE__ */ jsx(PopoverPrimitive.Trigger, {
|
|
1438
|
+
"data-slot": "popover-trigger",
|
|
1439
|
+
ref,
|
|
1440
|
+
...props
|
|
1441
|
+
}));
|
|
1442
|
+
PopoverGlassTrigger.displayName = "PopoverGlassTrigger";
|
|
1443
|
+
var PopoverGlassAnchor = React.forwardRef((props, ref) => /* @__PURE__ */ jsx(PopoverPrimitive.Anchor, {
|
|
1444
|
+
"data-slot": "popover-anchor",
|
|
1445
|
+
ref,
|
|
1446
|
+
...props
|
|
1447
|
+
}));
|
|
1448
|
+
PopoverGlassAnchor.displayName = "PopoverGlassAnchor";
|
|
1411
1449
|
var PopoverGlassContent = React.forwardRef(({ className, align = "center", sideOffset = 8, showArrow = true, children, ...props }, ref) => {
|
|
1412
1450
|
const popoverStyles = {
|
|
1413
1451
|
background: "var(--popover-bg)",
|
|
@@ -1419,6 +1457,7 @@ var PopoverGlassContent = React.forwardRef(({ className, align = "center", sideO
|
|
|
1419
1457
|
const arrowStyles = { fill: "var(--popover-arrow-bg)" };
|
|
1420
1458
|
return /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsxs(PopoverPrimitive.Content, {
|
|
1421
1459
|
ref,
|
|
1460
|
+
"data-slot": "popover-content",
|
|
1422
1461
|
align,
|
|
1423
1462
|
sideOffset,
|
|
1424
1463
|
className: cn("z-50003 rounded-2xl", "animate-in fade-in-0 zoom-in-95 duration-200", "data-[side=bottom]:slide-in-from-top-2", "data-[side=top]:slide-in-from-bottom-2", "data-[side=right]:slide-in-from-left-2", "data-[side=left]:slide-in-from-right-2", "outline-none", className),
|
|
@@ -1474,6 +1513,7 @@ const SkeletonGlass = forwardRef(({ className, variant = "text", width, height,
|
|
|
1474
1513
|
};
|
|
1475
1514
|
return /* @__PURE__ */ jsx("div", {
|
|
1476
1515
|
ref,
|
|
1516
|
+
"data-slot": "skeleton",
|
|
1477
1517
|
className: cn(skeletonVariants({ variant }), className),
|
|
1478
1518
|
style: skeletonStyles,
|
|
1479
1519
|
"aria-hidden": "true",
|
|
@@ -1512,6 +1552,7 @@ const SliderGlass = forwardRef(({ className, value, defaultValue, onValueChange,
|
|
|
1512
1552
|
className: cn("w-full", className),
|
|
1513
1553
|
children: [customLabel, /* @__PURE__ */ jsxs(SliderPrimitive.Root, {
|
|
1514
1554
|
ref,
|
|
1555
|
+
"data-slot": "slider",
|
|
1515
1556
|
value,
|
|
1516
1557
|
defaultValue,
|
|
1517
1558
|
onValueChange,
|
|
@@ -1524,13 +1565,16 @@ const SliderGlass = forwardRef(({ className, value, defaultValue, onValueChange,
|
|
|
1524
1565
|
className: cn("relative flex touch-none select-none", orientation === "horizontal" ? "w-full h-8 md:h-6 items-center" : "flex-col h-full w-8 md:w-6 justify-center", disabled && "opacity-50 cursor-not-allowed", "group"),
|
|
1525
1566
|
...props,
|
|
1526
1567
|
children: [/* @__PURE__ */ jsx(SliderPrimitive.Track, {
|
|
1568
|
+
"data-slot": "slider-track",
|
|
1527
1569
|
className: cn("relative grow rounded-full", orientation === "horizontal" ? "h-2.5 md:h-2 w-full" : "w-2.5 md:w-2 h-full"),
|
|
1528
1570
|
style: trackStyles,
|
|
1529
1571
|
children: /* @__PURE__ */ jsx(SliderPrimitive.Range, {
|
|
1572
|
+
"data-slot": "slider-range",
|
|
1530
1573
|
className: cn("absolute rounded-full transition-shadow duration-150", orientation === "horizontal" ? "h-full" : "w-full", "group-hover:shadow-(--slider-fill-glow)", "group-active:shadow-(--slider-fill-glow)"),
|
|
1531
1574
|
style: rangeStyles
|
|
1532
1575
|
})
|
|
1533
1576
|
}), currentValue.map((_, index) => /* @__PURE__ */ jsx(SliderPrimitive.Thumb, {
|
|
1577
|
+
"data-slot": "slider-thumb",
|
|
1534
1578
|
className: cn("block rounded-full shadow-md transition-all duration-150", "w-6 h-6 md:w-5 md:h-5", "hover:scale-105", "focus-visible:outline-none focus-visible:shadow-(--focus-glow)", "active:scale-110", disabled && "pointer-events-none"),
|
|
1535
1579
|
style: thumbStyles,
|
|
1536
1580
|
"aria-label": label ? currentValue.length > 1 ? `${label} thumb ${index + 1}` : label : `Slider thumb ${index + 1}`
|
|
@@ -1539,117 +1583,42 @@ const SliderGlass = forwardRef(({ className, value, defaultValue, onValueChange,
|
|
|
1539
1583
|
});
|
|
1540
1584
|
});
|
|
1541
1585
|
SliderGlass.displayName = "SliderGlass";
|
|
1542
|
-
|
|
1543
|
-
|
|
1544
|
-
|
|
1545
|
-
|
|
1546
|
-
|
|
1547
|
-
};
|
|
1548
|
-
var TabsRoot = ({ value, onValueChange, children, className }) => {
|
|
1549
|
-
return /* @__PURE__ */ jsx(TabsContext.Provider, {
|
|
1550
|
-
value: {
|
|
1551
|
-
value,
|
|
1552
|
-
onValueChange
|
|
1553
|
-
},
|
|
1554
|
-
children: /* @__PURE__ */ jsx("div", {
|
|
1555
|
-
className: cn("tabs-glass-root", className),
|
|
1556
|
-
children
|
|
1557
|
-
})
|
|
1558
|
-
});
|
|
1559
|
-
};
|
|
1560
|
-
var TabsList = forwardRef(({ children, className, ...props }, ref) => {
|
|
1561
|
-
return /* @__PURE__ */ jsx("div", {
|
|
1562
|
-
ref,
|
|
1563
|
-
className: cn("inline-flex gap-0.5 md:gap-1 p-0.5 md:p-1 rounded-xl", className),
|
|
1564
|
-
style: {
|
|
1565
|
-
background: "var(--tab-container-bg)",
|
|
1566
|
-
border: "1px solid var(--tab-container-border)"
|
|
1567
|
-
},
|
|
1568
|
-
role: "tablist",
|
|
1569
|
-
...props,
|
|
1570
|
-
children
|
|
1586
|
+
function TabsRoot({ className, ...props }) {
|
|
1587
|
+
return /* @__PURE__ */ jsx(TabsPrimitive.Root, {
|
|
1588
|
+
"data-slot": "tabs",
|
|
1589
|
+
className: cn("tabs-glass-root", className),
|
|
1590
|
+
...props
|
|
1571
1591
|
});
|
|
1572
|
-
}
|
|
1592
|
+
}
|
|
1593
|
+
var TabsList = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(TabsPrimitive.List, {
|
|
1594
|
+
ref,
|
|
1595
|
+
"data-slot": "tabs-list",
|
|
1596
|
+
className: cn("inline-flex gap-0.5 md:gap-1 p-0.5 md:p-1 rounded-xl", "bg-(--tab-container-bg) border border-(--tab-container-border)", className),
|
|
1597
|
+
...props
|
|
1598
|
+
}));
|
|
1573
1599
|
TabsList.displayName = "TabsList";
|
|
1574
|
-
var TabsTrigger = forwardRef(({
|
|
1575
|
-
|
|
1576
|
-
|
|
1577
|
-
|
|
1578
|
-
|
|
1579
|
-
|
|
1580
|
-
|
|
1581
|
-
boxShadow: isFocusVisible && !disabled ? "var(--focus-glow)" : "none"
|
|
1582
|
-
};
|
|
1583
|
-
const handleKeyDown = (e) => {
|
|
1584
|
-
if (disabled) return;
|
|
1585
|
-
const tablist = e.currentTarget.closest("[role=\"tablist\"]");
|
|
1586
|
-
if (!tablist) return;
|
|
1587
|
-
const tabs = Array.from(tablist.querySelectorAll("[role=\"tab\"]:not([disabled])"));
|
|
1588
|
-
const currentIndex = tabs.indexOf(e.currentTarget);
|
|
1589
|
-
let nextIndex = currentIndex;
|
|
1590
|
-
switch (e.key) {
|
|
1591
|
-
case "ArrowRight":
|
|
1592
|
-
e.preventDefault();
|
|
1593
|
-
nextIndex = currentIndex + 1 >= tabs.length ? 0 : currentIndex + 1;
|
|
1594
|
-
break;
|
|
1595
|
-
case "ArrowLeft":
|
|
1596
|
-
e.preventDefault();
|
|
1597
|
-
nextIndex = currentIndex - 1 < 0 ? tabs.length - 1 : currentIndex - 1;
|
|
1598
|
-
break;
|
|
1599
|
-
case "Home":
|
|
1600
|
-
e.preventDefault();
|
|
1601
|
-
nextIndex = 0;
|
|
1602
|
-
break;
|
|
1603
|
-
case "End":
|
|
1604
|
-
e.preventDefault();
|
|
1605
|
-
nextIndex = tabs.length - 1;
|
|
1606
|
-
break;
|
|
1607
|
-
default: return;
|
|
1608
|
-
}
|
|
1609
|
-
const nextTab = tabs[nextIndex];
|
|
1610
|
-
if (nextTab) {
|
|
1611
|
-
nextTab.focus();
|
|
1612
|
-
const nextValue = nextTab.getAttribute("data-value");
|
|
1613
|
-
if (nextValue && onValueChange) onValueChange(nextValue);
|
|
1614
|
-
}
|
|
1615
|
-
};
|
|
1616
|
-
return /* @__PURE__ */ jsxs("button", {
|
|
1617
|
-
ref,
|
|
1618
|
-
type: "button",
|
|
1619
|
-
role: "tab",
|
|
1620
|
-
"aria-selected": isActive,
|
|
1621
|
-
disabled,
|
|
1622
|
-
"data-value": value,
|
|
1623
|
-
className: cn("relative px-2.5 py-1.5 md:px-4 md:py-2 rounded-lg text-xs md:text-sm font-medium transition-[background-color,color,opacity] duration-300", disabled && "opacity-50 cursor-not-allowed", className),
|
|
1624
|
-
style: tabStyles,
|
|
1625
|
-
onClick: () => !disabled && onValueChange?.(value),
|
|
1626
|
-
onKeyDown: handleKeyDown,
|
|
1627
|
-
onFocus: focusProps.onFocus,
|
|
1628
|
-
onBlur: focusProps.onBlur,
|
|
1629
|
-
children: [children, isActive && /* @__PURE__ */ jsx("div", {
|
|
1630
|
-
className: "absolute bottom-0 left-1/2 -translate-x-1/2 w-6 md:w-8 h-0.5 rounded-full",
|
|
1631
|
-
style: { background: "var(--tab-indicator)" }
|
|
1632
|
-
})]
|
|
1633
|
-
});
|
|
1634
|
-
});
|
|
1600
|
+
var TabsTrigger = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(TabsPrimitive.Trigger, {
|
|
1601
|
+
ref,
|
|
1602
|
+
"data-slot": "tabs-trigger",
|
|
1603
|
+
className: cn("relative px-2.5 py-1.5 md:px-4 md:py-2 rounded-lg", "text-xs md:text-sm font-medium", "transition-[background-color,color,opacity,box-shadow] duration-300", "bg-(--tab-bg) text-(--text-secondary)", "data-[state=active]:bg-(--tab-active-bg) data-[state=active]:text-(--tab-active-text)", "focus-visible:outline-none focus-visible:shadow-(--focus-glow)", "disabled:opacity-50 disabled:cursor-not-allowed", "after:absolute after:bottom-0 after:left-1/2 after:-translate-x-1/2", "after:w-6 md:after:w-8 after:h-0.5 after:rounded-full", "after:bg-(--tab-indicator)", "after:opacity-0 data-[state=active]:after:opacity-100", "after:transition-opacity after:duration-300", className),
|
|
1604
|
+
...props,
|
|
1605
|
+
children
|
|
1606
|
+
}));
|
|
1635
1607
|
TabsTrigger.displayName = "TabsTrigger";
|
|
1636
|
-
var TabsContent = ({
|
|
1637
|
-
|
|
1638
|
-
|
|
1639
|
-
|
|
1640
|
-
|
|
1641
|
-
|
|
1642
|
-
|
|
1643
|
-
className: cn("animate-in fade-in-0 duration-200", className),
|
|
1644
|
-
children
|
|
1645
|
-
});
|
|
1646
|
-
};
|
|
1608
|
+
var TabsContent = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(TabsPrimitive.Content, {
|
|
1609
|
+
ref,
|
|
1610
|
+
"data-slot": "tabs-content",
|
|
1611
|
+
className: cn("animate-in fade-in-0 duration-200 outline-none", "focus-visible:outline-none", className),
|
|
1612
|
+
...props
|
|
1613
|
+
}));
|
|
1614
|
+
TabsContent.displayName = "TabsContent";
|
|
1647
1615
|
const TabsGlass = {
|
|
1648
1616
|
Root: TabsRoot,
|
|
1649
1617
|
List: TabsList,
|
|
1650
1618
|
Trigger: TabsTrigger,
|
|
1651
1619
|
Content: TabsContent
|
|
1652
1620
|
};
|
|
1621
|
+
const Tabs = TabsRoot;
|
|
1653
1622
|
const toggleSizes = cva("relative rounded-full transition-all duration-300", {
|
|
1654
1623
|
variants: {
|
|
1655
1624
|
size: {
|
|
@@ -1712,6 +1681,7 @@ const ToggleGlass = forwardRef(({ className, size = "default", variant = "defaul
|
|
|
1712
1681
|
className: "inline-flex items-center justify-center min-h-11",
|
|
1713
1682
|
children: /* @__PURE__ */ jsx("button", {
|
|
1714
1683
|
ref,
|
|
1684
|
+
"data-slot": "toggle",
|
|
1715
1685
|
type: "button",
|
|
1716
1686
|
role: "switch",
|
|
1717
1687
|
"aria-pressed": isPressed,
|
|
@@ -2315,7 +2285,7 @@ const FlagAlertGlass = forwardRef(({ type = "warning", title, description, class
|
|
|
2315
2285
|
};
|
|
2316
2286
|
return /* @__PURE__ */ jsxs("div", {
|
|
2317
2287
|
ref,
|
|
2318
|
-
className: cn("p-2.5 md:p-3 rounded-xl border transition-all duration-300", className),
|
|
2288
|
+
className: cn("p-2.5 md:p-3 rounded-xl border transition-all duration-300 max-w-md", className),
|
|
2319
2289
|
style: alertStyles,
|
|
2320
2290
|
onMouseEnter: () => setIsHovered(true),
|
|
2321
2291
|
onMouseLeave: () => setIsHovered(false),
|
|
@@ -2505,6 +2475,7 @@ const ProgressGlass = forwardRef(({ className, size = "md", value = 0, gradient
|
|
|
2505
2475
|
};
|
|
2506
2476
|
return /* @__PURE__ */ jsxs("div", {
|
|
2507
2477
|
ref,
|
|
2478
|
+
"data-slot": "progress",
|
|
2508
2479
|
className: cn("w-full", className),
|
|
2509
2480
|
...props,
|
|
2510
2481
|
children: [showLabel && /* @__PURE__ */ jsxs("div", {
|
|
@@ -2520,6 +2491,7 @@ const ProgressGlass = forwardRef(({ className, size = "md", value = 0, gradient
|
|
|
2520
2491
|
className: cn(progressSizes({ size })),
|
|
2521
2492
|
style: trackStyles,
|
|
2522
2493
|
children: /* @__PURE__ */ jsx("div", {
|
|
2494
|
+
"data-slot": "progress-indicator",
|
|
2523
2495
|
className: "h-full rounded-full transition-all duration-700 ease-out",
|
|
2524
2496
|
style: fillStyles,
|
|
2525
2497
|
role: "progressbar",
|
|
@@ -4192,6 +4164,6 @@ const TrustScoreCardGlass = forwardRef(({ score = 72, metrics = [], className, .
|
|
|
4192
4164
|
});
|
|
4193
4165
|
});
|
|
4194
4166
|
TrustScoreCardGlass.displayName = "TrustScoreCardGlass";
|
|
4195
|
-
export {
|
|
4167
|
+
export { TabsTrigger as $, FlagAlertGlass as A, DropdownMenuGlassTrigger as At, IconButtonGlass as B, AvatarGlass as Bt, sparklineContainerVariants as C, DropdownMenuGlassRadioGroup as Ct, progressSizes as D, DropdownMenuGlassSub as Dt, ProgressGlass as E, DropdownMenuGlassShortcut as Et, SortDropdownGlass as F, CheckboxGlass as Ft, TooltipGlassSimple as G, statusSizes as Gt, TooltipGlass as H, AvatarGlassImage as Ht, SearchBoxGlass as I, ButtonGlass as It, toggleSizes as J, AlertGlassTitle as Jt, TooltipGlassTrigger as K, AlertGlass as Kt, InsightCardGlass as L, buttonGlassVariants as Lt, BaseProgressGlass as M, inputVariants as Mt, ThemeToggleGlass as N, CircularProgressGlass as Nt, ProfileAvatarGlass as O, DropdownMenuGlassSubContent as Ot, StatItemGlass as P, Checkbox as Pt, TabsList as Q, alertVariants as Qt, insightCardVariants as R, BadgeGlass as Rt, sparklineBarVariants as S, DropdownMenuGlassPortal as St, RainbowProgressGlass as T, DropdownMenuGlassSeparator as Tt, TooltipGlassContent as U, AvatarGlassSimple as Ut, ExpandableHeaderGlass as V, AvatarGlassFallback as Vt, TooltipGlassProvider as W, avatarSizes as Wt, TabsContent as X, FormFieldWrapper as Xt, Tabs as Y, InteractiveCard as Yt, TabsGlass as Z, TouchTarget as Zt, ContributionMetricsGlass as _, DropdownMenuGlassCheckboxItem as _t, HeaderBrandingGlass as a, PopoverGlassContent as at, AICardGlass as b, DropdownMenuGlassItem as bt, YearCardGlass as c, NotificationGlass as ct, TrustScoreDisplayGlass as d, modalSizes as dt, SliderGlass as et, RepositoryMetadataGlass as f, InputGlass as ft, MetricCardGlass as g, DropdownMenuGlass as gt, MetricsGridGlass as h, DropdownGlass as ht, HeaderNavGlass as i, PopoverGlassAnchor as it, StatusIndicatorGlass as j, ComboBoxGlass as jt, LanguageBarGlass as k, DropdownMenuGlassSubTrigger as kt, UserStatsLineGlass as l, notificationVariants as lt, RepositoryCardGlass as m, cardIntensity as mt, ProjectsListGlass as n, skeletonVariants as nt, FlagsSectionGlass as o, PopoverGlassLegacy as ot, RepositoryHeaderGlass as p, GlassCard as pt, ToggleGlass as q, AlertGlassDescription as qt, ProfileHeaderGlass as r, PopoverGlass as rt, CareerStatsGlass as s, PopoverGlassTrigger as st, TrustScoreCardGlass as t, SkeletonGlass as tt, UserInfoGlass as u, ModalGlass as ut, CircularMetricGlass as v, DropdownMenuGlassContent as vt, SegmentedControlGlass as w, DropdownMenuGlassRadioItem as wt, SparklineGlass as x, DropdownMenuGlassLabel as xt, CareerStatsHeaderGlass as y, DropdownMenuGlassGroup as yt, insightVariantConfig as z, badgeVariants as zt };
|
|
4196
4168
|
|
|
4197
|
-
//# sourceMappingURL=trust-score-card-glass-
|
|
4169
|
+
//# sourceMappingURL=trust-score-card-glass-BGqBcdyJ.mjs.map
|