npm package: @mudahmy/mudah-ds
Description: Mudah design system
Latest version: 2.7.1

# Mudah UI Design System

Mudah UI Design System is a comprehensive suite offering design tokens, guidelines, theming solutions, and a component library. It aids Mudah's front-end and mobile engineers in building consistent UIs more efficiently.

## About Mudah UI Design System

### Mudah UI Design System includes:
- A set of theme specifications defining primitive Mudah UI design tokens.
- A workbench to preview all available components and their usage guides.
- A suite of CLI tools to assist in generating new components.

### Mudah UI Design System does NOT include:
- A base framework for creating Mudah web apps.
- An end-user-facing web application.
- Any full web page.

## Building Components

- 📚 [Storybook](https://storybook.js.org) for UI component development and [auto-generated docs](https://medium.com/storybookjs/storybook-docs-sneak-peak-5be78445094a).
- ⚛️ [React](https://reactjs.org/), our core UI library for declarative component-centric UI development.
- 📄 [Panda Css](https://panda-css.com/) for CSS-in-JS with build-time generated styles, RSC compatibility, multi-variant support, and best-in-class developer experience.
- ⬇️ [MDX](https://mdxjs.com) within Storybook for seamless React / JSX documentation.

## Maintaining the System

- 📦 [PNPM](https://pnpm.io/) as the preferred package manager's CLI.
- 📦 [NPM](https://www.npmjs.com/) for packaging and distribution.
- 🚥 [GitHub Action](https://github.com/carousell/md-design-system/actions) for continuous integration (CI).

## Components Status

**Date update:** 2024-04-25

### Atom Components

| No  | Component Name                                             | DWeb   | MWeb      | Android   | iOS       |
|-----|------------------------------------------------------------|--------|-----------|-----------|-----------|
| 1   | [Accordion](/docs/atoms-accordion--docs)                   | ✅ 1.3+ | ✅ 1.3+   |           |           |
| 2   | [Button](/docs/atoms-button--docs)                         | ✅ 1.3+ | ✅ 1.3+   |           |           |
| 3   | [Chips](/docs/atoms-chip--docs)                            | ✅ 1.3+ | ✅ 1.3+   |           |           |
| 4   | [Checkbox](/docs/atoms-checkbox--docs)                     | ✅ 1.3+ | ✅ 1.3+   |           |           |
| 5   | [Radio Button](/docs/atoms-radiobutton--docs)              | ✅ 1.3+ | ✅ 1.3+   |           |           |
| 6   | [Switches (Material)](/docs/atoms-toggleswitch--docs)      | ✅ 1.3+ | ✅ 1.3+   |           |           |
| 7   | Toggle (iOS)                                               | n/a     | n/a       |           |           |
| 8   | [Labels](/docs/atoms-label--docs)                          | ✅ 1.3+ | ✅ 1.3+   |           |           |
| 9   | [List](/docs/atoms-list--docs)                             | ✅ 1.3+ | ✅ 1.3+   |           |           |
| 10  | [Pagination](/docs/atoms-pagination--docs)                 | ✅ 1.3+ | ✅ 1.3+   |           |           |
| 11  | [Progress Indicator](/docs/atoms-progress-indicator--docs) | ✅ 1.3+ | ✅ 1.3+   |           |           |
| 12  | [Sliders](/docs/atoms-slider--docs)                        | ✅ 1.3+ | ✅ 1.3+   |           |           |
| 13  | [Tabs](/docs/atoms-tab--docs)                              | ✅ 1.3+ | ✅ 1.3+   |           |           |
| 14  | [TextArea](/docs/atoms-textarea--docs)                     | ✅ 1.3+ | ✅ 1.3+   |           |           |
| 14  | [TextInput](/docs/atoms-input--docs)                       | ✅ 1.3+ | ✅ 1.3+   |           |           |
| 15  | [Tooltips](/docs/atoms-tooltip--docs)                      | ✅ 1.3+ | ✅ 1.3+   |           |           |

### Molecule Components

| No | Component Name                                                 | DWeb       | MWeb      | Android   | iOS       |
|----|----------------------------------------------------------------|------------|-----------|-----------|-----------|
| 1  | Appbar & Header                                                |            |           |           |           |
| 2  | [Bottom Sheet](/docs/molecules-bottomsheet--docs)              | ✅ 1.3+    | ✅ 1.3+   |           |           |
| 3  | Bottom Navigation                                              |            |           |           |           |
| 4  | [Card](/docs/molecules-card--docs)                             | ✅ 1.3+    | ✅ 1.3+   |           |           |
| 5  | [Dropdown](/docs/molecules-dropdown--docs)                     | ✅ 1.3+    | ✅ 1.3+   |           |           |
| 6  | [Dropdown Group](/docs/molecules-dropdowngroup--docs)          | ✅ 1.3+    | ✅ 1.3+   |           |           |
| 7  | Dropdown Range                                                 |            |           |           |           |
| 8  | [Date Picker](/docs/molecules-datepicker--docs)                | ✅ 1.3+    | ✅ 1.3+   |           |           |
| 9  | [Dialogs](/docs/molecules-dialog--docs)                        | ✅ 1.3+    | ✅ 1.3+   |           |           |
| 10 | [Infobox](/docs/molecules-infobox--docs)                       | ✅ 1.3+    | ✅ 1.3+   |           |           |
| 11 | Navigation Drawer                                              |            |           |           |           |
| 12 | [Popup](/docs/molecules-popup--docs)                           | ✅ 1.3+    | ✅ 1.3+   |           |           |
| 13 | [Searchbar](/docs/molecules-searchbar--docs)                   | ✅ 1.3+    | ✅ 1.3+   |           |           |
| 14 | Searchbar - multiselect                                        |            |           |           |           |
| 15 | [Snackbars](/docs/molecules-snackbar--docs)                    | ✅ 1.3+    | ✅ 1.3+   |           |           |
| 16 | Tables                                                         |            |           |           |           |
| 17 | [Onboarding Tooltips](/docs/molecules-onboardingtooltip--docs) | ✅ 1.3+    | ✅ 1.3+   |           |           |