@rebasepro/ui 0.2.4 → 0.2.5

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rebasepro/ui",
   "type": "module",
-  "version": "0.2.4",
+  "version": "0.2.5",
   "description": "Awesome Firebase/Firestore-based headless open-source CMS",
   "funding": {
     "url": "https://github.com/sponsors/rebaseco"
@@ -72,7 +72,7 @@
     "react-use-measure": "^2.1.7",
     "react-window": "^1.8.11",
     "tailwind-merge": "^2.6.1",
-    "@rebasepro/types": "0.2.4"
+    "@rebasepro/types": "0.2.5"
   },
   "peerDependencies": {
     "react": ">=19.0.0",

package/src/components/Button.tsx

@@ -32,7 +32,7 @@ const ButtonInner = React.memo(React.forwardRef<
    }: ButtonProps<React.ElementType>, ref) => {
 
     const baseClasses =
-        "typography-button h-fit rounded-md whitespace-nowrap inline-flex items-center justify-center p-1.5 px-3 focus:outline-none transition-all ease-in-out duration-150 gap-1.5 active:scale-[0.98]";
+        "typography-button h-fit rounded-md whitespace-nowrap inline-flex items-center justify-center p-2 px-4 focus:outline-none transition-all ease-in-out duration-150 gap-2 active:scale-[0.98]";
 
     const buttonClasses = cls({
         "w-full": fullWidth,
@@ -68,11 +68,11 @@ const ButtonInner = React.memo(React.forwardRef<
 
     const sizeClasses = cls(
         {
-            "py-0.5 px-1.5": size === "small",
-            "py-1.5 px-3": size === "medium",
-            "py-2 px-4": size === "large",
-            "py-2.5 px-5": size === "xl",
-            "py-3 px-6": size === "2xl"
+            "py-1 px-2": size === "small",
+            "py-2 px-4": size === "medium",
+            "py-2.5 px-5": size === "large",
+            "py-3 px-6": size === "xl",
+            "py-4 px-10": size === "2xl"
         }
     );
 

package/src/components/IconButton.tsx

@@ -19,10 +19,10 @@ const buttonClasses = "hover:bg-surface-accent-200 hover:bg-opacity-75 hover:bg-
 const baseClasses = "inline-flex items-center justify-center p-2 text-sm font-medium focus:outline-none transition-colors ease-in-out duration-150";
 const colorClasses = "text-surface-accent-500 visited:text-surface-accent-500 dark:text-surface-accent-300 dark:visited:text-surface-300";
 const sizeClasses = {
-    medium: "w-9 !h-9 min-w-9 min-h-9",
-    small: "w-7 !h-7 min-w-7 min-h-7",
-    smallest: "w-5 !h-5 min-w-5 min-h-5",
-    large: "w-10 !h-10 min-w-10 min-h-10"
+    medium: "w-10 !h-10 min-w-10 min-h-10",
+    small: "w-8 !h-8 min-w-8 min-h-8",
+    smallest: "w-6 !h-6 min-w-6 min-h-6",
+    large: "w-12 !h-12 min-w-12 min-h-12"
 }
 const shapeClasses = {
     circular: "rounded-full",

package/src/components/Tabs.tsx

@@ -107,7 +107,7 @@ export function Tabs({
 msOverflowStyle: "none" }}
             >
                 <TabsPrimitive.List className={cls(
-                    variant === "standard" && "inline-flex h-10 items-center justify-start rounded-md bg-surface-50 p-1 text-surface-600 dark:bg-surface-900 dark:text-surface-400 gap-2 border",
+                    variant === "standard" && "inline-flex h-9 items-center justify-start rounded-md bg-surface-50 p-1 text-surface-600 dark:bg-surface-900 dark:text-surface-400 gap-2 border",
                     variant === "standard" && defaultBorderMixin,
                     variant === "boxy" && "flex items-center h-full",
                     variant === "pill" && "flex items-center gap-0.5",
@@ -161,7 +161,7 @@ export function Tab({
                 "inline-flex items-center justify-center whitespace-nowrap text-sm font-medium ring-offset-white transition-all",
                 "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-surface-400 focus-visible:ring-offset-2",
                 "disabled:pointer-events-none disabled:opacity-50",
-                variant === "standard" && "rounded-sm px-3 py-1.5 data-[state=active]:bg-white data-[state=active]:text-surface-900 data-[state=active]:shadow-sm dark:data-[state=active]:bg-surface-900 dark:data-[state=active]:text-surface-50",
+                variant === "standard" && "rounded-sm px-3 py-1 data-[state=active]:bg-white data-[state=active]:text-surface-900 data-[state=active]:shadow-sm dark:data-[state=active]:bg-surface-900 dark:data-[state=active]:text-surface-50",
                 variant === "boxy" && cls(
                     "flex-shrink-0 flex items-center gap-1.5 px-3.5 h-9 border-r border-surface-200 dark:border-surface-800 cursor-pointer text-[12px] font-medium transition-colors group relative box-border overflow-hidden",
                     "border-b-2 border-b-transparent",

package/src/index.css

@@ -117,7 +117,7 @@
 }
 
 .typography-button {
-    @apply text-[13px] font-semibold;
+    @apply text-sm font-semibold;
 }
 
 :focus-visible {