@cfast/ui 0.3.1 → 0.4.0

package/dist/{chunk-TLLCSKE5.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
     }
   );

package/dist/{client-DcCN1BR-.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.
@@ -1620,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.

package/dist/client.d.ts

@@ -1,4 +1,4 @@
-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-DcCN1BR-.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-TLLCSKE5.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-DcCN1BR-.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-DcCN1BR-.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

@@ -38,7 +38,7 @@ import {
   useConfirm,
   useToast,
   useUIPlugin
-} from "./chunk-TLLCSKE5.js";
+} from "./chunk-NGBQQYZZ.js";
 
 // src/fields/url-field.tsx
 import { jsx, jsxs } from "react/jsx-runtime";

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.1",
+  "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.6.0",
+    "@cfast/permissions": ">=0.3.0 <0.7.0",
     "@cfast/storage": ">=0.1.0 <0.3.0",
     "react": ">=19",
     "react-dom": ">=19",
@@ -79,11 +79,11 @@
     "tsup": "^8",
     "typescript": "^5.7",
     "vitest": "^4.1.0",
-    "@cfast/actions": "0.1.3",
-    "@cfast/auth": "0.4.2",
-    "@cfast/db": "0.4.1",
+    "@cfast/actions": "0.3.0",
+    "@cfast/auth": "0.6.0",
     "@cfast/pagination": "0.2.0",
-    "@cfast/permissions": "0.5.1",
+    "@cfast/db": "0.8.0",
+    "@cfast/permissions": "0.7.0",
     "@cfast/storage": "0.2.1"
   },
   "scripts": {