@remember-web/primitive 0.4.2 → 0.4.4

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 (8) hide show
  1. package/dist/src/Inputs/TextInput/styles.cjs.js +1 -1
  2. package/dist/src/Inputs/TextInput/styles.cjs.js.map +1 -1
  3. package/dist/src/Inputs/TextInput/styles.d.ts.map +1 -1
  4. package/dist/src/Inputs/TextInput/styles.esm.js +1 -1
  5. package/dist/src/Inputs/TextInput/styles.esm.js.map +1 -1
  6. package/package.json +6 -6
  7. package/src/Inputs/TextInput/TextInput.stories.tsx +3 -2
  8. package/src/Inputs/TextInput/styles.ts +4 -0
package/dist/src/Inputs/TextInput/styles.cjs.js CHANGED
@@ -22,7 +22,7 @@ var InputContainer = styled__default.default.div(_templateObject3 || (_templateO
22
22
  return [$hasError ? styled.css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral__default.default(["\n border-color: ", ";\n "])), mixin.roleRed) : styled.css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral__default.default(["\n &:focus-within {\n border-color: ", ";\n }\n "])), mixin.contents000), disabled && styled.css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral__default.default(["\n background-color: ", ";\n "])), mixin.bg200)];
23
23
  });
24
24
  var InputDecorator = styled__default.default.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral__default.default(["\n flex-shrink: 0;\n /* Inline\uC694\uC18C\uAC00 \uB4E4\uC5B4\uC624\uBA74 \uAC15\uC81C\uB85C block\uC73C\uB85C \uCC98\uB9AC (\uC911\uC559\uC815\uB82C\uC744 \uC704\uD574) */\n > * {\n display: block;\n }\n"])));
25
- var InputInner = styled__default.default.input(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral__default.default(["\n ", "\n color: ", ";\n\n display: block;\n flex-grow: 1;\n width: 100%;\n padding: 10px 0;\n border: 0;\n background-color: transparent;\n\n &:placeholder-shown {\n ", "\n }\n\n &::placeholder {\n color: ", ";\n }\n\n &:focus {\n outline: none;\n }\n"])), mixin.getTypographyStyles('UIBody2'), mixin.contents000, mixin.ellipsis(), mixin.contents200);
25
+ var InputInner = styled__default.default.input(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral__default.default(["\n ", "\n color: ", ";\n\n display: block;\n flex-grow: 1;\n width: 100%;\n padding: 10px 0;\n border: 0;\n background-color: transparent;\n\n &:placeholder-shown {\n ", "\n }\n\n &::placeholder {\n color: ", ";\n }\n\n &:focus {\n outline: none;\n }\n \n &:disabled {\n color: ", ";\n }\n"])), mixin.getTypographyStyles('UIBody2'), mixin.contents000, mixin.ellipsis(), mixin.contents200, mixin.contents200);
26
26
  var InputLabel = styled__default.default.label(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral__default.default(["\n ", "\n display: block;\n margin-bottom: 12px;\n display: flex;\n align-items: center;\n gap: 4px;\n\n & > mark {\n all: unset;\n color: ", ";\n }\n"])), mixin.getTypographyStyles('Title2'), mixin.roleRed);
27
27
  var InputError = styled__default.default.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral__default.default(["\n ", "\n color: ", ";\n\n margin-top: 8px;\n"])), mixin.getTypographyStyles('UIBody3'), mixin.roleRed);
28
28
  var InputHintText = styled__default.default.span(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral__default.default(["\n ", "\n color: ", ";\n white-space: nowrap;\n"])), mixin.getTypographyStyles('UIBody2'), function (_ref3) {
package/dist/src/Inputs/TextInput/styles.cjs.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"styles.cjs.js","sources":["../../../../src/Inputs/TextInput/styles.ts"],"sourcesContent":["'use client';\n\nimport type { ColorVariable } from '@remember-web/mixin';\nimport {\n bg200,\n contents000,\n contents200,\n contents300,\n ellipsis,\n getTypographyStyles,\n roleRed,\n} from '@remember-web/mixin';\nimport { formatUnit } from '@remember-web/shared';\nimport styled, { css } from 'styled-components';\n\nexport const InputWrapper = styled.div<{ $width?: string | number }>`\n ${({ $width }) =>\n $width &&\n css`\n width: ${formatUnit($width)};\n `};\n`;\n\nexport const InputContainer = styled.div<{\n disabled?: boolean;\n $hasError?: boolean;\n}>`\n display: flex;\n align-items: center;\n border: 1px solid ${contents300};\n border-radius: 4px;\n padding: 0 12px;\n gap: 8px;\n\n transition:\n border-color 0.2s,\n background-color 0.2s;\n\n ${({ $hasError, disabled }) => [\n $hasError\n ? css`\n border-color: ${roleRed};\n `\n : css`\n &:focus-within {\n border-color: ${contents000};\n }\n `,\n disabled &&\n css`\n background-color: ${bg200};\n `,\n ]}\n`;\n\nexport const InputDecorator = styled.div`\n flex-shrink: 0;\n /* Inline요소가 들어오면 강제로 block으로 처리 (중앙정렬을 위해) */\n > * {\n display: block;\n }\n`;\n\nexport const InputInner = styled.input`\n ${getTypographyStyles('UIBody2')}\n color: ${contents000};\n\n display: block;\n flex-grow: 1;\n width: 100%;\n padding: 10px 0;\n border: 0;\n background-color: transparent;\n\n &:placeholder-shown {\n ${ellipsis()}\n }\n\n &::placeholder {\n color: ${contents200};\n }\n\n &:focus {\n outline: none;\n }\n`;\n\nexport const InputLabel = styled.label`\n ${getTypographyStyles('Title2')}\n display: block;\n margin-bottom: 12px;\n display: flex;\n align-items: center;\n gap: 4px;\n\n & > mark {\n all: unset;\n color: ${roleRed};\n }\n`;\n\nexport const InputError = styled.div`\n ${getTypographyStyles('UIBody3')}\n color: ${roleRed};\n\n margin-top: 8px;\n`;\n\nexport const InputHintText = styled.span<{ textColor?: ColorVariable }>`\n ${getTypographyStyles('UIBody2')}\n color: ${({ textColor }) => textColor};\n white-space: nowrap;\n`;\n\nexport const InputTogglePasswordVisibilityButton = styled.button`\n all: unset;\n appearance: none;\n cursor: pointer;\n flex-shrink: 0;\n\n & > svg {\n display: block;\n }\n`;\n"],"names":[],"mappings":";;;;;;;;;;;;;AAAa;AAeN;AACH;AAAS;AAIR;;AAkBD;;AAAsB;AAcvB;AAGI;AAQA;;;;AA+CI;AAAY;AAAgB;AAIhC;;;;;;;;;"}
1
+ {"version":3,"file":"styles.cjs.js","sources":["../../../../src/Inputs/TextInput/styles.ts"],"sourcesContent":["'use client';\n\nimport type { ColorVariable } from '@remember-web/mixin';\nimport {\n bg200,\n contents000,\n contents200,\n contents300,\n ellipsis,\n getTypographyStyles,\n roleRed,\n} from '@remember-web/mixin';\nimport { formatUnit } from '@remember-web/shared';\nimport styled, { css } from 'styled-components';\n\nexport const InputWrapper = styled.div<{ $width?: string | number }>`\n ${({ $width }) =>\n $width &&\n css`\n width: ${formatUnit($width)};\n `};\n`;\n\nexport const InputContainer = styled.div<{\n disabled?: boolean;\n $hasError?: boolean;\n}>`\n display: flex;\n align-items: center;\n border: 1px solid ${contents300};\n border-radius: 4px;\n padding: 0 12px;\n gap: 8px;\n\n transition:\n border-color 0.2s,\n background-color 0.2s;\n\n ${({ $hasError, disabled }) => [\n $hasError\n ? css`\n border-color: ${roleRed};\n `\n : css`\n &:focus-within {\n border-color: ${contents000};\n }\n `,\n disabled &&\n css`\n background-color: ${bg200};\n `,\n ]}\n`;\n\nexport const InputDecorator = styled.div`\n flex-shrink: 0;\n /* Inline요소가 들어오면 강제로 block으로 처리 (중앙정렬을 위해) */\n > * {\n display: block;\n }\n`;\n\nexport const InputInner = styled.input`\n ${getTypographyStyles('UIBody2')}\n color: ${contents000};\n\n display: block;\n flex-grow: 1;\n width: 100%;\n padding: 10px 0;\n border: 0;\n background-color: transparent;\n\n &:placeholder-shown {\n ${ellipsis()}\n }\n\n &::placeholder {\n color: ${contents200};\n }\n\n &:focus {\n outline: none;\n }\n \n &:disabled {\n color: ${contents200};\n }\n`;\n\nexport const InputLabel = styled.label`\n ${getTypographyStyles('Title2')}\n display: block;\n margin-bottom: 12px;\n display: flex;\n align-items: center;\n gap: 4px;\n\n & > mark {\n all: unset;\n color: ${roleRed};\n }\n`;\n\nexport const InputError = styled.div`\n ${getTypographyStyles('UIBody3')}\n color: ${roleRed};\n\n margin-top: 8px;\n`;\n\nexport const InputHintText = styled.span<{ textColor?: ColorVariable }>`\n ${getTypographyStyles('UIBody2')}\n color: ${({ textColor }) => textColor};\n white-space: nowrap;\n`;\n\nexport const InputTogglePasswordVisibilityButton = styled.button`\n all: unset;\n appearance: none;\n cursor: pointer;\n flex-shrink: 0;\n\n & > svg {\n display: block;\n }\n`;\n"],"names":[],"mappings":";;;;;;;;;;;;;AAAa;AAeN;AACH;AAAS;AAIR;;AAkBD;;AAAsB;AAcvB;AAGI;AAQA;;;;AAmDI;AAAY;AAAgB;AAIhC;;;;;;;;;"}
package/dist/src/Inputs/TextInput/styles.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/Inputs/TextInput/styles.ts"],"names":[],"mappings":";AAeA,eAAO,MAAM,YAAY;;GAMxB,CAAC;AAEF,eAAO,MAAM,cAAc;;;GA8B1B,CAAC;AAEF,eAAO,MAAM,cAAc,gNAM1B,CAAC;AAEF,eAAO,MAAM,UAAU,yNAsBtB,CAAC;AAEF,eAAO,MAAM,UAAU,yNAYtB,CAAC;AAEF,eAAO,MAAM,UAAU,gNAKtB,CAAC;AAEF,eAAO,MAAM,aAAa;;GAIzB,CAAC;AAEF,eAAO,MAAM,mCAAmC,4NAS/C,CAAC"}
1
+ {"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/Inputs/TextInput/styles.ts"],"names":[],"mappings":";AAeA,eAAO,MAAM,YAAY;;GAMxB,CAAC;AAEF,eAAO,MAAM,cAAc;;;GA8B1B,CAAC;AAEF,eAAO,MAAM,cAAc,gNAM1B,CAAC;AAEF,eAAO,MAAM,UAAU,yNA0BtB,CAAC;AAEF,eAAO,MAAM,UAAU,yNAYtB,CAAC;AAEF,eAAO,MAAM,UAAU,gNAKtB,CAAC;AAEF,eAAO,MAAM,aAAa;;GAIzB,CAAC;AAEF,eAAO,MAAM,mCAAmC,4NAS/C,CAAC"}
package/dist/src/Inputs/TextInput/styles.esm.js CHANGED
@@ -15,7 +15,7 @@ var InputContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedT
15
15
  return [$hasError ? css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n border-color: ", ";\n "])), roleRed) : css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n &:focus-within {\n border-color: ", ";\n }\n "])), contents000), disabled && css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n background-color: ", ";\n "])), bg200)];
16
16
  });
17
17
  var InputDecorator = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n flex-shrink: 0;\n /* Inline\uC694\uC18C\uAC00 \uB4E4\uC5B4\uC624\uBA74 \uAC15\uC81C\uB85C block\uC73C\uB85C \uCC98\uB9AC (\uC911\uC559\uC815\uB82C\uC744 \uC704\uD574) */\n > * {\n display: block;\n }\n"])));
18
- var InputInner = styled.input(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n ", "\n color: ", ";\n\n display: block;\n flex-grow: 1;\n width: 100%;\n padding: 10px 0;\n border: 0;\n background-color: transparent;\n\n &:placeholder-shown {\n ", "\n }\n\n &::placeholder {\n color: ", ";\n }\n\n &:focus {\n outline: none;\n }\n"])), getTypographyStyles('UIBody2'), contents000, ellipsis(), contents200);
18
+ var InputInner = styled.input(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n ", "\n color: ", ";\n\n display: block;\n flex-grow: 1;\n width: 100%;\n padding: 10px 0;\n border: 0;\n background-color: transparent;\n\n &:placeholder-shown {\n ", "\n }\n\n &::placeholder {\n color: ", ";\n }\n\n &:focus {\n outline: none;\n }\n \n &:disabled {\n color: ", ";\n }\n"])), getTypographyStyles('UIBody2'), contents000, ellipsis(), contents200, contents200);
19
19
  var InputLabel = styled.label(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n ", "\n display: block;\n margin-bottom: 12px;\n display: flex;\n align-items: center;\n gap: 4px;\n\n & > mark {\n all: unset;\n color: ", ";\n }\n"])), getTypographyStyles('Title2'), roleRed);
20
20
  var InputError = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n ", "\n color: ", ";\n\n margin-top: 8px;\n"])), getTypographyStyles('UIBody3'), roleRed);
21
21
  var InputHintText = styled.span(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n ", "\n color: ", ";\n white-space: nowrap;\n"])), getTypographyStyles('UIBody2'), function (_ref3) {
package/dist/src/Inputs/TextInput/styles.esm.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"styles.esm.js","sources":["../../../../src/Inputs/TextInput/styles.ts"],"sourcesContent":["'use client';\n\nimport type { ColorVariable } from '@remember-web/mixin';\nimport {\n bg200,\n contents000,\n contents200,\n contents300,\n ellipsis,\n getTypographyStyles,\n roleRed,\n} from '@remember-web/mixin';\nimport { formatUnit } from '@remember-web/shared';\nimport styled, { css } from 'styled-components';\n\nexport const InputWrapper = styled.div<{ $width?: string | number }>`\n ${({ $width }) =>\n $width &&\n css`\n width: ${formatUnit($width)};\n `};\n`;\n\nexport const InputContainer = styled.div<{\n disabled?: boolean;\n $hasError?: boolean;\n}>`\n display: flex;\n align-items: center;\n border: 1px solid ${contents300};\n border-radius: 4px;\n padding: 0 12px;\n gap: 8px;\n\n transition:\n border-color 0.2s,\n background-color 0.2s;\n\n ${({ $hasError, disabled }) => [\n $hasError\n ? css`\n border-color: ${roleRed};\n `\n : css`\n &:focus-within {\n border-color: ${contents000};\n }\n `,\n disabled &&\n css`\n background-color: ${bg200};\n `,\n ]}\n`;\n\nexport const InputDecorator = styled.div`\n flex-shrink: 0;\n /* Inline요소가 들어오면 강제로 block으로 처리 (중앙정렬을 위해) */\n > * {\n display: block;\n }\n`;\n\nexport const InputInner = styled.input`\n ${getTypographyStyles('UIBody2')}\n color: ${contents000};\n\n display: block;\n flex-grow: 1;\n width: 100%;\n padding: 10px 0;\n border: 0;\n background-color: transparent;\n\n &:placeholder-shown {\n ${ellipsis()}\n }\n\n &::placeholder {\n color: ${contents200};\n }\n\n &:focus {\n outline: none;\n }\n`;\n\nexport const InputLabel = styled.label`\n ${getTypographyStyles('Title2')}\n display: block;\n margin-bottom: 12px;\n display: flex;\n align-items: center;\n gap: 4px;\n\n & > mark {\n all: unset;\n color: ${roleRed};\n }\n`;\n\nexport const InputError = styled.div`\n ${getTypographyStyles('UIBody3')}\n color: ${roleRed};\n\n margin-top: 8px;\n`;\n\nexport const InputHintText = styled.span<{ textColor?: ColorVariable }>`\n ${getTypographyStyles('UIBody2')}\n color: ${({ textColor }) => textColor};\n white-space: nowrap;\n`;\n\nexport const InputTogglePasswordVisibilityButton = styled.button`\n all: unset;\n appearance: none;\n cursor: pointer;\n flex-shrink: 0;\n\n & > svg {\n display: block;\n }\n`;\n"],"names":[],"mappings":";;;;;;AAAa;AAeN;AACH;AAAS;AAIR;;AAkBD;;AAAsB;AAcvB;AAGI;AAQA;;;;AA+CI;AAAY;AAAgB;AAIhC;;"}
1
+ {"version":3,"file":"styles.esm.js","sources":["../../../../src/Inputs/TextInput/styles.ts"],"sourcesContent":["'use client';\n\nimport type { ColorVariable } from '@remember-web/mixin';\nimport {\n bg200,\n contents000,\n contents200,\n contents300,\n ellipsis,\n getTypographyStyles,\n roleRed,\n} from '@remember-web/mixin';\nimport { formatUnit } from '@remember-web/shared';\nimport styled, { css } from 'styled-components';\n\nexport const InputWrapper = styled.div<{ $width?: string | number }>`\n ${({ $width }) =>\n $width &&\n css`\n width: ${formatUnit($width)};\n `};\n`;\n\nexport const InputContainer = styled.div<{\n disabled?: boolean;\n $hasError?: boolean;\n}>`\n display: flex;\n align-items: center;\n border: 1px solid ${contents300};\n border-radius: 4px;\n padding: 0 12px;\n gap: 8px;\n\n transition:\n border-color 0.2s,\n background-color 0.2s;\n\n ${({ $hasError, disabled }) => [\n $hasError\n ? css`\n border-color: ${roleRed};\n `\n : css`\n &:focus-within {\n border-color: ${contents000};\n }\n `,\n disabled &&\n css`\n background-color: ${bg200};\n `,\n ]}\n`;\n\nexport const InputDecorator = styled.div`\n flex-shrink: 0;\n /* Inline요소가 들어오면 강제로 block으로 처리 (중앙정렬을 위해) */\n > * {\n display: block;\n }\n`;\n\nexport const InputInner = styled.input`\n ${getTypographyStyles('UIBody2')}\n color: ${contents000};\n\n display: block;\n flex-grow: 1;\n width: 100%;\n padding: 10px 0;\n border: 0;\n background-color: transparent;\n\n &:placeholder-shown {\n ${ellipsis()}\n }\n\n &::placeholder {\n color: ${contents200};\n }\n\n &:focus {\n outline: none;\n }\n \n &:disabled {\n color: ${contents200};\n }\n`;\n\nexport const InputLabel = styled.label`\n ${getTypographyStyles('Title2')}\n display: block;\n margin-bottom: 12px;\n display: flex;\n align-items: center;\n gap: 4px;\n\n & > mark {\n all: unset;\n color: ${roleRed};\n }\n`;\n\nexport const InputError = styled.div`\n ${getTypographyStyles('UIBody3')}\n color: ${roleRed};\n\n margin-top: 8px;\n`;\n\nexport const InputHintText = styled.span<{ textColor?: ColorVariable }>`\n ${getTypographyStyles('UIBody2')}\n color: ${({ textColor }) => textColor};\n white-space: nowrap;\n`;\n\nexport const InputTogglePasswordVisibilityButton = styled.button`\n all: unset;\n appearance: none;\n cursor: pointer;\n flex-shrink: 0;\n\n & > svg {\n display: block;\n }\n`;\n"],"names":[],"mappings":";;;;;;AAAa;AAeN;AACH;AAAS;AAIR;;AAkBD;;AAAsB;AAcvB;AAGI;AAQA;;;;AAmDI;AAAY;AAAgB;AAIhC;;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@remember-web/primitive",
3
- "version": "0.4.2",
3
+ "version": "0.4.4",
4
4
  "description": "Remember Web Primitive Components",
5
5
  "homepage": "https://dramancompany.github.io/remember-web-packages/",
6
6
  "author": "Remember",
@@ -41,9 +41,9 @@
41
41
  "@radix-ui/react-separator": "^1.0.3",
42
42
  "@radix-ui/react-switch": "^1.0.3",
43
43
  "@radix-ui/react-tooltip": "^1.0.7",
44
- "@remember-web/icon": "^0.4.0",
45
- "@remember-web/mixin": "^0.3.0",
46
- "@remember-web/shared": "^0.1.1"
44
+ "@remember-web/icon": "^0.4.1",
45
+ "@remember-web/mixin": "^0.3.2",
46
+ "@remember-web/shared": "^0.1.2"
47
47
  },
48
48
  "devDependencies": {
49
49
  "@babel/core": "^7.24.4",
@@ -69,8 +69,8 @@
69
69
  "typescript": "^5.4.5"
70
70
  },
71
71
  "peerDependencies": {
72
- "react": "^18.2.0",
73
- "react-dom": "^18.2.0",
72
+ "react": "^18.0.0 || ^19.0.0",
73
+ "react-dom": "^18.0.0 || ^19.0.0",
74
74
  "styled-components": ">=6"
75
75
  }
76
76
  }
package/src/Inputs/TextInput/TextInput.stories.tsx CHANGED
@@ -7,6 +7,7 @@ import {
7
7
  isIconName,
8
8
  } from '@/stories/util';
9
9
 
10
+ import { contents000, contents300, roleRed } from '@remember-web/mixin';
10
11
  import TextInput from '.';
11
12
 
12
13
  type Story = StoryObj<typeof TextInput>;
@@ -46,8 +47,8 @@ const meta = {
46
47
  hintText: { type: 'string' },
47
48
  hintTextColor: {
48
49
  control: 'select',
49
- options: ['roleRed', 'contents000', 'contents300'],
50
- defaultValue: 'roleRed',
50
+ options: [roleRed, contents000, contents300],
51
+ defaultValue: roleRed,
51
52
  },
52
53
  leftElement: { control: 'select', options: iconNames },
53
54
  rightElement: { control: 'select', options: iconNames },
package/src/Inputs/TextInput/styles.ts CHANGED
@@ -83,6 +83,10 @@ export const InputInner = styled.input`
83
83
  &:focus {
84
84
  outline: none;
85
85
  }
86
+
87
+ &:disabled {
88
+ color: ${contents200};
89
+ }
86
90
  `;
87
91
 
88
92
  export const InputLabel = styled.label`