@domglyph/primitives 2.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 llcortex
+
+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,224 @@
+# @domglyph/primitives (formerly [@cortexui/primitives](https://www.npmjs.com/package/@cortexui/primitives))
+
+[![npm version](https://img.shields.io/npm/v/@domglyph/primitives?color=0ea5e9)](https://www.npmjs.com/package/@domglyph/primitives)
+[![License: MIT](https://img.shields.io/badge/license-MIT-green.svg)](../../LICENSE)
+
+Low-level accessible UI primitives. The foundation of DOMglyph components.
+
+---
+
+## Overview
+
+`@domglyph/primitives` provides the base layer of the DOMglyph architecture. Understanding the three-layer model helps clarify where each package fits:
+
+```
+┌─────────────────────────────────────┐
+│  @domglyph/components               │  ← AI contract + visual design
+│  ActionButton, FormField, DataTable  │
+├─────────────────────────────────────┤
+│  @domglyph/primitives               │  ← Behavior + accessibility
+│  Box, Stack, Text, ButtonBase, …    │
+├─────────────────────────────────────┤
+│  HTML elements + ARIA               │  ← DOM
+└─────────────────────────────────────┘
+```
+
+**Primitives handle behavior and accessibility.** They manage focus management, keyboard interaction, ARIA roles, and layout — the hard, invisible work that makes a UI actually accessible.
+
+**Primitives do NOT add `data-ai-*` attributes.** That is the responsibility of the component layer. This separation means primitives are reusable for any purpose, while components carry the full AI contract.
+
+---
+
+## Installation
+
+```bash
+npm install @domglyph/primitives
+```
+
+Peer dependencies:
+
+```bash
+npm install react@^18 react-dom@^18
+```
+
+---
+
+## Primitives
+
+### Box
+
+A polymorphic container element. Renders as any HTML element via the `as` prop, defaulting to `div`. The base building block for layout.
+
+```tsx
+import { Box } from '@domglyph/primitives';
+
+<Box as="section" style={{ padding: '24px' }}>
+  Page content here
+</Box>
+
+<Box as="article" style={{ maxWidth: '640px', margin: '0 auto' }}>
+  Article content
+</Box>
+
+<Box as="header">
+  Site header
+</Box>
+```
+
+`Box` forwards all standard HTML attributes and refs. It has no opinion about styling.
+
+---
+
+### Stack
+
+A flexbox layout primitive for stacking children vertically or horizontally with consistent spacing.
+
+```tsx
+import { Stack } from '@domglyph/primitives';
+
+// Vertical stack with gap
+<Stack direction="column" gap="16px">
+  <FormField id="name" fieldType="text" label="Full name" />
+  <FormField id="email" fieldType="email" label="Email" />
+  <ActionButton action="submit-form" state="idle" label="Submit" />
+</Stack>
+
+// Horizontal stack
+<Stack direction="row" gap="8px" align="center">
+  <StatusIcon />
+  <Text size="sm">3 items selected</Text>
+</Stack>
+```
+
+---
+
+### Text
+
+A semantic typography primitive. Renders as any text-level HTML element via the `as` prop. Use it for labels, headings, captions, and body copy.
+
+```tsx
+import { Text } from '@domglyph/primitives';
+
+// Form label
+<Text as="label" size="sm" weight="medium">
+  Full name
+</Text>
+
+// Heading
+<Text as="h2" size="xl" weight="bold">
+  Account settings
+</Text>
+
+// Caption
+<Text as="span" size="xs" color="muted">
+  Last updated 2 minutes ago
+</Text>
+```
+
+---
+
+### ButtonBase
+
+An accessible button primitive with no visual styling. Handles keyboard events (`Enter`, `Space`), ARIA attributes, and disabled state management. The foundation of `ActionButton`.
+
+When building custom components on `ButtonBase`, you are responsible for adding `data-ai-*` attributes:
+
+```tsx
+import { ButtonBase } from '@domglyph/primitives';
+
+<ButtonBase
+  onClick={handleClick}
+  disabled={isDisabled}
+  aria-label="Close dialog"
+  data-ai-role="action"
+  data-ai-id="close-dialog"
+  data-ai-action="close-dialog"
+  data-ai-state="idle"
+>
+  <CloseIcon />
+</ButtonBase>
+```
+
+`ButtonBase` always renders as a native `<button>` element. It does not use `role="button"` on a `<div>`. This ensures correct keyboard behaviour, screen reader support, and form interaction without extra work.
+
+---
+
+### InputBase
+
+An accessible input primitive with no visual styling. Handles value state, change events, and ARIA attributes for error and required states. The foundation of `FormField`.
+
+```tsx
+import { InputBase } from '@domglyph/primitives';
+
+<InputBase
+  type="email"
+  value={value}
+  onChange={(e) => setValue(e.target.value)}
+  aria-label="Email address"
+  aria-required="true"
+  aria-invalid={hasError}
+  data-ai-role="field"
+  data-ai-id="user-email"
+  data-ai-field-type="email"
+  data-ai-required="true"
+  data-ai-state={hasError ? 'error' : 'idle'}
+/>
+```
+
+---
+
+### DialogBase
+
+An accessible dialog primitive with focus trapping, scroll locking, and `Escape` key dismissal. Renders as a native `<dialog>` element. The foundation of `ConfirmDialog`.
+
+```tsx
+import { DialogBase } from '@domglyph/primitives';
+
+<DialogBase
+  open={isOpen}
+  onClose={handleClose}
+  aria-labelledby="dialog-title"
+  aria-describedby="dialog-description"
+  data-ai-role="modal"
+  data-ai-id="confirm-delete"
+  data-ai-state={isOpen ? 'expanded' : 'idle'}
+>
+  <h2 id="dialog-title">Confirm deletion</h2>
+  <p id="dialog-description">This cannot be undone.</p>
+  <ButtonBase onClick={handleClose}>Cancel</ButtonBase>
+  <ButtonBase onClick={handleConfirm}>Confirm</ButtonBase>
+</DialogBase>
+```
+
+`DialogBase` traps focus within the dialog while it is open and restores focus to the trigger element when it closes.
+
+---
+
+## When to use primitives directly
+
+Use `@domglyph/primitives` directly when:
+
+- You are building a **custom component** that needs DOMglyph's accessibility guarantees but has unique visual requirements not served by the components package
+- You need a **polymorphic container** (`Box`) or **layout primitive** (`Stack`) without pulling in a full component
+
+When you build on primitives directly, **you are responsible for adding `data-ai-*` attributes** to make the component inspectable by the AI runtime. See [`@domglyph/ai-contract`](../ai-contract/README.md) for the full attribute specification and [`@domglyph/testing`](../testing/README.md) for validation utilities to use in your tests.
+
+---
+
+## Part of DOMglyph
+
+`@domglyph/primitives` is part of the [DOMglyph](../../README.md) design system.
+
+- [Main repository](../../README.md)
+- [Documentation](http://localhost:3001/docs/primitives)
+- [Contributing](../../CONTRIBUTING.md)
+
+---
+
+## ☕ Support
+
+If you find DOMglyph useful, you can support the project:
+
+👉 https://buymeacoffee.com/nishchya
+
+It helps keep the project alive and growing.

package/dist/index.d.ts

@@ -0,0 +1,108 @@
+import * as react from 'react';
+import { ElementType, ComponentPropsWithoutRef, ReactNode, CSSProperties, ComponentPropsWithRef, RefObject, AriaAttributes, createElement, ReactPortal, ReactElement } from 'react';
+
+type PrimitiveElement = ElementType;
+type PolymorphicRef<C extends PrimitiveElement> = ComponentPropsWithRef<C>["ref"];
+type PolymorphicProps<C extends PrimitiveElement, Props = {}> = Props & Omit<ComponentPropsWithoutRef<C>, keyof Props | "as"> & {
+    as?: C;
+};
+interface PrimitiveStyleProps {
+    readonly className?: string;
+    readonly children?: ReactNode;
+}
+interface PrimitiveBoxProps extends PrimitiveStyleProps {
+    readonly style?: CSSProperties;
+}
+interface SurfaceDescriptor {
+    readonly id: string;
+    readonly tokenNamespace: string;
+}
+interface DialogBaseOwnProps extends PrimitiveStyleProps {
+    readonly open: boolean;
+    readonly onOpenChange?: (open: boolean) => void;
+    readonly ariaLabel?: string;
+    readonly ariaLabelledBy?: string;
+    readonly ariaDescribedBy?: string;
+    readonly closeOnEscape?: boolean;
+    readonly closeOnInteractOutside?: boolean;
+    readonly initialFocusRef?: RefObject<HTMLElement>;
+}
+type DialogBaseElementProps = Omit<ComponentPropsWithoutRef<"div">, keyof DialogBaseOwnProps | "children">;
+type DialogBaseProps = DialogBaseOwnProps & DialogBaseElementProps;
+interface PortalProps {
+    readonly children?: ReactNode;
+    readonly container?: Element | DocumentFragment | null;
+}
+type InputBaseProps = Omit<ComponentPropsWithoutRef<"input">, "size"> & PrimitiveStyleProps & {
+    readonly invalid?: boolean;
+};
+type ButtonBaseProps = ComponentPropsWithoutRef<"button"> & PrimitiveStyleProps & {
+    readonly loading?: boolean;
+    readonly loadingLabel?: string;
+};
+interface StackOwnProps extends PrimitiveBoxProps {
+    readonly direction?: "row" | "column";
+    readonly gap?: number | string;
+    readonly align?: CSSProperties["alignItems"];
+    readonly justify?: CSSProperties["justifyContent"];
+}
+interface TextOwnProps extends PrimitiveBoxProps {
+    readonly tone?: "default" | "muted" | "danger" | "success";
+    readonly visuallyHidden?: boolean;
+}
+type PrimitiveAriaProps = AriaAttributes;
+
+type BoxComponent = <C extends ElementType = "div">(props: PolymorphicProps<C, PrimitiveBoxProps> & {
+    ref?: PolymorphicRef<C>;
+}) => ReturnType<typeof createElement>;
+declare const Box: BoxComponent & {
+    displayName?: string;
+};
+
+declare const ButtonBase: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & PrimitiveStyleProps & {
+    readonly loading?: boolean;
+    readonly loadingLabel?: string;
+} & react.RefAttributes<HTMLButtonElement>>;
+
+declare const DialogBase: react.ForwardRefExoticComponent<DialogBaseOwnProps & DialogBaseElementProps & react.RefAttributes<HTMLDivElement>>;
+
+declare const InputBase: react.ForwardRefExoticComponent<Omit<Omit<react.DetailedHTMLProps<react.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "size"> & PrimitiveStyleProps & {
+    readonly invalid?: boolean;
+} & react.RefAttributes<HTMLInputElement>>;
+
+declare function Portal({ children, container }: PortalProps): ReactPortal | null;
+
+type StackComponent = <C extends ElementType = "div">(props: PolymorphicProps<C, StackOwnProps> & {
+    ref?: PolymorphicRef<C>;
+}) => ReactElement | null;
+declare const Stack: StackComponent & {
+    displayName?: string;
+};
+
+type TextComponent = <C extends ElementType = "span">(props: PolymorphicProps<C, TextOwnProps> & {
+    ref?: PolymorphicRef<C>;
+}) => ReactElement | null;
+declare const Text: TextComponent & {
+    displayName?: string;
+};
+
+declare const primitiveVars: {
+    readonly borderColor: "--domglyph-border-color";
+    readonly dangerColor: "--domglyph-danger-color";
+    readonly focusRing: "--domglyph-focus-ring";
+    readonly foreground: "--domglyph-foreground";
+    readonly mutedForeground: "--domglyph-muted-foreground";
+    readonly radius: "--domglyph-radius";
+    readonly spacing: "--domglyph-spacing";
+    readonly successColor: "--domglyph-success-color";
+    readonly surface: "--domglyph-surface";
+};
+declare const primitiveTheme: CSSProperties;
+
+/**
+ * Backwards-compatible descriptor retained while higher-level packages migrate
+ * to the React primitive exports introduced in this package.
+ */
+declare const primitiveSurface: SurfaceDescriptor;
+
+export { Box, ButtonBase, type ButtonBaseProps, DialogBase, type DialogBaseProps, InputBase, type InputBaseProps, type PolymorphicProps, Portal, type PortalProps, type PrimitiveAriaProps, type PrimitiveBoxProps, type PrimitiveElement, type PrimitiveStyleProps, Stack, type StackOwnProps, type SurfaceDescriptor, Text, type TextOwnProps, primitiveSurface, primitiveTheme, primitiveVars };

package/dist/index.js

@@ -0,0 +1,416 @@
+// src/Box.tsx
+import {
+  createElement,
+  forwardRef
+} from "react";
+
+// src/styles.ts
+import { colorTokens } from "@domglyph/tokens";
+var primitiveVars = {
+  borderColor: "--domglyph-border-color",
+  dangerColor: "--domglyph-danger-color",
+  focusRing: "--domglyph-focus-ring",
+  foreground: "--domglyph-foreground",
+  mutedForeground: "--domglyph-muted-foreground",
+  radius: "--domglyph-radius",
+  spacing: "--domglyph-spacing",
+  successColor: "--domglyph-success-color",
+  surface: "--domglyph-surface"
+};
+var primitiveTheme = {
+  [primitiveVars.surface]: colorTokens.values.surface,
+  [primitiveVars.foreground]: colorTokens.values.accent,
+  [primitiveVars.borderColor]: "rgba(17, 24, 39, 0.16)",
+  [primitiveVars.focusRing]: "rgba(17, 24, 39, 0.24)",
+  [primitiveVars.mutedForeground]: "rgba(17, 24, 39, 0.7)",
+  [primitiveVars.dangerColor]: "#b91c1c",
+  [primitiveVars.successColor]: "#15803d",
+  [primitiveVars.radius]: "12px",
+  [primitiveVars.spacing]: "0.75rem"
+};
+var visuallyHiddenStyle = {
+  border: 0,
+  clip: "rect(0 0 0 0)",
+  height: "1px",
+  margin: "-1px",
+  overflow: "hidden",
+  padding: 0,
+  position: "absolute",
+  whiteSpace: "nowrap",
+  width: "1px"
+};
+
+// src/Box.tsx
+var defaultBoxStyle = {
+  boxSizing: "border-box"
+};
+var BoxImpl = ({ as, children, className, style, ...rest }, ref) => {
+  const Component = as ?? "div";
+  return createElement(
+    Component,
+    {
+      ...rest,
+      className,
+      ref,
+      style: {
+        ...primitiveTheme,
+        ...defaultBoxStyle,
+        ...style
+      }
+    },
+    children
+  );
+};
+var BoxWithRef = forwardRef(BoxImpl);
+BoxWithRef.displayName = "Box";
+var Box = BoxWithRef;
+
+// src/ButtonBase.tsx
+import { forwardRef as forwardRef2 } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var baseButtonStyle = {
+  alignItems: "center",
+  appearance: "none",
+  background: `var(${primitiveVars.foreground})`,
+  border: `1px solid var(${primitiveVars.foreground})`,
+  borderRadius: `var(${primitiveVars.radius})`,
+  color: `var(${primitiveVars.surface})`,
+  cursor: "pointer",
+  display: "inline-flex",
+  font: "inherit",
+  fontWeight: 600,
+  gap: "0.5rem",
+  justifyContent: "center",
+  minHeight: "2.5rem",
+  padding: "0.625rem 1rem",
+  transition: "opacity 120ms ease, transform 120ms ease"
+};
+var spinnerStyle = {
+  animation: "domglyph-spin 0.8s linear infinite",
+  border: "2px solid currentColor",
+  borderBottomColor: "transparent",
+  borderRadius: "999px",
+  display: "inline-block",
+  height: "0.9rem",
+  width: "0.9rem"
+};
+var ButtonBase = forwardRef2(
+  ({
+    children,
+    className,
+    disabled = false,
+    loading = false,
+    loadingLabel = "Loading",
+    style,
+    type = "button",
+    ...rest
+  }, ref) => {
+    const isDisabled = disabled || loading;
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        ...rest,
+        "aria-busy": loading || void 0,
+        className,
+        disabled: isDisabled,
+        ref,
+        style: {
+          ...baseButtonStyle,
+          opacity: isDisabled ? 0.64 : 1,
+          ...style
+        },
+        type,
+        children: loading ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("span", { "aria-hidden": "true", style: spinnerStyle }),
+          /* @__PURE__ */ jsx("span", { children: loadingLabel })
+        ] }) : children
+      }
+    );
+  }
+);
+ButtonBase.displayName = "ButtonBase";
+
+// src/DialogBase.tsx
+import {
+  forwardRef as forwardRef3,
+  useEffect,
+  useId,
+  useRef
+} from "react";
+
+// src/Portal.tsx
+import { createPortal } from "react-dom";
+function Portal({ children, container }) {
+  if (typeof document === "undefined") {
+    return null;
+  }
+  return createPortal(children, container ?? document.body);
+}
+
+// src/DialogBase.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var overlayStyle = {
+  alignItems: "center",
+  background: "rgba(17, 24, 39, 0.48)",
+  display: "flex",
+  inset: 0,
+  justifyContent: "center",
+  padding: "1.5rem",
+  position: "fixed",
+  zIndex: 1e3
+};
+var dialogStyle = {
+  background: `var(${primitiveVars.surface})`,
+  border: `1px solid var(${primitiveVars.borderColor})`,
+  borderRadius: `var(${primitiveVars.radius})`,
+  boxShadow: "0 24px 80px rgba(15, 23, 42, 0.24)",
+  color: `var(${primitiveVars.foreground})`,
+  maxWidth: "40rem",
+  outline: "none",
+  padding: "1.25rem",
+  width: "100%"
+};
+function assignRef(ref, value) {
+  if (typeof ref === "function") {
+    ref(value);
+    return;
+  }
+  if (ref && "current" in ref) {
+    ref.current = value;
+  }
+}
+var DialogBase = forwardRef3(
+  ({
+    ariaDescribedBy,
+    ariaLabel,
+    ariaLabelledBy,
+    children,
+    className,
+    closeOnEscape = true,
+    closeOnInteractOutside = true,
+    initialFocusRef,
+    onOpenChange,
+    open,
+    ...rest
+  }, ref) => {
+    const fallbackFocusRef = useRef(null);
+    const generatedLabelId = useId();
+    const lastActiveElementRef = useRef(null);
+    useEffect(() => {
+      if (!open || typeof document === "undefined") {
+        return;
+      }
+      lastActiveElementRef.current = document.activeElement;
+      const target = initialFocusRef?.current ?? fallbackFocusRef.current;
+      target?.focus();
+      return () => {
+        if (lastActiveElementRef.current instanceof HTMLElement) {
+          lastActiveElementRef.current.focus();
+        }
+      };
+    }, [initialFocusRef, open]);
+    useEffect(() => {
+      if (!open || !closeOnEscape || typeof document === "undefined") {
+        return;
+      }
+      const handleKeyDown = (event) => {
+        if (event.key === "Escape") {
+          onOpenChange?.(false);
+        }
+      };
+      document.addEventListener("keydown", handleKeyDown);
+      return () => {
+        document.removeEventListener("keydown", handleKeyDown);
+      };
+    }, [closeOnEscape, onOpenChange, open]);
+    if (!open) {
+      return null;
+    }
+    const labelId = ariaLabel ? void 0 : ariaLabelledBy ?? generatedLabelId;
+    const handleOverlayKeyDown = (event) => {
+      if (event.key === "Escape" && closeOnEscape) {
+        event.stopPropagation();
+        onOpenChange?.(false);
+      }
+    };
+    return /* @__PURE__ */ jsx2(Portal, { children: /* @__PURE__ */ jsx2(
+      Box,
+      {
+        "aria-hidden": false,
+        onClick: closeOnInteractOutside ? () => {
+          onOpenChange?.(false);
+        } : void 0,
+        onKeyDown: handleOverlayKeyDown,
+        style: overlayStyle,
+        children: /* @__PURE__ */ jsxs2(
+          Box,
+          {
+            ...rest,
+            "aria-describedby": ariaDescribedBy,
+            "aria-label": ariaLabel,
+            "aria-labelledby": labelId,
+            "aria-modal": "true",
+            className,
+            onClick: (event) => {
+              event.stopPropagation();
+            },
+            ref: (node) => {
+              fallbackFocusRef.current = node;
+              assignRef(ref, node);
+            },
+            role: "dialog",
+            style: dialogStyle,
+            tabIndex: -1,
+            children: [
+              !ariaLabel && !ariaLabelledBy ? /* @__PURE__ */ jsx2("div", { id: generatedLabelId, style: { display: "none" }, children: "Dialog" }) : null,
+              children
+            ]
+          }
+        )
+      }
+    ) });
+  }
+);
+DialogBase.displayName = "DialogBase";
+
+// src/InputBase.tsx
+import { forwardRef as forwardRef4 } from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var inputBaseStyle = {
+  appearance: "none",
+  background: `var(${primitiveVars.surface})`,
+  border: `1px solid var(${primitiveVars.borderColor})`,
+  borderRadius: `var(${primitiveVars.radius})`,
+  color: `var(${primitiveVars.foreground})`,
+  font: "inherit",
+  minHeight: "2.5rem",
+  outline: "none",
+  padding: "0.625rem 0.875rem",
+  width: "100%"
+};
+var InputBase = forwardRef4(
+  ({ className, invalid = false, style, ...rest }, ref) => /* @__PURE__ */ jsx3(
+    "input",
+    {
+      ...rest,
+      "aria-invalid": invalid || rest["aria-invalid"] ? true : void 0,
+      className,
+      ref,
+      style: {
+        ...inputBaseStyle,
+        borderColor: invalid ? `var(${primitiveVars.dangerColor})` : `var(${primitiveVars.borderColor})`,
+        boxShadow: invalid ? `0 0 0 3px color-mix(in srgb, var(${primitiveVars.dangerColor}) 16%, transparent)` : void 0,
+        ...style
+      }
+    }
+  )
+);
+InputBase.displayName = "InputBase";
+
+// src/Stack.tsx
+import {
+  forwardRef as forwardRef5
+} from "react";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var StackImpl = ({
+  align,
+  as,
+  children,
+  className,
+  direction = "column",
+  gap = "var(--cortexui-spacing)",
+  justify,
+  style,
+  ...rest
+}, ref) => {
+  const stackStyle = {
+    alignItems: align,
+    display: "flex",
+    flexDirection: direction,
+    gap,
+    justifyContent: justify,
+    ...style
+  };
+  return /* @__PURE__ */ jsx4(
+    Box,
+    {
+      ...rest,
+      as,
+      className,
+      ref,
+      style: stackStyle,
+      children
+    }
+  );
+};
+var StackWithRef = forwardRef5(StackImpl);
+StackWithRef.displayName = "Stack";
+var Stack = StackWithRef;
+
+// src/Text.tsx
+import {
+  forwardRef as forwardRef6
+} from "react";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var textToneStyles = {
+  default: {
+    color: `var(${primitiveVars.foreground})`
+  },
+  muted: {
+    color: `var(${primitiveVars.mutedForeground})`
+  },
+  danger: {
+    color: `var(${primitiveVars.dangerColor})`
+  },
+  success: {
+    color: `var(${primitiveVars.successColor})`
+  }
+};
+var TextImpl = ({
+  as,
+  children,
+  className,
+  style,
+  tone = "default",
+  visuallyHidden = false,
+  ...rest
+}, ref) => /* @__PURE__ */ jsx5(
+  Box,
+  {
+    ...rest,
+    as: as ?? "span",
+    className,
+    ref,
+    style: {
+      fontFamily: "inherit",
+      lineHeight: 1.5,
+      margin: 0,
+      ...textToneStyles[tone],
+      ...visuallyHidden ? visuallyHiddenStyle : void 0,
+      ...style
+    },
+    children
+  }
+);
+var TextWithRef = forwardRef6(TextImpl);
+TextWithRef.displayName = "Text";
+var Text = TextWithRef;
+
+// src/index.ts
+import { colorTokens as colorTokens2 } from "@domglyph/tokens";
+var primitiveSurface = {
+  id: "surface",
+  tokenNamespace: colorTokens2.name
+};
+export {
+  Box,
+  ButtonBase,
+  DialogBase,
+  InputBase,
+  Portal,
+  Stack,
+  Text,
+  primitiveSurface,
+  primitiveTheme,
+  primitiveVars
+};

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@domglyph/primitives",
+  "version": "2.0.0",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "@domglyph/tokens": "2.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "tsup": "^8.5.1"
+  },
+  "scripts": {
+    "build": "tsup src/index.ts --format esm --dts --clean",
+    "dev": "tsup src/index.ts --format esm --dts --watch",
+    "lint": "eslint src --ext .ts,.tsx",
+    "test": "vitest run --passWithNoTests",
+    "typecheck": "tsc -b"
+  }
+}