@luminescent/ui 0.13.0 → 0.15.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,15 +1,101 @@
 import type { PropsOf } from '@builder.io/qwik';
 export declare const buttonColorClasses: {
-    red: string;
-    orange: string;
-    yellow: string;
-    green: string;
-    blue: string;
-    purple: string;
-    pink: string;
-    gray: string;
-    darkgray: string;
-    transparent: string;
+    slate: {
+        hover: string;
+        bg: string;
+    };
+    gray: {
+        hover: string;
+        bg: string;
+    };
+    darkgray: {
+        hover: string;
+        bg: string;
+    };
+    darkergray: {
+        hover: string;
+        bg: string;
+    };
+    zinc: {
+        hover: string;
+        bg: string;
+    };
+    neutral: {
+        hover: string;
+        bg: string;
+    };
+    stone: {
+        hover: string;
+        bg: string;
+    };
+    red: {
+        hover: string;
+        bg: string;
+    };
+    orange: {
+        hover: string;
+        bg: string;
+    };
+    amber: {
+        hover: string;
+        bg: string;
+    };
+    yellow: {
+        hover: string;
+        bg: string;
+    };
+    lime: {
+        hover: string;
+        bg: string;
+    };
+    green: {
+        hover: string;
+        bg: string;
+    };
+    emerald: {
+        hover: string;
+        bg: string;
+    };
+    teal: {
+        hover: string;
+        bg: string;
+    };
+    cyan: {
+        hover: string;
+        bg: string;
+    };
+    sky: {
+        hover: string;
+        bg: string;
+    };
+    blue: {
+        hover: string;
+        bg: string;
+    };
+    indigo: {
+        hover: string;
+        bg: string;
+    };
+    violet: {
+        hover: string;
+        bg: string;
+    };
+    purple: {
+        hover: string;
+        bg: string;
+    };
+    fuchsia: {
+        hover: string;
+        bg: string;
+    };
+    pink: {
+        hover: string;
+        bg: string;
+    };
+    rose: {
+        hover: string;
+        bg: string;
+    };
 };
 export declare const sizeClasses: {
     sm: {
@@ -35,6 +121,7 @@ export declare const sizeClasses: {
 };
 interface GenericButtonProps {
     color?: keyof typeof buttonColorClasses;
+    transparent?: boolean;
     size?: keyof typeof sizeClasses;
     square?: boolean;
     class?: {

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/Dropdown.d.ts

@@ -6,6 +6,7 @@ interface DropdownProps extends Omit<PropsOf<'select'>, 'class' | 'size'> {
     };
     display?: JSXChildren;
     color?: keyof typeof buttonColorClasses;
+    transparent?: boolean;
     size?: keyof typeof sizeClasses;
     hover?: boolean;
     values?: {

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 {};