Module Solidtype_heroui

HeroUI's Accordion: a stack of sections, each a heading whose trigger expands and collapses its panel, Kobalte's Accordion, with HeroUI's classes from Styles.Accordion.

HeroUI's Alert: a <div> that shows a message, with HeroUI's classes from Styles.Alert, its Indicator drawing its status's icon, and its Content's Title and Description. It is a default surface to what is inside it, as HeroUI's is.

HeroUI's AlertDialog: Kobalte's Dialog as an alertdialog, with HeroUI's classes from Styles.AlertDialog, a dialog that asks the user to decide before going on.

HeroUI's Autocomplete: a select whose popover filters its List_box by a Search_field, on Kobalte's Combobox, with HeroUI's classes from Styles.Autocomplete.

HeroUI's Avatar: Kobalte's Image.Root, a <span>, with HeroUI's classes from Styles.Avatar, that shows its Image once it has loaded and its Fallback until then, or where it cannot.

HeroUI's AvatarGroup: a <div> of Avatars, with HeroUI's classes from Styles.AvatarGroup, stacked or in a grid. It gives the avatars inside it its size, color and variant, each where an avatar sets none itself, shows the first max of them, and counts the rest, "+2", unless it holds a Count of its own.

HeroUI's Badge: a count or a status over the content it marks, with HeroUI's classes from Styles.Badge. Text it is given is its label's, as HeroUI's own wraps a string or a number; with nothing, it is a dot.

HeroUI's Breadcrumbs: the trail of pages to the one shown, each a link but the last, which is the page itself, on Kobalte's Breadcrumbs, with HeroUI's classes from Styles.Breadcrumbs.

HeroUI's Button: Kobalte's Button.Root, a native <button>, with HeroUI's classes from Styles.Button.classes. Its props are named as HeroUI's documentation names them -- variant, size, full_width, is_icon_only, is_disabled -- but for on_click, a click as Kobalte gives it, where HeroUI's is onPress. Inside a Button_group, a variant, size, full_width or is_disabled the button does not set is its group's, else HeroUI's default: `primary, `md, neither full width nor disabled; and it is disabled in a disabled Fieldset where neither it nor its group says.

HeroUI's ButtonGroup: a <div role="group"> of Buttons, with HeroUI's classes from Styles.ButtonGroup, which round the first and the last and none between. It gives the buttons inside it its variant, size, is_disabled and full_width, each where the button sets none itself. A Separator inside a button, but the first, draws a line before it.

HeroUI's Card: a <div> and its parts, with HeroUI's classes from Styles.Card. A card but a transparent one is a surface, which it gives what is inside it by Surface.Context, as HeroUI's does.

HeroUI's Checkbox: Kobalte's Checkbox.Root, its Label and its Input, in HeroUI's anatomy, with HeroUI's classes from Styles.Checkbox and the state its styles read -- selected, indeterminate, disabled, invalid, hovered, pressed, focus-visible -- declared as React Aria writes it. Its props are named as HeroUI's documentation names them. A Description inside it, but outside its content, is its own, which its input is described by. Inside a Checkbox_group, it is checked while its value is among the group's, and takes the group's variant where it sets none, and its state.

HeroUI's CheckboxGroup: a <div role="group"> of Checkboxes, with HeroUI's classes from Styles.CheckboxGroup, that keeps the values its checkboxes check, controlled or its own. A checkbox inside it is checked while its value is among them, and checks or unchecks it as it is clicked; it takes the group's variant where it sets none, and its state. A Label inside it, but outside a checkbox's content, names the group, and a Description describes it. It is disabled as is_disabled says, else as the Fieldset it is in is.

HeroUI's Chip: a short label for a status, a category or a choice, with HeroUI's classes from Styles.Chip. Text it is given is its label's, as HeroUI's own wraps a string or a number.

HeroUI's CloseButton: Kobalte's Button.Root, a native <button> named "Close", with HeroUI's classes from Styles.CloseButton and the state its styles read -- hovered, pressed, focused, focus-visible, disabled -- kept by Interaction as React Aria keeps it. It draws HeroUI's cross, or the children it is given. Its props are named as HeroUI's documentation names them, but for on_click, a click as Kobalte gives it, where HeroUI's is onPress.

HeroUI's ComboBox: Kobalte's Combobox, a text input that filters a List_box of options as it is typed into, to choose one or many of, with HeroUI's classes from Styles.ComboBox.

HeroUI's Description: a field's helper text, with HeroUI's classes from Styles.Description. It is a <span>, unless a part above it gives it its element, as React Aria's do: inside a Radio_group, a Radio or a Text_field, Kobalte's description, which the group, the radio's input or the field's input is described by.

What HeroUI's dialogs share -- Modal, Alert_dialog -- on Kobalte's Dialog: each port's parts are its own components, with its own classes, names and defaults, and call these for what they do alike.

HeroUI's Disclosure: a section that shows and hides its content, Kobalte's Collapsible, with HeroUI's classes from Styles.Disclosure. Its heading holds the button that expands and collapses it, and its content follows.

HeroUI's DisclosureGroup: the Disclosures inside it, each by its id, expanded as the group keeps them, with HeroUI's classes from Styles.DisclosureGroup. A <div>.

HeroUI's Drawer: Kobalte's Dialog sliding in from an edge of the page, with HeroUI's classes from Styles.Drawer.

HeroUI's Dropdown: Kobalte's DropdownMenu, a menu of actions or of options that opens from a trigger, with HeroUI's classes from Styles.Dropdown, Styles.MenuItem and Styles.MenuSection.

HeroUI's EmptyState: a <div>, with HeroUI's class from Styles.EmptyState, that a list, a table or a select shows where it has nothing to show, and says "No results found" unless it is given children.

What HeroUI's fields share -- a switch, a checkbox, a radio: the state their content shows, a value controlled or kept, and the content, the clickable label that holds the control and its Label, with Kobalte's input inside it, as React Aria's is.

HeroUI's FieldError: a field's error, with HeroUI's class from Styles.FieldError, which the field it is in -- a Text_field, a Number_field -- shows while it is invalid, as Kobalte's error message, and its input is described by.

HeroUI's Fieldset: a <fieldset> of fields, with HeroUI's classes from Styles.Fieldset, its Legend, the Group of its fields and its Actions. While it is disabled, it gives the Buttons, Links and Radio_groups inside it the state, as HeroUI's gives React Aria's: the browser disables a native button or input inside a disabled fieldset, but neither a group nor the state its styles read. A component's own is_disabled is its own.

HeroUI's Form: a <form>, which HeroUI gives no classes of its own, that refuses a submit while a field inside it is invalid and focuses the first such field, in the page's order, instead; and that shows a server's errors, validation_errors, each on the field whose name it names, invalid with that message until the field is changed and then left, as React Aria commits a change, or until the errors are given again.

HeroUI's Header: a <header>, with HeroUI's classes from Styles.Header, that titles what follows it. Inside a Dropdown.Section it is the section's label, which names it to a reader.

HeroUI's Input: an <input>, with HeroUI's classes from Styles.Input and the state its styles read -- hovered, focused, focus-visible, disabled, invalid -- kept by Interaction as React Aria keeps it. It takes every attribute an <input> takes, and passes them on to it. Inside a Text_field it is Kobalte's TextField.Input, which the field's value, state, label and description reach, and inside a Combo_box Kobalte's Combobox.Input, the combo box's; in either it takes the field's variant where it sets none.

HeroUI's InputGroup: an Input or a Text_area with what goes before and after it, in a <div role="group">, with HeroUI's classes from Styles.InputGroup. A click on the group but on its input gives the input the focus. Inside a Text_field, its input is the field's, which the field's label names, and it takes the field's variant where it sets none.

The state of an interaction with an element, kept as React Aria keeps it on HeroUI's components in React, for a port to declare as the attributes HeroUI's styles read: data-hovered, data-pressed, data-focused, data-focus-visible and data-disabled, each "true" or absent.

HeroUI's Kbd: a <kbd>, with HeroUI's classes from Styles.Kbd, that shows a key or a combination of keys, each modifier by its symbol and the rest by its text.

HeroUI's Label: a field's name, with HeroUI's classes from Styles.Label, marked required, disabled or invalid as it is told. It is a <label>, unless a part above it gives it its element, as React Aria's do: a <span> inside a control's own clickable label, Switch.Content and the others, the group's label, which names the group, inside a Radio_group, and the field's, which names its input, inside a Text_field.

HeroUI's Link: Kobalte's Link.Root, an anchor, with HeroUI's classes from Styles.Link and the state its styles read, kept by Interaction as React Aria keeps it. It is disabled as is_disabled says, else as the Fieldset it is in is.

HeroUI's ListBox: Kobalte's Listbox, a list of options to select one or many of, or to act on, with HeroUI's classes from Styles.Listbox, Styles.ListboxItem and Styles.ListboxSection.

HeroUI's Meter: Kobalte's Meter.Root, a <div role="meter">, with HeroUI's classes from Styles.Meter, that shows a quantity within a known range: its Label names it, its Output shows its value as Kobalte formats it for the reader's locale, and its Fill is as wide in its Track as the value is far along the range.

HeroUI's Modal: Kobalte's Dialog, with HeroUI's classes from Styles.Modal.

HeroUI's NumberField: Kobalte's NumberField.Root, a field's <div>, with HeroUI's classes from Styles.NumberField, whose value is a number, controlled or its own, stepped by its buttons and by the arrow keys within its range, and the parts inside it as Kobalte's: its Label names its input, its Description describes it, and its Field_error shows while it is invalid. It submits its value with a form by Kobalte's hidden input.

What an overlay -- a tooltip, a popover, a modal -- keeps of its own presence, as React Aria keeps it for HeroUI's styles: it is on the page while it is open and while its exit animation plays after, and it is entering, then exiting, while HeroUI's keyframes for each run.

HeroUI's Pagination: a <nav> of the pages an application lays out, each a button on Kobalte's Button, with HeroUI's classes from Styles.Pagination.

What a disclosure's content and an accordion's panel share: content kept on the page while collapsed, hidden until the browser's find in page reaches a word in it, and sized as HeroUI's styles animate it, by --disclosure-panel-width and --disclosure-panel-height, as React Aria sizes its disclosure's panel.

HeroUI's Popover: Kobalte's Popover, with HeroUI's classes from Styles.Popover and its arrow.

HeroUI's ProgressBar: Kobalte's Progress.Root, a <div role="progressbar">, with HeroUI's classes from Styles.ProgressBar, that shows a quantity within a known range: its Label names it, its Output shows its value as Kobalte formats it for the reader's locale, and its Fill is as wide in its Track as the value is far along the range.

HeroUI's ProgressCircle: Kobalte's Progress.Root, a <div role="progressbar">, with HeroUI's classes from Styles.ProgressCircle, that shows a quantity within a known range as an arc: its Fill_circle is drawn round its Track_circle as far as the value is along the range, or, indeterminate, spins as HeroUI's styles animate it. No label names it, so it is named by its aria_label.

HeroUI's Radio: Kobalte's RadioGroup.Item, its ItemLabel and its ItemInput, in HeroUI's anatomy, with HeroUI's classes from Styles.Radio and the state its styles read -- selected, disabled, invalid, hovered, pressed, focus-visible -- declared as React Aria writes it. A Description inside it, but outside its content, is the radio's, which its input is described by.

HeroUI's RadioGroup: Kobalte's RadioGroup.Root, the Radios inside it of which one at most is chosen, with HeroUI's classes from Styles.RadioGroup and the state its styles read -- orientation, disabled, invalid -- declared as React Aria writes it. A Label inside it, but outside a radio's content, is the group's, which names it, and a Description the group's, which describes it. It is disabled as is_disabled says, else as the Fieldset it is in is. Its props are named as HeroUI's documentation names them.

HeroUI's ScrollShadow: a <div> that scrolls, with HeroUI's classes from Styles.ScrollShadow, faded at each edge it hides content at. It measures itself as it scrolls, as it is resized and as its content changes, and declares each edge as HeroUI's hook writes it -- data-top-scroll and data-bottom-scroll, "true" or "false", or data-top-bottom-scroll where content is hidden at both -- or the edges its visibility gives.

HeroUI's SearchField: Kobalte's TextField.Root, with HeroUI's classes from Styles.SearchField, whose input is a search: Escape clears it, Enter submits it, and its Clear_button clears it and gives its input the focus back, as React Aria's does. Its Label, Description and Field_error are Kobalte's.

HeroUI's Select: Kobalte's Select, a button that shows the option chosen and opens a List_box of options to choose one or many of, with HeroUI's classes from Styles.Select.

HeroUI's Separator: Kobalte's Separator.Root, a line between content, with HeroUI's classes from Styles.Separator.classes.

HeroUI's Skeleton: a <div>, with HeroUI's classes from Styles.Skeleton, that stands where content is loading, its shape given by class_. Its animation is its animation_type, else the page's --skeleton-animation -- shimmer, pulse or none -- else a shimmer. The page's is read once the skeleton is in the browser, never on the server, as HeroUI reads it, so a prerendered skeleton hydrates as it was rendered.

HeroUI's Slider: Kobalte's Slider.Root, with HeroUI's classes from Styles.Slider, whose values -- one, or two for a range -- are chosen by its thumbs along its track, by a pointer or the arrow, page, Home and End keys, on its step's grid within its range. Its Label names it, its Output shows its values, and its Fill is drawn between them.

HeroUI's Spinner: a <span role="status"> named "Loading", with HeroUI's classes from Styles.Spinner, that draws HeroUI's spinning icon, its gradients given ids of their own by Solidtype.Solid.create_unique_id, the same on the server and in the browser.

HeroUI's icon for each status -- info for the default and accent, success, warning, danger -- as an alert, a toast and an alert dialog draw it.

HeroUI's Surface: a <div> with HeroUI's classes from Styles.Surface, the background a part of a page stands on. It gives what is inside it its variant, by Context, which HeroUI's Card, Alert, Accordion and overlays give too, so a part can choose the colours that stand out on it.

HeroUI's Switch: Kobalte's Switch.Root, its Label and its Input, in HeroUI's anatomy, with HeroUI's classes from Styles.Switch and the state its styles read -- selected, disabled, hovered, pressed, focus-visible -- declared as React Aria writes it. Its props are named as HeroUI's documentation names them.

HeroUI's SwitchGroup: a <div> of Switches, with HeroUI's classes from Styles.SwitchGroup, laid out vertically or horizontally. Each switch is its own; the group lays them out.

HeroUI's Tabs: a list of tabs, each showing its panel while it is selected, Kobalte's Tabs, with HeroUI's classes from Styles.Tabs.

HeroUI's TextArea: a <textarea>, with HeroUI's classes from Styles.TextArea and the state its styles read -- hovered, focused, focus-visible, disabled, invalid -- kept by Interaction as React Aria keeps it. It takes every attribute a <textarea> takes, and passes them on to it. Inside a Text_field it is Kobalte's TextField.TextArea, which the field's value, state, label and description reach, and takes the field's variant where it sets none.

HeroUI's TextField: Kobalte's TextField.Root, a field's <div>, with HeroUI's classes from Styles.TextField, and the parts inside it as Kobalte's: its Label names its Input or Text_area, its Description describes it, and its Field_error shows while it is invalid. It keeps its value, controlled or its own, and declares its state as React Aria writes it -- disabled, invalid, read-only, required, and the focus within it.

HeroUI's TimeField: Kobalte's TimeField.Root, a field's <div>, with HeroUI's classes from Styles.TimeField, whose value is a time of day, each of its parts -- hour, minute, second and AM or PM -- a segment typed into or stepped by the arrow keys, within its min_value and max_value. Its Label names it, its Description describes it, its Field_error shows while it is invalid, and it submits its value with a form, by Kobalte's hidden input.

HeroUI's Toast: brief messages shown in a stack, on Kobalte's toast region, its list and its toasts, with HeroUI's classes from Styles.Toast. A Provider, rendered once at the root of the page, shows the toasts a queue holds; show and its kin add, change and close them, from anywhere.

HeroUI's ToggleButton: a button pressed on or off, Kobalte's toggle button, with HeroUI's classes from Styles.ToggleButton.

HeroUI's ToggleButtonGroup: Toggle_buttons of which one or several are selected, on Kobalte's toggle group, with HeroUI's classes from Styles.ToggleButtonGroup, which round the first and the last and none between, or set them apart where it is_detached. Each button is named by its id, the key selected_keys holds. It gives the buttons inside it its size and is_disabled, each where the button sets none itself. A Separator inside a button, but the first, draws a line before it.

HeroUI's Tooltip: Kobalte's Tooltip, with HeroUI's classes from Styles.Tooltip and its arrow.

HeroUI's Typography: text in HeroUI's type scale, with HeroUI's classes from Styles.Typography, each type the element it means -- a heading's <h1> to <h6>, body text a <p>, code a <code> -- unless it is given another, by element_type, as React Aria's Text is.