@soul-refiner/design-system 2.2.8 → 2.2.10

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.
Files changed (3) hide show
  1. package/dist/components/input/text_input/text_input.js +41 -27
  2. package/dist/src/components/input/text_input/text_input.d.ts +3 -1
  3. package/package.json +3 -3
package/dist/components/input/text_input/text_input.js CHANGED
@@ -1,38 +1,49 @@
1
1
  "use client";
2
- "use strict";var React=require("react"),styled=require("styled-components"),chip=require("../../feedback/chip/chip.js"),checkmark_circle=require("../../../icons/basic/checkmark_circle.js"),alert_circle=require("../../../icons/notifications/alert_circle.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React);const TextInput=({bg:e="var(--color-blue-10)",disabled:t,helperText:l,icon:r,label:a,maxCharacters:o,multiple:n,name:c,onChange:i,onMultipleChange:s,placeholder:p,size:d="large",successful:u,sx:f,value:m,warning:x,type:g="text",placeIconAtTheEnd:y=!1,inputSx:$})=>{const h=React__default.default.useId();const[_,b]=React__default.default.useState("");return React__default.default.createElement(Label,{$disabled:t,$size:d,$sx:f},a,React__default.default.createElement(InputWrapper,{$bg:e,$size:d,$successful:u,$warning:x},!y&&r,n&&React__default.default.createElement(MultipleInputWrapper,{onSubmit:e=>{e.stopPropagation(),e.preventDefault();e=m.includes(_);s&&!e&&s([...m,_]),b("")}},m.filter(Boolean).map((e,t)=>React__default.default.createElement(chip.Chip,{key:h+e+t,color:"blue",size:"small",onDismiss:()=>{var t;t=e,s&&s(m.filter(e=>e!==t))}},e)),React__default.default.createElement(Input,{onChange:e=>{b(e.target.value)},onKeyDown:e=>{!m.length||!s||_||"Delete"!==e.key&&"Backspace"!==e.key||s(m.slice(0,m.length-1))},value:_,$size:d,$sx:$})),!n&&React__default.default.createElement(Input,{disabled:t,name:c,onChange:i,placeholder:p,value:"number"!==g&&o?m?.slice(0,o-1)||"":m,$size:d,type:g,$sx:$}),o&&"number"!==g&&!y&&React__default.default.createElement(MaxCharactersText,{$size:d},m?.length||0," / ",o),y&&r,u&&React__default.default.createElement(checkmark_circle.CheckmarkCircle,{color:"green-3"}),x&&React__default.default.createElement(alert_circle.AlertCircle,{color:"red-4"})),l&&React__default.default.createElement(HelperText,{$size:d},l))},Label=styled.styled.div`
3
- width: 100%;
4
- display: flex;
5
- gap: 4px;
6
- flex-flow: column nowrap;
7
- color: var(--color-grey-2);
2
+ "use strict";var React=require("react"),styled=require("styled-components"),chip=require("../../feedback/chip/chip.js"),checkmark_circle=require("../../../icons/basic/checkmark_circle.js"),alert_circle=require("../../../icons/notifications/alert_circle.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React);const TextInput=({bg:e="var(--color-blue-10)",disabled:t,helperText:r,icon:a,inputSx:l,label:o,maxCharacters:n,multiple:c,name:i,onChange:s,onMultipleChange:d,placeholder:u,placeIconAtTheEnd:p=!1,size:f="large",successful:m,sx:g,type:$="text",value:y,variant:_="default",warning:b})=>{const h=React__default.default.useId();const[x,v]=React__default.default.useState("");return React__default.default.createElement(Label,{$disabled:t,$size:f,$sx:g},React__default.default.createElement(Legend,{$bg:e,$size:f,$successful:m,$warning:b,$variant:_},o),React__default.default.createElement(InputWrapper,{$bg:e,$size:f,$successful:m,$warning:b},!p&&a,c&&React__default.default.createElement(MultipleInputWrapper,{onSubmit:e=>{e.stopPropagation(),e.preventDefault();e=y.includes(x);d&&!e&&d([...y,x]),v("")}},y.filter(Boolean).map((e,t)=>React__default.default.createElement(chip.Chip,{key:h+e+t,color:"blue",size:"small",onDismiss:()=>{var t;t=e,d&&d(y.filter(e=>e!==t))}},e)),React__default.default.createElement(Input,{onChange:e=>{v(e.target.value)},onKeyDown:e=>{!y.length||!d||x||"Delete"!==e.key&&"Backspace"!==e.key||d(y.slice(0,y.length-1))},value:x,$size:f,$sx:l})),!c&&React__default.default.createElement(Input,{disabled:t,name:i,onChange:s,placeholder:u,value:"number"!==$&&n?y?.slice(0,n-1)||"":y,$size:f,type:$,$sx:l}),n&&"number"!==$&&!p&&React__default.default.createElement(MaxCharactersText,{$size:f},y?.length||0," / ",n),p&&a,m&&React__default.default.createElement(checkmark_circle.CheckmarkCircle,{color:"green-3"}),b&&React__default.default.createElement(alert_circle.AlertCircle,{color:"red-4"})),r&&React__default.default.createElement(HelperText,{$size:f,$warning:b},b&&React__default.default.createElement(alert_circle.AlertCircle,{color:"red-4"}),r))},Label=styled.styled.label`
8
3
  font-family: var(--font-inter);
9
- font-size: ${({$size:e})=>"small"===e?16:18}px;
10
- font-weight: 500;
11
- line-height: ${({$size:e})=>"small"===e?24:26}px;
4
+ font-size: ${({$size:e})=>"small"===e?.75:.87}rem;
5
+ font-weight: 400;
6
+ line-height: ${({$size:e})=>"small"===e?1:1.25}rem;
7
+ width: 100%;
12
8
 
13
- ${({$disabled:e})=>e?`
9
+ ${({$disabled:e})=>e&&`
14
10
  color: var(--color-grey-7) !important;
15
11
  & > * {
16
12
  color: var(--color-grey-7) !important;
17
13
  }
18
14
  & > div {
19
- background-color: var(--color-grey-9) !important;
20
- }`:""}
15
+ background-color: var(--color-grey-10) !important;
16
+ }
17
+ input{
18
+ color: var(--color-grey-6) !important;
19
+ }
20
+ `}
21
+ &:focus-within {
22
+ color: var(--color-primary-blue-2);
23
+ }
21
24
 
22
25
  ${({$sx:e})=>e||""}
26
+ `,Legend=styled.styled.span`
27
+ width: fit-content;
28
+ ${({$successful:e})=>e&&"color: var(--color-green-3) !important;"}
29
+ ${({$warning:e})=>e&&"color: var(--color-red-4) !important;"}
30
+ ${({$variant:e,$bg:t})=>"adaptive"===e&&`
31
+ background: ${t};
32
+ background: linear-gradient(0deg, ${t} 0%, rgba(255,255,255,1) 100%);
33
+ left: .5rem;
34
+ padding: 0 .25rem;
35
+ position: relative;
36
+ top: .6rem;
37
+ `}
23
38
  `,InputWrapper=styled.styled.div`
24
- display: flex;
25
- gap: 8px;
26
39
  align-items: center;
27
- box-sizing: border-box;
28
- padding: ${({$size:e})=>"small"===e?"6px 12px":"12px"};
29
40
  background-color: ${({$bg:e})=>e};
30
- border-radius: 8px;
31
- border: 1px solid transparent;
32
-
33
- &:hover {
34
- border-color: var(--color-grey-8);
35
- }
41
+ border-radius: 0.25rem;
42
+ border: 1px solid var(--color-grey-8);
43
+ box-sizing: border-box;
44
+ display: flex;
45
+ gap: 0.5rem;
46
+ padding: ${({$size:e})=>"small"===e?".5rem .75rem":".75rem"};
36
47
 
37
48
  &:focus-within {
38
49
  border-color: var(--color-primary-blue-2);
@@ -41,16 +52,15 @@
41
52
  ${({$successful:e})=>e?"border-color: var(--color-green-3) !important;":""}
42
53
  ${({$warning:e})=>e?"border-color: var(--color-red-4) !important;":""}
43
54
  `,Input=styled.styled.input`
44
- padding: 0px;
55
+ background-color: transparent;
56
+ border: none;
57
+ color: var(--color-grey-3);
45
58
  flex: 1;
46
59
  font-family: var(--font-inter);
47
60
  font-size: ${({$size:e})=>"small"===e?14:16}px;
48
61
  line-height: ${({$size:e})=>"small"===e?20:24}px;
49
- color: var(--color-grey-3);
50
- border: none;
51
62
  outline: none;
52
- border-radius: 8px;
53
- background-color: transparent;
63
+ padding: 0px;
54
64
 
55
65
  &::placeholder {
56
66
  color: var(--color-grey-6);
@@ -58,10 +68,14 @@
58
68
 
59
69
  ${({$sx:e})=>e||""}
60
70
  `,HelperText=styled.styled.span`
71
+ align-items: center;
61
72
  color: var(--color-grey-4);
73
+ display: flex;
62
74
  font-family: var(--font-inter);
63
75
  font-size: ${({$size:e})=>"small"===e?12:14}px;
76
+ gap: 8px;
64
77
  line-height: ${({$size:e})=>"small"===e?16:20}px;
78
+ ${({$warning:e})=>e?"color: var(--color-red-4) !important;":""}
65
79
  `,MaxCharactersText=styled.styled.span`
66
80
  color: var(--color-grey-6);
67
81
  font-family: var(--font-inter);
package/dist/src/components/input/text_input/text_input.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import React from 'react';
2
2
  type TextInputSize = 'small' | 'large';
3
+ type TextInputVariant = 'default' | 'adaptive';
3
4
  export type Props = {
4
5
  disabled?: boolean | never;
5
6
  successful?: boolean | never;
@@ -21,6 +22,7 @@ export type Props = {
21
22
  placeIconAtTheEnd?: boolean;
22
23
  inputSx?: string;
23
24
  type?: 'number' | 'password' | 'text';
25
+ variant?: TextInputVariant;
24
26
  };
25
27
  interface DisabledProps extends Props {
26
28
  disabled?: true;
@@ -38,5 +40,5 @@ interface WarningProps extends Props {
38
40
  warning?: true;
39
41
  }
40
42
  export type TextInputProps = DisabledProps | SuccessfulProps | WarningProps;
41
- export declare const TextInput: ({ bg, disabled, helperText, icon, label, maxCharacters, multiple, name, onChange, onMultipleChange, placeholder, size, successful, sx, value, warning, type, placeIconAtTheEnd, inputSx, }: TextInputProps) => React.JSX.Element;
43
+ export declare const TextInput: ({ bg, disabled, helperText, icon, inputSx, label, maxCharacters, multiple, name, onChange, onMultipleChange, placeholder, placeIconAtTheEnd, size, successful, sx, type, value, variant, warning, }: TextInputProps) => React.JSX.Element;
42
44
  export {};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@soul-refiner/design-system",
3
- "version": "2.2.8",
3
+ "version": "2.2.10",
4
4
  "main": "dist/index.js",
5
5
  "types": "dist/src/index.d.ts",
6
6
  "license": "MIT",
@@ -95,7 +95,7 @@
95
95
  "slate-history": "~0.100.0",
96
96
  "slate-hyperscript": "~0.100.0",
97
97
  "slate-react": "~0.101.5",
98
- "styled-components": "~6.1.8",
98
+ "styled-components": "6.1.8",
99
99
  "tailwind-merge": "~2.2.0",
100
100
  "tailwindcss-animate": "~1.0.7"
101
101
  },
@@ -104,6 +104,6 @@
104
104
  "react": "~18.2.0",
105
105
  "react-dom": "~18.2.0",
106
106
  "react-player": "~2.13.0",
107
- "styled-components": "6.1.1"
107
+ "styled-components": "6.1.8"
108
108
  }
109
109
  }