@chassis-ui/react 0.0.0-20260831090525

package/src/index.ts

@@ -0,0 +1,276 @@
+'use client'
+
+// Side-effect only: installs the single document-level pointerdown listener that works around the
+// browser's `:focus-visible` first-click heuristic misfire — see the module's own comment. Needs to
+// run once wherever this package is used, not per-component, so it's imported here rather than
+// from any individual component.
+import './utils/suppressFocusRingGlobally'
+
+import { Accordion, AccordionBody, AccordionHeader, AccordionItem } from './components/accordion'
+import { Autocomplete, AutocompleteGroup, AutocompleteItem } from './components/autocomplete'
+import { Avatar, AvatarImage, AvatarStack } from './components/avatar'
+import {
+  Notification,
+  NotificationTitle,
+  NotificationIcon,
+  NotificationText,
+  NotificationStack,
+  addNotification,
+  closeNotification,
+  notificationQueue
+} from './components/notification'
+import { Badge } from './components/badge'
+import { Breadcrumb, BreadcrumbItem } from './components/breadcrumb'
+import { Button } from './components/button'
+import { ButtonGroup, ButtonToolbar } from './components/button-group'
+import { Calendar, RangeCalendar } from './components/calendar'
+import {
+  Card,
+  CardBody,
+  CardFooter,
+  CardGroup,
+  CardHeader,
+  CardImage,
+  CardImageOverlay,
+  CardLink,
+  CardSubtitle,
+  CardText,
+  CardTitle
+} from './components/card'
+import {
+  Carousel,
+  CarouselControlNext,
+  CarouselControlPrev,
+  CarouselIndicators,
+  CarouselInner,
+  CarouselItem,
+  CarouselOverlay,
+  CarouselPlayPause
+} from './components/carousel'
+import { Collapse } from './components/collapse'
+import { ChipInput } from './components/chip-input'
+import { CloseButton } from './components/close-button'
+import { ColorInput } from './components/color-input'
+import { FileInput } from './components/file-input'
+import { Combobox, ComboboxGroup, ComboboxItem } from './components/combobox'
+import { DatePicker, DateRangePicker } from './components/datepicker'
+import { OtpInput } from './components/otp-input'
+import { PasswordStrength } from './components/password-strength'
+import { I18nProvider } from 'react-aria'
+import {
+  Menu,
+  MenuDivider,
+  MenuHeader,
+  MenuItem,
+  MenuList,
+  MenuText,
+  MenuToggle,
+  MenuSubmenu,
+  MenuSubmenuBack
+} from './components/menu'
+import { Col, Container, Grid, GridItem, Row } from './components/grid'
+import { Checkbox, CheckboxGroup } from './components/checkbox'
+import { Form, FormFeedback, FormHelp, FormLabel } from './components/form'
+import { FloatingInput } from './components/floating-input'
+import { FormField } from './components/form-field'
+import { InputGroup, InputGroupAddon } from './components/input-group'
+import { InputAdorn } from './components/input-adorn'
+import { Radio, RadioGroup } from './components/radio'
+import { RangeInput } from './components/range-input'
+import { Select } from './components/select'
+import { Switch } from './components/switch'
+import { TextInput } from './components/text-input'
+import { Textarea } from './components/textarea'
+import { Icon } from './components/icon'
+import { Placeholder } from './components/placeholder'
+import { Link } from './components/link'
+import { List, ListItem } from './components/list'
+import { Modal, ModalBody, ModalFooter, ModalHeader, ModalTitle } from './components/modal'
+import { Nav, NavItem, NavLink, NavTitle } from './components/nav'
+import { Navbar, NavbarBrand, NavbarNav, NavbarText, NavbarToggler } from './components/navbar'
+import { Pagination, PaginationItem } from './components/pagination'
+import { Popover } from './components/popover'
+import { Progress, ProgressBar } from './components/progress'
+import { Drawer, DrawerBody, DrawerFooter, DrawerHeader, DrawerTitle } from './components/drawer'
+import { Skeleton, SkeletonLoader } from './components/skeleton'
+import { Spinner } from './components/spinner'
+import { Stepper, StepperItem } from './components/stepper'
+import { Table, TableBody, TableCell, TableColumn, TableHeader, TableRow } from './components/table'
+import { Tabs, Tab, TabList, TabPanel } from './components/tabs'
+import {
+  Toast,
+  ToastBody,
+  ToastFooter,
+  ToastHeader,
+  ToastIcon,
+  Toaster,
+  addToast,
+  closeToast,
+  toastQueue
+} from './components/toast'
+import { Tooltip } from './components/tooltip'
+import { useDrawer, useModal, useNotification, usePagination, useToast } from './hooks'
+import { Chip } from './components/chip'
+import { Flex } from './components/flex'
+import { Stack } from './components/stack'
+
+export {
+  Chip,
+  Flex,
+  Stack,
+  Accordion,
+  AccordionBody,
+  AccordionHeader,
+  AccordionItem,
+  Autocomplete,
+  AutocompleteGroup,
+  AutocompleteItem,
+  Avatar,
+  AvatarImage,
+  AvatarStack,
+  Notification,
+  NotificationTitle,
+  NotificationIcon,
+  NotificationText,
+  NotificationStack,
+  addNotification,
+  closeNotification,
+  notificationQueue,
+  useNotification,
+  Badge,
+  Breadcrumb,
+  BreadcrumbItem,
+  Button,
+  ButtonGroup,
+  ButtonToolbar,
+  Calendar,
+  RangeCalendar,
+  Card,
+  CardBody,
+  CardFooter,
+  CardGroup,
+  CardHeader,
+  CardImage,
+  CardImageOverlay,
+  CardLink,
+  CardSubtitle,
+  CardText,
+  CardTitle,
+  Carousel,
+  CarouselControlNext,
+  CarouselControlPrev,
+  CarouselIndicators,
+  CarouselInner,
+  CarouselItem,
+  CarouselOverlay,
+  CarouselPlayPause,
+  ChipInput,
+  CloseButton,
+  Collapse,
+  ColorInput,
+  Combobox,
+  ComboboxGroup,
+  ComboboxItem,
+  DatePicker,
+  DateRangePicker,
+  FileInput,
+  // Re-exported (not a component from this package): react-aria is a bundled dependency, not a
+  // peer, so its module — including the `I18nProvider` context `DatePicker` reads locale from via
+  // `useLocale()` — is inlined into this package's own build output, distinct from any react-aria
+  // copy a consumer might separately install. A consumer's own `<I18nProvider>` would set a
+  // *different* context instance and silently have no effect on `DatePicker`; this re-export is
+  // the one that actually reaches it.
+  I18nProvider,
+  OtpInput,
+  PasswordStrength,
+  Menu,
+  MenuDivider,
+  MenuHeader,
+  MenuItem,
+  MenuList,
+  MenuText,
+  MenuToggle,
+  MenuSubmenu,
+  MenuSubmenuBack,
+  Col,
+  Container,
+  Grid,
+  GridItem,
+  Row,
+  Checkbox,
+  CheckboxGroup,
+  FloatingInput,
+  Form,
+  FormField,
+  FormFeedback,
+  FormHelp,
+  FormLabel,
+  Icon,
+  Placeholder,
+  InputGroup,
+  InputGroupAddon,
+  InputAdorn,
+  Link,
+  List,
+  ListItem,
+  Modal,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  ModalTitle,
+  useModal,
+  Nav,
+  NavItem,
+  NavLink,
+  NavTitle,
+  Navbar,
+  NavbarBrand,
+  NavbarNav,
+  NavbarText,
+  NavbarToggler,
+  Pagination,
+  PaginationItem,
+  usePagination,
+  Popover,
+  Progress,
+  ProgressBar,
+  Radio,
+  RadioGroup,
+  RangeInput,
+  Drawer,
+  DrawerBody,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+  useDrawer,
+  Select,
+  Skeleton,
+  SkeletonLoader,
+  Spinner,
+  Stepper,
+  StepperItem,
+  Switch,
+  Table,
+  TableBody,
+  TableCell,
+  TableColumn,
+  TableHeader,
+  TableRow,
+  Tabs,
+  Tab,
+  TabList,
+  TabPanel,
+  TextInput,
+  Textarea,
+  Toast,
+  ToastBody,
+  ToastFooter,
+  ToastHeader,
+  ToastIcon,
+  Toaster,
+  addToast,
+  closeToast,
+  toastQueue,
+  useToast,
+  Tooltip
+}

package/src/types.ts

@@ -0,0 +1,133 @@
+/**
+ * Breakpoints
+ */
+export type Breakpoint = 'small' | 'medium' | 'large' | 'xlarge' | '2xlarge'
+
+/**
+ * Context colors
+ */
+export type ContextColor =
+  | 'default'
+  | 'alternate'
+  | 'primary'
+  | 'secondary'
+  | 'neutral'
+  | 'success'
+  | 'danger'
+  | 'warning'
+  | 'info'
+  | 'black'
+  | 'white'
+
+/**
+ * Context styles
+ */
+export type ContextStyle = 'basic' | 'solid' | 'outline' | 'smooth'
+
+/**
+ * Component sizes
+ */
+export type Sizing = 'small' | 'medium' | 'large'
+
+/**
+ * Extended sizes
+ */
+export type ExtendedSizing = '2xsmall' | 'xsmall' | Sizing | 'xlarge' | '2xlarge'
+
+/**
+ * Spacing values. `SPACING` is the runtime source of truth — `Spacing` is derived from it so the
+ * two can't drift apart; anything needing the values at runtime (e.g. validating a string against
+ * the scale) should import `SPACING`, not hand-copy the list.
+ */
+export const SPACING = [
+  'zero',
+  '4xsmall',
+  '3xsmall',
+  '2xsmall',
+  'xsmall',
+  'small',
+  'medium',
+  'large',
+  'xlarge',
+  '2xlarge',
+  '3xlarge',
+  '4xlarge',
+  '5xlarge',
+  '6xlarge'
+] as const
+
+export type Spacing = (typeof SPACING)[number]
+
+/**
+ * Font families
+ */
+export type FontFamily = 'text' | 'display' | 'code' | 'html'
+
+/**
+ * Font weights
+ */
+export type FontWeight = 'elegant' | 'normal' | 'strong' | 'mass'
+
+/**
+ * Font sizes
+ */
+export type FontSize =
+  | '2xsmall'
+  | 'xsmall'
+  | 'small'
+  | 'medium'
+  | 'large'
+  | 'xlarge'
+  | '2xlarge'
+  | '3xlarge'
+  | '4xlarge'
+  | '5xlarge'
+
+/**
+ * Component placements
+ */
+export type Placements =
+  | 'auto'
+  | 'auto-start'
+  | 'auto-end'
+  | 'top-end'
+  | 'top'
+  | 'top-start'
+  | 'bottom-end'
+  | 'bottom'
+  | 'bottom-start'
+  | 'right-start'
+  | 'right'
+  | 'right-end'
+  | 'left-start'
+  | 'left'
+  | 'left-end'
+
+/**
+ * Component shapes
+ */
+export type Shapes =
+  | 'rounded'
+  | 'rounded-top'
+  | 'rounded-end'
+  | 'rounded-bottom'
+  | 'rounded-start'
+  | 'rounded-circle'
+  | 'rounded-pill'
+  | 'rounded-0'
+  | 'rounded-1'
+  | 'rounded-2'
+  | 'rounded-3'
+
+export type TextColor =
+  | ContextColor
+  | 'main'
+  | 'subtle'
+  | 'slight'
+  | 'solid'
+  | 'inverse'
+  | 'highlight'
+  | 'active'
+  | 'contrast'
+
+export type Triggers = 'hover' | 'focus' | 'click'

package/src/utils/breakpoints.ts

@@ -0,0 +1,43 @@
+import { Breakpoint } from '../types'
+
+// Mobile-first ascending order. Every responsive layout prop (`Flex`/`Stack`/`Row`/`Col`/
+// `Skeleton`'s `responsive`) keys its overrides by these literal chassis-css breakpoint names.
+export const BREAKPOINTS: Breakpoint[] = ['small', 'medium', 'large', 'xlarge', '2xlarge']
+
+// A column/width span: a track count, `'auto'` for a natural-width track, or `true` for the bare
+// (no explicit width) case. Shared by `Col` and `Skeleton`, both of which map it to the same
+// `col-{n}` / `col` chassis-css classes.
+export type Span = 'auto' | number | string | boolean
+
+/**
+ * Builds the class list for a component's base layout plus per-breakpoint overrides supplied via
+ * a `responsive` prop — the pattern shared by `Flex`, `Stack`, and (from Phase 2) `Row`/`Col`.
+ *
+ * `toClassNames` maps one breakpoint's layout value to class name fragments for a given prefix
+ * (`''` for the base/unprefixed case, `` `${breakpoint}:` `` otherwise). Falsy entries in its
+ * return value are fine — `classnames` drops them at the call site — so fields the layout object
+ * doesn't set can just map to `undefined`/`false`.
+ */
+export function buildResponsiveClassNames<TLayout>(
+  toClassNames: (layout: TLayout, prefix: string) => Array<string | false | null | undefined>,
+  base: TLayout,
+  responsive?: Partial<Record<Breakpoint, TLayout>>
+): Array<string | false | null | undefined> {
+  const responsiveClassNames = responsive
+    ? BREAKPOINTS.filter((bp) => responsive[bp]).flatMap((bp) =>
+        toClassNames(responsive[bp] as TLayout, `${bp}:`)
+      )
+    : []
+
+  return [...toClassNames(base, ''), ...responsiveClassNames]
+}
+
+export type FlexDirection = 'row' | 'column'
+
+// A `buildResponsiveClassNames` `toClassNames` fn for the `flex-row`/`flex-column` direction
+// toggle shared by `Card` and `CardBody`, both of which map a `direction` prop to the same
+// chassis-css class.
+export const flexDirectionClassNames = (
+  direction: FlexDirection | undefined,
+  prefix: string
+): Array<string | false | undefined> => [direction && `${prefix}flex-${direction}`]

package/src/utils/comboboxCollection.tsx

@@ -0,0 +1,152 @@
+import React, { ComponentType, ReactElement, ReactNode } from 'react'
+import { Item, Key, Section } from 'react-stately'
+
+import { ComboboxGroupProps } from '../components/combobox/ComboboxGroup'
+import { ComboboxItem, ComboboxItemProps } from '../components/combobox/ComboboxItem'
+import { MenuItemsDef } from '../components/menu/MenuItemDef'
+import { renderMenuItemContent } from './renderMenuItemContent'
+
+// Shared between Combobox.tsx/ComboboxListBox.tsx (which build/render this collection) and
+// Autocomplete.tsx (which reuses the same entry shape — see the comment on
+// `buildEntriesFromChildren` below). Lives in `utils/` rather than `components/combobox/` because
+// it crosses that folder boundary; kept in its own file to also avoid a circular import between
+// Combobox.tsx and ComboboxListBox.tsx.
+
+export type ComboboxItemElement = ReactElement<ComboboxItemProps>
+
+export interface ComboboxGroupEntry {
+  entryType: 'group'
+  key: Key
+  label: ReactNode
+  items: ComboboxItemElement[]
+}
+
+export type ComboboxEntry = ComboboxItemElement | ComboboxGroupEntry
+
+// `useComboBoxState`/`useComboBox`'s own `SelectionMode` ('single' | 'multiple') isn't
+// re-exported from react-stately's public entry point (only `ComboBoxState` etc. are) — this is
+// a structurally-identical stand-in so `ComboboxListBox` can stay generic over it without a
+// fragile deep import.
+export type ComboboxSelectionMode = 'single' | 'multiple'
+
+export const isComboboxGroupEntry = (entry: ComboboxEntry): entry is ComboboxGroupEntry =>
+  (entry as ComboboxGroupEntry).entryType === 'group'
+
+// `Autocomplete`'s own `AutocompleteItem`/`AutocompleteGroup` are structurally identical to
+// `ComboboxItem`/`ComboboxGroup` (see AutocompleteItem.tsx/AutocompleteGroup.tsx — kept as
+// separate named types only so `Autocomplete`'s public API doesn't leak `Combobox`'s own prop
+// type), but they're different *runtime* component identities, which is what
+// `buildEntriesFromChildren` below needs to check consumer-authored `children` against. Passing
+// the pair in lets one implementation serve both families instead of two near-duplicate copies.
+export interface ComboboxCollectionComponents {
+  Group: ComponentType<ComboboxGroupProps>
+  Item: ComponentType<ComboboxItemProps>
+}
+
+// Splits `children` into a flat, ordered list of entries — bare `Item` elements and
+// `Group`-wrapped clusters of them — mirroring how `useComboBoxState`'s dynamic collection needs
+// top-level nodes: some rendered as a plain `<Item>`, some as a `<Section>` wrapping several
+// `<Item>`s (see `comboboxCollectionChildren` below).
+export const buildEntriesFromChildren = (
+  children: ReactNode,
+  { Group, Item: ItemComponent }: ComboboxCollectionComponents
+): ComboboxEntry[] => {
+  const entries: ComboboxEntry[] = []
+  React.Children.forEach(children, (child, index) => {
+    if (!React.isValidElement(child)) return
+    if (child.type === Group) {
+      const groupProps = child.props as ComboboxGroupProps
+      const items: ComboboxItemElement[] = []
+      React.Children.forEach(groupProps.children, (groupChild) => {
+        if (React.isValidElement(groupChild) && groupChild.type === ItemComponent) {
+          items.push(groupChild as ComboboxItemElement)
+        }
+      })
+      entries.push({ entryType: 'group', key: `group-${index}`, label: groupProps.label, items })
+      return
+    }
+    if (child.type === ItemComponent) {
+      entries.push(child as ComboboxItemElement)
+    }
+  })
+  return entries
+}
+
+// Same shape as `buildEntriesFromChildren`, from a flat `MenuItemsDef` instead. A `'header'`
+// entry opens a new group that all following items join until the next header (or the end of
+// the array) — matching how chassis-css itself renders grouped items (flat siblings, no
+// wrapping element per group). `'divider'` entries aren't meaningful for a listbox/option
+// collection and are skipped.
+//
+// Always builds a bare `ComboboxItem` internally regardless of which family (`Combobox` or
+// `Autocomplete`) called it: unlike `buildEntriesFromChildren`, nothing downstream re-checks
+// these elements' runtime type (they're read only via `.props.*`, never matched against a
+// component reference again), so there's no need to thread `ComboboxCollectionComponents`
+// through here too. `def.href`/`def.onClick` are intentionally not read — see the doc comments on
+// `MenuItemDef` itself for why: they're `Menu`-only fields on this shared type.
+export const buildEntriesFromItemsDef = (defs: MenuItemsDef): ComboboxEntry[] => {
+  const entries: ComboboxEntry[] = []
+  let currentGroup: ComboboxGroupEntry | null = null
+
+  defs.forEach((def) => {
+    if (def.type === 'divider') return
+    if (def.type === 'header') {
+      currentGroup = { entryType: 'group', key: def.id, label: def.label, items: [] }
+      entries.push(currentGroup)
+      return
+    }
+    const item = (
+      <ComboboxItem
+        key={def.id}
+        id={def.id}
+        disabled={def.disabled}
+        icon={def.icon}
+        description={def.description}
+        textValue={def.textValue}
+      >
+        {def.label}
+      </ComboboxItem>
+    )
+    if (currentGroup) currentGroup.items.push(item)
+    else entries.push(item)
+  })
+
+  return entries
+}
+
+export const getDisabledKeys = (entries: ComboboxEntry[]): Key[] =>
+  entries.reduce<Key[]>((keys, entry) => {
+    const items = isComboboxGroupEntry(entry) ? entry.items : [entry]
+    return keys.concat(items.filter((item) => item.props.disabled).map((item) => item.props.id))
+  }, [])
+
+// Builds the react-stately `Item` node `useComboBoxState`'s collection actually renders from one
+// entry's props — identical for `Combobox` and `Autocomplete` regardless of which authoring
+// component (`ComboboxItem`/`AutocompleteItem`) produced it, since both share the same prop shape.
+export const renderComboboxCollectionItem = (item: ComboboxItemElement) => (
+  <Item
+    key={item.props.id}
+    textValue={
+      item.props.textValue ??
+      (typeof item.props.children === 'string' ? item.props.children : undefined)
+    }
+  >
+    {renderMenuItemContent({
+      icon: item.props.icon,
+      label: item.props.children,
+      description: item.props.description
+    })}
+  </Item>
+)
+
+// `useComboBoxState`'s own `children` render prop, given one `ComboboxEntry` — a plain `Item` for
+// a bare entry, a `Section` wrapping its items for a group. Identical for `Combobox` and
+// `Autocomplete`'s state setup.
+export const comboboxCollectionChildren = (entry: ComboboxEntry) =>
+  isComboboxGroupEntry(entry) ? (
+    <Section key={entry.key} title={entry.label} items={entry.items}>
+      {renderComboboxCollectionItem}
+    </Section>
+  ) : (
+    renderComboboxCollectionItem(entry)
+  )

package/src/utils/dateRangePresets.ts

@@ -0,0 +1,6 @@
+import { DateValue, RangeValue } from 'react-aria'
+
+export interface DateRangePreset {
+  label: string
+  range: RangeValue<DateValue>
+}

package/src/utils/dialogTransition.ts

@@ -0,0 +1,39 @@
+// Shared transition timing for native <dialog>-based components (Modal, Drawer). Body-scroll
+// locking is handled by react-aria's usePreventScroll directly in each component.
+
+export const getTransitionDuration = (element: HTMLElement) => {
+  const { transitionDuration, transitionDelay } = window.getComputedStyle(element)
+  const duration = Number.parseFloat(transitionDuration) || 0
+  const delay = Number.parseFloat(transitionDelay) || 0
+  if (!duration && !delay) return 0
+  return (duration + delay) * 1000
+}
+
+export const executeAfterTransition = (
+  element: HTMLElement,
+  callback: () => void,
+  animated: boolean
+) => {
+  if (!animated) {
+    callback()
+    return () => undefined
+  }
+
+  let called = false
+  const done = () => {
+    if (called) return
+    called = true
+    element.removeEventListener('transitionend', handleEnd)
+    clearTimeout(timer)
+    callback()
+  }
+  const handleEnd = (event: Event) => {
+    if (event.target === element) done()
+  }
+  element.addEventListener('transitionend', handleEnd)
+  const timer = setTimeout(done, getTransitionDuration(element) + 50)
+  return () => {
+    element.removeEventListener('transitionend', handleEnd)
+    clearTimeout(timer)
+  }
+}

package/src/utils/focusRedirect.ts

@@ -0,0 +1,29 @@
+// Safari shows a `:focus-visible` ring on an element focused via script even when the
+// interaction that triggered the script was a real pointer click — unlike Chromium/Firefox,
+// which correctly suppress it in that case. Force the ring off for a pointer-triggered redirect,
+// then let normal focus-visible behavior resume the next time this element is genuinely
+// (re)focused, e.g. via Tab.
+export function focusRedirect(
+  el: HTMLElement | null,
+  viaPointer: boolean,
+  focusOptions?: FocusOptions
+): void {
+  if (!el) return
+  if (!viaPointer) {
+    el.focus(focusOptions)
+    return
+  }
+  const prevOutline = el.style.outline
+  const prevBoxShadow = el.style.boxShadow
+  el.style.outline = 'none'
+  el.style.boxShadow = 'none'
+  el.focus(focusOptions)
+  el.addEventListener(
+    'blur',
+    () => {
+      el.style.outline = prevOutline
+      el.style.boxShadow = prevBoxShadow
+    },
+    { once: true }
+  )
+}

package/src/utils/isWholeUnitDisabled.ts

@@ -0,0 +1,17 @@
+import { CalendarState, RangeCalendarState } from 'react-stately'
+import { CalendarDate, toCalendarDate } from '@internationalized/date'
+
+// Shared by `CalendarMonthGrid` and `CalendarYearGrid` — a month/year button is disabled when
+// every day it covers falls outside `minValue`/`maxValue`, not just when its first day does (e.g.
+// a `maxValue` of March 15th still leaves March itself partly selectable, so March's button stays
+// enabled; April's doesn't). `unitEnd` is the last day of the button's own month/year.
+export const isWholeUnitDisabled = (
+  state: CalendarState<'single' | 'multiple'> | RangeCalendarState,
+  unitStart: CalendarDate,
+  unitEnd: CalendarDate
+): boolean => {
+  if (state.isDisabled) return true
+  if (state.maxValue && unitStart.compare(toCalendarDate(state.maxValue)) > 0) return true
+  if (state.minValue && unitEnd.compare(toCalendarDate(state.minValue)) < 0) return true
+  return false
+}