@glyphui/ui 0.1.1 → 0.3.0

package/src/components/combobox/combobox.tsx

@@ -0,0 +1,203 @@
+import { Command as Cmdk } from 'cmdk'
+import { Popover } from 'radix-ui'
+import { type ReactNode, useMemo, useState } from 'react'
+import { useComponentConfig } from '../../hooks/use-component-config'
+import { useControllableState } from '../../hooks/use-controllable-state'
+import { CheckIcon, ChevronsUpDownIcon, SearchIcon } from '../../internal/icons'
+import { useFieldControl } from '../field/field-context'
+import { comboboxStyles } from './combobox.styles'
+
+export interface ComboboxOption<T extends string = string> {
+  value: T
+  /** Shown in the list and trigger, and matched by search. */
+  label: string
+  description?: ReactNode
+  /** Extra search terms, e.g. abbreviations. */
+  keywords?: readonly string[]
+  disabled?: boolean
+}
+
+interface SingleProps<T extends string> {
+  multiple?: false
+  value?: T | null
+  defaultValue?: T | null
+  onValueChange?: (value: T | null) => void
+}
+
+interface MultipleProps<T extends string> {
+  multiple: true
+  value?: readonly T[]
+  defaultValue?: readonly T[]
+  onValueChange?: (value: T[]) => void
+}
+
+interface SharedProps<T extends string> {
+  options: readonly ComboboxOption<T>[]
+  placeholder?: ReactNode
+  searchPlaceholder?: string
+  /** Shown when the search matches nothing. */
+  emptyText?: ReactNode
+  /** Chips shown in the trigger before collapsing to "+N". Multiple mode only. Default 3. */
+  maxChips?: number
+  size?: 'sm' | 'md' | 'lg'
+  disabled?: boolean
+  required?: boolean
+  /** Submits the value with a native form (comma-free: one hidden input per value). */
+  name?: string
+  id?: string
+  className?: string
+  contentClassName?: string
+  'aria-label'?: string
+  'aria-describedby'?: string
+  'aria-invalid'?: boolean
+}
+
+export type ComboboxProps<T extends string = string> = SharedProps<T> &
+  (SingleProps<T> | MultipleProps<T>)
+
+function toArray<T>(value: T | readonly T[] | null | undefined): T[] | undefined {
+  if (value === undefined) return undefined
+  if (value === null) return []
+  return Array.isArray(value) ? [...(value as readonly T[])] : [value as T]
+}
+
+/**
+ * A select with search, for long option lists. `multiple` allows several values, shown
+ * as chips. The value type is inferred from `options`.
+ */
+export function Combobox<T extends string>(inProps: ComboboxProps<T>) {
+  const [props, slots] = useComponentConfig('Combobox', useFieldControl(inProps))
+  const {
+    options,
+    multiple = false,
+    placeholder = 'Select…',
+    searchPlaceholder = 'Search…',
+    emptyText = 'No results',
+    maxChips = 3,
+    size,
+    disabled,
+    required,
+    name,
+    id,
+    className,
+    contentClassName,
+    'aria-label': ariaLabel,
+    'aria-describedby': ariaDescribedBy,
+    'aria-invalid': ariaInvalid,
+  } = props
+  const onValueChange = props.onValueChange as ((value: T | T[] | null) => void) | undefined
+
+  const [open, setOpen] = useState(false)
+  const [selected, setSelected] = useControllableState<T[]>({
+    value: toArray<T>(props.value),
+    defaultValue: toArray<T>(props.defaultValue) ?? [],
+    onChange: (next) => onValueChange?.(multiple ? next : (next[0] ?? null)),
+  })
+  const byValue = useMemo(() => new Map(options.map((o) => [o.value, o])), [options])
+  const s = comboboxStyles({ size, multiple })
+
+  const choose = (value: T) => {
+    if (multiple) {
+      setSelected(
+        selected.includes(value) ? selected.filter((v) => v !== value) : [...selected, value],
+      )
+      return
+    }
+    setSelected(selected[0] === value ? [] : [value])
+    setOpen(false)
+  }
+
+  const labels = selected.map((v) => byValue.get(v)?.label ?? v)
+  let display: ReactNode
+  if (labels.length === 0) {
+    display = <span className={s.placeholder({ class: slots.placeholder })}>{placeholder}</span>
+  } else if (multiple) {
+    const shown = labels.slice(0, maxChips)
+    display = (
+      <>
+        {shown.map((label, i) => (
+          <span key={selected[i]} className={s.chip({ class: slots.chip })}>
+            {label}
+          </span>
+        ))}
+        {labels.length > shown.length && (
+          <span className={s.chip({ class: slots.chip })}>+{labels.length - shown.length}</span>
+        )}
+      </>
+    )
+  } else {
+    display = <span className="truncate">{labels[0]}</span>
+  }
+
+  return (
+    <Popover.Root open={open} onOpenChange={setOpen}>
+      <Popover.Trigger asChild>
+        <button
+          type="button"
+          id={id}
+          role="combobox"
+          aria-haspopup="listbox"
+          aria-expanded={open}
+          aria-label={ariaLabel}
+          aria-describedby={ariaDescribedBy}
+          aria-invalid={ariaInvalid}
+          aria-required={required}
+          disabled={disabled}
+          data-slot="combobox-trigger"
+          className={s.trigger({ class: [slots.trigger, className] })}
+        >
+          <span className={s.value({ class: slots.value })}>{display}</span>
+          <ChevronsUpDownIcon className={s.icon({ class: slots.icon })} />
+        </button>
+      </Popover.Trigger>
+      {name &&
+        selected.map((value) => <input key={value} type="hidden" name={name} value={value} />)}
+      <Popover.Portal>
+        <Popover.Content
+          align="start"
+          sideOffset={4}
+          data-slot="combobox-content"
+          className={s.content({ class: [slots.content, contentClassName] })}
+        >
+          <Cmdk loop label={ariaLabel ?? 'Options'}>
+            <div className={s.search({ class: slots.search })}>
+              <SearchIcon />
+              <Cmdk.Input
+                placeholder={searchPlaceholder}
+                className={s.input({ class: slots.input })}
+              />
+            </div>
+            <Cmdk.List className={s.list({ class: slots.list })}>
+              <Cmdk.Empty className={s.empty({ class: slots.empty })}>{emptyText}</Cmdk.Empty>
+              {options.map((option) => {
+                const checked = selected.includes(option.value)
+                return (
+                  <Cmdk.Item
+                    key={option.value}
+                    value={option.value}
+                    keywords={[option.label, ...(option.keywords ?? [])]}
+                    disabled={option.disabled}
+                    onSelect={() => choose(option.value)}
+                    data-checked={checked || undefined}
+                    aria-checked={checked}
+                    className={s.item({ class: slots.item })}
+                  >
+                    <span className={s.itemText({ class: slots.itemText })}>
+                      <span className="truncate">{option.label}</span>
+                      {option.description && (
+                        <span className={s.itemDescription({ class: slots.itemDescription })}>
+                          {option.description}
+                        </span>
+                      )}
+                    </span>
+                    {checked && <CheckIcon className={s.check({ class: slots.check })} />}
+                  </Cmdk.Item>
+                )
+              })}
+            </Cmdk.List>
+          </Cmdk>
+        </Popover.Content>
+      </Popover.Portal>
+    </Popover.Root>
+  )
+}

package/src/components/combobox/index.ts

@@ -0,0 +1,2 @@
+export { Combobox, type ComboboxOption, type ComboboxProps } from './combobox'
+export { type ComboboxVariants, comboboxStyles } from './combobox.styles'

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

@@ -0,0 +1,41 @@
+import type { StylesEntry } from '../../utils/registry'
+import { themedBorder } from '../../utils/styles'
+import { tv } from '../../utils/tv'
+
+export const commandMenuStyles = tv({
+  slots: {
+    overlay: 'fixed inset-0 z-50 animate-fade-in bg-overlay',
+    content: [
+      'fixed top-[12vh] left-1/2 z-50 w-[calc(100%-2rem)] max-w-xl -translate-x-1/2 overflow-hidden rounded-xl border-border bg-raised text-foreground shadow-lg outline-none animate-pop-in',
+      themedBorder,
+    ],
+    root: 'flex w-full flex-col overflow-hidden bg-raised text-foreground',
+    search:
+      'flex items-center gap-2.5 border-b border-border px-4 text-faint-foreground [&>svg]:size-4 [&>svg]:shrink-0',
+    input:
+      'h-12 w-full min-w-0 bg-transparent text-body text-foreground outline-none placeholder:text-faint-foreground',
+    list: 'max-h-[min(24rem,60vh)] overflow-y-auto overscroll-contain p-2',
+    empty: 'py-10 text-center text-small text-muted-foreground',
+    group: [
+      'overflow-hidden',
+      '[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:pt-2 [&_[cmdk-group-heading]]:pb-1',
+      '[&_[cmdk-group-heading]]:font-mono [&_[cmdk-group-heading]]:text-caption [&_[cmdk-group-heading]]:uppercase',
+      '[&_[cmdk-group-heading]]:tracking-[0.1em] [&_[cmdk-group-heading]]:text-faint-foreground',
+    ],
+    item: [
+      'relative flex h-10 cursor-pointer select-none items-center gap-3 rounded-md px-2.5 text-small text-foreground outline-none',
+      'data-[selected=true]:bg-muted data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50',
+    ],
+    itemIcon:
+      'flex size-4 shrink-0 items-center justify-center text-muted-foreground [&>svg]:size-4',
+    itemLabel: 'min-w-0 flex-1 truncate',
+    shortcut: 'ml-auto flex shrink-0 items-center gap-1',
+    separator: '-mx-2 my-1.5 h-px bg-border',
+  },
+})
+
+declare module '@glyphui/tokens' {
+  interface GlyphComponentRegistry {
+    CommandMenu: StylesEntry<typeof commandMenuStyles>
+  }
+}

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

@@ -0,0 +1,217 @@
+import { Command as Cmdk } from 'cmdk'
+import { Dialog } from 'radix-ui'
+import {
+  type ComponentProps,
+  createContext,
+  type Dispatch,
+  type ReactNode,
+  type SetStateAction,
+  useContext,
+  useEffect,
+} from 'react'
+import { useComponentConfig } from '../../hooks/use-component-config'
+import { useControllableState } from '../../hooks/use-controllable-state'
+import { SearchIcon } from '../../internal/icons'
+import { Kbd } from '../kbd'
+import { commandMenuStyles } from './command-menu.styles'
+
+const s = commandMenuStyles()
+
+const CommandMenuContext = createContext<{ close: () => void } | null>(null)
+
+function useSlots() {
+  return useComponentConfig('CommandMenu', {})[1]
+}
+
+export interface CommandMenuProps {
+  open?: boolean
+  defaultOpen?: boolean
+  onOpenChange?: (open: boolean) => void
+  /** Accessible name of the dialog and list. */
+  label?: string
+  /** Wrap around from the last item to the first with arrow keys. Default true. */
+  loop?: boolean
+  /** Replace cmdk's fuzzy ranking. Return 0 to hide an item, higher numbers to rank it first. */
+  filter?: (value: string, search: string, keywords?: string[]) => number
+  className?: string
+  children: ReactNode
+}
+
+/**
+ * A ⌘K command palette in a modal dialog: search, grouped actions, keyboard navigation.
+ * Pair with `useCommandMenuShortcut(setOpen)` to open it from the keyboard.
+ */
+export function CommandMenu(inProps: CommandMenuProps) {
+  const [props, slots] = useComponentConfig('CommandMenu', inProps)
+  const {
+    open: openProp,
+    defaultOpen = false,
+    onOpenChange,
+    label = 'Command menu',
+    loop = true,
+    filter,
+    className,
+    children,
+  } = props
+  const [open, setOpen] = useControllableState({
+    value: openProp,
+    defaultValue: defaultOpen,
+    onChange: onOpenChange,
+  })
+
+  return (
+    <Dialog.Root open={open} onOpenChange={setOpen}>
+      <Dialog.Portal>
+        <Dialog.Overlay className={s.overlay({ class: slots.overlay })} />
+        <Dialog.Content
+          data-slot="command-menu"
+          aria-describedby={undefined}
+          className={s.content({ class: [slots.content, className] })}
+        >
+          <Dialog.Title className="sr-only">{label}</Dialog.Title>
+          <CommandMenuContext.Provider value={{ close: () => setOpen(false) }}>
+            <Command label={label} loop={loop} {...(filter && { filter })}>
+              {children}
+            </Command>
+          </CommandMenuContext.Provider>
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog.Root>
+  )
+}
+
+/** The palette without a dialog, for inline search panels. */
+export function Command({ className, ...props }: ComponentProps<typeof Cmdk>) {
+  const slots = useSlots()
+  return (
+    <Cmdk data-slot="command" className={s.root({ class: [slots.root, className] })} {...props} />
+  )
+}
+
+export function CommandInput({ className, ...props }: ComponentProps<typeof Cmdk.Input>) {
+  const slots = useSlots()
+  return (
+    <div className={s.search({ class: slots.search })}>
+      <SearchIcon />
+      <Cmdk.Input
+        data-slot="command-input"
+        className={s.input({ class: [slots.input, className] })}
+        {...props}
+      />
+    </div>
+  )
+}
+
+export function CommandList({ className, ...props }: ComponentProps<typeof Cmdk.List>) {
+  const slots = useSlots()
+  return (
+    <Cmdk.List
+      data-slot="command-list"
+      className={s.list({ class: [slots.list, className] })}
+      {...props}
+    />
+  )
+}
+
+export function CommandEmpty({
+  className,
+  children = 'No results',
+  ...props
+}: ComponentProps<typeof Cmdk.Empty>) {
+  const slots = useSlots()
+  return (
+    <Cmdk.Empty
+      data-slot="command-empty"
+      className={s.empty({ class: [slots.empty, className] })}
+      {...props}
+    >
+      {children}
+    </Cmdk.Empty>
+  )
+}
+
+export function CommandGroup({ className, ...props }: ComponentProps<typeof Cmdk.Group>) {
+  const slots = useSlots()
+  return (
+    <Cmdk.Group
+      data-slot="command-group"
+      className={s.group({ class: [slots.group, className] })}
+      {...props}
+    />
+  )
+}
+
+export interface CommandItemProps extends ComponentProps<typeof Cmdk.Item> {
+  icon?: ReactNode
+  /** Keyboard hint shown at the end, e.g. `"⌘N"` or `["⌘", "N"]`. Display only. */
+  shortcut?: string | readonly string[]
+  /** Close the surrounding CommandMenu after selecting. Default true. */
+  closeOnSelect?: boolean
+}
+
+export function CommandItem({
+  icon,
+  shortcut,
+  closeOnSelect = true,
+  onSelect,
+  className,
+  children,
+  ...props
+}: CommandItemProps) {
+  const slots = useSlots()
+  const menu = useContext(CommandMenuContext)
+  const keys = shortcut === undefined ? [] : typeof shortcut === 'string' ? [shortcut] : shortcut
+  return (
+    <Cmdk.Item
+      data-slot="command-item"
+      onSelect={(value) => {
+        onSelect?.(value)
+        if (closeOnSelect) menu?.close()
+      }}
+      className={s.item({ class: [slots.item, className] })}
+      {...props}
+    >
+      {icon && (
+        <span className={s.itemIcon({ class: slots.itemIcon })} aria-hidden="true">
+          {icon}
+        </span>
+      )}
+      <span className={s.itemLabel({ class: slots.itemLabel })}>{children}</span>
+      {keys.length > 0 && (
+        <span className={s.shortcut({ class: slots.shortcut })} aria-hidden="true">
+          {keys.map((key) => (
+            <Kbd key={key}>{key}</Kbd>
+          ))}
+        </span>
+      )}
+    </Cmdk.Item>
+  )
+}
+
+export function CommandSeparator({ className, ...props }: ComponentProps<typeof Cmdk.Separator>) {
+  const slots = useSlots()
+  return (
+    <Cmdk.Separator
+      data-slot="command-separator"
+      className={s.separator({ class: [slots.separator, className] })}
+      {...props}
+    />
+  )
+}
+
+/** Toggles a command menu with ⌘K (macOS) or Ctrl+K. Pass another key to change it. */
+export function useCommandMenuShortcut(
+  setOpen: Dispatch<SetStateAction<boolean>>,
+  key = 'k',
+): void {
+  useEffect(() => {
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key.toLowerCase() === key.toLowerCase() && (event.metaKey || event.ctrlKey)) {
+        event.preventDefault()
+        setOpen((open) => !open)
+      }
+    }
+    document.addEventListener('keydown', onKeyDown)
+    return () => document.removeEventListener('keydown', onKeyDown)
+  }, [setOpen, key])
+}

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

@@ -0,0 +1,14 @@
+export {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  type CommandItemProps,
+  CommandList,
+  CommandMenu,
+  type CommandMenuProps,
+  CommandSeparator,
+  useCommandMenuShortcut,
+} from './command-menu'
+export { commandMenuStyles } from './command-menu.styles'

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>
+  }
+}