shadcn-glass-ui 1.0.11 → 2.0.1

package/dist/components.d.ts

@@ -1,5 +1,6 @@
 import { ButtonHTMLAttributes } from 'react';
 import { ClassProp } from 'class-variance-authority/types';
+import { default as default_2 } from 'react';
 import { FC } from 'react';
 import { ForwardRefExoticComponent } from 'react';
 import { HTMLAttributes } from 'react';
@@ -743,7 +744,7 @@ declare interface FlagsSectionGlassProps extends React.HTMLAttributes<HTMLDivEle
     readonly onToggle?: () => void;
 }
 
-declare type FlagType = "warning" | "danger";
+declare type FlagType = 'warning' | 'danger';
 
 /**
  * FormFieldWrapper component
@@ -1070,7 +1071,7 @@ declare const inputVariants: (props?: ({
  * <InteractiveCard
  *   blur="md"
  *   rounded="rounded-3xl"
- *   baseBg="var(--metric-emerald-bg)"
+ *   baseBg="var(--metric-success-bg)"
  * >
  *   <StatusCard />
  * </InteractiveCard>
@@ -1148,24 +1149,96 @@ declare interface LanguageData {
 
 export declare const MetricCardGlass: ForwardRefExoticComponent<MetricCardGlassProps & RefAttributes<HTMLDivElement>>;
 
+/**
+ * MetricCardGlass Props
+ *
+ * Follows shadcn/ui Card pattern with Glass UI extensions.
+ * Compatible with AlertGlass, BadgeGlass, ButtonGlass variant system.
+ *
+ * @example Simple usage (shadcn/ui style)
+ * ```tsx
+ * <MetricCardGlass
+ *   title="Total Revenue"
+ *   value="$45,231"
+ *   change="+12.5%"
+ *   variant="success"
+ *   icon={<DollarSign />}
+ * />
+ * ```
+ *
+ * @example With progress and sparkline (Glass UI extensions)
+ * ```tsx
+ * <MetricCardGlass
+ *   title="Completion Rate"
+ *   value="85%"
+ *   description="Project milestones"
+ *   change={{ value: 5.2, direction: 'up', period: 'vs last month' }}
+ *   variant="success"
+ *   progress={85}
+ *   sparklineData={[70, 75, 78, 80, 82, 84, 85]}
+ *   showProgress
+ *   showSparkline
+ * />
+ * ```
+ */
 declare interface MetricCardGlassProps extends React.HTMLAttributes<HTMLDivElement> {
-    readonly label: string;
-    readonly value: number;
+    /** Metric title (shadcn/ui Card: title) */
+    readonly title: string;
+    /** Display value (shadcn/ui Card: value) */
+    readonly value: string | number;
+    /** Optional description/subtitle (shadcn/ui Card: description) */
+    readonly description?: string;
+    /** Change indicator (shadcn/ui: change). Can be string "+12.5%" or detailed object */
+    readonly change?: string | number | MetricChange;
+    /** Semantic variant (follows AlertGlass, BadgeGlass pattern) */
+    readonly variant?: MetricVariant;
+    /** Icon to display */
+    readonly icon?: ReactNode;
+    /** Data for sparkline visualization */
+    readonly sparklineData?: readonly number[];
+    /** Show sparkline chart */
+    readonly showSparkline?: boolean;
+    /** Show progress bar (requires progress prop) */
+    readonly showProgress?: boolean;
+    /** Progress percentage (0-100, separate from display value) */
+    readonly progress?: number;
+    /** @deprecated Use `title` instead. Will be removed in v2.0 */
+    readonly label?: string;
+    /** @deprecated Use `variant` instead. Mapping: emerald→success, amber→warning, blue→default, red→destructive. Will be removed in v2.0 */
     readonly color?: MetricColor;
+    /** @deprecated Format value before passing. Use `value` prop directly. Will be removed in v2.0 */
+    readonly valueFormatter?: (value: number) => string;
+    /** @deprecated Use `description` instead. Will be removed in v2.0 */
+    readonly valueSuffix?: string;
+    /** @deprecated Use `change` instead. Will be removed in v2.0 */
+    readonly trend?: MetricTrend;
+}
+
+/**
+ * Detailed change object with trend information
+ */
+declare interface MetricChange {
+    /** Change value (e.g., 12.5 for +12.5%) */
+    readonly value: number;
+    /** Trend direction (auto-detected from value if not provided) */
+    readonly direction?: TrendDirection;
+    /** Optional period label (e.g., "vs last month") */
+    readonly period?: string;
 }
 
-declare type MetricColor = "emerald" | "amber" | "blue" | "red";
+/** @deprecated Use MetricVariant instead */
+declare type MetricColor = 'emerald' | 'amber' | 'blue' | 'red';
 
 declare interface MetricData {
-    readonly label: string;
-    readonly value: number;
-    readonly color: MetricColor;
+    readonly title: string;
+    readonly value: string | number;
+    readonly variant: MetricVariant;
 }
 
 declare interface MetricData_2 {
-    readonly label: string;
-    readonly value: number;
-    readonly color: MetricColor;
+    readonly title: string;
+    readonly value: string | number;
+    readonly variant: MetricVariant;
 }
 
 export declare const MetricsGridGlass: ForwardRefExoticComponent<MetricsGridGlassProps & RefAttributes<HTMLDivElement>>;
@@ -1179,6 +1252,23 @@ declare interface MetricsGridGlassProps extends HTMLAttributes<HTMLDivElement> {
     readonly gap?: 'sm' | 'md' | 'lg';
 }
 
+/** @deprecated Use MetricChange instead */
+declare interface MetricTrend {
+    readonly value: number;
+    readonly direction: TrendDirection;
+    readonly label?: string;
+}
+
+/**
+ * Metric variant system (following AlertGlass, BadgeGlass pattern)
+ * - default: Blue (primary metric)
+ * - secondary: Gray (neutral metric)
+ * - success: Green (positive metric)
+ * - warning: Yellow (caution metric)
+ * - destructive: Red (negative metric)
+ */
+declare type MetricVariant = 'default' | 'secondary' | 'success' | 'warning' | 'destructive';
+
 declare interface ModalBodyProps {
     children: ReactNode;
     className?: string;
@@ -1227,15 +1317,15 @@ declare interface ModalFooterProps {
  * ```
  */
 export declare const ModalGlass: {
-    Root: FC<ModalRootProps>;
-    Overlay: FC<ModalOverlayProps>;
-    Content: ForwardRefExoticComponent<ModalContentProps & RefAttributes<HTMLDivElement>>;
-    Header: FC<ModalHeaderProps>;
-    Body: FC<ModalBodyProps>;
-    Footer: FC<ModalFooterProps>;
-    Title: FC<ModalTitleProps>;
-    Description: FC<ModalDescriptionProps>;
-    Close: FC<ModalCloseProps>;
+    Root: default_2.FC<ModalRootProps>;
+    Overlay: default_2.FC<ModalOverlayProps>;
+    Content: default_2.ForwardRefExoticComponent<ModalContentProps & default_2.RefAttributes<HTMLDivElement>>;
+    Header: default_2.FC<ModalHeaderProps>;
+    Body: default_2.FC<ModalBodyProps>;
+    Footer: default_2.FC<ModalFooterProps>;
+    Title: default_2.FC<ModalTitleProps>;
+    Description: default_2.FC<ModalDescriptionProps>;
+    Close: default_2.FC<ModalCloseProps>;
 };
 
 declare interface ModalHeaderProps {
@@ -1341,7 +1431,7 @@ declare interface ModalOverlayProps {
  * </ModalGlass.Root>
  * ```
  */
-declare interface ModalRootProps extends React.HTMLAttributes<HTMLDivElement> {
+declare interface ModalRootProps extends default_2.HTMLAttributes<HTMLDivElement> {
     /** Open state */
     open: boolean;
     /** Callback when open state changes */
@@ -1573,7 +1663,7 @@ declare interface SearchBoxGlassProps extends Omit<InputHTMLAttributes<HTMLInput
 
 export declare const SegmentedControlGlass: ForwardRefExoticComponent<SegmentedControlGlassProps & RefAttributes<HTMLDivElement>>;
 
-declare interface SegmentedControlGlassProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
+declare interface SegmentedControlGlassProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
     readonly options: readonly SegmentOption[];
     readonly value: string;
     readonly onChange?: (value: string) => void;
@@ -1963,6 +2053,8 @@ declare interface TouchTargetProps extends HTMLAttributes<HTMLDivElement> {
     center?: boolean;
 }
 
+declare type TrendDirection = 'up' | 'down' | 'neutral';
+
 export declare const TrustScoreCardGlass: ForwardRefExoticComponent<TrustScoreCardGlassProps & RefAttributes<HTMLDivElement>>;
 
 declare interface TrustScoreCardGlassProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -2017,17 +2109,56 @@ declare interface UserStatsLineGlassProps extends HTMLAttributes<HTMLDivElement>
 
 export declare const YearCardGlass: ForwardRefExoticComponent<YearCardGlassProps & RefAttributes<HTMLDivElement>>;
 
+declare interface YearCardGlassInsight {
+    readonly variant?: 'default' | 'tip' | 'highlight' | 'warning' | 'stat' | 'growth' | 'decline';
+    readonly emoji?: string;
+    readonly text: string;
+    readonly detail?: string;
+}
+
 declare interface YearCardGlassProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Year to display (string or number) */
     readonly year: string | number;
+    /** Emoji for the badge */
     readonly emoji: string;
+    /** Label for the badge (e.g., "Peak Year") */
     readonly label: string;
+    /** Primary metric value (e.g., "629 commits") */
     readonly commits: string;
+    /** Progress percentage (0-100) */
     readonly progress: number;
+    /** Whether the card is expanded to show details */
     readonly isExpanded?: boolean;
+    /** Progress bar gradient color */
     readonly gradient?: ProgressGradient;
+    /** Number of PRs (shown in expanded view) */
     readonly prs?: number;
+    /** Number of repos (shown in expanded view) */
     readonly repos?: number;
+    /** Callback when "Show repos" button is clicked */
     readonly onShowYear?: () => void;
+    /** Monthly activity data for sparkline */
+    readonly sparklineData?: readonly number[];
+    /** Labels for sparkline (e.g., month names) */
+    readonly sparklineLabels?: readonly string[];
+    /** Insights to display in expanded view */
+    readonly insights?: readonly YearCardGlassInsight[];
+    /** Custom stats for expanded view (replaces default commits/prs/repos grid) */
+    readonly stats?: readonly YearCardGlassStat[];
+    /** Custom action button text */
+    readonly actionLabel?: string;
+    /** Show sparkline in collapsed view */
+    readonly showSparklineCollapsed?: boolean;
+    /** Custom value formatter for commits display */
+    readonly valueFormatter?: (commits: string) => string;
+    /** Additional content for expanded section */
+    readonly children?: ReactNode;
+}
+
+declare interface YearCardGlassStat {
+    readonly label: string;
+    readonly value: string | number;
+    readonly icon?: ReactNode;
 }
 
 declare interface YearData {

package/dist/components.js

@@ -1,5 +1,5 @@
-import "./utils-CGCOTvxT.js";
-import { $ as ComboBoxGlass, A as ThemeToggleGlass, B as TabsGlass, C as ProgressGlass, D as FlagAlertGlass, E as LanguageBarGlass, F as ExpandableHeaderGlass, G as NotificationGlass, H as SkeletonGlass, I as TooltipGlass, M as SortDropdownGlass, N as SearchBoxGlass, O as StatusIndicatorGlass, P as IconButtonGlass, Q as DropdownGlass, R as ToggleGlass, S as RainbowProgressGlass, T as ProfileAvatarGlass, V as SliderGlass, W as PopoverGlass, X as GlassCard, Y as InputGlass, _ as ContributionMetricsGlass, a as HeaderBrandingGlass, at as BadgeGlass, b as AICardGlass, c as YearCardGlass, d as TrustScoreDisplayGlass, dt as InteractiveCard, f as RepositoryMetadataGlass, ft as FormFieldWrapper, g as MetricCardGlass, h as MetricsGridGlass, i as HeaderNavGlass, j as StatItemGlass, k as BaseProgressGlass, l as UserStatsLineGlass, m as RepositoryCardGlass, n as ProjectsListGlass, nt as CheckboxGlass, o as FlagsSectionGlass, p as RepositoryHeaderGlass, pt as TouchTarget, q as ModalGlass, r as ProfileHeaderGlass, rt as ButtonGlass, s as CareerStatsGlass, st as AvatarGlass, t as TrustScoreCardGlass, tt as CircularProgressGlass, u as UserInfoGlass, ut as AlertGlass, v as CircularMetricGlass, x as SegmentedControlGlass, y as CareerStatsHeaderGlass } from "./trust-score-card-glass-CowcDyxH.js";
+import { $ as BaseProgressGlass, At as ButtonGlass, Bt as TouchTarget, Ct as GlassCard, Et as ComboBoxGlass, G as SegmentedControlGlass, K as RainbowProgressGlass, Lt as AlertGlass, Mt as BadgeGlass, Ot as CircularProgressGlass, Pt as AvatarGlass, Q as StatusIndicatorGlass, Rt as InteractiveCard, St as InputGlass, Tt as DropdownGlass, X as LanguageBarGlass, Y as ProfileAvatarGlass, Z as FlagAlertGlass, _ as ContributionMetricsGlass, _t as PopoverGlass, a as HeaderBrandingGlass, b as AICardGlass, bt as ModalGlass, c as YearCardGlass, ct as ExpandableHeaderGlass, d as TrustScoreDisplayGlass, dt as ToggleGlass, et as ThemeToggleGlass, f as RepositoryMetadataGlass, g as MetricCardGlass, h as MetricsGridGlass, ht as SkeletonGlass, i as HeaderNavGlass, kt as CheckboxGlass, l as UserStatsLineGlass, lt as TooltipGlass, m as RepositoryCardGlass, mt as SliderGlass, n as ProjectsListGlass, nt as SortDropdownGlass, o as FlagsSectionGlass, p as RepositoryHeaderGlass, pt as TabsGlass, q as ProgressGlass, r as ProfileHeaderGlass, rt as SearchBoxGlass, s as CareerStatsGlass, st as IconButtonGlass, t as TrustScoreCardGlass, tt as StatItemGlass, u as UserInfoGlass, v as CircularMetricGlass, vt as NotificationGlass, y as CareerStatsHeaderGlass, zt as FormFieldWrapper } from "./trust-score-card-glass-BcZbul0P.js";
+import "./utils-CcyeqpKQ.js";
 import "./use-focus-CX0TJJIj.js";
 import "./theme-context-BZoCplcU.js";
 export { AICardGlass, AlertGlass, AvatarGlass, BadgeGlass, BaseProgressGlass, ButtonGlass, CareerStatsGlass, CareerStatsHeaderGlass, CheckboxGlass, CircularMetricGlass, CircularProgressGlass, ComboBoxGlass, ContributionMetricsGlass, DropdownGlass, ExpandableHeaderGlass, FlagAlertGlass, FlagsSectionGlass, FormFieldWrapper, GlassCard, HeaderBrandingGlass, HeaderNavGlass, IconButtonGlass, InputGlass, InteractiveCard, LanguageBarGlass, MetricCardGlass, MetricsGridGlass, ModalGlass, NotificationGlass, PopoverGlass, ProfileAvatarGlass, ProfileHeaderGlass, ProgressGlass, ProjectsListGlass, RainbowProgressGlass, RepositoryCardGlass, RepositoryHeaderGlass, RepositoryMetadataGlass, SearchBoxGlass, SegmentedControlGlass, SkeletonGlass, SliderGlass, SortDropdownGlass, StatItemGlass, StatusIndicatorGlass, TabsGlass, ThemeToggleGlass, ToggleGlass, TooltipGlass, TouchTarget, TrustScoreCardGlass, TrustScoreDisplayGlass, UserInfoGlass, UserStatsLineGlass, YearCardGlass };

package/dist/hooks.cjs

@@ -1,5 +1,5 @@
-const require_use_focus = require("./use-focus-BbpE2qGq.cjs");
-const require_use_wallpaper_tint = require("./use-wallpaper-tint-CIqtoETa.cjs");
+const require_use_focus = require("./use-focus-ZE8ozmZE.cjs");
+const require_use_wallpaper_tint = require("./use-wallpaper-tint-BuS80tbN.cjs");
 exports.useFocus = require_use_focus.useFocus;
 exports.useHover = require_use_focus.useHover;
 exports.useResponsive = require_use_wallpaper_tint.useResponsive;