@luzmo/lucero 0.0.39 → 1.0.1-alpha.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luzmo/lucero",
-  "version": "0.0.39",
+  "version": "1.0.1-alpha.0",
   "homepage": "https://luzmo.com",
   "description": "Lucero - The design system for Luzmo",
   "type": "module",

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

@@ -0,0 +1,224 @@
+import Color, { type ColorObject, type ColorTypes as DefaultColorTypes } from 'colorjs.io';
+import ColorSpace from 'colorjs.io';
+import type { ReactiveElement } from 'lit';
+/**
+ * Represents various color types that can be used in the application.
+ *
+ * This type can be one of the following:
+ * - `DefaultColorTypes`: A predefined set of color types.
+ * - An object representing an RGBA color with properties:
+ *
+ * - `r`: Red component, can be a number or string.
+ * - `g`: Green component, can be a number or string.
+ * - `b`: Blue component, can be a number or string.
+ * - `a` (optional): Alpha component, can be a number or string.
+ *
+ * - An object representing an HSLA color with properties:
+ *
+ * - `h`: Hue component, can be a number or string.
+ * - `s`: Saturation component, can be a number or string.
+ * - `l`: Lightness component, can be a number or string.
+ * - `a` (optional): Alpha component, can be a number or string.
+ *
+ * - An object representing an HSVA color with properties:
+ *
+ * - `h`: Hue component, can be a number or string.
+ * - `s`: Saturation component, can be a number or string.
+ * - `v`: Value component, can be a number or string.
+ * - `a` (optional): Alpha component, can be a number or string.
+ */
+type ColorTypes = DefaultColorTypes | {
+    r: number | string;
+    g: number | string;
+    b: number | string;
+    a?: number | string;
+} | {
+    h: number | string;
+    s: number | string;
+    l: number | string;
+    a?: number | string;
+} | {
+    h: number | string;
+    s: number | string;
+    v: number | string;
+    a?: number | string;
+};
+export type { ColorTypes };
+type ColorValidationResult = {
+    spaceId: string | null;
+    coords: number[];
+    isValid: boolean;
+    alpha: number;
+};
+/**
+ * The `ColorController` class is responsible for managing and validating color values
+ * in various color spaces (RGB, HSL, HSV, Hex). It provides methods to set, get, and
+ * validate colors, as well as convert between different color formats.
+ *
+ * @class
+ * @property {Color} color - Gets or sets the current color value.
+ * @property {ColorTypes} colorValue - Gets the color value in various formats based on the original color input.
+ * @property {number} hue - Gets or sets the hue value of the current color.
+ *
+ * @method validateColorString(color: string): ColorValidationResult - Validates a color string and returns the validation result.
+ * @method getColor(format: string | ColorSpace): ColorObject - Converts the current color to the specified format.
+ * @method getHslString(): string - Returns the current color in HSL string format.
+ * @method savePreviousColor(): void - Saves the current color as the previous color.
+ * @method restorePreviousColor(): void - Restores the previous color.
+ *
+ * @constructor
+ * @param {ReactiveElement} host - The host element that uses this controller.
+ * @param {Object} [options] - Optional configuration options.
+ * @param {string} [options.manageAs] - Specifies the color space to manage the color as.
+ */
+export declare class ColorController {
+    get color(): Color;
+    /**
+     * Validates a color string and returns a result indicating the color space,
+     * coordinates, alpha value, and whether the color is valid.
+     *
+     * @param color - The color string to validate. Supported formats include:
+     *  - RGB: `rgb(r, g, b)`, `rgba(r, g, b, a)`, `rgb r g b`, `rgba r g b a`
+     *  - HSL: `hsl(h, s, l)`, `hsla(h, s, l, a)`, `hsl h s l`, `hsla h s l a`
+     *  - HSV: `hsv(h, s, v)`, `hsva(h, s, v, a)`, `hsv h s v`, `hsva h s v a`
+     *  - HEX: `#rgb`, `#rgba`, `#rrggbb`, `#rrggbbaa`
+     *
+     * @returns An object containing the following properties:
+     *  - `spaceId`: The color space identifier (`'srgb'`, `'hsl'`, or `'hsv'`).
+     *  - `coords`: An array of numeric values representing the color coordinates.
+     *  - `alpha`: The alpha value of the color (0 to 1).
+     *  - `isValid`: A boolean indicating whether the color string is valid.
+     */
+    validateColorString(color: string): ColorValidationResult;
+    /**
+     * Represents the color state of the component.
+     * Initialized with an HSV color model with hue 0, saturation 100, and value 100, and an alpha value of 1.
+     *
+     * @private
+     * @type {Color}
+     */
+    private _color;
+    /**
+     * Represents the original color value provided by the user.
+     *
+     * @private
+     * @type {ColorTypes}
+     */
+    private _colorOrigin;
+    /**
+     * Gets the original color value provided by the user.
+     *
+     * @returns The original color value.
+     */
+    get colorOrigin(): ColorTypes;
+    /**
+     * Sets the original color value provided by the user.
+     *
+     * @param colorOrigin - The original color value to set.
+     */
+    set colorOrigin(colorOrigin: ColorTypes);
+    /**
+     * An optional string property that specifies how the color should be managed(its value is the name of color space in which color object will be managed).
+     * This property can be used to define a specific management strategy or identifier.
+     */
+    private manageAs?;
+    /**
+     * Stores the previous color value.
+     * This is used to keep track of the color before any changes are made.
+     *
+     * @private
+     */
+    private _previousColor;
+    /**
+     * Sets the color value for the controller. The color can be provided in various formats:
+     * - A string representing a color name, hex code, or other color format.
+     * - An instance of the `Color` class.
+     * - An object containing color properties such as `h`, `s`, `l`, `v`, `r`, `g`, `b`, and optionally `a`.
+     *
+     * The method validates and parses the input color, converting it to a `Color` instance.
+     * If the color is invalid, it attempts to parse it as a hex code or returns without setting a new color.
+     *
+     * @param color - The color value to set. It can be a string, an instance of `Color`, or an object with color properties.
+     */
+    set color(color: ColorTypes);
+    /**
+     * Gets the color value in various formats based on the original color input.
+     *
+     * The method determines the color space of the original color input and converts
+     * the color to the appropriate format. The supported color spaces are:
+     * - HSV (Hue, Saturation, Value)
+     * - HSL (Hue, Saturation, Lightness)
+     * - Hexadecimal (with or without alpha)
+     * - RGB (Red, Green, Blue) with optional alpha
+     *
+     * @returns The color value in the appropriate format.
+     *
+     * The method handles the following cases:
+     * - If the original color input is a string, it checks the prefix to determine the color space.
+     * - If the original color input is an object, it checks the properties to determine the color space.
+     * - If the original color input is not provided, it defaults to the current color space of the color object.
+     *
+     * The returned color value can be in one of the following formats:
+     * - `hsv(h, s%, v%)` or `hsva(h, s%, v%, a)`
+     * - `hsl(h, s%, l%)` or `hsla(h, s%, l%, a)`
+     * - `#rrggbb` or `#rrggbbaa`
+     * - `rgb(r, g, b)` or `rgba(r, g, b, a)`
+     * - `{ h, s, v, a }` for HSV object
+     * - `{ h, s, l, a }` for HSL object
+     * - `{ r, g, b, a }` for RGB object
+     */
+    get colorValue(): ColorTypes;
+    protected host: ReactiveElement;
+    /**
+     * Gets the hue value of the current color in HSL format.
+     *
+     * @returns The hue value as a number.
+     */
+    get hue(): number;
+    /**
+     * Sets the hue value of the color and requests an update from the host.
+     *
+     * @param hue - The hue value to set, represented as a number.
+     */
+    set hue(hue: number);
+    /**
+     * Creates an instance of ColorController.
+     *
+     * @param host - The ReactiveElement that this controller is associated with.
+     * @param options - An object containing optional parameters.
+     * @param options.manageAs - A string to manage the controller as a specific type.
+     */
+    constructor(host: ReactiveElement, { manageAs }?: {
+        manageAs?: string;
+    });
+    /**
+     * Converts the current color to the specified format.
+     *
+     * @param format - The desired color format. It can be a string representing one of the valid formats
+     * ('srgb', 'hsva', 'hsv', 'hsl', 'hsla') or a ColorSpace object.
+     * @returns The color object in the specified format.
+     * @throws Will throw an error if the provided format is not a valid string format.
+     */
+    getColor(format: string | ColorSpace): ColorObject;
+    /**
+     * Converts the current color to an HSL string representation.
+     *
+     * @returns The HSL string representation of the current color.
+     */
+    getHslString(): string;
+    /**
+     * Saves the current color state by cloning the current color and storing it
+     * as the previous color. This allows for the ability to revert to the previous
+     * color state if needed.
+     *
+     * @returns
+     */
+    savePreviousColor(): void;
+    /**
+     * Restores the color to the previously saved color value.
+     *
+     * This method sets the current color (`_color`) to the previously stored color (`_previousColor`).
+     */
+    restorePreviousColor(): void;
+}
+export { type default as Color } from 'colorjs.io';

package/components/color-Bg3tYsAQ.js

@@ -1,178 +0,0 @@
-/*! * 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.
- * */
-import { T as c } from "./index-C1chwzNp.js";
-const _ = /^hs[v|l]a?\s?\((\d{1,3}\.?\d*?),?\s?(\d{1,3})/, f = /(^hs[v|l]a?\s?\()\d{1,3}\.?\d*?(,?\s?)\d{1,3}/, S = /(^hs[v|l]a?\()\d{1,3}/, g = (p, s) => s ? p.toHexString() : p.toHex();
-class C {
-  constructor(s, {
-    applyColorToState: i,
-    extractColorFromState: e,
-    maintains: h
-  }) {
-    this.maintains = "hue", this._hue = 0, this._opacity = 1, this.getColorProcesses = {
-      rgb: (t, o) => o ? t.toRgbString() : t.toRgb(),
-      prgb: (t, o) => o ? t.toPercentageRgbString() : t.toPercentageRgb(),
-      hex8: (t, o) => o ? t.toHex8String() : t.toHex8(),
-      name: (t) => t.toName() || t.toRgbString(),
-      hsl: (t, o) => {
-        if (this.maintains === "hue") {
-          if (o)
-            return t.toHslString().replace(S, `$1${this.hue}`);
-          const { s: a, l: u, a: v } = t.toHsl();
-          return { h: this.hue, s: a, l: u, a: v };
-        }
-        if (o)
-          return t.toHslString().replace(
-            f,
-            `$1${this.hue}$2${this.saturation}`
-          );
-        const { s: r, l: n, a: l } = t.toHsl();
-        return { h: this.hue, s: r, l: n, a: l };
-      },
-      hsv: (t, o) => {
-        if (this.maintains === "hue") {
-          if (o)
-            return t.toHsvString().replace(S, `$1${this.hue}`);
-          const { s: a, v: u, a: v } = t.toHsv();
-          return { h: this.hue, s: a, v: u, a: v };
-        }
-        if (o)
-          return t.toHsvString().replace(
-            f,
-            `$1${this.hue}$2${this.saturation}`
-          );
-        const { s: r, v: n, a: l } = t.toHsv();
-        return { h: this.hue, s: r, v: n, a: l };
-      },
-      hex: g,
-      hex3: g,
-      hex4: g,
-      hex6: g
-    }, this._color = new c({ h: 0, s: 1, v: 1 }), this._previousColor = new c({ h: 0, s: 1, v: 1 }), this._format = {
-      format: "",
-      isString: !1
-    }, this.host = s, this.applyColorToState = i, this.extractColorFromState = e, this.maintains = h || this.maintains;
-  }
-  setColorProcess(s, i, e, h) {
-    this.maintains === "hue" ? this.setColorMaintainHue(s, i, e, h) : this.maintains === "saturation" && this.setColorMaintainSaturation(
-      s,
-      i,
-      e,
-      h
-    );
-  }
-  setColorMaintainHue(s, i, e, h) {
-    const { h: t, s: o, v: r, a: n } = this._color.toHsv();
-    let l;
-    if (h && e.startsWith("hs")) {
-      const a = _.exec(i);
-      if (a !== null) {
-        const [, u] = a;
-        l = Number(u);
-      }
-    } else if (!h && e.startsWith("hs")) {
-      const a = s.originalInput;
-      l = Object.values(a)[0];
-    }
-    this.hue = l || t, this.opacity = n ?? 1, this.applyColorToState({ h: t, s: o, v: r, a: n });
-  }
-  setColorMaintainSaturation(s, i, e, h) {
-    const { a: t } = this._color.toHsv();
-    if (h && e.startsWith("hs")) {
-      const o = _.exec(i);
-      if (o !== null) {
-        const [, r, n] = o;
-        this.hue = Number(r), this.saturation = Number(n);
-      }
-    } else if (!h && e.startsWith("hs")) {
-      const o = s.originalInput, r = Object.values(o);
-      this.hue = r[0], this.saturation = r[1];
-    } else {
-      const { h: o } = s.toHsv();
-      this.hue = o;
-    }
-    this.opacity = t ?? 1, this.applyColorToState(s.toHsv());
-  }
-  applyColorFromState() {
-    this._color = new c(this.extractColorFromState(this));
-  }
-  get hue() {
-    return this._hue;
-  }
-  set hue(s) {
-    const i = Math.min(360, Math.max(0, s));
-    if (i === this.hue)
-      return;
-    const e = this.hue, { s: h, v: t, a: o } = this._color.toHsv();
-    this._color = new c({ h: i, s: h, v: t, a: o }), this._hue = i, this.host.requestUpdate("hue", e);
-  }
-  get opacity() {
-    return this._opacity;
-  }
-  set opacity(s) {
-    const i = Math.min(1, Math.max(0, s));
-    if (i === this.opacity)
-      return;
-    const e = this.opacity, { h, s: t, v: o } = this._color.toHsv();
-    this._color = new c({ h, s: t, v: o, a: i }), this._opacity = i, this.host.requestUpdate("opacity", e);
-  }
-  /* c8 ignore next 3 */
-  get value() {
-    return this.color;
-  }
-  get color() {
-    return this.getColorProcesses[this._format.format || "hex"](
-      this._color,
-      this._format.isString
-    );
-  }
-  set color(s) {
-    if (s === this.color)
-      return;
-    const i = this._color;
-    this._color = new c(s);
-    const e = this._color.format;
-    let h = typeof s == "string" || s instanceof String;
-    e.startsWith("hex") && (h = s.startsWith("#")), this._format = {
-      format: e,
-      isString: h
-    }, this.setColorProcess(this._color, s, e, h), this.host.requestUpdate("color", i);
-  }
-  getColor(s) {
-    const i = {
-      hsl: "toHsl"
-    };
-    return this._color[i[s]]();
-  }
-  setColor(s) {
-    this._color = s;
-    const i = typeof this._color.originalInput == "string" || this._color.originalInput instanceof String;
-    this.setColorProcess(this._color, s, this._color.format, i);
-  }
-  getHslString() {
-    return this._color.toHslString();
-  }
-  savePreviousColor() {
-    this._previousColor = this._color.clone();
-  }
-  restorePreviousColor() {
-    this.setColor(this._previousColor);
-  }
-}
-export {
-  C
-};

package/components/color-DphK4hwx.cjs

@@ -1,18 +0,0 @@
-/*! * 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";const c=require("./index-DCKCHDTt.cjs"),_=/^hs[v|l]a?\s?\((\d{1,3}\.?\d*?),?\s?(\d{1,3})/,f=/(^hs[v|l]a?\s?\()\d{1,3}\.?\d*?(,?\s?)\d{1,3}/,S=/(^hs[v|l]a?\()\d{1,3}/,g=(p,s)=>s?p.toHexString():p.toHex();class H{constructor(s,{applyColorToState:i,extractColorFromState:e,maintains:r}){this.maintains="hue",this._hue=0,this._opacity=1,this.getColorProcesses={rgb:(t,o)=>o?t.toRgbString():t.toRgb(),prgb:(t,o)=>o?t.toPercentageRgbString():t.toPercentageRgb(),hex8:(t,o)=>o?t.toHex8String():t.toHex8(),name:t=>t.toName()||t.toRgbString(),hsl:(t,o)=>{if(this.maintains==="hue"){if(o)return t.toHslString().replace(S,`$1${this.hue}`);const{s:n,l:u,a:v}=t.toHsl();return{h:this.hue,s:n,l:u,a:v}}if(o)return t.toHslString().replace(f,`$1${this.hue}$2${this.saturation}`);const{s:h,l:a,a:l}=t.toHsl();return{h:this.hue,s:h,l:a,a:l}},hsv:(t,o)=>{if(this.maintains==="hue"){if(o)return t.toHsvString().replace(S,`$1${this.hue}`);const{s:n,v:u,a:v}=t.toHsv();return{h:this.hue,s:n,v:u,a:v}}if(o)return t.toHsvString().replace(f,`$1${this.hue}$2${this.saturation}`);const{s:h,v:a,a:l}=t.toHsv();return{h:this.hue,s:h,v:a,a:l}},hex:g,hex3:g,hex4:g,hex6:g},this._color=new c.TinyColor({h:0,s:1,v:1}),this._previousColor=new c.TinyColor({h:0,s:1,v:1}),this._format={format:"",isString:!1},this.host=s,this.applyColorToState=i,this.extractColorFromState=e,this.maintains=r||this.maintains}setColorProcess(s,i,e,r){this.maintains==="hue"?this.setColorMaintainHue(s,i,e,r):this.maintains==="saturation"&&this.setColorMaintainSaturation(s,i,e,r)}setColorMaintainHue(s,i,e,r){const{h:t,s:o,v:h,a}=this._color.toHsv();let l;if(r&&e.startsWith("hs")){const n=_.exec(i);if(n!==null){const[,u]=n;l=Number(u)}}else if(!r&&e.startsWith("hs")){const n=s.originalInput;l=Object.values(n)[0]}this.hue=l||t,this.opacity=a??1,this.applyColorToState({h:t,s:o,v:h,a})}setColorMaintainSaturation(s,i,e,r){const{a:t}=this._color.toHsv();if(r&&e.startsWith("hs")){const o=_.exec(i);if(o!==null){const[,h,a]=o;this.hue=Number(h),this.saturation=Number(a)}}else if(!r&&e.startsWith("hs")){const o=s.originalInput,h=Object.values(o);this.hue=h[0],this.saturation=h[1]}else{const{h:o}=s.toHsv();this.hue=o}this.opacity=t??1,this.applyColorToState(s.toHsv())}applyColorFromState(){this._color=new c.TinyColor(this.extractColorFromState(this))}get hue(){return this._hue}set hue(s){const i=Math.min(360,Math.max(0,s));if(i===this.hue)return;const e=this.hue,{s:r,v:t,a:o}=this._color.toHsv();this._color=new c.TinyColor({h:i,s:r,v:t,a:o}),this._hue=i,this.host.requestUpdate("hue",e)}get opacity(){return this._opacity}set opacity(s){const i=Math.min(1,Math.max(0,s));if(i===this.opacity)return;const e=this.opacity,{h:r,s:t,v:o}=this._color.toHsv();this._color=new c.TinyColor({h:r,s:t,v:o,a:i}),this._opacity=i,this.host.requestUpdate("opacity",e)}get value(){return this.color}get color(){return this.getColorProcesses[this._format.format||"hex"](this._color,this._format.isString)}set color(s){if(s===this.color)return;const i=this._color;this._color=new c.TinyColor(s);const e=this._color.format;let r=typeof s=="string"||s instanceof String;e.startsWith("hex")&&(r=s.startsWith("#")),this._format={format:e,isString:r},this.setColorProcess(this._color,s,e,r),this.host.requestUpdate("color",i)}getColor(s){const i={hsl:"toHsl"};return this._color[i[s]]()}setColor(s){this._color=s;const i=typeof this._color.originalInput=="string"||this._color.originalInput instanceof String;this.setColorProcess(this._color,s,this._color.format,i)}getHslString(){return this._color.toHslString()}savePreviousColor(){this._previousColor=this._color.clone()}restorePreviousColor(){this.setColor(this._previousColor)}}exports.ColorController=H;