@glyphui/ui 0.3.0 → 0.4.0

package/src/provider/color-mode.tsx

@@ -8,8 +8,19 @@ import {
   useMemo,
   useState,
 } from 'react'
-
-export type ColorModePreference = ColorMode | 'system'
+import {
+  type ColorModeOptions,
+  type ColorModePreference,
+  DARK_QUERY,
+  DEFAULT_STORAGE_KEY,
+  getColorModeScript,
+} from './color-mode-script'
+
+export {
+  type ColorModeOptions,
+  type ColorModePreference,
+  getColorModeScript,
+} from './color-mode-script'
 
 export interface ColorModeContextValue {
   /** What the user chose. */
@@ -21,16 +32,8 @@ export interface ColorModeContextValue {
 
 const ColorModeContext = createContext<ColorModeContextValue | null>(null)
 
-const DARK_QUERY = '(prefers-color-scheme: dark)'
 const isBrowser = typeof window !== 'undefined'
 
-export interface ColorModeOptions {
-  /** Used when nothing is stored yet. */
-  defaultMode?: ColorModePreference
-  /** localStorage key. Set to `null` to disable persistence. */
-  storageKey?: string | null
-}
-
 function readStoredMode(storageKey: string | null): ColorModePreference | null {
   if (!isBrowser || !storageKey) return null
   try {
@@ -59,7 +62,7 @@ function suppressTransitions(): () => void {
 export function ColorModeProvider({
   children,
   defaultMode = 'system',
-  storageKey = 'glyph-mode',
+  storageKey = DEFAULT_STORAGE_KEY,
 }: ColorModeOptions & { children: ReactNode }) {
   const [mode, setModeState] = useState<ColorModePreference>(
     () => readStoredMode(storageKey) ?? defaultMode,
@@ -112,15 +115,6 @@ export function useColorMode(): ColorModeContextValue {
  * Inline script that sets `data-mode` on `<html>` before first paint, so a dark-mode
  * visitor never sees a light flash. Put it in `<head>`.
  */
-export function getColorModeScript({
-  defaultMode = 'system',
-  storageKey = 'glyph-mode',
-}: ColorModeOptions = {}): string {
-  return `(function(){try{var d=${JSON.stringify(defaultMode)},m=null;${
-    storageKey ? `m=localStorage.getItem(${JSON.stringify(storageKey)});` : ''
-  }if(m!=='light'&&m!=='dark'&&m!=='system')m=d;if(m==='system')m=matchMedia('${DARK_QUERY}').matches?'dark':'light';var r=document.documentElement;r.dataset.mode=m;r.style.colorScheme=m}catch(e){}})()`
-}
-
 /** `<script>` element version of `getColorModeScript` for SSR frameworks. */
 export function ColorModeScript(props: ColorModeOptions) {
   return (

package/src/provider/glyph-context.ts

@@ -22,9 +22,29 @@ export interface LinkComponentProps {
  */
 export type LinkComponent = ElementType<LinkComponentProps>
 
+export interface IsActiveOptions {
+  /** Match only this exact path, not its children. Default false. */
+  end?: boolean
+}
+
+/**
+ * A hook that reports whether `href` is the current location. Glyph calls it once per
+ * navigation item on every render, so it must follow the rules of hooks.
+ */
+export type UseIsActive = (href: string, options?: IsActiveOptions) => boolean
+
+/** Connects Glyph's navigation components to your router. */
+export interface GlyphRouter {
+  /** Renders links client-side. */
+  Link: LinkComponent
+  /** Marks Sidebar, Navbar and NavigationMenu items active automatically. */
+  useIsActive?: UseIsActive
+}
+
 export interface GlyphContextValue {
   theme: Theme
   linkComponent: LinkComponent
+  useIsActive: UseIsActive
 }
 
 export const GlyphContext = createContext<GlyphContextValue | null>(null)
@@ -40,3 +60,21 @@ export function useGlyph(): GlyphContextValue {
 export function useLinkComponent(): LinkComponent {
   return useContext(GlyphContext)?.linkComponent ?? 'a'
 }
+
+export const neverActive: UseIsActive = () => false
+
+/**
+ * Whether `href` is the current page, using the router passed to `GlyphProvider`.
+ * Returns `explicit` when it is set, so an `active` prop always wins.
+ */
+export function useIsActive(
+  href: string | undefined,
+  options?: IsActiveOptions & { explicit?: boolean | undefined },
+): boolean {
+  const isActive = useContext(GlyphContext)?.useIsActive ?? neverActive
+  const { explicit, ...matchOptions } = options ?? {}
+  // Always call the router hook so the hook order never changes between renders.
+  const matched = isActive(href ?? '', matchOptions)
+  if (explicit !== undefined) return explicit
+  return href ? matched : false
+}

package/src/provider/glyph-provider.tsx

@@ -5,7 +5,7 @@ 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'
+import { GlyphContext, type GlyphRouter, type LinkComponent, neverActive } from './glyph-context'
 import { ThemeStyle } from './theme-style'
 
 export interface GlyphProviderProps {
@@ -16,7 +16,13 @@ export interface GlyphProviderProps {
   defaultMode?: ColorModePreference
   /** localStorage key for the user's color mode. `null` disables persistence. */
   storageKey?: string | null
-  /** Your router's link, used by Navbar, Sidebar and other navigation components. */
+  /**
+   * Your router: its link component, plus an optional `useIsActive` hook that marks the
+   * current page in Sidebar, Navbar and NavigationMenu. React Router:
+   * `import { reactRouter } from '@glyphui/ui/react-router'`.
+   */
+  router?: GlyphRouter
+  /** Your router's link only. Prefer `router`, which also handles active items. */
   linkComponent?: LinkComponent
   /**
    * Mounts a themed `<Toaster />` so `toast()` works anywhere. `true` for defaults, or pass
@@ -31,10 +37,16 @@ export function GlyphProvider({
   theme = glyph,
   defaultMode,
   storageKey,
-  linkComponent = 'a',
+  router,
+  linkComponent,
   toaster = false,
 }: GlyphProviderProps) {
-  const value = useMemo(() => ({ theme, linkComponent }), [theme, linkComponent])
+  const Link = router?.Link ?? linkComponent ?? 'a'
+  const useIsActive = router?.useIsActive ?? neverActive
+  const value = useMemo(
+    () => ({ theme, linkComponent: Link, useIsActive }),
+    [theme, Link, useIsActive],
+  )
   return (
     <ColorModeProvider
       {...(defaultMode !== undefined && { defaultMode })}

package/src/provider/index.ts

@@ -9,9 +9,13 @@ export {
 } from './color-mode'
 export {
   type GlyphContextValue,
+  type GlyphRouter,
+  type IsActiveOptions,
   type LinkComponent,
   type LinkComponentProps,
+  type UseIsActive,
   useGlyph,
+  useIsActive,
   useLinkComponent,
 } from './glyph-context'
 export { GlyphProvider, type GlyphProviderProps } from './glyph-provider'

package/src/provider/theme-scope.tsx

@@ -2,7 +2,7 @@ import { type ColorMode, scopeSelector, type Theme } from '@glyphui/tokens'
 import { Slot } from 'radix-ui'
 import { type ComponentProps, useContext, useMemo } from 'react'
 import { cn } from '../utils/cn'
-import { GlyphContext } from './glyph-context'
+import { GlyphContext, neverActive } from './glyph-context'
 import { ThemeStyle } from './theme-style'
 
 export interface ThemeScopeProps extends ComponentProps<'div'> {
@@ -16,8 +16,12 @@ export interface ThemeScopeProps extends ComponentProps<'div'> {
 export function ThemeScope({ theme, mode, asChild, children, ...props }: ThemeScopeProps) {
   const parent = useContext(GlyphContext)
   const value = useMemo(
-    () => ({ theme, linkComponent: parent?.linkComponent ?? 'a' }),
-    [theme, parent?.linkComponent],
+    () => ({
+      theme,
+      linkComponent: parent?.linkComponent ?? 'a',
+      useIsActive: parent?.useIsActive ?? neverActive,
+    }),
+    [theme, parent?.linkComponent, parent?.useIsActive],
   )
   const Comp = asChild ? Slot.Root : 'div'
   return (

package/styles.css

@@ -39,7 +39,17 @@
   --color-danger-foreground: var(--glyph-danger-foreground);
   --color-info: var(--glyph-info);
   --color-info-foreground: var(--glyph-info-foreground);
+  --color-primary-text: var(--glyph-primary-text);
+  --color-success-text: var(--glyph-success-text);
+  --color-warning-text: var(--glyph-warning-text);
+  --color-danger-text: var(--glyph-danger-text);
+  --color-info-text: var(--glyph-info-text);
   --color-overlay: var(--glyph-overlay);
+  --color-chart-1: var(--glyph-chart-1);
+  --color-chart-2: var(--glyph-chart-2);
+  --color-chart-3: var(--glyph-chart-3);
+  --color-chart-4: var(--glyph-chart-4);
+  --color-chart-5: var(--glyph-chart-5);
 
   --radius-xs: var(--glyph-radius-xs);
   --radius-sm: var(--glyph-radius-sm);
@@ -142,6 +152,68 @@
     transform: translateY(-8px);
   }
 }
+@keyframes glyph-fade-out {
+  to {
+    opacity: 0;
+  }
+}
+@keyframes glyph-sheet-in-right {
+  from {
+    transform: translateX(100%);
+  }
+}
+@keyframes glyph-sheet-out-right {
+  to {
+    transform: translateX(100%);
+  }
+}
+@keyframes glyph-sheet-in-left {
+  from {
+    transform: translateX(-100%);
+  }
+}
+@keyframes glyph-sheet-out-left {
+  to {
+    transform: translateX(-100%);
+  }
+}
+@keyframes glyph-sheet-in-top {
+  from {
+    transform: translateY(-100%);
+  }
+}
+@keyframes glyph-sheet-out-top {
+  to {
+    transform: translateY(-100%);
+  }
+}
+@keyframes glyph-sheet-in-bottom {
+  from {
+    transform: translateY(100%);
+  }
+}
+@keyframes glyph-sheet-out-bottom {
+  to {
+    transform: translateY(100%);
+  }
+}
+/* Radix sets the content height variable on Accordion and Collapsible content. */
+@keyframes glyph-collapse-down {
+  from {
+    height: 0;
+  }
+  to {
+    height: var(--radix-accordion-content-height, var(--radix-collapsible-content-height));
+  }
+}
+@keyframes glyph-collapse-up {
+  from {
+    height: var(--radix-accordion-content-height, var(--radix-collapsible-content-height));
+  }
+  to {
+    height: 0;
+  }
+}
 
 @layer base {
   *,