eyecomfy-ui 0.0.0-stage → 0.1.0

package/AGENTS.md

@@ -0,0 +1,280 @@
+# eyecomfy-ui: guide for AI agents
+
+Read this file first. It covers everything needed to install `eyecomfy-ui` and build UI from its ten components. Per-component detail is in `docs/<Component>.md` inside this package.
+
+## What it is
+
+Ten basic React components styled with plain CSS custom properties. There is no layout system, no icon set and no runtime dependency beyond React. You compose the components yourself with your own layout (flexbox, grid, plain CSS).
+
+## Install and setup
+
+```bash
+npm install eyecomfy-ui
+```
+
+Peer dependencies: `react` and `react-dom`, version 18.2 or later (19 supported).
+
+1. Import the stylesheet once, near the top of the app (for example in the root layout or entry file):
+
+   ```js
+   import 'eyecomfy-ui/ui.css';
+   ```
+
+2. Import components by name from the package root:
+
+   ```js
+   import { Button, TextField } from 'eyecomfy-ui';
+   ```
+
+The project's bundler must compile JSX. Vite, Next.js, Remix and Create React App do this by default.
+
+TypeScript: the stylesheet import has no types of its own. If `tsc` reports "Cannot find module or type declarations for side-effect import of 'eyecomfy-ui/ui.css'", add a declaration once, unless your framework already provides one (Next.js and Vite do):
+
+```ts
+// css.d.ts
+declare module '*.css';
+```
+
+### Next.js (App Router)
+
+- Import `eyecomfy-ui/ui.css` in `app/layout.jsx` (or `.tsx`), not in a page.
+- Components that hold state or use hooks are client components. The package already marks them with `'use client'`, so you can import them from a server component. Put a `'use client'` directive in your own file only when your file uses state, effects or event handlers.
+- Server-safe components: `Button`, `Badge`, `Alert`, `Card`.
+- Client components: `TextField`, `Textarea`, `Checkbox`, `Dialog`, `Tabs`, `Accordion`.
+
+### Vite / React SPA
+
+Import the stylesheet in `main.jsx` (or `main.tsx`) and render your tree as usual.
+
+## Component reference
+
+| Component | Client | Props (beyond native attributes) | Detail |
+| --- | --- | --- | --- |
+| `Button` | no | `variant` `'primary' \| 'secondary' \| 'ghost' \| 'danger'` (default `'primary'`); `size` `'sm' \| 'md'` (default `'md'`); `loading` boolean; `type` defaults to `'button'` | docs/Button.md |
+| `Badge` | no | `tone` `'neutral' \| 'info' \| 'success' \| 'warning' \| 'error'` (default `'neutral'`) | docs/Badge.md |
+| `Alert` | no | `tone` `'info' \| 'success' \| 'warning' \| 'error'` (default `'info'`); `title` ReactNode; children | docs/Alert.md |
+| `Card` | no | `as` `'div' \| 'article' \| 'section'` (default `'div'`); `title` ReactNode; `headingLevel` 2–6 (default 3); `footer` ReactNode; children | docs/Card.md |
+| `TextField` | yes | `label` string (required); `hint` string; `error` string; plus native `<input>` props | docs/TextField.md |
+| `Textarea` | yes | `label` string (required); `hint`; `error`; `rows` (default 4); plus native `<textarea>` props | docs/Textarea.md |
+| `Checkbox` | yes | `label` string (required); `hint`; `error`; plus native `<input>` props except `type` | docs/Checkbox.md |
+| `Dialog` | yes | `open` boolean (required); `onClose` function (required); `title` string (required); `footer` ReactNode; children | docs/Dialog.md |
+| `Tabs` | yes | `items` `{ id, label, content, disabled? }[]` (required); `label` string for the tab list (required); `defaultValue` id; `value` id and `onValueChange(id)` for controlled use | docs/Tabs.md |
+| `Accordion` | yes | `items` `{ id, title, content, defaultOpen? }[]` (required); `multiple` boolean (default `false`); `headingLevel` 2–6 (default 3) | docs/Accordion.md |
+
+Exported types: `ButtonProps`, `ButtonVariant`, `ButtonSize`, `BadgeProps`, `BadgeTone`, `AlertProps`, `AlertTone`, `CardProps`, `TextFieldProps`, `TextareaProps`, `CheckboxProps`, `DialogProps`, `TabsProps`, `TabItem`, `AccordionProps`, `AccordionItem`, `HeadingLevel`.
+
+## Behaviour rules
+
+- **Native props pass through.** Any attribute not listed above (`name`, `aria-*`, `onClick`, `disabled`, `className`, `id`) goes to the underlying element. `className` is appended after the component's own `ui-*` classes.
+- **Form fields** (`TextField`, `Textarea`, `Checkbox`): `label` is required. `hint` renders under the field and is linked with `aria-describedby`. `error` sets `aria-invalid="true"` and renders a `role="alert"` message. Pass `id` when you need a stable id; otherwise one is generated.
+- **Alert** uses `role="alert"` for `tone="error"` and `role="status"` for the other tones.
+- **Button** `loading` disables the button, sets `aria-busy`, and shows a spinner that is `aria-hidden`. Keep the text label changing too (for example "Saving").
+- **Dialog** is controlled. Set `open` to true to show it. `onClose` runs when the user presses the close button or Escape, so set your state to false inside it. The dialog title is always an `<h2>`.
+- **Tabs** is uncontrolled by default (`defaultValue`, else the first enabled tab). Use `value` with `onValueChange` to control it. Arrow keys, Home and End move between tabs.
+- **Accordion** keeps its own open state. `defaultOpen` on an item sets it open on first render. Without `multiple`, opening one panel closes the others.
+- **Heading levels** (`Card`, `Accordion`) are props. Choose the level that fits the page outline; do not default to a level just because it looks right.
+- Do not add `ui-*` classes by hand unless a doc lists one. The stylesheet is written against the component classes.
+
+## Layout is your job
+
+The package has no grid, stack or container components. Write layout with your own CSS. Typical patterns:
+
+```jsx
+<div style={{ display: 'grid', gap: '1rem', gridTemplateColumns: 'repeat(auto-fit, minmax(16rem, 1fr))' }}>
+  <Card title="Starter">...</Card>
+  <Card title="Team">...</Card>
+</div>
+```
+
+Keep the page responsive. Form fields and buttons size to their container. Set `max-width` on forms yourself.
+
+## Design tokens
+
+Set these on `:root` (or on a container) to restyle everything. Defaults are shown.
+
+| Token | Default (light) | Used for |
+| --- | --- | --- |
+| `--ui-font` | `system-ui, -apple-system, "Segoe UI", Roboto, sans-serif` | All text |
+| `--ui-text` | `#1d2530` | Body text |
+| `--ui-muted` | `#5a6573` | Hints, secondary text |
+| `--ui-surface` | `#ffffff` | Card, dialog, input backgrounds |
+| `--ui-surface-2` | `#f3f6f9` | Footers, tab list, subtle fills |
+| `--ui-border` | `#c4cdd7` | Borders |
+| `--ui-accent` | `#1f4e8c` | Primary button, selected tab, links |
+| `--ui-accent-text` | `#ffffff` | Text on accent |
+| `--ui-focus` | `#2563eb` | Focus ring |
+| `--ui-success` / `--ui-success-bg` | `#1d6b3a` / `#e5f4ea` | Success tone |
+| `--ui-warning` / `--ui-warning-bg` | `#7a4b00` / `#fff3d1` | Warning tone |
+| `--ui-error` / `--ui-error-bg` | `#9b1c1c` / `#fbe9e9` | Error tone, danger button |
+| `--ui-info` / `--ui-info-bg` | `#1f4e8c` / `#e6eef8` | Info tone |
+| `--ui-radius` | `0` | Corner radius everywhere |
+| `--ui-shadow` | `0 1px 2px rgb(0 0 0 / 0.08)` | Elevation |
+
+Example theme override:
+
+```css
+:root {
+  --ui-accent: #0f766e;
+  --ui-accent-text: #ffffff;
+  --ui-radius: 0.5rem;
+}
+```
+
+Dark mode: colours switch automatically under `prefers-color-scheme: dark`. To force a mode, set `data-theme="dark"` or `data-theme="light"` on `<html>`. Setting `data-theme="light"` opts out of the automatic dark colours.
+
+## Recipes
+
+Each recipe uses only documented props.
+
+### Sign-up form
+
+```jsx
+'use client';
+import { useState } from 'react';
+import { Alert, Button, Checkbox, TextField } from 'eyecomfy-ui';
+
+export function SignUpForm() {
+  const [email, setEmail] = useState('');
+  const [emailError, setEmailError] = useState('');
+  const [agreed, setAgreed] = useState(false);
+
+  function submit(event) {
+    event.preventDefault();
+    setEmailError(email.includes('@') ? '' : 'Enter an email address.');
+  }
+
+  return (
+    <form noValidate onSubmit={submit} style={{ display: 'grid', gap: '1rem', maxWidth: '24rem' }}>
+      <TextField label="Email" type="email" required value={email}
+        onChange={(e) => setEmail(e.target.value)} error={emailError} />
+      <Checkbox label="I accept the terms" checked={agreed}
+        onChange={(e) => setAgreed(e.target.checked)} />
+      <Button type="submit">Sign up</Button>
+    </form>
+  );
+}
+```
+
+### Settings panel with tabs
+
+```jsx
+'use client';
+import { useState } from 'react';
+import { Checkbox, Tabs, TextField } from 'eyecomfy-ui';
+
+export function SettingsPanel() {
+  const [tab, setTab] = useState('profile');
+  return (
+    <Tabs
+      label="Settings sections"
+      value={tab}
+      onValueChange={setTab}
+      items={[
+        { id: 'profile', label: 'Profile', content: <TextField label="Display name" /> },
+        { id: 'alerts', label: 'Alerts', content: <Checkbox label="Email me about billing" /> },
+        { id: 'billing', label: 'Billing', content: <p>Coming soon.</p>, disabled: true },
+      ]}
+    />
+  );
+}
+```
+
+### Confirm delete
+
+```jsx
+'use client';
+import { useState } from 'react';
+import { Button, Dialog } from 'eyecomfy-ui';
+
+export function DeleteProject({ onDelete }) {
+  const [open, setOpen] = useState(false);
+  return (
+    <>
+      <Button variant="danger" onClick={() => setOpen(true)}>Delete project</Button>
+      <Dialog
+        open={open}
+        onClose={() => setOpen(false)}
+        title="Delete this project?"
+        footer={
+          <>
+            <Button variant="ghost" onClick={() => setOpen(false)}>Cancel</Button>
+            <Button variant="danger" onClick={() => { onDelete(); setOpen(false); }}>Delete</Button>
+          </>
+        }
+      >
+        <p>This cannot be undone.</p>
+      </Dialog>
+    </>
+  );
+}
+```
+
+### Plan comparison cards
+
+```jsx
+import { Badge, Button, Card } from 'eyecomfy-ui';
+
+export function Plans() {
+  return (
+    <div style={{ display: 'grid', gap: '1rem', gridTemplateColumns: 'repeat(auto-fit, minmax(16rem, 1fr))' }}>
+      <Card as="article" title="Starter" headingLevel={2}
+        footer={<Button variant="secondary">Choose</Button>}>
+        <p>Free for small projects.</p>
+      </Card>
+      <Card as="article" title={<>Team <Badge tone="success">Popular</Badge></>} headingLevel={2}
+        footer={<Button>Choose</Button>}>
+        <p>Shared workspace for teams.</p>
+      </Card>
+    </div>
+  );
+}
+```
+
+### Status list
+
+```jsx
+import { Alert, Badge } from 'eyecomfy-ui';
+
+export function Status({ deploys }) {
+  return (
+    <>
+      <Alert tone="warning" title="Maintenance tonight">Writes pause from 23:00 to 23:30.</Alert>
+      <ul>
+        {deploys.map((d) => (
+          <li key={d.id}>{d.name} <Badge tone={d.ok ? 'success' : 'error'}>{d.ok ? 'Live' : 'Failed'}</Badge></li>
+        ))}
+      </ul>
+    </>
+  );
+}
+```
+
+### FAQ
+
+```jsx
+'use client';
+import { Accordion } from 'eyecomfy-ui';
+
+export function Faq() {
+  return (
+    <Accordion
+      headingLevel={2}
+      items={[
+        { id: 'refunds', title: 'Can I get a refund?', content: <p>Yes, within 14 days.</p>, defaultOpen: true },
+        { id: 'export', title: 'Can I export my data?', content: <p>Yes, from Settings.</p> },
+      ]}
+    />
+  );
+}
+```
+
+## Do and don't
+
+- Do import the stylesheet once and only once.
+- Do pass a `label` to every `TextField`, `Textarea` and `Checkbox`.
+- Do keep the `onClose` of `Dialog` in sync with your `open` state.
+- Do use a `Tabs` `label` that names the group.
+- Don't invent props. If a prop is not in the table above or in the component's doc, it is not supported; a native attribute is the only other option.
+- Don't use `Alert` tone `error` for non-errors: it interrupts screen readers.
+- Don't use `Button` as a link. Use an anchor and style it yourself, or a plain `<a>`.
+- Don't rely on `Card` or `Accordion` heading levels to match a visual size. Set `headingLevel` for the outline and style the heading with CSS if needed.

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 eyecomfy-ui contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,44 @@
-# Temporary Holding Version
+# eyecomfy-ui
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Ten basic React UI components, styled with plain CSS custom properties. No runtime dependencies beyond React.
+
+- Button, Badge, Alert, Card (server-safe)
+- TextField, Textarea, Checkbox, Dialog, Tabs, Accordion (client components)
+
+## Install
+
+```bash
+npm install eyecomfy-ui
+```
+
+Import the stylesheet once, then the components you need:
+
+```jsx
+import 'eyecomfy-ui/ui.css';
+import { Button, TextField } from 'eyecomfy-ui';
+
+export function Greeting() {
+  return (
+    <>
+      <TextField label="Name" />
+      <Button>Say hello</Button>
+    </>
+  );
+}
+```
+
+Requires React 18.2 or later. Your bundler must compile JSX.
+
+## Theming
+
+Override the `--ui-*` custom properties on `:root`. Dark colours apply under `prefers-color-scheme: dark`, or when `data-theme="dark"` is set on `<html>`.
+
+## Documentation
+
+- Component pages: `node_modules/eyecomfy-ui/docs/`
+- AI agents: read `node_modules/eyecomfy-ui/AGENTS.md`. It has the full prop reference, token list, composition rules and recipes.
+- Index for LLM tools: `node_modules/eyecomfy-ui/llms.txt`
+
+## License
+
+MIT

package/dist/esm/Accordion.js

@@ -0,0 +1,52 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId, useState } from "react";
+import { cx } from "./utils.js";
+function Accordion({ items, multiple = false, headingLevel = 3, className }) {
+  const baseId = useId();
+  const Heading = `h${headingLevel}`;
+  const [open, setOpen] = useState(
+    () => new Set(items.filter((item) => item.defaultOpen).map((item) => item.id))
+  );
+  function toggle(id) {
+    setOpen((previous) => {
+      const next = new Set(multiple ? previous : []);
+      if (previous.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  }
+  return /* @__PURE__ */ jsx("div", { className: cx("ui-accordion", className), children: items.map((item) => {
+    const isOpen = open.has(item.id);
+    const triggerId = `${baseId}-trigger-${item.id}`;
+    const panelId = `${baseId}-panel-${item.id}`;
+    return /* @__PURE__ */ jsxs("div", { className: cx("ui-accordion__item", isOpen && "is-open"), children: [
+      /* @__PURE__ */ jsx(Heading, { className: "ui-accordion__heading", children: /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          id: triggerId,
+          className: "ui-accordion__trigger",
+          "aria-expanded": isOpen,
+          "aria-controls": panelId,
+          onClick: () => toggle(item.id),
+          children: item.title
+        }
+      ) }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          id: panelId,
+          role: "region",
+          "aria-labelledby": triggerId,
+          hidden: !isOpen,
+          className: "ui-accordion__panel",
+          children: item.content
+        }
+      )
+    ] }, item.id);
+  }) });
+}
+export {
+  Accordion
+};

package/dist/esm/Alert.js

@@ -0,0 +1,19 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "./utils.js";
+function Alert({ tone = "info", title, className, children, ...rest }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: tone === "error" ? "alert" : "status",
+      ...rest,
+      className: cx("ui-alert", `ui-alert--${tone}`, className),
+      children: [
+        title && /* @__PURE__ */ jsx("p", { className: "ui-alert__title", children: title }),
+        children
+      ]
+    }
+  );
+}
+export {
+  Alert
+};

package/dist/esm/Badge.js

@@ -0,0 +1,8 @@
+import { jsx } from "react/jsx-runtime";
+import { cx } from "./utils.js";
+function Badge({ tone = "neutral", className, ...rest }) {
+  return /* @__PURE__ */ jsx("span", { ...rest, className: cx("ui-badge", `ui-badge--${tone}`, className) });
+}
+export {
+  Badge
+};

package/dist/esm/Button.js

@@ -0,0 +1,30 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "./utils.js";
+function Button({
+  variant = "primary",
+  size = "md",
+  loading = false,
+  disabled,
+  type = "button",
+  className,
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ...rest,
+      type,
+      className: cx("ui-button", `ui-button--${variant}`, `ui-button--${size}`, className),
+      disabled: disabled || loading,
+      "aria-busy": loading || void 0,
+      children: [
+        loading && /* @__PURE__ */ jsx("span", { className: "ui-spinner", "aria-hidden": "true" }),
+        children
+      ]
+    }
+  );
+}
+export {
+  Button
+};

package/dist/esm/Card.js

@@ -0,0 +1,21 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "./utils.js";
+function Card({
+  as: Wrapper = "div",
+  title,
+  headingLevel = 3,
+  footer,
+  className,
+  children,
+  ...rest
+}) {
+  const Heading = `h${headingLevel}`;
+  return /* @__PURE__ */ jsxs(Wrapper, { ...rest, className: cx("ui-card", className), children: [
+    title && /* @__PURE__ */ jsx(Heading, { className: "ui-card__title", children: title }),
+    /* @__PURE__ */ jsx("div", { className: "ui-card__body", children }),
+    footer && /* @__PURE__ */ jsx("div", { className: "ui-card__footer", children: footer })
+  ] });
+}
+export {
+  Card
+};

package/dist/esm/Checkbox.js

@@ -0,0 +1,27 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx, useFieldIds } from "./utils.js";
+function Checkbox({ label, hint, error, id, className, ...rest }) {
+  const { inputId, hintId, errorId, describedBy } = useFieldIds(id, Boolean(hint), Boolean(error));
+  return /* @__PURE__ */ jsxs("div", { className: cx("ui-checkbox", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "ui-checkbox__row", children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ...rest,
+          id: inputId,
+          type: "checkbox",
+          className: "ui-checkbox__input",
+          "aria-invalid": error ? true : void 0,
+          "aria-describedby": describedBy
+        }
+      ),
+      /* @__PURE__ */ jsx("label", { className: "ui-checkbox__label", htmlFor: inputId, children: label })
+    ] }),
+    hint && /* @__PURE__ */ jsx("p", { id: hintId, className: "ui-hint", children: hint }),
+    error && /* @__PURE__ */ jsx("p", { id: errorId, className: "ui-error", role: "alert", children: error })
+  ] });
+}
+export {
+  Checkbox
+};

package/dist/esm/Dialog.js

@@ -0,0 +1,33 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef } from "react";
+function Dialog({ open, onClose, title, children, footer }) {
+  const ref = useRef(null);
+  const titleId = useId();
+  useEffect(() => {
+    const dialog = ref.current;
+    if (!dialog) return;
+    if (open && !dialog.open) dialog.showModal();
+    if (!open && dialog.open) dialog.close();
+  }, [open]);
+  return /* @__PURE__ */ jsxs("dialog", { ref, className: "ui-dialog", "aria-labelledby": titleId, onClose, children: [
+    /* @__PURE__ */ jsxs("div", { className: "ui-dialog__header", children: [
+      /* @__PURE__ */ jsx("h2", { id: titleId, className: "ui-dialog__title", children: title }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "ui-dialog__close",
+          "aria-label": "Close",
+          onClick: () => ref.current?.close(),
+          children: /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\xD7" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "ui-dialog__body", children }),
+    footer && /* @__PURE__ */ jsx("div", { className: "ui-dialog__footer", children: footer })
+  ] });
+}
+export {
+  Dialog
+};

package/dist/esm/Tabs.js

@@ -0,0 +1,83 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId, useRef, useState } from "react";
+import { cx } from "./utils.js";
+function Tabs({ items, label, defaultValue, value, onValueChange, className }) {
+  const baseId = useId();
+  const firstEnabled = items.find((item) => !item.disabled)?.id;
+  const [uncontrolled, setUncontrolled] = useState(defaultValue ?? firstEnabled);
+  const selected = value ?? uncontrolled;
+  const tabRefs = useRef(/* @__PURE__ */ new Map());
+  const enabledIds = items.filter((item) => !item.disabled).map((item) => item.id);
+  function select(id) {
+    if (value === void 0) setUncontrolled(id);
+    onValueChange?.(id);
+  }
+  function handleKeyDown(event, id) {
+    const position = enabledIds.indexOf(id);
+    const last = enabledIds.length - 1;
+    let next;
+    switch (event.key) {
+      case "ArrowRight":
+        next = enabledIds[position === last ? 0 : position + 1];
+        break;
+      case "ArrowLeft":
+        next = enabledIds[position <= 0 ? last : position - 1];
+        break;
+      case "Home":
+        next = enabledIds[0];
+        break;
+      case "End":
+        next = enabledIds[last];
+        break;
+      default:
+        return;
+    }
+    event.preventDefault();
+    if (next === void 0) return;
+    select(next);
+    tabRefs.current.get(next)?.focus();
+  }
+  return /* @__PURE__ */ jsxs("div", { className: cx("ui-tabs", className), children: [
+    /* @__PURE__ */ jsx("div", { role: "tablist", "aria-label": label, className: "ui-tabs__list", children: items.map((item) => {
+      const isSelected = item.id === selected;
+      return /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          role: "tab",
+          id: `${baseId}-tab-${item.id}`,
+          ref: (element) => {
+            if (element) tabRefs.current.set(item.id, element);
+            else tabRefs.current.delete(item.id);
+          },
+          "aria-selected": isSelected,
+          "aria-controls": `${baseId}-panel-${item.id}`,
+          tabIndex: isSelected ? 0 : -1,
+          disabled: item.disabled,
+          className: cx("ui-tabs__tab", isSelected && "is-selected"),
+          onClick: () => select(item.id),
+          onKeyDown: (event) => handleKeyDown(event, item.id),
+          children: item.label
+        },
+        item.id
+      );
+    }) }),
+    items.map((item) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "tabpanel",
+        id: `${baseId}-panel-${item.id}`,
+        "aria-labelledby": `${baseId}-tab-${item.id}`,
+        tabIndex: 0,
+        hidden: item.id !== selected,
+        className: "ui-tabs__panel",
+        children: item.content
+      },
+      item.id
+    ))
+  ] });
+}
+export {
+  Tabs
+};

package/dist/esm/TextField.js

@@ -0,0 +1,28 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx, useFieldIds } from "./utils.js";
+function TextField({ label, hint, error, id, required, className, ...rest }) {
+  const { inputId, hintId, errorId, describedBy } = useFieldIds(id, Boolean(hint), Boolean(error));
+  return /* @__PURE__ */ jsxs("div", { className: cx("ui-field", className), children: [
+    /* @__PURE__ */ jsxs("label", { className: "ui-label", htmlFor: inputId, children: [
+      label,
+      required && /* @__PURE__ */ jsx("span", { className: "ui-required", "aria-hidden": "true", children: " *" })
+    ] }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ...rest,
+        id: inputId,
+        className: "ui-input",
+        required,
+        "aria-invalid": error ? true : void 0,
+        "aria-describedby": describedBy
+      }
+    ),
+    hint && /* @__PURE__ */ jsx("p", { id: hintId, className: "ui-hint", children: hint }),
+    error && /* @__PURE__ */ jsx("p", { id: errorId, className: "ui-error", role: "alert", children: error })
+  ] });
+}
+export {
+  TextField
+};