myoperator-ui 0.0.228 → 0.0.230

package/dist/index.js

@@ -7968,7 +7968,7 @@ export interface PageHeaderProps
   actions?: React.ReactNode;
   /** Show bottom border (default: true) */
   showBorder?: boolean;
-  /** Layout mode: 'horizontal' (single row), 'vertical' (stacked), 'responsive' (auto based on screen size, default) */
+  /** Layout mode: 'horizontal' (row on sm+, stacked on narrow), 'vertical' (stacked), 'responsive' (same as horizontal, default) */
   layout?: "horizontal" | "vertical" | "responsive";
   /** Max actions to show on mobile before overflow (default: 2) */
   mobileOverflowLimit?: number;
@@ -8048,13 +8048,13 @@ const PageHeader = React.forwardRef(
 
     // Layout classes based on prop
     const layoutClasses = {
-      horizontal: "flex-row items-center",
+      horizontal: "flex-col sm:flex-row sm:items-center",
       vertical: "flex-col",
       responsive: "flex-col sm:flex-row sm:items-center",
     };
 
     const heightClasses = {
-      horizontal: "h-[76px]",
+      horizontal: "min-h-[76px] py-4 lg:py-0 lg:h-[76px]",
       vertical: "min-h-[76px] py-4",
       responsive: "min-h-[76px] py-4 lg:py-0 lg:h-[76px]",
     };
@@ -8117,27 +8117,14 @@ const PageHeader = React.forwardRef(
       );
     };
 
-    // For horizontal layout, always show all actions inline
-    const renderHorizontalActions = () => (
-      <div className="flex items-center gap-2 ml-4">
-        {actionsArray.map((action, index) => (
-          <React.Fragment key={index}>{action}</React.Fragment>
-        ))}
-      </div>
-    );
-
     const renderActions = () => {
       if (!actions) return null;
 
-      if (layout === "horizontal") {
-        return renderHorizontalActions();
-      }
-
       if (layout === "vertical") {
         return renderExpandableActions("mt-3");
       }
 
-      // Responsive: render both, CSS handles visibility
+      // horizontal + responsive: stack actions below title on small screens
       return (
         <>
           {renderDesktopActions()}
@@ -8174,7 +8161,7 @@ const PageHeader = React.forwardRef(
 
           {/* Content Section: Title + Description */}
           <div className="flex-1 min-w-0">
-            <div className="flex min-h-10 items-center gap-2">
+            <div className="flex h-auto items-center gap-2 sm:min-h-10">
               <h1 className="m-0 text-lg font-semibold leading-none text-semantic-text-primary truncate">
                 {title}
               </h1>
@@ -12025,80 +12012,88 @@ const PlanDetailModal = React.forwardRef(
         <DialogContent
           size="lg"
           hideCloseButton
-          className="p-0 gap-0 overflow-hidden"
+          className={cn(
+            "flex max-h-[min(90vh,calc(100dvh-2rem))] min-w-0 flex-col gap-0 overflow-hidden rounded-xl",
+            "w-full max-w-[min(42rem,calc(100vw-2rem))] p-3 sm:p-4 md:p-6"
+          )}
         >
+          <DialogDescription className="sr-only">
+            Plan features, free allowances, and rates for this subscription.
+          </DialogDescription>
           <div
             ref={ref}
-            className={cn("flex flex-col", className)}
+            className={cn("flex min-h-0 flex-1 flex-col", className)}
             {...props}
           >
-            {/* Header */}
-            <div className="flex items-center justify-between px-8 py-4 border-b border-solid border-semantic-border-layout">
-              <DialogTitle className="text-lg font-semibold text-semantic-text-primary leading-none m-0">
+            {/* Header \u2014 matches other custom modals (e.g. plan-upgrade-summary) */}
+            <div className="flex shrink-0 items-start justify-between gap-3 border-b border-solid border-semantic-border-layout pb-3 sm:gap-4 sm:pb-4">
+              <DialogTitle className="m-0 min-w-0 flex-1 pr-2 text-base font-semibold leading-normal text-semantic-text-primary sm:text-lg">
                 {title}
               </DialogTitle>
               <button
                 type="button"
                 onClick={handleClose}
                 aria-label="Close"
-                className="flex items-center justify-center size-6 rounded text-semantic-text-muted hover:text-semantic-text-primary hover:bg-semantic-bg-hover transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-semantic-border-focus"
+                className="shrink-0 text-semantic-text-muted transition-colors hover:text-semantic-text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-semantic-border-focus focus-visible:ring-offset-2"
               >
-                <X className="size-3" aria-hidden="true" />
+                <X className="size-6" aria-hidden="true" />
               </button>
             </div>
 
-            {/* Body */}
-            <DialogDescription asChild>
-              <div className="flex flex-col gap-2.5 px-8 py-5 overflow-y-auto max-h-[70vh]">
-                <p className="m-0 text-base font-semibold text-semantic-text-primary leading-none">
-                  Features
-                </p>
-                <div className="w-full overflow-x-auto rounded border border-solid border-semantic-border-layout">
-                  <table className="w-full border-collapse text-sm">
-                    <thead>
-                      <tr className="bg-semantic-bg-ui">
-                        <th className="px-3 py-[11px] text-left font-semibold text-semantic-text-primary border-b border-solid border-semantic-border-layout w-[44%]">
-                          Feature
-                        </th>
-                        <th className="px-3 py-[11px] text-left font-semibold text-semantic-text-primary border-b border-solid border-semantic-border-layout w-[28%]">
-                          Free
-                        </th>
-                        <th className="px-3 py-[11px] text-left font-semibold text-semantic-text-primary border-b border-solid border-semantic-border-layout w-[28%]">
-                          Rate
-                        </th>
+            {/* Features label fixed; only the table region scrolls */}
+            <div className="flex min-h-0 flex-1 flex-col gap-2 pt-3 sm:gap-2.5 sm:pt-4">
+              <p className="m-0 shrink-0 text-sm font-semibold leading-none text-semantic-text-primary sm:text-base">
+                Features
+              </p>
+              <div className="min-h-0 flex-1 overflow-y-auto overflow-x-auto rounded border border-solid border-semantic-border-layout">
+                <table className="w-full min-w-0 border-collapse text-sm">
+                  <thead>
+                    <tr className="bg-semantic-bg-ui">
+                      <th className="w-[40%] px-2 py-2 text-left text-xs font-semibold text-semantic-text-primary border-b border-solid border-semantic-border-layout sm:w-[44%] sm:px-3 sm:py-[11px] sm:text-sm">
+                        Feature
+                      </th>
+                      <th className="w-[30%] px-2 py-2 text-left text-xs font-semibold text-semantic-text-primary border-b border-solid border-semantic-border-layout sm:w-[28%] sm:px-3 sm:py-[11px] sm:text-sm">
+                        Free
+                      </th>
+                      <th className="w-[30%] px-2 py-2 text-left text-xs font-semibold text-semantic-text-primary border-b border-solid border-semantic-border-layout sm:w-[28%] sm:px-3 sm:py-[11px] sm:text-sm">
+                        Rate
+                      </th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {features.map((feature, index) => (
+                      <tr
+                        key={feature.name}
+                        className={cn(
+                          index % 2 === 0
+                            ? "bg-semantic-bg-primary"
+                            : "bg-semantic-bg-ui"
+                        )}
+                      >
+                        <td className="px-2 py-2 text-xs text-semantic-text-secondary border-b border-solid border-semantic-border-layout sm:px-3 sm:py-[11px] sm:text-sm">
+                          <p className="m-0 leading-snug sm:leading-none">{feature.name}</p>
+                        </td>
+                        <td className="px-2 py-2 text-xs text-semantic-text-secondary border-b border-solid border-semantic-border-layout sm:px-3 sm:py-[11px] sm:text-sm">
+                          <p className="m-0 leading-snug sm:leading-none">{feature.free}</p>
+                        </td>
+                        <td className="px-2 py-2 text-xs text-semantic-text-secondary border-b border-solid border-semantic-border-layout sm:px-3 sm:py-[11px] sm:text-sm">
+                          <p className="m-0 leading-snug sm:leading-none">{feature.rate}</p>
+                        </td>
                       </tr>
-                    </thead>
-                    <tbody>
-                      {features.map((feature, index) => (
-                        <tr
-                          key={feature.name}
-                          className={cn(
-                            index % 2 === 0
-                              ? "bg-semantic-bg-primary"
-                              : "bg-semantic-bg-ui"
-                          )}
-                        >
-                          <td className="px-3 py-[11px] text-semantic-text-secondary border-b border-solid border-semantic-border-layout">
-                            <p className="m-0 leading-none">{feature.name}</p>
-                          </td>
-                          <td className="px-3 py-[11px] text-semantic-text-secondary border-b border-solid border-semantic-border-layout">
-                            <p className="m-0 leading-none">{feature.free}</p>
-                          </td>
-                          <td className="px-3 py-[11px] text-semantic-text-secondary border-b border-solid border-semantic-border-layout">
-                            <p className="m-0 leading-none">{feature.rate}</p>
-                          </td>
-                        </tr>
-                      ))}
-                    </tbody>
-                  </table>
-                </div>
+                    ))}
+                  </tbody>
+                </table>
               </div>
-            </DialogDescription>
+            </div>
 
             {/* Footer */}
             {planPrice && (
-              <div className="flex items-center px-8 py-4 border-t border-solid border-semantic-border-layout">
-                <p className="m-0 text-base text-semantic-text-primary">
+              <div
+                className={cn(
+                  "flex shrink-0 items-center border-t border-solid border-semantic-border-layout pt-3 sm:pt-4"
+                )}
+              >
+                <p className="m-0 text-sm text-semantic-text-primary sm:text-base">
                   <span className="font-semibold">Plan price </span>
                   <span className="font-normal">{planPrice}</span>
                 </p>
@@ -12185,11 +12180,11 @@ import { Dialog, DialogContent, DialogDescription, DialogTitle } from "../dialog
 import type { BillingCycleOption, PlanUpgradeModalProps } from "./types";
 
 const modalRootVariants = cva(
-  "flex flex-col gap-6 rounded-lg border border-solid border-semantic-border-layout bg-semantic-bg-primary p-9"
+  "flex min-h-0 max-h-[min(90vh,calc(100dvh-2rem))] flex-col gap-4 overflow-y-auto overflow-x-hidden rounded-lg border border-solid border-semantic-border-layout bg-semantic-bg-primary p-3 pt-4 pb-[calc(1rem+env(safe-area-inset-bottom,0px))] sm:gap-6 sm:p-6 sm:pb-[calc(1.5rem+env(safe-area-inset-bottom,0px))] md:gap-8 md:p-9 md:pb-[calc(2.25rem+env(safe-area-inset-bottom,0px))]"
 );
 
 const billingCycleOptionVariants = cva(
-  "flex w-full items-center gap-2.5 rounded-lg border border-solid bg-semantic-bg-primary p-3 text-left transition-colors",
+  "flex w-full min-h-[44px] items-center gap-2.5 rounded-lg border border-solid bg-semantic-bg-primary p-3 text-left transition-colors sm:min-h-0",
   {
     variants: {
       selected: {
@@ -12279,12 +12274,12 @@ const PlanUpgradeModal = React.forwardRef(
         <DialogContent
           size="default"
           hideCloseButton
-          className="w-full max-w-[480px] border-none bg-transparent p-0 shadow-none"
+          className="min-w-0 w-full max-w-[min(30rem,calc(100vw-1rem-env(safe-area-inset-left,0px)-env(safe-area-inset-right,0px)))] border-none bg-transparent p-0 shadow-none sm:max-w-[min(30rem,calc(100vw-2rem-env(safe-area-inset-left,0px)-env(safe-area-inset-right,0px)))]"
         >
           <div ref={ref} className={cn(modalRootVariants(), className)} {...props}>
-            <div className="flex items-start justify-between gap-4">
-              <div className="flex flex-col gap-2">
-                <DialogTitle className="m-0 text-lg font-semibold leading-normal text-semantic-text-primary">
+            <div className="flex items-start justify-between gap-3 sm:gap-4">
+              <div className="flex min-w-0 flex-1 flex-col gap-2">
+                <DialogTitle className="m-0 break-words text-base font-semibold leading-normal text-semantic-text-primary sm:text-lg">
                   {title}
                 </DialogTitle>
                 <DialogDescription className="m-0 text-sm tracking-[0.035px] text-semantic-text-muted">
@@ -12294,10 +12289,10 @@ const PlanUpgradeModal = React.forwardRef(
               <button
                 type="button"
                 onClick={handleClose}
-                className="shrink-0 text-semantic-text-muted transition-colors hover:text-semantic-text-primary"
+                className="shrink-0 text-semantic-text-muted transition-colors hover:text-semantic-text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-semantic-border-focus focus-visible:ring-offset-2"
                 aria-label="Close plan upgrade modal"
               >
-                <X className="size-5" />
+                <X className="size-6" aria-hidden="true" />
               </button>
             </div>
 
@@ -12313,7 +12308,7 @@ const PlanUpgradeModal = React.forwardRef(
                     aria-pressed={isSelected}
                   >
                     <span className={iconContainerVariants()}>{renderOptionIcon(option.icon)}</span>
-                    <span className="text-sm leading-normal tracking-[0.035px] text-semantic-text-primary">
+                    <span className="min-w-0 flex-1 text-left text-sm leading-normal tracking-[0.035px] text-semantic-text-primary">
                       {option.label}
                     </span>
                   </button>
@@ -12321,13 +12316,13 @@ const PlanUpgradeModal = React.forwardRef(
               })}
             </div>
 
-            <div className="flex justify-end">
+            <div className="flex justify-stretch sm:justify-end">
               <Button
                 variant="default"
                 onClick={handleNext}
                 disabled={!activeOptionId}
                 loading={loading}
-                className="min-w-[95px]"
+                className="w-full min-w-0 sm:w-auto sm:min-w-[95px]"
               >
                 {nextLabel}
               </Button>
@@ -12434,11 +12429,11 @@ import type {
 } from "./types";
 
 const modalRootVariants = cva(
-  "flex flex-col gap-8 rounded-lg border border-solid border-semantic-border-layout bg-semantic-bg-primary p-9"
+  "flex max-h-[min(90vh,calc(100dvh-2rem))] flex-col gap-4 overflow-y-auto rounded-lg border border-solid border-semantic-border-layout bg-semantic-bg-primary p-4 sm:gap-6 sm:p-6 md:gap-8 md:p-9"
 );
 
 const summaryPanelVariants = cva(
-  "flex flex-col gap-5 rounded border border-solid border-semantic-border-layout bg-semantic-bg-ui p-4"
+  "flex flex-col gap-4 rounded border border-solid border-semantic-border-layout bg-semantic-bg-ui p-3 sm:gap-5 sm:p-4"
 );
 
 const statusTitleVariants = cva("m-0 text-sm font-semibold leading-5 tracking-[0.014px]", {
@@ -12566,12 +12561,12 @@ const PlanUpgradeSummaryModal = React.forwardRef(
         <DialogContent
           size="default"
           hideCloseButton
-          className="w-full max-w-[660px] border-none bg-transparent p-0 shadow-none"
+          className="min-w-0 w-full max-w-[min(41.25rem,calc(100vw-2rem))] border-none bg-transparent p-0 shadow-none"
         >
           <div ref={ref} className={cn(modalRootVariants(), className)} {...props}>
-            <div className="flex items-start justify-between gap-4">
-              <div className="flex flex-col gap-2">
-                <DialogTitle className="m-0 text-lg font-semibold leading-normal text-semantic-text-primary">
+            <div className="flex items-start justify-between gap-3 sm:gap-4">
+              <div className="flex min-w-0 flex-1 flex-col gap-2">
+                <DialogTitle className="m-0 text-base font-semibold leading-normal text-semantic-text-primary sm:text-lg">
                   {resolvedTitle}
                 </DialogTitle>
                 <DialogDescription className="m-0 text-sm tracking-[0.035px] text-semantic-text-muted">
@@ -12581,7 +12576,7 @@ const PlanUpgradeSummaryModal = React.forwardRef(
               <button
                 type="button"
                 onClick={handleClose}
-                className="shrink-0 text-semantic-text-muted transition-colors hover:text-semantic-text-primary"
+                className="shrink-0 text-semantic-text-muted transition-colors hover:text-semantic-text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-semantic-border-focus focus-visible:ring-offset-2"
                 aria-label={closeAriaLabel}
               >
                 <X className="size-6" />
@@ -12589,9 +12584,9 @@ const PlanUpgradeSummaryModal = React.forwardRef(
             </div>
 
             <div className={summaryPanelVariants()}>
-              <div className="flex items-start gap-4">
+              <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:gap-4">
                 <span className="shrink-0">{getStatusIcon(resolvedTone)}</span>
-                <div className="flex flex-col gap-1">
+                <div className="flex min-w-0 flex-col gap-1">
                   <p className={statusTitleVariants({ tone: resolvedTone })}>
                     {resolvedStatus.title}
                   </p>
@@ -12607,33 +12602,43 @@ const PlanUpgradeSummaryModal = React.forwardRef(
                 {resolvedRows.map((row) => (
                   <div
                     key={\`\${row.label}-\${row.value}\`}
-                    className="flex items-center justify-between gap-6"
+                    className="flex flex-col gap-1 sm:flex-row sm:items-center sm:justify-between sm:gap-6"
                   >
-                    <span className="text-sm tracking-[0.035px] text-semantic-text-secondary">
+                    <span className="min-w-0 text-sm tracking-[0.035px] text-semantic-text-secondary">
                       {row.label}
                     </span>
-                    <span className="text-sm tracking-[0.035px] text-semantic-text-primary">
+                    <span className="min-w-0 shrink-0 text-left text-sm tracking-[0.035px] text-semantic-text-primary sm:text-right">
                       {row.value}
                     </span>
                   </div>
                 ))}
               </div>
 
-              <div className="flex items-center justify-between gap-6 border-t border-solid border-semantic-border-layout pt-3">
+              <div className="flex flex-col gap-1 border-t border-solid border-semantic-border-layout pt-3 sm:flex-row sm:items-center sm:justify-between sm:gap-6">
                 <span className="text-sm font-semibold tracking-[0.014px] text-semantic-text-secondary">
                   {totalLabel}
                 </span>
-                <span className="text-sm font-semibold tracking-[0.014px] text-semantic-text-primary">
+                <span className="text-sm font-semibold tracking-[0.014px] text-semantic-text-primary sm:text-right">
                   {resolvedTotalValue}
                 </span>
               </div>
             </div>
 
-            <div className="flex justify-end gap-2.5">
-              <Button variant="outline" onClick={handleCancel}>
+            <div className="flex flex-col-reverse gap-2 sm:flex-row sm:justify-end sm:gap-2.5">
+              <Button
+                variant="outline"
+                onClick={handleCancel}
+                className="w-full sm:w-auto"
+              >
                 {cancelLabel}
               </Button>
-              <Button variant="primary" onClick={onPrimaryAction} loading={loading} disabled={disabled}>
+              <Button
+                variant="primary"
+                onClick={onPrimaryAction}
+                loading={loading}
+                disabled={disabled}
+                className="w-full sm:w-auto"
+              >
                 {resolvedPrimaryActionLabel}
               </Button>
             </div>
@@ -20458,6 +20463,7 @@ const BotIdentityCard = React.forwardRef(
 
             <Field
               label="Primary Role"
+              helperText="Defines what the bot does. Choose from the list or type a custom role."
               characterCount={{
                 current: (data.primaryRole ?? "").length,
                 max: PRIMARY_ROLE_MAX_LENGTH,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "myoperator-ui",
-  "version": "0.0.228",
+  "version": "0.0.230",
   "description": "CLI for adding myOperator UI components to your project",
   "type": "module",
   "exports": "./dist/index.js",