@geomak/ui 6.17.2 → 6.19.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

@@ -1774,7 +1774,25 @@ Card.Body = CardBody;
 Card.Footer = CardFooter;
 var Card_default = Card;
 var Arrow2 = ({ dir }) => /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, "aria-hidden": "true", className: "h-5 w-5", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: dir === "left" ? "M15 19l-7-7 7-7" : "M9 5l7 7-7 7" }) });
-function CardCarousel({
+var arrowBtn = "absolute top-1/2 -translate-y-1/2 z-30 flex h-9 w-9 items-center justify-center rounded-full border border-border bg-surface text-foreground-secondary shadow-md transition hover:text-foreground hover:bg-surface-raised disabled:opacity-0 disabled:pointer-events-none focus:outline-none focus-visible:ring-2 focus-visible:ring-accent";
+var Dots = ({ count, active, onSelect }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-3 flex items-center justify-center gap-1.5", children: Array.from({ length: count }, (_, i) => /* @__PURE__ */ jsxRuntime.jsx(
+  "button",
+  {
+    type: "button",
+    "aria-label": `Go to slide ${i + 1}`,
+    "aria-current": i === active,
+    onClick: () => onSelect(i),
+    className: [
+      "h-1.5 rounded-full transition-all duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-accent",
+      i === active ? "w-5 bg-accent" : "w-1.5 bg-border hover:bg-foreground-muted"
+    ].join(" ")
+  },
+  i
+)) });
+function CardCarousel(props) {
+  return props.variant === "rotating" ? /* @__PURE__ */ jsxRuntime.jsx(RotatingCarousel, { ...props }) : /* @__PURE__ */ jsxRuntime.jsx(FlatCarousel, { ...props });
+}
+function FlatCarousel({
   children,
   itemWidth = 280,
   gap = 16,
@@ -1793,7 +1811,6 @@ function CardCarousel({
   const update = React24.useCallback(() => {
     const el = scrollerRef.current;
     if (!el) return;
-    el.clientWidth;
     setAtStart(el.scrollLeft <= 1);
     setAtEnd(el.scrollLeft + el.clientWidth >= el.scrollWidth - 1);
     const first = el.firstElementChild;
@@ -1811,49 +1828,109 @@ function CardCarousel({
       window.removeEventListener("resize", update);
     };
   }, [update]);
-  const scrollByDir = (dir) => {
+  const slideStep = (dir) => {
     const el = scrollerRef.current;
     if (!el) return;
     const first = el.firstElementChild;
     const slideW = first ? first.getBoundingClientRect().width + gap : el.clientWidth;
     el.scrollBy({ left: dir * slideW, behavior: "smooth" });
   };
-  const scrollTo = (i) => {
+  const scrollToIndex = (i) => {
     const el = scrollerRef.current;
     if (!el) return;
     const first = el.firstElementChild;
     const slideW = first ? first.getBoundingClientRect().width + gap : el.clientWidth;
     el.scrollTo({ left: i * slideW, behavior: "smooth" });
   };
-  const arrowBtn = "absolute top-1/2 -translate-y-1/2 z-10 flex h-9 w-9 items-center justify-center rounded-full border border-border bg-surface text-foreground-secondary shadow-md transition hover:text-foreground hover:bg-surface-raised disabled:opacity-0 disabled:pointer-events-none focus:outline-none focus-visible:ring-2 focus-visible:ring-accent";
-  return /* @__PURE__ */ jsxRuntime.jsxs("section", { "aria-label": ariaLabel, className: ["relative", className].filter(Boolean).join(" "), style, children: [
-    showArrows && /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", "aria-label": "Previous", onClick: () => scrollByDir(-1), disabled: atStart, className: `${arrowBtn} left-1`, children: /* @__PURE__ */ jsxRuntime.jsx(Arrow2, { dir: "left" }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        ref: scrollerRef,
-        className: "flex overflow-x-auto snap-x snap-mandatory hidden-scrollbar scroll-smooth",
-        style: { gap },
-        children: slides.map((slide, i) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "snap-start flex-shrink-0", style: { width }, children: slide }, i))
-      }
-    ),
-    showArrows && /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", "aria-label": "Next", onClick: () => scrollByDir(1), disabled: atEnd, className: `${arrowBtn} right-1`, children: /* @__PURE__ */ jsxRuntime.jsx(Arrow2, { dir: "right" }) }),
-    showDots && slides.length > 1 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-3 flex items-center justify-center gap-1.5", children: slides.map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
-      {
-        type: "button",
-        "aria-label": `Go to slide ${i + 1}`,
-        "aria-current": i === active,
-        onClick: () => scrollTo(i),
-        className: [
-          "h-1.5 rounded-full transition-all duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-accent",
-          i === active ? "w-5 bg-accent" : "w-1.5 bg-border hover:bg-foreground-muted"
-        ].join(" ")
-      },
-      i
-    )) })
+  return /* @__PURE__ */ jsxRuntime.jsxs("section", { "aria-label": ariaLabel, "aria-roledescription": "carousel", className: ["relative", className].filter(Boolean).join(" "), style, children: [
+    showArrows && /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", "aria-label": "Previous", onClick: () => slideStep(-1), disabled: atStart, className: `${arrowBtn} left-1`, children: /* @__PURE__ */ jsxRuntime.jsx(Arrow2, { dir: "left" }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { ref: scrollerRef, className: "flex overflow-x-auto snap-x snap-mandatory hidden-scrollbar scroll-smooth", style: { gap }, children: slides.map((slide, i) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "snap-start flex-shrink-0", style: { width }, children: slide }, i)) }),
+    showArrows && /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", "aria-label": "Next", onClick: () => slideStep(1), disabled: atEnd, className: `${arrowBtn} right-1`, children: /* @__PURE__ */ jsxRuntime.jsx(Arrow2, { dir: "right" }) }),
+    showDots && slides.length > 1 && /* @__PURE__ */ jsxRuntime.jsx(Dots, { count: slides.length, active, onSelect: scrollToIndex })
   ] });
 }
+function RotatingCarousel({
+  children,
+  itemWidth = 280,
+  showArrows = true,
+  showDots = false,
+  "aria-label": ariaLabel = "Carousel",
+  className = "",
+  style
+}) {
+  const slides = React24__default.default.Children.toArray(children);
+  const count = slides.length;
+  const [active, setActive] = React24.useState(0);
+  const reduced = framerMotion.useReducedMotion();
+  const idx = Math.min(Math.max(active, 0), Math.max(0, count - 1));
+  const atStart = idx <= 0;
+  const atEnd = idx >= count - 1;
+  const step = (dir) => setActive((a) => Math.min(Math.max(a + dir, 0), count - 1));
+  const w = typeof itemWidth === "number" ? itemWidth : parseInt(String(itemWidth), 10) || 320;
+  const widthCss = typeof itemWidth === "number" ? `${itemWidth}px` : itemWidth;
+  const SPACING = w * 0.6;
+  const SIDE_SCALE = 0.82;
+  const SIDE_OPACITY = 0.5;
+  const transition = reduced ? { duration: 0 } : { type: "spring", stiffness: 280, damping: 32, mass: 0.9 };
+  const onKeyDown = (e) => {
+    if (e.key === "ArrowLeft") {
+      e.preventDefault();
+      step(-1);
+    } else if (e.key === "ArrowRight") {
+      e.preventDefault();
+      step(1);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "section",
+    {
+      "aria-label": ariaLabel,
+      "aria-roledescription": "carousel",
+      className: ["relative", className].filter(Boolean).join(" "),
+      style,
+      onKeyDown,
+      children: [
+        showArrows && /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", "aria-label": "Previous", onClick: () => step(-1), disabled: atStart, className: `${arrowBtn} left-1`, children: /* @__PURE__ */ jsxRuntime.jsx(Arrow2, { dir: "left" }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative mx-auto overflow-hidden py-6", children: [
+          count > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "invisible mx-auto", style: { width: widthCss }, "aria-hidden": "true", children: slides[idx] }),
+          slides.map((slide, i) => {
+            const offset = i - idx;
+            const abs = Math.abs(offset);
+            if (abs > 2) return null;
+            const isCenter = offset === 0;
+            const isPeek = abs === 1;
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2",
+                style: { width: widthCss, zIndex: 30 - abs * 10, pointerEvents: isCenter || isPeek ? "auto" : "none" },
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  framerMotion.motion.div,
+                  {
+                    initial: false,
+                    animate: {
+                      x: offset * (abs <= 1 ? SPACING : SPACING * 1.7),
+                      scale: isCenter ? 1 : SIDE_SCALE,
+                      opacity: abs <= 1 ? isCenter ? 1 : SIDE_OPACITY : 0
+                    },
+                    transition,
+                    className: isCenter ? void 0 : "cursor-pointer",
+                    onClick: isCenter ? void 0 : () => setActive(i),
+                    "aria-hidden": isCenter ? void 0 : true,
+                    children: slide
+                  }
+                )
+              },
+              i
+            );
+          })
+        ] }),
+        showArrows && /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", "aria-label": "Next", onClick: () => step(1), disabled: atEnd, className: `${arrowBtn} right-1`, children: /* @__PURE__ */ jsxRuntime.jsx(Arrow2, { dir: "right" }) }),
+        showDots && count > 1 && /* @__PURE__ */ jsxRuntime.jsx(Dots, { count, active: idx, onSelect: setActive })
+      ]
+    }
+  );
+}
 var VALUE_SIZE = {
   sm: "text-xl",
   md: "text-3xl",