@cfast/joy 0.0.1

package/README.md

@@ -0,0 +1,18 @@
+# @cfast/joy
+
+Joy UI (MUI) plugin for `@cfast/ui` — provides styled component implementations powered by [MUI Joy UI](https://mui.com/joy-ui/getting-started/).
+
+## Installation
+
+```bash
+npm install @cfast/joy @cfast/ui
+```
+
+## Usage
+
+```tsx
+import { DataTable, ListView, ActionButton } from "@cfast/joy";
+import { createUIPlugin, UIPluginProvider } from "@cfast/ui";
+```
+
+See the [full documentation](https://github.com/DanielMSchmidt/cfast) for details.

package/dist/index.d.ts

@@ -0,0 +1,199 @@
+import { ReactNode, ReactElement } from 'react';
+import { ButtonProps } from '@mui/joy/Button';
+import { ActionHookResult } from '@cfast/actions/client';
+import { WhenForbidden, ConfirmOptions, ConfirmDialogSlotProps, FormStatusProps, EmptyStateProps, BreadcrumbItem, TabItem, AppShellProps, NavigationItem, UserMenuProps, DataTableProps, FilterBarProps, BulkAction, DropZoneProps, ImagePreviewProps, FileListProps, ListViewProps, DetailViewProps, AvatarWithInitialsProps, RoleBadgeProps, ImpersonationBannerProps } from '@cfast/ui';
+export { PermissionGate } from '@cfast/ui';
+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/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 };