@glyphui/ui 0.1.1 → 0.3.0

package/src/components/alert-dialog/confirm.tsx

@@ -0,0 +1,111 @@
+import {
+  createContext,
+  type ReactNode,
+  useCallback,
+  useContext,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from './alert-dialog'
+
+export interface ConfirmOptions {
+  title: ReactNode
+  description?: ReactNode
+  /** Default "Confirm", or "Delete" when `tone` is `danger`. */
+  confirmLabel?: ReactNode
+  cancelLabel?: ReactNode
+  tone?: 'default' | 'danger'
+}
+
+export type ConfirmFn = (options: ConfirmOptions) => Promise<boolean>
+
+const ConfirmContext = createContext<ConfirmFn | null>(null)
+
+interface Pending {
+  options: ConfirmOptions
+  resolve: (value: boolean) => void
+}
+
+/**
+ * Enables `useConfirm()` for everything inside. Renders one shared AlertDialog.
+ * Mount once near the root (inside GlyphProvider).
+ */
+export function ConfirmProvider({ children }: { children: ReactNode }) {
+  const [pending, setPending] = useState<Pending | null>(null)
+  const [open, setOpen] = useState(false)
+  const pendingRef = useRef<Pending | null>(null)
+
+  const settle = useCallback((value: boolean) => {
+    pendingRef.current?.resolve(value)
+    pendingRef.current = null
+    setOpen(false)
+  }, [])
+
+  const confirm = useCallback<ConfirmFn>((options) => {
+    // A new request cancels one that is still open.
+    pendingRef.current?.resolve(false)
+    return new Promise<boolean>((resolve) => {
+      const next = { options, resolve }
+      pendingRef.current = next
+      setPending(next)
+      setOpen(true)
+    })
+  }, [])
+
+  const value = useMemo(() => confirm, [confirm])
+  const options = pending?.options
+  const danger = options?.tone === 'danger'
+
+  return (
+    <ConfirmContext.Provider value={value}>
+      {children}
+      <AlertDialog open={open} onOpenChange={(next) => !next && settle(false)}>
+        {options && (
+          <AlertDialogContent>
+            <AlertDialogHeader>
+              <AlertDialogTitle>{options.title}</AlertDialogTitle>
+              {options.description && (
+                <AlertDialogDescription>{options.description}</AlertDialogDescription>
+              )}
+            </AlertDialogHeader>
+            <AlertDialogFooter>
+              <AlertDialogCancel onClick={() => settle(false)}>
+                {options.cancelLabel ?? 'Cancel'}
+              </AlertDialogCancel>
+              <AlertDialogAction tone={options.tone} onClick={() => settle(true)}>
+                {options.confirmLabel ?? (danger ? 'Delete' : 'Confirm')}
+              </AlertDialogAction>
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        )}
+      </AlertDialog>
+    </ConfirmContext.Provider>
+  )
+}
+
+/**
+ * Ask the user to confirm, in one line:
+ *
+ * ```tsx
+ * const confirm = useConfirm()
+ * if (await confirm({ title: 'Delete project?', tone: 'danger' })) await deleteProject()
+ * ```
+ *
+ * Resolves `true` when confirmed, `false` when cancelled or dismissed with Escape.
+ */
+export function useConfirm(): ConfirmFn {
+  const confirm = useContext(ConfirmContext)
+  if (!confirm)
+    throw new Error('useConfirm must be used inside <ConfirmProvider> (or <GlyphProvider>).')
+  return confirm
+}

package/src/components/alert-dialog/index.ts

@@ -0,0 +1,15 @@
+export {
+  AlertDialog,
+  AlertDialogAction,
+  type AlertDialogActionProps,
+  AlertDialogCancel,
+  AlertDialogContent,
+  type AlertDialogContentProps,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from './alert-dialog'
+export { alertDialogStyles } from './alert-dialog.styles'
+export { type ConfirmFn, type ConfirmOptions, ConfirmProvider, useConfirm } from './confirm'

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/calendar/calendar.styles.ts

@@ -0,0 +1,50 @@
+import type { StylesEntry } from '../../utils/registry'
+import { focusRing, transition } from '../../utils/styles'
+import { tv } from '../../utils/tv'
+
+export const calendarStyles = tv({
+  slots: {
+    root: 'relative w-fit p-3 text-small text-foreground',
+    months: 'relative flex flex-col gap-6 sm:flex-row',
+    month: 'grid content-start gap-3',
+    monthCaption: 'flex h-8 items-center justify-center px-9',
+    captionLabel: 'font-medium text-foreground',
+    nav: 'pointer-events-none absolute inset-x-3 top-3 z-10 flex items-center justify-between',
+    navButton: [
+      'pointer-events-auto inline-flex size-8 cursor-pointer items-center justify-center rounded-md text-muted-foreground',
+      'hover:bg-muted hover:text-foreground disabled:pointer-events-none disabled:opacity-40',
+      transition,
+      focusRing,
+    ],
+    chevron: 'size-4',
+    monthGrid: 'border-collapse',
+    weekdays: '',
+    weekday: 'size-9 p-0 text-caption font-normal text-faint-foreground',
+    weeks: '',
+    week: '',
+    day: 'size-9 p-0 text-center align-middle',
+    dayButton: [
+      'inline-flex size-9 cursor-pointer items-center justify-center rounded-md text-small tabular-nums text-foreground',
+      'hover:bg-muted',
+      transition,
+      focusRing,
+    ],
+    today: '[&>button]:font-semibold [&>button]:text-primary',
+    selected:
+      '[&>button]:bg-primary [&>button]:text-primary-foreground [&>button]:hover:bg-primary/90',
+    outside: '[&>button]:text-faint-foreground [&>button]:opacity-60',
+    disabled: '[&>button]:pointer-events-none [&>button]:opacity-35 [&>button]:line-through',
+    rangeStart: 'rounded-l-md bg-primary/14',
+    rangeMiddle:
+      'bg-primary/14 [&>button]:rounded-none [&>button]:bg-transparent! [&>button]:text-foreground! [&>button]:hover:bg-primary/10!',
+    rangeEnd: 'rounded-r-md bg-primary/14',
+    hidden: 'invisible',
+    footer: 'pt-2 text-small text-muted-foreground',
+  },
+})
+
+declare module '@glyphui/tokens' {
+  interface GlyphComponentRegistry {
+    Calendar: StylesEntry<typeof calendarStyles>
+  }
+}