@keystar/ui

module "@keystar/ui/core" {

KeystarProvider

Consolidates core functionality and dependencies of the Keystar component library.

export const KeystarProvider: CompWithAsProp<KeystarProviderProps, "div"> = ...

useProvider

Returns the settings and styles applied by the nearest parent Provider. Properties explicitly set by the nearest parent Provider override those provided by preceeding Providers.

export function useProvider(): KeystarProviderContext

Unexported symbols referenced here

KeystarProviderContext

type KeystarProviderContext = {

The package version number of the nearest parent Provider.

version: string;

The theme of the nearest parent Provider.

less

The color scheme of the nearest parent Provider.

colorScheme: ColorScheme;

The scale of the nearest parent Provider.

scale: ScaleScheme;

} & VoussoirContextProps

Referenced by

useProvider

useProviderProps

export function useProviderProps<T>(props: T): T

ClientSideOnlyDocumentElement

export function ClientSideOnlyDocumentElement(props: {

bodyBackground?: keyof VoussoirTheme["color"]["background"];

}): null

documentElementClasses

export const documentElementClasses: (args: {

bodyBackground?: StrictBackground;

colorScheme?: ColorScheme;

}) => string = ...

Unexported symbols referenced here

StrictBackground

type StrictBackground = keyof VoussoirTheme["color"]["background"]

Referenced by

documentElementClasses

export {

KeystarProvider as TestProvider,

} from "@keystar/ui/core"

KeystarProviderProps

export type KeystarProviderProps = {

The content of the Provider.

children: import("react").ReactNode;

The color scheme for your application. Defaults to operating system preferences.

less

@default — 'auto'

colorScheme?: ColorScheme;

Sets the scale for your applications. Defaults based on device pointer type.

scale?: ScaleScheme;

The locale for your application as a BCP 47 language code. Defaults to the browser/OS language setting.

less

@default — 'en-US'

locale?: string;

The background color of the body element. This will only have an effect if the KeystarProvider is rendered as the html element.

bodyBackground?: keyof VoussoirTheme["color"]["background"];

Provide a client side router to all nested Keystar links to enable client side navigation.

router?: Router;

} & VoussoirContextProps & import("@react-types/shared").DOMProps & RootStyleProps

Referenced by

KeystarProvider

Unexported symbols referenced here

VoussoirContextProps

type VoussoirContextProps = {

Whether descendants should be displayed with the emphasized style.

emphasis?: Emphasis;

Whether descendants should be disabled.

isDisabled?: boolean;

Whether descendants should be displayed with the required style.

isRequired?: boolean;

Whether descendants should be read only.

isReadOnly?: boolean;

}

Referenced by

KeystarProviderProps
KeystarProviderContext

}

@keystar/ui/icon

module "@keystar/ui/icon" {

Icon

export const Icon: (props: IconProps) => import("react").Element = ...

}

@keystar/ui/link

module "@keystar/ui/link" {

export {

useLink,

} from "react-aria"

TextLink

Text links take users to another place in the application, and usually appear within or directly following a sentence. Styled to resemble a hyperlink.

export const TextLink: import("react").ForwardRefExoticComponent<TextLinkProps & import("react").RefAttributes<HTMLAnchorElement | HTMLSpanElement>> = ...

TextLinkProps

export type TextLinkProps = TextLinkButtonProps | TextLinkAnchorProps

Referenced by

TextLink

Unexported symbols referenced here

TextLinkButtonProps

type TextLinkButtonProps = {

The content to display in the text link.

children?: import("react").ReactNode;

The visual prominence of the text link.

less

@default — 'default'

prominence?: TextLinkProminence;

} & import("@react-types/shared").DOMProps & import("@react-types/shared").PressEvents & import("@react-types/shared").FocusableProps

Referenced by

TextLinkProps
TextLinkAnchorProps

TextLinkAnchorProps

type TextLinkAnchorProps = TextLinkButtonProps & AnchorDOMProps

Referenced by

TextLinkProps

TextLinkProminence

type TextLinkProminence = "default" | "high"

Referenced by

TextLinkButtonProps

}

module "@keystar/ui/menu" {

ActionMenu combines an ActionButton with a Menu for simple "more actions" use cases.

export const ActionMenu: <T>(props: ActionMenuProps<T> & {

ref?: import("react").Ref<HTMLButtonElement>;

}) => import("react").ReactElement = ...

Menus display a list of actions or options that a user can choose.

export const Menu: <T>(props: MenuProps<T> & {

ref?: import("react").RefObject<HTMLDivElement | null>;

}) => import("react").ReactElement = ...

The MenuTrigger serves as a wrapper around a Menu and its associated trigger, linking the Menu's open state with the trigger's press state.

export const MenuTrigger: import("react").ForwardRefExoticComponent<{

children: import("react").ReactElement[];

align?: import("@react-types/shared").Alignment;

shouldFlip?: boolean;

closeOnSelect?: boolean;

} & Omit<import("react-stately").MenuTriggerProps, "trigger"> & import("react").RefAttributes<HTMLElement>> = ...

export type ActionMenuProps<T> = {

Whether the element should receive focus on render.

autoFocus?: boolean;

Whether the button is disabled.

isDisabled?: boolean;

Handler that is called when an item is selected.

onAction?: import("react-aria").AriaMenuProps<T>["onAction"];

} & import("@react-types/shared").CollectionBase<T> & Omit<MenuTriggerProps, "children"> & Pick<ActionButtonProps, "prominence"> & BaseStyleProps & import("@react-types/shared").DOMProps & import("@react-types/shared").AriaLabelingProps

Referenced by

ActionMenu

export type MenuProps<T> = {

Whether disabledKeys applies to all interactions, or only selection.

disabledBehavior?: import("@react-types/shared").DisabledBehavior;

} & import("react-aria").AriaMenuProps<T> & BaseStyleProps

Referenced by

export type MenuTriggerProps = {

The trigger element and Menu.

children: import("react").ReactElement[];

Alignment of the menu relative to the trigger.

less

@default — 'start'

align?: import("@react-types/shared").Alignment;

Where the Menu opens relative to its trigger.

less

@default — 'bottom'

Whether the menu should automatically flip direction when space is limited.

less

@default — true

shouldFlip?: boolean;

Whether the Menu closes when a selection is made.

less

@default — true

closeOnSelect?: boolean;

} & Omit<import("react-stately").MenuTriggerProps, "trigger">

Referenced by

ActionMenuProps

}

@keystar/ui/next

module "@keystar/ui/next" {

NextRootProvider

export function NextRootProvider(props: NextRootProviderProps): import("react").Element

Unexported symbols referenced here

NextRootProviderProps

type NextRootProviderProps = {

children: import("react").ReactNode;

fontClassName: string;

locale?: string;

}

Referenced by

NextRootProvider

mediaQueryOnlyColorSchemeScaleScript

@deprecated — use nextRootScript instead.

export const mediaQueryOnlyColorSchemeScaleScript: import("react").Element = ...

nextRootScript

export const nextRootScript: import("react").Element = ...

useRootColorScheme

export function useRootColorScheme(): {

colorScheme: ColorScheme;

setColorScheme: (colorScheme: ColorScheme) => void;

}

@keystar/ui/tabs

module "@keystar/ui/tabs" {

export {

} from "react-stately"

TabList

A TabList is used within Tabs to group tabs that a user can switch between. The keys of the items within the must match up with a corresponding item inside the .

export function TabList<T extends object>(props: TabListProps<T>): import("react").Element

TabPanels

TabPanels is used within Tabs as a container for the content of each tab. The keys of the items within the must match up with a corresponding item inside the .

export function TabPanels<T>(props: TabPanelsProps<T>): import("react").Element

Tabs

Tabs organise related content into multiple sections. They allow the user to navigate between groups of information that appear within the same context.

export const Tabs: <T>(props: TabsProps<T> & {

ref?: import("react").RefObject<HTMLDivElement | null>;

}) => import("react").ReactElement = ...

tabsClassList

TabsProps

export type TabsProps<T> = {

The children of the element. Should include <TabList> and <TabPanels> elements.

children: import("react").ReactNode;

The item objects for each tab, for dynamic collections.

items?: Iterable<T>;

When true, all tabs are disabled.

isDisabled?: boolean;

The keys of the tabs that are disabled. These tabs cannot be selected, focused, or otherwise interacted with.

disabledKeys?: Iterable<import("@react-types/shared").Key>;

The prominence of the tab list.

less

@default — 'default'

prominence?: TabProminence;

The orientation of the tabs.

less

@default — 'horizontal'

orientation?: import("@react-types/shared").Orientation;

} & import("@react-types/shared").AriaLabelingProps & Omit<import("@react-types/shared").SingleSelection, "selectedKey" | "defaultSelectedKey"> & {

selectedKey?: import("@react-types/shared").Key;

defaultSelectedKey?: import("@react-types/shared").Key;

} & import("@react-types/shared").DOMProps & BaseStyleProps

Referenced by

Tabs

Unexported symbols referenced here

TabProminence

type TabProminence = "low" | "default"

Referenced by

TabsProps

TabListProps

export type TabListProps<T> = {

The tab items to display. Item keys should match the key of the corresponding <Item> within the <TabPanels> element.

children: import("@react-types/shared").CollectionChildren<T>;

} & import("@react-types/shared").DOMProps & BaseStyleProps

Referenced by

TabList

TabPanelsProps

export type TabPanelsProps<T> = {

The contents of each tab. Item keys should match the key of the corresponding <Item> within the <TabList> element.

children: import("@react-types/shared").CollectionChildren<T>;

} & import("@react-types/shared").DOMProps & BaseStyleProps

Referenced by

TabPanels

}

@keystar/ui/badge

module "@keystar/ui/badge" {

Badge

A badge is a decorative indicator used to either call attention to an item or for communicating non-actionable, supplemental information.

export const Badge: import("react").ForwardRefExoticComponent<BadgeProps & {

ref?: import("react").Ref<HTMLDivElement>;

}> = ...

BadgeProps

export type BadgeProps = {

The content to display within the badge.

children: import("react").ReactNode;

The tone of the badge.

less

@default — 'neutral'

tone?: BadgeTones;

} & BaseStyleProps & import("@react-types/shared").DOMProps & import("@react-types/shared").AriaLabelingProps

Referenced by

Badge

Unexported symbols referenced here

BadgeTones

Referenced by

BadgeProps

}

@keystar/ui/field

module "@keystar/ui/field" {

Field

Provides the accessibility implementation for input fields. Fields accept user input, gain context from their label, and may display a description or error message.

export const Field: (props: InternalFieldProps) => import("react").Element = ...

Unexported symbols referenced here

InternalFieldProps

type InternalFieldProps = {

children: FieldRenderProp;

} & FieldProps

Referenced by

Field

FieldDescription

export const FieldDescription: (props: FieldDescriptionProps) => import("react").Element = ...

Unexported symbols referenced here

FieldDescriptionProps

type FieldDescriptionProps = import("react").PropsWithChildren<import("@react-types/shared").DOMProps>

Referenced by

FieldDescription

FieldLabel

export const FieldLabel: CompWithAsProp<FieldLabelProps, "label"> = ...

Unexported symbols referenced here

FieldLabelProps

type FieldLabelProps = {

isRequired?: boolean;

} & A11yLabelProps & import("react").AllHTMLAttributes<HTMLElement>

Referenced by

FieldLabel

A11yLabelProps

type A11yLabelProps = {

For controls that DO NOT include a semantic element for user input. In these cases the "required" state would not otherwise be announced to users of assistive technology.

supplementRequiredState?: boolean;

}

Referenced by

FieldLabelProps

FieldMessage

export const FieldMessage: (props: FieldMessageProps) => import("react").Element = ...

Unexported symbols referenced here

FieldMessageProps

type FieldMessageProps = import("react").PropsWithChildren<import("@react-types/shared").DOMProps>

Referenced by

FieldMessage

FieldPrimitive

Provides the accessibility implementation for input fields. Fields accept user input, gain context from their label, and may display a description or error message.

export const FieldPrimitive: import("react").ForwardRefExoticComponent<FieldPrimitiveProps & {

ref?: import("react").Ref<HTMLDivElement>;

}> = ...

Unexported symbols referenced here

FieldPrimitiveProps

type FieldPrimitiveProps = {

The field contents.

children: import("react").ReactElement;

A ContextualHelp element to place next to the label.

contextualHelp?: import("react").ReactElement;

Description text provides information to assist the user in completing a field.

description?: import("react").ReactNode;

Props for the description element.

descriptionProps?: import("react").HTMLAttributes<HTMLElement>;

Error messages inform the user when the input does not meet validation criteria.

errorMessage?: import("react").ReactNode;

Props for the message element.

errorMessageProps?: import("react").HTMLAttributes<HTMLElement>;

Whether user input is required on the input before form submission.

isRequired?: boolean;

Concisely label the field.

label?: import("react").ReactNode;

The HTML element used to render the label, e.g. 'label', or 'span'.

less

@default — 'label'

labelElementType?: HTMLTag;

Props for the label element.

labelProps?: import("react").HTMLAttributes<HTMLElement>;

For controls that DO NOT use a semantic element for user input. In these cases the "required" state would not otherwise be announced to users of assistive technology.

supplementRequiredState?: boolean;

Referenced by

FieldPrimitive
FieldProps

validateFieldProps

Add validationState when errorMessage is provided. Used by "@react-aria/*" hooks to determine aria attributes.

export function validateFieldProps<T extends FieldProps>(props: T): T

FieldProps

export type FieldProps = Pick<FieldPrimitiveProps, "contextualHelp" | "description" | "errorMessage" | "isRequired" | "label" | "labelElementType"> & import("@react-types/shared").InputBase & import("@react-types/shared").AriaLabelingProps & BaseStyleProps & import("@react-types/shared").DOMProps

Referenced by

TagGroupProps
validateFieldProps
RadioGroupProps
PickerProps
CheckboxGroupProps
ComboboxProps
ComboboxMultiProps
DateFieldProps
TimeFieldProps
validateTextFieldProps
TextFieldProps
NumberFieldProps
PasswordFieldProps
InternalFieldProps
DatePickerBase

FieldRenderProp

export type FieldRenderProp = (inputProps: FieldRenderInputProps) => import("react").ReactElement

Referenced by

InternalFieldProps

Unexported symbols referenced here

FieldRenderInputProps

type FieldRenderInputProps = import("react-aria").LabelAria["fieldProps"] & {

disabled?: boolean;

readOnly?: boolean;

'aria-required'?: boolean;

'aria-invalid'?: boolean;

}

Referenced by

FieldRenderProp

}

@keystar/ui/image

module "@keystar/ui/image" {

Image

A wrapper around the native image tag with support for common behaviour.

export function Image(props: ImageProps): import("react").Element

Unexported symbols referenced here

ImageProps

type ImageProps = {

Text description of the image.

alt: string;

Overlay content to be displayed on top of the image.

children?: import("react").ReactNode;

The preferred aspect ratio for the box, which will be used in the calculation of auto sizes and some other layout functions. See MDN.

aspectRatio: AspectRatioProps["value"];

The URL of the image.

src: string;

Callback that is called when the image fails to load because of an error.

onError?: import("react").ReactEventHandler<HTMLImageElement>;

Callback that is called when the image loads successfully.

onLoad?: import("react").ReactEventHandler<HTMLImageElement>;

How the image should be resized to fit its container. See MDN.

less

@default — 'cover'

fit?: "contain" | "cover";

How to handle loading of the image. When "lazy", loading is deferred until the image reaches a distance threshold from the viewport. See MDN.

less

@default — 'eager'

loading?: "eager" | "lazy";

} & BoxStyleProps & import("@react-types/shared").DOMProps

Referenced by

Image

}

@keystar/ui/radio

module "@keystar/ui/radio" {

Radio

export function Radio(props: RadioProps): import("react").Element

RadioGroup

Radio groups allow users to select a single option from a list of mutually exclusive options.

export const RadioGroup: import("react").ForwardRefExoticComponent<RadioGroupProps> = ...

RadioProps

export type RadioProps = import("react-aria").AriaRadioProps & BaseStyleProps

Referenced by

Radio

RadioGroupProps

export type RadioGroupProps = import("react-aria").AriaRadioGroupProps & FieldProps & BaseStyleProps & {

The radio buttons contained within the group.

children: import("react").ReactNode;

}

Referenced by

RadioGroup

}

@keystar/ui/slots

module "@keystar/ui/slots" {

useSlotProps

Merge component props with ancestral slot props. With the exception of "id", consumer props are overriden by slot props, while event handlers will be chained so all are called.

export function useSlotProps<P extends {

id?: string;

}>(props: P, defaultSlot: string): P

SlotProvider

Not really "slots" like web components, more like "prop portalling" or something. Default and override the props of descendent components.

less

@example — <SlotProvider slots={{ text: { size: 'small' } }}> {children}

export const SlotProvider: (props: SlotProviderProps) => import("react").Element = ...

ClearSlots

export const ClearSlots: ({ children }: ProviderProps) => import("react").Element = ...

Unexported symbols referenced here

ProviderProps

type ProviderProps = {

children: import("react").ReactNode;

} & P

Referenced by

ClearSlots
SlotProviderProps

Content

A block of content within a container.

export const Content: CompWithAsProp<ContentProps, "section"> = ...

Unexported symbols referenced here

ContentProps

type ContentProps = {

The content element(s).

children: import("react").ReactNode;

} & BaseStyleProps & import("@react-types/shared").DOMProps

Referenced by

Content

A footer within a container.

export const Footer: CompWithAsProp<FooterProps, "footer"> = ...

Unexported symbols referenced here

type FooterProps = {

The footer element(s).

children: import("react").ReactNode;

} & BaseStyleProps & import("@react-types/shared").DOMProps

Referenced by

Footer

A header within a container.

export const Header: CompWithAsProp<HeaderProps, "header"> = ...

Unexported symbols referenced here

type HeaderProps = {

The header element(s).

children: import("react").ReactNode;

} & BaseStyleProps & import("@react-types/shared").DOMProps

Referenced by

Header

SlotContextType

export type SlotContextType = {

divider?: ToSlotProps<DividerProps>;

icon?: ToSlotProps<IconProps>;

heading?: ToSlotProps<HeadingProps>;

text?: ToSlotProps<TextProps>;

[key: string]: any;

}

Referenced by

SlotProviderProps

Unexported symbols referenced here

ToSlotProps

type ToSlotProps = Partial & {

elementType?: HTMLTag;

}

Referenced by

SlotContextType

HTMLTag

type HTMLTag = keyof import("react").IntrinsicElements & keyof HTMLElementTagNameMap

Referenced by

ToSlotProps

SlotProviderProps

export type SlotProviderProps = ProviderProps<{

slots: SlotContextType;

Referenced by

SlotProvider

}

@keystar/ui/style

module "@keystar/ui/style" {

css

export const css: {

(template: TemplateStringsArray, ...args: import("@emotion/serialize").CSSInterpolation[]): string;

(...args: import("@emotion/serialize").CSSInterpolation[]): string;

} = ...

keyframes

export const keyframes: {

(template: TemplateStringsArray, ...args: import("@emotion/serialize").CSSInterpolation[]): string;

(...args: import("@emotion/serialize").CSSInterpolation[]): string;

} = ...

injectGlobal

export const injectGlobal: {

(template: TemplateStringsArray, ...args: import("@emotion/serialize").CSSInterpolation[]): void;

(...args: import("@emotion/serialize").CSSInterpolation[]): void;

} = ...

cache

export const cache: EmotionCache = ...

transition

Helper function for resolving animation tokens.

export function transition(prop: CSSProp | CSSProp[], options?: Options): string

Unexported symbols referenced here

CSSProp

type CSSProp = keyof KebabKeys<import("react").CSSProperties>

Referenced by

transition

Options

type Options = {

The transition delay.

delay?: Duration;

The transition duration.

less

@default — 'short'

duration?: Duration;

The transition easing.

less

@default — 'easeInOut'

easing?: Easing;

}

Referenced by

transition

KebabKeys

type KebabKeys<T> = {

[K in keyof T as K extends string ? Kebab<K> : K]: T[K];

}

Referenced by

CSSProp

Duration

type Duration = AnimationDuration | number

Referenced by

Options

Easing

type Easing = AnimationEasing | "linear"

Referenced by

Options

Kebab

type Kebab<T extends string, A extends string = ""> = T extends `${infer F}${infer R}` ? Kebab<R, `${A}${F extends Lowercase<F> ? "" : "-"}${Lowercase<F>}`> : A

Referenced by

KebabKeys

resetClassName

export const resetClassName: string = ...

classNames

A thin wrapper around Emotion's cx function that includes the reset class name.

export function classNames(...inputs: Parameters<typeof cx>): string

Unexported symbols referenced here

cx

const cx: (...classNames: ClassNamesArg[]) => string = ...

Referenced by

classNames
RootStyleProps

ClassNamesArg

type ClassNamesArg = undefined | null | string | boolean | {

[key: string]: boolean | null | undefined;

} | ArrayClassNamesArg

Referenced by

cx
ArrayClassNamesArg

ArrayClassNamesArg

interface ArrayClassNamesArg extends ClassNamesArg[] {}

Referenced by

ClassNamesArg

ClassList

A ClassList organises component class names with appropriate prefixes, offering strongly-typed methods for declaration in JSX and styles.

export class ClassList<ElementName extends "root" | (string & {})> {

constructor(componentName: string, elements?: readonly ElementName[])

element(name: ElementName | "root"): string;

selector(element: ElementName | "root", combinator?: CssCombinator): string;

}

Referenced by

tabsClassList
actionButtonClassList
buttonClassList
comboboxClassList
headingClassList
textClassList
dropZoneClassList

Unexported symbols referenced here

CssCombinator

type CssCombinator = keyof typeof combinators

Referenced by

ClassList

combinators

const combinators: {

readonly descendant: "& ";

readonly child: "& > ";

readonly sibling: "& ~ ";

readonly 'adjacent-sibling': "& + ";

} = ...

Referenced by

CssCombinator

BreakpointProvider

export function BreakpointProvider(props: import("react").ProviderProps<BreakpointContextValue>): import("react").Element

Unexported symbols referenced here

BreakpointContextValue

type BreakpointContextValue = Breakpoint[]

Referenced by

BreakpointProvider
useBreakpoint
useMatchedBreakpoints

useBreakpoint

export function useBreakpoint(): BreakpointContextValue

useResponsiveValue

The function returned from this hook will resolve values in a mobile-first manner based on the breakpoint the browser viewport currently falls within (mobile, tablet, desktop or wide).

less

@caution — The returned function returns value.mobile when rendering server-side or statically, so you should avoid this hook where possible. Responsive props and media queries are preferable in most cases.

export function useResponsiveValue(): <T>(value: Responsive<T>) => T

useMatchedBreakpoints

export function useMatchedBreakpoints(): BreakpointContextValue

useResponsiveRange

export function useResponsiveRange(): (range: BreakpointRange) => boolean

filterStyleProps

Filters out style props.

less

@param — - The component props to be filtered.

@param — - An array of other style property names that should be omitted.

export function filterStyleProps<Props extends {}>(props: Props, otherPropNames?: string[]): import("react").HTMLAttributes<HTMLElement>

onlyStyleProps

Filters out non-style props.

less

@param — - The component props to be filtered.

export function onlyStyleProps<Props extends {}>(props: Props): BaseStyleProps

FocusRing

A utility component for styling interactions. Applies data-attributes to the child element when it receives different types of focus.

export function FocusRing(props: Omit<import("react-aria").FocusRingProps, "focusClass" | "focusRingClass">): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>

maybeTokenByKey

export function maybeTokenByKey<T = unknown>(path: string, keyOrValue: T): any

resolveProp

export function resolveProp>(prop: P, fn?: StyleResolver): [P, StyleResolver]

resolvePropWithPath

export function resolvePropWithPath>(prop: P, path: string): [P, StyleResolver]

sizeResolver

export function sizeResolver(value: LooseSizeDimension): any

breakpoints

export const breakpoints: Record<Breakpoint, number> = ...

breakpointQueries

export const breakpointQueries: {

above: {

mobile: string;

tablet: string;

desktop: string;

};

below: {

tablet: string;

desktop: string;

wide: string;

};

} = ...

containerQueries

export const containerQueries: {

above: {

mobile: string;

tablet: string;

desktop: string;

};

below: {

tablet: string;

desktop: string;

wide: string;

};

} = ...

tokenSchema

Do not edit directly Generated on Fri, 03 Nov 2023 05:52:12 GMT

export const tokenSchema: {

animation: {

duration: {

short: string;

regular: string;

long: string;

xlong: string;

};

easing: {

easeInOut: string;

easeIn: string;

easeOut: string;

};

size: {

alias: {

focusRing: string;

focusRingGap: string;

singleLineHeight: string;

singleLineWidth: string;

};

element: {

xsmall: string;

small: string;

regular: string;

medium: string;

large: string;

xlarge: string;

};

icon: {

small: string;

regular: string;

medium: string;

large: string;

};

container: {

xsmall: string;

small: string;

medium: string;

large: string;

xlarge: string;

};

dialog: {

xsmall: string;

small: string;

medium: string;

large: string;

};

border: {

regular: string;

medium: string;

large: string;

};

radius: {

full: string;

xsmall: string;

small: string;

regular: string;

medium: string;

large: string;

xlarge: string;

};

shadow: {

small: string;

medium: string;

large: string;

};

space: {

xsmall: string;

small: string;

regular: string;

medium: string;

large: string;

xlarge: string;

xxlarge: string;

};

scale: {

'0': string;

'10': string;

'25': string;

'40': string;

'50': string;

'65': string;

'75': string;

'85': string;

'100': string;

'115': string;

'125': string;

'130': string;

'150': string;

'160': string;

'175': string;

'200': string;

'225': string;

'250': string;

'275': string;

'300': string;

'325': string;

'350': string;

'400': string;

'450': string;

'500': string;

'550': string;

'600': string;

'675': string;

'700': string;

'800': string;

'900': string;

'1000': string;

'1200': string;

'1250': string;

'1600': string;

'1700': string;

'2000': string;

'2400': string;

'3000': string;

'3400': string;

'3600': string;

'4600': string;

'5000': string;

'6000': string;

};

typography: {

fontFamily: {

base: string;

code: string;

};

fontWeight: {

regular: string;

medium: string;

semibold: string;

bold: string;

};

lineheight: {

large: string;

medium: string;

small: string;

};

text: {

small: {

size: string;

lineheight: string;

baselineTrim: string;

capheightTrim: string;

capheight: string;

};

regular: {

size: string;

lineheight: string;

baselineTrim: string;

capheightTrim: string;

capheight: string;

};

medium: {

size: string;

lineheight: string;

baselineTrim: string;

capheightTrim: string;

capheight: string;

};

large: {

size: string;

lineheight: string;

baselineTrim: string;

capheightTrim: string;

capheight: string;

};

heading: {

small: {

size: string;

lineheight: string;

baselineTrim: string;

capheightTrim: string;

capheight: string;

};

regular: {

size: string;

lineheight: string;

baselineTrim: string;

capheightTrim: string;

capheight: string;

};

medium: {

size: string;

lineheight: string;

baselineTrim: string;

capheightTrim: string;

capheight: string;

};

large: {

size: string;

lineheight: string;

baselineTrim: string;

capheightTrim: string;

capheight: string;

};

color: {

alias: {

blanket: string;

backgroundIdle: string;

backgroundDisabled: string;

backgroundHovered: string;

backgroundFocused: string;

backgroundPressed: string;

backgroundSelected: string;

backgroundSelectedHovered: string;

focusRing: string;

borderIdle: string;

borderHovered: string;

borderPressed: string;

borderFocused: string;

borderDisabled: string;

borderSelected: string;

borderInvalid: string;

foregroundIdle: string;

foregroundHovered: string;

foregroundPressed: string;

foregroundFocused: string;

foregroundDisabled: string;

foregroundSelected: string;

};

background: {

canvas: string;

surface: string;

surfaceSecondary: string;

surfaceTertiary: string;

inverse: string;

accent: string;

accentEmphasis: string;

positive: string;

positiveEmphasis: string;

caution: string;

cautionEmphasis: string;

critical: string;

criticalEmphasis: string;

pending: string;

pendingEmphasis: string;

highlight: string;

highlightEmphasis: string;

};

border: {

muted: string;

neutral: string;

emphasis: string;

accent: string;

positive: string;

caution: string;

critical: string;

pending: string;

highlight: string;

};

foreground: {

neutral: string;

neutralEmphasis: string;

neutralSecondary: string;

neutralTertiary: string;

onEmphasis: string;

inverse: string;

inverseSecondary: string;

accent: string;

positive: string;

caution: string;

critical: string;

pending: string;

highlight: string;

};

shadow: {

muted: string;

regular: string;

emphasis: string;

};

scale: {

black: string;

white: string;

amber1: string;

amber2: string;

amber3: string;

amber4: string;

amber5: string;

amber6: string;

amber7: string;

amber8: string;

amber9: string;

amber10: string;

amber11: string;

green1: string;

green2: string;

green3: string;

green4: string;

green5: string;

green6: string;

green7: string;

green8: string;

green9: string;

green10: string;

green11: string;

indigo1: string;

indigo2: string;

indigo3: string;

indigo4: string;

indigo5: string;

indigo6: string;

indigo7: string;

indigo8: string;

indigo9: string;

indigo10: string;

indigo11: string;

pink1: string;

pink2: string;

pink3: string;

pink4: string;

pink5: string;

pink6: string;

pink7: string;

pink8: string;

pink9: string;

pink10: string;

pink11: string;

purple1: string;

purple2: string;

purple3: string;

purple4: string;

purple5: string;

purple6: string;

purple7: string;

purple8: string;

purple9: string;

purple10: string;

purple11: string;

red1: string;

red2: string;

red3: string;

red4: string;

red5: string;

red6: string;

red7: string;

red8: string;

red9: string;

red10: string;

red11: string;

slate1: string;

slate2: string;

slate3: string;

slate4: string;

slate5: string;

slate6: string;

slate7: string;

slate8: string;

slate9: string;

slate10: string;

slate11: string;

};

} = ...

Referenced by

VoussoirTheme

toDataAttributes

Converts an object to a set of data attributes.

export function toDataAttributes<T extends {

[key: string]: string | number | boolean | null | undefined;

}>(data: T, options?: {

Omit props with values of false or "".

omitFalsyValues?: boolean;

Removes the is* prefix from keys.

trimBooleanKeys?: boolean;

}): Record<string, T[keyof T] | undefined>

useIsMobileDevice

export function useIsMobileDevice(): boolean

useMediaQuery

React hook that listens for matches to a given media query.

less

@example — let isBelowTablet = useMediaQuery('(max-width: 768px)');

export function useMediaQuery(_query: string): boolean

useStyleProps

export function useStyleProps<T extends BoxStyleProps>(props: T, customResolvers?: StyleResolverMap): Pick<import("react").HTMLAttributes<HTMLElement>, "className" | "style">

CSSProp

export type CSSProp = keyof import("react").CSSProperties

Referenced by

resolveProp
resolvePropWithPath
StyleTarget

Primitive

export type Primitive = number | string | boolean | null | undefined

Breakpoint

export type Breakpoint = "mobile" | "tablet" | "desktop" | "wide"

Referenced by

breakpoints
ResponsiveProp
BreakpointContextValue
BreakpointAbove
BreakpointBelow

StyleTarget

export type StyleTarget = MaybeArray<CSSProp>

Referenced by

StyleResolverMap

StyleResolver

Referenced by

resolveProp
resolvePropWithPath
StyleResolverMap

StyleResolverMap

export type StyleResolverMap = Record<string, [StyleTarget, StyleResolver]>

Referenced by

useStyleProps

VoussoirTheme

export type VoussoirTheme = typeof tokenSchema

Referenced by

AnimationDuration

export type AnimationDuration = keyof VoussoirTheme["animation"]["duration"]

Referenced by

Duration

AnimationEasing

export type AnimationEasing = keyof VoussoirTheme["animation"]["easing"]

Referenced by

Easing

ColorBackground

export type ColorBackground = keyof VoussoirTheme["color"]["background"] | BackgroundAliases

Referenced by

BoxStyleProps

Unexported symbols referenced here

BackgroundAliases

type BackgroundAliases = KeysStartingWith<ColorAliases, "color.alias.background">

Referenced by

ColorBackground

KeysStartingWith

type KeysStartingWith<Keys, Prefix extends string> = Keys extends `${Prefix}${string}` ? Keys : never

Referenced by

BackgroundAliases
BorderAliases

ColorBorder

export type ColorBorder = keyof VoussoirTheme["color"]["border"] | BorderAliases

Referenced by

BoxStyleProps

Unexported symbols referenced here

BorderAliases

type BorderAliases = KeysStartingWith<ColorAliases, "color.alias.border">

Referenced by

ColorBorder

ColorForeground

export type ColorForeground = keyof VoussoirTheme["color"]["foreground"] | ColorAliases

Referenced by

IconProps
TextProps

Unexported symbols referenced here

ColorAliases

type ColorAliases = `color.alias.${keyof VoussoirTheme["color"]["alias"]}`

Referenced by

ColorForeground
BackgroundAliases
BorderAliases

ColorShadow

export type ColorShadow = keyof VoussoirTheme["color"]["shadow"]

Referenced by

BoxStyleProps

FontFamily

export type FontFamily = keyof VoussoirTheme["typography"]["fontFamily"]

FontWeight

export type FontWeight = keyof VoussoirTheme["typography"]["fontWeight"]

Referenced by

TextProps

FontSizeHeading

export type FontSizeHeading = keyof VoussoirTheme["typography"]["heading"]

Referenced by

HeadingProps
HeadingContextType

FontSizeText

export type FontSizeText = keyof VoussoirTheme["typography"]["text"]

Referenced by

TextProps
ProseProps

SizeBorder

export type SizeBorder = keyof VoussoirTheme["size"]["border"]

Referenced by

BoxStyleProps
DividerProps

SizeElement

export type SizeElement = keyof VoussoirTheme["size"]["element"]

Referenced by

AvatarProps

SizeIcon

export type SizeIcon = keyof VoussoirTheme["size"]["icon"]

Referenced by

IconProps

SizeRadius

export type SizeRadius = keyof VoussoirTheme["size"]["radius"]

Referenced by

BoxStyleProps

SizeShadow

export type SizeShadow = keyof VoussoirTheme["size"]["shadow"]

Referenced by

BoxStyleProps

SizeSpace

export type SizeSpace = keyof VoussoirTheme["size"]["space"]

Referenced by

LooseSizeSpace

DimensionKey

export type DimensionKey = `alias.${keyof Sizes["alias"]}` | `border.${keyof Sizes["border"]}` | `container.${keyof Sizes["container"]}` | `element.${keyof Sizes["element"]}` | `icon.${keyof Sizes["icon"]}` | `scale.${keyof Sizes["scale"]}`

Referenced by

LooseSizeDimension

Unexported symbols referenced here

Sizes

type Sizes = VoussoirTheme["size"]

Referenced by

DimensionKey

Loose

export type Loose<T> = T | number | (string & {})

Referenced by

LooseSizeSpace

LooseSizeDimension

export type LooseSizeDimension = DimensionKey | 0 | "auto" | "inherit" | "100%" | "100vh" | "100vw"

Referenced by

sizeResolver
BaseStyleProps
GridStyleProps
GridDimension

LooseSizeSpace

export type LooseSizeSpace = Loose<SizeSpace>

Referenced by

BaseStyleProps
BoxStyleProps
BoxAlignmentStyleProps

ResponsiveProp

export type ResponsiveProp<T> = Partial<Record<Breakpoint, T>>

Referenced by

Responsive

Responsive

export type Responsive<T> = T | ResponsiveProp<T>

Referenced by

useResponsiveValue
BaseStyleProps
BoxStyleProps
BoxAlignmentStyleProps
FlexStyleProps
GridStyleProps
AspectRatioProps

BreakpointRange

export type BreakpointRange = {

above: BreakpointAbove;

} | {

below: BreakpointBelow;

} | boolean

Referenced by

useResponsiveRange
RootStyleProps
HeadingProps
TextProps

Unexported symbols referenced here

BreakpointAbove

type BreakpointAbove = Exclude<Breakpoint, "wide">

Referenced by

BreakpointRange

BreakpointBelow

type BreakpointBelow = Exclude<Breakpoint, "mobile">

Referenced by

BreakpointRange

RootStyleProps

export type RootStyleProps = {

Responsively hide the element, visually and from assistive tech.

isHidden?: BreakpointRange;

Sets the CSS className for the element. Only use as a last resort, prefer style props instead.

UNSAFE_className?: Parameters<typeof cx>[0];

Sets inline style for the element. Only use as a last resort, prefer style props instead.

UNSAFE_style?: import("react").CSSProperties;

}

Referenced by

KeystarProviderProps
BaseStyleProps

BaseStyleProps

export type BaseStyleProps = RootStyleProps & {

The margin for all four sides of the element. See MDN.

margin?: Responsive<LooseSizeSpace>;

The margin for the logical start side of the element, depending on layout direction. See MDN.

marginStart?: Responsive<LooseSizeSpace>;

The margin for the logical end side of an element, depending on layout direction. See MDN.

marginEnd?: Responsive<LooseSizeSpace>;

The margin for the top side of the element. See MDN.

marginTop?: Responsive<LooseSizeSpace>;

The margin for the bottom side of the element. See MDN.

marginBottom?: Responsive<LooseSizeSpace>;

The margin for both the left and right sides of the element. See MDN.

marginX?: Responsive<LooseSizeSpace>;

The margin for both the top and bottom sides of the element. See MDN.

marginY?: Responsive<LooseSizeSpace>;

The width of the element. See MDN.

width?: Responsive<LooseSizeDimension>;

The height of the element. See MDN.

height?: Responsive<LooseSizeDimension>;

The minimum width of the element. See MDN.

minWidth?: Responsive<LooseSizeDimension>;

The minimum height of the element. See MDN.

minHeight?: Responsive<LooseSizeDimension>;

The maximum width of the element. See MDN.

maxWidth?: Responsive<LooseSizeDimension>;

The maximum height of the element. See MDN.

maxHeight?: Responsive<LooseSizeDimension>;

When used in a flex layout, specifies how the element will grow or shrink to fit the space available. See MDN.

flex?: Responsive<string | number | boolean>;

When used in a flex layout, specifies how the element will grow to fit the space available. See MDN.

flexGrow?: Responsive<number>;

When used in a flex layout, specifies how the element will shrink to fit the space available. See MDN.

flexShrink?: Responsive<number>;

When used in a flex layout, specifies the initial main size of the element. See MDN.

flexBasis?: Responsive<number | string>;

Specifies how the element is justified inside a flex or grid container. See MDN.

justifySelf?: Responsive<Exclude<import("react").CSSProperties["justifySelf"], "left" | "right">>;

Overrides the alignItems property of a flex or grid container. See MDN.

alignSelf?: Responsive<import("react").CSSProperties["alignSelf"]>;

The layout order for the element within a flex or grid container. See MDN.

order?: Responsive<number>;

When used in a grid layout, specifies the named grid area that the element should be placed in within the grid. See MDN.

gridArea?: Responsive<string>;

When used in a grid layout, specifies the column the element should be placed in within the grid. See MDN.

gridColumn?: Responsive<string>;

When used in a grid layout, specifies the row the element should be placed in within the grid. See MDN.

gridRow?: Responsive<string>;

When used in a grid layout, specifies the starting column to span within the grid. See MDN.

gridColumnStart?: Responsive<string>;

When used in a grid layout, specifies the ending column to span within the grid. See MDN.

gridColumnEnd?: Responsive<string>;

When used in a grid layout, specifies the starting row to span within the grid. See MDN.

gridRowStart?: Responsive<string>;

When used in a grid layout, specifies the ending row to span within the grid. See MDN.

gridRowEnd?: Responsive<string>;

Specifies how the element is positioned. See MDN.

position?: Responsive<import("react").CSSProperties["position"]>;

Shorthand that corresponds to the top, right, bottom, and/or left properties. See MDN.

inset?: Responsive<LooseSizeSpace>;

The top position for the element. See MDN.

insetTop?: Responsive<LooseSizeSpace>;

The bottom position for the element. See MDN.

insetBottom?: Responsive<LooseSizeSpace>;

The logical start position for the element, depending on layout direction. See MDN.

insetStart?: Responsive<LooseSizeSpace>;

The logical end position for the element, depending on layout direction. See MDN.

insetEnd?: Responsive<LooseSizeSpace>;

The inset for both left and right. See MDN.

insetX?: Responsive<LooseSizeSpace>;

The inset for both top and bottom. See MDN.

insetY?: Responsive<LooseSizeSpace>;

The stacking order for the element. See MDN.

zIndex?: Responsive<number>;

}

Referenced by

TagGroupProps
ActionMenuProps
MenuProps
TabsProps
TabListProps
TabPanelsProps
BadgeProps
FieldProps
RadioProps
RadioGroupProps
onlyStyleProps
BoxStyleProps
DividerProps
IconProps
HeadingProps
TextProps
AvatarProps
AlertDialogProps
DialogProps
EditorPopover
EditorPopoverProps
AspectRatioProps
ScrollViewProps
NoticeProps
PickerProps
SwitchProps
ListBoxProps
TooltipProps
CalendarProps
RangeCalendarProps
CheckboxProps
CheckboxGroupProps
ComboboxProps
NavListProps
NavTreeProps
BlanketProps
ModalProps
PopoverProps
TrayProps
ProgressCircleProps
ListViewProps
ActionBarContainerProps
ActionBarProps
SplitViewProps
EmojiProps
KbdProps
BreadcrumbsProps
ActionGroupProps
StatusLightProps
DropZoneProps
ContextualHelpProps
FieldPrimitiveProps
ContentProps
FooterProps
HeaderProps
TableProps
ButtonGroupProps
EditorListboxProps
EditorToolbarProps
ListBoxBaseProps
CommonBarProps
SplitPanePrimaryProps
SplitPaneSecondaryProps
ProseProps
CommonActionButtonProps
CommonButtonProps

BoxStyleProps

export type BoxStyleProps = {

The background color for the element. See MDN.

backgroundColor?: ColorBackground;

Shorthand for the element's border on all four sides. It sets the values of border-width, border-style, and border-color. See MDN.

border?: Responsive<ColorBorder>;

Shorthand for the border on the logical start side, depending on the layout direction. It sets the values of border-width, border-style, and border-color. See MDN.

borderStart?: Responsive<ColorBorder>;

Shorthand for the border on the logical end side, depending on the layout direction. It sets the values of border-width, border-style, and border-color. See MDN.

borderEnd?: Responsive<ColorBorder>;

Shorthand for the top border. It sets the values of border-width, border-style, and border-color. See MDN.

borderTop?: Responsive<ColorBorder>;

Shorthand for the bottom border. It sets the values of border-width, border-style, and border-color. See MDN.

borderBottom?: Responsive<ColorBorder>;

The color of the element's border on all four sides. See MDN.

borderColor?: Responsive<ColorBorder>;

The color of the border on the logical start side, depending on the layout direction. See MDN.

borderStartColor?: Responsive<ColorBorder>;

The color of the border on the logical end side, depending on the layout direction. See MDN.

borderEndColor?: Responsive<ColorBorder>;

The color of the top border. See MDN.

borderTopColor?: Responsive<ColorBorder>;

The color of the bottom border. See MDN.

borderBottomColor?: Responsive<ColorBorder>;

The style of the element's border on all four sides. See MDN.

borderStyle?: Responsive<BorderStyle>;

The style of the border on the logical start side, depending on the layout direction. See MDN.

borderStartStyle?: Responsive<BorderStyle>;

The style of the border on the logical end side, depending on the layout direction. See MDN.

borderEndStyle?: Responsive<BorderStyle>;

The style of the top border. See MDN.

borderTopStyle?: Responsive<BorderStyle>;

The style of the bottom border. See MDN.

borderBottomStyle?: Responsive<BorderStyle>;

The width of the element's border on all four sides. See MDN.

borderWidth?: Responsive<SizeBorder>;

The width of the border on the logical start side, depending on the layout direction. See MDN.

borderStartWidth?: Responsive<SizeBorder>;

The width of the border on the logical end side, depending on the layout direction. See MDN.

borderEndWidth?: Responsive<SizeBorder>;

The width of the top border. See MDN.

borderTopWidth?: Responsive<SizeBorder>;

The width of the bottom border. See MDN.

borderBottomWidth?: Responsive<SizeBorder>;

The border radius on all four sides of the element. See MDN.

borderRadius?: Responsive<SizeRadius>;

The border radius for the top start corner of the element, depending on the layout direction. See MDN.

borderTopStartRadius?: Responsive<SizeRadius>;

The border radius for the top end corner of the element, depending on the layout direction. See MDN.

borderTopEndRadius?: Responsive<SizeRadius>;

The border radius for the bottom start corner of the element, depending on the layout direction. See MDN.

borderBottomStartRadius?: Responsive<SizeRadius>;

The border radius for the bottom end corner of the element, depending on the layout direction. See MDN.

borderBottomEndRadius?: Responsive<SizeRadius>;

Adds shadow effects around an element's frame. See MDN.

boxShadow?: Responsive<SizeShadow | `${SizeShadow} ${ColorShadow}`>;

The padding for all four sides of the element. See MDN.

padding?: Responsive<LooseSizeSpace>;

The padding for the logical start side of the element, depending on layout direction. See MDN.

paddingStart?: Responsive<LooseSizeSpace>;

The padding for the logical end side of an element, depending on layout direction. See MDN.

paddingEnd?: Responsive<LooseSizeSpace>;

The padding for the top side of the element. See MDN.

paddingTop?: Responsive<LooseSizeSpace>;

The padding for the bottom side of the element. See MDN.

paddingBottom?: Responsive<LooseSizeSpace>;

The padding for both the left and right sides of the element. See MDN.

paddingX?: Responsive<LooseSizeSpace>;

The padding for both the top and bottom sides of the element. See MDN.

paddingY?: Responsive<LooseSizeSpace>;

The type of mouse cursor, if any, to show when the mouse pointer is over an element. See MDN

cursor?: Responsive<import("react").CSSProperties["cursor"]>;

The opacity of an element. Opacity is the degree to which content behind an element is hidden, and is the opposite of transparency. See MDN

opacity?: Responsive<number>;

Specify what to do when the element's content is too long to fit its size. See MDN.

overflow?: Responsive<OverflowValue | `${OverflowValue} ${OverflowValue}`>;

Sets under what circumstances (if any) a particular element can become the target of pointer events. See MDN.

pointerEvents?: Responsive<import("react").CSSProperties["pointerEvents"]>;

Controls whether the user can select text. This doesn't have any effect on content loaded as part of a browser's user interface (its chrome), except in textboxes. See MDN.

userSelect?: Responsive<import("react").CSSProperties["userSelect"]>;

Referenced by

useStyleProps
FlexStyleProps
GridStyleProps
BoxProps
ScrollViewProps
SurfaceProps
ImageProps

Unexported symbols referenced here

BorderStyle

type BorderStyle = "none" | "dashed" | "dotted" | "solid"

Referenced by

BoxStyleProps

OverflowValue

type OverflowValue = "visible" | "hidden" | "scroll" | "clip" | "auto"

Referenced by

BoxStyleProps

BoxAlignmentStyleProps

export type BoxAlignmentStyleProps = {

The distribution of space around items along the main axis. See MDN.

less

@default — 'stretch'

justifyContent?: Responsive<Exclude<import("react").CSSProperties["justifyContent"], "left" | "right">>;

The distribution of space around child items along the cross axis. See MDN.

less

@default — 'start'

alignContent?: Responsive<import("react").CSSProperties["alignContent"]>;

The alignment of children within their container. See MDN.

less

@default — 'stretch'

alignItems?: Responsive<import("react").CSSProperties["alignItems"]>;

The space to display between both rows and columns. See MDN.

gap?: Responsive<LooseSizeSpace>;

The space to display between columns. See MDN.

columnGap?: Responsive<LooseSizeSpace>;

The space to display between rows. See MDN.

rowGap?: Responsive<LooseSizeSpace>;

}

Referenced by

FlexStyleProps
GridStyleProps
ScrollViewProps

FlexStyleProps

export type FlexStyleProps = {

The direction in which to layout children. See MDN.

less

@default — 'row'

direction?: Responsive<"row" | "column" | "row-reverse" | "column-reverse">;

Whether to display the element as "inline". See MDN.

less

@default — false

inline?: Responsive<boolean>;

Whether to wrap items onto multiple lines. See MDN.

less

@default — false

wrap?: Responsive<boolean | "wrap" | "nowrap" | "wrap-reverse">;

} & BoxAlignmentStyleProps & Omit<BoxStyleProps, "display">

Referenced by

useFlexStyleProps
FlexProps
StackProps

GridStyleProps

export type GridStyleProps = {

Defines named grid areas. See MDN.

areas?: Responsive<string[]>;

Defines the sizes of each row in the grid. See MDN.

rows?: Responsive<string | LooseSizeDimension[]>;

Defines the sizes of each column in the grid. See MDN.

columns?: Responsive<string | LooseSizeDimension[]>;

Defines the size of implicitly generated columns. See MDN.

autoColumns?: Responsive<string | LooseSizeDimension>;

Defines the size of implicitly generated rows. See MDN.

autoRows?: Responsive<string | LooseSizeDimension>;

Controls how auto-placed items are flowed into the grid. See MDN.

autoFlow?: Responsive<"row" | "column" | "row dense" | "column dense">;

Whether to display the element as "inline". See MDN.

less

@default — false

inline?: Responsive<boolean>;

Defines the default justifySelf for all items in the grid. See MDN.

justifyItems?: Responsive<Exclude<import("react").CSSProperties["justifyItems"], "left" | "right">>;

} & BoxAlignmentStyleProps & Omit<BoxStyleProps, "display">

Referenced by

useGridStyleProps
GridProps

}

@keystar/ui/table

module "@keystar/ui/table" {

TableView

export function TableView<T extends object>(props: TableProps<T>): import("react").Element

Unexported symbols referenced here

TableProps

type TableProps<T> = {

Handler that is called when a user performs an action on a row.

onAction?: (key: string | number) => void;

@deprecated — Use onAction instead.

onRowAction?: (key: string | number) => void;

What should render when there is no content to display.

renderEmptyState?: () => import("react").Element;

Handler that is called when a user starts a column resize.

onResizeStart?: (widths: Map<import("react").Key, import("react-stately").ColumnSize>) => void;

Handler that is called when a user performs a column resize. Can be used with the width property on columns to put the column widths into a controlled state.

onResize?: (widths: Map<import("react").Key, import("react-stately").ColumnSize>) => void;

Handler that is called after a user performs a column resize. Can be used to store the widths of columns for another future session.

onResizeEnd?: (widths: Map<import("react").Key, import("react-stately").ColumnSize>) => void;

The drag and drop hooks returned by useDragAndDrop used to enable drag and drop behavior for the TableView.

less

@version — beta

dragAndDropHooks?: DragAndDropHooks["dragAndDropHooks"];

} & import("@react-types/shared").AriaLabelingProps & import("@react-types/shared").DOMProps & TableCosmeticConfig & import("react-stately").TableProps<T> & BaseStyleProps & import("@react-types/shared").DOMProps

Referenced by

TableView

TableCosmeticConfig

type TableCosmeticConfig = {

Sets the amount of vertical padding within each cell.

less

@default — 'regular'

density?: "compact" | "regular" | "spacious";

Sets the overflow behavior for the cell contents.

less

@default — 'truncate'

overflowMode?: "wrap" | "truncate";

The visual prominence of the table.

less

@default — 'default'

prominence?: "default" | "low";

}

Referenced by

TableProps

Column

export const Column: <T>(props: ColumnProps<T>) => import("react").Element = ...

Unexported symbols referenced here

ColumnProps

interface ColumnProps<T> {

Static child columns or content to render as the column header.

children: import("react").ReactNode | ColumnElement<T> | ColumnElement<T>[];

The width of the column.

width?: number | string;

The minimum width of the column.

minWidth?: number | string;

The maximum width of the column.

maxWidth?: number | string;

The default width of the column.

less

@private —

defaultWidth?: number | string;

Whether the column allows resizing.

less

@private —

allowsResizing?: boolean;

Whether the column allows sorting.

allowsSorting?: boolean;

Whether a column is a row header and should be announced by assistive technology during row navigation.

isRowHeader?: boolean;

A string representation of the column's contents, used for accessibility announcements.

textValue?: string;

The alignment of the column's contents relative to its allotted width.

less

@default — 'start'

align?: "start" | "center" | "end";

Whether the column should render a divider between it and the next column.

showDivider?: boolean;

Whether the column should hide its header text. A tooltip with the column's header text will be displayed when the column header is focused instead. Note that this prop is specifically for columns that contain ActionButtons in place of text content.

hideHeader?: boolean;

}

Referenced by

Column
ColumnElement

ColumnElement

type ColumnElement<T> = import("react").ReactElement<ColumnProps<T>>

Referenced by

ColumnProps

export {

Cell,

Row,

TableBody,

TableHeader,

} from "react-stately"

export {

SortDescriptor,

SortDirection,

} from "@react-types/shared"

}

@keystar/ui/toast

module "@keystar/ui/toast" {

Toaster

A Toaster renders the queued toasts in an application. It should be placed at the root of the app.

export function Toaster(props: ToasterProps): import("react").Element | null

toastQueue

export const toastQueue: {

Queues a neutral toast.

neutral(children: import("react").ReactNode, options?: ToastOptions): CloseFunction;

Queues a positive toast.

positive(children: import("react").ReactNode, options?: ToastOptions): CloseFunction;

Queues a critical toast.

critical(children: import("react").ReactNode, options?: ToastOptions): CloseFunction;

Queues an informational toast.

info(children: import("react").ReactNode, options?: ToastOptions): CloseFunction;

} = ...

Unexported symbols referenced here

CloseFunction

type CloseFunction = () => void

Referenced by

toastQueue

ToastOptions

export type ToastOptions = Omit<import("react-stately").ToastOptions, "priority"> & {

A label for the action button within the toast.

actionLabel?: import("react").ReactNode;

Handler that is called when the action button is pressed.

onAction?: () => void;

Whether the toast should automatically close when an action is performed.

shouldCloseOnAction?: boolean;

}

Referenced by

toastQueue

ToasterProps

export type ToasterProps = import("react-aria").AriaToastRegionProps & {

The placement of the toast container.

less

@default — 'end'

placement?: "start" | "end" | "center";

The position of the toast container.

less

@default — 'bottom'

position?: "top" | "bottom";

}

Referenced by

Toaster

}

@keystar/ui/types

module "@keystar/ui/types" {

AnchorDOMProps

export interface AnchorDOMProps {

Causes the browser to treat the linked URL as a download. See MDN

download?: boolean | string;

The URL that the hyperlink points to. See MDN.

href: string;

Hints at the human language of the linked URL. See MDN.

hrefLang?: string;

A space-separated list of URLs. See MDN.

ping?: string;

How much of the referrer to send when following the link. See MDN.

referrerPolicy?: import("react").HTMLAttributeReferrerPolicy;

The relationship of the linked URL as space-separated link types. See MDN

rel?: string;

The browsing context (a tab, window, or ) in which to open the linked URL. See MDN.

target?: import("react").HTMLAttributeAnchorTarget;

}

Referenced by

TextLinkAnchorProps
ActionLinkElementProps
LinkElementProps

DividerProps

export type DividerProps = {

The axis the Divider should align with.

less

@default — 'horizontal'

orientation?: import("@react-types/shared").Orientation;

How thick the Divider should be.

less

@default — 'regular'

size?: SizeBorder;

A slot to place the divider in.

less

@default — 'divider'

slot?: string;

} & import("@react-types/shared").AriaLabelingProps & import("@react-types/shared").DOMProps & BaseStyleProps

Referenced by

SlotContextType
Divider

Emphasis

export type Emphasis = "low" | "high"

Referenced by

VoussoirContextProps

ColorScheme

export type ColorScheme = "auto" | "light" | "dark"

Referenced by

documentElementClasses
KeystarProviderProps
useRootColorScheme
KeystarProviderContext

ScaleScheme

export type ScaleScheme = "medium" | "large"

Referenced by

KeystarProviderProps
KeystarProviderContext

IconProps

export type IconProps = {

src: import("react").ReactElement;

The color of the icon.

less

@default — 'inherit'

color?: "inherit" | ColorForeground;

The size of the icon.

size?: SizeIcon;

Whether the stroke should scale with the size of the icon.

less

@default — true

strokeScaling?: boolean;

A slot to place the icon in.

less

@default — 'icon'

slot?: string;

} & BaseStyleProps & import("@react-types/shared").DOMProps

Referenced by

Icon
SlotContextType

HeadingProps

export type HeadingProps = {

The horizontal alignment of content inside the heading element.

less

@default — 'start'

align?: "start" | "center" | "end";

The content of the heading element.

children: import("react").ReactNode;

The size of the heading.

less

Also used to derive the underlying HTML element, unless an explicit elementType is provided.

size?: FontSizeHeading;

A slot to place the heading in.

less

@default — 'heading'

slot?: string;

Limit the contents of the element to the specified number of lines, or provide a shorthand boolean to conveniently express a single line.

truncate?: number | boolean;

Hides children visually, while keeping content visible to screen readers.

visuallyHidden?: BreakpointRange;

} & BaseStyleProps & import("@react-types/shared").DOMProps

Referenced by

SlotContextType
Heading

TextProps

export type TextProps = {

The horizontal alignment of content inside the text element. Does NOT apply to nested text.

less

Use logical properties "start" and "end" in most cases, since they respond to locale direction. Only use special values "FORCE_left" and "FORCE_right" in rare cases where locale direction should be ignored, such as numeric text within a tabular container.

@default — 'start'

align?: "start" | "center" | "end" | "FORCE_left" | "FORCE_right";

How to capitalize the element's contents.

less

@default — 'none'

casing?: "capitalize" | "lowercase" | "none" | "uppercase" | "full-width";

The content of the text element.

children?: import("react").ReactNode;

The color of the text.

less

@default — 'neutral'

color?: "inherit" | ColorForeground;

How to handle white space and line breaks when the text would otherwise overflow its content box.

less

@default — 'breakword'

overflow?: "breakword" | "nowrap" | "unset";

The size of the text.

less

@default — 'regular'

size?: FontSizeText;

A slot to place the text in.

less

@default — 'text'

slot?: string;

The title attribute contains text representing advisory information related to the element it belongs to. See MDN.

title?: string;

Trim the space above capital letters and below the baseline. Does NOT apply to nested text.

less

@default — true

trim?: boolean;

Limit the contents of the element to the specified number of lines, or provide a shorthand boolean to conveniently express a single line.

truncate?: number | boolean;

Control the usage of alternate glyphs for numbers, fractions, and ordinal markers. See MDN font-variant-numeric for more information.

less

@default — 'normal'

variant?: "normal" | "diagonal-fractions" | "ordinal" | "slashed-zero" | "tabular-nums";

Hides children visually, while keeping content visible to screen readers.

visuallyHidden?: BreakpointRange;

The weight of the text.

less

@default — 'regular'

weight?: "inherit" | FontWeight;

} & BaseStyleProps & import("@react-types/shared").DOMProps

Referenced by

SlotContextType
Text
useTextStyles
TextContextType
BreadcrumbSize

ChildrenOf

Support conditional children, where React.ReactNode is too loose.

export type ChildrenOf<Child> = Child | Conditional<Child>[]

Conditional

Allow "falsy" values + some type. Used for React children.

export type Conditional<T> = T | false | null | undefined

Referenced by

ChildrenOf
TextFieldProps
TextFieldPrimitiveProps

MaybeArray

Define a type that may be a single value, or an array of that value.

export type MaybeArray<T> = T | T[]

Referenced by

resolveProp
resolvePropWithPath
StyleTarget
isReactText

Never

Make all properties in T never.

export type Never<T> = {

[P in keyof T]?: never;

}

PickRequired

From T, pick a set of properties whose keys are required. All other properties remain untouched.

export type PickRequired<T, K extends keyof T> = Omit<T, K> & Required<Pick<T, K>>

Referenced by

useTextStyles

ReactText

The types that may be considered valid "text", and can be safely rendered as children of a React component or element.

export type ReactText = string | number

Referenced by

isReactText

RenderProp

A function that renders a ReactNode, based on some props.

export type RenderProp = (props: P) => import("react").ReactNode

Referenced by

WithRenderProps

WithRenderProps

Support traditional children, or a render function.

export type WithRenderProps<T> = {

The children of the component. A function may be provided to alter the children based on component state.

children?: import("react").ReactNode | RenderProp<T>;

}

Referenced by

useRenderProps
DropZoneProps

}

@keystar/ui/utils

module "@keystar/ui/utils" {

cloneValidElement

Clone a React element, with optional props. If the value is not a valid React element, return null.

export function cloneValidElement<Props>(child: import("react").ReactElement<Props> | import("react").ReactNode, props?: Partial<Props> & import("react").Attributes): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | null

useHasChild

export function useHasChild(query: string, ref: import("react").RefObject<HTMLElement | null>): boolean

composeId

Format IDs for compound components.

less

@example — const root = useId() const inputId = composeId(root, 'input') // => ':R1:--input' const descriptionId = composeId(root, 'field-element' 'description') // => ':R1:--field-element--description'

export function composeId(...args: (string | number | null | undefined)[]): string

isReactText

Checks if an unknown value is valid React text (string | number)?[]. This is useful for conditionally wrapping some value when an element is required.

export function isReactText(value: unknown): value is MaybeArray<ReactText>

useId

A thin wrapper around React.useId() that supports a consumer provided ID.

export function useId(id?: string): string

useIsMounted

Returns a function that returns true if the component is mounted, and false otherwise.

export function useIsMounted(): () => boolean

usePrevious

Tracks the previous value of a variable.

less

This is useful for comparing the previous value of some prop or state to the current value, and taking action based on the change.

export function usePrevious<T>(value: T): T | undefined

useRenderProps

Render the children of a component, either as a function or a ReactNode.

less

@param — The props of the component.

@param — A memoized object, which is passed as the argument to your props.children render fn.

export function useRenderProps<T extends Record<string, any>>(props: WithRenderProps<T>, values: T): import("react").ReactNode

}

@keystar/ui/avatar

module "@keystar/ui/avatar" {

Avatar

An avatar is a thumbnail representation of an entity, such as a user or an organization.

export const Avatar: import("react").ForwardRefExoticComponent<AvatarProps & {

ref?: import("react").Ref<HTMLDivElement>;

}> = ...

AvatarProps

export type AvatarProps = {

Text description of the avatar. When no alt is provided the avatar is treated as a decorative element.

alt?: string;

The size of the avatar.

less

@default — 'regular'

size?: SizeElement;

} & ({

The name used for the initials.

name: string;

} | {

The src attribute of the image.

src: string;

}) & Omit<BaseStyleProps, "height" | "width"> & import("@react-types/shared").DOMProps & import("@react-types/shared").AriaLabelingProps

Referenced by

Avatar

}

@keystar/ui/button

module "@keystar/ui/button" {

ButtonGroup

Handles overflow for a grouping of buttons whose actions are related to each other.

export const ButtonGroup: import("react").ForwardRefExoticComponent<ButtonGroupProps & {

ref?: import("react").Ref<HTMLDivElement>;

}> = ...

Unexported symbols referenced here

ButtonGroupProps

type ButtonGroupProps = {

The alignment of the buttons within the button group.

less

@default — 'start'

align?: "start" | "end" | "center";

The buttons contained within the button group.

children: import("react").ReactNode;

Whether the buttons in the button group are all disabled.

isDisabled?: boolean;

The axis the button group should align with. Setting this will prevent switching behavior.

less

@default — 'horizontal'

orientation?: import("@react-types/shared").Orientation;

} & import("@react-types/shared").DOMProps & BaseStyleProps

Referenced by

ButtonGroup

Button

Buttons are pressable elements that are used to trigger actions, their label should express what action will occur when the user interacts with it.

export const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLAnchorElement | HTMLButtonElement>> = ...

ActionButton

Action buttons allow users to perform an action. They’re used for similar, task-based options within a workflow, and are ideal for interfaces where buttons aren’t meant to draw a lot of attention.

export const ActionButton: import("react").ForwardRefExoticComponent<ActionButtonProps & import("react").RefAttributes<HTMLAnchorElement | HTMLButtonElement>> = ...

ClearButton

A clear button is a button that is typically found on search fields and is used to clear the current search query. This can be useful if the user has entered a search query by mistake, or if they want to start over with a new search.

export const ClearButton: import("react").ForwardRefExoticComponent<Omit<ButtonProps, "children" | "prominence" | "tone"> & {

excludeFromTabOrder?: boolean;

preventFocus?: boolean;

static?: "dark" | "light";

} & {

elementType?: import("react").ElementType;

} & import("react").RefAttributes<HTMLButtonElement>> = ...

FieldButton

@private — Internal component for composing complex field interactions.

export const FieldButton: import("react").ForwardRefExoticComponent<FieldButtonProps & {

ref?: import("react").Ref<HTMLButtonElement>;

}> = ...

useFieldButton

export function useFieldButton(props: FieldButtonProps, state: FieldButtonState): {

children: import("react").Element;

styleProps: {

style: import("react").CSSProperties | undefined;

className: string;

};

}

Unexported symbols referenced here

FieldButtonState

type FieldButtonState = {

isHovered: boolean;

isPressed: boolean;

}

Referenced by

useFieldButton

ToggleButton

Toggle buttons allow users to toggle a selection on or off, for example switching between two states or modes.

export const ToggleButton: import("react").ForwardRefExoticComponent<ToggleButtonProps & {

ref?: import("react").Ref<HTMLButtonElement>;

}> = ...

actionButtonClassList

export const actionButtonClassList: ClassList<"text" | "icon"> = ...

buttonClassList

export const buttonClassList: ClassList<"text" | "icon"> = ...

ActionButtonProps

export type ActionButtonProps = ActionButtonElementProps | ActionLinkElementProps

Referenced by

ActionMenuProps
ActionButton
FieldButtonProps
ToggleButtonProps
PickerProps

Unexported symbols referenced here

ActionButtonElementProps

type ActionButtonElementProps = {

Whether the button is selected.

isSelected?: boolean;

} & CommonActionButtonProps & AriaProps

Referenced by

ActionButtonProps

ActionLinkElementProps

type ActionLinkElementProps = CommonActionButtonProps & AnchorDOMProps

Referenced by

ActionButtonProps

CommonActionButtonProps

type CommonActionButtonProps = {

The content to display in the button.

children?: import("react").ReactNode;

Whether the button is disabled.

isDisabled?: boolean;

The static style to apply. Useful when the button appears over a background.

static?: "light" | "dark";

The visual prominence of the button.

less

@default — 'default'

prominence?: "default" | "low";

} & import("@react-types/shared").PressEvents & import("@react-types/shared").FocusableProps & import("@react-types/shared").FocusableDOMProps & import("@react-types/shared").AriaLabelingProps & BaseStyleProps

Referenced by

ActionButtonElementProps
ActionLinkElementProps

AriaProps

type AriaProps = {

Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.

'aria-expanded'?: boolean | "true" | "false";

Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.

Identifies the element (or elements) whose contents or presence are controlled by the current element.

'aria-controls'?: string;

Indicates the current "pressed" state of toggle buttons.

'aria-pressed'?: boolean | "true" | "false" | "mixed";

The behavior of the button when used in an HTML form.

less

@default — 'button'

type?: "button" | "submit" | "reset";

Identifies the form element that should be used when type="submit"

form?: string;

}

Referenced by

ActionButtonElementProps
ButtonElementProps

ButtonProps

export type ButtonProps = ButtonElementProps | LinkElementProps

Referenced by

Button
ClearButton

Unexported symbols referenced here

ButtonElementProps

type ButtonElementProps = CommonButtonProps & AriaProps & {

Disable events and display a progress indicator.

isPending?: boolean;

}

Referenced by

ButtonProps

LinkElementProps

type LinkElementProps = CommonButtonProps & AnchorDOMProps

Referenced by

ButtonProps

CommonButtonProps

type CommonButtonProps = {

The content to display in the button.

children?: import("react").ReactNode;

Whether the button is disabled.

isDisabled?: boolean;

The static style to apply. Useful when the button appears over a background. Ignores tone.

static?: "light" | "dark";

The visual prominence of the button.

less

@default — 'default'

prominence?: ButtonProminence;

The tone of the button.

less

@default — 'neutral'

tone?: ButtonTone;

Referenced by

ButtonElementProps
LinkElementProps

ButtonProminence

type ButtonProminence = "default" | "high" | "low"

Referenced by

CommonButtonProps

ButtonTone

type ButtonTone = "neutral" | "accent" | "critical"

Referenced by

CommonButtonProps

FieldButtonProps

export type FieldButtonProps = ActionButtonProps & {

isActive?: boolean;

@deprecated — use isInvalid instead

validationState?: import("@react-types/shared").ValidationState;

isInvalid?: boolean;

}

Referenced by

FieldButton
useFieldButton

ToggleButtonProps

export type ToggleButtonProps = {

Whether the element should be selected (controlled).

isSelected?: boolean;

Whether the element should be selected (uncontrolled).

defaultSelected?: boolean;

Handler that is called when the element's selection state changes.

onChange?: (isSelected: boolean) => void;

} & ActionButtonProps

Referenced by

ToggleButton
EditorToolbarButtonProps

}

@keystar/ui/dialog

module "@keystar/ui/dialog" {

AlertDialog

AlertDialogs are a specific type of Dialog. They display important information that users need to acknowledge.

export const AlertDialog: import("react").ForwardRefExoticComponent<AlertDialogProps & {

ref?: import("react").Ref<HTMLDivElement>;

}> = ...

Dialog

Dialogs are windows containing contextual information, tasks, or workflows that appear over the user interface. Depending on the kind of dialog, further interactions may be blocked until the dialog is closed.

export const Dialog: import("react").ForwardRefExoticComponent<DialogProps & {

ref?: import("react").Ref<HTMLDivElement>;

}> = ...

DialogContainer

A DialogContainer accepts a single Dialog as a child, and manages showing and hiding it in a modal. Useful in cases where there is no trigger element or when the trigger unmounts while the dialog is open.

export function DialogContainer(props: DialogContainerProps): import("react").Element

useDialogContainer

A dialog may be abstracted from its trigger; this hook provides access to context.

export function useDialogContainer(): DialogContainerValue

Unexported symbols referenced here

DialogContainerValue

interface DialogContainerValue {

type: "modal" | "popover" | "tray" | "fullscreen";

dismiss(): void;

}

Referenced by

useDialogContainer

DialogTrigger

DialogTrigger serves as a wrapper around a Dialog and its associated trigger, linking the Dialog's open state with the trigger's press state. Additionally, it allows you to customize the type and positioning of the Dialog.

export let DialogTrigger: (props: DialogTriggerProps) => import("react").Element = ...

AlertDialogProps

export type AlertDialogProps = {

The tone of the dialog.

less

@default — 'neutral'

tone?: "neutral" | "critical";

The title of the dialog.

title: string;

The contents of the dialog.

children: import("react").ReactNode;

The label to display within the cancel button.

cancelLabel?: string;

The label to display within the confirm button.

primaryActionLabel: string;

The label to display within the secondary button.

secondaryActionLabel?: string;

Whether the primary button is disabled.

isPrimaryActionDisabled?: boolean;

Whether the secondary button is disabled.

isSecondaryActionDisabled?: boolean;

Handler that is called when the cancel button is pressed.

onCancel?: () => void;

Handler that is called when the primary button is pressed.

onPrimaryAction?: () => void;

Handler that is called when the secondary button is pressed.

onSecondaryAction?: () => void;

Button to focus by default when the dialog opens.

autoFocusButton?: "cancel" | "primary" | "secondary";

} & import("@react-types/shared").DOMProps & BaseStyleProps

Referenced by

AlertDialog

DialogProps

export type DialogProps = {

The contents of the Dialog.

children: import("react").ReactNode;

The size of the Dialog. Only applies to "modal" type Dialogs.

size?: DialogSize;

Whether the Dialog is dismissable. See the examples for more details.

isDismissable?: boolean;

Handler that is called when the 'x' button of a dismissable Dialog is clicked.

onDismiss?: () => void;

} & AriaDialogProps & BaseStyleProps

Referenced by

Dialog

Unexported symbols referenced here

DialogSize

type DialogSize = "small" | "medium" | "large"

Referenced by

DialogProps

AriaDialogProps

type AriaDialogProps = {

The accessibility role for the dialog.

less

@default — 'dialog'

role?: "dialog" | "alertdialog";

} & import("@react-types/shared").DOMProps & import("@react-types/shared").AriaLabelingProps

Referenced by

DialogProps

DialogContainerProps

export interface DialogContainerProps {

The dialog to display, if any.

children: Exclude<import("react").ReactNode, Iterable<import("react").ReactNode>> | string;

Handler that is called when the [×] button of a dismissable dialog is clicked.

onDismiss: () => void;

The type of dialog that should be rendered.

less

@default — 'modal'

type?: "modal" | "fullscreen";

Whether the dialog is dismissable.

isDismissable?: boolean;

Whether pressing the escape key to close the dialog should be disabled.

isKeyboardDismissDisabled?: boolean;

}

Referenced by

DialogContainer

DialogTriggerProps

export type DialogTriggerProps = {

The dialog and its trigger element.

children: [import("react").ReactElement, DialogRenderFn | import("react").ReactElement];

The type of dialog that should be rendered.

less

@default — 'modal'

type?: DialogType;

The type of Dialog that should be rendered when on a mobile device. See DialogTrigger types section for an explanation on each.

mobileType?: Exclude<DialogType, "popover">;

Whether a "popover" type dialog's arrow should be hidden.

hideArrow?: boolean;

The ref of the element the dialog should visually attach itself to. Defaults to the trigger button if not defined.

targetRef?: import("react").RefObject<HTMLElement | null>;

Whether a "modal" type dialog should be dismissable.

isDismissable?: boolean;

Whether pressing the escape key to close the dialog should be disabled.

isKeyboardDismissDisabled?: boolean;

} & import("react-stately").OverlayTriggerProps & import("react-aria").PositionProps

Referenced by

DialogTrigger

Unexported symbols referenced here

DialogRenderFn

type DialogRenderFn = (close: () => void) => import("react").ReactElement

Referenced by

DialogTriggerProps

DialogType

type DialogType = "modal" | "popover" | "tray" | "fullscreen"

Referenced by

DialogTriggerProps

}

@keystar/ui/editor

module "@keystar/ui/editor" {

EditorListbox

export function EditorListbox<T extends object>(props: EditorListboxProps<T>): import("react").Element

Unexported symbols referenced here

EditorListboxProps

type EditorListboxProps<T> = {

listenerRef: import("react").RefObject<HTMLElement | null>;

scrollRef?: import("react").RefObject<HTMLElement | null>;

onAction?: (key: import("react").Key) => void;

onEscape?: () => void;

} & import("@react-types/shared").CollectionBase<T> & import("@react-types/shared").AriaLabelingProps & import("@react-types/shared").MultipleSelection & Pick<BaseStyleProps, "height" | "width" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "UNSAFE_className" | "UNSAFE_style">

Referenced by

EditorListbox

export {

} from "react-stately"

EditorPopover

export const EditorPopover: import("react").ForwardRefExoticComponent<{

How the popover should adapt when constrained by available space.

less

@default — 'flip'

adaptToBoundary?: "flip" | "stick" | "stretch";

The clipping boundary area of the floating element.

less

@default — 'clippingAncestors'

boundary?: Boundary;

The contents of the floating element.

children: import("react").ReactNode;

The placement of the floating element relative to the reference element.

placement?: Placement;

Whether to portal the floating element outside the DOM hierarchy of the parent component.

less

@default — true

portal?: boolean;

The reference element that the floating element should be positioned relative to.

reference: ReferenceElement;

} & Pick<BaseStyleProps, "height" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "width" | "UNSAFE_className" | "UNSAFE_style"> & import("react").RefAttributes<EditorPopoverRef>> = ...

EditorToolbar

export function EditorToolbar(props: EditorToolbarProps): import("react").Element

Unexported symbols referenced here

EditorToolbarProps

type EditorToolbarProps = import("react").PropsWithChildren<BaseStyleProps> & import("@react-types/shared").AriaLabelingProps

Referenced by

EditorToolbar

EditorToolbarButton

export function EditorToolbarButton(props: EditorToolbarButtonProps): import("react").Element

Unexported symbols referenced here

EditorToolbarButtonProps

type EditorToolbarButtonProps = Omit<ToggleButtonProps, "prominence">

Referenced by

EditorToolbarButton

EditorToolbarGroup

export function EditorToolbarGroup(props: EditorToolbarGroupProps): import("react").Element

Unexported symbols referenced here

EditorToolbarGroupProps

type EditorToolbarGroupProps = import("@react-types/shared").AriaLabelingProps & {

The contents of the group.

children?: import("react").ReactNode;

} & ({

selectionMode: "multiple";

disabledKeys?: Iterable<import("@react-types/shared").Key>;

onChange: ChangeHandler<import("@react-types/shared").Key>;

value: import("@react-types/shared").Key[];

} | {

selectionMode: "single";

disabledKeys?: Iterable<import("@react-types/shared").Key>;

onChange: ChangeHandler<import("@react-types/shared").Key>;

value: import("@react-types/shared").Key | null;

} | {

selectionMode?: "none";

disabledKeys?: never;

onChange?: never;

value?: never;

})

Referenced by

EditorToolbarGroup

ChangeHandler

type ChangeHandler<T> = (value: T) => void

Referenced by

EditorToolbarGroupProps

EditorToolbarItem

A toolbar item may be a checkbox/radio/toggle button, depending on context.

export function EditorToolbarItem(props: EditorToolbarItemProps): import("react").Element

Unexported symbols referenced here

EditorToolbarItemProps

type EditorToolbarItemProps = {

The contents of the item.

children?: import("react").ReactNode;

The value of the item.

value: import("@react-types/shared").Key;

} & import("@react-types/shared").AriaLabelingProps

Referenced by

EditorToolbarItem

EditorToolbarSeparator

export function EditorToolbarSeparator(): import("react").Element

EditorPopoverProps

export type EditorPopoverProps = {

How the popover should adapt when constrained by available space.

less

@default — 'flip'

adaptToBoundary?: "flip" | "stick" | "stretch";

The clipping boundary area of the floating element.

less

@default — 'clippingAncestors'

boundary?: Boundary;

The contents of the floating element.

children: import("react").ReactNode;

The placement of the floating element relative to the reference element.

placement?: Placement;

Whether to portal the floating element outside the DOM hierarchy of the parent component.

less

@default — true

portal?: boolean;

The reference element that the floating element should be positioned relative to.

reference: ReferenceElement;

} & Pick<BaseStyleProps, "height" | "width" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "UNSAFE_className" | "UNSAFE_style">

EditorPopoverRef

export type EditorPopoverRef = {

context: import("@floating-ui/react").ContextData;

update: () => void;

}

Referenced by

EditorPopover

}

@keystar/ui/layout

module "@keystar/ui/layout" {

AspectRatio

Present responsive media, such as images and videos or anything within an iFrame, at a specific aspect ratio.

export function AspectRatio(props: AspectRatioProps): import("react").Element

Box

Exposes a prop-based API for adding styles to a view, within the constraints of the theme.

export const Box: CompWithAsProp<BoxProps, "div"> = ...

Divider

Dividers bring clarity to a layout by grouping and dividing content in close proximity. They can also be used to establish rhythm and hierarchy.

export const Divider: CompWithAsProp<DividerProps, "div"> = ...

Flex

A layout container CSS flex. Keystar UI dimension values provide consistent spacing between items.

export const Flex: CompWithAsProp<FlexProps, "div"> = ...

Grid

A layout container using CSS grid. Keystar UI dimension values provide consistent sizing and spacing.

export const Grid: CompWithAsProp<GridProps, "div"> = ...

ScrollView

export const ScrollView: import("react").ForwardRefExoticComponent<ScrollViewProps & {

ref?: import("react").Ref<HTMLDivElement>;

}> = ...

HStack

A thin wrapper around Flex, for stacking elements horizontally.

export const HStack: CompWithAsProp<StackProps, "div"> = ...

Unexported symbols referenced here

StackProps

type StackProps = {

children?: import("react").ReactNode;

} & Omit<FlexStyleProps, "direction" | "inline" | "wrap">

Referenced by

HStack
VStack

VStack

A thin wrapper around Flex, for stacking elements vertically.

export const VStack: CompWithAsProp<StackProps, "div"> = ...

Surface

A surface contains UI in an isolated container, a bit like CSS stacking contexts. Use surfaces to create interfaces that are related to but distinct from those around them.

export const Surface: CompWithAsProp<SurfaceProps, "div"> = ...

useSurface

Get information about the current surface. Use to pull from the level for the surface of the invoking component.

export function useSurface(): {

level: number;

}

fitContent

Clamps a given size to an available size. See MDN.

less

@param — - The size to clamp.

export function fitContent(dimension: GridDimension): string

Unexported symbols referenced here

GridDimension

type GridDimension = LooseSizeDimension | FractionUnit

Referenced by

fitContent
minmax
repeat

FractionUnit

type FractionUnit = `${number}fr`

Referenced by

GridDimension

minmax

Defines a size range greater than or equal to min and less than or equal to max. See MDN.

less

@param — - The minimum size.

@param — - The maximum size.

export function minmax(min: GridDimension, max: GridDimension): string

repeat

Can be used to make a repeating fragment of the columns or rows list. See MDN.

less

@param — - The number of times to repeat the fragment.

@param — - The fragment to repeat.

export function repeat(count: number | "auto-fill" | "auto-fit", repeat: GridDimension): string

useFlexStyleProps

export function useFlexStyleProps(props: FlexStyleProps): Pick<import("react").HTMLAttributes<HTMLElement>, "style" | "className">

useGridStyleProps

export function useGridStyleProps(props: GridStyleProps): Pick<import("react").HTMLAttributes<HTMLElement>, "style" | "className">

AspectRatioProps

export type AspectRatioProps = {

Content to be displayed at the specified aspect-ratio.

children: import("react").ReactNode;

The preferred aspect ratio for the box, which will be used in the calculation of auto sizes and some other layout functions. See MDN.

value: Responsive<RatioType>;

} & BaseStyleProps & import("@react-types/shared").DOMProps

Referenced by

AspectRatio
ImageProps

Unexported symbols referenced here

RatioType

type RatioType = `${number}` | `${number}/${number}`

Referenced by

AspectRatioProps

BoxProps

export type BoxProps = {

children?: import("react").ReactNode;

} & import("@react-types/shared").DOMProps & BoxStyleProps

Referenced by

FlexProps

export type FlexProps = {

children?: import("react").ReactNode;

} & FlexStyleProps

Referenced by

Flex

GridProps

export type GridProps = {

children?: import("react").ReactNode;

} & GridStyleProps

Referenced by

Grid

ScrollViewProps

export type ScrollViewProps = {

The content of the scroll view.

children?: import("react").ReactNode;

Which direction to allow scroll.

less

@default — 'vertical'

direction?: ScrollDirection;

} & BoxAlignmentStyleProps & Omit<BoxStyleProps, "display"> & import("@react-types/shared").DOMProps & BaseStyleProps

Referenced by

ScrollView

Unexported symbols referenced here

ScrollDirection

type ScrollDirection = "vertical" | "horizontal"

Referenced by

ScrollViewProps

SurfaceProps

export type SurfaceProps = {

Provide contents of the surface.

children?: import("react").ReactNode;

Override the hierarchical level.

level?: 0 | 1 | 2;

} & import("@react-types/shared").DOMProps & Omit<BoxStyleProps, "backgroundColor">

Referenced by

Surface

}

@keystar/ui/notice

module "@keystar/ui/notice" {

Notice

Use notices to highlight information that affects a section, feature or page. Draw attention without interrupting users from their current task.

export function Notice(props: NoticeProps): import("react").Element

NoticeProps

export type NoticeProps = {

children: import("react").ReactNode;

tone?: NoticeTone;

} & BaseStyleProps & import("@react-types/shared").DOMProps

Referenced by

Notice

Unexported symbols referenced here

NoticeTone

type NoticeTone = keyof typeof toneToIcon

Referenced by

NoticeProps

toneToIcon

const toneToIcon: {

caution: import("react").Element;

critical: import("react").Element;

neutral: import("react").Element;

positive: import("react").Element;

} = ...

Referenced by

NoticeTone

}

@keystar/ui/picker

module "@keystar/ui/picker" {

export {

} from "react-stately"

Picker

Pickers allow users to choose a single option from a collapsible list of options when space is limited.

export const Picker: <T>(props: PickerProps<T> & {

ref?: import("react").RefObject<HTMLDivElement | null>;

}) => import("react").ReactElement = ...

PickerProps

export type PickerProps<T> = {

Alignment of the menu, relative to the picker. Only relevant when used in combination with the menuWidth prop.

less

@default — 'start'

align?: "start" | "end";

Whether the element should receive focus on render.

autoFocus?: boolean;

Direction the menu will render relative to the picker.

less

@default — 'bottom'

direction?: "bottom" | "top";

A fixed width for the menu. By default, the menu will match the width of the picker. Values less than the width of the picker are ignored.

menuWidth?: number;

Whether the menu should automatically flip direction when space is limited.

less

@default — true

shouldFlip?: boolean;

} & Omit<import("react-aria").AriaSelectProps<T>, keyof FieldProps> & import("@react-types/shared").AsyncLoadable & FieldProps & Pick<ActionButtonProps, "prominence"> & BaseStyleProps

Referenced by

Picker

}

@keystar/ui/router

module "@keystar/ui/router" {

useNavigate

Returns the function configured for client-side navigation.

export function useNavigate(): Router["navigate"]

usePathname

Returns the current application-relative pathname.

export function usePathname(): string

useSearch

Returns the current query string, including the leading question mark.

export function useSearch(): string

Router

export type Router = {

Perform client-side navigation.

navigate: Navigate;

Resolve an application-relative href for an anchor element.

useHref?: (href: string) => string;

Return the current application-relative pathname. This hook must have a stable identity.

usePathname?: () => string;

Return the current query string, including the leading question mark. This hook must have a stable identity.

useSearch?: () => string;

}

Referenced by

KeystarProviderProps
useNavigate

Unexported symbols referenced here

Navigate

type Navigate = (href: string, options?: NavigateOptions) => void

Referenced by

Router

NavigateOptions

type NavigateOptions = {

Replace the current history entry instead of adding a new one.

replace?: boolean;

}

Referenced by

Navigate

}

@keystar/ui/switch

module "@keystar/ui/switch" {

Switch

Switches allow users to turn an individual option on or off. They are usually used to activate or deactivate a specific setting.

export const Switch: import("react").ForwardRefExoticComponent<SwitchProps> = ...

SwitchProps

export type SwitchProps = import("react-aria").AriaSwitchProps & BaseStyleProps & {

The prominence of the switch element.

less

@default — 'default'

prominence?: "low" | "default";

The size of the switch element.

less

@default — 'regular'

size?: "small" | "regular";

}

Referenced by

Switch

}

@keystar/ui/listbox

module "@keystar/ui/listbox" {

export {

} from "react-stately"

ListItem

Common list item component for menus and pickers.

export const ListItem: CompWithAsProp<ListItemProps, "div"> = ...

Unexported symbols referenced here

ListItemProps

type ListItemProps = {

children: import("react").ReactNode;

descriptionProps?: import("react").HTMLAttributes<HTMLElement>;

labelProps?: import("react").HTMLAttributes<HTMLElement>;

keyboardShortcutProps?: import("react").HTMLAttributes<HTMLElement>;

isFocused?: boolean;

isHovered?: boolean;

isPressed?: boolean;

isSelected?: boolean;

}

Referenced by

ListItem

ListBox

A list of options that can allow selection of one or more.

export const ListBox: <T>(props: ListBoxProps<T> & {

ref?: import("react").RefObject<HTMLDivElement | null>;

}) => import("react").ReactElement = ...

ListBoxBase

export const ListBoxBase: <T>(props: ListBoxBaseProps<T> & {

ref?: import("react").RefObject<HTMLDivElement | null>;

}) => import("react").ReactElement = ...

Unexported symbols referenced here

ListBoxBaseProps

@private —

type ListBoxBaseProps<T> = {

autoFocus?: boolean | import("@react-types/shared").FocusStrategy;

disallowEmptySelection?: boolean;

domProps?: import("react").HTMLAttributes<HTMLElement>;

focusOnPointerEnter?: boolean;

isLoading?: boolean;

layout: ListBoxLayout<T>;

onLoadMore?: () => void;

onScroll?: () => void;

renderEmptyState?: () => import("react").ReactNode;

shouldFocusWrap?: boolean;

shouldSelectOnPressUp?: boolean;

shouldUseVirtualFocus?: boolean;

showLoadingSpinner?: boolean;

state: import("react-stately").ListState<T>;

} & import("react-aria").AriaListBoxOptions<T> & import("@react-types/shared").AriaLabelingProps & BaseStyleProps & import("@react-types/shared").DOMProps

Referenced by

ListBoxBase

useListBoxLayout

@private —

export function useListBoxLayout<T>(): ListBoxLayout<T>

Unexported symbols referenced here

ListBoxLayout

class ListBoxLayout<T> extends import("react-stately").ListLayout<T, ListBoxLayoutOptions> {

constructor(opts: ListBoxLayoutOptions)

update(invalidationContext: import("react-stately").InvalidationContext<ListBoxLayoutOptions>): void;

buildCollection(): import("react-stately").LayoutNode[];

buildSection(node: import("@react-types/shared").Node<T>, x: number, y: number): import("react-stately").LayoutNode;

}

Referenced by

useListBoxLayout
ListBoxBaseProps

ListBoxLayoutOptions

interface ListBoxLayoutOptions extends import("react-stately").ListLayoutOptions {

isLoading?: boolean;

placeholderHeight?: number;

}

Referenced by

ListBoxLayout

listStyles

export const listStyles: string = ...

ListBoxProps

export type ListBoxProps<T> = import("@react-types/shared").CollectionBase<T> & {

Whether to auto focus the listbox or an option.

autoFocus?: boolean | import("@react-types/shared").FocusStrategy;

Whether focus should wrap around when the end/start is reached.

shouldFocusWrap?: boolean;

} & import("@react-types/shared").AriaLabelingProps & import("@react-types/shared").AsyncLoadable & BaseStyleProps & import("@react-types/shared").DOMProps & import("@react-types/shared").FocusEvents & import("@react-types/shared").MultipleSelection

Referenced by

ListBox

}

@keystar/ui/tooltip

module "@keystar/ui/tooltip" {

Tooltip

A floating text label that succinctly describes the function of an interactive element, typically an icon-only button.

less

Tooltips are invoked on hover and keyboard focus. They cannot include interactive elements.

export const Tooltip: import("react").ForwardRefExoticComponent<TooltipProps & {

ref?: import("react").Ref<HTMLDivElement>;

}> = ...

TooltipTrigger

TooltipTrigger wraps around a trigger element and a Tooltip. It handles opening and closing the Tooltip when the user hovers over or focuses the trigger, and positioning the Tooltip relative to the trigger.

export let TooltipTrigger: (props: TooltipTriggerProps) => import("react").Element = ...

TooltipProps

export type TooltipProps = {

The content to display within the tooltip.

children: import("react").ReactNode;

The tone of the tooltip.

less

@default — 'neutral'

tone?: "neutral" | "positive" | "critical" | "accent";

} & BaseStyleProps & import("@react-types/shared").DOMProps & import("react-aria").AriaTooltipProps

Referenced by

Tooltip

TooltipTriggerProps

export type TooltipTriggerProps = {

children: [import("react").ReactElement, import("react").ReactElement];

} & import("react-stately").TooltipTriggerProps & import("react-aria").PositionProps

Referenced by

TooltipTrigger

}

@keystar/ui/calendar

module "@keystar/ui/calendar" {

Calendar

Calendars display a grid of days in one or more months and allow users to select a single date.

export const Calendar: <T extends import("react-stately").DateValue>(props: CalendarProps<T> & {

ref?: import("react").ForwardedRef<HTMLDivElement>;

}) => import("react").ReactElement = ...

RangeCalendar

RangeCalendars display a grid of days in one or more months and allow users to select a contiguous range of dates.

export const RangeCalendar: <T extends import("react-stately").DateValue>(props: RangeCalendarProps<T> & {

ref?: import("react").ForwardedRef<HTMLDivElement>;

}) => import("react").ReactElement = ...

CalendarProps

export interface CalendarProps<T extends import("react-stately").DateValue> extends import("react-aria").AriaCalendarProps<T>, BaseStyleProps {

The number of months to display at once. Up to 3 months are supported.

less

@default — 1

visibleMonths?: number;

}

Referenced by

Calendar

RangeCalendarProps

export interface RangeCalendarProps<T extends import("react-stately").DateValue> extends import("react-aria").AriaRangeCalendarProps<T>, BaseStyleProps {

The number of months to display at once. Up to 3 months are supported.

less

@default — 1

visibleMonths?: number;

}

Referenced by

RangeCalendar

}

@keystar/ui/checkbox

module "@keystar/ui/checkbox" {

Checkbox

export function Checkbox(props: CheckboxProps): import("react").Element

CheckboxGroup

A checkbox group allows users to select one or more items from a list of choices.

export const CheckboxGroup: import("react").ForwardRefExoticComponent<CheckboxGroupProps> = ...

CheckboxProps

export type CheckboxProps = {

Indeterminism is presentational only. The indeterminate visual representation remains regardless of user interaction.

isIndeterminate?: boolean;

The visual prominence of the checkbox.

less

@default — 'default'

prominence?: "default" | "low";

} & ToggleProps & BaseStyleProps & import("@react-types/shared").DOMProps

Referenced by

Checkbox

Unexported symbols referenced here

ToggleProps

type ToggleProps = {

The label for the element.

children?: import("react").ReactNode;

Whether the element should be selected (uncontrolled).

defaultSelected?: boolean;

Whether user input is required on the input before form submission.

isRequired?: boolean;

Whether the element should be selected (controlled).

isSelected?: boolean;

Handler that is called when the element's selection state changes.

onChange?: (isSelected: boolean) => void;

The value of the input element, used when submitting an HTML form. See MDN.

value?: string;

The name of the input element, used when submitting an HTML form. See MDN.

name?: string;

} & import("@react-types/shared").InputBase & import("@react-types/shared").FocusableProps

Referenced by

CheckboxProps

CheckboxGroupProps

export type CheckboxGroupProps = import("react-aria").AriaCheckboxGroupProps & FieldProps & BaseStyleProps & {

The checkboxes contained within the group.

children: import("react").ReactNode;

The axis the checkboxes should align with.

less

@default — 'vertical'

orientation?: import("@react-types/shared").Orientation;

}

Referenced by

CheckboxGroup

}

@keystar/ui/combobox

module "@keystar/ui/combobox" {

export {

} from "react-stately"

Combobox

A combobox combines a text input with a listbox, and allows users to filter a list of options.

export const Combobox: <T>(props: ComboboxProps<T> & {

ref?: import("react").ForwardedRef<HTMLDivElement>;

}) => import("react").ReactElement = ...

ComboboxMulti

This component is not accessible, use with caution.

less

A multi-combobox combines a text input with a listbox, and allows users to filter a list of options.

export const ComboboxMulti: <T>(props: ComboboxMultiProps<T> & {

ref?: import("react").ForwardedRef<HTMLDivElement>;

}) => import("react").ReactElement = ...

comboboxClassList

export const comboboxClassList: ClassList<"input" | "mobile-trigger"> = ...

ComboboxProps

export type ComboboxProps<T> = Omit<import("react-aria").AriaComboBoxProps<T>, "menuTrigger" | keyof FieldProps> & FieldProps & BaseStyleProps & Omit<import("@react-types/shared").AsyncLoadable, "isLoading"> & CommonProps

Referenced by

Combobox

Unexported symbols referenced here

CommonProps

type CommonProps = {

Alignment of the menu, relative to the combobox. Only relevant when used in combination with the menuWidth prop.

less

@default — 'start'

align?: "start" | "end";

Direction the menu will render relative to the combobox.

less

@default — 'bottom'

direction?: "bottom" | "top";

The current loading state of the Combobox. Determines whether or not the progress circle should be shown.

loadingState?: import("@react-types/shared").LoadingState;

The interaction required to display the menu.

less

NOTE: this prop has no effect on the mobile experience.

@default — 'input'

menuTrigger?: "focus" | "input" | "manual";

A fixed width for the menu. By default, the menu will match the width of the combobox. Values less than the width of the combobox are ignored.

less

NOTE: this prop has no effect on the mobile experience.

menuWidth?: number;

Whether the menu should automatically flip direction when space is limited.

less

@default — true

shouldFlip?: boolean;

}

Referenced by

ComboboxProps
ComboboxMultiProps

ComboboxMultiProps

export interface ComboboxMultiProps<T> extends import("@react-types/shared").CollectionBase<T>, Omit<import("@react-types/shared").MultipleSelection, "disallowEmptySelection">, Omit<import("@react-types/shared").AsyncLoadable, "isLoading">, import("@react-types/shared").TextInputBase, import("@react-types/shared").FocusableProps<HTMLInputElement>, import("@react-types/shared").Validation<ComboboxMultiValidationValue>, CommonProps, FieldProps {

The list of ComboBox items (uncontrolled).

defaultItems?: Iterable<T>;

The list of ComboBox items (controlled).

items?: Iterable<T>;

Method that is called when the open state of the menu changes. Returns the new open state and the action that caused the opening of the menu.

onOpenChange?: (isOpen: boolean) => void;

The value of the ComboBox input (controlled).

inputValue?: string;

The default value of the ComboBox input (uncontrolled).

defaultInputValue?: string;

Handler that is called when the ComboBox input value changes.

onInputChange?: (value: string) => void;

}

Referenced by

ComboboxMulti

Unexported symbols referenced here

ComboboxMultiValidationValue

interface ComboboxMultiValidationValue {

The selected key in the ComboBox.

selectedKeys: Set<import("@react-types/shared").Key>;

The value of the ComboBox input.

inputValue: string;

}

Referenced by

ComboboxMultiProps

}

@keystar/ui/nav-list

module "@keystar/ui/nav-list" {

NavList

Navigation lists let users navigate the application.

export const NavList: import("react").ForwardRefExoticComponent<NavListProps & {

ref?: import("react").Ref<HTMLDivElement>;

}> = ...

NavItem

An item within a NavList.

export const NavItem: import("react").ForwardRefExoticComponent<{

Indicate which item represents the current item. Typically "page" will be the appropriate value. See MDN.

The content of the nav item.

children: import("react").ReactNode;

The URL that the hyperlink points to.

href: string;

} & import("@react-types/shared").DOMProps & import("react").RefAttributes<HTMLAnchorElement>> = ...

NavGroup

Render a group of navigation links.

export function NavGroup(props: NavGroupProps): import("react").Element

NavListProps

export type NavListProps = {

children: import("react").ReactNode;

} & BaseStyleProps & import("@react-types/shared").DOMProps & import("@react-types/shared").AriaLabelingProps

Referenced by

NavList

NavItemProps

export type NavItemProps = {

Indicate which item represents the current item. Typically "page" will be the appropriate value. See MDN.

The content of the nav item.

children: import("react").ReactNode;

The URL that the hyperlink points to.

href: string;

} & import("@react-types/shared").DOMProps

NavGroupProps

export type NavGroupProps = {

children: import("react").ReactNode;

title: string;

} & import("@react-types/shared").DOMProps

Referenced by

NavGroup

}

@keystar/ui/nav-tree

module "@keystar/ui/nav-tree" {

export {

} from "react-stately"

NavTree

export function NavTree<T extends object>(props: NavTreeProps<T>): import("react").Element

NavTreeProps

export type NavTreeProps<T> = import("@react-types/shared").CollectionBase<T> & {

Handler that is called when a user performs any action on an item. Generally prefer the more specific onSelectionChange and onExpandedChange handlers.

onAction?: (key: import("@react-types/shared").Key) => any;

Whether focus should wrap around when the end/start is reached.

less

@default — false

shouldFocusWrap?: boolean;

The ref attached to the scrollable body. Used to provided automatic scrolling on item focus for non-virtualized trees.

scrollRef?: import("react").RefObject<HTMLElement | null>;

} & import("@react-types/shared").Expandable & ControlledSelection & import("@react-types/shared").DOMProps & import("@react-types/shared").AriaLabelingProps & BaseStyleProps

Referenced by

NavTree

Unexported symbols referenced here

ControlledSelection

type ControlledSelection = {

The currently selected key in the collection.

selectedKey?: import("@react-types/shared").Key | null;

Handler that is called when the selection changes.

onSelectionChange?: (key: import("@react-types/shared").Key) => any;

}

Referenced by

NavTreeProps

}

@keystar/ui/overlays

module "@keystar/ui/overlays" {

Blanket

A low-level utility component that covers the underlying interface while an overlay component is open.

export function Blanket(props: BlanketProps): import("react").Element

DirectionIndicator

export function DirectionIndicator({ fill, placement, size, stroke, ...props }: DirectionIndicatorProps): import("react").Element

Unexported symbols referenced here

DirectionIndicatorProps

type DirectionIndicatorProps = {

The SVG fill color.

fill: string;

The simulated stroke color.

stroke?: string;

The size of the indicator.

size: "xsmall" | "small" | "regular";

The placement of the overlay element, relative to its target.

less

@default — 'bottom'

} & import("react").HTMLAttributes<HTMLElement>

Referenced by

DirectionIndicator

A low-level utility component for implementing things like dialogs and popovers, in a layer above the page.

export const Modal: import("react").ForwardRefExoticComponent<ModalProps & {

ref?: import("react").Ref<HTMLDivElement>;

}> = ...

Overlay

Utility component for implementing overlay transitions.

export const Overlay: import("react").ForwardRefExoticComponent<Omit<import("react-aria").OverlayProps, "portalContainer" | "isExiting"> & TransitionProps & {

container?: import("react-aria").OverlayProps["portalContainer"];

isKeyboardDismissDisabled?: boolean;

} & import("react").RefAttributes<HTMLDivElement>> = ...

Unexported symbols referenced here

TransitionProps

type TransitionProps = {

children: import("react").ReactNode;

isOpen?: boolean;

nodeRef: import("react").MutableRefObject<HTMLElement | null>;

onEnter?: () => void;

onEntered?: () => void;

onEntering?: () => void;

onExit?: () => void;

onExited?: () => void;

onExiting?: () => void;

}

Referenced by

Overlay
Transition
OverlayProps

Popover

A low-level utility component for implementing things like info dialogs, menus and pickers.

export const Popover: import("react").ForwardRefExoticComponent<PopoverProps & {

ref?: import("react").Ref<HTMLDivElement>;

}> = ...

Transition

A low-level utility component for implementing transitions, which safely unmount children after their animation has completed.

export const Transition: (props: TransitionProps) => import("react").ReactNode = ...

Tray

A low-level utility component for implementing things like info dialogs, menus and pickers. They should only ever be displayed on devices with small screens, for interfaces where popovers wouldn't be appropriate.

export const Tray: import("react").ForwardRefExoticComponent<TrayProps & {

ref?: import("react").Ref<HTMLDivElement>;

}> = ...

BlanketProps

export type BlanketProps = {

isOpen?: boolean;

isTransparent?: boolean;

} & BaseStyleProps & import("react").HTMLAttributes<HTMLDivElement>

Referenced by

Blanket

ModalProps

export type ModalProps = {

children: import("react").ReactNode;

state: import("react-stately").OverlayTriggerState;

type?: "modal" | "fullscreen";

} & import("react-aria").AriaModalOverlayProps & BaseStyleProps & Omit<OverlayProps, "nodeRef">

Referenced by

Modal

OverlayProps

export type OverlayProps = Omit<import("react-aria").OverlayProps, "portalContainer" | "isExiting"> & TransitionProps & {

container?: import("react-aria").OverlayProps["portalContainer"];

isKeyboardDismissDisabled?: boolean;

}

Referenced by

ModalProps
TrayProps

PopoverProps

export type PopoverProps = Omit<import("react-aria").AriaPopoverProps, "popoverRef" | "maxHeight"> & {

children: import("react").ReactNode;

hideArrow?: boolean;

state: import("react-stately").OverlayTriggerState;

Referenced by

Popover

TrayProps

export type TrayProps = {

children: import("react").ReactNode;

state: import("react-stately").OverlayTriggerState;

isFixedHeight?: boolean;

} & import("react-aria").AriaModalOverlayProps & BaseStyleProps & Omit<OverlayProps, "nodeRef">

Referenced by

Tray

export {

AriaModalOverlayProps,

} from "react-aria"

export {

OverlayTriggerProps,

} from "react-stately"

}

@keystar/ui/progress

module "@keystar/ui/progress" {

Meter

Meters are visual representations of a quantity or an achievement. Their progress is determined by user actions, rather than system actions.

export const Meter: import("react").ForwardRefExoticComponent<MeterProps & import("react").RefAttributes<HTMLDivElement>> = ...

ProgressBar

ProgressBars show the progression of a system operation: downloading, uploading, processing, etc., in a visual way. They can represent either determinate or indeterminate progress.

export const ProgressBar: import("react").ForwardRefExoticComponent<ProgressBarProps & import("react").RefAttributes<HTMLDivElement>> = ...

ProgressCircle

Progress circles show the progression of a system operation such as downloading, uploading, processing, etc. in a visual way. They can represent determinate or indeterminate progress.

export const ProgressCircle: import("react").ForwardRefExoticComponent<ProgressCircleProps & import("react").RefAttributes<HTMLDivElement>> = ...

MeterProps

export interface MeterProps extends CommonBarProps {

The tone of the meter.

less

@default — 'neutral

tone?: "positive" | "critical" | "caution" | "neutral";

}

Referenced by

Meter

Unexported symbols referenced here

CommonBarProps

interface CommonBarProps extends CommonProgressProps, import("@react-types/shared").DOMProps, import("@react-types/shared").AriaLabelingProps, BaseStyleProps {

The content to display as the label.

label?: import("react").ReactNode;

Whether the value's label is displayed.

less

True by default if there's a label, false by default if not.

showValueLabel?: boolean;

The display format of the value label.

less

@default — { style: 'percent' }

formatOptions?: NumberFormatOptions;

The content to display as the value's label.

valueLabel?: import("react").ReactNode;

}

Referenced by

MeterProps
ProgressBarProps

ProgressBarProps

export interface ProgressBarProps extends CommonBarProps {

Whether progress is indeterminate.

isIndeterminate?: boolean;

}

Referenced by

ProgressBar

ProgressCircleProps

export interface ProgressCircleProps extends CommonProgressProps, import("@react-types/shared").DOMProps, import("@react-types/shared").AriaLabelingProps, BaseStyleProps {

Whether progress is indeterminate.

isIndeterminate?: boolean;

The size of the circle.

less

@default — 'medium'

size?: "small" | "medium" | "large";

}

Referenced by

ProgressCircle

Unexported symbols referenced here

CommonProgressProps

interface CommonProgressProps {

The current value (controlled).

less

@default — 0

value?: number;

The smallest value allowed for the input.

less

@default — 0

minValue?: number;

The largest value allowed for the input.

less

@default — 100

maxValue?: number;

}

Referenced by

ProgressCircleProps
CommonBarProps

}

@keystar/ui/utils/ts

module "@keystar/ui/utils/ts" {

forwardRefWithAs

This is a hack for sure. The thing is, getting a component to intelligently infer props based on a component or JSX string passed into an elementType prop is kind of a huge pain. Getting it to work and satisfy the constraints of forwardRef seems dang near impossible. To avoid needing to do this awkward type song-and-dance every time we want to forward a ref into a component that accepts an elementType prop, we abstract all of that mess to this function for the time time being.

export function forwardRefWithAs<BaseProps, DefaultElementType extends HTMLTag>(render: (props: BaseProps & {

elementType?: import("react").ElementType;

}, ref: import("react").Ref<any>) => Exclude<import("react").ReactNode, undefined>): CompWithAsProp<BaseProps, DefaultElementType>

CompWithAsProp

export type CompWithAsProp<BaseProps, DefaultElementType extends HTMLTag> = (props: Omit<import("react").AllHTMLAttributes<HTMLElement>, keyof BaseProps | LegacyAttributes> & BaseProps & {

elementType?: HTMLTag;

ref?: import("react").Ref<HTMLElement>;

}) => import("react").ReactElement | null

Referenced by

KeystarProvider
FieldLabel
Content
Footer
Header
Box
Divider
Flex
Grid
HStack
VStack
Surface
ListItem
forwardRefWithAs
Heading
Text
Prose
DropZone

Unexported symbols referenced here

LegacyAttributes

type LegacyAttributes = "background" | "bgColor" | "color" | "height" | "width"

Referenced by

CompWithAsProp

HTMLTag

export type HTMLTag = keyof import("react").IntrinsicElements & keyof HTMLElementTagNameMap

Referenced by

forwardRefWithAs
CompWithAsProp
FieldPrimitiveProps

PropsWithElementType

export type PropsWithElementType = P & {

elementType?: import("react").ElementType;

}

@keystar/ui/date-time

module "@keystar/ui/date-time" {

DateField

DateFields allow users to enter and edit date and time values using a keyboard. Each part of a date value is displayed in an individually editable segment.

export const DateField: <T extends import("react-stately").DateValue>(props: DateFieldProps<T> & {

ref?: import("react").Ref<HTMLDivElement>;

}) => import("react").ReactElement = ...

DatePicker

DatePickers combine a DateField and a Calendar popover to allow users to enter or select a date and time value.

export const DatePicker: <T extends import("react-stately").DateValue>(props: DatePickerProps<T> & {

ref?: import("react").Ref<HTMLDivElement>;

}) => import("react").ReactElement = ...

DateRangePicker

DateRangePickers combine two DateFields and a RangeCalendar popover to allow users to enter or select a date and time range.

export const DateRangePicker: <T extends import("react-stately").DateValue>(props: DateRangePickerProps<T> & {

ref?: import("react").Ref<HTMLDivElement>;

}) => import("react").ReactElement = ...

TimeField

TimeFields allow users to enter and edit time values using a keyboard. Each part of the time is displayed in an individually editable segment.

export const TimeField: <T extends import("react-stately").TimeValue>(props: TimeFieldProps<T> & {

ref?: import("react").Ref<HTMLDivElement>;

}) => import("react").ReactElement = ...

DateFieldProps

export type DateFieldProps<T extends import("react-stately").DateValue> = DateFieldBase<T> & import("@react-types/shared").FocusableProps & import("@react-types/shared").ValueBase<T | null, import("react-stately").MappedDateValue<T> | null> & FieldProps

Referenced by

DateField

Unexported symbols referenced here

DateFieldBase

type DateFieldBase<T extends import("react-stately").DateValue> = {

The minimum allowed date that a user may select.

minValue?: import("react-stately").DateValue;

The maximum allowed date that a user may select.

maxValue?: import("react-stately").DateValue;

Callback that is called for each date of the calendar. If it returns true, then the date is unavailable.

isDateUnavailable?: (date: import("react-stately").DateValue) => boolean;

A placeholder date that influences the format of the placeholder shown when no value is selected. Defaults to today's date at midnight.

placeholderValue?: T;

Whether to display the time in 12 or 24 hour format. By default, this is determined by the user's locale.

hourCycle?: 12 | 24;

Determines the smallest unit that is displayed in the date picker. By default, this is "day" for dates, and "minute" for times.

granularity?: import("react-stately").Granularity;

Whether to hide the time zone abbreviation.

less

@default — false

hideTimeZone?: boolean;

Whether to always show leading zeros in the month, day, and hour fields. By default, this is determined by the user's locale.

shouldForceLeadingZeros?: boolean;

}

Referenced by

DateFieldProps
DatePickerBase

DatePickerProps

export type DatePickerProps<T extends import("react-stately").DateValue> = DatePickerBase<T> & import("react-aria").AriaDatePickerProps<T> & import("@react-types/shared").ValueBase<T | null, import("react-stately").MappedDateValue<T> | null>

Referenced by

DatePicker

Unexported symbols referenced here

DatePickerBase

type DatePickerBase<T extends import("react-stately").DateValue> = {

The maximum number of months to display at once in the calendar popover, if screen space permits.

less

@default — 1

maxVisibleMonths?: number;

Whether the calendar popover should automatically flip direction when space is limited.

less

@default — true

shouldFlip?: boolean;

} & DateFieldBase<T> & import("@react-types/shared").FocusableProps & FieldProps

Referenced by

DatePickerProps
DateRangePickerProps

DateRangePickerProps

export type DateRangePickerProps<T extends import("react-stately").DateValue> = DatePickerBase<T> & import("react-aria").AriaDateRangePickerProps<T> & import("@react-types/shared").ValueBase<import("@react-types/shared").RangeValue<T> | null, import("@react-types/shared").RangeValue<import("react-stately").MappedDateValue<T>>>

Referenced by

DateRangePicker

TimeFieldProps

export type TimeFieldProps<T extends import("react-stately").TimeValue> = {

Whether to display the time in 12 or 24 hour format. By default, this is determined by the user's locale.

hourCycle?: 12 | 24;

Determines the smallest unit that is displayed in the time picker.

less

@default — 'minute'

granularity?: Exclude<import("react-stately").Granularity, "day">;

Whether to hide the time zone abbreviation.

hideTimeZone?: boolean;

A placeholder time that influences the format of the placeholder shown when no value is selected. Defaults to 12:00 AM or 00:00 depending on the hour cycle.

placeholderValue?: T;

The minimum allowed time that a user may select.

minValue?: import("react-stately").TimeValue;

The maximum allowed time that a user may select.

maxValue?: import("react-stately").TimeValue;

} & import("@react-types/shared").FocusableProps & import("@react-types/shared").ValueBase<T | null, import("react-stately").MappedTimeValue<T> | null> & FieldProps

Referenced by

TimeField

}

@keystar/ui/list-view

module "@keystar/ui/list-view" {

export {

} from "react-stately"

ListView

Displays a list of interactive items, and allows a user to navigate, select, or perform an action.

export const ListView: <T>(props: ListViewProps<T> & {

ref?: import("react").RefObject<HTMLDivElement | null>;

}) => import("react").ReactElement = ...

ListViewProps

export interface ListViewProps<T> extends import("react-aria").AriaGridListProps<T>, BaseStyleProps, import("@react-types/shared").SpectrumSelectionProps, Omit<import("@react-types/shared").AsyncLoadable, "isLoading"> {

Sets the amount of vertical padding within each cell.

less

@default — 'regular'

density?: "compact" | "regular" | "spacious";

Whether the ListView should be displayed with a quiet style.

isQuiet?: boolean;

The current loading state of the ListView. Determines whether or not the progress circle should be shown.

loadingState?: import("@react-types/shared").LoadingState;

Sets the text behavior for the row contents.

less

@default — 'truncate'

overflowMode?: "truncate" | "wrap";

Sets what the ListView should render when there is no content to display.

renderEmptyState?: () => import("react").Element;

Handler that is called when a user performs an action on an item. The exact user event depends on the collection's selectionStyle prop and the interaction modality.

onAction?: (key: import("react").Key) => void;

The drag and drop hooks returned by useDragAndDrop used to enable drag and drop behavior for the ListView.

dragAndDropHooks?: DragAndDropHooks["dragAndDropHooks"];

}

Referenced by

ListView

}

@keystar/ui/action-bar

module "@keystar/ui/action-bar" {

export {

} from "react-stately"

ActionBar

Action bars are used for single and bulk selection patterns when a user needs to perform actions on one or more items at the same time.

export const ActionBar: <T>(props: ActionBarProps<T> & {

ref?: import("react").ForwardedRef<HTMLDivElement>;

}) => import("react").ReactElement = ...

ActionBarContainer

ActionBarContainer wraps around an ActionBar and a component that supports selection. It handles the ActionBar's position with respect to its linked component.

export const ActionBarContainer: import("react").ForwardRefExoticComponent<ActionBarContainerProps & {

ref?: import("react").Ref<HTMLDivElement>;

}> = ...

ActionBarContainerProps

export type ActionBarContainerProps = {

children: import("react").ReactNode;

} & import("@react-types/shared").DOMProps & BaseStyleProps

Referenced by

ActionBarContainer

ActionBarProps

export type ActionBarProps<T> = {

children: ItemElement<T> | ItemElement<T>[] | ((item: T) => ItemElement<T>);

items?: Iterable<T>;

disabledKeys?: Iterable<import("@react-types/shared").Key>;

selectedItemCount: number | "all";

onClearSelection: () => void;

isEmphasized?: boolean;

onAction?: (key: import("@react-types/shared").Key) => void;

buttonLabelBehavior?: "show" | "collapse" | "hide";

} & import("@react-types/shared").DOMProps & BaseStyleProps

Referenced by

ActionBar

Unexported symbols referenced here

ItemElement

type ItemElement<T> = import("react").ReactElement<import("@react-types/shared").ItemProps<T>> | null

Referenced by

ActionBarProps

}

@keystar/ui/primitives

module "@keystar/ui/primitives" {

TOKEN_PREFIX

export const TOKEN_PREFIX: "kui" = ...

THEME_DEFAULT

export const THEME_DEFAULT: "kui-theme" = ...

SCHEME_AUTO

export const SCHEME_AUTO: "kui-scheme--auto" = ...

SCHEME_LIGHT

export const SCHEME_LIGHT: "kui-scheme--light" = ...

SCHEME_DARK

export const SCHEME_DARK: "kui-scheme--dark" = ...

}

@keystar/ui/split-view

module "@keystar/ui/split-view" {

SplitView

export function SplitView(props: SplitViewProps): import("react").Element

SplitPanePrimary

export const SplitPanePrimary: import("react").ForwardRefExoticComponent<SplitPanePrimaryProps & {

ref?: import("react").Ref<HTMLDivElement>;

}> = ...

Unexported symbols referenced here

SplitPanePrimaryProps

type SplitPanePrimaryProps = {

children: import("react").ReactNode;

} & import("@react-types/shared").DOMProps & BaseStyleProps

Referenced by

SplitPanePrimary

SplitPaneSecondary

export const SplitPaneSecondary: import("react").ForwardRefExoticComponent<SplitPaneSecondaryProps & {

ref?: import("react").Ref<HTMLDivElement>;

}> = ...

Unexported symbols referenced here

SplitPaneSecondaryProps

type SplitPaneSecondaryProps = {

children: import("react").ReactNode;

} & import("@react-types/shared").DOMProps & BaseStyleProps

Referenced by

SplitPaneSecondary

SplitViewProps

export type SplitViewProps = {

Unique ID used to auto-save the pane arrangement.

autoSaveId?: string;

The primary and secondary split panes.

children: [import("react").ReactElement, import("react").ReactElement];

The default size of the primary pane, in pixels.

defaultSize: number;

Control the collapsed state of the primary pane.

isCollapsed?: boolean;

The minimum size of the primary pane, in pixels.

minSize: number;

The minimum size of the primary pane, in pixels.

maxSize: number;

Callback that is called when the user collapses or expands the primary pane. A collapse event is triggered when the primary pane is dragged beyond half its minimum size, or the user presses the Enter key while the resize handle is focused.

less

Because we visually hide the resize handle (unless focused) to complete the collapsed appearance, an expand event will only occur when the user presses the Enter key on a collapsed resize handle—you MUST implement an alternative "expand" interaction for pointer users.

onCollapseChange?: (isCollapsed: boolean) => void;

Callback that is called when the user resizes the panes.

onResize?: (value: number) => void;

Custom storage API.

less

@default — localStorage

storage?: SplitViewStorage;

} & import("@react-types/shared").DOMProps & BaseStyleProps

Referenced by

SplitView

Unexported symbols referenced here

SplitViewStorage

type SplitViewStorage = {

getItem(name: string): string | null;

setItem(name: string, value: string): void;

}

Referenced by

SplitViewProps

}

@keystar/ui/text-field

module "@keystar/ui/text-field" {

TextFieldPrimitive

Internal component for default appearance and behaviour.

export const TextFieldPrimitive: import("react").ForwardRefExoticComponent<TextFieldPrimitiveProps & {

ref?: import("react").Ref<InputOrTextArea>;

}> = ...

Unexported symbols referenced here

TextFieldPrimitiveProps

type TextFieldPrimitiveProps = (TextFieldProps | TextAreaProps) & {

When true, text will wrap onto multiple lines using a textarea instead of the traditional input element.

isMultiline?: boolean;

startElement?: Conditional<import("react").ReactElement>;

endElement?: Conditional<import("react").ReactElement>;

labelProps?: import("react").LabelHTMLAttributes<HTMLLabelElement>;

inputProps: import("react").InputHTMLAttributes<HTMLInputElement> | import("react").TextareaHTMLAttributes<HTMLTextAreaElement>;

descriptionProps?: import("react").HTMLAttributes<HTMLElement>;

errorMessageProps?: import("react").HTMLAttributes<HTMLElement>;

inputWrapperProps?: import("react").HTMLAttributes<HTMLElement>;

}

Referenced by

TextFieldPrimitive

InputOrTextArea

type InputOrTextArea = HTMLInputElement | HTMLTextAreaElement

Referenced by

TextFieldPrimitive

TextField

Text fields allow users to input text with a keyboard.

export const TextField: import("react").ForwardRefExoticComponent<TextFieldProps & {

ref?: import("react").Ref<HTMLInputElement>;

}> = ...

TextArea

Text areas allow users to input multiple lines of text with a keyboard.

export const TextArea: import("react").ForwardRefExoticComponent<TextAreaProps & import("react").RefAttributes<HTMLTextAreaElement>> = ...

validateTextFieldProps

export function validateTextFieldProps<T extends FieldProps>(props: T): T

TextAreaProps

export type TextAreaProps = Omit<TextFieldProps<HTMLTextAreaElement>, "pattern" | "type" | "startElement" | "endElement">

Referenced by

TextArea
TextFieldPrimitiveProps

TextFieldProps

export type TextFieldProps<T extends HTMLInputElement | HTMLTextAreaElement = HTMLInputElement> = {

Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.

'aria-activedescendant'?: string;

Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be presented if they are made.

'aria-autocomplete'?: "none" | "inline" | "list" | "both";

Identifies the element that provides an error message for the object.

'aria-errormessage'?: string;

Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.

Element to display before the input.

startElement?: Conditional<import("react").ReactElement>;

Element to display after the input.

endElement?: Conditional<import("react").ReactElement>;

} & FieldProps & Omit<import("react-aria").AriaTextFieldProps<T>, keyof FieldProps>

Referenced by

TextField
TextAreaProps
SearchField
SearchFieldProps
TextFieldPrimitiveProps

}

@keystar/ui/typography

module "@keystar/ui/typography" {

export {

VisuallyHidden,

} from "react-aria"

Heading

A typographic device used to communicate levels of hierarchy between text.

export const Heading: CompWithAsProp<HeadingProps, "h3"> = ...

headingClassList

export const headingClassList: ClassList<"root" | (string & {})> = ...

useHeadingContext

export function useHeadingContext(): HeadingContextType | undefined

Unexported symbols referenced here

HeadingContextType

type HeadingContextType = {

size: FontSizeHeading;

}

Referenced by

useHeadingContext

Text

export const Text: CompWithAsProp<TextProps, "span"> = ...

textClassList

export const textClassList: ClassList<"root" | (string & {})> = ...

useTextStyles

export function useTextStyles(props: PickRequired<TextProps, "color" | "size" | "weight">): Pick<import("react").HTMLAttributes<HTMLElement>, "style" | "className">

useTextContext

export function useTextContext(): TextContextType | undefined

Unexported symbols referenced here

TextContextType

type TextContextType = Pick<TextProps, "color" | "size" | "weight">

Referenced by

useTextContext

Emoji

A utility component for displaying emoji characters accessibly. Emojis can add playfulness to your interface, but require formatting to ensure that they are accessible for all users.

export const Emoji: import("react").ForwardRefExoticComponent<EmojiProps & {

ref?: import("react").Ref<HTMLSpanElement>;

}> = ...

Kbd

Represents text that specifies a keyboard command.

export const Kbd: import("react").ForwardRefExoticComponent<KbdProps & {

ref?: import("react").Ref<HTMLElement>;

}> = ...

Numeral

export const Numeral: import("react").ForwardRefExoticComponent<NumeralProps & import("react").RefAttributes<HTMLElement>> = ...

Prose

A typographic component that adds styles for rendering remote HTML content.

export const Prose: CompWithAsProp<ProseProps, "div"> = ...

Unexported symbols referenced here

ProseProps

type ProseProps = {

The content to render.

children?: import("react").ReactNode;

The size of body text.

less

@default — 'medium'

size?: FontSizeText;

Referenced by

Prose
useProseStyleProps

useProseStyleProps

export function useProseStyleProps(props: ProseProps): {

className: string;

style?: import("react").CSSProperties | undefined;

}

EmojiProps

export type EmojiProps = {

Label used to describe the symbol that will be announced to screen readers.

label?: string;

Emoji symbol.

symbol: string;

} & BaseStyleProps & import("@react-types/shared").DOMProps

Referenced by

Emoji

KbdProps

export type KbdProps = {

Keyboard shortcut text.

children: import("react").ReactNode;

Prefix with OS-specific "alt" key.

less

@MacOS — ⎇

@Windows — Alt

alt?: boolean;

Prefix with OS-specific "meta" key.

less

@MacOS — ⌘

@Windows — Ctrl

meta?: boolean;

Prefix with OS-specific "shift" key.

less

@MacOS — ⇧

@Windows — Shift

shift?: boolean;

A slot to place the shortcut text.

less

@default — 'kbd'

slot?: string;

} & import("@react-types/shared").DOMProps & BaseStyleProps

Referenced by

NumeralProps

export type NumeralProps = {

How the value should be abbreviated, if at all.

abbreviate?: boolean | "short" | "long";

The currency to use when formatting "currency" values. Possible values are the ISO 4217 currency codes, such as "USD" for the US dollar, "EUR" for the euro, etc.

currency?: string;

The formatting style to use.

less

@default — 'decimal'

format?: Format;

Override the default precision. Supports a tuple for min/max.

precision?: number | [number, number];

The unit to use when formatting "unit" values. Possible values may be concatenated with "-per-" to make a compound unit.

unit?: string;

The numeric value to format.

value: number;

}

Referenced by

Numeral

Unexported symbols referenced here

Format

type Format = "currency" | "decimal" | "percent" | "unit"

Referenced by

NumeralProps

export {

HeadingProps,

TextProps,

} from "@keystar/ui/types"

}

@keystar/ui/breadcrumbs

module "@keystar/ui/breadcrumbs" {

export {

} from "react-stately"

Breadcrumbs

Breadcrumbs show hierarchy and navigational context for a user's location within an application.

export const Breadcrumbs: <T>(props: BreadcrumbsProps<T> & {

ref?: import("react").Ref<HTMLDivElement>;

}) => import("react").ReactElement = ...

BreadcrumbsProps

export type BreadcrumbsProps<T> = import("react-aria").AriaBreadcrumbsProps & BaseStyleProps & {

The breadcrumb items.

children: import("react").ReactElement<import("@react-types/shared").ItemProps<T>> | import("react").ReactElement<import("@react-types/shared").ItemProps<T>>[];

Whether the Breadcrumbs are disabled.

isDisabled?: boolean;

Called when an item is acted upon (usually selection via press).

onAction?: (key: import("react").Key) => void;

Whether to always show the root item if the items are collapsed.

showRoot?: boolean;

Size of the Breadcrumbs including spacing and layout.

less

@default — 'regular'

size?: BreadcrumbSize;

}

Referenced by

Breadcrumbs

Unexported symbols referenced here

BreadcrumbSize

type BreadcrumbSize = NonNullable<TextProps["size"]>

Referenced by

BreadcrumbsProps

}

@keystar/ui/action-group

module "@keystar/ui/action-group" {

export {

} from "react-stately"

ActionGroup

Group related action buttons together.

export const ActionGroup: <T>(props: ActionGroupProps<T> & {

ref?: import("react").RefObject<HTMLDivElement | null>;

}) => import("react").ReactElement = ...

ActionGroupProps

export type ActionGroupProps<T> = AriaActionGroupProps<T> & {

Sets the amount of space between buttons.

less

@default — 'regular'

density?: "compact" | "regular";

Whether the buttons should be justified in their container.

isJustified?: boolean;

Defines the behavior of the group when the buttons do not fit in the available space. When set to 'wrap', the items wrap to form a new line. When set to 'collapse', the items that do not fit are collapsed into a dropdown menu.

less

@default — 'wrap'

overflowMode?: "wrap" | "collapse";

Defines when the text within the buttons should be hidden and only the icon should be shown. When set to 'hide', the text is always shown in a tooltip. When set to 'collapse', the text is visible if space is available, and hidden when space is limited. The text is always visible when the item is collapsed into a menu.

less

@default — 'show'

buttonLabelBehavior?: "show" | "collapse" | "hide";

The prominence of each button in the group.

less

@default — 'default'

prominence?: "low" | "default";

The icon to display in the dropdown menu trigger button when a selectable group is collapsed.

summaryIcon?: import("react").ReactElement;

Referenced by

ActionGroup

}

@keystar/ui/number-field

module "@keystar/ui/number-field" {

NumberField

Number fields let users enter a numeric value and incrementally increase or decrease the value with a step-button control.

export const NumberField: import("react").ForwardRefExoticComponent<NumberFieldProps & {

ref?: import("react").Ref<HTMLInputElement>;

}> = ...

NumberFieldProps

export type NumberFieldProps = {

A custom aria-label for the decrement button. If not provided, the localized string "Decrement" is used.

decrementAriaLabel?: string;

A custom aria-label for the increment button. If not provided, the localized string "Increment" is used.

incrementAriaLabel?: string;

Formatting options for the value displayed in the number field. This also affects what characters are allowed to be typed by the user.

formatOptions?: NumberFormatOptions;

Whether to hide the increment and decrement buttons.

hideStepper?: boolean;

} & import("@react-types/shared").ValueBase<number> & import("@react-types/shared").RangeInputBase<number> & FieldProps & import("@react-types/shared").FocusableProps & import("@react-types/shared").TextInputDOMEvents

Referenced by

NumberField

}

@keystar/ui/search-field

module "@keystar/ui/search-field" {

SearchField

Search fields are text fields, specifically designed for search behaviour.

export const SearchField: import("react").ForwardRefExoticComponent<{

onSubmit?: (value: string) => void;

onClear?: () => void;

showIcon?: boolean;

} & Omit<TextFieldProps, "pattern" | "type"> & import("react").RefAttributes<HTMLInputElement>> = ...

SearchFieldProps

export type SearchFieldProps = {

Handler that is called when the field is submitted.

onSubmit?: (value: string) => void;

Handler that is called when the clear button is pressed.

onClear?: () => void;

Whether to show the magnifying glass icon.

less

@default — : true

showIcon?: boolean;

} & Omit<TextFieldProps, "pattern" | "type">

}

@keystar/ui/status-light

module "@keystar/ui/status-light" {

StatusLight

Status lights describe the state or condition of an entity.

export const StatusLight: import("react").ForwardRefExoticComponent<StatusLightProps & {

ref?: import("react").Ref<HTMLDivElement>;

}> = ...

StatusLightProps

export type StatusLightProps = {

The content to display as the label.

children?: import("react").ReactNode;

An accessibility role for the status light. Should be set when the status can change at runtime, and no more than one status light will update simultaneously.

role?: "status";

The tone of the status light, which indicates semantic meaning.

less

@default — 'neutral'

tone?: StatusLightTones;

} & BaseStyleProps & import("@react-types/shared").DOMProps & import("@react-types/shared").AriaLabelingProps

Referenced by

StatusLight

Unexported symbols referenced here

StatusLightTones

Referenced by

StatusLightProps

}

@keystar/ui/drag-and-drop

module "@keystar/ui/drag-and-drop" {

DropZone

A DropZone is an area into which one or multiple objects can be dragged and dropped.

export const DropZone: CompWithAsProp<DropZoneProps, "div"> = ...

dropZoneClassList

export const dropZoneClassList: ClassList<"root" | (string & {})> = ...

DropZoneProps

export type DropZoneProps = Omit<import("react-aria").DropOptions, "getDropOperationForPoint" | "ref" | "hasDropButton"> & WithRenderProps<{

isDropTarget: boolean;

}> & BaseStyleProps & import("@react-types/shared").DOMProps & import("@react-types/shared").AriaLabelingProps

Referenced by

DropZone

FileTrigger

A FileTrigger allows a user to access the file system with any pressable component, or custom components built with usePress.

export const FileTrigger: import("react").ForwardRefExoticComponent<FileTriggerProps & import("react").RefAttributes<HTMLInputElement>> = ...

FileTriggerProps

export type FileTriggerProps = {

Specifies what mime type of files are allowed.

acceptedFileTypes?: string[];

Whether multiple files can be selected.

allowsMultiple?: boolean;

The children of the component.

children?: import("react").ReactNode;

Specifies the use of a media capture mechanism to capture the media on the spot.

defaultCamera?: "user" | "environment";

Handler when a user selects a file.

onSelect?: (files: FileList | null) => void;

}

Referenced by

FileTrigger

InsertionIndicatorPrimitive

export function InsertionIndicatorPrimitive(props: {

isDropTarget?: boolean;

} & import("react").HTMLAttributes<HTMLDivElement>): import("react").Element

useDragAndDrop

Provides the hooks required to enable drag and drop behavior for a drag and drop compatible React Spectrum component.

export function useDragAndDrop(options: DragAndDropOptions): DragAndDropHooks

DragAndDropOptions

export interface DragAndDropOptions extends Omit<import("@react-types/shared").DraggableCollectionProps, "preview" | "getItems">, import("@react-types/shared").DroppableCollectionProps {

A function that returns the items being dragged. If not specified, we assume that the collection is not draggable.

less

@default — () => []

getItems?: (keys: Set<import("@react-types/shared").Key>) => import("@react-types/shared").DragItem[];

Provide a custom drag preview. draggedKey represents the key of the item the user actually dragged.

renderPreview?: (keys: Set<import("@react-types/shared").Key>, draggedKey: import("@react-types/shared").Key | null) => import("react").Element;

}

Referenced by

useDragAndDrop

DragAndDropHooks

export interface DragAndDropHooks {

Drag and drop hooks for the collection element.

dragAndDropHooks: DragHooks & DropHooks & {

isVirtualDragging?: () => boolean;

renderPreview?: (keys: Set<import("@react-types/shared").Key>, draggedKey: import("@react-types/shared").Key | null) => import("react").Element;

};

}

Referenced by

ListViewProps
useDragAndDrop
TableProps

Unexported symbols referenced here

DragHooks

interface DragHooks {

useDraggableCollectionState?: (props: DraggableCollectionStateOpts) => import("react-stately").DraggableCollectionState;

useDraggableCollection?: (props: import("react-aria").DraggableCollectionOptions, state: import("react-stately").DraggableCollectionState, ref: import("react").RefObject<HTMLElement | null>) => void;

useDraggableItem?: (props: import("react-aria").DraggableItemProps, state: import("react-stately").DraggableCollectionState) => import("react-aria").DraggableItemResult;

DragPreview?: typeof import("react-aria").DragPreview;

}

Referenced by

DragAndDropHooks

DropHooks

interface DropHooks {

useDroppableCollectionState?: (props: import("react-stately").DroppableCollectionStateOptions) => import("react-stately").DroppableCollectionState;

useDroppableCollection?: (props: import("react-aria").DroppableCollectionOptions, state: import("react-stately").DroppableCollectionState, ref: import("react").RefObject<HTMLElement | null>) => import("react-aria").DroppableCollectionResult;

useDroppableItem?: (options: import("react-aria").DroppableItemOptions, state: import("react-stately").DroppableCollectionState, ref: import("react").RefObject<HTMLElement | null>) => import("react-aria").DroppableItemResult;

useDropIndicator?: (props: import("react-aria").DropIndicatorProps, state: import("react-stately").DroppableCollectionState, ref: import("react").RefObject<HTMLElement | null>) => import("react-aria").DropIndicatorAria;

}

Referenced by

DragAndDropHooks

DraggableCollectionStateOpts

interface DraggableCollectionStateOpts extends Omit<import("react-stately").DraggableCollectionStateOptions, "getItems"> {}

Referenced by

DragHooks

export {

} from "react-aria"

move

export function move<T>(items: readonly T[], indices: number[], toIndex: number): T[]

}

@keystar/ui/password-field

module "@keystar/ui/password-field" {

PasswordField

Password fields are text fields for entering secure text.

export const PasswordField: import("react").ForwardRefExoticComponent<PasswordFieldProps & {

ref?: import("react").Ref<HTMLInputElement>;

}> = ...

PasswordFieldProps

export type PasswordFieldProps = {

The input autocomplete type.

less

@default — "current-password"

autoComplete?: "new-password" | "current-password" | (string & {});

Allow users to reveal the input text. When true, a button is displayed that toggles secure text entry.

less

@default — true

allowTextReveal?: boolean;

} & import("@react-types/shared").ValueBase<string> & FieldProps & import("@react-types/shared").FocusableProps & import("@react-types/shared").TextInputDOMEvents

Referenced by

PasswordField

}

@keystar/ui/contextual-help

module "@keystar/ui/contextual-help" {

ContextualHelp

Contextual help shows a user extra information about an adjacent component.

export const ContextualHelp: import("react").ForwardRefExoticComponent<ContextualHelpProps & {

ref?: import("react").Ref<HTMLButtonElement>;

}> = ...

ContextualHelpProps