fancy-ui-ts 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Luan Peixoto
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+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.

package/README.md

@@ -0,0 +1,10 @@
+# Fancy UI
+
+A lightweight, cool, customizable Web Component library built with TypeScript.
+Works with **React**, **Vue**, **Angular**, **Svelte**, or plain HTML/JS.
+
+## 📦 Installation
+
+```bash
+npm install fancy-ui-ts
+```

package/dist/index.css

@@ -0,0 +1,232 @@
+/* src/styles/tokens/fc-primitives.css */
+:root {
+  --fc-white: #ffffff;
+  --fc-gray-50: #fafafa;
+  --fc-gray-100: #f4f4f5;
+  --fc-gray-200: #e4e4e7;
+  --fc-gray-300: #d4d4d8;
+  --fc-gray-400: #a1a1aa;
+  --fc-gray-500: #71717a;
+  --fc-gray-600: #52525b;
+  --fc-gray-700: #3f3f46;
+  --fc-gray-800: #27272a;
+  --fc-gray-900: #18181b;
+  --fc-primary-50: #eff6ff;
+  --fc-primary-100: #dbeafe;
+  --fc-primary-200: #bfdbfe;
+  --fc-primary-300: #93c5fd;
+  --fc-primary-400: #60a5fa;
+  --fc-primary-500: #3b82f6;
+  --fc-primary-600: #2563eb;
+  --fc-primary-700: #1d4ed8;
+  --fc-primary-800: #1e40af;
+  --fc-primary-900: #1e3a8a;
+  --fc-success-500: #16a34a;
+  --fc-warning-500: #d97706;
+  --fc-danger-50: #fef2f2;
+  --fc-danger-100: #fee2e2;
+  --fc-danger-200: #fecaca;
+  --fc-danger-300: #fca5a5;
+  --fc-danger-400: #ef4444;
+  --fc-danger-500: #dc2626;
+  --fc-danger-600: #b91c1c;
+  --fc-danger-700: #991b1b;
+  --fc-danger-800: #7f1d1d;
+  --fc-danger-900: #450a0a;
+  --fc-space-1: 4px;
+  --fc-space-2: 8px;
+  --fc-space-3: 12px;
+  --fc-space-4: 16px;
+  --fc-space-5: 20px;
+  --fc-space-6: 24px;
+  --fc-radius-xs: 4px;
+  --fc-radius-sm: 6px;
+  --fc-radius-md: 8px;
+  --fc-radius-lg: 10px;
+  --fc-radius-xl: 12px;
+  --fc-border-width-xs: 1px;
+  --fc-border-width-sm: 2px;
+  --fc-border-width-md: 3px;
+  --fc-border-width-lg: 4px;
+  --fc-shadow-none: none;
+  --fc-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.06);
+  --fc-shadow-md: 0 4px 6px rgb(0 0 0 / 0.1);
+  --fc-shadow-lg: 0 10px 15px rgb(0 0 0 / 0.15);
+  --focus-ring-none: none;
+  --fc-focus-ring-sm: 0 0 0 3px;
+  --fc-focus-ring-md: 0 0 0 4px;
+  --fc-focus-ring-lg: 0 0 0 6px;
+  --fc-focus-ring-primary: rgba(59, 130, 246, 0.35);
+  --fc-focus-ring-secondary: rgba(59, 130, 246, 0.6);
+  --fc-focus-ring-danger: rgba(239, 68, 68, 0.5);
+  --fc-focus-ring-danger-secondary: rgba(239, 68, 68, 0.6);
+  --fc-focus-ring-gray: rgba(107, 114, 128, 0.35);
+  --fc-font-size-sm: 12px;
+  --fc-font-size-md: 14px;
+  --fc-font-size-lg: 16px;
+  --fc-font-weight-normal: 400;
+  --fc-font-weight-medium: 500;
+  --fc-font-weight-bold: 600;
+  --fc-line-height: 1.4;
+  --fc-font-family: system-ui, sans-serif;
+}
+
+/* src/styles/tokens/fc-tokens.css */
+:root {
+  font-family: var(--fc-font-family);
+  --fc-combobox-bg: var(--fc-white);
+  --fc-combobox-disabled-bg: var(--fc-gray-50);
+  --fc-combobox-fg: var(--fc-gray-900);
+  --fc-combobox-border: var(--fc-gray-300);
+  --fc-combobox-border-hover: var(--fc-gray-400);
+  --fc-combobox-border-focus: var(--fc-primary-400);
+  --fc-combobox-placeholder: var(--fc-gray-400);
+  --fc-combobox-disabled-placeholder: var(--fc-gray-300);
+  --fc-combobox-focus-ring: var(--fc-focus-ring-sm) var(--fc-focus-ring-primary);
+  --fc-combobox-error-bg: var(--fc-danger-50);
+  --fc-combobox-error-color: var(--fc-danger-300);
+  --fc-combobox-error-focus-ring: var(--fc-focus-ring-danger);
+  --fc-combobox-max-width: 412px;
+  --fc-combobox-padding: var(--fc-space-3);
+  --fc-combobox-border-width: var(--fc-border-width-xs);
+  --fc-combobox-radius: var(--fc-radius-md);
+  --fc-combobox-shadow: var(--fc-shadow-none);
+  --fc-option-bg: var(--fc-white);
+  --fc-option-disabled-bg: var(--fc-gray-50);
+  --fc-option-bg-hover: var(--fc-gray-100);
+  --fc-option-bg-selected: var(--fc-primary-200);
+  --fc-option-bg-active: var(--fc-primary-100);
+  --fc-option-fg: var(--fc-gray-900);
+  --fc-option-disabled-fg: var(--fc-gray-300);
+  --fc-option-fg-selected: var(--fc-primary-700);
+  --fc-option-padding: var(--fc-space-3);
+  --fc-option-radius: var(--fc-radius-md);
+  --fc-input-bg: var(--fc-white);
+  --fc-input-disabled-bg: var(--fc-gray-50);
+  --fc-input-fg: var(--fc-gray-900);
+  --fc-input-border: var(--fc-gray-400);
+  --fc-input-border-hover: var(--fc-gray-400);
+  --fc-input-border-focus: var(--fc-primary-400);
+  --fc-input-placeholder: var(--fc-gray-400);
+  --fc-input-disabled-placeholder: var(--fc-gray-300);
+  --fc-input-focus-ring: var(--fc-focus-ring-sm) var(--fc-focus-ring-primary);
+  --fc-input-error-bg: var(--fc-danger-50);
+  --fc-input-error-color: var(--fc-danger-300);
+  --fc-input-error-focus-ring: var(--fc-focus-ring-danger);
+  --fc-input-password-icon-color: var(--fc-gray-400);
+  --fc-input-password-icon-color-hover: var(--fc-gray-500);
+  --fc-input-file-border: var(--fc-gray-400);
+  --fc-input-file-border-hover: var(--fc-gray-400);
+  --fc-input-file-btn-bg: var(--fc-gray-400);
+  --fc-input-file-btn-bg-hover: var(--fc-gray-400);
+  --fc-input-file-btn-fg: var(--fc-gray-900);
+  --fc-input-file-btn-fg-hover: var(--fc-gray-900);
+  --fc-input-max-width: 412px;
+  --fc-input-padding: var(--fc-space-3);
+  --fc-input-border-width: var(--fc-border-width-xs);
+  --fc-input-radius: var(--fc-radius-md);
+  --fc-input-shadow: var(--fc-shadow-none);
+  --fc-error-color: var(--fc-danger-300);
+  --fc-error-max-width: fit-content;
+  --fc-error-font-size: var(--fc-font-size-sm);
+}
+
+/* src/styles/themes/fc-theme-light.css */
+:root[fc-theme=light] {
+  --fc-combobox-bg: var(--fc-white);
+  --fc-combobox-disabled-bg: var(--fc-gray-50);
+  --fc-combobox-fg: var(--fc-gray-900);
+  --fc-combobox-border: var(--fc-gray-300);
+  --fc-combobox-border-hover: var(--fc-gray-400);
+  --fc-combobox-border-focus: var(--fc-primary-400);
+  --fc-combobox-placeholder: var(--fc-gray-400);
+  --fc-combobox-disabled-placeholder: var(--fc-gray-300);
+  --fc-combobox-focus-ring: var(--fc-focus-ring-sm) var(--fc-focus-ring-primary);
+  --fc-combobox-error-bg: var(--fc-danger-50);
+  --fc-combobox-error-color: var(--fc-danger-300);
+  --fc-combobox-error-focus-ring: var(--fc-focus-ring-danger);
+  --fc-option-bg: var(--fc-white);
+  --fc-option-disabled-bg: var(--fc-gray-50);
+  --fc-option-bg-hover: var(--fc-gray-100);
+  --fc-option-bg-selected: var(--fc-primary-200);
+  --fc-option-bg-active: var(--fc-primary-100);
+  --fc-option-fg: var(--fc-gray-900);
+  --fc-option-disabled-fg: var(--fc-gray-300);
+  --fc-option-fg-selected: var(--fc-primary-700);
+  --fc-input-bg: var(--fc-white);
+  --fc-input-disabled-bg: var(--fc-gray-50);
+  --fc-input-fg: var(--fc-gray-900);
+  --fc-input-border: var(--fc-gray-300);
+  --fc-input-border-hover: var(--fc-gray-400);
+  --fc-input-border-focus: var(--fc-primary-400);
+  --fc-input-placeholder: var(--fc-gray-400);
+  --fc-input-disabled-placeholder: var(--fc-gray-300);
+  --fc-input-focus-ring: var(--fc-focus-ring-sm) var(--fc-focus-ring-primary);
+  --fc-input-error-bg: var(--fc-danger-50);
+  --fc-input-error-color: var(--fc-danger-300);
+  --fc-input-error-focus-ring: var(--fc-focus-ring-danger);
+  --fc-input-password-icon-color: var(--fc-gray-400);
+  --fc-input-password-icon-color-hover: var(--fc-gray-500);
+  --fc-input-file-border: var(--fc-gray-300);
+  --fc-input-file-border-hover: var(--fc-gray-300);
+  --fc-input-file-btn-bg: var(--fc-gray-50);
+  --fc-input-file-btn-bg-hover: var(--fc-gray-100);
+  --fc-input-file-btn-fg: var(--fc-gray-700);
+  --fc-input-file-btn-fg-hover: var(--fc-gray-700);
+  --fc-input-max-width: 412px;
+  --fc-input-padding: var(--fc-space-3);
+  --fc-input-border-width: var(--fc-border-width-xs);
+  --fc-input-radius: var(--fc-radius-md);
+  --fc-input-shadow: var(--fc-shadow-none);
+  --fc-error-color: var(--fc-danger-300);
+}
+
+/* src/styles/themes/fc-theme-dark.css */
+:root[fc-theme=dark] {
+  --fc-combobox-bg: var(--fc-gray-800);
+  --fc-combobox-disabled-bg: var(--fc-gray-900);
+  --fc-combobox-fg: var(--fc-gray-200);
+  --fc-combobox-border: var(--fc-gray-700);
+  --fc-combobox-border-hover: var(--fc-gray-500);
+  --fc-combobox-border-focus: var(--fc-primary-400);
+  --fc-combobox-placeholder: var(--fc-gray-500);
+  --fc-combobox-disabled-placeholder: var(--fc-gray-700);
+  --fc-combobox-focus-ring: var(--fc-focus-ring-sm) var(--fc-focus-ring-secondary);
+  --fc-combobox-error-bg: var(--fc-danger-900);
+  --fc-combobox-error-color: var(--fc-danger-700);
+  --fc-combobox-error-focus-ring: var(--fc-focus-ring-danger-secondary);
+  --fc-option-bg: var(--fc-gray-800);
+  --fc-option-disabled-bg: var(--fc-gray-900);
+  --fc-option-bg-hover: var(--fc-gray-700);
+  --fc-option-bg-active: var(--fc-primary-500);
+  --fc-option-bg-selected: var(--fc-primary-600);
+  --fc-option-fg: var(--fc-gray-200);
+  --fc-option-disabled-fg: var(--fc-gray-700);
+  --fc-option-fg-selected: var(--fc-primary-50);
+  --fc-input-bg: var(--fc-gray-800);
+  --fc-input-disabled-bg: var(--fc-gray-900);
+  --fc-input-fg: var(--fc-gray-200);
+  --fc-input-border: var(--fc-gray-700);
+  --fc-input-border-hover: var(--fc-gray-500);
+  --fc-input-border-focus: var(--fc-primary-400);
+  --fc-input-placeholder: var(--fc-gray-500);
+  --fc-input-disabled-placeholder: var(--fc-gray-700);
+  --fc-input-focus-ring: var(--fc-focus-ring-sm) var(--fc-focus-ring-secondary);
+  --fc-input-error-bg: var(--fc-danger-900);
+  --fc-input-error-color: var(--fc-danger-700);
+  --fc-input-error-focus-ring: var(--fc-focus-ring-danger-secondary);
+  --fc-input-password-icon-color: var(--fc-gray-500);
+  --fc-input-password-icon-color-hover: var(--fc-gray-400);
+  --fc-input-file-border: var(--fc-gray-700);
+  --fc-input-file-border-hover: var(--fc-gray-700);
+  --fc-input-file-btn-bg: var(--fc-gray-900);
+  --fc-input-file-btn-bg-hover: var(--fc-gray-700);
+  --fc-input-file-btn-fg: var(--fc-gray-200);
+  --fc-input-file-btn-fg-hover: var(--fc-gray-200);
+  --fc-input-max-width: 412px;
+  --fc-input-padding: var(--fc-space-3);
+  --fc-input-border-width: var(--fc-border-width-xs);
+  --fc-input-radius: var(--fc-radius-md);
+  --fc-input-shadow: var(--fc-shadow-none);
+  --fc-error-color: var(--fc-danger-700);
+}

package/dist/index.d.ts

@@ -0,0 +1,174 @@
+declare class FcCombobox extends HTMLElement {
+    static get observedAttributes(): string[];
+    private inputEl;
+    private dropdownEl;
+    static formAssociated: boolean;
+    private internals;
+    private _value;
+    private activeIndex;
+    private _validatorFunction;
+    constructor();
+    get validity(): ValidityState;
+    get validationMessage(): string;
+    get willValidate(): boolean;
+    checkValidity(): boolean;
+    reportValidity(): boolean;
+    get placeholder(): string;
+    set placeholder(val: string);
+    get name(): string;
+    set name(val: string);
+    get disabled(): boolean;
+    set disabled(val: boolean);
+    get value(): string;
+    set value(newValue: string);
+    get label(): string;
+    get options(): {
+        label: string;
+        value: string;
+        disabled?: boolean;
+    }[];
+    set options(data: {
+        label: string;
+        value: string;
+        disabled?: boolean;
+    }[]);
+    get required(): boolean;
+    set required(val: boolean);
+    get readonly(): boolean;
+    set readonly(val: boolean);
+    get strict(): boolean;
+    set strict(val: boolean);
+    get validator(): ((value: string) => string | null) | null;
+    set validator(func: ((value: string) => string | null) | null);
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, _old: string, newVal: string): void;
+    disconnectedCallback(): void;
+    formResetCallback(): void;
+    formStateRestoreCallback(state: string | File | FormData | null, mode: 'restore' | 'autocomplete'): void;
+    /** helper functions for the eventListeners */
+    private onInput;
+    private onChange;
+    private onOptionSelect;
+    private onOutsideClick;
+    private onFocusOut;
+    private onDropdownClick;
+    private onFocus;
+    private onSlotChange;
+    private onKeyDown;
+    private onBlur;
+    private onInvalid;
+    private setActiveOption;
+    private getVisibleOptions;
+    private selectOption;
+    private toggleDropdown;
+    private syncValidity;
+    setProps(props: Record<string, any>): void;
+}
+
+declare const defineCombobox: () => typeof FcCombobox;
+
+declare class FcOption extends HTMLElement {
+    static get observedAttributes(): string[];
+    constructor();
+    get value(): string;
+    set value(data: string);
+    get label(): string;
+    set label(val: string);
+    get selected(): boolean;
+    set selected(isSelected: boolean);
+    get disabled(): boolean;
+    set disabled(val: boolean);
+    get active(): boolean;
+    set active(isActive: boolean);
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, _oldVal: string, _newVal: string): void;
+    private onClick;
+    private updateSelection;
+    setProps(props: Record<string, any>): void;
+}
+
+declare const defineOption: () => typeof FcOption;
+
+declare class FcInput extends HTMLElement {
+    static get observedAttributes(): string[];
+    private inputEl;
+    private passwordBtnEl;
+    private fcPassEnableIcon;
+    private fcPassDisableIcon;
+    private _value;
+    private _validatorFunction;
+    static formAssociated: boolean;
+    private internals;
+    private readonly ALLOWED_TYPES;
+    constructor();
+    get validity(): ValidityState;
+    get validationMessage(): string;
+    get willValidate(): boolean;
+    checkValidity(): boolean;
+    reportValidity(): boolean;
+    get value(): string;
+    set value(val: string);
+    get files(): FileList | null;
+    get placeholder(): string;
+    set placeholder(val: string);
+    get type(): string;
+    set type(val: string);
+    get name(): string;
+    set name(val: string);
+    get disabled(): boolean;
+    set disabled(val: boolean);
+    get required(): boolean;
+    set required(val: boolean);
+    get readonly(): boolean;
+    set readonly(val: boolean);
+    get validator(): ((value: string) => string | null) | null;
+    set validator(func: ((value: string) => string | null) | null);
+    get min(): string;
+    set min(val: string);
+    get max(): string;
+    set max(val: string);
+    get step(): string;
+    set step(val: string);
+    get minLength(): number;
+    set minLength(val: number);
+    get maxLength(): number;
+    set maxLength(val: number);
+    get pattern(): string;
+    set pattern(val: string);
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, _oldVal: string, newVal: string): void;
+    formResetCallback(): void;
+    formStateRestoreCallback(state: string | File | FormData | null, _mode: 'restore' | 'autocomplete'): void;
+    /** functions that run by eventListeners */
+    private onInput;
+    private onChange;
+    private onBlur;
+    private onInvalid;
+    private onTogglePassword;
+    private updateToggleIcon;
+    private syncValidity;
+    setProps(props: Record<string, any>): void;
+}
+
+declare const defineInput: () => typeof FcInput;
+
+declare class FcError extends HTMLElement {
+    static get observedAttributes(): string[];
+    private errorTextEl;
+    private targetEl;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldVal: string, newVal: string): void;
+    private handleErrorState;
+    private findTarget;
+    private bindListeners;
+    private cleanup;
+}
+
+declare const defineError: () => typeof FcError;
+
+declare const defineAll: () => void;
+
+export { FcCombobox, FcError, FcInput, FcOption, defineAll, defineCombobox, defineError, defineInput, defineOption };