Mixins / foldkit-mixins-ui

Recipes

namespace · packages/mixins-ui/src/recipes/index.ts:8

export * as Recipes from './recipes/index.js'

Shipped recipes for the slot contracts this package publishes. Each is a Style.recipeFor over those slots, so an application selects variants, hands the pieces to Style.forSlots, and adjusts a recipe with extend instead of forking it. Bases are in the components layer and variants in variants, of Layers.standard.

In the guides

Members

Recipes.Accordion

const · packages/mixins-ui/src/recipes/accordion.ts:24

const Accordion: SlotRecipe<Contract<{ readonly root: UnnamedSlot<Capability<"Container", readonly [Capability<"Interactive", readonly [Capability<"Base", readonly []>]>]>, readonly EventName[], readonly AttributeName[], readonly RequirementName[], boolean>; readonly item: UnnamedSlot<Capability<"Container", readonly [Capability<"Interactive", readonly [Capability<"Base", readonly []>]>]>, readonly EventName[], readonly AttributeName[], readonly RequirementName[], boolean>; readonly heading: UnnamedSlot<Capability<"Container", readonly [Capability<"Interactive", readonly [Capability<"Base", readonly []>]>]>, readonly EventName[], readonly AttributeName[], readonly RequirementName[], boolean>; readonly trigger: UnnamedSlot<Capability<"Interactive", readonly [Capability<"Base", readonly []>]>, readonly [EventToken<"click">], readonly [AttrToken<"aria-expanded">, AttrToken<"disabled">], readonly RequirementName[], boolean>; readonly label: UnnamedSlot<Capability<"Container", readonly [Capability<"Interactive", readonly [Capability<"Base", readonly []>]>]>, readonly EventName[], readonly AttributeName[], readonly RequirementName[], boolean>; readonly chevron: UnnamedSlot<Capability<"Container", readonly [Capability<"Interactive", readonly [Capability<"Base", readonly []>]>]>, readonly EventName[], readonly AttributeName[], readonly RequirementName[], boolean>; readonly panel: UnnamedSlot<Capability<"Container", readonly [Capability<"Interactive", readonly [Capability<"Base", readonly []>]>]>, rea …;

Recipes.Alert

const · packages/mixins-ui/src/recipes/alert.ts:19

const Alert: SlotRecipe<
  Contract<{
    readonly root: UnnamedSlot<
      Capability<
        'Container',
        readonly [
          Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
        ]
      >,
      readonly EventName[],
      readonly AttributeName[],
      readonly RequirementName[],
      boolean
    >
    readonly icon: UnnamedSlot<
      Capability<
        'Container',
        readonly [
          Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
        ]
      >,
      readonly EventName[],
      readonly AttributeName[],
      readonly RequirementName[],
      boolean
    >
    readonly title: UnnamedSlot<
      Capability<
        'Container',
        readonly [
          Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
        ]
      >,
      readonly EventName[],
      readonly AttributeName[],
      readonly RequirementName[],
      boolean
    >
    readonly description: UnnamedSlot<
      Capability<
        'Container',
        readonly [
          Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
        ]
      >,
      readonly EventName[],
      readonly AttributeName[],
      readonly RequirementName[],
      boolean
    >
  }>,
  {
    tone: {
      info: { root: StyleValue }
      success: { root: StyleValue }
      warning: { root: StyleValue }
      error: { root: StyleValue }
    }
  }
>

Recipes.AspectRatio

const · packages/mixins-ui/src/recipes/aspectRatio.ts:9

const AspectRatio: SlotRecipe<
  Contract<{
    readonly frame: UnnamedSlot<
      Capability<
        'Container',
        readonly [
          Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
        ]
      >,
      readonly EventName[],
      readonly AttributeName[],
      readonly RequirementName[],
      boolean
    >
  }>,
  {
    ratio: {
      square: { frame: StyleValue }
      video: { frame: StyleValue }
      portrait: { frame: StyleValue }
    }
  }
>

Recipes.Avatar

const · packages/mixins-ui/src/recipes/avatar.ts:10

const Avatar: SlotRecipe<
  Contract<{
    readonly root: UnnamedSlot<
      Capability<
        'Container',
        readonly [
          Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
        ]
      >,
      readonly EventName[],
      readonly AttributeName[],
      readonly RequirementName[],
      boolean
    >
    readonly fallback: UnnamedSlot<
      Capability<
        'Container',
        readonly [
          Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
        ]
      >,
      readonly EventName[],
      readonly AttributeName[],
      readonly RequirementName[],
      boolean
    >
    readonly image: UnnamedSlot<
      Capability<
        'Container',
        readonly [
          Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
        ]
      >,
      readonly EventName[],
      readonly AttributeName[],
      readonly RequirementName[],
      boolean
    >
  }>,
  {
    size: {
      sm: { root: StyleValue }
      md: { root: StyleValue }
      lg: { root: StyleValue }
    }
  }
>

Recipes.Badge

function · packages/mixins-ui/src/recipes/badge.ts:33

function Badge(options: BadgeOptions): {
  readonly badge: StyleValue
}

The badge's piece for the application's own badge slot.

Recipes.BadgeOptions

interface · packages/mixins-ui/src/recipes/badge.ts:16

interface BadgeOptions {
  readonly attribute: string
  readonly tones: Readonly<Record<string, BadgeTone>>
}

Recipes.BadgeTone

type · packages/mixins-ui/src/recipes/badge.ts:14

type BadgeTone = 'success' | 'warning' | 'info' | 'error'

The palette families a badge value can take; unmapped values keep the base.

const · packages/mixins-ui/src/recipes/banner.ts:46

const Banner: SlotRecipe<
  Contract<{
    readonly root: UnnamedSlot<
      Capability<
        'Container',
        readonly [
          Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
        ]
      >,
      readonly EventName[],
      readonly [AttrToken<'aria-label'>],
      readonly RequirementName[],
      boolean
    >
    readonly icon: UnnamedSlot<
      Capability<
        'Container',
        readonly [
          Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
        ]
      >,
      readonly EventName[],
      readonly AttributeName[],
      readonly RequirementName[],
      boolean
    >
    readonly message: UnnamedSlot<
      Capability<
        'Container',
        readonly [
          Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
        ]
      >,
      readonly EventName[],
      readonly AttributeName[],
      readonly RequirementName[],
      boolean
    >
    readonly action: UnnamedSlot<
      Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
      readonly EventName[],
      readonly AttributeName[],
      readonly RequirementName[],
      boolean
    >
    readonly dismiss: UnnamedSlot<
      Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
      readonly [EventToken<'click'>],
      readonly [AttrToken<'aria-label'>],
      readonly RequirementName[],
      boolean
    >
  }>,
  {
    tone: {
      info: { root: StyleValue }
      success: { root: StyleValue }
      warning: { root: StyleValue }
      error: { root: StyleValue }
    }
    emphasis: { subtle: { root: StyleValue }; bold: { root: StyleValue } }
  }
>

const · packages/mixins-ui/src/recipes/breadcrumb.ts:10

const Breadcrumb: SlotRecipe<
  Contract<{
    readonly root: UnnamedSlot<
      Capability<
        'Container',
        readonly [
          Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
        ]
      >,
      readonly EventName[],
      readonly AttributeName[],
      readonly RequirementName[],
      boolean
    >
    readonly list: UnnamedSlot<
      Capability<
        'Container',
        readonly [
          Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
        ]
      >,
      readonly EventName[],
      readonly AttributeName[],
      readonly RequirementName[],
      boolean
    >
    readonly item: UnnamedSlot<
      Capability<
        'Container',
        readonly [
          Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
        ]
      >,
      readonly EventName[],
      readonly AttributeName[],
      readonly RequirementName[],
      boolean
    >
    readonly link: UnnamedSlot<
      Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
      readonly EventName[],
      readonly AttributeName[],
      readonly RequirementName[],
      boolean
    >
    readonly current: UnnamedSlot<
      Capability<
        'Container',
        readonly [
          Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
        ]
      >,
      readonly EventName[],
      readonly AttributeName[],
      readonly RequirementName[],
      boolean
    >
  }>,
  {}
>

Recipes.Button

const · packages/mixins-ui/src/recipes/button.ts:67

const Button: SlotRecipe<
  Contract<{
    readonly button: UnnamedSlot<
      Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
      readonly [EventToken<'click'>],
      readonly [
        AttrToken<'role'>,
        AttrToken<'aria-disabled'>,
        AttrToken<'disabled'>,
        AttrToken<'aria-pressed'>,
      ],
      readonly RequirementName[],
      boolean
    >
  }>,
  {
    tone: {
      accent: { button: StyleValue }
      neutral: { button: StyleValue }
      danger: { button: StyleValue }
    }
    variant: {
      solid: { button: StyleValue }
      outline: { button: StyleValue }
      ghost: { button: StyleValue }
      primary: { button: StyleValue }
      icon: { button: StyleValue }
    }
    size: {
      sm: { button: StyleValue }
      md: { button: StyleValue }
      lg: { button: StyleValue }
    }
  }
>

Recipes.ButtonGroup

const · packages/mixins-ui/src/recipes/buttonGroup.ts:13

const ButtonGroup: SlotRecipe<
  Contract<{
    readonly root: UnnamedSlot<
      Capability<
        'Container',
        readonly [
          Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
        ]
      >,
      readonly EventName[],
      readonly AttributeName[],
      readonly RequirementName[],
      boolean
    >
  }>,
  {}
>

Recipes.Calendar

const · packages/mixins-ui/src/recipes/calendar.ts:74

const Calendar: SlotRecipe<Contract<{ readonly root: UnnamedSlot<Capability<"Container", readonly [Capability<"Interactive", readonly [Capability<"Base", readonly []>]>]>, readonly EventName[], readonly AttributeName[], readonly RequirementName[], boolean>; readonly header: UnnamedSlot<Capability<"Container", readonly [Capability<"Interactive", readonly [Capability<"Base", readonly []>]>]>, readonly EventName[], readonly AttributeName[], readonly RequirementName[], boolean>; readonly previousMonthButton: UnnamedSlot<Capability<"Interactive", readonly [Capability<"Base", readonly []>]>, readonly [EventToken<"click">], readonly [AttrToken<"role">, AttrToken<"disabled">, AttrToken<"aria-disabled">], readonly RequirementName[], boolean>; readonly nextMonthButton: UnnamedSlot<Capability<"Interactive", readonly [Capability<"Base", readonly []>]>, readonly [EventToken<"click">], readonly [AttrToken<"role">, AttrToken<"disabled">, AttrToken<"aria-disabled">], readonly RequirementName[], boolean>; readonly headingButton: UnnamedSlot<Capability<"Interactive", readonly [Capability<"Base", readonly []>]>, readonly [EventToken<"click">], readonly [AttrToken<"role">], readonly RequirementName[], boolean>; readonly previousPageButton: UnnamedSlot<Capability<"Interactive", readonly [Capability<"Base", readonly []>]>, readonly [EventToken<"click">], readonly [AttrToken<"role">, AttrToken<"disabled">, AttrToken<"aria-disabled">], readonly RequirementName[], boolean>; readonly nextPageButton: UnnamedSlot<Capab …;

Recipes.Card

const · packages/mixins-ui/src/recipes/card.ts:29

const Card: SlotRecipe<Contract<{ readonly root: UnnamedSlot<Capability<"Container", readonly [Capability<"Interactive", readonly [Capability<"Base", readonly []>]>]>, readonly EventName[], readonly AttributeName[], readonly RequirementName[], boolean>; readonly image: UnnamedSlot<Capability<"Container", readonly [Capability<"Interactive", readonly [Capability<"Base", readonly []>]>]>, readonly EventName[], readonly AttributeName[], readonly RequirementName[], boolean>; readonly media: UnnamedSlot<Capability<"Container", readonly [Capability<"Interactive", readonly [Capability<"Base", readonly []>]>]>, readonly EventName[], readonly AttributeName[], readonly RequirementName[], boolean>; readonly header: UnnamedSlot<Capability<"Container", readonly [Capability<"Interactive", readonly [Capability<"Base", readonly []>]>]>, readonly EventName[], readonly AttributeName[], readonly RequirementName[], boolean>; readonly title: UnnamedSlot<Capability<"Container", readonly [Capability<"Interactive", readonly [Capability<"Base", readonly []>]>]>, readonly EventName[], readonly AttributeName[], readonly RequirementName[], boolean>; readonly description: UnnamedSlot<Capability<"Container", readonly [Capability<"Interactive", readonly [Capability<"Base", readonly []>]>]>, readonly EventName[], readonly AttributeName[], readonly RequirementName[], boolean>; readonly action: UnnamedSlot<Capability<"Container", readonly [Capability<"Interactive", readonly [Capability<"Base", readonly []>]>]>, readonly E …;

Recipes.CardGroup

const · packages/mixins-ui/src/recipes/card.ts:265

const CardGroup: SlotRecipe<
  Contract<{
    readonly root: UnnamedSlot<
      Capability<
        'Container',
        readonly [
          Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
        ]
      >,
      readonly EventName[],
      readonly AttributeName[],
      readonly RequirementName[],
      boolean
    >
    readonly list: UnnamedSlot<
      Capability<
        'Container',
        readonly [
          Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
        ]
      >,
      readonly EventName[],
      readonly AttributeName[],
      readonly RequirementName[],
      boolean
    >
    readonly item: UnnamedSlot<
      Capability<
        'Container',
        readonly [
          Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
        ]
      >,
      readonly EventName[],
      readonly AttributeName[],
      readonly RequirementName[],
      boolean
    >
    readonly highlight: UnnamedSlot<
      Capability<
        'Container',
        readonly [
          Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
        ]
      >,
      readonly EventName[],
      readonly AttributeName[],
      readonly RequirementName[],
      boolean
    >
  }>,
  {
    layout: { divided: { item: StyleValue }; separated: { list: StyleValue } }
    border: { none: {}; outlined: { root: StyleValue } }
  }
>

const · packages/mixins-ui/src/recipes/carousel.ts:63

const Carousel: SlotRecipe<Contract<{ readonly root: UnnamedSlot<Capability<"Container", readonly [Capability<"Interactive", readonly [Capability<"Base", readonly []>]>]>, readonly EventName[], readonly [AttrToken<"role">, AttrToken<"aria-label">], readonly RequirementName[], boolean>; readonly track: UnnamedSlot<Capability<"Container", readonly [Capability<"Interactive", readonly [Capability<"Base", readonly []>]>]>, readonly EventName[], readonly AttributeName[], readonly RequirementName[], boolean>; readonly slide: UnnamedSlot<Capability<"Container", readonly [Capability<"Interactive", readonly [Capability<"Base", readonly []>]>]>, readonly EventName[], readonly [AttrToken<"role">, AttrToken<"aria-label">], readonly RequirementName[], boolean>; readonly controls: UnnamedSlot<Capability<"Container", readonly [Capability<"Interactive", readonly [Capability<"Base", readonly []>]>]>, readonly EventName[], readonly AttributeName[], readonly RequirementName[], boolean>; readonly previous: UnnamedSlot<Capability<"Interactive", readonly [Capability<"Base", readonly []>]>, readonly [EventToken<"click">], readonly [AttrToken<"aria-label">, AttrToken<"aria-disabled">], readonly RequirementName[], boolean>; readonly next: UnnamedSlot<Capability<"Interactive", readonly [Capability<"Base", readonly []>]>, readonly [EventToken<"click">], readonly [AttrToken<"aria-label">, AttrToken<"aria-disabled">], readonly RequirementName[], boolean>; readonly picker: UnnamedSlot<Capability<"Container", readonly [Cap …;

Recipes.Checkbox

const · packages/mixins-ui/src/recipes/toggle.ts:42

const Checkbox: SlotRecipe<
  Contract<{
    readonly checkbox: UnnamedSlot<
      Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
      readonly [EventToken<'click'>],
      readonly [
        AttrToken<'role'>,
        AttrToken<'aria-disabled'>,
        AttrToken<'disabled'>,
        AttrToken<'value'>,
      ],
      readonly RequirementName[],
      boolean
    >
    readonly label: UnnamedSlot<
      Capability<
        'Container',
        readonly [
          Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
        ]
      >,
      readonly [EventToken<'click'>],
      readonly AttributeName[],
      readonly RequirementName[],
      boolean
    >
    readonly description: UnnamedSlot<
      Capability<
        'Container',
        readonly [
          Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
        ]
      >,
      readonly EventName[],
      readonly AttributeName[],
      readonly RequirementName[],
      boolean
    >
    readonly hiddenInput: UnnamedSlot<
      Capability<'Base', readonly []>,
      readonly EventName[],
      readonly [AttrToken<'value'>],
      readonly RequirementName[],
      boolean
    >
  }>,
  {
    tone: {
      accent: { checkbox: StyleValue }
      neutral: { checkbox: StyleValue }
    }
    size: {
      sm: { checkbox: StyleValue }
      md: { checkbox: StyleValue }
      lg: { checkbox: StyleValue }
    }
  }
>

Recipes.CheckboxGroup

const · packages/mixins-ui/src/recipes/checkboxGroup.ts:17

const CheckboxGroup: SlotRecipe<
  Contract<{
    readonly root: UnnamedSlot<
      Capability<
        'Container',
        readonly [
          Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
        ]
      >,
      readonly EventName[],
      readonly AttributeName[],
      readonly RequirementName[],
      boolean
    >
    readonly legend: UnnamedSlot<
      Capability<
        'Container',
        readonly [
          Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
        ]
      >,
      readonly EventName[],
      readonly AttributeName[],
      readonly RequirementName[],
      boolean
    >
    readonly option: UnnamedSlot<
      Capability<
        'Container',
        readonly [
          Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
        ]
      >,
      readonly EventName[],
      readonly AttributeName[],
      readonly RequirementName[],
      boolean
    >
    readonly checkbox: UnnamedSlot<
      Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
      readonly [EventToken<'click'>],
      readonly [
        AttrToken<'role'>,
        AttrToken<'aria-disabled'>,
        AttrToken<'disabled'>,
      ],
      readonly RequirementName[],
      boolean
    >
    readonly label: UnnamedSlot<
      Capability<
        'Container',
        readonly [
          Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
        ]
      >,
      readonly EventName[],
      readonly AttributeName[],
      readonly RequirementName[],
      boolean
    >
    readonly description: UnnamedSlot<
      Capability<
        'Container',
        readonly [
          Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
        ]
      >,
      readonly EventName[],
      readonly AttributeName[],
      readonly RequirementName[],
      boolean
    >
  }>,
  { variant: { plain: { option: StyleValue }; list: { option: StyleValue } } }
>

Recipes.CodeBlock

const · packages/mixins-ui/src/recipes/codeBlock.ts:24

const CodeBlock: SlotRecipe<Contract<{ readonly root: UnnamedSlot<Capability<"Container", readonly [Capability<"Interactive", readonly [Capability<"Base", readonly []>]>]>, readonly EventName[], readonly AttributeName[], readonly RequirementName[], boolean>; readonly header: UnnamedSlot<Capability<"Container", readonly [Capability<"Interactive", readonly [Capability<"Base", readonly []>]>]>, readonly EventName[], readonly AttributeName[], readonly RequirementName[], boolean>; readonly title: UnnamedSlot<Capability<"Container", readonly [Capability<"Interactive", readonly [Capability<"Base", readonly []>]>]>, readonly EventName[], readonly AttributeName[], readonly RequirementName[], boolean>; readonly copy: UnnamedSlot<Capability<"Interactive", readonly [Capability<"Base", readonly []>]>, readonly [EventToken<"click">], readonly AttributeName[], readonly RequirementName[], boolean>; readonly body: UnnamedSlot<Capability<"Container", readonly [Capability<"Interactive", readonly [Capability<"Base", readonly []>]>]>, readonly EventName[], readonly AttributeName[], readonly RequirementName[], boolean>; readonly code: UnnamedSlot<Capability<"Container", readonly [Capability<"Interactive", readonly [Capability<"Base", readonly []>]>]>, readonly EventName[], readonly AttributeName[], readonly RequirementName[], boolean>; readonly line: UnnamedSlot<Capability<"Container", readonly [Capability<"Interactive", readonly [Capability<"Base", readonly []>]>]>, readonly EventName[], readonly AttributeName[], …;

Recipes.ColorPicker

const · packages/mixins-ui/src/recipes/colorPicker.ts:44

const ColorPicker: SlotRecipe<Contract<{ readonly root: UnnamedSlot<Capability<"Container", readonly [Capability<"Interactive", readonly [Capability<"Base", readonly []>]>]>, readonly EventName[], readonly [AttrToken<"role">], readonly RequirementName[], boolean>; readonly label: UnnamedSlot<Capability<"Container", readonly [Capability<"Interactive", readonly [Capability<"Base", readonly []>]>]>, readonly EventName[], readonly AttributeName[], readonly RequirementName[], boolean>; readonly swatch: UnnamedSlot<Capability<"Base", readonly []>, readonly EventName[], readonly AttributeName[], readonly RequirementName[], boolean>; readonly value: UnnamedSlot<Capability<"Container", readonly [Capability<"Interactive", readonly [Capability<"Base", readonly []>]>]>, readonly EventName[], readonly AttributeName[], readonly RequirementName[], boolean>; readonly channel: UnnamedSlot<Capability<"Container", readonly [Capability<"Interactive", readonly [Capability<"Base", readonly []>]>]>, readonly EventName[], readonly AttributeName[], readonly RequirementName[], boolean>; readonly channelLabel: UnnamedSlot<Capability<"Container", readonly [Capability<"Interactive", readonly [Capability<"Base", readonly []>]>]>, readonly EventName[], readonly AttributeName[], readonly RequirementName[], boolean>; readonly slider: UnnamedSlot<Capability<"Focusable", readonly [Capability<"Interactive", readonly [Capability<"Base", readonly []>]>]>, readonly [EventToken<"input">], readonly [AttrToken<"disabled">, AttrToken<"v …;

Recipes.Combobox

const · packages/mixins-ui/src/recipes/combobox.ts:34

const Combobox: SlotRecipe<Contract<{ readonly wrapper: UnnamedSlot<Capability<"Container", readonly [Capability<"Interactive", readonly [Capability<"Base", readonly []>]>]>, readonly EventName[], readonly AttributeName[], readonly RequirementName[], boolean>; readonly inputWrapper: UnnamedSlot<Capability<"Container", readonly [Capability<"Interactive", readonly [Capability<"Base", readonly []>]>]>, readonly EventName[], readonly AttributeName[], readonly RequirementName[], boolean>; readonly input: UnnamedSlot<Capability<"TextInput", readonly [Capability<"Focusable", readonly [Capability<"Interactive", readonly [Capability<"Base", readonly []>]>]>]>, readonly [EventToken<"input">, EventToken<"keydown">, EventToken<"blur">, EventToken<"focus">], readonly [AttrToken<"role">, AttrToken<"aria-expanded">, AttrToken<"disabled">, AttrToken<"aria-disabled">], readonly RequirementName[], boolean>; readonly toggleButton: UnnamedSlot<Capability<"Interactive", readonly [Capability<"Base", readonly []>]>, readonly [EventToken<"click">], readonly [AttrToken<"aria-expanded">, AttrToken<"disabled">, AttrToken<"aria-disabled">], readonly RequirementName[], boolean>; readonly backdrop: UnnamedSlot<Capability<"Container", readonly [Capability<"Interactive", readonly [Capability<"Base", readonly []>]>]>, readonly [EventToken<"click">], readonly AttributeName[], readonly RequirementName[], boolean>; readonly items: UnnamedSlot<Capability<"Container", readonly [Capability<"Interactive", readonly [Capability<"Bas …;

Recipes.Command

const · packages/mixins-ui/src/recipes/command.ts:14

const Command: SlotRecipe<Contract<{ readonly root: UnnamedSlot<Capability<"Container", readonly [Capability<"Interactive", readonly [Capability<"Base", readonly []>]>]>, readonly EventName[], readonly AttributeName[], readonly RequirementName[], boolean>; readonly input: UnnamedSlot<Capability<"Focusable", readonly [Capability<"Interactive", readonly [Capability<"Base", readonly []>]>]>, readonly [EventToken<"input">, EventToken<"keydown">], readonly [AttrToken<"role">, AttrToken<"aria-expanded">], readonly RequirementName[], boolean>; readonly list: UnnamedSlot<Capability<"Container", readonly [Capability<"Interactive", readonly [Capability<"Base", readonly []>]>]>, readonly EventName[], readonly [AttrToken<"role">], readonly RequirementName[], boolean>; readonly group: UnnamedSlot<Capability<"Container", readonly [Capability<"Interactive", readonly [Capability<"Base", readonly []>]>]>, readonly EventName[], readonly [AttrToken<"role">], readonly RequirementName[], boolean>; readonly heading: UnnamedSlot<Capability<"Container", readonly [Capability<"Interactive", readonly [Capability<"Base", readonly []>]>]>, readonly EventName[], readonly AttributeName[], readonly RequirementName[], boolean>; readonly item: UnnamedSlot<Capability<"Interactive", readonly [Capability<"Base", readonly []>]>, readonly [EventToken<"click">], readonly [AttrToken<"role">, AttrToken<"aria-selected">, AttrToken<"aria-disabled">], readonly RequirementName[], boolean>; readonly shortcut: UnnamedSlot<Capability<"Con …;

Recipes.DatePicker

const · packages/mixins-ui/src/recipes/datePicker.ts:13

const DatePicker: SlotRecipe<
  Contract<{
    readonly trigger: UnnamedSlot<
      Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
      readonly [EventToken<'click'>],
      readonly [AttrToken<'aria-expanded'>],
      readonly RequirementName[],
      boolean
    >
    readonly panel: UnnamedSlot<
      Capability<
        'Container',
        readonly [
          Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
        ]
      >,
      readonly EventName[],
      readonly AttributeName[],
      readonly RequirementName[],
      boolean
    >
    readonly backdrop: UnnamedSlot<
      Capability<
        'Container',
        readonly [
          Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
        ]
      >,
      readonly [EventToken<'click'>],
      readonly AttributeName[],
      readonly RequirementName[],
      boolean
    >
  }>,
  {
    size: {
      sm: { trigger: StyleValue; panel: StyleValue }
      md: { trigger: StyleValue; panel: StyleValue }
    }
  }
>

Recipes.DateRange

const · packages/mixins-ui/src/recipes/dateRange.ts:21

const DateRange: SlotRecipe<Contract<{ readonly root: UnnamedSlot<Capability<"Container", readonly [Capability<"Interactive", readonly [Capability<"Base", readonly []>]>]>, readonly EventName[], readonly AttributeName[], readonly RequirementName[], boolean>; readonly header: UnnamedSlot<Capability<"Container", readonly [Capability<"Interactive", readonly [Capability<"Base", readonly []>]>]>, readonly EventName[], readonly AttributeName[], readonly RequirementName[], boolean>; readonly previousMonthButton: UnnamedSlot<Capability<"Interactive", readonly [Capability<"Base", readonly []>]>, readonly [EventToken<"click">], readonly [AttrToken<"role">, AttrToken<"disabled">, AttrToken<"aria-disabled">], readonly RequirementName[], boolean>; readonly nextMonthButton: UnnamedSlot<Capability<"Interactive", readonly [Capability<"Base", readonly []>]>, readonly [EventToken<"click">], readonly [AttrToken<"role">, AttrToken<"disabled">, AttrToken<"aria-disabled">], readonly RequirementName[], boolean>; readonly headingButton: UnnamedSlot<Capability<"Interactive", readonly [Capability<"Base", readonly []>]>, readonly [EventToken<"click">], readonly [AttrToken<"role">], readonly RequirementName[], boolean>; readonly previousPageButton: UnnamedSlot<Capability<"Interactive", readonly [Capability<"Base", readonly []>]>, readonly [EventToken<"click">], readonly [AttrToken<"role">, AttrToken<"disabled">, AttrToken<"aria-disabled">], readonly RequirementName[], boolean>; readonly nextPageButton: UnnamedSlot<Capab …;

Recipes.Dialog

const · packages/mixins-ui/src/recipes/dialog.ts:18

const Dialog: SlotRecipe<Contract<{ readonly dialog: UnnamedSlot<Capability<"Container", readonly [Capability<"Interactive", readonly [Capability<"Base", readonly []>]>]>, readonly [EventToken<"cancel">], readonly [AttrToken<"aria-describedby">], readonly RequirementName[], boolean>; readonly backdrop: UnnamedSlot<Capability<"Container", readonly [Capability<"Interactive", readonly [Capability<"Base", readonly []>]>]>, readonly [EventToken<"click">], readonly AttributeName[], readonly RequirementName[], boolean>; readonly panel: UnnamedSlot<Capability<"Container", readonly [Capability<"Interactive", readonly [Capability<"Base", readonly []>]>]>, readonly EventName[], readonly AttributeName[], readonly RequirementName[], boolean>; readonly title: UnnamedSlot<Capability<"Container", readonly [Capability<"Interactive", readonly [Capability<"Base", readonly []>]>]>, readonly EventName[], readonly AttributeName[], readonly RequirementName[], boolean>; readonly description: UnnamedSlot<Capability<"Container", readonly [Capability<"Interactive", readonly [Capability<"Base", readonly []>]>]>, readonly EventName[], readonly AttributeName[], readonly RequirementName[], boolean>; readonly initialFocus: UnnamedSlot<Capability<"Focusable", readonly [Capability<"Interactive", readonly [Capability<"Base", readonly []>]>]>, readonly EventName[], readonly AttributeName[], readonly RequirementName[], boolean>; readonly closeButton: UnnamedSlot<Capability<"Interactive", readonly [Capability<"Base", readonly  …;

Recipes.Drawer

const · packages/mixins-ui/src/recipes/sheet.ts:110

const Drawer: SlotRecipe<Contract<{ readonly dialog: UnnamedSlot<Capability<"Container", readonly [Capability<"Interactive", readonly [Capability<"Base", readonly []>]>]>, readonly [EventToken<"cancel">], readonly [AttrToken<"aria-describedby">], readonly RequirementName[], boolean>; readonly backdrop: UnnamedSlot<Capability<"Container", readonly [Capability<"Interactive", readonly [Capability<"Base", readonly []>]>]>, readonly [EventToken<"click">], readonly AttributeName[], readonly RequirementName[], boolean>; readonly panel: UnnamedSlot<Capability<"Container", readonly [Capability<"Interactive", readonly [Capability<"Base", readonly []>]>]>, readonly EventName[], readonly AttributeName[], readonly RequirementName[], boolean>; readonly title: UnnamedSlot<Capability<"Container", readonly [Capability<"Interactive", readonly [Capability<"Base", readonly []>]>]>, readonly EventName[], readonly AttributeName[], readonly RequirementName[], boolean>; readonly description: UnnamedSlot<Capability<"Container", readonly [Capability<"Interactive", readonly [Capability<"Base", readonly []>]>]>, readonly EventName[], readonly AttributeName[], readonly RequirementName[], boolean>; readonly initialFocus: UnnamedSlot<Capability<"Focusable", readonly [Capability<"Interactive", readonly [Capability<"Base", readonly []>]>]>, readonly EventName[], readonly AttributeName[], readonly RequirementName[], boolean>; readonly closeButton: UnnamedSlot<Capability<"Interactive", readonly [Capability<"Base", readonly  …;

A Sheet from the bottom by default, its inner corners rounded, with a handle on its inner edge when it comes from the top or bottom: shadcn's Drawer draws none from the left or right.

Recipes.Empty

const · packages/mixins-ui/src/recipes/empty.ts:11

const Empty: SlotRecipe<
  Contract<{
    readonly root: UnnamedSlot<
      Capability<
        'Container',
        readonly [
          Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
        ]
      >,
      readonly EventName[],
      readonly AttributeName[],
      readonly RequirementName[],
      boolean
    >
    readonly icon: UnnamedSlot<
      Capability<
        'Container',
        readonly [
          Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
        ]
      >,
      readonly EventName[],
      readonly AttributeName[],
      readonly RequirementName[],
      boolean
    >
    readonly title: UnnamedSlot<
      Capability<
        'Container',
        readonly [
          Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
        ]
      >,
      readonly EventName[],
      readonly AttributeName[],
      readonly RequirementName[],
      boolean
    >
    readonly description: UnnamedSlot<
      Capability<
        'Container',
        readonly [
          Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
        ]
      >,
      readonly EventName[],
      readonly AttributeName[],
      readonly RequirementName[],
      boolean
    >
    readonly action: UnnamedSlot<
      Capability<
        'Container',
        readonly [
          Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
        ]
      >,
      readonly EventName[],
      readonly AttributeName[],
      readonly RequirementName[],
      boolean
    >
  }>,
  {}
>

Recipes.FileDrop

const · packages/mixins-ui/src/recipes/fileDrop.ts:11

const FileDrop: SlotRecipe<
  Contract<{
    readonly root: UnnamedSlot<
      Capability<
        'Container',
        readonly [
          Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
        ]
      >,
      readonly EventName[],
      readonly AttributeName[],
      readonly RequirementName[],
      boolean
    >
    readonly input: UnnamedSlot<
      Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
      readonly [EventToken<'change'>],
      readonly [AttrToken<'disabled'>],
      readonly RequirementName[],
      boolean
    >
  }>,
  {}
>

Recipes.HoverCard

const · packages/mixins-ui/src/recipes/hoverCard.ts:12

const HoverCard: SlotRecipe<
  Contract<{
    readonly trigger: UnnamedSlot<
      Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
      readonly [EventToken<'hover'>, EventToken<'focus'>, EventToken<'blur'>],
      readonly AttributeName[],
      readonly RequirementName[],
      boolean
    >
    readonly panel: UnnamedSlot<
      Capability<
        'Container',
        readonly [
          Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
        ]
      >,
      readonly [EventToken<'hover'>, EventToken<'focus'>, EventToken<'blur'>],
      readonly AttributeName[],
      readonly RequirementName[],
      boolean
    >
  }>,
  {}
>

Recipes.Icon

const · packages/mixins-ui/src/recipes/icon.ts:13

const Icon: SlotRecipe<
  Contract<{
    readonly glyph: UnnamedSlot<
      Capability<
        'Container',
        readonly [
          Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
        ]
      >,
      readonly EventName[],
      readonly AttributeName[],
      readonly RequirementName[],
      boolean
    >
  }>,
  {
    size: {
      sm: { glyph: StyleValue }
      md: { glyph: StyleValue }
      lg: { glyph: StyleValue }
    }
  }
>

Recipes.Input

const · packages/mixins-ui/src/recipes/field.ts:65

const Input: SlotRecipe<
  Contract<{
    readonly input: UnnamedSlot<
      Capability<
        'TextInput',
        readonly [
          Capability<
            'Focusable',
            readonly [
              Capability<
                'Interactive',
                readonly [Capability<'Base', readonly []>]
              >,
            ]
          >,
        ]
      >,
      readonly [EventToken<'input'>, EventToken<'focus'>, EventToken<'blur'>],
      readonly [
        AttrToken<'aria-label'>,
        AttrToken<'aria-invalid'>,
        AttrToken<'disabled'>,
        AttrToken<'value'>,
      ],
      readonly RequirementName[],
      boolean
    >
    readonly label: UnnamedSlot<
      Capability<
        'Container',
        readonly [
          Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
        ]
      >,
      readonly EventName[],
      readonly AttributeName[],
      readonly RequirementName[],
      boolean
    >
    readonly description: UnnamedSlot<
      Capability<
        'Container',
        readonly [
          Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
        ]
      >,
      readonly EventName[],
      readonly AttributeName[],
      readonly RequirementName[],
      boolean
    >
  }>,
  {
    size: {
      sm: { input: StyleValue }
      md: { input: StyleValue }
      lg: { input: StyleValue }
    }
    variant: { outline: { input: StyleValue }; filled: { input: StyleValue } }
  }
>

Recipes.InputCopy

const · packages/mixins-ui/src/recipes/inputCopy.ts:13

const InputCopy: SlotRecipe<
  Contract<{
    readonly root: UnnamedSlot<
      Capability<
        'Container',
        readonly [
          Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
        ]
      >,
      readonly EventName[],
      readonly AttributeName[],
      readonly RequirementName[],
      boolean
    >
    readonly label: UnnamedSlot<
      Capability<
        'Container',
        readonly [
          Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
        ]
      >,
      readonly EventName[],
      readonly AttributeName[],
      readonly RequirementName[],
      boolean
    >
    readonly group: UnnamedSlot<
      Capability<
        'Container',
        readonly [
          Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
        ]
      >,
      readonly EventName[],
      readonly AttributeName[],
      readonly RequirementName[],
      boolean
    >
    readonly input: UnnamedSlot<
      Capability<
        'Focusable',
        readonly [
          Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
        ]
      >,
      readonly EventName[],
      readonly [AttrToken<'value'>],
      readonly RequirementName[],
      boolean
    >
    readonly button: UnnamedSlot<
      Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
      readonly [EventToken<'click'>],
      readonly AttributeName[],
      readonly RequirementName[],
      boolean
    >
    readonly status: UnnamedSlot<
      Capability<
        'Container',
        readonly [
          Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
        ]
      >,
      readonly EventName[],
      readonly [AttrToken<'role'>],
      readonly RequirementName[],
      boolean
    >
  }>,
  {}
>

Recipes.InputGroup

const · packages/mixins-ui/src/recipes/field.ts:104

const InputGroup = { group, affix, control }

A text field with a prefix or suffix, such as an address's /: pieces for the application's own group, affix and control slots, drawn as one field. The group carries the border, its hover and the focus ring (while the control inside has focus); the affix sits inside it, muted; the control inside goes borderless and transparent, so the two read as one box.

Recipes.Item

const · packages/mixins-ui/src/recipes/item.ts:12

const Item: SlotRecipe<
  Contract<{
    readonly root: UnnamedSlot<
      Capability<
        'Container',
        readonly [
          Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
        ]
      >,
      readonly EventName[],
      readonly AttributeName[],
      readonly RequirementName[],
      boolean
    >
    readonly media: UnnamedSlot<
      Capability<
        'Container',
        readonly [
          Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
        ]
      >,
      readonly EventName[],
      readonly AttributeName[],
      readonly RequirementName[],
      boolean
    >
    readonly content: UnnamedSlot<
      Capability<
        'Container',
        readonly [
          Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
        ]
      >,
      readonly EventName[],
      readonly AttributeName[],
      readonly RequirementName[],
      boolean
    >
    readonly title: UnnamedSlot<
      Capability<
        'Container',
        readonly [
          Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
        ]
      >,
      readonly EventName[],
      readonly AttributeName[],
      readonly RequirementName[],
      boolean
    >
    readonly description: UnnamedSlot<
      Capability<
        'Container',
        readonly [
          Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
        ]
      >,
      readonly EventName[],
      readonly AttributeName[],
      readonly RequirementName[],
      boolean
    >
    readonly actions: UnnamedSlot<
      Capability<
        'Container',
        readonly [
          Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
        ]
      >,
      readonly EventName[],
      readonly AttributeName[],
      readonly RequirementName[],
      boolean
    >
  }>,
  {
    density: {
      comfortable: { root: StyleValue; media: StyleValue }
      compact: { root: StyleValue; media: StyleValue }
    }
  }
>

Recipes.Kbd

const · packages/mixins-ui/src/recipes/kbd.ts:10

const Kbd: SlotRecipe<
  Contract<{
    readonly key: UnnamedSlot<
      Capability<
        'Container',
        readonly [
          Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
        ]
      >,
      readonly EventName[],
      readonly AttributeName[],
      readonly RequirementName[],
      boolean
    >
  }>,
  {}
>

Recipes.Label

const · packages/mixins-ui/src/recipes/label.ts:10

const Label: SlotRecipe<
  Contract<{
    readonly label: UnnamedSlot<
      Capability<
        'Container',
        readonly [
          Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
        ]
      >,
      readonly EventName[],
      readonly AttributeName[],
      readonly RequirementName[],
      boolean
    >
  }>,
  {}
>

Recipes.Listbox

const · packages/mixins-ui/src/recipes/listbox.ts:31

const Listbox: SlotRecipe<Contract<{ readonly wrapper: UnnamedSlot<Capability<"Container", readonly [Capability<"Interactive", readonly [Capability<"Base", readonly []>]>]>, readonly EventName[], readonly AttributeName[], readonly RequirementName[], boolean>; readonly button: UnnamedSlot<Capability<"Interactive", readonly [Capability<"Base", readonly []>]>, readonly [EventToken<"click">, EventToken<"pointerdown">, EventToken<"keydown">], readonly [AttrToken<"role">, AttrToken<"aria-expanded">, AttrToken<"disabled">, AttrToken<"aria-disabled">], readonly RequirementName[], boolean>; readonly backdrop: UnnamedSlot<Capability<"Container", readonly [Capability<"Interactive", readonly [Capability<"Base", readonly []>]>]>, readonly [EventToken<"click">], readonly AttributeName[], readonly RequirementName[], boolean>; readonly items: UnnamedSlot<Capability<"Container", readonly [Capability<"Interactive", readonly [Capability<"Base", readonly []>]>]>, readonly [EventToken<"keydown">, EventToken<"blur">], readonly [AttrToken<"role">], readonly RequirementName[], boolean>; readonly scroll: UnnamedSlot<Capability<"Container", readonly [Capability<"Interactive", readonly [Capability<"Base", readonly []>]>]>, readonly EventName[], readonly AttributeName[], readonly RequirementName[], boolean>; readonly item: UnnamedSlot<Capability<"Interactive", readonly [Capability<"Base", readonly []>]>, readonly [EventToken<"click">], readonly [AttrToken<"role">, AttrToken<"aria-selected">, AttrToken<"disabled">, Att …;

const · packages/mixins-ui/src/recipes/menu.ts:20

const Menu: SlotRecipe<Contract<{ readonly wrapper: UnnamedSlot<Capability<"Container", readonly [Capability<"Interactive", readonly [Capability<"Base", readonly []>]>]>, readonly EventName[], readonly AttributeName[], readonly RequirementName[], boolean>; readonly button: UnnamedSlot<Capability<"Interactive", readonly [Capability<"Base", readonly []>]>, readonly [EventToken<"click">, EventToken<"pointerdown">, EventToken<"keydown">], readonly [AttrToken<"role">, AttrToken<"aria-expanded">, AttrToken<"disabled">, AttrToken<"aria-disabled">], readonly RequirementName[], boolean>; readonly backdrop: UnnamedSlot<Capability<"Container", readonly [Capability<"Interactive", readonly [Capability<"Base", readonly []>]>]>, readonly [EventToken<"click">], readonly AttributeName[], readonly RequirementName[], boolean>; readonly items: UnnamedSlot<Capability<"Container", readonly [Capability<"Interactive", readonly [Capability<"Base", readonly []>]>]>, readonly [EventToken<"keydown">, EventToken<"pointerup">, EventToken<"blur">], readonly [AttrToken<"role">], readonly RequirementName[], boolean>; readonly scroll: UnnamedSlot<Capability<"Container", readonly [Capability<"Interactive", readonly [Capability<"Base", readonly []>]>]>, readonly EventName[], readonly AttributeName[], readonly RequirementName[], boolean>; readonly item: UnnamedSlot<Capability<"Interactive", readonly [Capability<"Base", readonly []>]>, readonly [EventToken<"click">], readonly [AttrToken<"role">, AttrToken<"disabled">, AttrTo …;

const · packages/mixins-ui/src/recipes/menubar.ts:12

const Menubar: SlotRecipe<
  Contract<{
    readonly bar: UnnamedSlot<
      Capability<
        'Container',
        readonly [
          Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
        ]
      >,
      readonly [EventToken<'keydown'>],
      readonly AttributeName[],
      readonly RequirementName[],
      boolean
    >
    readonly menu: UnnamedSlot<
      Capability<
        'Container',
        readonly [
          Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
        ]
      >,
      readonly [EventToken<'hover'>],
      readonly AttributeName[],
      readonly RequirementName[],
      boolean
    >
  }>,
  {}
>

const · packages/mixins-ui/src/recipes/menubar.ts:32

const MenubarMenu: SlotRecipe<Contract<{ readonly wrapper: UnnamedSlot<Capability<"Container", readonly [Capability<"Interactive", readonly [Capability<"Base", readonly []>]>]>, readonly EventName[], readonly AttributeName[], readonly RequirementName[], boolean>; readonly button: UnnamedSlot<Capability<"Interactive", readonly [Capability<"Base", readonly []>]>, readonly [EventToken<"click">, EventToken<"pointerdown">, EventToken<"keydown">], readonly [AttrToken<"role">, AttrToken<"aria-expanded">, AttrToken<"disabled">, AttrToken<"aria-disabled">], readonly RequirementName[], boolean>; readonly backdrop: UnnamedSlot<Capability<"Container", readonly [Capability<"Interactive", readonly [Capability<"Base", readonly []>]>]>, readonly [EventToken<"click">], readonly AttributeName[], readonly RequirementName[], boolean>; readonly items: UnnamedSlot<Capability<"Container", readonly [Capability<"Interactive", readonly [Capability<"Base", readonly []>]>]>, readonly [EventToken<"keydown">, EventToken<"pointerup">, EventToken<"blur">], readonly [AttrToken<"role">], readonly RequirementName[], boolean>; readonly scroll: UnnamedSlot<Capability<"Container", readonly [Capability<"Interactive", readonly [Capability<"Base", readonly []>]>]>, readonly EventName[], readonly AttributeName[], readonly RequirementName[], boolean>; readonly item: UnnamedSlot<Capability<"Interactive", readonly [Capability<"Base", readonly []>]>, readonly [EventToken<"click">], readonly [AttrToken<"role">, AttrToken<"disabled">, AttrTo …;

Recipes.Meter

const · packages/mixins-ui/src/recipes/meter.ts:13

const Meter: SlotRecipe<
  Contract<{
    readonly root: UnnamedSlot<
      Capability<
        'Container',
        readonly [
          Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
        ]
      >,
      readonly EventName[],
      readonly AttributeName[],
      readonly RequirementName[],
      boolean
    >
    readonly label: UnnamedSlot<
      Capability<
        'Container',
        readonly [
          Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
        ]
      >,
      readonly EventName[],
      readonly AttributeName[],
      readonly RequirementName[],
      boolean
    >
    readonly track: UnnamedSlot<
      Capability<
        'Container',
        readonly [
          Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
        ]
      >,
      readonly EventName[],
      readonly AttributeName[],
      readonly RequirementName[],
      boolean
    >
    readonly fill: UnnamedSlot<
      Capability<
        'Container',
        readonly [
          Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
        ]
      >,
      readonly EventName[],
      readonly AttributeName[],
      readonly RequirementName[],
      boolean
    >
  }>,
  {}
>

const · packages/mixins-ui/src/recipes/nav.ts:29

const Nav: SlotRecipe<
  Contract<{
    readonly nav: UnnamedSlot<
      Capability<
        'Container',
        readonly [
          Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
        ]
      >,
      readonly EventName[],
      readonly AttributeName[],
      readonly RequirementName[],
      boolean
    >
    readonly list: UnnamedSlot<
      Capability<
        'Container',
        readonly [
          Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
        ]
      >,
      readonly EventName[],
      readonly AttributeName[],
      readonly RequirementName[],
      boolean
    >
    readonly item: UnnamedSlot<
      Capability<
        'Container',
        readonly [
          Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
        ]
      >,
      readonly EventName[],
      readonly AttributeName[],
      readonly RequirementName[],
      boolean
    >
    readonly link: UnnamedSlot<
      Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
      readonly EventName[],
      readonly AttributeName[],
      readonly RequirementName[],
      boolean
    >
    readonly indicator: UnnamedSlot<
      Capability<
        'Container',
        readonly [
          Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
        ]
      >,
      readonly EventName[],
      readonly AttributeName[],
      readonly RequirementName[],
      boolean
    >
    readonly highlight: UnnamedSlot<
      Capability<
        'Container',
        readonly [
          Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
        ]
      >,
      readonly EventName[],
      readonly AttributeName[],
      readonly RequirementName[],
      boolean
    >
  }>,
  {}
>

Recipes.NestedMenu

const · packages/mixins-ui/src/recipes/nestedMenu.ts:10

const NestedMenu: SlotRecipe<
  Contract<{
    readonly sub: UnnamedSlot<
      Capability<
        'Container',
        readonly [
          Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
        ]
      >,
      readonly EventName[],
      readonly AttributeName[],
      readonly RequirementName[],
      boolean
    >
    readonly label: UnnamedSlot<
      Capability<
        'Container',
        readonly [
          Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
        ]
      >,
      readonly EventName[],
      readonly AttributeName[],
      readonly RequirementName[],
      boolean
    >
    readonly chevron: UnnamedSlot<
      Capability<
        'Container',
        readonly [
          Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
        ]
      >,
      readonly EventName[],
      readonly AttributeName[],
      readonly RequirementName[],
      boolean
    >
  }>,
  {}
>

Recipes.NumberField

const · packages/mixins-ui/src/recipes/numberField.ts:30

const NumberField: SlotRecipe<Contract<{ readonly root: UnnamedSlot<Capability<"Container", readonly [Capability<"Interactive", readonly [Capability<"Base", readonly []>]>]>, readonly EventName[], readonly AttributeName[], readonly RequirementName[], boolean>; readonly label: UnnamedSlot<Capability<"Container", readonly [Capability<"Interactive", readonly [Capability<"Base", readonly []>]>]>, readonly EventName[], readonly AttributeName[], readonly RequirementName[], boolean>; readonly group: UnnamedSlot<Capability<"Container", readonly [Capability<"Interactive", readonly [Capability<"Base", readonly []>]>]>, readonly EventName[], readonly AttributeName[], readonly RequirementName[], boolean>; readonly input: UnnamedSlot<Capability<"Focusable", readonly [Capability<"Interactive", readonly [Capability<"Base", readonly []>]>]>, readonly [EventToken<"keydown">], readonly [AttrToken<"role">, AttrToken<"disabled">], readonly RequirementName[], boolean>; readonly decrement: UnnamedSlot<Capability<"Interactive", readonly [Capability<"Base", readonly []>]>, readonly [EventToken<"click">], readonly [AttrToken<"aria-label">, AttrToken<"disabled">], readonly RequirementName[], boolean>; readonly increment: UnnamedSlot<Capability<"Interactive", readonly [Capability<"Base", readonly []>]>, readonly [EventToken<"click">], readonly [AttrToken<"aria-label">, AttrToken<"disabled">], readonly RequirementName[], boolean>; readonly description: UnnamedSlot<Capability<"Container", readonly [Capability<"Interactive" …;

Recipes.OtpField

const · packages/mixins-ui/src/recipes/otpField.ts:15

const OtpField: SlotRecipe<
  Contract<{
    readonly root: UnnamedSlot<
      Capability<
        'Container',
        readonly [
          Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
        ]
      >,
      readonly EventName[],
      readonly AttributeName[],
      readonly RequirementName[],
      boolean
    >
    readonly input: UnnamedSlot<
      Capability<
        'Focusable',
        readonly [
          Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
        ]
      >,
      readonly [EventToken<'input'>],
      readonly [AttrToken<'aria-label'>, AttrToken<'disabled'>],
      readonly RequirementName[],
      boolean
    >
    readonly group: UnnamedSlot<
      Capability<
        'Container',
        readonly [
          Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
        ]
      >,
      readonly EventName[],
      readonly AttributeName[],
      readonly RequirementName[],
      boolean
    >
    readonly cell: UnnamedSlot<
      Capability<
        'Container',
        readonly [
          Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
        ]
      >,
      readonly EventName[],
      readonly AttributeName[],
      readonly RequirementName[],
      boolean
    >
    readonly separator: UnnamedSlot<
      Capability<
        'Container',
        readonly [
          Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
        ]
      >,
      readonly EventName[],
      readonly AttributeName[],
      readonly RequirementName[],
      boolean
    >
  }>,
  {}
>

Recipes.Pagination

const · packages/mixins-ui/src/recipes/pagination.ts:30

const Pagination: SlotRecipe<
  Contract<{
    readonly root: UnnamedSlot<
      Capability<
        'Container',
        readonly [
          Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
        ]
      >,
      readonly EventName[],
      readonly AttributeName[],
      readonly RequirementName[],
      boolean
    >
    readonly prev: UnnamedSlot<
      Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
      readonly EventName[],
      readonly AttributeName[],
      readonly RequirementName[],
      boolean
    >
    readonly next: UnnamedSlot<
      Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
      readonly EventName[],
      readonly AttributeName[],
      readonly RequirementName[],
      boolean
    >
    readonly page: UnnamedSlot<
      Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
      readonly EventName[],
      readonly AttributeName[],
      readonly RequirementName[],
      boolean
    >
    readonly ellipsis: UnnamedSlot<
      Capability<
        'Container',
        readonly [
          Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
        ]
      >,
      readonly EventName[],
      readonly AttributeName[],
      readonly RequirementName[],
      boolean
    >
  }>,
  {}
>

Recipes.PasswordInput

const · packages/mixins-ui/src/recipes/passwordInput.ts:32

const PasswordInput: SlotRecipe<Contract<{ readonly root: UnnamedSlot<Capability<"Container", readonly [Capability<"Interactive", readonly [Capability<"Base", readonly []>]>]>, readonly EventName[], readonly AttributeName[], readonly RequirementName[], boolean>; readonly label: UnnamedSlot<Capability<"Container", readonly [Capability<"Interactive", readonly [Capability<"Base", readonly []>]>]>, readonly EventName[], readonly AttributeName[], readonly RequirementName[], boolean>; readonly group: UnnamedSlot<Capability<"Container", readonly [Capability<"Interactive", readonly [Capability<"Base", readonly []>]>]>, readonly EventName[], readonly AttributeName[], readonly RequirementName[], boolean>; readonly input: UnnamedSlot<Capability<"TextInput", readonly [Capability<"Focusable", readonly [Capability<"Interactive", readonly [Capability<"Base", readonly []>]>]>]>, readonly [EventToken<"input">], readonly [AttrToken<"aria-invalid">, AttrToken<"disabled">, AttrToken<"value">], readonly RequirementName[], boolean>; readonly toggle: UnnamedSlot<Capability<"Interactive", readonly [Capability<"Base", readonly []>]>, readonly [EventToken<"click">], readonly [AttrToken<"aria-label">, AttrToken<"aria-pressed">, AttrToken<"disabled">], readonly RequirementName[], boolean>; readonly description: UnnamedSlot<Capability<"Container", readonly [Capability<"Interactive", readonly [Capability<"Base", readonly []>]>]>, readonly EventName[], readonly AttributeName[], readonly RequirementName[], boolean>; }>, { size: …;

Recipes.Popover

const · packages/mixins-ui/src/recipes/popover.ts:21

const Popover: SlotRecipe<
  Contract<{
    readonly button: UnnamedSlot<
      Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
      readonly [EventToken<'click'>],
      readonly [
        AttrToken<'role'>,
        AttrToken<'aria-expanded'>,
        AttrToken<'aria-disabled'>,
        AttrToken<'disabled'>,
      ],
      readonly RequirementName[],
      boolean
    >
    readonly panel: UnnamedSlot<
      Capability<
        'Container',
        readonly [
          Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
        ]
      >,
      readonly [EventToken<'blur'>],
      readonly AttributeName[],
      readonly RequirementName[],
      boolean
    >
    readonly backdrop: UnnamedSlot<
      Capability<
        'Container',
        readonly [
          Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
        ]
      >,
      readonly [EventToken<'click'>],
      readonly AttributeName[],
      readonly RequirementName[],
      boolean
    >
    readonly arrow: UnnamedSlot<
      Capability<
        'Container',
        readonly [
          Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
        ]
      >,
      readonly EventName[],
      readonly AttributeName[],
      readonly RequirementName[],
      boolean
    >
  }>,
  {
    size: {
      sm: { panel: StyleValue }
      md: { panel: StyleValue }
      lg: { panel: StyleValue }
    }
  }
>

Recipes.Progress

const · packages/mixins-ui/src/recipes/progress.ts:29

const Progress: SlotRecipe<
  Contract<{
    readonly root: UnnamedSlot<
      Capability<
        'Container',
        readonly [
          Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
        ]
      >,
      readonly EventName[],
      readonly AttributeName[],
      readonly RequirementName[],
      boolean
    >
    readonly label: UnnamedSlot<
      Capability<
        'Container',
        readonly [
          Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
        ]
      >,
      readonly EventName[],
      readonly AttributeName[],
      readonly RequirementName[],
      boolean
    >
    readonly track: UnnamedSlot<
      Capability<
        'Container',
        readonly [
          Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
        ]
      >,
      readonly EventName[],
      readonly AttributeName[],
      readonly RequirementName[],
      boolean
    >
    readonly indicator: UnnamedSlot<
      Capability<
        'Container',
        readonly [
          Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
        ]
      >,
      readonly EventName[],
      readonly AttributeName[],
      readonly RequirementName[],
      boolean
    >
  }>,
  {
    shape: {
      bar: { root: StyleValue; track: StyleValue; indicator: StyleValue }
      ring: { root: StyleValue; track: StyleValue; indicator: StyleValue }
    }
  }
>

Recipes.RadioGroup

const · packages/mixins-ui/src/recipes/radio.ts:38

const RadioGroup: SlotRecipe<
  Contract<{
    readonly group: UnnamedSlot<
      Capability<
        'Container',
        readonly [
          Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
        ]
      >,
      readonly EventName[],
      readonly [AttrToken<'role'>],
      readonly RequirementName[],
      boolean
    >
    readonly option: UnnamedSlot<
      Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
      readonly [EventToken<'click'>],
      readonly [
        AttrToken<'role'>,
        AttrToken<'aria-selected'>,
        AttrToken<'disabled'>,
        AttrToken<'aria-disabled'>,
      ],
      readonly RequirementName[],
      boolean
    >
    readonly label: UnnamedSlot<
      Capability<
        'Container',
        readonly [
          Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
        ]
      >,
      readonly EventName[],
      readonly AttributeName[],
      readonly RequirementName[],
      boolean
    >
    readonly description: UnnamedSlot<
      Capability<
        'Container',
        readonly [
          Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
        ]
      >,
      readonly EventName[],
      readonly AttributeName[],
      readonly RequirementName[],
      boolean
    >
    readonly hiddenInput: UnnamedSlot<
      Capability<'Base', readonly []>,
      readonly EventName[],
      readonly [AttrToken<'value'>],
      readonly RequirementName[],
      boolean
    >
  }>,
  {
    tone: { accent: { option: StyleValue }; neutral: { option: StyleValue } }
    size: {
      sm: { option: StyleValue }
      md: { option: StyleValue }
      lg: { option: StyleValue }
    }
  }
>

Recipes.RangeSlider

const · packages/mixins-ui/src/recipes/rangeSlider.ts:32

const RangeSlider: SlotRecipe<
  Contract<{
    readonly root: UnnamedSlot<
      Capability<
        'Container',
        readonly [
          Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
        ]
      >,
      readonly EventName[],
      readonly [AttrToken<'role'>],
      readonly RequirementName[],
      boolean
    >
    readonly label: UnnamedSlot<
      Capability<
        'Container',
        readonly [
          Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
        ]
      >,
      readonly EventName[],
      readonly AttributeName[],
      readonly RequirementName[],
      boolean
    >
    readonly control: UnnamedSlot<
      Capability<
        'Container',
        readonly [
          Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
        ]
      >,
      readonly EventName[],
      readonly AttributeName[],
      readonly RequirementName[],
      boolean
    >
    readonly track: UnnamedSlot<
      Capability<'Base', readonly []>,
      readonly EventName[],
      readonly AttributeName[],
      readonly RequirementName[],
      boolean
    >
    readonly range: UnnamedSlot<
      Capability<'Base', readonly []>,
      readonly EventName[],
      readonly AttributeName[],
      readonly RequirementName[],
      boolean
    >
    readonly thumb: UnnamedSlot<
      Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
      readonly [EventToken<'input'>],
      readonly [
        AttrToken<'aria-label'>,
        AttrToken<'disabled'>,
        AttrToken<'value'>,
      ],
      readonly RequirementName[],
      boolean
    >
  }>,
  {
    tone: { accent: { root: StyleValue }; neutral: { root: StyleValue } }
    size: {
      sm: { root: StyleValue }
      md: { root: StyleValue }
      lg: { root: StyleValue }
    }
  }
>

Recipes.Rating

const · packages/mixins-ui/src/recipes/rating.ts:29

const Rating: SlotRecipe<
  Contract<{
    readonly root: UnnamedSlot<
      Capability<
        'Container',
        readonly [
          Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
        ]
      >,
      readonly EventName[],
      readonly [AttrToken<'role'>],
      readonly RequirementName[],
      boolean
    >
    readonly label: UnnamedSlot<
      Capability<
        'Container',
        readonly [
          Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
        ]
      >,
      readonly EventName[],
      readonly AttributeName[],
      readonly RequirementName[],
      boolean
    >
    readonly star: UnnamedSlot<
      Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
      readonly [EventToken<'change'>],
      readonly [
        AttrToken<'aria-label'>,
        AttrToken<'disabled'>,
        AttrToken<'value'>,
      ],
      readonly RequirementName[],
      boolean
    >
  }>,
  {
    tone: { warning: { star: StyleValue }; accent: { star: StyleValue } }
    size: {
      sm: { root: StyleValue }
      md: { root: StyleValue }
      lg: { root: StyleValue }
    }
  }
>

Recipes.Resizable

const · packages/mixins-ui/src/recipes/resizable.ts:14

const Resizable: SlotRecipe<
  Contract<{
    readonly root: UnnamedSlot<
      Capability<
        'Container',
        readonly [
          Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
        ]
      >,
      readonly EventName[],
      readonly AttributeName[],
      readonly RequirementName[],
      boolean
    >
    readonly first: UnnamedSlot<
      Capability<
        'Container',
        readonly [
          Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
        ]
      >,
      readonly EventName[],
      readonly AttributeName[],
      readonly RequirementName[],
      boolean
    >
    readonly handle: UnnamedSlot<
      Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
      readonly [EventToken<'keydown'>],
      readonly [AttrToken<'role'>, AttrToken<'aria-label'>],
      readonly RequirementName[],
      boolean
    >
    readonly second: UnnamedSlot<
      Capability<
        'Container',
        readonly [
          Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
        ]
      >,
      readonly EventName[],
      readonly AttributeName[],
      readonly RequirementName[],
      boolean
    >
  }>,
  {}
>

Recipes.ScrollArea

const · packages/mixins-ui/src/recipes/scrollArea.ts:23

const ScrollArea: SlotRecipe<
  Contract<{
    readonly viewport: UnnamedSlot<
      Capability<
        'Container',
        readonly [
          Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
        ]
      >,
      readonly EventName[],
      readonly AttributeName[],
      readonly RequirementName[],
      boolean
    >
  }>,
  {
    orientation: {
      vertical: { viewport: StyleValue }
      horizontal: { viewport: StyleValue }
      both: { viewport: StyleValue }
    }
  }
>

Recipes.Segmented

const · packages/mixins-ui/src/recipes/segmented.ts:36

const Segmented: SlotRecipe<
  Contract<{
    readonly group: UnnamedSlot<
      Capability<
        'Container',
        readonly [
          Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
        ]
      >,
      readonly EventName[],
      readonly [AttrToken<'role'>, AttrToken<'aria-label'>],
      readonly RequirementName[],
      boolean
    >
    readonly option: UnnamedSlot<
      Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
      readonly [EventToken<'click'>],
      readonly [
        AttrToken<'aria-pressed'>,
        AttrToken<'disabled'>,
        AttrToken<'aria-disabled'>,
      ],
      readonly RequirementName[],
      boolean
    >
    readonly indicator: UnnamedSlot<
      Capability<
        'Container',
        readonly [
          Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
        ]
      >,
      readonly EventName[],
      readonly AttributeName[],
      readonly RequirementName[],
      boolean
    >
    readonly highlight: UnnamedSlot<
      Capability<
        'Container',
        readonly [
          Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
        ]
      >,
      readonly EventName[],
      readonly AttributeName[],
      readonly RequirementName[],
      boolean
    >
  }>,
  {
    tray: { tray: { group: StyleValue }; plain: { group: StyleValue } }
    size: {
      md: { group: StyleValue; option: StyleValue }
      sm: { group: StyleValue; option: StyleValue }
      xs: { group: StyleValue; option: StyleValue }
    }
  }
>

Recipes.Select

const · packages/mixins-ui/src/recipes/select.ts:20

const Select: SlotRecipe<
  Contract<{
    readonly select: UnnamedSlot<
      Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
      readonly [EventToken<'change'>],
      readonly [
        AttrToken<'aria-label'>,
        AttrToken<'aria-invalid'>,
        AttrToken<'disabled'>,
        AttrToken<'value'>,
      ],
      readonly RequirementName[],
      boolean
    >
    readonly label: UnnamedSlot<
      Capability<
        'Container',
        readonly [
          Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
        ]
      >,
      readonly EventName[],
      readonly AttributeName[],
      readonly RequirementName[],
      boolean
    >
    readonly description: UnnamedSlot<
      Capability<
        'Container',
        readonly [
          Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
        ]
      >,
      readonly EventName[],
      readonly AttributeName[],
      readonly RequirementName[],
      boolean
    >
  }>,
  {
    size: {
      sm: { select: StyleValue }
      md: { select: StyleValue }
      lg: { select: StyleValue }
    }
    variant: { outline: { select: StyleValue }; filled: { select: StyleValue } }
  }
>

Recipes.Separator

const · packages/mixins-ui/src/recipes/separator.ts:10

const Separator: SlotRecipe<
  Contract<{
    readonly rule: UnnamedSlot<
      Capability<
        'Container',
        readonly [
          Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
        ]
      >,
      readonly EventName[],
      readonly AttributeName[],
      readonly RequirementName[],
      boolean
    >
  }>,
  {
    orientation: {
      horizontal: { rule: StyleValue }
      vertical: { rule: StyleValue }
    }
  }
>

Recipes.Sheet

const · packages/mixins-ui/src/recipes/sheet.ts:77

const Sheet: SlotRecipe<Contract<{ readonly dialog: UnnamedSlot<Capability<"Container", readonly [Capability<"Interactive", readonly [Capability<"Base", readonly []>]>]>, readonly [EventToken<"cancel">], readonly [AttrToken<"aria-describedby">], readonly RequirementName[], boolean>; readonly backdrop: UnnamedSlot<Capability<"Container", readonly [Capability<"Interactive", readonly [Capability<"Base", readonly []>]>]>, readonly [EventToken<"click">], readonly AttributeName[], readonly RequirementName[], boolean>; readonly panel: UnnamedSlot<Capability<"Container", readonly [Capability<"Interactive", readonly [Capability<"Base", readonly []>]>]>, readonly EventName[], readonly AttributeName[], readonly RequirementName[], boolean>; readonly title: UnnamedSlot<Capability<"Container", readonly [Capability<"Interactive", readonly [Capability<"Base", readonly []>]>]>, readonly EventName[], readonly AttributeName[], readonly RequirementName[], boolean>; readonly description: UnnamedSlot<Capability<"Container", readonly [Capability<"Interactive", readonly [Capability<"Base", readonly []>]>]>, readonly EventName[], readonly AttributeName[], readonly RequirementName[], boolean>; readonly initialFocus: UnnamedSlot<Capability<"Focusable", readonly [Capability<"Interactive", readonly [Capability<"Base", readonly []>]>]>, readonly EventName[], readonly AttributeName[], readonly RequirementName[], boolean>; readonly closeButton: UnnamedSlot<Capability<"Interactive", readonly [Capability<"Base", readonly  …;

const · packages/mixins-ui/src/recipes/sidebar.ts:25

const Sidebar: SlotRecipe<Contract<{ readonly root: UnnamedSlot<Capability<"Container", readonly [Capability<"Interactive", readonly [Capability<"Base", readonly []>]>]>, readonly EventName[], readonly AttributeName[], readonly RequirementName[], boolean>; readonly toggle: UnnamedSlot<Capability<"Interactive", readonly [Capability<"Base", readonly []>]>, readonly [EventToken<"click">], readonly [AttrToken<"aria-expanded">, AttrToken<"aria-label">], readonly RequirementName[], boolean>; readonly nav: UnnamedSlot<Capability<"Container", readonly [Capability<"Interactive", readonly [Capability<"Base", readonly []>]>]>, readonly EventName[], readonly AttributeName[], readonly RequirementName[], boolean>; readonly section: UnnamedSlot<Capability<"Container", readonly [Capability<"Interactive", readonly [Capability<"Base", readonly []>]>]>, readonly EventName[], readonly AttributeName[], readonly RequirementName[], boolean>; readonly trigger: UnnamedSlot<Capability<"Interactive", readonly [Capability<"Base", readonly []>]>, readonly [EventToken<"click">], readonly [AttrToken<"aria-expanded">], readonly RequirementName[], boolean>; readonly chevron: UnnamedSlot<Capability<"Container", readonly [Capability<"Interactive", readonly [Capability<"Base", readonly []>]>]>, readonly EventName[], readonly AttributeName[], readonly RequirementName[], boolean>; readonly links: UnnamedSlot<Capability<"Container", readonly [Capability<"Interactive", readonly [Capability<"Base", readonly []>]>]>, readonly Event …;

Recipes.Skeleton

const · packages/mixins-ui/src/recipes/skeleton.ts:16

const Skeleton: SlotRecipe<
  Contract<{
    readonly bar: UnnamedSlot<
      Capability<
        'Container',
        readonly [
          Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
        ]
      >,
      readonly EventName[],
      readonly AttributeName[],
      readonly RequirementName[],
      boolean
    >
  }>,
  { shape: { bar: { bar: StyleValue }; circle: { bar: StyleValue } } }
>

Recipes.Slider

const · packages/mixins-ui/src/recipes/slider.ts:35

const Slider: SlotRecipe<
  Contract<{
    readonly root: UnnamedSlot<
      Capability<
        'Container',
        readonly [
          Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
        ]
      >,
      readonly EventName[],
      readonly AttributeName[],
      readonly RequirementName[],
      boolean
    >
    readonly track: UnnamedSlot<
      Capability<
        'Container',
        readonly [
          Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
        ]
      >,
      readonly [EventToken<'pointerdown'>],
      readonly AttributeName[],
      readonly RequirementName[],
      boolean
    >
    readonly filledTrack: UnnamedSlot<
      Capability<'Base', readonly []>,
      readonly EventName[],
      readonly AttributeName[],
      readonly RequirementName[],
      boolean
    >
    readonly thumb: UnnamedSlot<
      Capability<
        'Focusable',
        readonly [
          Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
        ]
      >,
      readonly [EventToken<'pointerdown'>],
      readonly [AttrToken<'role'>],
      readonly RequirementName[],
      boolean
    >
    readonly label: UnnamedSlot<
      Capability<
        'Container',
        readonly [
          Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
        ]
      >,
      readonly EventName[],
      readonly AttributeName[],
      readonly RequirementName[],
      boolean
    >
    readonly hiddenInput: UnnamedSlot<
      Capability<'Base', readonly []>,
      readonly EventName[],
      readonly [AttrToken<'value'>],
      readonly RequirementName[],
      boolean
    >
  }>,
  {
    tone: { accent: { root: StyleValue }; neutral: { root: StyleValue } }
    size: {
      sm: { root: StyleValue }
      md: { root: StyleValue }
      lg: { root: StyleValue }
    }
  }
>

Recipes.Spinner

const · packages/mixins-ui/src/recipes/spinner.ts:15

const Spinner: SlotRecipe<
  Contract<{
    readonly wheel: UnnamedSlot<
      Capability<
        'Container',
        readonly [
          Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
        ]
      >,
      readonly EventName[],
      readonly AttributeName[],
      readonly RequirementName[],
      boolean
    >
  }>,
  { size: { md: { wheel: StyleValue }; sm: { wheel: StyleValue } } }
>

Recipes.Steps

const · packages/mixins-ui/src/recipes/steps.ts:28

const Steps: SlotRecipe<Contract<{ readonly root: UnnamedSlot<Capability<"Container", readonly [Capability<"Interactive", readonly [Capability<"Base", readonly []>]>]>, readonly EventName[], readonly [AttrToken<"aria-label">], readonly RequirementName[], boolean>; readonly item: UnnamedSlot<Capability<"Container", readonly [Capability<"Interactive", readonly [Capability<"Base", readonly []>]>]>, readonly EventName[], readonly AttributeName[], readonly RequirementName[], boolean>; readonly step: UnnamedSlot<Capability<"Container", readonly [Capability<"Interactive", readonly [Capability<"Base", readonly []>]>]>, readonly EventName[], readonly AttributeName[], readonly RequirementName[], boolean>; readonly trigger: UnnamedSlot<Capability<"Interactive", readonly [Capability<"Base", readonly []>]>, readonly [EventToken<"click">], readonly AttributeName[], readonly RequirementName[], boolean>; readonly marker: UnnamedSlot<Capability<"Container", readonly [Capability<"Interactive", readonly [Capability<"Base", readonly []>]>]>, readonly EventName[], readonly AttributeName[], readonly RequirementName[], boolean>; readonly text: UnnamedSlot<Capability<"Container", readonly [Capability<"Interactive", readonly [Capability<"Base", readonly []>]>]>, readonly EventName[], readonly AttributeName[], readonly RequirementName[], boolean>; readonly title: UnnamedSlot<Capability<"Container", readonly [Capability<"Interactive", readonly [Capability<"Base", readonly []>]>]>, readonly EventName[], readonly Att …;

Recipes.Switch

const · packages/mixins-ui/src/recipes/toggle.ts:105

const Switch: SlotRecipe<
  Contract<{
    readonly button: UnnamedSlot<
      Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
      readonly [EventToken<'click'>],
      readonly [
        AttrToken<'role'>,
        AttrToken<'aria-disabled'>,
        AttrToken<'disabled'>,
        AttrToken<'value'>,
      ],
      readonly RequirementName[],
      boolean
    >
    readonly label: UnnamedSlot<
      Capability<
        'Container',
        readonly [
          Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
        ]
      >,
      readonly [EventToken<'click'>],
      readonly AttributeName[],
      readonly RequirementName[],
      boolean
    >
    readonly description: UnnamedSlot<
      Capability<
        'Container',
        readonly [
          Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
        ]
      >,
      readonly EventName[],
      readonly AttributeName[],
      readonly RequirementName[],
      boolean
    >
    readonly hiddenInput: UnnamedSlot<
      Capability<'Base', readonly []>,
      readonly EventName[],
      readonly [AttrToken<'value'>],
      readonly RequirementName[],
      boolean
    >
  }>,
  {
    tone: { accent: { button: StyleValue }; neutral: { button: StyleValue } }
    size: {
      sm: { button: StyleValue }
      md: { button: StyleValue }
      lg: { button: StyleValue }
    }
  }
>

Recipes.Table

const · packages/mixins-ui/src/recipes/table.ts:13

const Table: SlotRecipe<Contract<{ readonly frame: UnnamedSlot<Capability<"Container", readonly [Capability<"Interactive", readonly [Capability<"Base", readonly []>]>]>, readonly EventName[], readonly AttributeName[], readonly RequirementName[], boolean>; readonly highlight: UnnamedSlot<Capability<"Container", readonly [Capability<"Interactive", readonly [Capability<"Base", readonly []>]>]>, readonly EventName[], readonly AttributeName[], readonly RequirementName[], boolean>; readonly root: UnnamedSlot<Capability<"Container", readonly [Capability<"Interactive", readonly [Capability<"Base", readonly []>]>]>, readonly EventName[], readonly AttributeName[], readonly RequirementName[], boolean>; readonly caption: UnnamedSlot<Capability<"Container", readonly [Capability<"Interactive", readonly [Capability<"Base", readonly []>]>]>, readonly EventName[], readonly AttributeName[], readonly RequirementName[], boolean>; readonly head: UnnamedSlot<Capability<"Container", readonly [Capability<"Interactive", readonly [Capability<"Base", readonly []>]>]>, readonly EventName[], readonly AttributeName[], readonly RequirementName[], boolean>; readonly headerRow: UnnamedSlot<Capability<"Container", readonly [Capability<"Interactive", readonly [Capability<"Base", readonly []>]>]>, readonly EventName[], readonly AttributeName[], readonly RequirementName[], boolean>; readonly headerCell: UnnamedSlot<Capability<"Container", readonly [Capability<"Interactive", readonly [Capability<"Base", readonly []>]>]>, read …;

Recipes.Tabs

const · packages/mixins-ui/src/recipes/tabs.ts:44

const Tabs: SlotRecipe<
  Contract<{
    readonly tablist: UnnamedSlot<
      Capability<
        'Container',
        readonly [
          Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
        ]
      >,
      readonly EventName[],
      readonly [AttrToken<'role'>],
      readonly RequirementName[],
      boolean
    >
    readonly tab: UnnamedSlot<
      Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
      readonly [EventToken<'click'>],
      readonly [
        AttrToken<'role'>,
        AttrToken<'aria-selected'>,
        AttrToken<'disabled'>,
        AttrToken<'aria-disabled'>,
      ],
      readonly RequirementName[],
      boolean
    >
    readonly panel: UnnamedSlot<
      Capability<
        'Container',
        readonly [
          Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
        ]
      >,
      readonly EventName[],
      readonly [AttrToken<'role'>],
      readonly RequirementName[],
      boolean
    >
    readonly indicator: UnnamedSlot<
      Capability<
        'Container',
        readonly [
          Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
        ]
      >,
      readonly EventName[],
      readonly AttributeName[],
      readonly RequirementName[],
      boolean
    >
    readonly highlight: UnnamedSlot<
      Capability<
        'Container',
        readonly [
          Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
        ]
      >,
      readonly EventName[],
      readonly AttributeName[],
      readonly RequirementName[],
      boolean
    >
  }>,
  {
    variant: {
      line: { tablist: StyleValue; tab: StyleValue; indicator: StyleValue }
      pill: {
        tablist: StyleValue
        tab: StyleValue
        indicator: StyleValue
        highlight: StyleValue
      }
    }
    size: { sm: { tablist: StyleValue }; md: { tablist: StyleValue } }
  }
>

Recipes.TagsInput

const · packages/mixins-ui/src/recipes/tagsInput.ts:20

const TagsInput: SlotRecipe<Contract<{ readonly root: UnnamedSlot<Capability<"Container", readonly [Capability<"Interactive", readonly [Capability<"Base", readonly []>]>]>, readonly EventName[], readonly AttributeName[], readonly RequirementName[], boolean>; readonly label: UnnamedSlot<Capability<"Container", readonly [Capability<"Interactive", readonly [Capability<"Base", readonly []>]>]>, readonly EventName[], readonly AttributeName[], readonly RequirementName[], boolean>; readonly control: UnnamedSlot<Capability<"Container", readonly [Capability<"Interactive", readonly [Capability<"Base", readonly []>]>]>, readonly EventName[], readonly AttributeName[], readonly RequirementName[], boolean>; readonly list: UnnamedSlot<Capability<"Container", readonly [Capability<"Interactive", readonly [Capability<"Base", readonly []>]>]>, readonly EventName[], readonly AttributeName[], readonly RequirementName[], boolean>; readonly tag: UnnamedSlot<Capability<"Container", readonly [Capability<"Interactive", readonly [Capability<"Base", readonly []>]>]>, readonly EventName[], readonly AttributeName[], readonly RequirementName[], boolean>; readonly remove: UnnamedSlot<Capability<"Interactive", readonly [Capability<"Base", readonly []>]>, readonly [EventToken<"click">], readonly [AttrToken<"aria-label">, AttrToken<"disabled">], readonly RequirementName[], boolean>; readonly input: UnnamedSlot<Capability<"Focusable", readonly [Capability<"Interactive", readonly [Capability<"Base", readonly []>]>]>, readonly [E …;

Recipes.Textarea

const · packages/mixins-ui/src/recipes/field.ts:74

const Textarea: SlotRecipe<
  Contract<{
    readonly textarea: UnnamedSlot<
      Capability<
        'TextInput',
        readonly [
          Capability<
            'Focusable',
            readonly [
              Capability<
                'Interactive',
                readonly [Capability<'Base', readonly []>]
              >,
            ]
          >,
        ]
      >,
      readonly [EventToken<'input'>, EventToken<'focus'>, EventToken<'blur'>],
      readonly [
        AttrToken<'aria-label'>,
        AttrToken<'aria-invalid'>,
        AttrToken<'disabled'>,
        AttrToken<'value'>,
      ],
      readonly RequirementName[],
      boolean
    >
    readonly label: UnnamedSlot<
      Capability<
        'Container',
        readonly [
          Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
        ]
      >,
      readonly EventName[],
      readonly AttributeName[],
      readonly RequirementName[],
      boolean
    >
    readonly description: UnnamedSlot<
      Capability<
        'Container',
        readonly [
          Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
        ]
      >,
      readonly EventName[],
      readonly AttributeName[],
      readonly RequirementName[],
      boolean
    >
  }>,
  {
    size: {
      sm: { textarea: StyleValue }
      md: { textarea: StyleValue }
      lg: { textarea: StyleValue }
    }
    variant: {
      outline: { textarea: StyleValue }
      filled: { textarea: StyleValue }
    }
  }
>

Recipes.Toast

const · packages/mixins-ui/src/recipes/toast.ts:12

const Toast: SlotRecipe<
  Contract<{
    readonly container: UnnamedSlot<
      Capability<
        'Container',
        readonly [
          Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
        ]
      >,
      readonly EventName[],
      readonly [AttrToken<'role'>],
      readonly RequirementName[],
      boolean
    >
    readonly entry: UnnamedSlot<
      Capability<
        'Container',
        readonly [
          Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
        ]
      >,
      readonly EventName[],
      readonly [AttrToken<'role'>],
      readonly RequirementName[],
      boolean
    >
  }>,
  {}
>

Recipes.Tooltip

const · packages/mixins-ui/src/recipes/tooltip.ts:10

const Tooltip: SlotRecipe<
  Contract<{
    readonly trigger: UnnamedSlot<
      Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
      readonly [
        EventToken<'focus'>,
        EventToken<'blur'>,
        EventToken<'pointerdown'>,
      ],
      readonly [
        AttrToken<'role'>,
        AttrToken<'aria-disabled'>,
        AttrToken<'disabled'>,
      ],
      readonly RequirementName[],
      boolean
    >
    readonly panel: UnnamedSlot<
      Capability<
        'Container',
        readonly [
          Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
        ]
      >,
      readonly EventName[],
      readonly [AttrToken<'role'>],
      readonly RequirementName[],
      boolean
    >
  }>,
  {}
>

Recipes.TreeView

const · packages/mixins-ui/src/recipes/treeView.ts:16

const TreeView: SlotRecipe<
  Contract<{
    readonly root: UnnamedSlot<
      Capability<
        'Container',
        readonly [
          Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
        ]
      >,
      readonly [EventToken<'keydown'>],
      readonly [AttrToken<'role'>, AttrToken<'aria-label'>],
      readonly RequirementName[],
      boolean
    >
    readonly item: UnnamedSlot<
      Capability<
        'Focusable',
        readonly [
          Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
        ]
      >,
      readonly [EventToken<'focus'>],
      readonly [
        AttrToken<'role'>,
        AttrToken<'aria-expanded'>,
        AttrToken<'aria-selected'>,
        AttrToken<'aria-disabled'>,
      ],
      readonly RequirementName[],
      boolean
    >
    readonly row: UnnamedSlot<
      Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
      readonly [EventToken<'click'>],
      readonly AttributeName[],
      readonly RequirementName[],
      boolean
    >
    readonly chevron: UnnamedSlot<
      Capability<
        'Container',
        readonly [
          Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
        ]
      >,
      readonly EventName[],
      readonly AttributeName[],
      readonly RequirementName[],
      boolean
    >
    readonly label: UnnamedSlot<
      Capability<
        'Container',
        readonly [
          Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
        ]
      >,
      readonly EventName[],
      readonly AttributeName[],
      readonly RequirementName[],
      boolean
    >
    readonly group: UnnamedSlot<
      Capability<
        'Container',
        readonly [
          Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
        ]
      >,
      readonly EventName[],
      readonly [AttrToken<'role'>],
      readonly RequirementName[],
      boolean
    >
  }>,
  {}
>

Recipes.Typography

const · packages/mixins-ui/src/recipes/typography.ts:26

const Typography: SlotRecipe<
  Contract<{
    readonly text: UnnamedSlot<
      Capability<
        'Container',
        readonly [
          Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
        ]
      >,
      readonly EventName[],
      readonly AttributeName[],
      readonly RequirementName[],
      boolean
    >
  }>,
  {
    level: {
      h1: { text: StyleValue }
      h2: { text: StyleValue }
      h3: { text: StyleValue }
      h4: { text: StyleValue }
      lead: { text: StyleValue }
      body: { text: StyleValue }
      small: { text: StyleValue }
      muted: { text: StyleValue }
      quote: { text: StyleValue }
      display: { text: StyleValue }
      title: { text: StyleValue }
      subtitle: { text: StyleValue }
      caption: { text: StyleValue }
      micro: { text: StyleValue }
      code: { text: StyleValue }
    }
  }
>

Recipes.VirtualList

const · packages/mixins-ui/src/recipes/virtualList.ts:10

const VirtualList: SlotRecipe<
  Contract<{
    readonly root: UnnamedSlot<
      Capability<
        'Container',
        readonly [
          Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
        ]
      >,
      readonly EventName[],
      readonly AttributeName[],
      readonly RequirementName[],
      boolean
    >
    readonly row: UnnamedSlot<
      Capability<
        'Container',
        readonly [
          Capability<'Interactive', readonly [Capability<'Base', readonly []>]>,
        ]
      >,
      readonly EventName[],
      readonly AttributeName[],
      readonly RequirementName[],
      boolean
    >
  }>,
  {}
>