@x-plat/design-system 0.1.1

package/dist/components/Select/index.css

@@ -0,0 +1,136 @@
+@charset "UTF-8";
+
+/* src/components/Select/select.scss */
+.lib-xplat-select {
+  position: relative;
+}
+.lib-xplat-select.is-open {
+  z-index: 1;
+}
+.lib-xplat-select .select-trigger {
+  cursor: pointer;
+  user-select: none;
+  outline: none;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  min-height: 40px;
+  padding: 8px 12px;
+  border: 1px solid #D4D4D4;
+  border-radius: 8px;
+  background-color: #fff;
+  font-size: 0.875rem;
+  color: #171717;
+}
+.lib-xplat-select .select-trigger:focus-visible {
+  outline: 2px solid #4D6DE3;
+  outline-offset: 2px;
+}
+.lib-xplat-select .select-trigger.disabled {
+  cursor: not-allowed;
+  pointer-events: none;
+  background-color: #F5F5F5;
+  border-color: #D4D4D4;
+  color: #A1A1A1;
+}
+.lib-xplat-select .select-trigger.disabled .select-trigger-value.placeholder {
+  color: #A1A1A1;
+}
+.lib-xplat-select .select-trigger.disabled .select-trigger-icon {
+  color: #A1A1A1;
+}
+.lib-xplat-select .select-trigger.error:not(.disabled) {
+  border-color: #FF272B;
+}
+.lib-xplat-select .select-trigger.error:not(.disabled):focus-visible {
+  outline-color: #FF272B;
+}
+.lib-xplat-select .select-trigger .select-trigger-value {
+  flex: 1;
+  min-width: 0;
+  text-align: left;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.lib-xplat-select .select-trigger .select-trigger-value.placeholder {
+  color: #A1A1A1;
+}
+.lib-xplat-select .select-trigger .select-trigger-icon {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #737373;
+  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;
+}
+.lib-xplat-select .select-content {
+  position: absolute;
+  left: 0;
+  right: 0;
+  width: 100%;
+  padding: 4px 0;
+  border-radius: 8px;
+  background-color: #fff;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  cursor: default;
+  max-height: 220px;
+  overflow-y: auto;
+  opacity: 0;
+  transition: transform 0.2s ease, opacity 0.2s ease;
+}
+.lib-xplat-select .select-content.bottom {
+  top: 100%;
+  margin-top: 4px;
+  margin-bottom: 0;
+  transform: translateY(-8px);
+}
+.lib-xplat-select .select-content.bottom.visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+.lib-xplat-select .select-content.bottom.exit {
+  opacity: 0;
+  transform: translateY(-8px);
+}
+.lib-xplat-select .select-content {
+}
+.lib-xplat-select .select-content.top {
+  bottom: 100%;
+  margin-bottom: 4px;
+  margin-top: 0;
+  transform: translateY(8px);
+}
+.lib-xplat-select .select-content.top.visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+.lib-xplat-select .select-content.top.exit {
+  opacity: 0;
+  transform: translateY(8px);
+}
+.lib-xplat-select .select-item {
+  padding: 8px 12px;
+  font-size: 0.875rem;
+  cursor: pointer;
+  transition: background-color 0.15s ease;
+  outline: none;
+}
+.lib-xplat-select .select-item:hover:not(.disabled) {
+  background-color: #F5F5F5;
+}
+.lib-xplat-select .select-item:focus-visible:not(.disabled) {
+  background-color: #F5F5F5;
+}
+.lib-xplat-select .select-item.disabled {
+  cursor: not-allowed;
+  color: #A1A1A1;
+}

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

@@ -0,0 +1,44 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React from 'react';
+
+interface SelectItemProps {
+    children: React.ReactNode;
+    /** Select onChange 로 전달되는 값 (폼 등에서 사용) */
+    value?: string | number;
+    /** 클릭 시 추가로 실행할 핸들러 (선택 처리 후 호출) */
+    onClick?: () => void;
+    disabled?: boolean;
+    className?: string;
+}
+declare const SelectItem: {
+    (props: SelectItemProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+/** Select.Item 으로만 만든 엘리먼트 (다른 컴포넌트/노드 넣으면 타입 오류) */
+type SelectItemElement = React.ReactElement<SelectItemProps, typeof SelectItem>;
+/** 값 변경 시 호출 (value: 아이템 value, label: 표시 텍스트) */
+type SelectChangeHandler = (value: string | number | undefined, label: React.ReactNode) => void;
+interface SelectProps {
+    /** 선택 전 표시할 문구 */
+    placeholder?: string;
+    /** 값이 바뀔 때 호출 */
+    onChange?: SelectChangeHandler;
+    /** Select.Item 만 허용 */
+    children: SelectItemElement | SelectItemElement[];
+    /** 비활성화 상태 */
+    disabled?: boolean;
+    /** 에러 상태 */
+    error?: boolean;
+}
+declare const Select: {
+    (props: SelectProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+} & {
+    Item: {
+        (props: SelectItemProps): react_jsx_runtime.JSX.Element;
+        displayName: string;
+    };
+};
+
+export { Select, type SelectChangeHandler, SelectItem, type SelectItemProps };

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

@@ -0,0 +1,44 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React from 'react';
+
+interface SelectItemProps {
+    children: React.ReactNode;
+    /** Select onChange 로 전달되는 값 (폼 등에서 사용) */
+    value?: string | number;
+    /** 클릭 시 추가로 실행할 핸들러 (선택 처리 후 호출) */
+    onClick?: () => void;
+    disabled?: boolean;
+    className?: string;
+}
+declare const SelectItem: {
+    (props: SelectItemProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+/** Select.Item 으로만 만든 엘리먼트 (다른 컴포넌트/노드 넣으면 타입 오류) */
+type SelectItemElement = React.ReactElement<SelectItemProps, typeof SelectItem>;
+/** 값 변경 시 호출 (value: 아이템 value, label: 표시 텍스트) */
+type SelectChangeHandler = (value: string | number | undefined, label: React.ReactNode) => void;
+interface SelectProps {
+    /** 선택 전 표시할 문구 */
+    placeholder?: string;
+    /** 값이 바뀔 때 호출 */
+    onChange?: SelectChangeHandler;
+    /** Select.Item 만 허용 */
+    children: SelectItemElement | SelectItemElement[];
+    /** 비활성화 상태 */
+    disabled?: boolean;
+    /** 에러 상태 */
+    error?: boolean;
+}
+declare const Select: {
+    (props: SelectProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+} & {
+    Item: {
+        (props: SelectItemProps): react_jsx_runtime.JSX.Element;
+        displayName: string;
+    };
+};
+
+export { Select, type SelectChangeHandler, SelectItem, type SelectItemProps };