@birdycom/omniaui-react 0.11.0 → 0.11.1

package/src/components/BarcodeInput.tsx

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

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

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

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

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

@@ -1,27 +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");
+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");