@chassis-ui/react 0.2.0 → 0.3.0

package/src/components/drawer/DrawerBody.tsx

@@ -1,47 +0,0 @@
-import React, { ElementType, ForwardRefRenderFunction, ReactElement } from 'react'
-import classNames from 'classnames'
-
-import {
-  createPolymorphicComponent,
-  PolymorphicComponentProps,
-  PolymorphicRef
-} from '../../utils/polymorphic'
-
-type DrawerBodyOwnProps<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 DrawerBodyProps<C extends ElementType = 'div'> = PolymorphicComponentProps<
-  C,
-  DrawerBodyOwnProps<C>
->
-
-type DrawerBodyComponent = (<C extends ElementType = 'div'>(
-  props: DrawerBodyProps<C> & { ref?: PolymorphicRef<C> }
-) => ReactElement | null) & { displayName?: string }
-
-function DrawerBodyRender<C extends ElementType = 'div'>(
-  { children, className, component, ...rest }: DrawerBodyProps<C>,
-  ref: PolymorphicRef<C>
-) {
-  const Component = component ?? 'div'
-  const _className = classNames('drawer-body', className)
-
-  return (
-    <Component className={_className} {...rest} ref={ref}>
-      {children}
-    </Component>
-  )
-}
-
-export const DrawerBody = createPolymorphicComponent<DrawerBodyComponent>(
-  DrawerBodyRender as ForwardRefRenderFunction<Element, DrawerBodyProps<ElementType>>,
-  'DrawerBody'
-)

package/src/components/drawer/DrawerFooter.tsx

@@ -1,51 +0,0 @@
-import React, { ElementType, ForwardRefRenderFunction, ReactElement } from 'react'
-import classNames from 'classnames'
-
-import {
-  createPolymorphicComponent,
-  PolymorphicComponentProps,
-  PolymorphicRef
-} from '../../utils/polymorphic'
-
-type DrawerFooterOwnProps<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
-  /**
-   * Stack the footer actions as full-width columns instead of a right-aligned row.
-   */
-  stacked?: boolean
-}
-
-export type DrawerFooterProps<C extends ElementType = 'div'> = PolymorphicComponentProps<
-  C,
-  DrawerFooterOwnProps<C>
->
-
-type DrawerFooterComponent = (<C extends ElementType = 'div'>(
-  props: DrawerFooterProps<C> & { ref?: PolymorphicRef<C> }
-) => ReactElement | null) & { displayName?: string }
-
-function DrawerFooterRender<C extends ElementType = 'div'>(
-  { children, className, component, stacked, ...rest }: DrawerFooterProps<C>,
-  ref: PolymorphicRef<C>
-) {
-  const Component = component ?? 'div'
-  const _className = classNames('drawer-footer', { stacked }, className)
-
-  return (
-    <Component className={_className} {...rest} ref={ref}>
-      {children}
-    </Component>
-  )
-}
-
-export const DrawerFooter = createPolymorphicComponent<DrawerFooterComponent>(
-  DrawerFooterRender as ForwardRefRenderFunction<Element, DrawerFooterProps<ElementType>>,
-  'DrawerFooter'
-)

package/src/components/drawer/DrawerHeader.tsx

@@ -1,60 +0,0 @@
-import React, { ElementType, ForwardRefRenderFunction, ReactElement } from 'react'
-import classNames from 'classnames'
-
-import { useDrawer } from '../../hooks'
-import {
-  createPolymorphicComponent,
-  PolymorphicComponentProps,
-  PolymorphicRef
-} from '../../utils/polymorphic'
-import { CloseButton } from '../close-button/CloseButton'
-
-type DrawerHeaderOwnProps<C extends ElementType> = {
-  /**
-   * A string of all className you want applied to the base component.
-   */
-  className?: string
-  /**
-   * Add a close button component to the header.
-   */
-  closeButton?: boolean
-  /**
-   * Overrides the close button's accessible name (defaults to `'Close'`). Set this for
-   * non-English UIs.
-   */
-  closeLabel?: string
-  /**
-   * Component used for the root node. Either a string to use a HTML element or a component.
-   */
-  component?: C
-}
-
-export type DrawerHeaderProps<C extends ElementType = 'div'> = PolymorphicComponentProps<
-  C,
-  DrawerHeaderOwnProps<C>
->
-
-type DrawerHeaderComponent = (<C extends ElementType = 'div'>(
-  props: DrawerHeaderProps<C> & { ref?: PolymorphicRef<C> }
-) => ReactElement | null) & { displayName?: string }
-
-function DrawerHeaderRender<C extends ElementType = 'div'>(
-  { children, className, closeButton = true, closeLabel, component, ...rest }: DrawerHeaderProps<C>,
-  ref: PolymorphicRef<C>
-) {
-  const Component = component ?? 'div'
-  const { close } = useDrawer()
-  const _className = classNames('drawer-header', className)
-
-  return (
-    <Component className={_className} {...rest} ref={ref}>
-      {children}
-      {closeButton && <CloseButton label={closeLabel} onClick={close} />}
-    </Component>
-  )
-}
-
-export const DrawerHeader = createPolymorphicComponent<DrawerHeaderComponent>(
-  DrawerHeaderRender as ForwardRefRenderFunction<Element, DrawerHeaderProps<ElementType>>,
-  'DrawerHeader'
-)

package/src/components/drawer/DrawerTitle.tsx

@@ -1,49 +0,0 @@
-import React, { ElementType, ForwardRefRenderFunction, ReactElement } from 'react'
-import classNames from 'classnames'
-
-import { useDrawer } from '../../hooks'
-import {
-  createPolymorphicComponent,
-  PolymorphicComponentProps,
-  PolymorphicRef
-} from '../../utils/polymorphic'
-
-type DrawerTitleOwnProps<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 DrawerTitleProps<C extends ElementType = 'h2'> = PolymorphicComponentProps<
-  C,
-  DrawerTitleOwnProps<C>
->
-
-type DrawerTitleComponent = (<C extends ElementType = 'h2'>(
-  props: DrawerTitleProps<C> & { ref?: PolymorphicRef<C> }
-) => ReactElement | null) & { displayName?: string }
-
-function DrawerTitleRender<C extends ElementType = 'h2'>(
-  { children, component, className, id, ...rest }: DrawerTitleProps<C>,
-  ref: PolymorphicRef<C>
-) {
-  const { titleId } = useDrawer()
-  const Component = component ?? 'h2'
-  const _className = classNames('drawer-title', className)
-
-  return (
-    <Component className={_className} id={id ?? titleId} {...rest} ref={ref}>
-      {children}
-    </Component>
-  )
-}
-
-export const DrawerTitle = createPolymorphicComponent<DrawerTitleComponent>(
-  DrawerTitleRender as ForwardRefRenderFunction<Element, DrawerTitleProps<ElementType>>,
-  'DrawerTitle'
-)

package/src/components/drawer/index.ts

@@ -1,18 +0,0 @@
-'use client'
-
-import '../../utils/suppressFocusRingGlobally'
-
-export { Drawer } from './Drawer'
-export type { DrawerProps } from './Drawer'
-export { DrawerBody } from './DrawerBody'
-export type { DrawerBodyProps } from './DrawerBody'
-export { DrawerFooter } from './DrawerFooter'
-export type { DrawerFooterProps } from './DrawerFooter'
-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/FileInput.tsx

@@ -1,100 +0,0 @@
-import React, { ChangeEventHandler, forwardRef, InputHTMLAttributes, ReactNode } from 'react'
-import classNames from 'classnames'
-
-import { useFormField } from '../../hooks'
-import { validationClassName } from '../../utils/validationClassName'
-import { renderFormField } from '../form-field/renderFormField'
-
-export interface FileInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
-  /**
-   * A string of all className you want applied to the component.
-   */
-  className?: string
-  /**
-   * Toggle the disabled state for the component.
-   */
-  disabled?: boolean
-  /**
-   * A description for the field, rendered below the input.
-   */
-  help?: ReactNode
-  /**
-   * Set component validation state to invalid.
-   */
-  invalid?: boolean
-  /**
-   * An error message for the field, rendered below the input when `invalid` is set.
-   */
-  invalidFeedback?: ReactNode
-  /**
-   * The field's caption, rendered as a `FormLabel` associated with this input.
-   */
-  label?: ReactNode
-  /**
-   * Allows selecting more than one file.
-   */
-  multiple?: boolean
-  /**
-   * Method called when the selected file(s) change.
-   */
-  onChange?: ChangeEventHandler<HTMLInputElement>
-  /**
-   * Size the component sm or lg.
-   */
-  size?: 'sm' | 'lg'
-  /**
-   * Set component validation state to valid.
-   */
-  valid?: boolean
-  /**
-   * A success message for the field, rendered below the input when `valid` is set.
-   */
-  validFeedback?: ReactNode
-}
-
-export const FileInput = forwardRef<HTMLInputElement, FileInputProps>(
-  (
-    { className, help, id, invalid, invalidFeedback, label, size, valid, validFeedback, ...rest },
-    ref
-  ) => {
-    const { describedBy, feedbackId, helpId, inputId } = useFormField({
-      ariaDescribedBy: rest['aria-describedby'],
-      help,
-      id,
-      invalid,
-      invalidFeedback,
-      valid,
-      validFeedback
-    })
-
-    const _className = classNames(
-      'form-input',
-      size,
-      validationClassName(invalid, valid),
-      className
-    )
-
-    return renderFormField({
-      children: (
-        <input
-          {...rest}
-          aria-describedby={describedBy}
-          aria-invalid={invalid || undefined}
-          className={_className}
-          id={inputId}
-          ref={ref}
-          type="file"
-        />
-      ),
-      help,
-      ids: { feedback: feedbackId, help: helpId, input: inputId },
-      invalid,
-      invalidFeedback,
-      label,
-      valid,
-      validFeedback
-    })
-  }
-)
-
-FileInput.displayName = 'FileInput'

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

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

package/src/components/flex/Flex.tsx

@@ -1,134 +0,0 @@
-import React, { ElementType, ForwardRefRenderFunction, ReactElement } from 'react'
-import classNames from 'classnames'
-
-import {
-  createPolymorphicComponent,
-  PolymorphicComponentProps,
-  PolymorphicRef
-} from '../../utils/polymorphic'
-import { buildResponsiveClassNames } from '../../utils/breakpoints'
-import { spacingClassName } from '../../utils/spacingClassName'
-import { Breakpoint, Spacing } from '../../types'
-
-export interface FlexLayout {
-  /**
-   * Sets `flex-direction`. Omit for the browser default (`row`).
-   */
-  direction?: 'row' | 'column' | 'row-reverse' | 'column-reverse'
-  /**
-   * Sets `flex-wrap`. Omit for the browser default (`nowrap`).
-   */
-  wrap?: 'wrap' | 'nowrap' | 'wrap-reverse'
-  /**
-   * Sets `justify-content`, aligning items along the main axis.
-   */
-  justify?: 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly'
-  /**
-   * Sets `align-items`, aligning items along the cross axis.
-   */
-  align?: 'start' | 'end' | 'center' | 'baseline' | 'stretch'
-  /**
-   * Sets `align-content`, distributing wrapped lines along the cross axis. Has no effect on
-   * single-line (non-wrapping) containers.
-   */
-  alignContent?: 'start' | 'end' | 'center' | 'between' | 'around' | 'stretch'
-  /**
-   * Spacing between children on both axes, mapped to the `gap-*` utility classes. Overridden per
-   * axis by `rowGap`/`columnGap` where set.
-   */
-  gap?: Spacing | 0
-  /**
-   * Spacing between rows (the cross axis when wrapped), mapped to the `row-gap-*` utility
-   * classes. Independent of `gap`/`columnGap`.
-   */
-  rowGap?: Spacing | 0
-  /**
-   * Spacing between columns (the main axis), mapped to the `column-gap-*` utility classes.
-   * Independent of `gap`/`rowGap`.
-   */
-  columnGap?: Spacing | 0
-}
-
-type FlexOwnProps<C extends ElementType> = FlexLayout & {
-  /**
-   * 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
-  /**
-   * Renders an inline flex container (`.d-inline-flex`) instead of a block-level one (`.d-flex`,
-   * the default).
-   */
-  inline?: boolean
-  /**
-   * Overrides any of `direction`/`wrap`/`justify`/`align`/`alignContent`/`gap`/`rowGap`/
-   * `columnGap` at one or more breakpoints, via regular viewport media queries (unlike `Stack`'s
-   * `responsive` prop, this doesn't require a `.contains-inline` ancestor).
-   */
-  responsive?: Partial<Record<Breakpoint, FlexLayout>>
-}
-
-export type FlexProps<C extends ElementType = 'div'> = PolymorphicComponentProps<C, FlexOwnProps<C>>
-
-type FlexComponent = (<C extends ElementType = 'div'>(
-  props: FlexProps<C> & { ref?: PolymorphicRef<C> }
-) => ReactElement | null) & { displayName?: string }
-
-const layoutClassNames = (
-  { direction, wrap, justify, align, alignContent, gap, rowGap, columnGap }: FlexLayout,
-  prefix: string
-) => [
-  direction && `${prefix}flex-${direction}`,
-  wrap && `${prefix}flex-${wrap}`,
-  justify && `${prefix}justify-content-${justify}`,
-  align && `${prefix}align-items-${align}`,
-  alignContent && `${prefix}align-content-${alignContent}`,
-  spacingClassName('gap', gap, prefix),
-  spacingClassName('row-gap', rowGap, prefix),
-  spacingClassName('column-gap', columnGap, prefix)
-]
-
-function FlexRender<C extends ElementType = 'div'>(
-  {
-    children,
-    className,
-    component,
-    inline,
-    direction,
-    wrap,
-    justify,
-    align,
-    alignContent,
-    gap,
-    rowGap,
-    columnGap,
-    responsive,
-    ...rest
-  }: FlexProps<C>,
-  ref: PolymorphicRef<C>
-) {
-  const Component = component ?? 'div'
-  const _className = classNames(
-    inline ? 'd-inline-flex' : 'd-flex',
-    buildResponsiveClassNames(
-      layoutClassNames,
-      { direction, wrap, justify, align, alignContent, gap, rowGap, columnGap },
-      responsive
-    ),
-    className
-  )
-
-  return (
-    <Component className={_className} {...rest} ref={ref}>
-      {children}
-    </Component>
-  )
-}
-
-export const Flex = createPolymorphicComponent<FlexComponent>(
-  FlexRender as ForwardRefRenderFunction<Element, FlexProps<ElementType>>,
-  'Flex'
-)

package/src/components/flex/index.ts

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

package/src/components/floating-input/FloatingInput.tsx

@@ -1,94 +0,0 @@
-import React, { forwardRef, HTMLAttributes, ReactNode } from 'react'
-import classNames from 'classnames'
-
-import { FormLabel } from '../form/FormLabel'
-import { FormFieldIds, renderFormField } from '../form-field/renderFormField'
-import { devWarning } from '../../utils/devWarning'
-
-export interface FloatingInputProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
-  /**
-   * The form control (e.g. a `TextInput`, `Select`, or `Textarea`) the floating label attaches
-   * to. Chassis-css's floating-label CSS relies on a `label:has(~ .form-input)` selector, so this
-   * must render an element carrying the `form-input` class as a direct child.
-   */
-  children: ReactNode
-  /**
-   * A string of all className you want applied to the `.form-floating` element.
-   */
-  className?: string
-  /**
-   * A description for the field, rendered below the control. Setting this (or `invalidFeedback`/
-   * `validFeedback`) wraps the floating input in a `.form-field`.
-   */
-  help?: ReactNode
-  /**
-   * The DOM ids of the wrapped control, used to associate the label (`htmlFor`) and point your
-   * control's own `aria-describedby` at the rendered help/feedback text.
-   */
-  ids?: FormFieldIds
-  /**
-   * Set field validation state to invalid.
-   */
-  invalid?: boolean
-  /**
-   * An error message for the field, rendered below the control when `invalid` is set.
-   */
-  invalidFeedback?: ReactNode
-  /**
-   * The field's caption, rendered as a floating `FormLabel` associated with `ids.input`.
-   */
-  label: ReactNode
-  /**
-   * Set field validation state to valid.
-   */
-  valid?: boolean
-  /**
-   * A success message for the field, rendered below the control when `valid` is set.
-   */
-  validFeedback?: ReactNode
-}
-
-export const FloatingInput = forwardRef<HTMLDivElement, FloatingInputProps>(
-  (
-    {
-      children,
-      className,
-      help,
-      ids,
-      invalid,
-      invalidFeedback,
-      label,
-      valid,
-      validFeedback,
-      ...rest
-    },
-    ref
-  ) => {
-    devWarning(
-      !ids?.input && !ids?.label,
-      'FloatingInput: `ids.input`/`ids.label` are not set — the rendered label ' +
-        "won't be associated with your control (no `htmlFor`, no `aria-labelledby` target). " +
-        'Pass `ids={{ input: yourControlId }}` (or `ids.label` for a group with no single ' +
-        'input) so the label has something to point at.'
-    )
-
-    return renderFormField({
-      children: (
-        <div className={classNames('form-floating', className)} {...rest} ref={ref}>
-          <FormLabel htmlFor={ids?.input} id={ids?.label}>
-            {label}
-          </FormLabel>
-          {children}
-        </div>
-      ),
-      help,
-      ids: { feedback: ids?.feedback, help: ids?.help },
-      invalid,
-      invalidFeedback,
-      valid,
-      validFeedback
-    })
-  }
-)
-
-FloatingInput.displayName = 'FloatingInput'

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

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

package/src/components/form/Form.tsx

@@ -1,26 +0,0 @@
-import React, { forwardRef, FormHTMLAttributes } from 'react'
-import classNames from 'classnames'
-
-export interface FormProps extends FormHTMLAttributes<HTMLFormElement> {
-  /**
-   * A string of all className you want applied to the component.
-   */
-  className?: string
-  /**
-   * Mark a form as validated. If you set it `true`, all validation styles will be applied to the forms component.
-   */
-  validated?: boolean
-}
-
-export const Form = forwardRef<HTMLFormElement, FormProps>(
-  ({ children, className, validated, ...rest }, ref) => {
-    const _className = classNames({ 'was-validated': validated }, className)
-    return (
-      <form className={_className} {...rest} ref={ref}>
-        {children}
-      </form>
-    )
-  }
-)
-
-Form.displayName = 'Form'

package/src/components/form/FormFeedback.tsx

@@ -1,64 +0,0 @@
-import React, { ElementType, ForwardRefRenderFunction, ReactElement } from 'react'
-import classNames from 'classnames'
-
-import {
-  createPolymorphicComponent,
-  PolymorphicComponentProps,
-  PolymorphicRef
-} from '../../utils/polymorphic'
-
-type FormFeedbackOwnProps<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
-  /**
-   * Set component validation state to invalid.
-   */
-  invalid?: boolean
-  /**
-   * If your form layout allows it, you can display validation feedback in a styled tooltip.
-   */
-  tooltip?: boolean
-  /**
-   * Set component validation state to valid.
-   */
-  valid?: boolean
-}
-
-export type FormFeedbackProps<C extends ElementType = 'div'> = PolymorphicComponentProps<
-  C,
-  FormFeedbackOwnProps<C>
->
-
-type FormFeedbackComponent = (<C extends ElementType = 'div'>(
-  props: FormFeedbackProps<C> & { ref?: PolymorphicRef<C> }
-) => ReactElement | null) & { displayName?: string }
-
-function FormFeedbackRender<C extends ElementType = 'div'>(
-  { children, className, component, invalid, tooltip, valid, ...rest }: FormFeedbackProps<C>,
-  ref: PolymorphicRef<C>
-) {
-  const Component = component ?? 'div'
-  const _className = classNames(
-    {
-      [`invalid-${tooltip ? 'tooltip' : 'feedback'}`]: invalid,
-      [`valid-${tooltip ? 'tooltip' : 'feedback'}`]: valid
-    },
-    className
-  )
-  return (
-    <Component className={_className} {...rest} ref={ref}>
-      {children}
-    </Component>
-  )
-}
-
-export const FormFeedback = createPolymorphicComponent<FormFeedbackComponent>(
-  FormFeedbackRender as ForwardRefRenderFunction<Element, FormFeedbackProps<ElementType>>,
-  'FormFeedback'
-)