@youwen/ai-design-system/dist/layouts-49a39706.mjs

Enterprise AI-driven design system with comprehensive design tokens

import { jsx as e, jsxs as d } from "react/jsx-runtime";
import * as z from "react";
import { cva as L } from "class-variance-authority";
import { c as j } from "./charts-563ee857.mjs";
const T = L(
  "relative bg-card border rounded-lg shadow-sm",
  {
    variants: {
      size: {
        standard: "w-container-md h-container-md",
        // 外部容器精确尺寸
        auto: "w-full h-auto",
        // 学习v2的精确尺寸控制
        v2Standard: "w-[430px] h-[195px]",
        figma: "w-[400px] h-[180px]"
      },
      padding: {
        none: "p-0",
        base: "p-[15px]",
        // 统一15px边距
        // v2样式的边距控制
        v2: "p-[12px]",
        figma: "p-[16px]"
      },
      theme: {
        default: "bg-card border",
        // 学习v2的渐变背景
        v2Dark: "bg-gradient-to-br from-[#1a1a1a] to-[#0d1117] border-[#30363d]",
        figma: "bg-white border-[#e1e5e9] shadow-sm",
        transparent: "bg-transparent border-transparent"
      }
    },
    defaultVariants: {
      size: "standard",
      padding: "base",
      theme: "default"
    }
  }
), A = z.forwardRef(
  ({
    className: g,
    layout: p = "leftTop",
    size: x = "standard",
    padding: w = "base",
    theme: v = "default",
    small: h,
    big: r,
    mini: a,
    backgroundGradient: i,
    conicBackground: n,
    ...s
  }, N) => {
    const m = p.split(",").map((o) => o.trim()), y = () => {
      const o = {};
      if (i != null && i.enabled && i.colors.length >= 2 && (o.background = `linear-gradient(${i.direction || "to-br"}, ${i.colors.join(", ")})`), n != null && n.enabled && n.colors.length > 0) {
        const f = n.colors.map((t) => `${t.color} ${t.position}deg`).join(", ");
        o.background = `conic-gradient(from 0deg, ${f})`;
      }
      return o;
    };
    return /* @__PURE__ */ e(
      "div",
      {
        className: j(
          T({ size: x, padding: w, theme: v }),
          g
        ),
        style: y(),
        ref: N,
        ...s,
        children: /* @__PURE__ */ d("div", { className: "relative w-full h-full", children: [
          /* @__PURE__ */ e("div", { className: "absolute w-widget-sm h-widget-sm top-0 left-0", children: (m.includes("leftTop") || m.includes("all")) && /* @__PURE__ */ d("div", { className: "relative w-full h-full font-scto", children: [
            /* @__PURE__ */ e("div", { className: "absolute font-normal text-widget-small", style: { top: "5px", left: "0px", width: "195px" }, children: h }),
            /* @__PURE__ */ e("div", { className: "absolute font-normal text-widget-big", style: { top: "30px", left: "0px", width: "195px" }, children: r }),
            /* @__PURE__ */ e("div", { className: "absolute font-normal text-widget-mini", style: { top: "70px", left: "0px", width: "195px" }, children: a })
          ] }) }),
          /* @__PURE__ */ e("div", { className: "absolute w-widget-sm h-widget-sm top-0 right-0", children: (m.includes("rightTop") || m.includes("all")) && /* @__PURE__ */ d("div", { className: "relative w-full h-full font-scto", children: [
            /* @__PURE__ */ e("div", { className: "absolute font-normal text-widget-small text-right", style: { top: "5px", right: "0px", width: "195px" }, children: h }),
            /* @__PURE__ */ e("div", { className: "absolute font-normal text-widget-big text-right", style: { top: "30px", right: "0px", width: "195px" }, children: r }),
            /* @__PURE__ */ e("div", { className: "absolute font-normal text-widget-mini text-right", style: { top: "70px", right: "0px", width: "195px" }, children: a })
          ] }) }),
          /* @__PURE__ */ e("div", { className: "absolute w-widget-sm h-widget-sm bottom-0 left-0", children: (m.includes("leftBottom") || m.includes("all")) && /* @__PURE__ */ d("div", { className: "relative w-full h-full font-scto", children: [
            /* @__PURE__ */ e("div", { className: "absolute font-normal text-widget-mini", style: { bottom: "5px", left: "0px", width: "195px" }, children: a }),
            /* @__PURE__ */ e("div", { className: "absolute font-normal text-widget-big", style: { bottom: "25px", left: "0px", width: "195px" }, children: r }),
            /* @__PURE__ */ e("div", { className: "absolute font-normal text-widget-small", style: { bottom: "65px", left: "0px", width: "195px" }, children: h })
          ] }) }),
          /* @__PURE__ */ e("div", { className: "absolute w-widget-sm h-widget-sm bottom-0 right-0", children: (m.includes("rightBottom") || m.includes("all")) && /* @__PURE__ */ d("div", { className: "relative w-full h-full font-scto", children: [
            /* @__PURE__ */ e("div", { className: "absolute font-normal text-widget-mini text-right", style: { bottom: "5px", right: "0px", width: "195px" }, children: a }),
            /* @__PURE__ */ e("div", { className: "absolute font-normal text-widget-big text-right", style: { bottom: "25px", right: "0px", width: "195px" }, children: r }),
            /* @__PURE__ */ e("div", { className: "absolute font-normal text-widget-small text-right", style: { bottom: "65px", right: "0px", width: "195px" }, children: h })
          ] }) })
        ] })
      }
    );
  }
);
A.displayName = "ThreeElementLayout";
const R = L(
  "relative bg-card border rounded-lg shadow-sm",
  {
    variants: {
      size: {
        standard: "w-container-md h-container-md",
        auto: "w-full h-auto",
        // 学习v2的精确尺寸控制
        v2Standard: "w-[430px] h-[195px]",
        figma: "w-[400px] h-[180px]",
        compact: "w-[320px] h-[160px]"
      },
      padding: {
        none: "p-0",
        base: "p-[15px]",
        v2: "p-[12px]",
        figma: "p-[16px]"
      },
      theme: {
        default: "bg-card border",
        // 学习v2的渐变主题
        v2Dark: "bg-gradient-to-br from-[#1a1a1a] to-[#0d1117] border-[#30363d]",
        v2Light: "bg-gradient-to-br from-[#f6f8fa] to-[#ffffff] border-[#d1d9e0]",
        figma: "bg-white border-[#e1e5e9] shadow-sm",
        glass: "bg-white/10 backdrop-blur-md border-white/20"
      }
    },
    defaultVariants: {
      size: "standard",
      padding: "base",
      theme: "default"
    }
  }
), S = z.forwardRef(
  ({
    className: g,
    layout: p = "leftTop",
    size: x = "standard",
    padding: w = "base",
    theme: v = "default",
    cardTitle: h = "卡片标题",
    cardContent: r = "卡片内容描述",
    cardFooter: a = "更多信息",
    cardVariant: i = "default",
    gradientConfig: n,
    animated: s = !1,
    hoverEffect: N = "none",
    ...m
  }, y) => {
    const o = p.split(",").map((l) => l.trim()), f = () => {
      const l = "w-full h-full border rounded-lg p-3 transition-all duration-300", b = {
        scale: "hover:scale-105",
        glow: "hover:shadow-lg hover:shadow-blue-500/25",
        lift: "hover:-translate-y-1 hover:shadow-xl",
        none: ""
      }[N || "none"], c = s ? "animate-pulse" : "";
      switch (i) {
        case "outlined":
          return `${l} border-neutral-300 bg-white ${b} ${c}`;
        case "elevated":
          return `${l} border-neutral-200 bg-white shadow-md ${b} ${c}`;
        case "glass":
          return `${l} border-white/20 bg-white/10 backdrop-blur-md ${b} ${c}`;
        case "gradient":
          return `${l} border-transparent bg-gradient-to-br from-blue-500/10 to-purple-500/10 ${b} ${c}`;
        default:
          return `${l} border-neutral-200 bg-neutral-50 ${b} ${c}`;
      }
    }, t = () => {
      if (!n)
        return {};
      const { type: l, colors: $, direction: b, opacity: c } = n;
      let u = "";
      switch (l) {
        case "linear":
          u = `linear-gradient(${b || "to-br"}, ${$.join(", ")})`;
          break;
        case "radial":
          u = `radial-gradient(circle, ${$.join(", ")})`;
          break;
        case "conic":
          u = `conic-gradient(from 0deg, ${$.join(", ")})`;
          break;
      }
      return {
        background: u,
        opacity: c || 1
      };
    };
    return /* @__PURE__ */ e(
      "div",
      {
        className: j(
          R({ size: x, padding: w, theme: v }),
          g
        ),
        style: t(),
        ref: y,
        ...m,
        children: /* @__PURE__ */ d("div", { className: "relative w-full h-full", children: [
          /* @__PURE__ */ e("div", { className: "absolute w-widget-sm h-widget-sm top-0 left-0", children: (o.includes("leftTop") || o.includes("all")) && /* @__PURE__ */ e("div", { className: f(), children: /* @__PURE__ */ d("div", { className: "font-scto", children: [
            /* @__PURE__ */ e("div", { className: "font-medium text-widget-small mb-2", children: h }),
            /* @__PURE__ */ e("div", { className: "font-normal text-widget-mini text-gray-600 mb-2 flex-1", children: r }),
            /* @__PURE__ */ e("div", { className: "font-normal text-widget-mini text-gray-500", children: a })
          ] }) }) }),
          /* @__PURE__ */ e("div", { className: "absolute w-widget-sm h-widget-sm top-0 right-0", children: (o.includes("rightTop") || o.includes("all")) && /* @__PURE__ */ e("div", { className: f(), children: /* @__PURE__ */ d("div", { className: "font-scto text-right", children: [
            /* @__PURE__ */ e("div", { className: "font-medium text-widget-small mb-2", children: h }),
            /* @__PURE__ */ e("div", { className: "font-normal text-widget-mini text-gray-600 mb-2 flex-1", children: r }),
            /* @__PURE__ */ e("div", { className: "font-normal text-widget-mini text-gray-500", children: a })
          ] }) }) }),
          /* @__PURE__ */ e("div", { className: "absolute w-widget-sm h-widget-sm bottom-0 left-0", children: (o.includes("leftBottom") || o.includes("all")) && /* @__PURE__ */ e("div", { className: f(), children: /* @__PURE__ */ d("div", { className: "font-scto h-full flex flex-col", children: [
            /* @__PURE__ */ e("div", { className: "font-normal text-widget-mini text-gray-500 mb-2", children: a }),
            /* @__PURE__ */ e("div", { className: "font-normal text-widget-mini text-gray-600 mb-2 flex-1", children: r }),
            /* @__PURE__ */ e("div", { className: "font-medium text-widget-small", children: h })
          ] }) }) }),
          /* @__PURE__ */ e("div", { className: "absolute w-widget-sm h-widget-sm bottom-0 right-0", children: (o.includes("rightBottom") || o.includes("all")) && /* @__PURE__ */ e("div", { className: f(), children: /* @__PURE__ */ d("div", { className: "font-scto text-right h-full flex flex-col", children: [
            /* @__PURE__ */ e("div", { className: "font-normal text-widget-mini text-gray-500 mb-2", children: a }),
            /* @__PURE__ */ e("div", { className: "font-normal text-widget-mini text-gray-600 mb-2 flex-1", children: r }),
            /* @__PURE__ */ e("div", { className: "font-medium text-widget-small", children: h })
          ] }) }) })
        ] })
      }
    );
  }
);
S.displayName = "WidgetCard";
const I = L(
  "relative overflow-hidden",
  {
    variants: {
      size: {
        standard: "w-[430px] h-[195px]",
        large: "w-[500px] h-[240px]",
        compact: "w-[320px] h-[160px]",
        full: "w-full h-full"
      },
      theme: {
        v2Dark: "bg-gradient-to-br from-[#1a1a1a] to-[#0d1117]",
        v2Light: "bg-gradient-to-br from-[#f6f8fa] to-[#ffffff]",
        transparent: "bg-transparent",
        glass: "bg-white/10 backdrop-blur-md"
      },
      border: {
        none: "",
        subtle: "border border-[#30363d]",
        prominent: "border-2 border-[#6BB5FF]",
        gradient: "border border-transparent bg-gradient-to-r from-[#6BB5FF] to-[#4F46E5] bg-clip-border"
      },
      corners: {
        none: "rounded-none",
        sm: "rounded-sm",
        md: "rounded-md",
        lg: "rounded-lg",
        xl: "rounded-xl",
        full: "rounded-full"
      }
    },
    defaultVariants: {
      size: "standard",
      theme: "v2Dark",
      border: "subtle",
      corners: "md"
    }
  }
);
function B(g) {
  const p = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(g);
  return p ? {
    r: parseInt(p[1], 16),
    g: parseInt(p[2], 16),
    b: parseInt(p[3], 16)
  } : { r: 0, g: 0, b: 0 };
}
const C = z.forwardRef(({
  className: g,
  size: p = "standard",
  theme: x = "v2Dark",
  border: w = "subtle",
  corners: v = "md",
  children: h,
  conicGradient: r,
  maskEffect: a,
  layerSystem: i,
  indicators: n,
  gridGradient: s,
  ...N
}, m) => {
  var f;
  const y = () => !(r != null && r.enabled) || !r.layers.length ? {} : {
    background: r.layers.map((l, $) => {
      const b = l.colors.map((c) => {
        const { r: u, g: V, b: D } = B(c.color);
        return `rgba(${u}, ${V}, ${D}, ${c.opacity || 1}) ${c.position}%`;
      }).join(", ");
      return `conic-gradient(from ${l.startAngle}deg, ${b})`;
    }).join(", "),
    backgroundBlendMode: "multiply"
  }, o = () => {
    if (!(s != null && s.enabled))
      return null;
    const t = s.stops.map((l) => /* @__PURE__ */ e(
      "stop",
      {
        offset: l.offset,
        stopColor: l.color,
        stopOpacity: l.opacity
      },
      l.offset
    ));
    return /* @__PURE__ */ e("defs", { children: /* @__PURE__ */ e(
      "linearGradient",
      {
        id: "v2GridGradient",
        x1: "0%",
        y1: "0%",
        x2: s.direction === "horizontal" ? "100%" : "0%",
        y2: s.direction === "vertical" ? "100%" : "0%",
        children: t
      }
    ) });
  };
  return /* @__PURE__ */ d(
    "div",
    {
      ref: m,
      className: j(I({ size: p, theme: x, border: w, corners: v }), g),
      style: y(),
      ...N,
      children: [
        (i == null ? void 0 : i.enabled) && i.layers.map((t, l) => /* @__PURE__ */ e(
          "div",
          {
            className: "absolute inset-0 pointer-events-none",
            style: {
              background: t.background,
              opacity: t.opacity,
              mixBlendMode: t.blendMode || "normal",
              transform: t.offset ? `translate(${t.offset.x}px, ${t.offset.y}px)` : void 0
            }
          },
          l
        )),
        ((a == null ? void 0 : a.enabled) || (s == null ? void 0 : s.enabled)) && /* @__PURE__ */ d(
          "svg",
          {
            className: "absolute inset-0 w-full h-full pointer-events-none",
            style: { zIndex: 1 },
            children: [
              o(),
              (a == null ? void 0 : a.enabled) && /* @__PURE__ */ e("defs", { children: /* @__PURE__ */ d("mask", { id: a.maskId, children: [
                /* @__PURE__ */ e("rect", { width: "100%", height: "100%", fill: "black" }),
                (f = a.paths) == null ? void 0 : f.map((t, l) => /* @__PURE__ */ e("path", { d: t, fill: "white" }, l))
              ] }) }),
              (s == null ? void 0 : s.enabled) && /* @__PURE__ */ e("g", { className: "opacity-20", children: Array.from({ length: 5 }).map((t, l) => /* @__PURE__ */ e(
                "line",
                {
                  x1: "0",
                  y1: `${l * 25}%`,
                  x2: "100%",
                  y2: `${l * 25}%`,
                  stroke: "url(#v2GridGradient)",
                  strokeWidth: "1",
                  strokeDasharray: s.dashArray || "2 4",
                  strokeLinecap: "round"
                },
                l
              )) })
            ]
          }
        ),
        n == null ? void 0 : n.map((t, l) => /* @__PURE__ */ e(
          "div",
          {
            className: j(
              "absolute",
              t.position === "top" && "top-0 left-0 right-0",
              t.position === "bottom" && "bottom-0 left-0 right-0",
              t.position === "left" && "left-0 top-0 bottom-0",
              t.position === "right" && "right-0 top-0 bottom-0",
              t.animated && "animate-pulse"
            ),
            style: {
              width: t.position === "top" || t.position === "bottom" ? `${t.width}%` : `${t.height || 4}px`,
              height: t.position === "left" || t.position === "right" ? `${t.width}%` : `${t.height || 4}px`,
              background: t.color,
              borderRadius: "2px"
            }
          },
          l
        )),
        /* @__PURE__ */ e("div", { className: "relative z-10 w-full h-full", children: h })
      ]
    }
  );
});
C.displayName = "V2AdvancedLayout";
export {
  A as T,
  C as V,
  S as W,
  T as t,
  I as v,
  R as w
};