@simplysm/solid 13.0.75 → 13.0.77

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

@@ -1,12 +1,13 @@
 import clsx from "clsx";
-import { type Component, createEffect, createMemo, type JSX, Show, splitProps } from "solid-js";
+import { type Component, createEffect, createMemo, type JSX, splitProps } from "solid-js";
 import { twMerge } from "tailwind-merge";
+import { text } from "../../../styles/base.styles";
 import { createControllableSignal } from "../../../hooks/createControllableSignal";
 import { createIMEHandler } from "../../../hooks/createIMEHandler";
 import { type FieldSize, textAreaSizeClasses, getTextareaWrapperClass } from "./Field.styles";
 import { PlaceholderFallback } from "./FieldPlaceholder";
-import { Invalid } from "../../form-control/Invalid";
-import { useI18n } from "../../../providers/i18n/I18nContext";
+import { FieldShell } from "./FieldShell";
+import { useI18n } from "../../../providers/i18n/I18nProvider";
 
 export interface TextareaProps {
   /** Input value */
@@ -25,7 +26,7 @@ export interface TextareaProps {
   disabled?: boolean;
 
   /** Read-only */
-  readonly?: boolean;
+  readOnly?: boolean;
 
   /** Size */
   size?: FieldSize;
@@ -48,8 +49,8 @@ export interface TextareaProps {
   /** Custom validation function */
   validate?: (value: string) => string | undefined;
 
-  /** touchMode: Show error only after blur */
-  touchMode?: boolean;
+  /** lazyValidation: Show error only after blur */
+  lazyValidation?: boolean;
 
   /** Custom class */
   class?: string;
@@ -63,8 +64,7 @@ const textareaBaseClass = clsx(
   "size-full",
   "resize-none overflow-hidden",
   "bg-transparent",
-  "px-2 py-1",
-  "placeholder:text-base-400 dark:placeholder:text-base-500",
+  text.placeholder,
 );
 
 /**
@@ -86,7 +86,7 @@ export const Textarea: Component<TextareaProps> = (props) => {
     "placeholder",
     "title",
     "disabled",
-    "readonly",
+    "readOnly",
     "size",
     "inset",
     "minRows",
@@ -94,7 +94,7 @@ export const Textarea: Component<TextareaProps> = (props) => {
     "minLength",
     "maxLength",
     "validate",
-    "touchMode",
+    "lazyValidation",
     "class",
     "style",
   ]);
@@ -154,18 +154,21 @@ export const Textarea: Component<TextareaProps> = (props) => {
 
   // Wrapper class (exclude local.class when includeCustomClass=false — only apply to outer in inset)
   const getWrapperClass = (includeCustomClass: boolean) =>
-    getTextareaWrapperClass({
-      size: local.size,
-      disabled: local.disabled,
-      inset: local.inset,
-      includeCustomClass: includeCustomClass && local.class,
-    });
+    twMerge(
+      getTextareaWrapperClass({
+        size: local.size,
+        disabled: local.disabled,
+        inset: local.inset,
+        includeCustomClass: includeCustomClass && local.class,
+      }),
+      "whitespace-pre-wrap break-all",
+    );
 
   const getTextareaClass = () =>
-    twMerge(textareaBaseClass, local.size && textAreaSizeClasses[local.size], local.inset && "p-0");
+    twMerge(textareaBaseClass, textAreaSizeClasses[local.size ?? "default"], local.inset && "p-0");
 
   // Whether editable
-  const isEditable = () => !local.disabled && !local.readonly;
+  const isEditable = () => !local.disabled && !local.readOnly;
 
   // Flush uncommitted composition value when toggling disabled
   createEffect(() => {
@@ -188,99 +191,52 @@ export const Textarea: Component<TextareaProps> = (props) => {
   });
 
   return (
-    <Invalid message={errorMsg()} variant="border" touchMode={local.touchMode}>
-      <Show
-        when={local.inset}
-        fallback={
-          // standalone mode: maintain existing Show pattern
-          <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}
-              >
-                <PlaceholderFallback value={value()} placeholder={local.placeholder} />
-              </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>
-        }
+    <FieldShell
+      errorMsg={errorMsg()}
+      invalidVariant={local.inset ? "dot" : "border"}
+      lazyValidation={local.lazyValidation}
+      inset={local.inset}
+      isEditable={isEditable()}
+      wrapperClass={getWrapperClass}
+      dataAttr="data-textarea-field"
+      readonlyExtraClass="sd-textarea-field"
+      style={local.style}
+      title={local.title}
+      class={local.class}
+      rest={rest}
+      displayContent={
+        <PlaceholderFallback value={displayValue()} placeholder={local.placeholder} />
+      }
+      renderSizing={() => (
+        isEditable() ? (
+          <span style={{ "white-space": "pre-wrap", "word-break": "break-all" }}>
+            {contentForHeight()}
+          </span>
+        ) : (
+          <PlaceholderFallback value={displayValue()} placeholder={local.placeholder} />
+        )
+      )}
+    >
+      <div
+        data-hidden-content
+        style={{
+          "visibility": "hidden",
+          "white-space": "pre-wrap",
+          "word-break": "break-all",
+        }}
       >
-        {/* inset mode: dual-element overlay pattern */}
-        <div
-          {...rest}
-          data-textarea-field
-          class={clsx("relative", local.class)}
-          style={local.style}
-        >
-          <div
-            data-textarea-field-content
-            class={getWrapperClass(false)}
-            style={{
-              "visibility": isEditable() ? "hidden" : undefined,
-              "white-space": "pre-wrap",
-              "word-break": "break-all",
-            }}
-            title={local.title}
-          >
-            {isEditable() ? (
-              contentForHeight()
-            ) : (
-              <PlaceholderFallback value={value()} placeholder={local.placeholder} />
-            )}
-          </div>
-
-          <Show when={isEditable()}>
-            <div
-              class={twMerge(getWrapperClass(false), "absolute left-0 top-0 size-full")}
-              style={{ position: "relative" }}
-            >
-              <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}
-              />
-            </div>
-          </Show>
-        </div>
-      </Show>
-    </Invalid>
+        {contentForHeight()}
+      </div>
+      <textarea
+        class={getTextareaClass()}
+        value={value()}
+        placeholder={local.placeholder}
+        title={local.title}
+        onKeyDown={handleKeyDown}
+        onInput={handleInput}
+        onCompositionStart={handleCompositionStart}
+        onCompositionEnd={handleCompositionEnd}
+      />
+    </FieldShell>
   );
 };

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

@@ -1,11 +1,9 @@
-import clsx from "clsx";
-import { type Component, createMemo, type JSX, Show, splitProps } from "solid-js";
-import { twMerge } from "tailwind-merge";
+import { type Component, createMemo, type JSX, splitProps } from "solid-js";
 import { Time } from "@simplysm/core-common";
 import { createControllableSignal } from "../../../hooks/createControllableSignal";
 import { type FieldSize, fieldInputClass, getFieldWrapperClass } from "./Field.styles";
-import { Invalid } from "../../form-control/Invalid";
-import { useI18n } from "../../../providers/i18n/I18nContext";
+import { useI18n } from "../../../providers/i18n/I18nProvider";
+import { FieldShell } from "./FieldShell";
 
 type TimePickerUnit = "minute" | "second";
 
@@ -26,7 +24,7 @@ export interface TimePickerProps {
   disabled?: boolean;
 
   /** Read-only */
-  readonly?: boolean;
+  readOnly?: boolean;
 
   /** Size */
   size?: FieldSize;
@@ -52,8 +50,8 @@ export interface TimePickerProps {
   /** Custom validation function */
   validate?: (value: Time | undefined) => string | undefined;
 
-  /** touchMode: show errors only after blur */
-  touchMode?: boolean;
+  /** lazyValidation: show errors only after blur */
+  lazyValidation?: boolean;
 }
 
 /**
@@ -114,7 +112,7 @@ export const TimePicker: Component<TimePickerProps> = (props) => {
     "unit",
     "title",
     "disabled",
-    "readonly",
+    "readOnly",
     "size",
     "inset",
     "class",
@@ -123,7 +121,7 @@ export const TimePicker: Component<TimePickerProps> = (props) => {
     "max",
     "required",
     "validate",
-    "touchMode",
+    "lazyValidation",
   ]);
 
   const i18n = useI18n();
@@ -158,7 +156,7 @@ export const TimePicker: Component<TimePickerProps> = (props) => {
     });
 
   // Editable check
-  const isEditable = () => !local.disabled && !local.readonly;
+  const isEditable = () => !local.disabled && !local.readOnly;
 
   // Step attribute (1 when second)
   const getStep = () => (fieldType() === "second" ? "1" : undefined);
@@ -177,69 +175,30 @@ export const TimePicker: Component<TimePickerProps> = (props) => {
   });
 
   return (
-    <Invalid
-      message={errorMsg()}
-      variant={local.inset ? "dot" : "border"}
-      touchMode={local.touchMode}
+    <FieldShell
+      errorMsg={errorMsg()}
+      invalidVariant={local.inset ? "dot" : "border"}
+      lazyValidation={local.lazyValidation}
+      inset={local.inset}
+      isEditable={isEditable()}
+      wrapperClass={getWrapperClass}
+      dataAttr="data-time-field"
+      readonlyExtraClass="sd-time-field"
+      style={local.style}
+      title={local.title}
+      class={local.class}
+      rest={rest}
+      displayContent={displayValue() || "\u00A0"}
     >
-      <Show
-        when={local.inset}
-        fallback={
-          // standalone mode
-          <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()}
-                autocomplete="one-time-code"
-                onChange={handleChange}
-              />
-            </div>
-          </Show>
-        }
-      >
-        {/* inset mode: dual-element overlay pattern */}
-        <div {...rest} data-time-field class={clsx("relative", local.class)} style={local.style}>
-          <div
-            data-time-field-content
-            class={getWrapperClass(false)}
-            style={{ visibility: isEditable() ? "hidden" : undefined }}
-            title={local.title}
-          >
-            {displayValue() || "\u00A0"}
-          </div>
-
-          <Show when={isEditable()}>
-            <div class={twMerge(getWrapperClass(false), "absolute left-0 top-0 size-full")}>
-              <input
-                type="time"
-                class={fieldInputClass}
-                value={displayValue()}
-                title={local.title}
-                step={getStep()}
-                autocomplete="one-time-code"
-                onChange={handleChange}
-              />
-            </div>
-          </Show>
-        </div>
-      </Show>
-    </Invalid>
+      <input
+        type="time"
+        class={fieldInputClass}
+        value={displayValue()}
+        title={local.title}
+        step={getStep()}
+        autocomplete="one-time-code"
+        onChange={handleChange}
+      />
+    </FieldShell>
   );
 };

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

@@ -6,8 +6,8 @@ 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";
-import { useI18n } from "../../../providers/i18n/I18nContext";
+import { gap, type ComponentSize } from "../../../styles/control.styles";
+import { useI18n } from "../../../providers/i18n/I18nProvider";
 
 export interface NumpadProps {
   /** Input value */
@@ -34,7 +34,6 @@ export interface NumpadProps {
   style?: JSX.CSSProperties;
 }
 
-const baseClass = clsx("grid grid-cols-3", "gap-0.5", "w-auto");
 
 /**
  * Parse inputStr and convert to number.
@@ -131,17 +130,17 @@ export const Numpad: Component<NumpadProps> = (props) => {
   const buttonSize = () => props.size ?? "lg";
 
   return (
-    <div data-numpad class={twMerge(baseClass, props.class)} style={props.style}>
+    <div data-numpad class={twMerge(clsx("grid grid-cols-3", gap.sm, "w-auto"), 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}
+          readOnly={props.inputDisabled}
           inset
           class="w-full"
-          comma={false}
+          useGrouping={false}
         />
       </div>
       <Show when={props.useEnterButton}>