@luminescent/ui 0.7.6 → 0.8.0

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/components/logos/LoadingIcon.d.ts

@@ -0,0 +1,8 @@
+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/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.6",
-  "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.0",
+  "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(),
+      },
+    },
+  },
 };