@imdz/react 0.0.0-stage → 0.2.0

package/dist/switch.d.ts

@@ -0,0 +1,3 @@
+import type { InputHTMLAttributes } from "react";
+export type SwitchProps = Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "role">;
+export declare function Switch(props: SwitchProps): import("react").JSX.Element;

package/dist/switch.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { cx } from "./cx.js";
+import { Style } from "./style.js";
+import { css as fontsCss } from "./styles/fonts.js";
+import { css as switchCss } from "./styles/switch.js";
+/** The switch label goes as children. */
+function SwitchBase({ className, children, ...props }) {
+    return (_jsxs("label", { className: cx("imdz-switch", className), children: [_jsx("input", { type: "checkbox", role: "switch", className: "imdz-switch-input", ...props }), _jsx("span", { children: children })] }));
+}
+export function Switch(props) {
+    return (_jsxs(_Fragment, { children: [_jsx(Style, { id: "fonts", css: fontsCss }), _jsx(Style, { id: "switch", css: switchCss }), _jsx(SwitchBase, { ...props })] }));
+}

package/dist/tabs.d.ts

@@ -0,0 +1,12 @@
+import { type ReactNode } from "react";
+export type TabItem = {
+    label: string;
+    content: ReactNode;
+};
+export type TabsProps = {
+    items: TabItem[];
+    defaultIndex?: number;
+    onChange?: (index: number) => void;
+    className?: string;
+};
+export declare function Tabs(props: TabsProps): import("react").JSX.Element;

package/dist/tabs.js

@@ -0,0 +1,36 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useId, useRef, useState, } from "react";
+import { cx } from "./cx.js";
+import { Style } from "./style.js";
+import { css as fontsCss } from "./styles/fonts.js";
+import { css as tabsCss } from "./styles/tabs.js";
+function TabsBase({ items, defaultIndex = 0, onChange, className, }) {
+    const [selected, setSelected] = useState(defaultIndex);
+    const tabRefs = useRef([]);
+    const baseId = useId();
+    function select(index) {
+        setSelected(index);
+        onChange?.(index);
+    }
+    function handleKeyDown(event) {
+        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 (_jsxs("div", { className: cx("imdz-tabs", className), children: [_jsx("div", { className: "imdz-tabs-list", role: "tablist", onKeyDown: handleKeyDown, children: items.map((item, index) => (_jsx("button", { ref: (element) => {
+                        tabRefs.current[index] = element;
+                    }, type: "button", role: "tab", id: `${baseId}-tab-${index}`, className: "imdz-tabs-tab", "aria-selected": index === selected, "aria-controls": `${baseId}-panel-${index}`, tabIndex: index === selected ? 0 : -1, onClick: () => select(index), children: item.label }, item.label))) }), items.map((item, index) => (_jsx("div", { role: "tabpanel", id: `${baseId}-panel-${index}`, className: "imdz-tabs-panel", "aria-labelledby": `${baseId}-tab-${index}`, hidden: index !== selected, children: item.content }, item.label)))] }));
+}
+export function Tabs(props) {
+    return (_jsxs(_Fragment, { children: [_jsx(Style, { id: "fonts", css: fontsCss }), _jsx(Style, { id: "tabs", css: tabsCss }), _jsx(TabsBase, { ...props })] }));
+}

package/dist/textarea.d.ts

@@ -0,0 +1,7 @@
+import { type TextareaHTMLAttributes } from "react";
+export type TextareaProps = TextareaHTMLAttributes<HTMLTextAreaElement> & {
+    label?: string;
+    hint?: string;
+    error?: string;
+};
+export declare function Textarea(props: TextareaProps): import("react").JSX.Element;

package/dist/textarea.js

@@ -0,0 +1,18 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useId } from "react";
+import { cx } from "./cx.js";
+import { Style } from "./style.js";
+import { css as fontsCss } from "./styles/fonts.js";
+import { css as fieldCss } from "./styles/field.js";
+import { css as textareaCss } from "./styles/textarea.js";
+function TextareaBase({ label, hint, error, id, rows = 4, className, ...props }) {
+    const generatedId = useId();
+    const inputId = id ?? generatedId;
+    const message = error || hint;
+    const messageId = `${inputId}-message`;
+    return (_jsxs("div", { className: "imdz-field", children: [label && (_jsx("label", { className: "imdz-field-label", htmlFor: inputId, children: label })), _jsx("textarea", { id: inputId, rows: rows, className: cx("imdz-field-input", "imdz-textarea", className), "aria-invalid": error ? true : undefined, "aria-describedby": message ? messageId : undefined, ...props }), message && (_jsx("p", { id: messageId, className: error ? "imdz-field-error" : "imdz-field-hint", children: message }))] }));
+}
+export function Textarea(props) {
+    return (_jsxs(_Fragment, { children: [_jsx(Style, { id: "fonts", css: fontsCss }), _jsx(Style, { id: "field", css: fieldCss }), _jsx(Style, { id: "textarea", css: textareaCss }), _jsx(TextareaBase, { ...props })] }));
+}

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/dist/tooltip.d.ts

@@ -0,0 +1,7 @@
+import type { ReactNode } from "react";
+export type TooltipProps = {
+    text: string;
+    className?: string;
+    children: ReactNode;
+};
+export declare function Tooltip(props: TooltipProps): import("react").JSX.Element;

package/dist/tooltip.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { cx } from "./cx.js";
+import { Style } from "./style.js";
+import { css as fontsCss } from "./styles/fonts.js";
+import { css as tooltipCss } from "./styles/tooltip.js";
+/** Wraps an element and shows a short text on hover or focus. */
+function TooltipBase({ text, className, children }) {
+    return (_jsxs("span", { className: cx("imdz-tooltip", className), children: [children, _jsx("span", { className: "imdz-tooltip-bubble", role: "tooltip", children: text })] }));
+}
+export function Tooltip(props) {
+    return (_jsxs(_Fragment, { children: [_jsx(Style, { id: "fonts", css: fontsCss }), _jsx(Style, { id: "tooltip", css: tooltipCss }), _jsx(TooltipBase, { ...props })] }));
+}

package/package.json

@@ -1,6 +1,56 @@
 {
   "name": "@imdz/react",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "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",
+  "sideEffects": [
+    "*.css"
+  ],
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./dark.css": "./dist/dark.css",
+    "./styles.css": "./dist/styles.css",
+    "./fonts.css": "./dist/fonts.css",
+    "./package.json": "./package.json",
+    "./tokens.css": "./dist/tokens.css"
+  },
+  "files": [
+    "dist",
+    "src",
+    "OFL.txt",
+    "LICENSE"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "homepage": "https://imdz.dev",
+  "scripts": {
+    "build": "node scripts/build.mjs",
+    "dev": "npm run build && node scripts/dev.mjs",
+    "prepack": "node scripts/build.mjs"
+  },
+  "keywords": [
+    "react",
+    "components",
+    "ui",
+    "css",
+    "accessible"
+  ],
+  "peerDependencies": {
+    "react": ">=18"
+  },
+  "dependencies": {
+    "@imdz/styles": "^0.1.0"
+  },
+  "devDependencies": {
+    "@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>
+  );
+}