@birdycom/omniaui-react 0.11.0 → 0.11.1

package/src/components/Select.tsx

@@ -1,27 +1,27 @@
-import { forwardRef } from "react";
-import type { ReactNode, SelectHTMLAttributes } from "react";
-import { cx } from "../utils";
-
-export interface SelectOption {
-  value: string;
-  label: ReactNode;
-  disabled?: boolean;
-}
-
-export interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
-  /** Shortcut for `<option>` children. */
-  options?: Array<SelectOption | string>;
-}
-
-/** `<select class="oc-select">` */
-export const Select = forwardRef<HTMLSelectElement, SelectProps>(function Select({ options, className, children, ...rest }, ref) {
-  return (
-    <select ref={ref} className={cx("oc-select", className)} {...rest}>
-      {options?.map((o) => {
-        const opt = typeof o === "string" ? { value: o, label: o } : o;
-        return <option key={opt.value} value={opt.value} disabled={opt.disabled}>{opt.label}</option>;
-      })}
-      {children}
-    </select>
-  );
-});
+import { forwardRef } from "react";
+import type { ReactNode, SelectHTMLAttributes } from "react";
+import { cx } from "../utils";
+
+export interface SelectOption {
+  value: string;
+  label: ReactNode;
+  disabled?: boolean;
+}
+
+export interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
+  /** Shortcut for `<option>` children. */
+  options?: Array<SelectOption | string>;
+}
+
+/** `<select class="oc-select">` */
+export const Select = forwardRef<HTMLSelectElement, SelectProps>(function Select({ options, className, children, ...rest }, ref) {
+  return (
+    <select ref={ref} className={cx("oc-select", className)} {...rest}>
+      {options?.map((o) => {
+        const opt = typeof o === "string" ? { value: o, label: o } : o;
+        return <option key={opt.value} value={opt.value} disabled={opt.disabled}>{opt.label}</option>;
+      })}
+      {children}
+    </select>
+  );
+});

package/src/components/SeverityCard.tsx

@@ -1,53 +1,53 @@
-// File: packages/react/src/components/SeverityCard.tsx
-// Map: SeverityCard = details -> summary head (icon, title + tags, level badge) -> body (children) -> actions
-// Native <details>: opens without JavaScript. Cards with the same `name` open one at a time.
-import { forwardRef } from "react";
-import type { DetailsHTMLAttributes, ReactNode } from "react";
-import { cx } from "../utils";
-
-export type SeverityLevel = "low" | "medium" | "high" | "critical";
-
-const LEVEL_TEXT: Record<SeverityLevel, string> = { low: "Low", medium: "Medium", high: "High", critical: "Critical" };
-
-export interface SeverityCardProps extends Omit<DetailsHTMLAttributes<HTMLDetailsElement>, "title"> {
-  level: SeverityLevel;
-  title: ReactNode;
-  /** Small tags under the title, e.g. ["email", "password"]. */
-  tags?: ReactNode[];
-  /** Badge text; default the level name ("High"). */
-  levelLabel?: ReactNode;
-  icon?: ReactNode;
-  /** Neutral colors (the finding is handled). */
-  resolved?: boolean;
-  actions?: ReactNode;
-  /** Exclusive group: cards with the same name open one at a time. */
-  name?: string;
-}
-
-/** `details.oc-severity-card`: expandable card colored by risk level. */
-export const SeverityCard = forwardRef<HTMLDetailsElement, SeverityCardProps>(function SeverityCard(
-  { level, title, tags, levelLabel, icon, resolved, actions, className, children, ...rest },
-  ref,
-) {
-  const cls = cx("oc-severity-card", `oc-severity-card--${level}`, resolved && "is-resolved", className);
-  return (
-    <details ref={ref} className={cls} {...(rest as object)}>
-      <summary className="oc-severity-card-head">
-        {icon != null && <span className="oc-severity-card-icon" aria-hidden="true">{icon}</span>}
-        <span className="oc-severity-card-main">
-          <span className="oc-severity-card-title">{title}</span>
-          {tags && tags.length > 0 && (
-            <span className="oc-severity-card-tags">
-              {tags.map((t, i) => <span className="oc-severity-card-tag" key={i}>{t}</span>)}
-            </span>
-          )}
-        </span>
-        <span className="oc-severity-card-level">{levelLabel ?? LEVEL_TEXT[level]}</span>
-      </summary>
-      <div className="oc-severity-card-body">
-        {children}
-        {actions != null && <div className="oc-severity-card-actions">{actions}</div>}
-      </div>
-    </details>
-  );
-});
+// File: packages/react/src/components/SeverityCard.tsx
+// Map: SeverityCard = details -> summary head (icon, title + tags, level badge) -> body (children) -> actions
+// Native <details>: opens without JavaScript. Cards with the same `name` open one at a time.
+import { forwardRef } from "react";
+import type { DetailsHTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+
+export type SeverityLevel = "low" | "medium" | "high" | "critical";
+
+const LEVEL_TEXT: Record<SeverityLevel, string> = { low: "Low", medium: "Medium", high: "High", critical: "Critical" };
+
+export interface SeverityCardProps extends Omit<DetailsHTMLAttributes<HTMLDetailsElement>, "title"> {
+  level: SeverityLevel;
+  title: ReactNode;
+  /** Small tags under the title, e.g. ["email", "password"]. */
+  tags?: ReactNode[];
+  /** Badge text; default the level name ("High"). */
+  levelLabel?: ReactNode;
+  icon?: ReactNode;
+  /** Neutral colors (the finding is handled). */
+  resolved?: boolean;
+  actions?: ReactNode;
+  /** Exclusive group: cards with the same name open one at a time. */
+  name?: string;
+}
+
+/** `details.oc-severity-card`: expandable card colored by risk level. */
+export const SeverityCard = forwardRef<HTMLDetailsElement, SeverityCardProps>(function SeverityCard(
+  { level, title, tags, levelLabel, icon, resolved, actions, className, children, ...rest },
+  ref,
+) {
+  const cls = cx("oc-severity-card", `oc-severity-card--${level}`, resolved && "is-resolved", className);
+  return (
+    <details ref={ref} className={cls} {...(rest as object)}>
+      <summary className="oc-severity-card-head">
+        {icon != null && <span className="oc-severity-card-icon" aria-hidden="true">{icon}</span>}
+        <span className="oc-severity-card-main">
+          <span className="oc-severity-card-title">{title}</span>
+          {tags && tags.length > 0 && (
+            <span className="oc-severity-card-tags">
+              {tags.map((t, i) => <span className="oc-severity-card-tag" key={i}>{t}</span>)}
+            </span>
+          )}
+        </span>
+        <span className="oc-severity-card-level">{levelLabel ?? LEVEL_TEXT[level]}</span>
+      </summary>
+      <div className="oc-severity-card-body">
+        {children}
+        {actions != null && <div className="oc-severity-card-actions">{actions}</div>}
+      </div>
+    </details>
+  );
+});

package/src/components/Sheet.tsx

@@ -1,62 +1,62 @@
-"use client";
-
-import { forwardRef, useId, useRef } from "react";
-import type { DialogHTMLAttributes, MouseEvent, ReactNode } from "react";
-import { attrs, cx } from "../utils";
-import { DialogContext, useDialog, useMergedRef } from "../hooks";
-import type { DialogState } from "../hooks";
-
-export type SheetSide = "right" | "left" | "top" | "bottom";
-
-export interface SheetProps extends Omit<DialogHTMLAttributes<HTMLDialogElement>, "title" | "open" | "onClose">, DialogState {
-  /** Edge the panel slides from (default `right`). */
-  side?: SheetSide;
-  /** Wider panel (`oc-sheet-content--wide`). */
-  wide?: boolean;
-  title?: ReactNode;
-  description?: ReactNode;
-  /** Action row (`oc-sheet-footer`). */
-  footer?: ReactNode;
-  /** Accessible name of the close button. */
-  closeLabel?: string;
-}
-
-/** Side panel on `<dialog class="oc-sheet">`. */
-export const Sheet = forwardRef<HTMLDialogElement, SheetProps>(function Sheet(
-  { open, defaultOpen, onOpenChange, side = "right", wide, title, description, footer, closeLabel = "Close", className, children, ...rest },
-  forwardedRef,
-) {
-  const inner = useRef<HTMLDialogElement>(null);
-  const ref = useMergedRef(inner, forwardedRef);
-  const titleId = useId();
-  const dlg = useDialog(inner, { open, defaultOpen, onOpenChange });
-  const onClick = (e: MouseEvent<HTMLDialogElement>) => {
-    rest.onClick?.(e);
-    if (e.target === e.currentTarget) dlg.close();
-  };
-  return (
-    <dialog
-      ref={ref}
-      className={cx("oc-sheet", side !== "right" && `oc-sheet--${side}`, className)}
-      aria-labelledby={title != null ? titleId : undefined}
-      {...attrs({ closedby: "any" })}
-      {...rest}
-      onClick={onClick}
-      onClose={dlg.onClose}
-    >
-      <DialogContext.Provider value={{ close: dlg.close }}>
-        <div className={cx("oc-sheet-content", wide && "oc-sheet-content--wide")}>
-          <button className="oc-sheet-close" type="button" aria-label={closeLabel} onClick={dlg.close}>&times;</button>
-          {(title != null || description != null) && (
-            <div className="oc-sheet-header">
-              {title != null && <h2 className="oc-sheet-title" id={titleId}>{title}</h2>}
-              {description != null && <p className="oc-sheet-description">{description}</p>}
-            </div>
-          )}
-          <div className="oc-sheet-body">{children}</div>
-          {footer != null && <div className="oc-sheet-footer">{footer}</div>}
-        </div>
-      </DialogContext.Provider>
-    </dialog>
-  );
-});
+"use client";
+
+import { forwardRef, useId, useRef } from "react";
+import type { DialogHTMLAttributes, MouseEvent, ReactNode } from "react";
+import { attrs, cx } from "../utils";
+import { DialogContext, useDialog, useMergedRef } from "../hooks";
+import type { DialogState } from "../hooks";
+
+export type SheetSide = "right" | "left" | "top" | "bottom";
+
+export interface SheetProps extends Omit<DialogHTMLAttributes<HTMLDialogElement>, "title" | "open" | "onClose">, DialogState {
+  /** Edge the panel slides from (default `right`). */
+  side?: SheetSide;
+  /** Wider panel (`oc-sheet-content--wide`). */
+  wide?: boolean;
+  title?: ReactNode;
+  description?: ReactNode;
+  /** Action row (`oc-sheet-footer`). */
+  footer?: ReactNode;
+  /** Accessible name of the close button. */
+  closeLabel?: string;
+}
+
+/** Side panel on `<dialog class="oc-sheet">`. */
+export const Sheet = forwardRef<HTMLDialogElement, SheetProps>(function Sheet(
+  { open, defaultOpen, onOpenChange, side = "right", wide, title, description, footer, closeLabel = "Close", className, children, ...rest },
+  forwardedRef,
+) {
+  const inner = useRef<HTMLDialogElement>(null);
+  const ref = useMergedRef(inner, forwardedRef);
+  const titleId = useId();
+  const dlg = useDialog(inner, { open, defaultOpen, onOpenChange });
+  const onClick = (e: MouseEvent<HTMLDialogElement>) => {
+    rest.onClick?.(e);
+    if (e.target === e.currentTarget) dlg.close();
+  };
+  return (
+    <dialog
+      ref={ref}
+      className={cx("oc-sheet", side !== "right" && `oc-sheet--${side}`, className)}
+      aria-labelledby={title != null ? titleId : undefined}
+      {...attrs({ closedby: "any" })}
+      {...rest}
+      onClick={onClick}
+      onClose={dlg.onClose}
+    >
+      <DialogContext.Provider value={{ close: dlg.close }}>
+        <div className={cx("oc-sheet-content", wide && "oc-sheet-content--wide")}>
+          <button className="oc-sheet-close" type="button" aria-label={closeLabel} onClick={dlg.close}>&times;</button>
+          {(title != null || description != null) && (
+            <div className="oc-sheet-header">
+              {title != null && <h2 className="oc-sheet-title" id={titleId}>{title}</h2>}
+              {description != null && <p className="oc-sheet-description">{description}</p>}
+            </div>
+          )}
+          <div className="oc-sheet-body">{children}</div>
+          {footer != null && <div className="oc-sheet-footer">{footer}</div>}
+        </div>
+      </DialogContext.Provider>
+    </dialog>
+  );
+});

package/src/components/Skeleton.tsx

@@ -1,12 +1,12 @@
-import { forwardRef } from "react";
-import type { HTMLAttributes } from "react";
-import { cx } from "../utils";
-
-export interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {
-  variant?: "circle" | "title" | "text" | "rect";
-}
-
-/** `<div class="oc-skeleton oc-skeleton--{variant}">` */
-export const Skeleton = forwardRef<HTMLDivElement, SkeletonProps>(function Skeleton({ variant, className, ...rest }, ref) {
-  return <div ref={ref} className={cx("oc-skeleton", variant && `oc-skeleton--${variant}`, className)} {...rest} />;
-});
+import { forwardRef } from "react";
+import type { HTMLAttributes } from "react";
+import { cx } from "../utils";
+
+export interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {
+  variant?: "circle" | "title" | "text" | "rect";
+}
+
+/** `<div class="oc-skeleton oc-skeleton--{variant}">` */
+export const Skeleton = forwardRef<HTMLDivElement, SkeletonProps>(function Skeleton({ variant, className, ...rest }, ref) {
+  return <div ref={ref} className={cx("oc-skeleton", variant && `oc-skeleton--${variant}`, className)} {...rest} />;
+});

package/src/components/SortableRow.tsx

@@ -1,46 +1,46 @@
-// File: packages/react/src/components/SortableRow.tsx
-// Map: SortableRow = tr.oc-sortable-row -> grip cell (button) -> your cells
-// Styling only: your code handles the drag events (they are passed through on the row)
-// and sets `dragging` / `drop` to show the states.
-import { forwardRef } from "react";
-import type { HTMLAttributes, ReactNode } from "react";
-import { cx } from "../utils";
-
-export interface SortableRowProps extends HTMLAttributes<HTMLTableRowElement> {
-  /** Accessible name of the grip, e.g. "Move Install". */
-  gripLabel: string;
-  /** This row is being moved (`.is-dragging`). */
-  dragging?: boolean;
-  /** Show the drop line above or below this row. */
-  drop?: "before" | "after" | null;
-  /** Locked row: no dragging, grip disabled. */
-  locked?: boolean;
-  /** Picked up with the keyboard (grip `aria-pressed`). */
-  grabbed?: boolean;
-  /** Keyboard handler for the grip (e.g. ArrowUp / ArrowDown to move). */
-  onGripKeyDown?: (e: React.KeyboardEvent<HTMLButtonElement>) => void;
-  children: ReactNode;
-}
-
-/** `tr.oc-sortable-row[draggable]` with a `button.oc-sortable-row-grip` in the first cell. */
-export const SortableRow = forwardRef<HTMLTableRowElement, SortableRowProps>(function SortableRow(
-  { gripLabel, dragging, drop, locked, grabbed, onGripKeyDown, className, children, ...rest },
-  ref,
-) {
-  const cls = cx("oc-sortable-row", dragging && "is-dragging", drop && `is-drop-${drop}`, className);
-  return (
-    <tr ref={ref} className={cls} draggable={locked ? undefined : true} {...rest}>
-      <td className="oc-sortable-row-grip-cell">
-        <button
-          className="oc-sortable-row-grip"
-          type="button"
-          aria-label={gripLabel}
-          aria-pressed={grabbed === undefined ? undefined : grabbed}
-          disabled={locked}
-          onKeyDown={onGripKeyDown}
-        />
-      </td>
-      {children}
-    </tr>
-  );
-});
+// File: packages/react/src/components/SortableRow.tsx
+// Map: SortableRow = tr.oc-sortable-row -> grip cell (button) -> your cells
+// Styling only: your code handles the drag events (they are passed through on the row)
+// and sets `dragging` / `drop` to show the states.
+import { forwardRef } from "react";
+import type { HTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+
+export interface SortableRowProps extends HTMLAttributes<HTMLTableRowElement> {
+  /** Accessible name of the grip, e.g. "Move Install". */
+  gripLabel: string;
+  /** This row is being moved (`.is-dragging`). */
+  dragging?: boolean;
+  /** Show the drop line above or below this row. */
+  drop?: "before" | "after" | null;
+  /** Locked row: no dragging, grip disabled. */
+  locked?: boolean;
+  /** Picked up with the keyboard (grip `aria-pressed`). */
+  grabbed?: boolean;
+  /** Keyboard handler for the grip (e.g. ArrowUp / ArrowDown to move). */
+  onGripKeyDown?: (e: React.KeyboardEvent<HTMLButtonElement>) => void;
+  children: ReactNode;
+}
+
+/** `tr.oc-sortable-row[draggable]` with a `button.oc-sortable-row-grip` in the first cell. */
+export const SortableRow = forwardRef<HTMLTableRowElement, SortableRowProps>(function SortableRow(
+  { gripLabel, dragging, drop, locked, grabbed, onGripKeyDown, className, children, ...rest },
+  ref,
+) {
+  const cls = cx("oc-sortable-row", dragging && "is-dragging", drop && `is-drop-${drop}`, className);
+  return (
+    <tr ref={ref} className={cls} draggable={locked ? undefined : true} {...rest}>
+      <td className="oc-sortable-row-grip-cell">
+        <button
+          className="oc-sortable-row-grip"
+          type="button"
+          aria-label={gripLabel}
+          aria-pressed={grabbed === undefined ? undefined : grabbed}
+          disabled={locked}
+          onKeyDown={onGripKeyDown}
+        />
+      </td>
+      {children}
+    </tr>
+  );
+});

package/src/components/StackCard.tsx

@@ -1,40 +1,40 @@
-// File: packages/react/src/components/StackCard.tsx
-// Map: props -> StackCard (deck: MediaThumb cover + count badge -> title link + meta)
-// Same markup as packages/ui/snippets/stack-card.html.
-import { forwardRef } from "react";
-import type { HTMLAttributes, ReactNode } from "react";
-import { cx } from "../utils";
-import { MediaThumb } from "./MediaThumb";
-import type { MediaThumbProps } from "./MediaThumb";
-
-export interface StackCardProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
-  title: ReactNode;
-  /** Link of the title; it covers the whole card. */
-  href: string;
-  meta?: ReactNode;
-  /** Badge text, e.g. "12 videos". */
-  count?: ReactNode;
-  /** Show the count as a side panel (`--panel`). */
-  panel?: boolean;
-  /** Props for the cover (MediaThumb). */
-  thumb?: MediaThumbProps;
-}
-
-/** `article.oc-stack-card`: cover with two layers behind it and a count badge. */
-export const StackCard = forwardRef<HTMLElement, StackCardProps>(function StackCard(
-  { title, href, meta, count, panel, thumb, className, ...rest },
-  ref,
-) {
-  return (
-    <article ref={ref} className={cx("oc-stack-card", panel && "oc-stack-card--panel", className)} {...rest}>
-      <div className="oc-stack-card__deck">
-        <MediaThumb {...thumb} />
-        {count != null && <span className="oc-stack-card__count">{count}</span>}
-      </div>
-      <div>
-        <h3 className="oc-stack-card__title"><a href={href}>{title}</a></h3>
-        {meta != null && <p className="oc-stack-card__meta">{meta}</p>}
-      </div>
-    </article>
-  );
-});
+// File: packages/react/src/components/StackCard.tsx
+// Map: props -> StackCard (deck: MediaThumb cover + count badge -> title link + meta)
+// Same markup as packages/ui/snippets/stack-card.html.
+import { forwardRef } from "react";
+import type { HTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+import { MediaThumb } from "./MediaThumb";
+import type { MediaThumbProps } from "./MediaThumb";
+
+export interface StackCardProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
+  title: ReactNode;
+  /** Link of the title; it covers the whole card. */
+  href: string;
+  meta?: ReactNode;
+  /** Badge text, e.g. "12 videos". */
+  count?: ReactNode;
+  /** Show the count as a side panel (`--panel`). */
+  panel?: boolean;
+  /** Props for the cover (MediaThumb). */
+  thumb?: MediaThumbProps;
+}
+
+/** `article.oc-stack-card`: cover with two layers behind it and a count badge. */
+export const StackCard = forwardRef<HTMLElement, StackCardProps>(function StackCard(
+  { title, href, meta, count, panel, thumb, className, ...rest },
+  ref,
+) {
+  return (
+    <article ref={ref} className={cx("oc-stack-card", panel && "oc-stack-card--panel", className)} {...rest}>
+      <div className="oc-stack-card__deck">
+        <MediaThumb {...thumb} />
+        {count != null && <span className="oc-stack-card__count">{count}</span>}
+      </div>
+      <div>
+        <h3 className="oc-stack-card__title"><a href={href}>{title}</a></h3>
+        {meta != null && <p className="oc-stack-card__meta">{meta}</p>}
+      </div>
+    </article>
+  );
+});

package/src/components/StackList.tsx

@@ -1,42 +1,42 @@
-// File: packages/react/src/components/StackList.tsx | Map: types -> StackList (ul.oc-stack-list -> li pills)
-import { forwardRef } from "react";
-import type { HTMLAttributes, ReactNode } from "react";
-import { cx } from "../utils";
-
-export interface StackListItem {
-  label: ReactNode;
-  /** Optional glyph or SVG before the label (decorative). */
-  icon?: ReactNode;
-}
-
-export interface StackListProps extends HTMLAttributes<HTMLUListElement> {
-  /** Strings, or objects with an icon. */
-  items: Array<ReactNode | StackListItem>;
-  neutral?: boolean;
-  size?: "default" | "sm";
-}
-
-const isItem = (v: unknown): v is StackListItem => typeof v === "object" && v !== null && "label" in v;
-
-/** `<ul class="oc-stack-list">`: technology pills. Set an accent with `className="oc-accent--violet"`. */
-export const StackList = forwardRef<HTMLUListElement, StackListProps>(function StackList(
-  { items, neutral = false, size = "default", className, ...rest },
-  ref,
-) {
-  return (
-    <ul ref={ref} className={cx("oc-stack-list", neutral && "oc-stack-list--neutral", size === "sm" && "oc-stack-list--sm", className)} {...rest}>
-      {items.map((item, i) => (
-        <li className="oc-stack-list__item" key={i}>
-          {isItem(item) ? (
-            <>
-              {item.icon != null && <span className="oc-stack-list__icon" aria-hidden="true">{item.icon}</span>}
-              {item.label}
-            </>
-          ) : (
-            item
-          )}
-        </li>
-      ))}
-    </ul>
-  );
-});
+// File: packages/react/src/components/StackList.tsx | Map: types -> StackList (ul.oc-stack-list -> li pills)
+import { forwardRef } from "react";
+import type { HTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+
+export interface StackListItem {
+  label: ReactNode;
+  /** Optional glyph or SVG before the label (decorative). */
+  icon?: ReactNode;
+}
+
+export interface StackListProps extends HTMLAttributes<HTMLUListElement> {
+  /** Strings, or objects with an icon. */
+  items: Array<ReactNode | StackListItem>;
+  neutral?: boolean;
+  size?: "default" | "sm";
+}
+
+const isItem = (v: unknown): v is StackListItem => typeof v === "object" && v !== null && "label" in v;
+
+/** `<ul class="oc-stack-list">`: technology pills. Set an accent with `className="oc-accent--violet"`. */
+export const StackList = forwardRef<HTMLUListElement, StackListProps>(function StackList(
+  { items, neutral = false, size = "default", className, ...rest },
+  ref,
+) {
+  return (
+    <ul ref={ref} className={cx("oc-stack-list", neutral && "oc-stack-list--neutral", size === "sm" && "oc-stack-list--sm", className)} {...rest}>
+      {items.map((item, i) => (
+        <li className="oc-stack-list__item" key={i}>
+          {isItem(item) ? (
+            <>
+              {item.icon != null && <span className="oc-stack-list__icon" aria-hidden="true">{item.icon}</span>}
+              {item.label}
+            </>
+          ) : (
+            item
+          )}
+        </li>
+      ))}
+    </ul>
+  );
+});