@velumweb/ui-kit 1.0.1 → 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.
- package/dist/components/Button/Button.d.ts +32 -32
- package/dist/components/Button/Button.stories.d.ts +15 -15
- package/dist/components/Button/index.d.ts +1 -1
- package/dist/components/Container/Box.d.ts +33 -33
- package/dist/components/Container/index.d.ts +1 -1
- package/dist/components/Input/Input.d.ts +38 -38
- package/dist/components/Input/Input.stories.d.ts +14 -14
- package/dist/components/Input/index.d.ts +1 -1
- package/dist/components/Modal/Modal.d.ts +29 -29
- package/dist/components/Modal/Modal.stories.d.ts +13 -13
- package/dist/components/Modal/index.d.ts +1 -1
- package/dist/components/Toggle/Toggle.d.ts +18 -18
- package/dist/components/Toggle/Toggle.stories.d.ts +13 -13
- package/dist/components/Toggle/index.d.ts +1 -1
- package/dist/components/index.d.ts +6 -5
- package/dist/index.d.ts +2 -2
- package/dist/index.es.js +583 -569
- package/dist/index.es2.js +1 -1
- package/dist/theme.d.ts +2 -0
- package/dist/ui-kit.css +1 -1
- package/package.json +8 -3
- package/readme.md +19 -2
- package/.storybook/main.ts +0 -14
- package/.storybook/manager.ts +0 -32
- package/.storybook/preview.ts +0 -14
- package/CNAME +0 -1
- package/docs/CNAME +0 -1
- package/docs/assets/Button-CfaZpHIg.css +0 -1
- package/docs/assets/Button-DBH2W8EG.js +0 -1
- package/docs/assets/Button.stories-uPwy2cWr.js +0 -34
- package/docs/assets/Input-RjFZkyU_.css +0 -1
- package/docs/assets/Input.stories-BWPjJb-G.js +0 -21
- package/docs/assets/Modal-CWKTs3Ep.css +0 -1
- package/docs/assets/Modal.stories-eOcMgB-u.js +0 -7
- package/docs/assets/Toggle-BmcBtVup.css +0 -1
- package/docs/assets/Toggle.stories-MYi2irTa.js +0 -9
- package/docs/assets/iframe-CssGlRqL.js +0 -1062
- package/docs/assets/jsx-runtime-u17CrQMm.js +0 -1
- package/docs/assets/preload-helper-PPVm8Dsz.js +0 -1
- package/docs/assets/react-18-BQzlCVST.js +0 -9
- package/docs/assets/svg-lib/3-dots-horizontal-svgrepo-com.svg +0 -5
- package/docs/assets/svg-lib/about-empty-page-svgrepo-com.svg +0 -5
- package/docs/assets/svg-lib/alert-square.svg +0 -26
- package/docs/assets/svg-lib/arrow-bottom-svgrepo-com.svg +0 -9
- package/docs/assets/svg-lib/arrow-left-svgrepo-com.svg +0 -5
- package/docs/assets/svg-lib/arrow-right-svgrepo-com.svg +0 -5
- package/docs/assets/svg-lib/arrow-top-svgrepo-com.svg +0 -9
- package/docs/assets/svg-lib/checkmark-svgrepo-com.svg +0 -5
- package/docs/assets/svg-lib/clock-svgrepo-com.svg +0 -5
- package/docs/assets/svg-lib/cross-svgrepo-com.svg +0 -12
- package/docs/assets/svg-lib/download-svgrepo-com.svg +0 -5
- package/docs/assets/svg-lib/edit-pen-svgrepo-com.svg +0 -5
- package/docs/assets/svg-lib/favorite-svgrepo-com.svg +0 -5
- package/docs/assets/svg-lib/forbiden-svgrepo-com.svg +0 -9
- package/docs/assets/svg-lib/input-svgrepo-com.svg +0 -5
- package/docs/assets/svg-lib/link-svgrepo-com.svg +0 -5
- package/docs/assets/svg-lib/messages-alert-svgrepo-com.svg +0 -6
- package/docs/assets/svg-lib/messages-svgrepo-com.svg +0 -5
- package/docs/assets/svg-lib/mic-off-svgrepo-com.svg +0 -6
- package/docs/assets/svg-lib/mic-svgrepo-com.svg +0 -5
- package/docs/assets/svg-lib/music-svgrepo-com.svg +0 -6
- package/docs/assets/svg-lib/next-long-arrow-right-svgrepo-com.svg +0 -5
- package/docs/assets/svg-lib/notification-alert-svgrepo-com.svg +0 -6
- package/docs/assets/svg-lib/notification-svgrepo-com.svg +0 -5
- package/docs/assets/svg-lib/notifications-off-svgrepo-com.svg +0 -6
- package/docs/assets/svg-lib/party-simple-colored-svgrepo-com.svg +0 -11
- package/docs/assets/svg-lib/pattern-circles-svgrepo-com.svg +0 -5
- package/docs/assets/svg-lib/play-button-simple-svgrepo-com.svg +0 -5
- package/docs/assets/svg-lib/plus-outlined-svgrepo-com.svg +0 -5
- package/docs/assets/svg-lib/previous-long-arrow-left-svgrepo-com.svg +0 -5
- package/docs/assets/svg-lib/queue-listing-cards-svgrepo-com.svg +0 -6
- package/docs/assets/svg-lib/queue-remove-svgrepo-com.svg +0 -5
- package/docs/assets/svg-lib/recent-svgrepo-com.svg +0 -5
- package/docs/assets/svg-lib/remove-svgrepo-com.svg +0 -5
- package/docs/assets/svg-lib/repeat-svgrepo-com.svg +0 -5
- package/docs/assets/svg-lib/schedule-add-svgrepo-com.svg +0 -5
- package/docs/assets/svg-lib/schedule-alert-svgrepo-com.svg +0 -6
- package/docs/assets/svg-lib/schedule-remove-svgrepo-com.svg +0 -6
- package/docs/assets/svg-lib/schedule-svgrepo-com.svg +0 -5
- package/docs/assets/svg-lib/search-svgrepo-com.svg +0 -5
- package/docs/assets/svg-lib/session-abandon-svgrepo-com.svg +0 -5
- package/docs/assets/svg-lib/session-join-svgrepo-com.svg +0 -5
- package/docs/assets/svg-lib/session-leave-svgrepo-com.svg +0 -5
- package/docs/assets/svg-lib/settings-svgrepo-com.svg +0 -5
- package/docs/assets/svg-lib/share-svgrepo-com.svg +0 -5
- package/docs/assets/svg-lib/sound-off-svgrepo-com.svg +0 -6
- package/docs/assets/svg-lib/sound-svgrepo-com.svg +0 -5
- package/docs/assets/svg-lib/spectacles-svgrepo-com.svg +0 -5
- package/docs/assets/svg-lib/star-svgrepo-com.svg +0 -5
- package/docs/assets/svg-lib/user-avatar-with-alert-svgrepo-com.svg +0 -6
- package/docs/assets/svg-lib/user-banned-svgrepo-com.svg +0 -6
- package/docs/assets/svg-lib/user-svgrepo-com.svg +0 -5
- package/docs/assets/svglist.png +0 -0
- package/docs/components/Button/Button.d.ts +0 -32
- package/docs/components/Button/Button.stories.d.ts +0 -15
- package/docs/components/Button/index.d.ts +0 -1
- package/docs/components/Container/Box.d.ts +0 -33
- package/docs/components/Container/index.d.ts +0 -1
- package/docs/components/Input/Input.d.ts +0 -38
- package/docs/components/Input/Input.stories.d.ts +0 -14
- package/docs/components/Input/index.d.ts +0 -1
- package/docs/components/Modal/Modal.d.ts +0 -29
- package/docs/components/Modal/Modal.stories.d.ts +0 -13
- package/docs/components/Modal/index.d.ts +0 -1
- package/docs/components/Toggle/Toggle.d.ts +0 -18
- package/docs/components/Toggle/Toggle.stories.d.ts +0 -13
- package/docs/components/Toggle/index.d.ts +0 -1
- package/docs/components/index.d.ts +0 -5
- package/docs/favicon-wrapper.svg +0 -46
- package/docs/favicon.svg +0 -1
- package/docs/iframe.html +0 -686
- package/docs/index.d.ts +0 -1
- package/docs/index.html +0 -137
- package/docs/index.json +0 -1
- package/docs/makeColors.ts +0 -37
- package/docs/notes.txt +0 -11
- package/docs/nunito-sans-bold-italic.woff2 +0 -0
- package/docs/nunito-sans-bold.woff2 +0 -0
- package/docs/nunito-sans-italic.woff2 +0 -0
- package/docs/nunito-sans-regular.woff2 +0 -0
- package/docs/project.json +0 -1
- package/docs/sb-addons/storybook-1/manager-bundle.js +0 -3
- package/docs/sb-addons/storybook-core-server-presets-0/common-manager-bundle.js +0 -628
- package/docs/sb-common-assets/favicon-wrapper.svg +0 -46
- package/docs/sb-common-assets/favicon.svg +0 -1
- package/docs/sb-common-assets/nunito-sans-bold-italic.woff2 +0 -0
- package/docs/sb-common-assets/nunito-sans-bold.woff2 +0 -0
- package/docs/sb-common-assets/nunito-sans-italic.woff2 +0 -0
- package/docs/sb-common-assets/nunito-sans-regular.woff2 +0 -0
- package/docs/sb-manager/globals-runtime.js +0 -75597
- package/docs/sb-manager/globals.js +0 -24
- package/docs/sb-manager/manager-stores.js +0 -23
- package/docs/sb-manager/runtime.js +0 -19698
- package/docs/style_setter.js +0 -19
- package/docs/vite-inject-mocker-entry.js +0 -2
- package/index.html +0 -7
- package/public/assets/svg-lib/3-dots-horizontal-svgrepo-com.svg +0 -5
- package/public/assets/svg-lib/about-empty-page-svgrepo-com.svg +0 -5
- package/public/assets/svg-lib/alert-square.svg +0 -26
- package/public/assets/svg-lib/arrow-bottom-svgrepo-com.svg +0 -9
- package/public/assets/svg-lib/arrow-left-svgrepo-com.svg +0 -5
- package/public/assets/svg-lib/arrow-right-svgrepo-com.svg +0 -5
- package/public/assets/svg-lib/arrow-top-svgrepo-com.svg +0 -9
- package/public/assets/svg-lib/checkmark-svgrepo-com.svg +0 -5
- package/public/assets/svg-lib/clock-svgrepo-com.svg +0 -5
- package/public/assets/svg-lib/cross-svgrepo-com.svg +0 -12
- package/public/assets/svg-lib/download-svgrepo-com.svg +0 -5
- package/public/assets/svg-lib/edit-pen-svgrepo-com.svg +0 -5
- package/public/assets/svg-lib/favorite-svgrepo-com.svg +0 -5
- package/public/assets/svg-lib/forbiden-svgrepo-com.svg +0 -9
- package/public/assets/svg-lib/input-svgrepo-com.svg +0 -5
- package/public/assets/svg-lib/link-svgrepo-com.svg +0 -5
- package/public/assets/svg-lib/messages-alert-svgrepo-com.svg +0 -6
- package/public/assets/svg-lib/messages-svgrepo-com.svg +0 -5
- package/public/assets/svg-lib/mic-off-svgrepo-com.svg +0 -6
- package/public/assets/svg-lib/mic-svgrepo-com.svg +0 -5
- package/public/assets/svg-lib/music-svgrepo-com.svg +0 -6
- package/public/assets/svg-lib/next-long-arrow-right-svgrepo-com.svg +0 -5
- package/public/assets/svg-lib/notification-alert-svgrepo-com.svg +0 -6
- package/public/assets/svg-lib/notification-svgrepo-com.svg +0 -5
- package/public/assets/svg-lib/notifications-off-svgrepo-com.svg +0 -6
- package/public/assets/svg-lib/party-simple-colored-svgrepo-com.svg +0 -11
- package/public/assets/svg-lib/pattern-circles-svgrepo-com.svg +0 -5
- package/public/assets/svg-lib/play-button-simple-svgrepo-com.svg +0 -5
- package/public/assets/svg-lib/plus-outlined-svgrepo-com.svg +0 -5
- package/public/assets/svg-lib/previous-long-arrow-left-svgrepo-com.svg +0 -5
- package/public/assets/svg-lib/queue-listing-cards-svgrepo-com.svg +0 -6
- package/public/assets/svg-lib/queue-remove-svgrepo-com.svg +0 -5
- package/public/assets/svg-lib/recent-svgrepo-com.svg +0 -5
- package/public/assets/svg-lib/remove-svgrepo-com.svg +0 -5
- package/public/assets/svg-lib/repeat-svgrepo-com.svg +0 -5
- package/public/assets/svg-lib/schedule-add-svgrepo-com.svg +0 -5
- package/public/assets/svg-lib/schedule-alert-svgrepo-com.svg +0 -6
- package/public/assets/svg-lib/schedule-remove-svgrepo-com.svg +0 -6
- package/public/assets/svg-lib/schedule-svgrepo-com.svg +0 -5
- package/public/assets/svg-lib/search-svgrepo-com.svg +0 -5
- package/public/assets/svg-lib/session-abandon-svgrepo-com.svg +0 -5
- package/public/assets/svg-lib/session-join-svgrepo-com.svg +0 -5
- package/public/assets/svg-lib/session-leave-svgrepo-com.svg +0 -5
- package/public/assets/svg-lib/settings-svgrepo-com.svg +0 -5
- package/public/assets/svg-lib/share-svgrepo-com.svg +0 -5
- package/public/assets/svg-lib/sound-off-svgrepo-com.svg +0 -6
- package/public/assets/svg-lib/sound-svgrepo-com.svg +0 -5
- package/public/assets/svg-lib/spectacles-svgrepo-com.svg +0 -5
- package/public/assets/svg-lib/star-svgrepo-com.svg +0 -5
- package/public/assets/svg-lib/user-avatar-with-alert-svgrepo-com.svg +0 -6
- package/public/assets/svg-lib/user-banned-svgrepo-com.svg +0 -6
- package/public/assets/svg-lib/user-svgrepo-com.svg +0 -5
- package/public/assets/svglist.png +0 -0
- package/src/components/Button/Button.stories.ts +0 -64
- package/src/components/Button/Button.tsx +0 -99
- package/src/components/Button/button.scss +0 -147
- package/src/components/Button/index.ts +0 -1
- package/src/components/Container/Box.tsx +0 -83
- package/src/components/Container/box.scss +0 -41
- package/src/components/Container/index.ts +0 -1
- package/src/components/Input/Input.stories.ts +0 -49
- package/src/components/Input/Input.tsx +0 -172
- package/src/components/Input/index.ts +0 -1
- package/src/components/Input/input.scss +0 -69
- package/src/components/Modal/Modal.stories.ts +0 -33
- package/src/components/Modal/Modal.tsx +0 -125
- package/src/components/Modal/index.ts +0 -1
- package/src/components/Modal/modal.scss +0 -54
- package/src/components/Toggle/Toggle.stories.ts +0 -35
- package/src/components/Toggle/Toggle.tsx +0 -60
- package/src/components/Toggle/index.ts +0 -1
- package/src/components/Toggle/toggle.scss +0 -97
- package/src/components/index.ts +0 -5
- package/src/main.scss +0 -46
- package/src/style.ts +0 -1
- package/tsconfig.json +0 -15
- package/utils/makeColors.ts +0 -37
- package/utils/notes.txt +0 -11
- package/utils/style_setter.js +0 -19
- package/vite.config.ts +0 -42
package/dist/index.es2.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
|
package/dist/theme.d.ts
ADDED
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(--
|
|
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,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@velumweb/ui-kit",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.2",
|
|
4
4
|
"description": "uikit for velum projects",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"style": "dist/style.css",
|
|
@@ -8,6 +8,11 @@
|
|
|
8
8
|
"*.css",
|
|
9
9
|
"*.scss"
|
|
10
10
|
],
|
|
11
|
+
"files": [
|
|
12
|
+
"dist",
|
|
13
|
+
"readme.md",
|
|
14
|
+
"changelog.md"
|
|
15
|
+
],
|
|
11
16
|
"module": "dist/index.es.js",
|
|
12
17
|
"scripts": {
|
|
13
18
|
"storybook": "storybook dev -p 6006",
|
|
@@ -16,8 +21,8 @@
|
|
|
16
21
|
"build-all": "npm run build && npm run build-storybook",
|
|
17
22
|
"update-patch": "npm version patch",
|
|
18
23
|
"update-minor": "npm version minor",
|
|
19
|
-
"update-bugfix": "npm run update-patch && build-all && npm publish",
|
|
20
|
-
"update-feature": "npm run update-minor && build-all && npm publish"
|
|
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"
|
|
21
26
|
},
|
|
22
27
|
"keywords": [],
|
|
23
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
|
+
```
|
package/.storybook/main.ts
DELETED
|
@@ -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;
|
package/.storybook/manager.ts
DELETED
|
@@ -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
|
-
});
|
package/.storybook/preview.ts
DELETED
package/CNAME
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
uikit.velumweb.ru
|
package/docs/CNAME
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
uikit.velumweb.ru
|
|
@@ -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
|
-
@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{j as e}from"./jsx-runtime-u17CrQMm.js";import{r as p}from"./iframe-CssGlRqL.js";import{B as b}from"./Button-DBH2W8EG.js";import"./preload-helper-PPVm8Dsz.js";const T=({value:u="",type:t="text",corners:k="standard",disabled:q=!1,label:c="",bottomText:m="",placeholder:j="",errorText:w="",live:o=!1,isSearch:V=!1,mask:f,width:v,onChange:a,cls:S,...Y})=>{const[s,x]=p.useState(u),[n,g]=p.useState(""),d=p.useId(),I=y=>{let r=y.target.value;t==="number"&&(r=r.toString().replace(/\D/g,"")),f&&!f.test(r.toString())?g(w||"Некорректное значение"):g(""),x(r),o&&a&&a(r)},N=()=>{x("")},h={value:s,placeholder:j,onChange:I,onBlur:y=>{!o&&a&&a(s)},className:["kit-input",`kit-input--${k}`,q?"kit-input--disabled":"",n?"kit-input--error":"",S].join(" ").trim()};return e.jsxs("div",{className:"kit-input--wrapper",children:[c&&e.jsx("div",{className:"w5rem",children:e.jsx("label",{for:d,className:"kit-input--label kit-input-secondary-text",children:c})}),e.jsxs("div",{className:"kit-input--container",style:{width:v?`${v}px`:"auto"},children:[t==="textarea"?e.jsx("textarea",{id:d,...h}):e.jsx("input",{...h,type:t,id:d}),e.jsxs("div",{className:"kit-input--icon-container",children:[s&&e.jsx(b,{type:"transparent",iconPath:"svg-lib/input-svgrepo-com.svg",size:"small",onClick:N,cls:"kit-input--icon"}),V&&e.jsx(b,{type:"transparent",iconPath:"svg-lib/search-svgrepo-com.svg",size:"small",staticIcon:o,onClick:()=>a&&a(s),cls:"kit-input--icon"})]})]}),!n&&m&&e.jsx("div",{className:"kit-input-bottomtext kit-input-secondary-text",children:m}),n&&e.jsx("div",{className:"kit-input-errortext kit-input-secondary-text",children:n})]})};T.__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:"Дополнительные классы"}}};const z={title:"Example Input",component:T,parameters:{layout:"centered"},tags:["autodocs"],decorators:[u=>{const t=document.createElement("script");return t.src="/style_setter.js",t.type="module",document.head.appendChild(t),u()}]},l={args:{label:"Год вашего рождения",value:"2026",type:"text",bottomText:"Пишите только цифры",placeholder:"Год в формате YYYY",errorText:"Допустимы только цифры",mask:/^[0-9]+$/,width:300}},i={args:{value:"",type:"text",placeholder:"Найти по имени или году",width:250,live:!0,isSearch:!0}};l.parameters={...l.parameters,docs:{...l.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
|
-
}`,...l.parameters?.docs?.source}}};i.parameters={...i.parameters,docs:{...i.parameters?.docs,source:{originalSource:`{
|
|
13
|
-
args: {
|
|
14
|
-
value: '',
|
|
15
|
-
type: 'text',
|
|
16
|
-
placeholder: 'Найти по имени или году',
|
|
17
|
-
width: 250,
|
|
18
|
-
live: true,
|
|
19
|
-
isSearch: true
|
|
20
|
-
}
|
|
21
|
-
}`,...i.parameters?.docs?.source}}};const F=["TextField","Search"];export{i as Search,l as TextField,F as __namedExportsOrder,z 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 o}from"./iframe-CssGlRqL.js";import{a as i,B as b}from"./Button-DBH2W8EG.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=o.useRef(null),[d,m]=o.useState(l);function n(){m(!1),u&&u()}return o.useEffect(()=>{m(l)},[l]),o.useEffect(()=>{if(!d)return;function r(w){w.key==="Escape"&&n()}document.addEventListener("keydown",r);const h=document.body.style.overflow;return document.body.style.overflow="hidden",()=>{document.body.style.overflow=h,document.removeEventListener("keydown",r)}},[d,n]),e.jsx(e.Fragment,{children:d?e.jsx("div",{className:"kit-modal--overlay",onClick:r=>{r.target===c.current&&n()},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(i,{padding:[8,16],direction:"column",children:[e.jsx(i,{justify:"end",margin:[0,-16],children:e.jsx(b,{type:"transparent",size:"large",onClick:n,iconPath:"svg-lib/cross-svgrepo-com.svg",cls:"kit-modal-close"})}),e.jsx(i,{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 M={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 N=["ModalWindow"];export{s as ModalWindow,N as __namedExportsOrder,M 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,9 +0,0 @@
|
|
|
1
|
-
import{j as s}from"./jsx-runtime-u17CrQMm.js";import{r as m}from"./iframe-CssGlRqL.js";import"./preload-helper-PPVm8Dsz.js";const r=({size:a="medium",disabled:e=!1,cls:n="",text:l="",onClick:i,...u})=>{const o=m.useId();return s.jsxs("label",{htmlFor:o,className:["kit-toggle",e?"kit-toggle--disabled":"",`kit-toggle--${a}`,n].join(" "),children:[s.jsx("input",{id:o,type:"checkbox",className:"kit-toggle--input",disabled:e,defaultChecked:!1,onChange:d=>i?.(d.target.checked)}),s.jsx("span",{className:"kit-toggle--slider","aria-hidden":"true"}),l&&s.jsx("span",{className:"kit-toggle--label",children:l})]})};r.__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}}}};const f={title:"Example Toggle",component:r,parameters:{layout:"centered"},tags:["autodocs"],decorators:[a=>{const e=document.createElement("script");return e.src="/style_setter.js",e.type="module",document.head.appendChild(e),a()}]},t={args:{text:"subscribe",size:"medium",disabled:!1,cls:"",onClick:()=>console.log("CustomToggle")}};t.parameters={...t.parameters,docs:{...t.parameters?.docs,source:{originalSource:`{
|
|
2
|
-
args: {
|
|
3
|
-
text: 'subscribe',
|
|
4
|
-
size: 'medium',
|
|
5
|
-
disabled: false,
|
|
6
|
-
cls: '',
|
|
7
|
-
onClick: () => console.log('CustomToggle')
|
|
8
|
-
}
|
|
9
|
-
}`,...t.parameters?.docs?.source}}};const x=["CustomToggle"];export{t as CustomToggle,x as __namedExportsOrder,f as default};
|