@remix-run/ui 0.2.0 → 0.4.0

package/src/components/accordion/accordion.tsx

@@ -1,565 +0,0 @@
-import {
-  css,
-  createElement,
-  on,
-  ref,
-  type CSSMixinDescriptor,
-  type Handle,
-  type Props,
-  type RemixNode,
-  type Dispatched,
-} from '@remix-run/ui'
-
-import { spring } from '@remix-run/ui/animation'
-import { Glyph } from '../glyph/glyph.tsx'
-import { theme } from '../../theme/theme.ts'
-
-const ACCORDION_CHANGE_EVENT = 'rmx:accordion-change' as const
-
-type AccordionChangeHandler<target extends HTMLElement> = (
-  event: Dispatched<AccordionChangeEvent, target>,
-  signal: AbortSignal,
-) => void | Promise<void>
-
-declare global {
-  interface HTMLElementEventMap {
-    [ACCORDION_CHANGE_EVENT]: AccordionChangeEvent
-  }
-}
-
-export class AccordionChangeEvent extends Event {
-  accordionType: AccordionType
-  itemValue: string
-  value: string | null | string[]
-
-  constructor(
-    value: string | null | string[],
-    init: {
-      accordionType: AccordionType
-      itemValue: string
-    },
-  ) {
-    super(ACCORDION_CHANGE_EVENT, {
-      bubbles: true,
-    })
-    this.accordionType = init.accordionType
-    this.itemValue = init.itemValue
-    this.value = value
-  }
-}
-
-type AccordionType = 'single' | 'multiple'
-type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6
-
-type AccordionBaseProps = Omit<Props<'div'>, 'children'> & {
-  children?: RemixNode
-  disabled?: boolean
-  headingLevel?: HeadingLevel
-}
-
-export type AccordionSingleProps = AccordionBaseProps & {
-  type?: 'single'
-  value?: string | null
-  defaultValue?: string | null
-  onValueChange?: (value: string | null) => void
-  collapsible?: boolean
-}
-
-export type AccordionMultipleProps = AccordionBaseProps & {
-  type: 'multiple'
-  value?: string[]
-  defaultValue?: string[]
-  onValueChange?: (value: string[]) => void
-}
-
-export type AccordionProps = AccordionSingleProps | AccordionMultipleProps
-
-export type AccordionItemProps = Omit<Props<'div'>, 'children'> & {
-  children?: RemixNode
-  disabled?: boolean
-  value: string
-}
-
-export type AccordionTriggerProps = Omit<Props<'button'>, 'children' | 'type'> & {
-  children?: RemixNode
-  indicator?: RemixNode | null
-  type?: 'button' | 'submit' | 'reset'
-}
-
-export type AccordionContentProps = Omit<Props<'div'>, 'children'> & {
-  children?: RemixNode
-}
-
-type RegisteredItem = {
-  disabled: boolean
-  getTriggerNode(): HTMLButtonElement | null
-  value: string
-}
-
-type AccordionContext = {
-  collapsible: boolean
-  disabled: boolean
-  focusItem(value: string, direction: FocusDirection): void
-  getPanelId(value: string): string | undefined
-  getTriggerId(value: string): string | undefined
-  headingLevel: HeadingLevel
-  isOpen(value: string): boolean
-  registerItem(item: RegisteredItem): void
-  toggleItem(value: string): void
-  type: AccordionType
-}
-
-type AccordionItemContext = {
-  disabled: boolean
-  headingLevel: HeadingLevel
-  lockedOpen: boolean
-  open: boolean
-  panelId: string
-  setTriggerNode(node: HTMLButtonElement | null): void
-  triggerId: string
-  value: string
-}
-
-type FocusDirection = 'first' | 'last' | 'next' | 'previous'
-
-const accordionPanelClipCss = css({
-  minHeight: 0,
-  overflow: 'hidden',
-})
-
-const accordionTransition = spring()
-
-const accordionRootCss: CSSMixinDescriptor = css({
-  display: 'flex',
-  flexDirection: 'column',
-  minWidth: 0,
-})
-
-const accordionItemCss: CSSMixinDescriptor = css({
-  minWidth: 0,
-})
-
-const accordionTriggerCss: CSSMixinDescriptor = css({
-  all: 'unset',
-  boxSizing: 'border-box',
-  cursor: 'revert',
-  display: 'grid',
-  gridTemplateColumns: 'minmax(0, 1fr) auto',
-  alignItems: 'center',
-  gap: theme.space.md,
-  width: '100%',
-  minHeight: theme.control.height.lg,
-  padding: `${theme.space.md} 0`,
-  color: theme.colors.text.primary,
-  fontFamily: theme.fontFamily.sans,
-  fontSize: theme.fontSize.sm,
-  lineHeight: theme.lineHeight.normal,
-  fontWeight: theme.fontWeight.medium,
-  textAlign: 'left',
-  '&:hover:not(:disabled)': {
-    backgroundColor: theme.surface.lvl1,
-  },
-  '&:focus-visible': {
-    outline: `2px solid ${theme.colors.focus.ring}`,
-    outlineOffset: '2px',
-  },
-  '&:disabled': {
-    opacity: 0.55,
-  },
-  '& > span:first-child': {
-    minWidth: 0,
-  },
-})
-
-const accordionIndicatorCss: CSSMixinDescriptor = css({
-  display: 'inline-flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  width: theme.fontSize.sm,
-  height: theme.fontSize.sm,
-  color: theme.colors.text.muted,
-  transition: `transform ${accordionTransition}`,
-  '& > svg': {
-    display: 'block',
-    width: '100%',
-    height: '100%',
-  },
-  '&[data-state="open"]': {
-    transform: 'rotate(90deg)',
-  },
-})
-
-const accordionPanelCss: CSSMixinDescriptor = css({
-  display: 'grid',
-  gridTemplateRows: '0fr',
-  transition: `grid-template-rows ${accordionTransition}`,
-  '&[data-state="open"]': {
-    gridTemplateRows: '1fr',
-  },
-  '&[data-state="closed"]': {
-    pointerEvents: 'none',
-  },
-  '@media (prefers-reduced-motion: reduce)': {
-    transition: 'none',
-  },
-})
-
-const accordionBodyCss: CSSMixinDescriptor = css({
-  display: 'flow-root',
-  minHeight: 0,
-  paddingBottom: theme.space.md,
-  color: theme.colors.text.secondary,
-  fontSize: theme.fontSize.sm,
-  lineHeight: theme.lineHeight.relaxed,
-  '& > :first-child': {
-    marginTop: 0,
-  },
-  '& > :last-child': {
-    marginBottom: 0,
-  },
-})
-
-export const rootStyle = accordionRootCss
-export const itemStyle = accordionItemCss
-export const triggerStyle = accordionTriggerCss
-export const indicatorStyle = accordionIndicatorCss
-export const panelStyle = accordionPanelCss
-export const bodyStyle = accordionBodyCss
-
-function isMultipleProps(props: AccordionProps | null): props is AccordionMultipleProps {
-  return props?.type === 'multiple'
-}
-
-function AccordionImpl(handle: Handle<AccordionProps, AccordionContext>): () => RemixNode {
-  let rootNode: HTMLElement | null = null
-  let registeredItems: RegisteredItem[] = []
-  let uncontrolledSingleValue: string | null = null
-  let uncontrolledMultipleValue: string[] = []
-  let hasInitializedSingle = false
-  let hasInitializedMultiple = false
-
-  let getType = () => (isMultipleProps(handle.props) ? 'multiple' : 'single')
-
-  let getSingleValue = () => {
-    if (isMultipleProps(handle.props)) {
-      return null
-    }
-
-    if (handle.props.value !== undefined) {
-      return handle.props.value
-    }
-
-    if (!hasInitializedSingle) {
-      uncontrolledSingleValue = handle.props.defaultValue ?? null
-      hasInitializedSingle = true
-    }
-
-    return uncontrolledSingleValue
-  }
-
-  let getMultipleValue = () => {
-    if (!isMultipleProps(handle.props)) {
-      return []
-    }
-
-    if (handle.props.value !== undefined) {
-      return handle.props.value
-    }
-
-    if (!hasInitializedMultiple) {
-      uncontrolledMultipleValue = [...(handle.props.defaultValue ?? [])]
-      hasInitializedMultiple = true
-    }
-
-    return uncontrolledMultipleValue
-  }
-
-  let isOpen = (value: string) => {
-    if (getType() === 'multiple') {
-      return getMultipleValue().includes(value)
-    }
-
-    return getSingleValue() === value
-  }
-
-  let dispatchChange = (itemValue: string, value: string | null | string[]) => {
-    rootNode?.dispatchEvent(
-      new AccordionChangeEvent(value, {
-        accordionType: getType(),
-        itemValue,
-      }),
-    )
-  }
-
-  let toggleItem = (itemValue: string) => {
-    if (handle.props.disabled) {
-      return
-    }
-
-    if (isMultipleProps(handle.props)) {
-      let currentValue = getMultipleValue()
-      let nextValue = currentValue.includes(itemValue)
-        ? currentValue.filter((value) => value !== itemValue)
-        : [...currentValue, itemValue]
-
-      if (handle.props.value === undefined) {
-        uncontrolledMultipleValue = nextValue
-        void handle.update()
-      }
-
-      handle.props.onValueChange?.(nextValue)
-      dispatchChange(itemValue, nextValue)
-      return
-    }
-
-    let isCurrentItemOpen = getSingleValue() === itemValue
-    if (isCurrentItemOpen && !(handle.props.collapsible ?? true)) {
-      return
-    }
-
-    let nextValue = isCurrentItemOpen ? null : itemValue
-
-    if (handle.props.value === undefined) {
-      uncontrolledSingleValue = nextValue
-      void handle.update()
-    }
-
-    handle.props.onValueChange?.(nextValue)
-    dispatchChange(itemValue, nextValue)
-  }
-
-  let focusItem = (itemValue: string, direction: FocusDirection) => {
-    let items = registeredItems.filter((item) => !item.disabled && item.getTriggerNode() !== null)
-    if (items.length === 0) {
-      return
-    }
-
-    let currentIndex = items.findIndex((item) => item.value === itemValue)
-    let targetIndex = 0
-
-    switch (direction) {
-      case 'first':
-        targetIndex = 0
-        break
-      case 'last':
-        targetIndex = items.length - 1
-        break
-      case 'previous':
-        targetIndex = currentIndex <= 0 ? items.length - 1 : currentIndex - 1
-        break
-      case 'next':
-        targetIndex =
-          currentIndex === -1 || currentIndex === items.length - 1 ? 0 : currentIndex + 1
-        break
-    }
-
-    items[targetIndex]?.getTriggerNode()?.focus()
-  }
-
-  let registerItem = (item: RegisteredItem) => {
-    registeredItems.push(item)
-  }
-
-  let getTriggerId = (value: string) =>
-    registeredItems.find((item) => item.value === value)?.getTriggerNode()?.id
-
-  let getPanelId = (value: string) => `${handle.id}-${value}-panel`
-
-  return () => {
-    let collapsible = 'collapsible' in handle.props ? handle.props.collapsible : undefined
-    let {
-      children,
-      defaultValue,
-      disabled,
-      headingLevel,
-      mix,
-      onValueChange,
-      type,
-      value,
-      ...divProps
-    } = handle.props
-    void defaultValue
-    void onValueChange
-    void value
-    registeredItems = []
-
-    handle.context.set({
-      collapsible: type === 'multiple' ? true : (collapsible ?? true),
-      disabled: disabled ?? false,
-      focusItem,
-      getPanelId,
-      getTriggerId,
-      headingLevel: headingLevel ?? 3,
-      isOpen,
-      registerItem,
-      toggleItem,
-      type: type ?? 'single',
-    })
-
-    return (
-      <div
-        {...divProps}
-        data-disabled={disabled ? '' : undefined}
-        data-type={type ?? 'single'}
-        mix={[
-          rootStyle,
-          ref((node) => {
-            rootNode = node as HTMLElement
-          }),
-          ...(mix ?? []),
-        ]}
-      >
-        {children}
-      </div>
-    )
-  }
-}
-
-export function onAccordionChange<target extends HTMLElement>(
-  handler: AccordionChangeHandler<target>,
-  captureBoolean?: boolean,
-): ReturnType<typeof on<target, typeof ACCORDION_CHANGE_EVENT>> {
-  return on(ACCORDION_CHANGE_EVENT, handler, captureBoolean)
-}
-
-export const Accordion = AccordionImpl
-
-export function AccordionItem(
-  handle: Handle<AccordionItemProps, AccordionItemContext>,
-): () => RemixNode {
-  let triggerNode: HTMLButtonElement | null = null
-  let triggerId = `${handle.id}-trigger`
-  let panelId = `${handle.id}-panel`
-
-  return () => {
-    let { children, disabled: itemDisabled, mix, value, ...divProps } = handle.props
-    let accordion = handle.context.get(Accordion)
-    let disabled = accordion.disabled || itemDisabled === true
-    let open = accordion.isOpen(value)
-    let lockedOpen = accordion.type === 'single' && !accordion.collapsible && open
-
-    accordion.registerItem({
-      disabled,
-      getTriggerNode: () => triggerNode,
-      value,
-    })
-
-    handle.context.set({
-      disabled,
-      headingLevel: accordion.headingLevel,
-      lockedOpen,
-      open,
-      panelId,
-      setTriggerNode(node) {
-        triggerNode = node
-      },
-      triggerId,
-      value,
-    })
-
-    return (
-      <div
-        {...divProps}
-        data-disabled={disabled ? '' : undefined}
-        data-state={open ? 'open' : 'closed'}
-        mix={[itemStyle, ...(mix ?? [])]}
-      >
-        {children}
-      </div>
-    )
-  }
-}
-
-export function AccordionTrigger(handle: Handle<AccordionTriggerProps>): () => RemixNode {
-  return () => {
-    let accordion = handle.context.get(Accordion)
-    let item = handle.context.get(AccordionItem)
-    let headingTag = `h${item.headingLevel}` as keyof JSX.IntrinsicElements
-    let { children, indicator, mix, type, ...buttonProps } = handle.props
-    let disabled = item.disabled || handle.props.disabled === true
-    let toggleItem = () => {
-      if (disabled || item.lockedOpen) {
-        return
-      }
-
-      accordion.toggleItem(item.value)
-    }
-
-    let button = (
-      <button
-        {...buttonProps}
-        aria-controls={item.panelId}
-        aria-disabled={item.lockedOpen ? true : undefined}
-        aria-expanded={item.open}
-        data-state={item.open ? 'open' : 'closed'}
-        disabled={disabled ? true : undefined}
-        id={item.triggerId}
-        mix={[
-          triggerStyle,
-          ref((node) => {
-            item.setTriggerNode(node as HTMLButtonElement)
-          }),
-          on('click', toggleItem),
-          on('keydown', (event) => {
-            switch (event.key) {
-              case 'ArrowDown':
-                event.preventDefault()
-                accordion.focusItem(item.value, 'next')
-                break
-              case 'ArrowUp':
-                event.preventDefault()
-                accordion.focusItem(item.value, 'previous')
-                break
-              case 'Home':
-                event.preventDefault()
-                accordion.focusItem(item.value, 'first')
-                break
-              case 'End':
-                event.preventDefault()
-                accordion.focusItem(item.value, 'last')
-                break
-            }
-          }),
-          mix,
-        ]}
-        type={type ?? 'button'}
-      >
-        <span>{children}</span>
-        {indicator === null ? null : (
-          <span
-            data-rmx-accordion-indicator=""
-            data-state={item.open ? 'open' : 'closed'}
-            mix={indicatorStyle}
-          >
-            {indicator ?? <Glyph name="chevronRight" />}
-          </span>
-        )}
-      </button>
-    )
-
-    return createElement(headingTag, {}, button)
-  }
-}
-
-export function AccordionContent(handle: Handle<AccordionContentProps>): () => RemixNode {
-  return () => {
-    let item = handle.context.get(AccordionItem)
-    let { children, mix, ...panelProps } = handle.props
-
-    return (
-      <div
-        {...panelProps}
-        aria-hidden={item.open ? undefined : true}
-        aria-labelledby={item.triggerId}
-        data-state={item.open ? 'open' : 'closed'}
-        id={item.panelId}
-        inert={item.open ? undefined : true}
-        mix={[panelStyle, mix ?? []]}
-      >
-        <div mix={accordionPanelClipCss}>
-          <div mix={bodyStyle}>{children}</div>
-        </div>
-      </div>
-    )
-  }
-}

package/src/components/accordion/demos/card.demo.tsx

@@ -1,113 +0,0 @@
-import { css } from '@remix-run/ui'
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-} from '@remix-run/ui/accordion'
-import { theme } from '@remix-run/ui/theme'
-
-/**
- * @name Accordion in a Card
- * @description The Accordion can sit inside a card when the surrounding surface needs stronger grouping.
- * @order 3
- */
-export default function Example() {
-  return () => (
-    <article mix={cardCss}>
-      <div mix={cardHeaderCss}>
-        <p mix={eyebrowCss}>Project settings</p>
-        <h3 mix={titleCss}>Deployment policies</h3>
-        <p mix={descriptionCss}>
-          The Accordion can sit inside a card when the surrounding surface needs stronger grouping.
-        </p>
-      </div>
-
-      <div mix={accordionInsetCss}>
-        <Accordion defaultValue="reviews">
-          <AccordionItem value="reviews">
-            <AccordionTrigger>Required approvals</AccordionTrigger>
-            <AccordionContent>
-              <p mix={bodyTextCss}>
-                Require one reviewer for routine changes and two reviewers for dependency, auth, or
-                billing-related changes.
-              </p>
-            </AccordionContent>
-          </AccordionItem>
-
-          <AccordionItem value="windows">
-            <AccordionTrigger>Release windows</AccordionTrigger>
-            <AccordionContent>
-              <p mix={bodyTextCss}>
-                Schedule production deploys on weekdays before 3 PM so incidents and rollback work
-                stay inside staffed hours.
-              </p>
-            </AccordionContent>
-          </AccordionItem>
-
-          <AccordionItem value="rollback">
-            <AccordionTrigger>Rollback policy</AccordionTrigger>
-            <AccordionContent>
-              <p mix={bodyTextCss}>
-                Keep a rollback target ready for every release and treat rollback preparation as
-                part of the normal change checklist.
-              </p>
-            </AccordionContent>
-          </AccordionItem>
-        </Accordion>
-      </div>
-    </article>
-  )
-}
-
-const cardCss = css({
-  display: 'flex',
-  flexDirection: 'column',
-  gap: theme.space.md,
-  padding: theme.space.lg,
-  border: `1px solid ${theme.colors.border.subtle}`,
-  borderRadius: theme.radius.lg,
-  backgroundColor: theme.surface.lvl0,
-  boxShadow: theme.shadow.xs,
-})
-
-const cardHeaderCss = css({
-  display: 'flex',
-  flexDirection: 'column',
-  gap: theme.space.sm,
-})
-
-const accordionInsetCss = css({
-  paddingInline: theme.space.lg,
-})
-
-const eyebrowCss = css({
-  margin: 0,
-  fontSize: theme.fontSize.xxxs,
-  fontWeight: theme.fontWeight.semibold,
-  letterSpacing: theme.letterSpacing.meta,
-  textTransform: 'uppercase',
-  color: theme.colors.text.muted,
-})
-
-const titleCss = css({
-  margin: 0,
-  fontSize: theme.fontSize.lg,
-  lineHeight: theme.lineHeight.tight,
-  fontWeight: theme.fontWeight.semibold,
-  color: theme.colors.text.primary,
-})
-
-const descriptionCss = css({
-  margin: 0,
-  fontSize: theme.fontSize.sm,
-  lineHeight: theme.lineHeight.relaxed,
-  color: theme.colors.text.secondary,
-})
-
-const bodyTextCss = css({
-  margin: 0,
-  fontSize: theme.fontSize.sm,
-  lineHeight: theme.lineHeight.relaxed,
-  color: theme.colors.text.secondary,
-})