eidos-ui 1.0.1 → 1.1.0

package/LICENSE

@@ -1,22 +1,22 @@
-MIT License
-
-Copyright (c) 2025 Pedro Mealha
-
-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.
-
+MIT License
+
+Copyright (c) 2025 Pedro Mealha
+
+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,225 +1,227 @@
-<div align="center">
-
-# eidos-ui
-
-**A modern, accessible React component library built with TypeScript, SCSS, and CSS custom properties.**
-
-[![npm version](https://img.shields.io/npm/v/eidos-ui.svg)](https://www.npmjs.com/package/eidos-ui)
-[![npm downloads](https://img.shields.io/npm/dm/eidos-ui.svg)](https://www.npmjs.com/package/eidos-ui)
-[![license](https://img.shields.io/npm/l/eidos-ui.svg)](./LICENSE)
-[![TypeScript](https://img.shields.io/badge/TypeScript-strict-3178c6.svg)](https://www.typescriptlang.org/)
-
-</div>
-
-> **This package starts fresh at `0.1.0`.** It was previously published as `@pmealha/eidos-ui`
-> (versions `0.1.1` through `5.0.0`), which reached `5.x` well before the API was actually stable -
-> those version numbers didn't reflect real semantic versioning and are deprecated. `@pmealha/eidos-ui`
-> will not receive further updates; install `eidos-ui` instead. See [CHANGELOG.md](./CHANGELOG.md) for
-> what's changed release to release from here on.
-
-## Features
-
-|                     |                                                                                                                        |
-| ------------------- | ---------------------------------------------------------------------------------------------------------------------- |
-| **Themeable**       | Every design token is a CSS custom property, so palette, spacing, and radii can be overridden without touching source. |
-| **Type-safe**       | Written in TypeScript with full prop typings exported for every component.                                             |
-| **Tree-shakeable**  | Per-component entry points (`eidos-ui/button`, `eidos-ui/table`, ...) keep bundles lean.                               |
-| **Icon-agnostic**   | Works with any icon library - Lucide, MUI Icons, Font Awesome, Remix Icons, or your own.                               |
-| **Accessible**      | Built with keyboard navigation and ARIA semantics in mind.                                                             |
-| **Optimized build** | Bundled with tsup, shipping both ESM and CJS with source maps and `.d.ts` files.                                       |
-
-## Installation
-
-```bash
-npm install eidos-ui
-```
-
-**Optional** - for component-based icons (recommended over string-based icon fonts):
-
-```bash
-npm install lucide-react
-```
-
-## Quick Start
-
-```tsx
-import { Button, Tooltip } from 'eidos-ui';
-import 'eidos-ui/styles';
-
-function App() {
-  return (
-    <div>
-      <Button variant="filled" color="primary">
-        Click me
-      </Button>
-
-      <Tooltip message="Helpful hint">
-        <Button>Hover me</Button>
-      </Tooltip>
-    </div>
-  );
-}
-```
-
-### With icons
-
-```tsx
-// Component icons (tree-shakeable)
-import { Plus, Download } from 'lucide-react';
-
-<Button icon={Plus} />
-<Button preIcon={Download}>Download</Button>
-
-// String-based icons (icon font classes)
-<Button icon="fa fa-plus" />   // Font Awesome
-<Button icon="ri-add-line" />  // Remix Icons
-```
-
-## Components
-
-These are the same groups used in Storybook, so the README and the docs sidebar stay in sync.
-
-<table>
-<tr><td valign="top">
-
-**Layout**
-
-- PageLayout
-- Header
-- Footer
-- Navigation
-- Toolbar
-- Breadcrumb
-
-**Elements**
-
-- Button
-- ButtonGroup
-- SplitButton
-- Avatar
-- Badge
-- Card
-- Chip
-- Divider
-- EmptyState
-- Kbd
-- Pill
-- SegmentedControl
-
-</td><td valign="top">
-
-**Forms**
-
-- Input
-- Textarea
-- NumberInput
-- Select
-- Combobox
-- Checkbox
-- Radio
-- Switch
-- Slider
-- ColorPicker
-- DatePicker
-- OTPInput
-- TagInput
-- FileUpload
-- InlineEdit
-
-**Navigation**
-
-- Tabs
-- Stepper
-- Accordion
-- Pagination
-- TreeView
-
-</td><td valign="top">
-
-**Data**
-
-- Table
-- DataGrid
-- Timeline
-- VirtualList
-
-**Overlays**
-
-- Modal
-- Drawer
-- Snackbar
-- Tooltip
-- Popover
-- Menu
-- ContextMenu
-- CommandPalette
-- Dropdown
-
-**Feedback**
-
-- Alert
-- Progress
-- Skeleton
-- Spinner
-
-</td></tr>
-</table>
-
-Full props and interactive examples for every component live in Storybook - see [Documentation](#documentation).
-
-## Documentation
-
-Run Storybook locally for the full interactive component reference, including a searchable "Releases" page mirroring [CHANGELOG.md](./CHANGELOG.md):
-
-```bash
-git clone https://github.com/PedroMealha/eidos-ui.git
-cd eidos-ui
-npm install
-npm run storybook
-```
-
-## Theming
-
-All design tokens are exposed as CSS custom properties, so themes can be overridden globally without touching component source.
-
-```css
-:root {
-  /* Colors */
-  --primary-color: #6366f1;
-  --secondary-color: #ec4899;
-
-  /* Spacing */
-  --spacing-md: 1em;
-  --spacing-lg: 1.5em;
-
-  /* Border radius */
-  --border-radius-md: 8px;
-}
-```
-
-Individual component styles can also be targeted directly, following each component's `eidos-<name>` BEM-style class names:
-
-```css
-.eidos-button--filled.eidos-button--primary {
-  border-radius: 20px;
-  background: linear-gradient(to right, #6366f1, #8b5cf6);
-}
-```
-
-## TypeScript
-
-Every component ships with exported prop types:
-
-```tsx
-import type { ButtonProps, TooltipProps } from 'eidos-ui';
-
-const MyButton: React.FC<ButtonProps> = (props) => <Button {...props} />;
-```
-
-## Contributing
-
-This is currently a personal project without an established external contribution process. Bug reports and suggestions are welcome via [GitHub Issues](https://github.com/PedroMealha/eidos-ui/issues).
-
-## License
-
-[MIT](./LICENSE) © Pedro Mealha
+<div align="center">
+
+# eidos-ui
+
+**A modern, accessible React component library built with TypeScript, SCSS, and CSS custom properties.**
+
+[![npm version](https://img.shields.io/npm/v/eidos-ui.svg)](https://www.npmjs.com/package/eidos-ui)
+[![npm downloads](https://img.shields.io/npm/dm/eidos-ui.svg)](https://www.npmjs.com/package/eidos-ui)
+[![license](https://img.shields.io/npm/l/eidos-ui.svg)](./LICENSE)
+[![TypeScript](https://img.shields.io/badge/TypeScript-strict-3178c6.svg)](https://www.typescriptlang.org/)
+
+</div>
+
+> **This package starts fresh at `0.1.0`.** It was previously published as `@pmealha/eidos-ui`
+> (versions `0.1.1` through `5.0.0`), which reached `5.x` well before the API was actually stable -
+> those version numbers didn't reflect real semantic versioning and are deprecated. `@pmealha/eidos-ui`
+> will not receive further updates; install `eidos-ui` instead. See [CHANGELOG.md](./CHANGELOG.md) for
+> what's changed release to release from here on.
+
+## Features
+
+|                     |                                                                                                                        |
+| ------------------- | ---------------------------------------------------------------------------------------------------------------------- |
+| **Themeable**       | Every design token is a CSS custom property, so palette, spacing, and radii can be overridden without touching source. |
+| **Type-safe**       | Written in TypeScript with full prop typings exported for every component.                                             |
+| **Tree-shakeable**  | Per-component entry points (`eidos-ui/button`, `eidos-ui/table`, ...) keep bundles lean.                               |
+| **Icon-agnostic**   | Works with any icon library - Lucide, MUI Icons, Font Awesome, Remix Icons, or your own.                               |
+| **Accessible**      | Built with keyboard navigation and ARIA semantics in mind.                                                             |
+| **Optimized build** | Bundled with tsup, shipping both ESM and CJS with source maps and `.d.ts` files.                                       |
+
+## Installation
+
+```bash
+npm install eidos-ui
+```
+
+**Optional** - for component-based icons (recommended over string-based icon fonts):
+
+```bash
+npm install lucide-react
+```
+
+## Quick Start
+
+```tsx
+import { Button, Tooltip } from 'eidos-ui';
+import 'eidos-ui/styles';
+
+function App() {
+  return (
+    <div>
+      <Button variant="filled" color="primary">
+        Click me
+      </Button>
+
+      <Tooltip message="Helpful hint">
+        <Button>Hover me</Button>
+      </Tooltip>
+    </div>
+  );
+}
+```
+
+### With icons
+
+```tsx
+// Component icons (tree-shakeable)
+import { Plus, Download } from 'lucide-react';
+
+<Button icon={Plus} />
+<Button preIcon={Download}>Download</Button>
+
+// String-based icons (icon font classes)
+<Button icon="fa fa-plus" />   // Font Awesome
+<Button icon="ri-add-line" />  // Remix Icons
+```
+
+## Components
+
+These are the same groups used in Storybook, so the README and the docs sidebar stay in sync.
+
+<table>
+<tr><td valign="top">
+
+**Layout**
+
+- PageLayout
+- Header
+- Footer
+- Navigation
+- Toolbar
+- Breadcrumb
+
+**Elements**
+
+- Button
+- ButtonGroup
+- SplitButton
+- Avatar
+- Badge
+- Card
+- Chip
+- Divider
+- EmptyState
+- Kbd
+- Pill
+- SegmentedControl
+
+</td><td valign="top">
+
+**Forms**
+
+- Input
+- Textarea
+- NumberInput
+- Select
+- Combobox
+- Checkbox
+- Radio
+- Switch
+- Slider
+- ColorPicker
+- DatePicker
+- OTPInput
+- TagInput
+- FileUpload
+- InlineEdit
+
+**Navigation**
+
+- Tabs
+- Stepper
+- Accordion
+- Pagination
+- TreeView
+
+</td><td valign="top">
+
+**Data**
+
+- Table
+- DataGrid
+- Timeline
+- VirtualList
+
+**Overlays**
+
+- Modal
+- Drawer
+- Snackbar
+- Tooltip
+- Popover
+- Menu
+- ContextMenu
+- CommandPalette
+- Dropdown
+
+**Feedback**
+
+- Alert
+- Progress
+- Skeleton
+- Spinner
+
+</td></tr>
+</table>
+
+Full props and interactive examples for every component live in Storybook - see [Documentation](#documentation).
+
+## Documentation
+
+Run Storybook locally for the full interactive component reference, including a searchable "Releases" page mirroring [CHANGELOG.md](./CHANGELOG.md):
+
+```bash
+git clone https://github.com/PedroMealha/eidos-ui.git
+cd eidos-ui
+npm install
+npm run storybook
+```
+
+## Theming
+
+All design tokens are exposed as CSS custom properties, so themes can be overridden globally without touching component source.
+
+```css
+:root {
+  /* Colors */
+  --primary-color: #6366f1;
+  --secondary-color: #ec4899;
+
+  /* Spacing */
+  --spacing-md: 1em;
+  --spacing-lg: 1.5em;
+
+  /* Border radius */
+  --border-radius-md: 8px;
+}
+```
+
+Individual component styles can also be targeted directly, following each component's `eidos-<name>` BEM-style class names:
+
+```css
+.eidos-button--filled.eidos-button--primary {
+  border-radius: 20px;
+  background: linear-gradient(to right, #6366f1, #8b5cf6);
+}
+```
+
+## TypeScript
+
+Every component ships with exported prop types:
+
+```tsx
+import type { ButtonProps, TooltipProps } from 'eidos-ui';
+
+const MyButton: React.FC<ButtonProps> = (props) => <Button {...props} />;
+```
+
+## Contributing
+
+Bug reports, questions, and suggestions are very welcome via [GitHub Issues](https://github.com/PedroMealha/eidos-ui/issues). Pull requests are not accepted - this is a single-maintainer project by design; see [CONTRIBUTING.md](./CONTRIBUTING.md) for the reasoning and for what to do if you need behaviour the library doesn't have.
+
+To report a security issue, please use private reporting rather than a public issue - see [SECURITY.md](./SECURITY.md).
+
+## License
+
+[MIT](./LICENSE) © Pedro Mealha

package/dist/Combobox.types-B7ozlnA9.d.cts

@@ -0,0 +1,35 @@
+import React__default from 'react';
+import { C as ComponentSizeProps } from './sizes-DM6Rrrgq.cjs';
+
+interface ComboboxOption {
+    id: string;
+    label: string;
+    value: string;
+    description?: string;
+    disabled?: boolean;
+    group?: string;
+}
+interface ComboboxProps {
+    options?: ComboboxOption[];
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    onSearch?: (query: string) => void;
+    placeholder?: string;
+    loading?: boolean;
+    loadingText?: string;
+    emptyText?: string;
+    allowFreeText?: boolean;
+    clearable?: boolean;
+    disabled?: boolean;
+    size?: ComponentSizeProps;
+    label?: string;
+    error?: string;
+    hint?: string;
+    fullWidth?: boolean;
+    className?: string;
+    maxHeight?: number | string;
+    renderOption?: (option: ComboboxOption) => React__default.ReactNode;
+}
+
+export type { ComboboxOption as C, ComboboxProps as a };

package/dist/Combobox.types-DkigkEh2.d.ts

@@ -0,0 +1,35 @@
+import React__default from 'react';
+import { C as ComponentSizeProps } from './sizes-DM6Rrrgq.js';
+
+interface ComboboxOption {
+    id: string;
+    label: string;
+    value: string;
+    description?: string;
+    disabled?: boolean;
+    group?: string;
+}
+interface ComboboxProps {
+    options?: ComboboxOption[];
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    onSearch?: (query: string) => void;
+    placeholder?: string;
+    loading?: boolean;
+    loadingText?: string;
+    emptyText?: string;
+    allowFreeText?: boolean;
+    clearable?: boolean;
+    disabled?: boolean;
+    size?: ComponentSizeProps;
+    label?: string;
+    error?: string;
+    hint?: string;
+    fullWidth?: boolean;
+    className?: string;
+    maxHeight?: number | string;
+    renderOption?: (option: ComboboxOption) => React__default.ReactNode;
+}
+
+export type { ComboboxOption as C, ComboboxProps as a };

package/dist/SegmentedControl.types-CK8EiShd.d.ts

@@ -0,0 +1,35 @@
+import { I as IconType } from './renderIcon-C2lEMMzb.js';
+import { C as ComponentSizeProps } from './sizes-DM6Rrrgq.js';
+
+type SegmentedControlColorProps = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info';
+interface SegmentedOption {
+    /** Unique value for this segment. */
+    value: string;
+    /** Text label (optional if `icon` is provided). */
+    label?: string;
+    /** Icon to show before the label. */
+    icon?: IconType;
+    /** Disable this individual segment. */
+    disabled?: boolean;
+    /** Tooltip shown on hover. */
+    tooltip?: string;
+}
+interface SegmentedControlProps {
+    /** Segment definitions. */
+    options: SegmentedOption[];
+    /** Controlled selected value. */
+    value?: string;
+    /** Initial value when uncontrolled. Defaults to the first option's value. */
+    defaultValue?: string;
+    /** Called with the newly selected value whenever the selection changes. */
+    onChange?: (value: string) => void;
+    size?: ComponentSizeProps;
+    color?: SegmentedControlColorProps;
+    /** Disable all segments. */
+    disabled?: boolean;
+    /** Stretch to fill the parent's width. */
+    fullWidth?: boolean;
+    className?: string;
+}
+
+export type { SegmentedControlColorProps as S, SegmentedControlProps as a, SegmentedOption as b };

package/dist/SegmentedControl.types-Dm4SnwCK.d.cts

@@ -0,0 +1,35 @@
+import { I as IconType } from './renderIcon-C2lEMMzb.cjs';
+import { C as ComponentSizeProps } from './sizes-DM6Rrrgq.cjs';
+
+type SegmentedControlColorProps = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info';
+interface SegmentedOption {
+    /** Unique value for this segment. */
+    value: string;
+    /** Text label (optional if `icon` is provided). */
+    label?: string;
+    /** Icon to show before the label. */
+    icon?: IconType;
+    /** Disable this individual segment. */
+    disabled?: boolean;
+    /** Tooltip shown on hover. */
+    tooltip?: string;
+}
+interface SegmentedControlProps {
+    /** Segment definitions. */
+    options: SegmentedOption[];
+    /** Controlled selected value. */
+    value?: string;
+    /** Initial value when uncontrolled. Defaults to the first option's value. */
+    defaultValue?: string;
+    /** Called with the newly selected value whenever the selection changes. */
+    onChange?: (value: string) => void;
+    size?: ComponentSizeProps;
+    color?: SegmentedControlColorProps;
+    /** Disable all segments. */
+    disabled?: boolean;
+    /** Stretch to fill the parent's width. */
+    fullWidth?: boolean;
+    className?: string;
+}
+
+export type { SegmentedControlColorProps as S, SegmentedControlProps as a, SegmentedOption as b };

package/dist/Select.types-B4kDpkGB.d.ts

@@ -0,0 +1,42 @@
+import { a as InputProps } from './Input.types-XrJTI0JC.js';
+import { I as IconType } from './renderIcon-C2lEMMzb.js';
+
+interface SelectOption {
+    id: string;
+    label: string;
+    value: string;
+    disabled?: boolean;
+    icon?: IconType;
+}
+interface SelectProps {
+    options: SelectOption[];
+    /** Controlled selected value(s). */
+    value?: string | string[];
+    /** Initial selected value(s) for uncontrolled usage. Ignored when `value` is provided. */
+    defaultValue?: string | string[];
+    onChange?: (value: string | string[]) => void;
+    multiple?: boolean;
+    placeholder?: string;
+    disabled?: boolean;
+    className?: string;
+    inputProps?: Partial<InputProps>;
+    name?: string;
+    id?: string;
+    required?: boolean;
+    fullWidth?: boolean;
+    minWidth?: number | string;
+    maxWidth?: number | string;
+    minHeight?: number | string;
+    maxHeight?: number | string;
+    autoWidth?: boolean;
+    clearable?: boolean;
+    /** Open the dropdown immediately on mount - useful for inline cell editors. */
+    autoOpen?: boolean;
+    dropdownProps?: {
+        dropdownLevel?: number;
+        dropdownGroup?: string;
+        [key: string]: unknown;
+    };
+}
+
+export type { SelectOption as S, SelectProps as a };