@wakastellar/ui 4.0.0-dev.0 → 4.0.1

package/dist/components/waka-feature-announcement/index.es.js

@@ -0,0 +1,429 @@
+"use client";
+"use client";
+import { cn as e } from "../../utils/cn.es.js";
+import * as t from "react";
+import { Calendar as n, ChevronLeft as r, ChevronRight as i, ExternalLink as a, Pause as o, Play as s, Sparkles as c, Tag as l, X as u } from "lucide-react";
+import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
+//#region src/components/waka-feature-announcement/index.tsx
+var m = {
+	sm: "max-w-sm",
+	md: "max-w-lg",
+	lg: "max-w-2xl"
+}, h = {
+	default: "bg-muted text-muted-foreground",
+	primary: "bg-primary text-primary-foreground",
+	success: "bg-green-500 text-white",
+	warning: "bg-amber-500 text-white"
+};
+function g(e) {
+	return e ? (typeof e == "string" ? new Date(e) : e).toLocaleDateString(void 0, {
+		year: "numeric",
+		month: "short",
+		day: "numeric"
+	}) : "";
+}
+function _({ media: n, className: r }) {
+	let [i, a] = t.useState(!1), c = t.useRef(null);
+	return n.type === "video" ? /* @__PURE__ */ p("div", {
+		className: e("relative group", r),
+		children: [/* @__PURE__ */ f("video", {
+			ref: c,
+			src: n.src,
+			poster: n.poster,
+			className: "w-full h-full object-cover rounded-lg",
+			loop: !0,
+			muted: !0,
+			playsInline: !0,
+			onPlay: () => a(!0),
+			onPause: () => a(!1),
+			children: /* @__PURE__ */ f("track", { kind: "captions" })
+		}), /* @__PURE__ */ f("button", {
+			type: "button",
+			onClick: () => {
+				c.current && (i ? c.current.pause() : c.current.play(), a(!i));
+			},
+			className: e("absolute inset-0 flex items-center justify-center", "bg-black/30 opacity-0 group-hover:opacity-100 transition-opacity rounded-lg", "focus:outline-none focus:opacity-100"),
+			"aria-label": i ? "Pause video" : "Play video",
+			children: /* @__PURE__ */ f("div", {
+				className: "bg-white/90 rounded-full p-3 shadow-lg",
+				children: f(i ? o : s, { className: "h-6 w-6 text-gray-900" })
+			})
+		})]
+	}) : /* @__PURE__ */ f("img", {
+		src: n.src,
+		alt: n.alt,
+		className: e("w-full h-full object-cover rounded-lg", r)
+	});
+}
+function v({ feature: t, isActive: r = !0, animation: i = "fadeIn" }) {
+	return /* @__PURE__ */ p("div", {
+		className: e("flex flex-col h-full", !r && "hidden", i === "slideIn" ? "animate-slideIn" : i === "fadeIn" ? "animate-fadeIn" : ""),
+		children: [
+			/* @__PURE__ */ p("div", {
+				className: "flex items-center gap-2 mb-3",
+				children: [
+					/* @__PURE__ */ p("span", {
+						className: e("inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium", h[t.badgeVariant || "primary"]),
+						children: [/* @__PURE__ */ f(c, { className: "h-3 w-3" }), t.badgeText || "What's New"]
+					}),
+					t.version && /* @__PURE__ */ p("span", {
+						className: "inline-flex items-center gap-1 text-xs text-muted-foreground",
+						children: [
+							/* @__PURE__ */ f(l, { className: "h-3 w-3" }),
+							"v",
+							t.version
+						]
+					}),
+					t.releaseDate && /* @__PURE__ */ p("span", {
+						className: "inline-flex items-center gap-1 text-xs text-muted-foreground",
+						children: [/* @__PURE__ */ f(n, { className: "h-3 w-3" }), g(t.releaseDate)]
+					})
+				]
+			}),
+			t.media && /* @__PURE__ */ f("div", {
+				className: "relative mb-4 aspect-video bg-muted rounded-lg overflow-hidden",
+				children: /* @__PURE__ */ f(_, {
+					media: t.media,
+					className: "absolute inset-0"
+				})
+			}),
+			/* @__PURE__ */ p("div", {
+				className: "flex-1",
+				children: [/* @__PURE__ */ f("h3", {
+					className: "text-lg font-semibold mb-2",
+					children: t.title
+				}), /* @__PURE__ */ f("p", {
+					className: "text-sm text-muted-foreground leading-relaxed",
+					children: t.description
+				})]
+			}),
+			t.learnMoreUrl && /* @__PURE__ */ p("a", {
+				href: t.learnMoreUrl,
+				target: "_blank",
+				rel: "noopener noreferrer",
+				className: e("inline-flex items-center gap-1.5 mt-4 text-sm font-medium text-primary", "hover:underline focus:outline-none focus:underline"),
+				children: [t.learnMoreText || "Learn more", /* @__PURE__ */ f(a, { className: "h-3.5 w-3.5" })]
+			}),
+			/* @__PURE__ */ f("style", { children: "\n        @keyframes slideIn {\n          from {\n            transform: translateX(20px);\n            opacity: 0;\n          }\n          to {\n            transform: translateX(0);\n            opacity: 1;\n          }\n        }\n        @keyframes fadeIn {\n          from { opacity: 0; }\n          to { opacity: 1; }\n        }\n        .animate-slideIn {\n          animation: slideIn 0.3s ease-out;\n        }\n        .animate-fadeIn {\n          animation: fadeIn 0.3s ease-out;\n        }\n      " })
+		]
+	});
+}
+function y({ total: t, current: n, onDotClick: r, className: i }) {
+	return t <= 1 ? null : /* @__PURE__ */ f("div", {
+		className: e("flex items-center justify-center gap-2", i),
+		children: Array.from({ length: t }).map((t, i) => /* @__PURE__ */ f("button", {
+			type: "button",
+			onClick: () => r(i),
+			className: e("w-2 h-2 rounded-full transition-all duration-200", "focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2", i === n ? "bg-primary w-6" : "bg-muted-foreground/30 hover:bg-muted-foreground/50"),
+			"aria-label": `Go to feature ${i + 1}`,
+			"aria-current": i === n ? "true" : void 0
+		}, i))
+	});
+}
+function b({ features: n, open: a, onOpenChange: o, onFeatureView: s, onLearnMore: c, onDismiss: l, dismissText: h = "Got it!", showDots: g = !0, showArrows: _ = !0, autoAdvance: b = !1, autoAdvanceInterval: x = 5e3, closeOnOverlayClick: S = !0, closeOnEscape: C = !0, size: w = "md", className: T, overlayClassName: E, currentIndex: D, setCurrentIndex: O }) {
+	let k = t.useRef(null), [A, j] = t.useState(!1), M = n[D], N = n.length > 1;
+	t.useEffect(() => {
+		if (b && a && N) return k.current = setInterval(() => {
+			O((D + 1) % n.length);
+		}, x), () => {
+			k.current && clearInterval(k.current);
+		};
+	}, [
+		b,
+		a,
+		N,
+		D,
+		n.length,
+		x,
+		O
+	]), t.useEffect(() => {
+		if (!C || !a) return;
+		let e = (e) => {
+			e.key === "Escape" && (o?.(!1), l?.());
+		};
+		return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
+	}, [
+		C,
+		a,
+		o,
+		l
+	]), t.useEffect(() => {
+		a && M && s?.(M, D);
+	}, [
+		a,
+		M,
+		D,
+		s
+	]);
+	let P = () => {
+		A || (j(!0), O(D === 0 ? n.length - 1 : D - 1), setTimeout(() => j(!1), 300));
+	}, F = () => {
+		A || (j(!0), O((D + 1) % n.length), setTimeout(() => j(!1), 300));
+	}, I = () => {
+		o?.(!1), l?.();
+	};
+	return a ? /* @__PURE__ */ p("div", {
+		className: "fixed inset-0 z-50 flex items-center justify-center p-4",
+		children: [
+			/* @__PURE__ */ f("div", {
+				className: e("absolute inset-0 bg-black/60 backdrop-blur-sm animate-backdropFadeIn", E),
+				onClick: () => {
+					S && I();
+				},
+				"aria-hidden": "true"
+			}),
+			/* @__PURE__ */ p("div", {
+				role: "dialog",
+				"aria-modal": "true",
+				"aria-labelledby": "feature-announcement-title",
+				className: e("relative w-full bg-background rounded-xl shadow-2xl border", "animate-modalSlideIn", m[w], T),
+				children: [
+					/* @__PURE__ */ f("button", {
+						type: "button",
+						onClick: I,
+						className: e("absolute top-3 right-3 z-10 p-1.5 rounded-full", "text-muted-foreground hover:text-foreground hover:bg-muted", "transition-colors focus:outline-none focus:ring-2 focus:ring-primary"),
+						"aria-label": "Close announcement",
+						children: /* @__PURE__ */ f(u, { className: "h-4 w-4" })
+					}),
+					/* @__PURE__ */ f("div", {
+						className: "p-6",
+						children: /* @__PURE__ */ f(v, {
+							feature: M,
+							isActive: !0,
+							animation: "fadeIn"
+						}, M.id)
+					}),
+					/* @__PURE__ */ p("div", {
+						className: "flex items-center justify-between px-6 pb-6",
+						children: [
+							/* @__PURE__ */ f("div", {
+								className: "flex items-center gap-2",
+								children: _ && N && /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ f("button", {
+									type: "button",
+									onClick: P,
+									disabled: A,
+									className: e("p-1.5 rounded-full", "text-muted-foreground hover:text-foreground hover:bg-muted", "transition-colors focus:outline-none focus:ring-2 focus:ring-primary", "disabled:opacity-50 disabled:cursor-not-allowed"),
+									"aria-label": "Previous feature",
+									children: /* @__PURE__ */ f(r, { className: "h-5 w-5" })
+								}), /* @__PURE__ */ f("button", {
+									type: "button",
+									onClick: F,
+									disabled: A,
+									className: e("p-1.5 rounded-full", "text-muted-foreground hover:text-foreground hover:bg-muted", "transition-colors focus:outline-none focus:ring-2 focus:ring-primary", "disabled:opacity-50 disabled:cursor-not-allowed"),
+									"aria-label": "Next feature",
+									children: /* @__PURE__ */ f(i, { className: "h-5 w-5" })
+								})] })
+							}),
+							g && /* @__PURE__ */ f(y, {
+								total: n.length,
+								current: D,
+								onDotClick: O
+							}),
+							/* @__PURE__ */ f("button", {
+								type: "button",
+								onClick: I,
+								className: e("px-4 py-2 rounded-lg text-sm font-medium", "bg-primary text-primary-foreground", "hover:bg-primary/90 transition-colors", "focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2"),
+								children: h
+							})
+						]
+					})
+				]
+			}),
+			/* @__PURE__ */ f("style", { children: "\n        @keyframes backdropFadeIn {\n          from { opacity: 0; }\n          to { opacity: 1; }\n        }\n        @keyframes modalSlideIn {\n          from {\n            opacity: 0;\n            transform: scale(0.95) translateY(10px);\n          }\n          to {\n            opacity: 1;\n            transform: scale(1) translateY(0);\n          }\n        }\n        .animate-backdropFadeIn {\n          animation: backdropFadeIn 0.2s ease-out;\n        }\n        .animate-modalSlideIn {\n          animation: modalSlideIn 0.3s ease-out;\n        }\n      " })
+		]
+	}) : null;
+}
+function x({ features: n, open: o, onOpenChange: s, onFeatureView: l, onDismiss: d, dismissText: m = "Dismiss", showDots: g = !0, showArrows: v = !0, autoAdvance: b = !1, autoAdvanceInterval: x = 5e3, className: S, currentIndex: C, setCurrentIndex: w }) {
+	let T = t.useRef(null), [E, D] = t.useState(!1), O = n[C], k = n.length > 1;
+	return t.useEffect(() => {
+		if (b && o && k) return T.current = setInterval(() => {
+			w((C + 1) % n.length);
+		}, x), () => {
+			T.current && clearInterval(T.current);
+		};
+	}, [
+		b,
+		o,
+		k,
+		C,
+		n.length,
+		x,
+		w
+	]), t.useEffect(() => {
+		o && O && l?.(O, C);
+	}, [
+		o,
+		O,
+		C,
+		l
+	]), o ? /* @__PURE__ */ p("div", {
+		className: e("relative w-full bg-background border rounded-xl shadow-lg overflow-hidden", "animate-bannerSlideIn", S),
+		children: [
+			/* @__PURE__ */ p("div", {
+				className: "flex items-start gap-4 p-4",
+				children: [
+					O.media && /* @__PURE__ */ f("div", {
+						className: "hidden sm:block flex-shrink-0 w-32 h-20 rounded-lg overflow-hidden bg-muted",
+						children: /* @__PURE__ */ f(_, { media: O.media })
+					}),
+					/* @__PURE__ */ p("div", {
+						className: "flex-1 min-w-0",
+						children: [
+							/* @__PURE__ */ p("div", {
+								className: "flex items-center gap-2 mb-1",
+								children: [/* @__PURE__ */ p("span", {
+									className: e("inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium", h[O.badgeVariant || "primary"]),
+									children: [/* @__PURE__ */ f(c, { className: "h-3 w-3" }), O.badgeText || "New"]
+								}), O.version && /* @__PURE__ */ p("span", {
+									className: "text-xs text-muted-foreground",
+									children: ["v", O.version]
+								})]
+							}),
+							/* @__PURE__ */ f("h4", {
+								className: "font-semibold text-sm truncate",
+								children: O.title
+							}),
+							/* @__PURE__ */ f("p", {
+								className: "text-xs text-muted-foreground line-clamp-2 mt-0.5",
+								children: O.description
+							}),
+							O.learnMoreUrl && /* @__PURE__ */ p("a", {
+								href: O.learnMoreUrl,
+								target: "_blank",
+								rel: "noopener noreferrer",
+								className: "inline-flex items-center gap-1 mt-1.5 text-xs font-medium text-primary hover:underline",
+								children: [O.learnMoreText || "Learn more", /* @__PURE__ */ f(a, { className: "h-3 w-3" })]
+							})
+						]
+					}),
+					/* @__PURE__ */ p("div", {
+						className: "flex items-center gap-2 flex-shrink-0",
+						children: [v && k && /* @__PURE__ */ p("div", {
+							className: "hidden sm:flex items-center gap-1",
+							children: [/* @__PURE__ */ f("button", {
+								type: "button",
+								onClick: () => {
+									E || (D(!0), w(C === 0 ? n.length - 1 : C - 1), setTimeout(() => D(!1), 300));
+								},
+								disabled: E,
+								className: "p-1 rounded text-muted-foreground hover:text-foreground hover:bg-muted transition-colors",
+								"aria-label": "Previous feature",
+								children: /* @__PURE__ */ f(r, { className: "h-4 w-4" })
+							}), /* @__PURE__ */ f("button", {
+								type: "button",
+								onClick: () => {
+									E || (D(!0), w((C + 1) % n.length), setTimeout(() => D(!1), 300));
+								},
+								disabled: E,
+								className: "p-1 rounded text-muted-foreground hover:text-foreground hover:bg-muted transition-colors",
+								"aria-label": "Next feature",
+								children: /* @__PURE__ */ f(i, { className: "h-4 w-4" })
+							})]
+						}), /* @__PURE__ */ f("button", {
+							type: "button",
+							onClick: () => {
+								s?.(!1), d?.();
+							},
+							className: "p-1 rounded text-muted-foreground hover:text-foreground hover:bg-muted transition-colors",
+							"aria-label": m,
+							children: /* @__PURE__ */ f(u, { className: "h-4 w-4" })
+						})]
+					})
+				]
+			}),
+			g && k && /* @__PURE__ */ f("div", {
+				className: "px-4 pb-3",
+				children: /* @__PURE__ */ f(y, {
+					total: n.length,
+					current: C,
+					onDotClick: w,
+					className: "justify-start"
+				})
+			}),
+			/* @__PURE__ */ f("style", { children: "\n        @keyframes bannerSlideIn {\n          from {\n            opacity: 0;\n            transform: translateY(-10px);\n          }\n          to {\n            opacity: 1;\n            transform: translateY(0);\n          }\n        }\n        .animate-bannerSlideIn {\n          animation: bannerSlideIn 0.3s ease-out;\n        }\n      " })
+		]
+	}) : null;
+}
+function S({ features: e, mode: n = "modal", open: r = !1, onOpenChange: i, onFeatureView: a, onLearnMore: o, onDismiss: s, dismissText: c, showDots: l = !0, showArrows: u = !0, autoAdvance: d = !1, autoAdvanceInterval: p = 5e3, closeOnOverlayClick: m = !0, closeOnEscape: h = !0, size: g = "md", className: _, overlayClassName: v }) {
+	let [y, S] = t.useState(0);
+	if (t.useEffect(() => {
+		S(0);
+	}, [e]), !e || e.length === 0) return null;
+	let C = {
+		features: e,
+		open: r,
+		onOpenChange: i,
+		onFeatureView: a,
+		onLearnMore: o,
+		onDismiss: s,
+		dismissText: c,
+		showDots: l,
+		showArrows: u,
+		autoAdvance: d,
+		autoAdvanceInterval: p,
+		className: _,
+		currentIndex: y,
+		setCurrentIndex: S
+	};
+	return n === "banner" ? /* @__PURE__ */ f(x, { ...C }) : /* @__PURE__ */ f(b, {
+		...C,
+		closeOnOverlayClick: m,
+		closeOnEscape: h,
+		size: g,
+		overlayClassName: v
+	});
+}
+function C({ defaultOpen: e = !1, storageKey: n, features: r = [], currentVersion: i, onOpen: a, onClose: o } = {}) {
+	let [s, c] = t.useState(e), [l, u] = t.useState(0), [d, f] = t.useState(!1);
+	return t.useEffect(() => {
+		if (n && typeof window < "u") try {
+			let e = localStorage.getItem(n);
+			if (e) {
+				let t = JSON.parse(e);
+				(i && t.version === i || !i && t.seen) && f(!0);
+			}
+		} catch {}
+	}, [n, i]), {
+		isOpen: s,
+		open: t.useCallback(() => {
+			c(!0), a?.();
+		}, [a]),
+		close: t.useCallback(() => {
+			c(!1), o?.();
+		}, [o]),
+		toggle: t.useCallback(() => {
+			c((e) => {
+				let t = !e;
+				return t ? a?.() : o?.(), t;
+			});
+		}, [a, o]),
+		onOpenChange: t.useCallback((e) => {
+			c(e), e ? a?.() : o?.();
+		}, [a, o]),
+		markAsSeen: t.useCallback(() => {
+			if (f(!0), n && typeof window < "u") try {
+				let e = i ? {
+					seen: !0,
+					version: i,
+					timestamp: Date.now()
+				} : {
+					seen: !0,
+					timestamp: Date.now()
+				};
+				localStorage.setItem(n, JSON.stringify(e));
+			} catch {}
+		}, [n, i]),
+		hasBeenSeen: d,
+		currentIndex: l,
+		setCurrentIndex: u,
+		nextFeature: t.useCallback(() => {
+			u((e) => (e + 1) % r.length);
+		}, [r.length]),
+		previousFeature: t.useCallback(() => {
+			u((e) => e === 0 ? r.length - 1 : e - 1);
+		}, [r.length]),
+		totalFeatures: r.length
+	};
+}
+//#endregion
+export { S as default, C as useFeatureAnnouncement };

package/dist/components/waka-feature-flag-row/index.cjs.js

@@ -0,0 +1 @@
+"use client";"use client";const e=require(`../../_virtual/_rolldown/runtime.cjs.js`),t=require(`../../utils/cn.cjs.js`),n=require(`../badge/index.cjs.js`),r=require(`../button/index.cjs.js`),i=require(`../dropdown-menu/index.cjs.js`),a=require(`../input/index.cjs.js`),o=require(`../progress/index.cjs.js`),s=require(`../switch/index.cjs.js`),c=require(`../tooltip/index.cjs.js`);let l=require(`react`);l=e.__toESM(l);let u=require(`lucide-react`),d=require(`react/jsx-runtime`);var f={enabled:{label:`Enabled`,color:`bg-green-500`},disabled:{label:`Disabled`,color:`bg-gray-500`},percentage:{label:`Percentage`,color:`bg-blue-500`},segment:{label:`Segment`,color:`bg-purple-500`}};function p(e){return e.toLocaleDateString(`fr-FR`,{day:`2-digit`,month:`short`})}function m({flag:e,onToggle:m,onPercentageChange:h,onEdit:g,onDelete:_,onViewHistory:v,onDuplicate:y,readOnly:b=!1,compact:x=!1,className:S}){let[C,w]=l.useState(e.percentage||0),T=f[e.status],E=e=>{w(Math.min(100,Math.max(0,parseInt(e)||0)))};return x?(0,d.jsxs)(`div`,{className:t.cn(`flex items-center gap-3 p-2 border-b hover:bg-muted/30 transition-colors`,!e.enabled&&`opacity-60`,S),children:[(0,d.jsx)(u.Flag,{className:t.cn(`h-4 w-4 shrink-0`,e.enabled?`text-green-500`:`text-muted-foreground`)}),(0,d.jsx)(`div`,{className:`flex-1 min-w-0`,children:(0,d.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,d.jsx)(`code`,{className:`font-medium text-sm truncate`,children:e.key}),e.environment&&(0,d.jsx)(n.Badge,{variant:`outline`,className:`text-xs`,children:e.environment})]})}),e.status===`percentage`&&(0,d.jsxs)(n.Badge,{variant:`secondary`,className:`text-xs`,children:[(0,d.jsx)(u.Percent,{className:`h-3 w-3 mr-1`}),e.percentage,`%`]}),e.status===`segment`&&e.segments&&(0,d.jsxs)(n.Badge,{variant:`secondary`,className:`text-xs`,children:[(0,d.jsx)(u.Users,{className:`h-3 w-3 mr-1`}),e.segments.length]}),(0,d.jsx)(s.Switch,{checked:e.enabled,onCheckedChange:m,disabled:b})]}):(0,d.jsx)(`div`,{className:t.cn(`border rounded-lg p-4 transition-all`,e.enabled?`bg-green-500/5 border-green-500/30`:`bg-muted/30`,S),children:(0,d.jsxs)(`div`,{className:`flex items-start gap-4`,children:[(0,d.jsx)(`div`,{className:t.cn(`w-10 h-10 rounded-lg flex items-center justify-center shrink-0`,e.enabled?`bg-green-500/20`:`bg-muted`),children:(0,d.jsx)(u.Flag,{className:t.cn(`h-5 w-5`,e.enabled?`text-green-500`:`text-muted-foreground`)})}),(0,d.jsxs)(`div`,{className:`flex-1 min-w-0`,children:[(0,d.jsxs)(`div`,{className:`flex items-center gap-2 flex-wrap`,children:[(0,d.jsx)(`code`,{className:`font-semibold`,children:e.key}),(0,d.jsx)(n.Badge,{className:t.cn(`text-white text-xs`,T.color),children:T.label}),e.environment&&(0,d.jsx)(n.Badge,{variant:`outline`,className:`text-xs`,children:e.environment}),e.tags?.map(e=>(0,d.jsx)(n.Badge,{variant:`secondary`,className:`text-xs`,children:e},e))]}),(0,d.jsx)(`div`,{className:`text-sm font-medium mt-1`,children:e.name}),e.description&&(0,d.jsx)(`p`,{className:`text-sm text-muted-foreground mt-1`,children:e.description}),e.status===`percentage`&&(0,d.jsxs)(`div`,{className:`mt-3 space-y-2`,children:[(0,d.jsxs)(`div`,{className:`flex items-center gap-3`,children:[(0,d.jsx)(u.Percent,{className:`h-4 w-4 text-muted-foreground`}),(0,d.jsx)(`div`,{className:`flex-1 max-w-xs`,children:(0,d.jsx)(o.Progress,{value:C,className:`h-2`})}),(0,d.jsxs)(`div`,{className:`flex items-center gap-1`,children:[(0,d.jsx)(a.Input,{type:`number`,min:0,max:100,value:C,onChange:e=>E(e.target.value),onBlur:()=>{C!==e.percentage&&h?.(C)},className:`w-16 h-8 text-center`,disabled:b}),(0,d.jsx)(`span`,{className:`text-sm text-muted-foreground`,children:`%`})]})]}),(0,d.jsxs)(`p`,{className:`text-xs text-muted-foreground`,children:[C,`% of users will see this feature`]})]}),e.status===`segment`&&e.segments&&e.segments.length>0&&(0,d.jsxs)(`div`,{className:`mt-3`,children:[(0,d.jsxs)(`div`,{className:`flex items-center gap-2 text-sm text-muted-foreground mb-2`,children:[(0,d.jsx)(u.Target,{className:`h-4 w-4`}),`Targeting `,e.segments.length,` segment`,e.segments.length>1?`s`:``]}),(0,d.jsx)(`div`,{className:`flex flex-wrap gap-2`,children:e.segments.map(e=>(0,d.jsx)(c.TooltipProvider,{children:(0,d.jsxs)(c.Tooltip,{children:[(0,d.jsx)(c.TooltipTrigger,{children:(0,d.jsxs)(n.Badge,{variant:`secondary`,className:`text-xs`,children:[(0,d.jsx)(u.Users,{className:`h-3 w-3 mr-1`}),e.name]})}),e.description&&(0,d.jsx)(c.TooltipContent,{children:e.description})]})},e.id))})]}),(0,d.jsxs)(`div`,{className:`flex items-center gap-4 mt-3 text-xs text-muted-foreground`,children:[(0,d.jsxs)(`span`,{className:`flex items-center gap-1`,children:[(0,d.jsx)(u.Calendar,{className:`h-3 w-3`}),`Created `,p(e.createdAt),e.createdBy&&` by ${e.createdBy}`]}),(0,d.jsxs)(`span`,{className:`flex items-center gap-1`,children:[(0,d.jsx)(u.Clock,{className:`h-3 w-3`}),`Updated `,p(e.updatedAt)]})]})]}),(0,d.jsxs)(`div`,{className:`flex items-center gap-2 shrink-0`,children:[(0,d.jsx)(s.Switch,{checked:e.enabled,onCheckedChange:m,disabled:b}),(0,d.jsxs)(i.DropdownMenu,{children:[(0,d.jsx)(i.DropdownMenuTrigger,{asChild:!0,children:(0,d.jsx)(r.Button,{variant:`ghost`,size:`sm`,className:`h-8 w-8 p-0`,children:(0,d.jsx)(u.MoreVertical,{className:`h-4 w-4`})})}),(0,d.jsxs)(i.DropdownMenuContent,{align:`end`,children:[g&&(0,d.jsxs)(i.DropdownMenuItem,{onClick:g,children:[(0,d.jsx)(u.Edit,{className:`h-4 w-4 mr-2`}),`Edit`]}),v&&(0,d.jsxs)(i.DropdownMenuItem,{onClick:v,children:[(0,d.jsx)(u.History,{className:`h-4 w-4 mr-2`}),`View History`]}),y&&(0,d.jsxs)(i.DropdownMenuItem,{onClick:y,children:[(0,d.jsx)(u.Copy,{className:`h-4 w-4 mr-2`}),`Duplicate`]}),_&&(0,d.jsxs)(d.Fragment,{children:[(0,d.jsx)(i.DropdownMenuSeparator,{}),(0,d.jsxs)(i.DropdownMenuItem,{onClick:_,className:`text-destructive`,children:[(0,d.jsx)(u.Trash2,{className:`h-4 w-4 mr-2`}),`Delete`]})]})]})]})]})]})})}var h=[{id:`1`,key:`new_checkout_flow`,name:`New Checkout Flow`,description:`Enable the redesigned checkout experience with improved UX`,status:`percentage`,enabled:!0,percentage:25,createdAt:new Date(Date.now()-720*36e5),updatedAt:new Date(Date.now()-48*36e5),createdBy:`product-team`,environment:`production`,tags:[`checkout`,`experiment`]},{id:`2`,key:`dark_mode_v2`,name:`Dark Mode V2`,description:`Updated dark mode with better contrast and accessibility`,status:`enabled`,enabled:!0,createdAt:new Date(Date.now()-1440*36e5),updatedAt:new Date(Date.now()-168*36e5),environment:`production`,tags:[`ui`,`accessibility`]},{id:`3`,key:`beta_features`,name:`Beta Features Access`,description:`Allow access to beta features for selected user segments`,status:`segment`,enabled:!0,segments:[{id:`s1`,name:`Beta Testers`,description:`Users who opted into beta program`},{id:`s2`,name:`Premium Users`,description:`Users with premium subscription`}],createdAt:new Date(Date.now()-2160*36e5),updatedAt:new Date(Date.now()-24*36e5),createdBy:`engineering`,environment:`production`},{id:`4`,key:`legacy_api`,name:`Legacy API Support`,description:`Maintain backward compatibility with v1 API`,status:`disabled`,enabled:!1,createdAt:new Date(Date.now()-4320*36e5),updatedAt:new Date(Date.now()-336*36e5),environment:`production`,tags:[`deprecated`]}];exports.WakaFeatureFlagRow=m,exports.defaultFeatureFlags=h;