@glyphui/ui 0.1.1 → 0.3.0

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>
   )

package/styles.css

@@ -102,6 +102,22 @@
   --animate-fade-in: glyph-fade-in var(--glyph-duration-base) var(--glyph-ease-standard);
   --animate-slide-in-left: glyph-slide-in-left var(--glyph-duration-slow) var(--glyph-ease-standard);
   --animate-slide-in-top: glyph-slide-in-top var(--glyph-duration-slow) var(--glyph-ease-standard);
+  --animate-fade-out: glyph-fade-out var(--glyph-duration-fast) var(--glyph-ease-standard);
+  --animate-sheet-in-right: glyph-sheet-in-right var(--glyph-duration-slow)
+    var(--glyph-ease-standard);
+  --animate-sheet-out-right: glyph-sheet-out-right var(--glyph-duration-base)
+    var(--glyph-ease-standard);
+  --animate-sheet-in-left: glyph-sheet-in-left var(--glyph-duration-slow) var(--glyph-ease-standard);
+  --animate-sheet-out-left: glyph-sheet-out-left var(--glyph-duration-base)
+    var(--glyph-ease-standard);
+  --animate-sheet-in-top: glyph-sheet-in-top var(--glyph-duration-slow) var(--glyph-ease-standard);
+  --animate-sheet-out-top: glyph-sheet-out-top var(--glyph-duration-base) var(--glyph-ease-standard);
+  --animate-sheet-in-bottom: glyph-sheet-in-bottom var(--glyph-duration-slow)
+    var(--glyph-ease-standard);
+  --animate-sheet-out-bottom: glyph-sheet-out-bottom var(--glyph-duration-base)
+    var(--glyph-ease-standard);
+  --animate-collapse-down: glyph-collapse-down var(--glyph-duration-base) var(--glyph-ease-standard);
+  --animate-collapse-up: glyph-collapse-up var(--glyph-duration-base) var(--glyph-ease-standard);
 }
 
 @keyframes glyph-pop-in {