@marlinjai/clearify 1.11.2 → 1.12.0

package/src/theme/admin/components/Modal.tsx

@@ -0,0 +1,93 @@
+import React, { useEffect } from 'react';
+
+interface ModalProps {
+  open: boolean;
+  onClose: () => void;
+  title: string;
+  children: React.ReactNode;
+}
+
+export function Modal({ open, onClose, title, children }: ModalProps) {
+  useEffect(() => {
+    if (!open) return;
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose();
+    };
+    document.addEventListener('keydown', handler);
+    return () => document.removeEventListener('keydown', handler);
+  }, [open, onClose]);
+
+  if (!open) return null;
+
+  return (
+    <div
+      style={{
+        position: 'fixed',
+        inset: 0,
+        zIndex: 1000,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: 'rgba(0, 0, 0, 0.5)',
+        backdropFilter: 'blur(4px)',
+      }}
+      onClick={(e) => {
+        if (e.target === e.currentTarget) onClose();
+      }}
+    >
+      <div
+        style={{
+          backgroundColor: 'var(--clearify-bg)',
+          borderRadius: 'var(--clearify-radius-lg)',
+          border: '1px solid var(--clearify-border)',
+          boxShadow: 'var(--clearify-shadow-lg)',
+          padding: '1.5rem',
+          minWidth: '400px',
+          maxWidth: '90vw',
+          maxHeight: '85vh',
+          overflow: 'auto',
+          animation: 'clearify-scale-in 0.15s ease-out',
+        }}
+      >
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            marginBottom: '1rem',
+          }}
+        >
+          <h3
+            style={{
+              fontSize: '1.125rem',
+              fontWeight: 700,
+              color: 'var(--clearify-text)',
+            }}
+          >
+            {title}
+          </h3>
+          <button
+            onClick={onClose}
+            style={{
+              background: 'none',
+              border: 'none',
+              cursor: 'pointer',
+              color: 'var(--clearify-text-tertiary)',
+              padding: '0.25rem',
+              borderRadius: 'var(--clearify-radius-sm)',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+            }}
+          >
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+              <line x1="18" y1="6" x2="6" y2="18" />
+              <line x1="6" y1="6" x2="18" y2="18" />
+            </svg>
+          </button>
+        </div>
+        {children}
+      </div>
+    </div>
+  );
+}

package/src/theme/admin/components/Toast.tsx

@@ -0,0 +1,59 @@
+import React, { useState, useCallback, useRef } from 'react';
+
+interface ToastState {
+  message: string;
+  type: 'success' | 'error';
+  id: number;
+}
+
+export function useToast() {
+  const [toasts, setToasts] = useState<ToastState[]>([]);
+  const nextId = useRef(0);
+
+  const show = useCallback((message: string, type: 'success' | 'error' = 'success') => {
+    const id = nextId.current++;
+    setToasts((prev) => [...prev, { message, type, id }]);
+    setTimeout(() => {
+      setToasts((prev) => prev.filter((t) => t.id !== id));
+    }, 3000);
+  }, []);
+
+  return { toasts, show };
+}
+
+export function ToastContainer({ toasts }: { toasts: ToastState[] }) {
+  if (toasts.length === 0) return null;
+
+  return (
+    <div
+      style={{
+        position: 'fixed',
+        bottom: '1.5rem',
+        right: '1.5rem',
+        zIndex: 9999,
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '0.5rem',
+      }}
+    >
+      {toasts.map((toast) => (
+        <div
+          key={toast.id}
+          style={{
+            padding: '0.75rem 1.25rem',
+            borderRadius: 'var(--clearify-radius)',
+            fontSize: '0.875rem',
+            fontWeight: 500,
+            color: '#fff',
+            backgroundColor: toast.type === 'success' ? '#16a34a' : '#dc2626',
+            boxShadow: 'var(--clearify-shadow-lg)',
+            animation: 'clearify-fade-in 0.2s ease-out',
+            maxWidth: '360px',
+          }}
+        >
+          {toast.message}
+        </div>
+      ))}
+    </div>
+  );
+}

package/src/theme/admin/components/index.ts

@@ -0,0 +1,4 @@
+export { useToast, ToastContainer } from './Toast.js';
+export { FormField } from './FormField.js';
+export { Modal } from './Modal.js';
+export { ConfirmDialog } from './ConfirmDialog.js';