@juspay/svelte-ui-components 2.14.0 → 2.18.0

package/dist/types.d.ts

@@ -5,7 +5,6 @@ import type { FlyParams } from 'svelte/transition';
  */
 export type InputDataType = 'text' | 'tel' | 'password' | 'email' | 'number';
 export type ModalTransition = 'IN' | 'ALL';
-export type AutoCompleteType = 'tel' | 'name' | 'email' | 'one-time-code' | 'postal-code' | 'street-address' | 'on' | 'address-level1';
 /**
  * @name CustomValidator
  * @description Function type for taking input parameter and returning a boolean denoting if the value is valid or not
@@ -26,3 +25,18 @@ export type FlyAnimationConfig = {
     in: FlyParams;
     out: FlyParams;
 };
+export type Rgb = {
+    r: number;
+    g: number;
+    b: number;
+};
+export type Hsv = {
+    h: number;
+    s: number;
+    v: number;
+};
+export type Hsl = {
+    h: number;
+    s: number;
+    l: number;
+};

package/dist/utils.d.ts

@@ -1,4 +1,4 @@
-import type { CustomValidator, InputDataType, ValidationState } from './types';
+import type { CustomValidator, Hsv, Hsl, InputDataType, Rgb, ValidationState } from './types';
 /**
  * @description A common function to validate value provided inside the input component
  * @param inputValue String value coming from input field
@@ -16,4 +16,13 @@ export declare function validateInput(inputValue: string, dataType: InputDataTyp
  */
 export declare function getStorageItem(key: string): string | null;
 export declare function setStorageItem(key: string, value: string): void;
+export declare function hexToRgb(hex: string): Rgb | null;
+export declare function rgbToHsv(r: number, g: number, b: number): Hsv;
+export declare function hsvToRgb(h: number, s: number, v: number): Rgb;
+export declare function hsvToHex(h: number, s: number, v: number): string;
+export declare function hexToHsv(hex: string): Hsv | null;
+export declare function hsvToHsl(h: number, s: number, v: number): Hsl;
+export declare function hslToHsv(hDeg: number, sPct: number, lPct: number): Hsv;
+export declare function isValidHex(hex: string): boolean;
+export declare function clampInt(v: string, min: number, max: number): number;
 export declare function createDebouncer(delay: number): <T extends unknown[]>(callback: (...args: T) => void, ...args: T) => void;

package/dist/utils.js

@@ -164,6 +164,124 @@ export function setStorageItem(key, value) {
         // localStorage unavailable (SSR, private browsing, storage full)
     }
 }
+// ── Color conversions ───────────────────────────────────────────
+const HEX_COLOR_PATTERN = /^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i;
+export function hexToRgb(hex) {
+    const m = hex.match(HEX_COLOR_PATTERN);
+    if (m === null) {
+        return null;
+    }
+    const rStr = m.at(1);
+    const gStr = m.at(2);
+    const bStr = m.at(3);
+    if (typeof rStr !== 'string' || typeof gStr !== 'string' || typeof bStr !== 'string') {
+        return null;
+    }
+    return { r: parseInt(rStr, 16), g: parseInt(gStr, 16), b: parseInt(bStr, 16) };
+}
+export function rgbToHsv(r, g, b) {
+    r /= 255;
+    g /= 255;
+    b /= 255;
+    const max = Math.max(r, g, b);
+    const min = Math.min(r, g, b);
+    const d = max - min;
+    let h = 0;
+    const s = max === 0 ? 0 : d / max;
+    const v = max;
+    if (d !== 0) {
+        if (max === r) {
+            h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
+        }
+        else if (max === g) {
+            h = ((b - r) / d + 2) / 6;
+        }
+        else {
+            h = ((r - g) / d + 4) / 6;
+        }
+    }
+    return { h, s, v };
+}
+export function hsvToRgb(h, s, v) {
+    const i = Math.floor(h * 6);
+    const f = h * 6 - i;
+    const p = v * (1 - s);
+    const q = v * (1 - f * s);
+    const t = v * (1 - (1 - f) * s);
+    let r, g, b;
+    switch (i % 6) {
+        case 0:
+            r = v;
+            g = t;
+            b = p;
+            break;
+        case 1:
+            r = q;
+            g = v;
+            b = p;
+            break;
+        case 2:
+            r = p;
+            g = v;
+            b = t;
+            break;
+        case 3:
+            r = p;
+            g = q;
+            b = v;
+            break;
+        case 4:
+            r = t;
+            g = p;
+            b = v;
+            break;
+        default:
+            r = v;
+            g = p;
+            b = q;
+            break;
+    }
+    return { r: Math.round(r * 255), g: Math.round(g * 255), b: Math.round(b * 255) };
+}
+export function hsvToHex(h, s, v) {
+    const rgb = hsvToRgb(h, s, v);
+    const toHex = (n) => n.toString(16).padStart(2, '0');
+    return `#${toHex(rgb.r)}${toHex(rgb.g)}${toHex(rgb.b)}`;
+}
+export function hexToHsv(hex) {
+    const rgb = hexToRgb(hex);
+    if (rgb === null) {
+        return null;
+    }
+    return rgbToHsv(rgb.r, rgb.g, rgb.b);
+}
+export function hsvToHsl(h, s, v) {
+    const l = v * (1 - s / 2);
+    let sl = 0;
+    if (l > 0 && l < 1) {
+        sl = (v - l) / Math.min(l, 1 - l);
+    }
+    return { h: Math.round(h * 360), s: Math.round(sl * 100), l: Math.round(l * 100) };
+}
+export function hslToHsv(hDeg, sPct, lPct) {
+    const h = hDeg / 360;
+    const sl = sPct / 100;
+    const l = lPct / 100;
+    const v = l + sl * Math.min(l, 1 - l);
+    const sv = v === 0 ? 0 : 2 * (1 - l / v);
+    return { h, s: sv, v };
+}
+export function isValidHex(hex) {
+    return HEX_COLOR_PATTERN.test(hex);
+}
+export function clampInt(v, min, max) {
+    const n = parseInt(v, 10);
+    if (Number.isNaN(n)) {
+        return min;
+    }
+    return Math.max(min, Math.min(max, n));
+}
+// ── Misc ────────────────────────────────────────────────────────
 export function createDebouncer(delay) {
     let lastCallTime = 0;
     return function (callback, ...args) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@juspay/svelte-ui-components",
-  "version": "2.14.0",
+  "version": "2.18.0",
   "description": "A themeable Svelte 5 UI component library with CSS custom property driven styling",
   "keywords": [
     "svelte",