@luminescent/ui-qwik 6.0.1 → 6.1.1
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 +16 -16
- package/lib/index.qwik.mjs +16 -16
- package/package.json +2 -2
package/lib/index.qwik.cjs
CHANGED
|
@@ -45,7 +45,7 @@ const Anchor = qwik.component$(({ id, ...props }) => /* @__PURE__ */ jsxRuntime.
|
|
|
45
45
|
await navigator.clipboard.writeText(window.location.href);
|
|
46
46
|
},
|
|
47
47
|
children: /* @__PURE__ */ jsxRuntime.jsx(Link, {
|
|
48
|
-
class: "opacity-10 transition-
|
|
48
|
+
class: "opacity-10 transition-opacity duration-300 group-hover:opacity-100 group-hover:duration-75",
|
|
49
49
|
size: 20
|
|
50
50
|
})
|
|
51
51
|
})
|
|
@@ -484,7 +484,7 @@ const ColorPicker = qwik.component$(({ id, value = "#000000", colors = [
|
|
|
484
484
|
});
|
|
485
485
|
return /* @__PURE__ */ jsxRuntime.jsxs("div", {
|
|
486
486
|
class: {
|
|
487
|
-
"lum-card touch-none p-4
|
|
487
|
+
"lum-card touch-none p-4": true,
|
|
488
488
|
"flex-col": !horizontal,
|
|
489
489
|
...props.class
|
|
490
490
|
},
|
|
@@ -508,7 +508,7 @@ const ColorPicker = qwik.component$(({ id, value = "#000000", colors = [
|
|
|
508
508
|
"preventdefault:touchstart": true,
|
|
509
509
|
children: [
|
|
510
510
|
/* @__PURE__ */ jsxRuntime.jsx("div", {
|
|
511
|
-
class: "h-[150px] w-[125px] rounded-md border border-gray-700 bg-
|
|
511
|
+
class: "h-[150px] w-[125px] rounded-md border border-gray-700 bg-linear-to-b from-transparent to-black"
|
|
512
512
|
}),
|
|
513
513
|
/* @__PURE__ */ jsxRuntime.jsx("div", {
|
|
514
514
|
class: {
|
|
@@ -650,7 +650,7 @@ const Dropdown = qwik.component$(({ class: Class, hover, opened, ...props }) =>
|
|
|
650
650
|
/* @__PURE__ */ jsxRuntime.jsx(ChevronDown, {
|
|
651
651
|
size: 16,
|
|
652
652
|
class: {
|
|
653
|
-
"ease-out motion-safe:transition-
|
|
653
|
+
"ease-out motion-safe:transition-transform": true,
|
|
654
654
|
"rotate-180 transform": opened,
|
|
655
655
|
"duration-300 group-hover:rotate-180 group-hover:transform group-hover:duration-75": hover,
|
|
656
656
|
"focus-within:rotate-180 focus-within:transform focus-within:duration-75": true
|
|
@@ -690,7 +690,7 @@ const Nav = qwik.component$(({ fixed, floating, noblur, nohamburger, colorClass
|
|
|
690
690
|
return /* @__PURE__ */ jsxRuntime.jsxs("nav", {
|
|
691
691
|
...props,
|
|
692
692
|
class: {
|
|
693
|
-
"top-0 left-0 z-50 flex w-full flex-col
|
|
693
|
+
"top-0 left-0 z-50 flex w-full flex-col": true,
|
|
694
694
|
fixed,
|
|
695
695
|
absolute: !fixed,
|
|
696
696
|
...props.class
|
|
@@ -699,8 +699,8 @@ const Nav = qwik.component$(({ fixed, floating, noblur, nohamburger, colorClass
|
|
|
699
699
|
!nohamburger && /* @__PURE__ */ jsxRuntime.jsx("div", {
|
|
700
700
|
class: {
|
|
701
701
|
"absolute top-full lum-card motion-safe:transition-all sm:hidden max-w-7xl gap-2 px-2 py-4": true,
|
|
702
|
-
"w-[calc(100%-
|
|
703
|
-
"w-[calc(100%-
|
|
702
|
+
"w-[calc(100%-(--spacing(8)))] mx-4": floating,
|
|
703
|
+
"w-[calc(100%-(--spacing(4)))] mx-2": !floating,
|
|
704
704
|
"mt-2": menu.value,
|
|
705
705
|
"pointer-events-none opacity-0 -mt-2 scale-95": !menu.value,
|
|
706
706
|
"backdrop-blur-lg": !noblur,
|
|
@@ -713,7 +713,7 @@ const Nav = qwik.component$(({ fixed, floating, noblur, nohamburger, colorClass
|
|
|
713
713
|
/* @__PURE__ */ jsxRuntime.jsx("div", {
|
|
714
714
|
class: {
|
|
715
715
|
[colorClass]: !floating,
|
|
716
|
-
"
|
|
716
|
+
"border-x-0! border-t-0!": !floating,
|
|
717
717
|
"backdrop-blur-lg": !noblur && !floating,
|
|
718
718
|
"relative mx-2 mt-2": floating
|
|
719
719
|
},
|
|
@@ -745,7 +745,7 @@ const Nav = qwik.component$(({ fixed, floating, noblur, nohamburger, colorClass
|
|
|
745
745
|
}),
|
|
746
746
|
!nohamburger && /* @__PURE__ */ jsxRuntime.jsx("button", {
|
|
747
747
|
name: "Navigation Menu",
|
|
748
|
-
class: "lum-btn lum-bg-transparent p-2 sm:hidden",
|
|
748
|
+
class: "lum-btn lum-bg-transparent p-2 sm:hidden rounded-lum-2",
|
|
749
749
|
onClick$: () => menu.value = !menu.value,
|
|
750
750
|
children: /* @__PURE__ */ jsxRuntime.jsx(Menu, {
|
|
751
751
|
size: 24
|
|
@@ -965,9 +965,9 @@ const SelectMenuRaw = qwik.component$(({ values, class: Class, panelClass = "lum
|
|
|
965
965
|
}),
|
|
966
966
|
/* @__PURE__ */ jsxRuntime.jsxs("div", {
|
|
967
967
|
class: {
|
|
968
|
-
"absolute z-
|
|
968
|
+
"absolute z-1000 mt-2": true,
|
|
969
969
|
"backdrop-blur-lg": !noblur,
|
|
970
|
-
"lum-scroll flex max-h-72 flex-col gap-1 overflow-auto rounded-lum border p-1 select-none motion-safe:transition-all": true,
|
|
970
|
+
"lum-scroll flex max-h-72 flex-col gap-1 overflow-auto rounded-lum border p-1 select-none motion-safe:transition-all ease-out": true,
|
|
971
971
|
"left-0": align === "left",
|
|
972
972
|
"right-0": align === "right",
|
|
973
973
|
"left-1/2 -translate-x-1/2": align === "center",
|
|
@@ -1009,9 +1009,9 @@ const Sidebar = qwik.component$(({ position, ...props }) => {
|
|
|
1009
1009
|
return /* @__PURE__ */ jsxRuntime.jsx("aside", {
|
|
1010
1010
|
...props,
|
|
1011
1011
|
class: {
|
|
1012
|
-
"hidden lg:flex sticky lum-card top-0 z-
|
|
1013
|
-
"left-0 border-0 border-r
|
|
1014
|
-
"right-0 border-0 border-l
|
|
1012
|
+
"hidden lg:flex sticky lum-card top-0 z-40 px-6 pb-0 rounded-none pt-20 h-dvh": true,
|
|
1013
|
+
"left-0 border-0 border-r": position === "left" || !position,
|
|
1014
|
+
"right-0 border-0 border-l": position === "right",
|
|
1015
1015
|
...props.class
|
|
1016
1016
|
},
|
|
1017
1017
|
children: /* @__PURE__ */ jsxRuntime.jsxs("nav", {
|
|
@@ -1051,8 +1051,8 @@ const Toggle = qwik.component$(({ checkbox, round, ...props }) => {
|
|
|
1051
1051
|
}),
|
|
1052
1052
|
/* @__PURE__ */ jsxRuntime.jsx("div", {
|
|
1053
1053
|
class: {
|
|
1054
|
-
"peer h-7 duration-300 ease-out hover:duration-75
|
|
1055
|
-
"after:absolute after:top-
|
|
1054
|
+
"peer h-7 duration-300 ease-out hover:duration-75": true,
|
|
1055
|
+
"after:absolute after:top-1 after:left-1 after:h-5 after:w-5 after:border after:duration-300 after:ease-out after:content-[''] after:hover:duration-75 after:motion-safe:transition-transform": true,
|
|
1056
1056
|
"rounded-lum after:rounded-lum-1": !round,
|
|
1057
1057
|
"rounded-full after:rounded-full": round,
|
|
1058
1058
|
"w-12 peer-checked:after:translate-x-full": !checkbox,
|
package/lib/index.qwik.mjs
CHANGED
|
@@ -43,7 +43,7 @@ const Anchor = component$(({ id, ...props }) => /* @__PURE__ */ jsxs("div", {
|
|
|
43
43
|
await navigator.clipboard.writeText(window.location.href);
|
|
44
44
|
},
|
|
45
45
|
children: /* @__PURE__ */ jsx(Link, {
|
|
46
|
-
class: "opacity-10 transition-
|
|
46
|
+
class: "opacity-10 transition-opacity duration-300 group-hover:opacity-100 group-hover:duration-75",
|
|
47
47
|
size: 20
|
|
48
48
|
})
|
|
49
49
|
})
|
|
@@ -482,7 +482,7 @@ const ColorPicker = component$(({ id, value = "#000000", colors = [
|
|
|
482
482
|
});
|
|
483
483
|
return /* @__PURE__ */ jsxs("div", {
|
|
484
484
|
class: {
|
|
485
|
-
"lum-card touch-none p-4
|
|
485
|
+
"lum-card touch-none p-4": true,
|
|
486
486
|
"flex-col": !horizontal,
|
|
487
487
|
...props.class
|
|
488
488
|
},
|
|
@@ -506,7 +506,7 @@ const ColorPicker = component$(({ id, value = "#000000", colors = [
|
|
|
506
506
|
"preventdefault:touchstart": true,
|
|
507
507
|
children: [
|
|
508
508
|
/* @__PURE__ */ jsx("div", {
|
|
509
|
-
class: "h-[150px] w-[125px] rounded-md border border-gray-700 bg-
|
|
509
|
+
class: "h-[150px] w-[125px] rounded-md border border-gray-700 bg-linear-to-b from-transparent to-black"
|
|
510
510
|
}),
|
|
511
511
|
/* @__PURE__ */ jsx("div", {
|
|
512
512
|
class: {
|
|
@@ -648,7 +648,7 @@ const Dropdown = component$(({ class: Class, hover, opened, ...props }) => {
|
|
|
648
648
|
/* @__PURE__ */ jsx(ChevronDown, {
|
|
649
649
|
size: 16,
|
|
650
650
|
class: {
|
|
651
|
-
"ease-out motion-safe:transition-
|
|
651
|
+
"ease-out motion-safe:transition-transform": true,
|
|
652
652
|
"rotate-180 transform": opened,
|
|
653
653
|
"duration-300 group-hover:rotate-180 group-hover:transform group-hover:duration-75": hover,
|
|
654
654
|
"focus-within:rotate-180 focus-within:transform focus-within:duration-75": true
|
|
@@ -688,7 +688,7 @@ const Nav = component$(({ fixed, floating, noblur, nohamburger, colorClass = "lu
|
|
|
688
688
|
return /* @__PURE__ */ jsxs("nav", {
|
|
689
689
|
...props,
|
|
690
690
|
class: {
|
|
691
|
-
"top-0 left-0 z-50 flex w-full flex-col
|
|
691
|
+
"top-0 left-0 z-50 flex w-full flex-col": true,
|
|
692
692
|
fixed,
|
|
693
693
|
absolute: !fixed,
|
|
694
694
|
...props.class
|
|
@@ -697,8 +697,8 @@ const Nav = component$(({ fixed, floating, noblur, nohamburger, colorClass = "lu
|
|
|
697
697
|
!nohamburger && /* @__PURE__ */ jsx("div", {
|
|
698
698
|
class: {
|
|
699
699
|
"absolute top-full lum-card motion-safe:transition-all sm:hidden max-w-7xl gap-2 px-2 py-4": true,
|
|
700
|
-
"w-[calc(100%-
|
|
701
|
-
"w-[calc(100%-
|
|
700
|
+
"w-[calc(100%-(--spacing(8)))] mx-4": floating,
|
|
701
|
+
"w-[calc(100%-(--spacing(4)))] mx-2": !floating,
|
|
702
702
|
"mt-2": menu.value,
|
|
703
703
|
"pointer-events-none opacity-0 -mt-2 scale-95": !menu.value,
|
|
704
704
|
"backdrop-blur-lg": !noblur,
|
|
@@ -711,7 +711,7 @@ const Nav = component$(({ fixed, floating, noblur, nohamburger, colorClass = "lu
|
|
|
711
711
|
/* @__PURE__ */ jsx("div", {
|
|
712
712
|
class: {
|
|
713
713
|
[colorClass]: !floating,
|
|
714
|
-
"
|
|
714
|
+
"border-x-0! border-t-0!": !floating,
|
|
715
715
|
"backdrop-blur-lg": !noblur && !floating,
|
|
716
716
|
"relative mx-2 mt-2": floating
|
|
717
717
|
},
|
|
@@ -743,7 +743,7 @@ const Nav = component$(({ fixed, floating, noblur, nohamburger, colorClass = "lu
|
|
|
743
743
|
}),
|
|
744
744
|
!nohamburger && /* @__PURE__ */ jsx("button", {
|
|
745
745
|
name: "Navigation Menu",
|
|
746
|
-
class: "lum-btn lum-bg-transparent p-2 sm:hidden",
|
|
746
|
+
class: "lum-btn lum-bg-transparent p-2 sm:hidden rounded-lum-2",
|
|
747
747
|
onClick$: () => menu.value = !menu.value,
|
|
748
748
|
children: /* @__PURE__ */ jsx(Menu, {
|
|
749
749
|
size: 24
|
|
@@ -963,9 +963,9 @@ const SelectMenuRaw = component$(({ values, class: Class, panelClass = "lum-bg-l
|
|
|
963
963
|
}),
|
|
964
964
|
/* @__PURE__ */ jsxs("div", {
|
|
965
965
|
class: {
|
|
966
|
-
"absolute z-
|
|
966
|
+
"absolute z-1000 mt-2": true,
|
|
967
967
|
"backdrop-blur-lg": !noblur,
|
|
968
|
-
"lum-scroll flex max-h-72 flex-col gap-1 overflow-auto rounded-lum border p-1 select-none motion-safe:transition-all": true,
|
|
968
|
+
"lum-scroll flex max-h-72 flex-col gap-1 overflow-auto rounded-lum border p-1 select-none motion-safe:transition-all ease-out": true,
|
|
969
969
|
"left-0": align === "left",
|
|
970
970
|
"right-0": align === "right",
|
|
971
971
|
"left-1/2 -translate-x-1/2": align === "center",
|
|
@@ -1007,9 +1007,9 @@ const Sidebar = component$(({ position, ...props }) => {
|
|
|
1007
1007
|
return /* @__PURE__ */ jsx("aside", {
|
|
1008
1008
|
...props,
|
|
1009
1009
|
class: {
|
|
1010
|
-
"hidden lg:flex sticky lum-card top-0 z-
|
|
1011
|
-
"left-0 border-0 border-r
|
|
1012
|
-
"right-0 border-0 border-l
|
|
1010
|
+
"hidden lg:flex sticky lum-card top-0 z-40 px-6 pb-0 rounded-none pt-20 h-dvh": true,
|
|
1011
|
+
"left-0 border-0 border-r": position === "left" || !position,
|
|
1012
|
+
"right-0 border-0 border-l": position === "right",
|
|
1013
1013
|
...props.class
|
|
1014
1014
|
},
|
|
1015
1015
|
children: /* @__PURE__ */ jsxs("nav", {
|
|
@@ -1049,8 +1049,8 @@ const Toggle = component$(({ checkbox, round, ...props }) => {
|
|
|
1049
1049
|
}),
|
|
1050
1050
|
/* @__PURE__ */ jsx("div", {
|
|
1051
1051
|
class: {
|
|
1052
|
-
"peer h-7 duration-300 ease-out hover:duration-75
|
|
1053
|
-
"after:absolute after:top-
|
|
1052
|
+
"peer h-7 duration-300 ease-out hover:duration-75": true,
|
|
1053
|
+
"after:absolute after:top-1 after:left-1 after:h-5 after:w-5 after:border after:duration-300 after:ease-out after:content-[''] after:hover:duration-75 after:motion-safe:transition-transform": true,
|
|
1054
1054
|
"rounded-lum after:rounded-lum-1": !round,
|
|
1055
1055
|
"rounded-full after:rounded-full": round,
|
|
1056
1056
|
"w-12 peer-checked:after:translate-x-full": !checkbox,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@luminescent/ui-qwik",
|
|
3
|
-
"version": "6.
|
|
3
|
+
"version": "6.1.1",
|
|
4
4
|
"description": "Luminescent UI library - Qwik",
|
|
5
5
|
"main": "./lib/index.qwik.mjs",
|
|
6
6
|
"qwik": "./lib/index.qwik.mjs",
|
|
@@ -50,7 +50,7 @@
|
|
|
50
50
|
"vite-tsconfig-paths": "^5.1.4"
|
|
51
51
|
},
|
|
52
52
|
"peerDependencies": {
|
|
53
|
-
"@luminescent/ui": "6.
|
|
53
|
+
"@luminescent/ui": "6.1.1"
|
|
54
54
|
},
|
|
55
55
|
"scripts": {
|
|
56
56
|
"build": "qwik build",
|