smartsell-ui-kit 0.1.4 → 0.1.5

package/dist/index.cjs

@@ -155,6 +155,16 @@ var DISABLED_FIELD_OPACITY = 0.7;
 
 // src/foundation/controlSize.ts
 var CONTROL_LEADING_ICON_SHIFT = 5;
+var CONTROL_TEXT_VERTICAL_SHIFT = 1;
+var SELECT_TEXT_VERTICAL_SHIFT_REDUCTION = 1;
+var getControlTextVerticalPadding = (size, shift = CONTROL_TEXT_VERTICAL_SHIFT) => {
+  const metrics = getControlMetrics(size);
+  return {
+    top: Math.max(0, metrics.paddingY - shift),
+    bottom: metrics.paddingY + shift
+  };
+};
+var getSelectTextVerticalShift = () => Math.max(0, CONTROL_TEXT_VERTICAL_SHIFT - SELECT_TEXT_VERTICAL_SHIFT_REDUCTION);
 var CONTROL_METRICS_BY_SIZE = {
   sm: {
     height: 30,
@@ -195,6 +205,23 @@ var getControlLeadingIconInset = (size) => {
 var getControlLeadingAdornmentWidth = (size, iconSize) => {
   return getControlLeadingIconInset(size) + iconSize;
 };
+var getTextInputPadding = (size, options = {}) => {
+  var _a, _b;
+  const metrics = getControlMetrics(size);
+  const { top, bottom } = getControlTextVerticalPadding(size);
+  const leadingPadding = (_a = options.leadingPadding) != null ? _a : metrics.paddingX;
+  const trailingPadding = (_b = options.trailingPadding) != null ? _b : metrics.paddingX;
+  return `${top}px ${trailingPadding}px ${bottom}px ${leadingPadding}px`;
+};
+var getSelectControlPadding = (size) => {
+  const metrics = getControlMetrics(size);
+  const { top, bottom } = getControlTextVerticalPadding(size, getSelectTextVerticalShift());
+  return `${top}px ${metrics.selectPaddingRight}px ${bottom}px ${metrics.paddingX}px`;
+};
+var getControlTextNudgeStyle = (shift = CONTROL_TEXT_VERTICAL_SHIFT) => ({
+  transform: `translateY(-${shift}px)`
+});
+var getSelectTextNudgeStyle = () => getControlTextNudgeStyle(getSelectTextVerticalShift());
 var getSelectIndicatorOffset = (size) => getControlMetrics(size).selectIndicatorOffset;
 
 // src/foundation/shadow.ts
@@ -1607,6 +1634,7 @@ function Input({
   const passwordLockIconSize = passwordToggleMetrics.iconSize + 2;
   const leadingContentGap = Math.max(0, Math.round(controlMetrics.paddingX / 3));
   const leadingIconInset = getControlLeadingIconInset(controlSize);
+  const controlTextNudgeStyle = getControlTextNudgeStyle();
   const hasExternalError = error !== void 0 && error !== null && error !== "";
   const resolvedError = hasExternalError ? error : validationError;
   const hasResolvedError = resolvedError !== void 0 && resolvedError !== null && resolvedError !== "";
@@ -1734,7 +1762,7 @@ function Input({
                     children: resolvedFileIcon
                   }
                 ),
-                showUploadLabel ? fileButtonLabel : null
+                showUploadLabel ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { style: controlTextNudgeStyle, children: fileButtonLabel }) : null
               ]
             }
           ),
@@ -1759,7 +1787,10 @@ function Input({
                     FIELD_TEXT_CLASSNAMES[controlSize],
                     hasSelectedFiles ? "text-[var(--theme-text)]" : "text-[var(--theme-textLight)]"
                   ),
-                  style: { padding: `0 ${controlMetrics.paddingX}px 0 ${leadingContentGap}px` },
+                  style: {
+                    padding: `0 ${controlMetrics.paddingX}px 0 ${leadingContentGap}px`,
+                    ...controlTextNudgeStyle
+                  },
                   children: fileSelectionText
                 }
               ) : null
@@ -1813,7 +1844,9 @@ function Input({
             onChange: handleValidatedInputChange,
             className: cx(adornedInputClassName, className),
             "aria-invalid": hasResolvedError,
-            style: { padding: `0 ${controlMetrics.paddingX}px 0 ${leadingContentGap}px` }
+            style: {
+              padding: getTextInputPadding(controlSize, { leadingPadding: leadingContentGap })
+            }
           }
         )
       ]
@@ -1852,7 +1885,9 @@ function Input({
             onChange: handleValidatedInputChange,
             className: cx(adornedInputClassName, className),
             "aria-invalid": hasResolvedError,
-            style: { padding: `0 ${controlMetrics.paddingX}px 0 ${leadingContentGap}px` }
+            style: {
+              padding: getTextInputPadding(controlSize, { leadingPadding: leadingContentGap })
+            }
           }
         )
       ]
@@ -1868,7 +1903,11 @@ function Input({
       onChange: handleValidatedInputChange,
       "aria-invalid": hasResolvedError,
       className: cx(fieldBaseClassName, FIELD_PADDING_X_CLASSNAMES[controlSize], className),
-      style: { boxShadow: "0px 4px 5px var(--theme-shadow)", ...style }
+      style: {
+        boxShadow: "0px 4px 5px var(--theme-shadow)",
+        padding: getTextInputPadding(controlSize),
+        ...style
+      }
     }
   );
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
@@ -2481,7 +2520,10 @@ function DatePicker({
               ...visibleInputProps,
               className: cx(integratedInputClassName, className),
               style: {
-                padding: `${controlMetrics.paddingY}px ${controlMetrics.paddingX + trailingInset}px ${controlMetrics.paddingY}px ${leadingContentGap}px`
+                padding: getTextInputPadding(controlSize, {
+                  leadingPadding: leadingContentGap,
+                  trailingPadding: controlMetrics.paddingX + trailingInset
+                })
               }
             }
           ),
@@ -2497,7 +2539,9 @@ function DatePicker({
         ...visibleInputProps,
         className: cx(fieldBaseClassName, FIELD_PADDING_X_CLASSNAMES2[controlSize], className),
         style: {
-          paddingRight: controlMetrics.paddingX + trailingInset,
+          padding: getTextInputPadding(controlSize, {
+            trailingPadding: controlMetrics.paddingX + trailingInset
+          }),
           boxShadow: resolvedError ? "0 0 0 3px var(--theme-negative), 0px 4px 5px var(--theme-shadow)" : "0px 4px 5px var(--theme-shadow)",
           ...style,
           ...disabledFieldStyle
@@ -2701,7 +2745,7 @@ function SelectBase({
   const selectedValuesKey = selectedValues.join("\0");
   const visibleEnabledValuesKey = visibleEnabledValues.join("\0");
   const indicatorOffset = getSelectIndicatorOffset(controlSize);
-  const controlMetrics = getControlMetrics(controlSize);
+  const controlTextNudgeStyle = getSelectTextNudgeStyle();
   const listboxId = `${resolvedId}-listbox`;
   const searchInputId = `${resolvedId}-search`;
   const scrollbarThumbColor = theme.colors.secondary;
@@ -3111,7 +3155,7 @@ function SelectBase({
             onBlur: handleTriggerBlur,
             onKeyDown: handleTriggerKeyDown,
             style: {
-              padding: `${controlMetrics.paddingY}px ${controlMetrics.selectPaddingRight}px ${controlMetrics.paddingY}px ${controlMetrics.paddingX}px`,
+              padding: getSelectControlPadding(controlSize),
               boxShadow: triggerBoxShadow,
               ...style,
               ...isTriggerDisabled ? { opacity: DISABLED_FIELD_OPACITY } : {}
@@ -3121,6 +3165,7 @@ function SelectBase({
                 "span",
                 {
                   className: "block min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap",
+                  style: controlTextNudgeStyle,
                   children: displayContent
                 }
               ),