@activecollab/components 1.0.392 → 1.0.393
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/Input/Input.js +4 -4
- package/dist/cjs/components/Input/Input.js.map +1 -1
- package/dist/cjs/components/Input/Styles.js +9 -1
- package/dist/cjs/components/Input/Styles.js.map +1 -1
- package/dist/esm/components/Input/Input.d.ts +2 -1
- package/dist/esm/components/Input/Input.d.ts.map +1 -1
- package/dist/esm/components/Input/Input.js +4 -4
- package/dist/esm/components/Input/Input.js.map +1 -1
- package/dist/esm/components/Input/Styles.d.ts +2 -0
- package/dist/esm/components/Input/Styles.d.ts.map +1 -1
- package/dist/esm/components/Input/Styles.js +9 -1
- package/dist/esm/components/Input/Styles.js.map +1 -1
- package/dist/index.js +13 -5
- package/dist/index.js.map +1 -1
- package/dist/index.min.js +1 -1
- package/dist/index.min.js.map +1 -1
- package/package.json +1 -1
|
@@ -9,7 +9,7 @@ var _react = _interopRequireWildcard(require("react"));
|
|
|
9
9
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
10
10
|
var _Styles = require("./Styles");
|
|
11
11
|
var _useForkRef = _interopRequireDefault(require("../../utils/useForkRef"));
|
|
12
|
-
var _excluded = ["className", "style", "type", "disabled", "size", "invalid", "startAdornment", "endAdornment", "wrapRef", "
|
|
12
|
+
var _excluded = ["className", "style", "type", "disabled", "size", "invalid", "startAdornment", "endAdornment", "wrapRef", "wrapperClick", "typographyProps"];
|
|
13
13
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
14
14
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
15
15
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
@@ -31,8 +31,8 @@ var Input = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
|
|
31
31
|
startAdornment = _ref.startAdornment,
|
|
32
32
|
endAdornment = _ref.endAdornment,
|
|
33
33
|
wrapRef = _ref.wrapRef,
|
|
34
|
-
inputClassName = _ref.inputClassName,
|
|
35
34
|
wrapperClick = _ref.wrapperClick,
|
|
35
|
+
typographyProps = _ref.typographyProps,
|
|
36
36
|
rest = _objectWithoutProperties(_ref, _excluded);
|
|
37
37
|
var intInputRef = (0, _react.useRef)(null);
|
|
38
38
|
var handleRef = (0, _useForkRef.default)(ref, intInputRef);
|
|
@@ -54,10 +54,10 @@ var Input = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
|
|
54
54
|
type: type,
|
|
55
55
|
$size: size,
|
|
56
56
|
disabled: disabled,
|
|
57
|
-
className:
|
|
57
|
+
className: "c-input",
|
|
58
58
|
"aria-invalid": invalid,
|
|
59
59
|
"data-form-type": "other"
|
|
60
|
-
}, rest)), endAdornment);
|
|
60
|
+
}, typographyProps, rest)), endAdornment);
|
|
61
61
|
});
|
|
62
62
|
exports.Input = Input;
|
|
63
63
|
Input.displayName = "Input";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.js","names":["Input","React","forwardRef","ref","className","style","type","disabled","size","invalid","startAdornment","endAdornment","wrapRef","
|
|
1
|
+
{"version":3,"file":"Input.js","names":["Input","React","forwardRef","ref","className","style","type","disabled","size","invalid","startAdornment","endAdornment","wrapRef","wrapperClick","typographyProps","rest","intInputRef","useRef","handleRef","useForkRef","handleWrapperClick","useCallback","current","focus","classnames","displayName"],"sources":["../../../../src/components/Input/Input.tsx"],"sourcesContent":["import React, {\n ReactNode,\n Ref,\n useCallback,\n useRef,\n InputHTMLAttributes,\n} from \"react\";\nimport classnames from \"classnames\";\nimport { StyledInput, StyledInputWrapper } from \"./Styles\";\nimport useForkRef from \"../../utils/useForkRef\";\nimport { InputSize } from \"./types\";\nimport { ITypographyProps } from \"../Typography/Typography\";\n\ntype InputNativeProps = InputHTMLAttributes<HTMLInputElement>;\n\nexport interface InputProps extends Omit<InputNativeProps, \"size\" | \"ref\"> {\n /** Velicina inputa koja definse font-size i border radius */\n size?: InputSize;\n invalid?: boolean;\n startAdornment?: ReactNode;\n endAdornment?: ReactNode;\n wrapRef?: Ref<HTMLDivElement>;\n wrapperClick?: () => void;\n typographyProps?: Omit<ITypographyProps, \"size\">;\n}\n\nexport const Input = React.forwardRef<HTMLInputElement, InputProps>(\n (\n {\n className = \"\",\n style,\n type = \"text\",\n disabled = false,\n size = \"regular\",\n invalid = false,\n startAdornment,\n endAdornment,\n wrapRef,\n wrapperClick,\n typographyProps,\n ...rest\n },\n ref\n ) => {\n const intInputRef = useRef<HTMLInputElement>(null);\n const handleRef = useForkRef(ref, intInputRef);\n\n const handleWrapperClick = useCallback(() => {\n intInputRef.current?.focus();\n wrapperClick && wrapperClick();\n }, [wrapperClick]);\n\n return (\n <StyledInputWrapper\n $size={size}\n $invalid={invalid}\n $disabled={disabled}\n style={style}\n className={classnames(\"c-input-wrapper\", className)}\n onClick={handleWrapperClick}\n ref={wrapRef}\n >\n {startAdornment}\n <StyledInput\n ref={handleRef}\n type={type}\n $size={size}\n disabled={disabled}\n className=\"c-input\"\n aria-invalid={invalid}\n data-form-type=\"other\"\n {...typographyProps}\n {...rest}\n />\n {endAdornment}\n </StyledInputWrapper>\n );\n }\n);\n\nInput.displayName = \"Input\";\n"],"mappings":";;;;;;;AAAA;AAOA;AACA;AACA;AAAgD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiBzC,IAAMA,KAAK,gBAAGC,cAAK,CAACC,UAAU,CACnC,gBAeEC,GAAG,EACA;EAAA,0BAdDC,SAAS;IAATA,SAAS,+BAAG,EAAE;IACdC,KAAK,QAALA,KAAK;IAAA,iBACLC,IAAI;IAAJA,IAAI,0BAAG,MAAM;IAAA,qBACbC,QAAQ;IAARA,QAAQ,8BAAG,KAAK;IAAA,iBAChBC,IAAI;IAAJA,IAAI,0BAAG,SAAS;IAAA,oBAChBC,OAAO;IAAPA,OAAO,6BAAG,KAAK;IACfC,cAAc,QAAdA,cAAc;IACdC,YAAY,QAAZA,YAAY;IACZC,OAAO,QAAPA,OAAO;IACPC,YAAY,QAAZA,YAAY;IACZC,eAAe,QAAfA,eAAe;IACZC,IAAI;EAIT,IAAMC,WAAW,GAAG,IAAAC,aAAM,EAAmB,IAAI,CAAC;EAClD,IAAMC,SAAS,GAAG,IAAAC,mBAAU,EAAChB,GAAG,EAAEa,WAAW,CAAC;EAE9C,IAAMI,kBAAkB,GAAG,IAAAC,kBAAW,EAAC,YAAM;IAAA;IAC3C,wBAAAL,WAAW,CAACM,OAAO,yDAAnB,qBAAqBC,KAAK,EAAE;IAC5BV,YAAY,IAAIA,YAAY,EAAE;EAChC,CAAC,EAAE,CAACA,YAAY,CAAC,CAAC;EAElB,oBACE,6BAAC,0BAAkB;IACjB,KAAK,EAAEL,IAAK;IACZ,QAAQ,EAAEC,OAAQ;IAClB,SAAS,EAAEF,QAAS;IACpB,KAAK,EAAEF,KAAM;IACb,SAAS,EAAE,IAAAmB,mBAAU,EAAC,iBAAiB,EAAEpB,SAAS,CAAE;IACpD,OAAO,EAAEgB,kBAAmB;IAC5B,GAAG,EAAER;EAAQ,GAEZF,cAAc,eACf,6BAAC,mBAAW;IACV,GAAG,EAAEQ,SAAU;IACf,IAAI,EAAEZ,IAAK;IACX,KAAK,EAAEE,IAAK;IACZ,QAAQ,EAAED,QAAS;IACnB,SAAS,EAAC,SAAS;IACnB,gBAAcE,OAAQ;IACtB,kBAAe;EAAO,GAClBK,eAAe,EACfC,IAAI,EACR,EACDJ,YAAY,CACM;AAEzB,CAAC,CACF;AAAC;AAEFX,KAAK,CAACyB,WAAW,GAAG,OAAO"}
|
|
@@ -31,7 +31,7 @@ StyledInputWrapper.displayName = "StyledInputWrapper";
|
|
|
31
31
|
var StyledInput = _styledComponents.default.input.withConfig({
|
|
32
32
|
displayName: "Styles__StyledInput",
|
|
33
33
|
componentId: "sc-ce8kcp-1"
|
|
34
|
-
})(["background-color:var(--input-background-color);border:none;color:var(--color-theme-900);font-size:0.875rem;font-weight:400;letter-spacing:0.02em;margin-block:0;margin-inline:4px;outline:none;padding:0;width:100%;&::placeholder{color:var(--color-theme-transparent-500);}", " ", " ", " ", ""], function (props) {
|
|
34
|
+
})(["background-color:var(--input-background-color);border:none;color:var(--color-theme-900);font-size:0.875rem;font-weight:400;letter-spacing:0.02em;margin-block:0;margin-inline:4px;outline:none;padding:0;width:100%;&::placeholder{color:var(--color-theme-transparent-500);}", " ", " ", " ", " ", " ", " ", " ", ""], function (props) {
|
|
35
35
|
return props.$size === "big" && (0, _styledComponents.css)(["font-size:1rem;"]);
|
|
36
36
|
}, function (props) {
|
|
37
37
|
return props.$size === "biggest" && (0, _styledComponents.css)(["font-size:1.25rem;font-weight:500;"]);
|
|
@@ -39,6 +39,14 @@ var StyledInput = _styledComponents.default.input.withConfig({
|
|
|
39
39
|
return props.disabled && (0, _styledComponents.css)(["cursor:default;"]);
|
|
40
40
|
}, function (props) {
|
|
41
41
|
return props.$loading && (0, _styledComponents.css)(["cursor:progress;"]);
|
|
42
|
+
}, function (props) {
|
|
43
|
+
return props.align === "left" && (0, _styledComponents.css)(["text-align:left;"]);
|
|
44
|
+
}, function (props) {
|
|
45
|
+
return props.align === "right" && (0, _styledComponents.css)(["text-align:right;"]);
|
|
46
|
+
}, function (props) {
|
|
47
|
+
return props.align === "center" && (0, _styledComponents.css)(["text-align:center;"]);
|
|
48
|
+
}, function (props) {
|
|
49
|
+
return props.align === "justify" && (0, _styledComponents.css)(["text-align:justify;"]);
|
|
42
50
|
});
|
|
43
51
|
exports.StyledInput = StyledInput;
|
|
44
52
|
StyledInput.displayName = "StyledInput";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Styles.js","names":["StyledInputWrapper","styled","div","FontStyle","BoxSizingStyle","props","$size","css","$disabled","$invalid","displayName","StyledInput","input","disabled","$loading"],"sources":["../../../../src/components/Input/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { InputSize } from \"./types\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\n\ninterface StyledInputWrapperProps {\n $size?: InputSize;\n $invalid?: boolean;\n $disabled?: boolean;\n}\n\nexport const StyledInputWrapper = styled.div<StyledInputWrapperProps>`\n align-items: center;\n background-color: var(--input-background-color);\n border-color: var(--color-theme-500);\n border-radius: 8px;\n border-style: solid;\n border-width: 1px;\n cursor: text;\n display: flex;\n height: 32px;\n padding-block: 4px;\n padding-inline: 4px;\n transition: all 0.3s ease;\n width: 360px;\n\n ${FontStyle}\n ${BoxSizingStyle}\n\n ${(props) =>\n props.$size === \"small\" &&\n css`\n border-radius: 6px;\n height: 24px;\n `}\n\n ${(props) =>\n props.$size === \"big\" &&\n css`\n height: 40px;\n `}\n\n ${(props) =>\n props.$size === \"biggest\" &&\n css`\n height: 48px;\n `}\n\n ${(props) =>\n props.$disabled &&\n css`\n cursor: default;\n opacity: 50%;\n `}\n\n ${(props) =>\n !props.$disabled &&\n !props.$invalid &&\n css`\n &:focus-within,\n &:hover {\n border-color: var(--color-primary);\n }\n `}\n\n ${(props) =>\n !props.$disabled &&\n props.$invalid &&\n css`\n border-color: var(--red-alert);\n `}\n`;\n\nStyledInputWrapper.displayName = \"StyledInputWrapper\";\n\ninterface StyledInputProps {\n $size?: InputSize;\n $loading?: boolean;\n}\n\nexport const StyledInput = styled.input<StyledInputProps>`\n background-color: var(--input-background-color);\n border: none;\n color: var(--color-theme-900);\n /* @TODO: Prebaciti velicine fontova, weight, razmake, itd... u naše varijable. */\n font-size: 0.875rem;\n font-weight: 400;\n letter-spacing: 0.02em;\n margin-block: 0;\n margin-inline: 4px;\n outline: none;\n padding: 0;\n width: 100%;\n\n &::placeholder {\n color: var(--color-theme-transparent-500);\n }\n\n ${(props) =>\n props.$size === \"big\" &&\n css`\n font-size: 1rem;\n `}\n\n ${(props) =>\n props.$size === \"biggest\" &&\n css`\n font-size: 1.25rem;\n font-weight: 500;\n `}\n\n ${(props) =>\n props.disabled &&\n css`\n cursor: default;\n `}\n ${(props) =>\n props.$loading &&\n css`\n cursor: progress;\n `}\n`;\n\nStyledInput.displayName = \"StyledInput\";\n"],"mappings":";;;;;;;AAAA;AAEA;AACA;AAAyC;AAAA;
|
|
1
|
+
{"version":3,"file":"Styles.js","names":["StyledInputWrapper","styled","div","FontStyle","BoxSizingStyle","props","$size","css","$disabled","$invalid","displayName","StyledInput","input","disabled","$loading","align"],"sources":["../../../../src/components/Input/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { InputSize } from \"./types\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\nimport { ITypographyProps } from \"../Typography/Typography\";\n\ninterface StyledInputWrapperProps {\n $size?: InputSize;\n $invalid?: boolean;\n $disabled?: boolean;\n}\n\nexport const StyledInputWrapper = styled.div<StyledInputWrapperProps>`\n align-items: center;\n background-color: var(--input-background-color);\n border-color: var(--color-theme-500);\n border-radius: 8px;\n border-style: solid;\n border-width: 1px;\n cursor: text;\n display: flex;\n height: 32px;\n padding-block: 4px;\n padding-inline: 4px;\n transition: all 0.3s ease;\n width: 360px;\n\n ${FontStyle}\n ${BoxSizingStyle}\n\n ${(props) =>\n props.$size === \"small\" &&\n css`\n border-radius: 6px;\n height: 24px;\n `}\n\n ${(props) =>\n props.$size === \"big\" &&\n css`\n height: 40px;\n `}\n\n ${(props) =>\n props.$size === \"biggest\" &&\n css`\n height: 48px;\n `}\n\n ${(props) =>\n props.$disabled &&\n css`\n cursor: default;\n opacity: 50%;\n `}\n\n ${(props) =>\n !props.$disabled &&\n !props.$invalid &&\n css`\n &:focus-within,\n &:hover {\n border-color: var(--color-primary);\n }\n `}\n\n ${(props) =>\n !props.$disabled &&\n props.$invalid &&\n css`\n border-color: var(--red-alert);\n `}\n`;\n\nStyledInputWrapper.displayName = \"StyledInputWrapper\";\n\ninterface StyledInputProps {\n $size?: InputSize;\n $loading?: boolean;\n align?: ITypographyProps[\"align\"];\n}\n\nexport const StyledInput = styled.input<StyledInputProps>`\n background-color: var(--input-background-color);\n border: none;\n color: var(--color-theme-900);\n /* @TODO: Prebaciti velicine fontova, weight, razmake, itd... u naše varijable. */\n font-size: 0.875rem;\n font-weight: 400;\n letter-spacing: 0.02em;\n margin-block: 0;\n margin-inline: 4px;\n outline: none;\n padding: 0;\n width: 100%;\n\n &::placeholder {\n color: var(--color-theme-transparent-500);\n }\n\n ${(props) =>\n props.$size === \"big\" &&\n css`\n font-size: 1rem;\n `}\n\n ${(props) =>\n props.$size === \"biggest\" &&\n css`\n font-size: 1.25rem;\n font-weight: 500;\n `}\n\n ${(props) =>\n props.disabled &&\n css`\n cursor: default;\n `}\n ${(props) =>\n props.$loading &&\n css`\n cursor: progress;\n `}\n\n /* @TODO: Po potrebi dodati jos propertija iz tipografije. */\n\n ${(props) =>\n props.align === \"left\" &&\n css`\n text-align: left;\n `}\n\n ${(props) =>\n props.align === \"right\" &&\n css`\n text-align: right;\n `}\n\n ${(props) =>\n props.align === \"center\" &&\n css`\n text-align: center;\n `}\n \n ${(props) =>\n props.align === \"justify\" &&\n css`\n text-align: justify;\n `}\n`;\n\nStyledInput.displayName = \"StyledInput\";\n"],"mappings":";;;;;;;AAAA;AAEA;AACA;AAAyC;AAAA;AASlC,IAAMA,kBAAkB,GAAGC,yBAAM,CAACC,GAAG;EAAA;EAAA;AAAA,2TAexCC,oBAAS,EACTC,8BAAc,EAEd,UAACC,KAAK;EAAA,OACNA,KAAK,CAACC,KAAK,KAAK,OAAO,QACvBC,qBAAG,qCAGF;AAAA,GAED,UAACF,KAAK;EAAA,OACNA,KAAK,CAACC,KAAK,KAAK,KAAK,QACrBC,qBAAG,mBAEF;AAAA,GAEC,UAACF,KAAK;EAAA,OACRA,KAAK,CAACC,KAAK,KAAK,SAAS,QACzBC,qBAAG,mBAEF;AAAA,GAED,UAACF,KAAK;EAAA,OACNA,KAAK,CAACG,SAAS,QACfD,qBAAG,kCAGF;AAAA,GAED,UAACF,KAAK;EAAA,OACN,CAACA,KAAK,CAACG,SAAS,IAChB,CAACH,KAAK,CAACI,QAAQ,QACfF,qBAAG,iEAKF;AAAA,GAED,UAACF,KAAK;EAAA,OACN,CAACA,KAAK,CAACG,SAAS,IAChBH,KAAK,CAACI,QAAQ,QACdF,qBAAG,qCAEF;AAAA,EACJ;AAAC;AAEFP,kBAAkB,CAACU,WAAW,GAAG,oBAAoB;AAQ9C,IAAMC,WAAW,GAAGV,yBAAM,CAACW,KAAK;EAAA;EAAA;AAAA,6TAkBnC,UAACP,KAAK;EAAA,OACNA,KAAK,CAACC,KAAK,KAAK,KAAK,QACrBC,qBAAG,sBAEF;AAAA,GAED,UAACF,KAAK;EAAA,OACNA,KAAK,CAACC,KAAK,KAAK,SAAS,QACzBC,qBAAG,yCAGF;AAAA,GAED,UAACF,KAAK;EAAA,OACNA,KAAK,CAACQ,QAAQ,QACdN,qBAAG,sBAEF;AAAA,GACD,UAACF,KAAK;EAAA,OACNA,KAAK,CAACS,QAAQ,QACdP,qBAAG,uBAEF;AAAA,GAIC,UAACF,KAAK;EAAA,OACRA,KAAK,CAACU,KAAK,KAAK,MAAM,QACtBR,qBAAG,uBAEF;AAAA,GAED,UAACF,KAAK;EAAA,OACNA,KAAK,CAACU,KAAK,KAAK,OAAO,QACvBR,qBAAG,wBAEF;AAAA,GAED,UAACF,KAAK;EAAA,OACNA,KAAK,CAACU,KAAK,KAAK,QAAQ,QACxBR,qBAAG,yBAEF;AAAA,GAED,UAACF,KAAK;EAAA,OACNA,KAAK,CAACU,KAAK,KAAK,SAAS,QACzBR,qBAAG,0BAEF;AAAA,EACJ;AAAC;AAEFI,WAAW,CAACD,WAAW,GAAG,aAAa"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import React, { ReactNode, Ref, InputHTMLAttributes } from "react";
|
|
2
2
|
import { InputSize } from "./types";
|
|
3
|
+
import { ITypographyProps } from "../Typography/Typography";
|
|
3
4
|
declare type InputNativeProps = InputHTMLAttributes<HTMLInputElement>;
|
|
4
5
|
export interface InputProps extends Omit<InputNativeProps, "size" | "ref"> {
|
|
5
6
|
/** Velicina inputa koja definse font-size i border radius */
|
|
@@ -9,7 +10,7 @@ export interface InputProps extends Omit<InputNativeProps, "size" | "ref"> {
|
|
|
9
10
|
endAdornment?: ReactNode;
|
|
10
11
|
wrapRef?: Ref<HTMLDivElement>;
|
|
11
12
|
wrapperClick?: () => void;
|
|
12
|
-
|
|
13
|
+
typographyProps?: Omit<ITypographyProps, "size">;
|
|
13
14
|
}
|
|
14
15
|
export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
|
|
15
16
|
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../../src/components/Input/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,SAAS,EACT,GAAG,EAGH,mBAAmB,EACpB,MAAM,OAAO,CAAC;AAIf,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../../src/components/Input/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,SAAS,EACT,GAAG,EAGH,mBAAmB,EACpB,MAAM,OAAO,CAAC;AAIf,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AACpC,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAE5D,aAAK,gBAAgB,GAAG,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;AAE9D,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,gBAAgB,EAAE,MAAM,GAAG,KAAK,CAAC;IACxE,6DAA6D;IAC7D,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,OAAO,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC9B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,eAAe,CAAC,EAAE,IAAI,CAAC,gBAAgB,EAAE,MAAM,CAAC,CAAC;CAClD;AAED,eAAO,MAAM,KAAK,qFAoDjB,CAAC"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
2
|
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
|
3
|
-
var _excluded = ["className", "style", "type", "disabled", "size", "invalid", "startAdornment", "endAdornment", "wrapRef", "
|
|
3
|
+
var _excluded = ["className", "style", "type", "disabled", "size", "invalid", "startAdornment", "endAdornment", "wrapRef", "wrapperClick", "typographyProps"];
|
|
4
4
|
import React, { useCallback, useRef } from "react";
|
|
5
5
|
import classnames from "classnames";
|
|
6
6
|
import { StyledInput, StyledInputWrapper } from "./Styles";
|
|
@@ -20,8 +20,8 @@ export var Input = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
20
20
|
startAdornment = _ref.startAdornment,
|
|
21
21
|
endAdornment = _ref.endAdornment,
|
|
22
22
|
wrapRef = _ref.wrapRef,
|
|
23
|
-
inputClassName = _ref.inputClassName,
|
|
24
23
|
wrapperClick = _ref.wrapperClick,
|
|
24
|
+
typographyProps = _ref.typographyProps,
|
|
25
25
|
rest = _objectWithoutPropertiesLoose(_ref, _excluded);
|
|
26
26
|
var intInputRef = useRef(null);
|
|
27
27
|
var handleRef = useForkRef(ref, intInputRef);
|
|
@@ -43,10 +43,10 @@ export var Input = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
43
43
|
type: type,
|
|
44
44
|
$size: size,
|
|
45
45
|
disabled: disabled,
|
|
46
|
-
className:
|
|
46
|
+
className: "c-input",
|
|
47
47
|
"aria-invalid": invalid,
|
|
48
48
|
"data-form-type": "other"
|
|
49
|
-
}, rest)), endAdornment);
|
|
49
|
+
}, typographyProps, rest)), endAdornment);
|
|
50
50
|
});
|
|
51
51
|
Input.displayName = "Input";
|
|
52
52
|
//# sourceMappingURL=Input.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.js","names":["React","useCallback","useRef","classnames","StyledInput","StyledInputWrapper","useForkRef","Input","forwardRef","ref","className","style","type","disabled","size","invalid","startAdornment","endAdornment","wrapRef","
|
|
1
|
+
{"version":3,"file":"Input.js","names":["React","useCallback","useRef","classnames","StyledInput","StyledInputWrapper","useForkRef","Input","forwardRef","ref","className","style","type","disabled","size","invalid","startAdornment","endAdornment","wrapRef","wrapperClick","typographyProps","rest","intInputRef","handleRef","handleWrapperClick","current","focus","displayName"],"sources":["../../../../src/components/Input/Input.tsx"],"sourcesContent":["import React, {\n ReactNode,\n Ref,\n useCallback,\n useRef,\n InputHTMLAttributes,\n} from \"react\";\nimport classnames from \"classnames\";\nimport { StyledInput, StyledInputWrapper } from \"./Styles\";\nimport useForkRef from \"../../utils/useForkRef\";\nimport { InputSize } from \"./types\";\nimport { ITypographyProps } from \"../Typography/Typography\";\n\ntype InputNativeProps = InputHTMLAttributes<HTMLInputElement>;\n\nexport interface InputProps extends Omit<InputNativeProps, \"size\" | \"ref\"> {\n /** Velicina inputa koja definse font-size i border radius */\n size?: InputSize;\n invalid?: boolean;\n startAdornment?: ReactNode;\n endAdornment?: ReactNode;\n wrapRef?: Ref<HTMLDivElement>;\n wrapperClick?: () => void;\n typographyProps?: Omit<ITypographyProps, \"size\">;\n}\n\nexport const Input = React.forwardRef<HTMLInputElement, InputProps>(\n (\n {\n className = \"\",\n style,\n type = \"text\",\n disabled = false,\n size = \"regular\",\n invalid = false,\n startAdornment,\n endAdornment,\n wrapRef,\n wrapperClick,\n typographyProps,\n ...rest\n },\n ref\n ) => {\n const intInputRef = useRef<HTMLInputElement>(null);\n const handleRef = useForkRef(ref, intInputRef);\n\n const handleWrapperClick = useCallback(() => {\n intInputRef.current?.focus();\n wrapperClick && wrapperClick();\n }, [wrapperClick]);\n\n return (\n <StyledInputWrapper\n $size={size}\n $invalid={invalid}\n $disabled={disabled}\n style={style}\n className={classnames(\"c-input-wrapper\", className)}\n onClick={handleWrapperClick}\n ref={wrapRef}\n >\n {startAdornment}\n <StyledInput\n ref={handleRef}\n type={type}\n $size={size}\n disabled={disabled}\n className=\"c-input\"\n aria-invalid={invalid}\n data-form-type=\"other\"\n {...typographyProps}\n {...rest}\n />\n {endAdornment}\n </StyledInputWrapper>\n );\n }\n);\n\nInput.displayName = \"Input\";\n"],"mappings":";;;AAAA,OAAOA,KAAK,IAGVC,WAAW,EACXC,MAAM,QAED,OAAO;AACd,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,WAAW,EAAEC,kBAAkB,QAAQ,UAAU;AAC1D,OAAOC,UAAU,MAAM,wBAAwB;AAiB/C,OAAO,IAAMC,KAAK,gBAAGP,KAAK,CAACQ,UAAU,CACnC,gBAeEC,GAAG,EACA;EAAA,0BAdDC,SAAS;IAATA,SAAS,+BAAG,EAAE;IACdC,KAAK,QAALA,KAAK;IAAA,iBACLC,IAAI;IAAJA,IAAI,0BAAG,MAAM;IAAA,qBACbC,QAAQ;IAARA,QAAQ,8BAAG,KAAK;IAAA,iBAChBC,IAAI;IAAJA,IAAI,0BAAG,SAAS;IAAA,oBAChBC,OAAO;IAAPA,OAAO,6BAAG,KAAK;IACfC,cAAc,QAAdA,cAAc;IACdC,YAAY,QAAZA,YAAY;IACZC,OAAO,QAAPA,OAAO;IACPC,YAAY,QAAZA,YAAY;IACZC,eAAe,QAAfA,eAAe;IACZC,IAAI;EAIT,IAAMC,WAAW,GAAGpB,MAAM,CAAmB,IAAI,CAAC;EAClD,IAAMqB,SAAS,GAAGjB,UAAU,CAACG,GAAG,EAAEa,WAAW,CAAC;EAE9C,IAAME,kBAAkB,GAAGvB,WAAW,CAAC,YAAM;IAAA;IAC3C,wBAAAqB,WAAW,CAACG,OAAO,qBAAnB,qBAAqBC,KAAK,EAAE;IAC5BP,YAAY,IAAIA,YAAY,EAAE;EAChC,CAAC,EAAE,CAACA,YAAY,CAAC,CAAC;EAElB,oBACE,oBAAC,kBAAkB;IACjB,KAAK,EAAEL,IAAK;IACZ,QAAQ,EAAEC,OAAQ;IAClB,SAAS,EAAEF,QAAS;IACpB,KAAK,EAAEF,KAAM;IACb,SAAS,EAAER,UAAU,CAAC,iBAAiB,EAAEO,SAAS,CAAE;IACpD,OAAO,EAAEc,kBAAmB;IAC5B,GAAG,EAAEN;EAAQ,GAEZF,cAAc,eACf,oBAAC,WAAW;IACV,GAAG,EAAEO,SAAU;IACf,IAAI,EAAEX,IAAK;IACX,KAAK,EAAEE,IAAK;IACZ,QAAQ,EAAED,QAAS;IACnB,SAAS,EAAC,SAAS;IACnB,gBAAcE,OAAQ;IACtB,kBAAe;EAAO,GAClBK,eAAe,EACfC,IAAI,EACR,EACDJ,YAAY,CACM;AAEzB,CAAC,CACF;AAEDV,KAAK,CAACoB,WAAW,GAAG,OAAO"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { InputSize } from "./types";
|
|
2
|
+
import { ITypographyProps } from "../Typography/Typography";
|
|
2
3
|
interface StyledInputWrapperProps {
|
|
3
4
|
$size?: InputSize;
|
|
4
5
|
$invalid?: boolean;
|
|
@@ -8,6 +9,7 @@ export declare const StyledInputWrapper: import("styled-components").StyledCompo
|
|
|
8
9
|
interface StyledInputProps {
|
|
9
10
|
$size?: InputSize;
|
|
10
11
|
$loading?: boolean;
|
|
12
|
+
align?: ITypographyProps["align"];
|
|
11
13
|
}
|
|
12
14
|
export declare const StyledInput: import("styled-components").StyledComponent<"input", any, StyledInputProps, never>;
|
|
13
15
|
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Input/Styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Input/Styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAGpC,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAE5D,UAAU,uBAAuB;IAC/B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,kBAAkB,yFA4D9B,CAAC;AAIF,UAAU,gBAAgB;IACxB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;CACnC;AAED,eAAO,MAAM,WAAW,oFAmEvB,CAAC"}
|
|
@@ -21,7 +21,7 @@ StyledInputWrapper.displayName = "StyledInputWrapper";
|
|
|
21
21
|
export var StyledInput = styled.input.withConfig({
|
|
22
22
|
displayName: "Styles__StyledInput",
|
|
23
23
|
componentId: "sc-ce8kcp-1"
|
|
24
|
-
})(["background-color:var(--input-background-color);border:none;color:var(--color-theme-900);font-size:0.875rem;font-weight:400;letter-spacing:0.02em;margin-block:0;margin-inline:4px;outline:none;padding:0;width:100%;&::placeholder{color:var(--color-theme-transparent-500);}", " ", " ", " ", ""], function (props) {
|
|
24
|
+
})(["background-color:var(--input-background-color);border:none;color:var(--color-theme-900);font-size:0.875rem;font-weight:400;letter-spacing:0.02em;margin-block:0;margin-inline:4px;outline:none;padding:0;width:100%;&::placeholder{color:var(--color-theme-transparent-500);}", " ", " ", " ", " ", " ", " ", " ", ""], function (props) {
|
|
25
25
|
return props.$size === "big" && css(["font-size:1rem;"]);
|
|
26
26
|
}, function (props) {
|
|
27
27
|
return props.$size === "biggest" && css(["font-size:1.25rem;font-weight:500;"]);
|
|
@@ -29,6 +29,14 @@ export var StyledInput = styled.input.withConfig({
|
|
|
29
29
|
return props.disabled && css(["cursor:default;"]);
|
|
30
30
|
}, function (props) {
|
|
31
31
|
return props.$loading && css(["cursor:progress;"]);
|
|
32
|
+
}, function (props) {
|
|
33
|
+
return props.align === "left" && css(["text-align:left;"]);
|
|
34
|
+
}, function (props) {
|
|
35
|
+
return props.align === "right" && css(["text-align:right;"]);
|
|
36
|
+
}, function (props) {
|
|
37
|
+
return props.align === "center" && css(["text-align:center;"]);
|
|
38
|
+
}, function (props) {
|
|
39
|
+
return props.align === "justify" && css(["text-align:justify;"]);
|
|
32
40
|
});
|
|
33
41
|
StyledInput.displayName = "StyledInput";
|
|
34
42
|
//# sourceMappingURL=Styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Styles.js","names":["styled","css","BoxSizingStyle","FontStyle","StyledInputWrapper","div","props","$size","$disabled","$invalid","displayName","StyledInput","input","disabled","$loading"],"sources":["../../../../src/components/Input/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { InputSize } from \"./types\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\n\ninterface StyledInputWrapperProps {\n $size?: InputSize;\n $invalid?: boolean;\n $disabled?: boolean;\n}\n\nexport const StyledInputWrapper = styled.div<StyledInputWrapperProps>`\n align-items: center;\n background-color: var(--input-background-color);\n border-color: var(--color-theme-500);\n border-radius: 8px;\n border-style: solid;\n border-width: 1px;\n cursor: text;\n display: flex;\n height: 32px;\n padding-block: 4px;\n padding-inline: 4px;\n transition: all 0.3s ease;\n width: 360px;\n\n ${FontStyle}\n ${BoxSizingStyle}\n\n ${(props) =>\n props.$size === \"small\" &&\n css`\n border-radius: 6px;\n height: 24px;\n `}\n\n ${(props) =>\n props.$size === \"big\" &&\n css`\n height: 40px;\n `}\n\n ${(props) =>\n props.$size === \"biggest\" &&\n css`\n height: 48px;\n `}\n\n ${(props) =>\n props.$disabled &&\n css`\n cursor: default;\n opacity: 50%;\n `}\n\n ${(props) =>\n !props.$disabled &&\n !props.$invalid &&\n css`\n &:focus-within,\n &:hover {\n border-color: var(--color-primary);\n }\n `}\n\n ${(props) =>\n !props.$disabled &&\n props.$invalid &&\n css`\n border-color: var(--red-alert);\n `}\n`;\n\nStyledInputWrapper.displayName = \"StyledInputWrapper\";\n\ninterface StyledInputProps {\n $size?: InputSize;\n $loading?: boolean;\n}\n\nexport const StyledInput = styled.input<StyledInputProps>`\n background-color: var(--input-background-color);\n border: none;\n color: var(--color-theme-900);\n /* @TODO: Prebaciti velicine fontova, weight, razmake, itd... u naše varijable. */\n font-size: 0.875rem;\n font-weight: 400;\n letter-spacing: 0.02em;\n margin-block: 0;\n margin-inline: 4px;\n outline: none;\n padding: 0;\n width: 100%;\n\n &::placeholder {\n color: var(--color-theme-transparent-500);\n }\n\n ${(props) =>\n props.$size === \"big\" &&\n css`\n font-size: 1rem;\n `}\n\n ${(props) =>\n props.$size === \"biggest\" &&\n css`\n font-size: 1.25rem;\n font-weight: 500;\n `}\n\n ${(props) =>\n props.disabled &&\n css`\n cursor: default;\n `}\n ${(props) =>\n props.$loading &&\n css`\n cursor: progress;\n `}\n`;\n\nStyledInput.displayName = \"StyledInput\";\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAE/C,SAASC,cAAc,QAAQ,mBAAmB;AAClD,SAASC,SAAS,QAAQ,cAAc;
|
|
1
|
+
{"version":3,"file":"Styles.js","names":["styled","css","BoxSizingStyle","FontStyle","StyledInputWrapper","div","props","$size","$disabled","$invalid","displayName","StyledInput","input","disabled","$loading","align"],"sources":["../../../../src/components/Input/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { InputSize } from \"./types\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\nimport { ITypographyProps } from \"../Typography/Typography\";\n\ninterface StyledInputWrapperProps {\n $size?: InputSize;\n $invalid?: boolean;\n $disabled?: boolean;\n}\n\nexport const StyledInputWrapper = styled.div<StyledInputWrapperProps>`\n align-items: center;\n background-color: var(--input-background-color);\n border-color: var(--color-theme-500);\n border-radius: 8px;\n border-style: solid;\n border-width: 1px;\n cursor: text;\n display: flex;\n height: 32px;\n padding-block: 4px;\n padding-inline: 4px;\n transition: all 0.3s ease;\n width: 360px;\n\n ${FontStyle}\n ${BoxSizingStyle}\n\n ${(props) =>\n props.$size === \"small\" &&\n css`\n border-radius: 6px;\n height: 24px;\n `}\n\n ${(props) =>\n props.$size === \"big\" &&\n css`\n height: 40px;\n `}\n\n ${(props) =>\n props.$size === \"biggest\" &&\n css`\n height: 48px;\n `}\n\n ${(props) =>\n props.$disabled &&\n css`\n cursor: default;\n opacity: 50%;\n `}\n\n ${(props) =>\n !props.$disabled &&\n !props.$invalid &&\n css`\n &:focus-within,\n &:hover {\n border-color: var(--color-primary);\n }\n `}\n\n ${(props) =>\n !props.$disabled &&\n props.$invalid &&\n css`\n border-color: var(--red-alert);\n `}\n`;\n\nStyledInputWrapper.displayName = \"StyledInputWrapper\";\n\ninterface StyledInputProps {\n $size?: InputSize;\n $loading?: boolean;\n align?: ITypographyProps[\"align\"];\n}\n\nexport const StyledInput = styled.input<StyledInputProps>`\n background-color: var(--input-background-color);\n border: none;\n color: var(--color-theme-900);\n /* @TODO: Prebaciti velicine fontova, weight, razmake, itd... u naše varijable. */\n font-size: 0.875rem;\n font-weight: 400;\n letter-spacing: 0.02em;\n margin-block: 0;\n margin-inline: 4px;\n outline: none;\n padding: 0;\n width: 100%;\n\n &::placeholder {\n color: var(--color-theme-transparent-500);\n }\n\n ${(props) =>\n props.$size === \"big\" &&\n css`\n font-size: 1rem;\n `}\n\n ${(props) =>\n props.$size === \"biggest\" &&\n css`\n font-size: 1.25rem;\n font-weight: 500;\n `}\n\n ${(props) =>\n props.disabled &&\n css`\n cursor: default;\n `}\n ${(props) =>\n props.$loading &&\n css`\n cursor: progress;\n `}\n\n /* @TODO: Po potrebi dodati jos propertija iz tipografije. */\n\n ${(props) =>\n props.align === \"left\" &&\n css`\n text-align: left;\n `}\n\n ${(props) =>\n props.align === \"right\" &&\n css`\n text-align: right;\n `}\n\n ${(props) =>\n props.align === \"center\" &&\n css`\n text-align: center;\n `}\n \n ${(props) =>\n props.align === \"justify\" &&\n css`\n text-align: justify;\n `}\n`;\n\nStyledInput.displayName = \"StyledInput\";\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAE/C,SAASC,cAAc,QAAQ,mBAAmB;AAClD,SAASC,SAAS,QAAQ,cAAc;AASxC,OAAO,IAAMC,kBAAkB,GAAGJ,MAAM,CAACK,GAAG;EAAA;EAAA;AAAA,2TAexCF,SAAS,EACTD,cAAc,EAEd,UAACI,KAAK;EAAA,OACNA,KAAK,CAACC,KAAK,KAAK,OAAO,IACvBN,GAAG,oCAGF;AAAA,GAED,UAACK,KAAK;EAAA,OACNA,KAAK,CAACC,KAAK,KAAK,KAAK,IACrBN,GAAG,kBAEF;AAAA,GAEC,UAACK,KAAK;EAAA,OACRA,KAAK,CAACC,KAAK,KAAK,SAAS,IACzBN,GAAG,kBAEF;AAAA,GAED,UAACK,KAAK;EAAA,OACNA,KAAK,CAACE,SAAS,IACfP,GAAG,iCAGF;AAAA,GAED,UAACK,KAAK;EAAA,OACN,CAACA,KAAK,CAACE,SAAS,IAChB,CAACF,KAAK,CAACG,QAAQ,IACfR,GAAG,gEAKF;AAAA,GAED,UAACK,KAAK;EAAA,OACN,CAACA,KAAK,CAACE,SAAS,IAChBF,KAAK,CAACG,QAAQ,IACdR,GAAG,oCAEF;AAAA,EACJ;AAEDG,kBAAkB,CAACM,WAAW,GAAG,oBAAoB;AAQrD,OAAO,IAAMC,WAAW,GAAGX,MAAM,CAACY,KAAK;EAAA;EAAA;AAAA,6TAkBnC,UAACN,KAAK;EAAA,OACNA,KAAK,CAACC,KAAK,KAAK,KAAK,IACrBN,GAAG,qBAEF;AAAA,GAED,UAACK,KAAK;EAAA,OACNA,KAAK,CAACC,KAAK,KAAK,SAAS,IACzBN,GAAG,wCAGF;AAAA,GAED,UAACK,KAAK;EAAA,OACNA,KAAK,CAACO,QAAQ,IACdZ,GAAG,qBAEF;AAAA,GACD,UAACK,KAAK;EAAA,OACNA,KAAK,CAACQ,QAAQ,IACdb,GAAG,sBAEF;AAAA,GAIC,UAACK,KAAK;EAAA,OACRA,KAAK,CAACS,KAAK,KAAK,MAAM,IACtBd,GAAG,sBAEF;AAAA,GAED,UAACK,KAAK;EAAA,OACNA,KAAK,CAACS,KAAK,KAAK,OAAO,IACvBd,GAAG,uBAEF;AAAA,GAED,UAACK,KAAK;EAAA,OACNA,KAAK,CAACS,KAAK,KAAK,QAAQ,IACxBd,GAAG,wBAEF;AAAA,GAED,UAACK,KAAK;EAAA,OACNA,KAAK,CAACS,KAAK,KAAK,SAAS,IACzBd,GAAG,yBAEF;AAAA,EACJ;AAEDU,WAAW,CAACD,WAAW,GAAG,aAAa"}
|
package/dist/index.js
CHANGED
|
@@ -11454,7 +11454,7 @@
|
|
|
11454
11454
|
var StyledInput$2 = styled__default["default"].input.withConfig({
|
|
11455
11455
|
displayName: "Styles__StyledInput",
|
|
11456
11456
|
componentId: "sc-ce8kcp-1"
|
|
11457
|
-
})(["background-color:var(--input-background-color);border:none;color:var(--color-theme-900);font-size:0.875rem;font-weight:400;letter-spacing:0.02em;margin-block:0;margin-inline:4px;outline:none;padding:0;width:100%;&::placeholder{color:var(--color-theme-transparent-500);}", " ", " ", " ", ""], function (props) {
|
|
11457
|
+
})(["background-color:var(--input-background-color);border:none;color:var(--color-theme-900);font-size:0.875rem;font-weight:400;letter-spacing:0.02em;margin-block:0;margin-inline:4px;outline:none;padding:0;width:100%;&::placeholder{color:var(--color-theme-transparent-500);}", " ", " ", " ", " ", " ", " ", " ", ""], function (props) {
|
|
11458
11458
|
return props.$size === "big" && styled.css(["font-size:1rem;"]);
|
|
11459
11459
|
}, function (props) {
|
|
11460
11460
|
return props.$size === "biggest" && styled.css(["font-size:1.25rem;font-weight:500;"]);
|
|
@@ -11462,10 +11462,18 @@
|
|
|
11462
11462
|
return props.disabled && styled.css(["cursor:default;"]);
|
|
11463
11463
|
}, function (props) {
|
|
11464
11464
|
return props.$loading && styled.css(["cursor:progress;"]);
|
|
11465
|
+
}, function (props) {
|
|
11466
|
+
return props.align === "left" && styled.css(["text-align:left;"]);
|
|
11467
|
+
}, function (props) {
|
|
11468
|
+
return props.align === "right" && styled.css(["text-align:right;"]);
|
|
11469
|
+
}, function (props) {
|
|
11470
|
+
return props.align === "center" && styled.css(["text-align:center;"]);
|
|
11471
|
+
}, function (props) {
|
|
11472
|
+
return props.align === "justify" && styled.css(["text-align:justify;"]);
|
|
11465
11473
|
});
|
|
11466
11474
|
StyledInput$2.displayName = "StyledInput";
|
|
11467
11475
|
|
|
11468
|
-
var _excluded$N = ["className", "style", "type", "disabled", "size", "invalid", "startAdornment", "endAdornment", "wrapRef", "
|
|
11476
|
+
var _excluded$N = ["className", "style", "type", "disabled", "size", "invalid", "startAdornment", "endAdornment", "wrapRef", "wrapperClick", "typographyProps"];
|
|
11469
11477
|
var Input = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
|
|
11470
11478
|
var _ref$className = _ref.className,
|
|
11471
11479
|
className = _ref$className === void 0 ? "" : _ref$className,
|
|
@@ -11481,8 +11489,8 @@
|
|
|
11481
11489
|
startAdornment = _ref.startAdornment,
|
|
11482
11490
|
endAdornment = _ref.endAdornment,
|
|
11483
11491
|
wrapRef = _ref.wrapRef,
|
|
11484
|
-
inputClassName = _ref.inputClassName,
|
|
11485
11492
|
wrapperClick = _ref.wrapperClick,
|
|
11493
|
+
typographyProps = _ref.typographyProps,
|
|
11486
11494
|
rest = _objectWithoutProperties(_ref, _excluded$N);
|
|
11487
11495
|
var intInputRef = React.useRef(null);
|
|
11488
11496
|
var handleRef = useForkRef(ref, intInputRef);
|
|
@@ -11504,10 +11512,10 @@
|
|
|
11504
11512
|
type: type,
|
|
11505
11513
|
$size: size,
|
|
11506
11514
|
disabled: disabled,
|
|
11507
|
-
className:
|
|
11515
|
+
className: "c-input",
|
|
11508
11516
|
"aria-invalid": invalid,
|
|
11509
11517
|
"data-form-type": "other"
|
|
11510
|
-
}, rest)), endAdornment);
|
|
11518
|
+
}, typographyProps, rest)), endAdornment);
|
|
11511
11519
|
});
|
|
11512
11520
|
Input.displayName = "Input";
|
|
11513
11521
|
|