@luminescent/ui 0.5.0 → 0.5.2

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.
Files changed (6) hide show
  1. package/README.md +2 -2
  2. package/lib/index.qwik.cjs +34 -24
  3. package/lib/index.qwik.mjs +35 -25
  4. package/lib-types/tailwind.config.d.ts +0 -1
  5. package/package.json +1 -1
  6. package/src/tailwind.config.js +0 -3
package/README.md CHANGED
@@ -3,7 +3,7 @@
3
3
  To use the Luminescent UI Qwik Library, you need to install the package from npm.
4
4
 
5
5
  ```bash
6
- npm install @luminescent/ui
6
+ npm install @anuragroy/tailwindcss-animate @luminescent/ui
7
7
  ```
8
8
 
9
9
  Once installed, since this is a tailwind based library, you need to include the following to your tailwind config
@@ -36,7 +36,7 @@ export default {
36
36
  },
37
37
  plugins: [
38
38
  // ...
39
- ...tailwindConfig.plugins,
39
+ require('@anuragroy/tailwindcss-animate'),
40
40
  ],
41
41
  };
42
42
  ```
package/lib/index.qwik.cjs CHANGED
@@ -927,7 +927,7 @@ const ColorInput = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inline
927
927
  top: -7px;
928
928
  left: -7px;
929
929
  box-sizing: border-box;
930
- ≈ }
930
+ }
931
931
 
932
932
  .color-picker-hue {
933
933
  width: 8px;
@@ -971,9 +971,6 @@ const ColorInput = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inline
971
971
  box-sizing: border-box;
972
972
  }
973
973
  `, "ColorInput_component_useStyles_SMNFl4Oy0IA"));
974
- const store = qwik.useStore({
975
- value: (props.value ?? "#000000") || "#FFFFFF"
976
- });
977
974
  return /* @__PURE__ */ qwik._jsxQ("div", null, null, [
978
975
  /* @__PURE__ */ qwik._jsxQ("label", {
979
976
  for: qwik._wrapSignal(props1, "id")
@@ -983,7 +980,7 @@ const ColorInput = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inline
983
980
  /* @__PURE__ */ qwik._jsxC(TextInputRaw, {
984
981
  ...props1,
985
982
  get value() {
986
- return store.value;
983
+ return props.value ?? "#000000";
987
984
  },
988
985
  onBlur$: /* @__PURE__ */ qwik.inlinedQrl(() => {
989
986
  const [props12] = qwik.useLexicalScope();
@@ -993,51 +990,64 @@ const ColorInput = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inline
993
990
  props1
994
991
  ]),
995
992
  onFocus$: /* @__PURE__ */ qwik.inlinedQrl((event, element) => {
996
- const [props12, props2, store2] = qwik.useLexicalScope();
993
+ const [props12, props2] = qwik.useLexicalScope();
997
994
  const pickerDiv = document.getElementById(`${props12.id}-color-picker`);
998
995
  if (!pickerDiv.children.length) {
999
996
  if (build.isServer)
1000
997
  return;
1001
998
  const picker = new ColorPicker({
1002
999
  el: pickerDiv,
1003
- color: store2.value,
1000
+ color: props2.value ?? "#000000",
1004
1001
  colors: props2.presetColors,
1005
1002
  width: 150,
1006
1003
  height: 150
1007
1004
  });
1008
1005
  picker.onChange((color) => {
1009
- store2.value = color;
1006
+ element.value = color;
1007
+ switch (props2.preview ?? "left") {
1008
+ case "full":
1009
+ element.style.backgroundColor = color;
1010
+ element.style.color = getBrightness(hexNumberToRgb(hexStringToNumber(color))) > 0.5 ? "black" : "white";
1011
+ break;
1012
+ case "left":
1013
+ element.style.borderLeft = `40px solid ${color}`;
1014
+ break;
1015
+ case "right":
1016
+ element.style.borderRight = `40px solid ${color}`;
1017
+ break;
1018
+ case "top":
1019
+ element.style.borderTop = `10px solid ${color}`;
1020
+ break;
1021
+ case "bottom":
1022
+ element.style.borderBottom = `10px solid ${color}`;
1023
+ break;
1024
+ }
1010
1025
  if (props2.onInput$)
1011
1026
  props2.onInput$(color, element);
1012
1027
  });
1013
- element.addEventListener("input", () => {
1014
- if (!/^#[0-9A-F]{6}$/i.test(element.value))
1015
- return;
1016
- picker.setColor(element.value);
1017
- });
1028
+ element.addEventListener("input", () => picker.setColor(element.value));
1018
1029
  }
1019
1030
  pickerDiv.classList.remove("opacity-0", "pointer-events-none", "scale-95");
1020
1031
  }, "ColorInput_component_div_TextInputRaw_onFocus_9bHrhSeTgfI", [
1021
1032
  props1,
1022
- props,
1023
- store
1033
+ props
1024
1034
  ]),
1025
1035
  style: (props.preview ?? "left") == "full" ? {
1026
- backgroundColor: `${store.value}`,
1027
- color: getBrightness(hexNumberToRgb(hexStringToNumber(store.value))) > 0.5 ? "black" : "white"
1036
+ backgroundColor: `${props.value ?? "#000000"}`,
1037
+ color: getBrightness(hexNumberToRgb(hexStringToNumber(props.value ?? "#000000"))) > 0.5 ? "black" : "white"
1028
1038
  } : (props.preview ?? "left") == "left" ? {
1029
- borderLeft: `40px solid ${store.value}`
1039
+ borderLeft: `40px solid ${props.value ?? "#000000"}`
1030
1040
  } : (props.preview ?? "left") == "right" ? {
1031
- borderRight: `40px solid ${store.value}`
1041
+ borderRight: `40px solid ${props.value ?? "#000000"}`
1032
1042
  } : (props.preview ?? "left") == "top" ? {
1033
- borderTop: `10px solid ${store.value}`
1043
+ borderTop: `10px solid ${props.value ?? "#000000"}`
1034
1044
  } : (props.preview ?? "left") == "bottom" ? {
1035
- borderBottom: `10px solid ${store.value}`
1045
+ borderBottom: `10px solid ${props.value ?? "#000000"}`
1036
1046
  } : {},
1037
1047
  [qwik._IMMUTABLE]: {
1038
- value: qwik._fnSignal((p0) => p0.value, [
1039
- store
1040
- ], "p0.value")
1048
+ value: qwik._fnSignal((p0) => p0.value ?? "#000000", [
1049
+ props
1050
+ ], 'p0.value??"#000000"')
1041
1051
  }
1042
1052
  }, 0, "0s_1"),
1043
1053
  /* @__PURE__ */ qwik._jsxQ("div", {
package/lib/index.qwik.mjs CHANGED
@@ -1,4 +1,4 @@
1
- import { componentQrl, inlinedQrl, _jsxQ, _fnSignal, _restProps, _jsxS, _jsxC, Slot, _jsxBranch, _IMMUTABLE, useStylesQrl, useStore, _wrapSignal, useLexicalScope } from "@builder.io/qwik";
1
+ import { componentQrl, inlinedQrl, _jsxQ, _fnSignal, _restProps, _jsxS, _jsxC, Slot, _jsxBranch, _IMMUTABLE, useStylesQrl, _wrapSignal, useLexicalScope, useStore } 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, {
@@ -925,7 +925,7 @@ const ColorInput = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((prop
925
925
  top: -7px;
926
926
  left: -7px;
927
927
  box-sizing: border-box;
928
- ≈ }
928
+ }
929
929
 
930
930
  .color-picker-hue {
931
931
  width: 8px;
@@ -969,9 +969,6 @@ const ColorInput = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((prop
969
969
  box-sizing: border-box;
970
970
  }
971
971
  `, "ColorInput_component_useStyles_SMNFl4Oy0IA"));
972
- const store = useStore({
973
- value: (props.value ?? "#000000") || "#FFFFFF"
974
- });
975
972
  return /* @__PURE__ */ _jsxQ("div", null, null, [
976
973
  /* @__PURE__ */ _jsxQ("label", {
977
974
  for: _wrapSignal(props1, "id")
@@ -981,7 +978,7 @@ const ColorInput = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((prop
981
978
  /* @__PURE__ */ _jsxC(TextInputRaw, {
982
979
  ...props1,
983
980
  get value() {
984
- return store.value;
981
+ return props.value ?? "#000000";
985
982
  },
986
983
  onBlur$: /* @__PURE__ */ inlinedQrl(() => {
987
984
  const [props12] = useLexicalScope();
@@ -991,51 +988,64 @@ const ColorInput = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((prop
991
988
  props1
992
989
  ]),
993
990
  onFocus$: /* @__PURE__ */ inlinedQrl((event, element) => {
994
- const [props12, props2, store2] = useLexicalScope();
991
+ const [props12, props2] = useLexicalScope();
995
992
  const pickerDiv = document.getElementById(`${props12.id}-color-picker`);
996
993
  if (!pickerDiv.children.length) {
997
994
  if (isServer)
998
995
  return;
999
996
  const picker = new ColorPicker({
1000
997
  el: pickerDiv,
1001
- color: store2.value,
998
+ color: props2.value ?? "#000000",
1002
999
  colors: props2.presetColors,
1003
1000
  width: 150,
1004
1001
  height: 150
1005
1002
  });
1006
1003
  picker.onChange((color) => {
1007
- store2.value = color;
1004
+ element.value = color;
1005
+ switch (props2.preview ?? "left") {
1006
+ case "full":
1007
+ element.style.backgroundColor = color;
1008
+ element.style.color = getBrightness(hexNumberToRgb(hexStringToNumber(color))) > 0.5 ? "black" : "white";
1009
+ break;
1010
+ case "left":
1011
+ element.style.borderLeft = `40px solid ${color}`;
1012
+ break;
1013
+ case "right":
1014
+ element.style.borderRight = `40px solid ${color}`;
1015
+ break;
1016
+ case "top":
1017
+ element.style.borderTop = `10px solid ${color}`;
1018
+ break;
1019
+ case "bottom":
1020
+ element.style.borderBottom = `10px solid ${color}`;
1021
+ break;
1022
+ }
1008
1023
  if (props2.onInput$)
1009
1024
  props2.onInput$(color, element);
1010
1025
  });
1011
- element.addEventListener("input", () => {
1012
- if (!/^#[0-9A-F]{6}$/i.test(element.value))
1013
- return;
1014
- picker.setColor(element.value);
1015
- });
1026
+ element.addEventListener("input", () => picker.setColor(element.value));
1016
1027
  }
1017
1028
  pickerDiv.classList.remove("opacity-0", "pointer-events-none", "scale-95");
1018
1029
  }, "ColorInput_component_div_TextInputRaw_onFocus_9bHrhSeTgfI", [
1019
1030
  props1,
1020
- props,
1021
- store
1031
+ props
1022
1032
  ]),
1023
1033
  style: (props.preview ?? "left") == "full" ? {
1024
- backgroundColor: `${store.value}`,
1025
- color: getBrightness(hexNumberToRgb(hexStringToNumber(store.value))) > 0.5 ? "black" : "white"
1034
+ backgroundColor: `${props.value ?? "#000000"}`,
1035
+ color: getBrightness(hexNumberToRgb(hexStringToNumber(props.value ?? "#000000"))) > 0.5 ? "black" : "white"
1026
1036
  } : (props.preview ?? "left") == "left" ? {
1027
- borderLeft: `40px solid ${store.value}`
1037
+ borderLeft: `40px solid ${props.value ?? "#000000"}`
1028
1038
  } : (props.preview ?? "left") == "right" ? {
1029
- borderRight: `40px solid ${store.value}`
1039
+ borderRight: `40px solid ${props.value ?? "#000000"}`
1030
1040
  } : (props.preview ?? "left") == "top" ? {
1031
- borderTop: `10px solid ${store.value}`
1041
+ borderTop: `10px solid ${props.value ?? "#000000"}`
1032
1042
  } : (props.preview ?? "left") == "bottom" ? {
1033
- borderBottom: `10px solid ${store.value}`
1043
+ borderBottom: `10px solid ${props.value ?? "#000000"}`
1034
1044
  } : {},
1035
1045
  [_IMMUTABLE]: {
1036
- value: _fnSignal((p0) => p0.value, [
1037
- store
1038
- ], "p0.value")
1046
+ value: _fnSignal((p0) => p0.value ?? "#000000", [
1047
+ props
1048
+ ], 'p0.value??"#000000"')
1039
1049
  }
1040
1050
  }, 0, "0s_1"),
1041
1051
  /* @__PURE__ */ _jsxQ("div", {
package/lib-types/tailwind.config.d.ts CHANGED
@@ -120,4 +120,3 @@ export namespace theme {
120
120
  }
121
121
  }
122
122
  }
123
- export let plugins: any[];
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@luminescent/ui",
3
- "version": "0.5.0",
3
+ "version": "0.5.2",
4
4
  "description": "Luminescent UI library",
5
5
  "main": "./lib/index.qwik.mjs",
6
6
  "qwik": "./lib/index.qwik.mjs",
package/src/tailwind.config.js CHANGED
@@ -69,7 +69,4 @@ module.exports = {
69
69
  },
70
70
  },
71
71
  },
72
- plugins: [
73
- require('@anuragroy/tailwindcss-animate'),
74
- ],
75
72
  };