@uniai-fe/uds-primitives 0.13.0 → 0.13.1

package/dist/styles.css

@@ -290,7 +290,6 @@
   --theme-checkbox-icon-default: transparent;
   --theme-checkbox-icon-selected: var(--color-common-100);
   --theme-checkbox-icon-disabled-selected: var(--color-common-100);
-  --theme-checkbox-focus-ring: rgba(2, 84, 255, 0.32);
   --theme-chip-height: var(--theme-size-small-3);
   /* 변경: Figma text menu item은 기본 chip보다 낮은 24px height를 사용한다. */
   --theme-chip-height-text: 24px;
@@ -436,7 +435,6 @@
   --fab-line-height: var(--font-body-small-line-height);
   --fab-letter-spacing: var(--font-body-small-letter-spacing);
   --fab-outlined-background: var(--button-default-outline-bg);
-  --fab-focus-color: var(--color-primary-default);
   --fab-disabled-background: var(--button-default-neutral-disabled-bg);
   --fab-disabled-foreground: var(--button-default-neutral-disabled-foreground);
   --form-field-width: auto;
@@ -671,7 +669,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;
   /* layout presets */
   --select-width: 100%;
@@ -812,7 +809,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;
@@ -841,7 +837,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;
   --switch-text-height-medium: 32px;
@@ -2557,6 +2552,10 @@
   width: var(--calendar-body-width);
 }
 
+.calendar-grid .mantine-focus-auto:focus-visible {
+  outline: none;
+}
+
 .calendar-range-grid {
   width: var(--calendar-body-width);
 }
@@ -3038,8 +3037,7 @@
   transition:
     background-color 0.15s ease,
     border-color 0.15s ease,
-    opacity 0.15s ease,
-    box-shadow 0.15s ease;
+    opacity 0.15s ease;
 }
 .checkbox[data-size="medium"] {
   inline-size: var(--theme-checkbox-frame-size-medium);
@@ -3055,10 +3053,6 @@
   cursor: not-allowed;
 }
 
-.checkbox:focus-visible {
-  box-shadow: 0 0 0 2px var(--theme-checkbox-focus-ring);
-}
-
 .checkbox-surface {
   inline-size: var(--theme-checkbox-indicator-size-medium);
   block-size: var(--theme-checkbox-indicator-size-medium);
@@ -3218,11 +3212,6 @@ figure.chip {
   margin: 0;
 }
 
-.chip:focus-visible {
-  outline: 2px solid var(--color-primary-default);
-  outline-offset: 2px;
-}
-
 .chip:where([data-style="filter"][data-fill="solid"]) {
   --chip-bg: var(--color-surface-standard);
   --chip-label-color: var(--color-label-neutral);
@@ -3982,10 +3971,6 @@ figure.chip {
   background-color: var(--fab-pressed-background);
   box-shadow: var(--fab-pressed-shadow);
 }
-.fab:where(:focus-visible) {
-  outline: 2px solid var(--fab-focus-color);
-  outline-offset: 2px;
-}
 .fab:where(:disabled) {
   background-color: var(--fab-disabled-background);
   border-color: var(--fab-disabled-background);
@@ -5333,12 +5318,6 @@ figure.chip {
   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;
@@ -5577,9 +5556,7 @@ figure.chip {
   border-radius: 0;
   padding: 0;
   cursor: pointer;
-  transition:
-    box-shadow 0.15s ease,
-    transform 0.15s ease;
+  transition: transform 0.15s ease;
 }
 .radio[data-size="large"] {
   inline-size: var(--theme-radio-frame-size-large);
@@ -5590,10 +5567,6 @@ figure.chip {
   opacity: 0.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);
@@ -5874,11 +5847,6 @@ figure.chip {
   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;
@@ -6358,10 +6326,6 @@ figure.chip {
   border-radius: 9999px;
   transition: color 150ms ease;
 }
-.select-tag-remove:focus-visible {
-  outline: 0.2rem solid var(--select-multiple-chip-remove-focus-outline-color);
-  outline-offset: 0.1rem;
-}
 .select-tag-remove:hover {
   color: var(--select-multiple-chip-remove-hover-color);
 }
@@ -6434,7 +6398,6 @@ figure.chip {
   cursor: pointer;
   transition:
     background-color 0.2s ease,
-    box-shadow 0.2s ease,
     opacity 0.2s ease;
 }
 
@@ -6449,10 +6412,6 @@ figure.chip {
   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);
@@ -6581,11 +6540,6 @@ figure.chip {
   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;
@@ -6665,11 +6619,6 @@ figure.chip {
   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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniai-fe/uds-primitives",
-  "version": "0.13.0",
+  "version": "0.13.1",
   "description": "UNIAI Design System; Primitives Components Package",
   "type": "module",
   "private": false,
@@ -87,9 +87,9 @@
     "react-hook-form": "^7.86.0",
     "sass": "^1.102.0",
     "typescript": "6.0.3",
-    "@uniai-fe/eslint-config": "0.4.4",
-    "@uniai-fe/next-devkit": "0.4.1",
     "@uniai-fe/tsconfig": "0.2.0",
+    "@uniai-fe/next-devkit": "0.4.1",
+    "@uniai-fe/eslint-config": "0.4.4",
     "@uniai-fe/uds-foundation": "0.6.0",
     "@uniai-fe/util-functions": "0.4.3"
   },

package/src/components/calendar/styles/mantine-calendar.scss

@@ -59,6 +59,11 @@
   width: var(--calendar-body-width);
 }
 
+.calendar-grid .mantine-focus-auto:focus-visible {
+  // Mantine의 공통 초점 테두리만 숨기고 날짜 상태 표시는 유지한다.
+  outline: none;
+}
+
 .calendar-range-grid {
   width: var(--calendar-body-width);
 }

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

@@ -22,7 +22,6 @@
   --theme-checkbox-icon-default: transparent;
   --theme-checkbox-icon-selected: var(--color-common-100);
   --theme-checkbox-icon-disabled-selected: var(--color-common-100);
-  --theme-checkbox-focus-ring: rgba(2, 84, 255, 0.32);
 }
 
 .checkbox {
@@ -38,8 +37,7 @@
   transition:
     background-color 0.15s ease,
     border-color 0.15s ease,
-    opacity 0.15s ease,
-    box-shadow 0.15s ease;
+    opacity 0.15s ease;
 
   &[data-size="medium"] {
     inline-size: var(--theme-checkbox-frame-size-medium);
@@ -58,10 +56,6 @@
   }
 }
 
-.checkbox:focus-visible {
-  box-shadow: 0 0 0 2px var(--theme-checkbox-focus-ring);
-}
-
 .checkbox-surface {
   inline-size: var(--theme-checkbox-indicator-size-medium);
   block-size: var(--theme-checkbox-indicator-size-medium);

package/src/components/chip/styles/chip.scss

@@ -42,11 +42,6 @@ figure.chip {
   margin: 0;
 }
 
-.chip:focus-visible {
-  outline: 2px solid var(--color-primary-default);
-  outline-offset: 2px;
-}
-
 .chip:where([data-style="filter"][data-fill="solid"]) {
   --chip-bg: var(--color-surface-standard);
   --chip-label-color: var(--color-label-neutral);

package/src/components/fab/styles/fab.scss

@@ -89,11 +89,6 @@
     box-shadow: var(--fab-pressed-shadow);
   }
 
-  &:where(:focus-visible) {
-    outline: 2px solid var(--fab-focus-color);
-    outline-offset: 2px;
-  }
-
   &:where(:disabled) {
     background-color: var(--fab-disabled-background);
     border-color: var(--fab-disabled-background);

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

@@ -19,7 +19,6 @@
   --fab-line-height: var(--font-body-small-line-height);
   --fab-letter-spacing: var(--font-body-small-letter-spacing);
   --fab-outlined-background: var(--button-default-outline-bg);
-  --fab-focus-color: var(--color-primary-default);
   --fab-disabled-background: var(--button-default-neutral-disabled-bg);
   --fab-disabled-foreground: var(--button-default-neutral-disabled-foreground);
 }

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);