smartsell-ui-kit 0.1.4 → 0.1.6

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
@@ -521,7 +548,7 @@ function CardSmall({
 // src/components/Checkbox.tsx
 var import_react2 = require("react");
 var import_jsx_runtime4 = require("react/jsx-runtime");
-var CHECKBOX_SIZE_BY_CONTROL_SIZE = {
+var CHECKBOX_SIZE_BY_SIZE = {
   sm: 14,
   md: 16,
   lg: 20
@@ -531,7 +558,7 @@ var CHECKBOX_LABEL_CLASSNAMES = {
   md: "text-sm leading-[18px]",
   lg: "text-[15px] leading-[18px]"
 };
-var getCheckboxSize = (controlSize) => CHECKBOX_SIZE_BY_CONTROL_SIZE[controlSize];
+var getCheckboxSize = (size) => CHECKBOX_SIZE_BY_SIZE[size];
 var hasNodeContent = (value) => {
   if (Array.isArray(value)) {
     return value.some(hasNodeContent);
@@ -603,7 +630,7 @@ function Checkbox({
   label,
   hint,
   error,
-  controlSize = "sm",
+  size = "sm",
   id,
   checked,
   defaultChecked,
@@ -619,7 +646,7 @@ function Checkbox({
 }) {
   const theme = useUiKitTheme();
   const mutedText = theme.colors.textLight;
-  const indicatorSize = getCheckboxSize(controlSize);
+  const indicatorSize = getCheckboxSize(size);
   const hasLabel = hasNodeContent(label);
   const hasHint = hasNodeContent(hint);
   const hasError = hasNodeContent(error);
@@ -713,7 +740,7 @@ function Checkbox({
                   hasSecondaryContent ? "justify-start" : "justify-center"
                 ),
                 children: [
-                  label ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: cx("font-semibold text-[var(--theme-text)]", CHECKBOX_LABEL_CLASSNAMES[controlSize]), children: [
+                  label ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: cx("font-semibold text-[var(--theme-text)]", CHECKBOX_LABEL_CLASSNAMES[size]), children: [
                     label,
                     required ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "ml-1 text-[var(--theme-negative)]", children: "*" }) : null
                   ] }) : null,
@@ -1557,7 +1584,7 @@ function Input({
   label,
   hint,
   error,
-  controlSize = "sm",
+  size = "sm",
   className,
   showPasswordToggle = true,
   fileButtonLabel,
@@ -1571,8 +1598,8 @@ function Input({
   ...rest
 }) {
   useUiKitTheme();
-  const controlMetrics = getControlMetrics(controlSize);
-  const passwordToggleMetrics = getPasswordToggleMetrics(controlSize);
+  const controlMetrics = getControlMetrics(size);
+  const passwordToggleMetrics = getPasswordToggleMetrics(size);
   const generatedId = (0, import_react5.useId)();
   const inputId = id != null ? id : generatedId;
   const fileInputRef = (0, import_react5.useRef)(null);
@@ -1606,15 +1633,16 @@ function Input({
   const showUploadLabel = hasFileButtonLabel && !hasSelectedFiles;
   const passwordLockIconSize = passwordToggleMetrics.iconSize + 2;
   const leadingContentGap = Math.max(0, Math.round(controlMetrics.paddingX / 3));
-  const leadingIconInset = getControlLeadingIconInset(controlSize);
+  const leadingIconInset = getControlLeadingIconInset(size);
+  const controlTextNudgeStyle = getControlTextNudgeStyle();
   const hasExternalError = error !== void 0 && error !== null && error !== "";
   const resolvedError = hasExternalError ? error : validationError;
   const hasResolvedError = resolvedError !== void 0 && resolvedError !== null && resolvedError !== "";
   const fileSelectionText = selectedFileNames.length === 0 ? placeholder != null ? placeholder : "" : selectedFileNames.length === 1 ? selectedFileNames[0] : `${selectedFileNames.length} files selected`;
   const fileIconSize = Math.max(controlMetrics.fontSize + 3, 16);
-  const fileTriggerWidth = getControlLeadingAdornmentWidth(controlSize, fileIconSize);
-  const leadingAdornmentWidth = getControlLeadingAdornmentWidth(controlSize, fileIconSize);
-  const passwordAdornmentWidth = getControlLeadingAdornmentWidth(controlSize, passwordLockIconSize);
+  const fileTriggerWidth = getControlLeadingAdornmentWidth(size, fileIconSize);
+  const leadingAdornmentWidth = getControlLeadingAdornmentWidth(size, fileIconSize);
+  const passwordAdornmentWidth = getControlLeadingAdornmentWidth(size, passwordLockIconSize);
   const defaultLeadingIcon = isEmailField ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(EmailIcon, { size: fileIconSize }) : isLoginField ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(LoginIcon, { size: fileIconSize }) : null;
   const resolvedLeadingIcon = icon != null ? icon : defaultLeadingIcon;
   const hasLeadingIcon = isRenderableNode(resolvedLeadingIcon);
@@ -1625,8 +1653,8 @@ function Input({
     "w-full box-border rounded-2xl border border-solid bg-[var(--theme-surface)]",
     "text-[var(--theme-text)] outline-none transition-[border-color,box-shadow,background-color]",
     "duration-150 placeholder:text-[var(--theme-textLight)]",
-    FIELD_HEIGHT_CLASSNAMES[controlSize],
-    FIELD_TEXT_CLASSNAMES[controlSize],
+    FIELD_HEIGHT_CLASSNAMES[size],
+    FIELD_TEXT_CLASSNAMES[size],
     hasResolvedError ? "border-[var(--theme-negative)]" : "border-[var(--theme-textLight)]",
     disabled ? "cursor-not-allowed opacity-70" : "cursor-text"
   );
@@ -1636,15 +1664,15 @@ function Input({
     "border border-solid bg-[var(--theme-surface)] text-[var(--theme-text)] text-left",
     "transition-[border-color,box-shadow,background-color] duration-150",
     "shadow-[0px_4px_5px_var(--theme-shadow)]",
-    FIELD_HEIGHT_CLASSNAMES[controlSize],
-    FIELD_TEXT_CLASSNAMES[controlSize],
+    FIELD_HEIGHT_CLASSNAMES[size],
+    FIELD_TEXT_CLASSNAMES[size],
     hasResolvedError ? "border-[var(--theme-negative)]" : "border-[var(--theme-textLight)]",
     disabled ? "opacity-70" : null
   );
   const adornedInputClassName = cx(
     "h-full min-w-0 flex-1 border-0 bg-transparent text-[var(--theme-text)] outline-none",
     "placeholder:text-[var(--theme-textLight)]",
-    FIELD_TEXT_CLASSNAMES[controlSize],
+    FIELD_TEXT_CLASSNAMES[size],
     disabled ? "cursor-not-allowed" : "cursor-text"
   );
   const adornmentColorClassName = hasResolvedError ? "text-[var(--theme-negative)]" : "text-[var(--theme-textLight)]";
@@ -1708,7 +1736,7 @@ function Input({
               className: cx(
                 "inline-flex shrink-0 self-stretch whitespace-nowrap border-0 bg-transparent",
                 "items-center text-[var(--theme-text)] appearance-none",
-                FIELD_TEXT_CLASSNAMES[controlSize],
+                FIELD_TEXT_CLASSNAMES[size],
                 disabled ? "cursor-not-allowed" : "cursor-pointer",
                 showUploadLabel ? "justify-start font-bold" : "justify-center"
               ),
@@ -1734,7 +1762,7 @@ function Input({
                     children: resolvedFileIcon
                   }
                 ),
-                showUploadLabel ? fileButtonLabel : null
+                showUploadLabel ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { style: controlTextNudgeStyle, children: fileButtonLabel }) : null
               ]
             }
           ),
@@ -1756,10 +1784,13 @@ function Input({
                 {
                   className: cx(
                     "flex h-full min-w-0 flex-1 items-center overflow-hidden text-ellipsis whitespace-nowrap",
-                    FIELD_TEXT_CLASSNAMES[controlSize],
+                    FIELD_TEXT_CLASSNAMES[size],
                     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(size, { 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(size, { leadingPadding: leadingContentGap })
+            }
           }
         )
       ]
@@ -1867,8 +1902,12 @@ function Input({
       disabled,
       onChange: handleValidatedInputChange,
       "aria-invalid": hasResolvedError,
-      className: cx(fieldBaseClassName, FIELD_PADDING_X_CLASSNAMES[controlSize], className),
-      style: { boxShadow: "0px 4px 5px var(--theme-shadow)", ...style }
+      className: cx(fieldBaseClassName, FIELD_PADDING_X_CLASSNAMES[size], className),
+      style: {
+        boxShadow: "0px 4px 5px var(--theme-shadow)",
+        padding: getTextInputPadding(size),
+        ...style
+      }
     }
   );
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
@@ -2113,7 +2152,7 @@ function DatePicker({
   label,
   hint,
   error,
-  controlSize = "sm",
+  size = "sm",
   value,
   defaultValue,
   onChange,
@@ -2147,8 +2186,8 @@ function DatePicker({
 }) {
   var _a;
   useUiKitTheme();
-  const controlMetrics = getControlMetrics(controlSize);
-  const accessoryMetrics = ACCESSORY_METRICS_BY_SIZE[controlSize];
+  const controlMetrics = getControlMetrics(size);
+  const accessoryMetrics = ACCESSORY_METRICS_BY_SIZE[size];
   const generatedIdRef = (0, import_react6.useRef)();
   const visibleInputRef = (0, import_react6.useRef)(null);
   const nativeInputRef = (0, import_react6.useRef)(null);
@@ -2206,8 +2245,8 @@ function DatePicker({
   const canOpenPicker = !disabled && !readOnly && !hasConfigurationConflict;
   const canClear = clearable && !disabled && !readOnly && !required && hasAnyValue;
   const leadingContentGap = Math.max(0, Math.round(controlMetrics.paddingX / 3));
-  const leadingIconInset = getControlLeadingIconInset(controlSize);
-  const pickerAdornmentWidth = getControlLeadingAdornmentWidth(controlSize, accessoryMetrics.iconSize);
+  const leadingIconInset = getControlLeadingIconInset(size);
+  const pickerAdornmentWidth = getControlLeadingAdornmentWidth(size, accessoryMetrics.iconSize);
   const trailingButtonCount = Number(canClear);
   const trailingInset = trailingButtonCount > 0 ? Math.max(
     0,
@@ -2219,8 +2258,8 @@ function DatePicker({
     "w-full box-border rounded-2xl border border-solid bg-[var(--theme-surface)]",
     "text-[var(--theme-text)] outline-none transition-[border-color,box-shadow,background-color]",
     "duration-150 placeholder:text-[var(--theme-textLight)]",
-    FIELD_HEIGHT_CLASSNAMES2[controlSize],
-    FIELD_TEXT_CLASSNAMES2[controlSize],
+    FIELD_HEIGHT_CLASSNAMES2[size],
+    FIELD_TEXT_CLASSNAMES2[size],
     resolvedError ? "border-[var(--theme-negative)]" : "border-[var(--theme-textLight)]",
     disabled ? "cursor-not-allowed" : readOnly ? "cursor-default" : "cursor-text"
   );
@@ -2228,15 +2267,15 @@ function DatePicker({
     "box-border flex w-full items-center gap-0 overflow-hidden rounded-2xl",
     "bg-[var(--theme-surface)] text-[var(--theme-text)]",
     "transition-[border-color,box-shadow,background-color] duration-150",
-    FIELD_HEIGHT_CLASSNAMES2[controlSize],
-    FIELD_TEXT_CLASSNAMES2[controlSize],
+    FIELD_HEIGHT_CLASSNAMES2[size],
+    FIELD_TEXT_CLASSNAMES2[size],
     disabled ? "cursor-not-allowed" : readOnly ? "cursor-default" : "cursor-text"
   );
   const integratedFieldBoxShadow = getInsetBorderShadow(fieldBorderColor, resolvedError ? { outerShadow: "0 0 0 3px var(--theme-negative)", componentShadow: "0px 4px 5px var(--theme-shadow)" } : { componentShadow: "0px 4px 5px var(--theme-shadow)" });
   const integratedInputClassName = cx(
     "h-full w-full box-border border-0 bg-transparent text-[var(--theme-text)]",
     "outline-none placeholder:text-[var(--theme-textLight)]",
-    FIELD_TEXT_CLASSNAMES2[controlSize],
+    FIELD_TEXT_CLASSNAMES2[size],
     disabled ? "cursor-not-allowed" : readOnly ? "cursor-default" : "cursor-text"
   );
   const pickerAdornmentClassName = cx(
@@ -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(size, {
+                  leadingPadding: leadingContentGap,
+                  trailingPadding: controlMetrics.paddingX + trailingInset
+                })
               }
             }
           ),
@@ -2495,9 +2537,11 @@ function DatePicker({
       "input",
       {
         ...visibleInputProps,
-        className: cx(fieldBaseClassName, FIELD_PADDING_X_CLASSNAMES2[controlSize], className),
+        className: cx(fieldBaseClassName, FIELD_PADDING_X_CLASSNAMES2[size], className),
         style: {
-          paddingRight: controlMetrics.paddingX + trailingInset,
+          padding: getTextInputPadding(size, {
+            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
@@ -2627,7 +2671,7 @@ function SelectBase({
   hint,
   error,
   placeholder,
-  controlSize = "sm",
+  size = "sm",
   id,
   disabled,
   style,
@@ -2700,8 +2744,8 @@ function SelectBase({
   const visibleEnabledValues = visibleEnabledOptions.map((option) => option.value);
   const selectedValuesKey = selectedValues.join("\0");
   const visibleEnabledValuesKey = visibleEnabledValues.join("\0");
-  const indicatorOffset = getSelectIndicatorOffset(controlSize);
-  const controlMetrics = getControlMetrics(controlSize);
+  const indicatorOffset = getSelectIndicatorOffset(size);
+  const controlTextNudgeStyle = getSelectTextNudgeStyle();
   const listboxId = `${resolvedId}-listbox`;
   const searchInputId = `${resolvedId}-search`;
   const scrollbarThumbColor = theme.colors.secondary;
@@ -2720,8 +2764,8 @@ function SelectBase({
     "m-0 box-border flex w-full min-w-0 items-center justify-between gap-3 rounded-2xl border-0 appearance-none",
     "bg-[var(--theme-surface)] outline-none transition-[border-color,box-shadow,background-color]",
     "duration-150 text-left",
-    FIELD_HEIGHT_CLASSNAMES3[controlSize],
-    FIELD_TEXT_CLASSNAMES3[controlSize],
+    FIELD_HEIGHT_CLASSNAMES3[size],
+    FIELD_TEXT_CLASSNAMES3[size],
     hasSelection ? "text-[var(--theme-text)]" : "text-[var(--theme-textLight)]",
     isTriggerDisabled ? "cursor-not-allowed" : "cursor-pointer"
   );
@@ -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(size),
               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
                 }
               ),
@@ -3317,7 +3362,7 @@ function SelectBase({
                                 className: cx(
                                   "flex w-full min-w-0 items-center justify-between gap-3 rounded-xl box-border",
                                   "transition-[background-color,color] duration-150",
-                                  OPTION_PADDING_CLASSNAMES[controlSize],
+                                  OPTION_PADDING_CLASSNAMES[size],
                                   option.disabled ? "cursor-not-allowed text-[var(--theme-secondary)]" : "cursor-pointer",
                                   !option.disabled && isActive ? "text-[var(--theme-onPrimary)]" : null,
                                   !option.disabled && !isActive ? "text-[var(--theme-text)]" : null,
@@ -5256,7 +5301,7 @@ function Textarea({
   label,
   hint,
   error,
-  controlSize = "sm",
+  size = "sm",
   id,
   disabled,
   style,
@@ -5277,7 +5322,7 @@ function Textarea({
         "duration-150 placeholder:opacity-100 disabled:cursor-not-allowed",
         "placeholder:text-[var(--theme-textLight)]",
         error ? "border-[var(--theme-negative)]" : "border-[var(--theme-textLight)]",
-        TEXTAREA_SIZE_CLASSNAMES[controlSize]
+        TEXTAREA_SIZE_CLASSNAMES[size]
       ),
       style: {
         boxShadow: error ? "0 0 0 3px var(--theme-negative), 0px 4px 5px var(--theme-shadow)" : "0px 4px 5px var(--theme-shadow)",