@birdycom/omniaui-react 0.11.0 → 0.11.1

package/src/components/AlphaTabs.tsx

@@ -1,63 +1,63 @@
-// File: packages/react/src/components/AlphaTabs.tsx
-// Map: AlphaTabs = nav -> "All" item -> one item per letter (current / disabled)
-// With `href` the items are links (server filtering); without it they are buttons that call onChange.
-"use client";
-
-import { forwardRef } from "react";
-import type { HTMLAttributes } from "react";
-import { cx } from "../utils";
-import { useControllable } from "../hooks";
-
-const AZ = "ABCDEFGHIJKLMNOPQRSTUVWXYZ".split("");
-
-export interface AlphaTabsProps extends Omit<HTMLAttributes<HTMLElement>, "onChange"> {
-  /** Letters to show (default A-Z). */
-  letters?: string[];
-  /** Letters that have entries; the others are disabled. Default: all letters. */
-  available?: string[];
-  /** Current letter, or "all". */
-  value?: string;
-  defaultValue?: string;
-  onChange?: (letter: string) => void;
-  /** Build a link per letter, e.g. `(l) => "?letter=" + l`. */
-  href?: (letter: string) => string;
-  allLabel?: string;
-  wrap?: boolean;
-  size?: "sm";
-  plain?: boolean;
-}
-
-/** `nav.oc-alpha-tabs`: All + A-Z letter filter. */
-export const AlphaTabs = forwardRef<HTMLElement, AlphaTabsProps>(function AlphaTabs(
-  { letters = AZ, available, value, defaultValue = "all", onChange, href, allLabel = "All", wrap, size, plain, className, ...rest },
-  ref,
-) {
-  const [current, setCurrent] = useControllable(value, defaultValue, onChange);
-  const cls = cx("oc-alpha-tabs", wrap && "oc-alpha-tabs--wrap", size && `oc-alpha-tabs--${size}`, plain && "oc-alpha-tabs--plain", className);
-
-  const item = (key: string, label: string, extra?: string) => {
-    const isCurrent = current === key;
-    const disabled = key !== "all" && available !== undefined && !available.includes(key);
-    const itemCls = cx("oc-alpha-tabs-item", extra);
-    if (href) {
-      // A disabled link has no href, so it cannot be followed.
-      return (
-        <a key={key} className={itemCls} href={disabled ? undefined : href(key)} aria-current={isCurrent ? "true" : undefined} aria-disabled={disabled ? "true" : undefined}>
-          {label}
-        </a>
-      );
-    }
-    return (
-      <button key={key} type="button" className={itemCls} aria-current={isCurrent ? "true" : undefined} disabled={disabled} onClick={() => setCurrent(key)}>
-        {label}
-      </button>
-    );
-  };
-
-  return (
-    <nav ref={ref} className={cls} aria-label="Filter by letter" {...rest}>
-      {item("all", allLabel, "oc-alpha-tabs-item--all")}
-      {letters.map((l) => item(l, l))}
-    </nav>
-  );
-});
+// File: packages/react/src/components/AlphaTabs.tsx
+// Map: AlphaTabs = nav -> "All" item -> one item per letter (current / disabled)
+// With `href` the items are links (server filtering); without it they are buttons that call onChange.
+"use client";
+
+import { forwardRef } from "react";
+import type { HTMLAttributes } from "react";
+import { cx } from "../utils";
+import { useControllable } from "../hooks";
+
+const AZ = "ABCDEFGHIJKLMNOPQRSTUVWXYZ".split("");
+
+export interface AlphaTabsProps extends Omit<HTMLAttributes<HTMLElement>, "onChange"> {
+  /** Letters to show (default A-Z). */
+  letters?: string[];
+  /** Letters that have entries; the others are disabled. Default: all letters. */
+  available?: string[];
+  /** Current letter, or "all". */
+  value?: string;
+  defaultValue?: string;
+  onChange?: (letter: string) => void;
+  /** Build a link per letter, e.g. `(l) => "?letter=" + l`. */
+  href?: (letter: string) => string;
+  allLabel?: string;
+  wrap?: boolean;
+  size?: "sm";
+  plain?: boolean;
+}
+
+/** `nav.oc-alpha-tabs`: All + A-Z letter filter. */
+export const AlphaTabs = forwardRef<HTMLElement, AlphaTabsProps>(function AlphaTabs(
+  { letters = AZ, available, value, defaultValue = "all", onChange, href, allLabel = "All", wrap, size, plain, className, ...rest },
+  ref,
+) {
+  const [current, setCurrent] = useControllable(value, defaultValue, onChange);
+  const cls = cx("oc-alpha-tabs", wrap && "oc-alpha-tabs--wrap", size && `oc-alpha-tabs--${size}`, plain && "oc-alpha-tabs--plain", className);
+
+  const item = (key: string, label: string, extra?: string) => {
+    const isCurrent = current === key;
+    const disabled = key !== "all" && available !== undefined && !available.includes(key);
+    const itemCls = cx("oc-alpha-tabs-item", extra);
+    if (href) {
+      // A disabled link has no href, so it cannot be followed.
+      return (
+        <a key={key} className={itemCls} href={disabled ? undefined : href(key)} aria-current={isCurrent ? "true" : undefined} aria-disabled={disabled ? "true" : undefined}>
+          {label}
+        </a>
+      );
+    }
+    return (
+      <button key={key} type="button" className={itemCls} aria-current={isCurrent ? "true" : undefined} disabled={disabled} onClick={() => setCurrent(key)}>
+        {label}
+      </button>
+    );
+  };
+
+  return (
+    <nav ref={ref} className={cls} aria-label="Filter by letter" {...rest}>
+      {item("all", allLabel, "oc-alpha-tabs-item--all")}
+      {letters.map((l) => item(l, l))}
+    </nav>
+  );
+});

package/src/components/Attachment.tsx

@@ -1,140 +1,140 @@
-// File: packages/react/src/components/Attachment.tsx
-// Map: types + type / extension helpers -> Attachment (file chip) -> AttachmentImage -> AttachmentThumb -> AttachmentList (demo files)
-// Same markup as packages/ui/snippets/attachment.html. No JavaScript: onRemove is yours, the upload progress is a custom property.
-import { forwardRef } from "react";
-import type { CSSProperties, HTMLAttributes, ReactNode } from "react";
-import { cx } from "../utils";
-
-export type AttachmentType = "pdf" | "doc" | "sheet" | "zip" | "image";
-
-export interface AttachmentFile {
-  name: string;
-  /** "1.2 MB", or the error text when `state` is "error". */
-  size?: ReactNode;
-  /** Icon tint. Derived from the extension when empty. */
-  type?: AttachmentType;
-  /** Text in the icon tile (default: the extension, e.g. "PDF", "XLS"). */
-  ext?: string;
-  /** Download link (the chip becomes an `<a download>` unless it is removable). */
-  href?: string;
-  /** Small preview image in the icon tile. */
-  image?: string;
-  state?: "uploading" | "error";
-  /** Upload progress in % (shown while uploading). */
-  progress?: number;
-  /** Show the remove button (composer). */
-  removable?: boolean;
-  removeLabel?: string;
-}
-
-const TYPES: Record<string, AttachmentType> = {
-  pdf: "pdf", doc: "doc", docx: "doc", odt: "doc", rtf: "doc", txt: "doc", xls: "sheet", xlsx: "sheet", csv: "sheet", ods: "sheet",
-  zip: "zip", rar: "zip", "7z": "zip", gz: "zip", jpg: "image", jpeg: "image", png: "image", gif: "image", webp: "image", heic: "image", avif: "image",
-};
-const extOf = (name: string) => (name.includes(".") ? name.split(".").pop()!.toLowerCase() : "");
-/** Icon text and tint of a file name (`Plan.xlsx` -> XLS, sheet). */
-export const attachmentMeta = (f: AttachmentFile) => ({
-  ext: f.ext ?? extOf(f.name).toUpperCase().replace(/^(DOC|XLS|PPT)X$/, "$1"),
-  type: f.type ?? TYPES[extOf(f.name)],
-});
-
-export interface AttachmentProps extends Omit<HTMLAttributes<HTMLElement>, "type">, AttachmentFile {
-  onRemove?: () => void;
-}
-
-/** `.oc-attachment` file chip: icon tile, name, size and an optional remove button. */
-export const Attachment = forwardRef<HTMLElement, AttachmentProps>(function Attachment(
-  { name, size, type, ext, href, image, state, progress = 0, removable, removeLabel, onRemove, className, style, ...rest },
-  ref,
-) {
-  const meta = attachmentMeta({ name, type, ext });
-  const uploading = state === "uploading";
-  const props = {
-    className: cx("oc-attachment", meta.type && `oc-attachment--${meta.type}`, state && `oc-attachment--${state}`, className),
-    style: uploading ? ({ "--oc-attachment-progress": `${progress}%`, ...style } as CSSProperties) : style,
-    ...rest,
-  };
-  const inner = (
-    <>
-      <span className="oc-attachment__icon" aria-hidden="true">{image ? <img src={image} alt="" /> : meta.ext}</span>
-      <span className="oc-attachment__body">
-        <span className="oc-attachment__name">{name}</span>
-        {uploading ? <span className="oc-attachment__size" role="status">{size ?? `Uploading… ${progress}%`}</span> : size != null && <span className="oc-attachment__size">{size}</span>}
-      </span>
-      {removable && (
-        <button type="button" className="oc-attachment__remove" aria-label={removeLabel ?? (uploading ? `Cancel upload of ${name}` : `Remove ${name}`)} onClick={onRemove}>&#10005;</button>
-      )}
-    </>
-  );
-  return href && !removable
-    ? <a ref={ref as React.Ref<HTMLAnchorElement>} href={href} download {...props}>{inner}</a>
-    : <div ref={ref as React.Ref<HTMLDivElement>} {...props}>{inner}</div>;
-});
-
-export interface AttachmentImageProps extends HTMLAttributes<HTMLAnchorElement> {
-  href?: string;
-  /** Image URL. Leave empty to show placeholder art. */
-  src?: string;
-  alt: string;
-  art?: number;
-  /** e.g. "worktop-sample.jpg · 2.1 MB". */
-  caption?: ReactNode;
-}
-
-const art = (n?: number) => cx("oc-media-art", n != null && `oc-media-art--${n}`);
-
-/** `a.oc-attachment-image`: 4:3 image preview inside a message. */
-export function AttachmentImage({ href, src, alt, art: n, caption, className, ...rest }: AttachmentImageProps) {
-  return (
-    <a className={cx("oc-attachment-image", className)} href={href} {...rest}>
-      {src ? <img src={src} alt={alt} /> : <span className={art(n)} role="img" aria-label={alt} />}
-      {caption != null && <span className="oc-attachment-image__caption">{caption}</span>}
-    </a>
-  );
-}
-
-export interface AttachmentThumbProps extends HTMLAttributes<HTMLElement> {
-  src?: string;
-  alt: string;
-  art?: number;
-  /** Remove button label, e.g. "Remove screenshot.png". No label = no button. */
-  removeLabel?: string;
-  onRemove?: () => void;
-  as?: "div" | "span";
-}
-
-/** `.oc-attachment-thumb`: square thumbnail of a pasted screenshot. */
-export function AttachmentThumb({ src, alt, art: n, removeLabel, onRemove, as: Tag = "div", className, ...rest }: AttachmentThumbProps) {
-  return (
-    <Tag className={cx("oc-attachment-thumb", className)} {...rest}>
-      {src ? <img src={src} alt={alt} /> : <span className={art(n)} role="img" aria-label={alt} />}
-      {removeLabel && <button type="button" className="oc-attachment__remove" aria-label={removeLabel} onClick={onRemove}>&#10005;</button>}
-    </Tag>
-  );
-}
-
-export interface AttachmentListProps extends HTMLAttributes<HTMLElement> {
-  /** File chips; `children` replace them. */
-  items?: AttachmentFile[];
-  /** One per line, full width. */
-  stack?: boolean;
-  /** `ul` (default, items in `li`) or `div`. */
-  as?: "ul" | "div";
-  onRemove?: (file: AttachmentFile, index: number) => void;
-}
-
-const DEMO: AttachmentFile[] = [
-  { name: "Quote kitchen Dewitte v2.pdf", size: "1.2 MB", href: "#quote.pdf" },
-  { name: "Measurements ground floor.xlsx", size: "86 KB", href: "#measurements.xlsx" },
-  { name: "Contract addendum.docx", size: "240 KB", href: "#contract.docx" },
-  { name: "Plans architect.zip", size: "14.8 MB", href: "#plans.zip" },
-];
-
-/** `.oc-attachment-list`: wrapping row of chips. */
-export function AttachmentList({ items = DEMO, stack, as: Tag = "ul", onRemove, className, children, "aria-label": label = "Files in this message", ...rest }: AttachmentListProps) {
-  const chips = children ?? items.map((f, i) => {
-    const chip = <Attachment key={i} {...f} onRemove={() => onRemove?.(f, i)} />;
-    return Tag === "ul" ? <li key={i}>{chip}</li> : chip;
-  });
-  return <Tag className={cx("oc-attachment-list", stack && "oc-attachment-list--stack", className)} aria-label={label} {...rest}>{chips}</Tag>;
-}
+// File: packages/react/src/components/Attachment.tsx
+// Map: types + type / extension helpers -> Attachment (file chip) -> AttachmentImage -> AttachmentThumb -> AttachmentList (demo files)
+// Same markup as packages/ui/snippets/attachment.html. No JavaScript: onRemove is yours, the upload progress is a custom property.
+import { forwardRef } from "react";
+import type { CSSProperties, HTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+
+export type AttachmentType = "pdf" | "doc" | "sheet" | "zip" | "image";
+
+export interface AttachmentFile {
+  name: string;
+  /** "1.2 MB", or the error text when `state` is "error". */
+  size?: ReactNode;
+  /** Icon tint. Derived from the extension when empty. */
+  type?: AttachmentType;
+  /** Text in the icon tile (default: the extension, e.g. "PDF", "XLS"). */
+  ext?: string;
+  /** Download link (the chip becomes an `<a download>` unless it is removable). */
+  href?: string;
+  /** Small preview image in the icon tile. */
+  image?: string;
+  state?: "uploading" | "error";
+  /** Upload progress in % (shown while uploading). */
+  progress?: number;
+  /** Show the remove button (composer). */
+  removable?: boolean;
+  removeLabel?: string;
+}
+
+const TYPES: Record<string, AttachmentType> = {
+  pdf: "pdf", doc: "doc", docx: "doc", odt: "doc", rtf: "doc", txt: "doc", xls: "sheet", xlsx: "sheet", csv: "sheet", ods: "sheet",
+  zip: "zip", rar: "zip", "7z": "zip", gz: "zip", jpg: "image", jpeg: "image", png: "image", gif: "image", webp: "image", heic: "image", avif: "image",
+};
+const extOf = (name: string) => (name.includes(".") ? name.split(".").pop()!.toLowerCase() : "");
+/** Icon text and tint of a file name (`Plan.xlsx` -> XLS, sheet). */
+export const attachmentMeta = (f: AttachmentFile) => ({
+  ext: f.ext ?? extOf(f.name).toUpperCase().replace(/^(DOC|XLS|PPT)X$/, "$1"),
+  type: f.type ?? TYPES[extOf(f.name)],
+});
+
+export interface AttachmentProps extends Omit<HTMLAttributes<HTMLElement>, "type">, AttachmentFile {
+  onRemove?: () => void;
+}
+
+/** `.oc-attachment` file chip: icon tile, name, size and an optional remove button. */
+export const Attachment = forwardRef<HTMLElement, AttachmentProps>(function Attachment(
+  { name, size, type, ext, href, image, state, progress = 0, removable, removeLabel, onRemove, className, style, ...rest },
+  ref,
+) {
+  const meta = attachmentMeta({ name, type, ext });
+  const uploading = state === "uploading";
+  const props = {
+    className: cx("oc-attachment", meta.type && `oc-attachment--${meta.type}`, state && `oc-attachment--${state}`, className),
+    style: uploading ? ({ "--oc-attachment-progress": `${progress}%`, ...style } as CSSProperties) : style,
+    ...rest,
+  };
+  const inner = (
+    <>
+      <span className="oc-attachment__icon" aria-hidden="true">{image ? <img src={image} alt="" /> : meta.ext}</span>
+      <span className="oc-attachment__body">
+        <span className="oc-attachment__name">{name}</span>
+        {uploading ? <span className="oc-attachment__size" role="status">{size ?? `Uploading… ${progress}%`}</span> : size != null && <span className="oc-attachment__size">{size}</span>}
+      </span>
+      {removable && (
+        <button type="button" className="oc-attachment__remove" aria-label={removeLabel ?? (uploading ? `Cancel upload of ${name}` : `Remove ${name}`)} onClick={onRemove}>&#10005;</button>
+      )}
+    </>
+  );
+  return href && !removable
+    ? <a ref={ref as React.Ref<HTMLAnchorElement>} href={href} download {...props}>{inner}</a>
+    : <div ref={ref as React.Ref<HTMLDivElement>} {...props}>{inner}</div>;
+});
+
+export interface AttachmentImageProps extends HTMLAttributes<HTMLAnchorElement> {
+  href?: string;
+  /** Image URL. Leave empty to show placeholder art. */
+  src?: string;
+  alt: string;
+  art?: number;
+  /** e.g. "worktop-sample.jpg · 2.1 MB". */
+  caption?: ReactNode;
+}
+
+const art = (n?: number) => cx("oc-media-art", n != null && `oc-media-art--${n}`);
+
+/** `a.oc-attachment-image`: 4:3 image preview inside a message. */
+export function AttachmentImage({ href, src, alt, art: n, caption, className, ...rest }: AttachmentImageProps) {
+  return (
+    <a className={cx("oc-attachment-image", className)} href={href} {...rest}>
+      {src ? <img src={src} alt={alt} /> : <span className={art(n)} role="img" aria-label={alt} />}
+      {caption != null && <span className="oc-attachment-image__caption">{caption}</span>}
+    </a>
+  );
+}
+
+export interface AttachmentThumbProps extends HTMLAttributes<HTMLElement> {
+  src?: string;
+  alt: string;
+  art?: number;
+  /** Remove button label, e.g. "Remove screenshot.png". No label = no button. */
+  removeLabel?: string;
+  onRemove?: () => void;
+  as?: "div" | "span";
+}
+
+/** `.oc-attachment-thumb`: square thumbnail of a pasted screenshot. */
+export function AttachmentThumb({ src, alt, art: n, removeLabel, onRemove, as: Tag = "div", className, ...rest }: AttachmentThumbProps) {
+  return (
+    <Tag className={cx("oc-attachment-thumb", className)} {...rest}>
+      {src ? <img src={src} alt={alt} /> : <span className={art(n)} role="img" aria-label={alt} />}
+      {removeLabel && <button type="button" className="oc-attachment__remove" aria-label={removeLabel} onClick={onRemove}>&#10005;</button>}
+    </Tag>
+  );
+}
+
+export interface AttachmentListProps extends HTMLAttributes<HTMLElement> {
+  /** File chips; `children` replace them. */
+  items?: AttachmentFile[];
+  /** One per line, full width. */
+  stack?: boolean;
+  /** `ul` (default, items in `li`) or `div`. */
+  as?: "ul" | "div";
+  onRemove?: (file: AttachmentFile, index: number) => void;
+}
+
+const DEMO: AttachmentFile[] = [
+  { name: "Quote kitchen Dewitte v2.pdf", size: "1.2 MB", href: "#quote.pdf" },
+  { name: "Measurements ground floor.xlsx", size: "86 KB", href: "#measurements.xlsx" },
+  { name: "Contract addendum.docx", size: "240 KB", href: "#contract.docx" },
+  { name: "Plans architect.zip", size: "14.8 MB", href: "#plans.zip" },
+];
+
+/** `.oc-attachment-list`: wrapping row of chips. */
+export function AttachmentList({ items = DEMO, stack, as: Tag = "ul", onRemove, className, children, "aria-label": label = "Files in this message", ...rest }: AttachmentListProps) {
+  const chips = children ?? items.map((f, i) => {
+    const chip = <Attachment key={i} {...f} onRemove={() => onRemove?.(f, i)} />;
+    return Tag === "ul" ? <li key={i}>{chip}</li> : chip;
+  });
+  return <Tag className={cx("oc-attachment-list", stack && "oc-attachment-list--stack", className)} aria-label={label} {...rest}>{chips}</Tag>;
+}

package/src/components/Avatar.tsx

@@ -1,32 +1,32 @@
-import { forwardRef } from "react";
-import type { HTMLAttributes } from "react";
-import { cx } from "../utils";
-
-export type AvatarSize = "sm" | "md" | "lg" | "xl";
-
-export interface AvatarProps extends HTMLAttributes<HTMLSpanElement> {
-  size?: AvatarSize;
-  /** Image URL; when set the avatar renders an <img>. Otherwise `children` (initials) are shown. */
-  src?: string;
-  alt?: string;
-}
-
-/** `<span class="oc-avatar oc-avatar--{size}">SC</span>` */
-export const Avatar = forwardRef<HTMLSpanElement, AvatarProps>(function Avatar(
-  { size = "md", src, alt = "", className, children, ...rest },
-  ref,
-) {
-  return (
-    <span ref={ref} className={cx("oc-avatar", size !== "md" && `oc-avatar--${size}`, className)} {...rest}>
-      {src ? <img src={src} alt={alt} /> : children}
-    </span>
-  );
-});
-
-/** `<div class="oc-avatar-group">` */
-export const AvatarGroup = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(function AvatarGroup(
-  { className, ...rest },
-  ref,
-) {
-  return <div ref={ref} className={cx("oc-avatar-group", className)} {...rest} />;
-});
+import { forwardRef } from "react";
+import type { HTMLAttributes } from "react";
+import { cx } from "../utils";
+
+export type AvatarSize = "sm" | "md" | "lg" | "xl";
+
+export interface AvatarProps extends HTMLAttributes<HTMLSpanElement> {
+  size?: AvatarSize;
+  /** Image URL; when set the avatar renders an <img>. Otherwise `children` (initials) are shown. */
+  src?: string;
+  alt?: string;
+}
+
+/** `<span class="oc-avatar oc-avatar--{size}">SC</span>` */
+export const Avatar = forwardRef<HTMLSpanElement, AvatarProps>(function Avatar(
+  { size = "md", src, alt = "", className, children, ...rest },
+  ref,
+) {
+  return (
+    <span ref={ref} className={cx("oc-avatar", size !== "md" && `oc-avatar--${size}`, className)} {...rest}>
+      {src ? <img src={src} alt={alt} /> : children}
+    </span>
+  );
+});
+
+/** `<div class="oc-avatar-group">` */
+export const AvatarGroup = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(function AvatarGroup(
+  { className, ...rest },
+  ref,
+) {
+  return <div ref={ref} className={cx("oc-avatar-group", className)} {...rest} />;
+});

package/src/components/BackLink.tsx

@@ -1,11 +1,11 @@
-import { forwardRef } from "react";
-import type { AnchorHTMLAttributes } from "react";
-import { cx } from "../utils";
-
-/** `<a class="oc-back-link">Back to Products</a>` */
-export const BackLink = forwardRef<HTMLAnchorElement, AnchorHTMLAttributes<HTMLAnchorElement>>(function BackLink(
-  { className, ...rest },
-  ref,
-) {
-  return <a ref={ref} className={cx("oc-back-link", className)} {...rest} />;
-});
+import { forwardRef } from "react";
+import type { AnchorHTMLAttributes } from "react";
+import { cx } from "../utils";
+
+/** `<a class="oc-back-link">Back to Products</a>` */
+export const BackLink = forwardRef<HTMLAnchorElement, AnchorHTMLAttributes<HTMLAnchorElement>>(function BackLink(
+  { className, ...rest },
+  ref,
+) {
+  return <a ref={ref} className={cx("oc-back-link", className)} {...rest} />;
+});

package/src/components/Badge.tsx

@@ -1,14 +1,14 @@
-import { forwardRef } from "react";
-import type { HTMLAttributes } from "react";
-import { cx } from "../utils";
-
-export type BadgeVariant = "default" | "secondary" | "outline" | "destructive" | "success" | "warning" | "info";
-
-export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
-  variant?: BadgeVariant;
-}
-
-/** `<span class="oc-badge oc-badge--{variant}">` */
-export const Badge = forwardRef<HTMLSpanElement, BadgeProps>(function Badge({ variant = "default", className, ...rest }, ref) {
-  return <span ref={ref} className={cx("oc-badge", variant !== "default" && `oc-badge--${variant}`, className)} {...rest} />;
-});
+import { forwardRef } from "react";
+import type { HTMLAttributes } from "react";
+import { cx } from "../utils";
+
+export type BadgeVariant = "default" | "secondary" | "outline" | "destructive" | "success" | "warning" | "info";
+
+export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+  variant?: BadgeVariant;
+}
+
+/** `<span class="oc-badge oc-badge--{variant}">` */
+export const Badge = forwardRef<HTMLSpanElement, BadgeProps>(function Badge({ variant = "default", className, ...rest }, ref) {
+  return <span ref={ref} className={cx("oc-badge", variant !== "default" && `oc-badge--${variant}`, className)} {...rest} />;
+});