@dnotrever2/super-kit 0.1.26 → 0.1.28

package/README.md

@@ -23,7 +23,19 @@ npm install react react-dom
 Import the global stylesheet once at your app's entry point. It provides all design tokens, base resets, and scrollbar utilities:
 
 ```ts
-import "@dnotrever2/super-kit/dist/styles/index.css";
+import "@dnotrever2/super-kit/styles.css";
+```
+
+To override colors or tokens in the consuming app, define the same CSS variables after the SuperKit stylesheet:
+
+```css
+@import "@dnotrever2/super-kit/styles.css";
+
+:root {
+  --color-blue-1: #2563eb;
+  --color-blue-1-hover: #1d4ed8;
+  --color-blue-1-active: #1e40af;
+}
 ```
 
 > CSS modules are injected into the JS bundle by Vite — there is no separate `.css` output per component. Only the global stylesheet needs a manual import.
@@ -49,7 +61,7 @@ import { Accordion, Badge } from "@dnotrever2/super-kit";
     },
     {
       value: "limits",
-      title: <>Usage limits <Badge variant="warning" pill>3</Badge></>,
+      title: <>Usage limits <Badge variant="yellow2" pill>3</Badge></>,
       content: "Requests are throttled when the workspace reaches its quota."
     }
   ]}
@@ -127,18 +139,18 @@ Status labels and tags.
 ```tsx
 import { Badge } from "@dnotrever2/super-kit";
 
-<Badge variant="success">Deployed</Badge>
-<Badge variant="danger" pill>Failed</Badge>
-<Badge variant="danger" coloredText>Failed</Badge>
-<Badge variant="danger" outline>Failed</Badge>
-<Badge variant="primary" label labelDirection="left">New</Badge>
-<Badge variant="success" indicator aria-label="Online" />
+<Badge variant="green2">Deployed</Badge>
+<Badge variant="red2" pill>Failed</Badge>
+<Badge variant="red2" coloredText>Failed</Badge>
+<Badge variant="red2" outline>Failed</Badge>
+<Badge variant="blue2" label labelDirection="left">New</Badge>
+<Badge variant="green2" indicator aria-label="Online" />
 <Badge dismissable onDismiss={() => {}}>api-gateway</Badge>
 ```
 
 | Prop          | Type                                                                                                                            | Default         |
 | ------------- | ------------------------------------------------------------------------------------------------------------------------------- | --------------- |
-| `variant`     | `"primary" \| "secondary" \| "ghost" \| "danger" \| "success" \| "warning"`                                                     | `"secondary"`   |
+| `variant`     | `blue/green/yellow/red/gray` + `1/2/3`, optional `Soft` suffix, e.g. `"blue2Soft"`                                               | `"gray2"`       |
 | `icon`        | `ReactNode`                                                                                                                     | —               |
 | `pill`        | `boolean`                                                                                                                       | `false`         |
 | `outline`     | `boolean`                                                                                                                       | `false`         |
@@ -149,7 +161,7 @@ import { Badge } from "@dnotrever2/super-kit";
 | `dismissable` | `boolean`                                                                                                                       | `false`         |
 | `onDismiss`   | `() => void`                                                                                                                    | —               |
 
-Badge variants match Button variants. Normal semantic badges use a stronger background with white text. Use `coloredText` when the text should follow the badge variant color. Outline badges use the variant color for the text. Use `pill` for the rounded shape. Use `indicator` for a small status dot; provide an accessible label with `aria-label`.
+Badge variants match Button variants. Tones run from `1` lighter, `2` medium, and `3` darker. Use `coloredText` when the text should follow the badge variant color on a soft background. Outline badges use the variant color for the text. Use `pill` for the rounded shape. Use `indicator` for a small status dot; provide an accessible label with `aria-label`.
 
 Badge also accepts native `<span>` attributes, including `className`, `style`, `id`, `title`, and `aria-*`. For one-off visual tweaks, use `style` or `className`; the internal CSS variables `--badge-bg`, `--badge-fg`, and `--badge-border` can be overridden for custom background, text, and border colors.
 
@@ -176,6 +188,7 @@ import { Breadcrumb } from "@dnotrever2/super-kit";
 | `items`     | `BreadcrumbItem[]` | required       |
 | `separator` | `ReactNode`        | chevron icon   |
 | `label`     | `string`           | `"Breadcrumb"` |
+| `colorCurrent` | `boolean`       | `false`        |
 
 **BreadcrumbItem fields**
 
@@ -195,36 +208,38 @@ The last item is treated as the current page unless `current` is set explicitly.
 
 ### Button
 
-Standard action button with semantic variants.
+Standard action button with muted color-scale variants.
 
 ```tsx
 import { Button, Spinner } from "@dnotrever2/super-kit";
 
-<Button variant="primary" onClick={deploy}>Deploy</Button>
-<Button variant="success" icon={<CheckIcon />}>Approve</Button>
-<Button variant="danger">Delete</Button>
-<Button variant="danger" coloredText>Delete</Button>
-<Button variant="primary" outline>Configure</Button>
-<Button variant="primary" transparent>Deploy</Button>
-<Button variant="primary" rounded>Deploy</Button>
-<Button variant="ghost" icon={<SettingsIcon />} aria-label="Settings" />
-<Button variant="primary" disabled icon={<Spinner size="sm" onAccent />}>
+<Button variant="blue2" onClick={deploy}>Deploy</Button>
+<Button variant="green2" icon={<CheckIcon />}>Approve</Button>
+<Button variant="red2">Delete</Button>
+<Button variant="red2Soft">Delete</Button>
+<Button variant="blue2" outline>Configure</Button>
+<Button variant="blue2" transparent>Deploy</Button>
+<Button variant="blue2" rounded>Deploy</Button>
+<Button variant="gray2Soft" icon={<SettingsIcon />} aria-label="Settings" />
+<Button variant="blue2" disabled icon={<Spinner size="sm" onColor />}>
   Loading...
 </Button>
 ```
 
-| Prop       | Type                                                                        | Default       |
-| ---------- | --------------------------------------------------------------------------- | ------------- |
-| `variant`  | `"primary" \| "secondary" \| "ghost" \| "danger" \| "success" \| "warning"` | `"secondary"` |
-| `size`     | `"sm" \| "md" \| "lg"`                                                      | `"md"`        |
-| `icon`     | `ReactNode`                                                                 | —             |
-| `outline`  | `boolean`                                                                   | `false`       |
-| `rounded`  | `boolean`                                                                   | `false`       |
-| `coloredText` | `boolean`                                                                | `false`       |
-| `transparent` | `boolean`                                                              | `false`       |
-| `disabled` | `boolean`                                                                   | `false`       |
-
-Normal semantic buttons use a stronger background with white text. Use `coloredText` when the text should follow the button variant color. Use `transparent` when the button should start without a background and reveal the variant background on hover. Outline buttons always use the variant color for the text.
+| Prop       | Type                                                                                 | Default   |
+| ---------- | ------------------------------------------------------------------------------------ | --------- |
+| `variant`  | `blue/green/yellow/red/gray` + `1/2/3`, optional `Soft` suffix, e.g. `"blue2Soft"`    | `"gray2"` |
+| `size`     | `"sm" \| "md" \| "lg"`                                                               | `"md"`    |
+| `icon`     | `ReactNode`                                                                          | —         |
+| `outline`  | `boolean`                                                                            | `false`   |
+| `rounded`  | `boolean`                                                                            | `false`   |
+| `coloredText` | `boolean`                                                                         | `false`   |
+| `transparent` | `boolean`                                                                       | `false`   |
+| `disabled` | `boolean`                                                                            | `false`   |
+
+Tones run from `1` lighter, `2` medium, and `3` darker. Every tone has a `Soft` variant, and the same soft color is reused by disabled and subdued appearances.
+
+Normal buttons use the stronger tone background. Use `coloredText` when the text should follow the button variant color on a soft background. Use `transparent` when the button should start without a background and reveal the variant background on hover. Outline buttons use the variant color for the text and border.
 To create a loading button, pass a `Spinner` as `icon`, use text such as `"Loading..."`, and set `disabled` to block interaction.
 To create an icon button, pass only `icon` and no text. Provide an accessible label with `aria-label`.
 
@@ -394,23 +409,23 @@ Text link with variants aligned to Button and Badge colors.
 ```tsx
 import { Link } from "@dnotrever2/super-kit";
 
-<Link href="/docs" variant="primary">Documentation</Link>
-<Link href="/status" variant="success" underlined>Status</Link>
+<Link href="/docs" variant="blue2">Documentation</Link>
+<Link href="/status" variant="green2" underlined>Status</Link>
 <Link href="https://example.com" target="_blank" noreferrer>
   External docs
 </Link>
-<Link href="/danger-zone" variant="danger" opacity={0.72}>
+<Link href="/danger-zone" variant="red2" opacity={0.72}>
   Danger zone
 </Link>
 <Link href="/settings" disabled>Settings</Link>
 ```
 
-| Prop          | Type                                                                        | Default     |
-| ------------- | --------------------------------------------------------------------------- | ----------- |
-| `variant`     | `"primary" \| "secondary" \| "ghost" \| "danger" \| "success" \| "warning"` | `"primary"` |
-| `href`        | `string`                                                                    | —           |
-| `target`      | `HTMLAttributeAnchorTarget`                                                 | —           |
-| `underlined`  | `boolean`                                                                   | `false`     |
+| Prop          | Type                                                                                   | Default   |
+| ------------- | -------------------------------------------------------------------------------------- | --------- |
+| `variant`     | `blue/green/yellow/red/gray` + `1/2/3`, optional `Soft` suffix, e.g. `"blue2Soft"`      | `"blue2"` |
+| `href`        | `string`                                                                               | —         |
+| `target`      | `HTMLAttributeAnchorTarget`                                                            | —         |
+| `underlined`  | `boolean`                                                                              | `false`   |
 | `opacity`     | `number`                                                                    | `1`         |
 | `disabled`    | `boolean`                                                                   | `false`     |
 | `noreferrer`  | `boolean`                                                                   | `false`     |
@@ -429,6 +444,7 @@ Form selection primitives: Checkbox, Radio, and Switch.
 import { Checkbox, Radio, RadioGroup, Switch } from "@dnotrever2/super-kit";
 
 <Checkbox label="Auto-deploy" checked={checked} onChange={setChecked} />
+<Checkbox label="Auto-deploy" variant="green2" checked={checked} onChange={setChecked} />
 <Checkbox label="Partial" indeterminate />
 <Checkbox label="Required" isInvalid />
 <Checkbox label="Disabled" disabled />
@@ -439,6 +455,7 @@ import { Checkbox, Radio, RadioGroup, Switch } from "@dnotrever2/super-kit";
 </RadioGroup>
 
 <Switch label="SSO required" checked={on} onChange={setOn} />
+<Switch label="SSO required" variant="yellow2" checked={on} onChange={setOn} />
 <Switch label="SSO required" thinTrack checked={on} onChange={setOn} />
 ```
 
@@ -447,6 +464,7 @@ import { Checkbox, Radio, RadioGroup, Switch } from "@dnotrever2/super-kit";
 | Prop             | Type                         |
 | ---------------- | ---------------------------- |
 | `label`          | `ReactNode`                  |
+| `variant`        | `ColorVariant`               |
 | `checked`        | `boolean`                    |
 | `defaultChecked` | `boolean`                    |
 | `indeterminate`  | `boolean` (Checkbox only)    |
@@ -460,6 +478,7 @@ import { Checkbox, Radio, RadioGroup, Switch } from "@dnotrever2/super-kit";
 | Prop       | Type                      |
 | ---------- | ------------------------- |
 | `label`    | `ReactNode`               |
+| `variant`  | `ColorVariant`            |
 | `value`    | `string`                  |
 | `checked`  | `boolean`                 |
 | `isInvalid` | `boolean`                |
@@ -566,7 +585,7 @@ Anchored floating panel, controlled or uncontrolled.
 import { Popover } from "@dnotrever2/super-kit";
 
 <Popover
-  trigger={<Button variant="secondary">Settings</Button>}
+  trigger={<Button variant="gray2">Settings</Button>}
   title="Connection"
   side="bottom-start"
   shadow
@@ -602,15 +621,15 @@ import { Progress } from "@dnotrever2/super-kit";
 <Progress value={64} label="Deploy progress" showValue />
 <Progress shape="circle" value={72} label="Deploy" />
 <Progress indeterminate label="Publishing" showValue />
-<Progress value={82} variant="success" size="lg" />
+<Progress value={82} variant="green2" size="lg" />
 ```
 
-| Prop            | Type                                                              | Default    |
-| --------------- | ----------------------------------------------------------------- | ---------- |
-| `value`         | `number`                                                          | —          |
-| `max`           | `number`                                                          | `100`      |
-| `variant`       | `"accent" \| "success" \| "warning" \| "danger" \| "info" \| "neutral"` | `"accent"` |
-| `size`          | `"sm" \| "md" \| "lg"`                                            | `"md"`     |
+| Prop            | Type                                                                                   | Default   |
+| --------------- | -------------------------------------------------------------------------------------- | --------- |
+| `value`         | `number`                                                                               | —         |
+| `max`           | `number`                                                                               | `100`     |
+| `variant`       | `blue/green/yellow/red/gray` + `1/2/3`, optional `Soft` suffix, e.g. `"blue2Soft"`      | `"blue2"` |
+| `size`          | `"sm" \| "md" \| "lg"`                                                                 | `"md"`    |
 | `shape`         | `"bar" \| "circle"`                                               | `"bar"`    |
 | `label`         | `ReactNode`                                                       | —          |
 | `valueLabel`    | `string`                                                          | —          |
@@ -636,7 +655,7 @@ import { PushButton, PushButtonGroup } from "@dnotrever2/super-kit";
   <PushButton on={view === "list"} onClick={() => setView("list")}>List</PushButton>
   <PushButton
     on={view === "grid"}
-    badge={<Badge variant="primary" pill>2</Badge>}
+    badge={<Badge variant="blue2" pill>2</Badge>}
     onClick={() => setView("grid")}
   >
     Grid
@@ -767,7 +786,7 @@ import { Badge, Tabs } from "@dnotrever2/super-kit";
     { value: "overview", label: "Overview", content: <Overview /> },
     {
       value: "deployments",
-      label: <>Deployments <Badge variant="primary" pill>4</Badge></>,
+      label: <>Deployments <Badge variant="blue2" pill>4</Badge></>,
       content: <Deployments />
     },
     { value: "settings", label: "Settings", content: <Settings /> }
@@ -838,25 +857,26 @@ Loading indicator in three styles.
 ```tsx
 import { Spinner } from "@dnotrever2/super-kit";
 
-<Spinner variant="ring" size="md" />
-<Spinner variant="dots" />
-<Spinner variant="bar" />
+<Spinner type="ring" variant="blue3" size="md" />
+<Spinner type="dots" variant="green2" />
+<Spinner type="bar" variant="yellow2" />
 
-// Inside a primary button (white on accent background)
-<Button variant="primary" disabled icon={<Spinner size="sm" onAccent />}>
+// Inside a blue button (light spinner on solid color background)
+<Button variant="blue2" disabled icon={<Spinner size="sm" onColor />}>
   Deploying
 </Button>
 
-// Subdued — when the accent blue is too visually dominant
+// Subdued — when the selected variant is too visually dominant
 <Spinner muted />
 ```
 
 | Prop       | Type                        | Default                                                   |
 | ---------- | --------------------------- | --------------------------------------------------------- |
-| `variant`  | `"ring" \| "dots" \| "bar"` | `"ring"`                                                  |
+| `type`     | `"ring" \| "dots" \| "bar"` | `"ring"`                                                  |
+| `variant`  | `ColorVariant`              | `"blue3"`                                                 |
 | `size`     | `"sm" \| "md" \| "lg"`      | `"md"` — ring only                                        |
-| `muted`    | `boolean`                   | `false` — gray arc instead of accent blue                 |
-| `onAccent` | `boolean`                   | `false` — white arc for use on accent-colored backgrounds |
+| `muted`    | `boolean`                   | `false` — gray animation instead of the selected variant  |
+| `onColor`  | `boolean`                   | `false` — white arc for use on solid color backgrounds    |
 
 ---
 
@@ -873,11 +893,12 @@ const items = [
   { label: "Step 3", description: "Publish the release" }
 ];
 
-<Steps items={items} currentStep={2} />
+<Steps items={items} currentStep={2} variant="blue3" />
 
 <Steps
   items={items}
-  variant="arrow"
+  type="arrow"
+  variant="green2"
   currentStep={2}
   showNumbers={false}
 />
@@ -887,7 +908,8 @@ const items = [
 | --------------- | ---------------------------- | ------------ |
 | `items`         | `StepItem[]`                 | required     |
 | `currentStep`   | `number`                     | `1`          |
-| `variant`       | `"line" \| "arrow"`          | `"line"`     |
+| `type`          | `"line" \| "arrow"`          | `"line"`     |
+| `variant`       | `ColorVariant`               | `"blue3"`    |
 | `size`          | `"sm" \| "md" \| "lg"`      | `"md"`       |
 | `clickable`     | `boolean`                    | `false`      |
 | `showNumbers`   | `boolean`                    | `true`       |
@@ -972,7 +994,7 @@ function DeployButton() {
 
 toast({
   variant: "ok",
-  title: <>Deployed <Badge variant="success" pill>live</Badge></>,
+  title: <>Deployed <Badge variant="green2" pill>live</Badge></>,
   message: <span style={{ color: "var(--fg-1)", fontSize: 13, fontWeight: 600 }}>v2.4.1 is live</span>
 });
 
@@ -1031,19 +1053,19 @@ Hover/focus tooltip around a child element.
 import { Tooltip } from "@dnotrever2/super-kit";
 
 <Tooltip content="Deploy to production" side="top">
-  <Button variant="primary">Deploy</Button>
+  <Button variant="blue2">Deploy</Button>
 </Tooltip>
 
 <Tooltip content="No delay" delay={0}>
-  <Button variant="primary">Deploy</Button>
+  <Button variant="blue2">Deploy</Button>
 </Tooltip>
 
 <Tooltip content="Fixed top" side="top" dynamic={false}>
-  <Button variant="primary">Deploy</Button>
+  <Button variant="blue2">Deploy</Button>
 </Tooltip>
 
 <Tooltip content="Cursor hint" cursor>
-  <Button variant="primary">Hover me</Button>
+  <Button variant="blue2">Hover me</Button>
 </Tooltip>
 ```
 
@@ -1077,6 +1099,21 @@ All tokens are CSS custom properties defined in `src/styles/index.css` and avail
 | `--bg-2` | `#1f242c` — hover state          |
 | `--bg-3` | `#2a2f38` — popover / selected   |
 
+### App Surfaces
+
+| Token                              | Value       |
+| ---------------------------------- | ----------- |
+| `--surface-topbar`                 | `#253047`   |
+| `--surface-sidebar`                | `#1b2838`   |
+| `--surface-sidebar-hover`          | `#253044`   |
+| `--surface-sidebar-selected`       | `#303c50`   |
+| `--surface-sidebar-selected-hover` | `#3d4a60`   |
+| `--surface-content`                | `#2c3b52`   |
+| `--surface-modal`                  | `#242d3d`   |
+| `--surface-modal-dialog`           | `#2a3345`   |
+
+`Modal` uses `--surface-modal` by default. Apps can use `--surface-modal-dialog` in their own dialog class when they need the dialog-specific background.
+
 ### Foreground
 
 | Token            | Value                         |
@@ -1085,19 +1122,23 @@ All tokens are CSS custom properties defined in `src/styles/index.css` and avail
 | `--fg-2`         | `#aab2bd` — secondary text    |
 | `--fg-3`         | `#6b7280` — muted / labels    |
 | `--fg-4`         | `#4a505a` — placeholder       |
-| `--fg-on-accent` | `#ffffff` — text on accent bg |
-
-### Accent & semantic
-
-| Token                          |                        |
-| ------------------------------ | ---------------------- |
-| `--accent`                     | Blue `#416fa8`         |
-| `--accent-hover`               | `#507fb9`              |
-| `--accent-soft`                | `rgba(65,111,168,.14)` |
-| `--accent-ring`                | `rgba(65,111,168,.35)` |
-| `--success` / `--success-soft` | Green `#3ecf8e`        |
-| `--warning` / `--warning-soft` | Yellow `#facc15`       |
-| `--danger` / `--danger-soft`   | Red `#f0556a`          |
+| `--fg-disabled`  | disabled foreground           |
+| `--fg-on-color` | `#ffffff` — text on solid color bg |
+
+### Color Scale
+
+Buttons, badges, links, and progress variants use the global color scale tokens:
+
+| Token pattern | Purpose |
+| ------------- | ------- |
+| `--color-{blue|green|yellow|red|gray}-{1|2|3}` | Solid tone |
+| `--color-{color}-{tone}-hover` / `-active` | Solid interaction states |
+| `--color-{color}-{tone}-fg` | Text on solid tone |
+| `--color-{color}-{tone}-soft` | Soft background |
+| `--color-{color}-{tone}-soft-hover` / `-soft-active` | Soft interaction states |
+| `--color-{color}-{tone}-soft-fg` | Text/icon color for soft usage |
+| `--color-{color}-{tone}-outline` | Outline border |
+| `--color-{color}-{tone}-link-hover` | Link hover color |
 
 ### Typography
 

package/dist/Badge/Badge.d.ts

@@ -1,5 +1,6 @@
 import { HTMLAttributes, ReactNode } from 'react';
-export type BadgeVariant = "primary" | "secondary" | "ghost" | "danger" | "success" | "warning";
+import { ColorVariant } from '../types';
+export type BadgeVariant = ColorVariant;
 export type BadgeProps = HTMLAttributes<HTMLSpanElement> & {
     variant?: BadgeVariant;
     icon?: ReactNode;

package/dist/Breadcrumb/Breadcrumb.d.ts

@@ -12,8 +12,9 @@ export type BreadcrumbProps = HTMLAttributes<HTMLElement> & {
     items: BreadcrumbItem[];
     separator?: ReactNode;
     label?: string;
+    colorCurrent?: boolean;
 };
-export declare function Breadcrumb({ items, separator, label, className, ...props }: BreadcrumbProps): import("react/jsx-runtime").JSX.Element;
+export declare function Breadcrumb({ items, separator, label, colorCurrent, className, ...props }: BreadcrumbProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace Breadcrumb {
     var displayName: string;
 }

package/dist/Button/Button.d.ts

@@ -1,5 +1,8 @@
 import { ButtonHTMLAttributes, ReactNode } from 'react';
-export type ButtonVariant = "primary" | "secondary" | "ghost" | "danger" | "success" | "warning";
+import { ColorName, ColorTone, ColorVariant } from '../types';
+export type ButtonColor = ColorName;
+export type ButtonTone = ColorTone;
+export type ButtonVariant = ColorVariant;
 export type ButtonSize = "sm" | "md" | "lg";
 export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
     variant?: ButtonVariant;

package/dist/Link/Link.d.ts

@@ -1,5 +1,6 @@
 import { AnchorHTMLAttributes, ReactNode } from 'react';
-export type LinkVariant = "primary" | "secondary" | "ghost" | "danger" | "success" | "warning";
+import { ColorVariant } from '../types';
+export type LinkVariant = ColorVariant;
 export type LinkProps = Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "aria-disabled"> & {
     variant?: LinkVariant;
     underlined?: boolean;

package/dist/Markers/Markers.d.ts

@@ -1,23 +1,27 @@
 import { HTMLAttributes, InputHTMLAttributes, ReactNode } from 'react';
+import { ColorVariant } from '../types';
+export type MarkerVariant = ColorVariant;
 export type CheckboxProps = Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "onChange"> & {
     label?: ReactNode;
+    variant?: MarkerVariant;
     checked?: boolean;
     defaultChecked?: boolean;
     indeterminate?: boolean;
     isInvalid?: boolean;
     onChange?: (checked: boolean) => void;
 };
-export declare function Checkbox({ label, checked, defaultChecked, indeterminate, isInvalid, disabled, onChange, className, ...props }: CheckboxProps): import("react/jsx-runtime").JSX.Element;
+export declare function Checkbox({ label, variant, checked, defaultChecked, indeterminate, isInvalid, disabled, onChange, className, ...props }: CheckboxProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace Checkbox {
     var displayName: string;
 }
 export type RadioProps = Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "onChange"> & {
     label?: ReactNode;
+    variant?: MarkerVariant;
     checked?: boolean;
     isInvalid?: boolean;
     onChange?: (value: string) => void;
 };
-export declare function Radio({ label, checked, isInvalid, disabled, onChange, value, className, ...props }: RadioProps): import("react/jsx-runtime").JSX.Element;
+export declare function Radio({ label, variant, checked, isInvalid, disabled, onChange, value, className, ...props }: RadioProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace Radio {
     var displayName: string;
 }
@@ -30,13 +34,14 @@ export declare namespace RadioGroup {
 }
 export type SwitchProps = Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "onChange"> & {
     label?: ReactNode;
+    variant?: MarkerVariant;
     checked?: boolean;
     defaultChecked?: boolean;
     thinTrack?: boolean;
     isInvalid?: boolean;
     onChange?: (checked: boolean) => void;
 };
-export declare function Switch({ label, checked, defaultChecked, disabled, thinTrack, isInvalid, onChange, className, ...props }: SwitchProps): import("react/jsx-runtime").JSX.Element;
+export declare function Switch({ label, variant, checked, defaultChecked, disabled, thinTrack, isInvalid, onChange, className, ...props }: SwitchProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace Switch {
     var displayName: string;
 }

package/dist/Progress/Progress.d.ts

@@ -1,5 +1,6 @@
 import { HTMLAttributes, ReactNode } from 'react';
-export type ProgressVariant = "accent" | "success" | "warning" | "danger" | "info" | "neutral";
+import { ColorVariant } from '../types';
+export type ProgressVariant = ColorVariant;
 export type ProgressSize = "sm" | "md" | "lg";
 export type ProgressShape = "bar" | "circle";
 export type ProgressProps = HTMLAttributes<HTMLDivElement> & {

package/dist/Spinner/Spinner.d.ts

@@ -1,13 +1,18 @@
 import { HTMLAttributes } from 'react';
-export type SpinnerVariant = "ring" | "dots" | "bar";
+import { ColorVariant } from '../types';
+export type SpinnerType = "ring" | "dots" | "bar";
+export type SpinnerVariant = ColorVariant;
 export type SpinnerSize = "sm" | "md" | "lg";
+type LegacySpinnerVariant = SpinnerType;
 export type SpinnerProps = HTMLAttributes<HTMLSpanElement> & {
-    variant?: SpinnerVariant;
+    variant?: SpinnerVariant | LegacySpinnerVariant;
+    type?: SpinnerType;
     size?: SpinnerSize;
     muted?: boolean;
-    onAccent?: boolean;
+    onColor?: boolean;
 };
-export declare function Spinner({ variant, size, muted, onAccent, className, ...props }: SpinnerProps): import("react/jsx-runtime").JSX.Element;
+export declare function Spinner({ variant, type, size, muted, onColor, className, ...props }: SpinnerProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace Spinner {
     var displayName: string;
 }
+export {};

package/dist/Steps/Steps.d.ts

@@ -1,6 +1,9 @@
 import { ButtonHTMLAttributes, HTMLAttributes, ReactNode } from 'react';
-export type StepsVariant = "line" | "arrow";
+import { ColorVariant } from '../types';
+export type StepsType = "line" | "arrow";
+export type StepsVariant = ColorVariant;
 export type StepsSize = "sm" | "md" | "lg";
+type LegacyStepsVariant = StepsType;
 export type StepItem = {
     label: ReactNode;
     description?: ReactNode;
@@ -12,14 +15,16 @@ export type StepItem = {
 export type StepsProps = Omit<HTMLAttributes<HTMLOListElement>, "onChange"> & {
     items: StepItem[];
     currentStep?: number;
-    variant?: StepsVariant;
+    variant?: StepsVariant | LegacyStepsVariant;
+    type?: StepsType;
     size?: StepsSize;
     clickable?: boolean;
     showNumbers?: boolean;
     onStepChange?: (step: number) => void;
     stepClassName?: string;
 };
-export declare function Steps({ items, currentStep, variant, size, clickable, showNumbers, onStepChange, stepClassName, className, ...props }: StepsProps): import("react/jsx-runtime").JSX.Element;
+export declare function Steps({ items, currentStep, variant, type, size, clickable, showNumbers, onStepChange, stepClassName, className, ...props }: StepsProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace Steps {
     var displayName: string;
 }
+export {};