@uniai-fe/uds-primitives 0.2.1 → 0.2.3

package/src/components/button/styles/button.scss

@@ -150,7 +150,8 @@ $button-priorities: (
   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)
@@ -216,8 +217,29 @@ $button-priorities: (
     justify-content: center;
   }
 
+  &[data-width="auto"] {
+    --button-width: auto;
+    --button-flex: 0 1 auto;
+  }
+
+  &[data-width="fill"] {
+    --button-width: auto;
+    --button-flex: 1 1 0%;
+  }
+
+  &[data-width="full"],
   &.button-block {
-    width: 100%;
+    --button-width: 100%;
+    --button-flex: 0 0 100%;
+  }
+
+  &[data-width="fit"] {
+    --button-width: fit-content;
+    --button-flex: 0 0 auto;
+  }
+
+  &[data-width="custom"] {
+    --button-flex: 0 0 auto;
   }
 
   &:not(.button-fill-solid):not(.button-fill-outlined) {

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

@@ -1,5 +1,9 @@
 /* 버튼 전용 토큰은 theme root에서 한 번만 정의하며, size 기반 규칙(--button-{type}-{property}-{size})을 따른다. */
 :root {
+  /* 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);

package/src/components/button/types/index.ts

@@ -1,4 +1,5 @@
 import type { ComponentPropsWithoutRef, ElementType, ReactNode } from "react";
+import type { FormFieldWidth } from "../../form/types";
 
 /**
  * Button; priority 옵션
@@ -91,6 +92,7 @@ type SharedElementProps = Omit<NativeButtonProps, "children"> &
  * @property {ButtonPriority} priority semantic color priority.
  * @property {ButtonState} [state] UI 상태. disabled prop과 조합된다.
  * @property {boolean} [block] width:100% 확장 여부.
+ * @property {FormFieldWidth} [width] width preset. block보다 우선 적용된다.
  * @property {boolean} [loading] true면 readonly 처리 + aria-busy.
  * @property {ReactNode} [left] 라벨 왼쪽 커스텀 슬롯.
  * @property {ReactNode} [right] 라벨 오른쪽 커스텀 슬롯.
@@ -145,6 +147,11 @@ export interface ButtonProps extends SharedElementProps {
    * true면 버튼 폭을 100%로 확장한다.
    */
   block?: boolean;
+  /**
+   * width preset.
+   * block보다 우선 적용된다.
+   */
+  width?: FormFieldWidth;
   /**
    * true면 readonly 상태로 전환하고 aria-busy를 설정한다.
    */

package/src/components/{input/img/calendar → calendar/img}/calendar.svg

@@ -2,6 +2,11 @@
 <rect x="20.2" y="6.8" width="13.4" height="16.4" rx="1.2" transform="rotate(90 20.2 6.8)" stroke="#BCBEC2" stroke-width="1.6"/>
 <path d="M4 10C9.33333 10 20 10 20 10" stroke="#BCBEC2" stroke-width="1.6"/>
 <path d="M7 13L9 13" stroke="#BCBEC2" stroke-width="1.6"/>
+<path d="M11 13L13 13" stroke="#BCBEC2" stroke-width="1.6"/>
+<path d="M15 13L17 13" stroke="#BCBEC2" stroke-width="1.6"/>
+<path d="M7 17L9 17" stroke="#BCBEC2" stroke-width="1.6"/>
+<path d="M11 17L13 17" stroke="#BCBEC2" stroke-width="1.6"/>
+<path d="M15 17L17 17" stroke="#BCBEC2" stroke-width="1.6"/>
 <path d="M8.8 4C8.8 3.55817 8.44183 3.2 8 3.2C7.55817 3.2 7.2 3.55817 7.2 4L8 4L8.8 4ZM8 4L7.2 4L7.2 6L8 6L8.8 6L8.8 4L8 4Z" fill="#BCBEC2"/>
 <path d="M16.8 4C16.8 3.55817 16.4418 3.2 16 3.2C15.5582 3.2 15.2 3.55817 15.2 4L16 4L16.8 4ZM16 4L15.2 4L15.2 6L16 6L16.8 6L16.8 4L16 4Z" fill="#BCBEC2"/>
 </svg>

package/src/components/calendar/index.tsx

@@ -1,4 +1,6 @@
-/**
- * calendar 카테고리 배럴 placeholder: 실제 구현은 markup/ 하위에 추가한다.
- */
+import "./index.scss";
+
 export * from "./markup";
+export * as CalendarHooks from "./hooks";
+export * as CalendarUtils from "./utils";
+export type * from "./types";

package/src/components/calendar/markup/Core.tsx

@@ -0,0 +1,67 @@
+"use client";
+
+import { DatePicker } from "@mantine/dates";
+import { CalendarIcon } from "./Icon";
+import type { CalendarGridProps } from "../types";
+import { mapValueToPicker, parseValueFromPicker } from "../utils";
+
+/**
+ * Calendar Grid; Mantine DatePicker 래퍼.
+ * @component
+ * @param {CalendarGridProps} props grid props
+ * @param {CalendarValue} props.value 현재 선택 값(YYYY-MM-DD)
+ * @param {CalendarOnChange} props.onChange 값 변경 핸들러
+ * @param {CalendarDatePickerProps} [props.datePickerProps] Mantine DatePicker 옵션
+ * @example
+ * <Calendar.Grid value={value} onChange={setValue} />
+ */
+export default function CalendarCore({
+  value,
+  onChange,
+  datePickerProps,
+}: CalendarGridProps) {
+  // 기본 DatePicker 옵션/스타일 책임을 Calendar.Core에 고정한다.
+  const resolvedDatePickerProps = {
+    size: "sm" as const,
+    firstDayOfWeek: 0 as const,
+    weekendDays: [] as Array<0 | 1 | 2 | 3 | 4 | 5 | 6>,
+    nextIcon: <CalendarIcon.Chevron.right />,
+    previousIcon: <CalendarIcon.Chevron.left />,
+    ...datePickerProps,
+    classNames: {
+      levelsGroup: "calendar-month-level",
+      month: "calendar-month-table",
+      monthCell: "calendar-month-cell",
+      calendarHeader: "calendar-header-row",
+      calendarHeaderControl: "calendar-header-control",
+      calendarHeaderLevel: "calendar-header-level",
+      day: "calendar-day",
+      weekday: "calendar-weekday",
+      weekdaysRow: "calendar-weekdays",
+      monthsList: "calendar-months-list",
+      monthsListCell: "calendar-months-list-cell",
+      monthsListControl: "calendar-months-list-control",
+      yearsList: "calendar-years-list",
+      yearsListCell: "calendar-years-list-cell",
+      yearsListControl: "calendar-years-list-control",
+      ...(datePickerProps?.classNames ?? {}),
+    },
+  };
+
+  const handleChange = (nextValue: unknown) => {
+    const parsed = parseValueFromPicker(nextValue as Date | null);
+    onChange(parsed);
+  };
+
+  return (
+    <DatePicker
+      className="calendar-grid"
+      // Core는 SOT 단일 달력으로 고정한다.
+      numberOfColumns={1}
+      type="default"
+      value={mapValueToPicker(value) as never}
+      onChange={handleChange as never}
+      {...resolvedDatePickerProps}
+    />
+  );
+}

package/src/components/calendar/markup/Icon.tsx

@@ -0,0 +1,20 @@
+import CalendarInputIcon from "../img/calendar.svg";
+import ChevronDownIcon from "../img/chevron-down.svg";
+import ChevronLeftIcon from "../img/chevron-left.svg";
+import ChevronRightIcon from "../img/chevron-right.svg";
+import ChevronUpIcon from "../img/chevron-up.svg";
+
+/**
+ * Calendar; 아이콘
+ * - Calendar
+ * - Chevron (left, right, up, down)
+ */
+export const CalendarIcon = {
+  Calendar: CalendarInputIcon,
+  Chevron: {
+    left: ChevronLeftIcon,
+    right: ChevronRightIcon,
+    up: ChevronUpIcon,
+    down: ChevronDownIcon,
+  },
+};

package/src/components/calendar/markup/Root.tsx

@@ -0,0 +1,126 @@
+"use client";
+
+import clsx from "clsx";
+import { forwardRef } from "react";
+import { PopOver } from "../../pop-over";
+import type { CalendarRootProps } from "../types";
+import CalendarContainer from "./layout/Container";
+import CalendarCore from "./Core";
+
+/**
+ * Calendar Root; Header/Body/Footer + Grid 조합 템플릿.
+ * @component
+ * @param {CalendarRootProps} props root props
+ * @param {string} [props.className] Trigger element className override
+ * @param {CalendarValue} props.value 현재 선택 값(YYYY-MM-DD)
+ * @param {CalendarOnChange} props.onChange 값 변경 핸들러
+ * @param {CalendarColumns} [props.columns=1] Root 레이아웃 컬럼 상태
+ * @param {CalendarDatePickerProps} [props.datePickerProps] Mantine DatePicker 옵션
+ * @param {React.ReactNode} [props.header] Calendar Header 슬롯
+ * @param {React.ReactNode} [props.footer] Calendar Footer 슬롯
+ * @param {CalendarMode} [props.mode="date"] calendar 모드
+ * @param {boolean} [props.disabled] 비활성화 상태
+ * @param {boolean} [props.readOnly] 읽기 전용 상태
+ * @param {React.ReactNode} props.children Trigger 슬롯(children)
+ * @param {boolean} [props.open] 제어형 open 상태
+ * @param {boolean} [props.defaultOpen] 비제어 초기 open 상태
+ * @param {(open: boolean) => void} [props.onOpenChange] open 상태 변경 핸들러
+ * @param {"top" | "right" | "bottom" | "left"} [props.side="bottom"] Content 배치 방향
+ * @param {"start" | "center" | "end"} [props.align="start"] Content 정렬 기준
+ * @param {number} [props.sideOffset=4] Trigger와 Content 간격
+ * @param {number} [props.alignOffset] Content 정렬 보정값
+ * @param {boolean} [props.withPortal=true] Portal 사용 여부
+ * @param {HTMLElement | null} [props.portalContainer] Portal 컨테이너
+ * @example
+ * <Calendar.Root value={value} onChange={setValue} />
+ */
+const CalendarRoot = forwardRef<HTMLElement, CalendarRootProps>(
+  (
+    {
+      className,
+      value,
+      onChange,
+      columns = 1,
+      datePickerProps,
+      header,
+      footer,
+      mode = "date",
+      disabled,
+      readOnly,
+      children,
+      open,
+      defaultOpen,
+      onOpenChange,
+      side = "bottom",
+      align = "start",
+      sideOffset = 4,
+      alignOffset,
+      withPortal = true,
+      portalContainer,
+    },
+    ref,
+  ) => {
+    // disabled/readOnly 상태에서는 PopOver 토글을 막는다.
+    const isInteractive = !disabled && !readOnly;
+
+    const calendarNode = (
+      <CalendarContainer
+        ref={ref}
+        header={header}
+        footer={footer}
+        mode={mode}
+        columns={columns}
+        disabled={disabled}
+        readOnly={readOnly}
+        body={
+          <CalendarCore
+            value={value}
+            onChange={onChange}
+            datePickerProps={datePickerProps}
+          />
+        }
+      />
+    );
+
+    return (
+      <PopOver.Root
+        open={isInteractive ? open : false}
+        defaultOpen={isInteractive ? defaultOpen : false}
+        onOpenChange={nextOpen => {
+          if (!isInteractive) {
+            onOpenChange?.(false);
+            return;
+          }
+          onOpenChange?.(nextOpen);
+        }}
+        modal={false}
+      >
+        {/* Trigger 래퍼 div를 두지 않고 children 노드에 직접 trigger props를 주입한다. */}
+        <PopOver.Trigger
+          asChild
+          disabled={!isInteractive}
+          className={clsx("calendar-trigger", className)}
+        >
+          {/* children은 asChild 계약상 단일 element여야 하며, 해당 요소가 props를 DOM으로 전달해야 한다. */}
+          {children}
+        </PopOver.Trigger>
+        <PopOver.Content
+          className="calendar-pop-over-content"
+          side={side}
+          align={align}
+          sideOffset={sideOffset}
+          alignOffset={alignOffset}
+          withPortal={withPortal}
+          portalContainer={portalContainer}
+        >
+          {/* calendar 스킨 class는 content 내부에 고정한다. */}
+          <div className="calendar-root">{calendarNode}</div>
+        </PopOver.Content>
+      </PopOver.Root>
+    );
+  },
+);
+
+CalendarRoot.displayName = "CalendarRoot";
+
+export default CalendarRoot;

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

@@ -1,4 +1,26 @@
+import CalendarContainer from "./layout/Container";
+import CalendarHeader from "./layout/Header";
+import CalendarBody from "./layout/Body";
+import CalendarFooter from "./layout/Footer";
+import CalendarCore from "./Core";
+import CalendarRoot from "./Root";
+import { CalendarIcon } from "./Icon";
+
 /**
- * TODO(calendar): SOT 및 사용자 제약에 따라 컴포넌트를 구현한다.
+ * Calendar namespace.
+ * - Root
+ * - Container
+ * - Header
+ * - Body
+ * - Footer
+ * - Core
  */
-export {};
+export const Calendar = {
+  Root: CalendarRoot,
+  Container: CalendarContainer,
+  Header: CalendarHeader,
+  Body: CalendarBody,
+  Footer: CalendarFooter,
+  Core: CalendarCore,
+  Icon: CalendarIcon,
+};

package/src/components/calendar/markup/layout/Body.tsx

@@ -0,0 +1,12 @@
+import type { CalendarSectionProps } from "../../types";
+
+/**
+ * Calendar Body.
+ * @component
+ * @param {CalendarSectionProps} props body children
+ * @example
+ * <Calendar.Body>{grid}</Calendar.Body>
+ */
+export default function CalendarBody({ children }: CalendarSectionProps) {
+  return <div className="calendar-body">{children}</div>;
+}

package/src/components/calendar/markup/layout/Container.tsx

@@ -0,0 +1,43 @@
+import { forwardRef } from "react";
+import type { CalendarContainerProps } from "../../types";
+import CalendarBody from "./Body";
+import CalendarFooter from "./Footer";
+import CalendarHeader from "./Header";
+
+/**
+ * Calendar Layout Container.
+ * @component
+ * @param {CalendarContainerProps} props layout props
+ * @param {React.ReactNode} [props.header] 상단 header 콘텐츠
+ * @param {React.ReactNode} props.body 본문 콘텐츠(Calendar Core 포함)
+ * @param {React.ReactNode} [props.footer] 하단 footer 콘텐츠
+ * @param {CalendarMode} [props.mode="date"] calendar 모드
+ * @param {CalendarColumns} [props.columns=1] 동시 렌더링 컬럼 수
+ * @param {boolean} [props.disabled] 비활성화 상태
+ * @param {boolean} [props.readOnly] 읽기 전용 상태
+ * @example
+ * <Calendar.Container body={<Calendar.Grid value={value} onChange={setValue} />} />
+ */
+const CalendarContainer = forwardRef<HTMLElement, CalendarContainerProps>(
+  (
+    { header, body, footer, mode = "date", columns = 1, disabled, readOnly },
+    ref,
+  ) => (
+    <section
+      ref={ref}
+      className="calendar-container"
+      data-mode={mode}
+      data-columns={columns}
+      data-disabled={disabled ? "true" : undefined}
+      data-readonly={readOnly ? "true" : undefined}
+    >
+      {header ? <CalendarHeader>{header}</CalendarHeader> : null}
+      <CalendarBody>{body}</CalendarBody>
+      {footer ? <CalendarFooter>{footer}</CalendarFooter> : null}
+    </section>
+  ),
+);
+
+CalendarContainer.displayName = "CalendarContainer";
+
+export default CalendarContainer;

package/src/components/calendar/markup/layout/Footer.tsx

@@ -0,0 +1,12 @@
+import type { CalendarSectionProps } from "../../types";
+
+/**
+ * Calendar Footer.
+ * @component
+ * @param {CalendarSectionProps} props footer children
+ * @example
+ * <Calendar.Footer>{footerNode}</Calendar.Footer>
+ */
+export default function CalendarFooter({ children }: CalendarSectionProps) {
+  return <footer className="calendar-footer">{children}</footer>;
+}

package/src/components/calendar/markup/layout/Header.tsx

@@ -0,0 +1,12 @@
+import type { CalendarSectionProps } from "../../types";
+
+/**
+ * Calendar Header.
+ * @component
+ * @param {CalendarSectionProps} props header children
+ * @example
+ * <Calendar.Header>Custom Header</Calendar.Header>
+ */
+export default function CalendarHeader({ children }: CalendarSectionProps) {
+  return <header className="calendar-header">{children}</header>;
+}

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

@@ -0,0 +1,2 @@
+@use "./layout.scss";
+@use "./mantine-calendar.scss";

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

@@ -0,0 +1,21 @@
+.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%;
+}