@spark-ui/components 17.2.2 → 17.2.3-beta.1

package/dist/src/snackbar/SnackbarItemContext.d.ts

@@ -0,0 +1,8 @@
+import { QueuedToast, ToastState } from '@react-stately/toast';
+import { SnackbarItemValue } from './SnackbarItem';
+export interface SnackbarItemState<T = SnackbarItemValue> {
+    toast: QueuedToast<T>;
+    state: ToastState<T>;
+}
+export declare const SnackbarItemContext: import('react').Context<SnackbarItemState<SnackbarItemValue>>;
+export declare const useSnackbarItemContext: () => SnackbarItemState<SnackbarItemValue>;

package/dist/src/snackbar/SnackbarItemIcon.d.ts

@@ -0,0 +1,7 @@
+import { ReactElement } from 'react';
+import { IconProps } from '../icon';
+export type SnackbarItemIconProps = IconProps;
+export declare const SnackbarItemIcon: {
+    ({ children, className, ...rest }: SnackbarItemIconProps): ReactElement;
+    displayName: string;
+};

package/dist/src/snackbar/SnackbarRegion.d.ts

@@ -0,0 +1,30 @@
+import { AriaToastRegionProps } from '@react-aria/toast';
+import { ComponentPropsWithRef, ReactElement } from 'react';
+import { SnackbarItem, SnackbarItemProps } from './SnackbarItem';
+import { SnackbarItemState } from './SnackbarItemContext';
+import { SnackbarRegionVariantProps } from './SnackbarRegion.styles';
+export interface SnackbarRegionProps extends ComponentPropsWithRef<'div'>, AriaToastRegionProps, SnackbarRegionVariantProps, Pick<SnackbarItemState, 'state'> {
+    /**
+     * An accessibility label for the snackbar region.
+     * @default 'Notifications'
+     */
+    'aria-label'?: string;
+    /**
+     * Identifies the element (or elements) that labels the current element.
+     */
+    'aria-labelledby'?: string;
+    /**
+     * Identifies the element (or elements) that describes the object.
+     */
+    'aria-describedby'?: string;
+    /**
+     * Identifies the element (or elements) that provide a detailed, extended description for the object.
+     */
+    'aria-details'?: string;
+    /**
+     * The component/template used to display each snackbar from the queue
+     * @default 'Snackbar.Item'
+     */
+    children?: ReactElement<SnackbarItemProps, typeof SnackbarItem>;
+}
+export declare const SnackbarRegion: ({ children, state, position, className, ref: forwardedRef, ...rest }: SnackbarRegionProps) => ReactElement;

package/dist/src/snackbar/SnackbarRegion.styles.d.ts

@@ -0,0 +1,5 @@
+import { VariantProps } from 'class-variance-authority';
+export declare const snackbarRegionVariant: (props?: ({
+    position?: "bottom" | "top" | "top-right" | "top-left" | "bottom-right" | "bottom-left" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export type SnackbarRegionVariantProps = VariantProps<typeof snackbarRegionVariant>;

package/dist/src/snackbar/index.d.mts

@@ -0,0 +1,13 @@
+import { addSnackbar, AddSnackbarArgs, clearSnackbarQueue, Snackbar as Root, SnackbarProps } from './Snackbar';
+import { SnackbarItem as Item, SnackbarItemProps } from './SnackbarItem';
+import { SnackbarItemAction as ItemAction, SnackbarItemActionProps } from './SnackbarItemAction';
+import { SnackbarItemClose as ItemClose, SnackbarItemCloseProps } from './SnackbarItemClose';
+import { SnackbarItemIcon as ItemIcon, SnackbarItemIconProps } from './SnackbarItemIcon';
+export declare const Snackbar: typeof Root & {
+    Item: typeof Item;
+    ItemAction: typeof ItemAction;
+    ItemClose: typeof ItemClose;
+    ItemIcon: typeof ItemIcon;
+};
+export type { SnackbarProps, SnackbarItemProps, SnackbarItemActionProps, SnackbarItemCloseProps, SnackbarItemIconProps, AddSnackbarArgs, };
+export { addSnackbar, clearSnackbarQueue };

package/dist/src/snackbar/index.d.ts

@@ -0,0 +1,13 @@
+import { addSnackbar, AddSnackbarArgs, clearSnackbarQueue, Snackbar as Root, SnackbarProps } from './Snackbar';
+import { SnackbarItem as Item, SnackbarItemProps } from './SnackbarItem';
+import { SnackbarItemAction as ItemAction, SnackbarItemActionProps } from './SnackbarItemAction';
+import { SnackbarItemClose as ItemClose, SnackbarItemCloseProps } from './SnackbarItemClose';
+import { SnackbarItemIcon as ItemIcon, SnackbarItemIconProps } from './SnackbarItemIcon';
+export declare const Snackbar: typeof Root & {
+    Item: typeof Item;
+    ItemAction: typeof ItemAction;
+    ItemClose: typeof ItemClose;
+    ItemIcon: typeof ItemIcon;
+};
+export type { SnackbarProps, SnackbarItemProps, SnackbarItemActionProps, SnackbarItemCloseProps, SnackbarItemIconProps, AddSnackbarArgs, };
+export { addSnackbar, clearSnackbarQueue };

package/dist/src/snackbar/snackbarVariants.d.ts

@@ -0,0 +1,74 @@
+export declare const filledVariants: readonly [{
+    readonly design: "filled";
+    readonly intent: "success";
+    readonly class: readonly ["bg-success text-on-success"];
+}, {
+    readonly design: "filled";
+    readonly intent: "alert";
+    readonly class: readonly ["bg-alert text-on-alert"];
+}, {
+    readonly design: "filled";
+    readonly intent: "error";
+    readonly class: readonly ["bg-error text-on-error"];
+}, {
+    readonly design: "filled";
+    readonly intent: "info";
+    readonly class: readonly ["bg-info text-on-info"];
+}, {
+    readonly design: "filled";
+    readonly intent: "neutral";
+    readonly class: readonly ["bg-neutral text-on-neutral"];
+}, {
+    readonly design: "filled";
+    readonly intent: "main";
+    readonly class: readonly ["bg-main text-on-main"];
+}, {
+    readonly design: "filled";
+    readonly intent: "support";
+    readonly class: readonly ["bg-support text-on-support"];
+}, {
+    readonly design: "filled";
+    readonly intent: "accent";
+    readonly class: readonly ["bg-accent text-on-accent"];
+}, {
+    readonly design: "filled";
+    readonly intent: "inverse";
+    readonly class: readonly ["bg-surface-inverse text-on-surface-inverse"];
+}];
+export declare const tintedVariants: readonly [{
+    readonly design: "tinted";
+    readonly intent: "success";
+    readonly class: readonly ["bg-success-container text-on-success-container"];
+}, {
+    readonly design: "tinted";
+    readonly intent: "alert";
+    readonly class: readonly ["bg-alert-container text-on-alert-container"];
+}, {
+    readonly design: "tinted";
+    readonly intent: "error";
+    readonly class: readonly ["bg-error-container text-on-error-container"];
+}, {
+    readonly design: "tinted";
+    readonly intent: "info";
+    readonly class: readonly ["bg-info-container text-on-info-container"];
+}, {
+    readonly design: "tinted";
+    readonly intent: "neutral";
+    readonly class: readonly ["bg-neutral-container text-on-neutral-container"];
+}, {
+    readonly design: "tinted";
+    readonly intent: "main";
+    readonly class: readonly ["bg-main-container text-on-main-container"];
+}, {
+    readonly design: "tinted";
+    readonly intent: "support";
+    readonly class: readonly ["bg-support-container text-on-support-container"];
+}, {
+    readonly design: "tinted";
+    readonly intent: "accent";
+    readonly class: readonly ["bg-accent-container text-on-accent-container"];
+}, {
+    readonly design: "tinted";
+    readonly intent: "inverse";
+    readonly class: readonly ["bg-surface-inverse text-on-surface-inverse"];
+}];

package/dist/src/snackbar/useSnackbarGlobalStore.d.ts

@@ -0,0 +1,18 @@
+import { RefObject } from 'react';
+interface UseSnackbarGlobalStoreArgs<T> {
+    providers: Set<T>;
+    subscriptions: Set<() => void>;
+}
+interface UseSnackbarGlobalStoreReturn<T> {
+    provider: T;
+    addProvider: (ref: T) => void;
+    deleteProvider: (ref: T) => void;
+}
+/**
+ * This hook is a basic abstraction of useSyncExternalStore hook which allows us
+ * to consume data from an external data store.
+ *
+ * Cf. https://react.dev/reference/react/useSyncExternalStore#subscribing-to-an-external-store
+ */
+export declare const useSnackbarGlobalStore: <T = RefObject<HTMLDivElement | null>>({ providers, subscriptions, }: UseSnackbarGlobalStoreArgs<T>) => UseSnackbarGlobalStoreReturn<T>;
+export {};

package/dist/src/snackbar/useSwipe.d.ts

@@ -0,0 +1,15 @@
+import { RefObject } from 'react';
+interface SwipeArgs<T> {
+    swipeRef: RefObject<T | null>;
+    onSwipeStart?: ({ state, direction }: SwipeReturn) => void;
+    onSwipeMove?: ({ state, direction }: SwipeReturn) => void;
+    onSwipeCancel?: ({ state, direction }: SwipeReturn) => void;
+    onSwipeEnd?: ({ state, direction }: SwipeReturn) => void;
+    threshold?: number;
+}
+interface SwipeReturn {
+    state?: 'start' | 'move' | 'cancel' | 'end';
+    direction?: 'up' | 'down' | 'right' | 'left' | null;
+}
+export declare const useSwipe: <T extends HTMLElement>({ swipeRef, onSwipeStart, onSwipeMove, onSwipeCancel, onSwipeEnd, threshold, }: SwipeArgs<T>) => SwipeReturn;
+export {};

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

@@ -0,0 +1,9 @@
+import { ComponentPropsWithRef, PropsWithChildren } from 'react';
+import { SpinnerStylesProps } from './Spinner.styles';
+export interface SpinnerProps extends ComponentPropsWithRef<'div'>, SpinnerStylesProps {
+    /**
+     * Use `label` prop for accessibility, it is important to add a fallback loading text. This text will be visible to screen readers.
+     */
+    label?: string;
+}
+export declare const Spinner: ({ className, size, intent, label, isBackgroundVisible, ref, ...others }: PropsWithChildren<SpinnerProps>) => import("react/jsx-runtime").JSX.Element;

package/dist/src/spinner/Spinner.styles.d.ts

@@ -0,0 +1,7 @@
+import { VariantProps } from 'class-variance-authority';
+export declare const spinnerStyles: (props?: ({
+    size?: "current" | "sm" | "md" | "full" | null | undefined;
+    intent?: "main" | "current" | "alert" | "error" | "support" | "accent" | "success" | "info" | "neutral" | null | undefined;
+    isBackgroundVisible?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export type SpinnerStylesProps = VariantProps<typeof spinnerStyles>;

package/dist/src/spinner/index.d.mts

@@ -0,0 +1 @@
+export * from './Spinner';

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

@@ -0,0 +1 @@
+export * from './Spinner';

package/dist/src/stepper/Stepper.d.ts

@@ -0,0 +1,9 @@
+import { PropsWithChildren, RefObject } from 'react';
+import { StepperProps, UseStepperReturn } from './types';
+export declare const Stepper: {
+    ({ children, formatOptions, minValue, maxValue, ref: forwardedRef, ...stepperProps }: PropsWithChildren<StepperProps>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export declare const useStepperContext: () => Omit<UseStepperReturn, "groupProps"> & {
+    inputRef: RefObject<HTMLInputElement | null>;
+};

package/dist/src/stepper/StepperButton.d.ts

@@ -0,0 +1,14 @@
+import { PropsWithChildren } from 'react';
+import { StepperButtonProps } from './types';
+export declare const StepperIncrementButton: {
+    ({ children, design, intent, className, ref: forwardedRef, ...rest }: PropsWithChildren<StepperButtonProps>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+} & {
+    id: string;
+};
+export declare const StepperDecrementButton: {
+    ({ children, design, intent, className, ref: forwardedRef, ...rest }: PropsWithChildren<StepperButtonProps>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+} & {
+    id: string;
+};

package/dist/src/stepper/StepperInput.d.ts

@@ -0,0 +1,7 @@
+import { StepperInputProps } from './types';
+export declare const StepperInput: {
+    ({ ref: forwardedRef, ...props }: StepperInputProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+} & {
+    id: string;
+};

package/dist/src/stepper/index.d.mts

@@ -0,0 +1,9 @@
+import { Stepper as Root } from './Stepper';
+import { StepperDecrementButton as DecrementButton, StepperIncrementButton as IncrementButton } from './StepperButton';
+import { StepperInput as Input } from './StepperInput';
+export declare const Stepper: typeof Root & {
+    IncrementButton: typeof IncrementButton;
+    DecrementButton: typeof DecrementButton;
+    Input: typeof Input;
+};
+export type { StepperProps, StepperButtonProps, StepperInputProps } from './types';

package/dist/src/stepper/index.d.ts

@@ -0,0 +1,9 @@
+import { Stepper as Root } from './Stepper';
+import { StepperDecrementButton as DecrementButton, StepperIncrementButton as IncrementButton } from './StepperButton';
+import { StepperInput as Input } from './StepperInput';
+export declare const Stepper: typeof Root & {
+    IncrementButton: typeof IncrementButton;
+    DecrementButton: typeof DecrementButton;
+    Input: typeof Input;
+};
+export type { StepperProps, StepperButtonProps, StepperInputProps } from './types';

package/dist/src/stepper/types.d.ts

@@ -0,0 +1,46 @@
+import { AriaButtonOptions } from '@react-aria/button';
+import { NumberFieldAria } from '@react-aria/numberfield';
+import { NumberFieldStateOptions } from '@react-stately/numberfield';
+import { AriaNumberFieldProps } from '@react-types/numberfield';
+import { Ref, RefObject } from 'react';
+import { IconButtonProps } from '../icon-button';
+import { InputGroupProps, InputProps } from '../input';
+/**
+ * As we're using React Spectrum library to build this component, we also want
+ * to build our typing uppon theirs.
+ * Still, we have to adapt it to avoid exposing useless props.
+ */
+export type StepperButtonProps = Omit<IconButtonProps, 'shape' | 'size' | 'disabled' | 'asChild' | 'isLoading' | 'loadingLabel'> & Omit<AriaButtonOptions<'button'>, 'elementType' | 'href' | 'target' | 'isDisabled' | 'excludeFromTabOrder' | 'aria-label' | 'preventFocusOnPress'> & {
+    disabled?: boolean;
+    ref?: Ref<HTMLButtonElement>;
+};
+type SpectrumNumberFieldPropsFilter = 'isDisabled' | 'isReadOnly' | 'isRequired' | 'isInvalid' | 'validationState' | 'validationBehavior' | 'validate' | 'label' | 'description' | 'errorMessage' | 'isWheelDisabled' | 'id' | 'onCopy' | 'onCut' | 'onPaste' | 'onCompositionStart' | 'onCompositionEnd' | 'onCompositionUpdate' | 'onSelect' | 'onBeforeInput' | 'onInput';
+export interface UseStepperArgs extends Omit<Omit<NumberFieldStateOptions, 'locale'> & Omit<AriaNumberFieldProps, 'incrementAriaLabel' | 'decrementAriaLabel'>, SpectrumNumberFieldPropsFilter> {
+    inputRef: RefObject<HTMLInputElement | null>;
+    /**
+     * Sets the component as interactive or not.
+     */
+    disabled?: boolean;
+    /**
+     * Sets the component as editable or not.
+     */
+    readOnly?: boolean;
+    /**
+     * Sets the component as mandatory for form validation.
+     */
+    required?: boolean;
+    /**
+     * The [BCP47](https://www.ietf.org/rfc/bcp/bcp47.txt) language code for the locale.
+     * @default 'fr'
+     */
+    locale?: string;
+}
+export type UseStepperReturn = Pick<NumberFieldAria, 'groupProps' | 'inputProps' | 'incrementButtonProps' | 'decrementButtonProps'>;
+export type StepperProps = Omit<Omit<UseStepperArgs, 'inputRef' | 'aria-label'> & Omit<InputGroupProps, 'onClear'>, 'onChange'> & {
+    onValueChange?: (e: number) => void;
+    ref?: Ref<HTMLDivElement>;
+};
+export type StepperInputProps = Omit<InputProps, 'asChild'> & {
+    ref?: Ref<HTMLInputElement>;
+};
+export {};

package/dist/src/stepper/useStepper.d.ts

@@ -0,0 +1,2 @@
+import { UseStepperArgs, UseStepperReturn } from './types';
+export declare const useStepper: ({ inputRef, locale, ...rest }: UseStepperArgs) => UseStepperReturn;

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

@@ -0,0 +1,6 @@
+import { SwitchInputProps } from './SwitchInput';
+export type SwitchProps = SwitchInputProps;
+export declare const Switch: {
+    ({ size, children, className, id, disabled, reverse, ref, ...rest }: SwitchProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/src/switch/SwitchInput.d.ts

@@ -0,0 +1,53 @@
+import { Switch as BaseSwitch } from '@base-ui/react/switch';
+import { ComponentPropsWithRef, ReactNode } from 'react';
+import { StylesProps } from './SwitchInput.styles';
+export interface SwitchInputProps extends StylesProps, Omit<ComponentPropsWithRef<typeof BaseSwitch.Root>, 'value' | 'render' | 'onCheckedChange'> {
+    /**
+     * The state of the switch when it is initially rendered. Use when you do not need to control its state.
+     */
+    defaultChecked?: boolean;
+    /**
+     * The controlled state of the switch. Must be used in conjunction with `onCheckedChange`.
+     */
+    checked?: boolean;
+    /**
+     * Event handler called when the state of the switch changes.
+     */
+    onCheckedChange?: (checked: boolean) => void;
+    /**
+     * When `true`, prevents the user from interacting with the switch.
+     */
+    disabled?: boolean;
+    /**
+     * When true, indicates that the user must check the switch before the owning form can be submitted.
+     */
+    required?: boolean;
+    /**
+     * The name of the switch. Submitted with its owning form as part of a name/value pair.
+     */
+    name?: string;
+    /**
+     * The value given as data when submitted with a name.
+     */
+    value?: string;
+    /**
+     * Icon shown inside the thumb of the Switch whenever it is checked
+     */
+    checkedIcon?: ReactNode;
+    /**
+     * Icon shown inside the thumb of the Switch whenever it is unchecked
+     */
+    uncheckedIcon?: ReactNode;
+    /**
+     * When true, the label will be placed on the left side of the Switch
+     */
+    reverse?: boolean;
+    /**
+     * Change the default rendered element for the one passed as a child, merging their props and behavior.
+     */
+    asChild?: boolean;
+}
+export declare const SwitchInput: {
+    ({ checked, checkedIcon, defaultChecked, intent: intentProp, uncheckedIcon, size, onCheckedChange, className, required, ref, asChild, ...rest }: SwitchInputProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/src/switch/SwitchInput.styles.d.ts

@@ -0,0 +1,16 @@
+import { VariantProps } from 'class-variance-authority';
+export declare const styles: (props?: ({
+    size?: "sm" | "md" | null | undefined;
+    intent?: "main" | "alert" | "error" | "support" | "accent" | "success" | "info" | "neutral" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export type StylesProps = VariantProps<typeof styles>;
+export declare const thumbWrapperStyles: (props?: ({
+    checked?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const thumbStyles: (props?: ({
+    size?: "sm" | "md" | null | undefined;
+    checked?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const thumbCheckSVGStyles: (props?: ({
+    size?: "sm" | "md" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/src/switch/SwitchLabel.d.ts

@@ -0,0 +1,17 @@
+import { LabelProps } from '../label';
+import { LabelStylesProps } from './SwitchLabel.styles';
+export interface SwitchLabelProps extends LabelStylesProps, LabelProps {
+    /**
+     * Change the component to the HTML tag or custom component of the only child.
+     */
+    asChild?: boolean;
+    /**
+     * The id of the element the label is associated with.
+     */
+    htmlFor?: string;
+    /**
+     * When true, prevents the user from interacting with the switch item.
+     */
+    disabled?: boolean;
+}
+export declare const SwitchLabel: ({ className, disabled, ...others }: SwitchLabelProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/switch/SwitchLabel.styles.d.ts

@@ -0,0 +1,5 @@
+import { VariantProps } from 'class-variance-authority';
+export declare const labelStyles: (props?: ({
+    disabled?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export type LabelStylesProps = VariantProps<typeof labelStyles>;

package/dist/src/switch/index.d.mts

@@ -0,0 +1 @@
+export * from './Switch';

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

@@ -0,0 +1 @@
+export * from './Switch';

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

@@ -0,0 +1,24 @@
+import { Tabs as BaseTabs } from '@base-ui/react/tabs';
+import { ComponentProps, PropsWithChildren, Ref } from 'react';
+import { TabsTriggerVariantsProps } from './TabsTrigger.styles';
+export interface TabsProps extends Omit<ComponentProps<typeof BaseTabs.Root>, 'render'>, PropsWithChildren<Omit<TabsTriggerVariantsProps, 'orientation'>> {
+    /**
+     * Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.
+     * @default false
+     */
+    asChild?: boolean;
+    /**
+     * Whether to keep inactive tabs content in the DOM.
+     * @default false
+     */
+    forceMount?: boolean;
+    ref?: Ref<HTMLDivElement>;
+}
+/**
+ * @deprecated
+ */
+export type TabsRootProps = TabsProps;
+export declare const Tabs: {
+    ({ intent, size, asChild, forceMount, orientation, children, className, ref, ...rest }: TabsProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/src/tabs/TabsContent.d.ts

@@ -0,0 +1,22 @@
+import { Tabs as BaseTabs } from '@base-ui/react/tabs';
+import { ComponentProps, PropsWithChildren, Ref } from 'react';
+export interface TabsContentProps extends PropsWithChildren<Omit<ComponentProps<typeof BaseTabs.Panel>, 'keepMounted' | 'render'>> {
+    /**
+     * A unique value that associates the content with a trigger.
+     */
+    value: string;
+    /**
+     * Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.
+     * @default false
+     */
+    asChild?: boolean;
+    /**
+     * Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.
+     */
+    forceMount?: true;
+    ref?: Ref<HTMLDivElement>;
+}
+export declare const TabsContent: {
+    ({ children, asChild, className, ref, forceMount, ...rest }: TabsContentProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/src/tabs/TabsContent.styles.d.ts

@@ -0,0 +1,3 @@
+export declare const contentStyles: (props?: ({
+    forceMount?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/src/tabs/TabsContext.d.ts

@@ -0,0 +1,7 @@
+import { TabsTriggerVariantsProps } from './TabsTrigger.styles';
+export type TabsContextInterface = TabsTriggerVariantsProps & {
+    orientation?: 'horizontal' | 'vertical';
+    forceMount?: boolean;
+};
+export declare const TabsContext: import('react').Context<TabsContextInterface>;
+export declare const useTabsContext: () => TabsContextInterface;

package/dist/src/tabs/TabsList.d.ts

@@ -0,0 +1,20 @@
+import { Tabs as BaseTabs } from '@base-ui/react/tabs';
+import { ComponentProps, ReactElement, Ref } from 'react';
+export interface TabsListProps extends Omit<ComponentProps<typeof BaseTabs.List>, 'render' | 'loopFocus'> {
+    /**
+     * Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.
+     * @default false
+     */
+    asChild?: boolean;
+    /**
+     * When true, keyboard navigation will loop from last tab to first, and vice versa.
+     * @default false
+     */
+    loop?: boolean;
+    children: ReactElement[] | ReactElement;
+    ref?: Ref<HTMLDivElement>;
+}
+export declare const TabsList: {
+    ({ asChild, loop, children, className, ref, ...rest }: TabsListProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/src/tabs/TabsList.styles.d.ts

@@ -0,0 +1,3 @@
+export declare const wrapperStyles: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const listStyles: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const navigationArrowStyles: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;

package/dist/src/tabs/TabsPopover.d.ts

@@ -0,0 +1,29 @@
+import { ReactNode, Ref } from 'react';
+export interface TabsPopoverProps {
+    /**
+     * The tab value this popover is associated with (automatically set by Tabs.Trigger)
+     */
+    tabValue?: string;
+    /**
+     * Whether this tab is currently active (automatically set by Tabs.Trigger)
+     */
+    isTabActive?: boolean;
+    /**
+     * Whether the popover is open
+     */
+    open?: boolean;
+    /**
+     * Callback when popover open state changes
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * The popover content - typically a Popover or other overlay component
+     */
+    children: ReactNode;
+    /**
+     * Additional className for positioning
+     */
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+export declare const TabsPopover: import('react').ForwardRefExoticComponent<Omit<TabsPopoverProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;

package/dist/src/tabs/TabsPopoverAbstraction.d.ts

@@ -0,0 +1,27 @@
+import { ComponentType, ReactNode, RefObject } from 'react';
+import { Popover as SparkPopover } from '../popover';
+import { PopoverProps } from '../popover/Popover';
+import { ContentProps as PopoverContentProps } from '../popover/PopoverContent';
+import { TriggerProps as PopoverTriggerProps } from '../popover/PopoverTrigger';
+interface TabsPopoverTriggerProps extends Omit<PopoverTriggerProps, 'asChild' | 'children'> {
+    'aria-label': string;
+    children?: ReactNode;
+}
+declare const TabsPopoverTrigger: import('react').ForwardRefExoticComponent<Omit<TabsPopoverTriggerProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;
+declare const TabsPopoverContent: import('react').ForwardRefExoticComponent<Omit<PopoverContentProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export type TabsPopoverTriggerComponent = typeof TabsPopoverTrigger;
+export type TabsPopoverContentComponent = typeof TabsPopoverContent;
+export type ConfiguredPopoverComponent = ComponentType<PopoverProps> & Omit<typeof SparkPopover, 'Content' | 'Trigger'> & {
+    Content: TabsPopoverContentComponent;
+    Trigger: TabsPopoverTriggerComponent;
+};
+interface PopoverAbstractionProps {
+    popoverSide: 'right' | 'bottom';
+    popoverTriggerRef: RefObject<HTMLButtonElement | null>;
+    children: (Popover: ConfiguredPopoverComponent) => ReactNode;
+}
+export declare const Popover: {
+    ({ popoverSide, popoverTriggerRef, children }: PopoverAbstractionProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export {};

package/dist/src/tabs/TabsRoot.styles.d.ts

@@ -0,0 +1 @@
+export declare const rootStyles: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;

package/dist/src/tabs/TabsTrigger.d.ts

@@ -0,0 +1,41 @@
+import { Tabs as BaseTabs } from '@base-ui/react/tabs';
+import { ComponentProps, ReactNode, Ref } from 'react';
+import { ConfiguredPopoverComponent } from './TabsPopoverAbstraction';
+export interface TabsTriggerProps extends Omit<ComponentProps<typeof BaseTabs.Tab>, 'render'> {
+    /**
+     * A unique value that associates the trigger with a content.
+     */
+    value: string;
+    /**
+     * Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.
+     * @default false
+     */
+    asChild?: boolean;
+    /**
+     * When true, prevents the user from interacting with the tab.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Function that receives a pre-configured Popover component and returns the popover structure.
+     * @example
+     * renderMenu={({ Popover }) => (
+     *   <Popover>
+     *     <Popover.Trigger aria-label="Options">
+     *       <CustomIcon />
+     *     </Popover.Trigger>
+     *     <Popover.Content>
+     *       <Button>Action</Button>
+     *     </Popover.Content>
+     *   </Popover>
+     * )}
+     */
+    renderMenu?: (props: {
+        Popover: ConfiguredPopoverComponent;
+    }) => ReactNode;
+    ref?: Ref<HTMLButtonElement>;
+}
+export declare const TabsTrigger: {
+    ({ asChild, value, disabled, children, className, ref, onKeyDown, renderMenu, ...rest }: TabsTriggerProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};