@rxdrag/website-lib-core 0.0.127 → 0.0.129

package/src/react/components/ContactForm/Input2.tsx

@@ -1,59 +1,59 @@
-import clsx from "clsx";
-import { forwardRef } from "react";
-import { InputProps } from "./Input";
-import { useInlineLabelPadding } from "./hooks/useInlineLabelPadding";
-
-export const Input2 = forwardRef<HTMLInputElement, InputProps>((props, ref) => {
-  const {
-    label,
-    name,
-    required,
-    requiredClassName,
-    className,
-    labelClassName,
-    inputClassName,
-    type = "text",
-    autoFocus,
-    value,
-    placeholder,
-    onChange,
-    error,
-    ...rest
-  } = props;
-
-  const { labelRef, paddingLeft } = useInlineLabelPadding(16);
-
-  return (
-    <div className={clsx("relative w-full", className)} {...rest}>
-      <label
-        ref={labelRef}
-        htmlFor={name}
-        className={clsx(
-          "absolute left-3 top-1/2 -translate-y-1/2 mt-1 opacity-70 text-sm pointer-events-none whitespace-nowrap",
-          labelClassName
-        )}
-      >
-        {label}
-        {required ? <span className={requiredClassName}>*</span> : ""}
-      </label>
-      <input
-        ref={ref}
-        type={type}
-        id={name}
-        name={name}
-        required={required}
-        placeholder={placeholder}
-        className={clsx(
-          "w-full pr-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-300 bg-transparent focus:bg-white transition-colors duration-200",
-          inputClassName
-        )}
-        style={{ paddingLeft }}
-        autoComplete={name}
-        autoFocus={autoFocus}
-        value={value}
-        onChange={onChange}
-      />
-      {error && <p className="text-red-500 mt-1 text-sm">{error}</p>}
-    </div>
-  );
-});
+import clsx from "clsx";
+import { forwardRef } from "react";
+import { InputProps } from "./Input";
+import { useInlineLabelPadding } from "./hooks/useInlineLabelPadding";
+
+export const Input2 = forwardRef<HTMLInputElement, InputProps>((props, ref) => {
+  const {
+    label,
+    name,
+    required,
+    requiredClassName,
+    className,
+    labelClassName,
+    inputClassName,
+    type = "text",
+    autoFocus,
+    value,
+    placeholder,
+    onChange,
+    error,
+    ...rest
+  } = props;
+
+  const { labelRef, paddingLeft } = useInlineLabelPadding(16);
+
+  return (
+    <div className={clsx("relative w-full", className)} {...rest}>
+      <label
+        ref={labelRef}
+        htmlFor={name}
+        className={clsx(
+          "absolute left-3 top-1/2 -translate-y-1/2 mt-1 opacity-70 text-sm pointer-events-none whitespace-nowrap",
+          labelClassName
+        )}
+      >
+        {label}
+        {required ? <span className={requiredClassName}>*</span> : ""}
+      </label>
+      <input
+        ref={ref}
+        type={type}
+        id={name}
+        name={name}
+        required={required}
+        placeholder={placeholder}
+        className={clsx(
+          "w-full pr-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-300 bg-transparent focus:bg-white transition-colors duration-200",
+          inputClassName
+        )}
+        style={{ paddingLeft }}
+        autoComplete={name}
+        autoFocus={autoFocus}
+        value={value}
+        onChange={onChange}
+      />
+      {error && <p className="text-red-500 mt-1 text-sm">{error}</p>}
+    </div>
+  );
+});

package/src/react/components/ContactForm/Submit.tsx

@@ -1,48 +1,48 @@
-export type SubmitProps = {
-  needClasses?: string;
-  title: string;
-  className?: string;
-  rawHtml?: string;
-  spinner?: React.ReactNode;
-  submitting?: boolean;
-  disabled?: boolean;
-  onClick?: (e: React.MouseEvent) => void;
-};
-
-export const Submit: React.FC<SubmitProps> = (props) => {
-  const {
-    title = "Send Message",
-    className,
-    spinner,
-    submitting,
-    disabled,
-    onClick,
-    rawHtml,
-    needClasses,
-    ...rest
-  } = props;
-  return (
-    <>
-      <button
-        type="button"
-        className={className}
-        disabled={disabled ?? submitting}
-        onClick={onClick}
-        {...rest}
-      >
-        {submitting && spinner}
-        {rawHtml ? (
-          <div
-            style={{ display: "contents" }}
-            dangerouslySetInnerHTML={{ __html: rawHtml }}
-          />
-        ) : (
-          title
-        )}
-      </button>
-      <span className="fixed -z-10 top-0 left-0 w-0 h-0 overflow-hidden opacity-0 pointer-events-none">
-        <span className={needClasses}></span>
-      </span>
-    </>
-  );
-};
+export type SubmitProps = {
+  needClasses?: string;
+  title: string;
+  className?: string;
+  rawHtml?: string;
+  spinner?: React.ReactNode;
+  submitting?: boolean;
+  disabled?: boolean;
+  onClick?: (e: React.MouseEvent) => void;
+};
+
+export const Submit: React.FC<SubmitProps> = (props) => {
+  const {
+    title = "Send Message",
+    className,
+    spinner,
+    submitting,
+    disabled,
+    onClick,
+    rawHtml,
+    needClasses,
+    ...rest
+  } = props;
+  return (
+    <>
+      <button
+        type="button"
+        className={className}
+        disabled={disabled ?? submitting}
+        onClick={onClick}
+        {...rest}
+      >
+        {submitting && spinner}
+        {rawHtml ? (
+          <div
+            style={{ display: "contents" }}
+            dangerouslySetInnerHTML={{ __html: rawHtml }}
+          />
+        ) : (
+          title
+        )}
+      </button>
+      <span className="fixed -z-10 top-0 left-0 w-0 h-0 overflow-hidden opacity-0 pointer-events-none">
+        <span className={needClasses}></span>
+      </span>
+    </>
+  );
+};

package/src/react/components/ContactForm/TelInput.tsx

@@ -1,215 +1,215 @@
-import clsx from "clsx";
-import { forwardRef, useEffect, useMemo, useRef, useState } from "react";
-import { CountryDial } from "./countryDialCodes";
-import { useTelControl } from "./hooks/useTelControl";
-
-export interface TelInputProps
-  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> {
-  label?: string;
-  name: string;
-  required?: boolean;
-  requiredClassName?: string;
-  className?: string;
-  labelClassName?: string;
-  inputClassName?: string;
-  countries?: CountryDial[];
-}
-
-export const TelInput = forwardRef<HTMLInputElement, TelInputProps>(
-  (props, ref) => {
-    const {
-      label,
-      name,
-      required,
-      requiredClassName,
-      className,
-      labelClassName,
-      inputClassName,
-      countries,
-      placeholder,
-      value,
-      onChange,
-    } = props;
-
-    const { allCountries, selected, localNumber, onSelectCountry, onChangeLocal } =
-      useTelControl({ countries, name, value, onChange });
-
-    const [open, setOpen] = useState(false);
-    const [query, setQuery] = useState("");
-    const panelRef = useRef<HTMLDivElement | null>(null);
-    const buttonRef = useRef<HTMLButtonElement | null>(null);
-
-    useEffect(() => {
-      const onDocClick = (e: MouseEvent) => {
-        const target = e.target as Node;
-        if (
-          open &&
-          panelRef.current &&
-          !panelRef.current.contains(target) &&
-          buttonRef.current &&
-          !buttonRef.current.contains(target)
-        ) {
-          setOpen(false);
-        }
-      };
-      document.addEventListener("mousedown", onDocClick);
-      return () => document.removeEventListener("mousedown", onDocClick);
-    }, [open]);
-
-    // 使用 useTelControl 负责解析与变更回传
-
-    const filtered: CountryDial[] = useMemo(() => {
-      if (!query) return allCountries;
-      const q = query.toLowerCase();
-      return allCountries.filter(
-        (c: CountryDial) =>
-          c.name.toLowerCase().includes(q) ||
-          (c.region && c.region.toLowerCase().includes(q)) ||
-          c.dialCode.replace("+", "").includes(q.replace("+", ""))
-      );
-    }, [allCountries, query]);
-
-    return (
-      <div className={clsx("w-full", className)}>
-        {label ? (
-          <label
-            htmlFor={name}
-            className={clsx(
-              "mb-1 inline-flex items-center text-sm text-gray-600",
-              labelClassName
-            )}
-          >
-            {label}
-            {required ? <span className={requiredClassName}>*</span> : null}
-          </label>
-        ) : null}
-
-        <div
-          className={clsx(
-            "flex h-10 items-center gap-2 rounded-md focus-within:ring-2 focus-within:ring-primary-300 focus-within:ring-offset-0 bg-white",
-            inputClassName
-          )}
-        >
-          <div className="relative h-full">
-            <button
-              ref={buttonRef}
-              type="button"
-              aria-haspopup="listbox"
-              aria-expanded={open}
-              onClick={() => setOpen((v) => !v)}
-              className={
-                "h-full min-w-[200px] inline-flex items-center justify-between whitespace-nowrap rounded-md px-3 py-0 text-sm"
-              }
-            >
-              <span className="truncate text-left leading-tight">
-                {selected ? (
-                  <>
-                    <span className="font-medium">{selected.name}</span>
-                    {selected.region ? (
-                      <span className="text-gray-500">, {selected.region}</span>
-                    ) : null}
-                    <span className="ml-1 text-gray-700">
-                      {selected.dialCode}
-                    </span>
-                  </>
-                ) : (
-                  "Select Country/Region"
-                )}
-              </span>
-              <svg
-                className="ml-2 h-4 w-4 text-gray-500"
-                viewBox="0 0 20 20"
-                fill="currentColor"
-                aria-hidden="true"
-              >
-                <path
-                  fillRule="evenodd"
-                  d="M5.23 7.21a.75.75 0 011.06.02L10 11.085l3.71-3.855a.75.75 0 111.08 1.04l-4.24 4.41a.75.75 0 01-1.08 0L5.25 8.27a.75.75 0 01-.02-1.06z"
-                  clipRule="evenodd"
-                />
-              </svg>
-            </button>
-
-            {open ? (
-              <div
-                ref={panelRef}
-                className="absolute z-50 mt-2 w-[320px] rounded-md border border-gray-200 bg-white p-2 shadow-lg"
-              >
-                <div className="flex items-center gap-2 rounded-md border border-gray-200 px-2 py-1.5">
-                  <input
-                    value={query}
-                    onChange={(e) => setQuery(e.target.value)}
-                    placeholder="Enter Country/Region"
-                    className="h-8 w-full bg-transparent text-sm outline-none"
-                  />
-                  <svg
-                    className="h-4 w-4 text-gray-500"
-                    viewBox="0 0 20 20"
-                    fill="currentColor"
-                    aria-hidden="true"
-                  >
-                    <path
-                      fillRule="evenodd"
-                      d="M8.5 3.5a5 5 0 013.996 8.1l3.202 3.203a.75.75 0 11-1.06 1.06l-3.203-3.202A5 5 0 118.5 3.5zm0 1.5a3.5 3.5 0 100 7 3.5 3.5 0 000-7z"
-                      clipRule="evenodd"
-                    />
-                  </svg>
-                </div>
-
-                <div className="mt-2 max-h-64 overflow-auto pr-1">
-                  {filtered.map((c: CountryDial) => (
-                    <button
-                      key={c.code}
-                      type="button"
-                      onClick={() => {
-                        onSelectCountry(c);
-                        setOpen(false);
-                      }}
-                      className="flex w-full items-center gap-2 rounded-md px-2 py-2 text-left text-sm hover:bg-gray-50"
-                    >
-                      <span
-                        className={clsx(
-                          "inline-block h-3 w-3 rounded-full border",
-                          selected?.code === c.code
-                            ? "border-primary-500 ring-4 ring-primary-200"
-                            : "border-gray-400"
-                        )}
-                      ></span>
-                      <span className="flex-1 truncate">
-                        {c.name}
-                        {c.region ? (
-                          <span className="text-gray-500">, {c.region}</span>
-                        ) : null}
-                      </span>
-                      <span className="text-gray-700">{c.dialCode}</span>
-                    </button>
-                  ))}
-                </div>
-              </div>
-            ) : null}
-          </div>
-
-          <input
-            ref={ref}
-            id={name}
-            name={name}
-            required={required}
-            placeholder={placeholder || "Phone number"}
-            inputMode="tel"
-            className={clsx("h-10 w-full px-3 py-0 text-sm leading-tight ring-0 outline-none rounded-md")}
-            value={localNumber}
-            onChange={(e) => {
-              const next = e.target.value;
-              onChangeLocal(next);
-            }}
-            autoComplete={name}
-            autoCorrect="off"
-            spellCheck={false}
-          />
-        </div>
-      </div>
-    );
-  }
-);
-
-export default TelInput;
+import clsx from "clsx";
+import { forwardRef, useEffect, useMemo, useRef, useState } from "react";
+import { CountryDial } from "./countryDialCodes";
+import { useTelControl } from "./hooks/useTelControl";
+
+export interface TelInputProps
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> {
+  label?: string;
+  name: string;
+  required?: boolean;
+  requiredClassName?: string;
+  className?: string;
+  labelClassName?: string;
+  inputClassName?: string;
+  countries?: CountryDial[];
+}
+
+export const TelInput = forwardRef<HTMLInputElement, TelInputProps>(
+  (props, ref) => {
+    const {
+      label,
+      name,
+      required,
+      requiredClassName,
+      className,
+      labelClassName,
+      inputClassName,
+      countries,
+      placeholder,
+      value,
+      onChange,
+    } = props;
+
+    const { allCountries, selected, localNumber, onSelectCountry, onChangeLocal } =
+      useTelControl({ countries, name, value, onChange });
+
+    const [open, setOpen] = useState(false);
+    const [query, setQuery] = useState("");
+    const panelRef = useRef<HTMLDivElement | null>(null);
+    const buttonRef = useRef<HTMLButtonElement | null>(null);
+
+    useEffect(() => {
+      const onDocClick = (e: MouseEvent) => {
+        const target = e.target as Node;
+        if (
+          open &&
+          panelRef.current &&
+          !panelRef.current.contains(target) &&
+          buttonRef.current &&
+          !buttonRef.current.contains(target)
+        ) {
+          setOpen(false);
+        }
+      };
+      document.addEventListener("mousedown", onDocClick);
+      return () => document.removeEventListener("mousedown", onDocClick);
+    }, [open]);
+
+    // 使用 useTelControl 负责解析与变更回传
+
+    const filtered: CountryDial[] = useMemo(() => {
+      if (!query) return allCountries;
+      const q = query.toLowerCase();
+      return allCountries.filter(
+        (c: CountryDial) =>
+          c.name.toLowerCase().includes(q) ||
+          (c.region && c.region.toLowerCase().includes(q)) ||
+          c.dialCode.replace("+", "").includes(q.replace("+", ""))
+      );
+    }, [allCountries, query]);
+
+    return (
+      <div className={clsx("w-full", className)}>
+        {label ? (
+          <label
+            htmlFor={name}
+            className={clsx(
+              "mb-1 inline-flex items-center text-sm text-gray-600",
+              labelClassName
+            )}
+          >
+            {label}
+            {required ? <span className={requiredClassName}>*</span> : null}
+          </label>
+        ) : null}
+
+        <div
+          className={clsx(
+            "flex h-10 items-center gap-2 rounded-md focus-within:ring-2 focus-within:ring-primary-300 focus-within:ring-offset-0 bg-white",
+            inputClassName
+          )}
+        >
+          <div className="relative h-full">
+            <button
+              ref={buttonRef}
+              type="button"
+              aria-haspopup="listbox"
+              aria-expanded={open}
+              onClick={() => setOpen((v) => !v)}
+              className={
+                "h-full min-w-[200px] inline-flex items-center justify-between whitespace-nowrap rounded-md px-3 py-0 text-sm"
+              }
+            >
+              <span className="truncate text-left leading-tight">
+                {selected ? (
+                  <>
+                    <span className="font-medium">{selected.name}</span>
+                    {selected.region ? (
+                      <span className="text-gray-500">, {selected.region}</span>
+                    ) : null}
+                    <span className="ml-1 text-gray-700">
+                      {selected.dialCode}
+                    </span>
+                  </>
+                ) : (
+                  "Select Country/Region"
+                )}
+              </span>
+              <svg
+                className="ml-2 h-4 w-4 text-gray-500"
+                viewBox="0 0 20 20"
+                fill="currentColor"
+                aria-hidden="true"
+              >
+                <path
+                  fillRule="evenodd"
+                  d="M5.23 7.21a.75.75 0 011.06.02L10 11.085l3.71-3.855a.75.75 0 111.08 1.04l-4.24 4.41a.75.75 0 01-1.08 0L5.25 8.27a.75.75 0 01-.02-1.06z"
+                  clipRule="evenodd"
+                />
+              </svg>
+            </button>
+
+            {open ? (
+              <div
+                ref={panelRef}
+                className="absolute z-50 mt-2 w-[320px] rounded-md border border-gray-200 bg-white p-2 shadow-lg"
+              >
+                <div className="flex items-center gap-2 rounded-md border border-gray-200 px-2 py-1.5">
+                  <input
+                    value={query}
+                    onChange={(e) => setQuery(e.target.value)}
+                    placeholder="Enter Country/Region"
+                    className="h-8 w-full bg-transparent text-sm outline-none"
+                  />
+                  <svg
+                    className="h-4 w-4 text-gray-500"
+                    viewBox="0 0 20 20"
+                    fill="currentColor"
+                    aria-hidden="true"
+                  >
+                    <path
+                      fillRule="evenodd"
+                      d="M8.5 3.5a5 5 0 013.996 8.1l3.202 3.203a.75.75 0 11-1.06 1.06l-3.203-3.202A5 5 0 118.5 3.5zm0 1.5a3.5 3.5 0 100 7 3.5 3.5 0 000-7z"
+                      clipRule="evenodd"
+                    />
+                  </svg>
+                </div>
+
+                <div className="mt-2 max-h-64 overflow-auto pr-1">
+                  {filtered.map((c: CountryDial) => (
+                    <button
+                      key={c.code}
+                      type="button"
+                      onClick={() => {
+                        onSelectCountry(c);
+                        setOpen(false);
+                      }}
+                      className="flex w-full items-center gap-2 rounded-md px-2 py-2 text-left text-sm hover:bg-gray-50"
+                    >
+                      <span
+                        className={clsx(
+                          "inline-block h-3 w-3 rounded-full border",
+                          selected?.code === c.code
+                            ? "border-primary-500 ring-4 ring-primary-200"
+                            : "border-gray-400"
+                        )}
+                      ></span>
+                      <span className="flex-1 truncate">
+                        {c.name}
+                        {c.region ? (
+                          <span className="text-gray-500">, {c.region}</span>
+                        ) : null}
+                      </span>
+                      <span className="text-gray-700">{c.dialCode}</span>
+                    </button>
+                  ))}
+                </div>
+              </div>
+            ) : null}
+          </div>
+
+          <input
+            ref={ref}
+            id={name}
+            name={name}
+            required={required}
+            placeholder={placeholder || "Phone number"}
+            inputMode="tel"
+            className={clsx("h-10 w-full px-3 py-0 text-sm leading-tight ring-0 outline-none rounded-md")}
+            value={localNumber}
+            onChange={(e) => {
+              const next = e.target.value;
+              onChangeLocal(next);
+            }}
+            autoComplete={name}
+            autoCorrect="off"
+            spellCheck={false}
+          />
+        </div>
+      </div>
+    );
+  }
+);
+
+export default TelInput;