@chassis-ui/react 0.1.3 → 0.3.0

package/src/components/button/Button.tsx

@@ -1,232 +0,0 @@
-import React, {
-  ElementType,
-  ForwardRefRenderFunction,
-  MouseEventHandler,
-  ReactElement,
-  Ref
-} from 'react'
-import classNames from 'classnames'
-import { mergeProps } from 'react-aria'
-
-import { ContextColor, ContextStyle, Shapes } from '../../types'
-import { useButtonSemantics, useDisabledAnchorGuard } from '../../hooks'
-import {
-  createPolymorphicComponent,
-  PolymorphicComponentProps,
-  PolymorphicRef,
-  PolymorphicRefWithFallback
-} from '../../utils/polymorphic'
-
-type ButtonOwnProps<C extends ElementType> = {
-  /**
-   * A string of all className you want applied to the base 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
-  /**
-   * Toggle the disabled state for the component.
-   */
-  disabled?: boolean
-  /**
-   * The href attribute specifies the URL of the page the link goes to.
-   */
-  href?: string
-  /**
-   * Fires on click. Typed for every element `component` can actually render (`button`, `a`,
-   * `input`, or a custom component), rather than narrowed to `HTMLButtonElement` alone.
-   */
-  onClick?: MouseEventHandler<HTMLButtonElement | HTMLAnchorElement | HTMLInputElement>
-  /**
-   * Marks the button as pressed for toggle-style usage (e.g. a formatting toolbar button).
-   * Applies the `.active` class and sets `aria-pressed` so assistive technology announces
-   * "button, pressed" rather than treating the button as a navigation link.
-   */
-  pressed?: boolean
-  /**
-   * Select the shape of the component.
-   */
-  shape?: Shapes
-  /**
-   * Size the component sm or lg.
-   */
-  size?: 'sm' | 'lg'
-  /**
-   * Specifies the type of button. Always specify the type attribute for the `<button>` element.
-   * Different browsers may use different default types for the `<button>` element.
-   */
-  type?: 'button' | 'submit' | 'reset'
-  /**
-   * Set the button style variant. Same as `ContextStyle`, but `solid` (the unmodified default
-   * look) doesn't apply as a class, and `link` — button-specific, not a context color — makes
-   * the button look and behave like a hyperlink while keeping its `color`.
-   */
-  variant?: Exclude<ContextStyle, 'solid'> | 'link'
-}
-
-export type ButtonProps<C extends ElementType = 'button'> = PolymorphicComponentProps<
-  C,
-  ButtonOwnProps<C>
->
-
-type ButtonComponent = (<C extends ElementType = 'button'>(
-  props: ButtonProps<C> & {
-    ref?: PolymorphicRefWithFallback<C, HTMLButtonElement | HTMLAnchorElement>
-  }
-) => ReactElement | null) & { displayName?: string }
-
-function ButtonRender<C extends ElementType = 'button'>(
-  {
-    children,
-    className,
-    color = 'primary',
-    component,
-    disabled,
-    href,
-    onClick,
-    pressed,
-    shape,
-    size,
-    type = 'button',
-    variant,
-    ...rest
-  }: ButtonProps<C>,
-  ref: PolymorphicRef<C>
-) {
-  // Only defaults to `a` when `component` wasn't explicitly passed — an explicit `component`
-  // (even alongside `href`, e.g. a router Link component that accepts `href` itself) always wins.
-  const Component = (component ?? (href ? 'a' : 'button')) as ElementType
-  const isAnchor = Component === 'a'
-
-  // A component reference (e.g. a router `Link`) has its own visual identity and is trusted to
-  // handle its own keyboard/role semantics, same as `CloseButton`'s `isComponentReference` escape
-  // hatch — synthesizing `role="button"` and Enter/Space handling on top of it would stamp the
-  // wrong ARIA role onto whatever it actually renders (e.g. an `<a>`) and can double-fire a click
-  // (native anchor Enter→click, plus the synthesized keydown→click). Only a bare, non-native HTML
-  // tag string (e.g. `'div'`) still needs `useButtonSemantics`'s synthesis.
-  const isComponentReference = typeof Component !== 'string'
-
-  const _className = classNames(
-    'button',
-    color,
-    {
-      outline: variant === 'outline',
-      smooth: variant === 'smooth',
-      link: variant === 'link',
-      active: pressed,
-      disabled: Component !== 'button' && disabled
-    },
-    size,
-    shape,
-    className
-  )
-
-  // `<a>` has no real `disabled` attribute, so a disabled link button still fires click
-  // (and still navigates) unless it's blocked here. Native `button`/`input` already stop
-  // clicks on their own once the `disabled` attribute below is set.
-  const handleClick = useDisabledAnchorGuard<
-    HTMLButtonElement | HTMLAnchorElement | HTMLInputElement
-  >(isAnchor, disabled, onClick)
-
-  // Native `button`/`a`/`input` elements get keyboard activation, focus and disabled
-  // handling for free from the browser. A custom `component` doesn't, so useButtonSemantics
-  // fills in role, tabIndex and Enter/Space activation for it, matching native button behavior.
-  // `ref` is cast for the same reason as the branches below — it's declared for whatever `C`
-  // was passed, but this path (a non-native `component`) only ever populates it with a
-  // button/anchor-shaped instance.
-  const { buttonProps, forkedRef } = useButtonSemantics<HTMLButtonElement | HTMLAnchorElement>(
-    ref as Ref<HTMLButtonElement | HTMLAnchorElement>,
-    { disabled, onClick }
-  )
-
-  // Rendered as three separate, literal JSX tags (rather than one `<Component>` tag driven
-  // by a `'button' | 'a' | 'input'`-typed variable) because a union-typed tag makes JSX
-  // intersect all three elements' prop types — `onClick`/`ref` would then need to satisfy
-  // `button`, `a` *and* `input` simultaneously, which `handleClick`/`ref`'s real, narrower
-  // types can't. `ref` is cast per branch since it's declared for the generic `C`, not the
-  // specific element each branch actually renders (true by construction — each branch's ref
-  // only ever populates with a matching instance). The props common to all three
-  // (className/aria-pressed/onClick) are factored out here so a future addition only needs to
-  // change one place, not three.
-  const sharedProps = {
-    className: _className,
-    'aria-pressed': pressed,
-    onClick: handleClick
-  }
-
-  if (Component === 'button') {
-    return (
-      <button
-        {...(rest as Record<string, unknown>)}
-        {...sharedProps}
-        type={type}
-        disabled={disabled}
-        ref={ref as Ref<HTMLButtonElement>}
-      >
-        {children}
-      </button>
-    )
-  }
-
-  if (Component === 'input') {
-    return (
-      // `rest` is cast because it's typed generically, whose event handlers don't structurally
-      // match `<input>`'s own `onChange` (value-change semantics) — `component="input"` is a
-      // fixed set of documented attributes (`type`, `value`, `disabled`, ...), not a
-      // general-purpose input, so this is a safe, deliberate escape.
-      <input
-        {...(rest as Record<string, unknown>)}
-        {...sharedProps}
-        type={type}
-        disabled={disabled}
-        ref={ref as Ref<HTMLInputElement>}
-      />
-    )
-  }
-
-  if (isAnchor) {
-    return (
-      // `rest` is cast for the same reason as the `input` branch above — it's typed generically,
-      // whose DOM event handlers are parameterized for whatever `C` was passed, which don't
-      // structurally match `<a>`'s own `HTMLAnchorElement` ones (e.g. `onCopy`), even though both
-      // accept a real DOM event at runtime.
-      <a
-        {...(rest as Record<string, unknown>)}
-        {...sharedProps}
-        href={href}
-        {...(disabled && { 'aria-disabled': true, tabIndex: -1 })}
-        ref={ref as Ref<HTMLAnchorElement>}
-      >
-        {children}
-      </a>
-    )
-  }
-
-  return (
-    <Component
-      {...(isComponentReference
-        ? ({ disabled, onClick, ...rest } as Record<string, unknown>)
-        : (mergeProps(rest, buttonProps) as Record<string, unknown>))}
-      className={_className}
-      aria-pressed={pressed}
-      // `href` was only ever forwarded when it also forced `Component` to `'a'` — now that an
-      // explicit `component` wins over that default (see above), it needs to keep reaching a
-      // custom `component`/HTML tag directly, same as `Avatar`'s equivalent fix.
-      {...(href && { href })}
-      ref={isComponentReference ? ref : forkedRef}
-    >
-      {children}
-    </Component>
-  )
-}
-
-export const Button = createPolymorphicComponent<ButtonComponent>(
-  ButtonRender as ForwardRefRenderFunction<Element, ButtonProps<ElementType>>,
-  'Button'
-)

package/src/components/button/index.ts

@@ -1,2 +0,0 @@
-export { Button } from './Button'
-export type { ButtonProps } from './Button'

package/src/components/button-group/ButtonGroup.tsx

@@ -1,55 +0,0 @@
-import React, { ElementType, ForwardRefRenderFunction, ReactElement } from 'react'
-import classNames from 'classnames'
-
-import {
-  createPolymorphicComponent,
-  PolymorphicComponentProps,
-  PolymorphicRef
-} from '../../utils/polymorphic'
-
-type ButtonGroupOwnProps<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
-  /**
-   * Size the component sm or lg.
-   */
-  size?: 'sm' | 'lg'
-  /**
-   * Create a set of buttons that appear vertically stacked rather than horizontally. Split button dropdowns are not supported here.
-   */
-  vertical?: boolean
-}
-
-export type ButtonGroupProps<C extends ElementType = 'div'> = PolymorphicComponentProps<
-  C,
-  ButtonGroupOwnProps<C>
->
-
-type ButtonGroupComponent = (<C extends ElementType = 'div'>(
-  props: ButtonGroupProps<C> & { ref?: PolymorphicRef<C> }
-) => ReactElement | null) & { displayName?: string }
-
-function ButtonGroupRender<C extends ElementType = 'div'>(
-  { children, className, component, size, vertical, ...rest }: ButtonGroupProps<C>,
-  ref: PolymorphicRef<C>
-) {
-  const Component = component ?? 'div'
-  const _className = classNames('button-group', { vertical }, size, className)
-
-  return (
-    <Component className={_className} {...rest} ref={ref}>
-      {children}
-    </Component>
-  )
-}
-
-export const ButtonGroup = createPolymorphicComponent<ButtonGroupComponent>(
-  ButtonGroupRender as ForwardRefRenderFunction<Element, ButtonGroupProps<ElementType>>,
-  'ButtonGroup'
-)

package/src/components/button-group/ButtonToolbar.tsx

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

package/src/components/button-group/index.ts

@@ -1,4 +0,0 @@
-export { ButtonGroup } from './ButtonGroup'
-export type { ButtonGroupProps } from './ButtonGroup'
-export { ButtonToolbar } from './ButtonToolbar'
-export type { ButtonToolbarProps } from './ButtonToolbar'

package/src/components/calendar/Calendar.scss

@@ -1,57 +0,0 @@
-@use "@chassis-ui/css/scss/config" as *;
-@use "@chassis-ui/css/scss/mixins" as *;
-
-/*
- * `Calendar` reuses chassis-css's `.datepicker-*` classes, so layout/arrows/header/today/disabled/
- * focus styling already comes from `@chassis-ui/css`. This file only covers the gaps: states
- * vanilla-calendar-pro exposes via `data-vc-date-*` (no react-aria equivalent, re-expressed as
- * `.datepicker-date-*` classes) and the month/year picker, which chassis-css styles via attribute
- * selectors this component doesn't have.
- */
-
-@layer components {
-  .datepicker-body {
-    position: relative;
-  }
-
-  .datepicker-months-month.selected,
-  .datepicker-years-year.selected {
-    color: var(--primary-contrast);
-    background-color: var(--primary);
-  }
-
-  .datepicker-months-month.selected:hover,
-  .datepicker-years-year.selected:hover {
-    background-color: var(--primary);
-  }
-
-  /* Leading/trailing days from the adjacent month */
-  .datepicker-date-outside > .datepicker-date-btn {
-    color: var(--day-disabled-fg-color);
-  }
-
-  /* Weekend, muted unless selected/unavailable/disabled takes priority. `:where()` keeps these
-     guards from adding specificity over chassis-css's "today" rule. */
-  .datepicker-date-weekend:where(:not(.datepicker-date-selected):not(.datepicker-date-unavailable)) > .datepicker-date-btn:where(:not([aria-disabled="true"])) {
-    color: var(--fg-subtle);
-  }
-
-  /* Unavailable (`isDateUnavailable`) — focusable and announced, unlike native disabled. */
-  .datepicker-date-unavailable:where(:not(.datepicker-date-selected)) > .datepicker-date-btn {
-    color: var(--day-disabled-fg-color);
-    text-decoration: line-through;
-  }
-
-  /* Selected (single-date only; `RangeCalendar.scss` handles start/end/in-range). */
-  .datepicker-date-selected > .datepicker-date-btn {
-    color: var(--primary-contrast);
-    background-color: var(--primary);
-  }
-
-  /* Extra `.datepicker-date` qualifier wins the specificity tie with chassis-css's "today" rule
-     when a date is both selected and today. */
-  .datepicker-date-selected.datepicker-date[aria-current="date"] > .datepicker-date-btn {
-    color: var(--primary-contrast);
-    background-color: var(--primary);
-  }
-}