@planetaexo/design-system 0.4.11 → 0.4.12

package/dist/index.cjs

@@ -1209,7 +1209,7 @@ function CountrySearchField({
           type: "button",
           onClick: () => handleSelect(c.code),
           className: cn(
-            "flex w-full items-center px-3 py-2 text-sm font-ui text-left transition-colors hover:bg-muted",
+            "flex w-full items-center px-3 py-2 text-sm font-ui text-left text-foreground transition-colors hover:bg-muted",
             c.code === value && "bg-primary/10 text-primary font-semibold"
           ),
           children: c.name
@@ -4232,6 +4232,83 @@ function FloatingTextarea({
     )
   ] });
 }
+function SelectField({ field, value, onChange, error }) {
+  var _a, _b, _c;
+  const [open, setOpen] = React21__namespace.useState(false);
+  const containerRef = React21__namespace.useRef(null);
+  const options = (_a = field.options) != null ? _a : [];
+  const selectedOpt = (_b = options.find((o) => o.value === value)) != null ? _b : null;
+  React21__namespace.useEffect(() => {
+    if (!open) return;
+    const handleOutside = (e) => {
+      if (containerRef.current && !containerRef.current.contains(e.target)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleOutside);
+    return () => document.removeEventListener("mousedown", handleOutside);
+  }, [open]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: containerRef, className: "relative w-full", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => setOpen((o) => !o),
+        className: cn(
+          "relative flex w-full items-center rounded-lg border border-border bg-background h-14 px-3 text-left transition-colors",
+          open && "border-primary ring-1 ring-primary",
+          error && !open && "border-destructive"
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "span",
+            {
+              className: cn(
+                "pointer-events-none absolute left-3 transition-all duration-150 font-ui",
+                selectedOpt || open ? cn("top-2 text-xs", open ? "text-primary" : "text-muted-foreground") : "top-1/2 -translate-y-1/2 text-base text-muted-foreground"
+              ),
+              children: [
+                field.label,
+                field.required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-primary ml-0.5", children: "*" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("flex-1 pt-3 text-base font-ui truncate", selectedOpt ? "text-foreground" : "invisible"), children: (_c = selectedOpt == null ? void 0 : selectedOpt.label) != null ? _c : "\u2014" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "svg",
+            {
+              className: cn("h-4 w-4 shrink-0 text-muted-foreground transition-transform", open && "rotate-180"),
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m6 9 6 6 6-6" })
+            }
+          )
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-[calc(100%+4px)] left-0 right-0 z-50 rounded-xl border border-border bg-background shadow-lg overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-h-52 overflow-y-auto py-1", children: options.map((opt) => /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => {
+          onChange(opt.value);
+          setOpen(false);
+        },
+        className: cn(
+          "flex w-full items-center px-3 py-2 text-sm font-ui text-left text-foreground transition-colors hover:bg-muted",
+          opt.value === value && "bg-primary/10 text-primary font-semibold"
+        ),
+        children: opt.label
+      },
+      opt.value
+    )) }) }),
+    error && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-xs text-destructive font-ui", children: error })
+  ] });
+}
 function FieldRenderer({
   field,
   value,
@@ -4240,7 +4317,7 @@ function FieldRenderer({
   labels,
   error
 }) {
-  var _a, _b, _c;
+  var _a, _b;
   const fieldId = `rf-${field.id}`;
   if (field.type === "name") {
     const v = asName(value);
@@ -4354,24 +4431,18 @@ function FieldRenderer({
     );
   }
   if (field.type === "select") {
-    const options = (_a = field.options) != null ? _a : [];
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      FloatingSelect,
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      SelectField,
       {
-        label: field.label,
-        required: field.required,
+        field,
         value: typeof value === "string" ? value : "",
-        onChange: (e) => onChange(e.target.value),
-        error,
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", disabled: true, hidden: true }),
-          options.map((opt) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: opt.value, children: opt.label }, opt.value))
-        ]
+        onChange: (v) => onChange(v),
+        error
       }
     );
   }
   if (field.type === "radio") {
-    const options = (_b = field.options) != null ? _b : [];
+    const options = (_a = field.options) != null ? _a : [];
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
       /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "mb-3 text-sm font-ui font-medium text-foreground", children: [
         field.label,
@@ -4406,11 +4477,12 @@ function FieldRenderer({
             opt.value
           ))
         }
-      )
+      ),
+      error && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-xs text-destructive font-ui", children: error })
     ] });
   }
   if (field.type === "checkbox") {
-    const options = (_c = field.options) != null ? _c : [];
+    const options = (_b = field.options) != null ? _b : [];
     if (options.length === 0) {
       return /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "flex min-h-9 cursor-pointer items-center gap-2.5 font-ui text-sm text-foreground", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -4609,15 +4681,17 @@ function RegistrationForm({
       }
     }
   }
+  const termsError = submitAttempted && termsEnabled && !termsAccepted;
   const firstErrorFieldId = Object.keys(fieldErrors)[0];
+  const scrollTargetId = firstErrorFieldId ? `rf-${firstErrorFieldId}` : termsError ? "rf-terms" : null;
   React21__namespace.useEffect(() => {
-    if (!submitAttempted || !firstErrorFieldId) return;
+    if (!submitAttempted || !scrollTargetId) return;
     const timer = setTimeout(() => {
-      const elem = document.getElementById(`rf-${firstErrorFieldId}`);
+      const elem = document.getElementById(scrollTargetId);
       if (elem) elem.scrollIntoView({ behavior: "smooth", block: "center" });
     }, 50);
     return () => clearTimeout(timer);
-  }, [submitAttempted, firstErrorFieldId, validationErrors]);
+  }, [submitAttempted, scrollTargetId]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "form",
     {
@@ -4708,58 +4782,86 @@ function RegistrationForm({
               ((_a2 = field.helpText) == null ? void 0 : _a2.trim()) && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground font-ui leading-relaxed", children: field.helpText.trim() })
             ] }, field.id);
           }) }),
-          termsEnabled && terms && /* @__PURE__ */ jsxRuntime.jsxs(FormSection2, { title: L.termsSectionTitle, children: [
+          termsEnabled && terms && /* @__PURE__ */ jsxRuntime.jsx("div", { id: "rf-terms", children: /* @__PURE__ */ jsxRuntime.jsxs(FormSection2, { title: L.termsSectionTitle, children: [
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-h-72 overflow-y-auto rounded-lg border border-border bg-muted/30 p-4", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "whitespace-pre-wrap text-sm leading-relaxed text-foreground font-ui", children: terms.markdown }) }),
-            acceptControl === "checkbox" ? /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "flex cursor-pointer items-start gap-2.5 font-ui text-sm text-foreground", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "input",
+            acceptControl === "checkbox" ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1.5", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "label",
                 {
-                  type: "checkbox",
-                  checked: termsAccepted,
-                  required: true,
-                  onChange: (e) => setField(TERMS_ACCEPT_KEY, e.target.checked),
-                  className: "mt-0.5 h-4 w-4 shrink-0 accent-primary cursor-pointer"
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { children: L.termsAccept })
-            ] }) : /* @__PURE__ */ jsxRuntime.jsxs(
-              "div",
-              {
-                role: "radiogroup",
-                "aria-label": L.termsSectionTitle,
-                className: "flex flex-wrap items-center gap-x-6 gap-y-3",
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "flex min-h-9 cursor-pointer items-center gap-2.5 font-ui text-sm text-foreground", children: [
+                  className: cn(
+                    "flex cursor-pointer items-start gap-2.5 font-ui text-sm",
+                    termsError ? "text-destructive" : "text-foreground"
+                  ),
+                  children: [
                     /* @__PURE__ */ jsxRuntime.jsx(
                       "input",
                       {
-                        type: "radio",
-                        name: "registration-terms-accept",
+                        type: "checkbox",
                         checked: termsAccepted,
                         required: true,
-                        onChange: () => setField(TERMS_ACCEPT_KEY, true),
-                        className: "h-4 w-4 shrink-0 accent-primary cursor-pointer"
+                        onChange: (e) => setField(TERMS_ACCEPT_KEY, e.target.checked),
+                        className: "mt-0.5 h-4 w-4 shrink-0 accent-primary cursor-pointer"
                       }
                     ),
-                    L.termsAccept
-                  ] }),
-                  /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "flex min-h-9 cursor-pointer items-center gap-2.5 font-ui text-sm text-muted-foreground", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      "input",
+                    /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+                      L.termsAccept,
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-primary ml-0.5", children: "*" })
+                    ] })
+                  ]
+                }
+              ),
+              termsError && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-destructive font-ui", children: L.requiredFieldError })
+            ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1.5", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  role: "radiogroup",
+                  "aria-label": L.termsSectionTitle,
+                  className: "flex flex-wrap items-center gap-x-6 gap-y-3",
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs(
+                      "label",
                       {
-                        type: "radio",
-                        name: "registration-terms-accept",
-                        checked: current[TERMS_ACCEPT_KEY] === false,
-                        onChange: () => setField(TERMS_ACCEPT_KEY, false),
-                        className: "h-4 w-4 shrink-0 accent-primary cursor-pointer"
+                        className: cn(
+                          "flex min-h-9 cursor-pointer items-center gap-2.5 font-ui text-sm",
+                          termsError ? "text-destructive" : "text-foreground"
+                        ),
+                        children: [
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            "input",
+                            {
+                              type: "radio",
+                              name: "registration-terms-accept",
+                              checked: termsAccepted,
+                              required: true,
+                              onChange: () => setField(TERMS_ACCEPT_KEY, true),
+                              className: "h-4 w-4 shrink-0 accent-primary cursor-pointer"
+                            }
+                          ),
+                          L.termsAccept,
+                          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-primary ml-0.5", children: "*" })
+                        ]
                       }
                     ),
-                    L.termsDecline
-                  ] })
-                ]
-              }
-            )
-          ] }),
+                    /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "flex min-h-9 cursor-pointer items-center gap-2.5 font-ui text-sm text-muted-foreground", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "input",
+                        {
+                          type: "radio",
+                          name: "registration-terms-accept",
+                          checked: current[TERMS_ACCEPT_KEY] === false,
+                          onChange: () => setField(TERMS_ACCEPT_KEY, false),
+                          className: "h-4 w-4 shrink-0 accent-primary cursor-pointer"
+                        }
+                      ),
+                      L.termsDecline
+                    ] })
+                  ]
+                }
+              ),
+              termsError && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-destructive font-ui", children: L.requiredFieldError })
+            ] })
+          ] }) }),
           error && /* @__PURE__ */ jsxRuntime.jsx("p", { role: "alert", className: "text-sm text-destructive font-ui", children: error }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center pt-2", children: /* @__PURE__ */ jsxRuntime.jsx(
             "button",