@luminescent/ui 0.8.0 → 0.8.1

package/lib/index.qwik.cjs

@@ -434,6 +434,16 @@ const ColorInput = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inline
       }, "ColorInput_component_div_TextInputRaw_onFocus_9bHrhSeTgfI", [
         store
       ]),
+      onInput$: /* @__PURE__ */ qwik.inlinedQrl((e, el) => {
+        const [props12, props2] = qwik.useLexicalScope();
+        const div = document.getElementById(`${props12.id}-picker`);
+        const event = new Event("change");
+        div.dispatchEvent(event);
+        props2.onInput$?.(el.value);
+      }, "ColorInput_component_div_TextInputRaw_onInput_nsV3cUv0Sxg", [
+        props1,
+        props
+      ]),
       style: (props.preview ?? "left") == "full" ? {
         backgroundColor: `${props.value ?? "#000000"}`,
         color: getBrightness(hexNumberToRgb(hexStringToNumber(props.value ?? "#000000"))) > 0.5 ? "black" : "white"
@@ -455,6 +465,9 @@ const ColorInput = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inline
       }
     }, 0, "0s_1"),
     /* @__PURE__ */ qwik._jsxC(ColorPickerRaw, {
+      get id() {
+        return props1.id;
+      },
       get color() {
         return props.value ?? "#000000";
       },
@@ -530,13 +543,15 @@ const ColorInput = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inline
           ...p0.presetColors ?? []
         ], [
           props
-        ], '["#FAEDCB","#C9E4DE","#C6DEF1","#DBCDF0","#F2C6DE","#FCD05C","#5FE2C5","#4498DB","#9863E7","#E43A96",...p0.presetColors??[]]')
+        ], '["#FAEDCB","#C9E4DE","#C6DEF1","#DBCDF0","#F2C6DE","#FCD05C","#5FE2C5","#4498DB","#9863E7","#E43A96",...p0.presetColors??[]]'),
+        id: qwik._wrapProp(props1, "id")
       }
     }, 3, "0s_2")
   ], 1, "0s_3");
 }, "ColorInput_component_jilGo0Bn3Ps"));
 const ColorPickerRaw = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl((props) => {
   const props1 = qwik._restProps(props, [
+    "id",
     "color",
     "colors",
     "onInput$"
@@ -650,60 +665,79 @@ const ColorPickerRaw = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.in
   }, "ColorPickerRaw_component_sbMouseDown_hRgkP7lymfY", [
     sbChange
   ]);
+  qwik.useOn("change", /* @__PURE__ */ qwik.inlinedQrl(() => {
+    const [props2, setColor2] = qwik.useLexicalScope();
+    if (!props2.id)
+      return;
+    const inputElement = document.getElementById(props2.id);
+    if (!inputElement)
+      return;
+    setColor2(inputElement.value);
+  }, "ColorPickerRaw_component_useOn_hsh00WCnzOE", [
+    props,
+    setColor
+  ]));
   return /* @__PURE__ */ qwik._jsxQ("div", {
     class: {
-      "transition-all p-4 gap-4 bg-gray-800/50 backdrop-blur-xl flex rounded-lg border border-gray-700 touch-none": true,
+      "transition-all p-4 bg-gray-800/50 backdrop-blur-xl flex flex-col gap-6 rounded-lg border border-gray-700 touch-none": true,
       ...props1.class
     }
   }, {
+    id: qwik._fnSignal((p0) => p0.id ? `${p0.id}-picker` : void 0, [
+      props
+    ], "p0.id?`${p0.id}-picker`:undefined"),
     "preventdefault:mousedown": true,
     "preventdefault:touchstart": true
   }, [
     /* @__PURE__ */ qwik._jsxQ("div", null, {
-      class: "w-[125px] h-[150px] border border-gray-700 rounded-md relative",
-      onMouseDown$: sbMouseDown,
-      onTouchStart$: sbMouseDown,
-      "preventdefault:mousedown": true,
-      "preventdefault:touchstart": true,
-      style: qwik._fnSignal((p0) => ({
-        background: `linear-gradient(to right, #FFFFFF, ${p0.hue.color})`
-      }), [
-        store
-      ], "{background:`linear-gradient(to right, #FFFFFF, ${p0.hue.color})`}")
+      class: "flex gap-4"
     }, [
       /* @__PURE__ */ qwik._jsxQ("div", null, {
-        class: "w-[125px] h-[150px] border border-gray-700 rounded-md bg-gradient-to-b from-transparent to-black"
-      }, null, 3, null),
+        class: "w-[125px] h-[150px] border border-gray-700 rounded-md relative",
+        onMouseDown$: sbMouseDown,
+        onTouchStart$: sbMouseDown,
+        "preventdefault:mousedown": true,
+        "preventdefault:touchstart": true,
+        style: qwik._fnSignal((p0) => ({
+          background: `linear-gradient(to right, #FFFFFF, ${p0.hue.color})`
+        }), [
+          store
+        ], "{background:`linear-gradient(to right, #FFFFFF, ${p0.hue.color})`}")
+      }, [
+        /* @__PURE__ */ qwik._jsxQ("div", null, {
+          class: "w-[125px] h-[150px] border border-gray-700 rounded-md bg-gradient-to-b from-transparent to-black"
+        }, null, 3, null),
+        /* @__PURE__ */ qwik._jsxQ("div", null, {
+          class: "absolute -top-2 -left-2 w-4 h-4 border border-white rounded-full bg-white",
+          style: qwik._fnSignal((p0) => ({
+            background: p0.color,
+            transform: `translate(${p0.sPosition}px, ${p0.bPosition}px)`
+          }), [
+            store
+          ], "{background:p0.color,transform:`translate(${p0.sPosition}px, ${p0.bPosition}px)`}")
+        }, null, 3, null)
+      ], 3, null),
       /* @__PURE__ */ qwik._jsxQ("div", null, {
-        class: "absolute -top-2 -left-2 w-4 h-4 border border-white rounded-full bg-white",
+        class: "h-[150px] relative w-2 border border-gray-700 rounded-md",
+        onMouseDown$: hueMouseDown,
+        onTouchStart$: hueMouseDown,
+        "preventdefault:mousedown": true,
+        "preventdefault:touchstart": true,
+        style: {
+          background: "linear-gradient(to bottom, #ff0000, #ff00ff, #0000ff, #00ffff, #00ff00, #ffff00, #ff0000)"
+        }
+      }, /* @__PURE__ */ qwik._jsxQ("div", null, {
+        class: "absolute -bottom-2 -left-[5px] w-4 h-4 border border-white rounded-full bg-[#ff0000]",
         style: qwik._fnSignal((p0) => ({
-          background: p0.color,
-          transform: `translate(${p0.sPosition}px, ${p0.bPosition}px)`
+          transform: `translateY(${-p0.hue.position}px)`,
+          background: p0.hue.color
         }), [
           store
-        ], "{background:p0.color,transform:`translate(${p0.sPosition}px, ${p0.bPosition}px)`}")
-      }, null, 3, null)
+        ], "{transform:`translateY(${-p0.hue.position}px)`,background:p0.hue.color}")
+      }, null, 3, null), 3, null)
     ], 3, null),
     /* @__PURE__ */ qwik._jsxQ("div", null, {
-      class: "h-[150px] relative w-2 border border-gray-700 rounded-md",
-      onMouseDown$: hueMouseDown,
-      onTouchStart$: hueMouseDown,
-      "preventdefault:mousedown": true,
-      "preventdefault:touchstart": true,
-      style: {
-        background: "linear-gradient(to bottom, #ff0000, #ff00ff, #0000ff, #00ffff, #00ff00, #ffff00, #ff0000)"
-      }
-    }, /* @__PURE__ */ qwik._jsxQ("div", null, {
-      class: "absolute -bottom-2 -left-[5px] w-4 h-4 border border-white rounded-full bg-[#ff0000]",
-      style: qwik._fnSignal((p0) => ({
-        transform: `translateY(${-p0.hue.position}px)`,
-        background: p0.hue.color
-      }), [
-        store
-      ], "{transform:`translateY(${-p0.hue.position}px)`,background:p0.hue.color}")
-    }, null, 3, null), 3, null),
-    /* @__PURE__ */ qwik._jsxQ("div", null, {
-      class: "h-[150px] flex flex-col flex-wrap gap-1 justify-evenly"
+      class: "w-[150px] flex flex-wrap gap-1 justify-evenly"
     }, props.colors.map((color, i) => {
       return /* @__PURE__ */ qwik._jsxQ("button", {
         onMouseDown$: /* @__PURE__ */ qwik.inlinedQrl(() => {

package/lib/index.qwik.mjs

@@ -1,4 +1,4 @@
-import { componentQrl, inlinedQrl, _jsxQ, _fnSignal, _restProps, _jsxS, _jsxC, Slot, _wrapSignal, useStore, useLexicalScope, _IMMUTABLE, _jsxBranch, useStylesQrl } from "@builder.io/qwik";
+import { componentQrl, inlinedQrl, _jsxQ, _fnSignal, _restProps, _jsxS, _jsxC, Slot, _wrapSignal, useStore, useLexicalScope, _IMMUTABLE, _wrapProp, useOn, _jsxBranch, useStylesQrl } from "@builder.io/qwik";
 import { Fragment } from "@builder.io/qwik/jsx-runtime";
 const Anchor = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => /* @__PURE__ */ _jsxQ("span", null, {
   class: "block h-32 -mt-32",
@@ -432,6 +432,16 @@ const ColorInput = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((prop
       }, "ColorInput_component_div_TextInputRaw_onFocus_9bHrhSeTgfI", [
         store
       ]),
+      onInput$: /* @__PURE__ */ inlinedQrl((e, el) => {
+        const [props12, props2] = useLexicalScope();
+        const div = document.getElementById(`${props12.id}-picker`);
+        const event = new Event("change");
+        div.dispatchEvent(event);
+        props2.onInput$?.(el.value);
+      }, "ColorInput_component_div_TextInputRaw_onInput_nsV3cUv0Sxg", [
+        props1,
+        props
+      ]),
       style: (props.preview ?? "left") == "full" ? {
         backgroundColor: `${props.value ?? "#000000"}`,
         color: getBrightness(hexNumberToRgb(hexStringToNumber(props.value ?? "#000000"))) > 0.5 ? "black" : "white"
@@ -453,6 +463,9 @@ const ColorInput = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((prop
       }
     }, 0, "0s_1"),
     /* @__PURE__ */ _jsxC(ColorPickerRaw, {
+      get id() {
+        return props1.id;
+      },
       get color() {
         return props.value ?? "#000000";
       },
@@ -528,13 +541,15 @@ const ColorInput = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((prop
           ...p0.presetColors ?? []
         ], [
           props
-        ], '["#FAEDCB","#C9E4DE","#C6DEF1","#DBCDF0","#F2C6DE","#FCD05C","#5FE2C5","#4498DB","#9863E7","#E43A96",...p0.presetColors??[]]')
+        ], '["#FAEDCB","#C9E4DE","#C6DEF1","#DBCDF0","#F2C6DE","#FCD05C","#5FE2C5","#4498DB","#9863E7","#E43A96",...p0.presetColors??[]]'),
+        id: _wrapProp(props1, "id")
       }
     }, 3, "0s_2")
   ], 1, "0s_3");
 }, "ColorInput_component_jilGo0Bn3Ps"));
 const ColorPickerRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
   const props1 = _restProps(props, [
+    "id",
     "color",
     "colors",
     "onInput$"
@@ -648,60 +663,79 @@ const ColorPickerRaw = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((
   }, "ColorPickerRaw_component_sbMouseDown_hRgkP7lymfY", [
     sbChange
   ]);
+  useOn("change", /* @__PURE__ */ inlinedQrl(() => {
+    const [props2, setColor2] = useLexicalScope();
+    if (!props2.id)
+      return;
+    const inputElement = document.getElementById(props2.id);
+    if (!inputElement)
+      return;
+    setColor2(inputElement.value);
+  }, "ColorPickerRaw_component_useOn_hsh00WCnzOE", [
+    props,
+    setColor
+  ]));
   return /* @__PURE__ */ _jsxQ("div", {
     class: {
-      "transition-all p-4 gap-4 bg-gray-800/50 backdrop-blur-xl flex rounded-lg border border-gray-700 touch-none": true,
+      "transition-all p-4 bg-gray-800/50 backdrop-blur-xl flex flex-col gap-6 rounded-lg border border-gray-700 touch-none": true,
       ...props1.class
     }
   }, {
+    id: _fnSignal((p0) => p0.id ? `${p0.id}-picker` : void 0, [
+      props
+    ], "p0.id?`${p0.id}-picker`:undefined"),
     "preventdefault:mousedown": true,
     "preventdefault:touchstart": true
   }, [
     /* @__PURE__ */ _jsxQ("div", null, {
-      class: "w-[125px] h-[150px] border border-gray-700 rounded-md relative",
-      onMouseDown$: sbMouseDown,
-      onTouchStart$: sbMouseDown,
-      "preventdefault:mousedown": true,
-      "preventdefault:touchstart": true,
-      style: _fnSignal((p0) => ({
-        background: `linear-gradient(to right, #FFFFFF, ${p0.hue.color})`
-      }), [
-        store
-      ], "{background:`linear-gradient(to right, #FFFFFF, ${p0.hue.color})`}")
+      class: "flex gap-4"
     }, [
       /* @__PURE__ */ _jsxQ("div", null, {
-        class: "w-[125px] h-[150px] border border-gray-700 rounded-md bg-gradient-to-b from-transparent to-black"
-      }, null, 3, null),
+        class: "w-[125px] h-[150px] border border-gray-700 rounded-md relative",
+        onMouseDown$: sbMouseDown,
+        onTouchStart$: sbMouseDown,
+        "preventdefault:mousedown": true,
+        "preventdefault:touchstart": true,
+        style: _fnSignal((p0) => ({
+          background: `linear-gradient(to right, #FFFFFF, ${p0.hue.color})`
+        }), [
+          store
+        ], "{background:`linear-gradient(to right, #FFFFFF, ${p0.hue.color})`}")
+      }, [
+        /* @__PURE__ */ _jsxQ("div", null, {
+          class: "w-[125px] h-[150px] border border-gray-700 rounded-md bg-gradient-to-b from-transparent to-black"
+        }, null, 3, null),
+        /* @__PURE__ */ _jsxQ("div", null, {
+          class: "absolute -top-2 -left-2 w-4 h-4 border border-white rounded-full bg-white",
+          style: _fnSignal((p0) => ({
+            background: p0.color,
+            transform: `translate(${p0.sPosition}px, ${p0.bPosition}px)`
+          }), [
+            store
+          ], "{background:p0.color,transform:`translate(${p0.sPosition}px, ${p0.bPosition}px)`}")
+        }, null, 3, null)
+      ], 3, null),
       /* @__PURE__ */ _jsxQ("div", null, {
-        class: "absolute -top-2 -left-2 w-4 h-4 border border-white rounded-full bg-white",
+        class: "h-[150px] relative w-2 border border-gray-700 rounded-md",
+        onMouseDown$: hueMouseDown,
+        onTouchStart$: hueMouseDown,
+        "preventdefault:mousedown": true,
+        "preventdefault:touchstart": true,
+        style: {
+          background: "linear-gradient(to bottom, #ff0000, #ff00ff, #0000ff, #00ffff, #00ff00, #ffff00, #ff0000)"
+        }
+      }, /* @__PURE__ */ _jsxQ("div", null, {
+        class: "absolute -bottom-2 -left-[5px] w-4 h-4 border border-white rounded-full bg-[#ff0000]",
         style: _fnSignal((p0) => ({
-          background: p0.color,
-          transform: `translate(${p0.sPosition}px, ${p0.bPosition}px)`
+          transform: `translateY(${-p0.hue.position}px)`,
+          background: p0.hue.color
         }), [
           store
-        ], "{background:p0.color,transform:`translate(${p0.sPosition}px, ${p0.bPosition}px)`}")
-      }, null, 3, null)
+        ], "{transform:`translateY(${-p0.hue.position}px)`,background:p0.hue.color}")
+      }, null, 3, null), 3, null)
     ], 3, null),
     /* @__PURE__ */ _jsxQ("div", null, {
-      class: "h-[150px] relative w-2 border border-gray-700 rounded-md",
-      onMouseDown$: hueMouseDown,
-      onTouchStart$: hueMouseDown,
-      "preventdefault:mousedown": true,
-      "preventdefault:touchstart": true,
-      style: {
-        background: "linear-gradient(to bottom, #ff0000, #ff00ff, #0000ff, #00ffff, #00ff00, #ffff00, #ff0000)"
-      }
-    }, /* @__PURE__ */ _jsxQ("div", null, {
-      class: "absolute -bottom-2 -left-[5px] w-4 h-4 border border-white rounded-full bg-[#ff0000]",
-      style: _fnSignal((p0) => ({
-        transform: `translateY(${-p0.hue.position}px)`,
-        background: p0.hue.color
-      }), [
-        store
-      ], "{transform:`translateY(${-p0.hue.position}px)`,background:p0.hue.color}")
-    }, null, 3, null), 3, null),
-    /* @__PURE__ */ _jsxQ("div", null, {
-      class: "h-[150px] flex flex-col flex-wrap gap-1 justify-evenly"
+      class: "w-[150px] flex flex-wrap gap-1 justify-evenly"
     }, props.colors.map((color, i) => {
       return /* @__PURE__ */ _jsxQ("button", {
         onMouseDown$: /* @__PURE__ */ inlinedQrl(() => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luminescent/ui",
-  "version": "0.8.0",
+  "version": "0.8.1",
   "description": "Luminescent UI library",
   "main": "./lib/index.qwik.mjs",
   "qwik": "./lib/index.qwik.mjs",

package/lib-types/components/logos/LoadingIcon.d.ts

@@ -1,8 +0,0 @@
-import type { IconProps } from './IconProps';
-interface loadingIconProps extends IconProps {
-    class?: {
-        [key: string]: boolean;
-    };
-}
-export declare const LoadingIcon: import("@builder.io/qwik").Component<loadingIconProps>;
-export {};

package/lib-types/utils/simple-color-picker/index.d.ts

@@ -1,145 +0,0 @@
-import { Color } from './color';
-type ColorPickerOptions = {
-    window?: Window;
-    el?: HTMLElement | string;
-    background?: string | number;
-    widthUnits?: string;
-    heightUnits?: string;
-    width?: number;
-    height?: number;
-    color?: string | number;
-    colors?: string[] | number[];
-};
-export declare class ColorPicker {
-    private _window;
-    private _document;
-    private _widthUnits;
-    private _heightUnits;
-    private _huePosition;
-    private _hueHeight;
-    private _maxHue;
-    _inputIsNumber: boolean;
-    private _saturationWidth;
-    private _isChoosing;
-    private _callbacks;
-    width: number;
-    height: number;
-    hue: number;
-    position: {
-        x: number;
-        y: number;
-    };
-    color: Color;
-    backgroundColor: Color;
-    hueColor: Color;
-    $el: HTMLElement;
-    $saturation: HTMLElement;
-    $hue: HTMLElement;
-    $sbSelector: HTMLElement;
-    $hSelector: HTMLElement;
-    $colors?: HTMLElement;
-    constructor(options?: ColorPickerOptions);
-    /**
-     * Add the ColorPicker instance to a DOM element.
-     * @param  {HTMLElement} el
-     * @return {ColorPicker} Returns itself for chaining purpose
-     */
-    appendTo(el: HTMLElement | string): this;
-    /**
-     * Removes picker from its parent and kill all listeners.
-     * Call this method for proper destroy.
-     */
-    remove(): void;
-    /**
-     * Manually set the current color of the picker. This is the method
-     * used on instantiation to convert `color` option to actual color for
-     * the picker. Param can be a hexadecimal number or an hex String.
-     * @param {String|Number} color hex color desired
-     * @return {ColorPicker} Returns itself for chaining purpose
-     */
-    setColor(color: string | number): this;
-    /**
-     * Set size of the color picker for a given width and height. Note that
-     * a padding of 5px will be added if you chose to use the background option
-     * of the constructor.
-     * @param {Number} width
-     * @param {Number} height
-     * @return {ColorPicker} Returns itself for chaining purpose
-     */
-    setSize(width: number, height: number): this;
-    /**
-     * Set the background color of the picker. It also adds a 5px padding
-     * for design purpose.
-     * @param {String|Number} color hex color desired for background
-     * @return {ColorPicker} Returns itself for chaining purpose
-     */
-    setBackgroundColor(color: string | number): this;
-    /**
-     * Removes background of the picker if previously set. It's no use
-     * calling this method if you didn't set the background option on start
-     * or if you didn't call setBackgroundColor previously.
-     */
-    setNoBackground(): this;
-    /**
-     * Registers callback to the update event of the picker.
-     * picker inherits from [component/emitter](https://github.com/component/emitter)
-     * so you could do the same thing by calling `colorPicker.on('update');`
-     * @param  {Function} callback
-     * @return {ColorPicker} Returns itself for chaining purpose
-     */
-    onChange(callback: Function): this;
-    /**
-     * Is true when mouse is down and user is currently choosing a color.
-     */
-    get isChoosing(): boolean;
-    /**
-     * Main color getter, will return a formatted color string depending on input
-     * or a number depending on the last setColor call.
-     * @return {Number|String}
-     */
-    getColor(): string | number;
-    /**
-     * Returns color as css hex string (ex: '#FF0000').
-     * @return {String}
-     */
-    getHexString(): string;
-    /**
-     * Returns color as number (ex: 0xFF0000).
-     * @return {Number}
-     */
-    getHexNumber(): number;
-    /**
-     * Returns color as {r: 1, g: 0, b: 0} object.
-     * @return {Object}
-     */
-    getRGB(): import("./color").RGBAColor;
-    /**
-     * Returns color as {h: 100, s: 1, v: 1} object.
-     * @return {Object}
-     */
-    getHSV(): import("./color").HSVAColor;
-    /**
-     * Returns true if color is perceived as dark
-     * @return {Boolean}
-     */
-    isDark(): boolean;
-    /**
-     * Returns true if color is perceived as light
-     * @return {Boolean}
-     */
-    isLight(): boolean;
-    private _moveSelectorTo;
-    private _updateColorFromPosition;
-    private _moveHueTo;
-    private _updateHueFromPosition;
-    private _updateHue;
-    private _updateColor;
-    private _triggerChange;
-    private _onSaturationMouseDown;
-    private _onSaturationMouseMove;
-    private _onSaturationMouseUp;
-    private _onHueMouseDown;
-    private _onHueMouseMove;
-    private _onHueMouseUp;
-}
-export {};

package/lib-types/utils/simple-color-picker/utils.d.ts

@@ -1,6 +0,0 @@
-export declare const clamp: (value: number, min: number, max: number) => number;
-export declare function getMousePosition(e: MouseEvent | TouchEvent): {
-    x: number;
-    y: number;
-};
-export declare const pad2: (c: string) => string;