@mucsi96/react-ui 0.0.0-stage → 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Igor Bari
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,234 @@
-# Temporary Holding Version
+# @mucsi96/react-ui
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Accessible, dark-first React components with CSS Modules, TypeScript, and a cohesive semantic palette.
+
+[Interactive gallery](https://mucsi96.github.io/react-ui/) · [Source](https://github.com/mucsi96/react-ui)
+
+## Getting started
+
+Requires React and React DOM 19.3 or newer within React 19. The package is ESM and includes TypeScript declarations. Versions are released automatically from verified main-branch builds.
+
+```bash
+npm install @mucsi96/react-ui
+```
+
+Import the stylesheet **once**, at your application entry point:
+
+```tsx
+import { Button } from '@mucsi96/react-ui';
+import '@mucsi96/react-ui/styles.css';
+
+export function SaveAction() {
+  return <Button onPress={() => save()}>Save</Button>;
+}
+```
+
+Components need no theme provider. The stylesheet defines the dark `--bt-*` tokens and `color-scheme` on `:root`; all component selectors and animations are locally scoped. It does not reset your application's typography or layout. The library entry is marked as a client boundary for React Server Component frameworks.
+
+## Buttons
+
+```tsx
+<Button variant="filled" tone="success" onPress={save}>Save</Button>
+<Button variant="raised" tone="error">Incorrect</Button>
+<Button variant="outlined">Secondary</Button>
+<Button variant="text">Cancel</Button>
+<Button variant="icon" aria-label="Search"><SearchIcon /></Button>
+<Button variant="fab"><PlusIcon />New item</Button>
+<Button variant="mini-fab" aria-label="Add"><PlusIcon /></Button>
+<Button isDisabled>Unavailable</Button>
+<LinkButton href="/settings" variant="outlined">Settings</LinkButton>
+```
+
+`tone` accepts `primary` (default), `success`, `warn`, and `error`. Solid variants share the same background, automatically contrasting black/white label, and same-hue hover. Modern relative OKLCH color syntax derives these coordinated colors. Pass `background="#28a745"` or set `--bt-button-bg` in your own CSS Module to customize a solid action. Text/outlined/icon variants use neutral surfaces.
+
+Buttons expose React Aria's press API (`onPress`, `isDisabled`) and React 19's `ref` prop. Set `type="submit"` for form submission. Supply an accessible label for icon-only actions. Icons are ordinary React children; no icon package is imposed on consumers.
+
+## Forms
+
+```tsx
+const [email, setEmail] = useState('');
+const options = [{ id: 'apple', label: 'Apple' }, { id: 'pear', label: 'Pear' }];
+
+<TextField label="Email" name="email" type="email" isRequired
+  value={email} onChange={setEmail} description="We will never share your address." />
+<TextField label="Bio" multiline rows={4} appearance="filled" />
+<Select label="Fruit" options={options} />
+<ComboBox label="Search fruits" options={options} />
+<Checkbox defaultSelected>Subscribe</Checkbox>
+<RadioGroup label="Size" defaultValue="medium">
+  <Radio value="small">Small</Radio>
+  <Radio value="medium">Medium</Radio>
+</RadioGroup>
+<Switch defaultSelected>Notifications</Switch>
+```
+
+Labels, descriptions, and validation messages are associated with the input automatically. `TextField`, `Select`, and `ComboBox` accept `error` for application validation. For an externally managed error, use `validationBehavior="aria"` to expose invalid state without waiting for native form submission. Native constraints (`isRequired`, `type`, `minLength`, etc.) also remain available.
+
+Select options have `{ id, label, isDisabled? }`; React Aria handles selection, typeahead, and filtering. Checkbox and switch controlled state uses `isSelected`/`onChange`; radio group state uses `value`/`onChange`. React Aria form `name` props support native form submissions.
+
+## Donut slider
+
+```tsx
+const [amount, setAmount] = useState(15);
+
+<DonutSlider
+  label="Tip"
+  unit="%"
+  value={amount}
+  onChange={setAmount}
+  valuePerTurn={20}
+  step={1}
+  min={0}
+  max={100}
+/>;
+```
+
+| Prop                 | Default   | Purpose                                        |
+| -------------------- | --------- | ---------------------------------------------- |
+| `label`              | required  | Visible and accessible name                    |
+| `value` / `onChange` | —         | Controlled value and callback                  |
+| `defaultValue`       | `0`       | Initial uncontrolled value                     |
+| `valuePerTurn`       | `100`     | Value added by one full clockwise turn         |
+| `step`               | `1`       | Positive snap grid and keyboard increment      |
+| `min` / `max`        | unbounded | Optional limits; negative values are supported |
+| `unit`               | `''`      | Readout and accessible-value suffix            |
+| `size`               | `220`     | Diameter in pixels, capped by available width  |
+| `displayDecimals`    | `0`       | Decimal places in the readout                  |
+| `isDisabled`         | `false`   | Prevent pointer/keyboard interaction           |
+
+Tap chooses the nearest revolution; continuous dragging accumulates full turns across the seam. Pointer capture keeps the drag active outside the ring and releases on pointer cancellation. Arrow keys increment/decrement by `step`; Page Up/Down move by one tenth of a turn; Home/End use the supplied bounds. Values snap to zero-based step multiples and then clamp to bounds. The slider is not a native form field; include a hidden input if you need its value in `FormData`.
+
+## Menus and split buttons
+
+```tsx
+<MenuTrigger>
+  <Button>Actions</Button>
+  <MenuPopover>
+    <Menu aria-label="Actions">
+      <MenuItem onAction={edit}>Edit</MenuItem>
+      <MenuItem onAction={duplicate}>Duplicate</MenuItem>
+      <MenuSeparator />
+      <MenuItem tone="error" onAction={remove}>Delete</MenuItem>
+    </Menu>
+  </MenuPopover>
+</MenuTrigger>
+
+<SplitButton label="Save" onPress={save} menuLabel="Save options">
+  <MenuItem onAction={saveAs}>Save as…</MenuItem>
+  <MenuItem onAction={saveAndClose}>Save and close</MenuItem>
+</SplitButton>
+```
+
+For nested actions, compose `SubmenuTrigger` with a `MenuItem` and another `MenuPopover`/`Menu`. Use `textValue` on items containing icons or other complex content. `MenuSeparator` separates groups. `SplitButton` accepts the button's tone, custom background, and disabled props for both halves.
+
+## Dialogs and tooltips
+
+```tsx
+<DialogTrigger>
+  <Button>Create project</Button>
+  <Dialog title="New project" description="Give your next idea a home.">
+    {({ close }) => <>
+      <TextField label="Project name" />
+      <Button onPress={close}>Done</Button>
+    </>}
+  </Dialog>
+</DialogTrigger>
+
+<Tooltip content="Search">
+  <Button variant="icon" aria-label="Search"><SearchIcon /></Button>
+</Tooltip>
+```
+
+Dialog focus is trapped while open and restored to the trigger on close. Escape and outside interaction dismiss by default; `isDismissable={false}` disables outside dismissal, and `isKeyboardDismissDisabled` disables Escape. Use `role="alertdialog"` for important confirmations. Dialogs also support controlled `isOpen`/`onOpenChange` without a `DialogTrigger`. Forms and action layouts are composed as ordinary children. Tooltips accept a single pressable child, `content`, optional `placement`, and `delay`.
+
+## Notifications
+
+```tsx
+<NotificationsProvider>
+  <App />
+</NotificationsProvider>;
+
+function SaveButton() {
+  const notifications = useNotifications();
+  return <Button onPress={() => notifications.success('Changes saved')}>Save</Button>;
+}
+
+<Alert tone="error" title="Unable to save">
+  Try again in a moment.
+</Alert>;
+```
+
+The hook exposes `info`, `success`, `warn`, and `error`, returning a notification ID. Each accepts `{ title?, duration? }`; the default duration is 4000 ms, and `0` keeps it until dismissed. Timers pause while hovered or focused and are cleaned up on unmount. Use `dismiss(id)` or `clear()` to remove notifications. Error notifications use an assertive live region; other tones use a polite status. Toasts render in a body portal, so theme overrides for overlays belong on `:root`.
+
+## Data table
+
+```tsx
+const columns: TableColumn<Person>[] = [
+  {
+    id: 'name',
+    label: 'Person',
+    renderCell: (row) => row.name,
+    compare: (a, b) => a.name.localeCompare(b.name),
+  },
+  {
+    id: 'age',
+    label: 'Age',
+    renderCell: (row) => row.age,
+    compare: (a, b) => a.age - b.age,
+    align: 'end',
+  },
+];
+
+<DataTable
+  caption="People"
+  rows={people}
+  columns={columns}
+  getRowKey={(row) => row.id}
+  pageSize={10}
+  selectedKey={selectedKey}
+  onSelectionChange={setSelectedKey}
+  getRowLabel={(row) => row.name}
+/>;
+```
+
+This is a semantic HTML table. Columns with `compare` have three-state sorting (ascending, descending, original order) and `aria-sort` feedback. Sorting precedes pagination. Selection is controlled and exposed through keyboard-accessible row buttons; `getRowLabel` names those buttons. Omitting `onSelectionChange` removes selection entirely. Use `emptyMessage` for empty results. Horizontal overflow stays within the table on narrow screens.
+
+## Loading, surfaces, and typography
+
+```tsx
+<BarLoader label="Loading workspace" />
+<Spinner label="Fetching results" />
+<ProgressBar label="Uploading" value={65} />
+<ProgressBar label="Preparing" isIndeterminate />
+
+<Card variant="outlined">
+  <Heading level={3}>Workspace</Heading>
+  <Text muted>Supporting information.</Text>
+  <Divider />
+  <Badge tone="success">Active</Badge>
+</Card>
+```
+
+All loading animations respect reduced motion. `Card` supports `outlined` and `elevated`; `Badge` accepts semantic tones and `neutral`. `Heading` supports semantic levels 1–6, `Text` supports `muted`, and `Code` provides inline monospace styling.
+
+## Customize with CSS Modules
+
+```css
+/* Application-level tokens, including portaled overlays */
+:root {
+  --bt-primary: hsl(280, 80%, 60%);
+}
+
+/* MyPanel.module.css */
+.panel {
+  background: var(--bt-surface-1);
+  color: var(--bt-text-default);
+}
+.customAction {
+  --bt-button-bg: #28a745;
+}
+```
+
+Use `className` to extend styles without reaching into internal module selectors. The public palette includes `surface-0` through `surface-4`, `outline`, `text-strong`, `text-default`, `text-muted`, `text-on-brand`, `primary`, `primary-hover`, `link`, `link-hint`, semantic `success`/`warn`/`error` colors, hover variants, soft variants, and success/error foreground tokens. Shared `--bt-font`, `--bt-font-mono`, `--bt-radius`, `--bt-radius-lg`, and `--bt-shadow` tokens complete the foundation.
+
+MIT © Igor Bari

package/dist/components/button/button.d.ts

@@ -0,0 +1,21 @@
+import type { ButtonProps as AriaButtonProps, LinkProps } from 'react-aria-components';
+import type { CSSProperties, ReactNode, Ref } from 'react';
+import type { Tone } from '../../types';
+export type ButtonVariant = 'filled' | 'raised' | 'outlined' | 'text' | 'icon' | 'fab' | 'mini-fab';
+interface Appearance {
+    variant?: ButtonVariant;
+    tone?: Tone;
+    background?: string;
+    className?: string;
+    style?: CSSProperties;
+    children: ReactNode;
+}
+export interface ButtonProps extends Omit<AriaButtonProps, keyof Appearance>, Appearance {
+    ref?: Ref<HTMLButtonElement>;
+}
+export declare function Button({ variant, tone, background, className, style, children, ref, ...props }: ButtonProps): import("react").JSX.Element;
+export interface LinkButtonProps extends Omit<LinkProps, keyof Appearance>, Appearance {
+    ref?: Ref<HTMLAnchorElement>;
+}
+export declare function LinkButton({ variant, tone, background, className, style, children, ref, ...props }: LinkButtonProps): import("react").JSX.Element;
+export {};

package/dist/components/dialog/dialog.d.ts

@@ -0,0 +1,13 @@
+import type { ReactNode } from 'react';
+import type { ModalOverlayProps } from 'react-aria-components';
+export { DialogTrigger } from 'react-aria-components';
+export interface DialogProps extends Omit<ModalOverlayProps, 'children' | 'className'> {
+    title: string;
+    description?: string;
+    children: ReactNode | ((props: {
+        close: () => void;
+    }) => ReactNode);
+    role?: 'dialog' | 'alertdialog';
+    className?: string;
+}
+export declare function Dialog({ title, description, children, role, className, isDismissable, ...props }: DialogProps): import("react").JSX.Element;

package/dist/components/donut-slider/donut-slider.d.ts

@@ -0,0 +1,16 @@
+export interface DonutSliderProps {
+    label: string;
+    value?: number;
+    defaultValue?: number;
+    onChange?: (value: number) => void;
+    valuePerTurn?: number;
+    step?: number;
+    min?: number;
+    max?: number;
+    unit?: string;
+    size?: number;
+    displayDecimals?: number;
+    isDisabled?: boolean;
+    className?: string;
+}
+export declare function DonutSlider({ label, value, defaultValue, onChange, valuePerTurn, step, min, max, unit, size, displayDecimals, isDisabled, className, }: DonutSliderProps): import("react").JSX.Element;

package/dist/components/forms/controls.d.ts

@@ -0,0 +1,23 @@
+import type { CheckboxProps as AriaCheckboxProps, RadioGroupProps as AriaRadioGroupProps, RadioProps as AriaRadioProps, SwitchProps as AriaSwitchProps } from 'react-aria-components';
+import type { ReactNode } from 'react';
+export interface CheckboxProps extends Omit<AriaCheckboxProps, 'children' | 'className'> {
+    children: ReactNode;
+    className?: string;
+}
+export declare function Checkbox({ children, className, ...props }: CheckboxProps): import("react").JSX.Element;
+export interface RadioGroupProps extends Omit<AriaRadioGroupProps, 'children' | 'className'> {
+    label: string;
+    children: ReactNode;
+    className?: string;
+}
+export declare function RadioGroup({ label, children, className, ...props }: RadioGroupProps): import("react").JSX.Element;
+export interface RadioProps extends Omit<AriaRadioProps, 'children' | 'className'> {
+    children: ReactNode;
+    className?: string;
+}
+export declare function Radio({ children, className, ...props }: RadioProps): import("react").JSX.Element;
+export interface SwitchProps extends Omit<AriaSwitchProps, 'children' | 'className'> {
+    children: ReactNode;
+    className?: string;
+}
+export declare function Switch({ children, className, ...props }: SwitchProps): import("react").JSX.Element;

package/dist/components/forms/select.d.ts

@@ -0,0 +1,22 @@
+import type { SelectProps as AriaSelectProps, ComboBoxProps as AriaComboBoxProps } from 'react-aria-components';
+import type { ReactNode } from 'react';
+export interface SelectOption {
+    id: string;
+    label: string;
+    isDisabled?: boolean;
+}
+interface FieldProps {
+    label: string;
+    options: readonly SelectOption[];
+    description?: ReactNode;
+    error?: ReactNode;
+    placeholder?: string;
+    className?: string;
+}
+export interface SelectProps extends Omit<AriaSelectProps<SelectOption>, keyof FieldProps | 'children' | 'items'>, FieldProps {
+}
+export declare function Select({ label, options, description, error, placeholder, className, ...props }: SelectProps): import("react").JSX.Element;
+export interface ComboBoxProps extends Omit<AriaComboBoxProps<SelectOption>, keyof FieldProps | 'children' | 'items' | 'defaultItems'>, FieldProps {
+}
+export declare function ComboBox({ label, options, description, error, placeholder, className, ...props }: ComboBoxProps): import("react").JSX.Element;
+export {};

package/dist/components/forms/text-field.d.ts

@@ -0,0 +1,14 @@
+import type { TextFieldProps as AriaTextFieldProps } from 'react-aria-components';
+import type { ReactNode, Ref } from 'react';
+export interface TextFieldProps extends Omit<AriaTextFieldProps, 'children' | 'className'> {
+    label: string;
+    description?: ReactNode;
+    error?: ReactNode;
+    placeholder?: string;
+    multiline?: boolean;
+    rows?: number;
+    appearance?: 'outlined' | 'filled';
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+export declare function TextField({ label, description, error, placeholder, multiline, rows, appearance, className, ref, ...props }: TextFieldProps): import("react").JSX.Element;

package/dist/components/loader/loader.d.ts

@@ -0,0 +1,13 @@
+import type { ProgressBarProps as AriaProgressBarProps } from 'react-aria-components';
+export interface BarLoaderProps {
+    label?: string;
+    color?: string;
+    className?: string;
+}
+export declare function BarLoader({ label, color, className }: BarLoaderProps): import("react").JSX.Element;
+export declare function Spinner({ label, className }: Omit<BarLoaderProps, 'color'>): import("react").JSX.Element;
+export interface ProgressBarProps extends Omit<AriaProgressBarProps, 'children' | 'className'> {
+    label: string;
+    className?: string;
+}
+export declare function ProgressBar({ label, className, ...props }: ProgressBarProps): import("react").JSX.Element;

package/dist/components/menu/menu.d.ts

@@ -0,0 +1,18 @@
+import type { MenuProps as AriaMenuProps, MenuItemProps as AriaMenuItemProps, PopoverProps } from 'react-aria-components';
+import type { ReactNode } from 'react';
+export { MenuTrigger, SubmenuTrigger } from 'react-aria-components';
+export interface MenuProps<T extends object> extends Omit<AriaMenuProps<T>, 'className'> {
+    className?: string;
+}
+export declare function Menu<T extends object>({ className, ...props }: MenuProps<T>): import("react").JSX.Element;
+export interface MenuItemProps extends Omit<AriaMenuItemProps, 'className' | 'children'> {
+    className?: string;
+    children: ReactNode;
+    tone?: 'default' | 'error';
+}
+export declare function MenuItem({ className, tone, children, ...props }: MenuItemProps): import("react").JSX.Element;
+export interface MenuPopoverProps extends Omit<PopoverProps, 'className'> {
+    className?: string;
+}
+export declare function MenuPopover({ className, ...props }: MenuPopoverProps): import("react").JSX.Element;
+export declare function MenuSeparator(): import("react").JSX.Element;

package/dist/components/notifications/notifications.d.ts

@@ -0,0 +1,26 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+export type NotificationTone = 'info' | 'success' | 'warn' | 'error';
+export interface AlertProps extends HTMLAttributes<HTMLDivElement> {
+    tone?: NotificationTone;
+    title?: string;
+}
+export declare function Alert({ tone, title, children, className, role, ...props }: AlertProps): import("react").JSX.Element;
+export interface NotificationOptions {
+    title?: string;
+    /** Set to 0 to keep a notification until it is dismissed. */
+    duration?: number;
+}
+export interface Notifications {
+    info: (message: string, options?: NotificationOptions) => number;
+    success: (message: string, options?: NotificationOptions) => number;
+    warn: (message: string, options?: NotificationOptions) => number;
+    error: (message: string, options?: NotificationOptions) => number;
+    dismiss: (id: number) => void;
+    clear: () => void;
+}
+export interface NotificationsProviderProps {
+    children: ReactNode;
+    defaultDuration?: number;
+}
+export declare function NotificationsProvider({ children, defaultDuration, }: NotificationsProviderProps): import("react").JSX.Element;
+export declare function useNotifications(): Notifications;

package/dist/components/split-button/split-button.d.ts

@@ -0,0 +1,9 @@
+import type { ReactNode } from 'react';
+import type { ButtonProps } from '../button/button';
+export interface SplitButtonProps extends Omit<ButtonProps, 'children' | 'variant' | 'ref'> {
+    label: string;
+    icon?: ReactNode;
+    menuLabel?: string;
+    children: ReactNode;
+}
+export declare function SplitButton({ label, icon, menuLabel, children, className, ...props }: SplitButtonProps): import("react").JSX.Element;

package/dist/components/surface/surface.d.ts

@@ -0,0 +1,22 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+import type { Tone } from '../../types';
+export interface CardProps extends HTMLAttributes<HTMLElement> {
+    variant?: 'elevated' | 'outlined';
+}
+export declare function Card({ variant, className, ...props }: CardProps): import("react").JSX.Element;
+export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+    tone?: Tone | 'neutral';
+}
+export declare function Badge({ tone, className, ...props }: BadgeProps): import("react").JSX.Element;
+export interface HeadingProps extends HTMLAttributes<HTMLHeadingElement> {
+    level?: 1 | 2 | 3 | 4 | 5 | 6;
+}
+export declare function Heading({ level, className, ...props }: HeadingProps): import("react").JSX.Element;
+export interface TextProps extends HTMLAttributes<HTMLParagraphElement> {
+    muted?: boolean;
+}
+export declare function Text({ muted, className, ...props }: TextProps): import("react").JSX.Element;
+export declare function Code({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function Divider(): import("react").JSX.Element;

package/dist/components/table/data-table.d.ts

@@ -0,0 +1,21 @@
+import type { Key, ReactNode } from 'react';
+export interface TableColumn<T> {
+    id: string;
+    label: string;
+    renderCell: (row: T) => ReactNode;
+    compare?: (a: T, b: T) => number;
+    align?: 'start' | 'end';
+}
+export interface DataTableProps<T> {
+    caption: string;
+    rows: readonly T[];
+    columns: readonly TableColumn<T>[];
+    getRowKey: (row: T) => Key;
+    pageSize?: number;
+    selectedKey?: Key | null;
+    onSelectionChange?: (key: Key | null) => void;
+    getRowLabel?: (row: T) => string;
+    emptyMessage?: string;
+    className?: string;
+}
+export declare function DataTable<T>({ caption, rows, columns, getRowKey, pageSize, selectedKey, onSelectionChange, getRowLabel, emptyMessage, className, }: DataTableProps<T>): import("react").JSX.Element;

package/dist/components/tooltip/tooltip.d.ts

@@ -0,0 +1,9 @@
+import type { Placement } from 'react-aria-components';
+import type { ReactElement, ReactNode } from 'react';
+export interface TooltipProps {
+    children: ReactElement;
+    content: ReactNode;
+    placement?: Placement;
+    delay?: number;
+}
+export declare function Tooltip({ children, content, placement, delay }: TooltipProps): import("react").JSX.Element;

package/dist/index.d.ts

@@ -0,0 +1,27 @@
+export { Button, LinkButton } from './components/button/button';
+export type { ButtonProps, ButtonVariant, LinkButtonProps } from './components/button/button';
+export { TextField } from './components/forms/text-field';
+export type { TextFieldProps } from './components/forms/text-field';
+export { Select, ComboBox } from './components/forms/select';
+export type { SelectProps, ComboBoxProps, SelectOption } from './components/forms/select';
+export { Checkbox, Radio, RadioGroup, Switch } from './components/forms/controls';
+export type { CheckboxProps, RadioProps, RadioGroupProps, SwitchProps, } from './components/forms/controls';
+export { DonutSlider } from './components/donut-slider/donut-slider';
+export type { DonutSliderProps } from './components/donut-slider/donut-slider';
+export { Menu, MenuItem, MenuPopover, MenuSeparator, MenuTrigger, SubmenuTrigger, } from './components/menu/menu';
+export type { MenuProps, MenuItemProps, MenuPopoverProps } from './components/menu/menu';
+export { SplitButton } from './components/split-button/split-button';
+export type { SplitButtonProps } from './components/split-button/split-button';
+export { Dialog, DialogTrigger } from './components/dialog/dialog';
+export type { DialogProps } from './components/dialog/dialog';
+export { Tooltip } from './components/tooltip/tooltip';
+export type { TooltipProps } from './components/tooltip/tooltip';
+export { DataTable } from './components/table/data-table';
+export type { DataTableProps, TableColumn } from './components/table/data-table';
+export { Alert, NotificationsProvider, useNotifications, } from './components/notifications/notifications';
+export type { AlertProps, Notifications, NotificationOptions, NotificationsProviderProps, NotificationTone, } from './components/notifications/notifications';
+export { BarLoader, Spinner, ProgressBar } from './components/loader/loader';
+export type { BarLoaderProps, ProgressBarProps } from './components/loader/loader';
+export { Card, Badge, Heading, Text, Code, Divider } from './components/surface/surface';
+export type { CardProps, BadgeProps, HeadingProps, TextProps } from './components/surface/surface';
+export type { Tone } from './types';