@rizom/ui 0.2.0-alpha.36

package/src/Section.tsx

@@ -0,0 +1,22 @@
+import type { JSX, ComponentChildren } from "preact";
+import { cn } from "./cn";
+
+export interface SectionProps {
+  id?: string;
+  className?: string;
+  children?: ComponentChildren;
+}
+
+export const GUTTER = "px-6 md:px-10 xl:px-20";
+
+const BASE = `${GUTTER} relative z-[1]`;
+
+export const Section = ({
+  id,
+  className,
+  children,
+}: SectionProps): JSX.Element => (
+  <section id={id} className={cn(BASE, className)}>
+    {children}
+  </section>
+);

package/src/SideNav.tsx

@@ -0,0 +1,22 @@
+import type { JSX } from "preact";
+import type { RizomSideNavItem } from "./types";
+
+interface SideNavProps {
+  items: RizomSideNavItem[];
+}
+
+export const SideNav = ({ items }: SideNavProps): JSX.Element => (
+  <aside
+    aria-hidden="true"
+    className="fixed right-8 top-1/2 z-[90] hidden -translate-y-1/2 flex-col gap-[18px] px-2 py-4 xl:flex"
+  >
+    {items.map((dot) => (
+      <a
+        key={dot.href}
+        href={dot.href}
+        className="side-nav-dot"
+        data-label={dot.label}
+      />
+    ))}
+  </aside>
+);

package/src/cn.ts

@@ -0,0 +1,35 @@
+import { clsx, type ClassValue } from "clsx";
+import { extendTailwindMerge } from "tailwind-merge";
+
+const twMerge = extendTailwindMerge({
+  extend: {
+    classGroups: {
+      "font-size": [
+        {
+          text: [
+            "display-2xl",
+            "display-xl",
+            "display-lg",
+            "display-md",
+            "display-sm",
+            "heading-lg",
+            "heading-md",
+            "heading-sm",
+            "body-xl",
+            "body-lg",
+            "body-md",
+            "body-sm",
+            "body-xs",
+            "label-md",
+            "label-sm",
+            "label-xs",
+          ],
+        },
+      ],
+    },
+  },
+});
+
+export function cn(...inputs: ClassValue[]): string {
+  return twMerge(clsx(inputs));
+}

package/src/frame.tsx

@@ -0,0 +1,26 @@
+import type { JSX, ComponentChildren } from "preact";
+
+export interface RizomFrameProps {
+  children?: ComponentChildren;
+}
+
+/**
+ * Shared Rizom page frame.
+ *
+ * Owns only the full-page canvas background and the centered page
+ * container. Wrapper sites own their actual chrome/layout composition.
+ */
+export const RizomFrame = ({ children }: RizomFrameProps): JSX.Element => (
+  <>
+    <div
+      id="bgCanvasWrap"
+      className="rizom-frame-canvas-wrap fixed top-0 left-0 w-full h-full pointer-events-none"
+    >
+      <canvas id="heroCanvas" className="w-full h-full block" />
+    </div>
+
+    <div className="max-w-[1440px] mx-auto relative overflow-x-clip">
+      {children}
+    </div>
+  </>
+);

package/src/highlighted-text.tsx

@@ -0,0 +1,45 @@
+import { Fragment, type JSX } from "preact";
+
+const EMPHASIS_PATTERN = /(\*[^*]+\*)/;
+
+/**
+ * Render a content string with two lightweight markup conventions:
+ *
+ * - `\n` in the string produces a `<br />` (for multi-line headlines)
+ * - Any `*...*` run is wrapped in a `<span>` carrying `highlightClass`
+ *
+ * Authors write the phrase as one natural string in markdown content;
+ * the renderer does the structural split. Highlight styling is passed
+ * per-brand (rizom.ai uses accent+midline, rizom.work uses
+ * italic+accent) so each brand owns its own emphasis treatment while
+ * the parsing/structure is shared.
+ */
+export function renderHighlightedText(
+  text: string,
+  highlightClass: string,
+): JSX.Element {
+  const lines = text.split("\n");
+  return (
+    <Fragment>
+      {lines.map((line, lineIdx) => (
+        <Fragment key={lineIdx}>
+          {lineIdx > 0 && <br />}
+          {line.split(EMPHASIS_PATTERN).map((part, partIdx) => {
+            if (
+              part.length >= 3 &&
+              part.startsWith("*") &&
+              part.endsWith("*")
+            ) {
+              return (
+                <span key={partIdx} className={highlightClass}>
+                  {part.slice(1, -1)}
+                </span>
+              );
+            }
+            return <Fragment key={partIdx}>{part}</Fragment>;
+          })}
+        </Fragment>
+      ))}
+    </Fragment>
+  );
+}

package/src/index.ts

@@ -0,0 +1,33 @@
+export { Badge } from "./Badge";
+export type { BadgeProps } from "./Badge";
+
+export { Button } from "./Button";
+export type { ButtonProps, ButtonSize, ButtonVariant } from "./Button";
+
+export { Divider } from "./Divider";
+export type { DividerProps } from "./Divider";
+
+export { Footer } from "./Footer";
+
+export { Header } from "./Header";
+
+export { ProductCard } from "./ProductCard";
+
+export { RizomFrame } from "./frame";
+export type { RizomFrameProps } from "./frame";
+
+export { Section, GUTTER } from "./Section";
+export type { SectionProps } from "./Section";
+
+export { SideNav } from "./SideNav";
+
+export { renderHighlightedText } from "./highlighted-text";
+
+export type {
+  ProductCardContent,
+  ProductVariant,
+  RizomBrandSuffix,
+  RizomFooterTagline,
+  RizomLink,
+  RizomSideNavItem,
+} from "./types";

package/src/types.ts

@@ -0,0 +1,29 @@
+export type RizomBrandSuffix = "ai" | "foundation" | "work";
+
+export interface RizomLink {
+  href: string;
+  label: string;
+}
+
+export interface RizomSideNavItem {
+  href: string;
+  label: string;
+}
+
+export interface RizomFooterTagline {
+  prefix?: string;
+  link: RizomLink;
+  suffix?: string;
+}
+
+export type ProductVariant = "rover" | "relay" | "ranger";
+
+export interface ProductCardContent {
+  variant: ProductVariant;
+  label: string;
+  badge: string;
+  headline: string;
+  description: string;
+  tagline?: string[];
+  tags: string[];
+}