shadcn-glass-ui 2.1.1 → 2.1.4
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 +18 -0
- package/README.md +80 -325
- package/dist/cli/index.cjs +1 -1
- package/dist/components.cjs +4 -4
- package/dist/components.js +1 -1
- package/dist/hooks.cjs +2 -2
- package/dist/index.cjs +1659 -5
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +1651 -4
- package/dist/index.js.map +1 -1
- package/dist/r/registry.json +36 -0
- package/dist/r/sidebar-context.json +35 -0
- package/dist/r/sidebar-glass.json +40 -0
- package/dist/r/sidebar-menu.json +39 -0
- package/dist/r/split-layout-accordion.json +24 -0
- package/dist/r/split-layout-context.json +21 -0
- package/dist/r/split-layout-glass.json +25 -0
- package/dist/shadcn-glass-ui.css +1 -1
- package/dist/{theme-context-BHXYJ4RE.cjs → theme-context-Y98bGvcm.cjs} +2 -2
- package/dist/{theme-context-BHXYJ4RE.cjs.map → theme-context-Y98bGvcm.cjs.map} +1 -1
- package/dist/themes.cjs +1 -1
- package/dist/{trust-score-card-glass-CGXmOIfq.cjs → trust-score-card-glass-2rjz00d_.cjs} +47 -5
- package/dist/trust-score-card-glass-2rjz00d_.cjs.map +1 -0
- package/dist/{trust-score-card-glass-L9g0qamo.js → trust-score-card-glass-zjkx4OC2.js} +3 -3
- package/dist/trust-score-card-glass-zjkx4OC2.js.map +1 -0
- package/dist/{use-focus-CeNHOiBa.cjs → use-focus-DbpBEuee.cjs} +2 -2
- package/dist/{use-focus-CeNHOiBa.cjs.map → use-focus-DbpBEuee.cjs.map} +1 -1
- package/dist/{use-wallpaper-tint-Bt2G3g1v.cjs → use-wallpaper-tint-DbawS9zh.cjs} +2 -2
- package/dist/{use-wallpaper-tint-Bt2G3g1v.cjs.map → use-wallpaper-tint-DbawS9zh.cjs.map} +1 -1
- package/dist/{utils-LYxxWvUn.cjs → utils-XlyXIhuP.cjs} +2 -2
- package/dist/{utils-LYxxWvUn.cjs.map → utils-XlyXIhuP.cjs.map} +1 -1
- package/dist/utils.cjs +1 -1
- package/docs/GETTING_STARTED.md +3 -3
- package/docs/components/SPLIT_LAYOUT_GLASS.md +607 -0
- package/package.json +1 -2
- package/dist/trust-score-card-glass-CGXmOIfq.cjs.map +0 -1
- package/dist/trust-score-card-glass-L9g0qamo.js.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-2rjz00d_.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-Y98bGvcm.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"theme-context-
|
|
1
|
+
{"version":3,"file":"theme-context-Y98bGvcm.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-Y98bGvcm.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;
|
|
@@ -27,9 +27,9 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
|
|
|
27
27
|
value: mod,
|
|
28
28
|
enumerable: true
|
|
29
29
|
}) : target, mod));
|
|
30
|
-
const require_utils = require("./utils-
|
|
31
|
-
const require_use_focus = require("./use-focus-
|
|
32
|
-
const require_theme_context = require("./theme-context-
|
|
30
|
+
const require_utils = require("./utils-XlyXIhuP.cjs");
|
|
31
|
+
const require_use_focus = require("./use-focus-DbpBEuee.cjs");
|
|
32
|
+
const require_theme_context = require("./theme-context-Y98bGvcm.cjs");
|
|
33
33
|
let react = require("react");
|
|
34
34
|
react = __toESM(react);
|
|
35
35
|
let lucide_react = require("lucide-react");
|
|
@@ -5201,7 +5201,7 @@ const DropdownGlass = react.forwardRef(({ trigger, items, align = "left", classN
|
|
|
5201
5201
|
});
|
|
5202
5202
|
});
|
|
5203
5203
|
DropdownGlass.displayName = "DropdownGlass";
|
|
5204
|
-
const cardIntensity = (0, class_variance_authority.cva)("border transition-all duration-300", {
|
|
5204
|
+
const cardIntensity = (0, class_variance_authority.cva)("border transition-all duration-300 text-[var(--text-primary)]", {
|
|
5205
5205
|
variants: {
|
|
5206
5206
|
intensity: {
|
|
5207
5207
|
subtle: "",
|
|
@@ -28233,6 +28233,12 @@ Object.defineProperty(exports, "PopoverGlassTrigger", {
|
|
|
28233
28233
|
return PopoverGlassTrigger;
|
|
28234
28234
|
}
|
|
28235
28235
|
});
|
|
28236
|
+
Object.defineProperty(exports, "Presence", {
|
|
28237
|
+
enumerable: true,
|
|
28238
|
+
get: function() {
|
|
28239
|
+
return Presence;
|
|
28240
|
+
}
|
|
28241
|
+
});
|
|
28236
28242
|
Object.defineProperty(exports, "ProfileAvatarGlass", {
|
|
28237
28243
|
enumerable: true,
|
|
28238
28244
|
get: function() {
|
|
@@ -28479,6 +28485,18 @@ Object.defineProperty(exports, "cardIntensity", {
|
|
|
28479
28485
|
return cardIntensity;
|
|
28480
28486
|
}
|
|
28481
28487
|
});
|
|
28488
|
+
Object.defineProperty(exports, "clamp", {
|
|
28489
|
+
enumerable: true,
|
|
28490
|
+
get: function() {
|
|
28491
|
+
return clamp;
|
|
28492
|
+
}
|
|
28493
|
+
});
|
|
28494
|
+
Object.defineProperty(exports, "composeEventHandlers", {
|
|
28495
|
+
enumerable: true,
|
|
28496
|
+
get: function() {
|
|
28497
|
+
return composeEventHandlers;
|
|
28498
|
+
}
|
|
28499
|
+
});
|
|
28482
28500
|
Object.defineProperty(exports, "getUniqPayload", {
|
|
28483
28501
|
enumerable: true,
|
|
28484
28502
|
get: function() {
|
|
@@ -28593,6 +28611,12 @@ Object.defineProperty(exports, "useAppSelector", {
|
|
|
28593
28611
|
return useAppSelector;
|
|
28594
28612
|
}
|
|
28595
28613
|
});
|
|
28614
|
+
Object.defineProperty(exports, "useCallbackRef", {
|
|
28615
|
+
enumerable: true,
|
|
28616
|
+
get: function() {
|
|
28617
|
+
return useCallbackRef$1;
|
|
28618
|
+
}
|
|
28619
|
+
});
|
|
28596
28620
|
Object.defineProperty(exports, "useChartHeight", {
|
|
28597
28621
|
enumerable: true,
|
|
28598
28622
|
get: function() {
|
|
@@ -28605,12 +28629,30 @@ Object.defineProperty(exports, "useChartWidth", {
|
|
|
28605
28629
|
return useChartWidth;
|
|
28606
28630
|
}
|
|
28607
28631
|
});
|
|
28632
|
+
Object.defineProperty(exports, "useComposedRefs", {
|
|
28633
|
+
enumerable: true,
|
|
28634
|
+
get: function() {
|
|
28635
|
+
return useComposedRefs;
|
|
28636
|
+
}
|
|
28637
|
+
});
|
|
28638
|
+
Object.defineProperty(exports, "useDirection", {
|
|
28639
|
+
enumerable: true,
|
|
28640
|
+
get: function() {
|
|
28641
|
+
return useDirection;
|
|
28642
|
+
}
|
|
28643
|
+
});
|
|
28608
28644
|
Object.defineProperty(exports, "useElementOffset", {
|
|
28609
28645
|
enumerable: true,
|
|
28610
28646
|
get: function() {
|
|
28611
28647
|
return useElementOffset;
|
|
28612
28648
|
}
|
|
28613
28649
|
});
|
|
28650
|
+
Object.defineProperty(exports, "useLayoutEffect2", {
|
|
28651
|
+
enumerable: true,
|
|
28652
|
+
get: function() {
|
|
28653
|
+
return useLayoutEffect2;
|
|
28654
|
+
}
|
|
28655
|
+
});
|
|
28614
28656
|
Object.defineProperty(exports, "useLegendPortal", {
|
|
28615
28657
|
enumerable: true,
|
|
28616
28658
|
get: function() {
|
|
@@ -28624,4 +28666,4 @@ Object.defineProperty(exports, "useMargin", {
|
|
|
28624
28666
|
}
|
|
28625
28667
|
});
|
|
28626
28668
|
|
|
28627
|
-
//# sourceMappingURL=trust-score-card-glass-
|
|
28669
|
+
//# sourceMappingURL=trust-score-card-glass-2rjz00d_.cjs.map
|