@simplysm/solid 13.0.75 → 13.0.76

package/dist/components/form-control/field/DateTimePicker.js

@@ -1,22 +1,16 @@
 import { template as _$template } from "solid-js/web";
-import { setStyleProperty as _$setStyleProperty } from "solid-js/web";
 import { createComponent as _$createComponent } from "solid-js/web";
 import { setAttribute as _$setAttribute } from "solid-js/web";
 import { effect as _$effect } from "solid-js/web";
 import { className as _$className } from "solid-js/web";
-import { insert as _$insert } from "solid-js/web";
-import { spread as _$spread } from "solid-js/web";
-import { mergeProps as _$mergeProps } from "solid-js/web";
 import { memo as _$memo } from "solid-js/web";
-var _tmpl$ = /* @__PURE__ */ _$template(`<div><input type=datetime-local autocomplete=one-time-code>`), _tmpl$2 = /* @__PURE__ */ _$template(`<div><div data-datetime-field-content>`), _tmpl$3 = /* @__PURE__ */ _$template(`<div>`);
-import clsx from "clsx";
-import { createMemo, Show, splitProps } from "solid-js";
-import { twMerge } from "tailwind-merge";
+var _tmpl$ = /* @__PURE__ */ _$template(`<input type=datetime-local autocomplete=one-time-code>`);
+import { createMemo, splitProps } from "solid-js";
 import { DateTime } from "@simplysm/core-common";
 import { createControllableSignal } from "../../../hooks/createControllableSignal.js";
 import { fieldInputClass, getFieldWrapperClass } from "./Field.styles.js";
-import { Invalid } from "../../form-control/Invalid.js";
-import { useI18n } from "../../../providers/i18n/I18nContext.js";
+import { useI18n } from "../../../providers/i18n/I18nProvider.js";
+import { FieldShell } from "./FieldShell.js";
 function formatDateTimeValue(value, unit) {
   if (value == null) return void 0;
   switch (unit) {
@@ -42,7 +36,7 @@ function parseValue(str, unit) {
   }
 }
 const DateTimePicker = (props) => {
-  const [local, rest] = splitProps(props, ["value", "onValueChange", "unit", "min", "max", "title", "disabled", "readonly", "size", "inset", "class", "style", "required", "validate", "touchMode"]);
+  const [local, rest] = splitProps(props, ["value", "onValueChange", "unit", "min", "max", "title", "disabled", "readOnly", "size", "inset", "class", "style", "required", "validate", "touchMode"]);
   const i18n = useI18n();
   const fieldType = () => local.unit ?? "minute";
   const [value, setValue] = createControllableSignal({
@@ -62,7 +56,7 @@ const DateTimePicker = (props) => {
     includeCustomClass: includeCustomClass && local.class,
     extra: "min-w-44"
   });
-  const isEditable = () => !local.disabled && !local.readonly;
+  const isEditable = () => !local.disabled && !local.readOnly;
   const getStep = () => fieldType() === "second" ? "1" : void 0;
   const errorMsg = createMemo(() => {
     var _a;
@@ -78,132 +72,57 @@ const DateTimePicker = (props) => {
     }
     return (_a = local.validate) == null ? void 0 : _a.call(local, v);
   });
-  return _$createComponent(Invalid, {
-    get message() {
+  return _$createComponent(FieldShell, {
+    get errorMsg() {
       return errorMsg();
     },
-    get variant() {
+    get invalidVariant() {
       return local.inset ? "dot" : "border";
     },
     get touchMode() {
       return local.touchMode;
     },
+    get inset() {
+      return local.inset;
+    },
+    get isEditable() {
+      return isEditable();
+    },
+    wrapperClass: getWrapperClass,
+    dataAttr: "data-datetime-field",
+    readonlyExtraClass: "sd-datetime-field",
+    get style() {
+      return local.style;
+    },
+    get title() {
+      return local.title;
+    },
+    get ["class"]() {
+      return local.class;
+    },
+    rest,
+    get displayContent() {
+      return displayValue() || "\xA0";
+    },
     get children() {
-      return _$createComponent(Show, {
-        get when() {
-          return local.inset;
-        },
-        get fallback() {
-          return (
-            // standalone mode
-            _$createComponent(Show, {
-              get when() {
-                return isEditable();
-              },
-              get fallback() {
-                return (() => {
-                  var _el$7 = _tmpl$3();
-                  _$spread(_el$7, _$mergeProps(rest, {
-                    "data-datetime-field": "",
-                    get ["class"]() {
-                      return twMerge(getWrapperClass(true), "sd-datetime-field");
-                    },
-                    get style() {
-                      return local.style;
-                    },
-                    get title() {
-                      return local.title;
-                    }
-                  }), false, true);
-                  _$insert(_el$7, () => displayValue() || "\xA0");
-                  return _el$7;
-                })();
-              },
-              get children() {
-                var _el$5 = _tmpl$(), _el$6 = _el$5.firstChild;
-                _$spread(_el$5, _$mergeProps(rest, {
-                  "data-datetime-field": "",
-                  get ["class"]() {
-                    return getWrapperClass(true);
-                  },
-                  get style() {
-                    return local.style;
-                  }
-                }), false, true);
-                _el$6.addEventListener("change", handleChange);
-                _$className(_el$6, fieldInputClass);
-                _$effect((_p$) => {
-                  var _v$9 = local.title, _v$0 = formatDateTimeValue(local.min, fieldType()), _v$1 = formatDateTimeValue(local.max, fieldType()), _v$10 = getStep();
-                  _v$9 !== _p$.e && _$setAttribute(_el$6, "title", _p$.e = _v$9);
-                  _v$0 !== _p$.t && _$setAttribute(_el$6, "min", _p$.t = _v$0);
-                  _v$1 !== _p$.a && _$setAttribute(_el$6, "max", _p$.a = _v$1);
-                  _v$10 !== _p$.o && _$setAttribute(_el$6, "step", _p$.o = _v$10);
-                  return _p$;
-                }, {
-                  e: void 0,
-                  t: void 0,
-                  a: void 0,
-                  o: void 0
-                });
-                _$effect(() => _el$6.value = displayValue());
-                return _el$5;
-              }
-            })
-          );
-        },
-        get children() {
-          var _el$ = _tmpl$2(), _el$2 = _el$.firstChild;
-          _$spread(_el$, _$mergeProps(rest, {
-            "data-datetime-field": "",
-            get ["class"]() {
-              return clsx("relative", local.class);
-            },
-            get style() {
-              return local.style;
-            }
-          }), false, true);
-          _$insert(_el$2, () => displayValue() || "\xA0");
-          _$insert(_el$, _$createComponent(Show, {
-            get when() {
-              return isEditable();
-            },
-            get children() {
-              var _el$3 = _tmpl$(), _el$4 = _el$3.firstChild;
-              _el$4.addEventListener("change", handleChange);
-              _$className(_el$4, fieldInputClass);
-              _$effect((_p$) => {
-                var _v$ = twMerge(getWrapperClass(false), "absolute left-0 top-0 size-full"), _v$2 = local.title, _v$3 = formatDateTimeValue(local.min, fieldType()), _v$4 = formatDateTimeValue(local.max, fieldType()), _v$5 = getStep();
-                _v$ !== _p$.e && _$className(_el$3, _p$.e = _v$);
-                _v$2 !== _p$.t && _$setAttribute(_el$4, "title", _p$.t = _v$2);
-                _v$3 !== _p$.a && _$setAttribute(_el$4, "min", _p$.a = _v$3);
-                _v$4 !== _p$.o && _$setAttribute(_el$4, "max", _p$.o = _v$4);
-                _v$5 !== _p$.i && _$setAttribute(_el$4, "step", _p$.i = _v$5);
-                return _p$;
-              }, {
-                e: void 0,
-                t: void 0,
-                a: void 0,
-                o: void 0,
-                i: void 0
-              });
-              _$effect(() => _el$4.value = displayValue());
-              return _el$3;
-            }
-          }), null);
-          _$effect((_p$) => {
-            var _v$6 = getWrapperClass(false), _v$7 = isEditable() ? "hidden" : void 0, _v$8 = local.title;
-            _v$6 !== _p$.e && _$className(_el$2, _p$.e = _v$6);
-            _v$7 !== _p$.t && _$setStyleProperty(_el$2, "visibility", _p$.t = _v$7);
-            _v$8 !== _p$.a && _$setAttribute(_el$2, "title", _p$.a = _v$8);
-            return _p$;
-          }, {
-            e: void 0,
-            t: void 0,
-            a: void 0
-          });
-          return _el$;
-        }
+      var _el$ = _tmpl$();
+      _el$.addEventListener("change", handleChange);
+      _$className(_el$, fieldInputClass);
+      _$effect((_p$) => {
+        var _v$ = local.title, _v$2 = formatDateTimeValue(local.min, fieldType()), _v$3 = formatDateTimeValue(local.max, fieldType()), _v$4 = getStep();
+        _v$ !== _p$.e && _$setAttribute(_el$, "title", _p$.e = _v$);
+        _v$2 !== _p$.t && _$setAttribute(_el$, "min", _p$.t = _v$2);
+        _v$3 !== _p$.a && _$setAttribute(_el$, "max", _p$.a = _v$3);
+        _v$4 !== _p$.o && _$setAttribute(_el$, "step", _p$.o = _v$4);
+        return _p$;
+      }, {
+        e: void 0,
+        t: void 0,
+        a: void 0,
+        o: void 0
       });
+      _$effect(() => _el$.value = displayValue());
+      return _el$;
     }
   });
 };

package/dist/components/form-control/field/DateTimePicker.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/form-control/field/DateTimePicker.tsx"],
-  "mappings": "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",
-  "names": ["clsx", "createMemo", "Show", "splitProps", "twMerge", "DateTime", "createControllableSignal", "fieldInputClass", "getFieldWrapperClass", "Invalid", "useI18n", "formatDateTimeValue", "value", "unit", "undefined", "toFormatString", "parseValue", "str", "match", "exec", "Number", "DateTimePicker", "props", "local", "rest", "i18n", "fieldType", "setValue", "onChange", "onValueChange", "displayValue", "handleChange", "e", "newValue", "currentTarget", "parsed", "getWrapperClass", "includeCustomClass", "size", "disabled", "inset", "class", "extra", "isEditable", "readonly", "getStep", "errorMsg", "v", "required", "t", "min", "tick", "max", "validate", "_$createComponent", "message", "variant", "touchMode", "children", "when", "fallback", "_el$7", "_tmpl$3", "_$spread", "_$mergeProps", "style", "title", "_$insert", "_el$5", "_tmpl$", "_el$6", "firstChild", "addEventListener", "_$className", "_$effect", "_p$", "_v$9", "_v$0", "_v$1", "_v$10", "_$setAttribute", "a", "o", "_el$", "_tmpl$2", "_el$2", "_el$3", "_el$4", "_v$", "_v$2", "_v$3", "_v$4", "_v$5", "i", "_v$6", "_v$7", "_v$8", "_$setStyleProperty"]
+  "mappings": "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",
+  "names": ["createMemo", "splitProps", "DateTime", "createControllableSignal", "fieldInputClass", "getFieldWrapperClass", "useI18n", "FieldShell", "formatDateTimeValue", "value", "unit", "undefined", "toFormatString", "parseValue", "str", "match", "exec", "Number", "DateTimePicker", "props", "local", "rest", "i18n", "fieldType", "setValue", "onChange", "onValueChange", "displayValue", "handleChange", "e", "newValue", "currentTarget", "parsed", "getWrapperClass", "includeCustomClass", "size", "disabled", "inset", "class", "extra", "isEditable", "readOnly", "getStep", "errorMsg", "v", "required", "t", "min", "tick", "max", "validate", "_$createComponent", "invalidVariant", "touchMode", "wrapperClass", "dataAttr", "readonlyExtraClass", "style", "title", "displayContent", "children", "_el$", "_tmpl$", "addEventListener", "_$className", "_$effect", "_p$", "_v$", "_v$2", "_v$3", "_v$4", "_$setAttribute", "a", "o"]
 }

package/dist/components/form-control/field/Field.styles.d.ts

@@ -1,15 +1,15 @@
-import { type ComponentSize } from "../../../styles/tokens.styles";
+import { type ComponentSize } from "../../../styles/control.styles";
 export type FieldSize = ComponentSize;
+export declare const fieldSurface: string;
 export declare const fieldBaseClass: string;
 export declare const fieldSizeClasses: Record<FieldSize, string>;
 export declare const fieldInsetClass: string;
-export declare const fieldInsetHeightClass = "h-field-inset";
 export declare const fieldInsetSizeHeightClasses: Record<FieldSize, string>;
 export declare const fieldDisabledClass: string;
 export declare const textAreaBaseClass: string;
 export declare const textAreaSizeClasses: Record<FieldSize, string>;
 export declare const fieldInputClass: string;
-export declare const fieldGapClasses: Record<FieldSize | "default", string>;
+export declare const fieldGapClasses: Record<FieldSize, string>;
 export declare function getFieldWrapperClass(options: {
     size?: FieldSize;
     disabled?: boolean;

package/dist/components/form-control/field/Field.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Field.styles.d.ts","sourceRoot":"","sources":["..\\..\\..\\..\\src\\components\\form-control\\field\\Field.styles.ts"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,aAAa,EAKnB,MAAM,+BAA+B,CAAC;AAQvC,MAAM,MAAM,SAAS,GAAG,aAAa,CAAC;AAGtC,eAAO,MAAM,cAAc,QAM1B,CAAC;AAGF,eAAO,MAAM,gBAAgB,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAKtD,CAAC;AAGF,eAAO,MAAM,eAAe,QAI3B,CAAC;AAGF,eAAO,MAAM,qBAAqB,kBAAkB,CAAC;AACrD,eAAO,MAAM,2BAA2B,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAKjE,CAAC;AAGF,eAAO,MAAM,kBAAkB,QAAqD,CAAC;AAGrF,eAAO,MAAM,iBAAiB,QAAuD,CAAC;AAGtF,eAAO,MAAM,mBAAmB,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAKzD,CAAC;AAGF,eAAO,MAAM,eAAe,QAAY,CAAC;AAGzC,eAAO,MAAM,eAAe,EAAE,MAAM,CAAC,SAAS,GAAG,SAAS,EAAE,MAAM,CAMjE,CAAC;AAGF,wBAAgB,oBAAoB,CAAC,OAAO,EAAE;IAC5C,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,kBAAkB,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IACpC,KAAK,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;CACxB,GAAG,MAAM,CAWT;AAGD,wBAAgB,uBAAuB,CAAC,OAAO,EAAE;IAC/C,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,kBAAkB,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;CACrC,GAAG,MAAM,CAQT"}
+{"version":3,"file":"Field.styles.d.ts","sourceRoot":"","sources":["..\\..\\..\\..\\src\\components\\form-control\\field\\Field.styles.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,aAAa,EAAY,MAAM,gCAAgC,CAAC;AAG9E,MAAM,MAAM,SAAS,GAAG,aAAa,CAAC;AAGtC,eAAO,MAAM,YAAY,QAOxB,CAAC;AAGF,eAAO,MAAM,cAAc,QAI1B,CAAC;AAGF,eAAO,MAAM,gBAAgB,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAMtD,CAAC;AAGF,eAAO,MAAM,eAAe,QAM3B,CAAC;AAGF,eAAO,MAAM,2BAA2B,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAMjE,CAAC;AAGF,eAAO,MAAM,kBAAkB,QAAqD,CAAC;AAGrF,eAAO,MAAM,iBAAiB,QAA0C,CAAC;AAGzE,eAAO,MAAM,mBAAmB,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAMzD,CAAC;AAGF,eAAO,MAAM,eAAe,QAM3B,CAAC;AAGF,eAAO,MAAM,eAAe,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAMrD,CAAC;AAGF,wBAAgB,oBAAoB,CAAC,OAAO,EAAE;IAC5C,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,kBAAkB,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IACpC,KAAK,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;CACxB,GAAG,MAAM,CAUT;AAGD,wBAAgB,uBAAuB,CAAC,OAAO,EAAE;IAC/C,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,kBAAkB,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;CACrC,GAAG,MAAM,CAQT"}

package/dist/components/form-control/field/Field.styles.js

@@ -1,73 +1,79 @@
 import clsx from "clsx";
 import { twMerge } from "tailwind-merge";
-import {
-  paddingLg,
-  paddingSm,
-  paddingXl,
-  paddingXs
-} from "../../../styles/tokens.styles.js";
-import {
-  fieldSurface,
-  insetBase,
-  insetFocusOutline,
-  inputBase
-} from "../../../styles/patterns.styles.js";
+import { gap, pad } from "../../../styles/control.styles.js";
+import { border, text } from "../../../styles/base.styles.js";
+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"
+);
 const fieldBaseClass = clsx(
   "inline-flex items-center",
   fieldSurface,
-  "px-2 py-1",
-  "h-field",
   "[text-decoration:inherit]"
 );
 const fieldSizeClasses = {
-  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)
 };
 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"
 );
-const fieldInsetHeightClass = "h-field-inset";
 const fieldInsetSizeHeightClasses = {
-  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`
 };
 const fieldDisabledClass = clsx("bg-base-100 text-base-500 dark:bg-base-800");
-const textAreaBaseClass = clsx("inline-block w-48", fieldSurface, "px-2 py-1");
+const textAreaBaseClass = clsx("inline-block w-48", fieldSurface);
 const textAreaSizeClasses = {
-  xs: paddingXs,
-  sm: paddingSm,
-  lg: paddingLg,
-  xl: paddingXl
+  default: pad.default,
+  xs: pad.xs,
+  sm: pad.sm,
+  lg: pad.lg,
+  xl: pad.xl
 };
-const fieldInputClass = inputBase;
+const fieldInputClass = clsx(
+  "min-w-0 flex-1",
+  "bg-transparent",
+  "outline-none",
+  "[text-decoration:inherit]",
+  text.placeholder
+);
 const fieldGapClasses = {
-  xs: "gap-0.5",
-  sm: "gap-1.5",
-  default: "gap-2",
-  lg: "gap-3",
-  xl: "gap-4"
+  default: gap.default,
+  xs: gap.xs,
+  sm: gap.sm,
+  lg: gap.lg,
+  xl: gap.xl
 };
 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
   );
 }
 function getTextareaWrapperClass(options) {
   return twMerge(
     textAreaBaseClass,
-    options.size && textAreaSizeClasses[options.size],
+    textAreaSizeClasses[options.size ?? "default"],
     options.disabled && fieldDisabledClass,
     options.inset && fieldInsetClass,
     options.includeCustomClass
@@ -79,9 +85,9 @@ export {
   fieldGapClasses,
   fieldInputClass,
   fieldInsetClass,
-  fieldInsetHeightClass,
   fieldInsetSizeHeightClasses,
   fieldSizeClasses,
+  fieldSurface,
   getFieldWrapperClass,
   getTextareaWrapperClass,
   textAreaBaseClass,

package/dist/components/form-control/field/Field.styles.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/form-control/field/Field.styles.ts"],
-  "mappings": "AAAA,OAAO,UAAU;AACjB,SAAS,eAAe;AACxB;AAAA,EAEE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAKA,MAAM,iBAAiB;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAGO,MAAM,mBAA8C;AAAA,EACzD,IAAI,KAAK,cAAc,SAAS;AAAA,EAChC,IAAI,KAAK,cAAc,SAAS;AAAA,EAChC,IAAI,KAAK,cAAc,SAAS;AAAA,EAChC,IAAI,KAAK,cAAc,SAAS;AAClC;AAGO,MAAM,kBAAkB;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AACF;AAGO,MAAM,wBAAwB;AAC9B,MAAM,8BAAyD;AAAA,EACpE,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAGO,MAAM,qBAAqB,KAAK,4CAA4C;AAG5E,MAAM,oBAAoB,KAAK,qBAAqB,cAAc,WAAW;AAG7E,MAAM,sBAAiD;AAAA,EAC5D,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAGO,MAAM,kBAAkB;AAGxB,MAAM,kBAAyD;AAAA,EACpE,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,SAAS;AAAA,EACT,IAAI;AAAA,EACJ,IAAI;AACN;AAGO,SAAS,qBAAqB,SAM1B;AACT,SAAO;AAAA,IACL;AAAA,IACA,QAAQ;AAAA,IACR,QAAQ,QAAQ,iBAAiB,QAAQ,IAAI;AAAA,IAC7C,QAAQ,YAAY;AAAA,IACpB,QAAQ,SAAS;AAAA,IACjB,QAAQ,UACL,QAAQ,OAAO,4BAA4B,QAAQ,IAAI,IAAI;AAAA,IAC9D,QAAQ;AAAA,EACV;AACF;AAGO,SAAS,wBAAwB,SAK7B;AACT,SAAO;AAAA,IACL;AAAA,IACA,QAAQ,QAAQ,oBAAoB,QAAQ,IAAI;AAAA,IAChD,QAAQ,YAAY;AAAA,IACpB,QAAQ,SAAS;AAAA,IACjB,QAAQ;AAAA,EACV;AACF;",
+  "mappings": "AAAA,OAAO,UAAU;AACjB,SAAS,eAAe;AACxB,SAA6B,KAAK,WAAW;AAC7C,SAAS,QAAQ,YAAY;AAKtB,MAAM,eAAe;AAAA,EAC1B;AAAA,EACA,KAAK;AAAA,EACL;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AACF;AAGO,MAAM,iBAAiB;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AACF;AAGO,MAAM,mBAA8C;AAAA,EACzD,SAAS,KAAK,WAAW,IAAI,OAAO;AAAA,EACpC,IAAI,KAAK,cAAc,IAAI,EAAE;AAAA,EAC7B,IAAI,KAAK,cAAc,IAAI,EAAE;AAAA,EAC7B,IAAI,KAAK,cAAc,IAAI,EAAE;AAAA,EAC7B,IAAI,KAAK,cAAc,IAAI,EAAE;AAC/B;AAGO,MAAM,kBAAkB;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAGO,MAAM,8BAAyD;AAAA,EACpE,SAAS;AAAA,EACT,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAGO,MAAM,qBAAqB,KAAK,4CAA4C;AAG5E,MAAM,oBAAoB,KAAK,qBAAqB,YAAY;AAGhE,MAAM,sBAAiD;AAAA,EAC5D,SAAS,IAAI;AAAA,EACb,IAAI,IAAI;AAAA,EACR,IAAI,IAAI;AAAA,EACR,IAAI,IAAI;AAAA,EACR,IAAI,IAAI;AACV;AAGO,MAAM,kBAAkB;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,KAAK;AACP;AAGO,MAAM,kBAA6C;AAAA,EACxD,SAAS,IAAI;AAAA,EACb,IAAI,IAAI;AAAA,EACR,IAAI,IAAI;AAAA,EACR,IAAI,IAAI;AAAA,EACR,IAAI,IAAI;AACV;AAGO,SAAS,qBAAqB,SAM1B;AACT,SAAO;AAAA,IACL;AAAA,IACA,QAAQ;AAAA,IACR,iBAAiB,QAAQ,QAAQ,SAAS;AAAA,IAC1C,QAAQ,YAAY;AAAA,IACpB,QAAQ,SAAS;AAAA,IACjB,QAAQ,SAAS,4BAA4B,QAAQ,QAAQ,SAAS;AAAA,IACtE,QAAQ;AAAA,EACV;AACF;AAGO,SAAS,wBAAwB,SAK7B;AACT,SAAO;AAAA,IACL;AAAA,IACA,oBAAoB,QAAQ,QAAQ,SAAS;AAAA,IAC7C,QAAQ,YAAY;AAAA,IACpB,QAAQ,SAAS;AAAA,IACjB,QAAQ;AAAA,EACV;AACF;",
   "names": []
 }

package/dist/components/form-control/field/FieldPlaceholder.js

@@ -1,11 +1,12 @@
 import { template as _$template } from "solid-js/web";
-import { insert as _$insert } from "solid-js/web";
 import { className as _$className } from "solid-js/web";
+import { effect as _$effect } from "solid-js/web";
+import { insert as _$insert } from "solid-js/web";
 import { memo as _$memo } from "solid-js/web";
 import { createComponent as _$createComponent } from "solid-js/web";
 var _tmpl$ = /* @__PURE__ */ _$template(`<span>`);
 import { Show } from "solid-js";
-import { textMuted } from "../../../styles/tokens.styles.js";
+import { text } from "../../../styles/base.styles.js";
 const PlaceholderFallback = (props) => _$createComponent(Show, {
   get when() {
     return props.value;
@@ -18,8 +19,8 @@ const PlaceholderFallback = (props) => _$createComponent(Show, {
       fallback: "\xA0",
       get children() {
         var _el$ = _tmpl$();
-        _$className(_el$, textMuted);
         _$insert(_el$, () => props.placeholder);
+        _$effect(() => _$className(_el$, text.muted));
         return _el$;
       }
     });

package/dist/components/form-control/field/FieldPlaceholder.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/form-control/field/FieldPlaceholder.tsx"],
-  "mappings": ";;;;;;AAAA,SAAyBA,YAAY;AACrC,SAASC,iBAAiB;AAGnB,MAAMC,sBAA4EC,WAAKC,kBAEzFJ,MAAI;EAAA,IACHK,OAAI;AAAA,WAAEF,MAAMG;EAAK;EAAA,IACjBC,WAAQ;AAAA,WAAAH,kBACLJ,MAAI;MAAA,IAACK,OAAI;AAAA,eAAEG,OAAA,MAAAL,MAAMM,eAAe,IAAI,EAAA,KAAIN,MAAMM,gBAAgB;MAAE;MAAEF,UAAU;MAAQ,IAAAG,WAAA;AAAA,YAAAC,OAAAC,OAAA;AAAAC,oBAAAF,MACtEV,SAAS;AAAAa,iBAAAH,MAAA,MAAGR,MAAMM,WAAW;AAAA,eAAAE;MAAA;IAAA,CAAA;EAAA;EAAA,IAAAD,WAAA;AAAA,WAI7CP,MAAMG;EAAK;AAAA,CAAA;",
-  "names": ["Show", "textMuted", "PlaceholderFallback", "props", "_$createComponent", "when", "value", "fallback", "_$memo", "placeholder", "children", "_el$", "_tmpl$", "_$className", "_$insert"]
+  "mappings": ";;;;;;;AAAA,SAAyBA,YAAY;AACrC,SAASC,YAAY;AAGd,MAAMC,sBAA4EC,WAAKC,kBAEzFJ,MAAI;EAAA,IACHK,OAAI;AAAA,WAAEF,MAAMG;EAAK;EAAA,IACjBC,WAAQ;AAAA,WAAAH,kBACLJ,MAAI;MAAA,IAACK,OAAI;AAAA,eAAEG,OAAA,MAAAL,MAAMM,eAAe,IAAI,EAAA,KAAIN,MAAMM,gBAAgB;MAAE;MAAEF,UAAU;MAAQ,IAAAG,WAAA;AAAA,YAAAC,OAAAC,OAAA;AAAAC,iBAAAF,MAAA,MACzDR,MAAMM,WAAW;AAAAK,iBAAA,MAAAC,YAAAJ,MAA9BV,KAAKe,KAAK,CAAA;AAAA,eAAAL;MAAA;IAAA,CAAA;EAAA;EAAA,IAAAD,WAAA;AAAA,WAI1BP,MAAMG;EAAK;AAAA,CAAA;",
+  "names": ["Show", "text", "PlaceholderFallback", "props", "_$createComponent", "when", "value", "fallback", "_$memo", "placeholder", "children", "_el$", "_tmpl$", "_$insert", "_$effect", "_$className", "muted"]
 }

package/dist/components/form-control/field/FieldShell.d.ts

@@ -0,0 +1,37 @@
+import { type JSX, type ParentComponent } from "solid-js";
+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 declare const FieldShell: ParentComponent<FieldShellProps>;
+//# sourceMappingURL=FieldShell.d.ts.map

package/dist/components/form-control/field/FieldShell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldShell.d.ts","sourceRoot":"","sources":["..\\..\\..\\..\\src\\components\\form-control\\field\\FieldShell.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,GAAG,EAAE,KAAK,eAAe,EAAQ,MAAM,UAAU,CAAC;AAIhE,MAAM,WAAW,eAAe;IAC9B,+BAA+B;IAC/B,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAC;IAC7B,uCAAuC;IACvC,cAAc,EAAE,KAAK,GAAG,QAAQ,CAAC;IACjC,iCAAiC;IACjC,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,8BAA8B;IAC9B,KAAK,EAAE,OAAO,GAAG,SAAS,CAAC;IAC3B,6DAA6D;IAC7D,UAAU,EAAE,OAAO,CAAC;IAEpB,iEAAiE;IACjE,YAAY,EAAE,CAAC,kBAAkB,EAAE,OAAO,KAAK,MAAM,CAAC;IACtD,mEAAmE;IACnE,QAAQ,EAAE,MAAM,CAAC;IACjB,yEAAyE;IACzE,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,yEAAyE;IACzE,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,mEAAmE;IACnE,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B,mBAAmB;IACnB,KAAK,CAAC,EAAE,GAAG,CAAC,aAAa,CAAC;IAC1B,sBAAsB;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gDAAgD;IAChD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0DAA0D;IAC1D,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAE/B,sDAAsD;IACtD,cAAc,EAAE,GAAG,CAAC,OAAO,CAAC;IAC5B,iEAAiE;IACjE,YAAY,CAAC,EAAE,MAAM,GAAG,CAAC,OAAO,CAAC;CAClC;AAED,eAAO,MAAM,UAAU,EAAE,eAAe,CAAC,eAAe,CAoEvD,CAAC"}

package/dist/components/form-control/field/FieldShell.js

@@ -0,0 +1,124 @@
+import { template as _$template } from "solid-js/web";
+import { createComponent as _$createComponent } from "solid-js/web";
+import { className as _$className } from "solid-js/web";
+import { effect as _$effect } from "solid-js/web";
+import { insert as _$insert } from "solid-js/web";
+import { memo as _$memo } from "solid-js/web";
+import { spread as _$spread } from "solid-js/web";
+import { mergeProps as _$mergeProps } from "solid-js/web";
+var _tmpl$ = /* @__PURE__ */ _$template(`<div>`), _tmpl$2 = /* @__PURE__ */ _$template(`<div><div>`);
+import clsx from "clsx";
+import { Show } from "solid-js";
+import { twMerge } from "tailwind-merge";
+import { Invalid } from "../Invalid.js";
+const FieldShell = (props) => {
+  const dataAttrObj = () => ({
+    [props.dataAttr]: true
+  });
+  const dataContentAttrObj = () => ({
+    [`${props.dataAttr}-content`]: true
+  });
+  return _$createComponent(Invalid, {
+    get message() {
+      return props.errorMsg;
+    },
+    get variant() {
+      return props.invalidVariant;
+    },
+    get touchMode() {
+      return props.touchMode;
+    },
+    get children() {
+      return _$createComponent(Show, {
+        get when() {
+          return props.inset;
+        },
+        get fallback() {
+          return _$createComponent(Show, {
+            get when() {
+              return props.isEditable;
+            },
+            get fallback() {
+              return (() => {
+                var _el$5 = _tmpl$();
+                _$spread(_el$5, _$mergeProps(() => props.rest ?? {}, dataAttrObj, {
+                  get ["class"]() {
+                    return twMerge(props.wrapperClass(true), props.readonlyExtraClass);
+                  },
+                  get style() {
+                    return props.style;
+                  },
+                  get title() {
+                    return props.title;
+                  }
+                }), false, true);
+                _$insert(_el$5, () => props.displayContent);
+                return _el$5;
+              })();
+            },
+            get children() {
+              var _el$4 = _tmpl$();
+              _$spread(_el$4, _$mergeProps(() => props.rest ?? {}, dataAttrObj, {
+                get ["class"]() {
+                  return props.wrapperClass(true);
+                },
+                get style() {
+                  return {
+                    position: "relative",
+                    ...props.style
+                  };
+                }
+              }), false, true);
+              _$insert(_el$4, () => props.children);
+              return _el$4;
+            }
+          });
+        },
+        get children() {
+          var _el$ = _tmpl$2(), _el$2 = _el$.firstChild;
+          _$spread(_el$, _$mergeProps(() => props.rest ?? {}, dataAttrObj, {
+            get ["class"]() {
+              return clsx("relative", props.insetExtraClass, props.class);
+            },
+            get style() {
+              return props.style;
+            }
+          }), false, true);
+          _$spread(_el$2, _$mergeProps(dataContentAttrObj, {
+            get ["class"]() {
+              return twMerge(props.wrapperClass(false), props.sizingExtraClass);
+            },
+            get style() {
+              return {
+                visibility: props.isEditable ? "hidden" : void 0
+              };
+            },
+            get title() {
+              return props.title;
+            }
+          }), false, true);
+          _$insert(_el$2, (() => {
+            var _c$ = _$memo(() => !!props.renderSizing);
+            return () => _c$() ? props.renderSizing() : props.displayContent;
+          })());
+          _$insert(_el$, _$createComponent(Show, {
+            get when() {
+              return props.isEditable;
+            },
+            get children() {
+              var _el$3 = _tmpl$();
+              _$insert(_el$3, () => props.children);
+              _$effect(() => _$className(_el$3, twMerge(props.wrapperClass(false), props.sizingExtraClass, "absolute left-0 top-0 size-full")));
+              return _el$3;
+            }
+          }), null);
+          return _el$;
+        }
+      });
+    }
+  });
+};
+export {
+  FieldShell
+};
+//# sourceMappingURL=FieldShell.js.map