@luzmo/lucero 0.0.3 → 0.0.6

package/components/when-CDZyJPvd.cjs

@@ -0,0 +1,22 @@
+/*! * Lucero - The design system for Luzmo.
+ * 
+ * Copyright © 2025 Luzmo
+ * All rights reserved.
+ * Lucero (“Luzmo Design System”) must be used according to the Luzmo Terms of Service.
+ * This license allows users with a current active Luzmo account to use Lucero.
+ * This license terminates automatically if a user no longer has an active Luzmo account.
+ * Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ * */
+"use strict";/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */function c(n,u,r){return n?u(n):r==null?void 0:r(n)}exports.n=c;

package/index.d.ts

@@ -0,0 +1,39 @@
+export * from './components/accordion';
+export * from './components/action-bar';
+export * from './components/action-button';
+export * from './components/action-group';
+export * from './components/action-menu';
+export * from './components/avatar';
+export * from './components/button';
+export * from './components/button-group';
+export * from './components/checkbox';
+export * from './components/color-area';
+export * from './components/color-field';
+export * from './components/color-handle';
+export * from './components/color-loupe';
+export * from './components/color-menu';
+export * from './components/color-picker';
+export * from './components/color-slider';
+export * from './components/divider';
+export * from './components/field-group';
+export * from './components/field-label';
+export * from './components/icon';
+export * from './components/infield-button';
+export * from './components/label';
+export * from './components/legend-position';
+export * from './components/menu';
+export * from './components/multi-language-field';
+export * from './components/number-field';
+export * from './components/overlay';
+export * from './components/picker';
+export * from './components/popover';
+export * from './components/progress-circle';
+export * from './components/radio';
+export * from './components/search';
+export * from './components/slider';
+export * from './components/swatch';
+export * from './components/switch';
+export * from './components/tags';
+export * from './components/text-field';
+export * from './components/tooltip';
+export * from './components/unit-input';

package/package.json

@@ -1,179 +1,217 @@
 {
   "name": "@luzmo/lucero",
-  "version": "0.0.3",
+  "version": "0.0.6",
   "homepage": "https://luzmo.com",
   "description": "Lucero - The design system for Luzmo",
   "type": "module",
-  "files": [
-    "dist"
-  ],
-  "main": "./lib/index.js",
-  "module": "./lib/index.js",
-  "types": "./lib/index.d.ts",
+  "main": "./components/index.js",
+  "module": "./components/index.js",
+  "types": "./index.d.ts",
   "exports": {
     ".": {
-      "import": "./lib/index.js",
-      "require": "./lib/index.cjs"
+      "types": "./index.d.ts",
+      "import": "./components/index.js",
+      "require": "./components/index.cjs"
     },
     "./accordion": {
-      "import": "./lib/accordion/index.js",
-      "require": "./lib/accordion/index.cjs"
+      "types": "./components/accordion/index.d.ts",
+      "import": "./components/accordion/index.js",
+      "require": "./components/accordion/index.cjs"
     },
     "./action-bar": {
-      "import": "./lib/action-bar/index.js",
-      "require": "./lib/action-bar/index.cjs"
+      "types": "./components/action-bar/index.d.ts",
+      "import": "./components/action-bar/index.js",
+      "require": "./components/action-bar/index.cjs"
     },
     "./action-button": {
-      "import": "./lib/action-button/index.js",
-      "require": "./lib/action-button/index.cjs"
+      "types": "./components/action-button/index.d.ts",
+      "import": "./components/action-button/index.js",
+      "require": "./components/action-button/index.cjs"
     },
     "./action-group": {
-      "import": "./lib/action-group/index.js",
-      "require": "./lib/action-group/index.cjs"
+      "types": "./components/action-group/index.d.ts",
+      "import": "./components/action-group/index.js",
+      "require": "./components/action-group/index.cjs"
     },
     "./action-menu": {
-      "import": "./lib/action-menu/index.js",
-      "require": "./lib/action-menu/index.cjs"
+      "types": "./components/action-menu/index.d.ts",
+      "import": "./components/action-menu/index.js",
+      "require": "./components/action-menu/index.cjs"
     },
     "./avatar": {
-      "import": "./lib/avatar/index.js",
-      "require": "./lib/avatar/index.cjs"
+      "types": "./components/avatar/index.d.ts",
+      "import": "./components/avatar/index.js",
+      "require": "./components/avatar/index.cjs"
     },
     "./button": {
-      "import": "./lib/button/index.js",
-      "require": "./lib/button/index.cjs"
+      "types": "./components/button/index.d.ts",
+      "import": "./components/button/index.js",
+      "require": "./components/button/index.cjs"
     },
     "./button-group": {
-      "import": "./lib/button-group/index.js",
-      "require": "./lib/button-group/index.cjs"
+      "types": "./components/button-group/index.d.ts",
+      "import": "./components/button-group/index.js",
+      "require": "./components/button-group/index.cjs"
     },
     "./checkbox": {
-      "import": "./lib/checkbox/index.js",
-      "require": "./lib/checkbox/index.cjs"
+      "types": "./components/checkbox/index.d.ts",
+      "import": "./components/checkbox/index.js",
+      "require": "./components/checkbox/index.cjs"
+    },
+    "./color-area": {
+      "types": "./components/color-area/index.d.ts",
+      "import": "./components/color-area/index.js",
+      "require": "./components/color-area/index.cjs"
+    },
+    "./color-field": {
+      "types": "./components/color-field/index.d.ts",
+      "import": "./components/color-field/index.js",
+      "require": "./components/color-field/index.cjs"
+    },
+    "./color-handle": {
+      "types": "./components/color-handle/index.d.ts",
+      "import": "./components/color-handle/index.js",
+      "require": "./components/color-handle/index.cjs"
+    },
+    "./color-loupe": {
+      "types": "./components/color-loupe/index.d.ts",
+      "import": "./components/color-loupe/index.js",
+      "require": "./components/color-loupe/index.cjs"
+    },
+    "./color-menu": {
+      "types": "./components/color-menu/index.d.ts",
+      "import": "./components/color-menu/index.js",
+      "require": "./components/color-menu/index.cjs"
     },
     "./color-picker": {
-      "import": "./lib/color-picker/index.js",
-      "require": "./lib/color-picker/index.cjs"
+      "types": "./components/color-picker/index.d.ts",
+      "import": "./components/color-picker/index.js",
+      "require": "./components/color-picker/index.cjs"
+    },
+    "./color-slider": {
+      "types": "./components/color-slider/index.d.ts",
+      "import": "./components/color-slider/index.js",
+      "require": "./components/color-slider/index.cjs"
     },
     "./divider": {
-      "import": "./lib/divider/index.js",
-      "require": "./lib/divider/index.cjs"
+      "types": "./components/divider/index.d.ts",
+      "import": "./components/divider/index.js",
+      "require": "./components/divider/index.cjs"
     },
     "./field-group": {
-      "import": "./lib/field-group/index.js",
-      "require": "./lib/field-group/index.cjs"
+      "types": "./components/field-group/index.d.ts",
+      "import": "./components/field-group/index.js",
+      "require": "./components/field-group/index.cjs"
     },
     "./field-label": {
-      "import": "./lib/field-label/index.js",
-      "require": "./lib/field-label/index.cjs"
+      "types": "./components/field-label/index.d.ts",
+      "import": "./components/field-label/index.js",
+      "require": "./components/field-label/index.cjs"
     },
     "./icon": {
-      "import": "./lib/icon/index.js",
-      "require": "./lib/icon/index.cjs"
+      "types": "./components/icon/index.d.ts",
+      "import": "./components/icon/index.js",
+      "require": "./components/icon/index.cjs"
     },
     "./infield-button": {
-      "import": "./lib/infield-button/index.js",
-      "require": "./lib/infield-button/index.cjs"
+      "types": "./components/infield-button/index.d.ts",
+      "import": "./components/infield-button/index.js",
+      "require": "./components/infield-button/index.cjs"
     },
     "./label": {
-      "import": "./lib/label/index.js",
-      "require": "./lib/label/index.cjs"
+      "types": "./components/label/index.d.ts",
+      "import": "./components/label/index.js",
+      "require": "./components/label/index.cjs"
     },
     "./legend-position": {
-      "import": "./lib/legend-position/index.js",
-      "require": "./lib/legend-position/index.cjs"
+      "types": "./components/legend-position/index.d.ts",
+      "import": "./components/legend-position/index.js",
+      "require": "./components/legend-position/index.cjs"
     },
     "./menu": {
-      "import": "./lib/menu/index.js",
-      "require": "./lib/menu/index.cjs"
+      "types": "./components/menu/index.d.ts",
+      "import": "./components/menu/index.js",
+      "require": "./components/menu/index.cjs"
     },
     "./multi-language-field": {
-      "import": "./lib/multi-language-field/index.js",
-      "require": "./lib/multi-language-field/index.cjs"
+      "types": "./components/multi-language-field/index.d.ts",
+      "import": "./components/multi-language-field/index.js",
+      "require": "./components/multi-language-field/index.cjs"
     },
     "./number-field": {
-      "import": "./lib/number-field/index.js",
-      "require": "./lib/number-field/index.cjs"
+      "types": "./components/number-field/index.d.ts",
+      "import": "./components/number-field/index.js",
+      "require": "./components/number-field/index.cjs"
     },
     "./overlay": {
-      "import": "./lib/overlay/index.js",
-      "require": "./lib/overlay/index.cjs"
+      "types": "./components/overlay/index.d.ts",
+      "import": "./components/overlay/index.js",
+      "require": "./components/overlay/index.cjs"
     },
     "./picker": {
-      "import": "./lib/picker/index.js",
-      "require": "./lib/picker/index.cjs"
+      "types": "./components/picker/index.d.ts",
+      "import": "./components/picker/index.js",
+      "require": "./components/picker/index.cjs"
     },
     "./popover": {
-      "import": "./lib/popover/index.js",
-      "require": "./lib/popover/index.cjs"
+      "types": "./components/popover/index.d.ts",
+      "import": "./components/popover/index.js",
+      "require": "./components/popover/index.cjs"
     },
     "./progress-circle": {
-      "import": "./lib/progress-circle/index.js",
-      "require": "./lib/progress-circle/index.cjs"
+      "types": "./components/progress-circle/index.d.ts",
+      "import": "./components/progress-circle/index.js",
+      "require": "./components/progress-circle/index.cjs"
     },
     "./radio": {
-      "import": "./lib/radio/index.js",
-      "require": "./lib/radio/index.cjs"
+      "types": "./components/radio/index.d.ts",
+      "import": "./components/radio/index.js",
+      "require": "./components/radio/index.cjs"
     },
     "./search": {
-      "import": "./lib/search/index.js",
-      "require": "./lib/search/index.cjs"
+      "types": "./components/search/index.d.ts",
+      "import": "./components/search/index.js",
+      "require": "./components/search/index.cjs"
     },
     "./slider": {
-      "import": "./lib/slider/index.js",
-      "require": "./lib/slider/index.cjs"
+      "types": "./components/slider/index.d.ts",
+      "import": "./components/slider/index.js",
+      "require": "./components/slider/index.cjs"
     },
     "./swatch": {
-      "import": "./lib/swatch/index.js",
-      "require": "./lib/swatch/index.cjs"
+      "types": "./components/swatch/index.d.ts",
+      "import": "./components/swatch/index.js",
+      "require": "./components/swatch/index.cjs"
     },
     "./switch": {
-      "import": "./lib/switch/index.js",
-      "require": "./lib/switch/index.cjs"
+      "types": "./components/switch/index.d.ts",
+      "import": "./components/switch/index.js",
+      "require": "./components/switch/index.cjs"
     },
     "./tags": {
-      "import": "./lib/tags/index.js",
-      "require": "./lib/tags/index.cjs"
+      "types": "./components/tags/index.d.ts",
+      "import": "./components/tags/index.js",
+      "require": "./components/tags/index.cjs"
     },
     "./text-field": {
-      "import": "./lib/text-field/index.js",
-      "require": "./lib/text-field/index.cjs"
+      "types": "./components/text-field/index.d.ts",
+      "import": "./components/text-field/index.js",
+      "require": "./components/text-field/index.cjs"
     },
     "./toast": {
-      "import": "./lib/toast/index.js",
-      "require": "./lib/toast/index.cjs"
+      "types": "./components/toast/index.d.ts",
+      "import": "./components/toast/index.js",
+      "require": "./components/toast/index.cjs"
     },
     "./tooltip": {
-      "import": "./lib/tooltip/index.js",
-      "require": "./lib/tooltip/index.cjs"
+      "types": "./components/tooltip/index.d.ts",
+      "import": "./components/tooltip/index.js",
+      "require": "./components/tooltip/index.cjs"
     },
     "./unit-input": {
-      "import": "./lib/unit-input/index.js",
-      "require": "./lib/unit-input/index.cjs"
-    },
-    "./color-area": {
-      "import": "./lib/color-area/index.js",
-      "require": "./lib/color-area/index.cjs"
-    },
-    "./color-field": {
-      "import": "./lib/color-field/index.js",
-      "require": "./lib/color-field/index.cjs"
-    },
-    "./color-handle": {
-      "import": "./lib/color-handle/index.js",
-      "require": "./lib/color-handle/index.cjs"
-    },
-    "./color-loupe": {
-      "import": "./lib/color-loupe/index.js",
-      "require": "./lib/color-loupe/index.cjs"
-    },
-    "./color-menu": {
-      "import": "./lib/color-menu/index.js",
-      "require": "./lib/color-menu/index.cjs"
-    },
-    "./color-slider": {
-      "import": "./lib/color-slider/index.js",
-      "require": "./lib/color-slider/index.cjs"
+      "types": "./components/unit-input/index.d.ts",
+      "import": "./components/unit-input/index.js",
+      "require": "./components/unit-input/index.cjs"
     }
   },
   "keywords": [

package/utils/base.d.ts

@@ -0,0 +1,16 @@
+import { LitElement, ReactiveElement } from 'lit';
+type Constructor<T = Record<string, unknown>> = {
+    new (...args: any[]): T;
+    prototype: T;
+};
+export interface LuzmoInterface {
+    shadowRoot: ShadowRoot;
+    isLTR: boolean;
+    hasVisibleFocusInTree(): boolean;
+    dir: 'ltr' | 'rtl';
+}
+export declare function LuzmoMixin<T extends Constructor<ReactiveElement>>(constructor: T): T & Constructor<LuzmoInterface>;
+declare const LuzmoElement_base: typeof LitElement & Constructor<LuzmoInterface>;
+export declare class LuzmoElement extends LuzmoElement_base {
+}
+export {};

package/utils/condition-attribute-with-id.d.ts

@@ -0,0 +1,2 @@
+export declare function conditionAttributeWithoutId(el: HTMLElement, attribute: string, ids: string[]): void;
+export declare function conditionAttributeWithId(el: HTMLElement, attribute: string, id: string | string[]): () => void;

package/utils/first-focusable-in.d.ts

@@ -0,0 +1,3 @@
+import { LuzmoElement } from './base';
+export declare const firstFocusableIn: (root: HTMLElement | ShadowRoot) => LuzmoElement | null;
+export declare const firstFocusableSlottedIn: (root: HTMLSlotElement) => LuzmoElement | null;

package/utils/focus-visible.d.ts

@@ -0,0 +1,29 @@
+declare global {
+    interface Window {
+        applyFocusVisiblePolyfill?: (scope: Document | ShadowRoot) => void;
+    }
+}
+type Constructor<T = Record<string, unknown>> = {
+    new (...args: any[]): T;
+    prototype: T;
+};
+interface OptionalLifecycleCallbacks {
+    connectedCallback?(): void;
+    disconnectedCallback?(): void;
+    manageAutoFocus?(): void;
+}
+type MixableBaseClass = HTMLElement & OptionalLifecycleCallbacks;
+/**
+ * This mixin function is designed to be applied to a class that inherits
+ * from HTMLElement. It makes it easy for a custom element to coordinate with
+ * the :focus-visible polyfill.
+ *
+ * NOTE(cdata): The code here was adapted from an example proposed with the
+ * introduction of ShadowDOM support in the :focus-visible polyfill.
+ *
+ * @see https://github.com/WICG/focus-visible/pull/196
+ * @param SuperClass The base class implementation to decorate with
+ * implementation that coordinates with the :focus-visible polyfill
+ */
+export declare const FocusVisiblePolyfillMixin: <T extends Constructor<MixableBaseClass>>(SuperClass: T) => T;
+export {};

package/utils/focusable-selectors.d.ts

@@ -0,0 +1,2 @@
+export declare const userFocusableSelector: string;
+export declare const focusableSelector: string;

package/utils/focusable.d.ts

@@ -0,0 +1,58 @@
+import { PropertyValues } from 'lit';
+import { LuzmoElement } from './base';
+type DisableableElement = HTMLElement & {
+    disabled?: boolean;
+};
+declare const Focusable_base: typeof LuzmoElement;
+/**
+ * Focusable base class handles tabindex setting into shadowed elements automatically.
+ *
+ * This implementation is based heavily on the aybolit delegate-focus-mixin at
+ * https://github.com/web-padawan/aybolit/blob/master/packages/core/src/mixins/delegate-focus-mixin.js
+ */
+export declare class Focusable extends Focusable_base {
+    /**
+     * Disable this control. It will not receive focus or events
+     */
+    disabled: boolean;
+    /**
+     * When this control is rendered, focus it automatically
+     *
+     * @private
+     */
+    autofocus: boolean;
+    /**
+     * The tab index to apply to this control. See general documentation about
+     * the tabindex HTML property
+     *
+     * @private
+     */
+    get tabIndex(): number;
+    set tabIndex(tabIndex: number);
+    private _tabIndex;
+    private onPointerdownManagementOfTabIndex;
+    private manageFocusElementTabindex;
+    private manipulatingTabindex;
+    /**
+     * @private
+     */
+    get focusElement(): DisableableElement;
+    /**
+     * @public
+     * @returns whether the component should manage its focusElement tab-index or not
+     * Needed for action-menu to be supported in action-group in an accessible way
+     */
+    get selfManageFocusElement(): boolean;
+    focus(options?: FocusOptions): void;
+    blur(): void;
+    click(): void;
+    protected manageAutoFocus(): void;
+    protected firstUpdated(changes: PropertyValues): void;
+    protected update(changedProperties: PropertyValues): void;
+    protected updated(changedProperties: PropertyValues): void;
+    private handleDisabledChanged;
+    protected getUpdateComplete(): Promise<boolean>;
+    private autofocusReady;
+    connectedCallback(): void;
+}
+export {};

package/utils/get-css-variable.d.ts

@@ -0,0 +1 @@
+export declare const getCssVariableValue: (element: HTMLElement, variable: string) => string;

package/utils/get-label-from-slot.d.ts

@@ -0,0 +1 @@
+export declare const getLabelFromSlot: (label: string, slotEl: HTMLSlotElement) => string | null;

package/utils/like-anchor.d.ts

@@ -0,0 +1,23 @@
+import { ReactiveElement, TemplateResult } from 'lit';
+type Constructor<T = Record<string, unknown>> = {
+    new (...args: any[]): T;
+    prototype: T;
+};
+type RenderAnchorOptions = {
+    id: string;
+    className?: string;
+    ariaHidden?: boolean;
+    anchorContent?: TemplateResult | TemplateResult[];
+    labelledby?: string;
+    tabindex?: -1 | 0;
+};
+export interface LikeAnchorInterface {
+    download?: string;
+    label?: string;
+    href?: string;
+    rel?: string;
+    target?: '_blank' | '_parent' | '_self' | '_top';
+    renderAnchor(options: RenderAnchorOptions): TemplateResult;
+}
+export declare function LikeAnchor<T extends Constructor<ReactiveElement>>(constructor: T): T & Constructor<LikeAnchorInterface>;
+export {};

package/utils/observe-slot-presence.d.ts

@@ -0,0 +1,12 @@
+import { ReactiveElement } from 'lit';
+type Constructor<T = Record<string, unknown>> = {
+    new (...args: any[]): T;
+    prototype: T;
+};
+export interface SlotPresenceObservingInterface {
+    slotContentIsPresent: boolean;
+    getSlotContentPresence(selector: string): boolean;
+    managePresenceObservedSlot(): void;
+}
+export declare function ObserveSlotPresence<T extends Constructor<ReactiveElement>>(constructor: T, lightDomSelector: string | string[]): T & Constructor<SlotPresenceObservingInterface>;
+export {};

package/utils/observe-slot-text.d.ts

@@ -0,0 +1,11 @@
+import { ReactiveElement } from 'lit';
+type Constructor<T = Record<string, unknown>> = {
+    new (...args: any[]): T;
+    prototype: T;
+};
+export interface SlotTextObservingInterface {
+    slotHasContent: boolean;
+    manageTextObservedSlot(): void;
+}
+export declare function ObserveSlotText<T extends Constructor<ReactiveElement>>(constructor: T, slotName?: string, excludedSelectors?: string[]): T & Constructor<SlotTextObservingInterface>;
+export {};

package/utils/platform.d.ts

@@ -0,0 +1,10 @@
+export declare function isMac(): boolean;
+export declare function isIPhone(): boolean;
+export declare function isIPad(): boolean;
+export declare function isIOS(): boolean;
+export declare function isAppleDevice(): boolean;
+export declare function isChrome(): boolean;
+export declare function isWebKit(): boolean;
+export declare function isSeamonkey(): boolean;
+export declare function isFirefox(): boolean;
+export declare function isAndroid(): boolean;

package/utils/random-id.d.ts

@@ -0,0 +1 @@
+export declare function randomID(): string;

package/utils/reactive-controllers/color.d.ts

@@ -0,0 +1,54 @@
+import { HSL, HSLA, HSV, HSVA, RGB, RGBA, TinyColor } from '@ctrl/tinycolor';
+import type { ReactiveElement } from 'lit';
+export type ColorValue = string | number | TinyColor | HSVA | HSV | RGB | RGBA | HSL | HSLA;
+export declare const extractHueAndSaturationRegExp: RegExp;
+export declare const replaceHueAndSaturationRegExp: RegExp;
+export declare const replaceHueRegExp: RegExp;
+export declare class ColorController {
+    protected host: ReactiveElement;
+    protected applyColorToState: ({ h, s, v }: {
+        h: number;
+        s: number;
+        v: number;
+        a: number;
+    }) => void;
+    protected extractColorFromState: (controller: ColorController) => ColorValue;
+    protected setColorProcess(currentColor: TinyColor, nextColor: ColorValue, format: string, isString: boolean): void;
+    protected setColorMaintainHue(currentColor: TinyColor, nextColor: ColorValue, format: string, isString: boolean): void;
+    protected setColorMaintainSaturation(currentColor: TinyColor, nextColor: ColorValue, format: string, isString: boolean): void;
+    protected maintains: 'hue' | 'saturation';
+    private saturation;
+    constructor(host: ReactiveElement, { applyColorToState, extractColorFromState, maintains }: {
+        applyColorToState({ h, s, v, a }: {
+            h: number;
+            s: number;
+            v: number;
+            a: number;
+        }): void;
+        extractColorFromState(controller: ColorController): ColorValue;
+        maintains?: 'hue' | 'saturation';
+    });
+    applyColorFromState(): void;
+    get hue(): number;
+    set hue(value: number);
+    get opacity(): number;
+    set opacity(value: number);
+    private _hue;
+    private _opacity;
+    protected getColorProcesses: Record<string, (color: TinyColor, isString: boolean) => ColorValue>;
+    get value(): ColorValue;
+    get color(): ColorValue;
+    set color(color: ColorValue);
+    private _color;
+    getColor(format: string): ColorValue;
+    setColor(color: TinyColor): void;
+    getHslString(): string;
+    private _previousColor;
+    savePreviousColor(): void;
+    restorePreviousColor(): void;
+    _format: {
+        format: string;
+        isString: boolean;
+    };
+}
+export { type HSL, type HSLA, type HSV, type HSVA, type RGB, type RGBA, type TinyColor } from '@ctrl/tinycolor';