@anker-in/ui 0.1.17 → 0.1.19

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/index.js +103 -70
  2. package/dist/index.js.map +1 -1
  3. package/dist/index.mjs +103 -70
  4. package/dist/index.mjs.map +1 -1
  5. package/package.json +1 -1
package/dist/index.mjs CHANGED
@@ -1784,6 +1784,16 @@ var QuestionnaireForm = ({
1784
1784
  }
1785
1785
  });
1786
1786
  onSubmit?.(finalResponses);
1787
+ } else {
1788
+ setTimeout(() => {
1789
+ const firstErrorElement = document.querySelector('[data-has-error="true"]');
1790
+ if (firstErrorElement) {
1791
+ firstErrorElement.scrollIntoView({
1792
+ behavior: "smooth",
1793
+ block: "center"
1794
+ });
1795
+ }
1796
+ }, 100);
1787
1797
  }
1788
1798
  };
1789
1799
  const renderQuestion = (question) => {
@@ -1966,7 +1976,7 @@ var QuestionnaireForm = ({
1966
1976
  onChange: (e) => handleOtherInputChange(questionId, e.target.value),
1967
1977
  placeholder: question.placeholder || "Please specify...",
1968
1978
  className: cn(
1969
- "w-full ml-8 px-4 py-3 rounded-lg border text-base bg-white dark:bg-white dark:text-gray-900",
1979
+ "w-full px-4 py-3 rounded-lg border text-base bg-white dark:bg-white dark:text-gray-900",
1970
1980
  "focus:outline-none focus:ring-2 focus:ring-[#3ADB67] focus:border-transparent",
1971
1981
  hasError ? "border-red-500" : "border-[#E4E5E6]"
1972
1982
  )
@@ -2008,11 +2018,17 @@ var QuestionnaireForm = ({
2008
2018
  optionValue
2009
2019
  );
2010
2020
  }) });
2011
- case "select":
2021
+ case "select": {
2022
+ const currentValue = responses[questionId];
2023
+ const hasOnlyOneOption = question.options?.length === 1;
2024
+ const defaultValue = hasOnlyOneOption && !currentValue && question.options?.[0] ? question.options[0].value || question.options[0].label : currentValue || "";
2025
+ if (hasOnlyOneOption && !currentValue && question.options?.[0]) {
2026
+ handleChange(questionId, defaultValue);
2027
+ }
2012
2028
  return /* @__PURE__ */ jsx(
2013
2029
  "select",
2014
2030
  {
2015
- value: responses[questionId] || "",
2031
+ value: defaultValue,
2016
2032
  onChange: (e) => handleChange(questionId, e.target.value),
2017
2033
  className: cn(
2018
2034
  "w-full px-4 py-3 rounded-lg border text-base bg-white dark:bg-white dark:text-gray-900",
@@ -2030,6 +2046,7 @@ var QuestionnaireForm = ({
2030
2046
  ))
2031
2047
  }
2032
2048
  );
2049
+ }
2033
2050
  default:
2034
2051
  return null;
2035
2052
  }
@@ -2037,62 +2054,78 @@ var QuestionnaireForm = ({
2037
2054
  return /* @__PURE__ */ jsxs("div", { className: "pb-[80px] light", children: [
2038
2055
  questions && questions.length > 0 && /* @__PURE__ */ jsx("div", { className: "bg-white rounded-[12px] border border-[#E4E5E6] p-8 dark:bg-white dark:border-[#E4E5E6] l:p-4", children: /* @__PURE__ */ jsx("form", { onSubmit: handleSubmit, className: cn("space-y-6", className), children: questions.map((question) => {
2039
2056
  const questionId = getQuestionId(question);
2040
- return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
2041
- /* @__PURE__ */ jsxs("label", { className: "block", children: [
2042
- /* @__PURE__ */ jsxs("span", { className: "text-base font-bold text-gray-900 dark:text-gray-900", children: [
2043
- question.label,
2044
- question.required && /* @__PURE__ */ jsx("span", { className: "text-red-500 ml-1", children: "*" })
2045
- ] }),
2046
- question.description && /* @__PURE__ */ jsx("span", { className: "block text-sm text-gray-600 dark:text-gray-600 font-bold mt-1", children: question.description }),
2047
- question.type === "email" && questionId === "email" && pageData?.emailDescription && /* @__PURE__ */ jsx("span", { className: "block text-sm text-gray-600 dark:text-gray-600 font-bold mt-1", children: pageData.emailDescription })
2048
- ] }),
2049
- renderQuestion(question),
2050
- question.hint && !errors[questionId] && /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500 dark:text-gray-500 font-bold", children: question.hint }),
2051
- errors[questionId] && /* @__PURE__ */ jsx(
2052
- "p",
2053
- {
2054
- className: "text-sm font-bold",
2055
- style: { color: "#FF4D4D" },
2056
- children: errors[questionId]
2057
- }
2058
- )
2059
- ] }, questionId);
2057
+ const hasError = !!errors[questionId];
2058
+ return /* @__PURE__ */ jsxs(
2059
+ "div",
2060
+ {
2061
+ className: "space-y-2",
2062
+ "data-has-error": hasError ? "true" : "false",
2063
+ children: [
2064
+ /* @__PURE__ */ jsxs("label", { className: "block", children: [
2065
+ /* @__PURE__ */ jsxs("span", { className: "text-base font-bold text-gray-900 dark:text-gray-900", children: [
2066
+ question.label,
2067
+ question.required && /* @__PURE__ */ jsx("span", { className: "text-red-500 ml-1", children: "*" })
2068
+ ] }),
2069
+ question.description && /* @__PURE__ */ jsx("span", { className: "block text-sm text-gray-600 dark:text-gray-600 font-bold mt-1", children: question.description }),
2070
+ question.type === "email" && questionId === "email" && pageData?.emailDescription && /* @__PURE__ */ jsx("span", { className: "block text-sm text-gray-600 dark:text-gray-600 font-bold mt-1", children: pageData.emailDescription })
2071
+ ] }),
2072
+ renderQuestion(question),
2073
+ question.hint && !errors[questionId] && /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500 dark:text-gray-500 font-bold", children: question.hint }),
2074
+ errors[questionId] && /* @__PURE__ */ jsx(
2075
+ "p",
2076
+ {
2077
+ className: "text-sm font-bold",
2078
+ style: { color: "#FF4D4D" },
2079
+ children: errors[questionId]
2080
+ }
2081
+ )
2082
+ ]
2083
+ },
2084
+ questionId
2085
+ );
2060
2086
  }) }) }),
2061
2087
  !!selectedTimeslotId && /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center", children: [
2062
- pageData?.agrees && pageData.agrees.length > 0 && /* @__PURE__ */ jsxs("div", { className: "space-y-4 mt-8", children: [
2063
- pageData.agrees.map((agreeContent, index) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
2064
- /* @__PURE__ */ jsx(
2065
- "input",
2066
- {
2067
- type: "checkbox",
2068
- id: `agreement-${index}`,
2069
- checked: agreements[index] || false,
2070
- onChange: (e) => handleAgreementChange(index, e.target.checked),
2071
- className: "w-5 h-5 rounded text-[#3ADB67] focus:ring-[#3ADB67] cursor-pointer flex-shrink-0",
2072
- style: {
2073
- accentColor: "#3ADB67"
2088
+ pageData?.agrees && pageData.agrees.length > 0 && /* @__PURE__ */ jsxs(
2089
+ "div",
2090
+ {
2091
+ className: "space-y-4 mt-8",
2092
+ "data-has-error": agreementError ? "true" : "false",
2093
+ children: [
2094
+ pageData.agrees.map((agreeContent, index) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
2095
+ /* @__PURE__ */ jsx(
2096
+ "input",
2097
+ {
2098
+ type: "checkbox",
2099
+ id: `agreement-${index}`,
2100
+ checked: agreements[index] || false,
2101
+ onChange: (e) => handleAgreementChange(index, e.target.checked),
2102
+ className: "w-5 h-5 rounded text-[#3ADB67] focus:ring-[#3ADB67] cursor-pointer flex-shrink-0",
2103
+ style: {
2104
+ accentColor: "#3ADB67"
2105
+ }
2106
+ }
2107
+ ),
2108
+ /* @__PURE__ */ jsx(
2109
+ "label",
2110
+ {
2111
+ htmlFor: `agreement-${index}`,
2112
+ className: "text-sm text-gray-700 dark:text-gray-700 font-bold cursor-pointer select-none flex-1 [&_a]:underline [&_a]:text-blue-600 [&_a:hover]:text-blue-700",
2113
+ dangerouslySetInnerHTML: { __html: agreeContent },
2114
+ "aria-label": `Agreement ${index + 1}`
2115
+ }
2116
+ )
2117
+ ] }, index)),
2118
+ agreementError && /* @__PURE__ */ jsx(
2119
+ "p",
2120
+ {
2121
+ className: "text-sm font-bold mt-2",
2122
+ style: { color: "#FF4D4D" },
2123
+ children: agreementError
2074
2124
  }
2075
- }
2076
- ),
2077
- /* @__PURE__ */ jsx(
2078
- "label",
2079
- {
2080
- htmlFor: `agreement-${index}`,
2081
- className: "text-sm text-gray-700 dark:text-gray-700 font-bold cursor-pointer select-none flex-1 [&_a]:underline [&_a]:text-blue-600 [&_a:hover]:text-blue-700",
2082
- dangerouslySetInnerHTML: { __html: agreeContent },
2083
- "aria-label": `Agreement ${index + 1}`
2084
- }
2085
- )
2086
- ] }, index)),
2087
- agreementError && /* @__PURE__ */ jsx(
2088
- "p",
2089
- {
2090
- className: "text-sm font-bold mt-2",
2091
- style: { color: "#FF4D4D" },
2092
- children: agreementError
2093
- }
2094
- )
2095
- ] }),
2125
+ )
2126
+ ]
2127
+ }
2128
+ ),
2096
2129
  /* @__PURE__ */ jsx(
2097
2130
  "button",
2098
2131
  {
@@ -8922,23 +8955,23 @@ var BookingSuccess = ({
8922
8955
  return null;
8923
8956
  }
8924
8957
  return /* @__PURE__ */ jsx("div", { className: `min-h-screen l:py-0 l:px-0 py-12 px-6 ${className || ""}`, children: /* @__PURE__ */ jsxs("div", { className: "mx-auto", children: [
8925
- /* @__PURE__ */ jsx("h1", { className: "text-[40px] font-bold text-gray-900 mb-8", children: pageData.yourAppointment }),
8958
+ /* @__PURE__ */ jsx("h1", { className: "text-[48px] xxl:text-[32px] font-bold text-[#080A0F] mb-8", children: pageData.yourAppointment }),
8926
8959
  isCancelled && /* @__PURE__ */ jsxs("div", { className: "bg-white rounded-[16px] l:items-start p-6 mb-4 l:gap-2 flex l:flex-col items-center justify-between", children: [
8927
- /* @__PURE__ */ jsx("p", { className: "text-base text-gray-700", children: pageData.appointmentCanceled }),
8960
+ /* @__PURE__ */ jsx("p", { className: "text-base text-[#080A0F]", children: pageData.appointmentCanceled }),
8928
8961
  onScheduleAgain && bookingData && /* @__PURE__ */ jsx(
8929
8962
  "button",
8930
8963
  {
8931
8964
  onClick: () => onScheduleAgain(bookingData.demoroom_code),
8932
- className: "px-6 py-3 bg-black text-white rounded-full hover:bg-gray-800 transition-colors whitespace-nowrap",
8965
+ className: "px-6 py-3 text-[16px] bg-black text-white rounded-full hover:bg-gray-800 transition-colors whitespace-nowrap",
8933
8966
  children: pageData.scheduleAgain
8934
8967
  }
8935
8968
  )
8936
8969
  ] }),
8937
8970
  /* @__PURE__ */ jsxs("div", { className: "space-y-8 bg-white px-[48px] l:px-[16px] l:py-[16px] py-[32px] rounded-[16px]", children: [
8938
8971
  /* @__PURE__ */ jsxs("div", { children: [
8939
- /* @__PURE__ */ jsx("h2", { className: "text-lg text-gray-900 mb-3", children: pageData.location }),
8972
+ /* @__PURE__ */ jsx("h2", { className: "text-[24px] l:text-[20px] text-[#4A4C56] mb-3", children: pageData.location }),
8940
8973
  /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
8941
- bookingData.demoroom_name && /* @__PURE__ */ jsx("p", { className: "text-base text-gray-900", children: bookingData.demoroom_name }),
8974
+ bookingData.demoroom_name && /* @__PURE__ */ jsx("p", { className: "text-base text-[#4A4C56]", children: bookingData.demoroom_name }),
8942
8975
  bookingData.address && /* @__PURE__ */ jsx("p", { className: "text-base text-gray-600", children: bookingData.address }),
8943
8976
  bookingData.latitude && bookingData.longitude && /* @__PURE__ */ jsx(
8944
8977
  "a",
@@ -8953,25 +8986,25 @@ var BookingSuccess = ({
8953
8986
  ] })
8954
8987
  ] }),
8955
8988
  /* @__PURE__ */ jsxs("div", { children: [
8956
- /* @__PURE__ */ jsx("h2", { className: "text-lg text-gray-900 mb-3", children: pageData.dateAndTime }),
8957
- /* @__PURE__ */ jsxs("p", { className: "text-base text-gray-900", children: [
8989
+ /* @__PURE__ */ jsx("h2", { className: "text-[24px] l:text-[20px] text-[#4A4C56] mb-3", children: pageData.dateAndTime }),
8990
+ /* @__PURE__ */ jsxs("p", { className: "text-base text-[#4A4C56]", children: [
8958
8991
  bookingData.booking_date,
8959
8992
  bookingData.time_slot && `, ${bookingData.time_slot}`,
8960
8993
  !bookingData.time_slot && bookingData.booking_time && `, ${bookingData.booking_time}`
8961
8994
  ] })
8962
8995
  ] }),
8963
8996
  bookingData.equipment && /* @__PURE__ */ jsxs("div", { children: [
8964
- /* @__PURE__ */ jsx("h2", { className: "text-lg text-gray-900 mb-3", children: pageData.event }),
8965
- /* @__PURE__ */ jsx("p", { className: "text-base text-gray-900", children: Array.isArray(bookingData.equipment) ? bookingData.equipment.join(", ") : bookingData.equipment })
8997
+ /* @__PURE__ */ jsx("h2", { className: "text-[24px] l:text-[20px] text-[#4A4C56] mb-3", children: pageData.event }),
8998
+ /* @__PURE__ */ jsx("p", { className: "text-base text-[#4A4C56]", children: Array.isArray(bookingData.equipment) ? bookingData.equipment.join(", ") : bookingData.equipment })
8966
8999
  ] }),
8967
9000
  /* @__PURE__ */ jsxs("div", { children: [
8968
- /* @__PURE__ */ jsx("h2", { className: "text-lg text-gray-900 mb-3", children: pageData.demoRoom }),
8969
- /* @__PURE__ */ jsx("p", { className: "text-base text-gray-900", children: bookingData.demoroom_code })
9001
+ /* @__PURE__ */ jsx("h2", { className: "text-[24px] l:text-[20px] text-[#4A4C56] mb-3", children: pageData.demoRoom }),
9002
+ /* @__PURE__ */ jsx("p", { className: "text-base text-[#4A4C56]", children: bookingData.demoroom_code })
8970
9003
  ] }),
8971
9004
  /* @__PURE__ */ jsxs("div", { children: [
8972
- /* @__PURE__ */ jsx("h2", { className: "text-lg text-gray-900 mb-3", children: pageData.visitorInfo }),
9005
+ /* @__PURE__ */ jsx("h2", { className: "text-[24px] l:text-[20px] text-[#4A4C56] mb-3", children: pageData.visitorInfo }),
8973
9006
  /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
8974
- /* @__PURE__ */ jsx("p", { className: "text-base text-gray-900", children: bookingData.customer_name }),
9007
+ /* @__PURE__ */ jsx("p", { className: "text-base text-[#4A4C56]", children: bookingData.customer_name }),
8975
9008
  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-base text-gray-600", children: [
8976
9009
  /* @__PURE__ */ jsx(
8977
9010
  "svg",
@@ -9084,7 +9117,7 @@ var BookingSuccess = ({
9084
9117
  }
9085
9118
  ) }) }),
9086
9119
  /* @__PURE__ */ jsxs("div", { className: "text-center mb-8", children: [
9087
- /* @__PURE__ */ jsx("h3", { className: "text-[18px] text-gray-900 mb-2", children: pageData.cancelDialog?.title }),
9120
+ /* @__PURE__ */ jsx("h3", { className: "text-[18px] text-[#4A4C56] mb-2", children: pageData.cancelDialog?.title }),
9088
9121
  /* @__PURE__ */ jsx("p", { className: "text-[14px] text-gray-600", children: pageData.cancelDialog?.description })
9089
9122
  ] }),
9090
9123
  /* @__PURE__ */ jsxs("div", { className: "flex gap-3 justify-center", children: [