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

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

'use client';
import { jsxs, jsx } from 'react/jsx-runtime';
import { useReducedMotion } from '../../hooks/useReducedMotion.js';
import { useState } from 'react';
import { createGlassStyle } from '../../core/mixins/glassMixins.js';
import { AnimatePresence, motion } from 'framer-motion';

const PageTransitionDemo = () => {
  useReducedMotion();
  const [page, setPage] = useState(0);
  return jsxs("div", {
    style: {
      position: "relative",
      width: 520,
      height: 320
    },
    children: [jsxs("div", {
      style: {
        display: "flex",
        gap: 8,
        marginBottom: 12
      },
      children: [jsx("button", {
        onClick: e => setPage(0),
        style: btnStyle(page === 0),
        className: "glass-focus glass-touch-target glass-contrast-guard",
        children: "Overview"
      }), jsx("button", {
        onClick: e => setPage(1),
        style: btnStyle(page === 1),
        className: "glass-focus glass-touch-target glass-contrast-guard",
        children: "Details"
      }), jsx("button", {
        onClick: e => setPage(2),
        style: btnStyle(page === 2),
        className: "glass-focus glass-touch-target glass-contrast-guard",
        children: "Insights"
      })]
    }), jsx("div", {
      style: {
        position: "relative",
        borderRadius: 16,
        overflow: "hidden",
        height: 260
      },
      children: jsx(AnimatePresence, {
        mode: "wait",
        children: jsxs(motion.div, {
          initial: {
            opacity: 0,
            filter: "blur(var(--glass-blur-md))",
            y: 10
          },
          animate: {
            opacity: 1,
            filter: "blur(0px)",
            y: 0,
            transition: {
              duration: 0.28,
              ease: [0.2, 0.8, 0.2, 1]
            }
          },
          exit: {
            opacity: 0,
            filter: "blur(var(--glass-blur-md))",
            y: -10,
            transition: {
              duration: 0.2
            }
          },
          style: cardStyle,
          children: [page === 0 && jsx(Section, {
            title: "Overview",
            color: "linear-gradient(135deg, var(--glass-color-primary-light)33, #c084fc33)"
          }), page === 1 && jsx(Section, {
            title: "Details",
            color: "linear-gradient(135deg, var(--glass-color-success-light)33, var(--glass-color-primary-light)33)"
          }), page === 2 && jsx(Section, {
            title: "Insights",
            color: "linear-gradient(135deg, #f472b633, var(--glass-color-warning)33)"
          })]
        }, page)
      })
    })]
  });
};
const Section = ({
  title,
  color
}) => jsx("div", {
  style: {
    position: "absolute",
    inset: 0,
    display: "grid",
    placeItems: "center"
  },
  children: jsxs("div", {
    style: createGlassStyle({
      intent: "neutral",
      elevation: "level2"
    }),
    children: [jsx("div", {
      style: {
        position: "absolute",
        inset: 0,
        background: color,
        pointerEvents: "none"
      }
    }), jsx("h3", {
      style: {
        position: "relative",
        margin: 0,
        zIndex: 1
      },
      children: title
    }), jsx("p", {
      style: {
        position: "relative",
        zIndex: 1,
        opacity: 0.8
      },
      children: "Glass page transition demo"
    })]
  })
});
const cardStyle = {
  position: "absolute",
  inset: 0
};
const btnStyle = active => ({
  padding: "6px 10px",
  borderRadius: 8,
  border: "1px solid rgba(var(--glass-color-white) / var(--glass-opacity-20))",
  background: active ? "rgba(255,255,255,0.18)" : "rgba(255,255,255,0.08)",
  color: "white"
});

export { PageTransitionDemo, PageTransitionDemo as default };
//# sourceMappingURL=PageTransitionDemo.js.map