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

package/dist/index.d.cts

@@ -62,7 +62,7 @@ interface AlertProps extends Omit<React$1.ComponentProps<"div">, "title">, Varia
 declare function Alert({ variant, layout, title, description, icon, action, actions, onDismiss, dismissLabel, className, ...props }: AlertProps): react_jsx_runtime.JSX.Element | null;
 
 declare const buttonVariants: (props?: ({
-    variant?: "primary" | "primary-inverse" | "primary-shimmer" | "primary-inverse-shimmer" | "secondary" | "secondary-inverse" | "tertiary" | null | undefined;
+    variant?: "primary" | "primary-inverse" | "primary-shimmer" | "primary-inverse-shimmer" | "secondary" | "secondary-inverse" | "tertiary" | "tertiary-inverse" | null | undefined;
     size?: "lg" | "md" | "sm" | "xs" | "icon" | "icon-lg" | "icon-md" | "icon-sm" | "icon-xs" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare function Button({ className, variant, size, asChild, loading, children, ...props }: React$1.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
@@ -420,15 +420,18 @@ declare function HoverCardTrigger({ ...props }: React$1.ComponentProps<typeof Ho
 declare function HoverCardContent({ className, align, sideOffset, ...props }: React$1.ComponentProps<typeof HoverCard$1.Content>): react_jsx_runtime.JSX.Element;
 
 declare const inputVariants: (props?: ({
+    variant?: "default" | "inverse" | null | undefined;
     size?: "lg" | "md" | "sm" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
-declare function Input({ className, type, size, ...props }: Omit<React$1.ComponentProps<"input">, "size"> & VariantProps<typeof inputVariants>): react_jsx_runtime.JSX.Element;
+declare function Input({ className, type, variant, size, ...props }: Omit<React$1.ComponentProps<"input">, "size"> & VariantProps<typeof inputVariants>): react_jsx_runtime.JSX.Element;
 
 type InputGroupSize = "sm" | "md" | "lg";
+type InputGroupVariant = "default" | "inverse";
 declare const inputGroupVariants: (props?: ({
+    variant?: "default" | "inverse" | null | undefined;
     size?: "lg" | "md" | "sm" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
-declare function InputGroup({ className, size, ...props }: React$1.ComponentProps<"div"> & VariantProps<typeof inputGroupVariants>): react_jsx_runtime.JSX.Element;
+declare function InputGroup({ className, variant, size, ...props }: React$1.ComponentProps<"div"> & VariantProps<typeof inputGroupVariants>): react_jsx_runtime.JSX.Element;
 declare const inputGroupAddonVariants: (props?: ({
     align?: "inline-start" | "inline-end" | "block-start" | "block-end" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
@@ -438,8 +441,9 @@ declare const inputGroupButtonVariants: (props?: ({
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare function InputGroupButton({ className, type, variant, size, ...props }: Omit<React$1.ComponentProps<typeof Button>, "size"> & VariantProps<typeof inputGroupButtonVariants>): react_jsx_runtime.JSX.Element;
 declare function InputGroupText({ className, ...props }: React$1.ComponentProps<"span">): react_jsx_runtime.JSX.Element;
-declare function InputGroupInput({ className, size: sizeProp, ...props }: Omit<React$1.ComponentProps<"input">, "size"> & {
+declare function InputGroupInput({ className, size: sizeProp, variant: variantProp, ...props }: Omit<React$1.ComponentProps<"input">, "size"> & {
     size?: InputGroupSize;
+    variant?: InputGroupVariant;
 }): react_jsx_runtime.JSX.Element;
 declare function InputGroupTextarea({ className, ...props }: React$1.ComponentProps<"textarea">): react_jsx_runtime.JSX.Element;
 

package/dist/index.d.ts

@@ -62,7 +62,7 @@ interface AlertProps extends Omit<React$1.ComponentProps<"div">, "title">, Varia
 declare function Alert({ variant, layout, title, description, icon, action, actions, onDismiss, dismissLabel, className, ...props }: AlertProps): react_jsx_runtime.JSX.Element | null;
 
 declare const buttonVariants: (props?: ({
-    variant?: "primary" | "primary-inverse" | "primary-shimmer" | "primary-inverse-shimmer" | "secondary" | "secondary-inverse" | "tertiary" | null | undefined;
+    variant?: "primary" | "primary-inverse" | "primary-shimmer" | "primary-inverse-shimmer" | "secondary" | "secondary-inverse" | "tertiary" | "tertiary-inverse" | null | undefined;
     size?: "lg" | "md" | "sm" | "xs" | "icon" | "icon-lg" | "icon-md" | "icon-sm" | "icon-xs" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare function Button({ className, variant, size, asChild, loading, children, ...props }: React$1.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
@@ -420,15 +420,18 @@ declare function HoverCardTrigger({ ...props }: React$1.ComponentProps<typeof Ho
 declare function HoverCardContent({ className, align, sideOffset, ...props }: React$1.ComponentProps<typeof HoverCard$1.Content>): react_jsx_runtime.JSX.Element;
 
 declare const inputVariants: (props?: ({
+    variant?: "default" | "inverse" | null | undefined;
     size?: "lg" | "md" | "sm" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
-declare function Input({ className, type, size, ...props }: Omit<React$1.ComponentProps<"input">, "size"> & VariantProps<typeof inputVariants>): react_jsx_runtime.JSX.Element;
+declare function Input({ className, type, variant, size, ...props }: Omit<React$1.ComponentProps<"input">, "size"> & VariantProps<typeof inputVariants>): react_jsx_runtime.JSX.Element;
 
 type InputGroupSize = "sm" | "md" | "lg";
+type InputGroupVariant = "default" | "inverse";
 declare const inputGroupVariants: (props?: ({
+    variant?: "default" | "inverse" | null | undefined;
     size?: "lg" | "md" | "sm" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
-declare function InputGroup({ className, size, ...props }: React$1.ComponentProps<"div"> & VariantProps<typeof inputGroupVariants>): react_jsx_runtime.JSX.Element;
+declare function InputGroup({ className, variant, size, ...props }: React$1.ComponentProps<"div"> & VariantProps<typeof inputGroupVariants>): react_jsx_runtime.JSX.Element;
 declare const inputGroupAddonVariants: (props?: ({
     align?: "inline-start" | "inline-end" | "block-start" | "block-end" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
@@ -438,8 +441,9 @@ declare const inputGroupButtonVariants: (props?: ({
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare function InputGroupButton({ className, type, variant, size, ...props }: Omit<React$1.ComponentProps<typeof Button>, "size"> & VariantProps<typeof inputGroupButtonVariants>): react_jsx_runtime.JSX.Element;
 declare function InputGroupText({ className, ...props }: React$1.ComponentProps<"span">): react_jsx_runtime.JSX.Element;
-declare function InputGroupInput({ className, size: sizeProp, ...props }: Omit<React$1.ComponentProps<"input">, "size"> & {
+declare function InputGroupInput({ className, size: sizeProp, variant: variantProp, ...props }: Omit<React$1.ComponentProps<"input">, "size"> & {
     size?: InputGroupSize;
+    variant?: InputGroupVariant;
 }): react_jsx_runtime.JSX.Element;
 declare function InputGroupTextarea({ className, ...props }: React$1.ComponentProps<"textarea">): react_jsx_runtime.JSX.Element;
 

package/dist/index.js

@@ -184,7 +184,9 @@ var buttonVariants = 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",
@@ -848,7 +850,7 @@ import { Gift, X as X2 } from "lucide-react";
 import { jsx as jsx9, jsxs as jsxs6 } from "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__ */ jsx9("span", { className: "inline-flex size-10 shrink-0 items-center justify-center rounded-xs bg-primary text-on-primary", children: glyph });
+  return /* @__PURE__ */ jsx9("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, {
@@ -1951,16 +1953,31 @@ import { cva as cva5 } from "class-variance-authority";
 import { jsx as jsx18 } from "react/jsx-runtime";
 var inputVariants = cva5(
   [
-    "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",
@@ -1968,6 +1985,7 @@ var inputVariants = cva5(
       }
     },
     defaultVariants: {
+      variant: "default",
       size: "md"
     }
   }
@@ -1976,10 +1994,12 @@ function Input(_a) {
   var _b = _a, {
     className,
     type,
+    variant = "default",
     size = "md"
   } = _b, props = __objRest(_b, [
     "className",
     "type",
+    "variant",
     "size"
   ]);
   return /* @__PURE__ */ jsx18(
@@ -1987,8 +2007,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)
   );
 }
@@ -2012,24 +2033,36 @@ function Textarea(_a) {
 // components/ui/input-group.tsx
 import { jsx as jsx20 } from "react/jsx-runtime";
 var InputGroupSizeContext = React6.createContext("md");
+var InputGroupVariantContext = React6.createContext("default");
 var inputGroupVariants = cva6(
   [
-    "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",
@@ -2037,6 +2070,7 @@ var inputGroupVariants = cva6(
       }
     },
     defaultVariants: {
+      variant: "default",
       size: "md"
     }
   }
@@ -2044,24 +2078,35 @@ var inputGroupVariants = cva6(
 function InputGroup(_a) {
   var _b = _a, {
     className,
+    variant = "default",
     size = "md"
   } = _b, props = __objRest(_b, [
     "className",
+    "variant",
     "size"
   ]);
-  return /* @__PURE__ */ jsx20(InputGroupSizeContext.Provider, { value: size, children: /* @__PURE__ */ jsx20(
-    "div",
-    __spreadValues({
-      "data-slot": "input-group",
-      "data-size": size,
-      role: "group",
-      className: cn(inputGroupVariants({ size }), className)
-    }, props)
-  ) });
+  return /* @__PURE__ */ jsx20(
+    InputGroupVariantContext.Provider,
+    {
+      value: variant,
+      children: /* @__PURE__ */ jsx20(InputGroupSizeContext.Provider, { value: size, children: /* @__PURE__ */ jsx20(
+        "div",
+        __spreadValues({
+          "data-slot": "input-group",
+          "data-variant": variant,
+          "data-size": size,
+          role: "group",
+          className: cn(inputGroupVariants({ variant, size }), className)
+        }, props)
+      ) })
+    }
+  );
 }
 var inputGroupAddonVariants = cva6(
   [
     "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.
@@ -2156,6 +2201,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",
@@ -2168,18 +2215,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__ */ jsx20(
     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
@@ -4089,8 +4141,8 @@ var itemMediaVariants = cva9(
     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: {
@@ -5187,7 +5239,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), {
@@ -7504,7 +7556,6 @@ function NavBarBlock({ brand, links, signIn, signUp }) {
 }
 
 // components/blocks/open-positions-block.tsx
-import * as React18 from "react";
 import { History as History2, X as X4 } from "lucide-react";
 import { jsx as jsx68, jsxs as jsxs36 } from "react/jsx-runtime";
 function OpenPositionsBlock({
@@ -7546,10 +7597,7 @@ function PositionsList({
   onViewHistory
 }) {
   return /* @__PURE__ */ jsxs36("div", { className: "flex flex-col flex-1 min-h-0", children: [
-    /* @__PURE__ */ jsx68(ItemGroup, { className: "min-h-0 overflow-y-auto", children: positions.map((pos, i) => /* @__PURE__ */ jsxs36(React18.Fragment, { children: [
-      /* @__PURE__ */ jsx68(PositionRow, { position: pos }),
-      i < positions.length - 1 && /* @__PURE__ */ jsx68("div", { className: "h-px mx-4 bg-border-subtle" })
-    ] }, i)) }),
+    /* @__PURE__ */ jsx68(ItemGroup, { className: "min-h-0 overflow-y-auto", children: positions.map((pos, i) => /* @__PURE__ */ jsx68(PositionRow, { position: pos }, i)) }),
     /* @__PURE__ */ jsx68(Separator, {}),
     /* @__PURE__ */ jsx68("div", { className: "shrink-0 flex justify-center py-4", children: /* @__PURE__ */ jsx68(Button, { variant: "tertiary", size: "md", onClick: onViewHistory, children: "View trade history" }) })
   ] });