torch-glare 2.5.3 → 2.5.4

package/docs/components/action-button.md

@@ -378,8 +378,10 @@ Inherits all variants from the Button component:
 ### Base Styles
 
 - **Square dimensions**: Equal width and height for perfect icon centering
-- **Rounded corners**: 4px border radius
+- **Rounded corners**: `radius/sm` (4px) at XS and S, `radius/lg` (8px) at M
 - **Icon-only design**: Optimized padding for icon display
+- **Action colours**: `action-secondary` at rest, `action-hover` on hover and
+  `action-disabled` when disabled — applied unless you pass an explicit `variant`
 - **Inherits Button styles**: All Button component styles and behaviors
 
 ### Custom Styling

package/docs/components/stepper.md

@@ -1,6 +1,6 @@
 ---
 title: Stepper
-description: Generic horizontal/vertical stepper with pending, active, completed, and error states. Composed of Stepper, Step, StepIndicator, StepConnector, StepLabel, and StepDescription.
+description: The pill-shaped multi-step indicator — three semantic types (default, success, negative), horizontal or vertical, three sizes. Composed of Stepper, Step, StepIndicator, StepConnector and StepLabel.
 component: true
 group: Forms
 keywords: [stepper, steps, wizard, progress, multi-step, vertical, horizontal]
@@ -8,9 +8,11 @@ keywords: [stepper, steps, wizard, progress, multi-step, vertical, horizontal]
 
 # Stepper
 
-A generic step-progress component for wizards, onboarding flows, and multi-section forms. Each step has four states — `pending`, `active`, `completed`, `error` — derived automatically from `activeStep` or set explicitly per `Step`.
+The step-progress component for wizards, onboarding flows, and multi-section forms, drawn as the Figma `FormStepper-1.0` pill. Each step has a semantic `type` — `default`, `success`, `negative` — and a selected state derived from `activeStep` or set explicitly per `Step`.
 
-The component is composed of `Stepper`, `Step`, `StepIndicator`, `StepConnector`, `StepLabel`, and `StepDescription`. Compare to [`FormStepper`](./form-stepper.md), which is a pill-shaped variant with no connector line.
+Not to be confused with `FormRenderer.Stepper`, which is the wizard *behaviour* (step state, validation, Back/Next) and renders this component as its rail.
+
+The component is composed of `Stepper`, `Step`, `StepIndicator`, `StepConnector` and `StepLabel`. It is the single stepper in the library — the former `FormStepper` merged into it, so its types, states and badge live here alongside the orientation, sizes and connector.
 
 ## Installation
 
@@ -33,7 +35,6 @@ import {
   StepIndicator,
   StepConnector,
   StepLabel,
-  StepDescription,
 } from '@/components/Stepper'
 ```
 
@@ -73,7 +74,7 @@ export function BasicStepper() {
 }
 ```
 
-State derivation: `index < activeStep` → `completed`, `index === activeStep` → `active`, otherwise `pending`. Pass `isCompleted`, `isActive`, or `isError` on a `Step` to override.
+State derivation: `index === activeStep` → selected. Pass `selected` on a `Step` to override it, and `type` to mark a step as `success` or `negative`.
 
 ## Examples
 
@@ -85,7 +86,6 @@ State derivation: `index < activeStep` → `completed`, `index === activeStep`
     <StepIndicator />
     <div>
       <StepLabel>Create account</StepLabel>
-      <StepDescription>Email and password.</StepDescription>
     </div>
   </Step>
   <StepConnector />
@@ -93,7 +93,6 @@ State derivation: `index < activeStep` → `completed`, `index === activeStep`
     <StepIndicator />
     <div>
       <StepLabel>Verify email</StepLabel>
-      <StepDescription>Check your inbox for a code.</StepDescription>
     </div>
   </Step>
   <StepConnector />
@@ -101,7 +100,6 @@ State derivation: `index < activeStep` → `completed`, `index === activeStep`
     <StepIndicator />
     <div>
       <StepLabel>Done</StepLabel>
-      <StepDescription>You're all set.</StepDescription>
     </div>
   </Step>
 </Stepper>
@@ -116,7 +114,7 @@ State derivation: `index < activeStep` → `completed`, `index === activeStep`
     <StepLabel>Account</StepLabel>
   </Step>
   <StepConnector />
-  <Step index={1} isError>
+  <Step index={1} type="negative">
     <StepIndicator />
     <StepLabel>Payment</StepLabel>
   </Step>
@@ -133,7 +131,7 @@ State derivation: `index < activeStep` → `completed`, `index === activeStep`
 ### Custom indicators
 
 ```tsx
-<Step index={0} isCompleted>
+<Step index={0} type="success">
   <StepIndicator
     completedIcon={<i className="ri-shield-check-line" />}
     errorIcon={<i className="ri-shield-cross-line" />}
@@ -145,9 +143,108 @@ State derivation: `index < activeStep` → `completed`, `index === activeStep`
 ### Sizes
 
 ```tsx
-<Stepper size="S" activeStep={1}> {/* 22px indicators */} </Stepper>
-<Stepper size="M" activeStep={1}> {/* 28px — default */} </Stepper>
-<Stepper size="L" activeStep={1}> {/* 34px */} </Stepper>
+<Stepper size="S" activeStep={1}> {/* 24px pill, 20px indicator */} </Stepper>
+<Stepper size="M" activeStep={1}> {/* 28px pill, 24px indicator — default, the size Figma draws */} </Stepper>
+<Stepper size="L" activeStep={1}> {/* 34px pill, 30px indicator */} </Stepper>
+```
+
+### Step Types
+
+Three semantic types. `success` and `negative` add a small status badge on the indicator (check / info icon) and use filled colors when selected. `default` uses a gray ring at rest, blue ring on hover, and a solid blue fill when selected.
+
+```tsx
+export function StepTypes() {
+  return (
+    <Stepper>
+      <Step index={0} type="default" selected={false}>
+        <StepIndicator />
+        <StepLabel>Default</StepLabel>
+      </Step>
+      <Step index={1} type="success" selected={false}>
+        <StepIndicator />
+        <StepLabel>Success</StepLabel>
+      </Step>
+      <Step index={2} type="negative" selected={false}>
+        <StepIndicator />
+        <StepLabel>Negative</StepLabel>
+      </Step>
+    </Stepper>
+  )
+}
+```
+
+### Selected state
+
+```tsx
+export function SelectedSteps() {
+  return (
+    <Stepper>
+      <Step index={0} type="default" selected>
+        <StepIndicator />
+        <StepLabel>Default</StepLabel>
+      </Step>
+      <Step index={1} type="success" selected>
+        <StepIndicator />
+        <StepLabel>Success</StepLabel>
+      </Step>
+      <Step index={2} type="negative" selected>
+        <StepIndicator />
+        <StepLabel>Negative</StepLabel>
+      </Step>
+    </Stepper>
+  )
+}
+```
+
+### RTL direction
+
+The pill, label spacing, and indicator badge all flip under `dir="rtl"`.
+
+```tsx
+export function RTLStepper() {
+  return (
+    <div dir="rtl">
+      <Stepper>
+        <Step index={0} type="default" selected>
+          <StepIndicator />
+          <StepLabel>افتراضي</StepLabel>
+        </Step>
+        <Step index={1} type="success">
+          <StepIndicator />
+          <StepLabel>نجاح</StepLabel>
+        </Step>
+        <Step index={2} type="negative">
+          <StepIndicator />
+          <StepLabel>خطأ</StepLabel>
+        </Step>
+      </Stepper>
+    </div>
+  )
+}
+```
+
+### Custom badge icon
+
+`StepIndicator.badgeIcon` overrides the default check / info icon for `success` / `negative` types.
+
+```tsx
+<Step index={0} type="success" selected>
+  <StepIndicator badgeIcon={<i className="ri-shield-check-line" />} />
+  <StepLabel>Verified</StepLabel>
+</Step>
+```
+
+### Custom indicator content
+
+Children of `StepIndicator` replace the auto-rendered step number.
+
+```tsx
+<Step index={0} type="default" selected>
+  <StepIndicator>
+    <i className="ri-user-line" />
+  </StepIndicator>
+  <StepLabel>Account</StepLabel>
+</Step>
 ```
 
 ## API Reference
@@ -166,15 +263,14 @@ State derivation: `index < activeStep` → `completed`, `index === activeStep`
 | Prop          | Type      | Default | Description                                                  |
 | ------------- | --------- | ------- | ------------------------------------------------------------ |
 | `index`       | `number`  | `0`     | Zero-based step index. Compared with `Stepper.activeStep`.   |
-| `isActive`    | `boolean` | —       | Force the active state.                                      |
-| `isCompleted` | `boolean` | —       | Force the completed state.                                   |
-| `isError`     | `boolean` | —       | Force the error state. Overrides active and completed.       |
+| `type`        | `'default' \| 'success' \| 'negative'` | `'default'` | Semantic state. `success`/`negative` fill the indicator and add a corner badge. |
+| `selected`    | `boolean` | `index === activeStep` | Force the selected state.                    |
 
 ### StepIndicator
 
 | Prop            | Type        | Default | Description                                       |
 | --------------- | ----------- | ------- | ------------------------------------------------- |
-| `icon`          | `ReactNode` | —       | Replaces the step number for the pending state.   |
+| `icon`          | `ReactNode` | —       | Replaces the step number.                         |
 | `completedIcon` | `ReactNode` | —       | Replaces the default check icon when completed.   |
 | `errorIcon`     | `ReactNode` | —       | Replaces the default close icon on error.         |
 
@@ -182,7 +278,7 @@ State derivation: `index < activeStep` → `completed`, `index === activeStep`
 
 The line between steps. No props beyond standard HTML attributes — orientation comes from the parent `Stepper`.
 
-### StepLabel / StepDescription
+### StepLabel
 
 Forward `HTMLAttributes<HTMLDivElement>`. Their colors follow the parent `Step` state automatically.
 
@@ -192,7 +288,7 @@ Forward `HTMLAttributes<HTMLDivElement>`. Their colors follow the parent `Step`
 - Active: blue informational background + focus ring.
 - Completed: green success background and ring; check icon.
 - Error: red negative background and ring; close icon.
-- Connectors: `2px` line, gray when pending, focus-blue when the preceding step is completed.
+- Connectors: `3px` rounded bar, `border-presentation-stepper-default` by default and focus-blue when `completed` is set. Vertically it centres itself under the indicator, tracking the stepper's size.
 
 ## TypeScript Types
 
@@ -204,18 +300,17 @@ type StepperVariants  = VariantProps<typeof stepperStyles>
 // { orientation?: 'horizontal' | 'vertical' }
 
 type IndicatorVariants = VariantProps<typeof stepIndicatorStyles>
-// { state?: 'pending' | 'active' | 'completed' | 'error'; size?: 'S' | 'M' | 'L' }
+// { type?: 'default' | 'success' | 'negative'; selected?: boolean; size?: 'S' | 'M' | 'L' }
 ```
 
 ## Accessibility
 
 - Wrap the stepper in a `<nav aria-label="Progress">` when it represents real navigation.
 - Use `aria-current="step"` on the active step's container when steps are interactive.
-- Don't rely on color alone for error — pair with `StepDescription` or an off-screen message.
+- Don't rely on colour alone for the negative type — pair it with an off-screen message.
 
 ## Best Practices
 
-1. Use `Stepper` when you need a connector line + numbered/iconified steps. Use `FormStepper` when you want pill-shaped buttons without a line.
+1. Add `StepConnector` between steps when you want the run of progress drawn; leave it out for a bare row of pills.
 2. Keep `Step` count to 3–5 horizontal, 3–7 vertical. Beyond that, switch to a checklist or summary.
-3. Drive state from `activeStep` in the parent — only fall back to `isActive`/`isCompleted` for non-linear flows.
-4. Provide a `StepDescription` only on vertical steppers — descriptions wrap horizontal layouts awkwardly.
+3. Drive selection from `activeStep` in the parent — only fall back to `selected` for non-linear flows.

package/docs/reference/tailwind-plugins.md

@@ -273,6 +273,8 @@ The TORCH mode plugin provides the actual color values and theme-specific styles
 - 500+ CSS custom properties
 - Gradient and alpha channel support
 - Comprehensive color palette
+- The shared **radius**, **container** and **breakpoint** scales (exported as
+  `borderRadius`, `containers` and `screens`)
 
 ### Installation
 
@@ -280,6 +282,46 @@ The TORCH mode plugin provides the actual color values and theme-specific styles
 npm install glare-torch-mode
 ```
 
+### The radius scale
+
+`borderRadius` produces the `rounded-radius-*` classes the components are built on — Button, Badge,
+the shared `Input` field root, ActionButton, Select and TextArea all use them. The keys mirror the
+Figma `radius/*` collection:
+
+| class | value | | class | value |
+|---|---|---|---|---|
+| `rounded-radius-none` | 0px | | `rounded-radius-2xl` | 16px |
+| `rounded-radius-xs` | 2px | | `rounded-radius-3xl` | 24px |
+| `rounded-radius-sm` | 4px | | `rounded-radius-4xl` | 32px |
+| `rounded-radius-md` | 6px | | `rounded-radius-5xl` | 40px |
+| `rounded-radius-lg` | 8px | | `rounded-radius-6xl` | 48px |
+| `rounded-radius-xl` | 12px | | `rounded-radius-round` | 9999px |
+
+Deliberately **not** reusing Tailwind's own `sm`/`md`/`lg` keys: that would override the built-in
+scale, where Glare's `sm` is 4px and Tailwind's is 2px, silently restyling every existing
+`rounded-sm`.
+
+Note that `tailwind-merge` does not dedupe these classes — they are custom scale keys, not values it
+recognises. Never put a `rounded-radius-*` on a `cva` base *and* on one of its variants: both survive
+and CSS source order decides the winner. Put it only on the variants.
+
+### Tailwind v4
+
+The plugin is a plain `addBase` function, so under v4 `@plugin` registers the colour variables but
+**not** the scales — those reach Tailwind through `theme.extend` in a JS config, which v4 does not
+have. Import the theme file as well (requires **1.4.0 or newer**):
+
+```css
+@import "tailwindcss";
+@import "glare-torch-mode/theme.css";   /* must precede the @plugin rules */
+@plugin "glare-torch-mode";
+```
+
+Without it `rounded-radius-*` is never generated and `sm:` / `@md:` fall back to Tailwind's values.
+Two v4-only caveats: the container scale is shared with `max-w-*`, so `--container-md` also sets
+`max-w-md` to 650px; and the plugin's `--radius-*` variables land in v4's own border-radius
+namespace — matching values, but `px` where Tailwind uses `rem`.
+
 ### Setup (Required with mapping-color-system)
 
 ```ts

package/docs/tutorials/getting-started.md

@@ -104,6 +104,13 @@ Add the following to your `global.css` file:
    (e.g. Badge renders with no background). Keep it directly under
    @import "tailwindcss". */
 @import "mapping-color-system-v4/tailwindVars.css";
+/* Required, and needs glare-torch-mode >= 1.4.0. The plugin only registers the colour
+   variables; the radius scale, container sizes and breakpoints reach Tailwind through
+   `theme.extend` in a JS config, which v4 does not have. Without this the
+   `rounded-radius-*` classes are never generated (square corners on Button, Badge,
+   Input, ActionButton, Select, TextArea) and `sm:` / `@md:` fall back to Tailwind's
+   own values. Same @import-ordering rule as above applies. */
+@import "glare-torch-mode/theme.css";
 @plugin "glare-torch-mode";
 @plugin "tailwind-scrollbar-hide";
 @plugin "tailwindcss-animate";
@@ -111,6 +118,14 @@ Add the following to your `global.css` file:
 @plugin "mapping-color-system-v4";
 ```
 
+Two version-4-only caveats:
+
+- Tailwind 4 shares the container scale with `max-w-*`, so `--container-md` also sets `max-w-md`
+  to 650px.
+- The plugin sets `--radius-*` on `:root`, which is Tailwind 4's own border-radius namespace. The
+  values match its defaults (2/4/6/8/12/16/24/32px) but are declared in `px` where Tailwind uses
+  `rem`, so they diverge if you change the root font size.
+
 > ⚠️ **Common failure:** if your Badge (or any component using
 > `bg-background-presentation-*` colors) renders with no background, the
 > `tailwindVars.css` `@import` is almost certainly positioned **after** the
@@ -130,6 +145,8 @@ Then configure your `tailwind.config.js`:
 
 ```js
 const { plugin, mappingVars } = require('mapping-color-system')
+// Design tokens plus the shared radius / container / screen scales.
+const torchMode = require('glare-torch-mode')
 
 module.exports = {
     content: [
@@ -139,26 +156,22 @@ module.exports = {
     theme: {
         extend: {
             colors: mappingVars,
-            containers: {
-                xs: "320px",
-                sm: "600px",
-                md: "768px",
-                lg: "1024px",
-                xl: "1280px",
-                "2xl": "1536px",
-            },
+            borderRadius: torchMode.borderRadius,
+            containers: torchMode.containers,
         },
     },
+    // Top level, not inside extend — this replaces Tailwind's breakpoints.
+    screens: torchMode.screens,
     plugins: [
         plugin,
         require('@tailwindcss/container-queries'),
         require('tailwindcss-animate'),
         require('tailwind-scrollbar-hide'),
         require('glare-typography'),
-        require('glare-torch-mode'),
+        torchMode,
         function ({ addVariant }) {
-            addVariant("rtl", '&[dir="rtl"]');
-            addVariant("ltr", '&[dir="ltr"]');
+            addVariant("rtl", ['&[dir="rtl"]', '[dir="rtl"] &']);
+            addVariant("ltr", ['&[dir="ltr"]', '[dir="ltr"] &']);
         },
     ],
 };
@@ -168,6 +181,14 @@ Important:
 - Specify the component path in the `content` array matching your `glare.json` path
 - Add all plugins to the `plugins` array
 - Add `mappingVars` to the `extend.colors` object
+- Take `borderRadius`, `containers` and `screens` from `glare-torch-mode` rather than hardcoding
+  them. `borderRadius` is what produces the `rounded-radius-*` classes the components are built on;
+  without it Button, Badge, Input, ActionButton, Select and TextArea render with square corners.
+- Put `screens` at the **top level**, not inside `extend`, so Glare's breakpoints replace
+  Tailwind's rather than being added alongside them (`sm` is 600px, not 640px).
+- Register `rtl` / `ltr` with **both** selectors. `&[dir="rtl"]` alone only matches an element that
+  carries the attribute itself, so an `rtl:` class on a component nested inside an RTL wrapper never
+  applies.
 
 ---
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "torch-glare",
-  "version": "2.5.3",
+  "version": "2.5.4",
   "type": "module",
   "license": "MIT",
   "description": "A copy-in React component library (TypeScript + Radix UI + Tailwind CSS). Its CLI copies component source directly into your project — you own the code.",