@xaui/hybrid 0.0.8 → 0.0.9

package/dist/alert/index.d.ts

@@ -0,0 +1,2 @@
+export { A as Alert, a as AlertProps, c as AlertRadius, b as AlertVariant } from '../index-CMptPfU-.js';
+import 'react';

package/dist/alert/index.js

@@ -0,0 +1,6 @@
+import {
+  Alert
+} from "../chunk-7HVBAJHB.js";
+export {
+  Alert
+};

package/dist/chunk-7HVBAJHB.js

@@ -0,0 +1,326 @@
+// src/components/alert/alert.style.ts
+import { tv } from "tailwind-variants";
+var alertStyles = tv({
+  slots: {
+    container: "xui-alert flex flex-row items-center w-full gap-3 bg-[var(--xui-alert-bg)] [border-width:var(--xui-alert-border-width)] [border-color:var(--xui-alert-border-color)] px-[var(--xui-spacing-md)] py-[var(--xui-spacing-sm)]",
+    mainWrapper: "flex-1 flex-col justify-center gap-0.5",
+    iconWrapper: "size-7 rounded-full flex items-center justify-center shrink-0 text-[var(--xui-alert-text)] bg-[var(--xui-alert-icon-bg)] [border-width:var(--xui-alert-icon-border-width)] [border-color:var(--xui-alert-icon-border-color)]",
+    title: "m-0 leading-tight text-[var(--xui-alert-text)] text-[length:var(--xui-text-sm)] font-[var(--xui-font-semibold)]",
+    description: "m-0 mt-1 leading-none text-[var(--xui-alert-description)] text-[length:var(--xui-text-xs)] font-[var(--xui-font-normal)]",
+    iconText: "font-[var(--xui-font-semibold)]",
+    closeButton: "self-start p-1 cursor-pointer bg-transparent border-0 rounded flex text-[var(--xui-alert-text)]",
+    extraContent: "mt-1"
+  },
+  variants: {
+    themeColor: {
+      default: {
+        container: "[--xui-alert-main:var(--xui-default)] [--xui-alert-fg:var(--xui-default-fg)] [--xui-alert-bg-base:var(--xui-default-bg)] [--xui-alert-text-base:var(--xui-foreground)] [--xui-alert-accent:var(--xui-foreground)]"
+      },
+      primary: {
+        container: "[--xui-alert-main:var(--xui-primary)] [--xui-alert-fg:var(--xui-primary-fg)] [--xui-alert-bg-base:var(--xui-primary-bg)] [--xui-alert-text-base:var(--xui-primary)] [--xui-alert-accent:var(--xui-primary)]"
+      },
+      secondary: {
+        container: "[--xui-alert-main:var(--xui-secondary)] [--xui-alert-fg:var(--xui-secondary-fg)] [--xui-alert-bg-base:var(--xui-secondary-bg)] [--xui-alert-text-base:var(--xui-secondary)] [--xui-alert-accent:var(--xui-secondary)]"
+      },
+      tertiary: {
+        container: "[--xui-alert-main:var(--xui-tertiary)] [--xui-alert-fg:var(--xui-tertiary-fg)] [--xui-alert-bg-base:var(--xui-tertiary-bg)] [--xui-alert-text-base:var(--xui-tertiary)] [--xui-alert-accent:var(--xui-tertiary)]"
+      },
+      success: {
+        container: "[--xui-alert-main:var(--xui-success)] [--xui-alert-fg:var(--xui-success-fg)] [--xui-alert-bg-base:var(--xui-success-bg)] [--xui-alert-text-base:var(--xui-success)] [--xui-alert-accent:var(--xui-success)]"
+      },
+      warning: {
+        container: "[--xui-alert-main:var(--xui-warning)] [--xui-alert-fg:var(--xui-warning-fg)] [--xui-alert-bg-base:var(--xui-warning-bg)] [--xui-alert-text-base:var(--xui-warning)] [--xui-alert-accent:var(--xui-warning)]"
+      },
+      danger: {
+        container: "[--xui-alert-main:var(--xui-danger)] [--xui-alert-fg:var(--xui-danger-fg)] [--xui-alert-bg-base:var(--xui-danger-bg)] [--xui-alert-text-base:var(--xui-danger)] [--xui-alert-accent:var(--xui-danger)]"
+      }
+    },
+    variant: {
+      solid: {
+        container: "[--xui-alert-bg:var(--xui-alert-solid-bg)] [--xui-alert-text:var(--xui-alert-solid-text)] [--xui-alert-description:color-mix(in_srgb,var(--xui-alert-solid-text)_75%,transparent)] [--xui-alert-border-width:0px] [--xui-alert-border-color:transparent]",
+        iconWrapper: "[--xui-alert-icon-bg:var(--xui-alert-solid-icon-bg)] [--xui-alert-icon-border-width:0px] [--xui-alert-icon-border-color:transparent]"
+      },
+      flat: {
+        container: "[--xui-alert-bg:var(--xui-alert-flat-bg)] [--xui-alert-text:var(--xui-alert-text-base)] [--xui-alert-description:color-mix(in_srgb,var(--xui-alert-text-base)_75%,transparent)] [--xui-alert-border-width:0px] [--xui-alert-border-color:transparent]",
+        iconWrapper: "[--xui-alert-icon-bg:color-mix(in_srgb,var(--xui-alert-accent)_12%,transparent)] [--xui-alert-icon-border-width:0px] [--xui-alert-icon-border-color:transparent]"
+      },
+      bordered: {
+        container: "border-solid [--xui-alert-bg:transparent] [--xui-alert-text:var(--xui-alert-text-base)] [--xui-alert-description:color-mix(in_srgb,var(--xui-alert-text-base)_75%,transparent)] [--xui-alert-border-width:var(--xui-border-md)] [--xui-alert-border-color:color-mix(in_srgb,var(--xui-alert-main)_75%,transparent)]",
+        iconWrapper: "border-solid [--xui-alert-icon-bg:color-mix(in_srgb,var(--xui-alert-accent)_12%,transparent)] [--xui-alert-icon-border-width:var(--xui-border-xs)] [--xui-alert-icon-border-color:color-mix(in_srgb,var(--xui-alert-accent)_20%,transparent)]"
+      },
+      faded: {
+        container: "border-solid [--xui-alert-bg:color-mix(in_srgb,var(--xui-alert-bg-base)_75%,transparent)] [--xui-alert-text:var(--xui-alert-text-base)] [--xui-alert-description:color-mix(in_srgb,var(--xui-alert-text-base)_75%,transparent)] [--xui-alert-border-width:var(--xui-border-md)] [--xui-alert-border-color:color-mix(in_srgb,var(--xui-alert-accent)_25%,transparent)]",
+        iconWrapper: "border-solid [--xui-alert-icon-bg:color-mix(in_srgb,var(--xui-alert-accent)_12%,transparent)] [--xui-alert-icon-border-width:var(--xui-border-xs)] [--xui-alert-icon-border-color:color-mix(in_srgb,var(--xui-alert-accent)_20%,transparent)]"
+      }
+    },
+    radius: {
+      none: { container: "rounded-[var(--xui-radius-none)]" },
+      sm: { container: "rounded-[var(--xui-radius-sm)]" },
+      md: { container: "rounded-[var(--xui-radius-md)]" },
+      lg: { container: "rounded-[var(--xui-radius-lg)]" },
+      full: { container: "rounded-[var(--xui-radius-full)]" }
+    }
+  },
+  defaultVariants: {
+    themeColor: "default",
+    variant: "flat",
+    radius: "md"
+  }
+});
+
+// src/components/alert/alert.hook.tsx
+import {
+  cloneElement,
+  isValidElement,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+
+// src/components/alert/alert-icons.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function InfoIcon({ color, size }) {
+  return /* @__PURE__ */ jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", overflow: "hidden", children: [
+    /* @__PURE__ */ jsx("circle", { cx: 12, cy: 12, r: 10, stroke: color, strokeWidth: 2 }),
+    /* @__PURE__ */ jsx("line", { x1: 12, y1: 10, x2: 12, y2: 16, stroke: color, strokeWidth: 2, strokeLinecap: "round" }),
+    /* @__PURE__ */ jsx("circle", { cx: 12, cy: 7, r: 1, fill: color })
+  ] });
+}
+function SuccessIcon({ color, size }) {
+  return /* @__PURE__ */ jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", overflow: "hidden", children: [
+    /* @__PURE__ */ jsx("circle", { cx: 12, cy: 12, r: 10, stroke: color, strokeWidth: 2 }),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M7 12.5L10.2 15.5L17 9",
+        stroke: color,
+        strokeWidth: 2,
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    )
+  ] });
+}
+function WarningIcon({ color, size }) {
+  return /* @__PURE__ */ jsxs("svg", { width: size, height: size, viewBox: "0 0 26 26", fill: "none", overflow: "hidden", children: [
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M13 3.5L22.5 21H3.5L13 3.5Z",
+        stroke: color,
+        strokeWidth: 2,
+        strokeLinejoin: "round"
+      }
+    ),
+    /* @__PURE__ */ jsx("line", { x1: 13, y1: 10, x2: 13, y2: 15, stroke: color, strokeWidth: 2, strokeLinecap: "round" }),
+    /* @__PURE__ */ jsx("circle", { cx: 13, cy: 18, r: 1, fill: color })
+  ] });
+}
+function DangerIcon({ color, size }) {
+  return /* @__PURE__ */ jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", overflow: "hidden", children: [
+    /* @__PURE__ */ jsx("circle", { cx: 12, cy: 12, r: 10, stroke: color, strokeWidth: 2 }),
+    /* @__PURE__ */ jsx("line", { x1: 9, y1: 9, x2: 15, y2: 15, stroke: color, strokeWidth: 2, strokeLinecap: "round" }),
+    /* @__PURE__ */ jsx("line", { x1: 15, y1: 9, x2: 9, y2: 15, stroke: color, strokeWidth: 2, strokeLinecap: "round" })
+  ] });
+}
+function CloseIcon({ color, size }) {
+  return /* @__PURE__ */ jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", overflow: "hidden", children: [
+    /* @__PURE__ */ jsx("line", { x1: 18, y1: 6, x2: 6, y2: 18, stroke: color, strokeWidth: 2, strokeLinecap: "round" }),
+    /* @__PURE__ */ jsx("line", { x1: 6, y1: 6, x2: 18, y2: 18, stroke: color, strokeWidth: 2, strokeLinecap: "round" })
+  ] });
+}
+
+// src/components/alert/alert.hook.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var iconMap = {
+  default: InfoIcon,
+  primary: InfoIcon,
+  secondary: InfoIcon,
+  tertiary: InfoIcon,
+  success: SuccessIcon,
+  warning: WarningIcon,
+  danger: DangerIcon
+};
+var useAlertVisibility = ({
+  isVisible,
+  onClose,
+  onVisibleChange
+}) => {
+  const [internalVisible, setInternalVisible] = useState(isVisible ?? true);
+  const [shouldRender, setShouldRender] = useState(isVisible ?? true);
+  const [animState, setAnimState] = useState("open");
+  const isInitialMount = useRef(true);
+  const isControlled = typeof isVisible === "boolean";
+  const visible = isControlled ? isVisible : internalVisible;
+  const finishClosing = useCallback(() => {
+    setShouldRender(false);
+    if (!isControlled) {
+      setInternalVisible(false);
+    }
+    onVisibleChange?.(false);
+    onClose?.();
+  }, [isControlled, onClose, onVisibleChange]);
+  const handleClose = useCallback(() => {
+    if (!visible) return;
+    setAnimState("closed");
+  }, [visible]);
+  const handleAnimationEnd = useCallback(() => {
+    if (animState === "closed") {
+      finishClosing();
+    }
+  }, [animState, finishClosing]);
+  useEffect(() => {
+    if (isInitialMount.current) {
+      isInitialMount.current = false;
+      return;
+    }
+    if (visible && !shouldRender) {
+      setShouldRender(true);
+      setAnimState("open");
+      return;
+    }
+    if (!visible && shouldRender) {
+      handleClose();
+    }
+  }, [visible, shouldRender, handleClose]);
+  return {
+    shouldRender,
+    animState,
+    handleClose,
+    handleAnimationEnd
+  };
+};
+var useAlertIconNode = ({
+  hideIcon,
+  icon,
+  themeColor,
+  slots
+}) => {
+  return useMemo(() => {
+    if (hideIcon) return null;
+    if (icon && isValidElement(icon)) {
+      return cloneElement(icon, { color: "currentColor", size: 18 });
+    }
+    if (icon) {
+      return /* @__PURE__ */ jsx2("span", { className: slots.iconText(), children: icon });
+    }
+    const IconComponent = iconMap[themeColor ?? "default"] ?? InfoIcon;
+    return /* @__PURE__ */ jsx2(IconComponent, { color: "currentColor", size: 18 });
+  }, [hideIcon, icon, slots, themeColor]);
+};
+var useAlertContentNodes = ({
+  title,
+  description,
+  children,
+  customAppearance,
+  slots
+}) => {
+  const renderContentText = useCallback(
+    (content) => {
+      if (content === null || content === void 0) return null;
+      if (typeof content === "string" || typeof content === "number") {
+        return /* @__PURE__ */ jsx2("p", { className: slots.description(), style: customAppearance?.description, children: content });
+      }
+      return content;
+    },
+    [customAppearance?.description, slots]
+  );
+  const titleNode = useMemo(() => {
+    if (title === null || title === void 0) return null;
+    if (typeof title === "string" || typeof title === "number") {
+      return /* @__PURE__ */ jsx2("p", { className: slots.title(), style: customAppearance?.title, children: title });
+    }
+    return title;
+  }, [title, customAppearance?.title, slots]);
+  const descriptionNode = renderContentText(description);
+  const childrenNode = renderContentText(children);
+  return { titleNode, descriptionNode, childrenNode };
+};
+var useAlertCloseButtonNode = ({
+  closeButton,
+  handleClose
+}) => {
+  return useMemo(() => {
+    if (!closeButton) return null;
+    if (!isValidElement(closeButton)) return closeButton;
+    const existingOnClick = closeButton.props.onClick;
+    return cloneElement(closeButton, {
+      onClick: (e) => {
+        existingOnClick?.(e);
+        handleClose();
+      }
+    });
+  }, [closeButton, handleClose]);
+};
+var DefaultAlertCloseButton = ({
+  onClick,
+  className
+}) => /* @__PURE__ */ jsx2("button", { type: "button", "aria-label": "Close", onClick, className, children: /* @__PURE__ */ jsx2(CloseIcon, { size: 20, color: "currentColor" }) });
+
+// src/components/alert/alert.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var Alert = ({
+  title,
+  description,
+  icon,
+  themeColor = "default",
+  variant = "flat",
+  radius = "md",
+  isClosable = false,
+  hideIcon = false,
+  closeButton,
+  isVisible,
+  customAppearance,
+  children,
+  onClose,
+  onVisibleChange
+}) => {
+  const slots = alertStyles({ variant, themeColor, radius });
+  const { shouldRender, animState, handleClose, handleAnimationEnd } = useAlertVisibility({
+    isVisible,
+    onClose,
+    onVisibleChange
+  });
+  const shouldShowClose = Boolean(closeButton || isClosable || onClose);
+  const iconNode = useAlertIconNode({ hideIcon, icon, themeColor, slots });
+  const { titleNode, descriptionNode, childrenNode } = useAlertContentNodes({
+    title,
+    description,
+    children,
+    customAppearance,
+    slots
+  });
+  const closeButtonNode = useAlertCloseButtonNode({ closeButton, handleClose });
+  if (!shouldRender) return null;
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      role: "alert",
+      "data-xui-state": animState,
+      className: slots.container(),
+      style: customAppearance?.container,
+      onAnimationEnd: handleAnimationEnd,
+      children: [
+        !hideIcon && /* @__PURE__ */ jsx3("div", { className: slots.iconWrapper(), children: iconNode }),
+        /* @__PURE__ */ jsxs2("div", { className: slots.mainWrapper(), children: [
+          titleNode,
+          descriptionNode,
+          childrenNode && /* @__PURE__ */ jsx3("div", { className: slots.extraContent(), children: childrenNode })
+        ] }),
+        shouldShowClose && /* @__PURE__ */ jsx3("div", { children: closeButtonNode ?? /* @__PURE__ */ jsx3(
+          DefaultAlertCloseButton,
+          {
+            onClick: handleClose,
+            className: slots.closeButton()
+          }
+        ) })
+      ]
+    }
+  );
+};
+
+export {
+  Alert
+};

package/dist/chunk-YJF3QRMW.js

@@ -0,0 +1,177 @@
+// src/core/theme-provider.tsx
+import { useEffect } from "react";
+import { Fragment, jsx } from "react/jsx-runtime";
+var getSystemColorMode = () => {
+  if (typeof globalThis === "undefined" || !globalThis.matchMedia) return "light";
+  return globalThis.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+};
+function XUIProvider({
+  children,
+  colorScheme,
+  target = "html",
+  variables,
+  darkVariables
+}) {
+  useEffect(() => {
+    if (typeof document === "undefined") return;
+    const root = document.documentElement;
+    const styleTarget = target === "body" ? document.body : root;
+    if (!styleTarget) return;
+    const resolvedMode = colorScheme ?? getSystemColorMode();
+    root.dataset.colorScheme = resolvedMode;
+    const activeVars = resolvedMode === "dark" ? { ...variables, ...darkVariables } : variables;
+    if (!activeVars) return;
+    const appliedKeys = [];
+    for (const [key, value] of Object.entries(activeVars)) {
+      if (value === void 0 || value === null) continue;
+      styleTarget.style.setProperty(key, String(value));
+      appliedKeys.push(key);
+    }
+    return () => {
+      for (const key of appliedKeys) {
+        styleTarget.style.removeProperty(key);
+      }
+    };
+  }, [colorScheme, darkVariables, target, variables]);
+  return /* @__PURE__ */ jsx(Fragment, { children });
+}
+
+// src/core/theme-hooks.ts
+import { useEffect as useEffect2, useMemo, useState } from "react";
+var getDocumentColorMode = () => {
+  if (typeof document === "undefined") return null;
+  const scheme = document.documentElement.dataset.colorScheme;
+  return scheme === "dark" || scheme === "light" ? scheme : null;
+};
+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());
+  useEffect2(() => {
+    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 systemScheme = useColorMode();
+  const [documentScheme, setDocumentScheme] = useState(
+    () => getDocumentColorMode()
+  );
+  useEffect2(() => {
+    if (typeof document === "undefined") return;
+    const node = document.documentElement;
+    const update = () => setDocumentScheme(getDocumentColorMode());
+    update();
+    const observer = new MutationObserver(update);
+    observer.observe(node, {
+      attributes: true,
+      attributeFilter: ["data-color-scheme"]
+    });
+    return () => observer.disconnect();
+  }, []);
+  const resolvedScheme = documentScheme ?? systemScheme;
+  return useMemo(
+    () => ({
+      mode: resolvedScheme,
+      palette: {
+        primary: "var(--xui-primary)",
+        secondary: "var(--xui-secondary)",
+        tertiary: "var(--xui-tertiary)",
+        danger: "var(--xui-danger)",
+        warning: "var(--xui-warning)",
+        success: "var(--xui-success)",
+        default: "var(--xui-default)"
+      },
+      colors: {
+        primary: {
+          main: "var(--xui-primary)",
+          foreground: "var(--xui-primary-fg)",
+          background: "var(--xui-primary-bg)"
+        },
+        secondary: {
+          main: "var(--xui-secondary)",
+          foreground: "var(--xui-secondary-fg)",
+          background: "var(--xui-secondary-bg)"
+        },
+        tertiary: {
+          main: "var(--xui-tertiary)",
+          foreground: "var(--xui-tertiary-fg)",
+          background: "var(--xui-tertiary-bg)"
+        },
+        danger: {
+          main: "var(--xui-danger)",
+          foreground: "var(--xui-danger-fg)",
+          background: "var(--xui-danger-bg)"
+        },
+        warning: {
+          main: "var(--xui-warning)",
+          foreground: "var(--xui-warning-fg)",
+          background: "var(--xui-warning-bg)"
+        },
+        success: {
+          main: "var(--xui-success)",
+          foreground: "var(--xui-success-fg)",
+          background: "var(--xui-success-bg)"
+        },
+        default: {
+          main: "var(--xui-default)",
+          foreground: "var(--xui-default-fg)",
+          background: "var(--xui-default-bg)"
+        },
+        background: "var(--xui-background)",
+        foreground: "var(--xui-foreground)"
+      },
+      borderRadius: {
+        none: "var(--xui-radius-none)",
+        sm: "var(--xui-radius-sm)",
+        md: "var(--xui-radius-md)",
+        lg: "var(--xui-radius-lg)",
+        full: "var(--xui-radius-full)"
+      }
+    }),
+    [resolvedScheme]
+  );
+}
+function useXUIColors() {
+  const theme = useXUITheme();
+  return theme.colors;
+}
+function useXUIPalette() {
+  const theme = useXUITheme();
+  return useMemo(() => theme.palette, [theme]);
+}
+function useBorderRadiusStyles(radius) {
+  return useMemo(
+    () => ({
+      borderRadius: `var(--xui-radius-${radius})`
+    }),
+    [radius]
+  );
+}
+
+export {
+  XUIProvider,
+  useColorMode,
+  useXUITheme,
+  useXUIColors,
+  useXUIPalette,
+  useBorderRadiusStyles
+};

package/dist/core/index.d.ts

@@ -1,20 +1,3 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ReactNode } from 'react';
-import { XUITheme } from '@xaui/core/theme';
-
-type DeepPartial<T> = {
-    [P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P];
-};
-interface XUIProviderProps {
-    children: ReactNode;
-    theme?: DeepPartial<XUITheme>;
-    darkTheme?: DeepPartial<XUITheme>;
-}
-declare function XUIProvider({ children, theme: lightTheme, darkTheme, }: XUIProviderProps): react_jsx_runtime.JSX.Element;
-
-type ColorMode = 'light' | 'dark';
-declare function useColorMode(): ColorMode;
-declare function useXUITheme(): XUITheme;
-declare function useXUIColors(): XUITheme['colors'];
-
-export { XUIProvider, useColorMode, useXUIColors, useXUITheme };
+export { X as XUIProvider, a as XUIProviderProps, b as XUIVariables, f as useBorderRadiusStyles, u as useColorMode, d as useXUIColors, e as useXUIPalette, c as useXUITheme } from '../index-5BCfEjU-.js';
+import 'react/jsx-runtime';
+import 'react';

package/dist/core/index.js

@@ -1,85 +1,16 @@
-// 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 });
-}
+import {
+  XUIProvider,
+  useBorderRadiusStyles,
+  useColorMode,
+  useXUIColors,
+  useXUIPalette,
+  useXUITheme
+} from "../chunk-YJF3QRMW.js";
 export {
   XUIProvider,
+  useBorderRadiusStyles,
   useColorMode,
   useXUIColors,
+  useXUIPalette,
   useXUITheme
 };

package/dist/index-5BCfEjU-.d.ts

@@ -0,0 +1,63 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+type ColorMode$1 = 'light' | 'dark';
+type CSSVarValue = string | number;
+type XUIVariables = Record<`--xui-${string}`, CSSVarValue>;
+interface XUIProviderProps {
+    children: ReactNode;
+    colorScheme?: ColorMode$1;
+    target?: 'html' | 'body';
+    variables?: Partial<XUIVariables>;
+    darkVariables?: Partial<XUIVariables>;
+}
+declare function XUIProvider({ children, colorScheme, target, variables, darkVariables, }: XUIProviderProps): react_jsx_runtime.JSX.Element;
+
+type Size = 'xs' | 'sm' | 'md' | 'lg';
+type Radius = 'none' | 'sm' | 'md' | 'lg' | 'full';
+type SizeValues = {
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+};
+type RadiusValues = {
+    none: number;
+    sm: number;
+    md: number;
+    lg: number;
+    full: number;
+};
+
+type ColorMode = 'light' | 'dark';
+type CSSVarString = `var(--${string})`;
+type CSSColorScheme = {
+    main: CSSVarString;
+    foreground: CSSVarString;
+    background: CSSVarString;
+};
+type HybridXUITheme = {
+    mode: ColorMode;
+    palette: Record<string, CSSVarString>;
+    colors: {
+        primary: CSSColorScheme;
+        secondary: CSSColorScheme;
+        tertiary: CSSColorScheme;
+        danger: CSSColorScheme;
+        warning: CSSColorScheme;
+        success: CSSColorScheme;
+        default: CSSColorScheme;
+        background: CSSVarString;
+        foreground: CSSVarString;
+    };
+    borderRadius: Record<Radius, CSSVarString>;
+};
+declare function useColorMode(): ColorMode;
+declare function useXUITheme(): HybridXUITheme;
+declare function useXUIColors(): HybridXUITheme['colors'];
+declare function useXUIPalette(): HybridXUITheme['palette'];
+declare function useBorderRadiusStyles(radius: Radius): {
+    borderRadius: string;
+};
+
+export { type Radius as R, type Size as S, XUIProvider as X, type XUIProviderProps as a, type XUIVariables as b, useXUITheme as c, useXUIColors as d, useXUIPalette as e, useBorderRadiusStyles as f, type SizeValues as g, type RadiusValues as h, useColorMode as u };

package/dist/index-CMptPfU-.d.ts

@@ -0,0 +1,51 @@
+import React, { ReactNode, CSSProperties } from 'react';
+
+type ThemeColor = 'primary' | 'secondary' | 'tertiary' | 'danger' | 'warning' | 'success' | 'default';
+
+type AlertVariant = 'solid' | 'bordered' | 'flat' | 'faded';
+type AlertRadius = 'none' | 'sm' | 'md' | 'lg' | 'full';
+type AlertEvents = {
+    onClose?: () => void;
+    onVisibleChange?: (isVisible: boolean) => void;
+};
+type AlertCustomAppearance = {
+    container?: CSSProperties;
+    title?: CSSProperties;
+    description?: CSSProperties;
+};
+type AlertProps = {
+    title?: ReactNode;
+    description?: ReactNode;
+    icon?: ReactNode;
+    /**
+     * @default 'default'
+     */
+    themeColor?: ThemeColor;
+    /**
+     * @default 'flat'
+     */
+    variant?: AlertVariant;
+    /**
+     * @default 'md'
+     */
+    radius?: AlertRadius;
+    /**
+     * @default false
+     */
+    isClosable?: boolean;
+    /**
+     * @default false
+     */
+    hideIcon?: boolean;
+    closeButton?: ReactNode;
+    /**
+     * @default true
+     */
+    isVisible?: boolean;
+    customAppearance?: AlertCustomAppearance;
+    children?: ReactNode;
+} & AlertEvents;
+
+declare const Alert: React.FC<AlertProps>;
+
+export { Alert as A, type ThemeColor as T, type AlertProps as a, type AlertVariant as b, type AlertRadius as c };

package/dist/index.css

@@ -0,0 +1,305 @@
+/* XUI Design System
+ * Import this file once in your app's root CSS:
+ *   @import "@xaui/hybrid/dist/index.css";
+ *
+ * All --xui-* variables can be overridden to customize the theme.
+ */
+
+:root {
+  /* Primary */
+  --xui-primary: #6b21a8;
+  --xui-primary-fg: #ffffff;
+  --xui-primary-bg: #e9d5ff;
+
+  /* Secondary */
+  --xui-secondary: #71717a;
+  --xui-secondary-fg: #ffffff;
+  --xui-secondary-bg: #e4e4e7;
+
+  /* Tertiary */
+  --xui-tertiary: #78716c;
+  --xui-tertiary-fg: #ffffff;
+  --xui-tertiary-bg: #f5f5f4;
+
+  /* Danger */
+  --xui-danger: #b91c1c;
+  --xui-danger-fg: #ffffff;
+  --xui-danger-bg: #fecdd3;
+
+  /* Warning */
+  --xui-warning: #d97706;
+  --xui-warning-fg: #111827;
+  --xui-warning-bg: #fef3c7;
+
+  /* Success */
+  --xui-success: #16a34a;
+  --xui-success-fg: #ffffff;
+  --xui-success-bg: #dcfce7;
+
+  /* Default */
+  --xui-default: #18181b;
+  --xui-default-fg: #ffffff;
+  --xui-default-bg: #e4e4e7;
+
+  /* Global */
+  --xui-background: #ffffff;
+  --xui-foreground: #18181b;
+
+  /* Spacing */
+  --xui-spacing-xs: 4px;
+  --xui-spacing-sm: 8px;
+  --xui-spacing-md: 16px;
+  --xui-spacing-lg: 24px;
+  --xui-spacing-xl: 32px;
+  --xui-spacing-2xl: 48px;
+  --xui-spacing-3xl: 64px;
+
+  /* Border radius */
+  --xui-radius-none: 0px;
+  --xui-radius-sm: 4px;
+  --xui-radius-md: 8px;
+  --xui-radius-lg: 12px;
+  --xui-radius-xl: 16px;
+  --xui-radius-2xl: 24px;
+  --xui-radius-3xl: 32px;
+  --xui-radius-full: 9999px;
+
+  /* Border width */
+  --xui-border-none: 0px;
+  --xui-border-xs: 0.5px;
+  --xui-border-sm: 1px;
+  --xui-border-md: 1.75px;
+  --xui-border-lg: 2.5px;
+  --xui-border-xl: 3px;
+
+  /* Font sizes */
+  --xui-text-xs: 12px;
+  --xui-text-sm: 14px;
+  --xui-text-md: 16px;
+  --xui-text-lg: 18px;
+  --xui-text-xl: 20px;
+  --xui-text-2xl: 24px;
+  --xui-text-3xl: 30px;
+  --xui-text-4xl: 36px;
+
+  /* Font weights */
+  --xui-font-light: 300;
+  --xui-font-normal: 400;
+  --xui-font-medium: 500;
+  --xui-font-semibold: 600;
+  --xui-font-bold: 700;
+  --xui-font-extrabold: 800;
+
+  /* Component sizes */
+  --xui-size-xs: 38px;
+  --xui-size-sm: 42px;
+  --xui-size-md: 46px;
+  --xui-size-lg: 50px;
+}
+
+/* Dark mode — toggled by setting data-color-scheme on <html> */
+[data-color-scheme='dark'] {
+  --xui-primary: #d8b4fe;
+  --xui-primary-fg: #3b0764;
+  --xui-primary-bg: #4c1d95;
+
+  --xui-secondary: #d4d4d8;
+  --xui-secondary-fg: #3f3f46;
+  --xui-secondary-bg: #52525b;
+
+  --xui-tertiary: #fecaca;
+  --xui-tertiary-fg: #500724;
+  --xui-tertiary-bg: #57534e;
+
+  --xui-danger: #fca5a5;
+  --xui-danger-fg: #4c0519;
+  --xui-danger-bg: #991b1b;
+
+  --xui-warning: #fbbf24;
+  --xui-warning-fg: #f9fafb;
+  --xui-warning-bg: #78350f;
+
+  --xui-success: #4ade80;
+  --xui-success-fg: #f9fafb;
+  --xui-success-bg: #14532d;
+
+  --xui-default: #e7e5e4;
+  --xui-default-fg: #18181b;
+  --xui-default-bg: #3f3f46;
+
+  --xui-background: #18181b;
+  --xui-foreground: #e7e5e4;
+}
+
+/* SSR/no-JS fallback: honor OS dark mode until data-color-scheme is set */
+@media (prefers-color-scheme: dark) {
+  :root:not([data-color-scheme]) {
+    --xui-primary: #d8b4fe;
+    --xui-primary-fg: #3b0764;
+    --xui-primary-bg: #4c1d95;
+
+    --xui-secondary: #d4d4d8;
+    --xui-secondary-fg: #3f3f46;
+    --xui-secondary-bg: #52525b;
+
+    --xui-tertiary: #fecaca;
+    --xui-tertiary-fg: #500724;
+    --xui-tertiary-bg: #57534e;
+
+    --xui-danger: #fca5a5;
+    --xui-danger-fg: #4c0519;
+    --xui-danger-bg: #991b1b;
+
+    --xui-warning: #fbbf24;
+    --xui-warning-fg: #f9fafb;
+    --xui-warning-bg: #78350f;
+
+    --xui-success: #4ade80;
+    --xui-success-fg: #f9fafb;
+    --xui-success-bg: #14532d;
+
+    --xui-default: #e7e5e4;
+    --xui-default-fg: #18181b;
+    --xui-default-bg: #3f3f46;
+
+    --xui-background: #18181b;
+    --xui-foreground: #e7e5e4;
+  }
+}
+
+/* Animations CSS — used via data-xui-state attribute */
+@keyframes xui-fade-in {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes xui-fade-out {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+}
+
+[data-xui-state='open'] {
+  animation: xui-fade-in 250ms ease forwards;
+}
+
+[data-xui-state='closed'] {
+  animation: xui-fade-out 250ms ease forwards;
+}
+
+/* Alert mode tokens derived from selected --xui-alert-* role vars */
+.xui-alert {
+  --xui-alert-solid-bg: var(--xui-alert-main);
+  --xui-alert-solid-text: #ffffff;
+  --xui-alert-solid-icon-bg: color-mix(in srgb, #ffffff 16%, transparent);
+  --xui-alert-flat-bg: var(--xui-alert-bg-base);
+}
+
+[data-color-scheme='dark'] .xui-alert {
+  --xui-alert-solid-bg: var(--xui-alert-bg-base);
+  --xui-alert-solid-text: var(--xui-alert-main);
+  --xui-alert-solid-icon-bg: color-mix(in srgb, var(--xui-alert-main) 16%, transparent);
+  --xui-alert-flat-bg: color-mix(in srgb, var(--xui-alert-bg-base) 50%, transparent);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-color-scheme]) .xui-alert {
+    --xui-alert-solid-bg: var(--xui-alert-bg-base);
+    --xui-alert-solid-text: var(--xui-alert-main);
+    --xui-alert-solid-icon-bg: color-mix(in srgb, var(--xui-alert-main) 16%, transparent);
+    --xui-alert-flat-bg: color-mix(in srgb, var(--xui-alert-bg-base) 50%, transparent);
+  }
+}
+
+/* Tailwind v4 — register XUI tokens as utilities via @theme inline.
+ * Colors become: bg-primary, text-primary-fg, border-danger, etc.
+ * Spacing becomes: p-xui-md, m-xui-lg, gap-xui-sm, etc.
+ * Radius becomes: rounded-xui-md, rounded-xui-full, etc.
+ */
+@theme inline {
+  /* Colors */
+  --color-primary: var(--xui-primary);
+  --color-primary-fg: var(--xui-primary-fg);
+  --color-primary-bg: var(--xui-primary-bg);
+
+  --color-secondary: var(--xui-secondary);
+  --color-secondary-fg: var(--xui-secondary-fg);
+  --color-secondary-bg: var(--xui-secondary-bg);
+
+  --color-tertiary: var(--xui-tertiary);
+  --color-tertiary-fg: var(--xui-tertiary-fg);
+  --color-tertiary-bg: var(--xui-tertiary-bg);
+
+  --color-danger: var(--xui-danger);
+  --color-danger-fg: var(--xui-danger-fg);
+  --color-danger-bg: var(--xui-danger-bg);
+
+  --color-warning: var(--xui-warning);
+  --color-warning-fg: var(--xui-warning-fg);
+  --color-warning-bg: var(--xui-warning-bg);
+
+  --color-success: var(--xui-success);
+  --color-success-fg: var(--xui-success-fg);
+  --color-success-bg: var(--xui-success-bg);
+
+  --color-default: var(--xui-default);
+  --color-default-fg: var(--xui-default-fg);
+  --color-default-bg: var(--xui-default-bg);
+
+  --color-xui-background: var(--xui-background);
+  --color-xui-foreground: var(--xui-foreground);
+
+  /* Spacing */
+  --spacing-xui-xs: var(--xui-spacing-xs);
+  --spacing-xui-sm: var(--xui-spacing-sm);
+  --spacing-xui-md: var(--xui-spacing-md);
+  --spacing-xui-lg: var(--xui-spacing-lg);
+  --spacing-xui-xl: var(--xui-spacing-xl);
+  --spacing-xui-2xl: var(--xui-spacing-2xl);
+  --spacing-xui-3xl: var(--xui-spacing-3xl);
+
+  /* Border radius */
+  --radius-xui-none: var(--xui-radius-none);
+  --radius-xui-sm: var(--xui-radius-sm);
+  --radius-xui-md: var(--xui-radius-md);
+  --radius-xui-lg: var(--xui-radius-lg);
+  --radius-xui-xl: var(--xui-radius-xl);
+  --radius-xui-2xl: var(--xui-radius-2xl);
+  --radius-xui-3xl: var(--xui-radius-3xl);
+  --radius-xui-full: var(--xui-radius-full);
+
+  /* Font sizes */
+  --text-xui-xs: var(--xui-text-xs);
+  --text-xui-sm: var(--xui-text-sm);
+  --text-xui-md: var(--xui-text-md);
+  --text-xui-lg: var(--xui-text-lg);
+  --text-xui-xl: var(--xui-text-xl);
+  --text-xui-2xl: var(--xui-text-2xl);
+  --text-xui-3xl: var(--xui-text-3xl);
+  --text-xui-4xl: var(--xui-text-4xl);
+
+  /* Font weights */
+  --font-weight-xui-light: var(--xui-font-light);
+  --font-weight-xui-normal: var(--xui-font-normal);
+  --font-weight-xui-medium: var(--xui-font-medium);
+  --font-weight-xui-semibold: var(--xui-font-semibold);
+  --font-weight-xui-bold: var(--xui-font-bold);
+  --font-weight-xui-extrabold: var(--xui-font-extrabold);
+
+  /* Component sizes (as spacing — usable as w-xui-size-md, h-xui-size-lg, etc.) */
+  --spacing-xui-size-xs: var(--xui-size-xs);
+  --spacing-xui-size-sm: var(--xui-size-sm);
+  --spacing-xui-size-md: var(--xui-size-md);
+  --spacing-xui-size-lg: var(--xui-size-lg);
+}

package/dist/index.d.ts

@@ -1,2 +1,13 @@
+export { R as Radius, h as RadiusValues, S as Size, g as SizeValues, X as XUIProvider, a as XUIProviderProps, b as XUIVariables, f as useBorderRadiusStyles, u as useColorMode, d as useXUIColors, e as useXUIPalette, c as useXUITheme } from './index-5BCfEjU-.js';
+import { ClassValue } from 'clsx';
+export { A as Alert, a as AlertProps, c as AlertRadius, b as AlertVariant, T as ThemeColor } from './index-CMptPfU-.js';
+import 'react/jsx-runtime';
+import 'react';
 
-export {  }
+/**
+ * Merges class names using clsx and tailwind-merge.
+ * Useful for handling conditional classes and resolving Tailwind conflicts.
+ */
+declare function cn(...inputs: ClassValue[]): string;
+
+export { cn };

package/dist/index.js

@@ -0,0 +1,28 @@
+import {
+  XUIProvider,
+  useBorderRadiusStyles,
+  useColorMode,
+  useXUIColors,
+  useXUIPalette,
+  useXUITheme
+} from "./chunk-YJF3QRMW.js";
+import {
+  Alert
+} from "./chunk-7HVBAJHB.js";
+
+// src/utils/cn.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+export {
+  Alert,
+  XUIProvider,
+  cn,
+  useBorderRadiusStyles,
+  useColorMode,
+  useXUIColors,
+  useXUIPalette,
+  useXUITheme
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@xaui/hybrid",
-  "version": "0.0.8",
-  "description": "Flutter-inspired React UI components for web and mobile webview applications with Framer Motion animations and Tailwind CSS styling",
+  "version": "0.0.9",
+  "description": "Flutter-inspired React UI components for web and mobile webview with Tailwind CSS styling and CSS animations",
   "keywords": [
     "react",
     "web",
@@ -10,7 +10,6 @@
     "ui",
     "components",
     "flutter",
-    "framer-motion",
     "tailwindcss",
     "xaui"
   ],
@@ -20,28 +19,15 @@
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/index.js",
-      "require": "./dist/index.js"
+      "import": "./dist/index.js"
     },
     "./core": {
       "types": "./dist/core/index.d.ts",
-      "import": "./dist/core/index.js",
-      "require": "./dist/core/index.js"
+      "import": "./dist/core/index.js"
     },
-    "./button": {
-      "types": "./dist/button/index.d.ts",
-      "import": "./dist/button/index.js",
-      "require": "./dist/button/index.js"
-    },
-    "./progress": {
-      "types": "./dist/progress/index.d.ts",
-      "import": "./dist/progress/index.js",
-      "require": "./dist/progress/index.js"
-    },
-    "./indicator": {
-      "types": "./dist/indicator/index.d.ts",
-      "import": "./dist/indicator/index.js",
-      "require": "./dist/indicator/index.js"
+    "./alert": {
+      "types": "./dist/alert/index.d.ts",
+      "import": "./dist/alert/index.js"
     },
     "./dist/index.css": "./dist/index.css"
   },
@@ -68,7 +54,6 @@
   "devDependencies": {
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",
-    "esbuild-sass-plugin": "^3.6.0",
     "react": "19.1.0",
     "react-dom": "19.1.0",
     "tsup": "^8.5.1",

package/dist/core/index.cjs

@@ -1,125 +0,0 @@
-"use strict";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/core/index.ts
-var core_exports = {};
-__export(core_exports, {
-  XUIProvider: () => XUIProvider,
-  useColorMode: () => useColorMode,
-  useXUIColors: () => useXUIColors,
-  useXUITheme: () => useXUITheme
-});
-module.exports = __toCommonJS(core_exports);
-
-// src/core/theme-context.tsx
-var import_react2 = __toESM(require("react"), 1);
-
-// src/core/theme-hooks.ts
-var import_react = require("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] = (0, import_react.useState)(() => getWebColorMode());
-  (0, import_react.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 = (0, import_react.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
-var import_theme = require("@xaui/core/theme");
-var import_jsx_runtime = require("react/jsx-runtime");
-var XUIThemeContext = (0, import_react2.createContext)(null);
-function XUIProvider({
-  children,
-  theme: lightTheme,
-  darkTheme
-}) {
-  const colorScheme = useColorMode();
-  const theme = import_react2.default.useMemo(() => {
-    if (!darkTheme && !lightTheme) return import_theme.defaultTheme;
-    const activeTheme = colorScheme === "dark" && darkTheme ? darkTheme : lightTheme;
-    if (!activeTheme) return import_theme.defaultTheme;
-    return {
-      ...import_theme.defaultTheme,
-      ...activeTheme,
-      colors: {
-        ...import_theme.defaultTheme.colors,
-        ...activeTheme.colors
-      },
-      fontFamilies: {
-        ...import_theme.defaultTheme.fontFamilies,
-        ...activeTheme.fontFamilies
-      },
-      fontSizes: {
-        ...import_theme.defaultTheme.fontSizes,
-        ...activeTheme.fontSizes
-      }
-    };
-  }, [lightTheme, darkTheme, colorScheme]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(XUIThemeContext.Provider, { value: theme, children });
-}
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  XUIProvider,
-  useColorMode,
-  useXUIColors,
-  useXUITheme
-});

package/dist/core/index.d.cts

@@ -1,20 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ReactNode } from 'react';
-import { XUITheme } from '@xaui/core/theme';
-
-type DeepPartial<T> = {
-    [P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P];
-};
-interface XUIProviderProps {
-    children: ReactNode;
-    theme?: DeepPartial<XUITheme>;
-    darkTheme?: DeepPartial<XUITheme>;
-}
-declare function XUIProvider({ children, theme: lightTheme, darkTheme, }: XUIProviderProps): react_jsx_runtime.JSX.Element;
-
-type ColorMode = 'light' | 'dark';
-declare function useColorMode(): ColorMode;
-declare function useXUITheme(): XUITheme;
-declare function useXUIColors(): XUITheme['colors'];
-
-export { XUIProvider, useColorMode, useXUIColors, useXUITheme };

package/dist/index.cjs

@@ -1,18 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/index.ts
-var src_exports = {};
-module.exports = __toCommonJS(src_exports);

package/dist/index.d.cts

@@ -1,2 +0,0 @@
-
-export {  }