@chassis-ui/react 0.2.0 → 0.4.0

package/src/components/modal/ModalHeader.tsx

@@ -1,60 +0,0 @@
-import React, { ElementType, ForwardRefRenderFunction, ReactElement } from 'react'
-import classNames from 'classnames'
-
-import { useModal } from '../../hooks'
-import {
-  createPolymorphicComponent,
-  PolymorphicComponentProps,
-  PolymorphicRef
-} from '../../utils/polymorphic'
-import { CloseButton } from '../close-button/CloseButton'
-
-type ModalHeaderOwnProps<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 ModalHeaderProps<C extends ElementType = 'div'> = PolymorphicComponentProps<
-  C,
-  ModalHeaderOwnProps<C>
->
-
-type ModalHeaderComponent = (<C extends ElementType = 'div'>(
-  props: ModalHeaderProps<C> & { ref?: PolymorphicRef<C> }
-) => ReactElement | null) & { displayName?: string }
-
-function ModalHeaderRender<C extends ElementType = 'div'>(
-  { children, className, closeButton = true, closeLabel, component, ...rest }: ModalHeaderProps<C>,
-  ref: PolymorphicRef<C>
-) {
-  const Component = component ?? 'div'
-  const { close } = useModal()
-  const _className = classNames('modal-header', className)
-
-  return (
-    <Component className={_className} {...rest} ref={ref}>
-      {children}
-      {closeButton && <CloseButton label={closeLabel} onClick={close} />}
-    </Component>
-  )
-}
-
-export const ModalHeader = createPolymorphicComponent<ModalHeaderComponent>(
-  ModalHeaderRender as ForwardRefRenderFunction<Element, ModalHeaderProps<ElementType>>,
-  'ModalHeader'
-)

package/src/components/modal/ModalTitle.tsx

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

package/src/components/modal/index.ts

@@ -1,18 +0,0 @@
-'use client'
-
-import '../../utils/suppressFocusRingGlobally'
-
-export { Modal } from './Modal'
-export type { ModalProps } from './Modal'
-export { ModalBody } from './ModalBody'
-export type { ModalBodyProps } from './ModalBody'
-export { ModalFooter } from './ModalFooter'
-export type { ModalFooterProps } from './ModalFooter'
-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/Nav.tsx

@@ -1,97 +0,0 @@
-import React, { ElementType, ForwardRefRenderFunction, ReactElement } from 'react'
-import classNames from 'classnames'
-
-import {
-  createPolymorphicComponent,
-  PolymorphicComponentProps,
-  PolymorphicRef
-} from '../../utils/polymorphic'
-import { NavItem } from './NavItem'
-
-export interface NavItemDef {
-  /**
-   * Label content for the nav item.
-   */
-  label: React.ReactNode
-  /**
-   * URL for the nav link.
-   */
-  href?: string
-  /**
-   * Marks the item as active.
-   */
-  active?: boolean
-  /**
-   * Marks the item as disabled.
-   */
-  disabled?: boolean
-}
-
-type NavOwnProps<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
-  /**
-   * Array of nav item definitions for data-driven rendering. When provided, children are ignored.
-   */
-  items?: NavItemDef[]
-  /**
-   * Specify a layout type for component.
-   */
-  layout?: 'fill' | 'justified'
-  /**
-   * Set the nav variant to tabs or pills.
-   */
-  variant?: 'tabs' | 'pills'
-}
-
-export type NavProps<C extends ElementType = 'ul'> = PolymorphicComponentProps<C, NavOwnProps<C>>
-
-type NavComponent = (<C extends ElementType = 'ul'>(
-  props: NavProps<C> & { ref?: PolymorphicRef<C> }
-) => ReactElement | null) & { displayName?: string }
-
-function NavRender<C extends ElementType = 'ul'>(
-  { children, className, component, items, layout, variant, ...rest }: NavProps<C>,
-  ref: PolymorphicRef<C>
-) {
-  const Component = component ?? 'ul'
-  const _className = classNames(
-    'nav',
-    {
-      [`nav-${layout}`]: layout,
-      [`nav-${variant}`]: variant
-    },
-    className
-  )
-
-  const autoContent = items
-    ? items.map((item, idx) => (
-        <NavItem
-          // eslint-disable-next-line react/no-array-index-key
-          key={idx}
-          active={item.active}
-          disabled={item.disabled}
-          href={item.href}
-        >
-          {item.label}
-        </NavItem>
-      ))
-    : null
-
-  return (
-    <Component className={_className} role="navigation" {...rest} ref={ref}>
-      {autoContent ?? children}
-    </Component>
-  )
-}
-
-export const Nav = createPolymorphicComponent<NavComponent>(
-  NavRender as ForwardRefRenderFunction<Element, NavProps<ElementType>>,
-  'Nav'
-)

package/src/components/nav/NavItem.tsx

@@ -1,42 +0,0 @@
-import React, {
-  ElementType,
-  ForwardRefRenderFunction,
-  forwardRef,
-  ReactElement,
-  ReactNode,
-  Ref
-} from 'react'
-import classNames from 'classnames'
-
-import { NavLink, NavLinkProps } from './NavLink'
-
-type NavItemComponent = (<C extends ElementType = 'a'>(
-  props: NavLinkProps<C> & { ref?: Ref<HTMLLIElement> }
-) => ReactElement | null) & { displayName?: string }
-
-function NavItemRender<C extends ElementType = 'a'>(
-  { children, className, ...rest }: NavLinkProps<C>,
-  ref: Ref<HTMLLIElement>
-) {
-  const _className = classNames('nav-item', className)
-  const { href } = rest as { href?: string }
-
-  if (href) {
-    return (
-      <li className={_className} ref={ref}>
-        <NavLink {...(rest as Record<string, unknown>)}>{children as ReactNode}</NavLink>
-      </li>
-    )
-  }
-  return (
-    <li className={_className} {...(rest as Record<string, unknown>)} ref={ref}>
-      {children}
-    </li>
-  )
-}
-
-export const NavItem = forwardRef(
-  NavItemRender as ForwardRefRenderFunction<HTMLLIElement, NavLinkProps<ElementType>>
-) as NavItemComponent
-
-NavItem.displayName = 'NavItem'

package/src/components/nav/NavLink.tsx

@@ -1,48 +0,0 @@
-import React, { ElementType, ForwardRefRenderFunction, ReactElement } from 'react'
-import classNames from 'classnames'
-
-import { createPolymorphicComponent, PolymorphicRef } from '../../utils/polymorphic'
-import { LinkProps, Link } from '../link/Link'
-
-type NavLinkOwnProps = {
-  /**
-   * Toggle the active state for the component.
-   */
-  active?: boolean
-  /**
-   * A string of all className you want applied to the component.
-   */
-  className?: string
-  /**
-   * Toggle the disabled state for the component.
-   */
-  disabled?: boolean
-}
-
-export type NavLinkProps<C extends ElementType = 'a'> = LinkProps<C> & NavLinkOwnProps
-
-type NavLinkComponent = (<C extends ElementType = 'a'>(
-  props: NavLinkProps<C> & { ref?: PolymorphicRef<C> }
-) => ReactElement | null) & { displayName?: string }
-
-function NavLinkRender<C extends ElementType = 'a'>(
-  { children, className, ...rest }: NavLinkProps<C>,
-  ref: PolymorphicRef<C>
-) {
-  const _className = classNames('nav-link', className)
-
-  return (
-    <Link
-      className={_className}
-      {...(rest as Record<string, unknown>)}
-      ref={ref as PolymorphicRef<ElementType>}
-    >
-      {children}
-    </Link>
-  )
-}
-
-export const NavLink = createPolymorphicComponent<NavLinkComponent>(
-  NavLinkRender as ForwardRefRenderFunction<Element, NavLinkProps<ElementType>>,
-  'NavLink'
-)

package/src/components/nav/NavTitle.tsx

@@ -1,22 +0,0 @@
-import React, { forwardRef, HTMLAttributes } from 'react'
-import classNames from 'classnames'
-
-export interface NavTitleProps extends HTMLAttributes<HTMLLIElement> {
-  /**
-   * A string of all className you want applied to the component.
-   */
-  className?: string
-}
-
-export const NavTitle = forwardRef<HTMLLIElement, NavTitleProps>(
-  ({ children, className, ...rest }, ref) => {
-    const _className = classNames('nav-title', className)
-    return (
-      <li className={_className} {...rest} ref={ref}>
-        {children}
-      </li>
-    )
-  }
-)
-
-NavTitle.displayName = 'NavTitle'

package/src/components/nav/index.ts

@@ -1,11 +0,0 @@
-'use client'
-
-import '../../utils/suppressFocusRingGlobally'
-
-export { Nav } from './Nav'
-export type { NavProps, NavItemDef } from './Nav'
-export { NavItem } from './NavItem'
-export { NavLink } from './NavLink'
-export type { NavLinkProps } from './NavLink'
-export { NavTitle } from './NavTitle'
-export type { NavTitleProps } from './NavTitle'

package/src/components/navbar/Navbar.tsx

@@ -1,112 +0,0 @@
-import React, { ElementType, ForwardRefRenderFunction, ReactElement } from 'react'
-import classNames from 'classnames'
-
-import {
-  createPolymorphicComponent,
-  PolymorphicComponentProps,
-  PolymorphicRef
-} from '../../utils/polymorphic'
-import { Breakpoint, ContextColor, ContextStyle } from '../../types'
-
-type NavbarOwnProps<C extends ElementType> = {
-  /**
-   * A string of all className you want applied to the component.
-   */
-  className?: string
-  /**
-   * Sets the color of the component to one of Chassis context colors.
-   */
-  color?: ContextColor
-  /**
-   * Component used for the root node. Either a string to use a HTML element or a component.
-   */
-  component?: C
-  /**
-   * Defines optional container wrapping children elements.
-   */
-  container?: boolean | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'fluid'
-  /**
-   * Opts this navbar into the framework's dark or light theming, independent of the page's own
-   * theme.
-   */
-  'data-cx-theme'?: 'dark' | 'light'
-  /**
-   * Renders inline at and above this breakpoint, as a drawer below it. `true` renders inline at
-   * every width; omit to keep the drawer at every width.
-   */
-  expand?: boolean | Breakpoint
-  /**
-   * Place component in non-static positions.
-   */
-  placement?: 'fixed-top' | 'fixed-bottom' | 'sticky-top' | 'sticky-bottom'
-  /**
-   * Blurs and saturates whatever sits behind the navbar — useful when it's positioned over a
-   * hero image, video, or scrollable content.
-   */
-  translucent?: boolean
-  /**
-   * Sets the context style of the component. `basic` (the default) renders with no extra class.
-   */
-  variant?: ContextStyle
-}
-
-export type NavbarProps<C extends ElementType = 'nav'> = PolymorphicComponentProps<
-  C,
-  NavbarOwnProps<C>
->
-
-type NavbarComponent = (<C extends ElementType = 'nav'>(
-  props: NavbarProps<C> & { ref?: PolymorphicRef<C> }
-) => ReactElement | null) & { displayName?: string }
-
-function NavbarRender<C extends ElementType = 'nav'>(
-  {
-    children,
-    className,
-    color,
-    component,
-    container,
-    expand,
-    placement,
-    translucent,
-    variant,
-    ...rest
-  }: NavbarProps<C>,
-  ref: PolymorphicRef<C>
-) {
-  const Component = component ?? 'nav'
-  const _className = classNames(
-    'navbar',
-    color,
-    {
-      context: !!color,
-      solid: variant === 'solid',
-      smooth: variant === 'smooth',
-      outline: variant === 'outline',
-      translucent,
-      [typeof expand === 'boolean' ? 'navbar-expand' : `${expand}:navbar-expand`]: expand
-    },
-    placement,
-    className
-  )
-
-  let content
-  if (container) {
-    content = (
-      <div className={`container${container !== true ? '-' + container : ''}`}>{children}</div>
-    )
-  } else {
-    content = children
-  }
-
-  return (
-    <Component className={_className} {...rest} ref={ref}>
-      {content}
-    </Component>
-  )
-}
-
-export const Navbar = createPolymorphicComponent<NavbarComponent>(
-  NavbarRender as ForwardRefRenderFunction<Element, NavbarProps<ElementType>>,
-  'Navbar'
-)

package/src/components/navbar/NavbarBrand.tsx

@@ -1,58 +0,0 @@
-import React, { ElementType, ForwardRefRenderFunction, ReactElement } from 'react'
-import classNames from 'classnames'
-
-import {
-  createPolymorphicComponent,
-  PolymorphicComponentProps,
-  PolymorphicRef,
-  PolymorphicRefWithFallback
-} from '../../utils/polymorphic'
-
-type NavbarBrandOwnProps<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.
-   * Defaults to `span`, or `a` when `href` is set.
-   */
-  component?: C
-  /**
-   * The href attribute specifies the URL of the page the link goes to. Defaults `component` to
-   * `a`.
-   */
-  href?: string
-}
-
-export type NavbarBrandProps<C extends ElementType = 'span'> = PolymorphicComponentProps<
-  C,
-  NavbarBrandOwnProps<C>
->
-
-type NavbarBrandComponent = (<C extends ElementType = 'span'>(
-  props: NavbarBrandProps<C> & {
-    ref?: PolymorphicRefWithFallback<C, HTMLSpanElement | HTMLAnchorElement>
-  }
-) => ReactElement | null) & { displayName?: string }
-
-function NavbarBrandRender<C extends ElementType = 'span'>(
-  { children, component, className, href, ...rest }: NavbarBrandProps<C>,
-  ref: PolymorphicRef<C>
-) {
-  // Only defaults to `a` when `component` wasn't explicitly passed — an explicit `component`
-  // (even alongside `href`) always wins.
-  const Component = (component ?? (href ? 'a' : 'span')) as ElementType
-  const _className = classNames('navbar-brand', className)
-
-  return (
-    <Component className={_className} href={href} {...rest} ref={ref}>
-      {children}
-    </Component>
-  )
-}
-
-export const NavbarBrand = createPolymorphicComponent<NavbarBrandComponent>(
-  NavbarBrandRender as ForwardRefRenderFunction<Element, NavbarBrandProps<ElementType>>,
-  'NavbarBrand'
-)

package/src/components/navbar/NavbarNav.tsx

@@ -1,47 +0,0 @@
-import React, { ElementType, ForwardRefRenderFunction, ReactElement } from 'react'
-import classNames from 'classnames'
-
-import {
-  createPolymorphicComponent,
-  PolymorphicComponentProps,
-  PolymorphicRef
-} from '../../utils/polymorphic'
-
-type NavbarNavOwnProps<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 NavbarNavProps<C extends ElementType = 'ul'> = PolymorphicComponentProps<
-  C,
-  NavbarNavOwnProps<C>
->
-
-type NavbarNavComponent = (<C extends ElementType = 'ul'>(
-  props: NavbarNavProps<C> & { ref?: PolymorphicRef<C> }
-) => ReactElement | null) & { displayName?: string }
-
-function NavbarNavRender<C extends ElementType = 'ul'>(
-  { children, component, className, ...rest }: NavbarNavProps<C>,
-  ref: PolymorphicRef<C>
-) {
-  const Component = component ?? 'ul'
-  const _className = classNames('navbar-nav', className)
-
-  return (
-    <Component className={_className} {...rest} ref={ref}>
-      {children}
-    </Component>
-  )
-}
-
-export const NavbarNav = createPolymorphicComponent<NavbarNavComponent>(
-  NavbarNavRender as ForwardRefRenderFunction<Element, NavbarNavProps<ElementType>>,
-  'NavbarNav'
-)

package/src/components/navbar/NavbarText.tsx

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

package/src/components/navbar/NavbarToggler.tsx

@@ -1,40 +0,0 @@
-import React, { forwardRef, HTMLAttributes } from 'react'
-import classNames from 'classnames'
-
-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.
-   */
-  label?: string
-}
-
-export const NavbarToggler = forwardRef<HTMLButtonElement, NavbarTogglerProps>(
-  ({ 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 ?? (
-          <>
-            <IconSlot icon="menu" override={icon} className="navbar-toggler-icon" />
-            <span className="visually-hidden">{label}</span>
-          </>
-        )}
-      </button>
-    )
-  }
-)
-
-NavbarToggler.displayName = 'NavbarToggler'

package/src/components/navbar/index.ts

@@ -1,14 +0,0 @@
-'use client'
-
-import '../../utils/suppressFocusRingGlobally'
-
-export { Navbar } from './Navbar'
-export type { NavbarProps } from './Navbar'
-export { NavbarBrand } from './NavbarBrand'
-export type { NavbarBrandProps } from './NavbarBrand'
-export { NavbarNav } from './NavbarNav'
-export type { NavbarNavProps } from './NavbarNav'
-export { NavbarText } from './NavbarText'
-export type { NavbarTextProps } from './NavbarText'
-export { NavbarToggler } from './NavbarToggler'
-export type { NavbarTogglerProps } from './NavbarToggler'