@urbicon-ui/blocks 6.1.4

package/dist/components/Sankey/sankey.variants.d.ts

@@ -0,0 +1,91 @@
+import { type VariantProps } from '../../utils/variants';
+export declare const sankeyVariants: (props?: import("../../utils/variants").TVProps<{
+    intent: {
+        primary: {
+            nodeRect: string;
+            link: string;
+        };
+        secondary: {
+            nodeRect: string;
+            link: string;
+        };
+        success: {
+            nodeRect: string;
+            link: string;
+        };
+        warning: {
+            nodeRect: string;
+            link: string;
+        };
+        danger: {
+            nodeRect: string;
+            link: string;
+        };
+        neutral: {
+            nodeRect: string;
+            link: string;
+        };
+    };
+}> | undefined) => {
+    wrapper: (props?: ({
+        intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | undefined;
+    } & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+    svg: (props?: ({
+        intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | undefined;
+    } & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+    node: (props?: ({
+        intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | undefined;
+    } & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+    nodeRect: (props?: ({
+        intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | undefined;
+    } & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+    nodeLabel: (props?: ({
+        intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | undefined;
+    } & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+    nodeValue: (props?: ({
+        intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | undefined;
+    } & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+    link: (props?: ({
+        intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | undefined;
+    } & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+    tooltip: (props?: ({
+        intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | undefined;
+    } & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+    tooltipLabel: (props?: ({
+        intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | undefined;
+    } & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+    tooltipDetail: (props?: ({
+        intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | undefined;
+    } & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+};
+export type SankeyVariants = VariantProps<typeof sankeyVariants>;

package/dist/components/Sankey/sankey.variants.js

@@ -0,0 +1,65 @@
+import { tv } from '../../utils/variants';
+export const sankeyVariants = tv({
+    slots: {
+        wrapper: ['relative w-full'],
+        svg: ['block w-full overflow-visible'],
+        node: [
+            'cursor-default outline-none',
+            'transition-[opacity,filter] duration-[var(--blocks-duration-fast)]',
+            'focus-visible:outline-none'
+        ],
+        nodeRect: ['transition-[fill] duration-[var(--blocks-duration-fast)]'],
+        nodeLabel: [
+            'pointer-events-none select-none',
+            'fill-text-primary text-xs font-medium',
+            'transition-[opacity] duration-[var(--blocks-duration-fast)]'
+        ],
+        nodeValue: ['pointer-events-none select-none', 'fill-text-tertiary text-[10px] tabular-nums'],
+        link: [
+            'cursor-default fill-none',
+            'transition-[opacity,stroke-opacity,stroke-width] duration-[var(--blocks-duration-fast)]',
+            'focus-visible:outline-none'
+        ],
+        tooltip: [
+            'pointer-events-none absolute z-[var(--z-tooltip)]',
+            'min-w-max rounded-md px-2.5 py-1.5',
+            'bg-surface-elevated text-text-primary text-xs',
+            'shadow-[var(--blocks-shadow-md)] border border-border-hairline',
+            'opacity-0 transition-[opacity] duration-[var(--blocks-duration-fast)]',
+            'data-[visible=true]:opacity-100'
+        ],
+        tooltipLabel: ['font-medium'],
+        tooltipDetail: ['text-text-tertiary tabular-nums']
+    },
+    variants: {
+        intent: {
+            primary: {
+                nodeRect: 'fill-primary',
+                link: 'stroke-primary'
+            },
+            secondary: {
+                nodeRect: 'fill-secondary',
+                link: 'stroke-secondary'
+            },
+            success: {
+                nodeRect: 'fill-success',
+                link: 'stroke-success'
+            },
+            warning: {
+                nodeRect: 'fill-warning',
+                link: 'stroke-warning'
+            },
+            danger: {
+                nodeRect: 'fill-danger',
+                link: 'stroke-danger'
+            },
+            neutral: {
+                nodeRect: 'fill-neutral',
+                link: 'stroke-neutral'
+            }
+        }
+    },
+    defaultVariants: {
+        intent: 'neutral'
+    }
+});

package/dist/components/SidebarLayout/SidebarLayout.svelte

@@ -0,0 +1,121 @@
+<script lang="ts">
+  import { MediaQuery } from 'svelte/reactivity';
+  import { Sidebar } from '../../primitives/Sidebar';
+  import { getBlocksConfig, mergeSlotClasses, resolvePresetSlotClasses } from '../../provider';
+  import type { SidebarLayoutProps } from './index';
+  import { sidebarLayoutVariants } from './sidebar-layout.variants';
+
+  let {
+    open = $bindable(false),
+    mode = 'responsive',
+    side = 'left',
+    sidebarWidth = '16rem',
+    closeOnEscape = true,
+    closeOnBackdropClick = true,
+    contentMaxWidth = 'xl',
+    onOpenChange,
+    sidebarHeader,
+    sidebar,
+    sidebarFooter,
+    mobileHeader,
+    children,
+    class: className = '',
+    unstyled: unstyledProp = false,
+    slotClasses: slotClassesProp = {},
+    preset,
+    ...restProps
+  }: SidebarLayoutProps = $props();
+
+  const blocksConfig = getBlocksConfig();
+  const unstyled = $derived(unstyledProp || blocksConfig?.unstyled || false);
+  const slotClasses = $derived(
+    mergeSlotClasses(
+      blocksConfig?.defaults?.SidebarLayout?.slotClasses,
+      resolvePresetSlotClasses(blocksConfig?.presets, 'SidebarLayout', preset),
+      slotClassesProp
+    )
+  );
+
+  const styles = $derived(sidebarLayoutVariants({ side, contentMaxWidth }));
+
+  // Mirror the Sidebar's effective-width logic so the layout root can expose
+  // the value to the main content (the Sidebar's own --sidebar-effective-width
+  // only inherits within the <aside> subtree, not to its siblings).
+  const mobileQuery = new MediaQuery('(max-width: 1023px)');
+  const isMobile = $derived(mobileQuery.current);
+  const effectiveWidth = $derived(
+    open || (mode === 'responsive' && !isMobile) ? sidebarWidth : '0px'
+  );
+
+  // Forward sidebar-related slotClasses to the embedded Sidebar.
+  const sidebarSlotClasses = $derived({
+    panel: slotClasses?.sidebar,
+    backdrop: slotClasses?.sidebarBackdrop,
+    header: slotClasses?.sidebarHeader,
+    content: slotClasses?.sidebarContent,
+    footer: slotClasses?.sidebarFooter
+  });
+
+  function rootClass() {
+    if (unstyled) return [slotClasses?.root, className].filter(Boolean).join(' ');
+    return styles.root({ class: [slotClasses?.root, className] });
+  }
+
+  function openSidebar() {
+    open = true;
+    onOpenChange?.(true);
+  }
+
+  function handleSidebarOpenChange(next: boolean) {
+    open = next;
+    onOpenChange?.(next);
+  }
+</script>
+
+<div
+  {...restProps}
+  class={rootClass()}
+  style:--sidebar-width={sidebarWidth}
+  style:--sidebar-effective-width={effectiveWidth}
+  data-side={side}
+  data-mode={mode}
+>
+  <Sidebar
+    bind:open
+    {mode}
+    {side}
+    width={sidebarWidth}
+    {closeOnEscape}
+    {closeOnBackdropClick}
+    onOpenChange={handleSidebarOpenChange}
+    {unstyled}
+    slotClasses={sidebarSlotClasses}
+    header={sidebarHeader}
+    footer={sidebarFooter}
+  >
+    {#if sidebar}
+      {@render sidebar()}
+    {/if}
+  </Sidebar>
+
+  {#if mobileHeader}
+    <header
+      class={unstyled
+        ? (slotClasses?.mobileHeader ?? '')
+        : styles.mobileHeader({ class: slotClasses?.mobileHeader })}
+    >
+      {@render mobileHeader({ openSidebar, sidebarOpen: open })}
+    </header>
+  {/if}
+
+  <main
+    id="main-content"
+    class={unstyled ? (slotClasses?.main ?? '') : styles.main({ class: slotClasses?.main })}
+  >
+    <div
+      class={unstyled ? (slotClasses?.inner ?? '') : styles.inner({ class: slotClasses?.inner })}
+    >
+      {@render children?.()}
+    </div>
+  </main>
+</div>

package/dist/components/SidebarLayout/SidebarLayout.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { SidebarLayoutProps } from './index';
+declare const SidebarLayout: import("svelte").Component<SidebarLayoutProps, {}, "open">;
+type SidebarLayout = ReturnType<typeof SidebarLayout>;
+export default SidebarLayout;

package/dist/components/SidebarLayout/index.d.ts

@@ -0,0 +1,139 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { SidebarLayoutVariants } from './sidebar-layout.variants';
+/**
+ * Snippet payload for the `mobileHeader` slot. Receives an opener for the
+ * sidebar overlay so the consumer can wire a hamburger button without
+ * threading state through the layout.
+ */
+export interface MobileHeaderContext {
+    /** Open the sidebar (mobile overlay or collapsible panel). */
+    openSidebar: () => void;
+    /** Current open state of the sidebar. */
+    sidebarOpen: boolean;
+}
+type SidebarLayoutSlot = 'root' | 'mobileHeader' | 'main' | 'inner' | 'sidebar' | 'sidebarBackdrop' | 'sidebarHeader' | 'sidebarContent' | 'sidebarFooter';
+/**
+ * @description App-shell layout that wires a `<Sidebar>` to a main content
+ * region and an optional mobile header. Use this whenever you want a
+ * permanent sidebar on desktop with a hamburger overlay on mobile — it
+ * resolves the CSS-variable scoping so the main content offset works without
+ * boilerplate.
+ *
+ * The component renders the sidebar internally; consumers configure it via
+ * `sidebarHeader`, `sidebar`, and `sidebarFooter` snippets and bind `open`
+ * for the mobile overlay (or for collapsible mode at all viewports).
+ *
+ * For non-shell sidebars (right-side detail panels, drawers inside a page),
+ * keep using the `<Sidebar>` primitive directly.
+ *
+ * @tag layout
+ * @tag navigation
+ * @related Sidebar
+ *
+ * @example Default app shell with mobile header
+ * ```svelte
+ * <script>
+ *   import { SidebarLayout, Button, MenuIcon } from '@urbicon-ui/blocks';
+ *   let sidebarOpen = $state(false);
+ * </script>
+ *
+ * <SidebarLayout bind:open={sidebarOpen} sidebarWidth="16rem">
+ *   {#snippet sidebarHeader()}
+ *     <a href="/" class="font-semibold">My App</a>
+ *   {/snippet}
+ *
+ *   {#snippet sidebar()}
+ *     <nav class="flex flex-col gap-1 p-3">
+ *       <a href="/dashboard">Dashboard</a>
+ *       <a href="/settings">Settings</a>
+ *     </nav>
+ *   {/snippet}
+ *
+ *   {#snippet mobileHeader({ openSidebar })}
+ *     <Button variant="ghost" size="sm" onclick={openSidebar} aria-label="Open menu">
+ *       <MenuIcon />
+ *     </Button>
+ *     <span class="font-semibold">My App</span>
+ *   {/snippet}
+ *
+ *   <h1>Page content</h1>
+ * </SidebarLayout>
+ * ```
+ *
+ * @example Collapsible — toggleable on all viewports
+ * ```svelte
+ * <SidebarLayout bind:open={sidebarOpen} mode="collapsible" sidebarWidth="16rem">
+ *   {#snippet sidebarHeader()}<span class="font-semibold">App</span>{/snippet}
+ *   {#snippet sidebar()}<nav class="p-3"><!-- … --></nav>{/snippet}
+ *
+ *   <Button onclick={() => (sidebarOpen = !sidebarOpen)}>Toggle</Button>
+ *   <!-- main content -->
+ * </SidebarLayout>
+ * ```
+ */
+export interface SidebarLayoutProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /**
+     * Sidebar visibility. In `responsive` mode this only affects the mobile
+     * overlay. In `collapsible` mode it controls visibility at all viewports.
+     * Supports `bind:open`.
+     * @default false
+     */
+    open?: boolean;
+    /**
+     * Sidebar mode.
+     * - `responsive` (default): permanent on desktop (≥1024px), slide-in overlay on mobile.
+     * - `collapsible`: toggleable at all viewports — width animation on desktop, overlay on mobile.
+     * @default 'responsive'
+     */
+    mode?: 'responsive' | 'collapsible';
+    /** Which edge the sidebar attaches to. @default 'left' */
+    side?: SidebarLayoutVariants['side'];
+    /**
+     * Sidebar panel width. Single source of truth — the layout exposes it as
+     * `--sidebar-width` (constant) and `--sidebar-effective-width` (animates to
+     * `0` when collapsed) on the layout root, so the main content offset stays
+     * in sync automatically.
+     * @default '16rem'
+     */
+    sidebarWidth?: string;
+    /** Close the mobile sidebar overlay when pressing Escape. @default true */
+    closeOnEscape?: boolean;
+    /** Close the mobile sidebar overlay when clicking the backdrop. @default true */
+    closeOnBackdropClick?: boolean;
+    /** Maximum width of the centered content column. @default 'xl' */
+    contentMaxWidth?: SidebarLayoutVariants['contentMaxWidth'];
+    /** Fires when the sidebar open state changes. */
+    onOpenChange?: (open: boolean) => void;
+    /** Sidebar header (above the scrollable nav). */
+    sidebarHeader?: Snippet;
+    /** Sidebar main content — typically a `<nav>`. */
+    sidebar?: Snippet;
+    /** Sidebar footer (below the scrollable nav). */
+    sidebarFooter?: Snippet;
+    /**
+     * Mobile header bar, hidden on desktop in `responsive` mode. Receives a
+     * helper to open the sidebar so a hamburger button needs no extra wiring.
+     * If omitted, no mobile header is rendered.
+     */
+    mobileHeader?: Snippet<[MobileHeaderContext]>;
+    /** Page content rendered inside the centered main column. */
+    children?: Snippet;
+    /** Additional CSS classes applied to the root wrapper. */
+    class?: string;
+    /** Strip all default styles. Combine with `slotClasses` for a custom layout. */
+    unstyled?: boolean;
+    /**
+     * Per-slot class overrides. `sidebar*` slots are forwarded to the embedded
+     * `<Sidebar>` component (mapped to its `slotClasses.panel`/`header`/...).
+     */
+    slotClasses?: Partial<Record<SidebarLayoutSlot, string>>;
+    /**
+     * Apply a named preset registered via
+     * `<BlocksProvider presets={{ SidebarLayout: {...} }}>`. Use this to share
+     * a branded shell look across the app instead of repeating class overrides.
+     */
+    preset?: string;
+}
+export { default as SidebarLayout } from './SidebarLayout.svelte';
+export { type SidebarLayoutVariants, sidebarLayoutVariants } from './sidebar-layout.variants';

package/dist/components/SidebarLayout/index.js

@@ -0,0 +1,2 @@
+export { default as SidebarLayout } from './SidebarLayout.svelte';
+export { sidebarLayoutVariants } from './sidebar-layout.variants';

package/dist/components/SidebarLayout/sidebar-layout.variants.d.ts

@@ -0,0 +1,61 @@
+import { type VariantProps } from '../../utils/variants';
+export declare const sidebarLayoutVariants: (props?: import("../../utils/variants").TVProps<{
+    side: {
+        left: {
+            main: string;
+        };
+        right: {
+            main: string;
+        };
+    };
+    contentMaxWidth: {
+        none: {
+            inner: string;
+        };
+        sm: {
+            inner: string;
+        };
+        md: {
+            inner: string;
+        };
+        lg: {
+            inner: string;
+        };
+        xl: {
+            inner: string;
+        };
+        '2xl': {
+            inner: string;
+        };
+    };
+}> | undefined) => {
+    root: (props?: ({
+        side?: "right" | "left" | undefined;
+        contentMaxWidth?: "none" | "sm" | "md" | "lg" | "xl" | "2xl" | undefined;
+    } & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+    mobileHeader: (props?: ({
+        side?: "right" | "left" | undefined;
+        contentMaxWidth?: "none" | "sm" | "md" | "lg" | "xl" | "2xl" | undefined;
+    } & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+    main: (props?: ({
+        side?: "right" | "left" | undefined;
+        contentMaxWidth?: "none" | "sm" | "md" | "lg" | "xl" | "2xl" | undefined;
+    } & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+    inner: (props?: ({
+        side?: "right" | "left" | undefined;
+        contentMaxWidth?: "none" | "sm" | "md" | "lg" | "xl" | "2xl" | undefined;
+    } & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+};
+export type SidebarLayoutVariants = VariantProps<typeof sidebarLayoutVariants>;

package/dist/components/SidebarLayout/sidebar-layout.variants.js

@@ -0,0 +1,37 @@
+import { tv } from '../../utils/variants';
+export const sidebarLayoutVariants = tv({
+    slots: {
+        root: ['min-h-screen', 'bg-surface-base'],
+        mobileHeader: [
+            'sticky top-0 z-[var(--z-sticky)]',
+            'flex h-14 items-center gap-3',
+            'border-border-hairline bg-surface-base/80 border-b backdrop-blur-md',
+            'px-4',
+            'lg:hidden'
+        ],
+        main: [
+            'min-h-screen',
+            'pb-[env(safe-area-inset-bottom)]',
+            'transition-[padding] duration-(--blocks-duration-normal) ease-(--blocks-ease-confident)'
+        ],
+        inner: ['mx-auto w-full']
+    },
+    variants: {
+        side: {
+            left: { main: 'lg:pl-[var(--sidebar-effective-width)]' },
+            right: { main: 'lg:pr-[var(--sidebar-effective-width)]' }
+        },
+        contentMaxWidth: {
+            none: { inner: 'max-w-none' },
+            sm: { inner: 'max-w-3xl px-4 py-6 sm:px-6 lg:px-8 lg:py-10' },
+            md: { inner: 'max-w-5xl px-4 py-6 sm:px-6 lg:px-8 lg:py-10' },
+            lg: { inner: 'max-w-6xl px-4 py-6 sm:px-6 lg:px-8 lg:py-10' },
+            xl: { inner: 'max-w-7xl px-4 py-6 sm:px-6 lg:px-8 lg:py-10' },
+            '2xl': { inner: 'max-w-screen-2xl px-4 py-6 sm:px-6 lg:px-8 lg:py-10' }
+        }
+    },
+    defaultVariants: {
+        side: 'left',
+        contentMaxWidth: 'xl'
+    }
+});

package/dist/components/Sparkline/Sparkline.svelte

@@ -0,0 +1,85 @@
+<script lang="ts">
+  import type { SparklineProps } from './index';
+  import { linearScale, linePath, areaPath, extent } from '../../internal/charts/utils';
+  import type { ChartPoint } from '../../internal/charts/utils';
+
+  let {
+    data,
+    width = 96,
+    height = 24,
+    area = false,
+    showEndPoint = false,
+    color = 'var(--color-chart-1)',
+    strokeWidth = 1.5,
+    ariaLabel,
+    class: className,
+    unstyled = false,
+    slotClasses = {},
+    ...rest
+  }: SparklineProps = $props();
+
+  // Inset so the stroke + end-point aren't clipped at the edges.
+  const pad = $derived(Math.max(strokeWidth, 1));
+
+  const geometry = $derived.by(() => {
+    const [min, max] = extent(data);
+    const x = linearScale([0, Math.max(1, data.length - 1)], [pad, width - pad]);
+    const y = linearScale([min, max], [height - pad, pad]);
+    const points: ChartPoint[] = data.map((v, i) => [x(i), y(v)]);
+    return {
+      lineD: linePath(points),
+      areaD: area ? areaPath(points, height - pad) : '',
+      last: points[points.length - 1] as ChartPoint | undefined
+    };
+  });
+
+  function slot(name: 'root' | 'svg' | 'line' | 'area' | 'point'): string {
+    return slotClasses[name] ?? '';
+  }
+</script>
+
+<span
+  {...rest}
+  class={[!unstyled && 'inline-block align-middle', slot('root'), className]}
+  role={ariaLabel ? 'img' : undefined}
+  aria-label={ariaLabel}
+  aria-hidden={ariaLabel ? undefined : 'true'}
+>
+  <svg
+    class={slot('svg')}
+    {width}
+    {height}
+    viewBox="0 0 {width} {height}"
+    preserveAspectRatio="none"
+  >
+    {#if area && geometry.areaD}
+      <path
+        class={slot('area')}
+        d={geometry.areaD}
+        fill={color}
+        fill-opacity="0.15"
+        stroke="none"
+      />
+    {/if}
+    {#if geometry.lineD}
+      <path
+        class={slot('line')}
+        d={geometry.lineD}
+        fill="none"
+        stroke={color}
+        stroke-width={strokeWidth}
+        stroke-linejoin="round"
+        stroke-linecap="round"
+      />
+    {/if}
+    {#if showEndPoint && geometry.last}
+      <circle
+        class={slot('point')}
+        cx={geometry.last[0]}
+        cy={geometry.last[1]}
+        r={strokeWidth + 0.5}
+        fill={color}
+      />
+    {/if}
+  </svg>
+</span>

package/dist/components/Sparkline/Sparkline.svelte.d.ts

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