@luminescent/ui 0.3.5 → 0.3.6
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/lib/index.qwik.cjs +92 -0
- package/lib/index.qwik.mjs +93 -1
- package/package.json +1 -1
package/lib/index.qwik.cjs
CHANGED
|
@@ -226,6 +226,10 @@ const Card = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((
|
|
|
226
226
|
"row",
|
|
227
227
|
"blobs"
|
|
228
228
|
]);
|
|
229
|
+
qwik.useStylesQrl(/* @__PURE__ */ qwik.inlinedQrl(`
|
|
230
|
+
.-animation-delay-5 { animation-delay: -5s; }
|
|
231
|
+
.-animation-delay-10 { animation-delay: -10s; }
|
|
232
|
+
`, "Card_component_useStyles_POiiuoB0EmE"));
|
|
229
233
|
const blob = Math.round(Math.random() * 6);
|
|
230
234
|
const button = !!props1.onClick$ || props.hoverable;
|
|
231
235
|
return /* @__PURE__ */ qwik._jsxS("div", {
|
|
@@ -876,6 +880,94 @@ const ColorInput = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inline
|
|
|
876
880
|
"value",
|
|
877
881
|
"presetColors"
|
|
878
882
|
]);
|
|
883
|
+
qwik.useStylesQrl(/* @__PURE__ */ qwik.inlinedQrl(`
|
|
884
|
+
.color-picker {
|
|
885
|
+
display: flex;
|
|
886
|
+
gap: 12px;
|
|
887
|
+
height: 185px !important;
|
|
888
|
+
width: 100% !important;
|
|
889
|
+
padding: 15px;
|
|
890
|
+
border-radius: 10px;
|
|
891
|
+
border: 1px solid rgb(31 41 55);
|
|
892
|
+
filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.5));
|
|
893
|
+
background: rgba(31 41 55 / 40%);
|
|
894
|
+
backdrop-filter: blur(10px);
|
|
895
|
+
user-select: none;
|
|
896
|
+
position: relative;
|
|
897
|
+
}
|
|
898
|
+
|
|
899
|
+
.color-picker-saturation {
|
|
900
|
+
position: relative;
|
|
901
|
+
height: 100%;
|
|
902
|
+
width: 100%;
|
|
903
|
+
background: linear-gradient(to right, #FFFFFF, #FF0000);
|
|
904
|
+
float: left;
|
|
905
|
+
border-radius: 5px;
|
|
906
|
+
border: 1px solid rgb(31 41 55);
|
|
907
|
+
}
|
|
908
|
+
|
|
909
|
+
.color-picker-brightness {
|
|
910
|
+
width: 100%;
|
|
911
|
+
height: 100%;
|
|
912
|
+
background: linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 1));
|
|
913
|
+
}
|
|
914
|
+
|
|
915
|
+
.color-picker-sbSelector {
|
|
916
|
+
border: 1px solid white;
|
|
917
|
+
position: absolute;
|
|
918
|
+
width: 14px;
|
|
919
|
+
height: 14px;
|
|
920
|
+
background: white;
|
|
921
|
+
border-radius: 10px;
|
|
922
|
+
top: -7px;
|
|
923
|
+
left: -7px;
|
|
924
|
+
box-sizing: border-box;
|
|
925
|
+
z-index: 10;
|
|
926
|
+
}
|
|
927
|
+
|
|
928
|
+
.color-picker-hue {
|
|
929
|
+
width: 8px;
|
|
930
|
+
border-radius: 5px;
|
|
931
|
+
height: 100%;
|
|
932
|
+
position: relative;
|
|
933
|
+
float: left;
|
|
934
|
+
background: linear-gradient(rgb(255, 0, 0) 0%, rgb(255, 0, 255) 17%, rgb(0, 0, 255) 34%, rgb(0, 255, 255) 50%, rgb(0, 255, 0) 67%, rgb(255, 255, 0) 84%, rgb(255, 0, 0) 100%);
|
|
935
|
+
border: 1px solid rgb(31 41 55);
|
|
936
|
+
}
|
|
937
|
+
|
|
938
|
+
.color-picker-colors {
|
|
939
|
+
height: 100%;
|
|
940
|
+
position: relative;
|
|
941
|
+
display: flex;
|
|
942
|
+
flex-direction: column;
|
|
943
|
+
gap: 5px;
|
|
944
|
+
float: left;
|
|
945
|
+
justify-content: space-evenly;
|
|
946
|
+
flex-wrap: wrap;
|
|
947
|
+
}
|
|
948
|
+
|
|
949
|
+
.color-picker-color {
|
|
950
|
+
height: 25px;
|
|
951
|
+
width: 25px;
|
|
952
|
+
border-radius: 5px;
|
|
953
|
+
position: relative;
|
|
954
|
+
background: red;
|
|
955
|
+
border: 1px solid rgb(31 41 55);
|
|
956
|
+
}
|
|
957
|
+
|
|
958
|
+
.color-picker-hSelector {
|
|
959
|
+
border: 1px solid white;
|
|
960
|
+
position: absolute;
|
|
961
|
+
width: 14px;
|
|
962
|
+
height: 14px;
|
|
963
|
+
background: white;
|
|
964
|
+
border-radius: 10px;
|
|
965
|
+
top: -6px;
|
|
966
|
+
left: -4px;
|
|
967
|
+
box-sizing: border-box;
|
|
968
|
+
z-index: 10;
|
|
969
|
+
}
|
|
970
|
+
`, "ColorInput_component_useStyles_SMNFl4Oy0IA"));
|
|
879
971
|
const store = qwik.useStore({
|
|
880
972
|
value: (props.value ?? "#FFFFFF") || "#FFFFFF"
|
|
881
973
|
});
|
package/lib/index.qwik.mjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { componentQrl, inlinedQrl, _jsxQ, _fnSignal, _restProps, _jsxS, _jsxC, Slot, _jsxBranch, _IMMUTABLE, useStore, _wrapSignal, useLexicalScope } from "@builder.io/qwik";
|
|
1
|
+
import { componentQrl, inlinedQrl, _jsxQ, _fnSignal, _restProps, _jsxS, _jsxC, Slot, useStylesQrl, _jsxBranch, _IMMUTABLE, useStore, _wrapSignal, useLexicalScope } from "@builder.io/qwik";
|
|
2
2
|
import { isServer } from "@builder.io/qwik/build";
|
|
3
3
|
import { Fragment } from "@builder.io/qwik/jsx-runtime";
|
|
4
4
|
const Anchor = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => /* @__PURE__ */ _jsxQ("span", null, {
|
|
@@ -224,6 +224,10 @@ const Card = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) =>
|
|
|
224
224
|
"row",
|
|
225
225
|
"blobs"
|
|
226
226
|
]);
|
|
227
|
+
useStylesQrl(/* @__PURE__ */ inlinedQrl(`
|
|
228
|
+
.-animation-delay-5 { animation-delay: -5s; }
|
|
229
|
+
.-animation-delay-10 { animation-delay: -10s; }
|
|
230
|
+
`, "Card_component_useStyles_POiiuoB0EmE"));
|
|
227
231
|
const blob = Math.round(Math.random() * 6);
|
|
228
232
|
const button = !!props1.onClick$ || props.hoverable;
|
|
229
233
|
return /* @__PURE__ */ _jsxS("div", {
|
|
@@ -874,6 +878,94 @@ const ColorInput = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((prop
|
|
|
874
878
|
"value",
|
|
875
879
|
"presetColors"
|
|
876
880
|
]);
|
|
881
|
+
useStylesQrl(/* @__PURE__ */ inlinedQrl(`
|
|
882
|
+
.color-picker {
|
|
883
|
+
display: flex;
|
|
884
|
+
gap: 12px;
|
|
885
|
+
height: 185px !important;
|
|
886
|
+
width: 100% !important;
|
|
887
|
+
padding: 15px;
|
|
888
|
+
border-radius: 10px;
|
|
889
|
+
border: 1px solid rgb(31 41 55);
|
|
890
|
+
filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.5));
|
|
891
|
+
background: rgba(31 41 55 / 40%);
|
|
892
|
+
backdrop-filter: blur(10px);
|
|
893
|
+
user-select: none;
|
|
894
|
+
position: relative;
|
|
895
|
+
}
|
|
896
|
+
|
|
897
|
+
.color-picker-saturation {
|
|
898
|
+
position: relative;
|
|
899
|
+
height: 100%;
|
|
900
|
+
width: 100%;
|
|
901
|
+
background: linear-gradient(to right, #FFFFFF, #FF0000);
|
|
902
|
+
float: left;
|
|
903
|
+
border-radius: 5px;
|
|
904
|
+
border: 1px solid rgb(31 41 55);
|
|
905
|
+
}
|
|
906
|
+
|
|
907
|
+
.color-picker-brightness {
|
|
908
|
+
width: 100%;
|
|
909
|
+
height: 100%;
|
|
910
|
+
background: linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 1));
|
|
911
|
+
}
|
|
912
|
+
|
|
913
|
+
.color-picker-sbSelector {
|
|
914
|
+
border: 1px solid white;
|
|
915
|
+
position: absolute;
|
|
916
|
+
width: 14px;
|
|
917
|
+
height: 14px;
|
|
918
|
+
background: white;
|
|
919
|
+
border-radius: 10px;
|
|
920
|
+
top: -7px;
|
|
921
|
+
left: -7px;
|
|
922
|
+
box-sizing: border-box;
|
|
923
|
+
z-index: 10;
|
|
924
|
+
}
|
|
925
|
+
|
|
926
|
+
.color-picker-hue {
|
|
927
|
+
width: 8px;
|
|
928
|
+
border-radius: 5px;
|
|
929
|
+
height: 100%;
|
|
930
|
+
position: relative;
|
|
931
|
+
float: left;
|
|
932
|
+
background: linear-gradient(rgb(255, 0, 0) 0%, rgb(255, 0, 255) 17%, rgb(0, 0, 255) 34%, rgb(0, 255, 255) 50%, rgb(0, 255, 0) 67%, rgb(255, 255, 0) 84%, rgb(255, 0, 0) 100%);
|
|
933
|
+
border: 1px solid rgb(31 41 55);
|
|
934
|
+
}
|
|
935
|
+
|
|
936
|
+
.color-picker-colors {
|
|
937
|
+
height: 100%;
|
|
938
|
+
position: relative;
|
|
939
|
+
display: flex;
|
|
940
|
+
flex-direction: column;
|
|
941
|
+
gap: 5px;
|
|
942
|
+
float: left;
|
|
943
|
+
justify-content: space-evenly;
|
|
944
|
+
flex-wrap: wrap;
|
|
945
|
+
}
|
|
946
|
+
|
|
947
|
+
.color-picker-color {
|
|
948
|
+
height: 25px;
|
|
949
|
+
width: 25px;
|
|
950
|
+
border-radius: 5px;
|
|
951
|
+
position: relative;
|
|
952
|
+
background: red;
|
|
953
|
+
border: 1px solid rgb(31 41 55);
|
|
954
|
+
}
|
|
955
|
+
|
|
956
|
+
.color-picker-hSelector {
|
|
957
|
+
border: 1px solid white;
|
|
958
|
+
position: absolute;
|
|
959
|
+
width: 14px;
|
|
960
|
+
height: 14px;
|
|
961
|
+
background: white;
|
|
962
|
+
border-radius: 10px;
|
|
963
|
+
top: -6px;
|
|
964
|
+
left: -4px;
|
|
965
|
+
box-sizing: border-box;
|
|
966
|
+
z-index: 10;
|
|
967
|
+
}
|
|
968
|
+
`, "ColorInput_component_useStyles_SMNFl4Oy0IA"));
|
|
877
969
|
const store = useStore({
|
|
878
970
|
value: (props.value ?? "#FFFFFF") || "#FFFFFF"
|
|
879
971
|
});
|