@xaui/hybrid 0.0.2

package/dist/button/index.d.cts

@@ -0,0 +1,65 @@
+import React, { ButtonHTMLAttributes, ReactNode } from 'react';
+import { T as ThemeColor } from '../theme-qvIXI4kF.cjs';
+
+type ButtonVariant = 'solid' | 'outlined' | 'flat' | 'light' | 'elevated' | 'faded';
+type ButtonSize = 'xs' | 'sm' | 'md' | 'lg';
+type ButtonRadius = 'none' | 'sm' | 'md' | 'lg' | 'full';
+type SpinnerPlacement = 'start' | 'end';
+type ButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'disabled' | 'children' | 'onAnimationStart' | 'onDragStart' | 'onDragEnd' | 'onDrag'> & {
+    /**
+     * The content to display in the button.
+     */
+    children: ReactNode;
+    /**
+     * The theme color of the button.
+     * @default 'default'
+     */
+    themeColor?: ThemeColor;
+    /**
+     * The variant of the button.
+     * @default 'solid'
+     */
+    variant?: ButtonVariant;
+    /**
+     * The size of the button.
+     * @default 'md'
+     */
+    size?: ButtonSize;
+    /**
+     * The border radius of the button.
+     * @default 'md'
+     */
+    radius?: ButtonRadius;
+    /**
+     * Content to display at the start of the button.
+     */
+    startContent?: ReactNode;
+    /**
+     * Content to display at the end of the button.
+     */
+    endContent?: ReactNode;
+    /**
+     * The placement of the spinner when isLoading is true.
+     * @default 'start'
+     */
+    spinnerPlacement?: SpinnerPlacement;
+    /**
+     * Whether the button should take the full width of its container.
+     * @default false
+     */
+    fullWidth?: boolean;
+    /**
+     * Whether the button is disabled.
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Whether the button is in a loading state.
+     * @default false
+     */
+    isLoading?: boolean;
+};
+
+declare const Button: React.FC<ButtonProps>;
+
+export { Button, type ButtonProps, type ButtonRadius, type ButtonSize, type ButtonVariant, type SpinnerPlacement };

package/dist/button/index.d.ts

@@ -0,0 +1,65 @@
+import React, { ButtonHTMLAttributes, ReactNode } from 'react';
+import { T as ThemeColor } from '../theme-qvIXI4kF.js';
+
+type ButtonVariant = 'solid' | 'outlined' | 'flat' | 'light' | 'elevated' | 'faded';
+type ButtonSize = 'xs' | 'sm' | 'md' | 'lg';
+type ButtonRadius = 'none' | 'sm' | 'md' | 'lg' | 'full';
+type SpinnerPlacement = 'start' | 'end';
+type ButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'disabled' | 'children' | 'onAnimationStart' | 'onDragStart' | 'onDragEnd' | 'onDrag'> & {
+    /**
+     * The content to display in the button.
+     */
+    children: ReactNode;
+    /**
+     * The theme color of the button.
+     * @default 'default'
+     */
+    themeColor?: ThemeColor;
+    /**
+     * The variant of the button.
+     * @default 'solid'
+     */
+    variant?: ButtonVariant;
+    /**
+     * The size of the button.
+     * @default 'md'
+     */
+    size?: ButtonSize;
+    /**
+     * The border radius of the button.
+     * @default 'md'
+     */
+    radius?: ButtonRadius;
+    /**
+     * Content to display at the start of the button.
+     */
+    startContent?: ReactNode;
+    /**
+     * Content to display at the end of the button.
+     */
+    endContent?: ReactNode;
+    /**
+     * The placement of the spinner when isLoading is true.
+     * @default 'start'
+     */
+    spinnerPlacement?: SpinnerPlacement;
+    /**
+     * Whether the button should take the full width of its container.
+     * @default false
+     */
+    fullWidth?: boolean;
+    /**
+     * Whether the button is disabled.
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Whether the button is in a loading state.
+     * @default false
+     */
+    isLoading?: boolean;
+};
+
+declare const Button: React.FC<ButtonProps>;
+
+export { Button, type ButtonProps, type ButtonRadius, type ButtonSize, type ButtonVariant, type SpinnerPlacement };

package/dist/button/index.js

@@ -0,0 +1,261 @@
+import {
+  ActivityIndicator
+} from "../chunk-57VNE2OC.js";
+import {
+  useXUITheme
+} from "../chunk-4GTYR4N2.js";
+
+// src/components/button/button.tsx
+import { useState } from "react";
+import { motion } from "framer-motion";
+
+// src/components/button/button.style.ts
+import { tv } from "tailwind-variants";
+var buttonStyles = tv({
+  slots: {
+    base: [
+      "inline-flex",
+      "items-center",
+      "justify-center",
+      "gap-2",
+      "overflow-hidden",
+      "font-medium",
+      "text-center",
+      "outline-none",
+      "cursor-pointer",
+      "select-none",
+      "transition-all",
+      "subpixel-antialiased",
+      "tap-highlight-transparent",
+      "transform-gpu"
+    ]
+  },
+  variants: {
+    fullWidth: {
+      true: {
+        base: "w-full"
+      },
+      false: {
+        base: "inline-flex"
+      }
+    },
+    isDisabled: {
+      true: {
+        base: "opacity-50 cursor-not-allowed"
+      }
+    }
+  },
+  defaultVariants: {
+    fullWidth: false
+  }
+});
+
+// src/components/button/button.hook.ts
+import { useMemo } from "react";
+var useButtonStyles = (themeColor, variant, size, radius) => {
+  const theme = useXUITheme();
+  const colorScheme = theme.colors[themeColor];
+  const sizeStyles = useMemo(() => {
+    const sizes = {
+      xs: {
+        paddingLeft: `${theme.spacing.sm}px`,
+        paddingRight: `${theme.spacing.sm}px`,
+        paddingTop: `${theme.spacing.xs}px`,
+        paddingBottom: `${theme.spacing.xs}px`,
+        minHeight: "28px",
+        fontSize: `${theme.fontSizes.xs}px`,
+        lineHeight: "1"
+      },
+      sm: {
+        paddingLeft: `${theme.spacing.md}px`,
+        paddingRight: `${theme.spacing.md}px`,
+        paddingTop: `${theme.spacing.xs}px`,
+        paddingBottom: `${theme.spacing.xs}px`,
+        minHeight: "32px",
+        fontSize: `${theme.fontSizes.sm}px`,
+        lineHeight: "1"
+      },
+      md: {
+        paddingLeft: `${theme.spacing.md}px`,
+        paddingRight: `${theme.spacing.md}px`,
+        paddingTop: `${theme.spacing.sm}px`,
+        paddingBottom: `${theme.spacing.sm}px`,
+        minHeight: "40px",
+        fontSize: `${theme.fontSizes.md}px`,
+        lineHeight: "1"
+      },
+      lg: {
+        paddingLeft: `${theme.spacing.lg}px`,
+        paddingRight: `${theme.spacing.lg}px`,
+        paddingTop: `${theme.spacing.md}px`,
+        paddingBottom: `${theme.spacing.md}px`,
+        minHeight: "48px",
+        fontSize: `${theme.fontSizes.lg}px`,
+        lineHeight: "1"
+      }
+    };
+    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: {
+        backgroundColor: colorScheme.main,
+        borderWidth: "0",
+        color: colorScheme.foreground
+      },
+      outlined: {
+        backgroundColor: "transparent",
+        borderWidth: `${theme.borderWidth.md}px`,
+        borderStyle: "solid",
+        borderColor: colorScheme.main,
+        color: colorScheme.main
+      },
+      flat: {
+        backgroundColor: colorScheme.background,
+        borderWidth: "0",
+        color: colorScheme.main
+      },
+      light: {
+        backgroundColor: "transparent",
+        borderWidth: "0",
+        color: colorScheme.main
+      },
+      elevated: {
+        backgroundColor: colorScheme.main,
+        borderWidth: "0",
+        color: colorScheme.foreground,
+        boxShadow: typeof theme.shadows.md === "string" ? theme.shadows.md : "0 2px 4px rgba(0,0,0,0.1)"
+      },
+      faded: {
+        backgroundColor: `${colorScheme.background}90`,
+        borderWidth: `${theme.borderWidth.md}px`,
+        borderStyle: "solid",
+        borderColor: colorScheme.main,
+        color: colorScheme.main
+      }
+    };
+    return styles[variant];
+  }, [variant, colorScheme, theme]);
+  const textColor = useMemo(() => {
+    if (variant === "solid" || variant === "elevated") {
+      return colorScheme.foreground;
+    }
+    return colorScheme.main;
+  }, [variant, colorScheme]);
+  const spinnerSize = useMemo(() => {
+    const sizes = {
+      xs: 14,
+      sm: 16,
+      md: 18,
+      lg: 20
+    };
+    return sizes[size];
+  }, [size]);
+  return {
+    sizeStyles,
+    radiusStyles,
+    variantStyles,
+    textColor,
+    spinnerSize
+  };
+};
+
+// src/components/button/button.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var Button = ({
+  children,
+  themeColor = "default",
+  variant = "solid",
+  size = "md",
+  radius = "md",
+  startContent,
+  endContent,
+  spinnerPlacement = "start",
+  fullWidth = false,
+  isDisabled = false,
+  isLoading = false,
+  className,
+  style: userStyle,
+  onMouseLeave,
+  onMouseDown,
+  onMouseUp,
+  ...restProps
+}) => {
+  const [isPressed, setIsPressed] = useState(false);
+  const { base } = buttonStyles({ fullWidth, isDisabled });
+  const { sizeStyles, radiusStyles, variantStyles, textColor, spinnerSize } = useButtonStyles(themeColor, variant, size, radius);
+  const handleMouseDown = (event) => {
+    if (!isDisabled && !isLoading) {
+      setIsPressed(true);
+    }
+    onMouseDown?.(event);
+  };
+  const handleMouseUp = (event) => {
+    if (!isDisabled && !isLoading) {
+      setIsPressed(false);
+    }
+    onMouseUp?.(event);
+  };
+  const handleMouseLeave = (event) => {
+    if (!isDisabled && !isLoading) {
+      setIsPressed(false);
+    }
+    onMouseLeave?.(event);
+  };
+  const spinnerElement = /* @__PURE__ */ jsx(
+    ActivityIndicator,
+    {
+      variant: "circular",
+      showTrack: false,
+      themeColor: variant === "solid" || variant === "elevated" ? void 0 : themeColor,
+      color: variant === "solid" || variant === "elevated" ? textColor : void 0,
+      size: spinnerSize
+    }
+  );
+  return /* @__PURE__ */ jsxs(
+    motion.button,
+    {
+      type: "button",
+      className: base({ className }),
+      disabled: isDisabled || isLoading,
+      onMouseLeave: handleMouseLeave,
+      onMouseDown: handleMouseDown,
+      onMouseUp: handleMouseUp,
+      ...restProps,
+      style: {
+        ...sizeStyles,
+        ...radiusStyles,
+        ...variantStyles,
+        ...userStyle
+      },
+      animate: {
+        scale: isPressed ? 0.95 : 1,
+        opacity: isPressed ? 0.8 : 1
+      },
+      transition: {
+        duration: 0.1,
+        ease: "easeInOut"
+      },
+      children: [
+        startContent,
+        isLoading && spinnerPlacement === "start" && spinnerElement,
+        children,
+        isLoading && spinnerPlacement === "end" && spinnerElement,
+        endContent
+      ]
+    }
+  );
+};
+export {
+  Button
+};

package/dist/chunk-4GTYR4N2.js

@@ -0,0 +1,86 @@
+// src/core/theme-context.tsx
+import React, { createContext } from "react";
+
+// src/core/theme-hooks.ts
+import { useContext, useEffect, useState } from "react";
+var getWebColorMode = () => {
+  if (typeof globalThis === "undefined") return "light";
+  const globalScope = globalThis;
+  if (!globalScope.matchMedia) {
+    return "light";
+  }
+  return globalScope.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+};
+function useColorMode() {
+  const [webScheme, setWebScheme] = useState(() => getWebColorMode());
+  useEffect(() => {
+    if (typeof globalThis === "undefined") return;
+    const globalScope = globalThis;
+    if (!globalScope.matchMedia) return;
+    const media = globalScope.matchMedia("(prefers-color-scheme: dark)");
+    const handleChange = () => {
+      setWebScheme(media.matches ? "dark" : "light");
+    };
+    handleChange();
+    if (typeof media.addEventListener === "function") {
+      media.addEventListener("change", handleChange);
+      return () => media.removeEventListener?.("change", handleChange);
+    }
+    const legacyMedia = media;
+    legacyMedia.addListener?.(handleChange);
+    return () => legacyMedia.removeListener?.(handleChange);
+  }, []);
+  return webScheme;
+}
+function useXUITheme() {
+  const theme = useContext(XUIThemeContext);
+  if (!theme) {
+    throw new Error("useXUITheme must be used within XUIProvider");
+  }
+  return theme;
+}
+function useXUIColors() {
+  const theme = useXUITheme();
+  return theme.colors;
+}
+
+// src/core/theme-context.tsx
+import { defaultTheme } from "@xaui/core/theme";
+import { jsx } from "react/jsx-runtime";
+var XUIThemeContext = createContext(null);
+function XUIProvider({
+  children,
+  theme: lightTheme,
+  darkTheme
+}) {
+  const colorScheme = useColorMode();
+  const theme = React.useMemo(() => {
+    if (!darkTheme && !lightTheme) return defaultTheme;
+    const activeTheme = colorScheme === "dark" && darkTheme ? darkTheme : lightTheme;
+    if (!activeTheme) return defaultTheme;
+    return {
+      ...defaultTheme,
+      ...activeTheme,
+      colors: {
+        ...defaultTheme.colors,
+        ...activeTheme.colors
+      },
+      fontFamilies: {
+        ...defaultTheme.fontFamilies,
+        ...activeTheme.fontFamilies
+      },
+      fontSizes: {
+        ...defaultTheme.fontSizes,
+        ...activeTheme.fontSizes
+      }
+    };
+  }, [lightTheme, darkTheme, colorScheme]);
+  return /* @__PURE__ */ jsx(XUIThemeContext.Provider, { value: theme, children });
+}
+
+export {
+  useColorMode,
+  useXUITheme,
+  useXUIColors,
+  XUIProvider
+};