@chassis-ui/react 0.1.3 → 0.3.0

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,7 +0,0 @@
-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,34 +0,0 @@
-import React, { forwardRef, HTMLAttributes } from 'react'
-import classNames from 'classnames'
-
-import { Icon } from '../icon/Icon'
-
-export interface NavbarTogglerProps extends HTMLAttributes<HTMLButtonElement> {
-  /**
-   * A string of all className you want applied to the base component.
-   */
-  className?: string
-  /**
-   * The accessible label announced by assistive technology when no children are provided.
-   */
-  label?: string
-}
-
-export const NavbarToggler = forwardRef<HTMLButtonElement, NavbarTogglerProps>(
-  ({ children, className, label = 'Toggle navigation', ...rest }, ref) => {
-    const _className = classNames('button icon-only navbar-toggler', className)
-
-    return (
-      <button type="button" className={_className} {...rest} ref={ref}>
-        {children ?? (
-          <>
-            <Icon name="bars-outline" className="navbar-toggler-icon" />
-            <span className="visually-hidden">{label}</span>
-          </>
-        )}
-      </button>
-    )
-  }
-)
-
-NavbarToggler.displayName = 'NavbarToggler'

package/src/components/navbar/index.ts

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

package/src/components/notification/Notification.scss

@@ -1,15 +0,0 @@
-/*
- * `Notification` applies chassis-css's generic `.fade` utility (`_transitions.scss`) for its base
- * opacity transition and `:not(.show) { opacity: 0 }` resting state — no chassis-css edit needed
- * for that part. `../chassis-css/scss/_notification.scss` has no `.showing` equivalent of its own
- * (unlike `_toast.scss`'s `.toast.showing { opacity: 0 }`), since a persistent banner has no
- * built-in notion of a fade transition. This file adds just that one Toast-parity rule, so the
- * entering/exiting halfway state (both `show` and `showing` present, per `Notification.tsx`'s
- * `getTransitionClass`) renders at opacity 0 instead of snapping straight to `.fade`'s `1`.
- */
-
-@layer components {
-  .notification.showing {
-    opacity: 0;
-  }
-}

package/src/components/notification/Notification.tsx

@@ -1,187 +0,0 @@
-import React, { ElementType, forwardRef, HTMLAttributes, ReactNode } from 'react'
-import classNames from 'classnames'
-import { mergeProps } from 'react-aria'
-import { Transition } from 'react-transition-group'
-
-import { ContextColor } from '../../types'
-import { CloseButton } from '../close-button/CloseButton'
-import { useAutoDismiss, useDismissibleTransition } from '../../hooks'
-import { NotificationContext } from './context'
-import { NotificationIcon } from './NotificationIcon'
-import { NotificationText } from './NotificationText'
-import { NotificationTitle } from './NotificationTitle'
-import './Notification.scss'
-
-export interface NotificationProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
-  /**
-   * Optional trailing content — e.g. a row of `Button`s — rendered after `text`/`children`.
-   */
-  actions?: ReactNode
-  /**
-   * Automatically dismiss the notification after `delay`. The timer pauses while the pointer
-   * or focus is on the notification, and only starts once the notification is visible.
-   * Defaults to `false` — unlike `Toast`, notifications are persistent banners by default.
-   */
-  autohide?: boolean
-  /**
-   * A string of all className you want applied to the component.
-   */
-  className?: string
-  /**
-   * Overrides the dismiss button's accessible name (defaults to `'Close'`). Set this for
-   * non-English UIs.
-   */
-  closeLabel?: string
-  /**
-   * Sets the color of the component to one of Chassis context colors.
-   */
-  color?: ContextColor
-  /**
-   * Delay in ms before an `autohide` notification dismisses itself.
-   */
-  delay?: number
-  /**
-   * Optionally add a close button to the notification and allow it to self dismiss.
-   */
-  dismissible?: boolean
-  /**
-   * Leading icon. A string is rendered as `<NotificationIcon name={icon} />`; pass any other
-   * node for a fully custom icon. Automatically top-aligns with `title` when both are set —
-   * a custom icon node is responsible for its own alignment.
-   */
-  icon?: string | ReactNode
-  /**
-   * Applies the solid context style to the notification.
-   */
-  solid?: boolean
-  /**
-   * Message body, rendered via a single `<NotificationText>`. For multi-block content, compose
-   * `children` manually instead — `text` wraps everything in one element.
-   */
-  text?: ReactNode
-  /**
-   * Heading, rendered via `<NotificationTitle>`.
-   */
-  title?: ReactNode
-  /**
-   * Element or component used for the `title` heading. Passed through to `NotificationTitle`'s
-   * own `component` prop. Defaults to `'h4'`.
-   */
-  titleComponent?: ElementType
-  /**
-   * Callback fired when the component requests to be closed.
-   */
-  onClose?: () => void
-  /**
-   * Callback fired when the component requests to be shown.
-   */
-  onShow?: () => void
-  /**
-   * ARIA live-region role. Use `status` (the default) for confirmation, progress, and
-   * informational messages, which announce politely. Use `alert` for messages that need
-   * immediate attention — validation errors, failed operations — which interrupt speech.
-   */
-  role?: 'status' | 'alert'
-  /**
-   * Toggle the visibility of component.
-   */
-  visible?: boolean
-}
-
-export const Notification = forwardRef<HTMLDivElement, NotificationProps>(
-  (
-    {
-      actions,
-      autohide = false,
-      children,
-      className,
-      closeLabel = 'Close',
-      color = 'primary',
-      delay = 5000,
-      dismissible,
-      icon,
-      solid,
-      text,
-      title,
-      titleComponent = 'h4',
-      role = 'status',
-      visible = true,
-      onClose,
-      onShow,
-      ...rest
-    },
-    ref
-  ) => {
-    const {
-      close,
-      entered,
-      forkedRef,
-      getTransitionClass,
-      textId,
-      titleId,
-      transitionProps,
-      visible: _visible
-    } = useDismissibleTransition({ onClose, onShow, ref, visible })
-
-    // Gated on `entered`, not just `_visible` (see `Toast`'s identical comment) — the entrance
-    // transition finishing is what `autohide`'s JSDoc means by "the timer starts once the
-    // notification is visible".
-    const autoDismissProps = useAutoDismiss({
-      enabled: autohide,
-      delay,
-      visible: _visible && entered,
-      onHide: close
-    })
-
-    const _className = classNames(
-      'notification',
-      'fade',
-      color,
-      {
-        solid
-      },
-      className
-    )
-
-    return (
-      <Transition {...transitionProps} mountOnEnter timeout={150}>
-        {(state) => {
-          const transitionClass = getTransitionClass(state)
-          return (
-            <NotificationContext.Provider value={{ visible: _visible, close }}>
-              <div
-                className={classNames(_className, transitionClass)}
-                role={role}
-                aria-labelledby={title ? titleId : undefined}
-                aria-describedby={title && text ? textId : undefined}
-                {...mergeProps(rest, autoDismissProps)}
-                ref={forkedRef}
-              >
-                {icon &&
-                  (typeof icon === 'string' ? (
-                    <NotificationIcon
-                      name={icon}
-                      className={title ? 'align-self-start' : undefined}
-                    />
-                  ) : (
-                    icon
-                  ))}
-                {title && (
-                  <NotificationTitle id={titleId} component={titleComponent}>
-                    {title}
-                  </NotificationTitle>
-                )}
-                {text && <NotificationText id={textId}>{text}</NotificationText>}
-                {children}
-                {actions}
-                {dismissible && <CloseButton label={closeLabel} onClick={close} />}
-              </div>
-            </NotificationContext.Provider>
-          )
-        }}
-      </Transition>
-    )
-  }
-)
-
-Notification.displayName = 'Notification'

package/src/components/notification/NotificationIcon.tsx

@@ -1,21 +0,0 @@
-import React, { forwardRef } from 'react'
-import classNames from 'classnames'
-
-import { Icon, IconProps } from '../icon/Icon'
-
-export type NotificationIconProps = IconProps & {
-  /**
-   * A string of all className you want applied to the base component.
-   */
-  className?: string
-}
-
-export const NotificationIcon = forwardRef<HTMLSpanElement | SVGSVGElement, NotificationIconProps>(
-  ({ className, ...rest }, ref) => {
-    const _className = classNames('notification-icon', className)
-
-    return <Icon className={_className} {...rest} ref={ref} />
-  }
-)
-
-NotificationIcon.displayName = 'NotificationIcon'

package/src/components/notification/NotificationStack.tsx

@@ -1,66 +0,0 @@
-import React, { forwardRef, HTMLAttributes } from 'react'
-
-import { useToastRegionQueue } from '../../hooks'
-import { Stack } from '../stack'
-import { Notification } from './Notification'
-import { notificationQueue } from './notificationQueue'
-
-export interface NotificationStackProps extends HTMLAttributes<HTMLDivElement> {
-  /**
-   * A string of all className you want applied to the base component.
-   */
-  className?: string
-  /**
-   * Queued notifications show newest-first by default — the typical toast pattern. Set
-   * `reverse` for a chronological transcript instead, oldest-first.
-   */
-  reverse?: boolean
-}
-
-// Renders the shared `notificationQueue` (see `notificationQueue.ts` — `addNotification()` is
-// how notifications get added to it from anywhere in the app) plus any statically-passed
-// `children`, e.g. a permanently pinned notification alongside dynamic ones — the same static
-// children still render with nothing queued, so this doubles as a plain grouping/spacing
-// wrapper for hand-placed notifications. Unlike `Toaster`, this always renders in normal
-// document flow rather than a fixed/portaled overlay — Chassis notifications are in-page
-// banners, not floating toasts.
-export const NotificationStack = forwardRef<HTMLDivElement, NotificationStackProps>(
-  ({ children, className, reverse, ...rest }, ref) => {
-    const { forkedRef, regionProps, state } = useToastRegionQueue(notificationQueue, ref)
-
-    if (state.visibleToasts.length === 0 && !children) {
-      return null
-    }
-
-    // The queue is already newest-first (each add unshifts); `reverse` opts into chronological
-    // order instead.
-    const queued = reverse ? [...state.visibleToasts].reverse() : state.visibleToasts
-
-    return (
-      <Stack
-        direction="vertical"
-        gap="sm"
-        className={className}
-        {...regionProps}
-        {...rest}
-        ref={forkedRef}
-      >
-        {children}
-        {queued.map((item) => {
-          const { children: notificationChildren, ...notificationProps } = item.content
-          return (
-            <Notification
-              key={item.key}
-              {...notificationProps}
-              onClose={() => state.close(item.key)}
-            >
-              {notificationChildren}
-            </Notification>
-          )
-        })}
-      </Stack>
-    )
-  }
-)
-
-NotificationStack.displayName = 'NotificationStack'