Types

The types live in a subpath of their own, so you can pull in the ones you need without touching the components.

import type { ANIMATE_SPEED, ROUNDED } from "theui-svelte/type"

let speed: ANIMATE_SPEED = "fast"
let corner: ROUNDED = "lg"

You rarely have to name them: passing a string straight to a prop is checked against these unions anyway. They earn their keep when you keep settings in a variable, take props of your own that you pass on to a component, or write a function that returns one.

Types vanish when your app is built. They are there for your editor and for svelte-check, and cost nothing at runtime.

Padding of an accordion heading and its body. Set on Accordion, where every AccordionItem inside picks it up.

type ACCORDION_SIZE = "compact" | "default" | "large"

How long a transition takes. Nearly every component that moves takes it as animationSpeed, and "none" turns the transition off, which is the value to reach for when an element should not animate at all.

type ANIMATE_SPEED = "none" | "slower" | "slow" | "normal" | "fast" | "faster"

Diameter of an Avatar. An AvatarGroup takes it too and hands it to every avatar inside, so the stack stays even.

type AVATAR_SIZE = "xs" | "sm" | "md" | "lg" | "xl" | "2xl"

The dot on an Avatar. Leave status unset for no dot at all.

type AVATAR_STATUS = "online" | "offline" | "busy" | "away"

One entry in the data array of a Breadcrumb. An entry without a url is rendered as plain text, which is what you want for the page you are already on.

type BREADCRUMB_DATA = { text: string; url?: string }

Padding and text size of a Button, and of a ButtonGroup or Pagination that passes it down. "auto" drops the padding so the button takes the size of what you put inside it.

type BUTTON_SIZE = "xs" | "sm" | "md" | "lg" | "xl" | "auto"

The img prop of a Card. Anything else you add to the object, such as loading or width, is passed to the <img> element.

type CARD_IMAGE_TYPE = {
  class?: string
  src?: string
  alt?: string
  [key: string]: unknown
}

What you put in the items array of a Combobox. A bare string or number is both the value and the text; an object splits the two and can disable an entry or file it under a group heading.

type COMBOBOX_ITEM = string | number | {
  value?: unknown
  text?: string
  disabled?: boolean
  // Options with the same group name are shown together under its heading
  group?: string
}

The same option once the component has filled in what you left out. This is the shape handed to the option snippet and to a filter function of your own, so every field is there to read.

type COMBOBOX_OPTION = {
  value: unknown
  text: string
  disabled: boolean
  group?: string
}

The library wide defaults you pass to setTheuiDefaults. Every key is optional. animationSpeed, shadow and reset are fallbacks, so anything you set on a component, a Form or a Fieldset beats them. rounded is an off switch instead: false squares off every component whatever its rounded prop says. See Global defaults.

type CORE = {
  rounded?: boolean
  animationSpeed?: ANIMATE_SPEED
  reset?: boolean
  shadow?: SHADOW
}

Where the label of a Divider sits along the line.

type DIVIDER_ALIGN = "start" | "center" | "end"

Which way a Divider runs. A vertical one needs a parent with a height, since it stretches to fill it.

type DIVIDER_ORIENTATION = "horizontal" | "vertical"

The line style of a Divider.

type DIVIDER_VARIANT = "solid" | "dashed" | "dotted"

When SvelteKit should start fetching the page behind a DropdownItem link: as the pointer arrives, as it is pressed, or not at all.

type PRELOAD = false | "off" | "tap" | "hover"

What FileDropzone hands to onreject for each file it turned away, with the reason it did. Remember that these checks run in the browser, so the server has to make them again.

type DROPZONE_REJECTION = {
  file: File
  // Why the file was not accepted
  reason: "type" | "size" | "count"
}

A rejection is a good moment to tell people what went wrong, rather than letting the file disappear without a word.

<FileDropzone
  accept="image/*"
  maxSize={2 * 1024 * 1024}
  onreject={(files) => files.forEach((f) => notify(`${f.file.name}: ${f.reason}`))}
/>

Height and text size of a form control. Set it on one field, or on the Form or Fieldset around a group of them, and every field inside follows.

type INPUT_SIZE = "sm" | "md" | "lg" | "xl"

The type of an Input. "textarea" is in the list because the component renders a <textarea> for it instead of an <input>.

type INPUT_TYPE =
  | "date" | "datetime-local" | "email" | "month" | "number"
  | "password" | "tel" | "text" | "time" | "url" | "week"
  | "search" | "textarea"

How a form control is drawn: with a border around it, or flat with a line under it. A flat field floats its label by default.

type INPUT_VARIANT = "bordered" | "flat"

The width at which a Navbar swaps its links for the mobile menu, given as the Tailwind screen it starts at. Pass false to navBreakpoint instead, and the links stay expanded at every width.

type RESPONSIVE_NAV_ON = { sm: string; md: string; lg: string; xl: string }

type MOBILE_NAV_ON = keyof RESPONSIVE_NAV_ON   // "sm" | "md" | "lg" | "xl"

One of the four standard heights of a Navbar. The height prop also takes a class of your own, so this union is the shorthand rather than the limit.

type NAV_HEIGHT_TYPES = "sm" | "md" | "lg" | "xl"

What a Navbar does as the page scrolls: nothing, stay pinned, shrink on the way down, hide on the way down, or shrink and then hide.

type NAV_SCROLL_BEHAVIOR =
  | "default"
  | "fixed"
  | "shrinkOnScrollDown"
  | "hideOnScrollDown"
  | "shrinkAndHide"

The third argument of notify(), which settles how that one notification behaves and looks. removeAfter is a number of milliseconds, or false to leave the notification until it is dismissed.

type NOTIFY_CONFIG = {
  removeAfter?: number | false
  removeOnClick?: boolean
  rounded?: ROUNDED
  theme?: "default" | "soft" | "gradient"
  variant?: "card" | "borderTop" | "borderBottom" | "borderStart"
}

notify("Saved", "success", { removeAfter: 6000, variant: "borderStart" })

Where the notifications appear is not set here: that is the position prop of the Notification component, which you place once in your layout.

One notification as the library keeps it while it is on screen. You do not build this yourself, notify() does, but it is the shape you read if you render notifications your own way.

type NOTIFICATION_DATA_TYPE = {
  msg: string
  type: NOTIFICATION_TYPE
  CONFIG: NOTIFY_CONFIG & { id: string }
  removing?: boolean
}

Which corner or edge the Notification component stacks its messages in. It is set once, on the component, not per message.

type NOTIFICATION_POSITION =
  | "top-end" | "top-center" | "top-start"
  | "bottom-end" | "bottom-center" | "bottom-start"

The second argument of notify(), which picks the colour and the icon of the message.

type NOTIFICATION_TYPE = "error" | "info" | "success" | "warning"

What each box of an OtpInput accepts. "number" brings up the numeric keypad on a phone, and "password" hides the characters as they are typed.

type OTP_TYPE = "text" | "number" | "password"

Where a Popover or a Tooltip opens in relation to the element it belongs to. This one comes from Floating UI, which does the positioning, so import it from @floating-ui/dom rather than from this library.

import type { Placement } from "@floating-ui/dom"

type Placement =
  | "top" | "top-start" | "top-end"
  | "right" | "right-start" | "right-end"
  | "bottom" | "bottom-start" | "bottom-end"
  | "left" | "left-start" | "left-end"

It is a starting point, not a promise: when there is no room on that side, the element is flipped or shifted to somewhere it fits.

One mark under a Range. A number puts a mark at that value; the object form labels it as well.

type RANGE_TICK = number | { value: number; label?: string }

<Range min={0} max={100} ticks={[0, { value: 50, label: "Half" }, 100]} />

Size of the stars in a Rating.

type RATING_SIZE = "sm" | "md" | "lg" | "xl"

How round the corners of a component are. "none" squares them off and "full" makes a pill, which is why a full-rounded button looks different from a full-rounded card.

type ROUNDED = "sm" | "md" | "lg" | "xl" | "2xl" | "full" | "none" | undefined

One option in the data array of a Select. Leave value out and the text is submitted instead.

type SELECT_DATA = { disabled?: boolean; text: string; value?: unknown }

Depth of the shadow under a Card, a Button or a Popover. "inner" puts the shadow inside the element rather than under it.

type SHADOW = "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "inner" | "none"

How a Skeleton shows that something is loading. Pick "none" for a still placeholder.

type SKELETON_ANIMATION = "pulse" | "wave" | "none"

The shape of a Skeleton: a block, a circle for an avatar, or lines of text.

type SKELETON_VARIANT = "rect" | "circle" | "text"

Which way a Slider moves. A vertical slider needs a height, and its arrow keys become up and down.

type SLIDER_DIRECTION = "horizontal" | "vertical"

How one slide gives way to the next.

type SLIDER_EFFECT = "slide" | "fade" | "zoom" | "flip" | "cube"

Several Slider props take either one value for every screen, or a value per screen size. perView, gap and peek all work this way.

type SLIDER_BREAKPOINT = "base" | "sm" | "md" | "lg" | "xl" | "2xl"

// A single value, or a value per screen size like { base: 1, md: 2, lg: 3 }
type SLIDER_RESPONSIVE<T> = T | Partial<Record<SLIDER_BREAKPOINT, T>>

<Slider perView={{ base: 1, md: 2, lg: 3 }} gap={16} />

A screen size you leave out keeps the value of the size below it, so base is worth setting.

Size of a Spinner.

type SPINNER_SIZE = "xs" | "sm" | "md" | "lg" | "xl"

Which spinner is drawn: a turning ring, three bouncing dots, or a pinging circle.

type SPINNER_VARIANT = "ring" | "dots" | "ping"

The data prop of a Table: either an array of rows of plain strings, or an array of objects, in which case keys decides which fields are shown and in what order.

type TABLE_DATA = string[] | Record<string, unknown>[]

What a FormStep tells the FormWizard around it. A step whose validate returns false holds the wizard where it is, and one marked optional can be skipped.

type WIZARD_STEP_INFO = {
  readonly title?: string
  readonly description?: string
  readonly optional?: boolean
  readonly validate?: () => boolean | Promise<boolean>
}

validate may return a promise, so a step can wait for a check on your server before it lets the wizard move on.

These are exported because the components pass them between themselves, through Svelte context. You never set them, and nothing asks you for one, but they are listed here so nothing in the package is a mystery.

• ACCORDION_CONTEXT - settings an Accordion shares with its items.
• AVATAR_GROUP_CTX - how an AvatarGroup counts its avatars and decides which to hide behind the "+N" one.
• BTN_QAB_CTX - settings a Qab shares with its items.
• DROPDOWN_CTX and LIST_GROUP_CTX - classes a Dropdown or a ListGroup passes to its children.
• INPUT_CONFIG - the settings a Form or Fieldset hands down to the fields inside it, such as size, variant, rounded and floatingLabel.
• NAV_CTX - the configuration a Navbar shares with its links, groups and dropdowns.
• SLIDE_INFO, SLIDE_STATE and SLIDER_CTX - how a Slide registers itself with the Slider and reads back where it stands.
• TABLE_CONTEXT and TABS_CONTEXT - what a Table or Tabs shares with its rows, cells, tabs and panels.
• WIZARD_CTX and WIZARD_STEP_STATE - how a FormStep registers with its wizard and learns whether it is the active step.
• ROUNDED_ITEM_TYPES and ROUNDED_SIDES - used by the roundedClass() helper to round the right corners of a cell in a group.