@kovojs/ui

import { Accordion } from "@kovojs/ui/accordion";
const component = Accordion;

const Accordion = component({
  render(props: AccordionProps) {
    const attrs = accordionRootAttributes(accordionState(props));
    const styleAttrs = style.attrs(accordionStyles.root, props.styles?.root);

    return (
      <div
        {...styleAttrs}
        {...passThroughProps(props)}
        data-disabled={attrs['data-disabled']}
        data-orientation={attrs['data-orientation']}
        id={props.id}
      >
        {props.children}
      </div>
    );
  },
});

import { AccordionItem } from "@kovojs/ui/accordion";
const component = AccordionItem;

const AccordionItem = component({
  render(props: AccordionItemProps) {
    const attrs = accordionItemAttributes(accordionItemState(props));
    const styleAttrs = style.attrs(accordionStyles.item, props.styles?.item);

    return (
      <div
        {...styleAttrs}
        {...passThroughProps(props)}
        data-disabled={attrs['data-disabled']}
        data-state={attrs['data-state']}
        open={attrs.open}
      >
        {props.children}
      </div>
    );
  },
});

import { AccordionHeader } from "@kovojs/ui/accordion";
const component = AccordionHeader;

const AccordionHeader = component({
  render(props: AccordionHeaderProps) {
    const attrs = accordionHeaderAttributes({
      ...accordionItemState(props),
      ...(props.level === undefined ? {} : { level: props.level }),
    });
    const styleAttrs = style.attrs(accordionStyles.header, props.styles?.header);

    return (
      <h3
        {...styleAttrs}
        {...passThroughProps(props)}
        aria-level={attrs['aria-level']}
        data-disabled={attrs['data-disabled']}
        data-state={attrs['data-state']}
        role={attrs.role}
      >
        {props.children}
      </h3>
    );
  },
});

import { AccordionTrigger } from "@kovojs/ui/accordion";
const component = AccordionTrigger;

const AccordionTrigger = component({
  render(props: AccordionTriggerProps) {
    const attrs = accordionTriggerAttributes({
      ...accordionItemState(props),
      ...(props.contentId === undefined ? {} : { contentId: props.contentId }),
      ...(props.triggerId === undefined ? {} : { triggerId: props.triggerId }),
    });
    const styleAttrs = style.attrs(accordionStyles.trigger, props.styles?.trigger);

    return (
      <button
        {...styleAttrs}
        {...passThroughProps(props)}
        aria-controls={attrs['aria-controls']}
        aria-expanded={attrs['aria-expanded']}
        data-disabled={attrs['data-disabled']}
        data-state={attrs['data-state']}
        disabled={attrs.disabled}
        id={attrs.id}
        type={attrs.type}
      >
        {props.children}
      </button>
    );
  },
});

import { AccordionContent } from "@kovojs/ui/accordion";
const component = AccordionContent;

const AccordionContent = component({
  render(props: AccordionContentProps) {
    const attrs = accordionContentAttributes({
      ...accordionItemState(props),
      ...(props.contentId === undefined ? {} : { contentId: props.contentId }),
      ...(props.triggerId === undefined ? {} : { triggerId: props.triggerId }),
    });
    const styleAttrs = style.attrs(accordionStyles.content, props.styles?.content);
    const innerStyleAttrs = style.attrs(accordionStyles.contentInner);

    return (
      // Outer div is the grid wrapper that animates height; it keeps the id/role/
      // aria-labelledby/data-state/hidden contract and forwards the reactive
      // data-bind stamps via passThroughProps. The inner div carries the padded
      // content and mirrors data-state so its padding collapses with the row.
      // `hidden` stays on this element for a11y + the gallery contract: the closed
      // panel is correctly removed from the accessibility tree. The StyleX
      // `display:grid` (author rule) overrides the UA `[hidden]{display:none}`, so
      // the grid-rows 0fr<->1fr transition still fires while `hidden` stays true.
      <div
        {...styleAttrs}
        {...passThroughProps(props)}
        aria-labelledby={attrs['aria-labelledby']}
        data-disabled={attrs['data-disabled']}
        data-state={attrs['data-state']}
        hidden={attrs.hidden}
        id={attrs.id}
        role={attrs.role}
      >
        <div
          {...innerStyleAttrs}
          {...bindingProps(props, ['data-state'])}
          data-state={attrs['data-state']}
        >
          {props.children}
        </div>
      </div>
    );
  },
});

import type { AccordionStyleOverrides } from "@kovojs/ui/accordion";
const styles: AccordionStyleOverrides = {};

interface AccordionStyleOverrides {
  content?: style.StyleInput;
  header?: style.StyleInput;
  item?: style.StyleInput;
  root?: style.StyleInput;
  trigger?: style.StyleInput;
}

import type { AccordionStateProps } from "@kovojs/ui/accordion";
const state: AccordionStateProps = {};

interface AccordionStateProps {
  collapsible?: boolean;
  disabled?: boolean;
  orientation?: CollectionOrientation;
  type?: AccordionType;
  value?: AccordionValue;
}

import type { AccordionProps } from "@kovojs/ui/accordion";
const props: AccordionProps = { children: 'Content' };

interface AccordionProps extends AccordionStateProps {
  children?: ComponentChild;
  id?: string;
  styles?: AccordionStyleOverrides;
}

import type { AccordionItemProps } from "@kovojs/ui/accordion";
const props: AccordionItemProps = { itemValue: 'item', children: 'Content' };

interface AccordionItemProps extends AccordionStateProps {
  children?: ComponentChild;
  itemDisabled?: boolean;
  itemValue: string;
  styles?: AccordionStyleOverrides;
}

import type { AccordionHeaderProps } from "@kovojs/ui/accordion";
const props: AccordionHeaderProps = { itemValue: 'item', children: 'Content' };

interface AccordionHeaderProps extends AccordionItemProps {
  level?: number;
}

import type { AccordionTriggerProps } from "@kovojs/ui/accordion";
const props: AccordionTriggerProps = { itemValue: 'item', children: 'Content' };

interface AccordionTriggerProps extends AccordionItemProps {
  contentId?: string;
  triggerId?: string;
}

import type { AccordionContentProps } from "@kovojs/ui/accordion";
const props: AccordionContentProps = { itemValue: 'item', children: 'Content' };

interface AccordionContentProps extends AccordionItemProps {
  contentId?: string;
  triggerId?: string;
}

import { Alert } from "@kovojs/ui/alert";
const component = Alert;

const Alert = component({
  render(props: AlertProps) {
    const attrs = style.attrs(base.root, variants[props.variant ?? 'info'], props.style);
    const titleAttrs = style.attrs(base.title);
    const descriptionAttrs = style.attrs(base.description);

    return (
      <div {...attrs} role={props.role ?? 'status'}>
        {props.title === undefined ? '' : <strong {...titleAttrs}>{props.title}</strong>}
        <div {...descriptionAttrs}>{props.children}</div>
      </div>
    );
  },
});

import type { AlertVariant } from "@kovojs/ui/alert";
const value: AlertVariant = 'info';

type AlertVariant = 'info' | 'success' | 'warning' | 'danger';

import type { AlertProps } from "@kovojs/ui/alert";
const props: AlertProps = { children: 'Content' };

interface AlertProps {
  children?: ComponentChild;
  role?: 'alert' | 'status';
  style?: style.StyleInput;
  title?: string;
  variant?: AlertVariant;
}

import { AlertDialog } from "@kovojs/ui/alert-dialog";
const component = AlertDialog;

const AlertDialog = component({
  render(props: AlertDialogProps) {
    const attrs = alertDialogRootAttributes(alertDialogState(props));
    const styleAttrs = style.attrs(alertDialogStyles.root, props.styles?.root);

    return (
      <div
        {...styleAttrs}
        {...passThroughProps(props)}
        data-disabled={attrs['data-disabled']}
        data-state={attrs['data-state']}
        id={props.id}
      >
        {props.children}
      </div>
    );
  },
});

import { AlertDialogTrigger } from "@kovojs/ui/alert-dialog";
const component = AlertDialogTrigger;

const AlertDialogTrigger = component({
  render(props: AlertDialogTriggerProps) {
    const attrs = alertDialogTriggerAttributes({
      ...alertDialogState(props),
      ...(props.contentId === undefined ? {} : { contentId: props.contentId }),
    });
    const styleAttrs = style.attrs(alertDialogStyles.trigger, props.styles?.trigger);

    return (
      <button
        {...styleAttrs}
        {...passThroughProps(props)}
        aria-controls={attrs['aria-controls']}
        aria-expanded={attrs['aria-expanded']}
        aria-haspopup={attrs['aria-haspopup']}
        command={attrs.command}
        commandfor={attrs.commandfor}
        data-disabled={attrs['data-disabled']}
        data-state={attrs['data-state']}
        disabled={attrs.disabled}
        id={props.id}
        type={attrs.type}
      >
        {props.children}
      </button>
    );
  },
});

import { AlertDialogContent } from "@kovojs/ui/alert-dialog";
const component = AlertDialogContent;

const AlertDialogContent = component({
  render(props: AlertDialogContentProps) {
    const attrs = alertDialogContentAttributes({
      ...alertDialogState(props),
      ...(props.contentId === undefined ? {} : { contentId: props.contentId }),
      ...(props.descriptionId === undefined ? {} : { descriptionId: props.descriptionId }),
      ...(props.titleId === undefined ? {} : { titleId: props.titleId }),
    });
    const styleAttrs = style.attrs(alertDialogStyles.content, props.styles?.content);
    // Top-right "X" affordance. It closes through the native invoker exactly like
    // AlertDialogCancel (command='request-close'/commandfor=contentId); reusing the
    // cancel attributes keeps that wiring in one place. An accessible name is
    // required (rules/accessibility-conformance.md). Backdrop light-dismiss is
    // enabled via `closedby="any"` on the dialog below — it fires a `cancel` event
    // the call site already syncs (same path as Escape); the explicit X / Cancel /
    // Action affordances remain the primary choices.
    const closeAttrs = alertDialogCancelAttributes({
      ...alertDialogState(props),
      ...(props.contentId === undefined ? {} : { contentId: props.contentId }),
    });
    const closeStyleAttrs = style.attrs(alertDialogStyles.close, props.styles?.close);

    return (
      <dialog
        {...styleAttrs}
        {...passThroughProps(props)}
        aria-describedby={attrs['aria-describedby']}
        aria-labelledby={attrs['aria-labelledby']}
        aria-modal={attrs['aria-modal']}
        closedby="any"
        data-state={attrs['data-state']}
        id={attrs.id}
        open={attrs.open}
        role={attrs.role}
      >
        <button
          {...closeStyleAttrs}
          aria-label="Close"
          command={closeAttrs.command}
          commandfor={closeAttrs.commandfor}
          data-disabled={closeAttrs['data-disabled']}
          data-state={closeAttrs['data-state']}
          disabled={closeAttrs.disabled}
          type={closeAttrs.type}
        >
          <X aria-hidden="true" />
        </button>
        {props.children}
      </dialog>
    );
  },
});

import { AlertDialogCancel } from "@kovojs/ui/alert-dialog";
const component = AlertDialogCancel;

const AlertDialogCancel = component({
  render(props: AlertDialogCancelProps) {
    const attrs = alertDialogCancelAttributes({
      ...alertDialogState(props),
      ...(props.autoFocus === undefined ? {} : { autoFocus: props.autoFocus }),
      ...(props.contentId === undefined ? {} : { contentId: props.contentId }),
    });
    const styleAttrs = style.attrs(alertDialogStyles.cancel, props.styles?.cancel);

    return (
      <button
        {...styleAttrs}
        {...passThroughProps(props)}
        autofocus={attrs.autofocus}
        command={attrs.command}
        commandfor={attrs.commandfor}
        data-disabled={attrs['data-disabled']}
        data-intent={attrs['data-intent']}
        data-state={attrs['data-state']}
        disabled={attrs.disabled}
        id={props.id}
        type={attrs.type}
      >
        {props.children ?? 'Cancel'}
      </button>
    );
  },
});

import { AlertDialogAction } from "@kovojs/ui/alert-dialog";
const component = AlertDialogAction;

const AlertDialogAction = component({
  render(props: AlertDialogActionProps) {
    const attrs = alertDialogActionAttributes({
      ...alertDialogState(props),
      ...(props.contentId === undefined ? {} : { contentId: props.contentId }),
      ...(props.intent === undefined ? {} : { intent: props.intent }),
    });
    const styleAttrs = style.attrs(alertDialogStyles.action, props.styles?.action);

    return (
      <button
        {...styleAttrs}
        {...passThroughProps(props)}
        command={attrs.command}
        commandfor={attrs.commandfor}
        data-disabled={attrs['data-disabled']}
        data-intent={attrs['data-intent']}
        data-state={attrs['data-state']}
        disabled={attrs.disabled}
        id={props.id}
        type={attrs.type}
      >
        {props.children}
      </button>
    );
  },
});

import { AlertDialogHeader } from "@kovojs/ui/alert-dialog";
const component = AlertDialogHeader;

const AlertDialogHeader = component({
  render(props: AlertDialogPartProps) {
    const styleAttrs = style.attrs(alertDialogStyles.header, props.styles?.header);
    return (
      <div {...styleAttrs} {...passThroughProps(props)} id={props.id}>
        {props.children}
      </div>
    );
  },
});

import { AlertDialogTitle } from "@kovojs/ui/alert-dialog";
const component = AlertDialogTitle;

const AlertDialogTitle = component({
  render(props: AlertDialogPartProps) {
    const styleAttrs = style.attrs(alertDialogStyles.title, props.styles?.title);
    return (
      <h2 {...styleAttrs} {...passThroughProps(props)} id={props.id}>
        {props.children}
      </h2>
    );
  },
});

import { AlertDialogDescription } from "@kovojs/ui/alert-dialog";
const component = AlertDialogDescription;

const AlertDialogDescription = component({
  render(props: AlertDialogPartProps) {
    const styleAttrs = style.attrs(alertDialogStyles.description, props.styles?.description);
    return (
      <p {...styleAttrs} {...passThroughProps(props)} id={props.id}>
        {props.children}
      </p>
    );
  },
});

import { AlertDialogFooter } from "@kovojs/ui/alert-dialog";
const component = AlertDialogFooter;

const AlertDialogFooter = component({
  render(props: AlertDialogPartProps) {
    const styleAttrs = style.attrs(alertDialogStyles.footer, props.styles?.footer);
    return (
      <div {...styleAttrs} {...passThroughProps(props)} id={props.id}>
        {props.children}
      </div>
    );
  },
});

import type { AlertDialogStyleOverrides } from "@kovojs/ui/alert-dialog";
const styles: AlertDialogStyleOverrides = {};

interface AlertDialogStyleOverrides {
  action?: style.StyleInput;
  cancel?: style.StyleInput;
  close?: style.StyleInput;
  content?: style.StyleInput;
  description?: style.StyleInput;
  footer?: style.StyleInput;
  header?: style.StyleInput;
  root?: style.StyleInput;
  title?: style.StyleInput;
  trigger?: style.StyleInput;
}

import type { AlertDialogStateProps } from "@kovojs/ui/alert-dialog";
const state: AlertDialogStateProps = {};

interface AlertDialogStateProps {
  disabled?: boolean;
  open?: boolean;
}

import type { AlertDialogProps } from "@kovojs/ui/alert-dialog";
const props: AlertDialogProps = { children: 'Content' };

interface AlertDialogProps extends AlertDialogStateProps {
  children?: ComponentChild;
  id?: string;
  styles?: AlertDialogStyleOverrides;
}

import type { AlertDialogTriggerProps } from "@kovojs/ui/alert-dialog";
const props: AlertDialogTriggerProps = { children: 'Content' };

interface AlertDialogTriggerProps extends AlertDialogStateProps {
  children?: ComponentChild;
  contentId?: string;
  id?: string;
  styles?: AlertDialogStyleOverrides;
}

import type { AlertDialogContentProps } from "@kovojs/ui/alert-dialog";
const props: AlertDialogContentProps = { children: 'Content' };

interface AlertDialogContentProps extends AlertDialogStateProps {
  children?: ComponentChild;
  contentId?: string;
  descriptionId?: string;
  styles?: AlertDialogStyleOverrides;
  titleId?: string;
}

import type { AlertDialogCancelProps } from "@kovojs/ui/alert-dialog";
const props: AlertDialogCancelProps = { children: 'Content' };

interface AlertDialogCancelProps extends AlertDialogStateProps {
  autoFocus?: boolean;
  children?: ComponentChild;
  contentId?: string;
  id?: string;
  styles?: AlertDialogStyleOverrides;
}

import type { AlertDialogActionProps } from "@kovojs/ui/alert-dialog";
const props: AlertDialogActionProps = { children: 'Content' };

interface AlertDialogActionProps extends AlertDialogStateProps {
  children?: ComponentChild;
  contentId?: string;
  id?: string;
  intent?: AlertDialogActionIntent;
  styles?: AlertDialogStyleOverrides;
}

import type { AlertDialogPartProps } from "@kovojs/ui/alert-dialog";
const props: AlertDialogPartProps = { children: 'Content' };

interface AlertDialogPartProps {
  children?: ComponentChild;
  id?: string;
  styles?: AlertDialogStyleOverrides;
}

import { Autocomplete } from "@kovojs/ui/autocomplete";
const component = Autocomplete;

const Autocomplete = component({
  render(props: AutocompleteProps) {
    const attrs = autocompleteRootAttributes({
      ...(props.disabled === undefined ? {} : { disabled: props.disabled }),
      ...(props.form === undefined ? {} : { form: props.form }),
      ...(props.highlightedValue === undefined ? {} : { highlightedValue: props.highlightedValue }),
      ...(props.id === undefined ? {} : { id: props.id }),
      ...(props.inputValue === undefined ? {} : { inputValue: props.inputValue }),
      ...(props.invalid === undefined ? {} : { invalid: props.invalid }),
      ...(props.items === undefined ? {} : { items: props.items }),
      ...(props.listId === undefined ? {} : { listId: props.listId }),
      ...(props.name === undefined ? {} : { name: props.name }),
      ...(props.open === undefined ? {} : { open: props.open }),
      ...(props.placeholder === undefined ? {} : { placeholder: props.placeholder }),
      ...(props.required === undefined ? {} : { required: props.required }),
      ...(props.value === undefined ? {} : { value: props.value }),
    });
    const styleAttrs = style.attrs(autocompleteStyles.root, props.styles?.root);

    return (
      <div
        {...styleAttrs}
        {...passThroughProps(props)}
        data-disabled={attrs['data-disabled']}
        data-invalid={attrs['data-invalid']}
        data-placeholder={attrs['data-placeholder']}
        data-required={attrs['data-required']}
        data-state={attrs['data-state']}
        id={attrs.id}
      >
        {props.children}
      </div>
    );
  },
});

import { AutocompleteInput } from "@kovojs/ui/autocomplete";
const component = AutocompleteInput;

const AutocompleteInput = component({
  render(props: AutocompleteInputProps) {
    const attrs = autocompleteInputAttributes({
      ...(props.autocomplete === undefined ? {} : { autocomplete: props.autocomplete }),
      ...(props.descriptionId === undefined ? {} : { descriptionId: props.descriptionId }),
      ...(props.disabled === undefined ? {} : { disabled: props.disabled }),
      ...(props.errorId === undefined ? {} : { errorId: props.errorId }),
      ...(props.form === undefined ? {} : { form: props.form }),
      ...(props.highlightedValue === undefined ? {} : { highlightedValue: props.highlightedValue }),
      ...(props.id === undefined ? {} : { id: props.id }),
      ...(props.inputValue === undefined ? {} : { inputValue: props.inputValue }),
      ...(props.invalid === undefined ? {} : { invalid: props.invalid }),
      ...(props.items === undefined ? {} : { items: props.items }),
      ...(props.labelledBy === undefined ? {} : { labelledBy: props.labelledBy }),
      ...(props.listId === undefined ? {} : { listId: props.listId }),
      ...(props.name === undefined ? {} : { name: props.name }),
      ...(props.open === undefined ? {} : { open: props.open }),
      ...(props.placeholder === undefined ? {} : { placeholder: props.placeholder }),
      ...(props.required === undefined ? {} : { required: props.required }),
      ...(props.value === undefined ? {} : { value: props.value }),
    });
    const styleAttrs = style.attrs(autocompleteStyles.input, props.styles?.input);

    return (
      <input
        {...styleAttrs}
        {...passThroughProps(props)}
        aria-activedescendant={attrs['aria-activedescendant']}
        aria-autocomplete={attrs['aria-autocomplete']}
        aria-controls={attrs['aria-controls']}
        aria-describedby={attrs['aria-describedby']}
        aria-expanded={attrs['aria-expanded']}
        aria-invalid={attrs['aria-invalid']}
        aria-labelledby={attrs['aria-labelledby']}
        autocomplete={attrs.autocomplete}
        data-disabled={attrs['data-disabled']}
        data-invalid={attrs['data-invalid']}
        data-placeholder={attrs['data-placeholder']}
        data-required={attrs['data-required']}
        data-state={attrs['data-state']}
        disabled={attrs.disabled}
        form={attrs.form}
        id={attrs.id}
        list={attrs.list}
        name={attrs.name}
        placeholder={attrs.placeholder}
        required={attrs.required}
        role={attrs.role}
        type={attrs.type}
        value={attrs.value}
      />
    );
  },
});

import { AutocompleteList } from "@kovojs/ui/autocomplete";
const component = AutocompleteList;

const AutocompleteList = component({
  render(props: AutocompleteListProps) {
    const attrs = autocompleteListAttributes({
      ...(props.disabled === undefined ? {} : { disabled: props.disabled }),
      ...(props.form === undefined ? {} : { form: props.form }),
      ...(props.highlightedValue === undefined ? {} : { highlightedValue: props.highlightedValue }),
      ...(props.id === undefined ? {} : { id: props.id }),
      ...(props.inputValue === undefined ? {} : { inputValue: props.inputValue }),
      ...(props.invalid === undefined ? {} : { invalid: props.invalid }),
      ...(props.items === undefined ? {} : { items: props.items }),
      ...(props.labelledBy === undefined ? {} : { labelledBy: props.labelledBy }),
      ...(props.listId === undefined ? {} : { listId: props.listId }),
      ...(props.name === undefined ? {} : { name: props.name }),
      ...(props.open === undefined ? {} : { open: props.open }),
      ...(props.placeholder === undefined ? {} : { placeholder: props.placeholder }),
      ...(props.required === undefined ? {} : { required: props.required }),
      ...(props.value === undefined ? {} : { value: props.value }),
    });
    const styleAttrs = style.attrs(autocompleteStyles.list, props.styles?.list);

    return (
      <div
        {...styleAttrs}
        {...passThroughProps(props)}
        aria-labelledby={attrs['aria-labelledby']}
        data-disabled={attrs['data-disabled']}
        data-invalid={attrs['data-invalid']}
        data-placeholder={attrs['data-placeholder']}
        data-required={attrs['data-required']}
        data-state={attrs['data-state']}
        hidden={attrs.hidden}
        id={attrs.id}
        role={attrs.role}
      >
        {props.children}
      </div>
    );
  },
});

import { AutocompleteOption } from "@kovojs/ui/autocomplete";
const component = AutocompleteOption;

const AutocompleteOption = component({
  render(props: AutocompleteOptionProps) {
    const attrs = autocompleteOptionAttributes({
      ...(props.disabled === undefined ? {} : { disabled: props.disabled }),
      ...(props.form === undefined ? {} : { form: props.form }),
      ...(props.highlightedValue === undefined ? {} : { highlightedValue: props.highlightedValue }),
      ...(props.id === undefined ? {} : { id: props.id }),
      ...(props.inputValue === undefined ? {} : { inputValue: props.inputValue }),
      ...(props.invalid === undefined ? {} : { invalid: props.invalid }),
      ...(props.itemDisabled === undefined ? {} : { itemDisabled: props.itemDisabled }),
      ...(props.itemLabel === undefined ? {} : { itemLabel: props.itemLabel }),
      ...(props.items === undefined ? {} : { items: props.items }),
      itemValue: props.itemValue,
      ...(props.listId === undefined ? {} : { listId: props.listId }),
      ...(props.name === undefined ? {} : { name: props.name }),
      ...(props.open === undefined ? {} : { open: props.open }),
      ...(props.placeholder === undefined ? {} : { placeholder: props.placeholder }),
      ...(props.required === undefined ? {} : { required: props.required }),
      ...(props.value === undefined ? {} : { value: props.value }),
    });
    const styleAttrs = style.attrs(autocompleteStyles.option, props.styles?.option);

    return (
      <div
        {...styleAttrs}
        {...passThroughProps(props)}
        aria-disabled={attrs['aria-disabled']}
        aria-selected={attrs['aria-selected']}
        data-disabled={attrs['data-disabled']}
        data-highlighted={attrs['data-highlighted']}
        data-state={attrs['data-state']}
        id={attrs.id}
        label={attrs.label}
        role={attrs.role}
        value={attrs.value}
      >
        {props.children ?? props.itemLabel ?? props.itemValue ?? ''}
      </div>
    );
  },
});

import { AutocompleteValue } from "@kovojs/ui/autocomplete";
const component = AutocompleteValue;

const AutocompleteValue = component({
  render(props: AutocompleteValueProps) {
    const attrs = autocompleteValueAttributes({
      ...(props.disabled === undefined ? {} : { disabled: props.disabled }),
      ...(props.form === undefined ? {} : { form: props.form }),
      ...(props.highlightedValue === undefined ? {} : { highlightedValue: props.highlightedValue }),
      ...(props.id === undefined ? {} : { id: props.id }),
      ...(props.inputValue === undefined ? {} : { inputValue: props.inputValue }),
      ...(props.invalid === undefined ? {} : { invalid: props.invalid }),
      ...(props.items === undefined ? {} : { items: props.items }),
      ...(props.listId === undefined ? {} : { listId: props.listId }),
      ...(props.name === undefined ? {} : { name: props.name }),
      ...(props.open === undefined ? {} : { open: props.open }),
      ...(props.placeholder === undefined ? {} : { placeholder: props.placeholder }),
      ...(props.required === undefined ? {} : { required: props.required }),
      ...(props.value === undefined ? {} : { value: props.value }),
    });
    const styleAttrs = style.attrs(autocompleteStyles.value, props.styles?.value);

    return (
      <span
        {...styleAttrs}
        {...passThroughProps(props)}
        data-placeholder={attrs['data-placeholder']}
        id={attrs.id}
      >
        {autocompleteValueText(props)}
      </span>
    );
  },
});

import type { AutocompleteStyleOverrides } from "@kovojs/ui/autocomplete";
const styles: AutocompleteStyleOverrides = {};

interface AutocompleteStyleOverrides {
  input?: style.StyleInput;
  list?: style.StyleInput;
  option?: style.StyleInput;
  root?: style.StyleInput;
  value?: style.StyleInput;
}

import type { AutocompleteStateProps } from "@kovojs/ui/autocomplete";
const state: AutocompleteStateProps = {};

interface AutocompleteStateProps {
  disabled?: boolean;
  form?: string;
  highlightedValue?: string;
  inputValue?: string;
  invalid?: boolean;
  items?: readonly HeadlessAutocompleteItem[];
  listId?: string;
  name?: string;
  open?: boolean;
  placeholder?: string;
  required?: boolean;
  value?: string;
}

import type { AutocompleteProps } from "@kovojs/ui/autocomplete";
const props: AutocompleteProps = { children: 'Content' };

interface AutocompleteProps extends AutocompleteStateProps {
  children?: ComponentChild;
  id?: string;
  styles?: AutocompleteStyleOverrides;
}

import type { AutocompleteInputProps } from "@kovojs/ui/autocomplete";
const props: AutocompleteInputProps = {};

interface AutocompleteInputProps extends AutocompleteStateProps {
  autocomplete?: string;
  descriptionId?: string;
  errorId?: string;
  id?: string;
  labelledBy?: string;
  styles?: AutocompleteStyleOverrides;
}

import type { AutocompleteListProps } from "@kovojs/ui/autocomplete";
const props: AutocompleteListProps = { children: 'Content' };

interface AutocompleteListProps extends AutocompleteStateProps {
  children?: ComponentChild;
  id?: string;
  labelledBy?: string;
  styles?: AutocompleteStyleOverrides;
}

import type { AutocompleteOptionProps } from "@kovojs/ui/autocomplete";
const props: AutocompleteOptionProps = { itemValue: 'item', children: 'Content' };

interface AutocompleteOptionProps extends AutocompleteStateProps {
  children?: ComponentChild;
  id?: string;
  itemDisabled?: boolean;
  itemLabel?: string;
  itemValue: string;
  styles?: AutocompleteStyleOverrides;
}

import type { AutocompleteValueProps } from "@kovojs/ui/autocomplete";
const props: AutocompleteValueProps = {};

interface AutocompleteValueProps extends AutocompleteStateProps {
  id?: string;
  styles?: AutocompleteStyleOverrides;
}

import { Avatar } from "@kovojs/ui/avatar";
const component = Avatar;

const Avatar = component({
  render(props: AvatarProps) {
    const attrs = avatarRootAttributes({
      ...(props.label === undefined ? {} : { label: props.label }),
      ...(props.src === undefined ? {} : { src: props.src }),
      ...(props.status === undefined ? {} : { status: props.status }),
    });
    const styleAttrs = style.attrs(avatarStyles.root, props.styles?.root);

    return (
      <span
        {...styleAttrs}
        {...passThroughProps(props)}
        aria-label={attrs['aria-label']}
        data-state={attrs['data-state']}
        id={props.id}
        role={attrs.role}
      >
        {props.children}
      </span>
    );
  },
});

import { AvatarImage } from "@kovojs/ui/avatar";
const component = AvatarImage;

const AvatarImage = component({
  render(props: AvatarImageProps) {
    const attrs = avatarImageAttributes({
      alt: props.alt,
      ...(props.decoding === undefined ? {} : { decoding: props.decoding }),
      ...(props.loading === undefined ? {} : { loading: props.loading }),
      referrerPolicy: 'no-referrer',
      ...(props.sizes === undefined ? {} : { sizes: props.sizes }),
      src: props.src,
      ...(props.status === undefined ? {} : { status: props.status }),
    });
    return (
      <img
        {...styleAttributes(avatarStyles.image, props.styles?.image)}
        alt={attrs.alt}
        data-state={attrs['data-state']}
        decoding={attrs.decoding}
        hidden={attrs.hidden}
        loading={attrs.loading}
        referrerpolicy="no-referrer"
        sizes={attrs.sizes}
        src={trustedUrl(props.src, {
          reason: 'caller-selected avatar image',
          source: '@kovojs/ui/avatar',
        })}
      />
    );
  },
});

import { AvatarFallback } from "@kovojs/ui/avatar";
const component = AvatarFallback;

const AvatarFallback = component({
  render(props: AvatarFallbackProps) {
    const attrs = avatarFallbackAttributes({
      ...(props.delayMs === undefined ? {} : { delayMs: props.delayMs }),
      ...(props.src === undefined ? {} : { src: props.src }),
      ...(props.status === undefined ? {} : { status: props.status }),
    });
    const styleAttrs = style.attrs(avatarStyles.fallback, props.styles?.fallback);

    return (
      <span
        {...styleAttrs}
        {...passThroughProps(props)}
        data-delay={attrs['data-delay']}
        data-state={attrs['data-state']}
        hidden={attrs.hidden}
      >
        {props.children}
      </span>
    );
  },
});

import type { AvatarStyleOverrides } from "@kovojs/ui/avatar";
const styles: AvatarStyleOverrides = {};

interface AvatarStyleOverrides {
  fallback?: style.StyleInput;
  image?: style.StyleInput;
  root?: style.StyleInput;
}

import type { AvatarStateProps } from "@kovojs/ui/avatar";
const state: AvatarStateProps = {};

interface AvatarStateProps {
  src?: string;
  status?: AvatarImageStatus;
}

import type { AvatarProps } from "@kovojs/ui/avatar";
const props: AvatarProps = { children: 'Content' };

interface AvatarProps extends AvatarStateProps {
  children?: ComponentChild;
  id?: string;
  label?: string;
  styles?: AvatarStyleOverrides;
}

import type { AvatarImageProps } from "@kovojs/ui/avatar";
const props: AvatarImageProps = { alt: 'Profile photo', src: '/avatar.png' };

interface AvatarImageProps extends AvatarStateProps {
  alt: string;
  decoding?: 'async' | 'auto' | 'sync';
  loading?: 'eager' | 'lazy';
  sizes?: string;
  src: string;
  styles?: AvatarStyleOverrides;
}

import type { AvatarFallbackProps } from "@kovojs/ui/avatar";
const props: AvatarFallbackProps = { children: 'Content' };

interface AvatarFallbackProps extends AvatarStateProps {
  children?: ComponentChild;
  delayMs?: number;
  styles?: AvatarStyleOverrides;
}

import { Badge } from "@kovojs/ui/badge";
const component = Badge;

const Badge = component({
  render(props: BadgeProps) {
    const attrs = style.attrs(base.root, variants[props.variant ?? 'neutral'], props.style);

    // SPEC.md §4.5/§5.2: the @kovojs/server JSX runtime escapes scalar text
    // children exactly once, so pass the raw value — pre-escaping here would
    // double-escape (`AT&T` → `AT&T`).
    return <span {...attrs}>{props.children ?? ''}</span>;
  },
});

import type { BadgeVariant } from "@kovojs/ui/badge";
const value: BadgeVariant = 'neutral';

type BadgeVariant = 'neutral' | 'success' | 'warning' | 'destructive' | 'outline';

import type { BadgeProps } from "@kovojs/ui/badge";
const props: BadgeProps = { children: 'Content' };

interface BadgeProps {
  children?: ComponentChild;
  style?: style.StyleInput;
  variant?: BadgeVariant;
}

import { Breadcrumb } from "@kovojs/ui/breadcrumb";
const component = Breadcrumb;

const Breadcrumb = component({
  render(props: BreadcrumbProps) {
    const rootAttrs = style.attrs(breadcrumbStyles.root, props.styles?.root);
    const listAttrs = style.attrs(breadcrumbStyles.list, props.styles?.list);

    return (
      <nav {...rootAttrs} aria-label={props.label ?? 'Breadcrumb'}>
        <ol {...listAttrs}>{props.children}</ol>
      </nav>
    );
  },
});

import { BreadcrumbItem } from "@kovojs/ui/breadcrumb";
const component = BreadcrumbItem;

const BreadcrumbItem = component({
  render(props: BreadcrumbPartProps) {
    const attrs = style.attrs(breadcrumbStyles.item, props.styles?.item);

    return <li {...attrs}>{props.children}</li>;
  },
});

import { BreadcrumbLink } from "@kovojs/ui/breadcrumb";
const component = BreadcrumbLink;

const BreadcrumbLink = component({
  render(props: BreadcrumbLinkProps) {
    const current = props.current === true;

    return (
      <a
        {...styleAttributes(
          current ? breadcrumbStyles.current : breadcrumbStyles.link,
          current ? props.styles?.current : props.styles?.link,
        )}
        {...passThroughProps(props)}
        aria-current={current ? 'page' : undefined}
        // SECURITY_FINDINGS.md H3: route the caller href through safeUrl so a
        // `javascript:`/`data:` scheme is neutralized; keep the existing
        // undefined semantics (omit href entirely when there is none / current).
        href={current || props.href === undefined ? undefined : safeUrl(props.href)}
      >
        {props.children}
      </a>
    );
  },
});

import { BreadcrumbSeparator } from "@kovojs/ui/breadcrumb";
const component = BreadcrumbSeparator;

const BreadcrumbSeparator = component({
  render(props: BreadcrumbPartProps) {
    const attrs = separatorRootAttributes();
    const hasText = props.children !== undefined;
    const styleAttrs = style.attrs(
      breadcrumbStyles.separator,
      hasText ? breadcrumbStyles.separatorText : undefined,
      props.styles?.separator,
    );

    return (
      <li
        {...styleAttrs}
        {...passThroughProps(props)}
        aria-hidden="true"
        data-orientation={attrs['data-orientation']}
        role={attrs.role}
      >
        {props.children}
      </li>
    );
  },
});

import type { BreadcrumbStyleOverrides } from "@kovojs/ui/breadcrumb";
const styles: BreadcrumbStyleOverrides = {};

interface BreadcrumbStyleOverrides {
  current?: style.StyleInput;
  item?: style.StyleInput;
  link?: style.StyleInput;
  list?: style.StyleInput;
  root?: style.StyleInput;
  separator?: style.StyleInput;
}

import type { BreadcrumbProps } from "@kovojs/ui/breadcrumb";
const props: BreadcrumbProps = { children: 'Content' };

interface BreadcrumbProps {
  children?: ComponentChild;
  label?: string;
  styles?: BreadcrumbStyleOverrides;
}

import type { BreadcrumbPartProps } from "@kovojs/ui/breadcrumb";
const props: BreadcrumbPartProps = { children: 'Content' };

interface BreadcrumbPartProps {
  children?: ComponentChild;
  styles?: BreadcrumbStyleOverrides;
}

import type { BreadcrumbLinkProps } from "@kovojs/ui/breadcrumb";
const props: BreadcrumbLinkProps = { children: 'Content' };

interface BreadcrumbLinkProps extends BreadcrumbPartProps {
  current?: boolean;
  href?: string | TrustedUrl;
}

import { Button } from "@kovojs/ui/button";
const component = Button;

const Button = component({
  render(props: ButtonProps) {
    const attrs = style.attrs(
      base.root,
      sizes[props.size ?? 'md'],
      variants[props.variant ?? 'primary'],
      props.style,
    );

    return (
      <button
        {...attrs}
        {...passThroughProps(props)}
        disabled={props.disabled}
        form={props.form}
        name={props.name}
        type={props.type ?? 'button'}
        value={props.value}
      >
        {props.children}
      </button>
    );
  },
});

import type { ButtonVariant } from "@kovojs/ui/button";
const value: ButtonVariant = 'primary';

type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'destructive' | 'outline';

import type { ButtonSize } from "@kovojs/ui/button";
const value: ButtonSize = 'md';

type ButtonSize = 'sm' | 'md';

import type { ButtonProps } from "@kovojs/ui/button";
const props: ButtonProps = { children: 'Content' };

interface ButtonProps {
  children?: ComponentChild;
  disabled?: boolean;
  form?: string;
  name?: string;
  size?: ButtonSize;
  style?: style.StyleInput;
  type?: 'button' | 'submit' | 'reset';
  value?: string;
  variant?: ButtonVariant;
}

import { Card } from "@kovojs/ui/card";
const component = Card;

const Card = component({
  render(props: CardProps) {
    const attrs = style.attrs(cardStyles.root, props.style);

    return <section {...attrs}>{props.children}</section>;
  },
});

import { CardHeader } from "@kovojs/ui/card";
const component = CardHeader;

const CardHeader = component({
  render(props: CardHeaderProps) {
    return <div {...style.attrs(cardStyles.header, props.style)}>{props.children}</div>;
  },
});

import { CardTitle } from "@kovojs/ui/card";
const component = CardTitle;

const CardTitle = component({
  render(props: CardTitleProps) {
    return <h3 {...style.attrs(cardStyles.title, props.style)}>{props.children}</h3>;
  },
});

import { CardDescription } from "@kovojs/ui/card";
const component = CardDescription;

const CardDescription = component({
  render(props: CardDescriptionProps) {
    return <p {...style.attrs(cardStyles.description, props.style)}>{props.children}</p>;
  },
});

import { CardContent } from "@kovojs/ui/card";
const component = CardContent;

const CardContent = component({
  render(props: CardContentProps) {
    return <div {...style.attrs(cardStyles.content, props.style)}>{props.children}</div>;
  },
});

import { CardFooter } from "@kovojs/ui/card";
const component = CardFooter;

const CardFooter = component({
  render(props: CardFooterProps) {
    return <footer {...style.attrs(cardStyles.footer, props.style)}>{props.children}</footer>;
  },
});

import type { CardProps } from "@kovojs/ui/card";
const props: CardProps = { children: 'Content' };

interface CardProps {
  children?: ComponentChild;
  style?: style.StyleInput;
}

interface CardHeaderProps extends CardProps {}

interface CardTitleProps extends CardProps {}

interface CardDescriptionProps extends CardProps {}

interface CardContentProps extends CardProps {}

interface CardFooterProps extends CardProps {}

import { Checkbox } from "@kovojs/ui/checkbox";
const component = Checkbox;

const Checkbox = component({
  render(props: CheckboxProps) {
    const attrs = checkboxRootAttributes({
      checked: props.checked ?? false,
      ...(props.disabled === undefined ? {} : { disabled: props.disabled }),
      ...(props.name === undefined ? {} : { name: props.name }),
      ...(props.required === undefined ? {} : { required: props.required }),
      ...(props.value === undefined ? {} : { value: props.value }),
    });
    const rootStyleAttrs = style.attrs(checkboxStyles.root, props.styles?.root);
    const inputStyleAttrs = style.attrs(checkboxStyles.input, props.styles?.input);
    const boxStyleAttrs = style.attrs(checkboxStyles.box, props.styles?.box);

    return (
      <label
        {...rootStyleAttrs}
        {...passThroughProps(props, { events: false, bindings: false })}
        {...bindingProps(props, ['data-state'])}
        data-disabled={attrs['data-disabled']}
        data-state={attrs['data-state']}
      >
        <span
          {...boxStyleAttrs}
          {...bindingProps(props, ['data-state'])}
          data-state={attrs['data-state']}
        >
          <input
            {...inputStyleAttrs}
            {...passThroughProps(props, { island: false })}
            aria-checked={attrs['aria-checked']}
            aria-describedby={props.describedBy}
            aria-labelledby={props.labelledBy}
            checked={attrs.checked}
            data-disabled={attrs['data-disabled']}
            data-state={attrs['data-state']}
            disabled={attrs.disabled}
            form={props.form}
            id={props.id}
            name={attrs.name}
            required={attrs.required}
            type={attrs.type}
            value={attrs.value}
          />
        </span>
        {props.children}
      </label>
    );
  },
});

import type { CheckboxStyleOverrides } from "@kovojs/ui/checkbox";
const styles: CheckboxStyleOverrides = {};

interface CheckboxStyleOverrides {
  box?: style.StyleInput;
  input?: style.StyleInput;
  root?: style.StyleInput;
}

import type { CheckboxProps } from "@kovojs/ui/checkbox";
const props: CheckboxProps = { children: 'Content' };

interface CheckboxProps {
  describedBy?: string;
  checked?: CheckboxCheckedState;
  children?: ComponentChild;
  disabled?: boolean;
  form?: string;
  id?: string;
  labelledBy?: string;
  name?: string;
  required?: boolean;
  styles?: CheckboxStyleOverrides;
  value?: string;
}

import { CheckboxGroup } from "@kovojs/ui/checkbox-group";
const component = CheckboxGroup;

const CheckboxGroup = component({
  render(props: CheckboxGroupProps) {
    const attrs = checkboxGroupRootAttributes({
      ...(props.activeValue === undefined ? {} : { activeValue: props.activeValue }),
      ...(props.descriptionId === undefined ? {} : { descriptionId: props.descriptionId }),
      ...(props.dir === undefined ? {} : { dir: props.dir }),
      ...(props.disabled === undefined ? {} : { disabled: props.disabled }),
      ...(props.errorId === undefined ? {} : { errorId: props.errorId }),
      ...(props.form === undefined ? {} : { form: props.form }),
      ...(props.id === undefined ? {} : { id: props.id }),
      ...(props.invalid === undefined ? {} : { invalid: props.invalid }),
      ...(props.items === undefined ? {} : { items: props.items }),
      ...(props.labelledBy === undefined ? {} : { labelledBy: props.labelledBy }),
      ...(props.loop === undefined ? {} : { loop: props.loop }),
      ...(props.name === undefined ? {} : { name: props.name }),
      ...(props.orientation === undefined ? {} : { orientation: props.orientation }),
      ...(props.required === undefined ? {} : { required: props.required }),
      ...(props.value === undefined ? {} : { value: props.value }),
    });
    const styleAttrs = style.attrs(checkboxGroupStyles.root, props.styles?.root);

    return (
      <div
        {...styleAttrs}
        {...passThroughProps(props)}
        aria-describedby={attrs['aria-describedby']}
        aria-disabled={attrs['aria-disabled']}
        aria-invalid={attrs['aria-invalid']}
        aria-labelledby={attrs['aria-labelledby']}
        aria-required={attrs['aria-required']}
        data-disabled={attrs['data-disabled']}
        data-invalid={attrs['data-invalid']}
        data-orientation={attrs['data-orientation']}
        data-required={attrs['data-required']}
        id={attrs.id}
        role={attrs.role}
      >
        {props.children}
      </div>
    );
  },
});