@glyphui/ui 0.0.0-stage → 0.1.1

package/src/provider/glyph-context.ts

@@ -0,0 +1,42 @@
+import type { Theme } from '@glyphui/tokens'
+import {
+  createContext,
+  type ElementType,
+  type MouseEventHandler,
+  type ReactNode,
+  useContext,
+} from 'react'
+
+/** Props Glyph passes to your router's link component. */
+export interface LinkComponentProps {
+  href: string
+  className?: string
+  children?: ReactNode
+  onClick?: MouseEventHandler<HTMLAnchorElement>
+  'aria-current'?: 'page' | undefined
+}
+
+/**
+ * Any component that renders a link from these props. Plain `'a'` by default.
+ * React Router: `({ href, ...props }) => <Link to={href} {...props} />`
+ */
+export type LinkComponent = ElementType<LinkComponentProps>
+
+export interface GlyphContextValue {
+  theme: Theme
+  linkComponent: LinkComponent
+}
+
+export const GlyphContext = createContext<GlyphContextValue | null>(null)
+
+/** The active theme and app-level settings. Must be used under `GlyphProvider`. */
+export function useGlyph(): GlyphContextValue {
+  const value = useContext(GlyphContext)
+  if (!value) throw new Error('useGlyph must be used inside <GlyphProvider>.')
+  return value
+}
+
+/** The router-aware link component configured on `GlyphProvider`. */
+export function useLinkComponent(): LinkComponent {
+  return useContext(GlyphContext)?.linkComponent ?? 'a'
+}

package/src/provider/glyph-provider.tsx

@@ -0,0 +1,41 @@
+import type { Theme } from '@glyphui/tokens'
+import { Tooltip } from 'radix-ui'
+import { type ReactNode, useMemo } from 'react'
+import { glyph } from '../themes'
+import { type ColorModePreference, ColorModeProvider } from './color-mode'
+import { GlyphContext, type LinkComponent } from './glyph-context'
+import { ThemeStyle } from './theme-style'
+
+export interface GlyphProviderProps {
+  children: ReactNode
+  /** The theme for the whole app. Defaults to the `glyph` preset. */
+  theme?: Theme
+  /** Color mode used until the user picks one. */
+  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. */
+  linkComponent?: LinkComponent
+}
+
+/** Provides the theme, color mode and app settings. Render once at the root. */
+export function GlyphProvider({
+  children,
+  theme = glyph,
+  defaultMode,
+  storageKey,
+  linkComponent = 'a',
+}: GlyphProviderProps) {
+  const value = useMemo(() => ({ theme, linkComponent }), [theme, linkComponent])
+  return (
+    <ColorModeProvider
+      {...(defaultMode !== undefined && { defaultMode })}
+      {...(storageKey !== undefined && { storageKey })}
+    >
+      <GlyphContext.Provider value={value}>
+        <ThemeStyle theme={theme} />
+        <Tooltip.Provider delayDuration={300}>{children}</Tooltip.Provider>
+      </GlyphContext.Provider>
+    </ColorModeProvider>
+  )
+}

package/src/provider/index.ts

@@ -0,0 +1,18 @@
+export {
+  type ColorModeContextValue,
+  type ColorModeOptions,
+  type ColorModePreference,
+  ColorModeProvider,
+  ColorModeScript,
+  getColorModeScript,
+  useColorMode,
+} from './color-mode'
+export {
+  type GlyphContextValue,
+  type LinkComponent,
+  type LinkComponentProps,
+  useGlyph,
+  useLinkComponent,
+} from './glyph-context'
+export { GlyphProvider, type GlyphProviderProps } from './glyph-provider'
+export { ThemeScope, type ThemeScopeProps } from './theme-scope'

package/src/provider/theme-scope.tsx

@@ -0,0 +1,36 @@
+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 { ThemeStyle } from './theme-style'
+
+export interface ThemeScopeProps extends ComponentProps<'div'> {
+  theme: Theme
+  /** Force a color mode for this subtree. Follows the page by default. */
+  mode?: ColorMode
+  asChild?: boolean
+}
+
+/** Renders a subtree with a different theme, e.g. to compare themes side by side. */
+export function ThemeScope({ theme, mode, asChild, children, ...props }: ThemeScopeProps) {
+  const parent = useContext(GlyphContext)
+  const value = useMemo(
+    () => ({ theme, linkComponent: parent?.linkComponent ?? 'a' }),
+    [theme, parent?.linkComponent],
+  )
+  const Comp = asChild ? Slot.Root : 'div'
+  return (
+    <GlyphContext.Provider value={value}>
+      <ThemeStyle theme={theme} selector={scopeSelector(theme)} />
+      <Comp
+        data-glyph-theme={theme.name}
+        data-mode={mode}
+        {...props}
+        className={cn('bg-background font-sans text-foreground', props.className)}
+      >
+        {children}
+      </Comp>
+    </GlyphContext.Provider>
+  )
+}

package/src/provider/theme-style.tsx

@@ -0,0 +1,19 @@
+import { type Theme, themeToCss } from '@glyphui/tokens'
+import { useMemo } from 'react'
+
+interface ThemeStyleProps {
+  theme: Theme
+  selector?: string
+}
+
+/** Renders a theme's CSS variables. Re-renders replace the previous rules in place. */
+export function ThemeStyle({ theme, selector }: ThemeStyleProps) {
+  const css = useMemo(() => themeToCss(theme, selector ? { selector } : {}), [theme, selector])
+  return (
+    <style
+      data-glyph-theme-style={theme.name}
+      // biome-ignore lint/security/noDangerouslySetInnerHtml: generated from typed theme tokens
+      dangerouslySetInnerHTML={{ __html: css }}
+    />
+  )
+}

package/src/register.ts

@@ -0,0 +1,69 @@
+/**
+ * Registers every component with the theme engine so `theme.components` is typed:
+ * `components.Button.defaultVariants.size` only accepts 'sm' | 'md' | 'lg', and
+ * `components.Card.className` only accepts Card's slot names.
+ *
+ * Adding a component: add one line here.
+ */
+import type { avatarStyles } from './components/avatar/avatar.styles'
+import type { badgeStyles } from './components/badge/badge.styles'
+import type { buttonStyles } from './components/button/button.styles'
+import type { cardStyles } from './components/card/card.styles'
+import type { checkboxStyles } from './components/checkbox/checkbox'
+import type { eyebrowStyles } from './components/eyebrow/eyebrow.styles'
+import type { fieldStyles } from './components/field/field.styles'
+import type { headingStyles } from './components/heading/heading.styles'
+import type { inputStyles } from './components/input/input.styles'
+import type { kbdStyles } from './components/kbd/kbd'
+import type { labelStyles } from './components/label/label'
+import type { segmentedControlStyles } from './components/segmented-control/segmented-control'
+import type { selectStyles } from './components/select/select'
+import type { separatorStyles } from './components/separator/separator'
+import type { skeletonStyles } from './components/skeleton/skeleton'
+import type { spinnerStyles } from './components/spinner/spinner.styles'
+import type { switchStyles } from './components/switch/switch'
+import type { tableStyles } from './components/table/table'
+import type { tabsStyles } from './components/tabs/tabs'
+import type { textStyles } from './components/text/text.styles'
+import type { textareaStyles } from './components/textarea/textarea'
+import type { tooltipStyles } from './components/tooltip/tooltip'
+import type {
+  appShellStyles,
+  navbarStyles,
+  pageHeaderStyles,
+  sidebarStyles,
+} from './patterns/app-shell/app-shell.styles'
+import type { stateStyles } from './patterns/async/states'
+import type { StylesEntry } from './utils/registry'
+
+declare module '@glyphui/tokens' {
+  interface GlyphComponentRegistry {
+    AppShell: StylesEntry<typeof appShellStyles>
+    Avatar: StylesEntry<typeof avatarStyles>
+    Badge: StylesEntry<typeof badgeStyles>
+    Button: StylesEntry<typeof buttonStyles>
+    Card: StylesEntry<typeof cardStyles>
+    Checkbox: StylesEntry<typeof checkboxStyles>
+    EmptyState: StylesEntry<typeof stateStyles>
+    Eyebrow: StylesEntry<typeof eyebrowStyles>
+    Field: StylesEntry<typeof fieldStyles>
+    Heading: StylesEntry<typeof headingStyles>
+    Input: StylesEntry<typeof inputStyles>
+    Kbd: StylesEntry<typeof kbdStyles>
+    Label: StylesEntry<typeof labelStyles>
+    Navbar: StylesEntry<typeof navbarStyles>
+    PageHeader: StylesEntry<typeof pageHeaderStyles>
+    SegmentedControl: StylesEntry<typeof segmentedControlStyles>
+    Select: StylesEntry<typeof selectStyles>
+    Separator: StylesEntry<typeof separatorStyles>
+    Sidebar: StylesEntry<typeof sidebarStyles>
+    Skeleton: StylesEntry<typeof skeletonStyles>
+    Spinner: StylesEntry<typeof spinnerStyles>
+    Switch: StylesEntry<typeof switchStyles>
+    Table: StylesEntry<typeof tableStyles>
+    Tabs: StylesEntry<typeof tabsStyles>
+    Text: StylesEntry<typeof textStyles>
+    Textarea: StylesEntry<typeof textareaStyles>
+    Tooltip: StylesEntry<typeof tooltipStyles>
+  }
+}

package/src/themes.ts

@@ -0,0 +1,56 @@
+import './register'
+import { defineTheme, presets as tokenPresets } from '@glyphui/tokens'
+
+/**
+ * Built-in themes: the token presets from @glyphui/tokens plus per-component recipes.
+ * Extend any of them in your theme file: `defineTheme({ name: 'acme', extends: presets.glyph, ... })`.
+ */
+
+/** Precise, dark-first, one electric-blue accent, layered soft shadows, Geist. */
+export const glyph = tokenPresets.glyph
+
+/** Zero radius, heavy borders, hard offset shadows, loud color. */
+export const brutalist = defineTheme({
+  name: 'brutalist',
+  extends: tokenPresets.brutalist,
+  components: {
+    Button: {
+      className: {
+        base: 'font-bold uppercase tracking-wide shadow-sm hover:-translate-x-px hover:-translate-y-px hover:shadow-md active:translate-x-[3px] active:translate-y-[3px] active:shadow-none',
+      },
+    },
+    Badge: { className: { base: 'font-bold uppercase' } },
+    Card: { defaultVariants: { variant: 'elevated' } },
+    Heading: { className: { base: 'uppercase' } },
+    Input: { className: { root: 'shadow-sm focus-within:ring-0 focus-within:shadow-md' } },
+  },
+})
+
+/** Serif display type, warm paper neutrals, deep green ink, hairlines instead of shadows. */
+export const editorial = defineTheme({
+  name: 'editorial',
+  extends: tokenPresets.editorial,
+  components: {
+    Card: { defaultVariants: { variant: 'outline' } },
+    Eyebrow: { className: { base: 'font-sans tracking-[0.18em]' } },
+    Button: { className: { base: 'tracking-wide' } },
+  },
+})
+
+/** Pill shapes, lavender and mint, chunky rounded type, springy motion. */
+export const playful = defineTheme({
+  name: 'playful',
+  extends: tokenPresets.playful,
+  components: {
+    Button: {
+      className: {
+        base: 'font-bold hover:-translate-y-0.5 active:translate-y-0 active:scale-[0.97]',
+      },
+    },
+    Card: { defaultVariants: { variant: 'elevated' } },
+    Badge: { className: { base: 'font-semibold' } },
+  },
+})
+
+export const presets = { glyph, brutalist, editorial, playful } as const
+export type PresetName = keyof typeof presets

package/src/utils/cn.ts

@@ -0,0 +1,12 @@
+import { type ClassValue, clsx } from 'clsx'
+import { extendTailwindMerge } from 'tailwind-merge'
+import { twMergeConfig } from './tw-merge-config'
+
+const twMerge = extendTailwindMerge(twMergeConfig)
+
+/** Joins class names and resolves Tailwind conflicts (last one wins). */
+export function cn(...inputs: ClassValue[]): string {
+  return twMerge(clsx(inputs))
+}
+
+export type { ClassValue }

package/src/utils/compose-refs.ts

@@ -0,0 +1,11 @@
+import type { Ref, RefCallback } from 'react'
+
+/** Combines several refs into one callback ref. */
+export function composeRefs<T>(...refs: (Ref<T> | undefined)[]): RefCallback<T> {
+  return (node) => {
+    for (const ref of refs) {
+      if (typeof ref === 'function') ref(node)
+      else if (ref) ref.current = node
+    }
+  }
+}

package/src/utils/registry.ts

@@ -0,0 +1,9 @@
+import type { ComponentEntry } from '@glyphui/tokens'
+import type { VariantProps } from 'tailwind-variants'
+
+/** Derives a registry entry (variant props + slot names) from a component's `tv()` styles. */
+// biome-ignore lint/suspicious/noExplicitAny: matches tailwind-variants' own constraint
+export type StylesEntry<T extends ((...args: any) => any) & { slots: unknown }> = ComponentEntry<
+  VariantProps<T>,
+  Extract<keyof NonNullable<T['slots']>, string>
+>

package/src/utils/styles.ts

@@ -0,0 +1,13 @@
+/** Shared class fragments. Kept as literals so Tailwind's scanner picks them up. */
+
+export const focusRing =
+  'outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background'
+
+export const themedBorder = 'border-(length:--glyph-border-width)'
+
+export const transition =
+  'transition-[color,background-color,border-color,box-shadow,transform,opacity] duration-(--glyph-duration-base) ease-standard'
+
+/** Popover surfaces: Select, Tooltip-like menus. */
+export const popover =
+  'z-50 overflow-hidden rounded-[min(var(--radius-md),var(--radius-lg))] border-(length:--glyph-border-width) border-border bg-raised text-foreground shadow-lg animate-pop-in'

package/src/utils/tv.ts

@@ -0,0 +1,7 @@
+import { createTV, type VariantProps } from 'tailwind-variants'
+import { twMergeConfig } from './tw-merge-config'
+
+/** `tailwind-variants` preconfigured with Glyph's merge rules. All component styles use this. */
+export const tv = createTV({ twMergeConfig })
+
+export type { VariantProps }

package/src/utils/tw-merge-config.ts

@@ -0,0 +1,14 @@
+import { textTokens } from '@glyphui/tokens'
+
+/**
+ * Teaches tailwind-merge about Glyph's custom utilities so `cn('text-h1', 'text-small')`
+ * keeps only the last size instead of treating `text-h1` as a color.
+ */
+export const twMergeConfig = {
+  extend: {
+    theme: {
+      text: [...textTokens],
+      radius: ['pill'],
+    },
+  },
+}

package/styles.css

@@ -0,0 +1,178 @@
+/*
+ * Glyph ↔ Tailwind CSS v4 bridge. Import once, after tailwindcss:
+ *
+ *   @import "tailwindcss";
+ *   @import "@glyphui/ui/styles.css";
+ *
+ * Values come from the --glyph-* variables that <GlyphProvider theme={...}> injects, so one
+ * stylesheet serves every theme. Your own markup can use the same utilities (bg-primary,
+ * rounded-lg, text-h2, shadow-md, font-display, ...).
+ */
+
+/* Generate the utilities Glyph's components use. */
+@source "./src";
+
+@custom-variant dark (&:where([data-mode="dark"], [data-mode="dark"] *));
+
+@theme inline {
+  --color-background: var(--glyph-background);
+  --color-foreground: var(--glyph-foreground);
+  --color-subtle: var(--glyph-subtle);
+  --color-surface: var(--glyph-surface);
+  --color-raised: var(--glyph-raised);
+  --color-muted: var(--glyph-muted);
+  --color-muted-foreground: var(--glyph-muted-foreground);
+  --color-faint-foreground: var(--glyph-faint-foreground);
+  --color-border: var(--glyph-border);
+  --color-border-strong: var(--glyph-border-strong);
+  --color-input: var(--glyph-input);
+  --color-ring: var(--glyph-ring);
+  --color-primary: var(--glyph-primary);
+  --color-primary-foreground: var(--glyph-primary-foreground);
+  --color-secondary: var(--glyph-secondary);
+  --color-secondary-foreground: var(--glyph-secondary-foreground);
+  --color-success: var(--glyph-success);
+  --color-success-foreground: var(--glyph-success-foreground);
+  --color-warning: var(--glyph-warning);
+  --color-warning-foreground: var(--glyph-warning-foreground);
+  --color-danger: var(--glyph-danger);
+  --color-danger-foreground: var(--glyph-danger-foreground);
+  --color-info: var(--glyph-info);
+  --color-info-foreground: var(--glyph-info-foreground);
+  --color-overlay: var(--glyph-overlay);
+
+  --radius-xs: var(--glyph-radius-xs);
+  --radius-sm: var(--glyph-radius-sm);
+  --radius-md: var(--glyph-radius-md);
+  --radius-lg: var(--glyph-radius-lg);
+  --radius-xl: var(--glyph-radius-xl);
+  --radius-pill: var(--glyph-radius-pill);
+
+  --shadow-xs: var(--glyph-shadow-xs);
+  --shadow-sm: var(--glyph-shadow-sm);
+  --shadow-md: var(--glyph-shadow-md);
+  --shadow-lg: var(--glyph-shadow-lg);
+
+  --font-sans: var(--glyph-font-sans);
+  --font-display: var(--glyph-font-display);
+  --font-serif: var(--glyph-font-serif);
+  --font-mono: var(--glyph-font-mono);
+
+  --text-display: var(--glyph-text-display);
+  --text-display--line-height: var(--glyph-text-display-leading);
+  --text-display--letter-spacing: var(--glyph-text-display-tracking);
+  --text-display--font-weight: var(--glyph-text-display-weight);
+  --text-h1: var(--glyph-text-h1);
+  --text-h1--line-height: var(--glyph-text-h1-leading);
+  --text-h1--letter-spacing: var(--glyph-text-h1-tracking);
+  --text-h1--font-weight: var(--glyph-text-h1-weight);
+  --text-h2: var(--glyph-text-h2);
+  --text-h2--line-height: var(--glyph-text-h2-leading);
+  --text-h2--letter-spacing: var(--glyph-text-h2-tracking);
+  --text-h2--font-weight: var(--glyph-text-h2-weight);
+  --text-h3: var(--glyph-text-h3);
+  --text-h3--line-height: var(--glyph-text-h3-leading);
+  --text-h3--letter-spacing: var(--glyph-text-h3-tracking);
+  --text-h3--font-weight: var(--glyph-text-h3-weight);
+  --text-h4: var(--glyph-text-h4);
+  --text-h4--line-height: var(--glyph-text-h4-leading);
+  --text-h4--letter-spacing: var(--glyph-text-h4-tracking);
+  --text-h4--font-weight: var(--glyph-text-h4-weight);
+  --text-lead: var(--glyph-text-lead);
+  --text-lead--line-height: var(--glyph-text-lead-leading);
+  --text-lead--letter-spacing: var(--glyph-text-lead-tracking);
+  --text-lead--font-weight: var(--glyph-text-lead-weight);
+  --text-body: var(--glyph-text-body);
+  --text-body--line-height: var(--glyph-text-body-leading);
+  --text-body--letter-spacing: var(--glyph-text-body-tracking);
+  --text-body--font-weight: var(--glyph-text-body-weight);
+  --text-small: var(--glyph-text-small);
+  --text-small--line-height: var(--glyph-text-small-leading);
+  --text-small--letter-spacing: var(--glyph-text-small-tracking);
+  --text-small--font-weight: var(--glyph-text-small-weight);
+  --text-caption: var(--glyph-text-caption);
+  --text-caption--line-height: var(--glyph-text-caption-leading);
+  --text-caption--letter-spacing: var(--glyph-text-caption-tracking);
+  --text-caption--font-weight: var(--glyph-text-caption-weight);
+
+  --ease-standard: var(--glyph-ease-standard);
+  --ease-emphasized: var(--glyph-ease-emphasized);
+
+  --animate-pop-in: glyph-pop-in var(--glyph-duration-fast) var(--glyph-ease-standard);
+  --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);
+}
+
+@keyframes glyph-pop-in {
+  from {
+    opacity: 0;
+    transform: translateY(-2px) scale(0.98);
+  }
+}
+@keyframes glyph-fade-in {
+  from {
+    opacity: 0;
+  }
+}
+@keyframes glyph-slide-in-left {
+  from {
+    transform: translateX(-100%);
+  }
+}
+@keyframes glyph-slide-in-top {
+  from {
+    opacity: 0;
+    transform: translateY(-8px);
+  }
+}
+
+@layer base {
+  *,
+  ::before,
+  ::after {
+    border-color: var(--color-border);
+  }
+
+  html {
+    font-family: var(--font-sans);
+    font-feature-settings: var(--glyph-font-features);
+    background-color: var(--color-background);
+    color: var(--color-foreground);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-rendering: optimizeLegibility;
+  }
+
+  body {
+    font-size: var(--text-body);
+    line-height: var(--text-body--line-height);
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    text-wrap: balance;
+  }
+
+  p {
+    text-wrap: pretty;
+  }
+
+  ::selection {
+    background-color: color-mix(in oklab, var(--color-primary) 30%, transparent);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    *,
+    ::before,
+    ::after {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+    }
+  }
+}