layerchart 2.0.0-next.4 → 2.0.0-next.40

package/dist/components/tooltip/TooltipItem.svelte

@@ -1,6 +1,6 @@
 <script lang="ts" module>
   import type { HTMLAttributes } from 'svelte/elements';
-  import type { Without } from '../../utils/types.js';
+  import { asAny, type Without } from '../../utils/types.js';
 
   export type TooltipItemPropsWithoutHTML = {
     /**
@@ -16,7 +16,7 @@
     /**
      * Format to use when displaying the value.
      */
-    format?: FormatType;
+    format?: FormatType | FormatConfig;
 
     /**
      * Alignment of the value.
@@ -75,10 +75,9 @@
 </script>
 
 <script lang="ts">
-  import { format as formatUtil, type FormatType } from '@layerstack/utils';
+  import { format as formatUtil, type FormatType, type FormatConfig } from '@layerstack/utils';
   import { cls } from '@layerstack/tailwind';
   import type { Snippet } from 'svelte';
-  import { layerClass } from '../../utils/attributes.js';
 
   let {
     ref: refProp = $bindable(),
@@ -129,37 +128,19 @@
 
 <div
   {...props.root}
-  class={cls(
-    layerClass('tooltip-item-root'),
-    'contents',
-    classes.root,
-    className,
-    props.root?.class
-  )}
+  class={cls('lc-tooltip-item-root', classes.root, className, props.root?.class)}
   {...restProps}
   bind:this={ref}
 >
   <div
     {...props.label}
-    class={cls(
-      layerClass('tooltip-item-label'),
-      'label',
-      'flex items-center gap-2 whitespace-nowrap',
-      classes.label,
-      props.label?.class
-    )}
+    class={cls('lc-tooltip-item-label', 'label', classes.label, props.label?.class)}
     bind:this={labelRef}
   >
     {#if color}
       <div
         {...props.color}
-        class={cls(
-          layerClass('tooltip-item-color'),
-          'color',
-          'inline-block size-2 rounded-full bg-[var(--color)]',
-          classes.color,
-          props.color?.class
-        )}
+        class={cls('lc-tooltip-item-color', 'color', classes.color, props.color?.class)}
         style:--color={color}
         bind:this={colorRef}
       ></div>
@@ -174,22 +155,50 @@
   <div
     bind:this={valueRef}
     {...props.value}
-    class={cls(
-      layerClass('tooltip-item-value'),
-      'value',
-      'tabular-nums',
-      {
-        'text-right': valueAlign === 'right',
-        'text-center': valueAlign === 'center',
-      },
-      classes.value,
-      props.value?.class
-    )}
+    class={cls('lc-tooltip-item-value', 'value', classes.value, props.value?.class)}
+    data-align={valueAlign}
   >
     {#if children}
       {@render children()}
     {:else}
-      {format ? formatUtil(value, format) : value}
+      <!-- @ts-expect-error - improve types -->
+      {format ? formatUtil(value, asAny(format)) : value}
     {/if}
   </div>
 </div>
+
+<style>
+  @layer component {
+    :where(.lc-tooltip-item-root) {
+      display: contents;
+    }
+
+    :where(.lc-tooltip-item-color) {
+      display: inline-block;
+      width: 8px;
+      height: 8px;
+      border-radius: 9999px; /* full */
+      background-color: var(--color);
+    }
+
+    :where(.lc-tooltip-item-label) {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      white-space: nowrap;
+    }
+
+    :where(.lc-tooltip-item-value) {
+      /* tabular-nums */
+      font-variant-numeric: tabular-nums;
+
+      &[data-align='right'] {
+        text-align: right;
+      }
+
+      &[data-align='center'] {
+        text-align: center;
+      }
+    }
+  }
+</style>

package/dist/components/tooltip/TooltipItem.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { HTMLAttributes } from 'svelte/elements';
-import type { Without } from '../../utils/types.js';
+import { type Without } from '../../utils/types.js';
 export type TooltipItemPropsWithoutHTML = {
     /**
      * The label to display in the tooltip item.
@@ -13,7 +13,7 @@ export type TooltipItemPropsWithoutHTML = {
     /**
      * Format to use when displaying the value.
      */
-    format?: FormatType;
+    format?: FormatType | FormatConfig;
     /**
      * Alignment of the value.
      *
@@ -59,7 +59,7 @@ export type TooltipItemPropsWithoutHTML = {
     colorRef?: HTMLElement;
 };
 export type TooltipItemProps = TooltipItemPropsWithoutHTML & Without<HTMLAttributes<HTMLElement>, TooltipItemPropsWithoutHTML>;
-import { type FormatType } from '@layerstack/utils';
+import { type FormatType, type FormatConfig } from '@layerstack/utils';
 import type { Snippet } from 'svelte';
 declare const TooltipItem: import("svelte").Component<TooltipItemProps, {}, "ref" | "colorRef" | "labelRef" | "valueRef">;
 type TooltipItem = ReturnType<typeof TooltipItem>;

package/dist/components/tooltip/TooltipList.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
   import { cls } from '@layerstack/tailwind';
-  import { layerClass } from '../../utils/attributes.js';
   import type { HTMLAttributes } from 'svelte/elements';
 
   let {
@@ -19,14 +18,17 @@
   });
 </script>
 
-<div
-  bind:this={ref}
-  class={cls(
-    layerClass('tooltip-list'),
-    'grid grid-cols-[1fr_auto] gap-x-2 gap-y-1 items-center',
-    className
-  )}
-  {...restProps}
->
+<div bind:this={ref} class={cls('lc-tooltip-list', className)} {...restProps}>
   {@render children?.()}
 </div>
+
+<style>
+  @layer component {
+    :where(.lc-tooltip-list) {
+      display: grid;
+      grid-template-columns: 1fr auto;
+      gap: 4px 8px;
+      align-items: start;
+    }
+  }
+</style>

package/dist/components/tooltip/TooltipSeparator.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
   import { cls } from '@layerstack/tailwind';
-  import { layerClass } from '../../utils/attributes.js';
   import type { HTMLAttributes } from 'svelte/elements';
 
   let {
@@ -18,14 +17,23 @@
   });
 </script>
 
-<div
-  bind:this={ref}
-  class={cls(
-    layerClass('tooltip-separator'),
-    'rounded-sm bg-surface-content/20 my-1 col-span-full h-px',
-    className
-  )}
-  {...restProps}
->
+<div bind:this={ref} class={cls('lc-tooltip-separator', className)} {...restProps}>
   {@render children?.()}
 </div>
+
+<style>
+  @layer component {
+    :where(.lc-tooltip-separator) {
+      height: 1px;
+      border-radius: 4px;
+      background-color: color-mix(
+        in oklab,
+        var(--color-surface-content, currentColor) 20%,
+        transparent
+      );
+      margin-top: 4px;
+      margin-bottom: 4px;
+      grid-column: 1 / -1; /* col-span-full */
+    }
+  }
+</style>

package/dist/components/tooltip/tooltipMetaContext.d.ts

@@ -1,7 +1,7 @@
 import { type Accessor } from '../../utils/common.js';
 import type { SeriesData } from '../charts/index.js';
 import type { ChartContextValue } from '../Chart.svelte';
-import { type FormatType } from '@layerstack/utils';
+import { type FormatType, type FormatConfig } from '@layerstack/utils';
 export type SimplifiedChartType = 'bar' | 'area' | 'line' | 'pie' | 'scatter';
 export type BarTooltipMetaContextValue = {
     type: 'bar';
@@ -52,7 +52,7 @@ export type TooltipPayload = {
     chartType?: SimplifiedChartType;
     payload: any;
     rawSeriesData?: SeriesData<any, any>;
-    formatter?: FormatType;
+    formatter?: FormatType | FormatConfig;
 };
 type BasePayloadHandlerProps = {
     ctx: ChartContextValue;

package/dist/docs/Blockquote.svelte

@@ -1,7 +1,9 @@
 <script lang="ts">
-  import { mdiInformation } from '@mdi/js';
-  import { Icon } from 'svelte-ux';
   import { cls } from '@layerstack/tailwind';
+
+  import LucideInfo from '~icons/lucide/info';
+
+  const { children } = $props();
 </script>
 
 <div
@@ -10,6 +12,6 @@
     '[&>a]:font-medium [&>a]:underline [&>a]:decoration-dashed [&>a]:decoration-primary/50 [&>a]:underline-offset-2'
   )}
 >
-  <Icon data={mdiInformation} class="text-primary" />
-  <slot />
+  <LucideInfo class="text-primary" />
+  {@render children()}
 </div>

package/dist/docs/Blockquote.svelte.d.ts

@@ -1,20 +1,5 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const Blockquote: $$__sveltets_2_IsomorphicComponent<any, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, string>;
-type Blockquote = InstanceType<typeof Blockquote>;
+declare const Blockquote: import("svelte").Component<{
+    children: any;
+}, {}, "">;
+type Blockquote = ReturnType<typeof Blockquote>;
 export default Blockquote;

package/dist/docs/Code.svelte

@@ -1,38 +1,80 @@
+<script module>
+  import { createHighlighter } from 'shiki';
+
+  const highlighter = createHighlighter({
+    themes: ['github-light-default', 'github-dark-default'],
+    langs: ['svelte', 'javascript', 'ts', 'typescript', 'json', 'sh'],
+  });
+</script>
+
 <script lang="ts">
-  import Prism from 'prismjs';
-  import 'prism-svelte';
   import { CopyButton } from 'svelte-ux';
   import { cls } from '@layerstack/tailwind';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  interface Props {
+    source?: string | null;
+    language?: string;
+    classes?: { root?: string; pre?: string; code?: string };
+  }
 
-  export let source: string | null = null;
-  export let language = 'svelte';
-  export let highlightedSource = source
-    ? Prism.highlight(source, Prism.languages[language] ?? Prism.languages.text, language)
-    : '';
-
-  export let classes: {
-    root?: string;
-    pre?: string;
-    code?: string;
-  } = {};
+  let {
+    source = null,
+    language = 'svelte',
+    classes = {},
+    class: className,
+  }: Props & HTMLAttributes<HTMLDivElement> = $props();
 </script>
 
-<div class={cls('Code', 'rounded-sm', classes.root, $$props.class)}>
+<div
+  class={cls(
+    'Code',
+    'relative bg-surface-200 dark:bg-surface-300 p-4 overflow-auto not-prose',
+    classes.root,
+    className
+  )}
+>
   {#if source}
-    <div class="relative">
-      <pre
-        class={cls('language-{language} rounded-sm', classes.pre)}
-        style="margin: 0; white-space: normal;">
-          <code class={cls('language-{language}', classes.code)}>{@html highlightedSource}</code>
-      </pre>
-
-      <div class="absolute top-0 right-0 p-2 z-10">
-        <CopyButton
-          value={source ?? ''}
-          class="text-white/70 hover:bg-surface-100/20 py-1 backdrop-blur-md"
-          size="sm"
-        />
-      </div>
+    <pre class={cls('whitespace-normal overflow-auto', classes.pre)}>
+      <code class={cls('text-xs', classes.code)}>
+        {#await highlighter}
+          <div>Loading...</div>
+        {:then h}
+          {@html h.codeToHtml(source, {
+            lang: language,
+            themes: {
+              light: 'github-light-default',
+              dark: 'github-dark-default',
+            },
+          })}
+        {:catch error}
+          <div class="text-red-500">Error loading code highlighting: {error.message}</div>
+        {/await}
+
+      </code>
+    </pre>
+
+    <div class="absolute top-0 right-0 p-2 z-10">
+      <CopyButton
+        value={source ?? ''}
+        class="text-surface-content/70 hover:bg-surface-100/20 py-1 backdrop-blur-md"
+        size="sm"
+      />
     </div>
   {/if}
 </div>
+
+<style>
+  :global(.shiki) {
+    background-color: transparent !important;
+  }
+
+  :global(html.dark .shiki),
+  :global(html.dark .shiki span) {
+    color: var(--shiki-dark) !important;
+    /* background-color: var(--shiki-dark-bg) !important; */
+    font-style: var(--shiki-dark-font-style) !important;
+    font-weight: var(--shiki-dark-font-weight) !important;
+    text-decoration: var(--shiki-dark-text-decoration) !important;
+  }
+</style>

package/dist/docs/Code.svelte.d.ts

@@ -1,29 +1,14 @@
-import 'prism-svelte';
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const Code: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: any;
-    source?: string | null | undefined;
-    language?: string | undefined;
-    highlightedSource?: string | undefined;
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props {
+    source?: string | null;
+    language?: string;
     classes?: {
         root?: string;
         pre?: string;
         code?: string;
-    } | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Code = InstanceType<typeof Code>;
+    };
+}
+type $$ComponentProps = Props & HTMLAttributes<HTMLDivElement>;
+declare const Code: import("svelte").Component<$$ComponentProps, {}, "">;
+type Code = ReturnType<typeof Code>;
 export default Code;

package/dist/docs/Header1.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
   import { SectionDivider } from 'svelte-ux';
+
+  let { children, ...restProps } = $props();
 </script>
 
 <!--
@@ -9,6 +11,6 @@
       - Maybe possible to set/get props from markdown/mdsvex
         - Example: `#API { id: 'api' }
 -->
-<SectionDivider {...$$restProps}>
-  <slot />
+<SectionDivider {...restProps}>
+  {@render children()}
 </SectionDivider>

package/dist/docs/Header1.svelte.d.ts

@@ -1,29 +1,5 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-declare const Header1: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    [x: string]: any;
-}, {
-    default: {};
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, string>;
-type Header1 = InstanceType<typeof Header1>;
+declare const Header1: import("svelte").Component<{
+    children: any;
+} & Record<string, any>, {}, "">;
+type Header1 = ReturnType<typeof Header1>;
 export default Header1;

package/dist/docs/Json.svelte

@@ -1,12 +1,20 @@
 <script lang="ts">
+  import { type ComponentProps } from 'svelte';
   import JsonTree from 'svelte-json-tree';
   import { cls } from '@layerstack/tailwind';
 
-  export let value: any;
-  export let defaultExpandedPaths = ['$'];
+  const {
+    value,
+    defaultExpandedPaths = ['$'],
+    class: className,
+  }: {
+    value: ComponentProps<JsonTree>['value'];
+    defaultExpandedPaths?: ComponentProps<JsonTree>['defaultExpandedPaths'];
+    class?: string;
+  } = $props();
 </script>
 
-<div class={cls('overflow-auto px-4 py-2 bg-[#1e1e1e]', $$props.class)}>
+<div class={cls('overflow-auto px-4 py-2 bg-[#1e1e1e]', className)}>
   <JsonTree
     {value}
     {defaultExpandedPaths}

package/dist/docs/Json.svelte.d.ts

@@ -1,22 +1,10 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const Json: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: any;
-    value: any;
-    defaultExpandedPaths?: string[] | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Json = InstanceType<typeof Json>;
+import { type ComponentProps } from 'svelte';
+import JsonTree from 'svelte-json-tree';
+type $$ComponentProps = {
+    value: ComponentProps<JsonTree>['value'];
+    defaultExpandedPaths?: ComponentProps<JsonTree>['defaultExpandedPaths'];
+    class?: string;
+};
+declare const Json: import("svelte").Component<$$ComponentProps, {}, "">;
+type Json = ReturnType<typeof Json>;
 export default Json;

package/dist/docs/Layout.svelte

@@ -1,4 +1,4 @@
-<script context="module">
+<script module>
   // Custom components: https://mdsvex.com/docs#custom-components
   import blockquote from './Blockquote.svelte';
   import a from './Link.svelte';
@@ -8,11 +8,14 @@
 </script>
 
 <script lang="ts">
-  // frontmatter: https://mdsvex.com/docs#frontmatter-1
-  // export let name = undefined;
-  // export let sourceUrl = undefined;
-  // export let docUrl = undefined;
-  // export let description = undefined;
+  let {
+    // frontmatter: https://mdsvex.com/docs#frontmatter-1
+    // name,
+    // sourceUrl,
+    // docUrl,
+    // description,
+    children,
+  } = $props();
 </script>
 
-<slot />
+{@render children()}

package/dist/docs/Layout.svelte.d.ts

@@ -1,23 +1,8 @@
 import blockquote from './Blockquote.svelte';
 import a from './Link.svelte';
 export { a, blockquote };
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const Layout: $$__sveltets_2_IsomorphicComponent<any, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, string>;
-type Layout = InstanceType<typeof Layout>;
+declare const Layout: import("svelte").Component<{
+    children: any;
+}, {}, "">;
+type Layout = ReturnType<typeof Layout>;
 export default Layout;

package/dist/docs/Link.svelte

@@ -1,5 +1,9 @@
+<script lang="ts">
+  let { children, ...restProps } = $props();
+</script>
+
 <!-- href provided by markdown/mdsvex -->
-<!-- svelte-ignore a11y-missing-attribute -->
-<a class="text-primary font-medium" {...$$restProps}>
-  <slot />
+<!-- svelte-ignore a11y_missing_attribute -->
+<a class="text-primary font-medium" {...restProps}>
+  {@render children()}
 </a>

package/dist/docs/Link.svelte.d.ts

@@ -1,39 +1,5 @@
+declare const Link: import("svelte").Component<{
+    children: any;
+} & Record<string, any>, {}, "">;
+type Link = ReturnType<typeof Link>;
 export default Link;
-type Link = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
-    [x: string]: any;
-}, {
-    default: {};
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> & {
-    $$bindings?: string | undefined;
-};
-declare const Link: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    [x: string]: any;
-}, {
-    default: {};
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, string>;
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}