@geomak/ui 6.17.1 → 6.18.0

package/README.md

@@ -1,8 +1,8 @@
 # @geomak/ui
 
-Oxygen Design System — reusable UI primitives for React applications.
+**Oxygen Design System** — a production-grade React component library for enterprise apps: internal dashboards, CRM tools, and landing pages.
 
-Built with **React 19**, **Radix UI** (accessibility & behaviour), and **Tailwind CSS v3**. Ships as ESM + CJS + TypeScript declarations.
+Built with **React 19**, **Radix UI** (accessibility & behaviour), **Tailwind CSS v3**, and **Framer Motion**. Fully themeable through a CSS-variable design-token layer, with first-class light/dark support. Ships as ESM + CJS + TypeScript declarations.
 
 ---
 
@@ -20,10 +20,10 @@ Import the stylesheet once at your app root:
 import '@geomak/ui/styles'
 ```
 
-Wrap your app with the required providers:
+Wrap your app with the providers for the features you use:
 
 ```tsx
-import { TooltipProvider, NotificationProvider } from '@geomak/ui'
+import { NotificationProvider, TooltipProvider } from '@geomak/ui'
 
 function App() {
     return (
@@ -36,67 +36,94 @@ function App() {
 }
 ```
 
+Optional providers: `ThemeProvider` (scoped theming / dark mode), `CartProvider` (e-commerce cart state).
+
 ---
 
 ## Components
 
-### Inputs
-`Button` · `TextInput` · `NumberInput` · `Password` · `SearchInput` · `Checkbox` · `Switch` · `Dropdown` · `AutoComplete` · `TreeSelect` · `FileInput` · `Temporal.DatePicker` · `Temporal.TemporalPicker` · `DropdownPill`
-
-### Core
-`Modal` · `Drawer` · `Tooltip` · `Tabs` · `Tree` · `ToggleButton` · `Table` · `List` · `MenuBar` · `ContextMenu` · `Wizard` · `Catalog` · `CatalogGrid` · `CatalogCarousel` · `GridCard` · `OpaqueGridCard` · `ScalableContainer` · `LoadingSpinner` · `FadingBase` · `Notification` · `ThemeSwitch` · `IconButton`
+60+ components across the following groups. Browse the full, interactive catalog with live controls and guides in **Storybook** (`yarn storybook`, or the deployed build on Netlify).
 
-### Icons
-`Icon.XClose` · `Icon.ChevronRight` · `Icon.Dashboard` · `Icon.FleetIcon` · … (50+ icons)
+| Group | Components |
+|---|---|
+| **Layout** | AppShell · Box · Flex · Grid · Portal · ScalableContainer · FadingBase |
+| **Navigation** | TopBar · Sidebar · Breadcrumbs · ContextMenu · MegaMenu |
+| **Buttons** | Button · IconButton · FAB |
+| **Inputs** | TextInput · NumberInput · Password · SearchInput · TextArea · Checkbox · Switch · RadioGroup · SegmentedControl · Dropdown · AutoComplete · TreeSelect · TagsInput · Slider · Rating · OtpInput · FileInput · ColorPicker · DatePicker · DateRangePicker · TimePicker |
+| **Forms** | Form (`useForm` API) · CreditCardForm |
+| **Data Display** | Table · List · Tree · Tabs · Accordion · Card · CardCarousel · Statistic · Avatar · Badge · Kbd · Calendar · Typography |
+| **Feedback** | Modal · Drawer · Tooltip · Notification · PopConfirm · Wizard |
+| **Progress** | LoadingSpinner · Skeleton |
+| **E-Commerce** | Cart · CartProvider / `useCart` · CartButton · EmptyCart · Checkout |
+| **Theming** | ThemeProvider · ThemeSwitch |
 
 ---
 
-## Development
+## Design tokens
 
-```bash
-# Install dependencies
-yarn
+Every visual decision is driven by a CSS-variable token layer (colours, radius, shadows, typography, density, motion, z-index) — swap any of it at runtime with a single override. Tokens are also exported as JS for canvas / email / SSR contexts:
 
-# Start Storybook
-yarn storybook
+```tsx
+import { semanticTokens, vars, palette } from '@geomak/ui/tokens'
 
-# Build the library (ESM + CJS + .d.ts)
-yarn build
+// CSS-var references (respond to light/dark automatically)
+<div style={{ background: vars.color.surface, borderRadius: vars.radius.lg }} />
+
+// Resolved hex/px values
+semanticTokens.dark.accent // '#2d88ff'
+```
 
-# Type-check
-yarn typecheck
+Override globally after importing the stylesheet:
 
-# Lint
-yarn lint
+```css
+:root { --color-accent: #7c3aed; }
 ```
 
+See the **Tokens**, **Palette**, and **Parameterization** guides in Storybook.
+
 ---
 
 ## Tailwind setup (consuming app)
 
-The package ships a colour palette. Add to your `tailwind.config.js`:
+To use the same tokens and utilities in your own markup, extend your Tailwind config with the shipped brand palette. The library's compiled `styles` already cover the components themselves — this step is only needed for your own classes.
 
 ```js
 const PALETTE = require('@geomak/ui/src/utils/palette.json')
 
 module.exports = {
-    content: [
-        './src/**/*.{ts,tsx}',
-        './node_modules/@geomak/ui/dist/**/*.js',
-    ],
+    content: ['./src/**/*.{ts,tsx}', './node_modules/@geomak/ui/dist/**/*.js'],
     darkMode: 'class',
     theme: {
-        colors: PALETTE,
-        // ... your extensions
+        extend: {
+            colors: PALETTE,
+            // semantic utilities map to the CSS vars, e.g.:
+            // background: 'var(--color-background)', surface: 'var(--color-surface)', …
+        },
     },
 }
 ```
 
+The library's own config also restores the standard **gray / slate / zinc** ramps and **black** alongside the brand palette, so the basic neutrals are always available.
+
+---
+
+## Development
+
+```bash
+yarn              # install dependencies
+yarn storybook    # start Storybook
+yarn build        # build the library (ESM + CJS + .d.ts + styles)
+yarn typecheck    # type-check
+yarn lint         # lint
+yarn test         # run unit tests (Vitest)
+yarn ci           # typecheck + lint + test
+```
+
 ---
 
 ## Releases
 
-This package uses [semantic-release](https://github.com/semantic-release/semantic-release) with [Conventional Commits](https://www.conventionalcommits.org/).
+Uses [semantic-release](https://github.com/semantic-release/semantic-release) with [Conventional Commits](https://www.conventionalcommits.org/).
 
 | Commit prefix | Version bump |
 |---|---|
@@ -104,7 +131,7 @@ This package uses [semantic-release](https://github.com/semantic-release/semanti
 | `feat:` | minor (0.x.0) |
 | `feat!:` / `BREAKING CHANGE:` | major (x.0.0) |
 
-Merging to `main` automatically lints, type-checks, publishes to npm, and deploys Storybook to Netlify.
+Merging to `main` automatically lints, type-checks, tests, publishes to npm, and deploys Storybook to Netlify.
 
 ---
 

package/dist/index.cjs

@@ -3004,11 +3004,13 @@ function TextInput({
   className,
   required,
   prefix,
-  suffix
+  suffix,
+  id
 }) {
   const errorId = React24.useId();
   const hasError = errorMessage != null;
   const hasAdornment = prefix != null || suffix != null;
+  const inputId = htmlFor ?? id;
   const input = /* @__PURE__ */ jsxRuntime.jsx(
     "input",
     {
@@ -3019,7 +3021,7 @@ function TextInput({
       onBlur,
       type,
       name,
-      id: htmlFor,
+      id: inputId,
       "aria-invalid": hasError || void 0,
       "aria-describedby": hasError ? errorId : void 0,
       placeholder: placeholder ?? "",
@@ -3032,7 +3034,7 @@ function TextInput({
     {
       className,
       label,
-      htmlFor,
+      htmlFor: inputId,
       errorId,
       errorMessage,
       helperText,