@kyro-cms/admin 0.1.5 → 0.1.7

package/src/components/ui/Modal.tsx

@@ -1,4 +1,15 @@
 import React, { useEffect, type ReactNode } from "react";
+import { createPortal } from "react-dom";
+
+export function ModalContent({ children }: { children: ReactNode }) {
+  return <div className="text-[var(--kyro-text-secondary)]">{children}</div>;
+}
+
+export function ModalActions({ children }: { children: ReactNode }) {
+  return (
+    <div className="flex items-center justify-end gap-3 mt-6">{children}</div>
+  );
+}
 
 interface ModalProps {
   open: boolean;
@@ -7,6 +18,7 @@ interface ModalProps {
   children: ReactNode;
   footer?: ReactNode;
   size?: "sm" | "md" | "lg";
+  variant?: "default" | "danger";
 }
 
 export function Modal({
@@ -16,6 +28,7 @@ export function Modal({
   children,
   footer,
   size = "md",
+  variant = "default",
 }: ModalProps) {
   useEffect(() => {
     const handleEscape = (e: KeyboardEvent) => {
@@ -41,20 +54,27 @@ export function Modal({
     lg: "max-w-2xl",
   };
 
-  return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center">
+  return createPortal(
+    <div className="fixed inset-0 z-[9999] flex items-center justify-center">
       <div
         className="absolute inset-0 bg-black/50 backdrop-blur-sm"
         onClick={onClose}
       />
       <div
-        className={`relative w-full ${sizeClasses[size]} mx-4 bg-white rounded-xl shadow-2xl animate-in fade-in zoom-in-95 duration-200`}
+        className={`relative w-full ${sizeClasses[size]} mx-4 bg-[var(--kyro-surface)] rounded-lg shadow-2xl animate-in fade-in zoom-in-95 duration-200 border ${
+          variant === "danger"
+            ? "border-red-500/20"
+            : "border-[var(--kyro-border)]"
+        }`}
       >
-        <div className="flex items-center justify-between px-6 py-4 border-b border-gray-200">
-          <h2 className="text-lg font-semibold text-gray-900">{title}</h2>
+        <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}
+          </h2>
           <button
+            type="button"
             onClick={onClose}
-            className="p-1 text-gray-400 hover:text-gray-600 rounded-lg hover:bg-gray-100 transition-colors"
+            className="p-1 text-[var(--kyro-text-muted)] hover:text-[var(--kyro-text-primary)] rounded-lg hover:bg-[var(--kyro-surface-accent)] transition-colors"
           >
             <svg
               width="20"
@@ -70,12 +90,13 @@ export function Modal({
         </div>
         <div className="px-6 py-4">{children}</div>
         {footer && (
-          <div className="flex items-center justify-end gap-3 px-6 py-4 border-t border-gray-200 bg-gray-50 rounded-b-xl">
+          <div className="flex items-center justify-end gap-3 px-6 py-4 border-t border-[var(--kyro-border)] bg-[var(--kyro-surface-accent)] rounded-b-lg">
             {footer}
           </div>
         )}
       </div>
-    </div>
+    </div>,
+    document.body,
   );
 }
 
@@ -111,17 +132,21 @@ export function ConfirmModal({
       footer={
         <>
           <button
+            type="button"
             onClick={onClose}
             disabled={loading}
-            className="kyro-btn kyro-btn-secondary kyro-btn-md"
+            className="px-4 py-2 rounded-lg font-medium text-sm border border-[var(--kyro-border)] text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-surface-accent)] hover:text-[var(--kyro-text-primary)] transition-colors"
           >
             {cancelLabel}
           </button>
           <button
+            type="button"
             onClick={onConfirm}
             disabled={loading}
-            className={`kyro-btn kyro-btn-md ${
-              variant === "danger" ? "kyro-btn-danger" : "kyro-btn-primary"
+            className={`px-4 py-2 rounded-lg font-medium text-sm transition-colors ${
+              variant === "danger"
+                ? "bg-red-500 text-white hover:bg-red-600"
+                : "bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] hover:opacity-90"
             }`}
           >
             {loading ? "Loading..." : confirmLabel}
@@ -129,7 +154,7 @@ export function ConfirmModal({
         </>
       }
     >
-      <p className="text-gray-600">{message}</p>
+      <p className="text-[var(--kyro-text-secondary)]">{message}</p>
     </Modal>
   );
 }

package/src/components/ui/PromptModal.tsx

@@ -0,0 +1,94 @@
+import React, { useState } from "react";
+import { createPortal } from "react-dom";
+
+interface PromptModalProps {
+  open: boolean;
+  onClose: () => void;
+  onSubmit: (value: string) => void;
+  title: string;
+  placeholder?: string;
+  defaultValue?: string;
+}
+
+export function PromptModal({
+  open,
+  onClose,
+  onSubmit,
+  title,
+  placeholder = "",
+  defaultValue = "",
+}: PromptModalProps) {
+  const [value, setValue] = useState(defaultValue);
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (value.trim()) {
+      onSubmit(value.trim());
+      setValue("");
+      onClose();
+    }
+  };
+
+  if (!open) return null;
+
+  return createPortal(
+    <div className="fixed inset-0 z-[9999] flex items-center justify-center">
+      <div
+        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="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}
+          </h2>
+          <button
+            type="button"
+            onClick={onClose}
+            className="p-1 text-[var(--kyro-text-muted)] hover:text-[var(--kyro-text-primary)] rounded-lg hover:bg-[var(--kyro-surface-accent)] transition-colors"
+          >
+            <svg
+              width="20"
+              height="20"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+            >
+              <path d="M18 6L6 18M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+        <form onSubmit={handleSubmit}>
+          <div className="px-6 py-4">
+            <input
+              type="text"
+              value={value}
+              onChange={(e) => setValue(e.target.value)}
+              placeholder={placeholder}
+              autoFocus
+              className="w-full px-3 py-2 border border-[var(--kyro-input-border)] rounded-lg bg-[var(--kyro-input-bg)] text-[var(--kyro-text-primary)] placeholder-[var(--kyro-text-muted)] focus:outline-none focus:ring-2 focus:ring-[var(--kyro-sidebar-active)] focus:border-transparent"
+            />
+          </div>
+          <div className="flex items-center justify-end gap-3 px-6 py-4 border-t border-[var(--kyro-border)] bg-[var(--kyro-surface-accent)] rounded-b-lg">
+            <button
+              type="button"
+              onClick={onClose}
+              className="px-4 py-2 rounded-lg font-medium text-sm border border-[var(--kyro-border)] text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-surface-accent)] hover:text-[var(--kyro-text-primary)] transition-colors"
+            >
+              Cancel
+            </button>
+            <button
+              type="submit"
+              disabled={!value.trim()}
+              className="px-4 py-2 rounded-lg font-medium text-sm bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] hover:opacity-90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+              Confirm
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>,
+    document.body,
+  );
+}

package/src/components/ui/SlidePanel.tsx

@@ -1,11 +1,13 @@
-import React, { useEffect, useRef, type ReactNode } from "react";
+import React, { useEffect, useRef, useState, type ReactNode } from "react";
+import { createPortal } from "react-dom";
 
 interface SlidePanelProps {
   open: boolean;
   onClose: () => void;
   title: string;
   children: ReactNode;
-  width?: "sm" | "md" | "lg";
+  width?: "sm" | "md" | "lg" | "xl";
+  showOverlay?: boolean;
 }
 
 export function SlidePanel({
@@ -14,8 +16,14 @@ export function SlidePanel({
   title,
   children,
   width = "md",
+  showOverlay = false,
 }: SlidePanelProps) {
   const panelRef = useRef<HTMLDivElement>(null);
+  const [hydrated, setHydrated] = useState(false);
+
+  useEffect(() => {
+    setHydrated(true);
+  }, []);
 
   useEffect(() => {
     const handleEscape = (e: KeyboardEvent) => {
@@ -35,28 +43,37 @@ export function SlidePanel({
 
   const widthClasses = {
     sm: "w-[320px]",
-    md: "w-[480px]",
-    lg: "w-[640px]",
+    md: "w-[400px]",
+    lg: "w-[500px]",
+    xl: "w-[600px]",
   };
 
-  if (!open) return null;
+  if (!open || !hydrated) return null;
 
-  return (
-    <div className="fixed inset-0 z-50">
-      <div className="absolute inset-0 bg-black/30" onClick={onClose} />
+  return createPortal(
+    <>
+      {showOverlay && (
+        <div
+          className="fixed inset-0 z-[99998] bg-black/50 backdrop-blur-sm"
+          onClick={onClose}
+        />
+      )}
       <div
         ref={panelRef}
-        className={`absolute right-0 top-0 h-full ${widthClasses[width]} bg-white shadow-2xl flex flex-col animate-in slide-in-from-right duration-300`}
+        className={`fixed right-0 top-0 bottom-0 z-[99999] ${widthClasses[width]} bg-[var(--kyro-surface)] border-l border-[var(--kyro-border)] shadow-2xl flex flex-col animate-slideIn`}
       >
-        <div className="flex items-center justify-between px-6 py-4 border-b border-gray-200">
-          <h2 className="text-lg font-semibold text-gray-900">{title}</h2>
+        <div className="flex items-center justify-between px-4 py-3 border-b border-[var(--kyro-border)] bg-[var(--kyro-surface)]">
+          <h2 className="text-sm font-semibold text-[var(--kyro-text-primary)]">
+            {title}
+          </h2>
           <button
+            type="button"
             onClick={onClose}
-            className="p-1 text-gray-400 hover:text-gray-600 rounded-lg hover:bg-gray-100 transition-colors"
+            className="p-1.5 text-[var(--kyro-text-muted)] hover:text-[var(--kyro-text-primary)] hover:bg-[var(--kyro-surface-accent)] rounded-lg transition-colors"
           >
             <svg
-              width="20"
-              height="20"
+              width="16"
+              height="16"
               viewBox="0 0 24 24"
               fill="none"
               stroke="currentColor"
@@ -66,8 +83,18 @@ export function SlidePanel({
             </svg>
           </button>
         </div>
-        <div className="flex-1 overflow-y-auto p-6">{children}</div>
+        <div className="flex-1 overflow-y-auto p-4">{children}</div>
       </div>
-    </div>
+      <style>{`
+        @keyframes slideIn {
+          from { transform: translateX(100%); }
+          to { transform: translateX(0); }
+        }
+        .animate-slideIn {
+          animation: slideIn 300ms ease-out;
+        }
+      `}</style>
+    </>,
+    document.body,
   );
 }

package/src/components/ui/Toast.tsx

@@ -1,21 +1,42 @@
-import { createContext, useContext, type ReactNode } from 'react';
+import {
+  createContext,
+  useContext,
+  useState,
+  type ReactNode,
+  useCallback,
+} from "react";
 
 interface Toast {
   id: string;
-  type: 'success' | 'error' | 'info' | 'warning';
+  type: "success" | "error" | "info" | "warning";
   message: string;
 }
 
 interface ToastContextType {
   toasts: Toast[];
-  addToast: (type: Toast['type'], message: string) => void;
+  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 }]);
+  }, []);
+
+  const removeToast = useCallback((id: string) => {
+    setToasts((prev) => prev.filter((t) => t.id !== id));
+  }, []);
+
+  return { toasts, addToast, removeToast };
+}
+
 interface ToastProps {
-  type: Toast['type'];
+  type: Toast["type"];
   message: string;
   onClose: () => void;
 }
@@ -23,37 +44,72 @@ interface ToastProps {
 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">
+      <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">
+      <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">
+      <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">
+      <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>
-    )
+    ),
   };
 
   return (
     <div className={`kyro-toast kyro-toast-${type}`}>
       <span className="kyro-toast-icon">{icons[type]}</span>
       <span className="kyro-toast-message">{message}</span>
-      <button className="kyro-toast-close" onClick={onClose}>
-        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+      <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>
       </button>
@@ -61,9 +117,19 @@ export function Toast({ type, message, onClose }: ToastProps) {
   );
 }
 
-export function ToastProvider({ children }: { children: ReactNode }) {
+export function ToastProvider({
+  children,
+  toasts = [],
+  addToast = () => {},
+  removeToast = () => {},
+}: {
+  children: ReactNode;
+  toasts?: Toast[];
+  addToast?: (type: Toast["type"], message: string) => void;
+  removeToast?: (id: string) => void;
+}) {
   return (
-    <ToastContext.Provider value={{ toasts: [], addToast: () => {}, removeToast: () => {} }}>
+    <ToastContext.Provider value={{ toasts, addToast, removeToast }}>
       {children}
     </ToastContext.Provider>
   );
@@ -72,7 +138,7 @@ export function ToastProvider({ children }: { children: ReactNode }) {
 export function useToast() {
   const context = useContext(ToastContext);
   if (!context) {
-    throw new Error('useToast must be used within a ToastProvider');
+    throw new Error("useToast must be used within a ToastProvider");
   }
   return context;
 }

package/src/env.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="astro/client" />
+
+declare global {
+  namespace App {
+    interface Locals {
+      user?: {
+        id: string;
+        email: string;
+        role: string;
+        tenantId?: string;
+      };
+    }
+  }
+}
+
+export {};

package/src/env.ts

@@ -0,0 +1,20 @@
+import fs from "fs";
+import path from "path";
+
+const envPath = path.join(process.cwd(), "..", ".env");
+if (fs.existsSync(envPath)) {
+  const envContent = fs.readFileSync(envPath, "utf-8");
+  envContent.split("\n").forEach((line) => {
+    const trimmed = line.trim();
+    if (trimmed && !trimmed.startsWith("#")) {
+      const eqIndex = trimmed.indexOf("=");
+      if (eqIndex > 0) {
+        const key = trimmed.substring(0, eqIndex);
+        const value = trimmed.substring(eqIndex + 1);
+        if (!process.env[key]) {
+          process.env[key] = value;
+        }
+      }
+    }
+  });
+}

package/src/index.ts

@@ -21,7 +21,6 @@ export {
   type ThemeMode,
 } from "./components/ThemeProvider";
 export * from "./components/layout/Header";
-export * from "./components/layout/Sidebar";
 export * from "./components/ui/Button";
 export * from "./components/ui/Badge";
 export * from "./components/ui/Spinner";