@simplysm/solid 13.0.0-beta.6

package/src/components/form-control/field/Textarea.tsx

@@ -0,0 +1,262 @@
+import clsx from "clsx";
+import { type Component, createEffect, type JSX, Show, splitProps } from "solid-js";
+import { twMerge } from "tailwind-merge";
+import { createControllableSignal } from "../../../hooks/createControllableSignal";
+import { createIMEHandler } from "../../../hooks/createIMEHandler";
+import {
+  type FieldSize,
+  textAreaBaseClass as fieldTextAreaBaseClass,
+  textAreaSizeClasses,
+  fieldErrorClass,
+  fieldInsetClass,
+  fieldDisabledClass,
+} from "./Field.styles";
+import { textMuted } from "../../../styles/tokens.styles";
+
+export interface TextareaProps {
+  /** 입력 값 */
+  value?: string;
+
+  /** 값 변경 콜백 */
+  onValueChange?: (value: string) => void;
+
+  /** 플레이스홀더 */
+  placeholder?: string;
+
+  /** 타이틀 (툴팁) */
+  title?: string;
+
+  /** 비활성화 */
+  disabled?: boolean;
+
+  /** 읽기 전용 */
+  readonly?: boolean;
+
+  /** 에러 상태 */
+  error?: boolean;
+
+  /** 사이즈 */
+  size?: FieldSize;
+
+  /** 테두리 없는 스타일 */
+  inset?: boolean;
+
+  /** 최소 줄 수 (기본값: 1) */
+  minRows?: number;
+
+  /** 커스텀 class */
+  class?: string;
+
+  /** 커스텀 style */
+  style?: JSX.CSSProperties;
+}
+
+const textareaBaseClass = clsx(
+  "absolute left-0 top-0",
+  "size-full",
+  "resize-none overflow-hidden",
+  "bg-transparent",
+  "px-2 py-1",
+  "placeholder:text-base-400 dark:placeholder:text-base-500",
+);
+
+/**
+ * Textarea 컴포넌트
+ *
+ * @example
+ * ```tsx
+ * // 기본 사용
+ * <Textarea value={text()} onValueChange={setText} />
+ *
+ * // 최소 줄 수 지정
+ * <Textarea minRows={3} value={text()} onValueChange={setText} />
+ * ```
+ */
+export const Textarea: Component<TextareaProps> = (props) => {
+  const [local, rest] = splitProps(props, [
+    "value",
+    "onValueChange",
+    "placeholder",
+    "title",
+    "disabled",
+    "readonly",
+    "error",
+    "size",
+    "inset",
+    "minRows",
+    "class",
+    "style",
+  ]);
+
+  const [value, setValue] = createControllableSignal({
+    value: () => local.value ?? "",
+    onChange: () => local.onValueChange,
+  });
+
+  // IME 조합 중 onValueChange를 지연하여 DOM 재생성(한글 조합 끊김) 방지
+  const ime = createIMEHandler((v) => setValue(v));
+
+  // content div용 표시 값 (composingValue 포함 — 셀 너비/높이 결정)
+  const displayValue = () => ime.composingValue() ?? value();
+
+  const handleCompositionStart = () => ime.handleCompositionStart();
+
+  const handleInput: JSX.InputEventHandler<HTMLTextAreaElement, InputEvent> = (e) => {
+    ime.handleInput(e.currentTarget.value, e.isComposing);
+  };
+
+  const handleCompositionEnd: JSX.EventHandler<HTMLTextAreaElement, CompositionEvent> = (e) => {
+    ime.handleCompositionEnd(e.currentTarget.value);
+  };
+
+  const handleKeyDown: JSX.EventHandler<HTMLTextAreaElement, KeyboardEvent> = (e) => {
+    if (e.key === "Enter" && e.altKey) {
+      e.preventDefault();
+      e.stopPropagation();
+
+      const el = e.currentTarget;
+      const start = el.selectionStart;
+      const end = el.selectionEnd;
+      const before = el.value.substring(0, start);
+      const after = el.value.substring(end);
+      const newVal = before + "\n" + after;
+
+      el.value = newVal;
+      el.selectionStart = start + 1;
+      el.selectionEnd = start + 1;
+
+      // input 이벤트를 수동 발행하여 값 동기화
+      el.dispatchEvent(new InputEvent("input", { bubbles: true }));
+    }
+  };
+
+  const contentForHeight = () => {
+    const rows = local.minRows ?? 1;
+    const val = displayValue();
+    const content = val !== "" && val.split("\n").length >= rows ? val : "\n".repeat(rows - 1) + "\u00A0";
+    // 마지막이 줄바꿈이면 빈 줄 높이 확보를 위해 공백 추가
+    return content.endsWith("\n") ? content + "\u00A0" : content;
+  };
+
+  // wrapper 클래스 (includeCustomClass=false일 때 local.class 제외 — inset에서 outer에만 적용)
+  const getWrapperClass = (includeCustomClass: boolean) =>
+    twMerge(
+      fieldTextAreaBaseClass,
+      local.size && textAreaSizeClasses[local.size],
+      local.error && fieldErrorClass,
+      local.disabled && fieldDisabledClass,
+      local.inset && fieldInsetClass,
+
+      includeCustomClass && local.class,
+    );
+
+  const getTextareaClass = () =>
+    twMerge(textareaBaseClass, local.size && textAreaSizeClasses[local.size], local.inset && "p-0");
+
+  // 편집 가능 여부
+  const isEditable = () => !local.disabled && !local.readonly;
+
+  // disabled 전환 시 미커밋 조합 값 flush
+  createEffect(() => {
+    if (!isEditable()) {
+      ime.flushComposition();
+    }
+  });
+
+  return (
+    <Show
+      when={local.inset}
+      fallback={
+        // standalone 모드: 기존 Show 패턴 유지
+        <Show
+          when={isEditable()}
+          fallback={
+            <div
+              {...rest}
+              data-textarea-field
+              class={getWrapperClass(true)}
+              style={{ "white-space": "pre-wrap", "word-break": "break-all", ...local.style }}
+              title={local.title}
+            >
+              {value() ||
+                (local.placeholder != null && local.placeholder !== "" ? (
+                  <span class={textMuted}>{local.placeholder}</span>
+                ) : (
+                  "\u00A0"
+                ))}
+            </div>
+          }
+        >
+          <div
+            {...rest}
+            data-textarea-field
+            class={getWrapperClass(true)}
+            style={{ position: "relative", ...local.style }}
+          >
+            <div
+              data-hidden-content
+              style={{
+                "visibility": "hidden",
+                "white-space": "pre-wrap",
+                "word-break": "break-all",
+              }}
+            >
+              {contentForHeight()}
+            </div>
+
+            <textarea
+              class={getTextareaClass()}
+              value={value()}
+              placeholder={local.placeholder}
+              title={local.title}
+              onKeyDown={handleKeyDown}
+              onInput={handleInput}
+              onCompositionStart={handleCompositionStart}
+              onCompositionEnd={handleCompositionEnd}
+            />
+          </div>
+        </Show>
+      }
+    >
+      {/* inset 모드: dual-element overlay 패턴 */}
+      <div
+        {...rest}
+        data-textarea-field
+        class={twMerge(getWrapperClass(false), "relative", local.class)}
+        style={local.style}
+      >
+        <div
+          data-textarea-field-content
+          style={{
+            "visibility": isEditable() ? "hidden" : undefined,
+            "white-space": "pre-wrap",
+            "word-break": "break-all",
+          }}
+          title={local.title}
+        >
+          {isEditable()
+            ? contentForHeight()
+            : value() ||
+              (local.placeholder != null && local.placeholder !== "" ? (
+                <span class={textMuted}>{local.placeholder}</span>
+              ) : (
+                "\u00A0"
+              ))}
+        </div>
+
+        <Show when={isEditable()}>
+          <textarea
+            class={twMerge(textareaBaseClass, local.size && textAreaSizeClasses[local.size])}
+            value={value()}
+            placeholder={local.placeholder}
+            title={local.title}
+            onKeyDown={handleKeyDown}
+            onInput={handleInput}
+            onCompositionStart={handleCompositionStart}
+            onCompositionEnd={handleCompositionEnd}
+          />
+        </Show>
+      </div>
+    </Show>
+  );
+};

package/src/components/form-control/field/TimePicker.tsx

@@ -0,0 +1,215 @@
+import clsx from "clsx";
+import { type Component, type JSX, Show, splitProps } from "solid-js";
+import { twMerge } from "tailwind-merge";
+import { Time } from "@simplysm/core-common";
+import { createControllableSignal } from "../../../hooks/createControllableSignal";
+import {
+  type FieldSize,
+  fieldBaseClass,
+  fieldSizeClasses,
+  fieldErrorClass,
+  fieldInsetClass,
+  fieldInsetHeightClass,
+  fieldInsetSizeHeightClasses,
+  fieldDisabledClass,
+  fieldInputClass,
+} from "./Field.styles";
+
+type TimePickerUnit = "minute" | "second";
+
+export interface TimePickerProps {
+  /** 입력 값 */
+  value?: Time;
+
+  /** 값 변경 콜백 */
+  onValueChange?: (value: Time | undefined) => void;
+
+  /** 시간 단위 */
+  unit?: TimePickerUnit;
+
+  /** 타이틀 (툴팁) */
+  title?: string;
+
+  /** 비활성화 */
+  disabled?: boolean;
+
+  /** 읽기 전용 */
+  readonly?: boolean;
+
+  /** 에러 상태 */
+  error?: boolean;
+
+  /** 사이즈 */
+  size?: FieldSize;
+
+  /** 테두리 없는 스타일 */
+  inset?: boolean;
+
+  /** 커스텀 class */
+  class?: string;
+
+  /** 커스텀 style */
+  style?: JSX.CSSProperties;
+}
+
+/**
+ * Time 값을 input value용 문자열로 변환
+ */
+function formatValue(value: Time | undefined, unit: TimePickerUnit): string {
+  if (value == null) return "";
+
+  switch (unit) {
+    case "minute":
+      return value.toFormatString("HH:mm");
+    case "second":
+      return value.toFormatString("HH:mm:ss");
+  }
+}
+
+/**
+ * 입력 문자열을 Time으로 변환
+ */
+function parseValue(str: string, unit: TimePickerUnit): Time | undefined {
+  if (str === "") return undefined;
+
+  switch (unit) {
+    case "minute": {
+      // HH:mm 형식
+      const match = /^(\d{2}):(\d{2})$/.exec(str);
+      if (match == null) return undefined;
+      return new Time(Number(match[1]), Number(match[2]), 0);
+    }
+    case "second": {
+      // HH:mm:ss 형식
+      const match = /^(\d{2}):(\d{2}):(\d{2})$/.exec(str);
+      if (match == null) return undefined;
+      return new Time(Number(match[1]), Number(match[2]), Number(match[3]));
+    }
+  }
+}
+
+/**
+ * TimePicker 컴포넌트
+ *
+ * 시간 입력 필드. minute, second 단위를 지원한다.
+ * 내부적으로 string ↔ Time 타입 변환을 처리한다.
+ *
+ * @example
+ * ```tsx
+ * // 시간 입력 (분 단위)
+ * <TimePicker unit="minute" value={time()} onValueChange={setTime} />
+ *
+ * // 시간 입력 (초 단위)
+ * <TimePicker unit="second" value={time()} onValueChange={setTime} />
+ * ```
+ */
+export const TimePicker: Component<TimePickerProps> = (props) => {
+  const [local, rest] = splitProps(props, [
+    "value",
+    "onValueChange",
+    "unit",
+    "title",
+    "disabled",
+    "readonly",
+    "error",
+    "size",
+    "inset",
+    "class",
+    "style",
+  ]);
+
+  // 기본 단위는 minute
+  const fieldType = () => local.unit ?? "minute";
+
+  // controlled/uncontrolled 패턴 지원
+  const [value, setValue] = createControllableSignal({
+    value: () => local.value,
+    onChange: () => local.onValueChange,
+  });
+
+  // 표시 값
+  const displayValue = () => formatValue(value(), fieldType());
+
+  // 값 확정 핸들러 (포커스 아웃 또는 Enter 시)
+  const handleChange: JSX.EventHandler<HTMLInputElement, Event> = (e) => {
+    const newValue = e.currentTarget.value;
+    const parsed = parseValue(newValue, fieldType());
+    setValue(parsed);
+  };
+
+  // wrapper 클래스
+  const getWrapperClass = (includeCustomClass: boolean) =>
+    twMerge(
+      fieldBaseClass,
+      local.size && fieldSizeClasses[local.size],
+      local.error && fieldErrorClass,
+      local.disabled && fieldDisabledClass,
+      local.inset && fieldInsetClass + " block",
+      local.inset && (local.size ? fieldInsetSizeHeightClasses[local.size] : fieldInsetHeightClass),
+
+      includeCustomClass && local.class,
+    );
+
+  // 편집 가능 여부
+  const isEditable = () => !local.disabled && !local.readonly;
+
+  // step 속성 (second일 때 1)
+  const getStep = () => (fieldType() === "second" ? "1" : undefined);
+
+  return (
+    <Show
+      when={local.inset}
+      fallback={
+        // standalone 모드
+        <Show
+          when={isEditable()}
+          fallback={
+            <div
+              {...rest}
+              data-time-field
+              class={twMerge(getWrapperClass(true), "sd-time-field")}
+              style={local.style}
+              title={local.title}
+            >
+              {displayValue() || "\u00A0"}
+            </div>
+          }
+        >
+          <div {...rest} data-time-field class={getWrapperClass(true)} style={local.style}>
+            <input
+              type="time"
+              class={fieldInputClass}
+              value={displayValue()}
+              title={local.title}
+              step={getStep()}
+              onChange={handleChange}
+            />
+          </div>
+        </Show>
+      }
+    >
+      {/* inset 모드: dual-element overlay 패턴 */}
+      <div
+        {...rest}
+        data-time-field
+        class={twMerge(getWrapperClass(false), "relative", local.class)}
+        style={local.style}
+      >
+        <div data-time-field-content style={{ visibility: isEditable() ? "hidden" : undefined }} title={local.title}>
+          {displayValue() || "\u00A0"}
+        </div>
+
+        <Show when={isEditable()}>
+          <input
+            type="time"
+            class={clsx(fieldInputClass, "absolute left-0 top-0 size-full", "px-2 py-1")}
+            value={displayValue()}
+            title={local.title}
+            step={getStep()}
+            onChange={handleChange}
+          />
+        </Show>
+      </div>
+    </Show>
+  );
+};

package/src/components/form-control/numpad/Numpad.tsx

@@ -0,0 +1,218 @@
+import { type Component, type JSX, createSignal, createEffect, Show } from "solid-js";
+import clsx from "clsx";
+import { twMerge } from "tailwind-merge";
+import { createControllableSignal } from "../../../hooks/createControllableSignal";
+import { Button } from "../Button";
+import { NumberInput } from "../field/NumberInput";
+import { Icon } from "../../display/Icon";
+import { IconEraser, IconArrowLeft } from "@tabler/icons-solidjs";
+import type { ComponentSize } from "../../../styles/tokens.styles";
+
+export interface NumpadProps {
+  /** 입력 값 */
+  value?: number;
+  /** 값 변경 콜백 */
+  onValueChange?: (value: number | undefined) => void;
+  /** 플레이스홀더 */
+  placeholder?: string;
+  /** 필수 입력 여부 */
+  required?: boolean;
+  /** 텍스트 필드 직접 입력 비활성화 */
+  inputDisabled?: boolean;
+  /** ENT 버튼 표시 */
+  useEnterButton?: boolean;
+  /** - 버튼 표시 */
+  useMinusButton?: boolean;
+  /** ENT 클릭 콜백 */
+  onEnterButtonClick?: () => void;
+  /** 사이즈 */
+  size?: ComponentSize;
+  /** 커스텀 class */
+  class?: string;
+  /** 커스텀 style */
+  style?: JSX.CSSProperties;
+}
+
+const baseClass = clsx("grid grid-cols-3", "gap-0.5", "w-auto");
+
+/**
+ * inputStr을 파싱하여 숫자로 변환한다.
+ * 빈 문자열이나 "-"만 있는 경우 undefined를 반환한다.
+ */
+function parseInputStr(str: string): number | undefined {
+  if (str === "" || str === "-" || str === "." || str === "-.") return undefined;
+  const num = Number(str);
+  return Number.isNaN(num) ? undefined : num;
+}
+
+/**
+ * 숫자를 inputStr로 변환한다.
+ */
+function valueToInputStr(value: number | undefined): string {
+  if (value == null) return "";
+  return String(value);
+}
+
+export const Numpad: Component<NumpadProps> = (props) => {
+  // controlled/uncontrolled 패턴
+  const [value, setValue] = createControllableSignal({
+    value: () => props.value,
+    onChange: () => props.onValueChange,
+  });
+
+  // 내부 입력 문자열 상태
+  const [inputStr, setInputStr] = createSignal<string>("");
+  // 버튼 입력 중에는 외부 value → inputStr 동기화를 방지
+  let isButtonInput = false;
+
+  // 외부 값 변경 시 inputStr 동기화 (버튼 입력 중이 아닐 때만)
+  createEffect(() => {
+    const val = value();
+    if (!isButtonInput) {
+      setInputStr(valueToInputStr(val));
+    }
+    isButtonInput = false;
+  });
+
+  // inputStr을 파싱하여 value로 반영
+  const applyInputStr = (str: string) => {
+    isButtonInput = true;
+    setInputStr(str);
+    setValue(parseInputStr(str));
+  };
+
+  // 숫자 버튼 (0-9)
+  const handleDigit = (digit: string) => {
+    applyInputStr(inputStr() + digit);
+  };
+
+  // 소수점 버튼
+  const handleDot = () => {
+    const current = inputStr();
+    if (current.includes(".")) return;
+    applyInputStr(current + ".");
+  };
+
+  // C (클리어) 버튼
+  const handleClear = () => {
+    applyInputStr("");
+  };
+
+  // BS (백스페이스) 버튼
+  const handleBackspace = () => {
+    const current = inputStr();
+    if (current.length === 0) return;
+    applyInputStr(current.slice(0, -1));
+  };
+
+  // - (마이너스 토글) 버튼
+  const handleMinus = () => {
+    const current = inputStr();
+    if (current.startsWith("-")) {
+      applyInputStr(current.slice(1));
+    } else {
+      applyInputStr("-" + current);
+    }
+  };
+
+  // ENT 버튼
+  const handleEnter = () => {
+    props.onEnterButtonClick?.();
+  };
+
+  // NumberInput 값 변경 핸들러
+  const handleFieldValueChange = (val: number | undefined) => {
+    setValue(val);
+    setInputStr(valueToInputStr(val));
+  };
+
+  const buttonSize = () => props.size ?? "lg";
+
+  return (
+    <div data-numpad class={twMerge(baseClass, props.class)} style={props.style}>
+      {/* Row 1: NumberInput + optional ENT */}
+      <div class={clsx("flex", props.useEnterButton ? "col-span-2" : "col-span-3")}>
+        <NumberInput
+          value={value()}
+          onValueChange={handleFieldValueChange}
+          placeholder={props.placeholder}
+          readonly={props.inputDisabled}
+          inset
+          class="w-full"
+          comma={false}
+        />
+      </div>
+      <Show when={props.useEnterButton}>
+        <Button
+          theme="primary"
+          variant="solid"
+          size={buttonSize()}
+          inset
+          disabled={props.required && value() == null}
+          onClick={handleEnter}
+        >
+          ENT
+        </Button>
+      </Show>
+
+      {/* Row 2: optional Minus + C + BS */}
+      <Show when={props.useMinusButton}>
+        <Button size={buttonSize()} inset onClick={handleMinus}>
+          -
+        </Button>
+      </Show>
+      <Button
+        size={buttonSize()}
+        inset
+        onClick={handleClear}
+        class={clsx(props.useMinusButton ? "col-span-1" : "col-span-2", "text-danger-500")}
+      >
+        <Icon icon={IconEraser} />
+      </Button>
+      <Button size={buttonSize()} inset onClick={handleBackspace} class="text-warning-500">
+        <Icon icon={IconArrowLeft} />
+      </Button>
+
+      {/* Row 3: 7 8 9 */}
+      <Button size={buttonSize()} inset onClick={() => handleDigit("7")}>
+        7
+      </Button>
+      <Button size={buttonSize()} inset onClick={() => handleDigit("8")}>
+        8
+      </Button>
+      <Button size={buttonSize()} inset onClick={() => handleDigit("9")}>
+        9
+      </Button>
+
+      {/* Row 4: 4 5 6 */}
+      <Button size={buttonSize()} inset onClick={() => handleDigit("4")}>
+        4
+      </Button>
+      <Button size={buttonSize()} inset onClick={() => handleDigit("5")}>
+        5
+      </Button>
+      <Button size={buttonSize()} inset onClick={() => handleDigit("6")}>
+        6
+      </Button>
+
+      {/* Row 5: 1 2 3 */}
+      <Button size={buttonSize()} inset onClick={() => handleDigit("1")}>
+        1
+      </Button>
+      <Button size={buttonSize()} inset onClick={() => handleDigit("2")}>
+        2
+      </Button>
+      <Button size={buttonSize()} inset onClick={() => handleDigit("3")}>
+        3
+      </Button>
+
+      {/* Row 6: 0 (colspan 2) + . */}
+      <Button size={buttonSize()} inset class="col-span-2" onClick={() => handleDigit("0")}>
+        0
+      </Button>
+      <Button size={buttonSize()} inset onClick={handleDot}>
+        .
+      </Button>
+    </div>
+  );
+};