raystack · ravisuhag · Jul 12, 2026 · Jul 12, 2026 · Jul 12, 2026 · Jul 12, 2026
diff --git a/.eslintrc.js b/.eslintrc.js
diff --git a/.eslintrs.js b/.eslintrs.js
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -222,10 +222,10 @@ Apsara follows an automated release process using GitHub Actions and semantic ve
    # Ensure you're on the correct branch
    git checkout main  # for production release
    # OR
-   git checkout develop  # for release candidate
+   git checkout release/x.y  # for release candidate
 
    # Pull latest changes
-   git pull origin main  # or develop
+   git pull origin main  # or the release branch
-   git checkout release/x.y  # for release candidate
-   
-   # Pull latest changes
-   git pull origin main  # or develop
-   git pull origin main  # or the release branch
+   git checkout release/x.y  # for release candidate
+   
+   # Pull latest changes
+   git pull origin main  # for production release
+   # OR
+   git pull origin release/x.y  # for release candidate
-   git checkout release/x.y  # for release candidate
-   
-   # Pull latest changes
-   git pull origin main  # or develop
-   git pull origin main  # or the release branch
+   git checkout release/x.y  # for release candidate
+   
+   # Pull latest changes
+   git pull origin main  # for production release
+   # OR
+   git pull origin release/x.y  # for release candidate
    ```
 
 2. **Create and push a tag**:
@@ -255,7 +255,7 @@ The release process includes these automated steps:
 3. **Install** dependencies
 4. **Build** the library using `pnpm ci:build`
 5. **Bump version** in package.json based on the git tag
-6. **Publish** to NPM using `release-it`
+6. **Publish** to NPM using `pnpm publish` (both `@raystack/apsara` and `@raystack/tools-config`)
 7. **Generate** GitHub release notes
 
 ### NPM Publishing

diff --git a/DEVELOPMENT.md b/DEVELOPMENT.md
@@ -83,10 +83,9 @@ apsara/
 ├── apps/
 │   ├── www/                    # Documentation website (Fumadocs)
 ├── packages/
-│   ├── eslint-config-custom/   # Shared ESLint configuration
 │   ├── plugin-vscode/          # VS Code extension for Apsara
 │   ├── raystack/              # Main Apsara component library
-│   └── tsconfig/              # Shared TypeScript configurations
+│   └── tools-config/          # Shared Biome and TypeScript configurations
 ├── .github/
 │   └── workflows/             # GitHub Actions for CI/CD
 ├── pnpm-workspace.yaml        # pnpm workspace configuration
@@ -277,14 +276,7 @@ Configuration files:
 
 ### Common Issues
 
-1. **ESLint Configuration Errors**:
-   ```bash
-   # If you encounter ESLint parsing errors
-   # The build process will still work, but linting may fail
-   # This is a known configuration issue with the current setup
-   ```
-
-2. **Node.js Version Issues**:
+1. **Node.js Version Issues**:
    ```bash
    # Ensure you're using Node.js 22+
    node --version
@@ -293,7 +285,7 @@ Configuration files:
    nvm use 22
    ```
 
-3. **pnpm Version Issues**:
+2. **pnpm Version Issues**:
    ```bash
    # Ensure you're using the correct pnpm version
    pnpm --version
@@ -302,7 +294,7 @@ Configuration files:
    npm install -g pnpm@9.3.0
    ```
 
-4. **Build Failures**:
+3. **Build Failures**:
    ```bash
    # Clean and reinstall if builds fail
    pnpm clean
@@ -311,7 +303,7 @@ Configuration files:
    pnpm build:apsara
    ```
 
-5. **Test Failures**:
+4. **Test Failures**:
    ```bash
    # Some tests may be failing in the current codebase
    # Focus on not introducing new test failures

diff --git a/apps/www/src/components/playground/otp-field-examples.tsx b/apps/www/src/components/playground/otp-field-examples.tsx
@@ -26,6 +26,27 @@ function ControlledOTP() {
   );
 }
 
+function InvalidOTP() {
+  const [error, setError] = useState<string>();
+  return (
+    <Field
+      label='Verification code'
+      description='The correct code is 123456.'
+      error={error}
+    >
+      <OTPField
+        length={6}
+        onValueChange={() => setError(undefined)}
+        onValueComplete={value => {
+          if (value !== '123456') setError('Incorrect code. Try again.');
+        }}
+      >
+        {renderSlots(6)}
+      </OTPField>
+    </Field>
+  );
+}
+
 function CompleteOTP() {
   const [submitted, setSubmitted] = useState('');
   return (
@@ -93,6 +114,11 @@ export function OTPFieldExamples() {
         <CompleteOTP />
       </Flex>
 
+      <Flex direction='column' gap={9}>
+        <Text>Invalid (a wrong code shakes):</Text>
+        <InvalidOTP />
+      </Flex>
+
       <Flex direction='column' gap={9}>
         <Text>Disabled:</Text>
         <OTPField length={6} disabled defaultValue='123'>

diff --git a/packages/raystack/.np-config.json b/packages/raystack/.np-config.json
diff --git a/packages/raystack/README.md b/packages/raystack/README.md
@@ -1,123 +1,66 @@
-# Apsara
+# Apsara 🧚‍♀️
 
-[![License](https://img.shields.io/badge/License-Apache%202.0-blue.svg?logo=apache)](LICENSE) [![Formatted with Biome](https://img.shields.io/badge/Formatted_with-Biome-60a5fa?style=flat&logo=biome)](https://biomejs.dev/) [![Linted with Biome](https://img.shields.io/badge/Linted_with-Biome-60a5fa?style=flat&logo=biome)](https://biomejs.dev) [![Checked with Biome](https://img.shields.io/badge/Checked_with-Biome-60a5fa?style=flat&logo=biome)](https://biomejs.dev)
+[![npm version](https://img.shields.io/npm/v/@raystack/apsara?logo=npm&color=cb3837)](https://www.npmjs.com/package/@raystack/apsara)
+[![License](https://img.shields.io/badge/License-Apache%202.0-blue.svg?logo=apache)](LICENSE)
+[![Biome](https://img.shields.io/badge/Biome-60a5fa?logo=biome&logoColor=white)](https://biomejs.dev/)
 
-Apsara 🧚‍♀️ is an open-source React UI component library built on Base UI primitives. It provides enterprise-grade, accessible components designed for building complex data interfaces.
+Apsara is an open-source React component library for building accessible, data-heavy interfaces. It is built on [Base UI](https://base-ui.com/) primitives and written in TypeScript.
 
-<p align="center"><img width=80% src="./apps/www/public/banner.png" /></p>
-
-## Key Features
-
-- **Accessible Components**: Built on Base UI primitives ensuring ARIA compliance and keyboard navigation
-- **Flexible Styling**: Uses vanilla CSS with HTML data-attributes for powerful theming and style customization
-- **Enterprise Ready**: Designed for complex data-driven applications with components like:
-  - Data Tables
-  - Navigation Systems
-  - Form Controls
-  - Feedback Components
-- **Type Safe**: Written in TypeScript with comprehensive type definitions
-- **Modern Stack**: Support for React 18+ and modern development practices
-
-## Installation
+## Install
 
 ```sh
 npm install @raystack/apsara
 # or
 pnpm add @raystack/apsara
 ```
 
+Requires React 19.
+
 ## Usage
 
 ```jsx
-// Add Style import in the root of the project.
+// Import the styles once, at the root of your app.
 import "@raystack/apsara/style.css";
 
-// Import components
 import { Button, Flex } from "@raystack/apsara";
 
-function App() {
+export default function App() {
   return (
     <Flex>
-      <Button type="primary">I am using 🧚‍♀️ Apsara!</Button>
+      <Button variant="solid">Hello from Apsara 🧚‍♀️</Button>
     </Flex>
   );
 }
 ```
 
-## Component Categories
-
-### Layout
-
-- `Box` - Basic layout container
-- `Flex` - Flexbox container
-- `Container` - Responsive wrapper
-- `Sidebar` - Collapsible navigation panel
-
-### Navigation
-
-- `Breadcrumb` - Navigation breadcrumbs
-- `Tabs` - Tabbed interface
-- `Command` - Command palette interface
-
-### Data Display
-
-- `Table` - Data table component
-- `Avatar` - User avatar display
-- `Badge` - Status indicators
-- `EmptyState` - Empty state messaging
-
-### Forms
+Icons and hooks ship as separate entry points:
 
-- `Select` - Dropdown selection
-- `Radio` - Radio button groups
-- `IconButton` - Icon-only buttons
-
-### Feedback
-
-- `Tooltip` - Contextual tooltips
-- `Callout` - Informational callouts
-- `Indicator` - Status indicators
-
-### Overlay
+```jsx
+import { ChevronDownIcon } from "@raystack/apsara/icons";
+import { useCopyToClipboard } from "@raystack/apsara/hooks";
+```
 
-- `Popover` - Contextual overlays
-- `Drawer` - Slide-out panels with swipe-to-dismiss
-- `Dialog` - Modal dialogs
+## What's inside
 
-## Documentation
+Over 70 components, styled with plain CSS and `data-*` attributes so you can theme them with CSS variables. A few highlights:
 
-Visit our [documentation site](https://apsara.raystack.org) for:
+- **Layout** — Box, Flex, Grid, Container, Sidebar, ScrollArea
+- **Navigation** — Tabs, Breadcrumb, Command, Menu, Navbar, Toolbar
+- **Data** — Table, DataTable, DataView, Avatar, Badge, Chip, Meter
+- **Forms** — Input, Select, Combobox, Checkbox, Radio, Switch, Slider, Calendar, ColorPicker
+- **Feedback** — Toast, Tooltip, Callout, Spinner, Indicator
+- **Overlay** — Dialog, Popover, Drawer, ContextMenu
 
-- Interactive examples
-- API references
-- Theme customization
-- Accessibility guidelines
-- Migration guides
+See the [documentation site](https://apsara.raystack.org) for the full list, live examples, and API references.
 
 ## Contributing
 
-We welcome contributions! Here's how you can help:
-
-1. Fork the repository
-2. Create your feature branch (`git checkout -b feature/amazing-feature`)
-3. Commit your changes (`git commit -m 'feat: add amazing feature'`)
-4. Push to the branch (`git push origin feature/amazing-feature`)
-5. Open a Pull Request
-
-### Development Setup
+Contributions are welcome. See [CONTRIBUTING.md](./CONTRIBUTING.md) for the workflow and [DEVELOPMENT.md](./DEVELOPMENT.md) for local setup.
 
 ```sh
-# Install dependencies
-pnpm install
-
-# Start development server
-pnpm dev
-
-# Run tests
-pnpm test
-
-# Build library
-pnpm build
+pnpm install   # install dependencies
+pnpm start     # run the library and docs site
+pnpm test      # run tests
 ```
 
 ## License

diff --git a/packages/raystack/components/accordion/accordion.module.css b/packages/raystack/components/accordion/accordion.module.css
@@ -31,11 +31,20 @@
   border-top: none;
 }
 
-.accordion-trigger:hover,
-.accordion-trigger:focus-visible {
+.accordion-trigger:hover {
   background-color: var(--rs-color-background-base-primary-hover);
 }
 
+/* Trigger sits flush in a clipped container: keep the ring inside. */
+.accordion-trigger:focus-visible {
+  outline: var(--rs-focus-ring);
+  outline-offset: var(--rs-focus-ring-offset-inset);
+}
+
+.accordion-trigger:active:not(:disabled) {
+  background-color: var(--rs-color-background-neutral-secondary);
+}
+
 .accordion-trigger:disabled {
   pointer-events: none;
   opacity: 0.5;
@@ -80,10 +89,14 @@
 
 @media (prefers-reduced-motion: no-preference) {
   .accordion-icon {
-    transition: transform 150ms ease-in-out;
+    transition: transform var(--rs-duration-fast) var(--rs-ease-in-out);
   }
 
   .accordion-content {
-    transition: height 150ms ease-out;
+    transition: height var(--rs-duration-fast) var(--rs-ease-out);
+  }
+
+  .accordion-trigger {
+    transition: var(--rs-transition-interactive);
   }
 }
diff --git a/packages/raystack/components/amount/amount.module.css b/packages/raystack/components/amount/amount.module.css
@@ -0,0 +1,3 @@
+.amount {
+  font-variant-numeric: tabular-nums;
+}
diff --git a/packages/raystack/components/amount/amount.tsx b/packages/raystack/components/amount/amount.tsx
@@ -1,4 +1,6 @@
+import { cx } from 'class-variance-authority';
 import { type ComponentProps } from 'react';
+import styles from './amount.module.css';
 
 export interface AmountProps extends ComponentProps<'span'> {
   /**
@@ -167,6 +169,7 @@ export const Amount = ({
   groupDigits = true,
   valueInMinorUnits = true,
   hideCurrency = false,
+  className,
   ...props
 }: AmountProps) => {
   try {
@@ -265,10 +268,18 @@ export const Amount = ({
           finalBaseValue
         );
 
-    return <span {...props}>{formattedValue}</span>;
+    return (
+      <span {...props} className={cx(styles.amount, className)}>
+        {formattedValue}
+      </span>
+    );
   } catch (error) {
     console.error('Error formatting amount:', error);
-    return <span {...props}>{String(value)}</span>;
+    return (
+      <span {...props} className={cx(styles.amount, className)}>
+        {String(value)}
+      </span>
+    );
   }
 };