@glyphui/ui 0.1.0 → 0.2.0

package/src/components/aspect-ratio/aspect-ratio.tsx

@@ -0,0 +1,40 @@
+import { AspectRatio as AspectRatioPrimitive } 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'
+
+export const aspectRatioStyles = tv({
+  slots: {
+    base: 'overflow-hidden [&>img]:size-full [&>img]:object-cover [&>video]:size-full [&>video]:object-cover',
+  },
+  variants: {
+    rounded: { true: { base: 'rounded-lg' } },
+    placeholder: { true: { base: 'bg-muted' } },
+  },
+})
+
+declare module '@glyphui/tokens' {
+  interface GlyphComponentRegistry {
+    AspectRatio: StylesEntry<typeof aspectRatioStyles>
+  }
+}
+
+export interface AspectRatioProps
+  extends ComponentProps<typeof AspectRatioPrimitive.Root>,
+    VariantProps<typeof aspectRatioStyles> {}
+
+/** Keeps media at a fixed width-to-height ratio, e.g. `ratio={16 / 9}`. Images inside cover the box. */
+export function AspectRatio(inProps: AspectRatioProps) {
+  const [props, slots] = useComponentConfig('AspectRatio', inProps)
+  const { rounded, placeholder, className, ...rest } = props
+  return (
+    <AspectRatioPrimitive.Root
+      data-slot="aspect-ratio"
+      className={aspectRatioStyles({ rounded, placeholder }).base({
+        class: [slots.base, className],
+      })}
+      {...rest}
+    />
+  )
+}

package/src/components/aspect-ratio/index.ts

@@ -0,0 +1 @@
+export { AspectRatio, type AspectRatioProps, aspectRatioStyles } from './aspect-ratio'

package/src/components/badge/badge.styles.ts

@@ -46,7 +46,7 @@ type Variant = keyof (typeof tones)[Tone]
 export const badgeStyles = tv({
   slots: {
     base: [
-      'inline-flex h-5.5 shrink-0 items-center gap-1.5 whitespace-nowrap rounded-pill border-transparent px-2',
+      'inline-flex h-5.5 w-fit shrink-0 items-center gap-1.5 whitespace-nowrap rounded-pill border-transparent px-2',
       'text-caption tabular-nums',
       themedBorder,
     ],

package/src/components/banner/banner.styles.ts

@@ -0,0 +1,40 @@
+import type { StylesEntry } from '../../utils/registry'
+import { tv, type VariantProps } from '../../utils/tv'
+
+export const bannerStyles = tv({
+  slots: {
+    root: ['w-full border-b-(length:--glyph-border-width) text-small'],
+    inner: 'mx-auto flex w-full max-w-7xl items-center gap-3 px-4 py-2.5 sm:px-6',
+    icon: 'flex size-4 shrink-0 items-center justify-center [&>svg]:size-4',
+    content: 'min-w-0 flex-1 [&_a]:font-medium [&_a]:underline [&_a]:underline-offset-2',
+    action: 'flex shrink-0 items-center gap-2',
+    dismiss: '-my-1 -mr-2 shrink-0 text-current hover:bg-current/10 hover:text-current',
+  },
+  variants: {
+    tone: {
+      neutral: { root: 'border-border bg-subtle text-foreground', icon: 'text-muted-foreground' },
+      primary: { root: 'border-primary bg-primary text-primary-foreground' },
+      info: {
+        root: 'border-info/25 bg-info/10 text-[color-mix(in_oklab,var(--color-info)_55%,var(--color-foreground))]',
+      },
+      success: {
+        root: 'border-success/25 bg-success/10 text-[color-mix(in_oklab,var(--color-success)_55%,var(--color-foreground))]',
+      },
+      warning: {
+        root: 'border-warning/30 bg-warning/14 text-[color-mix(in_oklab,var(--color-warning)_50%,var(--color-foreground))]',
+      },
+      danger: {
+        root: 'border-danger/25 bg-danger/10 text-[color-mix(in_oklab,var(--color-danger)_55%,var(--color-foreground))]',
+      },
+    },
+  },
+  defaultVariants: { tone: 'neutral' },
+})
+
+export type BannerVariants = VariantProps<typeof bannerStyles>
+
+declare module '@glyphui/tokens' {
+  interface GlyphComponentRegistry {
+    Banner: StylesEntry<typeof bannerStyles>
+  }
+}

package/src/components/banner/banner.tsx

@@ -0,0 +1,101 @@
+import { type ComponentProps, type ReactNode, useState } from 'react'
+import { useComponentConfig } from '../../hooks/use-component-config'
+import { XIcon } from '../../internal/icons'
+import { toneIcons } from '../alert/alert-icons'
+import { IconButton } from '../button'
+import { type BannerVariants, bannerStyles } from './banner.styles'
+
+export interface BannerProps extends ComponentProps<'section'>, BannerVariants {
+  /** Replaces the tone's default icon. `false` hides it. */
+  icon?: ReactNode | false
+  action?: ReactNode
+  /** Shows a close button. */
+  dismissible?: boolean
+  /** Remembers the dismissal in localStorage under this key, so the banner stays hidden. */
+  storageKey?: string
+  onDismiss?: () => void
+  dismissLabel?: string
+}
+
+function readDismissed(key: string | undefined): boolean {
+  if (!key || typeof window === 'undefined') return false
+  try {
+    return window.localStorage.getItem(key) === 'dismissed'
+  } catch {
+    return false
+  }
+}
+
+/** A full-width announcement at the top of a page or section. */
+export function Banner(inProps: BannerProps) {
+  const [props, slots] = useComponentConfig('Banner', inProps)
+  const {
+    tone,
+    icon,
+    action,
+    dismissible = false,
+    storageKey,
+    onDismiss,
+    dismissLabel = 'Dismiss',
+    className,
+    children,
+    ...rest
+  } = props
+  const [dismissed, setDismissed] = useState(() => readDismissed(storageKey))
+  if (dismissed) return null
+
+  const resolvedTone = tone ?? 'neutral'
+  const s = bannerStyles({ tone })
+  const iconNode = icon === false ? null : (icon ?? toneIcons[resolvedTone]())
+
+  const dismiss = () => {
+    setDismissed(true)
+    if (storageKey) {
+      try {
+        window.localStorage.setItem(storageKey, 'dismissed')
+      } catch {
+        // Storage unavailable: the banner stays hidden for this visit only.
+      }
+    }
+    onDismiss?.()
+  }
+
+  return (
+    <section
+      data-slot="banner"
+      data-tone={resolvedTone}
+      aria-label="Announcement"
+      className={s.root({ class: [slots.root, className] })}
+      {...rest}
+    >
+      <div className={s.inner({ class: slots.inner })}>
+        {iconNode && (
+          <span
+            data-slot="banner-icon"
+            className={s.icon({ class: slots.icon })}
+            aria-hidden="true"
+          >
+            {iconNode}
+          </span>
+        )}
+        <div data-slot="banner-content" className={s.content({ class: slots.content })}>
+          {children}
+        </div>
+        {action && (
+          <div data-slot="banner-action" className={s.action({ class: slots.action })}>
+            {action}
+          </div>
+        )}
+        {dismissible && (
+          <IconButton
+            size="sm"
+            icon={<XIcon />}
+            aria-label={dismissLabel}
+            onClick={dismiss}
+            className={s.dismiss({ class: slots.dismiss })}
+          />
+        )}
+      </div>
+    </section>
+  )
+}

package/src/components/banner/index.ts

@@ -0,0 +1,2 @@
+export { Banner, type BannerProps } from './banner'
+export { type BannerVariants, bannerStyles } from './banner.styles'

package/src/components/blockquote/blockquote.tsx

@@ -0,0 +1,59 @@
+import type { ComponentProps, ReactNode } from 'react'
+import { useComponentConfig } from '../../hooks/use-component-config'
+import type { StylesEntry } from '../../utils/registry'
+import { tv, type VariantProps } from '../../utils/tv'
+
+export const blockquoteStyles = tv({
+  slots: {
+    root: 'grid gap-3 border-l-2 border-primary pl-5',
+    quote: 'font-display text-pretty text-foreground',
+    caption: 'text-small text-muted-foreground',
+    author: 'font-medium text-foreground not-italic',
+  },
+  variants: {
+    size: {
+      sm: { quote: 'text-body' },
+      md: { quote: 'text-lead' },
+      lg: { quote: 'text-h3' },
+    },
+  },
+  defaultVariants: { size: 'md' },
+})
+
+declare module '@glyphui/tokens' {
+  interface GlyphComponentRegistry {
+    Blockquote: StylesEntry<typeof blockquoteStyles>
+  }
+}
+
+export interface BlockquoteProps
+  extends ComponentProps<'figure'>,
+    VariantProps<typeof blockquoteStyles> {
+  /** Who said it. */
+  author?: ReactNode
+  /** Their role or the work it's from, shown after the author. */
+  source?: ReactNode
+  /** URL of the quoted source, set as the `cite` attribute. */
+  citeUrl?: string
+}
+
+/** A quotation with an optional attribution. */
+export function Blockquote(inProps: BlockquoteProps) {
+  const [props, slots] = useComponentConfig('Blockquote', inProps)
+  const { author, source, citeUrl, size, className, children, ...rest } = props
+  const s = blockquoteStyles({ size })
+  return (
+    <figure data-slot="blockquote" className={s.root({ class: [slots.root, className] })} {...rest}>
+      <blockquote cite={citeUrl} className={s.quote({ class: slots.quote })}>
+        {children}
+      </blockquote>
+      {(author || source) && (
+        <figcaption className={s.caption({ class: slots.caption })}>
+          {author && <cite className={s.author({ class: slots.author })}>{author}</cite>}
+          {author && source && ', '}
+          {source}
+        </figcaption>
+      )}
+    </figure>
+  )
+}

package/src/components/blockquote/index.ts

@@ -0,0 +1 @@
+export { Blockquote, type BlockquoteProps, blockquoteStyles } from './blockquote'

package/src/components/breadcrumb/breadcrumb.styles.ts

@@ -0,0 +1,20 @@
+import type { StylesEntry } from '../../utils/registry'
+import { focusRing, transition } from '../../utils/styles'
+import { tv } from '../../utils/tv'
+
+export const breadcrumbStyles = tv({
+  slots: {
+    root: 'min-w-0',
+    list: 'flex flex-wrap items-center gap-1.5 text-small text-muted-foreground',
+    item: 'inline-flex min-w-0 items-center gap-1.5',
+    link: ['truncate rounded-xs hover:text-foreground', transition, focusRing],
+    page: 'truncate font-medium text-foreground',
+    separator: 'flex items-center text-faint-foreground [&>svg]:size-3.5',
+  },
+})
+
+declare module '@glyphui/tokens' {
+  interface GlyphComponentRegistry {
+    Breadcrumb: StylesEntry<typeof breadcrumbStyles>
+  }
+}

package/src/components/breadcrumb/breadcrumb.tsx

@@ -0,0 +1,135 @@
+import { Slot } from 'radix-ui'
+import type { ComponentProps, ReactNode } from 'react'
+import { useComponentConfig } from '../../hooks/use-component-config'
+import { ChevronRightIcon } from '../../internal/icons'
+import { useLinkComponent } from '../../provider/glyph-context'
+import { breadcrumbStyles } from './breadcrumb.styles'
+
+const s = breadcrumbStyles()
+
+function useSlots() {
+  return useComponentConfig('Breadcrumb', {})[1]
+}
+
+export interface BreadcrumbItemData {
+  label: ReactNode
+  /** Omit for the current page (normally the last item). */
+  href?: string
+}
+
+export interface BreadcrumbProps extends ComponentProps<'nav'> {
+  /** Data-driven trail. The last item is the current page. Omit to compose the parts yourself. */
+  items?: readonly BreadcrumbItemData[]
+  /** Custom separator between items. A chevron by default. */
+  separator?: ReactNode
+}
+
+/** Shows where the current page sits in the hierarchy. */
+export function Breadcrumb({ items, separator, className, children, ...props }: BreadcrumbProps) {
+  const slots = useSlots()
+  return (
+    <nav
+      aria-label="Breadcrumb"
+      data-slot="breadcrumb"
+      className={s.root({ class: [slots.root, className] })}
+      {...props}
+    >
+      {items ? (
+        <BreadcrumbList>
+          {items.map((item, index) => {
+            const last = index === items.length - 1
+            return (
+              <BreadcrumbItem key={index}>
+                {last || !item.href ? (
+                  <BreadcrumbPage aria-current={last ? 'page' : undefined}>
+                    {item.label}
+                  </BreadcrumbPage>
+                ) : (
+                  <BreadcrumbLink href={item.href}>{item.label}</BreadcrumbLink>
+                )}
+                {!last && <BreadcrumbSeparator>{separator}</BreadcrumbSeparator>}
+              </BreadcrumbItem>
+            )
+          })}
+        </BreadcrumbList>
+      ) : (
+        children
+      )}
+    </nav>
+  )
+}
+
+export function BreadcrumbList({ className, ...props }: ComponentProps<'ol'>) {
+  const slots = useSlots()
+  return (
+    <ol
+      data-slot="breadcrumb-list"
+      className={s.list({ class: [slots.list, className] })}
+      {...props}
+    />
+  )
+}
+
+export function BreadcrumbItem({ className, ...props }: ComponentProps<'li'>) {
+  const slots = useSlots()
+  return (
+    <li
+      data-slot="breadcrumb-item"
+      className={s.item({ class: [slots.item, className] })}
+      {...props}
+    />
+  )
+}
+
+export interface BreadcrumbLinkProps {
+  href: string
+  className?: string
+  children?: ReactNode
+  /** Render your own element (e.g. a router link) with breadcrumb link styles. */
+  asChild?: boolean
+}
+
+export function BreadcrumbLink({ href, className, children, asChild }: BreadcrumbLinkProps) {
+  const Link = useLinkComponent()
+  const slots = useSlots()
+  const classes = s.link({ class: [slots.link, className] })
+  if (asChild) {
+    return (
+      <Slot.Root data-slot="breadcrumb-link" className={classes}>
+        {children}
+      </Slot.Root>
+    )
+  }
+  return (
+    <Link href={href} className={classes}>
+      {children}
+    </Link>
+  )
+}
+
+export function BreadcrumbPage({ className, ...props }: ComponentProps<'span'>) {
+  const slots = useSlots()
+  return (
+    <span
+      data-slot="breadcrumb-page"
+      aria-current="page"
+      className={s.page({ class: [slots.page, className] })}
+      {...props}
+    />
+  )
+}
+
+export function BreadcrumbSeparator({ className, children, ...props }: ComponentProps<'span'>) {
+  const slots = useSlots()
+  return (
+    <span
+      data-slot="breadcrumb-separator"
+      role="presentation"
+      aria-hidden="true"
+      className={s.separator({ class: [slots.separator, className] })}
+      {...props}
+    >
+      {children ?? <ChevronRightIcon />}
+    </span>
+  )
+}

package/src/components/breadcrumb/index.ts

@@ -0,0 +1,12 @@
+export {
+  Breadcrumb,
+  BreadcrumbItem,
+  type BreadcrumbItemData,
+  BreadcrumbLink,
+  type BreadcrumbLinkProps,
+  BreadcrumbList,
+  BreadcrumbPage,
+  type BreadcrumbProps,
+  BreadcrumbSeparator,
+} from './breadcrumb'
+export { breadcrumbStyles } from './breadcrumb.styles'

package/src/components/button/button.tsx

@@ -48,14 +48,17 @@ export function Button(inProps: ButtonProps) {
       {...(!asChild && { type: type ?? 'button', disabled: disabled || loading })}
       {...rest}
     >
-      {iconOnly
-        ? icon(loading ? <Spinner size={size === 'lg' ? 'md' : 'sm'} /> : children)
-        : // Children stay direct (no Fragment) so Slot can find the Slottable when asChild is set.
-          [
-            <Fragment key="start">{icon(loading ? <Spinner size="sm" /> : leftIcon)}</Fragment>,
-            <Slot.Slottable key="content">{children}</Slot.Slottable>,
-            <Fragment key="end">{icon(rightIcon)}</Fragment>,
-          ]}
+      {iconOnly && asChild
+        ? // The child element (e.g. a link) holds its own icon; Slot merges button props onto it.
+          children
+        : iconOnly
+          ? icon(loading ? <Spinner size={size === 'lg' ? 'md' : 'sm'} /> : children)
+          : // Children stay direct (no Fragment) so Slot can find the Slottable when asChild is set.
+            [
+              <Fragment key="start">{icon(loading ? <Spinner size="sm" /> : leftIcon)}</Fragment>,
+              <Slot.Slottable key="content">{children}</Slot.Slottable>,
+              <Fragment key="end">{icon(rightIcon)}</Fragment>,
+            ]}
     </Comp>
   )
 }

package/src/components/code/code.styles.ts

@@ -0,0 +1,33 @@
+import type { StylesEntry } from '../../utils/registry'
+import { themedBorder } from '../../utils/styles'
+import { tv, type VariantProps } from '../../utils/tv'
+
+export const codeStyles = tv({
+  slots: {
+    base: 'rounded-xs bg-muted px-[0.3em] py-[0.15em] font-mono text-[0.875em] text-foreground',
+  },
+})
+
+export const codeBlockStyles = tv({
+  slots: {
+    root: ['relative min-w-0 overflow-hidden rounded-lg border-border bg-subtle', themedBorder],
+    header:
+      'flex min-h-10 items-center justify-between gap-2 border-b border-border py-1 pr-1.5 pl-4',
+    title: 'truncate font-mono text-caption text-faint-foreground',
+    copy: 'shrink-0',
+    floatingCopy: 'absolute top-2 right-2',
+    pre: 'overflow-x-auto p-4 font-mono text-small leading-relaxed text-foreground',
+  },
+  variants: {
+    wrap: { true: { pre: 'whitespace-pre-wrap break-words' } },
+  },
+})
+
+export type CodeBlockVariants = VariantProps<typeof codeBlockStyles>
+
+declare module '@glyphui/tokens' {
+  interface GlyphComponentRegistry {
+    Code: StylesEntry<typeof codeStyles>
+    CodeBlock: StylesEntry<typeof codeBlockStyles>
+  }
+}

package/src/components/code/code.tsx

@@ -0,0 +1,96 @@
+import { type ComponentProps, type ReactNode, useEffect, useRef, useState } from 'react'
+import { useComponentConfig } from '../../hooks/use-component-config'
+import { CheckIcon } from '../../internal/icons'
+import { IconButton } from '../button'
+import { type CodeBlockVariants, codeBlockStyles, codeStyles } from './code.styles'
+
+/** Inline code within running text. */
+export function Code(inProps: ComponentProps<'code'>) {
+  const [{ className, ...rest }, slots] = useComponentConfig('Code', inProps)
+  return (
+    <code
+      data-slot="code"
+      className={codeStyles().base({ class: [slots.base, className] })}
+      {...rest}
+    />
+  )
+}
+
+const CopyIcon = () => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    aria-hidden="true"
+  >
+    <rect width="14" height="14" x="8" y="8" rx="2" />
+    <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" />
+  </svg>
+)
+
+export interface CodeBlockProps
+  extends Omit<ComponentProps<'figure'>, 'children' | 'title'>,
+    CodeBlockVariants {
+  /** The code to show and copy. */
+  code: string
+  /** File name or caption shown in the header. */
+  title?: ReactNode
+  /** Shown in the header when there is no title, e.g. "tsx". */
+  language?: string
+  /** Show a copy button. Default true. */
+  copyable?: boolean
+}
+
+/** A block of code with an optional file name and a copy button. No syntax highlighting is applied. */
+export function CodeBlock(inProps: CodeBlockProps) {
+  const [props, slots] = useComponentConfig('CodeBlock', inProps)
+  const { code, title, language, copyable = true, wrap, className, ...rest } = props
+  const [copied, setCopied] = useState(false)
+  const timer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined)
+  const s = codeBlockStyles({ wrap })
+  const heading = title ?? language
+
+  useEffect(() => () => clearTimeout(timer.current), [])
+
+  const copy = async () => {
+    try {
+      await navigator.clipboard.writeText(code)
+      setCopied(true)
+      clearTimeout(timer.current)
+      timer.current = setTimeout(() => setCopied(false), 1600)
+    } catch {
+      // Clipboard blocked (permissions, insecure context): the code stays selectable.
+    }
+  }
+
+  const copyButton = copyable ? (
+    <IconButton
+      size="sm"
+      icon={copied ? <CheckIcon /> : <CopyIcon />}
+      aria-label={copied ? 'Copied' : 'Copy code'}
+      onClick={copy}
+      className={
+        heading ? s.copy({ class: slots.copy }) : s.floatingCopy({ class: slots.floatingCopy })
+      }
+    />
+  ) : null
+
+  return (
+    <figure data-slot="code-block" className={s.root({ class: [slots.root, className] })} {...rest}>
+      {heading ? (
+        <figcaption className={s.header({ class: slots.header })}>
+          <span className={s.title({ class: slots.title })}>{heading}</span>
+          {copyButton}
+        </figcaption>
+      ) : (
+        copyButton
+      )}
+      <pre className={s.pre({ class: slots.pre })}>
+        <code>{code}</code>
+      </pre>
+    </figure>
+  )
+}

package/src/components/code/index.ts

@@ -0,0 +1,2 @@
+export { Code, CodeBlock, type CodeBlockProps } from './code'
+export { type CodeBlockVariants, codeBlockStyles, codeStyles } from './code.styles'

package/src/components/combobox/combobox.styles.ts

@@ -0,0 +1,50 @@
+import type { StylesEntry } from '../../utils/registry'
+import { popover } from '../../utils/styles'
+import { tv, type VariantProps } from '../../utils/tv'
+import { fieldControl } from '../input/input.styles'
+
+export const comboboxStyles = tv({
+  slots: {
+    trigger: [
+      ...fieldControl,
+      'flex cursor-pointer items-center justify-between gap-2 px-3 text-left outline-none',
+      'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/20',
+      'disabled:cursor-not-allowed disabled:opacity-50',
+    ],
+    value: 'flex min-w-0 flex-1 items-center gap-1 truncate',
+    placeholder: 'truncate text-faint-foreground',
+    chip: 'inline-flex h-5.5 max-w-40 shrink-0 items-center truncate rounded-pill bg-muted px-2 text-caption text-foreground',
+    icon: 'size-4 shrink-0 text-faint-foreground',
+    content: [popover, 'w-(--radix-popover-trigger-width) min-w-56 p-0'],
+    search:
+      'flex items-center gap-2 border-b border-border px-3 text-faint-foreground [&>svg]:size-4 [&>svg]:shrink-0',
+    input:
+      'h-10 w-full min-w-0 bg-transparent text-small text-foreground outline-none placeholder:text-faint-foreground',
+    list: 'max-h-72 overflow-y-auto overscroll-contain p-1',
+    empty: 'px-3 py-6 text-center text-small text-muted-foreground',
+    item: [
+      'relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-small text-foreground outline-none',
+      'data-[selected=true]:bg-muted data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50',
+    ],
+    itemText: 'grid min-w-0 flex-1',
+    itemDescription: 'truncate text-caption text-faint-foreground',
+    check: 'size-4 shrink-0 text-primary',
+  },
+  variants: {
+    size: {
+      sm: { trigger: 'min-h-(--glyph-control-sm) text-small' },
+      md: { trigger: 'min-h-(--glyph-control-md) text-small' },
+      lg: { trigger: 'min-h-(--glyph-control-lg) text-body' },
+    },
+    multiple: { true: { trigger: 'py-1', value: 'flex-wrap overflow-visible whitespace-normal' } },
+  },
+  defaultVariants: { size: 'md' },
+})
+
+export type ComboboxVariants = VariantProps<typeof comboboxStyles>
+
+declare module '@glyphui/tokens' {
+  interface GlyphComponentRegistry {
+    Combobox: StylesEntry<typeof comboboxStyles>
+  }
+}