@birdycom/omniaui-react 0.12.1 → 0.12.3

package/manifest.json

@@ -258,6 +258,12 @@
       "file": "src/components/FormField.tsx",
       "snippet": "@birdycom/omniaui/snippets/form-field.html"
     },
+    {
+      "name": "glass",
+      "kind": "component",
+      "file": "src/components/Glass.tsx",
+      "snippet": "@birdycom/omniaui/snippets/glass.html"
+    },
     {
       "name": "greeting",
       "kind": "component",
@@ -318,12 +324,24 @@
       "file": "src/components/LinkArrow.tsx",
       "snippet": "@birdycom/omniaui/snippets/link-arrow.html"
     },
+    {
+      "name": "link-row",
+      "kind": "component",
+      "file": "src/components/LinkRow.tsx",
+      "snippet": "@birdycom/omniaui/snippets/link-row.html"
+    },
     {
       "name": "list-toolbar",
       "kind": "component",
       "file": "src/components/ListToolbar.tsx",
       "snippet": "@birdycom/omniaui/snippets/list-toolbar.html"
     },
+    {
+      "name": "live-frame",
+      "kind": "component",
+      "file": "src/components/LiveFrame.tsx",
+      "snippet": "@birdycom/omniaui/snippets/live-frame.html"
+    },
     {
       "name": "marquee",
       "kind": "component",
@@ -522,6 +540,12 @@
       "file": "src/components/StatCard.tsx",
       "snippet": "@birdycom/omniaui/snippets/stat-card.html"
     },
+    {
+      "name": "status-dot",
+      "kind": "component",
+      "file": "src/components/StatusDot.tsx",
+      "snippet": "@birdycom/omniaui/snippets/status-dot.html"
+    },
     {
       "name": "stepper",
       "kind": "component",
@@ -594,6 +618,12 @@
       "file": "src/components/Timeline.tsx",
       "snippet": "@birdycom/omniaui/snippets/timeline.html"
     },
+    {
+      "name": "titlebar",
+      "kind": "component",
+      "file": "src/components/Titlebar.tsx",
+      "snippet": "@birdycom/omniaui/snippets/titlebar.html"
+    },
     {
       "name": "toast",
       "kind": "component",
@@ -642,6 +672,12 @@
       "file": "src/components/VersionBanner.tsx",
       "snippet": "@birdycom/omniaui/snippets/version-banner.html"
     },
+    {
+      "name": "watermark",
+      "kind": "component",
+      "file": "src/components/Watermark.tsx",
+      "snippet": "@birdycom/omniaui/snippets/watermark.html"
+    },
     {
       "name": "about-timeline",
       "kind": "block",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@birdycom/omniaui-react",
-  "version": "0.12.1",
+  "version": "0.12.3",
   "description": "OmniaUI for React: typed function components and page blocks that render the exact @birdycom/omniaui and @birdycom/omniaui-blocks markup.",
   "type": "module",
   "license": "MIT",

package/src/components/Alert.tsx

@@ -8,15 +8,17 @@ export interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"
   variant?: AlertVariant;
   /** Heading (`oc-alert-title`). */
   title?: ReactNode;
+  /** Compact message under a field or a form (an error, a hint). */
+  inline?: boolean;
 }
 
 /** `<div class="oc-alert oc-alert--{variant}" role="status">`; children render inside `oc-alert-description`. */
 export const Alert = forwardRef<HTMLDivElement, AlertProps>(function Alert(
-  { variant = "info", title, children, className, role = "status", ...rest },
+  { variant = "info", title, inline, children, className, role = "status", ...rest },
   ref,
 ) {
   return (
-    <div ref={ref} role={role} className={cx("oc-alert", `oc-alert--${variant}`, className)} {...rest}>
+    <div ref={ref} role={role} className={cx("oc-alert", `oc-alert--${variant}`, inline && "oc-alert--inline", className)} {...rest}>
       {title != null && <h4 className="oc-alert-title">{title}</h4>}
       {children != null && <p className="oc-alert-description">{children}</p>}
     </div>

package/src/components/Button.tsx

@@ -14,16 +14,19 @@ interface ButtonStyleProps {
   icon?: boolean;
   /** Fully rounded pill shape. */
   pill?: boolean;
+  /** Inside running text (with variant="link"): no padding or height, the size of the text around it. */
+  inline?: boolean;
 }
 
 /** The class string of a button; reuse it on your own elements (router links etc.). */
-export function buttonClass({ variant = "default", size = "md", icon, pill, className }: ButtonStyleProps & { className?: string }) {
+export function buttonClass({ variant = "default", size = "md", icon, pill, inline, className }: ButtonStyleProps & { className?: string }) {
   return cx(
     "oc-btn",
     variant !== "default" && `oc-btn--${variant}`,
     size !== "md" && `oc-btn--${size}`,
     icon && "oc-btn--icon",
     pill && "oc-btn--pill",
+    inline && "oc-btn--inline",
     className,
   );
 }
@@ -32,18 +35,18 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, Bu
 
 /** `<button class="oc-btn oc-btn--{variant} oc-btn--{size}">` */
 export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(
-  { variant, size, icon, pill, className, ...rest },
+  { variant, size, icon, pill, inline, className, ...rest },
   ref,
 ) {
-  return <button ref={ref} className={buttonClass({ variant, size, icon, pill, className })} {...rest} />;
+  return <button ref={ref} className={buttonClass({ variant, size, icon, pill, inline, className })} {...rest} />;
 });
 
 export interface ButtonLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement>, ButtonStyleProps {}
 
 /** An anchor styled as a button. */
 export const ButtonLink = forwardRef<HTMLAnchorElement, ButtonLinkProps>(function ButtonLink(
-  { variant, size, icon, pill, className, ...rest },
+  { variant, size, icon, pill, inline, className, ...rest },
   ref,
 ) {
-  return <a ref={ref} className={buttonClass({ variant, size, icon, pill, className })} {...rest} />;
+  return <a ref={ref} className={buttonClass({ variant, size, icon, pill, inline, className })} {...rest} />;
 });

package/src/components/Glass.tsx

@@ -0,0 +1,29 @@
+// File: packages/react/src/components/Glass.tsx | Map: types -> Glass (sheet: --strong, --flat) -> GlassPanel (layer: --strong)
+import { forwardRef } from "react";
+import type { HTMLAttributes } from "react";
+import { cx } from "../utils";
+
+export interface GlassProps extends HTMLAttributes<HTMLElement> {
+  /** More opaque, for text-heavy content. */
+  strong?: boolean;
+  /** Desktop window where the OS draws the blur: no own blur, no drop shadow. */
+  flat?: boolean;
+  as?: "div" | "section" | "aside" | "article" | "main";
+}
+
+/** `.oc-glass`: see-through sheet with a light top edge; .oc-card inside becomes a glass panel. */
+export const Glass = forwardRef<HTMLElement, GlassProps>(function Glass(
+  { strong, flat, as: Tag = "div", className, ...rest },
+  ref,
+) {
+  return <Tag ref={ref as React.Ref<HTMLDivElement>} className={cx("oc-glass", strong && "oc-glass--strong", flat && "oc-glass--flat", className)} {...rest} />;
+});
+
+export interface GlassPanelProps extends HTMLAttributes<HTMLDivElement> {
+  strong?: boolean;
+}
+
+/** `.oc-glass-panel`: a lighter layer inside a glass sheet. */
+export const GlassPanel = forwardRef<HTMLDivElement, GlassPanelProps>(function GlassPanel({ strong, className, ...rest }, ref) {
+  return <div ref={ref} className={cx("oc-glass-panel", strong && "oc-glass-panel--strong", className)} {...rest} />;
+});

package/src/components/LinkRow.tsx

@@ -0,0 +1,34 @@
+// File: packages/react/src/components/LinkRow.tsx | Map: types -> LinkRow (ul.oc-link-row -> li > a per link, or children)
+import { forwardRef } from "react";
+import type { HTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+
+export interface LinkRowLink {
+  href: string;
+  label: ReactNode;
+}
+
+export interface LinkRowProps extends HTMLAttributes<HTMLUListElement> {
+  /** The links; external ones get an arrow and github.com links the GitHub mark (CSS, by the href). Or pass <li> children. */
+  links?: LinkRowLink[];
+  tone?: "default" | "accent" | "muted";
+  size?: "sm" | "default" | "lg";
+  children?: ReactNode;
+}
+
+const external = (href: string) => /^https?:\/\//.test(href);
+
+/** `<ul class="oc-link-row">`: a row of links under a card, icons by the href. */
+export const LinkRow = forwardRef<HTMLUListElement, LinkRowProps>(function LinkRow(
+  { links, tone = "default", size = "default", className, children, ...rest },
+  ref,
+) {
+  const classes = cx("oc-link-row", tone !== "default" && `oc-link-row--${tone}`, size !== "default" && `oc-link-row--${size}`, className);
+  return (
+    <ul ref={ref} className={classes} {...rest}>
+      {links
+        ? links.map((l, i) => <li key={i}><a href={l.href} rel={external(l.href) ? "noopener" : undefined}>{l.label}</a></li>)
+        : children}
+    </ul>
+  );
+});

package/src/components/LiveFrame.tsx

@@ -0,0 +1,37 @@
+// File: packages/react/src/components/LiveFrame.tsx | Map: types -> LiveFrame (div.oc-live-frame + virtual size -> iframe or children)
+import { forwardRef } from "react";
+import type { CSSProperties, HTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+
+export interface LiveFrameProps extends HTMLAttributes<HTMLDivElement> {
+  /** Page to show in an iframe. Leave empty and pass children (an <img>, <video>, or .oc-live-frame__content). */
+  src?: string;
+  /** Accessible name of the iframe. */
+  title?: string;
+  /** Virtual size in px: the page is laid out at this size and scaled to the frame width. */
+  width?: number;
+  height?: number;
+  /** A picture of a page: clicks and scrolling pass through. */
+  static?: boolean;
+  /** Put the frame in the view slot of an OmniaUI browser frame (adds .oc-browser-frame__view). */
+  inBrowserFrame?: boolean;
+  children?: ReactNode;
+}
+
+/** `.oc-live-frame`: a live page at a virtual size, scaled down to the frame width in pure CSS. */
+export const LiveFrame = forwardRef<HTMLDivElement, LiveFrameProps>(function LiveFrame(
+  { src, title = "", width = 1280, height = 720, static: isStatic = false, inBrowserFrame = false, className, style, children, ...rest },
+  ref,
+) {
+  const size = { "--oc-live-w": width, "--oc-live-h": height } as CSSProperties;
+  return (
+    <div
+      ref={ref}
+      className={cx(inBrowserFrame && "oc-browser-frame__view", "oc-live-frame", isStatic && "oc-live-frame--static", className)}
+      style={{ ...size, ...style }}
+      {...rest}
+    >
+      {src ? <iframe src={src} title={title} loading="lazy" scrolling="no" tabIndex={isStatic ? -1 : undefined} /> : children}
+    </div>
+  );
+});

package/src/components/Progress.tsx

@@ -6,27 +6,44 @@ export interface ProgressProps extends HTMLAttributes<HTMLDivElement> {
   value: number;
   /** Maximum (default 100). */
   max?: number;
-  /** Bar color. */
+  /** Bar color. Wins over `levels`. */
   variant?: "default" | "success" | "warning" | "danger";
+  /** Height: 4 px (xs), 6 px (sm) or 8 px (default). */
+  size?: "xs" | "sm" | "md";
+  /** Light top edge and a soft glow in the bar color. */
+  glow?: boolean;
+  /** Color by the value: warning from 70 %, danger from 90 %; or your own [warning, danger] limits in percent. */
+  levels?: boolean | [number, number];
+  /** A target or schedule point, in the unit of `value`: an upright line on the track. */
+  marker?: number;
+}
+
+/** The bar color for `levels` at a percentage. */
+export function progressLevel(pct: number, levels: true | [number, number]): "default" | "warning" | "danger" {
+  const [warn, danger] = levels === true ? [70, 90] : levels;
+  return pct >= danger ? "danger" : pct >= warn ? "warning" : "default";
 }
 
 /** `<div class="oc-progress" role="progressbar">` with an `oc-progress-bar` sized in percent. */
 export const Progress = forwardRef<HTMLDivElement, ProgressProps>(function Progress(
-  { value, max = 100, variant = "default", className, ...rest },
+  { value, max = 100, variant = "default", size = "md", glow, levels, marker, className, ...rest },
   ref,
 ) {
-  const pct = max > 0 ? Math.min(100, Math.max(0, Math.round((value / max) * 100))) : 0;
+  const percent = (v: number) => (max > 0 ? Math.min(100, Math.max(0, (v / max) * 100)) : 0);
+  const pct = Math.round(percent(value));
+  const tone = variant === "default" && levels ? progressLevel(pct, levels) : variant;
   return (
     <div
       ref={ref}
-      className={cx("oc-progress", className)}
+      className={cx("oc-progress", size !== "md" && `oc-progress--${size}`, glow && "oc-progress--glow", className)}
       role="progressbar"
       aria-valuenow={value}
       aria-valuemin={0}
       aria-valuemax={max}
       {...rest}
     >
-      <div className={cx("oc-progress-bar", variant !== "default" && `oc-progress-bar--${variant}`)} style={{ width: `${pct}%` }} />
+      <div className={cx("oc-progress-bar", tone !== "default" && `oc-progress-bar--${tone}`)} style={{ width: `${pct}%` }} />
+      {marker != null && <span className="oc-progress-marker" style={{ left: `${percent(marker)}%` }} />}
     </div>
   );
 });

package/src/components/Prose.tsx

@@ -6,8 +6,8 @@ import type { HTMLAttributes, ReactNode } from "react";
 import { cx } from "../utils";
 
 export interface ProseProps extends HTMLAttributes<HTMLElement> {
-  /** All spacing scales along. */
-  size?: "sm" | "md" | "lg";
+  /** All spacing scales along; "compact" for widgets and panels (13 px, tighter, full width). */
+  size?: "compact" | "sm" | "md" | "lg";
   /** No max width (default 68ch). */
   full?: boolean;
   as?: "article" | "div" | "section";

package/src/components/StatusDot.tsx

@@ -0,0 +1,51 @@
+// File: packages/react/src/components/StatusDot.tsx | Map: types -> StatusDot (span.oc-status-dot) -> Status (p.oc-status: dot + text + meta)
+import { forwardRef } from "react";
+import type { HTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+
+export type StatusTone = "default" | "working" | "waiting" | "done" | "error" | "idle";
+
+export interface StatusDotProps extends HTMLAttributes<HTMLSpanElement> {
+  tone?: StatusTone;
+  size?: "sm" | "md" | "lg";
+  /** Says the state when the dot stands alone (role="img"); without it the dot is aria-hidden. */
+  label?: string;
+}
+
+/** `<span class="oc-status-dot oc-status-dot--{tone}">`: a live state light; --working pulses. */
+export const StatusDot = forwardRef<HTMLSpanElement, StatusDotProps>(function StatusDot(
+  { tone = "default", size = "md", label, className, ...rest },
+  ref,
+) {
+  const a11y = label ? { role: "img", "aria-label": label } : { "aria-hidden": true };
+  return (
+    <span
+      ref={ref}
+      className={cx("oc-status-dot", tone !== "default" && `oc-status-dot--${tone}`, size !== "md" && `oc-status-dot--${size}`, className)}
+      {...a11y}
+      {...rest}
+    />
+  );
+});
+
+export interface StatusProps extends HTMLAttributes<HTMLParagraphElement> {
+  tone?: StatusTone;
+  /** Right-aligned extra (a time, a count) in tabular numbers. */
+  meta?: ReactNode;
+  /** The state in words; cuts off with … on one line. */
+  children?: ReactNode;
+}
+
+/** `<p class="oc-status">`: dot + one line of state text + optional meta. */
+export const Status = forwardRef<HTMLParagraphElement, StatusProps>(function Status(
+  { tone = "default", meta, className, children, ...rest },
+  ref,
+) {
+  return (
+    <p ref={ref} className={cx("oc-status", className)} {...rest}>
+      <StatusDot tone={tone} />
+      <span className="oc-status__text">{children}</span>
+      {meta != null && <span className="oc-status__meta">{meta}</span>}
+    </p>
+  );
+});

package/src/components/Titlebar.tsx

@@ -0,0 +1,61 @@
+// File: packages/react/src/components/Titlebar.tsx
+// Map: types -> TitlebarWindow (column, shared scroll timeline) -> Titlebar (main: icon, title, subtitle | actions: children)
+//      -> TitlebarButton (icon button, --close) -> TitlebarBody (scrolls; the bar gets its hairline)
+import { forwardRef } from "react";
+import type { ButtonHTMLAttributes, HTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+
+/** `.oc-titlebar-window`: wraps Titlebar + TitlebarBody so the bar sees the body scroll. */
+export const TitlebarWindow = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(function TitlebarWindow({ className, ...rest }, ref) {
+  return <div ref={ref} className={cx("oc-titlebar-window", className)} {...rest} />;
+});
+
+export interface TitlebarProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
+  title?: ReactNode;
+  /** Muted text after a ·, cuts off with …. */
+  subtitle?: ReactNode;
+  /** An app icon or logo before the title. */
+  icon?: ReactNode;
+  /** Hairline all the time (no scrolling body). */
+  bordered?: boolean;
+  size?: "sm" | "md";
+  /** The action buttons (TitlebarButton). */
+  children?: ReactNode;
+}
+
+/** `<header class="oc-titlebar">`: drag area of a frameless window; the buttons stay clickable. */
+export const Titlebar = forwardRef<HTMLElement, TitlebarProps>(function Titlebar(
+  { title, subtitle, icon, bordered, size = "md", className, children, ...rest },
+  ref,
+) {
+  return (
+    <header ref={ref} className={cx("oc-titlebar", bordered && "oc-titlebar--bordered", size === "sm" && "oc-titlebar--sm", className)} {...rest}>
+      <div className="oc-titlebar__main">
+        {icon != null && <span className="oc-titlebar__icon" aria-hidden="true">{icon}</span>}
+        {title != null && <span className="oc-titlebar__title">{title}</span>}
+        {subtitle != null && <span className="oc-titlebar__subtitle">{subtitle}</span>}
+      </div>
+      {children != null && <div className="oc-titlebar__actions">{children}</div>}
+    </header>
+  );
+});
+
+export interface TitlebarButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  /** The button's name for screen readers (icon-only button). */
+  label: string;
+  /** Red on hover. */
+  close?: boolean;
+}
+
+/** `<button class="oc-titlebar__btn">`: compact icon button in the title bar. */
+export const TitlebarButton = forwardRef<HTMLButtonElement, TitlebarButtonProps>(function TitlebarButton(
+  { label, close, className, type = "button", ...rest },
+  ref,
+) {
+  return <button ref={ref} type={type} aria-label={label} title={label} className={cx("oc-titlebar__btn", close && "oc-titlebar__btn--close", className)} {...rest} />;
+});
+
+/** `.oc-titlebar-body`: the part of the window that scrolls. */
+export const TitlebarBody = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(function TitlebarBody({ className, ...rest }, ref) {
+  return <div ref={ref} className={cx("oc-titlebar-body", className)} {...rest} />;
+});

package/src/components/Watermark.tsx

@@ -0,0 +1,35 @@
+// File: packages/react/src/components/Watermark.tsx | Map: types -> Watermark (span.oc-watermark + modifiers, text once or tiled)
+import { forwardRef, Fragment } from "react";
+import type { HTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+
+export type WatermarkVariant = "diagonal" | "straight" | "tile" | "corner" | "corner-top";
+export type WatermarkTone = "default" | "light" | "primary" | "destructive";
+
+export interface WatermarkProps extends HTMLAttributes<HTMLSpanElement> {
+  /** The text ("Concept", "Draft"), or a logo (<img>) or icon (<svg>). */
+  text?: ReactNode;
+  variant?: WatermarkVariant;
+  tone?: WatermarkTone;
+  /** How often the text repeats with variant="tile". */
+  repeat?: number;
+  /** Turn an <img> logo into a flat gray stamp. */
+  mono?: boolean;
+}
+
+/**
+ * `<span class="oc-watermark">`: light text over its positioned parent (put it last inside an element with
+ * `className="relative"`). Click-through and aria-hidden: say "draft" in the content itself when it matters.
+ */
+export const Watermark = forwardRef<HTMLSpanElement, WatermarkProps>(function Watermark(
+  { text = "Concept", variant = "diagonal", tone = "default", repeat = 12, mono = false, className, ...rest },
+  ref,
+) {
+  const classes = cx("oc-watermark", variant !== "diagonal" && `oc-watermark--${variant}`, tone !== "default" && `oc-watermark--${tone}`, mono && "oc-watermark--mono", className);
+  const count = variant === "tile" ? Math.max(1, repeat) : 1;
+  return (
+    <span ref={ref} className={classes} aria-hidden="true" {...rest}>
+      {Array.from({ length: count }, (_, i) => (typeof text === "string" || typeof text === "number" ? <span key={i}>{text}</span> : <Fragment key={i}>{text}</Fragment>))}
+    </span>
+  );
+});

package/src/index.ts

@@ -44,6 +44,7 @@ export * from "./components/FactList";
 export * from "./components/FilterCounts";
 export * from "./components/FlipCard";
 export * from "./components/FormField";
+export * from "./components/Glass";
 export * from "./components/Greeting";
 export * from "./components/Heading";
 export * from "./components/Icon";
@@ -54,7 +55,9 @@ export * from "./components/LanguageSelect";
 export * from "./components/LauncherCard";
 export * from "./components/Lightbox";
 export * from "./components/LinkArrow";
+export * from "./components/LinkRow";
 export * from "./components/ListToolbar";
+export * from "./components/LiveFrame";
 export * from "./components/Marquee";
 export * from "./components/MediaCard";
 export * from "./components/MediaRow";
@@ -88,6 +91,7 @@ export * from "./components/SortableRow";
 export * from "./components/StackCard";
 export * from "./components/StackList";
 export * from "./components/StatCard";
+export * from "./components/StatusDot";
 export * from "./components/Stepper";
 export * from "./components/Switch";
 export * from "./components/Table";
@@ -100,6 +104,7 @@ export * from "./components/Textarea";
 export * from "./components/ThemeSwitch";
 export * from "./components/TimeInput";
 export * from "./components/Timeline";
+export * from "./components/Titlebar";
 export * from "./components/Toast";
 export * from "./components/ToggleField";
 export * from "./components/Tooltip";
@@ -108,6 +113,7 @@ export * from "./components/Tree";
 export * from "./components/UpgradeBanner";
 export * from "./components/User";
 export * from "./components/VersionBanner";
+export * from "./components/Watermark";
 export * from "./blocks/BlockAboutTimeline";
 export * from "./blocks/BlockAppHeader";
 export * from "./blocks/BlockAppShell";