npm - @mdigital_ui/ui - Versions diffs - 0.5.0 → 0.5.2 - Mend

@mdigital_ui/ui 0.5.0 → 0.5.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (3) hide show

package/README.md CHANGED Viewed

@@ -1,53 +1,110 @@
+<div align="center">
 # @mdigital_ui/ui
-React component library. 76 components. Tailwind CSS v4, CVA, Radix UI.
+**A modern React component library built for speed.**
+76 components · Tailwind CSS v4 · Slot-based theming · Tree-shakeable
+[![CI](https://github.com/mstrluke/mdigital_uikit/actions/workflows/ci.yml/badge.svg)](https://github.com/mstrluke/mdigital_uikit/actions/workflows/ci.yml)
+[![npm](https://img.shields.io/npm/v/@mdigital_ui/ui?color=blue)](https://www.npmjs.com/package/@mdigital_ui/ui)
+[![downloads](https://img.shields.io/npm/dm/@mdigital_ui/ui?color=green)](https://www.npmjs.com/package/@mdigital_ui/ui)
+[![bundle size](https://img.shields.io/bundlephobia/minzip/@mdigital_ui/ui)](https://bundlephobia.com/package/@mdigital_ui/ui)
+[![license](https://img.shields.io/github/license/mstrluke/mdigital_uikit)](https://github.com/mstrluke/mdigital_uikit/blob/main/LICENSE)
+[Changelog](https://github.com/mstrluke/mdigital_uikit/releases) · [Report Bug](https://github.com/mstrluke/mdigital_uikit/issues/new?template=bug_report.md) · [Request Feature](https://github.com/mstrluke/mdigital_uikit/issues/new?template=feature_request.md)
+</div>
+---
+## Why This Library?
+| | @mdigital_ui/ui | shadcn/ui | Ant Design | Chakra UI |
+|---|---|---|---|---|
+| **Theming** | Slot-based color system — 1 prop themes everything | Copy-paste, manual | Token config object | colorScheme prop |
+| **Tailwind** | v4 native (`@theme`, `@source`) | v3 with config | No Tailwind | No Tailwind |
+| **Bundle** | Tree-shake per component | Copy into project | 300KB+ full bundle | 200KB+ full bundle |
+| **Dark mode** | Zero-config CSS variables | Manual `dark:` classes | ConfigProvider | ColorModeProvider |
+| **Components** | 76 production-ready | ~50 primitives | 60+ | 60+ |
+| **Tests** | 1,556 tests | Community | Extensive | Moderate |
+### The Slot Color System
+One `color` prop. Every part of the component responds — backgrounds, borders, text, hover states, focus rings. No manual mapping. No 49 color variants hardcoded per component.
+```tsx
+<Button color="primary">Submit</Button>
+<Button color="error">Delete</Button>
+<Alert color="warning">Watch out</Alert>
+<Badge color="success">Active</Badge>
+```
+Under the hood, `color="primary"` sets a single CSS variable `--_c`. Every slot utility (`bg-slot`, `text-slot`, `border-slot-30`, `bg-slot-10`) derives from it automatically. Add a new color to your theme → every component supports it instantly.
+### Tailwind CSS v4 Native
+Not "works with Tailwind" — **built on v4's architecture**:
+- `@theme` block defines all tokens as CSS custom properties
+- `@source` auto-scans compiled components — no manual safelist
+- `@custom-variant dark` — dark mode via `.dark` class on `<html>`
+- `@utility` defines the slot color system as real Tailwind utilities
+- When Tailwind ships new features, you get them. No wrapper layer in the way.
+### Per-Component Imports
-## Install
+Every component is its own entry point. Import what you use, ship only what you use:
+```tsx
+import Button from '@mdigital_ui/ui/button'     // just Button
+import Table from '@mdigital_ui/ui/table'        // just Table
+import { useTheme } from '@mdigital_ui/ui/theme' // just the hook
+```
+---
+## Quick Start
 ```bash
 npm install @mdigital_ui/ui
 ```
-Peer deps: `react`, `react-dom`, `lucide-react`, `tailwindcss` (v4+)
-## Setup
+> **Peer deps:** `react` ≥18, `react-dom` ≥18, `lucide-react` ≥0.400, `tailwindcss` ≥4.0
-Your project needs Tailwind CSS v4 with either `@tailwindcss/vite` or `@tailwindcss/postcss`.
+### CSS Setup
-In your CSS entry point:
+Your project needs Tailwind CSS v4 with `@tailwindcss/vite` or `@tailwindcss/postcss`.
 ```css
 @import "tailwindcss";
 @import "@mdigital_ui/ui/styles/global.css";
 ```
-That's it. Our CSS provides:
-- `@theme` — all design tokens as CSS variables (override in `:root`)
-- `@source "../dist"` — Tailwind auto-scans our compiled components for class names
-- `@custom-variant dark` — dark mode via `.dark` class
-- `@utility` — slot-based color system, stroke utilities
-- Component-specific styles (datepicker, animations)
+That's it. One import. Tokens, dark mode, utilities, component styles — all included.
-Your Tailwind build processes everything. When Tailwind ships new utilities or features, you get them immediately.
-## Usage
+### Use It
 ```tsx
 import Button from '@mdigital_ui/ui/button'
 import Input from '@mdigital_ui/ui/input'
-import { Card, CardHeader, CardTitle, CardContent } from '@mdigital_ui/ui/card'
+import Select from '@mdigital_ui/ui/select'
+function App() {
+  return (
+    <div className="flex gap-3">
+      <Input placeholder="Search..." />
+      <Select options={[{ label: 'React', value: 'react' }]} />
+      <Button color="primary">Go</Button>
+    </div>
+  )
+}
 ```
-Barrel import also works:
-```tsx
-import { Button, Input, Card } from '@mdigital_ui/ui'
-```
+---
 ## Dark Mode
-Toggle `.dark` class on `<html>`:
 ```tsx
 import { ThemeProvider, useTheme } from '@mdigital_ui/ui/theme'
@@ -55,258 +112,264 @@ import { ThemeProvider, useTheme } from '@mdigital_ui/ui/theme'
   <App />
 </ThemeProvider>
-// anywhere:
-const { theme, setTheme, resolvedTheme } = useTheme()
+// Toggle anywhere:
+const { setTheme } = useTheme()
 setTheme('dark') // 'light' | 'dark' | 'system'
 ```
 SSR flash prevention — add to `<head>`:
 ```tsx
-import { themeScript } from '@mdigital_ui/ui/theme'
+import { getThemeScript } from '@mdigital_ui/ui/theme'
-<script dangerouslySetInnerHTML={{ __html: themeScript }} />
+<script dangerouslySetInnerHTML={{ __html: getThemeScript() }} />
 ```
-All components use CSS custom properties. Dark mode swaps values at `:root` level. No `dark:` prefixes needed.
+All components use CSS custom properties. Dark mode swaps values at `:root`. Zero `dark:` prefixes in component code.
 ## Theme Presets
-```tsx
-import '@mdigital_ui/ui/styles/global.css'
-import '@mdigital_ui/ui/styles/themes/presets/corporate.css'
+```css
+@import "@mdigital_ui/ui/styles/global.css";
+@import "@mdigital_ui/ui/styles/themes/presets/corporate.css";
 ```
 ```html
 <html data-theme="corporate" class="dark">
 ```
-Presets: `corporate`, `vibrant`, `minimal`. Independent of dark/light — combine freely.
+Available: `corporate`, `vibrant`, `minimal`. Mix with dark/light freely.
 ## Custom Tokens
-All tokens live in one `@theme` block. Override after our import:
+Override after our import — no `!important` needed:
 ```css
+@import "tailwindcss";
+@import "@mdigital_ui/ui/styles/global.css";
+/* Your overrides — just plain :root, wins by source order */
 :root {
   --color-primary: oklch(0.55 0.22 270);
   --color-primary-hover: oklch(0.50 0.24 270);
   --color-primary-foreground: oklch(1 0 0);
   --color-background: oklch(0.98 0 0);
-  --color-surface: oklch(0.95 0 0);
-  --color-border: oklch(0.90 0 0);
-  --color-text-primary: oklch(0.15 0 0);
-  --color-text-secondary: oklch(0.45 0 0);
-  --button-height-md: 2.5rem;
-  --input-height-md: 2.5rem;
   --font-sans: 'Inter', system-ui, sans-serif;
+  --button-height-md: 2.5rem;
+}
+/* Optional: different dark mode values */
+.dark {
+  --color-primary: oklch(0.65 0.22 270);
+  --color-background: oklch(0.12 0.01 270);
 }
 ```
-Full token list in [CSS Variables](#css-variables).
+Every token is a CSS variable. Change one, it propagates everywhere. Dark mode selectors use `:where()` to keep specificity flat — your overrides always win by source order.
-## Common Props
+---
-### color
+## Common API
+### `color`
 ```
 'default' | 'primary' | 'secondary' | 'accent' | 'success' | 'error' | 'warning' | 'info'
 ```
-### size
+### `size`
 ```
 'xs' | 'sm' | 'md' | 'lg'
 ```
-### variant
+### `variant`
-Per-component. Examples:
-- Button: `solid`, `outline`, `soft`, `dashed`, `link`, `ghost`
-- Card: `default`, `solid`, `outline`, `soft`, `ghost`, `elevated`
-- Input: `outline`, `filled`
-- Badge/Tag: `default`, `solid`, `outline`, `soft`
+Per-component:
+- **Button:** `solid` `outline` `soft` `dashed` `link` `ghost`
+- **Card:** `default` `solid` `outline` `soft` `ghost` `elevated`
+- **Checkbox / Toggle:** `solid` `outline` `soft`
+- **Input:** `outline` `filled`
+- **Badge / Tag:** `default` `solid` `outline` `soft`
 ### Validation
-Form components accept validation as string (message) or boolean:
 ```tsx
 <Input error="Required field" />
 <Input warning="Weak password" />
 <Input success />
 ```
-## Styling
+### Styling Escape Hatches
-### className
+```tsx
+// Root element
+<Button className="shadow-lg">Submit</Button>
-Root element:
+// Internal parts
+<Input classNames={{ root: 'mb-4', label: 'font-bold', input: 'tracking-wide' }} />
-```tsx
-<Button className="shadow-lg mt-4">Submit</Button>
+// CSS selectors — every part has a semantic class + data-slot
+.input_label { font-weight: 700; }
+[data-slot="trigger"] { min-width: 200px; }
 ```
-### classNames
+---
-Target internal parts:
+## All 76 Components
-```tsx
-<Input
-  classNames={{
-    root: 'mb-4',
-    label: 'font-bold',
-    input: 'tracking-wide',
-    helper: 'italic',
-  }}
-/>
-```
+<details>
+<summary><b>Data Entry (27)</b></summary>
+| Component | Import |
+|-----------|--------|
+| Input | `@mdigital_ui/ui/input` |
+| FloatInput | `@mdigital_ui/ui/float-input` |
+| InputPassword | `@mdigital_ui/ui/input-password` |
+| InputOTP | `@mdigital_ui/ui/input-otp` |
+| InputGroup | `@mdigital_ui/ui/input-group` |
+| NumberInput | `@mdigital_ui/ui/number-input` |
+| Textarea | `@mdigital_ui/ui/textarea` |
+| Select | `@mdigital_ui/ui/select` |
+| MultiSelect | `@mdigital_ui/ui/multi-select` |
+| Cascader | `@mdigital_ui/ui/cascader` |
+| TreeSelect | `@mdigital_ui/ui/tree-select` |
+| DatePicker | `@mdigital_ui/ui/date-picker` |
+| ColorPicker | `@mdigital_ui/ui/color-picker` |
+| Autocomplete | `@mdigital_ui/ui/autocomplete` |
+| Mentions | `@mdigital_ui/ui/mentions` |
+| Checkbox | `@mdigital_ui/ui/checkbox` |
+| CheckboxGroup | `@mdigital_ui/ui/checkbox-group` |
+| Radio | `@mdigital_ui/ui/radio` |
+| RadioGroup | `@mdigital_ui/ui/radio-group` |
+| Switch | `@mdigital_ui/ui/switch` |
+| Slider | `@mdigital_ui/ui/slider` |
+| Rating | `@mdigital_ui/ui/rating` |
+| Toggle | `@mdigital_ui/ui/toggle` |
+| ToggleGroup | `@mdigital_ui/ui/toggle-group` |
+| Upload | `@mdigital_ui/ui/upload` |
+| Clipboard | `@mdigital_ui/ui/clipboard` |
+| TagsInput | `@mdigital_ui/ui/tags-input` |
-### CSS selectors
+</details>
-Every part gets a semantic class and `data-slot`:
+<details>
+<summary><b>Layout (9)</b></summary>
+| Component | Import |
+|-----------|--------|
+| Button | `@mdigital_ui/ui/button` |
+| ButtonGroup | `@mdigital_ui/ui/button-group` |
+| Card | `@mdigital_ui/ui/card` |
+| Grid | `@mdigital_ui/ui/grid` |
+| Divider | `@mdigital_ui/ui/divider` |
+| Collapse | `@mdigital_ui/ui/collapse` |
+| Accordion | `@mdigital_ui/ui/accordion` |
+| ScrollArea | `@mdigital_ui/ui/scroll-area` |
+| Resizable | `@mdigital_ui/ui/resizable` |
-```css
-.button_root { border-radius: 12px; }
-.input_label { font-weight: 700; }
-[data-slot="trigger"] { min-width: 200px; }
-```
+</details>
+<details>
+<summary><b>Navigation (12)</b></summary>
+| Component | Import |
+|-----------|--------|
+| Tabs | `@mdigital_ui/ui/tabs` |
+| Breadcrumbs | `@mdigital_ui/ui/breadcrumbs` |
+| Pagination | `@mdigital_ui/ui/pagination` |
+| Stepper | `@mdigital_ui/ui/stepper` |
+| Dropdown | `@mdigital_ui/ui/dropdown` |
+| ContextMenu | `@mdigital_ui/ui/context-menu` |
+| Menubar | `@mdigital_ui/ui/menubar` |
+| NavigationMenu | `@mdigital_ui/ui/navigation-menu` |
+| Command | `@mdigital_ui/ui/command` |
+| Anchor | `@mdigital_ui/ui/anchor` |
+| Link | `@mdigital_ui/ui/link` |
+| FloatButton | `@mdigital_ui/ui/float-button` |
-## Components
-### Inputs
-| Component | Path |
-|-----------|------|
-| Input | `input` |
-| FloatInput | `float-input` |
-| InputPassword | `input-password` |
-| InputOTP | `input-otp` |
-| InputGroup | `input-group` |
-| NumberInput | `number-input` |
-| Textarea | `textarea` |
-| Select | `select` |
-| MultiSelect | `multi-select` |
-| Cascader | `cascader` |
-| TreeSelect | `tree-select` |
-| DatePicker | `date-picker` |
-| ColorPicker | `color-picker` |
-| Autocomplete | `autocomplete` |
-| Mentions | `mentions` |
-| Checkbox | `checkbox` |
-| CheckboxGroup | `checkbox-group` |
-| Radio | `radio` |
-| RadioGroup | `radio-group` |
-| Switch | `switch` |
-| Slider | `slider` |
-| Rating | `rating` |
-| Toggle | `toggle` |
-| ToggleGroup | `toggle-group` |
-| Upload | `upload` |
-| Clipboard | `clipboard` |
-| TagsInput | `tags-input` |
-### Layout
-| Component | Path |
-|-----------|------|
-| Button | `button` |
-| ButtonGroup | `button-group` |
-| Card | `card` |
-| Grid | `grid` |
-| Divider | `divider` |
-| Collapse | `collapse` |
-| Accordion | `accordion` |
-| ScrollArea | `scroll-area` |
-| Resizable | `resizable` |
-### Navigation
-| Component | Path |
-|-----------|------|
-| Tabs | `tabs` |
-| Breadcrumbs | `breadcrumbs` |
-| Pagination | `pagination` |
-| Stepper | `stepper` |
-| Dropdown | `dropdown` |
-| ContextMenu | `context-menu` |
-| Menubar | `menubar` |
-| NavigationMenu | `navigation-menu` |
-| Command | `command` |
-| Anchor | `anchor` |
-| Link | `link` |
-| FloatButton | `float-button` |
-### Overlays
-| Component | Path |
-|-----------|------|
-| Modal | `modal` |
-| Drawer | `drawer` |
-| Tooltip | `tooltip` |
-| Popover | `popover` |
-| Tour | `tour` |
-### Feedback
-| Component | Path |
-|-----------|------|
-| Notification | `notification` |
-| Alert | `alert` |
-| Toast | `toast` |
-| Progress | `progress` |
-| Spinner | `spinner` |
-| Skeleton | `skeleton` |
-| Result | `result` |
-| FetchingOverlay | `fetching-overlay` |
-### Data
-| Component | Path |
-|-----------|------|
-| Table | `table` |
-| Tree | `tree` |
-| Calendar | `calendar` |
-| Descriptions | `descriptions` |
-| Timeline | `timeline` |
-| Transfer | `transfer` |
-| Carousel | `carousel` |
-| Image | `image` |
-| QRCode | `qr-code` |
-### Display
-| Component | Path |
-|-----------|------|
-| Badge | `badge` |
-| Tag | `tag` |
-| Avatar | `avatar` |
-| Kbd | `kbd` |
-| Typography | `typography` |
-| Watermark | `watermark` |
-### Theme
-| Export | Path |
-|--------|------|
-| ThemeProvider, useTheme, themeScript | `theme` |
-### Hooks
-| Hook | Path |
-|------|------|
-| useControllable | `hooks/useControllable` |
-| useDebounce | `hooks/useDebounce` |
-| useThrottle | `hooks/useThrottle` |
-| useMediaQuery | `hooks/useMediaQuery` |
-| useRipple | `hooks/useRipple` |
-## CSS Variables
+</details>
+<details>
+<summary><b>Overlays (5)</b></summary>
+| Component | Import |
+|-----------|--------|
+| Modal | `@mdigital_ui/ui/modal` |
+| Drawer | `@mdigital_ui/ui/drawer` |
+| Tooltip | `@mdigital_ui/ui/tooltip` |
+| Popover | `@mdigital_ui/ui/popover` |
+| Tour | `@mdigital_ui/ui/tour` |
+</details>
 <details>
-<summary>Colors</summary>
+<summary><b>Feedback (8)</b></summary>
+| Component | Import |
+|-----------|--------|
+| Notification | `@mdigital_ui/ui/notification` |
+| Alert | `@mdigital_ui/ui/alert` |
+| Toast | `@mdigital_ui/ui/toast` |
+| Progress | `@mdigital_ui/ui/progress` |
+| Spinner | `@mdigital_ui/ui/spinner` |
+| Skeleton | `@mdigital_ui/ui/skeleton` |
+| Result | `@mdigital_ui/ui/result` |
+| FetchingOverlay | `@mdigital_ui/ui/fetching-overlay` |
+</details>
+<details>
+<summary><b>Data Display (9)</b></summary>
+| Component | Import |
+|-----------|--------|
+| Table | `@mdigital_ui/ui/table` |
+| Tree | `@mdigital_ui/ui/tree` |
+| Calendar | `@mdigital_ui/ui/calendar` |
+| Descriptions | `@mdigital_ui/ui/descriptions` |
+| Timeline | `@mdigital_ui/ui/timeline` |
+| Transfer | `@mdigital_ui/ui/transfer` |
+| Carousel | `@mdigital_ui/ui/carousel` |
+| Image | `@mdigital_ui/ui/image` |
+| QRCode | `@mdigital_ui/ui/qr-code` |
+</details>
+<details>
+<summary><b>General (6)</b></summary>
+| Component | Import |
+|-----------|--------|
+| Badge | `@mdigital_ui/ui/badge` |
+| Tag | `@mdigital_ui/ui/tag` |
+| Avatar | `@mdigital_ui/ui/avatar` |
+| Kbd | `@mdigital_ui/ui/kbd` |
+| Typography | `@mdigital_ui/ui/typography` |
+| Watermark | `@mdigital_ui/ui/watermark` |
+</details>
+<details>
+<summary><b>Theme & Hooks</b></summary>
+| Export | Import |
+|--------|--------|
+| ThemeProvider, useTheme, getThemeScript | `@mdigital_ui/ui/theme` |
+| useControllable | `@mdigital_ui/ui/hooks/useControllable` |
+| useDebounce | `@mdigital_ui/ui/hooks/useDebounce` |
+| useThrottle | `@mdigital_ui/ui/hooks/useThrottle` |
+| useMediaQuery | `@mdigital_ui/ui/hooks/useMediaQuery` |
+| useRipple | `@mdigital_ui/ui/hooks/useRipple` |
+</details>
+---
+## CSS Variables Reference
+<details>
+<summary><b>Colors</b></summary>
 ```
 --color-primary / -hover / -active / -foreground
@@ -322,10 +385,7 @@ Every part gets a semantic class and `data-slot`:
 --color-card / -foreground
 --color-border / -primary / -hover / -focus
---color-text-primary
---color-text-secondary
---color-text-muted
---color-text-disabled
+--color-text-primary / -secondary / -muted / -disabled
 --color-input-bg / -text / -placeholder / -border / -border-focus / -border-error
 --color-focus / -ring
@@ -336,61 +396,43 @@ Every part gets a semantic class and `data-slot`:
 </details>
 <details>
-<summary>Sizing</summary>
+<summary><b>Sizing</b></summary>
 ```
---size-xs / -sm / -md / -lg          (shared base heights)
---button-height-xs/sm/md/lg
---button-padding-x-xs/sm/md/lg
---input-height-xs/sm/md/lg
---input-padding-x-xs/sm/md/lg
---select-height-xs/sm/md/lg
---select-padding-x-xs/sm/md/lg
---toggle-height-xs/sm/md/lg
---toggle-padding-x-xs/sm/md/lg
+--button-height-xs/sm/md/lg      --button-padding-x-xs/sm/md/lg
+--input-height-xs/sm/md/lg       --input-padding-x-xs/sm/md/lg
+--select-height-xs/sm/md/lg      --select-padding-x-xs/sm/md/lg
+--toggle-height-xs/sm/md/lg      --toggle-padding-x-xs/sm/md/lg
 --textarea-min-height-xs/sm/md/lg
---textarea-padding-xs/sm/md/lg
 --checkbox-size-xs/sm/md/lg
---switch-width-xs/sm/md/lg
---switch-height-xs/sm/md/lg
+--switch-width-xs/sm/md/lg       --switch-height-xs/sm/md/lg
 --otp-size-xs/sm/md/lg
 --accordion-padding-x-xs/sm/md/lg
---accordion-padding-y-xs/sm/md/lg
 ```
 </details>
 <details>
-<summary>Effects & Layout</summary>
+<summary><b>Effects & Z-Index</b></summary>
 ```
 --shadow-sm / -md / -lg / -xl / -2xl
---overlay-stripe
---z-dropdown    (1000)
---z-sticky      (1020)
---z-modal       (1040)
---z-popover     (1050)
---z-tooltip     (1060)
---z-overlay     (1070)
+--z-dropdown  (1000)    --z-sticky   (1020)
+--z-modal     (1040)    --z-popover  (1050)
+--z-tooltip   (1060)    --z-overlay  (1070)
 ```
 </details>
+---
 ## TypeScript
-All props and types exported:
+Full type coverage. Every prop, variant, and callback is typed:
 ```tsx
-import type { ButtonProps, InputProps, SelectProps } from '@mdigital_ui/ui'
-import type { TableProps, ModalClassNames, CardVariant } from '@mdigital_ui/ui'
+import type { ButtonProps, SelectOption, TableColumn } from '@mdigital_ui/ui'
 ```
 ## Browser Support
@@ -399,4 +441,4 @@ Chrome, Firefox, Safari, Edge — last 2 versions.
 ## License
-MIT
+[MIT](./LICENSE)

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@mdigital_ui/ui",
-  "version": "0.5.0",
+  "version": "0.5.2",
   "description": "Modern React component library built with Tailwind CSS v4",
   "type": "module",
   "main": "./dist/index.js",

package/styles/global.css CHANGED Viewed

@@ -326,9 +326,9 @@
 /* ============================================
    DARK MODE
    ============================================ */
-:root.dark,
+:root:where(.dark),
 .dark,
-:root[data-mode='dark'],
+:root:where([data-mode='dark']),
 [data-mode='dark'] {
   --color-primary: oklch(62% 0.17 239);
   --color-primary-hover: oklch(67% 0.19 239);