@ds-mo/ui 0.3.0 → 0.4.0

package/src/docs/ElevationUsage.mdx

@@ -1,95 +0,0 @@
-import { Meta } from '@storybook/addon-docs/blocks';
-
-<Meta title="Docs/Elevation Usage" />
-
-# Elevation Usage Guidelines
-
-## 1. Quick Decision Rule
-
-Use this rule first:
-
-1. if the surface touches most of its container edges, use a **panel** elevation,
-2. if the surface has breathing room on all four sides, use `flat` or `elevated`,
-3. if the surface has breathing room and is meant to visually float above other content, use `floating`,
-4. if the surface should feel inset or embedded, use `depressed`,
-5. if elevation is intentionally turned off, use `none`.
-
-In practice, panel elevations are for surfaces that touch at least three sides of the container they live in, or otherwise read as edge-attached.
-
-## 2. Panel Elevations
-
-Panel elevations are for surfaces that are attached to the boundary of the area they sit inside.
-
-These styles are directional. The panel direction should match the side of the container that the panel is attached to.
-
-This makes them the right choice for:
-
-- app headers
-- bottom bars
-- left and right drawers
-- edge-attached trays or panels
-
-| Surface | Elevation |
-|---------|-----------|
-| Top header or app bar | <code>elevation-panel-top</code> |
-| Bottom bar or footer | <code>elevation-panel-bottom</code> |
-| Left-side drawer | <code>elevation-panel-left</code> |
-| Right-side drawer | <code>elevation-panel-right</code> |
-
-> **Do not** use panel elevations on floating cards or standalone containers. They are intentionally asymmetric and will look wrong when the surface has clearance on every side.
-
-## 3. Non-Panel Elevations
-
-`flat`, `elevated`, and `floating` are for surfaces that do not touch surrounding boundaries on any of their four sides.
-
-| Level | Purpose | Use for |
-|-------|---------|---------|
-| <code>flat</code> | Lightest raised treatment | Cards, containers with subtle lift |
-| <code>elevated</code> | Standard raised treatment | Cards, free-standing containers |
-| <code>floating</code> | Visually floating above content | FABs, popups, dropdown menus, modals |
-
-> **Do not** use `floating` just because an element needs more lift than `elevated`. If the surface is not actually meant to float above other content, `flat` or `elevated` is usually the better choice.
-
-## 4. Depressed Elevation
-
-`depressed` is for elements that should appear embedded within a surrounding surface rather than raised above it.
-
-Typical use cases:
-
-- text inputs
-- embedded fields
-- inset control regions
-- surfaces that read as carved into their parent
-
-Like non-panel elevations, `depressed` should only be used when the element has visible clearance on all four sides.
-
-## 5. None
-
-`none` is for cases where elevation is part of the component model but the visual result should be no elevation treatment.
-
-Use it when:
-
-- a component supports elevation variants but should currently render flat,
-- you want to explicitly choose no elevation instead of leaving it undefined,
-- you need a zero-elevation option that fits into the same naming system.
-
-## 6. Anti-Patterns
-
-Avoid these patterns:
-
-1. using a panel elevation on a card that has open space on all four sides,
-2. using `flat`, `elevated`, `floating`, or `depressed` on a surface attached to a container edge,
-3. choosing a panel direction that does not match the aligned edge,
-4. using `depressed` for elements meant to read as raised,
-5. using `floating` on a normal card that isn't hovering above content,
-6. leaving elevation unspecified when the component API expects a named elevation style.
-
-## 7. Practical Summary
-
-| Situation | Use |
-|-----------|-----|
-| Surface attached to container boundary | Panel elevation (matching direction) |
-| Surface with clearance on all sides, standard lift | <code>flat</code> or <code>elevated</code> |
-| Surface visually hovering above other content | <code>floating</code> |
-| Surface embedded/inset into parent | <code>depressed</code> |
-| Elevation slot present but no visual lift needed | <code>none</code> |

package/src/docs/Introduction.mdx

@@ -1,97 +0,0 @@
-import { Meta } from '@storybook/addon-docs/blocks';
-
-<Meta title="Docs/Introduction" />
-
-# CompoMo — `@compomo/ui`
-
-Composable React UI components styled with [TokoMo](https://github.com/zainadeel/TokoMo) design tokens.
-
-## Install
-
-```bash
-npm install @compomo/ui @ds-mo/tokens
-```
-
-**Required peer dependency:** `@ds-mo/tokens` provides all CSS custom properties (colors, dimensions, typography, effects) that CompoMo components consume. Components will not render correctly without it.
-
-**Optional:** `@ds-mo/icons` for icon components used via the `icon` prop pattern.
-
-```bash
-npm install @ds-mo/icons
-```
-
-## Setup
-
-Import TokoMo tokens globally (once, at your app root):
-
-```tsx
-import '@ds-mo/tokens';        // all tokens (colors, dimensions, typography, effects)
-import '@ds-mo/tokens/reset';   // CSS reset
-import '@ds-mo/tokens/globals'; // global styles
-```
-
-Then import CompoMo components:
-
-```tsx
-import { Button, Text, Surface, Card } from '@compomo/ui';
-```
-
-## Components
-
-### Primitives
-- **Text** — typography with variant system, semantic colors, truncation, wrap modes
-- **Surface** — container with backgrounds, elevation, edges, radius, interactive states
-- **Card** — elevated content container with header/footer slots
-- **Input** — text input field
-- **Slider** — range slider
-- **Field** — label + input wrapper
-
-### Components
-- **Button** — primary/secondary/tertiary with intents, sizes, icon support
-- **Tag** — labels with intents, contrasts, removable
-- **Badge** — numeric count indicator
-- **Toggle** — on/off switch
-- **Checkbox** — with label and indeterminate state
-- **Modal** — dialog with title, subtitle, footer slots
-- **Menu** — dropdown with sections, selection, positioning
-- **Tooltip** — hover tooltip with shortcut key support
-- **Select** — dropdown select
-- **Banner** — notification bar with intents, toast mode
-- **Tab** — tab button with selection state
-- **Table** — sortable, paginated data table
-- **EmptyState** — placeholder states
-
-### Layout
-- **Header** — page header with left/center/right slots
-- **Sidebar** — collapsible, resizable navigation with sections and items
-
-### Utility
-- **Fade** — gradient overlay
-- **Scrollbar** — custom scrollbar
-- **ErrorBoundary** — error catch with fallback
-
-## Token dependency
-
-All styling uses TokoMo CSS custom properties. No hardcoded colors, sizes, or shadows — everything maps to the token system. Components will render unstyled if `@ds-mo/tokens` is not imported.
-
-## Icon pattern
-
-Components that accept icons use the typed prop pattern:
-
-```tsx
-icon?: React.ComponentType<{ size?: number | string }>
-```
-
-Pass any component that accepts a `size` prop. Works with `@ds-mo/icons` or custom SVG components.
-
-## Architecture
-
-```
-TokoMo (@ds-mo/tokens)     <- CSS variables, JSON, TypeScript constants; source is Figma
-    |
-IcoMo (@ds-mo/icons)       <- 380+ React icon components; source SVGs are Figma exports
-    |
-CompoMo (@compomo/ui)      <- This library; consumes tokens + icons
-    |
-Apps (Webapp, Dashboard)
-```

package/src/docs/OpticalSizing.mdx

@@ -1,178 +0,0 @@
-import { Meta } from '@storybook/addon-docs/blocks';
-
-<Meta title="Docs/Optical Sizing & Padding" />
-
-# Optical Sizing & Padding — Design Reference
-
-A collection of the specific sizing rules, corrections, and reasoning behind them.
-Intended as a reference when building new components so these patterns stay consistent.
-
----
-
-## 1. Icon-edge padding correction
-
-**The rule:** when an icon sits flush against a component's edge, the padding on that side should equal `(componentHeight - iconSize) / 2` — the same gap the icon already has top and bottom.
-
-**Why:** without this, the horizontal padding (a design-system token chosen for text) is too generous for an icon. Text has no visible bounding box so extra padding reads as breathing room. An icon has a hard visual edge, so the same padding creates an unequal-looking gap — more air on the left/right than on the top/bottom of the icon.
-
-**The formula:**
-
-```
-edge padding = (height - iconSize) / 2
-```
-
-**Button / ToggleButton (iconAndLabel layout — icon on left):**
-
-| Size | Height | Icon | Optical gap | Left padding (icon side) | Right padding (label side) |
-|------|--------|------|-------------|--------------------------|----------------------------|
-| XS | 16px | 12px | 2px | <code>space-025</code> = 2px | <code>space-025</code> = 2px |
-| SM | 24px | 16px | 4px | <code>space-050</code> = 4px | <code>space-075</code> = 6px |
-| MD | 32px | 20px | 6px | <code>space-075</code> = 6px | <code>space-100</code> = 8px |
-| LG | 40px | 24px | 8px | <code>space-100</code> = 8px | <code>space-150</code> = 12px |
-
-Note the asymmetry: the label side keeps its normal token value; only the icon side is corrected. XS happens to already be correct since the base token matches the gap.
-
-**Tag (iconLeft / iconRight — leading icon or remove button):**
-
-| Size | Height | Icon | Optical gap | CSS class |
-|------|--------|------|-------------|-----------|
-| XS | 12px | 12px | 0px | <code>iconLeftXS</code> / <code>iconRightXS</code> = <code>0</code> |
-| SM | 20px | 16px | 2px | <code>iconLeftSM</code> / <code>iconRightSM</code> = <code>space-025</code> |
-| MD | 28px | 20px | 4px | <code>iconLeftMD</code> / <code>iconRightMD</code> = <code>space-050</code> |
-
-For Tag, both the leading icon side (left) and the remove-button side (right) are corrected independently. The classes are applied conditionally in TSX based on whether an icon or remove button is present.
-
----
-
-## 2. LabelWrap inner padding
-
-**The rule:** text inside a component needs its own small horizontal padding, independent of the component's outer padding. This is the LabelWrap utility component.
-
-**Why:** without it, the component's fixed height is inflated by the body line-height: 1.5 strut — a phantom spacing artifact from inherited typography. LabelWrap sets line-height: 0 to kill the strut, then adds back a small horizontal padding that optically offsets the text from adjacent icons or component edges.
-
-**Values:**
-
-| Size | Padding | Reasoning |
-|------|---------|-----------|
-| MD / LG | <code>space-050</code> = 4px | Standard body scale |
-| SM | <code>space-025</code> = 2px | Halved — tighter scale, less air needed |
-| XS (caption) | <code>space-025</code> = 2px | Caption scale, same as SM |
-
-SM was deliberately halved because at the smaller body scale the extra 4px reads as disproportionate. XS was already at 2px so SM was brought in line with it.
-
----
-
-## 3. Rounded (pill) padding correction
-
-**The rule:** pill-shaped components add <code>space-050</code> (4px) extra padding on any side that has no content anchor (bare label text at the edge, no icon).
-
-**Why:** a pill's large corner radius curves far into the edge, eating into the visual breathing room around the text. The extra <code>space-050</code> compensates so the text doesn't feel cramped against the rounded edge. Sides that already have an icon do not get the correction — the icon acts as a visual anchor and the tighter icon-edge padding (rule 1) already applies.
-
-**Button / ToggleButton (rounded):**
-
-Added to *both* sides for labelOnly. Added only to the *label/right side* for iconAndLabel (the icon side keeps the corrected icon-edge padding from rule 1):
-
-```
-labelOnly:    padding = base + space-050 (both sides)
-iconAndLabel: left  = icon-edge padding + space-050
-              right = base + space-050
-```
-
-**Tag (rounded — pill padding correction classes):**
-
-Applied conditionally in TSX:
-
-| Condition | Class applied |
-|-----------|---------------|
-| No leading icon | <code>roundedLeft&#123;Size&#125;</code> |
-| No trailing remove | <code>roundedRight&#123;Size&#125;</code> |
-
-When both an icon and a remove button are present, neither correction applies. When neither is present (label only), both apply.
-
----
-
-## 4. Remove / dismiss button hover area
-
-**The rule:** the hover highlight on a small dismiss button (x) should maintain the same optical gap to the component edge as the icon has to the component top/bottom — and the hover highlight's border-radius should be tuned per-size so it doesn't visually eat into that gap.
-
-**Structure:** a ::before pseudo-element on the remove button carries the hover background, sized via inset (negative margin on all sides). The button itself has padding: 0.
-
-**Values (Tag remove button):**
-
-| Tag size | Icon size | Tag height | Optical gap | <code>inset</code> | Hover area | <code>::before</code> radius |
-|----------|-----------|------------|-------------|---------|------------|-------------------|
-| MD | 20px | 28px | 4px | <code>-2px</code> | 24x24px | <code>radius-025</code> = 2px |
-| SM | 16px | 20px | 2px | <code>-1px</code> | 18x18px | <code>3px</code> |
-| XS | 12px | 12px | 0px | <code>0</code> | 12x12px | <code>radius-050</code> = 4px |
-
-**Radius choices:**
-
-- MD: 2px — small enough to not visually arc into the 2px gap between the hover area and the tag edge.
-- SM: 3px — 1px gap, proportionally softer corner.
-- XS: 4px (matches the tag's own corner radius) — flush to the tag edge, creating a nested rounded rectangle effect.
-- Rounded tags: border-radius: 50% on ::before for all sizes — fully circular hover, matching the pill tag language.
-
-**Why not simply use padding on the button?** The inset approach keeps the button's layout footprint at exactly the icon size, so the tag's own padding tokens (rule 1) drive the spacing without needing to account for extra button padding.
-
----
-
-## 5. Alpha dividers in component groups
-
-**The rule:** dividers between grouped components (ButtonGroup, ToggleButtonGroup) must use an alpha color token and must be physically positioned to overlap adjacent button fills — not sit in the gap between them.
-
-**Why the token alone isn't enough:** <code>color-border-tertiary</code> = rgb(0 0 0 / 0.1) (10% black in light mode, 10% white in dark mode). This is the right token — it's designed to blend over any surface. But a 1px flex child sitting *between* two buttons composites against the group/page background, not against the button fills. When buttons have a colored pressed state (e.g. bg-faint-brand, blue) the divider still shows as 10% black over white — a gray line that breaks the blue.
-
-**The fix:**
-
-```css
-.divider {
-  position: relative;
-  z-index: 1;
-  margin: 0 -0.5px;
-  pointer-events: none;
-}
-```
-
-margin: 0 -0.5px makes the divider overlap 0.5px of each adjacent button. z-index: 1 (works because flex children with position: relative participate in stacking) causes it to paint on top of the button fills. Now rgb(0 0 0 / 0.1) composites over the actual button background — a whisper of darker blue over a pressed blue button, barely-visible gray over a white button.
-
----
-
-## 6. Divider independence from button state
-
-**The rule:** dividers in groups must be separate DOM elements, not borders or box-shadows on the buttons.
-
-**Why:** opacity: 0.5 on an inactive button would also fade a border-left or box-shadow that forms the divider. This creates visual asymmetry — the inactive button's left divider fades while its right divider (owned by the next button) stays opaque. The divider appears broken on one side.
-
-As a separate div the divider is outside any button's stacking context and unaffected by adjacent button opacity, transform, or any other state.
-
-**Ghost (elevation: none) dividers:** short centred lines at icon height, additionally hidden when an adjacent button is hovered or pressed (ghost interaction is chip-based, not full-height, so dividers adjacent to active chips should disappear):
-
-```css
-.item:hover + .dividerGhost,
-.dividerGhost:has(+ .item:hover)     { opacity: 0; }
-.itemPressed + .dividerGhost,
-.dividerGhost:has(+ .itemPressed)    { opacity: 0; }
-```
-
-Full-height dividers (elevated / flat / floating) do not hide on hover or press — they are part of the component's chrome and remain visible.
-
----
-
-## Quick reference — token ladder
-
-For convenience, the spacing tokens used across these rules:
-
-| Token | Value |
-|-------|-------|
-| <code>space-012</code> | 1px |
-| <code>space-025</code> | 2px |
-| <code>space-050</code> | 4px |
-| <code>space-075</code> | 6px |
-| <code>space-100</code> | 8px |
-| <code>space-150</code> | 12px |
-
-| Token | Value |
-|-------|-------|
-| <code>radius-025</code> | 2px |
-| <code>radius-050</code> | 4px |
-| <code>radius-half</code> | 50% |

package/src/docs/TypographyUsage.mdx

@@ -1,121 +0,0 @@
-import { Meta } from '@storybook/addon-docs/blocks';
-
-<Meta title="Docs/Typography Usage" />
-
-# Typography Usage Guidelines
-
-## 1. Quick Decision Rule
-
-Use this rule first:
-
-1. start with `body-medium` for normal product copy,
-2. use `body-small` when the text is supporting or slightly subdued,
-3. use `body-large` when you need a little more hierarchy than normal body copy,
-4. use `title-*` styles for actual titles and section headers,
-5. use `display-*` styles only for rare, oversized emphasis such as large numeric values.
-
-**If you are unsure, start with `body-medium`.**
-
-## 2. Body Styles
-
-### body-medium (default)
-
-The default text style for most product copy:
-
-- paragraph text
-- standard labels
-- most explanatory copy
-- the majority of text content in the product
-
-### body-small
-
-For supporting text that should feel slightly more subdued:
-
-- helper text
-- secondary metadata
-- supporting subtext below primary copy
-
-### body-large
-
-For text that should sit above normal body copy without becoming a true title:
-
-- emphasized labels
-- short introductory lines
-- lightweight card or section headings when a full title style would feel too strong
-
-> **Note:** Text hierarchy and color hierarchy should work together. De-emphasis usually comes from a combination of text role and foreground role rather than from color alone.
-
-## 3. Emphasis Styles
-
-Emphasis variants add more weight without changing the size tier. They are useful when:
-
-1. emphasizing a term inside a paragraph,
-2. giving one label more emphasis than another at the same body size,
-3. increasing emphasis through weight rather than a size jump.
-
-> **Important:** Emphasis variants should not replace hierarchy. If text needs to function as a heading, move to a title or display role instead of trying to create hierarchy through emphasis alone.
-
-## 4. Title Styles
-
-Use `title-*` styles for actual titles:
-
-- card titles
-- section headers
-- page section labels
-- other short text that needs to read clearly as a title rather than body copy
-
-| Style | Typical use |
-|-------|------------|
-| <code>title-small</code> | Card titles, compact section headers |
-| <code>title-medium</code> | Standard section headers, dialog titles |
-| <code>title-large</code> | Page-level headers, prominent section titles |
-
-If the text is functioning as a title, use a title style rather than forcing hierarchy by increasing body size.
-
-## 5. Underline Styles
-
-Underline treatments communicate interactive meaning:
-
-| Treatment | Meaning |
-|-----------|---------|
-| **Solid underline** | Text is a hyperlink or tappable link |
-| **Dotted underline** | Text has an associated hover/reveal interaction |
-
-- If text already uses brand bold foreground color, a solid underline isn't always required — the color can signal link behavior on its own
-- Dotted and solid can work together: dotted at rest, solid on hover (for text that discloses info and also navigates)
-
-> These underline treatments should communicate interaction meaning, not be used as decoration.
-
-## 6. Display Styles
-
-Display styles should be used **very sparingly**. They are reserved for:
-
-- large scores
-- primary summary metrics
-- rare hero-value moments (e.g., a prominent driver safety score)
-
-> Display styles should not be treated as general-purpose headings. They are intentionally dramatic and reserved for exceptional emphasis.
-
-## 7. Anti-Patterns
-
-Avoid these patterns:
-
-1. defaulting to `body-large` when normal copy should use `body-medium`,
-2. defaulting to emphasis variants instead of using them only where extra emphasis is needed,
-3. using underline treatments as decoration instead of interaction cues,
-4. using title styles for ordinary paragraph text,
-5. using display styles for common headers or labels,
-6. escalating text size too quickly when a smaller hierarchy shift would do the job.
-
-## 8. Practical Summary
-
-| Need | Style |
-|------|-------|
-| Normal product copy | <code>body-medium</code> |
-| Subdued supporting copy | <code>body-small</code> |
-| Slight hierarchy bump | <code>body-large</code> |
-| More emphasis, same size | <code>body-&#42;-emphasis</code> |
-| Link indication | Solid underline |
-| Hover/reveal indication | Dotted underline |
-| Actual titles | <code>title-small</code>, <code>title-medium</code>, <code>title-large</code> |
-| Rare oversized emphasis | <code>display-small</code>, <code>display-medium</code> |

package/src/index.ts

@@ -1,154 +0,0 @@
-// Primitives
-export { Text } from './components/Text';
-export type {
-  TextProps,
-  TextVariant,
-  TextStyle,
-  TextColor,
-  TextColorToken,
-  TextDecoration,
-  TextAlign,
-  LineTruncation,
-  TextWrap,
-  TextElement,
-} from './components/Text';
-
-export { Surface } from './components/Surface';
-export type {
-  SurfaceProps,
-  SurfaceIntent,
-  SurfaceBackground,
-  SurfaceContrast,
-  SurfaceElevation,
-  SurfaceEdge,
-  SurfaceRadius,
-  SurfaceRadiusPreset,
-  SurfaceElement,
-} from './components/Surface';
-
-export { Card } from './components/Card';
-export type { CardProps, CardElevation, CardRadius } from './components/Card';
-
-// Core Interactive
-export { Button } from './components/Button';
-export type { ButtonProps, ButtonVariant, ButtonElevation, ButtonIntent, ButtonSize, ButtonContrast, ButtonBackground } from './components/Button';
-
-export { ToggleButton } from './components/ToggleButton';
-export type { ToggleButtonProps, ToggleButtonElevation, ToggleButtonSize, ToggleButtonBackground } from './components/ToggleButton';
-
-export { ButtonGroup } from './components/ButtonGroup';
-export type { ButtonGroupProps } from './components/ButtonGroup';
-
-export { ToggleButtonGroup } from './components/ToggleButtonGroup';
-export type { ToggleButtonGroupProps } from './components/ToggleButtonGroup';
-
-export { Tag } from './components/Tag';
-export type { TagProps, TagIntent, TagContrast, TagElevation, TagSize, TagBackground } from './components/Tag';
-
-export { Badge } from './components/Badge';
-export type { BadgeProps } from './components/Badge';
-
-export { Loader } from './components/Loader';
-export type { LoaderProps } from './components/Loader';
-
-export { Toggle } from './components/Toggle';
-export type { ToggleProps } from './components/Toggle';
-
-export { Checkbox } from './components/Checkbox';
-export type { CheckboxProps } from './components/Checkbox';
-
-export { Input } from './components/Input';
-export type { InputProps } from './components/Input';
-
-export { Slider } from './components/Slider';
-export type { SliderProps } from './components/Slider';
-
-export { Field } from './components/Field';
-export type { FieldProps } from './components/Field';
-
-// Floating / Portal
-export { Modal } from './components/Modal';
-export type { ModalProps, ModalWidth } from './components/Modal';
-
-export { Menu } from './components/Menu';
-export type { MenuProps, MenuSection, MenuItemData, MenuSide, MenuAlign } from './components/Menu';
-export { MenuItem } from './components/Menu';
-export type { MenuItemProps, MenuItemSelectionStyle } from './components/Menu';
-export { DestructiveMenuItem } from './components/Menu';
-export type { DestructiveMenuItemProps } from './components/Menu';
-
-export { Tooltip } from './components/Tooltip';
-export type { TooltipProps, TooltipSide, TooltipAlign } from './components/Tooltip';
-
-export { Select } from './components/Select';
-export type { SelectProps, SelectOption } from './components/Select';
-
-export { Banner } from './components/Banner';
-export type { BannerProps, BannerIntent, BannerContrast } from './components/Banner';
-
-// Complex & Utility
-export { Table } from './components/Table';
-export type {
-  TableProps,
-  TableColumn,
-  SortState,
-  SortDirection,
-  CellType,
-  FilterValue,
-  FilterState,
-  PaginationState,
-} from './components/Table';
-
-export { Tab } from './components/Tab';
-export type { TabProps, TabBackground } from './components/Tab';
-
-export { EmptyState } from './components/EmptyState';
-export type { EmptyStateProps, EmptyStateType } from './components/EmptyState';
-
-export { Fade } from './components/Fade';
-export type { FadeProps, FadeSide } from './components/Fade';
-
-export { Scrollbar } from './components/Scrollbar';
-export type { ScrollbarProps, ScrollbarVariant } from './components/Scrollbar';
-
-export { ErrorBoundary } from './components/ErrorBoundary';
-export type { ErrorBoundaryProps } from './components/ErrorBoundary';
-
-// Layout
-export { Sidebar } from './components/Sidebar';
-export type { SidebarProps, SidebarWidth } from './components/Sidebar';
-export { SidebarSection } from './components/Sidebar';
-export type { SidebarSectionProps } from './components/Sidebar';
-export { SidebarItem } from './components/Sidebar';
-export type { SidebarItemProps } from './components/Sidebar';
-
-export { Header } from './components/Header';
-export type { HeaderProps, HeaderBackground } from './components/Header';
-
-// Classic — Additional components
-export { RadioGroup, RadioItem } from './components/Radio';
-export type { RadioGroupProps, RadioItemProps, RadioOption } from './components/Radio';
-
-export { TabGroup } from './components/TabGroup';
-export type { TabGroupProps, TabGroupTab } from './components/TabGroup';
-
-export { Accordion, AccordionItem } from './components/Accordion';
-export type { AccordionProps, AccordionItemProps, AccordionItemData } from './components/Accordion';
-
-export { Breadcrumb } from './components/Breadcrumb';
-export type { BreadcrumbProps, BreadcrumbItem } from './components/Breadcrumb';
-
-export { Pagination } from './components/Pagination';
-export type { PaginationProps } from './components/Pagination';
-
-export { Divider } from './components/Divider';
-export type { DividerProps, DividerOrientation } from './components/Divider';
-
-export { Skeleton } from './components/Skeleton';
-export type { SkeletonProps, SkeletonVariant } from './components/Skeleton';
-
-export { ToastContainer, toast, useToasts } from './components/Toast';
-export type { ToastContainerProps, ToastData, ToastOptions, ToastIntent, ToastPosition } from './components/Toast';
-
-// Types
-export type { IconProps, IconComponent } from './types';