@ncds/ui-admin 0.0.11 → 0.0.13

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

@@ -69,17 +69,17 @@
   --shadow-2xl: 0px 24px 48px -12px #1018282e;
   --shadow-3xl: 0px 32px 64px -12px #10182824;
   --font-families-commerce-sans: Commerce Sans;
-  --line-heights-display-xl: 76;
-  --line-heights-display-lg: 60;
-  --line-heights-display-md: 46;
-  --line-heights-display-sm: 38;
-  --line-heights-display-xs: 32;
-  --line-heights-xl: 30;
-  --line-heights-lg: 28;
-  --line-heights-md: 24;
-  --line-heights-sm: 22;
-  --line-heights-xs: 18;
-  --line-heights-xxs: 14;
+  --line-heights-display-xl: 76px;
+  --line-heights-display-lg: 60px;
+  --line-heights-display-md: 46px;
+  --line-heights-display-sm: 38px;
+  --line-heights-display-xs: 32px;
+  --line-heights-xl: 30px;
+  --line-heights-lg: 28px;
+  --line-heights-md: 24px;
+  --line-heights-sm: 22px;
+  --line-heights-xs: 18px;
+  --line-heights-xxs: 14px;
   --font-weights-commerce-sans-0: 400;
   --font-weights-commerce-sans-1: 500;
   --font-weights-commerce-sans-2: 700;
@@ -229,8 +229,8 @@ button {
 }
 
 :root {
-  --button-height-xxs: 28px;
-  --button-height-xs: 32px;
+  --button-height-xxs: 24px;
+  --button-height-xs: 28px;
   --button-height-sm: 36px;
   --button-height-md: 40px;
 }
@@ -247,6 +247,7 @@ button {
   gap: 8px;
   line-height: normal;
   color: inherit;
+  transition: background-color 0.2s ease-in-out;
 }
 .ncua-btn__label {
   pointer-events: none;
@@ -456,7 +457,7 @@ button {
   z-index: 0;
 }
 
-[class*=btn--link] {
+[class*=ncua-btn--link] {
   padding: 0;
   height: auto !important;
   background-color: transparent !important;
@@ -767,7 +768,8 @@ button {
   box-shadow: var(--shadow-xs-focused-3px-gray-100);
   z-index: 1;
 }
-.ncua-input input {
+.ncua-input input,
+.ncua-input textarea {
   width: 100%;
   padding: 0;
   border: 0;
@@ -776,23 +778,29 @@ button {
   line-height: 1rem;
   background-color: var(--base-white);
 }
-.ncua-input input::-webkit-input-placeholder {
+.ncua-input input::-webkit-input-placeholder,
+.ncua-input textarea::-webkit-input-placeholder {
   color: var(--gray-300);
 }
-.ncua-input input::-moz-placeholder {
+.ncua-input input::-moz-placeholder,
+.ncua-input textarea::-moz-placeholder {
   color: var(--gray-300);
 }
-.ncua-input input:-ms-input-placeholder {
+.ncua-input input:-ms-input-placeholder,
+.ncua-input textarea:-ms-input-placeholder {
   color: var(--gray-300);
 }
-.ncua-input input::-ms-input-placeholder {
+.ncua-input input::-ms-input-placeholder,
+.ncua-input textarea::-ms-input-placeholder {
   color: var(--gray-300);
 }
-.ncua-input input::placeholder {
+.ncua-input input::placeholder,
+.ncua-input textarea::placeholder {
   transform: translateY(1px);
   color: var(--gray-300);
 }
-.ncua-input input:focus {
+.ncua-input input:focus,
+.ncua-input textarea:focus {
   outline: none;
 }
 .ncua-input--xs {
@@ -870,7 +878,8 @@ button {
   background: inherit;
   opacity: 0.5;
 }
-.ncua-input.is-disabled input {
+.ncua-input.is-disabled input,
+.ncua-input.is-disabled textarea {
   color: var(--gray-300);
   background-color: inherit;
 }
@@ -928,6 +937,43 @@ button {
   border-bottom-right-radius: 0;
 }
 
+.ncua-input--textarea {
+  font-size: var(--font-size-xxs);
+  gap: 4px;
+}
+.ncua-input--textarea .ncua-input__content {
+  flex-direction: column;
+  align-items: flex-start;
+  height: 126px;
+}
+.ncua-input--textarea .ncua-input__field {
+  padding: 12px;
+  height: 100%;
+  border-radius: 8px;
+}
+.ncua-input--textarea textarea {
+  height: 100%;
+  resize: none;
+  word-wrap: break-word;
+}
+.ncua-input--textarea textarea:disabled {
+  white-space: pre-wrap;
+}
+
+.ncua-input__text-count-wrap {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.ncua-input__text-count {
+  color: var(--gray-400);
+}
+.ncua-input.destructive .ncua-input__text-count {
+  color: var(--primary-red-600);
+}
+
 .ncua-label {
   display: flex;
   gap: 4px;
@@ -1326,14 +1372,10 @@ button {
   cursor: pointer;
 }
 .ncua-pagination__page-num:hover, .ncua-pagination__page-num:focus, .ncua-pagination__page-num.is-current {
+  color: var(--gray-600);
   background-color: var(--gray-50);
-}
-.ncua-pagination__page-num:hover, .ncua-pagination__page-num.is-current {
   font-weight: 700;
-}
-.ncua-pagination__page-num:focus {
   outline: none;
-  box-shadow: var(--focus-ring-4px-gray-100);
 }
 .ncua-pagination__next {
   margin-inline: 8px 4px;
@@ -1456,6 +1498,122 @@ button {
   z-index: 200;
 }
 
+:root {
+  --toggle-sm-width: 28px;
+  --toggle-sm-height: 16px;
+  --toggle-sm-slider-size: 12px;
+  --toggle-sm-slider-top: 2px;
+  --toggle-sm-slider-left: 2px;
+  --toggle-sm-translate: 12px;
+  --toggle-sm-font-size: var(--font-size-xs);
+  --toggle-sm-line-height: var(--line-heights-xs);
+  --toggle-sm-text-margin: 8px;
+  --toggle-md-width: 44px;
+  --toggle-md-height: 24px;
+  --toggle-md-slider-size: 20px;
+  --toggle-md-slider-top: 2px;
+  --toggle-md-slider-left: 2px;
+  --toggle-md-translate: 20px;
+  --toggle-md-font-size: var(--font-size-md);
+  --toggle-md-line-height: var(--line-heights-md);
+  --toggle-md-text-margin: 12px;
+  --toggle-focus-shadow: 0px 0px 0px 3px rgba(242, 244, 247, 0.8);
+  --toggle-checked-focus-shadow: 0 0 0 2px rgba(46, 168, 79, 0.2);
+}
+
+.ncua-toggle {
+  position: relative;
+  display: inline-flex;
+  cursor: pointer;
+  user-select: none;
+}
+.ncua-toggle__input {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+.ncua-toggle__switch {
+  position: relative;
+  display: inline-block;
+  background-color: var(--gray-200);
+  border-radius: 12px;
+  transition: background-color 0.3s, box-shadow 0.3s;
+}
+.ncua-toggle__slider {
+  position: absolute;
+  background-color: var(--base-white);
+  border-radius: 50%;
+  transition: transform 0.3s;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+.ncua-toggle--sm .ncua-toggle__text-wrapper {
+  margin-top: -1px;
+}
+.ncua-toggle__text {
+  display: block;
+  color: var(--gray-600);
+  font-weight: var(--font-weights-commerce-sans-1);
+}
+.ncua-toggle__support-text {
+  margin-top: 2px;
+  color: var(--gray-400);
+}
+.ncua-toggle--sm .ncua-toggle__switch {
+  width: var(--toggle-sm-width);
+  height: var(--toggle-sm-height);
+}
+.ncua-toggle--sm .ncua-toggle__slider {
+  width: var(--toggle-sm-slider-size);
+  height: var(--toggle-sm-slider-size);
+  top: var(--toggle-sm-slider-top);
+  left: var(--toggle-sm-slider-left);
+}
+.ncua-toggle--sm .ncua-toggle__text-wrapper {
+  margin-left: var(--toggle-sm-text-margin);
+  font-size: var(--toggle-sm-font-size);
+  line-height: var(--toggle-sm-line-height);
+}
+.ncua-toggle--sm.ncua-toggle--checked .ncua-toggle__slider {
+  transform: translateX(var(--toggle-sm-translate));
+}
+.ncua-toggle--md .ncua-toggle__switch {
+  width: var(--toggle-md-width);
+  height: var(--toggle-md-height);
+}
+.ncua-toggle--md .ncua-toggle__slider {
+  width: var(--toggle-md-slider-size);
+  height: var(--toggle-md-slider-size);
+  top: var(--toggle-md-slider-top);
+  left: var(--toggle-md-slider-left);
+}
+.ncua-toggle--md .ncua-toggle__text-wrapper {
+  margin-left: var(--toggle-md-text-margin);
+  font-size: var(--toggle-md-font-size);
+  line-height: var(--toggle-md-line-height);
+}
+.ncua-toggle--md.ncua-toggle--checked .ncua-toggle__slider {
+  transform: translateX(var(--toggle-md-translate));
+}
+.ncua-toggle--disabled {
+  cursor: not-allowed;
+}
+.ncua-toggle:not(.ncua-toggle--disabled):hover .ncua-toggle__switch {
+  background-color: var(--gray-300);
+}
+.ncua-toggle--checked .ncua-toggle__switch {
+  background-color: var(--green-500);
+}
+.ncua-toggle--checked:not(.ncua-toggle--disabled):hover .ncua-toggle__switch {
+  background-color: var(--green-600);
+}
+.ncua-toggle--checked__input:focus + .ncua-toggle__switch {
+  box-shadow: var(--toggle-checked-focus-shadow);
+}
+.ncua-toggle__input:focus + .ncua-toggle__switch {
+  box-shadow: var(--toggle-focus-shadow);
+}
+
 .ncua-date-picker {
   position: relative;
 }
@@ -1625,4 +1783,149 @@ button {
 }
 .ncua-date-picker--disabled .ncua-date-picker__input {
   color: var(--gray-300);
+}
+
+.ncua-carousel-number-group {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+}
+.ncua-carousel-number-group--light .ncua-carousel-number-group__number {
+  color: var(--gray-600);
+}
+.ncua-carousel-number-group--light .ncua-carousel-number-group__total {
+  color: var(--gray-300);
+}
+.ncua-carousel-number-group--dark .ncua-carousel-number-group__number {
+  color: var(--base-white);
+}
+.ncua-carousel-number-group--dark .ncua-carousel-number-group__total {
+  color: var(--gray-300);
+}
+.ncua-carousel-number-group--sm {
+  font-size: 11px;
+  line-height: 14px;
+  font-weight: 500;
+}
+.ncua-carousel-number-group.framed {
+  border-radius: 13px;
+}
+.ncua-carousel-number-group.framed.ncua-carousel-number-group--light {
+  background-color: var(--base-white);
+}
+.ncua-carousel-number-group.framed.ncua-carousel-number-group--dark {
+  background-color: rgba(12, 17, 29, 0.6);
+}
+.ncua-carousel-number-group.framed.ncua-carousel-number-group--sm {
+  padding: 2px 8px;
+}
+
+.ncua-carousel-arrow {
+  display: inline-block;
+  border-radius: 999px;
+  background-color: #ffffff;
+  cursor: pointer;
+}
+.ncua-carousel-arrow__icon {
+  display: block;
+}
+.ncua-carousel-arrow--line {
+  outline: 1px solid var(--gray-200);
+}
+.ncua-carousel-arrow--md {
+  padding: 8px;
+}
+.ncua-carousel-arrow--md .ncua-carousel-arrow__icon {
+  width: 16px;
+  height: 16px;
+}
+
+.ncua-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  overflow: hidden;
+  border-radius: 16px;
+  font-weight: 500;
+}
+.ncua-badge--xs {
+  font-size: var(--font-size-xxs);
+  padding: 2px 8px;
+  height: 18px;
+  line-height: var(--line-heights-xxs);
+}
+.ncua-badge--sm {
+  font-size: var(--font-size-xs);
+  padding: 2px 10px;
+  height: 22px;
+  line-height: var(--line-heights-xs);
+}
+.ncua-badge--md {
+  font-size: var(--font-size-sm);
+  padding: 2px 10px;
+  height: 26px;
+  line-height: var(--line-heights-sm);
+}
+.ncua-badge--pill-outline.ncua-badge--neutral {
+  color: var(--gray-600);
+  border: 1px solid var(--gray-400);
+  background-color: var(--base-white);
+}
+.ncua-badge--pill-outline.ncua-badge--error {
+  color: var(--primary-red-600);
+  border: 1px solid var(--primary-red-400);
+  background-color: var(--base-white);
+}
+.ncua-badge--pill-outline.ncua-badge--warning {
+  color: var(--orange-600);
+  border: 1px solid var(--orange-400);
+  background-color: var(--base-white);
+}
+.ncua-badge--pill-outline.ncua-badge--success {
+  color: var(--green-600);
+  border: 1px solid var(--green-400);
+  background-color: var(--base-white);
+}
+.ncua-badge--pill-outline.ncua-badge--blue {
+  color: var(--blue-600);
+  border: 1px solid var(--blue-400);
+  background-color: var(--base-white);
+}
+.ncua-badge--pill-outline.ncua-badge--pink {
+  color: var(--pink-600);
+  border: 1px solid var(--pink-400);
+  background-color: var(--base-white);
+}
+.ncua-badge--pill-outline.ncua-badge--disabled {
+  color: var(--gray-300);
+  border: 1px solid var(--gray-200);
+  background-color: var(--gray-100);
+}
+.ncua-badge--pill-dark-color.ncua-badge--neutral {
+  color: var(--base-white);
+  background-color: var(--base-black);
+}
+.ncua-badge--pill-dark-color.ncua-badge--error {
+  color: var(--base-white);
+  background-color: var(--primary-red-500);
+}
+.ncua-badge--pill-dark-color.ncua-badge--warning {
+  color: var(--base-white);
+  background-color: var(--orange-500);
+}
+.ncua-badge--pill-dark-color.ncua-badge--success {
+  color: var(--base-white);
+  background-color: var(--green-500);
+}
+.ncua-badge--pill-dark-color.ncua-badge--blue {
+  color: var(--base-white);
+  background-color: var(--blue-500);
+}
+.ncua-badge--pill-dark-color.ncua-badge--pink {
+  color: var(--base-white);
+  background-color: var(--pink-500);
+}
+.ncua-badge--pill-dark-color.ncua-badge--disabled {
+  color: var(--gray-300);
+  background-color: var(--gray-100);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ncds/ui-admin",
-  "version": "0.0.11",
+  "version": "0.0.13",
   "description": "nhn-commerce의 어드민 디자인 시스템입니다.",
   "scripts": {
     "barrel": "node barrel.js",
@@ -52,13 +52,13 @@
     "design-system"
   ],
   "license": "MIT",
-  "main": "dist/ui-admin/index.js",
-  "module": "./dist/index.esm.js",
+  "main": "dist/cjs/ui-admin/index.js",
+  "module": "dist/esm/ui-admin/index.js",
+  "types": "dist/types/ui-admin/index.d.ts",
   "msw": {
     "workerDirectory": "public"
   },
   "private": false,
-  "types": "dist/ui-admin/index.d.ts",
   "dependencies": {
     "@ncds/types-common": "^1.0.0",
     "@ncds/types-layout": "^1.0.0",

package/dist/const/Icon/FinanceECommerce.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"FinanceECommerce.d.ts","sourceRoot":"","sources":["../../../../const/Icon/FinanceECommerce.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,gBAAgB,UAe5B,CAAC"}

package/dist/const/Icon/alertAndFeedback.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"alertAndFeedback.d.ts","sourceRoot":"","sources":["../../../../const/Icon/alertAndFeedback.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,gBAAgB,UAAqD,CAAC"}

package/dist/const/Icon/arrow.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"arrow.d.ts","sourceRoot":"","sources":["../../../../const/Icon/arrow.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,MAAM,8KAUT,CAAC"}

package/dist/const/Icon/chart.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"chart.d.ts","sourceRoot":"","sources":["../../../../const/Icon/chart.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,MAAM,UAAkE,CAAC"}

package/dist/const/Icon/chevron.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"chevron.d.ts","sourceRoot":"","sources":["../../../../const/Icon/chevron.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,QAAQ,UAA8D,CAAC"}

package/dist/const/Icon/circle.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"circle.d.ts","sourceRoot":"","sources":["../../../../const/Icon/circle.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO,UAA+C,CAAC"}

package/dist/const/Icon/communication.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"communication.d.ts","sourceRoot":"","sources":["../../../../const/Icon/communication.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,aAAa,UAAwF,CAAC"}

package/dist/const/Icon/development.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"development.d.ts","sourceRoot":"","sources":["../../../../const/Icon/development.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,WAAW,UAWvB,CAAC"}

package/dist/const/Icon/editor.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"editor.d.ts","sourceRoot":"","sources":["../../../../const/Icon/editor.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,MAAM,UAAyE,CAAC"}

package/dist/const/Icon/education.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"education.d.ts","sourceRoot":"","sources":["../../../../const/Icon/education.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,SAAS,UAAuE,CAAC"}

package/dist/const/Icon/files.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"files.d.ts","sourceRoot":"","sources":["../../../../const/Icon/files.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,KAAK,UAA4F,CAAC"}

package/dist/const/Icon/general.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"general.d.ts","sourceRoot":"","sources":["../../../../const/Icon/general.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO,miBAmEV,CAAC"}

package/dist/const/Icon/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../const/Icon/index.ts"],"names":[],"mappings":"AAwBA,eAAO,MAAM,KAAK,UAwBjB,CAAC"}

package/dist/const/Icon/layout.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["../../../../const/Icon/layout.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,MAAM,UAYlB,CAAC"}

package/dist/const/Icon/mapsTravel.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"mapsTravel.d.ts","sourceRoot":"","sources":["../../../../const/Icon/mapsTravel.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,UAAU,UAAqF,CAAC"}

package/dist/const/Icon/mediaDevices.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"mediaDevices.d.ts","sourceRoot":"","sources":["../../../../const/Icon/mediaDevices.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,YAAY,UAUxB,CAAC"}

package/dist/const/Icon/message.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"message.d.ts","sourceRoot":"","sources":["../../../../const/Icon/message.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,QAAQ,UAAiE,CAAC"}

package/dist/const/Icon/sales.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"sales.d.ts","sourceRoot":"","sources":["../../../../const/Icon/sales.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,KAAK,UAAa,CAAC"}

package/dist/const/Icon/security.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"security.d.ts","sourceRoot":"","sources":["../../../../const/Icon/security.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,QAAQ,UAAyF,CAAC"}

package/dist/const/Icon/shapes.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"shapes.d.ts","sourceRoot":"","sources":["../../../../const/Icon/shapes.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,MAAM,UAGlB,CAAC"}

package/dist/const/Icon/tag.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"tag.d.ts","sourceRoot":"","sources":["../../../../const/Icon/tag.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,IAAI,UAAY,CAAC"}

package/dist/const/Icon/time.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"time.d.ts","sourceRoot":"","sources":["../../../../const/Icon/time.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,IAAI,UAAmF,CAAC"}

package/dist/const/Icon/users.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"users.d.ts","sourceRoot":"","sources":["../../../../const/Icon/users.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,KAAK,UAUjB,CAAC"}

package/dist/const/Icon/weather.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"weather.d.ts","sourceRoot":"","sources":["../../../../const/Icon/weather.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO,UAAa,CAAC"}