@rokkit/ui 1.4.1 → 1.5.0

package/dist/types/swatch.d.ts

@@ -0,0 +1,41 @@
+/**
+ * Swatch Component Types
+ *
+ * A group of selectable colour swatches. Options may be primitives (hex or
+ * colour-name strings) or objects whose fill/stroke/value are read through the
+ * usual field mapping.
+ */
+import type { Snippet } from 'svelte';
+import type { ProxyItem } from '@rokkit/states';
+/**
+ * Props for the Swatch component.
+ *
+ * `Swatch.svelte` annotates its own `$props()` with this interface, so the two
+ * cannot drift.
+ */
+export interface SwatchProps {
+    /** Color options — primitives (hex/name strings) or objects with mapped fields */
+    options?: Array<string | number | Record<string, unknown>>;
+    /** Field mapping for object options (value, fill, stroke, …) */
+    fields?: Record<string, string>;
+    /** Selected value (bindable). Array when `multiple`. */
+    value?: unknown;
+    /** Allow multiple selection */
+    multiple?: boolean;
+    /** Swatch shape */
+    shape?: 'square' | 'circle';
+    /** Size variant */
+    size?: 'sm' | 'md' | 'lg';
+    /** Disable the whole group */
+    disabled?: boolean;
+    /** Accessible group label */
+    label?: string;
+    /** Additional CSS classes */
+    class?: string;
+    /** Called when selection changes */
+    onchange?: (value: unknown, item: unknown) => void;
+    /** Custom snippet for rendering a swatch (receives proxy + selected) */
+    item?: Snippet<[ProxyItem, boolean]>;
+    /** Remaining props are spread through */
+    [key: string]: unknown;
+}

package/dist/types/swatch.js

@@ -0,0 +1,8 @@
+/**
+ * Swatch Component Types
+ *
+ * A group of selectable colour swatches. Options may be primitives (hex or
+ * colour-name strings) or objects whose fill/stroke/value are read through the
+ * usual field mapping.
+ */
+export {};

package/dist/types/tree.d.ts

@@ -5,7 +5,8 @@
  * Supports hierarchical data with expand/collapse, tree lines, and custom icons.
  * Field mapping and data access is handled by ProxyItem from @rokkit/states.
  */
-import type { Snippet } from 'svelte';
+import type { ItemSnippets } from './snippets.js';
+import type { ProxyItem } from '@rokkit/states';
 /**
  * Field mapping configuration for tree data — what the consumer passes
  * to the Tree component. Both `expanded` and `level` are optional here
@@ -87,82 +88,49 @@ export interface TreeStateIcons {
  */
 export declare const defaultTreeStateIcons: TreeStateIcons;
 /**
- * Handlers passed to custom item snippets
- */
-export interface TreeItemHandlers {
-    /** Call to trigger item selection */
-    onclick: () => void;
-    /** Call to toggle expand/collapse */
-    ontoggle: () => void;
-    /** Forward keyboard events for accessibility */
-    onkeydown: (event: KeyboardEvent) => void;
-}
-/**
- * Snippet type for rendering tree nodes.
- * Parameters: item, fields, handlers, isActive, isExpanded, level
- */
-export type TreeItemSnippet = Snippet<[
-    TreeItem,
-    TreeFields,
-    TreeItemHandlers,
-    boolean,
-    boolean,
-    number
-]>;
-/**
- * Snippet type for rendering the expand/collapse icon
- * Parameters: isExpanded, hasChildren, icons
- */
-export type TreeToggleSnippet = Snippet<[boolean, boolean, TreeStateIcons]>;
-/**
- * Snippet type for rendering tree line connectors
- * Parameters: lineType
+ * Props for the Tree component
  */
-export type TreeConnectorSnippet = Snippet<[TreeLineType]>;
 /**
- * Props for the Tree component
+ * Props for the Tree component.
+ *
+ * `Tree.svelte` annotates its own `$props()` with this interface, so the two
+ * cannot drift — which is how the previous version came to describe
+ * `multiselect`, `expanded`, `selected`, `expandAll`, `active` and four
+ * callbacks the component never read.
  */
-export interface TreeProps {
+export interface TreeProps extends ItemSnippets {
     /** Array of tree items (hierarchical) */
-    items?: TreeItem[];
+    items?: unknown[];
     /** Field mapping configuration */
-    fields?: TreeFields;
-    /** Currently selected value */
+    fields?: Record<string, string>;
+    /** Selected value (bindable) */
     value?: unknown;
     /** Size variant */
-    size?: 'sm' | 'md' | 'lg';
-    /** Tree line connector style — 'none' hides lines, 'solid'|'dashed'|'dotted' set the line style */
+    size?: string;
+    /** Connector style — 'none' hides the lines */
     lineStyle?: 'none' | 'solid' | 'dashed' | 'dotted';
-    /** Enable multiple item selection (Ctrl+click toggle, Shift+click range) */
-    multiselect?: boolean;
-    /** Which nodes are expanded (bindable) - keyed by node value */
-    expanded?: Record<string, boolean>;
-    /** Selected items array (bindable) - populated in multiselect mode */
-    selected?: unknown[];
-    /** Expand all nodes by default */
-    expandAll?: boolean;
-    /** Active item value - Tree looks up item by this value to highlight it */
-    active?: unknown;
+    /** Accessible label overrides */
+    labels?: Record<string, string>;
     /** Icons for expand/collapse states */
-    icons?: TreeStateIcons;
-    /** Called when an item is selected */
-    onselect?: (value: unknown, item: TreeItem) => void;
-    /** Called when selected items change in multiselect mode */
-    onselectedchange?: (selected: unknown[]) => void;
-    /** Called when expanded state changes */
-    onexpandedchange?: (expanded: Record<string, boolean>) => void;
-    /** Called when a node is toggled */
-    ontoggle?: (value: unknown, item: TreeItem, isExpanded: boolean) => void;
-    /** Called when expanding a node with unloaded children (children: true). Returns the children array. */
-    onloadchildren?: (value: unknown, item: TreeItem) => Promise<TreeItem[]>;
+    icons?: {
+        opened?: string;
+        closed?: string;
+    };
+    /** Called when an item is selected, with the item's `ProxyItem` */
+    onselect?: (value: unknown, proxy: ProxyItem) => void;
     /** Additional CSS classes */
     class?: string;
-    /** Custom snippet for rendering tree items */
-    item?: TreeItemSnippet;
-    /** Custom snippet for rendering expand/collapse toggle */
-    toggle?: TreeToggleSnippet;
-    /** Custom snippet for rendering tree line connectors */
-    connector?: TreeConnectorSnippet;
+}
+/**
+ * Props for the LazyTree component — Tree plus on-demand child loading.
+ */
+export interface LazyTreeProps extends TreeProps {
+    /** Size variant */
+    size?: 'sm' | 'md' | 'lg';
+    /** Called to fetch the children of a node being expanded */
+    onlazyload?: (current?: unknown) => Promise<unknown[]>;
+    /** Whether more nodes remain to load */
+    hasMore?: boolean;
 }
 /**
  * Constructs an array of line types for tree visualization.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/ui",
-  "version": "1.4.1",
+  "version": "1.5.0",
   "description": "Data driven UI components for Rokkit applications",
   "repository": {
     "type": "git",
@@ -34,6 +34,7 @@
     "prepublishOnly": "cp ../../LICENSE . && bun run build && node ../../config/pack-repoint.mjs",
     "postpublish": "node ../../config/pack-repoint.mjs --restore && rm -f LICENSE",
     "check": "svelte-check --tsconfig ./tsconfig.json",
+    "check:types": "tsc --noEmit",
     "build": "svelte-package -i src -o dist"
   },
   "keywords": [
@@ -44,12 +45,12 @@
     "dropdown"
   ],
   "dependencies": {
-    "@rokkit/core": "1.4.1",
-    "@rokkit/data": "1.4.1",
-    "@rokkit/states": "1.4.1",
-    "@rokkit/actions": "1.4.1",
+    "@rokkit/core": "1.5.0",
+    "@rokkit/data": "1.5.0",
+    "@rokkit/states": "1.5.0",
+    "@rokkit/actions": "1.5.0",
     "marked": "^15.0.0",
-    "dompurify": "^3.0.0"
+    "dompurify": "^3.4.13"
   },
   "peerDependencies": {
     "shiki": "^3.23.0",
@@ -58,8 +59,8 @@
   "devDependencies": {
     "@sveltejs/package": "^2.5.8",
     "@sveltejs/vite-plugin-svelte": "^6.2.4",
-    "svelte": "^5.53.5",
-    "svelte-check": "^4.4.3",
+    "svelte": "^5.55.7",
+    "svelte-check": "^4.7.6",
     "typescript": "^5.9.3"
   }
 }