@plusui/library 0.1.0

package/dist/components/input/input.style.d.ts

@@ -0,0 +1,533 @@
+export declare const inputStyle: import("tailwind-variants").TVReturnType<{
+    focus: {
+        true: {
+            inputWrapper: string;
+        };
+        false: {
+            inputWrapper: string;
+        };
+    };
+    error: {
+        true: {
+            inputWrapper: string;
+        };
+        false: {
+            inputWrapper: string;
+        };
+    };
+    disabled: {
+        true: {
+            inputWrapper: string[];
+            inputElement: string[];
+        };
+        false: {
+            host: string;
+            inputWrapper: string;
+        };
+    };
+    readonly: {
+        true: {
+            inputWrapper: string[];
+            inputElement: string[];
+        };
+        false: {
+            inputWrapper: string;
+        };
+    };
+    isSelect: {
+        true: {
+            inputWrapper: string;
+            inputElement: string;
+        };
+        false: {
+            inputWrapper: string;
+            inputElement: string;
+        };
+    };
+    size: {
+        sm: {
+            host: string;
+            inputWrapper: string;
+            prefix: string;
+            suffix: string;
+            clearButton: string;
+            passwordToggleButton: string;
+        };
+        md: {
+            host: string;
+            inputWrapper: string;
+            prefix: string;
+            suffix: string;
+            clearButton: string;
+            passwordToggleButton: string;
+        };
+        lg: {
+            host: string;
+            inputWrapper: string;
+            prefix: string;
+            suffix: string;
+            clearButton: string;
+            passwordToggleButton: string;
+        };
+    };
+}, {
+    host: string;
+    base: string;
+    inputElement: string;
+    inputWrapper: string[];
+    prefix: string;
+    suffix: string;
+    clearButton: string;
+    passwordToggleButton: string;
+}, undefined, import("tailwind-variants/dist/config").TVConfig<{
+    focus: {
+        true: {
+            inputWrapper: string;
+        };
+        false: {
+            inputWrapper: string;
+        };
+    };
+    error: {
+        true: {
+            inputWrapper: string;
+        };
+        false: {
+            inputWrapper: string;
+        };
+    };
+    disabled: {
+        true: {
+            inputWrapper: string[];
+            inputElement: string[];
+        };
+        false: {
+            host: string;
+            inputWrapper: string;
+        };
+    };
+    readonly: {
+        true: {
+            inputWrapper: string[];
+            inputElement: string[];
+        };
+        false: {
+            inputWrapper: string;
+        };
+    };
+    isSelect: {
+        true: {
+            inputWrapper: string;
+            inputElement: string;
+        };
+        false: {
+            inputWrapper: string;
+            inputElement: string;
+        };
+    };
+    size: {
+        sm: {
+            host: string;
+            inputWrapper: string;
+            prefix: string;
+            suffix: string;
+            clearButton: string;
+            passwordToggleButton: string;
+        };
+        md: {
+            host: string;
+            inputWrapper: string;
+            prefix: string;
+            suffix: string;
+            clearButton: string;
+            passwordToggleButton: string;
+        };
+        lg: {
+            host: string;
+            inputWrapper: string;
+            prefix: string;
+            suffix: string;
+            clearButton: string;
+            passwordToggleButton: string;
+        };
+    };
+}, {
+    focus: {
+        true: {
+            inputWrapper: string;
+        };
+        false: {
+            inputWrapper: string;
+        };
+    };
+    error: {
+        true: {
+            inputWrapper: string;
+        };
+        false: {
+            inputWrapper: string;
+        };
+    };
+    disabled: {
+        true: {
+            inputWrapper: string[];
+            inputElement: string[];
+        };
+        false: {
+            host: string;
+            inputWrapper: string;
+        };
+    };
+    readonly: {
+        true: {
+            inputWrapper: string[];
+            inputElement: string[];
+        };
+        false: {
+            inputWrapper: string;
+        };
+    };
+    isSelect: {
+        true: {
+            inputWrapper: string;
+            inputElement: string;
+        };
+        false: {
+            inputWrapper: string;
+            inputElement: string;
+        };
+    };
+    size: {
+        sm: {
+            host: string;
+            inputWrapper: string;
+            prefix: string;
+            suffix: string;
+            clearButton: string;
+            passwordToggleButton: string;
+        };
+        md: {
+            host: string;
+            inputWrapper: string;
+            prefix: string;
+            suffix: string;
+            clearButton: string;
+            passwordToggleButton: string;
+        };
+        lg: {
+            host: string;
+            inputWrapper: string;
+            prefix: string;
+            suffix: string;
+            clearButton: string;
+            passwordToggleButton: string;
+        };
+    };
+}>, {
+    focus: {
+        true: {
+            inputWrapper: string;
+        };
+        false: {
+            inputWrapper: string;
+        };
+    };
+    error: {
+        true: {
+            inputWrapper: string;
+        };
+        false: {
+            inputWrapper: string;
+        };
+    };
+    disabled: {
+        true: {
+            inputWrapper: string[];
+            inputElement: string[];
+        };
+        false: {
+            host: string;
+            inputWrapper: string;
+        };
+    };
+    readonly: {
+        true: {
+            inputWrapper: string[];
+            inputElement: string[];
+        };
+        false: {
+            inputWrapper: string;
+        };
+    };
+    isSelect: {
+        true: {
+            inputWrapper: string;
+            inputElement: string;
+        };
+        false: {
+            inputWrapper: string;
+            inputElement: string;
+        };
+    };
+    size: {
+        sm: {
+            host: string;
+            inputWrapper: string;
+            prefix: string;
+            suffix: string;
+            clearButton: string;
+            passwordToggleButton: string;
+        };
+        md: {
+            host: string;
+            inputWrapper: string;
+            prefix: string;
+            suffix: string;
+            clearButton: string;
+            passwordToggleButton: string;
+        };
+        lg: {
+            host: string;
+            inputWrapper: string;
+            prefix: string;
+            suffix: string;
+            clearButton: string;
+            passwordToggleButton: string;
+        };
+    };
+}, {
+    host: string;
+    base: string;
+    inputElement: string;
+    inputWrapper: string[];
+    prefix: string;
+    suffix: string;
+    clearButton: string;
+    passwordToggleButton: string;
+}, import("tailwind-variants").TVReturnType<{
+    focus: {
+        true: {
+            inputWrapper: string;
+        };
+        false: {
+            inputWrapper: string;
+        };
+    };
+    error: {
+        true: {
+            inputWrapper: string;
+        };
+        false: {
+            inputWrapper: string;
+        };
+    };
+    disabled: {
+        true: {
+            inputWrapper: string[];
+            inputElement: string[];
+        };
+        false: {
+            host: string;
+            inputWrapper: string;
+        };
+    };
+    readonly: {
+        true: {
+            inputWrapper: string[];
+            inputElement: string[];
+        };
+        false: {
+            inputWrapper: string;
+        };
+    };
+    isSelect: {
+        true: {
+            inputWrapper: string;
+            inputElement: string;
+        };
+        false: {
+            inputWrapper: string;
+            inputElement: string;
+        };
+    };
+    size: {
+        sm: {
+            host: string;
+            inputWrapper: string;
+            prefix: string;
+            suffix: string;
+            clearButton: string;
+            passwordToggleButton: string;
+        };
+        md: {
+            host: string;
+            inputWrapper: string;
+            prefix: string;
+            suffix: string;
+            clearButton: string;
+            passwordToggleButton: string;
+        };
+        lg: {
+            host: string;
+            inputWrapper: string;
+            prefix: string;
+            suffix: string;
+            clearButton: string;
+            passwordToggleButton: string;
+        };
+    };
+}, {
+    host: string;
+    base: string;
+    inputElement: string;
+    inputWrapper: string[];
+    prefix: string;
+    suffix: string;
+    clearButton: string;
+    passwordToggleButton: string;
+}, undefined, import("tailwind-variants/dist/config").TVConfig<{
+    focus: {
+        true: {
+            inputWrapper: string;
+        };
+        false: {
+            inputWrapper: string;
+        };
+    };
+    error: {
+        true: {
+            inputWrapper: string;
+        };
+        false: {
+            inputWrapper: string;
+        };
+    };
+    disabled: {
+        true: {
+            inputWrapper: string[];
+            inputElement: string[];
+        };
+        false: {
+            host: string;
+            inputWrapper: string;
+        };
+    };
+    readonly: {
+        true: {
+            inputWrapper: string[];
+            inputElement: string[];
+        };
+        false: {
+            inputWrapper: string;
+        };
+    };
+    isSelect: {
+        true: {
+            inputWrapper: string;
+            inputElement: string;
+        };
+        false: {
+            inputWrapper: string;
+            inputElement: string;
+        };
+    };
+    size: {
+        sm: {
+            host: string;
+            inputWrapper: string;
+            prefix: string;
+            suffix: string;
+            clearButton: string;
+            passwordToggleButton: string;
+        };
+        md: {
+            host: string;
+            inputWrapper: string;
+            prefix: string;
+            suffix: string;
+            clearButton: string;
+            passwordToggleButton: string;
+        };
+        lg: {
+            host: string;
+            inputWrapper: string;
+            prefix: string;
+            suffix: string;
+            clearButton: string;
+            passwordToggleButton: string;
+        };
+    };
+}, {
+    focus: {
+        true: {
+            inputWrapper: string;
+        };
+        false: {
+            inputWrapper: string;
+        };
+    };
+    error: {
+        true: {
+            inputWrapper: string;
+        };
+        false: {
+            inputWrapper: string;
+        };
+    };
+    disabled: {
+        true: {
+            inputWrapper: string[];
+            inputElement: string[];
+        };
+        false: {
+            host: string;
+            inputWrapper: string;
+        };
+    };
+    readonly: {
+        true: {
+            inputWrapper: string[];
+            inputElement: string[];
+        };
+        false: {
+            inputWrapper: string;
+        };
+    };
+    isSelect: {
+        true: {
+            inputWrapper: string;
+            inputElement: string;
+        };
+        false: {
+            inputWrapper: string;
+            inputElement: string;
+        };
+    };
+    size: {
+        sm: {
+            host: string;
+            inputWrapper: string;
+            prefix: string;
+            suffix: string;
+            clearButton: string;
+            passwordToggleButton: string;
+        };
+        md: {
+            host: string;
+            inputWrapper: string;
+            prefix: string;
+            suffix: string;
+            clearButton: string;
+            passwordToggleButton: string;
+        };
+        lg: {
+            host: string;
+            inputWrapper: string;
+            prefix: string;
+            suffix: string;
+            clearButton: string;
+            passwordToggleButton: string;
+        };
+    };
+}>, unknown, unknown, undefined>>;
+//# sourceMappingURL=input.style.d.ts.map

package/dist/components/input/input.style.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.style.d.ts","sourceRoot":"","sources":["../../../src/components/input/input.style.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iCAwIrB,CAAC"}

package/dist/components/input/input.style.js

@@ -0,0 +1,133 @@
+import { c as ce } from '../../index-B9iart53.js';
+
+const inputStyle = ce({
+    slots: {
+        host: 'font-sans antialiased flex flex-col items-start justify-start w-full relative',
+        base: '',
+        inputElement: 'focus:outline-none flex-1 w-full bg-transparent',
+        inputWrapper: [
+            'flex flex-row items-center justify-start flex-1 w-full cursor-text',
+            'rounded border border-solid',
+            'enabled:bg-color-surface enabled:text-color-default',
+            'placeholder-color-placeholder',
+        ],
+        prefix: 'flex flex-row items-center justify-start',
+        suffix: 'flex flex-row items-center justify-start',
+        clearButton: 'cursor-pointer flex flex-row items-center justify-center hover:text-color-caption',
+        passwordToggleButton: 'cursor-pointer flex flex-row items-center justify-center hover:text-color-caption',
+    },
+    variants: {
+        focus: {
+            true: {
+                inputWrapper: 'ring-default z-[1] border-color-primary',
+            },
+            false: {
+                inputWrapper: 'border-color-default hover:border-color-primary',
+            },
+        },
+        error: {
+            true: {
+                inputWrapper: 'border-color-danger hover:border-color-danger',
+            },
+            false: {
+                inputWrapper: 'border-color-default',
+            },
+        },
+        disabled: {
+            true: {
+                inputWrapper: [
+                    'border-color-disabled cursor-not-allowed',
+                    'bg-color-disabled text-color-disabled',
+                    'hover:border-color-disabled',
+                ],
+                inputElement: [
+                    'cursor-not-allowed text-color-disabled',
+                    'placeholder:text-color-disabled',
+                ],
+            },
+            false: {
+                host: 'cursor-text',
+                inputWrapper: 'cursor-text',
+            },
+        },
+        readonly: {
+            true: {
+                inputWrapper: [
+                    'bg-color-default border-color-default',
+                    'text-color-default pointer-events-none',
+                ],
+                inputElement: [
+                    'cursor-default text-color-default',
+                    'placeholder:text-color-default pointer-events-none',
+                ],
+            },
+            false: {
+                inputWrapper: 'pointer-events-auto',
+            },
+        },
+        isSelect: {
+            true: {
+                inputWrapper: 'cursor-pointer',
+                inputElement: 'cursor-pointer',
+            },
+            false: {
+                inputWrapper: 'cursor-text',
+                inputElement: 'cursor-text',
+            },
+        },
+        size: {
+            sm: {
+                host: 'gap-0.5',
+                inputWrapper: 'py-2 px-2 text-sm',
+                prefix: 'pr-2',
+                suffix: 'pl-2',
+                clearButton: 'min-w-5 h-5',
+                passwordToggleButton: 'min-w-5 h-5',
+            },
+            md: {
+                host: 'gap-1',
+                inputWrapper: 'py-2 px-3 text-base',
+                prefix: 'pr-2.5',
+                suffix: 'pl-2.5',
+                clearButton: 'min-w-5 h-5',
+                passwordToggleButton: 'min-w-5 h-5',
+            },
+            lg: {
+                host: 'gap-1.5',
+                inputWrapper: 'py-2 px-4 text-lg',
+                prefix: 'pr-3',
+                suffix: 'pl-3',
+                clearButton: 'min-w-5 h-5',
+                passwordToggleButton: 'min-w-5 h-5',
+            },
+        },
+    },
+    compoundVariants: [
+        {
+            error: true,
+            focus: true,
+            class: {
+                inputWrapper: 'border-color-danger',
+            },
+        },
+        {
+            isSelect: true,
+            disabled: false,
+            readonly: false,
+            class: {
+                inputWrapper: 'cursor-pointer',
+                inputElement: 'cursor-pointer',
+            },
+        },
+    ],
+    defaultVariants: {
+        focus: false,
+        error: false,
+        disabled: false,
+        size: 'md',
+        isSelect: false,
+        readonly: false,
+    },
+});
+
+export { inputStyle };

package/dist/components/input/input.style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.style.js","sourceRoot":"","sources":["../../../src/components/input/input.style.ts"],"names":[],"mappings":"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"}