@uniai-fe/uds-primitives 0.1.8 → 0.1.10

package/README.md

@@ -40,7 +40,7 @@ import { Button } from "@uniai-fe/uds-primitives";
 
 export default function Page() {
   return (
-    <Button.Default scale="solid-medium" priority="primary">
+    <Button.Default fill="solid" size="medium" priority="primary">
       확인
     </Button.Default>
   );
@@ -58,7 +58,8 @@ function LinkButton() {
     <Button.Default
       as={Link}
       href="/dashboard"
-      scale="outlined-medium"
+      fill="outlined"
+      size="medium"
       priority="secondary"
     >
       대시보드로 이동
@@ -72,7 +73,7 @@ function LinkButton() {
 - 기본 클래스: `.button` (padding/height/radius/타이포/커서 담당)
 - 슬롯: `button-label`, `button-icon`, `button-left`, `button-right`, `button-loading`
 - Modifier: `button-scale-*`, `button-fill-*`, `button-priority-*`, `button-state-*`, `button-size-*`, `button-block`, `button-icon-left/right`
-- 차기 리팩토링에서는 디자인 관련 props를 `scale`(레이아웃/spacing 집합)과 `priority`(color set) 두 축으로 단순화하고, 나머지는 상태/slot 위주의 역할 props만 남긴다. 자세한 계획은 `docs/CONTEXT-BUTTON.md`에서 확인할 수 있다.
+- `scale` prop은 legacy 호환용이며 `fill`/`size`를 명시 사용하는 것이 권장된다.
 - `loading` 상태는 readonly와 동일하게 잠기며 hover/pressed 반응을 막는다. anchor 등 커스텀 요소도 `aria-disabled="true"`를 통해 동일한 스타일을 적용받는다.
 
 ### TextButton / RoundButton 템플릿
@@ -102,6 +103,13 @@ function Templates() {
 - 템플릿별 클래스를 추가로 노출한다: `.button-template-text`, `.button-template-text-size-*`, `.button-template-round`, `.button-template-round-size-*`.
 - 스토리북 `primitives/Button` Story에서 solid/outlined/텍스트/라운드 4가지 카테고리를 한 번에 확인할 수 있다.
 
+### SlotComponent (폴리모픽 as 래퍼)
+
+- `Button.Default`는 `SlotComponent`를 통해 `as` prop으로 전달된 요소(예: `Link`, `a`, `button`)에 공통 속성/`ref`를 안전하게 전달한다.
+- `SlotComponentProps<C>`는 React가 허용하는 모든 native props + `data-*` 속성을 그대로 포함하고, `as/children/className`만 재정의한다.
+- 필요 시 `import { SlotComponent } from "@uniai-fe/uds-primitives";`로 직접 사용해 카드/배너 등의 래퍼를 구현할 수 있다.
+- 자세한 도입 배경과 API는 `docs/CONTEXT-SLOT.md`에서 확인할 수 있다.
+
 ### 최근 업데이트
 
 - TextInput Base 컴포넌트의 `clear` 버튼 로직을 pointer 이벤트 기반으로 재작성해 모바일 터치 환경에서도 안정적으로 입력값이 초기화되도록 했다.

package/dist/styles.css

@@ -254,6 +254,66 @@
   --divider-margin: var(--spacing-gap-4, 8px);
 }
 
+@keyframes alternate-loading-spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+.alternate {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+.alternate .empty-text {
+  font-size: 1.4rem;
+  color: var(--color-cool-gray-70);
+  line-height: 1.5;
+  word-break: keep-all;
+  text-align: center;
+}
+.alternate.is-horizontal {
+  flex-direction: row;
+}
+.alternate.is-horizontal.loading .empty-text {
+  transform: translateY(0.2rem);
+}
+.alternate.is-vertical {
+  flex-direction: column;
+}
+
+.alternate-loading-icon {
+  width: 2.4rem;
+  height: 2.4rem;
+  position: relative;
+  margin: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  animation: alternate-loading-spin 1s linear infinite;
+}
+.alternate-loading-icon.is-horizontal {
+  margin-right: 1rem;
+}
+.alternate-loading-icon.is-vertical {
+  margin-bottom: 1rem;
+}
+.alternate-loading-icon.is-medium {
+  width: 3.6rem;
+  height: 3.6rem;
+}
+.alternate-loading-icon.is-large {
+  width: 5.2rem;
+  height: 5.2rem;
+}
+
+
+
 .badge {
   --badge-height: var(--theme-badge-height-xsmall);
   --badge-padding-inline: var(--theme-badge-padding-inline-xsmall);
@@ -431,7 +491,7 @@
 
 
 /* Primitives 버튼 공통 스타일 */
-.button {
+:where(.button) {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -449,210 +509,224 @@
   filter: none;
   cursor: pointer;
 }
-.button span {
+:where(.button) span {
   font-family: var(--font-caption-medium-family, var(--theme-button-font-body-medium-family, var(--font-body-medium-family, "Pretendard")));
   font-size: var(--font-caption-medium-size, var(--theme-button-font-body-medium-size, var(--font-body-medium-size, 16px)));
   font-weight: var(--font-caption-medium-weight, var(--theme-button-font-weight, 400));
   line-height: var(--font-caption-medium-line-height, var(--theme-button-font-body-medium-line-height, var(--font-body-medium-line-height, 24px)));
   letter-spacing: var(--font-caption-medium-letter-spacing, var(--theme-button-font-body-medium-letter-spacing, var(--font-body-medium-letter-spacing, 0px)));
 }
-.button .button-icon,
-.button .button-label,
-.button .button-left,
-.button .button-right {
+:where(.button) .button-icon,
+:where(.button) .button-label,
+:where(.button) .button-left,
+:where(.button) .button-right {
   display: inline-flex;
   align-items: center;
   justify-content: center;
 }
-.button.button-block {
+:where(.button).button-block {
   width: 100%;
 }
 
-.button[aria-busy=true] {
+:where(.button):not(.button-fill-solid):not(.button-fill-outlined) {
+  background-color: transparent;
+  border-color: var(--theme-button-color-cool-gray-90, var(--color-cool-gray-90));
+  color: var(--theme-button-color-cool-gray-10, var(--color-cool-gray-10));
+}
+:where(.button):not(.button-fill-solid):not(.button-fill-outlined):hover:not(:disabled):not([aria-disabled=true]), :where(.button):not(.button-fill-solid):not(.button-fill-outlined)[data-user-action=hover]:not(:disabled):not([aria-disabled=true]) {
+  background-color: var(--theme-button-color-cool-gray-95, var(--color-cool-gray-95));
+  border-color: var(--theme-button-color-cool-gray-90, var(--color-cool-gray-90));
+}
+:where(.button):not(.button-fill-solid):not(.button-fill-outlined):active:not(:disabled):not([aria-disabled=true]), :where(.button):not(.button-fill-solid):not(.button-fill-outlined)[data-user-action=pressed]:not(:disabled):not([aria-disabled=true]) {
+  background-color: var(--theme-button-tertiary-solid-bg, var(--color-bg-surface-neutral));
+  border-color: var(--theme-button-color-cool-gray-90, var(--color-cool-gray-90));
+}
+
+:where(.button)[aria-busy=true] {
   pointer-events: none;
   cursor: progress;
 }
 
-.button.button-fill-solid.button-priority-primary {
+:where(.button.button-fill-solid.button-priority-primary) {
   background-color: var(--theme-button-color-primary-default, var(--color-primary-default));
   border-color: var(--theme-button-color-primary-default, var(--color-primary-default));
   color: var(--theme-button-color-common-100, var(--color-common-100));
 }
-.button.button-fill-solid.button-priority-primary:disabled, .button.button-fill-solid.button-priority-primary[aria-disabled=true] {
+:where(.button.button-fill-solid.button-priority-primary):disabled, :where(.button.button-fill-solid.button-priority-primary)[aria-disabled=true] {
   background-color: var(--theme-button-color-bg-surface-standard, var(--color-bg-surface-standard));
   border-color: var(--theme-button-color-bg-surface-standard, var(--color-bg-surface-standard));
   color: var(--theme-button-color-label-disabled, var(--color-label-disabled));
 }
-.button.button-fill-solid.button-priority-primary:hover:not(:disabled):not([aria-disabled=true]), .button.button-fill-solid.button-priority-primary[data-user-action=hover]:not(:disabled):not([aria-disabled=true]) {
+:where(.button.button-fill-solid.button-priority-primary):hover:not(:disabled):not([aria-disabled=true]), :where(.button.button-fill-solid.button-priority-primary)[data-user-action=hover]:not(:disabled):not([aria-disabled=true]) {
   background-color: var(--theme-button-color-blue-50, var(--color-blue-50));
   border-color: var(--theme-button-color-blue-50, var(--color-blue-50));
 }
-.button.button-fill-solid.button-priority-primary:active:not(:disabled):not([aria-disabled=true]), .button.button-fill-solid.button-priority-primary[data-user-action=pressed]:not(:disabled):not([aria-disabled=true]) {
+:where(.button.button-fill-solid.button-priority-primary):active:not(:disabled):not([aria-disabled=true]), :where(.button.button-fill-solid.button-priority-primary)[data-user-action=pressed]:not(:disabled):not([aria-disabled=true]) {
   background-color: var(--theme-button-color-blue-45, var(--color-blue-45));
   border-color: var(--theme-button-color-blue-45, var(--color-blue-45));
 }
 
-.button.button-fill-outlined.button-priority-primary {
+:where(.button.button-fill-outlined.button-priority-primary) {
   background-color: transparent;
   color: var(--theme-button-color-primary-default, var(--color-primary-default));
   border-color: var(--theme-button-color-primary-default, var(--color-primary-default));
 }
-.button.button-fill-outlined.button-priority-primary:disabled, .button.button-fill-outlined.button-priority-primary[aria-disabled=true] {
+:where(.button.button-fill-outlined.button-priority-primary):disabled, :where(.button.button-fill-outlined.button-priority-primary)[aria-disabled=true] {
   background-color: var(--theme-button-color-bg-surface-standard, var(--color-bg-surface-standard));
   border-color: var(--theme-button-color-bg-surface-standard, var(--color-bg-surface-standard));
   color: var(--theme-button-color-label-disabled, var(--color-label-disabled));
 }
-.button.button-fill-outlined.button-priority-primary:hover:not(:disabled):not([aria-disabled=true]), .button.button-fill-outlined.button-priority-primary[data-user-action=hover]:not(:disabled):not([aria-disabled=true]) {
+:where(.button.button-fill-outlined.button-priority-primary):hover:not(:disabled):not([aria-disabled=true]), :where(.button.button-fill-outlined.button-priority-primary)[data-user-action=hover]:not(:disabled):not([aria-disabled=true]) {
   background-color: var(--theme-button-color-primary-default, var(--color-primary-default));
   border-color: var(--theme-button-color-primary-default, var(--color-primary-default));
 }
-.button.button-fill-outlined.button-priority-primary:active:not(:disabled):not([aria-disabled=true]), .button.button-fill-outlined.button-priority-primary[data-user-action=pressed]:not(:disabled):not([aria-disabled=true]) {
+:where(.button.button-fill-outlined.button-priority-primary):active:not(:disabled):not([aria-disabled=true]), :where(.button.button-fill-outlined.button-priority-primary)[data-user-action=pressed]:not(:disabled):not([aria-disabled=true]) {
   background-color: var(--theme-button-color-primary-default, var(--color-primary-default));
   border-color: var(--theme-button-color-primary-default, var(--color-primary-default));
 }
 
-.button.button-fill-solid.button-priority-secondary {
+:where(.button.button-fill-solid.button-priority-secondary) {
   background-color: var(--theme-button-secondary-solid-bg, var(--color-blue-95, #e5eeff));
   border-color: var(--theme-button-secondary-solid-bg, var(--color-blue-95, #e5eeff));
   color: var(--theme-button-color-primary-default, var(--color-primary-default));
 }
-.button.button-fill-solid.button-priority-secondary:disabled, .button.button-fill-solid.button-priority-secondary[aria-disabled=true] {
+:where(.button.button-fill-solid.button-priority-secondary):disabled, :where(.button.button-fill-solid.button-priority-secondary)[aria-disabled=true] {
   background-color: var(--theme-button-color-bg-surface-standard, var(--color-bg-surface-standard));
   border-color: var(--theme-button-color-bg-surface-standard, var(--color-bg-surface-standard));
   color: var(--theme-button-color-label-disabled, var(--color-label-disabled));
 }
-.button.button-fill-solid.button-priority-secondary:hover:not(:disabled):not([aria-disabled=true]), .button.button-fill-solid.button-priority-secondary[data-user-action=hover]:not(:disabled):not([aria-disabled=true]) {
+:where(.button.button-fill-solid.button-priority-secondary):hover:not(:disabled):not([aria-disabled=true]), :where(.button.button-fill-solid.button-priority-secondary)[data-user-action=hover]:not(:disabled):not([aria-disabled=true]) {
   background-color: var(--theme-button-secondary-solid-hover-bg, #dbe9ff);
   border-color: var(--theme-button-secondary-solid-hover-bg, #dbe9ff);
 }
-.button.button-fill-solid.button-priority-secondary:active:not(:disabled):not([aria-disabled=true]), .button.button-fill-solid.button-priority-secondary[data-user-action=pressed]:not(:disabled):not([aria-disabled=true]) {
+:where(.button.button-fill-solid.button-priority-secondary):active:not(:disabled):not([aria-disabled=true]), :where(.button.button-fill-solid.button-priority-secondary)[data-user-action=pressed]:not(:disabled):not([aria-disabled=true]) {
   background-color: var(--theme-button-secondary-solid-pressed-bg, #ccdeff);
   border-color: var(--theme-button-secondary-solid-pressed-bg, #ccdeff);
 }
 
-.button.button-fill-outlined.button-priority-secondary {
+:where(.button.button-fill-outlined.button-priority-secondary) {
   background-color: transparent;
   color: var(--theme-button-color-primary-default, var(--color-primary-default));
   border-color: var(--theme-button-color-cool-gray-90, var(--color-cool-gray-90));
 }
-.button.button-fill-outlined.button-priority-secondary:disabled, .button.button-fill-outlined.button-priority-secondary[aria-disabled=true] {
+:where(.button.button-fill-outlined.button-priority-secondary):disabled, :where(.button.button-fill-outlined.button-priority-secondary)[aria-disabled=true] {
   background-color: var(--theme-button-color-bg-surface-standard, var(--color-bg-surface-standard));
   border-color: var(--theme-button-color-bg-surface-standard, var(--color-bg-surface-standard));
   color: var(--theme-button-color-label-disabled, var(--color-label-disabled));
 }
-.button.button-fill-outlined.button-priority-secondary:hover:not(:disabled):not([aria-disabled=true]), .button.button-fill-outlined.button-priority-secondary[data-user-action=hover]:not(:disabled):not([aria-disabled=true]) {
+:where(.button.button-fill-outlined.button-priority-secondary):hover:not(:disabled):not([aria-disabled=true]), :where(.button.button-fill-outlined.button-priority-secondary)[data-user-action=hover]:not(:disabled):not([aria-disabled=true]) {
   background-color: var(--theme-button-color-blue-90, var(--color-blue-90));
   border-color: var(--theme-button-color-cool-gray-90, var(--color-cool-gray-90));
 }
-.button.button-fill-outlined.button-priority-secondary:active:not(:disabled):not([aria-disabled=true]), .button.button-fill-outlined.button-priority-secondary[data-user-action=pressed]:not(:disabled):not([aria-disabled=true]) {
+:where(.button.button-fill-outlined.button-priority-secondary):active:not(:disabled):not([aria-disabled=true]), :where(.button.button-fill-outlined.button-priority-secondary)[data-user-action=pressed]:not(:disabled):not([aria-disabled=true]) {
   background-color: var(--theme-button-secondary-solid-bg, var(--color-blue-95, #e5eeff));
   border-color: var(--theme-button-color-cool-gray-90, var(--color-cool-gray-90));
 }
 
-.button.button-fill-solid.button-priority-tertiary {
+:where(.button.button-fill-solid.button-priority-tertiary) {
   background-color: var(--theme-button-tertiary-solid-bg, var(--color-bg-surface-neutral));
   border-color: var(--theme-button-tertiary-solid-bg, var(--color-bg-surface-neutral));
   color: var(--theme-button-tertiary-solid-foreground, var(--color-label-neutral));
 }
-.button.button-fill-solid.button-priority-tertiary:disabled, .button.button-fill-solid.button-priority-tertiary[aria-disabled=true] {
+:where(.button.button-fill-solid.button-priority-tertiary):disabled, :where(.button.button-fill-solid.button-priority-tertiary)[aria-disabled=true] {
   background-color: var(--theme-button-color-bg-surface-standard, var(--color-bg-surface-standard));
   border-color: var(--theme-button-color-bg-surface-standard, var(--color-bg-surface-standard));
   color: var(--theme-button-color-label-disabled, var(--color-label-disabled));
 }
-.button.button-fill-solid.button-priority-tertiary:hover:not(:disabled):not([aria-disabled=true]), .button.button-fill-solid.button-priority-tertiary[data-user-action=hover]:not(:disabled):not([aria-disabled=true]) {
+:where(.button.button-fill-solid.button-priority-tertiary):hover:not(:disabled):not([aria-disabled=true]), :where(.button.button-fill-solid.button-priority-tertiary)[data-user-action=hover]:not(:disabled):not([aria-disabled=true]) {
   background-color: var(--theme-button-tertiary-solid-hover-bg, var(--color-bg-surface-static-cool-gray));
   border-color: var(--theme-button-tertiary-solid-hover-bg, var(--color-bg-surface-static-cool-gray));
 }
-.button.button-fill-solid.button-priority-tertiary:active:not(:disabled):not([aria-disabled=true]), .button.button-fill-solid.button-priority-tertiary[data-user-action=pressed]:not(:disabled):not([aria-disabled=true]) {
+:where(.button.button-fill-solid.button-priority-tertiary):active:not(:disabled):not([aria-disabled=true]), :where(.button.button-fill-solid.button-priority-tertiary)[data-user-action=pressed]:not(:disabled):not([aria-disabled=true]) {
   background-color: var(--theme-button-tertiary-solid-pressed-bg, var(--color-bg-surface-strong));
   border-color: var(--theme-button-tertiary-solid-pressed-bg, var(--color-bg-surface-strong));
 }
 
-.button.button-fill-outlined.button-priority-tertiary {
+:where(.button.button-fill-outlined.button-priority-tertiary) {
   background-color: transparent;
   color: var(--theme-button-color-cool-gray-10, var(--color-cool-gray-10));
   border-color: var(--theme-button-color-cool-gray-90, var(--color-cool-gray-90));
 }
-.button.button-fill-outlined.button-priority-tertiary:disabled, .button.button-fill-outlined.button-priority-tertiary[aria-disabled=true] {
+:where(.button.button-fill-outlined.button-priority-tertiary):disabled, :where(.button.button-fill-outlined.button-priority-tertiary)[aria-disabled=true] {
   background-color: var(--theme-button-color-bg-surface-standard, var(--color-bg-surface-standard));
   border-color: var(--theme-button-color-bg-surface-standard, var(--color-bg-surface-standard));
   color: var(--theme-button-color-label-disabled, var(--color-label-disabled));
 }
-.button.button-fill-outlined.button-priority-tertiary:hover:not(:disabled):not([aria-disabled=true]), .button.button-fill-outlined.button-priority-tertiary[data-user-action=hover]:not(:disabled):not([aria-disabled=true]) {
+:where(.button.button-fill-outlined.button-priority-tertiary):hover:not(:disabled):not([aria-disabled=true]), :where(.button.button-fill-outlined.button-priority-tertiary)[data-user-action=hover]:not(:disabled):not([aria-disabled=true]) {
   background-color: var(--theme-button-color-cool-gray-95, var(--color-cool-gray-95));
   border-color: var(--theme-button-color-cool-gray-90, var(--color-cool-gray-90));
 }
-.button.button-fill-outlined.button-priority-tertiary:active:not(:disabled):not([aria-disabled=true]), .button.button-fill-outlined.button-priority-tertiary[data-user-action=pressed]:not(:disabled):not([aria-disabled=true]) {
+:where(.button.button-fill-outlined.button-priority-tertiary):active:not(:disabled):not([aria-disabled=true]), :where(.button.button-fill-outlined.button-priority-tertiary)[data-user-action=pressed]:not(:disabled):not([aria-disabled=true]) {
   background-color: var(--theme-button-tertiary-solid-bg, var(--color-bg-surface-neutral));
   border-color: var(--theme-button-color-cool-gray-90, var(--color-cool-gray-90));
 }
 
-.button.button-size-small {
+:where(.button.button-size-small) {
   padding-inline: var(--theme-button-padding-6, var(--spacing-padding-6, 24px));
   gap: var(--theme-button-gap-2, var(--spacing-gap-2, 8px));
   padding-block: var(--theme-button-padding-2, var(--spacing-padding-2, 4px));
   min-height: var(--theme-button-size-small-3, var(--theme-size-small-3, 32px));
   border-radius: var(--theme-button-radius-medium-3, var(--theme-radius-medium-3, 8px));
 }
-.button.button-size-small span {
+:where(.button.button-size-small) span {
   font-size: var(--theme-button-font-label-medium-size, var(--font-label-medium-size, 14px));
   font-weight: var(--theme-button-font-weight, 400);
   line-height: var(--theme-button-font-label-medium-line-height, var(--font-label-medium-line-height, 1.5em));
   letter-spacing: var(--theme-button-font-label-medium-letter-spacing, var(--font-label-medium-letter-spacing, 0px));
 }
 
-.button.button-size-medium {
+:where(.button.button-size-medium) {
   padding-inline: var(--theme-button-padding-7, var(--spacing-padding-7, 20px));
   gap: var(--theme-button-gap-2, var(--spacing-gap-2, 8px));
   padding-block: var(--theme-button-padding-5, var(--spacing-padding-5, 12px));
   min-height: var(--theme-button-size-medium-1, var(--theme-size-medium-1, 40px));
   border-radius: var(--theme-button-radius-medium-3, var(--theme-radius-medium-3, 8px));
 }
-.button.button-size-medium span {
+:where(.button.button-size-medium) span {
   font-size: var(--theme-button-font-label-large-size, var(--font-label-large-size, 16px));
   font-weight: var(--theme-button-font-weight, 400);
   line-height: var(--theme-button-font-label-large-line-height, var(--font-label-large-line-height, 1.5em));
   letter-spacing: var(--theme-button-font-label-large-letter-spacing, var(--font-label-large-letter-spacing, 0px));
 }
 
-.button.button-size-large {
+:where(.button.button-size-large) {
   padding-inline: var(--theme-button-padding-9, var(--spacing-padding-9, 28px));
   gap: var(--theme-button-gap-3, var(--spacing-gap-3, 12px));
   padding-block: var(--theme-button-padding-5, var(--spacing-padding-5, 12px));
   min-height: var(--theme-button-size-medium-2, var(--theme-size-medium-2, 48px));
   border-radius: var(--theme-button-radius-large-1, var(--theme-radius-large-1, 12px));
 }
-.button.button-size-large span {
+:where(.button.button-size-large) span {
   font-size: var(--theme-button-font-body-medium-size, var(--font-body-medium-size, 17px));
   font-weight: var(--theme-button-font-weight, 400);
   line-height: var(--theme-button-font-body-medium-line-height, var(--font-body-medium-line-height, 1.5em));
   letter-spacing: var(--theme-button-font-body-medium-letter-spacing, var(--font-body-medium-letter-spacing, 0px));
 }
 
-.button.button-size-xlarge {
+:where(.button.button-size-xlarge) {
   padding-inline: var(--theme-button-padding-9, var(--spacing-padding-9, 28px));
   gap: var(--theme-button-gap-3, var(--spacing-gap-3, 12px));
   padding-block: var(--theme-button-padding-5, var(--spacing-padding-5, 12px));
   min-height: var(--theme-button-size-medium-3, var(--theme-size-medium-3, 56px));
   border-radius: var(--theme-button-radius-large-2, var(--theme-radius-large-2, 16px));
 }
-.button.button-size-xlarge span {
+:where(.button.button-size-xlarge) span {
   font-size: var(--theme-button-font-body-large-size, var(--font-body-large-size, 19px));
   font-weight: var(--theme-button-font-weight, 400);
   line-height: var(--theme-button-font-body-large-line-height, var(--font-body-large-line-height, 1.5em));
   letter-spacing: var(--theme-button-font-body-large-letter-spacing, var(--font-body-large-letter-spacing, 0px));
 }
 
-.button.button-fill-outlined {
+:where(.button.button-fill-outlined) {
   box-shadow: none;
 }
 
-.button.button-fill-solid.button-priority-secondary:hover:not(:disabled):not([aria-disabled=true]), .button.button-fill-solid.button-priority-secondary[data-user-action=hover]:not(:disabled):not([aria-disabled=true]) {
+:where(.button.button-fill-solid.button-priority-secondary):hover:not(:disabled):not([aria-disabled=true]), :where(.button.button-fill-solid.button-priority-secondary)[data-user-action=hover]:not(:disabled):not([aria-disabled=true]) {
   background-color: transparent;
   border-color: transparent;
   box-shadow: inset 0 0 0 999px rgba(255, 255, 255, 0);
 }
-.button.button-fill-solid.button-priority-secondary:active:not(:disabled):not([aria-disabled=true]), .button.button-fill-solid.button-priority-secondary[data-user-action=pressed]:not(:disabled):not([aria-disabled=true]) {
+:where(.button.button-fill-solid.button-priority-secondary):active:not(:disabled):not([aria-disabled=true]), :where(.button.button-fill-solid.button-priority-secondary)[data-user-action=pressed]:not(:disabled):not([aria-disabled=true]) {
   background-color: transparent;
   border-color: transparent;
   box-shadow: inset 0 0 0 999px rgba(255, 255, 255, 0);
@@ -669,67 +743,67 @@
   box-shadow: none;
 }
 
-.button.button-fill-solid.button-priority-tertiary:hover:not(:disabled):not([aria-disabled=true]), .button.button-fill-solid.button-priority-tertiary[data-user-action=hover]:not(:disabled):not([aria-disabled=true]) {
+:where(.button.button-fill-solid.button-priority-tertiary):hover:not(:disabled):not([aria-disabled=true]), :where(.button.button-fill-solid.button-priority-tertiary)[data-user-action=hover]:not(:disabled):not([aria-disabled=true]) {
   background-color: var(--color-border-standard-strong, var(--color-bg-surface-strong));
   border-color: var(--theme-button-tertiary-solid-bg, var(--color-bg-surface-neutral));
   box-shadow: inset 0 0 0 999px rgba(255, 255, 255, 0.68);
 }
-.button.button-fill-solid.button-priority-tertiary:active:not(:disabled):not([aria-disabled=true]), .button.button-fill-solid.button-priority-tertiary[data-user-action=pressed]:not(:disabled):not([aria-disabled=true]) {
+:where(.button.button-fill-solid.button-priority-tertiary):active:not(:disabled):not([aria-disabled=true]), :where(.button.button-fill-solid.button-priority-tertiary)[data-user-action=pressed]:not(:disabled):not([aria-disabled=true]) {
   background-color: var(--color-border-standard-strong, var(--color-bg-surface-strong));
   border-color: var(--theme-button-tertiary-solid-bg, var(--color-bg-surface-neutral));
   box-shadow: inset 0 0 0 999px rgba(255, 255, 255, 0.48);
 }
 
-.button.button-fill-outlined.button-priority-primary:hover:not(:disabled):not([aria-disabled=true]), .button.button-fill-outlined.button-priority-primary[data-user-action=hover]:not(:disabled):not([aria-disabled=true]) {
+:where(.button.button-fill-outlined.button-priority-primary):hover:not(:disabled):not([aria-disabled=true]), :where(.button.button-fill-outlined.button-priority-primary)[data-user-action=hover]:not(:disabled):not([aria-disabled=true]) {
   background-color: var(--theme-button-overlay-outlined-primary-bg, var(--color-blue-90));
   border-color: var(--theme-button-color-primary-default, var(--color-primary-default));
   box-shadow: inset 0 0 0 999px rgba(255, 255, 255, 0.68);
 }
-.button.button-fill-outlined.button-priority-primary:active:not(:disabled):not([aria-disabled=true]), .button.button-fill-outlined.button-priority-primary[data-user-action=pressed]:not(:disabled):not([aria-disabled=true]) {
+:where(.button.button-fill-outlined.button-priority-primary):active:not(:disabled):not([aria-disabled=true]), :where(.button.button-fill-outlined.button-priority-primary)[data-user-action=pressed]:not(:disabled):not([aria-disabled=true]) {
   background-color: var(--theme-button-overlay-outlined-primary-bg, var(--color-blue-90));
   border-color: var(--theme-button-color-primary-default, var(--color-primary-default));
   box-shadow: inset 0 0 0 999px rgba(255, 255, 255, 0.28);
 }
 
-.button.button-fill-outlined.button-priority-secondary:hover:not(:disabled):not([aria-disabled=true]), .button.button-fill-outlined.button-priority-secondary[data-user-action=hover]:not(:disabled):not([aria-disabled=true]) {
+:where(.button.button-fill-outlined.button-priority-secondary):hover:not(:disabled):not([aria-disabled=true]), :where(.button.button-fill-outlined.button-priority-secondary)[data-user-action=hover]:not(:disabled):not([aria-disabled=true]) {
   background-color: var(--theme-button-overlay-outlined-secondary-bg, var(--color-cool-gray-95));
   border-color: var(--theme-button-color-cool-gray-90, var(--color-cool-gray-90));
   box-shadow: inset 0 0 0 999px rgba(255, 255, 255, 0.68);
 }
-.button.button-fill-outlined.button-priority-secondary:active:not(:disabled):not([aria-disabled=true]), .button.button-fill-outlined.button-priority-secondary[data-user-action=pressed]:not(:disabled):not([aria-disabled=true]) {
+:where(.button.button-fill-outlined.button-priority-secondary):active:not(:disabled):not([aria-disabled=true]), :where(.button.button-fill-outlined.button-priority-secondary)[data-user-action=pressed]:not(:disabled):not([aria-disabled=true]) {
   background-color: var(--theme-button-overlay-outlined-secondary-bg, var(--color-cool-gray-95));
   border-color: var(--theme-button-color-cool-gray-90, var(--color-cool-gray-90));
   box-shadow: inset 0 0 0 999px rgba(255, 255, 255, 0.28);
 }
 
-.button.button-fill-outlined.button-priority-tertiary:hover:not(:disabled):not([aria-disabled=true]), .button.button-fill-outlined.button-priority-tertiary[data-user-action=hover]:not(:disabled):not([aria-disabled=true]) {
+:where(.button.button-fill-outlined.button-priority-tertiary):hover:not(:disabled):not([aria-disabled=true]), :where(.button.button-fill-outlined.button-priority-tertiary)[data-user-action=hover]:not(:disabled):not([aria-disabled=true]) {
   background-color: var(--theme-button-overlay-outlined-tertiary-bg, var(--color-cool-gray-95));
   border-color: var(--theme-button-color-cool-gray-90, var(--color-cool-gray-90));
   box-shadow: inset 0 0 0 999px rgba(255, 255, 255, 0.68);
 }
-.button.button-fill-outlined.button-priority-tertiary:active:not(:disabled):not([aria-disabled=true]), .button.button-fill-outlined.button-priority-tertiary[data-user-action=pressed]:not(:disabled):not([aria-disabled=true]) {
+:where(.button.button-fill-outlined.button-priority-tertiary):active:not(:disabled):not([aria-disabled=true]), :where(.button.button-fill-outlined.button-priority-tertiary)[data-user-action=pressed]:not(:disabled):not([aria-disabled=true]) {
   background-color: var(--theme-button-overlay-outlined-tertiary-bg, var(--color-cool-gray-95));
   border-color: var(--theme-button-color-cool-gray-90, var(--color-cool-gray-90));
   box-shadow: inset 0 0 0 999px rgba(255, 255, 255, 0.28);
 }
 
-.button:disabled,
-.button[aria-disabled=true] {
+:where(.button:disabled),
+:where(.button[aria-disabled=true]) {
   background-color: var(--theme-button-color-bg-surface-standard, var(--color-bg-surface-standard));
   border-color: var(--theme-button-color-bg-surface-standard, var(--color-bg-surface-standard));
   color: var(--theme-button-color-label-disabled, var(--color-label-disabled));
   cursor: not-allowed;
 }
 
-.button.button-icon-left .button-label {
+:where(.button.button-icon-left) .button-label {
   margin-left: var(--theme-button-gap-1, var(--spacing-gap-1, 4px));
 }
 
-.button.button-icon-right .button-label {
+:where(.button.button-icon-right) .button-label {
   margin-right: var(--theme-button-gap-1, var(--spacing-gap-1, 4px));
 }
 
-.button.button-template-text {
+:where(.button.button-template-text) {
   min-width: auto;
   border-color: transparent;
   background-color: transparent;
@@ -740,66 +814,66 @@
   border-radius: var(--theme-button-text-radius, var(--theme-radius-small, 4px));
 }
 
-.button.button-template-text-size-small {
+:where(.button.button-template-text-size-small) {
   min-height: var(--theme-button-text-min-height-small, var(--theme-size-small-1, 20px));
   padding-inline: var(--theme-button-text-padding-inline-small, var(--spacing-padding-4, 8px));
 }
 
-.button.button-template-text-size-medium {
+:where(.button.button-template-text-size-medium) {
   min-height: var(--theme-button-text-min-height-medium, var(--theme-size-small-2, 24px));
   padding-inline: var(--theme-button-text-padding-inline-medium, var(--spacing-padding-5, 12px));
 }
 
-.button.button-template-text-size-large {
+:where(.button.button-template-text-size-large) {
   min-height: var(--theme-button-text-min-height-large, var(--theme-size-small-3, 32px));
   padding-inline: var(--theme-button-text-padding-inline-large, var(--spacing-padding-5, 12px));
 }
 
-.button.button-template-text:disabled {
+:where(.button.button-template-text:disabled) {
   background-color: transparent;
   border-color: transparent;
 }
 
-.button.button-template-text.button-priority-secondary {
+:where(.button.button-template-text.button-priority-secondary) {
   color: var(--theme-button-color-primary-default, var(--color-primary-default));
 }
-.button.button-template-text.button-priority-secondary:hover:not(:disabled), .button.button-template-text.button-priority-secondary[data-user-action=hover]:not(:disabled) {
+:where(.button.button-template-text.button-priority-secondary):hover:not(:disabled), :where(.button.button-template-text.button-priority-secondary)[data-user-action=hover]:not(:disabled) {
   background-color: var(--color-bg-alternative-cool-gray, var(--color-cool-gray-95));
 }
-.button.button-template-text.button-priority-secondary:active:not(:disabled), .button.button-template-text.button-priority-secondary[data-user-action=pressed]:not(:disabled) {
+:where(.button.button-template-text.button-priority-secondary):active:not(:disabled), :where(.button.button-template-text.button-priority-secondary)[data-user-action=pressed]:not(:disabled) {
   background-color: var(--color-secondary-strong, var(--color-blue-90));
 }
 
-.button.button-template-text.button-priority-tertiary {
+:where(.button.button-template-text.button-priority-tertiary) {
   color: var(--theme-button-color-cool-gray-10, var(--color-cool-gray-10));
 }
-.button.button-template-text.button-priority-tertiary:hover:not(:disabled), .button.button-template-text.button-priority-tertiary[data-user-action=hover]:not(:disabled) {
+:where(.button.button-template-text.button-priority-tertiary):hover:not(:disabled), :where(.button.button-template-text.button-priority-tertiary)[data-user-action=hover]:not(:disabled) {
   background-color: var(--color-bg-alternative-cool-gray, var(--color-cool-gray-95));
 }
-.button.button-template-text.button-priority-tertiary:active:not(:disabled), .button.button-template-text.button-priority-tertiary[data-user-action=pressed]:not(:disabled) {
+:where(.button.button-template-text.button-priority-tertiary):active:not(:disabled), :where(.button.button-template-text.button-priority-tertiary)[data-user-action=pressed]:not(:disabled) {
   background-color: var(--color-bg-surface-strong, var(--color-cool-gray-20));
 }
 
-.button.button-template-round {
+:where(.button.button-template-round) {
   min-width: auto;
   padding-block: var(--theme-button-round-padding-block, var(--spacing-padding-2, 4px));
   padding-inline: var(--theme-button-round-padding-inline-medium, var(--spacing-padding-6, 16px));
   gap: var(--spacing-gap-2, 8px);
 }
 
-.button.button-template-round-size-small {
+:where(.button.button-template-round-size-small) {
   min-height: var(--theme-button-round-min-height-small, var(--theme-size-small-2, 24px));
   padding-inline: var(--theme-button-round-padding-inline-small, var(--spacing-padding-5, 12px));
   border-radius: var(--theme-button-round-radius-small, var(--theme-radius-xlarge-2, 16px));
 }
 
-.button.button-template-round-size-medium {
+:where(.button.button-template-round-size-medium) {
   min-height: var(--theme-button-round-min-height-medium, var(--theme-size-small-3, 32px));
   padding-inline: var(--theme-button-round-padding-inline-medium, var(--spacing-padding-6, 16px));
   border-radius: var(--theme-button-round-radius-medium, var(--theme-radius-xlarge-2, 16px));
 }
 
-.button.button-template-round-size-large {
+:where(.button.button-template-round-size-large) {
   min-height: var(--theme-button-round-min-height-large, var(--theme-size-medium-1, 40px));
   padding-inline: var(--theme-button-round-padding-inline-large, var(--spacing-padding-7, 20px));
   border-radius: var(--theme-button-round-radius-large, 30px);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniai-fe/uds-primitives",
-  "version": "0.1.8",
+  "version": "0.1.10",
   "description": "UNIAI Design System; Primitives Components Package",
   "type": "module",
   "private": false,
@@ -14,7 +14,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "packageManager": "pnpm@10.27.0",
+  "packageManager": "pnpm@10.28.0",
   "engines": {
     "node": ">=24",
     "pnpm": ">=10"
@@ -61,9 +61,9 @@
     "react-hook-form": "^7"
   },
   "dependencies": {
-    "@mantine/core": "^8.3.11",
-    "@mantine/dates": "^8.3.11",
-    "@mantine/hooks": "^8.3.11",
+    "@mantine/core": "^8.3.12",
+    "@mantine/dates": "^8.3.12",
+    "@mantine/hooks": "^8.3.12",
     "@radix-ui/react-checkbox": "^1.3.3",
     "@radix-ui/react-tabs": "^1.1.13",
     "@radix-ui/react-toggle-group": "^1.1.11",
@@ -77,7 +77,7 @@
     "@radix-ui/react-visually-hidden": "^1.2.4",
     "@svgr/webpack": "^8.1.0",
     "@types/node": "^24.10.2",
-    "@types/react": "^19.2.7",
+    "@types/react": "^19.2.8",
     "@types/react-dom": "^19.2.3",
     "@uniai-fe/eslint-config": "workspace:*",
     "@uniai-fe/next-devkit": "workspace:*",
@@ -86,7 +86,7 @@
     "@uniai-fe/util-functions": "workspace:*",
     "eslint": "^9.39.2",
     "prettier": "^3.7.4",
-    "react-hook-form": "^7.70.0",
+    "react-hook-form": "^7.71.0",
     "sass": "^1.97.2",
     "typescript": "~5.9.3"
   }

package/src/components/alternate/img/spinner-large-52x52.svg

@@ -0,0 +1,9 @@
+<svg width="52" height="52" viewBox="0 0 52 52" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="26" cy="26" r="24" stroke="url(#paint0_linear_748_639)" stroke-width="4"/>
+<defs>
+<linearGradient id="paint0_linear_748_639" x1="13.5" y1="3.34936" x2="39" y2="47.5167" gradientUnits="userSpaceOnUse">
+<stop stop-color="#1A6AFF"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+</defs>
+</svg>

package/src/components/alternate/img/spinner-medium-36x36.svg

@@ -0,0 +1,9 @@
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="18" cy="18" r="16" stroke="url(#paint0_linear_748_634)" stroke-width="4"/>
+<defs>
+<linearGradient id="paint0_linear_748_634" x1="9.66667" y1="2.89958" x2="26.6667" y2="32.3444" gradientUnits="userSpaceOnUse">
+<stop stop-color="#1A6AFF"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+</defs>
+</svg>

package/src/components/alternate/img/spinner-small-24x24.svg

@@ -0,0 +1,9 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="12" cy="12" r="10" stroke="url(#paint0_linear_748_642)" stroke-width="4"/>
+<defs>
+<linearGradient id="paint0_linear_748_642" x1="6.79167" y1="2.56224" x2="17.4167" y2="20.9653" gradientUnits="userSpaceOnUse">
+<stop stop-color="#1A6AFF"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+</defs>
+</svg>

package/src/components/alternate/index.scss

@@ -1 +1 @@
-@use "./styles/index.scss";
+@use "./styles/index";