@birdycom/omniaui-react 0.11.0 → 0.11.1

package/src/blocks/BlockSiteHeader.tsx

@@ -1,42 +1,42 @@
-import { forwardRef, useId } from "react";
-import type { HTMLAttributes, ReactNode } from "react";
-import { attrs, cx } from "../utils";
-
-export interface SiteHeaderLink {
-  label: ReactNode;
-  href: string;
-  current?: boolean;
-}
-
-export interface BlockSiteHeaderProps extends HTMLAttributes<HTMLElement> {
-  /** Brand link content, e.g. icon tile + name. */
-  brand: ReactNode;
-  brandHref?: string;
-  links: SiteHeaderLink[];
-  /** Trailing call to action inside the nav (e.g. a `ButtonLink` with `variant="gradient"`). */
-  cta?: ReactNode;
-  /** Accessible name of the mobile menu button. */
-  menuLabel?: string;
-}
-
-/** `.oc-site-header`: sticky header, mobile menu on a native popover (no JavaScript). */
-export const BlockSiteHeader = forwardRef<HTMLElement, BlockSiteHeaderProps>(function BlockSiteHeader(
-  { brand, brandHref = "/", links, cta, menuLabel = "Menu", className, ...rest },
-  ref,
-) {
-  const navId = `oc-site-nav-${useId().replace(/:/g, "")}`;
-  return (
-    <header ref={ref} className={cx("oc-site-header", className)} {...rest}>
-      <div className="oc-container oc-site-header__inner">
-        <a className="oc-site-header__brand" href={brandHref}>{brand}</a>
-        <button className="oc-site-header__toggle" type="button" aria-label={menuLabel} {...attrs({ popovertarget: navId })}>&#9776;</button>
-        <nav className="oc-site-header__nav" id={navId} aria-label="Main" {...attrs({ popover: "" })}>
-          {links.map((l, i) => (
-            <a key={i} href={l.href} aria-current={l.current ? "page" : undefined}>{l.label}</a>
-          ))}
-          {cta}
-        </nav>
-      </div>
-    </header>
-  );
-});
+import { forwardRef, useId } from "react";
+import type { HTMLAttributes, ReactNode } from "react";
+import { attrs, cx } from "../utils";
+
+export interface SiteHeaderLink {
+  label: ReactNode;
+  href: string;
+  current?: boolean;
+}
+
+export interface BlockSiteHeaderProps extends HTMLAttributes<HTMLElement> {
+  /** Brand link content, e.g. icon tile + name. */
+  brand: ReactNode;
+  brandHref?: string;
+  links: SiteHeaderLink[];
+  /** Trailing call to action inside the nav (e.g. a `ButtonLink` with `variant="gradient"`). */
+  cta?: ReactNode;
+  /** Accessible name of the mobile menu button. */
+  menuLabel?: string;
+}
+
+/** `.oc-site-header`: sticky header, mobile menu on a native popover (no JavaScript). */
+export const BlockSiteHeader = forwardRef<HTMLElement, BlockSiteHeaderProps>(function BlockSiteHeader(
+  { brand, brandHref = "/", links, cta, menuLabel = "Menu", className, ...rest },
+  ref,
+) {
+  const navId = `oc-site-nav-${useId().replace(/:/g, "")}`;
+  return (
+    <header ref={ref} className={cx("oc-site-header", className)} {...rest}>
+      <div className="oc-container oc-site-header__inner">
+        <a className="oc-site-header__brand" href={brandHref}>{brand}</a>
+        <button className="oc-site-header__toggle" type="button" aria-label={menuLabel} {...attrs({ popovertarget: navId })}>&#9776;</button>
+        <nav className="oc-site-header__nav" id={navId} aria-label="Main" {...attrs({ popover: "" })}>
+          {links.map((l, i) => (
+            <a key={i} href={l.href} aria-current={l.current ? "page" : undefined}>{l.label}</a>
+          ))}
+          {cta}
+        </nav>
+      </div>
+    </header>
+  );
+});

package/src/blocks/BlockSpotlight.tsx

@@ -1,58 +1,58 @@
-import { forwardRef } from "react";
-import type { HTMLAttributes, ReactNode } from "react";
-import { cx } from "../utils";
-
-export interface SpotlightModule {
-  icon?: ReactNode;
-  label: ReactNode;
-}
-
-export interface BlockSpotlightProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
-  /** Accent name (`green`, `violet`...), applied as `oc-accent--{accent}`. */
-  accent?: string;
-  /** Pill text (with a status dot). */
-  badge?: ReactNode;
-  /** Glyph or SVG in the big icon tile. */
-  icon?: ReactNode;
-  title: ReactNode;
-  tagline?: ReactNode;
-  lead?: ReactNode;
-  /** Call to action (e.g. a `ButtonLink` with `variant="gradient" size="lg"`). */
-  action?: ReactNode;
-  modules?: SpotlightModule[];
-}
-
-/** `.oc-spotlight`: highlighted flagship product with a module list. */
-export const BlockSpotlight = forwardRef<HTMLElement, BlockSpotlightProps>(function BlockSpotlight(
-  { accent, badge, icon, title, tagline, lead, action, modules, className, ...rest },
-  ref,
-) {
-  return (
-    <section ref={ref} className={cx("oc-section-pad", className)} {...rest}>
-      <div className="oc-container">
-        <div className={cx("oc-spotlight", accent && `oc-accent--${accent}`)}>
-          <div>
-            {badge != null && <span className="oc-pill oc-pill--accent"><span className="oc-status-dot" />{badge}</span>}
-            <h2 className="oc-spotlight__title">
-              {icon != null && <span className="oc-icon-tile oc-icon-tile--lg" aria-hidden="true">{icon}</span>}
-              {title}
-            </h2>
-            {tagline != null && <p className="oc-spotlight__tagline">{tagline}</p>}
-            {lead != null && <p className="oc-lead">{lead}</p>}
-            {action}
-          </div>
-          {modules && (
-            <ul className="oc-spotlight__modules">
-              {modules.map((m, i) => (
-                <li key={i}>
-                  {m.icon != null && <span className="oc-icon-tile oc-icon-tile--sm" aria-hidden="true">{m.icon}</span>}
-                  {m.label}
-                </li>
-              ))}
-            </ul>
-          )}
-        </div>
-      </div>
-    </section>
-  );
-});
+import { forwardRef } from "react";
+import type { HTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+
+export interface SpotlightModule {
+  icon?: ReactNode;
+  label: ReactNode;
+}
+
+export interface BlockSpotlightProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
+  /** Accent name (`green`, `violet`...), applied as `oc-accent--{accent}`. */
+  accent?: string;
+  /** Pill text (with a status dot). */
+  badge?: ReactNode;
+  /** Glyph or SVG in the big icon tile. */
+  icon?: ReactNode;
+  title: ReactNode;
+  tagline?: ReactNode;
+  lead?: ReactNode;
+  /** Call to action (e.g. a `ButtonLink` with `variant="gradient" size="lg"`). */
+  action?: ReactNode;
+  modules?: SpotlightModule[];
+}
+
+/** `.oc-spotlight`: highlighted flagship product with a module list. */
+export const BlockSpotlight = forwardRef<HTMLElement, BlockSpotlightProps>(function BlockSpotlight(
+  { accent, badge, icon, title, tagline, lead, action, modules, className, ...rest },
+  ref,
+) {
+  return (
+    <section ref={ref} className={cx("oc-section-pad", className)} {...rest}>
+      <div className="oc-container">
+        <div className={cx("oc-spotlight", accent && `oc-accent--${accent}`)}>
+          <div>
+            {badge != null && <span className="oc-pill oc-pill--accent"><span className="oc-status-dot" />{badge}</span>}
+            <h2 className="oc-spotlight__title">
+              {icon != null && <span className="oc-icon-tile oc-icon-tile--lg" aria-hidden="true">{icon}</span>}
+              {title}
+            </h2>
+            {tagline != null && <p className="oc-spotlight__tagline">{tagline}</p>}
+            {lead != null && <p className="oc-lead">{lead}</p>}
+            {action}
+          </div>
+          {modules && (
+            <ul className="oc-spotlight__modules">
+              {modules.map((m, i) => (
+                <li key={i}>
+                  {m.icon != null && <span className="oc-icon-tile oc-icon-tile--sm" aria-hidden="true">{m.icon}</span>}
+                  {m.label}
+                </li>
+              ))}
+            </ul>
+          )}
+        </div>
+      </div>
+    </section>
+  );
+});

package/src/blocks/BlockStats.tsx

@@ -1,26 +1,26 @@
-import { forwardRef } from "react";
-import type { HTMLAttributes, ReactNode } from "react";
-import { cx } from "../utils";
-
-export interface Stat {
-  value: ReactNode;
-  label: ReactNode;
-}
-
-export interface BlockStatsProps extends HTMLAttributes<HTMLDivElement> {
-  stats: Stat[];
-}
-
-/** `.oc-block-stats`: key figures row. */
-export const BlockStats = forwardRef<HTMLDivElement, BlockStatsProps>(function BlockStats({ stats, className, ...rest }, ref) {
-  return (
-    <div ref={ref} className={cx("oc-block-stats", className)} {...rest}>
-      {stats.map((s, i) => (
-        <div className="oc-block-stat" key={i}>
-          <div className="oc-block-stat-value">{s.value}</div>
-          <div className="oc-block-stat-label">{s.label}</div>
-        </div>
-      ))}
-    </div>
-  );
-});
+import { forwardRef } from "react";
+import type { HTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+
+export interface Stat {
+  value: ReactNode;
+  label: ReactNode;
+}
+
+export interface BlockStatsProps extends HTMLAttributes<HTMLDivElement> {
+  stats: Stat[];
+}
+
+/** `.oc-block-stats`: key figures row. */
+export const BlockStats = forwardRef<HTMLDivElement, BlockStatsProps>(function BlockStats({ stats, className, ...rest }, ref) {
+  return (
+    <div ref={ref} className={cx("oc-block-stats", className)} {...rest}>
+      {stats.map((s, i) => (
+        <div className="oc-block-stat" key={i}>
+          <div className="oc-block-stat-value">{s.value}</div>
+          <div className="oc-block-stat-label">{s.label}</div>
+        </div>
+      ))}
+    </div>
+  );
+});

package/src/blocks/BlockStatsCounter.tsx

@@ -1,31 +1,31 @@
-import { forwardRef } from "react";
-import type { HTMLAttributes, ReactNode } from "react";
-import { cx } from "../utils";
-import { Counter } from "../components/Counter";
-
-export interface CounterStat {
-  to: number;
-  suffix?: string;
-  label: ReactNode;
-}
-
-export interface BlockStatsCounterProps extends HTMLAttributes<HTMLDivElement> {
-  stats: CounterStat[];
-}
-
-/** `.oc-block-stats` whose values count up when scrolled into view (CSS only). */
-export const BlockStatsCounter = forwardRef<HTMLDivElement, BlockStatsCounterProps>(function BlockStatsCounter(
-  { stats, className, ...rest },
-  ref,
-) {
-  return (
-    <div ref={ref} className={cx("oc-block-stats", className)} {...rest}>
-      {stats.map((s, i) => (
-        <div className="oc-block-stat" key={i}>
-          <Counter className="oc-block-stat-value" to={s.to} suffix={s.suffix} />
-          <span className="oc-block-stat-label">{s.label}</span>
-        </div>
-      ))}
-    </div>
-  );
-});
+import { forwardRef } from "react";
+import type { HTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+import { Counter } from "../components/Counter";
+
+export interface CounterStat {
+  to: number;
+  suffix?: string;
+  label: ReactNode;
+}
+
+export interface BlockStatsCounterProps extends HTMLAttributes<HTMLDivElement> {
+  stats: CounterStat[];
+}
+
+/** `.oc-block-stats` whose values count up when scrolled into view (CSS only). */
+export const BlockStatsCounter = forwardRef<HTMLDivElement, BlockStatsCounterProps>(function BlockStatsCounter(
+  { stats, className, ...rest },
+  ref,
+) {
+  return (
+    <div ref={ref} className={cx("oc-block-stats", className)} {...rest}>
+      {stats.map((s, i) => (
+        <div className="oc-block-stat" key={i}>
+          <Counter className="oc-block-stat-value" to={s.to} suffix={s.suffix} />
+          <span className="oc-block-stat-label">{s.label}</span>
+        </div>
+      ))}
+    </div>
+  );
+});

package/src/blocks/BlockTeamList.tsx

@@ -1,48 +1,48 @@
-import { forwardRef } from "react";
-import type { HTMLAttributes, ReactNode } from "react";
-import { cx } from "../utils";
-import { Badge } from "../components/Badge";
-import type { BadgeVariant } from "../components/Badge";
-import { Dropdown } from "../components/Dropdown";
-import { User } from "../components/User";
-
-export interface TeamMember {
-  name: ReactNode;
-  email?: ReactNode;
-  initials?: string;
-  avatarSrc?: string;
-  /** Role / status badge text. */
-  role?: ReactNode;
-  roleVariant?: BadgeVariant;
-  /** Row action menu content (`DropdownItem`s). Adds a "..." trigger when set. */
-  menu?: ReactNode;
-  menuLabel?: string;
-}
-
-export interface BlockTeamListProps extends HTMLAttributes<HTMLDivElement> {
-  members: TeamMember[];
-}
-
-/** `.oc-block-team`: member rows with avatar, role badge and a row action menu. */
-export const BlockTeamList = forwardRef<HTMLDivElement, BlockTeamListProps>(function BlockTeamList(
-  { members, className, ...rest },
-  ref,
-) {
-  return (
-    <div ref={ref} className={cx("oc-block-team", className)} {...rest}>
-      {members.map((m, i) => (
-        <div className="oc-block-team-row" key={i}>
-          <User name={m.name} email={m.email} initials={m.initials} avatarSrc={m.avatarSrc} />
-          <div className="oc-block-team-meta">
-            {m.role != null && <Badge variant={m.roleVariant}>{m.role}</Badge>}
-            {m.menu != null && (
-              <Dropdown trigger={<>&hellip;</>} triggerProps={{ variant: "ghost", icon: true, size: "sm", type: "button", "aria-label": m.menuLabel ?? "Member actions" }}>
-                {m.menu}
-              </Dropdown>
-            )}
-          </div>
-        </div>
-      ))}
-    </div>
-  );
-});
+import { forwardRef } from "react";
+import type { HTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+import { Badge } from "../components/Badge";
+import type { BadgeVariant } from "../components/Badge";
+import { Dropdown } from "../components/Dropdown";
+import { User } from "../components/User";
+
+export interface TeamMember {
+  name: ReactNode;
+  email?: ReactNode;
+  initials?: string;
+  avatarSrc?: string;
+  /** Role / status badge text. */
+  role?: ReactNode;
+  roleVariant?: BadgeVariant;
+  /** Row action menu content (`DropdownItem`s). Adds a "..." trigger when set. */
+  menu?: ReactNode;
+  menuLabel?: string;
+}
+
+export interface BlockTeamListProps extends HTMLAttributes<HTMLDivElement> {
+  members: TeamMember[];
+}
+
+/** `.oc-block-team`: member rows with avatar, role badge and a row action menu. */
+export const BlockTeamList = forwardRef<HTMLDivElement, BlockTeamListProps>(function BlockTeamList(
+  { members, className, ...rest },
+  ref,
+) {
+  return (
+    <div ref={ref} className={cx("oc-block-team", className)} {...rest}>
+      {members.map((m, i) => (
+        <div className="oc-block-team-row" key={i}>
+          <User name={m.name} email={m.email} initials={m.initials} avatarSrc={m.avatarSrc} />
+          <div className="oc-block-team-meta">
+            {m.role != null && <Badge variant={m.roleVariant}>{m.role}</Badge>}
+            {m.menu != null && (
+              <Dropdown trigger={<>&hellip;</>} triggerProps={{ variant: "ghost", icon: true, size: "sm", type: "button", "aria-label": m.menuLabel ?? "Member actions" }}>
+                {m.menu}
+              </Dropdown>
+            )}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+});

package/src/blocks/BlockTwoFactor.tsx

@@ -1,57 +1,57 @@
-"use client";
-
-import { forwardRef, useId, useState } from "react";
-import type { FormEvent, HTMLAttributes, ReactNode } from "react";
-import { cx } from "../utils";
-import { CopyField } from "../components/CopyField";
-import { Heading } from "../components/Heading";
-import { OtpInput } from "../components/OtpInput";
-import { RecoveryCodes } from "../components/RecoveryCodes";
-
-export interface BlockTwoFactorProps extends Omit<HTMLAttributes<HTMLDivElement>, "onSubmit"> {
-  /** QR code image / svg; a labelled placeholder box is rendered when omitted. */
-  qr?: ReactNode;
-  setupKey: string;
-  recoveryCodes?: string[];
-  codeLength?: number;
-  /** Called with the entered code when the form is submitted. */
-  onSubmit?: (code: string) => void;
-  submitLabel?: ReactNode;
-}
-
-/** `.oc-block-twofactor`: authenticator setup with QR, copyable key, OTP input and recovery codes. */
-export const BlockTwoFactor = forwardRef<HTMLDivElement, BlockTwoFactorProps>(function BlockTwoFactor(
-  { qr, setupKey, recoveryCodes, codeLength = 6, onSubmit, submitLabel = "Enable two-factor", className, ...rest },
-  ref,
-) {
-  const id = `oc-twofactor-${useId().replace(/:/g, "")}`;
-  const [code, setCode] = useState("");
-  const submit = (e: FormEvent) => {
-    e.preventDefault();
-    onSubmit?.(code);
-  };
-  return (
-    <div ref={ref} className={cx("oc-block-twofactor", className)} {...rest}>
-      <section className="oc-block-twofactor-step">
-        <Heading size="sm" title="1. Scan the QR code" description="Use an authenticator app, or enter the key manually." />
-        <div className="oc-block-twofactor-center">
-          {qr ?? <div className="oc-block-twofactor-qr" role="img" aria-label="QR code">QR code</div>}
-          <CopyField value={setupKey} label="Setup key" />
-        </div>
-      </section>
-      <form className="oc-block-twofactor-step" onSubmit={submit}>
-        <Heading size="sm" title="2. Confirm with a code" />
-        <div className="oc-field">
-          <label className="oc-field-label" htmlFor={id}>Authentication code</label>
-          <OtpInput id={id} name="code" length={codeLength} value={code} onChange={setCode} />
-        </div>
-        <button className="oc-btn" type="submit">{submitLabel}</button>
-      </form>
-      {recoveryCodes && (
-        <section className="oc-block-twofactor-step">
-          <RecoveryCodes codes={recoveryCodes} />
-        </section>
-      )}
-    </div>
-  );
-});
+"use client";
+
+import { forwardRef, useId, useState } from "react";
+import type { FormEvent, HTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+import { CopyField } from "../components/CopyField";
+import { Heading } from "../components/Heading";
+import { OtpInput } from "../components/OtpInput";
+import { RecoveryCodes } from "../components/RecoveryCodes";
+
+export interface BlockTwoFactorProps extends Omit<HTMLAttributes<HTMLDivElement>, "onSubmit"> {
+  /** QR code image / svg; a labelled placeholder box is rendered when omitted. */
+  qr?: ReactNode;
+  setupKey: string;
+  recoveryCodes?: string[];
+  codeLength?: number;
+  /** Called with the entered code when the form is submitted. */
+  onSubmit?: (code: string) => void;
+  submitLabel?: ReactNode;
+}
+
+/** `.oc-block-twofactor`: authenticator setup with QR, copyable key, OTP input and recovery codes. */
+export const BlockTwoFactor = forwardRef<HTMLDivElement, BlockTwoFactorProps>(function BlockTwoFactor(
+  { qr, setupKey, recoveryCodes, codeLength = 6, onSubmit, submitLabel = "Enable two-factor", className, ...rest },
+  ref,
+) {
+  const id = `oc-twofactor-${useId().replace(/:/g, "")}`;
+  const [code, setCode] = useState("");
+  const submit = (e: FormEvent) => {
+    e.preventDefault();
+    onSubmit?.(code);
+  };
+  return (
+    <div ref={ref} className={cx("oc-block-twofactor", className)} {...rest}>
+      <section className="oc-block-twofactor-step">
+        <Heading size="sm" title="1. Scan the QR code" description="Use an authenticator app, or enter the key manually." />
+        <div className="oc-block-twofactor-center">
+          {qr ?? <div className="oc-block-twofactor-qr" role="img" aria-label="QR code">QR code</div>}
+          <CopyField value={setupKey} label="Setup key" />
+        </div>
+      </section>
+      <form className="oc-block-twofactor-step" onSubmit={submit}>
+        <Heading size="sm" title="2. Confirm with a code" />
+        <div className="oc-field">
+          <label className="oc-field-label" htmlFor={id}>Authentication code</label>
+          <OtpInput id={id} name="code" length={codeLength} value={code} onChange={setCode} />
+        </div>
+        <button className="oc-btn" type="submit">{submitLabel}</button>
+      </form>
+      {recoveryCodes && (
+        <section className="oc-block-twofactor-step">
+          <RecoveryCodes codes={recoveryCodes} />
+        </section>
+      )}
+    </div>
+  );
+});