@trading-game/design-intelligence-layer 0.17.2 → 0.17.3

package/README.md

@@ -123,8 +123,8 @@ npm install react react-dom tailwindcss
 | Field | `Field, FieldLabel, FieldDescription, FieldError, FieldGroup` |
 | Form | `Form, FormItem, FormLabel, FormControl, FormField, FormMessage` |
 | Hover Card | `HoverCard, HoverCardTrigger, HoverCardContent` |
-| Input | `Input` |
-| Input Group | `InputGroup, InputGroupAddon, InputGroupButton, InputGroupText` |
+| Input | `Input` — variants: `default` (light surfaces), `inverse` (dark sunken fill + white text, for use on `bg-primary` / brand-coloured surfaces). |
+| Input Group | `InputGroup, InputGroupAddon, InputGroupButton, InputGroupText` — variants: `default`, `inverse` (propagates to nested `InputGroupInput` / `InputGroupAddon` / `InputGroupText` via context). |
 | Input OTP | `InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator` — Variants: OTP 4 digits, OTP 6 digits, OTP 6 split, OTP 8 digits, OTP 6 separated |
 | Item | `Item, ItemMedia, ItemContent, ItemTitle, ItemDescription` |
 | Kbd | `Kbd, KbdGroup` |
@@ -193,6 +193,7 @@ See [`AGENTS.md`](./AGENTS.md#blocks) for full usage examples per block.
 <Button variant="secondary" />                // Black outline — secondary actions (light surfaces)
 <Button variant="secondary-inverse" />        // White outline + white text — secondary actions on dark/coloured surfaces
 <Button variant="tertiary" />                 // Text only — minimal (light surfaces)
+<Button variant="tertiary-inverse" />         // Text only + white text — minimal on dark/coloured surfaces
 
 // Sizes
 <Button size="lg" />      // 48px height (default)
@@ -714,6 +715,17 @@ Design tokens are managed in Figma and exported as CSS variables. To update:
 ## Changelog
 
 ### Unreleased
+- **Button — new `tertiary-inverse` variant:** mirror of `tertiary` (transparent + text-only) but recoloured for use on dark / brand-coloured surfaces — `bg-transparent text-on-primary hover:bg-on-primary/[0.10]`. Pair with any size including `icon-*` (icon-only square). Same `variant` × `size` orthogonality as every other Button variant.
+- **Input — new `variant="inverse"`:** sunken dark fill + white text recipe for use on `bg-primary` (and other coloured surfaces) where the default frosted-white fill blends into the chrome. 25 %-white border, `bg-input-inverse-surface` fill (35 % black), white text, 45 %-white placeholder, white selection. On focus the border solidifies to 100 % white with a 40 %-white ring. `variant="default"` (the existing look) is unchanged — no existing call site moves visually.
+- **InputGroup — new `variant="inverse"`:** mirrors the Input variant. A new `InputGroupVariantContext` propagates the variant down so `InputGroupInput`, `InputGroupAddon`, and `InputGroupText` all pick up the inverse styling automatically (addon icons / suffix text swap to `text-on-primary/70`). Override per-instance via `className` (e.g. `border-transparent` for the borderless wallet-address treatment).
+- **New token — `--input-inverse-surface`:** added in both `src/styles.css` and `app/globals.css` (component-token layer, references the existing primitive palette). Mapped via `@theme inline` to `--color-input-inverse-surface` so it's exposed as `bg-input-inverse-surface` to consumers. Tune the dark-fill shade once, propagates everywhere.
+- **Form-control consistency pass — radius unified to `rounded-xs` (4 px):** `Input`, `InputGroup`, and `Select` (trigger) moved from `rounded-sm` (6 px) → `rounded-xs` (4 px), matching `Button` across every size. Form controls placed in a row (`<Input>` + `<Select>` + `<Button>`) now share identical heights *and* identical corner radii.
+- **Form-control consistency pass — resting shadows removed:** `Input` and `InputGroup` dropped their `shadow-xs` resting drop-shadow so they sit flat alongside the shadowless `Select` and `Button`. Overlay shadows (Dialog, Popover, Tooltip, etc.) are untouched — only the skeuomorphic raised-surface shadow on form inputs is gone.
+- **InputGroup — addon-side padding no longer mirrors:** previously, an inline-end addon would also reduce the input's *left* padding to `pl-2` "for visual symmetry," squeezing text to the field's left edge. Now only the side an addon is attached to reduces its inset; the opposite side keeps the natural Input `pl-3` / `pr-3` (12 px). Fixes the suffix-text input ("0.00 ... USD") looking flush-left compared to the prefix-icon row.
+- **Component playground — Button section split into two columns:** the showcase Button page now renders default-surface variants on the left and `bg-primary`-surface inverse variants on the right, side-by-side, with row-by-row alignment so each (regular ↔ inverse) pair sits on the same y-line. Stacks vertically below `lg:` (1024 px) with the inverse half dropping below the default half. Inverse rows previously sat in individual `bg-primary` wrappers — now a single shared blue panel.
+- **Component playground — Input / InputGroup inverse showcases:** both sections gain a `variant="inverse"` row demonstrating the new variant on `bg-primary`. Plus a standalone `/input-on-blue` route with longer-form exploration (default vs inverse; borderless wallet-address mock; real-world sign-in row).
+- **Component playground — `/tertiary-inverse` route:** standalone page demonstrating the new Button `tertiary-inverse` variant at every `icon-*` size and labeled size on a brand-blue surface.
+- **OpenPositionsBlock — double-divider fix:** the block was rendering both its own manual `<div className="h-px ...">` between rows AND the new ItemGroup `::after` auto-divider, producing two hairlines per gap. The manual divs are removed; the ItemGroup auto-divider now handles spacing. _Migration note for consumers:_ if you wrap your own `<Item>` rows in an `<ItemGroup>` and were manually injecting dividers between them, drop the manual dividers — or pass `divider={false}` on the `<ItemGroup>` to opt out and keep your own. The same cleanup landed in the demo app's Sheet "List" showcase.
 - **Button — two new shimmer variants for headline CTAs:** `primary-shimmer` and `primary-inverse-shimmer`. Same surface tokens as their non-shimmer cousins, plus `relative overflow-hidden` to anchor an absolutely-positioned shimmer overlay. The overlay sweeps a diagonal (`110deg`) gradient driven by a new `button-shimmer` keyframe — two quick back-to-back sweeps every cycle, then a ~3 s pause off-screen, so it reads as an occasional glint rather than a continuous loader. Peak opacity is tuned per-surface (white at 32 % over brand blue; brand-blue at 22 % over white) and falls off into transparent edges. Suppressed automatically when the button is `loading` or `disabled`.
 - **Button — `button-shimmer` keyframe:** new `@keyframes button-shimmer` in both `src/styles.css` and `app/globals.css`. Pattern: `0%, 10% → 30%, 100%` translateX, with an opacity fade at the seam between the two sweeps so the reset between flashes is invisible.
 - **Badge — `fill-credit` is now a frosted glass chip:** `bg-semantic-boost-surface` was repurposed from the old peach (`#FDCA8A`) to `oklch(1 0 0 / 0.22)` — a translucent white surface that composes over whatever sits behind it. Paired with `backdrop-blur-md` and `text-on-primary` (white). Custom `!font-bold` / `!text-xs` overrides removed — the variant now only sets surface tokens, so font weight / size match every other badge (`font-semibold`, `text-xs` from the base). Border override removed too. The variant is intentionally invisible on white surfaces — designed to live on coloured surfaces (e.g. a brand-blue hero card / wallet card), matching the wallet mock's `.c-hero-wc`.

package/dist/index.cjs

@@ -541,7 +541,9 @@ var buttonVariants = (0, import_class_variance_authority.cva)(
         secondary: "bg-transparent border-[1.5px] border-border-prominent text-on-prominent hover:bg-secondary-hover",
         // Secondary Inverse — white border + white text; for use on dark/coloured surfaces
         "secondary-inverse": "bg-transparent border-[1.5px] border-primary-inverse text-on-prominent-inverse hover:bg-primary-inverse/10",
-        tertiary: "bg-transparent text-primary hover:bg-primary/[0.08]"
+        tertiary: "bg-transparent text-primary hover:bg-primary/[0.08]",
+        // Tertiary Inverse — transparent + white text/icon; for use on dark/coloured surfaces
+        "tertiary-inverse": "bg-transparent text-on-primary hover:bg-on-primary/[0.10]"
       },
       size: {
         lg: "h-12 w-fit gap-3 rounded-xs px-6 py-[14px] text-base [&_svg:not([class*='size-'])]:size-4",
@@ -1205,7 +1207,7 @@ var import_lucide_react3 = require("lucide-react");
 var import_jsx_runtime9 = require("react/jsx-runtime");
 var SURFACE_CLASSES = "w-full rounded-sm border border-primary/[0.16] bg-primary/[0.08] px-4 py-3.5";
 function IconBadge({ glyph }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "inline-flex size-10 shrink-0 items-center justify-center rounded-xs bg-primary text-on-primary", children: glyph });
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "inline-flex size-10 shrink-0 items-center justify-center rounded-full bg-primary text-on-primary", children: glyph });
 }
 function Banner(_a) {
   var _b = _a, {
@@ -2301,16 +2303,31 @@ var import_class_variance_authority5 = require("class-variance-authority");
 var import_jsx_runtime18 = require("react/jsx-runtime");
 var inputVariants = (0, import_class_variance_authority5.cva)(
   [
-    "w-full min-w-0 rounded-sm border border-border-subtle bg-white/5",
-    "text-on-prominent font-body shadow-xs transition-[color,box-shadow] outline-none",
-    "selection:bg-primary selection:text-on-primary",
-    "file:inline-flex file:border-0 file:bg-transparent file:font-medium file:text-on-prominent",
-    "placeholder:text-on-subtle",
+    "w-full min-w-0 rounded-xs border font-body transition-[color,box-shadow] outline-none",
+    "file:inline-flex file:border-0 file:bg-transparent file:font-medium",
     "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
-    "focus-visible:border-primary focus-visible:ring-[3px] focus-visible:ring-primary/[0.08]"
+    "focus-visible:ring-[3px]"
   ].join(" "),
   {
     variants: {
+      // `default` is the light-surface treatment; `inverse` is the sunken
+      // dark-fill treatment for coloured surfaces (e.g. bg-primary).
+      variant: {
+        default: [
+          "border-border-subtle bg-white/5 text-on-prominent",
+          "file:text-on-prominent",
+          "placeholder:text-on-subtle",
+          "selection:bg-primary selection:text-on-primary",
+          "focus-visible:border-primary focus-visible:ring-primary/[0.08]"
+        ].join(" "),
+        inverse: [
+          "border-on-primary/25 bg-input-inverse-surface text-on-primary",
+          "file:text-on-primary",
+          "placeholder:text-on-primary/45",
+          "selection:bg-on-primary selection:text-primary",
+          "focus-visible:border-on-primary focus-visible:ring-on-primary/40"
+        ].join(" ")
+      },
       size: {
         sm: "h-8 px-3 py-1 text-xs file:h-6 file:text-xs",
         md: "h-10 px-3 py-1 text-sm file:h-7 file:text-sm",
@@ -2318,6 +2335,7 @@ var inputVariants = (0, import_class_variance_authority5.cva)(
       }
     },
     defaultVariants: {
+      variant: "default",
       size: "md"
     }
   }
@@ -2326,10 +2344,12 @@ function Input(_a) {
   var _b = _a, {
     className,
     type,
+    variant = "default",
     size = "md"
   } = _b, props = __objRest(_b, [
     "className",
     "type",
+    "variant",
     "size"
   ]);
   return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
@@ -2337,8 +2357,9 @@ function Input(_a) {
     __spreadValues({
       type,
       "data-slot": "input",
+      "data-variant": variant,
       "data-size": size,
-      className: cn(inputVariants({ size }), className)
+      className: cn(inputVariants({ variant, size }), className)
     }, props)
   );
 }
@@ -2362,24 +2383,36 @@ function Textarea(_a) {
 // components/ui/input-group.tsx
 var import_jsx_runtime20 = require("react/jsx-runtime");
 var InputGroupSizeContext = React6.createContext("md");
+var InputGroupVariantContext = React6.createContext("default");
 var inputGroupVariants = (0, import_class_variance_authority6.cva)(
   [
-    "group/input-group relative flex w-full items-center rounded-sm border border-border-subtle bg-white/5",
-    "shadow-xs transition-[color,box-shadow] outline-none min-w-0 has-[>textarea]:h-auto",
-    // Reduce input padding on the addon side, and mirror it on the opposite side for visual symmetry.
+    "group/input-group relative flex w-full items-center rounded-xs border",
+    "transition-[color,box-shadow] outline-none min-w-0 has-[>textarea]:h-auto",
+    // Reduce input padding only on the side an addon is attached to; the
+    // opposite side keeps the natural Input padding (pl-3 / pr-3 = 12 px).
     "has-[>[data-align=inline-start]]:[&>input]:pl-2",
-    "has-[>[data-align=inline-start]]:[&>input]:pr-2",
     "has-[>[data-align=inline-end]]:[&>input]:pr-2",
-    "has-[>[data-align=inline-end]]:[&>input]:pl-2",
     "has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3",
     "has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3",
-    // Focus state.
-    "has-[[data-slot=input-group-control]:focus-visible]:border-primary has-[[data-slot=input-group-control]:focus-visible]:ring-[3px] has-[[data-slot=input-group-control]:focus-visible]:ring-primary/[0.08]",
+    // Focus ring (size; colour comes from the variant).
+    "has-[[data-slot=input-group-control]:focus-visible]:ring-[3px]",
     // Error state.
     "has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-destructive/20"
   ].join(" "),
   {
     variants: {
+      // `default` is the light-surface treatment; `inverse` is the sunken
+      // dark-fill treatment for coloured surfaces (mirrors `Input`).
+      variant: {
+        default: [
+          "border-border-subtle bg-white/5",
+          "has-[[data-slot=input-group-control]:focus-visible]:border-primary has-[[data-slot=input-group-control]:focus-visible]:ring-primary/[0.08]"
+        ].join(" "),
+        inverse: [
+          "border-on-primary/25 bg-input-inverse-surface",
+          "has-[[data-slot=input-group-control]:focus-visible]:border-on-primary has-[[data-slot=input-group-control]:focus-visible]:ring-on-primary/40"
+        ].join(" ")
+      },
       size: {
         sm: "h-8",
         md: "h-10",
@@ -2387,6 +2420,7 @@ var inputGroupVariants = (0, import_class_variance_authority6.cva)(
       }
     },
     defaultVariants: {
+      variant: "default",
       size: "md"
     }
   }
@@ -2394,24 +2428,35 @@ var inputGroupVariants = (0, import_class_variance_authority6.cva)(
 function InputGroup(_a) {
   var _b = _a, {
     className,
+    variant = "default",
     size = "md"
   } = _b, props = __objRest(_b, [
     "className",
+    "variant",
     "size"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(InputGroupSizeContext.Provider, { value: size, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-    "div",
-    __spreadValues({
-      "data-slot": "input-group",
-      "data-size": size,
-      role: "group",
-      className: cn(inputGroupVariants({ size }), className)
-    }, props)
-  ) });
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    InputGroupVariantContext.Provider,
+    {
+      value: variant,
+      children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(InputGroupSizeContext.Provider, { value: size, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        "div",
+        __spreadValues({
+          "data-slot": "input-group",
+          "data-variant": variant,
+          "data-size": size,
+          role: "group",
+          className: cn(inputGroupVariants({ variant, size }), className)
+        }, props)
+      ) })
+    }
+  );
 }
 var inputGroupAddonVariants = (0, import_class_variance_authority6.cva)(
   [
     "flex h-auto cursor-text items-center justify-center gap-2 py-1.5 font-medium text-on-subtle select-none",
+    // Swap addon text/icon colour when inside an inverse group.
+    "group-data-[variant=inverse]/input-group:text-on-primary/70",
     "group-data-[disabled=true]/input-group:opacity-50",
     "[&>kbd]:rounded-[calc(var(--radius)-5px)]",
     // Size-responsive text and icon sizing.
@@ -2506,6 +2551,8 @@ function InputGroupText(_a) {
     __spreadValues({
       className: cn(
         "flex items-center gap-2 text-on-subtle",
+        // Swap text/icon colour when inside an inverse group.
+        "group-data-[variant=inverse]/input-group:text-on-primary/70",
         "group-data-[size=sm]/input-group:text-xs group-data-[size=sm]/input-group:[&_svg:not([class*='size-'])]:size-3.5",
         "group-data-[size=md]/input-group:text-sm group-data-[size=md]/input-group:[&_svg:not([class*='size-'])]:size-4",
         "group-data-[size=lg]/input-group:text-sm group-data-[size=lg]/input-group:[&_svg:not([class*='size-'])]:size-4",
@@ -2518,18 +2565,23 @@ function InputGroupText(_a) {
 function InputGroupInput(_a) {
   var _b = _a, {
     className,
-    size: sizeProp
+    size: sizeProp,
+    variant: variantProp
   } = _b, props = __objRest(_b, [
     "className",
-    "size"
+    "size",
+    "variant"
   ]);
   const groupSize = React6.useContext(InputGroupSizeContext);
+  const groupVariant = React6.useContext(InputGroupVariantContext);
   const size = sizeProp != null ? sizeProp : groupSize;
+  const variant = variantProp != null ? variantProp : groupVariant;
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     Input,
     __spreadValues({
       "data-slot": "input-group-control",
       size,
+      variant,
       className: cn(
         "h-full flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0",
         className
@@ -4434,8 +4486,8 @@ var itemMediaVariants = (0, import_class_variance_authority9.cva)(
     variants: {
       variant: {
         default: "bg-transparent",
-        icon: "size-8 rounded-sm border bg-subtle [&_svg:not([class*='size-'])]:size-4",
-        image: "size-10 overflow-hidden rounded-sm [&_img]:size-full [&_img]:object-cover"
+        icon: "size-8 rounded-full border bg-subtle [&_svg:not([class*='size-'])]:size-4",
+        image: "size-10 overflow-hidden rounded-full [&_img]:size-full [&_img]:object-cover"
       }
     },
     defaultVariants: {
@@ -5528,7 +5580,7 @@ function SelectTrigger(_a) {
       "data-readonly": readOnly ? "" : void 0,
       disabled: readOnly || props.disabled,
       className: cn(
-        "flex w-fit items-center justify-between gap-2 rounded-sm border border-input bg-prominent appearance-none whitespace-nowrap transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[placeholder]:text-on-subtle data-[size=sm]:h-8 data-[size=sm]:px-3 data-[size=sm]:py-1 data-[size=sm]:text-xs data-[size=md]:h-10 data-[size=md]:px-3 data-[size=md]:py-1 data-[size=md]:text-sm data-[size=lg]:h-12 data-[size=lg]:px-4 data-[size=lg]:py-2 data-[size=lg]:text-base *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-on-subtle data-[readonly]:cursor-default data-[readonly]:opacity-100",
+        "flex w-fit items-center justify-between gap-2 rounded-xs border border-input bg-prominent appearance-none whitespace-nowrap transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[placeholder]:text-on-subtle data-[size=sm]:h-8 data-[size=sm]:px-3 data-[size=sm]:py-1 data-[size=sm]:text-xs data-[size=md]:h-10 data-[size=md]:px-3 data-[size=md]:py-1 data-[size=md]:text-sm data-[size=lg]:h-12 data-[size=lg]:px-4 data-[size=lg]:py-2 data-[size=lg]:text-base *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-on-subtle data-[readonly]:cursor-default data-[readonly]:opacity-100",
         className
       )
     }, props), {
@@ -7839,7 +7891,6 @@ function NavBarBlock({ brand, links, signIn, signUp }) {
 }
 
 // components/blocks/open-positions-block.tsx
-var React18 = __toESM(require("react"), 1);
 var import_lucide_react30 = require("lucide-react");
 var import_jsx_runtime68 = require("react/jsx-runtime");
 function OpenPositionsBlock({
@@ -7881,10 +7932,7 @@ function PositionsList({
   onViewHistory
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: "flex flex-col flex-1 min-h-0", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(ItemGroup, { className: "min-h-0 overflow-y-auto", children: positions.map((pos, i) => /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(React18.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(PositionRow, { position: pos }),
-      i < positions.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "h-px mx-4 bg-border-subtle" })
-    ] }, i)) }),
+    /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(ItemGroup, { className: "min-h-0 overflow-y-auto", children: positions.map((pos, i) => /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(PositionRow, { position: pos }, i)) }),
     /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(Separator, {}),
     /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "shrink-0 flex justify-center py-4", children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(Button, { variant: "tertiary", size: "md", onClick: onViewHistory, children: "View trade history" }) })
   ] });