@kyro-cms/admin 0.3.2 → 0.3.5

package/src/components/fields/FieldLayout.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+import type { Field } from "@kyro-cms/core/client";
+
+interface FieldLayoutProps {
+  field: Field;
+  error?: string;
+  children: React.ReactNode;
+  hideLabel?: boolean;
+}
+
+export default function FieldLayout({
+  field,
+  error,
+  children,
+  hideLabel = false,
+}: FieldLayoutProps) {
+  return (
+    <div className="space-y-2.5 w-full group">
+      {field.label && !hideLabel && (
+        <div className="flex justify-between items-end mb-1">
+          <label className="block text-xs font-bold  tracking-widest text-[var(--kyro-text-secondary)] opacity-50 group-focus-within:opacity-100 group-focus-within:text-[var(--kyro-primary)] transition-all duration-300">
+            {field.label}
+            {field.required && (
+              <span className="text-[var(--kyro-error)] ml-1">*</span>
+            )}
+          </label>
+        </div>
+      )}
+
+      <div className="relative transform transition-transform duration-200 focus-within:scale-[1.002]">
+        {children}
+      </div>
+
+      {(field.admin?.description || error) && (
+        <div className="flex flex-col gap-1.5 px-1">
+          {field.admin?.description && !error && (
+            <p className="text-[11px] leading-relaxed text-[var(--kyro-text-muted)] font-medium opacity-60 italic">
+              {field.admin.description}
+            </p>
+          )}
+          {error && (
+            <p className="text-[11px] leading-relaxed text-[var(--kyro-error)] font-bold flex items-center gap-2 animate-in fade-in slide-in-from-top-1 duration-300">
+              <span className="w-1.5 h-1.5 rounded-full bg-[var(--kyro-error)] shadow-[0_0_8px_var(--kyro-error)]" />
+              {error}
+            </p>
+          )}
+        </div>
+      )}
+    </div>
+
+  );
+}

package/src/components/fields/GroupLayout.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import type { Field } from "@kyro-cms/core/client";
+
+interface GroupLayoutProps {
+  field: Field;
+  value: Record<string, unknown> | null;
+  onChange: (value: Record<string, unknown>) => void;
+  renderField: (
+    field: Field,
+    parentData: Record<string, unknown>,
+    onChange: (value: unknown) => void,
+  ) => React.ReactNode;
+}
+
+export function GroupLayout({
+  field,
+  value,
+  onChange,
+  renderField,
+}: GroupLayoutProps) {
+  const groupData = value || {};
+
+  return (
+    <div className="kyro-form-group border border-[var(--kyro-border)] rounded-[var(--kyro-radius-lg)] p-6 bg-[var(--kyro-surface-accent)]/30">
+      <h3 className="text-sm font-bold  tracking-widest text-[var(--kyro-text-primary)] mb-6 border-b border-[var(--kyro-border)] pb-2 inline-block">
+        {field.label || field.name}
+      </h3>
+      <div className="space-y-6">
+        {(field as Field & { fields?: Field[] }).fields.map((f: Field) =>
+          renderField(f, groupData, onChange),
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/fields/JSONField.tsx

@@ -3,15 +3,15 @@ import type { JSONField as JSONFieldType } from "@kyro-cms/core/client";
 
 interface JSONFieldProps {
   field: JSONFieldType;
-  value?: any;
-  onChange?: (value: any) => void;
+  value?: unknown;
+  onChange?: (value: unknown) => void;
   error?: string;
   disabled?: boolean;
 }
 
 interface TreeNode {
   key: string;
-  value: any;
+  value: unknown;
   type: "object" | "array" | "string" | "number" | "boolean" | "null";
   path: string[];
   collapsed?: boolean;
@@ -232,7 +232,7 @@ const TreeView: React.FC<{ data: TreeNode }> = ({ data }) => {
     if (node.type === "array") {
       return (
         <div className="pl-4 border-l border-[var(--kyro-border)]">
-          {node.value.map((item: any, index: number) => (
+          {node.value.map((item: unknown, index: number) => (
             <TreeNodeView
               key={index}
               name={String(index)}
@@ -315,7 +315,7 @@ const TreeView: React.FC<{ data: TreeNode }> = ({ data }) => {
   );
 };
 
-const TreeNodeView: React.FC<{ name: string; value: any; path: string[] }> = ({
+const TreeNodeView: React.FC<{ name: string; value: unknown; path: string[] }> = ({
   name,
   value,
   path,
@@ -325,13 +325,13 @@ const TreeNodeView: React.FC<{ name: string; value: any; path: string[] }> = ({
   return <TreeView data={treeNode} />;
 };
 
-function getType(value: any): TreeNode["type"] {
+function getType(value: unknown): TreeNode["type"] {
   if (value === null) return "null";
   if (Array.isArray(value)) return "array";
   return typeof value as TreeNode["type"];
 }
 
-function buildTree(value: any, path: string[]): TreeNode {
+function buildTree(value: unknown, path: string[]): TreeNode {
   return {
     key: path[path.length - 1] || "root",
     value,

package/src/components/fields/LinkField.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { ExternalLink } from "lucide-react";
+import { ExternalLink } from "../ui/icons";
 
 interface LinkFieldProps {
   text?: string;

package/src/components/fields/MarkdownField.tsx

@@ -198,7 +198,7 @@ export const MarkdownField: React.FC<MarkdownFieldProps> = ({
       >
         {!showPreview ? (
           <textarea
-            value={value}
+            value={value == null ? "" : value}
             onChange={handleChange}
             disabled={disabled}
             rows={12}

package/src/components/fields/NumberField.tsx

@@ -1,4 +1,5 @@
 import type { NumberField as NumberFieldType } from "@kyro-cms/core/client";
+import FieldLayout from "./FieldLayout";
 
 interface NumberFieldComponentProps {
   field: NumberFieldType;
@@ -15,42 +16,28 @@ export default function NumberField({
   error,
   disabled,
 }: NumberFieldComponentProps) {
+  const isReadOnly = field.admin?.readOnly;
+
   return (
-    <div className="space-y-1">
-      {field.label && (
-        <label className="block text-sm font-medium text-[var(--kyro-text-primary)]">
-          {field.label}
-          {field.required && (
-            <span className="text-[var(--kyro-error)] ml-1">*</span>
-          )}
-        </label>
-      )}
+    <FieldLayout
+      field={field}
+      error={error}
+    >
       <input
         type="number"
+        id={field.name}
         value={value ?? ""}
         onChange={(e) => onChange?.(parseFloat(e.target.value) || 0)}
         placeholder={field.admin?.placeholder}
-        disabled={disabled || field.admin?.readOnly}
+        disabled={disabled || isReadOnly}
         min={field.min}
         max={field.max}
-        step={field.step || field.integer ? 1 : "any"}
+        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-[var(--kyro-error)] focus:border-[var(--kyro-error)] focus:ring-[var(--kyro-error)]"
-            : "border-[var(--kyro-border)] focus:border-[var(--kyro-primary)] focus:ring-[var(--kyro-primary)]"
-        } ${
-          disabled || field.admin?.readOnly
-            ? "bg-[var(--kyro-bg-secondary)] text-[var(--kyro-text-secondary)] opacity-50"
-            : "bg-[var(--kyro-surface)] text-[var(--kyro-text-primary)]"
+        className={`kyro-form-input ${
+          disabled || isReadOnly ? "opacity-50 cursor-not-allowed" : ""
         }`}
       />
-      {field.admin?.description && !error && (
-        <p className="text-xs text-[var(--kyro-text-muted)]">
-          {field.admin.description}
-        </p>
-      )}
-      {error && <p className="text-xs text-[var(--kyro-error)]">{error}</p>}
-    </div>
+    </FieldLayout>
   );
 }

package/src/components/fields/PortableTextField.tsx

@@ -18,15 +18,15 @@ interface PortableTextFieldProps {
       placeholder?: string;
     };
   };
-  value?: any;
-  onChange?: (value: any) => void;
+  value?: unknown;
+  onChange?: (value: unknown) => void;
   error?: string;
   disabled?: boolean;
 }
 
 const EditorLazy = lazy(() => import("./EditorClient"));
 
-function toPortableTextArray(value: any): any[] {
+function toPortableTextArray(value: unknown): Record<string, unknown>[] {
   if (Array.isArray(value)) {
     if (
       value.length > 0 &&
@@ -86,7 +86,7 @@ const PortableTextField: React.FC<PortableTextFieldProps> = ({
   }, [ptValue, isMounted]);
 
   const handleChange = useCallback(
-    (blocks: any[]) => {
+    (blocks: Record<string, unknown>[]) => {
       if (!blocks || !Array.isArray(blocks)) {
         onChange?.([]);
         return;

package/src/components/fields/PortableTextRenderer.tsx

@@ -3,7 +3,7 @@ import { PortableText } from "@portabletext/react";
 import type { PortableTextComponents } from "@portabletext/react";
 
 interface PortableTextRendererProps {
-  value: any[];
+  value: unknown[];
   className?: string;
 }
 

package/src/components/fields/RelationshipBlockField.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react";
-import { Search, Loader2, X } from "lucide-react";
+import { Search, Loader2, X } from "../ui/icons";
 import { apiGet, buildSearchQuery } from "../../lib/api";
 
 interface RelationshipBlockFieldProps {
@@ -8,7 +8,7 @@ interface RelationshipBlockFieldProps {
   selectedIds?: string[];
   selectedId?: string;
   labelField?: string;
-  onChange: (field: string, value: any) => void;
+  onChange: (field: string, value: unknown) => void;
   compact?: boolean;
 }
 
@@ -23,7 +23,7 @@ export const RelationshipBlockField: React.FC<RelationshipBlockFieldProps> = ({
 }) => {
   const [isOpen, setIsOpen] = useState(false);
   const [search, setSearch] = useState("");
-  const [options, setOptions] = useState<any[]>([]);
+  const [options, setOptions] = useState<Record<string, unknown>[]>([]);
   const [loading, setLoading] = useState(false);
   const [collections, setCollections] = useState<string[]>([]);
   const [loadingCollections, setLoadingCollections] = useState(true);
@@ -32,7 +32,7 @@ export const RelationshipBlockField: React.FC<RelationshipBlockFieldProps> = ({
     apiGet("/api/collections")
       .then((data) => {
         setCollections(
-          (data.collections || []).map((c: any) => c.slug || c.name || c),
+          (data.collections || []).map((c: Record<string, unknown>) => c.slug || c.name || c),
         );
         setLoadingCollections(false);
       })
@@ -55,7 +55,7 @@ export const RelationshipBlockField: React.FC<RelationshipBlockFieldProps> = ({
     if (isOpen) fetchOptions(search);
   }, [isOpen, search, relationTo, labelField]);
 
-  const getLabel = (opt: any) => {
+  const getLabel = (opt: Record<string, unknown>) => {
     return (
       opt?.[labelField] ||
       opt?.title ||
@@ -70,7 +70,7 @@ export const RelationshipBlockField: React.FC<RelationshipBlockFieldProps> = ({
 
   const activeIds = hasMany ? selectedIds : selectedId ? [selectedId] : [];
 
-  const handleSelect = (opt: any) => {
+  const handleSelect = (opt: Record<string, unknown>) => {
     if (hasMany) {
       if (activeIds.includes(opt.id)) {
         onChange(
@@ -97,26 +97,34 @@ export const RelationshipBlockField: React.FC<RelationshipBlockFieldProps> = ({
     ? "w-full px-2.5 py-1.5 border border-[var(--kyro-border)] rounded bg-[var(--kyro-bg-secondary)] text-sm text-[var(--kyro-text-primary)] focus:outline-none focus:ring-1 focus:ring-[var(--kyro-sidebar-active)] focus:border-transparent"
     : "w-full px-3 py-2.5 border border-[var(--kyro-border)] rounded-lg bg-[var(--kyro-bg-secondary)] text-sm text-[var(--kyro-text-primary)] focus:outline-none focus:ring-1 focus:ring-[var(--kyro-sidebar-active)] focus:border-transparent";
 
+  // Check if relationTo is a known single collection (not an array)
+  const isKnownCollection = relationTo && typeof relationTo === "string" && relationTo.length > 0;
+
   return (
     <div className={compact ? "space-y-2" : "space-y-4"}>
       <div className={compact ? "flex items-center gap-2" : "space-y-3"}>
-        {loadingCollections ? (
-          <div className={selectClass + " text-[var(--kyro-text-muted)]"}>
-            Loading...
-          </div>
-        ) : (
-          <select
-            value={relationTo}
-            onChange={(e) => onChange("relationTo", e.target.value)}
-            className={selectClass}
-          >
-            <option value="">Select collection...</option>
-            {collections.map((col) => (
-              <option key={col} value={col}>
-                {col}
-              </option>
-            ))}
-          </select>
+        {/* Hide collection selector if relationTo is known (single collection) */}
+        {!isKnownCollection && (
+          <>
+            {loadingCollections ? (
+              <div className={selectClass + " text-[var(--kyro-text-muted)]"}>
+                Loading...
+              </div>
+            ) : (
+              <select
+                value={relationTo}
+                onChange={(e) => onChange("relationTo", e.target.value)}
+                className={selectClass}
+              >
+                <option value="">Select collection...</option>
+                {collections.map((col) => (
+                  <option key={col} value={col}>
+                    {col}
+                  </option>
+                ))}
+              </select>
+            )}
+          </>
         )}
 
         {!compact && (

package/src/components/fields/RelationshipField.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState, useRef } from "react";
-import { Search, X, ChevronDown, Loader2 } from "lucide-react";
+import { Search, X, ChevronDown, Loader2 } from "../ui/icons";
 import { apiGet, buildSearchQuery } from "../../lib/api";
 
 interface RelationshipFieldProps {
@@ -30,7 +30,7 @@ export function RelationshipField({
 }: RelationshipFieldProps) {
   const [isOpen, setIsOpen] = useState(false);
   const [search, setSearch] = useState("");
-  const [options, setOptions] = useState<any[]>([]);
+  const [options, setOptions] = useState<Record<string, unknown>[]>([]);
   const [loading, setLoading] = useState(false);
   const containerRef = useRef<HTMLDivElement>(null);
 
@@ -49,9 +49,9 @@ export function RelationshipField({
       .then((data) => {
         setOptions((prev) => {
           const existingIds = new Set(prev.map((o) => o.id));
-          const newDocs = (data.docs || []).filter(
-            (d: any) => !existingIds.has(d.id),
-          );
+const newDocs = (data.docs || []).filter(
+             (d: Record<string, unknown>) => !existingIds.has(d.id as string),
+           );
           return [...prev, ...newDocs];
         });
         setLoading(false);
@@ -61,8 +61,8 @@ export function RelationshipField({
       });
   };
 
-  const fetchSelectedItems = () => {
-    const items: any[] = isMultiple
+const fetchSelectedItems = () => {
+     const items: (string | Record<string, unknown>)[] = isMultiple
       ? Array.isArray(value)
         ? value
         : []
@@ -106,7 +106,7 @@ export function RelationshipField({
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, []);
 
-  const getLabel = (opt: any) => {
+  const getLabel = (opt: Record<string, unknown>) => {
     return (
       opt?.title ||
       opt?.name ||
@@ -119,11 +119,11 @@ export function RelationshipField({
     );
   };
 
-  const getValueId = (val: any) => {
+  const getValueId = (val: string | Record<string, unknown>) => {
     return val?.id || val;
   };
 
-  const isSelected = (opt: any) => {
+  const isSelected = (opt: Record<string, unknown>) => {
     const optId = opt.id;
     if (!value) return false;
     if (isMultiple && Array.isArray(value)) {
@@ -132,7 +132,7 @@ export function RelationshipField({
     return getValueId(value) === optId;
   };
 
-  const handleSelect = (opt: any) => {
+  const handleSelect = (opt: Record<string, unknown>) => {
     const optId = opt.id;
     if (isMultiple) {
       const current = Array.isArray(value) ? value : [];
@@ -159,7 +159,7 @@ export function RelationshipField({
   const renderSelectedItems = () => {
     if (!value) return null;
 
-    let items: any[];
+    let items: (string | Record<string, unknown>)[];
     if (isMultiple) {
       items = Array.isArray(value) ? value : [];
     } else {
@@ -183,8 +183,8 @@ export function RelationshipField({
                   type="button"
                   onClick={() => {
                     if (isMultiple) {
-                      onChange?.(
-                        items.filter((_: any, i: number) => i !== idx),
+onChange?.(
+                         (items as (string | Record<string, unknown>)[]).filter((_: unknown, i: number) => i !== idx),
                       );
                     } else {
                       onChange?.(null);

package/src/components/fields/SelectField.tsx

@@ -1,9 +1,10 @@
 import type { SelectField as SelectFieldType } from "@kyro-cms/core/client";
+import FieldLayout from "./FieldLayout";
 
 interface SelectFieldComponentProps {
   field: SelectFieldType;
   value?: string | string[];
-  onChange?: (value: string | string[]) => void;
+  onChange?: (value: string | string[] | undefined) => void;
   error?: string;
   disabled?: boolean;
 }
@@ -15,17 +16,15 @@ export default function SelectField({
   error,
   disabled,
 }: SelectFieldComponentProps) {
+  const isReadOnly = field.admin?.readOnly;
+
   return (
-    <div className="space-y-1">
-      {field.label && (
-        <label className="block text-sm font-medium text-[var(--kyro-text-primary)]">
-          {field.label}
-          {field.required && (
-            <span className="text-[var(--kyro-error)] ml-1">*</span>
-          )}
-        </label>
-      )}
+    <FieldLayout
+      field={field}
+      error={error}
+    >
       <select
+        id={field.name}
         value={
           field.hasMany
             ? Array.isArray(value)
@@ -38,31 +37,23 @@ export default function SelectField({
             const selected = e.target.value ? e.target.value.split(",") : [];
             onChange?.(selected);
           } else {
-            onChange?.(e.target.value);
+            onChange?.(e.target.value || undefined);
           }
         }}
         multiple={field.hasMany}
-        disabled={disabled || field.admin?.readOnly}
+        disabled={disabled || isReadOnly}
         required={field.required}
-        className={`w-full px-3 py-2 border rounded-md text-sm transition-colors ${
-          error
-            ? "border-[var(--kyro-error)] focus:border-[var(--kyro-error)] focus:ring-[var(--kyro-error)]"
-            : "border-[var(--kyro-border)] focus:border-[var(--kyro-primary)] focus:ring-[var(--kyro-primary)]"
-        } ${disabled || field.admin?.readOnly ? "bg-[var(--kyro-bg-secondary)] text-[var(--kyro-text-muted)]" : "bg-[var(--kyro-surface)] text-[var(--kyro-text-primary)]"}`}
+        className={`kyro-form-input ${
+          disabled || isReadOnly ? "opacity-50 cursor-not-allowed" : ""
+        }`}
       >
-        {!field.required && <option value="">Select...</option>}
-        {field.options.map((option) => (
+        {!field.required && !field.hasMany && <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-[var(--kyro-text-secondary)]">
-          {field.admin.description}
-        </p>
-      )}
-      {error && <p className="text-xs text-[var(--kyro-error)]">{error}</p>}
-    </div>
+    </FieldLayout>
   );
 }

package/src/components/fields/TabsLayout.tsx

@@ -0,0 +1,69 @@
+import React, { useState } from "react";
+import type { Field } from "@kyro-cms/core/client";
+import { SeoPreview } from "../ui/SeoPreview";
+
+interface TabsLayoutProps {
+  field: Field;
+  formData: Record<string, unknown>;
+  onTabDataChange: (tabData: Record<string, unknown>) => void;
+  renderField: (
+    field: Field,
+    parentData: Record<string, unknown>,
+    onChange: (value: unknown) => void,
+  ) => React.ReactNode;
+}
+
+export function TabsLayout({
+  field,
+  formData,
+  onTabDataChange,
+  renderField,
+}: TabsLayoutProps) {
+  const [activeTab, setActiveTab] = useState(0);
+
+  const fieldTabs = (field as Field & { tabs?: { label: string; fields: Field[] }[] }).tabs || [];
+  const currentTab = fieldTabs[activeTab] || fieldTabs[0];
+
+  // Get nested tab data
+  const tabData = formData[field.name as string] || {};
+
+  return (
+    <div className="space-y-8">
+      <div className="flex items-center gap-2 border-b border-[var(--kyro-border)] mb-6 overflow-x-auto hide-scrollbar">
+        {fieldTabs.map((tab: { label: string }, index: number) => (
+          <button
+            key={index}
+            type="button"
+            className={`px-6 py-3 text-xs  tracking-widest font-bold transition-all border-b-2 -mb-[1px] whitespace-nowrap ${activeTab === index
+              ? "border-[var(--kyro-primary)] text-[var(--kyro-primary)]"
+              : "border-transparent text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-text-primary)] opacity-60 hover:opacity-100"
+              }`}
+            onClick={() => setActiveTab(index)}
+          >
+            {tab.label}
+          </button>
+        ))}
+      </div>
+      <div className="space-y-6">
+        {currentTab?.fields.map((f: Field) =>
+          renderField(f, tabData, onTabDataChange),
+        )}
+      </div>
+
+      {currentTab?.label === "SEO" && (
+        <div className="mt-12 pt-8 border-t border-[var(--kyro-border)]">
+          <h4 className="text-[10px] font-bold text-[var(--kyro-text-secondary)]  tracking-[0.2em] mb-6 opacity-50">
+            Live Google Preview
+          </h4>
+          <SeoPreview
+            title={formData.metaTitle || formData.title || "Untitled"}
+            description={
+              formData.metaDescription || "Please enter a description..."
+            }
+            slug={formData.slug || "your-slug"}
+          />
+        </div>
+      )}
+    </div>
+  );
+}