# A-raf Design System

## Docs

- [Accordion](https://araf.badr.co.id/components/accordion.md): A vertically stacked set of expandable sections that reveal content on click — supports single and multiple expansion modes.
- [Alert](https://araf.badr.co.id/components/alert.md): A prominent message bar for system feedback — supports 6 semantic variants with icon, title, description, and optional action.
- [Alert Dialog](https://araf.badr.co.id/components/alert-dialog.md): A modal confirmation dialog that interrupts the user with a critical question — requiring an explicit response before proceeding.
- [Aspect Ratio](https://araf.badr.co.id/components/aspect-ratio.md): A utility wrapper that maintains a fixed width-to-height ratio for its child content — useful for images, videos, and embeds.
- [Avatar](https://araf.badr.co.id/components/avatar.md): A visual representation of a user or entity — supports images, initials fallback, status indicators, sizes, shapes, and grouped stacks.
- [Badge](https://araf.badr.co.id/components/badge.md): A compact label for communicating status, categories, counts, or metadata — available in 8 semantic variants and 3 sizes.
- [Bar Chart](https://araf.badr.co.id/components/bar-chart.md): A vertical or horizontal bar chart for comparing categorical data — built on Recharts with A'raf DS design tokens.
- [Breadcrumb](https://araf.badr.co.id/components/breadcrumb.md): A navigation aid that shows the user's current location within a hierarchical structure — supporting icons, custom separators, and collapsed states.
- [Button](https://araf.badr.co.id/components/button.md): An interactive button for triggering actions — available in multiple hierarchies, sizes, and states.
- [Calendar](https://araf.badr.co.id/components/calendar.md): A standalone month-view calendar for date and date-range selection — the base component used by Date Picker.
- [Card](https://araf.badr.co.id/components/card.md): A flexible surface container for grouping related content — supports default, flat, hoverable, stat, and media variants.
- [Carousel](https://araf.badr.co.id/components/carousel.md): A swipeable slideshow component with navigation controls, autoplay, and loop support — built on Embla Carousel.
- [Checkbox](https://araf.badr.co.id/components/checkbox.md): A binary selection control for checking or unchecking an option — supports labels, descriptions, indeterminate state, and groups.
- [Collapsible](https://araf.badr.co.id/components/collapsible.md): A simple show/hide toggle for a section of content — a lightweight alternative to Accordion when only one expandable area is needed.
- [Command](https://araf.badr.co.id/components/command.md): A searchable command palette (⌘K) for quickly navigating, running actions, and filtering options — keyboard-first by design.
- [Context Menu](https://araf.badr.co.id/components/context-menu.md): A right-click triggered floating menu — provides contextual actions for the element under the cursor.
- [Date Picker](https://araf.badr.co.id/components/date-picker.md): A calendar-based input for selecting a single date or a date range — supports locale formatting, min/max constraints, and controlled state.
- [Drawer](https://araf.badr.co.id/components/drawer.md): A bottom sheet panel that slides up from the bottom of the screen — optimized for mobile and touch interactions.
- [Dropdown Menu](https://araf.badr.co.id/components/dropdown-menu.md): A floating menu triggered by a button click — supports icons, keyboard shortcuts, sub-menus, separators, and destructive items.
- [Form](https://araf.badr.co.id/components/form.md): Composable form wrappers that connect to React Hook Form — providing consistent label, helper text, error message, and field spacing across all form elements.
- [Header Navigation](https://araf.badr.co.id/components/header-navigation.md): The primary navigation bar at the top of the page — available in 7 layout types and 2 breakpoints.
- [Hover Card](https://araf.badr.co.id/components/hover-card.md): A card that appears when hovering over a trigger — ideal for user profile previews, link previews, and supplementary details.
- [Icons](https://araf.badr.co.id/components/icons.md): A'raf DS uses Lucide React as its icon system — 1,000+ icons available as React components, sized via props and colored via CSS currentColor.
- [Input](https://araf.badr.co.id/components/input.md): A single-line text field for user data entry — supports labels, icons, helper text, and four validation states.
- [Input OTP](https://araf.badr.co.id/components/input-otp.md): A one-time password input with individual digit slots — supports auto-focus progression, paste handling, and error states.
- [Label](https://araf.badr.co.id/components/label.md): A styled form label with correct accessibility association — supports required indicators and disabled states.
- [Line Chart](https://araf.badr.co.id/components/line-chart.md): A continuous line chart for visualizing trends over time — supports multiple lines, area fill, and interactive tooltips.
- [Menubar](https://araf.badr.co.id/components/menubar.md): An application-style horizontal menu bar with dropdown menus — modeled after native desktop app menu bars (File, Edit, View).
- [Metric Cards](https://araf.badr.co.id/components/metric-cards.md): Summary metric cards for dashboards — available in 4 display types and 2 trend states.
- [Modal / Dialog](https://araf.badr.co.id/components/modal.md): An overlay dialog that interrupts the user to capture attention for critical actions or information — supports default, warning, and destructive variants.
- [Pagination](https://araf.badr.co.id/components/pagination.md): A navigation control for moving between pages of a paginated dataset — supports ellipsis for large page counts and 3 sizes.
- [Pie Chart](https://araf.badr.co.id/components/pie-chart.md): A circular chart for visualizing part-to-whole proportions — supports pie, donut, and radial bar variants.
- [Popover](https://araf.badr.co.id/components/popover.md): A floating panel anchored to a trigger element — used for contextual content, settings panels, and quick forms without blocking the page.
- [Progress](https://araf.badr.co.id/components/progress.md): A horizontal bar that visually communicates task completion or loading state — supports 4 semantic color variants and 3 sizes.
- [Radio Group](https://araf.badr.co.id/components/radio-group.md): A set of mutually exclusive options where exactly one can be selected at a time — supports vertical, horizontal, and described layouts.
- [Resizable](https://araf.badr.co.id/components/resizable.md): A split-pane layout with a draggable divider — allows users to resize adjacent panels horizontally or vertically.
- [Scroll Area](https://araf.badr.co.id/components/scroll-area.md): A cross-browser custom scrollable container with consistent styled scrollbars — replaces native OS scrollbars.
- [Select](https://araf.badr.co.id/components/select.md): A dropdown selector for choosing one option from a list — supports labels, grouped options, placeholder, and validation states.
- [Separator](https://araf.badr.co.id/components/separator.md): A thin horizontal or vertical line for visually dividing content sections — supports decorative and semantic usage.
- [Sheet](https://araf.badr.co.id/components/sheet.md): A side-sliding overlay panel for contextual actions and detail views — slides from any edge of the screen.
- [Sidebar Navigation](https://araf.badr.co.id/components/sidebar-navigation.md): The primary vertical navigation for application layouts — available in two styles (Default & Slim) and three color themes.
- [Skeleton](https://araf.badr.co.id/components/skeleton.md): A placeholder loading state that mimics the shape of content before it loads — reduces perceived wait time with a shimmer animation.
- [Slider](https://araf.badr.co.id/components/slider.md): A draggable range input for selecting a numeric value or range along a track — supports single value, range, step, and disabled states.
- [Switch](https://araf.badr.co.id/components/switch.md): A toggle control for binary on/off settings that take immediate effect — supports labels, descriptions, and disabled state.
- [Tables](https://araf.badr.co.id/components/tables.md): A flexible data table component with 20+ cell style variations, 2 header types, and 3 interaction states.
- [Tabs](https://araf.badr.co.id/components/tabs.md): A navigation component that organizes content into switchable sections — available in underline and pill visual styles.
- [Textarea](https://araf.badr.co.id/components/textarea.md): A multi-line text input for longer user content such as descriptions, comments, and messages — supports auto-resize and character count.
- [Toast](https://araf.badr.co.id/components/toast.md): A brief, auto-dismissing notification that appears at the edge of the screen to confirm actions or display system messages.
- [Toggle](https://araf.badr.co.id/components/toggle.md): A pressable button that maintains an on/off state — used for view switching, text formatting, and filter activation.
- [Tooltip](https://araf.badr.co.id/components/tooltip.md): A small floating label that appears on hover or focus to provide contextual information about an element.
- [Design Tokens](https://araf.badr.co.id/tokens/overview.md): 1,062 design tokens across 4 collections: Foundation, Token (semantic), Component, and Theme.

## OpenAPI Specs

- [openapi](https://araf.badr.co.id/api-reference/openapi.json)