@glyphui/ui 0.1.1 → 0.3.0

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/description-list/description-list.styles.ts

@@ -0,0 +1,31 @@
+import type { StylesEntry } from '../../utils/registry'
+import { tv, type VariantProps } from '../../utils/tv'
+
+export const descriptionListStyles = tv({
+  slots: {
+    root: 'grid w-full',
+    item: 'grid min-w-0 gap-1',
+    term: 'text-small text-muted-foreground',
+    details: 'min-w-0 break-words text-small text-foreground',
+  },
+  variants: {
+    layout: {
+      stacked: { root: 'gap-4' },
+      inline: { item: 'sm:grid-cols-[minmax(0,12rem)_1fr] sm:gap-4' },
+    },
+    dividers: {
+      true: { root: 'gap-0 divide-y divide-border', item: 'py-3 first:pt-0 last:pb-0' },
+      false: {},
+    },
+  },
+  compoundVariants: [{ layout: 'inline', dividers: false, class: { root: 'gap-3' } }],
+  defaultVariants: { layout: 'stacked', dividers: false },
+})
+
+export type DescriptionListVariants = VariantProps<typeof descriptionListStyles>
+
+declare module '@glyphui/tokens' {
+  interface GlyphComponentRegistry {
+    DescriptionList: StylesEntry<typeof descriptionListStyles>
+  }
+}

package/src/components/description-list/description-list.tsx

@@ -0,0 +1,56 @@
+import { type ComponentProps, createContext, type ReactNode, useContext } from 'react'
+import { type SlotClasses, useComponentConfig } from '../../hooks/use-component-config'
+import { type DescriptionListVariants, descriptionListStyles } from './description-list.styles'
+
+type Styles = ReturnType<typeof descriptionListStyles>
+
+const DescriptionListContext = createContext<{
+  s: Styles
+  slots: SlotClasses<'DescriptionList'>
+} | null>(null)
+
+export interface DescriptionListProps extends ComponentProps<'dl'>, DescriptionListVariants {}
+
+/**
+ * Label–value pairs, such as account details or order metadata.
+ * `layout="inline"` puts terms and details side by side from the `sm` breakpoint.
+ */
+export function DescriptionList(inProps: DescriptionListProps) {
+  const [props, slots] = useComponentConfig('DescriptionList', inProps)
+  const { layout, dividers, className, ...rest } = props
+  const s = descriptionListStyles({ layout, dividers })
+  return (
+    <DescriptionListContext.Provider value={{ s, slots }}>
+      <dl
+        data-slot="description-list"
+        className={s.root({ class: [slots.root, className] })}
+        {...rest}
+      />
+    </DescriptionListContext.Provider>
+  )
+}
+
+export interface DescriptionItemProps extends Omit<ComponentProps<'div'>, 'children'> {
+  term: ReactNode
+  children: ReactNode
+}
+
+export function DescriptionItem({ term, children, className, ...props }: DescriptionItemProps) {
+  const ctx = useContext(DescriptionListContext)
+  const s = ctx?.s ?? descriptionListStyles()
+  const slots = ctx?.slots ?? {}
+  return (
+    <div
+      data-slot="description-item"
+      className={s.item({ class: [slots.item, className] })}
+      {...props}
+    >
+      <dt data-slot="description-term" className={s.term({ class: slots.term })}>
+        {term}
+      </dt>
+      <dd data-slot="description-details" className={s.details({ class: slots.details })}>
+        {children}
+      </dd>
+    </div>
+  )
+}

package/src/components/description-list/index.ts

@@ -0,0 +1,7 @@
+export {
+  DescriptionItem,
+  type DescriptionItemProps,
+  DescriptionList,
+  type DescriptionListProps,
+} from './description-list'
+export { type DescriptionListVariants, descriptionListStyles } from './description-list.styles'

package/src/components/dialog/close-icon.tsx

@@ -0,0 +1,22 @@
+import type { SVGProps } from 'react'
+
+/** Local close icon so overlay components stay self-contained. */
+export function CloseIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+      {...props}
+    >
+      <path d="M18 6 6 18M6 6l12 12" />
+    </svg>
+  )
+}

package/src/components/dialog/dialog.styles.ts

@@ -0,0 +1,41 @@
+import type { StylesEntry } from '../../utils/registry'
+import { focusRing, themedBorder, transition } from '../../utils/styles'
+import { tv, type VariantProps } from '../../utils/tv'
+
+export const dialogStyles = tv({
+  slots: {
+    overlay: 'fixed inset-0 z-50 animate-fade-in bg-overlay',
+    content: [
+      'fixed top-1/2 left-1/2 z-50 grid max-h-[calc(100dvh-2rem)] w-[calc(100vw-2rem)] -translate-x-1/2 -translate-y-1/2 gap-5 overflow-y-auto',
+      'rounded-xl border-border bg-surface p-6 text-foreground shadow-lg outline-none animate-pop-in',
+      themedBorder,
+    ],
+    close: [
+      'absolute top-4 right-4 inline-flex size-7 cursor-pointer items-center justify-center rounded-sm text-muted-foreground hover:bg-muted hover:text-foreground [&>svg]:size-4',
+      transition,
+      focusRing,
+    ],
+    header: 'flex flex-col gap-1.5 pr-8',
+    title: 'font-display text-h4 text-foreground',
+    description: 'text-small text-muted-foreground',
+    body: 'min-w-0 text-small text-foreground',
+    footer: 'flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',
+  },
+  variants: {
+    size: {
+      sm: { content: 'max-w-sm' },
+      md: { content: 'max-w-lg' },
+      lg: { content: 'max-w-2xl' },
+      xl: { content: 'max-w-4xl' },
+    },
+  },
+  defaultVariants: { size: 'md' },
+})
+
+export type DialogVariants = VariantProps<typeof dialogStyles>
+
+declare module '@glyphui/tokens' {
+  interface GlyphComponentRegistry {
+    Dialog: StylesEntry<typeof dialogStyles>
+  }
+}

package/src/components/dialog/dialog.tsx

@@ -0,0 +1,111 @@
+import { Dialog as DialogPrimitive } from 'radix-ui'
+import type { ComponentProps } from 'react'
+import { useComponentConfig } from '../../hooks/use-component-config'
+import { CloseIcon } from './close-icon'
+import { type DialogVariants, dialogStyles } from './dialog.styles'
+
+function useParts() {
+  const [, slots] = useComponentConfig('Dialog', {})
+  return { s: dialogStyles(), slots }
+}
+
+/** A modal window. Focus is trapped inside and returns to the trigger on close. */
+export const Dialog = DialogPrimitive.Root
+export const DialogTrigger = DialogPrimitive.Trigger
+export const DialogClose = DialogPrimitive.Close
+
+export interface DialogContentProps
+  extends ComponentProps<typeof DialogPrimitive.Content>,
+    DialogVariants {
+  /** Show the close button in the corner. Default true. */
+  showClose?: boolean
+  overlayClassName?: string
+}
+
+export function DialogContent(inProps: DialogContentProps) {
+  const [props, slots] = useComponentConfig('Dialog', inProps)
+  const { size, showClose = true, overlayClassName, className, children, ...rest } = props
+  const s = dialogStyles({ size })
+  return (
+    <DialogPrimitive.Portal>
+      <DialogPrimitive.Overlay
+        data-slot="dialog-overlay"
+        className={s.overlay({ class: [slots.overlay, overlayClassName] })}
+      />
+      <DialogPrimitive.Content
+        data-slot="dialog-content"
+        className={s.content({ class: [slots.content, className] })}
+        {...rest}
+      >
+        {children}
+        {showClose && (
+          <DialogPrimitive.Close
+            data-slot="dialog-close"
+            aria-label="Close"
+            className={s.close({ class: slots.close })}
+          >
+            <CloseIcon />
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Content>
+    </DialogPrimitive.Portal>
+  )
+}
+
+export function DialogHeader({ className, ...props }: ComponentProps<'div'>) {
+  const { s, slots } = useParts()
+  return (
+    <div
+      data-slot="dialog-header"
+      className={s.header({ class: [slots.header, className] })}
+      {...props}
+    />
+  )
+}
+
+export function DialogTitle({ className, ...props }: ComponentProps<typeof DialogPrimitive.Title>) {
+  const { s, slots } = useParts()
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={s.title({ class: [slots.title, className] })}
+      {...props}
+    />
+  )
+}
+
+export function DialogDescription({
+  className,
+  ...props
+}: ComponentProps<typeof DialogPrimitive.Description>) {
+  const { s, slots } = useParts()
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={s.description({ class: [slots.description, className] })}
+      {...props}
+    />
+  )
+}
+
+export function DialogBody({ className, ...props }: ComponentProps<'div'>) {
+  const { s, slots } = useParts()
+  return (
+    <div
+      data-slot="dialog-body"
+      className={s.body({ class: [slots.body, className] })}
+      {...props}
+    />
+  )
+}
+
+export function DialogFooter({ className, ...props }: ComponentProps<'div'>) {
+  const { s, slots } = useParts()
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={s.footer({ class: [slots.footer, className] })}
+      {...props}
+    />
+  )
+}

package/src/components/dialog/index.ts

@@ -0,0 +1,13 @@
+export {
+  Dialog,
+  DialogBody,
+  DialogClose,
+  DialogContent,
+  type DialogContentProps,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from './dialog'
+export { type DialogVariants, dialogStyles } from './dialog.styles'

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

@@ -0,0 +1,45 @@
+import type { StylesEntry } from '../../utils/registry'
+import { popover } from '../../utils/styles'
+import { tv, type VariantProps } from '../../utils/tv'
+
+const item = [
+  'relative flex h-8 cursor-pointer select-none items-center gap-2 rounded-sm px-2 text-small text-foreground outline-none',
+  'data-highlighted:bg-muted data-disabled:pointer-events-none data-disabled:opacity-50',
+  '[&_svg]:size-4 [&_svg]:shrink-0',
+]
+
+export const dropdownMenuStyles = tv({
+  slots: {
+    content: [
+      popover,
+      'min-w-48 max-h-(--radix-dropdown-menu-content-available-height) overflow-y-auto p-1',
+    ],
+    item,
+    icon: 'flex size-4 shrink-0 items-center justify-center text-muted-foreground',
+    indicator: 'absolute left-2 flex size-4 items-center justify-center text-primary',
+    label: 'px-2 pt-1.5 pb-1 text-caption font-medium text-faint-foreground',
+    separator: '-mx-1 my-1 h-px bg-border',
+    shortcut: 'ml-auto pl-4 font-mono text-caption tracking-wider text-faint-foreground',
+    subTrigger: [...item, 'data-[state=open]:bg-muted'],
+    subContent: [popover, 'min-w-40 p-1'],
+  },
+  variants: {
+    tone: {
+      default: {},
+      danger: {
+        item: 'text-danger data-highlighted:bg-danger/10',
+        icon: 'text-danger',
+      },
+    },
+    inset: { true: { item: 'pl-8', label: 'pl-8' } },
+  },
+  defaultVariants: { tone: 'default' },
+})
+
+export type DropdownMenuVariants = VariantProps<typeof dropdownMenuStyles>
+
+declare module '@glyphui/tokens' {
+  interface GlyphComponentRegistry {
+    DropdownMenu: StylesEntry<typeof dropdownMenuStyles>
+  }
+}