@kyro-cms/admin 0.1.7 → 0.1.8

package/src/components/fields/AccordionField.tsx

@@ -0,0 +1,213 @@
+import React from "react";
+import { ChevronDown, ChevronUp, Plus, X } from "lucide-react";
+
+interface AccordionItem {
+  title: string;
+  content: string;
+}
+
+interface AccordionFieldProps {
+  items?: AccordionItem[];
+  onChange: (items: AccordionItem[]) => void;
+  compact?: boolean;
+}
+
+export const AccordionField: React.FC<AccordionFieldProps> = ({
+  items = [],
+  onChange,
+  compact = false,
+}) => {
+  const [openIndex, setOpenIndex] = React.useState<number | null>(0);
+
+  const handleTitleChange = (index: number, value: string) => {
+    const newItems = [...items];
+    newItems[index] = { ...newItems[index], title: value };
+    onChange(newItems);
+  };
+
+  const handleContentChange = (index: number, value: string) => {
+    const newItems = [...items];
+    newItems[index] = { ...newItems[index], content: value };
+    onChange(newItems);
+  };
+
+  const handleRemove = (index: number) => {
+    const newItems = items.filter((_, i) => i !== index);
+    onChange(newItems);
+    if (openIndex === index) setOpenIndex(null);
+    else if (openIndex !== null && openIndex > index)
+      setOpenIndex(openIndex - 1);
+  };
+
+  const handleAdd = () => {
+    onChange([...items, { title: `Item ${items.length + 1}`, content: "" }]);
+    setOpenIndex(items.length);
+  };
+
+  const baseInputClass =
+    "w-full px-3 py-2 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";
+  const smallInputClass =
+    "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";
+
+  if (compact) {
+    return (
+      <div className="space-y-2">
+        {items.length === 0 ? (
+          <div className="text-center py-4 text-[var(--kyro-text-muted)] text-sm border border-dashed border-[var(--kyro-border)] rounded-lg">
+            No items. Click "Add Item" to create one.
+          </div>
+        ) : (
+          <div className="space-y-1.5">
+            {items.map((item: AccordionItem, index: number) => {
+              const isOpen = openIndex === index;
+              return (
+                <div
+                  key={index}
+                  className="border border-[var(--kyro-border)] rounded-lg overflow-hidden group"
+                >
+                  <button
+                    type="button"
+                    onClick={() => setOpenIndex(isOpen ? null : index)}
+                    className="w-full flex items-center justify-between p-2.5 bg-[var(--kyro-surface-accent)] hover:bg-[var(--kyro-sidebar-active)]/10 transition-colors"
+                  >
+                    <span className="text-sm font-medium text-[var(--kyro-text-primary)] truncate">
+                      {item.title || `Item ${index + 1}`}
+                    </span>
+                    <div className="flex items-center gap-1">
+                      <button
+                        type="button"
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          handleRemove(index);
+                        }}
+                        className="opacity-0 group-hover:opacity-100 p-1 hover:bg-[var(--kyro-danger-bg)] rounded text-[var(--kyro-error)] transition-opacity"
+                        title="Remove"
+                      >
+                        <X className="w-3.5 h-3.5" />
+                      </button>
+                      {isOpen ? (
+                        <ChevronUp className="w-4 h-4 text-[var(--kyro-text-muted)]" />
+                      ) : (
+                        <ChevronDown className="w-4 h-4 text-[var(--kyro-text-muted)]" />
+                      )}
+                    </div>
+                  </button>
+                  {isOpen && (
+                    <div className="p-2.5 bg-[var(--kyro-surface)] space-y-2">
+                      <input
+                        type="text"
+                        value={item.title || ""}
+                        onChange={(e) =>
+                          handleTitleChange(index, e.target.value)
+                        }
+                        onClick={(e) => e.stopPropagation()}
+                        className={smallInputClass}
+                        placeholder="Item title..."
+                      />
+                      <textarea
+                        value={item.content || ""}
+                        onChange={(e) =>
+                          handleContentChange(index, e.target.value)
+                        }
+                        onClick={(e) => e.stopPropagation()}
+                        className={`${smallInputClass} min-h-[60px] resize-none`}
+                        placeholder="Item content..."
+                      />
+                    </div>
+                  )}
+                </div>
+              );
+            })}
+          </div>
+        )}
+        <button
+          type="button"
+          onClick={handleAdd}
+          className="flex items-center justify-center gap-1.5 w-full px-3 py-2 text-xs font-medium rounded-lg border border-dashed border-[var(--kyro-border)] bg-[var(--kyro-surface-accent)] text-[var(--kyro-text-secondary)] hover:border-[var(--kyro-sidebar-active)] hover:text-[var(--kyro-text-primary)] transition-colors"
+        >
+          <Plus className="w-3.5 h-3.5" />
+          Add Item
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-2">
+      {items.length === 0 ? (
+        <div className="text-center py-4 text-[var(--kyro-text-muted)] text-sm border border-dashed border-[var(--kyro-border)] rounded-lg">
+          No items. Click "Add Item" to create one.
+        </div>
+      ) : (
+        <div className="space-y-2">
+          {items.map((item: AccordionItem, index: number) => {
+            const isOpen = openIndex === index;
+            return (
+              <div
+                key={index}
+                className="border border-[var(--kyro-border)] rounded-lg overflow-hidden group"
+              >
+                <button
+                  type="button"
+                  onClick={() => setOpenIndex(isOpen ? null : index)}
+                  className="w-full flex items-center justify-between p-3 bg-[var(--kyro-surface-accent)] hover:bg-[var(--kyro-sidebar-active)]/10 transition-colors"
+                >
+                  <span className="text-sm font-medium text-[var(--kyro-text-primary)] truncate">
+                    {item.title || `Item ${index + 1}`}
+                  </span>
+                  <div className="flex items-center gap-1">
+                    <button
+                      type="button"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        handleRemove(index);
+                      }}
+                      className="opacity-0 group-hover:opacity-100 p-1.5 hover:bg-[var(--kyro-danger-bg)] rounded text-[var(--kyro-error)] transition-opacity"
+                      title="Remove"
+                    >
+                      <X className="w-4 h-4" />
+                    </button>
+                    {isOpen ? (
+                      <ChevronUp className="w-4 h-4 text-[var(--kyro-text-muted)]" />
+                    ) : (
+                      <ChevronDown className="w-4 h-4 text-[var(--kyro-text-muted)]" />
+                    )}
+                  </div>
+                </button>
+                {isOpen && (
+                  <div className="p-3 bg-[var(--kyro-surface)] space-y-2">
+                    <input
+                      type="text"
+                      value={item.title || ""}
+                      onChange={(e) => handleTitleChange(index, e.target.value)}
+                      className={baseInputClass}
+                      placeholder="Item title..."
+                    />
+                    <textarea
+                      value={item.content || ""}
+                      onChange={(e) =>
+                        handleContentChange(index, e.target.value)
+                      }
+                      className={`${baseInputClass} min-h-[60px] resize-none`}
+                      placeholder="Item content..."
+                    />
+                  </div>
+                )}
+              </div>
+            );
+          })}
+        </div>
+      )}
+      <button
+        type="button"
+        onClick={handleAdd}
+        className="flex items-center justify-center gap-1.5 w-full px-3 py-2 text-xs font-medium rounded-lg border border-dashed border-[var(--kyro-border)] bg-[var(--kyro-surface-accent)] text-[var(--kyro-text-secondary)] hover:border-[var(--kyro-sidebar-active)] hover:text-[var(--kyro-text-primary)] transition-colors"
+      >
+        <Plus className="w-3.5 h-3.5" />
+        Add Item
+      </button>
+    </div>
+  );
+};
+
+export default AccordionField;

package/src/components/fields/ArrayField.tsx

@@ -0,0 +1,241 @@
+import React from "react";
+import { Plus, ChevronDown, ChevronUp, X } from "lucide-react";
+
+interface ArrayFieldItem {
+  [key: string]: any;
+}
+
+interface ArrayFieldProps {
+  items?: ArrayFieldItem[];
+  labelField?: string;
+  onChange: (items: ArrayFieldItem[]) => void;
+  compact?: boolean;
+}
+
+export const ArrayField: React.FC<ArrayFieldProps> = ({
+  items = [],
+  labelField = "title",
+  onChange,
+  compact = false,
+}) => {
+  const [openIndex, setOpenIndex] = React.useState<number | null>(0);
+
+  const handleItemChange = (index: number, field: string, value: string) => {
+    const newItems = [...items];
+    newItems[index] = { ...newItems[index], [field]: value };
+    onChange(newItems);
+  };
+
+  const handleRemove = (index: number) => {
+    const newItems = items.filter((_, i) => i !== index);
+    onChange(newItems);
+    if (openIndex === index) setOpenIndex(null);
+    else if (openIndex !== null && openIndex > index)
+      setOpenIndex(openIndex - 1);
+  };
+
+  const handleAdd = () => {
+    const newItem: ArrayFieldItem = {
+      [labelField]: `Item ${items.length + 1}`,
+    };
+    onChange([...items, newItem]);
+    setOpenIndex(items.length);
+  };
+
+  const inputClass = compact
+    ? "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";
+
+  const itemKeys =
+    items.length > 0
+      ? Object.keys(items[0]).filter((k) => k !== "id" && k !== "_key")
+      : [];
+
+  if (compact) {
+    return (
+      <div className="space-y-1.5">
+        {items.length === 0 ? (
+          <div className="text-center py-4 text-[var(--kyro-text-muted)] text-sm border border-dashed border-[var(--kyro-border)] rounded-lg">
+            No items. Click "Add Item" to create one.
+          </div>
+        ) : (
+          <div className="space-y-1">
+            {items.map((item, index) => {
+              const isOpen = openIndex === index;
+              const itemLabel =
+                item[labelField] ||
+                item.title ||
+                item.name ||
+                `Item ${index + 1}`;
+              return (
+                <div
+                  key={index}
+                  className="border border-[var(--kyro-border)] rounded-lg overflow-hidden group"
+                >
+                  <button
+                    type="button"
+                    onClick={() => setOpenIndex(isOpen ? null : index)}
+                    className="w-full flex items-center justify-between p-2.5 bg-[var(--kyro-surface-accent)] hover:bg-[var(--kyro-sidebar-active)]/10 transition-colors"
+                  >
+                    <span className="text-sm font-medium text-[var(--kyro-text-primary)] truncate">
+                      {itemLabel}
+                    </span>
+                    <div className="flex items-center gap-1">
+                      <button
+                        type="button"
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          handleRemove(index);
+                        }}
+                        className="opacity-0 group-hover:opacity-100 p-1 hover:bg-[var(--kyro-danger-bg)] rounded text-[var(--kyro-error)] transition-opacity"
+                        title="Remove"
+                      >
+                        <X className="w-3.5 h-3.5" />
+                      </button>
+                      {isOpen ? (
+                        <ChevronUp className="w-4 h-4 text-[var(--kyro-text-muted)]" />
+                      ) : (
+                        <ChevronDown className="w-4 h-4 text-[var(--kyro-text-muted)]" />
+                      )}
+                    </div>
+                  </button>
+                  {isOpen && (
+                    <div className="p-2.5 bg-[var(--kyro-surface)] space-y-2">
+                      {itemKeys.length > 0 ? (
+                        itemKeys.map((key) => (
+                          <input
+                            key={key}
+                            type="text"
+                            value={item[key] || ""}
+                            onChange={(e) =>
+                              handleItemChange(index, key, e.target.value)
+                            }
+                            onClick={(e) => e.stopPropagation()}
+                            className={inputClass}
+                            placeholder={key}
+                          />
+                        ))
+                      ) : (
+                        <input
+                          type="text"
+                          value={item.value || ""}
+                          onChange={(e) =>
+                            handleItemChange(index, "value", e.target.value)
+                          }
+                          onClick={(e) => e.stopPropagation()}
+                          className={inputClass}
+                          placeholder="Value..."
+                        />
+                      )}
+                    </div>
+                  )}
+                </div>
+              );
+            })}
+          </div>
+        )}
+        <button
+          type="button"
+          onClick={handleAdd}
+          className="flex items-center justify-center gap-1.5 w-full px-3 py-2 text-xs font-medium rounded-lg border border-dashed border-[var(--kyro-border)] bg-[var(--kyro-surface-accent)] text-[var(--kyro-text-secondary)] hover:border-[var(--kyro-sidebar-active)] hover:text-[var(--kyro-text-primary)] transition-colors"
+        >
+          <Plus className="w-3.5 h-3.5" />
+          Add Item
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-2">
+      {items.length === 0 ? (
+        <div className="text-center py-4 text-[var(--kyro-text-muted)] text-sm border border-dashed border-[var(--kyro-border)] rounded-lg">
+          No items. Click "Add Item" to create one.
+        </div>
+      ) : (
+        <div className="space-y-2">
+          {items.map((item, index) => {
+            const isOpen = openIndex === index;
+            const itemLabel =
+              item[labelField] ||
+              item.title ||
+              item.name ||
+              `Item ${index + 1}`;
+            return (
+              <div
+                key={index}
+                className="border border-[var(--kyro-border)] rounded-lg overflow-hidden group"
+              >
+                <button
+                  type="button"
+                  onClick={() => setOpenIndex(isOpen ? null : index)}
+                  className="w-full flex items-center justify-between p-3 bg-[var(--kyro-surface-accent)] hover:bg-[var(--kyro-sidebar-active)]/10 transition-colors"
+                >
+                  <span className="text-sm font-medium text-[var(--kyro-text-primary)] truncate">
+                    {itemLabel}
+                  </span>
+                  <div className="flex items-center gap-1">
+                    <button
+                      type="button"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        handleRemove(index);
+                      }}
+                      className="opacity-0 group-hover:opacity-100 p-1.5 hover:bg-[var(--kyro-danger-bg)] rounded text-[var(--kyro-error)] transition-opacity"
+                      title="Remove"
+                    >
+                      <X className="w-4 h-4" />
+                    </button>
+                    {isOpen ? (
+                      <ChevronUp className="w-4 h-4 text-[var(--kyro-text-muted)]" />
+                    ) : (
+                      <ChevronDown className="w-4 h-4 text-[var(--kyro-text-muted)]" />
+                    )}
+                  </div>
+                </button>
+                {isOpen && (
+                  <div className="p-3 bg-[var(--kyro-surface)] space-y-2">
+                    {itemKeys.length > 0 ? (
+                      itemKeys.map((key) => (
+                        <input
+                          key={key}
+                          type="text"
+                          value={item[key] || ""}
+                          onChange={(e) =>
+                            handleItemChange(index, key, e.target.value)
+                          }
+                          className={inputClass}
+                          placeholder={key}
+                        />
+                      ))
+                    ) : (
+                      <input
+                        type="text"
+                        value={item.value || ""}
+                        onChange={(e) =>
+                          handleItemChange(index, "value", e.target.value)
+                        }
+                        className={inputClass}
+                        placeholder="Value..."
+                      />
+                    )}
+                  </div>
+                )}
+              </div>
+            );
+          })}
+        </div>
+      )}
+      <button
+        type="button"
+        onClick={handleAdd}
+        className="flex items-center justify-center gap-1.5 w-full px-3 py-2 text-xs font-medium rounded-lg border border-dashed border-[var(--kyro-border)] bg-[var(--kyro-surface-accent)] text-[var(--kyro-text-secondary)] hover:border-[var(--kyro-sidebar-active)] hover:text-[var(--kyro-text-primary)] transition-colors"
+      >
+        <Plus className="w-3.5 h-3.5" />
+        Add Item
+      </button>
+    </div>
+  );
+};
+
+export default ArrayField;

package/src/components/fields/BlocksField.tsx

@@ -107,7 +107,7 @@ export const BlocksField: React.FC<BlocksFieldProps> = ({
       setOnBlocksChange(onBlocksChange);
     }
     return () => {
-      setOnBlocksChange(() => { });
+      setOnBlocksChange(() => {});
     };
   }, [onBlocksChange, setOnBlocksChange]);
 
@@ -148,7 +148,7 @@ export const BlocksField: React.FC<BlocksFieldProps> = ({
   // Determine left border style based on document status
   const getBorderClass = () => {
     if (justSaved) {
-      return "border-l-[3px] border-green-500";
+      return "border-l-[3px] border-[var(--kyro-success)]";
     }
     if (
       documentStatus === "draft" ||
@@ -226,9 +226,9 @@ export const BlocksField: React.FC<BlocksFieldProps> = ({
   // Render active drag overlay
   const activeBlock = activeDrag
     ? blockCategories
-      .flatMap((cat) => cat.blocks)
-      .find((b) => `drawer-${b.type}` === activeDrag.id) ||
-    blocks.find((b) => b.id === activeDrag.id)
+        .flatMap((cat) => cat.blocks)
+        .find((b) => `drawer-${b.type}` === activeDrag.id) ||
+      blocks.find((b) => b.id === activeDrag.id)
     : null;
 
   const activeBlockLabel = activeBlock

package/src/components/fields/ButtonField.tsx

@@ -0,0 +1,53 @@
+import React from "react";
+import { ExternalLink } from "lucide-react";
+
+interface ButtonFieldProps {
+  text?: string;
+  url?: string;
+  onChange: (field: string, value: string) => void;
+  compact?: boolean;
+}
+
+export const ButtonField: React.FC<ButtonFieldProps> = ({
+  text = "Button",
+  url = "",
+  onChange,
+  compact = false,
+}) => {
+  const inputClass = compact
+    ? "flex-1 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"
+    : "flex-1 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";
+
+  return (
+    <div className="flex items-center gap-2">
+      <input
+        type="text"
+        value={text}
+        onChange={(e) => onChange("text", e.target.value)}
+        className={inputClass}
+        placeholder="Button text..."
+      />
+      <span className="text-[var(--kyro-text-muted)] text-xs">→</span>
+      <input
+        type="url"
+        value={url}
+        onChange={(e) => onChange("url", e.target.value)}
+        className={`${inputClass} font-mono text-xs`}
+        placeholder="https://..."
+      />
+      {text && url && (
+        <a
+          href={url}
+          target="_blank"
+          rel="noopener noreferrer"
+          className={`shrink-0 ${compact ? "p-1.5" : "p-2"} rounded text-[var(--kyro-text-muted)] hover:text-[var(--kyro-primary)] hover:bg-[var(--kyro-surface-accent)] transition-colors`}
+          title={url}
+        >
+          <ExternalLink className={compact ? "w-3.5 h-3.5" : "w-4 h-4"} />
+        </a>
+      )}
+    </div>
+  );
+};
+
+export default ButtonField;

package/src/components/fields/CheckboxField.tsx

@@ -1,4 +1,4 @@
-import type { CheckboxField as CheckboxFieldType } from "@kyro-cms/core";
+import type { CheckboxField as CheckboxFieldType } from "@kyro-cms/core/client";
 
 interface CheckboxFieldComponentProps {
   field: CheckboxFieldType;
@@ -29,7 +29,9 @@ export default function CheckboxField({
         />
         <span className="text-sm font-medium text-[var(--kyro-text-primary)]">
           {field.label || field.name}
-          {field.required && <span className="text-red-500 ml-1">*</span>}
+          {field.required && (
+            <span className="text-[var(--kyro-error)] ml-1">*</span>
+          )}
         </span>
       </label>
       {field.admin?.description && !error && (
@@ -37,7 +39,9 @@ export default function CheckboxField({
           {field.admin.description}
         </p>
       )}
-      {error && <p className="text-xs text-red-500 ml-6">{error}</p>}
+      {error && (
+        <p className="text-xs text-[var(--kyro-error)] ml-6">{error}</p>
+      )}
     </div>
   );
 }

package/src/components/fields/ChildrenField.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+import { ChildBlocksTree } from "../blocks/ChildBlocksTree";
+
+interface ChildrenFieldProps {
+  blockId: string;
+  children: any[];
+  onUpdateChildren: (newChildren: any[]) => void;
+  label?: string;
+  compact?: boolean;
+}
+
+export const ChildrenField: React.FC<ChildrenFieldProps> = ({
+  blockId,
+  children,
+  onUpdateChildren,
+  label,
+  compact = false,
+}) => {
+  if (compact) {
+    return (
+      <div className="pt-2 border-t border-[var(--kyro-border)]">
+        <label className="text-[10px] font-medium text-[var(--kyro-text-muted)] mb-1.5 block">
+          {label || `Children (${children.length})`}
+        </label>
+        <ChildBlocksTree
+          blockId={blockId}
+          children={children}
+          onUpdateChildren={onUpdateChildren}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div className="pt-4 border-t border-[var(--kyro-border)]">
+      <label className="text-xs font-medium text-[var(--kyro-text-muted)] mb-2 block">
+        {label || `Children (${children.length})`}
+      </label>
+      <ChildBlocksTree
+        blockId={blockId}
+        children={children}
+        onUpdateChildren={onUpdateChildren}
+      />
+    </div>
+  );
+};
+
+export default ChildrenField;