@sesamehr/react-design-system 1.4.0 → 1.6.0

package/dist/Display/Badge/index.d.ts

@@ -1,6 +1,6 @@
 import { VariantProps } from 'class-variance-authority';
 export { Badge, type BadgeProps } from './Badge.tsx';
 export declare const badgeVariants: (props?: ({
-    variant?: "default" | "destructive" | "outline" | "secondary" | null | undefined;
+    variant?: "default" | "destructive" | "outline" | "secondary" | "brand" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export type BadgeVariants = VariantProps<typeof badgeVariants>;

package/dist/Display/CalendarDate/CalendarDate.d.ts

@@ -0,0 +1,11 @@
+export interface CalendarDateProps extends React.TimeHTMLAttributes<HTMLTimeElement> {
+    /** The day to show. The month abbreviation is derived from it. */
+    date: Date;
+    /** The selected day in a calendar */
+    active?: boolean;
+    /** Overrides the month abbreviation. See `monthFor` for when you want this. */
+    month?: React.ReactNode;
+    dataTestid: string;
+}
+/** CalendarDate — mirrors `@sesame/orxata-core` CalendarDate. */
+export declare const CalendarDate: import('react').ForwardRefExoticComponent<CalendarDateProps & import('react').RefAttributes<HTMLTimeElement>>;

package/dist/Display/CalendarDate/index.d.ts

@@ -0,0 +1,15 @@
+import { VariantProps } from 'class-variance-authority';
+export { CalendarDate } from './CalendarDate.tsx';
+export type { CalendarDateProps } from './CalendarDate.tsx';
+/**
+ * Only the two fills vary, so only they live here — the box itself is the same
+ * 32px rounded square in both states and stays in the component's own styles.
+ *
+ * `active` is the selected day in a calendar, not a hover or a focus state.
+ * Both fills come off the brand ramp rather than `primary`, matching how the
+ * rest of v3 draws anything that has to read as the accent.
+ */
+export declare const calendarDateVariants: (props?: ({
+    active?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export type CalendarDateVariants = VariantProps<typeof calendarDateVariants>;

package/dist/Display/Chip/Chip.d.ts

@@ -0,0 +1,8 @@
+import { ChipVariants } from './index.ts';
+export interface ChipProps extends React.HTMLAttributes<HTMLSpanElement> {
+    /** Which semantic colour it is tinted with */
+    tone?: ChipVariants['tone'];
+    dataTestid: string;
+}
+/** Chip — mirrors `@sesame/orxata-core` Chip. */
+export declare const Chip: import('react').ForwardRefExoticComponent<ChipProps & import('react').RefAttributes<HTMLSpanElement>>;

package/dist/Display/Chip/index.d.ts

@@ -0,0 +1,19 @@
+import { VariantProps } from 'class-variance-authority';
+export { Chip } from './Chip.tsx';
+export type { ChipProps } from './Chip.tsx';
+/**
+ * A chip is a piece of the user's own data — a value they picked, a label they
+ * applied. `Badge` is the system talking back: a status it assigned, a count it
+ * worked out. That is the line between the two, and it is why one is a soft
+ * tint and the other a solid fill.
+ *
+ * The tints are opacity over the semantic colour rather than a `-100` step,
+ * because no such token exists for `warning` or `destructive` and inventing one
+ * would put a colour in the theme that Figma has never seen. `Table` already
+ * tints this way. The pair also cannot drift: background and text come off the
+ * same token, so re-pointing `--success` moves both.
+ */
+export declare const chipVariants: (props?: ({
+    tone?: "success" | "warning" | "neutral" | "brand" | "error" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export type ChipVariants = VariantProps<typeof chipVariants>;

package/dist/Display/NumberFlow/NumberFlow.d.ts

@@ -0,0 +1,20 @@
+import { NumberFlowElement, Value } from '@number-flow/react';
+import { NumberFlowConfig, NumberFlowPreset } from './index.ts';
+export interface NumberFlowProps {
+    /**
+     * The number.
+     *
+     * Typed `number`, not `number | string`. The engine does accept a decimal
+     * string — `Intl` has parsed those since ES2023 — but both packages compile
+     * against the ES2022 lib, where `formatToParts` is typed `number | bigint`
+     * and the library's own `Value` therefore resolves to `number`. Widening it
+     * here would be a claim the compiler cannot back on either side.
+     */
+    value: Value;
+    /** A preset name, or a config object to bypass the presets entirely */
+    preset?: NumberFlowPreset | NumberFlowConfig;
+    className?: string;
+    dataTestid: string;
+}
+/** NumberFlow — mirrors `@sesame/orxata-core` NumberFlow. */
+export declare const NumberFlow: import('react').ForwardRefExoticComponent<NumberFlowProps & import('react').RefAttributes<NumberFlowElement>>;

package/dist/Display/NumberFlow/index.d.ts

@@ -0,0 +1,41 @@
+import { Format, Trend } from '@number-flow/react';
+export { NumberFlow } from './NumberFlow.tsx';
+export type { NumberFlowProps } from './NumberFlow.tsx';
+/**
+ * The animation is not configurable, and that is the point.
+ *
+ * `@number-flow/react` exposes fourteen props — three separate `EffectTiming`
+ * objects among them. A design system that forwards all of them has not made a
+ * decision, it has moved one. So a caller says what *kind of number* this is
+ * and gets the formatting and the spin that go with it; the timings stay where
+ * the DS can change them once, for everybody.
+ *
+ * The escape hatch is the same prop rather than a second one: pass a config
+ * object instead of a preset name and it is used verbatim. Verbatim, not
+ * merged — a caller who has opted out of the presets should not have to
+ * subtract from one.
+ */
+export type NumberFlowPreset = 'number' | 'currency' | 'percent' | 'compact' | 'time';
+export interface NumberFlowConfig {
+    /**
+     * Passed to `Intl.NumberFormat`. This is the library's own narrowed type,
+     * not `Intl.NumberFormatOptions`: it drops `scientific` and `engineering`
+     * notation, which the engine cannot animate. Keeping its type means a caller
+     * reaching for one gets a compile error rather than a number that renders
+     * and never moves.
+     */
+    format?: Format;
+    /** Defaults to the browser's locale when omitted. */
+    locales?: Intl.LocalesArgument;
+    /** Which way digits spin. Omitted means "the direction the value moved". */
+    trend?: Trend;
+    /**
+     * Caps a digit by position — `0` is the ones place, `1` the tens. A capped
+     * digit loops within its range instead of through all ten.
+     */
+    digits?: Record<number, {
+        max?: number;
+    }>;
+}
+export declare const resolveNumberFlowPreset: (preset?: NumberFlowPreset | NumberFlowConfig) => NumberFlowConfig;
+export declare const NUMBER_FLOW_PRESETS: NumberFlowPreset[];

package/dist/Display/PointMarker/PointMarker.d.ts

@@ -0,0 +1,8 @@
+import { PointMarkerVariants } from './index.ts';
+export interface PointMarkerProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'color'> {
+    /** Colour of the centre dot */
+    color?: PointMarkerVariants['color'];
+    dataTestid: string;
+}
+/** PointMarker — mirrors `@sesame/orxata-core` PointMarker. */
+export declare const PointMarker: import('react').ForwardRefExoticComponent<PointMarkerProps & import('react').RefAttributes<HTMLSpanElement>>;

package/dist/Display/PointMarker/index.d.ts

@@ -0,0 +1,18 @@
+import { VariantProps } from 'class-variance-authority';
+export { PointMarker } from './PointMarker.tsx';
+export type { PointMarkerProps } from './PointMarker.tsx';
+/**
+ * A marker is a fixed 32px ring with an 8px dot inside it, and the dot's colour
+ * is the only thing the design varies. The values are category slots, not hue
+ * names: a caller marking "offices" picks a category and keeps meaning the same
+ * thing if the palette is re-pointed, which naming them `teal` or `amber` would
+ * not survive. The hue behind each slot lives in `--category-*` in the theme —
+ * the comments below say what it is today, and are the only thing that changes
+ * when design moves one.
+ *
+ * The ring never varies, so it lives in the component's own styles.
+ */
+export declare const pointMarkerVariants: (props?: ({
+    color?: "category-1" | "category-2" | "category-3" | "category-4" | "category-5" | "category-6" | "category-7" | "category-8" | "category-9" | "category-10" | "category-11" | "category-12" | "category-13" | "category-14" | "category-15" | "category-16" | "category-17" | "category-18" | "category-19" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export type PointMarkerVariants = VariantProps<typeof pointMarkerVariants>;

package/dist/Display/Tag/Tag.d.ts

@@ -0,0 +1,19 @@
+export interface TagProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'type'> {
+    /**
+     * Whether it is picked.
+     *
+     * Tags get used the way tabs are — press one and it stays down — so this is
+     * a state the caller owns and tells us about, not something the browser
+     * knows. It is also what `aria-pressed` reports.
+     */
+    active?: boolean;
+    /**
+     * Whether it is being dragged.
+     *
+     * The only other state with nothing in CSS to hang it on.
+     */
+    dragged?: boolean;
+    dataTestid: string;
+}
+/** Tag — mirrors `@sesame/orxata-core` Tag. */
+export declare const Tag: import('react').ForwardRefExoticComponent<TagProps & import('react').RefAttributes<HTMLButtonElement>>;

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

@@ -0,0 +1,2 @@
+export { Tag } from './Tag.tsx';
+export type { TagProps } from './Tag.tsx';

package/dist/Feedback/Progress/Progress.d.ts

@@ -0,0 +1,8 @@
+import * as ProgressPrimitive from '@radix-ui/react-progress';
+export interface ProgressProps extends Omit<React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>, 'value'> {
+    /** How far along, 0 to 100 */
+    value?: number;
+    dataTestid: string;
+}
+/** Progress — mirrors `@sesame/orxata-core` Progress. */
+export declare const Progress: import('react').ForwardRefExoticComponent<ProgressProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/Feedback/Progress/index.d.ts

@@ -0,0 +1,2 @@
+export { Progress } from './Progress.tsx';
+export type { ProgressProps } from './Progress.tsx';

package/dist/Layout/Card/Card.d.ts

@@ -1,6 +1,11 @@
+import { CardVariants } from './index.ts';
 export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
     /** Render as the child element instead of a `<div>` (Radix Slot). */
     asChild?: boolean;
+    /** Which surface it is. `muted` is for a card that holds other cards. */
+    tone?: CardVariants['tone'];
+    /** Drops the border, the shadow and the glass — just the surface and its radius. */
+    flat?: boolean;
     dataTestid: string;
 }
 /**

package/dist/Layout/Card/index.d.ts

@@ -1 +1,22 @@
+import { VariantProps } from 'class-variance-authority';
 export { Card, type CardProps } from './Card.tsx';
+/**
+ * Two things vary, and they are not the same thing.
+ *
+ * `tone` is which surface it is: white, or tinted for the case the white one
+ * cannot serve — a card that holds other cards. White on white needs a border
+ * around every row to read as separate things; a tinted surface lets the white
+ * ones separate on their own.
+ *
+ * `flat` is what it carries on top of that surface. They are kept apart
+ * because the combinations are all real: a white card over a tinted one, a
+ * white one lying flat inside it, a tinted panel with nothing on top.
+ *
+ * Only `tone` lives here. Elevation is a layered `box-shadow` with an inset
+ * highlight, which is not a utility class, so it stays in the component's
+ * styles keyed off `data-flat` rather than being bent into one.
+ */
+export declare const cardVariants: (props?: ({
+    tone?: "default" | "muted" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export type CardVariants = VariantProps<typeof cardVariants>;

package/dist/Layout/CardStack/CardStack.d.ts

@@ -0,0 +1,7 @@
+export interface CardStackProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Which card is in front, zero-based. The deck wraps, so any number works. */
+    index?: number;
+    dataTestid: string;
+}
+/** CardStack — mirrors `@sesame/orxata-core` CardStack. */
+export declare const CardStack: import('react').ForwardRefExoticComponent<CardStackProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/Layout/CardStack/index.d.ts

@@ -0,0 +1,37 @@
+export { CardStack } from './CardStack.tsx';
+export type { CardStackProps } from './CardStack.tsx';
+/**
+ * How many cards a stack ever draws. A fourth peeking behind a third is
+ * indistinguishable, so a deck of forty draws the same as a deck of three.
+ */
+export declare const CARD_STACK_DECK = 3;
+/** How far each card shows below the one in front of it, in pixels. */
+export declare const CARD_STACK_PEEK = 10;
+/** How much narrower each card is than the one in front of it. */
+export declare const CARD_STACK_SHRINK = 0.055;
+/**
+ * Where a card at this depth sits.
+ *
+ * Anchored at the base by the CSS that goes with it — a card sinking and
+ * narrowing from its bottom edge reads as one behind, while the same card
+ * shrinking from its top edge reads as a smaller card sitting lower. Same
+ * numbers, different picture.
+ */
+export declare const cardStackDepthTransform: (depth: number) => string;
+/**
+ * Which cards are showing, front first, wrapping round the end.
+ *
+ * The deck is circular so that shuffling never runs out: past the last card the
+ * first is what comes up behind, and the stack keeps looking like a stack
+ * instead of thinning to nothing on the way to the end.
+ */
+export declare const cardStackDeck: <T>(cards: T[], index: number) => T[];
+/**
+ * Which way the deck moved, so the cards leave the way they came.
+ *
+ * A step of one forward is next and one back is previous, wrapping included —
+ * going from the last card to the first is still forward. Any bigger jump is
+ * treated as forward, because there is no honest answer and picking one keeps
+ * the motion from stalling.
+ */
+export declare const cardStackDirection: (from: number, to: number, total: number) => "next" | "prev";

package/dist/Locale/LocaleProvider/LocaleProvider.d.ts

@@ -0,0 +1,17 @@
+export interface LocaleProviderProps {
+    /**
+     * A BCP-47 language tag. Bare tags are fine — `es` is as valid as `es-ES`,
+     * and resolves the same month and weekday names.
+     *
+     * Omitted, every component follows the runtime's locale, which is the
+     * browser's. Provide it when the application lets a user pick a language
+     * separately from their browser settings, or the two will disagree.
+     */
+    locale?: string;
+    children?: React.ReactNode;
+}
+/** LocaleProvider — mirrors `@sesame/orxata-core` LocaleProvider. */
+export declare const LocaleProvider: {
+    ({ locale, children }: LocaleProviderProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/Locale/index.d.ts

@@ -0,0 +1,3 @@
+export { LocaleProvider } from './LocaleProvider/LocaleProvider.tsx';
+export type { LocaleProviderProps } from './LocaleProvider/LocaleProvider.tsx';
+export { LocaleContext, normalizeLocale, useLocale } from './useLocale.ts';

package/dist/Locale/useLocale.d.ts

@@ -0,0 +1,28 @@
+/**
+ * A language tag `Intl` will accept, or `undefined`.
+ *
+ * Two things go wrong with a locale handed in from an application, and both are
+ * silent until they are not:
+ *
+ *   - `Intl` throws a `RangeError` on a structurally invalid tag, and `es_ES` —
+ *     the Java and Rails spelling — is invalid. A locale read out of a backend
+ *     would take down every component that formats anything.
+ *   - a tag that is well-formed but unknown (`xx`) does not throw. `Intl` falls
+ *     back to `en-US` on its own, which is the behaviour we want anyway.
+ *
+ * So the underscore spelling is repaired and anything still unusable becomes
+ * `undefined`, which every consumer reads as "follow the runtime". A bad locale
+ * costs you the browser's default, never an exception.
+ *
+ * Bare tags are fine and are what Sesame uses: `es` resolves the same month
+ * names and week info as `es-ES`. Only the regional defaults differ.
+ */
+export declare const normalizeLocale: (locale?: string) => string | undefined;
+export declare const LocaleContext: import('react').Context<string | undefined>;
+/**
+ * The locale in force, or `undefined` when nothing provided one — which is the
+ * value `Intl` reads as "use the runtime's own". A component calling this works
+ * with or without a provider; without one it follows the browser, as it did
+ * before there was a provider at all.
+ */
+export declare const useLocale: () => string | undefined;

package/dist/Navigation/PageControl/PageControl.d.ts

@@ -0,0 +1,22 @@
+export interface PageControlProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** How many pages there are */
+    count: number;
+    /** Which one is showing, zero-based — the index you already have from the array */
+    index?: number;
+    /**
+     * Turns the dots into buttons.
+     *
+     * Off by default, because most of the time this only illustrates a position
+     * the carousel already controls, and seven focusable buttons that go nowhere
+     * are seven stops in the tab order for a picture. Turn it on and pass
+     * `onIndexChange`.
+     *
+     * Seven is the ceiling however many pages there are, because the row
+     * condenses — so this never floods the tab order.
+     */
+    interactive?: boolean;
+    onIndexChange?: (index: number) => void;
+    dataTestid: string;
+}
+/** PageControl — mirrors `@sesame/orxata-core` PageControl. */
+export declare const PageControl: import('react').ForwardRefExoticComponent<PageControlProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/Navigation/PageControl/index.d.ts

@@ -0,0 +1,25 @@
+export { PageControl } from './PageControl.tsx';
+export type { PageControlProps } from './PageControl.tsx';
+/** How many dots fit before the row starts condensing. */
+export declare const PAGE_CONTROL_WINDOW = 7;
+export type PageControlDotSize = 'small' | 'medium' | 'full';
+export interface PageControlDot {
+    /** Which page it stands for, zero-based */
+    index: number;
+    size: PageControlDotSize;
+}
+/**
+ * Which dots to draw, and how big.
+ *
+ * Up to seven pages every dot is the same size and the row is the whole story.
+ * Past that a fixed-width window slides, and the dots at an edge with more
+ * pages behind them ramp down — 6px, then 4px — so the row reads as a view
+ * onto something longer rather than as a complete count. That ramp is the only
+ * thing telling a reader there is more, which is why it is on the side that
+ * has more and not on both.
+ *
+ * Dots are keyed by page rather than by position, so a window that slides by
+ * one reuses six of its seven elements and their size transition runs instead
+ * of being thrown away and re-mounted.
+ */
+export declare const pageControlDots: (count: number, index: number) => PageControlDot[];

package/dist/Navigation/ToggleTabs/ToggleTabs.d.ts

@@ -0,0 +1,6 @@
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+export interface ToggleTabsProps extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root> {
+    dataTestid: string;
+}
+/** ToggleTabs root — built on `@radix-ui/react-tabs`. */
+export declare const ToggleTabs: import('react').ForwardRefExoticComponent<ToggleTabsProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/Navigation/ToggleTabs/ToggleTabsContent.d.ts

@@ -0,0 +1,3 @@
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+export type ToggleTabsContentProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>;
+export declare const ToggleTabsContent: import('react').ForwardRefExoticComponent<Omit<TabsPrimitive.TabsContentProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;

package/dist/Navigation/ToggleTabs/ToggleTabsList.d.ts

@@ -0,0 +1,3 @@
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+export type ToggleTabsListProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>;
+export declare const ToggleTabsList: import('react').ForwardRefExoticComponent<Omit<TabsPrimitive.TabsListProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;

package/dist/Navigation/ToggleTabs/ToggleTabsTrigger.d.ts

@@ -0,0 +1,3 @@
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+export type ToggleTabsTriggerProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>;
+export declare const ToggleTabsTrigger: import('react').ForwardRefExoticComponent<Omit<TabsPrimitive.TabsTriggerProps & import('react').RefAttributes<HTMLButtonElement>, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;

package/dist/Navigation/ToggleTabs/index.d.ts

@@ -0,0 +1,4 @@
+export { ToggleTabs, type ToggleTabsProps } from './ToggleTabs.tsx';
+export { ToggleTabsList, type ToggleTabsListProps } from './ToggleTabsList.tsx';
+export { ToggleTabsTrigger, type ToggleTabsTriggerProps, } from './ToggleTabsTrigger.tsx';
+export { ToggleTabsContent, type ToggleTabsContentProps, } from './ToggleTabsContent.tsx';

package/dist/main.d.ts

@@ -6,21 +6,31 @@ export { TransitionSlideY as OxTransitionSlideY } from './Transitions/Transition
 export { TransitionExpand as OxTransitionExpand } from './Transitions/TransitionExpand/TransitionExpand.tsx';
 export { TransitionFlip as OxTransitionFlip } from './Transitions/TransitionFlip/TransitionFlip.tsx';
 export { Button as OxButton, buttonVariants, type ButtonVariants, } from './Button/index.ts';
-export { Card as OxCard } from './Layout/Card/index.ts';
+export { Card as OxCard, cardVariants, type CardVariants, } from './Layout/Card/index.ts';
+export { CardStack as OxCardStack, CARD_STACK_DECK, } from './Layout/CardStack/index.ts';
 export { Divider as OxDivider, type DividerProps, } from './Layout/Divider/index.ts';
 export { Resizable as OxResizable, ResizablePanel as OxResizablePanel, ResizableHandle as OxResizableHandle, } from './Layout/Resizable/index.ts';
+export { LocaleProvider as OxLocaleProvider } from './Locale/index.ts';
+export { normalizeLocale, useLocale } from './Locale/index.ts';
 export { AvatarRounded as OxAvatarRounded, AvatarSquare as OxAvatarSquare, avatarRoundedVariants, avatarSquareVariants, type AvatarRoundedVariants, type AvatarSize, type AvatarSquareVariants, type AvatarTone, } from './Display/Avatar/index.ts';
 export { AvatarGroup as OxAvatarGroup, type AvatarItem, } from './Display/AvatarGroup/index.ts';
 export { Badge as OxBadge, badgeVariants, type BadgeVariants, } from './Display/Badge/index.ts';
+export { CalendarDate as OxCalendarDate, calendarDateVariants, type CalendarDateVariants, } from './Display/CalendarDate/index.ts';
+export { NumberFlow as OxNumberFlow, resolveNumberFlowPreset, NUMBER_FLOW_PRESETS, type NumberFlowConfig, type NumberFlowPreset, } from './Display/NumberFlow/index.ts';
 export { PaymentCard as OxPaymentCard, paymentCardVariants, type PaymentCardVariants, type BadgeType, type CardData, } from './Display/PaymentCard/index.ts';
+export { Tag as OxTag } from './Display/Tag/index.ts';
+export { Chip as OxChip, chipVariants, type ChipVariants, } from './Display/Chip/index.ts';
+export { PointMarker as OxPointMarker, pointMarkerVariants, type PointMarkerVariants, } from './Display/PointMarker/index.ts';
 export { StatusBadge as OxStatusBadge, statusBadgeVariants, indicatorVariants, type StatusBadgeVariants, } from './Feedback/StatusBadge/index.ts';
 export { Bullet as OxBullet, bulletVariants, type BulletVariants, } from './Feedback/Bullet/index.ts';
+export { Progress as OxProgress } from './Feedback/Progress/index.ts';
 export { Alert as OxAlert, AlertClose as OxAlertClose, AlertDescription as OxAlertDescription, AlertIcon as OxAlertIcon, AlertTitle as OxAlertTitle, AlertToggle as OxAlertToggle, } from './Feedback/Alert/index.ts';
 export { Dialog as OxDialog, DialogContent as OxDialogContent, DialogTitle as OxDialogTitle, DialogDescription as OxDialogDescription, DialogOverlay as OxDialogOverlay, DialogTwoPanelContent as OxDialogTwoPanelContent, DialogTrigger as OxDialogTrigger, DialogClose as OxDialogClose, } from './Feedback/Dialog/index.ts';
 export { Tooltip as OxTooltip, TooltipContent as OxTooltipContent, } from './Feedback/Tooltip/index.ts';
 export { Popover as OxPopover, PopoverContent as OxPopoverContent, PopoverClose as OxPopoverClose, } from './Feedback/Popover/index.ts';
 export { Accordion as OxAccordion, AccordionItem as OxAccordionItem, AccordionTrigger as OxAccordionTrigger, AccordionContent as OxAccordionContent, } from './Navigation/Accordion/index.ts';
-export { Tabs as OxTabs, TabsList as OxTabsList, TabsTrigger as OxTabsTrigger, TabsContent as OxTabsContent, } from './Navigation/Tabs/index.ts';
+export { ToggleTabs as OxToggleTabs, ToggleTabsList as OxToggleTabsList, ToggleTabsTrigger as OxToggleTabsTrigger, ToggleTabsContent as OxToggleTabsContent, } from './Navigation/ToggleTabs/index.ts';
+export { PageControl as OxPageControl, pageControlDots, PAGE_CONTROL_WINDOW, type PageControlDot, type PageControlDotSize, } from './Navigation/PageControl/index.ts';
 export { Breadcrumb as OxBreadcrumb, BreadcrumbList as OxBreadcrumbList, BreadcrumbItem as OxBreadcrumbItem, BreadcrumbLink as OxBreadcrumbLink, BreadcrumbPage as OxBreadcrumbPage, BreadcrumbSeparator as OxBreadcrumbSeparator, BreadcrumbEllipsis as OxBreadcrumbEllipsis, } from './Navigation/Breadcrumb/index.ts';
 export { FieldGroup as OxFieldGroup, FieldLabel as OxFieldLabel, FieldMessage as OxFieldMessage, type FieldGroupProps, } from './Forms/Field/index.ts';
 export { InputGroup as OxInputGroup, InputText as OxInputText, InputNumber as OxInputNumber, InputNumberContent as OxInputNumberContent, InputNumberDecrement as OxInputNumberDecrement, InputNumberIncrement as OxInputNumberIncrement, InputNumberInput as OxInputNumberInput, InputPassword as OxInputPassword, InputPasswordInput as OxInputPasswordInput, InputPasswordToggle as OxInputPasswordToggle, useInputPassword, InputOtp as OxInputOtp, InputOtpGroup as OxInputOtpGroup, InputOtpSlot as OxInputOtpSlot, InputOtpSeparator as OxInputOtpSeparator, useInputOtp, Combobox as OxCombobox, ComboboxInput as OxComboboxInput, ComboboxChipsInput as OxComboboxChipsInput, ComboboxContent as OxComboboxContent, ComboboxItem as OxComboboxItem, ComboboxEmpty as OxComboboxEmpty, ComboboxGroup as OxComboboxGroup, ComboboxSeparator as OxComboboxSeparator, Select as OxSelect, SelectTrigger as OxSelectTrigger, SelectContent as OxSelectContent, SelectItem as OxSelectItem, SelectGroup as OxSelectGroup, SelectSeparator as OxSelectSeparator, Switch as OxSwitch, Checkbox as OxCheckbox, RadioButton as OxRadioButton, RadioGroup as OxRadioGroup, ToggleGroup as OxToggleGroup, ToggleLabel as OxToggleLabel, ToggleDescription as OxToggleDescription, SWITCH_SIZES, type InputNumberProps, type InputPasswordProps, type InputPasswordContext, type InputOtpProps, type InputOtpSlotProps, type InputOtpContext, type ComboboxProps, type SelectProps, type RadioGroupProps, type ToggleGroupProps, type ToggleLabelProps, type ToggleDescriptionProps, } from './Forms/Inputs/index.ts';