@luminescent/ui 0.7.7 → 0.8.1

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

@@ -1,9 +1,19 @@
-import type { QRL } from '@builder.io/qwik';
+import type { PropsOf, QRL } from '@builder.io/qwik';
 import type { TextInputRawProps } from './TextInput';
 export interface ColorInputProps extends Omit<TextInputRawProps, 'onInput$' | 'children'> {
-    onInput$?: QRL<(color: string, element: HTMLInputElement) => void>;
+    onInput$?: QRL<(color: string) => void>;
     value?: string;
     presetColors?: string[];
     preview?: 'left' | 'right' | 'top' | 'bottom' | 'full';
+    id: string;
 }
 export declare const ColorInput: import("@builder.io/qwik").Component<ColorInputProps>;
+export interface ColorPickerProps extends Omit<PropsOf<'div'>, 'class' | 'onInput$'> {
+    class: {
+        [key: string]: boolean;
+    };
+    onInput$?: QRL<(color: string) => void>;
+    color: string;
+    colors: string[];
+}
+export declare const ColorPickerRaw: import("@builder.io/qwik").Component<ColorPickerProps>;

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

@@ -1,3 +1,9 @@
+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;
 export type RGBAColor = {
     r: number;
     g: number;
@@ -10,26 +16,6 @@ export type HSVAColor = {
     v: number;
     a?: number;
 };
-export declare class Color {
-    private _rgba;
-    private _hsva;
-    private _hexNumber;
-    private _brightness;
-    private _hexString;
-    private _isDark;
-    private _isLight;
-    constructor(color: number | string);
-    fromHex(color?: number | string): void;
-    fromHsv(color: HSVAColor): void;
-    private _updateBrightness;
-    get rgb(): RGBAColor;
-    get hsv(): HSVAColor;
-    get hex(): number;
-    get hexString(): string;
-    get brightness(): number;
-    get isDark(): boolean;
-    get isLight(): boolean;
-}
 export declare function getBrightness(color: RGBAColor): number;
 export declare function hexNumberToRgb(color: number): {
     r: number;
@@ -37,7 +23,6 @@ export declare function hexNumberToRgb(color: number): {
     b: number;
 };
 export declare function rgbToHex(color: RGBAColor): string;
-export declare const numberToHexString: (color: number) => string;
 export declare const hexStringToNumber: (color: string) => number;
 export declare function hsvToRgb(color: HSVAColor): {
     r: number;

package/package.json

@@ -1,62 +1,62 @@
-{
-  "name": "@luminescent/ui",
-  "version": "0.7.7",
-  "description": "Luminescent UI library",
-  "main": "./lib/index.qwik.mjs",
-  "qwik": "./lib/index.qwik.mjs",
-  "types": "./lib-types/index.d.ts",
-  "exports": {
-    ".": {
-      "import": "./lib/index.qwik.mjs",
-      "require": "./lib/index.qwik.cjs",
-      "types": "./lib-types/index.d.ts"
-    },
-    "./config": "./src/tailwind.config.js"
-  },
-  "files": [
-    "lib",
-    "lib-types",
-    "src/tailwind.config.js"
-  ],
-  "engines": {
-    "node": ">=15.0.0"
-  },
-  "license": "AGPL-3.0-or-later",
-  "private": false,
-  "type": "module",
-  "publishConfig": {
-    "access": "public"
-  },
-  "scripts": {
-    "build": "qwik build",
-    "build.lib": "vite build --mode lib",
-    "build.types": "tsc --emitDeclarationOnly",
-    "dev": "vite --mode ssr",
-    "dev.debug": "node --inspect-brk ./node_modules/vite/bin/vite.js --mode ssr --force",
-    "lint": "eslint \"src/**/*.ts*\"",
-    "release": "np",
-    "start": "vite --open --mode ssr",
-    "test": "echo \"No test specified\" && exit 0",
-    "qwik": "qwik"
-  },
-  "devDependencies": {
-    "@anuragroy/tailwindcss-animate": "^1.0.6",
-    "@builder.io/qwik": "1.4.5",
-    "@builder.io/qwik-city": "^1.4.5",
-    "@types/eslint": "^8.56.2",
-    "@types/node": "^20.11.19",
-    "@typescript-eslint/eslint-plugin": "^7.0.2",
-    "@typescript-eslint/parser": "^7.0.2",
-    "autoprefixer": "^10.4.17",
-    "chart.js": "^4.4.1",
-    "eslint": "^8.56.0",
-    "eslint-plugin-qwik": "latest",
-    "np": "^9.2.0",
-    "postcss": "^8.4.35",
-    "tailwindcss": "3.4.1",
-    "typescript": "5.3.3",
-    "undici": "*",
-    "vite": "^5.1.3",
-    "vite-tsconfig-paths": "^4.3.1"
-  }
-}
+{
+  "name": "@luminescent/ui",
+  "version": "0.8.1",
+  "description": "Luminescent UI library",
+  "main": "./lib/index.qwik.mjs",
+  "qwik": "./lib/index.qwik.mjs",
+  "types": "./lib-types/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./lib/index.qwik.mjs",
+      "require": "./lib/index.qwik.cjs",
+      "types": "./lib-types/index.d.ts"
+    },
+    "./config": "./src/tailwind.config.js"
+  },
+  "files": [
+    "lib",
+    "lib-types",
+    "src/tailwind.config.js"
+  ],
+  "engines": {
+    "node": ">=15.0.0"
+  },
+  "license": "AGPL-3.0-or-later",
+  "private": false,
+  "type": "module",
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "qwik build",
+    "build.lib": "vite build --mode lib",
+    "build.types": "tsc --emitDeclarationOnly",
+    "dev": "vite --mode ssr",
+    "dev.debug": "node --inspect-brk ./node_modules/vite/bin/vite.js --mode ssr --force",
+    "lint": "eslint \"src/**/*.ts*\"",
+    "release": "np",
+    "start": "vite --open --mode ssr",
+    "test": "echo \"No test specified\" && exit 0",
+    "qwik": "qwik"
+  },
+  "devDependencies": {
+    "@anuragroy/tailwindcss-animate": "^1.0.6",
+    "@builder.io/qwik": "1.4.5",
+    "@builder.io/qwik-city": "^1.4.5",
+    "@types/eslint": "^8.56.3",
+    "@types/node": "^20.11.20",
+    "@typescript-eslint/eslint-plugin": "^7.0.2",
+    "@typescript-eslint/parser": "^7.0.2",
+    "autoprefixer": "^10.4.17",
+    "chart.js": "^4.4.1",
+    "eslint": "^8.57.0",
+    "eslint-plugin-qwik": "latest",
+    "np": "^9.2.0",
+    "postcss": "^8.4.35",
+    "tailwindcss": "3.4.1",
+    "typescript": "5.3.3",
+    "undici": "*",
+    "vite": "^5.1.4",
+    "vite-tsconfig-paths": "^4.3.1"
+  }
+}

package/src/tailwind.config.js

@@ -1,72 +1,72 @@
-function getBlobKeyFrame() {
-  const translateXPercentages = [0, 19, 38, 57, 76];
-  const translateYPercentages = [0, 12, 25, 38, 50];
-  const scaleValues = [0.8, 1, 1.2, 1.4];
-
-  const translateX0Key = Math.floor(Math.random() * 70);
-  const translateX0 = Math.floor(Math.random() * 70);
-  translateXPercentages.splice(translateX0Key, 1);
-  const translateX1Key = Math.floor(Math.random() * translateXPercentages.length);
-  const translateX1 = translateXPercentages[translateX1Key];
-  translateXPercentages.splice(translateX1Key, 1);
-  const translateX2Key = Math.floor(Math.random() * translateXPercentages.length);
-  const translateX2 = translateXPercentages[translateX2Key];
-  translateXPercentages.splice(translateX2Key, 1);
-  const translateX3Key = Math.floor(Math.random() * translateXPercentages.length);
-  const translateX3 = translateXPercentages[translateX3Key];
-  translateXPercentages.splice(translateX3Key, 1);
-
-  const translateY0Key = Math.floor(Math.random() * translateYPercentages.length);
-  const translateY0 = translateYPercentages[translateY0Key];
-  translateYPercentages.splice(translateY0Key, 1);
-  const translateY1Key = Math.floor(Math.random() * translateYPercentages.length);
-  const translateY1 = translateYPercentages[translateY1Key];
-  translateYPercentages.splice(translateY1Key, 1);
-  const translateY2Key = Math.floor(Math.random() * translateYPercentages.length);
-  const translateY2 = translateYPercentages[translateY2Key];
-  translateYPercentages.splice(translateY2Key, 1);
-  const translateY3Key = Math.floor(Math.random() * translateYPercentages.length);
-  const translateY3 = translateYPercentages[translateY3Key];
-  translateYPercentages.splice(translateY3Key, 1);
-
-  const scale0 = scaleValues[Math.floor(Math.random() * scaleValues.length)];
-  const scale1 = scaleValues[Math.floor(Math.random() * scaleValues.length)];
-  const scale2 = scaleValues[Math.floor(Math.random() * scaleValues.length)];
-  const scale3 = scaleValues[Math.floor(Math.random() * scaleValues.length)];
-
-  const keyframe = {
-    '0%, 100%': { transform: `translate(${translateX0}cqw, ${translateY0}cqh) scale(${scale0})` },
-    '25%': { transform: `translate(${translateX1}cqw, ${translateY1}cqh) scale(${scale1})` },
-    '50%': { transform: `translate(${translateX2}cqw, ${translateY2}cqh) scale(${scale2})` },
-    '75%': { transform: `translate(${translateX3}cqw, ${translateY3}cqh) scale(${scale3})` },
-  };
-
-  return keyframe;
-}
-
-module.exports = {
-  content: ['./node_modules/@luminescent/ui/**/*.{mjs,cjs}'],
-  theme: {
-    extend: {
-      animation: {
-        blob: 'blob 15s infinite',
-        blob1: 'blob1 15s infinite',
-        blob2: 'blob2 15s infinite',
-        blob3: 'blob3 15s infinite',
-        blob4: 'blob4 15s infinite',
-        blob5: 'blob5 15s infinite',
-        blob6: 'blob6 15s infinite',
-        float: 'float 6s infinite',
-      },
-      keyframes: {
-        blob: getBlobKeyFrame(),
-        blob1: getBlobKeyFrame(),
-        blob2: getBlobKeyFrame(),
-        blob3: getBlobKeyFrame(),
-        blob4: getBlobKeyFrame(),
-        blob5: getBlobKeyFrame(),
-        blob6: getBlobKeyFrame(),
-      },
-    },
-  },
+function getBlobKeyFrame() {
+  const translateXPercentages = [0, 19, 38, 57, 76];
+  const translateYPercentages = [0, 12, 25, 38, 50];
+  const scaleValues = [0.8, 1, 1.2, 1.4];
+
+  const translateX0Key = Math.floor(Math.random() * 70);
+  const translateX0 = Math.floor(Math.random() * 70);
+  translateXPercentages.splice(translateX0Key, 1);
+  const translateX1Key = Math.floor(Math.random() * translateXPercentages.length);
+  const translateX1 = translateXPercentages[translateX1Key];
+  translateXPercentages.splice(translateX1Key, 1);
+  const translateX2Key = Math.floor(Math.random() * translateXPercentages.length);
+  const translateX2 = translateXPercentages[translateX2Key];
+  translateXPercentages.splice(translateX2Key, 1);
+  const translateX3Key = Math.floor(Math.random() * translateXPercentages.length);
+  const translateX3 = translateXPercentages[translateX3Key];
+  translateXPercentages.splice(translateX3Key, 1);
+
+  const translateY0Key = Math.floor(Math.random() * translateYPercentages.length);
+  const translateY0 = translateYPercentages[translateY0Key];
+  translateYPercentages.splice(translateY0Key, 1);
+  const translateY1Key = Math.floor(Math.random() * translateYPercentages.length);
+  const translateY1 = translateYPercentages[translateY1Key];
+  translateYPercentages.splice(translateY1Key, 1);
+  const translateY2Key = Math.floor(Math.random() * translateYPercentages.length);
+  const translateY2 = translateYPercentages[translateY2Key];
+  translateYPercentages.splice(translateY2Key, 1);
+  const translateY3Key = Math.floor(Math.random() * translateYPercentages.length);
+  const translateY3 = translateYPercentages[translateY3Key];
+  translateYPercentages.splice(translateY3Key, 1);
+
+  const scale0 = scaleValues[Math.floor(Math.random() * scaleValues.length)];
+  const scale1 = scaleValues[Math.floor(Math.random() * scaleValues.length)];
+  const scale2 = scaleValues[Math.floor(Math.random() * scaleValues.length)];
+  const scale3 = scaleValues[Math.floor(Math.random() * scaleValues.length)];
+
+  const keyframe = {
+    '0%, 100%': { transform: `translate(${translateX0}cqw, ${translateY0}cqh) scale(${scale0})` },
+    '25%': { transform: `translate(${translateX1}cqw, ${translateY1}cqh) scale(${scale1})` },
+    '50%': { transform: `translate(${translateX2}cqw, ${translateY2}cqh) scale(${scale2})` },
+    '75%': { transform: `translate(${translateX3}cqw, ${translateY3}cqh) scale(${scale3})` },
+  };
+
+  return keyframe;
+}
+
+module.exports = {
+  content: ['./node_modules/@luminescent/ui/**/*.{mjs,cjs}'],
+  theme: {
+    extend: {
+      animation: {
+        blob: 'blob 15s infinite',
+        blob1: 'blob1 15s infinite',
+        blob2: 'blob2 15s infinite',
+        blob3: 'blob3 15s infinite',
+        blob4: 'blob4 15s infinite',
+        blob5: 'blob5 15s infinite',
+        blob6: 'blob6 15s infinite',
+        float: 'float 6s infinite',
+      },
+      keyframes: {
+        blob: getBlobKeyFrame(),
+        blob1: getBlobKeyFrame(),
+        blob2: getBlobKeyFrame(),
+        blob3: getBlobKeyFrame(),
+        blob4: getBlobKeyFrame(),
+        blob5: getBlobKeyFrame(),
+        blob6: getBlobKeyFrame(),
+      },
+    },
+  },
 };

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;