# Types: PopoverProps to RovingTabsOptions (/themes/sdk/reference/ui/types-2)

```ts
import { … } from '@poltura/theme-sdk/ui';
```

## `PopoverProps` [#popoverprops]

Props of [`Popover`](/themes/sdk/reference/ui/parts-3#popover).

<TypeTable type={{"open":{"description":"Whether it is open, when you hold that state.","type":"boolean","required":false},"defaultOpen":{"description":"Whether it starts open, when it holds that state itself.","type":"boolean","required":false},"onOpenChange":{"description":"Called with the new state when the shopper opens or closes it.","type":"(open: boolean) => void","required":false},"children":{"description":"Its {@link PopoverTrigger} and {@link PopoverContent}.","type":"ReactNode","required":false}}} />

## `PopoverTriggerProps` [#popovertriggerprops]

Props of [`PopoverTrigger`](/themes/sdk/reference/ui/parts-3#popovertrigger).

<TypeTable type={{"asChild":{"description":"Makes its one child, such as your own `<button>`, the trigger instead of a button around it.","type":"boolean","required":false}}} />

## `PopoverContentProps` [#popovercontentprops]

Props of [`PopoverContent`](/themes/sdk/reference/ui/parts-4#popovercontent).

<TypeTable type={{"align":{"description":"Which edge of the button it lines up with; defaults to `center`.","type":"'start' | 'center' | 'end'","required":false},"sideOffset":{"description":"The gap from the button in pixels; defaults to 8.","type":"number","required":false},"collisionPadding":{"description":"The least room it keeps from the window's edges, in pixels; defaults to 0.","type":"number","required":false}}} />

## `SeparatorProps` [#separatorprops]

Props of [`Separator`](/themes/sdk/reference/ui/parts-4#separator).

<TypeTable type={{"orientation":{"description":"The direction of the line; defaults to `horizontal`.","type":"'horizontal' | 'vertical'","required":false},"decorative":{"description":"Hides the line from assistive technology when it is only decoration; defaults to true.","type":"boolean","required":false}}} />

## `SkeletonProps` [#skeletonprops]

Props of [`Skeleton`](/themes/sdk/reference/ui/parts-4#skeleton).

```ts
type SkeletonProps = HTMLAttributes<HTMLDivElement>
```

## `CarouselOptions` [#carouseloptions]

The options a [`Carousel`](/themes/sdk/reference/ui/parts-4#carousel) accepts.

<TypeTable type={{"loop":{"description":"Wraps from the last slide back to the first.","type":"boolean","required":false},"align":{"description":"Where the active slide rests in the viewport.","type":"'start' | 'center' | 'end'","required":false},"dragFree":{"description":"Lets a drag glide freely instead of snapping to a slide.","type":"boolean","required":false},"slidesToScroll":{"description":"How many slides one step moves, or `auto` for as many as fit.","type":"number | 'auto'","required":false},"startIndex":{"description":"The slide shown first, from 0.","type":"number","required":false},"skipSnaps":{"description":"Lets a fast drag skip slides.","type":"boolean","required":false},"duration":{"description":"The duration of the scroll animation; higher is slower.","type":"number","required":false}}} />

## `CarouselApi` [#carouselapi]

The carousel's controller, for reading which slide shows and moving between slides.

```ts
type CarouselApi = {
    scrollPrev: () => void;
    scrollNext: () => void;
    scrollTo: (index: number, jump?: boolean) => void;
    canScrollPrev: () => boolean;
    canScrollNext: () => boolean;
    selectedScrollSnap: () => number;
    scrollSnapList: () => number[];
    on: (event: 'select' | 'reInit', callback: () => void) => void;
    off: (event: 'select' | 'reInit', callback: () => void) => void;
} | undefined
```

## `CarouselProps` [#carouselprops]

Props of [`Carousel`](/themes/sdk/reference/ui/parts-4#carousel).

<TypeTable type={{"opts":{"description":"Scroll behaviour of the slides.","type":"CarouselOptions","required":false},"orientation":{"description":"The direction slides move in; defaults to `horizontal`.","type":"'horizontal' | 'vertical'","required":false},"setApi":{"description":"Receives the controller once the carousel is ready.","type":"(api: CarouselApi) => void","required":false}}} />

## `CarouselContentProps` [#carouselcontentprops]

Props of [`CarouselContent`](/themes/sdk/reference/ui/parts-4#carouselcontent).

```ts
type CarouselContentProps = HTMLAttributes<HTMLDivElement>
```

## `CarouselItemProps` [#carouselitemprops]

Props of [`CarouselItem`](/themes/sdk/reference/ui/parts-4#carouselitem).

```ts
type CarouselItemProps = HTMLAttributes<HTMLDivElement>
```

## `CarouselPreviousProps` [#carouselpreviousprops]

Props of [`CarouselPrevious`](/themes/sdk/reference/ui/parts-4#carouselprevious).

```ts
type CarouselPreviousProps = ComponentPropsWithoutRef<'button'> & {
    variant?: ButtonProps['variant'];
    size?: ButtonProps['size'];
}
```

## `CarouselNextProps` [#carouselnextprops]

Props of [`CarouselNext`](/themes/sdk/reference/ui/parts-4#carouselnext).

```ts
type CarouselNextProps = ComponentPropsWithoutRef<'button'> & {
    variant?: ButtonProps['variant'];
    size?: ButtonProps['size'];
}
```

## `InlineErrorProps` [#inlineerrorprops]

Props of [`InlineError`](/themes/sdk/reference/ui/parts-4#inlineerror).

<TypeTable type={{"message":{"description":"The error text; nothing is drawn while it is empty.","type":"string | null","required":false},"className":{"description":"Classes added to the message.","type":"string","required":false}}} />

## `IconProps` [#iconprops]

Props of [`Icon`](/themes/sdk/reference/ui/parts-4#icon).

<TypeTable type={{"value":{"description":"An `icon` setting's value.","type":"IconValue","required":true},"label":{"description":"The accessible name; leave it out for a decorative icon, which is hidden from screen readers.","type":"string","required":false},"className":{"description":"Size and colour classes; the icon is `size-5` and takes the text colour by default.","type":"string","required":false}}} />

## `TooltipProps` [#tooltipprops]

Props of [`Tooltip`](/themes/sdk/reference/ui/parts-4#tooltip).

<TypeTable type={{"content":{"description":"The text shown in the tooltip.","type":"string","required":true},"children":{"description":"The single element that shows the tooltip on hover and focus.","type":"ReactElement","required":true}}} />

## `PageLinksProps` [#pagelinksprops]

Props of [`PageLinks`](/themes/sdk/reference/ui/parts-4#pagelinks).

<TypeTable type={{"page":{"description":"The current page, from 1.","type":"number","required":true},"pageCount":{"description":"How many pages there are; nothing is drawn for one page or fewer.","type":"number","required":true},"href":{"description":"The path of a page, such as `/blog?page=2`.","type":"(page: number) => string","required":true},"className":{"description":"Classes added to the navigation.","type":"string","required":false}}} />

## `ClassFlag` [#classflag]

A flag in an object of flags: its class name applies while the flag is truthy.

```ts
type ClassFlag = string | number | bigint | boolean | null | undefined
```

## `ClassValue` [#classvalue]

Anything [`cn`](/themes/sdk/reference/ui/functions#cn) turns into class names: strings, numbers, nested arrays and objects of flags.

```ts
type ClassValue = ClassFlag | {
    readonly [className: string]: ClassFlag;
} | ClassValue[]
```

## `InViewOptions` [#inviewoptions]

Options of [`useInView`](/themes/sdk/reference/ui/hooks#useinview).

<TypeTable type={{"threshold":{"description":"How much of the element must show, from 0 to 1, to count as in view.","type":"number","required":false},"rootMargin":{"description":"A margin around the viewport, written like CSS margins.","type":"string","required":false},"once":{"description":"Stays in view for good once seen; defaults to true.","type":"boolean","required":false}}} />

## `InView` [#inview]

What [`useInView`](/themes/sdk/reference/ui/hooks#useinview) returns.

<TypeTable type={{"ref":{"description":"Attach it to the element to watch.","type":"RefObject<HTMLDivElement | null>","required":true},"inView":{"description":"Whether the element is in view; true until an off-screen element is measured.","type":"boolean","required":true}}} />

## `SnapCarouselOptions` [#snapcarouseloptions]

Options of [`useSnapCarousel`](/themes/sdk/reference/ui/hooks#usesnapcarousel).

<TypeTable type={{"autoplay":{"description":"Moves to the next slide on its own until the visitor touches the track or a control.","type":"boolean","required":true},"intervalMs":{"description":"The time between automatic moves, in milliseconds.","type":"number","required":true}}} />

## `SnapCarousel` [#snapcarousel]

What [`useSnapCarousel`](/themes/sdk/reference/ui/hooks#usesnapcarousel) returns.

<TypeTable type={{"trackRef":{"description":"Attach it to the scrolling element whose direct children are the slides.","type":"RefObject<HTMLDivElement | null>","required":true},"activeIndex":{"description":"The index of the slide nearest the start of the track.","type":"number","required":true},"goTo":{"description":"Scrolls to a slide by its index and stops autoplay.","type":"(index: number) => void","required":true},"autoplaying":{"description":"Whether the track is moving on its own right now.","type":"boolean","required":true}}} />

## `RovingTab` [#rovingtab]

One tab of a tablist that [`useRovingTabs`](/themes/sdk/reference/ui/hooks#userovingtabs) moves focus between.

```ts
type RovingTab<Id extends string = string>
```

<TypeTable type={{"id":{"description":"The tab's id.","type":"Id","required":true}}} />

## `RovingTabsOptions` [#rovingtabsoptions]

Options of [`useRovingTabs`](/themes/sdk/reference/ui/hooks#userovingtabs).

```ts
type RovingTabsOptions<Id extends string>
```

<TypeTable type={{"tabs":{"description":"The tabs in order.","type":"readonly RovingTab<Id>[]","required":true},"onSelect":{"description":"Called with the id of the tab that arrow, Home or End keys select.","type":"(id: Id) => void","required":true},"tabDomId":{"description":"The DOM id rendered on a tab's button, which the handler uses to focus it.","type":"(id: Id) => string","required":true}}} />