aura-glass/dist/esm/components/interactive/GlassThemeDemo.js

A comprehensive glassmorphism design system for React applications with 142+ production-ready components

'use client';
import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
import { forwardRef, useState } from 'react';
import { cn } from '../../lib/utilsComprehensive.js';
import '../../primitives/GlassCore.js';
import '../../primitives/glass/GlassAdvanced.js';
import { OptimizedGlassCore } from '../../primitives/OptimizedGlassCore.js';
import '../../primitives/glass/OptimizedGlassAdvanced.js';
import '../../primitives/MotionNative.js';
import '../../primitives/motion/MotionFramer.js';
import { useReducedMotion } from '../../hooks/useReducedMotion.js';
import { GlassAlert } from '../data-display/GlassAlert.js';
import { GlassAvatar } from '../data-display/GlassAvatar.js';
import { GlassBadge } from '../data-display/GlassBadge.js';
import { Box } from '../layout/Box.js';
import { GlassButton } from '../button/GlassButton.js';
import '../button/GlassFab.js';
import '../button/GlassMagneticButton.js';
import { GlassCard } from '../card/GlassCard.js';
import { GlassCheckbox } from '../input/GlassCheckbox.js';
import { GlassMetricChip } from '../data-display/GlassMetricChip.js';
import { GlassProgress } from '../data-display/GlassProgress.js';
import { GlassRadioGroup } from '../input/GlassRadioGroup.js';
import { GlassSelect } from '../input/GlassSelect.js';
import { GlassSlider } from '../input/GlassSlider.js';
import { GlassSwitch } from '../input/GlassSwitch.js';
import { GlassTabs, GlassTabsList, GlassTabsTrigger, GlassTabsContent } from '../navigation/GlassTabs.js';
import { GlassInput } from '../input/GlassInput.js';
import { Typography } from '../data-display/Typography.js';
import { GlassThemeSwitcher } from './GlassThemeSwitcher.js';
import { CursorGlow } from './CursorGlow.js';

// Helper to map glass intensity to elevation level
const mapIntensityToElevation = intensity => {
  if (intensity <= 0.3) return "level1";
  if (intensity <= 0.6) return "level2";
  if (intensity <= 0.8) return "level3";
  return "level4";
};
// Categories of components to showcase
const COMPONENT_CATEGORIES = {
  inputs: "Input Components",
  feedback: "Feedback Components",
  layout: "Layout Components",
  navigation: "Navigation Components",
  display: "Display Components"
};
/**
 * GlassThemeDemo Component
 *
 * A comprehensive theme demo component to showcase themed Glass UI components.
 * Now optimized with OptimizedGlass architecture for better performance.
 */
const GlassThemeDemo = /*#__PURE__*/forwardRef(({
  title = "Glass UI Theme Demo",
  description = "Explore different theme options and see how components adapt to theme changes.",
  showThemeSwitcher = true,
  showExamples = true,
  customExamples,
  glassIntensity = 0.7,
  className,
  style,
  header,
  footer,
  showPerformanceMetrics = false,
  useTabs = true,
  showCode = false,
  interactive = true,
  includedCategories = Object.keys(COMPONENT_CATEGORIES),
  minimal = false,
  animation,
  ...rest
}, ref) => {
  const prefersReducedMotion = useReducedMotion();
  useState(0);
  // Map glass intensity to elevation level
  const elevation = mapIntensityToElevation(glassIntensity);
  // Example components by category
  const categoryExamples = {
    inputs: jsxs("div", {
      className: 'glass-grid glass-grid-cols-1 md:grid-cols-2 lg:grid-cols-3 glass-gap-6 glass-mt-4',
      children: [jsxs(GlassCard, {
        className: cn("p-5 h-full flex flex-col", "transition-all duration-200", !prefersReducedMotion && "hover:scale-[1.02]"),
        children: [jsx(Typography, {
          variant: "h3",
          className: 'mb-4 font-semibold',
          children: "Button"
        }), jsxs(Box, {
          style: {
            display: "flex",
            flexDirection: "column",
            gap: "8px"
          },
          children: [jsx(GlassButton, {
            variant: "primary",
            children: "Primary"
          }), jsx(GlassButton, {
            variant: "outline",
            children: "Outline"
          }), jsx(GlassButton, {
            variant: "ghost",
            children: "Ghost"
          })]
        }), showCode && jsx("pre", {
          className: 'glass-surface-dark/10 glass-radius-md glass-p-3 font-mono glass-text-sm overflow-auto glass-mt-4',
          children: `<Button variant="contained">Contained</Button>
<Button variant="outlined">Outlined</Button>
<Button variant="text">Text</Button>`
        })]
      }), jsxs(GlassCard, {
        className: cn("p-5 h-full flex flex-col", "transition-all duration-200", !prefersReducedMotion && "hover:scale-[1.02]"),
        children: [jsx(Typography, {
          variant: "h3",
          className: 'mb-4 font-semibold',
          children: "Text Field"
        }), jsxs(Box, {
          style: {
            display: "flex",
            flexDirection: "column",
            gap: "8px"
          },
          children: [jsx(GlassInput, {
            placeholder: "Standard"
          }), jsx(GlassInput, {
            placeholder: "With placeholder"
          }), jsx(GlassInput, {
            placeholder: "Disabled",
            disabled: true
          })]
        }), showCode && jsx("pre", {
          className: 'glass-surface-dark/10 glass-radius-md glass-p-3 font-mono glass-text-sm overflow-auto glass-mt-4',
          children: `<TextField label="Standard" />
<TextField label="With placeholder" placeholder="Type here..." />
<TextField label="Disabled" disabled />`
        })]
      }), jsxs(GlassCard, {
        className: cn("p-5 h-full flex flex-col", "transition-all duration-200", !prefersReducedMotion && "hover:scale-[1.02]"),
        children: [jsx(Typography, {
          variant: "h3",
          className: 'mb-4 font-semibold',
          children: "Select"
        }), jsx(GlassSelect, {
          placeholder: "Select Option",
          options: [{
            value: "option1",
            label: "Option 1"
          }, {
            value: "option2",
            label: "Option 2"
          }, {
            value: "option3",
            label: "Option 3"
          }]
        }), showCode && jsx("pre", {
          className: 'glass-surface-dark/10 glass-radius-md glass-p-3 font-mono glass-text-sm overflow-auto glass-mt-4',
          children: `<Select
  label="Select Option"
  options={[
    { value: 'option1', label: 'Option 1' },
    { value: 'option2', label: 'Option 2' },
    { value: 'option3', label: 'Option 3' },
  ]}
/>`
        })]
      }), jsxs(GlassCard, {
        className: cn("p-5 h-full flex flex-col", "transition-all duration-200", !prefersReducedMotion && "hover:scale-[1.02]"),
        children: [jsx(Typography, {
          variant: "h3",
          className: 'mb-4 font-semibold',
          children: "Checkbox & Radio"
        }), jsxs(Box, {
          style: {
            display: "flex",
            flexDirection: "column",
            gap: "8px"
          },
          children: [jsx(GlassCheckbox, {
            label: "Checkbox Option"
          }), jsx(GlassRadioGroup, {
            "aria-label": "Radio option group",
            name: "theme-demo-radio",
            options: [{
              value: "radio1",
              label: "Radio Option"
            }]
          }), jsx(GlassSwitch, {
            label: "Switch Option"
          })]
        }), showCode && jsx("pre", {
          className: 'glass-surface-dark/10 glass-radius-md glass-p-3 font-mono glass-text-sm overflow-auto glass-mt-4',
          children: `<Checkbox label="Checkbox Option" />
<Radio label="Radio Option" name="radio-group" />
<Switch label="Switch Option" />`
        })]
      }), jsxs(GlassCard, {
        className: cn("p-5 h-full flex flex-col", "transition-all duration-200", !prefersReducedMotion && "hover:scale-[1.02]"),
        children: [jsx(Typography, {
          variant: "h3",
          className: 'mb-4 font-semibold',
          children: "Slider"
        }), jsx(GlassSlider, {
          defaultValue: 50,
          "aria-label": "Demo slider"
        }), showCode && jsx("pre", {
          className: 'glass-surface-dark/10 glass-radius-md glass-p-3 font-mono glass-text-sm overflow-auto glass-mt-4',
          children: `<Slider defaultValue={50} aria-label="Slider" />`
        })]
      })]
    }),
    feedback: jsxs("div", {
      className: 'glass-grid glass-grid-cols-1 md:grid-cols-2 lg:grid-cols-3 glass-gap-6 glass-mt-4',
      children: [jsxs(GlassCard, {
        className: cn("p-5 h-full flex flex-col", "transition-all duration-200", !prefersReducedMotion && "hover:scale-[1.02]"),
        children: [jsx(Typography, {
          variant: "h3",
          className: 'mb-4 font-semibold',
          children: "Alert"
        }), jsxs(Box, {
          style: {
            display: "flex",
            flexDirection: "column",
            gap: "8px"
          },
          children: [jsx(GlassAlert, {
            variant: "info",
            children: "Info message"
          }), jsx(GlassAlert, {
            variant: "success",
            children: "Success message"
          }), jsx(GlassAlert, {
            variant: "warning",
            children: "Warning message"
          }), jsx(GlassAlert, {
            variant: "error",
            children: "Error message"
          })]
        }), showCode && jsx("pre", {
          className: 'glass-surface-dark/10 glass-radius-md glass-p-3 font-mono glass-text-sm overflow-auto glass-mt-4',
          children: `<Alert severity="info">Info message</Alert>
<Alert severity="success">Success message</Alert>
<Alert severity="warning">Warning message</Alert>
<Alert severity="error">Error message</Alert>`
        })]
      }), jsxs(GlassCard, {
        className: cn("p-5 h-full flex flex-col", "transition-all duration-200", !prefersReducedMotion && "hover:scale-[1.02]"),
        children: [jsx(Typography, {
          variant: "h3",
          className: 'mb-4 font-semibold',
          children: "Progress"
        }), jsxs(Box, {
          style: {
            display: "flex",
            flexDirection: "column",
            gap: "16px"
          },
          children: [jsx(GlassProgress, {
            variant: "primary",
            value: 75
          }), jsx(GlassProgress, {
            variant: "gradient",
            indeterminate: true
          })]
        }), showCode && jsx("pre", {
          className: 'glass-surface-dark/10 glass-radius-md glass-p-3 font-mono glass-text-sm overflow-auto glass-mt-4',
          children: `<Progress variant="determinate" value={75} />
<Progress variant="indeterminate" />`
        })]
      }), jsxs(GlassCard, {
        className: cn("p-5 h-full flex flex-col", "transition-all duration-200", !prefersReducedMotion && "hover:scale-[1.02]"),
        children: [jsx(Typography, {
          variant: "h3",
          className: 'mb-4 font-semibold',
          children: "Badge"
        }), jsxs(Box, {
          style: {
            display: "flex",
            gap: "16px"
          },
          children: [jsx(GlassBadge, {
            content: "4",
            children: jsx(GlassButton, {
              children: "Messages"
            })
          }), jsx(GlassBadge, {
            content: "New",
            variant: "destructive",
            children: jsx(GlassButton, {
              children: "Updates"
            })
          })]
        }), showCode && jsx("pre", {
          className: 'glass-surface-dark/10 glass-radius-md glass-p-3 font-mono glass-text-sm overflow-auto glass-mt-4',
          children: `<Badge content={4}>
  <Button>Messages</Button>
</Badge>
<Badge content="New" color="error">
  <Button>Updates</Button>
</Badge>`
        })]
      })]
    }),
    layout: jsxs("div", {
      className: 'glass-grid glass-grid-cols-1 md:grid-cols-2 lg:grid-cols-3 glass-gap-6 glass-mt-4',
      children: [jsxs(GlassCard, {
        className: cn("p-5 h-full flex flex-col", "transition-all duration-200", !prefersReducedMotion && "hover:scale-[1.02]"),
        children: [jsx(Typography, {
          variant: "h3",
          className: 'mb-4 font-semibold',
          children: "Card"
        }), jsx(GlassCard, {
          children: jsxs(Box, {
            style: {
              padding: "16px"
            },
            children: [jsx(Typography, {
              variant: "h4",
              children: "Card Title"
            }), jsx(Typography, {
              variant: "p",
              children: "Card content with text"
            }), jsx(Box, {
              style: {
                marginTop: "16px"
              },
              children: jsx(GlassButton, {
                size: "sm",
                children: "Action"
              })
            })]
          })
        }), showCode && jsx("pre", {
          className: 'glass-surface-dark/10 glass-radius-md glass-p-3 font-mono glass-text-sm overflow-auto glass-mt-4',
          children: `<Card>
  <Box p={2}>
    <Typography variant="h3">Card Title</Typography>
    <Typography variant="body2">Card content with text</Typography>
    <Box mt={2}>
      <Button size="small">Action</Button>
    </Box>
  </Box>
</Card>`
        })]
      }), jsxs(GlassCard, {
        className: cn("p-5 h-full flex flex-col", "transition-all duration-200", !prefersReducedMotion && "hover:scale-[1.02]"),
        children: [jsx(Typography, {
          variant: "h3",
          className: 'mb-4 font-semibold',
          children: "Paper Card"
        }), jsx(GlassCard, {
          children: jsx(Box, {
            style: {
              padding: "16px"
            },
            children: jsx(Typography, {
              children: "Paper Component"
            })
          })
        }), showCode && jsx("pre", {
          className: 'glass-surface-dark/10 glass-radius-md glass-p-3 font-mono glass-text-sm overflow-auto glass-mt-4',
          children: `<Paper elevation={'level2'}>
  <Box p={2}>
    <Typography>Paper Component</Typography>
  </Box>
</Paper>`
        })]
      }), jsxs(GlassCard, {
        className: cn("p-5 h-full flex flex-col", "transition-all duration-200", !prefersReducedMotion && "hover:scale-[1.02]"),
        children: [jsx(Typography, {
          variant: "h3",
          className: 'mb-4 font-semibold',
          children: "Box Layout"
        }), jsxs(Box, {
          children: [jsx(Typography, {
            children: "Above divider"
          }), jsx(Box, {
            style: {
              marginTop: "16px",
              marginBottom: "16px",
              borderTop: "1px solid rgba(var(--glass-color-black) / var(--glass-opacity-10))"
            }
          }), jsx(Typography, {
            children: "Below divider"
          })]
        }), showCode && jsx("pre", {
          className: 'glass-surface-dark/10 glass-radius-md glass-p-3 font-mono glass-text-sm overflow-auto glass-mt-4',
          children: `<Typography>Above divider</Typography>
<Divider style={{ marginTop: '16px', marginBottom: '16px' }} />
<Typography>Below divider</Typography>`
        })]
      })]
    }),
    navigation: jsx("div", {
      className: 'glass-grid glass-grid-cols-1 md:grid-cols-2 lg:grid-cols-3 glass-gap-6 glass-mt-4',
      children: jsxs(GlassCard, {
        className: cn("p-5 h-full flex flex-col", "transition-all duration-200", !prefersReducedMotion && "hover:scale-[1.02]"),
        children: [jsx(Typography, {
          variant: "h3",
          className: 'mb-4 font-semibold',
          children: "Tabs"
        }), jsxs(GlassTabs, {
          defaultValue: "tab1",
          children: [jsxs(GlassTabsList, {
            children: [jsx(GlassTabsTrigger, {
              value: "tab1",
              children: "Tab 1"
            }), jsx(GlassTabsTrigger, {
              value: "tab2",
              children: "Tab 2"
            }), jsx(GlassTabsTrigger, {
              value: "tab3",
              children: "Tab 3"
            })]
          }), jsx(GlassTabsContent, {
            value: "tab1",
            children: "Tab 1 Content"
          }), jsx(GlassTabsContent, {
            value: "tab2",
            children: "Tab 2 Content"
          }), jsx(GlassTabsContent, {
            value: "tab3",
            children: "Tab 3 Content"
          })]
        }), showCode && jsx("pre", {
          className: 'glass-surface-dark/10 glass-radius-md glass-p-3 font-mono glass-text-sm overflow-auto glass-mt-4',
          children: `<Tabs value={0}>
   <TabPanel value={0} index={0}>Tab 1 Content</TabPanel>
   <TabPanel value={0} index={1}>Tab 2 Content</TabPanel>
   <TabPanel value={0} index={2}>Tab 3 Content</TabPanel>
</Tabs>`
        })]
      })
    }),
    display: jsxs("div", {
      className: 'glass-grid glass-grid-cols-1 md:grid-cols-2 lg:grid-cols-3 glass-gap-6 glass-mt-4',
      children: [jsxs(GlassCard, {
        className: cn("p-5 h-full flex flex-col", "transition-all duration-200", !prefersReducedMotion && "hover:scale-[1.02]"),
        children: [jsx(Typography, {
          variant: "h3",
          className: 'mb-4 font-semibold',
          children: "Typography"
        }), jsxs(Box, {
          style: {
            display: "flex",
            flexDirection: "column",
            gap: "8px"
          },
          children: [jsx(Typography, {
            variant: "h3",
            children: "Heading 3"
          }), jsx(Typography, {
            variant: "h5",
            children: "Heading 5"
          }), jsx(Typography, {
            variant: "h3",
            children: "Subtitle 1"
          }), jsx(Typography, {
            variant: "p",
            children: "Body 1 text"
          }), jsx(Typography, {
            variant: "span",
            children: "Body 2 text"
          }), jsx(Typography, {
            variant: "p",
            children: "Caption text"
          })]
        }), showCode && jsx("pre", {
          className: 'glass-surface-dark/10 glass-radius-md glass-p-3 font-mono glass-text-sm overflow-auto glass-mt-4',
          children: `<Typography variant="h3">Heading 3</Typography>
<Typography variant="h5">Heading 5</Typography>
<Typography variant="subtitle1">Subtitle 1</Typography>
<Typography variant="body1">Body 1 text</Typography>
<Typography variant="body2">Body 2 text</Typography>
<Typography variant="caption">Caption text</Typography>`
        })]
      }), jsxs(GlassCard, {
        className: cn("p-5 h-full flex flex-col", "transition-all duration-200", !prefersReducedMotion && "hover:scale-[1.02]"),
        children: [jsx(Typography, {
          variant: "h3",
          className: 'mb-4 font-semibold',
          children: "Chip"
        }), jsxs(Box, {
          style: {
            display: "flex",
            gap: "8px",
            flexWrap: "wrap"
          },
          children: [jsx(GlassMetricChip, {
            label: "Basic",
            value: "10"
          }), jsx(GlassMetricChip, {
            label: "Success",
            value: "5",
            intent: "success"
          }), jsx(GlassMetricChip, {
            label: "Warning",
            value: "3",
            intent: "warning"
          }), jsx(GlassMetricChip, {
            label: "Danger",
            value: "1",
            intent: "danger"
          })]
        }), showCode && jsx("pre", {
          className: 'glass-surface-dark/10 glass-radius-md glass-p-3 font-mono glass-text-sm overflow-auto glass-mt-4',
          children: `<Chip label="Basic" />
<Chip label="Clickable" onClick={(e) => {}} />
<Chip label="Deletable" onDelete={() => {}} />
<Chip label="With Avatar">`
        })]
      }), jsxs(GlassCard, {
        className: cn("p-5 h-full flex flex-col", "transition-all duration-200", !prefersReducedMotion && "hover:scale-[1.02]"),
        children: [jsx(Typography, {
          variant: "h3",
          className: 'mb-4 font-semibold',
          children: "Avatar"
        }), jsxs(Box, {
          style: {
            display: "flex",
            gap: "8px"
          },
          children: [jsx(GlassAvatar, {
            children: "A"
          }), jsx(GlassAvatar, {
            children: "B"
          }), jsx(GlassAvatar, {
            alt: "User"
          })]
        }), showCode && jsx("pre", {
          className: 'glass-surface-dark/10 glass-radius-md glass-p-3 font-mono glass-text-sm overflow-auto glass-mt-4',
          children: `<Avatar>A</Avatar>
<Avatar color="primary">B</Avatar>
<Avatar alt="User" />`
        })]
      })]
    })
  };
  // Filter categories based on includedCategories prop
  const filteredCategories = Object.entries(COMPONENT_CATEGORIES).filter(([key]) => includedCategories.includes(key)).map(([key, label]) => ({
    key,
    label
  }));
  return jsxs(OptimizedGlassCore, {
    ref: ref,
    elevation: elevation,
    tier: "high",
    className: cn("flex flex-col glass-gap-6 w-full glass-radius-xl", minimal ? "glass-p-4" : "p-8", "relative overflow-hidden", className),
    style: style,
    ...rest,
    children: [jsx("div", {
      style: {
        position: "absolute",
        inset: 0,
        pointerEvents: "none"
      },
      "aria-hidden": true,
      children: jsx(CursorGlow, {
        global: false,
        size: 280,
        opacity: 0.14,
        intensity: 0.6
      })
    }), jsx("header", {
      className: 'mb-4',
      children: header || jsxs(Fragment, {
        children: [jsx(Typography, {
          variant: "h4",
          style: {
            marginBottom: "8px"
          },
          children: title
        }), typeof description === "string" ? jsx(Typography, {
          variant: "p",
          children: description
        }) : description]
      })
    }), showThemeSwitcher && jsx("section", {
      className: 'mt-6',
      children: jsx(GlassThemeSwitcher, {
        compact: minimal,
        themes: []
      })
    }), showExamples && jsx("section", {
      className: 'mt-6',
      children: useTabs && filteredCategories.length > 1 ? jsx(Fragment, {
        children: jsxs(GlassTabs, {
          defaultValue: filteredCategories[0]?.key,
          children: [jsx(GlassTabsList, {
            children: filteredCategories.map(({
              key,
              label
            }) => jsx(GlassTabsTrigger, {
              value: key,
              children: label
            }, key))
          }), filteredCategories.map(({
            key,
            label
          }) => jsx(GlassTabsContent, {
            value: key,
            children: categoryExamples[key]
          }, key))]
        })
      }) :
      // Show all categories without tabs
      jsx(Fragment, {
        children: filteredCategories.map(({
          key,
          label
        }) => jsxs(Box, {
          style: {
            marginTop: "12px",
            marginBottom: "8px"
          },
          children: [jsx(Typography, {
            variant: "h5",
            style: {
              marginBottom: "16px"
            },
            children: label
          }), categoryExamples[key]]
        }, key))
      })
    }), customExamples && jsxs("section", {
      className: 'mt-6',
      children: [jsx(Typography, {
        variant: "h5",
        style: {
          marginBottom: "16px"
        },
        children: "Custom Examples"
      }), customExamples]
    }), showPerformanceMetrics && jsxs("section", {
      className: 'mt-6',
      children: [jsx(Typography, {
        variant: "h5",
        style: {
          marginBottom: "16px"
        },
        children: "Performance Metrics"
      }), jsx(GlassCard, {
        children: jsx(Box, {
          style: {
            padding: "16px"
          },
          children: jsx(Typography, {
            children: "Theme performance metrics and optimization data"
          })
        })
      })]
    }), footer && jsx(Box, {
      style: {
        marginTop: "auto",
        paddingTop: "8px"
      },
      children: footer
    })]
  });
});
GlassThemeDemo.displayName = "GlassThemeDemo";

export { GlassThemeDemo };
//# sourceMappingURL=GlassThemeDemo.js.map