@birdycom/omniaui-react 0.11.0 → 0.11.2

package/src/components/Navmenu.tsx

@@ -1,62 +1,62 @@
-import { forwardRef, useId } from "react";
-import type { AnchorHTMLAttributes, HTMLAttributes, LiHTMLAttributes, ReactNode } from "react";
-import { attrs, cx } from "../utils";
-
-export interface NavmenuProps extends HTMLAttributes<HTMLUListElement> {
-  /** `aria-label` of the wrapping <nav>. */
-  label?: string;
-  /** Class for the wrapping <nav> (e.g. `oc-block-appbar-nav`). */
-  navClassName?: string;
-}
-
-/** `<nav><ul class="oc-navmenu">`: horizontal navigation links. */
-export const Navmenu = forwardRef<HTMLUListElement, NavmenuProps>(function Navmenu(
-  { label = "Navigation", navClassName, className, ...rest },
-  ref,
-) {
-  return (
-    <nav aria-label={label} className={navClassName}>
-      <ul ref={ref} className={cx("oc-navmenu", className)} {...rest} />
-    </nav>
-  );
-});
-
-/** `<li>` of a Navmenu. */
-export function NavmenuItem(props: LiHTMLAttributes<HTMLLIElement>) {
-  return <li {...props} />;
-}
-
-export interface NavmenuLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
-  /** Current page (`aria-current="page"`). */
-  current?: boolean;
-}
-
-/** `<a class="oc-navmenu-link">` */
-export const NavmenuLink = forwardRef<HTMLAnchorElement, NavmenuLinkProps>(function NavmenuLink(
-  { current, className, ...rest },
-  ref,
-) {
-  return <a ref={ref} className={cx("oc-navmenu-link", className)} aria-current={current ? "page" : undefined} {...rest} />;
-});
-
-export interface NavmenuDropdownProps extends HTMLAttributes<HTMLDivElement> {
-  /** Trigger text (button with a chevron). */
-  label: ReactNode;
-}
-
-/** `<li>` with a caret trigger button and a `.oc-dropdown-menu[popover]` of children. */
-export const NavmenuDropdown = forwardRef<HTMLDivElement, NavmenuDropdownProps>(function NavmenuDropdown(
-  { label, className, id, children, ...rest },
-  ref,
-) {
-  const auto = useId();
-  const menuId = id ?? `oc-navmenu-${auto.replace(/:/g, "")}`;
-  return (
-    <li>
-      <button className="oc-navmenu-link oc-navmenu-link--caret" type="button" {...attrs({ popovertarget: menuId })}>{label}</button>
-      <div ref={ref} className={cx("oc-dropdown-menu", className)} id={menuId} {...attrs({ popover: "" })} {...rest}>
-        {children}
-      </div>
-    </li>
-  );
-});
+import { forwardRef, useId } from "react";
+import type { AnchorHTMLAttributes, HTMLAttributes, LiHTMLAttributes, ReactNode } from "react";
+import { attrs, cx } from "../utils";
+
+export interface NavmenuProps extends HTMLAttributes<HTMLUListElement> {
+  /** `aria-label` of the wrapping <nav>. */
+  label?: string;
+  /** Class for the wrapping <nav> (e.g. `oc-block-appbar-nav`). */
+  navClassName?: string;
+}
+
+/** `<nav><ul class="oc-navmenu">`: horizontal navigation links. */
+export const Navmenu = forwardRef<HTMLUListElement, NavmenuProps>(function Navmenu(
+  { label = "Navigation", navClassName, className, ...rest },
+  ref,
+) {
+  return (
+    <nav aria-label={label} className={navClassName}>
+      <ul ref={ref} className={cx("oc-navmenu", className)} {...rest} />
+    </nav>
+  );
+});
+
+/** `<li>` of a Navmenu. */
+export function NavmenuItem(props: LiHTMLAttributes<HTMLLIElement>) {
+  return <li {...props} />;
+}
+
+export interface NavmenuLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+  /** Current page (`aria-current="page"`). */
+  current?: boolean;
+}
+
+/** `<a class="oc-navmenu-link">` */
+export const NavmenuLink = forwardRef<HTMLAnchorElement, NavmenuLinkProps>(function NavmenuLink(
+  { current, className, ...rest },
+  ref,
+) {
+  return <a ref={ref} className={cx("oc-navmenu-link", className)} aria-current={current ? "page" : undefined} {...rest} />;
+});
+
+export interface NavmenuDropdownProps extends HTMLAttributes<HTMLDivElement> {
+  /** Trigger text (button with a chevron). */
+  label: ReactNode;
+}
+
+/** `<li>` with a caret trigger button and a `.oc-dropdown-menu[popover]` of children. */
+export const NavmenuDropdown = forwardRef<HTMLDivElement, NavmenuDropdownProps>(function NavmenuDropdown(
+  { label, className, id, children, ...rest },
+  ref,
+) {
+  const auto = useId();
+  const menuId = id ?? `oc-navmenu-${auto.replace(/:/g, "")}`;
+  return (
+    <li>
+      <button className="oc-navmenu-link oc-navmenu-link--caret" type="button" {...attrs({ popovertarget: menuId })}>{label}</button>
+      <div ref={ref} className={cx("oc-dropdown-menu", className)} id={menuId} {...attrs({ popover: "" })} {...rest}>
+        {children}
+      </div>
+    </li>
+  );
+});

package/src/components/NextTeaser.tsx

@@ -1,29 +1,29 @@
-// File: packages/react/src/components/NextTeaser.tsx | Map: props -> NextTeaser (a -> label -> name (+ mark) -> tagline)
-import { forwardRef } from "react";
-import type { AnchorHTMLAttributes, ReactNode } from "react";
-import { cx } from "../utils";
-
-export interface NextTeaserProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
-  /** Small uppercase label (default "Next product"). */
-  label?: ReactNode;
-  name: ReactNode;
-  tagline?: ReactNode;
-  /** Element before the name, usually a <ProductMark size="sm" />. */
-  mark?: ReactNode;
-  /** "Previous" link: arrow left. */
-  prev?: boolean;
-}
-
-/** `<a class="oc-next-teaser">`: "Next product" teaser card. */
-export const NextTeaser = forwardRef<HTMLAnchorElement, NextTeaserProps>(function NextTeaser(
-  { label = "Next product", name, tagline, mark, prev = false, className, ...rest },
-  ref,
-) {
-  return (
-    <a ref={ref} className={cx("oc-next-teaser", prev && "oc-next-teaser--prev", className)} {...rest}>
-      {label != null && <span className="oc-next-teaser__label">{label}</span>}
-      <span className="oc-next-teaser__name">{mark}{name}</span>
-      {tagline != null && <span className="oc-next-teaser__tagline">{tagline}</span>}
-    </a>
-  );
-});
+// File: packages/react/src/components/NextTeaser.tsx | Map: props -> NextTeaser (a -> label -> name (+ mark) -> tagline)
+import { forwardRef } from "react";
+import type { AnchorHTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+
+export interface NextTeaserProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+  /** Small uppercase label (default "Next product"). */
+  label?: ReactNode;
+  name: ReactNode;
+  tagline?: ReactNode;
+  /** Element before the name, usually a <ProductMark size="sm" />. */
+  mark?: ReactNode;
+  /** "Previous" link: arrow left. */
+  prev?: boolean;
+}
+
+/** `<a class="oc-next-teaser">`: "Next product" teaser card. */
+export const NextTeaser = forwardRef<HTMLAnchorElement, NextTeaserProps>(function NextTeaser(
+  { label = "Next product", name, tagline, mark, prev = false, className, ...rest },
+  ref,
+) {
+  return (
+    <a ref={ref} className={cx("oc-next-teaser", prev && "oc-next-teaser--prev", className)} {...rest}>
+      {label != null && <span className="oc-next-teaser__label">{label}</span>}
+      <span className="oc-next-teaser__name">{mark}{name}</span>
+      {tagline != null && <span className="oc-next-teaser__tagline">{tagline}</span>}
+    </a>
+  );
+});

package/src/components/NumberInput.tsx

@@ -1,64 +1,64 @@
-// File: packages/react/src/components/NumberInput.tsx
-// Map: props -> clamp helper -> component (minus button, number field, plus button)
-// Same markup as packages/ui/snippets/number-input.html. The buttons are handled here (no page script needed).
-"use client";
-
-import { forwardRef } from "react";
-import type { InputHTMLAttributes } from "react";
-import { cx } from "../utils";
-import { useControllable } from "../hooks";
-
-export interface NumberInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "defaultValue" | "onChange" | "size" | "type" | "min" | "max" | "step"> {
-  /** Current number; null = empty field. */
-  value?: number | null;
-  defaultValue?: number | null;
-  onChange?: (value: number | null) => void;
-  min?: number;
-  max?: number;
-  step?: number;
-  size?: "sm" | "md";
-  /** Full width. */
-  block?: boolean;
-  error?: boolean;
-  decrementLabel?: string;
-  incrementLabel?: string;
-}
-
-/** Keep a number inside min/max and drop float noise (0.1 + 0.2). */
-function clamp(n: number, min?: number, max?: number) {
-  const rounded = Math.round(n * 1e6) / 1e6;
-  return Math.min(max ?? Infinity, Math.max(min ?? -Infinity, rounded));
-}
-
-/** `.oc-number-input`: number field with - / + buttons. Buttons disable themselves at min / max. */
-export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(function NumberInput(
-  { value, defaultValue, onChange, min, max, step = 1, size = "md", block, error, decrementLabel = "Decrease", incrementLabel = "Increase", className, disabled, ...rest },
-  ref,
-) {
-  const [current, setCurrent] = useControllable<number | null>(value, defaultValue ?? null, onChange);
-  const stepBy = (dir: 1 | -1) => setCurrent(clamp((current ?? min ?? 0) + dir * step, min, max));
-
-  return (
-    <div className={cx("oc-number-input", size === "sm" && "oc-number-input--sm", block && "oc-number-input--block", error && "oc-number-input--error", className)}>
-      <button className="oc-number-input-step" type="button" aria-label={decrementLabel} disabled={disabled || (min != null && current != null && current <= min)} onClick={() => stepBy(-1)}>
-        &minus;
-      </button>
-      <input
-        ref={ref}
-        className="oc-number-input-field"
-        type="number"
-        min={min}
-        max={max}
-        step={step}
-        disabled={disabled}
-        aria-invalid={error ? true : undefined}
-        value={current ?? ""}
-        onChange={(e) => setCurrent(e.target.value === "" ? null : Number(e.target.value))}
-        {...rest}
-      />
-      <button className="oc-number-input-step" type="button" aria-label={incrementLabel} disabled={disabled || (max != null && current != null && current >= max)} onClick={() => stepBy(1)}>
-        +
-      </button>
-    </div>
-  );
-});
+// File: packages/react/src/components/NumberInput.tsx
+// Map: props -> clamp helper -> component (minus button, number field, plus button)
+// Same markup as packages/ui/snippets/number-input.html. The buttons are handled here (no page script needed).
+"use client";
+
+import { forwardRef } from "react";
+import type { InputHTMLAttributes } from "react";
+import { cx } from "../utils";
+import { useControllable } from "../hooks";
+
+export interface NumberInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "defaultValue" | "onChange" | "size" | "type" | "min" | "max" | "step"> {
+  /** Current number; null = empty field. */
+  value?: number | null;
+  defaultValue?: number | null;
+  onChange?: (value: number | null) => void;
+  min?: number;
+  max?: number;
+  step?: number;
+  size?: "sm" | "md";
+  /** Full width. */
+  block?: boolean;
+  error?: boolean;
+  decrementLabel?: string;
+  incrementLabel?: string;
+}
+
+/** Keep a number inside min/max and drop float noise (0.1 + 0.2). */
+function clamp(n: number, min?: number, max?: number) {
+  const rounded = Math.round(n * 1e6) / 1e6;
+  return Math.min(max ?? Infinity, Math.max(min ?? -Infinity, rounded));
+}
+
+/** `.oc-number-input`: number field with - / + buttons. Buttons disable themselves at min / max. */
+export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(function NumberInput(
+  { value, defaultValue, onChange, min, max, step = 1, size = "md", block, error, decrementLabel = "Decrease", incrementLabel = "Increase", className, disabled, ...rest },
+  ref,
+) {
+  const [current, setCurrent] = useControllable<number | null>(value, defaultValue ?? null, onChange);
+  const stepBy = (dir: 1 | -1) => setCurrent(clamp((current ?? min ?? 0) + dir * step, min, max));
+
+  return (
+    <div className={cx("oc-number-input", size === "sm" && "oc-number-input--sm", block && "oc-number-input--block", error && "oc-number-input--error", className)}>
+      <button className="oc-number-input-step" type="button" aria-label={decrementLabel} disabled={disabled || (min != null && current != null && current <= min)} onClick={() => stepBy(-1)}>
+        &minus;
+      </button>
+      <input
+        ref={ref}
+        className="oc-number-input-field"
+        type="number"
+        min={min}
+        max={max}
+        step={step}
+        disabled={disabled}
+        aria-invalid={error ? true : undefined}
+        value={current ?? ""}
+        onChange={(e) => setCurrent(e.target.value === "" ? null : Number(e.target.value))}
+        {...rest}
+      />
+      <button className="oc-number-input-step" type="button" aria-label={incrementLabel} disabled={disabled || (max != null && current != null && current >= max)} onClick={() => stepBy(1)}>
+        +
+      </button>
+    </div>
+  );
+});

package/src/components/OtpInput.tsx

@@ -1,48 +1,48 @@
-"use client";
-
-import { forwardRef } from "react";
-import type { CSSProperties, InputHTMLAttributes } from "react";
-import { cx } from "../utils";
-import { useControllable } from "../hooks";
-
-export interface OtpInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "defaultValue" | "onChange" | "type" | "maxLength"> {
-  /** Code length (default 6). */
-  length?: number;
-  value?: string;
-  defaultValue?: string;
-  onChange?: (value: string) => void;
-  /** Called once when `length` characters have been entered. */
-  onComplete?: (value: string) => void;
-  /** Error state (`aria-invalid`). */
-  invalid?: boolean;
-  /** Allow letters as well as digits. */
-  alphanumeric?: boolean;
-}
-
-/** `<input class="oc-otp">`: separate cells drawn on a single real input. */
-export const OtpInput = forwardRef<HTMLInputElement, OtpInputProps>(function OtpInput(
-  { length = 6, value, defaultValue = "", onChange, onComplete, invalid, alphanumeric, className, style, ...rest },
-  ref,
-) {
-  const [code, setCode] = useControllable<string>(value, defaultValue, onChange);
-  return (
-    <input
-      ref={ref}
-      className={cx("oc-otp", className)}
-      type="text"
-      inputMode={alphanumeric ? "text" : "numeric"}
-      autoComplete="one-time-code"
-      maxLength={length}
-      pattern={alphanumeric ? undefined : "[0-9]*"}
-      style={{ "--oc-otp-length": length, ...style } as CSSProperties}
-      aria-invalid={invalid ? true : undefined}
-      value={code}
-      onChange={(e) => {
-        const next = alphanumeric ? e.target.value : e.target.value.replace(/\D/g, "");
-        setCode(next);
-        if (next.length === length) onComplete?.(next);
-      }}
-      {...rest}
-    />
-  );
-});
+"use client";
+
+import { forwardRef } from "react";
+import type { CSSProperties, InputHTMLAttributes } from "react";
+import { cx } from "../utils";
+import { useControllable } from "../hooks";
+
+export interface OtpInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "defaultValue" | "onChange" | "type" | "maxLength"> {
+  /** Code length (default 6). */
+  length?: number;
+  value?: string;
+  defaultValue?: string;
+  onChange?: (value: string) => void;
+  /** Called once when `length` characters have been entered. */
+  onComplete?: (value: string) => void;
+  /** Error state (`aria-invalid`). */
+  invalid?: boolean;
+  /** Allow letters as well as digits. */
+  alphanumeric?: boolean;
+}
+
+/** `<input class="oc-otp">`: separate cells drawn on a single real input. */
+export const OtpInput = forwardRef<HTMLInputElement, OtpInputProps>(function OtpInput(
+  { length = 6, value, defaultValue = "", onChange, onComplete, invalid, alphanumeric, className, style, ...rest },
+  ref,
+) {
+  const [code, setCode] = useControllable<string>(value, defaultValue, onChange);
+  return (
+    <input
+      ref={ref}
+      className={cx("oc-otp", className)}
+      type="text"
+      inputMode={alphanumeric ? "text" : "numeric"}
+      autoComplete="one-time-code"
+      maxLength={length}
+      pattern={alphanumeric ? undefined : "[0-9]*"}
+      style={{ "--oc-otp-length": length, ...style } as CSSProperties}
+      aria-invalid={invalid ? true : undefined}
+      value={code}
+      onChange={(e) => {
+        const next = alphanumeric ? e.target.value : e.target.value.replace(/\D/g, "");
+        setCode(next);
+        if (next.length === length) onComplete?.(next);
+      }}
+      {...rest}
+    />
+  );
+});

package/src/components/PageHeader.tsx

@@ -1,43 +1,43 @@
-// File: packages/react/src/components/PageHeader.tsx
-// Map: PageHeader = header -> back row -> main (text: title, subtitle, meta | actions)
-// The header is a size container: the actions move next to the title from a 36rem header width.
-import { forwardRef } from "react";
-import type { HTMLAttributes, ReactNode } from "react";
-import { cx } from "../utils";
-
-export interface PageHeaderProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
-  title: ReactNode;
-  subtitle?: ReactNode;
-  /** Meta row items (owner, updated, ...). */
-  meta?: ReactNode;
-  /** Back link, e.g. `<BackLink href="/projects">Projects</BackLink>`. */
-  back?: ReactNode;
-  actions?: ReactNode;
-  /** Heading level of the title (default 1). */
-  level?: 1 | 2 | 3;
-  bordered?: boolean;
-  sticky?: boolean;
-  size?: "sm";
-}
-
-/** `.oc-page-header`: title row of an app page. */
-export const PageHeader = forwardRef<HTMLElement, PageHeaderProps>(function PageHeader(
-  { title, subtitle, meta, back, actions, level = 1, bordered, sticky, size, className, ...rest },
-  ref,
-) {
-  const Heading = `h${level}` as "h1";
-  const cls = cx("oc-page-header", bordered && "oc-page-header--bordered", sticky && "oc-page-header--sticky", size && `oc-page-header--${size}`, className);
-  return (
-    <header ref={ref} className={cls} {...rest}>
-      {back != null && <div className="oc-page-header-back">{back}</div>}
-      <div className="oc-page-header-main">
-        <div className="oc-page-header-text">
-          <Heading className="oc-page-header-title">{title}</Heading>
-          {subtitle != null && <p className="oc-page-header-subtitle">{subtitle}</p>}
-          {meta != null && <div className="oc-page-header-meta">{meta}</div>}
-        </div>
-        {actions != null && <div className="oc-page-header-actions">{actions}</div>}
-      </div>
-    </header>
-  );
-});
+// File: packages/react/src/components/PageHeader.tsx
+// Map: PageHeader = header -> back row -> main (text: title, subtitle, meta | actions)
+// The header is a size container: the actions move next to the title from a 36rem header width.
+import { forwardRef } from "react";
+import type { HTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+
+export interface PageHeaderProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
+  title: ReactNode;
+  subtitle?: ReactNode;
+  /** Meta row items (owner, updated, ...). */
+  meta?: ReactNode;
+  /** Back link, e.g. `<BackLink href="/projects">Projects</BackLink>`. */
+  back?: ReactNode;
+  actions?: ReactNode;
+  /** Heading level of the title (default 1). */
+  level?: 1 | 2 | 3;
+  bordered?: boolean;
+  sticky?: boolean;
+  size?: "sm";
+}
+
+/** `.oc-page-header`: title row of an app page. */
+export const PageHeader = forwardRef<HTMLElement, PageHeaderProps>(function PageHeader(
+  { title, subtitle, meta, back, actions, level = 1, bordered, sticky, size, className, ...rest },
+  ref,
+) {
+  const Heading = `h${level}` as "h1";
+  const cls = cx("oc-page-header", bordered && "oc-page-header--bordered", sticky && "oc-page-header--sticky", size && `oc-page-header--${size}`, className);
+  return (
+    <header ref={ref} className={cls} {...rest}>
+      {back != null && <div className="oc-page-header-back">{back}</div>}
+      <div className="oc-page-header-main">
+        <div className="oc-page-header-text">
+          <Heading className="oc-page-header-title">{title}</Heading>
+          {subtitle != null && <p className="oc-page-header-subtitle">{subtitle}</p>}
+          {meta != null && <div className="oc-page-header-meta">{meta}</div>}
+        </div>
+        {actions != null && <div className="oc-page-header-actions">{actions}</div>}
+      </div>
+    </header>
+  );
+});

package/src/components/Pagination.tsx

@@ -1,42 +1,42 @@
-import { forwardRef } from "react";
-import type { HTMLAttributes } from "react";
-import { cx } from "../utils";
-
-export interface PaginationProps extends Omit<HTMLAttributes<HTMLElement>, "onChange"> {
-  /** Current page (1-based). */
-  page: number;
-  pageCount: number;
-  /** Called with the new page; when set, link navigation is prevented. */
-  onPageChange?: (page: number) => void;
-  /** Builds the href of a page (default `?page=n`). */
-  hrefFor?: (page: number) => string;
-}
-
-/** `<nav class="oc-pagination">` with numbered links and `aria-current="page"`. */
-export const Pagination = forwardRef<HTMLElement, PaginationProps>(function Pagination(
-  { page, pageCount, onPageChange, hrefFor = (n) => `?page=${n}`, className, "aria-label": ariaLabel = "Pagination", ...rest },
-  ref,
-) {
-  return (
-    <nav ref={ref} className={cx("oc-pagination", className)} aria-label={ariaLabel} {...rest}>
-      {Array.from({ length: pageCount }, (_, i) => i + 1).map((n) => (
-        <a
-          key={n}
-          className="oc-pagination-item"
-          href={hrefFor(n)}
-          aria-current={n === page ? "page" : undefined}
-          onClick={
-            onPageChange
-              ? (e) => {
-                  e.preventDefault();
-                  onPageChange(n);
-                }
-              : undefined
-          }
-        >
-          {n}
-        </a>
-      ))}
-    </nav>
-  );
-});
+import { forwardRef } from "react";
+import type { HTMLAttributes } from "react";
+import { cx } from "../utils";
+
+export interface PaginationProps extends Omit<HTMLAttributes<HTMLElement>, "onChange"> {
+  /** Current page (1-based). */
+  page: number;
+  pageCount: number;
+  /** Called with the new page; when set, link navigation is prevented. */
+  onPageChange?: (page: number) => void;
+  /** Builds the href of a page (default `?page=n`). */
+  hrefFor?: (page: number) => string;
+}
+
+/** `<nav class="oc-pagination">` with numbered links and `aria-current="page"`. */
+export const Pagination = forwardRef<HTMLElement, PaginationProps>(function Pagination(
+  { page, pageCount, onPageChange, hrefFor = (n) => `?page=${n}`, className, "aria-label": ariaLabel = "Pagination", ...rest },
+  ref,
+) {
+  return (
+    <nav ref={ref} className={cx("oc-pagination", className)} aria-label={ariaLabel} {...rest}>
+      {Array.from({ length: pageCount }, (_, i) => i + 1).map((n) => (
+        <a
+          key={n}
+          className="oc-pagination-item"
+          href={hrefFor(n)}
+          aria-current={n === page ? "page" : undefined}
+          onClick={
+            onPageChange
+              ? (e) => {
+                  e.preventDefault();
+                  onPageChange(n);
+                }
+              : undefined
+          }
+        >
+          {n}
+        </a>
+      ))}
+    </nav>
+  );
+});