@birdycom/omniaui-react 0.11.0 → 0.11.1

package/src/blocks/BlockFaq.tsx

@@ -1,55 +1,55 @@
-// File: packages/react/src/blocks/BlockFaq.tsx | Map: types -> BlockFaq (head -> accordion on details name -> more line)
-import { forwardRef, useId } from "react";
-import type { HTMLAttributes, ReactNode } from "react";
-import { cx } from "../utils";
-
-export interface FaqItem {
-  question: ReactNode;
-  answer: ReactNode;
-}
-
-export interface BlockFaqProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
-  eyebrow?: ReactNode;
-  title: ReactNode;
-  lead?: ReactNode;
-  items: FaqItem[];
-  /** Index of the item that starts open (default 0, -1 = none). */
-  openIndex?: number;
-  /** Closing line, e.g. "Still have questions?" + a link. */
-  more?: ReactNode;
-  /** Head left, questions right. */
-  split?: boolean;
-  /** Name of the details group (one open at a time). Generated when empty. */
-  name?: string;
-}
-
-/** `.oc-block-faq`: title + exclusive accordion on native <details name>. */
-export const BlockFaq = forwardRef<HTMLElement, BlockFaqProps>(function BlockFaq(
-  { eyebrow, title, lead, items, openIndex = 0, more, split = false, name, className, ...rest },
-  ref,
-) {
-  const auto = useId().replace(/[^\w-]/g, "");
-  const group = name ?? `oc-faq-${auto}`;
-  const titleId = `oc-faq-title-${auto}`;
-  return (
-    <section ref={ref} className={cx("oc-block-faq", split && "oc-block-faq--split", className)} aria-labelledby={titleId} {...rest}>
-      <div className="oc-block-faq-inner">
-        <div className="oc-block-faq-head">
-          {eyebrow != null && <p className="oc-eyebrow">{eyebrow}</p>}
-          <h2 className="oc-block-faq-title" id={titleId}>{title}</h2>
-          {lead != null && <p className="oc-block-faq-lead">{lead}</p>}
-        </div>
-        <div className="oc-accordion oc-block-faq-list">
-          {items.map((item, i) => (
-            // "name" groups the items; React 19 passes it through, older versions too (unknown attribute on details).
-            <details key={i} className="oc-accordion-item" {...{ name: group }} open={i === openIndex || undefined}>
-              <summary className="oc-accordion-trigger">{item.question}</summary>
-              <div className="oc-accordion-content">{item.answer}</div>
-            </details>
-          ))}
-        </div>
-        {more != null && <p className="oc-block-faq-more">{more}</p>}
-      </div>
-    </section>
-  );
-});
+// File: packages/react/src/blocks/BlockFaq.tsx | Map: types -> BlockFaq (head -> accordion on details name -> more line)
+import { forwardRef, useId } from "react";
+import type { HTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+
+export interface FaqItem {
+  question: ReactNode;
+  answer: ReactNode;
+}
+
+export interface BlockFaqProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
+  eyebrow?: ReactNode;
+  title: ReactNode;
+  lead?: ReactNode;
+  items: FaqItem[];
+  /** Index of the item that starts open (default 0, -1 = none). */
+  openIndex?: number;
+  /** Closing line, e.g. "Still have questions?" + a link. */
+  more?: ReactNode;
+  /** Head left, questions right. */
+  split?: boolean;
+  /** Name of the details group (one open at a time). Generated when empty. */
+  name?: string;
+}
+
+/** `.oc-block-faq`: title + exclusive accordion on native <details name>. */
+export const BlockFaq = forwardRef<HTMLElement, BlockFaqProps>(function BlockFaq(
+  { eyebrow, title, lead, items, openIndex = 0, more, split = false, name, className, ...rest },
+  ref,
+) {
+  const auto = useId().replace(/[^\w-]/g, "");
+  const group = name ?? `oc-faq-${auto}`;
+  const titleId = `oc-faq-title-${auto}`;
+  return (
+    <section ref={ref} className={cx("oc-block-faq", split && "oc-block-faq--split", className)} aria-labelledby={titleId} {...rest}>
+      <div className="oc-block-faq-inner">
+        <div className="oc-block-faq-head">
+          {eyebrow != null && <p className="oc-eyebrow">{eyebrow}</p>}
+          <h2 className="oc-block-faq-title" id={titleId}>{title}</h2>
+          {lead != null && <p className="oc-block-faq-lead">{lead}</p>}
+        </div>
+        <div className="oc-accordion oc-block-faq-list">
+          {items.map((item, i) => (
+            // "name" groups the items; React 19 passes it through, older versions too (unknown attribute on details).
+            <details key={i} className="oc-accordion-item" {...{ name: group }} open={i === openIndex || undefined}>
+              <summary className="oc-accordion-trigger">{item.question}</summary>
+              <div className="oc-accordion-content">{item.answer}</div>
+            </details>
+          ))}
+        </div>
+        {more != null && <p className="oc-block-faq-more">{more}</p>}
+      </div>
+    </section>
+  );
+});

package/src/blocks/BlockFeatures.tsx

@@ -1,38 +1,38 @@
-import { forwardRef } from "react";
-import type { HTMLAttributes, ReactNode } from "react";
-import { cx } from "../utils";
-
-export interface Feature {
-  /** Glyph, emoji or inline SVG. */
-  icon?: ReactNode;
-  title: ReactNode;
-  description?: ReactNode;
-}
-
-export interface BlockFeaturesProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
-  title?: ReactNode;
-  description?: ReactNode;
-  features: Feature[];
-}
-
-/** `.oc-block-features`: heading plus a grid of feature cards. */
-export const BlockFeatures = forwardRef<HTMLDivElement, BlockFeaturesProps>(function BlockFeatures(
-  { title, description, features, className, ...rest },
-  ref,
-) {
-  return (
-    <div ref={ref} className={cx("oc-block-features", className)} {...rest}>
-      {title != null && <h2>{title}</h2>}
-      {description != null && <p>{description}</p>}
-      <div className="oc-block-features-grid">
-        {features.map((f, i) => (
-          <div className="oc-block-feature-card" key={i}>
-            {f.icon != null && <div className="oc-block-feature-icon">{f.icon}</div>}
-            <h3>{f.title}</h3>
-            {f.description != null && <p>{f.description}</p>}
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-});
+import { forwardRef } from "react";
+import type { HTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+
+export interface Feature {
+  /** Glyph, emoji or inline SVG. */
+  icon?: ReactNode;
+  title: ReactNode;
+  description?: ReactNode;
+}
+
+export interface BlockFeaturesProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+  title?: ReactNode;
+  description?: ReactNode;
+  features: Feature[];
+}
+
+/** `.oc-block-features`: heading plus a grid of feature cards. */
+export const BlockFeatures = forwardRef<HTMLDivElement, BlockFeaturesProps>(function BlockFeatures(
+  { title, description, features, className, ...rest },
+  ref,
+) {
+  return (
+    <div ref={ref} className={cx("oc-block-features", className)} {...rest}>
+      {title != null && <h2>{title}</h2>}
+      {description != null && <p>{description}</p>}
+      <div className="oc-block-features-grid">
+        {features.map((f, i) => (
+          <div className="oc-block-feature-card" key={i}>
+            {f.icon != null && <div className="oc-block-feature-icon">{f.icon}</div>}
+            <h3>{f.title}</h3>
+            {f.description != null && <p>{f.description}</p>}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+});

package/src/blocks/BlockFooter.tsx

@@ -1,50 +1,50 @@
-import { forwardRef } from "react";
-import type { HTMLAttributes, ReactNode } from "react";
-import { cx } from "../utils";
-
-export interface FooterLink {
-  label: ReactNode;
-  href: string;
-}
-
-export interface FooterColumn {
-  title: ReactNode;
-  links: FooterLink[];
-}
-
-export interface BlockFooterProps extends HTMLAttributes<HTMLDivElement> {
-  columns: FooterColumn[];
-  /** Left text of the bottom bar. */
-  copyright?: ReactNode;
-  /** Right text of the bottom bar. */
-  credit?: ReactNode;
-}
-
-/** `.oc-block-footer`: multi-column site footer. */
-export const BlockFooter = forwardRef<HTMLDivElement, BlockFooterProps>(function BlockFooter(
-  { columns, copyright, credit, className, ...rest },
-  ref,
-) {
-  return (
-    <div ref={ref} className={cx("oc-block-footer", className)} {...rest}>
-      <div className="oc-block-footer-grid">
-        {columns.map((col, i) => (
-          <div className="oc-block-footer-col" key={i}>
-            <h4>{col.title}</h4>
-            <ul>
-              {col.links.map((l, j) => (
-                <li key={j}><a href={l.href}>{l.label}</a></li>
-              ))}
-            </ul>
-          </div>
-        ))}
-      </div>
-      {(copyright != null || credit != null) && (
-        <div className="oc-block-footer-bottom">
-          <span>{copyright}</span>
-          <span>{credit}</span>
-        </div>
-      )}
-    </div>
-  );
-});
+import { forwardRef } from "react";
+import type { HTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+
+export interface FooterLink {
+  label: ReactNode;
+  href: string;
+}
+
+export interface FooterColumn {
+  title: ReactNode;
+  links: FooterLink[];
+}
+
+export interface BlockFooterProps extends HTMLAttributes<HTMLDivElement> {
+  columns: FooterColumn[];
+  /** Left text of the bottom bar. */
+  copyright?: ReactNode;
+  /** Right text of the bottom bar. */
+  credit?: ReactNode;
+}
+
+/** `.oc-block-footer`: multi-column site footer. */
+export const BlockFooter = forwardRef<HTMLDivElement, BlockFooterProps>(function BlockFooter(
+  { columns, copyright, credit, className, ...rest },
+  ref,
+) {
+  return (
+    <div ref={ref} className={cx("oc-block-footer", className)} {...rest}>
+      <div className="oc-block-footer-grid">
+        {columns.map((col, i) => (
+          <div className="oc-block-footer-col" key={i}>
+            <h4>{col.title}</h4>
+            <ul>
+              {col.links.map((l, j) => (
+                <li key={j}><a href={l.href}>{l.label}</a></li>
+              ))}
+            </ul>
+          </div>
+        ))}
+      </div>
+      {(copyright != null || credit != null) && (
+        <div className="oc-block-footer-bottom">
+          <span>{copyright}</span>
+          <span>{credit}</span>
+        </div>
+      )}
+    </div>
+  );
+});

package/src/blocks/BlockFormPage.tsx

@@ -1,26 +1,26 @@
-import { forwardRef } from "react";
-import type { FormHTMLAttributes, HTMLAttributes, ReactNode } from "react";
-import { cx } from "../utils";
-
-export interface BlockFormPageProps extends FormHTMLAttributes<HTMLFormElement> {
-  /** Sticky action bar content (cancel + save buttons). */
-  actions?: ReactNode;
-}
-
-/** `form.oc-block-formpage`: collapsible sections (children) with a sticky action bar. */
-export const BlockFormPage = forwardRef<HTMLFormElement, BlockFormPageProps>(function BlockFormPage(
-  { actions, className, children, ...rest },
-  ref,
-) {
-  return (
-    <form ref={ref} className={cx("oc-block-formpage", className)} {...rest}>
-      {children}
-      {actions != null && <div className="oc-block-formpage-actions">{actions}</div>}
-    </form>
-  );
-});
-
-/** `.oc-block-formpage-grid`: two-column field grid from 40rem. */
-export function BlockFormPageGrid({ className, ...rest }: HTMLAttributes<HTMLDivElement>) {
-  return <div className={cx("oc-block-formpage-grid", className)} {...rest} />;
-}
+import { forwardRef } from "react";
+import type { FormHTMLAttributes, HTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+
+export interface BlockFormPageProps extends FormHTMLAttributes<HTMLFormElement> {
+  /** Sticky action bar content (cancel + save buttons). */
+  actions?: ReactNode;
+}
+
+/** `form.oc-block-formpage`: collapsible sections (children) with a sticky action bar. */
+export const BlockFormPage = forwardRef<HTMLFormElement, BlockFormPageProps>(function BlockFormPage(
+  { actions, className, children, ...rest },
+  ref,
+) {
+  return (
+    <form ref={ref} className={cx("oc-block-formpage", className)} {...rest}>
+      {children}
+      {actions != null && <div className="oc-block-formpage-actions">{actions}</div>}
+    </form>
+  );
+});
+
+/** `.oc-block-formpage-grid`: two-column field grid from 40rem. */
+export function BlockFormPageGrid({ className, ...rest }: HTMLAttributes<HTMLDivElement>) {
+  return <div className={cx("oc-block-formpage-grid", className)} {...rest} />;
+}

package/src/blocks/BlockHero.tsx

@@ -1,27 +1,27 @@
-import { forwardRef } from "react";
-import type { HTMLAttributes, ReactNode } from "react";
-import { cx } from "../utils";
-
-export interface BlockHeroProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
-  /** Small badge above the headline. */
-  badge?: ReactNode;
-  title: ReactNode;
-  description?: ReactNode;
-  /** Buttons row (`oc-block-hero-actions`). */
-  actions?: ReactNode;
-}
-
-/** `.oc-block-hero`: centered hero with badge, headline, text and actions. */
-export const BlockHero = forwardRef<HTMLDivElement, BlockHeroProps>(function BlockHero(
-  { badge, title, description, actions, className, ...rest },
-  ref,
-) {
-  return (
-    <div ref={ref} className={cx("oc-block-hero", className)} {...rest}>
-      {badge != null && <span className="oc-block-hero-badge">{badge}</span>}
-      <h1>{title}</h1>
-      {description != null && <p>{description}</p>}
-      {actions != null && <div className="oc-block-hero-actions">{actions}</div>}
-    </div>
-  );
-});
+import { forwardRef } from "react";
+import type { HTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+
+export interface BlockHeroProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+  /** Small badge above the headline. */
+  badge?: ReactNode;
+  title: ReactNode;
+  description?: ReactNode;
+  /** Buttons row (`oc-block-hero-actions`). */
+  actions?: ReactNode;
+}
+
+/** `.oc-block-hero`: centered hero with badge, headline, text and actions. */
+export const BlockHero = forwardRef<HTMLDivElement, BlockHeroProps>(function BlockHero(
+  { badge, title, description, actions, className, ...rest },
+  ref,
+) {
+  return (
+    <div ref={ref} className={cx("oc-block-hero", className)} {...rest}>
+      {badge != null && <span className="oc-block-hero-badge">{badge}</span>}
+      <h1>{title}</h1>
+      {description != null && <p>{description}</p>}
+      {actions != null && <div className="oc-block-hero-actions">{actions}</div>}
+    </div>
+  );
+});

package/src/blocks/BlockHeroCode.tsx

@@ -1,63 +1,63 @@
-import { forwardRef } from "react";
-import type { CSSProperties, HTMLAttributes, ReactNode } from "react";
-import { cx } from "../utils";
-
-export interface HeroTile {
-  glyph: ReactNode;
-  accent: string;
-  style: CSSProperties;
-}
-
-const DEFAULT_TILES: HeroTile[] = [
-  { glyph: "◆", accent: "green", style: { inset: "-0.5rem auto auto 8%" } },
-  { glyph: "◉", accent: "violet", style: { inset: "0 6% auto auto", animationDelay: "-2s" } },
-  { glyph: "▲", accent: "orange", style: { inset: "auto 10% -0.5rem auto", animationDelay: "-4s" } },
-];
-
-export interface BlockHeroCodeProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
-  eyebrow?: ReactNode;
-  /** Display title; wrap a word in `<span className="oc-text-gradient">`. */
-  title: ReactNode;
-  lead?: ReactNode;
-  /** Buttons (usually two `oc-btn--gradient` / `oc-btn--glass` links). */
-  actions?: ReactNode;
-  /** File name in the code window bar. */
-  codeTitle?: ReactNode;
-  /** Code shown in the window. */
-  code: string;
-  /** Floating icon tiles (accent name from the accent palette + position style). */
-  tiles?: HeroTile[];
-}
-
-/** Landing hero: eyebrow, display title, lead, buttons and a code window with floating icon tiles. */
-export const BlockHeroCode = forwardRef<HTMLElement, BlockHeroCodeProps>(function BlockHeroCode(
-  { eyebrow, title, lead, actions, codeTitle, code, tiles = DEFAULT_TILES, className, ...rest },
-  ref,
-) {
-  return (
-    <section ref={ref} className={cx("oc-section-pad", className)} {...rest}>
-      <div className="oc-container oc-split">
-        <div>
-          {eyebrow != null && <p className="oc-eyebrow">{eyebrow}</p>}
-          <h1 className="oc-display">{title}</h1>
-          {lead != null && <p className="oc-lead">{lead}</p>}
-          {actions != null && <div className="flex flex-wrap gap-1 mt-2">{actions}</div>}
-        </div>
-        <div className="relative p-2">
-          {tiles.map((tile, i) => (
-            <span key={i} className={`oc-icon-tile oc-icon-tile--float oc-accent--${tile.accent} absolute`} style={tile.style} aria-hidden="true">
-              {tile.glyph}
-            </span>
-          ))}
-          <div className="oc-code-window">
-            <div className="oc-code-window__bar">
-              <i /><i /><i />
-              {codeTitle != null && <span className="oc-code-window__title">{codeTitle}</span>}
-            </div>
-            <pre className="oc-code-window__body">{code}</pre>
-          </div>
-        </div>
-      </div>
-    </section>
-  );
-});
+import { forwardRef } from "react";
+import type { CSSProperties, HTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+
+export interface HeroTile {
+  glyph: ReactNode;
+  accent: string;
+  style: CSSProperties;
+}
+
+const DEFAULT_TILES: HeroTile[] = [
+  { glyph: "◆", accent: "green", style: { inset: "-0.5rem auto auto 8%" } },
+  { glyph: "◉", accent: "violet", style: { inset: "0 6% auto auto", animationDelay: "-2s" } },
+  { glyph: "▲", accent: "orange", style: { inset: "auto 10% -0.5rem auto", animationDelay: "-4s" } },
+];
+
+export interface BlockHeroCodeProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
+  eyebrow?: ReactNode;
+  /** Display title; wrap a word in `<span className="oc-text-gradient">`. */
+  title: ReactNode;
+  lead?: ReactNode;
+  /** Buttons (usually two `oc-btn--gradient` / `oc-btn--glass` links). */
+  actions?: ReactNode;
+  /** File name in the code window bar. */
+  codeTitle?: ReactNode;
+  /** Code shown in the window. */
+  code: string;
+  /** Floating icon tiles (accent name from the accent palette + position style). */
+  tiles?: HeroTile[];
+}
+
+/** Landing hero: eyebrow, display title, lead, buttons and a code window with floating icon tiles. */
+export const BlockHeroCode = forwardRef<HTMLElement, BlockHeroCodeProps>(function BlockHeroCode(
+  { eyebrow, title, lead, actions, codeTitle, code, tiles = DEFAULT_TILES, className, ...rest },
+  ref,
+) {
+  return (
+    <section ref={ref} className={cx("oc-section-pad", className)} {...rest}>
+      <div className="oc-container oc-split">
+        <div>
+          {eyebrow != null && <p className="oc-eyebrow">{eyebrow}</p>}
+          <h1 className="oc-display">{title}</h1>
+          {lead != null && <p className="oc-lead">{lead}</p>}
+          {actions != null && <div className="flex flex-wrap gap-1 mt-2">{actions}</div>}
+        </div>
+        <div className="relative p-2">
+          {tiles.map((tile, i) => (
+            <span key={i} className={`oc-icon-tile oc-icon-tile--float oc-accent--${tile.accent} absolute`} style={tile.style} aria-hidden="true">
+              {tile.glyph}
+            </span>
+          ))}
+          <div className="oc-code-window">
+            <div className="oc-code-window__bar">
+              <i /><i /><i />
+              {codeTitle != null && <span className="oc-code-window__title">{codeTitle}</span>}
+            </div>
+            <pre className="oc-code-window__body">{code}</pre>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+});