@xaui/hybrid 0.0.2 → 0.0.3

package/dist/button/index.cjs

@@ -482,7 +482,7 @@ var buttonStyles = (0, import_tailwind_variants2.tv)({
 
 // src/components/button/button.hook.ts
 var import_react4 = require("react");
-var useButtonStyles = (themeColor, variant, size, radius) => {
+var useVariantSizesStyles = (themeColor, variant, size) => {
   const theme = useXUITheme();
   const colorScheme = theme.colors[themeColor];
   const sizeStyles = (0, import_react4.useMemo)(() => {
@@ -526,16 +526,6 @@ var useButtonStyles = (themeColor, variant, size, radius) => {
     };
     return sizes[size];
   }, [size, theme]);
-  const radiusStyles = (0, import_react4.useMemo)(() => {
-    const radii = {
-      none: theme.borderRadius.none,
-      sm: theme.borderRadius.sm,
-      md: theme.borderRadius.md,
-      lg: theme.borderRadius.lg,
-      full: theme.borderRadius.full
-    };
-    return { borderRadius: `${radii[radius]}px` };
-  }, [radius, theme]);
   const variantStyles = (0, import_react4.useMemo)(() => {
     const styles = {
       solid: {
@@ -591,6 +581,30 @@ var useButtonStyles = (themeColor, variant, size, radius) => {
     };
     return sizes[size];
   }, [size]);
+  return {
+    sizeStyles,
+    variantStyles,
+    textColor,
+    spinnerSize
+  };
+};
+var useButtonStyles = (themeColor, variant, size, radius) => {
+  const theme = useXUITheme();
+  const { sizeStyles, variantStyles, textColor, spinnerSize } = useVariantSizesStyles(
+    themeColor,
+    variant,
+    size
+  );
+  const radiusStyles = (0, import_react4.useMemo)(() => {
+    const radii = {
+      none: theme.borderRadius.none,
+      sm: theme.borderRadius.sm,
+      md: theme.borderRadius.md,
+      lg: theme.borderRadius.lg,
+      full: theme.borderRadius.full
+    };
+    return { borderRadius: `${radii[radius]}px` };
+  }, [radius, theme]);
   return {
     sizeStyles,
     radiusStyles,
@@ -669,7 +683,7 @@ var Button = ({
         ...userStyle
       },
       animate: {
-        scale: isPressed ? 0.95 : 1,
+        scale: isPressed ? 0.99 : 1,
         opacity: isPressed ? 0.8 : 1
       },
       transition: {
@@ -677,11 +691,11 @@ var Button = ({
         ease: "easeInOut"
       },
       children: [
-        startContent,
+        startContent && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "inline-flex items-center shrink-0", children: startContent }),
         isLoading && spinnerPlacement === "start" && spinnerElement,
         children,
         isLoading && spinnerPlacement === "end" && spinnerElement,
-        endContent
+        endContent && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "inline-flex items-center shrink-0", children: endContent })
       ]
     }
   );

package/dist/button/index.js

@@ -52,7 +52,7 @@ var buttonStyles = tv({
 
 // src/components/button/button.hook.ts
 import { useMemo } from "react";
-var useButtonStyles = (themeColor, variant, size, radius) => {
+var useVariantSizesStyles = (themeColor, variant, size) => {
   const theme = useXUITheme();
   const colorScheme = theme.colors[themeColor];
   const sizeStyles = useMemo(() => {
@@ -96,16 +96,6 @@ var useButtonStyles = (themeColor, variant, size, radius) => {
     };
     return sizes[size];
   }, [size, theme]);
-  const radiusStyles = useMemo(() => {
-    const radii = {
-      none: theme.borderRadius.none,
-      sm: theme.borderRadius.sm,
-      md: theme.borderRadius.md,
-      lg: theme.borderRadius.lg,
-      full: theme.borderRadius.full
-    };
-    return { borderRadius: `${radii[radius]}px` };
-  }, [radius, theme]);
   const variantStyles = useMemo(() => {
     const styles = {
       solid: {
@@ -161,6 +151,30 @@ var useButtonStyles = (themeColor, variant, size, radius) => {
     };
     return sizes[size];
   }, [size]);
+  return {
+    sizeStyles,
+    variantStyles,
+    textColor,
+    spinnerSize
+  };
+};
+var useButtonStyles = (themeColor, variant, size, radius) => {
+  const theme = useXUITheme();
+  const { sizeStyles, variantStyles, textColor, spinnerSize } = useVariantSizesStyles(
+    themeColor,
+    variant,
+    size
+  );
+  const radiusStyles = useMemo(() => {
+    const radii = {
+      none: theme.borderRadius.none,
+      sm: theme.borderRadius.sm,
+      md: theme.borderRadius.md,
+      lg: theme.borderRadius.lg,
+      full: theme.borderRadius.full
+    };
+    return { borderRadius: `${radii[radius]}px` };
+  }, [radius, theme]);
   return {
     sizeStyles,
     radiusStyles,
@@ -239,7 +253,7 @@ var Button = ({
         ...userStyle
       },
       animate: {
-        scale: isPressed ? 0.95 : 1,
+        scale: isPressed ? 0.99 : 1,
         opacity: isPressed ? 0.8 : 1
       },
       transition: {
@@ -247,11 +261,11 @@ var Button = ({
         ease: "easeInOut"
       },
       children: [
-        startContent,
+        startContent && /* @__PURE__ */ jsx("span", { className: "inline-flex items-center shrink-0", children: startContent }),
         isLoading && spinnerPlacement === "start" && spinnerElement,
         children,
         isLoading && spinnerPlacement === "end" && spinnerElement,
-        endContent
+        endContent && /* @__PURE__ */ jsx("span", { className: "inline-flex items-center shrink-0", children: endContent })
       ]
     }
   );

package/package.json

@@ -1,12 +1,17 @@
 {
   "name": "@xaui/hybrid",
-  "version": "0.0.2",
-  "description": "Web UI components for XUI",
+  "version": "0.0.3",
+  "description": "Flutter-inspired React UI components for web and mobile webview applications with Framer Motion animations and Tailwind CSS styling",
   "keywords": [
     "react",
     "web",
+    "webview",
+    "hybrid",
     "ui",
     "components",
+    "flutter",
+    "framer-motion",
+    "tailwindcss",
     "xaui"
   ],
   "type": "module",
@@ -47,22 +52,13 @@
   "repository": {
     "type": "git",
     "url": "git+https://github.com/rygrams/xaui.git",
-    "directory": "packages/web"
-  },
-  "scripts": {
-    "build": "tsup --config tsup.config.ts",
-    "dev": "tsup --config tsup.config.ts --watch",
-    "test": "vitest",
-    "test:ui": "vitest --ui",
-    "test:coverage": "vitest --coverage",
-    "lint": "eslint src/",
-    "type-check": "tsc --noEmit"
+    "directory": "packages/hybrid"
   },
   "dependencies": {
-    "@xaui/core": "workspace:*",
     "clsx": "^2.1.1",
     "tailwind-merge": "^3.4.0",
-    "tailwind-variants": "^0.3.1"
+    "tailwind-variants": "^0.3.1",
+    "@xaui/core": "0.1.6"
   },
   "peerDependencies": {
     "framer-motion": "^11.0.0",
@@ -81,5 +77,14 @@
   },
   "publishConfig": {
     "access": "public"
+  },
+  "scripts": {
+    "build": "tsup --config tsup.config.ts",
+    "dev": "tsup --config tsup.config.ts --watch",
+    "test": "vitest",
+    "test:ui": "vitest --ui",
+    "test:coverage": "vitest --coverage",
+    "lint": "eslint src/",
+    "type-check": "tsc --noEmit"
   }
-}
+}