@kyro-cms/admin 0.3.2 → 0.3.4

package/src/components/ui/PageHeader.tsx

@@ -0,0 +1,158 @@
+import React, { type ReactNode } from "react";
+import type { IconType } from "react-icons";
+
+interface Breadcrumb {
+  label: string;
+  href?: string;
+  onClick?: () => void;
+}
+
+interface Action {
+  label: string;
+  onClick: () => void;
+  icon?: IconType;
+  variant?: "primary" | "outline" | "ghost";
+  className?: string;
+}
+
+interface PageHeaderProps {
+  title?: string;
+  description?: string;
+  icon?: IconType;
+  breadcrumbs?: Breadcrumb[];
+  metadata?: ReactNode[];
+  back?: { label?: string; href?: string; onClick?: () => void };
+  action?: Action;
+  actions?: ReactNode | Action[];
+  children?: ReactNode;
+}
+
+export function PageHeader({
+  title,
+  description,
+  icon: Icon,
+  breadcrumbs,
+  metadata,
+  back,
+  action,
+  actions,
+  children,
+}: PageHeaderProps) {
+  return (
+    <div className="flex flex-col lg:flex-row lg:items-center surface-tile justify-between gap-6 pt-4 mb-8">
+      <div className="min-w-0 flex-1">
+        {/* Breadcrumbs / Back */}
+        {(breadcrumbs || back) && (
+          <div className="flex items-center gap-2 mb-3">
+            {back && (
+              <a
+                href={back.href}
+                onClick={(e) => {
+                  if (back.onClick) {
+                    e.preventDefault();
+                    back.onClick();
+                  }
+                }}
+                className="p-1.5 rounded-lg hover:bg-[var(--kyro-surface-accent)] text-[var(--kyro-text-secondary)] transition-all"
+              >
+                <svg className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
+                  <path d="M19 12H5M12 19l-7-7 7-7" />
+                </svg>
+              </a>
+            )}
+            {breadcrumbs?.map((crumb: Breadcrumb, i: number) => (
+              <React.Fragment key={i}>
+                {i > 0 && <span className="opacity-20 text-[10px]">/</span>}
+                {crumb.href || crumb.onClick ? (
+                  <a
+                    href={crumb.href}
+                    onClick={(e) => {
+                      if (crumb.onClick) {
+                        e.preventDefault();
+                        crumb.onClick();
+                      }
+                    }}
+                    className="text-[10px] font-bold  tracking-widest text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-primary)] transition-all"
+                  >
+                    {crumb.label}
+                  </a>
+                ) : (
+                  <span className="text-[10px] font-bold  tracking-widest opacity-40">
+                    {crumb.label}
+                  </span>
+                )}
+              </React.Fragment>
+            ))}
+          </div>
+        )}
+
+        <div className="flex items-center gap-3">
+          {Icon && <Icon className="w-6 h-6 text-[var(--kyro-primary)]" />}
+          {title && (
+            <h1 className="text-xl font-bold tracking-tighter text-[var(--kyro-text-primary)] truncate">
+              {title}
+            </h1>
+          )}
+        </div>
+
+        {description && (
+          <div className="flex items-center gap-2 mt-1">
+            <p className="text-[var(--kyro-text-secondary)] font-medium opacity-60 line-clamp-1">
+              {description}
+            </p>
+            {metadata && (
+              <div className="flex items-center gap-2">
+                {metadata.map((item: ReactNode, i: number) => (
+                  <React.Fragment key={i}>
+                    {i === 0 && <span className="opacity-20 ml-1">·</span>}
+                    {item}
+                  </React.Fragment>
+                ))}
+              </div>
+            )}
+            {children}
+          </div>
+        )}
+      </div>
+
+      <div className="flex items-center gap-3">
+        {actions && (
+          Array.isArray(actions) ? (
+            <div className="flex items-center gap-3">
+              {actions.map((act, i) => (
+                <button
+                  key={i}
+                  type="button"
+                  onClick={act.onClick}
+                  className={`flex items-center gap-2 px-6 py-2.5 rounded-xl font-bold text-sm transition-all shadow-lg shadow-[var(--kyro-primary)]/10 ${
+                    act.variant === "outline"
+                      ? "border border-[var(--kyro-border)] text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-surface-accent)]"
+                      : act.variant === "ghost"
+                      ? "text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-surface-accent)] shadow-none"
+                      : "bg-[var(--kyro-primary)] text-white hover:opacity-90"
+                  } ${act.className || ""}`}
+                >
+                  {act.icon && <act.icon className="w-4 h-4" />}
+                  {act.label}
+                </button>
+              ))}
+            </div>
+          ) : (
+            actions
+          )
+        )}
+        {action && (
+          <button
+            type="button"
+            onClick={action.onClick}
+            className={`flex items-center gap-2 px-6 py-2.5 rounded-xl font-bold text-sm bg-[var(--kyro-primary)] text-white hover:opacity-90 transition-all shadow-lg shadow-[var(--kyro-primary)]/10 ${action.className || ""}`}
+          >
+            {action.icon && <action.icon className="w-4 h-4" />}
+            {action.label}
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}
+

package/src/components/ui/Pagination.tsx

@@ -0,0 +1,61 @@
+import { Button } from "./Button";
+
+interface PaginationProps {
+  page: number;
+  totalPages: number;
+  totalDocs?: number;
+  limit?: number;
+  onPageChange: (page: number) => void;
+  onLimitChange?: (limit: number) => void;
+}
+
+export function Pagination({ page, totalPages, totalDocs, limit, onPageChange, onLimitChange }: PaginationProps) {
+  if (totalPages <= 1) return null;
+
+  return (
+    <div className="flex items-center justify-between px-4 py-3 border-t border-[var(--kyro-border)]">
+      {totalDocs !== undefined && limit ? (
+        <span className="text-xs text-[var(--kyro-text-secondary)] font-medium">
+          Showing {(page - 1) * limit + 1} to {Math.min(page * limit, totalDocs)} of {totalDocs}
+        </span>
+      ) : (
+        <span />
+      )}
+      <div className="flex items-center gap-2">
+        {onLimitChange && (
+          <select
+            value={limit}
+            onChange={(e) => onLimitChange(Number(e.target.value))}
+            className="text-xs border border-[var(--kyro-border)] rounded-lg px-2 py-1 bg-[var(--kyro-bg)] text-[var(--kyro-text-secondary)]"
+          >
+            <option value={10}>10/page</option>
+            <option value={25}>25/page</option>
+            <option value={50}>50/page</option>
+            <option value={100}>100/page</option>
+          </select>
+        )}
+        <span className="text-xs text-[var(--kyro-text-secondary)] font-medium">
+          Page {page} of {totalPages}
+        </span>
+        <div className="flex gap-1">
+          <Button
+            variant="ghost"
+            size="sm"
+            disabled={page <= 1}
+            onClick={() => onPageChange(page - 1)}
+          >
+            ← Previous
+          </Button>
+          <Button
+            variant="ghost"
+            size="sm"
+            disabled={page >= totalPages}
+            onClick={() => onPageChange(page + 1)}
+          >
+            Next →
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/ui/PromptModal.tsx

@@ -37,7 +37,7 @@ export function PromptModal({
         className="absolute inset-0 bg-black/50 backdrop-blur-sm"
         onClick={onClose}
       />
-      <div className="relative w-full max-w-md mx-4 bg-[var(--kyro-surface)] rounded-lg shadow-2xl animate-in fade-in zoom-in-95 duration-200 border border-[var(--kyro-border)]">
+      <div className="relative w-full max-w-lg mx-4 bg-[var(--kyro-surface)] rounded-lg shadow-2xl animate-in fade-in zoom-in-95 duration-200 border border-[var(--kyro-border)]">
         <div className="flex items-center justify-between px-6 py-4 border-b border-[var(--kyro-border)]">
           <h2 className="text-lg font-semibold text-[var(--kyro-text-primary)]">
             {title}

package/src/components/ui/SearchInput.tsx

@@ -0,0 +1,57 @@
+import { IconSearch, IconLoader2 } from "./icons";
+import type { ReactNode, KeyboardEvent, FocusEvent, RefObject } from "react";
+
+interface SearchInputProps {
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+  className?: string;
+  loading?: boolean;
+  disabled?: boolean;
+  onKeyDown?: (e: KeyboardEvent<HTMLInputElement>) => void;
+  onFocus?: (e: FocusEvent<HTMLInputElement>) => void;
+  onBlur?: (e: FocusEvent<HTMLInputElement>) => void;
+  inputRef?: RefObject<HTMLInputElement | null>;
+  rightElement?: ReactNode;
+}
+
+export function SearchInput({
+  value,
+  onChange,
+  placeholder = "Search...",
+  className = "",
+  loading,
+  disabled,
+  onKeyDown,
+  onFocus,
+  onBlur,
+  inputRef,
+  rightElement,
+}: SearchInputProps) {
+  return (
+    <div className={`relative flex-1 group ${className}`}>
+      {loading ? (
+        <IconLoader2 className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-[var(--kyro-text-secondary)] animate-spin opacity-40 group-focus-within:opacity-100 transition-opacity" />
+      ) : (
+        <IconSearch className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-[var(--kyro-text-secondary)] opacity-40 group-focus-within:opacity-100 transition-opacity" />
+      )}
+      <input
+        ref={inputRef}
+        type="text"
+        placeholder={placeholder}
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        onKeyDown={onKeyDown}
+        onFocus={onFocus}
+        onBlur={onBlur}
+        disabled={disabled}
+        className="w-full pl-10 pr-4 py-2.5 bg-[var(--kyro-bg)] border border-[var(--kyro-border)] rounded-xl text-sm font-medium focus:outline-none focus:ring-2 focus:ring-[var(--kyro-sidebar-active)] focus:border-transparent disabled:opacity-50"
+      />
+      {rightElement && (
+        <div className="absolute right-3 top-1/2 -translate-y-1/2">
+          {rightElement}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/ui/SeoPreview.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+
+interface SeoPreviewProps {
+  title: string;
+  description: string;
+  slug: string;
+}
+
+export const SeoPreview = ({ title, description, slug }: SeoPreviewProps) => (
+  <div className="bg-[var(--kyro-surface)] border border-[var(--kyro-border)] rounded-lg p-6 max-w-2xl shadow-sm transition-colors duration-300">
+    <div className="flex items-center gap-2 mb-2">
+      <div className="w-7 h-7 bg-[var(--kyro-bg-secondary)] rounded-full flex items-center justify-center text-[10px] text-[var(--kyro-text-primary)] font-medium border border-[var(--kyro-border)]">
+        K
+      </div>
+      <div className="flex flex-col">
+        <span className="text-sm font-medium text-[var(--kyro-text-primary)] leading-tight">
+          kyro-cms.com
+        </span>
+        <span className="text-[12px] text-[var(--kyro-text-secondary)] leading-tight opacity-80">
+          https://kyro-cms.com › posts › {slug}
+        </span>
+      </div>
+    </div>
+    <h3 className="text-[20px] text-[#2563eb] dark:text-[#60a5fa] font-medium hover:underline cursor-pointer mb-1 leading-tight transition-colors">
+      {title}
+    </h3>
+    <p className="text-[14px] text-[var(--kyro-text-secondary)] leading-relaxed line-clamp-2">
+      {description}
+    </p>
+  </div>
+);

package/src/components/ui/SlidePanel.tsx

@@ -5,6 +5,8 @@ interface SlidePanelProps {
   open: boolean;
   onClose: () => void;
   title: string;
+  subtitle?: string;
+  size?: "sm" | "md" | "lg" | "xl";
   children: ReactNode;
   width?: "sm" | "md" | "lg" | "xl";
   showOverlay?: boolean;

package/src/components/ui/Toast.tsx

@@ -1,144 +1,87 @@
-import {
-  createContext,
-  useContext,
-  useState,
-  type ReactNode,
-  useCallback,
-} from "react";
+import React, { createContext, useContext, type ReactNode } from "react";
+import { 
+  CheckCircle2, 
+  AlertTriangle, 
+  Info, 
+  X,
+  ShieldAlert
+} from "./icons";
 
-interface Toast {
-  id: string;
-  type: "success" | "error" | "info" | "warning";
-  message: string;
-}
-
-interface ToastContextType {
-  toasts: Toast[];
-  addToast: (type: Toast["type"], message: string) => void;
-  removeToast: (id: string) => void;
-}
-
-const ToastContext = createContext<ToastContextType | null>(null);
-
-export function createToastContext() {
-  const [toasts, setToasts] = useState<Toast[]>([]);
-
-  const addToast = useCallback((type: Toast["type"], message: string) => {
-    const id = `${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
-    setToasts((prev) => [...prev, { id, type, message }]);
-  }, []);
+import { useToastStore } from "../../lib/stores";
 
-  const removeToast = useCallback((id: string) => {
-    setToasts((prev) => prev.filter((t) => t.id !== id));
-  }, []);
-
-  return { toasts, addToast, removeToast };
-}
+type ToastType = "success" | "error" | "warning" | "info";
 
 interface ToastProps {
-  type: Toast["type"];
+  type: ToastType;
   message: string;
   onClose: () => void;
 }
 
 export function Toast({ type, message, onClose }: ToastProps) {
-  const icons = {
-    success: (
-      <svg
-        width="20"
-        height="20"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        strokeWidth="2"
-      >
-        <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" />
-        <path d="M22 4L12 14.01l-3-3" />
-      </svg>
-    ),
-    error: (
-      <svg
-        width="20"
-        height="20"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        strokeWidth="2"
-      >
-        <circle cx="12" cy="12" r="10" />
-        <path d="M15 9l-6 6M9 9l6 6" />
-      </svg>
-    ),
-    warning: (
-      <svg
-        width="20"
-        height="20"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        strokeWidth="2"
-      >
-        <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" />
-        <path d="M12 9v4M12 17h.01" />
-      </svg>
-    ),
-    info: (
-      <svg
-        width="20"
-        height="20"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        strokeWidth="2"
-      >
-        <circle cx="12" cy="12" r="10" />
-        <path d="M12 16v-4M12 8h.01" />
-      </svg>
-    ),
+  const [isPaused, setIsPaused] = React.useState(false);
+  const timerRef = React.useRef<NodeJS.Timeout | null>(null);
+
+  const startTimer = () => {
+    if (timerRef.current) clearTimeout(timerRef.current);
+    timerRef.current = setTimeout(onClose, 5000);
+  };
+
+  const clearTimer = () => {
+    if (timerRef.current) clearTimeout(timerRef.current);
   };
 
+  React.useEffect(() => {
+    if (!isPaused) {
+      startTimer();
+    } else {
+      clearTimer();
+    }
+    return clearTimer;
+  }, [isPaused, onClose]);
+
+  const Icon = {
+    success: CheckCircle2,
+    error: ShieldAlert,
+    warning: AlertTriangle,
+    info: Info,
+  }[type];
+
   return (
-    <div className={`kyro-toast kyro-toast-${type}`}>
-      <span className="kyro-toast-icon">{icons[type]}</span>
-      <span className="kyro-toast-message">{message}</span>
-      <button type="button" className="kyro-toast-close" onClick={onClose}>
-        <svg
-          width="16"
-          height="16"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          strokeWidth="2"
-        >
-          <path d="M18 6L6 18M6 6l12 12" />
-        </svg>
+    <div 
+      className={`kyro-toast kyro-toast-${type} group animate-in fade-in slide-in-from-right-4 duration-300`}
+      onMouseEnter={() => setIsPaused(true)}
+      onMouseLeave={() => setIsPaused(false)}
+    >
+      <div className="kyro-toast-accent" />
+      <div className="kyro-toast-icon-container">
+        <Icon className="w-4 h-4" />
+      </div>
+      <div className="kyro-toast-content">
+        <p className="kyro-toast-message">{message}</p>
+      </div>
+      <button 
+        type="button" 
+        className="kyro-toast-close group-hover:opacity-100 opacity-40 transition-opacity" 
+        onClick={onClose}
+      >
+        <X className="w-3.5 h-3.5" />
       </button>
     </div>
   );
 }
 
-export function ToastProvider({
-  children,
-  toasts = [],
-  addToast = () => {},
-  removeToast = () => {},
-}: {
+interface ToastProviderProps {
   children: ReactNode;
-  toasts?: Toast[];
-  addToast?: (type: Toast["type"], message: string) => void;
-  removeToast?: (id: string) => void;
-}) {
-  return (
-    <ToastContext.Provider value={{ toasts, addToast, removeToast }}>
-      {children}
-    </ToastContext.Provider>
-  );
+}
+
+export function ToastProvider({ children }: ToastProviderProps) {
+  return <>{children}</>;
 }
 
 export function useToast() {
-  const context = useContext(ToastContext);
-  if (!context) {
-    throw new Error("useToast must be used within a ToastProvider");
-  }
-  return context;
+  const addToast = useToastStore((state) => state.addToast);
+  const removeToast = useToastStore((state) => state.removeToast);
+  const toasts = useToastStore((state) => state.toasts);
+
+  return { toasts, addToast, removeToast };
 }

package/src/components/ui/Toaster.tsx

@@ -0,0 +1,18 @@
+import { useToastStore } from "../../lib/stores";
+import { Toast } from "./Toast";
+
+export function Toaster() {
+  console.log('Toaster mounted');
+  const toasts = useToastStore((state) => state.toasts);
+  const removeToast = useToastStore((state) => state.removeToast);
+
+  return (
+    <div className="kyro-toasts-container" style={{ position: "fixed", bottom: "24px", right: "24px", display: "flex", flexDirection: "column", gap: "12px", zIndex: 9999, pointerEvents: "none" }}>
+      {toasts.map((t) => (
+        <div key={t.id} style={{ pointerEvents: "auto" }}>
+          <Toast type={t.type} message={t.message} onClose={() => removeToast(t.id)} />
+        </div>
+      ))}
+    </div>
+  );
+}