Release notes

Dialog Add DialogHeader, with a start slot for an icon, badge or tag before the title. DialogFooter now takes cancel and action as a label or button props; an async action shows loading and closes the dialog when it resolves

Add useControllableState and useDisclosure, re-exported from @anantya/core, so apps import every documented hook from @anantya/uix. cn() now merges px-gutter, and keeps a name the theme doesn't have, such as text-caption, instead of letting it replace a color

ThemeProvider Give links without a tabindex a tabindex="0", so Tab reaches them in Safari too; tabbableLinks={false} turns this off. @anantya/uix/theme.css also adds the container utility and the gutter spacing behind its side padding

No change for uix users: the new @anantya/icons version only adds icons

Uses @anantya/icons 0.2.0

Add ArrowLeft, ArrowRight, ArrowUp, ArrowDown, ChevronLeft, ChevronRight, ChevronUp, ChevronDown, Menu, Add, Edit, Trash, Search, Filter, Upload, Download, CheckCircle, AlertTriangle, Info, XCircle, Eye, EyeOff, User, Calendar, Phone, MapPin, Bell and Settings, completing the 34-icon starter set

Button Add Button and IconButton: five variants (primary, secondary, ghost, danger, link), sizes sm (32px) and md (36px), an optional icon, a loading state that keeps focus and blocks clicks, and asChild to style a link as a button. IconButton is square and needs an aria-label. class-variance-authority is a dependency

CopyButton Add CopyButton: an IconButton that copies value, shows a check for 2 seconds and announces "Copied", or "Copy failed", to screen readers. onCopy reports each result

Dialog Add Dialog with DialogTrigger, DialogContent, DialogTitle, DialogDescription, DialogBody, DialogFooter and DialogClose: a modal on <dialog> that keeps focus inside, closes on Esc or a backdrop click and returns focus to its trigger, in sizes sm, md, lg and full. useEscapeKey now calls preventDefault() on the Escape press it handles

Switch Add Switch: an on/off toggle for one setting, built on a checkbox input with role="switch", so it works with labels, forms and form libraries. Control it with checked and onCheckedChange, or start it with defaultChecked; sizes are sm and md

ThemeToggle Add ThemeToggle: an IconButton that switches between the light and dark theme, showing a sun or a moon. ThemeProvider's setTheme now cross-fades the page with View Transitions, unless the user prefers reduced motion. @anantya/icons is a dependency

ClientOnly Add ClientOnly, which renders its children only in the browser, and fallback on the server and during hydration, for content such as canvas charts

cn Add cn(), which joins class names with clsx and resolves conflicting Tailwind classes, UIX's tokens included, with tailwind-merge, so a className passed last wins. clsx and tailwind-merge are dependencies

FocusTrap Add FocusTrap, which keeps keyboard focus inside its container while active, for modal content: it focuses the right element on activation, wraps Tab and Shift+Tab, and returns focus when it deactivates. Nested traps hand focus back in order

LiveRegion Add LiveRegion and announce(), which announce changes such as toasts and "Copied" to screen readers, politely by default. Mount LiveRegion once at the app root

Portal Add Portal, which renders its children into document.body, or a given container, while they keep their React context. react-dom is a peer dependency

Slot Add Slot, which renders its one child in place of its own element and merges its props onto it, so components can take asChild. react is a peer dependency

ThemeProvider Add ThemeProvider and useTheme(): a light, dark or system theme for the whole app, set as the .dark class on <html> before the first paint and saved in localStorage. It also renders a LiveRegion. @anantya/core is a dependency

theme Add @anantya/uix/theme, which re-exports defineTheme and themeOverrideCss, and @anantya/uix/theme.css, which loads the tokens and the components' classes with one @import. tailwindcss is a peer dependency

useClickOutside Add useClickOutside(refs, handler, { enabled }), which calls handler when the user clicks outside the given elements, for closing popups; with nested popups only the topmost one closes

useCopyToClipboard Add useCopyToClipboard({ timeout }), which copies text with the Clipboard API and returns copy, copied and error, for copy buttons

useEscapeKey Add useEscapeKey(handler, { enabled }), which calls handler when Escape is pressed; with nested popups only the topmost one closes

useMediaQuery Add useMediaQuery(query, { defaultValue }), which returns whether the page matches a media query and updates when that changes; it returns defaultValue until hydration is done

VisuallyHidden Add VisuallyHidden, which hides its content on screen but keeps it for screen readers, such as an icon-only button's label

cn cn() resolves conflicts between every ease-* class the theme defines, such as UIX's ease-enter and ease-move, not only ease-in, ease-out and ease-in-out

Uses @anantya/core 0.1.0 and @anantya/tokens 0.1.0

Add Copy, Check, Close, Sun, Moon and Monitor

Add the API every icon follows: size 16, 20 or 24 (20 by default), drawn in currentColor, and decorative unless title, aria-label or aria-labelledby names it

Add defineTheme(): typed project overrides for colors, fonts, shadows and other tokens, checked when the theme is defined, with a brand shortcut that fills the primary colors from one palette. themeOverrideCss() and themeOverrideNative() apply them on web and native

Add themeNative() and @anantya/tokens/native-theme: light and dark themes for React Native, generated from the same tokens, with hex colors, numbers instead of rem and native shadow props

Add hover and pressed colors for secondary and danger, an overlay color for modal backdrops, and the ease-enter and ease-move curves, on web, on native and in defineTheme(). Text on every hover and pressed color passes WCAG AA

Add themeCss() and @anantya/tokens/theme.css: a generated Tailwind v4 @theme with the semantic colors, fonts, z-index layers and durations, dark colors in .dark, and dark: utilities that follow the .dark class

Add the design tokens: semantic colors (blue-600 primary) pointing to Tailwind v4 primitives, fonts, shadows, z-index layers and durations

defineTheme() brand red, fuchsia, pink and rose use link 700 in light mode, since 600 on their own 50 (primary-subtle) is below 4.5:1

useControllableState Add useControllableState(): state a parent can control with value and onValueChange, or leave to the hook with defaultValue. Its setter works like useState's in both modes and keeps its identity across renders

useCopyState Add useCopyState(): copy-button state for web and native. The platform passes in write and gets back copy(text), copied (true for 2 seconds by default) and error; copy never rejects

useDisclosure Add useDisclosure(): open state with onOpen, onClose, onToggle and setOpen, controlled with open and onOpenChange or uncontrolled with defaultOpen

useThemeMode Add useThemeMode(): light, dark or system theme state for web and native. The platform passes in the OS color scheme and a storage object; the saved choice is read after hydration, so the server and client HTML match