react-panel-layout 0.6.0 → 0.6.1

package/src/demo/pages/Dialog/components/CardExpandDemo.module.css

@@ -0,0 +1,243 @@
+.container {
+  padding: 16px;
+}
+
+.header {
+  margin-bottom: 16px;
+}
+
+.sectionTitle {
+  margin: 0 0 4px;
+  font-size: 20px;
+  font-weight: 600;
+  color: var(--color-text-primary, #1a1a1a);
+}
+
+.hint {
+  margin: 0;
+  font-size: 13px;
+  color: var(--color-text-secondary, #6b7280);
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+  gap: 12px;
+}
+
+/* Card styles */
+.card {
+  display: flex;
+  flex-direction: column;
+  aspect-ratio: 1;
+  border: none;
+  border-radius: 12px;
+  padding: 0;
+  cursor: pointer;
+  overflow: hidden;
+  transition: transform 0.15s ease, box-shadow 0.15s ease;
+}
+
+.card:hover {
+  transform: scale(1.02);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
+}
+
+.card:active {
+  transform: scale(0.98);
+}
+
+.cardArt {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.cardIcon {
+  width: 60%;
+  height: 60%;
+  opacity: 0.8;
+}
+
+.cardInfo {
+  padding: 10px;
+  background: rgba(0, 0, 0, 0.3);
+  backdrop-filter: blur(10px);
+}
+
+.cardTitle {
+  font-size: 13px;
+  font-weight: 600;
+  color: #fff;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.cardArtist {
+  font-size: 11px;
+  color: rgba(255, 255, 255, 0.7);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Backdrop */
+.backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.6);
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  z-index: 1000;
+  /* Fade in animation separate from view transition */
+  animation: backdropFadeIn 0.35s ease-out;
+}
+
+@keyframes backdropFadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+/* Expanded view styles */
+.expanded {
+  width: 100vw;
+  max-width: 420px;
+  height: 85vh;
+  max-height: 700px;
+  border-radius: 24px 24px 0 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 12px 24px 32px;
+  box-sizing: border-box;
+  color: #fff;
+}
+
+.dragHandle {
+  width: 36px;
+  height: 5px;
+  background: rgba(255, 255, 255, 0.4);
+  border-radius: 3px;
+  margin-bottom: 24px;
+  flex-shrink: 0;
+}
+
+.expandedArt {
+  width: min(280px, 70vw);
+  aspect-ratio: 1;
+  background: rgba(0, 0, 0, 0.2);
+  border-radius: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3);
+  margin-bottom: 32px;
+}
+
+.expandedIcon {
+  width: 70%;
+  height: 70%;
+}
+
+.expandedInfo {
+  text-align: center;
+  margin-bottom: 32px;
+}
+
+.expandedTitle {
+  margin: 0 0 8px;
+  font-size: 22px;
+  font-weight: 700;
+}
+
+.expandedArtist {
+  margin: 0;
+  font-size: 16px;
+  opacity: 0.8;
+}
+
+.controls {
+  width: 100%;
+  max-width: 320px;
+  margin-bottom: 24px;
+}
+
+.progressBar {
+  height: 4px;
+  background: rgba(255, 255, 255, 0.3);
+  border-radius: 2px;
+  overflow: hidden;
+}
+
+.progressFill {
+  height: 100%;
+  background: #fff;
+  border-radius: 2px;
+}
+
+.timeLabels {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 8px;
+  font-size: 12px;
+  opacity: 0.7;
+}
+
+.playbackControls {
+  display: flex;
+  align-items: center;
+  gap: 32px;
+  margin-bottom: 24px;
+}
+
+.controlButton {
+  background: none;
+  border: none;
+  color: #fff;
+  cursor: pointer;
+  padding: 8px;
+  opacity: 0.9;
+  transition: opacity 0.15s, transform 0.15s;
+}
+
+.controlButton:hover {
+  opacity: 1;
+}
+
+.controlButton:active {
+  transform: scale(0.9);
+}
+
+.playButton {
+  width: 64px;
+  height: 64px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.2);
+  border: none;
+  color: #fff;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background 0.15s, transform 0.15s;
+}
+
+.playButton:hover {
+  background: rgba(255, 255, 255, 0.3);
+}
+
+.playButton:active {
+  transform: scale(0.95);
+}
+
+.closeButton {
+  margin-top: auto;
+  color: rgba(255, 255, 255, 0.8);
+}

package/src/demo/pages/Dialog/components/CardExpandDemo.tsx

@@ -0,0 +1,204 @@
+/**
+ * @file CardExpandDemo - Apple Music style card expansion using viewTransition
+ */
+import * as React from "react";
+import { useSharedElementTransition } from "../../../../hooks/useSharedElementTransition.js";
+import { DemoButton } from "../../../components/ui/DemoButton.js";
+import styles from "./CardExpandDemo.module.css";
+
+type Album = {
+  id: string;
+  title: string;
+  artist: string;
+  color: string;
+};
+
+const albums: Album[] = [
+  { id: "1", title: "Midnight Dreams", artist: "Luna", color: "#1a1a2e" },
+  { id: "2", title: "Ocean Waves", artist: "The Currents", color: "#16213e" },
+  { id: "3", title: "Summer Nights", artist: "Sunset", color: "#e94560" },
+  { id: "4", title: "City Lights", artist: "Neon", color: "#0f3460" },
+  { id: "5", title: "Forest Walk", artist: "Nature", color: "#2d4a22" },
+  { id: "6", title: "Golden Hour", artist: "Horizon", color: "#c9a227" },
+];
+
+type AlbumCardProps = {
+  album: Album;
+  sourceProps: { style: React.CSSProperties };
+  onClick: () => void;
+};
+
+const AlbumCard: React.FC<AlbumCardProps> = ({ album, sourceProps, onClick }) => {
+  return (
+    <button
+      type="button"
+      className={styles.card}
+      style={{ backgroundColor: album.color, ...sourceProps.style }}
+      onClick={onClick}
+    >
+      <div className={styles.cardArt}>
+        <svg viewBox="0 0 100 100" className={styles.cardIcon}>
+          <circle cx="50" cy="50" r="30" fill="rgba(255,255,255,0.2)" />
+          <circle cx="50" cy="50" r="10" fill="rgba(255,255,255,0.4)" />
+        </svg>
+      </div>
+      <div className={styles.cardInfo}>
+        <div className={styles.cardTitle}>{album.title}</div>
+        <div className={styles.cardArtist}>{album.artist}</div>
+      </div>
+    </button>
+  );
+};
+
+type ExpandedViewProps = {
+  album: Album;
+  targetProps: { style: React.CSSProperties };
+  swipeContainerProps: React.HTMLAttributes<HTMLElement> & { style: React.CSSProperties };
+  onClose: () => void;
+};
+
+const ExpandedView: React.FC<ExpandedViewProps> = ({ album, targetProps, swipeContainerProps, onClose }) => {
+  const handleBackdropClick = (e: React.MouseEvent) => {
+    if (e.target === e.currentTarget) {
+      onClose();
+    }
+  };
+
+  // Extract event handlers from swipeContainerProps (exclude style to merge manually)
+  const { style: swipeStyle, ...swipeEventHandlers } = swipeContainerProps;
+
+  // Merge all styles properly
+  const mergedStyle: React.CSSProperties = {
+    backgroundColor: album.color,
+    ...swipeStyle,
+    ...targetProps.style,
+  };
+
+  return (
+    <div className={styles.backdrop} onClick={handleBackdropClick}>
+      <div
+        className={styles.expanded}
+        style={mergedStyle}
+        {...swipeEventHandlers}
+      >
+        <div className={styles.dragHandle} />
+
+        <div className={styles.expandedArt}>
+          <svg viewBox="0 0 100 100" className={styles.expandedIcon}>
+            <circle cx="50" cy="50" r="40" fill="rgba(255,255,255,0.15)" />
+            <circle cx="50" cy="50" r="15" fill="rgba(255,255,255,0.3)" />
+          </svg>
+        </div>
+
+        <div className={styles.expandedInfo}>
+          <h2 className={styles.expandedTitle}>{album.title}</h2>
+          <p className={styles.expandedArtist}>{album.artist}</p>
+        </div>
+
+        <div className={styles.controls}>
+          <div className={styles.progressBar}>
+            <div className={styles.progressFill} style={{ width: "35%" }} />
+          </div>
+          <div className={styles.timeLabels}>
+            <span>1:24</span>
+            <span>-2:36</span>
+          </div>
+        </div>
+
+        <div className={styles.playbackControls}>
+          <button type="button" className={styles.controlButton}>
+            <svg viewBox="0 0 24 24" width="32" height="32">
+              <path fill="currentColor" d="M6 6h2v12H6zm3.5 6l8.5 6V6z" />
+            </svg>
+          </button>
+          <button type="button" className={styles.playButton}>
+            <svg viewBox="0 0 24 24" width="40" height="40">
+              <path fill="currentColor" d="M6 4h4v16H6zm8 0h4v16h-4z" />
+            </svg>
+          </button>
+          <button type="button" className={styles.controlButton}>
+            <svg viewBox="0 0 24 24" width="32" height="32">
+              <path fill="currentColor" d="M6 18l8.5-6L6 6v12zm10-12v12h2V6h-2z" />
+            </svg>
+          </button>
+        </div>
+
+        <DemoButton variant="ghost" onClick={onClose} className={styles.closeButton}>
+          Close
+        </DemoButton>
+      </div>
+    </div>
+  );
+};
+
+// Global CSS for view transitions (CSS Modules don't support global pseudo-elements)
+const viewTransitionStyles = `
+  /* Disable default root crossfade during view transition */
+  ::view-transition-old(root),
+  ::view-transition-new(root) {
+    animation: none;
+  }
+
+  /* Album card/expanded morph animation */
+  ::view-transition-group(*) {
+    animation-duration: 0.35s;
+    animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
+    /* Ensure morph is above backdrop */
+    z-index: 2000;
+  }
+
+  /* Show destination state immediately, hide source */
+  ::view-transition-old(*) {
+    animation: none;
+    opacity: 0;
+  }
+  ::view-transition-new(*) {
+    animation: none;
+    opacity: 1;
+  }
+`;
+
+/**
+ * Demo component for Apple Music style card expansion using viewTransition
+ */
+export const CardExpandDemo: React.FC = () => {
+  const { expandedItem, expand, collapse, getSourceProps, getTargetProps, getSwipeContainerProps, isSupported } =
+    useSharedElementTransition<Album>({
+      // Use single transition name for the whole card/expanded view
+      getTransitionName: (album) => `album-${album.id}`,
+      getKey: (album) => album.id,
+    });
+
+  return (
+    <div className={styles.container}>
+      <style>{viewTransitionStyles}</style>
+      <div className={styles.header}>
+        <h3 className={styles.sectionTitle}>Recently Played</h3>
+        <p className={styles.hint}>
+          Tap a card to expand
+          {isSupported ? " (View Transitions API)" : " (fallback mode)"}
+        </p>
+      </div>
+
+      <div className={styles.grid}>
+        {albums.map((album) => (
+          <AlbumCard
+            key={album.id}
+            album={album}
+            sourceProps={getSourceProps(album)}
+            onClick={() => expand(album)}
+          />
+        ))}
+      </div>
+
+      {expandedItem && (
+        <ExpandedView
+          album={expandedItem}
+          targetProps={getTargetProps()}
+          swipeContainerProps={getSwipeContainerProps()}
+          onClose={collapse}
+        />
+      )}
+    </div>
+  );
+};

package/src/demo/pages/Dialog/components/CustomAlertDialogDemo.tsx

@@ -0,0 +1,219 @@
+/**
+ * @file Custom AlertDialog demo - shows how to replace the default dialog component
+ */
+import * as React from "react";
+import { useDialog } from "../../../../modules/dialog/useDialog";
+import type { AlertDialogProps } from "../../../../modules/dialog/types";
+import { DialogContainer } from "../../../../modules/dialog/DialogContainer";
+import { DemoButton } from "../../../components/ui/DemoButton";
+import styles from "./DialogDemos.module.css";
+
+/**
+ * Custom AlertDialog with a different visual style
+ */
+const CustomAlertDialog: React.FC<AlertDialogProps> = ({
+  type,
+  visible,
+  title,
+  message,
+  confirmLabel = "OK",
+  cancelLabel = "Cancel",
+  placeholder,
+  defaultValue = "",
+  inputType = "text",
+  onConfirm,
+  onCancel,
+}) => {
+  const [inputValue, setInputValue] = React.useState(defaultValue);
+
+  React.useEffect(() => {
+    if (visible) {
+      setInputValue(defaultValue);
+    }
+  }, [visible, defaultValue]);
+
+  const handleConfirm = () => {
+    if (type === "prompt") {
+      onConfirm(inputValue);
+    } else {
+      onConfirm();
+    }
+  };
+
+  const containerStyle: React.CSSProperties = {
+    background: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
+    borderRadius: "16px",
+    padding: "24px",
+    minWidth: "320px",
+    maxWidth: "90vw",
+    color: "#fff",
+    boxShadow: "0 20px 60px rgba(0, 0, 0, 0.3)",
+  };
+
+  const titleStyle: React.CSSProperties = {
+    fontSize: "20px",
+    fontWeight: 700,
+    marginBottom: "12px",
+  };
+
+  const messageStyle: React.CSSProperties = {
+    fontSize: "15px",
+    lineHeight: 1.6,
+    opacity: 0.9,
+    marginBottom: "20px",
+  };
+
+  const inputStyle: React.CSSProperties = {
+    width: "100%",
+    padding: "12px 16px",
+    border: "2px solid rgba(255, 255, 255, 0.3)",
+    borderRadius: "8px",
+    fontSize: "15px",
+    background: "rgba(255, 255, 255, 0.15)",
+    color: "#fff",
+    marginBottom: "20px",
+    boxSizing: "border-box",
+  };
+
+  const buttonRowStyle: React.CSSProperties = {
+    display: "flex",
+    justifyContent: "flex-end",
+    gap: "12px",
+  };
+
+  const buttonBaseStyle: React.CSSProperties = {
+    padding: "10px 20px",
+    borderRadius: "8px",
+    fontSize: "14px",
+    fontWeight: 600,
+    cursor: "pointer",
+    border: "none",
+    transition: "transform 0.15s ease, opacity 0.15s ease",
+  };
+
+  const primaryButtonStyle: React.CSSProperties = {
+    ...buttonBaseStyle,
+    background: "#fff",
+    color: "#667eea",
+  };
+
+  const secondaryButtonStyle: React.CSSProperties = {
+    ...buttonBaseStyle,
+    background: "rgba(255, 255, 255, 0.2)",
+    color: "#fff",
+    border: "1px solid rgba(255, 255, 255, 0.3)",
+  };
+
+  return (
+    <DialogContainer
+      visible={visible}
+      onClose={onCancel}
+      position="center"
+      dismissible={type !== "alert"}
+      closeOnEscape={true}
+      ariaLabel={title ?? (type === "prompt" ? "Prompt" : type === "confirm" ? "Confirm" : "Alert")}
+    >
+      <div style={containerStyle}>
+        {title ? <div style={titleStyle}>{title}</div> : null}
+        <div style={messageStyle}>{message}</div>
+        <React.Activity mode={type === "prompt" ? "visible" : "hidden"}>
+          <input
+            type={inputType}
+            value={inputValue}
+            onChange={(e) => setInputValue(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === "Enter") {
+                e.preventDefault();
+                handleConfirm();
+              }
+            }}
+            placeholder={placeholder}
+            style={inputStyle}
+            autoFocus
+          />
+        </React.Activity>
+        <div style={buttonRowStyle}>
+          <React.Activity mode={type !== "alert" ? "visible" : "hidden"}>
+            <button type="button" style={secondaryButtonStyle} onClick={onCancel}>
+              {cancelLabel}
+            </button>
+          </React.Activity>
+          <button type="button" style={primaryButtonStyle} onClick={handleConfirm}>
+            {confirmLabel}
+          </button>
+        </div>
+      </div>
+    </DialogContainer>
+  );
+};
+
+export const CustomAlertDialogDemo: React.FC = () => {
+  const { alert, confirm, prompt, Outlet } = useDialog({
+    alertDialogComponent: CustomAlertDialog,
+  });
+  const [lastResult, setLastResult] = React.useState<string>("");
+
+  const handleAlert = async () => {
+    await alert({
+      title: "Custom Alert",
+      message: "This is a custom-styled alert dialog with gradient background!",
+      okLabel: "Awesome!",
+    });
+    setLastResult("alert: acknowledged");
+  };
+
+  const handleConfirm = async () => {
+    const result = await confirm({
+      title: "Custom Confirm",
+      message: "Do you like this custom dialog style?",
+      confirmLabel: "Love it!",
+      cancelLabel: "Not really",
+    });
+    setLastResult(`confirm: ${result ? "loved it" : "not really"}`);
+  };
+
+  const handlePrompt = async () => {
+    const result = await prompt({
+      title: "Custom Prompt",
+      message: "What's your favorite color?",
+      placeholder: "Enter a color...",
+      defaultValue: "",
+    });
+    setLastResult(`prompt: ${result === null ? "cancelled" : `"${result}"`}`);
+  };
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.section}>
+        <h3>Custom Alert Dialog Component</h3>
+        <p>
+          Replace the default AlertDialog with your own component by passing
+          <code style={{ background: "#f0f0f0", padding: "2px 6px", borderRadius: "4px", margin: "0 4px" }}>
+            alertDialogComponent
+          </code>
+          to useDialog.
+        </p>
+      </div>
+
+      <div className={styles.section}>
+        <h3>Gradient Style Dialogs</h3>
+        <p>These dialogs use a custom component with gradient background.</p>
+        <div className={styles.buttonGroup}>
+          <DemoButton variant="primary" size="md" onClick={handleAlert}>
+            Show Custom Alert
+          </DemoButton>
+          <DemoButton variant="primary" size="md" onClick={handleConfirm}>
+            Show Custom Confirm
+          </DemoButton>
+          <DemoButton variant="primary" size="md" onClick={handlePrompt}>
+            Show Custom Prompt
+          </DemoButton>
+        </div>
+      </div>
+
+      {lastResult ? <div className={styles.resultBox}>Last result: {lastResult}</div> : null}
+
+      <Outlet />
+    </div>
+  );
+};