@uniai-fe/uds-primitives 0.3.9 → 0.3.11

package/dist/styles.css

@@ -293,7 +293,8 @@
   --form-field-helper-font-size: var(--font-caption-medium-size);
   --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-color-default: var(--color-label-neutral);
+  --form-field-helper-color-error: 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);
@@ -352,7 +353,7 @@
   --input-label-font-weight: var(--font-label-small-weight);
   --input-helper-color: var(--color-label-neutral);
   --input-helper-success-color: var(--color-success);
-  --input-helper-error-color: var(--color-error);
+  --input-helper-error-color: var(--color-feedback-error);
   --input-helper-disabled-color: var(--color-label-disabled);
   --input-helper-font-size: var(--font-label-small-size);
   --input-helper-line-height: var(--font-label-small-line-height);
@@ -376,7 +377,7 @@
   --input-border-table-default-color: transparent;
   --input-border-table-disabled-color: var(--input-border-table-default-color);
   --input-border-table-readonly-color: var(--input-border-table-disabled-color);
-  /* error는 Figma 44% alpha */
+  /* error border는 기존 RGBA 스펙을 유지한다. */
   --input-border-error-color: rgba(218, 29, 11, 0.44);
   --input-border-disabled-color: var(--color-border-standard-cool-gray);
   --input-border-underline-disabled-color: var(--color-border-assistive);
@@ -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
@@ -511,10 +513,12 @@
   --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
   );
@@ -2299,10 +2303,19 @@ figure.chip {
   margin-top: var(--form-field-gap-y);
   font-size: var(--form-field-helper-font-size);
   line-height: var(--form-field-helper-line-height);
+  color: var(--form-field-helper-color-default);
 }
 .form-field-footer p,
 .form-field-footer span {
-  color: var(--form-field-helper-color);
+  color: inherit;
+}
+
+.form-field-container[data-state=error] .form-field-footer {
+  color: var(--form-field-helper-color-error);
+}
+.form-field-container[data-state=error] .form-field-footer p,
+.form-field-container[data-state=error] .form-field-footer span {
+  color: inherit;
 }
 
 
@@ -3684,6 +3697,18 @@ 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]::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);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniai-fe/uds-primitives",
-  "version": "0.3.9",
+  "version": "0.3.11",
   "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

@@ -60,8 +60,19 @@
   margin-top: var(--form-field-gap-y);
   font-size: var(--form-field-helper-font-size);
   line-height: var(--form-field-helper-line-height);
+  color: var(--form-field-helper-color-default);
   p,
   span {
-    color: var(--form-field-helper-color);
+    color: inherit;
+  }
+}
+
+.form-field-container[data-state="error"] {
+  .form-field-footer {
+    color: var(--form-field-helper-color-error);
+    p,
+    span {
+      color: inherit;
+    }
   }
 }

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

@@ -13,5 +13,6 @@
   --form-field-helper-font-size: var(--font-caption-medium-size);
   --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-color-default: var(--color-label-neutral);
+  --form-field-helper-color-error: 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/input/styles/variables.scss

@@ -40,7 +40,7 @@
   --input-label-font-weight: var(--font-label-small-weight);
   --input-helper-color: var(--color-label-neutral);
   --input-helper-success-color: var(--color-success);
-  --input-helper-error-color: var(--color-error);
+  --input-helper-error-color: var(--color-feedback-error);
   --input-helper-disabled-color: var(--color-label-disabled);
   --input-helper-font-size: var(--font-label-small-size);
   --input-helper-line-height: var(--font-label-small-line-height);
@@ -66,8 +66,8 @@
   --input-border-table-default-color: transparent;
   --input-border-table-disabled-color: var(--input-border-table-default-color);
   --input-border-table-readonly-color: var(--input-border-table-disabled-color);
-  /* error는 Figma 44% alpha */
-  --input-border-error-color: rgba(218, 29, 11, 0.44); // --color-feedback-error
+  /* error border는 기존 RGBA 스펙을 유지한다. */
+  --input-border-error-color: rgba(218, 29, 11, 0.44);
   --input-border-disabled-color: var(--color-border-standard-cool-gray);
   --input-border-underline-disabled-color: var(--color-border-assistive);
 

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,23 @@
     --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"] {
+    &::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);

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
@@ -84,10 +85,12 @@
   --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
   );

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