@kyro-cms/admin 0.1.2

package/src/components/fields/DateField.tsx

@@ -0,0 +1,42 @@
+import type { DateField as DateFieldType } from '@kyro-cms/core';
+
+interface DateFieldComponentProps {
+  field: DateFieldType;
+  value?: string;
+  onChange?: (value: string) => void;
+  error?: string;
+  disabled?: boolean;
+}
+
+export default function DateField({ field, value = '', onChange, error, disabled }: DateFieldComponentProps) {
+  return (
+    <div className="space-y-1">
+      {field.label && (
+        <label className="block text-sm font-medium text-gray-700">
+          {field.label}
+          {field.required && <span className="text-red-500 ml-1">*</span>}
+        </label>
+      )}
+      <input
+        type={field.time ? 'datetime-local' : 'date'}
+        value={value}
+        onChange={(e) => onChange?.(e.target.value)}
+        disabled={disabled || field.admin?.readOnly}
+        min={field.minDate}
+        max={field.maxDate}
+        required={field.required}
+        className={`w-full px-3 py-2 border rounded-md text-sm transition-colors ${
+          error
+            ? 'border-red-300 focus:border-red-500 focus:ring-red-500'
+            : 'border-gray-300 focus:border-blue-500 focus:ring-blue-500'
+        } ${disabled || field.admin?.readOnly ? 'bg-gray-50 text-gray-500' : 'bg-white'}`}
+      />
+      {field.admin?.description && !error && (
+        <p className="text-xs text-gray-500">{field.admin.description}</p>
+      )}
+      {error && (
+        <p className="text-xs text-red-600">{error}</p>
+      )}
+    </div>
+  );
+}

package/src/components/fields/NumberField.tsx

@@ -0,0 +1,44 @@
+import type { NumberField as NumberFieldType } from '@kyro-cms/core';
+
+interface NumberFieldComponentProps {
+  field: NumberFieldType;
+  value?: number;
+  onChange?: (value: number) => void;
+  error?: string;
+  disabled?: boolean;
+}
+
+export default function NumberField({ field, value, onChange, error, disabled }: NumberFieldComponentProps) {
+  return (
+    <div className="space-y-1">
+      {field.label && (
+        <label className="block text-sm font-medium text-gray-700">
+          {field.label}
+          {field.required && <span className="text-red-500 ml-1">*</span>}
+        </label>
+      )}
+      <input
+        type="number"
+        value={value ?? ''}
+        onChange={(e) => onChange?.(parseFloat(e.target.value) || 0)}
+        placeholder={field.admin?.placeholder}
+        disabled={disabled || field.admin?.readOnly}
+        min={field.min}
+        max={field.max}
+        step={field.step || (field.integer ? 1 : 'any')}
+        required={field.required}
+        className={`w-full px-3 py-2 border rounded-md text-sm transition-colors ${
+          error
+            ? 'border-red-300 focus:border-red-500 focus:ring-red-500'
+            : 'border-gray-300 focus:border-blue-500 focus:ring-blue-500'
+        } ${disabled || field.admin?.readOnly ? 'bg-gray-50 text-gray-500' : 'bg-white'}`}
+      />
+      {field.admin?.description && !error && (
+        <p className="text-xs text-gray-500">{field.admin.description}</p>
+      )}
+      {error && (
+        <p className="text-xs text-red-600">{error}</p>
+      )}
+    </div>
+  );
+}

package/src/components/fields/RelationshipField.tsx

@@ -0,0 +1,87 @@
+import { useState } from 'react';
+import type { RelationshipField as RelationshipFieldType } from '@kyro-cms/core';
+
+interface RelationshipFieldComponentProps {
+  field: RelationshipFieldType;
+  value?: string | string[];
+  onChange?: (value: string | string[]) => void;
+  error?: string;
+  disabled?: boolean;
+}
+
+export default function RelationshipField({ field, value, onChange, error, disabled }: RelationshipFieldComponentProps) {
+  const [searchQuery, setSearchQuery] = useState('');
+  const [isOpen, setIsOpen] = useState(false);
+
+  const relationTo = Array.isArray(field.relationTo) ? field.relationTo : [field.relationTo];
+
+  return (
+    <div className="space-y-1">
+      {field.label && (
+        <label className="block text-sm font-medium text-gray-700">
+          {field.label}
+          {field.required && <span className="text-red-500 ml-1">*</span>}
+        </label>
+      )}
+      <div className="relative">
+        <input
+          type="text"
+          value={searchQuery}
+          onChange={(e) => {
+            setSearchQuery(e.target.value);
+            setIsOpen(true);
+          }}
+          onFocus={() => setIsOpen(true)}
+          onBlur={() => setTimeout(() => setIsOpen(false), 200)}
+          placeholder={`Search ${relationTo.join(' or ')}...`}
+          disabled={disabled || field.admin?.readOnly}
+          className="w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:border-blue-500 focus:ring-blue-500"
+        />
+        
+        {isOpen && (
+          <div className="absolute z-10 w-full mt-1 bg-white border border-gray-200 rounded-md shadow-lg max-h-60 overflow-auto">
+            <div className="p-2 text-sm text-gray-500 text-center">
+              Search results will appear here
+            </div>
+            {/* TODO: Implement actual search with API integration */}
+          </div>
+        )}
+
+        {/* Selected value display */}
+        {value && (
+          <div className="mt-2 flex flex-wrap gap-2">
+            {(Array.isArray(value) ? value : [value]).map((v, i) => (
+              <span
+                key={i}
+                className="inline-flex items-center gap-1 px-2 py-1 bg-blue-50 text-blue-700 text-sm rounded-md"
+              >
+                {v}
+                {!disabled && !field.admin?.readOnly && (
+                  <button
+                    type="button"
+                    onClick={() => {
+                      if (Array.isArray(value)) {
+                        onChange?.(value.filter((_, idx) => idx !== i));
+                      } else {
+                        onChange?.('');
+                      }
+                    }}
+                    className="ml-1 text-blue-500 hover:text-blue-700"
+                  >
+                    ×
+                  </button>
+                )}
+              </span>
+            ))}
+          </div>
+        )}
+      </div>
+      {field.admin?.description && !error && (
+        <p className="text-xs text-gray-500">{field.admin.description}</p>
+      )}
+      {error && (
+        <p className="text-xs text-red-600">{error}</p>
+      )}
+    </div>
+  );
+}

package/src/components/fields/SelectField.tsx

@@ -0,0 +1,56 @@
+import type { SelectField as SelectFieldType } from '@kyro-cms/core';
+
+interface SelectFieldComponentProps {
+  field: SelectFieldType;
+  value?: string | string[];
+  onChange?: (value: string | string[]) => void;
+  error?: string;
+  disabled?: boolean;
+}
+
+export default function SelectField({ field, value, onChange, error, disabled }: SelectFieldComponentProps) {
+  return (
+    <div className="space-y-1">
+      {field.label && (
+        <label className="block text-sm font-medium text-gray-700">
+          {field.label}
+          {field.required && <span className="text-red-500 ml-1">*</span>}
+        </label>
+      )}
+      <select
+        value={field.hasMany ? (Array.isArray(value) ? value.join(',') : '') : (value || '')}
+        onChange={(e) => {
+          if (field.hasMany) {
+            const selected = e.target.value ? e.target.value.split(',') : [];
+            onChange?.(selected);
+          } else {
+            onChange?.(e.target.value);
+          }
+        }}
+        multiple={field.hasMany}
+        disabled={disabled || field.admin?.readOnly}
+        required={field.required}
+        className={`w-full px-3 py-2 border rounded-md text-sm transition-colors ${
+          error
+            ? 'border-red-300 focus:border-red-500 focus:ring-red-500'
+            : 'border-gray-300 focus:border-blue-500 focus:ring-blue-500'
+        } ${disabled || field.admin?.readOnly ? 'bg-gray-50 text-gray-500' : 'bg-white'}`}
+      >
+        {!field.required && (
+          <option value="">Select...</option>
+        )}
+        {field.options.map((option) => (
+          <option key={option.value} value={option.value}>
+            {option.label}
+          </option>
+        ))}
+      </select>
+      {field.admin?.description && !error && (
+        <p className="text-xs text-gray-500">{field.admin.description}</p>
+      )}
+      {error && (
+        <p className="text-xs text-red-600">{error}</p>
+      )}
+    </div>
+  );
+}

package/src/components/fields/TextField.tsx

@@ -0,0 +1,49 @@
+import type { TextField as TextFieldType } from '@kyro-cms/core';
+
+interface TextFieldComponentProps {
+  field: TextFieldType;
+  value?: string;
+  onChange?: (value: string) => void;
+  error?: string;
+  disabled?: boolean;
+}
+
+export default function TextField({ field, value = '', onChange, error, disabled }: TextFieldComponentProps) {
+  const inputType = field.variant === 'email' ? 'email' 
+    : field.variant === 'password' ? 'password'
+    : field.variant === 'url' ? 'url'
+    : 'text';
+
+  return (
+    <div className="space-y-1">
+      {field.label && (
+        <label className="block text-sm font-medium text-gray-700">
+          {field.label}
+          {field.required && <span className="text-red-500 ml-1">*</span>}
+        </label>
+      )}
+      <input
+        type={inputType}
+        value={value}
+        onChange={(e) => onChange?.(e.target.value)}
+        placeholder={field.admin?.placeholder}
+        disabled={disabled || field.admin?.readOnly}
+        minLength={field.minLength}
+        maxLength={field.maxLength}
+        pattern={field.pattern}
+        required={field.required}
+        className={`w-full px-3 py-2 border rounded-md text-sm transition-colors ${
+          error
+            ? 'border-red-300 focus:border-red-500 focus:ring-red-500'
+            : 'border-gray-300 focus:border-blue-500 focus:ring-blue-500'
+        } ${disabled || field.admin?.readOnly ? 'bg-gray-50 text-gray-500' : 'bg-white'}`}
+      />
+      {field.admin?.description && !error && (
+        <p className="text-xs text-gray-500">{field.admin.description}</p>
+      )}
+      {error && (
+        <p className="text-xs text-red-600">{error}</p>
+      )}
+    </div>
+  );
+}

package/src/components/index.ts

@@ -0,0 +1,30 @@
+export { Admin } from "./Admin";
+export { ListView } from "./ListView";
+export { DetailView } from "./DetailView";
+export { CreateView } from "./CreateView";
+export { AutoForm } from "./AutoForm";
+export {
+  ActionBar,
+  type ActionBarProps,
+  type DocumentStatus,
+  type SaveStatus,
+} from "./ActionBar";
+export { BulkActionsBar } from "./BulkActionsBar";
+export { StatusBadge, CountBadge } from "./StatusBadge";
+export { VersionHistoryPanel } from "./VersionHistoryPanel";
+export {
+  ThemeProvider,
+  LightThemeProvider,
+  DarkThemeProvider,
+  useTheme,
+  type ThemeMode,
+} from "./ThemeProvider";
+export * from "./layout/Header";
+export * from "./layout/Sidebar";
+export * from "./ui/Button";
+export * from "./ui/Badge";
+export * from "./ui/Spinner";
+export * from "./ui/Toast";
+export { Dropdown, DropdownItem, DropdownSeparator } from "./ui/Dropdown";
+export { Modal, ConfirmModal } from "./ui/Modal";
+export { SlidePanel } from "./ui/SlidePanel";

package/src/components/layout/Breadcrumbs.tsx

@@ -0,0 +1,36 @@
+interface BreadcrumbItem {
+  label: string;
+  href?: string;
+}
+
+interface BreadcrumbsProps {
+  items: BreadcrumbItem[];
+}
+
+export default function Breadcrumbs({ items }: BreadcrumbsProps) {
+  return (
+    <nav className="mb-4" aria-label="Breadcrumb">
+      <ol className="flex items-center gap-2 text-sm">
+        {items.map((item, index) => (
+          <li key={index} className="flex items-center gap-2">
+            {index > 0 && (
+              <svg className="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+              </svg>
+            )}
+            {item.href ? (
+              <a
+                href={item.href}
+                className="text-gray-500 hover:text-gray-700 transition-colors"
+              >
+                {item.label}
+              </a>
+            ) : (
+              <span className="text-gray-900 font-medium">{item.label}</span>
+            )}
+          </li>
+        ))}
+      </ol>
+    </nav>
+  );
+}

package/src/components/layout/Header.tsx

@@ -0,0 +1,37 @@
+import type { ReactNode } from 'react';
+
+interface HeaderProps {
+  title: string;
+  onMenuClick: () => void;
+  actions?: ReactNode;
+}
+
+export function Header({ title, onMenuClick, actions }: HeaderProps) {
+  return (
+    <header className="kyro-header">
+      <div className="kyro-header-left">
+        <button
+          className="kyro-header-menu"
+          onClick={onMenuClick}
+          aria-label="Toggle menu"
+        >
+          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+            <path d="M3 12h18M3 6h18M3 18h18" />
+          </svg>
+        </button>
+        <h1 className="kyro-header-title">{title}</h1>
+      </div>
+      <div className="kyro-header-right">
+        {actions}
+        <div className="kyro-header-user">
+          <button className="kyro-header-user-btn">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+              <circle cx="12" cy="8" r="4" />
+              <path d="M4 20c0-4 4-6 8-6s8 2 8 6" />
+            </svg>
+          </button>
+        </div>
+      </div>
+    </header>
+  );
+}

package/src/components/layout/Layout.tsx

@@ -0,0 +1,25 @@
+import { type CollectionConfig } from '@kyro-cms/core';
+
+interface LayoutProps {
+  children: any;
+  collections?: CollectionConfig[];
+  currentSlug?: string;
+}
+
+export default function Layout({ children, collections = [], currentSlug }: LayoutProps) {
+  return (
+    <div className="min-h-screen bg-gray-50">
+      <div className="flex">
+        {/* Sidebar placeholder - will be populated by Sidebar component */}
+        <div id="sidebar-root" className="hidden lg:block">
+          {/* Sidebar rendered here */}
+        </div>
+        
+        {/* Main content */}
+        <main className="flex-1 min-w-0">
+          {children}
+        </main>
+      </div>
+    </div>
+  );
+}