@remember-web/primitive 0.2.8 → 0.2.10

package/dist/src/Chips/Chip/typeGuard.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"typeGuard.esm.js","sources":["../../../../src/Chips/Chip/typeGuard.ts"],"sourcesContent":["import type { ChipProps, ChipSize, ChipVariant } from './types';\n\nexport function ensureValidChipProps(props: ChipProps): props is ChipProps {\n  if (props.clickable === false && 'selected' in props) {\n    throw new Error(\n      '오류: \"clickable\"이 false일 때는 \"selected\" 속성을 사용할 수 없습니다. ' +\n        '선택 가능한 Chip을 만들려면 \"clickable\"을 true로 설정하세요.'\n    );\n  }\n\n  if (props.onDelete === undefined && 'deleteIcon' in props) {\n    throw new Error(\n      '오류: \"onDelete\" 함수 없이 \"deleteIcon\"을 사용할 수 없습니다. ' +\n        '\"deleteIcon\"을 사용하려면 \"onDelete\" 함수를 함께 사용해야 합니다.'\n    );\n  }\n\n  if (!props.children) {\n    throw new Error(\n      '오류: Chip 컴포넌트에는 반드시 children이 있어야 합니다. '\n    );\n  }\n\n  if (!props.size) {\n    throw new Error('오류: Chip 컴포넌트에는 반드시 size가 있어야 합니다. ');\n  }\n\n  if (!props.variant) {\n    throw new Error('오류: Chip 컴포넌트에는 반드시 variant가 있어야 합니다. ');\n  }\n\n  const validSizes: ChipSize[] = ['small', 'medium'];\n  if (props.size && !validSizes.includes(props.size)) {\n    throw new Error(\n      `오류: 올바르지 않은 size 값입니다: \"${props.size}\". ` +\n        `유효한 size 값은 다음과 같습니다: ${validSizes.join(', ')}.`\n    );\n  }\n\n  const validVariants: ChipVariant[] = ['filled', 'outline', 'dashedLine'];\n  if (props.variant && !validVariants.includes(props.variant)) {\n    throw new Error(\n      `오류: 올바르지 않은 variant 값입니다: \"${props.variant}\". ` +\n        `유효한 variant 값은 다음과 같습니다: ${validVariants.join(', ')}.`\n    );\n  }\n  return true;\n}\n"],"names":["ensureValidChipProps","props","clickable","Error","onDelete","undefined","children","size","variant","validSizes","includes","concat","join","validVariants"],"mappings":"AAEO,SAASA,oBAAoBA,CAACC,KAAgB,EAAsB;EACzE,IAAIA,KAAK,CAACC,SAAS,KAAK,KAAK,IAAI,UAAU,IAAID,KAAK,EAAE;AACpD,IAAA,MAAM,IAAIE,KAAK,CACb,wDAAwD,GACtD,6CACJ,CAAC,CAAA;AACH,GAAA;EAEA,IAAIF,KAAK,CAACG,QAAQ,KAAKC,SAAS,IAAI,YAAY,IAAIJ,KAAK,EAAE;AACzD,IAAA,MAAM,IAAIE,KAAK,CACb,iDAAiD,GAC/C,iDACJ,CAAC,CAAA;AACH,GAAA;AAEA,EAAA,IAAI,CAACF,KAAK,CAACK,QAAQ,EAAE;AACnB,IAAA,MAAM,IAAIH,KAAK,CACb,yCACF,CAAC,CAAA;AACH,GAAA;AAEA,EAAA,IAAI,CAACF,KAAK,CAACM,IAAI,EAAE;AACf,IAAA,MAAM,IAAIJ,KAAK,CAAC,qCAAqC,CAAC,CAAA;AACxD,GAAA;AAEA,EAAA,IAAI,CAACF,KAAK,CAACO,OAAO,EAAE;AAClB,IAAA,MAAM,IAAIL,KAAK,CAAC,wCAAwC,CAAC,CAAA;AAC3D,GAAA;AAEA,EAAA,IAAMM,UAAsB,GAAG,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAA;AAClD,EAAA,IAAIR,KAAK,CAACM,IAAI,IAAI,CAACE,UAAU,CAACC,QAAQ,CAACT,KAAK,CAACM,IAAI,CAAC,EAAE;AAClD,IAAA,MAAM,IAAIJ,KAAK,CACb,wFAAAQ,MAAA,CAA2BV,KAAK,CAACM,IAAI,iGAAAI,MAAA,CACVF,UAAU,CAACG,IAAI,CAAC,IAAI,CAAC,MAClD,CAAC,CAAA;AACH,GAAA;EAEA,IAAMC,aAA4B,GAAG,CAAC,QAAQ,EAAE,SAAS,EAAE,YAAY,CAAC,CAAA;AACxE,EAAA,IAAIZ,KAAK,CAACO,OAAO,IAAI,CAACK,aAAa,CAACH,QAAQ,CAACT,KAAK,CAACO,OAAO,CAAC,EAAE;AAC3D,IAAA,MAAM,IAAIL,KAAK,CACb,2FAAAQ,MAAA,CAA8BV,KAAK,CAACO,OAAO,oGAAAG,MAAA,CACbE,aAAa,CAACD,IAAI,CAAC,IAAI,CAAC,MACxD,CAAC,CAAA;AACH,GAAA;AACA,EAAA,OAAO,IAAI,CAAA;AACb;;;;"}

package/dist/src/Chips/Chip/types.d.ts

@@ -0,0 +1,43 @@
+import type { ComponentProps } from 'react';
+export type ChipSize = 'small' | 'medium';
+export type ChipVariant = 'filled' | 'outline' | 'dashedLine';
+type ClickableProps = {
+    clickable?: true;
+    selected?: boolean;
+} | {
+    clickable: false;
+    selected?: never;
+};
+type DeleteProps = {
+    onDelete: VoidFunction;
+    deleteIcon?: React.ReactNode;
+} | {
+    onDelete?: never;
+    deleteIcon?: never;
+};
+type BaseChipProps = {
+    size: ChipSize;
+    variant: ChipVariant;
+    children: React.ReactNode;
+    leftIcon?: React.ReactNode;
+    disabled?: boolean;
+};
+export type ChipProps = BaseChipProps & ClickableProps & DeleteProps & ComponentProps<'div'>;
+export type ChipState = 'default' | 'hover' | 'disabled' | 'selected';
+export type ChipStyleProps = {
+    $size: ChipSize;
+    $variant: ChipVariant;
+    $clickable: boolean;
+    $selected: boolean;
+};
+interface ChipStateStyle {
+    backgroundColor: string;
+    color: string;
+    leftIconColor: string;
+    deleteButtonColor: string;
+    border?: string;
+}
+type ChipStateStyles = Record<ChipState, ChipStateStyle>;
+export type ChipVariantStyleMap = Record<ChipVariant, ChipStateStyles>;
+export {};
+//# sourceMappingURL=types.d.ts.map

package/dist/src/Chips/Chip/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/Chips/Chip/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAG5C,MAAM,MAAM,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAC;AAE1C,MAAM,MAAM,WAAW,GAAG,QAAQ,GAAG,SAAS,GAAG,YAAY,CAAC;AAE9D,KAAK,cAAc,GACf;IACE,SAAS,CAAC,EAAE,IAAI,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,GACD;IACE,SAAS,EAAE,KAAK,CAAC;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC;CAClB,CAAC;AAEN,KAAK,WAAW,GACZ;IACE,QAAQ,EAAE,YAAY,CAAC;IACvB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B,GACD;IACE,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,UAAU,CAAC,EAAE,KAAK,CAAC;CACpB,CAAC;AAEN,KAAK,aAAa,GAAG;IACnB,IAAI,EAAE,QAAQ,CAAC;IACf,OAAO,EAAE,WAAW,CAAC;IACrB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,aAAa,GACnC,cAAc,GACd,WAAW,GACX,cAAc,CAAC,KAAK,CAAC,CAAC;AAGxB,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,UAAU,GAAG,UAAU,CAAC;AAEtE,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,EAAE,QAAQ,CAAC;IAChB,QAAQ,EAAE,WAAW,CAAC;IACtB,UAAU,EAAE,OAAO,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,UAAU,cAAc;IACtB,eAAe,EAAE,MAAM,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,MAAM,CAAC;IACtB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,KAAK,eAAe,GAAG,MAAM,CAAC,SAAS,EAAE,cAAc,CAAC,CAAC;AAEzD,MAAM,MAAM,mBAAmB,GAAG,MAAM,CAAC,WAAW,EAAE,eAAe,CAAC,CAAC"}

package/dist/src/Chips/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Chip';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/Chips/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Chips/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC"}

package/dist/src/Inputs/TextInput/index.cjs.js

@@ -36,6 +36,12 @@ var TextInput = function TextInput(_ref, ref) {
     isVisiblePassword = _useState2[0],
     setIsVisiblePassword = _useState2[1];
   var isForceVisibleInput = props.type === 'password' && props.hasTogglePasswordVisibilityButton && isVisiblePassword;
+
+  // NOTE: InputInner 컴포넌트에 전달되는 input native 속성에 커스텀 props인 hasTogglePasswordVisibilityButton가 전달되지 않도록 하는 처리
+  // type === 'password' 일 때에 hasTogglePasswordVisibilityButton 속성이 존재할 수 있음.
+  var inputInnerProps = _objectSpread(_objectSpread({}, props), {}, {
+    hasTogglePasswordVisibilityButton: undefined
+  });
   return /*#__PURE__*/jsxRuntime.jsxs(styles.InputWrapper, {
     $width: width,
     children: [label && /*#__PURE__*/jsxRuntime.jsxs(styles.InputLabel, {
@@ -46,7 +52,7 @@ var TextInput = function TextInput(_ref, ref) {
       })]
     }), /*#__PURE__*/jsxRuntime.jsxs(styles.InputContainer, {
       disabled: disabled,
-      hasError: !!errorMessage,
+      $hasError: !!errorMessage,
       className: className,
       children: [leftElement && /*#__PURE__*/jsxRuntime.jsx(styles.InputDecorator, {
         children: leftElement
@@ -54,7 +60,7 @@ var TextInput = function TextInput(_ref, ref) {
         disabled: disabled,
         id: inputId,
         "aria-labelledby": label ? labelId : undefined
-      }, props), {}, {
+      }, inputInnerProps), {}, {
         type: isForceVisibleInput ? 'text' : props.type || 'text',
         ref: ref
       })), hintText && /*#__PURE__*/jsxRuntime.jsx(styles.InputHintText, {

package/dist/src/Inputs/TextInput/index.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":["../../../../src/Inputs/TextInput/index.tsx"],"sourcesContent":["'use client';\n\nimport { IconHidden, IconVisible } from '@remember-web/icon';\nimport type { ForwardRefRenderFunction } from 'react';\nimport { forwardRef, useId, useState } from 'react';\n\nimport {\n  InputContainer,\n  InputDecorator,\n  InputError,\n  InputHintText,\n  InputInner,\n  InputLabel,\n  InputTogglePasswordVisibilityButton,\n  InputWrapper,\n} from './styles';\nimport type { InputProps } from './types';\n\nconst TextInput: ForwardRefRenderFunction<HTMLInputElement, InputProps> = (\n  {\n    className,\n    label,\n    leftElement,\n    rightElement,\n    disabled,\n    hintText,\n    hintTextColor,\n    errorMessage,\n    width,\n    ...props\n  },\n  ref\n) => {\n  const inputId = useId();\n  const labelId = useId();\n  const [isVisiblePassword, setIsVisiblePassword] = useState(false);\n  const isForceVisibleInput =\n    props.type === 'password' &&\n    props.hasTogglePasswordVisibilityButton &&\n    isVisiblePassword;\n\n  return (\n    <InputWrapper $width={width}>\n      {label && (\n        <InputLabel id={labelId} htmlFor={inputId}>\n          {label}\n          {props.required && <mark>*</mark>}\n        </InputLabel>\n      )}\n      <InputContainer\n        disabled={disabled}\n        hasError={!!errorMessage}\n        className={className}\n      >\n        {leftElement && <InputDecorator>{leftElement}</InputDecorator>}\n        <InputInner\n          disabled={disabled}\n          id={inputId}\n          aria-labelledby={label ? labelId : undefined}\n          {...props}\n          type={isForceVisibleInput ? 'text' : props.type || 'text'}\n          ref={ref}\n        />\n        {hintText && (\n          <InputHintText textColor={hintTextColor}>{hintText}</InputHintText>\n        )}\n        {props.type === 'password' &&\n          props.hasTogglePasswordVisibilityButton && (\n            <TogglePasswordVisibilityButton\n              value={isVisiblePassword}\n              onChange={setIsVisiblePassword}\n            />\n          )}\n        {rightElement && <InputDecorator>{rightElement}</InputDecorator>}\n      </InputContainer>\n      {errorMessage && <InputError>{errorMessage}</InputError>}\n    </InputWrapper>\n  );\n};\n\nconst TogglePasswordVisibilityButton = ({\n  value,\n  onChange,\n}: {\n  value: boolean;\n  onChange: (value: boolean) => void;\n}) => (\n  <InputTogglePasswordVisibilityButton\n    type=\"button\"\n    role=\"switch\"\n    aria-checked={value ? 'true' : 'false'}\n    aria-label=\"비밀번호 표시\"\n    onClick={() => {\n      onChange(!value);\n    }}\n  >\n    {value ? <IconHidden size=\"small\" /> : <IconVisible size=\"small\" />}\n  </InputTogglePasswordVisibilityButton>\n);\n\nexport default forwardRef(TextInput);\n"],"names":["props","isVisiblePassword","setIsVisiblePassword","$width","children","id","htmlFor","disabled","className","ref","textColor","value","onChange","type","role","size"],"mappings":";;;;;;;;;;;;;;;;;AAAa;AAAA;AAAA;AAkBb;AAcK;;;;;;;;;AAHEA;AAIL;AACA;AACA;;AAAOC;AAAmBC;AAC1B;;AAMgBC;AAAcC;AAEZC;AAAaC;AAAiBF;AAErBA;AAAO;AAAO;AAInCG;;AAEAC;AAAqBJ;AAEUA;;AAE7BG;AACAF;;AAC6C;;AAG7CI;AAAS;AAGMC;AAAyBN;AAAU;AAK9CO;AACAC;AAA+B;AAGLR;AAAc;AAAkB;AAEtCA;AAAc;AAAc;AAG9D;AAEA;AAAoC;;;AAQhCS;AACAC;AACA;AACA;;;;AAGEV;AAEmBW;AAAY;AAAmBA;;AAAe;AAC/B;AAGxC;;"}
+{"version":3,"file":"index.cjs.js","sources":["../../../../src/Inputs/TextInput/index.tsx"],"sourcesContent":["'use client';\n\nimport { IconHidden, IconVisible } from '@remember-web/icon';\nimport type { ForwardRefRenderFunction } from 'react';\nimport { forwardRef, useId, useState } from 'react';\n\nimport {\n  InputContainer,\n  InputDecorator,\n  InputError,\n  InputHintText,\n  InputInner,\n  InputLabel,\n  InputTogglePasswordVisibilityButton,\n  InputWrapper,\n} from './styles';\nimport type { InputProps } from './types';\n\nconst TextInput: ForwardRefRenderFunction<HTMLInputElement, InputProps> = (\n  {\n    className,\n    label,\n    leftElement,\n    rightElement,\n    disabled,\n    hintText,\n    hintTextColor,\n    errorMessage,\n    width,\n    ...props\n  },\n  ref\n) => {\n  const inputId = useId();\n  const labelId = useId();\n  const [isVisiblePassword, setIsVisiblePassword] = useState(false);\n  const isForceVisibleInput =\n    props.type === 'password' &&\n    props.hasTogglePasswordVisibilityButton &&\n    isVisiblePassword;\n\n  // NOTE: InputInner 컴포넌트에 전달되는 input native 속성에 커스텀 props인 hasTogglePasswordVisibilityButton가 전달되지 않도록 하는 처리\n  // type === 'password' 일 때에 hasTogglePasswordVisibilityButton 속성이 존재할 수 있음.\n  const inputInnerProps = {\n    ...props,\n    hasTogglePasswordVisibilityButton: undefined,\n  };\n\n  return (\n    <InputWrapper $width={width}>\n      {label && (\n        <InputLabel id={labelId} htmlFor={inputId}>\n          {label}\n          {props.required && <mark>*</mark>}\n        </InputLabel>\n      )}\n      <InputContainer\n        disabled={disabled}\n        $hasError={!!errorMessage}\n        className={className}\n      >\n        {leftElement && <InputDecorator>{leftElement}</InputDecorator>}\n        <InputInner\n          disabled={disabled}\n          id={inputId}\n          aria-labelledby={label ? labelId : undefined}\n          {...inputInnerProps}\n          type={isForceVisibleInput ? 'text' : props.type || 'text'}\n          ref={ref}\n        />\n        {hintText && (\n          <InputHintText textColor={hintTextColor}>{hintText}</InputHintText>\n        )}\n        {props.type === 'password' &&\n          props.hasTogglePasswordVisibilityButton && (\n            <TogglePasswordVisibilityButton\n              value={isVisiblePassword}\n              onChange={setIsVisiblePassword}\n            />\n          )}\n        {rightElement && <InputDecorator>{rightElement}</InputDecorator>}\n      </InputContainer>\n      {errorMessage && <InputError>{errorMessage}</InputError>}\n    </InputWrapper>\n  );\n};\n\nconst TogglePasswordVisibilityButton = ({\n  value,\n  onChange,\n}: {\n  value: boolean;\n  onChange: (value: boolean) => void;\n}) => (\n  <InputTogglePasswordVisibilityButton\n    type=\"button\"\n    role=\"switch\"\n    aria-checked={value ? 'true' : 'false'}\n    aria-label=\"비밀번호 표시\"\n    onClick={() => {\n      onChange(!value);\n    }}\n  >\n    {value ? <IconHidden size=\"small\" /> : <IconVisible size=\"small\" />}\n  </InputTogglePasswordVisibilityButton>\n);\n\nexport default forwardRef(TextInput);\n"],"names":["props","isVisiblePassword","setIsVisiblePassword","hasTogglePasswordVisibilityButton","$width","children","id","htmlFor","disabled","className","ref","textColor","value","onChange","type","role","size"],"mappings":";;;;;;;;;;;;;;;;;AAAa;AAAA;AAAA;AAkBb;AAcK;;;;;;;;;AAHEA;AAIL;AACA;AACA;;AAAOC;AAAmBC;AAC1B;;AAKA;AACA;AACA;AAEEC;;;AAIcC;AAAcC;AAEZC;AAAaC;AAAiBF;AAErBA;AAAO;AAAO;AAInCG;;AAEAC;AAAqBJ;AAEUA;;AAE7BG;AACAF;;AAC6C;;AAG7CI;AAAS;AAGMC;AAAyBN;AAAU;AAK9CO;AACAC;AAA+B;AAGLR;AAAc;AAAkB;AAEtCA;AAAc;AAAc;AAG9D;AAEA;AAAoC;;;AAQhCS;AACAC;AACA;AACA;;;;AAGEV;AAEmBW;AAAY;AAAmBA;;AAAe;AAC/B;AAGxC;;"}

package/dist/src/Inputs/TextInput/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/Inputs/TextInput/index.tsx"],"names":[],"mappings":";AAgBA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;;AAoF1C,wBAAqC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/Inputs/TextInput/index.tsx"],"names":[],"mappings":";AAgBA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;;AA2F1C,wBAAqC"}

package/dist/src/Inputs/TextInput/index.esm.js

@@ -28,6 +28,12 @@ var TextInput = function TextInput(_ref, ref) {
     isVisiblePassword = _useState2[0],
     setIsVisiblePassword = _useState2[1];
   var isForceVisibleInput = props.type === 'password' && props.hasTogglePasswordVisibilityButton && isVisiblePassword;
+
+  // NOTE: InputInner 컴포넌트에 전달되는 input native 속성에 커스텀 props인 hasTogglePasswordVisibilityButton가 전달되지 않도록 하는 처리
+  // type === 'password' 일 때에 hasTogglePasswordVisibilityButton 속성이 존재할 수 있음.
+  var inputInnerProps = _objectSpread(_objectSpread({}, props), {}, {
+    hasTogglePasswordVisibilityButton: undefined
+  });
   return /*#__PURE__*/jsxs(InputWrapper, {
     $width: width,
     children: [label && /*#__PURE__*/jsxs(InputLabel, {
@@ -38,7 +44,7 @@ var TextInput = function TextInput(_ref, ref) {
       })]
     }), /*#__PURE__*/jsxs(InputContainer, {
       disabled: disabled,
-      hasError: !!errorMessage,
+      $hasError: !!errorMessage,
       className: className,
       children: [leftElement && /*#__PURE__*/jsx(InputDecorator, {
         children: leftElement
@@ -46,7 +52,7 @@ var TextInput = function TextInput(_ref, ref) {
         disabled: disabled,
         id: inputId,
         "aria-labelledby": label ? labelId : undefined
-      }, props), {}, {
+      }, inputInnerProps), {}, {
         type: isForceVisibleInput ? 'text' : props.type || 'text',
         ref: ref
       })), hintText && /*#__PURE__*/jsx(InputHintText, {

package/dist/src/Inputs/TextInput/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":["../../../../src/Inputs/TextInput/index.tsx"],"sourcesContent":["'use client';\n\nimport { IconHidden, IconVisible } from '@remember-web/icon';\nimport type { ForwardRefRenderFunction } from 'react';\nimport { forwardRef, useId, useState } from 'react';\n\nimport {\n  InputContainer,\n  InputDecorator,\n  InputError,\n  InputHintText,\n  InputInner,\n  InputLabel,\n  InputTogglePasswordVisibilityButton,\n  InputWrapper,\n} from './styles';\nimport type { InputProps } from './types';\n\nconst TextInput: ForwardRefRenderFunction<HTMLInputElement, InputProps> = (\n  {\n    className,\n    label,\n    leftElement,\n    rightElement,\n    disabled,\n    hintText,\n    hintTextColor,\n    errorMessage,\n    width,\n    ...props\n  },\n  ref\n) => {\n  const inputId = useId();\n  const labelId = useId();\n  const [isVisiblePassword, setIsVisiblePassword] = useState(false);\n  const isForceVisibleInput =\n    props.type === 'password' &&\n    props.hasTogglePasswordVisibilityButton &&\n    isVisiblePassword;\n\n  return (\n    <InputWrapper $width={width}>\n      {label && (\n        <InputLabel id={labelId} htmlFor={inputId}>\n          {label}\n          {props.required && <mark>*</mark>}\n        </InputLabel>\n      )}\n      <InputContainer\n        disabled={disabled}\n        hasError={!!errorMessage}\n        className={className}\n      >\n        {leftElement && <InputDecorator>{leftElement}</InputDecorator>}\n        <InputInner\n          disabled={disabled}\n          id={inputId}\n          aria-labelledby={label ? labelId : undefined}\n          {...props}\n          type={isForceVisibleInput ? 'text' : props.type || 'text'}\n          ref={ref}\n        />\n        {hintText && (\n          <InputHintText textColor={hintTextColor}>{hintText}</InputHintText>\n        )}\n        {props.type === 'password' &&\n          props.hasTogglePasswordVisibilityButton && (\n            <TogglePasswordVisibilityButton\n              value={isVisiblePassword}\n              onChange={setIsVisiblePassword}\n            />\n          )}\n        {rightElement && <InputDecorator>{rightElement}</InputDecorator>}\n      </InputContainer>\n      {errorMessage && <InputError>{errorMessage}</InputError>}\n    </InputWrapper>\n  );\n};\n\nconst TogglePasswordVisibilityButton = ({\n  value,\n  onChange,\n}: {\n  value: boolean;\n  onChange: (value: boolean) => void;\n}) => (\n  <InputTogglePasswordVisibilityButton\n    type=\"button\"\n    role=\"switch\"\n    aria-checked={value ? 'true' : 'false'}\n    aria-label=\"비밀번호 표시\"\n    onClick={() => {\n      onChange(!value);\n    }}\n  >\n    {value ? <IconHidden size=\"small\" /> : <IconVisible size=\"small\" />}\n  </InputTogglePasswordVisibilityButton>\n);\n\nexport default forwardRef(TextInput);\n"],"names":["props","isVisiblePassword","setIsVisiblePassword","$width","children","id","htmlFor","disabled","className","ref","textColor","value","onChange","type","role","size"],"mappings":";;;;;;;;;AAAa;AAAA;AAAA;AAkBb;AAcK;;;;;;;;;AAHEA;AAIL;AACA;AACA;;AAAOC;AAAmBC;AAC1B;;AAMgBC;AAAcC;AAEZC;AAAaC;AAAiBF;AAErBA;AAAO;AAAO;AAInCG;;AAEAC;AAAqBJ;AAEUA;;AAE7BG;AACAF;;AAC6C;;AAG7CI;AAAS;AAGMC;AAAyBN;AAAU;AAK9CO;AACAC;AAA+B;AAGLR;AAAc;AAAkB;AAEtCA;AAAc;AAAc;AAG9D;AAEA;AAAoC;;;AAQhCS;AACAC;AACA;AACA;;;;AAGEV;AAEmBW;AAAY;AAAmBA;;AAAe;AAC/B;AAGxC;;"}
+{"version":3,"file":"index.esm.js","sources":["../../../../src/Inputs/TextInput/index.tsx"],"sourcesContent":["'use client';\n\nimport { IconHidden, IconVisible } from '@remember-web/icon';\nimport type { ForwardRefRenderFunction } from 'react';\nimport { forwardRef, useId, useState } from 'react';\n\nimport {\n  InputContainer,\n  InputDecorator,\n  InputError,\n  InputHintText,\n  InputInner,\n  InputLabel,\n  InputTogglePasswordVisibilityButton,\n  InputWrapper,\n} from './styles';\nimport type { InputProps } from './types';\n\nconst TextInput: ForwardRefRenderFunction<HTMLInputElement, InputProps> = (\n  {\n    className,\n    label,\n    leftElement,\n    rightElement,\n    disabled,\n    hintText,\n    hintTextColor,\n    errorMessage,\n    width,\n    ...props\n  },\n  ref\n) => {\n  const inputId = useId();\n  const labelId = useId();\n  const [isVisiblePassword, setIsVisiblePassword] = useState(false);\n  const isForceVisibleInput =\n    props.type === 'password' &&\n    props.hasTogglePasswordVisibilityButton &&\n    isVisiblePassword;\n\n  // NOTE: InputInner 컴포넌트에 전달되는 input native 속성에 커스텀 props인 hasTogglePasswordVisibilityButton가 전달되지 않도록 하는 처리\n  // type === 'password' 일 때에 hasTogglePasswordVisibilityButton 속성이 존재할 수 있음.\n  const inputInnerProps = {\n    ...props,\n    hasTogglePasswordVisibilityButton: undefined,\n  };\n\n  return (\n    <InputWrapper $width={width}>\n      {label && (\n        <InputLabel id={labelId} htmlFor={inputId}>\n          {label}\n          {props.required && <mark>*</mark>}\n        </InputLabel>\n      )}\n      <InputContainer\n        disabled={disabled}\n        $hasError={!!errorMessage}\n        className={className}\n      >\n        {leftElement && <InputDecorator>{leftElement}</InputDecorator>}\n        <InputInner\n          disabled={disabled}\n          id={inputId}\n          aria-labelledby={label ? labelId : undefined}\n          {...inputInnerProps}\n          type={isForceVisibleInput ? 'text' : props.type || 'text'}\n          ref={ref}\n        />\n        {hintText && (\n          <InputHintText textColor={hintTextColor}>{hintText}</InputHintText>\n        )}\n        {props.type === 'password' &&\n          props.hasTogglePasswordVisibilityButton && (\n            <TogglePasswordVisibilityButton\n              value={isVisiblePassword}\n              onChange={setIsVisiblePassword}\n            />\n          )}\n        {rightElement && <InputDecorator>{rightElement}</InputDecorator>}\n      </InputContainer>\n      {errorMessage && <InputError>{errorMessage}</InputError>}\n    </InputWrapper>\n  );\n};\n\nconst TogglePasswordVisibilityButton = ({\n  value,\n  onChange,\n}: {\n  value: boolean;\n  onChange: (value: boolean) => void;\n}) => (\n  <InputTogglePasswordVisibilityButton\n    type=\"button\"\n    role=\"switch\"\n    aria-checked={value ? 'true' : 'false'}\n    aria-label=\"비밀번호 표시\"\n    onClick={() => {\n      onChange(!value);\n    }}\n  >\n    {value ? <IconHidden size=\"small\" /> : <IconVisible size=\"small\" />}\n  </InputTogglePasswordVisibilityButton>\n);\n\nexport default forwardRef(TextInput);\n"],"names":["props","isVisiblePassword","setIsVisiblePassword","hasTogglePasswordVisibilityButton","$width","children","id","htmlFor","disabled","className","ref","textColor","value","onChange","type","role","size"],"mappings":";;;;;;;;;AAAa;AAAA;AAAA;AAkBb;AAcK;;;;;;;;;AAHEA;AAIL;AACA;AACA;;AAAOC;AAAmBC;AAC1B;;AAKA;AACA;AACA;AAEEC;;;AAIcC;AAAcC;AAEZC;AAAaC;AAAiBF;AAErBA;AAAO;AAAO;AAInCG;;AAEAC;AAAqBJ;AAEUA;;AAE7BG;AACAF;;AAC6C;;AAG7CI;AAAS;AAGMC;AAAyBN;AAAU;AAK9CO;AACAC;AAA+B;AAGLR;AAAc;AAAkB;AAEtCA;AAAc;AAAc;AAG9D;AAEA;AAAoC;;;AAQhCS;AACAC;AACA;AACA;;;;AAGEV;AAEmBW;AAAY;AAAmBA;;AAAe;AAC/B;AAGxC;;"}

package/dist/src/Inputs/TextInput/styles.cjs.js

@@ -17,9 +17,9 @@ var InputWrapper = styled__default.default.div(_templateObject || (_templateObje
   return $width && styled.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default.default(["\n      width: ", ";\n    "])), shared.formatUnit($width));
 });
 var InputContainer = styled__default.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default.default(["\n  display: flex;\n  align-items: center;\n  border: 1px solid ", ";\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  ", "\n"])), mixin.contents300, function (_ref2) {
-  var hasError = _ref2.hasError,
+  var $hasError = _ref2.$hasError,
     disabled = _ref2.disabled;
-  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)];
+  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)];
 });
 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"])));
 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);

package/dist/src/Inputs/TextInput/styles.cjs.js.map

@@ -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('SubTitle1')}\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('Caption1')}\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":["InputWrapper","InputDecorator","InputTogglePasswordVisibilityButton"],"mappings":";;;;;;;;;;;;;AAAa;AAeAA;AACT;AAAS;AAIR;;AAkBD;;AAAqB;AActB;AAGUC;AAQN;;;;AA+CI;AAAY;AAAgB;AAI1BC;;;;;;;;;"}
+{"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('SubTitle1')}\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('Caption1')}\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":["InputWrapper","InputDecorator","InputTogglePasswordVisibilityButton"],"mappings":";;;;;;;;;;;;;AAAa;AAeAA;AACT;AAAS;AAIR;;AAkBD;;AAAsB;AAcvB;AAGUC;AAQN;;;;AA+CI;AAAY;AAAgB;AAI1BC;;;;;;;;;"}

package/dist/src/Inputs/TextInput/styles.d.ts

@@ -4,7 +4,7 @@ export declare const InputWrapper: import("styled-components").IStyledComponent<
 }>>;
 export declare const InputContainer: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     disabled?: boolean | undefined;
-    hasError?: boolean | undefined;
+    $hasError?: boolean | undefined;
 }>>;
 export declare const InputDecorator: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
 export declare const InputInner: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never>>;

package/dist/src/Inputs/TextInput/styles.esm.js

@@ -10,9 +10,9 @@ var InputWrapper = styled.div(_templateObject || (_templateObject = _taggedTempl
   return $width && css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      width: ", ";\n    "])), formatUnit($width));
 });
 var InputContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  border: 1px solid ", ";\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  ", "\n"])), contents300, function (_ref2) {
-  var hasError = _ref2.hasError,
+  var $hasError = _ref2.$hasError,
     disabled = _ref2.disabled;
-  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)];
+  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)];
 });
 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"])));
 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);

package/dist/src/Inputs/TextInput/styles.esm.js.map

@@ -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('SubTitle1')}\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('Caption1')}\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":["InputWrapper","InputDecorator","InputTogglePasswordVisibilityButton"],"mappings":";;;;;;AAAa;AAeAA;AACT;AAAS;AAIR;;AAkBD;;AAAqB;AActB;AAGUC;AAQN;;;;AA+CI;AAAY;AAAgB;AAI1BC;;"}
+{"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('SubTitle1')}\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('Caption1')}\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":["InputWrapper","InputDecorator","InputTogglePasswordVisibilityButton"],"mappings":";;;;;;AAAa;AAeAA;AACT;AAAS;AAIR;;AAkBD;;AAAsB;AAcvB;AAGUC;AAQN;;;;AA+CI;AAAY;AAAgB;AAI1BC;;"}

package/dist/src/index.cjs.js

@@ -31,6 +31,7 @@ var index$j = require('./Floating/Popover/index.cjs.js');
 var index$k = require('./Floating/Tooltip/index.cjs.js');
 var styles$2 = require('./Floating/DropdownMenu/styles.cjs.js');
 var styles$3 = require('./Floating/Popover/styles.cjs.js');
+var index$l = require('./Chips/Chip/index.cjs.js');
 
 
 
@@ -80,4 +81,5 @@ exports.StyledPopoverContent = styles$3.StyledPopoverContent;
 exports.StyledPopoverContentWrapper = styles$3.StyledPopoverContentWrapper;
 exports.showFadeIn = styles$3.showFadeIn;
 exports.showFadeOut = styles$3.showFadeOut;
+exports.Chip = index$l.Chip;
 //# sourceMappingURL=index.cjs.js.map

package/dist/src/index.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/src/index.d.ts

@@ -8,4 +8,5 @@ export * from './Modals';
 export * from './Paginations';
 export * from './Inputs';
 export * from './Floating';
+export * from './Chips';
 //# sourceMappingURL=index.d.ts.map

package/dist/src/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC"}

package/dist/src/index.esm.js

@@ -29,4 +29,5 @@ export { default as Popover } from './Floating/Popover/index.esm.js';
 export { default as Tooltip } from './Floating/Tooltip/index.esm.js';
 export { DropdownMenuItemDisabledCSS, DropdownMenuItemHoverCSS, StyledDropdownMenuContent, StyledDropdownMenuContentWrapper, StyledDropdownMenuItem, StyledDropdownMenuSection, StyledDropdownMenuSectionTitle, dropdownMenuItemCSS, getDropdownMenuItemCss } from './Floating/DropdownMenu/styles.esm.js';
 export { StyledPopoverContent, StyledPopoverContentWrapper, showFadeIn, showFadeOut } from './Floating/Popover/styles.esm.js';
+export { Chip } from './Chips/Chip/index.esm.js';
 //# sourceMappingURL=index.esm.js.map

package/dist/src/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/src/stories/common.styles.d.ts

@@ -8,9 +8,10 @@ export declare const TitleContainer: import("styled-components").IStyledComponen
 export declare const Table: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, never>>;
 export declare const TableHeader: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, never>>;
 export declare const TableBody: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, never>>;
-export declare const TableColumn: ({ isHeader, align, children, }: {
+export declare const TableColumn: ({ isHeader, align, rowSpan, children, }: {
     isHeader?: boolean;
     align?: TextAlign;
+    rowSpan?: number;
     children: ReactNode;
 }) => import("react/jsx-runtime").JSX.Element;
 export declare const TableRow: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, never>>;

package/dist/src/stories/common.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"common.styles.d.ts","sourceRoot":"","sources":["../../../src/stories/common.styles.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,KAAK,SAAS,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE7C,eAAO,MAAM,KAAK;;;GAmBjB,CAAC;AAEF,eAAO,MAAM,cAAc,gNAE1B,CAAC;AAEF,eAAO,MAAM,KAAK,yNAIjB,CAAC;AAEF,eAAO,MAAM,WAAW,kOAAiB,CAAC;AAE1C,eAAO,MAAM,SAAS,kOAAiB,CAAC;AAkBxC,eAAO,MAAM,WAAW,mCAIrB;IACD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,EAAE,SAAS,CAAC;CACrB,4CAKE,CAAC;AAEJ,eAAO,MAAM,QAAQ,0NAAc,CAAC"}
+{"version":3,"file":"common.styles.d.ts","sourceRoot":"","sources":["../../../src/stories/common.styles.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,KAAK,SAAS,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE7C,eAAO,MAAM,KAAK;;;GAmBjB,CAAC;AAEF,eAAO,MAAM,cAAc,gNAE1B,CAAC;AAEF,eAAO,MAAM,KAAK,yNAIjB,CAAC;AAEF,eAAO,MAAM,WAAW,kOAAiB,CAAC;AAE1C,eAAO,MAAM,SAAS,kOAAiB,CAAC;AAkBxC,eAAO,MAAM,WAAW,4CAKrB;IACD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,SAAS,CAAC;CACrB,4CASE,CAAC;AAEJ,eAAO,MAAM,QAAQ,0NAAc,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remember-web/primitive",
-  "version": "0.2.8",
+  "version": "0.2.10",
   "description": "Remember Web Primitive Components",
   "homepage": "https://dramancompany.github.io/remember-web-packages/",
   "author": "Remember",
@@ -42,7 +42,7 @@
     "@radix-ui/react-switch": "^1.0.3",
     "@radix-ui/react-tooltip": "^1.0.7",
     "@remember-web/icon": "^0.1.12",
-    "@remember-web/mixin": "^0.2.5",
+    "@remember-web/mixin": "^0.2.6",
     "@remember-web/shared": "^0.1.1"
   },
   "devDependencies": {

package/src/Chips/Chip/Chip.stories.tsx

@@ -0,0 +1,138 @@
+import {
+  getIconComponentFromName,
+  iconNames,
+  isIconName,
+} from '@/stories/util';
+import type { Meta, StoryObj } from '@storybook/react';
+import { Fragment, createElement } from 'react';
+
+import { Typography } from '@/Common';
+import {
+  Paper,
+  Table,
+  TableBody,
+  TableColumn,
+  TableHeader,
+  TableRow,
+} from '@/stories/common.styles';
+import { IconArrow2LeftS } from '@remember-web/icon';
+import { Chip } from './';
+import type { ChipSize } from './types';
+
+type Story = StoryObj<typeof Chip>;
+
+const meta = {
+  title: 'Primitive/Chips/Chip',
+  component: Chip,
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['filled', 'outline', 'dashedLine'],
+    },
+    size: { control: 'select', options: ['small', 'medium'] },
+    children: { control: 'text' },
+    disabled: { control: 'boolean' },
+    selected: { control: 'boolean' },
+    clickable: { control: 'boolean' },
+    onDelete: { action: 'deleted' },
+    leftIcon: { control: 'select', options: ['none', ...iconNames] },
+    deleteIcon: { control: 'select', options: ['none', ...iconNames] },
+  },
+  args: {
+    children: 'Test Chip',
+    onDelete: () => console.log('Delete'),
+    size: 'medium',
+    variant: 'filled',
+    clickable: true,
+    selected: false,
+    disabled: false,
+  },
+} satisfies Meta<typeof Chip>;
+
+export const Default: Story = {
+  render: ({ leftIcon, deleteIcon, selected, clickable, ...args }) => {
+    const leftIconString = String(leftIcon);
+    const leftIconElement =
+      leftIcon && isIconName(leftIconString)
+        ? createElement(getIconComponentFromName(leftIconString))
+        : undefined;
+
+    const rightIconString = String(deleteIcon);
+    const deleteIconElement =
+      rightIconString && isIconName(rightIconString)
+        ? createElement(getIconComponentFromName(rightIconString))
+        : undefined;
+
+    return (
+      <Chip
+        {...args}
+        key={JSON.stringify(args)}
+        leftIcon={leftIconElement}
+        deleteIcon={deleteIconElement}
+        onDelete={args.onDelete || (() => {})}
+      />
+    );
+  },
+};
+
+const variants = ['filled', 'outline', 'dashedLine'] as const;
+const sizes = ['medium', 'small'] as const;
+const states = ['default', 'hover', 'disabled', 'selected'] as const;
+
+export const Overview: Story = {
+  render: () => (
+    <Paper $minWidth={800} $maxWidth={1200}>
+      <Typography variant="Headline">Chip Overview</Typography>
+      <br />
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableColumn isHeader>State</TableColumn>
+            <TableColumn isHeader>Size</TableColumn>
+            {variants.map((variant) => (
+              <TableColumn key={variant} isHeader align="center">
+                {variant.charAt(0).toUpperCase() + variant.slice(1)}
+              </TableColumn>
+            ))}
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {states.map((state) => (
+            <Fragment key={state}>
+              {sizes.map((size: ChipSize, index: number) => (
+                <TableRow key={`${state}-${size}`}>
+                  {index === 0 && (
+                    <TableColumn rowSpan={2}>
+                      {state.charAt(0).toUpperCase() + state.slice(1)}
+                    </TableColumn>
+                  )}
+                  <TableColumn>
+                    {size.charAt(0).toUpperCase() + size.slice(1)}
+                  </TableColumn>
+                  {variants.map((variant) => (
+                    <TableColumn key={variant} align="center">
+                      <Chip
+                        size={size}
+                        variant={variant}
+                        clickable={state !== 'disabled' || true}
+                        disabled={state === 'disabled'}
+                        selected={state === 'selected'}
+                        className={state === 'hover' ? 'hover-state' : ''}
+                        onDelete={() => console.log('Delete')}
+                        leftIcon={<IconArrow2LeftS />}
+                      >
+                        칩이름
+                      </Chip>
+                    </TableColumn>
+                  ))}
+                </TableRow>
+              ))}
+            </Fragment>
+          ))}
+        </TableBody>
+      </Table>
+    </Paper>
+  ),
+};
+
+export default meta;

package/src/Chips/Chip/const.ts

@@ -0,0 +1,115 @@
+import {
+  bg100,
+  bg200,
+  bg300,
+  contents100,
+  contents150,
+  contents200,
+  contents300,
+  contents999,
+  primary100,
+} from '@remember-web/mixin';
+import type { ChipSize, ChipVariant, ChipVariantStyleMap } from './types';
+
+export const CHIP_SIZE_STYLE = {
+  small: {
+    typography: 'Caption1',
+    padding: '8px 10px',
+    height: '28px',
+  },
+  medium: {
+    typography: 'UIBody3',
+    padding: '8px 12px',
+    height: '30px',
+  },
+} as const satisfies Record<ChipSize, unknown>;
+
+export const CHIP_VARIANT_STYLE: ChipVariantStyleMap = {
+  filled: {
+    default: {
+      backgroundColor: bg200,
+      color: contents150,
+      leftIconColor: contents150,
+      deleteButtonColor: contents200,
+    },
+    hover: {
+      backgroundColor: bg200,
+      color: contents100,
+      leftIconColor: contents100,
+      deleteButtonColor: contents150,
+    },
+    disabled: {
+      backgroundColor: bg300,
+      color: contents300,
+      leftIconColor: contents300,
+      deleteButtonColor: contents300,
+    },
+    selected: {
+      backgroundColor: primary100,
+      color: contents999,
+      leftIconColor: contents999,
+      deleteButtonColor: contents999,
+    },
+  },
+
+  outline: {
+    default: {
+      backgroundColor: bg100,
+      color: contents150,
+      leftIconColor: contents150,
+      deleteButtonColor: contents200,
+      border: `1px solid ${contents150}`,
+    },
+    hover: {
+      backgroundColor: bg100,
+      color: contents100,
+      leftIconColor: contents100,
+      deleteButtonColor: contents150,
+      border: `1px solid ${contents100}`,
+    },
+    disabled: {
+      backgroundColor: bg100,
+      color: contents200,
+      leftIconColor: contents200,
+      deleteButtonColor: contents200,
+      border: `1px solid ${contents200}`,
+    },
+    selected: {
+      backgroundColor: primary100,
+      color: contents999,
+      leftIconColor: contents999,
+      deleteButtonColor: contents999,
+    },
+  },
+
+  dashedLine: {
+    default: {
+      backgroundColor: bg100,
+      color: contents150,
+      leftIconColor: contents150,
+      deleteButtonColor: contents200,
+      border: `1px dashed ${contents150}`,
+    },
+    hover: {
+      backgroundColor: bg100,
+      color: contents100,
+      leftIconColor: contents100,
+      deleteButtonColor: contents150,
+      border: `1px dashed ${contents100}`,
+    },
+    disabled: {
+      backgroundColor: bg100,
+      color: contents200,
+      leftIconColor: contents200,
+      deleteButtonColor: contents200,
+      border: `1px dashed ${contents200}`,
+    },
+    selected: {
+      backgroundColor: primary100,
+      color: contents999,
+      leftIconColor: contents999,
+      deleteButtonColor: contents999,
+      border: `1px solid ${primary100}`,
+    },
+  },
+} as const satisfies Record<ChipVariant, unknown>;