@birdycom/omniaui-react 0.11.0 → 0.11.1

package/src/blocks/BlockProcess.tsx

@@ -1,50 +1,50 @@
-import { forwardRef } from "react";
-import type { HTMLAttributes, ReactNode } from "react";
-import { cx } from "../utils";
-
-export interface ProcessStep {
-  title: ReactNode;
-  text?: ReactNode;
-}
-
-export interface BlockProcessProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
-  eyebrow?: ReactNode;
-  /** Display title; wrap a word in `<span className="oc-text-gradient">`. */
-  title: ReactNode;
-  steps: ProcessStep[];
-  /** Items of the endless marquee (strings). The list is repeated once for the seamless loop. */
-  marquee?: string[];
-  marqueeLabel?: string;
-}
-
-/** Numbered steps (CSS counter) plus an optional marquee of technologies. */
-export const BlockProcess = forwardRef<HTMLElement, BlockProcessProps>(function BlockProcess(
-  { eyebrow, title, steps, marquee, marqueeLabel = "Technologies", className, ...rest },
-  ref,
-) {
-  return (
-    <section ref={ref} className={cx("oc-section-pad", className)} {...rest}>
-      <div className="oc-container">
-        {eyebrow != null && <p className="oc-eyebrow">{eyebrow}</p>}
-        <h2 className="oc-display oc-display--md">{title}</h2>
-        <ol className="oc-steps">
-          {steps.map((s, i) => (
-            <li key={i}>
-              <h3>{s.title}</h3>
-              {s.text != null && <p>{s.text}</p>}
-            </li>
-          ))}
-        </ol>
-        {marquee && marquee.length > 0 && (
-          <div className="oc-marquee mt-4" aria-label={marqueeLabel}>
-            <div className="oc-marquee__track">
-              {marquee.map((m) => <span className="oc-marquee__item" key={m}>{m}</span>)}
-              {marquee.map((m) => <span className="oc-marquee__item" aria-hidden="true" key={`dup-${m}`}>{m}</span>)}
-            </div>
-          </div>
-        )}
-      </div>
-    </section>
-  );
-});
-
+import { forwardRef } from "react";
+import type { HTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+
+export interface ProcessStep {
+  title: ReactNode;
+  text?: ReactNode;
+}
+
+export interface BlockProcessProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
+  eyebrow?: ReactNode;
+  /** Display title; wrap a word in `<span className="oc-text-gradient">`. */
+  title: ReactNode;
+  steps: ProcessStep[];
+  /** Items of the endless marquee (strings). The list is repeated once for the seamless loop. */
+  marquee?: string[];
+  marqueeLabel?: string;
+}
+
+/** Numbered steps (CSS counter) plus an optional marquee of technologies. */
+export const BlockProcess = forwardRef<HTMLElement, BlockProcessProps>(function BlockProcess(
+  { eyebrow, title, steps, marquee, marqueeLabel = "Technologies", className, ...rest },
+  ref,
+) {
+  return (
+    <section ref={ref} className={cx("oc-section-pad", className)} {...rest}>
+      <div className="oc-container">
+        {eyebrow != null && <p className="oc-eyebrow">{eyebrow}</p>}
+        <h2 className="oc-display oc-display--md">{title}</h2>
+        <ol className="oc-steps">
+          {steps.map((s, i) => (
+            <li key={i}>
+              <h3>{s.title}</h3>
+              {s.text != null && <p>{s.text}</p>}
+            </li>
+          ))}
+        </ol>
+        {marquee && marquee.length > 0 && (
+          <div className="oc-marquee mt-4" aria-label={marqueeLabel}>
+            <div className="oc-marquee__track">
+              {marquee.map((m) => <span className="oc-marquee__item" key={m}>{m}</span>)}
+              {marquee.map((m) => <span className="oc-marquee__item" aria-hidden="true" key={`dup-${m}`}>{m}</span>)}
+            </div>
+          </div>
+        )}
+      </div>
+    </section>
+  );
+});
+

package/src/blocks/BlockProductGrid.tsx

@@ -1,54 +1,54 @@
-import { forwardRef } from "react";
-import type { HTMLAttributes, ReactNode } from "react";
-import { cx } from "../utils";
-
-export interface Product {
-  href: string;
-  /** Accent name (`green`, `orange`, `violet`, `cyan`, ...), applied as `oc-accent--{accent}`. */
-  accent?: string;
-  /** Glyph or inline SVG in the icon tile. */
-  icon?: ReactNode;
-  /** Pill label (`Own product`, `Tool`...). */
-  pill?: ReactNode;
-  name: ReactNode;
-  tagline?: ReactNode;
-  summary?: ReactNode;
-  /** "Discover ..." link text. */
-  more?: ReactNode;
-}
-
-export interface BlockProductGridProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
-  eyebrow?: ReactNode;
-  /** Display title; wrap a word in `<span className="oc-text-gradient">`. */
-  title: ReactNode;
-  products: Product[];
-}
-
-/** Section title plus a grid of accent-colored product cards. */
-export const BlockProductGrid = forwardRef<HTMLElement, BlockProductGridProps>(function BlockProductGrid(
-  { eyebrow, title, products, className, ...rest },
-  ref,
-) {
-  return (
-    <section ref={ref} className={cx("oc-section-pad", className)} {...rest}>
-      <div className="oc-container">
-        {eyebrow != null && <p className="oc-eyebrow">{eyebrow}</p>}
-        <h2 className="oc-display oc-display--md">{title}</h2>
-        <div className="oc-card-grid">
-          {products.map((p, i) => (
-            <a className={cx("oc-product-card", p.accent && `oc-accent--${p.accent}`)} href={p.href} key={i}>
-              <div className="oc-product-card__top">
-                {p.icon != null && <span className="oc-icon-tile" aria-hidden="true">{p.icon}</span>}
-                {p.pill != null && <span className="oc-pill">{p.pill}</span>}
-              </div>
-              <h3 className="oc-product-card__name">{p.name}</h3>
-              {p.tagline != null && <p className="oc-product-card__tagline">{p.tagline}</p>}
-              {p.summary != null && <p className="oc-product-card__summary">{p.summary}</p>}
-              {p.more != null && <span className="oc-product-card__more">{p.more}</span>}
-            </a>
-          ))}
-        </div>
-      </div>
-    </section>
-  );
-});
+import { forwardRef } from "react";
+import type { HTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+
+export interface Product {
+  href: string;
+  /** Accent name (`green`, `orange`, `violet`, `cyan`, ...), applied as `oc-accent--{accent}`. */
+  accent?: string;
+  /** Glyph or inline SVG in the icon tile. */
+  icon?: ReactNode;
+  /** Pill label (`Own product`, `Tool`...). */
+  pill?: ReactNode;
+  name: ReactNode;
+  tagline?: ReactNode;
+  summary?: ReactNode;
+  /** "Discover ..." link text. */
+  more?: ReactNode;
+}
+
+export interface BlockProductGridProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
+  eyebrow?: ReactNode;
+  /** Display title; wrap a word in `<span className="oc-text-gradient">`. */
+  title: ReactNode;
+  products: Product[];
+}
+
+/** Section title plus a grid of accent-colored product cards. */
+export const BlockProductGrid = forwardRef<HTMLElement, BlockProductGridProps>(function BlockProductGrid(
+  { eyebrow, title, products, className, ...rest },
+  ref,
+) {
+  return (
+    <section ref={ref} className={cx("oc-section-pad", className)} {...rest}>
+      <div className="oc-container">
+        {eyebrow != null && <p className="oc-eyebrow">{eyebrow}</p>}
+        <h2 className="oc-display oc-display--md">{title}</h2>
+        <div className="oc-card-grid">
+          {products.map((p, i) => (
+            <a className={cx("oc-product-card", p.accent && `oc-accent--${p.accent}`)} href={p.href} key={i}>
+              <div className="oc-product-card__top">
+                {p.icon != null && <span className="oc-icon-tile" aria-hidden="true">{p.icon}</span>}
+                {p.pill != null && <span className="oc-pill">{p.pill}</span>}
+              </div>
+              <h3 className="oc-product-card__name">{p.name}</h3>
+              {p.tagline != null && <p className="oc-product-card__tagline">{p.tagline}</p>}
+              {p.summary != null && <p className="oc-product-card__summary">{p.summary}</p>}
+              {p.more != null && <span className="oc-product-card__more">{p.more}</span>}
+            </a>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+});

package/src/blocks/BlockProfileHeader.tsx

@@ -1,57 +1,57 @@
-// File: packages/react/src/blocks/BlockProfileHeader.tsx | Map: types -> BlockProfileHeader (banner -> bar (avatar, info, actions) -> tabs)
-import { forwardRef, useId } from "react";
-import type { CSSProperties, HTMLAttributes, ReactNode } from "react";
-import { cx } from "../utils";
-
-export interface ProfileHeaderTab {
-  label: ReactNode;
-  href: string;
-  current?: boolean;
-}
-
-export interface BlockProfileHeaderProps extends HTMLAttributes<HTMLElement> {
-  name: ReactNode;
-  meta?: ReactNode;
-  bio?: ReactNode;
-  /** Initials, or an <img> for the avatar. */
-  avatar: ReactNode;
-  /** Banner image URL; without it the banner is an accent gradient. */
-  banner?: string;
-  actions?: ReactNode;
-  tabs?: ProfileHeaderTab[];
-  tabsLabel?: string;
-  compact?: boolean;
-  /** Heading level of the name (h1 on a profile page, h2 inside a page). */
-  headingLevel?: 1 | 2;
-}
-
-/** `.oc-block-profile`: banner, overhanging avatar, name, meta, actions and link tabs. */
-export const BlockProfileHeader = forwardRef<HTMLElement, BlockProfileHeaderProps>(function BlockProfileHeader(
-  { name, meta, bio, avatar, banner, actions, tabs = [], tabsLabel = "Profile sections", compact = false, headingLevel = 1, className, ...rest },
-  ref,
-) {
-  const nameId = `oc-profile-name-${useId().replace(/[^\w-]/g, "")}`;
-  const Heading = headingLevel === 1 ? "h1" : "h2";
-  const bannerStyle = banner ? ({ "--oc-profile-banner": `url("${banner}")` } as CSSProperties) : undefined;
-  return (
-    <section ref={ref} className={cx("oc-block-profile", compact && "oc-block-profile--compact", className)} aria-labelledby={nameId} {...rest}>
-      <div className="oc-block-profile-banner" style={bannerStyle} aria-hidden="true" />
-      <div className="oc-block-profile-bar">
-        <span className="oc-avatar oc-block-profile-avatar" aria-hidden="true">{avatar}</span>
-        <div className="oc-block-profile-info">
-          <Heading className="oc-block-profile-name" id={nameId}>{name}</Heading>
-          {meta != null && <p className="oc-block-profile-meta">{meta}</p>}
-          {bio != null && <p className="oc-block-profile-bio">{bio}</p>}
-        </div>
-        {actions != null && <div className="oc-block-profile-actions">{actions}</div>}
-      </div>
-      {tabs.length > 0 && (
-        <nav className="oc-block-profile-tabs" aria-label={tabsLabel}>
-          {tabs.map((tab, i) => (
-            <a key={i} className="oc-block-profile-tab" href={tab.href} aria-current={tab.current ? "page" : undefined}>{tab.label}</a>
-          ))}
-        </nav>
-      )}
-    </section>
-  );
-});
+// File: packages/react/src/blocks/BlockProfileHeader.tsx | Map: types -> BlockProfileHeader (banner -> bar (avatar, info, actions) -> tabs)
+import { forwardRef, useId } from "react";
+import type { CSSProperties, HTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+
+export interface ProfileHeaderTab {
+  label: ReactNode;
+  href: string;
+  current?: boolean;
+}
+
+export interface BlockProfileHeaderProps extends HTMLAttributes<HTMLElement> {
+  name: ReactNode;
+  meta?: ReactNode;
+  bio?: ReactNode;
+  /** Initials, or an <img> for the avatar. */
+  avatar: ReactNode;
+  /** Banner image URL; without it the banner is an accent gradient. */
+  banner?: string;
+  actions?: ReactNode;
+  tabs?: ProfileHeaderTab[];
+  tabsLabel?: string;
+  compact?: boolean;
+  /** Heading level of the name (h1 on a profile page, h2 inside a page). */
+  headingLevel?: 1 | 2;
+}
+
+/** `.oc-block-profile`: banner, overhanging avatar, name, meta, actions and link tabs. */
+export const BlockProfileHeader = forwardRef<HTMLElement, BlockProfileHeaderProps>(function BlockProfileHeader(
+  { name, meta, bio, avatar, banner, actions, tabs = [], tabsLabel = "Profile sections", compact = false, headingLevel = 1, className, ...rest },
+  ref,
+) {
+  const nameId = `oc-profile-name-${useId().replace(/[^\w-]/g, "")}`;
+  const Heading = headingLevel === 1 ? "h1" : "h2";
+  const bannerStyle = banner ? ({ "--oc-profile-banner": `url("${banner}")` } as CSSProperties) : undefined;
+  return (
+    <section ref={ref} className={cx("oc-block-profile", compact && "oc-block-profile--compact", className)} aria-labelledby={nameId} {...rest}>
+      <div className="oc-block-profile-banner" style={bannerStyle} aria-hidden="true" />
+      <div className="oc-block-profile-bar">
+        <span className="oc-avatar oc-block-profile-avatar" aria-hidden="true">{avatar}</span>
+        <div className="oc-block-profile-info">
+          <Heading className="oc-block-profile-name" id={nameId}>{name}</Heading>
+          {meta != null && <p className="oc-block-profile-meta">{meta}</p>}
+          {bio != null && <p className="oc-block-profile-bio">{bio}</p>}
+        </div>
+        {actions != null && <div className="oc-block-profile-actions">{actions}</div>}
+      </div>
+      {tabs.length > 0 && (
+        <nav className="oc-block-profile-tabs" aria-label={tabsLabel}>
+          {tabs.map((tab, i) => (
+            <a key={i} className="oc-block-profile-tab" href={tab.href} aria-current={tab.current ? "page" : undefined}>{tab.label}</a>
+          ))}
+        </nav>
+      )}
+    </section>
+  );
+});

package/src/blocks/BlockShowcase.tsx

@@ -1,58 +1,58 @@
-import { forwardRef } from "react";
-import type { CSSProperties, HTMLAttributes, ReactNode } from "react";
-import { cx } from "../utils";
-
-export interface ShowcaseProject {
-  href: string;
-  accent?: string;
-  /** CSS `background` of the browser frame body (e.g. a gradient of palette variables) or an image URL via `image`. */
-  background?: string;
-  image?: string;
-  imageAlt?: string;
-  pill?: ReactNode;
-  name: ReactNode;
-  summary?: ReactNode;
-  more?: ReactNode;
-}
-
-export interface BlockShowcaseProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
-  eyebrow?: ReactNode;
-  /** Display title; wrap a word in `<span className="oc-text-gradient">`. */
-  title: ReactNode;
-  projects: ShowcaseProject[];
-  /** Minimum card width (`--oc-card-min`, default 26rem). */
-  cardMin?: string;
-}
-
-/** Portfolio grid: project cards with a browser frame around the screenshot. */
-export const BlockShowcase = forwardRef<HTMLElement, BlockShowcaseProps>(function BlockShowcase(
-  { eyebrow, title, projects, cardMin = "26rem", className, ...rest },
-  ref,
-) {
-  return (
-    <section ref={ref} className={cx("oc-section-pad", className)} {...rest}>
-      <div className="oc-container">
-        {eyebrow != null && <p className="oc-eyebrow">{eyebrow}</p>}
-        <h2 className="oc-display oc-display--md">{title}</h2>
-        <div className="oc-card-grid" style={{ "--oc-card-min": cardMin } as CSSProperties}>
-          {projects.map((p, i) => (
-            <a className={cx("oc-product-card", p.accent && `oc-accent--${p.accent}`, "p-0 overflow-hidden")} href={p.href} key={i}>
-              <span className="oc-browser-frame m-1">
-                <span className="oc-browser-frame__bar"><i /><i /><i /></span>
-                <span className="oc-browser-frame__body" style={p.background ? { background: p.background } : undefined}>
-                  {p.image && <img src={p.image} alt={p.imageAlt ?? ""} />}
-                </span>
-              </span>
-              <span className="grid gap-0.5 p-1.5 pt-0">
-                {p.pill != null && <span className="oc-pill oc-pill--accent">{p.pill}</span>}
-                <span className="oc-product-card__name">{p.name}</span>
-                {p.summary != null && <span className="oc-product-card__summary">{p.summary}</span>}
-                {p.more != null && <span className="oc-product-card__more">{p.more}</span>}
-              </span>
-            </a>
-          ))}
-        </div>
-      </div>
-    </section>
-  );
-});
+import { forwardRef } from "react";
+import type { CSSProperties, HTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+
+export interface ShowcaseProject {
+  href: string;
+  accent?: string;
+  /** CSS `background` of the browser frame body (e.g. a gradient of palette variables) or an image URL via `image`. */
+  background?: string;
+  image?: string;
+  imageAlt?: string;
+  pill?: ReactNode;
+  name: ReactNode;
+  summary?: ReactNode;
+  more?: ReactNode;
+}
+
+export interface BlockShowcaseProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
+  eyebrow?: ReactNode;
+  /** Display title; wrap a word in `<span className="oc-text-gradient">`. */
+  title: ReactNode;
+  projects: ShowcaseProject[];
+  /** Minimum card width (`--oc-card-min`, default 26rem). */
+  cardMin?: string;
+}
+
+/** Portfolio grid: project cards with a browser frame around the screenshot. */
+export const BlockShowcase = forwardRef<HTMLElement, BlockShowcaseProps>(function BlockShowcase(
+  { eyebrow, title, projects, cardMin = "26rem", className, ...rest },
+  ref,
+) {
+  return (
+    <section ref={ref} className={cx("oc-section-pad", className)} {...rest}>
+      <div className="oc-container">
+        {eyebrow != null && <p className="oc-eyebrow">{eyebrow}</p>}
+        <h2 className="oc-display oc-display--md">{title}</h2>
+        <div className="oc-card-grid" style={{ "--oc-card-min": cardMin } as CSSProperties}>
+          {projects.map((p, i) => (
+            <a className={cx("oc-product-card", p.accent && `oc-accent--${p.accent}`, "p-0 overflow-hidden")} href={p.href} key={i}>
+              <span className="oc-browser-frame m-1">
+                <span className="oc-browser-frame__bar"><i /><i /><i /></span>
+                <span className="oc-browser-frame__body" style={p.background ? { background: p.background } : undefined}>
+                  {p.image && <img src={p.image} alt={p.imageAlt ?? ""} />}
+                </span>
+              </span>
+              <span className="grid gap-0.5 p-1.5 pt-0">
+                {p.pill != null && <span className="oc-pill oc-pill--accent">{p.pill}</span>}
+                <span className="oc-product-card__name">{p.name}</span>
+                {p.summary != null && <span className="oc-product-card__summary">{p.summary}</span>}
+                {p.more != null && <span className="oc-product-card__more">{p.more}</span>}
+              </span>
+            </a>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+});

package/src/blocks/BlockSiteFooter.tsx

@@ -1,60 +1,60 @@
-import { forwardRef } from "react";
-import type { HTMLAttributes, ReactNode } from "react";
-import { cx } from "../utils";
-import type { FooterLink } from "./BlockFooter";
-
-export interface SiteFooterColumn {
-  title: ReactNode;
-  /** Link list column. */
-  links?: FooterLink[];
-  /** Address column: children are rendered in an `<address class="oc-site-footer__list">`. */
-  address?: ReactNode;
-}
-
-export interface BlockSiteFooterProps extends Omit<HTMLAttributes<HTMLElement>, "about"> {
-  /** Brand link content, e.g. icon tile + name (rendered in `oc-site-header__brand`). */
-  brand: ReactNode;
-  brandHref?: string;
-  about?: ReactNode;
-  columns: SiteFooterColumn[];
-  copyright?: ReactNode;
-  credit?: ReactNode;
-}
-
-/** `.oc-site-footer`: brand column, link columns and a bottom bar. */
-export const BlockSiteFooter = forwardRef<HTMLElement, BlockSiteFooterProps>(function BlockSiteFooter(
-  { brand, brandHref = "/", about, columns, copyright, credit, className, ...rest },
-  ref,
-) {
-  return (
-    <footer ref={ref} className={cx("oc-site-footer", className)} {...rest}>
-      <div className="oc-container">
-        <div className="oc-site-footer__grid">
-          <div className="oc-site-footer__about">
-            <a className="oc-site-header__brand" href={brandHref}>{brand}</a>
-            {about != null && <p>{about}</p>}
-          </div>
-          {columns.map((col, i) => (
-            <div key={i}>
-              <h2 className="oc-site-footer__title">{col.title}</h2>
-              {col.links && (
-                <ul className="oc-site-footer__list">
-                  {col.links.map((l, j) => (
-                    <li key={j}><a href={l.href}>{l.label}</a></li>
-                  ))}
-                </ul>
-              )}
-              {col.address != null && <address className="oc-site-footer__list">{col.address}</address>}
-            </div>
-          ))}
-        </div>
-        {(copyright != null || credit != null) && (
-          <div className="oc-site-footer__bottom">
-            <span>{copyright}</span>
-            <span>{credit}</span>
-          </div>
-        )}
-      </div>
-    </footer>
-  );
-});
+import { forwardRef } from "react";
+import type { HTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+import type { FooterLink } from "./BlockFooter";
+
+export interface SiteFooterColumn {
+  title: ReactNode;
+  /** Link list column. */
+  links?: FooterLink[];
+  /** Address column: children are rendered in an `<address class="oc-site-footer__list">`. */
+  address?: ReactNode;
+}
+
+export interface BlockSiteFooterProps extends Omit<HTMLAttributes<HTMLElement>, "about"> {
+  /** Brand link content, e.g. icon tile + name (rendered in `oc-site-header__brand`). */
+  brand: ReactNode;
+  brandHref?: string;
+  about?: ReactNode;
+  columns: SiteFooterColumn[];
+  copyright?: ReactNode;
+  credit?: ReactNode;
+}
+
+/** `.oc-site-footer`: brand column, link columns and a bottom bar. */
+export const BlockSiteFooter = forwardRef<HTMLElement, BlockSiteFooterProps>(function BlockSiteFooter(
+  { brand, brandHref = "/", about, columns, copyright, credit, className, ...rest },
+  ref,
+) {
+  return (
+    <footer ref={ref} className={cx("oc-site-footer", className)} {...rest}>
+      <div className="oc-container">
+        <div className="oc-site-footer__grid">
+          <div className="oc-site-footer__about">
+            <a className="oc-site-header__brand" href={brandHref}>{brand}</a>
+            {about != null && <p>{about}</p>}
+          </div>
+          {columns.map((col, i) => (
+            <div key={i}>
+              <h2 className="oc-site-footer__title">{col.title}</h2>
+              {col.links && (
+                <ul className="oc-site-footer__list">
+                  {col.links.map((l, j) => (
+                    <li key={j}><a href={l.href}>{l.label}</a></li>
+                  ))}
+                </ul>
+              )}
+              {col.address != null && <address className="oc-site-footer__list">{col.address}</address>}
+            </div>
+          ))}
+        </div>
+        {(copyright != null || credit != null) && (
+          <div className="oc-site-footer__bottom">
+            <span>{copyright}</span>
+            <span>{credit}</span>
+          </div>
+        )}
+      </div>
+    </footer>
+  );
+});