@luminescent/ui 0.1.2 → 0.2.0

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

@@ -4,6 +4,7 @@ interface ColorInputProps extends Omit<TextInputRawProps, 'onInput$'> {
     onInput$?: QRL<(color: string, element: HTMLInputElement) => void>;
     value?: string;
     label?: string;
+    presetColors?: string[];
 }
 export declare const ColorInput: import("@builder.io/qwik").Component<ColorInputProps>;
 export {};

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

@@ -0,0 +1,50 @@
+export type RGBAColor = {
+    r: number;
+    g: number;
+    b: number;
+    a?: number;
+};
+export type HSVAColor = {
+    h: number;
+    s: number;
+    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 hexNumberToRgb(color: number): {
+    r: number;
+    g: 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;
+    g: number;
+    b: number;
+};
+export declare function rgbToHsv(color: RGBAColor): {
+    h: number;
+    s: number;
+    v: number;
+};

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

@@ -0,0 +1,145 @@
+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

@@ -0,0 +1,6 @@
+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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luminescent/ui",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "description": "Luminescent UI library",
   "main": "./lib/index.qwik.mjs",
   "qwik": "./lib/index.qwik.mjs",
@@ -41,7 +41,7 @@
     "@builder.io/qwik": "1.4.5",
     "@builder.io/qwik-city": "^1.4.5",
     "@types/eslint": "^8.56.2",
-    "@types/node": "^20.11.17",
+    "@types/node": "^20.11.19",
     "@typescript-eslint/eslint-plugin": "^7.0.1",
     "@typescript-eslint/parser": "^7.0.1",
     "autoprefixer": "^10.4.17",
@@ -51,11 +51,10 @@
     "np": "^9.2.0",
     "postcss": "^8.4.35",
     "qwik-ionicons": "^1.0.5",
-    "simple-color-picker": "^1.0.5",
     "tailwindcss": "3.4.1",
     "typescript": "5.3.3",
     "undici": "*",
-    "vite": "^5.1.1",
+    "vite": "^5.1.3",
     "vite-tsconfig-paths": "^4.3.1"
   }
 }

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

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