@glyphui/ui 0.1.1 → 0.3.0

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

@@ -0,0 +1,230 @@
+import { DropdownMenu as MenuPrimitive } from 'radix-ui'
+import type { ComponentProps, ReactNode, SVGProps } from 'react'
+import { useComponentConfig } from '../../hooks/use-component-config'
+import { dropdownMenuStyles } from './dropdown-menu.styles'
+
+function useParts(tone?: 'default' | 'danger', inset?: boolean) {
+  const [, slots] = useComponentConfig('DropdownMenu', {})
+  return { s: dropdownMenuStyles({ 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 of actions opened from a button: row actions, account menus, "more" buttons. */
+export const DropdownMenu = MenuPrimitive.Root
+export const DropdownMenuTrigger = MenuPrimitive.Trigger
+export const DropdownMenuGroup = MenuPrimitive.Group
+export const DropdownMenuRadioGroup = MenuPrimitive.RadioGroup
+export const DropdownMenuSub = MenuPrimitive.Sub
+
+export function DropdownMenuContent(inProps: ComponentProps<typeof MenuPrimitive.Content>) {
+  const [props, slots] = useComponentConfig('DropdownMenu', inProps)
+  const { sideOffset = 6, align = 'start', className, ...rest } = props
+  const s = dropdownMenuStyles()
+  return (
+    <MenuPrimitive.Portal>
+      <MenuPrimitive.Content
+        data-slot="dropdown-menu-content"
+        sideOffset={sideOffset}
+        align={align}
+        className={s.content({ class: [slots.content, className] })}
+        {...rest}
+      />
+    </MenuPrimitive.Portal>
+  )
+}
+
+export interface DropdownMenuItemProps extends ComponentProps<typeof MenuPrimitive.Item> {
+  icon?: ReactNode
+  /** Keyboard hint shown at the end, e.g. "⌘D". Display only. */
+  shortcut?: ReactNode
+  /** `danger` for destructive actions. */
+  tone?: 'default' | 'danger'
+  /** Indent to line up with checkbox and radio items. */
+  inset?: boolean
+}
+
+export function DropdownMenuItem({
+  icon,
+  shortcut,
+  tone,
+  inset,
+  className,
+  children,
+  ...props
+}: DropdownMenuItemProps) {
+  const { s, slots } = useParts(tone, inset)
+  return (
+    <MenuPrimitive.Item
+      data-slot="dropdown-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 && <DropdownMenuShortcut>{shortcut}</DropdownMenuShortcut>}
+    </MenuPrimitive.Item>
+  )
+}
+
+export function DropdownMenuCheckboxItem({
+  className,
+  children,
+  ...props
+}: ComponentProps<typeof MenuPrimitive.CheckboxItem>) {
+  const { s, slots } = useParts(undefined, true)
+  return (
+    <MenuPrimitive.CheckboxItem
+      data-slot="dropdown-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 DropdownMenuRadioItem({
+  className,
+  children,
+  ...props
+}: ComponentProps<typeof MenuPrimitive.RadioItem>) {
+  const { s, slots } = useParts(undefined, true)
+  return (
+    <MenuPrimitive.RadioItem
+      data-slot="dropdown-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 DropdownMenuLabel({
+  inset,
+  className,
+  ...props
+}: ComponentProps<typeof MenuPrimitive.Label> & { inset?: boolean }) {
+  const { s, slots } = useParts(undefined, inset)
+  return (
+    <MenuPrimitive.Label
+      data-slot="dropdown-menu-label"
+      className={s.label({ class: [slots.label, className] })}
+      {...props}
+    />
+  )
+}
+
+export function DropdownMenuSeparator({
+  className,
+  ...props
+}: ComponentProps<typeof MenuPrimitive.Separator>) {
+  const { s, slots } = useParts()
+  return (
+    <MenuPrimitive.Separator
+      data-slot="dropdown-menu-separator"
+      className={s.separator({ class: [slots.separator, className] })}
+      {...props}
+    />
+  )
+}
+
+export function DropdownMenuShortcut({ className, ...props }: ComponentProps<'span'>) {
+  const { s, slots } = useParts()
+  return (
+    <span
+      data-slot="dropdown-menu-shortcut"
+      className={s.shortcut({ class: [slots.shortcut, className] })}
+      {...props}
+    />
+  )
+}
+
+export interface DropdownMenuSubTriggerProps
+  extends ComponentProps<typeof MenuPrimitive.SubTrigger> {
+  icon?: ReactNode
+}
+
+export function DropdownMenuSubTrigger({
+  icon,
+  className,
+  children,
+  ...props
+}: DropdownMenuSubTriggerProps) {
+  const { s, slots } = useParts()
+  return (
+    <MenuPrimitive.SubTrigger
+      data-slot="dropdown-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 DropdownMenuSubContent({
+  sideOffset = 4,
+  className,
+  ...props
+}: ComponentProps<typeof MenuPrimitive.SubContent>) {
+  const { s, slots } = useParts()
+  return (
+    <MenuPrimitive.Portal>
+      <MenuPrimitive.SubContent
+        data-slot="dropdown-menu-sub-content"
+        sideOffset={sideOffset}
+        className={s.subContent({ class: [slots.subContent, className] })}
+        {...props}
+      />
+    </MenuPrimitive.Portal>
+  )
+}

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

@@ -0,0 +1,19 @@
+export {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  type DropdownMenuItemProps,
+  DropdownMenuLabel,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  type DropdownMenuSubTriggerProps,
+  DropdownMenuTrigger,
+} from './dropdown-menu'
+export { type DropdownMenuVariants, dropdownMenuStyles } from './dropdown-menu.styles'

package/src/components/file-upload/file-upload.styles.ts

@@ -0,0 +1,43 @@
+import type { StylesEntry } from '../../utils/registry'
+import { focusRing, themedBorder, transition } from '../../utils/styles'
+import { tv } from '../../utils/tv'
+
+export const fileUploadStyles = tv({
+  slots: {
+    root: 'grid gap-3',
+    dropzone: [
+      'flex w-full cursor-pointer flex-col items-center justify-center gap-2 rounded-lg border-dashed border-border-strong bg-subtle px-6 py-8 text-center',
+      themedBorder,
+      transition,
+      focusRing,
+      'hover:border-primary/60 hover:bg-primary/4',
+      'data-[dragging=true]:border-primary data-[dragging=true]:bg-primary/8',
+      'disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-danger',
+    ],
+    icon: 'flex size-10 items-center justify-center rounded-md border border-border bg-surface text-muted-foreground shadow-xs [&>svg]:size-5',
+    title: 'text-small font-medium text-foreground',
+    highlight: 'text-primary',
+    hint: 'text-caption text-faint-foreground',
+    rejections: 'grid gap-1 text-small font-medium text-danger',
+    list: 'grid gap-2',
+    item: [
+      'grid grid-cols-[auto_1fr_auto] items-center gap-3 rounded-md border-border bg-surface px-3 py-2.5',
+      themedBorder,
+    ],
+    fileIcon:
+      'flex size-8 items-center justify-center rounded-sm bg-muted text-muted-foreground [&>svg]:size-4',
+    fileText: 'grid min-w-0 gap-1',
+    fileName: 'truncate text-small font-medium text-foreground',
+    fileMeta: 'text-caption tabular-nums text-faint-foreground',
+    fileError: 'text-caption font-medium text-danger',
+    progress: 'h-1 overflow-hidden rounded-pill bg-muted',
+    progressBar:
+      'h-full rounded-pill bg-primary transition-[width] duration-(--glyph-duration-base)',
+  },
+})
+
+declare module '@glyphui/tokens' {
+  interface GlyphComponentRegistry {
+    FileUpload: StylesEntry<typeof fileUploadStyles>
+  }
+}

package/src/components/file-upload/file-upload.tsx

@@ -0,0 +1,343 @@
+import { type DragEvent, type ReactNode, useId, useRef, useState } from 'react'
+import { useComponentConfig } from '../../hooks/use-component-config'
+import { useControllableState } from '../../hooks/use-controllable-state'
+import { IconButton } from '../button'
+import { useFieldControl } from '../field/field-context'
+import { fileUploadStyles } from './file-upload.styles'
+
+export interface FileItem {
+  /** Stable id for keys and updates. Generated when files are added. */
+  id: string
+  file: File
+  /** Upload progress, 0–100. Shows a bar while below 100. */
+  progress?: number
+  /** Shown under the file name, e.g. "Upload failed". */
+  error?: string
+}
+
+export type FileRejectionReason = 'too-large' | 'wrong-type' | 'too-many'
+
+export interface FileRejection {
+  file: File
+  reason: FileRejectionReason
+  message: string
+}
+
+/** Formats bytes for people: 1 KB = 1024 bytes. */
+export function formatBytes(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`
+  const units = ['KB', 'MB', 'GB', 'TB']
+  let value = bytes / 1024
+  let unit = 0
+  while (value >= 1024 && unit < units.length - 1) {
+    value /= 1024
+    unit++
+  }
+  return `${value >= 10 ? Math.round(value) : value.toFixed(1)} ${units[unit]}`
+}
+
+/** Matches a file against an `accept` string like `"image/*,.pdf,application/zip"`. */
+export function matchesAccept(file: File, accept: string | undefined): boolean {
+  if (!accept) return true
+  const name = file.name.toLowerCase()
+  const type = file.type.toLowerCase()
+  return accept
+    .split(',')
+    .map((rule) => rule.trim().toLowerCase())
+    .filter(Boolean)
+    .some((rule) => {
+      if (rule.startsWith('.')) return name.endsWith(rule)
+      if (rule.endsWith('/*')) return type.startsWith(rule.slice(0, -1))
+      return type === rule
+    })
+}
+
+let counter = 0
+const newId = () => `file-${Date.now().toString(36)}-${(counter++).toString(36)}`
+
+export interface FileUploadProps {
+  files?: FileItem[]
+  defaultFiles?: FileItem[]
+  onFilesChange?: (files: FileItem[]) => void
+  /** Called with files that were not added and why. */
+  onReject?: (rejections: FileRejection[]) => void
+  /** Allowed types, as for `<input type="file" accept>`. */
+  accept?: string
+  /** Maximum size per file, in bytes. */
+  maxSize?: number
+  /** Maximum number of files in the list. */
+  maxFiles?: number
+  /** Allow several files. Default true. */
+  multiple?: boolean
+  disabled?: boolean
+  /** Main dropzone text. */
+  label?: ReactNode
+  /** Secondary dropzone text. Defaults to a summary of `accept` and `maxSize`. */
+  hint?: ReactNode
+  id?: string
+  className?: string
+  'aria-describedby'?: string
+  'aria-invalid'?: boolean
+}
+
+function UploadIcon() {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <path d="M12 16V4M7 9l5-5 5 5" />
+      <path d="M20 16v2a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-2" />
+    </svg>
+  )
+}
+
+function FileIcon() {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z" />
+      <path d="M14 2v6h6" />
+    </svg>
+  )
+}
+
+function XIcon() {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      aria-hidden="true"
+    >
+      <path d="M18 6 6 18M6 6l12 12" />
+    </svg>
+  )
+}
+
+/**
+ * Drag-and-drop or click to choose files, with type, size and count checks and a file
+ * list. It does no uploading: you get `File` objects and can set `progress` and `error`
+ * on each item while your own code uploads them.
+ */
+export function FileUpload(inProps: FileUploadProps) {
+  const [props, slots] = useComponentConfig('FileUpload', useFieldControl(inProps))
+  const {
+    files: filesProp,
+    defaultFiles = [],
+    onFilesChange,
+    onReject,
+    accept,
+    maxSize,
+    maxFiles,
+    multiple = true,
+    disabled,
+    label,
+    hint,
+    id,
+    className,
+    'aria-describedby': ariaDescribedBy,
+    'aria-invalid': ariaInvalid,
+  } = props
+  const [files, setFiles] = useControllableState<FileItem[]>({
+    value: filesProp,
+    defaultValue: defaultFiles,
+    onChange: onFilesChange,
+  })
+  const [dragging, setDragging] = useState(false)
+  const [rejections, setRejections] = useState<FileRejection[]>([])
+  const inputRef = useRef<HTMLInputElement>(null)
+  const hintId = useId()
+  const rejectionsId = useId()
+  const s = fileUploadStyles()
+
+  const limit = multiple ? (maxFiles ?? Number.POSITIVE_INFINITY) : 1
+  const full = files.length >= limit
+
+  const addFiles = (incoming: File[]) => {
+    const accepted: FileItem[] = []
+    const rejected: FileRejection[] = []
+    let room = limit - (multiple ? files.length : 0)
+    for (const file of incoming) {
+      if (!matchesAccept(file, accept)) {
+        rejected.push({
+          file,
+          reason: 'wrong-type',
+          message: `${file.name} isn't an allowed file type.`,
+        })
+      } else if (maxSize !== undefined && file.size > maxSize) {
+        rejected.push({
+          file,
+          reason: 'too-large',
+          message: `${file.name} is too large (${formatBytes(file.size)}). The limit is ${formatBytes(maxSize)}.`,
+        })
+      } else if (room <= 0) {
+        rejected.push({
+          file,
+          reason: 'too-many',
+          message: `${file.name} wasn't added: the limit is ${limit} file${limit === 1 ? '' : 's'}.`,
+        })
+      } else {
+        accepted.push({ id: newId(), file })
+        room--
+      }
+    }
+    if (accepted.length > 0) setFiles(multiple ? [...files, ...accepted] : accepted)
+    setRejections(rejected)
+    if (rejected.length > 0) onReject?.(rejected)
+  }
+
+  const onDrop = (event: DragEvent) => {
+    event.preventDefault()
+    setDragging(false)
+    if (disabled) return
+    addFiles(Array.from(event.dataTransfer.files))
+  }
+
+  const defaultHint = [
+    accept
+      ? `Accepted: ${accept
+          .split(',')
+          .map((a) => a.trim())
+          .join(', ')}`
+      : null,
+    maxSize !== undefined ? `up to ${formatBytes(maxSize)} each` : null,
+    multiple && maxFiles !== undefined ? `max ${maxFiles} files` : null,
+  ]
+    .filter(Boolean)
+    .join(' · ')
+
+  const describedBy =
+    [ariaDescribedBy, hintId, rejections.length > 0 ? rejectionsId : undefined]
+      .filter(Boolean)
+      .join(' ') || undefined
+
+  return (
+    <div data-slot="file-upload" className={s.root({ class: [slots.root, className] })}>
+      <button
+        type="button"
+        id={id}
+        data-dragging={dragging}
+        disabled={disabled || full}
+        aria-describedby={describedBy}
+        aria-invalid={ariaInvalid}
+        className={s.dropzone({ class: slots.dropzone })}
+        onClick={() => inputRef.current?.click()}
+        onDragEnter={(event) => {
+          event.preventDefault()
+          if (!disabled) setDragging(true)
+        }}
+        onDragOver={(event) => event.preventDefault()}
+        onDragLeave={(event) => {
+          if (!event.currentTarget.contains(event.relatedTarget as Node | null)) setDragging(false)
+        }}
+        onDrop={onDrop}
+      >
+        <span className={s.icon({ class: slots.icon })}>
+          <UploadIcon />
+        </span>
+        <span className={s.title({ class: slots.title })}>
+          {label ?? (
+            <>
+              Drop {multiple ? 'files' : 'a file'} here or{' '}
+              <span className={s.highlight({ class: slots.highlight })}>browse</span>
+            </>
+          )}
+        </span>
+        <span id={hintId} className={s.hint({ class: slots.hint })}>
+          {full ? 'File limit reached. Remove a file to add another.' : (hint ?? defaultHint)}
+        </span>
+      </button>
+      <input
+        ref={inputRef}
+        type="file"
+        tabIndex={-1}
+        aria-hidden="true"
+        className="sr-only"
+        accept={accept}
+        multiple={multiple}
+        disabled={disabled}
+        onChange={(event) => {
+          addFiles(Array.from(event.target.files ?? []))
+          event.target.value = ''
+        }}
+      />
+
+      {rejections.length > 0 && (
+        <ul id={rejectionsId} role="alert" className={s.rejections({ class: slots.rejections })}>
+          {rejections.map((r) => (
+            <li key={`${r.file.name}-${r.reason}`}>{r.message}</li>
+          ))}
+        </ul>
+      )}
+
+      {files.length > 0 && (
+        <ul className={s.list({ class: slots.list })} aria-label="Selected files">
+          {files.map((item) => (
+            <li
+              key={item.id}
+              data-slot="file-upload-item"
+              className={s.item({ class: slots.item })}
+            >
+              <span className={s.fileIcon({ class: slots.fileIcon })}>
+                <FileIcon />
+              </span>
+              <span className={s.fileText({ class: slots.fileText })}>
+                <span className={s.fileName({ class: slots.fileName })}>{item.file.name}</span>
+                {item.error ? (
+                  <span className={s.fileError({ class: slots.fileError })}>{item.error}</span>
+                ) : (
+                  <span className={s.fileMeta({ class: slots.fileMeta })}>
+                    {formatBytes(item.file.size)}
+                    {item.progress !== undefined &&
+                      item.progress < 100 &&
+                      ` · ${Math.round(item.progress)}%`}
+                  </span>
+                )}
+                {item.progress !== undefined && item.progress < 100 && !item.error && (
+                  <span
+                    role="progressbar"
+                    aria-label={`Uploading ${item.file.name}`}
+                    aria-valuemin={0}
+                    aria-valuemax={100}
+                    aria-valuenow={Math.round(item.progress)}
+                    className={s.progress({ class: slots.progress })}
+                  >
+                    <span
+                      className={s.progressBar({ class: slots.progressBar })}
+                      style={{ width: `${Math.max(0, Math.min(100, item.progress))}%` }}
+                    />
+                  </span>
+                )}
+              </span>
+              <IconButton
+                size="sm"
+                icon={<XIcon />}
+                aria-label={`Remove ${item.file.name}`}
+                disabled={disabled}
+                onClick={() => {
+                  setFiles(files.filter((f) => f.id !== item.id))
+                  setRejections([])
+                }}
+              />
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  )
+}

package/src/components/file-upload/index.ts

@@ -0,0 +1,10 @@
+export {
+  type FileItem,
+  type FileRejection,
+  type FileRejectionReason,
+  FileUpload,
+  type FileUploadProps,
+  formatBytes,
+  matchesAccept,
+} from './file-upload'
+export { fileUploadStyles } from './file-upload.styles'