@uniai-fe/uds-primitives 0.2.1 → 0.2.3

package/README.md

@@ -140,7 +140,7 @@ import "@uniai-fe/uds-primitives/css";
 
 ThemeProvider는 CSS를 import하지 않으므로 foundation/primitives styles를 앱 루트에서 1회만 로드하면 중복 없이 토큰 매핑이 적용된다. Provider 자체는 foundation 패키지(`@uniai-fe/uds-foundation/provider`)에서만 export된다(one-source 규칙).
 
-> modules 레포 내부(Storybook 등)에서는 개발 편의를 위해 `@uniai-fe/uds-primitives/src/index.scss`를 직접 import하지만, 외부 서비스/패키지는 `@uniai-fe/uds-primitives/css` 엔트리만 사용한다.
+> modules 레포 내부(Storybook 등)에서는 개발 편의를 위해 `@uniai-fe/uds-primitives/styles` 엔트리를 import하지만, 외부 서비스/패키지는 `@uniai-fe/uds-primitives/css` 엔트리만 사용한다.
 
 ### 토큰 스코프 & ThemeProvider
 

package/dist/styles.css

@@ -11,6 +11,9 @@
   --theme-badge-line-height: var(--font-caption-medium-line-height, 1.5);
   --theme-badge-letter-spacing: var(--font-caption-medium-letter-spacing, 0);
   --theme-badge-dot-size: var(--spacing-gap-3, 8px);
+  /* layout presets */
+  --button-width: fit-content;
+  --button-flex: 0 0 auto;
   /* default button spacing (size 기반) */
   --button-default-gap-small: var(--spacing-gap-1);
   --button-default-gap-medium: var(--spacing-gap-2);
@@ -225,6 +228,9 @@
   --dropdown-option-height-small: var(--theme-size-medium-1, 40px);
   --dropdown-option-height-medium: var(--theme-size-medium-2, 48px);
   --dropdown-option-height-large: var(--theme-size-medium-3, 56px);
+  /* Layout presets */
+  --input-width: 100%;
+  --input-flex: 0 1 auto;
   /* Input sizing tokens; Button 변수 규칙과 동일한 prefix 패턴을 맞춘다. */
   --input-default-height-small: var(--theme-size-medium-1);
   --input-default-height-medium: var(--theme-size-medium-2);
@@ -260,6 +266,9 @@
   --input-surface-color: var(--color-common-100);
   --input-surface-muted-color: var(--color-neutral-99);
   --input-surface-disabled-color: var(--color-neutral-95);
+  /* layout presets */
+  --select-width: 100%;
+  --select-flex: 0 1 auto;
   --select-primary-height-small: var(--input-default-height-small);
   --select-primary-height-medium: var(--input-default-height-medium);
   --select-primary-height-large: var(--input-default-height-large);
@@ -644,7 +653,8 @@
   align-items: center;
   justify-content: center;
   gap: var(--button-default-gap-medium, var(--spacing-gap-2, 8px));
-  width: fit-content;
+  width: var(--button-width);
+  flex: var(--button-flex);
   min-width: var(--button-default-width-min-base, var(--theme-size-small-2, 24px));
   min-height: var(--button-min-height, auto);
   padding-inline: var(--button-padding-inline, var(--button-default-padding-inline-base, var(--spacing-padding-4, 16px)));
@@ -672,8 +682,24 @@
   align-items: center;
   justify-content: center;
 }
-.button.button-block {
-  width: 100%;
+.button[data-width=auto] {
+  --button-width: auto;
+  --button-flex: 0 1 auto;
+}
+.button[data-width=fill] {
+  --button-width: auto;
+  --button-flex: 1 1 0%;
+}
+.button[data-width=full], .button.button-block {
+  --button-width: 100%;
+  --button-flex: 0 0 100%;
+}
+.button[data-width=fit] {
+  --button-width: fit-content;
+  --button-flex: 0 0 auto;
+}
+.button[data-width=custom] {
+  --button-flex: 0 0 auto;
 }
 .button:not(.button-fill-solid):not(.button-fill-outlined) {
   background-color: transparent;
@@ -985,6 +1011,260 @@
   border-radius: var(--button-round-radius-large, 30px);
 }
 
+.calendar-root {
+  width: fit-content;
+  max-width: 100%;
+}
+
+.calendar-trigger {
+  width: 100%;
+}
+
+.calendar-container {
+  display: grid;
+  gap: var(--spacing-gap-3);
+  width: fit-content;
+  max-width: 100%;
+}
+
+.calendar-body,
+.calendar-grid {
+  width: fit-content;
+  max-width: 100%;
+}
+
+.calendar-root,
+.calendar-grid {
+  --calendar-width: 375px;
+  --calendar-inline-padding: var(--spacing-padding-6);
+  --calendar-body-width: calc(
+    var(--calendar-width) - (var(--calendar-inline-padding) * 2)
+  );
+}
+
+.calendar-root {
+  padding: var(--spacing-padding-10) var(--spacing-padding-6) var(--spacing-padding-6);
+  display: grid;
+  gap: var(--spacing-gap-3);
+  width: var(--calendar-width);
+  min-width: var(--calendar-width);
+  max-width: min(100vw - var(--spacing-padding-5) * 2, 420px);
+  box-sizing: border-box;
+  z-index: 30;
+}
+
+.calendar-header {
+  margin-bottom: var(--spacing-gap-2);
+}
+
+.calendar-body {
+  display: grid;
+  gap: var(--spacing-gap-5);
+}
+
+.calendar-grid {
+  width: var(--calendar-body-width);
+}
+
+.calendar-grid table {
+  width: auto;
+}
+
+.calendar-month-level {
+  width: 100%;
+}
+
+.calendar-month-level > [data-month-level=true],
+.calendar-month-level > [data-year-level=true],
+.calendar-month-level > [data-decade-level=true] {
+  width: 100%;
+}
+
+.calendar-header-row {
+  display: grid;
+  grid-template-columns: 44px 1fr 44px;
+  align-items: center;
+  width: 100%;
+  max-width: none;
+  column-gap: var(--spacing-gap-5);
+  padding: 0 var(--spacing-padding-9);
+  margin-bottom: var(--spacing-gap-5);
+  --dch-fz: var(--font-heading-small-size) !important;
+}
+
+.calendar-header-control {
+  width: 44px;
+  height: 44px;
+  border-radius: 999px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-label-alternative);
+  transition: background-color 0.2s ease, color 0.2s ease;
+}
+
+.calendar-header-control[data-direction=previous] {
+  justify-self: start;
+}
+
+.calendar-header-control[data-direction=next] {
+  justify-self: end;
+}
+
+.calendar-header-level {
+  justify-self: center;
+  font-size: var(--font-heading-small-size);
+  font-weight: var(--font-heading-small-weight);
+  text-align: center;
+  white-space: nowrap;
+  writing-mode: horizontal-tb;
+  letter-spacing: 0.2px;
+  /* Month/Year 헤더 텍스트는 디자인 기준에 맞춰 strong 컬러를 사용한다. */
+  color: var(--color-label-strong);
+}
+
+.calendar-header-control:where(:not([data-disabled=true])):hover {
+  background-color: var(--color-tertiary-default);
+  color: var(--color-label-standard);
+}
+
+.calendar-month-table {
+  width: 100%;
+  max-width: 100%;
+  margin: 0 auto;
+  table-layout: fixed;
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+.calendar-month-cell {
+  width: 46px;
+  padding: 1px;
+}
+
+.calendar-months-list {
+  width: 100%;
+  max-width: 100%;
+  margin: 0 auto;
+  table-layout: fixed;
+  border-collapse: separate;
+  border-spacing: var(--spacing-gap-3);
+}
+
+.calendar-months-list-cell {
+  padding: 0;
+}
+
+.calendar-months-list-control {
+  width: 100%;
+  min-width: 0;
+  height: 44px;
+  padding: 0 var(--spacing-padding-2);
+  border: none;
+  border-radius: var(--theme-radius-medium-3);
+  font-size: var(--font-body-medium-size);
+  font-weight: var(--font-body-medium-weight);
+  line-height: 1.5;
+  color: var(--color-label-standard);
+  text-transform: none;
+}
+
+.calendar-months-list-control[data-selected=true] {
+  background-color: var(--color-primary-default);
+  color: var(--color-common-100);
+}
+
+.calendar-months-list-control:where(:not([data-disabled=true], [data-selected=true])):hover {
+  background-color: var(--color-secondary-default);
+}
+
+.calendar-years-list {
+  width: 100%;
+  max-width: 100%;
+  margin: 0 auto;
+  table-layout: fixed;
+  border-collapse: separate;
+  border-spacing: var(--spacing-gap-3);
+}
+
+.calendar-years-list-cell {
+  padding: 0;
+}
+
+.calendar-years-list-control {
+  width: 100%;
+  min-width: 0;
+  height: 44px;
+  padding: 0 var(--spacing-padding-2);
+  border: none;
+  border-radius: var(--theme-radius-medium-3);
+  font-size: var(--font-body-medium-size);
+  font-weight: var(--font-body-medium-weight);
+  line-height: 1.5;
+  color: var(--color-label-standard);
+  text-transform: none;
+}
+
+.calendar-years-list-control[data-selected=true] {
+  background-color: var(--color-primary-default);
+  color: var(--color-common-100);
+}
+
+.calendar-years-list-control:where(:not([data-disabled=true], [data-selected=true])):hover {
+  background-color: var(--color-secondary-default);
+}
+
+.calendar-weekdays {
+  text-transform: none;
+  --wr-fz: var(--font-heading-xxsmall-size) !important;
+  --wr-spacing: 10px !important;
+}
+
+.calendar-weekday {
+  text-transform: none;
+  width: 46px;
+  min-width: 46px;
+  height: 30px;
+  padding-bottom: 5px;
+  font-size: var(--font-heading-xxsmall-size);
+  font-weight: var(--font-heading-xxsmall-weight);
+  line-height: 1.5;
+  letter-spacing: 0.2px;
+  color: var(--color-label-alternative);
+  text-align: center;
+  vertical-align: middle;
+}
+
+.calendar-day {
+  width: 44px;
+  height: 44px;
+  padding: 0;
+  border: none;
+  border-radius: var(--theme-radius-large-1);
+  font-size: var(--font-body-medium-size);
+  color: var(--color-label-standard);
+}
+
+.calendar-day[data-outside=true] {
+  color: var(--color-label-alternative);
+}
+
+.calendar-day[data-selected=true],
+.calendar-day[data-focused=true] {
+  background-color: var(--color-primary-default);
+  color: var(--color-common-100);
+}
+
+.calendar-day:where(:not([data-disabled=true])):hover {
+  background-color: var(--color-secondary-default);
+  color: var(--color-label-standard);
+  border: none;
+}
+
+.calendar-footer {
+  width: 100%;
+}
+
 
 
 .checkbox {
@@ -1597,15 +1877,64 @@ figure.chip {
   padding: 0;
 }
 
+.pop-over-content {
+  position: relative;
+  z-index: 50;
+  outline: none;
+}
+
+.pop-over-content {
+  width: fit-content;
+  max-width: min(100vw - 24px, max-content);
+  box-sizing: border-box;
+  background-color: var(--color-common-100);
+  border-radius: var(--theme-radius-large-2);
+  overflow: hidden;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.16), 0 0 2px rgba(0, 0, 0, 0.12);
+}
+
+.pop-over-content[data-width=match] {
+  width: var(--radix-popover-trigger-width);
+}
+
+.pop-over-content[data-width=fit-content] {
+  width: fit-content;
+}
+
+.pop-over-content[data-width=max-content] {
+  width: max-content;
+}
+
 
 
 .input {
   display: flex;
   flex-direction: column;
   gap: var(--spacing-gap-3);
-  width: 100%;
+  width: var(--input-width);
+  flex: var(--input-flex);
+  min-width: 0;
+}
+.input[data-width=auto] {
+  --input-width: auto;
+  --input-flex: 0 1 auto;
+}
+.input[data-width=fill] {
+  --input-width: auto;
+  --input-flex: 1 1 0%;
+}
+.input[data-width=full], .input[data-block=true] {
+  --input-width: 100%;
+  --input-flex: 0 0 100%;
+}
+.input[data-width=fit] {
+  --input-width: fit-content;
+  --input-flex: 0 0 auto;
+}
+.input[data-width=custom] {
+  --input-flex: 0 0 auto;
 }
-.input[data-block=true], .input--block {
+.input--block {
   width: 100%;
 }
 
@@ -1972,110 +2301,68 @@ figure.chip {
   font-weight: var(--font-body-xxsmall-weight);
 }
 
-.input-calendar {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-gap-6, 20px);
-  width: 100%;
-}
-.input-calendar[data-disabled=true] {
-  opacity: 0.6;
-}
-
-.input-calendar-container {
-  background-color: var(--color-common-100, #fff);
-  border-radius: var(--theme-radius-large-3, 16px);
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.16), 0 0 2px rgba(0, 0, 0, 0.12);
-  padding: var(--spacing-padding-10, 32px) var(--spacing-padding-6, 16px) var(--spacing-padding-6, 16px);
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-gap-5, 16px);
-}
-
-.input-calendar-root {
+.input-date-field {
+  display: grid;
+  gap: var(--spacing-gap-5);
   width: 100%;
 }
 
-.input-calendar-panel {
+.input-date-trigger-input {
   width: 100%;
-  border-radius: var(--theme-radius-large-1, 12px);
-  background-color: transparent;
 }
 
-.input-calendar-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding-inline: var(--spacing-padding-6, 16px);
-  margin-bottom: var(--spacing-gap-4, 12px);
-}
-
-.input-calendar-header-control {
-  width: 24px;
-  height: 24px;
+.input-date-trigger-icon {
+  margin: 0;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  border-radius: 999px;
-  background: transparent;
-  color: var(--color-label-strong, #18191b);
-}
-
-.input-calendar-header-level {
-  font-size: var(--font-heading-small-size, 19px);
-  font-weight: var(--font-heading-small-weight, 600);
+  width: 28px;
+  height: 28px;
+  color: var(--color-label-alternative);
+  pointer-events: none;
 }
 
-.input-calendar-weekdays {
+.input-date-footer-template {
   display: grid;
-  grid-template-columns: repeat(7, minmax(0, 1fr));
-  padding-bottom: var(--spacing-padding-2, 4px);
+  gap: var(--spacing-gap-5);
+  width: 100%;
 }
 
-.input-calendar-weekday {
-  text-transform: none;
-  font-size: var(--font-heading-xxsmall-size, 15px);
-  color: var(--color-label-alternative, #afb1b6);
-  text-align: center;
+.input-date-footer-util {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-gap-3);
+  width: 100%;
 }
 
-.input-calendar-day {
-  width: 44px;
-  height: 44px;
-  border-radius: var(--theme-radius-large-1, 12px);
-  justify-self: center;
-  font-size: var(--font-body-medium-size, 17px);
-  color: var(--color-label-strong, #3d3f43);
+.input-date-action-button {
+  width: auto;
 }
 
-.input-calendar-footer {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-gap-4, 12px);
+.input-date-apply-button {
   width: 100%;
 }
 
-.input-calendar-footer-actions {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--spacing-gap-3, 8px);
+.input-address-container {
+  width: 100%;
 }
 
-.input-calendar-action-button {
+.input-address-row {
   width: 100%;
+  display: flex;
+  gap: var(--spacing-gap-5);
 }
 
-.input-calendar-footer-actions > :first-child {
-  flex: 1 1 auto;
+.input-address-lower {
+  margin-top: var(--spacing-gap-5);
 }
 
-.input-calendar-footer-actions > :last-child {
-  flex: 1 1 auto;
-  justify-content: flex-end;
+.input-address-upper {
+  align-items: center;
 }
 
-.input-calendar-apply {
+.input-address-field {
   width: 100%;
 }
 
@@ -2084,13 +2371,36 @@ figure.chip {
 
 .select {
   display: flex;
-  width: 100%;
+  width: var(--select-width);
+  flex: var(--select-flex);
   flex-direction: column;
   gap: var(--spacing-gap-2);
+  min-width: 0;
+}
+
+.select[data-width=auto] {
+  --select-width: auto;
+  --select-flex: 0 1 auto;
 }
 
+.select[data-width=fill] {
+  --select-width: auto;
+  --select-flex: 1 1 0%;
+}
+
+.select[data-width=full],
 .select-block {
-  width: 100%;
+  --select-width: 100%;
+  --select-flex: 0 0 100%;
+}
+
+.select[data-width=fit] {
+  --select-width: fit-content;
+  --select-flex: 0 0 auto;
+}
+
+.select[data-width=custom] {
+  --select-flex: 0 0 auto;
 }
 
 .select-button {

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "@uniai-fe/uds-primitives",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "description": "UNIAI Design System; Primitives Components Package",
   "type": "module",
   "private": false,
   "sideEffects": [
     "./src/**/*.scss",
-    "./src/theme/**/*.scss",
-    "./styles.scss"
+    "./styles.scss",
+    "./src/**/*.css",
+    "./src/init/*.ts"
   ],
   "license": "MIT",
   "homepage": "https://www.uniai.co.kr/",
@@ -36,6 +37,8 @@
     "./styles": "./styles.scss",
     "./css": "./dist/styles.css",
     "./init/dayjs": "./src/init/dayjs",
+    "./init/mantine": "./src/init/mantine",
+    "./mantine-style": "./src/init/mantine.css",
     "./*": "./src/*"
   },
   "scripts": {
@@ -53,25 +56,31 @@
     "design-primitives:dev": "pnpm run dev"
   },
   "peerDependencies": {
-    "@radix-ui/react-visually-hidden": "^1.2.4",
+    "@mantine/core": "^8",
+    "@mantine/dates": "^8",
+    "@mantine/hooks": "^8",
     "@uniai-fe/uds-foundation": "^0.1.0",
     "@uniai-fe/util-functions": "^0.2.3",
     "react": "^19",
+    "react-daum-postcode": "^3",
     "react-dom": "^19",
     "react-hook-form": "^7"
   },
   "dependencies": {
-    "@mantine/dates": "^8.3.14",
-    "@mantine/hooks": "^8.3.14",
     "@radix-ui/react-checkbox": "^1.3.3",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-popover": "^1.1.15",
     "@radix-ui/react-radio-group": "^1.3.8",
     "@radix-ui/react-tabs": "^1.1.13",
+    "@radix-ui/react-visually-hidden": "^1.2.4",
     "clsx": "^2.1.1",
-    "dayjs": "^1.11.19"
+    "dayjs": "^1.11.19",
+    "react-daum-postcode": "^3.2.0"
   },
   "devDependencies": {
-    "@radix-ui/react-visually-hidden": "^1.2.4",
+    "@mantine/core": "^8.3.14",
+    "@mantine/dates": "^8.3.14",
+    "@mantine/hooks": "^8.3.14",
     "@svgr/webpack": "^8.1.0",
     "@types/node": "^24.10.2",
     "@types/react": "^19.2.11",

package/src/components/button/index.tsx

@@ -5,8 +5,6 @@ import "./index.scss";
 
 import { ButtonDefault, ButtonText, ButtonRounded } from "./markup";
 
-export { ButtonDefault, ButtonText, ButtonRounded };
-
 export const Button = {
   Default: ButtonDefault,
   Text: ButtonText,

package/src/components/button/markup/Base.tsx

@@ -4,6 +4,10 @@ import clsx from "clsx";
 import { forwardRef } from "react";
 import type { ButtonProps } from "../types";
 import { SlotComponent } from "../../slot";
+import {
+  getFormFieldWidthAttr,
+  getFormFieldWidthValue,
+} from "../../form/utils/form-field";
 
 /**
  * uds-foundation 토큰 위에서 block/layout/priority/slot API를 제공하는 기본 Button 컴포넌트.
@@ -41,6 +45,7 @@ const ButtonDefault = forwardRef<HTMLElement, ButtonProps>(
       priority,
       state: stateProp = "default",
       block = false,
+      width,
       loading = false,
       className,
       type: typeProp,
@@ -65,6 +70,20 @@ const ButtonDefault = forwardRef<HTMLElement, ButtonProps>(
             "aria-disabled": isDisabled || undefined,
           };
 
+    const widthAttr =
+      width !== undefined
+        ? getFormFieldWidthAttr(width)
+        : block
+          ? "full"
+          : undefined;
+    const widthValue =
+      width !== undefined ? getFormFieldWidthValue(width) : undefined;
+    const { style, ...elementRestProps } = restProps;
+    const mergedStyle =
+      widthValue !== undefined
+        ? { ...(style ?? {}), ["--button-width" as const]: widthValue }
+        : style;
+
     return (
       <SlotComponent
         className={clsx(
@@ -83,8 +102,10 @@ const ButtonDefault = forwardRef<HTMLElement, ButtonProps>(
         ref={forwardedRef}
         aria-busy={loading || undefined}
         data-user-action={userAction}
+        data-width={widthAttr}
+        style={mergedStyle}
         {...elementSpecificProps}
-        {...restProps}
+        {...elementRestProps}
       >
         {left && (
           <span className="button-left" data-slot="left">