@birdycom/omniaui-react 0.11.0 → 0.11.1

package/src/blocks/BlockHeroOrbit.tsx

@@ -1,73 +1,73 @@
-// File: packages/react/src/blocks/BlockHeroOrbit.tsx | Map: types + defaults -> BlockHeroOrbit (copy -> visual: ring with marks + center)
-import { forwardRef } from "react";
-import type { CSSProperties, HTMLAttributes, ReactNode } from "react";
-import { cx } from "../utils";
-
-export interface HeroOrbitMark {
-  glyph: ReactNode;
-  /** Accent preset (green, violet, orange, cyan, red, yellow, blue). */
-  accent: string;
-}
-
-const DEFAULT_MARKS: HeroOrbitMark[] = [
-  { glyph: "◆", accent: "green" },
-  { glyph: "◉", accent: "violet" },
-  { glyph: "▲", accent: "orange" },
-  { glyph: "★", accent: "cyan" },
-  { glyph: "♥", accent: "red" },
-  { glyph: "☀", accent: "yellow" },
-];
-
-export interface BlockHeroOrbitProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
-  eyebrow?: ReactNode;
-  /** Display title; wrap a word in `<span className="oc-text-gradient">`. */
-  title: ReactNode;
-  lead?: ReactNode;
-  actions?: ReactNode;
-  /** Marks on the ring; they are spread evenly. */
-  marks?: HeroOrbitMark[];
-  codeTitle?: ReactNode;
-  code?: string;
-  /** Replaces the code window in the center. Give it className="oc-block-orbit-center". */
-  center?: ReactNode;
-  /** One turn, e.g. "30s" (default 60s). */
-  duration?: string;
-}
-
-/** Hero with a code window and product marks that orbit around it. */
-export const BlockHeroOrbit = forwardRef<HTMLElement, BlockHeroOrbitProps>(function BlockHeroOrbit(
-  { eyebrow, title, lead, actions, marks = DEFAULT_MARKS, codeTitle, code = "", center, duration, className, ...rest },
-  ref,
-) {
-  const visualStyle = duration ? ({ "--oc-orbit-duration": duration } as CSSProperties) : undefined;
-  return (
-    <section ref={ref} className={cx("oc-block-orbit 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="oc-block-orbit-visual" style={visualStyle}>
-          <div className="oc-block-orbit-ring" aria-hidden="true">
-            {marks.map((mark, i) => (
-              <span key={i} className="oc-block-orbit-mark" style={{ "--oc-orbit-angle": `${(360 / marks.length) * i}deg` } as CSSProperties}>
-                <span className={`oc-product-mark oc-product-mark--sm oc-accent--${mark.accent}`}>{mark.glyph}</span>
-              </span>
-            ))}
-          </div>
-          {center ?? (
-            <div className="oc-code-window oc-block-orbit-center">
-              <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>
-  );
-});
+// File: packages/react/src/blocks/BlockHeroOrbit.tsx | Map: types + defaults -> BlockHeroOrbit (copy -> visual: ring with marks + center)
+import { forwardRef } from "react";
+import type { CSSProperties, HTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+
+export interface HeroOrbitMark {
+  glyph: ReactNode;
+  /** Accent preset (green, violet, orange, cyan, red, yellow, blue). */
+  accent: string;
+}
+
+const DEFAULT_MARKS: HeroOrbitMark[] = [
+  { glyph: "◆", accent: "green" },
+  { glyph: "◉", accent: "violet" },
+  { glyph: "▲", accent: "orange" },
+  { glyph: "★", accent: "cyan" },
+  { glyph: "♥", accent: "red" },
+  { glyph: "☀", accent: "yellow" },
+];
+
+export interface BlockHeroOrbitProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
+  eyebrow?: ReactNode;
+  /** Display title; wrap a word in `<span className="oc-text-gradient">`. */
+  title: ReactNode;
+  lead?: ReactNode;
+  actions?: ReactNode;
+  /** Marks on the ring; they are spread evenly. */
+  marks?: HeroOrbitMark[];
+  codeTitle?: ReactNode;
+  code?: string;
+  /** Replaces the code window in the center. Give it className="oc-block-orbit-center". */
+  center?: ReactNode;
+  /** One turn, e.g. "30s" (default 60s). */
+  duration?: string;
+}
+
+/** Hero with a code window and product marks that orbit around it. */
+export const BlockHeroOrbit = forwardRef<HTMLElement, BlockHeroOrbitProps>(function BlockHeroOrbit(
+  { eyebrow, title, lead, actions, marks = DEFAULT_MARKS, codeTitle, code = "", center, duration, className, ...rest },
+  ref,
+) {
+  const visualStyle = duration ? ({ "--oc-orbit-duration": duration } as CSSProperties) : undefined;
+  return (
+    <section ref={ref} className={cx("oc-block-orbit 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="oc-block-orbit-visual" style={visualStyle}>
+          <div className="oc-block-orbit-ring" aria-hidden="true">
+            {marks.map((mark, i) => (
+              <span key={i} className="oc-block-orbit-mark" style={{ "--oc-orbit-angle": `${(360 / marks.length) * i}deg` } as CSSProperties}>
+                <span className={`oc-product-mark oc-product-mark--sm oc-accent--${mark.accent}`}>{mark.glyph}</span>
+              </span>
+            ))}
+          </div>
+          {center ?? (
+            <div className="oc-code-window oc-block-orbit-center">
+              <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>
+  );
+});

package/src/blocks/BlockHeroSplit.tsx

@@ -1,28 +1,28 @@
-import { forwardRef } from "react";
-import type { HTMLAttributes, ReactNode } from "react";
-import { cx } from "../utils";
-
-export interface BlockHeroSplitProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
-  title: ReactNode;
-  description?: ReactNode;
-  actions?: ReactNode;
-  /** Right column (image, screenshot, placeholder). */
-  visual?: ReactNode;
-}
-
-/** `.oc-block-hero-split`: text on the left, visual on the right. */
-export const BlockHeroSplit = forwardRef<HTMLDivElement, BlockHeroSplitProps>(function BlockHeroSplit(
-  { title, description, actions, visual, className, ...rest },
-  ref,
-) {
-  return (
-    <div ref={ref} className={cx("oc-block-hero-split", className)} {...rest}>
-      <div>
-        <h1>{title}</h1>
-        {description != null && <p>{description}</p>}
-        {actions != null && <div className="oc-block-hero-actions justify-start">{actions}</div>}
-      </div>
-      <div className="oc-block-hero-visual">{visual}</div>
-    </div>
-  );
-});
+import { forwardRef } from "react";
+import type { HTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+
+export interface BlockHeroSplitProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+  title: ReactNode;
+  description?: ReactNode;
+  actions?: ReactNode;
+  /** Right column (image, screenshot, placeholder). */
+  visual?: ReactNode;
+}
+
+/** `.oc-block-hero-split`: text on the left, visual on the right. */
+export const BlockHeroSplit = forwardRef<HTMLDivElement, BlockHeroSplitProps>(function BlockHeroSplit(
+  { title, description, actions, visual, className, ...rest },
+  ref,
+) {
+  return (
+    <div ref={ref} className={cx("oc-block-hero-split", className)} {...rest}>
+      <div>
+        <h1>{title}</h1>
+        {description != null && <p>{description}</p>}
+        {actions != null && <div className="oc-block-hero-actions justify-start">{actions}</div>}
+      </div>
+      <div className="oc-block-hero-visual">{visual}</div>
+    </div>
+  );
+});

package/src/blocks/BlockModuleHeader.tsx

@@ -1,34 +1,34 @@
-import { forwardRef } from "react";
-import type { HTMLAttributes, ReactNode } from "react";
-import { cx } from "../utils";
-
-export interface BlockModuleHeaderProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
-  /** Inline SVG in the icon tile. */
-  icon?: ReactNode;
-  title: ReactNode;
-  intro?: ReactNode;
-  /** Badges under the title. */
-  meta?: ReactNode;
-  /** Buttons below the band (back link, primary action). */
-  actions?: ReactNode;
-}
-
-/** `.oc-block-modulehead`: page header with icon tile, title, intro, meta badges and actions. */
-export const BlockModuleHeader = forwardRef<HTMLElement, BlockModuleHeaderProps>(function BlockModuleHeader(
-  { icon, title, intro, meta, actions, className, ...rest },
-  ref,
-) {
-  return (
-    <header ref={ref} className={cx("oc-block-modulehead", className)} {...rest}>
-      <div className="oc-block-modulehead-band">
-        {icon != null && <span className="oc-block-modulehead-icon" aria-hidden="true">{icon}</span>}
-        <div className="oc-block-modulehead-body">
-          <h1 className="oc-block-modulehead-title">{title}</h1>
-          {intro != null && <p className="oc-block-modulehead-intro">{intro}</p>}
-          {meta != null && <div className="oc-block-modulehead-meta">{meta}</div>}
-        </div>
-      </div>
-      {actions != null && <div className="oc-block-modulehead-actions">{actions}</div>}
-    </header>
-  );
-});
+import { forwardRef } from "react";
+import type { HTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+
+export interface BlockModuleHeaderProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
+  /** Inline SVG in the icon tile. */
+  icon?: ReactNode;
+  title: ReactNode;
+  intro?: ReactNode;
+  /** Badges under the title. */
+  meta?: ReactNode;
+  /** Buttons below the band (back link, primary action). */
+  actions?: ReactNode;
+}
+
+/** `.oc-block-modulehead`: page header with icon tile, title, intro, meta badges and actions. */
+export const BlockModuleHeader = forwardRef<HTMLElement, BlockModuleHeaderProps>(function BlockModuleHeader(
+  { icon, title, intro, meta, actions, className, ...rest },
+  ref,
+) {
+  return (
+    <header ref={ref} className={cx("oc-block-modulehead", className)} {...rest}>
+      <div className="oc-block-modulehead-band">
+        {icon != null && <span className="oc-block-modulehead-icon" aria-hidden="true">{icon}</span>}
+        <div className="oc-block-modulehead-body">
+          <h1 className="oc-block-modulehead-title">{title}</h1>
+          {intro != null && <p className="oc-block-modulehead-intro">{intro}</p>}
+          {meta != null && <div className="oc-block-modulehead-meta">{meta}</div>}
+        </div>
+      </div>
+      {actions != null && <div className="oc-block-modulehead-actions">{actions}</div>}
+    </header>
+  );
+});

package/src/blocks/BlockPageHero.tsx

@@ -1,25 +1,25 @@
-import { forwardRef } from "react";
-import type { HTMLAttributes, ReactNode } from "react";
-import { cx } from "../utils";
-
-export interface BlockPageHeroProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
-  eyebrow?: ReactNode;
-  title: ReactNode;
-  description?: ReactNode;
-  actions?: ReactNode;
-}
-
-/** `.oc-hero`: page header with eyebrow, title, text and actions. */
-export const BlockPageHero = forwardRef<HTMLElement, BlockPageHeroProps>(function BlockPageHero(
-  { eyebrow, title, description, actions, className, ...rest },
-  ref,
-) {
-  return (
-    <section ref={ref} className={cx("oc-hero", className)} {...rest}>
-      {eyebrow != null && <span className="oc-hero-eyebrow">{eyebrow}</span>}
-      <h1 className="oc-hero-title">{title}</h1>
-      {description != null && <p className="oc-hero-text">{description}</p>}
-      {actions != null && <div className="oc-hero-actions">{actions}</div>}
-    </section>
-  );
-});
+import { forwardRef } from "react";
+import type { HTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+
+export interface BlockPageHeroProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
+  eyebrow?: ReactNode;
+  title: ReactNode;
+  description?: ReactNode;
+  actions?: ReactNode;
+}
+
+/** `.oc-hero`: page header with eyebrow, title, text and actions. */
+export const BlockPageHero = forwardRef<HTMLElement, BlockPageHeroProps>(function BlockPageHero(
+  { eyebrow, title, description, actions, className, ...rest },
+  ref,
+) {
+  return (
+    <section ref={ref} className={cx("oc-hero", className)} {...rest}>
+      {eyebrow != null && <span className="oc-hero-eyebrow">{eyebrow}</span>}
+      <h1 className="oc-hero-title">{title}</h1>
+      {description != null && <p className="oc-hero-text">{description}</p>}
+      {actions != null && <div className="oc-hero-actions">{actions}</div>}
+    </section>
+  );
+});

package/src/blocks/BlockPortfolioGrid.tsx

@@ -1,50 +1,50 @@
-// File: packages/react/src/blocks/BlockPortfolioGrid.tsx | Map: types -> BlockPortfolioGrid (head (title, lead, link) -> grid of ProjectCard)
-import { forwardRef, useId } from "react";
-import type { HTMLAttributes, ReactNode } from "react";
-import { cx } from "../utils";
-import { ProjectCard } from "../components/ProjectCard";
-import type { ProjectCardProps } from "../components/ProjectCard";
-
-export type PortfolioGridProject = ProjectCardProps & {
-  /** Accent preset for the card (green, violet, ...). */
-  accent?: string;
-};
-
-export interface BlockPortfolioGridProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
-  eyebrow?: ReactNode;
-  /** Display title; wrap a word in `<span className="oc-text-gradient">`. */
-  title: ReactNode;
-  lead?: ReactNode;
-  /** Link at the right of the head, e.g. <LinkArrow href="/work">All projects</LinkArrow>. */
-  link?: ReactNode;
-  projects: PortfolioGridProject[];
-  /** Wider cards. */
-  two?: boolean;
-}
-
-/** `.oc-block-portfolio`: heading plus a grid of project cards. */
-export const BlockPortfolioGrid = forwardRef<HTMLElement, BlockPortfolioGridProps>(function BlockPortfolioGrid(
-  { eyebrow, title, lead, link, projects, two = false, className, ...rest },
-  ref,
-) {
-  const titleId = `oc-portfolio-title-${useId().replace(/[^\w-]/g, "")}`;
-  return (
-    <section ref={ref} className={cx("oc-block-portfolio oc-section-pad", two && "oc-block-portfolio--two", className)} aria-labelledby={titleId} {...rest}>
-      <div className="oc-container">
-        <div className="oc-block-portfolio-head">
-          <div>
-            {eyebrow != null && <p className="oc-eyebrow">{eyebrow}</p>}
-            <h2 className="oc-display oc-display--md" id={titleId}>{title}</h2>
-            {lead != null && <p className="oc-block-portfolio-lead">{lead}</p>}
-          </div>
-          {link}
-        </div>
-        <div className="oc-block-portfolio-grid">
-          {projects.map(({ accent, className: cardClass, ...card }, i) => (
-            <ProjectCard key={i} className={cx(accent && `oc-accent--${accent}`, cardClass)} {...card} />
-          ))}
-        </div>
-      </div>
-    </section>
-  );
-});
+// File: packages/react/src/blocks/BlockPortfolioGrid.tsx | Map: types -> BlockPortfolioGrid (head (title, lead, link) -> grid of ProjectCard)
+import { forwardRef, useId } from "react";
+import type { HTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+import { ProjectCard } from "../components/ProjectCard";
+import type { ProjectCardProps } from "../components/ProjectCard";
+
+export type PortfolioGridProject = ProjectCardProps & {
+  /** Accent preset for the card (green, violet, ...). */
+  accent?: string;
+};
+
+export interface BlockPortfolioGridProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
+  eyebrow?: ReactNode;
+  /** Display title; wrap a word in `<span className="oc-text-gradient">`. */
+  title: ReactNode;
+  lead?: ReactNode;
+  /** Link at the right of the head, e.g. <LinkArrow href="/work">All projects</LinkArrow>. */
+  link?: ReactNode;
+  projects: PortfolioGridProject[];
+  /** Wider cards. */
+  two?: boolean;
+}
+
+/** `.oc-block-portfolio`: heading plus a grid of project cards. */
+export const BlockPortfolioGrid = forwardRef<HTMLElement, BlockPortfolioGridProps>(function BlockPortfolioGrid(
+  { eyebrow, title, lead, link, projects, two = false, className, ...rest },
+  ref,
+) {
+  const titleId = `oc-portfolio-title-${useId().replace(/[^\w-]/g, "")}`;
+  return (
+    <section ref={ref} className={cx("oc-block-portfolio oc-section-pad", two && "oc-block-portfolio--two", className)} aria-labelledby={titleId} {...rest}>
+      <div className="oc-container">
+        <div className="oc-block-portfolio-head">
+          <div>
+            {eyebrow != null && <p className="oc-eyebrow">{eyebrow}</p>}
+            <h2 className="oc-display oc-display--md" id={titleId}>{title}</h2>
+            {lead != null && <p className="oc-block-portfolio-lead">{lead}</p>}
+          </div>
+          {link}
+        </div>
+        <div className="oc-block-portfolio-grid">
+          {projects.map(({ accent, className: cardClass, ...card }, i) => (
+            <ProjectCard key={i} className={cx(accent && `oc-accent--${accent}`, cardClass)} {...card} />
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+});

package/src/blocks/BlockPricing.tsx

@@ -1,62 +1,62 @@
-import { forwardRef } from "react";
-import type { HTMLAttributes, ReactNode } from "react";
-import { cx } from "../utils";
-import { Button, ButtonLink } from "../components/Button";
-
-export interface PricingPlan {
-  name: ReactNode;
-  description?: ReactNode;
-  price: ReactNode;
-  /** e.g. `/month` */
-  period?: ReactNode;
-  features: ReactNode[];
-  /** Highlighted plan (`oc-block-pricing-card--featured`, primary button). */
-  featured?: boolean;
-  /** Button label. */
-  action: ReactNode;
-  /** Renders the action as a link when set. */
-  href?: string;
-  onAction?: () => void;
-}
-
-export interface BlockPricingProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
-  title?: ReactNode;
-  description?: ReactNode;
-  plans: PricingPlan[];
-}
-
-/** `.oc-block-pricing`: pricing cards with a featured plan. */
-export const BlockPricing = forwardRef<HTMLDivElement, BlockPricingProps>(function BlockPricing(
-  { title, description, plans, className, ...rest },
-  ref,
-) {
-  return (
-    <div ref={ref} className={cx("oc-block-pricing", className)} {...rest}>
-      {title != null && <h2>{title}</h2>}
-      {description != null && <p>{description}</p>}
-      <div className="oc-block-pricing-grid">
-        {plans.map((plan, i) => {
-          const variant = plan.featured ? "default" : "outline";
-          return (
-            <div className={cx("oc-block-pricing-card", plan.featured && "oc-block-pricing-card--featured")} key={i}>
-              <p className="oc-block-pricing-name">{plan.name}</p>
-              {plan.description != null && <p className="oc-block-pricing-desc">{plan.description}</p>}
-              <p className="oc-block-pricing-price">
-                {plan.price}
-                {plan.period != null && <> <span>{plan.period}</span></>}
-              </p>
-              <ul className="oc-block-pricing-features">
-                {plan.features.map((f, j) => <li key={j}>{f}</li>)}
-              </ul>
-              {plan.href ? (
-                <ButtonLink variant={variant} href={plan.href} style={{ width: "100%" }}>{plan.action}</ButtonLink>
-              ) : (
-                <Button variant={variant} style={{ width: "100%" }} onClick={plan.onAction}>{plan.action}</Button>
-              )}
-            </div>
-          );
-        })}
-      </div>
-    </div>
-  );
-});
+import { forwardRef } from "react";
+import type { HTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+import { Button, ButtonLink } from "../components/Button";
+
+export interface PricingPlan {
+  name: ReactNode;
+  description?: ReactNode;
+  price: ReactNode;
+  /** e.g. `/month` */
+  period?: ReactNode;
+  features: ReactNode[];
+  /** Highlighted plan (`oc-block-pricing-card--featured`, primary button). */
+  featured?: boolean;
+  /** Button label. */
+  action: ReactNode;
+  /** Renders the action as a link when set. */
+  href?: string;
+  onAction?: () => void;
+}
+
+export interface BlockPricingProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+  title?: ReactNode;
+  description?: ReactNode;
+  plans: PricingPlan[];
+}
+
+/** `.oc-block-pricing`: pricing cards with a featured plan. */
+export const BlockPricing = forwardRef<HTMLDivElement, BlockPricingProps>(function BlockPricing(
+  { title, description, plans, className, ...rest },
+  ref,
+) {
+  return (
+    <div ref={ref} className={cx("oc-block-pricing", className)} {...rest}>
+      {title != null && <h2>{title}</h2>}
+      {description != null && <p>{description}</p>}
+      <div className="oc-block-pricing-grid">
+        {plans.map((plan, i) => {
+          const variant = plan.featured ? "default" : "outline";
+          return (
+            <div className={cx("oc-block-pricing-card", plan.featured && "oc-block-pricing-card--featured")} key={i}>
+              <p className="oc-block-pricing-name">{plan.name}</p>
+              {plan.description != null && <p className="oc-block-pricing-desc">{plan.description}</p>}
+              <p className="oc-block-pricing-price">
+                {plan.price}
+                {plan.period != null && <> <span>{plan.period}</span></>}
+              </p>
+              <ul className="oc-block-pricing-features">
+                {plan.features.map((f, j) => <li key={j}>{f}</li>)}
+              </ul>
+              {plan.href ? (
+                <ButtonLink variant={variant} href={plan.href} style={{ width: "100%" }}>{plan.action}</ButtonLink>
+              ) : (
+                <Button variant={variant} style={{ width: "100%" }} onClick={plan.onAction}>{plan.action}</Button>
+              )}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+});