@youwen/ai-design-system
Version:
Enterprise AI-driven design system with comprehensive design tokens
305 lines (304 loc) • 8.38 kB
JavaScript
import { T as D, V as T, W as A, t as W, v as j, w as E } from "./layouts-49a39706.mjs";
import { jsx as t, jsxs as u } from "react/jsx-runtime";
import * as h from "react";
import { cva as f } from "class-variance-authority";
import { c as x } from "./charts-563ee857.mjs";
import "clsx";
import "tailwind-merge";
const v = f(
"relative",
{
variants: {
variant: {
button1: "",
button2: "",
selector: ""
},
size: {
default: "w-[195px] h-[97px]"
}
},
defaultVariants: {
variant: "button1",
size: "default"
}
}
), w = h.forwardRef(
({ className: s, variant: l = "button1", children: o, disabled: a, onClick: r, ...n }, p) => {
const d = (() => {
switch (l) {
case "button1":
return {
background: "#000000",
// 黑色背景
color: "#FFFFFF",
// 白色文字
borderRadius: "0px"
// 直角
};
case "button2":
return {
background: "#666666",
// 灰色背景
color: "#FFFFFF",
// 白色文字
borderRadius: "0px"
// 直角
};
case "selector":
return {
background: "transparent",
color: "#000000",
// 黑色文字
border: "1px solid #000000",
borderRadius: "103px"
// 圆角
};
default:
return {
background: "#000000",
color: "#FFFFFF",
borderRadius: "0px"
};
}
})(), m = o || (l === "button1" ? "Button 1" : l === "button2" ? "Button 2" : "Selector 1");
return /* @__PURE__ */ t(
"div",
{
className: x(v({ variant: l }), s),
ref: p,
...n,
children: /* @__PURE__ */ u(
"div",
{
className: "absolute",
style: {
width: "195px",
height: "47px",
left: "0px",
top: "25px"
},
children: [
/* @__PURE__ */ t(
"div",
{
className: "absolute box-border",
style: {
width: "195px",
height: "47px",
left: "0px",
top: "0px",
...d,
cursor: a ? "default" : "pointer"
},
onClick: a ? void 0 : r
}
),
/* @__PURE__ */ t(
"div",
{
className: "absolute flex items-center",
style: {
// 居中计算: (195 - 文字宽度) / 2 ≈ 67.999px
left: "calc(50% - 30px)",
// 大概居中
top: "18px",
// (47 - 11) / 2 ≈ 18px
width: "60px",
height: "11px",
fontFamily: "Scto Grotesk A",
fontStyle: "normal",
fontWeight: 400,
fontSize: "16px",
lineHeight: "107%",
color: d.color,
justifyContent: "center",
cursor: a ? "default" : "pointer"
},
onClick: a ? void 0 : r,
children: m
}
)
]
}
)
}
);
}
);
w.displayName = "FigmaButton";
const y = f(
"relative",
{
variants: {
size: {
default: "w-[195px] h-[97px]"
}
},
defaultVariants: {
size: "default"
}
}
), F = () => /* @__PURE__ */ u(
"div",
{
className: "absolute",
style: {
width: "25px",
height: "25px",
left: "159px",
top: "36px"
},
children: [
/* @__PURE__ */ t(
"div",
{
className: "absolute bg-black",
style: {
width: "9px",
height: "6px",
left: "calc(50% - 9px/2)",
top: "calc(50% - 6px/2 + 0.5px)"
}
}
),
/* @__PURE__ */ t(
"div",
{
className: "absolute bg-white",
style: {
width: "9px",
height: "6px",
left: "8px",
top: "10px"
}
}
)
]
}
), b = h.forwardRef(
({ className: s, children: l = "Dropdown 1", disabled: o, onClick: a, ...r }, n) => /* @__PURE__ */ u(
"div",
{
className: x(y(), s),
ref: n,
...r,
children: [
/* @__PURE__ */ t(
"div",
{
className: "absolute flex items-center text-black",
style: {
width: "87px",
height: "11px",
left: "25px",
top: "43px",
fontFamily: "Scto Grotesk A",
fontStyle: "normal",
fontWeight: 400,
fontSize: "16px",
lineHeight: "107%",
// 17px
cursor: o ? "default" : "pointer"
},
onClick: o ? void 0 : a,
children: l
}
),
/* @__PURE__ */ t(
"div",
{
className: "absolute box-border border border-black",
style: {
width: "195px",
height: "47px",
left: "0px",
top: "25px",
borderRadius: "103px",
cursor: o ? "default" : "pointer"
},
onClick: o ? void 0 : a
}
),
/* @__PURE__ */ t(F, {})
]
}
)
);
b.displayName = "FigmaDropdown";
const N = f(
"relative bg-card border rounded-lg shadow-sm",
{
variants: {
size: {
standard: "w-container-md h-container-md",
auto: "w-full h-auto"
},
padding: {
none: "p-0",
base: "p-[15px]"
}
},
defaultVariants: {
size: "standard",
padding: "base"
}
}
), k = h.forwardRef(
({
className: s,
layout: l = "leftTop",
size: o = "standard",
padding: a = "base",
leftTopButton: r,
rightTopButton: n,
leftBottomButton: p,
rightBottomButton: g,
...d
}, m) => {
const i = l.split(",").map((e) => e.trim()), c = (e) => e ? e.variant === "dropdown" ? /* @__PURE__ */ t(
b,
{
onClick: e.onClick,
disabled: e.disabled,
children: e.text || "Dropdown 1"
}
) : /* @__PURE__ */ t(
w,
{
variant: e.variant === "dropdown" ? "button1" : e.variant || "button1",
onClick: e.onClick,
disabled: e.disabled,
children: e.text
}
) : null;
return /* @__PURE__ */ t(
"div",
{
className: x(
N({ size: o, padding: a }),
s
),
ref: m,
...d,
children: /* @__PURE__ */ u("div", { className: "relative w-full h-full", children: [
/* @__PURE__ */ t("div", { className: "absolute w-widget-sm h-widget-sm top-0 left-0", children: (i.includes("leftTop") || i.includes("all")) && /* @__PURE__ */ t("div", { className: "w-full h-full", children: c(r) }) }),
/* @__PURE__ */ t("div", { className: "absolute w-widget-sm h-widget-sm top-0 right-0", children: (i.includes("rightTop") || i.includes("all")) && /* @__PURE__ */ t("div", { className: "w-full h-full", children: c(n) }) }),
/* @__PURE__ */ t("div", { className: "absolute w-widget-sm h-widget-sm bottom-0 left-0", children: (i.includes("leftBottom") || i.includes("all")) && /* @__PURE__ */ t("div", { className: "w-full h-full", children: c(p) }) }),
/* @__PURE__ */ t("div", { className: "absolute w-widget-sm h-widget-sm bottom-0 right-0", children: (i.includes("rightBottom") || i.includes("all")) && /* @__PURE__ */ t("div", { className: "w-full h-full", children: c(g) }) })
] })
}
);
}
);
k.displayName = "FigmaButtonLayout";
export {
k as FigmaButtonLayout,
D as ThreeElementLayout,
T as V2AdvancedLayout,
A as WidgetCard,
N as figmaButtonLayoutVariants,
W as threeElementLayoutVariants,
j as v2AdvancedLayoutVariants,
E as widgetCardVariants
};