@glyphui/ui 0.2.0 → 0.4.0

package/src/components/copy-button/copy-button.tsx

@@ -0,0 +1,117 @@
+import { type ReactNode, useEffect, useRef, useState } from 'react'
+import { useComponentConfig } from '../../hooks/use-component-config'
+import type { StylesEntry } from '../../utils/registry'
+import { tv } from '../../utils/tv'
+import { Button, type ButtonProps } from '../button'
+
+export const copyButtonStyles = tv({
+  slots: {
+    base: '',
+    icon: 'size-4',
+    status: 'sr-only',
+  },
+})
+
+declare module '@glyphui/tokens' {
+  interface GlyphComponentRegistry {
+    CopyButton: StylesEntry<typeof copyButtonStyles>
+  }
+}
+
+const icon = {
+  xmlns: 'http://www.w3.org/2000/svg',
+  viewBox: '0 0 24 24',
+  fill: 'none',
+  stroke: 'currentColor',
+  strokeWidth: 2,
+  strokeLinecap: 'round',
+  strokeLinejoin: 'round',
+} as const
+
+const CopyIcon = ({ className }: { className?: string }) => (
+  <svg aria-hidden="true" {...icon} className={className}>
+    <rect width="13" height="13" x="9" y="9" rx="2" />
+    <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
+  </svg>
+)
+const CheckIcon = ({ className }: { className?: string }) => (
+  <svg aria-hidden="true" {...icon} className={className}>
+    <path d="M20 6 9 17l-5-5" />
+  </svg>
+)
+
+export interface CopyButtonProps
+  extends Omit<
+    ButtonProps,
+    'onClick' | 'onCopy' | 'leftIcon' | 'rightIcon' | 'iconOnly' | 'asChild' | 'value'
+  > {
+  /** Text written to the clipboard. */
+  value: string
+  /** Visible label. Without it the button is icon-only, labelled "Copy". */
+  children?: ReactNode
+  /** Announced and shown after copying. Default "Copied". */
+  copiedLabel?: string
+  /** How long the copied state lasts, in ms. Default 1500. */
+  timeout?: number
+  onCopy?: (value: string) => void
+}
+
+/** Copies a value to the clipboard and confirms it visually and to screen readers. */
+export function CopyButton(inProps: CopyButtonProps) {
+  const [props, slots] = useComponentConfig('CopyButton', inProps)
+  const {
+    value,
+    children,
+    copiedLabel = 'Copied',
+    timeout = 1500,
+    onCopy,
+    variant = 'outline',
+    className,
+    'aria-label': ariaLabel,
+    ...rest
+  } = props
+  const [copied, setCopied] = useState(false)
+  const timer = useRef<ReturnType<typeof setTimeout>>(undefined)
+  const s = copyButtonStyles()
+
+  useEffect(() => () => clearTimeout(timer.current), [])
+
+  const copy = async () => {
+    try {
+      await navigator.clipboard.writeText(value)
+    } catch {
+      // Clipboard blocked (permissions, insecure context): leave the button as it was.
+      return
+    }
+    setCopied(true)
+    onCopy?.(value)
+    clearTimeout(timer.current)
+    timer.current = setTimeout(() => setCopied(false), timeout)
+  }
+
+  const glyph = copied ? (
+    <CheckIcon className={s.icon({ class: slots.icon })} />
+  ) : (
+    <CopyIcon className={s.icon({ class: slots.icon })} />
+  )
+  const iconOnly = children === undefined
+
+  return (
+    <Button
+      data-slot="copy-button"
+      data-copied={copied || undefined}
+      variant={variant}
+      iconOnly={iconOnly}
+      onClick={copy}
+      className={s.base({ class: [slots.base, className] })}
+      aria-label={iconOnly ? (copied ? copiedLabel : (ariaLabel ?? 'Copy')) : ariaLabel}
+      {...(!iconOnly && { leftIcon: glyph })}
+      {...rest}
+    >
+      {iconOnly ? glyph : copied ? copiedLabel : children}
+      <span role="status" className={s.status({ class: slots.status })}>
+        {copied ? copiedLabel : ''}
+      </span>
+    </Button>
+  )
+}

package/src/components/copy-button/index.ts

@@ -0,0 +1 @@
+export { CopyButton, type CopyButtonProps, copyButtonStyles } from './copy-button'

package/src/components/date-picker/date-picker.styles.ts

@@ -0,0 +1,42 @@
+import type { StylesEntry } from '../../utils/registry'
+import { popover } from '../../utils/styles'
+import { tv, type VariantProps } from '../../utils/tv'
+import { fieldControl } from '../input/input.styles'
+
+export const datePickerStyles = tv({
+  slots: {
+    trigger: [
+      ...fieldControl,
+      'flex cursor-pointer items-center gap-2 px-3 text-left outline-none',
+      'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/20',
+      'disabled:cursor-not-allowed disabled:opacity-50',
+    ],
+    icon: 'size-4 shrink-0 text-faint-foreground',
+    value: 'min-w-0 flex-1 truncate',
+    placeholder: 'min-w-0 flex-1 truncate text-faint-foreground',
+    clear:
+      'inline-flex size-5 shrink-0 cursor-pointer items-center justify-center rounded-xs text-faint-foreground hover:bg-muted hover:text-foreground [&>svg]:size-3.5',
+    content: [popover, 'w-auto p-0'],
+    layout: 'flex flex-col sm:flex-row',
+    presets:
+      'flex gap-1 overflow-x-auto border-b border-border p-2 sm:w-40 sm:flex-col sm:overflow-visible sm:border-r sm:border-b-0',
+    preset:
+      'shrink-0 cursor-pointer rounded-sm px-2 py-1.5 text-left text-small whitespace-nowrap text-muted-foreground hover:bg-muted hover:text-foreground data-[active=true]:bg-muted data-[active=true]:text-foreground',
+  },
+  variants: {
+    size: {
+      sm: { trigger: 'h-(--glyph-control-sm) text-small' },
+      md: { trigger: 'h-(--glyph-control-md) text-small' },
+      lg: { trigger: 'h-(--glyph-control-lg) text-body' },
+    },
+  },
+  defaultVariants: { size: 'md' },
+})
+
+export type DatePickerVariants = VariantProps<typeof datePickerStyles>
+
+declare module '@glyphui/tokens' {
+  interface GlyphComponentRegistry {
+    DatePicker: StylesEntry<typeof datePickerStyles>
+  }
+}

package/src/components/date-picker/date-picker.tsx

@@ -0,0 +1,322 @@
+import { format as formatDate, isSameDay } from 'date-fns'
+import { type ReactNode, useState } from 'react'
+import type { DateRange, Matcher } from 'react-day-picker'
+import { useComponentConfig } from '../../hooks/use-component-config'
+import { useControllableState } from '../../hooks/use-controllable-state'
+import { Calendar } from '../calendar/calendar'
+import { useFieldControl } from '../field/field-context'
+import { Popover, PopoverContent, PopoverTrigger } from '../popover'
+import { type DatePickerVariants, datePickerStyles } from './date-picker.styles'
+
+function CalendarIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+      className={className}
+    >
+      <rect x="3" y="4" width="18" height="18" rx="2" />
+      <path d="M16 2v4M8 2v4M3 10h18" />
+    </svg>
+  )
+}
+
+function ClearIcon() {
+  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>
+  )
+}
+
+interface SharedProps extends DatePickerVariants {
+  placeholder?: ReactNode
+  /** date-fns format string for the trigger. Default `"MMM d, yyyy"`. */
+  format?: string
+  /** Earliest selectable date. */
+  minDate?: Date
+  /** Latest selectable date. */
+  maxDate?: Date
+  /** Extra disabled dates, in react-day-picker matcher form. */
+  disabledDates?: Matcher | Matcher[]
+  /** Show a button that clears the value. */
+  clearable?: boolean
+  disabled?: boolean
+  required?: boolean
+  /** Submits the ISO date (yyyy-MM-dd) with a native form. */
+  name?: string
+  id?: string
+  className?: string
+  contentClassName?: string
+  'aria-label'?: string
+  'aria-describedby'?: string
+  'aria-invalid'?: boolean
+}
+
+function disabledMatchers({ minDate, maxDate, disabledDates }: SharedProps): Matcher[] {
+  const list: Matcher[] = []
+  if (minDate) list.push({ before: minDate })
+  if (maxDate) list.push({ after: maxDate })
+  if (disabledDates) list.push(...(Array.isArray(disabledDates) ? disabledDates : [disabledDates]))
+  return list
+}
+
+const iso = (date: Date) => formatDate(date, 'yyyy-MM-dd')
+
+export interface DatePickerProps extends SharedProps {
+  value?: Date | undefined
+  defaultValue?: Date | undefined
+  onValueChange?: (date: Date | undefined) => void
+}
+
+/** A date field that opens a calendar. Works with Field and with `Form` (`value` + `onValueChange`). */
+export function DatePicker(inProps: DatePickerProps) {
+  const [props, slots] = useComponentConfig('DatePicker', useFieldControl(inProps))
+  const {
+    value: valueProp,
+    defaultValue,
+    onValueChange,
+    placeholder = 'Pick a date',
+    format = 'MMM d, yyyy',
+    clearable = false,
+    size,
+    disabled,
+    name,
+    id,
+    className,
+    contentClassName,
+    'aria-label': ariaLabel,
+    'aria-describedby': ariaDescribedBy,
+    'aria-invalid': ariaInvalid,
+  } = props
+  const [open, setOpen] = useState(false)
+  const [value, setValue] = useControllableState<Date | undefined>({
+    value: valueProp,
+    defaultValue,
+    onChange: onValueChange,
+  })
+  // Controlled `undefined` means "no date", not "uncontrolled".
+  const current = 'value' in inProps ? valueProp : value
+  const s = datePickerStyles({ size })
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <button
+          type="button"
+          id={id}
+          data-slot="date-picker"
+          disabled={disabled}
+          aria-label={ariaLabel}
+          aria-describedby={ariaDescribedBy}
+          aria-invalid={ariaInvalid}
+          className={s.trigger({ class: [slots.trigger, className] })}
+        >
+          <CalendarIcon className={s.icon({ class: slots.icon })} />
+          {current ? (
+            <span className={s.value({ class: slots.value })}>{formatDate(current, format)}</span>
+          ) : (
+            <span className={s.placeholder({ class: slots.placeholder })}>{placeholder}</span>
+          )}
+          {clearable && current && !disabled && (
+            // biome-ignore lint/a11y/useSemanticElements: nested inside the trigger button, so it can't be a <button>
+            <span
+              role="button"
+              tabIndex={0}
+              aria-label="Clear date"
+              className={s.clear({ class: slots.clear })}
+              onPointerDown={(event) => event.stopPropagation()}
+              onClick={(event) => {
+                event.stopPropagation()
+                setValue(undefined)
+              }}
+              onKeyDown={(event) => {
+                if (event.key === 'Enter' || event.key === ' ') {
+                  event.preventDefault()
+                  event.stopPropagation()
+                  setValue(undefined)
+                }
+              }}
+            >
+              <ClearIcon />
+            </span>
+          )}
+        </button>
+      </PopoverTrigger>
+      <PopoverContent
+        align="start"
+        className={s.content({ class: [slots.content, contentClassName] })}
+      >
+        <Calendar
+          mode="single"
+          selected={current}
+          defaultMonth={current}
+          disabled={disabledMatchers(props)}
+          onSelect={(date) => {
+            setValue(date)
+            if (date) setOpen(false)
+          }}
+          autoFocus
+        />
+      </PopoverContent>
+      {name && <input type="hidden" name={name} value={current ? iso(current) : ''} />}
+    </Popover>
+  )
+}
+
+export interface DateRangePreset {
+  label: string
+  /** Called when chosen, so relative ranges ("Last 7 days") are computed at that moment. */
+  range: () => DateRange
+}
+
+export interface DateRangePickerProps extends SharedProps {
+  value?: DateRange | undefined
+  defaultValue?: DateRange | undefined
+  onValueChange?: (range: DateRange | undefined) => void
+  /** Quick picks shown beside the calendar. */
+  presets?: readonly DateRangePreset[]
+  /** Months shown side by side. Default 2. */
+  numberOfMonths?: number
+}
+
+function formatRange(range: DateRange, format: string): string {
+  if (!range.from) return ''
+  if (!range.to || isSameDay(range.from, range.to)) return formatDate(range.from, format)
+  return `${formatDate(range.from, format)} – ${formatDate(range.to, format)}`
+}
+
+/** A date-range field with a two-month calendar and optional presets. */
+export function DateRangePicker(inProps: DateRangePickerProps) {
+  const [props, slots] = useComponentConfig('DatePicker', useFieldControl(inProps))
+  const {
+    value: valueProp,
+    defaultValue,
+    onValueChange,
+    presets,
+    numberOfMonths = 2,
+    placeholder = 'Pick a date range',
+    format = 'MMM d, yyyy',
+    clearable = false,
+    size,
+    disabled,
+    name,
+    id,
+    className,
+    contentClassName,
+    'aria-label': ariaLabel,
+    'aria-describedby': ariaDescribedBy,
+    'aria-invalid': ariaInvalid,
+  } = props
+  const [open, setOpen] = useState(false)
+  const [value, setValue] = useControllableState<DateRange | undefined>({
+    value: valueProp,
+    defaultValue,
+    onChange: onValueChange,
+  })
+  const current = 'value' in inProps ? valueProp : value
+  const s = datePickerStyles({ size })
+  const label = current ? formatRange(current, format) : ''
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <button
+          type="button"
+          id={id}
+          data-slot="date-range-picker"
+          disabled={disabled}
+          aria-label={ariaLabel}
+          aria-describedby={ariaDescribedBy}
+          aria-invalid={ariaInvalid}
+          className={s.trigger({ class: [slots.trigger, className] })}
+        >
+          <CalendarIcon className={s.icon({ class: slots.icon })} />
+          {label ? (
+            <span className={s.value({ class: slots.value })}>{label}</span>
+          ) : (
+            <span className={s.placeholder({ class: slots.placeholder })}>{placeholder}</span>
+          )}
+          {clearable && current?.from && !disabled && (
+            // biome-ignore lint/a11y/useSemanticElements: nested inside the trigger button, so it can't be a <button>
+            <span
+              role="button"
+              tabIndex={0}
+              aria-label="Clear dates"
+              className={s.clear({ class: slots.clear })}
+              onPointerDown={(event) => event.stopPropagation()}
+              onClick={(event) => {
+                event.stopPropagation()
+                setValue(undefined)
+              }}
+              onKeyDown={(event) => {
+                if (event.key === 'Enter' || event.key === ' ') {
+                  event.preventDefault()
+                  event.stopPropagation()
+                  setValue(undefined)
+                }
+              }}
+            >
+              <ClearIcon />
+            </span>
+          )}
+        </button>
+      </PopoverTrigger>
+      <PopoverContent
+        align="start"
+        className={s.content({ class: [slots.content, contentClassName] })}
+      >
+        <div className={s.layout({ class: slots.layout })}>
+          {presets && presets.length > 0 && (
+            <div className={s.presets({ class: slots.presets })}>
+              {presets.map((preset) => (
+                <button
+                  key={preset.label}
+                  type="button"
+                  className={s.preset({ class: slots.preset })}
+                  onClick={() => {
+                    setValue(preset.range())
+                    setOpen(false)
+                  }}
+                >
+                  {preset.label}
+                </button>
+              ))}
+            </div>
+          )}
+          <Calendar
+            mode="range"
+            selected={current}
+            defaultMonth={current?.from}
+            numberOfMonths={numberOfMonths}
+            disabled={disabledMatchers(props)}
+            onSelect={(range) => setValue(range)}
+            autoFocus
+          />
+        </div>
+      </PopoverContent>
+      {name && (
+        <>
+          <input
+            type="hidden"
+            name={`${name}.from`}
+            value={current?.from ? iso(current.from) : ''}
+          />
+          <input type="hidden" name={`${name}.to`} value={current?.to ? iso(current.to) : ''} />
+        </>
+      )}
+    </Popover>
+  )
+}

package/src/components/date-picker/index.ts

@@ -0,0 +1,8 @@
+export {
+  DatePicker,
+  type DatePickerProps,
+  DateRangePicker,
+  type DateRangePickerProps,
+  type DateRangePreset,
+} from './date-picker'
+export { type DatePickerVariants, datePickerStyles } from './date-picker.styles'

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

@@ -27,8 +27,8 @@ export const dropdownMenuStyles = tv({
     tone: {
       default: {},
       danger: {
-        item: 'text-danger data-highlighted:bg-danger/10',
-        icon: 'text-danger',
+        item: 'text-danger-text data-highlighted:bg-danger/10',
+        icon: 'text-danger-text',
       },
     },
     inset: { true: { item: 'pl-8', label: 'pl-8' } },

package/src/components/eyebrow/eyebrow.styles.ts

@@ -5,7 +5,7 @@ export const eyebrowStyles = tv({
   variants: {
     tone: {
       muted: { base: 'text-muted-foreground' },
-      primary: { base: 'text-primary' },
+      primary: { base: 'text-primary-text' },
     },
   },
   defaultVariants: { tone: 'muted' },

package/src/components/field/field-context.ts

@@ -2,6 +2,8 @@ import { createContext, useContext } from 'react'
 
 export interface FieldContextValue {
   id: string
+  /** Id of the visible label, for controls labelled by reference (aria-labelledby). */
+  labelId: string | undefined
   descriptionId: string | undefined
   errorId: string | undefined
   invalid: boolean

package/src/components/field/field.styles.ts

@@ -4,10 +4,12 @@ export const fieldStyles = tv({
   slots: {
     root: 'grid gap-1.5',
     label: '',
-    required: 'text-danger',
+    labelRow: 'flex items-center justify-between gap-2',
+    labelAction: 'text-small',
+    required: 'text-danger-text',
     text: 'grid gap-0.5',
     description: 'text-small text-faint-foreground',
-    error: 'text-small font-medium text-danger',
+    error: 'text-small font-medium text-danger-text',
   },
   variants: {
     orientation: {

package/src/components/field/field.tsx

@@ -6,6 +6,11 @@ import { FieldContext } from './field-context'
 
 export interface FieldProps extends Omit<ComponentProps<'div'>, 'children'>, FieldVariants {
   label?: ReactNode
+  /**
+   * Shown at the end of the label row, outside the label, so it is not part of the
+   * control's accessible name. For example a "Forgot password?" link.
+   */
+  labelAction?: ReactNode
   description?: ReactNode
   /** Error message. Marks the control invalid and is announced to screen readers. */
   error?: ReactNode
@@ -27,6 +32,7 @@ export function Field(inProps: FieldProps) {
   const [props, slots] = useComponentConfig('Field', inProps)
   const {
     label,
+    labelAction,
     description,
     error,
     required = false,
@@ -40,17 +46,18 @@ export function Field(inProps: FieldProps) {
   const generated = useId()
   const id = controlId ?? generated
   const invalid = Boolean(error)
+  const labelId = label ? `${id}-label` : undefined
   const descriptionId = description ? `${id}-description` : undefined
   const errorId = invalid ? `${id}-error` : undefined
   const s = fieldStyles({ orientation })
 
   const context = useMemo(
-    () => ({ id, descriptionId, errorId, invalid, required, disabled }),
-    [id, descriptionId, errorId, invalid, required, disabled],
+    () => ({ id, labelId, descriptionId, errorId, invalid, required, disabled }),
+    [id, labelId, descriptionId, errorId, invalid, required, disabled],
   )
 
-  const labelNode = label ? (
-    <Label htmlFor={id} className={s.label({ class: slots.label })}>
+  const labelElement = label ? (
+    <Label id={labelId} htmlFor={id} className={s.label({ class: slots.label })}>
       {label}
       {required && (
         <span className={s.required({ class: slots.required })} aria-hidden="true">
@@ -59,6 +66,20 @@ export function Field(inProps: FieldProps) {
       )}
     </Label>
   ) : null
+  const labelNode =
+    labelElement && labelAction ? (
+      <div data-slot="field-label-row" className={s.labelRow({ class: slots.labelRow })}>
+        {labelElement}
+        <span
+          data-slot="field-label-action"
+          className={s.labelAction({ class: slots.labelAction })}
+        >
+          {labelAction}
+        </span>
+      </div>
+    ) : (
+      labelElement
+    )
 
   const messages = (
     <>

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-text',
+    hint: 'text-caption text-faint-foreground',
+    rejections: 'grid gap-1 text-small font-medium text-danger-text',
+    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-text',
+    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>
+  }
+}