@glyphui/ui 0.3.0 → 0.5.0

package/README.md

@@ -8,8 +8,10 @@ React components on Tailwind CSS v4 that take their whole look from **one typed
 
 ```sh
 npm install @glyphui/ui
-# optional: the form and data-table patterns
-npm install react-hook-form @hookform/resolvers zod @tanstack/react-table
+# optional: forms and data tables (TanStack Table version 8)
+npm install react-hook-form @hookform/resolvers zod @tanstack/react-table@8
+# optional: charts from @glyphui/ui/chart
+npm install recharts
 ```
 
 Requires React 19 and Tailwind CSS 4.1 or later.
@@ -18,22 +20,39 @@ Requires React 19 and Tailwind CSS 4.1 or later.
 
 ```css
 /* index.css */
+@import "@glyphui/ui/fonts.css";      /* Geist, used by the default theme */
 @import "tailwindcss";
 @import "@glyphui/ui/styles.css";
+@import "@glyphui/blocks/styles.css"; /* only with @glyphui/blocks */
 ```
 
 ```tsx
 // main.tsx
 import { GlyphProvider, presets } from '@glyphui/ui'
+import { reactRouter } from '@glyphui/ui/react-router'
 
 createRoot(document.getElementById('root')!).render(
-  <GlyphProvider theme={presets.glyph} defaultMode="system">
-    <App />
-  </GlyphProvider>,
+  <BrowserRouter>
+    <GlyphProvider theme={presets.glyph} defaultMode="system" router={reactRouter} toaster>
+      <App />
+    </GlyphProvider>
+  </BrowserRouter>,
 )
 ```
 
-To avoid a light flash for dark-mode visitors, run `getColorModeScript()` in `<head>`, or render `<ColorModeScript />` with an SSR framework.
+- `router` (optional) makes Glyph's links client-side and marks the current Sidebar, Navbar and NavigationMenu item automatically. For other routers, pass `{ Link, useIsActive }`; the [getting-started guide](https://khalmohak.github.io/glyph/getting-started) has TanStack Router and Next.js versions.
+- `toaster` mounts the toast container, so `toast.success('Saved')` works anywhere. `useConfirm()` needs no setup.
+
+To avoid a light flash for dark-mode visitors, add the Vite plugin:
+
+```ts
+// vite.config.ts
+import { glyphColorMode } from '@glyphui/ui/vite'
+
+export default defineConfig({ plugins: [react(), tailwindcss(), glyphColorMode()] })
+```
+
+With an SSR framework, render `<ColorModeScript />` in the document head instead.
 
 ## Your theme, in one file
 
@@ -57,7 +76,7 @@ export default defineTheme({
 ```
 
 A theme controls:
-- colors, separately for light and dark
+- colors, separately for light and dark, including a five-color chart palette
 - a nine-step type scale (size, line height, tracking, weight)
 - radius, shadows, border width, motion and control height
 - defaults and extra classes for each component
@@ -68,9 +87,20 @@ The same tokens work in your own markup: `bg-primary`, `text-muted-foreground`,
 
 ## Components
 
-`Button` · `IconButton` · `Badge` · `Card` · `Heading` · `Text` · `Eyebrow` · `Kbd` · `Avatar` · `Separator` · `Skeleton` · `Spinner` · `Label` · `Field` · `Input` · `Textarea` · `Checkbox` · `Switch` · `Select` · `SegmentedControl` · `Tabs` · `Tooltip` · `Table` · `Container` · `Section` · `Stack` · `ThemeScope`
-
-Accessible behavior comes from [Radix UI](https://www.radix-ui.com/). Every component accepts `className`, and most accept `asChild`.
+| Category | Components (106) |
+|---|---|
+| Actions | Button · CopyButton · Toggle |
+| Forms | Calendar · Checkbox · Combobox · DatePicker · Field · FileUpload · Input · InputOTP · Label · NumberInput · PasswordInput · RadioGroup · SegmentedControl · Select · Slider · Switch · TagInput · Textarea |
+| Overlays | Alert Dialog · ContextMenu · Dialog · Dropdown Menu · HoverCard · Modal · Popover · Sheet · Tooltip |
+| Navigation | Breadcrumb · CommandMenu · Link · NavigationMenu · Pagination · Stepper · Tabs |
+| Feedback | Alert · Banner · Progress · Skeleton · Spinner · Toast |
+| Data display | Accordion · Avatar · Badge · Carousel · Chart · ChartCard · Collapsible · DescriptionList · FunnelChart · Gauge · Heatmap · Kbd · PieChart · RadarChart · SankeyChart · ScatterChart · Sparkline · StatCard · Table · Timeline · Treemap · TreeView |
+| Typography | Blockquote · Code · Eyebrow · Heading · Prose · Text |
+| Layout | AspectRatio · Card · Container · Grid · Resizable · ScrollArea · Section · Separator · Stack · VisuallyHidden |
+| Patterns | AppShell · Async · DataTable · Form · Motion · Navbar · PageHeader · Router integration · Sidebar · Theming · Utilities · Vite plugin |
+| Blocks (`@glyphui/blocks`) | AuthCard · Cta · Faq · FeatureGrid · FeatureSplit · Hero · LogoCloud · Newsletter · Pricing · SectionHeader · SiteFooter · Stats · Testimonials |
+
+Every component has a page with live examples and props in the [docs](https://khalmohak.github.io/glyph/components). Accessible behavior comes from [Radix UI](https://www.radix-ui.com/). Every component accepts `className`, and most accept `asChild`.
 
 ## Patterns
 
@@ -80,13 +110,13 @@ Accessible behavior comes from [Radix UI](https://www.radix-ui.com/). Every comp
 import { AppShell, Sidebar, SidebarContent, SidebarItem, PageHeader } from '@glyphui/ui'
 
 <AppShell sidebar={<Sidebar><SidebarContent>
-  <SidebarItem href="/inbox" icon={<Inbox />} badge={3} active>Inbox</SidebarItem>
+  <SidebarItem href="/inbox" icon={<Inbox />} badge={3}>Inbox</SidebarItem>
 </SidebarContent></Sidebar>}>
   <PageHeader title="Inbox" actions={<Button>New</Button>} />
 </AppShell>
 ```
 
-The sidebar collapses to an icon strip on desktop and opens as a focus-trapped drawer on mobile. `Navbar` builds a responsive site header from `links` data. To use your router's link component, pass it to `GlyphProvider`: `linkComponent={RouterLink}`.
+The sidebar collapses to an icon strip on desktop and opens as a focus-trapped drawer on mobile. `Navbar` builds a responsive site header from `links` data. With `router` on `GlyphProvider`, the item for the current URL is marked active; pass `active` to override.
 
 ### Forms: `@glyphui/ui/form`
 
@@ -108,6 +138,20 @@ const form = useForm({ schema, defaultValues: { email: '' } }) // zod, valibot,
 
 Field names are checked against the schema. Server errors you return appear on their fields. If `onSubmit` throws, the error appears above the form in `<FormError />`.
 
+### Modals and confirmations
+
+```tsx
+<Modal title="New invoice" trigger={<Button>New invoice</Button>}
+  footer={<FormSubmit form={form}>Create</FormSubmit>}>   {/* outside <Form>, so pass form */}
+  <Form form={form} onSubmit={save}>…</Form>
+</Modal>
+
+const confirm = useConfirm()
+if (await confirm({ title: 'Delete invoice?', tone: 'danger' })) remove()
+```
+
+For a plain form, pass `onSubmit` to `Modal` and a `type="submit"` button in the footer.
+
 ### Data tables: `@glyphui/ui/data-table`
 
 ```tsx
@@ -125,6 +169,18 @@ const columns = [
 
 Includes sorting, search, row selection and pages, plus loading, empty, no-results and error states.
 
+### Charts: `@glyphui/ui/chart`
+
+```tsx
+<ChartCard title="Revenue" period={{ options: periods, value, onValueChange }}>
+  <AreaChart title="Revenue" data={revenue} index="month" stacked
+    series={[{ key: 'recurring', label: 'Recurring' }, { key: 'oneOff', label: 'One-off' }]}
+    referenceLines={[{ y: 40000, label: 'Target' }]} />
+</ChartCard>
+```
+
+Line, area, bar, composed, pie and donut, radar, radial bar, scatter and bubble, funnel, treemap, Sankey, calendar heatmap, gauge and sparkline charts. Series use the theme's `chart-1` to `chart-5` colors and animate at the theme's motion level. Legends toggle series, `brush` zooms, and every chart takes `loading`, `error` and an empty state. `ChartCard` adds a period selector, a "view as table" toggle and PNG/SVG download; `exportChart()` exports any chart with its theme colors baked in. Every chart includes a data table for screen readers. Needs `recharts`.
+
 ### Async states
 
 ```tsx

package/dist/chart.d.ts

@@ -1,202 +1,14 @@
-import { t as VariantProps } from "./tv-DuMh7UH2.js";
-import { t as StylesEntry } from "./registry-BGSJoiLq.js";
-import { ReactNode } from "react";
-//#region src/patterns/chart/chart-parts.d.ts
-/** Theme colors a series can use by name. Any CSS color also works. */
-type ChartColor = 'primary' | 'info' | 'success' | 'warning' | 'danger' | 'foreground' | 'muted-foreground';
-//#endregion
-//#region src/patterns/chart/chart.d.ts
-type Key<T> = Extract<keyof T, string>;
-interface ChartSeries<T> {
-  /** Field of each data row holding this series' value. */
-  key: Key<T>;
-  /** Name shown in the legend, tooltip and accessible table. Defaults to `key`. */
-  label?: string;
-  /** A theme color name (`primary`, `info`, ...) or any CSS color. Defaults follow the theme palette. */
-  color?: ChartColor | (string & {});
-}
-interface CartesianChartProps<T extends object> {
-  data: readonly T[];
-  /** Field used for the x axis, e.g. `"month"`. */
-  index: Key<T>;
-  series: readonly ChartSeries<T>[];
-  /** Accessible name; also shown as the caption unless `hideTitle` is set. */
-  title: string;
-  description?: ReactNode;
-  hideTitle?: boolean;
-  /** Formats values on the y axis, in tooltips and in the accessible table. */
-  valueFormatter?: (value: number) => string;
-  /** Plot height in pixels. Default 240. */
-  height?: number;
-  showGrid?: boolean;
-  /** Defaults to true when there is more than one series. */
-  showLegend?: boolean;
-  showYAxis?: boolean;
-  className?: string;
-}
-/** Trends over time, one line per series. */
-export declare function LineChart<T extends object>(props: CartesianChartProps<T> & {
-  curve?: 'monotone' | 'linear';
-}): import("react").JSX.Element;
-/** Trends with filled areas. `stacked` shows how series add up to a total. */
-export declare function AreaChart<T extends object>(props: CartesianChartProps<T> & {
-  stacked?: boolean;
-}): import("react").JSX.Element;
-/** Compare values across categories. `stacked` puts series on top of each other. */
-export declare function BarChart<T extends object>(props: CartesianChartProps<T> & {
-  stacked?: boolean; /** Corner radius of bar tops. Default 3. */
-  barRadius?: number;
-}): import("react").JSX.Element;
-interface DonutChartProps<T extends object> {
-  data: readonly T[];
-  /** Field naming each slice. */
-  category: Key<T>;
-  /** Field holding each slice's value. */
-  value: Key<T>;
-  title: string;
-  description?: ReactNode;
-  hideTitle?: boolean;
-  /** One color per slice, in order. Defaults follow the theme palette. */
-  colors?: readonly (ChartColor | (string & {}))[];
-  /** Content in the hole, e.g. the total. */
-  centerLabel?: ReactNode;
-  valueFormatter?: (value: number) => string;
-  /** Diameter in pixels. Default 200. */
-  size?: number;
-  showLegend?: boolean;
-  className?: string;
-}
-/** Parts of a whole. Best with five or fewer slices. */
-export declare function DonutChart<T extends object>(props: DonutChartProps<T>): import("react").JSX.Element;
-interface SparklineProps {
-  values: readonly number[];
-  /** Accessible description, e.g. "Revenue over the last 12 months, rising". */
-  title: string;
-  color?: ChartColor | (string & {});
-  /** Height in pixels. Default 36. */
-  height?: number;
-  /** Fill the area under the line. */
-  area?: boolean;
-  className?: string;
-}
-/** A tiny trend line without axes, for stat cards and table cells. */
-export declare function Sparkline({ values, title, color, height, area, className }: SparklineProps): import("react").JSX.Element;
-//#endregion
-//#region src/patterns/chart/chart.styles.d.ts
-export declare const chartStyles: import("tailwind-variants").TVReturnType<{
-  [key: string]: {
-    [key: string]: import("tailwind-variants").ClassValue | {
-      root?: import("tailwind-variants").ClassValue;
-      caption?: import("tailwind-variants").ClassValue;
-      title?: import("tailwind-variants").ClassValue;
-      description?: import("tailwind-variants").ClassValue;
-      plot?: import("tailwind-variants").ClassValue;
-      legend?: import("tailwind-variants").ClassValue;
-      legendItem?: import("tailwind-variants").ClassValue;
-      swatch?: import("tailwind-variants").ClassValue;
-      tooltipLabel?: import("tailwind-variants").ClassValue;
-      tooltipRow?: import("tailwind-variants").ClassValue;
-      tooltipName?: import("tailwind-variants").ClassValue;
-      tooltipValue?: import("tailwind-variants").ClassValue;
-      center?: import("tailwind-variants").ClassValue;
-      srOnly?: import("tailwind-variants").ClassValue;
-      tooltip?: import("tailwind-variants").ClassValue;
-    };
-  };
-} | {
-  [x: string]: {
-    [x: string]: import("tailwind-variants").ClassValue | {
-      root?: import("tailwind-variants").ClassValue;
-      caption?: import("tailwind-variants").ClassValue;
-      title?: import("tailwind-variants").ClassValue;
-      description?: import("tailwind-variants").ClassValue;
-      plot?: import("tailwind-variants").ClassValue;
-      legend?: import("tailwind-variants").ClassValue;
-      legendItem?: import("tailwind-variants").ClassValue;
-      swatch?: import("tailwind-variants").ClassValue;
-      tooltipLabel?: import("tailwind-variants").ClassValue;
-      tooltipRow?: import("tailwind-variants").ClassValue;
-      tooltipName?: import("tailwind-variants").ClassValue;
-      tooltipValue?: import("tailwind-variants").ClassValue;
-      center?: import("tailwind-variants").ClassValue;
-      srOnly?: import("tailwind-variants").ClassValue;
-      tooltip?: import("tailwind-variants").ClassValue;
-    };
-  };
-} | {}, {
-  root: string;
-  caption: string;
-  title: string;
-  description: string;
-  plot: string;
-  legend: string;
-  legendItem: string;
-  swatch: string;
-  tooltip: string[];
-  tooltipLabel: string;
-  tooltipRow: string;
-  tooltipName: string;
-  tooltipValue: string;
-  center: string;
-  srOnly: string;
-}, undefined, {
-  [key: string]: {
-    [key: string]: import("tailwind-variants").ClassValue | {
-      root?: import("tailwind-variants").ClassValue;
-      caption?: import("tailwind-variants").ClassValue;
-      title?: import("tailwind-variants").ClassValue;
-      description?: import("tailwind-variants").ClassValue;
-      plot?: import("tailwind-variants").ClassValue;
-      legend?: import("tailwind-variants").ClassValue;
-      legendItem?: import("tailwind-variants").ClassValue;
-      swatch?: import("tailwind-variants").ClassValue;
-      tooltipLabel?: import("tailwind-variants").ClassValue;
-      tooltipRow?: import("tailwind-variants").ClassValue;
-      tooltipName?: import("tailwind-variants").ClassValue;
-      tooltipValue?: import("tailwind-variants").ClassValue;
-      center?: import("tailwind-variants").ClassValue;
-      srOnly?: import("tailwind-variants").ClassValue;
-      tooltip?: import("tailwind-variants").ClassValue;
-    };
-  };
-} | {}, {
-  root: string;
-  caption: string;
-  title: string;
-  description: string;
-  plot: string;
-  legend: string;
-  legendItem: string;
-  swatch: string;
-  tooltip: string[];
-  tooltipLabel: string;
-  tooltipRow: string;
-  tooltipName: string;
-  tooltipValue: string;
-  center: string;
-  srOnly: string;
-}, import("tailwind-variants").TVReturnTypeLike<unknown, {
-  root: string;
-  caption: string;
-  title: string;
-  description: string;
-  plot: string;
-  legend: string;
-  legendItem: string;
-  swatch: string;
-  tooltip: string[];
-  tooltipLabel: string;
-  tooltipRow: string;
-  tooltipName: string;
-  tooltipValue: string;
-  center: string;
-  srOnly: string;
-}>>;
-type ChartVariants = VariantProps<typeof chartStyles>;
-declare module '@glyphui/tokens' {
-  interface GlyphComponentRegistry {
-    Chart: StylesEntry<typeof chartStyles>;
-  }
-}
-//#endregion
-export type { CartesianChartProps, ChartColor, ChartSeries, ChartVariants, DonutChartProps, SparklineProps };
+import { ChartColor, ChartColorValue, ChartLegend, ChartLegendProps, ChartStateProps, ChartTooltipCard, ChartTooltipCardProps, LegendEntry } from "./patterns/chart/chart-parts.js";
+import { AreaChart, BarChart, CartesianChartProps, ChartAxisOptions, ChartBrushOptions, ChartReferenceArea, ChartReferenceLine, ChartSeries, ComposedChart, ComposedChartProps, ComposedSeries, LineChart } from "./patterns/chart/cartesian.js";
+import { ChartCardVariants, ChartVariants, chartCardStyles, chartStyles } from "./patterns/chart/chart.styles.js";
+import { ChartCard, ChartCardProps, ChartPeriod } from "./patterns/chart/chart-card.js";
+import { ExportChartOptions, SerializeChartOptions, exportChart, serializeChart } from "./patterns/chart/export.js";
+import { FunnelChart, FunnelChartProps } from "./patterns/chart/funnel.js";
+import { Heatmap, HeatmapProps } from "./patterns/chart/heatmap.js";
+import { DonutChart, DonutChartProps, PieChart, PieChartProps } from "./patterns/chart/pie.js";
+import { Gauge, GaugeBand, GaugeProps, RadarChart, RadarChartProps, RadialBarChart, RadialBarChartProps } from "./patterns/chart/radial.js";
+import { SankeyChart, SankeyChartProps, SankeyLink, SankeyNode } from "./patterns/chart/sankey.js";
+import { ScatterChart, ScatterChartProps } from "./patterns/chart/scatter.js";
+import { Sparkline, SparklineProps } from "./patterns/chart/sparkline.js";
+import { Treemap, TreemapProps } from "./patterns/chart/treemap.js";
+export { AreaChart, BarChart, type CartesianChartProps, type ChartAxisOptions, type ChartBrushOptions, ChartCard, type ChartCardProps, type ChartCardVariants, type ChartColor, type ChartColorValue, ChartLegend, type ChartLegendProps, type ChartPeriod, type ChartReferenceArea, type ChartReferenceLine, type ChartSeries, type ChartStateProps, ChartTooltipCard, type ChartTooltipCardProps, type ChartVariants, ComposedChart, type ComposedChartProps, type ComposedSeries, DonutChart, type DonutChartProps, type ExportChartOptions, FunnelChart, type FunnelChartProps, Gauge, type GaugeBand, type GaugeProps, Heatmap, type HeatmapProps, type LegendEntry, LineChart, PieChart, type PieChartProps, RadarChart, type RadarChartProps, RadialBarChart, type RadialBarChartProps, SankeyChart, type SankeyChartProps, type SankeyLink, type SankeyNode, ScatterChart, type ScatterChartProps, type SerializeChartOptions, Sparkline, type SparklineProps, Treemap, type TreemapProps, chartCardStyles, chartStyles, exportChart, serializeChart };