@birdycom/omniaui-react 0.11.0 → 0.11.2

package/src/components/ProductMark.tsx

@@ -1,35 +1,35 @@
-// File: packages/react/src/components/ProductMark.tsx | Map: types -> ProductMark (span.oc-product-mark + modifiers)
-import { forwardRef } from "react";
-import type { HTMLAttributes } from "react";
-import { cx } from "../utils";
-
-export type ProductMarkSize = "sm" | "default" | "lg" | "xl";
-export type ProductMarkAccent = "blue" | "cyan" | "green" | "orange" | "red" | "violet" | "yellow";
-
-export interface ProductMarkProps extends HTMLAttributes<HTMLSpanElement> {
-  size?: ProductMarkSize;
-  /** Accent preset (adds .oc-accent--{accent}). */
-  accent?: ProductMarkAccent;
-  /** Tinted background with an accent glyph. */
-  soft?: boolean;
-  glow?: boolean;
-  /** Full-bleed image inside. */
-  cover?: boolean;
-}
-
-/** `<span class="oc-product-mark">`: squircle app-icon tile. Decorative by default (aria-hidden). */
-export const ProductMark = forwardRef<HTMLSpanElement, ProductMarkProps>(function ProductMark(
-  { size = "default", accent, soft = false, glow = false, cover = false, className, ...rest },
-  ref,
-) {
-  const classes = cx(
-    "oc-product-mark",
-    size !== "default" && `oc-product-mark--${size}`,
-    soft && "oc-product-mark--soft",
-    glow && "oc-product-mark--glow",
-    cover && "oc-product-mark--cover",
-    accent && `oc-accent--${accent}`,
-    className,
-  );
-  return <span ref={ref} className={classes} aria-hidden="true" {...rest} />;
-});
+// File: packages/react/src/components/ProductMark.tsx | Map: types -> ProductMark (span.oc-product-mark + modifiers)
+import { forwardRef } from "react";
+import type { HTMLAttributes } from "react";
+import { cx } from "../utils";
+
+export type ProductMarkSize = "sm" | "default" | "lg" | "xl";
+export type ProductMarkAccent = "blue" | "cyan" | "green" | "orange" | "red" | "violet" | "yellow";
+
+export interface ProductMarkProps extends HTMLAttributes<HTMLSpanElement> {
+  size?: ProductMarkSize;
+  /** Accent preset (adds .oc-accent--{accent}). */
+  accent?: ProductMarkAccent;
+  /** Tinted background with an accent glyph. */
+  soft?: boolean;
+  glow?: boolean;
+  /** Full-bleed image inside. */
+  cover?: boolean;
+}
+
+/** `<span class="oc-product-mark">`: squircle app-icon tile. Decorative by default (aria-hidden). */
+export const ProductMark = forwardRef<HTMLSpanElement, ProductMarkProps>(function ProductMark(
+  { size = "default", accent, soft = false, glow = false, cover = false, className, ...rest },
+  ref,
+) {
+  const classes = cx(
+    "oc-product-mark",
+    size !== "default" && `oc-product-mark--${size}`,
+    soft && "oc-product-mark--soft",
+    glow && "oc-product-mark--glow",
+    cover && "oc-product-mark--cover",
+    accent && `oc-accent--${accent}`,
+    className,
+  );
+  return <span ref={ref} className={classes} aria-hidden="true" {...rest} />;
+});

package/src/components/Progress.tsx

@@ -1,32 +1,32 @@
-import { forwardRef } from "react";
-import type { HTMLAttributes } from "react";
-import { cx } from "../utils";
-
-export interface ProgressProps extends HTMLAttributes<HTMLDivElement> {
-  value: number;
-  /** Maximum (default 100). */
-  max?: number;
-  /** Bar color. */
-  variant?: "default" | "success" | "warning" | "danger";
-}
-
-/** `<div class="oc-progress" role="progressbar">` with an `oc-progress-bar` sized in percent. */
-export const Progress = forwardRef<HTMLDivElement, ProgressProps>(function Progress(
-  { value, max = 100, variant = "default", className, ...rest },
-  ref,
-) {
-  const pct = max > 0 ? Math.min(100, Math.max(0, Math.round((value / max) * 100))) : 0;
-  return (
-    <div
-      ref={ref}
-      className={cx("oc-progress", className)}
-      role="progressbar"
-      aria-valuenow={value}
-      aria-valuemin={0}
-      aria-valuemax={max}
-      {...rest}
-    >
-      <div className={cx("oc-progress-bar", variant !== "default" && `oc-progress-bar--${variant}`)} style={{ width: `${pct}%` }} />
-    </div>
-  );
-});
+import { forwardRef } from "react";
+import type { HTMLAttributes } from "react";
+import { cx } from "../utils";
+
+export interface ProgressProps extends HTMLAttributes<HTMLDivElement> {
+  value: number;
+  /** Maximum (default 100). */
+  max?: number;
+  /** Bar color. */
+  variant?: "default" | "success" | "warning" | "danger";
+}
+
+/** `<div class="oc-progress" role="progressbar">` with an `oc-progress-bar` sized in percent. */
+export const Progress = forwardRef<HTMLDivElement, ProgressProps>(function Progress(
+  { value, max = 100, variant = "default", className, ...rest },
+  ref,
+) {
+  const pct = max > 0 ? Math.min(100, Math.max(0, Math.round((value / max) * 100))) : 0;
+  return (
+    <div
+      ref={ref}
+      className={cx("oc-progress", className)}
+      role="progressbar"
+      aria-valuenow={value}
+      aria-valuemin={0}
+      aria-valuemax={max}
+      {...rest}
+    >
+      <div className={cx("oc-progress-bar", variant !== "default" && `oc-progress-bar--${variant}`)} style={{ width: `${pct}%` }} />
+    </div>
+  );
+});

package/src/components/ProjectCard.tsx

@@ -1,46 +1,46 @@
-// File: packages/react/src/components/ProjectCard.tsx | Map: props -> ProjectCard (a -> frame (bar + shot) -> body)
-import { forwardRef } from "react";
-import type { AnchorHTMLAttributes, ReactNode } from "react";
-import { cx } from "../utils";
-
-// The native anchor "type" (MIME hint) is replaced by the badge text prop below.
-export interface ProjectCardProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "type"> {
-  name: ReactNode;
-  /** Badge text ("Website"). */
-  type?: ReactNode;
-  /** Sector / location line. */
-  meta?: ReactNode;
-  /** Text of the arrow link (default "View project"). */
-  more?: ReactNode;
-  /** Screenshot URL; without it the preview is an accent gradient. */
-  image?: string;
-  /** Accessible description of the screenshot. */
-  imageAlt?: string;
-  /** Edge-to-edge preview. */
-  flat?: boolean;
-}
-
-/** `<a class="oc-project-card">`: portfolio card with a browser-like preview. */
-export const ProjectCard = forwardRef<HTMLAnchorElement, ProjectCardProps>(function ProjectCard(
-  { name, type, meta, more = "View project", image, imageAlt = "", flat = false, className, ...rest },
-  ref,
-) {
-  return (
-    <a ref={ref} className={cx("oc-project-card", flat && "oc-project-card--flat", className)} {...rest}>
-      <span className="oc-project-card__frame">
-        <span className="oc-project-card__bar" aria-hidden="true"><i /><i /><i /></span>
-        {image ? (
-          <img className="oc-project-card__shot" src={image} alt={imageAlt} loading="lazy" />
-        ) : (
-          <span className="oc-project-card__shot" role="img" aria-label={imageAlt || undefined} aria-hidden={imageAlt ? undefined : true} />
-        )}
-      </span>
-      <span className="oc-project-card__body">
-        {type != null && <span className="oc-project-card__type">{type}</span>}
-        <span className="oc-project-card__name">{name}</span>
-        {meta != null && <span className="oc-project-card__meta">{meta}</span>}
-        {more != null && <span className="oc-project-card__more">{more}</span>}
-      </span>
-    </a>
-  );
-});
+// File: packages/react/src/components/ProjectCard.tsx | Map: props -> ProjectCard (a -> frame (bar + shot) -> body)
+import { forwardRef } from "react";
+import type { AnchorHTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+
+// The native anchor "type" (MIME hint) is replaced by the badge text prop below.
+export interface ProjectCardProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "type"> {
+  name: ReactNode;
+  /** Badge text ("Website"). */
+  type?: ReactNode;
+  /** Sector / location line. */
+  meta?: ReactNode;
+  /** Text of the arrow link (default "View project"). */
+  more?: ReactNode;
+  /** Screenshot URL; without it the preview is an accent gradient. */
+  image?: string;
+  /** Accessible description of the screenshot. */
+  imageAlt?: string;
+  /** Edge-to-edge preview. */
+  flat?: boolean;
+}
+
+/** `<a class="oc-project-card">`: portfolio card with a browser-like preview. */
+export const ProjectCard = forwardRef<HTMLAnchorElement, ProjectCardProps>(function ProjectCard(
+  { name, type, meta, more = "View project", image, imageAlt = "", flat = false, className, ...rest },
+  ref,
+) {
+  return (
+    <a ref={ref} className={cx("oc-project-card", flat && "oc-project-card--flat", className)} {...rest}>
+      <span className="oc-project-card__frame">
+        <span className="oc-project-card__bar" aria-hidden="true"><i /><i /><i /></span>
+        {image ? (
+          <img className="oc-project-card__shot" src={image} alt={imageAlt} loading="lazy" />
+        ) : (
+          <span className="oc-project-card__shot" role="img" aria-label={imageAlt || undefined} aria-hidden={imageAlt ? undefined : true} />
+        )}
+      </span>
+      <span className="oc-project-card__body">
+        {type != null && <span className="oc-project-card__type">{type}</span>}
+        <span className="oc-project-card__name">{name}</span>
+        {meta != null && <span className="oc-project-card__meta">{meta}</span>}
+        {more != null && <span className="oc-project-card__more">{more}</span>}
+      </span>
+    </a>
+  );
+});

package/src/components/Prose.tsx

@@ -1,79 +1,79 @@
-// File: packages/react/src/components/Prose.tsx
-// Map: types -> demo article (same text as the snippet) -> Prose (wrapper with size modifiers) -> ProseLead
-// Same markup as packages/ui/snippets/prose.html. Put plain HTML (h1-h4, p, lists, blockquote, table, figure, pre) inside.
-import { forwardRef } from "react";
-import type { HTMLAttributes, ReactNode } from "react";
-import { cx } from "../utils";
-
-export interface ProseProps extends HTMLAttributes<HTMLElement> {
-  /** All spacing scales along. */
-  size?: "sm" | "md" | "lg";
-  /** No max width (default 68ch). */
-  full?: boolean;
-  as?: "article" | "div" | "section";
-  /** The text; the snippet's demo article when empty. */
-  children?: ReactNode;
-}
-
-/** `p.oc-prose-lead`: larger intro paragraph. */
-export function ProseLead({ className, ...rest }: HTMLAttributes<HTMLParagraphElement>) {
-  return <p className={cx("oc-prose-lead", className)} {...rest} />;
-}
-
-const DEMO = (
-  <>
-    <h1>Planning a kitchen renovation</h1>
-    <ProseLead>A new kitchen takes eight to twelve weeks from the first visit to the last cabinet handle. This guide explains every step, so you know what to expect and when we need you.</ProseLead>
-    <h2>Before the first visit</h2>
-    <p>Collect a few photos of kitchens you like and measure the room roughly. Exact measurements are not needed yet: our site manager does that during the visit. Read the <a href="#checklist">preparation checklist</a> if you want to be fully ready.</p>
-    <ul>
-      <li>The <strong>budget range</strong> you have in mind, including appliances</li>
-      <li>Which walls, doors and windows can move, and which cannot
-        <ul><li>Load-bearing walls need a structural engineer</li><li>Moving a window needs a permit in most towns</li></ul>
-      </li>
-      <li>Appliances you want to keep</li>
-    </ul>
-    <figure>
-      <div className="oc-media-art oc-media-art--6" role="img" aria-label="Kitchen with oak fronts and a light stone worktop" />
-      <figcaption>Villa Dewitte: oak fronts with a Calacatta matt worktop, finished in October 2026.</figcaption>
-    </figure>
-    <h3>From design to installation</h3>
-    <ol>
-      <li>Site visit and measurements (week 1)</li>
-      <li>Design and quote, with two revision rounds (weeks 2–3)</li>
-      <li>Order and production of the cabinets (weeks 4–9)</li>
-      <li>Installation, worktop and finishing (weeks 10–11)</li>
-    </ol>
-    <blockquote>
-      <p>The planning was clear from day one. We always knew who was coming and when, and the kitchen was ready a week early.</p>
-      <footer>— Ann Dewitte, client in Ghent</footer>
-    </blockquote>
-    <h2>Worktop materials compared</h2>
-    <table>
-      <caption>Prices per running metre, 60 cm deep, installed.</caption>
-      <thead><tr><th>Material</th><th>Thickness</th><th>Heat resistant</th><th>Price</th></tr></thead>
-      <tbody>
-        <tr><td>Compact laminate</td><td>12 mm</td><td>Up to 180 °C</td><td>€ 290</td></tr>
-        <tr><td>Quartz composite</td><td>20 mm</td><td>Up to 150 °C</td><td>€ 540</td></tr>
-        <tr><td>Natural stone</td><td>20 mm</td><td>Yes</td><td>€ 720</td></tr>
-      </tbody>
-    </table>
-    <h3>Sharing your floor plan</h3>
-    <p>Upload a PDF or a photo in the client portal, or send it by e-mail. Press <kbd>Ctrl</kbd> + <kbd>V</kbd> in the chat to paste a screenshot. Files are stored as <code>project-id/plans/</code> and only your project team can see them.</p>
-    <pre><code>{"Project:   2026-114 Villa Dewitte\nRoom:      Kitchen, ground floor\nWall A:    412 cm (window at 160 cm)\nWall B:    298 cm (door at the left)"}</code></pre>
-    <hr />
-    <p><small>Lead times are an estimate. <mark>Natural stone</mark> can take two weeks longer in summer.</small></p>
-  </>
-);
-
-/** `.oc-prose`: typography for long-form text written without classes. */
-export const Prose = forwardRef<HTMLElement, ProseProps>(function Prose(
-  { size = "md", full, as: Tag = "article", className, children, ...rest },
-  ref,
-) {
-  return (
-    <Tag ref={ref as React.Ref<HTMLElement & HTMLDivElement>} className={cx("oc-prose", size !== "md" && `oc-prose--${size}`, full && "oc-prose--full", className)} {...rest}>
-      {children ?? DEMO}
-    </Tag>
-  );
-});
+// File: packages/react/src/components/Prose.tsx
+// Map: types -> demo article (same text as the snippet) -> Prose (wrapper with size modifiers) -> ProseLead
+// Same markup as packages/ui/snippets/prose.html. Put plain HTML (h1-h4, p, lists, blockquote, table, figure, pre) inside.
+import { forwardRef } from "react";
+import type { HTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+
+export interface ProseProps extends HTMLAttributes<HTMLElement> {
+  /** All spacing scales along. */
+  size?: "sm" | "md" | "lg";
+  /** No max width (default 68ch). */
+  full?: boolean;
+  as?: "article" | "div" | "section";
+  /** The text; the snippet's demo article when empty. */
+  children?: ReactNode;
+}
+
+/** `p.oc-prose-lead`: larger intro paragraph. */
+export function ProseLead({ className, ...rest }: HTMLAttributes<HTMLParagraphElement>) {
+  return <p className={cx("oc-prose-lead", className)} {...rest} />;
+}
+
+const DEMO = (
+  <>
+    <h1>Planning a kitchen renovation</h1>
+    <ProseLead>A new kitchen takes eight to twelve weeks from the first visit to the last cabinet handle. This guide explains every step, so you know what to expect and when we need you.</ProseLead>
+    <h2>Before the first visit</h2>
+    <p>Collect a few photos of kitchens you like and measure the room roughly. Exact measurements are not needed yet: our site manager does that during the visit. Read the <a href="#checklist">preparation checklist</a> if you want to be fully ready.</p>
+    <ul>
+      <li>The <strong>budget range</strong> you have in mind, including appliances</li>
+      <li>Which walls, doors and windows can move, and which cannot
+        <ul><li>Load-bearing walls need a structural engineer</li><li>Moving a window needs a permit in most towns</li></ul>
+      </li>
+      <li>Appliances you want to keep</li>
+    </ul>
+    <figure>
+      <div className="oc-media-art oc-media-art--6" role="img" aria-label="Kitchen with oak fronts and a light stone worktop" />
+      <figcaption>Villa Dewitte: oak fronts with a Calacatta matt worktop, finished in October 2026.</figcaption>
+    </figure>
+    <h3>From design to installation</h3>
+    <ol>
+      <li>Site visit and measurements (week 1)</li>
+      <li>Design and quote, with two revision rounds (weeks 2–3)</li>
+      <li>Order and production of the cabinets (weeks 4–9)</li>
+      <li>Installation, worktop and finishing (weeks 10–11)</li>
+    </ol>
+    <blockquote>
+      <p>The planning was clear from day one. We always knew who was coming and when, and the kitchen was ready a week early.</p>
+      <footer>— Ann Dewitte, client in Ghent</footer>
+    </blockquote>
+    <h2>Worktop materials compared</h2>
+    <table>
+      <caption>Prices per running metre, 60 cm deep, installed.</caption>
+      <thead><tr><th>Material</th><th>Thickness</th><th>Heat resistant</th><th>Price</th></tr></thead>
+      <tbody>
+        <tr><td>Compact laminate</td><td>12 mm</td><td>Up to 180 °C</td><td>€ 290</td></tr>
+        <tr><td>Quartz composite</td><td>20 mm</td><td>Up to 150 °C</td><td>€ 540</td></tr>
+        <tr><td>Natural stone</td><td>20 mm</td><td>Yes</td><td>€ 720</td></tr>
+      </tbody>
+    </table>
+    <h3>Sharing your floor plan</h3>
+    <p>Upload a PDF or a photo in the client portal, or send it by e-mail. Press <kbd>Ctrl</kbd> + <kbd>V</kbd> in the chat to paste a screenshot. Files are stored as <code>project-id/plans/</code> and only your project team can see them.</p>
+    <pre><code>{"Project:   2026-114 Villa Dewitte\nRoom:      Kitchen, ground floor\nWall A:    412 cm (window at 160 cm)\nWall B:    298 cm (door at the left)"}</code></pre>
+    <hr />
+    <p><small>Lead times are an estimate. <mark>Natural stone</mark> can take two weeks longer in summer.</small></p>
+  </>
+);
+
+/** `.oc-prose`: typography for long-form text written without classes. */
+export const Prose = forwardRef<HTMLElement, ProseProps>(function Prose(
+  { size = "md", full, as: Tag = "article", className, children, ...rest },
+  ref,
+) {
+  return (
+    <Tag ref={ref as React.Ref<HTMLElement & HTMLDivElement>} className={cx("oc-prose", size !== "md" && `oc-prose--${size}`, full && "oc-prose--full", className)} {...rest}>
+      {children ?? DEMO}
+    </Tag>
+  );
+});

package/src/components/RecoveryCodes.tsx

@@ -1,65 +1,65 @@
-"use client";
-
-import { forwardRef } from "react";
-import type { HTMLAttributes, ReactNode } from "react";
-import { cx } from "../utils";
-
-export interface RecoveryCodesProps extends Omit<HTMLAttributes<HTMLDivElement>, "title" | "onCopy"> {
-  codes: string[];
-  title?: ReactNode;
-  warning?: ReactNode;
-  copyLabel?: string;
-  downloadLabel?: string;
-  /** File name of the download (default `recovery-codes.txt`). */
-  fileName?: string;
-  onCopy?: (codes: string[]) => void;
-  onDownload?: (codes: string[]) => void;
-}
-
-/** `.oc-recovery-codes`: warning panel with a code grid, "Copy all" and "Download .txt". */
-export const RecoveryCodes = forwardRef<HTMLDivElement, RecoveryCodesProps>(function RecoveryCodes(
-  {
-    codes,
-    title = "Recovery codes",
-    warning = "Store these codes somewhere safe. Each code works once.",
-    copyLabel = "Copy all",
-    downloadLabel = "Download .txt",
-    fileName = "recovery-codes.txt",
-    onCopy,
-    onDownload,
-    className,
-    ...rest
-  },
-  ref,
-) {
-  const copy = async () => {
-    try {
-      await navigator.clipboard.writeText(codes.join("\n"));
-      onCopy?.(codes);
-    } catch {
-      /* clipboard unavailable */
-    }
-  };
-  const download = () => {
-    const url = URL.createObjectURL(new Blob([codes.join("\n") + "\n"], { type: "text/plain" }));
-    const a = document.createElement("a");
-    a.href = url;
-    a.download = fileName;
-    a.click();
-    URL.revokeObjectURL(url);
-    onDownload?.(codes);
-  };
-  return (
-    <div ref={ref} className={cx("oc-recovery-codes", className)} {...rest}>
-      <h3 className="oc-recovery-codes-title">{title}</h3>
-      <p className="oc-recovery-codes-warning">{warning}</p>
-      <ul className="oc-recovery-codes-list">
-        {codes.map((code) => <li key={code}>{code}</li>)}
-      </ul>
-      <div className="oc-recovery-codes-actions">
-        <button className="oc-btn oc-btn--outline oc-btn--sm" type="button" onClick={copy}>{copyLabel}</button>
-        <button className="oc-btn oc-btn--outline oc-btn--sm" type="button" onClick={download}>{downloadLabel}</button>
-      </div>
-    </div>
-  );
-});
+"use client";
+
+import { forwardRef } from "react";
+import type { HTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+
+export interface RecoveryCodesProps extends Omit<HTMLAttributes<HTMLDivElement>, "title" | "onCopy"> {
+  codes: string[];
+  title?: ReactNode;
+  warning?: ReactNode;
+  copyLabel?: string;
+  downloadLabel?: string;
+  /** File name of the download (default `recovery-codes.txt`). */
+  fileName?: string;
+  onCopy?: (codes: string[]) => void;
+  onDownload?: (codes: string[]) => void;
+}
+
+/** `.oc-recovery-codes`: warning panel with a code grid, "Copy all" and "Download .txt". */
+export const RecoveryCodes = forwardRef<HTMLDivElement, RecoveryCodesProps>(function RecoveryCodes(
+  {
+    codes,
+    title = "Recovery codes",
+    warning = "Store these codes somewhere safe. Each code works once.",
+    copyLabel = "Copy all",
+    downloadLabel = "Download .txt",
+    fileName = "recovery-codes.txt",
+    onCopy,
+    onDownload,
+    className,
+    ...rest
+  },
+  ref,
+) {
+  const copy = async () => {
+    try {
+      await navigator.clipboard.writeText(codes.join("\n"));
+      onCopy?.(codes);
+    } catch {
+      /* clipboard unavailable */
+    }
+  };
+  const download = () => {
+    const url = URL.createObjectURL(new Blob([codes.join("\n") + "\n"], { type: "text/plain" }));
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = fileName;
+    a.click();
+    URL.revokeObjectURL(url);
+    onDownload?.(codes);
+  };
+  return (
+    <div ref={ref} className={cx("oc-recovery-codes", className)} {...rest}>
+      <h3 className="oc-recovery-codes-title">{title}</h3>
+      <p className="oc-recovery-codes-warning">{warning}</p>
+      <ul className="oc-recovery-codes-list">
+        {codes.map((code) => <li key={code}>{code}</li>)}
+      </ul>
+      <div className="oc-recovery-codes-actions">
+        <button className="oc-btn oc-btn--outline oc-btn--sm" type="button" onClick={copy}>{copyLabel}</button>
+        <button className="oc-btn oc-btn--outline oc-btn--sm" type="button" onClick={download}>{downloadLabel}</button>
+      </div>
+    </div>
+  );
+});

package/src/components/Segmented.tsx

@@ -1,47 +1,47 @@
-"use client";
-
-import { forwardRef, useId } from "react";
-import type { HTMLAttributes, ReactNode } from "react";
-import { cx } from "../utils";
-import { useControllable } from "../hooks";
-
-export interface SegmentedOption {
-  value: string;
-  label: ReactNode;
-}
-
-export interface SegmentedProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue"> {
-  options: SegmentedOption[];
-  value?: string;
-  defaultValue?: string;
-  onChange?: (value: string) => void;
-  /** Radio group name (generated when omitted). */
-  name?: string;
-  /** Full width. */
-  block?: boolean;
-  size?: "sm" | "md";
-}
-
-/** `.oc-segmented` radio group as a pill switcher. */
-export const Segmented = forwardRef<HTMLDivElement, SegmentedProps>(function Segmented(
-  { options, value, defaultValue, onChange, name, block, size = "md", className, ...rest },
-  ref,
-) {
-  const auto = useId();
-  const group = name ?? `oc-segmented-${auto.replace(/:/g, "")}`;
-  const [current, setCurrent] = useControllable<string>(value, defaultValue ?? options[0]?.value ?? "", onChange);
-  return (
-    <div
-      ref={ref}
-      className={cx("oc-segmented", block && "oc-segmented--block", size === "sm" && "oc-segmented--sm", className)}
-      role="radiogroup"
-      {...rest}
-    >
-      {options.map((o) => (
-        <label className="oc-segmented-item" key={o.value}>
-          <input type="radio" name={group} value={o.value} checked={current === o.value} onChange={() => setCurrent(o.value)} /> {o.label}
-        </label>
-      ))}
-    </div>
-  );
-});
+"use client";
+
+import { forwardRef, useId } from "react";
+import type { HTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+import { useControllable } from "../hooks";
+
+export interface SegmentedOption {
+  value: string;
+  label: ReactNode;
+}
+
+export interface SegmentedProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue"> {
+  options: SegmentedOption[];
+  value?: string;
+  defaultValue?: string;
+  onChange?: (value: string) => void;
+  /** Radio group name (generated when omitted). */
+  name?: string;
+  /** Full width. */
+  block?: boolean;
+  size?: "sm" | "md";
+}
+
+/** `.oc-segmented` radio group as a pill switcher. */
+export const Segmented = forwardRef<HTMLDivElement, SegmentedProps>(function Segmented(
+  { options, value, defaultValue, onChange, name, block, size = "md", className, ...rest },
+  ref,
+) {
+  const auto = useId();
+  const group = name ?? `oc-segmented-${auto.replace(/:/g, "")}`;
+  const [current, setCurrent] = useControllable<string>(value, defaultValue ?? options[0]?.value ?? "", onChange);
+  return (
+    <div
+      ref={ref}
+      className={cx("oc-segmented", block && "oc-segmented--block", size === "sm" && "oc-segmented--sm", className)}
+      role="radiogroup"
+      {...rest}
+    >
+      {options.map((o) => (
+        <label className="oc-segmented-item" key={o.value}>
+          <input type="radio" name={group} value={o.value} checked={current === o.value} onChange={() => setCurrent(o.value)} /> {o.label}
+        </label>
+      ))}
+    </div>
+  );
+});