@uniai-fe/uds-primitives 0.2.1 → 0.2.3

package/src/components/input/markup/date/Trigger.tsx

@@ -0,0 +1,79 @@
+"use client";
+
+import clsx from "clsx";
+import type { MouseEvent } from "react";
+import { forwardRef } from "react";
+import { Calendar } from "../../../calendar";
+import { InputFoundation } from "../foundation";
+import type { InputCalendarTriggerViewProps } from "../../types";
+
+/**
+ * Input Date trigger field.
+ * @component
+ * @param {InputCalendarTriggerViewProps} props
+ * @param {string} [props.className] trigger className
+ * @param {string} [props.placeholder] placeholder
+ * @param {string} [props.displayValue] 표시 문자열
+ * @param {(event: MouseEvent<Element>) => void} [props.onClick] 클릭 핸들러
+ * @param {boolean} [props.disabled] disabled 여부
+ * @param {string} [props.id] input id
+ * @param {string} [props.name] form name
+ * @param {UseFormRegisterReturn} [props.register] RHF register
+ */
+const InputDateTrigger = forwardRef<
+  HTMLInputElement,
+  InputCalendarTriggerViewProps
+>(
+  (
+    {
+      className,
+      placeholder,
+      displayValue,
+      onClick,
+      disabled,
+      id,
+      name,
+      register,
+      ...restProps
+    },
+    ref,
+  ) => {
+    /**
+     * Radix `asChild`가 주입한 onClick을 보존하기 위해 restProps.onClick을 병합한다.
+     * (Input Date 자체 onClick 계약도 함께 실행)
+     */
+    const handleInputClick = (event: MouseEvent<HTMLInputElement>) => {
+      const rawOnClick = (restProps as Record<string, unknown>).onClick;
+      if (typeof rawOnClick === "function") {
+        (rawOnClick as (event: MouseEvent<HTMLInputElement>) => void)(event);
+      }
+      onClick?.(event as never);
+    };
+
+    return (
+      <InputFoundation.Base
+        {...restProps}
+        ref={ref}
+        value={displayValue}
+        readOnly
+        disabled={disabled}
+        id={id}
+        name={name ?? register?.name}
+        register={register}
+        placeholder={placeholder}
+        className={clsx("input-date-trigger-input", className)}
+        onClick={handleInputClick}
+        right={
+          // 토글 인터랙션은 input 단일 경로로 유지하고, 오른쪽 아이콘은 장식 요소로만 둔다.
+          <figure className="input-date-trigger-icon" aria-hidden="true">
+            <Calendar.Icon.Calendar />
+          </figure>
+        }
+      />
+    );
+  },
+);
+
+InputDateTrigger.displayName = "InputDateTrigger";
+
+export default InputDateTrigger;

package/src/components/input/markup/date/button/ApplyButton.tsx

@@ -0,0 +1,38 @@
+import clsx from "clsx";
+import { Button } from "../../../../button";
+import type { InputCalendarApplyButtonProps } from "../../../types";
+
+/**
+ * Calendar footer apply 버튼.
+ * @component
+ * @param {InputCalendarApplyButtonProps} props
+ * @param {string} [props.className] 추가 className
+ * @param {React.ReactNode} [props.children] override 라벨
+ * @param {React.ReactNode} [props.label] fallback 라벨
+ * @param {boolean} [props.disabled] disabled 여부
+ * @param {() => void} [props.onClick] 클릭 핸들러
+ */
+export default function InputDateApplyButton({
+  className,
+  label,
+  disabled,
+  onClick,
+  children,
+}: InputCalendarApplyButtonProps) {
+  return (
+    <Button.Default
+      className={clsx("input-date-apply-button", className)}
+      priority="primary"
+      fill="solid"
+      size="large"
+      disabled={disabled}
+      onClick={onClick}
+    >
+      {
+        children ??
+          label ??
+          "적용하기" /* children 우선, 없으면 label/기본 라벨 */
+      }
+    </Button.Default>
+  );
+}

package/src/components/input/markup/date/button/ClearButton.tsx

@@ -0,0 +1,36 @@
+import clsx from "clsx";
+import { Button } from "../../../../button";
+import type { InputCalendarInlineButtonProps } from "../../../types";
+
+/**
+ * Calendar footer clear 버튼.
+ * @component
+ * @param {InputCalendarInlineButtonProps} props
+ * @param {React.ReactNode} [props.children] 라벨
+ * @param {() => void} [props.onClick] 클릭 핸들러
+ * @param {boolean} [props.disabled] disabled 여부
+ * @param {string} [props.className] 확장 className
+ */
+export default function InputDateClearButton({
+  children,
+  onClick,
+  disabled,
+  className,
+}: InputCalendarInlineButtonProps) {
+  return (
+    <Button.Default
+      className={clsx(
+        "input-date-action-button input-date-action-clear",
+        className,
+      )}
+      priority="tertiary"
+      fill="outlined"
+      size="small"
+      onClick={onClick}
+      disabled={disabled}
+      type="button"
+    >
+      {children ?? "삭제" /* 텍스트 미지정 시 기본 라벨 */}
+    </Button.Default>
+  );
+}

package/src/components/input/markup/date/button/TodayButton.tsx

@@ -0,0 +1,36 @@
+import clsx from "clsx";
+import { Button } from "../../../../button";
+import type { InputCalendarInlineButtonProps } from "../../../types";
+
+/**
+ * Calendar footer today 버튼.
+ * @component
+ * @param {InputCalendarInlineButtonProps} props
+ * @param {React.ReactNode} [props.children] 라벨
+ * @param {() => void} [props.onClick] 클릭 핸들러
+ * @param {boolean} [props.disabled] disabled 여부
+ * @param {string} [props.className] className 확장
+ */
+export default function InputDateTodayButton({
+  children,
+  onClick,
+  disabled,
+  className,
+}: InputCalendarInlineButtonProps) {
+  return (
+    <Button.Default
+      className={clsx(
+        "input-date-action-button input-date-action-today",
+        className,
+      )}
+      priority="secondary"
+      fill="solid"
+      size="small"
+      onClick={onClick}
+      disabled={disabled}
+      type="button"
+    >
+      {children ?? "오늘" /* default 라벨 */}
+    </Button.Default>
+  );
+}

package/src/components/input/markup/date/footer/Container.tsx

@@ -0,0 +1,24 @@
+import clsx from "clsx";
+import type { InputCalendarFooterTemplateContainerProps } from "../../../types";
+
+/**
+ * FooterTemplate root container.
+ * @component
+ * @param {InputCalendarFooterTemplateContainerProps} props
+ * @param {React.ReactNode} [props.children] footer 내부 children
+ * @param {string} [props.className] container className
+ * @example
+ * <InputDateFooterTemplateContainer>
+ *   <div>...</div>
+ * </InputDateFooterTemplateContainer>
+ */
+export default function InputDateFooterTemplateContainer({
+  children,
+  className,
+}: InputCalendarFooterTemplateContainerProps) {
+  return (
+    <div className={clsx("input-date-footer-template", className)}>
+      {children}
+    </div>
+  );
+}

package/src/components/input/markup/date/footer/Template.tsx

@@ -0,0 +1,36 @@
+import type { InputCalendarFooterTemplateProps } from "../../../types";
+import InputDateApplyButton from "../button/ApplyButton";
+import InputDateClearButton from "../button/ClearButton";
+import InputDateTodayButton from "../button/TodayButton";
+import InputDateFooterTemplateContainer from "./Container";
+import InputDateFooterUtilContainer from "./UtilContainer";
+
+/**
+ * Calendar footer 기본 템플릿.
+ * @component
+ * @param {InputCalendarFooterTemplateProps} props
+ * @param {string} [props.className] root className
+ * @param {() => void} [props.onClear] clear 버튼 클릭 핸들러
+ * @param {() => void} [props.onToday] today 버튼 클릭 핸들러
+ * @param {() => void} [props.onApply] apply 버튼 클릭 핸들러
+ * @param {boolean} [props.disabled] 전체 버튼 disabled 여부
+ * @example
+ * <InputDateFooterTemplate onClear={onClear} onToday={onToday} onApply={onApply} />
+ */
+export default function InputDateFooterTemplate({
+  className,
+  onClear,
+  onToday,
+  onApply,
+  disabled,
+}: InputCalendarFooterTemplateProps) {
+  return (
+    <InputDateFooterTemplateContainer className={className}>
+      <InputDateFooterUtilContainer>
+        <InputDateClearButton disabled={disabled} onClick={onClear} />
+        <InputDateTodayButton disabled={disabled} onClick={onToday} />
+      </InputDateFooterUtilContainer>
+      <InputDateApplyButton disabled={disabled} onClick={onApply} />
+    </InputDateFooterTemplateContainer>
+  );
+}

package/src/components/input/markup/date/footer/UtilContainer.tsx

@@ -0,0 +1,23 @@
+import clsx from "clsx";
+import type { InputCalendarFooterUtilContainerProps } from "../../../types";
+
+/**
+ * FooterTemplate utility button container.
+ * @component
+ * @param {InputCalendarFooterUtilContainerProps} props
+ * @param {React.ReactNode} [props.children] util 버튼(children)
+ * @param {string} [props.className] container className
+ * @example
+ * <InputDateFooterUtilContainer>
+ *   <Input.Date.Button.Clear />
+ *   <Input.Date.Button.Today />
+ * </InputDateFooterUtilContainer>
+ */
+export default function InputDateFooterUtilContainer({
+  children,
+  className,
+}: InputCalendarFooterUtilContainerProps) {
+  return (
+    <div className={clsx("input-date-footer-util", className)}>{children}</div>
+  );
+}

package/src/components/input/markup/date/footer/index.ts

@@ -0,0 +1,3 @@
+export { default as InputDateFooterTemplate } from "./Template";
+export { default as InputDateFooterTemplateContainer } from "./Container";
+export { default as InputDateFooterUtilContainer } from "./UtilContainer";

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

@@ -0,0 +1,27 @@
+import "../../styles/date.scss";
+import InputDateTemplate from "./Template";
+import InputDateTrigger from "./Trigger";
+import InputDateApplyButton from "./button/ApplyButton";
+import InputDateClearButton from "./button/ClearButton";
+import InputDateTodayButton from "./button/TodayButton";
+import {
+  InputDateFooterTemplate,
+  InputDateFooterTemplateContainer,
+  InputDateFooterUtilContainer,
+} from "./footer";
+
+// Input.Date 네임스페이스: template/foundation 구성요소 집합
+export const InputDate = {
+  Template: InputDateTemplate,
+  Trigger: InputDateTrigger,
+  Button: {
+    Apply: InputDateApplyButton,
+    Clear: InputDateClearButton,
+    Today: InputDateTodayButton,
+  },
+  Footer: {
+    Template: InputDateFooterTemplate,
+    Container: InputDateFooterTemplateContainer,
+    UtilContainer: InputDateFooterUtilContainer,
+  },
+};

package/src/components/input/markup/foundation/Input.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import clsx from "clsx";
-import type { PointerEvent as ReactPointerEvent } from "react";
+import type { CSSProperties, PointerEvent as ReactPointerEvent } from "react";
 import {
   ChangeEvent,
   FocusEvent,
@@ -14,6 +14,10 @@ import {
   useState,
 } from "react";
 import type { InputProps } from "../../types";
+import {
+  getFormFieldWidthAttr,
+  getFormFieldWidthValue,
+} from "../../../form/utils/form-field";
 
 import InputBaseSideSlot from "./SideSlot";
 import InputBaseUtil from "./Utility";
@@ -56,6 +60,7 @@ const InputBase = forwardRef<HTMLInputElement, InputProps>(
       size = "medium",
       state: stateProp = "default",
       block = false,
+      width,
       left,
       right,
       clear,
@@ -166,6 +171,18 @@ const InputBase = forwardRef<HTMLInputElement, InputProps>(
     };
 
     const inputName = registerName ?? name;
+    const widthAttr =
+      width !== undefined
+        ? getFormFieldWidthAttr(width)
+        : block
+          ? "full"
+          : undefined;
+    const widthValue =
+      width !== undefined ? getFormFieldWidthValue(width) : undefined;
+    const containerStyle: CSSProperties | undefined =
+      widthValue !== undefined
+        ? ({ ["--input-width" as const]: widthValue } as CSSProperties)
+        : undefined;
 
     return (
       <div
@@ -182,6 +199,8 @@ const InputBase = forwardRef<HTMLInputElement, InputProps>(
         data-state={visualState}
         data-block={block ? "true" : undefined}
         {...(simulatedState ? { "data-simulated-state": simulatedState } : {})}
+        data-width={widthAttr}
+        style={containerStyle}
       >
         <div
           className={clsx(

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

@@ -1,11 +1,11 @@
-"use client";
-
 import { InputFoundation } from "./foundation";
 import { InputText } from "./text";
-import { InputCalendar } from "./calendar";
+import { InputDate } from "./date";
+import { InputAddress } from "./address";
 
 export const Input = {
   ...InputFoundation,
   Text: InputText,
-  Calendar: InputCalendar,
+  Date: InputDate,
+  Address: InputAddress,
 };

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

@@ -0,0 +1,24 @@
+.input-address-container {
+  width: 100%;
+}
+
+.input-address-row {
+  width: 100%;
+  display: flex;
+  gap: var(--spacing-gap-5);
+}
+
+.input-address-lower {
+  margin-top: var(--spacing-gap-5);
+}
+
+// .input-address-button {
+// }
+
+.input-address-upper {
+  align-items: center;
+}
+
+.input-address-field {
+  width: 100%;
+}

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

@@ -0,0 +1,45 @@
+.input-date-field {
+  // Date 입력 영역은 trigger만 관리하고 캘린더 레이어는 calendar 모듈이 담당한다.
+  display: grid;
+  gap: var(--spacing-gap-5);
+  width: 100%;
+}
+
+.input-date-trigger-input {
+  width: 100%;
+}
+
+.input-date-trigger-icon {
+  margin: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  color: var(--color-label-alternative);
+  // 아이콘 영역 클릭은 input으로 위임한다.
+  pointer-events: none;
+}
+
+.input-date-footer-template {
+  // footer 템플릿은 input 스킨에서만 관리한다.
+  display: grid;
+  gap: var(--spacing-gap-5);
+  width: 100%;
+}
+
+.input-date-footer-util {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-gap-3);
+  width: 100%;
+}
+
+.input-date-action-button {
+  width: auto;
+}
+
+.input-date-apply-button {
+  width: 100%;
+}

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

@@ -2,9 +2,35 @@
   display: flex;
   flex-direction: column;
   gap: var(--spacing-gap-3);
-  width: 100%;
+  width: var(--input-width);
+  flex: var(--input-flex);
+  min-width: 0;
+
+  &[data-width="auto"] {
+    --input-width: auto;
+    --input-flex: 0 1 auto;
+  }
+
+  &[data-width="fill"] {
+    --input-width: auto;
+    --input-flex: 1 1 0%;
+  }
+
+  &[data-width="full"],
+  &[data-block="true"] {
+    --input-width: 100%;
+    --input-flex: 0 0 100%;
+  }
+
+  &[data-width="fit"] {
+    --input-width: fit-content;
+    --input-flex: 0 0 auto;
+  }
+
+  &[data-width="custom"] {
+    --input-flex: 0 0 auto;
+  }
 
-  &[data-block="true"],
   &--block {
     width: 100%;
   }

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

@@ -1,4 +1,8 @@
 :root {
+  /* 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);