@fvc/input 1.2.0

package/dist/lib/index.js

@@ -0,0 +1,6 @@
+import n,{useState as t,useCallback as e}from"react";import{Input as r}from"antd";import{Icon as p}from"@fvc/icons";import{transformText as i}from"@fvc/utils";function u(n){return n&&n.__esModule&&Object.prototype.hasOwnProperty.call(n,"default")?n.default:n}"function"==typeof SuppressedError&&SuppressedError;var o,a={exports:{}};
+/*!
+	Copyright (c) 2018 Jed Watson.
+	Licensed under the MIT License (MIT), see
+	http://jedwatson.github.io/classnames
+*/var _,f=u((o||(o=1,_=a,function(){var n={}.hasOwnProperty;function t(){for(var n="",t=0;t<arguments.length;t++){var p=arguments[t];p&&(n=r(n,e(p)))}return n}function e(e){if("string"==typeof e||"number"==typeof e)return e;if("object"!=typeof e)return"";if(Array.isArray(e))return t.apply(null,e);if(e.toString!==Object.prototype.toString&&!e.toString.toString().includes("[native code]"))return e.toString();var p="";for(var i in e)n.call(e,i)&&e[i]&&(p=r(p,i));return p}function r(n,t){return t?n?n+" "+t:n+t:n}_.exports?(t.default=t,_.exports=t):window.classNames=t}()),a.exports));const c=({error:t})=>n.createElement("div",{className:"fvc-input-error-text"},n.createElement(p.Info,{width:16,height:16,color:"var(--red-800)"}),t),l="fvc-input-label",d=({label:t,name:e,withAsterisk:r})=>n.createElement("label",{className:l,htmlFor:e},t,r&&n.createElement("span",{className:`${l}-asterisk`},"*")),s="fvc-input-suffix-sticky",v=({prefix:t,suffix:e,isSticky:r,inputValue:p})=>r?n.createElement("div",{className:`${s}-wrapper`},n.createElement("div",{className:`${s}-content`},n.createElement("span",null,t),p),n.createElement("div",{className:`${s}-suffix`},e)):e;!function(n,t){void 0===t&&(t={});var e=t.insertAt;if("undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],p=document.createElement("style");p.type="text/css","top"===e&&r.firstChild?r.insertBefore(p,r.firstChild):r.appendChild(p),p.styleSheet?p.styleSheet.cssText=n:p.appendChild(document.createTextNode(n))}}('.Input_fvc-input__LSVML {\n  font-family: "Roboto", sans-serif;\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 14px;\n  letter-spacing: 0;\n  color: var(--black-1000);\n  height: 32px;\n  border-radius: 4px;\n  padding: 8px 12px;\n  /* OUTLINED VARIANT */\n  /* ERROR */\n  /* EMPTY */\n  /* LABEL */\n  /* AFFIX WRAPPER */\n  /* STICKY SUFFIX */\n  /* GROUP */\n  /* ROOT */\n}\n.Input_fvc-input__LSVML::placeholder, .Input_fvc-input__LSVML::-webkit-input-placeholder, .Input_fvc-input__LSVML:-moz-placeholder, .Input_fvc-input__LSVML:-ms-input-placeholder {\n  font-family: "Roboto", sans-serif;\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 14px;\n  letter-spacing: 0;\n  color: var(--blue-300);\n}\n.Input_fvc-input-outlined__e87wk {\n  border-width: 1px;\n  border-style: solid;\n  background-color: var(--neutral-0);\n  border-color: var(--gray-400);\n}\n.Input_fvc-input-outlined__e87wk:hover {\n  background-color: var(--neutral-0);\n  border-color: var(--gray-600);\n}\n.Input_fvc-input-outlined__e87wk:focus, .Input_fvc-input-outlined__e87wk:focus-visible, .Input_fvc-input-outlined__e87wk:focus-within {\n  background-color: var(--neutral-0);\n  border-color: var(--blue-400);\n  outline: none;\n  box-shadow: none;\n}\n.Input_fvc-input-outlined__e87wk:valid, .Input_fvc-input-outlined__e87wk[data-valid=true], .Input_fvc-input-outlined__e87wk:has(input[data-valid=true]) {\n  background-color: var(--neutral-0);\n  border-color: var(--gray-400);\n}\n.Input_fvc-input-outlined__e87wk.Input_fvc-input-disabled__4uNGr, .Input_fvc-input-outlined__e87wk.Input_fvc-input-disabled__4uNGr:hover:not([disabled]), .Input_fvc-input-outlined__e87wk.Input_fvc-input-disabled__4uNGr[disabled]:hover:not([disabled]), .Input_fvc-input-outlined__e87wk:has(.Input_fvc-input-disabled__4uNGr[disabled]) {\n  background-color: var(--gray-50);\n  border-color: var(--gray-400);\n  color: var(--blue-gray-600);\n}\n.Input_fvc-input-error__034A5, .Input_fvc-input-error__034A5 .Input_fvc-input__LSVML, .Input_fvc-input-error__034A5 .Input_fvc-input-affix-wrapper__kvSeJ {\n  background-color: var(--red-100);\n  border-color: var(--red-800);\n}\n.Input_fvc-input-error__034A5:hover, .Input_fvc-input-error__034A5 .Input_fvc-input__LSVML:hover, .Input_fvc-input-error__034A5 .Input_fvc-input-affix-wrapper__kvSeJ:hover {\n  background-color: var(--red-100);\n  border-color: var(--red-600);\n}\n.Input_fvc-input-error__034A5:focus, .Input_fvc-input-error__034A5:focus-visible, .Input_fvc-input-error__034A5:focus-within, .Input_fvc-input-error__034A5 .Input_fvc-input__LSVML:focus, .Input_fvc-input-error__034A5 .Input_fvc-input__LSVML:focus-visible, .Input_fvc-input-error__034A5 .Input_fvc-input__LSVML:focus-within, .Input_fvc-input-error__034A5 .Input_fvc-input-affix-wrapper__kvSeJ:focus, .Input_fvc-input-error__034A5 .Input_fvc-input-affix-wrapper__kvSeJ:focus-visible, .Input_fvc-input-error__034A5 .Input_fvc-input-affix-wrapper__kvSeJ:focus-within {\n  background-color: var(--red-100);\n  border-color: var(--red-800);\n  outline: none;\n  box-shadow: none;\n}\n.Input_fvc-input-error__034A5:valid, .Input_fvc-input-error__034A5[data-valid=true], .Input_fvc-input-error__034A5:has(input[data-valid=true]), .Input_fvc-input-error__034A5 .Input_fvc-input__LSVML:valid, .Input_fvc-input-error__034A5 .Input_fvc-input__LSVML[data-valid=true], .Input_fvc-input-error__034A5 .Input_fvc-input__LSVML:has(input[data-valid=true]), .Input_fvc-input-error__034A5 .Input_fvc-input-affix-wrapper__kvSeJ:valid, .Input_fvc-input-error__034A5 .Input_fvc-input-affix-wrapper__kvSeJ[data-valid=true], .Input_fvc-input-error__034A5 .Input_fvc-input-affix-wrapper__kvSeJ:has(input[data-valid=true]) {\n  background-color: var(--red-100);\n  border-color: var(--red-800);\n}\n.Input_fvc-input-error__034A5.Input_fvc-input-disabled__4uNGr, .Input_fvc-input-error__034A5.Input_fvc-input-disabled__4uNGr:hover:not([disabled]), .Input_fvc-input-error__034A5.Input_fvc-input-disabled__4uNGr[disabled]:hover:not([disabled]), .Input_fvc-input-error__034A5:has(.Input_fvc-input-disabled__4uNGr[disabled]), .Input_fvc-input-error__034A5 .Input_fvc-input__LSVML.Input_fvc-input-disabled__4uNGr, .Input_fvc-input-error__034A5 .Input_fvc-input__LSVML.Input_fvc-input-disabled__4uNGr:hover:not([disabled]), .Input_fvc-input-error__034A5 .Input_fvc-input__LSVML.Input_fvc-input-disabled__4uNGr[disabled]:hover:not([disabled]), .Input_fvc-input-error__034A5 .Input_fvc-input__LSVML:has(.Input_fvc-input-disabled__4uNGr[disabled]), .Input_fvc-input-error__034A5 .Input_fvc-input-affix-wrapper__kvSeJ.Input_fvc-input-disabled__4uNGr, .Input_fvc-input-error__034A5 .Input_fvc-input-affix-wrapper__kvSeJ.Input_fvc-input-disabled__4uNGr:hover:not([disabled]), .Input_fvc-input-error__034A5 .Input_fvc-input-affix-wrapper__kvSeJ.Input_fvc-input-disabled__4uNGr[disabled]:hover:not([disabled]), .Input_fvc-input-error__034A5 .Input_fvc-input-affix-wrapper__kvSeJ:has(.Input_fvc-input-disabled__4uNGr[disabled]) {\n  background-color: var(--red-100);\n  border-color: var(--red-800);\n  color: var(--blue-gray-600);\n}\n.Input_fvc-input-error-text__hWsPQ, .Input_fvc-input-error__034A5 .Input_fvc-input-text__U2DwZ, .Input_fvc-input-error__034A5 .Input_fvc-input-affix-wrapper-text__1JVEd {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  margin-top: 4px;\n  gap: 4px;\n  font-family: "Roboto", sans-serif;\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 14px;\n  letter-spacing: 0;\n  color: var(--red-800);\n}\n.Input_fvc-input-empty__IKME- .Input_fvc-input-clear-icon__TUMTi {\n  display: none;\n}\n.Input_fvc-input-label__jlQwj {\n  font-family: "Roboto", sans-serif;\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 14px;\n  letter-spacing: 0;\n  color: var(--black-1000);\n  font-weight: 700;\n  margin-bottom: 6px;\n  display: flex;\n  width: 100%;\n  gap: 2px;\n}\n.Input_fvc-input-label-asterisk__nVu3L {\n  color: var(--red-800);\n}\n.Input_fvc-input-affix-wrapper__kvSeJ {\n  height: 32px;\n  border-radius: 4px;\n  padding: 8px 12px;\n  font-family: "Roboto", sans-serif;\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 14px;\n  letter-spacing: 0;\n  color: var(--black-1000);\n}\n.Input_fvc-input-affix-wrapper__kvSeJ::placeholder, .Input_fvc-input-affix-wrapper__kvSeJ::-webkit-input-placeholder, .Input_fvc-input-affix-wrapper__kvSeJ:-moz-placeholder, .Input_fvc-input-affix-wrapper__kvSeJ:-ms-input-placeholder {\n  font-family: "Roboto", sans-serif;\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 14px;\n  letter-spacing: 0;\n  color: var(--blue-300);\n}\n.Input_fvc-input-affix-wrapper__kvSeJ .Input_fvc-input__LSVML {\n  height: 100%;\n  /* PREFIX AND SUFFIX */\n}\n.Input_fvc-input-affix-wrapper__kvSeJ .Input_fvc-input-prefix__T788S, .Input_fvc-input-affix-wrapper__kvSeJ .Input_fvc-input-suffix__DDwrv {\n  font-family: "Roboto", sans-serif;\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 14px;\n  letter-spacing: 0;\n  color: var(--blue-gray-600);\n}\n.Input_fvc-input-affix-wrapper__kvSeJ .Input_fvc-input-prefix__T788S {\n  height: 100%;\n  line-height: 15px;\n}\n.Input_fvc-input-suffix-sticky__5yeF3 .Input_fvc-input-affix-wrapper__kvSeJ {\n  position: relative;\n}\n.Input_fvc-input-suffix-sticky-wrapper__TL0cC {\n  display: flex;\n  align-items: center;\n}\n.Input_fvc-input-suffix-sticky-content__01TIn {\n  visibility: hidden;\n  display: flex;\n  gap: 4px;\n}\n.Input_fvc-input-suffix-sticky__5yeF3 .Input_fvc-input-suffix__DDwrv {\n  position: absolute;\n  display: flex;\n  align-items: center;\n  height: 100%;\n  top: 50%;\n  transform: translateY(-50%);\n  z-index: 999;\n}\n.Input_fvc-input-group__de-LY {\n  display: flex;\n  align-items: center;\n  height: 100%;\n  /* GROUP WRAPPER */\n}\n.Input_fvc-input-group-wrapper__I6YHL {\n  height: 32px;\n  border-radius: 4px;\n  padding: 8px 12px;\n  font-family: "Roboto", sans-serif;\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 14px;\n  letter-spacing: 0;\n  color: var(--black-1000);\n  padding: 0;\n  overflow: hidden;\n  /* ADDON AFTER AND ADDON BEFORE */\n  /* AFFIX WRAPPER */\n  /* OUTLINED */\n}\n.Input_fvc-input-group-wrapper__I6YHL::placeholder, .Input_fvc-input-group-wrapper__I6YHL::-webkit-input-placeholder, .Input_fvc-input-group-wrapper__I6YHL:-moz-placeholder, .Input_fvc-input-group-wrapper__I6YHL:-ms-input-placeholder {\n  font-family: "Roboto", sans-serif;\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 14px;\n  letter-spacing: 0;\n  color: var(--blue-300);\n}\n.Input_fvc-input-group-wrapper__I6YHL .Input_fvc-input__LSVML {\n  height: 32px;\n  border-radius: 4px;\n  padding: 8px 12px;\n  border: none;\n}\n.Input_fvc-input-group-wrapper__I6YHL .Input_fvc-input-group-addon__csVuR {\n  font-family: "Roboto", sans-serif;\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 14px;\n  letter-spacing: 0;\n  color: var(--blue-gray-600);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: auto;\n  height: 30px;\n  border: none;\n  background-color: transparent;\n  line-height: 15px;\n  padding: 0;\n}\n.Input_fvc-input-group-wrapper__I6YHL .Input_fvc-input-group-addon__csVuR:first-child {\n  padding-left: 12px;\n}\n.Input_fvc-input-group-wrapper__I6YHL .Input_fvc-input-group-addon__csVuR:last-child {\n  padding-right: 12px;\n}\n.Input_fvc-input-group-wrapper__I6YHL .Input_fvc-input-affix-wrapper__kvSeJ {\n  border: none;\n}\n.Input_fvc-input-group-wrapper__I6YHL .Input_fvc-input-affix-wrapper__kvSeJ .Input_fvc-input__LSVML {\n  height: auto;\n}\n.Input_fvc-input-group-wrapper-outlined__oh8V9.Input_fvc-input-group-wrapper-disabled__fedSH .Input_fvc-input-group-addon__csVuR {\n  font-family: "Roboto", sans-serif;\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 14px;\n  letter-spacing: 0;\n  color: var(--blue-gray-600);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: auto;\n  height: 30px;\n  border: none;\n  background-color: transparent;\n  line-height: 15px;\n  padding: 0;\n}\n.Input_fvc-input-group-wrapper-outlined__oh8V9.Input_fvc-input-group-wrapper-disabled__fedSH .Input_fvc-input-group-addon__csVuR:first-child {\n  padding-left: 12px;\n}\n.Input_fvc-input-group-wrapper-outlined__oh8V9.Input_fvc-input-group-wrapper-disabled__fedSH .Input_fvc-input-group-addon__csVuR:last-child {\n  padding-right: 12px;\n}\n.Input_fvc-input-group-wrapper-outlined__oh8V9.Input_fvc-input-group-wrapper-disabled__fedSH .Input_fvc-input-group-addon__csVuR:hover:not([disabled]) {\n  font-family: "Roboto", sans-serif;\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 14px;\n  letter-spacing: 0;\n  color: var(--blue-gray-600);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: auto;\n  height: 30px;\n  border: none;\n  background-color: transparent;\n  line-height: 15px;\n  padding: 0;\n}\n.Input_fvc-input-group-wrapper-outlined__oh8V9.Input_fvc-input-group-wrapper-disabled__fedSH .Input_fvc-input-group-addon__csVuR:hover:not([disabled]):first-child {\n  padding-left: 12px;\n}\n.Input_fvc-input-group-wrapper-outlined__oh8V9.Input_fvc-input-group-wrapper-disabled__fedSH .Input_fvc-input-group-addon__csVuR:hover:not([disabled]):last-child {\n  padding-right: 12px;\n}\n.Input_fvc-input-root__cwBrU {\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n}');const I="fvc-input",g=`${I}-root`,h=`${I}-suffix-sticky`,b={clearIcon:n.createElement(p.Clear,{width:16,height:16,color:"var(--blue-gray-600)","aria-label":"input-clear-icon"})},x=p=>{var{allowClear:u,className:o,defaultValue:a,error:_,label:l,name:s,onChange:x,placeholder:w,prefix:m,suffix:y,suffixType:k="fixed",testId:S,textTransform:A,value:L,variant:V="outlined",withAsterisk:R=!1}=p,N=function(n,t){var e={};for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&t.indexOf(r)<0&&(e[r]=n[r]);if(null!=n&&"function"==typeof Object.getOwnPropertySymbols){var p=0;for(r=Object.getOwnPropertySymbols(n);p<r.length;p++)t.indexOf(r[p])<0&&Object.prototype.propertyIsEnumerable.call(n,r[p])&&(e[r[p]]=n[r[p]])}return e}(p,["allowClear","className","defaultValue","error","label","name","onChange","placeholder","prefix","suffix","suffixType","testId","textTransform","value","variant","withAsterisk"]);const[E,O]=t(a),J=void 0!==L,M=J?L:E,T=e((n=>{const{value:t}=n.target,e=A?i(t,A):t;J||O(e),null==x||x(Object.assign(Object.assign({},n),{target:Object.assign(Object.assign({},n.target),{value:e})}))}),[J,x,A]),G="sticky"===k&&!!y,j=f(o,`${I}-${V}`,{[`${I}-error`]:!!_,[`${I}-empty`]:!M,[`${h}`]:G}),H=u&&b;return n.createElement("div",{className:g},l&&n.createElement(d,{label:l,name:s,withAsterisk:R}),n.createElement(r,Object.assign({},N,{prefixCls:I,className:j,required:!0,pattern:".*\\S.*","data-testid":S,name:s,value:M,onChange:T,prefix:m,suffix:n.createElement(v,{suffix:y,prefix:m,inputValue:M,isSticky:G}),allowClear:H,placeholder:G?void 0:w,"data-valid":!!M})),"string"==typeof _&&n.createElement(c,{error:_}))};export{x as Input};

package/dist/lib/input/src/Input.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { InputProps } from './types';
+import './Input.scss';
+export declare const Input: ({ allowClear, className, defaultValue, error, label, name, onChange, placeholder, prefix, suffix, suffixType, testId, textTransform, value: externalValue, variant, withAsterisk, ...rest }: InputProps) => React.JSX.Element;

package/dist/lib/input/src/components/InputError.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { InputErrorProps } from '../types/Input.types';
+export declare const InputError: ({ error }: InputErrorProps) => React.JSX.Element;

package/dist/lib/input/src/components/InputLabel.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { InputLabelProps } from '../types/Input.types';
+export declare const InputLabel: ({ label, name, withAsterisk }: InputLabelProps) => React.JSX.Element;

package/dist/lib/input/src/components/InputSuffix.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { InputSuffixProps } from '../types/Input.types';
+export declare const InputSuffix: ({ prefix, suffix, isSticky, inputValue, }: InputSuffixProps) => string | number | bigint | boolean | React.JSX.Element | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | null | undefined;

package/dist/lib/input/src/index.d.ts

@@ -0,0 +1 @@
+export { Input } from './Input';

package/dist/lib/input/src/types/Input.types.d.ts

@@ -0,0 +1,35 @@
+import { ReactNode } from 'react';
+import { type InputProps as DefaultInputProps } from 'antd';
+interface BaseInputProps extends Omit<DefaultInputProps, 'variant' | 'suffix'> {
+    testId?: string;
+    error?: string | boolean;
+    label?: ReactNode;
+    withAsterisk?: boolean;
+    variant?: 'outlined';
+    allowClear?: boolean;
+    textTransform?: 'uppercase' | 'lowercase' | 'capitalize' | 'integer';
+}
+interface StickySuffixProps extends BaseInputProps {
+    suffixType?: 'sticky';
+    suffix?: string;
+}
+interface FixedSuffixProps extends BaseInputProps {
+    suffixType?: 'fixed';
+    suffix?: ReactNode;
+}
+export type InputProps = StickySuffixProps | FixedSuffixProps;
+export type InputErrorProps = {
+    error: InputProps['error'];
+};
+export type InputLabelProps = {
+    label?: InputProps['label'];
+    name?: InputProps['name'];
+    withAsterisk?: InputProps['withAsterisk'];
+};
+export type InputSuffixProps = {
+    prefix?: InputProps['prefix'];
+    inputValue?: InputProps['value'];
+    suffix?: InputProps['suffix'];
+    isSticky: boolean;
+};
+export {};

package/dist/lib/input/src/types/index.d.ts

@@ -0,0 +1 @@
+export * from './Input.types';

package/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@fvc/input",
+  "version": "1.2.0",
+  "main": "./dist/lib/index.js",
+  "types": "./dist/lib/input/src/index.d.ts",
+  "files": [
+    "dist/lib/index.js",
+    "dist/lib/input",
+    "package.json"
+  ],
+  "exports": {
+    ".": {
+      "import": "./dist/lib/index.js",
+      "types": "./dist/lib/input/src/index.d.ts"
+    },
+    "./types": {
+      "types": "./dist/lib/input/src/types/index.d.ts"
+    }
+  },
+  "scripts": {
+    "build": "rm -rf dist && rm -rf .rollup.cache && eslint --config ../../eslint.config.js . && bunx tsc --noEmit && rollup -c ./rollup.config.mjs"
+  },
+  "dependencies": {
+    "react": "^18.0.0",
+    "antd": "^5.0.0"
+  },
+  "peerDependencies": {
+    "@fvc/icons": "*",
+    "@fvc/utils": "*",
+    "react": "^18.0.0",
+    "antd": "^5.0.0"
+  }
+}