@lateralus-ai/shipping-ui 2.0.0-dev.10 → 2.0.0-dev.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lateralus-ai/shipping-ui",
-  "version": "2.0.0-dev.10",
+  "version": "2.0.0-dev.12",
   "description": "Shared UI theme and components for Lateralus shipping applications",
   "main": "dist/index.cjs",
   "module": "dist/index.esm.js",

package/src/components/Tabs.tsx

@@ -107,8 +107,8 @@ export const TabsTrigger = forwardRef<
         type === "pills" &&
           appearance === "solid" && [
             "min-h-9 rounded-full px-3 py-1 text-caption-2-em",
-            "bg-transparent text-display-on-light-primary",
-            "hover:bg-grey-900/[0.04]",
+            "bg-transparent text-display-on-light-tertiary",
+            "hover:bg-grey-900/[0.04] hover:text-display-on-light-primary",
             "data-[state=active]:bg-blue-600 data-[state=active]:text-white",
             "data-[state=active]:hover:bg-blue-600",
           ],

package/src/primitives/Button.tsx

@@ -121,6 +121,8 @@ export const Button = ({
   ...props
 }: ButtonProps) => {
   const resolvedIcon = icon ?? startIcon;
+  const renderedIcon = renderIcon(resolvedIcon);
+  const hasIcon = renderedIcon != null;
   const hasDropdown = Boolean(dropdownOptions?.length);
   const dropdownDisabled = !dropdownOptions?.some((option) => !option.disabled);
   const mainAppearance = getAppearance(disabled, forcedState);
@@ -135,11 +137,18 @@ export const Button = ({
     dropdownAppearance,
     forcedState,
   );
-  const label = (
-    <>
-      {renderIcon(resolvedIcon)}
-      <span className="px-2">{children}</span>
-    </>
+
+  /** Label-only: centered text. With start icon: gap between icon and label. */
+  const content = (
+    <span
+      className={cn(
+        "flex min-h-6 items-center justify-center",
+        hasIcon && "gap-2",
+      )}
+    >
+      {renderedIcon}
+      <span>{children}</span>
+    </span>
   );
 
   if (!hasDropdown) {
@@ -156,9 +165,7 @@ export const Button = ({
         )}
         {...props}
       >
-        <span className="flex min-h-6 items-center [&>*:first-child]:-mr-1 [&>*:last-child]:-mr-1">
-          {label}
-        </span>
+        {content}
       </button>
     );
   }
@@ -175,9 +182,7 @@ export const Button = ({
       )}
       {...props}
     >
-      <span className="flex min-h-6 items-center [&>*:first-child]:-mr-1 [&>*:last-child]:-mr-1">
-        {label}
-      </span>
+      {content}
     </button>
   );
 

package/src/utils/cn.ts

@@ -1,6 +1,33 @@
-import { twMerge } from "tailwind-merge";
+import { extendTailwindMerge } from "tailwind-merge";
 import { type ClassValue, clsx } from "clsx";
 
+/**
+ * Custom fontSize keys from tailwind-theme.ts (tailwind-merge@1.x API).
+ * Without this, twMerge treats e.g. text-caption-2-em as the same group as
+ * text-display-on-light-primary and drops the font-size class.
+ */
+const fontSizeTokens = [
+  "title",
+  "title-em",
+  "heading",
+  "subheader",
+  "subheader-em",
+  "body",
+  "body-em",
+  "caption-1",
+  "caption-1-em",
+  "caption-2",
+  "caption-2-em",
+  "footnote",
+  "footnote-em",
+] as const;
+
+const twMerge = extendTailwindMerge({
+  classGroups: {
+    "font-size": [{ text: [...fontSizeTokens] }],
+  },
+});
+
 /**
  * Merges the tailwind clases (using twMerge). Conditionally removes false values
  * @param inputs The tailwind classes to merge