@omkarux/vela 0.2.0

package/CHANGELOG.md

@@ -0,0 +1,57 @@
+# Changelog
+
+All notable changes to this project are documented here.
+This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [0.2.0] — 2026-09-09
+
+### Changed
+- **Re-hued the entire primitive palette** — 52 raw values replaced. Vela now runs a deep
+  sea-teal brand (`--vela-primary-500: #0a6c7d`) on a cool slate neutral ramp.
+
+  Nothing else moved. Not one semantic mapping, not one component file, not one test. That is
+  the property the two-layer architecture exists to provide, and this release is the proof:
+  a complete visual re-skin is a diff confined to the primitive block.
+
+  All 76 contrast pairs passed on the first run of the new palette in both themes.
+
+### Fixed
+- Corrected the asserted-pair count in the docs from 78 to 76 (38 pairs × 2 themes).
+
+### Note on versioning
+Every colour in the system changed, so this is a minor bump rather than a patch even though no
+API changed — under 0.x, a visual break is still a break. Consumers pinned to `0.1.x` keep the
+old palette.
+
+## [0.1.0] — 2026-09-09
+
+Initial release.
+
+### Added
+- **Components:** Button, Toggle, Input, ContextualAlert, StatusIndicator, Tabs.
+- **Tokens:** 239 CSS custom properties in two layers (primitives → semantics), covering
+  colour, spacing, sizing, radius and typography.
+- **Themes:** light and dark. The OS preference applies by default; `data-theme="light"` or
+  `data-theme="dark"` on the root element overrides it in either direction.
+- **Taxonomies:** severity (6 levels), risk (3 levels) and status (5 states) as separate,
+  non-interchangeable token families, each with a complete role row.
+- **Type-enforced constraints:** `ButtonProps` is a discriminated union; `Toggle` requires a
+  `label`; `Tabs.List` requires an `aria-label`; every variant/size/severity/status set is
+  closed.
+- **`guidelines/`** shipped inside the package — per-component specifications with closed
+  prop tables, token bindings, hard constraints and anti-patterns, plus `llms.txt` as an
+  agent entry point.
+- **Contrast audit** (`npm run contrast`) covering 76 pairs across both themes, backed by
+  tests so a regression fails CI.
+- **Publish gate** (`npm run verify`) that packs the tarball, installs it into a throwaway
+  app, and asserts both that valid usage typechecks and that eight documented rule
+  violations are rejected by the compiler.
+
+### Accessibility decisions worth recording
+- `--vela-btn-destructive-bg` binds `red-700`, not `red-500`: red-500 behind a white label is
+  3.93:1 and fails AA.
+- `--vela-text-de-emphasized` binds `grey-600`, not `grey-500` (3.04:1 on white).
+- `--vela-text-severity-success` and `--vela-text-risk-low` bind `green-800`, not `green-700`.
+- Status dots bind `yellow-700` and `orange-600` rather than the 500s to clear 3:1 on white.
+- `Button` keeps its label and stays focusable while `loading`, setting `aria-busy` and
+  ignoring clicks, rather than swapping the label out or disabling itself.

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Omkar Khadamkar
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,112 @@
+# Vela
+
+A token-first React component kit. Six components, two themes, zero runtime dependencies —
+and every design rule in the documentation is enforced by the TypeScript compiler.
+
+```bash
+npm install @omkarux/vela
+```
+
+```tsx
+import '@omkarux/vela/styles.css'
+import { Button, ContextualAlert, Tabs } from '@omkarux/vela'
+
+<div className="vela-root">
+  <ContextualAlert severity="major" title="Scan failed">
+    Three assets could not be reached.
+  </ContextualAlert>
+  <Button variant="primary" appearance="filled">Retry Scan</Button>
+</div>
+```
+
+## What is actually in here
+
+| | |
+|---|---|
+| **Components** | Button · Toggle · Input · ContextualAlert · StatusIndicator · Tabs |
+| **Tokens** | 239 CSS custom properties, two layers (primitives → semantics) |
+| **Themes** | Light + dark. OS preference by default, `data-theme` to override |
+| **Dependencies** | None. `react` / `react-dom` are peers (18.3 or 19) |
+| **Format** | ESM, `preserveModules` for tree-shaking, full `.d.ts` |
+| **Tests** | 116, including 76 asserted contrast pairs across both themes |
+| **Packed size** | 26.7 kB, 43 files |
+
+## The three ideas worth stealing
+
+**1. Dark mode redefines no primitive.** The entire dark theme is semantic tokens re-pointed
+onto a different part of the same scale. A test fails the build if a raw hex ever appears in
+the dark block. That property is what makes a third theme cheap instead of a rewrite.
+
+**2. Severity, Risk and Status are separate taxonomies.** Six levels, three levels, five
+states — never interchangeable. There is no "high severity" and no "critical risk". The
+types reject both. Most design systems collapse these into one `status` prop and then spend
+years untangling it.
+
+**3. Design constraints are compiler errors, not review comments.** `ButtonProps` is a
+discriminated union, so the rule "text-link is primary-only, small sizes only, never with an
+icon" is not a paragraph someone has to remember:
+
+```tsx
+<Button variant="primary" appearance="text-link" size="tiny">Learn More</Button>      // ✅
+<Button variant="destructive" appearance="text-link">Delete</Button>                  // ✗ won't compile
+<Button variant="primary" appearance="text-link" size="huge">Go</Button>              // ✗ won't compile
+<Button variant="primary" appearance="text-link" icon={<Icon />}>Go</Button>          // ✗ won't compile
+<ContextualAlert severity="high">…</ContextualAlert>                                  // ✗ severity has no "high"
+<StatusIndicator status="critical" />                                                 // ✗ that's severity, not status
+<Tabs.List>…</Tabs.List>                                                              // ✗ aria-label is required
+<Toggle />                                                                            // ✗ label is required
+```
+
+`npm run verify` asserts every one of those rejections against the *published tarball*.
+
+## Accessibility is asserted, not claimed
+
+`npm run contrast` prints every foreground/background pair in both themes against WCAG 2.1
+AA — 4.5:1 for text, 3:1 for UI boundaries and non-text signals. The same data backs a test,
+so a token change that breaks contrast fails CI.
+
+The first run of that audit found 9 failures in the inherited light palette. All 9 are fixed,
+and the fixes are documented in `guidelines/foundations/color.md` so nobody "corrects" them
+back — most notably `--vela-btn-destructive-bg`, which binds `red-700` rather than `red-500`
+because red-500 behind a white label is 3.93:1.
+
+## Built for agents as well as people
+
+`guidelines/` ships **inside the package**. It is the specification, not a rendered copy of
+the source: closed prop tables, token-binding tables, hard constraints, and an anti-patterns
+block per component. Point your coding agent at `guidelines/llms.txt`, or import a single
+file:
+
+```ts
+import buttonSpec from '@omkarux/vela/guidelines/components/button.md?raw'
+```
+
+`AGENTS.md` at the repo root carries the same rules for anyone working *on* the system.
+
+## Theming
+
+```tsx
+document.documentElement.setAttribute('data-theme', 'dark')   // force dark
+document.documentElement.setAttribute('data-theme', 'light')  // force light
+document.documentElement.removeAttribute('data-theme')        // follow the OS
+```
+
+## Scripts
+
+```bash
+npm run dev        # demo showcase at localhost:5174
+npm test           # 116 tests
+npm run contrast   # WCAG report for both themes
+npm run verify     # typecheck + tests + build + pack-and-consume gate
+```
+
+## Scope
+
+Six components, chosen to exercise every foundation and both status taxonomies. Not yet
+specced: Checkbox, Radio, Dropdown List, Select List, Token Pill, Number Stepper, Text Area,
+Modal, Tooltip, Icon Button, Actions Dropdown, View Switcher. The guidelines name these
+explicitly so an agent flags the gap instead of inventing one.
+
+## License
+
+MIT

package/dist/components/Button/Button.d.ts

@@ -0,0 +1,32 @@
+import * as React from 'react';
+export type ButtonVariant = 'primary' | 'standard' | 'destructive';
+export type ButtonSize = 'tiny' | 'regular' | 'large' | 'huge';
+interface ButtonCommon extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'type' | 'children'> {
+    /** Label. Verb-first, Title Case: "Save Changes", not "Information". */
+    children: React.ReactNode;
+    disabled?: boolean;
+    /** Shows an indicator and sets aria-busy. Clicks are ignored while true. */
+    loading?: boolean;
+    type?: 'button' | 'submit';
+}
+export interface SolidButtonProps extends ButtonCommon {
+    variant?: ButtonVariant;
+    appearance?: 'filled' | 'hollow';
+    size?: ButtonSize;
+    /** Optional icon, always rendered LEFT of the label. There is no trailing slot. */
+    icon?: React.ReactNode;
+}
+/**
+ * The text-link appearance is deliberately narrower than the others.
+ * `icon?: never` and the closed `size` union mean the compiler — not a code
+ * review — rejects `<Button appearance="text-link" variant="destructive" />`.
+ */
+export interface TextLinkButtonProps extends ButtonCommon {
+    variant: 'primary';
+    appearance: 'text-link';
+    size?: 'tiny' | 'regular';
+    icon?: never;
+}
+export type ButtonProps = SolidButtonProps | TextLinkButtonProps;
+export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export {};

package/dist/components/Button/Button.js

@@ -0,0 +1,51 @@
+import { jsxs as m, jsx as n } from "react/jsx-runtime";
+import * as v from "react";
+import { cn as h } from "../../lib/cn.js";
+const g = v.forwardRef(
+  function(r, s) {
+    const {
+      variant: i = "standard",
+      appearance: o = "filled",
+      size: c = "regular",
+      disabled: d = !1,
+      loading: a = !1,
+      type: u = "button",
+      icon: t,
+      children: b,
+      className: p,
+      onClick: e,
+      ...f
+    } = r;
+    return /* @__PURE__ */ m(
+      "button",
+      {
+        ref: s,
+        type: u,
+        disabled: d,
+        "aria-busy": a || void 0,
+        onClick: (l) => {
+          if (a) {
+            l.preventDefault();
+            return;
+          }
+          e == null || e(l);
+        },
+        className: h(
+          "vela-btn",
+          `vela-btn--${i}`,
+          `vela-btn--${o}`,
+          `vela-btn--${c}`,
+          p
+        ),
+        ...f,
+        children: [
+          a ? /* @__PURE__ */ n("span", { className: "vela-btn__spinner", "aria-hidden": "true" }) : t ? /* @__PURE__ */ n("span", { className: "vela-btn__icon", "aria-hidden": "true", children: t }) : null,
+          /* @__PURE__ */ n("span", { className: "vela-btn__label", children: b })
+        ]
+      }
+    );
+  }
+);
+export {
+  g as Button
+};

package/dist/components/Button/index.d.ts

@@ -0,0 +1,2 @@
+export { Button } from './Button';
+export type { ButtonProps, ButtonVariant, ButtonSize, SolidButtonProps, TextLinkButtonProps } from './Button';

package/dist/components/ContextualAlert/ContextualAlert.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+/**
+ * The six severity levels. Describes events and alerts.
+ * There is no "high severity" — that is the Risk taxonomy, and the two are
+ * kept apart on purpose. See guidelines/foundations/color.md.
+ */
+export type Severity = 'success' | 'info' | 'warning' | 'minor' | 'major' | 'critical';
+export interface ContextualAlertProps {
+    severity: Severity;
+    /** Optional bold lead-in. The body is always required. */
+    title?: string;
+    children: React.ReactNode;
+    /** Renders a dismiss control. Omit for alerts the user must not clear. */
+    onDismiss?: () => void;
+    dismissLabel?: string;
+    className?: string;
+}
+export declare function ContextualAlert({ severity, title, children, onDismiss, dismissLabel, className, }: ContextualAlertProps): React.JSX.Element;

package/dist/components/ContextualAlert/ContextualAlert.js

@@ -0,0 +1,49 @@
+import { jsxs as n, jsx as a } from "react/jsx-runtime";
+import { cn as v } from "../../lib/cn.js";
+import { CriticalOctagonIcon as I, WarningTriangleIcon as l, InfoCircleIcon as d, CheckCircleIcon as C, CloseIcon as _ } from "../../lib/icons.js";
+const u = {
+  success: C,
+  info: d,
+  warning: l,
+  minor: l,
+  major: l,
+  critical: I
+}, f = /* @__PURE__ */ new Set(["major", "critical"]);
+function g({
+  severity: e,
+  title: r,
+  children: o,
+  onDismiss: c,
+  dismissLabel: i = "Dismiss",
+  className: s
+}) {
+  const m = u[e], t = f.has(e);
+  return /* @__PURE__ */ n(
+    "div",
+    {
+      className: v("vela-alert", `vela-alert--${e}`, s),
+      role: t ? "alert" : "status",
+      "aria-live": t ? "assertive" : "polite",
+      children: [
+        /* @__PURE__ */ a(m, { className: "vela-alert__icon" }),
+        /* @__PURE__ */ n("div", { className: "vela-alert__body", children: [
+          r && /* @__PURE__ */ a("strong", { className: "vela-alert__title", children: r }),
+          o
+        ] }),
+        c && /* @__PURE__ */ a(
+          "button",
+          {
+            type: "button",
+            className: "vela-alert__dismiss",
+            onClick: c,
+            "aria-label": i,
+            children: /* @__PURE__ */ a(_, {})
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  g as ContextualAlert
+};

package/dist/components/ContextualAlert/index.d.ts

@@ -0,0 +1,2 @@
+export { ContextualAlert } from './ContextualAlert';
+export type { ContextualAlertProps, Severity } from './ContextualAlert';

package/dist/components/Input/Input.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
+    /** Required — an input without a visible label is a support ticket. */
+    label: string;
+    /** Helper text below the field. Announced via aria-describedby. */
+    hint?: string;
+    /** Presence puts the field in the error state; the string is the message. */
+    error?: string;
+    size?: 'tiny' | 'regular' | 'large';
+    className?: string;
+}
+export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;

package/dist/components/Input/Input.js

@@ -0,0 +1,31 @@
+import { jsxs as s, jsx as l } from "react/jsx-runtime";
+import * as t from "react";
+import { cn as c } from "../../lib/cn.js";
+const j = t.forwardRef(
+  function({ label: o, hint: i, error: e, size: u = "regular", id: m, required: n, className: p, ...f }, v) {
+    const h = t.useId(), a = m ?? h, r = `${a}-hint`, d = `${a}-error`, _ = [i ? r : null, e ? d : null].filter(Boolean).join(" ") || void 0;
+    return /* @__PURE__ */ s("div", { className: c("vela-field", p), children: [
+      /* @__PURE__ */ s("label", { className: "vela-field__label", htmlFor: a, children: [
+        o,
+        n && /* @__PURE__ */ l("span", { className: "vela-field__required", "aria-hidden": "true", children: "*" })
+      ] }),
+      /* @__PURE__ */ l(
+        "input",
+        {
+          ref: v,
+          id: a,
+          required: n,
+          "aria-invalid": e ? !0 : void 0,
+          "aria-describedby": _,
+          className: c("vela-input", `vela-input--${u}`),
+          ...f
+        }
+      ),
+      i && /* @__PURE__ */ l("span", { id: r, className: "vela-field__hint", children: i }),
+      e && /* @__PURE__ */ l("span", { id: d, className: "vela-field__error", role: "alert", children: e })
+    ] });
+  }
+);
+export {
+  j as Input
+};

package/dist/components/Input/index.d.ts

@@ -0,0 +1,2 @@
+export { Input } from './Input';
+export type { InputProps } from './Input';

package/dist/components/StatusIndicator/StatusIndicator.d.ts

@@ -0,0 +1,14 @@
+/**
+ * The five health states. This is NOT severity and NOT risk — those are
+ * separate taxonomies with their own tokens. There is no "critical" status
+ * and no "high" status; if you reach for one, you want a different component.
+ */
+export type Status = 'unknown' | 'healthy' | 'warning' | 'medium' | 'unhealthy';
+export interface StatusIndicatorProps {
+    status: Status;
+    /** Visible text. Strongly preferred — see the aria-label fallback below. */
+    label?: string;
+    size?: 'small' | 'regular';
+    className?: string;
+}
+export declare function StatusIndicator({ status, label, size, className, }: StatusIndicatorProps): import("react").JSX.Element;

package/dist/components/StatusIndicator/StatusIndicator.js

@@ -0,0 +1,31 @@
+import { jsxs as r, jsx as n } from "react/jsx-runtime";
+import { cn as l } from "../../lib/cn.js";
+const i = {
+  unknown: "Status unknown",
+  healthy: "Healthy",
+  warning: "Warning",
+  medium: "Degraded",
+  unhealthy: "Unhealthy"
+};
+function d({
+  status: t,
+  label: a,
+  size: e = "regular",
+  className: s
+}) {
+  return /* @__PURE__ */ r(
+    "span",
+    {
+      className: l("vela-status", `vela-status--${t}`, `vela-status--${e}`, s),
+      role: "img",
+      "aria-label": a ? void 0 : i[t],
+      children: [
+        /* @__PURE__ */ n("span", { className: "vela-status__dot", "aria-hidden": "true" }),
+        a && /* @__PURE__ */ n("span", { className: "vela-status__label", children: a })
+      ]
+    }
+  );
+}
+export {
+  d as StatusIndicator
+};

package/dist/components/StatusIndicator/index.d.ts

@@ -0,0 +1,2 @@
+export { StatusIndicator } from './StatusIndicator';
+export type { StatusIndicatorProps, Status } from './StatusIndicator';

package/dist/components/Tabs/Tabs.d.ts

@@ -0,0 +1,44 @@
+import * as React from 'react';
+export interface TabsProps {
+    /** Controlled active value. Omit for uncontrolled. */
+    value?: string;
+    defaultValue: string;
+    onValueChange?: (value: string) => void;
+    size?: 'regular' | 'large';
+    children: React.ReactNode;
+    className?: string;
+}
+/**
+ * Navigate between DIFFERENT content panels.
+ * If the panels show the SAME dataset rendered differently (grid vs. chart),
+ * that is a View Switcher, not Tabs.
+ */
+export declare function Tabs({ value, defaultValue, onValueChange, size, children, className, }: TabsProps): React.JSX.Element;
+export declare namespace Tabs {
+    var List: typeof TabList;
+    var Trigger: typeof TabTrigger;
+    var Panel: typeof TabPanel;
+}
+export interface TabListProps {
+    /** Required: a tablist needs a name to be navigable by screen reader. */
+    'aria-label': string;
+    children: React.ReactNode;
+    className?: string;
+}
+declare function TabList({ children, className, ...rest }: TabListProps): React.JSX.Element;
+export interface TabTriggerProps {
+    value: string;
+    children: React.ReactNode;
+    /** Optional numeric badge, e.g. an alert count. */
+    count?: number;
+    disabled?: boolean;
+    className?: string;
+}
+declare function TabTrigger({ value, children, count, disabled, className }: TabTriggerProps): React.JSX.Element;
+export interface TabPanelProps {
+    value: string;
+    children: React.ReactNode;
+    className?: string;
+}
+declare function TabPanel({ value, children, className }: TabPanelProps): React.JSX.Element | null;
+export {};

package/dist/components/Tabs/Tabs.js

@@ -0,0 +1,94 @@
+import { jsx as u, jsxs as k } from "react/jsx-runtime";
+import * as c from "react";
+import { cn as x } from "../../lib/cn.js";
+const p = c.createContext(null);
+function T(e) {
+  const s = c.useContext(p);
+  if (!s)
+    throw new Error(`<Tabs.${e}> must be rendered inside <Tabs>.`);
+  return s;
+}
+function y({
+  value: e,
+  defaultValue: s,
+  onValueChange: r,
+  size: a = "regular",
+  children: o,
+  className: n
+}) {
+  const d = e !== void 0, [t, l] = c.useState(s), i = d ? e : t, b = c.useId(), f = c.useCallback(
+    (g) => {
+      d || l(g), r == null || r(g);
+    },
+    [d, r]
+  ), m = c.useMemo(
+    () => ({ value: i, setValue: f, idPrefix: b }),
+    [i, f, b]
+  );
+  return /* @__PURE__ */ u(p.Provider, { value: m, children: /* @__PURE__ */ u("div", { className: x("vela-tabs", `vela-tabs--${a}`, n), children: o }) });
+}
+function v({ children: e, className: s, ...r }) {
+  const a = c.useRef(null);
+  return /* @__PURE__ */ u(
+    "div",
+    {
+      ref: a,
+      role: "tablist",
+      onKeyDown: (n) => {
+        var b, f, m;
+        if (!["ArrowLeft", "ArrowRight", "Home", "End"].includes(n.key)) return;
+        const t = Array.from(
+          ((b = a.current) == null ? void 0 : b.querySelectorAll('[role="tab"]:not(:disabled)')) ?? []
+        );
+        if (t.length === 0) return;
+        const l = t.indexOf(document.activeElement);
+        let i = l;
+        n.key === "ArrowRight" ? i = (l + 1) % t.length : n.key === "ArrowLeft" ? i = (l - 1 + t.length) % t.length : n.key === "Home" ? i = 0 : n.key === "End" && (i = t.length - 1), n.preventDefault(), (f = t[i]) == null || f.focus(), (m = t[i]) == null || m.click();
+      },
+      className: x("vela-tabs__list", s),
+      ...r,
+      children: e
+    }
+  );
+}
+function $({ value: e, children: s, count: r, disabled: a, className: o }) {
+  const { value: n, setValue: d, idPrefix: t } = T("Trigger"), l = n === e;
+  return /* @__PURE__ */ k(
+    "button",
+    {
+      type: "button",
+      role: "tab",
+      id: `${t}-tab-${e}`,
+      "aria-selected": l,
+      "aria-controls": `${t}-panel-${e}`,
+      tabIndex: l ? 0 : -1,
+      disabled: a,
+      onClick: () => d(e),
+      className: x("vela-tabs__trigger", o),
+      children: [
+        s,
+        r !== void 0 && /* @__PURE__ */ u("span", { className: "vela-tabs__count", children: r })
+      ]
+    }
+  );
+}
+function w({ value: e, children: s, className: r }) {
+  const { value: a, idPrefix: o } = T("Panel");
+  return a !== e ? null : /* @__PURE__ */ u(
+    "div",
+    {
+      role: "tabpanel",
+      id: `${o}-panel-${e}`,
+      "aria-labelledby": `${o}-tab-${e}`,
+      tabIndex: 0,
+      className: x("vela-tabs__panel", r),
+      children: s
+    }
+  );
+}
+y.List = v;
+y.Trigger = $;
+y.Panel = w;
+export {
+  y as Tabs
+};

package/dist/components/Tabs/index.d.ts

@@ -0,0 +1,2 @@
+export { Tabs } from './Tabs';
+export type { TabsProps, TabListProps, TabTriggerProps, TabPanelProps } from './Tabs';

package/dist/components/Toggle/Toggle.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+export interface ToggleProps {
+    /** Controlled state. Omit for uncontrolled. */
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onChange?: (checked: boolean) => void;
+    disabled?: boolean;
+    /**
+     * Required. A switch with no accessible name is unusable with a screen
+     * reader, so the API does not allow one to exist.
+     */
+    label: string;
+    labelPosition?: 'right' | 'left';
+    size?: 'tiny' | 'regular';
+    id?: string;
+    name?: string;
+    className?: string;
+}
+/**
+ * A binary setting that takes effect IMMEDIATELY.
+ * If the change only takes effect after a Save click, use Checkbox instead.
+ */
+export declare const Toggle: React.ForwardRefExoticComponent<ToggleProps & React.RefAttributes<HTMLButtonElement>>;