@chassis-ui/react 0.2.0 → 0.3.0

package/src/components/grid/Row.tsx

@@ -1,71 +0,0 @@
-import React, { forwardRef, HTMLAttributes } from 'react'
-import classNames from 'classnames'
-
-import { buildResponsiveClassNames } from '../../utils/breakpoints'
-import { spacingClassName } from '../../utils/spacingClassName'
-import { Breakpoint, Spacing } from '../../types'
-
-export interface RowLayout {
-  /**
-   * Equal-width columns per row, or `'auto'` for content-sized columns.
-   *
-   * @type { 'auto' | number | string }
-   */
-  cols?: 'auto' | number | string
-  /**
-   * Gutter width on both axes.
-   *
-   * @type { Spacing | 0 }
-   */
-  gutter?: Spacing | 0
-  /**
-   * Horizontal gutter width.
-   *
-   * @type { Spacing | 0 }
-   */
-  gutterX?: Spacing | 0
-  /**
-   * Vertical gutter width.
-   *
-   * @type { Spacing | 0 }
-   */
-  gutterY?: Spacing | 0
-}
-
-export interface RowProps extends HTMLAttributes<HTMLDivElement>, RowLayout {
-  /**
-   * A string of all className you want applied to the base component.
-   */
-  className?: string
-  /**
-   * Overrides `cols`/`gutter`/`gutterX`/`gutterY` at a breakpoint and up.
-   *
-   * @type { Partial<Record<'sm' | 'md' | 'lg' | 'xl' | '2xl', { cols?: 'auto' | number | string, gutter?: Spacing | 0, gutterX?: Spacing | 0, gutterY?: Spacing | 0 }>> }
-   */
-  responsive?: Partial<Record<Breakpoint, RowLayout>>
-}
-
-const layoutClassNames = ({ cols, gutter, gutterX, gutterY }: RowLayout, prefix: string) => [
-  cols ? `${prefix}row-cols-${cols}` : null,
-  spacingClassName('g', gutter, prefix),
-  spacingClassName('gx', gutterX, prefix),
-  spacingClassName('gy', gutterY, prefix)
-]
-
-export const Row = forwardRef<HTMLDivElement, RowProps>(
-  ({ children, className, cols, gutter, gutterX, gutterY, responsive, ...rest }, ref) => {
-    const _className = classNames(
-      'row',
-      buildResponsiveClassNames(layoutClassNames, { cols, gutter, gutterX, gutterY }, responsive),
-      className
-    )
-
-    return (
-      <div className={_className} {...rest} ref={ref}>
-        {children}
-      </div>
-    )
-  }
-)
-
-Row.displayName = 'Row'

package/src/components/grid/gap.ts

@@ -1,8 +0,0 @@
-import { SPACING } from '../../types'
-
-const SPACING_TOKENS = new Set<string>(SPACING)
-
-// `Spacing` tokens map to the matching `--cx-space-*` custom property; anything else (a raw CSS
-// value, e.g. `"1rem"` or `".25rem 1rem"`) passes through unchanged.
-export const resolveGap = (gap: string) =>
-  SPACING_TOKENS.has(gap) ? `var(--cx-space-${gap})` : gap

package/src/components/grid/index.ts

@@ -1,14 +0,0 @@
-'use client'
-
-import '../../utils/suppressFocusRingGlobally'
-
-export { Col } from './Col'
-export type { ColProps } from './Col'
-export { Container } from './Container'
-export type { ContainerProps } from './Container'
-export { Grid } from './Grid'
-export type { GridProps } from './Grid'
-export { GridItem } from './GridItem'
-export type { GridItemProps, GridItemLayout } from './GridItem'
-export { Row } from './Row'
-export type { RowProps } from './Row'

package/src/components/icon/Icon.tsx

@@ -1,105 +0,0 @@
-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 an id in the SVG sprite, or a `cx-{name}` font glyph
-   * class in `font` mode (see `IconProvider`'s `fontPrefix`).
-   */
-  name: string
-  /**
-   * A string of all className you want applied to the component.
-   */
-  className?: string
-  /**
-   * 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 | string
-  /**
-   * Accessible name. When set, the icon is exposed to assistive tech instead of hidden.
-   */
-  title?: string
-  /**
-   * 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
-}
-
-export type IconProps =
-  | (IconOwnProps & { font: true } & Omit<HTMLAttributes<HTMLSpanElement>, keyof IconOwnProps>)
-  | (IconOwnProps & { font?: false } & Omit<SVGAttributes<SVGSVGElement>, keyof IconOwnProps>)
-
-// 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
-
-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 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 (
-      <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}
-        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

@@ -1,40 +0,0 @@
-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,9 +0,0 @@
-'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/InputAdorn.tsx

@@ -1,55 +0,0 @@
-import React, { ElementType, ForwardRefRenderFunction, ReactElement } from 'react'
-import classNames from 'classnames'
-
-import {
-  createPolymorphicComponent,
-  PolymorphicComponentProps,
-  PolymorphicRef
-} from '../../utils/polymorphic'
-
-type InputAdornOwnProps<C extends ElementType> = {
-  /**
-   * A string of all className you want applied to the component.
-   */
-  className?: string
-  /**
-   * Component used for the root node. Either a string to use a HTML element or a component. Use
-   * `"button"` or `"a"` for an actionable adorn, e.g. a password reveal toggle or a clear button.
-   */
-  component?: C
-}
-
-export type InputAdornProps<C extends ElementType = 'span'> = PolymorphicComponentProps<
-  C,
-  InputAdornOwnProps<C>
->
-
-type InputAdornComponent = (<C extends ElementType = 'span'>(
-  props: InputAdornProps<C> & { ref?: PolymorphicRef<C> }
-) => ReactElement | null) & { displayName?: string }
-
-function InputAdornRender<C extends ElementType = 'span'>(
-  { children, className, component, onMouseDown, ...rest }: InputAdornProps<C>,
-  ref: PolymorphicRef<C>
-) {
-  const Component = component ?? 'span'
-  const _className = classNames('input-adorn', className)
-  const handleMouseDown: React.MouseEventHandler<Element> = (event) => {
-    onMouseDown?.(event)
-    // Keep focus on the associated input (e.g. a password toggle) instead of
-    // letting the browser shift it to this button/anchor on mousedown.
-    if (!event.defaultPrevented) {
-      event.preventDefault()
-    }
-  }
-  return (
-    <Component className={_className} onMouseDown={handleMouseDown} {...rest} ref={ref}>
-      {children}
-    </Component>
-  )
-}
-
-export const InputAdorn = createPolymorphicComponent<InputAdornComponent>(
-  InputAdornRender as ForwardRefRenderFunction<Element, InputAdornProps<ElementType>>,
-  'InputAdorn'
-)

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

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

package/src/components/input-group/InputGroup.tsx

@@ -1,50 +0,0 @@
-import React, { ElementType, ForwardRefRenderFunction, ReactElement } from 'react'
-import classNames from 'classnames'
-
-import {
-  createPolymorphicComponent,
-  PolymorphicComponentProps,
-  PolymorphicRef
-} from '../../utils/polymorphic'
-
-type InputGroupOwnProps<C extends ElementType> = {
-  /**
-   * A string of all className you want applied to the 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 sm or lg.
-   */
-  size?: 'sm' | 'lg'
-}
-
-export type InputGroupProps<C extends ElementType = 'div'> = PolymorphicComponentProps<
-  C,
-  InputGroupOwnProps<C>
->
-
-type InputGroupComponent = (<C extends ElementType = 'div'>(
-  props: InputGroupProps<C> & { ref?: PolymorphicRef<C> }
-) => ReactElement | null) & { displayName?: string }
-
-function InputGroupRender<C extends ElementType = 'div'>(
-  { children, className, component, size, ...rest }: InputGroupProps<C>,
-  ref: PolymorphicRef<C>
-) {
-  const Component = component ?? 'div'
-  const _className = classNames('input-group', size, className)
-  return (
-    <Component className={_className} {...rest} ref={ref}>
-      {children}
-    </Component>
-  )
-}
-
-export const InputGroup = createPolymorphicComponent<InputGroupComponent>(
-  InputGroupRender as ForwardRefRenderFunction<Element, InputGroupProps<ElementType>>,
-  'InputGroup'
-)

package/src/components/input-group/InputGroupAddon.tsx

@@ -1,50 +0,0 @@
-import React, { ElementType, ForwardRefRenderFunction, ReactElement } from 'react'
-import classNames from 'classnames'
-
-import {
-  createPolymorphicComponent,
-  PolymorphicComponentProps,
-  PolymorphicRef
-} from '../../utils/polymorphic'
-
-type InputGroupAddonOwnProps<C extends ElementType> = {
-  /**
-   * A string of all className you want applied to the component.
-   */
-  className?: string
-  /**
-   * Component used for the root node. Either a string to use a HTML element or a component.
-   */
-  component?: C
-  /**
-   * The id of the form control this addon labels, when rendered as `component="label"`.
-   */
-  htmlFor?: string
-}
-
-export type InputGroupAddonProps<C extends ElementType = 'span'> = PolymorphicComponentProps<
-  C,
-  InputGroupAddonOwnProps<C>
->
-
-type InputGroupAddonComponent = (<C extends ElementType = 'span'>(
-  props: InputGroupAddonProps<C> & { ref?: PolymorphicRef<C> }
-) => ReactElement | null) & { displayName?: string }
-
-function InputGroupAddonRender<C extends ElementType = 'span'>(
-  { children, className, component, ...rest }: InputGroupAddonProps<C>,
-  ref: PolymorphicRef<C>
-) {
-  const Component = component ?? 'span'
-  const _className = classNames('input-addon', className)
-  return (
-    <Component className={_className} {...rest} ref={ref}>
-      {children}
-    </Component>
-  )
-}
-
-export const InputGroupAddon = createPolymorphicComponent<InputGroupAddonComponent>(
-  InputGroupAddonRender as ForwardRefRenderFunction<Element, InputGroupAddonProps<ElementType>>,
-  'InputGroupAddon'
-)

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

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

package/src/components/link/Link.tsx

@@ -1,148 +0,0 @@
-import React, {
-  ElementType,
-  ForwardRefRenderFunction,
-  MouseEventHandler,
-  ReactElement,
-  Ref
-} from 'react'
-import classNames from 'classnames'
-import { mergeProps } from 'react-aria'
-
-import { ContextColor } from '../../types'
-import { useButtonSemantics, useDisabledAnchorGuard } from '../../hooks'
-import {
-  createPolymorphicComponent,
-  PolymorphicComponentProps,
-  PolymorphicRef
-} from '../../utils/polymorphic'
-
-type LinkOwnProps<C extends ElementType> = {
-  /**
-   * Toggle the active state for the component.
-   */
-  active?: boolean
-  /**
-   * A string of all className you want applied to the component.
-   */
-  className?: string
-  /**
-   * Sets the link color to one of Chassis context colors, including its interactive
-   * (`:hover`/`:focus`/`:active`/`:visited`) states.
-   */
-  color?: ContextColor
-  /**
-   * Component used for the root node. Either a string to use a HTML element or a component.
-   */
-  component?: C
-  /**
-   * Toggle the disabled state for the component.
-   */
-  disabled?: boolean
-  /**
-   * The href attribute specifies the URL of the page the link goes to. Only meaningful when
-   * `component` resolves to (or accepts) `'a'`. Declared explicitly here — rather than left to
-   * flow through generically from whatever `C` is — so consumers that wrap `Link` (`MenuItem`,
-   * `ListItem`, `NavLink`) can read it with a concrete type regardless of `component`.
-   */
-  href?: string
-  /**
-   * Fires on click.
-   */
-  onClick?: MouseEventHandler<HTMLElement>
-  /**
-   * Aligns a leading or trailing icon with the link text using flexbox, with a gap between
-   * them and an offset underline. Icons need to be passed as `children` alongside the text.
-   * Named `iconLink` rather than `icon` to avoid colliding with components (e.g. `MenuItem`)
-   * that already have their own, differently-typed `icon` prop for the icon content itself.
-   */
-  iconLink?: boolean
-  /**
-   * Removes the foreground color override, so the link inherits its color from the nearest
-   * ancestor instead of the default link color.
-   */
-  reset?: boolean
-  /**
-   * Expands the link's click target to fill its positioned ancestor (the nearest ancestor with
-   * a `position` other than `static`).
-   */
-  stretched?: boolean
-  /**
-   * Specifies the type of button. Only applies when `component="button"`. Different browsers may
-   * use different default types for the `<button>` element, so always specify it explicitly.
-   */
-  type?: 'button' | 'submit' | 'reset'
-}
-
-export type LinkProps<C extends ElementType = 'a'> = PolymorphicComponentProps<C, LinkOwnProps<C>>
-
-type LinkComponent = (<C extends ElementType = 'a'>(
-  props: LinkProps<C> & { ref?: PolymorphicRef<C> }
-) => ReactElement | null) & { displayName?: string }
-
-function LinkRender<C extends ElementType = 'a'>(
-  {
-    children,
-    active,
-    className,
-    color,
-    component,
-    disabled,
-    iconLink,
-    onClick,
-    reset,
-    stretched,
-    type = 'button',
-    ...rest
-  }: LinkProps<C>,
-  ref: PolymorphicRef<C>
-) {
-  const Component = (component ?? 'a') as ElementType
-
-  const _className = classNames(
-    color && `link-${color}`,
-    { 'icon-link': iconLink, 'fg-reset': reset, 'stretched-link': stretched },
-    { active, disabled },
-    className
-  )
-
-  const isInteractive = Component === 'a' || Component === 'button'
-  // A component reference (e.g. a router `Link`) has its own visual identity and is trusted to
-  // handle its own keyboard/role semantics, same as `CloseButton`'s `isComponentReference` escape
-  // hatch — synthesizing `role="button"` and Enter/Space handling on top of it would stamp the
-  // wrong ARIA role onto whatever it actually renders (e.g. an `<a>`) and can double-fire a click
-  // (native anchor Enter→click, plus the synthesized keydown→click).
-  const isComponentReference = typeof Component !== 'string'
-  // `<a>` has no real `disabled` attribute, so a disabled anchor link still fires click (and
-  // still navigates) unless it's blocked here, same guard `Button`/`CloseButton` apply. A real
-  // `<button>` already stops clicks on its own once the `disabled` attribute below is set.
-  const handleClick = useDisabledAnchorGuard<HTMLElement>(Component === 'a', disabled, onClick)
-
-  // A `component` that isn't a native interactive element gets a raw onClick with no
-  // keyboard semantics otherwise — mouse-only, unlike `Button`/`CloseButton`, which
-  // synthesize this via `useButtonSemantics` for exactly this "arbitrary component" case. A
-  // component reference is excluded (see `isComponentReference` above).
-  const needsButtonSemantics = !isInteractive && !isComponentReference && !!onClick
-  const { buttonProps, forkedRef } = useButtonSemantics<HTMLElement>(ref as Ref<HTMLElement>, {
-    disabled,
-    onClick
-  })
-
-  return (
-    <Component
-      {...(mergeProps(rest, needsButtonSemantics ? buttonProps : {}) as Record<string, unknown>)}
-      className={_className}
-      {...(active && { 'aria-current': 'page' })}
-      {...(Component === 'a' && disabled && { 'aria-disabled': true, tabIndex: -1 })}
-      {...(!needsButtonSemantics && { onClick: handleClick })}
-      {...(Component === 'button' && { disabled, type })}
-      ref={needsButtonSemantics ? forkedRef : ref}
-    >
-      {children}
-    </Component>
-  )
-}
-
-export const Link = createPolymorphicComponent<LinkComponent>(
-  LinkRender as ForwardRefRenderFunction<Element, LinkProps<ElementType>>,
-  'Link'
-)

package/src/components/link/index.ts

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