@uniai-fe/uds-primitives 0.12.14 → 0.13.1

package/src/components/fab/types/options.ts

@@ -0,0 +1,39 @@
+import { BUTTON_FILLS, BUTTON_PRIORITIES } from "../../button/types/options";
+import type { ButtonFill, ButtonPriority } from "../../button/types/props";
+
+/**
+ * Fab Types; 크기 옵션
+ * @desc Figma small 40px, medium 48px, large 56px에 대응한다.
+ */
+export type FabSize = "small" | "medium" | "large";
+
+/**
+ * Fab Types; 채움 스타일
+ * @desc Button과 같은 "solid" | "outlined" 축이며 모든 priority에 적용한다.
+ */
+export type FabFill = ButtonFill;
+
+/**
+ * Fab Types; 색상 priority
+ * @desc Button과 같은 "primary" | "secondary" | "tertiary" | "green" | "yellow" | "orange" | "teal" | "pink" | "red" | "darkGray" | "lightGray"를 두 fill 모두에 적용한다.
+ * @see ButtonPriority
+ */
+export type FabPriority = ButtonPriority;
+
+/**
+ * Fab Options; 공개 크기 목록
+ * @desc Controls와 소비 예시에서 Figma 크기 축을 공유한다.
+ */
+export const FAB_SIZES = ["small", "medium", "large"] as const;
+
+/**
+ * Fab Options; 공개 채움 스타일 목록
+ * @desc 채움과 외곽선을 독립된 시각 옵션으로 선택한다.
+ */
+export const FAB_FILLS = [...BUTTON_FILLS] as const;
+
+/**
+ * Fab Options; 공개 색상 priority 목록
+ * @desc Button의 semantic priority와 고정 색상 preset 목록을 공유한다.
+ */
+export const FAB_PRIORITIES = [...BUTTON_PRIORITIES] as const;

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

@@ -0,0 +1,124 @@
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
+import type { FabFill, FabPriority, FabSize } from "./options";
+
+/**
+ * Fab Types; 시각 옵션의 조합 계약
+ * @property {"solid" | "outlined"} fill 모든 priority에서 선택하는 필수 채움 스타일.
+ * @property {"primary" | "secondary" | "tertiary" | "green" | "yellow" | "orange" | "teal" | "pink" | "red" | "darkGray" | "lightGray"} priority 두 fill 모두에서 필수인 색상.
+ * @desc Button의 색상 계약을 재사용하며 priority와 fill을 독립적으로 조합한다. outlined의 기본 면은 불투명 흰색이다.
+ */
+export type FabStyleOptions = {
+  /**
+   * 허용 값: "solid" | "outlined". 모든 priority에서 필수다.
+   */
+  fill: FabFill;
+  /**
+   * 허용 값: "primary" | "secondary" | "tertiary" | "green" | "yellow" |
+   * "orange" | "teal" | "pink" | "red" | "darkGray" | "lightGray".
+   * 두 fill 모두에서 필수이며 배경·외곽선·콘텐츠 색상을 결정한다.
+   */
+  priority: FabPriority;
+};
+
+/**
+ * Fab Props; 공통 native 버튼 계약
+ * @property {"small" | "medium" | "large"} size 필수 크기. small/medium/large의 높이는 40/48/56px, icon 영역은 16/20/24px다.
+ * @property {"solid" | "outlined"} fill 모든 priority에서 선택하는 필수 채움 스타일.
+ * @property {"primary" | "secondary" | "tertiary" | "green" | "yellow" | "orange" | "teal" | "pink" | "red" | "darkGray" | "lightGray"} priority solid와 outlined 모두에서 필수인 색상.
+ * @property {ReactNode} icon 필수 장식용 콘텐츠. icon 영역은 aria-hidden이므로 행동 이름을 대신하지 않는다.
+ * @property {string} [aria-label] native 접근 가능한 이름. 표시 라벨과 별도 이름이 필요할 때 제공한다.
+ * @property {"button" | "submit" | "reset"} [type="button"] native 버튼 종류. submit과 reset은 소비자가 명시한다.
+ * @property {boolean} [disabled] native 클릭·키보드 실행을 차단한다.
+ * @property {string} [className] 최상위 native 버튼에 병합하는 추가 클래스.
+ * @property {React.CSSProperties} [style] 최상위 native 버튼에 전달하는 inline style.
+ * @property {(event: React.MouseEvent<HTMLButtonElement>) => void} [onClick] native 클릭 handler. Enter·Space의 native 버튼 실행에서도 호출한다.
+ * @desc FabStyleOptions와 children을 제외한 native button 입력을 조합한다. size·fill·priority·icon은 필수이며 나머지 native button 이벤트와 aria attribute를 유지한다. ref는 각 컴포넌트의 forwardRef로 native 버튼에 연결한다. viewport 배치는 소비자의 책임이다.
+ * @see FabStyleOptions
+ */
+export type FabProps = Omit<ComponentPropsWithoutRef<"button">, "children"> &
+  FabStyleOptions & {
+    /**
+     * 필수 크기. 허용 값: "small" | "medium" | "large".
+     * 높이는 각각 40/48/56px, icon 영역은 16/20/24px다.
+     */
+    size: FabSize;
+    /**
+     * 필수 ReactNode 영역. 아이콘 외에도 비인터랙티브 콘텐츠를 받을 수 있다.
+     * 내부 콘텐츠는 aria-hidden으로 처리하므로 행동 이름은 버튼 라벨로 제공한다.
+     */
+    icon: ReactNode;
+  };
+
+/**
+ * Fab Props; 아이콘 전용 액션
+ * @property {"small" | "medium" | "large"} size 필수 크기. small/medium/large의 높이는 40/48/56px, icon 영역은 16/20/24px다.
+ * @property {"solid" | "outlined"} fill 모든 priority에서 선택하는 필수 채움 스타일.
+ * @property {"primary" | "secondary" | "tertiary" | "green" | "yellow" | "orange" | "teal" | "pink" | "red" | "darkGray" | "lightGray"} priority solid와 outlined 모두에서 필수인 색상.
+ * @property {ReactNode} icon 필수 장식용 콘텐츠. icon 영역은 aria-hidden이므로 행동 이름을 대신하지 않는다.
+ * @property {string} aria-label 필수 행동 이름. icon 콘텐츠는 접근 가능한 이름에서 제외된다.
+ * @property {"button" | "submit" | "reset"} [type="button"] native 버튼 종류. submit과 reset은 소비자가 명시한다.
+ * @property {boolean} [disabled] native 클릭·키보드 실행을 차단한다.
+ * @property {string} [className] 최상위 native 버튼에 병합하는 추가 클래스.
+ * @property {React.CSSProperties} [style] 최상위 native 버튼에 전달하는 inline style.
+ * @property {(event: React.MouseEvent<HTMLButtonElement>) => void} [onClick] native 클릭 handler. Enter·Space의 native 버튼 실행에서도 호출한다.
+ * @desc FabProps에 필수 aria-label을 추가한 Fab.Button과 호환 이름 Fab.Default의 계약이다. children을 받지 않으며 icon은 장식용으로 처리한다. 다른 native button 입력과 컴포넌트의 DOM ref를 유지한다.
+ * @see FabProps
+ */
+export type FabDefaultProps = FabProps & {
+  /**
+   * 아이콘이 실행하는 행동을 설명하는 필수 접근 가능한 이름.
+   */
+  "aria-label": string;
+};
+
+/**
+ * Fab Props; 아이콘과 라벨을 나란히 표시하는 확장형 액션
+ * @property {"small" | "medium" | "large"} size 필수 크기. small/medium/large의 높이는 40/48/56px, icon 영역은 16/20/24px다.
+ * @property {"solid" | "outlined"} fill 모든 priority에서 선택하는 필수 채움 스타일.
+ * @property {"primary" | "secondary" | "tertiary" | "green" | "yellow" | "orange" | "teal" | "pink" | "red" | "darkGray" | "lightGray"} priority solid와 outlined 모두에서 필수인 색상.
+ * @property {ReactNode} icon 필수 장식용 콘텐츠. icon 영역은 aria-hidden이므로 행동 이름을 대신하지 않는다.
+ * @property {string} [aria-label] native 접근 가능한 이름. 표시 라벨과 별도 이름이 필요할 때 제공한다.
+ * @property {"button" | "submit" | "reset"} [type="button"] native 버튼 종류. submit과 reset은 소비자가 명시한다.
+ * @property {boolean} [disabled] native 클릭·키보드 실행을 차단한다.
+ * @property {string} [className] 최상위 native 버튼에 병합하는 추가 클래스.
+ * @property {React.CSSProperties} [style] 최상위 native 버튼에 전달하는 inline style.
+ * @property {(event: React.MouseEvent<HTMLButtonElement>) => void} [onClick] native 클릭 handler. Enter·Space의 native 버튼 실행에서도 호출한다.
+ * @property {ReactNode} children 필수 행동 라벨. 문자열·숫자는 Fab.Label로 감싸고 다른 ReactNode는 그대로 표시한다.
+ * @desc FabProps에 필수 children을 추가한 Fab.Expand와 호환 이름 Fab.Extended의 계약이다. icon과 행동 라벨을 나란히 표시하며 다른 native button 입력과 컴포넌트의 DOM ref를 유지한다. 액션 목록의 열림을 담당하지 않는다.
+ * @see FabProps
+ */
+export type FabExtendedProps = FabProps & {
+  /**
+   * 필수 행동 라벨. 문자열·숫자는 Fab.Label로 감싸고 복합 JSX는 그대로 표시한다.
+   * 복합 JSX에도 접근 가능한 이름과 필요한 라벨 스타일을 제공한다.
+   */
+  children: ReactNode;
+};
+
+/**
+ * Fab Props; 내부 공통 마크업 입력
+ * @property {"small" | "medium" | "large"} size 필수 크기. small/medium/large의 높이는 40/48/56px, icon 영역은 16/20/24px다.
+ * @property {"solid" | "outlined"} fill 모든 priority에서 선택하는 필수 채움 스타일.
+ * @property {"primary" | "secondary" | "tertiary" | "green" | "yellow" | "orange" | "teal" | "pink" | "red" | "darkGray" | "lightGray"} priority solid와 outlined 모두에서 필수인 색상.
+ * @property {ReactNode} icon 필수 장식용 콘텐츠. icon 영역은 aria-hidden이므로 행동 이름을 대신하지 않는다.
+ * @property {string} [aria-label] native 접근 가능한 이름. 표시 라벨과 별도 이름이 필요할 때 제공한다.
+ * @property {"button" | "submit" | "reset"} [type="button"] native 버튼 종류. submit과 reset은 소비자가 명시한다.
+ * @property {boolean} [disabled] native 클릭·키보드 실행을 차단한다.
+ * @property {string} [className] 최상위 native 버튼에 병합하는 추가 클래스.
+ * @property {React.CSSProperties} [style] 최상위 native 버튼에 전달하는 inline style.
+ * @property {(event: React.MouseEvent<HTMLButtonElement>) => void} [onClick] native 클릭 handler. Enter·Space의 native 버튼 실행에서도 호출한다.
+ * @property {ReactNode} [children] extended가 true일 때 표시하는 행동 라벨.
+ * @property {boolean} [extended=false] true이면 라벨과 자연 너비 규격을 적용한다. false이면 원형 icon 버튼 규격을 적용한다.
+ * @desc FabProps를 상속한 내부 마크업 계약이다. Fab.Button/Fab.Default는 extended=false, Fab.Expand/Fab.Extended는 extended=true로 같은 native button을 사용한다. 다른 native button 입력과 컴포넌트의 DOM ref를 유지한다.
+ * @see FabProps
+ */
+export type FabButtonProps = FabProps & {
+  /**
+   * 확장형에서 사용하는 라벨.
+   */
+  children?: ReactNode;
+  /**
+   * 기본값 false. true이면 라벨과 자연 너비 규격을, false이면 원형 아이콘 규격을 적용한다.
+   */
+  extended?: boolean;
+};

package/src/components/navigation/styles/index.scss

@@ -86,12 +86,6 @@
   pointer-events: none;
 }
 
-.bottom-navigation-trigger:focus-visible {
-  outline: none;
-  border-radius: var(--theme-radius-large-1, 12px);
-  box-shadow: 0 0 0 2px var(--color-primary-focus, rgba(0, 97, 255, 0.2));
-}
-
 .navigation-item-icon {
   display: inline-flex;
   align-items: center;

package/src/components/radio/styles/index.scss

@@ -23,7 +23,6 @@
   --theme-radio-card-description-color: var(--color-label-neutral);
   --theme-radio-card-badge-background: var(--color-surface-static-blue);
   --theme-radio-card-badge-color: var(--color-primary-default);
-  --theme-radio-focus-ring: rgba(2, 84, 255, 0.32);
   --theme-radio-disabled-selected-opacity: 0.28;
 }
 
@@ -38,9 +37,7 @@
   border-radius: 0;
   padding: 0;
   cursor: pointer;
-  transition:
-    box-shadow 0.15s ease,
-    transform 0.15s ease;
+  transition: transform 0.15s ease;
 
   &[data-size="large"] {
     inline-size: var(--theme-radio-frame-size-large);
@@ -53,10 +50,6 @@
   }
 }
 
-.radio:focus-visible {
-  box-shadow: 0 0 0 2px var(--theme-radio-focus-ring);
-}
-
 .radio-indicator {
   inline-size: var(--theme-radio-indicator-size-medium);
   block-size: var(--theme-radio-indicator-size-medium);

package/src/components/segmented-control/styles/index.scss

@@ -92,11 +92,6 @@
   opacity: var(--segmented-disabled-opacity);
 }
 
-.segmented-control-button:where(:focus-visible) {
-  outline: 2px solid var(--color-focus-ring, var(--color-primary-default));
-  outline-offset: 2px;
-}
-
 .segmented-control-label {
   display: flex;
   align-items: center;

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

@@ -485,11 +485,6 @@
   border-radius: 9999px;
   transition: color 150ms ease;
 
-  &:focus-visible {
-    outline: 0.2rem solid var(--select-multiple-chip-remove-focus-outline-color);
-    outline-offset: 0.1rem;
-  }
-
   &:hover {
     color: var(--select-multiple-chip-remove-hover-color);
   }

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

@@ -147,7 +147,6 @@
   --select-multiple-chip-border-color: transparent;
   --select-multiple-chip-remove-color: var(--color-label-strong);
   --select-multiple-chip-remove-hover-color: var(--color-label-strong);
-  --select-multiple-chip-remove-focus-outline-color: var(--color-border-strong);
   --select-multiple-chip-summary-color: var(--color-label-standard);
   --select-multiple-chip-summary-surface: var(--color-surface-standard);
   --select-multiple-chip-summary-border-color: transparent;

package/src/components/switch/styles/switch.scss

@@ -16,7 +16,6 @@
   cursor: pointer;
   transition:
     background-color 0.2s ease,
-    box-shadow 0.2s ease,
     opacity 0.2s ease;
 }
 
@@ -31,10 +30,6 @@
   background-color: var(--switch-track-background-checked);
 }
 
-.switch:where(:focus-visible) {
-  box-shadow: 0 0 0 2px var(--switch-focus-ring);
-}
-
 .switch:where(:disabled) {
   cursor: not-allowed;
   opacity: var(--switch-disabled-opacity);
@@ -165,11 +160,6 @@
   cursor: not-allowed;
 }
 
-.switch-text-button:where(:focus-visible) {
-  outline: 2px solid var(--switch-focus-ring);
-  outline-offset: 2px;
-}
-
 .switch-text-label {
   display: flex;
   align-items: center;

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

@@ -16,7 +16,6 @@
     0px 2px 8px rgba(0, 0, 0, 0.04), 0px 0px 4px rgba(0, 0, 0, 0.08);
   --switch-thumb-shadow-checked:
     0px 2px 8px rgba(0, 0, 0, 0.08), 0px 0px 4px rgba(0, 0, 0, 0.12);
-  --switch-focus-ring: var(--color-primary-focus);
   --switch-disabled-opacity: 0.4;
 
   --switch-text-width: fit-content;

package/src/components/tab/markup/TabTrigger.tsx

@@ -6,20 +6,20 @@ import { useTabContext } from "../utils";
 import { TabLabel } from "./Label";
 
 /**
- * TabTrigger: 개별 탭 버튼. icon slot을 지원한다.
+ * Tab Trigger; 개별 탭 선택
  * @component
- * @param {TabTriggerProps} props
- * @param {React.ReactNode} [props.icon] 라벨 앞 슬롯.
- * @param {React.ReactNode} [props.children] 라벨 콘텐츠.
- * @param {string} [props.className] trigger className.
- * @param {string} props.value 탭 value.
- * @param {boolean} [props.disabled] disabled 상태.
+ * @property {TabTriggerProps} props Radix 탭 입력과 icon을 전달한다.
+ * @property {React.ReactNode} [props.icon] 라벨 앞 아이콘.
+ * @property {React.ReactNode} [props.children] 라벨 콘텐츠.
+ * @property {string} [props.className] trigger에 병합할 className.
+ * @property {string} props.value 선택할 탭 값.
+ * @property {boolean} [props.disabled] 비활성 상태.
+ * @desc 선택·focus·disabled와 native handler를 Radix에 위임하고 초점 테두리는 Foundation reset을 따른다.
  */
 const TabTrigger = forwardRef<HTMLButtonElement, TabTriggerProps>(
   ({ icon, children, className, ...restProps }, forwardedRef) => {
     const { variant, scale } = useTabContext();
     const hasIcon = Boolean(icon);
-
     return (
       <TabsPrimitive.Trigger
         {...restProps}

package/src/components/tab/styles/tab.scss

@@ -68,11 +68,6 @@
   transition: background-color 0.2s ease;
 }
 
-.tab-trigger:where(:focus-visible) {
-  outline: 2px solid var(--color-primary-default);
-  outline-offset: 2px;
-}
-
 .tab-trigger:where([data-disabled="true"]) {
   cursor: not-allowed;
   opacity: var(--tab-disabled-opacity);

package/src/components/tooltip/markup/Text.tsx

@@ -3,15 +3,22 @@ import type { TooltipTextProps } from "../types";
 import { Slot } from "../../slot";
 
 /**
- * Tooltip Text; Tooltip 텍스트 className 계약을 고정하는 전용 마크업.
+ * Tooltip Text; Tooltip 문구의 고정 스타일
  * @component
- * @param {TooltipTextProps} props Text props
+ * @property {ReactNode} [props.children] 문자열·숫자는 span으로 감싸고 다른 ReactNode는 그대로 반환한다.
+ * @property {"span"} [props.as="span"] 문자열·숫자 문구의 렌더 요소. 현재 공개 타입은 span 입력을 받는다.
+ * @property {string} [props.className] 문자열·숫자 문구에 slot-text·tooltip-message-text와 병합할 추가 클래스.
+ * @property {string} [props.title] 문구의 native title. 생략하면 문자열·숫자 children의 문자열 값을 사용한다.
+ * @property {string} [props.id] 문자열·숫자 문구를 감싼 span의 DOM ID.
+ * @property {CSSProperties} [props.style] 문자열·숫자 문구를 감싼 span의 inline style.
+ * @see TooltipTextProps
+ * @desc Tooltip.Text와 Fab.Menu.Label이 같은 구현을 사용한다. TooltipTextProps가 상속한 SlotTextProps는 ComponentPropsWithoutRef<"span"> 계약으로 ref를 받지 않는다. Tooltip의 스타일 문맥에서 문구를 표현하며 나머지 native span 속성은 래핑한 텍스트에 전달한다. 복합 JSX는 wrapper·클래스·속성 주입 없이 반환한다. Tooltip 표시 상태와 접근 가능한 버튼 이름을 설정하는 부품은 아니다.
  */
 export default function TooltipText({
   className,
   ...restProps
 }: TooltipTextProps) {
-  // 변경: Tooltip 텍스트 className 누락을 방지하기 위해 전용 Text 컴포넌트로 고정한다.
+  // 문구의 전용 클래스를 유지해 Tooltip의 색상과 타이포그래피를 적용한다.
   return (
     <Slot.Text
       className={clsx("tooltip-message-text", className)}

package/src/components/tooltip/types/text.ts

@@ -2,8 +2,13 @@ import type { SlotTextProps } from "../../slot";
 
 /**
  * Tooltip Types; Text 마크업 props
- * @property {React.ElementType} [as] 렌더링할 요소. 기본값은 span.
- * @property {React.ReactNode} [children] 텍스트 콘텐츠
- * @property {string} [className] tooltip-text와 병합할 className
+ * @property {"span"} [as="span"] 문자열·숫자 문구의 렌더 요소. SlotTextProps의 기본 generic span을 사용한다.
+ * @property {React.ReactNode} [children] 문자열·숫자는 span으로 감싸고 복합 JSX는 속성 주입 없이 반환한다.
+ * @property {string} [className] 문자열·숫자 문구에 slot-text·tooltip-message-text와 병합할 추가 클래스.
+ * @property {string} [title] 문자열·숫자 문구의 native title. 생략하면 children의 문자열 값을 사용한다.
+ * @property {string} [id] 문자열·숫자 문구를 감싼 span의 DOM ID.
+ * @property {React.CSSProperties} [style] 문자열·숫자 문구를 감싼 span의 inline style.
+ * @see SlotTextProps
+ * @desc Tooltip.Text와 Fab.Menu.Label이 공유하는 문구 입력이다. native span 속성을 상속하며 복합 JSX에는 wrapper·클래스·속성을 주입하지 않는다. 표시 상태와 접근 가능한 버튼 이름은 상위 조합에서 설정한다.
  */
 export type TooltipTextProps = SlotTextProps;

package/src/index.scss

@@ -8,6 +8,7 @@
 @use "./components/divider";
 @use "./components/drawer";
 @use "./components/dropdown";
+@use "./components/fab";
 @use "./components/form";
 @use "./components/info-box";
 @use "./components/input";

package/src/index.tsx

@@ -13,6 +13,7 @@ export * from "./components/chip";
 export * from "./components/divider";
 export * from "./components/drawer";
 export * from "./components/dropdown";
+export * from "./components/fab";
 export * from "./components/form";
 export * from "./components/info-box";
 export * from "./components/input";