@robuust-digital/vue-components 1.2.5 → 1.2.7

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 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-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-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-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-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}
@@ -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.8'),
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
 
@@ -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'),
@@ -47,39 +47,39 @@ export default (theme) => ({
47
47
  flexDirection: 'column',
48
48
  alignItems: 'flex-start',
49
49
  ...theme('components.dropdown'),
50
- },
51
50
 
52
- '.rvc-dropdown-item': {
53
- color: 'var(--rvc-dropdown-item-color)',
54
- backgroundColor: 'var(--rvc-dropdown-item-bg-color)',
55
- gap: 'var(--rvc-dropdown-item-gap)',
56
- paddingRight: 'var(--rvc-dropdown-item-padding-x)',
57
- paddingLeft: 'var(--rvc-dropdown-item-padding-x)',
58
- paddingTop: 'var(--rvc-dropdown-item-padding-y)',
59
- paddingBottom: 'var(--rvc-dropdown-item-padding-y)',
60
- borderRadius: 'var(--rvc-dropdown-item-border-radius)',
61
- display: 'flex',
62
- alignItems: 'center',
63
- width: '100%',
64
- ...theme('components.dropdown[.rvc-dropdown-item]'),
51
+ '.rvc-dropdown-item': {
52
+ color: 'var(--rvc-dropdown-item-color)',
53
+ backgroundColor: 'var(--rvc-dropdown-item-bg-color)',
54
+ gap: 'var(--rvc-dropdown-item-gap)',
55
+ paddingRight: 'var(--rvc-dropdown-item-padding-x)',
56
+ paddingLeft: 'var(--rvc-dropdown-item-padding-x)',
57
+ paddingTop: 'var(--rvc-dropdown-item-padding-y)',
58
+ paddingBottom: 'var(--rvc-dropdown-item-padding-y)',
59
+ borderRadius: 'var(--rvc-dropdown-item-border-radius)',
60
+ display: 'flex',
61
+ alignItems: 'center',
62
+ width: '100%',
63
+ ...theme('components.dropdown[.rvc-dropdown-item]'),
65
64
 
66
- '&:hover': {
67
- color: 'var(--rvc-dropdown-item-color-hover)',
68
- backgroundColor: 'var(--rvc-dropdown-item-bg-color-hover)',
69
- textDecoration: 'underline',
70
- ...theme('components.dropdown[.rvc-dropdown-item][&:hover]'),
65
+ '&:hover': {
66
+ color: 'var(--rvc-dropdown-item-color-hover)',
67
+ backgroundColor: 'var(--rvc-dropdown-item-bg-color-hover)',
68
+ textDecoration: 'underline',
69
+ ...theme('components.dropdown[.rvc-dropdown-item][&:hover]'),
71
70
 
72
- '.rvc-dropdown-item-icon': {
73
- color: 'var(--rvc-dropdown-icon-color-hover)',
74
- ...theme('components.dropdown[.rvc-dropdown-item][&:hover][.rvc-dropdown-item-icon]'),
71
+ '.rvc-dropdown-item-icon': {
72
+ color: 'var(--rvc-dropdown-icon-color-hover)',
73
+ ...theme('components.dropdown[.rvc-dropdown-item][&:hover][.rvc-dropdown-item-icon]'),
74
+ },
75
75
  },
76
- },
77
76
 
78
- '.rvc-dropdown-item-icon': {
79
- width: 'var(--rvc-dropdown-icon-size)',
80
- height: 'var(--rvc-dropdown-icon-size)',
81
- color: 'var(--rvc-dropdown-icon-color)',
82
- ...theme('components.dropdown[.rvc-dropdown-item][.rvc-dropdown-item-icon]'),
77
+ '.rvc-dropdown-item-icon': {
78
+ width: 'var(--rvc-dropdown-icon-size)',
79
+ height: 'var(--rvc-dropdown-icon-size)',
80
+ color: 'var(--rvc-dropdown-icon-color)',
81
+ ...theme('components.dropdown[.rvc-dropdown-item][.rvc-dropdown-item-icon]'),
82
+ },
83
83
  },
84
84
  },
85
85
  });
@@ -50,20 +50,20 @@ export default (theme) => ({
50
50
  marginTop: theme('margin.4'),
51
51
  ...theme('components.emptyState[.rvc-button]'),
52
52
  },
53
- },
54
53
 
55
- '.rvc-empty-state-title': {
56
- color: 'var(--rvc-empty-state-title-color)',
57
- fontWeight: 'var(--rvc-empty-state-title-fontweight)',
58
- marginBottom: theme('margin.2'),
59
- display: 'block',
60
- ...theme('components.emptyState[.rvc-empty-state-title]'),
61
- },
54
+ '.rvc-empty-state-title': {
55
+ color: 'var(--rvc-empty-state-title-color)',
56
+ fontWeight: 'var(--rvc-empty-state-title-fontweight)',
57
+ marginBottom: theme('margin.2'),
58
+ display: 'block',
59
+ ...theme('components.emptyState[.rvc-empty-state-title]'),
60
+ },
62
61
 
63
- '.rvc-empty-state-icon': {
64
- width: 'var(--rvc-empty-state-icon-size)',
65
- height: 'var(--rvc-empty-state-icon-size)',
66
- marginBottom: theme('margin.2'),
67
- ...theme('components.emptyState[.rvc-empty-state-icon]'),
62
+ '.rvc-empty-state-icon': {
63
+ width: 'var(--rvc-empty-state-icon-size)',
64
+ height: 'var(--rvc-empty-state-icon-size)',
65
+ marginBottom: theme('margin.2'),
66
+ ...theme('components.emptyState[.rvc-empty-state-icon]'),
67
+ },
68
68
  },
69
69
  });
@@ -0,0 +1,100 @@
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
+ flexShrink: '0',
26
+ ...theme('components.input'),
27
+
28
+ input: {
29
+ borderRadius: 'var(--rvc-input-border-radius)',
30
+ borderWidth: 'var(--rvc-input-border-width)',
31
+ borderColor: 'var(--rvc-input-border-color)',
32
+ paddingRight: 'var(--rvc-input-padding-x)',
33
+ paddingLeft: 'var(--rvc-input-padding-x)',
34
+ backgroundColor: 'var(--rvc-input-bg-color)',
35
+ fontSize: 'var(--rvc-input-font-size)',
36
+ color: 'var(--rvc-input-color)',
37
+ boxShadow: 'var(--rvc-input-box-shadow)',
38
+ height: 'var(--rvc-input-height)',
39
+ backgroundImage: 'none',
40
+ width: '100%',
41
+ position: 'relative',
42
+ gridColumnStart: '1',
43
+ gridRowStart: '1',
44
+ appearance: 'textfield',
45
+ outlineWidth: 0,
46
+ ...theme('components.input.input'),
47
+
48
+ // Extra left padding
49
+ '&:nth-child(2)': {
50
+ paddingLeft: 'calc(var(--rvc-input-padding-x) + var(--rvc-input-icon-size) + 0.25rem)',
51
+ },
52
+
53
+ '&::placeholder': {
54
+ color: 'var(--rvc-input-placeholder-color)',
55
+ ...theme('components.input.input[&::placeholder]'),
56
+ },
57
+ },
58
+
59
+ // Extra right padding
60
+ '&:has(svg:last-child) input': {
61
+ paddingRight: 'calc(var(--rvc-input-padding-x) + var(--rvc-input-icon-size) + 0.25rem)',
62
+ },
63
+
64
+ '.rvc-input-prefix, svg': {
65
+ color: 'var(--rvc-input-icon-color)',
66
+ position: 'relative',
67
+ gridColumnStart: '1',
68
+ gridRowStart: '1',
69
+ alignSelf: 'center',
70
+ pointerEvents: 'none',
71
+ zIndex: '1',
72
+ },
73
+
74
+ '.rvc-input-prefix': {
75
+ marginLeft: 'var(--rvc-input-padding-x)',
76
+ justifySelf: 'start',
77
+ ...theme('components.input[.rvc-input-prefix]'),
78
+ },
79
+
80
+ svg: {
81
+ width: 'var(--rvc-input-icon-size)',
82
+ height: 'var(--rvc-input-icon-size)',
83
+ justifySelf: 'end',
84
+ ...theme('components.input.svg'),
85
+
86
+ '&:last-child:not(:first-child)': {
87
+ marginRight: 'var(--rvc-input-padding-x)',
88
+ },
89
+ },
90
+
91
+ // Size variants
92
+ '&.rvc-input-sm': {
93
+ '--rvc-input-font-size': 'calc(var(--rvc-base-input-font-size) * 0.9)',
94
+ '--rvc-input-padding-x': 'calc(var(--rvc-base-input-padding-x) * 0.85)',
95
+ '--rvc-input-icon-size': 'calc(var(--rvc-base-input-icon-size) * 0.85)',
96
+ '--rvc-input-height': '1.875rem',
97
+ ...theme('components.input.sm'),
98
+ },
99
+ },
100
+ });
@@ -27,49 +27,49 @@ export default (theme) => ({
27
27
  alignItems: 'flex-start',
28
28
  cursor: 'pointer',
29
29
  ...theme('components.radio'),
30
- },
31
30
 
32
- input: {
33
- '&:checked': {
34
- '+ .rvc-radio-input': {
35
- backgroundColor: 'var(--rvc-radio-input-checked-bg-color)',
36
- borderColor: 'var(--rvc-radio-input-checked-border-color)',
37
- ...theme('components.radio.input.checked'),
38
- '&::before': {
39
- opacity: '1',
40
- ...theme('components.radio.input.checked.toggle'),
31
+ input: {
32
+ '&:checked': {
33
+ '+ .rvc-radio-input': {
34
+ backgroundColor: 'var(--rvc-radio-input-checked-bg-color)',
35
+ borderColor: 'var(--rvc-radio-input-checked-border-color)',
36
+ ...theme('components.radio.input.checked'),
37
+ '&::before': {
38
+ opacity: '1',
39
+ ...theme('components.radio.input.checked.toggle'),
40
+ },
41
41
  },
42
42
  },
43
43
  },
44
- },
45
44
 
46
- label: {
47
- fontSize: 'var(--rvc-radio-font-size)',
48
- fontWeight: 'var(--rvc-radio-font-weight)',
49
- color: 'var(--rvc-radio-color)',
50
- ...theme('components.radio.label'),
51
- },
45
+ label: {
46
+ fontSize: 'var(--rvc-radio-font-size)',
47
+ fontWeight: 'var(--rvc-radio-font-weight)',
48
+ color: 'var(--rvc-radio-color)',
49
+ ...theme('components.radio.label'),
50
+ },
52
51
 
53
- '.rvc-radio-input': {
54
- width: 'var(--rvc-radio-input-size)',
55
- height: 'var(--rvc-radio-input-size)',
56
- borderRadius: 'var(--rvc-radio-input-border-radius)',
57
- borderWidth: 'var(--rvc-radio-input-border-width)',
58
- boxShadow: 'var(--rvc-radio-input-box-shadow)',
59
- borderColor: 'var(--rvc-radio-input-border-color)',
60
- display: 'inline-flex',
61
- alignItems: 'center',
62
- justifyContent: 'center',
63
- marginTop: theme('margin.1'),
64
- ...theme('components.radio.input'),
65
- '&::before': {
66
- backgroundColor: 'var(--rvc-radio-input-checked-icon-color)',
67
- borderRadius: 'var(--rvc-radio-input-checked-icon-border-radius)',
68
- content: '""',
69
- opacity: '0',
70
- width: theme('width[1.5]'),
71
- height: theme('height[1.5]'),
72
- ...theme('components.radio.input.toggle'),
52
+ '.rvc-radio-input': {
53
+ width: 'var(--rvc-radio-input-size)',
54
+ height: 'var(--rvc-radio-input-size)',
55
+ borderRadius: 'var(--rvc-radio-input-border-radius)',
56
+ borderWidth: 'var(--rvc-radio-input-border-width)',
57
+ boxShadow: 'var(--rvc-radio-input-box-shadow)',
58
+ borderColor: 'var(--rvc-radio-input-border-color)',
59
+ display: 'inline-flex',
60
+ alignItems: 'center',
61
+ justifyContent: 'center',
62
+ marginTop: theme('margin.1'),
63
+ ...theme('components.radio.input'),
64
+ '&::before': {
65
+ backgroundColor: 'var(--rvc-radio-input-checked-icon-color)',
66
+ borderRadius: 'var(--rvc-radio-input-checked-icon-border-radius)',
67
+ content: '""',
68
+ opacity: '0',
69
+ width: theme('width[1.5]'),
70
+ height: theme('height[1.5]'),
71
+ ...theme('components.radio.input.toggle'),
72
+ },
73
73
  },
74
74
  },
75
75
  });
@@ -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,9 +28,10 @@ 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: 'calc(var(--rvc-select-padding-x) - var(--rvc-select-icon-size))',
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)',
34
+ backgroundImage: 'none',
33
35
  fontSize: 'var(--rvc-select-font-size)',
34
36
  color: 'var(--rvc-select-color)',
35
37
  boxShadow: 'var(--rvc-select-box-shadow)',
@@ -40,25 +42,43 @@ export default (theme) => ({
40
42
  appearance: 'none',
41
43
  outlineWidth: 0,
42
44
  ...theme('components.select.select'),
45
+
46
+ '&:nth-child(2)': {
47
+ paddingLeft: 'calc(var(--rvc-select-padding-x) + var(--rvc-select-icon-size) + 0.25rem)',
48
+ ...theme('components.select.select[&:nth-child(2)]'),
49
+ },
43
50
  },
44
51
 
45
52
  svg: {
46
53
  width: 'var(--rvc-select-icon-size)',
47
54
  height: 'var(--rvc-select-icon-size)',
48
- marginRight: 'calc(var(--rvc-select-padding-x) - var(--rvc-select-icon-size) - 2px)',
49
55
  color: 'var(--rvc-select-icon-color)',
56
+ position: 'relative',
50
57
  gridColumnStart: '1',
51
58
  gridRowStart: '1',
52
59
  alignSelf: 'center',
53
60
  justifySelf: 'end',
54
61
  pointerEvents: 'none',
62
+ zIndex: '1',
55
63
  ...theme('components.select.svg'),
64
+
65
+ '&:first-child': {
66
+ justifySelf: 'start',
67
+ marginLeft: 'var(--rvc-select-padding-x)',
68
+ ...theme('components.select.svg[&:first-child]'),
69
+ },
70
+
71
+ '&:last-child': {
72
+ marginRight: 'var(--rvc-select-padding-x)',
73
+ ...theme('components.select.svg[&:last-child]'),
74
+ },
56
75
  },
57
76
 
58
77
  // Size variants
59
78
  '&.rvc-select-sm': {
60
- '--rvc-select-font-size': 'calc(var(--rvc-input-font-size) * 0.9)',
61
- '--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)',
62
82
  '--rvc-select-height': '1.875rem',
63
83
  ...theme('components.select.sm'),
64
84
  },
@@ -60,36 +60,36 @@ export default (theme) => ({
60
60
  },
61
61
  },
62
62
  },
63
- },
64
63
 
65
- '.rvc-tabs-nav': {
66
- display: 'flex',
67
- gap: 'var(--rvc-tabs-gap)',
68
- marginBottom: 'calc(var(--rvc-tabs-border-width) * -1)',
69
- ...theme('components.tabs.nav'),
70
- },
64
+ '.rvc-tabs-nav': {
65
+ display: 'flex',
66
+ gap: 'var(--rvc-tabs-gap)',
67
+ marginBottom: 'calc(var(--rvc-tabs-border-width) * -1)',
68
+ ...theme('components.tabs.nav'),
69
+ },
71
70
 
72
- '.rvc-tab': {
73
- color: 'var(--rvc-tabs-tab-color)',
74
- fontWeight: 'var(--rvc-tabs-tab-font-weight)',
75
- borderBottomWidth: 'var(--rvc-tabs-tab-border-width)',
76
- borderColor: 'transparent',
77
- paddingBottom: 'var(--rvc-tabs-tab-padding-bottom)',
78
- transitionDuration: 'var(--rvc-tabs-tab-transition-duration)',
79
- transitionTimingFunction: 'var(--rvc-tabs-tab-transition-timing-function)',
80
- ...theme('components.tabs.tab'),
71
+ '.rvc-tab': {
72
+ color: 'var(--rvc-tabs-tab-color)',
73
+ fontWeight: 'var(--rvc-tabs-tab-font-weight)',
74
+ borderBottomWidth: 'var(--rvc-tabs-tab-border-width)',
75
+ borderColor: 'transparent',
76
+ paddingBottom: 'var(--rvc-tabs-tab-padding-bottom)',
77
+ transitionDuration: 'var(--rvc-tabs-tab-transition-duration)',
78
+ transitionTimingFunction: 'var(--rvc-tabs-tab-transition-timing-function)',
79
+ ...theme('components.tabs.tab'),
81
80
 
82
- // Hover state
83
- '&:hover': {
84
- color: 'var(--rvc-tabs-tab-hover-color)',
85
- borderColor: 'var(--rvc-tabs-tab-hover-border-color)',
86
- ...theme('components.tabs.tab[&:hover]'),
87
- },
81
+ // Hover state
82
+ '&:hover': {
83
+ color: 'var(--rvc-tabs-tab-hover-color)',
84
+ borderColor: 'var(--rvc-tabs-tab-hover-border-color)',
85
+ ...theme('components.tabs.tab[&:hover]'),
86
+ },
88
87
 
89
- '&.rvc-tab-active': {
90
- color: 'var(--rvc-tabs-tab-active-color)',
91
- borderColor: 'var(--rvc-tabs-tab-active-border-color)',
92
- ...theme('components.tabs.tab.active'),
88
+ '&.rvc-tab-active': {
89
+ color: 'var(--rvc-tabs-tab-active-color)',
90
+ borderColor: 'var(--rvc-tabs-tab-active-border-color)',
91
+ ...theme('components.tabs.tab.active'),
92
+ },
93
93
  },
94
94
  },
95
95
  });
@@ -12,6 +12,7 @@ import checkbox from './components/checkbox.js';
12
12
  import drawer from './components/drawer.js';
13
13
  import dropdown from './components/dropdown.js';
14
14
  import emptyState from './components/empty-state.js';
15
+ import input from './components/input.js';
15
16
  import lightswitch from './components/lightswitch.js';
16
17
  import modal from './components/modal.js';
17
18
  import pagination from './components/pagination.js';
@@ -44,6 +45,7 @@ export default plugin.withOptions(
44
45
  drawer(theme),
45
46
  dropdown(theme),
46
47
  emptyState(theme),
48
+ input(theme),
47
49
  lightswitch(theme),
48
50
  pagination(theme),
49
51
  modal(theme),
@@ -68,6 +70,7 @@ export default plugin.withOptions(
68
70
  'rvc-drawer',
69
71
  'rvc-dropdown',
70
72
  'rvc-empty-state',
73
+ 'rvc-input',
71
74
  'rvc-lightswitch-group',
72
75
  'rvc-modal',
73
76
  'rvc-pagination',