@xaui/hybrid 0.0.2

package/dist/progress/index.cjs

@@ -0,0 +1,292 @@
+"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/components/progress/index.ts
+var progress_exports = {};
+__export(progress_exports, {
+  Progress: () => Progress
+});
+module.exports = __toCommonJS(progress_exports);
+
+// src/core/theme-context.tsx
+var import_react2 = __toESM(require("react"), 1);
+
+// src/core/theme-hooks.ts
+var import_react = require("react");
+function useXUITheme() {
+  const theme = (0, import_react.useContext)(XUIThemeContext);
+  if (!theme) {
+    throw new Error("useXUITheme must be used within XUIProvider");
+  }
+  return theme;
+}
+
+// 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);
+
+// src/components/progress/circular-progress-indicator.tsx
+var import_framer_motion = require("framer-motion");
+
+// src/components/progress/progress.hook.ts
+var import_react3 = require("react");
+var MIN_VALUE = 0;
+var MAX_VALUE = 1;
+var clampProgress = (value) => Math.max(MIN_VALUE, Math.min(MAX_VALUE, value));
+var useProgressAnimation = (value, disableAnimation) => {
+  const [progressValue, setProgressValue] = (0, import_react3.useState)(() => clampProgress(value));
+  (0, import_react3.useEffect)(() => {
+    setProgressValue(clampProgress(value));
+  }, [value, disableAnimation]);
+  return progressValue;
+};
+
+// src/components/progress/progress.style.ts
+var import_tailwind_variants = require("tailwind-variants");
+var progressStyles = (0, import_tailwind_variants.tv)({
+  slots: {
+    base: "relative flex items-center justify-center overflow-hidden",
+    track: "overflow-hidden",
+    indicator: ""
+  },
+  variants: {
+    variant: {
+      linear: {
+        base: "w-full",
+        track: "w-full h-full",
+        indicator: "h-full bg-blue-400 transition-all"
+      },
+      circular: {
+        base: "inline-flex shrink-0",
+        track: "fill-none w-auto h-auto",
+        indicator: "fill-none w-auto h-auto"
+      }
+    }
+  },
+  defaultVariants: {
+    variant: "linear"
+  }
+});
+
+// src/components/progress/circular-progress-indicator.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var CircularProgressIndicator = ({
+  value,
+  size = 40,
+  themeColor = "primary",
+  color,
+  backgroundColor,
+  borderRadius,
+  disableAnimation = false,
+  className
+}) => {
+  const { base, track, indicator } = progressStyles({ variant: "circular" });
+  const theme = useXUITheme();
+  const colorScheme = theme.colors[themeColor];
+  const resolvedColor = color ?? colorScheme.main;
+  const resolvedBackground = backgroundColor ?? colorScheme.background;
+  const progressValue = useProgressAnimation(value, disableAnimation);
+  const strokeWidth = size * 0.1;
+  const center = size / 2;
+  const radius = (size - strokeWidth) / 2;
+  const circumference = 2 * Math.PI * radius;
+  const strokeCap = borderRadius && borderRadius > 0 ? "round" : "butt";
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "div",
+    {
+      className: base({ className }),
+      style: {
+        width: size,
+        height: size,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center"
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+        "svg",
+        {
+          width: size,
+          height: size,
+          viewBox: `0 0 ${size} ${size}`,
+          style: {
+            transform: "rotate(-90deg)",
+            overflow: "visible",
+            transformOrigin: "center"
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              "circle",
+              {
+                cx: center,
+                cy: center,
+                r: radius,
+                fill: "none",
+                className: track(),
+                stroke: resolvedBackground,
+                strokeWidth
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              import_framer_motion.motion.circle,
+              {
+                cx: center,
+                cy: center,
+                r: radius,
+                fill: "none",
+                className: indicator(),
+                stroke: resolvedColor,
+                strokeWidth,
+                strokeLinecap: strokeCap,
+                strokeDasharray: circumference,
+                initial: disableAnimation ? false : { strokeDashoffset: circumference },
+                animate: { strokeDashoffset: circumference * (1 - progressValue) },
+                transition: disableAnimation ? { duration: 0 } : { duration: 0.5, ease: [0, 0, 0.2, 1] }
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
+
+// src/components/progress/linear-progress-indicator.tsx
+var import_framer_motion2 = require("framer-motion");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var LinearProgressIndicator = ({
+  value,
+  size = 4,
+  color,
+  backgroundColor,
+  borderRadius,
+  disableAnimation = false,
+  className
+}) => {
+  const { track, indicator } = progressStyles({ variant: "linear" });
+  const progressValue = useProgressAnimation(value, disableAnimation);
+  const radius = Math.max(0, Math.min(size / 2, borderRadius ?? 0));
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "div",
+    {
+      className: track({ className }),
+      style: {
+        height: size,
+        backgroundColor,
+        borderRadius: radius
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        import_framer_motion2.motion.div,
+        {
+          className: indicator(),
+          initial: disableAnimation ? false : { width: 0 },
+          animate: { width: `${progressValue * 100}%` },
+          transition: disableAnimation ? { duration: 0 } : { duration: 0.5, ease: [0, 0, 0.2, 1] },
+          style: {
+            backgroundColor: color,
+            borderRadius: radius,
+            height: size
+          }
+        }
+      )
+    }
+  );
+};
+
+// src/components/progress/progress.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var Progress = (props) => {
+  const {
+    variant = "linear",
+    themeColor = "primary",
+    value,
+    color,
+    backgroundColor,
+    size,
+    disableAnimation = false,
+    className,
+    borderRadius
+  } = props;
+  const theme = useXUITheme();
+  const colorScheme = theme.colors[themeColor];
+  const mainColor = color ?? colorScheme.main;
+  const trackColor = backgroundColor ?? colorScheme.background;
+  const clampedValue = clampProgress(value);
+  const ariaValue = clampedValue * 100;
+  if (variant === "circular") {
+    const circleSize = size ?? 40;
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "div",
+      {
+        role: "progressbar",
+        "aria-valuemin": 0,
+        "aria-valuemax": 100,
+        "aria-valuenow": ariaValue,
+        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          CircularProgressIndicator,
+          {
+            size: circleSize,
+            color: mainColor,
+            backgroundColor: trackColor,
+            value: clampedValue,
+            borderRadius,
+            disableAnimation,
+            className
+          }
+        )
+      }
+    );
+  }
+  const linearSize = size ?? 4;
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    "div",
+    {
+      role: "progressbar",
+      "aria-valuemin": 0,
+      "aria-valuemax": 100,
+      "aria-valuenow": ariaValue,
+      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        LinearProgressIndicator,
+        {
+          size: linearSize,
+          color: mainColor,
+          backgroundColor: trackColor,
+          value: clampedValue,
+          borderRadius,
+          disableAnimation,
+          className
+        }
+      )
+    }
+  );
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Progress
+});

package/dist/progress/index.d.cts

@@ -0,0 +1,51 @@
+import React from 'react';
+import { T as ThemeColor } from '../theme-qvIXI4kF.cjs';
+
+type ProgressVariant = 'linear' | 'circular';
+type ProgressIndicatorProps = {
+    /**
+     * The variant of the progress indicator.
+     * @default 'linear'
+     */
+    variant?: ProgressVariant;
+    /**
+     * The size of the progress indicator (height for linear, diameter for circular).
+     * @default 4 for linear, 40 for circular
+     */
+    size?: number;
+    /**
+     * The theme color of the progress indicator.
+     * @default 'primary'
+     */
+    themeColor?: ThemeColor;
+    /**
+     * The custom color of the progress indicator.
+     * Overrides themeColor.
+     */
+    color?: string;
+    /**
+     * The background color of the track.
+     */
+    backgroundColor?: string;
+    /**
+     * The current value of the progress bar (0 to 1).
+     */
+    value: number;
+    /**
+     * Whether to disable the animation.
+     * @default false
+     */
+    disableAnimation?: boolean;
+    /**
+     * The border radius of the indicator and track.
+     */
+    borderRadius?: number;
+    /**
+     * Custom class names for the component.
+     */
+    className?: string;
+};
+
+declare const Progress: React.FC<ProgressIndicatorProps>;
+
+export { Progress, type ProgressIndicatorProps };

package/dist/progress/index.d.ts

@@ -0,0 +1,51 @@
+import React from 'react';
+import { T as ThemeColor } from '../theme-qvIXI4kF.js';
+
+type ProgressVariant = 'linear' | 'circular';
+type ProgressIndicatorProps = {
+    /**
+     * The variant of the progress indicator.
+     * @default 'linear'
+     */
+    variant?: ProgressVariant;
+    /**
+     * The size of the progress indicator (height for linear, diameter for circular).
+     * @default 4 for linear, 40 for circular
+     */
+    size?: number;
+    /**
+     * The theme color of the progress indicator.
+     * @default 'primary'
+     */
+    themeColor?: ThemeColor;
+    /**
+     * The custom color of the progress indicator.
+     * Overrides themeColor.
+     */
+    color?: string;
+    /**
+     * The background color of the track.
+     */
+    backgroundColor?: string;
+    /**
+     * The current value of the progress bar (0 to 1).
+     */
+    value: number;
+    /**
+     * Whether to disable the animation.
+     * @default false
+     */
+    disableAnimation?: boolean;
+    /**
+     * The border radius of the indicator and track.
+     */
+    borderRadius?: number;
+    /**
+     * Custom class names for the component.
+     */
+    className?: string;
+};
+
+declare const Progress: React.FC<ProgressIndicatorProps>;
+
+export { Progress, type ProgressIndicatorProps };

package/dist/progress/index.js

@@ -0,0 +1,241 @@
+import {
+  useXUITheme
+} from "../chunk-4GTYR4N2.js";
+
+// src/components/progress/circular-progress-indicator.tsx
+import { motion } from "framer-motion";
+
+// src/components/progress/progress.hook.ts
+import { useEffect, useState } from "react";
+var MIN_VALUE = 0;
+var MAX_VALUE = 1;
+var clampProgress = (value) => Math.max(MIN_VALUE, Math.min(MAX_VALUE, value));
+var useProgressAnimation = (value, disableAnimation) => {
+  const [progressValue, setProgressValue] = useState(() => clampProgress(value));
+  useEffect(() => {
+    setProgressValue(clampProgress(value));
+  }, [value, disableAnimation]);
+  return progressValue;
+};
+
+// src/components/progress/progress.style.ts
+import { tv } from "tailwind-variants";
+var progressStyles = tv({
+  slots: {
+    base: "relative flex items-center justify-center overflow-hidden",
+    track: "overflow-hidden",
+    indicator: ""
+  },
+  variants: {
+    variant: {
+      linear: {
+        base: "w-full",
+        track: "w-full h-full",
+        indicator: "h-full bg-blue-400 transition-all"
+      },
+      circular: {
+        base: "inline-flex shrink-0",
+        track: "fill-none w-auto h-auto",
+        indicator: "fill-none w-auto h-auto"
+      }
+    }
+  },
+  defaultVariants: {
+    variant: "linear"
+  }
+});
+
+// src/components/progress/circular-progress-indicator.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var CircularProgressIndicator = ({
+  value,
+  size = 40,
+  themeColor = "primary",
+  color,
+  backgroundColor,
+  borderRadius,
+  disableAnimation = false,
+  className
+}) => {
+  const { base, track, indicator } = progressStyles({ variant: "circular" });
+  const theme = useXUITheme();
+  const colorScheme = theme.colors[themeColor];
+  const resolvedColor = color ?? colorScheme.main;
+  const resolvedBackground = backgroundColor ?? colorScheme.background;
+  const progressValue = useProgressAnimation(value, disableAnimation);
+  const strokeWidth = size * 0.1;
+  const center = size / 2;
+  const radius = (size - strokeWidth) / 2;
+  const circumference = 2 * Math.PI * radius;
+  const strokeCap = borderRadius && borderRadius > 0 ? "round" : "butt";
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: base({ className }),
+      style: {
+        width: size,
+        height: size,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center"
+      },
+      children: /* @__PURE__ */ jsxs(
+        "svg",
+        {
+          width: size,
+          height: size,
+          viewBox: `0 0 ${size} ${size}`,
+          style: {
+            transform: "rotate(-90deg)",
+            overflow: "visible",
+            transformOrigin: "center"
+          },
+          children: [
+            /* @__PURE__ */ jsx(
+              "circle",
+              {
+                cx: center,
+                cy: center,
+                r: radius,
+                fill: "none",
+                className: track(),
+                stroke: resolvedBackground,
+                strokeWidth
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              motion.circle,
+              {
+                cx: center,
+                cy: center,
+                r: radius,
+                fill: "none",
+                className: indicator(),
+                stroke: resolvedColor,
+                strokeWidth,
+                strokeLinecap: strokeCap,
+                strokeDasharray: circumference,
+                initial: disableAnimation ? false : { strokeDashoffset: circumference },
+                animate: { strokeDashoffset: circumference * (1 - progressValue) },
+                transition: disableAnimation ? { duration: 0 } : { duration: 0.5, ease: [0, 0, 0.2, 1] }
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
+
+// src/components/progress/linear-progress-indicator.tsx
+import { motion as motion2 } from "framer-motion";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var LinearProgressIndicator = ({
+  value,
+  size = 4,
+  color,
+  backgroundColor,
+  borderRadius,
+  disableAnimation = false,
+  className
+}) => {
+  const { track, indicator } = progressStyles({ variant: "linear" });
+  const progressValue = useProgressAnimation(value, disableAnimation);
+  const radius = Math.max(0, Math.min(size / 2, borderRadius ?? 0));
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      className: track({ className }),
+      style: {
+        height: size,
+        backgroundColor,
+        borderRadius: radius
+      },
+      children: /* @__PURE__ */ jsx2(
+        motion2.div,
+        {
+          className: indicator(),
+          initial: disableAnimation ? false : { width: 0 },
+          animate: { width: `${progressValue * 100}%` },
+          transition: disableAnimation ? { duration: 0 } : { duration: 0.5, ease: [0, 0, 0.2, 1] },
+          style: {
+            backgroundColor: color,
+            borderRadius: radius,
+            height: size
+          }
+        }
+      )
+    }
+  );
+};
+
+// src/components/progress/progress.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var Progress = (props) => {
+  const {
+    variant = "linear",
+    themeColor = "primary",
+    value,
+    color,
+    backgroundColor,
+    size,
+    disableAnimation = false,
+    className,
+    borderRadius
+  } = props;
+  const theme = useXUITheme();
+  const colorScheme = theme.colors[themeColor];
+  const mainColor = color ?? colorScheme.main;
+  const trackColor = backgroundColor ?? colorScheme.background;
+  const clampedValue = clampProgress(value);
+  const ariaValue = clampedValue * 100;
+  if (variant === "circular") {
+    const circleSize = size ?? 40;
+    return /* @__PURE__ */ jsx3(
+      "div",
+      {
+        role: "progressbar",
+        "aria-valuemin": 0,
+        "aria-valuemax": 100,
+        "aria-valuenow": ariaValue,
+        children: /* @__PURE__ */ jsx3(
+          CircularProgressIndicator,
+          {
+            size: circleSize,
+            color: mainColor,
+            backgroundColor: trackColor,
+            value: clampedValue,
+            borderRadius,
+            disableAnimation,
+            className
+          }
+        )
+      }
+    );
+  }
+  const linearSize = size ?? 4;
+  return /* @__PURE__ */ jsx3(
+    "div",
+    {
+      role: "progressbar",
+      "aria-valuemin": 0,
+      "aria-valuemax": 100,
+      "aria-valuenow": ariaValue,
+      children: /* @__PURE__ */ jsx3(
+        LinearProgressIndicator,
+        {
+          size: linearSize,
+          color: mainColor,
+          backgroundColor: trackColor,
+          value: clampedValue,
+          borderRadius,
+          disableAnimation,
+          className
+        }
+      )
+    }
+  );
+};
+export {
+  Progress
+};

package/dist/theme-qvIXI4kF.d.cts

@@ -0,0 +1,3 @@
+type ThemeColor = 'primary' | 'secondary' | 'tertiary' | 'danger' | 'warning' | 'success' | 'default';
+
+export type { ThemeColor as T };

package/dist/theme-qvIXI4kF.d.ts

@@ -0,0 +1,3 @@
+type ThemeColor = 'primary' | 'secondary' | 'tertiary' | 'danger' | 'warning' | 'success' | 'default';
+
+export type { ThemeColor as T };