@cfast/ui 0.0.1 → 0.2.0

package/dist/client-CXIHCQtA.d.ts

@@ -1,274 +0,0 @@
-import * as react from 'react';
-import { ReactNode, ComponentType } from 'react';
-import { a5 as UIPlugin, a6 as UIPluginComponents, h as ActionStatusResult, r as ConfirmOptions, a0 as ToastApi, S as PermissionGateProps, g as ActionButtonProps, n as ButtonSlotProps, L as FormStatusProps, j as AvatarWithInitialsProps, V as RoleBadgeProps, C as ChipSlotProps, O as ImpersonationBannerProps, i as AlertSlotProps, s as DataTableProps, $ as TableSlotProps, y as FilterBarProps, m as BulkAction, o as ColumnDef, u as DropZoneProps, M as ImagePreviewProps, x as FileListProps, k as BreadcrumbItem, X as TabItem, P as ListViewProps, t as DetailViewProps } from './types-LUpWJwps.js';
-import { ClientDescriptor, Serializable } from '@cfast/actions';
-
-declare function createUIPlugin(config: {
-    components: Partial<UIPluginComponents>;
-}): UIPlugin;
-declare function UIPluginProvider({ plugin, children, }: {
-    plugin: UIPlugin;
-    children: React.ReactNode;
-}): react.FunctionComponentElement<react.ProviderProps<UIPlugin | null>>;
-declare function useUIPlugin(): UIPlugin | null;
-declare function useComponent<K extends keyof UIPluginComponents>(slot: K): UIPluginComponents[K];
-
-/**
- * Returns the permission status and submit function for a single action
- * from a composed action descriptor.
- *
- * If `actionName` is omitted, uses the first (or only) action in the descriptor.
- */
-declare function useActionStatus(descriptor: ClientDescriptor, actionName?: string, input?: Record<string, Serializable>): ActionStatusResult;
-
-type ConfirmFn = (options: ConfirmOptions) => Promise<boolean>;
-/**
- * Returns an imperative `confirm(options)` function that resolves to
- * `true` (confirmed) or `false` (cancelled).
- *
- * Must be used within a `ConfirmProvider`.
- */
-declare function useConfirm(): ConfirmFn;
-
-/**
- * Returns an imperative toast API.
- *
- * Must be used within a `ToastProvider`.
- */
-declare function useToast(): ToastApi;
-
-type ActionToastConfig = Record<string, {
-    success?: string;
-    error?: string;
-}>;
-/**
- * Auto-shows toasts when action results come back.
- *
- * ```ts
- * useActionToast(composed.client, {
- *   deletePost: { success: "Post deleted", error: "Failed to delete" },
- *   publishPost: { success: "Post published" },
- * });
- * ```
- */
-declare function useActionToast(descriptor: ClientDescriptor, config: ActionToastConfig): void;
-
-/**
- * Conditionally renders children based on action permission status.
- *
- * - When permitted: renders children
- * - When forbidden (not permitted, not invisible): renders fallback
- * - When invisible: renders nothing
- */
-declare function PermissionGate({ action, actionName, input, children, fallback, }: PermissionGateProps): react.FunctionComponentElement<react.FragmentProps> | null;
-
-/**
- * Permission-aware button that submits an action.
- *
- * - whenForbidden="hide": hidden when not permitted
- * - whenForbidden="disable": shown but disabled when not permitted
- * - whenForbidden="show": shown and clickable regardless of permission
- *
- * Supports a `confirmation` prop that, when set, will be used by
- * the confirm system (wired in the Feedback PR).
- */
-declare function ActionButton({ action, actionName, input, children, whenForbidden, confirmation: _confirmation, variant, color, size, startDecorator, }: ActionButtonProps): react.ReactElement<ButtonSlotProps, string | react.JSXElementConstructor<any>> | null;
-
-/**
- * Provides the `useConfirm()` context and renders the confirm dialog.
- * Uses the plugin's `confirmDialog` slot for rendering.
- */
-declare function ConfirmProvider({ children }: {
-    children: ReactNode;
-}): react.FunctionComponentElement<react.ProviderProps<{
-    confirm: ConfirmFn;
-} | null>>;
-
-/**
- * Displays action result feedback (success/error messages) using the
- * plugin's `alert` slot.
- */
-declare function FormStatus({ data }: FormStatusProps): react.DetailedReactHTMLElement<{
-    style: {
-        display: "flex";
-        flexDirection: "column";
-        gap: string;
-    };
-}, HTMLElement> | null;
-
-/**
- * Extracts up to 2 initials from a name.
- */
-declare function getInitials(name: string): string;
-/**
- * Headless AvatarWithInitials — renders an img or initials span.
- */
-declare function AvatarWithInitials({ src, name, size, }: AvatarWithInitialsProps): react.DetailedReactHTMLElement<{
-    src: string;
-    alt: string;
-    style: {
-        width: 32 | 40 | 56;
-        height: 32 | 40 | 56;
-        borderRadius: string;
-        objectFit: "cover";
-    };
-}, HTMLElement> | react.DetailedReactHTMLElement<{
-    "aria-label": string;
-    style: {
-        display: "inline-flex";
-        alignItems: "center";
-        justifyContent: "center";
-        width: 32 | 40 | 56;
-        height: 32 | 40 | 56;
-        borderRadius: string;
-        backgroundColor: "#ddd";
-        fontSize: number;
-        fontWeight: "bold";
-    };
-}, HTMLElement>;
-
-/**
- * Colored badge displaying a user's role.
- * Uses the plugin's `chip` slot for rendering.
- */
-declare function RoleBadge({ role, colors }: RoleBadgeProps): react.ReactElement<ChipSlotProps, string | react.JSXElementConstructor<any>>;
-
-/**
- * Persistent banner shown when an admin is impersonating another user.
- * Hidden when not impersonating.
- */
-declare function ImpersonationBanner({ stopAction, }: ImpersonationBannerProps): react.ReactElement<AlertSlotProps, string | react.JSXElementConstructor<any>> | null;
-
-/**
- * Headless DataTable — renders a table with sorting, selection, and row actions.
- */
-declare function DataTable<T = unknown>({ data, columns: columnsProp, selectable, selectedRows: externalSelectedRows, onSelectionChange, onRowClick, getRowId, emptyMessage, }: DataTableProps<T>): react.DetailedReactHTMLElement<{
-    style: {
-        textAlign: "center";
-        padding: string;
-        color: "#666";
-    };
-}, HTMLElement> | react.ReactElement<TableSlotProps, string | react.JSXElementConstructor<any>>;
-
-/**
- * Headless FilterBar — URL-synced filter controls.
- * Each filter serializes to URL search params.
- */
-declare function FilterBar({ filters, searchable, }: FilterBarProps): react.DetailedReactHTMLElement<{
-    style: {
-        display: "flex";
-        gap: string;
-        flexWrap: "wrap";
-        alignItems: "center";
-        marginBottom: string;
-    };
-}, HTMLElement>;
-
-type BulkActionBarProps = {
-    selectedCount: number;
-    actions: BulkAction[];
-    onAction: (action: BulkAction) => void;
-    onClearSelection: () => void;
-};
-/**
- * Headless BulkActionBar — shown when rows are selected.
- * Displays count + action buttons + clear selection.
- */
-declare function BulkActionBar({ selectedCount, actions, onAction, onClearSelection, }: BulkActionBarProps): react.DetailedReactHTMLElement<{
-    style: {
-        display: "flex";
-        alignItems: "center";
-        gap: string;
-        padding: string;
-        backgroundColor: "#f0f4ff";
-        borderRadius: string;
-        marginBottom: string;
-    };
-}, HTMLElement> | null;
-
-type InferredColumn = ColumnDef & {
-    field: ComponentType<{
-        value: unknown;
-    }>;
-};
-/**
- * Inspects a Drizzle table's columns and returns inferred column definitions
- * with appropriate TypedField components.
- *
- * @param table - A Drizzle table object (columns accessible via iteration)
- * @param columns - Optional subset of column names to include
- */
-declare function useColumnInference(table: Record<string, unknown> | undefined, columns?: string[]): InferredColumn[];
-
-/**
- * Headless DropZone — drag-and-drop file upload area.
- * Integrates with `useUpload()` from `@cfast/storage/client`.
- */
-declare function DropZone({ upload, multiple, children, }: DropZoneProps): react.DetailedReactHTMLElement<react.HTMLAttributes<HTMLElement>, HTMLElement>;
-
-/**
- * Headless ImagePreview — displays an image from storage or direct src.
- */
-declare function ImagePreview({ fileKey, src, getUrl, width, height, fallback, alt, }: ImagePreviewProps): react.DetailedReactHTMLElement<react.HTMLAttributes<HTMLElement>, HTMLElement> | react.DetailedReactHTMLElement<{
-    style: {
-        width: number;
-        height: number;
-        backgroundColor: "#f5f5f5";
-        display: "flex";
-        alignItems: "center";
-        justifyContent: "center";
-        borderRadius: string;
-        color: "#999";
-    };
-}, HTMLElement> | react.DetailedReactHTMLElement<{
-    src: string;
-    alt: string;
-    style: {
-        width: number;
-        height: number;
-        objectFit: "cover";
-        borderRadius: string;
-    };
-}, HTMLElement>;
-
-/**
- * Headless FileList — displays a list of files with download links.
- */
-declare function FileList({ files, onDownload, }: FileListProps): react.DetailedReactHTMLElement<{
-    style: {
-        color: "#999";
-    };
-}, HTMLElement> | react.DetailedReactHTMLElement<{
-    style: {
-        listStyle: "none";
-        padding: number;
-        margin: number;
-    };
-    "data-testid": string;
-}, HTMLElement>;
-
-type PageContainerProps = {
-    title?: string;
-    breadcrumb?: BreadcrumbItem[];
-    actions?: ReactNode;
-    tabs?: TabItem[];
-    children: ReactNode;
-};
-/**
- * Page wrapper with title, breadcrumb, tabs, and action toolbar.
- */
-declare function PageContainer({ title, breadcrumb, actions, tabs: _tabs, children, }: PageContainerProps): react.FunctionComponentElement<react.FragmentProps>;
-
-/**
- * Composite ListView — composes PageContainer, FilterBar, DataTable,
- * EmptyState, BulkActionBar, and pagination controls.
- */
-declare function ListView<T = unknown>({ title, data, table: _table, columns, actions: _actions, filters, searchable, createAction, createLabel, selectable, bulkActions, breadcrumb, }: ListViewProps<T>): react.FunctionComponentElement<PageContainerProps>;
-
-/**
- * Composite DetailView — displays a single record's fields in a two-column grid.
- * Composes PageContainer + TypedField rendering.
- */
-declare function DetailView<T = unknown>({ title, table, record, fields: fieldsProp, exclude, breadcrumb, }: DetailViewProps<T>): react.FunctionComponentElement<PageContainerProps>;
-
-export { ActionButton as A, BulkActionBar as B, ConfirmProvider as C, DataTable as D, FileList as F, ImagePreview as I, ListView as L, PageContainer as P, RoleBadge as R, UIPluginProvider as U, AvatarWithInitials as a, DetailView as b, DropZone as c, FilterBar as d, FormStatus as e, ImpersonationBanner as f, PermissionGate as g, createUIPlugin as h, getInitials as i, useActionStatus as j, useActionToast as k, useColumnInference as l, useConfirm as m, useToast as n, useUIPlugin as o, useComponent as u };

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 };