@simplysm/solid 13.0.75 → 13.0.76

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

@@ -1,5 +1,4 @@
 import {
-  createContext,
   createEffect,
   createMemo,
   createSignal,
@@ -7,11 +6,8 @@ import {
   Show,
   splitProps,
 } from "solid-js";
-import clsx from "clsx";
-import { twMerge } from "tailwind-merge";
 import { createControllableSignal } from "../../../hooks/createControllableSignal";
-import { createSlotComponent } from "../../../helpers/createSlotComponent";
-import { createSlotSignal, type SlotAccessor } from "../../../hooks/createSlotSignal";
+import { createSlot } from "../../../helpers/createSlot";
 import {
   type FieldSize,
   fieldInputClass,
@@ -19,8 +15,9 @@ import {
   getFieldWrapperClass,
 } from "./Field.styles";
 import { PlaceholderFallback } from "./FieldPlaceholder";
-import { Invalid } from "../../form-control/Invalid";
-import { useI18n } from "../../../providers/i18n/I18nContext";
+import { useI18n } from "../../../providers/i18n/I18nProvider";
+import { FieldShell } from "./FieldShell";
+import clsx from "clsx";
 
 // NumberInput-specific input style (right-aligned + spinner hidden)
 const numberInputClass = clsx(
@@ -30,13 +27,8 @@ const numberInputClass = clsx(
   "[&::-webkit-inner-spin-button]:appearance-none",
 );
 
-interface NumberInputSlotsContextValue {
-  setPrefix: (content: SlotAccessor) => void;
-}
-
-const NumberInputSlotsContext = createContext<NumberInputSlotsContextValue>();
-
-const NumberInputPrefix = createSlotComponent(NumberInputSlotsContext, (ctx) => ctx.setPrefix);
+const [NumberInputPrefixSlot, createNumberInputPrefixAccessor] = createSlot<{ children: JSX.Element }>();
+export const NumberInputPrefix = NumberInputPrefixSlot;
 
 export interface NumberInputProps {
   /** Input value */
@@ -46,10 +38,10 @@ export interface NumberInputProps {
   onValueChange?: (value: number | undefined) => void;
 
   /** Display thousand separator (default: true) */
-  comma?: boolean;
+  useGrouping?: boolean;
 
   /** Minimum decimal places */
-  minDigits?: number;
+  minimumFractionDigits?: number;
 
   /** Placeholder text */
   placeholder?: string;
@@ -61,7 +53,7 @@ export interface NumberInputProps {
   disabled?: boolean;
 
   /** Read-only */
-  readonly?: boolean;
+  readOnly?: boolean;
 
   /** Size */
   size?: FieldSize;
@@ -97,24 +89,24 @@ export interface NumberInputProps {
 /**
  * Convert number to display string
  * @param value - Numeric value
- * @param useComma - Whether to use thousand separator
- * @param minDigits - Minimum decimal places
+ * @param useGrouping - Whether to use thousand separator
+ * @param minimumFractionDigits - Minimum decimal places
  * @returns Display string
  */
-function formatNumber(value: number | undefined, useComma: boolean, minDigits?: number): string {
+function formatNumber(value: number | undefined, useGrouping: boolean, minimumFractionDigits?: number): string {
   if (value == null) return "";
 
   let result: string;
 
-  if (minDigits != null && minDigits > 0) {
+  if (minimumFractionDigits != null && minimumFractionDigits > 0) {
     // Check current decimal places
     const valueStr = String(value);
     const decimalIndex = valueStr.indexOf(".");
     const currentDigits = decimalIndex >= 0 ? valueStr.length - decimalIndex - 1 : 0;
 
     // Pad if less than minimum decimal places
-    if (currentDigits < minDigits) {
-      result = value.toFixed(minDigits);
+    if (currentDigits < minimumFractionDigits) {
+      result = value.toFixed(minimumFractionDigits);
     } else {
       result = valueStr;
     }
@@ -122,7 +114,7 @@ function formatNumber(value: number | undefined, useComma: boolean, minDigits?:
     result = String(value);
   }
 
-  if (useComma) {
+  if (useGrouping) {
     // Separate integer and decimal parts
     const dotIndex = result.indexOf(".");
     const integerPart = dotIndex >= 0 ? result.slice(0, dotIndex) : result;
@@ -184,10 +176,10 @@ interface NumberInputComponent {
  * <NumberInput value={num()} onValueChange={setNum} />
  *
  * // Without thousand separator
- * <NumberInput value={num()} comma={false} />
+ * <NumberInput value={num()} useGrouping={false} />
  *
  * // Specify minimum decimal places
- * <NumberInput value={price()} minDigits={2} />
+ * <NumberInput value={price()} minimumFractionDigits={2} />
  *
  * // Prefix slot
  * <NumberInput value={price()}>
@@ -199,12 +191,12 @@ export const NumberInput: NumberInputComponent = (props) => {
   const [local, rest] = splitProps(props, [
     "value",
     "onValueChange",
-    "comma",
-    "minDigits",
+    "useGrouping",
+    "minimumFractionDigits",
     "placeholder",
     "title",
     "disabled",
-    "readonly",
+    "readOnly",
     "size",
     "inset",
     "required",
@@ -229,14 +221,14 @@ export const NumberInput: NumberInputComponent = (props) => {
     onChange: () => local.onValueChange,
   });
 
-  const [prefix, setPrefix] = createSlotSignal();
+  const [prefix, PrefixProvider] = createNumberInputPrefixAccessor();
   const prefixEl = () => prefix() !== undefined;
 
   // Sync input string when external value changes
   createEffect(() => {
     const val = value();
     if (!isEditing()) {
-      setInputStr(formatNumber(val, local.comma ?? true, local.minDigits));
+      setInputStr(formatNumber(val, local.useGrouping ?? true, local.minimumFractionDigits));
     }
   });
 
@@ -245,7 +237,7 @@ export const NumberInput: NumberInputComponent = (props) => {
     if (isEditing()) {
       return inputStr();
     }
-    return formatNumber(value(), local.comma ?? true, local.minDigits);
+    return formatNumber(value(), local.useGrouping ?? true, local.minimumFractionDigits);
   };
 
   // Input handler
@@ -283,7 +275,7 @@ export const NumberInput: NumberInputComponent = (props) => {
   const handleBlur: JSX.FocusEventHandler<HTMLInputElement, FocusEvent> = () => {
     setIsEditing(false);
     // On blur, apply formatting
-    setInputStr(formatNumber(value(), local.comma ?? true, local.minDigits));
+    setInputStr(formatNumber(value(), local.useGrouping ?? true, local.minimumFractionDigits));
   };
 
   // Wrapper class (exclude local.class in inset branch)
@@ -296,7 +288,7 @@ export const NumberInput: NumberInputComponent = (props) => {
       extra: prefixEl() && fieldGapClasses[local.size ?? "default"],
     });
 
-  const isEditable = () => !local.disabled && !local.readonly;
+  const isEditable = () => !local.disabled && !local.readOnly;
 
   // Validation message (check in order, return first error)
   const errorMsg = createMemo(() => {
@@ -310,102 +302,51 @@ export const NumberInput: NumberInputComponent = (props) => {
   });
 
   return (
-    <NumberInputSlotsContext.Provider value={{ setPrefix }}>
+    <PrefixProvider>
       {local.children}
-      <Invalid
-        message={errorMsg()}
-        variant={local.inset ? "dot" : "border"}
+      <FieldShell
+        errorMsg={errorMsg()}
+        invalidVariant={local.inset ? "dot" : "border"}
         touchMode={local.touchMode}
-      >
-        <Show
-          when={local.inset}
-          fallback={
-            // standalone mode: keep existing Show pattern
-            <Show
-              when={isEditable()}
-              fallback={
-                <div
-                  {...rest}
-                  data-number-field
-                  class={twMerge(getWrapperClass(true), "sd-number-field", "justify-end")}
-                  style={local.style}
-                  title={local.title}
-                >
-                  <Show when={prefix()}>
-                    <span class="shrink-0">{prefix()!()}</span>
-                  </Show>
-                  <PlaceholderFallback
-                    value={formatNumber(value(), local.comma ?? true, local.minDigits)}
-                    placeholder={local.placeholder}
-                  />
-                </div>
-              }
-            >
-              <div {...rest} data-number-field class={getWrapperClass(true)} style={local.style}>
-                <Show when={prefix()}>
-                  <span class="shrink-0">{prefix()!()}</span>
-                </Show>
-                <input
-                  type="text"
-                  inputmode="numeric"
-                  class={numberInputClass}
-                  value={displayValue()}
-                  placeholder={local.placeholder}
-                  title={local.title}
-                  autocomplete="one-time-code"
-                  onInput={handleInput}
-                  onFocus={handleFocus}
-                  onBlur={handleBlur}
-                />
-              </div>
+        inset={local.inset}
+        isEditable={isEditable()}
+        wrapperClass={getWrapperClass}
+        dataAttr="data-number-field"
+        readonlyExtraClass="sd-number-field justify-end"
+        sizingExtraClass="justify-end"
+        style={local.style}
+        title={local.title}
+        class={local.class}
+        rest={rest}
+        displayContent={
+          <>
+            <Show when={prefix()}>
+              <span class="shrink-0">{prefix()!.children}</span>
             </Show>
-          }
-        >
-          {/* inset mode: dual-element overlay pattern */}
-          <div
-            {...rest}
-            data-number-field
-            class={clsx("relative", local.class)}
-            style={local.style}
-          >
-            <div
-              data-number-field-content
-              class={twMerge(getWrapperClass(false), "justify-end")}
-              style={{ visibility: isEditable() ? "hidden" : undefined }}
-              title={local.title}
-            >
-              <Show when={prefix()}>
-                <span class="shrink-0">{prefix()!()}</span>
-              </Show>
-              <PlaceholderFallback
-                value={formatNumber(value(), local.comma ?? true, local.minDigits)}
-                placeholder={local.placeholder}
-              />
-            </div>
-
-            <Show when={isEditable()}>
-              <div class={twMerge(getWrapperClass(false), "absolute left-0 top-0 size-full")}>
-                <Show when={prefix()}>
-                  <span class="shrink-0">{prefix()!()}</span>
-                </Show>
-                <input
-                  type="text"
-                  inputmode="numeric"
-                  class={numberInputClass}
-                  value={displayValue()}
-                  placeholder={local.placeholder}
-                  title={local.title}
-                  autocomplete="one-time-code"
-                  onInput={handleInput}
-                  onFocus={handleFocus}
-                  onBlur={handleBlur}
-                />
-              </div>
-            </Show>
-          </div>
+            <PlaceholderFallback
+              value={formatNumber(value(), local.useGrouping ?? true, local.minimumFractionDigits)}
+              placeholder={local.placeholder}
+            />
+          </>
+        }
+      >
+        <Show when={prefix()}>
+          <span class="shrink-0">{prefix()!.children}</span>
         </Show>
-      </Invalid>
-    </NumberInputSlotsContext.Provider>
+        <input
+          type="text"
+          inputmode="numeric"
+          class={numberInputClass}
+          value={displayValue()}
+          placeholder={local.placeholder}
+          title={local.title}
+          autocomplete="one-time-code"
+          onInput={handleInput}
+          onFocus={handleFocus}
+          onBlur={handleBlur}
+        />
+      </FieldShell>
+    </PrefixProvider>
   );
 };
 

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

@@ -1,9 +1,6 @@
-import clsx from "clsx";
-import { createContext, createEffect, createMemo, type JSX, Show, splitProps } from "solid-js";
-import { twMerge } from "tailwind-merge";
+import { createEffect, createMemo, type JSX, Show, splitProps } from "solid-js";
 import { createControllableSignal } from "../../../hooks/createControllableSignal";
-import { createSlotComponent } from "../../../helpers/createSlotComponent";
-import { createSlotSignal, type SlotAccessor } from "../../../hooks/createSlotSignal";
+import { createSlot } from "../../../helpers/createSlot";
 import { createIMEHandler } from "../../../hooks/createIMEHandler";
 import {
   fieldGapClasses,
@@ -12,18 +9,11 @@ import {
   getFieldWrapperClass,
 } 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";
 
-interface TextInputSlotsContextValue {
-  setPrefix: (content: SlotAccessor) => void;
-}
-
-const TextInputSlotsContext = createContext<TextInputSlotsContextValue>();
-
-type TextInputType = "text" | "password" | "email";
-
-const TextInputPrefix = createSlotComponent(TextInputSlotsContext, (ctx) => ctx.setPrefix);
+const [TextInputPrefixSlot, createTextInputPrefixAccessor] = createSlot<{ children: JSX.Element }>();
+export const TextInputPrefix = TextInputPrefixSlot;
 
 export interface TextInputProps {
   /** Input value */
@@ -33,7 +23,7 @@ export interface TextInputProps {
   onValueChange?: (value: string) => void;
 
   /** Input type */
-  type?: TextInputType;
+  type?: "text" | "password" | "email";
 
   /** Placeholder */
   placeholder?: string;
@@ -48,7 +38,7 @@ export interface TextInputProps {
   disabled?: boolean;
 
   /** Read-only */
-  readonly?: boolean;
+  readOnly?: boolean;
 
   /** Size */
   size?: FieldSize;
@@ -68,8 +58,8 @@ export interface TextInputProps {
   /** Maximum length */
   maxLength?: number;
 
-  /** Input pattern (regex string) */
-  pattern?: string;
+  /** Input pattern (regex string or RegExp) */
+  pattern?: string | RegExp;
 
   /** Custom validation function */
   validate?: (value: string) => string | undefined;
@@ -164,7 +154,7 @@ const TextInputInner = (props: TextInputProps) => {
     "title",
     "autocomplete",
     "disabled",
-    "readonly",
+    "readOnly",
     "size",
     "inset",
     "format",
@@ -229,8 +219,7 @@ const TextInputInner = (props: TextInputProps) => {
     ime.handleCompositionEnd(extractValue(e.currentTarget));
   };
 
-  // Register Prefix slot Context
-  const [prefix, setPrefix] = createSlotSignal();
+  const [prefix, PrefixProvider] = createTextInputPrefixAccessor();
   const prefixEl = () => prefix() !== undefined;
 
   // Wrapper class (exclude local.class when includeCustomClass=false — only apply to outer in inset)
@@ -244,7 +233,7 @@ const TextInputInner = (props: TextInputProps) => {
     });
 
   // Whether editable
-  const isEditable = () => !local.disabled && !local.readonly;
+  const isEditable = () => !local.disabled && !local.readOnly;
 
   // Flush uncommitted composition value when toggling disabled
   createEffect(() => {
@@ -262,101 +251,54 @@ const TextInputInner = (props: TextInputProps) => {
         return i18n.t("validation.minLength", { min: String(local.minLength) });
       if (local.maxLength != null && v.length > local.maxLength)
         return i18n.t("validation.maxLength", { max: String(local.maxLength) });
-      if (local.pattern != null && !new RegExp(local.pattern).test(v))
+      if (local.pattern != null && !(local.pattern instanceof RegExp ? local.pattern : new RegExp(local.pattern)).test(v))
         return i18n.t("validation.invalidFormat");
     }
     return local.validate?.(v);
   });
 
   return (
-    <TextInputSlotsContext.Provider value={{ setPrefix }}>
+    <PrefixProvider>
       {local.children}
-      <Invalid
-        message={errorMsg()}
-        variant={local.inset ? "dot" : "border"}
+      <FieldShell
+        errorMsg={errorMsg()}
+        invalidVariant={local.inset ? "dot" : "border"}
         touchMode={local.touchMode}
-      >
-        <Show
-          when={local.inset}
-          fallback={
-            // standalone mode: maintain existing Show pattern
-            <Show
-              when={isEditable()}
-              fallback={
-                <div
-                  {...rest}
-                  data-text-field
-                  class={twMerge(getWrapperClass(true), "sd-text-field")}
-                  style={local.style}
-                  title={local.title}
-                >
-                  <Show when={prefix()}>
-                    <span class="shrink-0">{prefix()!()}</span>
-                  </Show>
-                  <PlaceholderFallback value={displayValue()} placeholder={local.placeholder} />
-                </div>
-              }
-            >
-              <div {...rest} data-text-field class={getWrapperClass(true)} style={local.style}>
-                <Show when={prefix()}>
-                  <span class="shrink-0">{prefix()!()}</span>
-                </Show>
-                <input
-                  type={local.type ?? "text"}
-                  class={fieldInputClass}
-                  value={inputValue()}
-                  placeholder={local.placeholder}
-                  title={local.title}
-                  autocomplete={local.autocomplete ?? "one-time-code"}
-                  onInput={handleInput}
-                  onCompositionStart={handleCompositionStart}
-                  onCompositionEnd={handleCompositionEnd}
-                />
-              </div>
-            </Show>
-          }
-        >
-          {/* inset mode: dual-element overlay pattern */}
-          <div
-            {...rest}
-            data-text-field
-            class={clsx("relative", "[text-decoration:inherit]", local.class)}
-            style={local.style}
-          >
-            <div
-              data-text-field-content
-              class={getWrapperClass(false)}
-              style={{ visibility: isEditable() ? "hidden" : undefined }}
-              title={local.title}
-            >
-              <Show when={prefix()}>
-                <span class="shrink-0">{prefix()!()}</span>
-              </Show>
-              <PlaceholderFallback value={displayValue()} placeholder={local.placeholder} />
-            </div>
-
-            <Show when={isEditable()}>
-              <div class={twMerge(getWrapperClass(false), "absolute left-0 top-0 size-full")}>
-                <Show when={prefix()}>
-                  <span class="shrink-0">{prefix()!()}</span>
-                </Show>
-                <input
-                  type={local.type ?? "text"}
-                  class={fieldInputClass}
-                  value={inputValue()}
-                  placeholder={local.placeholder}
-                  title={local.title}
-                  autocomplete={local.autocomplete ?? "one-time-code"}
-                  onInput={handleInput}
-                  onCompositionStart={handleCompositionStart}
-                  onCompositionEnd={handleCompositionEnd}
-                />
-              </div>
+        inset={local.inset}
+        isEditable={isEditable()}
+        wrapperClass={getWrapperClass}
+        dataAttr="data-text-field"
+        readonlyExtraClass="sd-text-field"
+        insetExtraClass="[text-decoration:inherit]"
+        style={local.style}
+        title={local.title}
+        class={local.class}
+        rest={rest}
+        displayContent={
+          <>
+            <Show when={prefix()}>
+              <span class="shrink-0">{prefix()!.children}</span>
             </Show>
-          </div>
+            <PlaceholderFallback value={displayValue()} placeholder={local.placeholder} />
+          </>
+        }
+      >
+        <Show when={prefix()}>
+          <span class="shrink-0">{prefix()!.children}</span>
         </Show>
-      </Invalid>
-    </TextInputSlotsContext.Provider>
+        <input
+          type={local.type ?? "text"}
+          class={fieldInputClass}
+          value={inputValue()}
+          placeholder={local.placeholder}
+          title={local.title}
+          autocomplete={local.autocomplete ?? "one-time-code"}
+          onInput={handleInput}
+          onCompositionStart={handleCompositionStart}
+          onCompositionEnd={handleCompositionEnd}
+        />
+      </FieldShell>
+    </PrefixProvider>
   );
 };