@glyphui/ui 0.2.0 → 0.4.0

package/src/components/carousel/carousel.tsx

@@ -0,0 +1,278 @@
+import useEmblaCarousel, { type UseEmblaCarouselType } from 'embla-carousel-react'
+import {
+  Children,
+  type ComponentProps,
+  createContext,
+  type KeyboardEvent,
+  type ReactNode,
+  useCallback,
+  useContext,
+  useEffect,
+  useState,
+} from 'react'
+import { type SlotClasses, useComponentConfig } from '../../hooks/use-component-config'
+import { cn } from '../../utils/cn'
+import { IconButton, type IconButtonProps } from '../button'
+import { type CarouselVariants, carouselStyles } from './carousel.styles'
+
+export type CarouselApi = UseEmblaCarouselType[1]
+type EmblaArgs = Parameters<typeof useEmblaCarousel>
+export type CarouselOptions = EmblaArgs[0]
+export type CarouselPlugin = NonNullable<EmblaArgs[1]>[number]
+
+type Orientation = NonNullable<CarouselVariants['orientation']>
+
+interface CarouselContextValue {
+  viewportRef: UseEmblaCarouselType[0]
+  api: CarouselApi
+  orientation: Orientation
+  selectedIndex: number
+  snapCount: number
+  canScrollPrev: boolean
+  canScrollNext: boolean
+  scrollPrev: () => void
+  scrollNext: () => void
+  scrollTo: (index: number) => void
+  s: ReturnType<typeof carouselStyles>
+  slots: SlotClasses<'Carousel'>
+}
+
+const CarouselContext = createContext<CarouselContextValue | null>(null)
+
+function useCarousel(): CarouselContextValue {
+  const value = useContext(CarouselContext)
+  if (!value) throw new Error('Carousel parts must be used inside <Carousel>.')
+  return value
+}
+
+export interface CarouselProps
+  extends Omit<ComponentProps<'section'>, 'aria-label'>,
+    CarouselVariants {
+  /** Embla options, e.g. `{ align: 'start', loop: true }`. */
+  opts?: CarouselOptions
+  plugins?: CarouselPlugin[]
+  /** Shortcut for `opts.loop`. */
+  loop?: boolean
+  /** Receives the Embla API for custom controls. */
+  setApi?: (api: CarouselApi) => void
+  /** Required: describes the content, e.g. "Customer stories". */
+  'aria-label': string
+}
+
+/**
+ * Swipeable, keyboard-accessible slides. Compose with CarouselContent, CarouselItem,
+ * CarouselPrevious, CarouselNext and CarouselDots.
+ */
+export function Carousel(inProps: CarouselProps) {
+  const [props, slots] = useComponentConfig('Carousel', inProps)
+  const {
+    opts,
+    plugins,
+    loop,
+    setApi,
+    orientation = 'horizontal',
+    className,
+    children,
+    ...rest
+  } = props
+  const [viewportRef, api] = useEmblaCarousel(
+    {
+      ...opts,
+      ...(loop !== undefined && { loop }),
+      axis: orientation === 'horizontal' ? 'x' : 'y',
+    },
+    plugins,
+  )
+  const [state, setState] = useState({
+    selectedIndex: 0,
+    snapCount: 0,
+    canScrollPrev: false,
+    canScrollNext: false,
+  })
+
+  const sync = useCallback((embla: NonNullable<CarouselApi>) => {
+    setState({
+      selectedIndex: embla.selectedScrollSnap(),
+      snapCount: embla.scrollSnapList().length,
+      canScrollPrev: embla.canScrollPrev(),
+      canScrollNext: embla.canScrollNext(),
+    })
+  }, [])
+
+  useEffect(() => {
+    if (!api) return
+    setApi?.(api)
+    sync(api)
+    api.on('select', sync).on('reInit', sync)
+    return () => {
+      api.off('select', sync).off('reInit', sync)
+    }
+  }, [api, setApi, sync])
+
+  const scrollPrev = useCallback(() => api?.scrollPrev(), [api])
+  const scrollNext = useCallback(() => api?.scrollNext(), [api])
+  const scrollTo = useCallback((index: number) => api?.scrollTo(index), [api])
+
+  const onKeyDownCapture = (event: KeyboardEvent<HTMLElement>) => {
+    const prevKey = orientation === 'horizontal' ? 'ArrowLeft' : 'ArrowUp'
+    const nextKey = orientation === 'horizontal' ? 'ArrowRight' : 'ArrowDown'
+    if (event.key === prevKey) {
+      event.preventDefault()
+      scrollPrev()
+    } else if (event.key === nextKey) {
+      event.preventDefault()
+      scrollNext()
+    }
+  }
+
+  const s = carouselStyles({ orientation })
+  return (
+    <CarouselContext.Provider
+      value={{
+        viewportRef,
+        api,
+        orientation,
+        ...state,
+        scrollPrev,
+        scrollNext,
+        scrollTo,
+        s,
+        slots,
+      }}
+    >
+      {/* biome-ignore lint/a11y/useAriaPropsSupportedByRole: a labelled section is a region, which supports aria-roledescription */}
+      <section
+        data-slot="carousel"
+        aria-roledescription="carousel"
+        onKeyDownCapture={onKeyDownCapture}
+        className={s.root({ class: [slots.root, className] })}
+        {...rest}
+      >
+        {children}
+      </section>
+    </CarouselContext.Provider>
+  )
+}
+
+const SlideContext = createContext<{ index: number; total: number } | null>(null)
+
+export function CarouselContent({ className, children, ...props }: ComponentProps<'div'>) {
+  const { viewportRef, s, slots } = useCarousel()
+  const items = Children.toArray(children)
+  return (
+    <div
+      ref={viewportRef}
+      data-slot="carousel-viewport"
+      className={s.viewport({ class: slots.viewport })}
+    >
+      <div
+        data-slot="carousel-content"
+        className={s.container({ class: [slots.container, className] })}
+        {...props}
+      >
+        {items.map((child, index) => (
+          <SlideContext.Provider key={index} value={{ index, total: items.length }}>
+            {child}
+          </SlideContext.Provider>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+export function CarouselItem({ className, ...props }: ComponentProps<'div'>) {
+  const { s, slots } = useCarousel()
+  const slide = useContext(SlideContext)
+  return (
+    // biome-ignore lint/a11y/useSemanticElements: role="group" + aria-roledescription is the WAI-ARIA carousel slide pattern
+    <div
+      role="group"
+      aria-roledescription="slide"
+      aria-label={slide ? `${slide.index + 1} of ${slide.total}` : undefined}
+      data-slot="carousel-item"
+      className={s.item({ class: [slots.item, className] })}
+      {...props}
+    />
+  )
+}
+
+function Chevron({ direction }: { direction: 'left' | 'right' }) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <path d={direction === 'left' ? 'm15 18-6-6 6-6' : 'm9 18 6-6-6-6'} />
+    </svg>
+  )
+}
+
+type ControlProps = Omit<IconButtonProps, 'icon' | 'aria-label'> & {
+  'aria-label'?: string
+  icon?: ReactNode
+}
+
+export function CarouselPrevious({ className, icon, ...props }: ControlProps) {
+  const { scrollPrev, canScrollPrev, orientation, s, slots } = useCarousel()
+  return (
+    <IconButton
+      variant="outline"
+      size="sm"
+      aria-label="Previous slide"
+      icon={icon ?? <Chevron direction="left" />}
+      disabled={!canScrollPrev}
+      onClick={scrollPrev}
+      className={s.control({
+        class: [slots.control, orientation === 'horizontal' ? 'left-3' : 'top-3', className],
+      })}
+      {...props}
+    />
+  )
+}
+
+export function CarouselNext({ className, icon, ...props }: ControlProps) {
+  const { scrollNext, canScrollNext, orientation, s, slots } = useCarousel()
+  return (
+    <IconButton
+      variant="outline"
+      size="sm"
+      aria-label="Next slide"
+      icon={icon ?? <Chevron direction="right" />}
+      disabled={!canScrollNext}
+      onClick={scrollNext}
+      className={s.control({
+        class: [slots.control, orientation === 'horizontal' ? 'right-3' : 'bottom-3', className],
+      })}
+      {...props}
+    />
+  )
+}
+
+/** One button per snap point; the current one is highlighted. */
+export function CarouselDots({ className, ...props }: ComponentProps<'div'>) {
+  const { snapCount, selectedIndex, scrollTo, s, slots } = useCarousel()
+  if (snapCount < 2) return null
+  return (
+    <div
+      data-slot="carousel-dots"
+      className={s.dots({ class: [slots.dots, className] })}
+      {...props}
+    >
+      {Array.from({ length: snapCount }, (_, index) => (
+        <button
+          key={index}
+          type="button"
+          aria-label={`Go to slide ${index + 1}`}
+          aria-current={index === selectedIndex}
+          onClick={() => scrollTo(index)}
+          className={cn(s.dot({ class: slots.dot }))}
+        />
+      ))}
+    </div>
+  )
+}

package/src/components/carousel/index.ts

@@ -0,0 +1,13 @@
+export {
+  Carousel,
+  type CarouselApi,
+  CarouselContent,
+  CarouselDots,
+  CarouselItem,
+  CarouselNext,
+  type CarouselOptions,
+  type CarouselPlugin,
+  CarouselPrevious,
+  type CarouselProps,
+} from './carousel'
+export { type CarouselVariants, carouselStyles } from './carousel.styles'

package/src/components/collapsible/collapsible.tsx

@@ -0,0 +1,66 @@
+import { Collapsible as CollapsiblePrimitive } from 'radix-ui'
+import type { ComponentProps } from 'react'
+import { useComponentConfig } from '../../hooks/use-component-config'
+import type { StylesEntry } from '../../utils/registry'
+import { tv } from '../../utils/tv'
+
+export const collapsibleStyles = tv({
+  slots: {
+    root: '',
+    trigger: '',
+    content:
+      'overflow-hidden data-[state=closed]:animate-collapse-up data-[state=open]:animate-collapse-down',
+  },
+})
+
+declare module '@glyphui/tokens' {
+  interface GlyphComponentRegistry {
+    Collapsible: StylesEntry<typeof collapsibleStyles>
+  }
+}
+
+const s = collapsibleStyles()
+
+/**
+ * Shows and hides one region, e.g. "Show advanced options". For a list of expandable
+ * sections use Accordion.
+ */
+export function Collapsible(inProps: ComponentProps<typeof CollapsiblePrimitive.Root>) {
+  const [{ className, ...rest }, slots] = useComponentConfig('Collapsible', inProps)
+  return (
+    <CollapsiblePrimitive.Root
+      data-slot="collapsible"
+      className={s.root({ class: [slots.root, className] })}
+      {...rest}
+    />
+  )
+}
+
+export function CollapsibleTrigger({
+  className,
+  ...props
+}: ComponentProps<typeof CollapsiblePrimitive.Trigger>) {
+  const [, slots] = useComponentConfig('Collapsible', {})
+  return (
+    <CollapsiblePrimitive.Trigger
+      data-slot="collapsible-trigger"
+      className={s.trigger({ class: [slots.trigger, className] })}
+      {...props}
+    />
+  )
+}
+
+/** Animates its height open and closed; stays mounted until the closing animation ends. */
+export function CollapsibleContent({
+  className,
+  ...props
+}: ComponentProps<typeof CollapsiblePrimitive.Content>) {
+  const [, slots] = useComponentConfig('Collapsible', {})
+  return (
+    <CollapsiblePrimitive.Content
+      data-slot="collapsible-content"
+      className={s.content({ class: [slots.content, className] })}
+      {...props}
+    />
+  )
+}

package/src/components/collapsible/index.ts

@@ -0,0 +1,6 @@
+export {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+  collapsibleStyles,
+} from './collapsible'

package/src/components/context-menu/context-menu.styles.ts

@@ -0,0 +1,19 @@
+import type { StylesEntry } from '../../utils/registry'
+import { tv, type VariantProps } from '../../utils/tv'
+import { dropdownMenuStyles } from '../dropdown-menu/dropdown-menu.styles'
+
+/** Same look as DropdownMenu; only the available-height variable differs. */
+export const contextMenuStyles = tv({
+  extend: dropdownMenuStyles,
+  slots: {
+    content: 'max-h-(--radix-context-menu-content-available-height)',
+  },
+})
+
+export type ContextMenuVariants = VariantProps<typeof contextMenuStyles>
+
+declare module '@glyphui/tokens' {
+  interface GlyphComponentRegistry {
+    ContextMenu: StylesEntry<typeof contextMenuStyles>
+  }
+}

package/src/components/context-menu/context-menu.tsx

@@ -0,0 +1,226 @@
+import { ContextMenu as MenuPrimitive } from 'radix-ui'
+import type { ComponentProps, ReactNode, SVGProps } from 'react'
+import { useComponentConfig } from '../../hooks/use-component-config'
+import { contextMenuStyles } from './context-menu.styles'
+
+function useParts(tone?: 'default' | 'danger', inset?: boolean) {
+  const [, slots] = useComponentConfig('ContextMenu', {})
+  return { s: contextMenuStyles({ tone, inset }), slots }
+}
+
+const svg = {
+  xmlns: 'http://www.w3.org/2000/svg',
+  viewBox: '0 0 24 24',
+  fill: 'none',
+  stroke: 'currentColor',
+  strokeWidth: 2,
+  strokeLinecap: 'round',
+  strokeLinejoin: 'round',
+} as const satisfies SVGProps<SVGSVGElement>
+
+const CheckIcon = () => (
+  <svg aria-hidden="true" {...svg}>
+    <path d="M20 6 9 17l-5-5" />
+  </svg>
+)
+const DotIcon = () => (
+  <svg aria-hidden="true" {...svg}>
+    <circle cx="12" cy="12" r="4" fill="currentColor" />
+  </svg>
+)
+const ChevronRightIcon = () => (
+  <svg aria-hidden="true" {...svg}>
+    <path d="m9 18 6-6-6-6" />
+  </svg>
+)
+
+/** A menu opened by right-click or long-press on an area. Same items as DropdownMenu. */
+export const ContextMenu = MenuPrimitive.Root
+export const ContextMenuTrigger = MenuPrimitive.Trigger
+export const ContextMenuGroup = MenuPrimitive.Group
+export const ContextMenuRadioGroup = MenuPrimitive.RadioGroup
+export const ContextMenuSub = MenuPrimitive.Sub
+
+export function ContextMenuContent(inProps: ComponentProps<typeof MenuPrimitive.Content>) {
+  const [props, slots] = useComponentConfig('ContextMenu', inProps)
+  const { className, ...rest } = props
+  const s = contextMenuStyles()
+  return (
+    <MenuPrimitive.Portal>
+      <MenuPrimitive.Content
+        data-slot="context-menu-content"
+        className={s.content({ class: [slots.content, className] })}
+        {...rest}
+      />
+    </MenuPrimitive.Portal>
+  )
+}
+
+export interface ContextMenuItemProps extends ComponentProps<typeof MenuPrimitive.Item> {
+  icon?: ReactNode
+  /** Keyboard hint shown at the end, e.g. "⌘C". Display only. */
+  shortcut?: ReactNode
+  /** `danger` for destructive actions. */
+  tone?: 'default' | 'danger'
+  /** Indent to line up with checkbox and radio items. */
+  inset?: boolean
+}
+
+export function ContextMenuItem({
+  icon,
+  shortcut,
+  tone,
+  inset,
+  className,
+  children,
+  ...props
+}: ContextMenuItemProps) {
+  const { s, slots } = useParts(tone, inset)
+  return (
+    <MenuPrimitive.Item
+      data-slot="context-menu-item"
+      data-tone={tone ?? 'default'}
+      className={s.item({ class: [slots.item, className] })}
+      {...props}
+    >
+      {icon && (
+        <span className={s.icon({ class: slots.icon })} aria-hidden="true">
+          {icon}
+        </span>
+      )}
+      {children}
+      {shortcut && <ContextMenuShortcut>{shortcut}</ContextMenuShortcut>}
+    </MenuPrimitive.Item>
+  )
+}
+
+export function ContextMenuCheckboxItem({
+  className,
+  children,
+  ...props
+}: ComponentProps<typeof MenuPrimitive.CheckboxItem>) {
+  const { s, slots } = useParts(undefined, true)
+  return (
+    <MenuPrimitive.CheckboxItem
+      data-slot="context-menu-checkbox-item"
+      className={s.item({ class: [slots.item, className] })}
+      {...props}
+    >
+      <span className={s.indicator({ class: slots.indicator })}>
+        <MenuPrimitive.ItemIndicator>
+          <CheckIcon />
+        </MenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </MenuPrimitive.CheckboxItem>
+  )
+}
+
+export function ContextMenuRadioItem({
+  className,
+  children,
+  ...props
+}: ComponentProps<typeof MenuPrimitive.RadioItem>) {
+  const { s, slots } = useParts(undefined, true)
+  return (
+    <MenuPrimitive.RadioItem
+      data-slot="context-menu-radio-item"
+      className={s.item({ class: [slots.item, className] })}
+      {...props}
+    >
+      <span className={s.indicator({ class: slots.indicator })}>
+        <MenuPrimitive.ItemIndicator>
+          <DotIcon />
+        </MenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </MenuPrimitive.RadioItem>
+  )
+}
+
+export function ContextMenuLabel({
+  inset,
+  className,
+  ...props
+}: ComponentProps<typeof MenuPrimitive.Label> & { inset?: boolean }) {
+  const { s, slots } = useParts(undefined, inset)
+  return (
+    <MenuPrimitive.Label
+      data-slot="context-menu-label"
+      className={s.label({ class: [slots.label, className] })}
+      {...props}
+    />
+  )
+}
+
+export function ContextMenuSeparator({
+  className,
+  ...props
+}: ComponentProps<typeof MenuPrimitive.Separator>) {
+  const { s, slots } = useParts()
+  return (
+    <MenuPrimitive.Separator
+      data-slot="context-menu-separator"
+      className={s.separator({ class: [slots.separator, className] })}
+      {...props}
+    />
+  )
+}
+
+export function ContextMenuShortcut({ className, ...props }: ComponentProps<'span'>) {
+  const { s, slots } = useParts()
+  return (
+    <span
+      data-slot="context-menu-shortcut"
+      className={s.shortcut({ class: [slots.shortcut, className] })}
+      {...props}
+    />
+  )
+}
+
+export interface ContextMenuSubTriggerProps
+  extends ComponentProps<typeof MenuPrimitive.SubTrigger> {
+  icon?: ReactNode
+}
+
+export function ContextMenuSubTrigger({
+  icon,
+  className,
+  children,
+  ...props
+}: ContextMenuSubTriggerProps) {
+  const { s, slots } = useParts()
+  return (
+    <MenuPrimitive.SubTrigger
+      data-slot="context-menu-sub-trigger"
+      className={s.subTrigger({ class: [slots.subTrigger, className] })}
+      {...props}
+    >
+      {icon && (
+        <span className={s.icon({ class: slots.icon })} aria-hidden="true">
+          {icon}
+        </span>
+      )}
+      {children}
+      <span className="ml-auto flex text-faint-foreground">
+        <ChevronRightIcon />
+      </span>
+    </MenuPrimitive.SubTrigger>
+  )
+}
+
+export function ContextMenuSubContent({
+  className,
+  ...props
+}: ComponentProps<typeof MenuPrimitive.SubContent>) {
+  const { s, slots } = useParts()
+  return (
+    <MenuPrimitive.Portal>
+      <MenuPrimitive.SubContent
+        data-slot="context-menu-sub-content"
+        className={s.subContent({ class: [slots.subContent, className] })}
+        {...props}
+      />
+    </MenuPrimitive.Portal>
+  )
+}

package/src/components/context-menu/index.ts

@@ -0,0 +1,19 @@
+export {
+  ContextMenu,
+  ContextMenuCheckboxItem,
+  ContextMenuContent,
+  ContextMenuGroup,
+  ContextMenuItem,
+  type ContextMenuItemProps,
+  ContextMenuLabel,
+  ContextMenuRadioGroup,
+  ContextMenuRadioItem,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  type ContextMenuSubTriggerProps,
+  ContextMenuTrigger,
+} from './context-menu'
+export { type ContextMenuVariants, contextMenuStyles } from './context-menu.styles'