@trading-game/design-intelligence-layer 0.17.1 → 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" | "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;
 
@@ -454,7 +458,17 @@ declare function InputOTPSeparator({ ...props }: React$1.ComponentProps<"div">):
 
 declare function Separator({ className, orientation, decorative, ...props }: React$1.ComponentProps<typeof Separator$1.Root>): react_jsx_runtime.JSX.Element;
 
-declare function ItemGroup({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function ItemGroup({ className, divider, ...props }: React$1.ComponentProps<"div"> & {
+    /**
+     * Auto-divide consecutive default-variant `Item`s with a bottom border
+     * (`border-border-subtle`). The last item's bottom border is suppressed,
+     * and non-default variants (`outline`, `muted`) are left untouched so
+     * they don't double up with their own borders. Defaults to `true`; pass
+     * `false` to opt out when the design wants flush items or uses
+     * `<ItemSeparator />` manually.
+     */
+    divider?: boolean;
+}): react_jsx_runtime.JSX.Element;
 declare function ItemSeparator({ className, ...props }: React$1.ComponentProps<typeof Separator>): react_jsx_runtime.JSX.Element;
 declare const itemVariants: (props?: ({
     variant?: "default" | "outline" | "muted" | null | undefined;

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" | "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;
 
@@ -454,7 +458,17 @@ declare function InputOTPSeparator({ ...props }: React$1.ComponentProps<"div">):
 
 declare function Separator({ className, orientation, decorative, ...props }: React$1.ComponentProps<typeof Separator$1.Root>): react_jsx_runtime.JSX.Element;
 
-declare function ItemGroup({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function ItemGroup({ className, divider, ...props }: React$1.ComponentProps<"div"> & {
+    /**
+     * Auto-divide consecutive default-variant `Item`s with a bottom border
+     * (`border-border-subtle`). The last item's bottom border is suppressed,
+     * and non-default variants (`outline`, `muted`) are left untouched so
+     * they don't double up with their own borders. Defaults to `true`; pass
+     * `false` to opt out when the design wants flush items or uses
+     * `<ItemSeparator />` manually.
+     */
+    divider?: boolean;
+}): react_jsx_runtime.JSX.Element;
 declare function ItemSeparator({ className, ...props }: React$1.ComponentProps<typeof Separator>): react_jsx_runtime.JSX.Element;
 declare const itemVariants: (props?: ({
     variant?: "default" | "outline" | "muted" | null | undefined;

package/dist/index.js

@@ -173,10 +173,20 @@ var buttonVariants = cva(
         primary: "bg-primary text-on-primary hover:bg-primary-hover",
         // Primary Inverse — white bg + blue text; for use on dark/coloured surfaces
         "primary-inverse": "bg-primary-inverse text-on-primary-inverse hover:bg-primary-inverse/80",
+        // Primary Shimmer — same surface as `primary` plus a sweeping
+        // white shimmer overlay (same animation as the TicketCard deposit
+        // stub). Use for headline CTAs that need to draw the eye.
+        "primary-shimmer": "relative overflow-hidden bg-primary text-on-primary hover:bg-primary-hover",
+        // Primary Inverse Shimmer — same surface as `primary-inverse` plus
+        // a sweeping brand-blue shimmer (white shimmer would be invisible
+        // on the white surface). For headline CTAs on dark/coloured pages.
+        "primary-inverse-shimmer": "relative overflow-hidden bg-primary-inverse text-on-primary-inverse hover:bg-primary-inverse/80",
         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",
@@ -207,6 +217,13 @@ var spinnerSizeMap = {
   "icon-sm": "size-3.5",
   "icon-xs": "size-3"
 };
+var shimmerGradients = {
+  // 110° tilts the bright band forward so the sweep reads as a diagonal
+  // shine. Three stops around 50% (soft → mid → soft) shape the highlight
+  // like a polished-metal gleam without going too bright at the peak.
+  "primary-shimmer": "linear-gradient(110deg, transparent 20%, rgba(255,255,255,0.10) 40%, rgba(255,255,255,0.20) 50%, rgba(255,255,255,0.10) 60%, transparent 80%)",
+  "primary-inverse-shimmer": "linear-gradient(110deg, transparent 20%, rgba(35,35,255,0.07) 40%, rgba(35,35,255,0.14) 50%, rgba(35,35,255,0.07) 60%, transparent 80%)"
+};
 function Button(_a) {
   var _b = _a, {
     className,
@@ -224,7 +241,7 @@ function Button(_a) {
     "children"
   ]);
   const Comp = asChild ? Slot.Root : "button";
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsxs3(
     Comp,
     __spreadProps(__spreadValues({
       "data-slot": "button",
@@ -237,10 +254,20 @@ function Button(_a) {
       ),
       "aria-busy": loading || void 0
     }, props), {
-      children: loading ? /* @__PURE__ */ jsxs3(Fragment, { children: [
-        /* @__PURE__ */ jsx3("span", { className: "invisible inline-flex items-center gap-[inherit]", "aria-hidden": true, children }),
-        /* @__PURE__ */ jsx3("span", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx3(Spinner, { className: spinnerSizeMap[size != null ? size : "lg"] }) })
-      ] }) : children
+      children: [
+        variant && shimmerGradients[variant] && !loading && !props.disabled ? /* @__PURE__ */ jsx3(
+          "span",
+          {
+            "aria-hidden": true,
+            className: "pointer-events-none absolute inset-0 [animation:button-shimmer_4s_linear_infinite]",
+            style: { background: shimmerGradients[variant] }
+          }
+        ) : null,
+        loading ? /* @__PURE__ */ jsxs3(Fragment, { children: [
+          /* @__PURE__ */ jsx3("span", { className: "invisible inline-flex items-center gap-[inherit]", "aria-hidden": true, children }),
+          /* @__PURE__ */ jsx3("span", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx3(Spinner, { className: spinnerSizeMap[size != null ? size : "lg"] }) })
+        ] }) : children
+      ]
     })
   );
 }
@@ -771,7 +798,7 @@ var badgeVariants = cva3(
         "fill-success": "bg-semantic-win/10 border-transparent text-semantic-win",
         "fill-fail": "bg-semantic-loss/10 border-transparent text-semantic-loss",
         "fill-warning": "bg-semantic-warning/10 border-transparent text-semantic-warning",
-        "fill-credit": "bg-semantic-boost-surface border-transparent text-on-semantic-boost !text-xs !font-bold",
+        "fill-credit": "bg-semantic-boost-surface backdrop-blur-md text-on-primary",
         // Demo / test-mode flag — opaque light-peach surface + red-orange text.
         // Uses --semantic-demo-surface (a solid color-mix of demo @ 10% with white)
         // so the badge looks identical on any background.
@@ -823,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, {
@@ -1926,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",
@@ -1943,6 +1985,7 @@ var inputVariants = cva5(
       }
     },
     defaultVariants: {
+      variant: "default",
       size: "md"
     }
   }
@@ -1951,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(
@@ -1962,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)
   );
 }
@@ -1987,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",
@@ -2012,6 +2070,7 @@ var inputGroupVariants = cva6(
       }
     },
     defaultVariants: {
+      variant: "default",
       size: "md"
     }
   }
@@ -2019,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.
@@ -2131,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",
@@ -2143,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
@@ -3966,13 +4043,37 @@ import { cva as cva9 } from "class-variance-authority";
 import { Slot as Slot5 } from "radix-ui";
 import { jsx as jsx35 } from "react/jsx-runtime";
 function ItemGroup(_a) {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  var _b = _a, {
+    className,
+    divider = true
+  } = _b, props = __objRest(_b, [
+    "className",
+    "divider"
+  ]);
   return /* @__PURE__ */ jsx35(
     "div",
     __spreadValues({
       role: "list",
       "data-slot": "item-group",
-      className: cn("group/item-group flex flex-col", className)
+      "data-divider": divider ? "true" : void 0,
+      className: cn(
+        "group/item-group flex flex-col",
+        // Divider mode: 4 px gap between items + a 1 px line drawn via
+        // ::after on each non-last default item, sitting in that gap.
+        // Item itself stays border-free — the line is a separate visual
+        // element rather than an outline on the item.
+        divider && [
+          "gap-1",
+          "[&>[data-slot=item][data-variant=default]:not(:last-child)]:relative",
+          "[&>[data-slot=item][data-variant=default]:not(:last-child)]:after:content-['']",
+          "[&>[data-slot=item][data-variant=default]:not(:last-child)]:after:absolute",
+          "[&>[data-slot=item][data-variant=default]:not(:last-child)]:after:-bottom-0.5",
+          "[&>[data-slot=item][data-variant=default]:not(:last-child)]:after:inset-x-4",
+          "[&>[data-slot=item][data-variant=default]:not(:last-child)]:after:h-px",
+          "[&>[data-slot=item][data-variant=default]:not(:last-child)]:after:bg-border-subtle"
+        ],
+        className
+      )
     }, props)
   );
 }
@@ -4040,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: {
@@ -5138,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), {
@@ -7455,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({
@@ -7497,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" }) })
   ] });