@birdycom/omniaui-react 0.11.0 → 0.11.2

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2026 Serge Cools (Birdycom)
-
-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) 2026 Serge Cools (Birdycom)
+
+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,21 +1,21 @@
-# @birdycom/omniaui-react
-
-React 18/19 function components for [OmniaCSS](https://github.com/Birdycom/omniacss). Every component and block renders the exact markup and classes of the HTML snippets in `@birdycom/omniaui` and `@birdycom/omniaui-blocks`; the CSS packages own all styling.
-
-```bash
-npm install @birdycom/omniaui-react @birdycom/omniaui @birdycom/omniaui-blocks react react-dom
-```
-
-```tsx
-import { Button, Modal, ModalClose, ToastProvider, useToast } from "@birdycom/omniaui-react";
-
-<Button variant="outline" size="sm">Save</Button>
-```
-
-- Props map to modifiers: `variant`, `size` (`sm`/`md`/`lg`), boolean flags; slots are `children` plus named props (`title`, `description`, `actions`, `footer`).
-- `ref` is forwarded, rest props are spread, `className` is merged.
-- Dialogs (`Modal`, `AlertDialog`, `Sheet`, `BlockWizardDialog`) sync an `open` prop with the native `<dialog>`; dropdowns and popovers use the native `popover` attribute.
-- Wrapper logic lives in the components: `Command` filtering, `PasswordInput` reveal, `CopyField`, toast queue (`ToastProvider` + `useToast`).
-- `src/` is published too: copy a file into your project to own the code. `manifest.json` lists `{ name, kind, file, snippet }` for every item.
-
-MIT
+# @birdycom/omniaui-react
+
+React 18/19 function components for [OmniaCSS](https://github.com/Birdycom/omniacss). Every component and block renders the exact markup and classes of the HTML snippets in `@birdycom/omniaui` and `@birdycom/omniaui-blocks`; the CSS packages own all styling.
+
+```bash
+npm install @birdycom/omniaui-react @birdycom/omniaui @birdycom/omniaui-blocks react react-dom
+```
+
+```tsx
+import { Button, Modal, ModalClose, ToastProvider, useToast } from "@birdycom/omniaui-react";
+
+<Button variant="outline" size="sm">Save</Button>
+```
+
+- Props map to modifiers: `variant`, `size` (`sm`/`md`/`lg`), boolean flags; slots are `children` plus named props (`title`, `description`, `actions`, `footer`).
+- `ref` is forwarded, rest props are spread, `className` is merged.
+- Dialogs (`Modal`, `AlertDialog`, `Sheet`, `BlockWizardDialog`) sync an `open` prop with the native `<dialog>`; dropdowns and popovers use the native `popover` attribute.
+- Wrapper logic lives in the components: `Command` filtering, `PasswordInput` reveal, `CopyField`, toast queue (`ToastProvider` + `useToast`).
+- `src/` is published too: copy a file into your project to own the code. `manifest.json` lists `{ name, kind, file, snippet }` for every item.
+
+MIT

package/package.json

@@ -1,71 +1,71 @@
-{
-  "name": "@birdycom/omniaui-react",
-  "version": "0.11.0",
-  "description": "OmniaUI for React: typed function components and page blocks that render the exact @birdycom/omniaui and @birdycom/omniaui-blocks markup.",
-  "type": "module",
-  "license": "MIT",
-  "author": "Serge Cools (Birdycom)",
-  "homepage": "https://omniaui.eu",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/Birdycom/OmniaUI.git",
-    "directory": "packages/react"
-  },
-  "bugs": {
-    "url": "https://github.com/Birdycom/OmniaUI/issues"
-  },
-  "keywords": [
-    "react",
-    "components",
-    "css",
-    "omniaui",
-    "tsx"
-  ],
-  "main": "./dist/index.js",
-  "module": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js"
-    },
-    "./src/*": "./src/*",
-    "./manifest.json": "./manifest.json",
-    "./package.json": "./package.json"
-  },
-  "files": [
-    "dist",
-    "src",
-    "manifest.json",
-    "README.md",
-    "LICENSE"
-  ],
-  "sideEffects": false,
-  "scripts": {
-    "build": "node scripts/build-manifest.mjs && tsup",
-    "typecheck": "tsc --noEmit",
-    "test": "vitest run"
-  },
-  "peerDependencies": {
-    "react": ">=18",
-    "react-dom": ">=18"
-  },
-  "devDependencies": {
-    "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.1.0",
-    "@types/react": "^19.0.0",
-    "@types/react-dom": "^19.0.0",
-    "jsdom": "^26.0.0",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "tsup": "^8.3.5",
-    "typescript": "^5.7.0",
-    "vitest": "^3.0.0"
-  },
-  "engines": {
-    "node": ">=22"
-  },
-  "publishConfig": {
-    "access": "public"
-  }
-}
+{
+  "name": "@birdycom/omniaui-react",
+  "version": "0.11.2",
+  "description": "OmniaUI for React: typed function components and page blocks that render the exact @birdycom/omniaui and @birdycom/omniaui-blocks markup.",
+  "type": "module",
+  "license": "MIT",
+  "author": "Serge Cools (Birdycom)",
+  "homepage": "https://omniaui.eu",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Birdycom/OmniaUI.git",
+    "directory": "packages/react"
+  },
+  "bugs": {
+    "url": "https://github.com/Birdycom/OmniaUI/issues"
+  },
+  "keywords": [
+    "react",
+    "components",
+    "css",
+    "omniaui",
+    "tsx"
+  ],
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./src/*": "./src/*",
+    "./manifest.json": "./manifest.json",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "src",
+    "manifest.json",
+    "README.md",
+    "LICENSE"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "build": "node scripts/build-manifest.mjs && tsup",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.1.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "jsdom": "^26.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tsup": "^8.3.5",
+    "typescript": "^5.7.0",
+    "vitest": "^5.0.5"
+  },
+  "engines": {
+    "node": ">=22"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/blocks/BlockAboutTimeline.tsx

@@ -1,46 +1,46 @@
-// File: packages/react/src/blocks/BlockAboutTimeline.tsx | Map: props -> BlockAboutTimeline (media + badge -> copy -> timeline)
-import { forwardRef, useId } from "react";
-import type { HTMLAttributes, ReactNode } from "react";
-import { cx } from "../utils";
-import { Timeline } from "../components/Timeline";
-import type { TimelineEntry } from "../components/Timeline";
-
-export interface BlockAboutTimelineProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
-  eyebrow?: ReactNode;
-  /** Heading; wrap a part in `<span className="oc-text-gradient">`. */
-  title: ReactNode;
-  /** Paragraphs (or any content) below the title. */
-  children?: ReactNode;
-  timeline?: TimelineEntry[];
-  /** Picture URL; without it the media is an accent gradient. */
-  image?: string;
-  imageAlt?: string;
-  /** Badge on the picture (e.g. <><strong>12+</strong>years</>). */
-  badge?: ReactNode;
-  /** Picture on the right. */
-  reverse?: boolean;
-}
-
-/** `.oc-block-about`: picture next to the company story with a year timeline. */
-export const BlockAboutTimeline = forwardRef<HTMLElement, BlockAboutTimelineProps>(function BlockAboutTimeline(
-  { eyebrow, title, children, timeline = [], image, imageAlt = "", badge, reverse = false, className, ...rest },
-  ref,
-) {
-  const titleId = `oc-about-title-${useId().replace(/[^\w-]/g, "")}`;
-  return (
-    <section ref={ref} className={cx("oc-block-about", reverse && "oc-block-about--reverse", className)} aria-labelledby={titleId} {...rest}>
-      <div className="oc-block-about-inner">
-        <figure className="oc-block-about-media" aria-hidden={image ? undefined : true}>
-          {image && <img src={image} alt={imageAlt} loading="lazy" />}
-          {badge != null && <span className="oc-block-about-badge">{badge}</span>}
-        </figure>
-        <div className="oc-block-about-copy">
-          {eyebrow != null && <p className="oc-eyebrow">{eyebrow}</p>}
-          <h2 className="oc-block-about-title" id={titleId}>{title}</h2>
-          {children}
-          {timeline.length > 0 && <Timeline items={timeline} />}
-        </div>
-      </div>
-    </section>
-  );
-});
+// File: packages/react/src/blocks/BlockAboutTimeline.tsx | Map: props -> BlockAboutTimeline (media + badge -> copy -> timeline)
+import { forwardRef, useId } from "react";
+import type { HTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+import { Timeline } from "../components/Timeline";
+import type { TimelineEntry } from "../components/Timeline";
+
+export interface BlockAboutTimelineProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
+  eyebrow?: ReactNode;
+  /** Heading; wrap a part in `<span className="oc-text-gradient">`. */
+  title: ReactNode;
+  /** Paragraphs (or any content) below the title. */
+  children?: ReactNode;
+  timeline?: TimelineEntry[];
+  /** Picture URL; without it the media is an accent gradient. */
+  image?: string;
+  imageAlt?: string;
+  /** Badge on the picture (e.g. <><strong>12+</strong>years</>). */
+  badge?: ReactNode;
+  /** Picture on the right. */
+  reverse?: boolean;
+}
+
+/** `.oc-block-about`: picture next to the company story with a year timeline. */
+export const BlockAboutTimeline = forwardRef<HTMLElement, BlockAboutTimelineProps>(function BlockAboutTimeline(
+  { eyebrow, title, children, timeline = [], image, imageAlt = "", badge, reverse = false, className, ...rest },
+  ref,
+) {
+  const titleId = `oc-about-title-${useId().replace(/[^\w-]/g, "")}`;
+  return (
+    <section ref={ref} className={cx("oc-block-about", reverse && "oc-block-about--reverse", className)} aria-labelledby={titleId} {...rest}>
+      <div className="oc-block-about-inner">
+        <figure className="oc-block-about-media" aria-hidden={image ? undefined : true}>
+          {image && <img src={image} alt={imageAlt} loading="lazy" />}
+          {badge != null && <span className="oc-block-about-badge">{badge}</span>}
+        </figure>
+        <div className="oc-block-about-copy">
+          {eyebrow != null && <p className="oc-eyebrow">{eyebrow}</p>}
+          <h2 className="oc-block-about-title" id={titleId}>{title}</h2>
+          {children}
+          {timeline.length > 0 && <Timeline items={timeline} />}
+        </div>
+      </div>
+    </section>
+  );
+});

package/src/blocks/BlockAppHeader.tsx

@@ -1,52 +1,52 @@
-import { forwardRef } from "react";
-import type { HTMLAttributes, ReactNode } from "react";
-import { cx } from "../utils";
-import { Icon } from "../components/Icon";
-import { Navmenu, NavmenuItem, NavmenuLink } from "../components/Navmenu";
-
-export interface AppHeaderNavItem {
-  label: ReactNode;
-  href: string;
-  current?: boolean;
-}
-
-export interface BlockAppHeaderProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
-  /** Id of the sidebar toggle checkbox (see BlockAppShell). Omit to hide the toggle button. */
-  toggleFor?: string;
-  toggleLabel?: string;
-  /** Module navigation links. */
-  nav?: AppHeaderNavItem[];
-  navLabel?: string;
-  /** Right-aligned actions: theme switch, switchers, user menu. */
-  actions?: ReactNode;
-  /** Optional page title (`oc-block-appbar-title`). */
-  title?: ReactNode;
-}
-
-/** `.oc-block-appbar`: top bar with sidebar toggle, module navigation and actions. */
-export const BlockAppHeader = forwardRef<HTMLElement, BlockAppHeaderProps>(function BlockAppHeader(
-  { toggleFor, toggleLabel = "Toggle sidebar", nav, navLabel = "Module navigation", actions, title, className, ...rest },
-  ref,
-) {
-  return (
-    <header ref={ref} className={cx("oc-block-appbar", className)} {...rest}>
-      {toggleFor && (
-        <label className="oc-btn oc-btn--ghost oc-btn--icon" htmlFor={toggleFor} title={toggleLabel}>
-          <Icon d="M4 6h16M4 12h16M4 18h16" />
-          <span className="oc-visually-hidden">{toggleLabel}</span>
-        </label>
-      )}
-      {title != null && <span className="oc-block-appbar-title">{title}</span>}
-      {nav && (
-        <Navmenu label={navLabel} navClassName="oc-block-appbar-nav">
-          {nav.map((item, i) => (
-            <NavmenuItem key={i}>
-              <NavmenuLink href={item.href} current={item.current}>{item.label}</NavmenuLink>
-            </NavmenuItem>
-          ))}
-        </Navmenu>
-      )}
-      {actions != null && <div className="oc-block-appbar-actions">{actions}</div>}
-    </header>
-  );
-});
+import { forwardRef } from "react";
+import type { HTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+import { Icon } from "../components/Icon";
+import { Navmenu, NavmenuItem, NavmenuLink } from "../components/Navmenu";
+
+export interface AppHeaderNavItem {
+  label: ReactNode;
+  href: string;
+  current?: boolean;
+}
+
+export interface BlockAppHeaderProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
+  /** Id of the sidebar toggle checkbox (see BlockAppShell). Omit to hide the toggle button. */
+  toggleFor?: string;
+  toggleLabel?: string;
+  /** Module navigation links. */
+  nav?: AppHeaderNavItem[];
+  navLabel?: string;
+  /** Right-aligned actions: theme switch, switchers, user menu. */
+  actions?: ReactNode;
+  /** Optional page title (`oc-block-appbar-title`). */
+  title?: ReactNode;
+}
+
+/** `.oc-block-appbar`: top bar with sidebar toggle, module navigation and actions. */
+export const BlockAppHeader = forwardRef<HTMLElement, BlockAppHeaderProps>(function BlockAppHeader(
+  { toggleFor, toggleLabel = "Toggle sidebar", nav, navLabel = "Module navigation", actions, title, className, ...rest },
+  ref,
+) {
+  return (
+    <header ref={ref} className={cx("oc-block-appbar", className)} {...rest}>
+      {toggleFor && (
+        <label className="oc-btn oc-btn--ghost oc-btn--icon" htmlFor={toggleFor} title={toggleLabel}>
+          <Icon d="M4 6h16M4 12h16M4 18h16" />
+          <span className="oc-visually-hidden">{toggleLabel}</span>
+        </label>
+      )}
+      {title != null && <span className="oc-block-appbar-title">{title}</span>}
+      {nav && (
+        <Navmenu label={navLabel} navClassName="oc-block-appbar-nav">
+          {nav.map((item, i) => (
+            <NavmenuItem key={i}>
+              <NavmenuLink href={item.href} current={item.current}>{item.label}</NavmenuLink>
+            </NavmenuItem>
+          ))}
+        </Navmenu>
+      )}
+      {actions != null && <div className="oc-block-appbar-actions">{actions}</div>}
+    </header>
+  );
+});

package/src/blocks/BlockAppShell.tsx

@@ -1,56 +1,56 @@
-import { forwardRef, useId } from "react";
-import type { CSSProperties, HTMLAttributes, ReactNode } from "react";
-import { cx } from "../utils";
-import type { BreadcrumbItemData } from "../components/Breadcrumb";
-
-export interface BlockAppShellProps extends HTMLAttributes<HTMLDivElement> {
-  /** A `<Sidebar>`; rendered as the first grid child. */
-  sidebar: ReactNode;
-  /** A `<BlockAppHeader toggleFor={toggleId}>`. */
-  header?: ReactNode;
-  /** Breadcrumb strip under the header bar. */
-  breadcrumbs?: BreadcrumbItemData[];
-  /** Id of the collapse checkbox; pass the same value to `BlockAppHeader`'s `toggleFor`. */
-  toggleId?: string;
-  /** Shell height (`--oc-block-shell-height`, default 100dvh). */
-  height?: string;
-}
-
-/** `.oc-block-shell`: sidebar, header bar, breadcrumb strip and the scrolling content. */
-export const BlockAppShell = forwardRef<HTMLDivElement, BlockAppShellProps>(function BlockAppShell(
-  { sidebar, header, breadcrumbs, toggleId, height, className, style, children, ...rest },
-  ref,
-) {
-  const auto = useId();
-  const id = toggleId ?? `oc-shell-toggle-${auto.replace(/:/g, "")}`;
-  return (
-    <div
-      ref={ref}
-      className={cx("oc-block-shell", className)}
-      style={height ? ({ "--oc-block-shell-height": height, ...style } as CSSProperties) : style}
-      {...rest}
-    >
-      <input className="oc-block-shell-toggle" type="checkbox" id={id} aria-label="Collapse sidebar" />
-      {sidebar}
-      <div className="oc-block-shell-main">
-        {header}
-        {breadcrumbs && (
-          <div className="oc-block-shell-breadcrumbs">
-            <nav aria-label="Breadcrumb">
-              <ol className="oc-breadcrumb">
-                {breadcrumbs.map((item, i) =>
-                  item.href && i < breadcrumbs.length - 1 ? (
-                    <li className="oc-breadcrumb-item" key={i}><a href={item.href}>{item.label}</a></li>
-                  ) : (
-                    <li className="oc-breadcrumb-item" aria-current="page" key={i}>{item.label}</li>
-                  ),
-                )}
-              </ol>
-            </nav>
-          </div>
-        )}
-        <main className="oc-block-shell-content">{children}</main>
-      </div>
-    </div>
-  );
-});
+import { forwardRef, useId } from "react";
+import type { CSSProperties, HTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+import type { BreadcrumbItemData } from "../components/Breadcrumb";
+
+export interface BlockAppShellProps extends HTMLAttributes<HTMLDivElement> {
+  /** A `<Sidebar>`; rendered as the first grid child. */
+  sidebar: ReactNode;
+  /** A `<BlockAppHeader toggleFor={toggleId}>`. */
+  header?: ReactNode;
+  /** Breadcrumb strip under the header bar. */
+  breadcrumbs?: BreadcrumbItemData[];
+  /** Id of the collapse checkbox; pass the same value to `BlockAppHeader`'s `toggleFor`. */
+  toggleId?: string;
+  /** Shell height (`--oc-block-shell-height`, default 100dvh). */
+  height?: string;
+}
+
+/** `.oc-block-shell`: sidebar, header bar, breadcrumb strip and the scrolling content. */
+export const BlockAppShell = forwardRef<HTMLDivElement, BlockAppShellProps>(function BlockAppShell(
+  { sidebar, header, breadcrumbs, toggleId, height, className, style, children, ...rest },
+  ref,
+) {
+  const auto = useId();
+  const id = toggleId ?? `oc-shell-toggle-${auto.replace(/:/g, "")}`;
+  return (
+    <div
+      ref={ref}
+      className={cx("oc-block-shell", className)}
+      style={height ? ({ "--oc-block-shell-height": height, ...style } as CSSProperties) : style}
+      {...rest}
+    >
+      <input className="oc-block-shell-toggle" type="checkbox" id={id} aria-label="Collapse sidebar" />
+      {sidebar}
+      <div className="oc-block-shell-main">
+        {header}
+        {breadcrumbs && (
+          <div className="oc-block-shell-breadcrumbs">
+            <nav aria-label="Breadcrumb">
+              <ol className="oc-breadcrumb">
+                {breadcrumbs.map((item, i) =>
+                  item.href && i < breadcrumbs.length - 1 ? (
+                    <li className="oc-breadcrumb-item" key={i}><a href={item.href}>{item.label}</a></li>
+                  ) : (
+                    <li className="oc-breadcrumb-item" aria-current="page" key={i}>{item.label}</li>
+                  ),
+                )}
+              </ol>
+            </nav>
+          </div>
+        )}
+        <main className="oc-block-shell-content">{children}</main>
+      </div>
+    </div>
+  );
+});