eidos-ui 0.1.1 → 1.0.1

package/README.md

@@ -1,6 +1,15 @@
+<div align="center">
+
 # eidos-ui
 
-A modern, accessible React component library built with TypeScript, SCSS, and CSS custom properties.
+**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 -
@@ -8,33 +17,33 @@ A modern, accessible React component library built with TypeScript, SCSS, and CS
 > 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
+## Features
 
-- 🎨 **Customizable** - CSS custom properties for easy theming
-- 💪 **TypeScript** - Full type safety and IntelliSense support
-- 🎭 **SCSS** - Powerful styling with mixins and design tokens
-- 🏗️ **Optimized** - Built with tsup for minimal bundle size
-- ⚡ **Tree-shakeable** - Import only what you need
-- ♿ **Accessible** - Built with accessibility in mind
-- 🎯 **Icon Flexibility** - Works with any icon library (Lucide, MUI Icons, Font Awesome, Remix Icons, etc.)
+|                     |                                                                                                                        |
+| ------------------- | ---------------------------------------------------------------------------------------------------------------------- |
+| **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
+## Installation
 
 ```bash
 npm install eidos-ui
 ```
 
-**Optional:** If you want to use component-based icons (recommended):
+**Optional** - for component-based icons (recommended over string-based icon fonts):
 
 ```bash
 npm install lucide-react
-# or use MUI Icons, Heroicons, etc.
 ```
 
-## 🚀 Quick Start
+## Quick Start
 
 ```tsx
-import { Button, Tooltip, DatePicker } from 'eidos-ui';
+import { Button, Tooltip } from 'eidos-ui';
 import 'eidos-ui/styles';
 
 function App() {
@@ -52,50 +61,126 @@ function App() {
 }
 ```
 
-### With Icons
+### With icons
 
 ```tsx
-// Using component icons (tree-shakeable)
+// Component icons (tree-shakeable)
 import { Plus, Download } from 'lucide-react';
+
 <Button icon={Plus} />
 <Button preIcon={Download}>Download</Button>
 
-// Or using string-based icons
-<Button icon="fa fa-plus" />  // Font Awesome
+// String-based icons (icon font classes)
+<Button icon="fa fa-plus" />   // Font Awesome
 <Button icon="ri-add-line" />  // Remix Icons
 ```
 
-## 📦 Available Components
+## 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**
 
-- **Button** - Versatile button with variants, sizes, colors, icons, loading states
-- **Chip** - Compact elements for tags, labels, or selections
-- **DatePicker** - Date selection with single, multiple, and range modes
-- **Divider** - Visual separator with optional text
-- **Dropdown** - Customizable dropdown menus
-- **Input** - Text input with validation and icons
-- **Menu** - Navigation and action menus
-- **Modal** - Dialog overlays with customizable actions
-- **Select** - Dropdown selection with search
-- **Snackbar** - Toast notifications with actions
-- **Spinner** - Loading indicators
-- **Table** - Data tables with sorting, filtering, and pagination
-- **Tooltip** - Contextual hints with smart positioning
+- Alert
+- Progress
+- Skeleton
+- Spinner
 
-## 📚 Documentation
+</td></tr>
+</table>
 
-For detailed component documentation, props, and interactive examples, visit our Storybook:
+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
 ```
 
-Or check the [live Storybook documentation](#) _(coming soon)_
-
-## 🎨 Customization
+## Theming
 
-### Theming with CSS Variables
-
-All design tokens are customizable via CSS custom properties:
+All design tokens are exposed as CSS custom properties, so themes can be overridden globally without touching component source.
 
 ```css
 :root {
@@ -112,64 +197,29 @@ All design tokens are customizable via CSS custom properties:
 }
 ```
 
-### Dark Mode Example
+Individual component styles can also be targeted directly, following each component's `eidos-<name>` BEM-style class names:
 
 ```css
-[data-theme='dark'] {
-  --primary-color: #818cf8;
-  --background: #1e293b;
-  --text-color: #f1f5f9;
-}
-```
-
-### Override Component Styles
-
-```css
-.eidos-button {
+.eidos-button--filled.eidos-button--primary {
   border-radius: 20px;
-}
-
-.eidos-button--primary {
   background: linear-gradient(to right, #6366f1, #8b5cf6);
 }
 ```
 
-## 💻 TypeScript Support
+## TypeScript
 
-Full TypeScript support with exported types:
+Every component ships with exported prop types:
 
 ```tsx
 import type { ButtonProps, TooltipProps } from 'eidos-ui';
 
-const MyButton: React.FC<ButtonProps> = (props) => {
-  return <Button {...props} />;
-};
+const MyButton: React.FC<ButtonProps> = (props) => <Button {...props} />;
 ```
 
-## 🎯 Icon Support
-
-The library supports multiple icon approaches:
-
-1. **Component Icons** (Lucide, MUI, Heroicons) - Recommended for tree-shaking
-2. **String-based Icons** (Font Awesome, Remix Icons) - Great for dynamic icons
-
-```tsx
-// Component-based (tree-shakeable)
-import { Plus } from 'lucide-react';
-<Button icon={Plus} />
-
-// String-based (requires icon CSS to be loaded)
-<Button icon="fa fa-plus" />
-```
-
-## 📄 License
-
-MIT
-
-## 👤 Author
+## Contributing
 
-Pedro Mealha
+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
 
-Built with ❤️ using React, TypeScript, SCSS, and Storybook
+[MIT](./LICENSE) © Pedro Mealha

package/dist/{Navigation.types-DVcLJnrB.d.ts → Navigation.types-CpS3EYNz.d.ts}

@@ -73,17 +73,20 @@ interface NavigationProps {
     /** Called whenever the collapsed state changes, in both controlled and uncontrolled modes. */
     onCollapsedChange?: (collapsed: boolean) => void;
     /**
-     * Automatically collapses (and re-expands) `Navigation` when the viewport
-     * crosses this width, in pixels - e.g. `collapseBelow={1024}` collapses it
-     * on any viewport narrower than that, and expands it again above. Uses
-     * `window.matchMedia` internally; does nothing until mounted client-side,
-     * so it's SSR-safe. Works the same way in both controlled and uncontrolled
-     * modes: uncontrolled, it drives Navigation's own state directly;
-     * controlled, it calls `onCollapsedChange` at the crossing point, exactly
-     * as if the built-in toggle button had been clicked - your own state stays
-     * in charge either way. A manual toggle in between crossings (e.g.
-     * expanding back while still narrower than this) is respected until the
-     * viewport crosses the breakpoint again.
+     * On by default: automatically collapses (and re-expands) `Navigation`
+     * when the viewport crosses this width, in pixels - e.g.
+     * `collapseBelow={1024}` collapses it on any viewport narrower than that,
+     * and expands it again above. Uses `window.matchMedia` internally; does
+     * nothing until mounted client-side, so it's SSR-safe. Works the same way
+     * in both controlled and uncontrolled modes: uncontrolled, it drives
+     * Navigation's own state directly; controlled, it calls
+     * `onCollapsedChange` at the crossing point, exactly as if the built-in
+     * toggle button had been clicked - your own state stays in charge either
+     * way. A manual toggle in between crossings (e.g. expanding back while
+     * still narrower than this) is respected until the viewport crosses the
+     * breakpoint again. Pass `collapseBelow={0}` to opt out entirely (no
+     * viewport is ever narrower than `0px`).
+     * @default 768
      */
     collapseBelow?: number;
     /** Renders the built-in collapse/expand toggle button. @default true */

package/dist/{Navigation.types-Ctu5mlTa.d.cts → Navigation.types-sUO9wqOp.d.cts}

@@ -73,17 +73,20 @@ interface NavigationProps {
     /** Called whenever the collapsed state changes, in both controlled and uncontrolled modes. */
     onCollapsedChange?: (collapsed: boolean) => void;
     /**
-     * Automatically collapses (and re-expands) `Navigation` when the viewport
-     * crosses this width, in pixels - e.g. `collapseBelow={1024}` collapses it
-     * on any viewport narrower than that, and expands it again above. Uses
-     * `window.matchMedia` internally; does nothing until mounted client-side,
-     * so it's SSR-safe. Works the same way in both controlled and uncontrolled
-     * modes: uncontrolled, it drives Navigation's own state directly;
-     * controlled, it calls `onCollapsedChange` at the crossing point, exactly
-     * as if the built-in toggle button had been clicked - your own state stays
-     * in charge either way. A manual toggle in between crossings (e.g.
-     * expanding back while still narrower than this) is respected until the
-     * viewport crosses the breakpoint again.
+     * On by default: automatically collapses (and re-expands) `Navigation`
+     * when the viewport crosses this width, in pixels - e.g.
+     * `collapseBelow={1024}` collapses it on any viewport narrower than that,
+     * and expands it again above. Uses `window.matchMedia` internally; does
+     * nothing until mounted client-side, so it's SSR-safe. Works the same way
+     * in both controlled and uncontrolled modes: uncontrolled, it drives
+     * Navigation's own state directly; controlled, it calls
+     * `onCollapsedChange` at the crossing point, exactly as if the built-in
+     * toggle button had been clicked - your own state stays in charge either
+     * way. A manual toggle in between crossings (e.g. expanding back while
+     * still narrower than this) is respected until the viewport crosses the
+     * breakpoint again. Pass `collapseBelow={0}` to opt out entirely (no
+     * viewport is ever narrower than `0px`).
+     * @default 768
      */
     collapseBelow?: number;
     /** Renders the built-in collapse/expand toggle button. @default true */

package/dist/{chunk-HPIBYEGE.cjs → chunk-6GAIQ2IY.cjs}

@@ -64,6 +64,7 @@ var _reactdom = require('react-dom');
 
 var _lucidereact = require('lucide-react');
 var _jsxruntime = require('react/jsx-runtime');
+var MIN_COLUMN_WIDTH_PX = 100;
 function SortableTableRow({
   id,
   disabled,
@@ -199,7 +200,7 @@ function DataGridInner({
   density = "comfortable",
   showDensity = false,
   // ── Card view ────────────────────────────────────────────────────────────────
-  hasCardView = false,
+  hasCardView = true,
   cardViewBreakpoint = 640,
   cardMinWidth = 280
 }) {
@@ -264,7 +265,8 @@ function DataGridInner({
     },
     [hasCardView]
   );
-  const isCardView = hasCardView && containerWidth !== null && containerWidth < cardViewBreakpoint;
+  const columnCountForCardView = columns.length + (showRowNumbers ? 1 : 0) + (draggableRows ? 1 : 0) + (selectable ? 1 : 0) + (expandable ? 1 : 0);
+  const isCardView = hasCardView && containerWidth !== null && (containerWidth < cardViewBreakpoint || containerWidth < columnCountForCardView * MIN_COLUMN_WIDTH_PX);
   const cardHeaderColumn = _react.useMemo.call(void 0, () => columns.find((c) => c.cardHeader), [columns]);
   const cardSubheaderColumn = _react.useMemo.call(void 0, () => columns.find((c) => c.cardSubheader), [columns]);
   const actionsColumn = _react.useMemo.call(void 0, () => columns.find((c) => c.type === "actions"), [columns]);
@@ -1481,4 +1483,4 @@ var DataGrid = Object.assign(DataGridInner, { displayName: "DataGrid" });
 
 
 exports.DataGrid = DataGrid;
-//# sourceMappingURL=chunk-HPIBYEGE.cjs.map
+//# sourceMappingURL=chunk-6GAIQ2IY.cjs.map