@chassis-ui/react 0.1.3 → 0.3.0

package/src/components/notification/NotificationText.tsx

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

package/src/components/notification/NotificationTitle.tsx

@@ -1,47 +0,0 @@
-import React, { ElementType, ForwardRefRenderFunction, ReactElement } from 'react'
-import classNames from 'classnames'
-
-import {
-  createPolymorphicComponent,
-  PolymorphicComponentProps,
-  PolymorphicRef
-} from '../../utils/polymorphic'
-
-type NotificationTitleOwnProps<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 NotificationTitleProps<C extends ElementType = 'h4'> = PolymorphicComponentProps<
-  C,
-  NotificationTitleOwnProps<C>
->
-
-type NotificationTitleComponent = (<C extends ElementType = 'h4'>(
-  props: NotificationTitleProps<C> & { ref?: PolymorphicRef<C> }
-) => ReactElement | null) & { displayName?: string }
-
-function NotificationTitleRender<C extends ElementType = 'h4'>(
-  { children, className, component, ...rest }: NotificationTitleProps<C>,
-  ref: PolymorphicRef<C>
-) {
-  const Component = component ?? 'h4'
-  const _className = classNames('notification-title', className)
-
-  return (
-    <Component className={_className} {...rest} ref={ref}>
-      {children}
-    </Component>
-  )
-}
-
-export const NotificationTitle = createPolymorphicComponent<NotificationTitleComponent>(
-  NotificationTitleRender as ForwardRefRenderFunction<Element, NotificationTitleProps<ElementType>>,
-  'NotificationTitle'
-)

package/src/components/notification/context.ts

@@ -1,14 +0,0 @@
-import { createContext } from 'react'
-
-export interface NotificationContextProps {
-  /**
-   * Whether the notification is currently visible.
-   */
-  visible?: boolean
-  /**
-   * Dismisses the notification. Wire this to any element's `onClick` — see `useNotification`.
-   */
-  close: () => void
-}
-
-export const NotificationContext = createContext<NotificationContextProps>({ close: () => {} })

package/src/components/notification/index.ts

@@ -1,17 +0,0 @@
-export { Notification } from './Notification'
-export type { NotificationProps } from './Notification'
-export { NotificationTitle } from './NotificationTitle'
-export type { NotificationTitleProps } from './NotificationTitle'
-export { NotificationIcon } from './NotificationIcon'
-export type { NotificationIconProps } from './NotificationIcon'
-export { NotificationText } from './NotificationText'
-export type { NotificationTextProps } from './NotificationText'
-
-// NotificationStack is an independent manager/container component (react-hot-toast-style), not
-// a Notification sub-part — it subscribes to the shared notificationQueue and renders
-// Notification instances from it, rather than being composed as a child of Notification. Stays
-// a separate top-level export, mirroring Toast/Toaster.
-export { NotificationStack } from './NotificationStack'
-export type { NotificationStackProps } from './NotificationStack'
-export { addNotification, closeNotification, notificationQueue } from './notificationQueue'
-export type { NotificationContent } from './notificationQueue'

package/src/components/notification/notificationQueue.ts

@@ -1,48 +0,0 @@
-import { ReactNode } from 'react'
-import { ToastQueue } from 'react-stately'
-
-import { NotificationProps } from './Notification'
-
-export interface NotificationContent extends Pick<
-  NotificationProps,
-  | 'actions'
-  | 'autohide'
-  | 'closeLabel'
-  | 'color'
-  | 'delay'
-  | 'dismissible'
-  | 'icon'
-  | 'role'
-  | 'solid'
-  | 'text'
-  | 'title'
-  | 'titleComponent'
-> {
-  /**
-   * Content of the notification. Compose manually (typically a `NotificationIcon`/
-   * `NotificationTitle`/`NotificationText`), or leave empty and use the `icon`/`title`/`text`
-   * shorthand options instead.
-   */
-  children?: ReactNode
-}
-
-// The queue backing `NotificationStack` — a module-level singleton so `addNotification()` is
-// callable from anywhere (an event handler, an async callback) without threading a `push` prop
-// through render. `NotificationStack` subscribes to it via `useToastQueue`; nothing renders
-// until a `<NotificationStack />` is actually mounted somewhere to display the queue's contents.
-export const notificationQueue = new ToastQueue<NotificationContent>()
-
-// Adds a notification to the queue. Returns the notification's key, which can be passed to
-// `closeNotification` to dismiss it programmatically. `children` is optional — omit it for a
-// notification composed entirely from the `icon`/`title`/`text` shorthand options.
-export function addNotification(
-  children?: ReactNode,
-  options: Omit<NotificationContent, 'children'> = {}
-): string {
-  return notificationQueue.add({ children, ...options })
-}
-
-// Removes a queued notification immediately, bypassing its own exit animation.
-export function closeNotification(key: string): void {
-  notificationQueue.close(key)
-}

package/src/components/otp-input/OtpBox.tsx

@@ -1,68 +0,0 @@
-import React, { ClipboardEvent, ForwardedRef, forwardRef, KeyboardEvent } from 'react'
-import classNames from 'classnames'
-import { mergeProps, useFocusRing, useObjectRef, useTextField } from 'react-aria'
-
-import { validationClassName } from '../../utils/validationClassName'
-
-interface OtpBoxProps {
-  disabled?: boolean
-  index: number
-  invalid?: boolean
-  mask?: boolean
-  onChangeValue: (value: string) => void
-  onKeyDownBox: (event: KeyboardEvent<HTMLInputElement>) => void
-  onPasteBox: (event: ClipboardEvent<HTMLInputElement>) => void
-  size?: 'sm' | 'lg'
-  valid?: boolean
-  value: string
-}
-
-export const OtpBox = forwardRef(
-  (
-    {
-      disabled,
-      index,
-      invalid,
-      mask,
-      onChangeValue,
-      onKeyDownBox,
-      onPasteBox,
-      size,
-      valid,
-      value
-    }: OtpBoxProps,
-    forwardedRef: ForwardedRef<HTMLInputElement>
-  ) => {
-    const ref = useObjectRef(forwardedRef)
-    const { focusProps, isFocusVisible } = useFocusRing()
-    const { inputProps } = useTextField(
-      {
-        'aria-label': `Digit ${index + 1}`,
-        autoComplete: index === 0 ? 'one-time-code' : 'off',
-        isDisabled: disabled,
-        isInvalid: invalid,
-        maxLength: 1,
-        onChange: onChangeValue,
-        onFocus: (event) => (event.target as HTMLInputElement).select(),
-        onKeyDown: onKeyDownBox,
-        type: mask ? 'password' : 'text',
-        value
-      },
-      ref
-    )
-
-    return (
-      <input
-        {...mergeProps(inputProps, focusProps)}
-        className={classNames('form-input', size, validationClassName(invalid, valid))}
-        data-focus-visible={isFocusVisible || undefined}
-        inputMode="numeric"
-        onPaste={onPasteBox}
-        pattern="\d*"
-        ref={ref}
-      />
-    )
-  }
-)
-
-OtpBox.displayName = 'OtpBox'

package/src/components/otp-input/OtpInput.tsx

@@ -1,342 +0,0 @@
-import React, {
-  ClipboardEvent,
-  forwardRef,
-  Fragment,
-  HTMLAttributes,
-  KeyboardEvent,
-  ReactNode,
-  useMemo,
-  useRef
-} from 'react'
-import classNames from 'classnames'
-
-import { useControllableState, useForkedRef, useFormField } from '../../hooks'
-import { validationClassName } from '../../utils/validationClassName'
-import { renderFormField } from '../form-field/renderFormField'
-import { OtpBox } from './OtpBox'
-import { isRTL } from '../../utils/direction'
-
-export interface OtpInputProps extends Omit<
-  HTMLAttributes<HTMLDivElement>,
-  'onChange' | 'defaultValue'
-> {
-  /**
-   * Identifies the element that describes the group, e.g. a `FormHelp` help element.
-   */
-  'aria-describedby'?: string
-  /**
-   * An accessible label for the group, used when there's no visible `<label>`.
-   */
-  'aria-label'?: string
-  /**
-   * Identifies a visible `<label>` element for the group.
-   */
-  'aria-labelledby'?: string
-  /**
-   * A string of all className you want applied to the base component.
-   */
-  className?: string
-  /**
-   * The initial code (uncontrolled), e.g. `"123"` for a partially filled code.
-   */
-  defaultValue?: string
-  /**
-   * Prevents input and makes every box non-interactive.
-   */
-  disabled?: boolean
-  /**
-   * Splits the boxes into groups (e.g. `[3, 3]` for a "123-456" layout), rendering a
-   * `.form-otp-separator` between each group. The total number of boxes becomes the sum of
-   * `groupSizes`, overriding `length`.
-   */
-  groupSizes?: number[]
-  /**
-   * A description for the field, rendered below the boxes.
-   */
-  help?: ReactNode
-  /**
-   * `id` forwarded to the group container.
-   */
-  id?: string
-  /**
-   * Visually connects the boxes into a single bordered control. When `groupSizes` is set, each
-   * group is connected separately.
-   */
-  inputGroup?: boolean
-  /**
-   * Set component validation state to invalid.
-   */
-  invalid?: boolean
-  /**
-   * An error message for the field, rendered below the boxes when `invalid` is set.
-   */
-  invalidFeedback?: ReactNode
-  /**
-   * The field's caption, rendered as a `FormLabel` associated with the group via
-   * `aria-labelledby` (there's no single input to target with `htmlFor`).
-   */
-  label?: ReactNode
-  /**
-   * Number of digit boxes. Ignored when `groupSizes` is set. Defaults to `6`.
-   */
-  length?: number
-  /**
-   * Mask entered digits using `type="password"` boxes.
-   */
-  mask?: boolean
-  /**
-   * `name` of an auto-created hidden input kept in sync with the code, for native form
-   * submission. Omit to skip creating it.
-   */
-  name?: string
-  /**
-   * Callback fired whenever the code changes.
-   */
-  onChange?: (value: string) => void
-  /**
-   * Callback fired once every box is filled.
-   */
-  onComplete?: (value: string) => void
-  /**
-   * Content of the separator rendered between groups when `groupSizes` is set. Defaults to `–`.
-   */
-  separator?: ReactNode
-  /**
-   * Size the boxes sm or lg.
-   */
-  size?: 'sm' | 'lg'
-  /**
-   * Set component validation state to valid.
-   */
-  valid?: boolean
-  /**
-   * A success message for the field, rendered below the boxes when `valid` is set.
-   */
-  validFeedback?: ReactNode
-  /**
-   * The code (controlled), digits only, e.g. `"123456"`.
-   */
-  value?: string
-}
-
-const onlyDigits = (raw: string) => raw.replace(/\D/g, '')
-
-const toBoxes = (raw: string, total: number): string[] => {
-  const digits = [...onlyDigits(raw)].slice(0, total)
-  return Array.from({ length: total }, (_, i) => digits[i] ?? '')
-}
-
-export const OtpInput = forwardRef<HTMLDivElement, OtpInputProps>(
-  (
-    {
-      className,
-      defaultValue,
-      disabled,
-      groupSizes,
-      help,
-      id,
-      inputGroup,
-      invalid,
-      invalidFeedback,
-      label,
-      length = 6,
-      mask,
-      name,
-      onChange,
-      onComplete,
-      separator = '–',
-      size,
-      valid,
-      validFeedback,
-      value,
-      ...rest
-    }: OtpInputProps,
-    ref
-  ): ReactNode => {
-    const total =
-      groupSizes && groupSizes.length > 0 ? groupSizes.reduce((a, b) => a + b, 0) : length
-
-    const [rawValue, setRawValue] = useControllableState(value, defaultValue ?? '', onChange)
-    const boxes = useMemo(() => toBoxes(rawValue, total), [rawValue, total])
-
-    const boxRefs = useRef<Array<HTMLInputElement | null>>([])
-    const focusBox = (index: number) => boxRefs.current[index]?.focus()
-    const containerRef = useRef<HTMLDivElement>(null)
-    const forkedRef = useForkedRef(ref, containerRef)
-
-    const commit = (nextBoxes: string[]) => {
-      const next = nextBoxes.join('')
-      setRawValue(next)
-      if (nextBoxes.length === total && nextBoxes.every((box) => box !== '')) {
-        onComplete?.(next)
-      }
-    }
-
-    const handleChange = (index: number, raw: string) => {
-      const digits = onlyDigits(raw)
-
-      if (digits.length > 1) {
-        // Multi-character value landing in a single box (autofill, or a fast typist outrunning
-        // the auto-advance) — distribute across this and subsequent boxes, matching chassis-css's
-        // vanilla otp-input.js `_handleInput`.
-        const chars = [...digits]
-        const nextBoxes = [...boxes]
-        for (let i = 0; i < chars.length && index + i < total; i++) {
-          nextBoxes[index + i] = chars[i]!
-        }
-        commit(nextBoxes)
-        focusBox(Math.min(index + chars.length, total - 1))
-        return
-      }
-
-      const nextBoxes = [...boxes]
-      nextBoxes[index] = digits
-      commit(nextBoxes)
-      if (digits && index < total - 1) focusBox(index + 1)
-    }
-
-    const handleKeyDown = (index: number, event: KeyboardEvent<HTMLInputElement>) => {
-      if (disabled) return
-
-      switch (event.key) {
-        case 'Backspace': {
-          if (!boxes[index] && index > 0) {
-            event.preventDefault()
-            const nextBoxes = [...boxes]
-            nextBoxes[index - 1] = ''
-            commit(nextBoxes)
-            focusBox(index - 1)
-          }
-          break
-        }
-        case 'Delete': {
-          event.preventDefault()
-          // `boxes` (and every copy derived from it) is always exactly `total` entries long — see
-          // `toBoxes` — so `i + 1` (bounded by `i < total - 1`) never reads past the end.
-          const nextBoxes = [...boxes]
-          for (let i = index; i < total - 1; i++) nextBoxes[i] = nextBoxes[i + 1]!
-          nextBoxes[total - 1] = ''
-          commit(nextBoxes)
-          break
-        }
-        // Arrow keys move by *visual* direction, so they mirror under RTL: the box to the left of
-        // the focused one is the next box, not the previous. `Carousel` and `MenuSubmenu` already
-        // mirror their own arrow handling this way; this used to hardcode the LTR mapping and sent
-        // an RTL user backwards through the field.
-        case 'ArrowLeft':
-        case 'ArrowRight': {
-          const movesForward = (event.key === 'ArrowRight') !== isRTL(event.currentTarget)
-          const nextIndex = movesForward ? index + 1 : index - 1
-          if (nextIndex >= 0 && nextIndex < total) {
-            event.preventDefault()
-            focusBox(nextIndex)
-          }
-          break
-        }
-        default:
-          break
-      }
-    }
-
-    const handlePaste = (event: ClipboardEvent<HTMLInputElement>) => {
-      event.preventDefault()
-      if (disabled) return
-      const digits = onlyDigits(event.clipboardData.getData('text')).slice(0, total)
-      if (!digits) return
-      commit(toBoxes(digits, total))
-      focusBox(Math.min(digits.length, total) - 1)
-    }
-
-    const renderBoxes = (start: number, count: number) =>
-      Array.from({ length: count }, (_, i) => start + i).map((i) => (
-        <OtpBox
-          disabled={disabled}
-          index={i}
-          invalid={invalid}
-          key={i}
-          mask={mask}
-          onChangeValue={(next) => handleChange(i, next)}
-          onKeyDownBox={(event) => handleKeyDown(i, event)}
-          onPasteBox={handlePaste}
-          ref={(el) => {
-            boxRefs.current[i] = el
-          }}
-          size={size}
-          valid={valid}
-          value={boxes[i] ?? ''}
-        />
-      ))
-
-    let content: ReactNode
-    if (groupSizes && groupSizes.length > 0) {
-      let cursor = 0
-      content = groupSizes.map((groupSize, groupIndex) => {
-        const start = cursor
-        cursor += groupSize
-        return (
-          // eslint-disable-next-line react/no-array-index-key
-          <Fragment key={groupIndex}>
-            {groupIndex > 0 && <span className="form-otp-separator">{separator}</span>}
-            {inputGroup ? (
-              <div className="input-group">{renderBoxes(start, groupSize)}</div>
-            ) : (
-              renderBoxes(start, groupSize)
-            )}
-          </Fragment>
-        )
-      })
-    } else {
-      content = renderBoxes(0, total)
-    }
-
-    const {
-      describedBy,
-      feedbackId,
-      helpId,
-      inputId: groupId,
-      labelId,
-      labelledBy
-    } = useFormField({
-      ariaDescribedBy: rest['aria-describedby'],
-      ariaLabelledBy: rest['aria-labelledby'],
-      help,
-      id,
-      invalid,
-      invalidFeedback,
-      label,
-      valid,
-      validFeedback
-    })
-
-    return renderFormField({
-      children: (
-        <div
-          {...rest}
-          aria-describedby={describedBy}
-          aria-labelledby={labelledBy}
-          className={classNames(
-            'form-otp',
-            { 'input-group': inputGroup && !(groupSizes && groupSizes.length > 0) },
-            validationClassName(invalid, valid),
-            className
-          )}
-          id={groupId}
-          ref={forkedRef}
-          role="group"
-        >
-          {content}
-          {name && <input disabled={disabled} name={name} type="hidden" value={boxes.join('')} />}
-        </div>
-      ),
-      help,
-      ids: { feedback: feedbackId, help: helpId, label: labelId },
-      invalid,
-      invalidFeedback,
-      label,
-      valid,
-      validFeedback
-    })
-  }
-)
-
-OtpInput.displayName = 'OtpInput'

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

@@ -1,2 +0,0 @@
-export { OtpInput } from './OtpInput'
-export type { OtpInputProps } from './OtpInput'