smartsell-ui-kit 0.1.5 → 0.1.7

package/dist/index.cjs

@@ -548,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
@@ -558,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);
@@ -630,7 +630,7 @@ function Checkbox({
   label,
   hint,
   error,
-  controlSize = "sm",
+  size = "sm",
   id,
   checked,
   defaultChecked,
@@ -646,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);
@@ -740,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,
@@ -1584,7 +1584,7 @@ function Input({
   label,
   hint,
   error,
-  controlSize = "sm",
+  size = "sm",
   className,
   showPasswordToggle = true,
   fileButtonLabel,
@@ -1598,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);
@@ -1633,16 +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);
@@ -1653,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"
   );
@@ -1664,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)]";
@@ -1736,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"
               ),
@@ -1784,7 +1784,7 @@ 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: {
@@ -1845,7 +1845,7 @@ function Input({
             className: cx(adornedInputClassName, className),
             "aria-invalid": hasResolvedError,
             style: {
-              padding: getTextInputPadding(controlSize, { leadingPadding: leadingContentGap })
+              padding: getTextInputPadding(size, { leadingPadding: leadingContentGap })
             }
           }
         )
@@ -1886,7 +1886,7 @@ function Input({
             className: cx(adornedInputClassName, className),
             "aria-invalid": hasResolvedError,
             style: {
-              padding: getTextInputPadding(controlSize, { leadingPadding: leadingContentGap })
+              padding: getTextInputPadding(size, { leadingPadding: leadingContentGap })
             }
           }
         )
@@ -1902,10 +1902,10 @@ function Input({
       disabled,
       onChange: handleValidatedInputChange,
       "aria-invalid": hasResolvedError,
-      className: cx(fieldBaseClassName, FIELD_PADDING_X_CLASSNAMES[controlSize], className),
+      className: cx(fieldBaseClassName, FIELD_PADDING_X_CLASSNAMES[size], className),
       style: {
         boxShadow: "0px 4px 5px var(--theme-shadow)",
-        padding: getTextInputPadding(controlSize),
+        padding: getTextInputPadding(size),
         ...style
       }
     }
@@ -2152,7 +2152,7 @@ function DatePicker({
   label,
   hint,
   error,
-  controlSize = "sm",
+  size = "sm",
   value,
   defaultValue,
   onChange,
@@ -2186,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);
@@ -2245,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,
@@ -2258,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"
   );
@@ -2267,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(
@@ -2520,7 +2520,7 @@ function DatePicker({
               ...visibleInputProps,
               className: cx(integratedInputClassName, className),
               style: {
-                padding: getTextInputPadding(controlSize, {
+                padding: getTextInputPadding(size, {
                   leadingPadding: leadingContentGap,
                   trailingPadding: controlMetrics.paddingX + trailingInset
                 })
@@ -2537,9 +2537,9 @@ function DatePicker({
       "input",
       {
         ...visibleInputProps,
-        className: cx(fieldBaseClassName, FIELD_PADDING_X_CLASSNAMES2[controlSize], className),
+        className: cx(fieldBaseClassName, FIELD_PADDING_X_CLASSNAMES2[size], className),
         style: {
-          padding: getTextInputPadding(controlSize, {
+          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)",
@@ -2671,7 +2671,7 @@ function SelectBase({
   hint,
   error,
   placeholder,
-  controlSize = "sm",
+  size = "sm",
   id,
   disabled,
   style,
@@ -2744,7 +2744,7 @@ function SelectBase({
   const visibleEnabledValues = visibleEnabledOptions.map((option) => option.value);
   const selectedValuesKey = selectedValues.join("\0");
   const visibleEnabledValuesKey = visibleEnabledValues.join("\0");
-  const indicatorOffset = getSelectIndicatorOffset(controlSize);
+  const indicatorOffset = getSelectIndicatorOffset(size);
   const controlTextNudgeStyle = getSelectTextNudgeStyle();
   const listboxId = `${resolvedId}-listbox`;
   const searchInputId = `${resolvedId}-search`;
@@ -2764,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"
   );
@@ -3155,7 +3155,7 @@ function SelectBase({
             onBlur: handleTriggerBlur,
             onKeyDown: handleTriggerKeyDown,
             style: {
-              padding: getSelectControlPadding(controlSize),
+              padding: getSelectControlPadding(size),
               boxShadow: triggerBoxShadow,
               ...style,
               ...isTriggerDisabled ? { opacity: DISABLED_FIELD_OPACITY } : {}
@@ -3362,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,
@@ -3831,7 +3831,7 @@ var import_react12 = require("react");
 
 // src/componentsBase/table/utils.ts
 var import_react11 = require("react");
-var DEFAULT_COLLAPSE_BELOW = 420;
+var DEFAULT_COLLAPSE_BELOW = 768;
 var DEFAULT_MAX_INLINE_ACTIONS = 2;
 var DEFAULT_PAGE_SIZE = 10;
 var DEFAULT_PAGE_SIZE_OPTIONS = [10, 20, 50];
@@ -4354,7 +4354,7 @@ function TableBase({
   const alternateSurfaceColor = theme.colors.background;
   const scrollRegionId = (0, import_react12.useId)().replace(/:/g, "");
   const containerRef = (0, import_react12.useRef)(null);
-  const [containerWidth, setContainerWidth] = (0, import_react12.useState)(null);
+  const [viewportWidth, setViewportWidth] = (0, import_react12.useState)(null);
   const [isSettingsModalOpen, setIsSettingsModalOpen] = (0, import_react12.useState)(false);
   const resolvedLabels = mergeTableLabels({
     ...labels != null ? labels : {},
@@ -4362,8 +4362,8 @@ function TableBase({
   });
   const normalizedPage = clampPage(page, totalPages);
   const normalizedPageSizeOptions = sanitizePageSizeOptions(pageSizeOptions, pageSize);
-  const isCollapsed = containerWidth !== null ? containerWidth < collapseBelow : false;
-  const mobileGridColumnCount = containerWidth !== null && containerWidth < 520 ? 1 : 2;
+  const isCollapsed = viewportWidth !== null ? viewportWidth < collapseBelow : false;
+  const mobileGridColumnCount = viewportWidth !== null && viewportWidth < 520 ? 1 : 2;
   const canGoToPreviousPage = normalizedPage > 1;
   const canGoToNextPage = normalizedPage < Math.max(1, totalPages);
   const canGoToFirstPage = canGoToPreviousPage;
@@ -4398,31 +4398,16 @@ function TableBase({
     borderLeft: `1px solid ${softBorderColor}`
   });
   (0, import_react12.useEffect)(() => {
-    const element = containerRef.current;
-    if (!element) {
+    if (typeof window === "undefined") {
       return;
     }
-    const setWidthFromElement = (nextWidth) => {
-      const measuredWidth = nextWidth != null ? nextWidth : element.getBoundingClientRect().width;
-      setContainerWidth(measuredWidth > 0 ? measuredWidth : null);
+    const updateViewportWidth = () => {
+      setViewportWidth(window.innerWidth);
     };
-    setWidthFromElement();
-    if (typeof ResizeObserver === "undefined") {
-      const handleResize = () => {
-        setWidthFromElement(window.innerWidth);
-      };
-      window.addEventListener("resize", handleResize);
-      return () => {
-        window.removeEventListener("resize", handleResize);
-      };
-    }
-    const observer = new ResizeObserver((entries) => {
-      const [entry] = entries;
-      setWidthFromElement(entry == null ? void 0 : entry.contentRect.width);
-    });
-    observer.observe(element);
+    updateViewportWidth();
+    window.addEventListener("resize", updateViewportWidth);
     return () => {
-      observer.disconnect();
+      window.removeEventListener("resize", updateViewportWidth);
     };
   }, []);
   const actionButtonBaseStyle = (tone, disabled, iconOnly) => ({
@@ -4679,7 +4664,7 @@ function TableBase({
         !hasRows && (!loading || error) ? renderEmptyState() : null,
         hasRows ? isCollapsed ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { role: "list", "aria-label": ariaLabel, className: "flex flex-col gap-3.5", children: items.map((item, rowIndex) => {
           const rowActions = renderActions(item, rowIndex);
-          const rowBackgroundColor = rowIndex % 2 === 0 ? theme.colors.surface : alternateSurfaceColor;
+          const rowBackgroundColor = theme.colors.surface;
           return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
             "article",
             {
@@ -4851,7 +4836,7 @@ function TableBase({
                           width: column.width,
                           minWidth: column.minWidth
                         },
-                        children: column.label
+                        children: !column.hideLabel ? column.label : null
                       },
                       getColumnKey(column, columnIndex)
                     );
@@ -5301,7 +5286,7 @@ function Textarea({
   label,
   hint,
   error,
-  controlSize = "sm",
+  size = "sm",
   id,
   disabled,
   style,
@@ -5322,7 +5307,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)",