@glyphui/ui 0.2.0 → 0.4.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 (95) |
+|---|---|
+| 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 · Collapsible · DescriptionList · Kbd · StatCard · Table · Timeline · TreeView |
+| Typography | Blockquote · Code · Eyebrow · Heading · Prose · Text |
+| Layout | AspectRatio · Card · Container · Grid · Resizable · ScrollArea · Section · Separator · Stack · VisuallyHidden |
+| Patterns | AppShell · Async · DataTable · Form · 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,15 @@ const columns = [
 
 Includes sorting, search, row selection and pages, plus loading, empty, no-results and error states.
 
+### Charts: `@glyphui/ui/chart`
+
+```tsx
+<AreaChart title="Revenue" data={revenue} index="month"
+  series={[{ key: 'recurring', label: 'Recurring' }, { key: 'oneOff', label: 'One-off' }]} />
+```
+
+Series use the theme's `chart-1` to `chart-5` colors. Every chart includes a visually hidden data table for screen readers. Needs `recharts`.
+
 ### Async states
 
 ```tsx

package/dist/chart.d.ts

@@ -0,0 +1,202 @@
+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 = 'chart-1' | 'chart-2' | 'chart-3' | 'chart-4' | 'chart-5' | '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 };