@mdigital_ui/ui 0.2.6 → 0.2.8

package/README.md

@@ -1,63 +1,73 @@
-# @mdigital/ui
+# @mdigital_ui/ui
 
 Modern React component library built with Tailwind CSS v4, designed for multi-brand support and maximum customization.
 
 ## Features
 
-- ✅ **50+ Components** - Comprehensive UI component library
-- ✅ **Tailwind CSS v4** - Modern utility-first CSS framework
-- ✅ **TypeScript** - Full type safety and IntelliSense
-- ✅ **Dark Mode** - Built-in dark mode support
-- ✅ **Multi-Brand** - CSS variable-based theming system
-- ✅ **Tree-Shakeable** - Optimal bundle size with ESM
-- ✅ **Accessible** - WCAG 2.1 AA compliant
-- ✅ **React 19** - Modern React patterns (no forwardRef)
+- **57 Components** - Comprehensive UI component library
+- **Tailwind CSS v4** - Modern utility-first CSS with OKLCH colors
+- **TypeScript** - Full type safety and IntelliSense
+- **Dark Mode** - Built-in dark mode support via `.dark` class
+- **Theme Presets** - Pre-built color schemes (Corporate, Vibrant, Minimal)
+- **CSS Variables** - Override any design token without rebuilding
+- **Tree-Shakeable** - Optimal bundle size with ESM
+- **Accessible** - WCAG 2.1 AA compliant
+- **React 19** - Modern React patterns (no forwardRef)
 
 ## Installation
 
 ```bash
 npm install @mdigital_ui/ui
+# or
+pnpm add @mdigital_ui/ui
 ```
 
-**That's it!** All dependencies and styles are included. Tree-shaking ensures only the components you import end up in your production bundle.
-
 ### Peer Dependencies
 
-You need to have these in your project:
-
+Required:
 ```bash
 npm install react react-dom
 ```
 
+Optional (for specific components):
+```bash
+# For Carousel component
+npm install swiper
+
+# For Table component (advanced features)
+npm install @tanstack/react-table
+
+# For Chart components
+npm install recharts
+
+# For DatePicker component
+npm install react-datepicker
+```
+
 ## Quick Start
 
 ### 1. Import Styles
 
-In your main application entry point (e.g., `app/layout.tsx` or `src/main.tsx`):
+In your main entry point (e.g., `app/layout.tsx` or `src/main.tsx`):
 
 ```tsx
-// Import the base styles
-import '@mdigital_ui/ui/styles/base.css'
-// Import light theme (default)
+// Required: Global styles and light theme
+import '@mdigital_ui/ui/styles/global.css'
 import '@mdigital_ui/ui/styles/themes/light.css'
-// Optional: Import dark theme for dark mode support
-import '@mdigital_ui/ui/styles/themes/dark.css'
-```
 
-**Or** import in your CSS file:
+// Optional: Dark mode support
+import '@mdigital_ui/ui/styles/themes/dark.css'
 
-```css
-/* app/globals.css or src/index.css */
-@import '@mdigital_ui/ui/styles/base.css';
-@import '@mdigital_ui/ui/styles/themes/light.css';
-/* Optional: Dark mode */
-@import '@mdigital_ui/ui/styles/themes/dark.css';
+// Optional: Theme presets
+import '@mdigital_ui/ui/styles/themes/presets/corporate.css'
+import '@mdigital_ui/ui/styles/themes/presets/vibrant.css'
+import '@mdigital_ui/ui/styles/themes/presets/minimal.css'
 ```
 
 ### 2. Use Components
 
 ```tsx
-import { Button, Input, Card } from '@mdigital/ui'
+import { Button, Input, Card } from '@mdigital_ui/ui'
 
 function App() {
   return (
@@ -71,383 +81,1083 @@ function App() {
 }
 ```
 
-## Import Patterns
-
-### Subpath Imports (Recommended)
+## Customization with ClassNames
 
-```tsx
-import Button from '@mdigital_ui/ui/button'
-import Input from '@mdigital_ui/ui/input'
-import Table from '@mdigital_ui/ui/table'
-```
+Every component in the UI kit supports fine-grained styling through the `classNames` prop. This allows you to override styles for individual component parts without modifying the entire component.
 
-**Tree-shaking works automatically:**
-- Import only `Button`? Only Button code ends up in your bundle
-- Import `Table`? Table + @tanstack/react-table are bundled
-- Don't import `Carousel`? Swiper never touches your bundle
+### How ClassNames Work
 
-### Named Imports
+The `classNames` prop accepts an object where each key corresponds to a specific part of the component. Values are CSS class strings that are merged with the component's default classes using semantic class names.
 
-```tsx
-import { Button, Input, Select } from '@mdigital_ui/ui'
-```
+**Key Principles:**
 
-Both import styles work identically. Use whichever you prefer.
+1. **Semantic Classes**: Each part uses a semantic class name in the format `{componentName}_{slot}` (e.g., `button_root`, `input_label`)
+2. **Data Attributes**: All parts include `data-slot` attributes for CSS targeting
+3. **Class Merging**: Custom classes are merged with default classes, allowing you to:
+   - Add Tailwind utilities
+   - Override specific properties
+   - Add state-based styles
 
-### Type Imports
+### Basic Usage
 
 ```tsx
-import type { ButtonProps, InputProps } from '@mdigital_ui/ui'
+import Button from '@mdigital_ui/ui/button'
+
+function App() {
+  return (
+    <Button
+      classNames={{
+        root: 'shadow-lg hover:shadow-xl',
+        icon: 'text-white',
+        content: 'font-bold uppercase',
+      }}
+    >
+      Click Me
+    </Button>
+  )
+}
 ```
 
-## Theming & Customization
+### Targeting via Semantic Classes in CSS
 
-The UI Kit uses **CSS custom properties (variables)** for all design tokens, making it easy to customize without touching Tailwind's configuration.
+Use semantic class names in your CSS files:
 
-### Quick Customization
+```css
+/* Target the root button element */
+.button_root {
+  border-radius: 12px;
+  font-family: 'Inter', sans-serif;
+}
 
-Create a CSS file to override any design tokens:
+/* Target button icon */
+.button_icon {
+  margin: 0 4px;
+}
 
-```css
-/* app/theme.css or src/theme.css */
-:root {
-  /* Brand Colors */
-  --color-primary: oklch(0.55 0.22 270);        /* Purple primary */
-  --color-primary-hover: oklch(0.50 0.24 270);
-  --color-accent: oklch(0.75 0.18 45);          /* Orange accent */
+/* Combine with states */
+.button_root:hover {
+  transform: scale(1.05);
+}
+```
 
-  /* Semantic Colors */
-  --color-success: oklch(0.65 0.20 140);
-  --color-error: oklch(0.60 0.25 20);
+### Using Data-Slot Attributes
 
-  /* Component Sizing */
-  --button-height-md: 2.5rem;
-  --input-height-md: 2.5rem;
-  --radius-md: 0.5rem;
+Target component parts using `data-slot` attributes:
 
-  /* Typography */
-  --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
-  --text-base: 1rem;
+```css
+/* Target via data attribute (highest specificity) */
+[data-slot="root"] {
+  /* Styles */
+}
+
+[data-slot="content"] {
+  /* Styles */
 }
 ```
 
-Then import it **after** the UI Kit styles:
+### Combining with Tailwind Classes
+
+Mix custom Tailwind classes with component classNames:
 
 ```tsx
-import '@mdigital_ui/ui/styles/base.css'
-import '@mdigital_ui/ui/styles/themes/light.css'
-import './theme.css'  // Your customizations
+<Input
+  classNames={{
+    root: 'custom-wrapper',
+    input: 'bg-blue-50 text-blue-900 focus:ring-blue-500',
+    label: 'font-semibold text-blue-700',
+  }}
+/>
 ```
 
-### Available Variables
+### TypeScript Support
 
-<details>
-<summary><strong>🎨 Colors (Click to expand)</strong></summary>
+Import type definitions for full IntelliSense:
 
-```css
-/* Brand Colors */
---color-primary
---color-primary-hover
---color-primary-active
---color-primary-foreground
---color-secondary
---color-secondary-hover
---color-secondary-active
---color-secondary-foreground
---color-accent
---color-accent-hover
---color-accent-active
---color-accent-foreground
-
-/* Semantic Colors */
---color-success
---color-success-hover
---color-success-active
---color-error
---color-error-hover
---color-error-active
---color-warning
---color-warning-hover
---color-warning-active
---color-info
---color-info-hover
---color-info-active
-
-/* Backgrounds & Surfaces */
---color-background
---color-background-secondary
---color-surface
---color-border
---color-border-primary
-
-/* Text Colors */
---color-text-primary
---color-text-secondary
---color-text-muted
+```tsx
+import type { ButtonClassNames, InputClassNames, SelectClassNames } from '@mdigital_ui/ui'
 
-/* Grayscale */
---color-gray-50 through --color-gray-950
---color-white
---color-black
+const buttonClasses: ButtonClassNames = {
+  root: 'custom-root',
+  icon: 'custom-icon',
+  content: 'custom-content',
+  spinner: 'custom-spinner',
+}
+
+<Button classNames={buttonClasses}>Submit</Button>
 ```
-</details>
 
-<details>
-<summary><strong>📐 Sizing & Spacing (Click to expand)</strong></summary>
+### ClassNames Reference
+
+Each component below documents all available `classNames` keys. Use these to target specific parts of the component for styling.
+
+#### Form Components
+
+**Input**
+
+| Key | Semantic Class | Purpose |
+|-----|----------------|---------|
+| root | input_root | Wrapper div containing label and input |
+| wrapper | input_wrapper | Input wrapper with positioning context |
+| label | input_label | Label element |
+| input | input_input | Input element |
+| leftIcon | input_leftIcon | Left icon container |
+| rightIcon | input_rightIcon | Right icon container |
+| clearButton | input_clearButton | Clear button element |
+| helper | input_helper | Helper/hint text |
+| error | input_error | Error message text |
+
+**InputPassword**
+
+| Key | Semantic Class | Purpose |
+|-----|----------------|---------|
+| root | inputPassword_root | Wrapper div |
+| wrapper | inputPassword_wrapper | Input wrapper with positioning |
+| label | inputPassword_label | Label element |
+| input | inputPassword_input | Password input element |
+| toggleButton | inputPassword_toggleButton | Show/hide toggle button |
+| toggleIcon | inputPassword_toggleIcon | Toggle icon element |
+| helper | inputPassword_helper | Helper text |
+| error | inputPassword_error | Error message text |
+
+**InputOTP**
+
+| Key | Semantic Class | Purpose |
+|-----|----------------|---------|
+| root | inputOTP_root | Root wrapper |
+| wrapper | inputOTP_wrapper | Input slots container |
+| label | inputOTP_label | Label element |
+| slot | inputOTP_slot | Individual OTP input slot |
+| slotActive | inputOTP_slotActive | Active/focused slot |
+| separator | inputOTP_separator | Separator between slots |
+| helper | inputOTP_helper | Helper text |
+
+**InputGroup**
+
+| Key | Semantic Class | Purpose |
+|-----|----------------|---------|
+| root | inputGroup_root | Root wrapper |
+| addon | inputGroup_addon | Addon (prefix/suffix) element |
+| input | inputGroup_input | Input element |
+
+**Textarea**
+
+| Key | Semantic Class | Purpose |
+|-----|----------------|---------|
+| root | textarea_root | Wrapper div |
+| wrapper | textarea_wrapper | Textarea wrapper |
+| label | textarea_label | Label element |
+| textarea | textarea_textarea | Textarea element |
+| counter | textarea_counter | Character count display |
+| helper | textarea_helper | Helper text |
+| error | textarea_error | Error message |
+
+**Select**
+
+| Key | Semantic Class | Purpose |
+|-----|----------------|---------|
+| root | select_root | Root wrapper |
+| trigger | select_trigger | Dropdown trigger button |
+| triggerIcon | select_triggerIcon | Icon in trigger |
+| dropdown | select_dropdown | Dropdown menu container |
+| search | select_search | Search input in dropdown |
+| option | select_option | Individual option item |
+| optionSelected | select_optionSelected | Selected option |
+| group | select_group | Option group container |
+| groupLabel | select_groupLabel | Group label |
+| empty | select_empty | Empty state message |
+| label | select_label | Form label |
+| helper | select_helper | Helper text |
+
+**MultiSelect**
+
+| Key | Semantic Class | Purpose |
+|-----|----------------|---------|
+| root | multiSelect_root | Root wrapper |
+| trigger | multiSelect_trigger | Trigger button |
+| tag | multiSelect_tag | Selected item tag |
+| tagRemove | multiSelect_tagRemove | Remove button in tag |
+| dropdown | multiSelect_dropdown | Dropdown menu |
+| option | multiSelect_option | Option item |
+| optionSelected | multiSelect_optionSelected | Selected option |
+| selectAll | multiSelect_selectAll | Select all checkbox |
+| empty | multiSelect_empty | Empty state |
+| label | multiSelect_label | Form label |
+| helper | multiSelect_helper | Helper text |
+
+**Checkbox**
+
+| Key | Semantic Class | Purpose |
+|-----|----------------|---------|
+| root | checkbox_root | Root wrapper |
+| checkbox | checkbox_checkbox | Checkbox element |
+| indicator | checkbox_indicator | Checkmark indicator |
+| label | checkbox_label | Label text |
+| description | checkbox_description | Description text |
+
+**CheckboxGroup**
+
+| Key | Semantic Class | Purpose |
+|-----|----------------|---------|
+| root | checkboxGroup_root | Root wrapper |
+| label | checkboxGroup_label | Group label |
+| group | checkboxGroup_group | Items container |
+| item | checkboxGroup_item | Individual checkbox |
+| helper | checkboxGroup_helper | Helper text |
+| error | checkboxGroup_error | Error message |
+
+**Radio**
+
+| Key | Semantic Class | Purpose |
+|-----|----------------|---------|
+| root | radio_root | Root wrapper |
+| radio | radio_radio | Radio button element |
+| indicator | radio_indicator | Selection indicator |
+| label | radio_label | Label text |
+| description | radio_description | Description text |
+
+**RadioGroup**
+
+| Key | Semantic Class | Purpose |
+|-----|----------------|---------|
+| root | radioGroup_root | Root wrapper |
+| label | radioGroup_label | Group label |
+| group | radioGroup_group | Items container |
+| item | radioGroup_item | Individual radio |
+| helper | radioGroup_helper | Helper text |
+| error | radioGroup_error | Error message |
+
+**Switch**
+
+| Key | Semantic Class | Purpose |
+|-----|----------------|---------|
+| root | switch_root | Root wrapper |
+| track | switch_track | Track/background |
+| thumb | switch_thumb | Animated thumb |
+| label | switch_label | Label text |
+| description | switch_description | Description text |
+
+**Slider**
+
+| Key | Semantic Class | Purpose |
+|-----|----------------|---------|
+| root | slider_root | Root wrapper |
+| track | slider_track | Track background |
+| range | slider_range | Active range fill |
+| thumb | slider_thumb | Draggable thumb |
+| label | slider_label | Label text |
+| value | slider_value | Value display |
+
+**Rating**
+
+| Key | Semantic Class | Purpose |
+|-----|----------------|---------|
+| root | rating_root | Root wrapper |
+| star | rating_star | Star element |
+| starFilled | rating_starFilled | Filled star |
+| label | rating_label | Label text |
+
+**DatePicker**
+
+| Key | Semantic Class | Purpose |
+|-----|----------------|---------|
+| root | datePicker_root | Root wrapper |
+| trigger | datePicker_trigger | Input trigger |
+| calendar | datePicker_calendar | Calendar container |
+| header | datePicker_header | Calendar header |
+| navigation | datePicker_navigation | Navigation controls |
+| day | datePicker_day | Day cell |
+| daySelected | datePicker_daySelected | Selected day |
+| dayToday | datePicker_dayToday | Today indicator |
+
+**Upload**
+
+| Key | Semantic Class | Purpose |
+|-----|----------------|---------|
+| root | upload_root | Root wrapper |
+| dropzone | upload_dropzone | Drag-drop area |
+| input | upload_input | File input |
+| icon | upload_icon | Icon element |
+| text | upload_text | Text content |
+| hint | upload_hint | Hint/instructions |
+| fileList | upload_fileList | Files list container |
+| fileItem | upload_fileItem | Individual file item |
+| progress | upload_progress | Upload progress bar |
+
+#### Layout & Action Components
+
+**Button**
+
+| Key | Semantic Class | Purpose |
+|-----|----------------|---------|
+| root | button_root | Root button element |
+| icon | button_icon | Icon container |
+| spinner | button_spinner | Loading spinner container |
+| content | button_content | Button text content |
+
+**ButtonGroup**
+
+| Key | Semantic Class | Purpose |
+|-----|----------------|---------|
+| root | buttonGroup_root | Root wrapper |
+| button | buttonGroup_button | Individual button |
+
+**Card**
+
+| Key | Semantic Class | Purpose |
+|-----|----------------|---------|
+| root | card_root | Root card element |
+| header | card_header | Header section |
+| title | card_title | Title element |
+| description | card_description | Description text |
+| content | card_content | Main content area |
+| footer | card_footer | Footer section |
+| action | card_action | Action buttons area |
+| image | card_image | Image element |
+
+**Modal**
+
+| Key | Semantic Class | Purpose |
+|-----|----------------|---------|
+| root | modal_root | Root wrapper |
+| overlay | modal_overlay | Backdrop overlay |
+| content | modal_content | Modal content box |
+| header | modal_header | Header section |
+| title | modal_title | Title element |
+| description | modal_description | Description text |
+| body | modal_body | Body content |
+| footer | modal_footer | Footer section |
+| closeButton | modal_closeButton | Close button |
+
+**Drawer**
+
+| Key | Semantic Class | Purpose |
+|-----|----------------|---------|
+| root | drawer_root | Root wrapper |
+| overlay | drawer_overlay | Backdrop overlay |
+| content | drawer_content | Drawer content box |
+| header | drawer_header | Header section |
+| title | drawer_title | Title element |
+| description | drawer_description | Description text |
+| body | drawer_body | Body content |
+| footer | drawer_footer | Footer section |
+| handle | drawer_handle | Drag handle (mobile) |
+| closeButton | drawer_closeButton | Close button |
+
+**Accordion**
+
+| Key | Semantic Class | Purpose |
+|-----|----------------|---------|
+| root | accordion_root | Root wrapper |
+| item | accordion_item | Individual accordion item |
+| trigger | accordion_trigger | Item trigger/header |
+| content | accordion_content | Item content |
+| icon | accordion_icon | Expand/collapse icon |
+
+**Tabs**
+
+| Key | Semantic Class | Purpose |
+|-----|----------------|---------|
+| root | tabs_root | Root wrapper |
+| list | tabs_list | Tab list container |
+| tab | tabs_tab | Individual tab |
+| tabActive | tabs_tabActive | Active tab |
+| panel | tabs_panel | Tab panel content |
+
+**Collapse**
+
+| Key | Semantic Class | Purpose |
+|-----|----------------|---------|
+| root | collapse_root | Root wrapper |
+| header | collapse_header | Header/trigger |
+| content | collapse_content | Collapsible content |
+| icon | collapse_icon | Toggle icon |
+
+**Toggle**
+
+| Key | Semantic Class | Purpose |
+|-----|----------------|---------|
+| root | toggle_root | Root toggle element |
+
+**ToggleGroup**
+
+| Key | Semantic Class | Purpose |
+|-----|----------------|---------|
+| root | toggleGroup_root | Root wrapper |
+| item | toggleGroup_item | Individual toggle item |
+
+#### Navigation Components
+
+**Dropdown**
+
+| Key | Semantic Class | Purpose |
+|-----|----------------|---------|
+| root | dropdown_root | Root wrapper |
+| trigger | dropdown_trigger | Trigger button |
+| menu | dropdown_menu | Menu container |
+| item | dropdown_item | Menu item |
+| itemIcon | dropdown_itemIcon | Item icon |
+| itemLabel | dropdown_itemLabel | Item label |
+| divider | dropdown_divider | Divider line |
+
+**ContextMenu**
+
+| Key | Semantic Class | Purpose |
+|-----|----------------|---------|
+| root | contextMenu_root | Root wrapper |
+| content | contextMenu_content | Menu content |
+| item | contextMenu_item | Menu item |
+| itemIcon | contextMenu_itemIcon | Item icon |
+| itemLabel | contextMenu_itemLabel | Item label |
+| divider | contextMenu_divider | Divider line |
+| submenu | contextMenu_submenu | Submenu container |
+
+**Breadcrumbs**
+
+| Key | Semantic Class | Purpose |
+|-----|----------------|---------|
+| root | breadcrumbs_root | Root wrapper |
+| list | breadcrumbs_list | Breadcrumb list |
+| item | breadcrumbs_item | Individual breadcrumb |
+| link | breadcrumbs_link | Link element |
+| separator | breadcrumbs_separator | Separator between items |
+| current | breadcrumbs_current | Current page indicator |
+
+**Pagination**
+
+| Key | Semantic Class | Purpose |
+|-----|----------------|---------|
+| root | pagination_root | Root wrapper |
+| list | pagination_list | Items list |
+| item | pagination_item | Individual page item |
+| button | pagination_button | Page button |
+| buttonActive | pagination_buttonActive | Active page button |
+| ellipsis | pagination_ellipsis | Ellipsis indicator |
+| info | pagination_info | Info text |
+
+**Stepper**
+
+| Key | Semantic Class | Purpose |
+|-----|----------------|---------|
+| root | stepper_root | Root wrapper |
+| step | stepper_step | Individual step |
+| stepActive | stepper_stepActive | Active step |
+| stepCompleted | stepper_stepCompleted | Completed step |
+| icon | stepper_icon | Step icon |
+| label | stepper_label | Step label |
+| description | stepper_description | Step description |
+| connector | stepper_connector | Connector line between steps |
+
+#### Feedback Components
+
+**Notification**
+
+| Key | Semantic Class | Purpose |
+|-----|----------------|---------|
+| root | notification_root | Root wrapper |
+| icon | notification_icon | Icon element |
+| content | notification_content | Content container |
+| title | notification_title | Title text |
+| description | notification_description | Description text |
+| action | notification_action | Action button |
+| closeButton | notification_closeButton | Close button |
+
+**Tooltip**
+
+| Key | Semantic Class | Purpose |
+|-----|----------------|---------|
+| root | tooltip_root | Root wrapper |
+| trigger | tooltip_trigger | Trigger element |
+| content | tooltip_content | Tooltip content |
+| arrow | tooltip_arrow | Arrow element |
+
+**Popover**
+
+| Key | Semantic Class | Purpose |
+|-----|----------------|---------|
+| root | popover_root | Root wrapper |
+| trigger | popover_trigger | Trigger element |
+| content | popover_content | Popover content |
+| arrow | popover_arrow | Arrow element |
+| closeButton | popover_closeButton | Close button |
+
+**Progress**
+
+| Key | Semantic Class | Purpose |
+|-----|----------------|---------|
+| root | progress_root | Root wrapper |
+| track | progress_track | Background track |
+| fill | progress_fill | Progress fill |
+| label | progress_label | Label text |
+| value | progress_value | Value display |
+
+#### Data Display Components
+
+**Table**
+
+| Key | Semantic Class | Purpose |
+|-----|----------------|---------|
+| root | table_root | Root wrapper |
+| wrapper | table_wrapper | Table container |
+| header | table_header | Table head |
+| headerRow | table_headerRow | Header row |
+| headerCell | table_headerCell | Header cell |
+| body | table_body | Table body |
+| row | table_row | Table row |
+| cell | table_cell | Table cell |
+| footer | table_footer | Table footer |
+| pagination | table_pagination | Pagination area |
+| empty | table_empty | Empty state |
+| skeleton | table_skeleton | Loading skeleton |
+| actions | table_actions | Actions column |
+
+**Tree**
+
+| Key | Semantic Class | Purpose |
+|-----|----------------|---------|
+| root | tree_root | Root wrapper |
+| node | tree_node | Tree node |
+| nodeContent | tree_nodeContent | Node content |
+| icon | tree_icon | Node icon |
+| expandIcon | tree_expandIcon | Expand/collapse icon |
+| label | tree_label | Node label |
+| children | tree_children | Children container |
+
+**TreeSelect**
+
+| Key | Semantic Class | Purpose |
+|-----|----------------|---------|
+| root | treeSelect_root | Root wrapper |
+| trigger | treeSelect_trigger | Trigger button |
+| dropdown | treeSelect_dropdown | Dropdown menu |
+| tree | treeSelect_tree | Tree container |
+| node | treeSelect_node | Tree node |
+| checkbox | treeSelect_checkbox | Node checkbox |
+| label | treeSelect_label | Node label |
+
+**Tag**
+
+| Key | Semantic Class | Purpose |
+|-----|----------------|---------|
+| root | tag_root | Root wrapper |
+| content | tag_content | Tag content |
+| closeButton | tag_closeButton | Remove button |
+
+**Avatar**
+
+| Key | Semantic Class | Purpose |
+|-----|----------------|---------|
+| root | avatar_root | Root element |
+| image | avatar_image | Image element |
+| fallback | avatar_fallback | Fallback text |
+| status | avatar_status | Status indicator |
+
+**AvatarGroup**
+
+| Key | Semantic Class | Purpose |
+|-----|----------------|---------|
+| root | avatarGroup_root | Root wrapper |
+| overflow | avatarGroup_overflow | Overflow indicator |
+
+**Descriptions**
+
+| Key | Semantic Class | Purpose |
+|-----|----------------|---------|
+| root | descriptions_root | Root wrapper |
+| item | descriptions_item | Description item |
+| label | descriptions_label | Label text |
+| content | descriptions_content | Content text |
+
+**Empty**
+
+| Key | Semantic Class | Purpose |
+|-----|----------------|---------|
+| root | empty_root | Root wrapper |
+| icon | empty_icon | Icon element |
+| title | empty_title | Title text |
+| description | empty_description | Description text |
+| action | empty_action | Action buttons |
+
+**Image**
+
+| Key | Semantic Class | Purpose |
+|-----|----------------|---------|
+| root | image_root | Root wrapper |
+| image | image_image | Image element |
+| placeholder | image_placeholder | Placeholder |
+| error | image_error | Error state |
+
+**Carousel**
+
+| Key | Semantic Class | Purpose |
+|-----|----------------|---------|
+| root | carousel_root | Root wrapper |
+| wrapper | carousel_wrapper | Slides wrapper |
+| slide | carousel_slide | Individual slide |
+| navigation | carousel_navigation | Navigation area |
+| navButton | carousel_navButton | Navigation button |
+| pagination | carousel_pagination | Pagination area |
+| dot | carousel_dot | Pagination dot |
+| dotActive | carousel_dotActive | Active dot |
+
+**Command**
+
+| Key | Semantic Class | Purpose |
+|-----|----------------|---------|
+| root | command_root | Root wrapper |
+| input | command_input | Command input |
+| inputIcon | command_inputIcon | Input icon |
+| list | command_list | Commands list |
+| empty | command_empty | Empty state |
+| group | command_group | Command group |
+| groupLabel | command_groupLabel | Group label |
+| item | command_item | Command item |
+| itemIcon | command_itemIcon | Item icon |
+| shortcut | command_shortcut | Keyboard shortcut |
+
+**Cascader**
+
+| Key | Semantic Class | Purpose |
+|-----|----------------|---------|
+| root | cascader_root | Root wrapper |
+| trigger | cascader_trigger | Trigger button |
+| dropdown | cascader_dropdown | Dropdown menu |
+| menu | cascader_menu | Menu column |
+| option | cascader_option | Menu option |
+
+**Transfer**
+
+| Key | Semantic Class | Purpose |
+|-----|----------------|---------|
+| root | transfer_root | Root wrapper |
+| list | transfer_list | Individual list |
+| header | transfer_header | List header |
+| search | transfer_search | Search input |
+| item | transfer_item | Transfer item |
+| actions | transfer_actions | Action buttons |
+
+**Clipboard**
+
+| Key | Semantic Class | Purpose |
+|-----|----------------|---------|
+| root | clipboard_root | Root wrapper |
+| input | clipboard_input | Hidden input |
+| button | clipboard_button | Copy button |
+
+#### Single-Element Components
+
+Single-element components don't have a `classNames` prop. Instead, pass classes directly via the `className` prop or target via semantic CSS classes:
+
+| Component | Semantic Class |
+|-----------|----------------|
+| Badge | badge_root |
+| Divider | divider_root |
+| Kbd | kbd_root |
+| Skeleton | skeleton_root |
+| Spinner | spinner_root |
+| Ribbon | ribbon_root |
+| Grid | grid_root |
+| FetchingOverlay | fetchingOverlay_root |
+| Chart | chart_root |
 
-```css
-/* Button Sizes */
---button-height-xs: 1.75rem
---button-height-sm: 2rem
---button-height-md: 2.25rem
---button-height-lg: 2.75rem
---button-padding-x-xs: 0.5rem
---button-padding-x-sm: 0.75rem
---button-padding-x-md: 0.875rem
---button-padding-x-lg: 1.25rem
-
-/* Input Sizes */
---input-height-xs: 1.75rem
---input-height-sm: 2rem
---input-height-md: 2.25rem
---input-height-lg: 2.75rem
---input-padding-x-xs through --input-padding-x-lg
-
-/* Select Sizes */
---select-height-xs through --select-height-lg
---select-padding-x-xs through --select-padding-x-lg
-
-/* Checkbox/Radio Sizes */
---checkbox-size-xs: 0.875rem
---checkbox-size-sm: 1rem
---checkbox-size-md: 1.125rem
---checkbox-size-lg: 1.375rem
-
-/* Switch Sizes */
---switch-width-xs through --switch-width-lg
---switch-height-xs through --switch-height-lg
-
-/* Spacing Scale */
---spacing-0 through --spacing-12
+```tsx
+// Direct className
+<Badge className="custom-badge-style">New</Badge>
+
+// Or target via CSS
+<style>
+  .badge_root {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  }
+</style>
 ```
-</details>
 
-<details>
-<summary><strong>✏️ Typography (Click to expand)</strong></summary>
+### Advanced Examples
 
-```css
-/* Font Families */
---font-sans: ui-sans-serif, system-ui, sans-serif
---font-mono: ui-monospace, 'SF Mono', monospace
+**Theme-based customization:**
 
-/* Font Sizes */
---text-xs: 0.75rem
---text-sm: 0.875rem
---text-base: 0.9rem
---text-lg: 1.125rem
+```tsx
+const isDark = useTheme()
+
+<Button
+  classNames={{
+    root: isDark ? 'dark:bg-slate-800 dark:text-white' : 'bg-white',
+    content: 'font-semibold uppercase tracking-wide',
+  }}
+>
+  Themed Button
+</Button>
+```
 
-/* Font Weights */
---font-weight-normal: 400
---font-weight-medium: 500
---font-weight-semibold: 600
---font-weight-bold: 700
+**Combining multiple approaches:**
 
-/* Label Sizes */
---label-font-size-xs through --label-font-size-lg
+```tsx
+<Input
+  className="mx-4 my-2"
+  classNames={{
+    root: 'my-custom-wrapper',
+    input: 'border-2 border-blue-300 focus:border-blue-600',
+    label: 'text-blue-900 font-bold',
+  }}
+  style={{ maxWidth: '400px' }}
+/>
 ```
-</details>
 
-<details>
-<summary><strong>🎭 Effects & Decoration (Click to expand)</strong></summary>
+**Component composition with consistent styling:**
 
-```css
-/* Border Radius */
---radius-none: 0px
---radius-sm: 0.25rem
---radius-md: 0.375rem
---radius-lg: 0.5rem
---radius-xl: 0.625rem
---radius-2xl: 0.75rem
---radius-3xl: 1rem
---radius-full: 9999px
+```tsx
+const formClasses = {
+  label: 'text-sm font-semibold text-gray-700',
+  helper: 'text-xs text-gray-500 mt-1',
+  error: 'text-xs text-red-600 mt-1',
+}
 
-/* Shadows */
---shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05)
---shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1)
---shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1)
---shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1)
---shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25)
+<div>
+  <Input classNames={formClasses} label="Email" />
+  <Input classNames={formClasses} label="Password" type="password" />
+  <Button classNames={{ content: 'font-bold' }}>Submit</Button>
+</div>
+```
 
-/* Transitions */
---transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1)
---transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1)
---transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1)
+## Available Components
+
+### Form Components (16)
+
+| Component | Description | Import |
+|-----------|-------------|--------|
+| **Input** | Text input with validation states | `@mdigital_ui/ui/input` |
+| **InputGroup** | Input with addons (icons, buttons) | `@mdigital_ui/ui/input-group` |
+| **InputPassword** | Password input with visibility toggle | `@mdigital_ui/ui/input-password` |
+| **InputOTP** | One-time password input | `@mdigital_ui/ui/input-otp` |
+| **Textarea** | Multi-line text input | `@mdigital_ui/ui/textarea` |
+| **Select** | Dropdown selection | `@mdigital_ui/ui/select` |
+| **MultiSelect** | Multiple selection dropdown | `@mdigital_ui/ui/multi-select` |
+| **Checkbox** | Toggle option | `@mdigital_ui/ui/checkbox` |
+| **CheckboxGroup** | Grouped checkboxes | `@mdigital_ui/ui/checkbox-group` |
+| **Radio** | Single selection | `@mdigital_ui/ui/radio` |
+| **RadioGroup** | Grouped radio buttons | `@mdigital_ui/ui/radio-group` |
+| **Switch** | Toggle switch | `@mdigital_ui/ui/switch` |
+| **Toggle** | Toggle button | `@mdigital_ui/ui/toggle` |
+| **Slider** | Range slider | `@mdigital_ui/ui/slider` |
+| **Rating** | Star rating | `@mdigital_ui/ui/rating` |
+| **DatePicker** | Date selection (requires react-datepicker) | `@mdigital_ui/ui/date-picker` |
+| **Upload** | File upload | `@mdigital_ui/ui/upload` |
+
+### Display Components (13)
+
+| Component | Description | Import |
+|-----------|-------------|--------|
+| **Card** | Content container | `@mdigital_ui/ui/card` |
+| **Badge** | Status indicator | `@mdigital_ui/ui/badge` |
+| **Tag** | Label chip | `@mdigital_ui/ui/tag` |
+| **Avatar** | User profile image | `@mdigital_ui/ui/avatar` |
+| **Skeleton** | Loading placeholder | `@mdigital_ui/ui/skeleton` |
+| **Empty** | Empty state | `@mdigital_ui/ui/empty` |
+| **Spinner** | Loading indicator | `@mdigital_ui/ui/spinner` |
+| **Progress** | Progress bar | `@mdigital_ui/ui/progress` |
+| **Ribbon** | Corner ribbon | `@mdigital_ui/ui/ribbon` |
+| **Divider** | Content separator | `@mdigital_ui/ui/divider` |
+| **Kbd** | Keyboard key | `@mdigital_ui/ui/kbd` |
+| **Descriptions** | Key-value display | `@mdigital_ui/ui/descriptions` |
+| **Image** | Optimized image with blur loading | `@mdigital_ui/ui/image` |
+
+### Navigation Components (6)
+
+| Component | Description | Import |
+|-----------|-------------|--------|
+| **Tabs** | Tabbed navigation | `@mdigital_ui/ui/tabs` |
+| **Breadcrumbs** | Hierarchical navigation | `@mdigital_ui/ui/breadcrumbs` |
+| **Pagination** | Page navigation | `@mdigital_ui/ui/pagination` |
+| **Dropdown** | Dropdown menu | `@mdigital_ui/ui/dropdown` |
+| **Stepper** | Step progress indicator | `@mdigital_ui/ui/stepper` |
+
+### Feedback Components (6)
+
+| Component | Description | Import |
+|-----------|-------------|--------|
+| **Modal** | Dialog overlay | `@mdigital_ui/ui/modal` |
+| **Drawer** | Side panel | `@mdigital_ui/ui/drawer` |
+| **Tooltip** | Hover information | `@mdigital_ui/ui/tooltip` |
+| **Popover** | Contextual popup | `@mdigital_ui/ui/popover` |
+| **Notification** | Toast messages | `@mdigital_ui/ui/notification` |
+| **FetchingOverlay** | Loading overlay | `@mdigital_ui/ui/fetching-overlay` |
+
+### Data Display Components (8)
+
+| Component | Description | Import |
+|-----------|-------------|--------|
+| **Table** | Data table with sorting/filtering | `@mdigital_ui/ui/table` |
+| **Tree** | Hierarchical tree view | `@mdigital_ui/ui/tree` |
+| **TreeSelect** | Tree selection dropdown | `@mdigital_ui/ui/tree-select` |
+| **Transfer** | Dual list selector | `@mdigital_ui/ui/transfer` |
+| **Cascader** | Cascading selection | `@mdigital_ui/ui/cascader` |
+| **Collapse** | Collapsible panels | `@mdigital_ui/ui/collapse` |
+| **Accordion** | Accordion panels | `@mdigital_ui/ui/accordion` |
+
+### Layout Components (4)
+
+| Component | Description | Import |
+|-----------|-------------|--------|
+| **Button** | Button with variants | `@mdigital_ui/ui/button` |
+| **ButtonGroup** | Grouped buttons | `@mdigital_ui/ui/button-group` |
+| **ToggleGroup** | Toggle button group | `@mdigital_ui/ui/toggle-group` |
+| **Grid** | Responsive grid system | `@mdigital_ui/ui/grid` |
+
+### Advanced Components (5)
+
+| Component | Description | Import |
+|-----------|-------------|--------|
+| **Chart** | LineChart, BarChart, AreaChart, PieChart | `@mdigital_ui/ui/chart` |
+| **Carousel** | Image/content slider (requires Swiper) | `@mdigital_ui/ui/carousel` |
+| **Command** | Command palette | `@mdigital_ui/ui/command` |
+| **ContextMenu** | Right-click menu | `@mdigital_ui/ui/context-menu` |
+| **Clipboard** | Copy to clipboard | `@mdigital_ui/ui/clipboard` |
+
+### Utilities (1)
+
+| Component | Description | Import |
+|-----------|-------------|--------|
+| **ThemeProvider** | Theme management with persistence | `@mdigital_ui/ui/theme` |
+
+## Import Patterns
+
+### Subpath Imports (Recommended for tree-shaking)
 
-/* Z-Index Layers */
---z-dropdown: 1000
---z-sticky: 1020
---z-modal: 1040
---z-popover: 1050
---z-tooltip: 1060
+```tsx
+import Button from '@mdigital_ui/ui/button'
+import Input from '@mdigital_ui/ui/input'
+import Table from '@mdigital_ui/ui/table'
 ```
-</details>
 
-### Example: Custom Brand Theme
+### Named Imports
 
-See [`examples/custom-theme.css`](./examples/custom-theme.css) for a complete template with all available variables and comments.
+```tsx
+import { Button, Input, Select } from '@mdigital_ui/ui'
+```
 
-Quick example:
+### Type Imports
 
-```css
-/* brand-theme.css */
-:root {
-  /* Acme Corp Brand Colors */
-  --color-primary: oklch(0.60 0.20 200);        /* Acme Blue */
-  --color-primary-hover: oklch(0.55 0.22 200);
-  --color-secondary: oklch(0.55 0.15 320);      /* Acme Purple */
-  --color-accent: oklch(0.75 0.18 160);         /* Acme Green */
-
-  /* Rounded Everything */
-  --radius-sm: 0.5rem;
-  --radius-md: 0.75rem;
-  --radius-lg: 1rem;
-
-  /* Larger Buttons */
-  --button-height-sm: 2.25rem;
-  --button-height-md: 2.75rem;
-  --button-height-lg: 3.25rem;
-
-  /* Custom Font */
-  --font-sans: 'Poppins', ui-sans-serif, system-ui, sans-serif;
-}
+```tsx
+import type { ButtonProps, InputProps } from '@mdigital_ui/ui'
 ```
 
+## Theming
+
 ### Dark Mode
 
-Enable dark mode by adding the `dark` class to your HTML element:
+Enable dark mode by adding the `dark` class to your `<html>` element:
 
 ```tsx
-// Example with state
-const [isDark, setIsDark] = useState(false)
-
 <html className={isDark ? 'dark' : ''}>
   <body>{children}</body>
 </html>
 ```
 
-All components automatically adapt to dark mode via CSS variables.
+All components automatically adapt via CSS variables.
 
-### Creating Custom Themes
+### Theme Presets
 
-Create your own theme file:
+Pre-built color schemes for quick brand customization:
 
-```css
-/* my-brand-theme.css */
-:root {
-  --color-primary: oklch(0.6 0.2 150);  /* Green */
-  --color-secondary: oklch(0.5 0.15 30);  /* Orange */
-  --color-background: oklch(98% 0 0);
-  --color-text-primary: oklch(20% 0 0);
-}
-```
+| Preset | Style | Use Case |
+|--------|-------|----------|
+| `corporate` | Professional navy blue | Enterprise, dashboards |
+| `vibrant` | Bold purple/magenta | Creative apps, consumer products |
+| `minimal` | Muted grayscale | Content-focused, reading interfaces |
 
-## Components
+**Usage:**
 
-### Core Components
+```tsx
+// 1. Import preset CSS
+import '@mdigital_ui/ui/styles/themes/presets/corporate.css'
 
-- **Button** - Primary action buttons with variants
-- **Input** - Form input with validation
-- **Select** - Dropdown selection
-- **Checkbox** - Toggle option
-- **Radio** - Single selection
-- **Switch** - Toggle switch
-- **Textarea** - Multi-line text input
+// 2. Apply via data-theme attribute on <html>
+<html data-theme="corporate">
+  <body>{children}</body>
+</html>
+```
 
-### Display Components
+**Combine with dark mode:**
 
-- **Card** - Content container
-- **Badge** - Status indicator
-- **Tag** - Label chip
-- **Avatar** - User profile image
-- **Skeleton** - Loading placeholder
-- **Empty** - Empty state
-- **Spinner** - Loading indicator
+```tsx
+<html className="dark" data-theme="vibrant">
+  <body>{children}</body>
+</html>
+```
 
-### Navigation
+**Dynamic switching:**
 
-- **Tabs** - Tabbed navigation
-- **Breadcrumbs** - Hierarchical navigation
-- **Pagination** - Page navigation
-- **Dropdown** - Dropdown menu
+```tsx
+import '@mdigital_ui/ui/styles/themes/presets/corporate.css'
+import '@mdigital_ui/ui/styles/themes/presets/vibrant.css'
+import '@mdigital_ui/ui/styles/themes/presets/minimal.css'
 
-### Feedback
+function App() {
+  const [preset, setPreset] = useState<'corporate' | 'vibrant' | 'minimal'>('corporate')
 
-- **Modal** - Dialog overlay
-- **Drawer** - Side panel
-- **Tooltip** - Hover information
-- **Popover** - Contextual popup
-- **Notification** - Toast message
-- **Progress** - Progress indicator
+  useEffect(() => {
+    document.documentElement.setAttribute('data-theme', preset)
+  }, [preset])
 
-### Data Display
+  return (
+    <Select
+      value={preset}
+      onChange={(e) => setPreset(e.target.value)}
+      options={[
+        { value: 'corporate', label: 'Corporate' },
+        { value: 'vibrant', label: 'Vibrant' },
+        { value: 'minimal', label: 'Minimal' },
+      ]}
+    />
+  )
+}
+```
 
-- **Table** - Data table with sorting
-- **Descriptions** - Key-value pairs
-- **Tree** - Hierarchical data
-- **Timeline** - Event timeline
+### ThemeProvider
 
-### Advanced
+For full theme management with persistence and SSR support:
 
-- **DatePicker** - Date selection
-- **Upload** - File upload
-- **Transfer** - Dual list selector
-- **Cascader** - Cascading selection
-- **TreeSelect** - Tree selection
+```tsx
+import { ThemeProvider, useTheme } from '@mdigital_ui/ui'
 
-[See full component list and documentation](https://storybook.mdigital.com)
+function App() {
+  return (
+    <ThemeProvider defaultTheme="system" storageKey="my-app-theme">
+      <YourApp />
+    </ThemeProvider>
+  )
+}
 
-## Customization
+function ThemeToggle() {
+  const { theme, setTheme, resolvedTheme } = useTheme()
 
-### Three Levels of Customization
+  return (
+    <button onClick={() => setTheme(resolvedTheme === 'dark' ? 'light' : 'dark')}>
+      {resolvedTheme === 'dark' ? '☀️' : '🌙'}
+    </button>
+  )
+}
+```
 
-#### 1. CSS Variables (Global)
+### Custom CSS Variables
+
+Override any design token in your CSS:
 
 ```css
 :root {
+  /* Brand Colors */
   --color-primary: oklch(0.55 0.22 270);
+  --color-primary-hover: oklch(0.50 0.24 270);
+  --color-accent: oklch(0.75 0.18 45);
+
+  /* Component Sizing */
+  --button-height-md: 2.5rem;
+  --input-height-md: 2.5rem;
+  --radius-md: 0.5rem;
+
+  /* Typography */
+  --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
 }
 ```
 
-#### 2. className Prop (Instance)
+Import after UI Kit styles:
 
 ```tsx
-<Button className="shadow-lg hover:scale-105">
-  Custom Button
-</Button>
+import '@mdigital_ui/ui/styles/global.css'
+import '@mdigital_ui/ui/styles/themes/light.css'
+import './your-theme.css'  // Your overrides
 ```
 
-#### 3. Wrapper Components (New Variants)
+### Available CSS Variables
+
+#### Colors
+```css
+/* Brand */
+--color-primary, --color-primary-hover, --color-primary-active, --color-primary-foreground
+--color-secondary, --color-secondary-hover, --color-secondary-active, --color-secondary-foreground
+--color-accent, --color-accent-hover, --color-accent-active, --color-accent-foreground
 
+/* Semantic */
+--color-success, --color-error, --color-warning, --color-info (with hover/active variants)
+
+/* Surfaces */
+--color-background, --color-background-secondary, --color-surface, --color-card
+--color-border, --color-border-primary
+
+/* Text */
+--color-text-primary, --color-text-secondary, --color-text-muted
+
+/* Grayscale */
+--color-gray-50 through --color-gray-950
+```
+
+#### Sizing
+```css
+/* Buttons */
+--button-height-xs/sm/md/lg
+--button-padding-x-xs/sm/md/lg
+
+/* Inputs */
+--input-height-xs/sm/md/lg
+--input-padding-x-xs/sm/md/lg
+
+/* Switch */
+--switch-width-xs/sm/md/lg/xl
+--switch-height-xs/sm/md/lg/xl
+
+/* Spacing */
+--spacing-0 through --spacing-12
+```
+
+#### Effects
+```css
+/* Border Radius */
+--radius-none, --radius-sm, --radius-md, --radius-lg, --radius-xl, --radius-full
+
+/* Shadows */
+--shadow-sm, --shadow-md, --shadow-lg, --shadow-xl, --shadow-2xl
+
+/* Transitions */
+--transition-fast, --transition-base, --transition-slow
+
+/* Z-Index */
+--z-dropdown, --z-sticky, --z-modal, --z-popover, --z-tooltip
+```
+
+## External Dependencies
+
+Some components require additional setup:
+
+### Carousel (Swiper)
 ```tsx
-function GlassButton({ className, ...props }) {
-  return (
-    <Button
-      className={cn(
-        'bg-white/10 backdrop-blur-md border-white/20',
-        className
-      )}
-      {...props}
-    />
-  )
-}
+npm install swiper
+
+// Import CSS in your entry file
+import 'swiper/css'
+import 'swiper/css/pagination'
+import 'swiper/css/navigation'
+```
+
+### DatePicker (react-datepicker)
+```tsx
+npm install react-datepicker
+```
+
+### Table (TanStack Table)
+```tsx
+npm install @tanstack/react-table
+```
+
+### Charts (Recharts)
+```tsx
+npm install recharts
 ```
 
 ## TypeScript
 
-Full TypeScript support with auto-generated types:
+Full TypeScript support:
 
 ```tsx
-import type { ButtonProps } from '@mdigital/ui'
+import type { ButtonProps, ButtonColor, ButtonVariant } from '@mdigital_ui/ui'
 
 const MyButton: React.FC<ButtonProps> = (props) => {
   return <Button {...props} />
@@ -458,19 +1168,11 @@ const MyButton: React.FC<ButtonProps> = (props) => {
 
 All components follow WCAG 2.1 AA standards:
 
-- ✅ Keyboard navigation
-- ✅ Screen reader support
-- ✅ Focus indicators
-- ✅ ARIA attributes
-- ✅ Color contrast compliance
-
-## Bundle Size
-
-Optimized for minimal bundle impact:
-
-- Single component: ~3-8kb (gzipped)
-- Full package (tree-shaken): ~20-40kb (gzipped)
-- CSS variables: ~2kb (gzipped)
+- Keyboard navigation
+- Screen reader support
+- Focus indicators
+- ARIA attributes
+- Color contrast compliance
 
 ## Browser Support
 
@@ -479,26 +1181,6 @@ Optimized for minimal bundle impact:
 - Safari (latest 2 versions)
 - Edge (latest 2 versions)
 
-## Documentation
-
-- [Storybook](https://storybook.mdigital.com) - Interactive component playground
-- [Theming Guide](./docs/theming.md) - Detailed theming documentation
-- [Migration Guide](./docs/migration.md) - Upgrade guides
-
-## Contributing
-
-Internal contributions welcome! Please follow the [contribution guidelines](./CONTRIBUTING.md).
-
 ## License
 
 MIT © MDigital
-
-## Support
-
-For issues or questions:
-- Internal Slack: #design-system
-- Issues: [GitHub Issues](https://github.com/mdigital/ui/issues)
-
----
-
-Made with ❤️ by the MDigital Design System Team