@ncds/ui-admin 1.8.21-alpha.1 → 1.8.21-alpha.3

package/dist/types/src/components/forms-and-input/input-base/InputBase.d.ts

@@ -25,7 +25,7 @@ interface InputSideCustomSlot {
     placement?: 'inside' | 'outside';
 }
 type InputLeadingSlotType = InputSideTextSlot | InputSideIconSlot | InputSideCustomSlot;
-type InputTrailingSlotType = InputSideButtonSlot | InputSideIconSlot | InputSideCustomSlot;
+type InputTrailingSlotType = InputSideButtonSlot | InputSideTextSlot | InputSideIconSlot | InputSideCustomSlot;
 interface InputBaseCommonProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
     required?: boolean;
     label?: string;

package/dist/types/src/components/forms-and-input/password-input/__tests__/PasswordInput.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/ui-admin/assets/styles/style.css

@@ -1720,10 +1720,10 @@ button {
 .ncua-input__password-icon {
   color: var(--gray-300);
 }
-.ncua-input__password-lock-icon {
+.ncua-input__slot-icon {
   color: var(--gray-300);
 }
-.ncua-input.has-value .ncua-input__password-lock-icon, .ncua-input:focus-within .ncua-input__password-lock-icon {
+.ncua-input.has-value .ncua-input__slot-icon, .ncua-input:focus-within .ncua-input__slot-icon {
   color: var(--gray-600);
 }
 .ncua-input__left-icon {
@@ -1753,6 +1753,12 @@ button {
 .ncua-input.is-disabled .ncua-input__destructive-icon {
   display: none;
 }
+.ncua-input.is-disabled .ncua-input__password-icon {
+  display: none;
+}
+.ncua-input.is-disabled .ncua-input__slot-icon {
+  color: var(--gray-300);
+}
 .ncua-input.is-disabled .ncua-input__button {
   color: var(--gray-200);
 }
@@ -1815,6 +1821,33 @@ button {
   margin-left: -1px;
 }
 
+.ncua-input__trailing-text-wrap .ncua-input__trailing-text {
+  display: flex;
+  align-items: center;
+  background-color: var(--base-white);
+  border: 1px solid var(--gray-200);
+  padding: 4px 10px;
+}
+.ncua-input__trailing-text-wrap .ncua-input__trailing-text--xs {
+  line-height: var(--line-heights-xs);
+  padding: 4px 10px;
+}
+.ncua-input__trailing-text-wrap .ncua-input__trailing-text--sm {
+  line-height: var(--line-heights-sm);
+  padding: 6px 12px;
+}
+.ncua-input__trailing-text-wrap .ncua-input__trailing-text {
+  border-radius: 0 6px 6px 0;
+  border-left-width: 0;
+  color: var(--gray-400);
+  font-size: var(--font-size-sm);
+}
+.ncua-input__trailing-text-wrap .ncua-input__field:has(+ .ncua-input__trailing-text) {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  margin-right: -1px;
+}
+
 .ncua-input__trailing-button .ncua-input__button {
   display: flex;
   align-items: center;

package/dist/ui-admin/assets/styles/style.scoped.css

@@ -1712,10 +1712,10 @@
 .ncua-input__password-icon {
   color: var(--gray-300);
 }
-.ncua-input__password-lock-icon {
+.ncua-input__slot-icon {
   color: var(--gray-300);
 }
-.ncua-input.has-value .ncua-input__password-lock-icon, .ncua-input:focus-within .ncua-input__password-lock-icon {
+.ncua-input.has-value .ncua-input__slot-icon, .ncua-input:focus-within .ncua-input__slot-icon {
   color: var(--gray-600);
 }
 .ncua-input__left-icon {
@@ -1745,6 +1745,12 @@
 .ncua-input.is-disabled .ncua-input__destructive-icon {
   display: none;
 }
+.ncua-input.is-disabled .ncua-input__password-icon {
+  display: none;
+}
+.ncua-input.is-disabled .ncua-input__slot-icon {
+  color: var(--gray-300);
+}
 .ncua-input.is-disabled .ncua-input__button {
   color: var(--gray-200);
 }
@@ -1807,6 +1813,33 @@
   margin-left: -1px;
 }
 
+.ncua-input__trailing-text-wrap .ncua-input__trailing-text {
+  display: flex;
+  align-items: center;
+  background-color: var(--base-white);
+  border: 1px solid var(--gray-200);
+  padding: 4px 10px;
+}
+.ncua-input__trailing-text-wrap .ncua-input__trailing-text--xs {
+  line-height: var(--line-heights-xs);
+  padding: 4px 10px;
+}
+.ncua-input__trailing-text-wrap .ncua-input__trailing-text--sm {
+  line-height: var(--line-heights-sm);
+  padding: 6px 12px;
+}
+.ncua-input__trailing-text-wrap .ncua-input__trailing-text {
+  border-radius: 0 6px 6px 0;
+  border-left-width: 0;
+  color: var(--gray-400);
+  font-size: var(--font-size-sm);
+}
+.ncua-input__trailing-text-wrap .ncua-input__field:has(+ .ncua-input__trailing-text) {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  margin-right: -1px;
+}
+
 .ncua-input__trailing-button .ncua-input__button {
   display: flex;
   align-items: center;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ncds/ui-admin",
-  "version": "1.8.21-alpha.1",
+  "version": "1.8.21-alpha.3",
   "description": "nhn-commerce의 어드민 디자인 시스템입니다.",
   "scripts": {
     "barrel": "node barrel.js",