@luminescent/ui 0.13.0 → 0.14.0

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

@@ -7,16 +7,30 @@ interface BlobProps {
     blur?: keyof typeof sizeClasses;
 }
 export declare const blobColorClasses: {
-    pink: string[];
+    slate: string[];
+    gray: string[];
+    darkgray: string[];
+    darkergray: string[];
+    zinc: string[];
+    neutral: string[];
+    stone: string[];
     red: string[];
     orange: string[];
+    amber: string[];
     yellow: string[];
+    lime: string[];
     green: string[];
+    emerald: string[];
+    teal: string[];
+    cyan: string[];
+    sky: string[];
     blue: string[];
+    indigo: string[];
+    violet: string[];
     purple: string[];
-    gray: string[];
-    darkgray: string[];
-    darkergray: string[];
+    fuchsia: string[];
+    pink: string[];
+    rose: string[];
 };
 export declare const Blobs: import("@builder.io/qwik").Component<BlobProps>;
 export {};

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

@@ -1,14 +1,29 @@
 import type { PropsOf } from '@builder.io/qwik';
 export declare const buttonColorClasses: {
+    slate: string;
+    gray: string;
+    darkgray: string;
+    darkergray: string;
+    zinc: string;
+    neutral: string;
+    stone: string;
     red: string;
     orange: string;
+    amber: string;
     yellow: string;
+    lime: string;
     green: string;
+    emerald: string;
+    teal: string;
+    cyan: string;
+    sky: string;
     blue: string;
+    indigo: string;
+    violet: string;
     purple: string;
+    fuchsia: string;
     pink: string;
-    gray: string;
-    darkgray: string;
+    rose: string;
     transparent: string;
 };
 export declare const sizeClasses: {

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

@@ -10,85 +10,149 @@ interface CardProps extends Omit<PropsOf<'div'>, 'class'> {
     };
 }
 export declare const cardColorClasses: {
-    pink: {
-        card: {
-            bg_blobs: string;
-            bg: string;
-            hover: string;
-            click: string;
-        };
+    slate: {
+        bg_blobs: string;
+        bg: string;
+        hover: string;
+        click: string;
+    };
+    gray: {
+        bg_blobs: string;
+        bg: string;
+        hover: string;
+        click: string;
+    };
+    darkgray: {
+        bg_blobs: string;
+        bg: string;
+        hover: string;
+        click: string;
+    };
+    darkergray: {
+        bg_blobs: string;
+        bg: string;
+        hover: string;
+        click: string;
+    };
+    zinc: {
+        bg_blobs: string;
+        bg: string;
+        hover: string;
+        click: string;
+    };
+    neutral: {
+        bg_blobs: string;
+        bg: string;
+        hover: string;
+        click: string;
+    };
+    stone: {
+        bg_blobs: string;
+        bg: string;
+        hover: string;
+        click: string;
     };
     red: {
-        card: {
-            bg_blobs: string;
-            bg: string;
-            hover: string;
-            click: string;
-        };
+        bg_blobs: string;
+        bg: string;
+        hover: string;
+        click: string;
     };
     orange: {
-        card: {
-            bg_blobs: string;
-            bg: string;
-            hover: string;
-            click: string;
-        };
+        bg_blobs: string;
+        bg: string;
+        hover: string;
+        click: string;
+    };
+    amber: {
+        bg_blobs: string;
+        bg: string;
+        hover: string;
+        click: string;
     };
     yellow: {
-        card: {
-            bg_blobs: string;
-            bg: string;
-            hover: string;
-            click: string;
-        };
+        bg_blobs: string;
+        bg: string;
+        hover: string;
+        click: string;
+    };
+    lime: {
+        bg_blobs: string;
+        bg: string;
+        hover: string;
+        click: string;
     };
     green: {
-        card: {
-            bg_blobs: string;
-            bg: string;
-            hover: string;
-            click: string;
-        };
+        bg_blobs: string;
+        bg: string;
+        hover: string;
+        click: string;
+    };
+    emerald: {
+        bg_blobs: string;
+        bg: string;
+        hover: string;
+        click: string;
+    };
+    teal: {
+        bg_blobs: string;
+        bg: string;
+        hover: string;
+        click: string;
+    };
+    cyan: {
+        bg_blobs: string;
+        bg: string;
+        hover: string;
+        click: string;
+    };
+    sky: {
+        bg_blobs: string;
+        bg: string;
+        hover: string;
+        click: string;
     };
     blue: {
-        card: {
-            bg_blobs: string;
-            bg: string;
-            hover: string;
-            click: string;
-        };
+        bg_blobs: string;
+        bg: string;
+        hover: string;
+        click: string;
+    };
+    indigo: {
+        bg_blobs: string;
+        bg: string;
+        hover: string;
+        click: string;
+    };
+    violet: {
+        bg_blobs: string;
+        bg: string;
+        hover: string;
+        click: string;
     };
     purple: {
-        card: {
-            bg_blobs: string;
-            bg: string;
-            hover: string;
-            click: string;
-        };
+        bg_blobs: string;
+        bg: string;
+        hover: string;
+        click: string;
     };
-    gray: {
-        card: {
-            bg_blobs: string;
-            bg: string;
-            hover: string;
-            click: string;
-        };
+    fuchsia: {
+        bg_blobs: string;
+        bg: string;
+        hover: string;
+        click: string;
     };
-    darkgray: {
-        card: {
-            bg_blobs: string;
-            bg: string;
-            hover: string;
-            click: string;
-        };
+    pink: {
+        bg_blobs: string;
+        bg: string;
+        hover: string;
+        click: string;
     };
-    darkergray: {
-        card: {
-            bg_blobs: string;
-            bg: string;
-            hover: string;
-            click: string;
-        };
+    rose: {
+        bg_blobs: string;
+        bg: string;
+        hover: string;
+        click: string;
     };
 };
 export declare const Card: import("@builder.io/qwik").Component<CardProps>;

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

@@ -8,15 +8,30 @@ interface NavContainerProps extends Omit<PropsOf<'nav'>, 'class'> {
     color?: keyof typeof navColorClasses;
 }
 export declare const navColorClasses: {
+    slate: string;
+    gray: string;
+    darkgray: string;
+    darkergray: string;
+    zinc: string;
+    neutral: string;
+    stone: string;
     red: string;
     orange: string;
+    amber: string;
     yellow: string;
+    lime: string;
     green: string;
+    emerald: string;
+    teal: string;
+    cyan: string;
+    sky: string;
     blue: string;
+    indigo: string;
+    violet: string;
     purple: string;
+    fuchsia: string;
     pink: string;
-    gray: string;
-    darkgray: string;
+    rose: string;
     transparent: string;
 };
 export declare const Nav: import("@builder.io/qwik").Component<NavContainerProps>;

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

@@ -1,10 +1,12 @@
 import type { PropsOf, QRL } from '@builder.io/qwik';
+import { InputColorClasses } from './TextInput';
 interface NumberInputRawProps extends Omit<(PropsOf<'input'> & {
     type: 'number';
 }), 'class' | 'type'> {
     onDecrement$: QRL<(event: PointerEvent, element: HTMLButtonElement, inputElement?: HTMLInputElement) => void>;
     onIncrement$: QRL<(event: PointerEvent, element: HTMLButtonElement, inputElement?: HTMLInputElement) => void>;
     input?: boolean;
+    color?: keyof typeof InputColorClasses;
     class?: {
         [key: string]: boolean;
     };

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

@@ -1,8 +1,10 @@
 import type { PropsOf } from '@builder.io/qwik';
+import { InputColorClasses } from './TextInput';
 export interface TextAreaRawProps extends Omit<PropsOf<'textarea'>, 'class' | 'onChange$' | 'onClick$'> {
     class?: {
         [key: string]: boolean;
     };
+    color?: keyof typeof InputColorClasses;
     output?: boolean;
 }
 interface TextAreaProps extends Omit<TextAreaRawProps, 'children'> {

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

@@ -5,11 +5,39 @@ export interface TextInputRawProps extends Omit<(PropsOf<'input'> & {
     class?: {
         [key: string]: boolean;
     };
+    color?: keyof typeof InputColorClasses;
 }
 interface TextInputProps extends Omit<TextInputRawProps, 'children'> {
     id: string;
 }
-export declare const InputClasses = "motion-safe:transition ease-in-out border border-gray-700 bg-gray-800 text-gray-50 hover:bg-gray-700 hover:shadow-lg focus:bg-gray-700 focus:outline-none focus:border-gray-400 rounded-md px-2.5 py-1.5 touch-manipulation";
+export declare const InputColorClasses: {
+    slate: string;
+    gray: string;
+    darkgray: string;
+    darkergray: string;
+    zinc: string;
+    neutral: string;
+    stone: string;
+    red: string;
+    orange: string;
+    amber: string;
+    yellow: string;
+    lime: string;
+    green: string;
+    emerald: string;
+    teal: string;
+    cyan: string;
+    sky: string;
+    blue: string;
+    indigo: string;
+    violet: string;
+    purple: string;
+    fuchsia: string;
+    pink: string;
+    rose: string;
+    transparent: string;
+};
+export declare const InputClasses = "motion-safe:transition ease-in-out border text-gray-50 hover:shadow-lg focus:outline-none rounded-md px-2.5 py-1.5 touch-manipulation";
 export declare const TextInput: import("@builder.io/qwik").Component<TextInputProps>;
 export declare const TextInputRaw: import("@builder.io/qwik").Component<TextInputRawProps>;
 export {};

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

@@ -5,8 +5,206 @@ interface ToggleProps extends Omit<(PropsOf<'input'> & {
     class?: {
         [key: string]: boolean;
     };
+    onColor?: keyof typeof toggleOnColorClasses;
+    offColor?: keyof typeof toggleOffColorClasses;
     center?: boolean;
     label?: string | JSXOutput;
 }
+export declare const toggleOnColorClasses: {
+    slate: {
+        checked: string;
+        checkedAfter: string;
+    };
+    gray: {
+        checked: string;
+        checkedAfter: string;
+    };
+    darkgray: {
+        checked: string;
+        checkedAfter: string;
+    };
+    darkergray: {
+        checked: string;
+        checkedAfter: string;
+    };
+    zinc: {
+        checked: string;
+        checkedAfter: string;
+    };
+    neutral: {
+        checked: string;
+        checkedAfter: string;
+    };
+    stone: {
+        checked: string;
+        checkedAfter: string;
+    };
+    red: {
+        checked: string;
+        checkedAfter: string;
+    };
+    orange: {
+        checked: string;
+        checkedAfter: string;
+    };
+    amber: {
+        checked: string;
+        checkedAfter: string;
+    };
+    yellow: {
+        checked: string;
+        checkedAfter: string;
+    };
+    lime: {
+        checked: string;
+        checkedAfter: string;
+    };
+    green: {
+        checked: string;
+        checkedAfter: string;
+    };
+    emerald: {
+        checked: string;
+        checkedAfter: string;
+    };
+    teal: {
+        checked: string;
+        checkedAfter: string;
+    };
+    cyan: {
+        checked: string;
+        checkedAfter: string;
+    };
+    sky: {
+        checked: string;
+        checkedAfter: string;
+    };
+    blue: {
+        checked: string;
+        checkedAfter: string;
+    };
+    indigo: {
+        checked: string;
+        checkedAfter: string;
+    };
+    violet: {
+        checked: string;
+        checkedAfter: string;
+    };
+    purple: {
+        checked: string;
+        checkedAfter: string;
+    };
+    fuchsia: {
+        checked: string;
+        checkedAfter: string;
+    };
+    pink: {
+        checked: string;
+        checkedAfter: string;
+    };
+    rose: {
+        checked: string;
+        checkedAfter: string;
+    };
+};
+export declare const toggleOffColorClasses: {
+    slate: {
+        unchecked: string;
+        uncheckedAfter: string;
+    };
+    gray: {
+        unchecked: string;
+        uncheckedAfter: string;
+    };
+    darkgray: {
+        unchecked: string;
+        uncheckedAfter: string;
+    };
+    darkergray: {
+        unchecked: string;
+        uncheckedAfter: string;
+    };
+    zinc: {
+        unchecked: string;
+        uncheckedAfter: string;
+    };
+    neutral: {
+        unchecked: string;
+        uncheckedAfter: string;
+    };
+    stone: {
+        unchecked: string;
+        uncheckedAfter: string;
+    };
+    red: {
+        unchecked: string;
+        uncheckedAfter: string;
+    };
+    orange: {
+        unchecked: string;
+        uncheckedAfter: string;
+    };
+    amber: {
+        unchecked: string;
+        uncheckedAfter: string;
+    };
+    yellow: {
+        unchecked: string;
+        uncheckedAfter: string;
+    };
+    lime: {
+        unchecked: string;
+        uncheckedAfter: string;
+    };
+    green: {
+        unchecked: string;
+        uncheckedAfter: string;
+    };
+    emerald: {
+        unchecked: string;
+        uncheckedAfter: string;
+    };
+    teal: {
+        unchecked: string;
+        uncheckedAfter: string;
+    };
+    cyan: {
+        unchecked: string;
+        uncheckedAfter: string;
+    };
+    sky: {
+        unchecked: string;
+        uncheckedAfter: string;
+    };
+    blue: {
+        unchecked: string;
+        uncheckedAfter: string;
+    };
+    indigo: {
+        unchecked: string;
+        uncheckedAfter: string;
+    };
+    violet: {
+        unchecked: string;
+        uncheckedAfter: string;
+    };
+    purple: {
+        unchecked: string;
+        uncheckedAfter: string;
+    };
+    fuchsia: {
+        unchecked: string;
+        uncheckedAfter: string;
+    };
+    pink: {
+        unchecked: string;
+        uncheckedAfter: string;
+    };
+    rose: {
+        unchecked: string;
+        uncheckedAfter: string;
+    };
+};
 export declare const Toggle: import("@builder.io/qwik").Component<ToggleProps>;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luminescent/ui",
-  "version": "0.13.0",
+  "version": "0.14.0",
   "description": "Luminescent UI library",
   "main": "./lib/index.qwik.mjs",
   "qwik": "./lib/index.qwik.mjs",
@@ -41,22 +41,22 @@
   },
   "devDependencies": {
     "@anuragroy/tailwindcss-animate": "^1.0.6",
-    "@builder.io/qwik": "1.5.1",
-    "@builder.io/qwik-city": "^1.5.1",
-    "@types/eslint": "^8.56.5",
-    "@types/node": "^20.11.25",
-    "@typescript-eslint/eslint-plugin": "^7.2.0",
-    "@typescript-eslint/parser": "^7.2.0",
-    "autoprefixer": "^10.4.18",
+    "@builder.io/qwik": "1.5.2",
+    "@builder.io/qwik-city": "^1.5.2",
+    "@types/eslint": "^8.56.9",
+    "@types/node": "^20.12.7",
+    "@typescript-eslint/eslint-plugin": "^7.6.0",
+    "@typescript-eslint/parser": "^7.6.0",
+    "autoprefixer": "^10.4.19",
     "chart.js": "^4.4.2",
     "eslint": "^8.57.0",
     "eslint-plugin-qwik": "latest",
-    "np": "^10.0.0",
-    "postcss": "^8.4.35",
-    "tailwindcss": "3.4.1",
-    "typescript": "5.4.2",
+    "np": "^10.0.3",
+    "postcss": "^8.4.38",
+    "tailwindcss": "3.4.3",
+    "typescript": "5.4.5",
     "undici": "*",
-    "vite": "^5.1.6",
-    "vite-tsconfig-paths": "^4.3.1"
+    "vite": "^5.2.8",
+    "vite-tsconfig-paths": "^4.3.2"
   }
 }