torch-glare-mcp 1.1.0 → 1.2.0

package/docs/components/form-stepper.md

@@ -0,0 +1,244 @@
+---
+title: FormStepper
+description: Pill-shaped multi-step indicator for forms and wizards. Three semantic step types (default, success, negative) with resting, hover, selected, and selected-hover states. Full LTR and RTL support.
+component: true
+group: Forms
+keywords: [form-stepper, stepper, wizard, steps, pill, multi-step, form, indicator, RTL]
+---
+
+# FormStepper
+
+A pill-shaped multi-step indicator for forms and wizards. Each step renders a circular indicator and a label inside a pill. Selection swaps the pill background to black with a white label; hover deepens the shadow on selected pills and grows the label gap on non-selected ones. The status badge on the indicator switches the visual to `success` (green check) or `negative` (red info).
+
+The component is composed of `FormStepper`, `FormStep`, `FormStepIndicator`, and `FormStepLabel`.
+
+## Installation
+
+```bash
+npx torch-glare@latest add FormStepper
+```
+
+## Imports
+
+```typescript
+import {
+  FormStepper,
+  FormStep,
+  FormStepIndicator,
+  FormStepLabel,
+} from '@/components/FormStepper'
+```
+
+## Basic Usage
+
+```tsx
+import { useState } from 'react'
+import {
+  FormStepper,
+  FormStep,
+  FormStepIndicator,
+  FormStepLabel,
+} from '@/components/FormStepper'
+
+export function BasicFormStepper() {
+  const [activeStep, setActiveStep] = useState(0)
+
+  return (
+    <FormStepper activeStep={activeStep}>
+      <FormStep index={0} type="success" onClick={() => setActiveStep(0)}>
+        <FormStepIndicator />
+        <FormStepLabel>Account</FormStepLabel>
+      </FormStep>
+      <FormStep index={1} type="default" onClick={() => setActiveStep(1)}>
+        <FormStepIndicator />
+        <FormStepLabel>Profile</FormStepLabel>
+      </FormStep>
+      <FormStep index={2} type="negative" onClick={() => setActiveStep(2)}>
+        <FormStepIndicator />
+        <FormStepLabel>Payment</FormStepLabel>
+      </FormStep>
+      <FormStep index={3} type="default" onClick={() => setActiveStep(3)}>
+        <FormStepIndicator />
+        <FormStepLabel>Confirm</FormStepLabel>
+      </FormStep>
+    </FormStepper>
+  )
+}
+```
+
+`FormStepper.activeStep` drives which pill renders selected — each `FormStep` auto-selects when its `index` matches. Pass `selected` on a step to override the match.
+
+## Examples
+
+### 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 (
+    <FormStepper>
+      <FormStep index={0} type="default" selected={false}>
+        <FormStepIndicator />
+        <FormStepLabel>Default</FormStepLabel>
+      </FormStep>
+      <FormStep index={1} type="success" selected={false}>
+        <FormStepIndicator />
+        <FormStepLabel>Success</FormStepLabel>
+      </FormStep>
+      <FormStep index={2} type="negative" selected={false}>
+        <FormStepIndicator />
+        <FormStepLabel>Negative</FormStepLabel>
+      </FormStep>
+    </FormStepper>
+  )
+}
+```
+
+### Selected state
+
+```tsx
+export function SelectedSteps() {
+  return (
+    <FormStepper>
+      <FormStep index={0} type="default" selected>
+        <FormStepIndicator />
+        <FormStepLabel>Default</FormStepLabel>
+      </FormStep>
+      <FormStep index={1} type="success" selected>
+        <FormStepIndicator />
+        <FormStepLabel>Success</FormStepLabel>
+      </FormStep>
+      <FormStep index={2} type="negative" selected>
+        <FormStepIndicator />
+        <FormStepLabel>Negative</FormStepLabel>
+      </FormStep>
+    </FormStepper>
+  )
+}
+```
+
+### RTL direction
+
+The pill, label spacing, and indicator badge all flip under `dir="rtl"`.
+
+```tsx
+export function RTLFormStepper() {
+  return (
+    <div dir="rtl">
+      <FormStepper>
+        <FormStep index={0} type="default" selected>
+          <FormStepIndicator />
+          <FormStepLabel>افتراضي</FormStepLabel>
+        </FormStep>
+        <FormStep index={1} type="success">
+          <FormStepIndicator />
+          <FormStepLabel>نجاح</FormStepLabel>
+        </FormStep>
+        <FormStep index={2} type="negative">
+          <FormStepIndicator />
+          <FormStepLabel>خطأ</FormStepLabel>
+        </FormStep>
+      </FormStepper>
+    </div>
+  )
+}
+```
+
+### Custom badge icon
+
+`FormStepIndicator.badgeIcon` overrides the default check / info icon for `success` / `negative` types.
+
+```tsx
+<FormStep index={0} type="success" selected>
+  <FormStepIndicator badgeIcon={<i className="ri-shield-check-line" />} />
+  <FormStepLabel>Verified</FormStepLabel>
+</FormStep>
+```
+
+### Custom indicator content
+
+Children of `FormStepIndicator` replace the auto-rendered step number.
+
+```tsx
+<FormStep index={0} type="default" selected>
+  <FormStepIndicator>
+    <i className="ri-user-line" />
+  </FormStepIndicator>
+  <FormStepLabel>Account</FormStepLabel>
+</FormStep>
+```
+
+## API Reference
+
+### FormStepper
+
+| Prop         | Type                            | Default | Description                                                       |
+| ------------ | ------------------------------- | ------- | ----------------------------------------------------------------- |
+| `activeStep` | `number`                        | `0`     | Zero-based index of the currently selected step.                  |
+| `theme`      | `'dark' \| 'light' \| 'default'` | —       | Theme override applied via `data-theme`.                          |
+| `className`  | `string`                        | —       | Extra classes merged onto the root `<div>`.                       |
+
+Standard `HTMLAttributes<HTMLDivElement>` are forwarded.
+
+### FormStep
+
+| Prop        | Type                                    | Default     | Description                                                                |
+| ----------- | --------------------------------------- | ----------- | -------------------------------------------------------------------------- |
+| `index`     | `number`                                | `0`         | Zero-based step index. Matched against `FormStepper.activeStep`.           |
+| `type`      | `'default' \| 'success' \| 'negative'` | `'default'` | Visual type. `success` and `negative` add a status badge on the indicator. |
+| `selected`  | `boolean`                               | —           | Force the selected state, overriding the index/`activeStep` match.         |
+| `className` | `string`                                | —           | Extra classes merged onto the pill root.                                   |
+
+Standard `HTMLAttributes<HTMLDivElement>` (minus `type`) are forwarded — typical use is `onClick` for navigation.
+
+### FormStepIndicator
+
+| Prop        | Type        | Default | Description                                                                   |
+| ----------- | ----------- | ------- | ----------------------------------------------------------------------------- |
+| `badgeIcon` | `ReactNode` | —       | Override the default badge icon (check for `success`, info for `negative`).   |
+| `children`  | `ReactNode` | —       | Replaces the auto-rendered step number.                                       |
+| `className` | `string`    | —       | Extra classes merged onto the indicator `<div>`.                              |
+
+### FormStepLabel
+
+Forwards `HTMLAttributes<HTMLDivElement>`. Color and label spacing follow the parent `FormStep` selection state.
+
+## Styling
+
+- Pill height: `28px`, fully rounded, `2px` inner padding.
+- Indicator: `24×24px` circle, `border-[3px]` for `default`, solid fill for `success`/`negative`.
+- Status badge: `15×15px` circle pinned to the top-right of the indicator (top-left under RTL), with `border` matching the page background.
+- Selection: `bg-[#000000]` pill with `text-[#FFFFFF]` label and a `0 0 32px 2px rgba(0,0,0,0.05)` shadow that deepens on hover.
+- Non-selected hover: `bg-[#FFFFFF]` pill, label gap grows from `6px` to `9px`, ring color flips to `#004699`.
+
+## TypeScript Types
+
+```typescript
+type FormStepperType = 'default' | 'success' | 'negative'
+
+interface FormStepperProps extends React.HTMLAttributes<HTMLDivElement> {
+  activeStep?: number
+  theme?: 'dark' | 'light' | 'default'
+}
+
+interface FormStepProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'type'> {
+  index?: number
+  type?: FormStepperType
+  selected?: boolean
+}
+```
+
+## Accessibility
+
+- Each `FormStep` is a focusable interactive surface — attach `onClick` and (if needed) `role="button"` plus `tabIndex={0}` for keyboard navigation.
+- The status badge is `aria-hidden`; the meaning should be carried by the label text (e.g. `"Payment — error"`).
+- Color is never the sole signal for `success`/`negative` — pair with text or an off-screen description.
+
+## Best Practices
+
+1. Drive selection with `activeStep` from the parent form state — avoid setting `selected` per step manually.
+2. Use `success` only for *completed and validated* steps, `negative` only for *failed* steps. Default = pending or current.
+3. Keep labels short — the pill grows by `~3px` on hover, and long labels make that animation jittery.
+4. Wire `onClick` for non-linear navigation (jump-to-step). For strict wizards, omit `onClick` on future steps.

package/docs/components/stepper.md

@@ -0,0 +1,215 @@
+---
+title: Stepper
+description: Generic horizontal/vertical stepper with pending, active, completed, and error states. Composed of Stepper, Step, StepIndicator, StepConnector, StepLabel, and StepDescription.
+component: true
+group: Forms
+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 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.
+
+## Installation
+
+```bash
+npx torch-glare@latest add Stepper
+```
+
+## Imports
+
+```typescript
+import {
+  Stepper,
+  Step,
+  StepIndicator,
+  StepConnector,
+  StepLabel,
+  StepDescription,
+} from '@/components/Stepper'
+```
+
+## Basic Usage
+
+```tsx
+import { useState } from 'react'
+import {
+  Stepper,
+  Step,
+  StepIndicator,
+  StepConnector,
+  StepLabel,
+} from '@/components/Stepper'
+
+export function BasicStepper() {
+  const [activeStep, setActiveStep] = useState(1)
+
+  return (
+    <Stepper activeStep={activeStep}>
+      <Step index={0}>
+        <StepIndicator />
+        <StepLabel>Account</StepLabel>
+      </Step>
+      <StepConnector />
+      <Step index={1}>
+        <StepIndicator />
+        <StepLabel>Profile</StepLabel>
+      </Step>
+      <StepConnector />
+      <Step index={2}>
+        <StepIndicator />
+        <StepLabel>Confirm</StepLabel>
+      </Step>
+    </Stepper>
+  )
+}
+```
+
+State derivation: `index < activeStep` → `completed`, `index === activeStep` → `active`, otherwise `pending`. Pass `isCompleted`, `isActive`, or `isError` on a `Step` to override.
+
+## Examples
+
+### Vertical orientation with descriptions
+
+```tsx
+<Stepper orientation="vertical" activeStep={1}>
+  <Step index={0}>
+    <StepIndicator />
+    <div>
+      <StepLabel>Create account</StepLabel>
+      <StepDescription>Email and password.</StepDescription>
+    </div>
+  </Step>
+  <StepConnector />
+  <Step index={1}>
+    <StepIndicator />
+    <div>
+      <StepLabel>Verify email</StepLabel>
+      <StepDescription>Check your inbox for a code.</StepDescription>
+    </div>
+  </Step>
+  <StepConnector />
+  <Step index={2}>
+    <StepIndicator />
+    <div>
+      <StepLabel>Done</StepLabel>
+      <StepDescription>You're all set.</StepDescription>
+    </div>
+  </Step>
+</Stepper>
+```
+
+### Error state
+
+```tsx
+<Stepper activeStep={2}>
+  <Step index={0}>
+    <StepIndicator />
+    <StepLabel>Account</StepLabel>
+  </Step>
+  <StepConnector />
+  <Step index={1} isError>
+    <StepIndicator />
+    <StepLabel>Payment</StepLabel>
+  </Step>
+  <StepConnector />
+  <Step index={2}>
+    <StepIndicator />
+    <StepLabel>Confirm</StepLabel>
+  </Step>
+</Stepper>
+```
+
+`StepIndicator` auto-renders a check icon for `completed`, a close icon for `error`, and the step number otherwise. Override via `icon`, `completedIcon`, or `errorIcon`.
+
+### Custom indicators
+
+```tsx
+<Step index={0} isCompleted>
+  <StepIndicator
+    completedIcon={<i className="ri-shield-check-line" />}
+    errorIcon={<i className="ri-shield-cross-line" />}
+  />
+  <StepLabel>Verified</StepLabel>
+</Step>
+```
+
+### 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>
+```
+
+## API Reference
+
+### Stepper
+
+| Prop          | Type                              | Default        | Description                                          |
+| ------------- | --------------------------------- | -------------- | ---------------------------------------------------- |
+| `activeStep`  | `number`                          | `0`            | Zero-based index of the active step.                 |
+| `orientation` | `'horizontal' \| 'vertical'`      | `'horizontal'` | Layout direction.                                    |
+| `size`        | `'S' \| 'M' \| 'L'`               | `'M'`          | Indicator size for all children.                     |
+| `theme`       | `'dark' \| 'light' \| 'default'`  | —              | Theme override applied via `data-theme`.             |
+
+### Step
+
+| 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.       |
+
+### StepIndicator
+
+| Prop            | Type        | Default | Description                                       |
+| --------------- | ----------- | ------- | ------------------------------------------------- |
+| `icon`          | `ReactNode` | —       | Replaces the step number for the pending state.   |
+| `completedIcon` | `ReactNode` | —       | Replaces the default check icon when completed.   |
+| `errorIcon`     | `ReactNode` | —       | Replaces the default close icon on error.         |
+
+### StepConnector
+
+The line between steps. No props beyond standard HTML attributes — orientation comes from the parent `Stepper`.
+
+### StepLabel / StepDescription
+
+Forward `HTMLAttributes<HTMLDivElement>`. Their colors follow the parent `Step` state automatically.
+
+## Styling
+
+- Default state: `bg-background-presentation-action-disabled`, gray border, disabled foreground.
+- 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.
+
+## TypeScript Types
+
+```typescript
+import type { VariantProps } from 'class-variance-authority'
+import type { stepperStyles, stepIndicatorStyles } from '@/components/Stepper'
+
+type StepperVariants  = VariantProps<typeof stepperStyles>
+// { orientation?: 'horizontal' | 'vertical' }
+
+type IndicatorVariants = VariantProps<typeof stepIndicatorStyles>
+// { state?: 'pending' | 'active' | 'completed' | 'error'; 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.
+
+## 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.
+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.

package/docs/components/timeline.md

@@ -0,0 +1,248 @@
+---
+title: Timeline
+description: Vertical or horizontal timeline for activity logs, audit trails, and history. Composed of indicator, separator, content, heading, and description parts with five semantic variants.
+component: true
+group: Data Display
+keywords: [timeline, activity, history, audit, log, events, vertical, horizontal]
+---
+
+# Timeline
+
+A composable timeline for activity logs, change history, audit trails, and event sequences. Each item has an indicator, a connecting separator, and a content block. The indicator supports five variants — `default`, `active`, `completed`, `error`, `warning` — each with built-in icons and color tokens.
+
+The component is composed of `Timeline`, `TimelineItem`, `TimelineIndicator`, `TimelineSeparator`, `TimelineConnector`, `TimelineContent`, `TimelineHeading`, and `TimelineDescription`. Unlike [`Stepper`](./stepper.md), Timeline doesn't track an `activeStep` — each item's variant is set explicitly.
+
+## Installation
+
+```bash
+npx torch-glare@latest add Timeline
+```
+
+## Imports
+
+```typescript
+import {
+  Timeline,
+  TimelineItem,
+  TimelineIndicator,
+  TimelineSeparator,
+  TimelineConnector,
+  TimelineContent,
+  TimelineHeading,
+  TimelineDescription,
+} from '@/components/Timeline'
+```
+
+## Basic Usage
+
+```tsx
+import {
+  Timeline,
+  TimelineItem,
+  TimelineIndicator,
+  TimelineSeparator,
+  TimelineConnector,
+  TimelineContent,
+  TimelineHeading,
+  TimelineDescription,
+} from '@/components/Timeline'
+
+export function BasicTimeline() {
+  return (
+    <Timeline>
+      <TimelineItem>
+        <TimelineConnector>
+          <TimelineIndicator variant="completed" />
+          <TimelineSeparator />
+        </TimelineConnector>
+        <TimelineContent>
+          <TimelineHeading>Account created</TimelineHeading>
+          <TimelineDescription>March 5, 2026 · 9:14 AM</TimelineDescription>
+        </TimelineContent>
+      </TimelineItem>
+
+      <TimelineItem>
+        <TimelineConnector>
+          <TimelineIndicator variant="active" />
+          <TimelineSeparator active />
+        </TimelineConnector>
+        <TimelineContent>
+          <TimelineHeading>Email verified</TimelineHeading>
+          <TimelineDescription>March 5, 2026 · 9:32 AM</TimelineDescription>
+        </TimelineContent>
+      </TimelineItem>
+
+      <TimelineItem>
+        <TimelineConnector>
+          <TimelineIndicator variant="default" />
+        </TimelineConnector>
+        <TimelineContent>
+          <TimelineHeading>Profile setup</TimelineHeading>
+          <TimelineDescription>Pending</TimelineDescription>
+        </TimelineContent>
+      </TimelineItem>
+    </Timeline>
+  )
+}
+```
+
+The last `TimelineItem` should typically omit `TimelineSeparator` so the line ends at the final indicator. `TimelineContent` auto-removes its bottom padding on the last item via `group-last/item:pb-0`.
+
+## Examples
+
+### Indicator variants
+
+`completed` renders a check icon, `error` renders a close icon, `warning` renders an alert icon. `default` and `active` render a `6×6` filled dot. Pass `icon` or `children` to override.
+
+```tsx
+<TimelineIndicator variant="default" />
+<TimelineIndicator variant="active" />
+<TimelineIndicator variant="completed" />
+<TimelineIndicator variant="error" />
+<TimelineIndicator variant="warning" />
+<TimelineIndicator variant="active" icon={<i className="ri-flashlight-line" />} />
+```
+
+### Sizes
+
+Indicators support `S` (`22px`), `M` (`28px`, default), and `L` (`34px`).
+
+```tsx
+<TimelineIndicator size="S" variant="completed" />
+<TimelineIndicator size="M" variant="completed" />
+<TimelineIndicator size="L" variant="completed" />
+```
+
+### Horizontal orientation
+
+```tsx
+<Timeline orientation="horizontal">
+  <TimelineItem>
+    <TimelineConnector orientation="horizontal">
+      <TimelineIndicator variant="completed" />
+      <TimelineSeparator orientation="horizontal" active />
+    </TimelineConnector>
+    <TimelineContent>
+      <TimelineHeading>Submitted</TimelineHeading>
+      <TimelineDescription>2:14 PM</TimelineDescription>
+    </TimelineContent>
+  </TimelineItem>
+
+  <TimelineItem>
+    <TimelineConnector orientation="horizontal">
+      <TimelineIndicator variant="active" />
+    </TimelineConnector>
+    <TimelineContent>
+      <TimelineHeading>Reviewing</TimelineHeading>
+      <TimelineDescription>Now</TimelineDescription>
+    </TimelineContent>
+  </TimelineItem>
+</Timeline>
+```
+
+Pass `orientation="horizontal"` on `Timeline`, `TimelineItem`, `TimelineConnector`, and `TimelineSeparator` — the orientation isn't propagated through context.
+
+### Activity log
+
+```tsx
+const events = [
+  { id: 1, variant: 'completed', heading: 'Order placed',    when: 'Mar 5 · 9:14 AM' },
+  { id: 2, variant: 'completed', heading: 'Payment received', when: 'Mar 5 · 9:15 AM' },
+  { id: 3, variant: 'active',    heading: 'Preparing order',  when: 'Mar 5 · 10:02 AM' },
+  { id: 4, variant: 'default',   heading: 'Shipped',          when: 'Pending' },
+  { id: 5, variant: 'default',   heading: 'Delivered',        when: 'Pending' },
+] as const
+
+export function OrderTimeline() {
+  return (
+    <Timeline>
+      {events.map((e, i) => (
+        <TimelineItem key={e.id}>
+          <TimelineConnector>
+            <TimelineIndicator variant={e.variant} />
+            {i < events.length - 1 && (
+              <TimelineSeparator active={e.variant === 'completed' || e.variant === 'active'} />
+            )}
+          </TimelineConnector>
+          <TimelineContent>
+            <TimelineHeading>{e.heading}</TimelineHeading>
+            <TimelineDescription>{e.when}</TimelineDescription>
+          </TimelineContent>
+        </TimelineItem>
+      ))}
+    </Timeline>
+  )
+}
+```
+
+## API Reference
+
+### Timeline
+
+| Prop          | Type                            | Default      | Description                              |
+| ------------- | ------------------------------- | ------------ | ---------------------------------------- |
+| `orientation` | `'vertical' \| 'horizontal'`    | `'vertical'` | Layout direction.                        |
+| `theme`       | `'dark' \| 'light' \| 'default'` | —            | Theme override applied via `data-theme`. |
+
+### TimelineItem
+
+| Prop          | Type                         | Default      | Description                                    |
+| ------------- | ---------------------------- | ------------ | ---------------------------------------------- |
+| `orientation` | `'vertical' \| 'horizontal'` | `'vertical'` | Should match the parent `Timeline`.            |
+
+### TimelineIndicator
+
+| Prop      | Type                                                            | Default     | Description                                                            |
+| --------- | --------------------------------------------------------------- | ----------- | ---------------------------------------------------------------------- |
+| `variant` | `'default' \| 'active' \| 'completed' \| 'error' \| 'warning'` | `'default'` | Visual state. Drives both color tokens and the auto-rendered icon.     |
+| `size`    | `'S' \| 'M' \| 'L'`                                             | `'M'`       | Indicator diameter (`22 / 28 / 34px`).                                 |
+| `icon`    | `ReactNode`                                                     | —           | Custom icon — overrides the variant's default.                         |
+| `children`| `ReactNode`                                                     | —           | Custom content — used when `icon` is not set.                          |
+
+### TimelineSeparator
+
+| Prop          | Type                         | Default      | Description                                                |
+| ------------- | ---------------------------- | ------------ | ---------------------------------------------------------- |
+| `orientation` | `'vertical' \| 'horizontal'` | `'vertical'` | Line direction.                                            |
+| `active`      | `boolean`                    | `false`      | Render the line in focus blue (use after completed steps). |
+
+### TimelineConnector
+
+Wraps the indicator and separator. Pass `orientation` to switch between column (vertical) and row (horizontal) layout.
+
+### TimelineContent / TimelineHeading / TimelineDescription
+
+Forward `HTMLAttributes<HTMLDivElement>`. `TimelineContent` removes its bottom padding on the last item; `TimelineHeading` uses `typography-body-medium-medium`; `TimelineDescription` uses `typography-body-small-regular` with secondary text color.
+
+## Styling
+
+- Indicators use the standard state token set: `state-information-primary`, `state-success-primary`, `state-negative-primary`, `state-warning-primary`.
+- Separator: `1px` neutral line by default, focus-blue when `active`.
+- Vertical content: `pb-6 pt-[2px]` — gives breathing room between items.
+- Horizontal content: aligned under the indicator with `gap-3`.
+
+## TypeScript Types
+
+```typescript
+import type { VariantProps } from 'class-variance-authority'
+import type { timelineStyles, indicatorStyles, separatorStyles } from '@/components/Timeline'
+
+type TimelineVariants  = VariantProps<typeof timelineStyles>
+type IndicatorVariants = VariantProps<typeof indicatorStyles>
+// { variant?: 'default' | 'active' | 'completed' | 'error' | 'warning'; size?: 'S' | 'M' | 'L' }
+type SeparatorVariants = VariantProps<typeof separatorStyles>
+// { orientation?: 'vertical' | 'horizontal'; active?: boolean }
+```
+
+## Accessibility
+
+- Use `<ol>` semantics when the order matters (audit logs, order tracking) — wrap `Timeline` in `<ol>` and each `TimelineItem` in `<li>`.
+- Variants like `error` and `warning` should be paired with text in `TimelineDescription` — color is never the sole signal.
+- Decorative icons inside indicators don't need labels; the heading carries the meaning.
+
+## Best Practices
+
+1. Reach for Timeline when items are events at points in time. Reach for Stepper when items are tasks the user has to complete.
+2. Always omit `TimelineSeparator` on the last item so the line doesn't dangle.
+3. Use `active` on the separator after a `completed` indicator to color the connecting segment blue — it visually links progress.
+4. Cap visible items at 5–7 in vertical mode; collapse the rest behind a "show earlier" affordance for long histories.

package/docs/llms-manifest.json

@@ -2,7 +2,7 @@
   "library": {
     "name": "torch-glare",
     "version": "2.1.1",
-    "description": "A comprehensive React component library with 55+ modern UI components",
+    "description": "A comprehensive React component library with 60+ modern UI components",
     "license": "MIT",
     "homepage": "https://glare.torchcorp.com",
     "repository": "https://github.com/torch-corp/torch-glare"
@@ -19,9 +19,9 @@
     }
   },
   "statistics": {
-    "totalComponents": 55,
-    "documentedComponents": 2,
-    "coverage": 3.6,
+    "totalComponents": 65,
+    "documentedComponents": 62,
+    "coverage": 95.4,
     "totalHooks": 4,
     "totalProviders": 1,
     "totalPlugins": 4,
@@ -29,106 +29,113 @@
   },
   "components": {
     "buttons": {
-      "count": 4,
+      "count": 6,
       "items": [
         { "name": "Button", "version": "1.1.15", "documented": true },
-        { "name": "ActionButton", "version": "1.1.15", "documented": false },
-        { "name": "LinkButton", "version": "1.1.15", "documented": false },
-        { "name": "LoginButton", "version": "1.1.15", "documented": false }
+        { "name": "ActionButton", "version": "1.1.15", "documented": true },
+        { "name": "LinkButton", "version": "1.1.15", "documented": true },
+        { "name": "LoginButton", "version": "1.1.15", "documented": true },
+        { "name": "ButtonGroup", "version": "1.1.15", "documented": true },
+        { "name": "ToggleButton", "version": "1.1.15", "documented": true }
       ]
     },
     "forms": {
-      "count": 16,
+      "count": 18,
       "items": [
-        { "name": "Input", "version": "1.1.15", "documented": false },
-        { "name": "InputField", "version": "1.1.15", "documented": false },
-        { "name": "Textarea", "version": "1.1.15", "documented": false },
-        { "name": "Checkbox", "version": "1.1.15", "documented": false },
-        { "name": "LabeledCheckBox", "version": "1.1.15", "documented": false },
-        { "name": "Radio", "version": "1.1.15", "documented": false },
-        { "name": "LabeledRadio", "version": "1.1.15", "documented": false },
-        { "name": "RadioCard", "version": "1.1.15", "documented": false },
-        { "name": "Select", "version": "1.1.15", "documented": false },
-        { "name": "SimpleSelect", "version": "1.1.15", "documented": false },
-        { "name": "Switch", "version": "1.1.15", "documented": false },
-        { "name": "Toggle", "version": "1.1.15", "documented": false },
-        { "name": "SearchField", "version": "1.1.15", "documented": false },
-        { "name": "InputOTP", "version": "1.1.15", "documented": false },
-        { "name": "Form", "version": "1.1.15", "documented": false },
-        { "name": "TabFormItem", "version": "1.1.15", "documented": false }
+        { "name": "Input", "version": "1.1.15", "documented": true },
+        { "name": "InputField", "version": "1.1.15", "documented": true },
+        { "name": "Textarea", "version": "1.1.15", "documented": true },
+        { "name": "Checkbox", "version": "1.1.15", "documented": true },
+        { "name": "LabeledCheckBox", "version": "1.1.15", "documented": true },
+        { "name": "Radio", "version": "1.1.15", "documented": true },
+        { "name": "LabeledRadio", "version": "1.1.15", "documented": true },
+        { "name": "RadioCard", "version": "1.1.15", "documented": true },
+        { "name": "Select", "version": "1.1.15", "documented": true },
+        { "name": "SimpleSelect", "version": "1.1.15", "documented": true },
+        { "name": "Switch", "version": "1.1.15", "documented": true },
+        { "name": "Toggle", "version": "1.1.15", "documented": true },
+        { "name": "SearchField", "version": "1.1.15", "documented": true },
+        { "name": "InputOTP", "version": "1.1.15", "documented": true },
+        { "name": "Form", "version": "1.1.15", "documented": true },
+        { "name": "TabFormItem", "version": "1.1.15", "documented": true },
+        { "name": "FormStepper", "version": "2.1.1", "documented": true },
+        { "name": "Stepper", "version": "2.1.1", "documented": true }
       ]
     },
     "layout": {
       "count": 7,
       "items": [
-        { "name": "Card", "version": "1.1.15", "documented": false },
-        { "name": "CNLayout", "version": "1.1.15", "documented": false },
-        { "name": "FieldSection", "version": "1.1.15", "documented": false },
+        { "name": "Card", "version": "1.1.15", "documented": true },
+        { "name": "CNLayout", "version": "1.1.15", "documented": true },
+        { "name": "FieldSection", "version": "1.1.15", "documented": true },
         { "name": "SectionBlock", "version": "1.1.22", "documented": true },
-        { "name": "TreeSubLayout", "version": "1.1.15", "documented": false },
-        { "name": "Divider", "version": "1.1.15", "documented": false },
-        { "name": "ScrollArea", "version": "1.1.15", "documented": false }
+        { "name": "TreeSubLayout", "version": "1.1.15", "documented": true },
+        { "name": "Divider", "version": "1.1.15", "documented": true },
+        { "name": "ScrollArea", "version": "1.1.15", "documented": true }
       ]
     },
     "dataDisplay": {
-      "count": 8,
+      "count": 10,
       "items": [
         { "name": "Badge", "version": "1.1.15", "documented": true },
-        { "name": "BadgeField", "version": "1.1.15", "documented": false },
-        { "name": "CountBadge", "version": "1.1.15", "documented": false },
-        { "name": "Avatar", "version": "1.1.15", "documented": false },
-        { "name": "Table", "version": "1.1.15", "documented": false },
-        { "name": "DataTable", "version": "1.1.15", "documented": false },
-        { "name": "TreeDropDown", "version": "1.1.15", "documented": false },
-        { "name": "Skeleton", "version": "1.1.15", "documented": false }
+        { "name": "BadgeField", "version": "1.1.15", "documented": true },
+        { "name": "CountBadge", "version": "1.1.15", "documented": true },
+        { "name": "Avatar", "version": "1.1.15", "documented": true },
+        { "name": "Table", "version": "1.1.15", "documented": true },
+        { "name": "DataTable", "version": "1.1.15", "documented": true },
+        { "name": "TreeDropDown", "version": "1.1.15", "documented": true },
+        { "name": "Skeleton", "version": "1.1.15", "documented": true },
+        { "name": "Timeline", "version": "2.1.1", "documented": true },
+        { "name": "Breadcrumb", "version": "1.1.15", "documented": true }
       ]
     },
     "overlays": {
       "count": 7,
       "items": [
-        { "name": "Dialog", "version": "1.1.15", "documented": false },
-        { "name": "AlertDialog", "version": "1.1.15", "documented": false },
-        { "name": "Drawer", "version": "1.1.15", "documented": false },
-        { "name": "Popover", "version": "1.1.15", "documented": false },
-        { "name": "Tooltip", "version": "1.1.15", "documented": false },
-        { "name": "DropdownMenu", "version": "1.1.15", "documented": false },
-        { "name": "ProfileMenu", "version": "1.1.15", "documented": false }
+        { "name": "Dialog", "version": "1.1.15", "documented": true },
+        { "name": "AlertDialog", "version": "1.1.15", "documented": true },
+        { "name": "Drawer", "version": "1.1.15", "documented": true },
+        { "name": "Popover", "version": "1.1.15", "documented": true },
+        { "name": "Tooltip", "version": "1.1.15", "documented": true },
+        { "name": "DropdownMenu", "version": "1.1.15", "documented": true },
+        { "name": "ProfileMenu", "version": "1.1.15", "documented": true }
       ]
     },
     "dateTime": {
       "count": 4,
       "items": [
-        { "name": "Calendar", "version": "1.1.15", "documented": false },
-        { "name": "DatePicker", "version": "1.1.15", "documented": false },
-        { "name": "SlideDatePicker", "version": "1.1.15", "documented": false },
+        { "name": "Calendar", "version": "1.1.15", "documented": true },
+        { "name": "DatePicker", "version": "1.1.15", "documented": true },
+        { "name": "SlideDatePicker", "version": "1.1.15", "documented": true },
         { "name": "IosDatePicker", "version": "experimental", "documented": false }
       ]
     },
     "feedback": {
       "count": 4,
       "items": [
-        { "name": "Toast", "version": "1.1.15", "documented": false },
-        { "name": "SpinLoading", "version": "1.1.15", "documented": false },
-        { "name": "PasswordLevel", "version": "1.1.15", "documented": false },
-        { "name": "FieldHint", "version": "1.1.15", "documented": false }
+        { "name": "Toast", "version": "1.1.15", "documented": true },
+        { "name": "SpinLoading", "version": "1.1.15", "documented": true },
+        { "name": "PasswordLevel", "version": "1.1.15", "documented": true },
+        { "name": "FieldHint", "version": "1.1.15", "documented": true }
       ]
     },
     "labels": {
       "count": 4,
       "items": [
-        { "name": "Label", "version": "1.1.15", "documented": false },
-        { "name": "LabelField", "version": "1.1.15", "documented": false },
-        { "name": "InnerLabelField", "version": "1.1.15", "documented": false },
-        { "name": "TransparentLabel", "version": "1.1.15", "documented": false }
+        { "name": "Label", "version": "1.1.15", "documented": true },
+        { "name": "LabelField", "version": "1.1.15", "documented": true },
+        { "name": "InnerLabelField", "version": "1.1.15", "documented": true },
+        { "name": "TransparentLabel", "version": "1.1.15", "documented": true }
       ]
     },
     "advanced": {
-      "count": 4,
+      "count": 5,
       "items": [
         { "name": "Charts", "version": "experimental", "documented": false },
         { "name": "Command", "version": "experimental", "documented": false },
-        { "name": "ImageAttachment", "version": "1.1.15", "documented": false },
-        { "name": "ActionsGroup", "version": "1.1.15", "documented": false }
+        { "name": "ImageAttachment", "version": "1.1.15", "documented": true },
+        { "name": "ActionsGroup", "version": "1.1.15", "documented": true },
+        { "name": "TextEditor", "version": "1.1.15", "documented": true }
       ]
     }
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "torch-glare-mcp",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "MCP server for TORCH Glare component library — gives AI assistants full access to component docs, API references, code examples, and design system info",
   "type": "module",
   "main": "dist/index.js",
@@ -12,6 +12,13 @@
     "docs",
     "README.md"
   ],
+  "scripts": {
+    "build": "tsc",
+    "start": "node dist/index.js",
+    "dev": "tsc --watch",
+    "prebuild": "node -e \"const fs=require('fs');if(!fs.existsSync('docs')){fs.mkdirSync('docs',{recursive:true});['components','reference','tutorials','how-to'].forEach(d=>{const src='../docs/'+d;const dst='docs/'+d;if(fs.existsSync(src)){fs.cpSync(src,dst,{recursive:true})}});if(fs.existsSync('../llms-manifest.json')){fs.cpSync('../llms-manifest.json','docs/llms-manifest.json')}}\"",
+    "prepublishOnly": "npm run build"
+  },
   "keywords": [
     "mcp",
     "model-context-protocol",
@@ -34,11 +41,5 @@
   "devDependencies": {
     "@types/node": "^22.14.0",
     "typescript": "^5.8.0"
-  },
-  "scripts": {
-    "build": "tsc",
-    "start": "node dist/index.js",
-    "dev": "tsc --watch",
-    "prebuild": "node -e \"const fs=require('fs');if(!fs.existsSync('docs')){fs.mkdirSync('docs',{recursive:true});['components','reference','tutorials','how-to'].forEach(d=>{const src='../docs/'+d;const dst='docs/'+d;if(fs.existsSync(src)){fs.cpSync(src,dst,{recursive:true})}});if(fs.existsSync('../llms-manifest.json')){fs.cpSync('../llms-manifest.json','docs/llms-manifest.json')}}\""
   }
-}
+}