@ai-matrx/design-system 0.34.0 → 0.36.0

package/dist/index.d.cts

@@ -1089,6 +1089,34 @@ interface PopoverContentProps extends React.ComponentPropsWithoutRef<typeof Popo
      * `styles.css` already honours `prefers-reduced-motion`.
      */
     animated?: boolean;
+    /**
+     * HOW WIDE THE POPOVER IS ALLOWED TO BE, and it is the SYSTEM that decides — never a
+     * surface pasting its own `w-64` over the default (lane FIX-14, 2026-09-22).
+     *
+     * `"fixed"` (default) is the historical `w-72`: right for a menu of short, known
+     * labels, where a ragged edge would look broken.
+     *
+     * `"content"` is for a popover whose whole job is to SHOW SOMETHING THE SYSTEM DID
+     * NOT CHOOSE — a person's name, a record's title, a row the user is about to
+     * create. The relation picker offered
+     *
+     *     Create “Marisol Okonkwo — 418 Calle Pu
+     *
+     * inside a 16rem box, cut mid-word, on the one control that exists to show the name
+     * being created. A fixed width cannot be right for content of unknown length, so
+     * this one grows to its content between an honest floor and an honest ceiling:
+     *
+     *   · at least the trigger's own width, and at least 20rem — the width Airtable's and
+     *     Notion's link-record pickers settle on, and wide enough that an ordinary
+     *     "name — street, town" fits on one line;
+     *   · at most 28rem, and never wider than the viewport less a 1rem gutter each side,
+     *     so it still fits a 375px phone with nothing running off the screen. The floor is
+     *     clamped by the same gutter, so on a very narrow screen the ceiling still wins.
+     *
+     * Beyond that ceiling the CONTENT truncates with an ellipsis and carries a `title`.
+     * Growing, then ellipsis — never a mid-word cut.
+     */
+    sizing?: "fixed" | "content";
 }
 declare const PopoverContent: React.ForwardRefExoticComponent<PopoverContentProps & React.RefAttributes<HTMLDivElement>>;
 

package/dist/index.d.ts

@@ -1089,6 +1089,34 @@ interface PopoverContentProps extends React.ComponentPropsWithoutRef<typeof Popo
      * `styles.css` already honours `prefers-reduced-motion`.
      */
     animated?: boolean;
+    /**
+     * HOW WIDE THE POPOVER IS ALLOWED TO BE, and it is the SYSTEM that decides — never a
+     * surface pasting its own `w-64` over the default (lane FIX-14, 2026-09-22).
+     *
+     * `"fixed"` (default) is the historical `w-72`: right for a menu of short, known
+     * labels, where a ragged edge would look broken.
+     *
+     * `"content"` is for a popover whose whole job is to SHOW SOMETHING THE SYSTEM DID
+     * NOT CHOOSE — a person's name, a record's title, a row the user is about to
+     * create. The relation picker offered
+     *
+     *     Create “Marisol Okonkwo — 418 Calle Pu
+     *
+     * inside a 16rem box, cut mid-word, on the one control that exists to show the name
+     * being created. A fixed width cannot be right for content of unknown length, so
+     * this one grows to its content between an honest floor and an honest ceiling:
+     *
+     *   · at least the trigger's own width, and at least 20rem — the width Airtable's and
+     *     Notion's link-record pickers settle on, and wide enough that an ordinary
+     *     "name — street, town" fits on one line;
+     *   · at most 28rem, and never wider than the viewport less a 1rem gutter each side,
+     *     so it still fits a 375px phone with nothing running off the screen. The floor is
+     *     clamped by the same gutter, so on a very narrow screen the ceiling still wins.
+     *
+     * Beyond that ceiling the CONTENT truncates with an ellipsis and carries a `title`.
+     * Growing, then ellipsis — never a mid-word cut.
+     */
+    sizing?: "fixed" | "content";
 }
 declare const PopoverContent: React.ForwardRefExoticComponent<PopoverContentProps & React.RefAttributes<HTMLDivElement>>;
 

package/dist/index.js

@@ -1601,6 +1601,7 @@ var PopoverContent = React16.forwardRef(
     sideOffset = 4,
     container,
     animated = true,
+    sizing = "fixed",
     ...props
   }, ref) => {
     const portalContainer = usePortalContainer(container);
@@ -1617,7 +1618,8 @@ var PopoverContent = React16.forwardRef(
           // z, DOM portal order decides, so a dialog opened FROM a popover stacks
           // above it, and a popover opened from a dialog still stacks above the
           // dialog. z-[10001] buried dialogs behind fullscreen popovers.
-          "z-[10000] w-72 max-h-[var(--radix-popover-content-available-height)] overflow-y-auto overscroll-contain rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none",
+          "z-[10000] max-h-[var(--radix-popover-content-available-height)] overflow-y-auto overscroll-contain rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none",
+          sizing === "content" ? "w-auto min-w-[min(max(var(--radix-popover-trigger-width),20rem),calc(100vw-2rem))] max-w-[min(28rem,calc(100vw-2rem))]" : "w-72",
           animated && MOTION_POPPER,
           className
         ),
@@ -1724,7 +1726,7 @@ function CreatablePicker({
         ]
       }
     ) }),
-    /* @__PURE__ */ jsx20(PopoverContent, { align: "start", className: "w-[--radix-popover-trigger-width] min-w-56 p-0", children: /* @__PURE__ */ jsxs9(
+    /* @__PURE__ */ jsx20(PopoverContent, { sizing: "content", align: "start", className: "p-0", children: /* @__PURE__ */ jsxs9(
       Command,
       {
         filter: (itemValue, search, keywords) => {