@chassis-ui/react 0.0.0-20260831090525

package/src/components/nav/NavLink.tsx

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

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

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

@@ -0,0 +1,112 @@
+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 | 'small' | 'medium' | 'large' | 'xlarge' | '2xlarge' | '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

@@ -0,0 +1,55 @@
+import React, { ElementType, ForwardRefRenderFunction, ReactElement } from 'react'
+import classNames from 'classnames'
+
+import {
+  createPolymorphicComponent,
+  PolymorphicComponentProps,
+  PolymorphicRef
+} 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?: PolymorphicRef<C> }
+) => 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

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

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

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

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

@@ -0,0 +1,15 @@
+/*
+ * `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

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

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

@@ -0,0 +1,66 @@
+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="small"
+        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'