@birdycom/omniaui-react 0.12.2 → 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",
@@ -534,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",
@@ -606,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",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@birdycom/omniaui-react",
-  "version": "0.12.2",
+  "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/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/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";
@@ -90,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";
@@ -102,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";