@renge-ui/react 1.0.0

package/dist/index.mjs

@@ -0,0 +1,1349 @@
+// src/provider.tsx
+import { useMemo, useInsertionEffect } from "react";
+import { createRengeTheme } from "@renge-ui/tokens";
+
+// src/context.ts
+import { createContext } from "react";
+var RengeContext = createContext(null);
+
+// src/hooks/useRenge.ts
+import { useContext } from "react";
+function useRenge() {
+  const context = useContext(RengeContext);
+  if (!context) {
+    throw new Error("useRenge must be used within a RengeProvider");
+  }
+  return context;
+}
+
+// src/provider.tsx
+import { jsx } from "react/jsx-runtime";
+function RengeProvider({
+  children,
+  config: {
+    baseUnit,
+    typeBase,
+    scaleRatio,
+    profile,
+    variance,
+    varianceSeed,
+    includeReset,
+    selector
+  } = {},
+  injectCSS = true
+}) {
+  const theme = useMemo(
+    () => createRengeTheme({ baseUnit, typeBase, scaleRatio, profile, variance, varianceSeed, includeReset, selector }),
+    [baseUnit, typeBase, scaleRatio, profile, variance, varianceSeed, includeReset, selector]
+  );
+  useInsertionEffect(() => {
+    if (!injectCSS || typeof document === "undefined") return;
+    const styleId = "renge-theme";
+    let styleEl = document.getElementById(styleId);
+    if (!styleEl) {
+      styleEl = document.createElement("style");
+      styleEl.id = styleId;
+      document.head.appendChild(styleEl);
+    }
+    styleEl.textContent = theme.css;
+  }, [theme.css, injectCSS]);
+  const value = useMemo(() => ({
+    theme,
+    profile: profile ?? "ocean"
+  }), [theme, profile]);
+  return /* @__PURE__ */ jsx(RengeContext.Provider, { value, children });
+}
+function useRengeTheme(config) {
+  return useMemo(() => createRengeTheme(config), [config]);
+}
+
+// src/components/Stack.tsx
+import { forwardRef } from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var Stack = forwardRef(
+  function Stack2({
+    gap = "3",
+    direction = "vertical",
+    align = "stretch",
+    justify = "start",
+    as: Component = "div",
+    style,
+    children,
+    ...props
+  }, ref) {
+    const alignMap = {
+      start: "flex-start",
+      center: "center",
+      end: "flex-end",
+      stretch: "stretch"
+    };
+    const justifyMap = {
+      start: "flex-start",
+      center: "center",
+      end: "flex-end",
+      between: "space-between",
+      around: "space-around"
+    };
+    return /* @__PURE__ */ jsx2(
+      Component,
+      {
+        ref,
+        style: {
+          display: "flex",
+          flexDirection: direction === "vertical" ? "column" : "row",
+          gap: `var(--renge-space-${gap})`,
+          alignItems: alignMap[align],
+          justifyContent: justifyMap[justify],
+          ...style
+        },
+        ...props,
+        children
+      }
+    );
+  }
+);
+
+// src/components/Grid.tsx
+import { forwardRef as forwardRef2 } from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var Grid = forwardRef2(
+  function Grid2({
+    columns = 1,
+    rows,
+    gap = "3",
+    gapX,
+    gapY,
+    align = "stretch",
+    justify = "stretch",
+    style,
+    children,
+    ...props
+  }, ref) {
+    const getTemplate = (value) => {
+      if (value === void 0) return void 0;
+      if (typeof value === "number") return `repeat(${value}, 1fr)`;
+      return value;
+    };
+    return /* @__PURE__ */ jsx3(
+      "div",
+      {
+        ref,
+        style: {
+          display: "grid",
+          gridTemplateColumns: getTemplate(columns),
+          gridTemplateRows: getTemplate(rows),
+          columnGap: gapX ? `var(--renge-space-${gapX})` : `var(--renge-space-${gap})`,
+          rowGap: gapY ? `var(--renge-space-${gapY})` : `var(--renge-space-${gap})`,
+          alignItems: align,
+          justifyItems: justify,
+          ...style
+        },
+        ...props,
+        children
+      }
+    );
+  }
+);
+
+// src/components/Text.tsx
+import { forwardRef as forwardRef3 } from "react";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var Text = forwardRef3(
+  function Text2({
+    size = "base",
+    color = "fg",
+    weight = "normal",
+    align,
+    animation,
+    as: Component = "span",
+    style,
+    children,
+    ...props
+  }, ref) {
+    const weightMap = {
+      normal: 400,
+      medium: 500,
+      semibold: 600,
+      bold: 700
+    };
+    return /* @__PURE__ */ jsx4(
+      Component,
+      {
+        ref,
+        style: {
+          fontSize: `var(--renge-font-size-${size})`,
+          lineHeight: `var(--renge-line-height-${size})`,
+          color: `var(--renge-color-${color})`,
+          fontWeight: weightMap[weight],
+          textAlign: align,
+          animation: animation ? `var(--renge-animation-${animation})` : void 0,
+          ...style
+        },
+        ...props,
+        children
+      }
+    );
+  }
+);
+
+// src/components/Heading.tsx
+import { forwardRef as forwardRef4 } from "react";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var defaultSizeForLevel = {
+  1: "3xl",
+  2: "2xl",
+  3: "xl",
+  4: "lg",
+  5: "lg",
+  6: "lg"
+};
+var Heading = forwardRef4(
+  function Heading2({
+    level = 2,
+    size,
+    color = "fg",
+    animation,
+    style,
+    children,
+    ...props
+  }, ref) {
+    const Component = `h${level}`;
+    const resolvedSize = size ?? defaultSizeForLevel[level];
+    return /* @__PURE__ */ jsx5(
+      Component,
+      {
+        ref,
+        style: {
+          fontSize: `var(--renge-font-size-${resolvedSize})`,
+          lineHeight: `var(--renge-line-height-${resolvedSize})`,
+          color: `var(--renge-color-${color})`,
+          fontWeight: 600,
+          margin: 0,
+          animation: animation ? `var(--renge-animation-${animation})` : void 0,
+          ...style
+        },
+        ...props,
+        children
+      }
+    );
+  }
+);
+
+// src/components/Card.tsx
+import { forwardRef as forwardRef5 } from "react";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var Card = forwardRef5(
+  function Card2({
+    padding = "4",
+    radius = "3",
+    variant = "elevated",
+    animation,
+    style,
+    children,
+    ...props
+  }, ref) {
+    const variantStyles = {
+      elevated: {
+        backgroundColor: `var(--renge-color-bg)`,
+        boxShadow: "0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06)"
+      },
+      outlined: {
+        backgroundColor: `var(--renge-color-bg)`,
+        border: `1px solid var(--renge-color-border)`
+      },
+      filled: {
+        backgroundColor: `var(--renge-color-bg-subtle)`
+      }
+    };
+    return /* @__PURE__ */ jsx6(
+      "div",
+      {
+        ref,
+        style: {
+          padding: `var(--renge-space-${padding})`,
+          borderRadius: `var(--renge-radius-${radius})`,
+          ...variantStyles[variant],
+          animation: animation ? `var(--renge-animation-${animation})` : void 0,
+          ...style
+        },
+        ...props,
+        children
+      }
+    );
+  }
+);
+
+// src/components/Button.tsx
+import { forwardRef as forwardRef6 } from "react";
+import { jsx as jsx7 } from "react/jsx-runtime";
+var sizeStyles = {
+  sm: {
+    padding: "var(--renge-space-1) var(--renge-space-2)",
+    fontSize: "var(--renge-font-size-sm)"
+  },
+  md: {
+    padding: "var(--renge-space-2) var(--renge-space-4)",
+    fontSize: "var(--renge-font-size-base)"
+  },
+  lg: {
+    padding: "var(--renge-space-3) var(--renge-space-5)",
+    fontSize: "var(--renge-font-size-lg)"
+  }
+};
+var Button = forwardRef6(
+  function Button2({
+    size = "md",
+    variant = "solid",
+    colorScheme = "accent",
+    fullWidth = false,
+    animation,
+    style,
+    children,
+    ...props
+  }, ref) {
+    const getVariantStyles = () => {
+      switch (variant) {
+        case "solid":
+          return {
+            backgroundColor: `var(--renge-color-${colorScheme})`,
+            color: "var(--renge-color-fg-inverse)",
+            border: "none"
+          };
+        case "outline":
+          return {
+            backgroundColor: "transparent",
+            color: `var(--renge-color-${colorScheme})`,
+            border: `1px solid var(--renge-color-${colorScheme})`
+          };
+        case "ghost":
+          return {
+            backgroundColor: "transparent",
+            color: `var(--renge-color-${colorScheme})`,
+            border: "none"
+          };
+      }
+    };
+    return /* @__PURE__ */ jsx7(
+      "button",
+      {
+        ref,
+        style: {
+          ...sizeStyles[size],
+          ...getVariantStyles(),
+          borderRadius: "var(--renge-radius-2)",
+          fontWeight: 500,
+          cursor: "pointer",
+          transition: `all var(--renge-duration-2) var(--renge-easing-ease-out)`,
+          width: fullWidth ? "100%" : void 0,
+          animation: animation ? `var(--renge-animation-${animation})` : void 0,
+          ...style
+        },
+        ...props,
+        children
+      }
+    );
+  }
+);
+
+// src/components/Divider.tsx
+import { forwardRef as forwardRef7 } from "react";
+import { jsx as jsx8 } from "react/jsx-runtime";
+var Divider = forwardRef7(
+  function Divider2({
+    orientation = "horizontal",
+    spacing = "3",
+    color = "border-subtle",
+    style,
+    ...props
+  }, ref) {
+    const isHorizontal = orientation === "horizontal";
+    return /* @__PURE__ */ jsx8(
+      "hr",
+      {
+        ref,
+        style: {
+          border: "none",
+          backgroundColor: `var(--renge-color-${color})`,
+          ...isHorizontal ? {
+            height: "1px",
+            width: "100%",
+            marginBlock: `var(--renge-space-${spacing})`
+          } : {
+            width: "1px",
+            height: "100%",
+            marginInline: `var(--renge-space-${spacing})`
+          },
+          ...style
+        },
+        ...props
+      }
+    );
+  }
+);
+
+// src/components/Section.tsx
+import { forwardRef as forwardRef8 } from "react";
+import { jsx as jsx9 } from "react/jsx-runtime";
+var maxWidthMap = {
+  sm: "640px",
+  md: "768px",
+  lg: "1024px",
+  xl: "1280px",
+  full: "100%",
+  none: void 0
+};
+var Section = forwardRef8(
+  function Section2({
+    padding,
+    paddingX = "4",
+    paddingY = "6",
+    maxWidth = "lg",
+    center = true,
+    animation,
+    as: Component = "section",
+    style,
+    children,
+    ...props
+  }, ref) {
+    return /* @__PURE__ */ jsx9(
+      Component,
+      {
+        ref,
+        style: {
+          paddingInline: padding ? `var(--renge-space-${padding})` : `var(--renge-space-${paddingX})`,
+          paddingBlock: padding ? `var(--renge-space-${padding})` : `var(--renge-space-${paddingY})`,
+          maxWidth: maxWidthMap[maxWidth],
+          marginInline: center ? "auto" : void 0,
+          animation: animation ? `var(--renge-animation-${animation})` : void 0,
+          ...style
+        },
+        ...props,
+        children
+      }
+    );
+  }
+);
+
+// src/components/Badge.tsx
+import { forwardRef as forwardRef9 } from "react";
+import { jsx as jsx10 } from "react/jsx-runtime";
+var colorVars = (variant) => {
+  if (variant === "neutral") {
+    return {
+      background: "var(--renge-color-bg-subtle)",
+      color: "var(--renge-color-fg-muted)",
+      borderColor: "var(--renge-color-border-subtle)"
+    };
+  }
+  return {
+    background: `var(--renge-color-${variant}-subtle)`,
+    color: `var(--renge-color-${variant})`,
+    borderColor: `var(--renge-color-${variant})`
+  };
+};
+var sizeStyles2 = {
+  sm: { padding: "var(--renge-space-1) var(--renge-space-2)", fontSize: "var(--renge-font-size-xs)" },
+  md: { padding: "var(--renge-space-1) var(--renge-space-3)", fontSize: "var(--renge-font-size-xs)" },
+  lg: { padding: "var(--renge-space-2) var(--renge-space-3)", fontSize: "var(--renge-font-size-sm)" }
+};
+var Badge = forwardRef9(
+  function Badge2({ variant = "neutral", size = "md", style, children, ...props }, ref) {
+    const { background, color, borderColor } = colorVars(variant);
+    return /* @__PURE__ */ jsx10(
+      "span",
+      {
+        ref,
+        style: {
+          display: "inline-flex",
+          alignItems: "center",
+          lineHeight: 1,
+          fontWeight: 500,
+          borderRadius: "var(--renge-radius-full)",
+          border: `1px solid ${borderColor}`,
+          background,
+          color,
+          ...sizeStyles2[size],
+          ...style
+        },
+        ...props,
+        children
+      }
+    );
+  }
+);
+
+// src/components/Avatar.tsx
+import { forwardRef as forwardRef10 } from "react";
+import { jsx as jsx11 } from "react/jsx-runtime";
+var sizePx = {
+  "1": 20,
+  "2": 32,
+  "3": 52,
+  "4": 84,
+  "5": 136
+};
+var fontSizeFor = {
+  "1": "var(--renge-font-size-xs)",
+  "2": "var(--renge-font-size-sm)",
+  "3": "var(--renge-font-size-base)",
+  "4": "var(--renge-font-size-lg)",
+  "5": "var(--renge-font-size-xl)"
+};
+var Avatar = forwardRef10(
+  function Avatar2({ src, alt, initials, size = "3", shape = "circle", style, ...props }, ref) {
+    const px = sizePx[size];
+    const radius = shape === "circle" ? "var(--renge-radius-full)" : "var(--renge-radius-3)";
+    const label = initials ? initials.slice(0, 2).toUpperCase() : void 0;
+    return /* @__PURE__ */ jsx11(
+      "div",
+      {
+        ref,
+        "aria-label": alt,
+        role: alt ? "img" : void 0,
+        style: {
+          display: "inline-flex",
+          alignItems: "center",
+          justifyContent: "center",
+          width: px,
+          height: px,
+          borderRadius: radius,
+          overflow: "hidden",
+          flexShrink: 0,
+          background: src ? void 0 : "var(--renge-color-bg-muted)",
+          color: "var(--renge-color-fg-inverse)",
+          fontSize: fontSizeFor[size],
+          fontWeight: 600,
+          userSelect: "none",
+          ...style
+        },
+        ...props,
+        children: src ? /* @__PURE__ */ jsx11(
+          "img",
+          {
+            src,
+            alt: alt ?? "",
+            style: { width: "100%", height: "100%", objectFit: "cover", display: "block" }
+          }
+        ) : label
+      }
+    );
+  }
+);
+
+// src/components/Spinner.tsx
+import { forwardRef as forwardRef11 } from "react";
+import { jsx as jsx12 } from "react/jsx-runtime";
+if (typeof document !== "undefined") {
+  const id = "renge-spinner-kf";
+  if (!document.getElementById(id)) {
+    const s = document.createElement("style");
+    s.id = id;
+    s.textContent = "@keyframes rengeSpinnerSpin { to { transform: rotate(360deg); } }";
+    document.head.appendChild(s);
+  }
+}
+var sizePx2 = { sm: 16, md: 24, lg: 32 };
+var borderWidth = { sm: "2px", md: "2px", lg: "3px" };
+var Spinner = forwardRef11(
+  function Spinner2({ size = "md", color = "accent", label = "Loading", style, ...props }, ref) {
+    const px = sizePx2[size];
+    const bw = borderWidth[size];
+    return /* @__PURE__ */ jsx12(
+      "span",
+      {
+        ref,
+        role: "status",
+        "aria-label": label,
+        style: {
+          display: "inline-block",
+          width: px,
+          height: px,
+          borderRadius: "var(--renge-radius-full)",
+          border: `${bw} solid var(--renge-color-border-subtle)`,
+          borderTopColor: `var(--renge-color-${color})`,
+          animation: `rengeSpinnerSpin var(--renge-duration-3) linear infinite`,
+          flexShrink: 0,
+          ...style
+        },
+        ...props
+      }
+    );
+  }
+);
+
+// src/components/Progress.tsx
+import { forwardRef as forwardRef12 } from "react";
+import { jsx as jsx13 } from "react/jsx-runtime";
+var trackHeight = { sm: 4, md: 8, lg: 12 };
+var Progress = forwardRef12(
+  function Progress2({ value, color = "accent", size = "md", radius = "full", label, style, ...props }, ref) {
+    const clamped = Math.min(100, Math.max(0, value));
+    const borderRadius = radius === "full" ? "var(--renge-radius-full)" : "0px";
+    const height = trackHeight[size];
+    return /* @__PURE__ */ jsx13(
+      "div",
+      {
+        ref,
+        role: "progressbar",
+        "aria-valuenow": clamped,
+        "aria-valuemin": 0,
+        "aria-valuemax": 100,
+        "aria-label": label,
+        style: {
+          width: "100%",
+          height,
+          borderRadius,
+          background: "var(--renge-color-bg-muted)",
+          overflow: "hidden",
+          ...style
+        },
+        ...props,
+        children: /* @__PURE__ */ jsx13(
+          "div",
+          {
+            style: {
+              height: "100%",
+              width: `${clamped}%`,
+              borderRadius,
+              background: `var(--renge-color-${color})`,
+              transition: `width var(--renge-duration-3) var(--renge-easing-ease-out)`
+            }
+          }
+        )
+      }
+    );
+  }
+);
+
+// src/components/Input.tsx
+import { forwardRef as forwardRef13 } from "react";
+import { jsx as jsx14 } from "react/jsx-runtime";
+var sizeStyles3 = {
+  sm: {
+    padding: "var(--renge-space-1) var(--renge-space-2)",
+    fontSize: "var(--renge-font-size-sm)"
+  },
+  md: {
+    padding: "var(--renge-space-2) var(--renge-space-3)",
+    fontSize: "var(--renge-font-size-base)"
+  },
+  lg: {
+    padding: "var(--renge-space-2) var(--renge-space-4)",
+    fontSize: "var(--renge-font-size-base)"
+  }
+};
+var stateColor = {
+  default: "var(--renge-color-border)",
+  error: "var(--renge-color-danger)",
+  success: "var(--renge-color-success)"
+};
+var Input = forwardRef13(
+  function Input2({ size = "md", state = "default", fullWidth = false, style, ...props }, ref) {
+    return /* @__PURE__ */ jsx14(
+      "input",
+      {
+        ref,
+        style: {
+          ...sizeStyles3[size],
+          display: "block",
+          width: fullWidth ? "100%" : void 0,
+          background: "var(--renge-color-bg)",
+          color: "var(--renge-color-fg)",
+          border: `1px solid ${stateColor[state]}`,
+          borderRadius: "var(--renge-radius-2)",
+          outline: "none",
+          transition: `border-color var(--renge-duration-1) var(--renge-easing-ease-out)`,
+          // Focus is handled via :focus-visible pseudo-class but inline styles can't do that.
+          // We set a CSS custom property approach via box-shadow as focus ring instead.
+          boxSizing: "border-box",
+          fontFamily: "inherit",
+          ...style
+        },
+        onFocus: (e) => {
+          e.currentTarget.style.outline = `2px solid var(--renge-color-border-focus)`;
+          e.currentTarget.style.outlineOffset = "2px";
+          props.onFocus?.(e);
+        },
+        onBlur: (e) => {
+          e.currentTarget.style.outline = "none";
+          props.onBlur?.(e);
+        },
+        ...props
+      }
+    );
+  }
+);
+
+// src/components/Chip.tsx
+import { forwardRef as forwardRef14 } from "react";
+import { jsx as jsx15, jsxs } from "react/jsx-runtime";
+var colorVars2 = (variant) => {
+  if (variant === "neutral") {
+    return {
+      background: "var(--renge-color-bg-subtle)",
+      color: "var(--renge-color-fg-muted)",
+      borderColor: "var(--renge-color-border-subtle)"
+    };
+  }
+  return {
+    background: `var(--renge-color-${variant}-subtle)`,
+    color: `var(--renge-color-${variant})`,
+    borderColor: `var(--renge-color-${variant})`
+  };
+};
+var Chip = forwardRef14(
+  function Chip2({ variant = "neutral", onDismiss, style, children, ...props }, ref) {
+    const { background, color, borderColor } = colorVars2(variant);
+    return /* @__PURE__ */ jsxs(
+      "span",
+      {
+        ref,
+        style: {
+          display: "inline-flex",
+          alignItems: "center",
+          gap: "var(--renge-space-2)",
+          padding: "var(--renge-space-2) var(--renge-space-3)",
+          fontSize: "var(--renge-font-size-sm)",
+          fontWeight: 500,
+          lineHeight: 1,
+          borderRadius: "var(--renge-radius-full)",
+          border: `1px solid ${borderColor}`,
+          background,
+          color,
+          ...style
+        },
+        ...props,
+        children: [
+          children,
+          onDismiss && /* @__PURE__ */ jsx15(
+            "button",
+            {
+              onClick: onDismiss,
+              "aria-label": "Dismiss",
+              style: {
+                display: "inline-flex",
+                alignItems: "center",
+                justifyContent: "center",
+                background: "none",
+                border: "none",
+                padding: 0,
+                cursor: "pointer",
+                color: "inherit",
+                fontSize: "var(--renge-font-size-sm)",
+                lineHeight: 1,
+                opacity: 0.7
+              },
+              children: "\xD7"
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+
+// src/components/Alert.tsx
+import { forwardRef as forwardRef15 } from "react";
+import { jsx as jsx16, jsxs as jsxs2 } from "react/jsx-runtime";
+var Alert = forwardRef15(
+  function Alert2({ status = "info", title, style, children, ...props }, ref) {
+    return /* @__PURE__ */ jsxs2(
+      "div",
+      {
+        ref,
+        role: "alert",
+        style: {
+          display: "flex",
+          flexDirection: "column",
+          gap: title && children ? "var(--renge-space-1)" : void 0,
+          padding: "var(--renge-space-3) var(--renge-space-4)",
+          borderRadius: "var(--renge-radius-2)",
+          borderLeft: `3px solid var(--renge-color-${status})`,
+          background: `var(--renge-color-${status}-subtle)`,
+          color: "var(--renge-color-fg)",
+          ...style
+        },
+        ...props,
+        children: [
+          title && /* @__PURE__ */ jsx16(
+            "strong",
+            {
+              style: {
+                fontSize: "var(--renge-font-size-sm)",
+                fontWeight: 600,
+                color: "var(--renge-color-fg)"
+              },
+              children: title
+            }
+          ),
+          children && /* @__PURE__ */ jsx16("span", { style: { fontSize: "var(--renge-font-size-sm)", color: "var(--renge-color-fg)" }, children })
+        ]
+      }
+    );
+  }
+);
+
+// src/components/FormField.tsx
+import { forwardRef as forwardRef16 } from "react";
+import { jsx as jsx17, jsxs as jsxs3 } from "react/jsx-runtime";
+var FormField = forwardRef16(
+  function FormField2({ label, htmlFor, helperText, errorText, required, style, children, ...props }, ref) {
+    const subText = errorText ?? helperText;
+    const subColor = errorText ? "var(--renge-color-danger)" : "var(--renge-color-fg-muted)";
+    return /* @__PURE__ */ jsxs3(
+      "div",
+      {
+        ref,
+        style: {
+          display: "flex",
+          flexDirection: "column",
+          gap: "var(--renge-space-2)",
+          ...style
+        },
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs3(
+            "label",
+            {
+              htmlFor,
+              style: {
+                fontSize: "var(--renge-font-size-sm)",
+                fontWeight: 500,
+                color: "var(--renge-color-fg)",
+                display: "flex",
+                alignItems: "center",
+                gap: "var(--renge-space-1)"
+              },
+              children: [
+                label,
+                required && /* @__PURE__ */ jsx17("span", { "aria-hidden": "true", style: { color: "var(--renge-color-danger)" }, children: "*" })
+              ]
+            }
+          ),
+          children,
+          subText && /* @__PURE__ */ jsx17(
+            "span",
+            {
+              style: {
+                fontSize: "var(--renge-font-size-xs)",
+                color: subColor
+              },
+              children: subText
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+
+// src/components/Stat.tsx
+import { forwardRef as forwardRef17 } from "react";
+import { jsx as jsx18, jsxs as jsxs4 } from "react/jsx-runtime";
+var trendColor = {
+  up: "var(--renge-color-success)",
+  down: "var(--renge-color-danger)",
+  neutral: "var(--renge-color-fg-muted)"
+};
+var trendBg = {
+  up: "var(--renge-color-success-subtle)",
+  down: "var(--renge-color-danger-subtle)",
+  neutral: "var(--renge-color-bg-subtle)"
+};
+var trendBorder = {
+  up: "var(--renge-color-success)",
+  down: "var(--renge-color-danger)",
+  neutral: "var(--renge-color-border-subtle)"
+};
+var trendSymbol = {
+  up: "\u2191",
+  down: "\u2193",
+  neutral: "\u2014"
+};
+var Stat = forwardRef17(
+  function Stat2({ value, label, trend, trendValue, caption, style, ...props }, ref) {
+    return /* @__PURE__ */ jsxs4(
+      "div",
+      {
+        ref,
+        style: {
+          display: "flex",
+          flexDirection: "column",
+          padding: "var(--renge-space-4)",
+          ...style
+        },
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx18(
+            "span",
+            {
+              style: {
+                fontSize: "var(--renge-font-size-xs)",
+                color: "var(--renge-color-fg-muted)",
+                marginBottom: "var(--renge-space-1)",
+                fontWeight: 500
+              },
+              children: label
+            }
+          ),
+          /* @__PURE__ */ jsxs4(
+            "div",
+            {
+              style: {
+                display: "flex",
+                alignItems: "baseline",
+                gap: "var(--renge-space-3)",
+                flexWrap: "wrap"
+              },
+              children: [
+                /* @__PURE__ */ jsx18(
+                  "span",
+                  {
+                    style: {
+                      fontSize: "var(--renge-font-size-3xl)",
+                      lineHeight: 1.2,
+                      fontWeight: 600,
+                      color: "var(--renge-color-fg)"
+                    },
+                    children: value
+                  }
+                ),
+                trend && trendValue && /* @__PURE__ */ jsxs4(
+                  "span",
+                  {
+                    style: {
+                      display: "inline-flex",
+                      alignItems: "center",
+                      gap: "var(--renge-space-1)",
+                      padding: "var(--renge-space-1) var(--renge-space-2)",
+                      fontSize: "var(--renge-font-size-xs)",
+                      fontWeight: 500,
+                      lineHeight: 1,
+                      borderRadius: "var(--renge-radius-full)",
+                      border: `1px solid ${trendBorder[trend]}`,
+                      background: trendBg[trend],
+                      color: trendColor[trend]
+                    },
+                    children: [
+                      trendSymbol[trend],
+                      " ",
+                      trendValue
+                    ]
+                  }
+                )
+              ]
+            }
+          ),
+          caption && /* @__PURE__ */ jsx18(
+            "span",
+            {
+              style: {
+                fontSize: "var(--renge-font-size-xs)",
+                color: "var(--renge-color-fg-muted)",
+                marginTop: "var(--renge-space-1)"
+              },
+              children: caption
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+
+// src/components/Navbar.tsx
+import { forwardRef as forwardRef18 } from "react";
+import { jsx as jsx19 } from "react/jsx-runtime";
+var Navbar = forwardRef18(
+  function Navbar2({ sticky = false, border = true, height = "56px", paddingX = "5", style, children, ...props }, ref) {
+    return /* @__PURE__ */ jsx19(
+      "nav",
+      {
+        ref,
+        style: {
+          display: "flex",
+          alignItems: "center",
+          minHeight: height,
+          padding: `0 var(--renge-space-${paddingX})`,
+          background: "var(--renge-color-bg)",
+          borderBottom: border ? "1px solid var(--renge-color-border-subtle)" : void 0,
+          position: sticky ? "sticky" : void 0,
+          top: sticky ? 0 : void 0,
+          zIndex: sticky ? 100 : void 0,
+          boxSizing: "border-box",
+          ...style
+        },
+        ...props,
+        children
+      }
+    );
+  }
+);
+
+// src/components/EnergyRing.tsx
+import { forwardRef as forwardRef19 } from "react";
+import { jsx as jsx20, jsxs as jsxs5 } from "react/jsx-runtime";
+var KEYFRAMES = `
+@keyframes rengeRingPulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.382; }
+}
+`;
+if (typeof document !== "undefined") {
+  const id = "__renge-ring-keyframes__";
+  if (!document.getElementById(id)) {
+    const style = document.createElement("style");
+    style.id = id;
+    style.textContent = KEYFRAMES;
+    document.head.appendChild(style);
+  }
+}
+var SIZE_CONFIG = {
+  sm: { diameter: 32, stroke: 3, fontSize: "var(--renge-font-size-xs)" },
+  md: { diameter: 52, stroke: 4, fontSize: "var(--renge-font-size-xs)" },
+  lg: { diameter: 84, stroke: 5, fontSize: "var(--renge-font-size-sm)" },
+  xl: { diameter: 136, stroke: 6, fontSize: "var(--renge-font-size-base)" }
+};
+var PULSE_DURATION = {
+  rest: "var(--renge-duration-7)",
+  // 2100ms — slow, resting breath
+  active: "var(--renge-duration-5)",
+  // 800ms  — normal active pulse
+  fire: "var(--renge-duration-4)"
+  // 500ms  — intense, rapid
+};
+var EnergyRing = forwardRef19(
+  function EnergyRing2({
+    value,
+    size = "md",
+    color = "accent",
+    pulse = false,
+    rate = "active",
+    label,
+    style,
+    ...props
+  }, ref) {
+    const { diameter, stroke, fontSize } = SIZE_CONFIG[size];
+    const radius = (diameter - stroke) / 2;
+    const circumference = 2 * Math.PI * radius;
+    const clampedValue = Math.min(100, Math.max(0, value));
+    const offset = circumference * (1 - clampedValue / 100);
+    const center = diameter / 2;
+    const colorVar = `var(--renge-color-${color})`;
+    const colorSubtleVar = `var(--renge-color-${color}-subtle)`;
+    const pulseStyle = pulse ? {
+      animation: `rengeRingPulse ${PULSE_DURATION[rate]} var(--renge-easing-ease-in-out) infinite`
+    } : {};
+    const showLabel = label !== null && (size === "lg" || size === "xl");
+    const labelText = label !== void 0 ? label : `${clampedValue}%`;
+    return /* @__PURE__ */ jsxs5(
+      "div",
+      {
+        ref,
+        role: "progressbar",
+        "aria-valuenow": clampedValue,
+        "aria-valuemin": 0,
+        "aria-valuemax": 100,
+        style: {
+          display: "inline-flex",
+          alignItems: "center",
+          justifyContent: "center",
+          width: `${diameter}px`,
+          height: `${diameter}px`,
+          position: "relative",
+          flexShrink: 0,
+          ...style
+        },
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs5(
+            "svg",
+            {
+              width: diameter,
+              height: diameter,
+              viewBox: `0 0 ${diameter} ${diameter}`,
+              style: { position: "absolute", top: 0, left: 0, ...pulseStyle },
+              "aria-hidden": "true",
+              children: [
+                /* @__PURE__ */ jsx20(
+                  "circle",
+                  {
+                    cx: center,
+                    cy: center,
+                    r: radius,
+                    fill: "none",
+                    stroke: colorSubtleVar,
+                    strokeWidth: stroke
+                  }
+                ),
+                /* @__PURE__ */ jsx20(
+                  "circle",
+                  {
+                    cx: center,
+                    cy: center,
+                    r: radius,
+                    fill: "none",
+                    stroke: colorVar,
+                    strokeWidth: stroke,
+                    strokeLinecap: "round",
+                    strokeDasharray: circumference,
+                    strokeDashoffset: offset,
+                    style: {
+                      transform: "rotate(-90deg)",
+                      transformOrigin: `${center}px ${center}px`,
+                      transition: `stroke-dashoffset var(--renge-duration-5) var(--renge-easing-ease-out)`
+                    }
+                  }
+                )
+              ]
+            }
+          ),
+          showLabel && /* @__PURE__ */ jsx20(
+            "span",
+            {
+              style: {
+                fontSize,
+                color: colorVar,
+                fontVariantNumeric: "tabular-nums",
+                lineHeight: 1,
+                pointerEvents: "none"
+              },
+              children: labelText
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+
+// src/components/Pulse.tsx
+import { forwardRef as forwardRef20 } from "react";
+import { jsx as jsx21, jsxs as jsxs6 } from "react/jsx-runtime";
+var KEYFRAMES2 = `
+@keyframes rengePulseBreathe {
+  0%, 100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  50% {
+    transform: scale(1.618);
+    opacity: 0.382;
+  }
+}
+@keyframes rengePulseRipple {
+  0% { transform: scale(1); opacity: 0.5; }
+  100% { transform: scale(2.618); opacity: 0; }
+}
+`;
+if (typeof document !== "undefined") {
+  const id = "__renge-pulse-keyframes__";
+  if (!document.getElementById(id)) {
+    const style = document.createElement("style");
+    style.id = id;
+    style.textContent = KEYFRAMES2;
+    document.head.appendChild(style);
+  }
+}
+var SIZE_PX = {
+  sm: 6,
+  md: 10,
+  lg: 16
+};
+var RATE_DURATION = {
+  rest: "var(--renge-duration-7)",
+  // 2100ms
+  active: "var(--renge-duration-5)",
+  // 800ms
+  fire: "var(--renge-duration-4)"
+  // 500ms
+};
+var Pulse = forwardRef20(
+  function Pulse2({
+    rate = "active",
+    color = "accent",
+    size = "md",
+    ripple = false,
+    style,
+    ...props
+  }, ref) {
+    const diameter = SIZE_PX[size];
+    const duration = RATE_DURATION[rate];
+    const colorVar = `var(--renge-color-${color})`;
+    return /* @__PURE__ */ jsxs6(
+      "span",
+      {
+        ref,
+        "aria-hidden": "true",
+        style: {
+          display: "inline-flex",
+          alignItems: "center",
+          justifyContent: "center",
+          position: "relative",
+          width: `${diameter}px`,
+          height: `${diameter}px`,
+          flexShrink: 0,
+          ...style
+        },
+        ...props,
+        children: [
+          ripple && /* @__PURE__ */ jsx21(
+            "span",
+            {
+              style: {
+                position: "absolute",
+                inset: 0,
+                borderRadius: "9999px",
+                backgroundColor: colorVar,
+                animation: `rengePulseRipple ${duration} var(--renge-easing-ease-out) infinite`
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx21(
+            "span",
+            {
+              style: {
+                width: `${diameter}px`,
+                height: `${diameter}px`,
+                borderRadius: "9999px",
+                backgroundColor: colorVar,
+                display: "block",
+                animation: `rengePulseBreathe ${duration} var(--renge-easing-ease-in-out) infinite`
+              }
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+
+// src/components/FlowField.tsx
+import { forwardRef as forwardRef21, useMemo as useMemo2 } from "react";
+import { phyllotaxis } from "@renge-ui/tokens";
+import { jsx as jsx22 } from "react/jsx-runtime";
+var KEYFRAMES3 = `
+@keyframes rengeFlowPulse {
+  0%, 100% { opacity: var(--ff-base-opacity); r: var(--ff-base-r); }
+  50%       { opacity: var(--ff-peak-opacity); r: var(--ff-peak-r); }
+}
+`;
+if (typeof document !== "undefined") {
+  const id = "__renge-flow-keyframes__";
+  if (!document.getElementById(id)) {
+    const style = document.createElement("style");
+    style.id = id;
+    style.textContent = KEYFRAMES3;
+    document.head.appendChild(style);
+  }
+}
+var ENERGY_CONFIG = {
+  void: { density: 0.2, baseOpacity: 0.06, peakOpacity: 0.15, baseR: 1, peakR: 1.4, duration: "var(--renge-duration-8)" },
+  // 3400ms
+  rest: { density: 0.45, baseOpacity: 0.12, peakOpacity: 0.28, baseR: 1.2, peakR: 1.8, duration: "var(--renge-duration-6)" },
+  // 1300ms
+  active: { density: 0.72, baseOpacity: 0.22, peakOpacity: 0.55, baseR: 1.4, peakR: 2.2, duration: "var(--renge-duration-5)" },
+  // 800ms
+  fire: { density: 1, baseOpacity: 0.35, peakOpacity: 0.82, baseR: 1.6, peakR: 2.618, duration: "var(--renge-duration-4)" }
+  // 500ms
+};
+var FlowField = forwardRef21(
+  function FlowField2({
+    count = 144,
+    size = 400,
+    energy = "active",
+    color = "accent",
+    style,
+    ...props
+  }, ref) {
+    const cfg = ENERGY_CONFIG[energy];
+    const visibleCount = Math.round(count * cfg.density);
+    const colorVar = `var(--renge-color-${color})`;
+    const points = useMemo2(() => {
+      const spread = size / (2 * Math.sqrt(count));
+      return phyllotaxis({ count, spread, scale: 1 });
+    }, [count, size]);
+    return /* @__PURE__ */ jsx22(
+      "div",
+      {
+        ref,
+        style: {
+          width: `${size}px`,
+          height: `${size}px`,
+          position: "relative",
+          overflow: "hidden",
+          flexShrink: 0,
+          // CSS vars for SVG animation — set at container level
+          ["--ff-base-opacity"]: String(cfg.baseOpacity),
+          ["--ff-peak-opacity"]: String(cfg.peakOpacity),
+          ["--ff-base-r"]: `${cfg.baseR}px`,
+          ["--ff-peak-r"]: `${cfg.peakR}px`,
+          ...style
+        },
+        ...props,
+        children: /* @__PURE__ */ jsx22(
+          "svg",
+          {
+            width: size,
+            height: size,
+            viewBox: `${-size / 2} ${-size / 2} ${size} ${size}`,
+            "aria-hidden": "true",
+            style: { display: "block" },
+            children: points.slice(0, visibleCount).map((pt) => {
+              const delayFraction = pt.index / visibleCount;
+              const delayMs = delayFraction * 2100;
+              return /* @__PURE__ */ jsx22(
+                "circle",
+                {
+                  cx: pt.x,
+                  cy: pt.y,
+                  r: cfg.baseR,
+                  fill: colorVar,
+                  style: {
+                    animation: `rengeFlowPulse ${cfg.duration} var(--renge-easing-ease-in-out) ${delayMs.toFixed(0)}ms infinite`
+                  }
+                },
+                pt.index
+              );
+            })
+          }
+        )
+      }
+    );
+  }
+);
+
+// src/index.ts
+import { createRengeTheme as createRengeTheme2, PHI, FIBONACCI, GOLDEN_ANGLE, ANIMATION_NAMES } from "@renge-ui/tokens";
+export {
+  ANIMATION_NAMES,
+  Alert,
+  Avatar,
+  Badge,
+  Button,
+  Card,
+  Chip,
+  Divider,
+  EnergyRing,
+  FIBONACCI,
+  FlowField,
+  FormField,
+  GOLDEN_ANGLE,
+  Grid,
+  Heading,
+  Input,
+  Navbar,
+  PHI,
+  Progress,
+  Pulse,
+  RengeProvider,
+  Section,
+  Spinner,
+  Stack,
+  Stat,
+  Text,
+  createRengeTheme2 as createRengeTheme,
+  useRenge,
+  useRengeTheme
+};
+//# sourceMappingURL=index.mjs.map