@glyphui/ui 0.4.0 → 0.5.0

package/README.md

@@ -87,17 +87,17 @@ The same tokens work in your own markup: `bg-primary`, `text-muted-foreground`,
 
 ## Components
 
-| Category | Components (95) |
+| 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 · Collapsible · DescriptionList · Kbd · StatCard · Table · Timeline · TreeView |
+| 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 · Navbar · PageHeader · Router integration · Sidebar · Theming · Utilities · Vite plugin |
+| 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`.
@@ -172,11 +172,14 @@ Includes sorting, search, row selection and pages, plus loading, empty, no-resul
 ### Charts: `@glyphui/ui/chart`
 
 ```tsx
-<AreaChart title="Revenue" data={revenue} index="month"
-  series={[{ key: 'recurring', label: 'Recurring' }, { key: 'oneOff', label: 'One-off' }]} />
+<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>
 ```
 
-Series use the theme's `chart-1` to `chart-5` colors. Every chart includes a visually hidden data table for screen readers. Needs `recharts`.
+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
 

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 = '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 };
+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 };