@glyphui/ui 0.1.0 → 0.2.0

package/src/components/toast/index.ts

@@ -0,0 +1 @@
+export { Toaster, type ToasterProps, toast, toastStyles } from './toast'

package/src/components/toast/toast.tsx

@@ -0,0 +1,91 @@
+import type { ComponentProps } from 'react'
+import { Toaster as Sonner, toast } from 'sonner'
+import { useComponentConfig } from '../../hooks/use-component-config'
+import type { StylesEntry } from '../../utils/registry'
+import { focusRing, themedBorder, transition } from '../../utils/styles'
+import { tv } from '../../utils/tv'
+
+export const toastStyles = tv({
+  slots: {
+    toast: [
+      'group flex w-(--width) items-start gap-3 rounded-lg border-border bg-raised p-4 text-small text-foreground shadow-lg',
+      themedBorder,
+    ],
+    content: 'flex min-w-0 flex-1 flex-col gap-0.5',
+    title: 'font-medium text-foreground',
+    description: 'text-muted-foreground',
+    icon: 'mt-0.5 flex size-4 shrink-0 items-center justify-center [&>svg]:size-4',
+    actionButton: [
+      'inline-flex h-7 shrink-0 cursor-pointer items-center rounded-sm bg-primary px-2.5 text-caption font-medium text-primary-foreground hover:bg-primary/88',
+      transition,
+      focusRing,
+    ],
+    cancelButton: [
+      'inline-flex h-7 shrink-0 cursor-pointer items-center rounded-sm bg-muted px-2.5 text-caption font-medium text-muted-foreground hover:text-foreground',
+      transition,
+      focusRing,
+    ],
+    closeButton: [
+      'absolute -top-2 -left-2 flex size-5 cursor-pointer items-center justify-center rounded-pill border-border bg-raised text-muted-foreground shadow-xs hover:text-foreground [&>svg]:size-3',
+      themedBorder,
+      focusRing,
+    ],
+    success: '[&_[data-icon]]:text-success',
+    error: '[&_[data-icon]]:text-danger',
+    warning: '[&_[data-icon]]:text-warning',
+    info: '[&_[data-icon]]:text-info',
+    loading: '[&_[data-icon]]:text-muted-foreground',
+  },
+})
+
+declare module '@glyphui/tokens' {
+  interface GlyphComponentRegistry {
+    Toast: StylesEntry<typeof toastStyles>
+  }
+}
+
+export type ToasterProps = ComponentProps<typeof Sonner>
+
+/**
+ * Renders toasts sent with `toast()`. Mount once near the root. Styled entirely by the
+ * theme's tokens, so it follows the theme and color mode automatically.
+ *
+ * ```tsx
+ * toast.success('Saved')
+ * toast.promise(save(), { loading: 'Saving…', success: 'Saved', error: 'Couldn’t save' })
+ * ```
+ */
+export function Toaster(inProps: ToasterProps) {
+  const [props, slots] = useComponentConfig('Toast', inProps)
+  const { toastOptions, position = 'bottom-right', ...rest } = props
+  const s = toastStyles()
+  const classNames = toastOptions?.classNames ?? {}
+  return (
+    <Sonner
+      position={position}
+      gap={10}
+      {...rest}
+      toastOptions={{
+        ...toastOptions,
+        unstyled: true,
+        classNames: {
+          toast: s.toast({ class: [slots.toast, classNames.toast] }),
+          content: s.content({ class: [slots.content, classNames.content] }),
+          title: s.title({ class: [slots.title, classNames.title] }),
+          description: s.description({ class: [slots.description, classNames.description] }),
+          icon: s.icon({ class: [slots.icon, classNames.icon] }),
+          actionButton: s.actionButton({ class: [slots.actionButton, classNames.actionButton] }),
+          cancelButton: s.cancelButton({ class: [slots.cancelButton, classNames.cancelButton] }),
+          closeButton: s.closeButton({ class: [slots.closeButton, classNames.closeButton] }),
+          success: s.success({ class: [slots.success, classNames.success] }),
+          error: s.error({ class: [slots.error, classNames.error] }),
+          warning: s.warning({ class: [slots.warning, classNames.warning] }),
+          info: s.info({ class: [slots.info, classNames.info] }),
+          loading: s.loading({ class: [slots.loading, classNames.loading] }),
+        },
+      }}
+    />
+  )
+}
+
+export { toast }

package/src/index.ts

@@ -16,30 +16,55 @@ export {
   tokenVar,
 } from '@glyphui/tokens'
 // Components
+export * from './components/accordion'
+export * from './components/alert'
+export * from './components/alert-dialog'
+export * from './components/aspect-ratio'
 export * from './components/avatar'
 export * from './components/badge'
+export * from './components/banner'
+export * from './components/blockquote'
+export * from './components/breadcrumb'
 export * from './components/button'
 export * from './components/card'
 export * from './components/checkbox'
+export * from './components/code'
+export * from './components/combobox'
+export * from './components/command-menu'
 export * from './components/container'
+export * from './components/description-list'
+export * from './components/dialog'
+export * from './components/dropdown-menu'
 export * from './components/eyebrow'
 export * from './components/field'
+export * from './components/grid'
 export * from './components/heading'
 export * from './components/input'
 export * from './components/kbd'
 export * from './components/label'
+export * from './components/link'
+export * from './components/pagination'
+export * from './components/popover'
+export * from './components/progress'
+export * from './components/prose'
+export * from './components/radio-group'
+export * from './components/scroll-area'
 export * from './components/section'
 export * from './components/segmented-control'
 export * from './components/select'
 export * from './components/separator'
+export * from './components/sheet'
 export * from './components/skeleton'
+export * from './components/slider'
 export * from './components/spinner'
 export * from './components/stack'
+export * from './components/stat-card'
 export * from './components/switch'
 export * from './components/table'
 export * from './components/tabs'
 export * from './components/text'
 export * from './components/textarea'
+export * from './components/toast'
 export * from './components/tooltip'
 export * from './hooks'
 // Patterns

package/src/provider/glyph-provider.tsx

@@ -1,6 +1,8 @@
 import type { Theme } from '@glyphui/tokens'
 import { Tooltip } from 'radix-ui'
 import { type ReactNode, useMemo } from 'react'
+import { ConfirmProvider } from '../components/alert-dialog/confirm'
+import { Toaster, type ToasterProps } from '../components/toast/toast'
 import { glyph } from '../themes'
 import { type ColorModePreference, ColorModeProvider } from './color-mode'
 import { GlyphContext, type LinkComponent } from './glyph-context'
@@ -16,15 +18,21 @@ export interface GlyphProviderProps {
   storageKey?: string | null
   /** Your router's link, used by Navbar, Sidebar and other navigation components. */
   linkComponent?: LinkComponent
+  /**
+   * Mounts a themed `<Toaster />` so `toast()` works anywhere. `true` for defaults, or pass
+   * Toaster props (e.g. `{ position: 'top-center' }`). Off by default.
+   */
+  toaster?: boolean | ToasterProps
 }
 
-/** Provides the theme, color mode and app settings. Render once at the root. */
+/** Provides the theme, color mode, tooltips, `useConfirm()` and (optionally) toasts. Render once at the root. */
 export function GlyphProvider({
   children,
   theme = glyph,
   defaultMode,
   storageKey,
   linkComponent = 'a',
+  toaster = false,
 }: GlyphProviderProps) {
   const value = useMemo(() => ({ theme, linkComponent }), [theme, linkComponent])
   return (
@@ -34,7 +42,13 @@ export function GlyphProvider({
     >
       <GlyphContext.Provider value={value}>
         <ThemeStyle theme={theme} />
-        <Tooltip.Provider delayDuration={300}>{children}</Tooltip.Provider>
+        <Tooltip.Provider delayDuration={300}>
+          {/* useConfirm() works anywhere without setup; the dialog only mounts while open. */}
+          <ConfirmProvider>
+            {children}
+            {toaster && <Toaster {...(toaster === true ? {} : toaster)} />}
+          </ConfirmProvider>
+        </Tooltip.Provider>
       </GlyphContext.Provider>
     </ColorModeProvider>
   )