@birdycom/omniaui-react 0.11.0 → 0.11.2

package/src/blocks/BlockAuth.tsx

@@ -1,53 +1,53 @@
-import { forwardRef, useId } from "react";
-import type { FormEvent, HTMLAttributes, ReactNode } from "react";
-import { cx } from "../utils";
-
-export interface BlockAuthProps extends Omit<HTMLAttributes<HTMLDivElement>, "title" | "onSubmit"> {
-  title?: ReactNode;
-  subtitle?: ReactNode;
-  submitLabel?: ReactNode;
-  /** Label of the secondary (social) button; omit to hide it together with the divider. */
-  socialLabel?: ReactNode;
-  dividerLabel?: ReactNode;
-  /** Text under the card, e.g. `Don't have an account? <a href="#">Sign up</a>`. */
-  footer?: ReactNode;
-  onSubmit?: (values: { email: string; password: string }) => void;
-  onSocial?: () => void;
-}
-
-/** `.oc-block-auth`: sign-in card with e-mail, password and an optional social button. */
-export const BlockAuth = forwardRef<HTMLDivElement, BlockAuthProps>(function BlockAuth(
-  { title = "Sign in", subtitle, submitLabel = "Sign in", socialLabel, dividerLabel = "or continue with", footer, onSubmit, onSocial, className, ...rest },
-  ref,
-) {
-  const id = useId().replace(/:/g, "");
-  const submit = (e: FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-    const data = new FormData(e.currentTarget);
-    onSubmit?.({ email: String(data.get("email") ?? ""), password: String(data.get("password") ?? "") });
-  };
-  return (
-    <div ref={ref} className={cx("oc-block-auth", className)} {...rest}>
-      <form className="oc-block-auth-card" onSubmit={submit}>
-        <h2>{title}</h2>
-        {subtitle != null && <p className="oc-block-subtitle">{subtitle}</p>}
-        <div className="oc-form-group">
-          <label className="oc-label" htmlFor={`${id}-email`}>Email</label>
-          <input className="oc-input" id={`${id}-email`} name="email" type="email" placeholder="name@company.com" />
-        </div>
-        <div className="oc-form-group">
-          <label className="oc-label" htmlFor={`${id}-password`}>Password</label>
-          <input className="oc-input" id={`${id}-password`} name="password" type="password" placeholder="********" />
-        </div>
-        <button className="oc-btn" type="submit" style={{ width: "100%" }}>{submitLabel}</button>
-        {socialLabel != null && (
-          <>
-            <div className="oc-block-auth-divider">{dividerLabel}</div>
-            <button className="oc-btn oc-btn--outline" type="button" style={{ width: "100%" }} onClick={onSocial}>{socialLabel}</button>
-          </>
-        )}
-      </form>
-      {footer != null && <div className="oc-block-auth-footer">{footer}</div>}
-    </div>
-  );
-});
+import { forwardRef, useId } from "react";
+import type { FormEvent, HTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+
+export interface BlockAuthProps extends Omit<HTMLAttributes<HTMLDivElement>, "title" | "onSubmit"> {
+  title?: ReactNode;
+  subtitle?: ReactNode;
+  submitLabel?: ReactNode;
+  /** Label of the secondary (social) button; omit to hide it together with the divider. */
+  socialLabel?: ReactNode;
+  dividerLabel?: ReactNode;
+  /** Text under the card, e.g. `Don't have an account? <a href="#">Sign up</a>`. */
+  footer?: ReactNode;
+  onSubmit?: (values: { email: string; password: string }) => void;
+  onSocial?: () => void;
+}
+
+/** `.oc-block-auth`: sign-in card with e-mail, password and an optional social button. */
+export const BlockAuth = forwardRef<HTMLDivElement, BlockAuthProps>(function BlockAuth(
+  { title = "Sign in", subtitle, submitLabel = "Sign in", socialLabel, dividerLabel = "or continue with", footer, onSubmit, onSocial, className, ...rest },
+  ref,
+) {
+  const id = useId().replace(/:/g, "");
+  const submit = (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    const data = new FormData(e.currentTarget);
+    onSubmit?.({ email: String(data.get("email") ?? ""), password: String(data.get("password") ?? "") });
+  };
+  return (
+    <div ref={ref} className={cx("oc-block-auth", className)} {...rest}>
+      <form className="oc-block-auth-card" onSubmit={submit}>
+        <h2>{title}</h2>
+        {subtitle != null && <p className="oc-block-subtitle">{subtitle}</p>}
+        <div className="oc-form-group">
+          <label className="oc-label" htmlFor={`${id}-email`}>Email</label>
+          <input className="oc-input" id={`${id}-email`} name="email" type="email" placeholder="name@company.com" />
+        </div>
+        <div className="oc-form-group">
+          <label className="oc-label" htmlFor={`${id}-password`}>Password</label>
+          <input className="oc-input" id={`${id}-password`} name="password" type="password" placeholder="********" />
+        </div>
+        <button className="oc-btn" type="submit" style={{ width: "100%" }}>{submitLabel}</button>
+        {socialLabel != null && (
+          <>
+            <div className="oc-block-auth-divider">{dividerLabel}</div>
+            <button className="oc-btn oc-btn--outline" type="button" style={{ width: "100%" }} onClick={onSocial}>{socialLabel}</button>
+          </>
+        )}
+      </form>
+      {footer != null && <div className="oc-block-auth-footer">{footer}</div>}
+    </div>
+  );
+});

package/src/blocks/BlockAuthSplit.tsx

@@ -1,84 +1,84 @@
-import { forwardRef, useId } from "react";
-import type { FormEvent, HTMLAttributes, ReactNode } from "react";
-import { cx } from "../utils";
-import { PasswordInput } from "../components/PasswordInput";
-
-export interface BlockAuthSplitProps extends Omit<HTMLAttributes<HTMLDivElement>, "title" | "onSubmit"> {
-  /** Brand link content (icon + name). */
-  logo?: ReactNode;
-  logoHref?: string;
-  quote?: ReactNode;
-  quoteAuthor?: ReactNode;
-  title?: ReactNode;
-  subtitle?: ReactNode;
-  submitLabel?: ReactNode;
-  forgotHref?: string;
-  forgotLabel?: ReactNode;
-  rememberLabel?: ReactNode;
-  onSubmit?: (values: { email: string; password: string; remember: boolean }) => void;
-}
-
-/** `.oc-block-authsplit`: brand panel (logo, quote) next to the sign-in form. */
-export const BlockAuthSplit = forwardRef<HTMLDivElement, BlockAuthSplitProps>(function BlockAuthSplit(
-  {
-    logo,
-    logoHref = "#",
-    quote,
-    quoteAuthor,
-    title = "Welcome back",
-    subtitle,
-    submitLabel = "Sign in",
-    forgotHref = "#",
-    forgotLabel = "Forgot password?",
-    rememberLabel = "Remember me",
-    onSubmit,
-    className,
-    ...rest
-  },
-  ref,
-) {
-  const id = useId().replace(/:/g, "");
-  const submit = (e: FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-    const data = new FormData(e.currentTarget);
-    onSubmit?.({
-      email: String(data.get("email") ?? ""),
-      password: String(data.get("password") ?? ""),
-      remember: data.get("remember") != null,
-    });
-  };
-  return (
-    <div ref={ref} className={cx("oc-block-authsplit", className)} {...rest}>
-      <aside className="oc-block-authsplit-brand">
-        {logo != null && <a className="oc-block-authsplit-logo" href={logoHref}>{logo}</a>}
-        {quote != null && (
-          <blockquote className="oc-block-authsplit-quote">
-            <p>{quote}</p>
-            {quoteAuthor != null && <footer>{quoteAuthor}</footer>}
-          </blockquote>
-        )}
-      </aside>
-      <div className="oc-block-authsplit-form">
-        <form className="oc-block-authsplit-card" onSubmit={submit}>
-          <h1 className="oc-block-authsplit-title">{title}</h1>
-          {subtitle != null && <p className="oc-block-authsplit-subtitle">{subtitle}</p>}
-          <div className="oc-block-authsplit-fields">
-            <div className="oc-field">
-              <label className="oc-field-label" htmlFor={`${id}-email`}>E-mail</label>
-              <input className="oc-input" id={`${id}-email`} name="email" type="email" autoComplete="username" placeholder="name@company.com" required />
-            </div>
-            <div className="oc-field">
-              <label className="oc-field-label" htmlFor={`${id}-password`}>Password</label>
-              <PasswordInput id={`${id}-password`} name="password" required />
-            </div>
-            <div className="oc-block-authsplit-row">
-              <label><input className="oc-checkbox" type="checkbox" name="remember" /> {rememberLabel}</label>
-              <a className="oc-link" href={forgotHref}>{forgotLabel}</a>
-            </div>
-            <button className="oc-btn" type="submit" style={{ width: "100%" }}>{submitLabel}</button>
-          </div>
-        </form>
-      </div>
-    </div>
-  );
-});
+import { forwardRef, useId } from "react";
+import type { FormEvent, HTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+import { PasswordInput } from "../components/PasswordInput";
+
+export interface BlockAuthSplitProps extends Omit<HTMLAttributes<HTMLDivElement>, "title" | "onSubmit"> {
+  /** Brand link content (icon + name). */
+  logo?: ReactNode;
+  logoHref?: string;
+  quote?: ReactNode;
+  quoteAuthor?: ReactNode;
+  title?: ReactNode;
+  subtitle?: ReactNode;
+  submitLabel?: ReactNode;
+  forgotHref?: string;
+  forgotLabel?: ReactNode;
+  rememberLabel?: ReactNode;
+  onSubmit?: (values: { email: string; password: string; remember: boolean }) => void;
+}
+
+/** `.oc-block-authsplit`: brand panel (logo, quote) next to the sign-in form. */
+export const BlockAuthSplit = forwardRef<HTMLDivElement, BlockAuthSplitProps>(function BlockAuthSplit(
+  {
+    logo,
+    logoHref = "#",
+    quote,
+    quoteAuthor,
+    title = "Welcome back",
+    subtitle,
+    submitLabel = "Sign in",
+    forgotHref = "#",
+    forgotLabel = "Forgot password?",
+    rememberLabel = "Remember me",
+    onSubmit,
+    className,
+    ...rest
+  },
+  ref,
+) {
+  const id = useId().replace(/:/g, "");
+  const submit = (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    const data = new FormData(e.currentTarget);
+    onSubmit?.({
+      email: String(data.get("email") ?? ""),
+      password: String(data.get("password") ?? ""),
+      remember: data.get("remember") != null,
+    });
+  };
+  return (
+    <div ref={ref} className={cx("oc-block-authsplit", className)} {...rest}>
+      <aside className="oc-block-authsplit-brand">
+        {logo != null && <a className="oc-block-authsplit-logo" href={logoHref}>{logo}</a>}
+        {quote != null && (
+          <blockquote className="oc-block-authsplit-quote">
+            <p>{quote}</p>
+            {quoteAuthor != null && <footer>{quoteAuthor}</footer>}
+          </blockquote>
+        )}
+      </aside>
+      <div className="oc-block-authsplit-form">
+        <form className="oc-block-authsplit-card" onSubmit={submit}>
+          <h1 className="oc-block-authsplit-title">{title}</h1>
+          {subtitle != null && <p className="oc-block-authsplit-subtitle">{subtitle}</p>}
+          <div className="oc-block-authsplit-fields">
+            <div className="oc-field">
+              <label className="oc-field-label" htmlFor={`${id}-email`}>E-mail</label>
+              <input className="oc-input" id={`${id}-email`} name="email" type="email" autoComplete="username" placeholder="name@company.com" required />
+            </div>
+            <div className="oc-field">
+              <label className="oc-field-label" htmlFor={`${id}-password`}>Password</label>
+              <PasswordInput id={`${id}-password`} name="password" required />
+            </div>
+            <div className="oc-block-authsplit-row">
+              <label><input className="oc-checkbox" type="checkbox" name="remember" /> {rememberLabel}</label>
+              <a className="oc-link" href={forgotHref}>{forgotLabel}</a>
+            </div>
+            <button className="oc-btn" type="submit" style={{ width: "100%" }}>{submitLabel}</button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+});

package/src/blocks/BlockContactGrid.tsx

@@ -1,71 +1,71 @@
-// File: packages/react/src/blocks/BlockContactGrid.tsx | Map: types -> BlockContactGrid (head -> grid of cards (mark, title, lines))
-import { forwardRef, useId } from "react";
-import type { HTMLAttributes, ReactNode } from "react";
-import { cx } from "../utils";
-
-export interface ContactGridLine {
-  text: ReactNode;
-  /** Makes the line a link (mailto:, tel:, https:). */
-  href?: string;
-}
-
-export interface ContactGridCard {
-  title: ReactNode;
-  lines: ContactGridLine[];
-  /** Glyph in a soft product mark. */
-  icon?: ReactNode;
-  /** Accent preset of the mark (green, violet, ...). */
-  accent?: string;
-  /** Renders the card as <address>. */
-  address?: boolean;
-}
-
-export interface BlockContactGridProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
-  eyebrow?: ReactNode;
-  title?: ReactNode;
-  lead?: ReactNode;
-  cards: ContactGridCard[];
-  /** No card frames. */
-  plain?: boolean;
-}
-
-/** `.oc-block-contact`: contact info cards (e-mail, phone, address, hours). */
-export const BlockContactGrid = forwardRef<HTMLElement, BlockContactGridProps>(function BlockContactGrid(
-  { eyebrow, title, lead, cards, plain = false, className, ...rest },
-  ref,
-) {
-  const titleId = `oc-contact-title-${useId().replace(/[^\w-]/g, "")}`;
-  return (
-    <section ref={ref} className={cx("oc-block-contact", plain && "oc-block-contact--plain", className)} aria-labelledby={title != null ? titleId : undefined} {...rest}>
-      {(eyebrow != null || title != null || lead != null) && (
-        <div className="oc-block-contact-head">
-          {eyebrow != null && <p className="oc-eyebrow">{eyebrow}</p>}
-          {title != null && <h2 className="oc-block-contact-heading" id={titleId}>{title}</h2>}
-          {lead != null && <p className="oc-block-contact-lead">{lead}</p>}
-        </div>
-      )}
-      <div className="oc-block-contact-grid">
-        {cards.map((card, i) => {
-          const Card = card.address ? "address" : "article";
-          const Title = card.address ? "span" : "h3";
-          const Line = card.address ? "span" : "p";
-          return (
-            <Card className="oc-block-contact-card" key={i}>
-              {card.icon != null && (
-                <span className={cx("oc-product-mark oc-product-mark--sm oc-product-mark--soft", card.accent && `oc-accent--${card.accent}`)} aria-hidden="true">{card.icon}</span>
-              )}
-              <Title className="oc-block-contact-title">{card.title}</Title>
-              {card.lines.map((line, j) =>
-                line.href ? (
-                  <a className="oc-block-contact-line" href={line.href} key={j}>{line.text}</a>
-                ) : (
-                  <Line className="oc-block-contact-line" key={j}>{line.text}</Line>
-                ),
-              )}
-            </Card>
-          );
-        })}
-      </div>
-    </section>
-  );
-});
+// File: packages/react/src/blocks/BlockContactGrid.tsx | Map: types -> BlockContactGrid (head -> grid of cards (mark, title, lines))
+import { forwardRef, useId } from "react";
+import type { HTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+
+export interface ContactGridLine {
+  text: ReactNode;
+  /** Makes the line a link (mailto:, tel:, https:). */
+  href?: string;
+}
+
+export interface ContactGridCard {
+  title: ReactNode;
+  lines: ContactGridLine[];
+  /** Glyph in a soft product mark. */
+  icon?: ReactNode;
+  /** Accent preset of the mark (green, violet, ...). */
+  accent?: string;
+  /** Renders the card as <address>. */
+  address?: boolean;
+}
+
+export interface BlockContactGridProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
+  eyebrow?: ReactNode;
+  title?: ReactNode;
+  lead?: ReactNode;
+  cards: ContactGridCard[];
+  /** No card frames. */
+  plain?: boolean;
+}
+
+/** `.oc-block-contact`: contact info cards (e-mail, phone, address, hours). */
+export const BlockContactGrid = forwardRef<HTMLElement, BlockContactGridProps>(function BlockContactGrid(
+  { eyebrow, title, lead, cards, plain = false, className, ...rest },
+  ref,
+) {
+  const titleId = `oc-contact-title-${useId().replace(/[^\w-]/g, "")}`;
+  return (
+    <section ref={ref} className={cx("oc-block-contact", plain && "oc-block-contact--plain", className)} aria-labelledby={title != null ? titleId : undefined} {...rest}>
+      {(eyebrow != null || title != null || lead != null) && (
+        <div className="oc-block-contact-head">
+          {eyebrow != null && <p className="oc-eyebrow">{eyebrow}</p>}
+          {title != null && <h2 className="oc-block-contact-heading" id={titleId}>{title}</h2>}
+          {lead != null && <p className="oc-block-contact-lead">{lead}</p>}
+        </div>
+      )}
+      <div className="oc-block-contact-grid">
+        {cards.map((card, i) => {
+          const Card = card.address ? "address" : "article";
+          const Title = card.address ? "span" : "h3";
+          const Line = card.address ? "span" : "p";
+          return (
+            <Card className="oc-block-contact-card" key={i}>
+              {card.icon != null && (
+                <span className={cx("oc-product-mark oc-product-mark--sm oc-product-mark--soft", card.accent && `oc-accent--${card.accent}`)} aria-hidden="true">{card.icon}</span>
+              )}
+              <Title className="oc-block-contact-title">{card.title}</Title>
+              {card.lines.map((line, j) =>
+                line.href ? (
+                  <a className="oc-block-contact-line" href={line.href} key={j}>{line.text}</a>
+                ) : (
+                  <Line className="oc-block-contact-line" key={j}>{line.text}</Line>
+                ),
+              )}
+            </Card>
+          );
+        })}
+      </div>
+    </section>
+  );
+});

package/src/blocks/BlockCta.tsx

@@ -1,23 +1,23 @@
-import { forwardRef } from "react";
-import type { HTMLAttributes, ReactNode } from "react";
-import { cx } from "../utils";
-
-export interface BlockCtaProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
-  title: ReactNode;
-  description?: ReactNode;
-  actions?: ReactNode;
-}
-
-/** `.oc-block-cta`: call to action banner. */
-export const BlockCta = forwardRef<HTMLDivElement, BlockCtaProps>(function BlockCta(
-  { title, description, actions, className, ...rest },
-  ref,
-) {
-  return (
-    <div ref={ref} className={cx("oc-block-cta", className)} {...rest}>
-      <h2>{title}</h2>
-      {description != null && <p>{description}</p>}
-      {actions != null && <div className="oc-block-hero-actions">{actions}</div>}
-    </div>
-  );
-});
+import { forwardRef } from "react";
+import type { HTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+
+export interface BlockCtaProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+  title: ReactNode;
+  description?: ReactNode;
+  actions?: ReactNode;
+}
+
+/** `.oc-block-cta`: call to action banner. */
+export const BlockCta = forwardRef<HTMLDivElement, BlockCtaProps>(function BlockCta(
+  { title, description, actions, className, ...rest },
+  ref,
+) {
+  return (
+    <div ref={ref} className={cx("oc-block-cta", className)} {...rest}>
+      <h2>{title}</h2>
+      {description != null && <p>{description}</p>}
+      {actions != null && <div className="oc-block-hero-actions">{actions}</div>}
+    </div>
+  );
+});

package/src/blocks/BlockDataTable.tsx

@@ -1,57 +1,57 @@
-import { forwardRef } from "react";
-import type { AnchorHTMLAttributes, HTMLAttributes, ReactNode } from "react";
-import { cx } from "../utils";
-
-export interface BlockDataTableProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
-  title?: ReactNode;
-  description?: ReactNode;
-  /** Header buttons (export, new...). */
-  actions?: ReactNode;
-  /** Search + filters row (`oc-table-toolbar`). Use `BlockDataTableSpacer` to push items right. */
-  toolbar?: ReactNode;
-  /** Selection bar, shown by you when rows are selected (`oc-block-datatable-bulk`). */
-  bulk?: ReactNode;
-  /** Entries text, page-size select and pagination (`oc-table-footer`). */
-  footer?: ReactNode;
-  /** The `<Table>`. */
-  children?: ReactNode;
-}
-
-/** `.oc-card.oc-block-datatable`: card with header, toolbar, table, bulk bar and footer. */
-export const BlockDataTable = forwardRef<HTMLElement, BlockDataTableProps>(function BlockDataTable(
-  { title, description, actions, toolbar, bulk, footer, className, children, ...rest },
-  ref,
-) {
-  return (
-    <section ref={ref} className={cx("oc-card oc-block-datatable", className)} {...rest}>
-      <header className="oc-block-datatable-head">
-        <div>
-          {title != null && <h2 className="oc-block-datatable-title">{title}</h2>}
-          {description != null && <p className="oc-block-datatable-description">{description}</p>}
-        </div>
-        {actions != null && <div>{actions}</div>}
-      </header>
-      <div className="oc-block-datatable-body">
-        {toolbar != null && <div className="oc-table-toolbar">{toolbar}</div>}
-        {bulk != null && <div className="oc-block-datatable-bulk">{bulk}</div>}
-        {children}
-        {footer != null && <div className="oc-table-footer">{footer}</div>}
-      </div>
-    </section>
-  );
-});
-
-/** `.oc-table-toolbar-spacer`: pushes the following toolbar items to the right. */
-export function BlockDataTableSpacer() {
-  return <span className="oc-table-toolbar-spacer" />;
-}
-
-/** `.oc-filter-pills` group. */
-export function FilterPills({ className, ...rest }: HTMLAttributes<HTMLDivElement>) {
-  return <div className={cx("oc-filter-pills", className)} role="group" {...rest} />;
-}
-
-/** `a.oc-filter-pill` (set `current` for the active filter). */
-export function FilterPill({ current, className, ...rest }: AnchorHTMLAttributes<HTMLAnchorElement> & { current?: boolean }) {
-  return <a className={cx("oc-filter-pill", className)} aria-current={current ? "true" : undefined} {...rest} />;
-}
+import { forwardRef } from "react";
+import type { AnchorHTMLAttributes, HTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+
+export interface BlockDataTableProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
+  title?: ReactNode;
+  description?: ReactNode;
+  /** Header buttons (export, new...). */
+  actions?: ReactNode;
+  /** Search + filters row (`oc-table-toolbar`). Use `BlockDataTableSpacer` to push items right. */
+  toolbar?: ReactNode;
+  /** Selection bar, shown by you when rows are selected (`oc-block-datatable-bulk`). */
+  bulk?: ReactNode;
+  /** Entries text, page-size select and pagination (`oc-table-footer`). */
+  footer?: ReactNode;
+  /** The `<Table>`. */
+  children?: ReactNode;
+}
+
+/** `.oc-card.oc-block-datatable`: card with header, toolbar, table, bulk bar and footer. */
+export const BlockDataTable = forwardRef<HTMLElement, BlockDataTableProps>(function BlockDataTable(
+  { title, description, actions, toolbar, bulk, footer, className, children, ...rest },
+  ref,
+) {
+  return (
+    <section ref={ref} className={cx("oc-card oc-block-datatable", className)} {...rest}>
+      <header className="oc-block-datatable-head">
+        <div>
+          {title != null && <h2 className="oc-block-datatable-title">{title}</h2>}
+          {description != null && <p className="oc-block-datatable-description">{description}</p>}
+        </div>
+        {actions != null && <div>{actions}</div>}
+      </header>
+      <div className="oc-block-datatable-body">
+        {toolbar != null && <div className="oc-table-toolbar">{toolbar}</div>}
+        {bulk != null && <div className="oc-block-datatable-bulk">{bulk}</div>}
+        {children}
+        {footer != null && <div className="oc-table-footer">{footer}</div>}
+      </div>
+    </section>
+  );
+});
+
+/** `.oc-table-toolbar-spacer`: pushes the following toolbar items to the right. */
+export function BlockDataTableSpacer() {
+  return <span className="oc-table-toolbar-spacer" />;
+}
+
+/** `.oc-filter-pills` group. */
+export function FilterPills({ className, ...rest }: HTMLAttributes<HTMLDivElement>) {
+  return <div className={cx("oc-filter-pills", className)} role="group" {...rest} />;
+}
+
+/** `a.oc-filter-pill` (set `current` for the active filter). */
+export function FilterPill({ current, className, ...rest }: AnchorHTMLAttributes<HTMLAnchorElement> & { current?: boolean }) {
+  return <a className={cx("oc-filter-pill", className)} aria-current={current ? "true" : undefined} {...rest} />;
+}