@flightlesslabs/dodo-ui 0.13.0 → 0.15.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 (212) hide show
  1. package/dist/index.d.ts +9 -0
  2. package/dist/index.js +6 -0
  3. package/dist/stories/components/Form/Button/Button.svelte +1 -1
  4. package/dist/stories/components/Form/Button/Button.svelte.d.ts +1 -1
  5. package/dist/stories/components/Form/Checkbox/Checkbox.stories.svelte +39 -0
  6. package/dist/stories/components/Form/Checkbox/Checkbox.stories.svelte.d.ts +21 -0
  7. package/dist/stories/components/Form/Checkbox/Checkbox.svelte +452 -0
  8. package/dist/stories/components/Form/Checkbox/Checkbox.svelte.d.ts +42 -0
  9. package/{src/lib/stories/components/Form/RangeSlider → dist/stories/components/Form/Checkbox}/Color/Color.stories.svelte +4 -4
  10. package/dist/stories/components/Form/Checkbox/Color/Color.stories.svelte.d.ts +26 -0
  11. package/dist/stories/components/Form/Checkbox/Customize/Customize.stories.svelte +27 -0
  12. package/dist/stories/components/Form/Checkbox/Customize/Customize.stories.svelte.d.ts +18 -0
  13. package/dist/stories/components/Form/Checkbox/Events/Events.stories.svelte +35 -0
  14. package/dist/stories/components/Form/Checkbox/Events/Events.stories.svelte.d.ts +18 -0
  15. package/{src/lib/stories/components/Form/PasswordInput → dist/stories/components/Form/Checkbox}/Roundness/Roundness.stories.svelte +6 -4
  16. package/dist/stories/components/Form/Checkbox/Roundness/Roundness.stories.svelte.d.ts +26 -0
  17. package/{src/lib/stories/components/Form/RangeSlider → dist/stories/components/Form/Checkbox}/Size/Size.stories.svelte +4 -4
  18. package/dist/stories/components/Form/Checkbox/Size/Size.stories.svelte.d.ts +26 -0
  19. package/dist/stories/components/Form/Checkbox/utils/scss/mixins.scss +80 -0
  20. package/{src/lib/stories/components/Info/Calendar/SubComponents/CalendarMonthList → dist/stories/components/Form/Radio}/Color/Color.stories.svelte +4 -7
  21. package/dist/stories/components/Form/Radio/Color/Color.stories.svelte.d.ts +26 -0
  22. package/dist/stories/components/Form/Radio/Events/Events.stories.svelte +32 -0
  23. package/dist/stories/components/Form/Radio/Events/Events.stories.svelte.d.ts +18 -0
  24. package/dist/stories/components/Form/Radio/Radio.stories.svelte +39 -0
  25. package/dist/stories/components/Form/Radio/Radio.stories.svelte.d.ts +21 -0
  26. package/dist/stories/components/Form/Radio/Radio.svelte +413 -0
  27. package/dist/stories/components/Form/Radio/Radio.svelte.d.ts +36 -0
  28. package/{src/lib/stories/components/Form/NumericInput → dist/stories/components/Form/Radio}/Roundness/Roundness.stories.svelte +7 -5
  29. package/dist/stories/components/Form/Radio/Roundness/Roundness.stories.svelte.d.ts +26 -0
  30. package/{src/lib/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarWeek → dist/stories/components/Form/Radio}/Size/Size.stories.svelte +4 -4
  31. package/dist/stories/components/Form/Radio/Size/Size.stories.svelte.d.ts +26 -0
  32. package/dist/stories/components/Form/Radio/utils/scss/mixins.scss +85 -0
  33. package/{src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarNavigation → dist/stories/components/Form/Toggle}/Color/Color.stories.svelte +4 -4
  34. package/dist/stories/components/Form/Toggle/Color/Color.stories.svelte.d.ts +26 -0
  35. package/dist/stories/components/Form/Toggle/Events/Events.stories.svelte +35 -0
  36. package/dist/stories/components/Form/Toggle/Events/Events.stories.svelte.d.ts +18 -0
  37. package/{src/lib/stories/developer tools/components/InputEnclosure/Roundness/Roundness.stories.svelte → dist/stories/components/Form/Toggle/Roundness/Roundness.stories.svelte} +8 -6
  38. package/dist/stories/components/Form/Toggle/Roundness/Roundness.stories.svelte.d.ts +26 -0
  39. package/{src/lib/stories/components/Form/NumericInput → dist/stories/components/Form/Toggle}/Size/Size.stories.svelte +4 -4
  40. package/dist/stories/components/Form/Toggle/Size/Size.stories.svelte.d.ts +26 -0
  41. package/dist/stories/components/Form/Toggle/Toggle.stories.svelte +37 -0
  42. package/dist/stories/components/Form/Toggle/Toggle.stories.svelte.d.ts +21 -0
  43. package/dist/stories/components/Form/Toggle/Toggle.svelte +359 -0
  44. package/dist/stories/components/Form/Toggle/Toggle.svelte.d.ts +36 -0
  45. package/dist/stories/components/Form/Toggle/utils/scss/mixins.scss +68 -0
  46. package/package.json +16 -14
  47. package/src/lib/index.ts +12 -0
  48. package/src/lib/stories/components/Form/Button/Button.svelte +2 -2
  49. package/src/lib/stories/components/Form/Checkbox/Checkbox.svelte +323 -0
  50. package/src/lib/stories/components/Form/Checkbox/utils/scss/mixins.scss +80 -0
  51. package/src/lib/stories/components/Form/Radio/Radio.svelte +278 -0
  52. package/src/lib/stories/components/Form/Radio/utils/scss/mixins.scss +85 -0
  53. package/src/lib/stories/components/Form/Toggle/Toggle.svelte +290 -0
  54. package/src/lib/stories/components/Form/Toggle/utils/scss/mixins.scss +68 -0
  55. package/src/lib/stories/Home.mdx +0 -59
  56. package/src/lib/stories/assets/dark-theme-toggle.png +0 -0
  57. package/src/lib/stories/components/Form/Button/Button.stories.svelte +0 -61
  58. package/src/lib/stories/components/Form/Button/Color/Color.stories.svelte +0 -43
  59. package/src/lib/stories/components/Form/Button/Events/Events.stories.svelte +0 -36
  60. package/src/lib/stories/components/Form/Button/IconButton/IconButton.stories.svelte +0 -43
  61. package/src/lib/stories/components/Form/Button/Roundness/Roundness.stories.svelte +0 -23
  62. package/src/lib/stories/components/Form/Button/Size/Size.stories.svelte +0 -16
  63. package/src/lib/stories/components/Form/Button/Variant/Variant.stories.svelte +0 -18
  64. package/src/lib/stories/components/Form/DatePicker/Color/Color.stories.svelte +0 -47
  65. package/src/lib/stories/components/Form/DatePicker/Controls/Controls.stories.svelte +0 -58
  66. package/src/lib/stories/components/Form/DatePicker/Customize/Customize.stories.svelte +0 -167
  67. package/src/lib/stories/components/Form/DatePicker/DatePicker.stories.svelte +0 -107
  68. package/src/lib/stories/components/Form/DatePicker/Events/Events.stories.svelte +0 -147
  69. package/src/lib/stories/components/Form/DatePicker/FilterDates/FilterDates.stories.svelte +0 -61
  70. package/src/lib/stories/components/Form/DatePicker/Positions/AutoPosition/AutoPosition.stories.svelte +0 -46
  71. package/src/lib/stories/components/Form/DatePicker/Positions/Positions.stories.svelte +0 -57
  72. package/src/lib/stories/components/Form/DatePicker/Roundness/Roundness.stories.svelte +0 -38
  73. package/src/lib/stories/components/Form/DatePicker/Size/Size.stories.svelte +0 -41
  74. package/src/lib/stories/components/Form/DatePicker/WithIcon/WithIcon.stories.svelte +0 -41
  75. package/src/lib/stories/components/Form/FormControl/FormControl.stories.svelte +0 -28
  76. package/src/lib/stories/components/Form/Label/Label.stories.svelte +0 -13
  77. package/src/lib/stories/components/Form/Message/Color/Color.stories.svelte +0 -36
  78. package/src/lib/stories/components/Form/Message/Message.stories.svelte +0 -27
  79. package/src/lib/stories/components/Form/Message/Size/Size.stories.svelte +0 -22
  80. package/src/lib/stories/components/Form/NumericInput/Events/Events.stories.svelte +0 -134
  81. package/src/lib/stories/components/Form/NumericInput/NumericInput.stories.svelte +0 -84
  82. package/src/lib/stories/components/Form/NumericInput/Validation/Validation.stories.svelte +0 -87
  83. package/src/lib/stories/components/Form/NumericInput/WithIcon/WithIcon.stories.svelte +0 -31
  84. package/src/lib/stories/components/Form/PasswordInput/Events/Events.stories.svelte +0 -132
  85. package/src/lib/stories/components/Form/PasswordInput/PasswordInput.stories.svelte +0 -58
  86. package/src/lib/stories/components/Form/PasswordInput/Size/Size.stories.svelte +0 -16
  87. package/src/lib/stories/components/Form/PasswordInput/WithIcon/WithIcon.stories.svelte +0 -31
  88. package/src/lib/stories/components/Form/RangeSlider/Events/Events.stories.svelte +0 -63
  89. package/src/lib/stories/components/Form/RangeSlider/RangeSlider.stories.svelte +0 -69
  90. package/src/lib/stories/components/Form/RangeSlider/Roundness/Roundness.stories.svelte +0 -30
  91. package/src/lib/stories/components/Form/RangeSlider/WithIcon/WithIcon.stories.svelte +0 -33
  92. package/src/lib/stories/components/Form/Select/Customize/Customize.stories.svelte +0 -139
  93. package/src/lib/stories/components/Form/Select/DropDownArrow/DropDownArrow.stories.svelte +0 -63
  94. package/src/lib/stories/components/Form/Select/Events/Events.stories.svelte +0 -174
  95. package/src/lib/stories/components/Form/Select/Options/OptionFormat.mdx +0 -40
  96. package/src/lib/stories/components/Form/Select/Positions/AutoPosition/AutoPosition.stories.svelte +0 -58
  97. package/src/lib/stories/components/Form/Select/Positions/Positions.stories.svelte +0 -87
  98. package/src/lib/stories/components/Form/Select/Roundness/Roundness.stories.svelte +0 -32
  99. package/src/lib/stories/components/Form/Select/Select.stories.svelte +0 -125
  100. package/src/lib/stories/components/Form/Select/Size/Size.stories.svelte +0 -28
  101. package/src/lib/stories/components/Form/Select/WithIcon/WithIcon.stories.svelte +0 -43
  102. package/src/lib/stories/components/Form/TextInput/Events/Events.stories.svelte +0 -125
  103. package/src/lib/stories/components/Form/TextInput/Roundness/Roundness.stories.svelte +0 -21
  104. package/src/lib/stories/components/Form/TextInput/Size/Size.stories.svelte +0 -17
  105. package/src/lib/stories/components/Form/TextInput/TextInput.stories.svelte +0 -43
  106. package/src/lib/stories/components/Form/TextInput/WithIcon/WithIcon.stories.svelte +0 -47
  107. package/src/lib/stories/components/Info/Calendar/Calendar.stories.svelte +0 -121
  108. package/src/lib/stories/components/Info/Calendar/Color/Color.stories.svelte +0 -23
  109. package/src/lib/stories/components/Info/Calendar/Controls/Controls.stories.svelte +0 -26
  110. package/src/lib/stories/components/Info/Calendar/Customize/Customize.stories.svelte +0 -160
  111. package/src/lib/stories/components/Info/Calendar/Events/Events.stories.svelte +0 -122
  112. package/src/lib/stories/components/Info/Calendar/FilterDates/FilterDates.stories.svelte +0 -70
  113. package/src/lib/stories/components/Info/Calendar/Size/Size.stories.svelte +0 -20
  114. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarControls.stories.svelte +0 -36
  115. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarMonthSelector/CalendarMonthSelector.stories.svelte +0 -58
  116. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarMonthSelector/Color/Color.stories.svelte +0 -23
  117. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarMonthSelector/Customize/Customize.stories.svelte +0 -30
  118. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarMonthSelector/Events/Events.stories.svelte +0 -25
  119. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarMonthSelector/NameTypes/NameTypes.stories.svelte +0 -25
  120. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarMonthSelector/Roundness/Roundness.stories.svelte +0 -26
  121. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarMonthSelector/Size/Size.stories.svelte +0 -20
  122. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarNavigation/CalendarNavigation.stories.svelte +0 -36
  123. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarNavigation/Customize/Customize.stories.svelte +0 -33
  124. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarNavigation/Events/Events.stories.svelte +0 -37
  125. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarNavigation/Size/Size.stories.svelte +0 -16
  126. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarYearSelector/CalendarYearSelector.stories.svelte +0 -58
  127. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarYearSelector/Color/Color.stories.svelte +0 -23
  128. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarYearSelector/Customize/Customize.stories.svelte +0 -30
  129. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarYearSelector/Events/Events.stories.svelte +0 -25
  130. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarYearSelector/Roundness/Roundness.stories.svelte +0 -26
  131. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/CalendarYearSelector/Size/Size.stories.svelte +0 -20
  132. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/Color/Color.stories.svelte +0 -23
  133. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/Controls/Controls.stories.svelte +0 -21
  134. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/Customize/Customize.stories.svelte +0 -69
  135. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/Events/Events.stories.svelte +0 -61
  136. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarControls/Size/Size.stories.svelte +0 -20
  137. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarDateChip/CalendarDateChip.stories.svelte +0 -75
  138. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarDateChip/Color/Color.stories.svelte +0 -41
  139. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarDateChip/Customize/Customize.stories.svelte +0 -45
  140. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarDateChip/Events/Events.stories.svelte +0 -28
  141. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarDateChip/Roundness/Roundness.stories.svelte +0 -31
  142. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarDateChip/Size/Size.stories.svelte +0 -24
  143. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarDateChip/SpecialChips/SpecialChips.stories.svelte +0 -96
  144. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarDatesChart.stories.svelte +0 -104
  145. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarWeek/CalendarWeek.stories.svelte +0 -38
  146. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarWeek/Customize/Customize.stories.svelte +0 -32
  147. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarWeek/NameTypes/NameTypes.stories.svelte +0 -28
  148. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/Color/Color.stories.svelte +0 -23
  149. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/Customize/Customize.stories.svelte +0 -68
  150. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/Events/Events.stories.svelte +0 -24
  151. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/Size/Size.stories.svelte +0 -20
  152. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarMonthList/CalendarMonthChip/CalendarMonthChip.stories.svelte +0 -40
  153. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarMonthList/CalendarMonthChip/Color/Color.stories.svelte +0 -29
  154. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarMonthList/CalendarMonthChip/Customize/Customize.stories.svelte +0 -33
  155. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarMonthList/CalendarMonthChip/Events/Events.stories.svelte +0 -23
  156. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarMonthList/CalendarMonthChip/Roundness/Roundness.stories.svelte +0 -26
  157. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarMonthList/CalendarMonthChip/Size/Size.stories.svelte +0 -19
  158. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarMonthList/CalendarMonthList.stories.svelte +0 -45
  159. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarMonthList/Customize/Customize.stories.svelte +0 -36
  160. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarMonthList/Events/Events.stories.svelte +0 -33
  161. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarMonthList/Size/Size.stories.svelte +0 -19
  162. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarYearList/CalendarYearChip/CalendarYearChip.stories.svelte +0 -41
  163. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarYearList/CalendarYearChip/Color/Color.stories.svelte +0 -30
  164. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarYearList/CalendarYearChip/Customize/Customize.stories.svelte +0 -33
  165. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarYearList/CalendarYearChip/Events/Events.stories.svelte +0 -24
  166. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarYearList/CalendarYearChip/Roundness/Roundness.stories.svelte +0 -27
  167. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarYearList/CalendarYearChip/Size/Size.stories.svelte +0 -20
  168. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarYearList/CalendarYearList.stories.svelte +0 -39
  169. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarYearList/Color/Color.stories.svelte +0 -23
  170. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarYearList/Customize/Customize.stories.svelte +0 -36
  171. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarYearList/Events/Events.stories.svelte +0 -24
  172. package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarYearList/Size/Size.stories.svelte +0 -20
  173. package/src/lib/stories/components/Info/Calendar/utils/createDateOfMonth/index.mdx +0 -121
  174. package/src/lib/stories/components/Info/Calendar/utils/getDatesOfMonth/index.mdx +0 -37
  175. package/src/lib/stories/components/Layout/Menu/DynamicMenu/Customize/Customize.stories.svelte +0 -30
  176. package/src/lib/stories/components/Layout/Menu/DynamicMenu/DynamicMenu.stories.svelte +0 -56
  177. package/src/lib/stories/components/Layout/Menu/DynamicMenu/Events/Events.stories.svelte +0 -48
  178. package/src/lib/stories/components/Layout/Menu/DynamicMenu/KeybaordNavigation/KeybaordNavigation.stories.svelte +0 -29
  179. package/src/lib/stories/components/Layout/Menu/DynamicMenu/Options/OptionFormat.mdx +0 -72
  180. package/src/lib/stories/components/Layout/Menu/Menu.stories.svelte +0 -69
  181. package/src/lib/stories/components/Layout/Menu/MenuItem/MenuItem.stories.svelte +0 -34
  182. package/src/lib/stories/components/Layout/Menu/MenuItem/Size/Size.stories.svelte +0 -16
  183. package/src/lib/stories/components/Layout/Menu/MenuItem/Type/Type.stories.svelte +0 -21
  184. package/src/lib/stories/components/Layout/Menu/Size/Size.stories.svelte +0 -37
  185. package/src/lib/stories/components/Layout/Paper/Color/Color.stories.svelte +0 -63
  186. package/src/lib/stories/components/Layout/Paper/Paper.stories.svelte +0 -50
  187. package/src/lib/stories/components/Layout/Paper/Roundness/Roundness.stories.svelte +0 -25
  188. package/src/lib/stories/components/Layout/Paper/Shadow/Shadow.stories.svelte +0 -24
  189. package/src/lib/stories/components/Layout/Separator/Color/Color.stories.svelte +0 -19
  190. package/src/lib/stories/components/Layout/Separator/Separator.stories.svelte +0 -30
  191. package/src/lib/stories/developer tools/Intro.mdx +0 -9
  192. package/src/lib/stories/developer tools/components/DynamicInput/DynamicInput.stories.svelte +0 -53
  193. package/src/lib/stories/developer tools/components/DynamicInput/Events/Events.stories.svelte +0 -121
  194. package/src/lib/stories/developer tools/components/DynamicInput/Size/Size.stories.svelte +0 -17
  195. package/src/lib/stories/developer tools/components/InputEnclosure/InputEnclosure.stories.svelte +0 -38
  196. package/src/lib/stories/developer tools/components/InputEnclosure/Size/Size.stories.svelte +0 -16
  197. package/src/lib/stories/developer tools/components/InputEnclosure/WithIcon/WithIcon.stories.svelte +0 -47
  198. package/src/lib/stories/developer tools/components/Popper/Popper.stories.svelte +0 -140
  199. package/src/lib/stories/developer tools/components/Popper/PopperPopup/PopperPopup.stories.svelte +0 -64
  200. package/src/lib/stories/developer tools/components/Popper/Positions/AutoPosition/AutoPosition.stories.svelte +0 -92
  201. package/src/lib/stories/developer tools/components/Popper/Positions/Positions.stories.svelte +0 -114
  202. package/src/lib/stories/developer tools/components/UtilityButton/Size/Size.stories.svelte +0 -25
  203. package/src/lib/stories/developer tools/components/UtilityButton/UtilityButton.stories.svelte +0 -30
  204. package/src/lib/stories/developer tools/directives/clickOutside/index.mdx +0 -25
  205. package/src/lib/stories/developer tools/helpers/Numbers/cleanNumericString/index.mdx +0 -20
  206. package/src/lib/stories/developer tools/helpers/Numbers/isValidNumberValue/index.mdx +0 -71
  207. package/src/lib/stories/developer tools/helpers/Time/getMoment/index.mdx +0 -45
  208. package/src/lib/stories/developer tools/helpers/logger/index.mdx +0 -63
  209. package/src/lib/stories/developer tools/philosophy/Colors/Colors.mdx +0 -43
  210. package/src/lib/stories/developer tools/philosophy/Colors/Colors.stories.svelte +0 -22
  211. package/src/lib/stories/developer tools/philosophy/Colors/Opacity.stories.svelte +0 -11
  212. package/src/lib/stories/developer tools/philosophy/Themes.mdx +0 -23
@@ -1,33 +0,0 @@
1
- <script module lang="ts">
2
- import { defineMeta } from '@storybook/addon-svelte-csf';
3
- import CalendarNavigation from '../CalendarNavigation.svelte';
4
- import { storyCalendarNavigationArgTypes } from '../CalendarNavigation.stories.svelte';
5
- import { Button } from '$lib/index.js';
6
- import Icon from '@iconify/svelte';
7
-
8
- // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
9
- const { Story } = defineMeta({
10
- component: CalendarNavigation,
11
- tags: ['autodocs'],
12
- argTypes: storyCalendarNavigationArgTypes,
13
- });
14
- </script>
15
-
16
- <Story name="customCalendarNavigationContent" asChild>
17
- <CalendarNavigation>
18
- {#snippet customCalendarNavigationPrevContent()}
19
- <Icon icon="carbon:previous-filled" width="32" height="32" />
20
- {/snippet}
21
- {#snippet customCalendarNavigationNextContent()}
22
- <Icon icon="carbon:next-outline" width="32" height="32" />
23
- {/snippet}
24
- </CalendarNavigation>
25
- </Story>
26
-
27
- <Story name="customCalendarNavigation" asChild>
28
- <CalendarNavigation>
29
- {#snippet customCalendarNavigation()}
30
- <Button>Control</Button>
31
- {/snippet}
32
- </CalendarNavigation>
33
- </Story>
@@ -1,37 +0,0 @@
1
- <script module lang="ts">
2
- import { defineMeta } from '@storybook/addon-svelte-csf';
3
- import CalendarNavigation from '../CalendarNavigation.svelte';
4
- import { storyCalendarNavigationArgTypes } from '../CalendarNavigation.stories.svelte';
5
- import type { ButtonClickEvent } from '$lib/index.js';
6
-
7
- // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
8
- const { Story } = defineMeta({
9
- component: CalendarNavigation,
10
- tags: ['autodocs'],
11
- argTypes: storyCalendarNavigationArgTypes,
12
- });
13
- </script>
14
-
15
- <Story
16
- name="CalendarNavigationNextClick"
17
- args={{
18
- onCalendarNavigationNextClick: (e: ButtonClickEvent) => {
19
- const target = e.target as HTMLButtonElement;
20
-
21
- alert('Button Clicked');
22
- console.log('Button Clicked', target);
23
- },
24
- }}
25
- />
26
-
27
- <Story
28
- name="CalendarNavigationPrevClick"
29
- args={{
30
- onCalendarNavigationPrevClick: (e: ButtonClickEvent) => {
31
- const target = e.target as HTMLButtonElement;
32
-
33
- alert('Button Clicked');
34
- console.log('Button Clicked', target);
35
- },
36
- }}
37
- />
@@ -1,16 +0,0 @@
1
- <script module>
2
- import { defineMeta } from '@storybook/addon-svelte-csf';
3
- import CalendarNavigation from '../CalendarNavigation.svelte';
4
- import { storyCalendarNavigationArgTypes } from '../CalendarNavigation.stories.svelte';
5
-
6
- // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
7
- const { Story } = defineMeta({
8
- component: CalendarNavigation,
9
- tags: ['autodocs'],
10
- argTypes: storyCalendarNavigationArgTypes,
11
- });
12
- </script>
13
-
14
- <Story name="Normal" />
15
- <Story name="Small" args={{ size: 'small' }} />
16
- <Story name="Large" args={{ size: 'large' }} />
@@ -1,58 +0,0 @@
1
- <script module lang="ts">
2
- import { defineMeta } from '@storybook/addon-svelte-csf';
3
- import CalendarYearSelector from './CalendarYearSelector.svelte';
4
- import type { StoryBookArgTypes } from '$lib/storybook-types.js';
5
- import getMoment from '$lib/stories/developer tools/helpers/Time/getMoment/getMoment.js';
6
- import { componentColorArray } from '$lib/types/colors.js';
7
- import { componentSizeArray } from '$lib/types/size.js';
8
- import { componentRoundnessArray } from '$lib/types/roundness.js';
9
-
10
- export const storyCalendarYearSelectorArgTypes: StoryBookArgTypes = {
11
- color: {
12
- control: { type: 'select' },
13
- options: componentColorArray,
14
- },
15
- size: {
16
- control: { type: 'select' },
17
- options: componentSizeArray,
18
- },
19
- roundness: {
20
- control: { type: 'select' },
21
- options: componentRoundnessArray,
22
- },
23
- };
24
-
25
- // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
26
- const { Story } = defineMeta({
27
- component: CalendarYearSelector,
28
- tags: ['autodocs'],
29
- argTypes: storyCalendarYearSelectorArgTypes,
30
- });
31
-
32
- let value = $state(getMoment().toDate());
33
- </script>
34
-
35
- <!-- Default CalendarYearSelector -->
36
- <Story
37
- name="Default"
38
- args={{
39
- value,
40
- }}
41
- />
42
-
43
- <!-- Override year -->
44
- <Story
45
- name="ActiveMonth"
46
- args={{
47
- value,
48
- activeMonth: getMoment().add(2, 'years').toDate(),
49
- }}
50
- />
51
-
52
- <Story
53
- name="Disabled"
54
- args={{
55
- value,
56
- disabled: true,
57
- }}
58
- />
@@ -1,23 +0,0 @@
1
- <script module>
2
- import { defineMeta } from '@storybook/addon-svelte-csf';
3
- import CalendarYearSelector from '../../CalendarYearSelector/CalendarYearSelector.svelte';
4
- import { storyCalendarYearSelectorArgTypes } from '../../CalendarYearSelector/CalendarYearSelector.stories.svelte';
5
- import getMoment from '$lib/stories/developer tools/helpers/Time/getMoment/getMoment.js';
6
-
7
- // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
8
- const { Story } = defineMeta({
9
- component: CalendarYearSelector,
10
- tags: ['autodocs'],
11
- argTypes: storyCalendarYearSelectorArgTypes,
12
- args: {
13
- value: getMoment().toDate(),
14
- },
15
- });
16
- </script>
17
-
18
- <Story name="Primary" />
19
- <Story name="Secondary" args={{ color: 'secondary' }} />
20
- <Story name="Neutral" args={{ color: 'neutral' }} />
21
- <Story name="Safe" args={{ color: 'safe' }} />
22
- <Story name="Warning" args={{ color: 'warning' }} />
23
- <Story name="Danger" args={{ color: 'danger' }} />
@@ -1,30 +0,0 @@
1
- <script module lang="ts">
2
- import { defineMeta } from '@storybook/addon-svelte-csf';
3
- import CalendarYearSelector from '../CalendarYearSelector.svelte';
4
- import { storyCalendarYearSelectorArgTypes } from '../CalendarYearSelector.stories.svelte';
5
-
6
- // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
7
- const { Story } = defineMeta({
8
- component: CalendarYearSelector,
9
- tags: ['autodocs'],
10
- argTypes: storyCalendarYearSelectorArgTypes,
11
- });
12
- </script>
13
-
14
- <Story name="customCalendarYearSelectorContent" asChild>
15
- <CalendarYearSelector>
16
- {#snippet customCalendarYearSelectorContent(selectedYear)}
17
- 🗓️{selectedYear}
18
- {/snippet}
19
- </CalendarYearSelector>
20
- </Story>
21
-
22
- <Story name="customCalendarYearSelector" asChild>
23
- <CalendarYearSelector>
24
- {#snippet customCalendarYearSelector(selectedYear)}
25
- <span style="color: blue; display: block;">
26
- {selectedYear}
27
- </span>
28
- {/snippet}
29
- </CalendarYearSelector>
30
- </Story>
@@ -1,25 +0,0 @@
1
- <script module lang="ts">
2
- import { defineMeta } from '@storybook/addon-svelte-csf';
3
- import CalendarYearSelector from '../CalendarYearSelector.svelte';
4
- import { storyCalendarYearSelectorArgTypes } from '../CalendarYearSelector.stories.svelte';
5
- import type { ButtonClickEvent } from '$lib/index.js';
6
-
7
- // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
8
- const { Story } = defineMeta({
9
- component: CalendarYearSelector,
10
- tags: ['autodocs'],
11
- argTypes: storyCalendarYearSelectorArgTypes,
12
- });
13
- </script>
14
-
15
- <Story
16
- name="Click"
17
- args={{
18
- onclick: (selectedYear: string, e: ButtonClickEvent) => {
19
- const target = e.target as HTMLButtonElement;
20
-
21
- alert('Button Clicked');
22
- console.log('Button Clicked', selectedYear, target);
23
- },
24
- }}
25
- />
@@ -1,26 +0,0 @@
1
- <script module>
2
- import { defineMeta } from '@storybook/addon-svelte-csf';
3
- import CalendarYearSelector from '../CalendarYearSelector.svelte';
4
- import { storyCalendarYearSelectorArgTypes } from '../CalendarYearSelector.stories.svelte';
5
- import getMoment from '$lib/stories/developer tools/helpers/Time/getMoment/getMoment.js';
6
-
7
- // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
8
- const { Story } = defineMeta({
9
- component: CalendarYearSelector,
10
- tags: ['autodocs'],
11
- argTypes: storyCalendarYearSelectorArgTypes,
12
- args: {
13
- value: getMoment().toDate(),
14
- },
15
- });
16
- </script>
17
-
18
- <Story name="Roundness Default" />
19
-
20
- <Story name="Roundness 1" args={{ roundness: 1 }} />
21
-
22
- <Story name="Roundness 2" args={{ roundness: 2 }} />
23
-
24
- <Story name="Roundness 3" args={{ roundness: 3 }} />
25
-
26
- <Story name="Roundness 0" args={{ roundness: 0 }} />
@@ -1,20 +0,0 @@
1
- <script module>
2
- import { defineMeta } from '@storybook/addon-svelte-csf';
3
- import CalendarYearSelector from '../CalendarYearSelector.svelte';
4
- import { storyCalendarYearSelectorArgTypes } from '../CalendarYearSelector.stories.svelte';
5
- import getMoment from '$lib/stories/developer tools/helpers/Time/getMoment/getMoment.js';
6
-
7
- // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
8
- const { Story } = defineMeta({
9
- component: CalendarYearSelector,
10
- tags: ['autodocs'],
11
- argTypes: storyCalendarYearSelectorArgTypes,
12
- args: {
13
- value: getMoment().toDate(),
14
- },
15
- });
16
- </script>
17
-
18
- <Story name="Normal" />
19
- <Story name="Small" args={{ size: 'small' }} />
20
- <Story name="Large" args={{ size: 'large' }} />
@@ -1,23 +0,0 @@
1
- <script module>
2
- import { defineMeta } from '@storybook/addon-svelte-csf';
3
- import CalendarControls from '../../CalendarControls/CalendarControls.svelte';
4
- import { storyCalendarControlsArgTypes } from '../../CalendarControls/CalendarControls.stories.svelte';
5
- import getMoment from '$lib/stories/developer tools/helpers/Time/getMoment/getMoment.js';
6
-
7
- // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
8
- const { Story } = defineMeta({
9
- component: CalendarControls,
10
- tags: ['autodocs'],
11
- argTypes: storyCalendarControlsArgTypes,
12
- args: {
13
- value: getMoment().toDate(),
14
- },
15
- });
16
- </script>
17
-
18
- <Story name="Primary" />
19
- <Story name="Secondary" args={{ color: 'secondary' }} />
20
- <Story name="Neutral" args={{ color: 'neutral' }} />
21
- <Story name="Safe" args={{ color: 'safe' }} />
22
- <Story name="Warning" args={{ color: 'warning' }} />
23
- <Story name="Danger" args={{ color: 'danger' }} />
@@ -1,21 +0,0 @@
1
- <script module>
2
- import { defineMeta } from '@storybook/addon-svelte-csf';
3
- import CalendarControls from '../CalendarControls.svelte';
4
- import { storyCalendarControlsArgTypes } from '../CalendarControls.stories.svelte';
5
- import getMoment from '$lib/stories/developer tools/helpers/Time/getMoment/getMoment.js';
6
-
7
- // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
8
- const { Story } = defineMeta({
9
- component: CalendarControls,
10
- tags: ['autodocs'],
11
- argTypes: storyCalendarControlsArgTypes,
12
- args: {
13
- value: getMoment().toDate(),
14
- },
15
- });
16
- </script>
17
-
18
- <Story name="Normal" />
19
- <Story name="HideCalendarMonthSelector" args={{ showCalendarMonthSelector: false }} />
20
- <Story name="HideCalendarYearSelector" args={{ showCalendarYearSelector: false }} />
21
- <Story name="HideCalendarNavigator" args={{ showCalendarNavigator: false }} />
@@ -1,69 +0,0 @@
1
- <script module lang="ts">
2
- import { defineMeta } from '@storybook/addon-svelte-csf';
3
- import CalendarControls from '../CalendarControls.svelte';
4
- import { storyCalendarControlsArgTypes } from '../CalendarControls.stories.svelte';
5
- import { Button } from '$lib/index.js';
6
- import Icon from '@iconify/svelte';
7
-
8
- // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
9
- const { Story } = defineMeta({
10
- component: CalendarControls,
11
- tags: ['autodocs'],
12
- argTypes: storyCalendarControlsArgTypes,
13
- });
14
- </script>
15
-
16
- <Story name="customCalendarMonthSelectorContent" asChild>
17
- <CalendarControls>
18
- {#snippet customCalendarMonthSelectorContent(option)}
19
- 🗓️{option.abr3}
20
- {/snippet}
21
- </CalendarControls>
22
- </Story>
23
-
24
- <Story name="customCalendarMonthSelector" asChild>
25
- <CalendarControls>
26
- {#snippet customCalendarMonthSelector(option)}
27
- <span style="color: blue; display: block;">
28
- {option.abr3}
29
- </span>
30
- {/snippet}
31
- </CalendarControls>
32
- </Story>
33
-
34
- <Story name="customCalendarYearSelectorContent" asChild>
35
- <CalendarControls>
36
- {#snippet customCalendarYearSelectorContent(selectedYear)}
37
- 🗓️{selectedYear}
38
- {/snippet}
39
- </CalendarControls>
40
- </Story>
41
-
42
- <Story name="customCalendarYearSelector" asChild>
43
- <CalendarControls>
44
- {#snippet customCalendarYearSelector(selectedYear)}
45
- <span style="color: blue; display: block;">
46
- {selectedYear}
47
- </span>
48
- {/snippet}
49
- </CalendarControls>
50
- </Story>
51
-
52
- <Story name="customCalendarNavigationContent" asChild>
53
- <CalendarControls>
54
- {#snippet customCalendarNavigationPrevContent()}
55
- <Icon icon="carbon:previous-filled" width="32" height="32" />
56
- {/snippet}
57
- {#snippet customCalendarNavigationNextContent()}
58
- <Icon icon="carbon:next-outline" width="32" height="32" />
59
- {/snippet}
60
- </CalendarControls>
61
- </Story>
62
-
63
- <Story name="customCalendarNavigation" asChild>
64
- <CalendarControls>
65
- {#snippet customCalendarNavigation()}
66
- <Button>Control</Button>
67
- {/snippet}
68
- </CalendarControls>
69
- </Story>
@@ -1,61 +0,0 @@
1
- <script module lang="ts">
2
- import { defineMeta } from '@storybook/addon-svelte-csf';
3
- import CalendarControls from '../CalendarControls.svelte';
4
- import { storyCalendarControlsArgTypes } from '../CalendarControls.stories.svelte';
5
- import type { ButtonClickEvent, CalendarMonthOption } from '$lib/index.js';
6
-
7
- // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
8
- const { Story } = defineMeta({
9
- component: CalendarControls,
10
- tags: ['autodocs'],
11
- argTypes: storyCalendarControlsArgTypes,
12
- });
13
- </script>
14
-
15
- <Story
16
- name="MonthSelectorClick"
17
- args={{
18
- onMonthSelectorClick: (option: CalendarMonthOption, e: ButtonClickEvent) => {
19
- const target = e.target as HTMLButtonElement;
20
-
21
- alert('Button Clicked');
22
- console.log('Button Clicked', option, target);
23
- },
24
- }}
25
- />
26
-
27
- <Story
28
- name="YearSelectorClick"
29
- args={{
30
- onYearSelectorClick: (selectedYear: string, e: ButtonClickEvent) => {
31
- const target = e.target as HTMLButtonElement;
32
-
33
- alert('Button Clicked');
34
- console.log('Button Clicked', selectedYear, target);
35
- },
36
- }}
37
- />
38
-
39
- <Story
40
- name="CalendarNavigationNextClick"
41
- args={{
42
- onCalendarNavigationNextClick: (e: ButtonClickEvent) => {
43
- const target = e.target as HTMLButtonElement;
44
-
45
- alert('Button Clicked');
46
- console.log('Button Clicked', target);
47
- },
48
- }}
49
- />
50
-
51
- <Story
52
- name="CalendarNavigationPrevClick"
53
- args={{
54
- onCalendarNavigationPrevClick: (e: ButtonClickEvent) => {
55
- const target = e.target as HTMLButtonElement;
56
-
57
- alert('Button Clicked');
58
- console.log('Button Clicked', target);
59
- },
60
- }}
61
- />
@@ -1,20 +0,0 @@
1
- <script module>
2
- import { defineMeta } from '@storybook/addon-svelte-csf';
3
- import CalendarControls from '../CalendarControls.svelte';
4
- import { storyCalendarControlsArgTypes } from '../CalendarControls.stories.svelte';
5
- import getMoment from '$lib/stories/developer tools/helpers/Time/getMoment/getMoment.js';
6
-
7
- // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
8
- const { Story } = defineMeta({
9
- component: CalendarControls,
10
- tags: ['autodocs'],
11
- argTypes: storyCalendarControlsArgTypes,
12
- args: {
13
- value: getMoment().toDate(),
14
- },
15
- });
16
- </script>
17
-
18
- <Story name="Normal" />
19
- <Story name="Small" args={{ size: 'small' }} />
20
- <Story name="Large" args={{ size: 'large' }} />
@@ -1,75 +0,0 @@
1
- <script module lang="ts">
2
- import { defineMeta } from '@storybook/addon-svelte-csf';
3
- import CalendarDateChip from './CalendarDateChip.svelte';
4
- import type { StoryBookArgTypes } from '$lib/storybook-types.js';
5
- import getMoment from '$lib/stories/developer tools/helpers/Time/getMoment/getMoment.js';
6
- import { componentRoundnessArray } from '$lib/types/roundness.js';
7
- import { componentColorArray } from '$lib/types/colors.js';
8
- import { componentSizeArray } from '$lib/types/size.js';
9
-
10
- export const storyCalendarDateChipArgTypes: StoryBookArgTypes = {
11
- color: {
12
- control: { type: 'select' },
13
- options: componentColorArray,
14
- },
15
- roundness: {
16
- control: { type: 'select' },
17
- options: componentRoundnessArray,
18
- },
19
- size: {
20
- control: { type: 'select' },
21
- options: componentSizeArray,
22
- },
23
- };
24
-
25
- // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
26
- const { Story } = defineMeta({
27
- component: CalendarDateChip,
28
- tags: ['autodocs'],
29
- argTypes: storyCalendarDateChipArgTypes,
30
- args: {
31
- dayOfMonth: {
32
- id: '1',
33
- date: getMoment().toDate(),
34
- isCurrentMonth: true,
35
- },
36
- },
37
- });
38
- </script>
39
-
40
- <!-- Default CalendarDateChip -->
41
- <Story name="Default" />
42
-
43
- <Story name="Selected" args={{ selected: true }} />
44
-
45
- <Story
46
- name="Disabled"
47
- args={{
48
- dayOfMonth: {
49
- id: '1',
50
- date: getMoment().toDate(),
51
- isCurrentMonth: true,
52
- disabled: true,
53
- },
54
- }}
55
- />
56
-
57
- <!-- Today marker. Checkout more [Special Chips](?path=/docs/components-info-calendar-calendardateschart-calendardatechip-specialchips--docs) -->
58
- <Story
59
- name="Today"
60
- args={{
61
- dayOfMonth: {
62
- id: '1',
63
- date: getMoment().toDate(),
64
- isCurrentMonth: true,
65
- today: true,
66
- },
67
- }}
68
- />
69
-
70
- <Story
71
- name="Weekend"
72
- args={{
73
- weekend: true,
74
- }}
75
- />
@@ -1,41 +0,0 @@
1
- <script module>
2
- import { defineMeta } from '@storybook/addon-svelte-csf';
3
- import CalendarDateChip from '../CalendarDateChip.svelte';
4
- import { storyCalendarDateChipArgTypes } from '../CalendarDateChip.stories.svelte';
5
- import getMoment from '$lib/stories/developer tools/helpers/Time/getMoment/getMoment.js';
6
-
7
- // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
8
- const { Story } = defineMeta({
9
- component: CalendarDateChip,
10
- tags: ['autodocs'],
11
- argTypes: storyCalendarDateChipArgTypes,
12
- args: {
13
- dayOfMonth: {
14
- id: '1',
15
- date: getMoment().toDate(),
16
- isCurrentMonth: true,
17
- },
18
- },
19
- });
20
- </script>
21
-
22
- <Story name="Primary" />
23
- <Story name="Secondary" args={{ color: 'secondary' }} />
24
- <Story name="Neutral" args={{ color: 'neutral' }} />
25
- <Story name="Safe" args={{ color: 'safe' }} />
26
- <Story name="Warning" args={{ color: 'warning' }} />
27
- <Story name="Danger" args={{ color: 'danger' }} />
28
-
29
- <Story name="Primary Selected" args={{ color: 'primary', selected: true }} />
30
- <Story name="Secondary Selected" args={{ color: 'secondary', selected: true }} />
31
- <Story name="Neutral Selected" args={{ color: 'neutral', selected: true }} />
32
- <Story name="Safe Selected" args={{ color: 'safe', selected: true }} />
33
- <Story name="Warning Selected" args={{ color: 'warning', selected: true }} />
34
- <Story name="Danger Selected" args={{ color: 'danger', selected: true }} />
35
-
36
- <Story name="Primary Today" args={{ color: 'primary', today: true }} />
37
- <Story name="Secondary Today" args={{ color: 'secondary', today: true }} />
38
- <Story name="Neutral Today" args={{ color: 'neutral', today: true }} />
39
- <Story name="Safe Today" args={{ color: 'safe', today: true }} />
40
- <Story name="Warning Today" args={{ color: 'warning', today: true }} />
41
- <Story name="Danger Today" args={{ color: 'danger', today: true }} />
@@ -1,45 +0,0 @@
1
- <script module lang="ts">
2
- import { defineMeta } from '@storybook/addon-svelte-csf';
3
- import CalendarDateChip from '../CalendarDateChip.svelte';
4
- import { storyCalendarDateChipArgTypes } from '../CalendarDateChip.stories.svelte';
5
- import { Button, getMoment } from '$lib/index.js';
6
-
7
- // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
8
- const { Story } = defineMeta({
9
- component: CalendarDateChip,
10
- tags: ['autodocs'],
11
- argTypes: storyCalendarDateChipArgTypes,
12
- });
13
- </script>
14
-
15
- <!-- Custom Content -->
16
- <Story name="customCalendarDateChipContent" asChild>
17
- <CalendarDateChip
18
- dayOfMonth={{
19
- id: '1',
20
- date: getMoment().toDate(),
21
- isCurrentMonth: true,
22
- }}
23
- >
24
- {#snippet customCalendarDateChipContent(dayOfMonth)}
25
- 🗓️{Number(getMoment(dayOfMonth.date).format('D'))}
26
- {/snippet}
27
- </CalendarDateChip>
28
- </Story>
29
-
30
- <!-- Custom Chip -->
31
- <Story name="customCalendarDateChip" asChild>
32
- <CalendarDateChip
33
- dayOfMonth={{
34
- id: '1',
35
- date: getMoment().toDate(),
36
- isCurrentMonth: true,
37
- }}
38
- >
39
- {#snippet customCalendarDateChip(dayOfMonth)}
40
- <Button size="small" variant="text" outline>
41
- {Number(getMoment(dayOfMonth.date).format('D'))}
42
- </Button>
43
- {/snippet}
44
- </CalendarDateChip>
45
- </Story>
@@ -1,28 +0,0 @@
1
- <script module lang="ts">
2
- import { defineMeta } from '@storybook/addon-svelte-csf';
3
- import CalendarDateChip from '../CalendarDateChip.svelte';
4
- import { storyCalendarDateChipArgTypes } from '../CalendarDateChip.stories.svelte';
5
- import getMoment from '$lib/stories/developer tools/helpers/Time/getMoment/getMoment.js';
6
-
7
- // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
8
- const { Story } = defineMeta({
9
- component: CalendarDateChip,
10
- tags: ['autodocs'],
11
- argTypes: storyCalendarDateChipArgTypes,
12
- });
13
- </script>
14
-
15
- <Story name="Select" asChild>
16
- <CalendarDateChip
17
- dayOfMonth={{
18
- id: '1',
19
- date: getMoment().toDate(),
20
- isCurrentMonth: true,
21
- }}
22
- onselect={(value, dayOfMonth, e) => {
23
- const target = e.target as HTMLButtonElement;
24
- alert(`CalendarDateChip Select, ${getMoment(value).format('DD-MM-YYYY')}`);
25
- console.log('CalendarDateChip Select', dayOfMonth, target);
26
- }}
27
- />
28
- </Story>