@glyphui/ui 0.2.0 → 0.3.0

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,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/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' },
+      fair: { label: 'text-warning' },
+      strong: { label: 'text-success' },
+    },
+  },
+})
+
+declare module '@glyphui/tokens' {
+  interface GlyphComponentRegistry {
+    PasswordInput: StylesEntry<typeof passwordInputStyles>
+  }
+}

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

@@ -0,0 +1,127 @@
+import { useState } from 'react'
+import { useComponentConfig } from '../../hooks/use-component-config'
+import { Input, type InputProps } from '../input/input'
+import { passwordInputStyles } from './password-input.styles'
+
+export type PasswordStrength = 'weak' | 'fair' | 'strong'
+
+/**
+ * A quick strength estimate from length and character variety. A hint for users,
+ * not a security check: enforce real rules on the server.
+ */
+export function passwordStrength(password: string): { score: number; strength: PasswordStrength } {
+  let score = 0
+  if (password.length >= 8) score++
+  if (password.length >= 12) score++
+  if (/[a-z]/.test(password) && /[A-Z]/.test(password)) score++
+  if (/\d/.test(password)) score++
+  if (/[^A-Za-z0-9]/.test(password)) score++
+  const strength: PasswordStrength = score >= 4 ? 'strong' : score >= 3 ? 'fair' : 'weak'
+  return { score, strength }
+}
+
+const filled: Record<PasswordStrength, number> = { weak: 1, fair: 2, strong: 3 }
+const barColor: Record<PasswordStrength, string> = {
+  weak: 'bg-danger',
+  fair: 'bg-warning',
+  strong: 'bg-success',
+}
+const labels: Record<PasswordStrength, string> = { weak: 'Weak', fair: 'Fair', strong: 'Strong' }
+
+export interface PasswordInputProps extends Omit<InputProps, 'type' | 'suffix'> {
+  /** Show a strength meter under the field once the user starts typing. */
+  showStrength?: boolean
+  /** Start with the password visible. */
+  defaultVisible?: boolean
+}
+
+function EyeIcon({ off }: { off: boolean }) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      {off ? (
+        <>
+          <path d="M10.7 5.1A10.4 10.4 0 0 1 12 5c7 0 10 7 10 7a13 13 0 0 1-1.7 2.7M6.6 6.6A13.5 13.5 0 0 0 2 12s3 7 10 7a9.7 9.7 0 0 0 5.4-1.6" />
+          <path d="M9.9 9.9a3 3 0 1 0 4.2 4.2M2 2l20 20" />
+        </>
+      ) : (
+        <>
+          <path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7S2 12 2 12Z" />
+          <circle cx="12" cy="12" r="3" />
+        </>
+      )}
+    </svg>
+  )
+}
+
+/** A password field with a show/hide toggle and an optional strength meter. */
+export function PasswordInput(inProps: PasswordInputProps) {
+  const [props, slots] = useComponentConfig('PasswordInput', inProps)
+  const {
+    showStrength = false,
+    defaultVisible = false,
+    value,
+    defaultValue,
+    onChange,
+    className,
+    ...rest
+  } = props
+  const [visible, setVisible] = useState(defaultVisible)
+  const [typed, setTyped] = useState(String(defaultValue ?? ''))
+  const current = value !== undefined ? String(value) : typed
+  const { strength } = passwordStrength(current)
+  const s = passwordInputStyles({ strength })
+
+  return (
+    <div data-slot="password-input" className={s.root({ class: [slots.root, className] })}>
+      <Input
+        {...rest}
+        {...(value !== undefined && { value })}
+        {...(defaultValue !== undefined && { defaultValue })}
+        type={visible ? 'text' : 'password'}
+        autoComplete={rest.autoComplete ?? 'current-password'}
+        spellCheck={false}
+        onChange={(event) => {
+          setTyped(event.target.value)
+          onChange?.(event)
+        }}
+        suffix={
+          <button
+            type="button"
+            aria-label={visible ? 'Hide password' : 'Show password'}
+            aria-pressed={visible}
+            disabled={rest.disabled}
+            className={s.toggle({ class: slots.toggle })}
+            onClick={() => setVisible((v) => !v)}
+          >
+            <EyeIcon off={visible} />
+          </button>
+        }
+      />
+      {showStrength && current.length > 0 && (
+        <div className={s.meter({ class: slots.meter })}>
+          <div className={s.bars({ class: slots.bars })} aria-hidden="true">
+            {[1, 2, 3].map((n) => (
+              <span
+                key={n}
+                className={s.bar({
+                  class: [slots.bar, n <= filled[strength] && barColor[strength]],
+                })}
+              />
+            ))}
+          </div>
+          <span className={s.label({ class: slots.label })} aria-live="polite">
+            {labels[strength]}
+          </span>
+        </div>
+      )}
+    </div>
+  )
+}

package/src/components/resizable/index.ts

@@ -0,0 +1,9 @@
+export {
+  ResizableHandle,
+  type ResizableHandleProps,
+  ResizablePanel,
+  ResizablePanelGroup,
+  type ResizablePanelGroupProps,
+  type ResizablePanelProps,
+} from './resizable'
+export { type ResizableVariants, resizableStyles } from './resizable.styles'