@jixic/react-ui 0.1.0

package/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @jixic/react-ui
+
+## 0.1.0
+
+### Minor Changes
+
+- Initial public preview with Button, Input, Card, Badge, Alert, Modal, Spinner, Skeleton, and EmptyState.

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Jixic
+
+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

@@ -0,0 +1,29 @@
+# @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.
+
+## Install
+
+```bash
+pnpm add @jixic/react-ui react react-dom
+```
+
+## Usage
+
+```tsx
+import { Button, Card, CardContent, Input } from "@jixic/react-ui";
+import "@jixic/react-ui/styles.css";
+
+export function Example() {
+  return (
+    <Card>
+      <CardContent>
+        <Input label="Email" type="email" />
+        <Button>Continue</Button>
+      </CardContent>
+    </Card>
+  );
+}
+```
+
+Set `data-ui-theme="dark"` on any parent element to enable dark theme tokens.

package/dist/index.cjs

@@ -0,0 +1,351 @@
+"use client";
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  Alert: () => Alert,
+  Badge: () => Badge,
+  Button: () => Button,
+  Card: () => Card,
+  CardContent: () => CardContent,
+  CardFooter: () => CardFooter,
+  CardHeader: () => CardHeader,
+  EmptyState: () => EmptyState,
+  Input: () => Input,
+  Modal: () => Modal,
+  Skeleton: () => Skeleton,
+  Spinner: () => Spinner,
+  colors: () => colors,
+  spacing: () => spacing,
+  typography: () => typography
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/components/Alert/Alert.tsx
+var import_react = require("react");
+
+// src/utils/cx.ts
+function cx(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+
+// src/components/Alert/Alert.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var Alert = (0, import_react.forwardRef)(function Alert2({ children, className, title, variant = "info", ...props }, ref) {
+  const role = variant === "danger" || variant === "warning" ? "alert" : "status";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      className: cx("ui-alert", `ui-alert-${variant}`, className),
+      ref,
+      role,
+      ...props,
+      children: [
+        title ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "ui-alert-title", children: title }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children })
+      ]
+    }
+  );
+});
+
+// src/components/Badge/Badge.tsx
+var import_react2 = require("react");
+var import_jsx_runtime2 = 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 });
+});
+
+// src/components/Button/Button.tsx
+var import_react3 = require("react");
+
+// src/components/Spinner/Spinner.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function Spinner({ className, label = "Loading", size = "md", ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "span",
+    {
+      "aria-label": label,
+      className: cx("ui-spinner", size !== "md" && `ui-spinner-${size}`, className),
+      role: "status",
+      ...props
+    }
+  );
+}
+
+// src/components/Button/Button.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var Button = (0, import_react3.forwardRef)(function Button2({
+  children,
+  className,
+  disabled,
+  isLoading = false,
+  leftIcon,
+  rightIcon,
+  size = "md",
+  type = "button",
+  variant = "primary",
+  ...props
+}, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    "button",
+    {
+      className: cx(
+        "ui-button",
+        `ui-button-${variant}`,
+        size !== "md" && `ui-button-${size}`,
+        className
+      ),
+      "data-loading": isLoading ? "true" : void 0,
+      disabled: disabled || isLoading,
+      ref,
+      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 ? rightIcon : null
+      ]
+    }
+  );
+});
+
+// src/components/Card/Card.tsx
+var import_react4 = require("react");
+var import_jsx_runtime5 = 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 });
+});
+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 });
+});
+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 });
+});
+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 });
+});
+
+// src/components/EmptyState/EmptyState.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,
+    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)();
+  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)(
+      "input",
+      {
+        "aria-describedby": cx(descriptionId, errorId) || void 0,
+        "aria-invalid": error ? true : void 0,
+        className: cx("ui-input", error && "ui-input-error", className),
+        id: inputId,
+        ref,
+        ...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
+  ] });
+});
+
+// src/components/Modal/Modal.tsx
+var import_react7 = require("react");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+function getFocusable(container) {
+  return Array.from(
+    container.querySelectorAll(
+      'a[href], button:not([disabled]), input:not([disabled]), textarea:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])'
+    )
+  ).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)(() => {
+    if (!isOpen) {
+      return;
+    }
+    const previousActiveElement = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+    const focusable = dialogRef.current ? getFocusable(dialogRef.current) : [];
+    focusable[0]?.focus();
+    return () => {
+      previousActiveElement?.focus();
+    };
+  }, [isOpen]);
+  if (!isOpen) {
+    return null;
+  }
+  function handleOverlayClick(event) {
+    if (event.target === event.currentTarget) {
+      onOpenChange(false);
+    }
+  }
+  function handleKeyDown(event) {
+    if (event.key === "Escape") {
+      onOpenChange(false);
+      return;
+    }
+    if (event.key !== "Tab" || !dialogRef.current) {
+      return;
+    }
+    const focusable = getFocusable(dialogRef.current);
+    if (focusable.length === 0) {
+      return;
+    }
+    const first = focusable[0];
+    const last = focusable.at(-1);
+    if (!first || !last) {
+      return;
+    }
+    if (event.shiftKey && document.activeElement === first) {
+      event.preventDefault();
+      last.focus();
+    } else if (!event.shiftKey && document.activeElement === last) {
+      event.preventDefault();
+      first.focus();
+    }
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "ui-modal-overlay", onClick: handleOverlayClick, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+    "div",
+    {
+      "aria-labelledby": titleId,
+      "aria-modal": "true",
+      className: cx("ui-modal", className),
+      onKeyDown: handleKeyDown,
+      ref: (node) => {
+        dialogRef.current = node;
+        if (typeof ref === "function") {
+          ref(node);
+        } else if (ref) {
+          ref.current = node;
+        }
+      },
+      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)(
+            "button",
+            {
+              "aria-label": closeLabel,
+              className: "ui-modal-close",
+              onClick: () => onOpenChange(false),
+              type: "button",
+              children: "\xD7"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "ui-modal-body", children })
+      ]
+    }
+  ) });
+});
+
+// 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)(
+    "div",
+    {
+      "aria-hidden": "true",
+      className: cx("ui-skeleton", className),
+      ref,
+      style: { height, width, ...style },
+      ...props
+    }
+  );
+});
+
+// src/tokens/colors.ts
+var colors = {
+  background: "var(--ui-color-background)",
+  foreground: "var(--ui-color-foreground)",
+  surface: "var(--ui-color-surface)",
+  surfaceRaised: "var(--ui-color-surface-raised)",
+  border: "var(--ui-color-border)",
+  primary: "var(--ui-color-primary)",
+  primaryForeground: "var(--ui-color-primary-foreground)",
+  danger: "var(--ui-color-danger)",
+  dangerForeground: "var(--ui-color-danger-foreground)",
+  success: "var(--ui-color-success)",
+  successForeground: "var(--ui-color-success-foreground)",
+  warning: "var(--ui-color-warning)",
+  warningForeground: "var(--ui-color-warning-foreground)",
+  muted: "var(--ui-color-muted)",
+  mutedForeground: "var(--ui-color-muted-foreground)"
+};
+
+// src/tokens/spacing.ts
+var spacing = {
+  0: "0",
+  1: "var(--ui-space-1)",
+  2: "var(--ui-space-2)",
+  3: "var(--ui-space-3)",
+  4: "var(--ui-space-4)",
+  5: "var(--ui-space-5)",
+  6: "var(--ui-space-6)",
+  8: "var(--ui-space-8)"
+};
+
+// src/tokens/typography.ts
+var typography = {
+  fontFamily: "var(--ui-font-family)",
+  fontSizeSm: "var(--ui-font-size-sm)",
+  fontSizeMd: "var(--ui-font-size-md)",
+  fontSizeLg: "var(--ui-font-size-lg)",
+  lineHeight: "var(--ui-line-height)"
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Alert,
+  Badge,
+  Button,
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+  EmptyState,
+  Input,
+  Modal,
+  Skeleton,
+  Spinner,
+  colors,
+  spacing,
+  typography
+});
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/components/Alert/Alert.tsx","../src/utils/cx.ts","../src/components/Badge/Badge.tsx","../src/components/Button/Button.tsx","../src/components/Spinner/Spinner.tsx","../src/components/Card/Card.tsx","../src/components/EmptyState/EmptyState.tsx","../src/components/Input/Input.tsx","../src/components/Modal/Modal.tsx","../src/components/Skeleton/Skeleton.tsx","../src/tokens/colors.ts","../src/tokens/spacing.ts","../src/tokens/typography.ts"],"sourcesContent":["export { Alert } from \"./components/Alert/Alert\";\nexport type { AlertProps } from \"./components/Alert/Alert\";\nexport { Badge } from \"./components/Badge/Badge\";\nexport type { BadgeProps } from \"./components/Badge/Badge\";\nexport { Button } from \"./components/Button/Button\";\nexport type { ButtonProps } from \"./components/Button/Button\";\nexport { Card, CardContent, CardFooter, CardHeader } from \"./components/Card/Card\";\nexport type {\n  CardContentProps,\n  CardFooterProps,\n  CardHeaderProps,\n  CardProps,\n} from \"./components/Card/Card\";\nexport { EmptyState } from \"./components/EmptyState/EmptyState\";\nexport type { EmptyStateProps } from \"./components/EmptyState/EmptyState\";\nexport { Input } from \"./components/Input/Input\";\nexport type { InputProps } from \"./components/Input/Input\";\nexport { Modal } from \"./components/Modal/Modal\";\nexport type { ModalProps } from \"./components/Modal/Modal\";\nexport { Skeleton } from \"./components/Skeleton/Skeleton\";\nexport type { SkeletonProps } from \"./components/Skeleton/Skeleton\";\nexport { Spinner } from \"./components/Spinner/Spinner\";\nexport type { SpinnerProps } from \"./components/Spinner/Spinner\";\nexport { colors, spacing, typography } from \"./tokens\";\n","import { forwardRef, type HTMLAttributes, type ReactNode } from \"react\";\nimport { cx } from \"../../utils/cx\";\n\nexport interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>, \"title\"> {\n  title?: ReactNode;\n  variant?: \"info\" | \"success\" | \"warning\" | \"danger\";\n}\n\nexport const Alert = forwardRef<HTMLDivElement, AlertProps>(function Alert(\n  { children, className, title, variant = \"info\", ...props },\n  ref,\n) {\n  const role = variant === \"danger\" || variant === \"warning\" ? \"alert\" : \"status\";\n\n  return (\n    <div\n      className={cx(\"ui-alert\", `ui-alert-${variant}`, className)}\n      ref={ref}\n      role={role}\n      {...props}\n    >\n      {title ? <div className=\"ui-alert-title\">{title}</div> : null}\n      <div>{children}</div>\n    </div>\n  );\n});\n","export function cx(...classes: Array<string | false | null | undefined>): string {\n  return classes.filter(Boolean).join(\" \");\n}\n","import { forwardRef, type HTMLAttributes } from \"react\";\nimport { cx } from \"../../utils/cx\";\n\nexport interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {\n  variant?: \"neutral\" | \"success\" | \"warning\" | \"danger\";\n}\n\nexport const Badge = forwardRef<HTMLSpanElement, BadgeProps>(function Badge(\n  { className, variant = \"neutral\", ...props },\n  ref,\n) {\n  return <span className={cx(\"ui-badge\", `ui-badge-${variant}`, className)} ref={ref} {...props} />;\n});\n","import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from \"react\";\nimport { Spinner } from \"../Spinner/Spinner\";\nimport { cx } from \"../../utils/cx\";\n\nexport interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  isLoading?: boolean;\n  leftIcon?: ReactNode;\n  rightIcon?: ReactNode;\n  size?: \"sm\" | \"md\" | \"lg\";\n  variant?: \"primary\" | \"secondary\" | \"ghost\" | \"danger\";\n}\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n  {\n    children,\n    className,\n    disabled,\n    isLoading = false,\n    leftIcon,\n    rightIcon,\n    size = \"md\",\n    type = \"button\",\n    variant = \"primary\",\n    ...props\n  },\n  ref,\n) {\n  return (\n    <button\n      className={cx(\n        \"ui-button\",\n        `ui-button-${variant}`,\n        size !== \"md\" && `ui-button-${size}`,\n        className,\n      )}\n      data-loading={isLoading ? \"true\" : undefined}\n      disabled={disabled || isLoading}\n      ref={ref}\n      type={type}\n      {...props}\n    >\n      {isLoading ? <Spinner label=\"Loading\" size=\"sm\" /> : leftIcon}\n      <span>{children}</span>\n      {!isLoading ? rightIcon : null}\n    </button>\n  );\n});\n","import type { HTMLAttributes } from \"react\";\nimport { cx } from \"../../utils/cx\";\n\nexport interface SpinnerProps extends HTMLAttributes<HTMLSpanElement> {\n  label?: string;\n  size?: \"sm\" | \"md\" | \"lg\";\n}\n\nexport function Spinner({ className, label = \"Loading\", size = \"md\", ...props }: SpinnerProps) {\n  return (\n    <span\n      aria-label={label}\n      className={cx(\"ui-spinner\", size !== \"md\" && `ui-spinner-${size}`, className)}\n      role=\"status\"\n      {...props}\n    />\n  );\n}\n","import { forwardRef, type HTMLAttributes } from \"react\";\nimport { cx } from \"../../utils/cx\";\n\nexport type CardProps = HTMLAttributes<HTMLDivElement>;\nexport type CardHeaderProps = HTMLAttributes<HTMLDivElement>;\nexport type CardContentProps = HTMLAttributes<HTMLDivElement>;\nexport type CardFooterProps = HTMLAttributes<HTMLDivElement>;\n\nexport const Card = forwardRef<HTMLDivElement, CardProps>(function Card(\n  { className, ...props },\n  ref,\n) {\n  return <div className={cx(\"ui-card\", className)} ref={ref} {...props} />;\n});\n\nexport const CardHeader = forwardRef<HTMLDivElement, CardHeaderProps>(function CardHeader(\n  { className, ...props },\n  ref,\n) {\n  return <div className={cx(\"ui-card-header\", className)} ref={ref} {...props} />;\n});\n\nexport const CardContent = forwardRef<HTMLDivElement, CardContentProps>(function CardContent(\n  { className, ...props },\n  ref,\n) {\n  return <div className={cx(\"ui-card-content\", className)} ref={ref} {...props} />;\n});\n\nexport const CardFooter = forwardRef<HTMLDivElement, CardFooterProps>(function CardFooter(\n  { className, ...props },\n  ref,\n) {\n  return <div className={cx(\"ui-card-footer\", className)} ref={ref} {...props} />;\n});\n","import { forwardRef, type HTMLAttributes, type ReactNode } from \"react\";\nimport { cx } from \"../../utils/cx\";\n\nexport interface EmptyStateProps extends Omit<HTMLAttributes<HTMLDivElement>, \"title\"> {\n  action?: ReactNode;\n  description?: ReactNode;\n  icon?: ReactNode;\n  title: ReactNode;\n}\n\nexport const EmptyState = forwardRef<HTMLDivElement, EmptyStateProps>(function EmptyState(\n  { action, className, description, icon, title, ...props },\n  ref,\n) {\n  return (\n    <section className={cx(\"ui-empty-state\", className)} ref={ref} {...props}>\n      {icon ? <div aria-hidden=\"true\">{icon}</div> : null}\n      <h2 className=\"ui-empty-state-title\">{title}</h2>\n      {description ? <p className=\"ui-empty-state-description\">{description}</p> : null}\n      {action}\n    </section>\n  );\n});\n","import { forwardRef, type InputHTMLAttributes, useId } from \"react\";\nimport { cx } from \"../../utils/cx\";\n\nexport interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, \"size\"> {\n  error?: string;\n  helperText?: string;\n  label?: string;\n}\n\nexport const Input = forwardRef<HTMLInputElement, InputProps>(function Input(\n  { className, error, helperText, id, label, ...props },\n  ref,\n) {\n  const generatedId = useId();\n  const inputId = id ?? generatedId;\n  const descriptionId = helperText ? `${inputId}-help` : undefined;\n  const errorId = error ? `${inputId}-error` : undefined;\n\n  return (\n    <div className=\"ui-input-field\">\n      {label ? (\n        <label className=\"ui-label\" htmlFor={inputId}>\n          {label}\n        </label>\n      ) : null}\n      <input\n        aria-describedby={cx(descriptionId, errorId) || undefined}\n        aria-invalid={error ? true : undefined}\n        className={cx(\"ui-input\", error && \"ui-input-error\", className)}\n        id={inputId}\n        ref={ref}\n        {...props}\n      />\n      {helperText ? (\n        <div className=\"ui-field-help\" id={descriptionId}>\n          {helperText}\n        </div>\n      ) : null}\n      {error ? (\n        <div className=\"ui-field-error\" id={errorId} role=\"alert\">\n          {error}\n        </div>\n      ) : null}\n    </div>\n  );\n});\n","import {\n  forwardRef,\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type MouseEvent,\n  type ReactNode,\n  useEffect,\n  useId,\n  useRef,\n} from \"react\";\nimport { cx } from \"../../utils/cx\";\n\nexport interface ModalProps extends Omit<HTMLAttributes<HTMLDivElement>, \"title\"> {\n  children: ReactNode;\n  closeLabel?: string;\n  isOpen: boolean;\n  onOpenChange: (isOpen: boolean) => void;\n  title: ReactNode;\n}\n\nfunction getFocusable(container: HTMLElement): HTMLElement[] {\n  return Array.from(\n    container.querySelectorAll<HTMLElement>(\n      'a[href], button:not([disabled]), input:not([disabled]), textarea:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex=\"-1\"])',\n    ),\n  ).filter((element) => !element.hasAttribute(\"disabled\") && element.tabIndex !== -1);\n}\n\nexport const Modal = forwardRef<HTMLDivElement, ModalProps>(function Modal(\n  { children, className, closeLabel = \"Close dialog\", isOpen, onOpenChange, title, ...props },\n  ref,\n) {\n  const titleId = useId();\n  const dialogRef = useRef<HTMLDivElement | null>(null);\n\n  useEffect(() => {\n    if (!isOpen) {\n      return;\n    }\n\n    const previousActiveElement =\n      document.activeElement instanceof HTMLElement ? document.activeElement : null;\n    const focusable = dialogRef.current ? getFocusable(dialogRef.current) : [];\n    focusable[0]?.focus();\n\n    return () => {\n      previousActiveElement?.focus();\n    };\n  }, [isOpen]);\n\n  if (!isOpen) {\n    return null;\n  }\n\n  function handleOverlayClick(event: MouseEvent<HTMLDivElement>) {\n    if (event.target === event.currentTarget) {\n      onOpenChange(false);\n    }\n  }\n\n  function handleKeyDown(event: KeyboardEvent<HTMLDivElement>) {\n    if (event.key === \"Escape\") {\n      onOpenChange(false);\n      return;\n    }\n\n    if (event.key !== \"Tab\" || !dialogRef.current) {\n      return;\n    }\n\n    const focusable = getFocusable(dialogRef.current);\n    if (focusable.length === 0) {\n      return;\n    }\n\n    const first = focusable[0];\n    const last = focusable.at(-1);\n\n    if (!first || !last) {\n      return;\n    }\n\n    if (event.shiftKey && document.activeElement === first) {\n      event.preventDefault();\n      last.focus();\n    } else if (!event.shiftKey && document.activeElement === last) {\n      event.preventDefault();\n      first.focus();\n    }\n  }\n\n  return (\n    <div className=\"ui-modal-overlay\" onClick={handleOverlayClick}>\n      <div\n        aria-labelledby={titleId}\n        aria-modal=\"true\"\n        className={cx(\"ui-modal\", className)}\n        onKeyDown={handleKeyDown}\n        ref={(node) => {\n          dialogRef.current = node;\n          if (typeof ref === \"function\") {\n            ref(node);\n          } else if (ref) {\n            ref.current = node;\n          }\n        }}\n        role=\"dialog\"\n        {...props}\n      >\n        <div className=\"ui-modal-header\">\n          <h2 className=\"ui-modal-title\" id={titleId}>\n            {title}\n          </h2>\n          <button\n            aria-label={closeLabel}\n            className=\"ui-modal-close\"\n            onClick={() => onOpenChange(false)}\n            type=\"button\"\n          >\n            ×\n          </button>\n        </div>\n        <div className=\"ui-modal-body\">{children}</div>\n      </div>\n    </div>\n  );\n});\n","import { forwardRef, type HTMLAttributes } from \"react\";\nimport { cx } from \"../../utils/cx\";\n\nexport interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {\n  height?: number | string;\n  width?: number | string;\n}\n\nexport const Skeleton = forwardRef<HTMLDivElement, SkeletonProps>(function Skeleton(\n  { className, height = \"1rem\", style, width = \"100%\", ...props },\n  ref,\n) {\n  return (\n    <div\n      aria-hidden=\"true\"\n      className={cx(\"ui-skeleton\", className)}\n      ref={ref}\n      style={{ height, width, ...style }}\n      {...props}\n    />\n  );\n});\n","export const colors = {\n  background: \"var(--ui-color-background)\",\n  foreground: \"var(--ui-color-foreground)\",\n  surface: \"var(--ui-color-surface)\",\n  surfaceRaised: \"var(--ui-color-surface-raised)\",\n  border: \"var(--ui-color-border)\",\n  primary: \"var(--ui-color-primary)\",\n  primaryForeground: \"var(--ui-color-primary-foreground)\",\n  danger: \"var(--ui-color-danger)\",\n  dangerForeground: \"var(--ui-color-danger-foreground)\",\n  success: \"var(--ui-color-success)\",\n  successForeground: \"var(--ui-color-success-foreground)\",\n  warning: \"var(--ui-color-warning)\",\n  warningForeground: \"var(--ui-color-warning-foreground)\",\n  muted: \"var(--ui-color-muted)\",\n  mutedForeground: \"var(--ui-color-muted-foreground)\",\n} as const;\n","export const spacing = {\n  0: \"0\",\n  1: \"var(--ui-space-1)\",\n  2: \"var(--ui-space-2)\",\n  3: \"var(--ui-space-3)\",\n  4: \"var(--ui-space-4)\",\n  5: \"var(--ui-space-5)\",\n  6: \"var(--ui-space-6)\",\n  8: \"var(--ui-space-8)\",\n} as const;\n","export const typography = {\n  fontFamily: \"var(--ui-font-family)\",\n  fontSizeSm: \"var(--ui-font-size-sm)\",\n  fontSizeMd: \"var(--ui-font-size-md)\",\n  fontSizeLg: \"var(--ui-font-size-lg)\",\n  lineHeight: \"var(--ui-line-height)\",\n} as const;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mBAAgE;;;ACAzD,SAAS,MAAM,SAA2D;AAC/E,SAAO,QAAQ,OAAO,OAAO,EAAE,KAAK,GAAG;AACzC;;;ADaI;AAPG,IAAM,YAAQ,yBAAuC,SAASA,OACnE,EAAE,UAAU,WAAW,OAAO,UAAU,QAAQ,GAAG,MAAM,GACzD,KACA;AACA,QAAM,OAAO,YAAY,YAAY,YAAY,YAAY,UAAU;AAEvE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,GAAG,YAAY,YAAY,OAAO,IAAI,SAAS;AAAA,MAC1D;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MAEH;AAAA,gBAAQ,4CAAC,SAAI,WAAU,kBAAkB,iBAAM,IAAS;AAAA,QACzD,4CAAC,SAAK,UAAS;AAAA;AAAA;AAAA,EACjB;AAEJ,CAAC;;;AEzBD,IAAAC,gBAAgD;AAWvC,IAAAC,sBAAA;AAJF,IAAM,YAAQ,0BAAwC,SAASC,OACpE,EAAE,WAAW,UAAU,WAAW,GAAG,MAAM,GAC3C,KACA;AACA,SAAO,6CAAC,UAAK,WAAW,GAAG,YAAY,YAAY,OAAO,IAAI,SAAS,GAAG,KAAW,GAAG,OAAO;AACjG,CAAC;;;ACZD,IAAAC,gBAAsE;;;ACUlE,IAAAC,sBAAA;AAFG,SAAS,QAAQ,EAAE,WAAW,QAAQ,WAAW,OAAO,MAAM,GAAG,MAAM,GAAiB;AAC7F,SACE;AAAA,IAAC;AAAA;AAAA,MACC,cAAY;AAAA,MACZ,WAAW,GAAG,cAAc,SAAS,QAAQ,cAAc,IAAI,IAAI,SAAS;AAAA,MAC5E,MAAK;AAAA,MACJ,GAAG;AAAA;AAAA,EACN;AAEJ;;;ADWI,IAAAC,sBAAA;AAhBG,IAAM,aAAS,0BAA2C,SAASC,QACxE;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,OAAO;AAAA,EACP,UAAU;AAAA,EACV,GAAG;AACL,GACA,KACA;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,aAAa,OAAO;AAAA,QACpB,SAAS,QAAQ,aAAa,IAAI;AAAA,QAClC;AAAA,MACF;AAAA,MACA,gBAAc,YAAY,SAAS;AAAA,MACnC,UAAU,YAAY;AAAA,MACtB;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MAEH;AAAA,oBAAY,6CAAC,WAAQ,OAAM,WAAU,MAAK,MAAK,IAAK;AAAA,QACrD,6CAAC,UAAM,UAAS;AAAA,QACf,CAAC,YAAY,YAAY;AAAA;AAAA;AAAA,EAC5B;AAEJ,CAAC;;;AE9CD,IAAAC,gBAAgD;AAYvC,IAAAC,sBAAA;AAJF,IAAM,WAAO,0BAAsC,SAASC,MACjE,EAAE,WAAW,GAAG,MAAM,GACtB,KACA;AACA,SAAO,6CAAC,SAAI,WAAW,GAAG,WAAW,SAAS,GAAG,KAAW,GAAG,OAAO;AACxE,CAAC;AAEM,IAAM,iBAAa,0BAA4C,SAASC,YAC7E,EAAE,WAAW,GAAG,MAAM,GACtB,KACA;AACA,SAAO,6CAAC,SAAI,WAAW,GAAG,kBAAkB,SAAS,GAAG,KAAW,GAAG,OAAO;AAC/E,CAAC;AAEM,IAAM,kBAAc,0BAA6C,SAASC,aAC/E,EAAE,WAAW,GAAG,MAAM,GACtB,KACA;AACA,SAAO,6CAAC,SAAI,WAAW,GAAG,mBAAmB,SAAS,GAAG,KAAW,GAAG,OAAO;AAChF,CAAC;AAEM,IAAM,iBAAa,0BAA4C,SAASC,YAC7E,EAAE,WAAW,GAAG,MAAM,GACtB,KACA;AACA,SAAO,6CAAC,SAAI,WAAW,GAAG,kBAAkB,SAAS,GAAG,KAAW,GAAG,OAAO;AAC/E,CAAC;;;AClCD,IAAAC,gBAAgE;AAe5D,IAAAC,sBAAA;AALG,IAAM,iBAAa,0BAA4C,SAASC,YAC7E,EAAE,QAAQ,WAAW,aAAa,MAAM,OAAO,GAAG,MAAM,GACxD,KACA;AACA,SACE,8CAAC,aAAQ,WAAW,GAAG,kBAAkB,SAAS,GAAG,KAAW,GAAG,OAChE;AAAA,WAAO,6CAAC,SAAI,eAAY,QAAQ,gBAAK,IAAS;AAAA,IAC/C,6CAAC,QAAG,WAAU,wBAAwB,iBAAM;AAAA,IAC3C,cAAc,6CAAC,OAAE,WAAU,8BAA8B,uBAAY,IAAO;AAAA,IAC5E;AAAA,KACH;AAEJ,CAAC;;;ACtBD,IAAAC,gBAA4D;AAmBxD,IAAAC,sBAAA;AAVG,IAAM,YAAQ,0BAAyC,SAASC,OACrE,EAAE,WAAW,OAAO,YAAY,IAAI,OAAO,GAAG,MAAM,GACpD,KACA;AACA,QAAM,kBAAc,qBAAM;AAC1B,QAAM,UAAU,MAAM;AACtB,QAAM,gBAAgB,aAAa,GAAG,OAAO,UAAU;AACvD,QAAM,UAAU,QAAQ,GAAG,OAAO,WAAW;AAE7C,SACE,8CAAC,SAAI,WAAU,kBACZ;AAAA,YACC,6CAAC,WAAM,WAAU,YAAW,SAAS,SAClC,iBACH,IACE;AAAA,IACJ;AAAA,MAAC;AAAA;AAAA,QACC,oBAAkB,GAAG,eAAe,OAAO,KAAK;AAAA,QAChD,gBAAc,QAAQ,OAAO;AAAA,QAC7B,WAAW,GAAG,YAAY,SAAS,kBAAkB,SAAS;AAAA,QAC9D,IAAI;AAAA,QACJ;AAAA,QACC,GAAG;AAAA;AAAA,IACN;AAAA,IACC,aACC,6CAAC,SAAI,WAAU,iBAAgB,IAAI,eAChC,sBACH,IACE;AAAA,IACH,QACC,6CAAC,SAAI,WAAU,kBAAiB,IAAI,SAAS,MAAK,SAC/C,iBACH,IACE;AAAA,KACN;AAEJ,CAAC;;;AC7CD,IAAAC,gBASO;AAoGC,IAAAC,sBAAA;AAzFR,SAAS,aAAa,WAAuC;AAC3D,SAAO,MAAM;AAAA,IACX,UAAU;AAAA,MACR;AAAA,IACF;AAAA,EACF,EAAE,OAAO,CAAC,YAAY,CAAC,QAAQ,aAAa,UAAU,KAAK,QAAQ,aAAa,EAAE;AACpF;AAEO,IAAM,YAAQ,0BAAuC,SAASC,OACnE,EAAE,UAAU,WAAW,aAAa,gBAAgB,QAAQ,cAAc,OAAO,GAAG,MAAM,GAC1F,KACA;AACA,QAAM,cAAU,qBAAM;AACtB,QAAM,gBAAY,sBAA8B,IAAI;AAEpD,+BAAU,MAAM;AACd,QAAI,CAAC,QAAQ;AACX;AAAA,IACF;AAEA,UAAM,wBACJ,SAAS,yBAAyB,cAAc,SAAS,gBAAgB;AAC3E,UAAM,YAAY,UAAU,UAAU,aAAa,UAAU,OAAO,IAAI,CAAC;AACzE,cAAU,CAAC,GAAG,MAAM;AAEpB,WAAO,MAAM;AACX,6BAAuB,MAAM;AAAA,IAC/B;AAAA,EACF,GAAG,CAAC,MAAM,CAAC;AAEX,MAAI,CAAC,QAAQ;AACX,WAAO;AAAA,EACT;AAEA,WAAS,mBAAmB,OAAmC;AAC7D,QAAI,MAAM,WAAW,MAAM,eAAe;AACxC,mBAAa,KAAK;AAAA,IACpB;AAAA,EACF;AAEA,WAAS,cAAc,OAAsC;AAC3D,QAAI,MAAM,QAAQ,UAAU;AAC1B,mBAAa,KAAK;AAClB;AAAA,IACF;AAEA,QAAI,MAAM,QAAQ,SAAS,CAAC,UAAU,SAAS;AAC7C;AAAA,IACF;AAEA,UAAM,YAAY,aAAa,UAAU,OAAO;AAChD,QAAI,UAAU,WAAW,GAAG;AAC1B;AAAA,IACF;AAEA,UAAM,QAAQ,UAAU,CAAC;AACzB,UAAM,OAAO,UAAU,GAAG,EAAE;AAE5B,QAAI,CAAC,SAAS,CAAC,MAAM;AACnB;AAAA,IACF;AAEA,QAAI,MAAM,YAAY,SAAS,kBAAkB,OAAO;AACtD,YAAM,eAAe;AACrB,WAAK,MAAM;AAAA,IACb,WAAW,CAAC,MAAM,YAAY,SAAS,kBAAkB,MAAM;AAC7D,YAAM,eAAe;AACrB,YAAM,MAAM;AAAA,IACd;AAAA,EACF;AAEA,SACE,6CAAC,SAAI,WAAU,oBAAmB,SAAS,oBACzC;AAAA,IAAC;AAAA;AAAA,MACC,mBAAiB;AAAA,MACjB,cAAW;AAAA,MACX,WAAW,GAAG,YAAY,SAAS;AAAA,MACnC,WAAW;AAAA,MACX,KAAK,CAAC,SAAS;AACb,kBAAU,UAAU;AACpB,YAAI,OAAO,QAAQ,YAAY;AAC7B,cAAI,IAAI;AAAA,QACV,WAAW,KAAK;AACd,cAAI,UAAU;AAAA,QAChB;AAAA,MACF;AAAA,MACA,MAAK;AAAA,MACJ,GAAG;AAAA,MAEJ;AAAA,sDAAC,SAAI,WAAU,mBACb;AAAA,uDAAC,QAAG,WAAU,kBAAiB,IAAI,SAChC,iBACH;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,cAAY;AAAA,cACZ,WAAU;AAAA,cACV,SAAS,MAAM,aAAa,KAAK;AAAA,cACjC,MAAK;AAAA,cACN;AAAA;AAAA,UAED;AAAA,WACF;AAAA,QACA,6CAAC,SAAI,WAAU,iBAAiB,UAAS;AAAA;AAAA;AAAA,EAC3C,GACF;AAEJ,CAAC;;;AC9HD,IAAAC,gBAAgD;AAa5C,IAAAC,sBAAA;AALG,IAAM,eAAW,0BAA0C,SAASC,UACzE,EAAE,WAAW,SAAS,QAAQ,OAAO,QAAQ,QAAQ,GAAG,MAAM,GAC9D,KACA;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAY;AAAA,MACZ,WAAW,GAAG,eAAe,SAAS;AAAA,MACtC;AAAA,MACA,OAAO,EAAE,QAAQ,OAAO,GAAG,MAAM;AAAA,MAChC,GAAG;AAAA;AAAA,EACN;AAEJ,CAAC;;;ACrBM,IAAM,SAAS;AAAA,EACpB,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,eAAe;AAAA,EACf,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,mBAAmB;AAAA,EACnB,QAAQ;AAAA,EACR,kBAAkB;AAAA,EAClB,SAAS;AAAA,EACT,mBAAmB;AAAA,EACnB,SAAS;AAAA,EACT,mBAAmB;AAAA,EACnB,OAAO;AAAA,EACP,iBAAiB;AACnB;;;AChBO,IAAM,UAAU;AAAA,EACrB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;;;ACTO,IAAM,aAAa;AAAA,EACxB,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AACd;","names":["Alert","import_react","import_jsx_runtime","Badge","import_react","import_jsx_runtime","import_jsx_runtime","Button","import_react","import_jsx_runtime","Card","CardHeader","CardContent","CardFooter","import_react","import_jsx_runtime","EmptyState","import_react","import_jsx_runtime","Input","import_react","import_jsx_runtime","Modal","import_react","import_jsx_runtime","Skeleton"]}

package/dist/index.d.cts

@@ -0,0 +1,106 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode, ButtonHTMLAttributes, InputHTMLAttributes } from 'react';
+
+interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    title?: ReactNode;
+    variant?: "info" | "success" | "warning" | "danger";
+}
+declare const Alert: react.ForwardRefExoticComponent<AlertProps & react.RefAttributes<HTMLDivElement>>;
+
+interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+    variant?: "neutral" | "success" | "warning" | "danger";
+}
+declare const Badge: react.ForwardRefExoticComponent<BadgeProps & react.RefAttributes<HTMLSpanElement>>;
+
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    isLoading?: boolean;
+    leftIcon?: ReactNode;
+    rightIcon?: ReactNode;
+    size?: "sm" | "md" | "lg";
+    variant?: "primary" | "secondary" | "ghost" | "danger";
+}
+declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
+
+type CardProps = HTMLAttributes<HTMLDivElement>;
+type CardHeaderProps = HTMLAttributes<HTMLDivElement>;
+type CardContentProps = HTMLAttributes<HTMLDivElement>;
+type CardFooterProps = HTMLAttributes<HTMLDivElement>;
+declare const Card: react.ForwardRefExoticComponent<CardProps & react.RefAttributes<HTMLDivElement>>;
+declare const CardHeader: react.ForwardRefExoticComponent<CardHeaderProps & react.RefAttributes<HTMLDivElement>>;
+declare const CardContent: react.ForwardRefExoticComponent<CardContentProps & react.RefAttributes<HTMLDivElement>>;
+declare const CardFooter: react.ForwardRefExoticComponent<CardFooterProps & react.RefAttributes<HTMLDivElement>>;
+
+interface EmptyStateProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    action?: ReactNode;
+    description?: ReactNode;
+    icon?: ReactNode;
+    title: ReactNode;
+}
+declare const EmptyState: react.ForwardRefExoticComponent<EmptyStateProps & react.RefAttributes<HTMLDivElement>>;
+
+interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
+    error?: string;
+    helperText?: string;
+    label?: string;
+}
+declare const Input: react.ForwardRefExoticComponent<InputProps & react.RefAttributes<HTMLInputElement>>;
+
+interface ModalProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    children: ReactNode;
+    closeLabel?: string;
+    isOpen: boolean;
+    onOpenChange: (isOpen: boolean) => void;
+    title: ReactNode;
+}
+declare const Modal: react.ForwardRefExoticComponent<ModalProps & react.RefAttributes<HTMLDivElement>>;
+
+interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {
+    height?: number | string;
+    width?: number | string;
+}
+declare const Skeleton: react.ForwardRefExoticComponent<SkeletonProps & react.RefAttributes<HTMLDivElement>>;
+
+interface SpinnerProps extends HTMLAttributes<HTMLSpanElement> {
+    label?: string;
+    size?: "sm" | "md" | "lg";
+}
+declare function Spinner({ className, label, size, ...props }: SpinnerProps): react.JSX.Element;
+
+declare const colors: {
+    readonly background: "var(--ui-color-background)";
+    readonly foreground: "var(--ui-color-foreground)";
+    readonly surface: "var(--ui-color-surface)";
+    readonly surfaceRaised: "var(--ui-color-surface-raised)";
+    readonly border: "var(--ui-color-border)";
+    readonly primary: "var(--ui-color-primary)";
+    readonly primaryForeground: "var(--ui-color-primary-foreground)";
+    readonly danger: "var(--ui-color-danger)";
+    readonly dangerForeground: "var(--ui-color-danger-foreground)";
+    readonly success: "var(--ui-color-success)";
+    readonly successForeground: "var(--ui-color-success-foreground)";
+    readonly warning: "var(--ui-color-warning)";
+    readonly warningForeground: "var(--ui-color-warning-foreground)";
+    readonly muted: "var(--ui-color-muted)";
+    readonly mutedForeground: "var(--ui-color-muted-foreground)";
+};
+
+declare const spacing: {
+    readonly 0: "0";
+    readonly 1: "var(--ui-space-1)";
+    readonly 2: "var(--ui-space-2)";
+    readonly 3: "var(--ui-space-3)";
+    readonly 4: "var(--ui-space-4)";
+    readonly 5: "var(--ui-space-5)";
+    readonly 6: "var(--ui-space-6)";
+    readonly 8: "var(--ui-space-8)";
+};
+
+declare const typography: {
+    readonly fontFamily: "var(--ui-font-family)";
+    readonly fontSizeSm: "var(--ui-font-size-sm)";
+    readonly fontSizeMd: "var(--ui-font-size-md)";
+    readonly fontSizeLg: "var(--ui-font-size-lg)";
+    readonly lineHeight: "var(--ui-line-height)";
+};
+
+export { Alert, type AlertProps, Badge, type BadgeProps, Button, type ButtonProps, Card, CardContent, type CardContentProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, EmptyState, type EmptyStateProps, Input, type InputProps, Modal, type ModalProps, Skeleton, type SkeletonProps, Spinner, type SpinnerProps, colors, spacing, typography };

package/dist/index.d.ts

@@ -0,0 +1,106 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode, ButtonHTMLAttributes, InputHTMLAttributes } from 'react';
+
+interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    title?: ReactNode;
+    variant?: "info" | "success" | "warning" | "danger";
+}
+declare const Alert: react.ForwardRefExoticComponent<AlertProps & react.RefAttributes<HTMLDivElement>>;
+
+interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+    variant?: "neutral" | "success" | "warning" | "danger";
+}
+declare const Badge: react.ForwardRefExoticComponent<BadgeProps & react.RefAttributes<HTMLSpanElement>>;
+
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    isLoading?: boolean;
+    leftIcon?: ReactNode;
+    rightIcon?: ReactNode;
+    size?: "sm" | "md" | "lg";
+    variant?: "primary" | "secondary" | "ghost" | "danger";
+}
+declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
+
+type CardProps = HTMLAttributes<HTMLDivElement>;
+type CardHeaderProps = HTMLAttributes<HTMLDivElement>;
+type CardContentProps = HTMLAttributes<HTMLDivElement>;
+type CardFooterProps = HTMLAttributes<HTMLDivElement>;
+declare const Card: react.ForwardRefExoticComponent<CardProps & react.RefAttributes<HTMLDivElement>>;
+declare const CardHeader: react.ForwardRefExoticComponent<CardHeaderProps & react.RefAttributes<HTMLDivElement>>;
+declare const CardContent: react.ForwardRefExoticComponent<CardContentProps & react.RefAttributes<HTMLDivElement>>;
+declare const CardFooter: react.ForwardRefExoticComponent<CardFooterProps & react.RefAttributes<HTMLDivElement>>;
+
+interface EmptyStateProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    action?: ReactNode;
+    description?: ReactNode;
+    icon?: ReactNode;
+    title: ReactNode;
+}
+declare const EmptyState: react.ForwardRefExoticComponent<EmptyStateProps & react.RefAttributes<HTMLDivElement>>;
+
+interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
+    error?: string;
+    helperText?: string;
+    label?: string;
+}
+declare const Input: react.ForwardRefExoticComponent<InputProps & react.RefAttributes<HTMLInputElement>>;
+
+interface ModalProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    children: ReactNode;
+    closeLabel?: string;
+    isOpen: boolean;
+    onOpenChange: (isOpen: boolean) => void;
+    title: ReactNode;
+}
+declare const Modal: react.ForwardRefExoticComponent<ModalProps & react.RefAttributes<HTMLDivElement>>;
+
+interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {
+    height?: number | string;
+    width?: number | string;
+}
+declare const Skeleton: react.ForwardRefExoticComponent<SkeletonProps & react.RefAttributes<HTMLDivElement>>;
+
+interface SpinnerProps extends HTMLAttributes<HTMLSpanElement> {
+    label?: string;
+    size?: "sm" | "md" | "lg";
+}
+declare function Spinner({ className, label, size, ...props }: SpinnerProps): react.JSX.Element;
+
+declare const colors: {
+    readonly background: "var(--ui-color-background)";
+    readonly foreground: "var(--ui-color-foreground)";
+    readonly surface: "var(--ui-color-surface)";
+    readonly surfaceRaised: "var(--ui-color-surface-raised)";
+    readonly border: "var(--ui-color-border)";
+    readonly primary: "var(--ui-color-primary)";
+    readonly primaryForeground: "var(--ui-color-primary-foreground)";
+    readonly danger: "var(--ui-color-danger)";
+    readonly dangerForeground: "var(--ui-color-danger-foreground)";
+    readonly success: "var(--ui-color-success)";
+    readonly successForeground: "var(--ui-color-success-foreground)";
+    readonly warning: "var(--ui-color-warning)";
+    readonly warningForeground: "var(--ui-color-warning-foreground)";
+    readonly muted: "var(--ui-color-muted)";
+    readonly mutedForeground: "var(--ui-color-muted-foreground)";
+};
+
+declare const spacing: {
+    readonly 0: "0";
+    readonly 1: "var(--ui-space-1)";
+    readonly 2: "var(--ui-space-2)";
+    readonly 3: "var(--ui-space-3)";
+    readonly 4: "var(--ui-space-4)";
+    readonly 5: "var(--ui-space-5)";
+    readonly 6: "var(--ui-space-6)";
+    readonly 8: "var(--ui-space-8)";
+};
+
+declare const typography: {
+    readonly fontFamily: "var(--ui-font-family)";
+    readonly fontSizeSm: "var(--ui-font-size-sm)";
+    readonly fontSizeMd: "var(--ui-font-size-md)";
+    readonly fontSizeLg: "var(--ui-font-size-lg)";
+    readonly lineHeight: "var(--ui-line-height)";
+};
+
+export { Alert, type AlertProps, Badge, type BadgeProps, Button, type ButtonProps, Card, CardContent, type CardContentProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, EmptyState, type EmptyStateProps, Input, type InputProps, Modal, type ModalProps, Skeleton, type SkeletonProps, Spinner, type SpinnerProps, colors, spacing, typography };