diff --git a/site/src/sources/reactAriaComponents.json b/site/src/sources/reactAriaComponents.json new file mode 100644 index 000000000..5f1e3045d --- /dev/null +++ b/site/src/sources/reactAriaComponents.json @@ -0,0 +1,264 @@ +{ + "$schema": "../schemas/design-system.schema.json", + "name": "React Aria Components", + "description": "React Aria is a library of unstyled React components and hooks that helps you build accessible, high quality UI components for your application or design system.", + "url": "https://react-spectrum.adobe.com/react-aria/getting-started.html", + "by": "Adobe", + "components": [ + { + "name": "Autocomplete", + "definition": "An autocomplete combines a TextField or SearchField with a Menu or ListBox, allowing users to search or filter a list of suggestions.", + "url": "https://react-spectrum.adobe.com/react-aria/Autocomplete.html" + }, + { + "name": "Breadcrumbs", + "definition": "Breadcrumbs display a hierarchy of links to the current page or resource in an application.", + "url": "https://react-spectrum.adobe.com/react-aria/Breadcrumbs.html" + }, + { + "name": "Button", + "definition": "A button allows a user to perform an action, with mouse, touch, and keyboard interactions.", + "url": "https://react-spectrum.adobe.com/react-aria/Button.html" + }, + { + "name": "Calendar", + "definition": "A calendar displays one or more date grids and allows users to select a single date.", + "url": "https://react-spectrum.adobe.com/react-aria/Calendar.html" + }, + { + "name": "Checkbox", + "definition": "A checkbox allows a user to select multiple items from a list of individual items, or to mark one individual item as selected.", + "url": "https://react-spectrum.adobe.com/react-aria/Checkbox.html" + }, + { + "name": "CheckboxGroup", + "definition": "A checkbox group allows a user to select multiple items from a list of options.", + "url": "https://react-spectrum.adobe.com/react-aria/CheckboxGroup.html" + }, + { + "name": "ColorArea", + "definition": "A color area allows users to adjust two channels of an RGB, HSL or HSB color value against a two-dimensional gradient background.", + "url": "https://react-spectrum.adobe.com/react-aria/ColorArea.html" + }, + { + "name": "ColorField", + "definition": "A color field allows users to edit a hex color or individual color channel value.", + "url": "https://react-spectrum.adobe.com/react-aria/ColorField.html" + }, + { + "name": "ColorPicker", + "definition": "A ColorPicker synchronizes a color value between multiple React Aria color components. It simplifies building color pickers with customizable layouts via composition.", + "url": "https://react-spectrum.adobe.com/react-aria/ColorPicker.html" + }, + { + "name": "ColorSlider", + "definition": "A color slider allows users to adjust an individual channel of a color value.", + "url": "https://react-spectrum.adobe.com/react-aria/ColorSlider.html" + }, + { + "name": "ColorSwatch", + "definition": "A ColorSwatch displays a preview of a selected color.", + "url": "https://react-spectrum.adobe.com/react-aria/ColorSwatch.html" + }, + { + "name": "ColorSwatchPicker", + "definition": "A ColorSwatchPicker displays a list of color swatches and allows a user to select one of them.", + "url": "https://react-spectrum.adobe.com/react-aria/ColorSwatchPicker.html" + }, + { + "name": "ColorWheel", + "definition": "A color wheel allows users to adjust the hue of an HSL or HSB color value on a circular track.", + "url": "https://react-spectrum.adobe.com/react-aria/ColorWheel.html" + }, + { + "name": "ComboBox", + "definition": "A combo box combines a text input with a listbox, allowing users to filter a list of options to items matching a query.", + "url": "https://react-spectrum.adobe.com/react-aria/ComboBox.html" + }, + { + "name": "DateField", + "definition": "A date field allows users to enter and edit date and time values using a keyboard. Each part of a date value is displayed in an individually editable segment.", + "url": "https://react-spectrum.adobe.com/react-aria/DateField.html" + }, + { + "name": "DatePicker", + "definition": "A date picker combines a DateField and a Calendar popover to allow users to enter or select a date and time value.", + "url": "https://react-spectrum.adobe.com/react-aria/DatePicker.html" + }, + { + "name": "DateRangePicker", + "definition": "A date range picker combines two DateFields and a RangeCalendar popover to allow users to enter or select a date and time range.", + "url": "https://react-spectrum.adobe.com/react-aria/DateRangePicker.html" + }, + { + "name": "Dialog", + "definition": "A dialog is an overlay shown above other content in an application.", + "url": "https://react-spectrum.adobe.com/react-aria/Dialog.html" + }, + { + "name": "Disclosure", + "definition": "A disclosure is a collapsible section of content. It is composed of a a header with a heading and trigger button, and a panel that contains the content.", + "url": "https://react-spectrum.adobe.com/react-aria/Disclosure.html" + }, + { + "name": "DisclosureGroup", + "definition": "A DisclosureGroup is a grouping of related disclosures, sometimes called an accordion. It supports both single and multiple expanded items.", + "url": "https://react-spectrum.adobe.com/react-aria/DisclosureGroup.html" + }, + { + "name": "DropZone", + "definition": "A drop zone is an area into which one or multiple objects can be dragged and dropped.", + "url": "https://react-spectrum.adobe.com/react-aria/DropZone.html" + }, + { + "name": "FileTrigger", + "definition": "A FileTrigger allows a user to access the file system with any pressable React Aria or React Spectrum component, or custom components built with usePress.", + "url": "https://react-spectrum.adobe.com/react-aria/FileTrigger.html" + }, + { + "name": "Form", + "definition": "A form is a group of inputs that allows users to submit data to a server, with support for providing field validation errors.", + "url": "https://react-spectrum.adobe.com/react-aria/Form.html" + }, + { + "name": "GridList", + "definition": "A grid list displays a list of interactive items, with support for keyboard navigation, single or multiple selection, and row actions.", + "url": "https://react-spectrum.adobe.com/react-aria/GridList.html" + }, + { + "name": "Group", + "definition": "A group represents a set of related UI controls, and supports interactive states for styling.", + "url": "https://react-spectrum.adobe.com/react-aria/Group.html" + }, + { + "name": "Link", + "definition": "A link allows a user to navigate to another page or resource within a web page or application.", + "url": "https://react-spectrum.adobe.com/react-aria/Link.html" + }, + { + "name": "ListBox", + "definition": "A listbox displays a list of options and allows a user to select one or more of them.", + "url": "https://react-spectrum.adobe.com/react-aria/ListBox.html" + }, + { + "name": "Menu", + "definition": "A menu displays a list of actions or options that a user can choose.", + "url": "https://react-spectrum.adobe.com/react-aria/Menu.html" + }, + { + "name": "Meter", + "definition": "A meter represents a quantity within a known range, or a fractional value.", + "url": "https://react-spectrum.adobe.com/react-aria/Meter.html" + }, + { + "name": "Modal", + "definition": "A modal is an overlay element which blocks interaction with elements outside it.", + "url": "https://react-spectrum.adobe.com/react-aria/Modal.html" + }, + { + "name": "NumberField", + "definition": "A number field allows a user to enter a number, and increment or decrement the value using stepper buttons.", + "url": "https://react-spectrum.adobe.com/react-aria/NumberField.html" + }, + { + "name": "Popover", + "definition": "A popover is an overlay element positioned relative to a trigger.", + "url": "https://react-spectrum.adobe.com/react-aria/Popover.html" + }, + { + "name": "ProgressBar", + "definition": "Progress bars show either determinate or indeterminate progress of an operation over time.", + "url": "https://react-spectrum.adobe.com/react-aria/ProgressBar.html" + }, + { + "name": "RadioGroup", + "definition": "A radio group allows a user to select a single item from a list of mutually exclusive options.", + "url": "https://react-spectrum.adobe.com/react-aria/RadioGroup.html" + }, + { + "name": "RangeCalendar", + "definition": "A range calendar displays one or more date grids and allows users to select a contiguous range of dates.", + "url": "https://react-spectrum.adobe.com/react-aria/RangeCalendar.html" + }, + { + "name": "SearchField", + "definition": "A search field allows a user to enter and clear a search query.", + "url": "https://react-spectrum.adobe.com/react-aria/SearchField.html" + }, + { + "name": "Select", + "definition": "A select displays a collapsible list of options and allows a user to select one of them.", + "url": "https://react-spectrum.adobe.com/react-aria/Select.html" + }, + { + "name": "Slider", + "definition": "A slider allows a user to select one or more values within a range.", + "url": "https://react-spectrum.adobe.com/react-aria/Slider.html" + }, + { + "name": "Switch", + "definition": "A switch allows a user to turn a setting on or off.", + "url": "https://react-spectrum.adobe.com/react-aria/Switch.html" + }, + { + "name": "Table", + "definition": "A table displays data in rows and columns, with support for features like sorting, selection, infinite scrolling, and more.", + "url": "https://react-spectrum.adobe.com/react-aria/Table.html" + }, + { + "name": "Tabs", + "definition": "Tabs organize content into multiple sections and allow users to navigate between them.", + "url": "https://react-spectrum.adobe.com/react-aria/Tabs.html" + }, + { + "name": "TagGroup", + "definition": "A tag group is a focusable list of labels, categories, keywords, filters, or other items, with support for keyboard navigation, selection, and removal.", + "url": "https://react-spectrum.adobe.com/react-aria/TagGroup.html" + }, + { + "name": "TextField", + "definition": "A text field allows a user to enter a plain text value with a keyboard.", + "url": "https://react-spectrum.adobe.com/react-aria/TextField.html" + }, + { + "name": "TimeField", + "definition": "A time field allows users to enter and edit time values using a keyboard. Each part of a time value is displayed in an individually editable segment.", + "url": "https://react-spectrum.adobe.com/react-aria/TimeField.html" + }, + { + "name": "Toast", + "definition": "A ToastRegion displays one or more toast notifications.", + "url": "https://react-spectrum.adobe.com/react-aria/Toast.html" + }, + { + "name": "ToggleButton", + "definition": "A toggle button allows a user to toggle a selection on or off, for example switching between two states or modes.", + "url": "https://react-spectrum.adobe.com/react-aria/ToggleButton.html" + }, + { + "name": "ToggleButtonGroup", + "definition": "A toggle button group allows a user to toggle multiple options, with single or multiple selection.", + "url": "https://react-spectrum.adobe.com/react-aria/ToggleButtonGroup.html" + }, + { + "name": "Toolbar", + "definition": "A toolbar is a container for a set of interactive controls, such as buttons, dropdown menus, or checkboxes, with arrow key navigation.", + "url": "https://react-spectrum.adobe.com/react-aria/Toolbar.html" + }, + { + "name": "Tooltip", + "definition": "TooltipTrigger wraps around a trigger element and a Tooltip. It handles opening and closing the Tooltip when the user hovers over or focuses the trigger, and positioning the Tooltip relative to the trigger.", + "url": "https://react-spectrum.adobe.com/react-aria/Tooltip.html" + }, + { + "name": "Tree", + "definition": "A tree displays a hierarchical list of items which may be nested and supports actions on items, and expanding and collapsing of branches.", + "url": "https://react-spectrum.adobe.com/react-aria/Tree.html" + }, + { + "name": "Virtualizer", + "definition": "A Virtualizer renders a scrollable collection of data using customizable layouts. It supports very large collections by only rendering visible items to the DOM, reusing them as the user scrolls.", + "url": "https://react-spectrum.adobe.com/react-aria/Virtualizer.html" + } + ] +} diff --git a/site/src/sources/reactSpectrum.json b/site/src/sources/reactSpectrum.json new file mode 100644 index 000000000..4805744ed --- /dev/null +++ b/site/src/sources/reactSpectrum.json @@ -0,0 +1,394 @@ +{ + "$schema": "../schemas/design-system.schema.json", + "name": "React Spectrum", + "description": "React Spectrum is a React implementation of Spectrum, Adobe's design system. It provides components that are adaptive to interactions and screen sizes across devices, and includes full screen reader and keyboard navigation support for accessibility.", + "url": "https://react-spectrum.adobe.com/react-spectrum/getting-started.html", + "by": "Adobe", + "components": [ + { + "name": "Accordion", + "definition": "A group of disclosures that can be expanded and collapsed.", + "url": "https://react-spectrum.adobe.com/react-spectrum/Accordion.html" + }, + { + "name": "ActionBar", + "definition": "Action bars are used for single and bulk selection patterns when a user needs to perform actions on one or more items at the same time.", + "url": "https://react-spectrum.adobe.com/react-spectrum/ActionBar.html" + }, + { + "name": "ActionButton", + "definition": "ActionButtons allow users to perform an action. They're used for similar, task-based options within a workflow, and are ideal for interfaces where buttons aren't meant to draw a lot of attention.", + "url": "https://react-spectrum.adobe.com/react-spectrum/ActionButton.html" + }, + { + "name": "ActionGroup", + "definition": "An ActionGroup is a grouping of ActionButtons that are related to one another.", + "url": "https://react-spectrum.adobe.com/react-spectrum/ActionGroup.html" + }, + { + "name": "ActionMenu", + "definition": "ActionMenu combines an ActionButton with a Menu for simple \"more actions\" use cases.", + "url": "https://react-spectrum.adobe.com/react-spectrum/ActionMenu.html" + }, + { + "name": "AlertDialog", + "definition": "AlertDialogs are a specific type of Dialog. They display important information that users need to acknowledge.", + "url": "https://react-spectrum.adobe.com/react-spectrum/AlertDialog.html" + }, + { + "name": "Avatar", + "definition": "An avatar is a thumbnail representation of an entity, such as a user or an organization.", + "url": "https://react-spectrum.adobe.com/react-spectrum/Avatar.html" + }, + { + "name": "Badge", + "definition": "Badges are used for showing a small amount of color-categorized metadata, ideal for getting a user's attention.", + "url": "https://react-spectrum.adobe.com/react-spectrum/Badge.html" + }, + { + "name": "Breadcrumbs", + "definition": "Breadcrumbs show hierarchy and navigational context for a user's location within an application.", + "url": "https://react-spectrum.adobe.com/react-spectrum/Breadcrumbs.html" + }, + { + "name": "Button", + "definition": "Buttons allow users to perform an action or to navigate to another page. They have multiple styles for various needs, and are ideal for calling attention to where action is required.", + "url": "https://react-spectrum.adobe.com/react-spectrum/Button.html" + }, + { + "name": "ButtonGroup", + "definition": "ButtonGroup handles overflow for a grouping of buttons whose actions are related to each other.", + "url": "https://react-spectrum.adobe.com/react-spectrum/ButtonGroup.html" + }, + { + "name": "Calendar", + "definition": "Calendars display a grid of days in one or more months and allow users to select a single date.", + "url": "https://react-spectrum.adobe.com/react-spectrum/Calendar.html" + }, + { + "name": "Checkbox", + "definition": "Checkboxes allow users to select multiple items from a list of individual items, or to mark one individual item as selected.", + "url": "https://react-spectrum.adobe.com/react-spectrum/Checkbox.html" + }, + { + "name": "CheckboxGroup", + "definition": "A CheckboxGroup allows users to select one or more items from a list of choices.", + "url": "https://react-spectrum.adobe.com/react-spectrum/CheckboxGroup.html" + }, + { + "name": "ColorArea", + "definition": "ColorArea allows users to adjust two channels of an RGB, HSL or HSB color value against a two-dimensional gradient background.", + "url": "https://react-spectrum.adobe.com/react-spectrum/ColorArea.html" + }, + { + "name": "ColorField", + "definition": "A color field allows users to edit a hex color or individual color channel value.", + "url": "https://react-spectrum.adobe.com/react-spectrum/ColorField.html" + }, + { + "name": "ColorPicker", + "definition": "A ColorPicker combines a swatch with a customizable popover for editing a color.", + "url": "https://react-spectrum.adobe.com/react-spectrum/ColorPicker.html" + }, + { + "name": "ColorSlider", + "definition": "ColorSliders allow users to adjust an individual channel of a color value.", + "url": "https://react-spectrum.adobe.com/react-spectrum/ColorSlider.html" + }, + { + "name": "ColorSwatch", + "definition": "A ColorSwatch displays a preview of a selected color.", + "url": "https://react-spectrum.adobe.com/react-spectrum/ColorSwatch.html" + }, + { + "name": "ColorSwatchPicker", + "definition": "A ColorSwatchPicker displays a list of color swatches and allows a user to select one of them.", + "url": "https://react-spectrum.adobe.com/react-spectrum/ColorSwatchPicker.html" + }, + { + "name": "ColorWheel", + "definition": "ColorWheels allow users to adjust the hue of an HSL or HSB color value on a circular track.", + "url": "https://react-spectrum.adobe.com/react-spectrum/ColorWheel.html" + }, + { + "name": "ComboBox", + "definition": "ComboBoxes combine a text entry with a picker menu, allowing users to filter longer lists to only the selections matching a query.", + "url": "https://react-spectrum.adobe.com/react-spectrum/ComboBox.html" + }, + { + "name": "Content", + "definition": "Content represents the primary content within a Spectrum container.", + "url": "https://react-spectrum.adobe.com/react-spectrum/Content.html" + }, + { + "name": "ContextualHelp", + "definition": "Contextual help shows a user extra information about the state of an adjacent component, or a total view.", + "url": "https://react-spectrum.adobe.com/react-spectrum/ContextualHelp.html" + }, + { + "name": "DateField", + "definition": "DateFields allow users to enter and edit date and time values using a keyboard. Each part of a date value is displayed in an individually editable segment.", + "url": "https://react-spectrum.adobe.com/react-spectrum/DateField.html" + }, + { + "name": "DatePicker", + "definition": "DatePickers combine a DateField and a Calendar popover to allow users to enter or select a date and time value.", + "url": "https://react-spectrum.adobe.com/react-spectrum/DatePicker.html" + }, + { + "name": "DateRangePicker", + "definition": "DateRangePickers combine two DateFields and a RangeCalendar popover to allow users to enter or select a date and time range.", + "url": "https://react-spectrum.adobe.com/react-spectrum/DateRangePicker.html" + }, + { + "name": "Dialog", + "definition": "Dialogs are windows containing contextual information, tasks, or workflows that appear over the user interface. Depending on the kind of Dialog, further interactions may be blocked until the Dialog is acknowledged.", + "url": "https://react-spectrum.adobe.com/react-spectrum/Dialog.html" + }, + { + "name": "DialogContainer", + "definition": "A DialogContainer accepts a single Dialog as a child, and manages showing and hiding it in a modal. Useful in cases where there is no trigger element or when the trigger unmounts while the dialog is open.", + "url": "https://react-spectrum.adobe.com/react-spectrum/DialogContainer.html" + }, + { + "name": "DialogTrigger", + "definition": "DialogTrigger serves as a wrapper around a Dialog and its associated trigger, linking the Dialog's open state with the trigger's press state.", + "url": "https://react-spectrum.adobe.com/react-spectrum/DialogTrigger.html" + }, + { + "name": "Disclosure", + "definition": "A collapsible section of content composed of a heading that expands and collapses a panel.", + "url": "https://react-spectrum.adobe.com/react-spectrum/Disclosure.html" + }, + { + "name": "Divider", + "definition": "Dividers bring clarity to a layout by grouping and dividing content in close proximity. They can also be used to establish rhythm and hierarchy.", + "url": "https://react-spectrum.adobe.com/react-spectrum/Divider.html" + }, + { + "name": "DropZone", + "definition": "A drop zone is an area into which one or multiple objects can be dragged and dropped.", + "url": "https://react-spectrum.adobe.com/react-spectrum/DropZone.html" + }, + { + "name": "FileTrigger", + "definition": "A FileTrigger allows a user to access the file system with any pressable React Spectrum component.", + "url": "https://react-spectrum.adobe.com/react-spectrum/FileTrigger.html" + }, + { + "name": "Flex", + "definition": "A layout container using flexbox. Provides Spectrum dimension values, and supports the gap property to define consistent spacing between items.", + "url": "https://react-spectrum.adobe.com/react-spectrum/Flex.html" + }, + { + "name": "Footer", + "definition": "Footer represents a footer within a Spectrum container.", + "url": "https://react-spectrum.adobe.com/react-spectrum/Footer.html" + }, + { + "name": "Form", + "definition": "Forms allow users to enter data that can be submitted while providing alignment and styling for form fields.", + "url": "https://react-spectrum.adobe.com/react-spectrum/Form.html" + }, + { + "name": "Grid", + "definition": "A layout container using CSS grid. Supports Spectrum dimensions as values to ensure consistent and adaptive sizing and spacing.", + "url": "https://react-spectrum.adobe.com/react-spectrum/Grid.html" + }, + { + "name": "Header", + "definition": "Header represents a header within a Spectrum container.", + "url": "https://react-spectrum.adobe.com/react-spectrum/Header.html" + }, + { + "name": "Heading", + "definition": "Heading is used to create various levels of typographic hierarchies.", + "url": "https://react-spectrum.adobe.com/react-spectrum/Heading.html" + }, + { + "name": "IllustratedMessage", + "definition": "An IllustratedMessage displays an illustration and a message, usually for an empty state or an error page.", + "url": "https://react-spectrum.adobe.com/react-spectrum/IllustratedMessage.html" + }, + { + "name": "Image", + "definition": "Image is used to insert and display an image within a component.", + "url": "https://react-spectrum.adobe.com/react-spectrum/Image.html" + }, + { + "name": "InlineAlert", + "definition": "Inline alerts display a non-modal message associated with objects in a view. These are often used in form validation, providing a place to aggregate feedback related to multiple fields.", + "url": "https://react-spectrum.adobe.com/react-spectrum/InlineAlert.html" + }, + { + "name": "Keyboard", + "definition": "Keyboard represents text that specifies a keyboard command.", + "url": "https://react-spectrum.adobe.com/react-spectrum/Keyboard.html" + }, + { + "name": "LabeledValue", + "definition": "A LabeledValue displays a non-editable value with a label. It formats numbers, dates, times, and lists according to the user's locale.", + "url": "https://react-spectrum.adobe.com/react-spectrum/LabeledValue.html" + }, + { + "name": "Link", + "definition": "Links allow users to navigate to a different location. They can be presented inline inside a paragraph or as standalone text.", + "url": "https://react-spectrum.adobe.com/react-spectrum/Link.html" + }, + { + "name": "ListBox", + "definition": "A list of options that can allow selection of one or more.", + "url": "https://react-spectrum.adobe.com/react-spectrum/ListBox.html" + }, + { + "name": "ListView", + "definition": "A ListView displays a list of interactive items, and allows a user to navigate, select, or perform an action.", + "url": "https://react-spectrum.adobe.com/react-spectrum/ListView.html" + }, + { + "name": "LogicButton", + "definition": "A LogicButton displays an operator within a boolean logic sequence.", + "url": "https://react-spectrum.adobe.com/react-spectrum/LogicButton.html" + }, + { + "name": "Menu", + "definition": "Menus display a list of actions or options that a user can choose.", + "url": "https://react-spectrum.adobe.com/react-spectrum/Menu.html" + }, + { + "name": "MenuTrigger", + "definition": "The MenuTrigger serves as a wrapper around a Menu and its associated trigger, linking the Menu's open state with the trigger's press state.", + "url": "https://react-spectrum.adobe.com/react-spectrum/MenuTrigger.html" + }, + { + "name": "Meter", + "definition": "Meters are visual representations of a quantity or an achievement. Their progress is determined by user actions, rather than system actions.", + "url": "https://react-spectrum.adobe.com/react-spectrum/Meter.html" + }, + { + "name": "NumberField", + "definition": "NumberFields allow users to enter a number, and increment or decrement the value using stepper buttons.", + "url": "https://react-spectrum.adobe.com/react-spectrum/NumberField.html" + }, + { + "name": "Picker", + "definition": "Pickers allow users to choose a single option from a collapsible list of options when space is limited.", + "url": "https://react-spectrum.adobe.com/react-spectrum/Picker.html" + }, + { + "name": "ProgressBar", + "definition": "ProgressBars show the progression of a system operation: downloading, uploading, processing, etc., in a visual way. They can represent either determinate or indeterminate progress.", + "url": "https://react-spectrum.adobe.com/react-spectrum/ProgressBar.html" + }, + { + "name": "ProgressCircle", + "definition": "ProgressCircles show the progression of a system operation such as downloading, uploading, or processing, in a visual way. They can represent determinate or indeterminate progress.", + "url": "https://react-spectrum.adobe.com/react-spectrum/ProgressCircle.html" + }, + { + "name": "Provider", + "definition": "Provider is the container for all React Spectrum applications. It defines the theme, locale, and other application level settings.", + "url": "https://react-spectrum.adobe.com/react-spectrum/Provider.html" + }, + { + "name": "RadioGroup", + "definition": "Radio buttons allow users to select a single option from a list of mutually exclusive options. All possible options are exposed up front for users to compare.", + "url": "https://react-spectrum.adobe.com/react-spectrum/RadioGroup.html" + }, + { + "name": "RangeCalendar", + "definition": "RangeCalendars display a grid of days in one or more months and allow users to select a contiguous range of dates.", + "url": "https://react-spectrum.adobe.com/react-spectrum/RangeCalendar.html" + }, + { + "name": "RangeSlider", + "definition": "RangeSliders allow users to quickly select a subset range. They should be used when the upper and lower bounds to the range are invariable.", + "url": "https://react-spectrum.adobe.com/react-spectrum/RangeSlider.html" + }, + { + "name": "SearchField", + "definition": "A SearchField is a text field designed for searches.", + "url": "https://react-spectrum.adobe.com/react-spectrum/SearchField.html" + }, + { + "name": "Slider", + "definition": "Sliders allow users to quickly select a value within a range. They should be used when the upper and lower bounds to the range are invariable.", + "url": "https://react-spectrum.adobe.com/react-spectrum/Slider.html" + }, + { + "name": "StatusLight", + "definition": "Status lights are used to color code categories and labels commonly found in data visualization. When status lights have a semantic meaning, they should use semantic variant colors.", + "url": "https://react-spectrum.adobe.com/react-spectrum/StatusLight.html" + }, + { + "name": "Switch", + "definition": "Switches allow users to turn an individual option on or off. They are usually used to activate or deactivate a specific setting.", + "url": "https://react-spectrum.adobe.com/react-spectrum/Switch.html" + }, + { + "name": "TableView", + "definition": "Tables are containers for displaying information. They allow users to quickly scan, sort, compare, and take action on large amounts of data.", + "url": "https://react-spectrum.adobe.com/react-spectrum/TableView.html" + }, + { + "name": "Tabs", + "definition": "Tabs organize content into multiple sections and allow users to navigate between them. The content under the set of tabs should be related and form a coherent unit.", + "url": "https://react-spectrum.adobe.com/react-spectrum/Tabs.html" + }, + { + "name": "TagGroup", + "definition": "Tags allow users to categorize content. They can represent keywords or people, and are grouped to describe an item or a search request.", + "url": "https://react-spectrum.adobe.com/react-spectrum/TagGroup.html" + }, + { + "name": "Text", + "definition": "Text represents text with no specific semantic meaning.", + "url": "https://react-spectrum.adobe.com/react-spectrum/Text.html" + }, + { + "name": "TextArea", + "definition": "TextAreas are multiline text inputs, useful for cases where users have a sizable amount of text to enter. They allow for all customizations that are available to text fields.", + "url": "https://react-spectrum.adobe.com/react-spectrum/TextArea.html" + }, + { + "name": "TextField", + "definition": "TextFields are text inputs that allow users to input custom text entries with a keyboard. Various decorations can be displayed around the field to communicate the entry requirements.", + "url": "https://react-spectrum.adobe.com/react-spectrum/TextField.html" + }, + { + "name": "TimeField", + "definition": "TimeFields allow users to enter and edit time values using a keyboard. Each part of the time is displayed in an individually editable segment.", + "url": "https://react-spectrum.adobe.com/react-spectrum/TimeField.html" + }, + { + "name": "Toast", + "definition": "Toasts display brief, temporary notifications. They're meant to be noticed without disrupting a user's experience or requiring an action to be taken.", + "url": "https://react-spectrum.adobe.com/react-spectrum/Toast.html" + }, + { + "name": "ToggleButton", + "definition": "ToggleButtons allow users to toggle a selection on or off, for example switching between two states or modes.", + "url": "https://react-spectrum.adobe.com/react-spectrum/ToggleButton.html" + }, + { + "name": "Tooltip", + "definition": "Display container for Tooltip content. Has a directional arrow dependent on its placement.", + "url": "https://react-spectrum.adobe.com/react-spectrum/Tooltip.html" + }, + { + "name": "TreeView", + "definition": "A tree view provides users with a way to navigate nested hierarchical information.", + "url": "https://react-spectrum.adobe.com/react-spectrum/TreeView.html" + }, + { + "name": "View", + "definition": "View is a general purpose container with no specific semantics that can be used for custom styling purposes. It supports Spectrum style props to ensure consistency with other Spectrum components.", + "url": "https://react-spectrum.adobe.com/react-spectrum/View.html" + }, + { + "name": "Well", + "definition": "A Well is a content container that displays non-editable content separate from other content on the screen. Often this is used to display preformatted text, such as code/markup examples on a documentation page.", + "url": "https://react-spectrum.adobe.com/react-spectrum/Well.html" + } + ] +}