@chassis-ui/react 0.0.0-20260831090525

package/src/components/drawer/DrawerFooter.tsx

@@ -0,0 +1,51 @@
+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

@@ -0,0 +1,60 @@
+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

@@ -0,0 +1,49 @@
+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

@@ -0,0 +1,10 @@
+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'

package/src/components/file-input/FileInput.tsx

@@ -0,0 +1,100 @@
+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 small or large.
+   */
+  size?: 'small' | 'large'
+  /**
+   * 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

@@ -0,0 +1,2 @@
+export { FileInput } from './FileInput'
+export type { FileInputProps } from './FileInput'

package/src/components/flex/Flex.tsx

@@ -0,0 +1,134 @@
+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

@@ -0,0 +1,2 @@
+export { Flex } from './Flex'
+export type { FlexProps } from './Flex'

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

@@ -0,0 +1,94 @@
+import React, { forwardRef, HTMLAttributes, ReactNode } from 'react'
+import classNames from 'classnames'
+
+import { FormLabel } from '../form/FormLabel'
+import { FormFieldIds, renderFormField } from '../form-field/renderFormField'
+
+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
+  ) => {
+    if (!ids?.input && !ids?.label) {
+      console.warn(
+        '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

@@ -0,0 +1,2 @@
+export { FloatingInput } from './FloatingInput'
+export type { FloatingInputProps } from './FloatingInput'

package/src/components/form/Form.tsx

@@ -0,0 +1,26 @@
+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

@@ -0,0 +1,64 @@
+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'
+)

package/src/components/form/FormHelp.tsx

@@ -0,0 +1,46 @@
+import React, { ElementType, ForwardRefRenderFunction, ReactElement } from 'react'
+import classNames from 'classnames'
+
+import {
+  createPolymorphicComponent,
+  PolymorphicComponentProps,
+  PolymorphicRef
+} from '../../utils/polymorphic'
+
+type FormHelpOwnProps<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
+}
+
+export type FormHelpProps<C extends ElementType = 'div'> = PolymorphicComponentProps<
+  C,
+  FormHelpOwnProps<C>
+>
+
+type FormHelpComponent = (<C extends ElementType = 'div'>(
+  props: FormHelpProps<C> & { ref?: PolymorphicRef<C> }
+) => ReactElement | null) & { displayName?: string }
+
+function FormHelpRender<C extends ElementType = 'div'>(
+  { children, className, component, ...rest }: FormHelpProps<C>,
+  ref: PolymorphicRef<C>
+) {
+  const Component = component ?? 'div'
+  const _className = classNames('form-help', className)
+  return (
+    <Component className={_className} {...rest} ref={ref}>
+      {children}
+    </Component>
+  )
+}
+
+export const FormHelp = createPolymorphicComponent<FormHelpComponent>(
+  FormHelpRender as ForwardRefRenderFunction<Element, FormHelpProps<ElementType>>,
+  'FormHelp'
+)

package/src/components/form/FormLabel.tsx

@@ -0,0 +1,26 @@
+import React, { forwardRef, LabelHTMLAttributes } from 'react'
+import classNames from 'classnames'
+
+export interface FormLabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
+  /**
+   * A string of all className you want applied to the component.
+   */
+  className?: string
+  /**
+   * A string of all className you want to be applied to the component, and override standard className value.
+   */
+  customClassName?: string
+}
+
+export const FormLabel = forwardRef<HTMLLabelElement, FormLabelProps>(
+  ({ children, className, customClassName, ...rest }, ref) => {
+    const _className = customClassName ? customClassName : classNames('form-label', className)
+    return (
+      <label className={_className} {...rest} ref={ref}>
+        {children}
+      </label>
+    )
+  }
+)
+
+FormLabel.displayName = 'FormLabel'

package/src/components/form/index.ts

@@ -0,0 +1,8 @@
+export { Form } from './Form'
+export type { FormProps } from './Form'
+export { FormLabel } from './FormLabel'
+export type { FormLabelProps } from './FormLabel'
+export { FormHelp } from './FormHelp'
+export type { FormHelpProps } from './FormHelp'
+export { FormFeedback } from './FormFeedback'
+export type { FormFeedbackProps } from './FormFeedback'