@glyphui/ui 0.1.1 → 0.3.0

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

@@ -0,0 +1,198 @@
+import { NavigationMenu as NavPrimitive } from 'radix-ui'
+import type { ComponentProps, ReactNode } from 'react'
+import { useComponentConfig } from '../../hooks/use-component-config'
+import { 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). Set `active` for the current page. */
+export function NavigationMenuLink({
+  href,
+  className,
+  children,
+  ...props
+}: NavigationMenuLinkProps) {
+  const slots = useSlots()
+  const Link = useLinkComponent()
+  const cls = s.link({ class: [slots.link, className] })
+  if (href === undefined) {
+    return (
+      <NavPrimitive.Link data-slot="navigation-menu-link" className={cls} {...props}>
+        {children}
+      </NavPrimitive.Link>
+    )
+  }
+  return (
+    <NavPrimitive.Link data-slot="navigation-menu-link" asChild {...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/pagination/index.ts

@@ -0,0 +1,3 @@
+export { Pagination, type PaginationProps } from './pagination'
+export { type PaginationVariants, paginationStyles } from './pagination.styles'
+export { type PaginationItem, paginationRange } from './pagination-range'

package/src/components/pagination/pagination-range.ts

@@ -0,0 +1,35 @@
+export type PaginationItem = number | 'ellipsis'
+
+/**
+ * The page numbers to show, with `'ellipsis'` for gaps. Always includes the first and
+ * last page and `siblingCount` pages on each side of the current one, and keeps the
+ * number of items constant so the control doesn't jump in width.
+ *
+ * `paginationRange(6, 20)` → `[1, 'ellipsis', 5, 6, 7, 'ellipsis', 20]`
+ */
+export function paginationRange(
+  page: number,
+  pageCount: number,
+  siblingCount = 1,
+): PaginationItem[] {
+  const count = Math.max(0, Math.floor(pageCount))
+  if (count === 0) return []
+  const current = Math.min(Math.max(1, Math.floor(page)), count)
+  // first + last + current + 2 ellipses + siblings on both sides
+  const slots = siblingCount * 2 + 5
+  if (count <= slots) return range(1, count)
+
+  const left = Math.max(current - siblingCount, 1)
+  const right = Math.min(current + siblingCount, count)
+  const showLeftGap = left > 2
+  const showRightGap = right < count - 1
+  const edge = 3 + siblingCount * 2
+
+  if (!showLeftGap && showRightGap) return [...range(1, edge), 'ellipsis', count]
+  if (showLeftGap && !showRightGap) return [1, 'ellipsis', ...range(count - edge + 1, count)]
+  return [1, 'ellipsis', ...range(left, right), 'ellipsis', count]
+}
+
+function range(from: number, to: number): number[] {
+  return Array.from({ length: to - from + 1 }, (_, i) => from + i)
+}

package/src/components/pagination/pagination.styles.ts

@@ -0,0 +1,41 @@
+import type { StylesEntry } from '../../utils/registry'
+import { focusRing, transition } from '../../utils/styles'
+import { tv, type VariantProps } from '../../utils/tv'
+
+export const paginationStyles = tv({
+  slots: {
+    root: 'flex',
+    list: 'flex flex-wrap items-center gap-1',
+    item: [
+      'inline-flex shrink-0 cursor-pointer select-none items-center justify-center rounded-md font-medium tabular-nums text-muted-foreground',
+      transition,
+      focusRing,
+      'hover:bg-muted hover:text-foreground',
+      'aria-[current=page]:bg-primary aria-[current=page]:text-primary-foreground aria-[current=page]:shadow-xs',
+      'disabled:pointer-events-none disabled:opacity-40 aria-disabled:pointer-events-none aria-disabled:opacity-40',
+      '[&>svg]:size-4',
+    ],
+    ellipsis: 'inline-flex items-center justify-center text-faint-foreground',
+  },
+  variants: {
+    size: {
+      sm: {
+        item: 'h-(--glyph-control-sm) min-w-(--glyph-control-sm) px-1.5 text-small',
+        ellipsis: 'h-(--glyph-control-sm) w-(--glyph-control-sm) text-small',
+      },
+      md: {
+        item: 'h-(--glyph-control-md) min-w-(--glyph-control-md) px-2 text-small',
+        ellipsis: 'h-(--glyph-control-md) w-(--glyph-control-md) text-small',
+      },
+    },
+  },
+  defaultVariants: { size: 'md' },
+})
+
+export type PaginationVariants = VariantProps<typeof paginationStyles>
+
+declare module '@glyphui/tokens' {
+  interface GlyphComponentRegistry {
+    Pagination: StylesEntry<typeof paginationStyles>
+  }
+}

package/src/components/pagination/pagination.tsx

@@ -0,0 +1,130 @@
+import type { ComponentProps, ReactNode } from 'react'
+import { useComponentConfig } from '../../hooks/use-component-config'
+import { ChevronLeftIcon, ChevronRightIcon } from '../../internal/icons'
+import { useLinkComponent } from '../../provider/glyph-context'
+import { type PaginationVariants, paginationStyles } from './pagination.styles'
+import { paginationRange } from './pagination-range'
+
+const ChevronsLeftIcon = () => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    aria-hidden="true"
+  >
+    <path d="m11 17-5-5 5-5M18 17l-5-5 5-5" />
+  </svg>
+)
+const ChevronsRightIcon = () => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    aria-hidden="true"
+  >
+    <path d="m6 17 5-5-5-5M13 17l5-5-5-5" />
+  </svg>
+)
+
+export interface PaginationProps
+  extends Omit<ComponentProps<'nav'>, 'onChange'>,
+    PaginationVariants {
+  /** Current page, starting at 1. */
+  page: number
+  pageCount: number
+  onPageChange?: (page: number) => void
+  /** Render pages as links (through the provider's linkComponent) instead of buttons. */
+  getHref?: (page: number) => string
+  /** Pages shown on each side of the current page. Default 1. */
+  siblingCount?: number
+  /** Show first / last page buttons. Default true. */
+  showEdges?: boolean
+}
+
+/** Page navigation for long lists. Controlled: you own `page`. */
+export function Pagination(inProps: PaginationProps) {
+  const [props, slots] = useComponentConfig('Pagination', inProps)
+  const {
+    page,
+    pageCount,
+    onPageChange,
+    getHref,
+    siblingCount = 1,
+    showEdges = true,
+    size,
+    className,
+    ...rest
+  } = props
+  const Link = useLinkComponent()
+  const s = paginationStyles({ size })
+  const itemClass = s.item({ class: slots.item })
+  const current = Math.min(Math.max(1, page), Math.max(1, pageCount))
+
+  const control = (
+    target: number,
+    label: string,
+    content: ReactNode,
+    options: { current?: boolean } = {},
+  ) => {
+    const disabled = target < 1 || target > pageCount || (target === current && !options.current)
+    const shared = {
+      'aria-label': label,
+      'aria-current': options.current ? ('page' as const) : undefined,
+      className: itemClass,
+    }
+    if (getHref) {
+      if (disabled) {
+        return (
+          <span aria-disabled="true" {...shared}>
+            {content}
+          </span>
+        )
+      }
+      return (
+        <Link href={getHref(target)} onClick={() => onPageChange?.(target)} {...shared}>
+          {content}
+        </Link>
+      )
+    }
+    return (
+      <button type="button" disabled={disabled} onClick={() => onPageChange?.(target)} {...shared}>
+        {content}
+      </button>
+    )
+  }
+
+  return (
+    <nav
+      aria-label="Pagination"
+      data-slot="pagination"
+      className={s.root({ class: [slots.root, className] })}
+      {...rest}
+    >
+      <ul className={s.list({ class: slots.list })}>
+        {showEdges && <li>{control(1, 'First page', <ChevronsLeftIcon />)}</li>}
+        <li>{control(current - 1, 'Previous page', <ChevronLeftIcon />)}</li>
+        {paginationRange(current, pageCount, siblingCount).map((item, index) =>
+          item === 'ellipsis' ? (
+            <li
+              key={`gap-${index}`}
+              className={s.ellipsis({ class: slots.ellipsis })}
+              aria-hidden="true"
+            >
+              …
+            </li>
+          ) : (
+            <li key={item}>{control(item, `Page ${item}`, item, { current: item === current })}</li>
+          ),
+        )}
+        <li>{control(current + 1, 'Next page', <ChevronRightIcon />)}</li>
+        {showEdges && <li>{control(pageCount, 'Last page', <ChevronsRightIcon />)}</li>}
+      </ul>
+    </nav>
+  )
+}

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'