@glyphui/ui 0.2.0 → 0.4.0

package/src/components/modal/modal.tsx

@@ -0,0 +1,111 @@
+import type { FormEvent, 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' | 'onSubmit'> {
+  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
+  /**
+   * Turns the body and footer into one `<form>`, so a `type="submit"` button in the footer
+   * submits the fields in the body. The page does not reload. With `@glyphui/ui/form`, use
+   * `<Form>` in the body and `<FormSubmit form={form}>` in the footer instead.
+   */
+  onSubmit?: (event: FormEvent<HTMLFormElement>) => void
+  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,
+    onSubmit,
+    onPointerDownOutside,
+    className,
+    children,
+    ...rest
+  } = props
+  const s = modalStyles()
+  const content = (
+    <>
+      {children && <DialogBody className={s.body({ class: slots.body })}>{children}</DialogBody>}
+      {footer && (
+        <DialogFooter className={s.footer({ class: slots.footer })}>{footer}</DialogFooter>
+      )}
+    </>
+  )
+
+  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>
+        {onSubmit ? (
+          <form
+            data-slot="modal-form"
+            className={s.form({ class: slots.form })}
+            onSubmit={(event) => {
+              event.preventDefault()
+              onSubmit(event)
+            }}
+          >
+            {content}
+          </form>
+        ) : (
+          content
+        )}
+      </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'

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

@@ -0,0 +1,48 @@
+import type { StylesEntry } from '../../utils/registry'
+import { focusRing, themedBorder, transition } from '../../utils/styles'
+import { tv } from '../../utils/tv'
+
+const topLevel = [
+  'group inline-flex h-9 cursor-pointer select-none items-center justify-center gap-1 rounded-md px-3 text-small font-medium text-muted-foreground',
+  transition,
+  focusRing,
+  'hover:bg-muted hover:text-foreground data-[state=open]:bg-muted data-[state=open]:text-foreground',
+  'data-active:text-foreground',
+]
+
+export const navigationMenuStyles = tv({
+  slots: {
+    root: 'relative z-10 flex max-w-max flex-1 items-center justify-center',
+    list: 'group flex flex-1 list-none items-center justify-center gap-1',
+    item: 'relative',
+    trigger: topLevel,
+    chevron:
+      'size-3 text-faint-foreground transition-transform duration-(--glyph-duration-base) ease-standard group-data-[state=open]:rotate-180',
+    content: 'top-0 left-0 w-full p-2 animate-fade-in md:absolute md:w-auto',
+    viewportWrapper: 'absolute top-full left-0 flex justify-center',
+    viewport: [
+      'relative mt-1.5 h-(--radix-navigation-menu-viewport-height) w-[calc(100vw-2rem)] origin-top overflow-hidden rounded-lg border-border bg-raised text-foreground shadow-lg animate-pop-in',
+      'md:w-(--radix-navigation-menu-viewport-width)',
+      'transition-[width,height] duration-(--glyph-duration-base) ease-standard',
+      themedBorder,
+    ],
+    link: topLevel,
+    card: [
+      'flex select-none gap-3 rounded-md p-3 text-foreground no-underline outline-none',
+      transition,
+      focusRing,
+      'hover:bg-muted focus-visible:bg-muted',
+    ],
+    cardIcon:
+      'flex size-9 shrink-0 items-center justify-center rounded-md border border-border bg-surface text-muted-foreground shadow-xs [&_svg]:size-4',
+    cardText: 'grid min-w-0 gap-0.5',
+    cardTitle: 'text-small font-medium text-foreground',
+    cardDescription: 'text-small text-muted-foreground',
+  },
+})
+
+declare module '@glyphui/tokens' {
+  interface GlyphComponentRegistry {
+    NavigationMenu: StylesEntry<typeof navigationMenuStyles>
+  }
+}

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

@@ -0,0 +1,208 @@
+import { NavigationMenu as NavPrimitive } from 'radix-ui'
+import type { ComponentProps, ReactNode } from 'react'
+import { useComponentConfig } from '../../hooks/use-component-config'
+import { useIsActive, useLinkComponent } from '../../provider/glyph-context'
+import { navigationMenuStyles } from './navigation-menu.styles'
+
+const s = navigationMenuStyles()
+
+function useSlots() {
+  return useComponentConfig('NavigationMenu', {})[1]
+}
+
+const ChevronDownIcon = ({ className }: { className?: string }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    aria-hidden="true"
+    className={className}
+  >
+    <path d="m6 9 6 6 6-6" />
+  </svg>
+)
+
+export interface NavigationMenuProps extends ComponentProps<typeof NavPrimitive.Root> {
+  /** Render the shared animated panel below the menu. Default true. */
+  viewport?: boolean
+}
+
+/**
+ * Site navigation with dropdown panels (mega menus) for marketing headers.
+ * Keyboard: Tab between items, arrows inside panels, Escape to close.
+ */
+export function NavigationMenu(inProps: NavigationMenuProps) {
+  const [props, slots] = useComponentConfig('NavigationMenu', inProps)
+  const { viewport = true, className, children, ...rest } = props
+  return (
+    <NavPrimitive.Root
+      data-slot="navigation-menu"
+      className={s.root({ class: [slots.root, className] })}
+      {...rest}
+    >
+      {children}
+      {viewport && <NavigationMenuViewport />}
+    </NavPrimitive.Root>
+  )
+}
+
+export function NavigationMenuList({
+  className,
+  ...props
+}: ComponentProps<typeof NavPrimitive.List>) {
+  const slots = useSlots()
+  return (
+    <NavPrimitive.List
+      data-slot="navigation-menu-list"
+      className={s.list({ class: [slots.list, className] })}
+      {...props}
+    />
+  )
+}
+
+export function NavigationMenuItem({
+  className,
+  ...props
+}: ComponentProps<typeof NavPrimitive.Item>) {
+  const slots = useSlots()
+  return (
+    <NavPrimitive.Item
+      data-slot="navigation-menu-item"
+      className={s.item({ class: [slots.item, className] })}
+      {...props}
+    />
+  )
+}
+
+export function NavigationMenuTrigger({
+  className,
+  children,
+  ...props
+}: ComponentProps<typeof NavPrimitive.Trigger>) {
+  const slots = useSlots()
+  return (
+    <NavPrimitive.Trigger
+      data-slot="navigation-menu-trigger"
+      className={s.trigger({ class: [slots.trigger, className] })}
+      {...props}
+    >
+      {children}
+      <ChevronDownIcon className={s.chevron({ class: slots.chevron })} />
+    </NavPrimitive.Trigger>
+  )
+}
+
+export function NavigationMenuContent({
+  className,
+  ...props
+}: ComponentProps<typeof NavPrimitive.Content>) {
+  const slots = useSlots()
+  return (
+    <NavPrimitive.Content
+      data-slot="navigation-menu-content"
+      className={s.content({ class: [slots.content, className] })}
+      {...props}
+    />
+  )
+}
+
+export function NavigationMenuViewport({
+  className,
+  ...props
+}: ComponentProps<typeof NavPrimitive.Viewport>) {
+  const slots = useSlots()
+  return (
+    <div className={s.viewportWrapper({ class: slots.viewportWrapper })}>
+      <NavPrimitive.Viewport
+        data-slot="navigation-menu-viewport"
+        className={s.viewport({ class: [slots.viewport, className] })}
+        {...props}
+      />
+    </div>
+  )
+}
+
+export interface NavigationMenuLinkProps
+  extends Omit<ComponentProps<typeof NavPrimitive.Link>, 'href'> {
+  /** Rendered through the provider's `linkComponent`, so it uses your router. */
+  href?: string
+}
+
+/**
+ * A top-level link (no panel). Marked active automatically from the provider's `router`;
+ * set `active` to override.
+ */
+export function NavigationMenuLink({
+  href,
+  active: activeProp,
+  className,
+  children,
+  ...props
+}: NavigationMenuLinkProps) {
+  const slots = useSlots()
+  const Link = useLinkComponent()
+  const active = useIsActive(href, { explicit: activeProp })
+  const cls = s.link({ class: [slots.link, className] })
+  if (href === undefined) {
+    return (
+      <NavPrimitive.Link
+        data-slot="navigation-menu-link"
+        className={cls}
+        active={active}
+        {...props}
+      >
+        {children}
+      </NavPrimitive.Link>
+    )
+  }
+  return (
+    <NavPrimitive.Link data-slot="navigation-menu-link" asChild active={active} {...props}>
+      <Link href={href} className={cls}>
+        {children}
+      </Link>
+    </NavPrimitive.Link>
+  )
+}
+
+export interface NavigationMenuCardProps {
+  href: string
+  title: ReactNode
+  description?: ReactNode
+  icon?: ReactNode
+  className?: string
+}
+
+/** A link tile for mega-menu panels: icon, title and one line of description. */
+export function NavigationMenuCard({
+  href,
+  title,
+  description,
+  icon,
+  className,
+}: NavigationMenuCardProps) {
+  const slots = useSlots()
+  const Link = useLinkComponent()
+  return (
+    <NavPrimitive.Link data-slot="navigation-menu-card" asChild>
+      <Link href={href} className={s.card({ class: [slots.card, className] })}>
+        {icon && (
+          <span className={s.cardIcon({ class: slots.cardIcon })} aria-hidden="true">
+            {icon}
+          </span>
+        )}
+        <span className={s.cardText({ class: slots.cardText })}>
+          <span className={s.cardTitle({ class: slots.cardTitle })}>{title}</span>
+          {description && (
+            <span className={s.cardDescription({ class: slots.cardDescription })}>
+              {description}
+            </span>
+          )}
+        </span>
+      </Link>
+    </NavPrimitive.Link>
+  )
+}

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

@@ -0,0 +1,2 @@
+export { NumberInput, type NumberInputProps } from './number-input'
+export { type NumberInputVariants, numberInputStyles } from './number-input.styles'

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

@@ -0,0 +1,41 @@
+import type { StylesEntry } from '../../utils/registry'
+import { focusRing } from '../../utils/styles'
+import { tv, type VariantProps } from '../../utils/tv'
+import { fieldControl } from '../input/input.styles'
+
+export const numberInputStyles = tv({
+  slots: {
+    root: [
+      ...fieldControl,
+      'flex items-center gap-2 pl-3',
+      'focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/20',
+      'data-invalid:focus-within:ring-danger/20',
+      'has-[input:disabled]:cursor-not-allowed has-[input:disabled]:opacity-50',
+    ],
+    input:
+      'h-full w-full min-w-0 bg-transparent tabular-nums text-foreground outline-none placeholder:text-faint-foreground disabled:cursor-not-allowed',
+    adornment: 'flex shrink-0 items-center text-faint-foreground [&>svg]:size-4',
+    steppers: 'flex h-full shrink-0 items-stretch border-l border-input',
+    stepper: [
+      'inline-flex w-8 cursor-pointer items-center justify-center text-muted-foreground hover:bg-muted hover:text-foreground',
+      'disabled:pointer-events-none disabled:opacity-40 [&>svg]:size-3.5 last:rounded-r-[calc(var(--radius-md)-1px)]',
+      focusRing,
+    ],
+  },
+  variants: {
+    size: {
+      sm: { root: 'h-(--glyph-control-sm) text-small' },
+      md: { root: 'h-(--glyph-control-md) text-small' },
+      lg: { root: 'h-(--glyph-control-lg) text-body', stepper: 'w-10' },
+    },
+  },
+  defaultVariants: { size: 'md' },
+})
+
+export type NumberInputVariants = VariantProps<typeof numberInputStyles>
+
+declare module '@glyphui/tokens' {
+  interface GlyphComponentRegistry {
+    NumberInput: StylesEntry<typeof numberInputStyles>
+  }
+}

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

@@ -0,0 +1,211 @@
+import { type ComponentProps, type KeyboardEvent, type ReactNode, useState } from 'react'
+import { useComponentConfig } from '../../hooks/use-component-config'
+import { useControllableState } from '../../hooks/use-controllable-state'
+import { useFieldControl } from '../field/field-context'
+import { type NumberInputVariants, numberInputStyles } from './number-input.styles'
+
+export interface NumberInputProps
+  extends Omit<
+      ComponentProps<'input'>,
+      'value' | 'defaultValue' | 'onChange' | 'size' | 'type' | 'min' | 'max' | 'step' | 'prefix'
+    >,
+    NumberInputVariants {
+  /** `null` means empty. */
+  value?: number | null
+  defaultValue?: number | null
+  onValueChange?: (value: number | null) => void
+  min?: number
+  max?: number
+  /** Amount added or removed by the steppers and arrow keys. Shift multiplies by 10. Default 1. */
+  step?: number
+  /** Display formatting when the field isn't focused, e.g. `{ style: 'currency', currency: 'USD' }`. */
+  formatOptions?: Intl.NumberFormatOptions
+  /** Locale for formatting. Defaults to the browser's. */
+  locale?: string
+  prefix?: ReactNode
+  /** Content after the number, before the steppers, e.g. a unit. */
+  suffix?: ReactNode
+  /** Hide the − / + buttons. */
+  hideSteppers?: boolean
+  /** Classes for the `<input>` element. `className` styles the outer frame. */
+  inputClassName?: string
+}
+
+function clamp(value: number, min?: number, max?: number) {
+  return Math.min(max ?? Number.POSITIVE_INFINITY, Math.max(min ?? Number.NEGATIVE_INFINITY, value))
+}
+
+/** Parses user text leniently: keeps digits, one leading minus and the decimal point. */
+function parse(text: string): number | null {
+  const cleaned = text.replace(/[^\d.-]/g, '').replace(/(?!^)-/g, '')
+  if (cleaned === '' || cleaned === '-' || cleaned === '.') return null
+  const n = Number(cleaned)
+  return Number.isFinite(n) ? n : null
+}
+
+/** Round away float noise from repeated steps (0.1 + 0.2). */
+function roundToStep(value: number, step: number) {
+  const decimals = (String(step).split('.')[1] ?? '').length
+  return Number(value.toFixed(Math.min(decimals + 2, 10)))
+}
+
+/**
+ * A number field with − / + steppers, arrow-key stepping, min/max clamping on blur, and
+ * locale formatting when not focused. The value is a `number`, never a string.
+ */
+export function NumberInput(inProps: NumberInputProps) {
+  const [props, slots] = useComponentConfig('NumberInput', useFieldControl(inProps))
+  const {
+    value: valueProp,
+    defaultValue = null,
+    onValueChange,
+    min,
+    max,
+    step = 1,
+    formatOptions,
+    locale,
+    prefix,
+    suffix,
+    hideSteppers = false,
+    size,
+    className,
+    inputClassName,
+    disabled,
+    readOnly,
+    onBlur,
+    onFocus,
+    onKeyDown,
+    ...rest
+  } = props
+  const [value, setValue] = useControllableState<number | null>({
+    value: valueProp,
+    defaultValue,
+    onChange: onValueChange,
+  })
+  const [draft, setDraft] = useState<string | null>(null)
+  const s = numberInputStyles({ size })
+  const invalid = rest['aria-invalid'] === true || rest['aria-invalid'] === 'true'
+
+  const display =
+    draft ??
+    (value === null || value === undefined
+      ? ''
+      : formatOptions
+        ? new Intl.NumberFormat(locale, formatOptions).format(value)
+        : String(value))
+
+  const commit = (next: number | null) => {
+    setValue(next === null ? null : roundToStep(clamp(next, min, max), step))
+  }
+
+  const stepBy = (direction: 1 | -1, multiplier = 1) => {
+    const base = draft !== null ? parse(draft) : value
+    commit((base ?? min ?? 0) + direction * step * multiplier)
+    setDraft(null)
+  }
+
+  const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
+    onKeyDown?.(event)
+    if (event.defaultPrevented || readOnly) return
+    const multiplier = event.shiftKey ? 10 : 1
+    if (event.key === 'ArrowUp') {
+      event.preventDefault()
+      stepBy(1, multiplier)
+    } else if (event.key === 'ArrowDown') {
+      event.preventDefault()
+      stepBy(-1, multiplier)
+    } else if (event.key === 'Home' && min !== undefined) {
+      event.preventDefault()
+      commit(min)
+      setDraft(null)
+    } else if (event.key === 'End' && max !== undefined) {
+      event.preventDefault()
+      commit(max)
+      setDraft(null)
+    } else if (event.key === 'Enter' && draft !== null) {
+      commit(parse(draft))
+      setDraft(null)
+    }
+  }
+
+  const atMin = value !== null && value !== undefined && min !== undefined && value <= min
+  const atMax = value !== null && value !== undefined && max !== undefined && value >= max
+
+  return (
+    <div
+      data-slot="number-input"
+      data-invalid={invalid || undefined}
+      className={s.root({ class: [slots.root, className] })}
+    >
+      {prefix && <span className={s.adornment({ class: slots.adornment })}>{prefix}</span>}
+      <input
+        type="text"
+        inputMode="decimal"
+        role="spinbutton"
+        aria-valuenow={value ?? undefined}
+        aria-valuemin={min}
+        aria-valuemax={max}
+        autoComplete="off"
+        disabled={disabled}
+        readOnly={readOnly}
+        value={display}
+        className={s.input({ class: [slots.input, inputClassName] })}
+        onFocus={(event) => {
+          setDraft(value === null || value === undefined ? '' : String(value))
+          onFocus?.(event)
+        }}
+        onChange={(event) => setDraft(event.target.value)}
+        onBlur={(event) => {
+          if (draft !== null) commit(parse(draft))
+          setDraft(null)
+          onBlur?.(event)
+        }}
+        onKeyDown={handleKeyDown}
+        {...rest}
+      />
+      {suffix && <span className={s.adornment({ class: slots.adornment })}>{suffix}</span>}
+      {!hideSteppers && (
+        <span className={s.steppers({ class: slots.steppers })}>
+          <button
+            type="button"
+            tabIndex={-1}
+            aria-label="Decrease"
+            disabled={disabled || readOnly || atMin}
+            className={s.stepper({ class: slots.stepper })}
+            onClick={() => stepBy(-1)}
+          >
+            <svg
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              aria-hidden="true"
+            >
+              <path d="M5 12h14" />
+            </svg>
+          </button>
+          <button
+            type="button"
+            tabIndex={-1}
+            aria-label="Increase"
+            disabled={disabled || readOnly || atMax}
+            className={s.stepper({ class: slots.stepper })}
+            onClick={() => stepBy(1)}
+          >
+            <svg
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              aria-hidden="true"
+            >
+              <path d="M12 5v14M5 12h14" />
+            </svg>
+          </button>
+        </span>
+      )}
+    </div>
+  )
+}

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

@@ -0,0 +1,7 @@
+export {
+  PasswordInput,
+  type PasswordInputProps,
+  type PasswordStrength,
+  passwordStrength,
+} from './password-input'
+export { passwordInputStyles } from './password-input.styles'

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

@@ -0,0 +1,30 @@
+import type { StylesEntry } from '../../utils/registry'
+import { focusRing } from '../../utils/styles'
+import { tv } from '../../utils/tv'
+
+export const passwordInputStyles = tv({
+  slots: {
+    root: 'grid gap-1.5',
+    toggle: [
+      '-mr-1 inline-flex size-7 cursor-pointer items-center justify-center rounded-sm text-faint-foreground hover:bg-muted hover:text-foreground [&>svg]:size-4',
+      focusRing,
+    ],
+    meter: 'flex items-center gap-2',
+    bars: 'grid flex-1 grid-cols-3 gap-1',
+    bar: 'h-1 rounded-pill bg-muted transition-colors duration-(--glyph-duration-base)',
+    label: 'w-14 text-right text-caption text-muted-foreground',
+  },
+  variants: {
+    strength: {
+      weak: { label: 'text-danger-text' },
+      fair: { label: 'text-warning-text' },
+      strong: { label: 'text-success-text' },
+    },
+  },
+})
+
+declare module '@glyphui/tokens' {
+  interface GlyphComponentRegistry {
+    PasswordInput: StylesEntry<typeof passwordInputStyles>
+  }
+}