@archetypeai/ds-ui-svelte-labs 0.7.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Archetype AI
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,120 @@
+# @archetypeai/ds-ui-svelte-labs
+
+Labs primitives of the Archetype AI design system - the **experimental 0.x tier** built on top of the frozen [`@archetypeai/ds-ui-svelte-console`](./DS-UI-SVELTE-CONSOLE.md) base. Svelte 5 primitives styled with Tailwind v4 and `tailwind-variants`, wired to the `@archetypeai/ds-lib-tokens` theme, composing console primitives (Button, Card, Badge) where they need stable building blocks. TypeScript source ships as `.svelte` files (no precompilation) so consumers get full type-checking and IDE go-to-definition.
+
+Labs is versioned 0.x: breaking changes are in-contract between minor versions. Components that prove themselves graduate toward console; console itself never changes to accommodate labs.
+
+Like console, the labs flavor ships two ways from the same source:
+
+- **npm package** (this document's default) - how apps **consume** primitives: they stay in `node_modules`, imported per-subpath, updated by version bump. The package is the source of truth.
+- **shadcn-svelte registry** - how primitives get **modified or extended**: pull a primitive's editable source into your app, change it, then port the change back into the package.
+
+## Install
+
+```sh
+npm i @archetypeai/ds-ui-svelte-labs @archetypeai/ds-ui-svelte-console
+```
+
+Then install the peer dependencies shared by all subpaths:
+
+```sh
+npm i svelte tailwindcss bits-ui tailwind-variants tailwind-merge clsx @lucide/svelte @archetypeai/ds-lib-tokens
+```
+
+### Per-subpath peer dependencies
+
+The chart-family subpaths additionally require heavy visualization peers that the other subpaths never load (they are declared as optional peers, so npm does not auto-install them):
+
+| Subpath | Extra peers |
+|---|---|
+| `primitives/chart` | `layerchart` |
+| `primitives/scatter-chart` | `layerchart`, `d3-scale` |
+| `primitives/sensor-chart` | `layerchart`, `d3-scale`, `d3-shape` |
+
+```sh
+npm i layerchart@2.0.0-next.46 d3-scale d3-shape
+```
+
+`layerchart` is pinned to an exact 2.0 pre-release - prerelease versions break APIs between builds, so install the pinned version (labs is 0.x - churn here is in-contract).
+
+## Tailwind v4 setup (mandatory)
+
+Tailwind v4 does not scan `node_modules` by default. Without the `@source` directives below, every class in this package is purged at consumer build time and components render unstyled.
+
+In your consumer's `app.css`, in this order:
+
+```css
+@import 'tailwindcss';
+@import '@archetypeai/ds-lib-tokens/theme.css';
+@source "../node_modules/@archetypeai/ds-ui-svelte-console/dist";
+@source "../node_modules/@archetypeai/ds-ui-svelte-labs/dist";
+```
+
+Order matters:
+
+- `tailwindcss` registers the engine.
+- `@archetypeai/ds-lib-tokens/theme.css` declares the CSS variables that component classes consume.
+- The two `@source` directives make Tailwind scan both packages - labs components compose console primitives, so both dists must be scanned.
+
+Adjust the `@source` paths if your `app.css` lives elsewhere - they must resolve to each package's `dist/` directory.
+
+## TypeScript setup
+
+In your consumer's `tsconfig.json` (or `jsconfig.json`), set:
+
+```jsonc
+{
+  "compilerOptions": {
+    "moduleResolution": "bundler"
+  }
+}
+```
+
+`"node16"` and `"nodenext"` also work. Without one of these, the `types` condition in this package's `exports` map is bypassed, types fall back to the `default` JS file, and editor features degrade.
+
+## Usage
+
+Each primitive lives at its own subpath. There is no barrel `import { Logo } from '@archetypeai/ds-ui-svelte-labs'` - subpaths keep `layerchart` and the d3 packages out of bundles for consumers who never touch the chart primitives.
+
+```svelte
+<script lang="ts">
+  import Logo from '@archetypeai/ds-ui-svelte-labs/primitives/logo'
+  import Menubar from '@archetypeai/ds-ui-svelte-labs/primitives/menubar'
+  import Slider from '@archetypeai/ds-ui-svelte-labs/primitives/slider'
+
+  let volume = $state(50)
+</script>
+
+<Menubar />
+<Logo size="lg" />
+<Slider type="single" bind:value={volume} max={100} />
+```
+
+## Per-primitive subpaths
+
+| Primitive | Import path |
+|---|---|
+| AspectRatio | `@archetypeai/ds-ui-svelte-labs/primitives/aspect-ratio` |
+| Chart | `@archetypeai/ds-ui-svelte-labs/primitives/chart` |
+| Kbd | `@archetypeai/ds-ui-svelte-labs/primitives/kbd` |
+| Logo | `@archetypeai/ds-ui-svelte-labs/primitives/logo` |
+| Menubar | `@archetypeai/ds-ui-svelte-labs/primitives/menubar` |
+| ScatterChart | `@archetypeai/ds-ui-svelte-labs/primitives/scatter-chart` |
+| SensorChart | `@archetypeai/ds-ui-svelte-labs/primitives/sensor-chart` |
+| Slider | `@archetypeai/ds-ui-svelte-labs/primitives/slider` |
+| Switch | `@archetypeai/ds-ui-svelte-labs/primitives/switch` |
+| Toggle | `@archetypeai/ds-ui-svelte-labs/primitives/toggle` |
+| VideoPlayer | `@archetypeai/ds-ui-svelte-labs/primitives/video-player` |
+
+Class-merging and element-ref type helpers re-export from console at `@archetypeai/ds-ui-svelte-labs/primitives/utils` (a single `cn`/`twMerge` instance exists in the tree), alongside the labs domain helpers (`healthTier`, `formatMMSS`, `clamp`).
+
+## Extending console primitives
+
+Labs adapts console primitives without ever changing console, using this escape-hatch ladder (in order):
+
+1. `class` prop overrides on the console component
+2. `data-slot` attribute selectors in consumer CSS
+3. `tv({ extend })` on console's exported variant clusters
+4. (rare) a labs wrapper component
+
+This document is the source for the package README (copied by `prepack`); the full design-system docs live in the repository's [readme](https://github.com/archetypeai/design-system).

package/dist/primitives/aspect-ratio/aspect-ratio.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+  import { AspectRatio as AspectRatioPrimitive } from 'bits-ui';
+  import type { AspectRatioProps } from './types.js';
+
+  let { ref = $bindable(null), ...restProps }: AspectRatioProps = $props();
+</script>
+
+<AspectRatioPrimitive.Root bind:ref data-slot="aspect-ratio" {...restProps} />

package/dist/primitives/aspect-ratio/aspect-ratio.svelte.d.ts

@@ -0,0 +1,4 @@
+import { AspectRatio as AspectRatioPrimitive } from 'bits-ui';
+declare const AspectRatio: import("svelte").Component<AspectRatioPrimitive.RootProps, {}, "ref">;
+type AspectRatio = ReturnType<typeof AspectRatio>;
+export default AspectRatio;

package/dist/primitives/aspect-ratio/index.d.ts

@@ -0,0 +1,4 @@
+import Root from './aspect-ratio.svelte';
+export { type AspectRatioProps } from './types.js';
+export { Root, Root as AspectRatio };
+export default Root;

package/dist/primitives/aspect-ratio/index.js

@@ -0,0 +1,6 @@
+import Root from './aspect-ratio.svelte';
+export {} from './types.js';
+export { Root, 
+//
+Root as AspectRatio };
+export default Root;

package/dist/primitives/aspect-ratio/types.d.ts

@@ -0,0 +1,2 @@
+import type { AspectRatio as AspectRatioPrimitive } from 'bits-ui';
+export type AspectRatioProps = AspectRatioPrimitive.RootProps;

package/dist/primitives/aspect-ratio/types.js

@@ -0,0 +1 @@
+export {};

package/dist/primitives/chart/chart-container.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+  import { cn } from '../utils.js';
+  import ChartStyle from './chart-style.svelte';
+  import { setChartContext } from './chart-utils.js';
+  import { chartContainerVariants, type ChartContainerProps } from './types.js';
+
+  const uid = $props.id();
+
+  let {
+    ref = $bindable(null),
+    id = uid,
+    class: className,
+    children,
+    config,
+    ...restProps
+  }: ChartContainerProps = $props();
+
+  let chartId = $derived(`chart-${id || uid.replace(/:/g, '')}`);
+
+  setChartContext({
+    get config() {
+      return config;
+    }
+  });
+</script>
+
+<div
+  bind:this={ref}
+  data-chart={chartId}
+  data-slot="chart"
+  class={cn(chartContainerVariants(), className)}
+  {...restProps}
+>
+  <ChartStyle id={chartId} {config} />
+  {@render children?.()}
+</div>

package/dist/primitives/chart/chart-container.svelte.d.ts

@@ -0,0 +1,4 @@
+import { type ChartContainerProps } from './types.js';
+declare const ChartContainer: import("svelte").Component<ChartContainerProps, {}, "ref">;
+type ChartContainer = ReturnType<typeof ChartContainer>;
+export default ChartContainer;

package/dist/primitives/chart/chart-style.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+  import { THEMES, type ChartConfig } from './chart-utils.js';
+
+  let { id, config }: { id: string; config: ChartConfig } = $props();
+
+  const colorConfig = $derived(
+    config ? Object.entries(config).filter(([, config]) => config.theme || config.color) : null
+  );
+
+  const themeContents = $derived.by(() => {
+    if (!colorConfig || !colorConfig.length) return;
+
+    const themeContents = [];
+    for (let [_theme, prefix] of Object.entries(THEMES)) {
+      let content = `${prefix} [data-chart=${id}] {\n`;
+      const color = colorConfig.map(([key, itemConfig]) => {
+        const theme = _theme as keyof typeof itemConfig.theme;
+        const color = itemConfig.theme?.[theme] || itemConfig.color;
+        return color ? `\t--color-${key}: ${color};` : null;
+      });
+
+      content += color.join('\n') + '\n}';
+
+      themeContents.push(content);
+    }
+
+    return themeContents.join('\n');
+  });
+</script>
+
+{#if themeContents}
+  {#key id}
+    <svelte:element this={'style'}>
+      {themeContents}
+    </svelte:element>
+  {/key}
+{/if}

package/dist/primitives/chart/chart-style.svelte.d.ts

@@ -0,0 +1,8 @@
+import { type ChartConfig } from './chart-utils.js';
+type $$ComponentProps = {
+    id: string;
+    config: ChartConfig;
+};
+declare const ChartStyle: import("svelte").Component<$$ComponentProps, {}, "">;
+type ChartStyle = ReturnType<typeof ChartStyle>;
+export default ChartStyle;

package/dist/primitives/chart/chart-tooltip.svelte

@@ -0,0 +1,136 @@
+<script lang="ts">
+  import { cn } from '../utils.js';
+  import {
+    getPayloadConfigFromPayload,
+    getChartContext,
+    type TooltipPayload
+  } from './chart-utils.js';
+  import { chartTooltipVariants, type ChartTooltipProps } from './types.js';
+  import { getTooltipContext, Tooltip as TooltipPrimitive } from 'layerchart';
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  function defaultFormatter(value: any, _payload: TooltipPayload[]) {
+    return `${value}`;
+  }
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    hideLabel = false,
+    indicator = 'dot',
+    hideIndicator = false,
+    labelKey,
+    label,
+    labelFormatter = defaultFormatter,
+    labelClassName,
+    formatter,
+    nameKey,
+    color,
+    ...restProps
+  }: ChartTooltipProps = $props();
+
+  const chart = getChartContext();
+  const tooltipCtx = getTooltipContext();
+
+  const formattedLabel = $derived.by(() => {
+    if (hideLabel || !tooltipCtx.payload?.length) return null;
+
+    const [item] = tooltipCtx.payload;
+    const key = labelKey ?? item?.label ?? item?.name ?? 'value';
+
+    const itemConfig = getPayloadConfigFromPayload(chart.config, item, key);
+
+    const value =
+      !labelKey && typeof label === 'string'
+        ? (chart.config[label]?.label ?? label)
+        : (itemConfig?.label ?? item.label);
+
+    if (value === undefined) return null;
+    if (!labelFormatter) return value;
+    return labelFormatter(value, tooltipCtx.payload);
+  });
+
+  const nestLabel = $derived(tooltipCtx.payload.length === 1 && indicator !== 'dot');
+</script>
+
+{#snippet TooltipLabel()}
+  {#if formattedLabel}
+    <div class={cn('font-medium', labelClassName)}>
+      {#if typeof formattedLabel === 'function'}
+        {@render formattedLabel()}
+      {:else}
+        {formattedLabel}
+      {/if}
+    </div>
+  {/if}
+{/snippet}
+
+<TooltipPrimitive.Root variant="none">
+  <div
+    bind:this={ref}
+    data-slot="chart-tooltip"
+    class={cn(chartTooltipVariants(), className)}
+    {...restProps}
+  >
+    {#if !nestLabel}
+      {@render TooltipLabel()}
+    {/if}
+    <div class="grid gap-1.5">
+      {#each tooltipCtx.payload as item, i (item.key + i)}
+        {@const key = `${nameKey || item.key || item.name || 'value'}`}
+        {@const itemConfig = getPayloadConfigFromPayload(chart.config, item, key)}
+        {@const indicatorColor = color || item.payload?.color || item.color}
+        <div
+          class={cn(
+            '[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:size-2.5',
+            indicator === 'dot' && 'items-center'
+          )}
+        >
+          {#if formatter && item.value !== undefined && item.name}
+            {@render formatter({
+              value: item.value,
+              name: item.name,
+              item,
+              index: i,
+              payload: tooltipCtx.payload
+            })}
+          {:else}
+            {#if itemConfig?.icon}
+              <itemConfig.icon />
+            {:else if !hideIndicator}
+              <div
+                style="--color-bg: {indicatorColor}; --color-border: {indicatorColor};"
+                class={cn('border-border shrink-0 rounded-[2px] bg-(--color-bg)', {
+                  'size-2.5': indicator === 'dot',
+                  'h-full w-1': indicator === 'line',
+                  'w-0 border-[1.5px] border-dashed bg-transparent': indicator === 'dashed',
+                  'my-0.5': nestLabel && indicator === 'dashed'
+                })}
+              ></div>
+            {/if}
+            <div
+              class={cn(
+                'flex flex-1 shrink-0 justify-between leading-none',
+                nestLabel ? 'items-end' : 'items-center'
+              )}
+            >
+              <div class="grid gap-1.5">
+                {#if nestLabel}
+                  {@render TooltipLabel()}
+                {/if}
+                <span class="text-muted-foreground">
+                  {itemConfig?.label || item.name}
+                </span>
+              </div>
+              {#if item.value !== undefined}
+                <span class="text-foreground font-mono font-medium tabular-nums">
+                  {item.value.toLocaleString()}
+                </span>
+              {/if}
+            </div>
+          {/if}
+        </div>
+      {/each}
+    </div>
+  </div>
+</TooltipPrimitive.Root>

package/dist/primitives/chart/chart-tooltip.svelte.d.ts

@@ -0,0 +1,4 @@
+import { type ChartTooltipProps } from './types.js';
+declare const ChartTooltip: import("svelte").Component<ChartTooltipProps, {}, "ref">;
+type ChartTooltip = ReturnType<typeof ChartTooltip>;
+export default ChartTooltip;

package/dist/primitives/chart/chart-utils.d.ts

@@ -0,0 +1,45 @@
+import type { Tooltip } from 'layerchart';
+import { type Component, type ComponentProps, type Snippet } from 'svelte';
+export declare const THEMES: {
+    readonly light: "";
+    readonly dark: ".dark";
+};
+export declare const CHART_COLORS: readonly ["var(--chart-1)", "var(--chart-2)", "var(--chart-3)", "var(--chart-4)", "var(--chart-5)"];
+export type ChartConfig = {
+    [k in string]: {
+        label?: string;
+        icon?: Component;
+    } & ({
+        color?: string;
+        theme?: never;
+    } | {
+        color?: never;
+        theme: Record<keyof typeof THEMES, string>;
+    });
+};
+export type ChartSeries = {
+    key: string;
+    label?: string;
+    color?: string;
+};
+export type ChartAxis = 'both' | 'x' | 'y' | 'none';
+export type ExtractSnippetParams<T> = T extends Snippet<[infer P]> ? P : never;
+export type TooltipPayload = ExtractSnippetParams<ComponentProps<typeof Tooltip.Root>['children']>['payload'][number];
+export declare function getPayloadConfigFromPayload(config: ChartConfig, payload: TooltipPayload, key: string): ({
+    label?: string;
+    icon?: Component;
+} & ({
+    color?: string;
+    theme?: never;
+} | {
+    color?: never;
+    theme: Record<keyof typeof THEMES, string>;
+})) | undefined;
+type ChartContextValue = {
+    config: ChartConfig;
+};
+export declare function setChartContext(value: ChartContextValue): ChartContextValue;
+export declare function getChartContext(): ChartContextValue;
+export declare function buildChartConfig(series: ChartSeries[]): ChartConfig;
+export declare function slidingWindow<T>(data: T[], maxPoints?: number): T[];
+export {};

package/dist/primitives/chart/chart-utils.js

@@ -0,0 +1,52 @@
+import { getContext, setContext } from 'svelte';
+// constants: themes for chart colors
+export const THEMES = { light: '', dark: '.dark' };
+// constants: chart colors
+export const CHART_COLORS = [
+    'var(--chart-1)',
+    'var(--chart-2)',
+    'var(--chart-3)',
+    'var(--chart-4)',
+    'var(--chart-5)'
+];
+// utility: extracts item config from payload
+export function getPayloadConfigFromPayload(config, payload, key) {
+    if (typeof payload !== 'object' || payload === null)
+        return undefined;
+    const payloadPayload = 'payload' in payload && typeof payload.payload === 'object' && payload.payload !== null
+        ? payload.payload
+        : undefined;
+    let configLabelKey = key;
+    if (payload.key === key) {
+        configLabelKey = payload.key;
+    }
+    else if (payload.name === key) {
+        configLabelKey = payload.name;
+    }
+    else if (key in payload && typeof payload[key] === 'string') {
+        configLabelKey = payload[key];
+    }
+    else if (payloadPayload !== undefined &&
+        key in payloadPayload &&
+        typeof payloadPayload[key] === 'string') {
+        configLabelKey = payloadPayload[key];
+    }
+    return configLabelKey in config ? config[configLabelKey] : config[key];
+}
+const chartContextKey = Symbol('chart-context');
+// utility: sets chart context
+export function setChartContext(value) {
+    return setContext(chartContextKey, value);
+}
+// utility: gets chart context
+export function getChartContext() {
+    return getContext(chartContextKey);
+}
+// utility: builds chart config
+export function buildChartConfig(series) {
+    return Object.fromEntries(series.map((s) => [s.key, { label: s.label, color: s.color }]));
+}
+// utility: creates a sliding window of data
+export function slidingWindow(data, maxPoints) {
+    return maxPoints && data.length > maxPoints ? data.slice(-maxPoints) : data;
+}

package/dist/primitives/chart/index.d.ts

@@ -0,0 +1,7 @@
+import ChartContainer from './chart-container.svelte';
+import ChartTooltip from './chart-tooltip.svelte';
+import ScatterTooltip from './scatter-tooltip.svelte';
+export { getPayloadConfigFromPayload, type ChartAxis, type ChartConfig, type ChartSeries, type TooltipPayload } from './chart-utils.js';
+export { chartContainerVariants, chartTooltipVariants, scatterTooltipVariants, type ChartContainerProps, type ChartTooltipIndicator, type ChartTooltipProps, type ScatterTooltipProps } from './types.js';
+export { ChartContainer, ChartTooltip, ScatterTooltip, ChartContainer as Container, ChartTooltip as Tooltip };
+export default ChartContainer;

package/dist/primitives/chart/index.js

@@ -0,0 +1,7 @@
+import ChartContainer from './chart-container.svelte';
+import ChartTooltip from './chart-tooltip.svelte';
+import ScatterTooltip from './scatter-tooltip.svelte';
+export { getPayloadConfigFromPayload } from './chart-utils.js';
+export { chartContainerVariants, chartTooltipVariants, scatterTooltipVariants } from './types.js';
+export { ChartContainer, ChartTooltip, ScatterTooltip, ChartContainer as Container, ChartTooltip as Tooltip };
+export default ChartContainer;

package/dist/primitives/chart/scatter-tooltip.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+  import { cn } from '../utils.js';
+  import { scatterTooltipVariants, type ScatterTooltipProps } from './types.js';
+  import { getTooltipContext, Tooltip } from 'layerchart';
+
+  let { class: className }: ScatterTooltipProps = $props();
+
+  const tooltipCtx = getTooltipContext();
+
+  // layerchart can provide data in different ways depending on chart type
+  const point = $derived.by(() => {
+    // try direct data property first
+    if (tooltipCtx.data?.x !== undefined) return tooltipCtx.data;
+    // try payload array (like other charts use)
+    if (tooltipCtx.payload?.[0]?.payload) return tooltipCtx.payload[0].payload;
+    if (tooltipCtx.payload?.[0]) return tooltipCtx.payload[0];
+    return null;
+  });
+</script>
+
+<Tooltip.Root variant="none">
+  <div data-slot="scatter-tooltip" class={cn(scatterTooltipVariants(), className)}>
+    {#if point}
+      <div class="flex items-center justify-between gap-4">
+        <span class="text-muted-foreground">x</span>
+        <span class="text-foreground font-mono font-medium tabular-nums"
+          >{point.x?.toFixed(3) ?? '–'}</span
+        >
+      </div>
+      <div class="flex items-center justify-between gap-4">
+        <span class="text-muted-foreground">y</span>
+        <span class="text-foreground font-mono font-medium tabular-nums"
+          >{point.y?.toFixed(3) ?? '–'}</span
+        >
+      </div>
+    {:else}
+      <span class="text-muted-foreground">no data</span>
+    {/if}
+  </div>
+</Tooltip.Root>

package/dist/primitives/chart/scatter-tooltip.svelte.d.ts

@@ -0,0 +1,4 @@
+import { type ScatterTooltipProps } from './types.js';
+declare const ScatterTooltip: import("svelte").Component<ScatterTooltipProps, {}, "">;
+type ScatterTooltip = ReturnType<typeof ScatterTooltip>;
+export default ScatterTooltip;

package/dist/primitives/chart/types.d.ts

@@ -0,0 +1,33 @@
+import { type WithElementRef, type WithoutChildren } from '../utils.js';
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { ChartConfig, TooltipPayload } from './chart-utils.js';
+export declare const chartContainerVariants: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export declare const chartTooltipVariants: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "border-border/50 bg-background grid min-w-36 items-start gap-1.5 rounded-xs border px-2.5 py-1.5 text-xs shadow-xl", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "border-border/50 bg-background grid min-w-36 items-start gap-1.5 rounded-xs border px-2.5 py-1.5 text-xs shadow-xl", unknown, unknown, undefined>>;
+export declare const scatterTooltipVariants: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "border-border/50 bg-background grid min-w-32 items-start gap-1.5 rounded-xs border px-2.5 py-1.5 text-xs shadow-xl", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "border-border/50 bg-background grid min-w-32 items-start gap-1.5 rounded-xs border px-2.5 py-1.5 text-xs shadow-xl", unknown, unknown, undefined>>;
+export type ChartContainerProps = WithElementRef<HTMLAttributes<HTMLElement>> & {
+    config: ChartConfig;
+};
+export type ChartTooltipIndicator = 'line' | 'dot' | 'dashed';
+export type ChartTooltipProps = WithoutChildren<WithElementRef<HTMLAttributes<HTMLDivElement>>> & {
+    hideLabel?: boolean;
+    label?: string;
+    indicator?: ChartTooltipIndicator;
+    nameKey?: string;
+    labelKey?: string;
+    hideIndicator?: boolean;
+    labelClassName?: string;
+    labelFormatter?: ((value: any, payload: TooltipPayload[]) => string | number | Snippet) | null;
+    formatter?: Snippet<[
+        {
+            value: unknown;
+            name: string;
+            item: TooltipPayload;
+            index: number;
+            payload: TooltipPayload[];
+        }
+    ]>;
+};
+export type ScatterTooltipProps = {
+    class?: string;
+};

package/dist/primitives/chart/types.js

@@ -0,0 +1,45 @@
+import {} from '../utils.js';
+import { tv } from 'tailwind-variants';
+export const chartContainerVariants = tv({
+    base: [
+        'flex aspect-video justify-center overflow-visible text-xs',
+        // Overrides
+        //
+        // Stroke around dots/marks when hovering
+        '[&_.lc-highlight-point]:stroke-transparent',
+        // override the default stroke color of lines
+        '[&_.lc-line]:stroke-border/50',
+        // by default, layerchart shows a line intersecting the point when hovering, this hides that
+        '[&_.lc-highlight-line]:stroke-0',
+        // by default, when you hover a point on a stacked series chart, it will drop the opacity
+        // of the other series, this overrides that
+        '[&_.lc-area-path]:opacity-100 [&_.lc-highlight-line]:opacity-100 [&_.lc-highlight-point]:opacity-100 [&_.lc-spline-path]:opacity-100 [&_.lc-text]:text-xs [&_.lc-text-svg]:overflow-visible',
+        // We don't want the little tick lines between the axis labels and the chart, so we remove
+        // the stroke. The alternative is to manually disable `tickMarks` on the x/y axis of every
+        // chart.
+        '[&_.lc-axis-tick]:stroke-0',
+        // We don't want to display the rule on the x/y axis, as there is already going to be
+        // a grid line there and rule ends up overlapping the marks because it is rendered after
+        // the marks
+        '[&_.lc-rule-x-line:not(.lc-grid-x-rule)]:stroke-0 [&_.lc-rule-y-line:not(.lc-grid-y-rule)]:stroke-0',
+        '[&_.lc-grid-x-radial-line]:stroke-border [&_.lc-grid-x-radial-circle]:stroke-border',
+        '[&_.lc-grid-y-radial-line]:stroke-border [&_.lc-grid-y-radial-circle]:stroke-border',
+        // Legend adjustments
+        '[&_.lc-legend-swatch-button]:items-center [&_.lc-legend-swatch-button]:gap-1.5',
+        '[&_.lc-legend-swatch-group]:items-center [&_.lc-legend-swatch-group]:gap-4',
+        '[&_.lc-legend-swatch]:size-2.5 [&_.lc-legend-swatch]:rounded-[2px]',
+        // Labels
+        '[&_.lc-labels-text:not([fill])]:fill-foreground [&_text]:stroke-transparent',
+        // Tick labels on th x/y axes
+        '[&_.lc-axis-tick-label]:fill-muted-foreground [&_.lc-axis-tick-label]:font-normal',
+        '[&_.lc-tooltip-rects-g]:fill-transparent',
+        '[&_.lc-layout-svg-g]:fill-transparent',
+        '[&_.lc-root-container]:w-full'
+    ]
+});
+export const chartTooltipVariants = tv({
+    base: 'border-border/50 bg-background grid min-w-36 items-start gap-1.5 rounded-xs border px-2.5 py-1.5 text-xs shadow-xl'
+});
+export const scatterTooltipVariants = tv({
+    base: 'border-border/50 bg-background grid min-w-32 items-start gap-1.5 rounded-xs border px-2.5 py-1.5 text-xs shadow-xl'
+});

package/dist/primitives/kbd/index.d.ts

@@ -0,0 +1,5 @@
+import Root from './kbd.svelte';
+import Group from './kbd-group.svelte';
+export { kbdVariants, kbdGroupVariants, type KbdProps, type KbdGroupProps } from './types.js';
+export { Root, Group, Root as Kbd, Group as KbdGroup };
+export default Root;