@chassis-ui/react 0.1.2 → 0.2.0

package/dist/tabs.d.ts

@@ -0,0 +1,2 @@
+import { a as Tab, c as TabsProps, i as TabListProps, n as TabPanelProps, o as TabProps, r as TabList, s as Tabs, t as TabPanel } from "./chunks/index-COsYSDrz.js";
+export { Tab, TabList, type TabListProps, TabPanel, type TabPanelProps, type TabProps, Tabs, type TabsProps };

package/dist/tabs.js

@@ -0,0 +1 @@
+"use client";import{i as e,n as t,r as n,t as r}from"./chunks/tabs-BnbMJM_b.js";export{t as Tab,e as TabList,r as TabPanel,n as Tabs};

package/dist/text-input.d.ts

@@ -0,0 +1,2 @@
+import { n as TextInputProps, t as TextInput } from "./chunks/index-6uob77s9.js";
+export { TextInput, type TextInputProps };

package/dist/text-input.js

@@ -0,0 +1 @@
+"use client";import{t as e}from"./chunks/text-input-DD3d08Yf.js";export{e as TextInput};

package/dist/textarea.d.ts

@@ -0,0 +1,2 @@
+import { n as TextareaProps, t as Textarea } from "./chunks/index-Dfg4Ftb8.js";
+export { Textarea, type TextareaProps };

package/dist/textarea.js

@@ -0,0 +1 @@
+"use client";import{t as e}from"./chunks/textarea-C0qQdCcu.js";export{e as Textarea};

package/dist/toast.d.ts

@@ -0,0 +1,2 @@
+import { _ as Toast, a as closeToast, c as ToasterProps, d as ToastHeader, f as ToastHeaderProps, g as ToastBodyProps, h as ToastBody, i as addToast, l as ToastIcon, m as ToastFooterProps, n as useToast, o as toastQueue, p as ToastFooter, r as ToastContent, s as Toaster, t as UseToastResult, u as ToastIconProps, v as ToastProps } from "./chunks/index-BlgkO3dn.js";
+export { Toast, ToastBody, type ToastBodyProps, type ToastContent, ToastFooter, type ToastFooterProps, ToastHeader, type ToastHeaderProps, ToastIcon, type ToastIconProps, type ToastProps, Toaster, type ToasterProps, type UseToastResult, addToast, closeToast, toastQueue, useToast };

package/dist/toast.js

@@ -0,0 +1 @@
+"use client";import{a as e,c as t,i as n,l as r,n as i,o as a,r as o,s,t as c,u as l}from"./chunks/toast-BQhZ2pv5.js";export{a as Toast,r as ToastBody,t as ToastFooter,s as ToastHeader,e as ToastIcon,c as Toaster,i as addToast,o as closeToast,n as toastQueue,l as useToast};

package/dist/tooltip.d.ts

@@ -0,0 +1,2 @@
+import { n as TooltipProps, t as Tooltip } from "./chunks/index-D949AidR.js";
+export { Tooltip, type TooltipProps };

package/dist/tooltip.js

@@ -0,0 +1 @@
+"use client";import{t as e}from"./chunks/tooltip-DHtVAYUo.js";export{e as Tooltip};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chassis-ui/react",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "type": "module",
   "description": "Chassis UI Components Library for React.js",
   "keywords": [
@@ -29,11 +29,69 @@
   },
   "exports": {
     ".": "./dist/index.js",
+    "./accordion": "./dist/accordion.js",
+    "./autocomplete": "./dist/autocomplete.js",
+    "./avatar": "./dist/avatar.js",
+    "./badge": "./dist/badge.js",
+    "./breadcrumb": "./dist/breadcrumb.js",
+    "./button": "./dist/button.js",
+    "./button-group": "./dist/button-group.js",
+    "./calendar": "./dist/calendar.js",
+    "./card": "./dist/card.js",
+    "./carousel": "./dist/carousel.js",
+    "./checkbox": "./dist/checkbox.js",
+    "./chip": "./dist/chip.js",
+    "./chip-input": "./dist/chip-input.js",
+    "./close-button": "./dist/close-button.js",
+    "./collapse": "./dist/collapse.js",
+    "./color-input": "./dist/color-input.js",
+    "./combobox": "./dist/combobox.js",
+    "./datagrid": "./dist/datagrid.js",
+    "./datepicker": "./dist/datepicker.js",
+    "./drawer": "./dist/drawer.js",
+    "./file-input": "./dist/file-input.js",
+    "./flex": "./dist/flex.js",
+    "./floating-input": "./dist/floating-input.js",
+    "./form": "./dist/form.js",
+    "./form-field": "./dist/form-field.js",
+    "./grid": "./dist/grid.js",
+    "./icon": "./dist/icon.js",
+    "./input-adorn": "./dist/input-adorn.js",
+    "./input-group": "./dist/input-group.js",
+    "./link": "./dist/link.js",
+    "./list": "./dist/list.js",
+    "./menu": "./dist/menu.js",
+    "./modal": "./dist/modal.js",
+    "./nav": "./dist/nav.js",
+    "./navbar": "./dist/navbar.js",
+    "./notification": "./dist/notification.js",
+    "./otp-input": "./dist/otp-input.js",
+    "./pagination": "./dist/pagination.js",
+    "./password-strength": "./dist/password-strength.js",
+    "./placeholder": "./dist/placeholder.js",
+    "./popover": "./dist/popover.js",
+    "./progress": "./dist/progress.js",
+    "./radio": "./dist/radio.js",
+    "./range-input": "./dist/range-input.js",
+    "./select": "./dist/select.js",
+    "./skeleton": "./dist/skeleton.js",
+    "./spinner": "./dist/spinner.js",
+    "./stack": "./dist/stack.js",
+    "./static-table": "./dist/static-table.js",
+    "./stepper": "./dist/stepper.js",
+    "./switch": "./dist/switch.js",
+    "./table": "./dist/table.js",
+    "./tabs": "./dist/tabs.js",
+    "./text-input": "./dist/text-input.js",
+    "./textarea": "./dist/textarea.js",
+    "./toast": "./dist/toast.js",
+    "./tooltip": "./dist/tooltip.js",
     "./package.json": "./package.json",
     "./style.css": "./dist/style.css"
   },
   "sideEffects": [
-    "./dist/index.js",
+    "./dist/*.js",
+    "./dist/chunks/focus-ring-*.js",
     "./dist/style.css"
   ],
   "browserslist": [
@@ -57,8 +115,8 @@
   "devDependencies": {
     "@arethetypeswrong/cli": "^0.18.5",
     "@arethetypeswrong/core": "^0.18.5",
-    "@chassis-ui/css": "^0.4.0-0",
-    "@chassis-ui/tokens": "^0.4.0",
+    "@chassis-ui/css": "^0.5.0",
+    "@chassis-ui/tokens": "^0.5.0",
     "@playwright/test": "1.62.1",
     "@storybook/addon-a11y": "^10.6.0",
     "@storybook/addon-docs": "^10.6.0",

package/src/components/accordion/index.ts

@@ -1,3 +1,7 @@
+'use client'
+
+import '../../utils/suppressFocusRingGlobally'
+
 export { Accordion } from './Accordion'
 export type { AccordionProps, AccordionItemDef } from './Accordion'
 export { AccordionBody } from './AccordionBody'

package/src/components/autocomplete/index.ts

@@ -1,3 +1,7 @@
+'use client'
+
+import '../../utils/suppressFocusRingGlobally'
+
 export { Autocomplete } from './Autocomplete'
 export type { AutocompleteProps } from './Autocomplete'
 export { AutocompleteGroup } from './AutocompleteGroup'

package/src/components/avatar/index.ts

@@ -1,3 +1,7 @@
+'use client'
+
+import '../../utils/suppressFocusRingGlobally'
+
 export { Avatar } from './Avatar'
 export type { AvatarProps } from './Avatar'
 export { AvatarImage } from './AvatarImage'

package/src/components/badge/index.ts

@@ -1,2 +1,6 @@
+'use client'
+
+import '../../utils/suppressFocusRingGlobally'
+
 export { Badge } from './Badge'
 export type { BadgeProps } from './Badge'

package/src/components/breadcrumb/index.ts

@@ -1,3 +1,7 @@
+'use client'
+
+import '../../utils/suppressFocusRingGlobally'
+
 export { Breadcrumb } from './Breadcrumb'
 export type { BreadcrumbProps, BreadcrumbItemDef } from './Breadcrumb'
 export { BreadcrumbItem } from './BreadcrumbItem'

package/src/components/button/index.ts

@@ -1,2 +1,6 @@
+'use client'
+
+import '../../utils/suppressFocusRingGlobally'
+
 export { Button } from './Button'
 export type { ButtonProps } from './Button'

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

@@ -1,3 +1,7 @@
+'use client'
+
+import '../../utils/suppressFocusRingGlobally'
+
 export { ButtonGroup } from './ButtonGroup'
 export type { ButtonGroupProps } from './ButtonGroup'
 export { ButtonToolbar } from './ButtonToolbar'

package/src/components/calendar/index.ts

@@ -1,3 +1,7 @@
+'use client'
+
+import '../../utils/suppressFocusRingGlobally'
+
 export { Calendar } from './Calendar'
 export type { CalendarProps, CalendarSingleProps, CalendarMultipleProps } from './Calendar'
 export { RangeCalendar } from './RangeCalendar'

package/src/components/card/index.ts

@@ -1,3 +1,7 @@
+'use client'
+
+import '../../utils/suppressFocusRingGlobally'
+
 export { Card } from './Card'
 export type { CardProps } from './Card'
 export { CardBody } from './CardBody'

package/src/components/carousel/CarouselControlButton.tsx

@@ -3,7 +3,8 @@ import classNames from 'classnames'
 
 import { useForkedRef } from '../../hooks'
 import { markPointerClick } from '../../utils/pointerInteraction'
-import { Icon } from '../icon'
+import { IconValue } from '../../utils/iconConfig'
+import { IconSlot } from '../../utils/iconSlot'
 import { useCarouselContext } from './context'
 
 interface CarouselControlButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
@@ -15,6 +16,11 @@ interface CarouselControlButtonProps extends ButtonHTMLAttributes<HTMLButtonElem
    * Which direction this control navigates, and which end-of-track state disables it.
    */
   direction: 'prev' | 'next'
+  /**
+   * The control's icon: an icon name, or an element of your own icon set. Defaults to
+   * `IconProvider`'s `previous`/`next` icon.
+   */
+  icon?: IconValue
   /**
    * The accessible label announced by assistive technology.
    */
@@ -24,7 +30,7 @@ interface CarouselControlButtonProps extends ButtonHTMLAttributes<HTMLButtonElem
 // Shared prev/next control, used by both CarouselControlPrev and CarouselControlNext — mirrors
 // how CalendarNavButton.tsx factors the same shape for Calendar/RangeCalendar.
 export const CarouselControlButton = forwardRef<HTMLButtonElement, CarouselControlButtonProps>(
-  ({ children, className, direction, disabled, label, onClick, ...rest }, ref) => {
+  ({ children, className, direction, disabled, icon, label, onClick, ...rest }, ref) => {
     const { atEnd, atStart, ends, next, prev, registerControl } = useCarouselContext()
     const buttonRef = useRef<HTMLButtonElement>(null)
     const forkedRef = useForkedRef(ref, buttonRef)
@@ -59,8 +65,9 @@ export const CarouselControlButton = forwardRef<HTMLButtonElement, CarouselContr
       >
         {children ?? (
           <>
-            <Icon
-              name={direction === 'next' ? 'chevron-right-outline' : 'chevron-left-outline'}
+            <IconSlot
+              icon={direction === 'next' ? 'next' : 'previous'}
+              override={icon}
               className="directional-icon"
             />
             <span className="visually-hidden">{label}</span>

package/src/components/carousel/CarouselControlNext.tsx

@@ -1,5 +1,6 @@
 import React, { ButtonHTMLAttributes, forwardRef } from 'react'
 
+import { IconValue } from '../../utils/iconConfig'
 import { CarouselControlButton } from './CarouselControlButton'
 
 export interface CarouselControlNextProps extends ButtonHTMLAttributes<HTMLButtonElement> {
@@ -7,6 +8,11 @@ export interface CarouselControlNextProps extends ButtonHTMLAttributes<HTMLButto
    * A string of all className you want applied to the component.
    */
   className?: string
+  /**
+   * The control's icon: an icon name, or an element of your own icon set. Defaults to
+   * `IconProvider`'s `next` icon.
+   */
+  icon?: IconValue
   /**
    * The accessible label announced by assistive technology.
    */

package/src/components/carousel/CarouselControlPrev.tsx

@@ -1,5 +1,6 @@
 import React, { ButtonHTMLAttributes, forwardRef } from 'react'
 
+import { IconValue } from '../../utils/iconConfig'
 import { CarouselControlButton } from './CarouselControlButton'
 
 export interface CarouselControlPrevProps extends ButtonHTMLAttributes<HTMLButtonElement> {
@@ -7,6 +8,11 @@ export interface CarouselControlPrevProps extends ButtonHTMLAttributes<HTMLButto
    * A string of all className you want applied to the component.
    */
   className?: string
+  /**
+   * The control's icon: an icon name, or an element of your own icon set. Defaults to
+   * `IconProvider`'s `previous` icon.
+   */
+  icon?: IconValue
   /**
    * The accessible label announced by assistive technology.
    */

package/src/components/carousel/CarouselPlayPause.tsx

@@ -1,7 +1,8 @@
 import React, { ButtonHTMLAttributes, forwardRef } from 'react'
 import classNames from 'classnames'
 
-import { Icon } from '../icon'
+import { IconValue } from '../../utils/iconConfig'
+import { IconSlot } from '../../utils/iconSlot'
 import { useCarouselContext } from './context'
 
 export interface CarouselPlayPauseProps extends ButtonHTMLAttributes<HTMLButtonElement> {
@@ -9,6 +10,11 @@ export interface CarouselPlayPauseProps extends ButtonHTMLAttributes<HTMLButtonE
    * A string of all className you want applied to the component.
    */
   className?: string
+  /**
+   * The icon shown while autoplay is running: an icon name, or an element of your own icon set.
+   * Defaults to `IconProvider`'s `pause` icon.
+   */
+  pauseIcon?: IconValue
   /**
    * The accessible label announced while autoplay is running.
    */
@@ -17,6 +23,11 @@ export interface CarouselPlayPauseProps extends ButtonHTMLAttributes<HTMLButtonE
    * The accessible label announced while autoplay is stopped.
    */
   playLabel?: string
+  /**
+   * The icon shown while autoplay is stopped: an icon name, or an element of your own icon set.
+   * Defaults to `IconProvider`'s `play` icon.
+   */
+  playIcon?: IconValue
 }
 
 /**
@@ -25,7 +36,19 @@ export interface CarouselPlayPauseProps extends ButtonHTMLAttributes<HTMLButtonE
  * icon while playing, a play icon once stopped.
  */
 export const CarouselPlayPause = forwardRef<HTMLButtonElement, CarouselPlayPauseProps>(
-  ({ children, className, onClick, pauseLabel = 'Pause', playLabel = 'Play', ...rest }, ref) => {
+  (
+    {
+      children,
+      className,
+      onClick,
+      pauseIcon,
+      pauseLabel = 'Pause',
+      playIcon,
+      playLabel = 'Play',
+      ...rest
+    },
+    ref
+  ) => {
     const { playing, togglePlayPause } = useCarouselContext()
     const _className = classNames(
       'carousel-control-play-pause button sm icon-only',
@@ -49,8 +72,8 @@ export const CarouselPlayPause = forwardRef<HTMLButtonElement, CarouselPlayPause
       >
         {children ?? (
           <>
-            <Icon name="pause-solid" className="carousel-icon-pause" aria-hidden="true" />
-            <Icon name="play-solid" className="carousel-icon-play" aria-hidden="true" />
+            <IconSlot icon="pause" override={pauseIcon} className="carousel-icon-pause" />
+            <IconSlot icon="play" override={playIcon} className="carousel-icon-play" />
           </>
         )}
       </button>

package/src/components/carousel/index.ts

@@ -1,3 +1,7 @@
+'use client'
+
+import '../../utils/suppressFocusRingGlobally'
+
 export { Carousel } from './Carousel'
 export type {
   CarouselEnds,

package/src/components/checkbox/Checkbox.tsx

@@ -65,6 +65,11 @@ export interface CheckboxProps extends Omit<
   isSelected?: boolean
   /**
    * The element represents a caption for a component.
+   *
+   * Children are accepted as an alias for this prop — `label` wins when both are given.
+   * react-aria, which backs this component, calls the same thing `children`; this package renames
+   * it to `label`, and honouring both means the shape React developers reach for first still
+   * names the control instead of silently producing an unlabelled one.
    */
   label?: ReactNode
   /**
@@ -91,6 +96,7 @@ const CheckboxStandalone = forwardRef<HTMLInputElement, CheckboxProps>(
   (
     {
       button,
+      children,
       className,
       color,
       defaultSelected,
@@ -117,10 +123,14 @@ const CheckboxStandalone = forwardRef<HTMLInputElement, CheckboxProps>(
       onChange
     })
 
+    // `label` is this package's name for what react-aria calls `children`. Accept either, so the
+    // shape React developers reach for first names the control instead of vanishing.
+    const resolvedLabel = label ?? children
+
     const { inputProps } = useCheckbox(
       {
         ...rest,
-        children: label,
+        children: resolvedLabel,
         isDisabled: disabled,
         isIndeterminate: indeterminate,
         isInvalid: invalid,
@@ -138,7 +148,7 @@ const CheckboxStandalone = forwardRef<HTMLInputElement, CheckboxProps>(
       color,
       input: <input {...inputProps} className={inputClassName} id={id} ref={forkedRef} />,
       invalid,
-      label,
+      label: resolvedLabel,
       size,
       valid
     })
@@ -155,6 +165,7 @@ const CheckboxGroupItem = forwardRef<HTMLInputElement, CheckboxGroupItemProps>(
   (
     {
       button,
+      children,
       className,
       color,
       defaultSelected: _defaultSelected,
@@ -196,10 +207,14 @@ const CheckboxGroupItem = forwardRef<HTMLInputElement, CheckboxGroupItemProps>(
       // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [])
 
+    // `label` is this package's name for what react-aria calls `children`. Accept either, so the
+    // shape React developers reach for first names the control instead of vanishing.
+    const resolvedLabel = label ?? children
+
     const { inputProps } = useCheckboxGroupItem(
       {
         ...rest,
-        children: label,
+        children: resolvedLabel,
         isDisabled: disabled,
         isIndeterminate: indeterminate,
         isInvalid: invalid,
@@ -217,7 +232,7 @@ const CheckboxGroupItem = forwardRef<HTMLInputElement, CheckboxGroupItemProps>(
       color,
       input: <input {...inputProps} className={inputClassName} id={id} ref={forkedRef} />,
       invalid,
-      label,
+      label: resolvedLabel,
       size,
       valid
     })

package/src/components/checkbox/index.ts

@@ -1,3 +1,7 @@
+'use client'
+
+import '../../utils/suppressFocusRingGlobally'
+
 export { Checkbox } from './Checkbox'
 export type { CheckboxProps, ButtonObject } from './Checkbox'
 export { CheckboxGroup } from './CheckboxGroup'

package/src/components/chip/index.ts

@@ -1,2 +1,6 @@
+'use client'
+
+import '../../utils/suppressFocusRingGlobally'
+
 export { Chip } from './Chip'
 export type { ChipProps } from './Chip'

package/src/components/chip-input/index.ts

@@ -1,2 +1,6 @@
+'use client'
+
+import '../../utils/suppressFocusRingGlobally'
+
 export { ChipInput } from './ChipInput'
 export type { ChipInputProps } from './ChipInput'

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

@@ -1,2 +1,6 @@
+'use client'
+
+import '../../utils/suppressFocusRingGlobally'
+
 export { CloseButton } from './CloseButton'
 export type { CloseButtonProps } from './CloseButton'

package/src/components/collapse/index.ts

@@ -1,2 +1,6 @@
+'use client'
+
+import '../../utils/suppressFocusRingGlobally'
+
 export { Collapse } from './Collapse'
 export type { CollapseProps } from './Collapse'

package/src/components/color-input/index.ts

@@ -1,2 +1,6 @@
+'use client'
+
+import '../../utils/suppressFocusRingGlobally'
+
 export { ColorInput } from './ColorInput'
 export type { ColorInputProps } from './ColorInput'

package/src/components/combobox/ComboboxListBox.tsx

@@ -5,7 +5,7 @@ import { ComboBoxState, Node } from 'react-stately'
 
 import { getVirtualFocusStyle } from '../../utils/virtualFocusStyle'
 import { ComboboxEntry, ComboboxSelectionMode } from '../../utils/comboboxCollection'
-import { Icon } from '../icon/Icon'
+import { IconSlot } from '../../utils/iconSlot'
 
 interface ComboboxListBoxProps<M extends ComboboxSelectionMode = 'single'> {
   listBoxProps: AriaListBoxOptions<ComboboxEntry>
@@ -92,7 +92,7 @@ const ComboboxOption = <M extends ComboboxSelectionMode = 'single'>({
       ref={ref}
     >
       {item.rendered}
-      {isSelected && <Icon name="check-solid" className="menu-item-check" />}
+      {isSelected && <IconSlot icon="check" className="menu-item-check" />}
     </div>
   )
 }

package/src/components/combobox/index.ts

@@ -1,3 +1,7 @@
+'use client'
+
+import '../../utils/suppressFocusRingGlobally'
+
 export { Combobox } from './Combobox'
 export type { ComboboxProps } from './Combobox'
 export { ComboboxGroup } from './ComboboxGroup'

package/src/components/datagrid/index.ts

@@ -1,3 +1,7 @@
+'use client'
+
+import '../../utils/suppressFocusRingGlobally'
+
 export { DataGrid } from './DataGrid'
 export type { DataGridProps } from './DataGrid'
 export { DataGridBody } from './DataGridBody'

package/src/components/datepicker/index.ts

@@ -1,3 +1,7 @@
+'use client'
+
+import '../../utils/suppressFocusRingGlobally'
+
 export { DatePicker } from './DatePicker'
 export type { DatePickerProps, DatePickerSingleProps, DatePickerMultipleProps } from './DatePicker'
 export { DateRangePicker } from './DateRangePicker'

package/src/components/drawer/index.ts

@@ -1,3 +1,7 @@
+'use client'
+
+import '../../utils/suppressFocusRingGlobally'
+
 export { Drawer } from './Drawer'
 export type { DrawerProps } from './Drawer'
 export { DrawerBody } from './DrawerBody'
@@ -8,3 +12,7 @@ export { DrawerHeader } from './DrawerHeader'
 export type { DrawerHeaderProps } from './DrawerHeader'
 export { DrawerTitle } from './DrawerTitle'
 export type { DrawerTitleProps } from './DrawerTitle'
+// Also exported from the package root; repeated here so this folder's subpath entry
+// (`@chassis-ui/react/<folder>`) covers the whole family without reaching back to the root.
+export { useDrawer } from '../../hooks/useDrawer'
+export type { UseDrawerResult } from '../../hooks/useDrawer'

package/src/components/file-input/index.ts

@@ -1,2 +1,6 @@
+'use client'
+
+import '../../utils/suppressFocusRingGlobally'
+
 export { FileInput } from './FileInput'
 export type { FileInputProps } from './FileInput'

package/src/components/flex/index.ts

@@ -1,2 +1,6 @@
+'use client'
+
+import '../../utils/suppressFocusRingGlobally'
+
 export { Flex } from './Flex'
 export type { FlexProps } from './Flex'

package/src/components/floating-input/index.ts

@@ -1,2 +1,6 @@
+'use client'
+
+import '../../utils/suppressFocusRingGlobally'
+
 export { FloatingInput } from './FloatingInput'
 export type { FloatingInputProps } from './FloatingInput'

package/src/components/form/index.ts

@@ -1,3 +1,7 @@
+'use client'
+
+import '../../utils/suppressFocusRingGlobally'
+
 export { Form } from './Form'
 export type { FormProps } from './Form'
 export { FormLabel } from './FormLabel'

package/src/components/form-field/index.ts

@@ -1,2 +1,6 @@
+'use client'
+
+import '../../utils/suppressFocusRingGlobally'
+
 export { FormField } from './FormField'
 export type { FormFieldProps } from './FormField'

package/src/components/grid/index.ts

@@ -1,3 +1,7 @@
+'use client'
+
+import '../../utils/suppressFocusRingGlobally'
+
 export { Col } from './Col'
 export type { ColProps } from './Col'
 export { Container } from './Container'