@luminescent/ui-qwik 4.2.2 → 4.3.0-0

package/lib/index.qwik.cjs

@@ -657,127 +657,6 @@ const Dropdown = qwik.component$(({ class: Class, hover, opened, ...props }) =>
     ]
   });
 });
-const SelectMenu = qwik.component$((props) => {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", {
-    class: "flex flex-col",
-    children: [
-      /* @__PURE__ */ jsxRuntime.jsx("label", {
-        for: props.id,
-        class: "pb-1 text-lum-text select-none",
-        children: /* @__PURE__ */ jsxRuntime.jsx(qwik.Slot, {})
-      }),
-      /* @__PURE__ */ jsxRuntime.jsxs(SelectMenuRaw, {
-        ...props,
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", {
-            "q:slot": "dropdown",
-            children: (props.customDropdown || !props.values?.length) && /* @__PURE__ */ jsxRuntime.jsx(qwik.Slot, {
-              name: "dropdown"
-            })
-          }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", {
-            "q:slot": "extra-buttons",
-            children: /* @__PURE__ */ jsxRuntime.jsx(qwik.Slot, {
-              name: "extra-buttons"
-            })
-          })
-        ]
-      })
-    ]
-  });
-});
-const SelectMenuRaw = qwik.component$(({ id, values, class: Class, customDropdown, hover, align, ...props }) => {
-  const store = qwik.useStore({
-    opened: false,
-    value: props.value
-  });
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", {
-    class: {
-      "relative touch-manipulation": true,
-      group: hover
-    },
-    children: [
-      values && /* @__PURE__ */ jsxRuntime.jsx("select", {
-        ...props,
-        id,
-        class: {
-          hidden: true
-        },
-        children: values.map((value, i) => {
-          return /* @__PURE__ */ jsxRuntime.jsx("option", {
-            value: value.value,
-            children: `${value.value}`
-          }, i);
-        })
-      }),
-      /* @__PURE__ */ jsxRuntime.jsxs(Dropdown, {
-        opened: store.opened,
-        class: {
-          "w-full": true,
-          ...Class
-        },
-        onClick$: () => {
-          if (!hover) store.opened = !store.opened;
-        },
-        children: [
-          customDropdown && /* @__PURE__ */ jsxRuntime.jsx(qwik.Slot, {
-            name: "dropdown"
-          }),
-          !customDropdown && /* @__PURE__ */ jsxRuntime.jsxs("span", {
-            id: `lui-${id}-name`,
-            children: [
-              values && (values.find((value) => value.value.toString() === store.value)?.name ?? values[0].name),
-              !values && /* @__PURE__ */ jsxRuntime.jsx(qwik.Slot, {
-                name: "dropdown"
-              })
-            ]
-          })
-        ]
-      }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", {
-        id: `lui-${id}-opts-container`,
-        class: {
-          "absolute z-[1000] pt-2 transition-all ease-out": true,
-          "left-0": align === "left",
-          "right-0": align === "right",
-          "left-1/2 -translate-x-1/2": align === "center",
-          "pointer-events-none scale-95 opacity-0": !store.opened,
-          "duration-300 group-hover:pointer-events-auto group-hover:scale-100 group-hover:opacity-100 group-hover:duration-75": hover,
-          "focus-within:pointer-events-auto focus-within:scale-100 focus-within:opacity-100 focus-within:duration-75": true
-        },
-        children: /* @__PURE__ */ jsxRuntime.jsxs("div", {
-          id: `lui-${id}-opts`,
-          class: {
-            "lum-bg-lum-input-bg lum-scroll flex max-h-72 flex-col gap-1 overflow-auto rounded-lum border p-1 select-none motion-safe:transition-all": true
-          },
-          children: [
-            values?.map(({ name, value }, i) => {
-              return /* @__PURE__ */ jsxRuntime.jsx("button", {
-                type: "button",
-                class: {
-                  "lum-btn lum-bg-transparent rounded-lum-1": true
-                },
-                onClick$: () => {
-                  store.opened = false;
-                  const select = document.getElementById(id);
-                  if (select) {
-                    select.value = value.toString();
-                    select.dispatchEvent(new Event("change"));
-                  }
-                  store.value = value.toString();
-                },
-                children: name
-              }, i);
-            }),
-            /* @__PURE__ */ jsxRuntime.jsx(qwik.Slot, {
-              name: "extra-buttons"
-            })
-          ]
-        })
-      })
-    ]
-  });
-});
 const Menu = qwik.component$(({ size, ...props }) => {
   return /* @__PURE__ */ jsxRuntime.jsxs("svg", {
     xmlns: "http://www.w3.org/2000/svg",
@@ -1003,6 +882,183 @@ const NumberInputRaw = qwik.component$(({ input, onDecrement$, onIncrement$, val
     ]
   });
 });
+const SelectMenu = qwik.component$((props) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", {
+    class: "flex flex-col",
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx("label", {
+        for: props.id,
+        class: "pb-1 text-lum-text select-none",
+        children: /* @__PURE__ */ jsxRuntime.jsx(qwik.Slot, {})
+      }),
+      /* @__PURE__ */ jsxRuntime.jsxs(SelectMenuRaw, {
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", {
+            "q:slot": "dropdown",
+            children: (props.customDropdown || !props.values?.length) && /* @__PURE__ */ jsxRuntime.jsx(qwik.Slot, {
+              name: "dropdown"
+            })
+          }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", {
+            "q:slot": "extra-buttons",
+            children: /* @__PURE__ */ jsxRuntime.jsx(qwik.Slot, {
+              name: "extra-buttons"
+            })
+          })
+        ]
+      })
+    ]
+  });
+});
+const SelectMenuRaw = qwik.component$(({ id, values, class: Class, customDropdown, hover, align, ...props }) => {
+  const store = qwik.useStore({
+    opened: false,
+    value: props.value
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", {
+    class: {
+      "relative touch-manipulation": true,
+      group: hover
+    },
+    children: [
+      values && /* @__PURE__ */ jsxRuntime.jsx("select", {
+        ...props,
+        id,
+        class: {
+          hidden: true
+        },
+        children: values.map((value, i) => {
+          return /* @__PURE__ */ jsxRuntime.jsx("option", {
+            value: value.value,
+            children: `${value.value}`
+          }, i);
+        })
+      }),
+      /* @__PURE__ */ jsxRuntime.jsxs(Dropdown, {
+        opened: store.opened,
+        class: {
+          "w-full": true,
+          ...Class
+        },
+        onClick$: () => {
+          if (!hover) store.opened = !store.opened;
+        },
+        children: [
+          customDropdown && /* @__PURE__ */ jsxRuntime.jsx(qwik.Slot, {
+            name: "dropdown"
+          }),
+          !customDropdown && /* @__PURE__ */ jsxRuntime.jsxs("span", {
+            id: `lui-${id}-name`,
+            children: [
+              values && (values.find((value) => value.value.toString() === store.value)?.name ?? values[0].name),
+              !values && /* @__PURE__ */ jsxRuntime.jsx(qwik.Slot, {
+                name: "dropdown"
+              })
+            ]
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", {
+        id: `lui-${id}-opts-container`,
+        class: {
+          "absolute z-[1000] pt-2 transition-all ease-out": true,
+          "left-0": align === "left",
+          "right-0": align === "right",
+          "left-1/2 -translate-x-1/2": align === "center",
+          "pointer-events-none scale-95 opacity-0": !store.opened,
+          "duration-300 group-hover:pointer-events-auto group-hover:scale-100 group-hover:opacity-100 group-hover:duration-75": hover,
+          "focus-within:pointer-events-auto focus-within:scale-100 focus-within:opacity-100 focus-within:duration-75": true
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsxs("div", {
+          id: `lui-${id}-opts`,
+          class: {
+            "lum-bg-lum-input-bg lum-scroll flex max-h-72 flex-col gap-1 overflow-auto rounded-lum border p-1 select-none motion-safe:transition-all": true
+          },
+          children: [
+            values?.map(({ name, value }, i) => {
+              return /* @__PURE__ */ jsxRuntime.jsx("button", {
+                type: "button",
+                class: {
+                  "lum-btn lum-bg-transparent rounded-lum-1": true
+                },
+                onClick$: () => {
+                  store.opened = false;
+                  const select = document.getElementById(id);
+                  if (select) {
+                    select.value = value.toString();
+                    select.dispatchEvent(new Event("change"));
+                  }
+                  store.value = value.toString();
+                },
+                children: name
+              }, i);
+            }),
+            /* @__PURE__ */ jsxRuntime.jsx(qwik.Slot, {
+              name: "extra-buttons"
+            })
+          ]
+        })
+      })
+    ]
+  });
+});
+const Sidebar = qwik.component$(({ floating, ...props }) => {
+  const menu = qwik.useSignal(false);
+  return /* @__PURE__ */ jsxRuntime.jsx("aside", {
+    ...props,
+    class: {
+      "lg:w-100 fixed lg:sticky lum-card top-0 left-0 z-[40] px-0 lg:px-6 pb-0": true,
+      "w-full rounded-none pt-14 lg:pt-20 lg:h-dvh lg:border-y-0 border-l-0": !floating,
+      "mt-16 lg:mt-22 lg:ml-4 pt-4 mx-2 w-[calc(100%-16px)]": floating,
+      ...props.class
+    },
+    children: /* @__PURE__ */ jsxRuntime.jsxs("nav", {
+      id: "docs-sidebar",
+      class: "min-h-full relative",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", {
+          class: "flex items-center gap-3 pb-3 px-2 border-b border-lum-border/10",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", {
+              class: "flex-1",
+              children: /* @__PURE__ */ jsxRuntime.jsx(qwik.Slot, {
+                name: "title"
+              })
+            }),
+            /* @__PURE__ */ jsxRuntime.jsx("button", {
+              class: "lum-btn lum-bg-transparent p-2 lg:hidden",
+              onClick$: () => {
+                menu.value = !menu.value;
+                const abortController = new AbortController();
+                document.addEventListener("click", (e) => {
+                  if (!e.composedPath().includes(document.querySelector("aside")) || e.target instanceof HTMLAnchorElement) {
+                    menu.value = false;
+                    abortController.abort();
+                  }
+                }, {
+                  signal: abortController.signal
+                });
+              },
+              "aria-label": "Toggle Menu",
+              children: /* @__PURE__ */ jsxRuntime.jsx(Menu, {
+                size: 24
+              })
+            })
+          ]
+        }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", {
+          class: {
+            "flex-col gap-3 my-4 mx-4 lg:mx-0": true,
+            "hidden lg:flex": !menu.value,
+            "flex": menu.value
+          },
+          children: /* @__PURE__ */ jsxRuntime.jsx(qwik.Slot, {})
+        })
+      ]
+    })
+  });
+});
 const Toggle = qwik.component$(({ checkbox, round, label, ...props }) => {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", {
     class: {
@@ -1517,5 +1573,6 @@ exports.NumberInput = NumberInput;
 exports.NumberInputRaw = NumberInputRaw;
 exports.SelectMenu = SelectMenu;
 exports.SelectMenuRaw = SelectMenuRaw;
+exports.Sidebar = Sidebar;
 exports.Toggle = Toggle;
 exports.blobColorClasses = blobColorClasses;

package/lib/index.qwik.mjs

@@ -655,127 +655,6 @@ const Dropdown = component$(({ class: Class, hover, opened, ...props }) => {
     ]
   });
 });
-const SelectMenu = component$((props) => {
-  return /* @__PURE__ */ jsxs("div", {
-    class: "flex flex-col",
-    children: [
-      /* @__PURE__ */ jsx("label", {
-        for: props.id,
-        class: "pb-1 text-lum-text select-none",
-        children: /* @__PURE__ */ jsx(Slot, {})
-      }),
-      /* @__PURE__ */ jsxs(SelectMenuRaw, {
-        ...props,
-        children: [
-          /* @__PURE__ */ jsx("div", {
-            "q:slot": "dropdown",
-            children: (props.customDropdown || !props.values?.length) && /* @__PURE__ */ jsx(Slot, {
-              name: "dropdown"
-            })
-          }),
-          /* @__PURE__ */ jsx("div", {
-            "q:slot": "extra-buttons",
-            children: /* @__PURE__ */ jsx(Slot, {
-              name: "extra-buttons"
-            })
-          })
-        ]
-      })
-    ]
-  });
-});
-const SelectMenuRaw = component$(({ id, values, class: Class, customDropdown, hover, align, ...props }) => {
-  const store = useStore({
-    opened: false,
-    value: props.value
-  });
-  return /* @__PURE__ */ jsxs("div", {
-    class: {
-      "relative touch-manipulation": true,
-      group: hover
-    },
-    children: [
-      values && /* @__PURE__ */ jsx("select", {
-        ...props,
-        id,
-        class: {
-          hidden: true
-        },
-        children: values.map((value, i) => {
-          return /* @__PURE__ */ jsx("option", {
-            value: value.value,
-            children: `${value.value}`
-          }, i);
-        })
-      }),
-      /* @__PURE__ */ jsxs(Dropdown, {
-        opened: store.opened,
-        class: {
-          "w-full": true,
-          ...Class
-        },
-        onClick$: () => {
-          if (!hover) store.opened = !store.opened;
-        },
-        children: [
-          customDropdown && /* @__PURE__ */ jsx(Slot, {
-            name: "dropdown"
-          }),
-          !customDropdown && /* @__PURE__ */ jsxs("span", {
-            id: `lui-${id}-name`,
-            children: [
-              values && (values.find((value) => value.value.toString() === store.value)?.name ?? values[0].name),
-              !values && /* @__PURE__ */ jsx(Slot, {
-                name: "dropdown"
-              })
-            ]
-          })
-        ]
-      }),
-      /* @__PURE__ */ jsx("div", {
-        id: `lui-${id}-opts-container`,
-        class: {
-          "absolute z-[1000] pt-2 transition-all ease-out": true,
-          "left-0": align === "left",
-          "right-0": align === "right",
-          "left-1/2 -translate-x-1/2": align === "center",
-          "pointer-events-none scale-95 opacity-0": !store.opened,
-          "duration-300 group-hover:pointer-events-auto group-hover:scale-100 group-hover:opacity-100 group-hover:duration-75": hover,
-          "focus-within:pointer-events-auto focus-within:scale-100 focus-within:opacity-100 focus-within:duration-75": true
-        },
-        children: /* @__PURE__ */ jsxs("div", {
-          id: `lui-${id}-opts`,
-          class: {
-            "lum-bg-lum-input-bg lum-scroll flex max-h-72 flex-col gap-1 overflow-auto rounded-lum border p-1 select-none motion-safe:transition-all": true
-          },
-          children: [
-            values?.map(({ name, value }, i) => {
-              return /* @__PURE__ */ jsx("button", {
-                type: "button",
-                class: {
-                  "lum-btn lum-bg-transparent rounded-lum-1": true
-                },
-                onClick$: () => {
-                  store.opened = false;
-                  const select = document.getElementById(id);
-                  if (select) {
-                    select.value = value.toString();
-                    select.dispatchEvent(new Event("change"));
-                  }
-                  store.value = value.toString();
-                },
-                children: name
-              }, i);
-            }),
-            /* @__PURE__ */ jsx(Slot, {
-              name: "extra-buttons"
-            })
-          ]
-        })
-      })
-    ]
-  });
-});
 const Menu = component$(({ size, ...props }) => {
   return /* @__PURE__ */ jsxs("svg", {
     xmlns: "http://www.w3.org/2000/svg",
@@ -1001,6 +880,183 @@ const NumberInputRaw = component$(({ input, onDecrement$, onIncrement$, value =
     ]
   });
 });
+const SelectMenu = component$((props) => {
+  return /* @__PURE__ */ jsxs("div", {
+    class: "flex flex-col",
+    children: [
+      /* @__PURE__ */ jsx("label", {
+        for: props.id,
+        class: "pb-1 text-lum-text select-none",
+        children: /* @__PURE__ */ jsx(Slot, {})
+      }),
+      /* @__PURE__ */ jsxs(SelectMenuRaw, {
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx("div", {
+            "q:slot": "dropdown",
+            children: (props.customDropdown || !props.values?.length) && /* @__PURE__ */ jsx(Slot, {
+              name: "dropdown"
+            })
+          }),
+          /* @__PURE__ */ jsx("div", {
+            "q:slot": "extra-buttons",
+            children: /* @__PURE__ */ jsx(Slot, {
+              name: "extra-buttons"
+            })
+          })
+        ]
+      })
+    ]
+  });
+});
+const SelectMenuRaw = component$(({ id, values, class: Class, customDropdown, hover, align, ...props }) => {
+  const store = useStore({
+    opened: false,
+    value: props.value
+  });
+  return /* @__PURE__ */ jsxs("div", {
+    class: {
+      "relative touch-manipulation": true,
+      group: hover
+    },
+    children: [
+      values && /* @__PURE__ */ jsx("select", {
+        ...props,
+        id,
+        class: {
+          hidden: true
+        },
+        children: values.map((value, i) => {
+          return /* @__PURE__ */ jsx("option", {
+            value: value.value,
+            children: `${value.value}`
+          }, i);
+        })
+      }),
+      /* @__PURE__ */ jsxs(Dropdown, {
+        opened: store.opened,
+        class: {
+          "w-full": true,
+          ...Class
+        },
+        onClick$: () => {
+          if (!hover) store.opened = !store.opened;
+        },
+        children: [
+          customDropdown && /* @__PURE__ */ jsx(Slot, {
+            name: "dropdown"
+          }),
+          !customDropdown && /* @__PURE__ */ jsxs("span", {
+            id: `lui-${id}-name`,
+            children: [
+              values && (values.find((value) => value.value.toString() === store.value)?.name ?? values[0].name),
+              !values && /* @__PURE__ */ jsx(Slot, {
+                name: "dropdown"
+              })
+            ]
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsx("div", {
+        id: `lui-${id}-opts-container`,
+        class: {
+          "absolute z-[1000] pt-2 transition-all ease-out": true,
+          "left-0": align === "left",
+          "right-0": align === "right",
+          "left-1/2 -translate-x-1/2": align === "center",
+          "pointer-events-none scale-95 opacity-0": !store.opened,
+          "duration-300 group-hover:pointer-events-auto group-hover:scale-100 group-hover:opacity-100 group-hover:duration-75": hover,
+          "focus-within:pointer-events-auto focus-within:scale-100 focus-within:opacity-100 focus-within:duration-75": true
+        },
+        children: /* @__PURE__ */ jsxs("div", {
+          id: `lui-${id}-opts`,
+          class: {
+            "lum-bg-lum-input-bg lum-scroll flex max-h-72 flex-col gap-1 overflow-auto rounded-lum border p-1 select-none motion-safe:transition-all": true
+          },
+          children: [
+            values?.map(({ name, value }, i) => {
+              return /* @__PURE__ */ jsx("button", {
+                type: "button",
+                class: {
+                  "lum-btn lum-bg-transparent rounded-lum-1": true
+                },
+                onClick$: () => {
+                  store.opened = false;
+                  const select = document.getElementById(id);
+                  if (select) {
+                    select.value = value.toString();
+                    select.dispatchEvent(new Event("change"));
+                  }
+                  store.value = value.toString();
+                },
+                children: name
+              }, i);
+            }),
+            /* @__PURE__ */ jsx(Slot, {
+              name: "extra-buttons"
+            })
+          ]
+        })
+      })
+    ]
+  });
+});
+const Sidebar = component$(({ floating, ...props }) => {
+  const menu = useSignal(false);
+  return /* @__PURE__ */ jsx("aside", {
+    ...props,
+    class: {
+      "lg:w-100 fixed lg:sticky lum-card top-0 left-0 z-[40] px-0 lg:px-6 pb-0": true,
+      "w-full rounded-none pt-14 lg:pt-20 lg:h-dvh lg:border-y-0 border-l-0": !floating,
+      "mt-16 lg:mt-22 lg:ml-4 pt-4 mx-2 w-[calc(100%-16px)]": floating,
+      ...props.class
+    },
+    children: /* @__PURE__ */ jsxs("nav", {
+      id: "docs-sidebar",
+      class: "min-h-full relative",
+      children: [
+        /* @__PURE__ */ jsxs("div", {
+          class: "flex items-center gap-3 pb-3 px-2 border-b border-lum-border/10",
+          children: [
+            /* @__PURE__ */ jsx("div", {
+              class: "flex-1",
+              children: /* @__PURE__ */ jsx(Slot, {
+                name: "title"
+              })
+            }),
+            /* @__PURE__ */ jsx("button", {
+              class: "lum-btn lum-bg-transparent p-2 lg:hidden",
+              onClick$: () => {
+                menu.value = !menu.value;
+                const abortController = new AbortController();
+                document.addEventListener("click", (e) => {
+                  if (!e.composedPath().includes(document.querySelector("aside")) || e.target instanceof HTMLAnchorElement) {
+                    menu.value = false;
+                    abortController.abort();
+                  }
+                }, {
+                  signal: abortController.signal
+                });
+              },
+              "aria-label": "Toggle Menu",
+              children: /* @__PURE__ */ jsx(Menu, {
+                size: 24
+              })
+            })
+          ]
+        }),
+        /* @__PURE__ */ jsx("div", {
+          class: {
+            "flex-col gap-3 my-4 mx-4 lg:mx-0": true,
+            "hidden lg:flex": !menu.value,
+            "flex": menu.value
+          },
+          children: /* @__PURE__ */ jsx(Slot, {})
+        })
+      ]
+    })
+  });
+});
 const Toggle = component$(({ checkbox, round, label, ...props }) => {
   return /* @__PURE__ */ jsxs("div", {
     class: {
@@ -1516,6 +1572,7 @@ export {
   NumberInputRaw,
   SelectMenu,
   SelectMenuRaw,
+  Sidebar,
   Toggle,
   blobColorClasses
 };

package/lib-types/components/docs/Sidebar.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("@builder.io/qwik").Component<unknown>;
+export default _default;

package/lib-types/components/elements/Sidebar.d.ts

@@ -0,0 +1,9 @@
+import { PropsOf } from '@builder.io/qwik';
+interface SidebarProps extends Omit<PropsOf<'aside'>, 'class'> {
+    class?: {
+        [key: string]: boolean;
+    };
+    floating?: boolean;
+}
+export declare const Sidebar: import("@builder.io/qwik").Component<SidebarProps>;
+export {};

package/lib-types/components/elements.d.ts

@@ -2,7 +2,8 @@ export * from './elements/Anchor';
 export * from './elements/Blobs';
 export * from './elements/ColorPicker';
 export * from './elements/Dropdown';
-export * from './elements/SelectMenu';
 export * from './elements/Nav';
 export * from './elements/NumberInput';
+export * from './elements/SelectMenu';
+export * from './elements/Sidebar';
 export * from './elements/Toggle';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luminescent/ui-qwik",
-  "version": "4.2.2",
+  "version": "4.3.0-0",
   "description": "Luminescent UI library",
   "main": "./lib/index.qwik.mjs",
   "qwik": "./lib/index.qwik.mjs",
@@ -52,7 +52,7 @@
     "vite-tsconfig-paths": "^5.1.4"
   },
   "peerDependencies": {
-    "@luminescent/ui": "4.2.2"
+    "@luminescent/ui": "4.3.0-0"
   },
   "scripts": {
     "build": "qwik build",