@glyphui/ui 0.2.0 → 0.4.0

package/src/patterns/form/form.tsx

@@ -1,6 +1,6 @@
 import { standardSchemaResolver } from '@hookform/resolvers/standard-schema'
 import type { StandardSchemaV1 } from '@standard-schema/spec'
-import type { ComponentProps, ReactNode } from 'react'
+import { type ComponentProps, type MouseEvent, type ReactNode, useCallback } from 'react'
 import {
   type Control,
   Controller,
@@ -11,6 +11,7 @@ import {
   type Resolver,
   type UseFormProps,
   type UseFormReturn,
+  useFormContext,
   useFormState,
   useForm as useHookForm,
 } from 'react-hook-form'
@@ -62,12 +63,29 @@ export interface FormProps<TInput extends FieldValues, TOutput>
   onSubmit: (values: TOutput) => SubmitResult<TInput> | Promise<SubmitResult<TInput>>
 }
 
+// biome-ignore lint/suspicious/noExplicitAny: keyed by any form's control object
+type AnyControl = Control<any, any, any>
+
+/** The rendered `<form>` of each form, so a FormSubmit outside it can submit it. */
+const formElements = new WeakMap<AnyControl, HTMLFormElement>()
+
 export function Form<TInput extends FieldValues, TOutput>({
   form,
   onSubmit,
   children,
+  ref,
   ...props
 }: FormProps<TInput, TOutput>) {
+  const control = form.control as AnyControl
+  const registerElement = useCallback(
+    (element: HTMLFormElement | null) => {
+      if (element) formElements.set(control, element)
+      else formElements.delete(control)
+      if (typeof ref === 'function') ref(element)
+      else if (ref) ref.current = element
+    },
+    [control, ref],
+  )
   const submit = form.handleSubmit(async (values) => {
     try {
       const result = await onSubmit(values)
@@ -85,7 +103,7 @@ export function Form<TInput extends FieldValues, TOutput>({
 
   return (
     <FormProvider {...form}>
-      <form noValidate onSubmit={submit} {...props}>
+      <form noValidate onSubmit={submit} ref={registerElement} {...props}>
         {children}
       </form>
     </FormProvider>
@@ -122,15 +140,39 @@ export function FormField<TInput extends FieldValues, TName extends FieldPath<TI
   )
 }
 
+export interface FormSubmitProps extends Omit<ButtonProps, 'type' | 'form'> {
+  /**
+   * The form to submit, for a button outside `<Form>` such as a Modal footer:
+   * `<FormSubmit form={form}>`. Not needed inside `<Form>`.
+   */
+  // biome-ignore lint/suspicious/noExplicitAny: accepts any form regardless of its value types
+  form?: UseFormReturn<any, any, any>
+}
+
 /** Submit button that shows progress while the form submits. */
-export function FormSubmit(props: Omit<ButtonProps, 'type'>) {
-  const { isSubmitting } = useFormState()
-  return <Button type="submit" loading={isSubmitting} {...props} />
+export function FormSubmit({ form, onClick, ...props }: FormSubmitProps) {
+  const context = useFormContext()
+  const control = (form ?? context)?.control
+  if (!control) {
+    throw new Error(
+      'FormSubmit must be inside <Form> or receive form={form}, e.g. <FormSubmit form={form}> in a Modal footer.',
+    )
+  }
+  const { isSubmitting } = useFormState({ control })
+
+  if (!form) return <Button type="submit" loading={isSubmitting} onClick={onClick} {...props} />
+
+  // Outside <Form>, submit its element explicitly so validation and onSubmit run as usual.
+  const submitOutside = (event: MouseEvent<HTMLButtonElement>) => {
+    onClick?.(event)
+    if (!event.defaultPrevented) formElements.get(control)?.requestSubmit()
+  }
+  return <Button type="button" loading={isSubmitting} onClick={submitOutside} {...props} />
 }
 
 export const formErrorStyles = tv({
   slots: {
-    base: 'flex items-start gap-2 rounded-md border border-danger/30 bg-danger/8 px-3 py-2.5 text-small text-danger',
+    base: 'flex items-start gap-2 rounded-md border border-danger/30 bg-danger/8 px-3 py-2.5 text-small text-danger-text',
     icon: 'mt-0.5 size-4 shrink-0',
   },
 })

package/src/patterns/form/index.ts

@@ -6,6 +6,7 @@ export {
   type FormFieldProps,
   type FormProps,
   FormSubmit,
+  type FormSubmitProps,
   formErrorStyles,
   type SubmitResult,
   type UseFormOptions,

package/src/provider/color-mode-script.ts

@@ -0,0 +1,28 @@
+import type { ColorMode } from '@glyphui/tokens'
+
+// React-free on purpose: the Vite plugin imports this module in Node.
+
+export type ColorModePreference = ColorMode | 'system'
+
+export interface ColorModeOptions {
+  /** Used when nothing is stored yet. */
+  defaultMode?: ColorModePreference
+  /** localStorage key. Set to `null` to disable persistence. */
+  storageKey?: string | null
+}
+
+export const DARK_QUERY = '(prefers-color-scheme: dark)'
+export const DEFAULT_STORAGE_KEY = 'glyph-mode'
+
+/**
+ * A tiny inline script that sets `data-mode` on `<html>` before first paint, so dark-mode
+ * visitors never see a light flash. Use the same options as `GlyphProvider`.
+ */
+export function getColorModeScript({
+  defaultMode = 'system',
+  storageKey = DEFAULT_STORAGE_KEY,
+}: 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){}})()`
+}

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);
@@ -102,6 +112,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 {
@@ -126,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 {
   *,