@x-plat/design-system 0.4.5 → 0.5.0

package/dist/components/Select/index.css

@@ -8,27 +8,27 @@
   z-index: 1;
 }
 .lib-xplat-select.sm .select-trigger {
-  min-height: 32px;
-  padding: 4px 10px;
-  font-size: 0.75rem;
+  min-height: var(--spacing-control-height-sm);
+  padding: var(--spacing-space-1) var(--spacing-space-2);
+  font-size: 12px;
 }
 .lib-xplat-select.md .select-trigger {
-  min-height: 40px;
-  padding: 8px 12px;
-  font-size: 0.875rem;
+  min-height: var(--spacing-control-height-md);
+  padding: var(--spacing-space-2) var(--spacing-space-3);
+  font-size: 14px;
 }
 .lib-xplat-select.lg .select-trigger {
-  min-height: 48px;
-  padding: 10px 14px;
-  font-size: 1rem;
+  min-height: var(--spacing-control-height-lg);
+  padding: var(--spacing-space-2) var(--spacing-space-4);
+  font-size: 16px;
 }
 .lib-xplat-select.sm .select-content .select-item {
-  padding: 6px 10px;
-  font-size: 0.75rem;
+  padding: var(--spacing-space-2) var(--spacing-space-2);
+  font-size: 12px;
 }
 .lib-xplat-select.lg .select-content .select-item {
-  padding: 10px 14px;
-  font-size: 1rem;
+  padding: var(--spacing-space-2) var(--spacing-space-4);
+  font-size: 16px;
 }
 .lib-xplat-select .select-trigger {
   cursor: pointer;
@@ -37,34 +37,41 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 8px;
-  border: 1px solid var(--xplat-neutral-300);
-  border-radius: 8px;
-  background-color: #fff;
-  color: var(--xplat-neutral-900);
+  gap: var(--spacing-space-2);
+  border: 1px solid var(--semantic-border-default);
+  border-radius: var(--spacing-radius-md);
+  background-color: var(--semantic-surface-neutral-default);
+  color: var(--semantic-text-strong);
+  transition: border-color 0.15s;
+}
+.lib-xplat-select .select-trigger:hover:not(.disabled) {
+  border-color: var(--semantic-border-strong);
+}
+.lib-xplat-select .select-trigger:active:not(.disabled) {
+  border-color: var(--semantic-interaction-focus-ring);
 }
 .lib-xplat-select .select-trigger:focus-visible {
-  outline: 2px solid var(--xplat-blue-500);
+  outline: 2px solid var(--semantic-interaction-focus-ring);
   outline-offset: 2px;
 }
 .lib-xplat-select .select-trigger.disabled {
   cursor: not-allowed;
   pointer-events: none;
-  background-color: var(--xplat-neutral-100);
-  border-color: var(--xplat-neutral-300);
-  color: var(--xplat-neutral-400);
+  background-color: var(--semantic-surface-neutral-disabled);
+  border-color: var(--semantic-border-default);
+  color: var(--semantic-text-disabled);
 }
 .lib-xplat-select .select-trigger.disabled .select-trigger-value.placeholder {
-  color: var(--xplat-neutral-400);
+  color: var(--semantic-text-disabled);
 }
 .lib-xplat-select .select-trigger.disabled .select-trigger-icon {
-  color: var(--xplat-neutral-400);
+  color: var(--semantic-icon-disabled);
 }
 .lib-xplat-select .select-trigger.error:not(.disabled) {
-  border-color: var(--xplat-red-500);
+  border-color: var(--semantic-border-error);
 }
 .lib-xplat-select .select-trigger.error:not(.disabled):focus-visible {
-  outline-color: var(--xplat-red-500);
+  outline-color: var(--semantic-border-error);
 }
 .lib-xplat-select .select-trigger .select-trigger-value {
   flex: 1;
@@ -75,31 +82,30 @@
   white-space: nowrap;
 }
 .lib-xplat-select .select-trigger .select-trigger-value.placeholder {
-  color: var(--xplat-neutral-400);
+  color: var(--semantic-text-disabled);
 }
 .lib-xplat-select .select-trigger .select-trigger-icon {
   flex-shrink: 0;
   display: flex;
   align-items: center;
   justify-content: center;
-  color: var(--xplat-neutral-500);
+  color: var(--semantic-icon-subtle);
   transition: transform 0.2s ease;
 }
 .lib-xplat-select .select-trigger .select-trigger-icon.open {
   transform: rotate(180deg);
 }
 .lib-xplat-select .select-trigger .select-trigger-icon svg {
-  width: 20px;
-  height: 20px;
+  font-size: 20px;
 }
 .lib-xplat-select .select-content {
   position: absolute;
   left: 0;
   right: 0;
   width: 100%;
-  padding: 4px 0;
-  border-radius: 8px;
-  background-color: #fff;
+  padding: var(--spacing-space-1) 0;
+  border-radius: var(--spacing-radius-md);
+  background-color: var(--semantic-surface-neutral-default);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
   cursor: default;
   max-height: 220px;
@@ -109,7 +115,7 @@
 }
 .lib-xplat-select .select-content.bottom {
   top: 100%;
-  margin-top: 4px;
+  margin-top: var(--spacing-space-1);
   margin-bottom: 0;
   transform: translateY(-8px);
 }
@@ -125,7 +131,7 @@
 }
 .lib-xplat-select .select-content.top {
   bottom: 100%;
-  margin-bottom: 4px;
+  margin-bottom: var(--spacing-space-1);
   margin-top: 0;
   transform: translateY(8px);
 }
@@ -138,19 +144,19 @@
   transform: translateY(8px);
 }
 .lib-xplat-select .select-item {
-  padding: 8px 12px;
-  font-size: 0.875rem;
+  padding: var(--spacing-space-2) var(--spacing-space-3);
+  font-size: 14px;
   cursor: pointer;
   transition: background-color 0.15s ease;
   outline: none;
 }
 .lib-xplat-select .select-item:hover:not(.disabled) {
-  background-color: var(--xplat-neutral-100);
+  background-color: var(--semantic-surface-neutral-subtle);
 }
 .lib-xplat-select .select-item:focus-visible:not(.disabled) {
-  background-color: var(--xplat-neutral-100);
+  background-color: var(--semantic-surface-neutral-subtle);
 }
 .lib-xplat-select .select-item.disabled {
   cursor: not-allowed;
-  color: var(--xplat-neutral-400);
+  color: var(--semantic-text-disabled);
 }

package/dist/components/Select/index.d.cts

@@ -8,7 +8,6 @@ interface SelectItemProps {
     /** 클릭 시 추가로 실행할 핸들러 (선택 처리 후 호출) */
     onClick?: () => void;
     disabled?: boolean;
-    className?: string;
 }
 declare const SelectItem: {
     (props: SelectItemProps): react_jsx_runtime.JSX.Element;

package/dist/components/Select/index.d.ts

@@ -8,7 +8,6 @@ interface SelectItemProps {
     /** 클릭 시 추가로 실행할 핸들러 (선택 처리 후 호출) */
     onClick?: () => void;
     disabled?: boolean;
-    className?: string;
 }
 declare const SelectItem: {
     (props: SelectItemProps): react_jsx_runtime.JSX.Element;