polymorph-ui-components 0.1.0

package/dist/index.js

@@ -0,0 +1,55 @@
+export { default as Modal } from './Modal/Modal.svelte';
+export { default as Button } from './Button/Button.svelte';
+export { default as Input } from './Input/Input.svelte';
+export { default as InputButton } from './InputButton/InputButton.svelte';
+export { default as ListItem } from './ListItem/ListItem.svelte';
+export { default as Loader } from './Loader/Loader.svelte';
+export { default as Toolbar } from './Toolbar/Toolbar.svelte';
+export { default as Icon } from './Icon/Icon.svelte';
+export { default as Select } from './Select/Select.svelte';
+export { default as ModalAnimation } from './Animations/ModalAnimation.svelte';
+export { default as OverlayAnimation } from './Animations/OverlayAnimation.svelte';
+export { default as Carousel } from './Carousel/Carousel.svelte';
+export { default as Badge } from './Badge/Badge.svelte';
+export { default as Banner } from './Banner/Banner.svelte';
+export { default as Toggle } from './Toggle/Toggle.svelte';
+export { default as Accordion } from './Accordion/Accordion.svelte';
+export { default as CheckListItem } from './CheckListItem/CheckListItem.svelte';
+export { default as Table } from './Table/Table.svelte';
+export { default as Stepper } from './Stepper/Stepper.svelte';
+export { default as Step } from './Stepper/Step.svelte';
+export { default as Toast } from './Toast/Toast.svelte';
+export { default as GridItem } from './GridItem/GridItem.svelte';
+export { default as IconStack } from './IconStack/IconStack.svelte';
+export { default as Img } from './Img/Img.svelte';
+export { default as Checkbox } from './Checkbox/Checkbox.svelte';
+export { default as Radio } from './Radio/Radio.svelte';
+export { default as Avatar } from './Avatar/Avatar.svelte';
+export { default as Tabs } from './Tabs/Tabs.svelte';
+export { default as Choicebox } from './Choicebox/Choicebox.svelte';
+export { default as Slider } from './Slider/Slider.svelte';
+export { default as Tooltip } from './Tooltip/Tooltip.svelte';
+export { default as Shimmer } from './Shimmer/Shimmer.svelte';
+export { default as Progress } from './Progress/Progress.svelte';
+export { default as Pill } from './Pill/Pill.svelte';
+export { default as Pagination } from './Pagination/Pagination.svelte';
+export { default as Snippet } from './Snippet/Snippet.svelte';
+export { default as Gauge } from './Gauge/Gauge.svelte';
+export { default as SplitButton } from './SplitButton/SplitButton.svelte';
+export { default as KeyboardInput } from './KeyboardInput/KeyboardInput.svelte';
+export { default as LoadingDots } from './LoadingDots/LoadingDots.svelte';
+export { default as Menu } from './Menu/Menu.svelte';
+export { default as Sheet } from './Sheet/Sheet.svelte';
+export { default as Scroller } from './Scroller/Scroller.svelte';
+export { default as CommandMenu } from './CommandMenu/CommandMenu.svelte';
+export { default as ContextMenu } from './ContextMenu/ContextMenu.svelte';
+export { default as Calendar } from './Calendar/Calendar.svelte';
+export { default as RelativeTime } from './RelativeTime/RelativeTime.svelte';
+export { default as ThemeSwitcher } from './ThemeSwitcher/ThemeSwitcher.svelte';
+export { default as Book } from './Book/Book.svelte';
+export { default as Browser } from './Browser/Browser.svelte';
+export { default as Phone } from './Phone/Phone.svelte';
+export { default as Combobox } from './Combobox/Combobox.svelte';
+export { default as ColorPicker } from './ColorPicker/ColorPicker.svelte';
+export { default as SplitInput } from './SplitInput/SplitInput.svelte';
+export { validateInput } from './utils';

package/dist/types.d.ts

@@ -0,0 +1,42 @@
+import type { FlyParams } from 'svelte/transition';
+/**
+ * @name InputDataType
+ * @description Different types of input data which can be passed to the Input Component
+ */
+export type InputDataType = 'text' | 'tel' | 'password' | 'email' | 'number';
+export type ModalTransition = 'IN' | 'ALL';
+/**
+ * @name CustomValidator
+ * @description Function type for taking input parameter and returning a boolean denoting if the value is valid or not
+ */
+export type CustomValidator = (inputValue: string, currentValidationState: ValidationState) => ValidationState;
+export type TextTransformer = (text: string) => string;
+/**
+ * @description Type Map for Possible length values that can be passed to components
+ */
+/**
+ * @description Type Map for All possible output of an Input Filed Validation
+ */
+export type ValidationState = 'Valid' | 'InProgress' | 'Invalid';
+/**
+ * @description Type for animation configuration
+ */
+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/types.js

@@ -0,0 +1 @@
+export {};

package/dist/utils.d.ts

@@ -0,0 +1,28 @@
+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
+ * @param dataType Datatype of the value being entered in the input component
+ * @param validPattern Regular expression which is supposed to be applied on the input string
+ * @param inProgressPattern Regular expression which is supposed to be applied on the input string while input is in progress
+ * @param customValidators Array of customer validator functions
+ * @returns ValidationState : InProgress | Valid | Invalid
+ */
+export declare function validateInput(inputValue: string, dataType: InputDataType, validPattern: RegExp | null, inProgressPattern: RegExp | null, customValidators: CustomValidator[]): ValidationState;
+/**
+ * @description Creates a debouncer function that delays invoking the provided callback until a specified delay period has elapsed since the last invocation.
+ * @param delay The delay period in milliseconds before invoking the callback.
+ * @returns A debouncer function that accepts a callback and delays its invocation based on the specified delay.
+ */
+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

@@ -0,0 +1,294 @@
+/**
+ * @description A common function to validate value provided inside the input component
+ * @param inputValue String value coming from input field
+ * @param dataType Datatype of the value being entered in the input component
+ * @param validPattern Regular expression which is supposed to be applied on the input string
+ * @param inProgressPattern Regular expression which is supposed to be applied on the input string while input is in progress
+ * @param customValidators Array of customer validator functions
+ * @returns ValidationState : InProgress | Valid | Invalid
+ */
+export function validateInput(inputValue, dataType, validPattern, inProgressPattern, customValidators) {
+    let validationResult = 'Valid';
+    switch (dataType) {
+        case 'email':
+            validationResult = validateEmailInput(inputValue);
+            break;
+        case 'tel':
+            validationResult =
+                validPattern === null
+                    ? validatePhoneNumber(inputValue)
+                    : validateTextWithPattern(inputValue, validPattern, inProgressPattern);
+            break;
+        case 'password':
+            validationResult = validatePassword(inputValue, validPattern, inProgressPattern);
+            break;
+        case 'text':
+            validationResult = validateTextWithPattern(inputValue, validPattern, inProgressPattern);
+            break;
+    }
+    customValidators.forEach((validator) => {
+        const currentResult = validator(inputValue, validationResult);
+        if (currentResult === 'Invalid') {
+            validationResult = 'Invalid';
+        }
+        else if (currentResult === 'InProgress') {
+            validationResult = 'InProgress';
+        }
+        else {
+            validationResult =
+                validationResult === 'Valid' && currentResult === 'Valid' ? 'Valid' : validationResult;
+        }
+    });
+    return validationResult;
+}
+/**
+ * @description Validates input string against passed RegExp
+ * @param inputValue string
+ * @param validationPattern RegExp for valid input
+ * @param inProgressPattern RegExp for inprogress input
+ * @returns ValidationState
+ */
+function validateTextWithPattern(inputValue, validationPattern, inProgressPattern) {
+    if (validationPattern !== null) {
+        if (validationPattern.test(inputValue)) {
+            return 'Valid';
+        }
+        else if ((inProgressPattern !== null && inProgressPattern.test(inputValue)) ||
+            inputValue.length === 0) {
+            return 'InProgress';
+        }
+        else {
+            return 'Invalid';
+        }
+    }
+    return 'Valid';
+}
+/**
+ * @description Validates password string against passed RegExp
+ * @param password string
+ * @param validationPattern RegExp for valid input
+ * @param inProgressPattern RegExp for inprogress input
+ * @returns ValidationState
+ */
+function validatePassword(password, validationPattern, inProgressPattern) {
+    if (validationPattern !== null) {
+        if (validationPattern.test(password)) {
+            return 'Valid';
+        }
+        else if (inProgressPattern !== null &&
+            inProgressPattern.test(password) &&
+            password.length === 0) {
+            return 'InProgress';
+        }
+        else {
+            return 'Invalid';
+        }
+    }
+    return 'Valid';
+}
+/**
+ * @description Validates an email input based upon RF 5322 Email format
+ * @param emailId String
+ * @returns ValidationState
+ */
+function validateEmailInput(emailId) {
+    try {
+        /**
+         * @description Using RFC 5322 Format for validation
+         * @tutorial https://www.regextester.com/115911
+         * @tutorial https://emailregex.com/
+         * @tutorial https://stackoverflow.com/questions/42982005/email-address-regular-expression-rfc-5322-passed-in-to-match-does-not-work
+         * @tutorial https://www.regular-expressions.info/email.html
+         */
+        const validPattern = new RegExp(/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/);
+        const inProgressPattern = new RegExp(/[^ ]{1,}[\w0-9.,_,@]{0,}/);
+        if (validPattern.test(emailId)) {
+            return 'Valid';
+        }
+        else if (inProgressPattern.test(emailId) || emailId.length === 0) {
+            return 'InProgress';
+        }
+        else {
+            return 'Invalid';
+        }
+    }
+    catch (e) {
+        console.error('Email Regex creation failed: ', e);
+    }
+    return 'Valid';
+}
+/**
+ * @description Validates Indian phone numbers
+ * @todo Update Regex to take different variations of input in next update
+ * @link https://stackoverflow.com/questions/18351553/regular-expression-validation-for-indian-phone-number-and-mobile-number
+ * @param phoneNumber
+ * @returns ValidationState
+ */
+function validatePhoneNumber(phoneNumber) {
+    try {
+        const validationPattern = new RegExp('^[6-9]{1}[0-9]{9}$');
+        const inProgressPattern = new RegExp('^[6-9]{1}[0-9]{0,9}$');
+        if (validationPattern.test(phoneNumber)) {
+            return 'Valid';
+        }
+        else if (inProgressPattern.test(phoneNumber) || phoneNumber.length === 0) {
+            return 'InProgress';
+        }
+        else {
+            return 'Invalid';
+        }
+    }
+    catch (e) {
+        console.error('Phone Regex creation failed', e);
+    }
+    return phoneNumber.length === 10 ? 'Valid' : phoneNumber.length > 10 ? 'InProgress' : 'Invalid';
+}
+/**
+ * @description Creates a debouncer function that delays invoking the provided callback until a specified delay period has elapsed since the last invocation.
+ * @param delay The delay period in milliseconds before invoking the callback.
+ * @returns A debouncer function that accepts a callback and delays its invocation based on the specified delay.
+ */
+export function getStorageItem(key) {
+    try {
+        return localStorage.getItem(key);
+    }
+    catch {
+        return null;
+    }
+}
+export function setStorageItem(key, value) {
+    try {
+        localStorage.setItem(key, value);
+    }
+    catch {
+        // 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) {
+        const now = Date.now();
+        if (now - lastCallTime > delay) {
+            lastCallTime = now;
+            callback(...args);
+        }
+    };
+}

package/package.json

@@ -0,0 +1,91 @@
+{
+  "name": "polymorph-ui-components",
+  "version": "0.1.0",
+  "description": "A themeable Svelte 5 UI component library with CSS custom property driven styling",
+  "keywords": [
+    "svelte",
+    "svelte5",
+    "ui",
+    "components",
+    "component-library",
+    "design-system",
+    "css-variables",
+    "themeable",
+    "svelte-components"
+  ],
+  "license": "MIT",
+  "scripts": {
+    "prepare": "husky",
+    "dev": "vite dev --host",
+    "build": "vite build && npm run package",
+    "build:wc": "vite build --config vite.config.wc.ts",
+    "preview": "vite preview",
+    "package": "svelte-kit sync && svelte-package && publint",
+    "prepublishOnly": "npm run package",
+    "test": "npm run test:integration && npm run test:unit",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:wc": "svelte-check --tsconfig ./tsconfig.wc.json --compiler-warnings \"options_missing_custom_element:ignore\"",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "lint": "prettier --check src && eslint src",
+    "format": "prettier --write src",
+    "test:integration": "playwright test",
+    "test:unit": "vitest"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "!dist/**/*.test.*",
+    "!dist/**/*.spec.*"
+  ],
+  "peerDependencies": {
+    "svelte": "^5.41.2"
+  },
+  "devDependencies": {
+    "@commitlint/cli": "^21.0.2",
+    "@commitlint/config-conventional": "^21.0.2",
+    "@eslint/compat": "^2.1.0",
+    "@eslint/js": "^10.0.1",
+    "@playwright/test": "^1.60.0",
+    "@sveltejs/adapter-auto": "^7.0.1",
+    "@sveltejs/adapter-static": "^3.0.10",
+    "@sveltejs/kit": "^2.63.1",
+    "@sveltejs/package": "^2.5.8",
+    "@sveltejs/vite-plugin-svelte": "^7.1.2",
+    "@types/node": "^26.0.0",
+    "eslint": "^10.4.1",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-svelte": "^3.19.0",
+    "eslint-plugin-unused-imports": "^4.4.1",
+    "globals": "^17.6.0",
+    "husky": "^9.1.7",
+    "marked": "^18.0.5",
+    "prettier": "^3.8.3",
+    "prettier-plugin-svelte": "^4.1.0",
+    "publint": "^0.3.21",
+    "svelte": "^5.56.3",
+    "svelte-check": "^4.6.0",
+    "tslib": "^2.8.1",
+    "typescript": "^6.0.3",
+    "typescript-eslint": "^8.60.1",
+    "vite": "^8.0.16",
+    "vitest": "^4.1.8"
+  },
+  "svelte": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "type": "module",
+  "auto-changelog": {
+    "output": "docs/CHANGELOG.md",
+    "template": "./docs/templates/changelog.hbs",
+    "commitLimit": false,
+    "breakingPattern": "(!:)",
+    "unreleased": true,
+    "releaseSummary": true,
+    "hideCredit": false,
+    "ignoreCommitPattern": "(\\[skip ci\\])"
+  }
+}