@rokkit/ui 1.4.2 → 1.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (53) hide show
  1. package/dist/components/CodeGroup.svelte +0 -1
  2. package/dist/components/CommandPalette.svelte +2 -1
  3. package/dist/components/CommandPalette.svelte.d.ts +2 -5
  4. package/dist/components/Dropdown.svelte +3 -22
  5. package/dist/components/Dropdown.svelte.d.ts +2 -20
  6. package/dist/components/FloatingAction.svelte +2 -2
  7. package/dist/components/FloatingAction.svelte.d.ts +2 -5
  8. package/dist/components/Grid.svelte +11 -15
  9. package/dist/components/Grid.svelte.d.ts +2 -43
  10. package/dist/components/LazyTree.svelte +11 -17
  11. package/dist/components/LazyTree.svelte.d.ts +2 -28
  12. package/dist/components/List.svelte +12 -21
  13. package/dist/components/List.svelte.d.ts +2 -47
  14. package/dist/components/Menu.svelte +12 -26
  15. package/dist/components/Menu.svelte.d.ts +2 -66
  16. package/dist/components/MultiSelect.svelte +12 -26
  17. package/dist/components/MultiSelect.svelte.d.ts +2 -23
  18. package/dist/components/Select.svelte +12 -27
  19. package/dist/components/Select.svelte.d.ts +2 -24
  20. package/dist/components/Swatch.svelte +1 -27
  21. package/dist/components/Swatch.svelte.d.ts +1 -27
  22. package/dist/components/Table.svelte +10 -3
  23. package/dist/components/Tabs.svelte +25 -7
  24. package/dist/components/Tabs.svelte.d.ts +9 -1
  25. package/dist/components/Toggle.svelte +14 -4
  26. package/dist/components/Toggle.svelte.d.ts +4 -1
  27. package/dist/components/Toolbar.svelte +2 -2
  28. package/dist/components/Toolbar.svelte.d.ts +1 -2
  29. package/dist/components/Tree.svelte +11 -14
  30. package/dist/components/Tree.svelte.d.ts +2 -29
  31. package/dist/components/UploadProgress.svelte +3 -4
  32. package/dist/components/UploadProgress.svelte.d.ts +1 -4
  33. package/dist/components/UploadTarget.svelte +2 -4
  34. package/dist/components/UploadTarget.svelte.d.ts +14 -4
  35. package/dist/types/chat.d.ts +15 -0
  36. package/dist/types/command-palette.d.ts +18 -0
  37. package/dist/types/command-palette.js +7 -0
  38. package/dist/types/floating-action.d.ts +5 -0
  39. package/dist/types/grid.d.ts +37 -0
  40. package/dist/types/grid.js +8 -0
  41. package/dist/types/index.d.ts +4 -0
  42. package/dist/types/index.js +8 -0
  43. package/dist/types/list.d.ts +22 -55
  44. package/dist/types/menu.d.ts +9 -2
  45. package/dist/types/select.d.ts +52 -62
  46. package/dist/types/snippets.d.ts +64 -0
  47. package/dist/types/snippets.js +16 -0
  48. package/dist/types/swatch.d.ts +39 -0
  49. package/dist/types/swatch.js +8 -0
  50. package/dist/types/table.d.ts +5 -0
  51. package/dist/types/toolbar.d.ts +5 -0
  52. package/dist/types/tree.d.ts +34 -66
  53. package/package.json +5 -5
@@ -1,5 +1,4 @@
1
1
  <script lang="ts">
2
- // @ts-nocheck
3
2
  /**
4
3
  * CodeGroup — multi-file code display with a hierarchical tree picker
5
4
  * and an optional live preview panel.
@@ -1,11 +1,12 @@
1
1
  <script lang="ts">
2
2
  import { commands, messages } from '@rokkit/states'
3
3
  import { dismissable } from '@rokkit/actions'
4
+ import type { CommandPaletteProps } from '../types/command-palette.js'
4
5
 
5
6
  /** Minimal command shape this palette reads (states' Command typedef isn't exported). */
6
7
  type CommandLike = { id: string; label: string; keywords?: string[] }
7
8
 
8
- let { open = $bindable(false), placeholder }: { open?: boolean; placeholder?: string } = $props()
9
+ let { open = $bindable(false), placeholder }: CommandPaletteProps = $props()
9
10
 
10
11
  let query = $state('')
11
12
  let activeIndex = $state(0)
@@ -1,7 +1,4 @@
1
- type $$ComponentProps = {
2
- open?: boolean;
3
- placeholder?: string;
4
- };
5
- declare const CommandPalette: import("svelte").Component<$$ComponentProps, {}, "open">;
1
+ import type { CommandPaletteProps } from '../types/command-palette.js';
2
+ declare const CommandPalette: import("svelte").Component<CommandPaletteProps, {}, "open">;
6
3
  type CommandPalette = ReturnType<typeof CommandPalette>;
7
4
  export default CommandPalette;
@@ -20,15 +20,10 @@
20
20
  * data-align — panel alignment (start | end)
21
21
  * data-direction — panel direction (down | up)
22
22
  */
23
- // @ts-nocheck
24
23
  import { ProxyTree, Wrapper, messages } from '@rokkit/states'
25
24
  import { Navigator, Trigger } from '@rokkit/actions'
26
25
  import { DEFAULT_STATE_ICONS } from '@rokkit/core'
27
-
28
- interface DropdownIcons {
29
- opened?: string
30
- closed?: string
31
- }
26
+ import type { DropdownProps, SelectStateIcons } from '../types/select.js'
32
27
 
33
28
  let {
34
29
  items = [],
@@ -41,24 +36,10 @@
41
36
  showArrow = true,
42
37
  align = 'start',
43
38
  direction = 'down',
44
- icons: userIcons = {} as DropdownIcons,
39
+ icons: userIcons = {} as SelectStateIcons,
45
40
  onchange,
46
41
  class: className = ''
47
- }: {
48
- items?: unknown[]
49
- fields?: Record<string, string>
50
- value?: unknown
51
- placeholder?: string
52
- icon?: string
53
- size?: string
54
- disabled?: boolean
55
- showArrow?: boolean
56
- align?: 'start' | 'end'
57
- direction?: 'up' | 'down'
58
- icons?: DropdownIcons
59
- onchange?: (value: unknown, item: unknown) => void
60
- class?: string
61
- } = $props()
42
+ }: DropdownProps = $props()
62
43
 
63
44
  const icons = $derived({ ...DEFAULT_STATE_ICONS.selector, ...userIcons })
64
45
 
@@ -1,22 +1,4 @@
1
- interface DropdownIcons {
2
- opened?: string;
3
- closed?: string;
4
- }
5
- type $$ComponentProps = {
6
- items?: unknown[];
7
- fields?: Record<string, string>;
8
- value?: unknown;
9
- placeholder?: string;
10
- icon?: string;
11
- size?: string;
12
- disabled?: boolean;
13
- showArrow?: boolean;
14
- align?: 'start' | 'end';
15
- direction?: 'up' | 'down';
16
- icons?: DropdownIcons;
17
- onchange?: (value: unknown, item: unknown) => void;
18
- class?: string;
19
- };
20
- declare const Dropdown: import("svelte").Component<$$ComponentProps, {}, "value">;
1
+ import type { DropdownProps } from '../types/select.js';
2
+ declare const Dropdown: import("svelte").Component<DropdownProps, {}, "value">;
21
3
  type Dropdown = ReturnType<typeof Dropdown>;
22
4
  export default Dropdown;
@@ -28,8 +28,8 @@
28
28
  onclose,
29
29
  class: className = '',
30
30
  item: itemSnippet,
31
- ...snippets
32
- }: FloatingActionProps & { [key: string]: FloatingActionItemSnippet | unknown } = $props()
31
+ snippets = {}
32
+ }: FloatingActionProps = $props()
33
33
 
34
34
  const icons = $derived({
35
35
  add: DEFAULT_STATE_ICONS.action.add,
@@ -1,7 +1,4 @@
1
- import type { FloatingActionProps, FloatingActionItemSnippet } from '../types/floating-action.js';
2
- type $$ComponentProps = FloatingActionProps & {
3
- [key: string]: FloatingActionItemSnippet | unknown;
4
- };
5
- declare const FloatingAction: import("svelte").Component<$$ComponentProps, {}, "open">;
1
+ import type { FloatingActionProps } from '../types/floating-action.js';
2
+ declare const FloatingAction: import("svelte").Component<FloatingActionProps, {}, "open">;
6
3
  type FloatingAction = ReturnType<typeof FloatingAction>;
7
4
  export default FloatingAction;
@@ -32,6 +32,7 @@
32
32
  import { Navigator } from '@rokkit/actions'
33
33
  import { resolveSnippet, ITEM_SNIPPET } from '@rokkit/core'
34
34
  import ItemContent from './ItemContent.svelte'
35
+ import type { GridProps } from '../types/grid.js'
35
36
 
36
37
  let {
37
38
  items = [],
@@ -44,20 +45,15 @@
44
45
  label = messages.grid.label,
45
46
  onselect,
46
47
  class: className = '',
47
- ...snippets
48
- }: {
49
- items?: unknown[]
50
- fields?: Record<string, string>
51
- value?: unknown
52
- size?: string
53
- disabled?: boolean
54
- minSize?: string
55
- gap?: string
56
- label?: string
57
- onselect?: (value: unknown, proxy: ProxyItem) => void
58
- class?: string
59
- [key: string]: unknown
60
- } = $props()
48
+ itemContent,
49
+ groupContent,
50
+ snippets = {}
51
+ }: GridProps = $props()
52
+
53
+ // What resolveSnippet searches: the per-item named snippets plus the two
54
+ // defaults it falls back to. Named snippets arrive as a declared `snippets`
55
+ // prop now, so a misspelled prop name is a type error rather than a no-op.
56
+ const snippetBag = $derived({ ...snippets, itemContent, groupContent })
61
57
 
62
58
  // ─── Wrapper ──────────────────────────────────────────────────────────────
63
59
 
@@ -106,7 +102,7 @@
106
102
  {#each wrapper.flatView as node (node.key)}
107
103
  {@const proxy = node.proxy}
108
104
  {@const sel = proxy.value === value}
109
- {@const content = resolveSnippet(snippets as Record<string, unknown>, proxy, ITEM_SNIPPET)}
105
+ {@const content = resolveSnippet(snippetBag, proxy, ITEM_SNIPPET)}
110
106
  <button
111
107
  type="button"
112
108
  data-grid-item
@@ -1,45 +1,4 @@
1
- /**
2
- * Grid — Responsive tile grid with Wrapper + Navigator horizontal navigation.
3
- *
4
- * Architecture:
5
- * Wrapper — owns focusedKey $state + flatView $derived
6
- * Navigator — attaches DOM event handlers, calls wrapper[action](path)
7
- * horizontal orientation (ArrowLeft/ArrowRight navigation)
8
- * flatView loop — single flat {#each} rendering items as grid tiles
9
- *
10
- * Snippet customization:
11
- * itemContent — replaces inner content of <button> for each tile
12
- * [named] — per-item override via item.snippet = 'name'; falls back to itemContent
13
- *
14
- * Snippets receive (proxy) only — the <button> wrapper with data-path is
15
- * always rendered by this component, so snippets never need to handle navigation.
16
- *
17
- * Data attributes on rendered elements:
18
- * data-grid — root container
19
- * data-grid-item — each tile button
20
- * data-path — required by Navigator for click detection + scroll
21
- * data-active — highlights current value match
22
- * data-disabled — disabled state
23
- * data-size — size variant
24
- *
25
- * CSS custom properties:
26
- * --grid-min-size — minimum tile width for auto-fill
27
- * --grid-gap — grid gap
28
- */
29
- import type { ProxyItem } from '@rokkit/states';
30
- type $$ComponentProps = {
31
- items?: unknown[];
32
- fields?: Record<string, string>;
33
- value?: unknown;
34
- size?: string;
35
- disabled?: boolean;
36
- minSize?: string;
37
- gap?: string;
38
- label?: string;
39
- onselect?: (value: unknown, proxy: ProxyItem) => void;
40
- class?: string;
41
- [key: string]: unknown;
42
- };
43
- declare const Grid: import("svelte").Component<$$ComponentProps, {}, "value">;
1
+ import type { GridProps } from '../types/grid.js';
2
+ declare const Grid: import("svelte").Component<GridProps, {}, "value">;
44
3
  type Grid = ReturnType<typeof Grid>;
45
4
  export default Grid;
@@ -8,13 +8,13 @@
8
8
  * Default item content: icon + label + badge + shortcut (no avatar/description).
9
9
  * Parent nodes hide their icon by default.
10
10
  */
11
- import type { ProxyItem } from '@rokkit/states'
12
11
  import { LazyWrapper, LazyProxyItem, ProxyTree, messages } from '@rokkit/states'
13
12
  import { Navigator } from '@rokkit/actions'
14
13
  import { DEFAULT_STATE_ICONS, resolveSnippet, ITEM_SNIPPET } from '@rokkit/core'
15
14
  import ItemContent from './ItemContent.svelte'
16
15
  import Connector from './Connector.svelte'
17
16
  import Button from './Button.svelte'
17
+ import type { LazyTreeProps } from '../types/tree.js'
18
18
 
19
19
  let {
20
20
  items = [],
@@ -28,21 +28,15 @@
28
28
  onlazyload,
29
29
  hasMore = false,
30
30
  class: className = '',
31
- ...snippets
32
- }: {
33
- items?: unknown[]
34
- fields?: Record<string, string>
35
- value?: unknown
36
- size?: 'sm' | 'md' | 'lg'
37
- lineStyle?: 'none' | 'solid' | 'dashed' | 'dotted'
38
- labels?: Record<string, string>
39
- icons?: { opened?: string; closed?: string }
40
- onselect?: (value: unknown, proxy: ProxyItem) => void
41
- onlazyload?: (current?: unknown) => Promise<unknown[]>
42
- hasMore?: boolean
43
- class?: string
44
- [key: string]: unknown
45
- } = $props()
31
+ itemContent,
32
+ groupContent,
33
+ snippets = {}
34
+ }: LazyTreeProps = $props()
35
+
36
+ // What resolveSnippet searches: the per-item named snippets plus the two
37
+ // defaults it falls back to. Named snippets arrive as a declared `snippets`
38
+ // prop now, so a misspelled prop name is a type error rather than a no-op.
39
+ const snippetBag = $derived({ ...snippets, itemContent, groupContent })
46
40
 
47
41
  const labels = $derived({ ...messages.tree, ...userLabels })
48
42
 
@@ -90,7 +84,7 @@
90
84
  {@const proxy = node.proxy}
91
85
  {@const isActive = proxy.value === value}
92
86
  {@const isLoading = proxy.loading}
93
- {@const content = resolveSnippet(snippets, proxy, ITEM_SNIPPET)}
87
+ {@const content = resolveSnippet(snippetBag, proxy, ITEM_SNIPPET)}
94
88
 
95
89
  <div
96
90
  data-tree-node
@@ -1,30 +1,4 @@
1
- /**
2
- * LazyTree — Tree + lazy loading.
3
- *
4
- * Same as Tree but uses LazyProxyItem via createProxy factory
5
- * so nodes with children: true fetch on expand.
6
- *
7
- * Default item content: icon + label + badge + shortcut (no avatar/description).
8
- * Parent nodes hide their icon by default.
9
- */
10
- import type { ProxyItem } from '@rokkit/states';
11
- type $$ComponentProps = {
12
- items?: unknown[];
13
- fields?: Record<string, string>;
14
- value?: unknown;
15
- size?: 'sm' | 'md' | 'lg';
16
- lineStyle?: 'none' | 'solid' | 'dashed' | 'dotted';
17
- labels?: Record<string, string>;
18
- icons?: {
19
- opened?: string;
20
- closed?: string;
21
- };
22
- onselect?: (value: unknown, proxy: ProxyItem) => void;
23
- onlazyload?: (current?: unknown) => Promise<unknown[]>;
24
- hasMore?: boolean;
25
- class?: string;
26
- [key: string]: unknown;
27
- };
28
- declare const LazyTree: import("svelte").Component<$$ComponentProps, {}, "value">;
1
+ import type { LazyTreeProps } from '../types/tree.js';
2
+ declare const LazyTree: import("svelte").Component<LazyTreeProps, {}, "value">;
29
3
  type LazyTree = ReturnType<typeof LazyTree>;
30
4
  export default LazyTree;
@@ -32,11 +32,7 @@
32
32
  import { Navigator } from '@rokkit/actions'
33
33
  import { DEFAULT_STATE_ICONS, resolveSnippet, ITEM_SNIPPET, GROUP_SNIPPET } from '@rokkit/core'
34
34
  import ItemContent from './ItemContent.svelte'
35
-
36
- interface ListIcons {
37
- opened?: string
38
- closed?: string
39
- }
35
+ import type { ListProps, ListStateIcons } from '../types/list.js'
40
36
 
41
37
  let {
42
38
  items = [],
@@ -46,23 +42,18 @@
46
42
  disabled = false,
47
43
  collapsible = false,
48
44
  label = messages.list.label,
49
- icons: userIcons = {} as ListIcons,
45
+ icons: userIcons = {} as ListStateIcons,
50
46
  onselect,
51
47
  class: className = '',
52
- ...snippets
53
- }: {
54
- items?: unknown[]
55
- fields?: Record<string, string>
56
- value?: unknown
57
- size?: string
58
- disabled?: boolean
59
- collapsible?: boolean
60
- label?: string
61
- icons?: ListIcons
62
- onselect?: (value: unknown, proxy: ProxyItem) => void
63
- class?: string
64
- [key: string]: unknown
65
- } = $props()
48
+ itemContent,
49
+ groupContent,
50
+ snippets = {}
51
+ }: ListProps = $props()
52
+
53
+ // What resolveSnippet searches: the per-item named snippets plus the two
54
+ // defaults it falls back to. Named snippets arrive as a declared `snippets`
55
+ // prop now, so a misspelled prop name is a type error rather than a no-op.
56
+ const snippetBag = $derived({ ...snippets, itemContent, groupContent })
66
57
 
67
58
  const icons = $derived({ ...DEFAULT_STATE_ICONS.accordion, ...userIcons })
68
59
 
@@ -184,7 +175,7 @@
184
175
  {@const proxy = node.proxy}
185
176
  {@const isActive = proxy.value === value}
186
177
  {@const content = resolveSnippet(
187
- snippets as Record<string, unknown>,
178
+ snippetBag,
188
179
  proxy,
189
180
  node.hasChildren ? GROUP_SNIPPET : ITEM_SNIPPET
190
181
  )}
@@ -1,49 +1,4 @@
1
- /**
2
- * List — ProxyItem + Wrapper + Navigator implementation.
3
- *
4
- * Architecture:
5
- * Wrapper — owns focusedKey $state + flatView $derived
6
- * Navigator — attaches DOM event handlers, calls wrapper[action](path)
7
- * owns focus + scrollIntoView after every keyboard action
8
- * flatView loop — single flat {#each}, no nested groups in template
9
- *
10
- * Snippet customization:
11
- * itemContent — replaces inner content of <a>/<button> for leaf items
12
- * groupContent — replaces inner content of group header <button>
13
- * [named] — per-item override via item.snippet = 'name'; falls back to itemContent
14
- *
15
- * Snippets receive (proxy) only — the <a>/<button> wrapper with data-path is
16
- * always rendered by this component, so snippets never need to handle navigation.
17
- *
18
- * Data attributes on rendered elements:
19
- * data-path — required by Navigator for click detection + scroll
20
- * data-level — nesting depth (1=root); theme CSS uses for indentation
21
- * data-accordion-trigger — tells Navigator to dispatch toggle (not select) on click
22
- * data-list-item — theme hook for leaf items
23
- * data-list-item-icon — icon span inside leaf items
24
- * data-list-group — theme hook for group headers
25
- * data-list-group-icon — icon span inside group headers
26
- * data-active — highlights current value match
27
- * data-disabled — disabled state
28
- */
29
- import type { ProxyItem } from '@rokkit/states';
30
- interface ListIcons {
31
- opened?: string;
32
- closed?: string;
33
- }
34
- type $$ComponentProps = {
35
- items?: unknown[];
36
- fields?: Record<string, string>;
37
- value?: unknown;
38
- size?: string;
39
- disabled?: boolean;
40
- collapsible?: boolean;
41
- label?: string;
42
- icons?: ListIcons;
43
- onselect?: (value: unknown, proxy: ProxyItem) => void;
44
- class?: string;
45
- [key: string]: unknown;
46
- };
47
- declare const List: import("svelte").Component<$$ComponentProps, {}, "value">;
1
+ import type { ListProps } from '../types/list.js';
2
+ declare const List: import("svelte").Component<ListProps, {}, "value">;
48
3
  type List = ReturnType<typeof List>;
49
4
  export default List;
@@ -42,17 +42,12 @@
42
42
  * data-align — dropdown alignment
43
43
  * data-direction — dropdown direction
44
44
  */
45
- // @ts-nocheck
46
45
  import type { ProxyItem } from '@rokkit/states'
47
46
  import { Wrapper, ProxyTree, messages } from '@rokkit/states'
48
47
  import { Navigator, Trigger } from '@rokkit/actions'
49
48
  import { DEFAULT_STATE_ICONS, resolveSnippet, ITEM_SNIPPET, GROUP_SNIPPET } from '@rokkit/core'
50
49
  import ItemContent from './ItemContent.svelte'
51
-
52
- interface MenuIcons {
53
- opened?: string
54
- closed?: string
55
- }
50
+ import type { MenuProps, MenuStateIcons } from '../types/menu.js'
56
51
 
57
52
  let {
58
53
  items = [],
@@ -66,27 +61,18 @@
66
61
  showArrow = true,
67
62
  align = 'start',
68
63
  direction = 'down',
69
- icons: userIcons = {} as MenuIcons,
64
+ icons: userIcons = {} as MenuStateIcons,
70
65
  onselect,
71
66
  class: className = '',
72
- ...snippets
73
- }: {
74
- items?: unknown[]
75
- fields?: Record<string, string>
76
- value?: unknown
77
- size?: string
78
- disabled?: boolean
79
- collapsible?: boolean
80
- label?: string
81
- icon?: string
82
- showArrow?: boolean
83
- align?: 'start' | 'end'
84
- direction?: 'up' | 'down'
85
- icons?: MenuIcons
86
- onselect?: (value: unknown, proxy: ProxyItem) => void
87
- class?: string
88
- [key: string]: unknown
89
- } = $props()
67
+ itemContent,
68
+ groupContent,
69
+ snippets = {}
70
+ }: MenuProps = $props()
71
+
72
+ // What resolveSnippet searches: the per-item named snippets plus the two
73
+ // defaults it falls back to. Named snippets arrive as a declared `snippets`
74
+ // prop now, so a misspelled prop name is a type error rather than a no-op.
75
+ const snippetBag = $derived({ ...snippets, itemContent, groupContent })
90
76
 
91
77
  const icons = $derived({ ...DEFAULT_STATE_ICONS.selector, ...userIcons })
92
78
 
@@ -219,7 +205,7 @@
219
205
  {@const proxy = node.proxy}
220
206
  {@const isActive = proxy.value === value}
221
207
  {@const content = resolveSnippet(
222
- snippets as Record<string, unknown>,
208
+ snippetBag,
223
209
  proxy,
224
210
  node.hasChildren ? GROUP_SNIPPET : ITEM_SNIPPET
225
211
  )}
@@ -1,68 +1,4 @@
1
- /**
2
- * Menu — Trigger + dropdown with List-identical content.
3
- *
4
- * Architecture:
5
- * Trigger — manages open/close from trigger button (click, Enter, Escape, click-outside)
6
- * Wrapper — owns focusedKey $state + flatView $derived (cancel/blur overridden to close)
7
- * Navigator — attaches DOM event handlers on dropdown, calls wrapper[action](path)
8
- * flatView loop — single flat {#each}, same as List
9
- *
10
- * The dropdown content is identical to List: same flatView loop, same snippet system,
11
- * same collapsible groups. The only additions are trigger, alignment, and direction.
12
- *
13
- * Snippet customization (same as List):
14
- * itemContent — replaces inner content of <button> for leaf items
15
- * groupContent — replaces inner content of group header <button>
16
- * [named] — per-item override via item.snippet = 'name'; falls back to itemContent
17
- *
18
- * Data attributes on rendered elements:
19
- * data-menu — root container
20
- * data-menu-trigger — trigger button
21
- * data-menu-label — trigger label text
22
- * data-menu-icon — trigger icon
23
- * data-menu-arrow — trigger dropdown arrow
24
- * data-menu-dropdown — dropdown container
25
- * data-menu-item — leaf items (like data-list-item)
26
- * data-menu-item-icon — icon span inside leaf items
27
- * data-menu-item-text — text span inside leaf items
28
- * data-menu-group — group headers (like data-list-group)
29
- * data-menu-group-icon — icon span inside group headers
30
- * data-menu-group-text — text span inside group headers
31
- * data-menu-expand-icon — expand/collapse chevron in group headers
32
- * data-menu-separator — separator
33
- * data-menu-spacer — spacer
34
- * data-path — required by Navigator for click detection + scroll
35
- * data-level — nesting depth (1=root)
36
- * data-accordion-trigger — tells Navigator to dispatch toggle on click
37
- * data-active — highlights current value match
38
- * data-disabled — disabled state
39
- * data-open — dropdown is open
40
- * data-size — size variant
41
- * data-align — dropdown alignment
42
- * data-direction — dropdown direction
43
- */
44
- import type { ProxyItem } from '@rokkit/states';
45
- interface MenuIcons {
46
- opened?: string;
47
- closed?: string;
48
- }
49
- type $$ComponentProps = {
50
- items?: unknown[];
51
- fields?: Record<string, string>;
52
- value?: unknown;
53
- size?: string;
54
- disabled?: boolean;
55
- collapsible?: boolean;
56
- label?: string;
57
- icon?: string;
58
- showArrow?: boolean;
59
- align?: 'start' | 'end';
60
- direction?: 'up' | 'down';
61
- icons?: MenuIcons;
62
- onselect?: (value: unknown, proxy: ProxyItem) => void;
63
- class?: string;
64
- [key: string]: unknown;
65
- };
66
- declare const Menu: import("svelte").Component<$$ComponentProps, {}, "">;
1
+ import type { MenuProps } from '../types/menu.js';
2
+ declare const Menu: import("svelte").Component<MenuProps, {}, "">;
67
3
  type Menu = ReturnType<typeof Menu>;
68
4
  export default Menu;
@@ -30,13 +30,7 @@
30
30
  import { Navigator, Trigger } from '@rokkit/actions'
31
31
  import { DEFAULT_STATE_ICONS, resolveSnippet, ITEM_SNIPPET, GROUP_SNIPPET } from '@rokkit/core'
32
32
  import ItemContent from './ItemContent.svelte'
33
-
34
- interface MultiSelectIcons {
35
- opened?: string
36
- closed?: string
37
- checked?: string
38
- remove?: string
39
- }
33
+ import type { MultiSelectProps, SelectStateIcons } from '../types/select.js'
40
34
 
41
35
  let {
42
36
  items = [],
@@ -49,26 +43,18 @@
49
43
  maxDisplay = 3,
50
44
  align = 'start',
51
45
  direction = 'down',
52
- icons: userIcons = {} as MultiSelectIcons,
46
+ icons: userIcons = {} as SelectStateIcons,
53
47
  onchange,
54
48
  class: className = '',
55
- ...snippets
56
- }: {
57
- items?: unknown[]
58
- fields?: Record<string, string>
59
- value?: unknown[]
60
- selected?: unknown[]
61
- placeholder?: string
62
- size?: string
63
- disabled?: boolean
64
- maxDisplay?: number
65
- align?: 'start' | 'end'
66
- direction?: 'up' | 'down'
67
- icons?: MultiSelectIcons
68
- onchange?: (values: unknown[], items: unknown[]) => void
69
- class?: string
70
- [key: string]: unknown
71
- } = $props()
49
+ itemContent,
50
+ groupContent,
51
+ snippets = {}
52
+ }: MultiSelectProps = $props()
53
+
54
+ // What resolveSnippet searches: the per-item named snippets plus the two
55
+ // defaults it falls back to. Named snippets arrive as a declared `snippets`
56
+ // prop now, so a misspelled prop name is a type error rather than a no-op.
57
+ const snippetBag = $derived({ ...snippets, itemContent, groupContent })
72
58
 
73
59
  const icons = $derived({
74
60
  ...DEFAULT_STATE_ICONS.selector,
@@ -317,7 +303,7 @@
317
303
  {@const proxy = node.proxy}
318
304
  {@const sel = !node.hasChildren && isItemSelected(proxy.value)}
319
305
  {@const content = resolveSnippet(
320
- snippets as Record<string, unknown>,
306
+ snippetBag,
321
307
  proxy,
322
308
  node.hasChildren ? GROUP_SNIPPET : ITEM_SNIPPET
323
309
  )}
@@ -1,25 +1,4 @@
1
- interface MultiSelectIcons {
2
- opened?: string;
3
- closed?: string;
4
- checked?: string;
5
- remove?: string;
6
- }
7
- type $$ComponentProps = {
8
- items?: unknown[];
9
- fields?: Record<string, string>;
10
- value?: unknown[];
11
- selected?: unknown[];
12
- placeholder?: string;
13
- size?: string;
14
- disabled?: boolean;
15
- maxDisplay?: number;
16
- align?: 'start' | 'end';
17
- direction?: 'up' | 'down';
18
- icons?: MultiSelectIcons;
19
- onchange?: (values: unknown[], items: unknown[]) => void;
20
- class?: string;
21
- [key: string]: unknown;
22
- };
23
- declare const MultiSelect: import("svelte").Component<$$ComponentProps, {}, "value" | "selected">;
1
+ import type { MultiSelectProps } from '../types/select.js';
2
+ declare const MultiSelect: import("svelte").Component<MultiSelectProps, {}, "value" | "selected">;
24
3
  type MultiSelect = ReturnType<typeof MultiSelect>;
25
4
  export default MultiSelect;