@chassis-ui/react 0.1.2 → 0.2.0

package/src/components/icon/Icon.tsx

@@ -1,9 +1,13 @@
-import React, { forwardRef, HTMLAttributes, SVGAttributes } from 'react'
+import React, { CSSProperties, forwardRef, HTMLAttributes, SVGAttributes } from 'react'
 import classNames from 'classnames'
 
+import { useIconConfig } from '../../hooks/useIconConfig'
+import { DEFAULT_FONT_PREFIX } from '../../utils/iconConfig'
+
 interface IconOwnProps {
   /**
-   * Icon name, e.g. `folder-tree`. Matches a `cx-{name}` font glyph class or an id in the SVG sprite.
+   * Icon name, e.g. `folder-tree`. Matches an id in the SVG sprite, or a `cx-{name}` font glyph
+   * class in `font` mode (see `IconProvider`'s `fontPrefix`).
    */
   name: string
   /**
@@ -11,15 +15,18 @@ interface IconOwnProps {
    */
   className?: string
   /**
-   * Width/height (in px) applied to the SVG. Ignored in `font` mode.
+   * Icon size: a number of pixels, or any CSS length (`'1.25rem'`, `'1em'`). Sets chassis-css's
+   * `--cx-icon-size` on the icon, so it applies in `font` mode too. Leave unset to keep the size
+   * chassis-css gives icons in context (inside a button, an input, a navbar toggler, ...).
    */
-  size?: number
+  size?: number | string
   /**
    * Accessible name. When set, the icon is exposed to assistive tech instead of hidden.
    */
   title?: string
   /**
-   * Path to the SVG sprite file. Ignored in `font` mode.
+   * URL of the SVG sprite file. Defaults to `IconProvider`'s `sprite`, or to none — a sprite
+   * embedded in the page, referenced as `#name`. Ignored in `font` mode.
    */
   sprite?: string
 }
@@ -28,47 +35,71 @@ export type IconProps =
   | (IconOwnProps & { font: true } & Omit<HTMLAttributes<HTMLSpanElement>, keyof IconOwnProps>)
   | (IconOwnProps & { font?: false } & Omit<SVGAttributes<SVGSVGElement>, keyof IconOwnProps>)
 
-export const Icon = forwardRef<HTMLSpanElement | SVGSVGElement, IconProps>(
-  (
-    { name, className, size = 24, title, sprite = '/static/icons/chassis-icons.svg', ...props },
-    ref
-  ) => {
-    const _className = classNames('icon', { [`cx-${name}`]: props.font }, className)
+// An SVG's `width`/`height` attributes lose to chassis-css's `.icon { width: var(--cx-icon-size) }`
+// — `size` used to set only those, so `size={48}` rendered at the stylesheet's 24px whenever
+// chassis-css was loaded. The custom property is what actually sizes an icon; the attributes stay
+// as the fallback for a page without chassis-css, where an unsized `<svg>` would render 300×150.
+const FALLBACK_SIZE = 24
 
-    if (props.font) {
-      const { font: _, ...rest } = props
-      return (
-        <span
-          className={_className}
-          // A plain `<span>`'s implicit "generic" role doesn't support naming, so `aria-label`
-          // alone is dropped by browsers/assistive tech - `role="img"` (matching the SVG path's
-          // own implicit role) is what actually makes the accessible name stick.
-          role={title ? 'img' : undefined}
-          aria-hidden={title ? undefined : true}
-          aria-label={title}
-          ref={ref as React.Ref<HTMLSpanElement>}
-          {...rest}
-        />
-      )
-    }
+export const Icon = forwardRef<HTMLSpanElement | SVGSVGElement, IconProps>((props, ref) => {
+  const config = useIconConfig()
+  const {
+    name,
+    className,
+    font = config.font ?? false,
+    size,
+    sprite = config.sprite ?? '',
+    style,
+    title,
+    ...rest
+  } = props as IconOwnProps & { font?: boolean; style?: CSSProperties }
 
-    const { font: _, ...rest } = props
+  const sizeStyle =
+    size == null
+      ? style
+      : ({
+          '--cx-icon-size': typeof size === 'number' ? `${size}px` : size,
+          ...style
+        } as CSSProperties)
+  const _className = classNames(
+    'icon',
+    { [`${config.fontPrefix ?? DEFAULT_FONT_PREFIX}${name}`]: font },
+    config.className,
+    className
+  )
 
+  if (font) {
     return (
-      <svg
+      <span
         className={_className}
-        width={size}
-        height={size}
+        // A plain `<span>`'s implicit "generic" role doesn't support naming, so `aria-label`
+        // alone is dropped by browsers/assistive tech - `role="img"` (matching the SVG path's
+        // own implicit role) is what actually makes the accessible name stick.
         role={title ? 'img' : undefined}
         aria-hidden={title ? undefined : true}
-        ref={ref as React.Ref<SVGSVGElement>}
-        {...rest}
-      >
-        {title && <title>{title}</title>}
-        <use href={`${sprite}#${name}`} />
-      </svg>
+        aria-label={title}
+        style={sizeStyle}
+        ref={ref as React.Ref<HTMLSpanElement>}
+        {...(rest as HTMLAttributes<HTMLSpanElement>)}
+      />
     )
   }
-)
+
+  return (
+    <svg
+      className={_className}
+      width={size ?? FALLBACK_SIZE}
+      height={size ?? FALLBACK_SIZE}
+      role={title ? 'img' : undefined}
+      aria-hidden={title ? undefined : true}
+      style={sizeStyle}
+      ref={ref as React.Ref<SVGSVGElement>}
+      {...(rest as SVGAttributes<SVGSVGElement>)}
+    >
+      {title && <title>{title}</title>}
+      <use href={`${sprite}#${name}`} />
+    </svg>
+  )
+})
 
 Icon.displayName = 'Icon'

package/src/components/icon/IconProvider.tsx

@@ -0,0 +1,40 @@
+import React, { ReactNode, useMemo } from 'react'
+
+import { useIconConfig } from '../../hooks/useIconConfig'
+import { IconConfig, IconContext } from '../../utils/iconConfig'
+
+export interface IconProviderProps extends IconConfig {
+  /**
+   * The part of the app these icon settings apply to.
+   */
+  children?: ReactNode
+}
+
+// Nested providers extend the one above them: a setting left unset here keeps the outer value,
+// and `icons` merges per key, so an inner provider can remap one icon without restating the rest.
+export const IconProvider = ({
+  children,
+  className,
+  component,
+  font,
+  fontPrefix,
+  icons,
+  sprite
+}: IconProviderProps) => {
+  const parent = useIconConfig()
+  const value = useMemo<IconConfig>(
+    () => ({
+      className: className ?? parent.className,
+      component: component ?? parent.component,
+      font: font ?? parent.font,
+      fontPrefix: fontPrefix ?? parent.fontPrefix,
+      icons: icons ? { ...parent.icons, ...icons } : parent.icons,
+      sprite: sprite ?? parent.sprite
+    }),
+    [parent, className, component, font, fontPrefix, icons, sprite]
+  )
+
+  return <IconContext.Provider value={value}>{children}</IconContext.Provider>
+}
+
+IconProvider.displayName = 'IconProvider'

package/src/components/icon/index.ts

@@ -1,2 +1,9 @@
+'use client'
+
+import '../../utils/suppressFocusRingGlobally'
+
 export { Icon } from './Icon'
 export type { IconProps } from './Icon'
+export { IconProvider } from './IconProvider'
+export type { IconProviderProps } from './IconProvider'
+export type { IconComponentProps, IconKey, IconValue } from '../../utils/iconConfig'

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

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

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

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

package/src/components/link/index.ts

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

package/src/components/list/index.ts

@@ -1,3 +1,7 @@
+'use client'
+
+import '../../utils/suppressFocusRingGlobally'
+
 export { List } from './List'
 export type { ListProps, ListItemDef } from './List'
 export { ListItem } from './ListItem'

package/src/components/menu/index.ts

@@ -1,3 +1,7 @@
+'use client'
+
+import '../../utils/suppressFocusRingGlobally'
+
 export { Menu } from './Menu'
 export type { MenuProps, MenuFocusStrategy, MenuAutoClose } from './Menu'
 export { MenuDivider } from './MenuDivider'

package/src/components/modal/index.ts

@@ -1,3 +1,7 @@
+'use client'
+
+import '../../utils/suppressFocusRingGlobally'
+
 export { Modal } from './Modal'
 export type { ModalProps } from './Modal'
 export { ModalBody } from './ModalBody'
@@ -8,3 +12,7 @@ export { ModalHeader } from './ModalHeader'
 export type { ModalHeaderProps } from './ModalHeader'
 export { ModalTitle } from './ModalTitle'
 export type { ModalTitleProps } from './ModalTitle'
+// 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 { useModal } from '../../hooks/useModal'
+export type { UseModalResult } from '../../hooks/useModal'

package/src/components/nav/index.ts

@@ -1,3 +1,7 @@
+'use client'
+
+import '../../utils/suppressFocusRingGlobally'
+
 export { Nav } from './Nav'
 export type { NavProps, NavItemDef } from './Nav'
 export { NavItem } from './NavItem'

package/src/components/navbar/NavbarToggler.tsx

@@ -1,13 +1,19 @@
 import React, { forwardRef, HTMLAttributes } from 'react'
 import classNames from 'classnames'
 
-import { Icon } from '../icon/Icon'
+import { IconValue } from '../../utils/iconConfig'
+import { IconSlot } from '../../utils/iconSlot'
 
 export interface NavbarTogglerProps extends HTMLAttributes<HTMLButtonElement> {
   /**
    * A string of all className you want applied to the base component.
    */
   className?: string
+  /**
+   * The toggler icon: an icon name, or an element of your own icon set. Defaults to
+   * `IconProvider`'s `menu` icon.
+   */
+  icon?: IconValue
   /**
    * The accessible label announced by assistive technology when no children are provided.
    */
@@ -15,14 +21,14 @@ export interface NavbarTogglerProps extends HTMLAttributes<HTMLButtonElement> {
 }
 
 export const NavbarToggler = forwardRef<HTMLButtonElement, NavbarTogglerProps>(
-  ({ children, className, label = 'Toggle navigation', ...rest }, ref) => {
+  ({ children, className, icon, label = 'Toggle navigation', ...rest }, ref) => {
     const _className = classNames('button icon-only navbar-toggler', className)
 
     return (
       <button type="button" className={_className} {...rest} ref={ref}>
         {children ?? (
           <>
-            <Icon name="bars-outline" className="navbar-toggler-icon" />
+            <IconSlot icon="menu" override={icon} className="navbar-toggler-icon" />
             <span className="visually-hidden">{label}</span>
           </>
         )}

package/src/components/navbar/index.ts

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

package/src/components/notification/Notification.tsx

@@ -7,7 +7,7 @@ import { ContextColor } from '../../types'
 import { CloseButton } from '../close-button/CloseButton'
 import { useAutoDismiss, useDismissibleTransition } from '../../hooks'
 import { NotificationContext } from './context'
-import { NotificationIcon } from './NotificationIcon'
+import { ResolvedIcon } from '../../utils/iconSlot'
 import { NotificationText } from './NotificationText'
 import { NotificationTitle } from './NotificationTitle'
 import './Notification.scss'
@@ -45,7 +45,8 @@ export interface NotificationProps extends Omit<HTMLAttributes<HTMLDivElement>,
    */
   dismissible?: boolean
   /**
-   * Leading icon. A string is rendered as `<NotificationIcon name={icon} />`; pass any other
+   * Leading icon. A string is an icon name, rendered like `<NotificationIcon name={icon} />` (or
+   * by `IconProvider`'s `component`); pass any other
    * node for a fully custom icon. Automatically top-aligns with `title` when both are set —
    * a custom icon node is responsible for its own alignment.
    */
@@ -159,9 +160,9 @@ export const Notification = forwardRef<HTMLDivElement, NotificationProps>(
               >
                 {icon &&
                   (typeof icon === 'string' ? (
-                    <NotificationIcon
-                      name={icon}
-                      className={title ? 'align-self-start' : undefined}
+                    <ResolvedIcon
+                      value={icon}
+                      className={classNames('notification-icon', { 'align-self-start': !!title })}
                     />
                   ) : (
                     icon

package/src/components/notification/index.ts

@@ -1,3 +1,7 @@
+'use client'
+
+import '../../utils/suppressFocusRingGlobally'
+
 export { Notification } from './Notification'
 export type { NotificationProps } from './Notification'
 export { NotificationTitle } from './NotificationTitle'
@@ -15,3 +19,7 @@ export { NotificationStack } from './NotificationStack'
 export type { NotificationStackProps } from './NotificationStack'
 export { addNotification, closeNotification, notificationQueue } from './notificationQueue'
 export type { NotificationContent } from './notificationQueue'
+// 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 { useNotification } from '../../hooks/useNotification'
+export type { UseNotificationResult } from '../../hooks/useNotification'

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

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

package/src/components/pagination/Pagination.tsx

@@ -1,5 +1,6 @@
 import React, { forwardRef, HTMLAttributes } from 'react'
-import { Icon } from '../icon'
+import { IconValue } from '../../utils/iconConfig'
+import { IconSlot } from '../../utils/iconSlot'
 import classNames from 'classnames'
 
 import { PaginationItem } from './PaginationItem'
@@ -29,6 +30,11 @@ export interface PaginationProps extends HTMLAttributes<HTMLElement> {
    * Maximum number of visible page buttons (default: 5). Flanking pages are collapsed to ellipsis.
    */
   maxVisiblePages?: number
+  /**
+   * The "next page" control's icon in smart pagination mode: an icon name, or an element of your
+   * own icon set. Defaults to `IconProvider`'s `next` icon.
+   */
+  nextIcon?: IconValue
   /**
    * Accessible label for the "next page" control, used in smart pagination mode. Override for
    * non-English locales.
@@ -45,6 +51,11 @@ export interface PaginationProps extends HTMLAttributes<HTMLElement> {
    * the component renders a fully-controlled smart paginator with Prev/Next and ellipsis.
    */
   pages?: number
+  /**
+   * The "previous page" control's icon in smart pagination mode: an icon name, or an element of
+   * your own icon set. Defaults to `IconProvider`'s `previous` icon.
+   */
+  previousIcon?: IconValue
   /**
    * Accessible label for the "previous page" control, used in smart pagination mode. Override
    * for non-English locales.
@@ -115,9 +126,11 @@ export const Pagination = forwardRef<HTMLElement, PaginationProps>(
       children,
       className,
       maxVisiblePages = 5,
+      nextIcon,
       nextLabel = 'Next',
       onActivePageChange,
       pages,
+      previousIcon,
       previousLabel = 'Previous',
       showPageNumbers = true,
       showPrevNext = true,
@@ -155,7 +168,7 @@ export const Pagination = forwardRef<HTMLElement, PaginationProps>(
             onClick={handlePrevClick}
             aria-label={previousLabel}
           >
-            <Icon name="chevron-left-solid" className="directional-icon" />
+            <IconSlot icon="previous" override={previousIcon} className="directional-icon" />
           </PaginationItem>
         )}
         {showPageNumbers &&
@@ -182,7 +195,7 @@ export const Pagination = forwardRef<HTMLElement, PaginationProps>(
             onClick={handleNextClick}
             aria-label={nextLabel}
           >
-            <Icon name="chevron-right-solid" className="directional-icon" />
+            <IconSlot icon="next" override={nextIcon} className="directional-icon" />
           </PaginationItem>
         )}
       </>

package/src/components/pagination/index.ts

@@ -1,4 +1,12 @@
+'use client'
+
+import '../../utils/suppressFocusRingGlobally'
+
 export { Pagination } from './Pagination'
 export type { PaginationProps } from './Pagination'
 export { PaginationItem } from './PaginationItem'
 export type { PaginationItemProps } from './PaginationItem'
+// 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 { usePagination } from '../../hooks/usePagination'
+export type { UsePaginationResult } from '../../hooks/usePagination'

package/src/components/password-strength/index.ts

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

package/src/components/placeholder/index.ts

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

package/src/components/popover/index.ts

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

package/src/components/progress/index.ts

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

package/src/components/radio/Radio.tsx

@@ -31,6 +31,11 @@ export interface RadioProps extends Omit<
   id?: string
   /**
    * 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
   /**
@@ -47,7 +52,7 @@ export interface RadioProps extends Omit<
 // radio hook, only useRadio(props, RadioGroupState, ref), because a lone radio with no group is
 // not a meaningful accessible control (see https://chassis-ui.com/css/docs/forms/checkbox-radio).
 export const Radio = forwardRef<HTMLInputElement, RadioProps>(
-  ({ button, className, color, disabled, id, label, size, ...rest }, ref) => {
+  ({ button, children, className, color, disabled, id, label, size, ...rest }, ref) => {
     const group = useContext(RadioGroupContext)
 
     if (!group) {
@@ -60,10 +65,15 @@ export const Radio = forwardRef<HTMLInputElement, RadioProps>(
     const inputRef = useRef<HTMLInputElement>(null)
     const forkedRef = useForkedRef(ref, inputRef)
 
+    // `label` is this package's name for what react-aria calls `children`. Accept either, so the
+    // shape React developers reach for first (`<Radio>Label</Radio>`) names the control instead of
+    // being silently dropped — see the note on `label` in `RadioProps`.
+    const resolvedLabel = label ?? children
+
     const { inputProps } = useRadio(
       {
         ...rest,
-        children: label,
+        children: resolvedLabel,
         isDisabled: disabled
       } as AriaRadioProps,
       groupState,
@@ -78,7 +88,7 @@ export const Radio = forwardRef<HTMLInputElement, RadioProps>(
       color,
       input: <input {...inputProps} className={inputClassName} id={id} ref={forkedRef} />,
       invalid,
-      label,
+      label: resolvedLabel,
       size,
       valid
     })

package/src/components/radio/index.ts

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

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

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

package/src/components/select/index.ts

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

package/src/components/skeleton/SkeletonLoader.tsx

@@ -1,8 +1,13 @@
-import React, { ElementType, Fragment, ReactElement, ReactNode } from 'react'
+import React, {
+  ComponentPropsWithoutRef,
+  ElementType,
+  Fragment,
+  ReactElement,
+  ReactNode
+} from 'react'
 
 import { Span } from '../../utils/breakpoints'
 import { ContextColor } from '../../types'
-import { PolymorphicComponentProps } from '../../utils/polymorphic'
 import { Skeleton, SkeletonProps } from './Skeleton'
 
 type SkeletonLoaderOwnProps<C extends ElementType> = {
@@ -38,10 +43,12 @@ type SkeletonLoaderOwnProps<C extends ElementType> = {
   spans?: Span | Span[]
 }
 
-export type SkeletonLoaderProps<C extends ElementType = 'span'> = PolymorphicComponentProps<
-  C,
-  SkeletonLoaderOwnProps<C>
->
+// Spelled out rather than `PolymorphicComponentProps`, which adds `asChild`: `SkeletonLoader`
+// renders no element of its own (it swaps its `children` for generated `Skeleton` lines), so
+// there's nothing for a child element to stand in for. (`Omit`-ing it from that type instead
+// breaks `C`'s inference from `component`.)
+export type SkeletonLoaderProps<C extends ElementType = 'span'> = SkeletonLoaderOwnProps<C> &
+  Omit<ComponentPropsWithoutRef<C>, keyof SkeletonLoaderOwnProps<C> | 'asChild'>
 
 type SkeletonLoaderComponent = (<C extends ElementType = 'span'>(
   props: SkeletonLoaderProps<C>

package/src/components/skeleton/index.ts

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

package/src/components/spinner/index.ts

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

package/src/components/stack/index.ts

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