@robuust-digital/vue-components 1.2.6 → 1.2.8
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/style.css +1 -1
- package/dist/tailwind/base/index.js +8 -7
- package/dist/tailwind/components/combobox.js +224 -0
- package/dist/tailwind/components/dropdown.js +5 -5
- package/dist/tailwind/components/input.js +99 -0
- package/dist/tailwind/components/select.js +16 -14
- package/dist/tailwind/components/textarea.js +51 -0
- package/dist/tailwind/index.js +10 -0
- package/dist/vue-components.es.js +3730 -2335
- package/dist/vue-components.umd.js +6 -3
- package/package.json +3 -1
package/dist/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.rvc-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.rvc-pointer-events-none{pointer-events:none}.rvc-pointer-events-auto{pointer-events:auto}.rvc-invisible{visibility:hidden}.rvc-fixed{position:fixed}.rvc-absolute{position:absolute}.rvc-relative{position:relative}.rvc-sticky{position:sticky}.rvc-inset-0{top:0;right:0;bottom:0;left:0}.rvc-inset-y-0{top:0;bottom:0}.rvc-left-0{left:0}.rvc-right-0{right:0}.rvc-top-0{top:0}.rvc-z-10{z-index:10}.rvc--my-1{margin-top:-.25rem;margin-bottom:-.25rem}.rvc-mx-auto{margin-left:auto;margin-right:auto}.rvc-my-3{margin-top:.75rem;margin-bottom:.75rem}.rvc-my-4{margin-top:1rem;margin-bottom:1rem}.-rvc-mt-4{margin-top:-1rem}.rvc--ml-2{margin-left:-.5rem}.rvc-mb-2{margin-bottom:.5rem}.rvc-mb-3{margin-bottom:.75rem}.rvc-mb-4{margin-bottom:1rem}.rvc-mb-6{margin-bottom:1.5rem}.rvc-mb-8{margin-bottom:2rem}.rvc-ml-2{margin-left:.5rem}.rvc-ml-3{margin-left:.75rem}.rvc-mt-3{margin-top:.75rem}.rvc-block{display:block}.rvc-inline-block{display:inline-block}.rvc-flex{display:flex}.rvc-inline-flex{display:inline-flex}.rvc-table{display:table}.rvc-grid{display:grid}.rvc-hidden{display:none}.rvc-aspect-square{aspect-ratio:1 / 1}.rvc-size-4{width:1rem;height:1rem}.rvc-size-5{width:1.25rem;height:1.25rem}.rvc-size-6{width:1.5rem;height:1.5rem}.rvc-size-7{width:1.75rem;height:1.75rem}.rvc-size-full{width:100%;height:100%}.rvc-h-7{height:1.75rem}.rvc-h-full{height:100%}.rvc-min-h-0{min-height:0px}.rvc-min-h-full{min-height:100%}.rvc-w-fit{width:-moz-fit-content;width:fit-content}.rvc-w-full{width:100%}.rvc-w-screen{width:100vw}.rvc-max-w-full{max-width:100%}.rvc-max-w-xl{max-width:36rem}.rvc-flex-1{flex:1 1 0%}.rvc-shrink-0{flex-shrink:0}.rvc-translate-x-0{--tw-translate-x: 0px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rvc-translate-x-3{--tw-translate-x: .75rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rvc-translate-x-6{--tw-translate-x: 1.5rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rvc-translate-x-full{--tw-translate-x: 100%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rvc-translate-y-0{--tw-translate-y: 0px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rvc-translate-y-4{--tw-translate-y: 1rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rvc-rotate-180{--tw-rotate: 180deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rvc-scale-100{--tw-scale-x: 1;--tw-scale-y: 1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rvc-scale-110{--tw-scale-x: 1.1;--tw-scale-y: 1.1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rvc-scale-95{--tw-scale-x: .95;--tw-scale-y: .95;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rvc-transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rvc-cursor-pointer{cursor:pointer}.rvc-grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.rvc-flex-row-reverse{flex-direction:row-reverse}.rvc-flex-col{flex-direction:column}.rvc-flex-col-reverse{flex-direction:column-reverse}.rvc-flex-wrap{flex-wrap:wrap}.rvc-items-start{align-items:flex-start}.rvc-items-center{align-items:center}.rvc-justify-start{justify-content:flex-start}.rvc-justify-end{justify-content:flex-end}.rvc-justify-center{justify-content:center}.rvc-justify-between{justify-content:space-between}.rvc-gap-1{gap:.25rem}.rvc-gap-3{gap:.75rem}.rvc-gap-8{gap:2rem}.rvc-gap-x-1\.5{-moz-column-gap:.375rem;column-gap:.375rem}.rvc-gap-x-2{-moz-column-gap:.5rem;column-gap:.5rem}.rvc-gap-y-3{row-gap:.75rem}.rvc-overflow-hidden{overflow:hidden}.rvc-overflow-x-auto{overflow-x:auto}.rvc-overflow-y-auto{overflow-y:auto}.rvc-overflow-y-scroll{overflow-y:scroll}.rvc-rounded-full{border-radius:9999px}.rvc-rounded-lg{border-radius:.5rem}.rvc-border{border-width:1px}.rvc-border-solid{border-style:solid}.rvc-border-neutral-500{--tw-border-opacity: 1;border-color:rgb(115 115 115 / var(--tw-border-opacity))}.rvc-border-slate-200{--tw-border-opacity: 1;border-color:rgb(226 232 240 / var(--tw-border-opacity))}.rvc-bg-blue-200{--tw-bg-opacity: 1;background-color:rgb(191 219 254 / var(--tw-bg-opacity))}.rvc-bg-green-300{--tw-bg-opacity: 1;background-color:rgb(134 239 172 / var(--tw-bg-opacity))}.rvc-bg-red-300{--tw-bg-opacity: 1;background-color:rgb(252 165 165 / var(--tw-bg-opacity))}.rvc-bg-red-500{--tw-bg-opacity: 1;background-color:rgb(239 68 68 / var(--tw-bg-opacity))}.rvc-bg-white{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.rvc-p-1{padding:.25rem}.rvc-p-4{padding:1rem}.rvc-px-4{padding-left:1rem;padding-right:1rem}.rvc-py-48{padding-top:12rem;padding-bottom:12rem}.rvc-pb-4{padding-bottom:1rem}.rvc-pl-10{padding-left:2.5rem}.rvc-text-left{text-align:left}.rvc-text-center{text-align:center}.rvc-text-right{text-align:right}.rvc-text-2xl{font-size:1.5rem;line-height:2rem}.rvc-text-3xl{font-size:1.875rem;line-height:2.25rem}.rvc-text-sm{font-size:.8125rem;line-height:1.25rem}.rvc-font-bold{font-weight:700}.rvc-font-medium{font-weight:500}.rvc-font-normal{font-weight:400}.rvc-font-semibold{font-weight:600}.rvc-text-black{--tw-text-opacity: 1;color:rgb(0 0 0 / var(--tw-text-opacity))}.rvc-text-green-800{--tw-text-opacity: 1;color:rgb(22 101 52 / var(--tw-text-opacity))}.rvc-text-neutral-700{--tw-text-opacity: 1;color:rgb(64 64 64 / var(--tw-text-opacity))}.rvc-text-neutral-950{--tw-text-opacity: 1;color:rgb(10 10 10 / var(--tw-text-opacity))}.rvc-text-red-500{--tw-text-opacity: 1;color:rgb(239 68 68 / var(--tw-text-opacity))}.rvc-text-red-800{--tw-text-opacity: 1;color:rgb(153 27 27 / var(--tw-text-opacity))}.rvc-text-slate-600{--tw-text-opacity: 1;color:rgb(71 85 105 / var(--tw-text-opacity))}.rvc-text-stone-600{--tw-text-opacity: 1;color:rgb(87 83 78 / var(--tw-text-opacity))}.rvc-opacity-0{opacity:0}.rvc-opacity-100{opacity:1}.rvc-opacity-50{opacity:.5}.rvc-shadow-xl{--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.rvc-transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.rvc-transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.rvc-transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.rvc-transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.rvc-duration-100{transition-duration:.1s}.rvc-duration-200{transition-duration:.2s}.rvc-duration-300{transition-duration:.3s}.rvc-duration-500{transition-duration:.5s}.rvc-duration-75{transition-duration:75ms}.rvc-ease-in{transition-timing-function:cubic-bezier(.4,0,1,1)}.rvc-ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.rvc-ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}.rvc-peer\/checkbox:focus~.peer-focus\/checkbox\:rvc-focus{outline-style:var(--rvc-base-focus-outline-style);outline-width:var(--rvc-base-focus-outline-offset);outline-offset:var(--rvc-base-focus-outline-width);outline-color:var(--rvc-base-focus-outline-color)}.placeholder\:rvc-text-neutral-300::-moz-placeholder{--tw-text-opacity: 1;color:rgb(212 212 212 / var(--tw-text-opacity))}.placeholder\:rvc-text-neutral-300::placeholder{--tw-text-opacity: 1;color:rgb(212 212 212 / var(--tw-text-opacity))}.first\:rvc-block:first-child{display:block}.last\:rvc-block:last-child{display:block}.hover\:rvc-underline:hover{text-decoration-line:underline}.rvc-group\/accordion[open] .group-open\/accordion\:rvc-rotate-45{--tw-rotate: 45deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rvc-group\/tooltip:hover .group-hover\/tooltip\:rvc-visible{visibility:visible}.rvc-group\/table:hover .group-hover\/table\:rvc-opacity-30{opacity:.3}.rvc-group\/tooltip:hover .group-hover\/tooltip\:rvc-opacity-100{opacity:1}@media (min-width: 640px){.sm\:rvc-max-w-3xl{max-width:48rem}.sm\:rvc-max-w-lg{max-width:32rem}.sm\:rvc-translate-y-0{--tw-translate-y: 0px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.sm\:rvc-scale-100{--tw-scale-x: 1;--tw-scale-y: 1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.sm\:rvc-scale-95{--tw-scale-x: .95;--tw-scale-y: .95;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.sm\:rvc-p-0{padding:0}.sm\:rvc-duration-700{transition-duration:.7s}}@media (min-width: 768px){.md\:rvc-col-span-2{grid-column:span 2 / span 2}.md\:rvc-block{display:block}.md\:rvc-flex{display:flex}.md\:rvc-grid{display:grid}.md\:rvc-hidden{display:none}.md\:rvc-grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:rvc-grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:rvc-gap-6{gap:1.5rem}}@media (min-width: 1024px){.lg\:rvc-max-w-6xl{max-width:72rem}.lg\:rvc-px-12{padding-left:3rem;padding-right:3rem}}@media (min-width: 1280px){.xl\:rvc-gap-1{gap:.25rem}}.less-opacity-class .\[\.less-opacity-class_\&\]\:rvc-opacity-50{opacity:.5}
|
|
1
|
+
.rvc-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.rvc-pointer-events-none{pointer-events:none}.rvc-pointer-events-auto{pointer-events:auto}.rvc-invisible{visibility:hidden}.rvc-fixed{position:fixed}.rvc-absolute{position:absolute}.rvc-relative{position:relative}.rvc-sticky{position:sticky}.rvc-inset-0{top:0;right:0;bottom:0;left:0}.rvc-inset-y-0{top:0;bottom:0}.rvc-left-0{left:0}.rvc-right-0{right:0}.rvc-right-3{right:.75rem}.rvc-top-0{top:0}.rvc-z-10{z-index:10}.rvc--my-1{margin-top:-.25rem;margin-bottom:-.25rem}.rvc-mx-auto{margin-left:auto;margin-right:auto}.rvc-my-3{margin-top:.75rem;margin-bottom:.75rem}.rvc-my-4{margin-top:1rem;margin-bottom:1rem}.-rvc-mt-4{margin-top:-1rem}.rvc--ml-2{margin-left:-.5rem}.rvc-mb-2{margin-bottom:.5rem}.rvc-mb-3{margin-bottom:.75rem}.rvc-mb-4{margin-bottom:1rem}.rvc-mb-6{margin-bottom:1.5rem}.rvc-mb-8{margin-bottom:2rem}.rvc-ml-2{margin-left:.5rem}.rvc-ml-3{margin-left:.75rem}.rvc-mt-3{margin-top:.75rem}.rvc-block{display:block}.rvc-inline-block{display:inline-block}.rvc-flex{display:flex}.rvc-inline-flex{display:inline-flex}.rvc-table{display:table}.rvc-grid{display:grid}.rvc-hidden{display:none}.rvc-aspect-square{aspect-ratio:1 / 1}.rvc-size-4{width:1rem;height:1rem}.rvc-size-5{width:1.25rem;height:1.25rem}.rvc-size-6{width:1.5rem;height:1.5rem}.rvc-size-7{width:1.75rem;height:1.75rem}.rvc-size-full{width:100%;height:100%}.rvc-h-7{height:1.75rem}.rvc-h-full{height:100%}.rvc-min-h-0{min-height:0px}.rvc-min-h-full{min-height:100%}.rvc-w-fit{width:-moz-fit-content;width:fit-content}.rvc-w-full{width:100%}.rvc-w-screen{width:100vw}.rvc-max-w-full{max-width:100%}.rvc-max-w-xl{max-width:36rem}.rvc-flex-1{flex:1 1 0%}.rvc-shrink-0{flex-shrink:0}.rvc-translate-x-0{--tw-translate-x: 0px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rvc-translate-x-3{--tw-translate-x: .75rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rvc-translate-x-6{--tw-translate-x: 1.5rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rvc-translate-x-full{--tw-translate-x: 100%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rvc-translate-y-0{--tw-translate-y: 0px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rvc-translate-y-4{--tw-translate-y: 1rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rvc-rotate-180{--tw-rotate: 180deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rvc-scale-100{--tw-scale-x: 1;--tw-scale-y: 1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rvc-scale-110{--tw-scale-x: 1.1;--tw-scale-y: 1.1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rvc-scale-95{--tw-scale-x: .95;--tw-scale-y: .95;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rvc-transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rvc-cursor-default{cursor:default}.rvc-cursor-pointer{cursor:pointer}.rvc-select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.rvc-resize-none{resize:none}.rvc-grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.rvc-flex-row-reverse{flex-direction:row-reverse}.rvc-flex-col{flex-direction:column}.rvc-flex-col-reverse{flex-direction:column-reverse}.rvc-flex-wrap{flex-wrap:wrap}.rvc-items-start{align-items:flex-start}.rvc-items-center{align-items:center}.rvc-justify-start{justify-content:flex-start}.rvc-justify-end{justify-content:flex-end}.rvc-justify-center{justify-content:center}.rvc-justify-between{justify-content:space-between}.rvc-gap-1{gap:.25rem}.rvc-gap-3{gap:.75rem}.rvc-gap-6{gap:1.5rem}.rvc-gap-8{gap:2rem}.rvc-gap-x-1{-moz-column-gap:.25rem;column-gap:.25rem}.rvc-gap-x-1\.5{-moz-column-gap:.375rem;column-gap:.375rem}.rvc-gap-x-2{-moz-column-gap:.5rem;column-gap:.5rem}.rvc-gap-y-2\.5{row-gap:.625rem}.rvc-gap-y-3{row-gap:.75rem}.rvc-overflow-hidden{overflow:hidden}.rvc-overflow-x-auto{overflow-x:auto}.rvc-overflow-y-auto{overflow-y:auto}.rvc-overflow-y-scroll{overflow-y:scroll}.rvc-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rvc-rounded-full{border-radius:9999px}.rvc-rounded-lg{border-radius:.5rem}.rvc-border{border-width:1px}.rvc-border-solid{border-style:solid}.rvc-border-neutral-500{--tw-border-opacity: 1;border-color:rgb(115 115 115 / var(--tw-border-opacity))}.rvc-border-slate-200{--tw-border-opacity: 1;border-color:rgb(226 232 240 / var(--tw-border-opacity))}.rvc-bg-blue-200{--tw-bg-opacity: 1;background-color:rgb(191 219 254 / var(--tw-bg-opacity))}.rvc-bg-green-300{--tw-bg-opacity: 1;background-color:rgb(134 239 172 / var(--tw-bg-opacity))}.rvc-bg-red-300{--tw-bg-opacity: 1;background-color:rgb(252 165 165 / var(--tw-bg-opacity))}.rvc-bg-red-500{--tw-bg-opacity: 1;background-color:rgb(239 68 68 / var(--tw-bg-opacity))}.rvc-bg-white{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.rvc-p-1{padding:.25rem}.rvc-p-4{padding:1rem}.rvc-px-4{padding-left:1rem;padding-right:1rem}.rvc-py-2{padding-top:.5rem;padding-bottom:.5rem}.rvc-py-48{padding-top:12rem;padding-bottom:12rem}.rvc-pb-4{padding-bottom:1rem}.rvc-pl-10{padding-left:2.5rem}.rvc-pl-3{padding-left:.75rem}.rvc-pr-9{padding-right:2.25rem}.rvc-text-left{text-align:left}.rvc-text-center{text-align:center}.rvc-text-right{text-align:right}.rvc-text-2xl{font-size:1.5rem;line-height:2rem}.rvc-text-3xl{font-size:1.875rem;line-height:2.25rem}.rvc-text-sm{font-size:.8125rem;line-height:1.25rem}.rvc-font-bold{font-weight:700}.rvc-font-medium{font-weight:500}.rvc-font-normal{font-weight:400}.rvc-font-semibold{font-weight:600}.rvc-text-black{--tw-text-opacity: 1;color:rgb(0 0 0 / var(--tw-text-opacity))}.rvc-text-gray-500{--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity))}.rvc-text-green-400{--tw-text-opacity: 1;color:rgb(74 222 128 / var(--tw-text-opacity))}.rvc-text-green-800{--tw-text-opacity: 1;color:rgb(22 101 52 / var(--tw-text-opacity))}.rvc-text-neutral-700{--tw-text-opacity: 1;color:rgb(64 64 64 / var(--tw-text-opacity))}.rvc-text-neutral-950{--tw-text-opacity: 1;color:rgb(10 10 10 / var(--tw-text-opacity))}.rvc-text-red-500{--tw-text-opacity: 1;color:rgb(239 68 68 / var(--tw-text-opacity))}.rvc-text-red-800{--tw-text-opacity: 1;color:rgb(153 27 27 / var(--tw-text-opacity))}.rvc-text-slate-500{--tw-text-opacity: 1;color:rgb(100 116 139 / var(--tw-text-opacity))}.rvc-text-slate-600{--tw-text-opacity: 1;color:rgb(71 85 105 / var(--tw-text-opacity))}.rvc-text-slate-700{--tw-text-opacity: 1;color:rgb(51 65 85 / var(--tw-text-opacity))}.rvc-text-stone-600{--tw-text-opacity: 1;color:rgb(87 83 78 / var(--tw-text-opacity))}.rvc-opacity-0{opacity:0}.rvc-opacity-100{opacity:1}.rvc-opacity-50{opacity:.5}.rvc-shadow-xl{--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.rvc-transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.rvc-transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.rvc-transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.rvc-transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.rvc-duration-100{transition-duration:.1s}.rvc-duration-200{transition-duration:.2s}.rvc-duration-300{transition-duration:.3s}.rvc-duration-500{transition-duration:.5s}.rvc-duration-75{transition-duration:75ms}.rvc-ease-in{transition-timing-function:cubic-bezier(.4,0,1,1)}.rvc-ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.rvc-ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}.rvc-peer\/checkbox:focus~.peer-focus\/checkbox\:rvc-focus{outline-style:var(--rvc-base-focus-outline-style);outline-width:var(--rvc-base-focus-outline-offset);outline-offset:var(--rvc-base-focus-outline-width);outline-color:var(--rvc-base-focus-outline-color)}.placeholder\:rvc-text-neutral-300::-moz-placeholder{--tw-text-opacity: 1;color:rgb(212 212 212 / var(--tw-text-opacity))}.placeholder\:rvc-text-neutral-300::placeholder{--tw-text-opacity: 1;color:rgb(212 212 212 / var(--tw-text-opacity))}.first\:rvc-block:first-child{display:block}.last\:rvc-block:last-child{display:block}.hover\:rvc-underline:hover{text-decoration-line:underline}.rvc-group\/accordion[open] .group-open\/accordion\:rvc-rotate-45{--tw-rotate: 45deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rvc-group\/tooltip:hover .group-hover\/tooltip\:rvc-visible{visibility:visible}.rvc-group\/table:hover .group-hover\/table\:rvc-opacity-30{opacity:.3}.rvc-group\/tooltip:hover .group-hover\/tooltip\:rvc-opacity-100{opacity:1}@media (min-width: 640px){.sm\:rvc-max-w-3xl{max-width:48rem}.sm\:rvc-max-w-lg{max-width:32rem}.sm\:rvc-translate-y-0{--tw-translate-y: 0px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.sm\:rvc-scale-100{--tw-scale-x: 1;--tw-scale-y: 1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.sm\:rvc-scale-95{--tw-scale-x: .95;--tw-scale-y: .95;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.sm\:rvc-p-0{padding:0}.sm\:rvc-duration-700{transition-duration:.7s}}@media (min-width: 768px){.md\:rvc-col-span-2{grid-column:span 2 / span 2}.md\:rvc-block{display:block}.md\:rvc-flex{display:flex}.md\:rvc-grid{display:grid}.md\:rvc-hidden{display:none}.md\:rvc-w-1\/2{width:50%}.md\:rvc-w-1\/3{width:33.333333%}.md\:rvc-grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:rvc-grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:rvc-gap-6{gap:1.5rem}}@media (min-width: 1024px){.lg\:rvc-max-w-6xl{max-width:72rem}.lg\:rvc-px-12{padding-left:3rem;padding-right:3rem}}@media (min-width: 1280px){.xl\:rvc-gap-1{gap:.25rem}}.less-opacity-class .\[\.less-opacity-class_\&\]\:rvc-opacity-50{opacity:.5}
|
|
@@ -43,13 +43,14 @@ export default (theme) => ({
|
|
|
43
43
|
'--rvc-dialog-footer-gap': theme('gap.2'),
|
|
44
44
|
|
|
45
45
|
// Base Input styling
|
|
46
|
-
'--rvc-input-color': theme('colors.slate.600'),
|
|
47
|
-
'--rvc-input-bg-color': theme('colors.white'),
|
|
48
|
-
'--rvc-input-icon-color': theme('colors.slate.400'),
|
|
49
|
-
'--rvc-input-icon-size': theme('width.5'),
|
|
50
|
-
'--rvc-input-padding-x': theme('padding.
|
|
51
|
-
'--rvc-input-font-size': 'var(--rvc-base-font-size)',
|
|
52
|
-
'--rvc-input-height': theme('height.9'),
|
|
46
|
+
'--rvc-base-input-color': theme('colors.slate.600'),
|
|
47
|
+
'--rvc-base-input-bg-color': theme('colors.white'),
|
|
48
|
+
'--rvc-base-input-icon-color': theme('colors.slate.400'),
|
|
49
|
+
'--rvc-base-input-icon-size': theme('width.5'),
|
|
50
|
+
'--rvc-base-input-padding-x': theme('padding.3'),
|
|
51
|
+
'--rvc-base-input-font-size': 'var(--rvc-base-font-size)',
|
|
52
|
+
'--rvc-base-input-height': theme('height.9'),
|
|
53
|
+
'--rvc-base-input-placeholder-color': theme('colors.slate.400'),
|
|
53
54
|
|
|
54
55
|
...theme('components.base'),
|
|
55
56
|
|
|
@@ -0,0 +1,224 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Combobox component
|
|
3
|
+
*
|
|
4
|
+
* @param {Object} theme - The global theme object
|
|
5
|
+
*/
|
|
6
|
+
export default (theme) => ({
|
|
7
|
+
':root': {
|
|
8
|
+
'--rvc-combobox-border-radius': 'var(--rvc-base-border-radius)',
|
|
9
|
+
'--rvc-combobox-border-width': 'var(--rvc-base-border-width)',
|
|
10
|
+
'--rvc-combobox-border-color': 'var(--rvc-base-border-color)',
|
|
11
|
+
'--rvc-combobox-font-size': 'var(--rvc-base-input-font-size)',
|
|
12
|
+
'--rvc-combobox-box-shadow': 'var(--rvc-base-box-shadow)',
|
|
13
|
+
'--rvc-combobox-color': 'var(--rvc-base-input-color)',
|
|
14
|
+
'--rvc-combobox-bg-color': 'var(--rvc-base-input-bg-color)',
|
|
15
|
+
'--rvc-combobox-padding-x': 'var(--rvc-base-input-padding-x)',
|
|
16
|
+
'--rvc-combobox-height': 'var(--rvc-base-input-height)',
|
|
17
|
+
'--rvc-combobox-icon-size': 'var(--rvc-base-input-icon-size)',
|
|
18
|
+
'--rvc-combobox-icon-color': 'var(--rvc-base-input-icon-color)',
|
|
19
|
+
'--rvc-combobox-icon-loading-animation': 'var(--rvc-base-loading-animation)',
|
|
20
|
+
'--rvc-combobox-placeholder-color': 'var(--rvc-base-input-placeholder-color)',
|
|
21
|
+
'--rvc-combobox-clear-color': 'var(--rvc-base-input-icon-color)',
|
|
22
|
+
'--rvc-combobox-clear-color-hover': theme('colors.slate.700'),
|
|
23
|
+
'--rvc-combobox-chip-icon-size': theme('width.4'),
|
|
24
|
+
'--rvc-combobox-chip-color': 'var(--rvc-base-input-color)',
|
|
25
|
+
'--rvc-combobox-chip-color-hover': theme('colors.slate.700'),
|
|
26
|
+
'--rvc-combobox-chips-spacing': theme('margin.2'),
|
|
27
|
+
'--rvc-combobox-options-offset': theme('margin.1'),
|
|
28
|
+
'--rvc-combobox-options-z-index': theme('zIndex.10'),
|
|
29
|
+
'--rvc-combobox-options-max-height': theme('maxHeight.60'),
|
|
30
|
+
'--rvc-combobox-options-padding-x': '0.1875rem',
|
|
31
|
+
'--rvc-combobox-options-padding-y': '0.1875rem',
|
|
32
|
+
'--rvc-combobox-option-padding-x': theme('padding.2'),
|
|
33
|
+
'--rvc-combobox-option-padding-y': theme('padding[1.5]'),
|
|
34
|
+
'--rvc-combobox-option-bg-color-hover': theme('colors.slate.100'),
|
|
35
|
+
'--rvc-combobox-option-bg-color-active': 'transparent',
|
|
36
|
+
'--rvc-combobox-option-color-active': 'var(--rvc-base-input-color)',
|
|
37
|
+
'--rvc-combobox-option-font-weight-active': theme('fontWeight.semibold'),
|
|
38
|
+
},
|
|
39
|
+
|
|
40
|
+
'.rvc-combobox': {
|
|
41
|
+
display: 'block',
|
|
42
|
+
...theme('components.combobox'),
|
|
43
|
+
|
|
44
|
+
'.rvc-combobox-wrapper': {
|
|
45
|
+
display: 'grid',
|
|
46
|
+
gridTemplateColumns: theme('gridTemplateColumns.1'),
|
|
47
|
+
position: 'relative',
|
|
48
|
+
width: '100%',
|
|
49
|
+
...theme('components.combobox[.rvc-combobox-wrapper]'),
|
|
50
|
+
|
|
51
|
+
// Extra right padding
|
|
52
|
+
'&:has(.rvc-combobox-button svg) input': {
|
|
53
|
+
paddingRight: 'calc(var(--rvc-combobox-padding-x) + var(--rvc-combobox-icon-size) + 0.25rem)',
|
|
54
|
+
},
|
|
55
|
+
|
|
56
|
+
'> svg': {
|
|
57
|
+
marginLeft: 'var(--rvc-combobox-padding-x)',
|
|
58
|
+
justifySelf: 'start',
|
|
59
|
+
...theme('components.combobox[.rvc-combobox-wrapper > svg]'),
|
|
60
|
+
},
|
|
61
|
+
},
|
|
62
|
+
|
|
63
|
+
input: {
|
|
64
|
+
borderRadius: 'var(--rvc-combobox-border-radius)',
|
|
65
|
+
borderWidth: 'var(--rvc-combobox-border-width)',
|
|
66
|
+
borderColor: 'var(--rvc-combobox-border-color)',
|
|
67
|
+
paddingRight: 'var(--rvc-combobox-padding-x)',
|
|
68
|
+
paddingLeft: 'var(--rvc-combobox-padding-x)',
|
|
69
|
+
backgroundColor: 'var(--rvc-combobox-bg-color)',
|
|
70
|
+
fontSize: 'var(--rvc-combobox-font-size)',
|
|
71
|
+
color: 'var(--rvc-combobox-color)',
|
|
72
|
+
boxShadow: 'var(--rvc-combobox-box-shadow)',
|
|
73
|
+
height: 'var(--rvc-combobox-height)',
|
|
74
|
+
backgroundImage: 'none',
|
|
75
|
+
width: '100%',
|
|
76
|
+
position: 'relative',
|
|
77
|
+
gridColumnStart: '1',
|
|
78
|
+
gridRowStart: '1',
|
|
79
|
+
appearance: 'none',
|
|
80
|
+
outlineWidth: 0,
|
|
81
|
+
...theme('components.combobox.input'),
|
|
82
|
+
|
|
83
|
+
// Extra left padding
|
|
84
|
+
'&:nth-child(2)': {
|
|
85
|
+
paddingLeft: 'calc(var(--rvc-combobox-padding-x) + var(--rvc-combobox-icon-size) + 0.25rem)',
|
|
86
|
+
},
|
|
87
|
+
|
|
88
|
+
'&::placeholder': {
|
|
89
|
+
color: 'var(--rvc-combobox-placeholder-color)',
|
|
90
|
+
...theme('components.combobox.input[&::placeholder]'),
|
|
91
|
+
},
|
|
92
|
+
},
|
|
93
|
+
|
|
94
|
+
'.rvc-combobox-button, .rvc-combobox-wrapper > svg': {
|
|
95
|
+
color: 'var(--rvc-combobox-icon-color)',
|
|
96
|
+
position: 'relative',
|
|
97
|
+
gridColumnStart: '1',
|
|
98
|
+
gridRowStart: '1',
|
|
99
|
+
alignSelf: 'center',
|
|
100
|
+
zIndex: '1',
|
|
101
|
+
},
|
|
102
|
+
|
|
103
|
+
'.rvc-combobox-button': {
|
|
104
|
+
justifySelf: 'end',
|
|
105
|
+
marginRight: 'var(--rvc-combobox-padding-x)',
|
|
106
|
+
...theme('components.combobox[.rvc-combobox-button]'),
|
|
107
|
+
},
|
|
108
|
+
|
|
109
|
+
svg: {
|
|
110
|
+
pointerEvents: 'none',
|
|
111
|
+
|
|
112
|
+
'&:not([class]), &.rvc-combobox-spinner': {
|
|
113
|
+
width: 'var(--rvc-combobox-icon-size)',
|
|
114
|
+
height: 'var(--rvc-combobox-icon-size)',
|
|
115
|
+
color: 'var(--rvc-select-icon-color)',
|
|
116
|
+
...theme('components.combobox.svg'),
|
|
117
|
+
},
|
|
118
|
+
},
|
|
119
|
+
|
|
120
|
+
'.rvc-combobox-spinner': {
|
|
121
|
+
animation: 'var(--rvc-combobox-icon-loading-animation)',
|
|
122
|
+
...theme('components.combobox[.rvc-combobox-spinner]'),
|
|
123
|
+
},
|
|
124
|
+
|
|
125
|
+
'.rvc-combobox-clear': {
|
|
126
|
+
...theme('components.combobox[.rvc-combobox-clear]'),
|
|
127
|
+
|
|
128
|
+
'> *': {
|
|
129
|
+
color: 'var(--rvc-combobox-clear-color)',
|
|
130
|
+
},
|
|
131
|
+
|
|
132
|
+
'&:hover > *': {
|
|
133
|
+
color: 'var(--rvc-combobox-clear-color-hover)',
|
|
134
|
+
},
|
|
135
|
+
},
|
|
136
|
+
|
|
137
|
+
'.rvc-combobox-chips': {
|
|
138
|
+
marginTop: 'var(--rvc-combobox-chips-spacing)',
|
|
139
|
+
display: 'flex',
|
|
140
|
+
flexWrap: 'wrap',
|
|
141
|
+
gap: 'var(--rvc-combobox-chips-spacing)',
|
|
142
|
+
...theme('components.combobox[.rvc-combobox-chips]'),
|
|
143
|
+
},
|
|
144
|
+
|
|
145
|
+
'.rvc-combobox-chip': {
|
|
146
|
+
color: 'var(--rvc-combobox-chip-color)',
|
|
147
|
+
...theme('components.combobox[.rvc-combobox-chip]'),
|
|
148
|
+
|
|
149
|
+
svg: {
|
|
150
|
+
width: 'var(--rvc-combobox-chip-icon-size)',
|
|
151
|
+
height: 'var(--rvc-combobox-chip-icon-size)',
|
|
152
|
+
...theme('components.combobox[.rvc-combobox-chip][svg]'),
|
|
153
|
+
},
|
|
154
|
+
|
|
155
|
+
'&:hover svg': {
|
|
156
|
+
color: 'var(--rvc-combobox-chip-color-hover)',
|
|
157
|
+
...theme('components.combobox[.rvc-combobox-chip][&:hover][svg]'),
|
|
158
|
+
},
|
|
159
|
+
},
|
|
160
|
+
|
|
161
|
+
'.rvc-combobox-options': {
|
|
162
|
+
paddingTop: 'var(--rvc-combobox-options-padding-y)',
|
|
163
|
+
paddingRight: 'var(--rvc-combobox-options-padding-x)',
|
|
164
|
+
paddingBottom: 'var(--rvc-combobox-options-padding-y)',
|
|
165
|
+
paddingLeft: 'var(--rvc-combobox-options-padding-x)',
|
|
166
|
+
top: 'calc(var(--rvc-combobox-height) + var(--rvc-combobox-options-offset))',
|
|
167
|
+
borderRadius: 'var(--rvc-combobox-border-radius)',
|
|
168
|
+
borderWidth: 'var(--rvc-combobox-border-width)',
|
|
169
|
+
borderColor: 'var(--rvc-combobox-border-color)',
|
|
170
|
+
backgroundColor: 'var(--rvc-combobox-bg-color)',
|
|
171
|
+
fontSize: 'var(--rvc-combobox-font-size)',
|
|
172
|
+
color: 'var(--rvc-combobox-color)',
|
|
173
|
+
boxShadow: 'var(--rvc-combobox-box-shadow)',
|
|
174
|
+
marginTop: 'var(--rvc-combobox-options-offset)',
|
|
175
|
+
zIndex: 'var(--rvc-combobox-options-z-index)',
|
|
176
|
+
maxHeight: 'var(--rvc-combobox-options-max-height)',
|
|
177
|
+
position: 'absolute',
|
|
178
|
+
width: '100%',
|
|
179
|
+
overflowY: 'auto',
|
|
180
|
+
...theme('components.combobox[.rvc-combobox-options]'),
|
|
181
|
+
},
|
|
182
|
+
|
|
183
|
+
'.rvc-combobox-option': {
|
|
184
|
+
paddingTop: 'var(--rvc-combobox-option-padding-y)',
|
|
185
|
+
paddingRight: 'var(--rvc-combobox-option-padding-x)',
|
|
186
|
+
paddingBottom: 'var(--rvc-combobox-option-padding-y)',
|
|
187
|
+
paddingLeft: 'var(--rvc-combobox-option-padding-x)',
|
|
188
|
+
borderRadius: 'var(--rvc-combobox-border-radius)',
|
|
189
|
+
color: 'var(--rvc-combobox-color)',
|
|
190
|
+
gap: theme('gap.2'),
|
|
191
|
+
alignItems: 'center',
|
|
192
|
+
position: 'relative',
|
|
193
|
+
display: 'flex',
|
|
194
|
+
userSelect: 'none',
|
|
195
|
+
cursor: 'pointer',
|
|
196
|
+
...theme('components.combobox[.rvc-combobox-option]'),
|
|
197
|
+
|
|
198
|
+
'&.rvc-combobox-option-hover': {
|
|
199
|
+
backgroundColor: 'var(--rvc-combobox-option-bg-color-hover)',
|
|
200
|
+
...theme('components.combobox[.rvc-combobox-option][&.rvc-combobox-option-hover]'),
|
|
201
|
+
},
|
|
202
|
+
|
|
203
|
+
'&.rvc-combobox-option-active': {
|
|
204
|
+
backgroundColor: 'var(--rvc-combobox-option-bg-color-active)',
|
|
205
|
+
color: 'var(--rvc-combobox-option-color-active)',
|
|
206
|
+
fontWeight: 'var(--rvc-combobox-option-font-weight-active)',
|
|
207
|
+
...theme('components.combobox[.rvc-combobox-option][&.rvc-combobox-option-active]'),
|
|
208
|
+
|
|
209
|
+
'&.rvc-combobox-option-hover': {
|
|
210
|
+
backgroundColor: 'var(--rvc-combobox-option-bg-color-hover)',
|
|
211
|
+
},
|
|
212
|
+
},
|
|
213
|
+
},
|
|
214
|
+
|
|
215
|
+
// Size variants
|
|
216
|
+
'&.rvc-combobox-sm': {
|
|
217
|
+
'--rvc-combobox-font-size': 'calc(var(--rvc-base-input-font-size) * 0.9)',
|
|
218
|
+
'--rvc-combobox-padding-x': 'calc(var(--rvc-base-input-padding-x) * 0.85)',
|
|
219
|
+
'--rvc-combobox-icon-size': 'calc(var(--rvc-base-input-icon-size) * 0.85)',
|
|
220
|
+
'--rvc-combobox-height': '1.875rem',
|
|
221
|
+
...theme('components.combobox.sm'),
|
|
222
|
+
},
|
|
223
|
+
},
|
|
224
|
+
});
|
|
@@ -5,14 +5,14 @@
|
|
|
5
5
|
*/
|
|
6
6
|
export default (theme) => ({
|
|
7
7
|
':root': {
|
|
8
|
-
'--rvc-dropdown-bg-color': 'var(--rvc-input-bg-color)',
|
|
8
|
+
'--rvc-dropdown-bg-color': 'var(--rvc-base-input-bg-color)',
|
|
9
9
|
'--rvc-dropdown-border-radius': 'var(--rvc-base-border-radius)',
|
|
10
10
|
'--rvc-dropdown-border-width': 'var(--rvc-base-border-width)',
|
|
11
11
|
'--rvc-dropdown-border-color': 'var(--rvc-base-border-color)',
|
|
12
|
-
'--rvc-dropdown-icon-size': 'var(--rvc-input-icon-size)',
|
|
13
|
-
'--rvc-dropdown-icon-color': 'var(--rvc-input-icon-color)',
|
|
14
|
-
'--rvc-dropdown-icon-color-hover': 'var(--rvc-input-icon-color)',
|
|
15
|
-
'--rvc-dropdown-item-color': 'var(--rvc-input-color)',
|
|
12
|
+
'--rvc-dropdown-icon-size': 'var(--rvc-base-input-icon-size)',
|
|
13
|
+
'--rvc-dropdown-icon-color': 'var(--rvc-base-input-icon-color)',
|
|
14
|
+
'--rvc-dropdown-icon-color-hover': 'var(--rvc-base-input-icon-color)',
|
|
15
|
+
'--rvc-dropdown-item-color': 'var(--rvc-base-input-color)',
|
|
16
16
|
'--rvc-dropdown-font-size': 'var(--rvc-base-font-size)',
|
|
17
17
|
'--rvc-dropdown-width': theme('width.56'),
|
|
18
18
|
'--rvc-dropdown-padding-x': theme('padding.6'),
|
|
@@ -0,0 +1,99 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Input component
|
|
3
|
+
*
|
|
4
|
+
* @param {Object} theme - The global theme object
|
|
5
|
+
*/
|
|
6
|
+
export default (theme) => ({
|
|
7
|
+
':root': {
|
|
8
|
+
'--rvc-input-border-radius': 'var(--rvc-base-border-radius)',
|
|
9
|
+
'--rvc-input-border-width': 'var(--rvc-base-border-width)',
|
|
10
|
+
'--rvc-input-border-color': 'var(--rvc-base-border-color)',
|
|
11
|
+
'--rvc-input-font-size': 'var(--rvc-base-input-font-size)',
|
|
12
|
+
'--rvc-input-box-shadow': 'var(--rvc-base-box-shadow)',
|
|
13
|
+
'--rvc-input-color': 'var(--rvc-base-input-color)',
|
|
14
|
+
'--rvc-input-bg-color': 'var(--rvc-base-input-bg-color)',
|
|
15
|
+
'--rvc-input-icon-size': 'var(--rvc-base-input-icon-size)',
|
|
16
|
+
'--rvc-input-icon-color': 'var(--rvc-base-input-icon-color)',
|
|
17
|
+
'--rvc-input-padding-x': 'var(--rvc-base-input-padding-x)',
|
|
18
|
+
'--rvc-input-height': 'var(--rvc-base-input-height)',
|
|
19
|
+
'--rvc-input-placeholder-color': 'var(--rvc-base-input-placeholder-color)',
|
|
20
|
+
},
|
|
21
|
+
|
|
22
|
+
'.rvc-input': {
|
|
23
|
+
display: 'grid',
|
|
24
|
+
gridTemplateColumns: theme('gridTemplateColumns.1'),
|
|
25
|
+
...theme('components.input'),
|
|
26
|
+
|
|
27
|
+
input: {
|
|
28
|
+
borderRadius: 'var(--rvc-input-border-radius)',
|
|
29
|
+
borderWidth: 'var(--rvc-input-border-width)',
|
|
30
|
+
borderColor: 'var(--rvc-input-border-color)',
|
|
31
|
+
paddingRight: 'var(--rvc-input-padding-x)',
|
|
32
|
+
paddingLeft: 'var(--rvc-input-padding-x)',
|
|
33
|
+
backgroundColor: 'var(--rvc-input-bg-color)',
|
|
34
|
+
fontSize: 'var(--rvc-input-font-size)',
|
|
35
|
+
color: 'var(--rvc-input-color)',
|
|
36
|
+
boxShadow: 'var(--rvc-input-box-shadow)',
|
|
37
|
+
height: 'var(--rvc-input-height)',
|
|
38
|
+
backgroundImage: 'none',
|
|
39
|
+
width: '100%',
|
|
40
|
+
position: 'relative',
|
|
41
|
+
gridColumnStart: '1',
|
|
42
|
+
gridRowStart: '1',
|
|
43
|
+
appearance: 'none',
|
|
44
|
+
outlineWidth: 0,
|
|
45
|
+
...theme('components.input.input'),
|
|
46
|
+
|
|
47
|
+
// Extra left padding
|
|
48
|
+
'&:nth-child(2)': {
|
|
49
|
+
paddingLeft: 'calc(var(--rvc-input-padding-x) + var(--rvc-input-icon-size) + 0.25rem)',
|
|
50
|
+
},
|
|
51
|
+
|
|
52
|
+
'&::placeholder': {
|
|
53
|
+
color: 'var(--rvc-input-placeholder-color)',
|
|
54
|
+
...theme('components.input.input[&::placeholder]'),
|
|
55
|
+
},
|
|
56
|
+
},
|
|
57
|
+
|
|
58
|
+
// Extra right padding
|
|
59
|
+
'&:has(svg:last-child) input': {
|
|
60
|
+
paddingRight: 'calc(var(--rvc-input-padding-x) + var(--rvc-input-icon-size) + 0.25rem)',
|
|
61
|
+
},
|
|
62
|
+
|
|
63
|
+
'.rvc-input-prefix, svg': {
|
|
64
|
+
color: 'var(--rvc-input-icon-color)',
|
|
65
|
+
position: 'relative',
|
|
66
|
+
gridColumnStart: '1',
|
|
67
|
+
gridRowStart: '1',
|
|
68
|
+
alignSelf: 'center',
|
|
69
|
+
pointerEvents: 'none',
|
|
70
|
+
zIndex: '1',
|
|
71
|
+
},
|
|
72
|
+
|
|
73
|
+
'.rvc-input-prefix': {
|
|
74
|
+
marginLeft: 'var(--rvc-input-padding-x)',
|
|
75
|
+
justifySelf: 'start',
|
|
76
|
+
...theme('components.input[.rvc-input-prefix]'),
|
|
77
|
+
},
|
|
78
|
+
|
|
79
|
+
svg: {
|
|
80
|
+
width: 'var(--rvc-input-icon-size)',
|
|
81
|
+
height: 'var(--rvc-input-icon-size)',
|
|
82
|
+
justifySelf: 'end',
|
|
83
|
+
...theme('components.input.svg'),
|
|
84
|
+
|
|
85
|
+
'&:last-child:not(:first-child)': {
|
|
86
|
+
marginRight: 'var(--rvc-input-padding-x)',
|
|
87
|
+
},
|
|
88
|
+
},
|
|
89
|
+
|
|
90
|
+
// Size variants
|
|
91
|
+
'&.rvc-input-sm': {
|
|
92
|
+
'--rvc-input-font-size': 'calc(var(--rvc-base-input-font-size) * 0.9)',
|
|
93
|
+
'--rvc-input-padding-x': 'calc(var(--rvc-base-input-padding-x) * 0.85)',
|
|
94
|
+
'--rvc-input-icon-size': 'calc(var(--rvc-base-input-icon-size) * 0.85)',
|
|
95
|
+
'--rvc-input-height': '1.875rem',
|
|
96
|
+
...theme('components.input.sm'),
|
|
97
|
+
},
|
|
98
|
+
},
|
|
99
|
+
});
|
|
@@ -8,14 +8,15 @@ export default (theme) => ({
|
|
|
8
8
|
'--rvc-select-border-radius': 'var(--rvc-base-border-radius)',
|
|
9
9
|
'--rvc-select-border-width': 'var(--rvc-base-border-width)',
|
|
10
10
|
'--rvc-select-border-color': 'var(--rvc-base-border-color)',
|
|
11
|
-
'--rvc-select-font-size': 'var(--rvc-input-font-size)',
|
|
11
|
+
'--rvc-select-font-size': 'var(--rvc-base-input-font-size)',
|
|
12
12
|
'--rvc-select-box-shadow': 'var(--rvc-base-box-shadow)',
|
|
13
|
-
'--rvc-select-color': 'var(--rvc-input-color)',
|
|
14
|
-
'--rvc-select-bg-color': 'var(--rvc-input-bg-color)',
|
|
15
|
-
'--rvc-select-icon-size': 'var(--rvc-input-icon-size)',
|
|
16
|
-
'--rvc-select-icon-color': 'var(--rvc-input-icon-color)',
|
|
17
|
-
'--rvc-select-padding-x': 'var(--rvc-input-padding-x)',
|
|
18
|
-
'--rvc-select-height': 'var(--rvc-input-height)',
|
|
13
|
+
'--rvc-select-color': 'var(--rvc-base-input-color)',
|
|
14
|
+
'--rvc-select-bg-color': 'var(--rvc-base-input-bg-color)',
|
|
15
|
+
'--rvc-select-icon-size': 'var(--rvc-base-input-icon-size)',
|
|
16
|
+
'--rvc-select-icon-color': 'var(--rvc-base-input-icon-color)',
|
|
17
|
+
'--rvc-select-padding-x': 'var(--rvc-base-input-padding-x)',
|
|
18
|
+
'--rvc-select-height': 'var(--rvc-base-input-height)',
|
|
19
|
+
'--rvc-select-placeholder-color': 'var(--rvc-base-input-placeholder-color)',
|
|
19
20
|
},
|
|
20
21
|
|
|
21
22
|
'.rvc-select': {
|
|
@@ -27,8 +28,8 @@ export default (theme) => ({
|
|
|
27
28
|
borderRadius: 'var(--rvc-select-border-radius)',
|
|
28
29
|
borderWidth: 'var(--rvc-select-border-width)',
|
|
29
30
|
borderColor: 'var(--rvc-select-border-color)',
|
|
30
|
-
paddingRight: 'var(--rvc-select-padding-x)',
|
|
31
|
-
paddingLeft: '
|
|
31
|
+
paddingRight: 'calc(var(--rvc-select-padding-x) + var(--rvc-select-icon-size) + 0.25rem)',
|
|
32
|
+
paddingLeft: 'var(--rvc-select-padding-x)',
|
|
32
33
|
backgroundColor: 'var(--rvc-select-bg-color)',
|
|
33
34
|
backgroundImage: 'none',
|
|
34
35
|
fontSize: 'var(--rvc-select-font-size)',
|
|
@@ -43,7 +44,7 @@ export default (theme) => ({
|
|
|
43
44
|
...theme('components.select.select'),
|
|
44
45
|
|
|
45
46
|
'&:nth-child(2)': {
|
|
46
|
-
paddingLeft: 'calc(var(--rvc-select-padding-x) + 0.25rem)',
|
|
47
|
+
paddingLeft: 'calc(var(--rvc-select-padding-x) + var(--rvc-select-icon-size) + 0.25rem)',
|
|
47
48
|
...theme('components.select.select[&:nth-child(2)]'),
|
|
48
49
|
},
|
|
49
50
|
},
|
|
@@ -63,20 +64,21 @@ export default (theme) => ({
|
|
|
63
64
|
|
|
64
65
|
'&:first-child': {
|
|
65
66
|
justifySelf: 'start',
|
|
66
|
-
marginLeft: '
|
|
67
|
+
marginLeft: 'var(--rvc-select-padding-x)',
|
|
67
68
|
...theme('components.select.svg[&:first-child]'),
|
|
68
69
|
},
|
|
69
70
|
|
|
70
71
|
'&:last-child': {
|
|
71
|
-
marginRight: '
|
|
72
|
+
marginRight: 'var(--rvc-select-padding-x)',
|
|
72
73
|
...theme('components.select.svg[&:last-child]'),
|
|
73
74
|
},
|
|
74
75
|
},
|
|
75
76
|
|
|
76
77
|
// Size variants
|
|
77
78
|
'&.rvc-select-sm': {
|
|
78
|
-
'--rvc-select-font-size': 'calc(var(--rvc-input-font-size) * 0.9)',
|
|
79
|
-
'--rvc-select-padding-x': 'calc(var(--rvc-input-padding-x) * 0.85)',
|
|
79
|
+
'--rvc-select-font-size': 'calc(var(--rvc-base-input-font-size) * 0.9)',
|
|
80
|
+
'--rvc-select-padding-x': 'calc(var(--rvc-base-input-padding-x) * 0.85)',
|
|
81
|
+
'--rvc-select-icon-size': 'calc(var(--rvc-base-input-icon-size) * 0.85)',
|
|
80
82
|
'--rvc-select-height': '1.875rem',
|
|
81
83
|
...theme('components.select.sm'),
|
|
82
84
|
},
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Textarea component
|
|
3
|
+
*
|
|
4
|
+
* @param {Object} theme - The global theme object
|
|
5
|
+
*/
|
|
6
|
+
export default (theme) => ({
|
|
7
|
+
':root': {
|
|
8
|
+
'--rvc-textarea-border-radius': 'var(--rvc-base-border-radius)',
|
|
9
|
+
'--rvc-textarea-border-width': 'var(--rvc-base-border-width)',
|
|
10
|
+
'--rvc-textarea-border-color': 'var(--rvc-base-border-color)',
|
|
11
|
+
'--rvc-textarea-font-size': 'var(--rvc-base-input-font-size)',
|
|
12
|
+
'--rvc-textarea-box-shadow': 'var(--rvc-base-box-shadow)',
|
|
13
|
+
'--rvc-textarea-color': 'var(--rvc-base-input-color)',
|
|
14
|
+
'--rvc-textarea-bg-color': 'var(--rvc-base-input-bg-color)',
|
|
15
|
+
'--rvc-textarea-padding-x': 'var(--rvc-base-input-padding-x)',
|
|
16
|
+
'--rvc-textarea-height': 'var(--rvc-base-input-height)',
|
|
17
|
+
'--rvc-textarea-placeholder-color': 'var(--rvc-base-input-placeholder-color)',
|
|
18
|
+
'--rvc-textarea-padding-y': theme('padding[1.5]'),
|
|
19
|
+
},
|
|
20
|
+
|
|
21
|
+
'.rvc-textarea': {
|
|
22
|
+
borderRadius: 'var(--rvc-textarea-border-radius)',
|
|
23
|
+
borderWidth: 'var(--rvc-textarea-border-width)',
|
|
24
|
+
borderColor: 'var(--rvc-textarea-border-color)',
|
|
25
|
+
paddingTop: 'var(--rvc-textarea-padding-y)',
|
|
26
|
+
paddingRight: 'var(--rvc-textarea-padding-x)',
|
|
27
|
+
paddingBottom: 'var(--rvc-textarea-padding-y)',
|
|
28
|
+
paddingLeft: 'var(--rvc-textarea-padding-x)',
|
|
29
|
+
backgroundColor: 'var(--rvc-textarea-bg-color)',
|
|
30
|
+
fontSize: 'var(--rvc-textarea-font-size)',
|
|
31
|
+
color: 'var(--rvc-textarea-color)',
|
|
32
|
+
boxShadow: 'var(--rvc-textarea-box-shadow)',
|
|
33
|
+
minHeight: 'var(--rvc-textarea-height)',
|
|
34
|
+
display: 'block',
|
|
35
|
+
backgroundImage: 'none',
|
|
36
|
+
width: '100%',
|
|
37
|
+
position: 'relative',
|
|
38
|
+
appearance: 'none',
|
|
39
|
+
outlineWidth: 0,
|
|
40
|
+
...theme('components.textarea'),
|
|
41
|
+
|
|
42
|
+
// Size variants
|
|
43
|
+
'&.rvc-textarea-sm': {
|
|
44
|
+
'--rvc-textarea-font-size': 'calc(var(--rvc-base-input-font-size) * 0.9)',
|
|
45
|
+
'--rvc-textarea-padding-x': 'calc(var(--rvc-base-input-padding-x) * 0.85)',
|
|
46
|
+
'--rvc-textarea-padding-y': `calc(${theme('padding[1.5]')} * 0.75)`,
|
|
47
|
+
'--rvc-textarea-height': '1.875rem',
|
|
48
|
+
...theme('components.textarea.sm'),
|
|
49
|
+
},
|
|
50
|
+
},
|
|
51
|
+
});
|
package/dist/tailwind/index.js
CHANGED
|
@@ -9,9 +9,11 @@ import alert from './components/alert.js';
|
|
|
9
9
|
import badge from './components/badge.js';
|
|
10
10
|
import button from './components/button.js';
|
|
11
11
|
import checkbox from './components/checkbox.js';
|
|
12
|
+
import combobox from './components/combobox.js';
|
|
12
13
|
import drawer from './components/drawer.js';
|
|
13
14
|
import dropdown from './components/dropdown.js';
|
|
14
15
|
import emptyState from './components/empty-state.js';
|
|
16
|
+
import input from './components/input.js';
|
|
15
17
|
import lightswitch from './components/lightswitch.js';
|
|
16
18
|
import modal from './components/modal.js';
|
|
17
19
|
import pagination from './components/pagination.js';
|
|
@@ -19,6 +21,7 @@ import radio from './components/radio.js';
|
|
|
19
21
|
import select from './components/select.js';
|
|
20
22
|
import table from './components/table.js';
|
|
21
23
|
import tabs from './components/tabs.js';
|
|
24
|
+
import textarea from './components/textarea.js';
|
|
22
25
|
import toast from './components/toast.js';
|
|
23
26
|
import tooltip from './components/tooltip.js';
|
|
24
27
|
|
|
@@ -41,9 +44,11 @@ export default plugin.withOptions(
|
|
|
41
44
|
badge(theme),
|
|
42
45
|
button(theme),
|
|
43
46
|
checkbox(theme),
|
|
47
|
+
combobox(theme),
|
|
44
48
|
drawer(theme),
|
|
45
49
|
dropdown(theme),
|
|
46
50
|
emptyState(theme),
|
|
51
|
+
input(theme),
|
|
47
52
|
lightswitch(theme),
|
|
48
53
|
pagination(theme),
|
|
49
54
|
modal(theme),
|
|
@@ -51,6 +56,7 @@ export default plugin.withOptions(
|
|
|
51
56
|
select(theme),
|
|
52
57
|
table(theme),
|
|
53
58
|
tabs(theme),
|
|
59
|
+
textarea(theme),
|
|
54
60
|
toast(theme),
|
|
55
61
|
tooltip(theme),
|
|
56
62
|
], { respectPrefix: false });
|
|
@@ -65,15 +71,19 @@ export default plugin.withOptions(
|
|
|
65
71
|
'rvc-badge',
|
|
66
72
|
'rvc-button',
|
|
67
73
|
'rvc-checkbox',
|
|
74
|
+
'rvc-combobox',
|
|
68
75
|
'rvc-drawer',
|
|
69
76
|
'rvc-dropdown',
|
|
70
77
|
'rvc-empty-state',
|
|
78
|
+
'rvc-input',
|
|
71
79
|
'rvc-lightswitch-group',
|
|
72
80
|
'rvc-modal',
|
|
81
|
+
'rvc-radio',
|
|
73
82
|
'rvc-pagination',
|
|
74
83
|
'rvc-select',
|
|
75
84
|
'rvc-table',
|
|
76
85
|
'rvc-tabs',
|
|
86
|
+
'rvc-textarea',
|
|
77
87
|
'rvc-toast',
|
|
78
88
|
'rvc-tooltip',
|
|
79
89
|
],
|