@imdz/react 0.1.0 → 0.2.0

package/dist/styles/fonts.d.ts

@@ -1 +1 @@
-export declare const css = "@font-face {\n  font-family: \"imdz Inter\";\n  font-style: normal;\n  font-weight: 400;\n  font-display: swap;\n  src: url(https://cdn.jsdelivr.net/npm/@imdz/react@0.1.0/dist/fonts/inter-latin-400-normal.woff2) format(\"woff2\");\n  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;\n}\n@font-face {\n  font-family: \"imdz Inter\";\n  font-style: normal;\n  font-weight: 600;\n  font-display: swap;\n  src: url(https://cdn.jsdelivr.net/npm/@imdz/react@0.1.0/dist/fonts/inter-latin-600-normal.woff2) format(\"woff2\");\n  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;\n}\n@font-face {\n  font-family: \"imdz JetBrains Mono\";\n  font-style: normal;\n  font-weight: 600;\n  font-display: swap;\n  src: url(https://cdn.jsdelivr.net/npm/@imdz/react@0.1.0/dist/fonts/jetbrains-mono-latin-600-normal.woff2) format(\"woff2\");\n  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;\n}";
+export declare const css = "@font-face {\n  font-family: \"imdz Inter\";\n  font-style: normal;\n  font-weight: 400;\n  font-display: swap;\n  src: url(https://cdn.jsdelivr.net/npm/@imdz/react@0/dist/fonts/inter-latin-400-normal.woff2) format(\"woff2\");\n  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;\n}\n@font-face {\n  font-family: \"imdz Inter\";\n  font-style: normal;\n  font-weight: 600;\n  font-display: swap;\n  src: url(https://cdn.jsdelivr.net/npm/@imdz/react@0/dist/fonts/inter-latin-600-normal.woff2) format(\"woff2\");\n  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;\n}\n@font-face {\n  font-family: \"imdz JetBrains Mono\";\n  font-style: normal;\n  font-weight: 600;\n  font-display: swap;\n  src: url(https://cdn.jsdelivr.net/npm/@imdz/react@0/dist/fonts/jetbrains-mono-latin-600-normal.woff2) format(\"woff2\");\n  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;\n}";

package/dist/styles/fonts.js

@@ -1 +1 @@
-export const css = "@font-face {\n  font-family: \"imdz Inter\";\n  font-style: normal;\n  font-weight: 400;\n  font-display: swap;\n  src: url(https://cdn.jsdelivr.net/npm/@imdz/react@0.1.0/dist/fonts/inter-latin-400-normal.woff2) format(\"woff2\");\n  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;\n}\n@font-face {\n  font-family: \"imdz Inter\";\n  font-style: normal;\n  font-weight: 600;\n  font-display: swap;\n  src: url(https://cdn.jsdelivr.net/npm/@imdz/react@0.1.0/dist/fonts/inter-latin-600-normal.woff2) format(\"woff2\");\n  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;\n}\n@font-face {\n  font-family: \"imdz JetBrains Mono\";\n  font-style: normal;\n  font-weight: 600;\n  font-display: swap;\n  src: url(https://cdn.jsdelivr.net/npm/@imdz/react@0.1.0/dist/fonts/jetbrains-mono-latin-600-normal.woff2) format(\"woff2\");\n  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;\n}";
+export const css = "@font-face {\n  font-family: \"imdz Inter\";\n  font-style: normal;\n  font-weight: 400;\n  font-display: swap;\n  src: url(https://cdn.jsdelivr.net/npm/@imdz/react@0/dist/fonts/inter-latin-400-normal.woff2) format(\"woff2\");\n  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;\n}\n@font-face {\n  font-family: \"imdz Inter\";\n  font-style: normal;\n  font-weight: 600;\n  font-display: swap;\n  src: url(https://cdn.jsdelivr.net/npm/@imdz/react@0/dist/fonts/inter-latin-600-normal.woff2) format(\"woff2\");\n  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;\n}\n@font-face {\n  font-family: \"imdz JetBrains Mono\";\n  font-style: normal;\n  font-weight: 600;\n  font-display: swap;\n  src: url(https://cdn.jsdelivr.net/npm/@imdz/react@0/dist/fonts/jetbrains-mono-latin-600-normal.woff2) format(\"woff2\");\n  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;\n}";

package/dist/tokens.css

@@ -0,0 +1,49 @@
+/*
+ * Design tokens: the source of the default values.
+ *
+ * Components don't depend on this file. When @imdz/react is built
+ * (its scripts/build.mjs), every var(--imdz-x) in a component's CSS
+ * becomes var(--imdz-x, value) with the value from here, so each
+ * component works on its own and anyone can override any token in :root.
+ *
+ * The palette is monochrome: black, white and grays. Color only shows up in
+ * states (success, warning, error).
+ *
+ * light-dark(light, dark): the store website and the Web Components load
+ * this file as is and follow the page's color-scheme. In the published
+ * package, the build keeps only the light value and moves the dark one to
+ * dist/dark.css.
+ */
+:where(:root) {
+  /* The @font-face rules are in fonts.css; the components put them on the
+     page themselves. */
+  --imdz-font: "imdz Inter", system-ui, -apple-system, "Segoe UI", Roboto,
+    sans-serif;
+  --imdz-font-mono: "imdz JetBrains Mono", ui-monospace, "SF Mono", Menlo,
+    Consolas, monospace;
+  --imdz-radius: 0px;
+  --imdz-tracking: 0.08em;
+
+  --imdz-bg: light-dark(#ffffff, #000000);
+  --imdz-surface: light-dark(#f2f2f2, #0d0d0d);
+  --imdz-border: light-dark(#c4c4c4, #2e2e2e);
+  --imdz-text: light-dark(#000000, #ffffff);
+  --imdz-muted: light-dark(#5e5e5e, #9a9a9a);
+
+  --imdz-primary: var(--imdz-text);
+  --imdz-on-primary: var(--imdz-bg);
+  --imdz-success: light-dark(#0f7a3d, #5dffa0);
+  --imdz-warning: light-dark(#8f5a00, #ffd166);
+  --imdz-danger: light-dark(#c4001a, #ff5c6c);
+  --imdz-on-danger: light-dark(#ffffff, #000000);
+
+  --imdz-focus: var(--imdz-text);
+}
+
+:where([data-imdz-theme="light"]) {
+  color-scheme: light;
+}
+
+:where([data-imdz-theme="dark"]) {
+  color-scheme: dark;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@imdz/react",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Accessible React components with plain CSS. npm i @imdz/react and import them: no Tailwind, no config, works with any React framework.",
   "license": "MIT",
   "type": "module",
@@ -17,10 +17,12 @@
     "./dark.css": "./dist/dark.css",
     "./styles.css": "./dist/styles.css",
     "./fonts.css": "./dist/fonts.css",
-    "./package.json": "./package.json"
+    "./package.json": "./package.json",
+    "./tokens.css": "./dist/tokens.css"
   },
   "files": [
     "dist",
+    "src",
     "OFL.txt",
     "LICENSE"
   ],
@@ -30,6 +32,7 @@
   "homepage": "https://imdz.dev",
   "scripts": {
     "build": "node scripts/build.mjs",
+    "dev": "npm run build && node scripts/dev.mjs",
     "prepack": "node scripts/build.mjs"
   },
   "keywords": [
@@ -42,8 +45,12 @@
   "peerDependencies": {
     "react": ">=18"
   },
+  "dependencies": {
+    "@imdz/styles": "^0.1.0"
+  },
   "devDependencies": {
-    "@fontsource/inter": "^5.3.0",
-    "@fontsource/jetbrains-mono": "^5.3.0"
+    "@types/react": "^19",
+    "react": "19.3.0",
+    "typescript": "^5"
   }
 }

package/src/accordion.tsx

@@ -0,0 +1,35 @@
+import type { ReactNode } from "react";
+import { cx } from "./cx";
+import styles from "@imdz/styles/accordion.module.css";
+
+export type AccordionItem = {
+  heading: string;
+  content: ReactNode;
+  defaultOpen?: boolean;
+};
+
+export type AccordionProps = {
+  items: AccordionItem[];
+  /** If set, only one section can be open at a time. */
+  name?: string;
+  className?: string;
+};
+
+/** Collapsible sections built on the native details element. */
+export function Accordion({ items, name, className }: AccordionProps) {
+  return (
+    <div className={cx(styles.accordion, className)}>
+      {items.map((item) => (
+        <details
+          key={item.heading}
+          name={name}
+          open={item.defaultOpen}
+          className={styles.item}
+        >
+          <summary className={styles.summary}>{item.heading}</summary>
+          <div className={styles.content}>{item.content}</div>
+        </details>
+      ))}
+    </div>
+  );
+}

package/src/alert.tsx

@@ -0,0 +1,33 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import { cx } from "./cx";
+import styles from "@imdz/styles/alert.module.css";
+
+export type AlertVariant = "info" | "success" | "warning" | "danger";
+
+export type AlertProps = Omit<HTMLAttributes<HTMLDivElement>, "title"> & {
+  variant?: AlertVariant;
+  heading?: ReactNode;
+};
+
+export function Alert({
+  variant = "info",
+  heading,
+  className,
+  children,
+  ...props
+}: AlertProps) {
+  return (
+    <div
+      role={variant === "danger" ? "alert" : "status"}
+      className={cx(
+        styles.alert,
+        variant !== "info" && styles[variant],
+        className,
+      )}
+      {...props}
+    >
+      {heading && <p className={styles.title}>{heading}</p>}
+      <div>{children}</div>
+    </div>
+  );
+}

package/src/avatar.tsx

@@ -0,0 +1,37 @@
+import { cx } from "./cx";
+import styles from "@imdz/styles/avatar.module.css";
+
+export type AvatarProps = {
+  /** The person's name: gives the initials and the alt text. */
+  name: string;
+  src?: string;
+  size?: "md" | "lg";
+  className?: string;
+};
+
+export function Avatar({ name, src, size = "md", className }: AvatarProps) {
+  const classes = cx(styles.avatar, size === "lg" && styles.lg, className);
+
+  if (src) {
+    return (
+      <span className={classes}>
+        {/* Image from any source: optimizing it is up to the project. */}
+        {/* eslint-disable-next-line @next/next/no-img-element */}
+        <img src={src} alt={name} />
+      </span>
+    );
+  }
+
+  const initials = name
+    .split(/\s+/)
+    .filter(Boolean)
+    .slice(0, 2)
+    .map((word) => word[0])
+    .join("");
+
+  return (
+    <span className={classes} role="img" aria-label={name}>
+      {initials}
+    </span>
+  );
+}

package/src/badge.tsx

@@ -0,0 +1,31 @@
+import type { HTMLAttributes } from "react";
+import { cx } from "./cx";
+import styles from "@imdz/styles/badge.module.css";
+
+export type BadgeVariant =
+  | "neutral"
+  | "primary"
+  | "success"
+  | "warning"
+  | "danger";
+
+export type BadgeProps = HTMLAttributes<HTMLSpanElement> & {
+  variant?: BadgeVariant;
+};
+
+export function Badge({
+  variant = "neutral",
+  className,
+  ...props
+}: BadgeProps) {
+  return (
+    <span
+      className={cx(
+        styles.badge,
+        variant !== "neutral" && styles[variant],
+        className,
+      )}
+      {...props}
+    />
+  );
+}

package/src/button.tsx

@@ -0,0 +1,32 @@
+import type { ButtonHTMLAttributes } from "react";
+import { cx } from "./cx";
+import styles from "@imdz/styles/button.module.css";
+
+export type ButtonVariant = "primary" | "secondary" | "ghost" | "danger";
+export type ButtonSize = "sm" | "md" | "lg";
+
+export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+};
+
+export function Button({
+  variant = "primary",
+  size = "md",
+  type = "button",
+  className,
+  ...props
+}: ButtonProps) {
+  return (
+    <button
+      type={type}
+      className={cx(
+        styles.button,
+        variant !== "primary" && styles[variant],
+        size !== "md" && styles[size],
+        className,
+      )}
+      {...props}
+    />
+  );
+}

package/src/card.tsx

@@ -0,0 +1,24 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import { cx } from "./cx";
+import styles from "@imdz/styles/card.module.css";
+
+export type CardProps = Omit<HTMLAttributes<HTMLDivElement>, "title"> & {
+  heading?: ReactNode;
+  footer?: ReactNode;
+};
+
+export function Card({
+  heading,
+  footer,
+  className,
+  children,
+  ...props
+}: CardProps) {
+  return (
+    <div className={cx(styles.card, className)} {...props}>
+      {heading && <h3 className={styles.title}>{heading}</h3>}
+      <div className={styles.body}>{children}</div>
+      {footer && <div className={styles.footer}>{footer}</div>}
+    </div>
+  );
+}

package/src/checkbox.tsx

@@ -0,0 +1,18 @@
+import type { InputHTMLAttributes } from "react";
+import { cx } from "./cx";
+import styles from "@imdz/styles/checkbox.module.css";
+
+export type CheckboxProps = Omit<
+  InputHTMLAttributes<HTMLInputElement>,
+  "type"
+>;
+
+/** The checkbox label goes as children. */
+export function Checkbox({ className, children, ...props }: CheckboxProps) {
+  return (
+    <label className={cx(styles.checkbox, className)}>
+      <input type="checkbox" className={styles.input} {...props} />
+      <span>{children}</span>
+    </label>
+  );
+}

package/src/cx.ts

@@ -0,0 +1,3 @@
+export function cx(...classes: (string | false | null | undefined)[]) {
+  return classes.filter(Boolean).join(" ");
+}

package/src/dialog.tsx

@@ -0,0 +1,61 @@
+"use client";
+
+import { useEffect, useId, useRef, type ReactNode } from "react";
+import { cx } from "./cx";
+import styles from "@imdz/styles/dialog.module.css";
+
+export type DialogProps = {
+  open: boolean;
+  /** Called on close: with Escape, with the close button or when open becomes false. */
+  onClose: () => void;
+  heading: ReactNode;
+  footer?: ReactNode;
+  closeLabel?: string;
+  className?: string;
+  children?: ReactNode;
+};
+
+export function Dialog({
+  open,
+  onClose,
+  heading,
+  footer,
+  closeLabel = "Close",
+  className,
+  children,
+}: DialogProps) {
+  const ref = useRef<HTMLDialogElement>(null);
+  const titleId = useId();
+
+  useEffect(() => {
+    const element = ref.current;
+    if (!element) return;
+    if (open && !element.open) element.showModal();
+    if (!open && element.open) element.close();
+  }, [open]);
+
+  return (
+    <dialog
+      ref={ref}
+      className={cx(styles.dialog, className)}
+      aria-labelledby={titleId}
+      onClose={onClose}
+    >
+      <header className={styles.header}>
+        <h2 id={titleId} className={styles.title}>
+          {heading}
+        </h2>
+        <button
+          type="button"
+          className={styles.close}
+          aria-label={closeLabel}
+          onClick={onClose}
+        >
+          &times;
+        </button>
+      </header>
+      <div className={styles.body}>{children}</div>
+      {footer && <footer className={styles.footer}>{footer}</footer>}
+    </dialog>
+  );
+}

package/src/index.ts

@@ -0,0 +1,26 @@
+export {
+  Accordion,
+  type AccordionItem,
+  type AccordionProps,
+} from "./accordion";
+export { Alert, type AlertProps, type AlertVariant } from "./alert";
+export { Avatar, type AvatarProps } from "./avatar";
+export { Badge, type BadgeProps, type BadgeVariant } from "./badge";
+export {
+  Button,
+  type ButtonProps,
+  type ButtonSize,
+  type ButtonVariant,
+} from "./button";
+export { Card, type CardProps } from "./card";
+export { Checkbox, type CheckboxProps } from "./checkbox";
+export { Dialog, type DialogProps } from "./dialog";
+export { Input, type InputProps } from "./input";
+export { Progress, type ProgressProps } from "./progress";
+export { Select, type SelectProps } from "./select";
+export { Skeleton, type SkeletonProps } from "./skeleton";
+export { Spinner, type SpinnerProps } from "./spinner";
+export { Switch, type SwitchProps } from "./switch";
+export { Tabs, type TabItem, type TabsProps } from "./tabs";
+export { Textarea, type TextareaProps } from "./textarea";
+export { Tooltip, type TooltipProps } from "./tooltip";

package/src/input.tsx

@@ -0,0 +1,50 @@
+"use client";
+
+import { useId, type InputHTMLAttributes } from "react";
+import { cx } from "./cx";
+import field from "@imdz/styles/field.module.css";
+
+export type InputProps = InputHTMLAttributes<HTMLInputElement> & {
+  label?: string;
+  hint?: string;
+  error?: string;
+};
+
+export function Input({
+  label,
+  hint,
+  error,
+  id,
+  className,
+  ...props
+}: InputProps) {
+  const generatedId = useId();
+  const inputId = id ?? generatedId;
+  const message = error || hint;
+  const messageId = `${inputId}-message`;
+
+  return (
+    <div className={field.field}>
+      {label && (
+        <label className={field.label} htmlFor={inputId}>
+          {label}
+        </label>
+      )}
+      <input
+        id={inputId}
+        className={cx(field.input, className)}
+        aria-invalid={error ? true : undefined}
+        aria-describedby={message ? messageId : undefined}
+        {...props}
+      />
+      {message && (
+        <p
+          id={messageId}
+          className={error ? field.error : field.hint}
+        >
+          {message}
+        </p>
+      )}
+    </div>
+  );
+}

package/src/progress.tsx

@@ -0,0 +1,45 @@
+import type { CSSProperties } from "react";
+import { cx } from "./cx";
+import styles from "@imdz/styles/progress.module.css";
+
+export type ProgressProps = {
+  value: number;
+  max?: number;
+  /** Shown above the bar next to the percentage. */
+  label?: string;
+  className?: string;
+};
+
+export function Progress({
+  value,
+  max = 100,
+  label,
+  className,
+}: ProgressProps) {
+  const ratio = max > 0 ? value / max : 0;
+  const percent = Math.round(Math.min(Math.max(ratio, 0), 1) * 100);
+
+  return (
+    <div className={cx(styles.progress, className)}>
+      {label && (
+        <div className={styles.header}>
+          <span>{label}</span>
+          <span>{percent}%</span>
+        </div>
+      )}
+      <div
+        className={styles.track}
+        role="progressbar"
+        aria-label={label}
+        aria-valuemin={0}
+        aria-valuemax={max}
+        aria-valuenow={value}
+      >
+        <div
+          className={styles.bar}
+          style={{ "--imdz-progress-value": `${percent}%` } as CSSProperties}
+        />
+      </div>
+    </div>
+  );
+}

package/src/select.tsx

@@ -0,0 +1,55 @@
+"use client";
+
+import { useId, type SelectHTMLAttributes } from "react";
+import { cx } from "./cx";
+import field from "@imdz/styles/field.module.css";
+import styles from "@imdz/styles/select.module.css";
+
+export type SelectProps = SelectHTMLAttributes<HTMLSelectElement> & {
+  label?: string;
+  hint?: string;
+  error?: string;
+};
+
+/** Options go as children: regular option elements. */
+export function Select({
+  label,
+  hint,
+  error,
+  id,
+  className,
+  children,
+  ...props
+}: SelectProps) {
+  const generatedId = useId();
+  const inputId = id ?? generatedId;
+  const message = error || hint;
+  const messageId = `${inputId}-message`;
+
+  return (
+    <div className={field.field}>
+      {label && (
+        <label className={field.label} htmlFor={inputId}>
+          {label}
+        </label>
+      )}
+      <select
+        id={inputId}
+        className={cx(field.input, styles.select, className)}
+        aria-invalid={error ? true : undefined}
+        aria-describedby={message ? messageId : undefined}
+        {...props}
+      >
+        {children}
+      </select>
+      {message && (
+        <p
+          id={messageId}
+          className={error ? field.error : field.hint}
+        >
+          {message}
+        </p>
+      )}
+    </div>
+  );
+}

package/src/skeleton.tsx

@@ -0,0 +1,20 @@
+import type { CSSProperties } from "react";
+import { cx } from "./cx";
+import styles from "@imdz/styles/skeleton.module.css";
+
+export type SkeletonProps = {
+  width?: CSSProperties["width"];
+  height?: CSSProperties["height"];
+  className?: string;
+};
+
+/** Loading placeholder. */
+export function Skeleton({ width, height, className }: SkeletonProps) {
+  return (
+    <span
+      aria-hidden="true"
+      className={cx(styles.skeleton, className)}
+      style={{ width, height }}
+    />
+  );
+}

package/src/spinner.tsx

@@ -0,0 +1,23 @@
+import { cx } from "./cx";
+import styles from "@imdz/styles/spinner.module.css";
+
+export type SpinnerProps = {
+  /** Text for screen readers. */
+  label?: string;
+  size?: "md" | "lg";
+  className?: string;
+};
+
+export function Spinner({
+  label = "Loading",
+  size = "md",
+  className,
+}: SpinnerProps) {
+  return (
+    <span
+      role="status"
+      aria-label={label}
+      className={cx(styles.spinner, size === "lg" && styles.lg, className)}
+    />
+  );
+}

package/src/switch.tsx

@@ -0,0 +1,23 @@
+import type { InputHTMLAttributes } from "react";
+import { cx } from "./cx";
+import styles from "@imdz/styles/switch.module.css";
+
+export type SwitchProps = Omit<
+  InputHTMLAttributes<HTMLInputElement>,
+  "type" | "role"
+>;
+
+/** The switch label goes as children. */
+export function Switch({ className, children, ...props }: SwitchProps) {
+  return (
+    <label className={cx(styles.switch, className)}>
+      <input
+        type="checkbox"
+        role="switch"
+        className={styles.input}
+        {...props}
+      />
+      <span>{children}</span>
+    </label>
+  );
+}

package/src/tabs.tsx

@@ -0,0 +1,91 @@
+"use client";
+
+import {
+  useId,
+  useRef,
+  useState,
+  type KeyboardEvent,
+  type ReactNode,
+} from "react";
+import { cx } from "./cx";
+import styles from "@imdz/styles/tabs.module.css";
+
+export type TabItem = {
+  label: string;
+  content: ReactNode;
+};
+
+export type TabsProps = {
+  items: TabItem[];
+  defaultIndex?: number;
+  onChange?: (index: number) => void;
+  className?: string;
+};
+
+export function Tabs({
+  items,
+  defaultIndex = 0,
+  onChange,
+  className,
+}: TabsProps) {
+  const [selected, setSelected] = useState(defaultIndex);
+  const tabRefs = useRef<(HTMLButtonElement | null)[]>([]);
+  const baseId = useId();
+
+  function select(index: number) {
+    setSelected(index);
+    onChange?.(index);
+  }
+
+  function handleKeyDown(event: KeyboardEvent) {
+    const last = items.length - 1;
+    const next = {
+      ArrowRight: selected === last ? 0 : selected + 1,
+      ArrowLeft: selected === 0 ? last : selected - 1,
+      Home: 0,
+      End: last,
+    }[event.key];
+
+    if (next === undefined) return;
+    event.preventDefault();
+    select(next);
+    tabRefs.current[next]?.focus();
+  }
+
+  return (
+    <div className={cx(styles.tabs, className)}>
+      <div className={styles.list} role="tablist" onKeyDown={handleKeyDown}>
+        {items.map((item, index) => (
+          <button
+            key={item.label}
+            ref={(element) => {
+              tabRefs.current[index] = element;
+            }}
+            type="button"
+            role="tab"
+            id={`${baseId}-tab-${index}`}
+            className={styles.tab}
+            aria-selected={index === selected}
+            aria-controls={`${baseId}-panel-${index}`}
+            tabIndex={index === selected ? 0 : -1}
+            onClick={() => select(index)}
+          >
+            {item.label}
+          </button>
+        ))}
+      </div>
+      {items.map((item, index) => (
+        <div
+          key={item.label}
+          role="tabpanel"
+          id={`${baseId}-panel-${index}`}
+          className={styles.panel}
+          aria-labelledby={`${baseId}-tab-${index}`}
+          hidden={index !== selected}
+        >
+          {item.content}
+        </div>
+      ))}
+    </div>
+  );
+}

package/src/textarea.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import { useId, type TextareaHTMLAttributes } from "react";
+import { cx } from "./cx";
+import field from "@imdz/styles/field.module.css";
+import styles from "@imdz/styles/textarea.module.css";
+
+export type TextareaProps = TextareaHTMLAttributes<HTMLTextAreaElement> & {
+  label?: string;
+  hint?: string;
+  error?: string;
+};
+
+export function Textarea({
+  label,
+  hint,
+  error,
+  id,
+  rows = 4,
+  className,
+  ...props
+}: TextareaProps) {
+  const generatedId = useId();
+  const inputId = id ?? generatedId;
+  const message = error || hint;
+  const messageId = `${inputId}-message`;
+
+  return (
+    <div className={field.field}>
+      {label && (
+        <label className={field.label} htmlFor={inputId}>
+          {label}
+        </label>
+      )}
+      <textarea
+        id={inputId}
+        rows={rows}
+        className={cx(field.input, styles.textarea, className)}
+        aria-invalid={error ? true : undefined}
+        aria-describedby={message ? messageId : undefined}
+        {...props}
+      />
+      {message && (
+        <p
+          id={messageId}
+          className={error ? field.error : field.hint}
+        >
+          {message}
+        </p>
+      )}
+    </div>
+  );
+}

package/src/tooltip.tsx

@@ -0,0 +1,21 @@
+import type { ReactNode } from "react";
+import { cx } from "./cx";
+import styles from "@imdz/styles/tooltip.module.css";
+
+export type TooltipProps = {
+  text: string;
+  className?: string;
+  children: ReactNode;
+};
+
+/** Wraps an element and shows a short text on hover or focus. */
+export function Tooltip({ text, className, children }: TooltipProps) {
+  return (
+    <span className={cx(styles.tooltip, className)}>
+      {children}
+      <span className={styles.bubble} role="tooltip">
+        {text}
+      </span>
+    </span>
+  );
+}