@glyphui/ui 0.1.0 → 0.2.0

package/dist/{states-BxPjCUxz.js → states-Rp8wZ_jH.js}

@@ -1,5 +1,5 @@
 "use client";
-import { E as tv, O as useComponentConfig, S as focusRing, T as transition, _ as Button, b as Spinner, d as InboxIcon, n as useFieldControl, o as CheckIcon, p as MinusIcon, r as AlertIcon, w as themedBorder } from "./field-context-B8cYheXz.js";
+import { O as useComponentConfig, S as InboxIcon, _ as CheckIcon, c as tv, f as themedBorder, m as AlertIcon, n as useFieldControl, o as Spinner, p as transition, r as Button, u as focusRing, w as MinusIcon } from "./field-context-B6WOcK5m.js";
 import { Checkbox } from "radix-ui";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/checkbox/checkbox.tsx

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@glyphui/ui",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "React components on Tailwind CSS v4 that take their entire look from one theme file. Forms, data tables, app layouts and async states included.",
   "license": "MIT",
   "author": "Mohak Gupta (https://github.com/khalmohak)",
@@ -58,10 +58,12 @@
     "!src/test"
   ],
   "dependencies": {
-    "@glyphui/tokens": "^0.1.0",
+    "@glyphui/tokens": "^0.2.0",
     "@standard-schema/spec": "^1.1.0",
     "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
     "radix-ui": "^1.6.7",
+    "sonner": "^2.0.8",
     "tailwind-merge": "^3.7.0",
     "tailwind-variants": "^3.3.1"
   },

package/src/components/accordion/accordion.styles.ts

@@ -0,0 +1,41 @@
+import type { StylesEntry } from '../../utils/registry'
+import { focusRing, themedBorder, transition } from '../../utils/styles'
+import { tv, type VariantProps } from '../../utils/tv'
+
+export const accordionStyles = tv({
+  slots: {
+    root: 'w-full',
+    item: '',
+    header: 'flex',
+    trigger: [
+      'group flex flex-1 cursor-pointer items-center justify-between gap-4 rounded-xs py-4 text-left text-body font-medium text-foreground',
+      transition,
+      focusRing,
+      'hover:text-foreground/80 disabled:cursor-not-allowed disabled:opacity-50',
+    ],
+    chevron:
+      'size-4 shrink-0 text-faint-foreground transition-transform duration-(--glyph-duration-base) ease-standard group-data-[state=open]:rotate-180',
+    content: 'overflow-hidden text-small text-muted-foreground',
+    // Opening fades and slides in (via @starting-style); closing is instant.
+    contentInner:
+      'pb-4 transition-[opacity,translate] duration-(--glyph-duration-base) ease-standard starting:-translate-y-1 starting:opacity-0',
+  },
+  variants: {
+    variant: {
+      default: { item: 'border-b border-border last:border-b-0' },
+      separated: {
+        root: 'grid gap-2',
+        item: ['rounded-lg border-border bg-surface px-4 shadow-xs', themedBorder],
+      },
+    },
+  },
+  defaultVariants: { variant: 'default' },
+})
+
+export type AccordionVariants = VariantProps<typeof accordionStyles>
+
+declare module '@glyphui/tokens' {
+  interface GlyphComponentRegistry {
+    Accordion: StylesEntry<typeof accordionStyles>
+  }
+}

package/src/components/accordion/accordion.tsx

@@ -0,0 +1,86 @@
+import { Accordion as AccordionPrimitive } from 'radix-ui'
+import { type ComponentProps, createContext, useContext } from 'react'
+import { type SlotClasses, useComponentConfig } from '../../hooks/use-component-config'
+import { ChevronDownIcon } from '../../internal/icons'
+import { type AccordionVariants, accordionStyles } from './accordion.styles'
+
+const AccordionContext = createContext<{
+  s: ReturnType<typeof accordionStyles>
+  slots: SlotClasses<'Accordion'>
+} | null>(null)
+
+function useParts() {
+  return useContext(AccordionContext) ?? { s: accordionStyles(), slots: {} }
+}
+
+export type AccordionProps = ComponentProps<typeof AccordionPrimitive.Root> & AccordionVariants
+
+/**
+ * Stacked sections that expand one at a time (`type="single"`, collapsible) or
+ * independently (`type="multiple"`). Good for FAQs and dense settings.
+ */
+export function Accordion(inProps: AccordionProps) {
+  const [props, slots] = useComponentConfig('Accordion', inProps)
+  const { variant, className, ...rest } = props
+  const s = accordionStyles({ variant })
+  return (
+    <AccordionContext.Provider value={{ s, slots }}>
+      <AccordionPrimitive.Root
+        data-slot="accordion"
+        className={s.root({ class: [slots.root, className] })}
+        {...(rest as ComponentProps<typeof AccordionPrimitive.Root>)}
+      />
+    </AccordionContext.Provider>
+  )
+}
+
+export function AccordionItem({
+  className,
+  ...props
+}: ComponentProps<typeof AccordionPrimitive.Item>) {
+  const { s, slots } = useParts()
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={s.item({ class: [slots.item, className] })}
+      {...props}
+    />
+  )
+}
+
+export function AccordionTrigger({
+  className,
+  children,
+  ...props
+}: ComponentProps<typeof AccordionPrimitive.Trigger>) {
+  const { s, slots } = useParts()
+  return (
+    <AccordionPrimitive.Header className={s.header({ class: slots.header })}>
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={s.trigger({ class: [slots.trigger, className] })}
+        {...props}
+      >
+        {children}
+        <ChevronDownIcon className={s.chevron({ class: slots.chevron })} />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  )
+}
+
+export function AccordionContent({
+  className,
+  children,
+  ...props
+}: ComponentProps<typeof AccordionPrimitive.Content>) {
+  const { s, slots } = useParts()
+  return (
+    <AccordionPrimitive.Content
+      data-slot="accordion-content"
+      className={s.content({ class: slots.content })}
+      {...props}
+    >
+      <div className={s.contentInner({ class: [slots.contentInner, className] })}>{children}</div>
+    </AccordionPrimitive.Content>
+  )
+}

package/src/components/accordion/index.ts

@@ -0,0 +1,8 @@
+export {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  type AccordionProps,
+  AccordionTrigger,
+} from './accordion'
+export { type AccordionVariants, accordionStyles } from './accordion.styles'

package/src/components/alert/alert-icons.tsx

@@ -0,0 +1,66 @@
+import type { ReactNode, SVGProps } from 'react'
+
+type IconProps = SVGProps<SVGSVGElement>
+
+function Icon({ children, ...props }: IconProps) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+      {...props}
+    >
+      {children}
+    </svg>
+  )
+}
+
+export const InfoIcon = (p: IconProps) => (
+  <Icon {...p}>
+    <circle cx="12" cy="12" r="10" />
+    <path d="M12 16v-4M12 8h.01" />
+  </Icon>
+)
+export const SuccessIcon = (p: IconProps) => (
+  <Icon {...p}>
+    <circle cx="12" cy="12" r="10" />
+    <path d="m9 12 2 2 4-4" />
+  </Icon>
+)
+export const WarningIcon = (p: IconProps) => (
+  <Icon {...p}>
+    <path d="m21.73 18-8-14a2 2 0 0 0-3.46 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" />
+    <path d="M12 9v4M12 17h.01" />
+  </Icon>
+)
+export const DangerIcon = (p: IconProps) => (
+  <Icon {...p}>
+    <circle cx="12" cy="12" r="10" />
+    <path d="m15 9-6 6M9 9l6 6" />
+  </Icon>
+)
+export const MegaphoneIcon = (p: IconProps) => (
+  <Icon {...p}>
+    <path d="m3 11 18-5v12L3 14v-3z" />
+    <path d="M11.6 16.8a3 3 0 1 1-5.8-1.6" />
+  </Icon>
+)
+
+export type IconTone = 'neutral' | 'primary' | 'info' | 'success' | 'warning' | 'danger'
+
+/** The default icon for each tone. */
+export const toneIcons: Record<IconTone, () => ReactNode> = {
+  neutral: () => <InfoIcon />,
+  primary: () => <MegaphoneIcon />,
+  info: () => <InfoIcon />,
+  success: () => <SuccessIcon />,
+  warning: () => <WarningIcon />,
+  danger: () => <DangerIcon />,
+}

package/src/components/alert/alert.styles.ts

@@ -0,0 +1,57 @@
+import type { StylesEntry } from '../../utils/registry'
+import { themedBorder } from '../../utils/styles'
+import { tv, type VariantProps } from '../../utils/tv'
+
+// Soft fills per tone. Icon color is mixed toward the foreground so it stays readable in both modes.
+export const alertStyles = tv({
+  slots: {
+    root: ['relative flex w-full items-start gap-3 rounded-md px-4 py-3 text-small', themedBorder],
+    icon: 'mt-0.5 flex size-4 shrink-0 items-center justify-center [&>svg]:size-4',
+    content: 'grid min-w-0 flex-1 gap-0.5',
+    title: 'font-medium text-foreground',
+    description:
+      'text-muted-foreground [&_a]:font-medium [&_a]:text-foreground [&_a]:underline [&_a]:underline-offset-2',
+    action: 'flex shrink-0 items-center gap-2 self-center',
+    dismiss: '-my-1 -mr-2 shrink-0',
+  },
+  variants: {
+    tone: {
+      neutral: { icon: 'text-muted-foreground' },
+      info: { icon: 'text-[color-mix(in_oklab,var(--color-info)_80%,var(--color-foreground))]' },
+      success: {
+        icon: 'text-[color-mix(in_oklab,var(--color-success)_80%,var(--color-foreground))]',
+      },
+      warning: {
+        icon: 'text-[color-mix(in_oklab,var(--color-warning)_80%,var(--color-foreground))]',
+      },
+      danger: {
+        icon: 'text-[color-mix(in_oklab,var(--color-danger)_80%,var(--color-foreground))]',
+      },
+    },
+    variant: {
+      soft: {},
+      outline: { root: 'bg-surface' },
+    },
+  },
+  compoundVariants: [
+    { variant: 'soft', tone: 'neutral', class: { root: 'border-border bg-muted' } },
+    { variant: 'soft', tone: 'info', class: { root: 'border-info/25 bg-info/8' } },
+    { variant: 'soft', tone: 'success', class: { root: 'border-success/25 bg-success/8' } },
+    { variant: 'soft', tone: 'warning', class: { root: 'border-warning/30 bg-warning/10' } },
+    { variant: 'soft', tone: 'danger', class: { root: 'border-danger/25 bg-danger/8' } },
+    { variant: 'outline', tone: 'neutral', class: { root: 'border-border-strong' } },
+    { variant: 'outline', tone: 'info', class: { root: 'border-info/50' } },
+    { variant: 'outline', tone: 'success', class: { root: 'border-success/50' } },
+    { variant: 'outline', tone: 'warning', class: { root: 'border-warning/60' } },
+    { variant: 'outline', tone: 'danger', class: { root: 'border-danger/50' } },
+  ],
+  defaultVariants: { tone: 'neutral', variant: 'soft' },
+})
+
+export type AlertVariants = VariantProps<typeof alertStyles>
+
+declare module '@glyphui/tokens' {
+  interface GlyphComponentRegistry {
+    Alert: StylesEntry<typeof alertStyles>
+  }
+}

package/src/components/alert/alert.tsx

@@ -0,0 +1,86 @@
+import type { ComponentProps, ReactNode } from 'react'
+import { useComponentConfig } from '../../hooks/use-component-config'
+import { XIcon } from '../../internal/icons'
+import { IconButton } from '../button'
+import { type AlertVariants, alertStyles } from './alert.styles'
+import { toneIcons } from './alert-icons'
+
+export interface AlertProps extends Omit<ComponentProps<'div'>, 'title'>, AlertVariants {
+  title?: ReactNode
+  /** Replaces the tone's default icon. `false` hides it. */
+  icon?: ReactNode | false
+  /** Buttons or links shown at the end. */
+  action?: ReactNode
+  /** Shows a close button that calls this. */
+  onDismiss?: () => void
+  dismissLabel?: string
+}
+
+/**
+ * An inline message about the content around it. Danger and warning alerts are announced
+ * immediately (`role="alert"`); other tones politely (`role="status"`).
+ */
+export function Alert(inProps: AlertProps) {
+  const [props, slots] = useComponentConfig('Alert', inProps)
+  const {
+    tone,
+    variant,
+    title,
+    icon,
+    action,
+    onDismiss,
+    dismissLabel = 'Dismiss',
+    className,
+    children,
+    ...rest
+  } = props
+  const resolvedTone = tone ?? 'neutral'
+  const s = alertStyles({ tone, variant })
+  const iconNode = icon === false ? null : (icon ?? toneIcons[resolvedTone]())
+  const urgent = resolvedTone === 'danger' || resolvedTone === 'warning'
+
+  return (
+    <div
+      data-slot="alert"
+      data-tone={resolvedTone}
+      role={urgent ? 'alert' : 'status'}
+      className={s.root({ class: [slots.root, className] })}
+      {...rest}
+    >
+      {iconNode && (
+        <span data-slot="alert-icon" className={s.icon({ class: slots.icon })} aria-hidden="true">
+          {iconNode}
+        </span>
+      )}
+      <div data-slot="alert-content" className={s.content({ class: slots.content })}>
+        {title && (
+          <p data-slot="alert-title" className={s.title({ class: slots.title })}>
+            {title}
+          </p>
+        )}
+        {children && (
+          <div
+            data-slot="alert-description"
+            className={s.description({ class: slots.description })}
+          >
+            {children}
+          </div>
+        )}
+      </div>
+      {action && (
+        <div data-slot="alert-action" className={s.action({ class: slots.action })}>
+          {action}
+        </div>
+      )}
+      {onDismiss && (
+        <IconButton
+          size="sm"
+          icon={<XIcon />}
+          aria-label={dismissLabel}
+          onClick={onDismiss}
+          className={s.dismiss({ class: slots.dismiss })}
+        />
+      )}
+    </div>
+  )
+}

package/src/components/alert/index.ts

@@ -0,0 +1,2 @@
+export { Alert, type AlertProps } from './alert'
+export { type AlertVariants, alertStyles } from './alert.styles'

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

@@ -0,0 +1,24 @@
+import type { StylesEntry } from '../../utils/registry'
+import { themedBorder } from '../../utils/styles'
+import { tv } from '../../utils/tv'
+
+export const alertDialogStyles = tv({
+  slots: {
+    overlay: 'fixed inset-0 z-50 animate-fade-in bg-overlay',
+    content: [
+      'fixed top-1/2 left-1/2 z-50 grid w-[calc(100vw-2rem)] max-w-md -translate-x-1/2 -translate-y-1/2 gap-5',
+      'rounded-xl border-border bg-surface p-6 text-foreground shadow-lg outline-none animate-pop-in',
+      themedBorder,
+    ],
+    header: 'flex flex-col gap-1.5',
+    title: 'font-display text-h4 text-foreground',
+    description: 'text-small text-muted-foreground',
+    footer: 'flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',
+  },
+})
+
+declare module '@glyphui/tokens' {
+  interface GlyphComponentRegistry {
+    AlertDialog: StylesEntry<typeof alertDialogStyles>
+  }
+}

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

@@ -0,0 +1,118 @@
+import { AlertDialog as AlertDialogPrimitive } from 'radix-ui'
+import type { ComponentProps } from 'react'
+import { useComponentConfig } from '../../hooks/use-component-config'
+import { Button, type ButtonProps } from '../button'
+import { alertDialogStyles } from './alert-dialog.styles'
+
+function useParts() {
+  const [, slots] = useComponentConfig('AlertDialog', {})
+  return { s: alertDialogStyles(), slots }
+}
+
+/**
+ * A modal that interrupts to ask for a decision, e.g. confirming a destructive action.
+ * Unlike Dialog it can't be dismissed by clicking outside. For a one-line confirm, use `useConfirm()`.
+ */
+export const AlertDialog = AlertDialogPrimitive.Root
+export const AlertDialogTrigger = AlertDialogPrimitive.Trigger
+
+export interface AlertDialogContentProps
+  extends ComponentProps<typeof AlertDialogPrimitive.Content> {
+  overlayClassName?: string
+}
+
+export function AlertDialogContent(inProps: AlertDialogContentProps) {
+  const [props, slots] = useComponentConfig('AlertDialog', inProps)
+  const { overlayClassName, className, ...rest } = props
+  const s = alertDialogStyles()
+  return (
+    <AlertDialogPrimitive.Portal>
+      <AlertDialogPrimitive.Overlay
+        data-slot="alert-dialog-overlay"
+        className={s.overlay({ class: [slots.overlay, overlayClassName] })}
+      />
+      <AlertDialogPrimitive.Content
+        data-slot="alert-dialog-content"
+        className={s.content({ class: [slots.content, className] })}
+        {...rest}
+      />
+    </AlertDialogPrimitive.Portal>
+  )
+}
+
+export function AlertDialogHeader({ className, ...props }: ComponentProps<'div'>) {
+  const { s, slots } = useParts()
+  return (
+    <div
+      data-slot="alert-dialog-header"
+      className={s.header({ class: [slots.header, className] })}
+      {...props}
+    />
+  )
+}
+
+export function AlertDialogTitle({
+  className,
+  ...props
+}: ComponentProps<typeof AlertDialogPrimitive.Title>) {
+  const { s, slots } = useParts()
+  return (
+    <AlertDialogPrimitive.Title
+      data-slot="alert-dialog-title"
+      className={s.title({ class: [slots.title, className] })}
+      {...props}
+    />
+  )
+}
+
+export function AlertDialogDescription({
+  className,
+  ...props
+}: ComponentProps<typeof AlertDialogPrimitive.Description>) {
+  const { s, slots } = useParts()
+  return (
+    <AlertDialogPrimitive.Description
+      data-slot="alert-dialog-description"
+      className={s.description({ class: [slots.description, className] })}
+      {...props}
+    />
+  )
+}
+
+export function AlertDialogFooter({ className, ...props }: ComponentProps<'div'>) {
+  const { s, slots } = useParts()
+  return (
+    <div
+      data-slot="alert-dialog-footer"
+      className={s.footer({ class: [slots.footer, className] })}
+      {...props}
+    />
+  )
+}
+
+export interface AlertDialogActionProps extends Omit<ButtonProps, 'variant' | 'asChild'> {
+  /** `danger` for destructive actions. */
+  tone?: 'default' | 'danger'
+}
+
+/** The confirming button. Closes the dialog. */
+export function AlertDialogAction({ tone = 'default', ...props }: AlertDialogActionProps) {
+  return (
+    <AlertDialogPrimitive.Action asChild>
+      <Button
+        data-slot="alert-dialog-action"
+        variant={tone === 'danger' ? 'danger' : 'primary'}
+        {...props}
+      />
+    </AlertDialogPrimitive.Action>
+  )
+}
+
+/** The dismissing button. Receives focus when the dialog opens, so Enter never confirms by accident. */
+export function AlertDialogCancel(props: Omit<ButtonProps, 'variant' | 'asChild'>) {
+  return (
+    <AlertDialogPrimitive.Cancel asChild>
+      <Button data-slot="alert-dialog-cancel" variant="outline" {...props} />
+    </AlertDialogPrimitive.Cancel>
+  )
+}

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'