@activecollab/components 2.0.95 → 2.0.97
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/Styles.js +2 -2
- package/dist/cjs/components/Input/Styles.js.map +1 -1
- package/dist/cjs/components/SelectTrigger/SelectTrigger.js +8 -3
- package/dist/cjs/components/SelectTrigger/SelectTrigger.js.map +1 -1
- package/dist/cjs/components/SelectTrigger/Styles.js +19 -14
- package/dist/cjs/components/SelectTrigger/Styles.js.map +1 -1
- package/dist/esm/components/Input/Styles.d.ts.map +1 -1
- package/dist/esm/components/Input/Styles.js +1 -1
- package/dist/esm/components/Input/Styles.js.map +1 -1
- package/dist/esm/components/SelectTrigger/SelectTrigger.d.ts +2 -0
- package/dist/esm/components/SelectTrigger/SelectTrigger.d.ts.map +1 -1
- package/dist/esm/components/SelectTrigger/SelectTrigger.js +6 -2
- package/dist/esm/components/SelectTrigger/SelectTrigger.js.map +1 -1
- package/dist/esm/components/SelectTrigger/Styles.d.ts +2 -0
- package/dist/esm/components/SelectTrigger/Styles.d.ts.map +1 -1
- package/dist/esm/components/SelectTrigger/Styles.js +22 -15
- package/dist/esm/components/SelectTrigger/Styles.js.map +1 -1
- package/dist/index.js +29 -19
- 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
|
@@ -12,8 +12,8 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
|
|
|
12
12
|
var StyledInputWrapper = exports.StyledInputWrapper = _styledComponents.default.div.withConfig({
|
|
13
13
|
displayName: "Styles__StyledInputWrapper",
|
|
14
14
|
componentId: "sc-ce8kcp-0"
|
|
15
|
-
})(["align-items:center;cursor:text;display:flex;height:32px;padding-block:4px;padding-inline:4px;transition:all 0.3s ease;width:360px;", " ", " ", " ", " ", " ", " ", " ", " ", ""], _FontStyle.FontStyle, _BoxSizingStyle.BoxSizingStyle, function (props) {
|
|
16
|
-
return props.$mode === "
|
|
15
|
+
})(["align-items:center;background-color:var(--input-background-color);border-color:var(--color-theme-500);border-radius:8px;border-style:solid;border-width:1px;cursor:text;display:flex;height:32px;padding-block:4px;padding-inline:4px;transition:all 0.3s ease;width:360px;", " ", " ", " ", " ", " ", " ", " ", " ", ""], _FontStyle.FontStyle, _BoxSizingStyle.BoxSizingStyle, function (props) {
|
|
16
|
+
return props.$mode === "flat" && (0, _styledComponents.css)(["background-color:transparent;border:none;border-radius:none;"]);
|
|
17
17
|
}, function (props) {
|
|
18
18
|
return props.$size === "small" && (0, _styledComponents.css)(["border-radius:6px;height:24px;"]);
|
|
19
19
|
}, function (props) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Styles.js","names":["_styledComponents","_interopRequireWildcard","require","_BoxSizingStyle","_FontStyle","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","StyledInputWrapper","exports","styled","div","withConfig","displayName","componentId","FontStyle","BoxSizingStyle","props","$mode","css","$size","$disabled","$invalid","StyledInput","input","disabled","$loading","align","StyledPasswordIndicatorWrapper","StyledPasswordIndicator","$strength","$index","StyledInputSelectTrigger"],"sources":["../../../../src/components/Input/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { InputProps } from \"./Input\";\nimport { InputMode, InputSize } from \"./types\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\n\ninterface StyledInputWrapperProps {\n $size?: InputSize;\n $invalid?: boolean;\n $disabled?: boolean;\n $mode?: InputMode;\n}\n\nexport const StyledInputWrapper = styled.div<StyledInputWrapperProps>`\n align-items: center;\n
|
|
1
|
+
{"version":3,"file":"Styles.js","names":["_styledComponents","_interopRequireWildcard","require","_BoxSizingStyle","_FontStyle","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","StyledInputWrapper","exports","styled","div","withConfig","displayName","componentId","FontStyle","BoxSizingStyle","props","$mode","css","$size","$disabled","$invalid","StyledInput","input","disabled","$loading","align","StyledPasswordIndicatorWrapper","StyledPasswordIndicator","$strength","$index","StyledInputSelectTrigger"],"sources":["../../../../src/components/Input/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { InputProps } from \"./Input\";\nimport { InputMode, InputSize } from \"./types\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\n\ninterface StyledInputWrapperProps {\n $size?: InputSize;\n $invalid?: boolean;\n $disabled?: boolean;\n $mode?: InputMode;\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\n ${(props) =>\n props.$mode === \"flat\" &&\n css`\n background-color: transparent;\n border: none;\n border-radius: none;\n `}\n\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 props.$mode === \"outlined\" &&\n css`\n border-color: var(--red-alert);\n `}\n`;\n\nStyledInputWrapper.displayName = \"StyledInputWrapper\";\n\ninterface StyledInputProps extends Pick<InputProps, \"align\"> {\n $size?: InputSize;\n $loading?: boolean;\n $mode?: InputMode;\n $invalid?: 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: 700;\n `}\n\n ${(props) =>\n props.disabled &&\n css`\n cursor: default;\n `}\n\n ${(props) =>\n props.$loading &&\n css`\n cursor: progress;\n `}\n\n ${(props) =>\n props.align &&\n css`\n text-align: ${props.align};\n `}\n\n ${(props) =>\n props.$mode === \"flat\" &&\n props.$invalid &&\n css`\n color: var(--red-alert);\n `}\n`;\n\nStyledInput.displayName = \"StyledInput\";\n\nexport const StyledPasswordIndicatorWrapper = styled.div`\n display: flex;\n gap: 2px;\n margin-top: 6px;\n margin-bottom: 4px;\n`;\n\nStyledPasswordIndicatorWrapper.displayName = \"StyledPasswordIndicatorWrapper\";\n\nexport const StyledPasswordIndicator = styled.div<{\n $strength: number;\n $index: number;\n}>`\n width: 100%;\n height: 4px;\n border-radius: 6px;\n background-color: ${(props) => {\n const { $strength, $index } = props;\n\n if ($strength === 0) {\n return \"var(--color-theme-300)\";\n } else if ($strength === 1) {\n return $index === 0 ? \"var(--red-alert)\" : \"var(--color-theme-300)\";\n } else if ($strength === 2) {\n return $index < 2 ? \"var(--color-orange)\" : \"var(--color-theme-300)\";\n } else if ($strength === 3) {\n return $index < 3 ? \"var(--color-blue-sky)\" : \"var(--color-theme-300)\";\n } else {\n return \"var(--color-sucess-green)\";\n }\n }};\n`;\n\nStyledPasswordIndicator.displayName = \"StyledPasswordIndicator\";\n\nexport const StyledInputSelectTrigger = styled.div<{\n $size: string;\n $disabled: boolean;\n}>`\n display: flex;\n gap: 6px;\n align-items: center;\n margin-right: 2px;\n margin-left: 8px;\n color: var(--color-theme-700);\n font-weight: 400;\n letter-spacing: 0.02em;\n font-size: 0.875rem;\n flex-shrink: 0;\n cursor: ${(props) => {\n if (props.$disabled) {\n return \"unset\";\n }\n return \"pointer\";\n }};\n\n pointer-events: ${(props) => {\n if (props.$disabled) {\n return \"none\";\n }\n return \"unset\";\n }};\n\n ${(props) =>\n props.$size === \"big\" &&\n css`\n font-size: 1rem;\n `}\n`;\n\nStyledInputSelectTrigger.displayName = \"StyledInputSelectTrigger\";\n"],"mappings":"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"}
|
|
@@ -7,7 +7,7 @@ exports.SelectTrigger = void 0;
|
|
|
7
7
|
var _react = _interopRequireWildcard(require("react"));
|
|
8
8
|
var _Styles = require("./Styles");
|
|
9
9
|
var _Typography = require("../Typography/Typography");
|
|
10
|
-
var _excluded = ["children", "type", "size", "invalid", "open", "endAdornment", "typographyProps"];
|
|
10
|
+
var _excluded = ["children", "type", "size", "invalid", "open", "endAdornment", "typographyProps", "mode"];
|
|
11
11
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
12
12
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
13
13
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
@@ -25,18 +25,23 @@ var SelectTrigger = exports.SelectTrigger = /*#__PURE__*/(0, _react.forwardRef)(
|
|
|
25
25
|
open = _ref$open === void 0 ? false : _ref$open,
|
|
26
26
|
endAdornment = _ref.endAdornment,
|
|
27
27
|
typographyProps = _ref.typographyProps,
|
|
28
|
+
_ref$mode = _ref.mode,
|
|
29
|
+
mode = _ref$mode === void 0 ? "outlined" : _ref$mode,
|
|
28
30
|
rest = _objectWithoutProperties(_ref, _excluded);
|
|
29
31
|
return /*#__PURE__*/_react.default.createElement(_Styles.StyledSelectTrigger, _extends({
|
|
30
32
|
ref: ref,
|
|
31
33
|
role: "button",
|
|
32
34
|
type: type,
|
|
33
35
|
$size: size,
|
|
34
|
-
$invalid: invalid
|
|
36
|
+
$invalid: invalid,
|
|
37
|
+
"aria-invalid": invalid,
|
|
38
|
+
$mode: mode
|
|
35
39
|
}, rest), /*#__PURE__*/_react.default.createElement(_Typography.Typography, _extends({
|
|
36
40
|
as: "div",
|
|
37
41
|
overflow: "truncate",
|
|
38
42
|
whitespace: "no-wrap",
|
|
39
|
-
variant: size === "small" || size === "regular" ? "Body 2" : "Body 1"
|
|
43
|
+
variant: size === "small" || size === "regular" ? "Body 2" : "Body 1",
|
|
44
|
+
color: mode === "flat" && invalid ? "alert" : undefined
|
|
40
45
|
}, typographyProps), children), endAdornment ? endAdornment : /*#__PURE__*/_react.default.createElement(_Styles.StyledCaretIcon, {
|
|
41
46
|
$open: open
|
|
42
47
|
}));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectTrigger.js","names":["_react","_interopRequireWildcard","require","_Styles","_Typography","_excluded","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","_extends","assign","bind","target","arguments","length","source","key","apply","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","SelectTrigger","exports","forwardRef","_ref","ref","children","_ref$type","type","_ref$size","size","_ref$invalid","invalid","_ref$open","open","endAdornment","typographyProps","rest","createElement","StyledSelectTrigger","role","$size","$invalid","Typography","as","overflow","whitespace","variant","StyledCaretIcon","$open","displayName"],"sources":["../../../../src/components/SelectTrigger/SelectTrigger.tsx"],"sourcesContent":["import React, { forwardRef, ComponentPropsWithoutRef } from \"react\";\n\nimport { StyledCaretIcon, StyledSelectTrigger } from \"./Styles\";\nimport { ITypographyProps, Typography } from \"../Typography/Typography\";\n\nexport type Size = \"regular\" | \"big\" | \"small\";\n\nexport interface SelectTriggerProps extends ComponentPropsWithoutRef<\"button\"> {\n size?: Size;\n invalid?: boolean;\n endAdornment?: JSX.Element;\n open?: boolean;\n typographyProps?: ITypographyProps;\n}\n\nexport const SelectTrigger = forwardRef<HTMLButtonElement, SelectTriggerProps>(\n (\n {\n children,\n type = \"button\",\n size = \"regular\",\n invalid = false,\n open = false,\n endAdornment,\n typographyProps,\n ...rest\n },\n ref\n ) => {\n return (\n <StyledSelectTrigger\n ref={ref}\n role=\"button\"\n type={type}\n $size={size}\n $invalid={invalid}\n {...rest}\n >\n <Typography\n as=\"div\"\n overflow=\"truncate\"\n whitespace=\"no-wrap\"\n variant={size === \"small\" || size === \"regular\" ? \"Body 2\" : \"Body 1\"}\n {...typographyProps}\n >\n {children}\n </Typography>\n\n {endAdornment ? endAdornment : <StyledCaretIcon $open={open} />}\n </StyledSelectTrigger>\n );\n }\n);\n\nSelectTrigger.displayName = \"SelectTrigger\";\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AAEA,IAAAC,OAAA,GAAAD,OAAA;
|
|
1
|
+
{"version":3,"file":"SelectTrigger.js","names":["_react","_interopRequireWildcard","require","_Styles","_Typography","_excluded","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","_extends","assign","bind","target","arguments","length","source","key","apply","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","SelectTrigger","exports","forwardRef","_ref","ref","children","_ref$type","type","_ref$size","size","_ref$invalid","invalid","_ref$open","open","endAdornment","typographyProps","_ref$mode","mode","rest","createElement","StyledSelectTrigger","role","$size","$invalid","$mode","Typography","as","overflow","whitespace","variant","color","undefined","StyledCaretIcon","$open","displayName"],"sources":["../../../../src/components/SelectTrigger/SelectTrigger.tsx"],"sourcesContent":["import React, { forwardRef, ComponentPropsWithoutRef } from \"react\";\n\nimport { StyledCaretIcon, StyledSelectTrigger } from \"./Styles\";\nimport { InputMode } from \"../Input/types\";\nimport { ITypographyProps, Typography } from \"../Typography/Typography\";\n\nexport type Size = \"regular\" | \"big\" | \"small\";\n\nexport interface SelectTriggerProps extends ComponentPropsWithoutRef<\"button\"> {\n size?: Size;\n invalid?: boolean;\n endAdornment?: JSX.Element;\n open?: boolean;\n typographyProps?: ITypographyProps;\n mode?: InputMode;\n}\n\nexport const SelectTrigger = forwardRef<HTMLButtonElement, SelectTriggerProps>(\n (\n {\n children,\n type = \"button\",\n size = \"regular\",\n invalid = false,\n open = false,\n endAdornment,\n typographyProps,\n mode = \"outlined\",\n ...rest\n },\n ref\n ) => {\n return (\n <StyledSelectTrigger\n ref={ref}\n role=\"button\"\n type={type}\n $size={size}\n $invalid={invalid}\n aria-invalid={invalid}\n $mode={mode}\n {...rest}\n >\n <Typography\n as=\"div\"\n overflow=\"truncate\"\n whitespace=\"no-wrap\"\n variant={size === \"small\" || size === \"regular\" ? \"Body 2\" : \"Body 1\"}\n color={mode === \"flat\" && invalid ? \"alert\" : undefined}\n {...typographyProps}\n >\n {children}\n </Typography>\n\n {endAdornment ? endAdornment : <StyledCaretIcon $open={open} />}\n </StyledSelectTrigger>\n );\n }\n);\n\nSelectTrigger.displayName = \"SelectTrigger\";\n"],"mappings":"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"}
|
|
@@ -12,36 +12,41 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
|
|
|
12
12
|
var StyledSelectTrigger = exports.StyledSelectTrigger = (0, _styledComponents.default)(_Trigger.Trigger).withConfig({
|
|
13
13
|
displayName: "Styles__StyledSelectTrigger",
|
|
14
14
|
componentId: "sc-9799p2-0"
|
|
15
|
-
})(["display:flex;align-items:center;justify-content:space-between;
|
|
16
|
-
var
|
|
17
|
-
return
|
|
15
|
+
})(["display:flex;align-items:center;justify-content:space-between;padding:0 4px 0 8px;width:300px;transition:border-color 0.3s ease;background-color:transparent;border:none;", " ", " ", " ", " ", " ", " ", ";"], function (_ref) {
|
|
16
|
+
var $mode = _ref.$mode;
|
|
17
|
+
return $mode === "outlined" && (0, _styledComponents.css)(["border:1px solid var(--color-theme-500);background-color:var(--input-background-color);"]);
|
|
18
18
|
}, function (_ref2) {
|
|
19
|
-
var
|
|
20
|
-
|
|
21
|
-
return !$invalid && !disabled && (0, _styledComponents.css)(["&:hover,&:focus{border-color:var(--color-primary-700);}"]);
|
|
19
|
+
var disabled = _ref2.disabled;
|
|
20
|
+
return disabled && (0, _styledComponents.css)(["opacity:50%;cursor:default;"]);
|
|
22
21
|
}, function (_ref3) {
|
|
23
|
-
var $invalid = _ref3.$invalid
|
|
24
|
-
|
|
22
|
+
var $invalid = _ref3.$invalid,
|
|
23
|
+
disabled = _ref3.disabled,
|
|
24
|
+
$mode = _ref3.$mode;
|
|
25
|
+
return !$invalid && !disabled && $mode === "outlined" && (0, _styledComponents.css)(["&:hover,&:focus{border-color:var(--color-primary-700);}"]);
|
|
26
|
+
}, function (_ref4) {
|
|
27
|
+
var $invalid = _ref4.$invalid,
|
|
28
|
+
$mode = _ref4.$mode;
|
|
29
|
+
return $invalid && $mode === "outlined" && (0, _styledComponents.css)(["", " &:hover{", "}"], {
|
|
25
30
|
"borderColor": "var(--red-alert)"
|
|
26
31
|
}, {
|
|
27
32
|
"borderColor": "var(--red-alert)"
|
|
28
33
|
});
|
|
29
|
-
}, function (_ref4) {
|
|
30
|
-
var $size = _ref4.$size;
|
|
31
|
-
return $size === "small" && (0, _styledComponents.css)(["height:24px;border-radius:var(--ac-br-6);"]);
|
|
32
34
|
}, function (_ref5) {
|
|
33
35
|
var $size = _ref5.$size;
|
|
34
|
-
return $size === "
|
|
36
|
+
return $size === "small" && (0, _styledComponents.css)(["height:24px;border-radius:var(--ac-br-6);"]);
|
|
35
37
|
}, function (_ref6) {
|
|
36
38
|
var $size = _ref6.$size;
|
|
39
|
+
return $size === "regular" && (0, _styledComponents.css)(["height:32px;border-radius:var(--ac-br-8);"]);
|
|
40
|
+
}, function (_ref7) {
|
|
41
|
+
var $size = _ref7.$size;
|
|
37
42
|
return $size === "big" && (0, _styledComponents.css)(["height:40px;border-radius:var(--ac-br-8);"]);
|
|
38
43
|
});
|
|
39
44
|
StyledSelectTrigger.displayName = "StyledSelectTrigger";
|
|
40
45
|
var StyledCaretIcon = exports.StyledCaretIcon = (0, _styledComponents.default)(_Icons.CollapseExpandSingleIcon).withConfig({
|
|
41
46
|
displayName: "Styles__StyledCaretIcon",
|
|
42
47
|
componentId: "sc-9799p2-1"
|
|
43
|
-
})(["margin-left:8px;flex-shrink:0;transition:transform 200ms ease;", ""], function (
|
|
44
|
-
var $open =
|
|
48
|
+
})(["margin-left:8px;flex-shrink:0;transition:transform 200ms ease;", ""], function (_ref8) {
|
|
49
|
+
var $open = _ref8.$open;
|
|
45
50
|
return !$open && (0, _styledComponents.css)(["transform:rotate(180deg);"]);
|
|
46
51
|
});
|
|
47
52
|
StyledCaretIcon.displayName = "StyledCaretIcon";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Styles.js","names":["_styledComponents","_interopRequireWildcard","require","_Icons","_Trigger","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","StyledSelectTrigger","exports","styled","Trigger","withConfig","displayName","componentId","_ref","
|
|
1
|
+
{"version":3,"file":"Styles.js","names":["_styledComponents","_interopRequireWildcard","require","_Icons","_Trigger","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","StyledSelectTrigger","exports","styled","Trigger","withConfig","displayName","componentId","_ref","$mode","css","_ref2","disabled","_ref3","$invalid","_ref4","_ref5","$size","_ref6","_ref7","StyledCaretIcon","CollapseExpandSingleIcon","_ref8","$open"],"sources":["../../../../src/components/SelectTrigger/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\n\nimport { Size } from \"./SelectTrigger\";\nimport { CollapseExpandSingleIcon } from \"../Icons\";\nimport { InputMode } from \"../Input/types\";\nimport { Trigger } from \"../Trigger\";\n\nexport const StyledSelectTrigger = styled(Trigger)<{\n $size?: Size;\n $invalid?: boolean;\n $mode?: InputMode;\n}>`\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 0 4px 0 8px;\n width: 300px;\n transition: border-color 0.3s ease;\n background-color: transparent;\n border: none;\n\n ${({ $mode }) =>\n $mode === \"outlined\" &&\n css`\n border: 1px solid var(--color-theme-500);\n background-color: var(--input-background-color);\n `}\n\n ${({ disabled }) =>\n disabled &&\n css`\n opacity: 50%;\n cursor: default;\n `}\n\n ${({ $invalid, disabled, $mode }) =>\n !$invalid &&\n !disabled &&\n $mode === \"outlined\" &&\n css`\n &:hover,\n &:focus {\n border-color: var(--color-primary-700);\n }\n `}\n\n ${({ $invalid, $mode }) =>\n $invalid &&\n $mode === \"outlined\" &&\n css`\n ${tw`tw-border-alert`}\n\n &:hover {\n ${tw`tw-border-alert`}\n }\n `}\n\n ${({ $size }) =>\n $size === \"small\" &&\n css`\n height: 24px;\n border-radius: var(--ac-br-6);\n `}\n\n ${({ $size }) =>\n $size === \"regular\" &&\n css`\n height: 32px;\n border-radius: var(--ac-br-8);\n `}\n\n ${({ $size }) =>\n $size === \"big\" &&\n css`\n height: 40px;\n border-radius: var(--ac-br-8);\n `};\n`;\n\nStyledSelectTrigger.displayName = \"StyledSelectTrigger\";\n\nexport const StyledCaretIcon = styled(CollapseExpandSingleIcon)<{\n $open: boolean;\n}>`\n margin-left: 8px;\n flex-shrink: 0;\n transition: transform 200ms ease;\n\n ${({ $open }) =>\n !$open &&\n css`\n transform: rotate(180deg);\n `}\n`;\n\nStyledCaretIcon.displayName = \"StyledCaretIcon\";\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Input/Styles.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AACrC,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAI/C,UAAU,uBAAuB;IAC/B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAED,eAAO,MAAM,kBAAkB,
|
|
1
|
+
{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Input/Styles.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AACrC,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAI/C,UAAU,uBAAuB;IAC/B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAED,eAAO,MAAM,kBAAkB,yFAuE9B,CAAC;AAIF,UAAU,gBAAiB,SAAQ,IAAI,CAAC,UAAU,EAAE,OAAO,CAAC;IAC1D,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,WAAW,oFAuDvB,CAAC;AAIF,eAAO,MAAM,8BAA8B,oEAK1C,CAAC;AAIF,eAAO,MAAM,uBAAuB;eACvB,MAAM;YACT,MAAM;SAoBf,CAAC;AAIF,eAAO,MAAM,wBAAwB;WAC5B,MAAM;eACF,OAAO;SA+BnB,CAAC"}
|
|
@@ -4,7 +4,7 @@ import { FontStyle } from "../FontStyle";
|
|
|
4
4
|
export const StyledInputWrapper = styled.div.withConfig({
|
|
5
5
|
displayName: "Styles__StyledInputWrapper",
|
|
6
6
|
componentId: "sc-ce8kcp-0"
|
|
7
|
-
})(["align-items:center;cursor:text;display:flex;height:32px;padding-block:4px;padding-inline:4px;transition:all 0.3s ease;width:360px;", " ", " ", " ", " ", " ", " ", " ", " ", ""], FontStyle, BoxSizingStyle, props => props.$mode === "
|
|
7
|
+
})(["align-items:center;background-color:var(--input-background-color);border-color:var(--color-theme-500);border-radius:8px;border-style:solid;border-width:1px;cursor:text;display:flex;height:32px;padding-block:4px;padding-inline:4px;transition:all 0.3s ease;width:360px;", " ", " ", " ", " ", " ", " ", " ", " ", ""], FontStyle, BoxSizingStyle, props => props.$mode === "flat" && css(["background-color:transparent;border:none;border-radius:none;"]), props => props.$size === "small" && css(["border-radius:6px;height:24px;"]), props => props.$size === "big" && css(["height:40px;"]), props => props.$size === "biggest" && css(["height:48px;"]), props => props.$disabled && css(["cursor:default;opacity:50%;"]), props => !props.$disabled && !props.$invalid && css(["&:focus-within,&:hover{border-color:var(--color-primary);}"]), props => !props.$disabled && props.$invalid && props.$mode === "outlined" && css(["border-color:var(--red-alert);"]));
|
|
8
8
|
StyledInputWrapper.displayName = "StyledInputWrapper";
|
|
9
9
|
export const StyledInput = styled.input.withConfig({
|
|
10
10
|
displayName: "Styles__StyledInput",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Styles.js","names":["styled","css","BoxSizingStyle","FontStyle","StyledInputWrapper","div","withConfig","displayName","componentId","props","$mode","$size","$disabled","$invalid","StyledInput","input","disabled","$loading","align","StyledPasswordIndicatorWrapper","StyledPasswordIndicator","$strength","$index","StyledInputSelectTrigger"],"sources":["../../../../src/components/Input/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { InputProps } from \"./Input\";\nimport { InputMode, InputSize } from \"./types\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\n\ninterface StyledInputWrapperProps {\n $size?: InputSize;\n $invalid?: boolean;\n $disabled?: boolean;\n $mode?: InputMode;\n}\n\nexport const StyledInputWrapper = styled.div<StyledInputWrapperProps>`\n align-items: center;\n
|
|
1
|
+
{"version":3,"file":"Styles.js","names":["styled","css","BoxSizingStyle","FontStyle","StyledInputWrapper","div","withConfig","displayName","componentId","props","$mode","$size","$disabled","$invalid","StyledInput","input","disabled","$loading","align","StyledPasswordIndicatorWrapper","StyledPasswordIndicator","$strength","$index","StyledInputSelectTrigger"],"sources":["../../../../src/components/Input/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { InputProps } from \"./Input\";\nimport { InputMode, InputSize } from \"./types\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\n\ninterface StyledInputWrapperProps {\n $size?: InputSize;\n $invalid?: boolean;\n $disabled?: boolean;\n $mode?: InputMode;\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\n ${(props) =>\n props.$mode === \"flat\" &&\n css`\n background-color: transparent;\n border: none;\n border-radius: none;\n `}\n\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 props.$mode === \"outlined\" &&\n css`\n border-color: var(--red-alert);\n `}\n`;\n\nStyledInputWrapper.displayName = \"StyledInputWrapper\";\n\ninterface StyledInputProps extends Pick<InputProps, \"align\"> {\n $size?: InputSize;\n $loading?: boolean;\n $mode?: InputMode;\n $invalid?: 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: 700;\n `}\n\n ${(props) =>\n props.disabled &&\n css`\n cursor: default;\n `}\n\n ${(props) =>\n props.$loading &&\n css`\n cursor: progress;\n `}\n\n ${(props) =>\n props.align &&\n css`\n text-align: ${props.align};\n `}\n\n ${(props) =>\n props.$mode === \"flat\" &&\n props.$invalid &&\n css`\n color: var(--red-alert);\n `}\n`;\n\nStyledInput.displayName = \"StyledInput\";\n\nexport const StyledPasswordIndicatorWrapper = styled.div`\n display: flex;\n gap: 2px;\n margin-top: 6px;\n margin-bottom: 4px;\n`;\n\nStyledPasswordIndicatorWrapper.displayName = \"StyledPasswordIndicatorWrapper\";\n\nexport const StyledPasswordIndicator = styled.div<{\n $strength: number;\n $index: number;\n}>`\n width: 100%;\n height: 4px;\n border-radius: 6px;\n background-color: ${(props) => {\n const { $strength, $index } = props;\n\n if ($strength === 0) {\n return \"var(--color-theme-300)\";\n } else if ($strength === 1) {\n return $index === 0 ? \"var(--red-alert)\" : \"var(--color-theme-300)\";\n } else if ($strength === 2) {\n return $index < 2 ? \"var(--color-orange)\" : \"var(--color-theme-300)\";\n } else if ($strength === 3) {\n return $index < 3 ? \"var(--color-blue-sky)\" : \"var(--color-theme-300)\";\n } else {\n return \"var(--color-sucess-green)\";\n }\n }};\n`;\n\nStyledPasswordIndicator.displayName = \"StyledPasswordIndicator\";\n\nexport const StyledInputSelectTrigger = styled.div<{\n $size: string;\n $disabled: boolean;\n}>`\n display: flex;\n gap: 6px;\n align-items: center;\n margin-right: 2px;\n margin-left: 8px;\n color: var(--color-theme-700);\n font-weight: 400;\n letter-spacing: 0.02em;\n font-size: 0.875rem;\n flex-shrink: 0;\n cursor: ${(props) => {\n if (props.$disabled) {\n return \"unset\";\n }\n return \"pointer\";\n }};\n\n pointer-events: ${(props) => {\n if (props.$disabled) {\n return \"none\";\n }\n return \"unset\";\n }};\n\n ${(props) =>\n props.$size === \"big\" &&\n css`\n font-size: 1rem;\n `}\n`;\n\nStyledInputSelectTrigger.displayName = \"StyledInputSelectTrigger\";\n"],"mappings":"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"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import React, { ComponentPropsWithoutRef } from "react";
|
|
2
|
+
import { InputMode } from "../Input/types";
|
|
2
3
|
import { ITypographyProps } from "../Typography/Typography";
|
|
3
4
|
export type Size = "regular" | "big" | "small";
|
|
4
5
|
export interface SelectTriggerProps extends ComponentPropsWithoutRef<"button"> {
|
|
@@ -7,6 +8,7 @@ export interface SelectTriggerProps extends ComponentPropsWithoutRef<"button"> {
|
|
|
7
8
|
endAdornment?: JSX.Element;
|
|
8
9
|
open?: boolean;
|
|
9
10
|
typographyProps?: ITypographyProps;
|
|
11
|
+
mode?: InputMode;
|
|
10
12
|
}
|
|
11
13
|
export declare const SelectTrigger: React.ForwardRefExoticComponent<SelectTriggerProps & React.RefAttributes<HTMLButtonElement>>;
|
|
12
14
|
//# sourceMappingURL=SelectTrigger.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectTrigger.d.ts","sourceRoot":"","sources":["../../../../src/components/SelectTrigger/SelectTrigger.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAc,wBAAwB,EAAE,MAAM,OAAO,CAAC;AAGpE,OAAO,EAAE,gBAAgB,EAAc,MAAM,0BAA0B,CAAC;AAExE,MAAM,MAAM,IAAI,GAAG,SAAS,GAAG,KAAK,GAAG,OAAO,CAAC;AAE/C,MAAM,WAAW,kBAAmB,SAAQ,wBAAwB,CAAC,QAAQ,CAAC;IAC5E,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC3B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,eAAe,CAAC,EAAE,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"SelectTrigger.d.ts","sourceRoot":"","sources":["../../../../src/components/SelectTrigger/SelectTrigger.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAc,wBAAwB,EAAE,MAAM,OAAO,CAAC;AAGpE,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EAAE,gBAAgB,EAAc,MAAM,0BAA0B,CAAC;AAExE,MAAM,MAAM,IAAI,GAAG,SAAS,GAAG,KAAK,GAAG,OAAO,CAAC;AAE/C,MAAM,WAAW,kBAAmB,SAAQ,wBAAwB,CAAC,QAAQ,CAAC;IAC5E,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC3B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,eAAe,CAAC,EAAE,gBAAgB,CAAC;IACnC,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAED,eAAO,MAAM,aAAa,8FAyCzB,CAAC"}
|
|
@@ -11,6 +11,7 @@ export const SelectTrigger = /*#__PURE__*/forwardRef((_ref, ref) => {
|
|
|
11
11
|
open = false,
|
|
12
12
|
endAdornment,
|
|
13
13
|
typographyProps,
|
|
14
|
+
mode = "outlined",
|
|
14
15
|
...rest
|
|
15
16
|
} = _ref;
|
|
16
17
|
return /*#__PURE__*/React.createElement(StyledSelectTrigger, _extends({
|
|
@@ -18,12 +19,15 @@ export const SelectTrigger = /*#__PURE__*/forwardRef((_ref, ref) => {
|
|
|
18
19
|
role: "button",
|
|
19
20
|
type: type,
|
|
20
21
|
$size: size,
|
|
21
|
-
$invalid: invalid
|
|
22
|
+
$invalid: invalid,
|
|
23
|
+
"aria-invalid": invalid,
|
|
24
|
+
$mode: mode
|
|
22
25
|
}, rest), /*#__PURE__*/React.createElement(Typography, _extends({
|
|
23
26
|
as: "div",
|
|
24
27
|
overflow: "truncate",
|
|
25
28
|
whitespace: "no-wrap",
|
|
26
|
-
variant: size === "small" || size === "regular" ? "Body 2" : "Body 1"
|
|
29
|
+
variant: size === "small" || size === "regular" ? "Body 2" : "Body 1",
|
|
30
|
+
color: mode === "flat" && invalid ? "alert" : undefined
|
|
27
31
|
}, typographyProps), children), endAdornment ? endAdornment : /*#__PURE__*/React.createElement(StyledCaretIcon, {
|
|
28
32
|
$open: open
|
|
29
33
|
}));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectTrigger.js","names":["React","forwardRef","StyledCaretIcon","StyledSelectTrigger","Typography","SelectTrigger","_ref","ref","children","type","size","invalid","open","endAdornment","typographyProps","rest","createElement","_extends","role","$size","$invalid","as","overflow","whitespace","variant","$open","displayName"],"sources":["../../../../src/components/SelectTrigger/SelectTrigger.tsx"],"sourcesContent":["import React, { forwardRef, ComponentPropsWithoutRef } from \"react\";\n\nimport { StyledCaretIcon, StyledSelectTrigger } from \"./Styles\";\nimport { ITypographyProps, Typography } from \"../Typography/Typography\";\n\nexport type Size = \"regular\" | \"big\" | \"small\";\n\nexport interface SelectTriggerProps extends ComponentPropsWithoutRef<\"button\"> {\n size?: Size;\n invalid?: boolean;\n endAdornment?: JSX.Element;\n open?: boolean;\n typographyProps?: ITypographyProps;\n}\n\nexport const SelectTrigger = forwardRef<HTMLButtonElement, SelectTriggerProps>(\n (\n {\n children,\n type = \"button\",\n size = \"regular\",\n invalid = false,\n open = false,\n endAdornment,\n typographyProps,\n ...rest\n },\n ref\n ) => {\n return (\n <StyledSelectTrigger\n ref={ref}\n role=\"button\"\n type={type}\n $size={size}\n $invalid={invalid}\n {...rest}\n >\n <Typography\n as=\"div\"\n overflow=\"truncate\"\n whitespace=\"no-wrap\"\n variant={size === \"small\" || size === \"regular\" ? \"Body 2\" : \"Body 1\"}\n {...typographyProps}\n >\n {children}\n </Typography>\n\n {endAdornment ? endAdornment : <StyledCaretIcon $open={open} />}\n </StyledSelectTrigger>\n );\n }\n);\n\nSelectTrigger.displayName = \"SelectTrigger\";\n"],"mappings":";AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAkC,OAAO;AAEnE,SAASC,eAAe,EAAEC,mBAAmB,QAAQ,UAAU;
|
|
1
|
+
{"version":3,"file":"SelectTrigger.js","names":["React","forwardRef","StyledCaretIcon","StyledSelectTrigger","Typography","SelectTrigger","_ref","ref","children","type","size","invalid","open","endAdornment","typographyProps","mode","rest","createElement","_extends","role","$size","$invalid","$mode","as","overflow","whitespace","variant","color","undefined","$open","displayName"],"sources":["../../../../src/components/SelectTrigger/SelectTrigger.tsx"],"sourcesContent":["import React, { forwardRef, ComponentPropsWithoutRef } from \"react\";\n\nimport { StyledCaretIcon, StyledSelectTrigger } from \"./Styles\";\nimport { InputMode } from \"../Input/types\";\nimport { ITypographyProps, Typography } from \"../Typography/Typography\";\n\nexport type Size = \"regular\" | \"big\" | \"small\";\n\nexport interface SelectTriggerProps extends ComponentPropsWithoutRef<\"button\"> {\n size?: Size;\n invalid?: boolean;\n endAdornment?: JSX.Element;\n open?: boolean;\n typographyProps?: ITypographyProps;\n mode?: InputMode;\n}\n\nexport const SelectTrigger = forwardRef<HTMLButtonElement, SelectTriggerProps>(\n (\n {\n children,\n type = \"button\",\n size = \"regular\",\n invalid = false,\n open = false,\n endAdornment,\n typographyProps,\n mode = \"outlined\",\n ...rest\n },\n ref\n ) => {\n return (\n <StyledSelectTrigger\n ref={ref}\n role=\"button\"\n type={type}\n $size={size}\n $invalid={invalid}\n aria-invalid={invalid}\n $mode={mode}\n {...rest}\n >\n <Typography\n as=\"div\"\n overflow=\"truncate\"\n whitespace=\"no-wrap\"\n variant={size === \"small\" || size === \"regular\" ? \"Body 2\" : \"Body 1\"}\n color={mode === \"flat\" && invalid ? \"alert\" : undefined}\n {...typographyProps}\n >\n {children}\n </Typography>\n\n {endAdornment ? endAdornment : <StyledCaretIcon $open={open} />}\n </StyledSelectTrigger>\n );\n }\n);\n\nSelectTrigger.displayName = \"SelectTrigger\";\n"],"mappings":";AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAkC,OAAO;AAEnE,SAASC,eAAe,EAAEC,mBAAmB,QAAQ,UAAU;AAE/D,SAA2BC,UAAU,QAAQ,0BAA0B;AAavE,OAAO,MAAMC,aAAa,gBAAGJ,UAAU,CACrC,CAAAK,IAAA,EAYEC,GAAG,KACA;EAAA,IAZH;IACEC,QAAQ;IACRC,IAAI,GAAG,QAAQ;IACfC,IAAI,GAAG,SAAS;IAChBC,OAAO,GAAG,KAAK;IACfC,IAAI,GAAG,KAAK;IACZC,YAAY;IACZC,eAAe;IACfC,IAAI,GAAG,UAAU;IACjB,GAAGC;EACL,CAAC,GAAAV,IAAA;EAGD,oBACEN,KAAA,CAAAiB,aAAA,CAACd,mBAAmB,EAAAe,QAAA;IAClBX,GAAG,EAAEA,GAAI;IACTY,IAAI,EAAC,QAAQ;IACbV,IAAI,EAAEA,IAAK;IACXW,KAAK,EAAEV,IAAK;IACZW,QAAQ,EAAEV,OAAQ;IAClB,gBAAcA,OAAQ;IACtBW,KAAK,EAAEP;EAAK,GACRC,IAAI,gBAERhB,KAAA,CAAAiB,aAAA,CAACb,UAAU,EAAAc,QAAA;IACTK,EAAE,EAAC,KAAK;IACRC,QAAQ,EAAC,UAAU;IACnBC,UAAU,EAAC,SAAS;IACpBC,OAAO,EAAEhB,IAAI,KAAK,OAAO,IAAIA,IAAI,KAAK,SAAS,GAAG,QAAQ,GAAG,QAAS;IACtEiB,KAAK,EAAEZ,IAAI,KAAK,MAAM,IAAIJ,OAAO,GAAG,OAAO,GAAGiB;EAAU,GACpDd,eAAe,GAElBN,QACS,CAAC,EAEZK,YAAY,GAAGA,YAAY,gBAAGb,KAAA,CAAAiB,aAAA,CAACf,eAAe;IAAC2B,KAAK,EAAEjB;EAAK,CAAE,CAC3C,CAAC;AAE1B,CACF,CAAC;AAEDP,aAAa,CAACyB,WAAW,GAAG,eAAe"}
|
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { Size } from "./SelectTrigger";
|
|
3
|
+
import { InputMode } from "../Input/types";
|
|
3
4
|
export declare const StyledSelectTrigger: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>, any, {
|
|
4
5
|
$size?: Size | undefined;
|
|
5
6
|
$invalid?: boolean | undefined;
|
|
7
|
+
$mode?: InputMode | undefined;
|
|
6
8
|
}, never>;
|
|
7
9
|
export declare const StyledCaretIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & import("react").RefAttributes<SVGSVGElement>>, any, {
|
|
8
10
|
$open: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/SelectTrigger/Styles.ts"],"names":[],"mappings":";AAGA,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;
|
|
1
|
+
{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/SelectTrigger/Styles.ts"],"names":[],"mappings":";AAGA,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAEvC,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAG3C,eAAO,MAAM,mBAAmB;;;;SAsE/B,CAAC;AAIF,eAAO,MAAM,eAAe;WACnB,OAAO;SAWf,CAAC"}
|
|
@@ -4,50 +4,57 @@ import { Trigger } from "../Trigger";
|
|
|
4
4
|
export const StyledSelectTrigger = styled(Trigger).withConfig({
|
|
5
5
|
displayName: "Styles__StyledSelectTrigger",
|
|
6
6
|
componentId: "sc-9799p2-0"
|
|
7
|
-
})(["display:flex;align-items:center;justify-content:space-between;
|
|
7
|
+
})(["display:flex;align-items:center;justify-content:space-between;padding:0 4px 0 8px;width:300px;transition:border-color 0.3s ease;background-color:transparent;border:none;", " ", " ", " ", " ", " ", " ", ";"], _ref => {
|
|
8
8
|
let {
|
|
9
|
-
|
|
9
|
+
$mode
|
|
10
10
|
} = _ref;
|
|
11
|
-
return
|
|
11
|
+
return $mode === "outlined" && css(["border:1px solid var(--color-theme-500);background-color:var(--input-background-color);"]);
|
|
12
12
|
}, _ref2 => {
|
|
13
13
|
let {
|
|
14
|
-
$invalid,
|
|
15
14
|
disabled
|
|
16
15
|
} = _ref2;
|
|
17
|
-
return
|
|
16
|
+
return disabled && css(["opacity:50%;cursor:default;"]);
|
|
18
17
|
}, _ref3 => {
|
|
19
18
|
let {
|
|
20
|
-
$invalid
|
|
19
|
+
$invalid,
|
|
20
|
+
disabled,
|
|
21
|
+
$mode
|
|
21
22
|
} = _ref3;
|
|
22
|
-
return
|
|
23
|
+
return !$invalid && !disabled && $mode === "outlined" && css(["&:hover,&:focus{border-color:var(--color-primary-700);}"]);
|
|
24
|
+
}, _ref4 => {
|
|
25
|
+
let {
|
|
26
|
+
$invalid,
|
|
27
|
+
$mode
|
|
28
|
+
} = _ref4;
|
|
29
|
+
return $invalid && $mode === "outlined" && css(["", " &:hover{", "}"], {
|
|
23
30
|
"borderColor": "var(--red-alert)"
|
|
24
31
|
}, {
|
|
25
32
|
"borderColor": "var(--red-alert)"
|
|
26
33
|
});
|
|
27
|
-
}, _ref4 => {
|
|
28
|
-
let {
|
|
29
|
-
$size
|
|
30
|
-
} = _ref4;
|
|
31
|
-
return $size === "small" && css(["height:24px;border-radius:var(--ac-br-6);"]);
|
|
32
34
|
}, _ref5 => {
|
|
33
35
|
let {
|
|
34
36
|
$size
|
|
35
37
|
} = _ref5;
|
|
36
|
-
return $size === "
|
|
38
|
+
return $size === "small" && css(["height:24px;border-radius:var(--ac-br-6);"]);
|
|
37
39
|
}, _ref6 => {
|
|
38
40
|
let {
|
|
39
41
|
$size
|
|
40
42
|
} = _ref6;
|
|
43
|
+
return $size === "regular" && css(["height:32px;border-radius:var(--ac-br-8);"]);
|
|
44
|
+
}, _ref7 => {
|
|
45
|
+
let {
|
|
46
|
+
$size
|
|
47
|
+
} = _ref7;
|
|
41
48
|
return $size === "big" && css(["height:40px;border-radius:var(--ac-br-8);"]);
|
|
42
49
|
});
|
|
43
50
|
StyledSelectTrigger.displayName = "StyledSelectTrigger";
|
|
44
51
|
export const StyledCaretIcon = styled(CollapseExpandSingleIcon).withConfig({
|
|
45
52
|
displayName: "Styles__StyledCaretIcon",
|
|
46
53
|
componentId: "sc-9799p2-1"
|
|
47
|
-
})(["margin-left:8px;flex-shrink:0;transition:transform 200ms ease;", ""],
|
|
54
|
+
})(["margin-left:8px;flex-shrink:0;transition:transform 200ms ease;", ""], _ref8 => {
|
|
48
55
|
let {
|
|
49
56
|
$open
|
|
50
|
-
} =
|
|
57
|
+
} = _ref8;
|
|
51
58
|
return !$open && css(["transform:rotate(180deg);"]);
|
|
52
59
|
});
|
|
53
60
|
StyledCaretIcon.displayName = "StyledCaretIcon";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Styles.js","names":["styled","css","CollapseExpandSingleIcon","Trigger","StyledSelectTrigger","withConfig","displayName","componentId","_ref","
|
|
1
|
+
{"version":3,"file":"Styles.js","names":["styled","css","CollapseExpandSingleIcon","Trigger","StyledSelectTrigger","withConfig","displayName","componentId","_ref","$mode","_ref2","disabled","_ref3","$invalid","_ref4","_ref5","$size","_ref6","_ref7","StyledCaretIcon","_ref8","$open"],"sources":["../../../../src/components/SelectTrigger/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\n\nimport { Size } from \"./SelectTrigger\";\nimport { CollapseExpandSingleIcon } from \"../Icons\";\nimport { InputMode } from \"../Input/types\";\nimport { Trigger } from \"../Trigger\";\n\nexport const StyledSelectTrigger = styled(Trigger)<{\n $size?: Size;\n $invalid?: boolean;\n $mode?: InputMode;\n}>`\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 0 4px 0 8px;\n width: 300px;\n transition: border-color 0.3s ease;\n background-color: transparent;\n border: none;\n\n ${({ $mode }) =>\n $mode === \"outlined\" &&\n css`\n border: 1px solid var(--color-theme-500);\n background-color: var(--input-background-color);\n `}\n\n ${({ disabled }) =>\n disabled &&\n css`\n opacity: 50%;\n cursor: default;\n `}\n\n ${({ $invalid, disabled, $mode }) =>\n !$invalid &&\n !disabled &&\n $mode === \"outlined\" &&\n css`\n &:hover,\n &:focus {\n border-color: var(--color-primary-700);\n }\n `}\n\n ${({ $invalid, $mode }) =>\n $invalid &&\n $mode === \"outlined\" &&\n css`\n ${tw`tw-border-alert`}\n\n &:hover {\n ${tw`tw-border-alert`}\n }\n `}\n\n ${({ $size }) =>\n $size === \"small\" &&\n css`\n height: 24px;\n border-radius: var(--ac-br-6);\n `}\n\n ${({ $size }) =>\n $size === \"regular\" &&\n css`\n height: 32px;\n border-radius: var(--ac-br-8);\n `}\n\n ${({ $size }) =>\n $size === \"big\" &&\n css`\n height: 40px;\n border-radius: var(--ac-br-8);\n `};\n`;\n\nStyledSelectTrigger.displayName = \"StyledSelectTrigger\";\n\nexport const StyledCaretIcon = styled(CollapseExpandSingleIcon)<{\n $open: boolean;\n}>`\n margin-left: 8px;\n flex-shrink: 0;\n transition: transform 200ms ease;\n\n ${({ $open }) =>\n !$open &&\n css`\n transform: rotate(180deg);\n `}\n`;\n\nStyledCaretIcon.displayName = \"StyledCaretIcon\";\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAI/C,SAASC,wBAAwB,QAAQ,UAAU;AAEnD,SAASC,OAAO,QAAQ,YAAY;AAEpC,OAAO,MAAMC,mBAAmB,GAAGJ,MAAM,CAACG,OAAO,CAAC,CAAAE,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,qNAc9CC,IAAA;EAAA,IAAC;IAAEC;EAAM,CAAC,GAAAD,IAAA;EAAA,OACVC,KAAK,KAAK,UAAU,IACpBR,GAAG,6FAGF;AAAA,GAEDS,KAAA;EAAA,IAAC;IAAEC;EAAS,CAAC,GAAAD,KAAA;EAAA,OACbC,QAAQ,IACRV,GAAG,iCAGF;AAAA,GAEDW,KAAA;EAAA,IAAC;IAAEC,QAAQ;IAAEF,QAAQ;IAAEF;EAAM,CAAC,GAAAG,KAAA;EAAA,OAC9B,CAACC,QAAQ,IACT,CAACF,QAAQ,IACTF,KAAK,KAAK,UAAU,IACpBR,GAAG,6DAKF;AAAA,GAEDa,KAAA;EAAA,IAAC;IAAED,QAAQ;IAAEJ;EAAM,CAAC,GAAAK,KAAA;EAAA,OACpBD,QAAQ,IACRJ,KAAK,KAAK,UAAU,IACpBR,GAAG,yBACG;IAAA;EAAgB,CAAC,EAGf;IAAA;EAAgB,CAAC,CAExB;AAAA,GAEDc,KAAA;EAAA,IAAC;IAAEC;EAAM,CAAC,GAAAD,KAAA;EAAA,OACVC,KAAK,KAAK,OAAO,IACjBf,GAAG,+CAGF;AAAA,GAEDgB,KAAA;EAAA,IAAC;IAAED;EAAM,CAAC,GAAAC,KAAA;EAAA,OACVD,KAAK,KAAK,SAAS,IACnBf,GAAG,+CAGF;AAAA,GAECiB,KAAA;EAAA,IAAC;IAAEF;EAAM,CAAC,GAAAE,KAAA;EAAA,OACZF,KAAK,KAAK,KAAK,IACff,GAAG,+CAGF;AAAA,EACJ;AAEDG,mBAAmB,CAACE,WAAW,GAAG,qBAAqB;AAEvD,OAAO,MAAMa,eAAe,GAAGnB,MAAM,CAACE,wBAAwB,CAAC,CAAAG,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,2EAO3Da,KAAA;EAAA,IAAC;IAAEC;EAAM,CAAC,GAAAD,KAAA;EAAA,OACV,CAACC,KAAK,IACNpB,GAAG,+BAEF;AAAA,EACJ;AAEDkB,eAAe,CAACb,WAAW,GAAG,iBAAiB"}
|
package/dist/index.js
CHANGED
|
@@ -11527,8 +11527,8 @@
|
|
|
11527
11527
|
var StyledInputWrapper = styled__default["default"].div.withConfig({
|
|
11528
11528
|
displayName: "Styles__StyledInputWrapper",
|
|
11529
11529
|
componentId: "sc-ce8kcp-0"
|
|
11530
|
-
})(["align-items:center;cursor:text;display:flex;height:32px;padding-block:4px;padding-inline:4px;transition:all 0.3s ease;width:360px;", " ", " ", " ", " ", " ", " ", " ", " ", ""], FontStyle, BoxSizingStyle, function (props) {
|
|
11531
|
-
return props.$mode === "
|
|
11530
|
+
})(["align-items:center;background-color:var(--input-background-color);border-color:var(--color-theme-500);border-radius:8px;border-style:solid;border-width:1px;cursor:text;display:flex;height:32px;padding-block:4px;padding-inline:4px;transition:all 0.3s ease;width:360px;", " ", " ", " ", " ", " ", " ", " ", " ", ""], FontStyle, BoxSizingStyle, function (props) {
|
|
11531
|
+
return props.$mode === "flat" && styled.css(["background-color:transparent;border:none;border-radius:none;"]);
|
|
11532
11532
|
}, function (props) {
|
|
11533
11533
|
return props.$size === "small" && styled.css(["border-radius:6px;height:24px;"]);
|
|
11534
11534
|
}, function (props) {
|
|
@@ -16181,41 +16181,46 @@
|
|
|
16181
16181
|
var StyledSelectTrigger = styled__default["default"](Trigger).withConfig({
|
|
16182
16182
|
displayName: "Styles__StyledSelectTrigger",
|
|
16183
16183
|
componentId: "sc-9799p2-0"
|
|
16184
|
-
})(["display:flex;align-items:center;justify-content:space-between;
|
|
16185
|
-
var
|
|
16186
|
-
return
|
|
16184
|
+
})(["display:flex;align-items:center;justify-content:space-between;padding:0 4px 0 8px;width:300px;transition:border-color 0.3s ease;background-color:transparent;border:none;", " ", " ", " ", " ", " ", " ", ";"], function (_ref) {
|
|
16185
|
+
var $mode = _ref.$mode;
|
|
16186
|
+
return $mode === "outlined" && styled.css(["border:1px solid var(--color-theme-500);background-color:var(--input-background-color);"]);
|
|
16187
16187
|
}, function (_ref2) {
|
|
16188
|
-
var
|
|
16189
|
-
|
|
16190
|
-
return !$invalid && !disabled && styled.css(["&:hover,&:focus{border-color:var(--color-primary-700);}"]);
|
|
16188
|
+
var disabled = _ref2.disabled;
|
|
16189
|
+
return disabled && styled.css(["opacity:50%;cursor:default;"]);
|
|
16191
16190
|
}, function (_ref3) {
|
|
16192
|
-
var $invalid = _ref3.$invalid
|
|
16193
|
-
|
|
16191
|
+
var $invalid = _ref3.$invalid,
|
|
16192
|
+
disabled = _ref3.disabled,
|
|
16193
|
+
$mode = _ref3.$mode;
|
|
16194
|
+
return !$invalid && !disabled && $mode === "outlined" && styled.css(["&:hover,&:focus{border-color:var(--color-primary-700);}"]);
|
|
16195
|
+
}, function (_ref4) {
|
|
16196
|
+
var $invalid = _ref4.$invalid,
|
|
16197
|
+
$mode = _ref4.$mode;
|
|
16198
|
+
return $invalid && $mode === "outlined" && styled.css(["", " &:hover{", "}"], {
|
|
16194
16199
|
"borderColor": "var(--red-alert)"
|
|
16195
16200
|
}, {
|
|
16196
16201
|
"borderColor": "var(--red-alert)"
|
|
16197
16202
|
});
|
|
16198
|
-
}, function (_ref4) {
|
|
16199
|
-
var $size = _ref4.$size;
|
|
16200
|
-
return $size === "small" && styled.css(["height:24px;border-radius:var(--ac-br-6);"]);
|
|
16201
16203
|
}, function (_ref5) {
|
|
16202
16204
|
var $size = _ref5.$size;
|
|
16203
|
-
return $size === "
|
|
16205
|
+
return $size === "small" && styled.css(["height:24px;border-radius:var(--ac-br-6);"]);
|
|
16204
16206
|
}, function (_ref6) {
|
|
16205
16207
|
var $size = _ref6.$size;
|
|
16208
|
+
return $size === "regular" && styled.css(["height:32px;border-radius:var(--ac-br-8);"]);
|
|
16209
|
+
}, function (_ref7) {
|
|
16210
|
+
var $size = _ref7.$size;
|
|
16206
16211
|
return $size === "big" && styled.css(["height:40px;border-radius:var(--ac-br-8);"]);
|
|
16207
16212
|
});
|
|
16208
16213
|
StyledSelectTrigger.displayName = "StyledSelectTrigger";
|
|
16209
16214
|
var StyledCaretIcon = styled__default["default"](CollapseExpandSingleIcon$1).withConfig({
|
|
16210
16215
|
displayName: "Styles__StyledCaretIcon",
|
|
16211
16216
|
componentId: "sc-9799p2-1"
|
|
16212
|
-
})(["margin-left:8px;flex-shrink:0;transition:transform 200ms ease;", ""], function (
|
|
16213
|
-
var $open =
|
|
16217
|
+
})(["margin-left:8px;flex-shrink:0;transition:transform 200ms ease;", ""], function (_ref8) {
|
|
16218
|
+
var $open = _ref8.$open;
|
|
16214
16219
|
return !$open && styled.css(["transform:rotate(180deg);"]);
|
|
16215
16220
|
});
|
|
16216
16221
|
StyledCaretIcon.displayName = "StyledCaretIcon";
|
|
16217
16222
|
|
|
16218
|
-
var _excluded$m = ["children", "type", "size", "invalid", "open", "endAdornment", "typographyProps"];
|
|
16223
|
+
var _excluded$m = ["children", "type", "size", "invalid", "open", "endAdornment", "typographyProps", "mode"];
|
|
16219
16224
|
var SelectTrigger = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
16220
16225
|
var children = _ref.children,
|
|
16221
16226
|
_ref$type = _ref.type,
|
|
@@ -16228,18 +16233,23 @@
|
|
|
16228
16233
|
open = _ref$open === void 0 ? false : _ref$open,
|
|
16229
16234
|
endAdornment = _ref.endAdornment,
|
|
16230
16235
|
typographyProps = _ref.typographyProps,
|
|
16236
|
+
_ref$mode = _ref.mode,
|
|
16237
|
+
mode = _ref$mode === void 0 ? "outlined" : _ref$mode,
|
|
16231
16238
|
rest = _objectWithoutProperties(_ref, _excluded$m);
|
|
16232
16239
|
return /*#__PURE__*/React__default["default"].createElement(StyledSelectTrigger, _extends({
|
|
16233
16240
|
ref: ref,
|
|
16234
16241
|
role: "button",
|
|
16235
16242
|
type: type,
|
|
16236
16243
|
$size: size,
|
|
16237
|
-
$invalid: invalid
|
|
16244
|
+
$invalid: invalid,
|
|
16245
|
+
"aria-invalid": invalid,
|
|
16246
|
+
$mode: mode
|
|
16238
16247
|
}, rest), /*#__PURE__*/React__default["default"].createElement(Typography, _extends({
|
|
16239
16248
|
as: "div",
|
|
16240
16249
|
overflow: "truncate",
|
|
16241
16250
|
whitespace: "no-wrap",
|
|
16242
|
-
variant: size === "small" || size === "regular" ? "Body 2" : "Body 1"
|
|
16251
|
+
variant: size === "small" || size === "regular" ? "Body 2" : "Body 1",
|
|
16252
|
+
color: mode === "flat" && invalid ? "alert" : undefined
|
|
16243
16253
|
}, typographyProps), children), endAdornment ? endAdornment : /*#__PURE__*/React__default["default"].createElement(StyledCaretIcon, {
|
|
16244
16254
|
$open: open
|
|
16245
16255
|
}));
|