@simplysm/solid 13.0.74 → 13.0.76

package/src/components/form-control/editor/EditorToolbar.tsx

@@ -3,7 +3,7 @@ import clsx from "clsx";
 import { twMerge } from "tailwind-merge";
 import type { Editor } from "@tiptap/core";
 import { createEditorTransaction } from "solid-tiptap";
-import { iconButtonBase } from "../../../styles/patterns.styles";
+import { Button } from "../Button";
 import {
   IconBold,
   IconItalic,
@@ -26,41 +26,40 @@ import {
   IconClearFormatting,
 } from "@tabler/icons-solidjs";
 import { Icon } from "../../display/Icon";
-import { useI18n } from "../../../providers/i18n/I18nContext";
+import { border, text } from "../../../styles/base.styles";
+import { gap, pad } from "../../../styles/control.styles";
+import { themeTokens } from "../../../styles/theme.styles";
+import { useI18n } from "../../../providers/i18n/I18nProvider";
 
 export interface EditorToolbarProps {
   editor: Editor;
   class?: string;
 }
 
-// Toolbar container style
-const toolbarClass = clsx(
-  "flex flex-wrap items-center gap-0.5",
-  "border-b border-base-300 dark:border-base-700",
-  "px-2 py-1",
-);
-
-// Toolbar button base style
-const toolbarBtnClass = twMerge(iconButtonBase, "size-7");
+// Toolbar button extra class
+const toolbarBtnExtra = "size-7";
 
 // Toolbar button active style
-const toolbarBtnActiveClass = clsx(
-  "bg-primary-100 text-primary-700",
-  "dark:bg-primary-900/40 dark:text-primary-300",
-);
+const toolbarBtnActiveClass = themeTokens.primary.light;
 
 // Separator style
 const separatorClass = clsx("mx-1 h-5 w-px", "bg-base-300 dark:bg-base-700");
 
 // Color picker label style
-const colorLabelClass = twMerge(iconButtonBase, "relative", "size-7");
+const colorLabelClass = clsx(
+  "inline-flex items-center justify-center",
+  "cursor-pointer",
+  "rounded",
+  "transition-colors",
+  text.muted,
+  themeTokens.base.hoverBg,
+  "relative",
+  "size-7",
+);
 
 // Color input hide style
 const colorInputClass = clsx("absolute opacity-0", "size-0");
 
-// Color indicator style
-const colorIndicatorClass = clsx("absolute inset-x-1 bottom-0.5", "h-0.5 rounded-full");
-
 export const EditorToolbar: Component<EditorToolbarProps> = (props) => {
   const e = () => props.editor;
   const i18n = useI18n();
@@ -102,7 +101,7 @@ export const EditorToolbar: Component<EditorToolbarProps> = (props) => {
   );
 
   const btnClass = (active: () => boolean) =>
-    twMerge(toolbarBtnClass, active() && toolbarBtnActiveClass);
+    twMerge(toolbarBtnExtra, active() && toolbarBtnActiveClass);
 
   // Image insert handler
   const handleImageInsert = () => {
@@ -126,61 +125,67 @@ export const EditorToolbar: Component<EditorToolbarProps> = (props) => {
   };
 
   return (
-    <div class={twMerge(toolbarClass, props.class)}>
+    <div class={twMerge(clsx("flex flex-wrap items-center", gap.sm, "border-b", border.default, pad.default), props.class)}>
       {/* 1. Header (H1, H2) */}
-      <button
-        type="button"
+      <Button
+        variant="ghost"
+        size="xs"
         class={btnClass(isH1)}
         title={i18n.t("editorToolbar.heading1")}
         onClick={() => props.editor.chain().focus().toggleHeading({ level: 1 }).run()}
       >
         <Icon icon={IconH1} size="1em" />
-      </button>
-      <button
-        type="button"
+      </Button>
+      <Button
+        variant="ghost"
+        size="xs"
         class={btnClass(isH2)}
         title={i18n.t("editorToolbar.heading2")}
         onClick={() => props.editor.chain().focus().toggleHeading({ level: 2 }).run()}
       >
         <Icon icon={IconH2} size="1em" />
-      </button>
+      </Button>
 
       {/* 2. Separator */}
       <div class={separatorClass} />
 
       {/* 3. Text format (Bold, Italic, Underline, Strike) */}
-      <button
-        type="button"
+      <Button
+        variant="ghost"
+        size="xs"
         class={btnClass(isBold)}
         title={i18n.t("editorToolbar.bold")}
         onClick={() => props.editor.chain().focus().toggleBold().run()}
       >
         <Icon icon={IconBold} size="1em" />
-      </button>
-      <button
-        type="button"
+      </Button>
+      <Button
+        variant="ghost"
+        size="xs"
         class={btnClass(isItalic)}
         title={i18n.t("editorToolbar.italic")}
         onClick={() => props.editor.chain().focus().toggleItalic().run()}
       >
         <Icon icon={IconItalic} size="1em" />
-      </button>
-      <button
-        type="button"
+      </Button>
+      <Button
+        variant="ghost"
+        size="xs"
         class={btnClass(isUnderline)}
         title={i18n.t("editorToolbar.underline")}
         onClick={() => props.editor.chain().focus().toggleUnderline().run()}
       >
         <Icon icon={IconUnderline} size="1em" />
-      </button>
-      <button
-        type="button"
+      </Button>
+      <Button
+        variant="ghost"
+        size="xs"
         class={btnClass(isStrike)}
         title={i18n.t("editorToolbar.strikethrough")}
         onClick={() => props.editor.chain().focus().toggleStrike().run()}
       >
         <Icon icon={IconStrikethrough} size="1em" />
-      </button>
+      </Button>
 
       {/* 4. Separator */}
       <div class={separatorClass} />
@@ -188,7 +193,7 @@ export const EditorToolbar: Component<EditorToolbarProps> = (props) => {
       {/* 5. Text color + background color (using input[type=color]) */}
       <label class={colorLabelClass} title={i18n.t("editorToolbar.textColor")}>
         <span class={clsx("text-sm font-bold")}>A</span>
-        <div class={colorIndicatorClass} style={{ "background-color": currentColor() }} />
+        <div class="absolute inset-x-1 bottom-0.5 h-0.5 rounded-full" style={{ "background-color": currentColor() }} />
         <input
           type="color"
           class={colorInputClass}
@@ -217,134 +222,152 @@ export const EditorToolbar: Component<EditorToolbarProps> = (props) => {
       <div class={separatorClass} />
 
       {/* 7. List (Bullet, Ordered) */}
-      <button
-        type="button"
+      <Button
+        variant="ghost"
+        size="xs"
         class={btnClass(isBulletList)}
         title={i18n.t("editorToolbar.bulletList")}
         onClick={() => props.editor.chain().focus().toggleBulletList().run()}
       >
         <Icon icon={IconList} size="1em" />
-      </button>
-      <button
-        type="button"
+      </Button>
+      <Button
+        variant="ghost"
+        size="xs"
         class={btnClass(isOrderedList)}
         title={i18n.t("editorToolbar.numberedList")}
         onClick={() => props.editor.chain().focus().toggleOrderedList().run()}
       >
         <Icon icon={IconListNumbers} size="1em" />
-      </button>
+      </Button>
 
       {/* 8. Separator */}
       <div class={separatorClass} />
 
       {/* 9. Indentation (Increase, Decrease) */}
-      <button
-        type="button"
-        class={toolbarBtnClass}
+      <Button
+        variant="ghost"
+        size="xs"
+        class={toolbarBtnExtra}
         title={i18n.t("editorToolbar.increaseIndent")}
         onClick={() => props.editor.chain().focus().sinkListItem("listItem").run()}
       >
         <Icon icon={IconIndentIncrease} size="1em" />
-      </button>
-      <button
-        type="button"
-        class={toolbarBtnClass}
+      </Button>
+      <Button
+        variant="ghost"
+        size="xs"
+        class={toolbarBtnExtra}
         title={i18n.t("editorToolbar.decreaseIndent")}
         onClick={() => props.editor.chain().focus().liftListItem("listItem").run()}
       >
         <Icon icon={IconIndentDecrease} size="1em" />
-      </button>
+      </Button>
 
       {/* 10. Separator */}
       <div class={separatorClass} />
 
       {/* 11. Block (Blockquote, CodeBlock) */}
-      <button
-        type="button"
+      <Button
+        variant="ghost"
+        size="xs"
         class={btnClass(isBlockquote)}
         title={i18n.t("editorToolbar.blockquote")}
         onClick={() => props.editor.chain().focus().toggleBlockquote().run()}
       >
         <Icon icon={IconQuote} size="1em" />
-      </button>
-      <button
-        type="button"
+      </Button>
+      <Button
+        variant="ghost"
+        size="xs"
         class={btnClass(isCodeBlock)}
         title={i18n.t("editorToolbar.codeBlock")}
         onClick={() => props.editor.chain().focus().toggleCodeBlock().run()}
       >
         <Icon icon={IconCode} size="1em" />
-      </button>
+      </Button>
 
       {/* 12. Separator */}
       <div class={separatorClass} />
 
       {/* 13. Alignment (Left, Center, Right, Justify) */}
-      <button
-        type="button"
+      <Button
+        variant="ghost"
+        size="xs"
         class={btnClass(isAlignLeft)}
         title={i18n.t("editorToolbar.alignLeft")}
         onClick={() => props.editor.chain().focus().setTextAlign("left").run()}
       >
         <Icon icon={IconAlignLeft} size="1em" />
-      </button>
-      <button
-        type="button"
+      </Button>
+      <Button
+        variant="ghost"
+        size="xs"
         class={btnClass(isAlignCenter)}
         title={i18n.t("editorToolbar.alignCenter")}
         onClick={() => props.editor.chain().focus().setTextAlign("center").run()}
       >
         <Icon icon={IconAlignCenter} size="1em" />
-      </button>
-      <button
-        type="button"
+      </Button>
+      <Button
+        variant="ghost"
+        size="xs"
         class={btnClass(isAlignRight)}
         title={i18n.t("editorToolbar.alignRight")}
         onClick={() => props.editor.chain().focus().setTextAlign("right").run()}
       >
         <Icon icon={IconAlignRight} size="1em" />
-      </button>
-      <button
-        type="button"
+      </Button>
+      <Button
+        variant="ghost"
+        size="xs"
         class={btnClass(isAlignJustify)}
         title={i18n.t("editorToolbar.justify")}
         onClick={() => props.editor.chain().focus().setTextAlign("justify").run()}
       >
         <Icon icon={IconAlignJustified} size="1em" />
-      </button>
+      </Button>
 
       {/* 14. Separator */}
       <div class={separatorClass} />
 
       {/* 15. Insert table */}
-      <button
-        type="button"
-        class={toolbarBtnClass}
+      <Button
+        variant="ghost"
+        size="xs"
+        class={toolbarBtnExtra}
         title={i18n.t("editorToolbar.insertTable")}
         onClick={() =>
           props.editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()
         }
       >
         <Icon icon={IconTablePlus} size="1em" />
-      </button>
+      </Button>
 
       {/* 16. Insert image */}
-      <button type="button" class={toolbarBtnClass} title={i18n.t("editorToolbar.insertImage")} onClick={handleImageInsert}>
+      <Button
+        variant="ghost"
+        size="xs"
+        class={toolbarBtnExtra}
+        title={i18n.t("editorToolbar.insertImage")}
+        onClick={handleImageInsert}
+      >
         <Icon icon={IconPhoto} size="1em" />
-      </button>
+      </Button>
 
       {/* 17. Separator */}
       <div class={separatorClass} />
 
       {/* 18. Clear formatting */}
-      <button
-        type="button"
-        class={toolbarBtnClass}
+      <Button
+        variant="ghost"
+        size="xs"
+        class={toolbarBtnExtra}
         title={i18n.t("editorToolbar.clearFormatting")}
         onClick={() => props.editor.chain().focus().clearNodes().unsetAllMarks().run()}
       >
         <Icon icon={IconClearFormatting} size="1em" />
-      </button>
+      </Button>
     </div>
   );
 };

package/{dist/components/form-control/editor/editor.css → src/components/form-control/editor/RichTextEditor.tiptap.css}

@@ -46,7 +46,6 @@
   height: auto;
 }
 
-/* stylelint-disable-next-line selector-class-pattern -- ProseMirror library class */
 [data-rich-text-editor] .tiptap img.ProseMirror-selectednode {
   outline: 2px solid #3b82f6;
 }

package/src/components/form-control/editor/RichTextEditor.tsx

@@ -9,7 +9,7 @@ import {
   untrack,
 } from "solid-js";
 import clsx from "clsx";
-import "./editor.css";
+import "./RichTextEditor.tiptap.css";
 import { twMerge } from "tailwind-merge";
 import { createTiptapEditor } from "solid-tiptap";
 import StarterKit from "@tiptap/starter-kit";
@@ -24,6 +24,8 @@ import TableCell from "@tiptap/extension-table-cell";
 import Image from "@tiptap/extension-image";
 import { createControllableSignal } from "../../../hooks/createControllableSignal";
 import type { FieldSize } from "../field/Field.styles";
+import { bg, border, text } from "../../../styles/base.styles";
+import { pad } from "../../../styles/control.styles";
 import { EditorToolbar } from "./EditorToolbar";
 
 export interface RichTextEditorProps {
@@ -46,34 +48,13 @@ export interface RichTextEditorProps {
   style?: JSX.CSSProperties;
 }
 
-// Editor wrapper style
-const editorWrapperClass = clsx(
-  "flex flex-col",
-  "bg-primary-50 dark:bg-primary-950/30",
-  "text-base-900 dark:text-base-100",
-  "border border-base-300 dark:border-base-700",
-  "rounded",
-  "focus-within:border-primary-500",
-);
-
-// Editor disabled style
-const editorDisabledClass = clsx("bg-base-100 dark:bg-base-800", "text-base-500");
-
-// Editor content area style
-const editorContentClass = clsx(
-  "px-4 py-3",
-  "min-h-32",
-  "outline-none",
-  "prose prose-sm max-w-none",
-  "dark:prose-invert",
-);
-
 // Editor content size-based style
 const editorContentSizeClasses: Record<FieldSize, string> = {
-  xs: clsx("px-1.5 py-1", "min-h-12"),
-  sm: clsx("px-3 py-2", "min-h-24"),
-  lg: clsx("px-5 py-4", "min-h-48"),
-  xl: clsx("px-6 py-5", "min-h-64"),
+  default: clsx(pad.xl, "min-h-32"),
+  xs: clsx(pad.xs, "min-h-12"),
+  sm: clsx(pad.sm, "min-h-24"),
+  lg: clsx(pad.lg, "min-h-48"),
+  xl: clsx(pad.xl, "min-h-64"),
 };
 
 export const RichTextEditor: Component<RichTextEditorProps> = (props) => {
@@ -166,10 +147,14 @@ export const RichTextEditor: Component<RichTextEditorProps> = (props) => {
   });
 
   const getWrapperClass = () =>
-    twMerge(editorWrapperClass, local.disabled && editorDisabledClass, local.class);
+    twMerge(
+      clsx("flex flex-col bg-primary-50 dark:bg-primary-950/30", text.default, "border", border.default, "rounded focus-within:border-primary-500"),
+      local.disabled && clsx(bg.muted, text.muted),
+      local.class,
+    );
 
   const getContentClass = () =>
-    twMerge(editorContentClass, local.size && editorContentSizeClasses[local.size]);
+    twMerge("outline-none prose prose-sm max-w-none dark:prose-invert", editorContentSizeClasses[local.size ?? "default"]);
 
   return (
     <div {...rest} data-rich-text-editor class={getWrapperClass()} style={local.style}>

package/src/components/form-control/field/DatePicker.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 { DateOnly } from "@simplysm/core-common";
 import { createControllableSignal } from "../../../hooks/createControllableSignal";
 import { fieldInputClass, type FieldSize, 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 DatePickerUnit = "year" | "month" | "date";
 
@@ -32,7 +30,7 @@ export interface DatePickerProps {
   disabled?: boolean;
 
   /** Read-only */
-  readonly?: boolean;
+  readOnly?: boolean;
 
   /** Size */
   size?: FieldSize;
@@ -146,7 +144,7 @@ export const DatePicker: Component<DatePickerProps> = (props) => {
     "max",
     "title",
     "disabled",
-    "readonly",
+    "readOnly",
     "size",
     "inset",
     "class",
@@ -188,7 +186,7 @@ export const DatePicker: Component<DatePickerProps> = (props) => {
     });
 
   // Editable check
-  const isEditable = () => !local.disabled && !local.readonly;
+  const isEditable = () => !local.disabled && !local.readOnly;
 
   // Validation message (check in order, return first error)
   const errorMsg = createMemo(() => {
@@ -204,71 +202,31 @@ export const DatePicker: Component<DatePickerProps> = (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-date-field"
+      readonlyExtraClass="sd-date-field"
+      style={local.style}
+      title={local.title}
+      class={local.class}
+      rest={rest}
+      displayContent={displayValue() || "\u00A0"}
     >
-      <Show
-        when={local.inset}
-        fallback={
-          // standalone mode: maintain existing Show pattern
-          <Show
-            when={isEditable()}
-            fallback={
-              <div
-                {...rest}
-                data-date-field
-                class={twMerge(getWrapperClass(true), "sd-date-field")}
-                style={local.style}
-                title={local.title}
-              >
-                {displayValue() || "\u00A0"}
-              </div>
-            }
-          >
-            <div {...rest} data-date-field class={getWrapperClass(true)} style={local.style}>
-              <input
-                type={getInputType(fieldType())}
-                class={fieldInputClass}
-                value={displayValue()}
-                title={local.title}
-                min={formatDateValue(local.min, fieldType())}
-                max={formatDateValue(local.max, fieldType())}
-                autocomplete="one-time-code"
-                onChange={handleChange}
-              />
-            </div>
-          </Show>
-        }
-      >
-        {/* inset mode: dual-element overlay pattern */}
-        <div {...rest} data-date-field class={clsx("relative", local.class)} style={local.style}>
-          <div
-            data-date-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={getInputType(fieldType())}
-                class={fieldInputClass}
-                value={displayValue()}
-                title={local.title}
-                min={formatDateValue(local.min, fieldType())}
-                max={formatDateValue(local.max, fieldType())}
-                autocomplete="one-time-code"
-                onChange={handleChange}
-              />
-            </div>
-          </Show>
-        </div>
-      </Show>
-    </Invalid>
+      <input
+        type={getInputType(fieldType())}
+        class={fieldInputClass}
+        value={displayValue()}
+        title={local.title}
+        min={formatDateValue(local.min, fieldType())}
+        max={formatDateValue(local.max, fieldType())}
+        autocomplete="one-time-code"
+        onChange={handleChange}
+      />
+    </FieldShell>
   );
 };