@forms.expert/sdk 0.4.2 → 0.4.3

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.
@@ -95,6 +95,8 @@ interface FormStyling {
95
95
  fieldLayout?: 'stacked' | 'inline';
96
96
  fieldBorderStyle?: 'full' | 'bottom';
97
97
  fieldBorderRadius?: 'none' | 'small' | 'medium' | 'large' | 'full';
98
+ fieldPaddingX?: number;
99
+ fieldPaddingY?: number;
98
100
  buttonColor?: string;
99
101
  buttonText?: string;
100
102
  buttonRadius?: 'none' | 'small' | 'medium' | 'large' | 'full';
@@ -95,6 +95,8 @@ interface FormStyling {
95
95
  fieldLayout?: 'stacked' | 'inline';
96
96
  fieldBorderStyle?: 'full' | 'bottom';
97
97
  fieldBorderRadius?: 'none' | 'small' | 'medium' | 'large' | 'full';
98
+ fieldPaddingX?: number;
99
+ fieldPaddingY?: number;
98
100
  buttonColor?: string;
99
101
  buttonText?: string;
100
102
  buttonRadius?: 'none' | 'small' | 'medium' | 'large' | 'full';
@@ -1058,7 +1058,7 @@ function FormsExpertForm({
1058
1058
  form[data-fe-scope="${formScopeId}"] button[type="submit"]:active:not(:disabled) { filter: brightness(0.85); transform: scale(0.98); }
1059
1059
  form[data-fe-scope="${formScopeId}"] a[href]:hover { filter: brightness(0.9); }
1060
1060
  form[data-fe-scope="${formScopeId}"] a[href]:active { filter: brightness(0.85); }
1061
- form[data-fe-scope="${formScopeId}"] input:focus,
1061
+ form[data-fe-scope="${formScopeId}"] input:not([type="checkbox"]):not([type="radio"]):focus,
1062
1062
  form[data-fe-scope="${formScopeId}"] textarea:focus,
1063
1063
  form[data-fe-scope="${formScopeId}"] select:focus {
1064
1064
  outline: none !important;
@@ -1282,9 +1282,10 @@ function FormFieldInput({
1282
1282
  const fontSize = getFontSize(styling.fontSize);
1283
1283
  const isInline = styling.labelPosition === "left" || styling.fieldLayout === "inline";
1284
1284
  const isBottomBorder = styling.fieldBorderStyle === "bottom";
1285
+ const fieldPadding = styling.fieldPaddingX != null || styling.fieldPaddingY != null ? `${styling.fieldPaddingY ?? 8}px ${styling.fieldPaddingX ?? 12}px` : "0.5rem 0.75rem";
1285
1286
  const inputStyle = {
1286
1287
  width: "100%",
1287
- padding: "0.5rem 0.75rem",
1288
+ padding: fieldPadding,
1288
1289
  border: isBottomBorder ? "none" : `1px solid ${error ? "#ef4444" : styling.theme === "dark" ? "#4b5563" : "#d1d5db"}`,
1289
1290
  ...isBottomBorder ? { borderBottom: `1px solid ${error ? "#ef4444" : styling.theme === "dark" ? "#4b5563" : "#d1d5db"}` } : {},
1290
1291
  borderRadius: isBottomBorder ? 0 : fieldRadius,
@@ -1334,7 +1335,7 @@ function FormFieldInput({
1334
1335
  checked: Boolean(value),
1335
1336
  onChange,
1336
1337
  required: field.required,
1337
- style: { width: "1rem", height: "1rem", accentColor: styling.primaryColor, marginTop: "0.125rem", flexShrink: 0 }
1338
+ style: { width: "1rem", height: "1rem", accentColor: styling.primaryColor, marginTop: "0.125rem", flexShrink: 0, backgroundColor: "transparent" }
1338
1339
  }
1339
1340
  ),
1340
1341
  /* @__PURE__ */ jsxs("div", { children: [