@ripple-ui/svelte 0.0.0-stage → 0.8.2

package/dist/widgets/data/treemap.d.ts

@@ -0,0 +1,72 @@
+export declare const RAMP: readonly [56, 46, 37, 29, 22, 16];
+export declare const RAMP_DARK: readonly [56, 48, 41, 35, 29, 24];
+export declare const LIFT = 8;
+export declare const INK_ALPHA = 80;
+/** Gap between tiles, px; top-level siblings get a wider one so groups read. */
+export declare const GAP = 2;
+export declare const TOP_GAP = 6;
+/** Gap between the children of a nested group that itself holds groups. */
+export declare const NEST_GAP = 4;
+/** Caption strip on a group tall enough to pay for it. */
+export declare const CAPTION = 20;
+export declare const CAPTION_MIN_HEIGHT = 64;
+export declare const CAPTION_MIN_WIDTH = 64;
+export type TreeNode = {
+    id: string;
+    name: string;
+    value: number;
+    children?: TreeNode[];
+};
+export type Rect = {
+    id: string;
+    name: string;
+    value: number;
+    /** Depth below the current root: 1 is a top-level tile. */
+    depth: number;
+    group: boolean;
+    /** Caption strip drawn (groups only). */
+    caption: boolean;
+    /** Caption strip height, px: CAPTION or 0. */
+    captionH: number;
+    /** Caption text: `name · share`, or the share alone when that does not fit. */
+    captionLabel: string;
+    x0: number;
+    y0: number;
+    x1: number;
+    y1: number;
+    /** Index into RAMP, shared by a top-level tile and its descendants. */
+    step: number;
+    /** Top-level ancestor (itself at depth 1); clicking a nested tile zooms here. */
+    top: string;
+    parentName?: string;
+    parentValue?: number;
+};
+/** The model's node list as a tree with summed values and stable path ids. */
+export declare function sanitize(data: unknown): TreeNode[];
+/** The node at a path of ids, or undefined once the path no longer exists. */
+export declare function find(nodes: TreeNode[], id: string): TreeNode | undefined;
+/** Share of a total: whole percent from 10%, one decimal below, "<1%" under 1%, never "0%". */
+export declare function share(value: number, total: number): string;
+/** What a leaf tile has room for: name plus value line, name only, or nothing. */
+export declare function labelTier(w: number, h: number): 'full' | 'name' | 'none';
+/** Name line height and cap, px; the value line below takes one more line. */
+export declare const NAME_LINE = 15;
+export declare const MAX_NAME_LINES = 4;
+/** How many name lines a tile of height `h` fits above its value line (1 to 4). */
+export declare function nameLines(h: number, inset: number): number;
+/** Text width in px at the caption font; layout uses it to keep only captions that fit. */
+export type Measure = (text: string) => number;
+/** The caption a group shows; no-break spaces keep `· share` on the name's last word. */
+export declare const captionText: (name: string, value: number, total: number) => string;
+/**
+ * Which items fit on one line `width` px wide, `gap` apart, in order: an item
+ * too wide is skipped so a later, shorter one can still show. Room is kept for
+ * a "+N more" tail (`more(n)` px wide) whenever some are left out.
+ */
+export declare function fitLine(widths: number[], gap: number, width: number, more: (n: number) => number): number[];
+/**
+ * Squarified layout of `nodes` in a w x h box, flattened, root excluded.
+ * `inset` is the caption's right padding; with `measure` a `name · share`
+ * caption that does not fit on one line falls back to the share alone.
+ */
+export declare function layout(nodes: TreeNode[], w: number, h: number, measure?: Measure, inset?: number, zoomed?: boolean): Rect[];

package/dist/widgets/data/treemap.js

@@ -0,0 +1,178 @@
+// widgets/data/treemap.ts: the pure half of the treemap widget. `sanitize`
+// turns the model's untrusted node tree into one the layout can trust, `layout`
+// runs d3's squarify over it and returns one flat list of rectangles, and the
+// formatters print the numbers. Treemap.svelte draws the result as DOM tiles.
+//
+// Sanitize rules: a value comes through `finite()` ("45" counts, junk drops);
+// a node with kept children takes their sum and ignores its own value; a node
+// that sums to 0 or less drops, and so does a group whose children all drop;
+// a blank name reads "Unnamed". Node `color` is ignored: one hue is the design.
+//
+// Captions: only a group directly under the current root gets one (zoom
+// shows deeper ones), and only when its box is at least 64px tall and wide.
+// The caption is one 20px line, never two: `name · share` when `measure` says
+// it fits, else the share alone. While zoomed, a group that fills the view
+// (rounds to 100%) gets none (the crumb already names it). Top-level siblings
+// sit TOP_GAP apart, three times the in-group gap, so a group's edge reads;
+// nested groups that hold groups get NEST_GAP. Below 560px wide squarify runs
+// at ratio 1, so big leaves come out near square instead of as slivers.
+//
+// Colour: top-level tiles (children of the current root) are ranked by value
+// onto RAMP (RAMP_DARK in dark, whose floor sits higher so the smallest step
+// still reads against a dark card), the percent of --ripple-accent mixed into
+// --ripple-surface; descendants inherit their top-level step. Hover adds LIFT. Ink on a tile is
+// --ripple-surface-foreground; the value line is that ink at INK_ALPHA percent.
+// status-text.test.ts measures every step plus LIFT against both inks at 4.5:1,
+// so change these numbers only with that test.
+import { hierarchy, treemap, treemapSquarify } from 'd3-hierarchy';
+import { finite, plain } from '../data-kit/format.js';
+export const RAMP = [56, 46, 37, 29, 22, 16];
+export const RAMP_DARK = [56, 48, 41, 35, 29, 24];
+export const LIFT = 8;
+export const INK_ALPHA = 80;
+/** Gap between tiles, px; top-level siblings get a wider one so groups read. */
+export const GAP = 2;
+export const TOP_GAP = 6;
+/** Gap between the children of a nested group that itself holds groups. */
+export const NEST_GAP = 4;
+/** Caption strip on a group tall enough to pay for it. */
+export const CAPTION = 20;
+export const CAPTION_MIN_HEIGHT = 64;
+export const CAPTION_MIN_WIDTH = 64;
+const MAX_DEPTH = 8;
+function clean(raw, id, depth) {
+    if (!raw || typeof raw !== 'object')
+        return undefined;
+    const n = raw;
+    const name = plain(n.name) || 'Unnamed';
+    const kids = Array.isArray(n.children) && depth < MAX_DEPTH ? n.children : [];
+    if (kids.length) {
+        const children = kids.map((c, i) => clean(c, `${id}.${i}`, depth + 1)).filter((c) => !!c);
+        const value = children.reduce((s, c) => s + c.value, 0);
+        return children.length && value > 0 ? { id, name, value, children } : undefined;
+    }
+    const value = finite(n.value);
+    return value !== undefined && value > 0 ? { id, name, value } : undefined;
+}
+/** The model's node list as a tree with summed values and stable path ids. */
+export function sanitize(data) {
+    if (!Array.isArray(data))
+        return [];
+    return data.map((n, i) => clean(n, String(i), 0)).filter((n) => !!n);
+}
+/** The node at a path of ids, or undefined once the path no longer exists. */
+export function find(nodes, id) {
+    for (const n of nodes) {
+        if (n.id === id)
+            return n;
+        if (n.children && id.startsWith(n.id + '.'))
+            return find(n.children, id);
+    }
+    return undefined;
+}
+/** Share of a total: whole percent from 10%, one decimal below, "<1%" under 1%, never "0%". */
+export function share(value, total) {
+    if (!(total > 0) || !(value > 0))
+        return '<1%';
+    const p = (value / total) * 100;
+    if (p < 1)
+        return '<1%';
+    if (p < 9.95)
+        return `${Number(p.toFixed(1))}%`;
+    return `${Math.round(p)}%`;
+}
+/** What a leaf tile has room for: name plus value line, name only, or nothing. */
+export function labelTier(w, h) {
+    if (w >= 64 && h >= 40)
+        return 'full';
+    if (w >= 48 && h >= 24)
+        return 'name';
+    return 'none';
+}
+/** Name line height and cap, px; the value line below takes one more line. */
+export const NAME_LINE = 15;
+export const MAX_NAME_LINES = 4;
+/** How many name lines a tile of height `h` fits above its value line (1 to 4). */
+export function nameLines(h, inset) {
+    return Math.max(1, Math.min(MAX_NAME_LINES, Math.floor((h - 2 * inset - NAME_LINE) / NAME_LINE)));
+}
+/** The caption a group shows; no-break spaces keep `· share` on the name's last word. */
+export const captionText = (name, value, total) => `${name}\u00a0·\u00a0${share(value, total)}`;
+/**
+ * Which items fit on one line `width` px wide, `gap` apart, in order: an item
+ * too wide is skipped so a later, shorter one can still show. Room is kept for
+ * a "+N more" tail (`more(n)` px wide) whenever some are left out.
+ */
+export function fitLine(widths, gap, width, more) {
+    const keep = [];
+    let used = 0;
+    widths.forEach((w, i) => {
+        const next = used + (keep.length ? gap : 0) + w;
+        const left = widths.length - keep.length - 1;
+        if (next + (left ? gap + more(left) : 0) <= width) {
+            keep.push(i);
+            used = next;
+        }
+    });
+    return keep;
+}
+/**
+ * Squarified layout of `nodes` in a w x h box, flattened, root excluded.
+ * `inset` is the caption's right padding; with `measure` a `name · share`
+ * caption that does not fit on one line falls back to the share alone.
+ */
+export function layout(nodes, w, h, measure, inset = 6, zoomed = false) {
+    if (!nodes.length || !(w > 0) || !(h > 0))
+        return [];
+    const total = nodes.reduce((s, n) => s + n.value, 0);
+    const caption = (d) => {
+        if (d.depth !== 1 ||
+            // Rounds to 100%: it fills the view and the crumb names it.
+            (zoomed && d.data.value >= total * 0.995) ||
+            d.y1 - d.y0 < CAPTION_MIN_HEIGHT ||
+            d.x1 - d.x0 < CAPTION_MIN_WIDTH)
+            return '';
+        const text = captionText(d.data.name, d.data.value, total);
+        // 2px left pad, the inset on the right, 2px slack for rounding.
+        return !measure || measure(text) <= d.x1 - d.x0 - inset - 4 ? text : share(d.data.value, total);
+    };
+    const tree = hierarchy({ id: '', name: '', value: 0, children: nodes })
+        .sum((d) => (d.children ? 0 : d.value))
+        .sort((a, b) => (b.value ?? 0) - (a.value ?? 0));
+    const root = treemap()
+        .size([w, h])
+        .tile(w < 560 ? treemapSquarify.ratio(1) : treemapSquarify)
+        .paddingInner((d) => (d.depth === 0 ? TOP_GAP : d.depth > 1 && d.children?.some((c) => c.children) ? NEST_GAP : GAP))
+        // d3 sets a node's own box before it asks for its padding, so the
+        // caption can depend on the group's height in one pass.
+        .paddingTop((d) => (caption(d) ? CAPTION : 0))(tree);
+    const step = new Map();
+    root.children?.forEach((c, i) => step.set(c.data.id, Math.min(i, RAMP.length - 1)));
+    const out = [];
+    for (const d of root.descendants()) {
+        if (d.depth === 0)
+            continue;
+        const top = d.ancestors().find((a) => a.depth === 1);
+        const group = !!d.children;
+        const label = group ? caption(d) : '';
+        out.push({
+            id: d.data.id,
+            name: d.data.name,
+            value: d.value ?? 0,
+            depth: d.depth,
+            group,
+            caption: !!label,
+            captionH: label ? CAPTION : 0,
+            captionLabel: label,
+            x0: d.x0,
+            y0: d.y0,
+            x1: d.x1,
+            y1: d.y1,
+            step: step.get(top.data.id) ?? RAMP.length - 1,
+            top: top.data.id,
+            parentName: d.depth > 1 ? d.parent.data.name : undefined,
+            parentValue: d.depth > 1 ? d.parent.value : undefined
+        });
+    }
+    return out;
+}

package/dist/widgets/data-kit/Delta.svelte

@@ -0,0 +1,49 @@
+<!-- Delta.svelte: the one delta treatment shared by metric, stat and trend.
+     An arrow and a signed value in the tone's readable text colour on a soft
+     tint of that tone (never a solid accent pill); neutral uses the same soft
+     tint recipe in muted ink. `sentiment` picks the tone, `dir` the arrow, so
+     "response time down" can be good news in green. The pill stays on one line
+     (arrow and value never part); a host with a narrow box swaps in a shorter
+     text, as stat does with its percent-only delta. -->
+<script lang="ts">
+  import { cn } from '../../utils.js';
+  import ArrowUp from '@lucide/svelte/icons/arrow-up';
+  import ArrowDown from '@lucide/svelte/icons/arrow-down';
+  import Minus from '@lucide/svelte/icons/minus';
+
+  interface Props {
+    text: string;
+    dir: 'up' | 'down' | 'neutral';
+    sentiment?: 'positive' | 'negative' | 'neutral';
+    arrow?: boolean;
+    size?: number;
+    class?: string;
+    id?: string;
+    style?: string;
+    /** Extra data-slot for the host widget's tests and styling. */
+    slot?: string;
+  }
+
+  let { text, dir, sentiment, arrow = true, size = 12, class: className, id, style, slot }: Props = $props();
+
+  const tone = $derived(sentiment ?? (dir === 'up' ? 'positive' : dir === 'down' ? 'negative' : 'neutral'));
+</script>
+
+<span
+  {id}
+  {style}
+  data-slot={slot ?? 'delta'}
+  data-sentiment={tone}
+  class={cn(
+    'inline-flex max-w-full shrink-0 items-center whitespace-nowrap gap-0.5 rounded-md [&>svg]:shrink-0 px-1.5 py-0.5 text-[11px] font-medium leading-4 tabular-nums',
+    tone === 'positive' && 'bg-ripple-success/12 text-ripple-success-text',
+    tone === 'negative' && 'bg-ripple-error/10 text-ripple-error-text',
+    tone === 'neutral' && 'bg-ripple-muted-foreground/10 text-ripple-muted-foreground',
+    className
+  )}
+>
+  {#if arrow}
+    {#if dir === 'up'}<ArrowUp size={size} strokeWidth={2.5} />{:else if dir === 'down'}<ArrowDown size={size} strokeWidth={2.5} />{:else}<Minus size={size} strokeWidth={2.5} />{/if}
+  {/if}
+  <span class="min-w-0">{text}</span>
+</span>

package/dist/widgets/data-kit/Delta.svelte.d.ts

@@ -0,0 +1,15 @@
+interface Props {
+    text: string;
+    dir: 'up' | 'down' | 'neutral';
+    sentiment?: 'positive' | 'negative' | 'neutral';
+    arrow?: boolean;
+    size?: number;
+    class?: string;
+    id?: string;
+    style?: string;
+    /** Extra data-slot for the host widget's tests and styling. */
+    slot?: string;
+}
+declare const Delta: import("svelte").Component<Props, {}, "">;
+type Delta = ReturnType<typeof Delta>;
+export default Delta;

package/dist/widgets/data-kit/PhotoTile.svelte

@@ -0,0 +1,82 @@
+<!--
+  widgets/data-kit/PhotoTile.svelte — every photo in the data widgets (design
+  doc 2026-10-09 §2.5). A fixed aspect box (4:3, 1:1, 16:9) so nothing shifts;
+  the box is a muted skeleton until the image loads; a missing, refused or
+  failed `src` shows the icon tile instead (the item's kind icon on
+  --ripple-muted). A broken image is never shown.
+  Invariant: the only `src` sink is `safeUrl(src, { kind: 'resource' })`
+  inline on the <img> (security/url-sinks.test.ts audits that), and the <img>
+  renders only when that call returns a URL. Width comes from the caller's
+  class (`w-24`, `w-full`); a hero adds `max-h-[200px]`. A caller with a
+  better fallback than the icon (link-preview's domain letter) passes the
+  `fallback` snippet; it fills the box in place of the icon. `onload` and
+  `onerror` tell the caller how the photo went (menu-order drops failed tiles).
+-->
+<script lang="ts">
+	import type { LucideIcon } from '@lucide/svelte';
+	import type { Snippet } from 'svelte';
+	import { safeUrl } from '@ripple-ui/core';
+	import { FALLBACK_ICON } from './icons.js';
+
+	type Ratio = '4:3' | '1:1' | '16:9' | 'auto';
+
+	interface Props {
+		src?: unknown;
+		alt?: string;
+		ratio?: Ratio;
+		icon?: LucideIcon;
+		iconSize?: number;
+		class?: string;
+		id?: string;
+		/** Inline style for the box (the image atom passes its width, height and radius). */
+		style?: string;
+		fit?: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
+		/** Show the alt text under the fallback icon. */
+		caption?: boolean;
+		/** Replaces the icon tile when the image is missing, refused or failed. */
+		fallback?: Snippet;
+		onload?: () => void;
+		onerror?: () => void;
+	}
+
+	let { src, alt = '', ratio = '1:1', icon, iconSize = 20, class: className, id, style, fit = 'cover', caption = false, fallback, onload, onerror }: Props = $props();
+
+	// 'auto' leaves the box to its own width/height (the image atom); the fallback then keeps a floor height, and its floor width never exceeds the track it sits in.
+	const RATIO: Record<Ratio, string> = { '4:3': 'aspect-[4/3]', '1:1': 'aspect-square', '16:9': 'aspect-video', auto: '' };
+
+	// Keyed by URL, so a src that changes (a streamed placeholder swapped for
+	// the hydrated photo) starts over as loading instead of inheriting a state.
+	let loadedUrl = $state<string>();
+	let failedUrl = $state<string>();
+
+	const url = $derived(safeUrl(src, { kind: 'resource' }));
+	const showImage = $derived(url !== undefined && failedUrl !== url);
+	const phase = $derived(!showImage ? 'fallback' : loadedUrl === url ? 'loaded' : 'loading');
+	const Icon = $derived(icon ?? FALLBACK_ICON);
+</script>
+
+<div {id} {style} class={['relative overflow-hidden rounded-md bg-ripple-muted', RATIO[ratio] ?? RATIO['1:1'], ratio === 'auto' && phase === 'fallback' && 'min-h-24 min-w-[min(6rem,100%)]', className]} data-state={phase}>
+	{#if showImage}
+		<img
+			src={safeUrl(src, { kind: 'resource' })}
+			{alt}
+			loading="lazy"
+			decoding="async"
+			style:object-fit={fit}
+			class={['block size-full transition-opacity duration-150 ease-ripple-out', phase === 'loaded' ? 'opacity-100' : 'opacity-0']}
+			onload={() => ((loadedUrl = url), onload?.())}
+			onerror={() => ((failedUrl = url), onerror?.())}
+		/>
+	{:else if fallback}
+		{@render fallback()}
+	{:else if alt}
+		<div class="flex size-full flex-col items-center justify-center gap-1.5 p-2 text-ripple-muted-foreground" role="img" aria-label={alt}>
+			<Icon size={iconSize} strokeWidth={1.75} aria-hidden="true" />
+			{#if caption}<span class="line-clamp-2 max-w-full text-center text-xs" aria-hidden="true">{alt}</span>{/if}
+		</div>
+	{:else}
+		<div class="grid size-full place-items-center text-ripple-muted-foreground" aria-hidden="true">
+			<Icon size={iconSize} strokeWidth={1.75} />
+		</div>
+	{/if}
+</div>

package/dist/widgets/data-kit/PhotoTile.svelte.d.ts

@@ -0,0 +1,24 @@
+import type { LucideIcon } from '@lucide/svelte';
+import type { Snippet } from 'svelte';
+type Ratio = '4:3' | '1:1' | '16:9' | 'auto';
+interface Props {
+    src?: unknown;
+    alt?: string;
+    ratio?: Ratio;
+    icon?: LucideIcon;
+    iconSize?: number;
+    class?: string;
+    id?: string;
+    /** Inline style for the box (the image atom passes its width, height and radius). */
+    style?: string;
+    fit?: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
+    /** Show the alt text under the fallback icon. */
+    caption?: boolean;
+    /** Replaces the icon tile when the image is missing, refused or failed. */
+    fallback?: Snippet;
+    onload?: () => void;
+    onerror?: () => void;
+}
+declare const PhotoTile: import("svelte").Component<Props, {}, "">;
+type PhotoTile = ReturnType<typeof PhotoTile>;
+export default PhotoTile;

package/dist/widgets/data-kit/SectionCard.svelte

@@ -0,0 +1,52 @@
+<!--
+  widgets/data-kit/SectionCard.svelte — one section surface (design doc
+  2026-10-09 §2.1, §2.9): --ripple-surface, 1px border, no shadow. The title
+  is the section label (caption-1, uppercase, 0.04em tracking) with an
+  optional row icon and an `aside` snippet (a count chip, a toggle).
+  States, in order: `pending` (the key exists but the array is still empty
+  mid-stream) shows two static skeleton rows; `empty` (still empty at
+  card.final) shows that one line, which should say what to ask; otherwise
+  the children. A section whose key is missing should not render at all;
+  that is the caller's {#if}. Pair sections with SectionGrid.
+-->
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { LucideIcon } from '@lucide/svelte';
+	import { plain } from './format.js';
+
+	interface Props {
+		title?: string;
+		icon?: LucideIcon;
+		aside?: Snippet;
+		pending?: boolean;
+		empty?: string;
+		class?: string;
+		children?: Snippet;
+	}
+
+	let { title, icon: Icon, aside, pending = false, empty, class: className, children }: Props = $props();
+
+	const heading = $derived(plain(title));
+</script>
+
+<section class={['h-full min-w-0 rounded-ripple border border-ripple-border bg-ripple-surface p-3', className]} aria-busy={pending || undefined}>
+	{#if heading || aside}
+		<header class="mb-2 flex min-h-5 items-center gap-1.5 text-ripple-muted-foreground">
+			{#if Icon}<Icon size={14} strokeWidth={1.75} aria-hidden="true" class="shrink-0" />{/if}
+			{#if heading}
+				<h3 class="truncate text-caption-1 font-medium tracking-[0.04em] uppercase">{heading}</h3>
+			{/if}
+			{#if aside}<div class="ml-auto shrink-0">{@render aside()}</div>{/if}
+		</header>
+	{/if}
+	{#if pending}
+		<div class="flex flex-col gap-2 py-0.5" data-slot="section-skeleton">
+			<div class="h-3.5 w-3/4 rounded bg-ripple-muted"></div>
+			<div class="h-3.5 w-1/2 rounded bg-ripple-muted"></div>
+		</div>
+	{:else if empty}
+		<p class="text-callout text-ripple-muted-foreground">{empty}</p>
+	{:else}
+		{@render children?.()}
+	{/if}
+</section>

package/dist/widgets/data-kit/SectionCard.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+import type { LucideIcon } from '@lucide/svelte';
+interface Props {
+    title?: string;
+    icon?: LucideIcon;
+    aside?: Snippet;
+    pending?: boolean;
+    empty?: string;
+    class?: string;
+    children?: Snippet;
+}
+declare const SectionCard: import("svelte").Component<Props, {}, "">;
+type SectionCard = ReturnType<typeof SectionCard>;
+export default SectionCard;

package/dist/widgets/data-kit/SectionGrid.svelte

@@ -0,0 +1,35 @@
+<!--
+  widgets/data-kit/SectionGrid.svelte — lays sections out by the pairing rule
+  (pair.ts, design doc 2026-10-09 §2.7): one column below 720px of container
+  width; at 720px+ two consecutive half-eligible sections share a row and
+  every other section spans both columns, so no half card sits beside empty
+  space. The outer div is the @container; the grid's cells query it (an
+  element cannot query its own width). `half` decides eligibility per
+  section; `section` renders one.
+-->
+<script lang="ts" generics="T">
+	import type { Snippet } from 'svelte';
+	import { pairSpans } from './pair.js';
+
+	interface Props {
+		sections: readonly T[];
+		half: (section: T) => boolean;
+		section: Snippet<[T, number]>;
+		class?: string;
+	}
+
+	let { sections, half, section, class: className }: Props = $props();
+
+	const list = $derived(Array.isArray(sections) ? sections : []);
+	const spans = $derived(pairSpans(list, half));
+</script>
+
+<div class={['@container', className]}>
+	<div class="grid grid-cols-1 gap-3 @min-[720px]:grid-cols-2">
+		{#each list as s, i}
+			<div class={['min-w-0', spans[i] === 'full' && '@min-[720px]:col-span-2']} data-span={spans[i]}>
+				{@render section(s, i)}
+			</div>
+		{/each}
+	</div>
+</div>

package/dist/widgets/data-kit/SectionGrid.svelte.d.ts

@@ -0,0 +1,30 @@
+import type { Snippet } from 'svelte';
+declare function $$render<T>(): {
+    props: {
+        sections: readonly T[];
+        half: (section: T) => boolean;
+        section: Snippet<[T, number]>;
+        class?: string;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const SectionGrid: $$IsomorphicComponent;
+type SectionGrid<T> = InstanceType<typeof SectionGrid<T>>;
+export default SectionGrid;