@cfast/ui 0.1.0 → 0.2.0

package/dist/chunk-RDTUEOLK.js

@@ -1,486 +0,0 @@
-// 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 merged = { ...headlessDefaults, ...plugin?.components };
-  return merged[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/permission-gate.tsx
-import { Fragment, jsx as jsx3 } from "react/jsx-runtime";
-function PermissionGate({
-  action,
-  children,
-  fallback
-}) {
-  if (action.invisible) {
-    return null;
-  }
-  if (!action.permitted) {
-    return fallback ? /* @__PURE__ */ jsx3(Fragment, { children: fallback }) : null;
-  }
-  return /* @__PURE__ */ jsx3(Fragment, { children });
-}
-
-// src/components/avatar-with-initials.tsx
-import { jsx as jsx4 } 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__ */ jsx4(
-      "img",
-      {
-        src,
-        alt: name,
-        style: {
-          width: px,
-          height: px,
-          borderRadius: "50%",
-          objectFit: "cover"
-        }
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx4(
-    "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 jsx5 } 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__ */ jsx5("span", { children: "\u2014" });
-  }
-  const date = value instanceof Date ? value : typeof value === "string" || typeof value === "number" ? new Date(value) : new Date(String(value));
-  if (Number.isNaN(date.getTime())) {
-    return /* @__PURE__ */ jsx5("span", { children: "Invalid date" });
-  }
-  return /* @__PURE__ */ jsx5("time", { dateTime: date.toISOString(), children: formatDate(date, format, locale) });
-}
-
-// src/fields/boolean-field.tsx
-import { jsx as jsx6 } from "react/jsx-runtime";
-function BooleanField({
-  value,
-  trueLabel = "Yes",
-  falseLabel = "No",
-  trueColor = "success",
-  falseColor = "neutral"
-}) {
-  const Chip = useComponent("chip");
-  if (value == null) {
-    return /* @__PURE__ */ jsx6("span", { children: "\u2014" });
-  }
-  const boolValue = Boolean(value);
-  const color = boolValue ? trueColor : falseColor;
-  const chipColor = isChipColor(color) ? color : "neutral";
-  return /* @__PURE__ */ jsx6(
-    Chip,
-    {
-      color: chipColor,
-      variant: "soft",
-      size: "sm",
-      children: boolValue ? trueLabel : falseLabel
-    }
-  );
-}
-var CHIP_COLORS = /* @__PURE__ */ new Set(["success", "neutral", "danger", "primary", "warning"]);
-function isChipColor(value) {
-  return CHIP_COLORS.has(value);
-}
-
-// src/fields/number-field.tsx
-import { jsx as jsx7 } from "react/jsx-runtime";
-function NumberField({
-  value,
-  locale = "en",
-  currency,
-  decimals
-}) {
-  if (value == null) {
-    return /* @__PURE__ */ jsx7("span", { children: "\u2014" });
-  }
-  const num = typeof value === "number" ? value : Number(value);
-  if (Number.isNaN(num)) {
-    return /* @__PURE__ */ jsx7("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(num);
-  return /* @__PURE__ */ jsx7("span", { children: formatted });
-}
-
-// src/fields/text-field.tsx
-import { jsx as jsx8 } from "react/jsx-runtime";
-function TextField({
-  value,
-  maxLength
-}) {
-  if (value == null) {
-    return /* @__PURE__ */ jsx8("span", { children: "\u2014" });
-  }
-  const text = String(value);
-  const display = maxLength && text.length > maxLength ? `${text.slice(0, maxLength)}\u2026` : text;
-  if (maxLength && text.length > maxLength) {
-    return /* @__PURE__ */ jsx8("span", { title: text, children: display });
-  }
-  return /* @__PURE__ */ jsx8("span", { children: display });
-}
-
-// src/fields/email-field.tsx
-import { jsx as jsx9 } from "react/jsx-runtime";
-function EmailField({ value }) {
-  if (value == null) {
-    return /* @__PURE__ */ jsx9("span", { children: "\u2014" });
-  }
-  const email = String(value);
-  return /* @__PURE__ */ jsx9("a", { href: `mailto:${email}`, children: email });
-}
-
-// src/fields/json-field.tsx
-import { useState } from "react";
-import { jsx as jsx10, jsxs as jsxs2 } from "react/jsx-runtime";
-function JsonField({
-  value,
-  collapsed = false
-}) {
-  const [isCollapsed, setIsCollapsed] = useState(collapsed);
-  if (value == null) {
-    return /* @__PURE__ */ jsx10("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__ */ jsx10("code", { children: short }),
-      " ",
-      /* @__PURE__ */ jsx10(
-        "button",
-        {
-          onClick: () => setIsCollapsed(false),
-          style: { border: "none", background: "none", cursor: "pointer", color: "#666", fontSize: "12px" },
-          children: "expand"
-        }
-      )
-    ] });
-  }
-  return /* @__PURE__ */ jsx10(
-    "pre",
-    {
-      style: {
-        margin: 0,
-        fontSize: "13px",
-        backgroundColor: "#f5f5f5",
-        padding: "8px",
-        borderRadius: "4px",
-        overflow: "auto"
-      },
-      children: /* @__PURE__ */ jsx10("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 (isColumnMeta(col)) {
-      result[key] = fieldForColumn(col);
-    }
-  }
-  return result;
-}
-function isColumnMeta(value) {
-  return typeof value === "object" && value !== null && "dataType" in value && typeof value.dataType === "string" && "name" in value && typeof value.name === "string";
-}
-
-// src/record-access.ts
-function getField(obj, key) {
-  if (typeof obj !== "object" || obj === null) {
-    return void 0;
-  }
-  return obj[key];
-}
-function getRecordId(obj) {
-  const id = getField(obj, "id");
-  if (typeof id === "string" || typeof id === "number") {
-    return id;
-  }
-  return 0;
-}
-
-// 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,
-  PermissionGate,
-  getInitials,
-  AvatarWithInitials,
-  getField,
-  getRecordId,
-  DateField,
-  BooleanField,
-  NumberField,
-  TextField,
-  EmailField,
-  JsonField,
-  fieldForColumn,
-  fieldsForTable,
-  useActionStatus
-};

package/dist/joy.d.ts

@@ -1,199 +0,0 @@
-import { ReactNode, ReactElement } from 'react';
-import { ButtonProps } from '@mui/joy/Button';
-import { ActionHookResult } from '@cfast/actions/client';
-import { a9 as WhenForbidden, s as ConfirmOptions, r as ConfirmDialogSlotProps, M as FormStatusProps, b as EmptyStateProps, d as BreadcrumbItem, e as TabItem, A as AppShellProps, f as NavigationItem, g as UserMenuProps, t as DataTableProps, z as FilterBarProps, n as BulkAction, v as DropZoneProps, O as ImagePreviewProps, y as FileListProps, Q as ListViewProps, u as DetailViewProps, k as AvatarWithInitialsProps, X as RoleBadgeProps, P as ImpersonationBannerProps } from './permission-gate-DVmY42oz.js';
-export { V as PermissionGate } from './permission-gate-DVmY42oz.js';
-import * as react_jsx_runtime from 'react/jsx-runtime';
-
-type JoyActionButtonProps = {
-    action: ActionHookResult;
-    children: ReactNode;
-    whenForbidden?: WhenForbidden;
-    confirmation?: string | ConfirmOptions;
-} & Omit<ButtonProps, "children" | "onClick" | "disabled" | "loading" | "action">;
-/**
- * Joy UI styled ActionButton.
- *
- * Takes an `ActionHookResult` from `useActions()` — no hooks inside,
- * pure presentation component. All Joy Button props (sx, fullWidth, etc.)
- * are forwarded to the underlying Button.
- */
-declare function ActionButton({ action, children, whenForbidden, confirmation: _confirmation, variant, color, size, ...buttonProps }: JoyActionButtonProps): ReactElement | null;
-
-/**
- * Joy UI ConfirmDialog — Modal + ModalDialog based on the example app pattern.
- */
-declare function ConfirmDialog({ open, onClose, onConfirm, title, description, confirmLabel, cancelLabel, variant, }: ConfirmDialogSlotProps): ReactElement;
-
-/**
- * Joy UI ToastProvider backed by Sonner.
- */
-declare function ToastProvider({ children }: {
-    children: ReactNode;
-}): ReactElement;
-
-/**
- * Joy UI FormStatus — displays action result feedback as Joy Alerts.
- */
-declare function FormStatus({ data }: FormStatusProps): ReactElement | null;
-
-/**
- * Joy UI EmptyState — centered layout with optional CTA.
- */
-declare function EmptyState({ title, description, createAction, createLabel, icon: Icon, }: EmptyStateProps): ReactElement;
-
-/**
- * Joy UI NavigationProgress — LinearProgress with absolute positioning.
- */
-declare function NavigationProgress(): ReactElement | null;
-
-type PageContainerProps = {
-    title?: string;
-    breadcrumb?: BreadcrumbItem[];
-    actions?: ReactNode;
-    tabs?: TabItem[];
-    children: ReactNode;
-};
-/**
- * Joy UI PageContainer — title + breadcrumb + action toolbar.
- */
-declare function PageContainer({ title, breadcrumb, actions, tabs: _tabs, children, }: PageContainerProps): ReactElement;
-
-/**
- * Joy UI AppShell — sidebar + header + content layout.
- */
-declare function AppShell({ children, sidebar, header, }: AppShellProps): ReactElement;
-declare namespace AppShell {
-    var Sidebar: typeof AppShellSidebar;
-    var Header: typeof AppShellHeader;
-}
-/**
- * Joy UI Sidebar — Sheet with List navigation items.
- */
-declare function AppShellSidebar({ items }: {
-    items: NavigationItem[];
-}): ReactElement;
-/**
- * Joy UI AppShell Header — Sheet with flex layout.
- */
-declare function AppShellHeader({ children, userMenu, }: {
-    children?: ReactNode;
-    userMenu?: ReactNode;
-}): ReactElement;
-
-/**
- * Joy UI UserMenu — Dropdown with Avatar trigger, user info, and links.
- */
-declare function UserMenu({ links, onSignOut, }: UserMenuProps): ReactElement | null;
-
-/**
- * Joy UI styled DataTable.
- * Renders a MUI Joy Table with sorting, selection, and row actions.
- */
-declare function DataTable<T = unknown>({ data, columns: columnsProp, selectable, selectedRows: externalSelectedRows, onSelectionChange, onRowClick, getRowId, emptyMessage, }: DataTableProps<T>): ReactElement;
-
-/**
- * Joy UI styled FilterBar — URL-synced filter controls.
- */
-declare function FilterBar({ filters, searchable, }: FilterBarProps): ReactElement;
-
-type BulkActionBarProps = {
-    selectedCount: number;
-    actions: BulkAction[];
-    onAction: (action: BulkAction) => void;
-    onClearSelection: () => void;
-};
-/**
- * Joy UI styled BulkActionBar.
- * Shown when rows are selected in a DataTable.
- */
-declare function BulkActionBar({ selectedCount, actions, onAction, onClearSelection, }: BulkActionBarProps): ReactElement | null;
-
-/**
- * Joy UI styled DropZone — drag-and-drop file upload area.
- */
-declare function DropZone({ upload, multiple, children, }: DropZoneProps): ReactElement;
-
-/**
- * Joy UI styled ImagePreview.
- */
-declare function ImagePreview({ fileKey, src, getUrl, width, height, fallback, alt, }: ImagePreviewProps): ReactElement;
-
-/**
- * Joy UI styled FileList.
- */
-declare function FileList({ files, onDownload, }: FileListProps): ReactElement;
-
-/**
- * Joy UI styled ListView — full page list with filters, table, and pagination.
- */
-declare function ListView<T = unknown>({ title, data, table: _table, columns, actions: _actions, filters, searchable, createAction, createLabel, selectable, bulkActions, breadcrumb, }: ListViewProps<T>): ReactElement;
-
-/**
- * Joy UI styled DetailView — two-column grid of record fields.
- */
-declare function DetailView<T = unknown>({ title, table, record, fields: fieldsProp, exclude, breadcrumb, }: DetailViewProps<T>): ReactElement;
-
-/**
- * Joy UI AvatarWithInitials — MUI Joy Avatar with initials fallback.
- */
-declare function AvatarWithInitials({ src, name, size, }: AvatarWithInitialsProps): ReactElement;
-
-/**
- * Joy UI RoleBadge — MUI Joy Chip with configurable color per role.
- */
-declare function RoleBadge({ role, colors }: RoleBadgeProps): ReactElement;
-
-/**
- * Joy UI ImpersonationBanner — sticky warning sheet when impersonating.
- */
-declare function ImpersonationBanner({ stopAction, }: ImpersonationBannerProps): ReactElement | null;
-
-declare function Layout({ children }: {
-    children: ReactNode;
-}): react_jsx_runtime.JSX.Element;
-declare function EmailInput({ value, onChange, }: {
-    value: string;
-    onChange: (value: string) => void;
-    error?: string;
-}): react_jsx_runtime.JSX.Element;
-declare function MagicLinkButton({ onClick, loading, }: {
-    onClick: () => void;
-    loading: boolean;
-}): react_jsx_runtime.JSX.Element;
-declare function PasskeyButton({ onClick, loading, }: {
-    onClick: () => void;
-    loading: boolean;
-}): react_jsx_runtime.JSX.Element;
-declare function SuccessMessage({ email }: {
-    email: string;
-}): react_jsx_runtime.JSX.Element;
-declare function ErrorMessage({ error }: {
-    error: string;
-}): react_jsx_runtime.JSX.Element;
-/**
- * Joy UI slot components for `<LoginPage>` from `@cfast/auth/client`.
- *
- * Usage:
- * ```tsx
- * import { LoginPage } from "@cfast/auth/client";
- * import { joyLoginComponents } from "@cfast/ui/joy";
- *
- * <LoginPage authClient={authClient} components={joyLoginComponents} />
- * ```
- *
- * Override individual slots while keeping the rest:
- * ```tsx
- * <LoginPage components={{ ...joyLoginComponents, Layout: MyLayout }} />
- * ```
- */
-declare const joyLoginComponents: {
-    Layout: typeof Layout;
-    EmailInput: typeof EmailInput;
-    MagicLinkButton: typeof MagicLinkButton;
-    PasskeyButton: typeof PasskeyButton;
-    SuccessMessage: typeof SuccessMessage;
-    ErrorMessage: typeof ErrorMessage;
-};
-
-export { ActionButton, AppShell, AppShellHeader, AppShellSidebar, AvatarWithInitials, BulkActionBar, ConfirmDialog, DataTable, DetailView, DropZone, EmptyState, FileList, FilterBar, FormStatus, ImagePreview, ImpersonationBanner, ListView, NavigationProgress, PageContainer, RoleBadge, ToastProvider, UserMenu, joyLoginComponents };