sprintify-ui 0.0.8 → 0.0.10

package/dist/style.css

@@ -1,4 +1,4 @@
 @charset "UTF-8";.spinner[data-v-7d66ba2e]{animation:rotate-7d66ba2e 1s linear infinite;-webkit-animation:rotate-7d66ba2e 1s linear infinite;-moz-animation:rotate-7d66ba2e 1s linear infinite}@keyframes rotate-7d66ba2e{to{transform:rotate(360deg)}}.path[data-v-7d66ba2e]{stroke-dasharray:170;stroke-dashoffset:20}.th[data-v-c943591d]{background-color:rgb(248 250 252 / var(--tw-bg-opacity));position:sticky;top:0px;z-index:10;border-bottom-width:1px;--tw-border-opacity: 1;border-color:rgb(203 213 225 / var(--tw-border-opacity));--tw-bg-opacity: .75;--tw-backdrop-blur: blur(8px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}/*!
  * Pikaday
  * Copyright © 2014 David Bushell | BSD & MIT license | https://dbushell.com/
- */.pika-single{z-index:9999;display:block;position:relative;color:#333;background:#fff;border:1px solid #ccc;border-bottom-color:#bbb;font-family:Helvetica Neue,Helvetica,Arial,sans-serif}.pika-single:before,.pika-single:after{content:" ";display:table}.pika-single:after{clear:both}.pika-single.is-hidden{display:none}.pika-single.is-bound{position:absolute;box-shadow:0 5px 15px -5px #00000080}.pika-lendar{float:left;width:240px;margin:8px}.pika-title{position:relative;text-align:center}.pika-label{display:inline-block;position:relative;z-index:9999;overflow:hidden;margin:0;padding:5px 3px;font-size:14px;line-height:20px;font-weight:700;background-color:#fff}.pika-title select{cursor:pointer;position:absolute;z-index:9998;margin:0;left:0;top:5px;opacity:0}.pika-prev,.pika-next{display:block;cursor:pointer;position:relative;outline:none;border:0;padding:0;width:20px;height:30px;text-indent:20px;white-space:nowrap;overflow:hidden;background-color:transparent;background-position:center center;background-repeat:no-repeat;background-size:75% 75%;opacity:.5}.pika-prev:hover,.pika-next:hover{opacity:1}.pika-prev,.is-rtl .pika-next{float:left;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAUklEQVR42u3VMQoAIBADQf8Pgj+OD9hG2CtONJB2ymQkKe0HbwAP0xucDiQWARITIDEBEnMgMQ8S8+AqBIl6kKgHiXqQqAeJepBo/z38J/U0uAHlaBkBl9I4GwAAAABJRU5ErkJggg==)}.pika-next,.is-rtl .pika-prev{float:right;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAU0lEQVR42u3VOwoAMAgE0dwfAnNjU26bYkBCFGwfiL9VVWoO+BJ4Gf3gtsEKKoFBNTCoCAYVwaAiGNQGMUHMkjGbgjk2mIONuXo0nC8XnCf1JXgArVIZAQh5TKYAAAAASUVORK5CYII=)}.pika-select{display:inline-block}.pika-table{width:100%;border-collapse:collapse;border-spacing:0;border:0}.pika-table th,.pika-table td{width:14.285714285714286%;padding:0}.pika-table th{color:#999;font-size:12px;line-height:25px;font-weight:700;text-align:center}.pika-button{cursor:pointer;display:block;box-sizing:border-box;-moz-box-sizing:border-box;outline:none;border:0;margin:0;width:100%;padding:5px;color:#666;font-size:12px;line-height:15px;text-align:right;background:#f5f5f5;height:initial}.pika-week{font-size:11px;color:#999}.is-today .pika-button{color:#3af;font-weight:700}.is-selected .pika-button,.has-event .pika-button{color:#fff;font-weight:700;background:#33aaff;box-shadow:inset 0 1px 3px #178fe5;border-radius:3px}.has-event .pika-button{background:#005da9;box-shadow:inset 0 1px 3px #0076c9}.is-disabled .pika-button,.is-inrange .pika-button{background:#D5E9F7}.is-startrange .pika-button{color:#fff;background:#6CB31D;box-shadow:none;border-radius:3px}.is-endrange .pika-button{color:#fff;background:#33aaff;box-shadow:none;border-radius:3px}.is-disabled .pika-button{pointer-events:none;cursor:default;color:#999;opacity:.3}.is-outside-current-month .pika-button{color:#999;opacity:.3}.is-selection-disabled{pointer-events:none;cursor:default}.pika-button:hover,.pika-row.pick-whole-week:hover .pika-button{color:#fff;background:#ff8000;box-shadow:none;border-radius:3px}.pika-table abbr{border-bottom:none;cursor:help}.pikaday-white{--backgroundColor: #ffffff;--textColor: #718096;--currentDateTextColor: #3182ce;--selectedDateBackgroundColor: #3182ce;--selectedDateTextColor: #ffffff;--labelTextColor: #4a5568;--weekDaysTextColor: #a0aec0;font-family:inherit;background-color:var(--backgroundColor);padding:.5rem;z-index:2000;margin:6px 0 0;--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);border-radius:.5rem}.pikaday-white .pika-title{width:100%;text-align:center;display:flex;justify-content:flex-start;margin-bottom:5px}.pikaday-white .pika-prev,.pikaday-white .pika-next{position:absolute;outline:none;padding:0;width:26px;height:26px;top:-1px;display:inline-block;margin-top:0;cursor:pointer;text-indent:-9999px;white-space:nowrap;overflow:hidden;background-color:transparent;background-position:center center;background-repeat:no-repeat;opacity:.7}.pikaday-white .pika-prev:hover,.pikaday-white .pika-next:hover{opacity:1}.pikaday-white .pika-prev{right:30px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23a0aec0'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M15 19l-7-7 7-7'%3E%3C/path%3E%3C/svg%3E")}.pikaday-white .pika-next{right:2px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23a0aec0'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M9 5l7 7-7 7'%3E%3C/path%3E%3C/svg%3E")}.pika-prev.is-disabled,.pika-next.is-disabled{cursor:default;opacity:.2}.pikaday-white .pika-label{margin-right:.375rem;border-radius:.25rem;border-width:1px;--tw-border-opacity: 1;border-color:rgb(203 213 225 / var(--tw-border-opacity));padding:.25rem .5rem;font-size:14px;font-weight:500;line-height:1}.pikaday-white .pika-label{position:relative}.pikaday-white .pika-select-month,.pikaday-white .pika-select-year{width:100%;cursor:pointer;position:absolute;z-index:9998;margin:0;left:0;top:0;opacity:0;padding:0}.pikaday-white table{width:100%;border-collapse:collapse}.pikaday-white table th{width:2em;height:2em;font-weight:400;color:var(--weekDaysTextColor);text-align:center}.pikaday-white table th abbr{text-decoration:none}.pikaday-white table td{padding:1px}.pikaday-white table td button{width:2em;height:2em;text-align:center;border-radius:9999px;background-color:var(--backgroundColor)}.pikaday-white table td button:hover{--tw-bg-opacity: 1;background-color:rgb(226 232 240 / var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgb(15 23 42 / var(--tw-text-opacity))}.pikaday-white table td.is-today button{color:var(--currentDateTextColor)}.pikaday-white table td.is-selected button{--tw-bg-opacity: 1;background-color:rgb(99 102 241 / var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity));font-weight:400}.pikaday-white table td button{color:var(--textColor)}.btn{position:relative;display:inline-block;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;border-radius:.375rem;border-width:1px;padding:.625rem 1rem;text-align:center;font-size:.875rem;line-height:1.25rem;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.1s}.btn:focus-visible{outline:2px solid transparent;outline-offset:2px;--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);--tw-ring-offset-width: 2px}.btn:disabled{cursor:not-allowed;opacity:.5}.btn{--tw-border-opacity: 1;border-color:rgb(203 213 225 / var(--tw-border-opacity));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgb(71 85 105 / var(--tw-text-opacity))}.btn:hover{--tw-bg-opacity: 1;background-color:rgb(241 245 249 / var(--tw-bg-opacity))}.btn:focus-visible{--tw-ring-opacity: 1;--tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity))}.btn:hover:disabled{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.btn.btn-xs{padding:.25rem .5rem;font-size:.75rem;line-height:1rem}.btn.btn-sm{padding:.5rem .75rem;font-size:.875rem;line-height:1rem}.btn.btn-md{padding:.625rem 1rem;font-size:.875rem;line-height:1.25rem}.btn.btn-lg{padding:.75rem 1.25rem;font-size:1rem;line-height:1.5rem}.btn.btn-xl{padding:1rem 1.5rem;font-size:1rem;line-height:1.5rem}.btn-default{--tw-border-opacity: 1;border-color:rgb(203 213 225 / var(--tw-border-opacity));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgb(71 85 105 / var(--tw-text-opacity))}.btn-default:hover{--tw-bg-opacity: 1;background-color:rgb(241 245 249 / var(--tw-bg-opacity))}.btn-default:focus-visible{--tw-ring-opacity: 1;--tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity))}.btn-default:hover:disabled{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.btn.btn-primary{border-color:transparent;--tw-bg-opacity: 1;background-color:rgb(99 102 241 / var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}.btn.btn-primary:hover{--tw-bg-opacity: 1;background-color:rgb(67 56 202 / var(--tw-bg-opacity))}.btn.btn-primary:focus-visible{--tw-ring-opacity: 1;--tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity))}.btn.btn-primary:hover:disabled{--tw-bg-opacity: 1;background-color:rgb(99 102 241 / var(--tw-bg-opacity))}.btn.btn-secondary{border-color:transparent;--tw-bg-opacity: 1;background-color:rgb(199 210 254 / var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgb(67 56 202 / var(--tw-text-opacity))}.btn.btn-secondary:hover{--tw-bg-opacity: 1;background-color:rgb(224 231 255 / var(--tw-bg-opacity))}.btn.btn-secondary:focus-visible{--tw-ring-opacity: 1;--tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity))}.btn.btn-secondary:hover:disabled{--tw-bg-opacity: 1;background-color:rgb(224 231 255 / var(--tw-bg-opacity))}.btn.btn-secondary-outline{--tw-border-opacity: 1;border-color:rgb(129 140 248 / var(--tw-border-opacity));--tw-bg-opacity: 1;background-color:rgb(199 210 254 / var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgb(67 56 202 / var(--tw-text-opacity))}.btn.btn-secondary-outline:hover{--tw-bg-opacity: 1;background-color:rgb(224 231 255 / var(--tw-bg-opacity))}.btn.btn-secondary-outline:focus-visible{--tw-ring-opacity: 1;--tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity))}.btn.btn-secondary-outline:hover:disabled{--tw-bg-opacity: 1;background-color:rgb(224 231 255 / var(--tw-bg-opacity))}.btn.btn-slate-100{border-color:transparent;--tw-bg-opacity: 1;background-color:rgb(241 245 249 / var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgb(51 65 85 / var(--tw-text-opacity))}.btn.btn-slate-100:hover{--tw-bg-opacity: 1;background-color:rgb(226 232 240 / var(--tw-bg-opacity))}.btn.btn-slate-100:focus-visible{--tw-ring-opacity: 1;--tw-ring-color: rgb(203 213 225 / var(--tw-ring-opacity))}.btn.btn-slate-100:hover:disabled{--tw-bg-opacity: 1;background-color:rgb(248 250 252 / var(--tw-bg-opacity))}.btn.btn-slate-100-outline{--tw-border-opacity: 1;border-color:rgb(226 232 240 / var(--tw-border-opacity));--tw-bg-opacity: 1;background-color:rgb(241 245 249 / var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgb(51 65 85 / var(--tw-text-opacity))}.btn.btn-slate-100-outline:hover{--tw-bg-opacity: 1;background-color:rgb(248 250 252 / var(--tw-bg-opacity))}.btn.btn-slate-100-outline:focus-visible{--tw-ring-opacity: 1;--tw-ring-color: rgb(203 213 225 / var(--tw-ring-opacity))}.btn.btn-slate-100-outline:hover:disabled{--tw-bg-opacity: 1;background-color:rgb(248 250 252 / var(--tw-bg-opacity))}.btn.btn-slate-200{border-color:transparent;--tw-bg-opacity: 1;background-color:rgb(226 232 240 / var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgb(30 41 59 / var(--tw-text-opacity))}.btn.btn-slate-200:hover{--tw-bg-opacity: 1;background-color:rgb(203 213 225 / var(--tw-bg-opacity))}.btn.btn-slate-200:focus-visible{--tw-ring-opacity: 1;--tw-ring-color: rgb(203 213 225 / var(--tw-ring-opacity))}.btn.btn-slate-200:hover:disabled{--tw-bg-opacity: 1;background-color:rgb(248 250 252 / var(--tw-bg-opacity))}.btn.btn-slate-200-outline{--tw-border-opacity: 1;border-color:rgb(203 213 225 / var(--tw-border-opacity));--tw-bg-opacity: 1;background-color:rgb(226 232 240 / var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgb(30 41 59 / var(--tw-text-opacity))}.btn.btn-slate-200-outline:hover{--tw-bg-opacity: 1;background-color:rgb(203 213 225 / var(--tw-bg-opacity))}.btn.btn-slate-200-outline:focus-visible{--tw-ring-opacity: 1;--tw-ring-color: rgb(203 213 225 / var(--tw-ring-opacity))}.btn.btn-slate-200-outline:hover:disabled{--tw-bg-opacity: 1;background-color:rgb(248 250 252 / var(--tw-bg-opacity))}.btn.btn-white{border-color:transparent;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgb(71 85 105 / var(--tw-text-opacity))}.btn.btn-white:hover{--tw-bg-opacity: 1;background-color:rgb(241 245 249 / var(--tw-bg-opacity))}.btn.btn-white:focus-visible{--tw-ring-opacity: 1;--tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity))}.btn.btn-white:hover:disabled{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.btn.btn-white-outline{--tw-border-opacity: 1;border-color:rgb(203 213 225 / var(--tw-border-opacity));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgb(71 85 105 / var(--tw-text-opacity))}.btn.btn-white-outline:hover{--tw-bg-opacity: 1;background-color:rgb(241 245 249 / var(--tw-bg-opacity))}.btn.btn-white-outline:focus-visible{--tw-ring-opacity: 1;--tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity))}.btn.btn-white-outline:hover:disabled{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.btn.btn-white-outline-primary{--tw-border-opacity: 1;border-color:rgb(129 140 248 / var(--tw-border-opacity));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgb(79 70 229 / var(--tw-text-opacity))}.btn.btn-white-outline-primary:hover{--tw-bg-opacity: 1;background-color:rgb(224 231 255 / var(--tw-bg-opacity))}.btn.btn-white-outline-primary:focus-visible{--tw-ring-opacity: 1;--tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity))}.btn.btn-white-outline-primary:hover:disabled{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.btn.btn-black{border-color:transparent;--tw-bg-opacity: 1;background-color:rgb(15 23 42 / var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}.btn.btn-black:hover{--tw-bg-opacity: 1;background-color:rgb(30 41 59 / var(--tw-bg-opacity))}.btn.btn-black:focus-visible{--tw-ring-opacity: 1;--tw-ring-color: rgb(15 23 42 / var(--tw-ring-opacity))}.btn.btn-black:hover:disabled{--tw-bg-opacity: 1;background-color:rgb(15 23 42 / var(--tw-bg-opacity))}.btn.btn-danger{border-color:transparent;--tw-bg-opacity: 1;background-color:rgb(220 38 38 / var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}.btn.btn-danger:hover{--tw-bg-opacity: 1;background-color:rgb(185 28 28 / var(--tw-bg-opacity))}.btn.btn-danger:focus-visible{--tw-ring-opacity: 1;--tw-ring-color: rgb(252 165 165 / var(--tw-ring-opacity))}.btn.btn-danger:hover:disabled{--tw-bg-opacity: 1;background-color:rgb(220 38 38 / var(--tw-bg-opacity))}.btn.btn-warning{border-color:transparent;--tw-bg-opacity: 1;background-color:rgb(250 204 21 / var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgb(113 63 18 / var(--tw-text-opacity))}.btn.btn-warning:hover{--tw-bg-opacity: 1;background-color:rgb(254 240 138 / var(--tw-bg-opacity))}.btn.btn-warning:focus-visible{--tw-ring-opacity: 1;--tw-ring-color: rgb(253 224 71 / var(--tw-ring-opacity))}.btn.btn-warning:hover:disabled{--tw-bg-opacity: 1;background-color:rgb(253 224 71 / var(--tw-bg-opacity))}.form-input-label{display:block;font-size:.875rem;line-height:1.25rem;line-height:1.25;--tw-text-opacity: 1;color:rgb(71 85 105 / var(--tw-text-opacity))}.form-input-error{font-size:.875rem;line-height:1.25rem;line-height:1.25;--tw-text-opacity: 1;color:rgb(220 38 38 / var(--tw-text-opacity))}input::-moz-placeholder,textarea::-moz-placeholder{--tw-placeholder-opacity: 1;color:rgb(148 163 184 / var(--tw-placeholder-opacity))}input::placeholder,textarea::placeholder{--tw-placeholder-opacity: 1;color:rgb(148 163 184 / var(--tw-placeholder-opacity))}
+ */.pika-single{z-index:9999;display:block;position:relative;color:#333;background:#fff;border:1px solid #ccc;border-bottom-color:#bbb;font-family:Helvetica Neue,Helvetica,Arial,sans-serif}.pika-single:before,.pika-single:after{content:" ";display:table}.pika-single:after{clear:both}.pika-single.is-hidden{display:none}.pika-single.is-bound{position:absolute;box-shadow:0 5px 15px -5px #00000080}.pika-lendar{float:left;width:240px;margin:8px}.pika-title{position:relative;text-align:center}.pika-label{display:inline-block;position:relative;z-index:9999;overflow:hidden;margin:0;padding:5px 3px;font-size:14px;line-height:20px;font-weight:700;background-color:#fff}.pika-title select{cursor:pointer;position:absolute;z-index:9998;margin:0;left:0;top:5px;opacity:0}.pika-prev,.pika-next{display:block;cursor:pointer;position:relative;outline:none;border:0;padding:0;width:20px;height:30px;text-indent:20px;white-space:nowrap;overflow:hidden;background-color:transparent;background-position:center center;background-repeat:no-repeat;background-size:75% 75%;opacity:.5}.pika-prev:hover,.pika-next:hover{opacity:1}.pika-prev,.is-rtl .pika-next{float:left;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAUklEQVR42u3VMQoAIBADQf8Pgj+OD9hG2CtONJB2ymQkKe0HbwAP0xucDiQWARITIDEBEnMgMQ8S8+AqBIl6kKgHiXqQqAeJepBo/z38J/U0uAHlaBkBl9I4GwAAAABJRU5ErkJggg==)}.pika-next,.is-rtl .pika-prev{float:right;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAU0lEQVR42u3VOwoAMAgE0dwfAnNjU26bYkBCFGwfiL9VVWoO+BJ4Gf3gtsEKKoFBNTCoCAYVwaAiGNQGMUHMkjGbgjk2mIONuXo0nC8XnCf1JXgArVIZAQh5TKYAAAAASUVORK5CYII=)}.pika-select{display:inline-block}.pika-table{width:100%;border-collapse:collapse;border-spacing:0;border:0}.pika-table th,.pika-table td{width:14.285714285714286%;padding:0}.pika-table th{color:#999;font-size:12px;line-height:25px;font-weight:700;text-align:center}.pika-button{cursor:pointer;display:block;box-sizing:border-box;-moz-box-sizing:border-box;outline:none;border:0;margin:0;width:100%;padding:5px;color:#666;font-size:12px;line-height:15px;text-align:right;background:#f5f5f5;height:initial}.pika-week{font-size:11px;color:#999}.is-today .pika-button{color:#3af;font-weight:700}.is-selected .pika-button,.has-event .pika-button{color:#fff;font-weight:700;background:#33aaff;box-shadow:inset 0 1px 3px #178fe5;border-radius:3px}.has-event .pika-button{background:#005da9;box-shadow:inset 0 1px 3px #0076c9}.is-disabled .pika-button,.is-inrange .pika-button{background:#D5E9F7}.is-startrange .pika-button{color:#fff;background:#6CB31D;box-shadow:none;border-radius:3px}.is-endrange .pika-button{color:#fff;background:#33aaff;box-shadow:none;border-radius:3px}.is-disabled .pika-button{pointer-events:none;cursor:default;color:#999;opacity:.3}.is-outside-current-month .pika-button{color:#999;opacity:.3}.is-selection-disabled{pointer-events:none;cursor:default}.pika-button:hover,.pika-row.pick-whole-week:hover .pika-button{color:#fff;background:#ff8000;box-shadow:none;border-radius:3px}.pika-table abbr{border-bottom:none;cursor:help}.pikaday-white{--backgroundColor: #ffffff;--textColor: #718096;--currentDateTextColor: #3182ce;--selectedDateBackgroundColor: #3182ce;--selectedDateTextColor: #ffffff;--labelTextColor: #4a5568;--weekDaysTextColor: #a0aec0;font-family:inherit;background-color:var(--backgroundColor);padding:.5rem;z-index:2000;margin:6px 0 0;--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);border-radius:.5rem}.pikaday-white .pika-title{width:100%;text-align:center;display:flex;justify-content:flex-start;margin-bottom:5px}.pikaday-white .pika-prev,.pikaday-white .pika-next{position:absolute;outline:none;padding:0;width:26px;height:26px;top:-1px;display:inline-block;margin-top:0;cursor:pointer;text-indent:-9999px;white-space:nowrap;overflow:hidden;background-color:transparent;background-position:center center;background-repeat:no-repeat;opacity:.7}.pikaday-white .pika-prev:hover,.pikaday-white .pika-next:hover{opacity:1}.pikaday-white .pika-prev{right:30px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23a0aec0'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M15 19l-7-7 7-7'%3E%3C/path%3E%3C/svg%3E")}.pikaday-white .pika-next{right:2px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23a0aec0'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M9 5l7 7-7 7'%3E%3C/path%3E%3C/svg%3E")}.pika-prev.is-disabled,.pika-next.is-disabled{cursor:default;opacity:.2}.pikaday-white .pika-label{margin-right:.375rem;border-radius:.25rem;border-width:1px;--tw-border-opacity: 1;border-color:rgb(203 213 225 / var(--tw-border-opacity));padding:.25rem .5rem;font-size:14px;font-weight:500;line-height:1}.pikaday-white .pika-label{position:relative}.pikaday-white .pika-select-month,.pikaday-white .pika-select-year{width:100%;cursor:pointer;position:absolute;z-index:9998;margin:0;left:0;top:0;opacity:0;padding:0}.pikaday-white table{width:100%;border-collapse:collapse}.pikaday-white table th{width:2em;height:2em;font-weight:400;color:var(--weekDaysTextColor);text-align:center}.pikaday-white table th abbr{text-decoration:none}.pikaday-white table td{padding:1px}.pikaday-white table td button{width:2em;height:2em;text-align:center;border-radius:9999px;background-color:var(--backgroundColor)}.pikaday-white table td button:hover{--tw-bg-opacity: 1;background-color:rgb(226 232 240 / var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgb(15 23 42 / var(--tw-text-opacity))}.pikaday-white table td.is-today button{color:var(--currentDateTextColor)}.pikaday-white table td.is-selected button{--tw-bg-opacity: 1;background-color:rgb(99 102 241 / var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity));font-weight:400}.pikaday-white table td button{color:var(--textColor)}input::-moz-placeholder,textarea::-moz-placeholder{--tw-placeholder-opacity: 1;color:rgb(148 163 184 / var(--tw-placeholder-opacity))}input::placeholder,textarea::placeholder{--tw-placeholder-opacity: 1;color:rgb(148 163 184 / var(--tw-placeholder-opacity))}

package/dist/tailwindcss/index.js

@@ -0,0 +1,274 @@
+const plugin = require('tailwindcss/plugin');
+
+module.exports = plugin(
+  function ({ addComponents, theme }) {
+    addComponents({
+      '.btn': {
+        position: 'relative',
+        display: 'inline-block',
+        cursor: 'pointer',
+        'user-select': 'none',
+        color: theme('colors.slate.600'),
+        'background-color': theme('colors.white'),
+        'border-color': theme('colors.slate.300'),
+        'border-width': '1px',
+        'border-radius': theme('borderRadius.md'),
+        padding: theme('spacing.[2.5]') + ' ' + theme('spacing.4'),
+        'text-align': 'center',
+        'font-size': theme('fontSize.sm'),
+        'line-height': theme('lineHeight.5'),
+        'transition-property':
+          'color, background-color, border-color, text-decoration-color, fill, stroke',
+        'transition-timing-function': 'cubic-bezier(0.4, 0, 0.2, 1)',
+        'transition-duration': '100ms',
+        '&:enabled:hover': {
+          'background-color': theme('colors.slate.100'),
+        },
+        '&:focus': {
+          outline: '2px solid transparent',
+          'outline-offset': '2px',
+          '--tw-ring-color': theme('colors.primary.500'),
+          '--tw-ring-offset-width': '2px',
+          '--tw-ring-offset-shadow':
+            'var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)',
+          '--tw-ring-shadow':
+            'var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color)',
+          'box-shadow':
+            'var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)',
+        },
+        '&:disabled': {
+          cursor: 'not-allowed',
+          opacity: '0.5',
+        },
+      },
+      // Sizes
+      '.btn-xs': {
+        'font-size': theme('fontSize.xs'),
+        'line-height': theme('lineHeight.4'),
+        padding: theme('spacing.1') + ' ' + theme('spacing.2'),
+      },
+      '.btn-sm': {
+        'font-size': theme('fontSize.sm'),
+        'line-height': theme('lineHeight.4'),
+        padding: theme('spacing.2') + ' ' + theme('spacing.3'),
+      },
+      '.btn-md': {
+        'font-size': theme('fontSize.sm'),
+        'line-height': theme('lineHeight.5'),
+        padding: theme('spacing.[2.5]') + ' ' + theme('spacing.4'),
+      },
+      '.btn-lg': {
+        'font-size': theme('fontSize.base'),
+        'line-height': theme('lineHeight.5'),
+        padding: theme('spacing.3') + ' ' + theme('spacing.5'),
+      },
+      '.btn-xl': {
+        'font-size': theme('fontSize.base'),
+        'line-height': theme('lineHeight.5'),
+        padding: theme('spacing.4') + ' ' + theme('spacing.6'),
+      },
+      // Colors
+      '.btn-primary': {
+        color: theme('colors.white'),
+        'background-color': theme('colors.primary.500'),
+        'border-color': 'transparent',
+        '&:enabled:hover': {
+          'background-color': theme('colors.primary.400'),
+        },
+        '&:focus': {
+          '--tw-ring-color': theme('colors.primary.500'),
+        },
+      },
+      '.btn-secondary': {
+        color: theme('colors.primary.700'),
+        'background-color': theme('colors.primary.200'),
+        'border-color': 'transparent',
+        '&:enabled:hover': {
+          'background-color': theme('colors.primary.100'),
+        },
+        '&:focus': {
+          '--tw-ring-color': theme('colors.primary.500'),
+        },
+      },
+      '.btn-secondary-outline': {
+        color: theme('colors.primary.700'),
+        'background-color': theme('colors.primary.200'),
+        'border-color': theme('colors.primary.300'),
+        '&:enabled:hover': {
+          'background-color': theme('colors.primary.100'),
+        },
+        '&:focus': {
+          '--tw-ring-color': theme('colors.primary.500'),
+        },
+      },
+      '.btn-success': {
+        color: theme('colors.white'),
+        'background-color': theme('colors.green.600'),
+        'border-color': 'transparent',
+        '&:enabled:hover': {
+          'background-color': theme('colors.green.500'),
+        },
+        '&:focus': {
+          '--tw-ring-color': theme('colors.green.500'),
+        },
+      },
+      '.btn-success-outline': {
+        color: theme('colors.green.700'),
+        'background-color': theme('colors.green.200'),
+        'border-color': theme('colors.green.300'),
+        '&:enabled:hover': {
+          'background-color': theme('colors.green.100'),
+        },
+        '&:focus': {
+          '--tw-ring-color': theme('colors.green.500'),
+        },
+      },
+      '.btn-warning': {
+        color: theme('colors.yellow.900'),
+        'background-color': theme('colors.yellow.400'),
+        'border-color': 'transparent',
+        '&:enabled:hover': {
+          'background-color': theme('colors.yellow.300'),
+        },
+        '&:focus': {
+          '--tw-ring-color': theme('colors.yellow.300'),
+        },
+      },
+      '.btn-warning-outline': {
+        color: theme('colors.yellow.900'),
+        'background-color': theme('colors.yellow.200'),
+        'border-color': theme('colors.yellow.400'),
+        '&:enabled:hover': {
+          'background-color': theme('colors.yellow.100'),
+        },
+        '&:focus': {
+          '--tw-ring-color': theme('colors.yellow.300'),
+        },
+      },
+      '.btn-danger': {
+        color: theme('colors.white'),
+        'background-color': theme('colors.red.600'),
+        'border-color': 'transparent',
+        '&:enabled:hover': {
+          'background-color': theme('colors.red.500'),
+        },
+        '&:focus': {
+          '--tw-ring-color': theme('colors.red.500'),
+        },
+      },
+      '.btn-danger-outline': {
+        color: theme('colors.red.700'),
+        'background-color': theme('colors.red.200'),
+        'border-color': theme('colors.red.300'),
+        '&:enabled:hover': {
+          'background-color': theme('colors.red.100'),
+        },
+        '&:focus': {
+          '--tw-ring-color': theme('colors.red.500'),
+        },
+      },
+      '.btn-white': {
+        'background-color': theme('colors.white'),
+        'border-color': 'transparent',
+        '&:enabled:hover': {
+          'background-color': theme('colors.slate.100'),
+        },
+        '&:focus': {
+          '--tw-ring-color': theme('colors.slate.200'),
+        },
+      },
+      '.btn-black': {
+        color: theme('colors.white'),
+        'background-color': theme('colors.slate.900'),
+        'border-color': 'transparent',
+        '&:enabled:hover': {
+          'background-color': theme('colors.slate.700'),
+        },
+        '&:focus': {
+          '--tw-ring-color': theme('colors.slate.600'),
+        },
+      },
+      '.btn-slate-100': {
+        'background-color': theme('colors.slate.100'),
+        'border-color': 'transparent',
+        '&:enabled:hover': {
+          'background-color': theme('colors.slate.50'),
+        },
+        '&:focus': {
+          '--tw-ring-color': theme('colors.slate.200'),
+        },
+      },
+      '.btn-slate-100-outline': {
+        'background-color': theme('colors.slate.100'),
+        'border-color': theme('colors.slate.200'),
+        '&:enabled:hover': {
+          'background-color': theme('colors.slate.50'),
+        },
+        '&:focus': {
+          '--tw-ring-color': theme('colors.slate.200'),
+        },
+      },
+      '.btn-slate-200': {
+        'background-color': theme('colors.slate.200'),
+        'border-color': 'transparent',
+        '&:enabled:hover': {
+          'background-color': theme('colors.slate.100'),
+        },
+        '&:focus': {
+          '--tw-ring-color': theme('colors.slate.200'),
+        },
+      },
+      '.btn-slate-200-outline': {
+        'background-color': theme('colors.slate.200'),
+        'border-color': theme('colors.slate.300'),
+        '&:enabled:hover': {
+          'background-color': theme('colors.slate.100'),
+        },
+        '&:focus': {
+          '--tw-ring-color': theme('colors.slate.200'),
+        },
+      },
+    });
+  },
+  {
+    theme: {
+      extend: {
+        zIndex: {
+          status: '20',
+          menu: '30',
+          modal: '40',
+          notifications: '50',
+          loading: '100',
+        },
+        animation: {
+          shake: 'shake 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955) both',
+          shimmer: 'shimmer 2s infinite both',
+        },
+        keyframes: {
+          shimmer: {
+            '100%': {
+              transform: 'translateX(100%)',
+            },
+          },
+          shake: {
+            '0%, 100%': {
+              transform: 'translateX(0)',
+            },
+            '10%, 30%, 50%, 70%': {
+              transform: 'translateX(-10px)',
+            },
+            '20%, 40%, 60%': {
+              transform: 'translateX(10px)',
+            },
+            '80%': {
+              transform: 'translateX(8px)',
+            },
+            '90%': {
+              transform: 'translateX(-8px)',
+            },
+          },
+        },
+      },
+    },
+  }
+);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.0.8",
+  "version": "0.0.10",
   "scripts": {
     "build": "rimraf dist && vue-tsc && vite build",
     "docs:dev": "vitepress dev docs",
@@ -43,7 +43,6 @@
     "@tailwindcss/line-clamp": "^0.4.2",
     "@tailwindcss/typography": "^0.5.8",
     "@types/luxon": "^3.1.0",
-    "@types/node": "^17.0.45",
     "@types/object-hash": "^2.2.1",
     "@types/pikaday": "^1.7.6",
     "@types/qs": "^6.9.7",
@@ -95,6 +94,7 @@
     ".": {
       "import": "./dist/sprintify-ui.es.js"
     },
-    "./dist/style.css": "./dist/style.css"
+    "./dist/style.css": "./dist/style.css",
+    "./tailwindcss": "./dist/tailwindcss/index.js"
   }
 }

package/src/assets/form.css

@@ -1,13 +1,4 @@
-
-.form-input-label {
-    @apply block text-sm leading-tight text-slate-600;
-}
-
-.form-input-error {
-    @apply text-sm leading-tight text-red-600;
-}
-
-/** Placehoder color */
+/** Placeholder color */
 
 input,
 textarea {

package/src/assets/main.css

@@ -1,3 +1,2 @@
 @import './pikaday.css';
-@import './button.css';
 @import './form.css';

package/src/assets/tailwind.css

@@ -1,5 +1,3 @@
-@import "tailwindcss/base";
-
-@import "tailwindcss/components";
-
-@import "tailwindcss/utilities";
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

package/src/components/BaseAutocomplete.stories.js

@@ -7,7 +7,6 @@ export default {
   args: {
     labelKey: 'label',
     valueKey: 'value',
-    inputClass: 'w-full border-slate-300',
     options: [
       { label: 'Dark Vader', value: 'dark_vader' },
       { label: 'Darth Maul', value: 'darth_maul' },

package/src/components/BaseAutocompleteFetch.stories.js

@@ -8,7 +8,6 @@ export default {
     url: 'https://effettandem.com/api/content/articles',
     labelKey: 'title',
     valueKey: 'id',
-    inputClass: 'w-full border-slate-300',
     disabled: false,
   },
   decorators: [() => ({ template: '<div class="mb-36"><story/></div>' })],

package/src/components/BaseBelongsTo.stories.js

@@ -7,7 +7,6 @@ export default {
   args: {
     url: 'https://effettandem.com/api/content/articles',
     field: 'title',
-    inputClass: 'w-full border-slate-300',
   },
   decorators: [() => ({ template: '<div class="mb-36"><story/></div>' })],
 };

package/src/components/BaseButton.stories.js

@@ -5,8 +5,11 @@ const colors = [
   'btn-secondary',
   'btn-secondary-outline',
   'btn-success',
+  'btn-success-outline',
   'btn-warning',
+  'btn-warning-outline',
   'btn-danger',
+  'btn-danger-outline',
   'btn-white',
   'btn-slate-100',
   'btn-slate-100-outline',
@@ -41,7 +44,7 @@ const Template = (args) => ({
 
 export const Demo = Template.bind({});
 Demo.args = {
-  class: 'btn-primary btn-base',
+  class: '',
 };
 
 export const Loading = Template.bind({});
@@ -55,8 +58,13 @@ export const Colors = (args) => ({
     return { args, colors };
   },
   template: `
+    <p class="text-xs text-slate-600 leading-tight mb-1">btn</p>
+    <BaseButton class="btn">
+      Click here
+    </BaseButton>
+    <div class="mb-4"></div>
     <div v-for="color in colors" :key="color" class="mb-4">
-      <p class="text-xs text-slate-600 leading-tight mb-1">{{ color }}</p>
+      <p class="text-xs text-slate-600 leading-tight mb-1">btn {{ color }}</p>
       <BaseButton :class="color">
         Click here
       </BaseButton>
@@ -71,7 +79,7 @@ export const Sizes = (args) => ({
   },
   template: `
     <div v-for="size in sizes" :key="size" class="mb-4">
-      <p class="text-xs text-slate-600 leading-tight mb-1">{{ size }}</p>
+      <p class="text-xs text-slate-600 leading-tight mb-1">btn {{ size }}</p>
       <BaseButton class="btn-primary" :class="size">
       Click here
       </BaseButton>

package/src/components/BaseDatePicker.stories.js

@@ -21,33 +21,28 @@ const Template = (args) => ({
 export const Demo = Template.bind({});
 Demo.args = {
   modelValue: '2023-01-01',
-  inputClass: 'border-slate-300',
 };
 
 export const YearRange = Template.bind({});
 YearRange.args = {
   modelValue: '1980-11-16',
-  inputClass: 'border-slate-300',
   yearRange: [1920, 2020],
 };
 
 export const MinDate = Template.bind({});
 MinDate.args = {
   modelValue: '2022-11-16',
-  inputClass: 'border-slate-300',
   minDate: DateTime.fromISO('2022-11-10').toJSDate(),
 };
 
 export const MaxDate = Template.bind({});
 MaxDate.args = {
   modelValue: '2022-11-16',
-  inputClass: 'border-slate-300',
   maxDate: DateTime.fromISO('2022-11-20').toJSDate(),
 };
 
 export const Disabled = Template.bind({});
 Disabled.args = {
   modelValue: '2022-11-16',
-  inputClass: 'border-slate-300',
   disabled: true,
 };

package/src/components/BaseDateSelect.stories.js

@@ -0,0 +1,41 @@
+import BaseDateSelect from './BaseDateSelect.vue';
+
+export default {
+  title: 'Form/BaseDateSelect',
+  component: BaseDateSelect,
+  argTypes: {},
+};
+
+const Template = (args) => ({
+  components: { BaseDateSelect },
+  setup() {
+    return { args };
+  },
+  template: `
+    <BaseDateSelect v-bind="args">
+    </BaseDateSelect>
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {
+  modelValue: '2021-01-01',
+};
+
+export const MinYear = Template.bind({});
+MinYear.args = {
+  modelValue: '2022-11-16',
+  minYear: 1980,
+};
+
+export const MaxYear = Template.bind({});
+MaxYear.args = {
+  modelValue: '2002-11-16',
+  maxYear: 2010,
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  modelValue: '2022-11-16',
+  disabled: true,
+};

package/src/components/BaseDateSelect.vue

@@ -80,7 +80,7 @@
     <button
       type="button"
       :disabled="disabled"
-      class="mt-1 appearance-none border-transparent bg-transparent text-sm text-slate-700 underline outline-none"
+      class="mt-1 appearance-none border-transparent bg-transparent text-sm text-slate-700 underline outline-none disabled:cursor-not-allowed disabled:opacity-50"
       @click="clear()"
     >
       <span>{{ $t('sui.clear') }}</span>

package/src/components/BaseDescriptionList.stories.js

@@ -0,0 +1,35 @@
+import BaseBadge from './BaseBadge.vue';
+import BaseDescriptionList from './BaseDescriptionList.vue';
+import BaseDescriptionListItem from './BaseDescriptionListItem.vue';
+
+export default {
+  title: 'Components/BaseDescriptionList',
+  component: BaseDescriptionList,
+  argTypes: {},
+};
+
+const Template = (args) => ({
+  components: { BaseDescriptionList, BaseDescriptionListItem, BaseBadge },
+  setup() {
+    return { args };
+  },
+  template: `
+    <BaseDescriptionList v-bind="args">
+      <BaseDescriptionListItem>
+        <template #left>Full name</template>
+        <template #right>Full name</template>
+      </BaseDescriptionListItem>
+      <BaseDescriptionListItem>
+        <template #left>Age</template>
+        <template #right>66 years old</template>
+      </BaseDescriptionListItem>
+      <BaseDescriptionListItem>
+        <template #left>Role</template>
+        <template #right><BaseBadge color="indigo">admin</BaseBadge></template>
+      </BaseDescriptionListItem>
+    </BaseDescriptionList>
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {};

package/src/components/BaseDescriptionList.vue

@@ -8,4 +8,6 @@
   </BaseCard>
 </template>
 
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import BaseCard from './BaseCard.vue';
+</script>

package/src/components/BaseSkeleton.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="relative isolate overflow-hidden rounded" :class="[background]">
     <div
-      class="absolute inset-0 -translate-x-full animate-[shimmer_2s_infinite] border-t border-white/80 bg-gradient-to-r from-transparent via-white/80 to-transparent"
+      class="animate-shimmer absolute inset-0 -translate-x-full border-t border-white/80 bg-gradient-to-r from-transparent via-white/80 to-transparent"
       :style="{
         animationDelay: delay,
       }"