@chassis-ui/react 0.0.0-20260831090525

package/src/components/button-group/ButtonGroup.tsx

@@ -0,0 +1,55 @@
+import React, { ElementType, ForwardRefRenderFunction, ReactElement } from 'react'
+import classNames from 'classnames'
+
+import {
+  createPolymorphicComponent,
+  PolymorphicComponentProps,
+  PolymorphicRef
+} from '../../utils/polymorphic'
+
+type ButtonGroupOwnProps<C extends ElementType> = {
+  /**
+   * A string of all className you want applied to the base component.
+   */
+  className?: string
+  /**
+   * Component used for the root node. Either a string to use a HTML element or a component.
+   */
+  component?: C
+  /**
+   * Size the component small or large.
+   */
+  size?: 'small' | 'large'
+  /**
+   * Create a set of buttons that appear vertically stacked rather than horizontally. Split button dropdowns are not supported here.
+   */
+  vertical?: boolean
+}
+
+export type ButtonGroupProps<C extends ElementType = 'div'> = PolymorphicComponentProps<
+  C,
+  ButtonGroupOwnProps<C>
+>
+
+type ButtonGroupComponent = (<C extends ElementType = 'div'>(
+  props: ButtonGroupProps<C> & { ref?: PolymorphicRef<C> }
+) => ReactElement | null) & { displayName?: string }
+
+function ButtonGroupRender<C extends ElementType = 'div'>(
+  { children, className, component, size, vertical, ...rest }: ButtonGroupProps<C>,
+  ref: PolymorphicRef<C>
+) {
+  const Component = component ?? 'div'
+  const _className = classNames('button-group', { vertical }, size, className)
+
+  return (
+    <Component className={_className} {...rest} ref={ref}>
+      {children}
+    </Component>
+  )
+}
+
+export const ButtonGroup = createPolymorphicComponent<ButtonGroupComponent>(
+  ButtonGroupRender as ForwardRefRenderFunction<Element, ButtonGroupProps<ElementType>>,
+  'ButtonGroup'
+)

package/src/components/button-group/ButtonToolbar.tsx

@@ -0,0 +1,47 @@
+import React, { ElementType, ForwardRefRenderFunction, ReactElement } from 'react'
+import classNames from 'classnames'
+
+import {
+  createPolymorphicComponent,
+  PolymorphicComponentProps,
+  PolymorphicRef
+} from '../../utils/polymorphic'
+
+type ButtonToolbarOwnProps<C extends ElementType> = {
+  /**
+   * A string of all className you want applied to the base component.
+   */
+  className?: string
+  /**
+   * Component used for the root node. Either a string to use a HTML element or a component.
+   */
+  component?: C
+}
+
+export type ButtonToolbarProps<C extends ElementType = 'div'> = PolymorphicComponentProps<
+  C,
+  ButtonToolbarOwnProps<C>
+>
+
+type ButtonToolbarComponent = (<C extends ElementType = 'div'>(
+  props: ButtonToolbarProps<C> & { ref?: PolymorphicRef<C> }
+) => ReactElement | null) & { displayName?: string }
+
+function ButtonToolbarRender<C extends ElementType = 'div'>(
+  { children, className, component, ...rest }: ButtonToolbarProps<C>,
+  ref: PolymorphicRef<C>
+) {
+  const Component = component ?? 'div'
+  const _className = classNames('button-toolbar', className)
+
+  return (
+    <Component className={_className} {...rest} ref={ref}>
+      {children}
+    </Component>
+  )
+}
+
+export const ButtonToolbar = createPolymorphicComponent<ButtonToolbarComponent>(
+  ButtonToolbarRender as ForwardRefRenderFunction<Element, ButtonToolbarProps<ElementType>>,
+  'ButtonToolbar'
+)

package/src/components/button-group/index.ts

@@ -0,0 +1,4 @@
+export { ButtonGroup } from './ButtonGroup'
+export type { ButtonGroupProps } from './ButtonGroup'
+export { ButtonToolbar } from './ButtonToolbar'
+export type { ButtonToolbarProps } from './ButtonToolbar'

package/src/components/calendar/Calendar.scss

@@ -0,0 +1,57 @@
+@use "@chassis-ui/css/scss/config" as *;
+@use "@chassis-ui/css/scss/mixins" as *;
+
+/*
+ * `Calendar` reuses chassis-css's `.datepicker-*` classes, so layout/arrows/header/today/disabled/
+ * focus styling already comes from `@chassis-ui/css`. This file only covers the gaps: states
+ * vanilla-calendar-pro exposes via `data-vc-date-*` (no react-aria equivalent, re-expressed as
+ * `.datepicker-date-*` classes) and the month/year picker, which chassis-css styles via attribute
+ * selectors this component doesn't have.
+ */
+
+@layer components {
+  .datepicker-body {
+    position: relative;
+  }
+
+  .datepicker-months-month.selected,
+  .datepicker-years-year.selected {
+    color: var(--primary-contrast);
+    background-color: var(--primary);
+  }
+
+  .datepicker-months-month.selected:hover,
+  .datepicker-years-year.selected:hover {
+    background-color: var(--primary);
+  }
+
+  /* Leading/trailing days from the adjacent month */
+  .datepicker-date-outside > .datepicker-date-btn {
+    color: var(--day-disabled-fg-color);
+  }
+
+  /* Weekend, muted unless selected/unavailable/disabled takes priority. `:where()` keeps these
+     guards from adding specificity over chassis-css's "today" rule. */
+  .datepicker-date-weekend:where(:not(.datepicker-date-selected):not(.datepicker-date-unavailable)) > .datepicker-date-btn:where(:not([aria-disabled="true"])) {
+    color: var(--fg-subtle);
+  }
+
+  /* Unavailable (`isDateUnavailable`) — focusable and announced, unlike native disabled. */
+  .datepicker-date-unavailable:where(:not(.datepicker-date-selected)) > .datepicker-date-btn {
+    color: var(--day-disabled-fg-color);
+    text-decoration: line-through;
+  }
+
+  /* Selected (single-date only; `RangeCalendar.scss` handles start/end/in-range). */
+  .datepicker-date-selected > .datepicker-date-btn {
+    color: var(--primary-contrast);
+    background-color: var(--primary);
+  }
+
+  /* Extra `.datepicker-date` qualifier wins the specificity tie with chassis-css's "today" rule
+     when a date is both selected and today. */
+  .datepicker-date-selected.datepicker-date[aria-current="date"] > .datepicker-date-btn {
+    color: var(--primary-contrast);
+    background-color: var(--primary);
+  }
+}

package/src/components/calendar/Calendar.tsx

@@ -0,0 +1,324 @@
+import React, { forwardRef, HTMLAttributes, useMemo, useRef, useState } from 'react'
+import classNames from 'classnames'
+import { AriaCalendarProps, mergeProps, useCalendar, useCalendarCell, useLocale } from 'react-aria'
+import { CalendarState as StatelyCalendarState, DateValue, useCalendarState } from 'react-stately'
+import {
+  CalendarDate,
+  createCalendar,
+  getLocalTimeZone,
+  isToday,
+  isWeekend,
+  today
+} from '@internationalized/date'
+
+import { useForkedRef } from '../../hooks'
+import { CalendarMonthBlock } from './CalendarMonthBlock'
+import { CalendarMonthYearPicker } from './CalendarMonthYearPicker'
+import { CalendarNavButton } from './CalendarNavButton'
+import { CalendarWeekGrid } from './CalendarWeekGrid'
+import { mergeIsDateUnavailable } from '../../utils/mergeIsDateUnavailable'
+import './Calendar.scss'
+
+interface CalendarBaseProps extends Omit<
+  HTMLAttributes<HTMLDivElement>,
+  'onChange' | 'defaultValue'
+> {
+  /**
+   * An accessible label for the calendar, used when there's no visible label. Required for
+   * standalone use — a calendar grid has no other accessible name of its own.
+   */
+  'aria-label'?: string
+  /**
+   * Identifies a visible label element for the calendar.
+   */
+  'aria-labelledby'?: string
+  /**
+   * Whether to automatically focus the calendar when it mounts.
+   */
+  autoFocus?: boolean
+  /**
+   * A string of all className you want applied to the base component.
+   */
+  className?: string
+  /**
+   * Prevents the calendar from being focused or interacted with.
+   */
+  disabled?: boolean
+  /**
+   * The day that starts the week, overriding the default set by the active locale.
+   *
+   * @default 'mon'
+   */
+  firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'
+  /**
+   * Callback that is called for each date in the calendar. If it returns `true`, that date is
+   * shown but cannot be selected.
+   */
+  isDateUnavailable?: (date: DateValue) => boolean
+  /**
+   * The maximum allowed date that a user may select.
+   */
+  maxValue?: DateValue | null
+  /**
+   * The minimum allowed date that a user may select.
+   */
+  minValue?: DateValue | null
+  /**
+   * ISO 8601 dates (`YYYY-MM-DD`) to mark unselectable, as a convenience alternative to
+   * `isDateUnavailable` for data-driven cases (e.g. booked dates fetched from an API). Composed
+   * with `isDateUnavailable` when both are given — a date unavailable by either is unavailable.
+   */
+  unavailableDates?: string[]
+  /**
+   * Number of months to display side by side, sharing one selection. Wraps to multiple rows in
+   * a narrow container (e.g. a popover on a small screen) rather than overflowing — the wrap is
+   * driven by the calendar's own width, not the viewport, so it adapts correctly regardless of
+   * where the calendar is embedded.
+   *
+   * @default 1
+   */
+  visibleMonths?: number
+}
+
+export interface CalendarSingleProps extends CalendarBaseProps {
+  /**
+   * The initial selected date (uncontrolled).
+   */
+  defaultValue?: DateValue | null
+  /**
+   * Callback fired when the selected date changes. Unlike `DatePicker`'s `onChange` (whose
+   * segmented field can be cleared to `null`), a calendar selection is always a concrete date.
+   */
+  onChange?: (value: DateValue) => void
+  /**
+   * Whether a single date or multiple, independently toggled dates can be selected.
+   *
+   * @default 'single'
+   */
+  selectionMode?: 'single'
+  /**
+   * The selected date (controlled).
+   */
+  value?: DateValue | null
+}
+
+export interface CalendarMultipleProps extends CalendarBaseProps {
+  /**
+   * The initial selected dates (uncontrolled).
+   */
+  defaultValue?: DateValue[] | null
+  /**
+   * Callback fired when the set of selected dates changes.
+   */
+  onChange?: (value: DateValue[]) => void
+  /**
+   * Whether a single date or multiple, independently toggled dates can be selected.
+   *
+   * @default 'single'
+   */
+  selectionMode: 'multiple'
+  /**
+   * The selected dates (controlled).
+   */
+  value?: DateValue[] | null
+}
+
+export type CalendarProps = CalendarSingleProps | CalendarMultipleProps
+
+// Public, standalone calendar grid — also used internally by `DatePicker` to render the grid
+// inside its popover. Deliberately has no knowledge of dialog/popover semantics (role="dialog",
+// focus trapping, etc.) — that's the caller's concern, layered on via the `...rest` passthrough
+// below (see `DatePicker`, which merges its own `useDialog` output in this way).
+//
+// `selectionMode` is a discriminated union on the public props (single vs. multiple value/
+// onChange shapes), bridged onto one underlying `useCalendarState`/`useCalendar` call instantiated
+// over the union of both modes — react-stately/react-aria are natively selection-mode-aware at
+// that layer (including `useCalendarCell`'s `isSelected`), so no custom multi-select logic is
+// needed here, just narrow, provably-safe casts at the seam between the public union and the
+// single generic call (react-stately always reports/expects the value shape matching whichever
+// `selectionMode` was actually passed in).
+export const Calendar = forwardRef<HTMLDivElement, CalendarProps>((props, forwardedRef) => {
+  const {
+    autoFocus,
+    className,
+    defaultValue,
+    disabled,
+    firstDayOfWeek = 'mon',
+    isDateUnavailable,
+    maxValue,
+    minValue,
+    onChange,
+    selectionMode = 'single',
+    unavailableDates,
+    value,
+    visibleMonths = 1,
+    ...rest
+  } = props
+
+  const { locale } = useLocale()
+  const internalRef = useRef<HTMLDivElement>(null)
+  const ref = useForkedRef(internalRef, forwardedRef)
+  const combinedIsDateUnavailable = useMemo(
+    () => mergeIsDateUnavailable(unavailableDates, isDateUnavailable),
+    [unavailableDates, isDateUnavailable]
+  )
+  // Tracks each visible month block's own view, keyed by `monthIndex` — same reasoning as
+  // `RangeCalendar`'s identical state: needed only to know whether *any* block has switched
+  // away from the day grid, so the global `.datepicker-controls` overlay can hide itself rather
+  // than sit on top of `CalendarYearGrid`'s own pager.
+  const [monthViews, setMonthViews] = useState<Record<number, 'days' | 'months' | 'years'>>({})
+  const hasPickerView = Object.values(monthViews).some((view) => view !== 'days')
+
+  const handleChange = (next: DateValue | readonly DateValue[]) => {
+    if (selectionMode === 'multiple') {
+      ;(onChange as ((value: DateValue[]) => void) | undefined)?.(next as DateValue[])
+    } else {
+      ;(onChange as ((value: DateValue) => void) | undefined)?.(next as DateValue)
+    }
+  }
+  const normalizedValue = value as DateValue | readonly DateValue[] | null | undefined
+  const normalizedDefaultValue = defaultValue as DateValue | readonly DateValue[] | null | undefined
+  // react-stately's `useCalendarState` crashes computing the initial focused date for
+  // `selectionMode: 'multiple'` when the (controlled or default) value is a genuinely empty
+  // array — its own fallback-to-today logic only runs when the value is nullish, but an empty
+  // array is truthy, so it instead indexes the (nonexistent) first element and calls `.subtract`
+  // on the resulting `undefined`. Supplying `defaultFocusedValue` ourselves in exactly that case
+  // short-circuits react-stately's logic before it ever reaches the buggy branch, without
+  // affecting the normal "focus follows the selection" behavior whenever there is one.
+  const resolvedValue = normalizedValue !== undefined ? normalizedValue : normalizedDefaultValue
+  const defaultFocusedValue =
+    selectionMode === 'multiple' && Array.isArray(resolvedValue) && resolvedValue.length === 0
+      ? today(getLocalTimeZone())
+      : undefined
+
+  const state = useCalendarState<DateValue, 'single' | 'multiple'>({
+    autoFocus,
+    createCalendar,
+    defaultFocusedValue,
+    defaultValue: normalizedDefaultValue,
+    firstDayOfWeek,
+    isDateUnavailable: combinedIsDateUnavailable,
+    isDisabled: disabled,
+    locale,
+    maxValue,
+    minValue,
+    onChange: handleChange,
+    // Prev/next always slide the visible window by one month, regardless of `visibleMonths` —
+    // same reasoning as `RangeCalendar`'s identical setting (see that component's own comment).
+    pageBehavior: 'single',
+    selectionMode,
+    value: normalizedValue,
+    visibleDuration: { months: visibleMonths }
+  })
+
+  const ariaProps: AriaCalendarProps<DateValue, 'single' | 'multiple'> = {
+    'aria-label': rest['aria-label'],
+    'aria-labelledby': rest['aria-labelledby'],
+    autoFocus,
+    defaultFocusedValue,
+    defaultValue: normalizedDefaultValue,
+    isDateUnavailable: combinedIsDateUnavailable,
+    isDisabled: disabled,
+    maxValue,
+    minValue,
+    onChange: handleChange,
+    selectionMode,
+    value: normalizedValue
+  }
+
+  const { calendarProps, prevButtonProps, nextButtonProps } = useCalendar(ariaProps, state)
+  const prevButton = <CalendarNavButton buttonProps={prevButtonProps} direction="prev" />
+  const nextButton = <CalendarNavButton buttonProps={nextButtonProps} direction="next" />
+
+  return (
+    <div
+      {...mergeProps(calendarProps, rest)}
+      className={classNames('datepicker', className)}
+      data-cx-inline="true"
+      ref={ref}
+    >
+      {visibleMonths === 1 ? (
+        <CalendarMonthYearPicker
+          monthStart={state.visibleRange.start}
+          nextArrow={nextButton}
+          prevArrow={prevButton}
+          state={state}
+        >
+          <CalendarWeekGrid
+            firstDayOfWeek={firstDayOfWeek}
+            renderCell={(date) => <CalendarCell date={date} locale={locale} state={state} />}
+            state={state}
+          />
+        </CalendarMonthYearPicker>
+      ) : (
+        <>
+          {/* `.datepicker[data-cx-inline]` (the root above) is already `position: relative` in
+              chassis-css, so this overlay needs no extra positioning wrapper of its own — unlike
+              `RangeCalendar`, which has a `presets` column sharing that root and so scopes its
+              own copy of this overlay to a nested `.datepicker-body` instead. */}
+          {!hasPickerView && (
+            <div className="datepicker-controls">
+              {prevButton}
+              {nextButton}
+            </div>
+          )}
+          <div className="datepicker-grid">
+            {[...new Array(visibleMonths).keys()].map((monthIndex) => (
+              <CalendarMonthBlock
+                firstDayOfWeek={firstDayOfWeek}
+                key={monthIndex}
+                monthIndex={monthIndex}
+                onViewChange={(view) => setMonthViews((prev) => ({ ...prev, [monthIndex]: view }))}
+                renderCell={(date) => <CalendarCell date={date} locale={locale} state={state} />}
+                state={state}
+              />
+            ))}
+          </div>
+        </>
+      )}
+    </div>
+  )
+})
+
+Calendar.displayName = 'Calendar'
+
+type CalendarState = StatelyCalendarState<'single' | 'multiple'>
+
+interface CalendarCellProps {
+  date: CalendarDate
+  locale: string
+  state: CalendarState
+}
+
+const CalendarCell = ({ date, locale, state }: CalendarCellProps) => {
+  const ref = useRef<HTMLButtonElement>(null)
+  const {
+    cellProps,
+    buttonProps,
+    isSelected,
+    isOutsideVisibleRange,
+    isDisabled,
+    isUnavailable,
+    formattedDate
+  } = useCalendarCell({ date }, state, ref)
+  const isCurrentDate = isToday(date, getLocalTimeZone())
+
+  return (
+    <div
+      {...cellProps}
+      aria-current={isCurrentDate ? 'date' : undefined}
+      className={classNames('datepicker-date', {
+        'datepicker-date-selected': isSelected,
+        'datepicker-date-today': isCurrentDate,
+        'datepicker-date-outside': isOutsideVisibleRange,
+        'datepicker-date-disabled': isDisabled,
+        'datepicker-date-unavailable': isUnavailable,
+        'datepicker-date-weekend': isWeekend(date, locale)
+      })}
+    >
+      <button {...buttonProps} type="button" className="datepicker-date-btn" ref={ref}>
+        {formattedDate}
+      </button>
+    </div>
+  )
+}

package/src/components/calendar/CalendarMonthBlock.tsx

@@ -0,0 +1,57 @@
+import React, { ReactNode } from 'react'
+import { CalendarState, RangeCalendarState } from 'react-stately'
+import { CalendarDate } from '@internationalized/date'
+
+import { CalendarMonthYearPicker } from './CalendarMonthYearPicker'
+import { CalendarWeekGrid } from './CalendarWeekGrid'
+
+interface CalendarMonthBlockProps {
+  // `null`/omitted when a global prev/next pair elsewhere is paging every visible month block at
+  // once (`RangeCalendar` with `visibleMonths > 1`) rather than this block having its own — see
+  // that component's own `arrows` prop.
+  arrows?: { next: ReactNode; prev: ReactNode } | null
+  firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'
+  monthIndex: number
+  onViewChange: (view: 'days' | 'months' | 'years') => void
+  // The individual cell differs between `Calendar` and `RangeCalendar` (range selection needs
+  // start/end/in-between pill state a single-date cell has no equivalent for), so cell rendering
+  // is left to the caller — same shape `CalendarWeekGrid` itself already expects.
+  renderCell: (date: CalendarDate, index: number, week: (CalendarDate | null)[]) => ReactNode
+  state: CalendarState<'single' | 'multiple'> | RangeCalendarState
+}
+
+// One visible month within `visibleMonths` — shared by `Calendar` and `RangeCalendar`, which
+// otherwise duplicated this wiring near-verbatim. `monthIndex` is the offset of this block's own
+// month from `state.focusedDate` (`0` for a single-month calendar), letting `setVisibleRangeStart`
+// (inside `CalendarMonthYearPicker`) land a pick correctly regardless of which visible block it
+// came from.
+export const CalendarMonthBlock = ({
+  arrows,
+  firstDayOfWeek,
+  monthIndex,
+  onViewChange,
+  renderCell,
+  state
+}: CalendarMonthBlockProps) => {
+  const monthStart = state.visibleRange.start.add({ months: monthIndex })
+
+  return (
+    <>
+      <CalendarMonthYearPicker
+        monthIndex={monthIndex}
+        monthStart={monthStart}
+        nextArrow={arrows?.next}
+        onViewChange={onViewChange}
+        prevArrow={arrows?.prev}
+        state={state}
+      >
+        <CalendarWeekGrid
+          firstDayOfWeek={firstDayOfWeek}
+          renderCell={renderCell}
+          startDate={monthStart}
+          state={state}
+        />
+      </CalendarMonthYearPicker>
+    </>
+  )
+}

package/src/components/calendar/CalendarMonthGrid.tsx

@@ -0,0 +1,92 @@
+import React from 'react'
+import classNames from 'classnames'
+import { useDateFormatter } from 'react-aria'
+import { CalendarState, RangeCalendarState } from 'react-stately'
+import { CalendarDate } from '@internationalized/date'
+
+import { isWholeUnitDisabled } from '../../utils/isWholeUnitDisabled'
+
+interface CalendarMonthGridProps {
+  // Whether to render the visually-hidden `aria-live` announcement of this view's current header
+  // (see `CalendarMonthYearPicker`'s own equivalent gate) — `false` for every visible month block
+  // but the first when `visibleMonths > 1`, so switching into this view doesn't fire one
+  // simultaneous announcement per block.
+  announce?: boolean
+  monthStart: CalendarDate
+  onBack: () => void
+  onSelect: (date: CalendarDate) => void
+  state: CalendarState<'single' | 'multiple'> | RangeCalendarState
+}
+
+// The month view of `CalendarMonthYearPicker` — every month in `monthStart`'s own year, laid out
+// as a static 3-column grid (no paging; picking a different year is the year view's job).
+export const CalendarMonthGrid = ({
+  announce = true,
+  monthStart,
+  onBack,
+  onSelect,
+  state
+}: CalendarMonthGridProps) => {
+  const monthFormatter = useDateFormatter({
+    calendar: monthStart.calendar.identifier,
+    month: 'short',
+    timeZone: state.timeZone
+  })
+  const yearFormatter = useDateFormatter({
+    calendar: monthStart.calendar.identifier,
+    timeZone: state.timeZone,
+    year: 'numeric'
+  })
+
+  const numMonths = monthStart.calendar.getMonthsInYear(monthStart)
+  const months = [...new Array(numMonths).keys()].map((i) => {
+    const date = monthStart.set({ day: 1, month: i + 1 })
+    return { date, formatted: monthFormatter.format(date.toDate(state.timeZone)) }
+  })
+
+  return (
+    <>
+      <div className="datepicker-header">
+        <div className="datepicker-header-content">
+          <button className="datepicker-month" onClick={onBack} type="button">
+            {yearFormatter.format(monthStart.toDate(state.timeZone))}
+          </button>
+        </div>
+      </div>
+      {announce && (
+        <span role="status" className="visually-hidden">
+          {`Select month, ${yearFormatter.format(monthStart.toDate(state.timeZone))}`}
+        </span>
+      )}
+      <div className="datepicker-content">
+        <div
+          aria-label={yearFormatter.format(monthStart.toDate(state.timeZone))}
+          className="datepicker-months"
+          role="group"
+        >
+          {months.map((month) => {
+            const isSelected = month.date.month === monthStart.month
+            const isDisabled = isWholeUnitDisabled(
+              state,
+              month.date,
+              month.date.add({ months: 1 }).subtract({ days: 1 })
+            )
+
+            return (
+              <button
+                aria-current={isSelected ? 'true' : undefined}
+                className={classNames('datepicker-months-month', { selected: isSelected })}
+                disabled={isDisabled}
+                key={month.date.month}
+                onClick={() => onSelect(month.date)}
+                type="button"
+              >
+                {month.formatted}
+              </button>
+            )
+          })}
+        </div>
+      </div>
+    </>
+  )
+}