@uniai-fe/uds-primitives 0.2.1 → 0.2.3

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

@@ -1,12 +1,35 @@
 .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/src/components/select/styles/variables.scss

@@ -1,5 +1,9 @@
 /* Select tokens mapped to Input primary tokens for visual parity */
 :root {
+  /* 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);

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

@@ -1,4 +1,4 @@
-import type { ReactNode } from "react";
+import type { HTMLAttributes, ReactNode } from "react";
 
 import type {
   DropdownContainerProps,
@@ -7,6 +7,7 @@ import type {
   DropdownRootProps,
   DropdownTemplateItem,
 } from "../../dropdown/types";
+import type { FormFieldWidth } from "../../form/types";
 import type { SelectPriority, SelectSize, SelectState } from "./base";
 import type {
   SelectTriggerDefaultProps,
@@ -82,7 +83,7 @@ export interface SelectComponentState {
  * @property {ReactNode} children trigger/Dropdown 등 내부 콘텐츠
  * @property {boolean} [block] block 여부
  */
-export interface SelectContainerProps {
+export interface SelectContainerProps extends HTMLAttributes<HTMLDivElement> {
   /**
    * 사용자 정의 className
    */
@@ -95,6 +96,21 @@ export interface SelectContainerProps {
    * block 여부
    */
   block?: boolean;
+  /**
+   * width preset
+   */
+  width?: FormFieldWidth;
+}
+
+/**
+ * Select width 옵션
+ * @property {FormFieldWidth} [width] width preset 옵션
+ */
+export interface SelectWidthOption {
+  /**
+   * width preset 옵션
+   */
+  width?: FormFieldWidth;
 }
 
 /**
@@ -103,7 +119,8 @@ export interface SelectContainerProps {
  */
 export type SelectProps = SelectStyleOptions &
   SelectValueOptions &
-  SelectComponentState;
+  SelectComponentState &
+  SelectWidthOption;
 
 /**
  * Select dropdown option; Dropdown.Template item 계약을 그대로 따른다.
@@ -194,7 +211,8 @@ export interface SelectDefaultComponentProps
   extends
     SelectTriggerDefaultProps,
     SelectDropdownConfigProps,
-    SelectDropdownBehaviorProps {}
+    SelectDropdownBehaviorProps,
+    SelectWidthOption {}
 
 /**
  * Select.Multiple 컴포넌트 props
@@ -206,4 +224,5 @@ export interface SelectMultipleComponentProps
   extends
     SelectTriggerMultipleProps,
     SelectDropdownConfigProps,
-    SelectDropdownBehaviorProps {}
+    SelectDropdownBehaviorProps,
+    SelectWidthOption {}

package/src/index.scss

@@ -6,6 +6,7 @@
 @use "./components/chip";
 @use "./components/drawer";
 @use "./components/dropdown";
+@use "./components/pop-over";
 @use "./components/label";
 @use "./components/input";
 @use "./components/select";

package/src/index.tsx

@@ -1,5 +1,6 @@
-// dayjs 초기화를 가장 먼저 수행해 날짜 계열 컴포넌트가 동일 컨텍스트를 사용한다.
+// Mantine 날짜 생태계와 dayjs 설정을 한 번만 초기화한다.
 import "./init/dayjs";
+import "./init/mantine";
 // ThemeProvider는 foundation provider에서만 export한다(one-source 규칙).
 
 // 루트 배럴: 카테고리별 export를 집계한다.
@@ -12,6 +13,7 @@ export * from "./components/select";
 export * from "./components/tab";
 export * from "./components/navigation";
 export * from "./components/dropdown";
+export * from "./components/pop-over";
 export * from "./components/drawer";
 export * from "./components/scrollbar";
 export * from "./components/calendar";

package/src/init/mantine.css

@@ -0,0 +1,5 @@
+@import url("@mantine/core/styles/default-css-variables.css");
+@import url("@mantine/core/styles/global.css");
+@import url("@mantine/dates/styles.css");
+
+/* Mantine DatePicker/시간 컴포넌트에 대한 추가 override가 필요하면 이 파일에서 정의한다. */

package/src/init/mantine.ts

@@ -0,0 +1,2 @@
+// Mantine Date 계열 CSS를 한 번만 import해 전역 스타일 충돌을 방지한다.
+import "./mantine.css";

package/src/components/input/markup/calendar/Base.tsx

@@ -1,329 +0,0 @@
-"use client";
-
-import {
-  DatePicker,
-  type DatePickerStylesNames,
-  type DatePickerType,
-} from "@mantine/dates";
-import { useUncontrolled } from "@mantine/hooks";
-import type { ChangeEvent, FocusEvent } from "react";
-import { forwardRef, useCallback, useMemo } from "react";
-import { Button } from "../../../button";
-import ChevronLeftIcon from "../../img/calendar/chevron-left.svg";
-import ChevronRightIcon from "../../img/calendar/chevron-right.svg";
-import type {
-  InputCalendarActionButtonProps,
-  InputCalendarProps,
-  InputCalendarValue,
-} from "../../types";
-import { dayjs } from "../../../../init/dayjs";
-
-const DATE_FORMAT = "YYYY-MM-DD";
-type CalendarValue = InputCalendarValue<DatePickerType>;
-
-const DATE_PICKER_CLASS_NAMES = {
-  calendar: "input-calendar-panel",
-  datePickerRoot: "input-calendar-root",
-  calendarHeader: "input-calendar-header",
-  calendarHeaderControl: "input-calendar-header-control",
-  calendarHeaderLevel: "input-calendar-header-level",
-  day: "input-calendar-day",
-  weekday: "input-calendar-weekday",
-  weekdaysRow: "input-calendar-weekdays",
-  monthRow: "input-calendar-month-row",
-  monthCell: "input-calendar-month-cell",
-  month: "input-calendar-month",
-  monthThead: "input-calendar-month-thead",
-  monthTbody: "input-calendar-month-tbody",
-} as Partial<Record<DatePickerStylesNames, string>>;
-
-const DEFAULT_ACTION_LABELS: Record<"clear" | "today" | "apply", string> = {
-  clear: "삭제",
-  today: "오늘",
-  apply: "적용하기",
-};
-
-const createEmptyValue = (type: DatePickerType): CalendarValue => {
-  if (type === "range") {
-    return [null, null];
-  }
-  if (type === "multiple") {
-    return [];
-  }
-  return null;
-};
-
-const serializeValue = (value: CalendarValue, type: DatePickerType) => {
-  if (type === "range" || type === "multiple") {
-    return JSON.stringify(value ?? createEmptyValue(type));
-  }
-  return (value as string) ?? "";
-};
-
-const formatDate = (date: Date | string | null) =>
-  date ? dayjs(date).format(DATE_FORMAT) : null;
-
-const mapValueToPicker = (value: CalendarValue, type: DatePickerType) => {
-  if (type === "range") {
-    const [start, end] = (value ?? [null, null]) as InputCalendarValue<"range">;
-    return [
-      start ? dayjs(start).toDate() : null,
-      end ? dayjs(end).toDate() : null,
-    ];
-  }
-  if (type === "multiple") {
-    return ((value ?? []) as InputCalendarValue<"multiple">).map(entry =>
-      entry ? dayjs(entry).toDate() : null,
-    );
-  }
-  if (typeof value === "string" && value) {
-    return dayjs(value).toDate();
-  }
-  return null;
-};
-
-const parseValueFromPicker = (
-  value: unknown,
-  type: DatePickerType,
-): CalendarValue => {
-  if (type === "range") {
-    const [start, end] = (value as [Date | null, Date | null]) ?? [null, null];
-    return [formatDate(start), formatDate(end)] as CalendarValue;
-  }
-  if (type === "multiple") {
-    return ((value as (Date | null)[]) || []).map(entry =>
-      formatDate(entry),
-    ) as CalendarValue;
-  }
-  return formatDate((value as Date | null) ?? null);
-};
-
-const getTodayValue = (type: DatePickerType): CalendarValue => {
-  const today = dayjs().format(DATE_FORMAT);
-  if (type === "range") {
-    return [today, today];
-  }
-  if (type === "multiple") {
-    return [today];
-  }
-  return today;
-};
-
-const resolveAction = (
-  action: InputCalendarActionButtonProps | undefined,
-  key: keyof typeof DEFAULT_ACTION_LABELS,
-) => {
-  const visible = action?.visible ?? true;
-  if (!visible) return null;
-  return {
-    label: action?.label ?? DEFAULT_ACTION_LABELS[key],
-    disabled: action?.disabled ?? false,
-  };
-};
-
-const InputCalendarBase = forwardRef<
-  HTMLDivElement,
-  InputCalendarProps<DatePickerType>
->(
-  // DatePickerType 유니언을 명시해 range/multiple 비교 로직 타입 오류를 방지한다.
-  (props, ref) => {
-    const {
-      mode = "date",
-      type = "default",
-      columns = 1,
-      value,
-      defaultValue,
-      onChange,
-      onValueChange,
-      onClear,
-      onToday,
-      onApply,
-      readOnly,
-      disabled,
-      datePickerProps,
-      actions,
-      name,
-      register,
-    } = props;
-
-    const [calendarValue, setCalendarValue] = useUncontrolled<CalendarValue>({
-      value,
-      defaultValue,
-      finalValue: createEmptyValue(type),
-      onChange: changedValue => {
-        onChange?.(changedValue as InputCalendarValue<typeof type>);
-        onValueChange?.(changedValue as InputCalendarValue<typeof type>);
-      },
-    });
-
-    const serializedValue = useMemo(
-      () => serializeValue(calendarValue, type),
-      [calendarValue, type],
-    );
-
-    const emitRegisterChange = useCallback(
-      (nextValue: CalendarValue) => {
-        if (!register?.onChange) {
-          return;
-        }
-
-        const syntheticEvent = {
-          target: {
-            name: register.name,
-            value: serializeValue(nextValue, type),
-          },
-          currentTarget: {
-            name: register.name,
-            value: serializeValue(nextValue, type),
-          },
-        } as unknown as ChangeEvent<HTMLInputElement>;
-
-        register.onChange(syntheticEvent);
-      },
-      [register, type],
-    );
-
-    const updateValue = useCallback(
-      (nextValue: CalendarValue) => {
-        setCalendarValue(nextValue as InputCalendarValue<typeof type>);
-        emitRegisterChange(nextValue);
-      },
-      [emitRegisterChange, setCalendarValue],
-    );
-
-    const handleDateChange = useCallback(
-      (next: unknown) => {
-        const normalized = parseValueFromPicker(next, type);
-        updateValue(normalized);
-      },
-      [type, updateValue],
-    );
-
-    const handleClear = () => {
-      updateValue(createEmptyValue(type));
-      onClear?.();
-    };
-
-    const handleToday = () => {
-      updateValue(getTodayValue(type));
-      onToday?.();
-    };
-
-    const handleApply = () => {
-      onApply?.(calendarValue as InputCalendarValue<typeof type>);
-    };
-
-    const resolvedClear = resolveAction(actions?.clear, "clear");
-    const resolvedToday = resolveAction(actions?.today, "today");
-    const resolvedApply = resolveAction(actions?.apply, "apply");
-
-    const isInteractive = !(readOnly || disabled);
-    const hiddenName = register?.name ?? name;
-
-    const handleHiddenRef = useCallback(
-      (node: HTMLInputElement | null) => {
-        if (register?.ref) {
-          register.ref(node);
-        }
-      },
-      [register],
-    );
-
-    const handleHiddenBlur = (event: FocusEvent<HTMLInputElement>) => {
-      register?.onBlur?.(event);
-    };
-
-    if (mode !== "date" && process.env.NODE_ENV !== "production") {
-      console.warn("InputCalendarBase: 현재 date 모드만 지원합니다.");
-    }
-
-    const singleRangeProps =
-      type === "range"
-        ? {
-            allowSingleDateInRange: true,
-          }
-        : {};
-
-    return (
-      <div
-        ref={ref}
-        className="input-calendar"
-        data-mode={mode}
-        data-type={type}
-        data-columns={columns}
-        data-disabled={disabled ? "true" : undefined}
-      >
-        {hiddenName ? (
-          <input
-            type="hidden"
-            name={hiddenName}
-            value={serializedValue}
-            readOnly
-            ref={handleHiddenRef}
-            onBlur={handleHiddenBlur}
-          />
-        ) : null}
-        <div className="input-calendar-container">
-          <DatePicker
-            classNames={DATE_PICKER_CLASS_NAMES}
-            value={mapValueToPicker(calendarValue, type) as never}
-            onChange={handleDateChange as never}
-            type={type}
-            numberOfColumns={columns}
-            nextIcon={<ChevronRightIcon />}
-            previousIcon={<ChevronLeftIcon />}
-            // Mantine DatePicker에는 disabled prop이 없어 data-disabled로 상단에서 제어한다.
-            {...(datePickerProps ?? {})}
-            {...singleRangeProps}
-          />
-          <div className="input-calendar-footer">
-            <div className="input-calendar-footer-actions">
-              {resolvedClear ? (
-                <Button.Default
-                  fill="outlined"
-                  size="small"
-                  priority="tertiary"
-                  disabled={!isInteractive || resolvedClear.disabled}
-                  onClick={handleClear}
-                  className="input-calendar-action-button"
-                >
-                  {resolvedClear.label}
-                </Button.Default>
-              ) : (
-                <span />
-              )}
-              {resolvedToday ? (
-                <Button.Default
-                  fill="outlined"
-                  size="small"
-                  priority="secondary"
-                  disabled={!isInteractive || resolvedToday.disabled}
-                  onClick={handleToday}
-                  className="input-calendar-action-button"
-                >
-                  {resolvedToday.label}
-                </Button.Default>
-              ) : null}
-            </div>
-            {resolvedApply ? (
-              <Button.Default
-                fill="solid"
-                size="large"
-                priority="primary"
-                disabled={!isInteractive || resolvedApply.disabled}
-                onClick={handleApply}
-                className="input-calendar-apply"
-              >
-                {resolvedApply.label}
-              </Button.Default>
-            ) : null}
-          </div>
-        </div>
-      </div>
-    );
-  },
-);
-
-InputCalendarBase.displayName = "InputCalendarBase";
-
-export { InputCalendarBase };

package/src/components/input/markup/calendar/index.tsx

@@ -1,8 +0,0 @@
-"use client";
-
-import "../../styles/calendar.scss";
-import { InputCalendarBase } from "./Base";
-
-export const InputCalendar = {
-  Base: InputCalendarBase,
-};

package/src/components/input/styles/calendar.scss

@@ -1,110 +0,0 @@
-.input-calendar {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-gap-6, 20px);
-  width: 100%;
-
-  &[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 {
-  width: 100%;
-}
-
-.input-calendar-panel {
-  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;
-  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);
-}
-
-.input-calendar-weekdays {
-  display: grid;
-  grid-template-columns: repeat(7, minmax(0, 1fr));
-  padding-bottom: var(--spacing-padding-2, 4px);
-}
-
-.input-calendar-weekday {
-  text-transform: none;
-  font-size: var(--font-heading-xxsmall-size, 15px);
-  color: var(--color-label-alternative, #afb1b6);
-  text-align: center;
-}
-
-.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-calendar-footer {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-gap-4, 12px);
-  width: 100%;
-}
-
-.input-calendar-footer-actions {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--spacing-gap-3, 8px);
-}
-
-.input-calendar-action-button {
-  width: 100%;
-}
-
-.input-calendar-footer-actions > :first-child {
-  flex: 1 1 auto;
-}
-
-.input-calendar-footer-actions > :last-child {
-  flex: 1 1 auto;
-  justify-content: flex-end;
-}
-
-.input-calendar-apply {
-  width: 100%;
-}

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

@@ -1,4 +0,0 @@
-@use "./variables.scss" as inputVariables;
-@use "./foundation.scss" as inputFoundation;
-@use "./text.scss" as inputText;
-@use "./calendar.scss" as inputCalendar;