@birdycom/omniaui-react 0.0.0-stage → 0.11.0

package/src/components/Segmented.tsx

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

package/src/components/Select.tsx

@@ -0,0 +1,27 @@
+import { forwardRef } from "react";
+import type { ReactNode, SelectHTMLAttributes } from "react";
+import { cx } from "../utils";
+
+export interface SelectOption {
+  value: string;
+  label: ReactNode;
+  disabled?: boolean;
+}
+
+export interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
+  /** Shortcut for `<option>` children. */
+  options?: Array<SelectOption | string>;
+}
+
+/** `<select class="oc-select">` */
+export const Select = forwardRef<HTMLSelectElement, SelectProps>(function Select({ options, className, children, ...rest }, ref) {
+  return (
+    <select ref={ref} className={cx("oc-select", className)} {...rest}>
+      {options?.map((o) => {
+        const opt = typeof o === "string" ? { value: o, label: o } : o;
+        return <option key={opt.value} value={opt.value} disabled={opt.disabled}>{opt.label}</option>;
+      })}
+      {children}
+    </select>
+  );
+});

package/src/components/SeverityCard.tsx

@@ -0,0 +1,53 @@
+// File: packages/react/src/components/SeverityCard.tsx
+// Map: SeverityCard = details -> summary head (icon, title + tags, level badge) -> body (children) -> actions
+// Native <details>: opens without JavaScript. Cards with the same `name` open one at a time.
+import { forwardRef } from "react";
+import type { DetailsHTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+
+export type SeverityLevel = "low" | "medium" | "high" | "critical";
+
+const LEVEL_TEXT: Record<SeverityLevel, string> = { low: "Low", medium: "Medium", high: "High", critical: "Critical" };
+
+export interface SeverityCardProps extends Omit<DetailsHTMLAttributes<HTMLDetailsElement>, "title"> {
+  level: SeverityLevel;
+  title: ReactNode;
+  /** Small tags under the title, e.g. ["email", "password"]. */
+  tags?: ReactNode[];
+  /** Badge text; default the level name ("High"). */
+  levelLabel?: ReactNode;
+  icon?: ReactNode;
+  /** Neutral colors (the finding is handled). */
+  resolved?: boolean;
+  actions?: ReactNode;
+  /** Exclusive group: cards with the same name open one at a time. */
+  name?: string;
+}
+
+/** `details.oc-severity-card`: expandable card colored by risk level. */
+export const SeverityCard = forwardRef<HTMLDetailsElement, SeverityCardProps>(function SeverityCard(
+  { level, title, tags, levelLabel, icon, resolved, actions, className, children, ...rest },
+  ref,
+) {
+  const cls = cx("oc-severity-card", `oc-severity-card--${level}`, resolved && "is-resolved", className);
+  return (
+    <details ref={ref} className={cls} {...(rest as object)}>
+      <summary className="oc-severity-card-head">
+        {icon != null && <span className="oc-severity-card-icon" aria-hidden="true">{icon}</span>}
+        <span className="oc-severity-card-main">
+          <span className="oc-severity-card-title">{title}</span>
+          {tags && tags.length > 0 && (
+            <span className="oc-severity-card-tags">
+              {tags.map((t, i) => <span className="oc-severity-card-tag" key={i}>{t}</span>)}
+            </span>
+          )}
+        </span>
+        <span className="oc-severity-card-level">{levelLabel ?? LEVEL_TEXT[level]}</span>
+      </summary>
+      <div className="oc-severity-card-body">
+        {children}
+        {actions != null && <div className="oc-severity-card-actions">{actions}</div>}
+      </div>
+    </details>
+  );
+});

package/src/components/Sheet.tsx

@@ -0,0 +1,62 @@
+"use client";
+
+import { forwardRef, useId, useRef } from "react";
+import type { DialogHTMLAttributes, MouseEvent, ReactNode } from "react";
+import { attrs, cx } from "../utils";
+import { DialogContext, useDialog, useMergedRef } from "../hooks";
+import type { DialogState } from "../hooks";
+
+export type SheetSide = "right" | "left" | "top" | "bottom";
+
+export interface SheetProps extends Omit<DialogHTMLAttributes<HTMLDialogElement>, "title" | "open" | "onClose">, DialogState {
+  /** Edge the panel slides from (default `right`). */
+  side?: SheetSide;
+  /** Wider panel (`oc-sheet-content--wide`). */
+  wide?: boolean;
+  title?: ReactNode;
+  description?: ReactNode;
+  /** Action row (`oc-sheet-footer`). */
+  footer?: ReactNode;
+  /** Accessible name of the close button. */
+  closeLabel?: string;
+}
+
+/** Side panel on `<dialog class="oc-sheet">`. */
+export const Sheet = forwardRef<HTMLDialogElement, SheetProps>(function Sheet(
+  { open, defaultOpen, onOpenChange, side = "right", wide, title, description, footer, closeLabel = "Close", className, children, ...rest },
+  forwardedRef,
+) {
+  const inner = useRef<HTMLDialogElement>(null);
+  const ref = useMergedRef(inner, forwardedRef);
+  const titleId = useId();
+  const dlg = useDialog(inner, { open, defaultOpen, onOpenChange });
+  const onClick = (e: MouseEvent<HTMLDialogElement>) => {
+    rest.onClick?.(e);
+    if (e.target === e.currentTarget) dlg.close();
+  };
+  return (
+    <dialog
+      ref={ref}
+      className={cx("oc-sheet", side !== "right" && `oc-sheet--${side}`, className)}
+      aria-labelledby={title != null ? titleId : undefined}
+      {...attrs({ closedby: "any" })}
+      {...rest}
+      onClick={onClick}
+      onClose={dlg.onClose}
+    >
+      <DialogContext.Provider value={{ close: dlg.close }}>
+        <div className={cx("oc-sheet-content", wide && "oc-sheet-content--wide")}>
+          <button className="oc-sheet-close" type="button" aria-label={closeLabel} onClick={dlg.close}>&times;</button>
+          {(title != null || description != null) && (
+            <div className="oc-sheet-header">
+              {title != null && <h2 className="oc-sheet-title" id={titleId}>{title}</h2>}
+              {description != null && <p className="oc-sheet-description">{description}</p>}
+            </div>
+          )}
+          <div className="oc-sheet-body">{children}</div>
+          {footer != null && <div className="oc-sheet-footer">{footer}</div>}
+        </div>
+      </DialogContext.Provider>
+    </dialog>
+  );
+});

package/src/components/Sidebar.tsx

@@ -0,0 +1,145 @@
+"use client";
+
+import { forwardRef } from "react";
+import type { AnchorHTMLAttributes, HTMLAttributes, LiHTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+import { useControllable } from "../hooks";
+
+export interface SidebarProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
+  /** Icon-only mode. */
+  collapsed?: boolean;
+  /** Dock on the right. */
+  right?: boolean;
+  /** Floating card look. */
+  floating?: boolean;
+  /** Dark panel that stays dark in the light theme (`--dark`). */
+  dark?: boolean;
+  /** Fixed top area (logo, workspace switcher). */
+  header?: ReactNode;
+  /** Fixed bottom area (user). */
+  footer?: ReactNode;
+}
+
+/** `<aside class="oc-sidebar">`: children go in the scrolling `oc-sidebar-content`. */
+export const Sidebar = forwardRef<HTMLElement, SidebarProps>(function Sidebar(
+  { collapsed, right, floating, dark, header, footer, className, children, ...rest },
+  ref,
+) {
+  return (
+    <aside
+      ref={ref}
+      className={cx("oc-sidebar", collapsed && "oc-sidebar--collapsed", right && "oc-sidebar--right", floating && "oc-sidebar--floating", dark && "oc-sidebar--dark", className)}
+      {...rest}
+    >
+      {header != null && <div className="oc-sidebar-header">{header}</div>}
+      <div className="oc-sidebar-content">{children}</div>
+      {footer != null && <div className="oc-sidebar-footer">{footer}</div>}
+    </aside>
+  );
+});
+
+export interface SidebarGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+  /** Group heading (`oc-sidebar-group-label`). */
+  label?: ReactNode;
+}
+
+/** `.oc-sidebar-group` with an optional label. */
+export const SidebarGroup = forwardRef<HTMLDivElement, SidebarGroupProps>(function SidebarGroup(
+  { label, className, children, ...rest },
+  ref,
+) {
+  return (
+    <div ref={ref} className={cx("oc-sidebar-group", className)} {...rest}>
+      {label != null && <div className="oc-sidebar-group-label">{label}</div>}
+      {children}
+    </div>
+  );
+});
+
+/** `.oc-sidebar-separator` */
+export function SidebarSeparator({ className, ...rest }: HTMLAttributes<HTMLDivElement>) {
+  return <div className={cx("oc-sidebar-separator", className)} {...rest} />;
+}
+
+/** `ul.oc-sidebar-menu` */
+export const SidebarMenu = forwardRef<HTMLUListElement, HTMLAttributes<HTMLUListElement>>(function SidebarMenu(
+  { className, ...rest },
+  ref,
+) {
+  return <ul ref={ref} className={cx("oc-sidebar-menu", className)} {...rest} />;
+});
+
+/** `<li>` of a sidebar menu. */
+export function SidebarMenuItem(props: LiHTMLAttributes<HTMLLIElement>) {
+  return <li {...props} />;
+}
+
+export interface SidebarMenuButtonProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+  /** Inline SVG icon (`oc-sidebar-menu-icon`). */
+  icon?: ReactNode;
+  /** Count pill on the right. */
+  badge?: ReactNode;
+  /** Current page (`aria-current="page"`). */
+  current?: boolean;
+  disabled?: boolean;
+  size?: "md" | "lg";
+  /** Wrap the children in `oc-sidebar-menu-label` (hidden when collapsed). Default true. */
+  label?: boolean;
+}
+
+/** `.oc-sidebar-menu-button`: a link (or button when no `href`). */
+export const SidebarMenuButton = forwardRef<HTMLAnchorElement, SidebarMenuButtonProps>(function SidebarMenuButton(
+  { icon, badge, current, disabled, size = "md", label = true, className, children, href, ...rest },
+  ref,
+) {
+  const content = (
+    <>
+      {icon}
+      {label ? <span className="oc-sidebar-menu-label">{children}</span> : children}
+      {badge != null && <span className="oc-sidebar-menu-badge">{badge}</span>}
+    </>
+  );
+  const props = {
+    className: cx("oc-sidebar-menu-button", size === "lg" && "oc-sidebar-menu-button--lg", className),
+    "aria-current": current ? ("page" as const) : undefined,
+    "aria-disabled": disabled ? true : undefined,
+  };
+  if (href === undefined) {
+    return <button type="button" {...props} {...(rest as object)}>{content}</button>;
+  }
+  return <a ref={ref} href={href} {...props} {...rest}>{content}</a>;
+});
+
+export interface SidebarCollapsibleProps extends Omit<HTMLAttributes<HTMLDetailsElement>, "title" | "onToggle"> {
+  icon?: ReactNode;
+  /** Summary label. */
+  label: ReactNode;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+}
+
+/** `details.oc-sidebar-collapsible`: children are the `<li>` items of the nested `oc-sidebar-menu-sub`. */
+export const SidebarCollapsible = forwardRef<HTMLDetailsElement, SidebarCollapsibleProps>(function SidebarCollapsible(
+  { icon, label, open, defaultOpen, onOpenChange, className, children, ...rest },
+  ref,
+) {
+  const [isOpen, setOpen] = useControllable<boolean>(open, defaultOpen ?? false, onOpenChange);
+  return (
+    <details
+      ref={ref}
+      className={cx("oc-sidebar-collapsible", className)}
+      open={isOpen}
+      onToggle={(e) => {
+        if (e.currentTarget.open !== isOpen) setOpen(e.currentTarget.open);
+      }}
+      {...rest}
+    >
+      <summary className="oc-sidebar-menu-button">
+        {icon}
+        <span className="oc-sidebar-menu-label">{label}</span>
+      </summary>
+      <ul className="oc-sidebar-menu-sub">{children}</ul>
+    </details>
+  );
+});

package/src/components/Skeleton.tsx

@@ -0,0 +1,12 @@
+import { forwardRef } from "react";
+import type { HTMLAttributes } from "react";
+import { cx } from "../utils";
+
+export interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {
+  variant?: "circle" | "title" | "text" | "rect";
+}
+
+/** `<div class="oc-skeleton oc-skeleton--{variant}">` */
+export const Skeleton = forwardRef<HTMLDivElement, SkeletonProps>(function Skeleton({ variant, className, ...rest }, ref) {
+  return <div ref={ref} className={cx("oc-skeleton", variant && `oc-skeleton--${variant}`, className)} {...rest} />;
+});

package/src/components/SortableRow.tsx

@@ -0,0 +1,46 @@
+// File: packages/react/src/components/SortableRow.tsx
+// Map: SortableRow = tr.oc-sortable-row -> grip cell (button) -> your cells
+// Styling only: your code handles the drag events (they are passed through on the row)
+// and sets `dragging` / `drop` to show the states.
+import { forwardRef } from "react";
+import type { HTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+
+export interface SortableRowProps extends HTMLAttributes<HTMLTableRowElement> {
+  /** Accessible name of the grip, e.g. "Move Install". */
+  gripLabel: string;
+  /** This row is being moved (`.is-dragging`). */
+  dragging?: boolean;
+  /** Show the drop line above or below this row. */
+  drop?: "before" | "after" | null;
+  /** Locked row: no dragging, grip disabled. */
+  locked?: boolean;
+  /** Picked up with the keyboard (grip `aria-pressed`). */
+  grabbed?: boolean;
+  /** Keyboard handler for the grip (e.g. ArrowUp / ArrowDown to move). */
+  onGripKeyDown?: (e: React.KeyboardEvent<HTMLButtonElement>) => void;
+  children: ReactNode;
+}
+
+/** `tr.oc-sortable-row[draggable]` with a `button.oc-sortable-row-grip` in the first cell. */
+export const SortableRow = forwardRef<HTMLTableRowElement, SortableRowProps>(function SortableRow(
+  { gripLabel, dragging, drop, locked, grabbed, onGripKeyDown, className, children, ...rest },
+  ref,
+) {
+  const cls = cx("oc-sortable-row", dragging && "is-dragging", drop && `is-drop-${drop}`, className);
+  return (
+    <tr ref={ref} className={cls} draggable={locked ? undefined : true} {...rest}>
+      <td className="oc-sortable-row-grip-cell">
+        <button
+          className="oc-sortable-row-grip"
+          type="button"
+          aria-label={gripLabel}
+          aria-pressed={grabbed === undefined ? undefined : grabbed}
+          disabled={locked}
+          onKeyDown={onGripKeyDown}
+        />
+      </td>
+      {children}
+    </tr>
+  );
+});

package/src/components/StackCard.tsx

@@ -0,0 +1,40 @@
+// File: packages/react/src/components/StackCard.tsx
+// Map: props -> StackCard (deck: MediaThumb cover + count badge -> title link + meta)
+// Same markup as packages/ui/snippets/stack-card.html.
+import { forwardRef } from "react";
+import type { HTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+import { MediaThumb } from "./MediaThumb";
+import type { MediaThumbProps } from "./MediaThumb";
+
+export interface StackCardProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
+  title: ReactNode;
+  /** Link of the title; it covers the whole card. */
+  href: string;
+  meta?: ReactNode;
+  /** Badge text, e.g. "12 videos". */
+  count?: ReactNode;
+  /** Show the count as a side panel (`--panel`). */
+  panel?: boolean;
+  /** Props for the cover (MediaThumb). */
+  thumb?: MediaThumbProps;
+}
+
+/** `article.oc-stack-card`: cover with two layers behind it and a count badge. */
+export const StackCard = forwardRef<HTMLElement, StackCardProps>(function StackCard(
+  { title, href, meta, count, panel, thumb, className, ...rest },
+  ref,
+) {
+  return (
+    <article ref={ref} className={cx("oc-stack-card", panel && "oc-stack-card--panel", className)} {...rest}>
+      <div className="oc-stack-card__deck">
+        <MediaThumb {...thumb} />
+        {count != null && <span className="oc-stack-card__count">{count}</span>}
+      </div>
+      <div>
+        <h3 className="oc-stack-card__title"><a href={href}>{title}</a></h3>
+        {meta != null && <p className="oc-stack-card__meta">{meta}</p>}
+      </div>
+    </article>
+  );
+});

package/src/components/StackList.tsx

@@ -0,0 +1,42 @@
+// File: packages/react/src/components/StackList.tsx | Map: types -> StackList (ul.oc-stack-list -> li pills)
+import { forwardRef } from "react";
+import type { HTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+
+export interface StackListItem {
+  label: ReactNode;
+  /** Optional glyph or SVG before the label (decorative). */
+  icon?: ReactNode;
+}
+
+export interface StackListProps extends HTMLAttributes<HTMLUListElement> {
+  /** Strings, or objects with an icon. */
+  items: Array<ReactNode | StackListItem>;
+  neutral?: boolean;
+  size?: "default" | "sm";
+}
+
+const isItem = (v: unknown): v is StackListItem => typeof v === "object" && v !== null && "label" in v;
+
+/** `<ul class="oc-stack-list">`: technology pills. Set an accent with `className="oc-accent--violet"`. */
+export const StackList = forwardRef<HTMLUListElement, StackListProps>(function StackList(
+  { items, neutral = false, size = "default", className, ...rest },
+  ref,
+) {
+  return (
+    <ul ref={ref} className={cx("oc-stack-list", neutral && "oc-stack-list--neutral", size === "sm" && "oc-stack-list--sm", className)} {...rest}>
+      {items.map((item, i) => (
+        <li className="oc-stack-list__item" key={i}>
+          {isItem(item) ? (
+            <>
+              {item.icon != null && <span className="oc-stack-list__icon" aria-hidden="true">{item.icon}</span>}
+              {item.label}
+            </>
+          ) : (
+            item
+          )}
+        </li>
+      ))}
+    </ul>
+  );
+});

package/src/components/StatCard.tsx

@@ -0,0 +1,49 @@
+// File: packages/react/src/components/StatCard.tsx
+// Map: StatCardGrid (row of cards) -> StatCard = card (div, a or button) -> icon -> body (value + trend, label)
+// With `href` the card is a link, with `onClick` a button; otherwise a plain div.
+import { forwardRef } from "react";
+import type { HTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+
+/** `.oc-stat-card-grid`: responsive grid for a row of stat cards. */
+export const StatCardGrid = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(function StatCardGrid(
+  { className, ...rest },
+  ref,
+) {
+  return <div ref={ref} className={cx("oc-stat-card-grid", className)} {...rest} />;
+});
+
+export interface StatCardProps extends Omit<HTMLAttributes<HTMLElement>, "onClick"> {
+  value: ReactNode;
+  label: ReactNode;
+  icon?: ReactNode;
+  /** Trend chip text after the value, e.g. "+12%". */
+  trend?: ReactNode;
+  trendDirection?: "up" | "down";
+  tone?: "default" | "accent" | "success" | "warning";
+  /** Colored start edge. */
+  stripe?: boolean;
+  href?: string;
+  onClick?: () => void;
+}
+
+/** `.oc-stat-card`: compact KPI tile. */
+export function StatCard({ value, label, icon, trend, trendDirection = "up", tone = "default", stripe, href, onClick, className, ...rest }: StatCardProps) {
+  const cls = cx("oc-stat-card", tone !== "default" && `oc-stat-card--${tone}`, stripe && "oc-stat-card--stripe", className);
+  // Spans only inside the body, so the markup is also valid inside a link or button.
+  const content = (
+    <>
+      {icon != null && <span className="oc-stat-card-icon" aria-hidden="true">{icon}</span>}
+      <span className="oc-stat-card-body">
+        <span className="oc-stat-card-value">
+          {value}
+          {trend != null && <span className={`oc-stat-card-trend oc-stat-card-trend--${trendDirection}`}>{trend}</span>}
+        </span>
+        <span className="oc-stat-card-label">{label}</span>
+      </span>
+    </>
+  );
+  if (href !== undefined) return <a className={cls} href={href} {...rest}>{content}</a>;
+  if (onClick) return <button className={cls} type="button" onClick={onClick} {...rest}>{content}</button>;
+  return <div className={cls} {...rest}>{content}</div>;
+}

package/src/components/Stepper.tsx

@@ -0,0 +1,54 @@
+import { forwardRef } from "react";
+import type { HTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+
+export interface StepperStep {
+  label: ReactNode;
+  /** Small text under the label, e.g. `2/4`. */
+  meta?: ReactNode;
+}
+
+export interface StepperProps extends Omit<HTMLAttributes<HTMLOListElement>, "onChange"> {
+  steps: StepperStep[];
+  /** Index of the active step (0-based). Earlier steps are done, later ones disabled. */
+  current: number;
+  horizontal?: boolean;
+  /** Called when a done step is clicked. */
+  onStepChange?: (index: number) => void;
+}
+
+/** `<ol class="oc-stepper">`: done, active and upcoming steps. */
+export const Stepper = forwardRef<HTMLOListElement, StepperProps>(function Stepper(
+  { steps, current, horizontal, onStepChange, className, ...rest },
+  ref,
+) {
+  return (
+    <ol ref={ref} className={cx("oc-stepper", horizontal && "oc-stepper--horizontal", className)} {...rest}>
+      {steps.map((step, i) => {
+        const done = i < current;
+        const active = i === current;
+        const label = <span className="oc-stepper-label">{step.label}</span>;
+        return (
+          <li key={i}>
+            <button
+              className={cx("oc-stepper-item", done && "oc-stepper-item--done", active && "oc-stepper-item--active")}
+              type="button"
+              aria-current={active ? "step" : undefined}
+              disabled={i > current}
+              onClick={() => onStepChange?.(i)}
+            >
+              {step.meta != null ? (
+                <span>
+                  {label}
+                  <span className="oc-stepper-meta">{step.meta}</span>
+                </span>
+              ) : (
+                label
+              )}
+            </button>
+          </li>
+        );
+      })}
+    </ol>
+  );
+});

package/src/components/Switch.tsx

@@ -0,0 +1,18 @@
+import { forwardRef } from "react";
+import type { InputHTMLAttributes } from "react";
+import { cx } from "../utils";
+
+export interface SwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "role"> {
+  /** Class for the wrapping label (`className` goes to the input). */
+  labelClassName?: string;
+}
+
+/** `<label class="oc-switch"><input type="checkbox" role="switch">`. Works controlled (`checked`) or uncontrolled. */
+export const Switch = forwardRef<HTMLInputElement, SwitchProps>(function Switch({ labelClassName, className, ...rest }, ref) {
+  return (
+    <label className={cx("oc-switch", labelClassName)}>
+      <input ref={ref} type="checkbox" role="switch" className={className} {...rest} />
+      <span className="oc-switch-track" />
+    </label>
+  );
+});