@casinogate/ui 0.0.4 → 1.0.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 (216) hide show
  1. package/dist/app.d.ts +1 -1
  2. package/dist/app.html +9 -9
  3. package/dist/assets/css/root.css +585 -0
  4. package/dist/assets/css/theme.css +2 -0
  5. package/dist/components/button/button.stories.svelte +2 -2
  6. package/dist/components/checkbox/checkbox.stories.svelte +2 -2
  7. package/dist/components/checkbox/components/checkbox.root.svelte +2 -2
  8. package/dist/components/checkbox/index.js +1 -1
  9. package/dist/components/collapsible/collapsible.stories.svelte +2 -2
  10. package/dist/components/collapsible/components/collapsaible.svelte.js +1 -1
  11. package/dist/components/collapsible/components/collapsaible.trigger.svelte +2 -2
  12. package/dist/components/data-table/components/data-table.body.svelte +33 -0
  13. package/dist/components/data-table/components/data-table.body.svelte.d.ts +8 -0
  14. package/dist/components/data-table/components/data-table.cell.svelte +48 -0
  15. package/dist/components/data-table/components/data-table.cell.svelte.d.ts +10 -0
  16. package/dist/components/data-table/components/data-table.head.svelte +48 -0
  17. package/dist/components/data-table/components/data-table.head.svelte.d.ts +10 -0
  18. package/dist/components/data-table/components/data-table.header.svelte +41 -0
  19. package/dist/components/data-table/components/data-table.header.svelte.d.ts +7 -0
  20. package/dist/components/data-table/components/data-table.resize-handler.svelte +31 -0
  21. package/dist/components/data-table/components/data-table.resize-handler.svelte.d.ts +7 -0
  22. package/dist/components/data-table/components/data-table.root.svelte +55 -0
  23. package/dist/components/data-table/components/data-table.root.svelte.d.ts +34 -0
  24. package/dist/components/data-table/components/data-table.row.svelte +35 -0
  25. package/dist/components/data-table/components/data-table.row.svelte.d.ts +7 -0
  26. package/dist/components/data-table/components/data-table.sort-button.svelte +51 -0
  27. package/dist/components/data-table/components/data-table.sort-button.svelte.d.ts +7 -0
  28. package/dist/components/data-table/components/data-table.svelte.d.ts +139 -0
  29. package/dist/components/data-table/components/data-table.svelte.js +248 -0
  30. package/dist/components/data-table/components/data-table.table.svelte +33 -0
  31. package/dist/components/data-table/components/data-table.table.svelte.d.ts +8 -0
  32. package/dist/components/data-table/components/flex-render.svelte +32 -0
  33. package/dist/components/data-table/components/flex-render.svelte.d.ts +30 -0
  34. package/dist/components/data-table/data-table.stories.svelte +327 -0
  35. package/dist/components/data-table/data-table.stories.svelte.d.ts +4 -0
  36. package/dist/components/data-table/data-table.svelte +118 -0
  37. package/dist/components/data-table/data-table.svelte.d.ts +32 -0
  38. package/dist/components/data-table/index.js +26 -0
  39. package/dist/components/data-table/models/create-table.svelte.d.ts +19 -0
  40. package/dist/components/data-table/models/create-table.svelte.js +35 -0
  41. package/dist/components/data-table/models/index.d.ts +1 -0
  42. package/dist/components/data-table/models/index.js +1 -0
  43. package/dist/components/data-table/styles.d.ts +176 -0
  44. package/dist/components/data-table/styles.js +83 -0
  45. package/dist/components/data-table/types.d.ts +1 -0
  46. package/dist/components/data-table/types.js +1 -0
  47. package/dist/components/data-table/utils/index.d.ts +4 -0
  48. package/dist/components/data-table/utils/index.js +4 -0
  49. package/dist/components/data-table/utils/pagination-state.svelte.d.ts +10 -0
  50. package/dist/components/data-table/utils/pagination-state.svelte.js +26 -0
  51. package/dist/components/data-table/utils/render-helper.d.ts +90 -0
  52. package/dist/components/data-table/utils/render-helper.js +99 -0
  53. package/dist/components/data-table/utils/resize-state.svelte.d.ts +10 -0
  54. package/dist/components/data-table/utils/resize-state.svelte.js +23 -0
  55. package/dist/components/data-table/utils/row-models.d.ts +7 -0
  56. package/dist/components/data-table/utils/row-models.js +7 -0
  57. package/dist/components/data-table/utils/row-selection-state.svelte.d.ts +10 -0
  58. package/dist/components/data-table/utils/row-selection-state.svelte.js +23 -0
  59. package/dist/components/icons/caret-down.svelte +12 -0
  60. package/dist/components/icons/caret-down.svelte.d.ts +3 -0
  61. package/dist/components/icons/caret-up.svelte +12 -0
  62. package/dist/components/icons/caret-up.svelte.d.ts +3 -0
  63. package/dist/components/icons/check.svelte +12 -0
  64. package/dist/components/icons/check.svelte.d.ts +3 -0
  65. package/dist/components/icons/chevron-down.svelte +12 -0
  66. package/dist/components/icons/chevron-down.svelte.d.ts +3 -0
  67. package/dist/components/icons/chevron-left.svelte +12 -0
  68. package/dist/components/icons/chevron-left.svelte.d.ts +3 -0
  69. package/dist/components/icons/chevron-right.svelte +12 -0
  70. package/dist/components/icons/chevron-right.svelte.d.ts +3 -0
  71. package/dist/components/icons/chevron-small-down.svelte +14 -0
  72. package/dist/components/icons/chevron-small-down.svelte.d.ts +3 -0
  73. package/dist/components/icons/chevron-small-left.svelte +14 -0
  74. package/dist/components/icons/chevron-small-left.svelte.d.ts +3 -0
  75. package/dist/components/icons/chevron-small-right.svelte +14 -0
  76. package/dist/components/icons/chevron-small-right.svelte.d.ts +3 -0
  77. package/dist/components/icons/chevron-small-up.svelte +14 -0
  78. package/dist/components/icons/chevron-small-up.svelte.d.ts +3 -0
  79. package/dist/components/icons/chevron-up.svelte +12 -0
  80. package/dist/components/icons/chevron-up.svelte.d.ts +3 -0
  81. package/dist/components/icons/dots.svelte +20 -0
  82. package/dist/components/icons/dots.svelte.d.ts +3 -0
  83. package/dist/components/icons/error.svelte +12 -0
  84. package/dist/components/icons/error.svelte.d.ts +3 -0
  85. package/dist/components/icons/eye-crossed.svelte +14 -0
  86. package/dist/components/icons/eye-crossed.svelte.d.ts +3 -0
  87. package/dist/components/icons/eye.svelte +17 -0
  88. package/dist/components/icons/eye.svelte.d.ts +3 -0
  89. package/dist/components/icons/index.d.ts +22 -0
  90. package/dist/components/icons/index.js +21 -0
  91. package/dist/components/icons/info.svelte +12 -0
  92. package/dist/components/icons/info.svelte.d.ts +3 -0
  93. package/dist/components/icons/minus.svelte +12 -0
  94. package/dist/components/icons/minus.svelte.d.ts +3 -0
  95. package/dist/components/icons/sort.svelte +16 -0
  96. package/dist/components/icons/sort.svelte.d.ts +3 -0
  97. package/dist/components/icons/spinner.svelte +9 -0
  98. package/dist/components/icons/spinner.svelte.d.ts +3 -0
  99. package/dist/components/icons/success.svelte +12 -0
  100. package/dist/components/icons/success.svelte.d.ts +3 -0
  101. package/dist/components/icons/types.d.ts +2 -0
  102. package/dist/components/icons/types.js +1 -0
  103. package/dist/components/icons/warning.svelte +12 -0
  104. package/dist/components/icons/warning.svelte.d.ts +3 -0
  105. package/dist/components/input/index.d.ts +6 -0
  106. package/dist/components/input/index.js +5 -0
  107. package/dist/components/input/input.password.svelte +38 -0
  108. package/dist/components/input/input.password.svelte.d.ts +7 -0
  109. package/dist/components/input/input.stories.svelte +41 -0
  110. package/dist/components/input/input.stories.svelte.d.ts +19 -0
  111. package/dist/components/input/input.svelte +65 -0
  112. package/dist/components/input/input.svelte.d.ts +12 -0
  113. package/dist/components/input/styles.d.ts +141 -0
  114. package/dist/components/input/styles.js +64 -0
  115. package/dist/components/pagination/components/pagination.ellipsis.svelte +27 -0
  116. package/dist/components/pagination/components/pagination.ellipsis.svelte.d.ts +7 -0
  117. package/dist/components/pagination/components/pagination.item.svelte +16 -0
  118. package/dist/components/pagination/components/pagination.item.svelte.d.ts +5 -0
  119. package/dist/components/pagination/components/pagination.next-button.svelte +28 -0
  120. package/dist/components/pagination/components/pagination.next-button.svelte.d.ts +5 -0
  121. package/dist/components/pagination/components/pagination.prev-button.svelte +28 -0
  122. package/dist/components/pagination/components/pagination.prev-button.svelte.d.ts +5 -0
  123. package/dist/components/pagination/components/pagination.root.svelte +29 -0
  124. package/dist/components/pagination/components/pagination.root.svelte.d.ts +6 -0
  125. package/dist/components/pagination/index.d.ts +16 -0
  126. package/dist/components/pagination/index.js +16 -0
  127. package/dist/components/pagination/pagination.stories.svelte +69 -0
  128. package/dist/components/pagination/pagination.stories.svelte.d.ts +19 -0
  129. package/dist/components/pagination/presets/basic.svelte +31 -0
  130. package/dist/components/pagination/presets/basic.svelte.d.ts +5 -0
  131. package/dist/components/pagination/presets/index.d.ts +1 -0
  132. package/dist/components/pagination/presets/index.js +1 -0
  133. package/dist/components/pagination/styles.d.ts +98 -0
  134. package/dist/components/pagination/styles.js +51 -0
  135. package/dist/components/segment/components/segment.item.svelte +38 -0
  136. package/dist/components/segment/components/segment.item.svelte.d.ts +9 -0
  137. package/dist/components/segment/components/segment.root.svelte +66 -0
  138. package/dist/components/segment/components/segment.root.svelte.d.ts +13 -0
  139. package/dist/components/segment/components/segment.thumb.svelte +0 -0
  140. package/dist/components/segment/components/segment.thumb.svelte.d.ts +26 -0
  141. package/dist/components/segment/components/segmet.svelte.d.ts +43 -0
  142. package/dist/components/segment/components/segmet.svelte.js +74 -0
  143. package/dist/components/segment/index.d.ts +7 -0
  144. package/dist/components/segment/index.js +6 -0
  145. package/dist/components/segment/segment.stories.svelte +43 -0
  146. package/dist/components/segment/segment.stories.svelte.d.ts +18 -0
  147. package/dist/components/segment/styles.d.ts +107 -0
  148. package/dist/components/segment/styles.js +58 -0
  149. package/dist/components/select/components/select.content.svelte +0 -0
  150. package/dist/components/select/components/select.content.svelte.d.ts +26 -0
  151. package/dist/components/select/components/select.item.svelte +0 -0
  152. package/dist/components/select/components/select.item.svelte.d.ts +26 -0
  153. package/dist/components/select/components/select.root.svelte +27 -0
  154. package/dist/components/select/components/select.root.svelte.d.ts +6 -0
  155. package/dist/components/select/components/select.trigger.svelte +52 -0
  156. package/dist/components/select/components/select.trigger.svelte.d.ts +10 -0
  157. package/dist/components/select/components/select.viewport.svelte +0 -0
  158. package/dist/components/select/components/select.viewport.svelte.d.ts +26 -0
  159. package/dist/components/select/index.d.ts +7 -0
  160. package/dist/components/select/index.js +6 -0
  161. package/dist/components/select/select.stories.svelte +53 -0
  162. package/dist/components/select/select.stories.svelte.d.ts +18 -0
  163. package/dist/components/select/styles.d.ts +149 -0
  164. package/dist/components/select/styles.js +93 -0
  165. package/dist/components/skeleton/index.d.ts +1 -0
  166. package/dist/components/skeleton/index.js +1 -0
  167. package/dist/components/skeleton/skeleton.stories.svelte +121 -0
  168. package/dist/components/skeleton/skeleton.stories.svelte.d.ts +19 -0
  169. package/dist/components/skeleton/skeleton.svelte +25 -0
  170. package/dist/components/skeleton/skeleton.svelte.d.ts +8 -0
  171. package/dist/components/skeleton/styles.d.ts +78 -0
  172. package/dist/components/skeleton/styles.js +30 -0
  173. package/dist/components/spinner/index.d.ts +1 -0
  174. package/dist/components/spinner/index.js +1 -0
  175. package/dist/components/spinner/spinner.stories.svelte +29 -0
  176. package/dist/components/spinner/spinner.stories.svelte.d.ts +19 -0
  177. package/dist/components/spinner/spinner.svelte +24 -0
  178. package/dist/components/spinner/spinner.svelte.d.ts +9 -0
  179. package/dist/components/switch/index.d.ts +7 -2
  180. package/dist/components/switch/index.js +6 -3
  181. package/dist/components/switch/model/index.d.ts +1 -1
  182. package/dist/components/switch/model/index.js +1 -1
  183. package/dist/components/switch/model/switch-model.svelte.d.ts +1 -1
  184. package/dist/components/switch/model/switch-model.svelte.js +1 -1
  185. package/dist/components/switch/presets/basic.svelte +14 -0
  186. package/dist/components/switch/presets/basic.svelte.d.ts +5 -0
  187. package/dist/components/switch/switch.stories.svelte +16 -9
  188. package/dist/components/switch/switch.stories.svelte.d.ts +1 -0
  189. package/dist/components/toast/toast.component.svelte +2 -5
  190. package/dist/components/toast/toast.stories.svelte +2 -2
  191. package/dist/index.d.ts +10 -1
  192. package/dist/index.js +10 -1
  193. package/dist/internal/mocks/data-table.d.ts +9 -0
  194. package/dist/internal/mocks/data-table.js +146 -0
  195. package/dist/internal/types/common.d.ts +1 -0
  196. package/dist/internal/utils/attrs.d.ts +3 -0
  197. package/dist/internal/utils/attrs.js +9 -0
  198. package/dist/internal/utils/objects.d.ts +12 -0
  199. package/dist/internal/utils/objects.js +52 -0
  200. package/package.json +9 -2
  201. package/dist/assets/icons/check.svg +0 -4
  202. package/dist/assets/icons/chevron-down.svg +0 -4
  203. package/dist/assets/icons/chevron-left.svg +0 -4
  204. package/dist/assets/icons/chevron-right.svg +0 -4
  205. package/dist/assets/icons/chevron-small-down.svg +0 -4
  206. package/dist/assets/icons/chevron-small-left.svg +0 -4
  207. package/dist/assets/icons/chevron-small-right.svg +0 -4
  208. package/dist/assets/icons/chevron-small-up.svg +0 -4
  209. package/dist/assets/icons/chevron-up.svg +0 -4
  210. package/dist/assets/icons/error.svg +0 -4
  211. package/dist/assets/icons/info.svg +0 -4
  212. package/dist/assets/icons/minus.svg +0 -4
  213. package/dist/assets/icons/success.svg +0 -4
  214. package/dist/assets/icons/warning.svg +0 -3
  215. package/dist/internal/types/attrs.d.ts +0 -1
  216. package/dist/internal/types/attrs.js +0 -3
@@ -0,0 +1,12 @@
1
+ <script lang="ts">
2
+ import type { IconProps } from './types.js';
3
+
4
+ let props: IconProps = $props();
5
+ </script>
6
+
7
+ <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
8
+ <path
9
+ d="M15.9061 5.09436C15.976 5.16403 16.0314 5.2468 16.0692 5.33791C16.107 5.42903 16.1265 5.52671 16.1265 5.62536C16.1265 5.72402 16.107 5.8217 16.0692 5.91281C16.0314 6.00393 15.976 6.0867 15.9061 6.15636L9.68562 12.3754L15.9061 18.5944C16.0469 18.7352 16.1261 18.9262 16.1261 19.1254C16.1261 19.3245 16.0469 19.5155 15.9061 19.6564C15.7653 19.7972 15.5743 19.8763 15.3751 19.8763C15.176 19.8763 14.9849 19.7972 14.8441 19.6564L8.09412 12.9064C8.02427 12.8367 7.96886 12.7539 7.93105 12.6628C7.89324 12.5717 7.87378 12.474 7.87378 12.3754C7.87378 12.2767 7.89324 12.179 7.93105 12.0879C7.96886 11.9968 8.02427 11.914 8.09412 11.8444L14.8441 5.09436C14.9138 5.02452 14.9966 4.96911 15.0877 4.9313C15.1788 4.89349 15.2765 4.87402 15.3751 4.87402C15.4738 4.87402 15.5715 4.89349 15.6626 4.9313C15.7537 4.96911 15.8365 5.02452 15.9061 5.09436Z"
10
+ fill="currentColor"
11
+ />
12
+ </svg>
@@ -0,0 +1,3 @@
1
+ declare const ChevronLeft: import("svelte").Component<import("../../internal/types/html-attributes.js").PrimitiveSVGAttributes, {}, "">;
2
+ type ChevronLeft = ReturnType<typeof ChevronLeft>;
3
+ export default ChevronLeft;
@@ -0,0 +1,12 @@
1
+ <script lang="ts">
2
+ import type { IconProps } from './types.js';
3
+
4
+ let props: IconProps = $props();
5
+ </script>
6
+
7
+ <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
8
+ <path
9
+ d="M8.09412 19.656C8.02427 19.5863 7.96886 19.5035 7.93105 19.4124C7.89324 19.3213 7.87378 19.2236 7.87378 19.125C7.87378 19.0263 7.89324 18.9286 7.93105 18.8375C7.96886 18.7464 8.02427 18.6636 8.09412 18.594L14.3146 12.375L8.09412 6.15597C7.95329 6.01514 7.87417 5.82413 7.87417 5.62497C7.87417 5.42581 7.95329 5.2348 8.09412 5.09397C8.23495 4.95314 8.42596 4.87402 8.62512 4.87402C8.82428 4.87402 9.01529 4.95314 9.15612 5.09397L15.9061 11.844C15.976 11.9136 16.0314 11.9964 16.0692 12.0875C16.107 12.1786 16.1265 12.2763 16.1265 12.375C16.1265 12.4736 16.107 12.5713 16.0692 12.6624C16.0314 12.7535 15.976 12.8363 15.9061 12.906L9.15612 19.656C9.08645 19.7258 9.00369 19.7812 8.91257 19.819C8.82145 19.8568 8.72377 19.8763 8.62512 19.8763C8.52647 19.8763 8.42879 19.8568 8.33767 19.819C8.24655 19.7812 8.16379 19.7258 8.09412 19.656Z"
10
+ fill="currentColor"
11
+ />
12
+ </svg>
@@ -0,0 +1,3 @@
1
+ declare const ChevronRight: import("svelte").Component<import("../../internal/types/html-attributes.js").PrimitiveSVGAttributes, {}, "">;
2
+ type ChevronRight = ReturnType<typeof ChevronRight>;
3
+ export default ChevronRight;
@@ -0,0 +1,14 @@
1
+ <script lang="ts">
2
+ import type { IconProps } from './types.js';
3
+
4
+ let props: IconProps = $props();
5
+ </script>
6
+
7
+ <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
8
+ <path
9
+ fill-rule="evenodd"
10
+ clip-rule="evenodd"
11
+ d="M7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967Z"
12
+ fill="currentColor"
13
+ />
14
+ </svg>
@@ -0,0 +1,3 @@
1
+ declare const ChevronSmallDown: import("svelte").Component<import("../../internal/types/html-attributes.js").PrimitiveSVGAttributes, {}, "">;
2
+ type ChevronSmallDown = ReturnType<typeof ChevronSmallDown>;
3
+ export default ChevronSmallDown;
@@ -0,0 +1,14 @@
1
+ <script lang="ts">
2
+ import type { IconProps } from './types.js';
3
+
4
+ let props: IconProps = $props();
5
+ </script>
6
+
7
+ <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
8
+ <path
9
+ fill-rule="evenodd"
10
+ clip-rule="evenodd"
11
+ d="M14.5303 7.46967C14.8232 7.76256 14.8232 8.23744 14.5303 8.53033L11.0607 12L14.5303 15.4697C14.8232 15.7626 14.8232 16.2374 14.5303 16.5303C14.2374 16.8232 13.7626 16.8232 13.4697 16.5303L9.46967 12.5303C9.17678 12.2374 9.17678 11.7626 9.46967 11.4697L13.4697 7.46967C13.7626 7.17678 14.2374 7.17678 14.5303 7.46967Z"
12
+ fill="currentColor"
13
+ />
14
+ </svg>
@@ -0,0 +1,3 @@
1
+ declare const ChevronSmallLeft: import("svelte").Component<import("../../internal/types/html-attributes.js").PrimitiveSVGAttributes, {}, "">;
2
+ type ChevronSmallLeft = ReturnType<typeof ChevronSmallLeft>;
3
+ export default ChevronSmallLeft;
@@ -0,0 +1,14 @@
1
+ <script lang="ts">
2
+ import type { IconProps } from './types.js';
3
+
4
+ let props: IconProps = $props();
5
+ </script>
6
+
7
+ <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
8
+ <path
9
+ fill-rule="evenodd"
10
+ clip-rule="evenodd"
11
+ d="M9.46967 7.46967C9.76256 7.17678 10.2374 7.17678 10.5303 7.46967L14.5303 11.4697C14.8232 11.7626 14.8232 12.2374 14.5303 12.5303L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303C9.17678 16.2374 9.17678 15.7626 9.46967 15.4697L12.9393 12L9.46967 8.53033C9.17678 8.23744 9.17678 7.76256 9.46967 7.46967Z"
12
+ fill="currentColor"
13
+ />
14
+ </svg>
@@ -0,0 +1,3 @@
1
+ declare const ChevronSmallRight: import("svelte").Component<import("../../internal/types/html-attributes.js").PrimitiveSVGAttributes, {}, "">;
2
+ type ChevronSmallRight = ReturnType<typeof ChevronSmallRight>;
3
+ export default ChevronSmallRight;
@@ -0,0 +1,14 @@
1
+ <script lang="ts">
2
+ import type { IconProps } from './types.js';
3
+
4
+ let props: IconProps = $props();
5
+ </script>
6
+
7
+ <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
8
+ <path
9
+ fill-rule="evenodd"
10
+ clip-rule="evenodd"
11
+ d="M11.4697 9.46967C11.7626 9.17678 12.2374 9.17678 12.5303 9.46967L16.5303 13.4697C16.8232 13.7626 16.8232 14.2374 16.5303 14.5303C16.2374 14.8232 15.7626 14.8232 15.4697 14.5303L12 11.0607L8.53033 14.5303C8.23744 14.8232 7.76256 14.8232 7.46967 14.5303C7.17678 14.2374 7.17678 13.7626 7.46967 13.4697L11.4697 9.46967Z"
12
+ fill="currentColor"
13
+ />
14
+ </svg>
@@ -0,0 +1,3 @@
1
+ declare const ChevronSmallUp: import("svelte").Component<import("../../internal/types/html-attributes.js").PrimitiveSVGAttributes, {}, "">;
2
+ type ChevronSmallUp = ReturnType<typeof ChevronSmallUp>;
3
+ export default ChevronSmallUp;
@@ -0,0 +1,12 @@
1
+ <script lang="ts">
2
+ import type { IconProps } from './types.js';
3
+
4
+ let props: IconProps = $props();
5
+ </script>
6
+
7
+ <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
8
+ <path
9
+ d="M19.281 16.2814C19.2113 16.3512 19.1285 16.4066 19.0374 16.4444C18.9463 16.4822 18.8486 16.5017 18.75 16.5017C18.6513 16.5017 18.5536 16.4822 18.4625 16.4444C18.3714 16.4066 18.2886 16.3512 18.219 16.2814L12 10.0609L5.78097 16.2814C5.64014 16.4222 5.44913 16.5013 5.24997 16.5013C5.05081 16.5013 4.8598 16.4222 4.71897 16.2814C4.57814 16.1405 4.49902 15.9495 4.49902 15.7504C4.49902 15.5512 4.57814 15.3602 4.71897 15.2194L11.469 8.46936C11.5386 8.39952 11.6214 8.34411 11.7125 8.3063C11.8036 8.26849 11.9013 8.24902 12 8.24902C12.0986 8.24902 12.1963 8.26849 12.2874 8.3063C12.3785 8.34411 12.4613 8.39952 12.531 8.46936L19.281 15.2194C19.3508 15.289 19.4062 15.3718 19.444 15.4629C19.4818 15.554 19.5013 15.6517 19.5013 15.7504C19.5013 15.849 19.4818 15.9467 19.444 16.0378C19.4062 16.1289 19.3508 16.2117 19.281 16.2814Z"
10
+ fill="currentColor"
11
+ />
12
+ </svg>
@@ -0,0 +1,3 @@
1
+ declare const ChevronUp: import("svelte").Component<import("../../internal/types/html-attributes.js").PrimitiveSVGAttributes, {}, "">;
2
+ type ChevronUp = ReturnType<typeof ChevronUp>;
3
+ export default ChevronUp;
@@ -0,0 +1,20 @@
1
+ <script lang="ts">
2
+ import type { IconProps } from './types.js';
3
+
4
+ let props: IconProps = $props();
5
+ </script>
6
+
7
+ <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
8
+ <path
9
+ d="M18 14C16.8954 14 16 13.1046 16 12C16 10.8954 16.8954 10 18 10C19.1046 10 20 10.8954 20 12C20 13.1046 19.1046 14 18 14Z"
10
+ fill="currentColor"
11
+ />
12
+ <path
13
+ d="M12 14C10.8954 14 10 13.1046 10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14Z"
14
+ fill="currentColor"
15
+ />
16
+ <path
17
+ d="M6 14C4.89543 14 4 13.1046 4 12C4 10.8954 4.89543 10 6 10C7.10457 10 8 10.8954 8 12C8 13.1046 7.10457 14 6 14Z"
18
+ fill="currentColor"
19
+ />
20
+ </svg>
@@ -0,0 +1,3 @@
1
+ declare const Dots: import("svelte").Component<import("../../internal/types/html-attributes.js").PrimitiveSVGAttributes, {}, "">;
2
+ type Dots = ReturnType<typeof Dots>;
3
+ export default Dots;
@@ -0,0 +1,12 @@
1
+ <script lang="ts">
2
+ import type { IconProps } from './types.js';
3
+
4
+ let props: IconProps = $props();
5
+ </script>
6
+
7
+ <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
8
+ <path
9
+ d="M12 3C7.041 3 3 7.041 3 12C3 16.959 7.041 21 12 21C16.959 21 21 16.959 21 12C21 7.041 16.959 3 12 3ZM15.024 14.07C15.285 14.331 15.285 14.763 15.024 15.024C14.889 15.159 14.718 15.222 14.547 15.222C14.376 15.222 14.205 15.159 14.07 15.024L12 12.954L9.93 15.024C9.795 15.159 9.624 15.222 9.453 15.222C9.282 15.222 9.111 15.159 8.976 15.024C8.715 14.763 8.715 14.331 8.976 14.07L11.046 12L8.976 9.93C8.715 9.669 8.715 9.237 8.976 8.976C9.237 8.715 9.669 8.715 9.93 8.976L12 11.046L14.07 8.976C14.331 8.715 14.763 8.715 15.024 8.976C15.285 9.237 15.285 9.669 15.024 9.93L12.954 12L15.024 14.07Z"
10
+ fill="currentColor"
11
+ />
12
+ </svg>
@@ -0,0 +1,3 @@
1
+ declare const Error: import("svelte").Component<import("../../internal/types/html-attributes.js").PrimitiveSVGAttributes, {}, "">;
2
+ type Error = ReturnType<typeof Error>;
3
+ export default Error;
@@ -0,0 +1,14 @@
1
+ <script lang="ts">
2
+ import type { IconProps } from './types.js';
3
+
4
+ let props: IconProps = $props();
5
+ </script>
6
+
7
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
8
+ <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
9
+ <path d="M10.585 10.587a2 2 0 0 0 2.829 2.828" />
10
+ <path
11
+ d="M16.681 16.673A8.7 8.7 0 0 1 12 18q-5.4 0-9-6q1.908-3.18 4.32-4.674m2.86-1.146A9 9 0 0 1 12 6q5.4 0 9 6q-1 1.665-2.138 2.87M3 3l18 18"
12
+ />
13
+ </g>
14
+ </svg>
@@ -0,0 +1,3 @@
1
+ declare const EyeCrossed: import("svelte").Component<import("../../internal/types/html-attributes.js").PrimitiveSVGAttributes, {}, "">;
2
+ type EyeCrossed = ReturnType<typeof EyeCrossed>;
3
+ export default EyeCrossed;
@@ -0,0 +1,17 @@
1
+ <script lang="ts">
2
+ import type { IconProps } from './types.js';
3
+
4
+ let props: IconProps = $props();
5
+ </script>
6
+
7
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
8
+ <g fill="none" fill-rule="evenodd">
9
+ <path
10
+ d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z"
11
+ />
12
+ <path
13
+ fill="currentColor"
14
+ d="M4 12.001c.003-.016.017-.104.095-.277c.086-.191.225-.431.424-.708c.398-.553.993-1.192 1.745-1.798C7.777 7.996 9.812 7 12 7s4.223.996 5.736 2.216c.752.606 1.347 1.245 1.745 1.798c.2.277.338.517.424.708c.078.173.092.261.095.277V12c-.003.016-.017.104-.095.277a4.3 4.3 0 0 1-.424.708c-.398.553-.993 1.192-1.745 1.798C16.224 16.004 14.189 17 12 17s-4.223-.996-5.736-2.216c-.752-.606-1.347-1.245-1.745-1.798a4.2 4.2 0 0 1-.424-.708A1 1 0 0 1 4 12.001M12 5C9.217 5 6.752 6.254 5.009 7.659c-.877.706-1.6 1.474-2.113 2.187a6 6 0 0 0-.625 1.055C2.123 11.23 2 11.611 2 12c0 .388.123.771.27 1.099c.155.342.37.7.626 1.055c.513.713 1.236 1.48 2.113 2.187C6.752 17.746 9.217 19 12 19s5.248-1.254 6.991-2.659c.877-.706 1.6-1.474 2.113-2.187c.257-.356.471-.713.625-1.055c.148-.328.271-.71.271-1.099c0-.388-.123-.771-.27-1.099a6.2 6.2 0 0 0-.626-1.055c-.513-.713-1.236-1.48-2.113-2.187C17.248 6.254 14.783 5 12 5m-1 7a1 1 0 1 1 2 0a1 1 0 0 1-2 0m1-3a3 3 0 1 0 0 6a3 3 0 0 0 0-6"
15
+ />
16
+ </g>
17
+ </svg>
@@ -0,0 +1,3 @@
1
+ declare const Eye: import("svelte").Component<import("../../internal/types/html-attributes.js").PrimitiveSVGAttributes, {}, "">;
2
+ type Eye = ReturnType<typeof Eye>;
3
+ export default Eye;
@@ -0,0 +1,22 @@
1
+ export { default as CaretDownIcon } from './caret-down.svelte';
2
+ export { default as CaretUpIcon } from './caret-up.svelte';
3
+ export { default as CheckIcon } from './check.svelte';
4
+ export { default as ChevronDownIcon } from './chevron-down.svelte';
5
+ export { default as ChevronLeftIcon } from './chevron-left.svelte';
6
+ export { default as ChevronRightIcon } from './chevron-right.svelte';
7
+ export { default as ChevronSmallDownIcon } from './chevron-small-down.svelte';
8
+ export { default as ChevronSmallLeftIcon } from './chevron-small-left.svelte';
9
+ export { default as ChevronSmallRightIcon } from './chevron-small-right.svelte';
10
+ export { default as ChevronSmallUpIcon } from './chevron-small-up.svelte';
11
+ export { default as ChevronUpIcon } from './chevron-up.svelte';
12
+ export { default as DotsIcon } from './dots.svelte';
13
+ export { default as ErrorIcon } from './error.svelte';
14
+ export { default as EyeCrossedIcon } from './eye-crossed.svelte';
15
+ export { default as EyeIcon } from './eye.svelte';
16
+ export { default as InfoIcon } from './info.svelte';
17
+ export { default as MinusIcon } from './minus.svelte';
18
+ export { default as SortIcon } from './sort.svelte';
19
+ export { default as SpinnerIcon } from './spinner.svelte';
20
+ export { default as SuccessIcon } from './success.svelte';
21
+ export { default as WarningIcon } from './warning.svelte';
22
+ export type { IconProps } from './types.js';
@@ -0,0 +1,21 @@
1
+ export { default as CaretDownIcon } from './caret-down.svelte';
2
+ export { default as CaretUpIcon } from './caret-up.svelte';
3
+ export { default as CheckIcon } from './check.svelte';
4
+ export { default as ChevronDownIcon } from './chevron-down.svelte';
5
+ export { default as ChevronLeftIcon } from './chevron-left.svelte';
6
+ export { default as ChevronRightIcon } from './chevron-right.svelte';
7
+ export { default as ChevronSmallDownIcon } from './chevron-small-down.svelte';
8
+ export { default as ChevronSmallLeftIcon } from './chevron-small-left.svelte';
9
+ export { default as ChevronSmallRightIcon } from './chevron-small-right.svelte';
10
+ export { default as ChevronSmallUpIcon } from './chevron-small-up.svelte';
11
+ export { default as ChevronUpIcon } from './chevron-up.svelte';
12
+ export { default as DotsIcon } from './dots.svelte';
13
+ export { default as ErrorIcon } from './error.svelte';
14
+ export { default as EyeCrossedIcon } from './eye-crossed.svelte';
15
+ export { default as EyeIcon } from './eye.svelte';
16
+ export { default as InfoIcon } from './info.svelte';
17
+ export { default as MinusIcon } from './minus.svelte';
18
+ export { default as SortIcon } from './sort.svelte';
19
+ export { default as SpinnerIcon } from './spinner.svelte';
20
+ export { default as SuccessIcon } from './success.svelte';
21
+ export { default as WarningIcon } from './warning.svelte';
@@ -0,0 +1,12 @@
1
+ <script lang="ts">
2
+ import type { IconProps } from './types.js';
3
+
4
+ let props: IconProps = $props();
5
+ </script>
6
+
7
+ <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
8
+ <path
9
+ d="M12 21C16.959 21 21 16.959 21 12C21 7.041 16.959 3 12 3C7.041 3 3 7.041 3 12C3 16.959 7.041 21 12 21ZM12.675 15.6C12.675 15.969 12.369 16.275 12 16.275C11.631 16.275 11.325 15.969 11.325 15.6L11.325 11.1C11.325 10.731 11.631 10.425 12 10.425C12.369 10.425 12.675 10.731 12.675 11.1L12.675 15.6ZM11.172 8.058C11.217 7.941 11.28 7.851 11.361 7.761C11.451 7.68 11.55 7.617 11.658 7.572C11.766 7.527 11.883 7.5 12 7.5C12.117 7.5 12.234 7.527 12.342 7.572C12.45 7.617 12.549 7.68 12.639 7.761C12.72 7.851 12.783 7.941 12.828 8.058C12.873 8.166 12.9 8.283 12.9 8.4C12.9 8.517 12.873 8.634 12.828 8.742C12.783 8.85 12.72 8.949 12.639 9.039C12.549 9.12 12.45 9.183 12.342 9.228C12.126 9.318 11.874 9.318 11.658 9.228C11.55 9.183 11.451 9.12 11.361 9.039C11.28 8.949 11.217 8.85 11.172 8.742C11.127 8.634 11.1 8.517 11.1 8.4C11.1 8.283 11.127 8.166 11.172 8.058Z"
10
+ fill="currentColor"
11
+ />
12
+ </svg>
@@ -0,0 +1,3 @@
1
+ declare const Info: import("svelte").Component<import("../../internal/types/html-attributes.js").PrimitiveSVGAttributes, {}, "">;
2
+ type Info = ReturnType<typeof Info>;
3
+ export default Info;
@@ -0,0 +1,12 @@
1
+ <script lang="ts">
2
+ import type { IconProps } from './types.js';
3
+
4
+ let props: IconProps = $props();
5
+ </script>
6
+
7
+ <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
8
+ <path
9
+ d="M5 12C5 11.4477 5.39175 11 5.875 11H18.125C18.6082 11 19 11.4477 19 12C19 12.5523 18.6082 13 18.125 13H5.875C5.39175 13 5 12.5523 5 12Z"
10
+ fill="currentColor"
11
+ />
12
+ </svg>
@@ -0,0 +1,3 @@
1
+ declare const Minus: import("svelte").Component<import("../../internal/types/html-attributes.js").PrimitiveSVGAttributes, {}, "">;
2
+ type Minus = ReturnType<typeof Minus>;
3
+ export default Minus;
@@ -0,0 +1,16 @@
1
+ <script lang="ts">
2
+ import type { IconProps } from './types.js';
3
+
4
+ let props: IconProps = $props();
5
+ </script>
6
+
7
+ <svg viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
8
+ <path
9
+ d="M11.1452 5.90609L9.92195 4.11401L9.17504 3.01419C8.85875 2.55082 8.34429 2.55082 8.028 3.01419L6.05402 5.90609C5.79489 6.28572 5.98161 6.93333 6.34364 6.93333H10.8556C11.2214 6.93333 11.4043 6.28572 11.1452 5.90609Z"
10
+ fill="currentColor"
11
+ />
12
+ <path
13
+ d="M10.8546 9.06666H6.34429C5.97859 9.06666 5.79575 9.71427 6.05478 10.0939L8.02802 12.9858C8.3442 13.4492 8.85846 13.4492 9.17464 12.9858L11.1479 10.0939C11.4031 9.71427 11.2203 9.06666 10.8546 9.06666Z"
14
+ fill="currentColor"
15
+ />
16
+ </svg>
@@ -0,0 +1,3 @@
1
+ declare const Sort: import("svelte").Component<import("../../internal/types/html-attributes.js").PrimitiveSVGAttributes, {}, "">;
2
+ type Sort = ReturnType<typeof Sort>;
3
+ export default Sort;
@@ -0,0 +1,9 @@
1
+ <script lang="ts">
2
+ import type { IconProps } from './types.js';
3
+
4
+ let props: IconProps = $props();
5
+ </script>
6
+
7
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" {...props}>
8
+ <path fill="currentColor" d="M2 8a6 6 0 1 1 6 6a.5.5 0 0 0 0 1a7 7 0 1 0-7-7a.5.5 0 0 0 1 0" />
9
+ </svg>
@@ -0,0 +1,3 @@
1
+ declare const Spinner: import("svelte").Component<import("../../internal/types/html-attributes.js").PrimitiveSVGAttributes, {}, "">;
2
+ type Spinner = ReturnType<typeof Spinner>;
3
+ export default Spinner;
@@ -0,0 +1,12 @@
1
+ <script lang="ts">
2
+ import type { IconProps } from './types.js';
3
+
4
+ let props: IconProps = $props();
5
+ </script>
6
+
7
+ <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
8
+ <path
9
+ d="M12 3.5C7.041 3.5 3 7.541 3 12.5C3 17.459 7.041 21.5 12 21.5C16.959 21.5 21 17.459 21 12.5C21 7.541 16.959 3.5 12 3.5ZM16.302 10.43L11.199 15.533C11.073 15.659 10.902 15.731 10.722 15.731C10.542 15.731 10.371 15.659 10.245 15.533L7.698 12.986C7.437 12.725 7.437 12.293 7.698 12.032C7.959 11.771 8.391 11.771 8.652 12.032L10.722 14.102L15.348 9.476C15.609 9.215 16.041 9.215 16.302 9.476C16.563 9.737 16.563 10.16 16.302 10.43Z"
10
+ fill="currentColor"
11
+ />
12
+ </svg>
@@ -0,0 +1,3 @@
1
+ declare const Success: import("svelte").Component<import("../../internal/types/html-attributes.js").PrimitiveSVGAttributes, {}, "">;
2
+ type Success = ReturnType<typeof Success>;
3
+ export default Success;
@@ -0,0 +1,2 @@
1
+ import type { PrimitiveSVGAttributes } from '../../internal/types/html-attributes.js';
2
+ export type IconProps = PrimitiveSVGAttributes;
@@ -0,0 +1 @@
1
+ export {};
@@ -0,0 +1,12 @@
1
+ <script lang="ts">
2
+ import type { IconProps } from './types.js';
3
+
4
+ let props: IconProps = $props();
5
+ </script>
6
+
7
+ <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
8
+ <path
9
+ d="M21.3487 15.7641L15.2184 5.20071C14.3947 3.77942 13.2548 3 12 3C10.7452 3 9.60535 3.77942 8.78159 5.20071L2.65127 15.7641C1.8754 17.1121 1.78919 18.405 2.4118 19.4228C3.03441 20.4407 4.26048 21 5.86968 21H18.1303C19.7395 21 20.9656 20.4407 21.5882 19.4228C22.2108 18.405 22.1246 17.1029 21.3487 15.7641ZM11.2816 9.41875C11.2816 9.04279 11.6073 8.73102 12 8.73102C12.3927 8.73102 12.7184 9.04279 12.7184 9.41875V14.0036C12.7184 14.3795 12.3927 14.6913 12 14.6913C11.6073 14.6913 11.2816 14.3795 11.2816 14.0036V9.41875ZM12.6801 17.4055C12.6322 17.4422 12.5843 17.4789 12.5364 17.5155C12.4789 17.5522 12.4215 17.5797 12.364 17.5981C12.3065 17.6256 12.249 17.6439 12.182 17.6531C12.1245 17.6623 12.0575 17.6714 12 17.6714C11.9425 17.6714 11.8755 17.6623 11.8084 17.6531C11.751 17.6439 11.6935 17.6256 11.636 17.5981C11.5785 17.5797 11.5211 17.5522 11.4636 17.5155C11.4157 17.4789 11.3678 17.4422 11.3199 17.4055C11.1475 17.2313 11.0421 16.9929 11.0421 16.7545C11.0421 16.516 11.1475 16.2776 11.3199 16.1034C11.3678 16.0667 11.4157 16.0301 11.4636 15.9934C11.5211 15.9567 11.5785 15.9292 11.636 15.9109C11.6935 15.8833 11.751 15.865 11.8084 15.8558C11.933 15.8283 12.067 15.8283 12.182 15.8558C12.249 15.865 12.3065 15.8833 12.364 15.9109C12.4215 15.9292 12.4789 15.9567 12.5364 15.9934C12.5843 16.0301 12.6322 16.0667 12.6801 16.1034C12.8525 16.2776 12.9579 16.516 12.9579 16.7545C12.9579 16.9929 12.8525 17.2313 12.6801 17.4055Z"
10
+ fill="currentColor"
11
+ />
12
+ </svg>
@@ -0,0 +1,3 @@
1
+ declare const Warning: import("svelte").Component<import("../../internal/types/html-attributes.js").PrimitiveSVGAttributes, {}, "">;
2
+ type Warning = ReturnType<typeof Warning>;
3
+ export default Warning;
@@ -0,0 +1,6 @@
1
+ import { type InputPasswordProps } from './input.password.svelte';
2
+ import { type InputProps } from './input.svelte';
3
+ export declare const Input: import("svelte").Component<InputProps, {}, "ref"> & {
4
+ InputPassword: import("svelte").Component<InputPasswordProps, {}, "ref" | "showPassword">;
5
+ };
6
+ export type { InputPasswordProps, InputProps };
@@ -0,0 +1,5 @@
1
+ import InputPassword, {} from './input.password.svelte';
2
+ import Root, {} from './input.svelte';
3
+ export const Input = Object.assign(Root, {
4
+ InputPassword,
5
+ });
@@ -0,0 +1,38 @@
1
+ <script lang="ts" module>
2
+ export type InputPasswordProps = Omit<InputProps, 'endChevron' | 'type'> & {
3
+ showPassword?: boolean;
4
+ };
5
+ </script>
6
+
7
+ <script lang="ts">
8
+ import { EyeCrossedIcon, EyeIcon } from '../icons/index.js';
9
+
10
+ import { cn } from '../../internal/utils/common.js';
11
+ import Input, { type InputProps } from './input.svelte';
12
+
13
+ let { ref = $bindable(null), showPassword = $bindable(false), ...restProps }: InputPasswordProps = $props();
14
+
15
+ const type = $derived(showPassword ? 'text' : 'password');
16
+
17
+ function togglePassword() {
18
+ showPassword = !showPassword;
19
+ }
20
+ </script>
21
+
22
+ <Input bind:ref {type} {...restProps}>
23
+ {#snippet endChevron()}
24
+ <button
25
+ onclick={togglePassword}
26
+ class={cn(
27
+ 'cgui:cursor-pointer cgui:p-0 cgui:flex cgui:items-center cgui:justify-center cgui:bg-transparent cgui:border-none',
28
+ 'cgui:focus-visible:ring-stroke-focus cgui:focus-visible:border-stroke-focus cgui:outline-stroke-focus'
29
+ )}
30
+ >
31
+ {#if showPassword}
32
+ <EyeIcon width={20} height={20} />
33
+ {:else}
34
+ <EyeCrossedIcon width={20} height={20} />
35
+ {/if}
36
+ </button>
37
+ {/snippet}
38
+ </Input>
@@ -0,0 +1,7 @@
1
+ export type InputPasswordProps = Omit<InputProps, 'endChevron' | 'type'> & {
2
+ showPassword?: boolean;
3
+ };
4
+ import Input, { type InputProps } from './input.svelte';
5
+ declare const Input: import("svelte").Component<InputPasswordProps, {}, "ref" | "showPassword">;
6
+ type Input = ReturnType<typeof Input>;
7
+ export default Input;
@@ -0,0 +1,41 @@
1
+ <script lang="ts" module>
2
+ import { defineMeta } from '@storybook/addon-svelte-csf';
3
+ import type { Parameters } from '@storybook/sveltekit';
4
+ import type { ComponentProps } from 'svelte';
5
+ import InputPassword from './input.password.svelte';
6
+ import Input from './input.svelte';
7
+
8
+ const parameters: Parameters = {
9
+ controls: {
10
+ include: ['placeholder', 'variant', 'size', 'rounded', 'w'],
11
+ },
12
+ };
13
+
14
+ const { Story } = defineMeta({
15
+ title: 'UI Kit/Input',
16
+ component: Input,
17
+ tags: ['autodocs'],
18
+ parameters,
19
+ });
20
+
21
+ type Args = ComponentProps<typeof Input>;
22
+
23
+ const args: Args = {
24
+ variant: 'primary',
25
+ size: 'md',
26
+ rounded: 'sm',
27
+ w: 'full',
28
+ };
29
+ </script>
30
+
31
+ <Story name="Basic" args={{ ...args, placeholder: 'Basic' }} {parameters} />
32
+
33
+ <Story name="Invalid" args={{ ...args, placeholder: 'Invalid', 'aria-invalid': true }} {parameters} />
34
+
35
+ <Story name="Disabled" args={{ ...args, placeholder: 'Disabled', disabled: true }} {parameters} />
36
+
37
+ <Story name="Password" args={{ ...args, placeholder: 'Password' }} {parameters}>
38
+ {#snippet template(args: Args)}
39
+ <InputPassword {...args} />
40
+ {/snippet}
41
+ </Story>
@@ -0,0 +1,19 @@
1
+ import Input from './input.svelte';
2
+ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
3
+ new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
4
+ $$bindings?: Bindings;
5
+ } & Exports;
6
+ (internal: unknown, props: {
7
+ $$events?: Events;
8
+ $$slots?: Slots;
9
+ }): Exports & {
10
+ $set?: any;
11
+ $on?: any;
12
+ };
13
+ z_$$bindings?: Bindings;
14
+ }
15
+ declare const Input: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
16
+ [evt: string]: CustomEvent<any>;
17
+ }, {}, {}, string>;
18
+ type Input = InstanceType<typeof Input>;
19
+ export default Input;
@@ -0,0 +1,65 @@
1
+ <script lang="ts" module>
2
+ import type { PrimitiveInputAttributes } from '../../internal/types/html-attributes.js';
3
+ import { getDataActive } from '../../internal/utils/attrs.js';
4
+ import { cn } from '../../internal/utils/common.js';
5
+ import { useId } from 'bits-ui';
6
+ import type { Snippet } from 'svelte';
7
+ import type { WithElementRef, Without } from 'svelte-toolbelt';
8
+ import { type InputVariants, inputStyles } from './styles.js';
9
+
10
+ type InputPropsWithoutHTML = WithElementRef<{
11
+ startChevron?: Snippet;
12
+
13
+ endChevron?: Snippet;
14
+ }> &
15
+ InputVariants;
16
+
17
+ export type InputProps = InputPropsWithoutHTML & Without<PrimitiveInputAttributes, InputPropsWithoutHTML>;
18
+ </script>
19
+
20
+ <script lang="ts">
21
+ let {
22
+ ref = $bindable(null),
23
+ id = useId(),
24
+ class: className,
25
+ startChevron,
26
+ endChevron,
27
+ variant = 'primary',
28
+ size = 'md',
29
+ rounded = 'sm',
30
+ w = 'full',
31
+ ...restProps
32
+ }: InputProps = $props();
33
+
34
+ const hasChevron = $derived(startChevron || endChevron);
35
+
36
+ const variants = $derived(inputStyles({ variant, size, rounded, w }));
37
+ </script>
38
+
39
+ {#if hasChevron}
40
+ <div class={variants.wrapper()}>
41
+ {#if startChevron}
42
+ <div class={variants.chevron()} data-slot="start-chevron">
43
+ {@render startChevron()}
44
+ </div>
45
+ {/if}
46
+
47
+ <input
48
+ bind:this={ref}
49
+ data-start-chevron={getDataActive(Boolean(startChevron))}
50
+ data-end-chevron={getDataActive(Boolean(endChevron))}
51
+ {id}
52
+ data-slot="input"
53
+ class={cn(variants.input(), className)}
54
+ {...restProps}
55
+ />
56
+
57
+ {#if endChevron}
58
+ <div class={variants.chevron()} data-slot="end-chevron">
59
+ {@render endChevron()}
60
+ </div>
61
+ {/if}
62
+ </div>
63
+ {:else}
64
+ <input bind:this={ref} {id} data-slot="input" class={cn(variants.input(), className)} {...restProps} />
65
+ {/if}
@@ -0,0 +1,12 @@
1
+ import type { PrimitiveInputAttributes } from '../../internal/types/html-attributes.js';
2
+ import type { Snippet } from 'svelte';
3
+ import type { WithElementRef, Without } from 'svelte-toolbelt';
4
+ import { type InputVariants } from './styles.js';
5
+ type InputPropsWithoutHTML = WithElementRef<{
6
+ startChevron?: Snippet;
7
+ endChevron?: Snippet;
8
+ }> & InputVariants;
9
+ export type InputProps = InputPropsWithoutHTML & Without<PrimitiveInputAttributes, InputPropsWithoutHTML>;
10
+ declare const Input: import("svelte").Component<InputProps, {}, "ref">;
11
+ type Input = ReturnType<typeof Input>;
12
+ export default Input;