@birdycom/omniaui-react 0.11.0 → 0.11.1

package/src/components/Timeline.tsx

@@ -1,45 +1,45 @@
-// File: packages/react/src/components/Timeline.tsx | Map: types -> Timeline (ol.oc-timeline -> li.oc-timeline__item)
-import { forwardRef } from "react";
-import type { HTMLAttributes, ReactNode } from "react";
-import { cx } from "../utils";
-
-export interface TimelineEntry {
-  /** Year or date label. */
-  date: ReactNode;
-  /** Machine-readable date; renders a <time> when set. */
-  dateTime?: string;
-  title?: ReactNode;
-  text?: ReactNode;
-  /** Marks the latest entry (filled dot). */
-  current?: boolean;
-}
-
-export interface TimelineProps extends HTMLAttributes<HTMLOListElement> {
-  items: TimelineEntry[];
-  /** More space between entries. */
-  size?: "default" | "lg";
-  /** Line in the accent color. */
-  accent?: boolean;
-}
-
-/** `<ol class="oc-timeline">` with dated entries. Use `className="oc-accent--green"` for another accent. */
-export const Timeline = forwardRef<HTMLOListElement, TimelineProps>(function Timeline(
-  { items, size = "default", accent = false, className, ...rest },
-  ref,
-) {
-  return (
-    <ol ref={ref} className={cx("oc-timeline", size === "lg" && "oc-timeline--lg", accent && "oc-timeline--accent", className)} {...rest}>
-      {items.map((item, i) => (
-        <li key={i} className={cx("oc-timeline__item", item.current && "oc-timeline__item--current")}>
-          {item.dateTime ? (
-            <time className="oc-timeline__date" dateTime={item.dateTime}>{item.date}</time>
-          ) : (
-            <span className="oc-timeline__date">{item.date}</span>
-          )}
-          {item.title != null && <h3 className="oc-timeline__title">{item.title}</h3>}
-          {item.text != null && <p className="oc-timeline__text">{item.text}</p>}
-        </li>
-      ))}
-    </ol>
-  );
-});
+// File: packages/react/src/components/Timeline.tsx | Map: types -> Timeline (ol.oc-timeline -> li.oc-timeline__item)
+import { forwardRef } from "react";
+import type { HTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+
+export interface TimelineEntry {
+  /** Year or date label. */
+  date: ReactNode;
+  /** Machine-readable date; renders a <time> when set. */
+  dateTime?: string;
+  title?: ReactNode;
+  text?: ReactNode;
+  /** Marks the latest entry (filled dot). */
+  current?: boolean;
+}
+
+export interface TimelineProps extends HTMLAttributes<HTMLOListElement> {
+  items: TimelineEntry[];
+  /** More space between entries. */
+  size?: "default" | "lg";
+  /** Line in the accent color. */
+  accent?: boolean;
+}
+
+/** `<ol class="oc-timeline">` with dated entries. Use `className="oc-accent--green"` for another accent. */
+export const Timeline = forwardRef<HTMLOListElement, TimelineProps>(function Timeline(
+  { items, size = "default", accent = false, className, ...rest },
+  ref,
+) {
+  return (
+    <ol ref={ref} className={cx("oc-timeline", size === "lg" && "oc-timeline--lg", accent && "oc-timeline--accent", className)} {...rest}>
+      {items.map((item, i) => (
+        <li key={i} className={cx("oc-timeline__item", item.current && "oc-timeline__item--current")}>
+          {item.dateTime ? (
+            <time className="oc-timeline__date" dateTime={item.dateTime}>{item.date}</time>
+          ) : (
+            <span className="oc-timeline__date">{item.date}</span>
+          )}
+          {item.title != null && <h3 className="oc-timeline__title">{item.title}</h3>}
+          {item.text != null && <p className="oc-timeline__text">{item.text}</p>}
+        </li>
+      ))}
+    </ol>
+  );
+});

package/src/components/Toast.tsx

@@ -1,138 +1,138 @@
-"use client";
-
-import { createContext, forwardRef, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
-import type { HTMLAttributes, ReactNode } from "react";
-import { cx } from "../utils";
-
-export type ToastVariant = "success" | "error" | "warning" | "info";
-
-const GLYPHS: Record<ToastVariant, string> = { success: "✓", error: "!", warning: "!", info: "i" };
-
-export interface ToastProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
-  variant?: ToastVariant;
-  title: ReactNode;
-  description?: ReactNode;
-  /** Custom status glyph (defaults per variant). */
-  icon?: ReactNode;
-  /** Shows the dismiss button. */
-  onDismiss?: () => void;
-  dismissLabel?: string;
-}
-
-/** One `.oc-toast` notification (`role="alert"` for errors, `status` otherwise). */
-export const Toast = forwardRef<HTMLDivElement, ToastProps>(function Toast(
-  { variant = "info", title, description, icon, onDismiss, dismissLabel = "Dismiss", className, ...rest },
-  ref,
-) {
-  return (
-    <div ref={ref} className={cx("oc-toast", `oc-toast--${variant}`, className)} role={variant === "error" ? "alert" : "status"} {...rest}>
-      <span className="oc-toast-icon" aria-hidden="true">{icon ?? GLYPHS[variant]}</span>
-      <div className="oc-toast-body">
-        <p className="oc-toast-title">{title}</p>
-        {description != null && <p className="oc-toast-description">{description}</p>}
-      </div>
-      {onDismiss && (
-        <button className="oc-toast-close" type="button" aria-label={dismissLabel} onClick={onDismiss}>&times;</button>
-      )}
-    </div>
-  );
-});
-
-/** `.oc-toast-container` (fixed bottom right; `top` or `static` for in-flow). */
-export const ToastContainer = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement> & { top?: boolean; static?: boolean }>(function ToastContainer(
-  { top, static: isStatic, className, ...rest },
-  ref,
-) {
-  return (
-    <div
-      ref={ref}
-      className={cx("oc-toast-container", top && "oc-toast-container--top", isStatic && "oc-toast-container--static", className)}
-      {...rest}
-    />
-  );
-});
-
-export interface ToastOptions {
-  variant?: ToastVariant;
-  title: ReactNode;
-  description?: ReactNode;
-  /** Auto-dismiss after ms (default 5000). Use 0 to keep the toast until dismissed. */
-  duration?: number;
-}
-
-interface ToastEntry extends ToastOptions {
-  id: number;
-}
-
-interface ToastApi {
-  /** Queue a toast; returns its id. */
-  toast: (options: ToastOptions) => number;
-  dismiss: (id?: number) => void;
-}
-
-const ToastContext = createContext<ToastApi | null>(null);
-
-export interface ToastProviderProps {
-  children?: ReactNode;
-  /** Stack at the top instead of the bottom. */
-  top?: boolean;
-  /** Default auto-dismiss in ms (default 5000). */
-  duration?: number;
-  /** Maximum toasts shown at once (oldest are dropped; default 5). */
-  limit?: number;
-}
-
-/** Holds the toast queue and renders the fixed `.oc-toast-container`. Use `useToast()` below it. */
-export function ToastProvider({ children, top, duration = 5000, limit = 5 }: ToastProviderProps) {
-  const [items, setItems] = useState<ToastEntry[]>([]);
-  const nextId = useRef(1);
-  const timers = useRef(new Map<number, ReturnType<typeof setTimeout>>());
-
-  const dismiss = useCallback((id?: number) => {
-    if (id === undefined) {
-      timers.current.forEach(clearTimeout);
-      timers.current.clear();
-      setItems([]);
-      return;
-    }
-    clearTimeout(timers.current.get(id));
-    timers.current.delete(id);
-    setItems((list) => list.filter((t) => t.id !== id));
-  }, []);
-
-  const toast = useCallback(
-    (options: ToastOptions) => {
-      const id = nextId.current++;
-      setItems((list) => [...list, { ...options, id }].slice(-limit));
-      const ms = options.duration ?? duration;
-      if (ms > 0) timers.current.set(id, setTimeout(() => dismiss(id), ms));
-      return id;
-    },
-    [dismiss, duration, limit],
-  );
-
-  useEffect(() => {
-    const map = timers.current;
-    return () => map.forEach(clearTimeout);
-  }, []);
-
-  const api = useMemo(() => ({ toast, dismiss }), [toast, dismiss]);
-
-  return (
-    <ToastContext.Provider value={api}>
-      {children}
-      <ToastContainer top={top} aria-live="polite">
-        {items.map((t) => (
-          <Toast key={t.id} variant={t.variant} title={t.title} description={t.description} onDismiss={() => dismiss(t.id)} />
-        ))}
-      </ToastContainer>
-    </ToastContext.Provider>
-  );
-}
-
-/** `const { toast, dismiss } = useToast()`: needs a surrounding `<ToastProvider>`. */
-export function useToast(): ToastApi {
-  const ctx = useContext(ToastContext);
-  if (!ctx) throw new Error("useToast must be used inside <ToastProvider>");
-  return ctx;
-}
+"use client";
+
+import { createContext, forwardRef, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import type { HTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+
+export type ToastVariant = "success" | "error" | "warning" | "info";
+
+const GLYPHS: Record<ToastVariant, string> = { success: "✓", error: "!", warning: "!", info: "i" };
+
+export interface ToastProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+  variant?: ToastVariant;
+  title: ReactNode;
+  description?: ReactNode;
+  /** Custom status glyph (defaults per variant). */
+  icon?: ReactNode;
+  /** Shows the dismiss button. */
+  onDismiss?: () => void;
+  dismissLabel?: string;
+}
+
+/** One `.oc-toast` notification (`role="alert"` for errors, `status` otherwise). */
+export const Toast = forwardRef<HTMLDivElement, ToastProps>(function Toast(
+  { variant = "info", title, description, icon, onDismiss, dismissLabel = "Dismiss", className, ...rest },
+  ref,
+) {
+  return (
+    <div ref={ref} className={cx("oc-toast", `oc-toast--${variant}`, className)} role={variant === "error" ? "alert" : "status"} {...rest}>
+      <span className="oc-toast-icon" aria-hidden="true">{icon ?? GLYPHS[variant]}</span>
+      <div className="oc-toast-body">
+        <p className="oc-toast-title">{title}</p>
+        {description != null && <p className="oc-toast-description">{description}</p>}
+      </div>
+      {onDismiss && (
+        <button className="oc-toast-close" type="button" aria-label={dismissLabel} onClick={onDismiss}>&times;</button>
+      )}
+    </div>
+  );
+});
+
+/** `.oc-toast-container` (fixed bottom right; `top` or `static` for in-flow). */
+export const ToastContainer = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement> & { top?: boolean; static?: boolean }>(function ToastContainer(
+  { top, static: isStatic, className, ...rest },
+  ref,
+) {
+  return (
+    <div
+      ref={ref}
+      className={cx("oc-toast-container", top && "oc-toast-container--top", isStatic && "oc-toast-container--static", className)}
+      {...rest}
+    />
+  );
+});
+
+export interface ToastOptions {
+  variant?: ToastVariant;
+  title: ReactNode;
+  description?: ReactNode;
+  /** Auto-dismiss after ms (default 5000). Use 0 to keep the toast until dismissed. */
+  duration?: number;
+}
+
+interface ToastEntry extends ToastOptions {
+  id: number;
+}
+
+interface ToastApi {
+  /** Queue a toast; returns its id. */
+  toast: (options: ToastOptions) => number;
+  dismiss: (id?: number) => void;
+}
+
+const ToastContext = createContext<ToastApi | null>(null);
+
+export interface ToastProviderProps {
+  children?: ReactNode;
+  /** Stack at the top instead of the bottom. */
+  top?: boolean;
+  /** Default auto-dismiss in ms (default 5000). */
+  duration?: number;
+  /** Maximum toasts shown at once (oldest are dropped; default 5). */
+  limit?: number;
+}
+
+/** Holds the toast queue and renders the fixed `.oc-toast-container`. Use `useToast()` below it. */
+export function ToastProvider({ children, top, duration = 5000, limit = 5 }: ToastProviderProps) {
+  const [items, setItems] = useState<ToastEntry[]>([]);
+  const nextId = useRef(1);
+  const timers = useRef(new Map<number, ReturnType<typeof setTimeout>>());
+
+  const dismiss = useCallback((id?: number) => {
+    if (id === undefined) {
+      timers.current.forEach(clearTimeout);
+      timers.current.clear();
+      setItems([]);
+      return;
+    }
+    clearTimeout(timers.current.get(id));
+    timers.current.delete(id);
+    setItems((list) => list.filter((t) => t.id !== id));
+  }, []);
+
+  const toast = useCallback(
+    (options: ToastOptions) => {
+      const id = nextId.current++;
+      setItems((list) => [...list, { ...options, id }].slice(-limit));
+      const ms = options.duration ?? duration;
+      if (ms > 0) timers.current.set(id, setTimeout(() => dismiss(id), ms));
+      return id;
+    },
+    [dismiss, duration, limit],
+  );
+
+  useEffect(() => {
+    const map = timers.current;
+    return () => map.forEach(clearTimeout);
+  }, []);
+
+  const api = useMemo(() => ({ toast, dismiss }), [toast, dismiss]);
+
+  return (
+    <ToastContext.Provider value={api}>
+      {children}
+      <ToastContainer top={top} aria-live="polite">
+        {items.map((t) => (
+          <Toast key={t.id} variant={t.variant} title={t.title} description={t.description} onDismiss={() => dismiss(t.id)} />
+        ))}
+      </ToastContainer>
+    </ToastContext.Provider>
+  );
+}
+
+/** `const { toast, dismiss } = useToast()`: needs a surrounding `<ToastProvider>`. */
+export function useToast(): ToastApi {
+  const ctx = useContext(ToastContext);
+  if (!ctx) throw new Error("useToast must be used inside <ToastProvider>");
+  return ctx;
+}

package/src/components/ToggleField.tsx

@@ -1,39 +1,39 @@
-// File: packages/react/src/components/ToggleField.tsx
-// Map: props -> component (label row: text block + span.oc-switch with checkbox)
-// Same markup as packages/ui/snippets/toggle-field.html. Works controlled (checked) or uncontrolled.
-"use client";
-
-import { forwardRef, useId } from "react";
-import type { InputHTMLAttributes, ReactNode } from "react";
-import { cx } from "../utils";
-
-export interface ToggleFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "role"> {
-  label: ReactNode;
-  description?: ReactNode;
-  /** Bordered box. */
-  card?: boolean;
-  /** Switch first, text after it. */
-  reverse?: boolean;
-  /** Class for the row (`className` goes to the input). */
-  fieldClassName?: string;
-}
-
-/** `.oc-toggle-field`: the whole row is the label, so clicking the text flips the switch. */
-export const ToggleField = forwardRef<HTMLInputElement, ToggleFieldProps>(function ToggleField(
-  { label, description, card, reverse, fieldClassName, className, ...rest },
-  ref,
-) {
-  const descId = `oc-toggle-field-${useId().replace(/:/g, "")}`;
-  return (
-    <label className={cx("oc-toggle-field", card && "oc-toggle-field--card", reverse && "oc-toggle-field--reverse", fieldClassName)}>
-      <span className="oc-toggle-field-text">
-        <span className="oc-toggle-field-label">{label}</span>
-        {description != null && <span className="oc-toggle-field-description" id={descId}>{description}</span>}
-      </span>
-      <span className="oc-switch">
-        <input ref={ref} type="checkbox" role="switch" className={className} aria-describedby={description != null ? descId : undefined} {...rest} />
-        <span className="oc-switch-track" />
-      </span>
-    </label>
-  );
-});
+// File: packages/react/src/components/ToggleField.tsx
+// Map: props -> component (label row: text block + span.oc-switch with checkbox)
+// Same markup as packages/ui/snippets/toggle-field.html. Works controlled (checked) or uncontrolled.
+"use client";
+
+import { forwardRef, useId } from "react";
+import type { InputHTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+
+export interface ToggleFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "role"> {
+  label: ReactNode;
+  description?: ReactNode;
+  /** Bordered box. */
+  card?: boolean;
+  /** Switch first, text after it. */
+  reverse?: boolean;
+  /** Class for the row (`className` goes to the input). */
+  fieldClassName?: string;
+}
+
+/** `.oc-toggle-field`: the whole row is the label, so clicking the text flips the switch. */
+export const ToggleField = forwardRef<HTMLInputElement, ToggleFieldProps>(function ToggleField(
+  { label, description, card, reverse, fieldClassName, className, ...rest },
+  ref,
+) {
+  const descId = `oc-toggle-field-${useId().replace(/:/g, "")}`;
+  return (
+    <label className={cx("oc-toggle-field", card && "oc-toggle-field--card", reverse && "oc-toggle-field--reverse", fieldClassName)}>
+      <span className="oc-toggle-field-text">
+        <span className="oc-toggle-field-label">{label}</span>
+        {description != null && <span className="oc-toggle-field-description" id={descId}>{description}</span>}
+      </span>
+      <span className="oc-switch">
+        <input ref={ref} type="checkbox" role="switch" className={className} aria-describedby={description != null ? descId : undefined} {...rest} />
+        <span className="oc-switch-track" />
+      </span>
+    </label>
+  );
+});

package/src/components/Tooltip.tsx

@@ -1,14 +1,14 @@
-import { forwardRef } from "react";
-import type { HTMLAttributes, ReactNode } from "react";
-import { cx } from "../utils";
-
-export interface TooltipProps extends Omit<HTMLAttributes<HTMLSpanElement>, "content"> {
-  /** Tooltip text (`data-tooltip`). */
-  content: string;
-  children: ReactNode;
-}
-
-/** `<span class="oc-tooltip" data-tooltip>`: CSS-only tooltip around its children. */
-export const Tooltip = forwardRef<HTMLSpanElement, TooltipProps>(function Tooltip({ content, className, ...rest }, ref) {
-  return <span ref={ref} className={cx("oc-tooltip", className)} data-tooltip={content} {...rest} />;
-});
+import { forwardRef } from "react";
+import type { HTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+
+export interface TooltipProps extends Omit<HTMLAttributes<HTMLSpanElement>, "content"> {
+  /** Tooltip text (`data-tooltip`). */
+  content: string;
+  children: ReactNode;
+}
+
+/** `<span class="oc-tooltip" data-tooltip>`: CSS-only tooltip around its children. */
+export const Tooltip = forwardRef<HTMLSpanElement, TooltipProps>(function Tooltip({ content, className, ...rest }, ref) {
+  return <span ref={ref} className={cx("oc-tooltip", className)} data-tooltip={content} {...rest} />;
+});

package/src/components/TopProgress.tsx

@@ -1,54 +1,54 @@
-// File: packages/react/src/components/TopProgress.tsx
-// Map: TopProgress = progress.oc-top-progress -> phase state (hidden / active / done) -> fade-out timer
-// `active` true shows the bar. When it turns false the bar gets `.is-done` (fades out),
-// and after the fade it is hidden again. Without `value` the bar is indeterminate.
-"use client";
-
-import { forwardRef, useEffect, useState } from "react";
-import type { ProgressHTMLAttributes } from "react";
-import { cx } from "../utils";
-
-export type TopProgressTone = "default" | "success" | "warning" | "danger" | "brand";
-
-export interface TopProgressProps extends ProgressHTMLAttributes<HTMLProgressElement> {
-  /** Show the bar (a request or page load is running). Default true. */
-  active?: boolean;
-  tone?: TopProgressTone;
-  /** 4px instead of 2px. */
-  large?: boolean;
-  /** In the normal flow (e.g. inside a card) instead of fixed at the top. */
-  static?: boolean;
-  /** Fade-out time in ms before the bar is hidden. */
-  fadeMs?: number;
-}
-
-type Phase = "hidden" | "active" | "done";
-
-/** `progress.oc-top-progress`: thin loading bar at the top of the page. */
-export const TopProgress = forwardRef<HTMLProgressElement, TopProgressProps>(function TopProgress(
-  { active = true, tone = "default", large, static: inFlow, fadeMs = 400, className, ...rest },
-  ref,
-) {
-  const [phase, setPhase] = useState<Phase>(active ? "active" : "hidden");
-
-  useEffect(() => {
-    if (active) {
-      setPhase("active");
-      return;
-    }
-    // Only fade out when the bar was visible; keep it hidden otherwise.
-    setPhase((p) => (p === "hidden" ? "hidden" : "done"));
-    const timer = setTimeout(() => setPhase("hidden"), fadeMs);
-    return () => clearTimeout(timer);
-  }, [active, fadeMs]);
-
-  const cls = cx(
-    "oc-top-progress",
-    tone !== "default" && `oc-top-progress--${tone}`,
-    large && "oc-top-progress--lg",
-    inFlow && "oc-top-progress--static",
-    phase === "done" && "is-done",
-    className,
-  );
-  return <progress ref={ref} className={cls} hidden={phase === "hidden"} {...rest} />;
-});
+// File: packages/react/src/components/TopProgress.tsx
+// Map: TopProgress = progress.oc-top-progress -> phase state (hidden / active / done) -> fade-out timer
+// `active` true shows the bar. When it turns false the bar gets `.is-done` (fades out),
+// and after the fade it is hidden again. Without `value` the bar is indeterminate.
+"use client";
+
+import { forwardRef, useEffect, useState } from "react";
+import type { ProgressHTMLAttributes } from "react";
+import { cx } from "../utils";
+
+export type TopProgressTone = "default" | "success" | "warning" | "danger" | "brand";
+
+export interface TopProgressProps extends ProgressHTMLAttributes<HTMLProgressElement> {
+  /** Show the bar (a request or page load is running). Default true. */
+  active?: boolean;
+  tone?: TopProgressTone;
+  /** 4px instead of 2px. */
+  large?: boolean;
+  /** In the normal flow (e.g. inside a card) instead of fixed at the top. */
+  static?: boolean;
+  /** Fade-out time in ms before the bar is hidden. */
+  fadeMs?: number;
+}
+
+type Phase = "hidden" | "active" | "done";
+
+/** `progress.oc-top-progress`: thin loading bar at the top of the page. */
+export const TopProgress = forwardRef<HTMLProgressElement, TopProgressProps>(function TopProgress(
+  { active = true, tone = "default", large, static: inFlow, fadeMs = 400, className, ...rest },
+  ref,
+) {
+  const [phase, setPhase] = useState<Phase>(active ? "active" : "hidden");
+
+  useEffect(() => {
+    if (active) {
+      setPhase("active");
+      return;
+    }
+    // Only fade out when the bar was visible; keep it hidden otherwise.
+    setPhase((p) => (p === "hidden" ? "hidden" : "done"));
+    const timer = setTimeout(() => setPhase("hidden"), fadeMs);
+    return () => clearTimeout(timer);
+  }, [active, fadeMs]);
+
+  const cls = cx(
+    "oc-top-progress",
+    tone !== "default" && `oc-top-progress--${tone}`,
+    large && "oc-top-progress--lg",
+    inFlow && "oc-top-progress--static",
+    phase === "done" && "is-done",
+    className,
+  );
+  return <progress ref={ref} className={cls} hidden={phase === "hidden"} {...rest} />;
+});