@chassis-ui/react 0.1.0 → 0.1.1

package/src/components/calendar/RangeCalendar.tsx

@@ -26,6 +26,7 @@ import { mergeIsDateUnavailable } from '../../utils/mergeIsDateUnavailable'
 import { suppressFocusRing } from '../../utils/suppressFocusRingGlobally'
 import './Calendar.scss'
 import './RangeCalendar.scss'
+import { CalendarLabels, CalendarLabelsProvider } from './labels'
 
 export interface RangeCalendarProps extends Omit<
   HTMLAttributes<HTMLDivElement>,
@@ -67,6 +68,14 @@ export interface RangeCalendarProps extends Omit<
    * shown but cannot be selected.
    */
   isDateUnavailable?: (date: DateValue) => boolean
+  /**
+   * Overrides for the handful of strings this component renders itself rather than getting from
+   * the active locale (the year view's paging arrows, its live-region announcements, and the
+   * month/year header buttons). Everything else — month and weekday names, the calendar system —
+   * follows `I18nProvider`'s locale via react-aria and needs no override. Merged over the English
+   * defaults, so passing one key leaves the rest alone.
+   */
+  labels?: Partial<CalendarLabels>
   /**
    * The maximum allowed date that a user may select.
    */
@@ -97,7 +106,7 @@ export interface RangeCalendarProps extends Omit<
   value?: RangeValue<DateValue> | null
   /**
    * 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
+   * a narrow container (e.g. a popover on a sm 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.
    *
@@ -122,6 +131,7 @@ export const RangeCalendar = forwardRef<HTMLDivElement, RangeCalendarProps>(
       disabled,
       firstDayOfWeek = 'mon',
       isDateUnavailable,
+      labels,
       maxValue,
       minValue,
       onChange,
@@ -205,53 +215,55 @@ export const RangeCalendar = forwardRef<HTMLDivElement, RangeCalendarProps>(
     }
 
     return (
-      <div
-        {...mergeProps(calendarProps, rest)}
-        className={classNames('datepicker', className)}
-        data-cx-inline="true"
-        ref={ref}
-      >
-        <div className="datepicker-grid">
-          {resolvedPresets && (
-            <DateRangePresets
-              onSelect={handlePresetSelect}
-              presets={resolvedPresets}
-              value={state.value}
-            />
-          )}
-          <div className="datepicker-body">
-            {visibleMonths > 1 && !hasPickerView && (
-              <div className="datepicker-controls">
-                {prevButton}
-                {nextButton}
-              </div>
+      <CalendarLabelsProvider labels={labels}>
+        <div
+          {...mergeProps(calendarProps, rest)}
+          className={classNames('datepicker', className)}
+          data-cx-inline="true"
+          ref={ref}
+        >
+          <div className="datepicker-grid">
+            {resolvedPresets && (
+              <DateRangePresets
+                onSelect={handlePresetSelect}
+                presets={resolvedPresets}
+                value={state.value}
+              />
             )}
-            <div className="datepicker-grid">
-              {[...new Array(visibleMonths).keys()].map((monthIndex) => (
-                <CalendarMonthBlock
-                  arrows={monthIndex === 0 ? singleMonthArrows : null}
-                  firstDayOfWeek={firstDayOfWeek}
-                  key={monthIndex}
-                  monthIndex={monthIndex}
-                  onViewChange={(view) =>
-                    setMonthViews((prev) => ({ ...prev, [monthIndex]: view }))
-                  }
-                  renderCell={(date, i, week) => (
-                    <CalendarCell
-                      date={date}
-                      isFirstInRow={i === 0}
-                      isLastInRow={i === week.length - 1}
-                      locale={locale}
-                      state={state}
-                    />
-                  )}
-                  state={state}
-                />
-              ))}
+            <div className="datepicker-body">
+              {visibleMonths > 1 && !hasPickerView && (
+                <div className="datepicker-controls">
+                  {prevButton}
+                  {nextButton}
+                </div>
+              )}
+              <div className="datepicker-grid">
+                {[...new Array(visibleMonths).keys()].map((monthIndex) => (
+                  <CalendarMonthBlock
+                    arrows={monthIndex === 0 ? singleMonthArrows : null}
+                    firstDayOfWeek={firstDayOfWeek}
+                    key={monthIndex}
+                    monthIndex={monthIndex}
+                    onViewChange={(view) =>
+                      setMonthViews((prev) => ({ ...prev, [monthIndex]: view }))
+                    }
+                    renderCell={(date, i, week) => (
+                      <CalendarCell
+                        date={date}
+                        isFirstInRow={i === 0}
+                        isLastInRow={i === week.length - 1}
+                        locale={locale}
+                        state={state}
+                      />
+                    )}
+                    state={state}
+                  />
+                ))}
+              </div>
             </div>
           </div>
         </div>
-      </div>
+      </CalendarLabelsProvider>
     )
   }
 )

package/src/components/calendar/index.ts

@@ -2,4 +2,5 @@ export { Calendar } from './Calendar'
 export type { CalendarProps, CalendarSingleProps, CalendarMultipleProps } from './Calendar'
 export { RangeCalendar } from './RangeCalendar'
 export type { RangeCalendarProps } from './RangeCalendar'
+export type { CalendarLabels } from './labels'
 export type { DateRangePreset } from '../../utils/dateRangePresets'

package/src/components/calendar/labels.tsx

@@ -0,0 +1,71 @@
+import React, { createContext, ReactNode, useContext, useMemo } from 'react'
+
+/**
+ * The user-facing strings the calendar/datepicker family renders itself, rather than getting from
+ * the active locale.
+ *
+ * Everything else these components say — weekday names, month names, the calendar system, segment
+ * order — comes from `I18nProvider`'s locale via react-aria, which ships its own translations. The
+ * strings below have no equivalent in react-aria's dictionaries, so they were hardcoded English
+ * with no way to override them: under `<I18nProvider locale="ar-SA">` a user got Arabic month
+ * names interleaved with an English "Previous years". Pass `labels` to translate them, the same
+ * way `Pagination`'s `previousLabel`/`nextLabel` are translated (see the Internationalization
+ * docs page).
+ */
+export interface CalendarLabels {
+  /** Accessible name of the year view's "page back" arrow. */
+  previousYears: string
+  /** Accessible name of the year view's "page forward" arrow. */
+  nextYears: string
+  /** Prefix of the year view's live-region announcement, rendered as `${selectYear}, 2020 – 2034`. */
+  selectYear: string
+  /** Prefix of the month view's live-region announcement, rendered as `${selectMonth}, 2024`. */
+  selectMonth: string
+  /** Prefix of the header month button's accessible name, rendered as `${month}: March`. */
+  month: string
+  /** Prefix of the header year button's accessible name, rendered as `${year}: 2024`. */
+  year: string
+  /** Accessible name of the trigger that opens the calendar overlay. */
+  calendar: string
+  /** Accessible name of the adornment that resets the current selection. */
+  clear: string
+}
+
+export const DEFAULT_CALENDAR_LABELS: CalendarLabels = {
+  previousYears: 'Previous years',
+  nextYears: 'Next years',
+  selectYear: 'Select year',
+  selectMonth: 'Select month',
+  month: 'Month',
+  year: 'Year',
+  calendar: 'Calendar',
+  clear: 'Clear'
+}
+
+const CalendarLabelsContext = createContext<CalendarLabels>(DEFAULT_CALENDAR_LABELS)
+
+/**
+ * Reads the merged labels. Internal — every component in this family that renders one of these
+ * strings goes through here rather than taking its own prop, because most of them
+ * (`CalendarYearGrid`, `CalendarMonthGrid`, `CalendarMonthYearPicker`) sit three or four levels
+ * below the public component a consumer actually passes `labels` to.
+ */
+export const useCalendarLabels = (): CalendarLabels => useContext(CalendarLabelsContext)
+
+interface CalendarLabelsProviderProps {
+  children: ReactNode
+  labels?: Partial<CalendarLabels>
+}
+
+/**
+ * Merges `labels` over whatever is already in context, rather than replacing it. `DatePicker`
+ * renders a `Calendar` internally, so both provide — without merging, the inner `Calendar`
+ * (which usually has no `labels` of its own) would reset the outer `DatePicker`'s overrides back
+ * to English.
+ */
+export const CalendarLabelsProvider = ({ children, labels }: CalendarLabelsProviderProps) => {
+  const parent = useContext(CalendarLabelsContext)
+  const value = useMemo(() => (labels ? { ...parent, ...labels } : parent), [parent, labels])
+
+  return <CalendarLabelsContext.Provider value={value}>{children}</CalendarLabelsContext.Provider>
+}

package/src/components/card/Card.tsx

@@ -59,8 +59,8 @@ type CardOwnProps<C extends ElementType> = {
    */
   imageOrientation?: 'top' | 'bottom'
   /**
-   * Overrides `direction` at one or more breakpoints — e.g. `{ large: 'row' }` to lay the card
-   * out horizontally from `large` up while stacking below it.
+   * Overrides `direction` at one or more breakpoints — e.g. `{ lg: 'row' }` to lay the card
+   * out horizontally from `lg` up while stacking below it.
    */
   responsive?: Partial<Record<Breakpoint, FlexDirection>>
   /**
@@ -127,8 +127,8 @@ function CardRender<C extends ElementType = 'div'>(
       solid: variant === 'solid',
       smooth: variant === 'smooth',
       outline: variant === 'outline',
-      small: size === 'small',
-      large: size === 'large'
+      sm: size === 'sm',
+      lg: size === 'lg'
     },
     buildResponsiveClassNames(flexDirectionClassNames, direction, responsive),
     className

package/src/components/card/CardGroup.tsx

@@ -28,7 +28,7 @@ type CardGroupComponent = (<C extends ElementType = 'div'>(
 ) => ReactElement | null) & { displayName?: string }
 
 // Arranges direct-child Cards as an equal-width row, joined edge-to-edge, once its container
-// reaches the small container breakpoint — below that, cards stack vertically. Requires a
+// reaches the sm container breakpoint — below that, cards stack vertically. Requires a
 // `.contains-inline` ancestor (not applied by CardGroup itself, e.g. a wrapping
 // `<div className="contains-inline">`) to establish the container query context.
 function CardGroupRender<C extends ElementType = 'div'>(

package/src/components/card/CardImage.tsx

@@ -28,7 +28,7 @@ type CardImageOwnProps<C extends ElementType> = {
    */
   orientation?: CardImageOrientation
   /**
-   * Overrides `orientation` at one or more breakpoints — e.g. `{ large: 'start' }` to switch an
+   * Overrides `orientation` at one or more breakpoints — e.g. `{ lg: 'start' }` to switch an
    * image cap from `top` to `start` once the card lays out horizontally.
    */
   responsive?: Partial<Record<Breakpoint, CardImageOrientation>>

package/src/components/carousel/Carousel.tsx

@@ -26,6 +26,7 @@ import {
   prefersReducedMotion,
   scrollDeltaFor
 } from './carouselEngine'
+import { devWarning } from '../../utils/devWarning'
 
 export type { CarouselEnds }
 export type CarouselTransition = 'scroll' | 'fade'
@@ -131,6 +132,9 @@ export const Carousel = forwardRef<HTMLDivElement, CarouselProps>(
       itemsGap,
       itemsPeek,
       keyboard = true,
+      onKeyDown,
+      onMouseEnter,
+      onMouseLeave,
       onSlid,
       onSlide,
       pause = 'hover',
@@ -145,13 +149,12 @@ export const Carousel = forwardRef<HTMLDivElement, CarouselProps>(
     // "Controlled usage" section). Missing both means every click/swipe/autoplay advance updates
     // internal state that `useControllableState` immediately discards (controlled mode always
     // mirrors the prop), so the carousel silently freezes instead of erroring.
-    if (activeIndexProp !== undefined && !onSlide && !onSlid) {
-      console.warn(
-        'Carousel: `activeIndex` is set (controlled) but neither `onSlide` nor `onSlid` is — ' +
-          'nothing feeds the new index back to your state, so the carousel will visually freeze ' +
-          'on click/swipe/autoplay. Pass `onSlide` or `onSlid` and update `activeIndex` from it.'
-      )
-    }
+    devWarning(
+      activeIndexProp !== undefined && !onSlide && !onSlid,
+      'Carousel: `activeIndex` is set (controlled) but neither `onSlide` nor `onSlid` is — ' +
+        'nothing feeds the new index back to your state, so the carousel will visually freeze ' +
+        'on click/swipe/autoplay. Pass `onSlide` or `onSlid` and update `activeIndex` from it.'
+    )
 
     const carouselRef = useRef<HTMLDivElement>(null)
     const forkedRef = useForkedRef(ref, carouselRef)
@@ -655,7 +658,13 @@ export const Carousel = forwardRef<HTMLDivElement, CarouselProps>(
       }
     }, [])
 
+    // Compose rather than let a caller's handler silently replace the carousel's own — same rule
+    // `CarouselControlButton`/`CarouselPlayPause` follow for `onClick`. These three sit on the
+    // root element, so before this they were simply overwritten by the `{...rest}` spread below:
+    // passing `onKeyDown` turned off arrow-key navigation and passing `onMouseEnter`/
+    // `onMouseLeave` turned off pause-on-hover, both silently.
     const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
+      onKeyDown?.(event)
       if (!keyboard) return
       const target = event.target as HTMLElement
       if (target.closest('input, textarea, select, [contenteditable="true"]')) return
@@ -667,11 +676,13 @@ export const Carousel = forwardRef<HTMLDivElement, CarouselProps>(
       else goNext()
     }
 
-    const handleMouseEnter = () => {
+    const handleMouseEnter = (event: React.MouseEvent<HTMLDivElement>) => {
+      onMouseEnter?.(event)
       if (pause === 'hover') pauseCycle()
     }
 
-    const handleMouseLeave = () => {
+    const handleMouseLeave = (event: React.MouseEvent<HTMLDivElement>) => {
+      onMouseLeave?.(event)
       if (pause === 'hover' && playing) startCycle()
     }
 

package/src/components/carousel/CarouselControlButton.tsx

@@ -51,7 +51,7 @@ export const CarouselControlButton = forwardRef<HTMLButtonElement, CarouselContr
     return (
       <button
         type="button"
-        className={classNames('button small icon-only', className)}
+        className={classNames('button sm icon-only', className)}
         disabled={isDisabled}
         onClick={handleClick}
         {...rest}

package/src/components/carousel/CarouselPlayPause.tsx

@@ -28,7 +28,7 @@ export const CarouselPlayPause = forwardRef<HTMLButtonElement, CarouselPlayPause
   ({ children, className, onClick, pauseLabel = 'Pause', playLabel = 'Play', ...rest }, ref) => {
     const { playing, togglePlayPause } = useCarouselContext()
     const _className = classNames(
-      'carousel-control-play-pause button small icon-only',
+      'carousel-control-play-pause button sm icon-only',
       { paused: !playing },
       className
     )

package/src/components/carousel/carouselEngine.ts

@@ -1,15 +1,15 @@
 // Internal helpers shared by the carousel family. Not exported from the component's public
 // barrel (see CONVENTIONS.md's helper-module carve-out).
 
+import { isRTL } from '../../utils/direction'
+
 export const ITEM_SELECTOR = '.carousel-item:not(.carousel-item-clone)'
 
 export function getCarouselItems(viewport: HTMLElement): HTMLElement[] {
   return Array.from(viewport.querySelectorAll<HTMLElement>(`:scope > ${ITEM_SELECTOR}`))
 }
 
-export function isRTL(element: Element): boolean {
-  return getComputedStyle(element).direction === 'rtl'
-}
+export { isRTL }
 
 export function prefersReducedMotion(): boolean {
   return (

package/src/components/checkbox/Checkbox.tsx

@@ -21,6 +21,7 @@ import { validationClassName } from '../../utils/validationClassName'
 
 import { CheckboxGroupContext } from './context'
 import { ButtonObject, renderFormCheck } from '../form/renderFormCheck'
+import { devError, devWarning } from '../../utils/devWarning'
 
 export type { ButtonObject } from '../form/renderFormCheck'
 
@@ -72,9 +73,9 @@ export interface CheckboxProps extends Omit<
    */
   onChange?: (isSelected: boolean) => void
   /**
-   * Size the component small or large.
+   * Size the component sm or lg.
    */
-  size?: 'small' | 'large'
+  size?: 'sm' | 'lg'
   /**
    * Set component validation state to valid.
    */
@@ -183,15 +184,15 @@ const CheckboxGroupItem = forwardRef<HTMLInputElement, CheckboxGroupItemProps>(
     // Once per mount, not on every render — these are dev-time misuse warnings, not something
     // that needs to re-fire for every keystroke a parent's re-render happens to cause.
     useEffect(() => {
-      if (!rest.value) {
-        console.error('Checkbox: a `value` prop is required when rendered inside a CheckboxGroup.')
-      }
-      if (_defaultSelected !== undefined || _isSelected !== undefined || _onChange !== undefined) {
-        console.warn(
-          'Checkbox: `defaultSelected`, `isSelected`, and `onChange` are ignored inside a ' +
-            "CheckboxGroup — selection is owned by the group's `value`/`defaultValue`/`onChange`."
-        )
-      }
+      devError(
+        !rest.value,
+        'Checkbox: a `value` prop is required when rendered inside a CheckboxGroup.'
+      )
+      devWarning(
+        _defaultSelected !== undefined || _isSelected !== undefined || _onChange !== undefined,
+        'Checkbox: `defaultSelected`, `isSelected`, and `onChange` are ignored inside a ' +
+          "CheckboxGroup — selection is owned by the group's `value`/`defaultValue`/`onChange`."
+      )
       // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [])
 

package/src/components/checkbox/CheckboxGroup.tsx

@@ -130,7 +130,7 @@ export const CheckboxGroup = forwardRef<HTMLFieldSetElement, CheckboxGroupProps>
             {label}
           </legend>
         )}
-        {orientation === 'horizontal' ? <Flex gap="medium">{items}</Flex> : items}
+        {orientation === 'horizontal' ? <Flex gap="md">{items}</Flex> : items}
         {description && <FormHelp {...descriptionProps}>{description}</FormHelp>}
         {invalid && errorMessage && (
           <FormFeedback invalid {...errorMessageProps}>

package/src/components/chip/Chip.tsx

@@ -13,7 +13,8 @@ import { useButtonSemantics, useDisabledAnchorGuard } from '../../hooks'
 import {
   createPolymorphicComponent,
   PolymorphicComponentProps,
-  PolymorphicRef
+  PolymorphicRef,
+  PolymorphicRefWithFallback
 } from '../../utils/polymorphic'
 
 type ChipOwnProps<C extends ElementType> = {
@@ -51,9 +52,9 @@ type ChipOwnProps<C extends ElementType> = {
    */
   pressed?: boolean
   /**
-   * Size the component small or large.
+   * Size the component sm or lg.
    */
-  size?: 'small' | 'large'
+  size?: 'sm' | 'lg'
   /**
    * Specifies the type of button. Only applies when `component` is `button`. Different browsers
    * may use different default types for the `<button>` element, so always specify it explicitly.
@@ -71,7 +72,7 @@ export type ChipProps<C extends ElementType = 'span'> = PolymorphicComponentProp
 >
 
 type ChipComponent = (<C extends ElementType = 'span'>(
-  props: ChipProps<C> & { ref?: PolymorphicRef<C> }
+  props: ChipProps<C> & { ref?: PolymorphicRefWithFallback<C, HTMLSpanElement | HTMLAnchorElement> }
 ) => ReactElement | null) & { displayName?: string }
 
 function ChipRender<C extends ElementType = 'span'>(

package/src/components/chip-input/ChipInput.tsx

@@ -15,6 +15,7 @@ import { useControllableState, useForkedRef, useFormField } from '../../hooks'
 import { validationClassName } from '../../utils/validationClassName'
 import { renderFormField } from '../form-field/renderFormField'
 import { ChipList, ChipItem } from './ChipList'
+import { isRTL } from '../../utils/direction'
 
 // `allowDuplicates` means two tags can share a value, but react-stately's collection needs a
 // unique key per item — keying on the value alone collapses duplicates into the same node, so
@@ -106,9 +107,9 @@ export interface ChipInputProps extends Omit<
    */
   separator?: string | null
   /**
-   * Size the component small or large.
+   * Size the component sm or lg.
    */
-  size?: 'small' | 'large'
+  size?: 'sm' | 'lg'
   /**
    * Set component validation state to valid.
    */
@@ -237,9 +238,16 @@ export const ChipInput = forwardRef<HTMLDivElement, ChipInputProps>(
           }
           break
         }
-        case 'ArrowLeft': {
+        // Stepping backwards out of the text field and into the chips is a *visual* movement, so
+        // the key that does it mirrors under RTL — ArrowLeft in an LTR field, ArrowRight in an RTL
+        // one, matching where the chips actually sit relative to the caret. The caret check is
+        // unchanged: `selectionStart === 0` is the start of the text in either direction.
+        case 'ArrowLeft':
+        case 'ArrowRight': {
           const input = inputRef.current
-          if (input && input.selectionStart === 0 && input.selectionEnd === 0) {
+          if (!input) break
+          const movesBackward = (event.key === 'ArrowLeft') !== isRTL(input)
+          if (movesBackward && input.selectionStart === 0 && input.selectionEnd === 0) {
             event.preventDefault()
             focusLastChip(event.shiftKey)
           }

package/src/components/chip-input/ChipList.tsx

@@ -18,7 +18,7 @@ interface ChipListProps {
   disabled?: boolean
   groupRef: RefObject<HTMLDivElement | null>
   props: AriaTagGroupOptions<ChipItem>
-  size?: 'small' | 'large'
+  size?: 'sm' | 'lg'
   state: ListState<ChipItem>
 }
 
@@ -52,7 +52,7 @@ interface ChipRowProps {
   chipVariant?: string
   disabled?: boolean
   item: Node<ChipItem>
-  size?: 'small' | 'large'
+  size?: 'sm' | 'lg'
   state: ListState<ChipItem>
 }
 

package/src/components/close-button/CloseButton.tsx

@@ -55,9 +55,9 @@ type CloseButtonOwnProps<C extends ElementType> = {
    */
   onClick?: MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>
   /**
-   * Size the component small or large.
+   * Size the component sm or lg.
    */
-  size?: 'small' | 'large'
+  size?: 'sm' | 'lg'
   /**
    * Specifies the type of button. Always specify the type attribute for the `<button>` element.
    * Different browsers may use different default types for the `<button>` element.

package/src/components/color-input/ColorInput.tsx

@@ -39,9 +39,9 @@ export interface ColorInputProps extends Omit<InputHTMLAttributes<HTMLInputEleme
    */
   onChange?: ChangeEventHandler<HTMLInputElement>
   /**
-   * Size the component small or large.
+   * Size the component sm or lg.
    */
-  size?: 'small' | 'large'
+  size?: 'sm' | 'lg'
   /**
    * Set component validation state to valid.
    */

package/src/components/combobox/Combobox.tsx

@@ -108,9 +108,9 @@ export interface ComboboxProps extends Omit<
    */
   placeholder?: string
   /**
-   * Size the component small or large.
+   * Size the component sm or lg.
    */
-  size?: 'small' | 'large'
+  size?: 'sm' | 'lg'
   /**
    * Set component validation state to valid.
    */