@jixic/react-ui 0.1.0 → 0.1.1

package/README.md

@@ -1,15 +1,46 @@
 # @jixic/react-ui
 
-A React and TypeScript UI component library for web and Next.js applications. The package is framework-agnostic and does not depend on Next.js APIs.
+Accessible React UI components, TypeScript primitives, design tokens, and CSS themes for React and Next.js web applications.
+
+## Links
+
+- npm: [@jixic/react-ui](https://www.npmjs.com/package/@jixic/react-ui)
+- GitHub: [virendrapsamrat/-jixic-react-ui](https://github.com/virendrapsamrat/-jixic-react-ui)
+
+## Overview
+
+Use `@jixic/react-ui` when you want a small, typed, accessible component library with a consistent visual system and no required app framework. The package is designed for discoverability on npm with clear keywords, public repository metadata, install examples, and package docs.
+
+## Platform Support
+
+| Platform     | Status    | Notes                                                                        |
+| ------------ | --------- | ---------------------------------------------------------------------------- |
+| React web    | Supported | Uses DOM elements and the compiled stylesheet.                               |
+| Next.js      | Supported | Import `@jixic/react-ui/styles.css` once in the root layout or app shell.    |
+| React Native | Roadmap   | Planned as a separate native package that can share tokens and API patterns. |
+
+This package is not currently a React Native package because it ships DOM components and CSS. React Native UI support should live in a sibling package such as `@jixic/react-native-ui`.
 
 ## Install
 
+Install the package with React and React DOM. They are peer dependencies and are not bundled.
+
+```bash
+npm install @jixic/react-ui react react-dom
+```
+
+```bash
+yarn add @jixic/react-ui react react-dom
+```
+
 ```bash
 pnpm add @jixic/react-ui react react-dom
 ```
 
 ## Usage
 
+Import the compiled stylesheet once in your application root, then import components from `@jixic/react-ui`.
+
 ```tsx
 import { Button, Card, CardContent, Input } from "@jixic/react-ui";
 import "@jixic/react-ui/styles.css";
@@ -27,3 +58,13 @@ export function Example() {
 ```
 
 Set `data-ui-theme="dark"` on any parent element to enable dark theme tokens.
+
+## Package Details
+
+- Supports React `>=18.2.0` and React `>=19.0.0`.
+- Includes components for actions, forms, feedback, overlays, navigation, loading states, and display surfaces.
+- Includes TypeScript declarations.
+- Provides ESM and CommonJS builds.
+- Exposes the compiled stylesheet at `@jixic/react-ui/styles.css`.
+- Ships only package files from `dist`, `README.md`, `CHANGELOG.md`, and `LICENSE`.
+- Search-friendly metadata covers React UI, React components, TypeScript, accessibility, design systems, themes, CSS variables, and Next.js.

package/dist/index.cjs

@@ -22,17 +22,26 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   Alert: () => Alert,
+  Avatar: () => Avatar,
   Badge: () => Badge,
   Button: () => Button,
   Card: () => Card,
   CardContent: () => CardContent,
   CardFooter: () => CardFooter,
   CardHeader: () => CardHeader,
+  Checkbox: () => Checkbox,
   EmptyState: () => EmptyState,
   Input: () => Input,
   Modal: () => Modal,
+  Radio: () => Radio,
+  RadioGroup: () => RadioGroup,
+  Select: () => Select,
   Skeleton: () => Skeleton,
   Spinner: () => Spinner,
+  Switch: () => Switch,
+  Tabs: () => Tabs,
+  Textarea: () => Textarea,
+  Tooltip: () => Tooltip,
   colors: () => colors,
   spacing: () => spacing,
   typography: () => typography
@@ -66,20 +75,27 @@ var Alert = (0, import_react.forwardRef)(function Alert2({ children, className,
   );
 });
 
+// src/components/Avatar/Avatar.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function Avatar({ alt, className, fallback, size = "md", src, ...props }) {
+  const initials = fallback ?? alt.split(" ").filter(Boolean).slice(0, 2).map((part) => part[0]?.toUpperCase()).join("");
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: cx("ui-avatar", `ui-avatar-${size}`, className), ...props, children: src ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("img", { alt, className: "ui-avatar-image", src }) : initials });
+}
+
 // src/components/Badge/Badge.tsx
 var import_react2 = require("react");
-var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_jsx_runtime3 = require("react/jsx-runtime");
 var Badge = (0, import_react2.forwardRef)(function Badge2({ className, variant = "neutral", ...props }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: cx("ui-badge", `ui-badge-${variant}`, className), ref, ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: cx("ui-badge", `ui-badge-${variant}`, className), ref, ...props });
 });
 
 // src/components/Button/Button.tsx
 var import_react3 = require("react");
 
 // src/components/Spinner/Spinner.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 function Spinner({ className, label = "Loading", size = "md", ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     "span",
     {
       "aria-label": label,
@@ -91,7 +107,7 @@ function Spinner({ className, label = "Loading", size = "md", ...props }) {
 }
 
 // src/components/Button/Button.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 var Button = (0, import_react3.forwardRef)(function Button2({
   children,
   className,
@@ -104,7 +120,7 @@ var Button = (0, import_react3.forwardRef)(function Button2({
   variant = "primary",
   ...props
 }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
     "button",
     {
       className: cx(
@@ -119,8 +135,8 @@ var Button = (0, import_react3.forwardRef)(function Button2({
       type,
       ...props,
       children: [
-        isLoading ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Spinner, { label: "Loading", size: "sm" }) : leftIcon,
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children }),
+        isLoading ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Spinner, { label: "Loading", size: "sm" }) : leftIcon,
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children }),
         !isLoading ? rightIcon : null
       ]
     }
@@ -129,43 +145,74 @@ var Button = (0, import_react3.forwardRef)(function Button2({
 
 // src/components/Card/Card.tsx
 var import_react4 = require("react");
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 var Card = (0, import_react4.forwardRef)(function Card2({ className, ...props }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: cx("ui-card", className), ref, ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: cx("ui-card", className), ref, ...props });
 });
 var CardHeader = (0, import_react4.forwardRef)(function CardHeader2({ className, ...props }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: cx("ui-card-header", className), ref, ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: cx("ui-card-header", className), ref, ...props });
 });
 var CardContent = (0, import_react4.forwardRef)(function CardContent2({ className, ...props }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: cx("ui-card-content", className), ref, ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: cx("ui-card-content", className), ref, ...props });
 });
 var CardFooter = (0, import_react4.forwardRef)(function CardFooter2({ className, ...props }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: cx("ui-card-footer", className), ref, ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: cx("ui-card-footer", className), ref, ...props });
 });
 
-// src/components/EmptyState/EmptyState.tsx
+// src/components/Checkbox/Checkbox.tsx
 var import_react5 = require("react");
-var import_jsx_runtime6 = require("react/jsx-runtime");
-var EmptyState = (0, import_react5.forwardRef)(function EmptyState2({ action, className, description, icon, title, ...props }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("section", { className: cx("ui-empty-state", className), ref, ...props, children: [
-    icon ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { "aria-hidden": "true", children: icon }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("h2", { className: "ui-empty-state-title", children: title }),
-    description ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "ui-empty-state-description", children: description }) : null,
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var Checkbox = (0, import_react5.forwardRef)(function Checkbox2({ className, description, error, id, label, ...props }, ref) {
+  const generatedId = (0, import_react5.useId)();
+  const checkboxId = id ?? generatedId;
+  const descriptionId = description ? `${checkboxId}-description` : void 0;
+  const errorId = error ? `${checkboxId}-error` : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "ui-choice-field", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("label", { className: "ui-choice", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        "input",
+        {
+          "aria-describedby": cx(descriptionId, errorId) || void 0,
+          "aria-invalid": error ? true : void 0,
+          className: cx("ui-checkbox", className),
+          id: checkboxId,
+          ref,
+          type: "checkbox",
+          ...props
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "ui-choice-copy", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "ui-choice-label", children: label }),
+        description ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "ui-choice-description", id: descriptionId, children: description }) : null
+      ] })
+    ] }),
+    error ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "ui-field-error", id: errorId, role: "alert", children: error }) : null
+  ] });
+});
+
+// src/components/EmptyState/EmptyState.tsx
+var import_react6 = require("react");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var EmptyState = (0, import_react6.forwardRef)(function EmptyState2({ action, className, description, icon, title, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("section", { className: cx("ui-empty-state", className), ref, ...props, children: [
+    icon ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { "aria-hidden": "true", children: icon }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h2", { className: "ui-empty-state-title", children: title }),
+    description ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "ui-empty-state-description", children: description }) : null,
     action
   ] });
 });
 
 // src/components/Input/Input.tsx
-var import_react6 = require("react");
-var import_jsx_runtime7 = require("react/jsx-runtime");
-var Input = (0, import_react6.forwardRef)(function Input2({ className, error, helperText, id, label, ...props }, ref) {
-  const generatedId = (0, import_react6.useId)();
+var import_react7 = require("react");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var Input = (0, import_react7.forwardRef)(function Input2({ className, error, helperText, id, label, ...props }, ref) {
+  const generatedId = (0, import_react7.useId)();
   const inputId = id ?? generatedId;
   const descriptionId = helperText ? `${inputId}-help` : void 0;
   const errorId = error ? `${inputId}-error` : void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "ui-input-field", children: [
-    label ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("label", { className: "ui-label", htmlFor: inputId, children: label }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "ui-input-field", children: [
+    label ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "ui-label", htmlFor: inputId, children: label }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       "input",
       {
         "aria-describedby": cx(descriptionId, errorId) || void 0,
@@ -176,14 +223,14 @@ var Input = (0, import_react6.forwardRef)(function Input2({ className, error, he
         ...props
       }
     ),
-    helperText ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "ui-field-help", id: descriptionId, children: helperText }) : null,
-    error ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "ui-field-error", id: errorId, role: "alert", children: error }) : null
+    helperText ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "ui-field-help", id: descriptionId, children: helperText }) : null,
+    error ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "ui-field-error", id: errorId, role: "alert", children: error }) : null
   ] });
 });
 
 // src/components/Modal/Modal.tsx
-var import_react7 = require("react");
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_react8 = require("react");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 function getFocusable(container) {
   return Array.from(
     container.querySelectorAll(
@@ -191,10 +238,10 @@ function getFocusable(container) {
     )
   ).filter((element) => !element.hasAttribute("disabled") && element.tabIndex !== -1);
 }
-var Modal = (0, import_react7.forwardRef)(function Modal2({ children, className, closeLabel = "Close dialog", isOpen, onOpenChange, title, ...props }, ref) {
-  const titleId = (0, import_react7.useId)();
-  const dialogRef = (0, import_react7.useRef)(null);
-  (0, import_react7.useEffect)(() => {
+var Modal = (0, import_react8.forwardRef)(function Modal2({ children, className, closeLabel = "Close dialog", isOpen, onOpenChange, title, ...props }, ref) {
+  const titleId = (0, import_react8.useId)();
+  const dialogRef = (0, import_react8.useRef)(null);
+  (0, import_react8.useEffect)(() => {
     if (!isOpen) {
       return;
     }
@@ -238,7 +285,7 @@ var Modal = (0, import_react7.forwardRef)(function Modal2({ children, className,
       first.focus();
     }
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "ui-modal-overlay", onClick: handleOverlayClick, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "ui-modal-overlay", onClick: handleOverlayClick, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
     "div",
     {
       "aria-labelledby": titleId,
@@ -256,9 +303,9 @@ var Modal = (0, import_react7.forwardRef)(function Modal2({ children, className,
       role: "dialog",
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "ui-modal-header", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h2", { className: "ui-modal-title", id: titleId, children: title }),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "ui-modal-header", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("h2", { className: "ui-modal-title", id: titleId, children: title }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
             "button",
             {
               "aria-label": closeLabel,
@@ -269,17 +316,80 @@ var Modal = (0, import_react7.forwardRef)(function Modal2({ children, className,
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "ui-modal-body", children })
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "ui-modal-body", children })
       ]
     }
   ) });
 });
 
+// src/components/Radio/Radio.tsx
+var import_react9 = require("react");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var Radio = (0, import_react9.forwardRef)(function Radio2({ className, description, id, label, ...props }, ref) {
+  const generatedId = (0, import_react9.useId)();
+  const radioId = id ?? generatedId;
+  const descriptionId = description ? `${radioId}-description` : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("label", { className: "ui-choice", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      "input",
+      {
+        "aria-describedby": descriptionId,
+        className: cx("ui-radio", className),
+        id: radioId,
+        ref,
+        type: "radio",
+        ...props
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { className: "ui-choice-copy", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "ui-choice-label", children: label }),
+      description ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "ui-choice-description", id: descriptionId, children: description }) : null
+    ] })
+  ] });
+});
+function RadioGroup({ children, error, label }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("fieldset", { className: "ui-radio-group", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("legend", { className: "ui-label", children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "ui-radio-options", children }),
+    error ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "ui-field-error", role: "alert", children: error }) : null
+  ] });
+}
+
+// src/components/Select/Select.tsx
+var import_react10 = require("react");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var Select = (0, import_react10.forwardRef)(function Select2({ className, error, helperText, id, label, options, placeholder, ...props }, ref) {
+  const generatedId = (0, import_react10.useId)();
+  const selectId = id ?? generatedId;
+  const descriptionId = helperText ? `${selectId}-help` : void 0;
+  const errorId = error ? `${selectId}-error` : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "ui-input-field", children: [
+    label ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("label", { className: "ui-label", htmlFor: selectId, children: label }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+      "select",
+      {
+        "aria-describedby": cx(descriptionId, errorId) || void 0,
+        "aria-invalid": error ? true : void 0,
+        className: cx("ui-input", "ui-select", error && "ui-input-error", className),
+        id: selectId,
+        ref,
+        ...props,
+        children: [
+          placeholder ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("option", { value: "", disabled: true, children: placeholder }) : null,
+          options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("option", { disabled: option.disabled, value: option.value, children: option.label }, option.value))
+        ]
+      }
+    ),
+    helperText ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "ui-field-help", id: descriptionId, children: helperText }) : null,
+    error ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "ui-field-error", id: errorId, role: "alert", children: error }) : null
+  ] });
+});
+
 // src/components/Skeleton/Skeleton.tsx
-var import_react8 = require("react");
-var import_jsx_runtime9 = require("react/jsx-runtime");
-var Skeleton = (0, import_react8.forwardRef)(function Skeleton2({ className, height = "1rem", style, width = "100%", ...props }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+var import_react11 = require("react");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var Skeleton = (0, import_react11.forwardRef)(function Skeleton2({ className, height = "1rem", style, width = "100%", ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
     "div",
     {
       "aria-hidden": "true",
@@ -291,6 +401,125 @@ var Skeleton = (0, import_react8.forwardRef)(function Skeleton2({ className, hei
   );
 });
 
+// src/components/Switch/Switch.tsx
+var import_react12 = require("react");
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var Switch = (0, import_react12.forwardRef)(function Switch2({ className, description, id, label, ...props }, ref) {
+  const generatedId = (0, import_react12.useId)();
+  const switchId = id ?? generatedId;
+  const descriptionId = description ? `${switchId}-description` : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("label", { className: "ui-switch", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("span", { className: "ui-choice-copy", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "ui-choice-label", children: label }),
+      description ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "ui-choice-description", id: descriptionId, children: description }) : null
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      "input",
+      {
+        "aria-describedby": descriptionId,
+        className: cx("ui-switch-input", className),
+        id: switchId,
+        ref,
+        role: "switch",
+        type: "checkbox",
+        ...props
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { "aria-hidden": "true", className: "ui-switch-track", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "ui-switch-thumb" }) })
+  ] });
+});
+
+// src/components/Tabs/Tabs.tsx
+var import_react13 = require("react");
+var import_jsx_runtime15 = require("react/jsx-runtime");
+function Tabs({
+  "aria-label": ariaLabel,
+  className,
+  defaultValue,
+  items,
+  onValueChange,
+  value
+}) {
+  const generatedId = (0, import_react13.useId)();
+  const firstEnabledValue = (0, import_react13.useMemo)(() => items.find((item) => !item.disabled)?.value, [items]);
+  const [internalValue, setInternalValue] = (0, import_react13.useState)(defaultValue ?? firstEnabledValue);
+  const selectedValue = value ?? internalValue;
+  const selectedItem = items.find((item) => item.value === selectedValue) ?? items[0];
+  function selectTab(nextValue) {
+    setInternalValue(nextValue);
+    onValueChange?.(nextValue);
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: cx("ui-tabs", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { "aria-label": ariaLabel, className: "ui-tab-list", role: "tablist", children: items.map((item) => {
+      const isSelected = item.value === selectedItem?.value;
+      const tabId = `${generatedId}-${item.value}-tab`;
+      const panelId = `${generatedId}-${item.value}-panel`;
+      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        "button",
+        {
+          "aria-controls": panelId,
+          "aria-selected": isSelected,
+          className: "ui-tab",
+          disabled: item.disabled,
+          id: tabId,
+          onClick: () => selectTab(item.value),
+          role: "tab",
+          tabIndex: isSelected ? 0 : -1,
+          type: "button",
+          children: item.label
+        },
+        item.value
+      );
+    }) }),
+    selectedItem ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      "div",
+      {
+        "aria-labelledby": `${generatedId}-${selectedItem.value}-tab`,
+        className: "ui-tab-panel",
+        id: `${generatedId}-${selectedItem.value}-panel`,
+        role: "tabpanel",
+        children: selectedItem.content
+      }
+    ) : null
+  ] });
+}
+
+// src/components/Textarea/Textarea.tsx
+var import_react14 = require("react");
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var Textarea = (0, import_react14.forwardRef)(function Textarea2({ className, error, helperText, id, label, rows = 4, ...props }, ref) {
+  const generatedId = (0, import_react14.useId)();
+  const textareaId = id ?? generatedId;
+  const descriptionId = helperText ? `${textareaId}-help` : void 0;
+  const errorId = error ? `${textareaId}-error` : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "ui-input-field", children: [
+    label ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("label", { className: "ui-label", htmlFor: textareaId, children: label }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      "textarea",
+      {
+        "aria-describedby": cx(descriptionId, errorId) || void 0,
+        "aria-invalid": error ? true : void 0,
+        className: cx("ui-input", "ui-textarea", error && "ui-input-error", className),
+        id: textareaId,
+        ref,
+        rows,
+        ...props
+      }
+    ),
+    helperText ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "ui-field-help", id: descriptionId, children: helperText }) : null,
+    error ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "ui-field-error", id: errorId, role: "alert", children: error }) : null
+  ] });
+});
+
+// src/components/Tooltip/Tooltip.tsx
+var import_jsx_runtime17 = require("react/jsx-runtime");
+function Tooltip({ children, content }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", { className: "ui-tooltip", children: [
+    children,
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "ui-tooltip-content", role: "tooltip", children: content })
+  ] });
+}
+
 // src/tokens/colors.ts
 var colors = {
   background: "var(--ui-color-background)",
@@ -333,17 +562,26 @@ var typography = {
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Alert,
+  Avatar,
   Badge,
   Button,
   Card,
   CardContent,
   CardFooter,
   CardHeader,
+  Checkbox,
   EmptyState,
   Input,
   Modal,
+  Radio,
+  RadioGroup,
+  Select,
   Skeleton,
   Spinner,
+  Switch,
+  Tabs,
+  Textarea,
+  Tooltip,
   colors,
   spacing,
   typography