@typlog/ui 0.13.1 → 0.15.0

package/base.css

@@ -5197,13 +5197,9 @@
 }
 
 /* * * * * * * * * * * * * * * * * * * */
-
 /*                                     */
-
 /*           Semantic colors           */
-
 /*                                     */
-
 /* * * * * * * * * * * * * * * * * * * */
 
 :where(.ui-root) {
@@ -5213,7 +5209,6 @@
   --color-panel-translucent: rgba(255, 255, 255, 0.7);
   --color-surface: rgba(255, 255, 255, 0.85);
 }
-
 :is(.dark, .dark-theme) :where(.ui-root) {
   --color-background: var(--gray-1);
   --color-overlay: var(--black-a8);
@@ -5223,23 +5218,16 @@
 }
 
 /* * * * * * * * * * * * * * * * * * * */
-
 /*                                     */
-
 /*            Transparency             */
-
 /*                                     */
-
 /* * * * * * * * * * * * * * * * * * * */
 
 /* Because Chrome is buggy with box-shadow transitions from "transparent" keyword and/or RGB color into P3 colors. */
-
 /* Note: using `:where` here to guarantee that the P3 color will take over regardless of the output rule order. */
-
 :where(.ui-root) {
   --color-transparent: rgb(0 0 0 / 0);
 }
-
 @supports (color: color(display-p3 1 1 1)) {
   @media (color-gamut: p3) {
     .ui-root {
@@ -5249,36 +5237,26 @@
 }
 
 /* * * * * * * * * * * * * * * * * * * */
-
 /*                                     */
-
 /*            Color scheme             */
-
 /*                                     */
-
 /* * * * * * * * * * * * * * * * * * * */
 
 /*
  * Make sure that forced light/dark appearance also sets corresponding browser colors,
  * like input autofill color and body scrollbar
  */
-
 :is(.light, .light-theme) :where(.ui-root) {
   color-scheme: light;
 }
-
 :is(.dark, .dark-theme) :where(.ui-root) {
   color-scheme: dark;
 }
 
 /* * * * * * * * * * * * * * * * * * * */
-
 /*                                     */
-
 /*   Focus, selection, and autofill    */
-
 /*                                     */
-
 /* * * * * * * * * * * * * * * * * * * */
 
 .ui-root,
@@ -5319,13 +5297,9 @@
 }
 
 /* * * * * * * * * * * * * * * * * * * */
-
 /*                                     */
-
 /*         Background and text         */
-
 /*                                     */
-
 /* * * * * * * * * * * * * * * * * * * */
 
 .ui-root {
@@ -5337,13 +5311,9 @@
 }
 
 /* * * * * * * * * * * * * * * * * * * */
-
 /*                                     */
-
 /*          Panel background           */
-
 /*                                     */
-
 /* * * * * * * * * * * * * * * * * * * */
 
 .ui-root:where([data-panel-background='solid']) {
@@ -5357,13 +5327,9 @@
 }
 
 /* * * * * * * * * * * * * * * * * * * */
-
 /*                                     */
-
 /*            Accent color             */
-
 /*                                     */
-
 /* * * * * * * * * * * * * * * * * * * */
 
 [data-accent-color='amber'] {
@@ -6225,13 +6191,9 @@
 }
 
 /* * * * * * * * * * * * * * * * * * * */
-
 /*                                     */
-
 /*             Gray color              */
-
 /*                                     */
-
 /* * * * * * * * * * * * * * * * * * * */
 
 .ui-root :where([data-gray-color='mauve']) {
@@ -6469,15 +6431,12 @@
 .r-resize-vertical {
   resize: vertical;
 }
-
 .r-resize-horizontal {
   resize: horizontal;
 }
-
 .r-resize-both {
   resize: both;
 }
-
 .ui-root {
   --shadow-1:
     inset 0 0 0 1px var(--gray-a5),

package/charts.css

@@ -0,0 +1,161 @@
+@layer components {
+  .ui-ChartRoot {
+    --vis-font-family: var(--font-family-sans);
+    --vis-axis-tick-color: var(--gray-a7);
+    --vis-axis-domain-color: var(--gray-a7);
+    --vis-axis-grid-color: var(--gray-a3);
+    --vis-axis-label-color: var(--gray-11);
+    --vis-axis-tick-label-color: var(--gray-11);
+    --vis-tooltip-padding: var(--space-3);
+    --vis-tooltip-background-color: var(--color-panel-solid);
+    --vis-tooltip-border-color: transparent;
+    --vis-tooltip-text-color: var(--gray-12);
+    --vis-tooltip-box-shadow: var(--shadow-3);
+    --vis-tooltip-shadow-color: var(--gray-a5);
+    --vis-tooltip-backdrop-filter: blur(8px);
+    --vis-color-main: var(--chart-1);
+    --vis-color0: var(--chart-1);
+    --vis-color1: var(--chart-2);
+    --vis-color2: var(--chart-3);
+    --vis-color3: var(--chart-4);
+    --vis-color4: var(--chart-5);
+    --vis-color5: var(--chart-6);
+
+    display: block;
+    box-sizing: border-box;
+    width: 100%;
+    min-width: 0;
+    color: var(--gray-12);
+  }
+
+  .ui-ChartLegend {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-3) var(--space-5);
+    color: var(--gray-11);
+    font-size: var(--font-size-2);
+    line-height: var(--line-height-2);
+  }
+
+  .ui-ChartLegend:where(.r-orientation-vertical) {
+    flex-direction: column;
+    gap: var(--space-2);
+  }
+
+  .ui-ChartLegend:where(.r-orientation-horizontal.r-align-center) {
+    justify-content: center;
+  }
+
+  .ui-ChartLegend:where(.r-orientation-horizontal.r-align-end) {
+    justify-content: flex-end;
+  }
+
+  .ui-ChartLegend:where(.r-orientation-vertical.r-align-center) {
+    align-items: center;
+  }
+
+  .ui-ChartLegend:where(.r-orientation-vertical.r-align-end) {
+    align-items: flex-end;
+  }
+
+  .ui-ChartLegendItem {
+    display: inline-flex;
+    align-items: center;
+    min-width: 0;
+    gap: var(--space-2);
+  }
+
+  .ui-ChartLegendMarker,
+  .ui-ChartTooltipIndicator {
+    flex: 0 0 auto;
+    width: 0.625rem;
+    height: 0.625rem;
+    border-radius: var(--radius-full);
+  }
+
+  .ui-ChartLegendLabel {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .ui-ChartTooltip {
+    max-width: min(20rem, calc(100vw - var(--space-4)));
+    font-size: var(--font-size-2);
+    line-height: var(--line-height-2);
+  }
+
+  .ui-ChartTooltipContent {
+    display: grid;
+    min-width: 8rem;
+    gap: var(--space-2);
+  }
+
+  .ui-ChartTooltipLabel {
+    color: var(--gray-12);
+    font-weight: var(--font-weight-medium);
+  }
+
+  .ui-ChartTooltipItems {
+    display: grid;
+    gap: var(--space-2);
+  }
+
+  .ui-ChartTooltipItem {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+  }
+
+  .ui-ChartTooltipIcon {
+    width: 0.75rem;
+    height: 0.75rem;
+    color: var(--gray-11);
+  }
+
+  .ui-ChartTooltipIndicator {
+    width: 0.625rem;
+    height: 0.625rem;
+    border: 1px solid var(--chart-tooltip-color);
+    border-radius: var(--radius-full);
+    background: var(--chart-tooltip-color);
+  }
+
+  .ui-ChartTooltipIndicator:where(.r-indicator-line) {
+    align-self: stretch;
+    width: 0.1875rem;
+    height: auto;
+    border-radius: var(--radius-1);
+  }
+
+  .ui-ChartTooltipIndicator:where(.r-indicator-dashed) {
+    align-self: stretch;
+    width: 0;
+    height: auto;
+    border-width: 0 0 0 2px;
+    border-style: dashed;
+    border-radius: 0;
+    background: transparent;
+  }
+
+  .ui-ChartTooltipSeries {
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+
+  .ui-ChartTooltipSeriesLabel {
+    overflow: hidden;
+    color: var(--gray-11);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .ui-ChartTooltipValue {
+    flex: none;
+    margin-left: auto;
+    color: var(--gray-12);
+    font-family: var(--font-family-mono);
+    font-weight: var(--font-weight-medium);
+    font-variant-numeric: tabular-nums;
+  }
+}

package/charts.d.ts

@@ -0,0 +1,233 @@
+import { AsTag } from 'reka-ui';
+import { Component } from 'vue';
+import { ComponentOptionsMixin } from 'vue';
+import { ComponentProvideOptions } from 'vue';
+import { CrosshairConfigInterface } from '@unovis/ts';
+import { DefineComponent } from 'vue';
+import { Donut } from '@unovis/ts';
+import { GroupedBar } from '@unovis/ts';
+import { IconifyIconBuildResult } from '@iconify/vue';
+import { PrimitiveProps } from 'reka-ui';
+import { PublicProps } from 'vue';
+import { StackedBar } from '@unovis/ts';
+import { TooltipConfigInterface } from '@unovis/ts';
+import { VNode } from 'vue';
+
+declare const __VLS_export: __VLS_WithSlots< DefineComponent<ChartRootProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ChartRootProps> & Readonly<{}>, {
+    as: AsTag | Component;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>, {
+    default?: (props: {
+        mounted: boolean;
+    }) => any;
+}>;
+
+declare const __VLS_export_2: <Datum = unknown>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: PublicProps & __VLS_PrettifyLocal<ChartCrosshairProps<Datum>> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {};
+    emit: {};
+}>) => VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+
+declare const __VLS_export_3: DefineComponent<ChartTooltipProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ChartTooltipProps> & Readonly<{}>, {
+    contentComponent: Component;
+    contentProps: Record<string, unknown>;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+
+declare const __VLS_export_4: __VLS_WithSlots_2< DefineComponent<{}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>, {
+    default: (props: ChartAreaGradientSlotProps) => any;
+}>;
+
+declare const __VLS_export_5: __VLS_WithSlots_3< DefineComponent<ChartTooltipContentProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ChartTooltipContentProps> & Readonly<{}>, {
+    indicator: ChartTooltipIndicator;
+    config: ChartConfig;
+    payload: Record<string, unknown>;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>, {
+    default?: (props: {
+        items: {
+            index: number;
+            icon: IconifyIconBuildResult | undefined;
+            key: string;
+            value: unknown;
+            series: ChartSeries;
+        }[];
+        label: string | undefined;
+    }) => any;
+}>;
+
+declare const __VLS_export_6: __VLS_WithSlots_4< DefineComponent<ChartLegendProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ChartLegendProps> & Readonly<{}>, {
+    as: AsTag | Component;
+    orientation: "horizontal" | "vertical";
+    align: "start" | "center" | "end";
+    ariaLabel: string;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>, {
+    item?: (props: {
+        key: string;
+        series: ChartSeries;
+        index: number;
+    }) => any;
+} & {
+    marker?: (props: {
+        key: string;
+        series: ChartSeries;
+        index: number;
+    }) => any;
+}>;
+
+declare type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};
+
+declare type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+
+declare type __VLS_WithSlots_2<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+
+declare type __VLS_WithSlots_3<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+
+declare type __VLS_WithSlots_4<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+
+export declare const ChartAreaGradient: typeof __VLS_export_4;
+
+export declare type ChartAreaGradientColor = (_data: unknown, index: number) => string;
+
+export declare interface ChartAreaGradientSlotProps {
+    /** SVG definitions to pass to the Unovis container's `svgDefs` prop. */
+    svgDefs: string;
+    /** Unovis color accessor that resolves each area series to its gradient. */
+    color: ChartAreaGradientColor;
+}
+
+/** Configuration keyed by the series identifier used by a chart primitive. */
+export declare type ChartConfig = Record<string, ChartSeries>;
+
+export declare const ChartCrosshair: typeof __VLS_export_2;
+
+/** A Typlog-themed adapter for Unovis' crosshair and its tooltip template. */
+export declare interface ChartCrosshairProps<Datum = unknown> extends /* @vue-ignore */ Omit<CrosshairConfigInterface<Datum>, 'template'> {
+    /** Vue component rendered as the crosshair tooltip content. @default ChartTooltipContent */
+    contentComponent?: Component;
+    /** Props passed to `contentComponent` in addition to payload, config, and x. */
+    contentProps?: Record<string, unknown>;
+}
+
+export declare const ChartLegend: typeof __VLS_export_6;
+
+export declare interface ChartLegendItemSlotProps {
+    key: string;
+    series: ChartSeries;
+    index: number;
+}
+
+export declare interface ChartLegendProps extends PrimitiveProps {
+    /** Layout direction for legend entries. @default "horizontal" */
+    orientation?: 'horizontal' | 'vertical';
+    /** Alignment of legend entries within the legend. @default "start" */
+    align?: 'start' | 'center' | 'end';
+    /** Accessible name for the legend list. @default "Chart legend" */
+    ariaLabel?: string;
+}
+
+export declare const ChartRoot: typeof __VLS_export;
+
+export declare interface ChartRootProps extends PrimitiveProps {
+    /** Series metadata used by ChartLegend and ChartTooltip. */
+    config: ChartConfig;
+}
+
+/** A chart field and its presentation metadata. */
+export declare interface ChartSeries {
+    /** Human-readable series name. */
+    label: string;
+    /** Identifies an x-axis/domain field. Entries default to `series`. */
+    role?: ChartSeriesRole;
+    /** Optional CSS color. Defaults to the chart palette. */
+    color?: string;
+    /** Optional Iconify icon name rendered before the series label. */
+    icon?: string;
+}
+
+/** Determines whether a configured field is the x-axis domain or a data series. */
+export declare type ChartSeriesRole = 'x' | 'series';
+
+export declare const ChartTooltip: typeof __VLS_export_3;
+
+export declare const ChartTooltipContent: typeof __VLS_export_5;
+
+export declare interface ChartTooltipContentProps {
+    /** Values keyed by the matching ChartConfig series key. */
+    payload?: Record<string, unknown>;
+    /** Series metadata. Passed automatically by createChartTooltipTemplate. */
+    config?: ChartConfig;
+    /** Domain value displayed as the tooltip label. */
+    x?: string | number | Date;
+    /** Indicator displayed beside each series. @default "dot" */
+    indicator?: ChartTooltipIndicator;
+    /** Hides the tooltip label. */
+    hideLabel?: boolean;
+    /** Hides series indicators without removing icons. */
+    hideIndicator?: boolean;
+    /** Uses a payload or config key instead of the role-x value or crosshair x. */
+    labelKey?: string;
+    /** Formats the final tooltip label. Priority: hideLabel, labelKey, role-x field, crosshair x. */
+    labelFormatter?: (value: string | number | Date) => string;
+    /** Formats a series value. */
+    valueFormatter?: (value: unknown, key: string) => string;
+}
+
+export declare type ChartTooltipIndicator = 'dot' | 'line' | 'dashed' | 'none';
+
+export declare type ChartTooltipPrimitive = typeof Donut | typeof GroupedBar | typeof StackedBar;
+
+/** A Typlog-themed adapter for Unovis' interactive tooltip. */
+export declare interface ChartTooltipProps extends /* @vue-ignore */ TooltipConfigInterface {
+    /** Unovis primitives that should automatically trigger the themed tooltip. */
+    targets?: ChartTooltipTarget[];
+    /** Vue component rendered as the tooltip content. @default ChartTooltipContent */
+    contentComponent?: Component;
+    /** Props passed to `contentComponent` in addition to payload, config, and x. */
+    contentProps?: Record<string, unknown>;
+}
+
+export declare type ChartTooltipTarget = ChartTooltipPrimitive | ChartTooltipTargetDescriptor;
+
+/** A supported Unovis primitive that can provide automatic tooltip triggers. */
+export declare interface ChartTooltipTargetDescriptor {
+    primitive: ChartTooltipPrimitive;
+    /** Maps the primitive's event datum to values keyed by ChartConfig. */
+    payload?: (data: any, index: number) => Record<string, unknown>;
+}
+
+/** Creates a synchronous Unovis template callback from a Vue tooltip component. */
+export declare function createChartTooltipTemplate(config: ChartConfig, component: Component, props?: Record<string, unknown>): (rawPayload: unknown, x?: string | number | Date) => string;
+
+export { }
+
+
+declare global {
+    interface Window {
+        turnstile: any;
+        [turnstileLoadFunction]: any;
+    }
+}