@trading-game/design-intelligence-layer 0.9.5 → 0.9.7

package/guides/design-system-guide/trading-game-ds-guide.md

@@ -561,9 +561,10 @@ These are styling behaviors you can't discover from TypeScript types alone:
 
 | Component | Note |
 |-----------|------|
-| Button | `font-display font-bold`, sentence case (no `uppercase`). Primary: `text-on-prominent-static-inverse`. Tertiary hover: `bg-primary/[0.08]` |
+| Button | `font-display font-bold`, sentence case (no `uppercase`). Primary: `text-on-prominent-static-inverse`. Tertiary hover: `bg-primary/[0.08]`. **Loading state:** pass `loading` prop — button automatically renders a centred `Spinner` (sized to the button's size variant), hides children with `invisible` to preserve width. Do NOT manually place `<Spinner>` or "Loading" text inside the button. |
 | Card | Flat by default (no shadow). Add elevation manually: `className="shadow-sm"` |
 | Input | Resting: `border-input`. Focus: `border-ring` + `ring-[3px] ring-ring/50`. Radius: `rounded-sm` (6px) |
+| InputGroup | Wraps `Input` with inline addons (icons, buttons, text). **Sizes:** `sm` (h-8) / `md` (h-10, default) / `lg` (h-12) — pass `size` to `InputGroup`, it flows to `InputGroupInput` via context. **Padding:** when any `inline-start` or `inline-end` addon is present, input text gets equal `pl-2 pr-2` (8px) on both sides for visual symmetry. Without addons, Input's default `px-3`/`px-4` applies. |
 | Tooltip | Bubble: `bg-primary` + `text-on-prominent-static-inverse` (not `bg-popover`). Always wrap in `<TooltipProvider>` |
 | Sidebar | Menu buttons use `rounded-sm`. Selection: `bg-secondary-hover` + `text-primary` + `font-semibold` |
 | Breadcrumb | Active page: `text-primary font-medium`. Links: `text-on-subtle` |
@@ -571,7 +572,7 @@ These are styling behaviors you can't discover from TypeScript types alone:
 | Select | Item hover: `bg-primary/[0.08]`. Selected: `text-primary font-medium` + checkmark. `SelectTrigger` accepts `readOnly` prop: blocks interaction, retains full default appearance, chevron renders at `opacity-30` |
 | Progress | Track: `bg-primary/20`. Indicator: `bg-primary`. Radius: `rounded-2xs` |
 | Spinner | Inherits parent text color. **Always pass `text-primary` for standalone use** |
-| Stepper | Numeric input flanked by `−` / `+` `secondary` `icon-xs` buttons. Composes `InputGroup` internally. Props: `value`, `defaultValue`, `onValueChange`, `min`, `max`, `step` (default 1), `size` (`"sm" \| "md" \| "lg"`, default `"md"`), `disabled`, `placeholder`. **Sizes:** `sm` — h-8, `icon-xs` buttons, `size-3` icons; `md` — h-9, `icon-xs` buttons, `size-3.5` icons; `lg` — h-11, `icon-sm` buttons, `size-4` icons. Supports controlled & uncontrolled modes, keyboard Arrow Up/Down, and floating-point steps. Default width: `w-32`. An `InputGroupText` unit label (e.g. `USDT`) can be placed in the `inline-end` addon alongside the `+` button — use `font-normal text-on-subtle` for regular weight and subtle colour. Exports `StepperSize` type. |
+| Stepper | Numeric input flanked by `−` / `+` `secondary` `icon-xs` buttons. Composes `InputGroup` internally. Props: `value`, `defaultValue`, `onValueChange`, `min`, `max`, `step` (default 1), `size` (`"sm" \| "md" \| "lg"`, default `"md"`), `disabled`, `placeholder`. **Sizes:** `sm` — h-8 (32px), `icon-xs` buttons, `size-3` icons; `md` — h-10 (40px), `icon-xs` buttons, `size-3.5` icons; `lg` — h-12 (48px), `icon-sm` buttons, `size-4` icons. Matches `Input` and `InputGroup` height scale exactly. Supports controlled & uncontrolled modes, keyboard Arrow Up/Down, and floating-point steps. Default width: `w-32`. An `InputGroupText` unit label (e.g. `USDT`) can be placed in the `inline-end` addon alongside the `+` button — use `font-normal text-on-subtle` for regular weight and subtle colour. Exports `StepperSize` type. |
 | Switch | Checked track: `bg-slider-range`. Checked thumb: `bg-primary` |
 | Slider | Thumb: square `rounded-[4px]`, `bg-primary`. Track range: `bg-slider-range` |
 | Dialog/Sheet | Footer buttons should use `size="md"`. Overlay: `bg-overlay` |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trading-game/design-intelligence-layer",
-  "version": "0.9.5",
+  "version": "0.9.7",
   "description": "Trading Game Design System — shadcn/ui components with Tailwind CSS v4",
   "type": "module",
   "main": "./dist/index.cjs",