@cfast/ui 0.0.1

package/dist/chunk-UVRXMOX5.js

@@ -0,0 +1,439 @@
+// src/plugin.tsx
+import { createContext, useContext } from "react";
+
+// src/headless-defaults.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var headlessDefaults = {
+  // Actions
+  button: ({ children, onClick, disabled, loading, type }) => /* @__PURE__ */ jsx("button", { onClick, disabled: disabled || loading, type: type ?? "button", children: loading ? "Loading..." : children }),
+  tooltip: ({ children, title }) => /* @__PURE__ */ jsx("span", { title, children }),
+  confirmDialog: ({ open, onClose, onConfirm, title, description, confirmLabel, cancelLabel }) => open ? /* @__PURE__ */ jsxs("dialog", { open: true, children: [
+    /* @__PURE__ */ jsx("p", { children: /* @__PURE__ */ jsx("strong", { children: title }) }),
+    description ? /* @__PURE__ */ jsx("p", { children: description }) : null,
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("button", { onClick: onClose, children: cancelLabel ?? "Cancel" }),
+      /* @__PURE__ */ jsx("button", { onClick: onConfirm, children: confirmLabel ?? "Confirm" })
+    ] })
+  ] }) : null,
+  // Data display
+  table: ({ children }) => /* @__PURE__ */ jsx("table", { children }),
+  tableHead: ({ children }) => /* @__PURE__ */ jsx("thead", { children }),
+  tableBody: ({ children }) => /* @__PURE__ */ jsx("tbody", { children }),
+  tableRow: ({ children, onClick }) => /* @__PURE__ */ jsx("tr", { onClick, children }),
+  tableCell: ({ children, header, sortable, sortDirection, onSort }) => {
+    const Tag = header ? "th" : "td";
+    return /* @__PURE__ */ jsxs(
+      Tag,
+      {
+        onClick: sortable ? onSort : void 0,
+        style: sortable ? { cursor: "pointer" } : void 0,
+        children: [
+          children,
+          sortable && sortDirection ? sortDirection === "asc" ? " \u2191" : " \u2193" : null
+        ]
+      }
+    );
+  },
+  chip: ({ children, size }) => /* @__PURE__ */ jsx(
+    "span",
+    {
+      style: {
+        display: "inline-block",
+        padding: size === "sm" ? "1px 6px" : "2px 8px",
+        borderRadius: "12px",
+        fontSize: size === "sm" ? "12px" : "14px",
+        backgroundColor: "#eee"
+      },
+      children
+    }
+  ),
+  // Layout
+  appShell: ({ children, sidebar, header }) => /* @__PURE__ */ jsxs("div", { style: { display: "flex", minHeight: "100vh" }, children: [
+    sidebar ? /* @__PURE__ */ jsx("nav", { children: sidebar }) : null,
+    /* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
+      header ?? null,
+      /* @__PURE__ */ jsx("main", { children })
+    ] })
+  ] }),
+  sidebar: ({ children }) => /* @__PURE__ */ jsx("aside", { style: { width: "240px", borderRight: "1px solid #ddd" }, children }),
+  pageContainer: ({ children, title, actions }) => /* @__PURE__ */ jsxs("div", { children: [
+    title || actions ? /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
+      title ? /* @__PURE__ */ jsx("h1", { children: title }) : null,
+      actions ?? null
+    ] }) : null,
+    children
+  ] }),
+  breadcrumb: ({ items }) => /* @__PURE__ */ jsx("nav", { "aria-label": "breadcrumb", children: items.map((item, i) => /* @__PURE__ */ jsxs("span", { children: [
+    i > 0 ? " / " : null,
+    item.to ? /* @__PURE__ */ jsx("a", { href: item.to, children: item.label }) : item.label
+  ] }, i)) }),
+  // Feedback
+  toast: ({ children }) => /* @__PURE__ */ jsx("div", { children }),
+  alert: ({ children, color }) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "alert",
+      style: {
+        padding: "8px 12px",
+        borderRadius: "4px",
+        backgroundColor: color === "danger" ? "#fee" : color === "success" ? "#efe" : color === "warning" ? "#ffe" : "#f5f5f5"
+      },
+      children
+    }
+  ),
+  // File
+  dropZone: ({ children, isDragOver, onClick, onDrop, onDragOver, onDragLeave }) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      onClick,
+      onDrop: (e) => {
+        e.preventDefault();
+        onDrop(e.dataTransfer.files);
+      },
+      onDragOver: (e) => {
+        e.preventDefault();
+        onDragOver(e);
+      },
+      onDragLeave,
+      style: {
+        border: `2px dashed ${isDragOver ? "#4caf50" : "#ccc"}`,
+        borderRadius: "8px",
+        padding: "32px",
+        textAlign: "center",
+        cursor: "pointer"
+      },
+      children
+    }
+  )
+};
+
+// src/plugin.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var UIPluginContext = createContext(null);
+function createUIPlugin(config) {
+  return { components: config.components };
+}
+function UIPluginProvider({
+  plugin,
+  children
+}) {
+  return /* @__PURE__ */ jsx2(UIPluginContext.Provider, { value: plugin, children });
+}
+function useUIPlugin() {
+  return useContext(UIPluginContext);
+}
+function useComponent(slot) {
+  const plugin = useUIPlugin();
+  const component = plugin?.components[slot];
+  if (component) {
+    return component;
+  }
+  return headlessDefaults[slot];
+}
+
+// src/hooks/use-toast.ts
+import { createContext as createContext2, useContext as useContext2, useCallback } from "react";
+var ToastContext = createContext2(null);
+function useToast() {
+  const ctx = useContext2(ToastContext);
+  if (!ctx) {
+    throw new Error("useToast must be used within a <ToastProvider>");
+  }
+  const show = useCallback(
+    (options) => ctx.show(options),
+    [ctx]
+  );
+  const success = useCallback(
+    (message, description) => ctx.show({ message, type: "success", description }),
+    [ctx]
+  );
+  const error = useCallback(
+    (message, description) => ctx.show({ message, type: "error", description }),
+    [ctx]
+  );
+  const info = useCallback(
+    (message, description) => ctx.show({ message, type: "info", description }),
+    [ctx]
+  );
+  const warning = useCallback(
+    (message, description) => ctx.show({ message, type: "warning", description }),
+    [ctx]
+  );
+  return { show, success, error, info, warning };
+}
+
+// src/components/avatar-with-initials.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+function getInitials(name) {
+  return name.split(" ").map((part) => part[0]).join("").toUpperCase().slice(0, 2);
+}
+var sizeMap = { sm: 32, md: 40, lg: 56 };
+function AvatarWithInitials({
+  src,
+  name,
+  size = "md"
+}) {
+  const px = sizeMap[size];
+  if (src) {
+    return /* @__PURE__ */ jsx3(
+      "img",
+      {
+        src,
+        alt: name,
+        style: {
+          width: px,
+          height: px,
+          borderRadius: "50%",
+          objectFit: "cover"
+        }
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx3(
+    "span",
+    {
+      "aria-label": name,
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        width: px,
+        height: px,
+        borderRadius: "50%",
+        backgroundColor: "#ddd",
+        fontSize: px * 0.4,
+        fontWeight: "bold"
+      },
+      children: getInitials(name)
+    }
+  );
+}
+
+// src/fields/date-field.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+var rtf = new Intl.RelativeTimeFormat("en", { numeric: "auto" });
+function getRelativeTime(date) {
+  const now = Date.now();
+  const diffMs = date.getTime() - now;
+  const diffSec = Math.round(diffMs / 1e3);
+  const diffMin = Math.round(diffSec / 60);
+  const diffHour = Math.round(diffMin / 60);
+  const diffDay = Math.round(diffHour / 24);
+  if (Math.abs(diffSec) < 60) return rtf.format(diffSec, "second");
+  if (Math.abs(diffMin) < 60) return rtf.format(diffMin, "minute");
+  if (Math.abs(diffHour) < 24) return rtf.format(diffHour, "hour");
+  if (Math.abs(diffDay) < 30) return rtf.format(diffDay, "day");
+  const diffMonth = Math.round(diffDay / 30);
+  if (Math.abs(diffMonth) < 12) return rtf.format(diffMonth, "month");
+  return rtf.format(Math.round(diffDay / 365), "year");
+}
+function formatDate(date, format, locale) {
+  switch (format) {
+    case "relative":
+      return getRelativeTime(date);
+    case "long":
+      return new Intl.DateTimeFormat(locale, {
+        dateStyle: "long"
+      }).format(date);
+    case "datetime":
+      return new Intl.DateTimeFormat(locale, {
+        dateStyle: "medium",
+        timeStyle: "short"
+      }).format(date);
+    case "short":
+    default:
+      return new Intl.DateTimeFormat(locale, {
+        dateStyle: "medium"
+      }).format(date);
+  }
+}
+function DateField({
+  value,
+  format = "short",
+  locale = "en"
+}) {
+  if (value == null) {
+    return /* @__PURE__ */ jsx4("span", { children: "\u2014" });
+  }
+  const date = value instanceof Date ? value : new Date(value);
+  if (Number.isNaN(date.getTime())) {
+    return /* @__PURE__ */ jsx4("span", { children: "Invalid date" });
+  }
+  return /* @__PURE__ */ jsx4("time", { dateTime: date.toISOString(), children: formatDate(date, format, locale) });
+}
+
+// src/fields/boolean-field.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+function BooleanField({
+  value,
+  trueLabel = "Yes",
+  falseLabel = "No",
+  trueColor = "success",
+  falseColor = "neutral"
+}) {
+  const Chip = useComponent("chip");
+  if (value == null) {
+    return /* @__PURE__ */ jsx5("span", { children: "\u2014" });
+  }
+  return /* @__PURE__ */ jsx5(
+    Chip,
+    {
+      color: value ? trueColor : falseColor,
+      variant: "soft",
+      size: "sm",
+      children: value ? trueLabel : falseLabel
+    }
+  );
+}
+
+// src/fields/number-field.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+function NumberField({
+  value,
+  locale = "en",
+  currency,
+  decimals
+}) {
+  if (value == null) {
+    return /* @__PURE__ */ jsx6("span", { children: "\u2014" });
+  }
+  const options = {};
+  if (currency) {
+    options.style = "currency";
+    options.currency = currency;
+  }
+  if (decimals !== void 0) {
+    options.minimumFractionDigits = decimals;
+    options.maximumFractionDigits = decimals;
+  }
+  const formatted = new Intl.NumberFormat(locale, options).format(value);
+  return /* @__PURE__ */ jsx6("span", { children: formatted });
+}
+
+// src/fields/text-field.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+function TextField({
+  value,
+  maxLength
+}) {
+  if (value == null) {
+    return /* @__PURE__ */ jsx7("span", { children: "\u2014" });
+  }
+  const display = maxLength && value.length > maxLength ? `${value.slice(0, maxLength)}\u2026` : value;
+  if (maxLength && value.length > maxLength) {
+    return /* @__PURE__ */ jsx7("span", { title: value, children: display });
+  }
+  return /* @__PURE__ */ jsx7("span", { children: display });
+}
+
+// src/fields/email-field.tsx
+import { jsx as jsx8 } from "react/jsx-runtime";
+function EmailField({ value }) {
+  if (value == null) {
+    return /* @__PURE__ */ jsx8("span", { children: "\u2014" });
+  }
+  return /* @__PURE__ */ jsx8("a", { href: `mailto:${value}`, children: value });
+}
+
+// src/fields/json-field.tsx
+import { useState } from "react";
+import { jsx as jsx9, jsxs as jsxs2 } from "react/jsx-runtime";
+function JsonField({
+  value,
+  collapsed = false
+}) {
+  const [isCollapsed, setIsCollapsed] = useState(collapsed);
+  if (value == null) {
+    return /* @__PURE__ */ jsx9("span", { children: "\u2014" });
+  }
+  const formatted = JSON.stringify(value, null, 2);
+  if (isCollapsed) {
+    const preview = JSON.stringify(value);
+    const short = preview.length > 60 ? `${preview.slice(0, 60)}\u2026` : preview;
+    return /* @__PURE__ */ jsxs2("span", { children: [
+      /* @__PURE__ */ jsx9("code", { children: short }),
+      " ",
+      /* @__PURE__ */ jsx9(
+        "button",
+        {
+          onClick: () => setIsCollapsed(false),
+          style: { border: "none", background: "none", cursor: "pointer", color: "#666", fontSize: "12px" },
+          children: "expand"
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsx9(
+    "pre",
+    {
+      style: {
+        margin: 0,
+        fontSize: "13px",
+        backgroundColor: "#f5f5f5",
+        padding: "8px",
+        borderRadius: "4px",
+        overflow: "auto"
+      },
+      children: /* @__PURE__ */ jsx9("code", { children: formatted })
+    }
+  );
+}
+
+// src/fields/field-for-column.ts
+function fieldForColumn(column) {
+  const { dataType, name } = column;
+  const dt = dataType.toLowerCase();
+  if (dt === "boolean" || dt === "integer" && name.startsWith("is")) {
+    return BooleanField;
+  }
+  if (dt.includes("timestamp") || dt.includes("date") || dt.includes("datetime")) {
+    return DateField;
+  }
+  if (dt === "integer" || dt === "real" || dt === "numeric" || dt.includes("int") || dt.includes("float") || dt.includes("double") || dt.includes("decimal")) {
+    return NumberField;
+  }
+  if (name === "email" || name.endsWith("Email")) {
+    return EmailField;
+  }
+  if (dt === "json" || dt === "jsonb" || dt === "blob") {
+    return JsonField;
+  }
+  return TextField;
+}
+function fieldsForTable(table) {
+  const result = {};
+  for (const [key, col] of Object.entries(table)) {
+    if (col && typeof col === "object" && "dataType" in col && "name" in col) {
+      result[key] = fieldForColumn(col);
+    }
+  }
+  return result;
+}
+
+// src/hooks/use-action-status.ts
+import { useActions } from "@cfast/actions/client";
+function useActionStatus(descriptor) {
+  const actions = useActions(descriptor);
+  const name = descriptor.actionNames[0];
+  return actions[name]();
+}
+
+export {
+  createUIPlugin,
+  UIPluginProvider,
+  useUIPlugin,
+  useComponent,
+  ToastContext,
+  useToast,
+  getInitials,
+  AvatarWithInitials,
+  DateField,
+  BooleanField,
+  NumberField,
+  TextField,
+  EmailField,
+  JsonField,
+  fieldForColumn,
+  fieldsForTable,
+  useActionStatus
+};

package/dist/chunk-XFD3N2D4.js

@@ -0,0 +1,161 @@
+// src/plugin.ts
+import { createContext, useContext, createElement as createElement2 } from "react";
+
+// src/headless-defaults.ts
+import { createElement } from "react";
+var headlessDefaults = {
+  // Actions
+  button: ({ children, onClick, disabled, loading, type }) => createElement(
+    "button",
+    { onClick, disabled: disabled || loading, type: type ?? "button" },
+    loading ? "Loading..." : children
+  ),
+  tooltip: ({ children, title }) => createElement("span", { title }, children),
+  confirmDialog: ({ open, onClose, onConfirm, title, description, confirmLabel, cancelLabel }) => open ? createElement(
+    "dialog",
+    { open: true },
+    createElement("p", null, createElement("strong", null, title)),
+    description ? createElement("p", null, description) : null,
+    createElement(
+      "div",
+      null,
+      createElement("button", { onClick: onClose }, cancelLabel ?? "Cancel"),
+      createElement("button", { onClick: onConfirm }, confirmLabel ?? "Confirm")
+    )
+  ) : null,
+  // Data display
+  table: ({ children }) => createElement("table", null, children),
+  tableHead: ({ children }) => createElement("thead", null, children),
+  tableBody: ({ children }) => createElement("tbody", null, children),
+  tableRow: ({ children, onClick }) => createElement("tr", { onClick }, children),
+  tableCell: ({ children, header, sortable, sortDirection, onSort }) => createElement(
+    header ? "th" : "td",
+    {
+      onClick: sortable ? onSort : void 0,
+      style: sortable ? { cursor: "pointer" } : void 0
+    },
+    children,
+    sortable && sortDirection ? sortDirection === "asc" ? " \u2191" : " \u2193" : null
+  ),
+  chip: ({ children, size }) => createElement(
+    "span",
+    {
+      style: {
+        display: "inline-block",
+        padding: size === "sm" ? "1px 6px" : "2px 8px",
+        borderRadius: "12px",
+        fontSize: size === "sm" ? "12px" : "14px",
+        backgroundColor: "#eee"
+      }
+    },
+    children
+  ),
+  // Layout
+  appShell: ({ children, sidebar, header }) => createElement(
+    "div",
+    { style: { display: "flex", minHeight: "100vh" } },
+    sidebar ? createElement("nav", null, sidebar) : null,
+    createElement(
+      "div",
+      { style: { flex: 1 } },
+      header ?? null,
+      createElement("main", null, children)
+    )
+  ),
+  sidebar: ({ children }) => createElement(
+    "aside",
+    { style: { width: "240px", borderRight: "1px solid #ddd" } },
+    children
+  ),
+  pageContainer: ({ children, title, actions }) => createElement(
+    "div",
+    null,
+    title || actions ? createElement(
+      "div",
+      { style: { display: "flex", justifyContent: "space-between", alignItems: "center" } },
+      title ? createElement("h1", null, title) : null,
+      actions ?? null
+    ) : null,
+    children
+  ),
+  breadcrumb: ({ items }) => createElement(
+    "nav",
+    { "aria-label": "breadcrumb" },
+    items.map(
+      (item, i) => createElement(
+        "span",
+        { key: i },
+        i > 0 ? " / " : null,
+        item.to ? createElement("a", { href: item.to }, item.label) : item.label
+      )
+    )
+  ),
+  // Feedback
+  toast: ({ children }) => createElement("div", null, children),
+  alert: ({ children, color }) => createElement(
+    "div",
+    {
+      role: "alert",
+      style: {
+        padding: "8px 12px",
+        borderRadius: "4px",
+        backgroundColor: color === "danger" ? "#fee" : color === "success" ? "#efe" : color === "warning" ? "#ffe" : "#f5f5f5"
+      }
+    },
+    children
+  ),
+  // File
+  dropZone: ({ children, isDragOver, onClick, onDrop, onDragOver, onDragLeave }) => createElement(
+    "div",
+    {
+      onClick,
+      onDrop: (e) => {
+        e.preventDefault();
+        onDrop(e.dataTransfer.files);
+      },
+      onDragOver: (e) => {
+        e.preventDefault();
+        onDragOver(e);
+      },
+      onDragLeave,
+      style: {
+        border: `2px dashed ${isDragOver ? "#4caf50" : "#ccc"}`,
+        borderRadius: "8px",
+        padding: "32px",
+        textAlign: "center",
+        cursor: "pointer"
+      }
+    },
+    children
+  )
+};
+
+// src/plugin.ts
+var UIPluginContext = createContext(null);
+function createUIPlugin(config) {
+  return { components: config.components };
+}
+function UIPluginProvider({
+  plugin,
+  children
+}) {
+  return createElement2(UIPluginContext.Provider, { value: plugin }, children);
+}
+function useUIPlugin() {
+  return useContext(UIPluginContext);
+}
+function useComponent(slot) {
+  const plugin = useUIPlugin();
+  const component = plugin?.components[slot];
+  if (component) {
+    return component;
+  }
+  return headlessDefaults[slot];
+}
+
+export {
+  createUIPlugin,
+  UIPluginProvider,
+  useUIPlugin,
+  useComponent
+};