@cfast/ui 0.3.0 → 0.4.0

package/dist/{chunk-PWBG6CGF.js → chunk-NGBQQYZZ.js}

@@ -219,15 +219,19 @@ function PermissionGate({
 }
 
 // src/components/action-button.tsx
+import { useFetcher } from "react-router";
 import { jsx as jsx4 } from "react/jsx-runtime";
 function ActionButton({
   action,
   children,
   whenForbidden = "disable",
   confirmation: _confirmation,
+  href,
+  input,
   ...buttonProps
 }) {
   const Button = useComponent("button");
+  const fetcher = useFetcher();
   if (action.invisible) {
     return null;
   }
@@ -235,13 +239,33 @@ function ActionButton({
     return null;
   }
   const disabled = !action.permitted && whenForbidden === "disable";
+  const pending = action.pending || fetcher.state !== "idle";
+  if (href) {
+    if (disabled) {
+      return /* @__PURE__ */ jsx4(Button, { ...buttonProps, disabled: true, loading: false, children });
+    }
+    return /* @__PURE__ */ jsx4("a", { href, style: { textDecoration: "none" }, children: /* @__PURE__ */ jsx4(Button, { ...buttonProps, disabled: false, loading: false, children }) });
+  }
+  const handleClick = () => {
+    if (input) {
+      const formData = new FormData();
+      for (const [key, value] of Object.entries(input)) {
+        if (value !== null && value !== void 0) {
+          formData.set(key, String(value));
+        }
+      }
+      fetcher.submit(formData, { method: "POST" });
+    } else {
+      action.submit();
+    }
+  };
   return /* @__PURE__ */ jsx4(
     Button,
     {
       ...buttonProps,
-      onClick: () => action.submit(),
+      onClick: handleClick,
       disabled,
-      loading: action.pending,
+      loading: pending,
       children
     }
   );
@@ -1363,6 +1387,7 @@ export {
   UIPluginProvider,
   useUIPlugin,
   useComponent,
+  ConfirmContext,
   useConfirm,
   ToastContext,
   useToast,

package/dist/{client-C0K-7jLA.d.ts → client-Cb_d1sLi.d.ts}

@@ -1086,6 +1086,16 @@ type ActionButtonProps = {
     whenForbidden?: WhenForbidden;
     /** Confirmation message or options shown before executing the action. */
     confirmation?: string | ConfirmOptions;
+    /**
+     * When provided, renders a permission-gated link instead of a form button.
+     * The link navigates to `href` when the action is permitted.
+     */
+    href?: string;
+    /**
+     * When provided, submits a form with these values as hidden fields via
+     * `action.submit()`. Eliminates manual `<Form>` + `<input type="hidden">`.
+     */
+    input?: Record<string, string | number | boolean | null | undefined>;
 } & Omit<ButtonSlotProps, ActionButtonControlledProps>;
 /**
  * Props for the PermissionGate component.
@@ -1479,6 +1489,10 @@ declare function useComponent<K extends keyof UIPluginComponents>(slot: K): UIPl
  * the user confirms, or `false` if they cancel or dismiss.
  */
 type ConfirmFn = (options: ConfirmOptions) => Promise<boolean>;
+type ConfirmContextValue = {
+    confirm: ConfirmFn;
+};
+declare const ConfirmContext: react.Context<ConfirmContextValue | null>;
 /**
  * Returns an imperative {@link ConfirmFn} that opens a confirmation dialog
  * and resolves to `true` (confirmed) or `false` (cancelled/dismissed).
@@ -1616,20 +1630,43 @@ declare function PermissionGate({ action, children, fallback, }: PermissionGateP
  * - `whenForbidden="disable"` -- shown but disabled when not permitted (default)
  * - `whenForbidden="show"` -- shown and clickable regardless of permission
  *
+ * When `href` is provided, renders a permission-gated `<a>` link instead of
+ * a form-submitting button. The link is only rendered when the action is
+ * permitted (respects `whenForbidden`).
+ *
+ * When `input` is provided, submits a form with those values as hidden
+ * fields via a fetcher, eliminating manual `<Form>` + `<input type="hidden">`.
+ * This works with both `useActions()` results (where `action.submit()` is
+ * already wired) and `useCfastLoader()` results (where `action.submit()`
+ * is a no-op and the fetcher handles submission).
+ *
  * @param props - See {@link ActionButtonProps}.
  *
- * @example
+ * @example Basic form submission
+ * ```tsx
+ * <ActionButton action={publishPost} confirmation="Publish this post?">
+ *   Publish
+ * </ActionButton>
+ * ```
+ *
+ * @example Navigation link (permission-gated)
+ * ```tsx
+ * <ActionButton action={documents.canAdd()} href="/documents/new">
+ *   New Document
+ * </ActionButton>
+ * ```
+ *
+ * @example Form data via input prop
  * ```tsx
  * <ActionButton
- *   action={publishPost}
- *   whenForbidden="disable"
- *   confirmation="Publish this post?"
+ *   action={recipe.canDelete()}
+ *   input={{ _action: "deleteRecipe", id: recipe.id }}
  * >
- *   Publish
+ *   Delete
  * </ActionButton>
  * ```
  */
-declare function ActionButton({ action, children, whenForbidden, confirmation: _confirmation, ...buttonProps }: ActionButtonProps): react_jsx_runtime.JSX.Element | null;
+declare function ActionButton({ action, children, whenForbidden, confirmation: _confirmation, href, input, ...buttonProps }: ActionButtonProps): react_jsx_runtime.JSX.Element | null;
 
 /**
  * Provides the {@link useConfirm} context and renders the confirmation dialog.
@@ -2005,4 +2042,4 @@ declare function ListView<T = unknown>({ title, data, table: _table, columns, ac
  */
 declare function DetailView<T = unknown>({ title, table, record, fields: fieldsProp, exclude, breadcrumb, }: DetailViewProps<T>): react_jsx_runtime.JSX.Element;
 
-export { type FormStatusProps as $, type AppShellProps as A, type BooleanFieldProps as B, type ChipSlotProps as C, type DateFieldProps as D, type EmailFieldProps as E, type FileFieldProps as F, DetailView as G, type DetailViewProps as H, type ImageFieldProps as I, type JsonFieldProps as J, DropZone as K, type DropZoneProps as L, type DropZoneSlotProps as M, type NumberFieldProps as N, FileList$1 as O, type FileListFile as P, type FileListProps as Q, type RelationFieldProps as R, FilterBar as S, type TextFieldProps as T, type UrlFieldProps as U, type FilterBarProps as V, type FilterDef as W, type FilterOption as X, type FilterType as Y, FormStatus as Z, type FormStatusData as _, type UploadFieldProps as a, ImagePreview as a0, type ImagePreviewProps as a1, ImpersonationBanner as a2, type ImpersonationBannerProps as a3, ListView as a4, type ListViewProps as a5, type PageContainerSlotProps as a6, PermissionGate as a7, type PermissionGateProps as a8, RoleBadge as a9, type RoleBadgeProps as aa, type SidebarSlotProps as ab, type TableCellSlotProps as ac, type TableRowSlotProps as ad, type TableSectionSlotProps as ae, type TableSlotProps as af, type ToastApi as ag, ToastContext as ah, type ToastOptions as ai, type ToastSlotProps as aj, type ToastType as ak, type TooltipSlotProps as al, type UIPlugin as am, type UIPluginComponents as an, UIPluginProvider as ao, type UploadFieldFile as ap, type UserMenuLink as aq, type WhenForbidden as ar, createUIPlugin as as, getInitials as at, useActionToast as au, useColumnInference as av, useComponent as aw, useConfirm as ax, useToast as ay, useUIPlugin as az, type FieldComponent as b, type EmptyStateProps as c, type NavigationProgressProps as d, type BreadcrumbItem as e, type TabItem as f, type NavigationItem as g, type UserMenuProps as h, ActionButton as i, type ActionButtonProps as j, type AlertSlotProps as k, type AppShellSlotProps as l, AvatarWithInitials as m, type AvatarWithInitialsProps as n, type BaseFieldProps as o, type BreadcrumbSlotProps as p, type BulkAction as q, BulkActionBar as r, type ButtonSlotProps as s, type ColumnDef as t, type ColumnShorthand as u, type ConfirmDialogSlotProps as v, type ConfirmOptions as w, ConfirmProvider as x, DataTable as y, type DataTableProps as z };
+export { type FormStatusData as $, type AppShellProps as A, type BooleanFieldProps as B, type ChipSlotProps as C, type DateFieldProps as D, type EmailFieldProps as E, type FileFieldProps as F, type DataTableProps as G, DetailView as H, type ImageFieldProps as I, type JsonFieldProps as J, type DetailViewProps as K, DropZone as L, type DropZoneProps as M, type NumberFieldProps as N, type DropZoneSlotProps as O, FileList$1 as P, type FileListFile as Q, type RelationFieldProps as R, type FileListProps as S, type TextFieldProps as T, type UrlFieldProps as U, FilterBar as V, type FilterBarProps as W, type FilterDef as X, type FilterOption as Y, type FilterType as Z, FormStatus as _, type UploadFieldProps as a, type FormStatusProps as a0, ImagePreview as a1, type ImagePreviewProps as a2, ImpersonationBanner as a3, type ImpersonationBannerProps as a4, ListView as a5, type ListViewProps as a6, type PageContainerSlotProps as a7, PermissionGate as a8, type PermissionGateProps as a9, useUIPlugin as aA, RoleBadge as aa, type RoleBadgeProps as ab, type SidebarSlotProps as ac, type TableCellSlotProps as ad, type TableRowSlotProps as ae, type TableSectionSlotProps as af, type TableSlotProps as ag, type ToastApi as ah, ToastContext as ai, type ToastOptions as aj, type ToastSlotProps as ak, type ToastType as al, type TooltipSlotProps as am, type UIPlugin as an, type UIPluginComponents as ao, UIPluginProvider as ap, type UploadFieldFile as aq, type UserMenuLink as ar, type WhenForbidden as as, createUIPlugin as at, getInitials as au, useActionToast as av, useColumnInference as aw, useComponent as ax, useConfirm as ay, useToast as az, type FieldComponent as b, type EmptyStateProps as c, type NavigationProgressProps as d, type BreadcrumbItem as e, type TabItem as f, type NavigationItem as g, type UserMenuProps as h, ActionButton as i, type ActionButtonProps as j, type AlertSlotProps as k, type AppShellSlotProps as l, AvatarWithInitials as m, type AvatarWithInitialsProps as n, type BaseFieldProps as o, type BreadcrumbSlotProps as p, type BulkAction as q, BulkActionBar as r, type ButtonSlotProps as s, type ColumnDef as t, type ColumnShorthand as u, ConfirmContext as v, type ConfirmDialogSlotProps as w, type ConfirmOptions as x, ConfirmProvider as y, DataTable as z };

package/dist/client.d.ts

@@ -1,4 +1,4 @@
-export { i as ActionButton, m as AvatarWithInitials, r as BulkActionBar, x as ConfirmProvider, y as DataTable, G as DetailView, K as DropZone, O as FileList, S as FilterBar, Z as FormStatus, a0 as ImagePreview, a2 as ImpersonationBanner, a4 as ListView, a7 as PermissionGate, a9 as RoleBadge, ao as UIPluginProvider, as as createUIPlugin, at as getInitials, au as useActionToast, av as useColumnInference, aw as useComponent, ax as useConfirm, ay as useToast, az as useUIPlugin } from './client-C0K-7jLA.js';
+export { i as ActionButton, m as AvatarWithInitials, r as BulkActionBar, y as ConfirmProvider, z as DataTable, H as DetailView, L as DropZone, P as FileList, V as FilterBar, _ as FormStatus, a1 as ImagePreview, a3 as ImpersonationBanner, a5 as ListView, a8 as PermissionGate, aa as RoleBadge, ap as UIPluginProvider, at as createUIPlugin, au as getInitials, av as useActionToast, aw as useColumnInference, ax as useComponent, ay as useConfirm, az as useToast, aA as useUIPlugin } from './client-Cb_d1sLi.js';
 import 'react/jsx-runtime';
 import 'react';
 import '@cfast/actions/client';

package/dist/client.js

@@ -23,7 +23,7 @@ import {
   useConfirm,
   useToast,
   useUIPlugin
-} from "./chunk-PWBG6CGF.js";
+} from "./chunk-NGBQQYZZ.js";
 export {
   ActionButton,
   AvatarWithInitials,

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import { D as DateFieldProps, B as BooleanFieldProps, N as NumberFieldProps, T as TextFieldProps, E as EmailFieldProps, U as UrlFieldProps, I as ImageFieldProps, F as FileFieldProps, R as RelationFieldProps, J as JsonFieldProps, a as UploadFieldProps, b as FieldComponent, c as EmptyStateProps, d as NavigationProgressProps, e as BreadcrumbItem, f as TabItem, A as AppShellProps, g as NavigationItem, h as UserMenuProps } from './client-C0K-7jLA.js';
-export { i as ActionButton, j as ActionButtonProps, k as AlertSlotProps, l as AppShellSlotProps, m as AvatarWithInitials, n as AvatarWithInitialsProps, o as BaseFieldProps, p as BreadcrumbSlotProps, q as BulkAction, r as BulkActionBar, s as ButtonSlotProps, C as ChipSlotProps, t as ColumnDef, u as ColumnShorthand, v as ConfirmDialogSlotProps, w as ConfirmOptions, x as ConfirmProvider, y as DataTable, z as DataTableProps, G as DetailView, H as DetailViewProps, K as DropZone, L as DropZoneProps, M as DropZoneSlotProps, O as FileList, P as FileListFile, Q as FileListProps, S as FilterBar, V as FilterBarProps, W as FilterDef, X as FilterOption, Y as FilterType, Z as FormStatus, _ as FormStatusData, $ as FormStatusProps, a0 as ImagePreview, a1 as ImagePreviewProps, a2 as ImpersonationBanner, a3 as ImpersonationBannerProps, a4 as ListView, a5 as ListViewProps, a6 as PageContainerSlotProps, a7 as PermissionGate, a8 as PermissionGateProps, a9 as RoleBadge, aa as RoleBadgeProps, ab as SidebarSlotProps, ac as TableCellSlotProps, ad as TableRowSlotProps, ae as TableSectionSlotProps, af as TableSlotProps, ag as ToastApi, ah as ToastContext, ai as ToastOptions, aj as ToastSlotProps, ak as ToastType, al as TooltipSlotProps, am as UIPlugin, an as UIPluginComponents, ao as UIPluginProvider, ap as UploadFieldFile, aq as UserMenuLink, ar as WhenForbidden, as as createUIPlugin, at as getInitials, au as useActionToast, av as useColumnInference, aw as useComponent, ax as useConfirm, ay as useToast, az as useUIPlugin } from './client-C0K-7jLA.js';
+import { D as DateFieldProps, B as BooleanFieldProps, N as NumberFieldProps, T as TextFieldProps, E as EmailFieldProps, U as UrlFieldProps, I as ImageFieldProps, F as FileFieldProps, R as RelationFieldProps, J as JsonFieldProps, a as UploadFieldProps, b as FieldComponent, c as EmptyStateProps, d as NavigationProgressProps, e as BreadcrumbItem, f as TabItem, A as AppShellProps, g as NavigationItem, h as UserMenuProps } from './client-Cb_d1sLi.js';
+export { i as ActionButton, j as ActionButtonProps, k as AlertSlotProps, l as AppShellSlotProps, m as AvatarWithInitials, n as AvatarWithInitialsProps, o as BaseFieldProps, p as BreadcrumbSlotProps, q as BulkAction, r as BulkActionBar, s as ButtonSlotProps, C as ChipSlotProps, t as ColumnDef, u as ColumnShorthand, v as ConfirmContext, w as ConfirmDialogSlotProps, x as ConfirmOptions, y as ConfirmProvider, z as DataTable, G as DataTableProps, H as DetailView, K as DetailViewProps, L as DropZone, M as DropZoneProps, O as DropZoneSlotProps, P as FileList, Q as FileListFile, S as FileListProps, V as FilterBar, W as FilterBarProps, X as FilterDef, Y as FilterOption, Z as FilterType, _ as FormStatus, $ as FormStatusData, a0 as FormStatusProps, a1 as ImagePreview, a2 as ImagePreviewProps, a3 as ImpersonationBanner, a4 as ImpersonationBannerProps, a5 as ListView, a6 as ListViewProps, a7 as PageContainerSlotProps, a8 as PermissionGate, a9 as PermissionGateProps, aa as RoleBadge, ab as RoleBadgeProps, ac as SidebarSlotProps, ad as TableCellSlotProps, ae as TableRowSlotProps, af as TableSectionSlotProps, ag as TableSlotProps, ah as ToastApi, ai as ToastContext, aj as ToastOptions, ak as ToastSlotProps, al as ToastType, am as TooltipSlotProps, an as UIPlugin, ao as UIPluginComponents, ap as UIPluginProvider, aq as UploadFieldFile, ar as UserMenuLink, as as WhenForbidden, at as createUIPlugin, au as getInitials, av as useActionToast, aw as useColumnInference, ax as useComponent, ay as useConfirm, az as useToast, aA as useUIPlugin } from './client-Cb_d1sLi.js';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ReactNode } from 'react';
 import { ClientDescriptor, ActionHookResult } from '@cfast/actions/client';

package/dist/index.js

@@ -3,6 +3,7 @@ import {
   AvatarWithInitials,
   BooleanField,
   BulkActionBar,
+  ConfirmContext,
   ConfirmProvider,
   DataTable,
   DateField,
@@ -37,7 +38,7 @@ import {
   useConfirm,
   useToast,
   useUIPlugin
-} from "./chunk-PWBG6CGF.js";
+} from "./chunk-NGBQQYZZ.js";
 
 // src/fields/url-field.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -676,6 +677,7 @@ export {
   AvatarWithInitials,
   BooleanField,
   BulkActionBar,
+  ConfirmContext,
   ConfirmProvider,
   DataTable,
   DateField,

package/llms.txt

@@ -51,7 +51,7 @@ useColumnInference(table: Record<string, unknown> | undefined, columns?: string[
 - `NavigationProgress` -- thin progress bar during React Router navigation.
 
 **Actions & feedback:**
-- `ActionButton` -- permission-aware button wrapping a `@cfast/actions` action. Props: `action`, `input`, `whenForbidden: "hide" | "disable" | "show"`, `confirmation`.
+- `ActionButton` -- permission-aware button wrapping a `@cfast/actions` action. Props: `action`, `whenForbidden: "hide" | "disable" | "show"`, `confirmation`, `href` (render as link), `input` (submit form data via fetcher).
 - `PermissionGate` -- conditional render based on action permissions. Props: `action`, `input`, `fallback`.
 - `ConfirmDialog` -- standalone confirmation dialog.
 - `ToastProvider` -- mount once in root layout for toast notifications.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cfast/ui",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Permission-aware React components with UI library plugins",
   "keywords": [
     "cfast",
@@ -41,7 +41,7 @@
     "@cfast/auth": ">=0.3.0 <0.5.0",
     "@cfast/db": ">=0.3.0 <0.5.0",
     "@cfast/pagination": ">=0.2.0 <0.4.0",
-    "@cfast/permissions": ">=0.3.0 <0.5.0",
+    "@cfast/permissions": ">=0.3.0 <0.7.0",
     "@cfast/storage": ">=0.1.0 <0.3.0",
     "react": ">=19",
     "react-dom": ">=19",
@@ -79,12 +79,12 @@
     "tsup": "^8",
     "typescript": "^5.7",
     "vitest": "^4.1.0",
-    "@cfast/actions": "0.1.2",
-    "@cfast/auth": "0.4.0",
+    "@cfast/actions": "0.3.0",
+    "@cfast/auth": "0.6.0",
     "@cfast/pagination": "0.2.0",
-    "@cfast/permissions": "0.4.0",
-    "@cfast/storage": "0.2.0",
-    "@cfast/db": "0.4.0"
+    "@cfast/db": "0.8.0",
+    "@cfast/permissions": "0.7.0",
+    "@cfast/storage": "0.2.1"
   },
   "scripts": {
     "build": "tsup src/index.ts src/client.ts --format esm --dts",