@homebound/beam 3.105.2 → 3.107.0

package/dist/index.d.cts

@@ -6938,6 +6938,8 @@ type MenuItemBase = {
     disabled?: boolean | ReactNode;
     destructive?: boolean;
     hasDivider?: boolean;
+    /** Shows AiStar and styling on label. This ai icon and styling trumps all other subtypes. */
+    ai?: boolean;
 };
 type IconMenuItemType = MenuItemBase & {
     icon: IconProps["icon"];
@@ -10283,6 +10285,7 @@ type StepperTabProps = {
     /** Whether this step's content has been completed. */
     completed: boolean;
     onClick: (value: string) => void;
+    /** Tab isn't clickable. */
     disabled?: boolean;
     /** Collapses the tab down to its colored bottom border only, hiding the label — for the mobile view */
     collapsed?: boolean;
@@ -10303,8 +10306,8 @@ type WorkflowActionsProps = {
     completeLabel: "Create" | "Save";
     /** Called when the completion button is clicked. */
     onComplete: (e: PressEvent) => void | Promise<void>;
-    /** Disables whichever of Continue/Complete is currently shown, e.g. while the active step is invalid. */
-    primaryDisabled?: boolean;
+    /** Continue/Complete is disabled. A ReactNode is shown in Beam's tooltip. */
+    primaryDisabled?: boolean | ReactNode;
     /** When true, Continue/Complete use the `ai` button variant instead of `primary`. */
     aiMode?: boolean;
     isFirstStep?: boolean;
@@ -10680,8 +10683,8 @@ type PageHeaderLayoutProps<V extends string, X> = {
 declare function PageHeaderLayout<V extends string, X extends Only<TabsContentXss, X>>(props: PageHeaderLayoutProps<V, X>): JSX.Element;
 
 type FocusedFormLayoutProps = Pick<BaseHeaderProps, "title" | "documentTitleSuffix" | "breadcrumbs"> & Pick<WorkflowActionsProps, "onCancel" | "completeLabel" | "onComplete" | "onSaveAndExit"> & {
-    /** Gates the Create/Save CTA. */
-    isValid: boolean;
+    /** Create/Save is disabled. A ReactNode is shown in Beam's tooltip. */
+    primaryDisabled?: WorkflowActionsProps["primaryDisabled"];
     /** Read on Cancel / leave — a callback so flipping dirty does not re-render. */
     isDirty?: () => boolean;
     /** Full-bleed AI wash on the body and the `ai` Create/Save variant. Pair with body `aiMode` (e.g. FormSectionLayout). */
@@ -10697,15 +10700,15 @@ type FocusedFormLayoutProps = Pick<BaseHeaderProps, "title" | "documentTitleSuff
 declare function FocusedFormLayout(props: FocusedFormLayoutProps): JSX.Element;
 
 /**
- * A `StepperLayout` step: a `StepperTabsStep` (minus `value`, which is derived from `label`) plus
- * page content. Stepper chrome marks prior steps complete via current-step index; `isValid` only
- * gates the Continue/Complete CTA for the active step.
+ * A `StepperLayout` step: `StepperTabsStep` (minus `value`) plus page content.
  */
-type StepperLayoutStep = Omit<StepperTabsStep, "value"> & {
+type StepperLayoutStep = Omit<StepperTabsStep, "value" | "disabled"> & {
     /** Rendered as the page body while this is the active step. */
     content: ReactNode;
-    /** Gates Continue/Complete for the active step (form validity) */
-    isValid: boolean;
+    /** Tab isn't clickable. */
+    disabled?: boolean;
+    /** Continue/Complete is disabled. A ReactNode is shown in Beam's tooltip. */
+    primaryDisabled?: boolean | ReactNode;
 };
 type StepperLayoutProps = Pick<BaseHeaderProps, "title" | "documentTitleSuffix" | "breadcrumbs"> & Pick<WorkflowActionsProps, "onCancel" | "completeLabel" | "onComplete" | "onSaveAndExit"> & {
     /** The workflow's steps; the active step's `content` is the body, and it drives the header's tab strip. */

package/dist/index.d.ts

@@ -6938,6 +6938,8 @@ type MenuItemBase = {
     disabled?: boolean | ReactNode;
     destructive?: boolean;
     hasDivider?: boolean;
+    /** Shows AiStar and styling on label. This ai icon and styling trumps all other subtypes. */
+    ai?: boolean;
 };
 type IconMenuItemType = MenuItemBase & {
     icon: IconProps["icon"];
@@ -10283,6 +10285,7 @@ type StepperTabProps = {
     /** Whether this step's content has been completed. */
     completed: boolean;
     onClick: (value: string) => void;
+    /** Tab isn't clickable. */
     disabled?: boolean;
     /** Collapses the tab down to its colored bottom border only, hiding the label — for the mobile view */
     collapsed?: boolean;
@@ -10303,8 +10306,8 @@ type WorkflowActionsProps = {
     completeLabel: "Create" | "Save";
     /** Called when the completion button is clicked. */
     onComplete: (e: PressEvent) => void | Promise<void>;
-    /** Disables whichever of Continue/Complete is currently shown, e.g. while the active step is invalid. */
-    primaryDisabled?: boolean;
+    /** Continue/Complete is disabled. A ReactNode is shown in Beam's tooltip. */
+    primaryDisabled?: boolean | ReactNode;
     /** When true, Continue/Complete use the `ai` button variant instead of `primary`. */
     aiMode?: boolean;
     isFirstStep?: boolean;
@@ -10680,8 +10683,8 @@ type PageHeaderLayoutProps<V extends string, X> = {
 declare function PageHeaderLayout<V extends string, X extends Only<TabsContentXss, X>>(props: PageHeaderLayoutProps<V, X>): JSX.Element;
 
 type FocusedFormLayoutProps = Pick<BaseHeaderProps, "title" | "documentTitleSuffix" | "breadcrumbs"> & Pick<WorkflowActionsProps, "onCancel" | "completeLabel" | "onComplete" | "onSaveAndExit"> & {
-    /** Gates the Create/Save CTA. */
-    isValid: boolean;
+    /** Create/Save is disabled. A ReactNode is shown in Beam's tooltip. */
+    primaryDisabled?: WorkflowActionsProps["primaryDisabled"];
     /** Read on Cancel / leave — a callback so flipping dirty does not re-render. */
     isDirty?: () => boolean;
     /** Full-bleed AI wash on the body and the `ai` Create/Save variant. Pair with body `aiMode` (e.g. FormSectionLayout). */
@@ -10697,15 +10700,15 @@ type FocusedFormLayoutProps = Pick<BaseHeaderProps, "title" | "documentTitleSuff
 declare function FocusedFormLayout(props: FocusedFormLayoutProps): JSX.Element;
 
 /**
- * A `StepperLayout` step: a `StepperTabsStep` (minus `value`, which is derived from `label`) plus
- * page content. Stepper chrome marks prior steps complete via current-step index; `isValid` only
- * gates the Continue/Complete CTA for the active step.
+ * A `StepperLayout` step: `StepperTabsStep` (minus `value`) plus page content.
  */
-type StepperLayoutStep = Omit<StepperTabsStep, "value"> & {
+type StepperLayoutStep = Omit<StepperTabsStep, "value" | "disabled"> & {
     /** Rendered as the page body while this is the active step. */
     content: ReactNode;
-    /** Gates Continue/Complete for the active step (form validity) */
-    isValid: boolean;
+    /** Tab isn't clickable. */
+    disabled?: boolean;
+    /** Continue/Complete is disabled. A ReactNode is shown in Beam's tooltip. */
+    primaryDisabled?: boolean | ReactNode;
 };
 type StepperLayoutProps = Pick<BaseHeaderProps, "title" | "documentTitleSuffix" | "breadcrumbs"> & Pick<WorkflowActionsProps, "onCancel" | "completeLabel" | "onComplete" | "onSaveAndExit"> & {
     /** The workflow's steps; the active step's `content` is the body, and it drives the header's tab strip. */

package/dist/index.js

@@ -11375,7 +11375,7 @@ function MenuItemImpl(props) {
 }
 function renderMenuItem(menuItem, isSelected, isDisabled) {
   return /* @__PURE__ */ jsxs27("div", { className: "df w100 aic jcsb gap2", children: [
-    /* @__PURE__ */ jsx44("div", { className: "df aic", children: maybeWrapInLink(menuItem.onClick, isIconMenuItem(menuItem) ? /* @__PURE__ */ jsx44(IconMenuItem, { ...menuItem }) : isImageMenuItem(menuItem) ? /* @__PURE__ */ jsx44(ImageMenuItem, { ...menuItem }) : menuItem.label, isDisabled) }),
+    /* @__PURE__ */ jsx44("div", { className: "df aic", children: maybeWrapInLink(menuItem.onClick, menuItem.ai ? /* @__PURE__ */ jsx44(AiMenuItem, { label: menuItem.label, isDisabled }) : isIconMenuItem(menuItem) ? /* @__PURE__ */ jsx44(IconMenuItem, { ...menuItem }) : isImageMenuItem(menuItem) ? /* @__PURE__ */ jsx44(ImageMenuItem, { ...menuItem }) : menuItem.label, isDisabled) }),
     isSelected && /* @__PURE__ */ jsx44(Icon, { icon: "check", color: isDisabled ? "--b-text-disabled" /* TextDisabled */ : "--b-selection-indicator" /* SelectionIndicator */ })
   ] });
 }
@@ -11391,6 +11391,21 @@ function ImageMenuItem(item) {
     label
   ] });
 }
+function AiMenuItem({
+  label,
+  isDisabled
+}) {
+  return /* @__PURE__ */ jsxs27(Fragment15, { children: [
+    /* @__PURE__ */ jsx44("span", { className: "df aic jcc fs0 h_24px w_24px mr2", children: /* @__PURE__ */ jsx44(Icon, { icon: "aiStar", inc: 2.125 }) }),
+    /* @__PURE__ */ jsx44("span", { ...trussProps32({
+      ...!isDisabled ? {
+        color: ["color_var", {
+          "--color": maybeCssVar15("rgba(124, 58, 237, 1)" /* Purple600 */)
+        }]
+      } : {}
+    }), children: label })
+  ] });
+}
 function IconMenuItem(item) {
   const {
     icon,
@@ -28647,7 +28662,17 @@ function WorkflowPageLayout(props) {
 // src/layouts/Workflow/FocusedFormLayout.tsx
 import { jsx as jsx240 } from "react/jsx-runtime";
 function FocusedFormLayout(props) {
-  const { onCancel, completeLabel, onComplete, onSaveAndExit, isValid, isDirty, aiMode, children, ...headerProps } = props;
+  const {
+    onCancel,
+    completeLabel,
+    onComplete,
+    onSaveAndExit,
+    primaryDisabled,
+    isDirty,
+    aiMode,
+    children,
+    ...headerProps
+  } = props;
   const tid = useTestIds(props, "focusedFormLayout");
   return /* @__PURE__ */ jsx240(
     WorkflowPageLayout,
@@ -28660,7 +28685,7 @@ function FocusedFormLayout(props) {
       onSaveAndExit,
       completeLabel,
       onComplete,
-      primaryDisabled: !isValid,
+      primaryDisabled,
       children
     }
   );
@@ -28696,7 +28721,7 @@ function StepperLayout(props) {
       onSaveAndExit,
       completeLabel,
       onComplete,
-      primaryDisabled: !activeStep?.isValid,
+      primaryDisabled: activeStep?.primaryDisabled,
       onContinue: async () => {
         const onContinue = activeStep?.onContinue;
         if (onContinue) {