@casinogate/ui 1.7.0 → 1.8.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 (119) hide show
  1. package/dist/assets/css/root.css +43 -4
  2. package/dist/components/breadcrumb/breadcrumb.svelte +2 -2
  3. package/dist/components/breadcrumb/types.d.ts +2 -2
  4. package/dist/components/button/styles.d.ts +15 -0
  5. package/dist/components/button/styles.js +9 -4
  6. package/dist/components/button-group/components/button-group.root.svelte +1 -3
  7. package/dist/components/collapsible/components/collapsaible.svelte.js +3 -3
  8. package/dist/components/data-table/data-table.svelte +1 -1
  9. package/dist/components/data-table/utils/pagination-state.svelte.js +3 -3
  10. package/dist/components/data-table/utils/resize-state.svelte.js +3 -3
  11. package/dist/components/data-table/utils/row-selection-state.svelte.js +3 -3
  12. package/dist/components/dialog/components/dialog.overlay.svelte +1 -7
  13. package/dist/components/dropdown/components/dropdown.content.svelte +0 -2
  14. package/dist/components/dropdown/dropdown.svelte +127 -67
  15. package/dist/components/dropdown/dropdown.svelte.d.ts +3 -2
  16. package/dist/components/dropdown/exports.d.ts +1 -1
  17. package/dist/components/dropdown/exports.js +1 -1
  18. package/dist/components/dropdown/index.d.ts +1 -1
  19. package/dist/components/dropdown/styles.js +5 -3
  20. package/dist/components/dropdown/types.d.ts +47 -23
  21. package/dist/components/field/field.svelte +0 -1
  22. package/dist/components/segment/components/segment.root.svelte +2 -1
  23. package/dist/components/segment/components/segmet.svelte.d.ts +0 -1
  24. package/dist/components/segment/components/segmet.svelte.js +0 -1
  25. package/dist/components/segment/styles.d.ts +18 -0
  26. package/dist/components/segment/styles.js +7 -1
  27. package/dist/components/select/components/select.content.svelte +2 -4
  28. package/dist/components/select/components/select.group-heading.svelte +2 -4
  29. package/dist/components/select/components/select.group-heading.svelte.d.ts +2 -2
  30. package/dist/components/select/components/select.group.svelte.d.ts +2 -2
  31. package/dist/components/select/components/select.item.svelte +5 -13
  32. package/dist/components/select/components/select.item.svelte.d.ts +2 -2
  33. package/dist/components/select/components/select.root.svelte +1 -17
  34. package/dist/components/select/components/select.root.svelte.d.ts +1 -2
  35. package/dist/components/select/components/select.trigger.svelte +17 -5
  36. package/dist/components/select/components/select.viewport.svelte +2 -4
  37. package/dist/components/select/components/select.viewport.svelte.d.ts +2 -2
  38. package/dist/components/select/exports.d.ts +1 -1
  39. package/dist/components/select/exports.js +1 -1
  40. package/dist/components/select/select.async.svelte +146 -83
  41. package/dist/components/select/select.async.svelte.d.ts +1 -1
  42. package/dist/components/select/select.svelte +107 -62
  43. package/dist/components/select/select.svelte.d.ts +4 -2
  44. package/dist/components/select/styles.d.ts +48 -139
  45. package/dist/components/select/styles.js +74 -101
  46. package/dist/components/select/types.d.ts +69 -29
  47. package/dist/components/select/types.js +0 -1
  48. package/dist/components/select/utils/get-item-key.d.ts +1 -1
  49. package/dist/internal/index.d.ts +1 -0
  50. package/dist/internal/index.js +1 -0
  51. package/dist/internal/lib/collection/grid-collection.d.ts +3 -0
  52. package/dist/internal/lib/collection/grid-collection.js +2 -0
  53. package/dist/internal/lib/collection/index.d.ts +5 -0
  54. package/dist/internal/lib/collection/index.js +5 -0
  55. package/dist/internal/lib/collection/list-collection.d.ts +3 -0
  56. package/dist/internal/lib/collection/list-collection.js +2 -0
  57. package/dist/internal/lib/collection/tree-collection.d.ts +4 -0
  58. package/dist/internal/lib/collection/tree-collection.js +3 -0
  59. package/dist/internal/lib/collection/use-list-collection.svelte.d.ts +88 -0
  60. package/dist/internal/lib/collection/use-list-collection.svelte.js +94 -0
  61. package/dist/internal/lib/collection/use-list-selection.svelte.d.ts +92 -0
  62. package/dist/internal/lib/collection/use-list-selection.svelte.js +80 -0
  63. package/dist/internal/lib/index.d.ts +1 -0
  64. package/dist/internal/lib/index.js +1 -0
  65. package/dist/internal/utils/equal.d.ts +3 -0
  66. package/dist/internal/utils/equal.js +56 -0
  67. package/dist/internal/utils/functions.d.ts +2 -0
  68. package/dist/internal/utils/functions.js +4 -0
  69. package/dist/internal/utils/guard.d.ts +5 -0
  70. package/dist/internal/utils/guard.js +5 -0
  71. package/package.json +5 -3
  72. package/dist/components/app-shell/app-shell.stories.svelte +0 -107
  73. package/dist/components/app-shell/app-shell.stories.svelte.d.ts +0 -18
  74. package/dist/components/badge/badge.stories.svelte +0 -81
  75. package/dist/components/badge/badge.stories.svelte.d.ts +0 -19
  76. package/dist/components/breadcrumb/breadcrumb.stories.svelte +0 -67
  77. package/dist/components/breadcrumb/breadcrumb.stories.svelte.d.ts +0 -4
  78. package/dist/components/button/button.stories.svelte +0 -106
  79. package/dist/components/button/button.stories.svelte.d.ts +0 -19
  80. package/dist/components/button-group/button-group.stories.svelte +0 -59
  81. package/dist/components/button-group/button-group.stories.svelte.d.ts +0 -18
  82. package/dist/components/checkbox/checkbox.stories.svelte +0 -52
  83. package/dist/components/checkbox/checkbox.stories.svelte.d.ts +0 -18
  84. package/dist/components/collapsible/collapsible.stories.svelte +0 -69
  85. package/dist/components/collapsible/collapsible.stories.svelte.d.ts +0 -18
  86. package/dist/components/data-table/data-table.stories.svelte +0 -327
  87. package/dist/components/data-table/data-table.stories.svelte.d.ts +0 -4
  88. package/dist/components/dialog/dialog.stories.svelte +0 -116
  89. package/dist/components/dialog/dialog.stories.svelte.d.ts +0 -3
  90. package/dist/components/dropdown/dropdown.stories.svelte +0 -151
  91. package/dist/components/dropdown/dropdown.stories.svelte.d.ts +0 -19
  92. package/dist/components/field/field.stories.svelte +0 -56
  93. package/dist/components/field/field.stories.svelte.d.ts +0 -19
  94. package/dist/components/input/input.stories.svelte +0 -41
  95. package/dist/components/input/input.stories.svelte.d.ts +0 -19
  96. package/dist/components/navigation/navigation.stories.svelte +0 -99
  97. package/dist/components/navigation/navigation.stories.svelte.d.ts +0 -19
  98. package/dist/components/pagination/pagination.stories.svelte +0 -69
  99. package/dist/components/pagination/pagination.stories.svelte.d.ts +0 -19
  100. package/dist/components/popover/popover.stories.svelte +0 -195
  101. package/dist/components/popover/popover.stories.svelte.d.ts +0 -3
  102. package/dist/components/segment/segment.stories.svelte +0 -57
  103. package/dist/components/segment/segment.stories.svelte.d.ts +0 -19
  104. package/dist/components/select/select.stories.svelte +0 -263
  105. package/dist/components/select/select.stories.svelte.d.ts +0 -4
  106. package/dist/components/separator/separator.stories.svelte +0 -44
  107. package/dist/components/separator/separator.stories.svelte.d.ts +0 -19
  108. package/dist/components/skeleton/skeleton.stories.svelte +0 -129
  109. package/dist/components/skeleton/skeleton.stories.svelte.d.ts +0 -19
  110. package/dist/components/spinner/spinner.stories.svelte +0 -29
  111. package/dist/components/spinner/spinner.stories.svelte.d.ts +0 -19
  112. package/dist/components/switch/switch.stories.svelte +0 -55
  113. package/dist/components/switch/switch.stories.svelte.d.ts +0 -19
  114. package/dist/components/textarea/textarea.stories.svelte +0 -36
  115. package/dist/components/textarea/textarea.stories.svelte.d.ts +0 -19
  116. package/dist/components/toast/toast.stories.svelte +0 -96
  117. package/dist/components/toast/toast.stories.svelte.d.ts +0 -19
  118. package/dist/internal/utils/arrays.d.ts +0 -1
  119. package/dist/internal/utils/arrays.js +0 -30
@@ -1,161 +1,70 @@
1
- import { Context } from 'runed';
2
- import type { ReadableBox } from 'svelte-toolbelt';
3
1
  import type { VariantProps } from 'tailwind-variants';
4
- export declare const selectVariants: import("tailwind-variants").TVReturnType<{
2
+ export declare const selectTriggerStyles: import("tailwind-variants").TVReturnType<{
5
3
  variant: {
6
- primary: {
7
- trigger: string[];
8
- };
9
- outline: {
10
- trigger: string[];
11
- };
12
- clear: {};
4
+ primary: string[];
5
+ outline: string[];
6
+ clear: never[];
13
7
  };
14
8
  size: {
15
- sm: {
16
- trigger: string[];
17
- };
18
- md: {
19
- trigger: string[];
20
- chevron: never[];
21
- };
22
- lg: {
23
- trigger: string[];
24
- };
9
+ sm: string[];
10
+ md: string[];
11
+ lg: string[];
25
12
  };
26
13
  rounded: {
27
- sm: {
28
- trigger: string[];
29
- };
30
- md: {
31
- trigger: string[];
32
- };
33
- lg: {
34
- trigger: string[];
35
- };
14
+ sm: string[];
15
+ md: string[];
16
+ lg: string[];
36
17
  };
37
- w: {
38
- full: {
39
- trigger: string[];
40
- };
41
- auto: {
42
- trigger: string[];
43
- };
44
- fit: {
45
- trigger: string[];
46
- };
18
+ fullWidth: {
19
+ true: string[];
47
20
  };
48
- }, {
49
- content: string[];
50
- item: string[];
51
- viewport: string[];
52
- group: never[];
53
- label: string[];
54
- trigger: string[];
55
- }, undefined, {
21
+ }, undefined, string[], {
56
22
  variant: {
57
- primary: {
58
- trigger: string[];
59
- };
60
- outline: {
61
- trigger: string[];
62
- };
63
- clear: {};
23
+ primary: string[];
24
+ outline: string[];
25
+ clear: never[];
64
26
  };
65
27
  size: {
66
- sm: {
67
- trigger: string[];
68
- };
69
- md: {
70
- trigger: string[];
71
- chevron: never[];
72
- };
73
- lg: {
74
- trigger: string[];
75
- };
28
+ sm: string[];
29
+ md: string[];
30
+ lg: string[];
76
31
  };
77
32
  rounded: {
78
- sm: {
79
- trigger: string[];
80
- };
81
- md: {
82
- trigger: string[];
83
- };
84
- lg: {
85
- trigger: string[];
86
- };
33
+ sm: string[];
34
+ md: string[];
35
+ lg: string[];
87
36
  };
88
- w: {
89
- full: {
90
- trigger: string[];
91
- };
92
- auto: {
93
- trigger: string[];
94
- };
95
- fit: {
96
- trigger: string[];
97
- };
37
+ fullWidth: {
38
+ true: string[];
98
39
  };
99
- }, {
100
- content: string[];
101
- item: string[];
102
- viewport: string[];
103
- group: never[];
104
- label: string[];
105
- trigger: string[];
106
- }, import("tailwind-variants").TVReturnType<{
40
+ }, undefined, import("tailwind-variants").TVReturnType<{
107
41
  variant: {
108
- primary: {
109
- trigger: string[];
110
- };
111
- outline: {
112
- trigger: string[];
113
- };
114
- clear: {};
42
+ primary: string[];
43
+ outline: string[];
44
+ clear: never[];
115
45
  };
116
46
  size: {
117
- sm: {
118
- trigger: string[];
119
- };
120
- md: {
121
- trigger: string[];
122
- chevron: never[];
123
- };
124
- lg: {
125
- trigger: string[];
126
- };
47
+ sm: string[];
48
+ md: string[];
49
+ lg: string[];
127
50
  };
128
51
  rounded: {
129
- sm: {
130
- trigger: string[];
131
- };
132
- md: {
133
- trigger: string[];
134
- };
135
- lg: {
136
- trigger: string[];
137
- };
52
+ sm: string[];
53
+ md: string[];
54
+ lg: string[];
138
55
  };
139
- w: {
140
- full: {
141
- trigger: string[];
142
- };
143
- auto: {
144
- trigger: string[];
145
- };
146
- fit: {
147
- trigger: string[];
148
- };
56
+ fullWidth: {
57
+ true: string[];
149
58
  };
150
- }, {
151
- content: string[];
152
- item: string[];
153
- viewport: string[];
154
- group: never[];
155
- label: string[];
156
- trigger: string[];
157
- }, undefined, unknown, unknown, undefined>>;
158
- export type SelectVariantsProps = VariantProps<typeof selectVariants>;
159
- type SelectStylesContextValues = ReadableBox<ReturnType<typeof selectVariants>>;
160
- export declare const SelectStylesContext: Context<SelectStylesContextValues>;
161
- export {};
59
+ }, undefined, string[], unknown, unknown, undefined>>;
60
+ export declare const selectContentStyles: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
61
+ export declare const selectItemStyles: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
62
+ export declare const selectViewportStyles: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
63
+ export declare const selectGroupStyles: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, never[], {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, never[], unknown, unknown, undefined>>;
64
+ export declare const selectGroupHeadingStyles: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
65
+ export type SelectTriggerVariantsProps = VariantProps<typeof selectTriggerStyles>;
66
+ export type SelectContentVariantsProps = VariantProps<typeof selectContentStyles>;
67
+ export type SelectItemVariantsProps = VariantProps<typeof selectItemStyles>;
68
+ export type SelectViewportVariantsProps = VariantProps<typeof selectViewportStyles>;
69
+ export type SelectGroupVariantsProps = VariantProps<typeof selectGroupStyles>;
70
+ export type SelectGroupHeadingVariantsProps = VariantProps<typeof selectGroupHeadingStyles>;
@@ -1,113 +1,86 @@
1
1
  import { tv } from '../../internal/utils/tailwindcss.js';
2
- import { Context } from 'runed';
3
- import { keyWithPrefix } from './../../internal/utils/common.js';
4
- export const selectVariants = tv({
5
- slots: {
6
- content: [
7
- 'cgui:scrollbar-thin',
8
- 'cgui:relative cgui:overflow-y-auto cgui:overflow-x-hidden',
9
- 'cgui:shadow-select cgui:bg-surface-white',
10
- 'cgui:rounded-sm',
11
- 'cgui:z-(--cg-ui-z-index-select)',
12
- 'cgui:max-h-(--bits-select-content-available-height) cgui:origin-(--bits-select-content-transform-origin) cgui:h-(--cg-ui-max-content-height)',
13
- 'cgui:data-[state=open]:animate-in cgui:data-[state=closed]:animate-out cgui:data-[state=closed]:fade-out-0 cgui:data-[state=open]:fade-in-0 cgui:data-[state=closed]:zoom-out-95 cgui:data-[state=open]:zoom-in-95 cgui:data-[side=bottom]:slide-in-from-top-2 cgui:data-[side=left]:slide-in-from-right-2 cgui:data-[side=right]:slide-in-from-left-2 cgui:data-[side=top]:slide-in-from-bottom-2 cgui:data-[side=bottom]:translate-y-1 cgui:data-[side=left]:-translate-x-1 cgui:data-[side=right]:translate-x-1 cgui:data-[side=top]:-translate-y-1',
14
- ],
15
- item: [
16
- 'cgui:relative cgui:w-full',
17
- 'cgui:flex cgui:items-center cgui:justify-between cgui:gap-2',
18
- 'cgui:outline-hidden cgui:cursor-default cgui:select-none',
19
- 'cgui:transition-all cgui:duration-250 cgui:ease-in-out',
20
- 'cgui:rounded-xs',
21
- 'cgui:p-2',
22
- 'cgui:text-body cgui:text-fg-medium',
23
- 'cgui:data-[disabled]:pointer-events-none cgui:data-[disabled]:opacity-50',
24
- 'cgui:[&_svg]:shrink-0 cgui:[&_svg]:pointer-events-none',
25
- 'cgui:data-[highlighted]:bg-surface-lightest',
26
- ],
27
- viewport: [
28
- 'cgui:scrollbar-track-transparent cgui:scrollbar-thumb-stroke-default cgui:scrollbar-thumb-rounded-full',
29
- 'cgui:h-(--bits-select-anchor-height) cgui:min-w-(--bits-select-anchor-width) cgui:w-full cgui:scroll-my-1 cgui:p-1',
30
- ],
31
- group: [],
32
- label: ['cgui:text-fg-semilight cgui:px-2 cgui:py-1.5 cgui:text-caption'],
33
- trigger: [
34
- 'cgui:group/select-trigger',
35
- 'cgui:relative cgui:flex cgui:items-center cgui:justify-between cgui:flex-wrap',
36
- 'cgui:text-body',
37
- 'cgui:transition-all cgui:duration-250 cgui:ease-in-out',
38
- ],
39
- },
2
+ export const selectTriggerStyles = tv({
3
+ base: [
4
+ 'cgui:group/select-trigger',
5
+ 'cgui:relative cgui:flex cgui:items-center cgui:gap-1 cgui:flex-wrap',
6
+ 'cgui:text-body',
7
+ 'cgui:transition-all cgui:duration-250 cgui:ease-in-out',
8
+ 'cgui:[&_svg]:shrink-0 cgui:[&_svg]:pointer-events-none cgui:[&_svg]:text-icon-regular cgui:[&_svg:not([class*="size-"])]:size-4',
9
+ 'cgui:has-[data-slot=chevron]:pr-3',
10
+ ],
40
11
  variants: {
41
12
  variant: {
42
- primary: {
43
- trigger: [
44
- 'cgui:bg-surface-lightest cgui:border cgui:border-stroke-default',
45
- 'cgui:data-[placeholder]:text-fg-regular cgui:text-fg-dark',
46
- ],
47
- },
48
- outline: {
49
- trigger: [
50
- 'cgui:data-[placeholder]:text-fg-regular cgui:text-fg-dark',
51
- 'cgui:border-b cgui:border-b-stroke-default',
52
- ],
53
- },
54
- clear: {},
13
+ primary: [
14
+ 'cgui:bg-surface-lightest cgui:border cgui:border-stroke-default',
15
+ 'cgui:data-[placeholder]:text-fg-regular cgui:text-fg-dark',
16
+ ],
17
+ outline: [
18
+ 'cgui:data-[placeholder]:text-fg-regular cgui:text-fg-dark',
19
+ 'cgui:border-b cgui:border-b-stroke-default',
20
+ 'cgui:rounded-none',
21
+ ],
22
+ clear: [],
55
23
  },
56
24
  size: {
57
- sm: {
58
- trigger: [
59
- 'cgui:min-h-7.5',
60
- 'cgui:px-2.5 cgui:py-1.5',
61
- 'cgui:data-[start-chevron]:pl-8 cgui:data-[end-chevron]:pr-8',
62
- ],
63
- },
64
- md: {
65
- trigger: [
66
- 'cgui:min-h-9',
67
- 'cgui:px-3 cgui:py-2',
68
- 'cgui:data-[start-chevron]:pl-10 cgui:data-[end-chevron]:pr-10',
69
- ],
70
- chevron: [],
71
- },
72
- lg: {
73
- trigger: [
74
- 'cgui:min-h-11',
75
- 'cgui:text-heading-2',
76
- 'cgui:px-4 cgui:py-2.5',
77
- 'cgui:data-[start-chevron]:pl-14 cgui:data-[end-chevron]:pr-14',
78
- ],
79
- },
25
+ sm: ['cgui:min-h-7.5', 'cgui:px-2.5 cgui:py-1.5', 'cgui:data-[start-chevron]:pl-8 cgui:data-[end-chevron]:pr-8'],
26
+ md: ['cgui:min-h-9', 'cgui:px-3 cgui:py-2', 'cgui:data-[start-chevron]:pl-10 cgui:data-[end-chevron]:pr-10'],
27
+ lg: [
28
+ 'cgui:min-h-11',
29
+ 'cgui:text-heading-2',
30
+ 'cgui:px-4 cgui:py-2.5',
31
+ 'cgui:data-[start-chevron]:pl-14 cgui:data-[end-chevron]:pr-14',
32
+ ],
80
33
  },
81
34
  rounded: {
82
- sm: {
83
- trigger: ['cgui:rounded-sm'],
84
- },
85
- md: {
86
- trigger: ['cgui:rounded-md'],
87
- },
88
- lg: {
89
- trigger: ['cgui:rounded-lg'],
90
- },
35
+ sm: ['cgui:rounded-sm'],
36
+ md: ['cgui:rounded-md'],
37
+ lg: ['cgui:rounded-lg'],
91
38
  },
92
- w: {
93
- full: {
94
- trigger: ['cgui:w-full'],
95
- },
96
- auto: {
97
- trigger: ['cgui:w-auto'],
98
- },
99
- fit: {
100
- trigger: ['cgui:w-fit'],
101
- },
39
+ fullWidth: {
40
+ true: ['cgui:w-full'],
102
41
  },
103
42
  },
104
- compoundVariants: [
105
- {
106
- variant: 'outline',
107
- class: {
108
- trigger: ['cgui:rounded-none'],
109
- },
110
- },
43
+ defaultVariants: {
44
+ variant: 'primary',
45
+ size: 'md',
46
+ rounded: 'sm',
47
+ w: 'full',
48
+ },
49
+ });
50
+ export const selectContentStyles = tv({
51
+ base: [
52
+ 'cgui:scrollbar-thin',
53
+ 'cgui:relative cgui:overflow-y-auto cgui:overflow-x-hidden',
54
+ 'cgui:shadow-select cgui:bg-surface-white',
55
+ 'cgui:rounded-sm',
56
+ 'cgui:z-(--cg-ui-z-index-select)',
57
+ 'cgui:max-h-(--bits-select-content-available-height) cgui:origin-(--bits-select-content-transform-origin) cgui:h-(--cg-ui-max-content-height)',
58
+ 'cgui:data-[state=open]:animate-in cgui:data-[state=closed]:animate-out cgui:data-[state=closed]:fade-out-0 cgui:data-[state=open]:fade-in-0 cgui:data-[state=closed]:zoom-out-95 cgui:data-[state=open]:zoom-in-95 cgui:data-[side=bottom]:slide-in-from-top-2 cgui:data-[side=left]:slide-in-from-right-2 cgui:data-[side=right]:slide-in-from-left-2 cgui:data-[side=top]:slide-in-from-bottom-2 cgui:data-[side=bottom]:translate-y-1 cgui:data-[side=left]:-translate-x-1 cgui:data-[side=right]:translate-x-1 cgui:data-[side=top]:-translate-y-1',
111
59
  ],
112
60
  });
113
- export const SelectStylesContext = new Context(keyWithPrefix('select-styles'));
61
+ export const selectItemStyles = tv({
62
+ base: [
63
+ 'cgui:relative cgui:w-full',
64
+ 'cgui:flex cgui:items-center cgui:justify-between cgui:gap-2',
65
+ 'cgui:outline-hidden cgui:cursor-default cgui:select-none',
66
+ 'cgui:transition-all cgui:duration-250 cgui:ease-in-out',
67
+ 'cgui:rounded-xs',
68
+ 'cgui:p-2',
69
+ 'cgui:text-body cgui:text-fg-medium',
70
+ 'cgui:data-[disabled]:pointer-events-none cgui:data-[disabled]:opacity-50',
71
+ 'cgui:[&_svg]:shrink-0 cgui:[&_svg]:pointer-events-none',
72
+ 'cgui:data-[highlighted]:bg-surface-lightest',
73
+ ],
74
+ });
75
+ export const selectViewportStyles = tv({
76
+ base: [
77
+ 'cgui:scrollbar-track-transparent cgui:scrollbar-thumb-stroke-default cgui:scrollbar-thumb-rounded-full',
78
+ 'cgui:h-(--bits-select-anchor-height) cgui:min-w-(--bits-select-anchor-width) cgui:w-full cgui:scroll-my-1 cgui:p-1',
79
+ ],
80
+ });
81
+ export const selectGroupStyles = tv({
82
+ base: [],
83
+ });
84
+ export const selectGroupHeadingStyles = tv({
85
+ base: ['cgui:text-fg-semilight cgui:px-2 cgui:py-1.5 cgui:text-caption'],
86
+ });
@@ -1,64 +1,104 @@
1
+ import type { ListCollection } from '../../internal/index.js';
1
2
  import { type SelectContentProps as SelectContentPropsPrimitive, type SelectGroupHeadingProps as SelectGroupHeadingPropsPrimitive, type SelectGroupProps as SelectGroupPropsPrimitive, type SelectItemProps as SelectItemPropsPrimitive, type SelectPortalProps as SelectPortalPropsPrimitive, type SelectRootProps as SelectRootPropsPrimitive, type SelectTriggerProps as SelectTriggerPropsPrimitive, type SelectViewportProps as SelectViewportPropsPrimitive } from 'bits-ui';
2
- import type { Snippet } from 'svelte';
3
+ import type { Component, Snippet } from 'svelte';
3
4
  import type { WithoutChild } from 'svelte-toolbelt';
4
- import { type SelectVariantsProps } from './styles.js';
5
- export type SelectRootProps = SelectRootPropsPrimitive & SelectVariantsProps;
6
- export type SelectTriggerProps = SelectTriggerPropsPrimitive & {
5
+ import type { SelectContentVariantsProps, SelectGroupHeadingVariantsProps, SelectGroupVariantsProps, SelectItemVariantsProps, SelectTriggerVariantsProps, SelectViewportVariantsProps } from './styles.js';
6
+ /**
7
+ * Primitive props
8
+ */
9
+ export type SelectRootProps = SelectRootPropsPrimitive;
10
+ export type SelectTriggerProps = SelectTriggerPropsPrimitive & SelectTriggerVariantsProps & {
7
11
  hasChevron?: boolean;
8
12
  };
9
- export type SelectContentProps = WithoutChild<SelectContentPropsPrimitive> & {
13
+ export type SelectContentProps = WithoutChild<SelectContentPropsPrimitive> & SelectContentVariantsProps & {
10
14
  maxContentHeight?: string;
11
15
  };
12
- export type SelectViewportProps = SelectViewportPropsPrimitive;
13
- export type SelectItemProps = WithoutChild<SelectItemPropsPrimitive>;
14
- export type SelectGroupProps = SelectGroupPropsPrimitive;
15
- export type SelectGroupHeadingProps = SelectGroupHeadingPropsPrimitive;
16
+ export type SelectViewportProps = SelectViewportPropsPrimitive & SelectViewportVariantsProps;
17
+ export type SelectItemProps = SelectItemPropsPrimitive & SelectItemVariantsProps;
18
+ export type SelectGroupProps = SelectGroupPropsPrimitive & SelectGroupVariantsProps;
19
+ export type SelectGroupHeadingProps = SelectGroupHeadingPropsPrimitive & SelectGroupHeadingVariantsProps;
16
20
  export type SelectPortalProps = SelectPortalPropsPrimitive;
17
- export type SelectBaseItem = {
21
+ /**
22
+ * Item type (Collection based)
23
+ */
24
+ export type SelectItem = {
25
+ /** Unique value for this item (used for selection) */
18
26
  value: string;
27
+ /** Display label */
28
+ label: string;
29
+ /** Optional icon */
30
+ icon?: Component<{
31
+ width?: number;
32
+ height?: number;
33
+ }>;
34
+ /** Whether the item is disabled */
19
35
  disabled?: boolean;
36
+ /** Text value for typeahead (defaults to label) */
37
+ textValue?: string;
38
+ /** Group key for grouping */
39
+ group?: string;
20
40
  };
21
- export type SelectItem = SelectBaseItem & {
22
- label: string;
41
+ export type SelectGroup = {
42
+ key: string;
43
+ label?: string;
44
+ order?: number;
23
45
  };
24
- export type SelectItemGroup<T = SelectItem | string> = {
25
- group: string;
26
- items: T[];
46
+ export type SelectCollectionOptions = {
47
+ items: SelectItem[];
48
+ groups?: SelectGroup[];
49
+ groupSort?: 'asc' | 'desc' | ((a: string, b: string) => number);
27
50
  };
28
- export type SelectItemData = string | SelectItemGroup | SelectItem;
29
- export type SelectData = string[] | SelectItemGroup[] | SelectItem[];
51
+ /** The collection type */
52
+ export type SelectCollection = ListCollection<SelectItem>;
30
53
  export type SelectProps = SelectRootProps & {
31
- data: SelectData;
54
+ /** The item collection */
55
+ collection: SelectCollection;
56
+ /** Group definitions (for labels/ordering) */
57
+ groups?: SelectGroup[];
58
+ /** Placeholder when no value selected */
32
59
  placeholder?: string;
60
+ /** Custom item renderer */
33
61
  item?: Snippet<[{
34
- item: SelectItemData;
62
+ item: SelectItem;
35
63
  props: Record<string, unknown>;
64
+ selected: boolean;
65
+ highlighted: boolean;
36
66
  }]>;
67
+ /** Custom trigger renderer */
37
68
  trigger?: Snippet<[{
38
69
  props: Record<string, unknown>;
39
70
  label: string;
40
71
  }]>;
72
+ /** Custom label renderer */
73
+ label?: Snippet<[{
74
+ placeholder: string;
75
+ value: string | string[];
76
+ }]>;
77
+ /** Empty state content */
41
78
  empty?: Snippet | string;
42
- maxContentHeight?: SelectContentProps['maxContentHeight'];
43
- side?: SelectContentProps['side'];
44
- sideOffset?: SelectContentProps['sideOffset'];
45
- align?: SelectContentProps['align'];
46
- alignOffset?: SelectContentProps['alignOffset'];
47
- avoidCollisions?: SelectContentProps['avoidCollisions'];
48
- collisionPadding?: SelectContentProps['collisionPadding'];
49
- customAnchor?: SelectContentProps['customAnchor'];
79
+ /** Enable typeahead (default: true) */
80
+ typeahead?: boolean;
81
+ /** Content props */
82
+ contentProps?: Omit<SelectContentProps, 'class' | 'children' | 'child' | 'ref'>;
83
+ contentRef?: HTMLDivElement | null;
84
+ contentClass?: string;
50
85
  };
51
86
  export type SelectAsyncCallbackParams = {
52
87
  page: number;
53
88
  pageSize: number;
54
89
  };
55
90
  export type SelectAsyncCallbackResult = {
56
- data: SelectData;
91
+ items: SelectItem[];
57
92
  hasMore: boolean;
58
93
  };
59
94
  export type SelectAsyncCallback = (params: SelectAsyncCallbackParams) => Promise<SelectAsyncCallbackResult>;
60
- export type SelectAsyncProps = Omit<SelectProps, 'data'> & {
95
+ export type SelectAsyncProps = Omit<SelectProps, 'collection'> & {
96
+ /** Loading state renderer */
61
97
  loading?: Snippet;
98
+ /** Page size for pagination */
62
99
  pageSize?: number;
100
+ /** Async data callback */
63
101
  callback: SelectAsyncCallback;
102
+ /** Initial items (optional) */
103
+ initialItems?: SelectItem[];
64
104
  };
@@ -1,2 +1 @@
1
1
  import {} from 'bits-ui';
2
- import {} from './styles.js';
@@ -1,2 +1,2 @@
1
1
  import type { SelectItemData } from '../types.js';
2
- export declare const getItemKey: (item: SelectItemData) => string;
2
+ export declare const getItemKey: (item: SelectItemData) => any;
@@ -1 +1,2 @@
1
+ export * from './lib/index.js';
1
2
  export * from './utils/index.js';
@@ -1 +1,2 @@
1
+ export * from './lib/index.js';
1
2
  export * from './utils/index.js';
@@ -0,0 +1,3 @@
1
+ import { type CollectionItem, type CollectionOptions, GridCollection, type GridCollectionOptions } from '@zag-js/collection';
2
+ export declare const createGridCollection: <T extends CollectionItem>(options: GridCollectionOptions<T>) => GridCollection<T>;
3
+ export type { CollectionItem, CollectionOptions, GridCollection, GridCollectionOptions };
@@ -0,0 +1,2 @@
1
+ import { GridCollection, } from '@zag-js/collection';
2
+ export const createGridCollection = (options) => new GridCollection(options);
@@ -0,0 +1,5 @@
1
+ export { createGridCollection, type GridCollection, type GridCollectionOptions } from './grid-collection.js';
2
+ export { createListCollection, type CollectionItem, type CollectionOptions, type ListCollection, } from './list-collection.js';
3
+ export { createFileTreeCollection, createTreeCollection, type FilePathTreeNode, type FlatTreeNode, type TreeCollection, type TreeCollectionOptions, type TreeNode, } from './tree-collection.js';
4
+ export { useListCollection, type UseListCollectionProps, type UseListCollectionReturn, } from './use-list-collection.svelte.js';
5
+ export { useListSelection, type UseListSelectionProps, type UseListSelectionReturn, } from './use-list-selection.svelte.js';
@@ -0,0 +1,5 @@
1
+ export { createGridCollection } from './grid-collection.js';
2
+ export { createListCollection, } from './list-collection.js';
3
+ export { createFileTreeCollection, createTreeCollection, } from './tree-collection.js';
4
+ export { useListCollection, } from './use-list-collection.svelte.js';
5
+ export { useListSelection, } from './use-list-selection.svelte.js';
@@ -0,0 +1,3 @@
1
+ import { type CollectionItem, type CollectionOptions, ListCollection } from '@zag-js/collection';
2
+ export declare const createListCollection: <T extends CollectionItem>(options: CollectionOptions<T>) => ListCollection<T>;
3
+ export type { CollectionItem, CollectionOptions, ListCollection };
@@ -0,0 +1,2 @@
1
+ import { ListCollection } from '@zag-js/collection';
2
+ export const createListCollection = (options) => new ListCollection(options);
@@ -0,0 +1,4 @@
1
+ import { type FilePathTreeNode, TreeCollection, type TreeCollectionOptions, type TreeNode } from '@zag-js/collection';
2
+ export type { FilePathTreeNode, FlatTreeNode, TreeCollection, TreeCollectionOptions, TreeNode, } from '@zag-js/collection';
3
+ export declare const createTreeCollection: <T extends TreeNode>(options: TreeCollectionOptions<T>) => TreeCollection<T>;
4
+ export declare const createFileTreeCollection: (paths: string[]) => TreeCollection<FilePathTreeNode>;
@@ -0,0 +1,3 @@
1
+ import { TreeCollection, filePathToTree, } from '@zag-js/collection';
2
+ export const createTreeCollection = (options) => new TreeCollection(options);
3
+ export const createFileTreeCollection = (paths) => filePathToTree(paths);