@glyphui/ui 0.1.1 → 0.2.0

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/popover/index.ts

@@ -0,0 +1,9 @@
+export {
+  Popover,
+  PopoverAnchor,
+  PopoverClose,
+  PopoverContent,
+  type PopoverContentProps,
+  PopoverTrigger,
+  popoverStyles,
+} from './popover'

package/src/components/popover/popover.tsx

@@ -0,0 +1,66 @@
+import { Popover as PopoverPrimitive } 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 popoverStyles = tv({
+  slots: {
+    content: [
+      popover,
+      'w-72 max-w-[calc(100vw-2rem)] overflow-visible p-4 text-small outline-none',
+    ],
+    arrow: 'fill-raised',
+  },
+})
+
+declare module '@glyphui/tokens' {
+  interface GlyphComponentRegistry {
+    Popover: StylesEntry<typeof popoverStyles>
+  }
+}
+
+/** Floating content anchored to a trigger: quick settings, details, small forms. */
+export const Popover = PopoverPrimitive.Root
+export const PopoverTrigger = PopoverPrimitive.Trigger
+export const PopoverAnchor = PopoverPrimitive.Anchor
+export const PopoverClose = PopoverPrimitive.Close
+
+export interface PopoverContentProps extends ComponentProps<typeof PopoverPrimitive.Content> {
+  /** Render a small arrow pointing at the trigger. */
+  showArrow?: boolean
+}
+
+export function PopoverContent(inProps: PopoverContentProps) {
+  const [props, slots] = useComponentConfig('Popover', inProps)
+  const {
+    showArrow = false,
+    sideOffset = 6,
+    align = 'center',
+    className,
+    children,
+    ...rest
+  } = props
+  const s = popoverStyles()
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Content
+        data-slot="popover-content"
+        sideOffset={sideOffset}
+        align={align}
+        className={s.content({ class: [slots.content, className] })}
+        {...rest}
+      >
+        {children}
+        {showArrow && (
+          <PopoverPrimitive.Arrow
+            width={12}
+            height={6}
+            className={s.arrow({ class: slots.arrow })}
+          />
+        )}
+      </PopoverPrimitive.Content>
+    </PopoverPrimitive.Portal>
+  )
+}

package/src/components/progress/index.ts

@@ -0,0 +1,7 @@
+export { Progress, ProgressCircle, type ProgressCircleProps, type ProgressProps } from './progress'
+export {
+  type ProgressCircleVariants,
+  type ProgressVariants,
+  progressCircleStyles,
+  progressStyles,
+} from './progress.styles'

package/src/components/progress/progress.styles.ts

@@ -0,0 +1,68 @@
+import type { StylesEntry } from '../../utils/registry'
+import { tv, type VariantProps } from '../../utils/tv'
+
+export const progressStyles = tv({
+  slots: {
+    root: 'grid w-full gap-1.5',
+    header: 'flex items-baseline justify-between gap-3 text-small',
+    label: 'font-medium text-foreground',
+    value: 'tabular-nums text-muted-foreground',
+    track: 'relative w-full overflow-hidden rounded-pill bg-muted',
+    indicator: [
+      'h-full w-full rounded-pill transition-transform duration-(--glyph-duration-slow) ease-standard',
+      'data-[state=indeterminate]:w-1/3 data-[state=indeterminate]:animate-pulse',
+    ],
+  },
+  variants: {
+    size: {
+      sm: { track: 'h-1' },
+      md: { track: 'h-2' },
+      lg: { track: 'h-3' },
+    },
+    tone: {
+      primary: { indicator: 'bg-primary' },
+      neutral: { indicator: 'bg-foreground' },
+      success: { indicator: 'bg-success' },
+      warning: { indicator: 'bg-warning' },
+      danger: { indicator: 'bg-danger' },
+    },
+  },
+  defaultVariants: { size: 'md', tone: 'primary' },
+})
+
+export type ProgressVariants = VariantProps<typeof progressStyles>
+
+export const progressCircleStyles = tv({
+  slots: {
+    root: 'relative inline-flex shrink-0 items-center justify-center',
+    svg: 'size-full -rotate-90',
+    track: 'stroke-muted',
+    indicator:
+      'stroke-current transition-[stroke-dashoffset] duration-(--glyph-duration-slow) ease-standard',
+    value: 'absolute font-medium tabular-nums text-foreground',
+  },
+  variants: {
+    size: {
+      sm: { root: 'size-6', value: 'hidden' },
+      md: { root: 'size-10', value: 'text-[0.625rem]' },
+      lg: { root: 'size-16', value: 'text-small' },
+    },
+    tone: {
+      primary: { indicator: 'text-primary' },
+      neutral: { indicator: 'text-foreground' },
+      success: { indicator: 'text-success' },
+      warning: { indicator: 'text-warning' },
+      danger: { indicator: 'text-danger' },
+    },
+  },
+  defaultVariants: { size: 'md', tone: 'primary' },
+})
+
+export type ProgressCircleVariants = VariantProps<typeof progressCircleStyles>
+
+declare module '@glyphui/tokens' {
+  interface GlyphComponentRegistry {
+    Progress: StylesEntry<typeof progressStyles>
+    ProgressCircle: StylesEntry<typeof progressCircleStyles>
+  }
+}

package/src/components/progress/progress.tsx

@@ -0,0 +1,158 @@
+import { Progress as ProgressPrimitive } from 'radix-ui'
+import { type ComponentProps, type ReactNode, useId } from 'react'
+import { useComponentConfig } from '../../hooks/use-component-config'
+import {
+  type ProgressCircleVariants,
+  type ProgressVariants,
+  progressCircleStyles,
+  progressStyles,
+} from './progress.styles'
+
+function clampPercent(value: number, max: number): number {
+  if (max <= 0) return 0
+  return Math.min(100, Math.max(0, (value / max) * 100))
+}
+
+const defaultFormat = (value: number, max: number) => `${Math.round(clampPercent(value, max))}%`
+
+export interface ProgressProps extends Omit<ComponentProps<'div'>, 'children'>, ProgressVariants {
+  /** Current value. `null` or omitted shows an indeterminate bar. */
+  value?: number | null
+  max?: number
+  /** Visible label above the bar; also its accessible name. */
+  label?: ReactNode
+  /** Show the value next to the label. */
+  showValue?: boolean
+  formatValue?: (value: number, max: number) => string
+  /** Accessible name when there is no visible label. */
+  'aria-label'?: string
+}
+
+/** A horizontal bar showing how far a task has progressed. */
+export function Progress(inProps: ProgressProps) {
+  const [props, slots] = useComponentConfig('Progress', inProps)
+  const {
+    value = null,
+    max = 100,
+    label,
+    showValue = false,
+    formatValue = defaultFormat,
+    size,
+    tone,
+    className,
+    'aria-label': ariaLabel,
+    ...rest
+  } = props
+  const labelId = useId()
+  const s = progressStyles({ size, tone })
+  const determinate = typeof value === 'number'
+  const percent = determinate ? clampPercent(value, max) : 0
+  const valueText = determinate ? formatValue(value, max) : undefined
+
+  return (
+    <div data-slot="progress" className={s.root({ class: [slots.root, className] })} {...rest}>
+      {(label || (showValue && valueText)) && (
+        <div data-slot="progress-header" className={s.header({ class: slots.header })}>
+          {label && (
+            <span id={labelId} className={s.label({ class: slots.label })}>
+              {label}
+            </span>
+          )}
+          {showValue && valueText && (
+            <span className={s.value({ class: slots.value })} aria-hidden="true">
+              {valueText}
+            </span>
+          )}
+        </div>
+      )}
+      <ProgressPrimitive.Root
+        data-slot="progress-track"
+        value={determinate ? Math.min(Math.max(value, 0), max) : null}
+        max={max}
+        getValueLabel={(v, m) => formatValue(v, m)}
+        aria-labelledby={label ? labelId : undefined}
+        aria-label={label ? undefined : ariaLabel}
+        className={s.track({ class: slots.track })}
+      >
+        <ProgressPrimitive.Indicator
+          data-slot="progress-indicator"
+          className={s.indicator({ class: slots.indicator })}
+          style={determinate ? { transform: `translateX(-${100 - percent}%)` } : undefined}
+        />
+      </ProgressPrimitive.Root>
+    </div>
+  )
+}
+
+export interface ProgressCircleProps
+  extends Omit<ComponentProps<'div'>, 'children'>,
+    ProgressCircleVariants {
+  value: number
+  max?: number
+  /** Show the percentage in the center (md and lg sizes). */
+  showValue?: boolean
+  formatValue?: (value: number, max: number) => string
+  /** Accessible name, e.g. "Storage used". */
+  'aria-label'?: string
+}
+
+const RADIUS = 16
+const CIRCUMFERENCE = 2 * Math.PI * RADIUS
+
+/** A compact ring for progress or a share of a total. */
+export function ProgressCircle(inProps: ProgressCircleProps) {
+  const [props, slots] = useComponentConfig('ProgressCircle', inProps)
+  const {
+    value,
+    max = 100,
+    showValue = false,
+    formatValue = defaultFormat,
+    size,
+    tone,
+    className,
+    ...rest
+  } = props
+  const s = progressCircleStyles({ size, tone })
+  const percent = clampPercent(value, max)
+  const valueText = formatValue(value, max)
+
+  return (
+    <div
+      data-slot="progress-circle"
+      role="progressbar"
+      aria-valuemin={0}
+      aria-valuemax={max}
+      aria-valuenow={Math.min(Math.max(value, 0), max)}
+      aria-valuetext={valueText}
+      className={s.root({ class: [slots.root, className] })}
+      {...rest}
+    >
+      <svg viewBox="0 0 40 40" className={s.svg({ class: slots.svg })} aria-hidden="true">
+        <circle
+          cx="20"
+          cy="20"
+          r={RADIUS}
+          fill="none"
+          strokeWidth="4"
+          className={s.track({ class: slots.track })}
+        />
+        <circle
+          cx="20"
+          cy="20"
+          r={RADIUS}
+          fill="none"
+          strokeWidth="4"
+          strokeLinecap="round"
+          strokeDasharray={CIRCUMFERENCE}
+          strokeDashoffset={CIRCUMFERENCE * (1 - percent / 100)}
+          className={s.indicator({ class: slots.indicator })}
+        />
+      </svg>
+      {showValue && (
+        <span className={s.value({ class: slots.value })} aria-hidden="true">
+          {valueText}
+        </span>
+      )}
+    </div>
+  )
+}

package/src/components/prose/index.ts

@@ -0,0 +1 @@
+export { Prose, type ProseProps, proseStyles } from './prose'

package/src/components/prose/prose.tsx

@@ -0,0 +1,82 @@
+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'
+
+/**
+ * Element styles for long-form content. Every value comes from theme tokens, so articles
+ * pick up the theme's display font, type scale, colors and radius.
+ */
+export const proseStyles = tv({
+  slots: {
+    base: [
+      'text-foreground [&>:first-child]:mt-0 [&>:last-child]:mb-0',
+      // Headings
+      '[&_h1]:mt-[1.4em] [&_h1]:mb-[0.5em] [&_h1]:font-display [&_h1]:text-h1 [&_h1]:text-balance',
+      '[&_h2]:mt-[1.6em] [&_h2]:mb-[0.5em] [&_h2]:font-display [&_h2]:text-h2 [&_h2]:text-balance',
+      '[&_h3]:mt-[1.5em] [&_h3]:mb-[0.4em] [&_h3]:font-display [&_h3]:text-h3 [&_h3]:text-balance',
+      '[&_h4]:mt-[1.4em] [&_h4]:mb-[0.4em] [&_h4]:font-display [&_h4]:text-h4',
+      // Text
+      '[&_p]:my-[1em] [&_p]:text-pretty',
+      '[&_strong]:font-semibold [&_strong]:text-foreground',
+      '[&_a]:font-medium [&_a]:text-primary [&_a]:underline [&_a]:decoration-primary/40 [&_a]:underline-offset-4 [&_a:hover]:decoration-primary',
+      // Lists
+      '[&_ul]:my-[1em] [&_ul]:list-disc [&_ul]:pl-[1.5em] [&_ol]:my-[1em] [&_ol]:list-decimal [&_ol]:pl-[1.5em]',
+      '[&_li]:my-[0.35em] [&_li]:pl-[0.25em] [&_li::marker]:text-faint-foreground',
+      // Quotes
+      '[&_blockquote]:my-[1.5em] [&_blockquote]:border-l-2 [&_blockquote]:border-primary [&_blockquote]:pl-[1em] [&_blockquote]:font-display [&_blockquote]:text-muted-foreground',
+      // Code
+      '[&_:not(pre)>code]:rounded-xs [&_:not(pre)>code]:bg-muted [&_:not(pre)>code]:px-[0.3em] [&_:not(pre)>code]:py-[0.15em] [&_:not(pre)>code]:font-mono [&_:not(pre)>code]:text-[0.875em]',
+      '[&_pre]:my-[1.5em] [&_pre]:overflow-x-auto [&_pre]:rounded-lg [&_pre]:border [&_pre]:border-border [&_pre]:bg-subtle [&_pre]:p-4 [&_pre]:font-mono [&_pre]:text-small [&_pre]:leading-relaxed',
+      // Media and rules
+      '[&_hr]:my-[2em] [&_hr]:border-border',
+      '[&_img]:my-[1.5em] [&_img]:max-w-full [&_img]:rounded-lg',
+      '[&_figure]:my-[1.75em] [&_figure_img]:my-0 [&_figcaption]:mt-2 [&_figcaption]:text-small [&_figcaption]:text-faint-foreground',
+      // Tables
+      '[&_table]:my-[1.5em] [&_table]:w-full [&_table]:border-collapse [&_table]:text-small [&_table]:tabular-nums',
+      '[&_th]:border-b [&_th]:border-border-strong [&_th]:px-3 [&_th]:py-2 [&_th]:text-left [&_th]:font-medium',
+      '[&_td]:border-b [&_td]:border-border [&_td]:px-3 [&_td]:py-2 [&_td]:align-top',
+    ],
+  },
+  variants: {
+    size: {
+      sm: { base: 'text-small [&_blockquote]:text-body' },
+      md: { base: 'text-body [&_blockquote]:text-lead' },
+      lg: { base: 'text-lead [&_blockquote]:text-h4' },
+    },
+    fullWidth: {
+      true: { base: 'max-w-none' },
+      false: { base: 'max-w-prose' },
+    },
+  },
+  defaultVariants: { size: 'md', fullWidth: false },
+})
+
+declare module '@glyphui/tokens' {
+  interface GlyphComponentRegistry {
+    Prose: StylesEntry<typeof proseStyles>
+  }
+}
+
+export interface ProseProps extends ComponentProps<'div'>, VariantProps<typeof proseStyles> {
+  /** Render the child element (e.g. `<article>`) instead of a `<div>`. */
+  asChild?: boolean
+}
+
+/**
+ * Styles raw HTML or MDX (headings, lists, links, quotes, code, tables, images) from theme
+ * tokens. Wrap rendered Markdown or CMS content in it.
+ */
+export function Prose(inProps: ProseProps) {
+  const [props, slots] = useComponentConfig('Prose', inProps)
+  const { size, fullWidth, asChild, className, ...rest } = props
+  const Comp = asChild ? Slot.Root : 'div'
+  return (
+    <Comp
+      data-slot="prose"
+      className={proseStyles({ size, fullWidth }).base({ class: [slots.base, className] })}
+      {...rest}
+    />
+  )
+}

package/src/components/radio-group/index.ts

@@ -0,0 +1,7 @@
+export {
+  RadioGroup,
+  RadioGroupItem,
+  type RadioGroupItemProps,
+  type RadioGroupProps,
+} from './radio-group'
+export { type RadioGroupVariants, radioGroupStyles } from './radio-group.styles'

package/src/components/radio-group/radio-group.styles.ts

@@ -0,0 +1,64 @@
+import type { StylesEntry } from '../../utils/registry'
+import { focusRing, themedBorder, transition } from '../../utils/styles'
+import { tv, type VariantProps } from '../../utils/tv'
+
+const control = [
+  'mt-0.5 inline-flex size-4 shrink-0 items-center justify-center rounded-pill border-input bg-surface shadow-xs',
+  themedBorder,
+  transition,
+]
+
+export const radioGroupStyles = tv({
+  slots: {
+    root: '',
+    option: 'flex items-start gap-2.5',
+    control: [
+      ...control,
+      focusRing,
+      'peer cursor-pointer hover:border-border-strong aria-invalid:border-danger',
+      'data-[state=checked]:border-primary disabled:cursor-not-allowed disabled:opacity-50',
+    ],
+    indicator:
+      'flex size-full items-center justify-center after:block after:size-2 after:rounded-pill after:bg-primary',
+    text: 'grid gap-0.5',
+    label:
+      'cursor-pointer text-small font-medium text-foreground peer-disabled:cursor-not-allowed peer-disabled:opacity-60',
+    description: 'text-small text-faint-foreground',
+    card: [
+      'group relative flex w-full cursor-pointer items-start gap-3 rounded-lg border-border bg-surface p-4 text-left shadow-xs',
+      themedBorder,
+      transition,
+      focusRing,
+      'hover:border-border-strong',
+      'data-[state=checked]:border-primary data-[state=checked]:ring-1 data-[state=checked]:ring-primary',
+      'disabled:cursor-not-allowed disabled:opacity-50',
+    ],
+    cardControl: [...control, 'group-data-[state=checked]:border-primary'],
+  },
+  variants: {
+    orientation: {
+      vertical: { root: 'grid gap-3' },
+      horizontal: { root: 'flex flex-wrap gap-x-5 gap-y-3' },
+    },
+    variant: {
+      default: {},
+      card: {},
+    },
+  },
+  compoundVariants: [
+    {
+      variant: 'card',
+      orientation: 'horizontal',
+      class: { root: 'grid grid-cols-[repeat(auto-fit,minmax(12rem,1fr))] gap-3' },
+    },
+  ],
+  defaultVariants: { orientation: 'vertical', variant: 'default' },
+})
+
+export type RadioGroupVariants = VariantProps<typeof radioGroupStyles>
+
+declare module '@glyphui/tokens' {
+  interface GlyphComponentRegistry {
+    RadioGroup: StylesEntry<typeof radioGroupStyles>
+  }
+}