@imdz/react 0.0.0-stage → 0.2.0

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