@cfast/joy 0.2.0 → 0.3.0

package/dist/index.d.ts

@@ -10,15 +10,27 @@ type JoyActionButtonProps = {
     children: ReactNode;
     whenForbidden?: WhenForbidden;
     confirmation?: string | ConfirmOptions;
+    /**
+     * When provided, renders a permission-gated Link instead of a form button.
+     */
+    href?: string;
+    /**
+     * When provided, submits a form with these values as hidden fields via
+     * a fetcher. Eliminates manual `<Form>` + `<input type="hidden">`.
+     */
+    input?: Record<string, string | number | boolean | null | undefined>;
 } & 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.
+ * Takes an `ActionHookResult` from `useActions()` or `useCfastLoader()`.
+ * All Joy Button props (sx, fullWidth, etc.) are forwarded to the underlying
+ * Button.
+ *
+ * When `href` is provided, renders as a Link (permission-gated).
+ * When `input` is provided, submits form data via a fetcher.
  */
-declare function ActionButton({ action, children, whenForbidden, confirmation: _confirmation, variant, color, size, ...buttonProps }: JoyActionButtonProps): ReactElement | null;
+declare function ActionButton({ action, children, whenForbidden, confirmation: _confirmation, href, input, variant, color, size, ...buttonProps }: JoyActionButtonProps): ReactElement | null;
 
 /**
  * Joy UI ConfirmDialog — Modal + ModalDialog based on the example app pattern.

package/dist/index.js

@@ -1,5 +1,6 @@
 // src/action-button.tsx
 import "react";
+import { useFetcher } from "react-router";
 import { Button as JoyButton } from "@mui/joy";
 import { Tooltip as JoyTooltip } from "@mui/joy";
 import { jsx } from "react/jsx-runtime";
@@ -8,11 +9,14 @@ function ActionButton({
   children,
   whenForbidden = "disable",
   confirmation: _confirmation,
+  href,
+  input,
   variant = "solid",
   color = "primary",
   size = "md",
   ...buttonProps
 }) {
+  const fetcher = useFetcher();
   if (action.invisible) {
     return null;
   }
@@ -20,13 +24,57 @@ function ActionButton({
     return null;
   }
   const disabled = !action.permitted && whenForbidden === "disable";
+  const pending = action.pending || fetcher.state !== "idle";
+  if (href) {
+    if (disabled) {
+      const disabledButton = /* @__PURE__ */ jsx(
+        JoyButton,
+        {
+          ...buttonProps,
+          disabled: true,
+          variant,
+          color,
+          size,
+          children
+        }
+      );
+      if (action.reason) {
+        return /* @__PURE__ */ jsx(JoyTooltip, { title: action.reason, children: /* @__PURE__ */ jsx("span", { children: disabledButton }) });
+      }
+      return disabledButton;
+    }
+    return /* @__PURE__ */ jsx(
+      JoyButton,
+      {
+        ...buttonProps,
+        ...{ component: "a", href },
+        variant,
+        color,
+        size,
+        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();
+    }
+  };
   const button = /* @__PURE__ */ jsx(
     JoyButton,
     {
       ...buttonProps,
-      onClick: () => action.submit(),
+      onClick: handleClick,
       disabled,
-      loading: action.pending,
+      loading: pending,
       variant,
       color,
       size,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cfast/joy",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Joy UI plugin for @cfast/ui — styled components powered by MUI Joy",
   "license": "MIT",
   "repository": {
@@ -57,13 +57,13 @@
     }
   },
   "dependencies": {
-    "@mui/material": "^6.5.0",
     "sonner": "^2.0.3"
   },
   "devDependencies": {
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
     "@mui/joy": "^5.0.0-beta.52",
+    "@mui/material": "^6.5.0",
     "@storybook/react": "^8.6.14",
     "@storybook/react-vite": "^8.6.14",
     "@testing-library/react": "^16.3.0",
@@ -78,9 +78,9 @@
     "tsup": "^8",
     "typescript": "^5.7",
     "vitest": "^4.1.0",
-    "@cfast/actions": "0.1.2",
-    "@cfast/auth": "0.4.0",
-    "@cfast/ui": "0.3.0"
+    "@cfast/auth": "0.6.0",
+    "@cfast/actions": "0.3.0",
+    "@cfast/ui": "0.4.0"
   },
   "scripts": {
     "build": "tsup src/index.ts --format esm --dts && node ../../scripts/fix-mui-joy-imports.mjs dist",