@glyphui/ui 0.1.0 → 0.2.0

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>
+  }
+}

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

@@ -0,0 +1,230 @@
+import { DropdownMenu as MenuPrimitive } from 'radix-ui'
+import type { ComponentProps, ReactNode, SVGProps } from 'react'
+import { useComponentConfig } from '../../hooks/use-component-config'
+import { dropdownMenuStyles } from './dropdown-menu.styles'
+
+function useParts(tone?: 'default' | 'danger', inset?: boolean) {
+  const [, slots] = useComponentConfig('DropdownMenu', {})
+  return { s: dropdownMenuStyles({ tone, inset }), slots }
+}
+
+const svg = {
+  xmlns: 'http://www.w3.org/2000/svg',
+  viewBox: '0 0 24 24',
+  fill: 'none',
+  stroke: 'currentColor',
+  strokeWidth: 2,
+  strokeLinecap: 'round',
+  strokeLinejoin: 'round',
+} as const satisfies SVGProps<SVGSVGElement>
+
+const CheckIcon = () => (
+  <svg aria-hidden="true" {...svg}>
+    <path d="M20 6 9 17l-5-5" />
+  </svg>
+)
+const DotIcon = () => (
+  <svg aria-hidden="true" {...svg}>
+    <circle cx="12" cy="12" r="4" fill="currentColor" />
+  </svg>
+)
+const ChevronRightIcon = () => (
+  <svg aria-hidden="true" {...svg}>
+    <path d="m9 18 6-6-6-6" />
+  </svg>
+)
+
+/** A menu of actions opened from a button: row actions, account menus, "more" buttons. */
+export const DropdownMenu = MenuPrimitive.Root
+export const DropdownMenuTrigger = MenuPrimitive.Trigger
+export const DropdownMenuGroup = MenuPrimitive.Group
+export const DropdownMenuRadioGroup = MenuPrimitive.RadioGroup
+export const DropdownMenuSub = MenuPrimitive.Sub
+
+export function DropdownMenuContent(inProps: ComponentProps<typeof MenuPrimitive.Content>) {
+  const [props, slots] = useComponentConfig('DropdownMenu', inProps)
+  const { sideOffset = 6, align = 'start', className, ...rest } = props
+  const s = dropdownMenuStyles()
+  return (
+    <MenuPrimitive.Portal>
+      <MenuPrimitive.Content
+        data-slot="dropdown-menu-content"
+        sideOffset={sideOffset}
+        align={align}
+        className={s.content({ class: [slots.content, className] })}
+        {...rest}
+      />
+    </MenuPrimitive.Portal>
+  )
+}
+
+export interface DropdownMenuItemProps extends ComponentProps<typeof MenuPrimitive.Item> {
+  icon?: ReactNode
+  /** Keyboard hint shown at the end, e.g. "⌘D". Display only. */
+  shortcut?: ReactNode
+  /** `danger` for destructive actions. */
+  tone?: 'default' | 'danger'
+  /** Indent to line up with checkbox and radio items. */
+  inset?: boolean
+}
+
+export function DropdownMenuItem({
+  icon,
+  shortcut,
+  tone,
+  inset,
+  className,
+  children,
+  ...props
+}: DropdownMenuItemProps) {
+  const { s, slots } = useParts(tone, inset)
+  return (
+    <MenuPrimitive.Item
+      data-slot="dropdown-menu-item"
+      data-tone={tone ?? 'default'}
+      className={s.item({ class: [slots.item, className] })}
+      {...props}
+    >
+      {icon && (
+        <span className={s.icon({ class: slots.icon })} aria-hidden="true">
+          {icon}
+        </span>
+      )}
+      {children}
+      {shortcut && <DropdownMenuShortcut>{shortcut}</DropdownMenuShortcut>}
+    </MenuPrimitive.Item>
+  )
+}
+
+export function DropdownMenuCheckboxItem({
+  className,
+  children,
+  ...props
+}: ComponentProps<typeof MenuPrimitive.CheckboxItem>) {
+  const { s, slots } = useParts(undefined, true)
+  return (
+    <MenuPrimitive.CheckboxItem
+      data-slot="dropdown-menu-checkbox-item"
+      className={s.item({ class: [slots.item, className] })}
+      {...props}
+    >
+      <span className={s.indicator({ class: slots.indicator })}>
+        <MenuPrimitive.ItemIndicator>
+          <CheckIcon />
+        </MenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </MenuPrimitive.CheckboxItem>
+  )
+}
+
+export function DropdownMenuRadioItem({
+  className,
+  children,
+  ...props
+}: ComponentProps<typeof MenuPrimitive.RadioItem>) {
+  const { s, slots } = useParts(undefined, true)
+  return (
+    <MenuPrimitive.RadioItem
+      data-slot="dropdown-menu-radio-item"
+      className={s.item({ class: [slots.item, className] })}
+      {...props}
+    >
+      <span className={s.indicator({ class: slots.indicator })}>
+        <MenuPrimitive.ItemIndicator>
+          <DotIcon />
+        </MenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </MenuPrimitive.RadioItem>
+  )
+}
+
+export function DropdownMenuLabel({
+  inset,
+  className,
+  ...props
+}: ComponentProps<typeof MenuPrimitive.Label> & { inset?: boolean }) {
+  const { s, slots } = useParts(undefined, inset)
+  return (
+    <MenuPrimitive.Label
+      data-slot="dropdown-menu-label"
+      className={s.label({ class: [slots.label, className] })}
+      {...props}
+    />
+  )
+}
+
+export function DropdownMenuSeparator({
+  className,
+  ...props
+}: ComponentProps<typeof MenuPrimitive.Separator>) {
+  const { s, slots } = useParts()
+  return (
+    <MenuPrimitive.Separator
+      data-slot="dropdown-menu-separator"
+      className={s.separator({ class: [slots.separator, className] })}
+      {...props}
+    />
+  )
+}
+
+export function DropdownMenuShortcut({ className, ...props }: ComponentProps<'span'>) {
+  const { s, slots } = useParts()
+  return (
+    <span
+      data-slot="dropdown-menu-shortcut"
+      className={s.shortcut({ class: [slots.shortcut, className] })}
+      {...props}
+    />
+  )
+}
+
+export interface DropdownMenuSubTriggerProps
+  extends ComponentProps<typeof MenuPrimitive.SubTrigger> {
+  icon?: ReactNode
+}
+
+export function DropdownMenuSubTrigger({
+  icon,
+  className,
+  children,
+  ...props
+}: DropdownMenuSubTriggerProps) {
+  const { s, slots } = useParts()
+  return (
+    <MenuPrimitive.SubTrigger
+      data-slot="dropdown-menu-sub-trigger"
+      className={s.subTrigger({ class: [slots.subTrigger, className] })}
+      {...props}
+    >
+      {icon && (
+        <span className={s.icon({ class: slots.icon })} aria-hidden="true">
+          {icon}
+        </span>
+      )}
+      {children}
+      <span className="ml-auto flex text-faint-foreground">
+        <ChevronRightIcon />
+      </span>
+    </MenuPrimitive.SubTrigger>
+  )
+}
+
+export function DropdownMenuSubContent({
+  sideOffset = 4,
+  className,
+  ...props
+}: ComponentProps<typeof MenuPrimitive.SubContent>) {
+  const { s, slots } = useParts()
+  return (
+    <MenuPrimitive.Portal>
+      <MenuPrimitive.SubContent
+        data-slot="dropdown-menu-sub-content"
+        sideOffset={sideOffset}
+        className={s.subContent({ class: [slots.subContent, className] })}
+        {...props}
+      />
+    </MenuPrimitive.Portal>
+  )
+}

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

@@ -0,0 +1,19 @@
+export {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  type DropdownMenuItemProps,
+  DropdownMenuLabel,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  type DropdownMenuSubTriggerProps,
+  DropdownMenuTrigger,
+} from './dropdown-menu'
+export { type DropdownMenuVariants, dropdownMenuStyles } from './dropdown-menu.styles'

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/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/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'