@nebutra/ui 0.2.2 → 0.2.3

package/dist/components/index.js

@@ -17,6 +17,7 @@ import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
 import { Tooltip as Tooltip$1 } from '@base-ui/react/tooltip';
 import { useAsciiText, slant } from 'react-ascii-text';
+import { Popover as Popover$1 } from '@base-ui/react/popover';
 import { ReactFlowProvider, ReactFlow, Background, Controls, Panel, Handle, Position } from '@xyflow/react';
 import '@xyflow/react/dist/style.css';
 import { wouldCreateCycle } from '@nebutra/graph-model';
@@ -298,13 +299,15 @@ var primitiveFontSize = {
 // src/tokens/shadows.ts
 var shadowClasses = {
   md: "shadow-md",
+  xl: "shadow-xl",
   "2xl": "shadow-2xl"};
 
 // src/tokens/components/overlay.ts
-var overlayFocusRingClassName = "outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2";
+var overlayFocusRingClassName = "outline-none";
 var overlayZIndex = {
   backdrop: 1040,
   modal: 1050,
+  popover: 1060,
   tooltip: 1070
 };
 var overlayClassNames = {
@@ -319,6 +322,13 @@ var overlayClassNames = {
     "data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:scale-95 data-ending-style:opacity-0",
     "motion-reduce:transition-none motion-reduce:data-starting-style:transform-none motion-reduce:data-ending-style:transform-none"
   ].join(" "),
+  popoverSurface: [
+    "w-72 rounded-[var(--radius-lg)] border border-border/70 bg-popover/95 p-4 text-popover-foreground backdrop-blur-md",
+    shadowClasses.xl,
+    "outline-none transition-[opacity,transform,display] duration-[var(--motion-duration-flow)] ease-[var(--ease-out)]",
+    "data-[open]:opacity-100 data-[closed]:opacity-0 data-[closed]:scale-95 data-[open]:scale-100",
+    "motion-reduce:transition-none motion-reduce:data-[closed]:transform-none motion-reduce:data-[open]:transform-none"
+  ].join(" "),
   tooltipSurface: [
     "overflow-hidden rounded-[var(--radius-md)] border border-border/70 bg-popover/95 px-3 py-1.5 text-sm text-popover-foreground backdrop-blur-md",
     shadowClasses.md,
@@ -332,7 +342,8 @@ function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
 var overlayPrimitiveClassNames = {
-  modalSurface: "rounded-[var(--radius-md)] border-border/70 bg-popover/95 text-popover-foreground shadow-xl"};
+  modalSurface: "rounded-[var(--radius-md)] border-border/70 bg-popover/95 text-popover-foreground shadow-xl",
+  popoverSurface: "rounded-[var(--radius-md)] border-border/70 bg-popover/95 shadow-md"};
 var Dialog = Dialog$1.Root;
 var DialogPortal = Dialog$1.Portal;
 var DialogTrigger = ({
@@ -550,7 +561,6 @@ var buttonVariants = cva(
     "rounded-[var(--btn-default-radius,var(--radius-md))]",
     "text-[length:var(--control-font-size-md,0.875rem)] font-[number:var(--font-weight-medium,500)]",
     "transition-colors duration-micro ease-out",
-    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
     "disabled:pointer-events-none disabled:opacity-50",
     "aria-busy:cursor-wait"
   ].join(" "),
@@ -577,8 +587,30 @@ var buttonVariants = cva(
       },
       shape: {
         default: "",
-        square: "",
-        circle: ""
+        // Radius from --btn-default-radius / --radius-md — brand-switchable.
+        // Do not hardcode rounded-md here; a language must be able to retarget
+        // the corner treatment of every icon trigger at once.
+        square: "rounded-[var(--btn-default-radius,var(--radius-md))]",
+        // Pill radius token, not Tailwind rounded-full — same 9999px default,
+        // but a brand that ships a softer "circle" can override --radius-pill.
+        circle: "rounded-[var(--radius-pill,9999px)]",
+        pill: "rounded-[var(--radius-pill,9999px)]"
+      },
+      // Icon-only box size — orthogonal to `size` (which tunes text-button
+      // height/padding/font together) and to `shape` (which picks the
+      // corner treatment). Only takes effect combined with shape="square"
+      // or shape="circle" (see compoundVariants below); every other
+      // combination ignores it. 28/32/36 cover the icon-trigger sizes that
+      // actually occur in the app — 24/40/48 are already reachable via
+      // shape + size (tiny/default/lg). Heights read --control-height-icon-*
+      // so density-aware Brand Packages can scale them with the ladder.
+      iconSize: {
+        sm: "",
+        // 28px default
+        md: "",
+        // 32px default
+        lg: ""
+        // 36px default
       }
     },
     compoundVariants: [
@@ -589,22 +621,56 @@ var buttonVariants = cva(
       {
         shape: "circle",
         size: "tiny",
-        className: "w-[var(--control-height-tiny,1.5rem)] px-0 rounded-full"
+        className: "w-[var(--control-height-tiny,1.5rem)] px-0"
       },
       {
         shape: "circle",
         size: "sm",
-        className: "w-[var(--control-height-sm,2rem)] px-0 rounded-full"
+        className: "w-[var(--control-height-sm,2rem)] px-0"
       },
       {
         shape: "circle",
         size: "default",
-        className: "w-[var(--control-height-md,2.5rem)] px-0 rounded-full"
+        className: "w-[var(--control-height-md,2.5rem)] px-0"
       },
       {
         shape: "circle",
         size: "lg",
-        className: "w-[var(--control-height-lg,3rem)] px-0 rounded-full"
+        className: "w-[var(--control-height-lg,3rem)] px-0"
+      },
+      // iconSize wins over the size-driven box above — matched on shape +
+      // iconSize only, so it applies regardless of whatever `size` was
+      // passed (or left at its "default" fallback). Corner treatment stays
+      // on the shape variant (token-backed); only the box is set here.
+      {
+        shape: "square",
+        iconSize: "sm",
+        className: "h-[var(--control-height-icon-sm,1.75rem)] w-[var(--control-height-icon-sm,1.75rem)] px-0"
+      },
+      {
+        shape: "square",
+        iconSize: "md",
+        className: "h-[var(--control-height-icon-md,2rem)] w-[var(--control-height-icon-md,2rem)] px-0"
+      },
+      {
+        shape: "square",
+        iconSize: "lg",
+        className: "h-[var(--control-height-icon-lg,2.25rem)] w-[var(--control-height-icon-lg,2.25rem)] px-0"
+      },
+      {
+        shape: "circle",
+        iconSize: "sm",
+        className: "h-[var(--control-height-icon-sm,1.75rem)] w-[var(--control-height-icon-sm,1.75rem)] px-0"
+      },
+      {
+        shape: "circle",
+        iconSize: "md",
+        className: "h-[var(--control-height-icon-md,2rem)] w-[var(--control-height-icon-md,2rem)] px-0"
+      },
+      {
+        shape: "circle",
+        iconSize: "lg",
+        className: "h-[var(--control-height-icon-lg,2.25rem)] w-[var(--control-height-icon-lg,2.25rem)] px-0"
       }
     ],
     defaultVariants: {
@@ -626,7 +692,10 @@ function Spinner({ className }) {
     }
   );
 }
-function getIconSizeClass(size) {
+function getIconSizeClass(size, iconSize) {
+  if (iconSize === "sm") return "[&>svg]:size-3.5";
+  if (iconSize === "md") return "[&>svg]:size-3.5";
+  if (iconSize === "lg") return "[&>svg]:size-4";
   switch (size) {
     case "tiny":
       return "[&>svg]:size-3";
@@ -641,7 +710,10 @@ function getIconSizeClass(size) {
       return "[&>svg]:size-4";
   }
 }
-function getSpinnerSizeClass(size) {
+function getSpinnerSizeClass(size, iconSize) {
+  if (iconSize === "sm") return "size-3.5";
+  if (iconSize === "md") return "size-3.5";
+  if (iconSize === "lg") return "size-4";
   switch (size) {
     case "tiny":
       return "size-3";
@@ -666,10 +738,10 @@ function resolveShadowClass(shadow) {
   const level = shadow === true ? "md" : shadow;
   return SHADOW_CLASSES[level];
 }
-function ButtonContent({ loading, prefix, suffix, size, children }) {
-  const iconSizeClass = getIconSizeClass(size);
+function ButtonContent({ loading, prefix, suffix, size, iconSize, children }) {
+  const iconSizeClass = getIconSizeClass(size, iconSize);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    loading && /* @__PURE__ */ jsx(Spinner, { className: getSpinnerSizeClass(size) }),
+    loading && /* @__PURE__ */ jsx(Spinner, { className: getSpinnerSizeClass(size, iconSize) }),
     prefix != null && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: cn("shrink-0", iconSizeClass), children: prefix }),
     children,
     suffix != null && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: cn("shrink-0", iconSizeClass), children: suffix })
@@ -680,6 +752,7 @@ var Button = ({
   variant,
   size,
   shape,
+  iconSize,
   asChild = false,
   loading = false,
   disabled,
@@ -697,11 +770,21 @@ var Button = ({
     Comp,
     {
       ref,
-      className: cn(buttonVariants({ variant, size, shape }), shadowClass, className),
+      className: cn(buttonVariants({ variant, size, shape, iconSize }), shadowClass, className),
       disabled: isDisabled,
       "aria-busy": loading || void 0,
       ...props,
-      children: asChild ? children : /* @__PURE__ */ jsx(ButtonContent, { loading, prefix, suffix, size, children })
+      children: asChild ? children : /* @__PURE__ */ jsx(
+        ButtonContent,
+        {
+          loading,
+          prefix,
+          suffix,
+          size,
+          iconSize,
+          children
+        }
+      )
     }
   );
 };
@@ -736,6 +819,12 @@ var textareaTokens = {
   focusRingWidth: 3,
   fieldGap: primitiveSpacing[2] - primitiveSpacing[1] / 2};
 
+// src/utils/primitive-props.ts
+function asPlainStyle(style) {
+  if (style == null || typeof style === "function") return {};
+  return style;
+}
+
 // src/primitives/form-control.ts
 var formControlFocusClassNames = {
   input: "outline-none focus:border-ring focus:ring-[length:var(--input-focus-ring-width)] focus:ring-ring/30",
@@ -756,7 +845,7 @@ function getTextareaStyle(size, style) {
     "--textarea-focus-ring-width": `${textareaTokens.focusRingWidth}px`,
     borderRadius: "var(--textarea-radius)",
     outline: "none",
-    ...style
+    ...asPlainStyle(style)
   };
 }
 function getTextareaFieldStyle() {
@@ -1040,7 +1129,7 @@ var PromptInputTextarea = ({ className, onKeyDown, disableAutosize = false, plac
       onKeyDown: handleKeyDown,
       rows: 1,
       style: { "--textarea-min-height": "2rem", ...style },
-      className: cn("resize-none border-0 shadow-none focus-visible:ring-0", className),
+      className: cn("resize-none border-0 shadow-none", className),
       disabled,
       placeholder,
       ...props
@@ -1240,7 +1329,7 @@ function PromptSubmitAction({
           variant: "default",
           size: "icon",
           className: cn(
-            "h-8 w-8 rounded-full transition-[background-color,border-color,box-shadow,color,opacity,transform] duration-200",
+            "h-8 w-8 rounded-full transition-[background-color,border-color,box-shadow,color,opacity,transform] duration-micro",
             isRecording ? "bg-transparent hover:bg-accent text-destructive hover:text-destructive/80" : hasContent ? "bg-primary hover:bg-primary/90 text-primary-foreground" : "bg-transparent hover:bg-accent text-muted-foreground hover:text-foreground"
           ),
           onClick: onActivate,
@@ -1599,6 +1688,93 @@ function AsciiText({ text, className = "", font = slant }) {
     }
   );
 }
+function Popover({ ...props }) {
+  return /* @__PURE__ */ jsx(Popover$1.Root, { "data-slot": "popover", ...props });
+}
+function PopoverTrigger({ asChild, children, render, ...props }) {
+  const renderElement = asChild && React5.isValidElement(children) ? children : render;
+  return /* @__PURE__ */ jsx(
+    Popover$1.Trigger,
+    {
+      "data-slot": "popover-trigger",
+      render: renderElement,
+      ...renderElement ? props : { ...props, children }
+    }
+  );
+}
+function PopoverContent({
+  className,
+  align = "center",
+  sideOffset = 8,
+  alignOffset = 0,
+  side = "bottom",
+  children,
+  showArrow = false,
+  style,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(Popover$1.Portal, { children: /* @__PURE__ */ jsx(
+    Popover$1.Positioner,
+    {
+      "data-slot": "popover-positioner",
+      sideOffset,
+      align,
+      alignOffset,
+      side,
+      children: /* @__PURE__ */ jsxs(
+        Popover$1.Popup,
+        {
+          "data-slot": "popover-content",
+          className: cn(
+            overlayClassNames.popoverSurface,
+            overlayPrimitiveClassNames.popoverSurface,
+            className
+          ),
+          style: { zIndex: overlayZIndex.popover, ...style },
+          ...props,
+          children: [
+            children,
+            showArrow && /* @__PURE__ */ jsx(PopoverArrow, {})
+          ]
+        }
+      )
+    }
+  ) });
+}
+function PopoverArrow({
+  className,
+  style,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Popover$1.Arrow,
+    {
+      "data-slot": "popover-arrow",
+      className: cn(
+        "data-[side=bottom]:top-[-8px] data-[side=left]:right-[-13px] data-[side=left]:rotate-90 data-[side=right]:left-[-13px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-8px] data-[side=top]:rotate-180",
+        className
+      ),
+      style: { zIndex: overlayZIndex.popover, ...style },
+      ...props,
+      children: /* @__PURE__ */ jsxs("svg", { "aria-hidden": "true", width: "20", height: "10", viewBox: "0 0 20 10", fill: "none", children: [
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V9H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z",
+            className: "fill-popover"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z",
+            className: "fill-border"
+          }
+        )
+      ] })
+    }
+  );
+}
 var TAG_COLOR_MAP = {
   feature: "bg-[hsl(var(--primary))] text-white",
   fix: "bg-[var(--status-success)] text-white",
@@ -1623,93 +1799,81 @@ function ChangelogWidget({
 }) {
   const [isOpen, setIsOpen] = React5.useState(false);
   const [lastSeenVersion, setLastSeenVersion] = React5.useState(null);
-  const dropdownRef = React5.useRef(null);
   const unreadCount = getUnreadCount(entries, lastSeenVersion);
   const recentEntries = entries.slice(0, 5);
   const latestVersion = recentEntries[0]?.version ?? null;
-  const closeAndMarkSeen = () => {
-    setIsOpen(false);
-    if (latestVersion) setLastSeenVersion(latestVersion);
+  const handleOpenChange = (open) => {
+    setIsOpen(open);
+    if (!open && latestVersion) setLastSeenVersion(latestVersion);
   };
-  const closeFromDocumentEvent = useEffectEvent(() => {
-    closeAndMarkSeen();
-  });
-  React5.useEffect(() => {
-    if (!isOpen) return;
-    const handleEscape = (e) => {
-      if (e.key === "Escape") closeFromDocumentEvent();
-    };
-    const handleClickOutside = (e) => {
-      if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
-        closeFromDocumentEvent();
-      }
-    };
-    document.addEventListener("keydown", handleEscape);
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => {
-      document.removeEventListener("keydown", handleEscape);
-      document.removeEventListener("mousedown", handleClickOutside);
-    };
-  }, [isOpen]);
-  return /* @__PURE__ */ jsxs("div", { className: cn("relative", className), ref: dropdownRef, children: [
+  return /* @__PURE__ */ jsxs(Popover, { open: isOpen, onOpenChange: handleOpenChange, children: [
     /* @__PURE__ */ jsxs(
-      "button",
+      PopoverTrigger,
       {
-        type: "button",
         "aria-label": "View changelog",
-        "aria-expanded": isOpen,
-        onClick: () => setIsOpen((open) => !open),
-        className: "relative inline-flex items-center justify-center rounded-[var(--radius-lg)] p-2 transition-colors hover:bg-muted",
+        className: cn(
+          "relative inline-flex items-center justify-center rounded-[var(--radius-lg)] p-2 transition-colors hover:bg-muted",
+          className
+        ),
         children: [
           /* @__PURE__ */ jsx(Bell, { className: "h-5 w-5 text-muted-foreground" }),
           unreadCount > 0 && /* @__PURE__ */ jsx("span", { className: "absolute right-0 top-0 flex h-5 w-5 items-center justify-center rounded-full bg-[var(--status-danger)] text-xs font-bold text-white", children: unreadCount > 9 ? "9+" : unreadCount })
         ]
       }
     ),
-    isOpen && /* @__PURE__ */ jsxs("div", { className: "absolute right-0 top-full z-50 mt-2 w-80 overflow-hidden rounded-[var(--radius-lg)] border border-border bg-white shadow-lg transition-[background-color,border-color,box-shadow,color,opacity,transform] duration-200", children: [
-      /* @__PURE__ */ jsx("div", { className: "bg-gradient-to-r from-[var(--blue-3)] to-[var(--cyan-3)] px-4 py-3", children: /* @__PURE__ */ jsx("h3", { className: "font-semibold text-foreground", children: "What's New" }) }),
-      /* @__PURE__ */ jsx("div", { className: "max-h-96 overflow-y-auto", children: recentEntries.length === 0 ? /* @__PURE__ */ jsx("div", { className: "px-4 py-6 text-center text-sm text-muted-foreground", children: "No updates available" }) : recentEntries.map((entry) => /* @__PURE__ */ jsxs(
-        "a",
-        {
-          href: entry.url,
-          className: "block border-b border-border px-4 py-3 transition-colors hover:bg-muted",
-          children: [
-            /* @__PURE__ */ jsx("div", { className: "mb-2 flex items-center justify-between gap-2", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ jsxs("span", { className: "font-mono text-xs font-bold text-primary", children: [
-                "v",
-                entry.version
-              ] }),
-              entry.tag && /* @__PURE__ */ jsx(
-                "span",
-                {
-                  className: cn(
-                    "rounded px-2 py-0.5 text-xs font-medium",
-                    getTagColor(entry.tag)
-                  ),
-                  children: entry.tag
-                }
-              )
-            ] }) }),
-            /* @__PURE__ */ jsx("p", { className: "mb-1 text-sm font-medium text-foreground", children: entry.title }),
-            /* @__PURE__ */ jsx("p", { className: "mb-2 line-clamp-2 text-xs text-muted-foreground", children: entry.excerpt }),
-            /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: entry.date })
-          ]
-        },
-        entry.version
-      )) }),
-      /* @__PURE__ */ jsxs(
-        "a",
-        {
-          href: changelogUrl,
-          onClick: closeAndMarkSeen,
-          className: "flex items-center justify-between border-t border-border bg-background px-4 py-3 text-sm font-medium text-primary transition-colors hover:bg-muted",
-          children: [
-            /* @__PURE__ */ jsx("span", { children: "View all updates" }),
-            /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" })
-          ]
-        }
-      )
-    ] })
+    /* @__PURE__ */ jsxs(
+      PopoverContent,
+      {
+        align: "end",
+        side: "bottom",
+        sideOffset: 8,
+        className: "w-80 overflow-hidden rounded-[var(--radius-lg)] border-border bg-white p-0 shadow-lg",
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "bg-gradient-to-r from-[var(--blue-3)] to-[var(--cyan-3)] px-4 py-3", children: /* @__PURE__ */ jsx("h3", { className: "font-semibold text-foreground", children: "What's New" }) }),
+          /* @__PURE__ */ jsx("div", { className: "max-h-96 overflow-y-auto", children: recentEntries.length === 0 ? /* @__PURE__ */ jsx("div", { className: "px-4 py-6 text-center text-sm text-muted-foreground", children: "No updates available" }) : recentEntries.map((entry) => /* @__PURE__ */ jsxs(
+            "a",
+            {
+              href: entry.url,
+              className: "block border-b border-border px-4 py-3 transition-colors hover:bg-muted",
+              children: [
+                /* @__PURE__ */ jsx("div", { className: "mb-2 flex items-center justify-between gap-2", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsxs("span", { className: "font-mono text-xs font-bold text-primary", children: [
+                    "v",
+                    entry.version
+                  ] }),
+                  entry.tag && /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: cn(
+                        "rounded px-2 py-0.5 text-xs font-medium",
+                        getTagColor(entry.tag)
+                      ),
+                      children: entry.tag
+                    }
+                  )
+                ] }) }),
+                /* @__PURE__ */ jsx("p", { className: "mb-1 text-sm font-medium text-foreground", children: entry.title }),
+                /* @__PURE__ */ jsx("p", { className: "mb-2 line-clamp-2 text-xs text-muted-foreground", children: entry.excerpt }),
+                /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: entry.date })
+              ]
+            },
+            entry.version
+          )) }),
+          /* @__PURE__ */ jsxs(
+            "a",
+            {
+              href: changelogUrl,
+              onClick: () => handleOpenChange(false),
+              className: "flex items-center justify-between border-t border-border bg-background px-4 py-3 text-sm font-medium text-primary transition-colors hover:bg-muted",
+              children: [
+                /* @__PURE__ */ jsx("span", { children: "View all updates" }),
+                /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" })
+              ]
+            }
+          )
+        ]
+      }
+    )
   ] });
 }
 var GRAPH_NODE_FLOW_TYPE = "graph-node";
@@ -1997,7 +2161,7 @@ function OnboardingChecklist({
                 "a",
                 {
                   href: item.helperLink.href,
-                  className: "text-primary underline-offset-4 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded-[var(--radius-sm)]",
+                  className: "text-primary underline-offset-4 hover:underline rounded-[var(--radius-sm)]",
                   children: item.helperLink.text
                 }
               )
@@ -2014,7 +2178,8 @@ function OnboardingChecklist({
                 "button",
                 {
                   type: "button",
-                  className: "w-full h-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded-[var(--radius-lg)]",
+                  "aria-label": "Play the video guide",
+                  className: "w-full h-full rounded-[var(--radius-lg)]",
                   children: [
                     /* @__PURE__ */ jsx(
                       Image,
@@ -2181,11 +2346,11 @@ var Kbd = ({
 Kbd.displayName = "Kbd";
 var inputVariants = cva(
   [
-    "flex h-[var(--input-height)] w-full rounded-[var(--input-radius)] border border-input bg-background",
-    "px-[var(--input-padding-x)] text-[length:var(--input-font-size)] text-foreground shadow-xs",
+    "flex h-[var(--input-height)] w-full rounded-[var(--input-radius)]",
+    "px-[var(--input-padding-x)] text-[length:var(--input-font-size)] text-foreground",
     "transition-[background-color,border-color,box-shadow,color] duration-micro ease-out",
     "placeholder:text-muted-foreground",
-    formControlFocusClassNames.input,
+    "outline-none",
     "disabled:cursor-not-allowed disabled:opacity-50",
     "read-only:bg-muted/70 read-only:cursor-default",
     "file:h-full file:border-0 file:border-e file:border-solid file:border-input file:bg-transparent",
@@ -2208,11 +2373,31 @@ var inputVariants = cva(
         prefix: "pl-[var(--input-padding-left)]",
         suffix: "pr-[var(--input-padding-right)]",
         both: "pl-[var(--input-padding-left)] pr-[var(--input-padding-right)]"
+      },
+      /**
+       * `bare` drops the field's own stroke, fill and lift so it can sit inside
+       * a container that already provides them — a footer subscribe group, a
+       * search well, a segmented composer. Those surfaces were each being built
+       * by hand with a raw <input>, because overriding the bordered look from
+       * outside is not reliable: `border-transparent` passed via className and
+       * `border-input` from the base are both border-color utilities, so which
+       * one wins depends on their order in the generated stylesheet rather than
+       * on the order they were written. That is why the stroke, fill and shadow
+       * live in this variant instead of the base — the two tones now never emit
+       * a competing declaration.
+       *
+       * A bare field draws no focus ring of its own. The container owns it, so
+       * the ring surrounds the whole group rather than a box inside it.
+       */
+      tone: {
+        bordered: `border border-input bg-background shadow-xs ${formControlFocusClassNames.input}`,
+        bare: "border-0 bg-transparent shadow-none"
       }
     },
     defaultVariants: {
       size: "md",
-      affix: "none"
+      affix: "none",
+      tone: "bordered"
     }
   }
 );
@@ -2235,7 +2420,7 @@ var inputControlButtonVariants = cva(
     "absolute right-[var(--input-control-inset)] top-1/2 flex size-[var(--input-control-size)] -translate-y-1/2 items-center justify-center",
     "rounded-[var(--radius-sm)] text-muted-foreground transition-colors duration-micro ease-out",
     "hover:bg-accent hover:text-foreground",
-    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1",
+    "focus-visible:outline-none",
     "disabled:pointer-events-none disabled:opacity-50",
     "[&_svg]:size-[var(--input-control-icon-size)]"
   ].join(" ")
@@ -2274,7 +2459,7 @@ function getInputStyle(size, style) {
     "--input-focus-ring-width": `${inputTokens.focusRingWidth}px`,
     borderRadius: "var(--input-radius)",
     outline: "none",
-    ...style
+    ...asPlainStyle(style)
   };
 }
 function getAffixMode(prefix, hasRightAdornment) {
@@ -2300,6 +2485,7 @@ var Input = ({
     className,
     type = "text",
     size = "md",
+    tone = "bordered",
     prefix,
     suffix,
     clearable,
@@ -2419,7 +2605,7 @@ var Input = ({
       "aria-describedby": describedBy,
       "aria-busy": loading || void 0,
       className: cn(
-        inputVariants({ size, affix }),
+        inputVariants({ size, affix, tone }),
         type === "file" && "p-0 pr-[var(--input-padding-x)] text-muted-foreground",
         className
       ),
@@ -2585,7 +2771,7 @@ function TeamChat({
     "div",
     {
       className: cn(
-        "w-full max-w-5xl mx-auto p-6 bg-white dark:bg-black rounded-[var(--radius-3xl)] shadow-lg flex flex-col h-[550px] border border-border",
+        "w-full max-w-[var(--container-content)] mx-auto p-6 bg-white dark:bg-black rounded-[var(--radius-3xl)] shadow-lg flex flex-col h-[550px] border border-border",
         className
       ),
       children: [