@glyphui/ui 0.1.1 → 0.3.0

package/src/components/grid/grid.tsx

@@ -0,0 +1,144 @@
+import { Slot } from 'radix-ui'
+import type { ComponentProps } from 'react'
+import { useComponentConfig } from '../../hooks/use-component-config'
+import type { StylesEntry } from '../../utils/registry'
+import { tv, type VariantProps } from '../../utils/tv'
+
+type Cols = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
+type Breakpoint = 'base' | 'sm' | 'md' | 'lg' | 'xl'
+
+// Literal class names per breakpoint so Tailwind's scanner generates them.
+const colClasses: Record<Breakpoint, Record<Cols, string>> = {
+  base: {
+    1: 'grid-cols-1',
+    2: 'grid-cols-2',
+    3: 'grid-cols-3',
+    4: 'grid-cols-4',
+    5: 'grid-cols-5',
+    6: 'grid-cols-6',
+    7: 'grid-cols-7',
+    8: 'grid-cols-8',
+    9: 'grid-cols-9',
+    10: 'grid-cols-10',
+    11: 'grid-cols-11',
+    12: 'grid-cols-12',
+  },
+  sm: {
+    1: 'sm:grid-cols-1',
+    2: 'sm:grid-cols-2',
+    3: 'sm:grid-cols-3',
+    4: 'sm:grid-cols-4',
+    5: 'sm:grid-cols-5',
+    6: 'sm:grid-cols-6',
+    7: 'sm:grid-cols-7',
+    8: 'sm:grid-cols-8',
+    9: 'sm:grid-cols-9',
+    10: 'sm:grid-cols-10',
+    11: 'sm:grid-cols-11',
+    12: 'sm:grid-cols-12',
+  },
+  md: {
+    1: 'md:grid-cols-1',
+    2: 'md:grid-cols-2',
+    3: 'md:grid-cols-3',
+    4: 'md:grid-cols-4',
+    5: 'md:grid-cols-5',
+    6: 'md:grid-cols-6',
+    7: 'md:grid-cols-7',
+    8: 'md:grid-cols-8',
+    9: 'md:grid-cols-9',
+    10: 'md:grid-cols-10',
+    11: 'md:grid-cols-11',
+    12: 'md:grid-cols-12',
+  },
+  lg: {
+    1: 'lg:grid-cols-1',
+    2: 'lg:grid-cols-2',
+    3: 'lg:grid-cols-3',
+    4: 'lg:grid-cols-4',
+    5: 'lg:grid-cols-5',
+    6: 'lg:grid-cols-6',
+    7: 'lg:grid-cols-7',
+    8: 'lg:grid-cols-8',
+    9: 'lg:grid-cols-9',
+    10: 'lg:grid-cols-10',
+    11: 'lg:grid-cols-11',
+    12: 'lg:grid-cols-12',
+  },
+  xl: {
+    1: 'xl:grid-cols-1',
+    2: 'xl:grid-cols-2',
+    3: 'xl:grid-cols-3',
+    4: 'xl:grid-cols-4',
+    5: 'xl:grid-cols-5',
+    6: 'xl:grid-cols-6',
+    7: 'xl:grid-cols-7',
+    8: 'xl:grid-cols-8',
+    9: 'xl:grid-cols-9',
+    10: 'xl:grid-cols-10',
+    11: 'xl:grid-cols-11',
+    12: 'xl:grid-cols-12',
+  },
+}
+
+export type GridCols = Cols | Partial<Record<Breakpoint, Cols>>
+
+function colsToClasses(cols: GridCols): string {
+  if (typeof cols === 'number') return colClasses.base[cols]
+  return (Object.entries(cols) as [Breakpoint, Cols][])
+    .map(([bp, n]) => colClasses[bp][n])
+    .join(' ')
+}
+
+export const gridStyles = tv({
+  slots: { base: 'grid' },
+  variants: {
+    gap: {
+      0: { base: 'gap-0' },
+      1: { base: 'gap-1' },
+      2: { base: 'gap-2' },
+      3: { base: 'gap-3' },
+      4: { base: 'gap-4' },
+      5: { base: 'gap-5' },
+      6: { base: 'gap-6' },
+      8: { base: 'gap-8' },
+      10: { base: 'gap-10' },
+      12: { base: 'gap-12' },
+    },
+    align: {
+      start: { base: 'items-start' },
+      center: { base: 'items-center' },
+      end: { base: 'items-end' },
+      stretch: { base: 'items-stretch' },
+    },
+  },
+  defaultVariants: { gap: 4 },
+})
+
+declare module '@glyphui/tokens' {
+  interface GlyphComponentRegistry {
+    Grid: StylesEntry<typeof gridStyles>
+  }
+}
+
+export interface GridProps extends ComponentProps<'div'>, VariantProps<typeof gridStyles> {
+  /** Column count, or per breakpoint: `{ base: 1, sm: 2, lg: 4 }`. Default 1. */
+  cols?: GridCols
+  asChild?: boolean
+}
+
+/** Responsive equal-width columns with spacing from the scale. */
+export function Grid(inProps: GridProps) {
+  const [props, slots] = useComponentConfig('Grid', inProps)
+  const { cols = 1, gap, align, asChild, className, ...rest } = props
+  const Comp = asChild ? Slot.Root : 'div'
+  return (
+    <Comp
+      data-slot="grid"
+      className={gridStyles({ gap, align }).base({
+        class: [colsToClasses(cols), slots.base, className],
+      })}
+      {...rest}
+    />
+  )
+}

package/src/components/grid/index.ts

@@ -0,0 +1 @@
+export { Grid, type GridCols, type GridProps, gridStyles } from './grid'

package/src/components/hover-card/hover-card.tsx

@@ -0,0 +1,41 @@
+import { HoverCard as HoverCardPrimitive } from 'radix-ui'
+import type { ComponentProps } from 'react'
+import { useComponentConfig } from '../../hooks/use-component-config'
+import type { StylesEntry } from '../../utils/registry'
+import { popover } from '../../utils/styles'
+import { tv } from '../../utils/tv'
+
+export const hoverCardStyles = tv({
+  slots: {
+    content: [popover, 'w-72 max-w-[calc(100vw-2rem)] p-4 text-small outline-none'],
+  },
+})
+
+declare module '@glyphui/tokens' {
+  interface GlyphComponentRegistry {
+    HoverCard: StylesEntry<typeof hoverCardStyles>
+  }
+}
+
+/**
+ * A rich preview shown while hovering or focusing a link, such as a user or repository card.
+ * Sighted mouse users only see it on hover; keep the same information reachable elsewhere.
+ */
+export const HoverCard = HoverCardPrimitive.Root
+export const HoverCardTrigger = HoverCardPrimitive.Trigger
+
+export function HoverCardContent(inProps: ComponentProps<typeof HoverCardPrimitive.Content>) {
+  const [props, slots] = useComponentConfig('HoverCard', inProps)
+  const { sideOffset = 6, align = 'center', className, ...rest } = props
+  return (
+    <HoverCardPrimitive.Portal>
+      <HoverCardPrimitive.Content
+        data-slot="hover-card-content"
+        sideOffset={sideOffset}
+        align={align}
+        className={hoverCardStyles().content({ class: [slots.content, className] })}
+        {...rest}
+      />
+    </HoverCardPrimitive.Portal>
+  )
+}

package/src/components/hover-card/index.ts

@@ -0,0 +1 @@
+export { HoverCard, HoverCardContent, HoverCardTrigger, hoverCardStyles } from './hover-card'

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

@@ -0,0 +1,10 @@
+export { REGEXP_ONLY_CHARS, REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS } from 'input-otp'
+export {
+  InputOTP,
+  InputOTPGroup,
+  type InputOTPProps,
+  InputOTPSeparator,
+  InputOTPSlot,
+  type InputOTPSlotProps,
+} from './input-otp'
+export { type InputOTPVariants, inputOtpStyles } from './input-otp.styles'

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

@@ -0,0 +1,38 @@
+import type { StylesEntry } from '../../utils/registry'
+import { transition } from '../../utils/styles'
+import { tv, type VariantProps } from '../../utils/tv'
+
+export const inputOtpStyles = tv({
+  slots: {
+    root: 'flex items-center gap-2 has-disabled:opacity-50',
+    input: 'disabled:cursor-not-allowed',
+    group: 'flex items-center',
+    slot: [
+      'relative flex items-center justify-center border-input bg-surface font-medium tabular-nums text-foreground shadow-xs',
+      'border-y-(length:--glyph-border-width) border-r-(length:--glyph-border-width)',
+      'first:rounded-l-md first:border-l-(length:--glyph-border-width) last:rounded-r-md',
+      'data-[active=true]:z-10 data-[active=true]:border-ring data-[active=true]:ring-3 data-[active=true]:ring-ring/20',
+      'aria-invalid:border-danger',
+      transition,
+    ],
+    caret: 'pointer-events-none absolute inset-0 flex items-center justify-center',
+    caretBar: 'h-4 w-px animate-pulse bg-foreground',
+    separator: 'flex items-center text-faint-foreground [&>svg]:size-4',
+  },
+  variants: {
+    size: {
+      sm: { slot: 'size-8 text-small' },
+      md: { slot: 'size-10 text-body' },
+      lg: { slot: 'size-12 text-h4' },
+    },
+  },
+  defaultVariants: { size: 'md' },
+})
+
+export type InputOTPVariants = VariantProps<typeof inputOtpStyles>
+
+declare module '@glyphui/tokens' {
+  interface GlyphComponentRegistry {
+    InputOTP: StylesEntry<typeof inputOtpStyles>
+  }
+}

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

@@ -0,0 +1,116 @@
+import { OTPInput, OTPInputContext, type OTPInputProps } from 'input-otp'
+import { type ComponentProps, createContext, type ReactNode, useContext } from 'react'
+import { type SlotClasses, useComponentConfig } from '../../hooks/use-component-config'
+import { useFieldControl } from '../field/field-context'
+import { type InputOTPVariants, inputOtpStyles } from './input-otp.styles'
+
+type Styles = ReturnType<typeof inputOtpStyles>
+const PartsContext = createContext<{
+  s: Styles
+  slots: SlotClasses<'InputOTP'>
+  invalid: boolean
+} | null>(null)
+
+function useParts() {
+  return useContext(PartsContext) ?? { s: inputOtpStyles(), slots: {}, invalid: false }
+}
+
+export type InputOTPProps = Omit<OTPInputProps, 'render' | 'children' | 'maxLength'> &
+  InputOTPVariants & {
+    /** Number of characters. Default 6. */
+    length?: number
+    /** Custom slot layout (InputOTPGroup, InputOTPSlot, InputOTPSeparator). Defaults to one group of `length` slots. */
+    children?: ReactNode
+  }
+
+/**
+ * One-time code input: one box per character, paste support, and autofill from SMS on
+ * mobile. Built on input-otp. Restrict characters with `pattern`, e.g. `REGEXP_ONLY_DIGITS`.
+ */
+export function InputOTP(inProps: InputOTPProps) {
+  const [props, slots] = useComponentConfig('InputOTP', useFieldControl(inProps))
+  const { length = 6, size, children, className, containerClassName, ...rest } = props
+  const s = inputOtpStyles({ size })
+  const invalid = rest['aria-invalid'] === true || rest['aria-invalid'] === 'true'
+  return (
+    <PartsContext.Provider value={{ s, slots, invalid }}>
+      <OTPInput
+        data-slot="input-otp"
+        maxLength={length}
+        autoComplete="one-time-code"
+        inputMode="numeric"
+        containerClassName={s.root({ class: [slots.root, containerClassName] })}
+        className={s.input({ class: [slots.input, className] })}
+        {...rest}
+      >
+        {children ?? (
+          <InputOTPGroup>
+            {Array.from({ length }, (_, index) => (
+              <InputOTPSlot key={index} index={index} />
+            ))}
+          </InputOTPGroup>
+        )}
+      </OTPInput>
+    </PartsContext.Provider>
+  )
+}
+
+export function InputOTPGroup({ className, ...props }: ComponentProps<'div'>) {
+  const { s, slots } = useParts()
+  return (
+    <div
+      data-slot="input-otp-group"
+      className={s.group({ class: [slots.group, className] })}
+      {...props}
+    />
+  )
+}
+
+export interface InputOTPSlotProps extends ComponentProps<'div'> {
+  /** Position of the character this box shows, starting at 0. */
+  index: number
+}
+
+export function InputOTPSlot({ index, className, ...props }: InputOTPSlotProps) {
+  const { s, slots, invalid } = useParts()
+  const slot = useContext(OTPInputContext).slots[index]
+  return (
+    <div
+      data-slot="input-otp-slot"
+      data-active={slot?.isActive ?? false}
+      aria-invalid={invalid || undefined}
+      className={s.slot({ class: [slots.slot, className] })}
+      {...props}
+    >
+      {slot?.char ?? slot?.placeholderChar}
+      {slot?.hasFakeCaret && (
+        <div className={s.caret({ class: slots.caret })}>
+          <div className={s.caretBar({ class: slots.caretBar })} />
+        </div>
+      )}
+    </div>
+  )
+}
+
+export function InputOTPSeparator({ className, ...props }: ComponentProps<'div'>) {
+  const { s, slots } = useParts()
+  return (
+    <div
+      data-slot="input-otp-separator"
+      aria-hidden="true"
+      className={s.separator({ class: [slots.separator, className] })}
+      {...props}
+    >
+      <svg
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        aria-hidden="true"
+      >
+        <path d="M6 12h12" />
+      </svg>
+    </div>
+  )
+}

package/src/components/link/index.ts

@@ -0,0 +1,2 @@
+export { Link, type LinkProps } from './link'
+export { type LinkVariants, linkStyles } from './link.styles'

package/src/components/link/link.styles.ts

@@ -0,0 +1,39 @@
+import type { StylesEntry } from '../../utils/registry'
+import { focusRing } from '../../utils/styles'
+import { tv, type VariantProps } from '../../utils/tv'
+
+export const linkStyles = tv({
+  slots: {
+    base: [
+      'inline-flex items-baseline gap-1 rounded-xs font-medium',
+      // Underline drawn as a background so it can animate its width.
+      'bg-[linear-gradient(currentColor,currentColor)] bg-[position:0_100%] bg-no-repeat',
+      'transition-[background-size,color] duration-(--glyph-duration-base) ease-standard',
+      focusRing,
+    ],
+    icon: 'size-3 shrink-0 self-center opacity-70',
+  },
+  variants: {
+    tone: {
+      default: { base: 'text-foreground' },
+      muted: { base: 'text-muted-foreground hover:text-foreground' },
+      primary: { base: 'text-primary' },
+    },
+    underline: {
+      hover: {
+        base: 'bg-[length:0%_1px] hover:bg-[length:100%_1px] focus-visible:bg-[length:100%_1px]',
+      },
+      always: { base: 'bg-[length:100%_1px] hover:bg-[length:100%_2px]' },
+      none: { base: 'bg-none' },
+    },
+  },
+  defaultVariants: { tone: 'primary', underline: 'hover' },
+})
+
+export type LinkVariants = VariantProps<typeof linkStyles>
+
+declare module '@glyphui/tokens' {
+  interface GlyphComponentRegistry {
+    Link: StylesEntry<typeof linkStyles>
+  }
+}

package/src/components/link/link.tsx

@@ -0,0 +1,62 @@
+import type { ComponentProps, ElementType } from 'react'
+import { useComponentConfig } from '../../hooks/use-component-config'
+import { useLinkComponent } from '../../provider/glyph-context'
+import { type LinkVariants, linkStyles } from './link.styles'
+
+const ExternalIcon = (props: { className?: string }) => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    aria-hidden="true"
+    {...props}
+  >
+    <path d="M7 17 17 7M7 7h10v10" />
+  </svg>
+)
+
+export interface LinkProps extends Omit<ComponentProps<'a'>, 'href'>, LinkVariants {
+  href: string
+  /** Opens in a new tab with `rel="noopener noreferrer"`, shows an arrow and announces it. */
+  external?: boolean
+}
+
+/**
+ * A text link with an animated underline. Internal links go through the provider's
+ * `linkComponent` (your router); external links render a plain `<a>`.
+ */
+export function Link(inProps: LinkProps) {
+  const [props, slots] = useComponentConfig('Link', inProps)
+  const { href, external = false, tone, underline, className, children, ...rest } = props
+  const RouterLink = useLinkComponent()
+  const s = linkStyles({ tone, underline })
+  const classes = s.base({ class: [slots.base, className] })
+
+  if (external) {
+    return (
+      <a
+        data-slot="link"
+        href={href}
+        target="_blank"
+        rel="noopener noreferrer"
+        className={classes}
+        {...rest}
+      >
+        {children}
+        <ExternalIcon className={s.icon({ class: slots.icon })} />{' '}
+        <span className="sr-only">(opens in a new tab)</span>
+      </a>
+    )
+  }
+
+  // Router links accept at least LinkComponentProps; extra anchor attributes pass through.
+  const Comp = RouterLink as ElementType
+  return (
+    <Comp data-slot="link" href={href} className={classes} {...rest}>
+      {children}
+    </Comp>
+  )
+}

package/src/components/modal/index.ts

@@ -0,0 +1,2 @@
+export { Modal, ModalClose, type ModalProps } from './modal'
+export { modalStyles } from './modal.styles'

package/src/components/modal/modal.styles.ts

@@ -0,0 +1,18 @@
+import type { StylesEntry } from '../../utils/registry'
+import { tv } from '../../utils/tv'
+
+/** Modal is built from Dialog parts; these slots add Modal-specific classes on top. */
+export const modalStyles = tv({
+  slots: {
+    content: '',
+    header: '',
+    body: 'grid gap-4',
+    footer: '',
+  },
+})
+
+declare module '@glyphui/tokens' {
+  interface GlyphComponentRegistry {
+    Modal: StylesEntry<typeof modalStyles>
+  }
+}

package/src/components/modal/modal.tsx

@@ -0,0 +1,86 @@
+import type { 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'> {
+  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
+  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,
+    onPointerDownOutside,
+    className,
+    children,
+    ...rest
+  } = props
+  const s = modalStyles()
+
+  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>
+        {children && <DialogBody className={s.body({ class: slots.body })}>{children}</DialogBody>}
+        {footer && (
+          <DialogFooter className={s.footer({ class: slots.footer })}>{footer}</DialogFooter>
+        )}
+      </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>
+  }
+}