@birdycom/omniaui-react 0.11.0 → 0.11.1

package/src/components/Tree.tsx

@@ -1,97 +1,97 @@
-// File: packages/react/src/components/Tree.tsx
-// Map: Tree = box -> optional head row -> list -> TreeNode (folder = details/summary, leaf = div row) -> nested list
-// Folders open and close natively (<details>), so there is no state here.
-import { forwardRef } from "react";
-import type { HTMLAttributes, ReactNode } from "react";
-import { cx } from "../utils";
-
-export interface TreeItem {
-  label: ReactNode;
-  /** Leaf link target (renders the label as `a.oc-tree-label`). */
-  href?: string;
-  icon?: ReactNode;
-  count?: ReactNode;
-  actions?: ReactNode;
-  /** Child items: makes this item a folder. */
-  children?: TreeItem[];
-  /** Folder starts open. */
-  open?: boolean;
-  /** Current / selected item. */
-  current?: boolean;
-  muted?: boolean;
-}
-
-export interface TreeProps extends HTMLAttributes<HTMLDivElement> {
-  items: TreeItem[];
-  /** Sticky root row content (label), with optional `headActions`. */
-  head?: ReactNode;
-  headActions?: ReactNode;
-  /** Actions only show on hover / focus. */
-  quiet?: boolean;
-  /** No card frame. */
-  flush?: boolean;
-}
-
-/** The row content: icon, label (link or text), count, actions. */
-function RowContent({ item }: { item: TreeItem }) {
-  const isLink = item.href !== undefined;
-  return (
-    <>
-      {item.icon != null && <span className="oc-tree-icon" aria-hidden="true">{item.icon}</span>}
-      {isLink ? (
-        <a className="oc-tree-label" href={item.href} aria-current={item.current ? "true" : undefined}>{item.label}</a>
-      ) : (
-        <span className="oc-tree-label">{item.label}</span>
-      )}
-      {item.count != null && <span className="oc-tree-count">{item.count}</span>}
-      {item.actions != null && <span className="oc-tree-actions">{item.actions}</span>}
-    </>
-  );
-}
-
-function TreeNode({ item }: { item: TreeItem }) {
-  // aria-current on the row only when the label is not a link (a link carries it itself).
-  const rowCurrent = item.current && item.href === undefined ? "true" : undefined;
-  const rowCls = cx("oc-tree-row", item.muted && "is-muted");
-  if (!item.children?.length) {
-    return (
-      <li>
-        <div className={rowCls} aria-current={rowCurrent}><RowContent item={item} /></div>
-      </li>
-    );
-  }
-  return (
-    <li>
-      <details className="oc-tree-node" open={item.open}>
-        <summary className={rowCls} aria-current={rowCurrent}><RowContent item={item} /></summary>
-        <TreeList items={item.children} />
-      </details>
-    </li>
-  );
-}
-
-function TreeList({ items }: { items: TreeItem[] }) {
-  return (
-    <ul className="oc-tree-list">
-      {items.map((item, i) => <TreeNode item={item} key={i} />)}
-    </ul>
-  );
-}
-
-/** `.oc-tree`: nested tree list with a sticky action column. */
-export const Tree = forwardRef<HTMLDivElement, TreeProps>(function Tree(
-  { items, head, headActions, quiet, flush, className, ...rest },
-  ref,
-) {
-  return (
-    <div ref={ref} className={cx("oc-tree", quiet && "oc-tree--quiet", flush && "oc-tree--flush", className)} {...rest}>
-      {head != null && (
-        <div className="oc-tree-row oc-tree-head">
-          <span className="oc-tree-label">{head}</span>
-          {headActions != null && <span className="oc-tree-actions">{headActions}</span>}
-        </div>
-      )}
-      <TreeList items={items} />
-    </div>
-  );
-});
+// File: packages/react/src/components/Tree.tsx
+// Map: Tree = box -> optional head row -> list -> TreeNode (folder = details/summary, leaf = div row) -> nested list
+// Folders open and close natively (<details>), so there is no state here.
+import { forwardRef } from "react";
+import type { HTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+
+export interface TreeItem {
+  label: ReactNode;
+  /** Leaf link target (renders the label as `a.oc-tree-label`). */
+  href?: string;
+  icon?: ReactNode;
+  count?: ReactNode;
+  actions?: ReactNode;
+  /** Child items: makes this item a folder. */
+  children?: TreeItem[];
+  /** Folder starts open. */
+  open?: boolean;
+  /** Current / selected item. */
+  current?: boolean;
+  muted?: boolean;
+}
+
+export interface TreeProps extends HTMLAttributes<HTMLDivElement> {
+  items: TreeItem[];
+  /** Sticky root row content (label), with optional `headActions`. */
+  head?: ReactNode;
+  headActions?: ReactNode;
+  /** Actions only show on hover / focus. */
+  quiet?: boolean;
+  /** No card frame. */
+  flush?: boolean;
+}
+
+/** The row content: icon, label (link or text), count, actions. */
+function RowContent({ item }: { item: TreeItem }) {
+  const isLink = item.href !== undefined;
+  return (
+    <>
+      {item.icon != null && <span className="oc-tree-icon" aria-hidden="true">{item.icon}</span>}
+      {isLink ? (
+        <a className="oc-tree-label" href={item.href} aria-current={item.current ? "true" : undefined}>{item.label}</a>
+      ) : (
+        <span className="oc-tree-label">{item.label}</span>
+      )}
+      {item.count != null && <span className="oc-tree-count">{item.count}</span>}
+      {item.actions != null && <span className="oc-tree-actions">{item.actions}</span>}
+    </>
+  );
+}
+
+function TreeNode({ item }: { item: TreeItem }) {
+  // aria-current on the row only when the label is not a link (a link carries it itself).
+  const rowCurrent = item.current && item.href === undefined ? "true" : undefined;
+  const rowCls = cx("oc-tree-row", item.muted && "is-muted");
+  if (!item.children?.length) {
+    return (
+      <li>
+        <div className={rowCls} aria-current={rowCurrent}><RowContent item={item} /></div>
+      </li>
+    );
+  }
+  return (
+    <li>
+      <details className="oc-tree-node" open={item.open}>
+        <summary className={rowCls} aria-current={rowCurrent}><RowContent item={item} /></summary>
+        <TreeList items={item.children} />
+      </details>
+    </li>
+  );
+}
+
+function TreeList({ items }: { items: TreeItem[] }) {
+  return (
+    <ul className="oc-tree-list">
+      {items.map((item, i) => <TreeNode item={item} key={i} />)}
+    </ul>
+  );
+}
+
+/** `.oc-tree`: nested tree list with a sticky action column. */
+export const Tree = forwardRef<HTMLDivElement, TreeProps>(function Tree(
+  { items, head, headActions, quiet, flush, className, ...rest },
+  ref,
+) {
+  return (
+    <div ref={ref} className={cx("oc-tree", quiet && "oc-tree--quiet", flush && "oc-tree--flush", className)} {...rest}>
+      {head != null && (
+        <div className="oc-tree-row oc-tree-head">
+          <span className="oc-tree-label">{head}</span>
+          {headActions != null && <span className="oc-tree-actions">{headActions}</span>}
+        </div>
+      )}
+      <TreeList items={items} />
+    </div>
+  );
+});

package/src/components/UpgradeBanner.tsx

@@ -1,62 +1,62 @@
-// File: packages/react/src/components/UpgradeBanner.tsx
-// Map: UpgradeBanner = aside -> icon -> body (title + plan pill, text, usage meter) -> actions -> dismiss button
-// The dismiss button only shows when `onDismiss` is given; your app then hides or removes the banner.
-import { forwardRef } from "react";
-import type { HTMLAttributes, ReactNode } from "react";
-import { cx } from "../utils";
-
-export interface UpgradeBannerUsage {
-  label: ReactNode;
-  value: number;
-  max: number;
-}
-
-export interface UpgradeBannerProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
-  title: ReactNode;
-  /** Plan pill next to the title, e.g. "Free". */
-  plan?: ReactNode;
-  /** Explanation; also accepted as children. */
-  text?: ReactNode;
-  usage?: UpgradeBannerUsage;
-  icon?: ReactNode;
-  actions?: ReactNode;
-  premium?: boolean;
-  compact?: boolean;
-  onDismiss?: () => void;
-  dismissLabel?: string;
-}
-
-/** `.oc-upgrade-banner`: free-plan limits callout with an upgrade action. */
-export const UpgradeBanner = forwardRef<HTMLElement, UpgradeBannerProps>(function UpgradeBanner(
-  { title, plan, text, usage, icon, actions, premium, compact, onDismiss, dismissLabel = "Dismiss", className, children, ...rest },
-  ref,
-) {
-  const cls = cx("oc-upgrade-banner", premium && "oc-upgrade-banner--premium", compact && "oc-upgrade-banner--compact", className);
-  const body = text ?? children;
-  return (
-    <aside ref={ref} className={cls} {...rest}>
-      {icon != null && <span className="oc-upgrade-banner-icon" aria-hidden="true">{icon}</span>}
-      <div className="oc-upgrade-banner-body">
-        <p className="oc-upgrade-banner-title">
-          {title}
-          {plan != null && <> <span className="oc-upgrade-banner-plan">{plan}</span></>}
-        </p>
-        {body != null && <p className="oc-upgrade-banner-text">{body}</p>}
-        {usage && (
-          <div className="oc-upgrade-banner-usage">
-            <span>{usage.label}</span>
-            {/* low / high make the meter turn "less good" near the limit. */}
-            <meter className="oc-upgrade-banner-meter" min={0} max={usage.max} low={usage.max * 0.6} high={usage.max * 0.8} optimum={0} value={usage.value}>
-              {usage.value} of {usage.max}
-            </meter>
-            <span>{usage.value} / {usage.max}</span>
-          </div>
-        )}
-      </div>
-      {actions != null && <div className="oc-upgrade-banner-actions">{actions}</div>}
-      {onDismiss && (
-        <button className="oc-upgrade-banner-dismiss" type="button" aria-label={dismissLabel} onClick={onDismiss}>×</button>
-      )}
-    </aside>
-  );
-});
+// File: packages/react/src/components/UpgradeBanner.tsx
+// Map: UpgradeBanner = aside -> icon -> body (title + plan pill, text, usage meter) -> actions -> dismiss button
+// The dismiss button only shows when `onDismiss` is given; your app then hides or removes the banner.
+import { forwardRef } from "react";
+import type { HTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+
+export interface UpgradeBannerUsage {
+  label: ReactNode;
+  value: number;
+  max: number;
+}
+
+export interface UpgradeBannerProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
+  title: ReactNode;
+  /** Plan pill next to the title, e.g. "Free". */
+  plan?: ReactNode;
+  /** Explanation; also accepted as children. */
+  text?: ReactNode;
+  usage?: UpgradeBannerUsage;
+  icon?: ReactNode;
+  actions?: ReactNode;
+  premium?: boolean;
+  compact?: boolean;
+  onDismiss?: () => void;
+  dismissLabel?: string;
+}
+
+/** `.oc-upgrade-banner`: free-plan limits callout with an upgrade action. */
+export const UpgradeBanner = forwardRef<HTMLElement, UpgradeBannerProps>(function UpgradeBanner(
+  { title, plan, text, usage, icon, actions, premium, compact, onDismiss, dismissLabel = "Dismiss", className, children, ...rest },
+  ref,
+) {
+  const cls = cx("oc-upgrade-banner", premium && "oc-upgrade-banner--premium", compact && "oc-upgrade-banner--compact", className);
+  const body = text ?? children;
+  return (
+    <aside ref={ref} className={cls} {...rest}>
+      {icon != null && <span className="oc-upgrade-banner-icon" aria-hidden="true">{icon}</span>}
+      <div className="oc-upgrade-banner-body">
+        <p className="oc-upgrade-banner-title">
+          {title}
+          {plan != null && <> <span className="oc-upgrade-banner-plan">{plan}</span></>}
+        </p>
+        {body != null && <p className="oc-upgrade-banner-text">{body}</p>}
+        {usage && (
+          <div className="oc-upgrade-banner-usage">
+            <span>{usage.label}</span>
+            {/* low / high make the meter turn "less good" near the limit. */}
+            <meter className="oc-upgrade-banner-meter" min={0} max={usage.max} low={usage.max * 0.6} high={usage.max * 0.8} optimum={0} value={usage.value}>
+              {usage.value} of {usage.max}
+            </meter>
+            <span>{usage.value} / {usage.max}</span>
+          </div>
+        )}
+      </div>
+      {actions != null && <div className="oc-upgrade-banner-actions">{actions}</div>}
+      {onDismiss && (
+        <button className="oc-upgrade-banner-dismiss" type="button" aria-label={dismissLabel} onClick={onDismiss}>×</button>
+      )}
+    </aside>
+  );
+});

package/src/components/User.tsx

@@ -1,31 +1,31 @@
-import { forwardRef } from "react";
-import type { HTMLAttributes, ReactNode } from "react";
-import { cx } from "../utils";
-import { Avatar } from "./Avatar";
-import type { AvatarSize } from "./Avatar";
-
-export interface UserProps extends HTMLAttributes<HTMLDivElement> {
-  name: ReactNode;
-  email?: ReactNode;
-  /** Initials shown in the avatar. */
-  initials?: string;
-  /** Avatar image URL (wins over initials). */
-  avatarSrc?: string;
-  avatarSize?: AvatarSize;
-}
-
-/** `.oc-user`: avatar with name and e-mail. */
-export const User = forwardRef<HTMLDivElement, UserProps>(function User(
-  { name, email, initials, avatarSrc, avatarSize = "md", className, ...rest },
-  ref,
-) {
-  return (
-    <div ref={ref} className={cx("oc-user", className)} {...rest}>
-      <Avatar size={avatarSize} src={avatarSrc}>{initials}</Avatar>
-      <span className="oc-user-text">
-        <span className="oc-user-name">{name}</span>
-        {email != null && <span className="oc-user-email">{email}</span>}
-      </span>
-    </div>
-  );
-});
+import { forwardRef } from "react";
+import type { HTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+import { Avatar } from "./Avatar";
+import type { AvatarSize } from "./Avatar";
+
+export interface UserProps extends HTMLAttributes<HTMLDivElement> {
+  name: ReactNode;
+  email?: ReactNode;
+  /** Initials shown in the avatar. */
+  initials?: string;
+  /** Avatar image URL (wins over initials). */
+  avatarSrc?: string;
+  avatarSize?: AvatarSize;
+}
+
+/** `.oc-user`: avatar with name and e-mail. */
+export const User = forwardRef<HTMLDivElement, UserProps>(function User(
+  { name, email, initials, avatarSrc, avatarSize = "md", className, ...rest },
+  ref,
+) {
+  return (
+    <div ref={ref} className={cx("oc-user", className)} {...rest}>
+      <Avatar size={avatarSize} src={avatarSrc}>{initials}</Avatar>
+      <span className="oc-user-text">
+        <span className="oc-user-name">{name}</span>
+        {email != null && <span className="oc-user-email">{email}</span>}
+      </span>
+    </div>
+  );
+});

package/src/components/VersionBanner.tsx

@@ -1,41 +1,41 @@
-// File: packages/react/src/components/VersionBanner.tsx
-// Map: VersionBanner = chip (role=status) -> dot -> long text -> short text -> reload action
-// Renders nothing while `version` is empty. Your app sets `version` when it sees a newer build.
-import { forwardRef } from "react";
-import type { HTMLAttributes, ReactNode } from "react";
-import { cx } from "../utils";
-
-export interface VersionBannerProps extends HTMLAttributes<HTMLDivElement> {
-  /** The new version, e.g. "v0.6.0". Empty = no banner. */
-  version?: string | null;
-  /** Long text; default "New version (vX) available - reload the page". */
-  text?: ReactNode;
-  /** Short text below 40rem; default "New version". */
-  short?: ReactNode;
-  actionLabel?: ReactNode;
-  /** Custom reload; without it the action is a plain link to the current page. */
-  onReload?: () => void;
-  tone?: "warning" | "info" | "success";
-  floating?: boolean;
-}
-
-/** `.oc-version-banner`: "new version available - reload" chip. */
-export const VersionBanner = forwardRef<HTMLDivElement, VersionBannerProps>(function VersionBanner(
-  { version, text, short = "New version", actionLabel = "Reload", onReload, tone = "warning", floating, className, ...rest },
-  ref,
-) {
-  if (!version) return null;
-  const cls = cx("oc-version-banner", tone !== "warning" && `oc-version-banner--${tone}`, floating && "oc-version-banner--floating", className);
-  return (
-    <div ref={ref} className={cls} role="status" {...rest}>
-      <span className="oc-version-banner-dot" aria-hidden="true" />
-      <span className="oc-version-banner-text">{text ?? `New version (${version}) available - reload the page`}</span>
-      <span className="oc-version-banner-short">{short}</span>
-      {onReload ? (
-        <button className="oc-version-banner-action" type="button" onClick={onReload}>{actionLabel}</button>
-      ) : (
-        <a className="oc-version-banner-action" href="">{actionLabel}</a>
-      )}
-    </div>
-  );
-});
+// File: packages/react/src/components/VersionBanner.tsx
+// Map: VersionBanner = chip (role=status) -> dot -> long text -> short text -> reload action
+// Renders nothing while `version` is empty. Your app sets `version` when it sees a newer build.
+import { forwardRef } from "react";
+import type { HTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+
+export interface VersionBannerProps extends HTMLAttributes<HTMLDivElement> {
+  /** The new version, e.g. "v0.6.0". Empty = no banner. */
+  version?: string | null;
+  /** Long text; default "New version (vX) available - reload the page". */
+  text?: ReactNode;
+  /** Short text below 40rem; default "New version". */
+  short?: ReactNode;
+  actionLabel?: ReactNode;
+  /** Custom reload; without it the action is a plain link to the current page. */
+  onReload?: () => void;
+  tone?: "warning" | "info" | "success";
+  floating?: boolean;
+}
+
+/** `.oc-version-banner`: "new version available - reload" chip. */
+export const VersionBanner = forwardRef<HTMLDivElement, VersionBannerProps>(function VersionBanner(
+  { version, text, short = "New version", actionLabel = "Reload", onReload, tone = "warning", floating, className, ...rest },
+  ref,
+) {
+  if (!version) return null;
+  const cls = cx("oc-version-banner", tone !== "warning" && `oc-version-banner--${tone}`, floating && "oc-version-banner--floating", className);
+  return (
+    <div ref={ref} className={cls} role="status" {...rest}>
+      <span className="oc-version-banner-dot" aria-hidden="true" />
+      <span className="oc-version-banner-text">{text ?? `New version (${version}) available - reload the page`}</span>
+      <span className="oc-version-banner-short">{short}</span>
+      {onReload ? (
+        <button className="oc-version-banner-action" type="button" onClick={onReload}>{actionLabel}</button>
+      ) : (
+        <a className="oc-version-banner-action" href="">{actionLabel}</a>
+      )}
+    </div>
+  );
+});