# Earth Design System (EDS)

Earth Design System is a React-based library for building accessible, consistent user interfaces.

- **Tech Stack:** React, TypeScript, Tailwind CSS
- **Core Requirement:** Most components require the [`Root`](https://earth.anywhere.co/components/root) provider at the top level.
- **Library Package:** `@adaptavant/eds-core` (Components), `@adaptavant/eds-icons` (Icons)

## Important Guidelines

- **DO NOT use deprecated components:** Avoid using `Icon` and `Symbol` from `@adaptavant/eds-core` as maintenance has officially stopped.
- **Use modern alternatives:** For icons, use the icon sets from `@adaptavant/eds-icons` package instead.
- **Check component documentation:** Always verify component props and usage patterns in the linked documentation before implementation.
- **Avoid deprecated props:** Do not use any props marked as deprecated in component documentation.
- **Deprecated prop markers:** Deprecated props use a strikethrough name and a warning callout like "⚠️ Deprecated..." in the API table.
- **Follow migration guidance:** Deprecated props may remain for compatibility, but should not be introduced in new code.

## Overview & Guidelines

- [Accessibility](https://earth.anywhere.co/content/accessibility.md): Standards for supporting disability; EDS prioritizes A11Y compliance.
- [Getting Started](https://earth.anywhere.co/content/getting-started.md): Installation and basic setup for EDS in React applications.
- [Coding Style Guide](https://earth.anywhere.co/content/coding-style-guide.md): Standards for code readability, reuse, and naming conventions.
- [Content Standards](https://earth.anywhere.co/content/content-standards.md): Voice, tone, and messaging guidelines.
- [QA Testing Guidelines](https://earth.anywhere.co/content/qa-testing-guidelines.md): How to use `data-testid` and other attributes for automated testing.

## Foundations
*Core design tokens and low-level styling logic.*

- [Border](https://earth.anywhere.co/foundations/border.md): Border radius and border width design tokens.
- [Color](https://earth.anywhere.co/foundations/color.md): Color scheme tokens for backgrounds, text, icons, borders, status, decorations, and more.
- [Layout](https://earth.anywhere.co/foundations/layout.md): Layout utilities including the centric layout class for centering and constraining content.
- [Motion](https://earth.anywhere.co/foundations/motion.md): Animation duration and easing design tokens.
- [Shadow](https://earth.anywhere.co/foundations/shadow.md): Shadow elevation tokens for consistent depth effects across themes.
- [Size and Space](https://earth.anywhere.co/foundations/size-and-space.md): Spacing and sizing design tokens.
- [Typography](https://earth.anywhere.co/foundations/typography.md): Font family, font styles (heading/body), and font weight tokens.

## Components

- [Accordion](https://earth.anywhere.co/components/accordion.md): Accordion is a stacked list of expandable items that users can open and close to reveal or hide content.
- [Alert](https://earth.anywhere.co/components/alert.md): Alert component displays important information to the user.
- [AlertModal](https://earth.anywhere.co/components/alert-modal.md): AlertModal (aka AlertDialog ) is a specialized modal component for displaying urgent or critical messages that require immediate user attention and de...
- [AlignChildToText](https://earth.anywhere.co/components/align-child-to-text.md): Component that uses a zero-width space to vertically align a child element such as an icon with a line of text.
- [Avatar](https://earth.anywhere.co/components/avatar.md): Avatar is a visual representation of a user.
- [Badge](https://earth.anywhere.co/components/badge.md): A badge is a visual label or indicator used to convey status or highlight content.
- [Box](https://earth.anywhere.co/components/box.md): A generic unstyled layout component that acts as a flexible foundation for building custom structures and semantics.
- [Button](https://earth.anywhere.co/components/button.md): Buttons are clickable elements that are used to trigger actions.
- [ButtonLink](https://earth.anywhere.co/components/button-link.md): The appearance of a button, with the semantics of a link.
- [CalDynamicIcon](https://earth.anywhere.co/components/cal-dynamic-icon.md): A dynamic SVG icon component.
- [Calendar](https://earth.anywhere.co/components/calendar.md): A calendar component that allows users to select a single date.
- [Checkbox](https://earth.anywhere.co/components/checkbox.md): Checkboxes allow users to select multiple items from a list of individual items, or to mark one individual item as selected.
- [Chip](https://earth.anywhere.co/components/chip.md): Chips are used to toggle an action, their label should express what action will occur when the user interacts with it.
- [ClickableAdornment](https://earth.anywhere.co/components/clickable-adornment.md): In order to provide more context as to what value an input expects to receive, sometimes it is helpful to use an adornment.
- [ColorSwatches](https://earth.anywhere.co/components/color-swatches.md): The ColorSwatches component allows a user to select a color from a list of colors.
- [Combobox](https://earth.anywhere.co/components/combobox.md): Combobox is a composable component which allows users to filter a list of items.
- [ComboboxEditor](https://earth.anywhere.co/components/combobox-editor.md): The ComboboxEditor is a Hybrid Combobox, which allows users to enter text, add tags from a list and quickly filter choices.
- [ComboboxMultiSelect](https://earth.anywhere.co/components/combobox-multi-select.md): ComboboxMultiSelect allows users to choose multiple options from a predefined list.
- [DatePicker](https://earth.anywhere.co/components/date-picker.md): The DatePicker component allows users to select a date from a calendar.
- [DropdownMenu](https://earth.anywhere.co/components/dropdown-menu.md): A component that displays a menu to the user with a list of actions or functions when the menu trigger is pressed.
- [Field](https://earth.anywhere.co/components/field.md): The field component exposes the elements around form inputs, and an API to compose them.
- [Fieldset](https://earth.anywhere.co/components/fieldset.md): The Fieldset provides an accessible way to group a set of form components.
- [FilterMenu](https://earth.anywhere.co/components/filter-menu.md): FilterMenu allows a user to choose from a list of options, which can be filtered.
- [GetPro](https://earth.anywhere.co/components/get-pro.md): GetPro is a visual indicator that informs users they are in a "Free" subscription and serves as a prompt to switch to "Paid" plans.
- [Heading](https://earth.anywhere.co/components/heading.md): The heading component is used to communicate hierarchy between sections of content.
- [Icon](https://earth.anywhere.co/components/icon.md): 🚧 Attention: Icon maintenance in this package has been offically stopped.
- [IconButton](https://earth.anywhere.co/components/icon-button.md): Use an IconButton when you need to provide an action for a user to take in a compact space.
- [IconLink](https://earth.anywhere.co/components/icon-link.md): Use an IconLink when you need to provide an link in a compact space.
- [Image](https://earth.anywhere.co/components/image.md): Enhanced image component with lazy loading and required alt text.
- [IndicatorBadge](https://earth.anywhere.co/components/indicator-badge.md): The IndicatorBadge overlays a visual indicator (badge with count or dot) at a corner of wrapped content to communicate notifications alerts.
- [InlineField](https://earth.anywhere.co/components/inline-field.md): Much like the Field component, the InlineField offers an accessible way to label inputs but provides a different visual treatment.
- [IntegrationTile](https://earth.anywhere.co/components/integration-tile.md): IntegrationTile is a visual component designed to present third-party service integrations in a clean, clickable card format.
- [Loading](https://earth.anywhere.co/components/loading.md): The Loading component provides a spinning animation that can give a visual clue that the application is loading data.
- [MenuItem](https://earth.anywhere.co/components/menu-item.md): The MenuItem component represents a selectable option in UI elements like DropdownMenu, Combobox, and FilterMenu.
- [Modal](https://earth.anywhere.co/components/modal.md): A modal (aka "dialog") component that prevents interaction with the rest of the application.
- [NavigationBar](https://earth.anywhere.co/components/navigation-bar.md): The NavigationBar component represents a navigation bar fixed to the bottom of the screen.
- [OTPInput](https://earth.anywhere.co/components/otp-input.md): The OTPInput component provides a secure way for users to enter one-time passwords (OTP) or verification codes.
- [PageHeader](https://earth.anywhere.co/components/page-header.md): The PageHeader component provides a consistent layout structure for page-level navigation and actions.
- [Popover](https://earth.anywhere.co/components/popover.md): The Popover component is responsible for rendering the visual layout and styles of popovers.
- [Progress](https://earth.anywhere.co/components/progress.md): A Progress component that visually represents the completion percentage of a task or goal.
- [QrCode](https://earth.anywhere.co/components/qr-code.md): QR codes are two-dimensional barcodes that can store various types of data and be scanned by devices to quickly access information.
- [Radio](https://earth.anywhere.co/components/radio.md): Radio buttons allow users to select a single option from a list of multiple options.
- [RadioGroup](https://earth.anywhere.co/components/radio-group.md): Use a RadioGroup to control a group of radio buttons.
- [Root](https://earth.anywhere.co/components/root.md): The Root component serves as the top-level wrapper for the design system, providing essential context providers and applying base styling with color s...
- [SearchInput](https://earth.anywhere.co/components/search-input.md): The search input is created using <TextInput /> comes with various sizes and variants and is wrapped using <Field /> component.
- [Select](https://earth.anywhere.co/components/select.md): Allows the user to make a single selection from a short list of values within a form context.
- [SelectCard](https://earth.anywhere.co/components/select-card.md): A SelectCard is a controlled component that allows users to select one or more options from a set of options.
- [SelectMenu](https://earth.anywhere.co/components/select-menu.md): The SelectMenu is an accessible and customisable dropdown menu that allows users to select an option from the list.
- [Sheet](https://earth.anywhere.co/components/sheet.md): The Sheet component is a container that acts as a supplementary view, providing access to important contextual information.
- [Slider](https://earth.anywhere.co/components/slider.md): Sliders allow users to make selections from a range of values.
- [Snackbar](https://earth.anywhere.co/components/snackbar.md): Snackbar component helps to display temporary notifications of actions, errors or other events.
- [Stack](https://earth.anywhere.co/components/stack.md): A vertical layout component that evenly distributes children with consistent spacing between each item.
- [StatusPanel](https://earth.anywhere.co/components/status-panel.md): StatusPanel component displays contextual information with clear visual hierarchy.
- [Symbol](https://earth.anywhere.co/components/symbol.md): 🚧 Attention: Symbol maintenance in this package has been offically stopped.
- [Table](https://earth.anywhere.co/components/table.md): Tables display information in an easily scannable format, helping users identify patterns and insights.
- [Tabs](https://earth.anywhere.co/components/tabs.md): Represents a set of tabs that allows users to switch between different content views.
- [Tag](https://earth.anywhere.co/components/tag.md): A tag component is an item with a short label, which helps in any categorization or filtering.
- [Text](https://earth.anywhere.co/components/text.md): The Text component helps you style text with design system tokens.
- [Textarea](https://earth.anywhere.co/components/textarea.md): TextAreas are multiline text inputs, useful for cases where users have a sizable amount of text to enter.
- [TextInput](https://earth.anywhere.co/components/text-input.md): The TextInput component provides a way for inputting text.
- [TextLink](https://earth.anywhere.co/components/text-link.md): TextLink allow users to navigate to a different location.
- [TimePicker](https://earth.anywhere.co/components/timepicker.md): Time Picker is an input field for entering or selecting a specific time.
- [TimeZonePicker](https://earth.anywhere.co/components/time-zone-picker.md): You can create a TimeZonePicker by using the useTimeZonePicker hook with a FilterMenu .
- [Toggle](https://earth.anywhere.co/components/toggle.md): The Toggle component lets users switch between two states, like on or off.
- [Tooltip](https://earth.anywhere.co/components/tooltip.md): A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.
- [Track](https://earth.anywhere.co/components/track.md): A layout component which allows you to layout elements with 2 optional fixed "rails" and a fluid center (think railway track).
- [VirtualTable](https://earth.anywhere.co/components/virtual-table.md): A virtualized table component for efficiently rendering large datasets.

## Icons

- [Icon](https://earth.anywhere.co/icons/icon.md): Icons set available in "eds-icons" package.
- [Symbol](https://earth.anywhere.co/icons/symbol.md): Symbols set available in "eds-icons" package.

## Widgets

- [CropModal](https://earth.anywhere.co/widgets/crop-modal.md): The CropModal is a comprehensive image cropping solution designed for modern web applications.
- [GetProModal](https://earth.anywhere.co/widgets/get-pro-modal.md): A GetProModal is built with design system components and guidelines to promote premium features and encourage users to upgrade.
- [HelpAndSupport](https://earth.anywhere.co/widgets/help-and-support.md): A comprehensive, responsive help and support widget that provides users with easy access to customer support options through a trigger-popover interfa...
- [IndustryDropdown](https://earth.anywhere.co/widgets/industry-dropdown.md): An IndustryDropdown component provides a searchable interface for selecting business types.
- [ShareModal](https://earth.anywhere.co/widgets/share-modal.md): A ShareModal is build with a design system components and guidelines that enables users to share a link or content effortlessly.
- [WorkingHours](https://earth.anywhere.co/widgets/working-hours.md): A WorkingHours component lets users define daily start and end times for availability.

## Changelog

- [Releases](https://earth.anywhere.co/changelog.md): Version history and migration notes.