@glyphui/ui 0.2.0 → 0.3.0

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'

package/src/components/hover-card/hover-card.tsx

@@ -0,0 +1,41 @@
+import { HoverCard as HoverCardPrimitive } from 'radix-ui'
+import type { ComponentProps } from 'react'
+import { useComponentConfig } from '../../hooks/use-component-config'
+import type { StylesEntry } from '../../utils/registry'
+import { popover } from '../../utils/styles'
+import { tv } from '../../utils/tv'
+
+export const hoverCardStyles = tv({
+  slots: {
+    content: [popover, 'w-72 max-w-[calc(100vw-2rem)] p-4 text-small outline-none'],
+  },
+})
+
+declare module '@glyphui/tokens' {
+  interface GlyphComponentRegistry {
+    HoverCard: StylesEntry<typeof hoverCardStyles>
+  }
+}
+
+/**
+ * A rich preview shown while hovering or focusing a link, such as a user or repository card.
+ * Sighted mouse users only see it on hover; keep the same information reachable elsewhere.
+ */
+export const HoverCard = HoverCardPrimitive.Root
+export const HoverCardTrigger = HoverCardPrimitive.Trigger
+
+export function HoverCardContent(inProps: ComponentProps<typeof HoverCardPrimitive.Content>) {
+  const [props, slots] = useComponentConfig('HoverCard', inProps)
+  const { sideOffset = 6, align = 'center', className, ...rest } = props
+  return (
+    <HoverCardPrimitive.Portal>
+      <HoverCardPrimitive.Content
+        data-slot="hover-card-content"
+        sideOffset={sideOffset}
+        align={align}
+        className={hoverCardStyles().content({ class: [slots.content, className] })}
+        {...rest}
+      />
+    </HoverCardPrimitive.Portal>
+  )
+}

package/src/components/hover-card/index.ts

@@ -0,0 +1 @@
+export { HoverCard, HoverCardContent, HoverCardTrigger, hoverCardStyles } from './hover-card'

package/src/components/input-otp/index.ts

@@ -0,0 +1,10 @@
+export { REGEXP_ONLY_CHARS, REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS } from 'input-otp'
+export {
+  InputOTP,
+  InputOTPGroup,
+  type InputOTPProps,
+  InputOTPSeparator,
+  InputOTPSlot,
+  type InputOTPSlotProps,
+} from './input-otp'
+export { type InputOTPVariants, inputOtpStyles } from './input-otp.styles'

package/src/components/input-otp/input-otp.styles.ts

@@ -0,0 +1,38 @@
+import type { StylesEntry } from '../../utils/registry'
+import { transition } from '../../utils/styles'
+import { tv, type VariantProps } from '../../utils/tv'
+
+export const inputOtpStyles = tv({
+  slots: {
+    root: 'flex items-center gap-2 has-disabled:opacity-50',
+    input: 'disabled:cursor-not-allowed',
+    group: 'flex items-center',
+    slot: [
+      'relative flex items-center justify-center border-input bg-surface font-medium tabular-nums text-foreground shadow-xs',
+      'border-y-(length:--glyph-border-width) border-r-(length:--glyph-border-width)',
+      'first:rounded-l-md first:border-l-(length:--glyph-border-width) last:rounded-r-md',
+      'data-[active=true]:z-10 data-[active=true]:border-ring data-[active=true]:ring-3 data-[active=true]:ring-ring/20',
+      'aria-invalid:border-danger',
+      transition,
+    ],
+    caret: 'pointer-events-none absolute inset-0 flex items-center justify-center',
+    caretBar: 'h-4 w-px animate-pulse bg-foreground',
+    separator: 'flex items-center text-faint-foreground [&>svg]:size-4',
+  },
+  variants: {
+    size: {
+      sm: { slot: 'size-8 text-small' },
+      md: { slot: 'size-10 text-body' },
+      lg: { slot: 'size-12 text-h4' },
+    },
+  },
+  defaultVariants: { size: 'md' },
+})
+
+export type InputOTPVariants = VariantProps<typeof inputOtpStyles>
+
+declare module '@glyphui/tokens' {
+  interface GlyphComponentRegistry {
+    InputOTP: StylesEntry<typeof inputOtpStyles>
+  }
+}

package/src/components/input-otp/input-otp.tsx

@@ -0,0 +1,116 @@
+import { OTPInput, OTPInputContext, type OTPInputProps } from 'input-otp'
+import { type ComponentProps, createContext, type ReactNode, useContext } from 'react'
+import { type SlotClasses, useComponentConfig } from '../../hooks/use-component-config'
+import { useFieldControl } from '../field/field-context'
+import { type InputOTPVariants, inputOtpStyles } from './input-otp.styles'
+
+type Styles = ReturnType<typeof inputOtpStyles>
+const PartsContext = createContext<{
+  s: Styles
+  slots: SlotClasses<'InputOTP'>
+  invalid: boolean
+} | null>(null)
+
+function useParts() {
+  return useContext(PartsContext) ?? { s: inputOtpStyles(), slots: {}, invalid: false }
+}
+
+export type InputOTPProps = Omit<OTPInputProps, 'render' | 'children' | 'maxLength'> &
+  InputOTPVariants & {
+    /** Number of characters. Default 6. */
+    length?: number
+    /** Custom slot layout (InputOTPGroup, InputOTPSlot, InputOTPSeparator). Defaults to one group of `length` slots. */
+    children?: ReactNode
+  }
+
+/**
+ * One-time code input: one box per character, paste support, and autofill from SMS on
+ * mobile. Built on input-otp. Restrict characters with `pattern`, e.g. `REGEXP_ONLY_DIGITS`.
+ */
+export function InputOTP(inProps: InputOTPProps) {
+  const [props, slots] = useComponentConfig('InputOTP', useFieldControl(inProps))
+  const { length = 6, size, children, className, containerClassName, ...rest } = props
+  const s = inputOtpStyles({ size })
+  const invalid = rest['aria-invalid'] === true || rest['aria-invalid'] === 'true'
+  return (
+    <PartsContext.Provider value={{ s, slots, invalid }}>
+      <OTPInput
+        data-slot="input-otp"
+        maxLength={length}
+        autoComplete="one-time-code"
+        inputMode="numeric"
+        containerClassName={s.root({ class: [slots.root, containerClassName] })}
+        className={s.input({ class: [slots.input, className] })}
+        {...rest}
+      >
+        {children ?? (
+          <InputOTPGroup>
+            {Array.from({ length }, (_, index) => (
+              <InputOTPSlot key={index} index={index} />
+            ))}
+          </InputOTPGroup>
+        )}
+      </OTPInput>
+    </PartsContext.Provider>
+  )
+}
+
+export function InputOTPGroup({ className, ...props }: ComponentProps<'div'>) {
+  const { s, slots } = useParts()
+  return (
+    <div
+      data-slot="input-otp-group"
+      className={s.group({ class: [slots.group, className] })}
+      {...props}
+    />
+  )
+}
+
+export interface InputOTPSlotProps extends ComponentProps<'div'> {
+  /** Position of the character this box shows, starting at 0. */
+  index: number
+}
+
+export function InputOTPSlot({ index, className, ...props }: InputOTPSlotProps) {
+  const { s, slots, invalid } = useParts()
+  const slot = useContext(OTPInputContext).slots[index]
+  return (
+    <div
+      data-slot="input-otp-slot"
+      data-active={slot?.isActive ?? false}
+      aria-invalid={invalid || undefined}
+      className={s.slot({ class: [slots.slot, className] })}
+      {...props}
+    >
+      {slot?.char ?? slot?.placeholderChar}
+      {slot?.hasFakeCaret && (
+        <div className={s.caret({ class: slots.caret })}>
+          <div className={s.caretBar({ class: slots.caretBar })} />
+        </div>
+      )}
+    </div>
+  )
+}
+
+export function InputOTPSeparator({ className, ...props }: ComponentProps<'div'>) {
+  const { s, slots } = useParts()
+  return (
+    <div
+      data-slot="input-otp-separator"
+      aria-hidden="true"
+      className={s.separator({ class: [slots.separator, className] })}
+      {...props}
+    >
+      <svg
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        aria-hidden="true"
+      >
+        <path d="M6 12h12" />
+      </svg>
+    </div>
+  )
+}

package/src/components/modal/index.ts

@@ -0,0 +1,2 @@
+export { Modal, ModalClose, type ModalProps } from './modal'
+export { modalStyles } from './modal.styles'

package/src/components/modal/modal.styles.ts

@@ -0,0 +1,18 @@
+import type { StylesEntry } from '../../utils/registry'
+import { tv } from '../../utils/tv'
+
+/** Modal is built from Dialog parts; these slots add Modal-specific classes on top. */
+export const modalStyles = tv({
+  slots: {
+    content: '',
+    header: '',
+    body: 'grid gap-4',
+    footer: '',
+  },
+})
+
+declare module '@glyphui/tokens' {
+  interface GlyphComponentRegistry {
+    Modal: StylesEntry<typeof modalStyles>
+  }
+}

package/src/components/modal/modal.tsx

@@ -0,0 +1,86 @@
+import type { ReactNode } from 'react'
+import { useComponentConfig } from '../../hooks/use-component-config'
+import {
+  Dialog,
+  DialogBody,
+  DialogClose,
+  DialogContent,
+  type DialogContentProps,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '../dialog'
+import { modalStyles } from './modal.styles'
+
+export interface ModalProps extends Omit<DialogContentProps, 'title' | 'children'> {
+  open?: boolean
+  defaultOpen?: boolean
+  onOpenChange?: (open: boolean) => void
+  /** Heading of the modal. Also its accessible name. */
+  title: ReactNode
+  description?: ReactNode
+  /** Element that opens the modal, e.g. a Button. Optional when you control `open`. */
+  trigger?: ReactNode
+  /** Actions at the bottom. Wrap a button in `ModalClose` to close on click. */
+  footer?: ReactNode
+  /** Close when the backdrop is clicked. Default true. */
+  closeOnOverlayClick?: boolean
+  children?: ReactNode
+}
+
+/**
+ * The everyday modal in one component: title, description, body and footer as props.
+ * For custom layouts use the Dialog parts; for yes/no decisions use `useConfirm()`.
+ */
+export function Modal(inProps: ModalProps) {
+  const [props, slots] = useComponentConfig('Modal', inProps)
+  const {
+    open,
+    defaultOpen,
+    onOpenChange,
+    title,
+    description,
+    trigger,
+    footer,
+    closeOnOverlayClick = true,
+    onPointerDownOutside,
+    className,
+    children,
+    ...rest
+  } = props
+  const s = modalStyles()
+
+  return (
+    <Dialog
+      {...(open !== undefined && { open })}
+      {...(defaultOpen !== undefined && { defaultOpen })}
+      {...(onOpenChange && { onOpenChange })}
+    >
+      {trigger && <DialogTrigger asChild>{trigger}</DialogTrigger>}
+      <DialogContent
+        data-slot="modal"
+        className={s.content({ class: [slots.content, className] })}
+        onPointerDownOutside={(event) => {
+          onPointerDownOutside?.(event)
+          if (!closeOnOverlayClick) event.preventDefault()
+        }}
+        {...(!description && { 'aria-describedby': undefined })}
+        {...rest}
+      >
+        <DialogHeader className={s.header({ class: slots.header })}>
+          <DialogTitle>{title}</DialogTitle>
+          {description && <DialogDescription>{description}</DialogDescription>}
+        </DialogHeader>
+        {children && <DialogBody className={s.body({ class: slots.body })}>{children}</DialogBody>}
+        {footer && (
+          <DialogFooter className={s.footer({ class: slots.footer })}>{footer}</DialogFooter>
+        )}
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+/** Closes the surrounding Modal. Use with `asChild` around a button. */
+export const ModalClose: typeof DialogClose = DialogClose

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

@@ -0,0 +1,14 @@
+export {
+  NavigationMenu,
+  NavigationMenuCard,
+  type NavigationMenuCardProps,
+  NavigationMenuContent,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  type NavigationMenuLinkProps,
+  NavigationMenuList,
+  type NavigationMenuProps,
+  NavigationMenuTrigger,
+  NavigationMenuViewport,
+} from './navigation-menu'
+export { navigationMenuStyles } from './navigation-menu.styles'