@velumweb/ui-kit 1.0.0 → 1.0.2

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 (217) hide show
  1. package/changelog.md +11 -0
  2. package/{docs → dist/components}/Button/Button.d.ts +32 -32
  3. package/dist/{Button → components/Button}/Button.stories.d.ts +15 -15
  4. package/dist/{Button → components/Button}/index.d.ts +1 -1
  5. package/dist/{Container → components/Container}/Box.d.ts +33 -33
  6. package/{docs → dist/components}/Container/index.d.ts +1 -1
  7. package/dist/{Input → components/Input}/Input.d.ts +38 -38
  8. package/{docs → dist/components}/Input/Input.stories.d.ts +14 -14
  9. package/{docs → dist/components}/Input/index.d.ts +1 -1
  10. package/{docs → dist/components}/Modal/Modal.d.ts +29 -29
  11. package/{docs → dist/components}/Modal/Modal.stories.d.ts +13 -13
  12. package/{docs → dist/components}/Modal/index.d.ts +1 -1
  13. package/dist/{Toggle → components/Toggle}/Toggle.d.ts +18 -18
  14. package/dist/{Toggle → components/Toggle}/Toggle.stories.d.ts +13 -13
  15. package/dist/{Toggle → components/Toggle}/index.d.ts +1 -1
  16. package/{docs → dist/components}/index.d.ts +6 -5
  17. package/dist/index.d.ts +2 -5
  18. package/dist/index.es.js +583 -569
  19. package/dist/index.es2.js +1 -0
  20. package/dist/theme.d.ts +2 -0
  21. package/dist/ui-kit.css +1 -1
  22. package/package.json +17 -3
  23. package/readme.md +19 -2
  24. package/.storybook/main.ts +0 -14
  25. package/.storybook/manager.ts +0 -32
  26. package/.storybook/preview.ts +0 -14
  27. package/dist/Button/Button.d.ts +0 -32
  28. package/dist/Container/index.d.ts +0 -1
  29. package/dist/Input/Input.stories.d.ts +0 -14
  30. package/dist/Input/index.d.ts +0 -1
  31. package/dist/Modal/Modal.d.ts +0 -29
  32. package/dist/Modal/Modal.stories.d.ts +0 -13
  33. package/dist/Modal/index.d.ts +0 -1
  34. package/dist/index.es.d.ts +0 -2
  35. package/dist/index.umd.js +0 -6
  36. package/docs/Button/Button.stories.d.ts +0 -15
  37. package/docs/Button/index.d.ts +0 -1
  38. package/docs/CNAME +0 -1
  39. package/docs/Container/Box.d.ts +0 -33
  40. package/docs/Input/Input.d.ts +0 -38
  41. package/docs/Toggle/Toggle.d.ts +0 -18
  42. package/docs/Toggle/Toggle.stories.d.ts +0 -13
  43. package/docs/Toggle/index.d.ts +0 -1
  44. package/docs/assets/Button-CfaZpHIg.css +0 -1
  45. package/docs/assets/Button-DBH2W8EG.js +0 -1
  46. package/docs/assets/Button.stories-uPwy2cWr.js +0 -34
  47. package/docs/assets/Input-D117xj27.js +0 -1
  48. package/docs/assets/Input-RjFZkyU_.css +0 -1
  49. package/docs/assets/Input.stories-Ck4AyV-4.js +0 -21
  50. package/docs/assets/Modal-CWKTs3Ep.css +0 -1
  51. package/docs/assets/Modal.stories-3HMpRqSx.js +0 -7
  52. package/docs/assets/Toggle-BmcBtVup.css +0 -1
  53. package/docs/assets/Toggle-DiHagfS3.js +0 -1
  54. package/docs/assets/Toggle.stories-d01loxLD.js +0 -9
  55. package/docs/assets/iframe-D7bwIom8.js +0 -1062
  56. package/docs/assets/jsx-runtime-u17CrQMm.js +0 -1
  57. package/docs/assets/preload-helper-PPVm8Dsz.js +0 -1
  58. package/docs/assets/react-18-CW3OMC0n.js +0 -9
  59. package/docs/assets/svg-lib/3-dots-horizontal-svgrepo-com.svg +0 -5
  60. package/docs/assets/svg-lib/about-empty-page-svgrepo-com.svg +0 -5
  61. package/docs/assets/svg-lib/alert-square.svg +0 -26
  62. package/docs/assets/svg-lib/arrow-bottom-svgrepo-com.svg +0 -9
  63. package/docs/assets/svg-lib/arrow-left-svgrepo-com.svg +0 -5
  64. package/docs/assets/svg-lib/arrow-right-svgrepo-com.svg +0 -5
  65. package/docs/assets/svg-lib/arrow-top-svgrepo-com.svg +0 -9
  66. package/docs/assets/svg-lib/checkmark-svgrepo-com.svg +0 -5
  67. package/docs/assets/svg-lib/clock-svgrepo-com.svg +0 -5
  68. package/docs/assets/svg-lib/cross-svgrepo-com.svg +0 -12
  69. package/docs/assets/svg-lib/download-svgrepo-com.svg +0 -5
  70. package/docs/assets/svg-lib/edit-pen-svgrepo-com.svg +0 -5
  71. package/docs/assets/svg-lib/favorite-svgrepo-com.svg +0 -5
  72. package/docs/assets/svg-lib/forbiden-svgrepo-com.svg +0 -9
  73. package/docs/assets/svg-lib/input-svgrepo-com.svg +0 -5
  74. package/docs/assets/svg-lib/link-svgrepo-com.svg +0 -5
  75. package/docs/assets/svg-lib/messages-alert-svgrepo-com.svg +0 -6
  76. package/docs/assets/svg-lib/messages-svgrepo-com.svg +0 -5
  77. package/docs/assets/svg-lib/mic-off-svgrepo-com.svg +0 -6
  78. package/docs/assets/svg-lib/mic-svgrepo-com.svg +0 -5
  79. package/docs/assets/svg-lib/music-svgrepo-com.svg +0 -6
  80. package/docs/assets/svg-lib/next-long-arrow-right-svgrepo-com.svg +0 -5
  81. package/docs/assets/svg-lib/notification-alert-svgrepo-com.svg +0 -6
  82. package/docs/assets/svg-lib/notification-svgrepo-com.svg +0 -5
  83. package/docs/assets/svg-lib/notifications-off-svgrepo-com.svg +0 -6
  84. package/docs/assets/svg-lib/party-simple-colored-svgrepo-com.svg +0 -11
  85. package/docs/assets/svg-lib/pattern-circles-svgrepo-com.svg +0 -5
  86. package/docs/assets/svg-lib/play-button-simple-svgrepo-com.svg +0 -5
  87. package/docs/assets/svg-lib/plus-outlined-svgrepo-com.svg +0 -5
  88. package/docs/assets/svg-lib/previous-long-arrow-left-svgrepo-com.svg +0 -5
  89. package/docs/assets/svg-lib/queue-listing-cards-svgrepo-com.svg +0 -6
  90. package/docs/assets/svg-lib/queue-remove-svgrepo-com.svg +0 -5
  91. package/docs/assets/svg-lib/recent-svgrepo-com.svg +0 -5
  92. package/docs/assets/svg-lib/remove-svgrepo-com.svg +0 -5
  93. package/docs/assets/svg-lib/repeat-svgrepo-com.svg +0 -5
  94. package/docs/assets/svg-lib/schedule-add-svgrepo-com.svg +0 -5
  95. package/docs/assets/svg-lib/schedule-alert-svgrepo-com.svg +0 -6
  96. package/docs/assets/svg-lib/schedule-remove-svgrepo-com.svg +0 -6
  97. package/docs/assets/svg-lib/schedule-svgrepo-com.svg +0 -5
  98. package/docs/assets/svg-lib/search-svgrepo-com.svg +0 -5
  99. package/docs/assets/svg-lib/session-abandon-svgrepo-com.svg +0 -5
  100. package/docs/assets/svg-lib/session-join-svgrepo-com.svg +0 -5
  101. package/docs/assets/svg-lib/session-leave-svgrepo-com.svg +0 -5
  102. package/docs/assets/svg-lib/settings-svgrepo-com.svg +0 -5
  103. package/docs/assets/svg-lib/share-svgrepo-com.svg +0 -5
  104. package/docs/assets/svg-lib/sound-off-svgrepo-com.svg +0 -6
  105. package/docs/assets/svg-lib/sound-svgrepo-com.svg +0 -5
  106. package/docs/assets/svg-lib/spectacles-svgrepo-com.svg +0 -5
  107. package/docs/assets/svg-lib/star-svgrepo-com.svg +0 -5
  108. package/docs/assets/svg-lib/user-avatar-with-alert-svgrepo-com.svg +0 -6
  109. package/docs/assets/svg-lib/user-banned-svgrepo-com.svg +0 -6
  110. package/docs/assets/svg-lib/user-svgrepo-com.svg +0 -5
  111. package/docs/assets/svglist.png +0 -0
  112. package/docs/favicon-wrapper.svg +0 -46
  113. package/docs/favicon.svg +0 -1
  114. package/docs/iframe.html +0 -686
  115. package/docs/index.html +0 -137
  116. package/docs/index.json +0 -1
  117. package/docs/makeColors.ts +0 -37
  118. package/docs/notes.txt +0 -11
  119. package/docs/nunito-sans-bold-italic.woff2 +0 -0
  120. package/docs/nunito-sans-bold.woff2 +0 -0
  121. package/docs/nunito-sans-italic.woff2 +0 -0
  122. package/docs/nunito-sans-regular.woff2 +0 -0
  123. package/docs/project.json +0 -1
  124. package/docs/sb-addons/storybook-1/manager-bundle.js +0 -3
  125. package/docs/sb-addons/storybook-core-server-presets-0/common-manager-bundle.js +0 -628
  126. package/docs/sb-common-assets/favicon-wrapper.svg +0 -46
  127. package/docs/sb-common-assets/favicon.svg +0 -1
  128. package/docs/sb-common-assets/nunito-sans-bold-italic.woff2 +0 -0
  129. package/docs/sb-common-assets/nunito-sans-bold.woff2 +0 -0
  130. package/docs/sb-common-assets/nunito-sans-italic.woff2 +0 -0
  131. package/docs/sb-common-assets/nunito-sans-regular.woff2 +0 -0
  132. package/docs/sb-manager/globals-runtime.js +0 -75597
  133. package/docs/sb-manager/globals.js +0 -24
  134. package/docs/sb-manager/manager-stores.js +0 -23
  135. package/docs/sb-manager/runtime.js +0 -19698
  136. package/docs/style_setter.js +0 -19
  137. package/docs/vite-inject-mocker-entry.js +0 -2
  138. package/index.html +0 -7
  139. package/public/assets/svg-lib/3-dots-horizontal-svgrepo-com.svg +0 -5
  140. package/public/assets/svg-lib/about-empty-page-svgrepo-com.svg +0 -5
  141. package/public/assets/svg-lib/alert-square.svg +0 -26
  142. package/public/assets/svg-lib/arrow-bottom-svgrepo-com.svg +0 -9
  143. package/public/assets/svg-lib/arrow-left-svgrepo-com.svg +0 -5
  144. package/public/assets/svg-lib/arrow-right-svgrepo-com.svg +0 -5
  145. package/public/assets/svg-lib/arrow-top-svgrepo-com.svg +0 -9
  146. package/public/assets/svg-lib/checkmark-svgrepo-com.svg +0 -5
  147. package/public/assets/svg-lib/clock-svgrepo-com.svg +0 -5
  148. package/public/assets/svg-lib/cross-svgrepo-com.svg +0 -12
  149. package/public/assets/svg-lib/download-svgrepo-com.svg +0 -5
  150. package/public/assets/svg-lib/edit-pen-svgrepo-com.svg +0 -5
  151. package/public/assets/svg-lib/favorite-svgrepo-com.svg +0 -5
  152. package/public/assets/svg-lib/forbiden-svgrepo-com.svg +0 -9
  153. package/public/assets/svg-lib/input-svgrepo-com.svg +0 -5
  154. package/public/assets/svg-lib/link-svgrepo-com.svg +0 -5
  155. package/public/assets/svg-lib/messages-alert-svgrepo-com.svg +0 -6
  156. package/public/assets/svg-lib/messages-svgrepo-com.svg +0 -5
  157. package/public/assets/svg-lib/mic-off-svgrepo-com.svg +0 -6
  158. package/public/assets/svg-lib/mic-svgrepo-com.svg +0 -5
  159. package/public/assets/svg-lib/music-svgrepo-com.svg +0 -6
  160. package/public/assets/svg-lib/next-long-arrow-right-svgrepo-com.svg +0 -5
  161. package/public/assets/svg-lib/notification-alert-svgrepo-com.svg +0 -6
  162. package/public/assets/svg-lib/notification-svgrepo-com.svg +0 -5
  163. package/public/assets/svg-lib/notifications-off-svgrepo-com.svg +0 -6
  164. package/public/assets/svg-lib/party-simple-colored-svgrepo-com.svg +0 -11
  165. package/public/assets/svg-lib/pattern-circles-svgrepo-com.svg +0 -5
  166. package/public/assets/svg-lib/play-button-simple-svgrepo-com.svg +0 -5
  167. package/public/assets/svg-lib/plus-outlined-svgrepo-com.svg +0 -5
  168. package/public/assets/svg-lib/previous-long-arrow-left-svgrepo-com.svg +0 -5
  169. package/public/assets/svg-lib/queue-listing-cards-svgrepo-com.svg +0 -6
  170. package/public/assets/svg-lib/queue-remove-svgrepo-com.svg +0 -5
  171. package/public/assets/svg-lib/recent-svgrepo-com.svg +0 -5
  172. package/public/assets/svg-lib/remove-svgrepo-com.svg +0 -5
  173. package/public/assets/svg-lib/repeat-svgrepo-com.svg +0 -5
  174. package/public/assets/svg-lib/schedule-add-svgrepo-com.svg +0 -5
  175. package/public/assets/svg-lib/schedule-alert-svgrepo-com.svg +0 -6
  176. package/public/assets/svg-lib/schedule-remove-svgrepo-com.svg +0 -6
  177. package/public/assets/svg-lib/schedule-svgrepo-com.svg +0 -5
  178. package/public/assets/svg-lib/search-svgrepo-com.svg +0 -5
  179. package/public/assets/svg-lib/session-abandon-svgrepo-com.svg +0 -5
  180. package/public/assets/svg-lib/session-join-svgrepo-com.svg +0 -5
  181. package/public/assets/svg-lib/session-leave-svgrepo-com.svg +0 -5
  182. package/public/assets/svg-lib/settings-svgrepo-com.svg +0 -5
  183. package/public/assets/svg-lib/share-svgrepo-com.svg +0 -5
  184. package/public/assets/svg-lib/sound-off-svgrepo-com.svg +0 -6
  185. package/public/assets/svg-lib/sound-svgrepo-com.svg +0 -5
  186. package/public/assets/svg-lib/spectacles-svgrepo-com.svg +0 -5
  187. package/public/assets/svg-lib/star-svgrepo-com.svg +0 -5
  188. package/public/assets/svg-lib/user-avatar-with-alert-svgrepo-com.svg +0 -6
  189. package/public/assets/svg-lib/user-banned-svgrepo-com.svg +0 -6
  190. package/public/assets/svg-lib/user-svgrepo-com.svg +0 -5
  191. package/public/assets/svglist.png +0 -0
  192. package/src/components/Button/Button.stories.ts +0 -64
  193. package/src/components/Button/Button.tsx +0 -99
  194. package/src/components/Button/button.scss +0 -147
  195. package/src/components/Button/index.ts +0 -1
  196. package/src/components/Container/Box.tsx +0 -83
  197. package/src/components/Container/box.scss +0 -41
  198. package/src/components/Container/index.ts +0 -1
  199. package/src/components/Input/Input.stories.ts +0 -49
  200. package/src/components/Input/Input.tsx +0 -172
  201. package/src/components/Input/index.ts +0 -1
  202. package/src/components/Input/input.scss +0 -69
  203. package/src/components/Modal/Modal.stories.ts +0 -33
  204. package/src/components/Modal/Modal.tsx +0 -125
  205. package/src/components/Modal/index.ts +0 -1
  206. package/src/components/Modal/modal.scss +0 -54
  207. package/src/components/Toggle/Toggle.stories.ts +0 -35
  208. package/src/components/Toggle/Toggle.tsx +0 -60
  209. package/src/components/Toggle/index.ts +0 -1
  210. package/src/components/Toggle/toggle.scss +0 -97
  211. package/src/components/index.ts +0 -5
  212. package/src/main.scss +0 -46
  213. package/tsconfig.json +0 -15
  214. package/utils/makeColors.ts +0 -37
  215. package/utils/notes.txt +0 -11
  216. package/utils/style_setter.js +0 -19
  217. package/vite.config.ts +0 -32
@@ -0,0 +1 @@
1
+
@@ -0,0 +1,2 @@
1
+ export type ThemeSettings = Partial<Record<string, string>>;
2
+ export declare function applyTheme(settings?: ThemeSettings, target?: HTMLElement): void;
package/dist/ui-kit.css CHANGED
@@ -1 +1 @@
1
- @charset "UTF-8";.kit-box{margin:0;padding:0;display:flex;width:100%;flex-wrap:nowrap}.kit-box--row{flex-direction:row}.kit-box--column{flex-direction:column}.kit-box--align-top{align-items:flex-start}.kit-box--align-center{align-items:center}.kit-box--align-bottom{align-items:flex-end}.kit-box--justify-start{justify-content:flex-start}.kit-box--justify-end{justify-content:flex-end}.kit-box--justify-center{justify-content:center}.kit-box--justify-space{justify-content:space-between}.kit-box--wrap{flex-wrap:wrap}.kit-btn{display:inline-block;cursor:pointer;border:0;font-weight:700;line-height:1;font-family:var(--font-family);transition:background-color .3s ease;padding:8px 16px}.kit-btn>.kit-box{width:fit-content}.kit-btn:active{transform:translateY(.5px);box-shadow:0 0 5px #0000004d inset}.kit-btn.kit-icon{pointer-events:none}.kit-btn.kit-btn--disabled{opacity:.5;pointer-events:none;-webkit-user-select:none;user-select:none}.kit-btn--primary{background-color:var(--primary-btn-color);color:var(--secondary-btn-color)}.kit-btn--primary>div>.kit-btn--svg{background-color:var(--secondary-btn-color)}.kit-btn--primary:hover{background-color:var(--hover-btn-color)}.kit-btn--secondary{border:1px var(--primary-btn-color) solid;background-color:transparent;color:var(--primary-btn-color)}.kit-btn--secondary>div>.kit-btn--svg{background-color:var(--primary-btn-color)}.kit-btn--secondary:hover{background-color:var(--hover-btn-color);color:var(--secondary-btn-color);border:1px var(--hover-btn-color) solid}.kit-btn--secondary:hover>div>.kit-btn--svg{background-color:var(--secondary-btn-color)}.kit-btn--transparent{border:none;background-color:transparent;color:var(--primary-btn-color)}.kit-btn--transparent>div>.kit-btn--svg{background-color:var(--primary-btn-color)}.kit-btn--transparent:hover{color:var(--hover-btn-color)}.kit-btn--transparent:hover>div>.kit-btn--svg{background-color:var(--hover-btn-color)}.kit-btn--transparent:active{box-shadow:unset}.kit-btn--small{font-size:12px}.kit-btn--small>div>.kit-btn--svg{width:20px;height:20px}.kit-btn--small:not(.kit-btn--icon)>.kit-container--h>.kit-btn--svg{width:16px;height:16px}.kit-btn--small:not(.kit-btn--icon)>.kit-container--v>.kit-btn--svg{width:24px;height:24px}.kit-btn--medium{font-size:14px}.kit-btn--medium>div>.kit-btn--svg{width:24px;height:24px}.kit-btn--medium:not(.kit-btn--icon)>.kit-container--h>.kit-btn--svg{width:20px;height:20px}.kit-btn--medium:not(.kit-btn--icon)>.kit-container--v>.kit-btn--svg{width:28px;height:28px}.kit-btn--large{font-size:16px}.kit-btn--large>div>.kit-btn--svg{width:32px;height:32px}.kit-btn--large:not(.kit-btn--icon)>.kit-container--h>.kit-btn--svg{width:24px;height:24px}.kit-btn--large:not(.kit-btn--icon)>.kit-container--v>.kit-btn--svg{width:32px;height:32px}.kit-btn--standard{border-radius:var(--corners-standard)}.kit-btn--round{border-radius:var(--corners-round)}.kit-btn--square{border-radius:var(--corners-square)}.kit-btn--icon{padding:8px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.kit-btn--svg{background-repeat:no-repeat;background-position:center;background-size:contain;mask-size:contain;mask-repeat:no-repeat;-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat}.kit-modal--overlay{position:fixed;inset:0;width:100%;height:100%;background:#000c;z-index:9999;display:flex;align-items:center;justify-content:center;animation:fadeInOverlay .2s ease-out}.kit-modal{background-color:var(--bg-color);position:relative;max-width:420px;width:100%;min-height:200px;box-shadow:0 10px 30px #00000026;animation:fadeInModal .2s ease-out}.kit-modal>div{width:auto}.kit-modal-close{margin:-4px -16px 0 0}.kit-modal--standard{border-radius:var(--corners-standard)}.kit-modal--round{border-radius:var(--corners-round)}.kit-modal--square{border-radius:var(--corners-square)}@keyframes fadeInOverlay{0%{opacity:0}to{opacity:1}}@keyframes fadeInModal{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.kit-input--container{display:flex;line-height:30px;align-items:center;position:relative}.kit-input{width:100%;height:36px;line-height:30px;padding:0 .6rem;border:1px solid var(--primary-btn-color);outline:none;background-color:#efefef;color:var(--text-color);transition:.3s ease}.kit-input.kit-input--disabled{opacity:.5;pointer-events:none;-webkit-user-select:none;user-select:none}.kit-input--error{border:1px solid var(--error-color)}.kit-input--standard{border-radius:var(--corners-standard)}.kit-input--round{border-radius:var(--corners-round)}.kit-input--square{border-radius:var(--corners-square)}.kit-input-secondary-text{font-size:12px;line-height:24px;margin-left:.8rem}.kit-input::placeholder,.kit-input-bottomtext{color:var(--text-color-secondary)}.kit-input-errortext{color:var(--error-color)}.kit-input--label{color:var(--text-color)}.kit-input:focus,.kit-input:hover{outline:none}.kit-input--icon-container{position:absolute;right:.4rem;fill:none;display:flex}.kit-input--icon{padding:4px}:root{--font-family: "Nunito Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;--text-color: #2e3242;--text-color-secondary: #94a3b8;--error-color: #ef4949;--bg-color: #fff;--primary-btn-color: #7C3AED;--secondary-btn-color: #FFFFFF;--hover-btn-color: #6D28D9;--corners-standard: .65em;--corners-round: 3em;--corners-square: 0}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box;font-family:var(--font-family)}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}.kit-toggle{display:inline-flex;align-items:center;gap:12px;cursor:pointer;-webkit-user-select:none;user-select:none;font-family:system-ui,sans-serif}.kit-toggle--input{position:absolute;opacity:0;pointer-events:none}.kit-toggle--slider{position:relative;border-radius:999px;transition:background .25s ease;background:#d1d5db}.kit-toggle--slider:before{content:"";position:absolute;top:3px;left:3px;border-radius:50%;transition:transform .25s ease,box-shadow .25s ease;box-shadow:0 2px 6px #00000026;background:#fff}.kit-toggle--input:checked+.kit-toggle--slider{background:var(--primary-btn-color)}.kit-toggle--input:checked+.kit-toggle--slider:before{transform:translate(20px)}.kit-toggle--input:focus-visible+.kit-toggle--slider{outline:2px solid var(--primary-btn-color);outline-offset:2px}.kit-toggle--disabled{opacity:.5;pointer-events:none;-webkit-user-select:none;user-select:none}.kit-toggle--disabled .kit-toggle--slider{background:#9ca3af}.kit-toggle--label{color:var(--text-color)}.kit-toggle--small>.kit-toggle--slider{width:38px;height:18px}.kit-toggle--small>.kit-toggle--slider:before{width:12px;height:12px}.kit-toggle--small>.kit-toggle--label{font-size:14px}.kit-toggle--medium>.kit-toggle--slider{width:42px;height:22px}.kit-toggle--medium>.kit-toggle--slider:before{width:16px;height:16px}.kit-toggle--medium>.kit-toggle--label{font-size:16px}.kit-toggle--large>.kit-toggle--slider{width:46px;height:26px}.kit-toggle--large>.kit-toggle--slider:before{width:20px;height:20px}.kit-toggle--large>.kit-toggle--label{font-size:18px}
1
+ @charset "UTF-8";.kit-box{margin:0;padding:0;display:flex;width:100%;flex-wrap:nowrap}.kit-box--row{flex-direction:row}.kit-box--column{flex-direction:column}.kit-box--align-top{align-items:flex-start}.kit-box--align-center{align-items:center}.kit-box--align-bottom{align-items:flex-end}.kit-box--justify-start{justify-content:flex-start}.kit-box--justify-end{justify-content:flex-end}.kit-box--justify-center{justify-content:center}.kit-box--justify-space{justify-content:space-between}.kit-box--wrap{flex-wrap:wrap}.kit-btn{display:inline-block;cursor:pointer;border:0;font-weight:700;line-height:1;font-family:var(--font-family);transition:background-color .3s ease;padding:8px 16px}.kit-btn>.kit-box{width:fit-content}.kit-btn:active{transform:translateY(.5px);box-shadow:0 0 5px #0000004d inset}.kit-btn.kit-icon{pointer-events:none}.kit-btn.kit-btn--disabled{opacity:.5;pointer-events:none;-webkit-user-select:none;user-select:none}.kit-btn--primary{background-color:var(--primary-btn-color);color:var(--secondary-btn-color)}.kit-btn--primary>div>.kit-btn--svg{background-color:var(--secondary-btn-color)}.kit-btn--primary:hover{background-color:var(--hover-btn-color)}.kit-btn--secondary{border:1px var(--primary-btn-color) solid;background-color:transparent;color:var(--primary-btn-color)}.kit-btn--secondary>div>.kit-btn--svg{background-color:var(--primary-btn-color)}.kit-btn--secondary:hover{background-color:var(--hover-btn-color);color:var(--secondary-btn-color);border:1px var(--hover-btn-color) solid}.kit-btn--secondary:hover>div>.kit-btn--svg{background-color:var(--secondary-btn-color)}.kit-btn--transparent{border:none;background-color:transparent;color:var(--primary-btn-color)}.kit-btn--transparent>div>.kit-btn--svg{background-color:var(--primary-btn-color)}.kit-btn--transparent:hover{color:var(--hover-btn-color)}.kit-btn--transparent:hover>div>.kit-btn--svg{background-color:var(--hover-btn-color)}.kit-btn--transparent:active{box-shadow:unset}.kit-btn--small{font-size:12px}.kit-btn--small>div>.kit-btn--svg{width:20px;height:20px}.kit-btn--small:not(.kit-btn--icon)>.kit-container--h>.kit-btn--svg{width:16px;height:16px}.kit-btn--small:not(.kit-btn--icon)>.kit-container--v>.kit-btn--svg{width:24px;height:24px}.kit-btn--medium{font-size:14px}.kit-btn--medium>div>.kit-btn--svg{width:24px;height:24px}.kit-btn--medium:not(.kit-btn--icon)>.kit-container--h>.kit-btn--svg{width:20px;height:20px}.kit-btn--medium:not(.kit-btn--icon)>.kit-container--v>.kit-btn--svg{width:28px;height:28px}.kit-btn--large{font-size:16px}.kit-btn--large>div>.kit-btn--svg{width:32px;height:32px}.kit-btn--large:not(.kit-btn--icon)>.kit-container--h>.kit-btn--svg{width:24px;height:24px}.kit-btn--large:not(.kit-btn--icon)>.kit-container--v>.kit-btn--svg{width:32px;height:32px}.kit-btn--standard{border-radius:var(--corners-standard)}.kit-btn--round{border-radius:var(--corners-round)}.kit-btn--square{border-radius:var(--corners-square)}.kit-btn--icon{padding:8px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.kit-btn--svg{background-repeat:no-repeat;background-position:center;background-size:contain;mask-size:contain;mask-repeat:no-repeat;-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat}.kit-modal--overlay{position:fixed;inset:0;width:100%;height:100%;background:#000c;z-index:9999;display:flex;align-items:center;justify-content:center;animation:fadeInOverlay .2s ease-out}.kit-modal{background-color:var(--bg-color);position:relative;max-width:420px;width:100%;min-height:200px;box-shadow:0 10px 30px #00000026;animation:fadeInModal .2s ease-out}.kit-modal>div{width:auto}.kit-modal-close{margin:-4px -16px 0 0}.kit-modal--standard{border-radius:var(--corners-standard)}.kit-modal--round{border-radius:var(--corners-round)}.kit-modal--square{border-radius:var(--corners-square)}@keyframes fadeInOverlay{0%{opacity:0}to{opacity:1}}@keyframes fadeInModal{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.kit-input--container{display:flex;line-height:30px;align-items:center;position:relative}.kit-input{width:100%;height:36px;line-height:30px;padding:0 .6rem;border:1px solid var(--text-color);outline:none;background-color:#efefef;color:var(--text-color);transition:.3s ease}.kit-input.kit-input--disabled{opacity:.5;pointer-events:none;-webkit-user-select:none;user-select:none}.kit-input--error{border:1px solid var(--error-color)}.kit-input--standard{border-radius:var(--corners-standard)}.kit-input--round{border-radius:var(--corners-round)}.kit-input--square{border-radius:var(--corners-square)}.kit-input-secondary-text{font-size:12px;line-height:24px;margin-left:.8rem}.kit-input::placeholder,.kit-input-bottomtext{color:var(--text-color-secondary)}.kit-input-errortext{color:var(--error-color)}.kit-input--label{color:var(--text-color)}.kit-input:focus,.kit-input:hover{outline:none}.kit-input--icon-container{position:absolute;right:.4rem;fill:none;display:flex}.kit-input--icon{padding:4px}.kit-toggle{display:inline-flex;align-items:center;gap:12px;cursor:pointer;-webkit-user-select:none;user-select:none;font-family:system-ui,sans-serif}.kit-toggle--input{position:absolute;opacity:0;pointer-events:none}.kit-toggle--slider{position:relative;border-radius:999px;transition:background .25s ease;background:#d1d5db}.kit-toggle--slider:before{content:"";position:absolute;top:3px;left:3px;border-radius:50%;transition:transform .25s ease,box-shadow .25s ease;box-shadow:0 2px 6px #00000026;background:#fff}.kit-toggle--input:checked+.kit-toggle--slider{background:var(--primary-btn-color)}.kit-toggle--input:checked+.kit-toggle--slider:before{transform:translate(20px)}.kit-toggle--input:focus-visible+.kit-toggle--slider{outline:2px solid var(--primary-btn-color);outline-offset:2px}.kit-toggle--disabled{opacity:.5;pointer-events:none;-webkit-user-select:none;user-select:none}.kit-toggle--disabled .kit-toggle--slider{background:#9ca3af}.kit-toggle--label{color:var(--text-color)}.kit-toggle--small>.kit-toggle--slider{width:38px;height:18px}.kit-toggle--small>.kit-toggle--slider:before{width:12px;height:12px}.kit-toggle--small>.kit-toggle--label{font-size:14px}.kit-toggle--medium>.kit-toggle--slider{width:42px;height:22px}.kit-toggle--medium>.kit-toggle--slider:before{width:16px;height:16px}.kit-toggle--medium>.kit-toggle--label{font-size:16px}.kit-toggle--large>.kit-toggle--slider{width:46px;height:26px}.kit-toggle--large>.kit-toggle--slider:before{width:20px;height:20px}.kit-toggle--large>.kit-toggle--label{font-size:18px}:root{--font-family: "Nunito Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;--text-color: #2e3242;--text-color-secondary: #94a3b8;--error-color: #ef4949;--bg-color: #fff;--primary-btn-color: #7C3AED;--secondary-btn-color: #FFFFFF;--hover-btn-color: #6D28D9;--corners-standard: .65em;--corners-round: 3em;--corners-square: 0}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box;font-family:var(--font-family)}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}
package/package.json CHANGED
@@ -1,14 +1,28 @@
1
1
  {
2
2
  "name": "@velumweb/ui-kit",
3
- "version": "1.0.0",
3
+ "version": "1.0.2",
4
4
  "description": "uikit for velum projects",
5
5
  "main": "index.js",
6
+ "style": "dist/style.css",
7
+ "sideEffects": [
8
+ "*.css",
9
+ "*.scss"
10
+ ],
11
+ "files": [
12
+ "dist",
13
+ "readme.md",
14
+ "changelog.md"
15
+ ],
6
16
  "module": "dist/index.es.js",
7
17
  "scripts": {
8
18
  "storybook": "storybook dev -p 6006",
9
19
  "build": "vite build && git add dist",
10
- "build-storybook": "storybook build & ren storybook-static docs && git add docs",
11
- "build-all": "npm run build && npm run build-storybook"
20
+ "build-storybook": "storybook build && ren storybook-static docs && copy CNAME docs\\ && git add docs",
21
+ "build-all": "npm run build && npm run build-storybook",
22
+ "update-patch": "npm version patch",
23
+ "update-minor": "npm version minor",
24
+ "update-bugfix": "npm run update-patch && npm run build-all && npm publish",
25
+ "update-feature": "npm run update-minor && npm run build-all && npm publish"
12
26
  },
13
27
  "keywords": [],
14
28
  "author": "Maxorik",
package/readme.md CHANGED
@@ -1,4 +1,4 @@
1
- ui-kit (in progress)
1
+ ## ui-kit (in progress)
2
2
 
3
3
  preview: https://uikit.velumweb.ru/
4
4
 
@@ -6,4 +6,21 @@ preview: https://uikit.velumweb.ru/
6
6
  - toggle
7
7
  - inputs
8
8
  - containers
9
- - modal window
9
+ - modal window
10
+
11
+ ## Set your theme
12
+
13
+ ```
14
+ import { applyTheme } from '@velumweb/ui-kit';
15
+
16
+ applyTheme({
17
+ '--primary-btn-color': '#7C3AED',
18
+ '--secondary-btn-color': '#FFFFFF',
19
+ '--hover-btn-color': '#6D28D9',
20
+ '--bg-color': '#fff',
21
+
22
+ '--corners-standard': '0.65em',
23
+ '--corners-round': '3em',
24
+ '--corners-square': '0',
25
+ });
26
+ ```
@@ -1,14 +0,0 @@
1
- import type { StorybookConfig } from '@storybook/react-vite';
2
-
3
- const config: StorybookConfig = {
4
- "stories": [
5
- "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"
6
- ],
7
- "addons": [],
8
- "framework": {
9
- "name": "@storybook/react-vite",
10
- "options": {}
11
- },
12
- staticDirs: ['../utils'],
13
- };
14
- export default config;
@@ -1,32 +0,0 @@
1
- import { addons, type State } from 'storybook/manager-api';
2
-
3
- addons.setConfig({
4
- navSize: 300,
5
- bottomPanelHeight: 300,
6
- rightPanelWidth: 300,
7
- panelPosition: 'right',
8
- enableShortcuts: true,
9
- showToolbar: true,
10
- theme: undefined,
11
- selectedPanel: undefined,
12
- initialActive: 'sidebar',
13
- layoutCustomisations: {
14
- showSidebar(state: State, defaultValue: boolean) {
15
- return state.storyId === 'landing' ? false : defaultValue;
16
- },
17
- showToolbar(state: State, defaultValue: boolean) {
18
- return state.viewMode === 'docs' ? false : defaultValue;
19
- },
20
- },
21
- sidebar: {
22
- showRoots: false,
23
- collapsedRoots: ['other'],
24
- },
25
- toolbar: {
26
- title: { hidden: false },
27
- zoom: { hidden: false },
28
- eject: { hidden: false },
29
- copy: { hidden: false },
30
- fullscreen: { hidden: false },
31
- },
32
- });
@@ -1,14 +0,0 @@
1
- import type { Preview } from '@storybook/react-vite'
2
-
3
- const preview: Preview = {
4
- parameters: {
5
- controls: {
6
- matchers: {
7
- color: /(background|color)$/i,
8
- date: /Date$/i
9
- },
10
- },
11
- },
12
- };
13
-
14
- export default preview;
@@ -1,32 +0,0 @@
1
- /**
2
- * Компонент кнопки
3
- * - разные состояния
4
- * - разные типы
5
- * - разные размеры
6
- * - разные углы
7
- * - добавление иконки
8
- */
9
- export interface ButtonProps {
10
- /** Основная / Только текст / Вспомогательная */
11
- type: 'primary' | 'transparent' | 'secondary';
12
- /** Маленькая / Средняя / Большая */
13
- size?: 'small' | 'medium' | 'large';
14
- /** Углы прямые / Закругленные / Круглые */
15
- corners?: 'square' | 'standard' | 'round';
16
- /** Доступность кнопки */
17
- disabled?: boolean;
18
- /** Текст кнопки */
19
- text?: string;
20
- /** Событие при нажатии */
21
- onClick?: (e?: MouseEvent) => void;
22
- /** Дополнительные классы */
23
- cls?: string;
24
- /** Путь до иконки из assets */
25
- iconPath?: string;
26
- /** Расположение текста относительно иконки */
27
- labelAlign?: 'right' | 'left' | 'bottom' | 'top';
28
- /** Это просто информационная иконка */
29
- staticIcon?: boolean;
30
- }
31
- /** Элемент кнопки */
32
- export declare const Button: ({ type, size, corners, disabled, staticIcon, cls, text, iconPath, labelAlign, onClick, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
@@ -1 +0,0 @@
1
- export * from './Box';
@@ -1,14 +0,0 @@
1
- import { StoryObj } from '@storybook/react-vite';
2
- declare const meta: {
3
- title: string;
4
- component: ({ value, type, corners, disabled, label, bottomText, placeholder, errorText, live, isSearch, mask, width, onChange, cls, ...props }: import('./Input').InputProps) => import("react/jsx-runtime").JSX.Element;
5
- parameters: {
6
- layout: string;
7
- };
8
- tags: string[];
9
- decorators: ((Story: any) => any)[];
10
- };
11
- export default meta;
12
- type Story = StoryObj<typeof meta>;
13
- export declare const TextField: Story;
14
- export declare const Search: Story;
@@ -1 +0,0 @@
1
- export * from './Input';
@@ -1,29 +0,0 @@
1
- import { ReactNode } from 'react';
2
- /**
3
- * Компонент модальное окно
4
- * - размеры
5
- * - углы
6
- * - тип непрозрачности фона
7
- */
8
- export interface ModalProps {
9
- /** Ширина */
10
- width?: number | 'auto';
11
- /** Углы прямые / Закругленные / Круглые */
12
- corners?: 'square' | 'standard' | 'round';
13
- /** Тип непрозрачности фона */
14
- background?: 'blackout' | 'blur';
15
- /** Содержимое контейнера **/
16
- children: ReactNode | string;
17
- /** Дополнительные классы */
18
- cls?: string;
19
- /** Операции при закрытии */
20
- onClose: () => void;
21
- /** Окно открыто */
22
- isOpen?: boolean;
23
- /** Title */
24
- title?: string;
25
- /** Кнопка закрытия в углу */
26
- closeButton?: boolean;
27
- }
28
- /** Элемент модалки */
29
- export declare const Modal: ({ width, corners, background, isOpen, closeButton, title, cls, children, onClose, ...props }: ModalProps) => import("react/jsx-runtime").JSX.Element;
@@ -1,13 +0,0 @@
1
- import { StoryObj } from '@storybook/react-vite';
2
- declare const meta: {
3
- title: string;
4
- component: ({ width, corners, background, isOpen, closeButton, title, cls, children, onClose, ...props }: import('./Modal').ModalProps) => import("react/jsx-runtime").JSX.Element;
5
- parameters: {
6
- layout: string;
7
- };
8
- tags: string[];
9
- decorators: ((Story: any) => any)[];
10
- };
11
- export default meta;
12
- type Story = StoryObj<typeof meta>;
13
- export declare const ModalWindow: Story;
@@ -1 +0,0 @@
1
- export * from './Modal';
@@ -1,2 +0,0 @@
1
- export * from './index'
2
- export {}
package/dist/index.umd.js DELETED
@@ -1,6 +0,0 @@
1
- (function(E,v){typeof exports=="object"&&typeof module<"u"?v(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],v):(E=typeof globalThis<"u"?globalThis:E||self,v(E.velumUIkit={},E.React))})(this,(function(E,v){"use strict";var A={exports:{}},S={};var B;function ee(){if(B)return S;B=1;var f=Symbol.for("react.transitional.element"),p=Symbol.for("react.fragment");function k(i,a,l){var s=null;if(l!==void 0&&(s=""+l),a.key!==void 0&&(s=""+a.key),"key"in a){l={};for(var m in a)m!=="key"&&(l[m]=a[m])}else l=a;return a=l.ref,{$$typeof:f,type:i,key:s,ref:a!==void 0?a:null,props:l}}return S.Fragment=p,S.jsx=k,S.jsxs=k,S}var O={};var V;function te(){return V||(V=1,process.env.NODE_ENV!=="production"&&(function(){function f(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===ie?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case T:return"Fragment";case I:return"Profiler";case w:return"StrictMode";case G:return"Suspense";case Y:return"SuspenseList";case oe:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case g:return"Portal";case $:return e.displayName||"Context";case P:return(e._context.displayName||"Context")+".Consumer";case D:var r=e.render;return e=e.displayName,e||(e=r.displayName||r.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case F:return r=e.displayName||null,r!==null?r:f(e.type)||"Memo";case y:r=e._payload,e=e._init;try{return f(e(r))}catch{}}return null}function p(e){return""+e}function k(e){try{p(e);var r=!1}catch{r=!0}if(r){r=console;var n=r.error,u=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return n.call(r,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",u),p(e)}}function i(e){if(e===T)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===y)return"<...>";try{var r=f(e);return r?"<"+r+">":"<...>"}catch{return"<...>"}}function a(){var e=L.A;return e===null?null:e.getOwner()}function l(){return Error("react-stack-top-frame")}function s(e){if(X.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return!1}return e.key!==void 0}function m(e,r){function n(){H||(H=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",r))}n.isReactWarning=!0,Object.defineProperty(e,"key",{get:n,configurable:!0})}function j(){var e=f(this.type);return Z[e]||(Z[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function h(e,r,n,u,M,U){var d=n.ref;return e={$$typeof:_,type:e,key:r,props:n,_owner:u},(d!==void 0?d:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:j}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:M}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:U}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function x(e,r,n,u,M,U){var d=r.children;if(d!==void 0)if(u)if(le(d)){for(u=0;u<d.length;u++)b(d[u]);Object.freeze&&Object.freeze(d)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else b(d);if(X.call(r,"key")){d=f(e);var N=Object.keys(r).filter(function(ce){return ce!=="key"});u=0<N.length?"{key: someKey, "+N.join(": ..., ")+": ...}":"{key: someKey}",K[d+u]||(N=0<N.length?"{"+N.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
2
- let props = %s;
3
- <%s {...props} />
4
- React keys must be passed directly to JSX without using spread:
5
- let props = %s;
6
- <%s key={someKey} {...props} />`,u,d,N,d),K[d+u]=!0)}if(d=null,n!==void 0&&(k(n),d=""+n),s(r)&&(k(r.key),d=""+r.key),"key"in r){n={};for(var z in r)z!=="key"&&(n[z]=r[z])}else n=r;return d&&m(n,typeof e=="function"?e.displayName||e.name||"Unknown":e),h(e,d,n,a(),M,U)}function b(e){o(e)?e._store&&(e._store.validated=1):typeof e=="object"&&e!==null&&e.$$typeof===y&&(e._payload.status==="fulfilled"?o(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function o(e){return typeof e=="object"&&e!==null&&e.$$typeof===_}var c=v,_=Symbol.for("react.transitional.element"),g=Symbol.for("react.portal"),T=Symbol.for("react.fragment"),w=Symbol.for("react.strict_mode"),I=Symbol.for("react.profiler"),P=Symbol.for("react.consumer"),$=Symbol.for("react.context"),D=Symbol.for("react.forward_ref"),G=Symbol.for("react.suspense"),Y=Symbol.for("react.suspense_list"),F=Symbol.for("react.memo"),y=Symbol.for("react.lazy"),oe=Symbol.for("react.activity"),ie=Symbol.for("react.client.reference"),L=c.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,X=Object.prototype.hasOwnProperty,le=Array.isArray,W=console.createTask?console.createTask:function(){return null};c={react_stack_bottom_frame:function(e){return e()}};var H,Z={},Q=c.react_stack_bottom_frame.bind(c,l)(),q=W(i(l)),K={};O.Fragment=T,O.jsx=function(e,r,n){var u=1e4>L.recentlyCreatedOwnerStacks++;return x(e,r,n,!1,u?Error("react-stack-top-frame"):Q,u?W(i(e)):q)},O.jsxs=function(e,r,n){var u=1e4>L.recentlyCreatedOwnerStacks++;return x(e,r,n,!0,u?Error("react-stack-top-frame"):Q,u?W(i(e)):q)}})()),O}var J;function re(){return J||(J=1,process.env.NODE_ENV==="production"?A.exports=ee():A.exports=te()),A.exports}var t=re();const R=({direction:f="row",align:p="center",justify:k="center",wrapContent:i=!1,cls:a="",gap:l=8,margin:s=[0],padding:m=[0],parent:j="div",mask:h=!1,children:x,...b})=>{const o=j,c=s?.map(g=>g+"px").join(" "),_=m?.map(g=>g+"px").join(" ");return t.jsx(o,{className:["kit-box",`kit-box--${f}`,`kit-box--align-${p}`,`kit-box--justify-${k}`,i&&"kit-box--wrap",a].join(" "),style:{gap:`${l}px`,margin:`${c}`,padding:`${_}`},...b,children:x})},C=({type:f="primary",size:p="medium",corners:k="standard",disabled:i=!1,staticIcon:a=!1,cls:l="",text:s="",iconPath:m="",labelAlign:j="",onClick:h,...x})=>{const b=m!=""&&s===""?"kit-btn--icon":"";let o;const c=()=>m?t.jsx("div",{className:"kit-btn--svg",style:{maskImage:`url(assets/${m})`,WebkitMaskImage:`url(assets/${m})`}}):null;switch(j){case"right":o=()=>t.jsxs(R,{direction:"row",children:[t.jsx(c,{}),s]});break;case"left":o=()=>t.jsxs(R,{direction:"row",children:[s,t.jsx(c,{})]});break;case"top":o=()=>t.jsxs(R,{direction:"column",children:[s,t.jsx(c,{})]});break;case"bottom":o=()=>t.jsxs(R,{direction:"column",children:[t.jsx(c,{}),s]});break;default:o=()=>t.jsx(R,{direction:"row",children:b?t.jsx(c,{}):s});break}return t.jsx("button",{type:"button",onClick:i||!h?null:h,className:["kit-btn",`kit-btn--${p}`,`kit-btn--${k}`,`kit-btn--${f}`,i?"kit-btn--disabled":"",a?"kit-icon":"",b,l].join(" "),...x,children:t.jsx(o,{})})},ne=({width:f="auto",corners:p="standard",background:k="blackout",isOpen:i=!1,closeButton:a=!0,title:l="",cls:s="",children:m,onClose:j,...h})=>{const x=v.useRef(null),[b,o]=v.useState(i);function c(){o(!1),j&&j()}return v.useEffect(()=>{o(i)},[i]),v.useEffect(()=>{if(!b)return;function _(T){T.key==="Escape"&&c()}document.addEventListener("keydown",_);const g=document.body.style.overflow;return document.body.style.overflow="hidden",()=>{document.body.style.overflow=g,document.removeEventListener("keydown",_)}},[b,c]),t.jsx(t.Fragment,{children:b?t.jsx("div",{className:"kit-modal--overlay",onClick:_=>{_.target===x.current&&c()},ref:x,children:t.jsx("div",{className:["kit-modal",`kit-modal--${p}`,`kit-modal--bg-${k}`,s].join(" "),style:{width:isNaN(f)?"fit-content":`${f}px`},...h,children:t.jsxs(R,{padding:[8,16],direction:"column",children:[t.jsx(R,{justify:"end",margin:[0,-16],children:t.jsx(C,{type:"transparent",size:"large",onClick:c,iconPath:"svg-lib/cross-svgrepo-com.svg",cls:"kit-modal-close"})}),t.jsx(R,{justify:"start",children:m})]})})}):t.jsx(t.Fragment,{})})},ae=({value:f="",type:p="text",corners:k="standard",disabled:i=!1,label:a="",bottomText:l="",placeholder:s="",errorText:m="",live:j=!1,isSearch:h=!1,mask:x,width:b,onChange:o,cls:c,..._})=>{const[g,T]=v.useState(f),[w,I]=v.useState(""),P=v.useId(),$=F=>{let y=F.target.value;p==="number"&&(y=y.toString().replace(/\D/g,"")),x&&!x.test(y.toString())?I(m||"Некорректное значение"):I(""),T(y),j&&o&&o(y)},D=()=>{T("")},Y={value:g,placeholder:s,onChange:$,onBlur:F=>{!j&&o&&o(g)},className:["kit-input",`kit-input--${k}`,i?"kit-input--disabled":"",w?"kit-input--error":"",c].join(" ").trim()};return t.jsxs("div",{className:"kit-input--wrapper",children:[a&&t.jsx("div",{className:"w5rem",children:t.jsx("label",{for:P,className:"kit-input--label kit-input-secondary-text",children:a})}),t.jsxs("div",{className:"kit-input--container",style:{width:b?`${b}px`:"auto"},children:[p==="textarea"?t.jsx("textarea",{id:P,...Y}):t.jsx("input",{...Y,type:p,id:P}),t.jsxs("div",{className:"kit-input--icon-container",children:[g&&t.jsx(C,{type:"transparent",iconPath:"svg-lib/input-svgrepo-com.svg",size:"small",onClick:D,cls:"kit-input--icon"}),h&&t.jsx(C,{type:"transparent",iconPath:"svg-lib/search-svgrepo-com.svg",size:"small",staticIcon:j,onClick:()=>o&&o(g),cls:"kit-input--icon"})]})]}),!w&&l&&t.jsx("div",{className:"kit-input-bottomtext kit-input-secondary-text",children:l}),w&&t.jsx("div",{className:"kit-input-errortext kit-input-secondary-text",children:w})]})},se=({size:f="medium",disabled:p=!1,cls:k="",text:i="",onClick:a,...l})=>{const s=v.useId();return t.jsxs("label",{htmlFor:s,className:["kit-toggle",p?"kit-toggle--disabled":"",`kit-toggle--${f}`,k].join(" "),children:[t.jsx("input",{id:s,type:"checkbox",className:"kit-toggle--input",disabled:p,defaultChecked:!1,onChange:m=>a?.(m.target.checked)}),t.jsx("span",{className:"kit-toggle--slider","aria-hidden":"true"}),i&&t.jsx("span",{className:"kit-toggle--label",children:i})]})};E.Box=R,E.Button=C,E.Input=ae,E.Modal=ne,E.Toggle=se,Object.defineProperty(E,Symbol.toStringTag,{value:"Module"})}));
@@ -1,15 +0,0 @@
1
- import { StoryObj } from '@storybook/react-vite';
2
- declare const meta: {
3
- title: string;
4
- component: ({ type, size, corners, disabled, staticIcon, cls, text, iconPath, labelAlign, onClick, ...props }: import('./Button').ButtonProps) => import("react/jsx-runtime").JSX.Element;
5
- parameters: {
6
- layout: string;
7
- };
8
- tags: string[];
9
- decorators: ((Story: any) => any)[];
10
- };
11
- export default meta;
12
- type Story = StoryObj<typeof meta>;
13
- export declare const CustomButton: Story;
14
- export declare const IconButton: Story;
15
- export declare const Icon: Story;
@@ -1 +0,0 @@
1
- export * from './Button';
package/docs/CNAME DELETED
@@ -1 +0,0 @@
1
- uikit.velumweb.ru
@@ -1,33 +0,0 @@
1
- import { ReactNode } from 'react';
2
- /**
3
- * Компоненты контейнеры
4
- * - разные направления
5
- * - семантические обертки
6
- * - позиционирование
7
- */
8
- export interface BoxProps {
9
- /** Направление строка или столбец */
10
- direction?: 'row' | 'column';
11
- /** Горизонтальное выравнивание **/
12
- align?: 'top' | 'center' | 'bottom';
13
- /** Горизонтальное распределение **/
14
- justify?: 'start' | 'end' | 'center' | 'space';
15
- /** Перенос блоков внутри контейнера **/
16
- wrapContent?: boolean;
17
- /** Дополнительные классы */
18
- cls?: string;
19
- /** Расстояние между дочерними элементами */
20
- gap?: number;
21
- /** Внешние отступы */
22
- margin?: number[];
23
- /** Внутренние отступы */
24
- padding?: number[];
25
- /** Родительский тег для семантики */
26
- parent?: 'header' | 'footer' | 'article' | 'section' | 'main' | 'div';
27
- /** Содержимое контейнера **/
28
- children: ReactNode | string;
29
- /** Маска загрузки **/
30
- mask?: boolean;
31
- }
32
- /** Элемент контейнера */
33
- export declare const Box: ({ direction, align, justify, wrapContent, cls, gap, margin, padding, parent, mask, children, ...props }: BoxProps) => import("react/jsx-runtime").JSX.Element;
@@ -1,38 +0,0 @@
1
- /**
2
- * Компонент поля для ввода текста
3
- * - тип (текст, цифры, пароль)
4
- * - это поисковая строка (значок лупы)
5
- * - валидация
6
- */
7
- export interface InputProps {
8
- /** Значение */
9
- value?: string | number;
10
- /** Текстовое поле \ цифровое \ пароль \ textarea */
11
- type?: 'text' | 'number' | 'password' | 'email' | 'date' | 'tel' | 'time' | 'textarea';
12
- /** Углы прямые / Закругленные / Круглые */
13
- corners?: 'square' | 'standard' | 'round';
14
- /** Доступность поля */
15
- disabled?: boolean;
16
- /** Текст над полем */
17
- label?: string;
18
- /** Текст под полем */
19
- bottomText?: string;
20
- /** Плейсхолдер */
21
- placeholder?: string;
22
- /** Живой поиск */
23
- live?: boolean;
24
- /** Событие при изменении */
25
- onChange?: (value?: string | number) => void;
26
- /** Это поиск */
27
- isSearch?: boolean;
28
- /** Валидация */
29
- mask?: RegExp;
30
- /** Ошибки валидации */
31
- errorText: string;
32
- /** Ширина в px */
33
- width?: number;
34
- /** Дополнительные классы */
35
- cls?: string;
36
- }
37
- /** Элемент кнопки */
38
- export declare const Input: ({ value, type, corners, disabled, label, bottomText, placeholder, errorText, live, isSearch, mask, width, onChange, cls, ...props }: InputProps) => import("react/jsx-runtime").JSX.Element;
@@ -1,18 +0,0 @@
1
- import { default as React } from 'react';
2
- /**
3
- * Компонент переключателя
4
- */
5
- export interface ToggleProps {
6
- /** Маленькая / Средняя / Большая */
7
- size?: 'small' | 'medium' | 'large';
8
- /** Доступность переключателя */
9
- disabled?: boolean;
10
- /** Текст переключателя */
11
- text?: string;
12
- /** Событие при нажатии */
13
- onClick?: (e?: MouseEvent) => void;
14
- /** Дополнительные классы */
15
- cls?: string;
16
- }
17
- /** Элемент кнопки */
18
- export declare const Toggle: React.FC<ToggleProps>;
@@ -1,13 +0,0 @@
1
- import { StoryObj } from '@storybook/react-vite';
2
- declare const meta: {
3
- title: string;
4
- component: import('react').FC<import('./Toggle').ToggleProps>;
5
- parameters: {
6
- layout: string;
7
- };
8
- tags: string[];
9
- decorators: ((Story: any) => any)[];
10
- };
11
- export default meta;
12
- type Story = StoryObj<typeof meta>;
13
- export declare const CustomToggle: Story;
@@ -1 +0,0 @@
1
- export * from './Toggle';
@@ -1 +0,0 @@
1
- @charset "UTF-8";.kit-box{margin:0;padding:0;display:flex;width:100%;flex-wrap:nowrap}.kit-box--row{flex-direction:row}.kit-box--column{flex-direction:column}.kit-box--align-top{align-items:flex-start}.kit-box--align-center{align-items:center}.kit-box--align-bottom{align-items:flex-end}.kit-box--justify-start{justify-content:flex-start}.kit-box--justify-end{justify-content:flex-end}.kit-box--justify-center{justify-content:center}.kit-box--justify-space{justify-content:space-between}.kit-box--wrap{flex-wrap:wrap}:root{--font-family: "Nunito Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;--text-color: #2e3242;--text-color-secondary: #94a3b8;--error-color: #ef4949;--bg-color: #fff;--primary-btn-color: #7C3AED;--secondary-btn-color: #FFFFFF;--hover-btn-color: #6D28D9;--corners-standard: .65em;--corners-round: 3em;--corners-square: 0}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box;font-family:var(--font-family)}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}.kit-btn{display:inline-block;cursor:pointer;border:0;font-weight:700;line-height:1;font-family:var(--font-family);transition:background-color .3s ease;padding:8px 16px}.kit-btn>.kit-box{width:fit-content}.kit-btn:active{transform:translateY(.5px);box-shadow:0 0 5px #0000004d inset}.kit-btn.kit-icon{pointer-events:none}.kit-btn.kit-btn--disabled{opacity:.5;pointer-events:none;-webkit-user-select:none;user-select:none}.kit-btn--primary{background-color:var(--primary-btn-color);color:var(--secondary-btn-color)}.kit-btn--primary>div>.kit-btn--svg{background-color:var(--secondary-btn-color)}.kit-btn--primary:hover{background-color:var(--hover-btn-color)}.kit-btn--secondary{border:1px var(--primary-btn-color) solid;background-color:transparent;color:var(--primary-btn-color)}.kit-btn--secondary>div>.kit-btn--svg{background-color:var(--primary-btn-color)}.kit-btn--secondary:hover{background-color:var(--hover-btn-color);color:var(--secondary-btn-color);border:1px var(--hover-btn-color) solid}.kit-btn--secondary:hover>div>.kit-btn--svg{background-color:var(--secondary-btn-color)}.kit-btn--transparent{border:none;background-color:transparent;color:var(--primary-btn-color)}.kit-btn--transparent>div>.kit-btn--svg{background-color:var(--primary-btn-color)}.kit-btn--transparent:hover{color:var(--hover-btn-color)}.kit-btn--transparent:hover>div>.kit-btn--svg{background-color:var(--hover-btn-color)}.kit-btn--transparent:active{box-shadow:unset}.kit-btn--small{font-size:12px}.kit-btn--small>div>.kit-btn--svg{width:20px;height:20px}.kit-btn--small:not(.kit-btn--icon)>.kit-container--h>.kit-btn--svg{width:16px;height:16px}.kit-btn--small:not(.kit-btn--icon)>.kit-container--v>.kit-btn--svg{width:24px;height:24px}.kit-btn--medium{font-size:14px}.kit-btn--medium>div>.kit-btn--svg{width:24px;height:24px}.kit-btn--medium:not(.kit-btn--icon)>.kit-container--h>.kit-btn--svg{width:20px;height:20px}.kit-btn--medium:not(.kit-btn--icon)>.kit-container--v>.kit-btn--svg{width:28px;height:28px}.kit-btn--large{font-size:16px}.kit-btn--large>div>.kit-btn--svg{width:32px;height:32px}.kit-btn--large:not(.kit-btn--icon)>.kit-container--h>.kit-btn--svg{width:24px;height:24px}.kit-btn--large:not(.kit-btn--icon)>.kit-container--v>.kit-btn--svg{width:32px;height:32px}.kit-btn--standard{border-radius:var(--corners-standard)}.kit-btn--round{border-radius:var(--corners-round)}.kit-btn--square{border-radius:var(--corners-square)}.kit-btn--icon{padding:8px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.kit-btn--svg{background-repeat:no-repeat;background-position:center;background-size:contain;mask-size:contain;mask-repeat:no-repeat;-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat}
@@ -1 +0,0 @@
1
- import{j as e}from"./jsx-runtime-u17CrQMm.js";const r=({direction:u="row",align:o="center",justify:d="center",wrapContent:s=!1,cls:m="",gap:c=8,margin:a=[0],padding:n=[0],parent:p="div",mask:f=!1,children:v,...i})=>{const l=p,t=a?.map(y=>y+"px").join(" "),b=n?.map(y=>y+"px").join(" ");return e.jsx(l,{className:["kit-box",`kit-box--${u}`,`kit-box--align-${o}`,`kit-box--justify-${d}`,s&&"kit-box--wrap",m].join(" "),style:{gap:`${c}px`,margin:`${t}`,padding:`${b}`},...i,children:v})};r.__docgenInfo={description:"Элемент контейнера",methods:[],displayName:"Box",props:{direction:{required:!1,tsType:{name:"union",raw:"'row' | 'column'",elements:[{name:"literal",value:"'row'"},{name:"literal",value:"'column'"}]},description:"Направление строка или столбец",defaultValue:{value:"'row'",computed:!1}},align:{required:!1,tsType:{name:"union",raw:"'top' | 'center' | 'bottom'",elements:[{name:"literal",value:"'top'"},{name:"literal",value:"'center'"},{name:"literal",value:"'bottom'"}]},description:"Горизонтальное выравнивание *",defaultValue:{value:"'center'",computed:!1}},justify:{required:!1,tsType:{name:"union",raw:"'start' | 'end' | 'center' | 'space'",elements:[{name:"literal",value:"'start'"},{name:"literal",value:"'end'"},{name:"literal",value:"'center'"},{name:"literal",value:"'space'"}]},description:"Горизонтальное распределение *",defaultValue:{value:"'center'",computed:!1}},wrapContent:{required:!1,tsType:{name:"boolean"},description:"Перенос блоков внутри контейнера *",defaultValue:{value:"false",computed:!1}},cls:{required:!1,tsType:{name:"string"},description:"Дополнительные классы",defaultValue:{value:"''",computed:!1}},gap:{required:!1,tsType:{name:"number"},description:"Расстояние между дочерними элементами",defaultValue:{value:"8",computed:!1}},margin:{required:!1,tsType:{name:"Array",elements:[{name:"number"}],raw:"number[]"},description:"Внешние отступы",defaultValue:{value:"[0]",computed:!1}},padding:{required:!1,tsType:{name:"Array",elements:[{name:"number"}],raw:"number[]"},description:"Внутренние отступы",defaultValue:{value:"[0]",computed:!1}},parent:{required:!1,tsType:{name:"union",raw:"'header' | 'footer' | 'article' | 'section' | 'main' | 'div'",elements:[{name:"literal",value:"'header'"},{name:"literal",value:"'footer'"},{name:"literal",value:"'article'"},{name:"literal",value:"'section'"},{name:"literal",value:"'main'"},{name:"literal",value:"'div'"}]},description:"Родительский тег для семантики",defaultValue:{value:"'div'",computed:!1}},children:{required:!0,tsType:{name:"union",raw:"ReactNode | string",elements:[{name:"ReactNode"},{name:"string"}]},description:"Содержимое контейнера *"},mask:{required:!1,tsType:{name:"boolean"},description:"Маска загрузки *",defaultValue:{value:"false",computed:!1}}}};const g=({type:u="primary",size:o="medium",corners:d="standard",disabled:s=!1,staticIcon:m=!1,cls:c="",text:a="",iconPath:n="",labelAlign:p="",onClick:f,...v})=>{const i=n!=""&&a===""?"kit-btn--icon":"";let l;const t=()=>n?e.jsx("div",{className:"kit-btn--svg",style:{maskImage:`url(assets/${n})`,WebkitMaskImage:`url(assets/${n})`}}):null;switch(p){case"right":l=()=>e.jsxs(r,{direction:"row",children:[e.jsx(t,{}),a]});break;case"left":l=()=>e.jsxs(r,{direction:"row",children:[a,e.jsx(t,{})]});break;case"top":l=()=>e.jsxs(r,{direction:"column",children:[a,e.jsx(t,{})]});break;case"bottom":l=()=>e.jsxs(r,{direction:"column",children:[e.jsx(t,{}),a]});break;default:l=()=>e.jsx(r,{direction:"row",children:i?e.jsx(t,{}):a});break}return e.jsx("button",{type:"button",onClick:s||!f?null:f,className:["kit-btn",`kit-btn--${o}`,`kit-btn--${d}`,`kit-btn--${u}`,s?"kit-btn--disabled":"",m?"kit-icon":"",i,c].join(" "),...v,children:e.jsx(l,{})})};g.__docgenInfo={description:"Элемент кнопки",methods:[],displayName:"Button",props:{type:{required:!1,tsType:{name:"union",raw:"'primary' | 'transparent' | 'secondary'",elements:[{name:"literal",value:"'primary'"},{name:"literal",value:"'transparent'"},{name:"literal",value:"'secondary'"}]},description:"Основная / Только текст / Вспомогательная",defaultValue:{value:"'primary'",computed:!1}},size:{required:!1,tsType:{name:"union",raw:"'small' | 'medium' | 'large'",elements:[{name:"literal",value:"'small'"},{name:"literal",value:"'medium'"},{name:"literal",value:"'large'"}]},description:"Маленькая / Средняя / Большая",defaultValue:{value:"'medium'",computed:!1}},corners:{required:!1,tsType:{name:"union",raw:"'square' | 'standard' | 'round'",elements:[{name:"literal",value:"'square'"},{name:"literal",value:"'standard'"},{name:"literal",value:"'round'"}]},description:"Углы прямые / Закругленные / Круглые",defaultValue:{value:"'standard'",computed:!1}},disabled:{required:!1,tsType:{name:"boolean"},description:"Доступность кнопки",defaultValue:{value:"false",computed:!1}},text:{required:!1,tsType:{name:"string"},description:"Текст кнопки",defaultValue:{value:"''",computed:!1}},onClick:{required:!1,tsType:{name:"signature",type:"function",raw:"(e?: MouseEvent) => void",signature:{arguments:[{type:{name:"MouseEvent"},name:"e"}],return:{name:"void"}}},description:"Событие при нажатии"},cls:{required:!1,tsType:{name:"string"},description:"Дополнительные классы",defaultValue:{value:"''",computed:!1}},iconPath:{required:!1,tsType:{name:"string"},description:"Путь до иконки из assets",defaultValue:{value:"''",computed:!1}},labelAlign:{required:!1,tsType:{name:"union",raw:"'right' | 'left' | 'bottom' | 'top'",elements:[{name:"literal",value:"'right'"},{name:"literal",value:"'left'"},{name:"literal",value:"'bottom'"},{name:"literal",value:"'top'"}]},description:"Расположение текста относительно иконки",defaultValue:{value:"''",computed:!1}},staticIcon:{required:!1,tsType:{name:"boolean"},description:"Это просто информационная иконка",defaultValue:{value:"false",computed:!1}}}};export{g as B,r as a};
@@ -1,34 +0,0 @@
1
- import{B as r}from"./Button-DBH2W8EG.js";import"./jsx-runtime-u17CrQMm.js";const l={title:"Example Button",component:r,parameters:{layout:"centered"},tags:["autodocs"],decorators:[n=>{const t=document.createElement("script");return t.src="/style_setter.js",t.type="module",document.head.appendChild(t),n()}]},e={args:{text:"Button Example",type:"primary",size:"medium",corners:"standard",disabled:!1,cls:"",onClick:()=>console.log("CustomButton")}},o={args:{text:"Exit",type:"secondary",size:"medium",corners:"standard",disabled:!1,cls:"",onClick:()=>console.log("IconButton"),iconPath:"svg-lib/alert-square.svg",labelAlign:"bottom"}},s={args:{onClick:()=>console.log("Icon"),iconPath:"svg-lib/checkmark-svgrepo-com.svg",type:"transparent",size:"large",corners:"round",disabled:!1,cls:"",staticIcon:!0}};e.parameters={...e.parameters,docs:{...e.parameters?.docs,source:{originalSource:`{
2
- args: {
3
- text: 'Button Example',
4
- type: 'primary',
5
- size: 'medium',
6
- corners: 'standard',
7
- disabled: false,
8
- cls: '',
9
- onClick: () => console.log('CustomButton')
10
- }
11
- }`,...e.parameters?.docs?.source}}};o.parameters={...o.parameters,docs:{...o.parameters?.docs,source:{originalSource:`{
12
- args: {
13
- text: 'Exit',
14
- type: 'secondary',
15
- size: 'medium',
16
- corners: 'standard',
17
- disabled: false,
18
- cls: '',
19
- onClick: () => console.log('IconButton'),
20
- iconPath: 'svg-lib/alert-square.svg',
21
- labelAlign: 'bottom'
22
- }
23
- }`,...o.parameters?.docs?.source}}};s.parameters={...s.parameters,docs:{...s.parameters?.docs,source:{originalSource:`{
24
- args: {
25
- onClick: () => console.log('Icon'),
26
- iconPath: 'svg-lib/checkmark-svgrepo-com.svg',
27
- type: 'transparent',
28
- size: 'large',
29
- corners: 'round',
30
- disabled: false,
31
- cls: '',
32
- staticIcon: true
33
- }
34
- }`,...s.parameters?.docs?.source}}};const i=["CustomButton","IconButton","Icon"];export{e as CustomButton,s as Icon,o as IconButton,i as __namedExportsOrder,l as default};
@@ -1 +0,0 @@
1
- import{j as e}from"./jsx-runtime-u17CrQMm.js";import{r as u}from"./iframe-D7bwIom8.js";import{B as g}from"./Button-DBH2W8EG.js";const I=({value:y="",type:n="text",corners:b="standard",disabled:k=!1,label:d="",bottomText:o="",placeholder:q="",errorText:h="",live:l=!1,isSearch:T=!1,mask:p,width:m,onChange:a,cls:j,...N})=>{const[s,c]=u.useState(y),[r,f]=u.useState(""),i=u.useId(),V=x=>{let t=x.target.value;n==="number"&&(t=t.toString().replace(/\D/g,"")),p&&!p.test(t.toString())?f(h||"Некорректное значение"):f(""),c(t),l&&a&&a(t)},w=()=>{c("")},v={value:s,placeholder:q,onChange:V,onBlur:x=>{!l&&a&&a(s)},className:["kit-input",`kit-input--${b}`,k?"kit-input--disabled":"",r?"kit-input--error":"",j].join(" ").trim()};return e.jsxs("div",{className:"kit-input--wrapper",children:[d&&e.jsx("div",{className:"w5rem",children:e.jsx("label",{for:i,className:"kit-input--label kit-input-secondary-text",children:d})}),e.jsxs("div",{className:"kit-input--container",style:{width:m?`${m}px`:"auto"},children:[n==="textarea"?e.jsx("textarea",{id:i,...v}):e.jsx("input",{...v,type:n,id:i}),e.jsxs("div",{className:"kit-input--icon-container",children:[s&&e.jsx(g,{type:"transparent",iconPath:"svg-lib/input-svgrepo-com.svg",size:"small",onClick:w,cls:"kit-input--icon"}),T&&e.jsx(g,{type:"transparent",iconPath:"svg-lib/search-svgrepo-com.svg",size:"small",staticIcon:l,onClick:()=>a&&a(s),cls:"kit-input--icon"})]})]}),!r&&o&&e.jsx("div",{className:"kit-input-bottomtext kit-input-secondary-text",children:o}),r&&e.jsx("div",{className:"kit-input-errortext kit-input-secondary-text",children:r})]})};I.__docgenInfo={description:"Элемент кнопки",methods:[],displayName:"Input",props:{value:{required:!1,tsType:{name:"union",raw:"string | number",elements:[{name:"string"},{name:"number"}]},description:"Значение",defaultValue:{value:"''",computed:!1}},type:{required:!1,tsType:{name:"union",raw:"'text' | 'number' | 'password' | 'email' | 'date' | 'tel' | 'time' | 'textarea'",elements:[{name:"literal",value:"'text'"},{name:"literal",value:"'number'"},{name:"literal",value:"'password'"},{name:"literal",value:"'email'"},{name:"literal",value:"'date'"},{name:"literal",value:"'tel'"},{name:"literal",value:"'time'"},{name:"literal",value:"'textarea'"}]},description:"Текстовое поле \\ цифровое \\ пароль \\ textarea",defaultValue:{value:"'text'",computed:!1}},corners:{required:!1,tsType:{name:"union",raw:"'square' | 'standard' | 'round'",elements:[{name:"literal",value:"'square'"},{name:"literal",value:"'standard'"},{name:"literal",value:"'round'"}]},description:"Углы прямые / Закругленные / Круглые",defaultValue:{value:"'standard'",computed:!1}},disabled:{required:!1,tsType:{name:"boolean"},description:"Доступность поля",defaultValue:{value:"false",computed:!1}},label:{required:!1,tsType:{name:"string"},description:"Текст над полем",defaultValue:{value:"''",computed:!1}},bottomText:{required:!1,tsType:{name:"string"},description:"Текст под полем",defaultValue:{value:"''",computed:!1}},placeholder:{required:!1,tsType:{name:"string"},description:"Плейсхолдер",defaultValue:{value:"''",computed:!1}},live:{required:!1,tsType:{name:"boolean"},description:"Живой поиск",defaultValue:{value:"false",computed:!1}},onChange:{required:!1,tsType:{name:"signature",type:"function",raw:"(value?: string | number) => void",signature:{arguments:[{type:{name:"union",raw:"string | number",elements:[{name:"string"},{name:"number"}]},name:"value"}],return:{name:"void"}}},description:"Событие при изменении"},isSearch:{required:!1,tsType:{name:"boolean"},description:"Это поиск",defaultValue:{value:"false",computed:!1}},mask:{required:!1,tsType:{name:"RegExp"},description:"Валидация"},errorText:{required:!1,tsType:{name:"string"},description:"Ошибки валидации",defaultValue:{value:"''",computed:!1}},width:{required:!1,tsType:{name:"number"},description:"Ширина в px"},cls:{required:!1,tsType:{name:"string"},description:"Дополнительные классы"}}};export{I};
@@ -1 +0,0 @@
1
- @charset "UTF-8";:root{--font-family: "Nunito Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;--text-color: #2e3242;--text-color-secondary: #94a3b8;--error-color: #ef4949;--bg-color: #fff;--primary-btn-color: #7C3AED;--secondary-btn-color: #FFFFFF;--hover-btn-color: #6D28D9;--corners-standard: .65em;--corners-round: 3em;--corners-square: 0}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box;font-family:var(--font-family)}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}.kit-input--container{display:flex;line-height:30px;align-items:center;position:relative}.kit-input{width:100%;height:36px;line-height:30px;padding:0 .6rem;border:1px solid var(--primary-btn-color);outline:none;background-color:#efefef;color:var(--text-color);transition:.3s ease}.kit-input.kit-input--disabled{opacity:.5;pointer-events:none;-webkit-user-select:none;user-select:none}.kit-input--error{border:1px solid var(--error-color)}.kit-input--standard{border-radius:var(--corners-standard)}.kit-input--round{border-radius:var(--corners-round)}.kit-input--square{border-radius:var(--corners-square)}.kit-input-secondary-text{font-size:12px;line-height:24px;margin-left:.8rem}.kit-input::placeholder,.kit-input-bottomtext{color:var(--text-color-secondary)}.kit-input-errortext{color:var(--error-color)}.kit-input--label{color:var(--text-color)}.kit-input:focus,.kit-input:hover{outline:none}.kit-input--icon-container{position:absolute;right:.4rem;fill:none;display:flex}.kit-input--icon{padding:4px}
@@ -1,21 +0,0 @@
1
- import{I as o}from"./Input-D117xj27.js";import"./jsx-runtime-u17CrQMm.js";import"./iframe-D7bwIom8.js";import"./preload-helper-PPVm8Dsz.js";import"./Button-DBH2W8EG.js";const d={title:"Example Input",component:o,parameters:{layout:"centered"},tags:["autodocs"],decorators:[a=>{const r=document.createElement("script");return r.src="/style_setter.js",r.type="module",document.head.appendChild(r),a()}]},e={args:{label:"Год вашего рождения",value:"2026",type:"text",bottomText:"Пишите только цифры",placeholder:"Год в формате YYYY",errorText:"Допустимы только цифры",mask:/^[0-9]+$/,width:300}},t={args:{value:"",type:"text",placeholder:"Найти по имени или году",width:250,live:!0,isSearch:!0}};e.parameters={...e.parameters,docs:{...e.parameters?.docs,source:{originalSource:`{
2
- args: {
3
- label: 'Год вашего рождения',
4
- value: '2026',
5
- type: 'text',
6
- bottomText: 'Пишите только цифры',
7
- placeholder: 'Год в формате YYYY',
8
- errorText: 'Допустимы только цифры',
9
- mask: /^[0-9]+$/,
10
- width: 300
11
- }
12
- }`,...e.parameters?.docs?.source}}};t.parameters={...t.parameters,docs:{...t.parameters?.docs,source:{originalSource:`{
13
- args: {
14
- value: '',
15
- type: 'text',
16
- placeholder: 'Найти по имени или году',
17
- width: 250,
18
- live: true,
19
- isSearch: true
20
- }
21
- }`,...t.parameters?.docs?.source}}};const m=["TextField","Search"];export{t as Search,e as TextField,m as __namedExportsOrder,d as default};
@@ -1 +0,0 @@
1
- @charset "UTF-8";:root{--font-family: "Nunito Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;--text-color: #2e3242;--text-color-secondary: #94a3b8;--error-color: #ef4949;--bg-color: #fff;--primary-btn-color: #7C3AED;--secondary-btn-color: #FFFFFF;--hover-btn-color: #6D28D9;--corners-standard: .65em;--corners-round: 3em;--corners-square: 0}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box;font-family:var(--font-family)}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}.kit-modal--overlay{position:fixed;inset:0;width:100%;height:100%;background:#000c;z-index:9999;display:flex;align-items:center;justify-content:center;animation:fadeInOverlay .2s ease-out}.kit-modal{background-color:var(--bg-color);position:relative;max-width:420px;width:100%;min-height:200px;box-shadow:0 10px 30px #00000026;animation:fadeInModal .2s ease-out}.kit-modal>div{width:auto}.kit-modal-close{margin:-4px -16px 0 0}.kit-modal--standard{border-radius:var(--corners-standard)}.kit-modal--round{border-radius:var(--corners-round)}.kit-modal--square{border-radius:var(--corners-square)}@keyframes fadeInOverlay{0%{opacity:0}to{opacity:1}}@keyframes fadeInModal{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}
@@ -1,7 +0,0 @@
1
- import{j as e}from"./jsx-runtime-u17CrQMm.js";import{r as n}from"./iframe-D7bwIom8.js";import{a as d,B as b}from"./Button-DBH2W8EG.js";import"./Input-D117xj27.js";import"./Toggle-DiHagfS3.js";import"./preload-helper-PPVm8Dsz.js";const p=({width:a="auto",corners:t="standard",background:f="blackout",isOpen:l=!1,closeButton:k=!0,title:x="",cls:y="",children:v,onClose:u,...g})=>{const c=n.useRef(null),[i,m]=n.useState(l);function r(){m(!1),u&&u()}return n.useEffect(()=>{m(l)},[l]),n.useEffect(()=>{if(!i)return;function o(w){w.key==="Escape"&&r()}document.addEventListener("keydown",o);const h=document.body.style.overflow;return document.body.style.overflow="hidden",()=>{document.body.style.overflow=h,document.removeEventListener("keydown",o)}},[i,r]),e.jsx(e.Fragment,{children:i?e.jsx("div",{className:"kit-modal--overlay",onClick:o=>{o.target===c.current&&r()},ref:c,children:e.jsx("div",{className:["kit-modal",`kit-modal--${t}`,`kit-modal--bg-${f}`,y].join(" "),style:{width:isNaN(a)?"fit-content":`${a}px`},...g,children:e.jsxs(d,{padding:[8,16],direction:"column",children:[e.jsx(d,{justify:"end",margin:[0,-16],children:e.jsx(b,{type:"transparent",size:"large",onClick:r,iconPath:"svg-lib/cross-svgrepo-com.svg",cls:"kit-modal-close"})}),e.jsx(d,{justify:"start",children:v})]})})}):e.jsx(e.Fragment,{})})};p.__docgenInfo={description:"Элемент модалки",methods:[],displayName:"Modal",props:{width:{required:!1,tsType:{name:"union",raw:"number | 'auto'",elements:[{name:"number"},{name:"literal",value:"'auto'"}]},description:"Ширина",defaultValue:{value:"'auto'",computed:!1}},corners:{required:!1,tsType:{name:"union",raw:"'square' | 'standard' | 'round'",elements:[{name:"literal",value:"'square'"},{name:"literal",value:"'standard'"},{name:"literal",value:"'round'"}]},description:"Углы прямые / Закругленные / Круглые",defaultValue:{value:"'standard'",computed:!1}},background:{required:!1,tsType:{name:"union",raw:"'blackout' | 'blur'",elements:[{name:"literal",value:"'blackout'"},{name:"literal",value:"'blur'"}]},description:"Тип непрозрачности фона",defaultValue:{value:"'blackout'",computed:!1}},children:{required:!0,tsType:{name:"union",raw:"ReactNode | string",elements:[{name:"ReactNode"},{name:"string"}]},description:"Содержимое контейнера *"},cls:{required:!1,tsType:{name:"string"},description:"Дополнительные классы",defaultValue:{value:"''",computed:!1}},onClose:{required:!0,tsType:{name:"signature",type:"function",raw:"() => void",signature:{arguments:[],return:{name:"void"}}},description:"Операции при закрытии"},isOpen:{required:!1,tsType:{name:"boolean"},description:"Окно открыто",defaultValue:{value:"false",computed:!1}},title:{required:!1,tsType:{name:"string"},description:"Title",defaultValue:{value:"''",computed:!1}},closeButton:{required:!1,tsType:{name:"boolean"},description:"Кнопка закрытия в углу",defaultValue:{value:"true",computed:!1}}}};const V={title:"Modal",component:p,parameters:{layout:"centered"},tags:["autodocs"],decorators:[a=>{const t=document.createElement("script");return t.src="/style_setter.js",t.type="module",document.head.appendChild(t),a()}]},s={args:{width:400,isOpen:!0,children:"This is modal window! You can close it."}};s.parameters={...s.parameters,docs:{...s.parameters?.docs,source:{originalSource:`{
2
- args: {
3
- width: 400,
4
- isOpen: true,
5
- children: 'This is modal window! You can close it.'
6
- }
7
- }`,...s.parameters?.docs?.source}}};const B=["ModalWindow"];export{s as ModalWindow,B as __namedExportsOrder,V as default};
@@ -1 +0,0 @@
1
- @charset "UTF-8";:root{--font-family: "Nunito Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;--text-color: #2e3242;--text-color-secondary: #94a3b8;--error-color: #ef4949;--bg-color: #fff;--primary-btn-color: #7C3AED;--secondary-btn-color: #FFFFFF;--hover-btn-color: #6D28D9;--corners-standard: .65em;--corners-round: 3em;--corners-square: 0}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box;font-family:var(--font-family)}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}.kit-toggle{display:inline-flex;align-items:center;gap:12px;cursor:pointer;-webkit-user-select:none;user-select:none;font-family:system-ui,sans-serif}.kit-toggle--input{position:absolute;opacity:0;pointer-events:none}.kit-toggle--slider{position:relative;border-radius:999px;transition:background .25s ease;background:#d1d5db}.kit-toggle--slider:before{content:"";position:absolute;top:3px;left:3px;border-radius:50%;transition:transform .25s ease,box-shadow .25s ease;box-shadow:0 2px 6px #00000026;background:#fff}.kit-toggle--input:checked+.kit-toggle--slider{background:var(--primary-btn-color)}.kit-toggle--input:checked+.kit-toggle--slider:before{transform:translate(20px)}.kit-toggle--input:focus-visible+.kit-toggle--slider{outline:2px solid var(--primary-btn-color);outline-offset:2px}.kit-toggle--disabled{opacity:.5;pointer-events:none;-webkit-user-select:none;user-select:none}.kit-toggle--disabled .kit-toggle--slider{background:#9ca3af}.kit-toggle--label{color:var(--text-color)}.kit-toggle--small>.kit-toggle--slider{width:38px;height:18px}.kit-toggle--small>.kit-toggle--slider:before{width:12px;height:12px}.kit-toggle--small>.kit-toggle--label{font-size:14px}.kit-toggle--medium>.kit-toggle--slider{width:42px;height:22px}.kit-toggle--medium>.kit-toggle--slider:before{width:16px;height:16px}.kit-toggle--medium>.kit-toggle--label{font-size:16px}.kit-toggle--large>.kit-toggle--slider{width:46px;height:26px}.kit-toggle--large>.kit-toggle--slider:before{width:20px;height:20px}.kit-toggle--large>.kit-toggle--label{font-size:18px}
@@ -1 +0,0 @@
1
- import{j as e}from"./jsx-runtime-u17CrQMm.js";import{r as o}from"./iframe-D7bwIom8.js";const u=({size:s="medium",disabled:a=!1,cls:i="",text:l="",onClick:r,...d})=>{const t=o.useId();return e.jsxs("label",{htmlFor:t,className:["kit-toggle",a?"kit-toggle--disabled":"",`kit-toggle--${s}`,i].join(" "),children:[e.jsx("input",{id:t,type:"checkbox",className:"kit-toggle--input",disabled:a,defaultChecked:!1,onChange:n=>r?.(n.target.checked)}),e.jsx("span",{className:"kit-toggle--slider","aria-hidden":"true"}),l&&e.jsx("span",{className:"kit-toggle--label",children:l})]})};u.__docgenInfo={description:"Элемент кнопки",methods:[],displayName:"Toggle",props:{size:{required:!1,tsType:{name:"union",raw:"'small' | 'medium' | 'large'",elements:[{name:"literal",value:"'small'"},{name:"literal",value:"'medium'"},{name:"literal",value:"'large'"}]},description:"Маленькая / Средняя / Большая",defaultValue:{value:"'medium'",computed:!1}},disabled:{required:!1,tsType:{name:"boolean"},description:"Доступность переключателя",defaultValue:{value:"false",computed:!1}},text:{required:!1,tsType:{name:"string"},description:"Текст переключателя",defaultValue:{value:"''",computed:!1}},onClick:{required:!1,tsType:{name:"signature",type:"function",raw:"(e?: MouseEvent) => void",signature:{arguments:[{type:{name:"MouseEvent"},name:"e"}],return:{name:"void"}}},description:"Событие при нажатии"},cls:{required:!1,tsType:{name:"string"},description:"Дополнительные классы",defaultValue:{value:"''",computed:!1}}}};export{u as T};
@@ -1,9 +0,0 @@
1
- import{T as t}from"./Toggle-DiHagfS3.js";import"./jsx-runtime-u17CrQMm.js";import"./iframe-D7bwIom8.js";import"./preload-helper-PPVm8Dsz.js";const m={title:"Example Toggle",component:t,parameters:{layout:"centered"},tags:["autodocs"],decorators:[s=>{const o=document.createElement("script");return o.src="/style_setter.js",o.type="module",document.head.appendChild(o),s()}]},e={args:{text:"subscribe",size:"medium",disabled:!1,cls:"",onClick:()=>console.log("CustomToggle")}};e.parameters={...e.parameters,docs:{...e.parameters?.docs,source:{originalSource:`{
2
- args: {
3
- text: 'subscribe',
4
- size: 'medium',
5
- disabled: false,
6
- cls: '',
7
- onClick: () => console.log('CustomToggle')
8
- }
9
- }`,...e.parameters?.docs?.source}}};const n=["CustomToggle"];export{e as CustomToggle,n as __namedExportsOrder,m as default};