sonahang-ui 1.0.0

package/dist/components/ProgressBar/ProgressBar.d.ts

@@ -0,0 +1,34 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { ProgressBarSize } from "./progressBar.tokens";
+import "./ProgressBar.css";
+export type ProgressBarProps = {
+    /**
+     * Progress so far, between `0` and `max`. Omit for an indeterminate bar —
+     * for work whose duration isn't known yet.
+     */
+    value?: number;
+    /** Upper bound of `value`. Defaults to `100`. */
+    max?: number;
+    /** Visible label above the track. Provide this or `aria-label`. */
+    label?: ReactNode;
+    /** Shows the percentage beside the label. Ignored when indeterminate. */
+    showValue?: boolean;
+    /**
+     * Formats the displayed value. Also drives `aria-valuetext`, so screen
+     * readers announce "3 of 8 files" rather than a bare percentage.
+     */
+    formatValue?: (value: number, max: number) => string;
+    /** Track thickness. Defaults to `md`. */
+    size?: ProgressBarSize;
+    /** Accessible name when there's no visible `label`. */
+    "aria-label"?: string;
+    className?: string;
+} & Omit<HTMLAttributes<HTMLDivElement>, "className" | "role">;
+/**
+ * Horizontal progress indicator.
+ *
+ * Renders `role="progressbar"`, with `aria-valuenow` omitted when
+ * indeterminate — that absence is what tells assistive tech the duration
+ * isn't known, rather than it sitting at zero.
+ */
+export declare function ProgressBar({ value, max, label, showValue, formatValue, size, "aria-label": ariaLabel, className, ...props }: ProgressBarProps): import("react").JSX.Element;

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

@@ -0,0 +1,4 @@
+export { ProgressBar } from "./ProgressBar";
+export type { ProgressBarProps } from "./ProgressBar";
+export { progressBarSizes } from "./progressBar.tokens";
+export type { ProgressBarSize } from "./progressBar.tokens";

package/dist/components/ProgressBar/progressBar.tokens.d.ts

@@ -0,0 +1,2 @@
+export declare const progressBarSizes: readonly ["sm", "md", "lg"];
+export type ProgressBarSize = (typeof progressBarSizes)[number];

package/dist/components/Radio/Radio.d.ts

@@ -0,0 +1,18 @@
+import type { InputHTMLAttributes, ReactNode } from "react";
+import "./Radio.css";
+export type RadioProps = {
+    /** Value this option represents. Required when inside a `RadioGroup`. */
+    value?: string;
+    /** Visible label sitting beside the control. */
+    label?: ReactNode;
+    /** Class for the wrapping `<label>`. Use `inputClassName` for the control. */
+    className?: string;
+    /** Class for the underlying `<input type="radio">`. */
+    inputClassName?: string;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "value" | "className">;
+/**
+ * A single radio option. Usually rendered inside a `RadioGroup`, which
+ * supplies the shared `name` and selection; works standalone too, in which
+ * case `name`/`checked`/`onChange` behave like a plain `<input type="radio">`.
+ */
+export declare function Radio({ value, label, className, inputClassName, name, checked, disabled, onChange, ...props }: RadioProps): import("react").JSX.Element;

package/dist/components/Radio/RadioGroup.d.ts

@@ -0,0 +1,28 @@
+import type { ReactNode } from "react";
+import "./Radio.css";
+export type RadioGroupProps = {
+    children?: ReactNode;
+    /** Selected value — makes the group controlled. */
+    value?: string;
+    /** Initial selection when uncontrolled. */
+    defaultValue?: string;
+    /** Fired with the newly selected value. */
+    onChange?: (value: string) => void;
+    /** Visible label for the group. Provide this or `aria-label`. */
+    label?: ReactNode;
+    /** Hint shown below the options. Replaced by `error` when that's set. */
+    helperText?: ReactNode;
+    /** Validation message. Its presence also marks the group invalid. */
+    error?: ReactNode;
+    /** Radio group name. Auto-generated when omitted. */
+    name?: string;
+    /** Layout direction for the options. Defaults to `vertical`. */
+    orientation?: "vertical" | "horizontal";
+    /** Disables every option in the group. */
+    disabled?: boolean;
+    /** Accessible name when there's no visible `label`. */
+    "aria-label"?: string;
+    className?: string;
+};
+/** Groups `Radio` options, coordinating their shared name and selection. */
+export declare function RadioGroup({ children, value, defaultValue, onChange, label, helperText, error, name, orientation, disabled, "aria-label": ariaLabel, className, }: RadioGroupProps): import("react").JSX.Element;

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

@@ -0,0 +1,4 @@
+export { Radio } from "./Radio";
+export type { RadioProps } from "./Radio";
+export { RadioGroup } from "./RadioGroup";
+export type { RadioGroupProps } from "./RadioGroup";

package/dist/components/Radio/radio.context.d.ts

@@ -0,0 +1,17 @@
+export type RadioGroupContextValue = {
+    /** Shared `name`, which is what makes the browser treat them as one group. */
+    name: string;
+    /** Currently selected value in the group. */
+    value?: string;
+    /** Called with the newly selected value. */
+    onSelect: (value: string) => void;
+    /** Set when the whole group is disabled. */
+    disabled?: boolean;
+};
+/**
+ * Lets `RadioGroup` coordinate its `Radio` children without cloning them.
+ * A `Radio` used outside a group falls back to its own props.
+ * Kept in its own module so the component files only export components
+ * (see the react-refresh rule in eslint.config.js).
+ */
+export declare const RadioGroupContext: import("react").Context<RadioGroupContextValue | undefined>;

package/dist/components/RangeSlider/RangeSlider.d.ts

@@ -0,0 +1,36 @@
+import type { InputHTMLAttributes, ReactNode } from "react";
+import "./RangeSlider.css";
+export type RangeSliderProps = {
+    /** Visible label, associated with the slider via `htmlFor`/`id`. */
+    label?: ReactNode;
+    /** Hint shown below the slider. Replaced by `error` when that's set. */
+    helperText?: ReactNode;
+    /** Validation message. Its presence also marks the slider invalid. */
+    error?: ReactNode;
+    /** Current value — makes the slider controlled. */
+    value?: number;
+    /** Initial value when uncontrolled. Defaults to `min`. */
+    defaultValue?: number;
+    /** Fired with the new value. */
+    onChange?: (value: number) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    /** Shows the current value beside the label. */
+    showValue?: boolean;
+    /**
+     * Formats the displayed value. Also drives `aria-valuetext`, so screen
+     * readers announce "$50" rather than a bare "50".
+     */
+    formatValue?: (value: number) => string;
+    /** Class for the wrapper element. Use `inputClassName` for the input. */
+    className?: string;
+    /** Class for the underlying `<input type="range">`. */
+    inputClassName?: string;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "value" | "defaultValue" | "onChange" | "min" | "max" | "step" | "className">;
+/**
+ * Single-value slider built on the native `<input type="range">`, so
+ * `role="slider"`, the value announcements, keyboard stepping, and form
+ * submission all come from the platform.
+ */
+export declare function RangeSlider({ label, helperText, error, value, defaultValue, onChange, min, max, step, showValue, formatValue, className, inputClassName, id, disabled, "aria-describedby": ariaDescribedBy, ...props }: RangeSliderProps): import("react").JSX.Element;

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

@@ -0,0 +1,2 @@
+export { RangeSlider } from "./RangeSlider";
+export type { RangeSliderProps } from "./RangeSlider";

package/dist/components/SegmentedControl/SegmentedControl.d.ts

@@ -0,0 +1,39 @@
+import type { ReactNode } from "react";
+import "./SegmentedControl.css";
+export type SegmentedControlOption = {
+    /** Value reported to `onChange` and submitted with a form. */
+    value: string;
+    /** Visible content for the segment. */
+    label: ReactNode;
+    /** Disables just this segment. */
+    disabled?: boolean;
+};
+export type SegmentedControlProps = {
+    /** The segments, in display order. */
+    options: SegmentedControlOption[];
+    /** Selected value — makes the component controlled. */
+    value?: string;
+    /** Initial selection when uncontrolled. */
+    defaultValue?: string;
+    /** Fired with the newly selected value. */
+    onChange?: (value: string) => void;
+    /** Visible label for the group. Provide this or `aria-label`. */
+    label?: ReactNode;
+    /** Radio group name. Auto-generated when omitted. */
+    name?: string;
+    /** Stretches the control to fill its container, splitting segments evenly. */
+    fullWidth?: boolean;
+    /** Disables every segment. */
+    disabled?: boolean;
+    /** Accessible name when there's no visible `label`. */
+    "aria-label"?: string;
+    className?: string;
+};
+/**
+ * Single-select control rendered as a row of blocks.
+ *
+ * Built on native `<input type="radio">` rather than `role="radio"` buttons,
+ * so arrow-key navigation, group semantics, and form submission all come
+ * from the platform instead of being reimplemented.
+ */
+export declare function SegmentedControl({ options, value, defaultValue, onChange, label, name, fullWidth, disabled, "aria-label": ariaLabel, className, }: SegmentedControlProps): import("react").JSX.Element;

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

@@ -0,0 +1,2 @@
+export { SegmentedControl } from "./SegmentedControl";
+export type { SegmentedControlProps, SegmentedControlOption } from "./SegmentedControl";

package/dist/components/Select/Select.d.ts

@@ -0,0 +1,39 @@
+import type { ReactNode, SelectHTMLAttributes } from "react";
+import "./Select.css";
+export type SelectOption = {
+    value: string;
+    label: string;
+    disabled?: boolean;
+};
+export type SelectOptionGroup = {
+    label: string;
+    options: SelectOption[];
+};
+export type SelectProps = {
+    /** Visible label, associated with the select via `htmlFor`/`id`. */
+    label?: ReactNode;
+    /** Hint shown below the select. Replaced by `error` when that's set. */
+    helperText?: ReactNode;
+    /** Validation message. Its presence also marks the select invalid. */
+    error?: ReactNode;
+    /** Options to render. Omit and pass `children` to build them yourself. */
+    options?: (SelectOption | SelectOptionGroup)[];
+    /** Prompt shown while nothing is chosen. Rendered as an unselectable option. */
+    placeholder?: string;
+    /** Decorative icon rendered at the start of the field. */
+    icon?: ReactNode;
+    /** Class for the wrapper element. Use `selectClassName` for the control. */
+    className?: string;
+    /** Class for the underlying `<select>`. */
+    selectClassName?: string;
+    children?: ReactNode;
+} & Omit<SelectHTMLAttributes<HTMLSelectElement>, "className">;
+/**
+ * Dropdown built on the native `<select>`, so keyboard support, type-ahead,
+ * form submission, and the platform's own picker on mobile all come for free.
+ *
+ * The closed control is fully styled; the open list is drawn by the OS and
+ * can't be. A component that needs custom option rendering, search, or
+ * multi-select chips would be a different, much larger widget.
+ */
+export declare function Select({ label, helperText, error, options, placeholder, icon, className, selectClassName, children, id, required, disabled, multiple, "aria-describedby": ariaDescribedBy, ...props }: SelectProps): import("react").JSX.Element;

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

@@ -0,0 +1,2 @@
+export { Select } from "./Select";
+export type { SelectProps, SelectOption, SelectOptionGroup } from "./Select";

package/dist/components/Skeleton/Skeleton.d.ts

@@ -0,0 +1,24 @@
+import type { HTMLAttributes } from "react";
+import type { SkeletonAnimation, SkeletonVariant } from "./skeleton.tokens";
+import "./Skeleton.css";
+export type SkeletonProps = {
+    /** Shape of the placeholder. Defaults to `text`. */
+    variant?: SkeletonVariant;
+    /** Width. A number is treated as pixels. */
+    width?: number | string;
+    /** Height. A number is treated as pixels. Circular falls back to `width`. */
+    height?: number | string;
+    /** Number of text lines to render. Only meaningful for `text`. */
+    lines?: number;
+    /** Placeholder motion. Defaults to `pulse`. */
+    animation?: SkeletonAnimation;
+    className?: string;
+} & Omit<HTMLAttributes<HTMLDivElement>, "className">;
+/**
+ * Placeholder shown while content loads.
+ *
+ * Hidden from assistive tech: a screen reader shouldn't announce a wall of
+ * empty boxes. The surrounding region is what should carry the loading state —
+ * `aria-busy`, or a `Spinner`/live region alongside it.
+ */
+export declare function Skeleton({ variant, width, height, lines, animation, className, ...props }: SkeletonProps): import("react").JSX.Element;

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

@@ -0,0 +1,4 @@
+export { Skeleton } from "./Skeleton";
+export type { SkeletonProps } from "./Skeleton";
+export { skeletonVariants, skeletonAnimations } from "./skeleton.tokens";
+export type { SkeletonVariant, SkeletonAnimation } from "./skeleton.tokens";

package/dist/components/Skeleton/skeleton.tokens.d.ts

@@ -0,0 +1,4 @@
+export declare const skeletonVariants: readonly ["text", "rectangular", "circular"];
+export type SkeletonVariant = (typeof skeletonVariants)[number];
+export declare const skeletonAnimations: readonly ["pulse", "wave", "none"];
+export type SkeletonAnimation = (typeof skeletonAnimations)[number];

package/dist/components/Spinner/Spinner.d.ts

@@ -0,0 +1,22 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { SpinnerSize } from "./spinner.tokens";
+import "./Spinner.css";
+export type SpinnerProps = {
+    /** Size of the ring. Defaults to `md`. */
+    size?: SpinnerSize;
+    /**
+     * What's being waited on. Always in the accessibility tree — a spinner with
+     * no name announces nothing. Defaults to "Loading".
+     */
+    label?: ReactNode;
+    /** Also renders the label visibly beside the ring. */
+    showLabel?: boolean;
+    className?: string;
+} & Omit<HTMLAttributes<HTMLSpanElement>, "className" | "role">;
+/**
+ * Indeterminate loading indicator.
+ *
+ * Takes its colour from `currentColor`, so it inherits whatever it's placed
+ * in — a button, a link, a paragraph — instead of needing a colour prop.
+ */
+export declare function Spinner({ size, label, showLabel, className, ...props }: SpinnerProps): import("react").JSX.Element;

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

@@ -0,0 +1,4 @@
+export { Spinner } from "./Spinner";
+export type { SpinnerProps } from "./Spinner";
+export { spinnerSizes } from "./spinner.tokens";
+export type { SpinnerSize } from "./spinner.tokens";

package/dist/components/Spinner/spinner.tokens.d.ts

@@ -0,0 +1,2 @@
+export declare const spinnerSizes: readonly ["sm", "md", "lg"];
+export type SpinnerSize = (typeof spinnerSizes)[number];

package/dist/components/Stepper/Step.d.ts

@@ -0,0 +1,20 @@
+import type { ReactNode } from "react";
+import type { StepStatus } from "./stepper.context";
+import "./Stepper.css";
+export type StepProps = {
+    /** Short name for the step. */
+    title: ReactNode;
+    /** Optional detail below the title. */
+    description?: ReactNode;
+    /** Overrides the status derived from position. */
+    status?: StepStatus;
+    /** Replaces the number or state glyph in the indicator. */
+    icon?: ReactNode;
+    /** Makes the step activatable, for going back to an earlier one. */
+    onClick?: () => void;
+    /** Prevents activation. Only meaningful alongside `onClick`. */
+    disabled?: boolean;
+    className?: string;
+};
+/** One step in a `Stepper`. */
+export declare function Step({ title, description, status, icon, onClick, disabled, className, }: StepProps): import("react").JSX.Element;

package/dist/components/Stepper/Stepper.d.ts

@@ -0,0 +1,25 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { StepperOrientation } from "./stepper.context";
+import "./Stepper.css";
+export type StepperProps = {
+    children?: ReactNode;
+    /** Zero-based index of the step in progress. */
+    activeStep?: number;
+    /** Layout direction. Defaults to `horizontal`. */
+    orientation?: StepperOrientation;
+    /** Accessible name for the list. Defaults to "Progress". */
+    "aria-label"?: string;
+    className?: string;
+} & Omit<HTMLAttributes<HTMLOListElement>, "className">;
+/**
+ * Ordered progress through a multi-step flow.
+ *
+ * An `ol`, because the order is the meaning. Each step's status is derived
+ * from its position against `activeStep` — the position is what makes a step
+ * complete or upcoming, so callers shouldn't have to restate it.
+ *
+ * It's a progress indicator, not a `nav` landmark: steps are only navigation
+ * when they're given an `onClick`, and a landmark per progress bar would
+ * clutter the landmark list.
+ */
+export declare function Stepper({ children, activeStep, orientation, "aria-label": ariaLabel, className, ...props }: StepperProps): import("react").JSX.Element;

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

@@ -0,0 +1,5 @@
+export { Stepper } from "./Stepper";
+export type { StepperProps } from "./Stepper";
+export { Step } from "./Step";
+export type { StepProps } from "./Step";
+export type { StepperOrientation, StepStatus } from "./stepper.context";

package/dist/components/Stepper/stepper.context.d.ts

@@ -0,0 +1,14 @@
+export type StepperOrientation = "horizontal" | "vertical";
+/** Derived from position against `activeStep`, unless a step overrides it. */
+export type StepStatus = "complete" | "current" | "upcoming" | "error";
+export type StepContextValue = {
+    /** Zero-based position, used for the default indicator number. */
+    index: number;
+    /** True for the final step, which has no connector after it. */
+    isLast: boolean;
+    status: StepStatus;
+    orientation: StepperOrientation;
+};
+export declare const StepContext: import("react").Context<StepContextValue | undefined>;
+/** Reads the surrounding `Stepper`, failing loudly rather than silently. */
+export declare function useStepContext(component: string): StepContextValue;

package/dist/components/Switch/Switch.d.ts

@@ -0,0 +1,22 @@
+import type { InputHTMLAttributes, ReactNode } from "react";
+import "./Switch.css";
+export type SwitchProps = {
+    /** Value this switch represents. Required when inside a `SwitchGroup`. */
+    value?: string;
+    /** Visible label sitting beside the control. */
+    label?: ReactNode;
+    /** Which side the label sits on. Defaults to `right`, or the group's setting. */
+    labelPosition?: "left" | "right";
+    /** Class for the wrapping `<label>`. Use `inputClassName` for the control. */
+    className?: string;
+    /** Class for the underlying `<input>`. */
+    inputClassName?: string;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "value" | "className">;
+/**
+ * Boolean toggle for a setting that applies immediately.
+ *
+ * Renders a checkbox with `role="switch"`, so it's announced as on/off rather
+ * than checked/unchecked. Works standalone, or inside a `SwitchGroup` which
+ * supplies the shared name and selection.
+ */
+export declare function Switch({ value, label, labelPosition, className, inputClassName, name, checked, disabled, onChange, ...props }: SwitchProps): import("react").JSX.Element;

package/dist/components/Switch/SwitchGroup.d.ts

@@ -0,0 +1,30 @@
+import type { ReactNode } from "react";
+import "./Switch.css";
+export type SwitchGroupProps = {
+    children?: ReactNode;
+    /** Values of the switches that are on — makes the group controlled. */
+    value?: string[];
+    /** Initially-on switches when uncontrolled. */
+    defaultValue?: string[];
+    /** Fired with the full list of switches that are on. */
+    onChange?: (value: string[]) => void;
+    /** Visible label for the group. Provide this or `aria-label`. */
+    label?: ReactNode;
+    /** Hint shown below the switches. Replaced by `error` when that's set. */
+    helperText?: ReactNode;
+    /** Validation message. Its presence also marks the group invalid. */
+    error?: ReactNode;
+    /** Shared field name for the switches. Auto-generated when omitted. */
+    name?: string;
+    /** Layout direction for the switches. Defaults to `vertical`. */
+    orientation?: "vertical" | "horizontal";
+    /** Default label side for every switch in the group. Individual props win. */
+    labelPosition?: "left" | "right";
+    /** Disables every switch in the group. */
+    disabled?: boolean;
+    /** Accessible name when there's no visible `label`. */
+    "aria-label"?: string;
+    className?: string;
+};
+/** Groups `Switch` toggles, coordinating their shared name and state. */
+export declare function SwitchGroup({ children, value, defaultValue, onChange, label, helperText, error, name, orientation, labelPosition, disabled, "aria-label": ariaLabel, className, }: SwitchGroupProps): import("react").JSX.Element;

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

@@ -0,0 +1,4 @@
+export { Switch } from "./Switch";
+export type { SwitchProps } from "./Switch";
+export { SwitchGroup } from "./SwitchGroup";
+export type { SwitchGroupProps } from "./SwitchGroup";

package/dist/components/Switch/switch.context.d.ts

@@ -0,0 +1,19 @@
+export type SwitchGroupContextValue = {
+    /** Shared `name`, so the switches submit together as one field. */
+    name: string;
+    /** Values of the switches currently on. Each toggles independently. */
+    value: string[];
+    /** Called with the switch's value when it's turned on or off. */
+    onToggle: (value: string, checked: boolean) => void;
+    /** Set when the whole group is disabled. */
+    disabled?: boolean;
+    /** Default label side for the group's switches. */
+    labelPosition?: "left" | "right";
+};
+/**
+ * Lets `SwitchGroup` coordinate its `Switch` children without cloning them.
+ * A `Switch` used outside a group falls back to its own props.
+ * Kept in its own module so the component files only export components
+ * (see the react-refresh rule in eslint.config.js).
+ */
+export declare const SwitchGroupContext: import("react").Context<SwitchGroupContextValue | undefined>;

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

@@ -0,0 +1,10 @@
+import type { ButtonHTMLAttributes, ReactNode } from "react";
+import "./Tabs.css";
+export type TabProps = {
+    /** Ties this tab to the `TabPanel` with the same value. */
+    value: string;
+    children?: ReactNode;
+    className?: string;
+} & Omit<ButtonHTMLAttributes<HTMLButtonElement>, "value" | "className">;
+/** A single tab. Must be rendered inside a `TabList`. */
+export declare function Tab({ value, children, className, disabled, onClick, ...props }: TabProps): import("react").JSX.Element;

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

@@ -0,0 +1,20 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import "./Tabs.css";
+export type TabListProps = {
+    children?: ReactNode;
+    /** Accessible name for the tab list. */
+    "aria-label"?: string;
+    className?: string;
+} & Omit<HTMLAttributes<HTMLDivElement>, "className">;
+/**
+ * Row (or column) of `Tab`s.
+ *
+ * Owns the keyboard behaviour the ARIA tabs pattern requires — arrow keys to
+ * move, Home/End to jump — because unlike radios there's no native element
+ * that provides it. Roving tabindex lives on `Tab` itself.
+ *
+ * Also owns the sliding selection indicator. Unlike `SegmentedControl`, whose
+ * segments are equal width and can be positioned with pure CSS, tabs are
+ * content-sized, so the selected tab has to be measured.
+ */
+export declare function TabList({ children, className, onKeyDown, ...props }: TabListProps): import("react").JSX.Element;

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

@@ -0,0 +1,16 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import "./Tabs.css";
+export type TabPanelProps = {
+    /** Ties this panel to the `Tab` with the same value. */
+    value: string;
+    children?: ReactNode;
+    /**
+     * Keeps the panel mounted while hidden, preserving its state (scroll
+     * position, form input, in-flight requests). Off by default so unselected
+     * panels cost nothing.
+     */
+    keepMounted?: boolean;
+    className?: string;
+} & Omit<HTMLAttributes<HTMLDivElement>, "className">;
+/** Content for the `Tab` with the same value. */
+export declare function TabPanel({ value, children, keepMounted, className, ...props }: TabPanelProps): import("react").JSX.Element | null;

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

@@ -0,0 +1,22 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { TabsActivation, TabsOrientation } from "./tabs.context";
+import "./Tabs.css";
+export type TabsProps = {
+    children?: ReactNode;
+    /** Selected tab value — makes the component controlled. */
+    value?: string;
+    /** Initially selected tab when uncontrolled. */
+    defaultValue?: string;
+    /** Fired with the newly selected tab's value. */
+    onChange?: (value: string) => void;
+    /** Layout direction. Defaults to `horizontal`. */
+    orientation?: TabsOrientation;
+    /** Whether arrowing to a tab selects it. Defaults to `automatic`. */
+    activation?: TabsActivation;
+    className?: string;
+} & Omit<HTMLAttributes<HTMLDivElement>, "className" | "onChange">;
+/**
+ * Root of the tabs widget: owns the selection and shares it with `TabList`,
+ * `Tab`, and `TabPanel` through context.
+ */
+export declare function Tabs({ children, value, defaultValue, onChange, orientation, activation, className, ...props }: TabsProps): import("react").JSX.Element;

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

@@ -0,0 +1,9 @@
+export { Tabs } from "./Tabs";
+export type { TabsProps } from "./Tabs";
+export { TabList } from "./TabList";
+export type { TabListProps } from "./TabList";
+export { Tab } from "./Tab";
+export type { TabProps } from "./Tab";
+export { TabPanel } from "./TabPanel";
+export type { TabPanelProps } from "./TabPanel";
+export type { TabsOrientation, TabsActivation } from "./tabs.context";

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

@@ -0,0 +1,24 @@
+export type TabsOrientation = "horizontal" | "vertical";
+/**
+ * `automatic` selects a tab as soon as it's focused — the ARIA-preferred
+ * behaviour when panels are cheap to render. `manual` moves focus with the
+ * arrow keys and only selects on Enter/Space, which is what you want when
+ * switching panels is expensive.
+ */
+export type TabsActivation = "automatic" | "manual";
+export type TabsContextValue = {
+    /** Value of the currently selected tab. */
+    value: string | undefined;
+    /** Selects a tab by value. */
+    select: (value: string) => void;
+    /** Prefix for the generated tab/panel ids that tie the two together. */
+    baseId: string;
+    orientation: TabsOrientation;
+    activation: TabsActivation;
+};
+export declare const TabsContext: import("react").Context<TabsContextValue | undefined>;
+/** Reads the surrounding `Tabs` context, failing loudly rather than silently. */
+export declare function useTabsContext(component: string): TabsContextValue;
+/** Ids are derived rather than registered, so tab and panel always agree. */
+export declare const tabId: (baseId: string, value: string) => string;
+export declare const panelId: (baseId: string, value: string) => string;

package/dist/components/Tag/Tag.d.ts

@@ -0,0 +1,10 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { TagVariant } from "./tag.tokens";
+import "./Tag.css";
+export type TagProps = {
+    /** Visual style of the tag. Defaults to `primary`. */
+    variant?: TagVariant;
+    children?: ReactNode;
+} & Omit<HTMLAttributes<HTMLSpanElement>, "children">;
+/** Compact label for statuses, categories, and metadata. */
+export declare function Tag({ variant, className, children, ...props }: TagProps): import("react").JSX.Element;

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

@@ -0,0 +1,4 @@
+export { Tag } from "./Tag";
+export type { TagProps } from "./Tag";
+export { tagVariants } from "./tag.tokens";
+export type { TagVariant } from "./tag.tokens";

package/dist/components/Tag/tag.tokens.d.ts

@@ -0,0 +1,2 @@
+export declare const tagVariants: readonly ["primary", "secondary", "outline"];
+export type TagVariant = (typeof tagVariants)[number];

package/dist/components/Text/Text.d.ts

@@ -0,0 +1,19 @@
+import type { ComponentPropsWithoutRef, ElementType, ReactNode } from 'react';
+import type { TextColor, TextVariant, TextWeight } from './text.tokens';
+import './Text.css';
+type TextOwnProps<E extends ElementType> = {
+    /** Element to render. Defaults to the semantically correct tag for `variant`. */
+    as?: E;
+    /** Typography scale to apply. */
+    variant?: TextVariant;
+    /** Semantic color token to use. */
+    color?: TextColor;
+    /** Overrides the variant's default font weight. */
+    weight?: TextWeight;
+    align?: 'left' | 'center' | 'right';
+    children?: ReactNode;
+};
+export type TextProps<E extends ElementType = 'p'> = TextOwnProps<E> & Omit<ComponentPropsWithoutRef<E>, keyof TextOwnProps<E>>;
+/** Typography primitive for the design system — renders any variant as any element. */
+export declare function Text<E extends ElementType = 'p'>({ as, variant, color, weight, align, className, style, children, ...props }: TextProps<E>): import("react").JSX.Element;
+export {};

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

@@ -0,0 +1,4 @@
+export { Text } from './Text';
+export type { TextProps } from './Text';
+export { textVariants, textColors, textWeights } from './text.tokens';
+export type { TextVariant, TextColor, TextWeight } from './text.tokens';