@forte-ui/react 1.0.0-alpha.1

package/dist/components/slider/Slider.d.ts

@@ -0,0 +1,208 @@
+import { Slider as BaseSlider } from '@base-ui/react/slider';
+import * as React from "react";
+export type SliderSize = "sm" | "md" | "lg";
+export type SliderTone = "primary" | "secondary" | "danger" | "neutral";
+type BaseRootProps<Value extends number | readonly number[]> = BaseSlider.Root.Props<Value>;
+export interface SliderRootProps<Value extends number | readonly number[] = number | readonly number[]> extends Omit<BaseRootProps<Value>, "className"> {
+    /**
+     * Size of the slider. Scales the track thickness, the thumb and the gap
+     * between the rows together.
+     * @default "md"
+     */
+    size?: SliderSize;
+    /**
+     * Which semantic colour set the indicator and thumb draw from.
+     * @default "primary"
+     */
+    tone?: SliderTone;
+    /**
+     * Additional class name(s). Applied after the internal styles so consumer
+     * utilities (e.g. Tailwind) win without needing `!important`.
+     */
+    className?: string;
+    /**
+     * A ref to the root `<div>`.
+     */
+    ref?: React.Ref<HTMLDivElement>;
+}
+/**
+ * Groups every part of the slider and owns its value. Renders a `<div>` laid
+ * out as a two-column grid: `Label` and `Value` share the first row, and
+ * `Control` spans both columns underneath.
+ *
+ * The generic is forwarded rather than widened, so a `number` value keeps
+ * `onValueChange(value: number)` and an array keeps `readonly number[]` — the
+ * distinction between a single-thumb and a range slider is carried entirely by
+ * the shape of `value` / `defaultValue`.
+ *
+ * ```tsx
+ * <Slider.Root defaultValue={40}>
+ *   <Slider.Label>Volume</Slider.Label>
+ *   <Slider.Value />
+ *   <Slider.Control>
+ *     <Slider.Track>
+ *       <Slider.Indicator />
+ *       <Slider.Thumb />
+ *     </Slider.Track>
+ *   </Slider.Control>
+ * </Slider.Root>
+ * ```
+ */
+export declare function SliderRoot<Value extends number | readonly number[] = number | readonly number[]>({ size, tone, className, ...props }: SliderRootProps<Value>): React.JSX.Element;
+type BaseLabelProps = React.ComponentPropsWithoutRef<typeof BaseSlider.Label>;
+export interface SliderLabelProps extends Omit<BaseLabelProps, "className"> {
+    /**
+     * Additional class name(s). Applied after the internal styles so consumer
+     * utilities (e.g. Tailwind) win without needing `!important`.
+     */
+    className?: string;
+}
+/**
+ * The slider's visible label. Renders a `<div>`, not a `<label>`, and is wired
+ * to every thumb's hidden `<input>` with `aria-labelledby` — a native label
+ * cannot point at more than one control, so a range slider would leave the
+ * second thumb unnamed.
+ *
+ * On a range slider this names the group; give each `Thumb` its own
+ * `aria-label` ("Minimum price", "Maximum price") so the two are still
+ * distinguishable.
+ */
+export declare const SliderLabel: React.ForwardRefExoticComponent<SliderLabelProps & React.RefAttributes<HTMLDivElement>>;
+type BaseValueProps = React.ComponentPropsWithoutRef<typeof BaseSlider.Value>;
+export interface SliderValueProps extends Omit<BaseValueProps, "className"> {
+    /**
+     * Additional class name(s). Applied after the internal styles so consumer
+     * utilities (e.g. Tailwind) win without needing `!important`.
+     */
+    className?: string;
+}
+/**
+ * The current value as text. Renders an `<output>`.
+ *
+ * By default it prints the values formatted with `Slider.Root`'s `format` and
+ * `locale`, joined with an en dash for a range. Pass a function as `children`
+ * to compose your own — it receives the formatted strings and the raw numbers:
+ *
+ * ```tsx
+ * <Slider.Value>{(formatted) => `${formatted[0]} to ${formatted[1]}`}</Slider.Value>
+ * ```
+ *
+ * This is a visible duplicate of what `aria-valuetext` already announces, so
+ * it is never the only way to read the value — but it is what makes a slider
+ * usable for anyone who cannot judge a thumb's position by eye, which is why
+ * every demo that has room for it renders one.
+ */
+export declare const SliderValue: React.ForwardRefExoticComponent<SliderValueProps & React.RefAttributes<HTMLOutputElement>>;
+type BaseControlProps = React.ComponentPropsWithoutRef<typeof BaseSlider.Control>;
+export interface SliderControlProps extends Omit<BaseControlProps, "className"> {
+    /**
+     * Additional class name(s). Applied after the internal styles so consumer
+     * utilities (e.g. Tailwind) win without needing `!important`.
+     */
+    className?: string;
+}
+/**
+ * The interactive strip. Renders a `<div>` that is padded well beyond the
+ * painted track, because *this* is the element that takes the pointer: a press
+ * anywhere inside it moves the nearest thumb. The padding is what gives the
+ * control its 24×24 minimum target (SC 2.5.8) without thickening the rail, and
+ * `thumbAlignment="edge"` measures it, so changing the padding changes where
+ * an edge-aligned thumb comes to rest.
+ *
+ * Contains exactly one `Track`.
+ */
+export declare const SliderControl: React.ForwardRefExoticComponent<SliderControlProps & React.RefAttributes<HTMLDivElement>>;
+type BaseTrackProps = React.ComponentPropsWithoutRef<typeof BaseSlider.Track>;
+export interface SliderTrackProps extends Omit<BaseTrackProps, "className"> {
+    /**
+     * Additional class name(s). Applied after the internal styles so consumer
+     * utilities (e.g. Tailwind) win without needing `!important`.
+     */
+    className?: string;
+}
+/**
+ * The rail: the whole range from `min` to `max`. Renders a `<div>` that Base
+ * UI gives `position: relative` inline, which is what the `Indicator` and the
+ * `Thumb` are positioned against.
+ *
+ * Its thickness must stay an explicit length rather than `auto` — Base UI sizes
+ * the indicator's cross axis with `height: inherit` (`width: inherit` when
+ * vertical), so an auto-sized track leaves the indicator with nothing to
+ * inherit and it collapses.
+ */
+export declare const SliderTrack: React.ForwardRefExoticComponent<SliderTrackProps & React.RefAttributes<HTMLDivElement>>;
+type BaseIndicatorProps = React.ComponentPropsWithoutRef<typeof BaseSlider.Indicator>;
+export interface SliderIndicatorProps extends Omit<BaseIndicatorProps, "className"> {
+    /**
+     * Additional class name(s). Applied after the internal styles so consumer
+     * utilities (e.g. Tailwind) win without needing `!important`.
+     */
+    className?: string;
+}
+/**
+ * The filled part of the rail. Renders a `<div>` inside `Track`.
+ *
+ * Base UI owns its position and size through inline styles — `width` /
+ * `height` for a single thumb, plus an offset from the start edge for a range
+ * — so the stylesheet only paints it. Setting a width here would be
+ * overwritten on the next render.
+ */
+export declare const SliderIndicator: React.ForwardRefExoticComponent<SliderIndicatorProps & React.RefAttributes<HTMLDivElement>>;
+type BaseThumbProps = React.ComponentPropsWithoutRef<typeof BaseSlider.Thumb>;
+export interface SliderThumbProps extends Omit<BaseThumbProps, "className"> {
+    /**
+     * Additional class name(s). Applied after the internal styles so consumer
+     * utilities (e.g. Tailwind) win without needing `!important`.
+     */
+    className?: string;
+}
+/**
+ * One draggable handle. Renders a `<div>` wrapping a visually hidden
+ * `<input type="range">` — the input is the real control, so it is what takes
+ * focus and what a screen reader reads.
+ *
+ * That split is why the focus ring is `.forte-focus-ring-within` rather than
+ * `.forte-focus-ring`: the thumb `<div>` never matches `:focus-visible` itself.
+ *
+ * A range slider needs one `Thumb` per value, each with an `index` — without
+ * it the thumbs only find their order once the composite list has registered
+ * on the client, so a server-rendered range slider paints both handles at the
+ * first value and jumps on hydration. Give each one an `aria-label` too; the
+ * `Label` names the group, not the individual handles.
+ */
+export declare const SliderThumb: React.ForwardRefExoticComponent<SliderThumbProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * A slider built on Base UI's unstyled `Slider` primitive.
+ *
+ * ```tsx
+ * <Slider.Root defaultValue={[25, 75]} tone="secondary">
+ *   <Slider.Label>Price range</Slider.Label>
+ *   <Slider.Value />
+ *   <Slider.Control>
+ *     <Slider.Track>
+ *       <Slider.Indicator />
+ *       <Slider.Thumb index={0} aria-label="Minimum price" />
+ *       <Slider.Thumb index={1} aria-label="Maximum price" />
+ *     </Slider.Track>
+ *   </Slider.Control>
+ * </Slider.Root>
+ * ```
+ *
+ * Motion — the handle and the fill are never animated into position. Base UI
+ * rewrites their geometry on every pointermove, so a positional transition
+ * restarts on every frame of a drag and the handle ends up permanently
+ * interpolating toward a target that has already moved: it trails the pointer,
+ * and it puts a layout-triggering property under animation for the whole
+ * gesture. Colour and the hover halo still transition, because those have a
+ * start and an end. See the note at the top of `Slider.module.css`.
+ */
+export declare const Slider: {
+    Root: typeof SliderRoot;
+    Label: React.ForwardRefExoticComponent<SliderLabelProps & React.RefAttributes<HTMLDivElement>>;
+    Value: React.ForwardRefExoticComponent<SliderValueProps & React.RefAttributes<HTMLOutputElement>>;
+    Control: React.ForwardRefExoticComponent<SliderControlProps & React.RefAttributes<HTMLDivElement>>;
+    Track: React.ForwardRefExoticComponent<SliderTrackProps & React.RefAttributes<HTMLDivElement>>;
+    Indicator: React.ForwardRefExoticComponent<SliderIndicatorProps & React.RefAttributes<HTMLDivElement>>;
+    Thumb: React.ForwardRefExoticComponent<SliderThumbProps & React.RefAttributes<HTMLDivElement>>;
+};
+export {};

package/dist/components/slider/Slider.js

@@ -0,0 +1,3 @@
+"use client";
+import { a as e, c as t, i as n, n as r, o as i, r as a, s as o, t as s } from "../../Slider-Bh8_cti1.js";
+export { s as Slider, r as SliderControl, a as SliderIndicator, n as SliderLabel, e as SliderRoot, i as SliderThumb, o as SliderTrack, t as SliderValue };

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

@@ -0,0 +1,2 @@
+export { Slider } from './Slider';
+export type { SliderSize, SliderTone, SliderRootProps, SliderLabelProps, SliderValueProps, SliderControlProps, SliderTrackProps, SliderIndicatorProps, SliderThumbProps, } from './Slider';

package/dist/components/slider/index.js

@@ -0,0 +1,2 @@
+import { t as e } from "../../Slider-Bh8_cti1.js";
+export { e as Slider };

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

@@ -0,0 +1,92 @@
+import * as React from "react";
+export type SpinnerVariant = "ring" | "dots" | "bars" | "pulse";
+export type SpinnerSize = "sm" | "md" | "lg";
+export type SpinnerTone = "primary" | "secondary" | "danger" | "neutral" | "current";
+export type SpinnerLabelPlacement = "hidden" | "end" | "bottom";
+export interface SpinnerProps extends Omit<React.ComponentPropsWithoutRef<"span">, "className"> {
+    /**
+     * Which indicator to draw. All four are the same size and cost the same —
+     * this is a question of voice, not of capability.
+     *
+     * `ring` is a rotating comet, the neutral default. `dots` is three bouncing
+     * dots, which reads as friendlier and suits inline text. `bars` is eight
+     * fading spokes — the only variant whose animation is identical with and
+     * without reduced motion, so it is the safest choice for something that must
+     * look the same for everyone. `pulse` is a breathing halo, best for ambient
+     * "still working" states rather than for blocking ones.
+     * @default "ring"
+     */
+    variant?: SpinnerVariant;
+    /**
+     * Diameter of the indicator — `1rem`, `1.5rem` or `2rem`. Every variant is
+     * laid out as a fraction of it, so all four occupy exactly the same box and
+     * can be swapped without moving anything around them.
+     * @default "md"
+     */
+    size?: SpinnerSize;
+    /**
+     * Which semantic colour set the indicator draws from. `current` takes
+     * `currentColor` instead, which is what makes a spinner dropped inside a
+     * button or a link match the text beside it.
+     * @default "primary"
+     */
+    tone?: SpinnerTone;
+    /**
+     * What the spinner is waiting on. This is the only thing that reaches a
+     * screen reader — the indicator itself is `aria-hidden`, because a picture
+     * of motion is not information.
+     *
+     * Say what is happening rather than that something is: "Loading invoices"
+     * tells someone whether the wait concerns them; "Loading" does not.
+     * @default "Loading"
+     */
+    label?: string;
+    /**
+     * Where the label goes. `hidden` keeps it in the accessibility tree but out
+     * of the paint; `end` and `bottom` also show it, which is what you want for
+     * a wait long enough that the user deserves to know what it is for.
+     * @default "hidden"
+     */
+    labelPlacement?: SpinnerLabelPlacement;
+    /**
+     * Stops the spinner announcing itself: no `role="status"`, and no hidden
+     * label.
+     *
+     * Use it whenever something else already announces the wait — a `Button`
+     * with `loading`, a panel that sets `aria-busy`, a live region that swaps in
+     * the loaded content. Two announcements for one wait is worse than one, and
+     * a page that mounts six spinners with six live regions is unusable.
+     *
+     * A label you asked to SHOW stays visible and stays in the accessibility
+     * tree, as ordinary text. Text that is on screen but hidden from assistive
+     * technology is a bug in its own right, so `decorative` will not do that —
+     * it only ever removes the live region and the invisible label.
+     * @default false
+     */
+    decorative?: boolean;
+    /**
+     * Additional class name(s). Applied after the internal styles so consumer
+     * utilities (e.g. Tailwind) win without needing `!important`.
+     */
+    className?: string;
+}
+/**
+ * A busy indicator, in four flavours.
+ *
+ * Base UI has no spinner primitive — there is no interaction to model and no
+ * state machine to get right — so this is the one component in the library
+ * that is not built on one. What it does have is the part everybody gets
+ * wrong: an indicator that is announced once and correctly, and an animation
+ * that stays informative when the user has asked for less motion.
+ *
+ * ```tsx
+ * <Spinner />
+ * <Spinner variant="bars" size="lg" label="Loading invoices" labelPlacement="end" />
+ * <Spinner decorative variant="dots" tone="current" />
+ * ```
+ *
+ * Styling is driven by `data-*` attributes and `--forte-spinner-*` custom
+ * properties, so it can be re-skinned from plain CSS or targeted with Tailwind
+ * arbitrary variants (`data-[variant=dots]:...`) without wrapping.
+ */
+export declare const Spinner: React.ForwardRefExoticComponent<SpinnerProps & React.RefAttributes<HTMLSpanElement>>;

package/dist/components/spinner/Spinner.js

@@ -0,0 +1,3 @@
+"use client";
+import { t as e } from "../../Spinner-BF0uD4hR.js";
+export { e as Spinner };

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

@@ -0,0 +1,2 @@
+export { Spinner } from './Spinner';
+export type { SpinnerProps, SpinnerVariant, SpinnerSize, SpinnerTone, SpinnerLabelPlacement, } from './Spinner';

package/dist/components/spinner/index.js

@@ -0,0 +1,2 @@
+import { t as e } from "../../Spinner-BF0uD4hR.js";
+export { e as Spinner };

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

@@ -0,0 +1,80 @@
+import { Switch as BaseSwitch } from '@base-ui/react/switch';
+import * as React from "react";
+export type SwitchSize = "sm" | "md" | "lg";
+type BaseSwitchRootProps = React.ComponentPropsWithoutRef<typeof BaseSwitch.Root>;
+export interface SwitchProps extends Omit<BaseSwitchRootProps, "className" | "children"> {
+    /**
+     * Size of the switch. Track, thumb and travel distance all scale together,
+     * so the thumb always lands flush against the end of the track.
+     * @default "md"
+     */
+    size?: SwitchSize;
+    /**
+     * Draw a checkmark inside the thumb while the switch is on.
+     *
+     * This is the switch's non-positional state cue, and it is why the default
+     * is `true`: a user who cannot perceive the thumb sliding still gets a
+     * glyph appearing. Turning it off leaves colour as the only cue that does
+     * not depend on noticing movement.
+     * @default true
+     */
+    stateIcon?: boolean;
+    /**
+     * Whether the rendered element is a native `<button>`. Base UI defaults
+     * this to `false` here — the opposite of trigger-style parts — because the
+     * root renders a `<span>` so that an enclosing `<label>` stays valid HTML.
+     *
+     * Set it (together with `render={<button />}`) for the sibling-label
+     * `htmlFor`/`id` pattern. Note that it also moves `id`: with `nativeButton`
+     * the `id` lands on the root element, otherwise on the hidden input.
+     * @default false
+     */
+    nativeButton?: boolean | undefined;
+    /**
+     * The id of the hidden `<input>` element — or of the root element when
+     * `nativeButton` is `true`. Point a sibling `<label htmlFor>` at whichever
+     * of the two your `nativeButton` setting produces.
+     */
+    id?: string | undefined;
+    /**
+     * Additional class name(s) for the track. Applied after the internal styles
+     * so consumer utilities (e.g. Tailwind) win without needing `!important`.
+     */
+    className?: string;
+    /**
+     * Additional class name(s) for the thumb, for the same reason.
+     */
+    thumbClassName?: string;
+}
+/**
+ * A switch built on Base UI's unstyled `Switch` primitive.
+ *
+ * Labeling — a switch has no text of its own, so it needs one of:
+ *
+ * ```tsx
+ * // Simplest correct pattern: an enclosing label.
+ * <label><Switch /> Notifications</label>
+ *
+ * // Sibling label. Needs a native button so htmlFor/id resolve; with
+ * // nativeButton the id lands on the root rather than the hidden input.
+ * <label htmlFor="notify">Notifications</label>
+ * <Switch id="notify" nativeButton render={<button />} />
+ *
+ * // A native button INSIDE a wrapping label needs the render callback, so
+ * // the hidden input is placed outside the label and the HTML stays valid.
+ * <Switch
+ *   nativeButton
+ *   render={(buttonProps) => (
+ *     <label><button {...buttonProps} /> Notifications</label>
+ *   )}
+ * />
+ * ```
+ *
+ * Motion — the thumb's position *is* the state, not decoration, so its travel
+ * is never multiplied by `--forte-motion-ok`. Under reduced motion the thumb
+ * still moves; only the spring flattens, because the duration token it rides
+ * on shortens. The track colour, the thumb colour and the checkmark change
+ * alongside it so state never rests on movement alone.
+ */
+export declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLElement>>;
+export {};

package/dist/components/switch/Switch.js

@@ -0,0 +1,3 @@
+"use client";
+import { t as e } from "../../Switch-OBewMMvM.js";
+export { e as Switch };

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

@@ -0,0 +1,2 @@
+export { Switch } from './Switch';
+export type { SwitchProps, SwitchSize } from './Switch';

package/dist/components/switch/index.js

@@ -0,0 +1,2 @@
+import { t as e } from "../../Switch-OBewMMvM.js";
+export { e as Switch };

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

@@ -0,0 +1,125 @@
+import { Tabs as BaseTabs } from '@base-ui/react/tabs';
+import * as React from "react";
+export type TabsVariant = "line" | "pill";
+export type TabsOverflow = "scroll" | "visible";
+type BaseRootProps = React.ComponentPropsWithoutRef<typeof BaseTabs.Root>;
+type BaseListProps = React.ComponentPropsWithoutRef<typeof BaseTabs.List>;
+type BaseTabProps = React.ComponentPropsWithoutRef<typeof BaseTabs.Tab>;
+type BaseIndicatorProps = React.ComponentPropsWithoutRef<typeof BaseTabs.Indicator>;
+type BasePanelProps = React.ComponentPropsWithoutRef<typeof BaseTabs.Panel>;
+export interface TabsRootProps extends Omit<BaseRootProps, "className"> {
+    /**
+     * Which indicator treatment the tab strip uses. `"line"` draws a rail with a
+     * sliding underline; `"pill"` draws a filled pill that slides behind the
+     * active tab. Both are the same indicator element moved by the same CSS
+     * variables — only the geometry differs.
+     * @default "line"
+     */
+    variant?: TabsVariant;
+    /**
+     * What a strip with more tabs than room does. `"scroll"` puts the tabs in a
+     * `ScrollArea` that only engages once they stop fitting — the overflowing
+     * end fades out, a swipe or a drag brings it back, and activating a tab
+     * scrolls it into view. `"visible"` restores the plain flex row, which
+     * spills out of its container instead; take it when the strip sits in a
+     * layout that already handles the overflow.
+     *
+     * A vertical strip needs a height to scroll against: the scroller is capped
+     * at the height of `Tabs.Root`, so give the root one (or a `max-height`) and
+     * the strip scrolls beside a panel that does not.
+     * @default "scroll"
+     */
+    overflow?: TabsOverflow;
+    /**
+     * Additional class name(s). Applied after the internal styles so consumer
+     * utilities (e.g. Tailwind) win without needing `!important`.
+     */
+    className?: string;
+}
+export interface TabsListProps extends Omit<BaseListProps, "className" | "activateOnFocus" | "loopFocus"> {
+    /**
+     * Whether arrow-key focus also activates the tab it lands on. Left `false`
+     * so arrow keys only move focus and activation happens on Enter or Space —
+     * automatic activation loads every panel the user arrows past, which is
+     * hostile when a panel fetches data.
+     * @default false
+     */
+    activateOnFocus?: boolean;
+    /**
+     * Whether arrow-key focus wraps from the last tab back to the first.
+     * @default true
+     */
+    loopFocus?: boolean;
+    /**
+     * Additional class name(s). Applied after the internal styles so consumer
+     * utilities (e.g. Tailwind) win without needing `!important`.
+     */
+    className?: string;
+}
+export interface TabsTabProps extends Omit<BaseTabProps, "className"> {
+    /**
+     * Additional class name(s). Applied after the internal styles so consumer
+     * utilities (e.g. Tailwind) win without needing `!important`.
+     */
+    className?: string;
+}
+export interface TabsIndicatorProps extends Omit<BaseIndicatorProps, "className" | "renderBeforeHydration"> {
+    /**
+     * Whether to emit a tiny inline script that positions the indicator before
+     * React hydrates. Defaults to `true` here rather than Base UI's `false`:
+     * without it a server-rendered tab strip shows no indicator at all until
+     * hydration finishes, which reads as a broken selection.
+     * @default true
+     */
+    renderBeforeHydration?: boolean;
+    /**
+     * Additional class name(s). Applied after the internal styles so consumer
+     * utilities (e.g. Tailwind) win without needing `!important`.
+     */
+    className?: string;
+}
+export interface TabsPanelProps extends Omit<BasePanelProps, "className" | "keepMounted"> {
+    /**
+     * Whether the panel stays in the DOM while hidden. Required if you want the
+     * exit transition to play, or if the panel holds scroll position or
+     * uncommitted form state that should survive a round trip.
+     * @default false
+     */
+    keepMounted?: boolean;
+    /**
+     * Additional class name(s). Applied after the internal styles so consumer
+     * utilities (e.g. Tailwind) win without needing `!important`.
+     */
+    className?: string;
+}
+/**
+ * Tabs built on Base UI's unstyled `Tabs` primitive.
+ *
+ * ```tsx
+ * <Tabs.Root defaultValue="overview" variant="pill">
+ *   <Tabs.List>
+ *     <Tabs.Tab value="overview">Overview</Tabs.Tab>
+ *     <Tabs.Tab value="activity">Activity</Tabs.Tab>
+ *     <Tabs.Indicator />
+ *   </Tabs.List>
+ *   <Tabs.Panel value="overview">…</Tabs.Panel>
+ *   <Tabs.Panel value="activity">…</Tabs.Panel>
+ * </Tabs.Root>
+ * ```
+ *
+ * Arrow keys move focus along the strip; Enter or Space activates. A strip
+ * with more tabs than room scrolls rather than spilling out of its container,
+ * and activating a tab that is off the edge brings it into view — set
+ * `overflow="visible"` on `Tabs.Root` to opt out. Styling is driven entirely by
+ * `data-*` attributes and `--forte-tabs-*` custom properties, so it can be
+ * re-skinned from plain CSS or targeted with Tailwind arbitrary variants
+ * (`data-[variant=pill]:...`) without wrapping.
+ */
+export declare const Tabs: {
+    Root: React.ForwardRefExoticComponent<TabsRootProps & React.RefAttributes<HTMLDivElement>>;
+    List: React.ForwardRefExoticComponent<TabsListProps & React.RefAttributes<HTMLDivElement>>;
+    Tab: React.ForwardRefExoticComponent<TabsTabProps & React.RefAttributes<HTMLElement>>;
+    Indicator: React.ForwardRefExoticComponent<TabsIndicatorProps & React.RefAttributes<HTMLSpanElement>>;
+    Panel: React.ForwardRefExoticComponent<TabsPanelProps & React.RefAttributes<HTMLDivElement>>;
+};
+export {};

package/dist/components/tabs/Tabs.js

@@ -0,0 +1,3 @@
+"use client";
+import { t as e } from "../../Tabs-LgkSbPSF.js";
+export { e as Tabs };

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

@@ -0,0 +1,2 @@
+export { Tabs } from './Tabs';
+export type { TabsVariant, TabsOverflow, TabsRootProps, TabsListProps, TabsTabProps, TabsIndicatorProps, TabsPanelProps, } from './Tabs';

package/dist/components/tabs/index.js

@@ -0,0 +1,2 @@
+import { t as e } from "../../Tabs-LgkSbPSF.js";
+export { e as Tabs };