@vipengele/react-ui 0.0.0 → 0.1.0

package/dist/PasswordInput/PasswordInput.stylesheet.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PasswordInput.stylesheet.d.ts","sourceRoot":"","sources":["../../src/PasswordInput/PasswordInput.stylesheet.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,uBAAuB,2xBA+BnC,CAAC"}

package/dist/Popover/Popover.d.ts

@@ -0,0 +1,47 @@
+import { type ReactNode } from "react";
+/** Deliberately a copy of `TooltipPlacement` rather than an import of it: one directory per
+ * component, with no edge between two components that merely happen to accept the same four
+ * sides. */
+export type PopoverPlacement = "top" | "bottom" | "left" | "right";
+export interface PopoverProps {
+    /** What the panel holds. A plain node rather than a render prop taking a `close` callback:
+     * content that has to close the popover itself belongs in the controlled form, where the
+     * consumer already owns the state and the `onOpenChange` handler. */
+    content: ReactNode;
+    /** The element the panel hangs off. It is wrapped in a `<span>` that carries the ref and the
+     * click handler — not cloned for those, so it can be any node, including a component that
+     * doesn't forward a ref or spread unknown props. When it is a single element, it is
+     * additionally cloned with `aria-haspopup`/`aria-expanded`/`aria-controls` merged on, so
+     * assistive tech operating the actual control gets its dialog semantics. */
+    children: ReactNode;
+    /** Controls the panel. Supplying it hands the state to the caller: the popover then opens and
+     * closes only when this prop changes, and reports every request through `onOpenChange`. */
+    open?: boolean;
+    /** Seeds the uncontrolled state. Ignored once `open` is supplied. */
+    defaultOpen?: boolean;
+    /** Fired for every open/close request — a trigger click, an outside press, `Escape` — in both
+     * the controlled and the uncontrolled form. */
+    onOpenChange?: (open: boolean) => void;
+    /** Preferred side of the trigger. Floating-ui flips to the opposite side when the panel
+     * wouldn't fit there. */
+    placement?: PopoverPlacement;
+    /** Composed onto the panel, not onto the trigger wrapper. */
+    className?: string;
+}
+/**
+ * A floating panel of interactive content, opened by clicking its trigger and dismissed by an
+ * outside press, by `Escape`, or by clicking the trigger again.
+ *
+ * Focus is trapped inside the panel while it is open and returned to the trigger when it closes —
+ * the panel holds real interactive content, so keyboard users must be able to reach it and must
+ * not fall out the back of it into the page behind.
+ *
+ * The panel portals into the nearest ancestor `.vpg-root` rather than `document.body`:
+ * `ThemeProvider` assigns every `--vpg-*` property on `.vpg-root`, so a panel outside that
+ * subtree would resolve every `var()` to nothing and lose colour-mode adaptation entirely. With no
+ * `.vpg-root` ancestor — an unthemed page, or a test rendering the component on its own — the
+ * panel renders inline as the trigger's sibling instead. It is positioned by the same computed
+ * coordinates either way; only the `--vpg-*` values it inherits differ.
+ */
+export declare function Popover({ content, children, open, defaultOpen, onOpenChange, placement, className }: PopoverProps): import("react").JSX.Element;
+//# sourceMappingURL=Popover.d.ts.map

package/dist/Popover/Popover.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../../src/Popover/Popover.tsx"],"names":[],"mappings":"AAYA,OAAO,EAA+D,KAAK,SAAS,EAAY,MAAM,OAAO,CAAC;AAI9G;;YAEY;AACZ,MAAM,MAAM,gBAAgB,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;AAEnE,MAAM,WAAW,YAAY;IAC3B;;yEAEqE;IACrE,OAAO,EAAE,SAAS,CAAC;IACnB;;;;gFAI4E;IAC5E,QAAQ,EAAE,SAAS,CAAC;IACpB;+FAC2F;IAC3F,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,qEAAqE;IACrE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;mDAC+C;IAC/C,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC;6BACyB;IACzB,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B,6DAA6D;IAC7D,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAQD;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,OAAO,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,WAAmB,EAAE,YAAY,EAAE,SAAoB,EAAE,SAAS,EAAE,EAAE,YAAY,+BAmGpI"}

package/dist/Popover/Popover.stylesheet.d.ts

@@ -0,0 +1,21 @@
+/**
+ * `<Popover>`'s own styles, injected as an inline `<style>` rather than a `.css` import so the
+ * package can stay `"sideEffects": false` (same approach as `Button`'s and `Card`'s stylesheets).
+ *
+ * Every `--vpg-*` property is *read* here through `var()` and never assigned inline by the
+ * component: an inline style declaration always wins over a stylesheet rule for the same property
+ * on the same element, so an inline `--vpg-surface-raised` would permanently shadow the
+ * dark-mode reassignment in `@vipengele/react-tokens`'s base stylesheet and this panel would stop adapting
+ * to colour mode. The component's only inline style is floating-ui's computed
+ * `position`/`top`/`left`, which are plain CSS properties carrying a per-instance coordinate.
+ *
+ * The panel reads the same raised-surface tokens as `Card` — `--vpg-surface-raised`,
+ * `--vpg-border`, `--vpg-radius` — so a floating panel and a card in the page body read as
+ * the same material.
+ *
+ * The panel sits above a listbox and below a tooltip in the stacking family — it is a surface
+ * over the page that can contain the control a listbox belongs to — and carries the elevation
+ * family's high step, whose two layers re-derive their inks when the colour mode flips.
+ */
+export declare const popoverStylesheet = "\n.vpg-popover-trigger {\n  /* Inline-flex rather than inline: the wrapper exists only to carry the ref and the click\n     handler, and must not add a baseline gap under the element it wraps. */\n  display: inline-flex;\n}\n\n.vpg-popover {\n  position: absolute;\n  z-index: var(--vpg-layer-popover);\n  box-sizing: border-box;\n  /* The size of a container, not a step of anything: no scale carries a measurement this large,\n     and a `--vpg-*` name the theme never assigns advertises a theming hook that doesn't\n     exist. */\n  max-width: 20rem;\n  padding: 1rem;\n  background-color: var(--vpg-surface-raised);\n  border: 1px solid var(--vpg-border);\n  border-radius: var(--vpg-radius);\n  box-shadow: var(--vpg-shadow-high);\n  color: var(--vpg-ink);\n  font-family: var(--vpg-font-sans);\n  font-size: var(--vpg-font-size-sm);\n  line-height: 1.5;\n  /* The panel holds interactive content, so unlike a tooltip it must stay hit-testable. */\n  overflow-wrap: break-word;\n}\n\n.vpg-popover:focus-visible {\n  /* The panel itself takes focus when it holds nothing tabbable; the ring is what makes that\n     visible. Offset rather than inset so it stays legible against the panel's own surface. */\n  outline: var(--vpg-focus-ring-width) solid var(--vpg-accent-ring);\n  outline-offset: var(--vpg-focus-ring-offset);\n}\n";
+//# sourceMappingURL=Popover.stylesheet.d.ts.map

package/dist/Popover/Popover.stylesheet.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.stylesheet.d.ts","sourceRoot":"","sources":["../../src/Popover/Popover.stylesheet.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,iBAAiB,0zCAkC7B,CAAC"}

package/dist/Progress/Progress.d.ts

@@ -0,0 +1,18 @@
+import type { HTMLAttributes } from "react";
+export type ProgressSize = "sm" | "md" | "lg";
+export interface ProgressProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    /** The current amount of progress. Omitted (the default) renders the indeterminate, looping
+     * sweep variant — a progress bar with no known value has nothing to report as a percentage. */
+    value?: number;
+    /** The value that represents completion. */
+    max?: number;
+    size?: ProgressSize;
+}
+/**
+ * The library's progress atom: a linear track with a filled bar. Determinate when `value` is
+ * given (`aria-valuenow`/`-valuemin`/`-valuemax` report the exact position), indeterminate
+ * otherwise (a looping sweep, with no `aria-value*` — per ARIA, a progressbar with no known value
+ * should not report a fake one).
+ */
+export declare function Progress({ value, max, size, className, style, ...rest }: ProgressProps): import("react").JSX.Element;
+//# sourceMappingURL=Progress.d.ts.map

package/dist/Progress/Progress.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Progress.d.ts","sourceRoot":"","sources":["../../src/Progress/Progress.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAG5C,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE9C,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IACrF;mGAC+F;IAC/F,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4CAA4C;IAC5C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,YAAY,CAAC;CACrB;AAaD;;;;;GAKG;AACH,wBAAgB,QAAQ,CAAC,EAAE,KAAK,EAAE,GAAS,EAAE,IAAW,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,IAAI,EAAE,EAAE,aAAa,+BA+BnG"}

package/dist/Progress/Progress.stylesheet.d.ts

@@ -0,0 +1,18 @@
+/**
+ * `<Progress>`'s own styles, injected as an inline `<style>` rather than a `.css` import so the
+ * package can stay `"sideEffects": false` (same approach as `Skeleton`'s and `Avatar`'s
+ * stylesheets).
+ *
+ * Every `--vpg-*` property this component depends on is *read* here through `var()` and
+ * never assigned inline by the component: an inline style declaration always wins over a
+ * stylesheet rule for the same property on the same element, so an inline `--vpg-accent`
+ * would permanently shadow the dark-mode reassignment in `@vipengele/react-tokens`'s base stylesheet.
+ * The per-instance fill width is an unprefixed inline `width`, not a `--vpg-*` custom
+ * property, so it carries no such risk.
+ *
+ * The indeterminate sweep animates a translated fill's own width and position rather than
+ * `background-position`, since there is no filled/unfilled boundary to hold still against —
+ * unlike a determinate bar, the whole fill segment travels the track.
+ */
+export declare const progressStylesheet = "\n@keyframes vpg-progress-sweep {\n  0% { left: -40%; width: 40%; }\n  50% { width: 60%; }\n  100% { left: 100%; width: 40%; }\n}\n\n.vpg-progress {\n  position: relative;\n  display: block;\n  overflow: hidden;\n  box-sizing: border-box;\n  border-radius: var(--vpg-radius-sm);\n  background-color: var(--vpg-surface-raised);\n}\n\n.vpg-progress-sm {\n  height: 0.25rem;\n}\n\n.vpg-progress-md {\n  height: 0.5rem;\n}\n\n.vpg-progress-lg {\n  height: 0.75rem;\n}\n\n.vpg-progress-fill {\n  height: 100%;\n  border-radius: inherit;\n  background-color: var(--vpg-accent);\n}\n\n.vpg-progress-determinate .vpg-progress-fill {\n  transition: width 0.2s ease-out;\n}\n\n.vpg-progress-indeterminate .vpg-progress-fill {\n  position: absolute;\n  top: 0;\n  animation: vpg-progress-sweep 1.5s ease-in-out infinite;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  /* Slowed, not stopped: a bar that never moves at all reports nothing about the wait it exists\n     to report. */\n  .vpg-progress-indeterminate .vpg-progress-fill {\n    animation-duration: 3s;\n  }\n}\n";
+//# sourceMappingURL=Progress.stylesheet.d.ts.map

package/dist/Progress/Progress.stylesheet.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Progress.stylesheet.d.ts","sourceRoot":"","sources":["../../src/Progress/Progress.stylesheet.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,kBAAkB,+iCAmD9B,CAAC"}

package/dist/RadioButton/RadioButton.d.ts

@@ -0,0 +1,18 @@
+import type { InputHTMLAttributes } from "react";
+export interface RadioButtonProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "value"> {
+    /** This radio's own value. Compared against `RadioGroup`'s selected value when rendered inside
+     * one; required for a `RadioGroup`-provided `checked`/`onChange` to do anything meaningful. */
+    value?: string;
+}
+/**
+ * A single styled native `<input type="radio">`. No custom keyboard or roving-tabindex code:
+ * native radios sharing a `name` get browser-native grouping and arrow-key behavior for free.
+ *
+ * Usable standalone outside any `RadioGroup` — pass `name`/`checked`/`onChange` manually, the
+ * same as a plain `<input type="radio">` — or nested inside one, where `name`, the selected
+ * state, and the change handler come from context instead. An explicit `checked` prop always
+ * wins over context, so a `RadioButton` inside a group can still be driven manually if a caller
+ * needs that.
+ */
+export declare function RadioButton({ className, name, checked, onChange, value, ...rest }: RadioButtonProps): import("react").JSX.Element;
+//# sourceMappingURL=RadioButton.d.ts.map

package/dist/RadioButton/RadioButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioButton.d.ts","sourceRoot":"","sources":["../../src/RadioButton/RadioButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAe,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAI9D,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACrG;mGAC+F;IAC/F,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;;;;;;;GASG;AACH,wBAAgB,WAAW,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,IAAI,EAAE,EAAE,gBAAgB,+BAoCnG"}

package/dist/RadioButton/RadioButton.stylesheet.d.ts

@@ -0,0 +1,15 @@
+/**
+ * `<RadioButton>`'s own styles, injected as an inline `<style>` rather than a `.css` import so
+ * the package can stay `"sideEffects": false` (same approach as `Toggle.stylesheet.ts`).
+ *
+ * Every `--vpg-*` property is *read* here through `var()` and never assigned inline by the
+ * component: an inline style declaration always wins over a stylesheet rule for the same
+ * property on the same element, so an inline theme property would permanently shadow
+ * `@vipengele/react-tokens`' dark-mode reassignment and this radio would stop adapting to colour mode.
+ *
+ * The indicator is a glyph rather than a pointer target — the label row around it is what a
+ * pointer aims at — so it takes a step of the icon scale. The dot is written as a fraction of the
+ * indicator so the two stay in proportion.
+ */
+export declare const radioButtonStylesheet = "\n.vpg-radio-button {\n  appearance: none;\n  -webkit-appearance: none;\n  box-sizing: border-box;\n  position: relative;\n  display: inline-block;\n  flex: none;\n  width: var(--vpg-icon-md);\n  height: var(--vpg-icon-md);\n  margin: 0;\n  padding: 0;\n  border: 1px solid var(--vpg-border);\n  border-radius: var(--vpg-radius-full);\n  background-color: var(--vpg-surface);\n  cursor: pointer;\n  transition: border-color 120ms ease;\n}\n\n.vpg-radio-button::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  margin: auto;\n  width: calc(var(--vpg-icon-md) * 0.5);\n  height: calc(var(--vpg-icon-md) * 0.5);\n  border-radius: var(--vpg-radius-full);\n  background-color: var(--vpg-accent);\n  transform: scale(0);\n  transition: transform 120ms ease;\n}\n\n.vpg-radio-button:checked {\n  border-color: var(--vpg-accent);\n}\n\n.vpg-radio-button:checked::before {\n  transform: scale(1);\n}\n\n.vpg-radio-button:focus-visible {\n  outline: var(--vpg-focus-ring-width) solid var(--vpg-accent-ring);\n  outline-offset: var(--vpg-focus-ring-offset);\n}\n\n.vpg-radio-button:disabled {\n  cursor: not-allowed;\n  opacity: 0.55;\n}\n";
+//# sourceMappingURL=RadioButton.stylesheet.d.ts.map

package/dist/RadioButton/RadioButton.stylesheet.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioButton.stylesheet.d.ts","sourceRoot":"","sources":["../../src/RadioButton/RadioButton.stylesheet.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,qBAAqB,8nCAiDjC,CAAC"}

package/dist/RadioGroup/RadioGroup.d.ts

@@ -0,0 +1,40 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+export interface RadioGroupContextValue {
+    name: string;
+    value: string | undefined;
+    onChange: (value: string) => void;
+}
+/**
+ * Read by `RadioButton` to pick up a shared `name`, the group's selected value, and a change
+ * handler. Unlike `Tabs`' context, `useContext` returning `null` is a normal, supported outcome
+ * here — `RadioButton` is usable standalone outside any `RadioGroup`, so nothing reading this
+ * context throws when it is absent.
+ */
+export declare const RadioGroupContext: import("react").Context<RadioGroupContextValue | null>;
+export declare function useRadioGroupContext(): RadioGroupContextValue | null;
+export interface RadioGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
+    /** Makes the selection controlled; pair it with `onChange`. */
+    value?: string;
+    /** The initially selected value when the selection is uncontrolled. */
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    /** The shared `name` every child `RadioButton` receives through context. Auto-generated via
+     * `useId` when omitted, so native radio grouping works without the consumer naming anything. */
+    name?: string;
+    /**
+     * The group's accessible name. Required for `role="radiogroup"` to have one: a `<legend>` on
+     * an ancestor `FieldSet` names the `<fieldset>` itself, not a `role="radiogroup"` element
+     * nested inside it.
+     */
+    "aria-label"?: string;
+    children?: ReactNode;
+}
+/**
+ * A compound context provider grouping `RadioButton`s: `role="radiogroup"` on its own wrapper,
+ * controlled through `value`/`onChange` or left to `RadioGroup` itself, seeded by
+ * `defaultValue` — the same controlled/uncontrolled duality as `Tabs`. Every child `RadioButton`
+ * reads its `name`, `checked`, and `onChange` from context, so native radio grouping and
+ * browser-native arrow-key behavior work without any hand-written keyboard code.
+ */
+export declare function RadioGroup({ value, defaultValue, onChange, name, className, children, ...rest }: RadioGroupProps): import("react").JSX.Element;
+//# sourceMappingURL=RadioGroup.d.ts.map

package/dist/RadioGroup/RadioGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroup.d.ts","sourceRoot":"","sources":["../../src/RadioGroup/RadioGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,KAAK,SAAS,EAAwC,MAAM,OAAO,CAAC;AAGjH,MAAM,WAAW,sBAAsB;IACrC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAED;;;;;GAKG;AACH,eAAO,MAAM,iBAAiB,wDAAqD,CAAC;AAEpF,wBAAgB,oBAAoB,IAAI,sBAAsB,GAAG,IAAI,CAEpE;AAED,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IACvF,+DAA+D;IAC/D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uEAAuE;IACvE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC;oGACgG;IAChG,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;;;GAMG;AACH,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,YAAY,EAAE,QAAQ,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,eAAe,+BAuChH"}

package/dist/RadioGroup/RadioGroup.stylesheet.d.ts

@@ -0,0 +1,11 @@
+/**
+ * `<RadioGroup>`'s own styles, injected as an inline `<style>` rather than a `.css` import so the
+ * package can stay `"sideEffects": false` (same approach as `Toggle`'s and `Tabs`' stylesheets).
+ *
+ * Every `--vpg-*` property is *read* here through `var()` and never assigned inline by the
+ * component: an inline style declaration always wins over a stylesheet rule for the same property
+ * on the same element, so an inline theme property would permanently shadow
+ * `@vipengele/react-tokens`' dark-mode reassignment and this group would stop adapting to colour mode.
+ */
+export declare const radioGroupStylesheet = "\n.vpg-radio-group {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n";
+//# sourceMappingURL=RadioGroup.stylesheet.d.ts.map

package/dist/RadioGroup/RadioGroup.stylesheet.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroup.stylesheet.d.ts","sourceRoot":"","sources":["../../src/RadioGroup/RadioGroup.stylesheet.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,eAAO,MAAM,oBAAoB,2FAMhC,CAAC"}

package/dist/Skeleton/Skeleton.d.ts

@@ -0,0 +1,18 @@
+import type { HTMLAttributes } from "react";
+export type SkeletonVariant = "rect" | "circle" | "text";
+export interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {
+    variant?: SkeletonVariant;
+    /** A number is treated as pixels, matching React's own inline-style convention; a string
+     * carries its own unit. Neither is a `--vpg-*` custom property, so both are safe to set
+     * as an inline style — they're the per-instance dimensions the caller controls, not a
+     * theme-controlled colour. */
+    width?: string | number;
+    /** Same convention as `width`. Left unset, the variant's own stylesheet rule sizes it. */
+    height?: string | number;
+}
+/**
+ * A shimmering placeholder that stands in for content still loading, shaped to match what it
+ * will become: a line of text, a rectangular block, or a circular avatar/icon slot.
+ */
+export declare function Skeleton({ variant, width, height, className, style, ...rest }: SkeletonProps): import("react").JSX.Element;
+//# sourceMappingURL=Skeleton.d.ts.map

package/dist/Skeleton/Skeleton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../src/Skeleton/Skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAiB,cAAc,EAAE,MAAM,OAAO,CAAC;AAG3D,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAC;AAEzD,MAAM,WAAW,aAAc,SAAQ,cAAc,CAAC,cAAc,CAAC;IACnE,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B;;;kCAG8B;IAC9B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,0FAA0F;IAC1F,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC1B;AAOD;;;GAGG;AACH,wBAAgB,QAAQ,CAAC,EAAE,OAAgB,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,IAAI,EAAE,EAAE,aAAa,+BAsBrG"}

package/dist/Skeleton/Skeleton.stylesheet.d.ts

@@ -0,0 +1,25 @@
+/**
+ * `<Skeleton>`'s own styles, injected as an inline `<style>` rather than a `.css` import so the
+ * package can stay `"sideEffects": false` (same approach as `Spinner`'s and `Avatar`'s
+ * stylesheets).
+ *
+ * Every `--vpg-*` property this component depends on is *read* here through `var()` and
+ * never assigned inline by the component: an inline style declaration always wins over a
+ * stylesheet rule for the same property on the same element, so an inline `--vpg-surface-*`
+ * would permanently shadow the dark-mode reassignment in `@vipengele/react-tokens`'s base stylesheet.
+ *
+ * The shimmer sweeps a gradient across the element by animating `background-position` rather
+ * than `opacity`: an opacity pulse reads as the whole placeholder flashing, while a moving
+ * highlight reads as light travelling across a surface, which is the effect a loading
+ * placeholder is meant to suggest.
+ *
+ * The gradient computes its own lightness swing from `--vpg-surface` directly, at wider
+ * `--vpg-lift`/`--vpg-sink` multiples than `--vpg-surface-raised`/`-hover` use —
+ * rather than reading those two properties as-is. Their swing is tuned for a static hover/press
+ * affordance, and reads as barely-there motion once animated against `--vpg-surface-dark`'s
+ * low base lightness, where the same absolute delta is far less perceptible than it is against
+ * the light surface. Scoped to this component alone so the shared ramp (Button's secondary
+ * variant, ButtonGroup's hover state, …) keeps its own tuning.
+ */
+export declare const skeletonStylesheet = "\n@keyframes vpg-skeleton-shimmer {\n  0% { background-position: 200% 0; }\n  100% { background-position: -200% 0; }\n}\n\n.vpg-skeleton {\n  display: block;\n  flex: none;\n  box-sizing: border-box;\n  background-image: linear-gradient(\n    90deg,\n    oklch(from var(--vpg-surface) calc(l + var(--vpg-lift) * 2.5) c h) 25%,\n    oklch(from var(--vpg-surface) calc(l - var(--vpg-sink) * 1.5) c h) 50%,\n    oklch(from var(--vpg-surface) calc(l + var(--vpg-lift) * 2.5) c h) 75%\n  );\n  background-size: 200% 100%;\n  animation: vpg-skeleton-shimmer 1.5s ease-in-out infinite;\n}\n\n.vpg-skeleton-text {\n  width: 100%;\n  height: 1em;\n  border-radius: var(--vpg-radius-sm);\n}\n\n.vpg-skeleton-rect {\n  width: 100%;\n  height: 1.25rem;\n  border-radius: var(--vpg-radius);\n}\n\n.vpg-skeleton-circle {\n  width: 2.5rem;\n  /* Falls back to a square only when the caller sets a width but no height, so a single\n     `width` prop is enough to draw a circle without a matching `height`. Explicit `height`\n     (set inline, per-instance) still wins over this and sizes the other axis. */\n  aspect-ratio: 1;\n  border-radius: 50%;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  /* Slowed, not stopped: a placeholder that never moves at all reports nothing about the wait\n     it exists to report. */\n  .vpg-skeleton {\n    animation-duration: 3s;\n  }\n}\n";
+//# sourceMappingURL=Skeleton.stylesheet.d.ts.map

package/dist/Skeleton/Skeleton.stylesheet.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.stylesheet.d.ts","sourceRoot":"","sources":["../../src/Skeleton/Skeleton.stylesheet.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,kBAAkB,01CAgD9B,CAAC"}

package/dist/Slider/Slider.d.ts

@@ -0,0 +1,12 @@
+import type { InputHTMLAttributes } from "react";
+export interface SliderProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type"> {
+}
+/**
+ * A native `<input type="range">` styled as a single-thumb slider. It forwards every `<input>`
+ * prop except `type`, so `min`/`max`/`step`, `value`/`onChange` (controlled) or `defaultValue`
+ * (uncontrolled), and `disabled` all work exactly as they do on a plain range input. No custom
+ * keyboard or pointer handling: the native element already handles arrow-key stepping, dragging,
+ * touch, and form participation for free.
+ */
+export declare function Slider({ className, ...rest }: SliderProps): import("react").JSX.Element;
+//# sourceMappingURL=Slider.d.ts.map

package/dist/Slider/Slider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../../src/Slider/Slider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAGjD,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAAG;AAE3F;;;;;;GAMG;AACH,wBAAgB,MAAM,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,WAAW,+BAezD"}

package/dist/Slider/Slider.stylesheet.d.ts

@@ -0,0 +1,18 @@
+/**
+ * `<Slider>`'s own styles, injected as an inline `<style>` rather than a `.css` import so the
+ * package can stay `"sideEffects": false` (same approach as `Toggle.stylesheet.ts`).
+ *
+ * Every `--vpg-*` property is *read* here through `var()` and never assigned inline by the
+ * component: an inline style declaration always wins over a stylesheet rule for the same
+ * property on the same element, so an inline theme property would permanently shadow
+ * `@vipengele/react-tokens`' dark-mode reassignment and this slider would stop adapting to colour mode.
+ *
+ * The track takes a step of the spacing scale and the thumb one of the icon scale, a thumb being
+ * glyph-sized rather than a control in its own right.
+ *
+ * `-webkit-` and `-moz-` pseudo-elements can't be grouped in one selector — an invalid selector
+ * in a comma-separated list drops the whole rule in some engines — so track and thumb styling is
+ * duplicated per vendor prefix.
+ */
+export declare const sliderStylesheet = "\n.vpg-slider {\n  appearance: none;\n  -webkit-appearance: none;\n  box-sizing: border-box;\n  display: block;\n  width: 100%;\n  margin: 0;\n  padding: 0;\n  background: transparent;\n  cursor: pointer;\n}\n\n.vpg-slider::-webkit-slider-runnable-track {\n  box-sizing: border-box;\n  width: 100%;\n  height: var(--vpg-space-1);\n  border-radius: var(--vpg-radius-full);\n  background-color: var(--vpg-surface-sunken);\n  border: 1px solid var(--vpg-border);\n}\n\n.vpg-slider::-moz-range-track {\n  box-sizing: border-box;\n  width: 100%;\n  height: var(--vpg-space-1);\n  border-radius: var(--vpg-radius-full);\n  background-color: var(--vpg-surface-sunken);\n  border: 1px solid var(--vpg-border);\n}\n\n.vpg-slider::-webkit-slider-thumb {\n  -webkit-appearance: none;\n  box-sizing: border-box;\n  width: var(--vpg-icon-md);\n  height: var(--vpg-icon-md);\n  margin-top: calc((var(--vpg-space-1) - var(--vpg-icon-md)) / 2);\n  border-radius: var(--vpg-radius-full);\n  border: 1px solid var(--vpg-accent);\n  background-color: var(--vpg-accent);\n  cursor: pointer;\n  transition: background-color 120ms ease, border-color 120ms ease;\n}\n\n.vpg-slider::-moz-range-thumb {\n  box-sizing: border-box;\n  width: var(--vpg-icon-md);\n  height: var(--vpg-icon-md);\n  border-radius: var(--vpg-radius-full);\n  border: 1px solid var(--vpg-accent);\n  background-color: var(--vpg-accent);\n  cursor: pointer;\n  transition: background-color 120ms ease, border-color 120ms ease;\n}\n\n.vpg-slider:focus-visible::-webkit-slider-thumb {\n  outline: var(--vpg-focus-ring-width) solid var(--vpg-accent-ring);\n  outline-offset: var(--vpg-focus-ring-offset);\n}\n\n.vpg-slider:focus-visible::-moz-range-thumb {\n  outline: var(--vpg-focus-ring-width) solid var(--vpg-accent-ring);\n  outline-offset: var(--vpg-focus-ring-offset);\n}\n\n.vpg-slider:disabled {\n  cursor: not-allowed;\n  opacity: 0.55;\n}\n\n.vpg-slider:disabled::-webkit-slider-thumb {\n  cursor: not-allowed;\n}\n\n.vpg-slider:disabled::-moz-range-thumb {\n  cursor: not-allowed;\n}\n";
+//# sourceMappingURL=Slider.stylesheet.d.ts.map

package/dist/Slider/Slider.stylesheet.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.stylesheet.d.ts","sourceRoot":"","sources":["../../src/Slider/Slider.stylesheet.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,gBAAgB,igEA6E5B,CAAC"}

package/dist/Spinner/Spinner.d.ts

@@ -0,0 +1,19 @@
+/** Spinner's size scale, shared with `Button` so a spinner sits inside a button of the
+ * same size without a per-call-site size prop. */
+export type SpinnerSize = "sm" | "md" | "lg";
+export interface SpinnerProps {
+    size?: SpinnerSize;
+    /** Inline stroke colour override. A deliberate escape hatch: it wins over the stylesheet's
+     * `var(--vpg-accent)`, so this instance stops adapting to light/dark on its own. Leave it
+     * unset unless the spinner sits on a ground the theme doesn't know about. */
+    color?: string;
+    /** Announced by the `role="status"` region while the spinner is mounted. */
+    label?: string;
+    className?: string;
+}
+/**
+ * An indeterminate loading indicator, rotated by a CSS `@keyframes` rule in its own stylesheet
+ * and stroked in `var(--vpg-accent)` by default.
+ */
+export declare function Spinner({ size, color, label, className }: SpinnerProps): import("react").JSX.Element;
+//# sourceMappingURL=Spinner.d.ts.map

package/dist/Spinner/Spinner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../src/Spinner/Spinner.tsx"],"names":[],"mappings":"AAEA;kDACkD;AAClD,MAAM,MAAM,WAAW,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE7C,MAAM,WAAW,YAAY;IAC3B,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;iFAE6E;IAC7E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4EAA4E;IAC5E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAQD;;;GAGG;AACH,wBAAgB,OAAO,CAAC,EAAE,IAAW,EAAE,KAAK,EAAE,KAAiB,EAAE,SAAS,EAAE,EAAE,YAAY,+BAiBzF"}

package/dist/Spinner/Spinner.stylesheet.d.ts

@@ -0,0 +1,14 @@
+/**
+ * `<Spinner>`'s own styles, injected as an inline `<style>` rather than a `.css` import so the
+ * package can stay `"sideEffects": false` (same approach as `@vipengele/react-tokens`'s base stylesheet
+ * and `@vipengele/react-icons`'s icon stylesheet).
+ *
+ * Every `--vpg-*` property this component depends on is *read* here through `var()` and
+ * never assigned inline by the component: an inline style declaration always wins over a
+ * stylesheet rule for the same property on the same element, so an inline `--vpg-accent`
+ * would permanently shadow the dark-mode reassignment in `@vipengele/react-tokens`'s base stylesheet.
+ *
+ * A spinner is glyph-sized, so every size takes a step of the icon scale.
+ */
+export declare const spinnerStylesheet = "\n@keyframes vpg-spinner-rotate {\n  to { transform: rotate(360deg); }\n}\n\n.vpg-spinner {\n  display: inline-block;\n  flex: none;\n  vertical-align: middle;\n  /* The track's stroke is `currentColor`, so this one declaration colours the whole spinner\n     and a caller's `color` prop overrides it inline without touching any theme property. */\n  color: var(--vpg-accent);\n  animation: vpg-spinner-rotate 0.7s linear infinite;\n}\n\n.vpg-spinner circle {\n  fill: none;\n  stroke: currentColor;\n  stroke-width: 3;\n  stroke-linecap: round;\n  /* Circumference of r=10 is ~62.8; a 44/62.8 dash leaves the gap that makes the rotation\n     readable. Without the gap the ring is closed and spinning it looks static. */\n  stroke-dasharray: 44 62.8;\n}\n\n.vpg-spinner-sm {\n  width: var(--vpg-icon-md);\n  height: var(--vpg-icon-md);\n}\n\n.vpg-spinner-md {\n  width: var(--vpg-icon-lg);\n  height: var(--vpg-icon-lg);\n}\n\n.vpg-spinner-lg {\n  width: var(--vpg-icon-xl);\n  height: var(--vpg-icon-xl);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  /* Slowed, not stopped: a spinner that doesn't move reports nothing about the wait it exists\n     to report. */\n  .vpg-spinner {\n    animation-duration: 2.4s;\n  }\n}\n";
+//# sourceMappingURL=Spinner.stylesheet.d.ts.map

package/dist/Spinner/Spinner.stylesheet.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner.stylesheet.d.ts","sourceRoot":"","sources":["../../src/Spinner/Spinner.stylesheet.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,iBAAiB,ktCA+C7B,CAAC"}

package/dist/Tabs/Tabs.d.ts

@@ -0,0 +1,46 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+export type TabsOrientation = "horizontal" | "vertical";
+export interface TabsListProps extends HTMLAttributes<HTMLDivElement> {
+    children?: ReactNode;
+}
+declare function TabsList({ className, children, onKeyDown, ...rest }: TabsListProps): import("react").JSX.Element;
+export interface TabsTabProps extends Omit<HTMLAttributes<HTMLButtonElement>, "children"> {
+    /** Pairs this tab with the `Tabs.Panel` carrying the same `value`. */
+    value: string;
+    /** Skipped entirely by arrow-key and `Home`/`End` traversal, and not clickable. */
+    disabled?: boolean;
+    children?: ReactNode;
+}
+declare function TabsTab({ value, disabled, className, children, onClick, ...rest }: TabsTabProps): import("react").JSX.Element;
+export interface TabsPanelProps extends HTMLAttributes<HTMLDivElement> {
+    /** Pairs this panel with the `Tabs.Tab` carrying the same `value`. */
+    value: string;
+    children?: ReactNode;
+}
+declare function TabsPanel({ value, className, children, ...rest }: TabsPanelProps): import("react").JSX.Element | null;
+export interface TabsProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
+    /** Makes the selection controlled; pair it with `onChange`. */
+    value?: string;
+    /** The initially selected value when the selection is uncontrolled. Left out, the first
+     * `Tabs.Tab` in `children` is selected. */
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    /** `horizontal` (the default) traverses with Left/Right, `vertical` with Up/Down. */
+    orientation?: TabsOrientation;
+    children?: ReactNode;
+}
+declare function TabsImpl({ value, defaultValue, onChange, orientation, className, children, ...rest }: TabsProps): import("react").JSX.Element;
+type TabsComponent = typeof TabsImpl & {
+    List: typeof TabsList;
+    Tab: typeof TabsTab;
+    Panel: typeof TabsPanel;
+};
+/**
+ * A tabbed interface: `Tabs.List` holding `Tabs.Tab`s, paired by `value` with the `Tabs.Panel`s
+ * beside it. Selection is controlled through `value`/`onChange` or left to `Tabs` itself, seeded
+ * by `defaultValue` or by the first tab. Only the selected panel is mounted, so a panel's own
+ * state does not survive a switch away from it.
+ */
+export declare const Tabs: TabsComponent;
+export {};
+//# sourceMappingURL=Tabs.d.ts.map

package/dist/Tabs/Tabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../src/Tabs/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,cAAc,EAInB,KAAK,SAAS,EAKf,MAAM,OAAO,CAAC;AAGf,MAAM,MAAM,eAAe,GAAG,YAAY,GAAG,UAAU,CAAC;AAoCxD,MAAM,WAAW,aAAc,SAAQ,cAAc,CAAC,cAAc,CAAC;IACnE,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,iBAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,aAAa,+BA6C3E;AAED,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,cAAc,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC;IACvF,sEAAsE;IACtE,KAAK,EAAE,MAAM,CAAC;IACd,mFAAmF;IACnF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,iBAAS,OAAO,CAAC,EAAE,KAAK,EAAE,QAAgB,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,IAAI,EAAE,EAAE,YAAY,+BAiChG;AAED,MAAM,WAAW,cAAe,SAAQ,cAAc,CAAC,cAAc,CAAC;IACpE,sEAAsE;IACtE,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,iBAAS,SAAS,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,cAAc,sCAqBzE;AAED,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IACjF,+DAA+D;IAC/D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;+CAC2C;IAC3C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,qFAAqF;IACrF,WAAW,CAAC,EAAE,eAAe,CAAC;IAC9B,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AA4DD,iBAAS,QAAQ,CAAC,EAAE,KAAK,EAAE,YAAY,EAAE,QAAQ,EAAE,WAA0B,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,SAAS,+BAiDvH;AAED,KAAK,aAAa,GAAG,OAAO,QAAQ,GAAG;IACrC,IAAI,EAAE,OAAO,QAAQ,CAAC;IACtB,GAAG,EAAE,OAAO,OAAO,CAAC;IACpB,KAAK,EAAE,OAAO,SAAS,CAAC;CACzB,CAAC;AAEF;;;;;GAKG;AAIH,eAAO,MAAM,IAAI,EAIX,aAAa,CAAC"}

package/dist/Tabs/Tabs.stylesheet.d.ts

@@ -0,0 +1,15 @@
+/**
+ * `<Tabs>`'s own styles, injected as an inline `<style>` rather than a `.css` import so the
+ * package can stay `"sideEffects": false` (same approach as `Card`'s and `Button`'s stylesheets).
+ *
+ * Every `--vpg-*` property is *read* here through `var()` and never assigned inline by the
+ * component: an inline style declaration always wins over a stylesheet rule for the same property
+ * on the same element, so an inline `--vpg-accent` would permanently shadow the dark-mode
+ * reassignment in `@vipengele/react-tokens`'s base stylesheet and these tabs would stop adapting to
+ * colour mode.
+ *
+ * The selected indicator is a border on the tab itself, matched by a transparent border of the
+ * same width on every unselected tab, so selection never shifts the row's layout.
+ */
+export declare const tabsStylesheet = "\n.vpg-tabs {\n  display: flex;\n  flex-direction: column;\n  color: var(--vpg-ink);\n  font-family: var(--vpg-font-sans);\n}\n\n/* A vertical tablist sits beside its panel, not above it. */\n.vpg-tabs-vertical {\n  flex-direction: row;\n}\n\n.vpg-tabs-list {\n  display: flex;\n}\n\n.vpg-tabs-list-horizontal {\n  flex-direction: row;\n  border-bottom: 1px solid var(--vpg-border);\n}\n\n.vpg-tabs-list-vertical {\n  flex-direction: column;\n  border-right: 1px solid var(--vpg-border);\n}\n\n.vpg-tabs-tab {\n  appearance: none;\n  background: none;\n  cursor: pointer;\n  box-sizing: border-box;\n  padding: 0.5rem 0.75rem;\n  border: none;\n  color: var(--vpg-ink-muted);\n  font: inherit;\n  font-size: var(--vpg-font-size-sm);\n  line-height: 1.5;\n}\n\n.vpg-tabs-list-horizontal .vpg-tabs-tab {\n  border-bottom: 2px solid transparent;\n  margin-bottom: -1px;\n}\n\n.vpg-tabs-list-vertical .vpg-tabs-tab {\n  text-align: left;\n  border-right: 2px solid transparent;\n  margin-right: -1px;\n}\n\n.vpg-tabs-tab:hover:not(:disabled) {\n  color: var(--vpg-ink);\n  background-color: var(--vpg-surface-hover);\n}\n\n.vpg-tabs-tab:focus-visible {\n  /* Inset so the ring stays inside the list's own border rather than straddling it. */\n  outline: var(--vpg-focus-ring-width) solid var(--vpg-accent-ring);\n  outline-offset: calc(var(--vpg-focus-ring-offset) * -1);\n}\n\n.vpg-tabs-tab:disabled {\n  cursor: not-allowed;\n  color: var(--vpg-ink-subtle);\n}\n\n.vpg-tabs-tab-selected {\n  color: var(--vpg-accent);\n}\n\n/* Scoped by orientation to outweigh the transparent placeholder border above, which is itself\n   orientation-scoped and would otherwise win on specificity. */\n.vpg-tabs-list-horizontal .vpg-tabs-tab-selected {\n  border-bottom-color: var(--vpg-accent);\n}\n\n.vpg-tabs-list-vertical .vpg-tabs-tab-selected {\n  border-right-color: var(--vpg-accent);\n}\n\n.vpg-tabs-panel {\n  padding: 1rem 0;\n}\n\n.vpg-tabs-vertical .vpg-tabs-panel {\n  padding: 0 1rem;\n}\n";
+//# sourceMappingURL=Tabs.stylesheet.d.ts.map

package/dist/Tabs/Tabs.stylesheet.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.stylesheet.d.ts","sourceRoot":"","sources":["../../src/Tabs/Tabs.stylesheet.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,cAAc,u8DAwF1B,CAAC"}

package/dist/TextField/TextField.d.ts

@@ -0,0 +1,24 @@
+import type { InputHTMLAttributes, ReactNode } from "react";
+export interface TextFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type"> {
+    /** The native input `type` — `"text"`, `"email"`, `"password"`, etc. Defaults to `"text"`. */
+    type?: string;
+    /** An adornment rendered before the input, inside the field's border — an icon, a prefix, a
+     * currency symbol. Passed straight to `FieldShell`'s slot of the same name. */
+    leading?: ReactNode;
+    /** An adornment rendered after the input, inside the field's border — a unit, a spinner, an
+     * interactive button. Passed straight to `FieldShell`'s slot of the same name. */
+    trailing?: ReactNode;
+}
+/**
+ * A native `<input>` for free-text entry, wrapped in the `FieldShell` that draws the field's
+ * chrome. No custom keyboard handling: the native element handles focus, typing and form
+ * participation, and the shell reads focus, `aria-invalid` and disabledness off it, so a text
+ * field and any other shell-composing control read as the same kind of control side by side in a
+ * form.
+ *
+ * `.vpg-text-field`, the caller's `className` and the prop spread all land on the `<input>`.
+ * The border, background and states belong to the shell, so a `className` passed here cannot
+ * restyle them — that is a rule on `.vpg-field-shell` (ADR-0011).
+ */
+export declare function TextField({ className, type, leading, trailing, ...rest }: TextFieldProps): import("react").JSX.Element;
+//# sourceMappingURL=TextField.d.ts.map

package/dist/TextField/TextField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../../src/TextField/TextField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAI5D,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IACzF,8FAA8F;IAC9F,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;mFAC+E;IAC/E,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;sFACkF;IAClF,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,SAAS,CAAC,EAAE,SAAS,EAAE,IAAa,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,cAAc,+BAiBjG"}

package/dist/TextField/TextField.stylesheet.d.ts

@@ -0,0 +1,29 @@
+/**
+ * `<TextField>`'s own styles, injected as an inline `<style>` rather than a `.css` import so the
+ * package can stay `"sideEffects": false` (same approach as every other component's stylesheet).
+ *
+ * Every `--vpg-*` property is *read* here through `var()` and never assigned inline by the
+ * component: an inline style declaration always wins over a stylesheet rule for the same
+ * property on the same element, so an inline `--vpg-ink` would permanently shadow
+ * `@vipengele/react-tokens`'s dark-mode reassignment and this field would stop adapting to colour mode.
+ *
+ * This is the styling of an input sitting inside a `FieldShell`, so it carries nothing the shell
+ * owns: no border, no background, no radius, no width, no box-shadow, and no rule for the hover,
+ * focus, invalid or disabled states. Redeclaring one of those means the treatment is applied
+ * twice — a ring drawn on the input inside the ring drawn on the shell, an opacity multiplied
+ * into itself. `outline: none` is here for the same reason: the shell draws the focus ring, and
+ * the input's native outline would sit inside it.
+ *
+ * Height is the shell's too, and `align-self: stretch` is how the control takes it rather than
+ * restating it: the shell centres its children, and a centred input is only as tall as its own
+ * text, so the top and bottom few pixels of the field focus nothing when clicked. Stretching
+ * fills whatever box the input is handed — the shell's content box when it is a direct child,
+ * and its own flex line when it sits inside a wrapping row of chips. A `height` here cannot do
+ * either: the shell's height is a floor, not a fixed length, so a percentage resolves against an
+ * indefinite containing block and collapses to the input's own text.
+ *
+ * Typography stays the input's own concern. A native input inherits neither font nor colour from
+ * its ancestors, so both are declared here or the field renders in the UA's form defaults.
+ */
+export declare const textFieldStylesheet = "\n.vpg-text-field {\n  box-sizing: border-box;\n  align-self: stretch;\n  min-width: 0;\n  padding: 0;\n  border: none;\n  outline: none;\n  background: none;\n  color: inherit;\n  font-family: var(--vpg-font-sans);\n  font-size: var(--vpg-font-size-sm);\n  line-height: 1.5;\n}\n\n.vpg-text-field::placeholder {\n  color: var(--vpg-ink-subtle);\n}\n";
+//# sourceMappingURL=TextField.stylesheet.d.ts.map

package/dist/TextField/TextField.stylesheet.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextField.stylesheet.d.ts","sourceRoot":"","sources":["../../src/TextField/TextField.stylesheet.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,eAAO,MAAM,mBAAmB,mWAkB/B,CAAC"}

package/dist/Toggle/Toggle.d.ts

@@ -0,0 +1,12 @@
+import type { InputHTMLAttributes } from "react";
+export interface ToggleProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "role"> {
+}
+/**
+ * A native `<input type="checkbox" role="switch">` styled as a switch. No custom keyboard
+ * handling and no hand-set `aria-checked`: the native element's own `checked` state already
+ * exposes it, and a hand-set `aria-checked` would go stale in the uncontrolled
+ * (`defaultChecked`) case, where a click updates the DOM's `checked` property without
+ * triggering a re-render.
+ */
+export declare function Toggle({ className, ...rest }: ToggleProps): import("react").JSX.Element;
+//# sourceMappingURL=Toggle.d.ts.map

package/dist/Toggle/Toggle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toggle.d.ts","sourceRoot":"","sources":["../../src/Toggle/Toggle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAGjD,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAAG;AAEpG;;;;;;GAMG;AACH,wBAAgB,MAAM,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,WAAW,+BAgBzD"}

package/dist/Toggle/Toggle.stylesheet.d.ts

@@ -0,0 +1,16 @@
+/**
+ * `<Toggle>`'s own styles, injected as an inline `<style>` rather than a `.css` import so the
+ * package can stay `"sideEffects": false` (same approach as `Button.stylesheet.ts`).
+ *
+ * Every `--vpg-*` property is *read* here through `var()` and never assigned inline by the
+ * component: an inline style declaration always wins over a stylesheet rule for the same
+ * property on the same element, so an inline theme property would permanently shadow
+ * `@vipengele/react-tokens`' dark-mode reassignment and this toggle would stop adapting to colour mode.
+ *
+ * The track is a glyph rather than a pointer target — the label row around it is what a pointer
+ * aims at — so its height and thumb take steps of the icon scale rather than of the size scale.
+ * The thumb takes the accent's contrast colour: the thumb sits on the accent once the switch is
+ * on, and a near-white thumb is invisible on a light accent.
+ */
+export declare const toggleStylesheet = "\n.vpg-toggle {\n  appearance: none;\n  -webkit-appearance: none;\n  box-sizing: border-box;\n  display: inline-block;\n  flex: none;\n  /* A ratio of the track's own height: the width is a function of thumb travel, so binding it to\n     a control-height step would restretch every switch when that step moves. */\n  width: calc(var(--vpg-icon-lg) * 1.8);\n  height: var(--vpg-icon-lg);\n  margin: 0;\n  padding: 0;\n  border: 1px solid var(--vpg-border);\n  border-radius: var(--vpg-radius-full);\n  background-color: var(--vpg-surface-sunken);\n  cursor: pointer;\n  transition: background-color 120ms ease, border-color 120ms ease;\n}\n\n.vpg-toggle::before {\n  content: \"\";\n  display: block;\n  box-sizing: border-box;\n  width: var(--vpg-icon-sm);\n  height: var(--vpg-icon-sm);\n  margin: 1px;\n  border-radius: var(--vpg-radius-full);\n  background-color: var(--vpg-surface-raised);\n  transform: translateX(0);\n  transition: transform 120ms ease, background-color 120ms ease;\n}\n\n.vpg-toggle:checked {\n  background-color: var(--vpg-accent);\n  border-color: var(--vpg-accent);\n}\n\n.vpg-toggle:checked::before {\n  background-color: var(--vpg-accent-contrast);\n  transform: translateX(calc(var(--vpg-icon-lg) * 1.8 - var(--vpg-icon-sm) - 4px));\n}\n\n.vpg-toggle:focus-visible {\n  outline: var(--vpg-focus-ring-width) solid var(--vpg-accent-ring);\n  outline-offset: var(--vpg-focus-ring-offset);\n}\n\n.vpg-toggle:disabled {\n  cursor: not-allowed;\n  opacity: 0.55;\n}\n";
+//# sourceMappingURL=Toggle.stylesheet.d.ts.map

package/dist/Toggle/Toggle.stylesheet.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toggle.stylesheet.d.ts","sourceRoot":"","sources":["../../src/Toggle/Toggle.stylesheet.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,gBAAgB,y9CAoD5B,CAAC"}