@onpe/ui 1.0.15 → 1.0.17
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components.esm.js +13 -13
- package/dist/components.js +13 -13
- package/dist/index.css +1 -1
- package/dist/index.esm.css +1 -1
- package/dist/index.esm.js +13 -13
- package/dist/index.js +13 -13
- package/package.json +1 -1
package/dist/components.esm.js
CHANGED
|
@@ -89,31 +89,31 @@ var Button = function (_a) {
|
|
|
89
89
|
var color = _a.color, title = _a.title, size = _a.size, className = _a.className, props = __rest(_a, ["color", "title", "size", "className"]);
|
|
90
90
|
var getColor = function () {
|
|
91
91
|
if (color === "blue")
|
|
92
|
-
return "bg-onpe-ui-blue
|
|
92
|
+
return "bg-onpe-ui-blue hover:bg-onpe-ui-blue/30";
|
|
93
93
|
if (color === "skyblue")
|
|
94
|
-
return "bg-onpe-ui-skyblue
|
|
94
|
+
return "bg-onpe-ui-skyblue hover:bg-onpe-ui-skyblue/30";
|
|
95
95
|
if (color === "skyblue-light")
|
|
96
|
-
return "bg-onpe-ui-skyblue-light
|
|
96
|
+
return "bg-onpe-ui-skyblue-light hover:bg-onpe-ui-skyblue-light/30";
|
|
97
97
|
if (color === "yellow")
|
|
98
|
-
return "bg-onpe-ui-yellow
|
|
98
|
+
return "bg-onpe-ui-yellow hover:bg-onpe-ui-yellow/30";
|
|
99
99
|
if (color === "light-skyblue")
|
|
100
|
-
return "bg-onpe-ui-light-skyblue
|
|
100
|
+
return "bg-onpe-ui-light-skyblue hover:bg-onpe-ui-light-skyblue/30";
|
|
101
101
|
if (color === "gray")
|
|
102
|
-
return "bg-onpe-ui-gray
|
|
102
|
+
return "bg-onpe-ui-gray hover:bg-onpe-ui-gray/30";
|
|
103
103
|
if (color === "gray-light")
|
|
104
|
-
return "bg-onpe-ui-gray-light
|
|
104
|
+
return "bg-onpe-ui-gray-light hover:bg-onpe-ui-gray-light/30";
|
|
105
105
|
if (color === "gray-extra-light")
|
|
106
|
-
return "bg-onpe-ui-gray-extra-light
|
|
106
|
+
return "bg-onpe-ui-gray-extra-light hover:bg-onpe-ui-gray-extra-light/30";
|
|
107
107
|
if (color === "red")
|
|
108
|
-
return "bg-onpe-ui-red
|
|
108
|
+
return "bg-onpe-ui-red hover:bg-onpe-ui-red/30";
|
|
109
109
|
if (color === "dark-gray")
|
|
110
|
-
return "bg-onpe-ui-dark-gray
|
|
110
|
+
return "bg-onpe-ui-dark-gray hover:bg-onpe-ui-dark-gray/30";
|
|
111
111
|
if (color === "green")
|
|
112
|
-
return "bg-onpe-ui-green
|
|
112
|
+
return "bg-onpe-ui-green hover:bg-onpe-ui-green/30";
|
|
113
113
|
if (color === "yellow-light")
|
|
114
|
-
return "bg-onpe-ui-yellow-light
|
|
114
|
+
return "bg-onpe-ui-yellow-light hover:bg-onpe-ui-yellow-light/30";
|
|
115
115
|
if (color === "primary")
|
|
116
|
-
return "bg-onpe-ui-blue
|
|
116
|
+
return "bg-onpe-ui-blue hover:bg-onpe-ui-blue/30";
|
|
117
117
|
return "";
|
|
118
118
|
};
|
|
119
119
|
var getSize = function () {
|
package/dist/components.js
CHANGED
|
@@ -91,31 +91,31 @@ var Button = function (_a) {
|
|
|
91
91
|
var color = _a.color, title = _a.title, size = _a.size, className = _a.className, props = __rest(_a, ["color", "title", "size", "className"]);
|
|
92
92
|
var getColor = function () {
|
|
93
93
|
if (color === "blue")
|
|
94
|
-
return "bg-onpe-ui-blue
|
|
94
|
+
return "bg-onpe-ui-blue hover:bg-onpe-ui-blue/30";
|
|
95
95
|
if (color === "skyblue")
|
|
96
|
-
return "bg-onpe-ui-skyblue
|
|
96
|
+
return "bg-onpe-ui-skyblue hover:bg-onpe-ui-skyblue/30";
|
|
97
97
|
if (color === "skyblue-light")
|
|
98
|
-
return "bg-onpe-ui-skyblue-light
|
|
98
|
+
return "bg-onpe-ui-skyblue-light hover:bg-onpe-ui-skyblue-light/30";
|
|
99
99
|
if (color === "yellow")
|
|
100
|
-
return "bg-onpe-ui-yellow
|
|
100
|
+
return "bg-onpe-ui-yellow hover:bg-onpe-ui-yellow/30";
|
|
101
101
|
if (color === "light-skyblue")
|
|
102
|
-
return "bg-onpe-ui-light-skyblue
|
|
102
|
+
return "bg-onpe-ui-light-skyblue hover:bg-onpe-ui-light-skyblue/30";
|
|
103
103
|
if (color === "gray")
|
|
104
|
-
return "bg-onpe-ui-gray
|
|
104
|
+
return "bg-onpe-ui-gray hover:bg-onpe-ui-gray/30";
|
|
105
105
|
if (color === "gray-light")
|
|
106
|
-
return "bg-onpe-ui-gray-light
|
|
106
|
+
return "bg-onpe-ui-gray-light hover:bg-onpe-ui-gray-light/30";
|
|
107
107
|
if (color === "gray-extra-light")
|
|
108
|
-
return "bg-onpe-ui-gray-extra-light
|
|
108
|
+
return "bg-onpe-ui-gray-extra-light hover:bg-onpe-ui-gray-extra-light/30";
|
|
109
109
|
if (color === "red")
|
|
110
|
-
return "bg-onpe-ui-red
|
|
110
|
+
return "bg-onpe-ui-red hover:bg-onpe-ui-red/30";
|
|
111
111
|
if (color === "dark-gray")
|
|
112
|
-
return "bg-onpe-ui-dark-gray
|
|
112
|
+
return "bg-onpe-ui-dark-gray hover:bg-onpe-ui-dark-gray/30";
|
|
113
113
|
if (color === "green")
|
|
114
|
-
return "bg-onpe-ui-green
|
|
114
|
+
return "bg-onpe-ui-green hover:bg-onpe-ui-green/30";
|
|
115
115
|
if (color === "yellow-light")
|
|
116
|
-
return "bg-onpe-ui-yellow-light
|
|
116
|
+
return "bg-onpe-ui-yellow-light hover:bg-onpe-ui-yellow-light/30";
|
|
117
117
|
if (color === "primary")
|
|
118
|
-
return "bg-onpe-ui-blue
|
|
118
|
+
return "bg-onpe-ui-blue hover:bg-onpe-ui-blue/30";
|
|
119
119
|
return "";
|
|
120
120
|
};
|
|
121
121
|
var getSize = function () {
|
package/dist/index.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--blue:#003770;--skyblue:#0073cf;--skyblue-light:#69b2e8;--yellow:#ffb81c;--light-skyblue:#aaeff6;--gray:#bcbcbc;--gray-light:#bdbdbd;--gray-extra-light:#f2f2f2;--red:#e3002b;--dark-gray:#4f4f4f;--green:#76bd43;--yellow-light:#fff1d2}@theme{--color-onpe-ui-blue:var(--blue);--color-onpe-ui-skyblue:var(--skyblue);--color-onpe-ui-skyblue-light:var(--skyblue-light);--color-onpe-ui-yellow:var(--yellow);--color-onpe-ui-light-skyblue:var(--light-skyblue);--color-onpe-ui-gray:var(--gray);--color-onpe-ui-gray-light:var(--gray-light);--color-onpe-ui-gray-extra-light:var(--gray-extra-light);--color-onpe-ui-red:var(--red);--color-onpe-ui-dark-gray:var(--dark-gray);--color-onpe-ui-green:var(--green);--color-onpe-ui-yellow-light:var(--yellow-light)}button{cursor:pointer}@keyframes fastBlink{0%{opacity:1}25%{opacity:.8}50%{opacity:.4}75%{opacity:.8}to{opacity:1}}.fast-blink{animation:fastBlink .8s ease-in-out infinite}.flex{display:flex}.grid{display:grid}.hidden{display:none}.block{display:block}.inline-flex{display:inline-flex}.flex-col{flex-direction:column}.flex-col-reverse{flex-direction:column-reverse}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-center{justify-content:center}.place-items-center{place-items:center}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.relative{position:relative}.absolute{position:absolute}.fixed{position:fixed}.static{position:static}.top-0{top:0}.top-4{top:1rem}.right-4{right:1rem}.bottom-2{bottom:.5rem}.left-0{left:0}.z-10{z-index:10}.z-20{z-index:20}.z-30{z-index:30}.z-50{z-index:50}.z-100{z-index:100}.-z-10{z-index:-10}.w-full{width:100%}.w-16{width:4rem}.w-\[10px\]{width:10px}.w-\[32px\]{width:32px}.w-\[98vw\]{width:98vw}.h-screen{height:100vh}.h-10{height:2.5rem}.h-12{height:3rem}.h-14{height:3.5rem}.h-\[10px\]{height:10px}.h-\[32px\]{height:32px}.max-w-\[95vw\]{max-width:95vw}.max-w-\[200px\]{max-width:200px}.max-w-\[680px\]{max-width:680px}.max-w-full{max-width:100%}.min-w-\[
|
|
1
|
+
:root{--blue:#003770;--skyblue:#0073cf;--skyblue-light:#69b2e8;--yellow:#ffb81c;--light-skyblue:#aaeff6;--gray:#bcbcbc;--gray-light:#bdbdbd;--gray-extra-light:#f2f2f2;--red:#e3002b;--dark-gray:#4f4f4f;--green:#76bd43;--yellow-light:#fff1d2}@theme{--color-onpe-ui-blue:var(--blue);--color-onpe-ui-skyblue:var(--skyblue);--color-onpe-ui-skyblue-light:var(--skyblue-light);--color-onpe-ui-yellow:var(--yellow);--color-onpe-ui-light-skyblue:var(--light-skyblue);--color-onpe-ui-gray:var(--gray);--color-onpe-ui-gray-light:var(--gray-light);--color-onpe-ui-gray-extra-light:var(--gray-extra-light);--color-onpe-ui-red:var(--red);--color-onpe-ui-dark-gray:var(--dark-gray);--color-onpe-ui-green:var(--green);--color-onpe-ui-yellow-light:var(--yellow-light)}button{cursor:pointer}@keyframes fastBlink{0%{opacity:1}25%{opacity:.8}50%{opacity:.4}75%{opacity:.8}to{opacity:1}}.fast-blink{animation:fastBlink .8s ease-in-out infinite}.flex{display:flex}.grid{display:grid}.hidden{display:none}.block{display:block}.inline-flex{display:inline-flex}.rounded{border-radius:.25rem}.shadow-lg{box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05)}.px-4{padding-left:1rem;padding-right:1rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.p-6{padding:1.5rem}.p-3{padding:.75rem}.w-8{width:2rem}.h-8{height:2rem}.animate-spin{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.bg-white{background-color:#fff}.rounded-lg{border-radius:.5rem}.bg-white\/20{background-color:hsla(0,0%,100%,.2)}.flex-col{flex-direction:column}.flex-col-reverse{flex-direction:column-reverse}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-center{justify-content:center}.place-items-center{place-items:center}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.relative{position:relative}.absolute{position:absolute}.fixed{position:fixed}.static{position:static}.top-0{top:0}.top-4{top:1rem}.right-4{right:1rem}.bottom-2{bottom:.5rem}.left-0{left:0}.z-10{z-index:10}.z-20{z-index:20}.z-30{z-index:30}.z-50{z-index:50}.z-100{z-index:100}.-z-10{z-index:-10}.w-full{width:100%}.w-16{width:4rem}.w-\[10px\]{width:10px}.w-\[32px\]{width:32px}.w-\[98vw\]{width:98vw}.h-screen{height:100vh}.h-10{height:2.5rem}.h-12{height:3rem}.h-14{height:3.5rem}.h-\[10px\]{height:10px}.h-\[32px\]{height:32px}.max-w-\[95vw\]{max-width:95vw}.max-w-\[200px\]{max-width:200px}.max-w-\[680px\]{max-width:680px}.max-w-full{max-width:100%}.min-w-\[320px\]{min-width:320px}.max-h-\[90vh\]{max-height:90vh}.p-\[7px\]{padding:7px}.px-1{padding-left:.25rem;padding-right:.25rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-8{padding-left:2rem;padding-right:2rem}.px-32{padding-left:8rem;padding-right:8rem}.py-5{padding-bottom:1.25rem;padding-top:1.25rem}.py-10{padding-bottom:2.5rem;padding-top:2.5rem}.py-16{padding-bottom:4rem;padding-top:4rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-7{margin-top:1.75rem}.mt-10{margin-top:2.5rem}.mt-11{margin-top:2.75rem}.mt-20{margin-top:5rem}.mt-auto{margin-top:auto}.mb-2{margin-bottom:.5rem}.mb-4{margin-bottom:1rem}.mx-auto{margin-left:auto;margin-right:auto}.-ml-\[16px\]{margin-left:-16px}.-mr-\[16px\]{margin-right:-16px}.-mx-4{margin-left:-1rem;margin-right:-1rem}.-bottom-2{bottom:-.5rem}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.rounded-full{border-radius:9999px}.border{border-width:1px}.border-2{border-width:2px}.border-b-2{border-bottom-width:2px}.border-b-\[9px\]{border-bottom-width:9px}.text-center{text-align:center}.text-sm{font-size:.875rem;line-height:1.25rem}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem}.text-lg,.text-xl{line-height:1.75rem}.text-xl{font-size:1.25rem}.text-2xl{font-size:1.5rem;line-height:2rem}.text-\[28px\]{font-size:28px}.font-medium{font-weight:500}.font-semibold{font-weight:600}.font-bold{font-weight:700}.text-white{color:#fff}.opacity-0{opacity:0}.opacity-100{opacity:1}.transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-colors{transition-duration:.15s;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-300{transition-duration:.3s}.duration-500{transition-duration:.5s}.cursor-pointer{cursor:pointer}.cursor-not-allowed{cursor:not-allowed}.space-y-4>*+*{margin-top:1rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.bg-onpe-ui-blue{background-color:var(--color-onpe-ui-blue)}.bg-onpe-ui-skyblue{background-color:var(--color-onpe-ui-skyblue)}.bg-onpe-ui-skyblue-light{background-color:var(--color-onpe-ui-skyblue-light)}.bg-onpe-ui-yellow{background-color:var(--color-onpe-ui-yellow)}.bg-onpe-ui-light-skyblue{background-color:var(--color-onpe-ui-light-skyblue)}.bg-onpe-ui-gray{background-color:var(--color-onpe-ui-gray)}.bg-onpe-ui-gray-light{background-color:var(--color-onpe-ui-gray-light)}.bg-onpe-ui-gray-extra-light{background-color:var(--color-onpe-ui-gray-extra-light)}.bg-onpe-ui-red{background-color:var(--color-onpe-ui-red)}.bg-onpe-ui-dark-gray{background-color:var(--color-onpe-ui-dark-gray)}.bg-onpe-ui-green{background-color:var(--color-onpe-ui-green)}.bg-onpe-ui-yellow-light{background-color:var(--color-onpe-ui-yellow-light)}.text-onpe-ui-blue{color:var(--color-onpe-ui-blue)}.text-onpe-ui-skyblue{color:var(--color-onpe-ui-skyblue)}.text-onpe-ui-skyblue-light{color:var(--color-onpe-ui-skyblue-light)}.text-onpe-ui-yellow{color:var(--color-onpe-ui-yellow)}.text-onpe-ui-light-skyblue{color:var(--color-onpe-ui-light-skyblue)}.text-onpe-ui-gray{color:var(--color-onpe-ui-gray)}.text-onpe-ui-gray-light{color:var(--color-onpe-ui-gray-light)}.text-onpe-ui-gray-extra-light{color:var(--color-onpe-ui-gray-extra-light)}.text-onpe-ui-red{color:var(--color-onpe-ui-red)}.text-onpe-ui-dark-gray{color:var(--color-onpe-ui-dark-gray)}.text-onpe-ui-green{color:var(--color-onpe-ui-green)}.text-onpe-ui-yellow-light{color:var(--color-onpe-ui-yellow-light)}.hover\:bg-onpe-ui-blue:hover{background-color:var(--color-onpe-ui-blue)}.hover\:bg-onpe-ui-skyblue:hover{background-color:var(--color-onpe-ui-skyblue)}.hover\:bg-onpe-ui-skyblue-light:hover{background-color:var(--color-onpe-ui-skyblue-light)}.hover\:bg-onpe-ui-yellow:hover{background-color:var(--color-onpe-ui-yellow)}.hover\:bg-onpe-ui-light-skyblue:hover{background-color:var(--color-onpe-ui-light-skyblue)}.hover\:bg-onpe-ui-gray:hover{background-color:var(--color-onpe-ui-gray)}.hover\:bg-onpe-ui-gray-light:hover{background-color:var(--color-onpe-ui-gray-light)}.hover\:bg-onpe-ui-gray-extra-light:hover{background-color:var(--color-onpe-ui-gray-extra-light)}.hover\:bg-onpe-ui-red:hover{background-color:var(--color-onpe-ui-red)}.hover\:bg-onpe-ui-dark-gray:hover{background-color:var(--color-onpe-ui-dark-gray)}.hover\:bg-onpe-ui-green:hover{background-color:var(--color-onpe-ui-green)}.hover\:bg-onpe-ui-yellow-light:hover{background-color:var(--color-onpe-ui-yellow-light)}.hover\:bg-onpe-ui-blue\/30:hover{background-color:rgba(0,55,112,.3)}.hover\:bg-onpe-ui-skyblue\/30:hover{background-color:rgba(0,115,207,.3)}.hover\:bg-onpe-ui-skyblue-light\/30:hover{background-color:rgba(105,178,232,.3)}.hover\:bg-onpe-ui-yellow\/30:hover{background-color:rgba(255,184,28,.3)}.hover\:bg-onpe-ui-light-skyblue\/30:hover{background-color:rgba(170,239,246,.3)}.hover\:bg-onpe-ui-gray-light\/30:hover,.hover\:bg-onpe-ui-gray\/30:hover{background-color:hsla(0,0%,74%,.3)}.hover\:bg-onpe-ui-gray-extra-light\/30:hover{background-color:hsla(0,0%,95%,.3)}.hover\:bg-onpe-ui-red\/30:hover{background-color:rgba(227,0,43,.3)}.hover\:bg-onpe-ui-dark-gray\/30:hover{background-color:rgba(79,79,79,.3)}.hover\:bg-onpe-ui-green\/30:hover{background-color:rgba(118,189,67,.3)}.hover\:bg-onpe-ui-yellow-light\/30:hover{background-color:rgba(255,241,210,.3)}.min-w-\[200px\]{min-width:200px}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:bg-onpe-ui-gray:disabled{background-color:var(--color-onpe-ui-gray)}.disabled\:opacity-50:disabled{opacity:.5}.disabled\:hover\:bg-onpe-ui-gray:disabled:hover{background-color:var(--color-onpe-ui-gray)}
|
package/dist/index.esm.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--blue:#003770;--skyblue:#0073cf;--skyblue-light:#69b2e8;--yellow:#ffb81c;--light-skyblue:#aaeff6;--gray:#bcbcbc;--gray-light:#bdbdbd;--gray-extra-light:#f2f2f2;--red:#e3002b;--dark-gray:#4f4f4f;--green:#76bd43;--yellow-light:#fff1d2}@theme{--color-onpe-ui-blue:var(--blue);--color-onpe-ui-skyblue:var(--skyblue);--color-onpe-ui-skyblue-light:var(--skyblue-light);--color-onpe-ui-yellow:var(--yellow);--color-onpe-ui-light-skyblue:var(--light-skyblue);--color-onpe-ui-gray:var(--gray);--color-onpe-ui-gray-light:var(--gray-light);--color-onpe-ui-gray-extra-light:var(--gray-extra-light);--color-onpe-ui-red:var(--red);--color-onpe-ui-dark-gray:var(--dark-gray);--color-onpe-ui-green:var(--green);--color-onpe-ui-yellow-light:var(--yellow-light)}button{cursor:pointer}@keyframes fastBlink{0%{opacity:1}25%{opacity:.8}50%{opacity:.4}75%{opacity:.8}to{opacity:1}}.fast-blink{animation:fastBlink .8s ease-in-out infinite}.flex{display:flex}.grid{display:grid}.hidden{display:none}.block{display:block}.inline-flex{display:inline-flex}.flex-col{flex-direction:column}.flex-col-reverse{flex-direction:column-reverse}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-center{justify-content:center}.place-items-center{place-items:center}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.relative{position:relative}.absolute{position:absolute}.fixed{position:fixed}.static{position:static}.top-0{top:0}.top-4{top:1rem}.right-4{right:1rem}.bottom-2{bottom:.5rem}.left-0{left:0}.z-10{z-index:10}.z-20{z-index:20}.z-30{z-index:30}.z-50{z-index:50}.z-100{z-index:100}.-z-10{z-index:-10}.w-full{width:100%}.w-16{width:4rem}.w-\[10px\]{width:10px}.w-\[32px\]{width:32px}.w-\[98vw\]{width:98vw}.h-screen{height:100vh}.h-10{height:2.5rem}.h-12{height:3rem}.h-14{height:3.5rem}.h-\[10px\]{height:10px}.h-\[32px\]{height:32px}.max-w-\[95vw\]{max-width:95vw}.max-w-\[200px\]{max-width:200px}.max-w-\[680px\]{max-width:680px}.max-w-full{max-width:100%}.min-w-\[
|
|
1
|
+
:root{--blue:#003770;--skyblue:#0073cf;--skyblue-light:#69b2e8;--yellow:#ffb81c;--light-skyblue:#aaeff6;--gray:#bcbcbc;--gray-light:#bdbdbd;--gray-extra-light:#f2f2f2;--red:#e3002b;--dark-gray:#4f4f4f;--green:#76bd43;--yellow-light:#fff1d2}@theme{--color-onpe-ui-blue:var(--blue);--color-onpe-ui-skyblue:var(--skyblue);--color-onpe-ui-skyblue-light:var(--skyblue-light);--color-onpe-ui-yellow:var(--yellow);--color-onpe-ui-light-skyblue:var(--light-skyblue);--color-onpe-ui-gray:var(--gray);--color-onpe-ui-gray-light:var(--gray-light);--color-onpe-ui-gray-extra-light:var(--gray-extra-light);--color-onpe-ui-red:var(--red);--color-onpe-ui-dark-gray:var(--dark-gray);--color-onpe-ui-green:var(--green);--color-onpe-ui-yellow-light:var(--yellow-light)}button{cursor:pointer}@keyframes fastBlink{0%{opacity:1}25%{opacity:.8}50%{opacity:.4}75%{opacity:.8}to{opacity:1}}.fast-blink{animation:fastBlink .8s ease-in-out infinite}.flex{display:flex}.grid{display:grid}.hidden{display:none}.block{display:block}.inline-flex{display:inline-flex}.rounded{border-radius:.25rem}.shadow-lg{box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05)}.px-4{padding-left:1rem;padding-right:1rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.p-6{padding:1.5rem}.p-3{padding:.75rem}.w-8{width:2rem}.h-8{height:2rem}.animate-spin{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.bg-white{background-color:#fff}.rounded-lg{border-radius:.5rem}.bg-white\/20{background-color:hsla(0,0%,100%,.2)}.flex-col{flex-direction:column}.flex-col-reverse{flex-direction:column-reverse}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-center{justify-content:center}.place-items-center{place-items:center}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.relative{position:relative}.absolute{position:absolute}.fixed{position:fixed}.static{position:static}.top-0{top:0}.top-4{top:1rem}.right-4{right:1rem}.bottom-2{bottom:.5rem}.left-0{left:0}.z-10{z-index:10}.z-20{z-index:20}.z-30{z-index:30}.z-50{z-index:50}.z-100{z-index:100}.-z-10{z-index:-10}.w-full{width:100%}.w-16{width:4rem}.w-\[10px\]{width:10px}.w-\[32px\]{width:32px}.w-\[98vw\]{width:98vw}.h-screen{height:100vh}.h-10{height:2.5rem}.h-12{height:3rem}.h-14{height:3.5rem}.h-\[10px\]{height:10px}.h-\[32px\]{height:32px}.max-w-\[95vw\]{max-width:95vw}.max-w-\[200px\]{max-width:200px}.max-w-\[680px\]{max-width:680px}.max-w-full{max-width:100%}.min-w-\[320px\]{min-width:320px}.max-h-\[90vh\]{max-height:90vh}.p-\[7px\]{padding:7px}.px-1{padding-left:.25rem;padding-right:.25rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-8{padding-left:2rem;padding-right:2rem}.px-32{padding-left:8rem;padding-right:8rem}.py-5{padding-bottom:1.25rem;padding-top:1.25rem}.py-10{padding-bottom:2.5rem;padding-top:2.5rem}.py-16{padding-bottom:4rem;padding-top:4rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-7{margin-top:1.75rem}.mt-10{margin-top:2.5rem}.mt-11{margin-top:2.75rem}.mt-20{margin-top:5rem}.mt-auto{margin-top:auto}.mb-2{margin-bottom:.5rem}.mb-4{margin-bottom:1rem}.mx-auto{margin-left:auto;margin-right:auto}.-ml-\[16px\]{margin-left:-16px}.-mr-\[16px\]{margin-right:-16px}.-mx-4{margin-left:-1rem;margin-right:-1rem}.-bottom-2{bottom:-.5rem}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.rounded-full{border-radius:9999px}.border{border-width:1px}.border-2{border-width:2px}.border-b-2{border-bottom-width:2px}.border-b-\[9px\]{border-bottom-width:9px}.text-center{text-align:center}.text-sm{font-size:.875rem;line-height:1.25rem}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem}.text-lg,.text-xl{line-height:1.75rem}.text-xl{font-size:1.25rem}.text-2xl{font-size:1.5rem;line-height:2rem}.text-\[28px\]{font-size:28px}.font-medium{font-weight:500}.font-semibold{font-weight:600}.font-bold{font-weight:700}.text-white{color:#fff}.opacity-0{opacity:0}.opacity-100{opacity:1}.transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-colors{transition-duration:.15s;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-300{transition-duration:.3s}.duration-500{transition-duration:.5s}.cursor-pointer{cursor:pointer}.cursor-not-allowed{cursor:not-allowed}.space-y-4>*+*{margin-top:1rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.bg-onpe-ui-blue{background-color:var(--color-onpe-ui-blue)}.bg-onpe-ui-skyblue{background-color:var(--color-onpe-ui-skyblue)}.bg-onpe-ui-skyblue-light{background-color:var(--color-onpe-ui-skyblue-light)}.bg-onpe-ui-yellow{background-color:var(--color-onpe-ui-yellow)}.bg-onpe-ui-light-skyblue{background-color:var(--color-onpe-ui-light-skyblue)}.bg-onpe-ui-gray{background-color:var(--color-onpe-ui-gray)}.bg-onpe-ui-gray-light{background-color:var(--color-onpe-ui-gray-light)}.bg-onpe-ui-gray-extra-light{background-color:var(--color-onpe-ui-gray-extra-light)}.bg-onpe-ui-red{background-color:var(--color-onpe-ui-red)}.bg-onpe-ui-dark-gray{background-color:var(--color-onpe-ui-dark-gray)}.bg-onpe-ui-green{background-color:var(--color-onpe-ui-green)}.bg-onpe-ui-yellow-light{background-color:var(--color-onpe-ui-yellow-light)}.text-onpe-ui-blue{color:var(--color-onpe-ui-blue)}.text-onpe-ui-skyblue{color:var(--color-onpe-ui-skyblue)}.text-onpe-ui-skyblue-light{color:var(--color-onpe-ui-skyblue-light)}.text-onpe-ui-yellow{color:var(--color-onpe-ui-yellow)}.text-onpe-ui-light-skyblue{color:var(--color-onpe-ui-light-skyblue)}.text-onpe-ui-gray{color:var(--color-onpe-ui-gray)}.text-onpe-ui-gray-light{color:var(--color-onpe-ui-gray-light)}.text-onpe-ui-gray-extra-light{color:var(--color-onpe-ui-gray-extra-light)}.text-onpe-ui-red{color:var(--color-onpe-ui-red)}.text-onpe-ui-dark-gray{color:var(--color-onpe-ui-dark-gray)}.text-onpe-ui-green{color:var(--color-onpe-ui-green)}.text-onpe-ui-yellow-light{color:var(--color-onpe-ui-yellow-light)}.hover\:bg-onpe-ui-blue:hover{background-color:var(--color-onpe-ui-blue)}.hover\:bg-onpe-ui-skyblue:hover{background-color:var(--color-onpe-ui-skyblue)}.hover\:bg-onpe-ui-skyblue-light:hover{background-color:var(--color-onpe-ui-skyblue-light)}.hover\:bg-onpe-ui-yellow:hover{background-color:var(--color-onpe-ui-yellow)}.hover\:bg-onpe-ui-light-skyblue:hover{background-color:var(--color-onpe-ui-light-skyblue)}.hover\:bg-onpe-ui-gray:hover{background-color:var(--color-onpe-ui-gray)}.hover\:bg-onpe-ui-gray-light:hover{background-color:var(--color-onpe-ui-gray-light)}.hover\:bg-onpe-ui-gray-extra-light:hover{background-color:var(--color-onpe-ui-gray-extra-light)}.hover\:bg-onpe-ui-red:hover{background-color:var(--color-onpe-ui-red)}.hover\:bg-onpe-ui-dark-gray:hover{background-color:var(--color-onpe-ui-dark-gray)}.hover\:bg-onpe-ui-green:hover{background-color:var(--color-onpe-ui-green)}.hover\:bg-onpe-ui-yellow-light:hover{background-color:var(--color-onpe-ui-yellow-light)}.hover\:bg-onpe-ui-blue\/30:hover{background-color:rgba(0,55,112,.3)}.hover\:bg-onpe-ui-skyblue\/30:hover{background-color:rgba(0,115,207,.3)}.hover\:bg-onpe-ui-skyblue-light\/30:hover{background-color:rgba(105,178,232,.3)}.hover\:bg-onpe-ui-yellow\/30:hover{background-color:rgba(255,184,28,.3)}.hover\:bg-onpe-ui-light-skyblue\/30:hover{background-color:rgba(170,239,246,.3)}.hover\:bg-onpe-ui-gray-light\/30:hover,.hover\:bg-onpe-ui-gray\/30:hover{background-color:hsla(0,0%,74%,.3)}.hover\:bg-onpe-ui-gray-extra-light\/30:hover{background-color:hsla(0,0%,95%,.3)}.hover\:bg-onpe-ui-red\/30:hover{background-color:rgba(227,0,43,.3)}.hover\:bg-onpe-ui-dark-gray\/30:hover{background-color:rgba(79,79,79,.3)}.hover\:bg-onpe-ui-green\/30:hover{background-color:rgba(118,189,67,.3)}.hover\:bg-onpe-ui-yellow-light\/30:hover{background-color:rgba(255,241,210,.3)}.min-w-\[200px\]{min-width:200px}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:bg-onpe-ui-gray:disabled{background-color:var(--color-onpe-ui-gray)}.disabled\:opacity-50:disabled{opacity:.5}.disabled\:hover\:bg-onpe-ui-gray:disabled:hover{background-color:var(--color-onpe-ui-gray)}
|
package/dist/index.esm.js
CHANGED
|
@@ -89,31 +89,31 @@ var Button = function (_a) {
|
|
|
89
89
|
var color = _a.color, title = _a.title, size = _a.size, className = _a.className, props = __rest(_a, ["color", "title", "size", "className"]);
|
|
90
90
|
var getColor = function () {
|
|
91
91
|
if (color === "blue")
|
|
92
|
-
return "bg-onpe-ui-blue
|
|
92
|
+
return "bg-onpe-ui-blue hover:bg-onpe-ui-blue/30";
|
|
93
93
|
if (color === "skyblue")
|
|
94
|
-
return "bg-onpe-ui-skyblue
|
|
94
|
+
return "bg-onpe-ui-skyblue hover:bg-onpe-ui-skyblue/30";
|
|
95
95
|
if (color === "skyblue-light")
|
|
96
|
-
return "bg-onpe-ui-skyblue-light
|
|
96
|
+
return "bg-onpe-ui-skyblue-light hover:bg-onpe-ui-skyblue-light/30";
|
|
97
97
|
if (color === "yellow")
|
|
98
|
-
return "bg-onpe-ui-yellow
|
|
98
|
+
return "bg-onpe-ui-yellow hover:bg-onpe-ui-yellow/30";
|
|
99
99
|
if (color === "light-skyblue")
|
|
100
|
-
return "bg-onpe-ui-light-skyblue
|
|
100
|
+
return "bg-onpe-ui-light-skyblue hover:bg-onpe-ui-light-skyblue/30";
|
|
101
101
|
if (color === "gray")
|
|
102
|
-
return "bg-onpe-ui-gray
|
|
102
|
+
return "bg-onpe-ui-gray hover:bg-onpe-ui-gray/30";
|
|
103
103
|
if (color === "gray-light")
|
|
104
|
-
return "bg-onpe-ui-gray-light
|
|
104
|
+
return "bg-onpe-ui-gray-light hover:bg-onpe-ui-gray-light/30";
|
|
105
105
|
if (color === "gray-extra-light")
|
|
106
|
-
return "bg-onpe-ui-gray-extra-light
|
|
106
|
+
return "bg-onpe-ui-gray-extra-light hover:bg-onpe-ui-gray-extra-light/30";
|
|
107
107
|
if (color === "red")
|
|
108
|
-
return "bg-onpe-ui-red
|
|
108
|
+
return "bg-onpe-ui-red hover:bg-onpe-ui-red/30";
|
|
109
109
|
if (color === "dark-gray")
|
|
110
|
-
return "bg-onpe-ui-dark-gray
|
|
110
|
+
return "bg-onpe-ui-dark-gray hover:bg-onpe-ui-dark-gray/30";
|
|
111
111
|
if (color === "green")
|
|
112
|
-
return "bg-onpe-ui-green
|
|
112
|
+
return "bg-onpe-ui-green hover:bg-onpe-ui-green/30";
|
|
113
113
|
if (color === "yellow-light")
|
|
114
|
-
return "bg-onpe-ui-yellow-light
|
|
114
|
+
return "bg-onpe-ui-yellow-light hover:bg-onpe-ui-yellow-light/30";
|
|
115
115
|
if (color === "primary")
|
|
116
|
-
return "bg-onpe-ui-blue
|
|
116
|
+
return "bg-onpe-ui-blue hover:bg-onpe-ui-blue/30";
|
|
117
117
|
return "";
|
|
118
118
|
};
|
|
119
119
|
var getSize = function () {
|
package/dist/index.js
CHANGED
|
@@ -91,31 +91,31 @@ var Button = function (_a) {
|
|
|
91
91
|
var color = _a.color, title = _a.title, size = _a.size, className = _a.className, props = __rest(_a, ["color", "title", "size", "className"]);
|
|
92
92
|
var getColor = function () {
|
|
93
93
|
if (color === "blue")
|
|
94
|
-
return "bg-onpe-ui-blue
|
|
94
|
+
return "bg-onpe-ui-blue hover:bg-onpe-ui-blue/30";
|
|
95
95
|
if (color === "skyblue")
|
|
96
|
-
return "bg-onpe-ui-skyblue
|
|
96
|
+
return "bg-onpe-ui-skyblue hover:bg-onpe-ui-skyblue/30";
|
|
97
97
|
if (color === "skyblue-light")
|
|
98
|
-
return "bg-onpe-ui-skyblue-light
|
|
98
|
+
return "bg-onpe-ui-skyblue-light hover:bg-onpe-ui-skyblue-light/30";
|
|
99
99
|
if (color === "yellow")
|
|
100
|
-
return "bg-onpe-ui-yellow
|
|
100
|
+
return "bg-onpe-ui-yellow hover:bg-onpe-ui-yellow/30";
|
|
101
101
|
if (color === "light-skyblue")
|
|
102
|
-
return "bg-onpe-ui-light-skyblue
|
|
102
|
+
return "bg-onpe-ui-light-skyblue hover:bg-onpe-ui-light-skyblue/30";
|
|
103
103
|
if (color === "gray")
|
|
104
|
-
return "bg-onpe-ui-gray
|
|
104
|
+
return "bg-onpe-ui-gray hover:bg-onpe-ui-gray/30";
|
|
105
105
|
if (color === "gray-light")
|
|
106
|
-
return "bg-onpe-ui-gray-light
|
|
106
|
+
return "bg-onpe-ui-gray-light hover:bg-onpe-ui-gray-light/30";
|
|
107
107
|
if (color === "gray-extra-light")
|
|
108
|
-
return "bg-onpe-ui-gray-extra-light
|
|
108
|
+
return "bg-onpe-ui-gray-extra-light hover:bg-onpe-ui-gray-extra-light/30";
|
|
109
109
|
if (color === "red")
|
|
110
|
-
return "bg-onpe-ui-red
|
|
110
|
+
return "bg-onpe-ui-red hover:bg-onpe-ui-red/30";
|
|
111
111
|
if (color === "dark-gray")
|
|
112
|
-
return "bg-onpe-ui-dark-gray
|
|
112
|
+
return "bg-onpe-ui-dark-gray hover:bg-onpe-ui-dark-gray/30";
|
|
113
113
|
if (color === "green")
|
|
114
|
-
return "bg-onpe-ui-green
|
|
114
|
+
return "bg-onpe-ui-green hover:bg-onpe-ui-green/30";
|
|
115
115
|
if (color === "yellow-light")
|
|
116
|
-
return "bg-onpe-ui-yellow-light
|
|
116
|
+
return "bg-onpe-ui-yellow-light hover:bg-onpe-ui-yellow-light/30";
|
|
117
117
|
if (color === "primary")
|
|
118
|
-
return "bg-onpe-ui-blue
|
|
118
|
+
return "bg-onpe-ui-blue hover:bg-onpe-ui-blue/30";
|
|
119
119
|
return "";
|
|
120
120
|
};
|
|
121
121
|
var getSize = function () {
|