@birdycom/omniaui-react 0.0.0-stage → 0.11.0

package/src/components/AlphaTabs.tsx

@@ -0,0 +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>
+  );
+});

package/src/components/Attachment.tsx

@@ -0,0 +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>;
+}

package/src/components/Avatar.tsx

@@ -0,0 +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} />;
+});

package/src/components/BackLink.tsx

@@ -0,0 +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} />;
+});

package/src/components/Badge.tsx

@@ -0,0 +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} />;
+});

package/src/components/BarcodeInput.tsx

@@ -0,0 +1,64 @@
+// File: packages/react/src/components/BarcodeInput.tsx
+// Map: props -> component (label, digits-only field, preview figure with placeholder bars or your own graphic)
+// Same markup as packages/ui/snippets/barcode-input.html. No barcode drawing: pass your own <svg>/<canvas> as children.
+"use client";
+
+import { forwardRef, useId } from "react";
+import type { InputHTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+import { useControllable } from "../hooks";
+
+export interface BarcodeInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "defaultValue" | "onChange" | "children"> {
+  value?: string;
+  defaultValue?: string;
+  onChange?: (value: string) => void;
+  /** Visible label above the field. */
+  label?: ReactNode;
+  /** Text in the preview while the field is empty. */
+  emptyText?: string;
+  error?: boolean;
+  /** Your own barcode graphic; replaces the placeholder bars. */
+  children?: ReactNode;
+  /** Class for the wrapper (`className` goes to the input). */
+  wrapperClassName?: string;
+}
+
+/** `.oc-barcode-input`: code field + preview. Keeps digits only (hand scanners type like a keyboard). */
+export const BarcodeInput = forwardRef<HTMLInputElement, BarcodeInputProps>(function BarcodeInput(
+  { value, defaultValue, onChange, label, emptyText = "No code yet", error, children, wrapperClassName, className, id, ...rest },
+  ref,
+) {
+  const auto = `oc-barcode-${useId().replace(/:/g, "")}`;
+  const inputId = id ?? auto;
+  const [code, setCode] = useControllable<string>(value, defaultValue ?? "", onChange);
+  const empty = !code;
+  return (
+    <div className={cx("oc-barcode-input", wrapperClassName)}>
+      {label != null && <label className="oc-field-label" htmlFor={inputId}>{label}</label>}
+      <div className="oc-input-group oc-input-group--affix">
+        <span className="oc-input-addon" aria-hidden="true">
+          <svg viewBox="0 0 16 16"><path fill="currentColor" d="M1 1h1.4v14H1zm2.2 0h.7v14h-.7zm1.6 0h1.5v14H4.8zm2.4 0h.7v14H7.2zm1.6 0h.7v14H8.8zm1.5 0h1.4v14h-1.4zm2.2 0H15v14h-.9z" /></svg>
+        </span>
+        <input
+          ref={ref}
+          id={inputId}
+          className={cx("oc-input", "oc-barcode-input-field", className)}
+          type="text"
+          inputMode="text"
+          autoComplete="off"
+          spellCheck={false}
+          maxLength={80}
+          placeholder="EAN-13 or internal code"
+          aria-invalid={error ? true : undefined}
+          value={code}
+          onChange={(e) => setCode(e.target.value)}
+          {...rest}
+        />
+      </div>
+      <figure className={cx("oc-barcode-preview", empty && "oc-barcode-preview--empty")} aria-label="Barcode preview">
+        {children ?? <div className="oc-barcode-preview-bars" aria-hidden="true" />}
+        <figcaption className="oc-barcode-preview-code">{empty ? emptyText : code}</figcaption>
+      </figure>
+    </div>
+  );
+});

package/src/components/Breadcrumb.tsx

@@ -0,0 +1,32 @@
+import { forwardRef } from "react";
+import type { HTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+
+export interface BreadcrumbItemData {
+  label: ReactNode;
+  /** Omit (or put last) to mark the current page. */
+  href?: string;
+}
+
+export interface BreadcrumbProps extends HTMLAttributes<HTMLElement> {
+  items?: BreadcrumbItemData[];
+}
+
+/** `<nav class="oc-breadcrumb">` with links and a final `aria-current="page"` item. */
+export const Breadcrumb = forwardRef<HTMLElement, BreadcrumbProps>(function Breadcrumb(
+  { items, children, className, "aria-label": ariaLabel = "Breadcrumb", ...rest },
+  ref,
+) {
+  return (
+    <nav ref={ref} className={cx("oc-breadcrumb", className)} aria-label={ariaLabel} {...rest}>
+      {items?.map((item, i) =>
+        item.href && i < items.length - 1 ? (
+          <a key={i} className="oc-breadcrumb-item" href={item.href}>{item.label}</a>
+        ) : (
+          <span key={i} className="oc-breadcrumb-item" aria-current="page">{item.label}</span>
+        ),
+      )}
+      {children}
+    </nav>
+  );
+});

package/src/components/BrowserFrame.tsx

@@ -0,0 +1,48 @@
+// File: packages/react/src/components/BrowserFrame.tsx
+// Map: props -> BrowserFrame (figure -> bar: dots, address, actions -> view (img or children) -> caption)
+// Same markup as packages/ui/snippets/browser-frame.html.
+import { forwardRef } from "react";
+import type { CSSProperties, HTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+
+export interface BrowserFrameProps extends HTMLAttributes<HTMLElement> {
+  /** Text in the address pill. Leave out (or use `minimal`) for dots only. */
+  url?: string;
+  /** Screenshot URL. `children` replace it (live content). */
+  src?: string;
+  alt?: string;
+  caption?: ReactNode;
+  /** Small glyphs on the right of the bar. */
+  actions?: ReactNode;
+  minimal?: boolean;
+  dark?: boolean;
+  tilt?: boolean;
+  /** View height follows the content instead of the ratio. */
+  auto?: boolean;
+  /** View ratio, e.g. "16 / 9". Default 16 / 10. */
+  ratio?: string;
+}
+
+/** `figure.oc-browser-frame`: fake browser chrome around a screenshot or any content. */
+export const BrowserFrame = forwardRef<HTMLElement, BrowserFrameProps>(function BrowserFrame(
+  { url, src, alt = "", caption, actions, minimal, dark, tilt, auto, ratio, className, style, children, ...rest },
+  ref,
+) {
+  const vars = ratio ? ({ "--oc-browser-frame-ratio": ratio } as CSSProperties) : undefined;
+  return (
+    <figure
+      ref={ref}
+      className={cx("oc-browser-frame", minimal && "oc-browser-frame--minimal", dark && "oc-browser-frame--dark", tilt && "oc-browser-frame--tilt", auto && "oc-browser-frame--auto", className)}
+      style={{ ...vars, ...style }}
+      {...rest}
+    >
+      <div className="oc-browser-frame__bar">
+        <i /><i /><i />
+        {url != null && <span className="oc-browser-frame__address">{url}</span>}
+        {actions != null && <span className="oc-browser-frame__actions" aria-hidden="true">{actions}</span>}
+      </div>
+      <div className="oc-browser-frame__view">{children ?? (src ? <img src={src} alt={alt} /> : <div className="oc-media-art" role="img" aria-label={alt} />)}</div>
+      {caption != null && <figcaption className="oc-browser-frame__caption">{caption}</figcaption>}
+    </figure>
+  );
+});

package/src/components/BusyOverlay.tsx

@@ -0,0 +1,52 @@
+// File: packages/react/src/components/BusyOverlay.tsx
+// Map: types -> BusyOverlay (<dialog closedby="none">: spinner or progress, title, text)
+// Same markup as packages/ui/snippets/busy-overlay.html. Open it with `open` while a long submit or upload runs;
+// the dialog is modal (the page is inert) and Esc does not close it. The 300ms delay before it shows is CSS.
+"use client";
+
+import { forwardRef, useId, useRef } from "react";
+import type { DialogHTMLAttributes, ReactNode } from "react";
+import { attrs, cx } from "../utils";
+import { useDialog, useMergedRef } from "../hooks";
+import type { DialogState } from "../hooks";
+import { Progress } from "./Progress";
+
+export interface BusyOverlayProps extends Omit<DialogHTMLAttributes<HTMLDialogElement>, "title" | "open" | "onClose">, DialogState {
+  title?: ReactNode;
+  text?: ReactNode;
+  /** Known percentage: shows `.oc-progress` instead of the spinner. */
+  progress?: number;
+  /** aria-label of the spinner / progress bar (default "Busy"). */
+  label?: string;
+}
+
+/** `dialog.oc-busy-overlay[closedby=none]`. Controlled with `open` / `onOpenChange`, or uncontrolled. */
+export const BusyOverlay = forwardRef<HTMLDialogElement, BusyOverlayProps>(function BusyOverlay(
+  {
+    title = "Saving…", text = "The photos are being processed. This can take a minute; please keep this page open.",
+    progress, label = "Busy", open, defaultOpen, onOpenChange, id, className, ...rest
+  },
+  forwardedRef,
+) {
+  const inner = useRef<HTMLDialogElement>(null);
+  const ref = useMergedRef(inner, forwardedRef);
+  const dlg = useDialog(inner, { open, defaultOpen, onOpenChange });
+  const auto = useId().replace(/[^\w-]/g, "");
+  const base = id ?? `oc-busy-overlay-${auto}`;
+  return (
+    <dialog
+      ref={ref}
+      className={cx("oc-busy-overlay", className)}
+      id={base}
+      {...attrs({ closedby: "none" })}
+      aria-labelledby={`${base}-title`}
+      aria-describedby={text != null ? `${base}-text` : undefined}
+      {...rest}
+      onClose={dlg.onClose}
+    >
+      {progress == null ? <span className="oc-spinner" role="status" aria-label={label} /> : <Progress value={progress} aria-label={label} />}
+      <h2 className="oc-busy-overlay__title" id={`${base}-title`}>{title}</h2>
+      {text != null && <p className="oc-busy-overlay__text" id={`${base}-text`}>{text}</p>}
+    </dialog>
+  );
+});

package/src/components/Button.tsx

@@ -0,0 +1,49 @@
+import { forwardRef } from "react";
+import type { AnchorHTMLAttributes, ButtonHTMLAttributes } from "react";
+import { cx } from "../utils";
+
+export type ButtonVariant = "default" | "secondary" | "outline" | "ghost" | "link" | "destructive" | "success" | "gradient" | "glass";
+export type ButtonSize = "xs" | "sm" | "md" | "lg";
+
+interface ButtonStyleProps {
+  /** Visual variant (`default` = primary). */
+  variant?: ButtonVariant;
+  /** `md` is the default size and adds no class. */
+  size?: ButtonSize;
+  /** Square icon-only button. */
+  icon?: boolean;
+  /** Fully rounded pill shape. */
+  pill?: 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 }) {
+  return cx(
+    "oc-btn",
+    variant !== "default" && `oc-btn--${variant}`,
+    size !== "md" && `oc-btn--${size}`,
+    icon && "oc-btn--icon",
+    pill && "oc-btn--pill",
+    className,
+  );
+}
+
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, ButtonStyleProps {}
+
+/** `<button class="oc-btn oc-btn--{variant} oc-btn--{size}">` */
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(
+  { variant, size, icon, pill, className, ...rest },
+  ref,
+) {
+  return <button ref={ref} className={buttonClass({ variant, size, icon, pill, 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 },
+  ref,
+) {
+  return <a ref={ref} className={buttonClass({ variant, size, icon, pill, className })} {...rest} />;
+});

package/src/components/Card.tsx

@@ -0,0 +1,27 @@
+import { forwardRef } from "react";
+import type { HTMLAttributes } from "react";
+import { cx } from "../utils";
+
+type Tag = "div" | "h3" | "p";
+
+function part<E extends HTMLElement>(tag: Tag, base: string, displayName: string) {
+  const Comp = forwardRef<E, HTMLAttributes<E>>(function Part({ className, ...rest }, ref) {
+    const Element = tag as "div";
+    return <Element ref={ref as React.Ref<HTMLDivElement>} className={cx(base, className)} {...(rest as HTMLAttributes<HTMLDivElement>)} />;
+  });
+  Comp.displayName = displayName;
+  return Comp;
+}
+
+/** `.oc-card` */
+export const Card = part<HTMLDivElement>("div", "oc-card", "Card");
+/** `.oc-card-header` */
+export const CardHeader = part<HTMLDivElement>("div", "oc-card-header", "CardHeader");
+/** `h3.oc-card-title` */
+export const CardTitle = part<HTMLHeadingElement>("h3", "oc-card-title", "CardTitle");
+/** `p.oc-card-description` */
+export const CardDescription = part<HTMLParagraphElement>("p", "oc-card-description", "CardDescription");
+/** `.oc-card-content` */
+export const CardContent = part<HTMLDivElement>("div", "oc-card-content", "CardContent");
+/** `.oc-card-footer` */
+export const CardFooter = part<HTMLDivElement>("div", "oc-card-footer", "CardFooter");