@uniai-fe/uds-primitives 0.3.9 → 0.3.10

package/dist/styles.css

@@ -294,6 +294,7 @@
   --form-field-helper-font-weight: 400;
   --form-field-helper-line-height: var(--font-caption-medium-line-height);
   --form-field-helper-color: var(--color-label-neutral);
+  --form-field-helper-error-color: var(--color-feedback-error);
   --info-box-background-color: var(--color-blue-99);
   --info-box-border-color: var(--color-secondary-standard);
   --info-box-icon-color: var(--color-feedback-information);
@@ -458,6 +459,7 @@
   --select-table-radius: var(--input-table-radius-base);
   --select-table-border-default-color: var(--input-border-table-default-color);
   --select-table-border-focus-color: var(--input-border-active-color);
+  --select-table-border-error-color: var(--input-border-error-color);
   --select-table-border-disabled-color: var(--input-border-disabled-color);
   --select-table-border-readonly-color: var(
   --select-table-border-disabled-color
@@ -468,6 +470,7 @@
   --select-table-surface-disabled-color
   );
   --select-table-color-text: var(--input-text-color);
+  --select-table-color-text-error: var(--input-label-error-color);
   --select-table-color-text-readonly: var(--select-primary-color-text-readonly);
   --select-table-color-placeholder: var(--input-placeholder-color);
   --select-table-icon-color-default: var(--select-icon-color-default);
@@ -507,19 +510,23 @@
   --select-primary-color-surface: var(--input-surface-color);
   --select-primary-color-text: var(--color-label-alternative);
   --select-primary-color-text-focused: var(--color-label-strong);
+  --select-primary-color-text-error: var(--input-label-error-color);
   --select-primary-color-text-disabled: var(--color-label-disabled);
   --select-primary-color-text-readonly: var(--color-label-strong);
   --select-primary-color-border: var(--input-border-color);
   --select-primary-color-border-focused: var(--input-border-active-color);
+  --select-primary-color-border-error: var(--input-border-error-color);
   --select-primary-color-border-disabled: var(--input-border-disabled-color);
   --select-color-border-secondary: var(--input-border-color);
   --select-color-border-secondary-hover: var(--input-border-active-color);
   --select-color-border-secondary-focused: var(--input-border-active-color);
+  --select-color-border-secondary-error: var(--input-border-error-color);
   --select-color-border-secondary-disabled: var(
   --input-border-underline-disabled-color
   );
   --select-primary-color-surface-disabled: var(--input-surface-disabled-color);
   --select-secondary-color-text: var(--color-label-standard);
+  --select-secondary-color-text-error: var(--input-label-error-color);
   --select-secondary-color-text-disabled: var(--color-label-disabled);
   --select-secondary-color-text-readonly: var(
   --select-primary-color-text-readonly
@@ -2305,6 +2312,11 @@ figure.chip {
   color: var(--form-field-helper-color);
 }
 
+.form-field-container[data-state=error] .form-field-footer p,
+.form-field-container[data-state=error] .form-field-footer span {
+  color: var(--form-field-helper-error-color);
+}
+
 
 
 .info-box {
@@ -3684,6 +3696,21 @@ figure.chip {
   border-width: var(--select-primary-border-width-focus);
   --select-icon-fill: var(--select-table-icon-color-focused);
 }
+.select-button:not([data-priority=secondary])[data-state=error] {
+  border-color: var(--select-primary-color-border-error);
+  --select-icon-fill: var(--select-icon-color-default);
+}
+.select-button[data-priority=secondary][data-state=error] {
+  color: var(--select-secondary-color-text-error);
+}
+.select-button[data-priority=secondary][data-state=error]::after {
+  height: var(--select-secondary-underline-width-focus);
+  background-color: var(--select-color-border-secondary-error);
+}
+.select-button[data-priority=table][data-state=error] {
+  border-color: var(--select-table-border-error-color);
+  --select-icon-fill: var(--select-table-icon-color-default);
+}
 .select-button:not([data-priority=secondary])[data-readonly=true] {
   border-color: var(--select-primary-color-border-disabled);
   background-color: var(--select-primary-color-surface-disabled);
@@ -3759,6 +3786,9 @@ figure.chip {
 .select-button[data-state=focused] .select-label, .select-button[data-open=true] .select-label {
   color: var(--select-primary-color-text-focused);
 }
+.select-button[data-state=error] .select-label {
+  color: var(--select-primary-color-text-error);
+}
 .select-button[data-state=disabled] .select-label {
   color: var(--select-primary-color-text-disabled);
 }
@@ -3768,9 +3798,15 @@ figure.chip {
 .select-button[data-priority=secondary][data-state=disabled] .select-label {
   color: var(--select-secondary-color-text-disabled);
 }
+.select-button[data-priority=secondary][data-state=error] .select-label {
+  color: var(--select-secondary-color-text-error);
+}
 .select-button[data-priority=secondary][data-readonly=true] .select-label {
   color: var(--select-secondary-color-text-readonly);
 }
+.select-button[data-priority=table][data-state=error] .select-label {
+  color: var(--select-table-color-text-error);
+}
 
 .select-label-placeholder {
   color: var(--select-primary-color-placeholder);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniai-fe/uds-primitives",
-  "version": "0.3.9",
+  "version": "0.3.10",
   "description": "UNIAI Design System; Primitives Components Package",
   "type": "module",
   "private": false,

package/src/components/form/markup/form-field/Container.tsx

@@ -25,6 +25,7 @@ const FormFieldContainer = forwardRef<HTMLElement, FormFieldContainerProps>(
       className,
       children,
       width,
+      state = "default",
       style,
       ...containerProps
     },
@@ -43,6 +44,7 @@ const FormFieldContainer = forwardRef<HTMLElement, FormFieldContainerProps>(
       <ComponentTag
         ref={ref}
         data-width={getFormFieldWidthAttr(width)}
+        data-state={state}
         className={clsx("form-field form-field-container", className)}
         style={mergedStyle}
         {...containerProps}

package/src/components/form/markup/form-field/Template.tsx

@@ -18,6 +18,7 @@ import FormFieldContainer from "./Container";
  * @property {FormFieldHeaderProps} [headerProps] 헤더 속성
  * @property {FormFieldFooterProps} [footerProps] 푸터 속성
  * @property {FormFieldWidth} [width] form field 너비 옵션
+ * @property {FormFieldState} [state] visual state
  * @property {React.HTMLAttributes<HTMLElement>} [containerProps] container 속성
  * @property {React.ReactNode} children
  */

package/src/components/form/styles/form-field/layout.scss

@@ -65,3 +65,12 @@
     color: var(--form-field-helper-color);
   }
 }
+
+.form-field-container[data-state="error"] {
+  .form-field-footer {
+    p,
+    span {
+      color: var(--form-field-helper-error-color);
+    }
+  }
+}

package/src/components/form/styles/form-field/variables.scss

@@ -14,4 +14,5 @@
   --form-field-helper-font-weight: 400;
   --form-field-helper-line-height: var(--font-caption-medium-line-height);
   --form-field-helper-color: var(--color-label-neutral);
+  --form-field-helper-error-color: var(--color-feedback-error);
 }

package/src/components/form/types/props.ts

@@ -11,6 +11,11 @@ import type { ElementType } from "react";
  */
 export type FormFieldWidth = "full" | "fit" | "fill" | "auto" | number | string;
 
+/**
+ * Form; field state option
+ */
+export type FormFieldState = "default" | "error";
+
 /**
  * Form.Field Header props; `Header.tsx`에서 label/description/meta를 제어한다.
  * @property {string} [className] 헤더 wrapper className
@@ -78,6 +83,7 @@ export interface FormFieldFooterProps extends React.HTMLAttributes<HTMLElement>
  * @property {string} [className] container className
  * @property {React.ElementType} [as] container 태그
  * @property {FormFieldWidth} [width] width 옵션(full/fit/fill/auto/custom)
+ * @property {FormFieldState} [state] visual state
  * @property {React.ReactNode} children Body에 전달될 콘텐츠
  */
 export interface FormFieldContainerProps extends React.HTMLAttributes<HTMLElement> {
@@ -93,6 +99,10 @@ export interface FormFieldContainerProps extends React.HTMLAttributes<HTMLElemen
    * width 옵션
    */
   width?: FormFieldWidth;
+  /**
+   * visual state
+   */
+  state?: FormFieldState;
   /**
    * 필드 children
    */
@@ -107,6 +117,7 @@ export interface FormFieldContainerProps extends React.HTMLAttributes<HTMLElemen
  * @property {string} [className] container className
  * @property {React.ElementType} [as] container 태그
  * @property {FormFieldWidth} [width] width 옵션(full/fit/fill/auto/custom)
+ * @property {FormFieldState} [state] visual state
  * @property {React.ReactNode} children Body에 전달될 콘텐츠
  */
 export interface FormFieldTemplateProps extends FormFieldContainerProps {

package/src/components/select/markup/foundation/Base.tsx

@@ -13,7 +13,7 @@ import type { SelectTriggerBaseProps } from "../../types/trigger";
  * @param {SelectTriggerBaseProps} props trigger base props
  * @param {"primary" | "secondary" | "table"} [props.priority="primary"] 스타일 우선순위
  * @param {"small" | "medium" | "large"} [props.size="medium"] 높이 스케일
- * @param {"default" | "focused" | "disabled"} [props.state="default"] 시각 상태
+ * @param {"default" | "focused" | "error" | "disabled"} [props.state="default"] 시각 상태
  * @param {boolean} [props.open=false] dropdown open 상태
  * @param {boolean} [props.block=false] block 레이아웃 여부
  * @param {boolean} [props.multiple=false] multi select 여부

package/src/components/select/styles/select.scss

@@ -133,6 +133,25 @@
     --select-icon-fill: var(--select-table-icon-color-focused);
   }
 
+  &:not([data-priority="secondary"])[data-state="error"] {
+    border-color: var(--select-primary-color-border-error);
+    --select-icon-fill: var(--select-icon-color-default);
+  }
+
+  &[data-priority="secondary"][data-state="error"] {
+    color: var(--select-secondary-color-text-error);
+
+    &::after {
+      height: var(--select-secondary-underline-width-focus);
+      background-color: var(--select-color-border-secondary-error);
+    }
+  }
+
+  &[data-priority="table"][data-state="error"] {
+    border-color: var(--select-table-border-error-color);
+    --select-icon-fill: var(--select-table-icon-color-default);
+  }
+
   &:not([data-priority="secondary"])[data-readonly="true"] {
     border-color: var(--select-primary-color-border-disabled);
     background-color: var(--select-primary-color-surface-disabled);
@@ -227,6 +246,10 @@
     color: var(--select-primary-color-text-focused);
   }
 
+  .select-button[data-state="error"] & {
+    color: var(--select-primary-color-text-error);
+  }
+
   .select-button[data-state="disabled"] & {
     color: var(--select-primary-color-text-disabled);
   }
@@ -239,9 +262,17 @@
     color: var(--select-secondary-color-text-disabled);
   }
 
+  .select-button[data-priority="secondary"][data-state="error"] & {
+    color: var(--select-secondary-color-text-error);
+  }
+
   .select-button[data-priority="secondary"][data-readonly="true"] & {
     color: var(--select-secondary-color-text-readonly);
   }
+
+  .select-button[data-priority="table"][data-state="error"] & {
+    color: var(--select-table-color-text-error);
+  }
 }
 
 .select-label-placeholder {

package/src/components/select/styles/variables.scss

@@ -29,6 +29,7 @@
   --select-table-radius: var(--input-table-radius-base);
   --select-table-border-default-color: var(--input-border-table-default-color);
   --select-table-border-focus-color: var(--input-border-active-color);
+  --select-table-border-error-color: var(--input-border-error-color);
   --select-table-border-disabled-color: var(--input-border-disabled-color);
   --select-table-border-readonly-color: var(
     --select-table-border-disabled-color
@@ -39,6 +40,7 @@
     --select-table-surface-disabled-color
   );
   --select-table-color-text: var(--input-text-color);
+  --select-table-color-text-error: var(--input-label-error-color);
   --select-table-color-text-readonly: var(--select-primary-color-text-readonly);
   --select-table-color-placeholder: var(--input-placeholder-color);
   --select-table-icon-color-default: var(--select-icon-color-default);
@@ -80,19 +82,23 @@
   --select-primary-color-surface: var(--input-surface-color);
   --select-primary-color-text: var(--color-label-alternative);
   --select-primary-color-text-focused: var(--color-label-strong);
+  --select-primary-color-text-error: var(--input-label-error-color);
   --select-primary-color-text-disabled: var(--color-label-disabled);
   --select-primary-color-text-readonly: var(--color-label-strong);
   --select-primary-color-border: var(--input-border-color);
   --select-primary-color-border-focused: var(--input-border-active-color);
+  --select-primary-color-border-error: var(--input-border-error-color);
   --select-primary-color-border-disabled: var(--input-border-disabled-color);
   --select-color-border-secondary: var(--input-border-color);
   --select-color-border-secondary-hover: var(--input-border-active-color);
   --select-color-border-secondary-focused: var(--input-border-active-color);
+  --select-color-border-secondary-error: var(--input-border-error-color);
   --select-color-border-secondary-disabled: var(
     --input-border-underline-disabled-color
   );
   --select-primary-color-surface-disabled: var(--input-surface-disabled-color);
   --select-secondary-color-text: var(--color-label-standard);
+  --select-secondary-color-text-error: var(--input-label-error-color);
   --select-secondary-color-text-disabled: var(--color-label-disabled);
   --select-secondary-color-text-readonly: var(
     --select-primary-color-text-readonly

package/src/components/select/types/base.ts

@@ -18,12 +18,13 @@ export type SelectSize = "small" | "medium" | "large";
 
 /**
  * Select visual state
- * @typedef {"default" | "focused" | "disabled"} SelectState
+ * @typedef {"default" | "focused" | "error" | "disabled"} SelectState
  * - default: 기본 상태
  * - focused: focus/open 상태
+ * - error: 에러 상태
  * - disabled: 비활성 상태
  */
-export type SelectState = "default" | "focused" | "disabled";
+export type SelectState = "default" | "focused" | "error" | "disabled";
 
 /**
  * Select trigger button type