@simplysm/solid 13.0.74 → 13.0.76

package/src/components/form-control/field/DateTimePicker.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 { DateTime } 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 DateTimePickerUnit = "minute" | "second";
 
@@ -32,7 +30,7 @@ export interface DateTimePickerProps {
   disabled?: boolean;
 
   /** Read-only */
-  readonly?: boolean;
+  readOnly?: boolean;
 
   /** Size */
   size?: FieldSize;
@@ -141,7 +139,7 @@ export const DateTimePicker: Component<DateTimePickerProps> = (props) => {
     "max",
     "title",
     "disabled",
-    "readonly",
+    "readOnly",
     "size",
     "inset",
     "class",
@@ -183,7 +181,7 @@ export const DateTimePicker: Component<DateTimePickerProps> = (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);
@@ -202,78 +200,32 @@ export const DateTimePicker: Component<DateTimePickerProps> = (props) => {
   });
 
   return (
-    <Invalid
-      message={errorMsg()}
-      variant={local.inset ? "dot" : "border"}
+    <FieldShell
+      errorMsg={errorMsg()}
+      invalidVariant={local.inset ? "dot" : "border"}
       touchMode={local.touchMode}
+      inset={local.inset}
+      isEditable={isEditable()}
+      wrapperClass={getWrapperClass}
+      dataAttr="data-datetime-field"
+      readonlyExtraClass="sd-datetime-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-datetime-field
-                class={twMerge(getWrapperClass(true), "sd-datetime-field")}
-                style={local.style}
-                title={local.title}
-              >
-                {displayValue() || "\u00A0"}
-              </div>
-            }
-          >
-            <div {...rest} data-datetime-field class={getWrapperClass(true)} style={local.style}>
-              <input
-                type="datetime-local"
-                class={fieldInputClass}
-                value={displayValue()}
-                title={local.title}
-                min={formatDateTimeValue(local.min, fieldType())}
-                max={formatDateTimeValue(local.max, fieldType())}
-                step={getStep()}
-                autocomplete="one-time-code"
-                onChange={handleChange}
-              />
-            </div>
-          </Show>
-        }
-      >
-        {/* inset mode: dual-element overlay pattern */}
-        <div
-          {...rest}
-          data-datetime-field
-          class={clsx("relative", local.class)}
-          style={local.style}
-        >
-          <div
-            data-datetime-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="datetime-local"
-                class={fieldInputClass}
-                value={displayValue()}
-                title={local.title}
-                min={formatDateTimeValue(local.min, fieldType())}
-                max={formatDateTimeValue(local.max, fieldType())}
-                step={getStep()}
-                autocomplete="one-time-code"
-                onChange={handleChange}
-              />
-            </div>
-          </Show>
-        </div>
-      </Show>
-    </Invalid>
+      <input
+        type="datetime-local"
+        class={fieldInputClass}
+        value={displayValue()}
+        title={local.title}
+        min={formatDateTimeValue(local.min, fieldType())}
+        max={formatDateTimeValue(local.max, fieldType())}
+        step={getStep()}
+        autocomplete="one-time-code"
+        onChange={handleChange}
+      />
+    </FieldShell>
   );
 };

package/src/components/form-control/field/Field.styles.ts

@@ -1,78 +1,85 @@
 import clsx from "clsx";
 import { twMerge } from "tailwind-merge";
-import {
-  type ComponentSize,
-  paddingLg,
-  paddingSm,
-  paddingXl,
-  paddingXs,
-} from "../../../styles/tokens.styles";
-import {
-  fieldSurface,
-  insetBase,
-  insetFocusOutline,
-  inputBase,
-} from "../../../styles/patterns.styles";
+import { type ComponentSize, gap, pad } from "../../../styles/control.styles";
+import { border, text } from "../../../styles/base.styles";
 
 export type FieldSize = ComponentSize;
 
+// ── Form Field Common Surface (background + text + border + focus) ──
+export const fieldSurface = clsx(
+  "bg-primary-50 dark:bg-primary-950/30",
+  text.default,
+  "border",
+  border.default,
+  "rounded",
+  "focus-within:border-primary-500 dark:focus-within:border-primary-400",
+);
+
 // Base wrapper styles
 export const fieldBaseClass = clsx(
   "inline-flex items-center",
   fieldSurface,
-  "px-2 py-1",
-  "h-field",
   "[text-decoration:inherit]",
 );
 
 // Size-specific styles
 export const fieldSizeClasses: Record<FieldSize, string> = {
-  xs: clsx("h-field-xs", paddingXs),
-  sm: clsx("h-field-sm", paddingSm),
-  lg: clsx("h-field-lg", paddingLg),
-  xl: clsx("h-field-xl", paddingXl),
+  default: clsx("h-field", pad.default),
+  xs: clsx("h-field-xs", pad.xs),
+  sm: clsx("h-field-sm", pad.sm),
+  lg: clsx("h-field-lg", pad.lg),
+  xl: clsx("h-field-xl", pad.xl),
 };
 
 // Inset styles
 export const fieldInsetClass = clsx(
-  insetBase,
+  "w-full rounded-none border-none",
   "bg-primary-50 dark:bg-primary-950/30",
-  insetFocusOutline,
+  "focus-within:[outline-style:solid]",
+  "focus-within:outline-1 focus-within:-outline-offset-1",
+  "focus-within:outline-primary-400 dark:focus-within:outline-primary-400",
 );
 
 // Inset heights (excluding 2px border)
-export const fieldInsetHeightClass = "h-field-inset";
 export const fieldInsetSizeHeightClasses: Record<FieldSize, string> = {
-  xs: "h-field-inset-xs",
-  sm: "h-field-inset-sm",
-  lg: "h-field-inset-lg",
-  xl: "h-field-inset-xl",
+  default: clsx`h-field-inset`,
+  xs: clsx`h-field-inset-xs`,
+  sm: clsx`h-field-inset-sm`,
+  lg: clsx`h-field-inset-lg`,
+  xl: clsx`h-field-inset-xl`,
 };
 
 // Disabled styles
 export const fieldDisabledClass = clsx("bg-base-100 text-base-500 dark:bg-base-800");
 
 // Textarea wrapper styles (h-field removed)
-export const textAreaBaseClass = clsx("inline-block w-48", fieldSurface, "px-2 py-1");
+export const textAreaBaseClass = clsx("inline-block w-48", fieldSurface);
 
 // Textarea size-specific styles (h-field-* removed)
 export const textAreaSizeClasses: Record<FieldSize, string> = {
-  xs: paddingXs,
-  sm: paddingSm,
-  lg: paddingLg,
-  xl: paddingXl,
+  default: pad.default,
+  xs: pad.xs,
+  sm: pad.sm,
+  lg: pad.lg,
+  xl: pad.xl,
 };
 
 // Input styles
-export const fieldInputClass = inputBase;
+export const fieldInputClass = clsx(
+  "min-w-0 flex-1",
+  "bg-transparent",
+  "outline-none",
+  "[text-decoration:inherit]",
+  text.placeholder,
+);
 
 // Prefix icon gap classes (replaces nested ternary)
-export const fieldGapClasses: Record<FieldSize | "default", string> = {
-  xs: "gap-0.5",
-  sm: "gap-1.5",
-  default: "gap-2",
-  lg: "gap-3",
-  xl: "gap-4",
+export const fieldGapClasses: Record<FieldSize, string> = {
+  default: gap.default,
+  xs: gap.xs,
+  sm: gap.sm,
+  lg: gap.lg,
+  xl: gap.xl,
 };
 
 // Shared wrapper class generation function
@@ -86,11 +93,10 @@ export function getFieldWrapperClass(options: {
   return twMerge(
     fieldBaseClass,
     options.extra,
-    options.size && fieldSizeClasses[options.size],
+    fieldSizeClasses[options.size ?? "default"],
     options.disabled && fieldDisabledClass,
     options.inset && fieldInsetClass,
-    options.inset &&
-      (options.size ? fieldInsetSizeHeightClasses[options.size] : fieldInsetHeightClass),
+    options.inset && fieldInsetSizeHeightClasses[options.size ?? "default"],
     options.includeCustomClass,
   );
 }
@@ -104,7 +110,7 @@ export function getTextareaWrapperClass(options: {
 }): string {
   return twMerge(
     textAreaBaseClass,
-    options.size && textAreaSizeClasses[options.size],
+    textAreaSizeClasses[options.size ?? "default"],
     options.disabled && fieldDisabledClass,
     options.inset && fieldInsetClass,
     options.includeCustomClass,

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

@@ -1,5 +1,5 @@
 import { type Component, Show } from "solid-js";
-import { textMuted } from "../../../styles/tokens.styles";
+import { text } from "../../../styles/base.styles";
 
 /** Shared component to display placeholder or NBSP when value is empty */
 export const PlaceholderFallback: Component<{ value?: string; placeholder?: string }> = (props) => (
@@ -8,7 +8,7 @@ export const PlaceholderFallback: Component<{ value?: string; placeholder?: stri
       when={props.value}
       fallback={
         <Show when={props.placeholder != null && props.placeholder !== ""} fallback={"\u00A0"}>
-          <span class={textMuted}>{props.placeholder}</span>
+          <span class={text.muted}>{props.placeholder}</span>
         </Show>
       }
     >

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

@@ -0,0 +1,113 @@
+import clsx from "clsx";
+import { type JSX, type ParentComponent, Show } from "solid-js";
+import { twMerge } from "tailwind-merge";
+import { Invalid } from "../Invalid";
+
+export interface FieldShellProps {
+  /** Validation error message */
+  errorMsg: string | undefined;
+  /** Invalid visual indicator variant */
+  invalidVariant: "dot" | "border";
+  /** Show error only after blur */
+  touchMode?: boolean;
+
+  /** Inset (borderless) mode */
+  inset: boolean | undefined;
+  /** Whether the field is editable (!disabled && !readonly) */
+  isEditable: boolean;
+
+  /** Wrapper class generator — receives includeCustomClass flag */
+  wrapperClass: (includeCustomClass: boolean) => string;
+  /** Data attribute name for the wrapper (e.g. "data-date-field") */
+  dataAttr: string;
+  /** Extra class for standalone-readonly wrapper (e.g. "sd-date-field") */
+  readonlyExtraClass?: string;
+  /** Extra class for inset outer div (e.g. "[text-decoration:inherit]") */
+  insetExtraClass?: string;
+  /** Extra class for sizing/overlay wrappers (e.g. "justify-end") */
+  sizingExtraClass?: string;
+
+  /** Custom style */
+  style?: JSX.CSSProperties;
+  /** Title (tooltip) */
+  title?: string;
+  /** Custom class — applied to inset outer div */
+  class?: string;
+  /** Rest props from splitProps — spread on wrapper divs */
+  rest?: Record<string, unknown>;
+
+  /** Content for readonly display and default sizing */
+  displayContent: JSX.Element;
+  /** Override sizing content (e.g. Textarea's contentForHeight) */
+  renderSizing?: () => JSX.Element;
+}
+
+export const FieldShell: ParentComponent<FieldShellProps> = (props) => {
+  const dataAttrObj = () => ({ [props.dataAttr]: true });
+  const dataContentAttrObj = () => ({ [`${props.dataAttr}-content`]: true });
+
+  return (
+    <Invalid
+      message={props.errorMsg}
+      variant={props.invalidVariant}
+      touchMode={props.touchMode}
+    >
+      <Show
+        when={props.inset}
+        fallback={
+          <Show
+            when={props.isEditable}
+            fallback={
+              <div
+                {...(props.rest ?? {})}
+                {...dataAttrObj()}
+                class={twMerge(props.wrapperClass(true), props.readonlyExtraClass)}
+                style={props.style}
+                title={props.title}
+              >
+                {props.displayContent}
+              </div>
+            }
+          >
+            <div
+              {...(props.rest ?? {})}
+              {...dataAttrObj()}
+              class={props.wrapperClass(true)}
+              style={{ position: "relative", ...props.style }}
+            >
+              {props.children}
+            </div>
+          </Show>
+        }
+      >
+        <div
+          {...(props.rest ?? {})}
+          {...dataAttrObj()}
+          class={clsx("relative", props.insetExtraClass, props.class)}
+          style={props.style}
+        >
+          <div
+            {...dataContentAttrObj()}
+            class={twMerge(props.wrapperClass(false), props.sizingExtraClass)}
+            style={{ visibility: props.isEditable ? "hidden" : undefined }}
+            title={props.title}
+          >
+            {props.renderSizing ? props.renderSizing() : props.displayContent}
+          </div>
+
+          <Show when={props.isEditable}>
+            <div
+              class={twMerge(
+                props.wrapperClass(false),
+                props.sizingExtraClass,
+                "absolute left-0 top-0 size-full",
+              )}
+            >
+              {props.children}
+            </div>
+          </Show>
+        </div>
+      </Show>
+    </Invalid>
+  );
+};