@mova-ui/react 0.1.0 → 0.4.1

package/dist/catalog/components/css-animations/whimsical/YuiPhysicsExperiments.js

@@ -0,0 +1,247 @@
+"use client";
+import {
+  useLoopFlg
+} from "../../../../catalog-chunks/chunk-KTP5OAIN.js";
+
+// .generated/catalog/components/css-animations/whimsical/YuiPhysicsExperiments.tsx
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function NeonSignDraw({
+  trigger = "hover",
+  loop = true,
+  theme = "dark",
+  className = ""
+}) {
+  const loopFlg = useLoopFlg(true, 2800);
+  const [hoverKey, setHoverKey] = useState(0);
+  const activeKey = loop ? `${loopFlg}-${hoverKey}` : `${hoverKey}`;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `relative w-full h-full rounded-2xl overflow-hidden flex justify-center items-center cursor-pointer transition-all duration-300 bg-transparent ${className}`,
+      onMouseEnter: trigger === "hover" ? () => setHoverKey((k) => k + 1) : void 0,
+      onClick: trigger === "click" ? () => setHoverKey((k) => k + 1) : void 0,
+      children: [
+        /* @__PURE__ */ jsx("style", { children: `
+        @keyframes neon_draw_line {
+          0% { opacity: 0; stroke-dasharray: 0 240px; }
+          20%, 100% { opacity: 1; stroke-dasharray: 240px 240px; }
+        }
+        @keyframes neon_clear_line {
+          0%, 65% { stroke-dashoffset: 0; opacity: 1; }
+          100% { stroke-dashoffset: -240px; opacity: 0; }
+        }
+        .neon-stroke-path {
+          --sl: 240px;
+          stroke-dasharray: 240px 240px;
+          animation: 
+            neon_draw_line 1.2s ease-in-out 0s both, 
+            neon_clear_line 1.2s ease-in-out 1.4s forwards;
+        }
+      ` }),
+        /* @__PURE__ */ jsx("div", { className: "relative w-[130px] h-[65px] flex items-center justify-center", children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 160 80", className: "w-full h-full", fill: "none", stroke: theme === "dark" ? "#0a84ff" : "#0071e3", strokeWidth: "5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("polyline", { className: "neon-stroke-path", points: "15,40 50,40 70,18 90,62 110,40 145,40" }) }) }, activeKey)
+      ]
+    }
+  );
+}
+function SuddenBrake({
+  trigger = "hover",
+  loop = true,
+  theme = "dark",
+  className = ""
+}) {
+  const loopFlg = useLoopFlg(true, 2800);
+  const [hoverKey, setHoverKey] = useState(0);
+  const activeKey = loop ? `${loopFlg}-${hoverKey}` : `${hoverKey}`;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `relative w-full h-full rounded-2xl overflow-hidden flex justify-center items-center cursor-pointer transition-all duration-300 bg-transparent ${className}`,
+      onMouseEnter: trigger === "hover" ? () => setHoverKey((k) => k + 1) : void 0,
+      onClick: trigger === "click" ? () => setHoverKey((k) => k + 1) : void 0,
+      children: [
+        /* @__PURE__ */ jsx("style", { children: `
+        @keyframes brake_translate {
+          0% { transform: translateX(180px); }
+          100% { transform: translateX(0); }
+        }
+        @keyframes brake_rotate {
+          0% { transform: rotate(0deg); }
+          25% { transform: rotate(-18deg); }
+          55% { transform: rotate(4deg); }
+          75% { transform: rotate(-2deg); }
+          100% { transform: rotate(0deg); }
+        }
+        .brake-car-wrapper {
+          animation: brake_translate 0.75s cubic-bezier(0, 0.7, 0.6, 1) 0s both;
+        }
+        .brake-car-body {
+          transform-origin: left bottom;
+          animation: brake_rotate 0.9s ease-in-out 0.65s both;
+        }
+      ` }),
+        /* @__PURE__ */ jsxs("div", { className: "relative w-[130px] h-[75px] flex items-center justify-center overflow-hidden", children: [
+          /* @__PURE__ */ jsx("div", { className: "brake-car-wrapper", children: /* @__PURE__ */ jsxs("div", { className: "brake-car-body flex flex-col items-center", children: [
+            /* @__PURE__ */ jsx("div", { className: "w-[52px] h-[34px] rounded-xl bg-blue-600 shadow-md flex items-center justify-center", children: /* @__PURE__ */ jsx("div", { className: "w-4 h-4 rounded-md bg-white/90" }) }),
+            /* @__PURE__ */ jsxs("div", { className: "flex justify-between w-[44px] -mt-1.5", children: [
+              /* @__PURE__ */ jsx("div", { className: "w-3.5 h-3.5 rounded-full bg-neutral-700 border-2 border-neutral-500" }),
+              /* @__PURE__ */ jsx("div", { className: "w-3.5 h-3.5 rounded-full bg-neutral-700 border-2 border-neutral-500" })
+            ] })
+          ] }) }),
+          /* @__PURE__ */ jsx("div", { className: "absolute bottom-3 left-3 right-3 h-[2px] rounded-full bg-neutral-700/60" })
+        ] }, activeKey)
+      ]
+    }
+  );
+}
+function RollingTumble({
+  trigger = "hover",
+  loop = true,
+  theme = "dark",
+  className = ""
+}) {
+  const loopFlg = useLoopFlg(true, 2600);
+  const [hoverKey, setHoverKey] = useState(0);
+  const activeKey = loop ? `${loopFlg}-${hoverKey}` : `${hoverKey}`;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `relative w-full h-full rounded-2xl overflow-hidden flex justify-center items-center cursor-pointer transition-all duration-300 bg-transparent ${className}`,
+      onMouseEnter: trigger === "hover" ? () => setHoverKey((k) => k + 1) : void 0,
+      onClick: trigger === "click" ? () => setHoverKey((k) => k + 1) : void 0,
+      children: [
+        /* @__PURE__ */ jsx("style", { children: `
+        @keyframes rolling_box_step {
+          0% { transform: translateX(-40px) rotate(0deg); }
+          30% { transform: translateX(-10px) rotate(90deg); }
+          60% { transform: translateX(20px) rotate(180deg); }
+          85%, 100% { transform: translateX(45px) rotate(270deg); }
+        }
+        .rolling-cube {
+          transform-origin: center center;
+          animation: rolling_box_step 2.2s cubic-bezier(0.34, 1.56, 0.64, 1) infinite both;
+        }
+      ` }),
+        /* @__PURE__ */ jsxs("div", { className: "relative w-[130px] h-[75px] flex items-center justify-center", children: [
+          /* @__PURE__ */ jsx("div", { className: "w-[34px] h-[34px] rounded-xl bg-blue-500 rolling-cube shadow-md flex items-center justify-center", children: /* @__PURE__ */ jsx("div", { className: "w-2.5 h-2.5 rounded-full bg-white/90" }) }),
+          /* @__PURE__ */ jsx("div", { className: "absolute bottom-4 left-4 right-4 h-[2px] rounded-full bg-neutral-700/60" })
+        ] }, activeKey)
+      ]
+    }
+  );
+}
+function PageTurnCurl({
+  trigger = "hover",
+  loop = true,
+  theme = "dark",
+  className = ""
+}) {
+  const loopFlg = useLoopFlg(true, 3e3);
+  const [hoverKey, setHoverKey] = useState(0);
+  const activeKey = loop ? `${loopFlg}-${hoverKey}` : `${hoverKey}`;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `relative w-full h-full rounded-2xl overflow-hidden flex justify-center items-center cursor-pointer transition-all duration-300 bg-transparent ${className}`,
+      onMouseEnter: trigger === "hover" ? () => setHoverKey((k) => k + 1) : void 0,
+      onClick: trigger === "click" ? () => setHoverKey((k) => k + 1) : void 0,
+      children: [
+        /* @__PURE__ */ jsx("style", { children: `
+        @keyframes page_curl_rise {
+          0%, 100% { transform: translateY(60px) rotateX(45deg); opacity: 0; border-radius: 4px 4px 28px 28px; }
+          40%, 75% { transform: translateY(0) rotateX(0deg); opacity: 1; border-radius: 16px; }
+        }
+        .page-sheet {
+          transform-origin: bottom center;
+          animation: page_curl_rise 3s cubic-bezier(0.78, 0, 0.2, 1) infinite both;
+        }
+      ` }),
+        /* @__PURE__ */ jsxs("div", { className: "relative w-[100px] h-[75px] flex items-center justify-center", children: [
+          /* @__PURE__ */ jsx("div", { className: `absolute w-[80px] h-[60px] rounded-2xl border ${theme === "dark" ? "bg-[#1c1c1e] border-[#2c2c2e]" : "bg-white border-[#d2d2d7]"}`, children: /* @__PURE__ */ jsx("div", { className: "absolute bottom-2.5 left-3 w-8 h-1.5 rounded-full bg-neutral-600" }) }),
+          /* @__PURE__ */ jsxs("div", { className: "absolute w-[80px] h-[60px] page-sheet bg-blue-600 shadow-lg flex flex-col items-center justify-center gap-1.5 p-2", children: [
+            /* @__PURE__ */ jsx("div", { className: "w-10 h-2 rounded-full bg-white/90" }),
+            /* @__PURE__ */ jsx("div", { className: "w-6 h-1.5 rounded-full bg-white/60" })
+          ] })
+        ] }, activeKey)
+      ]
+    }
+  );
+}
+function ShutterStepBlocks({
+  trigger = "hover",
+  loop = true,
+  theme = "dark",
+  className = ""
+}) {
+  const loopFlg = useLoopFlg(true, 2800);
+  const [hoverKey, setHoverKey] = useState(0);
+  const activeKey = loop ? `${loopFlg}-${hoverKey}` : `${hoverKey}`;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `relative w-full h-full rounded-2xl overflow-hidden flex justify-center items-center cursor-pointer transition-all duration-300 bg-transparent ${className}`,
+      onMouseEnter: trigger === "hover" ? () => setHoverKey((k) => k + 1) : void 0,
+      onClick: trigger === "click" ? () => setHoverKey((k) => k + 1) : void 0,
+      children: [
+        /* @__PURE__ */ jsx("style", { children: `
+        @keyframes shutter_step_slice {
+          0%, 100% { transform: scaleX(0); }
+          40%, 75% { transform: scaleX(1); }
+        }
+        .shutter-slice {
+          transform-origin: left center;
+          animation: shutter_step_slice 2.8s cubic-bezier(0.65, 0, 0.35, 1) infinite both;
+        }
+      ` }),
+        /* @__PURE__ */ jsx("div", { className: "relative w-[100px] h-[65px] flex flex-col justify-between py-1", children: [0, 1, 2, 3].map((i) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: `h-[11px] rounded-md shutter-slice ${i % 2 === 0 ? "bg-blue-600" : "bg-blue-400"}`,
+            style: { animationDelay: `${i * 0.08}s` }
+          },
+          i
+        )) }, activeKey)
+      ]
+    }
+  );
+}
+function InertiaSkidStop({
+  trigger = "hover",
+  loop = true,
+  theme = "dark",
+  className = ""
+}) {
+  const loopFlg = useLoopFlg(true, 2800);
+  const [hoverKey, setHoverKey] = useState(0);
+  const activeKey = loop ? `${loopFlg}-${hoverKey}` : `${hoverKey}`;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `relative w-full h-full rounded-2xl overflow-hidden flex justify-center items-center cursor-pointer transition-all duration-300 bg-transparent ${className}`,
+      onMouseEnter: trigger === "hover" ? () => setHoverKey((k) => k + 1) : void 0,
+      onClick: trigger === "click" ? () => setHoverKey((k) => k + 1) : void 0,
+      children: [
+        /* @__PURE__ */ jsx("style", { children: `
+        @keyframes inertia_slide {
+          0% { transform: translateX(-80px) skewX(20deg); }
+          50% { transform: translateX(10px) skewX(-15deg); }
+          75% { transform: translateX(-4px) skewX(5deg); }
+          100% { transform: translateX(0) skewX(0deg); }
+        }
+        .inertia-block {
+          animation: inertia_slide 2.8s cubic-bezier(0.25, 1, 0.5, 1) infinite both;
+        }
+      ` }),
+        /* @__PURE__ */ jsx("div", { className: "relative w-[130px] h-[75px] flex items-center justify-center", children: /* @__PURE__ */ jsx("div", { className: "w-[50px] h-[32px] rounded-xl bg-blue-500 inertia-block shadow-md flex items-center justify-center", children: /* @__PURE__ */ jsx("div", { className: "w-8 h-1.5 rounded-full bg-white" }) }) }, activeKey)
+      ]
+    }
+  );
+}
+export {
+  InertiaSkidStop,
+  NeonSignDraw,
+  PageTurnCurl,
+  RollingTumble,
+  ShutterStepBlocks,
+  SuddenBrake
+};

package/dist/catalog/components/css-animations/yui-components/RedesignedUiTrios.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+export declare function SegmentedArcMeter({ theme }: {
+    theme?: 'dark' | 'light';
+}): React.JSX.Element;
+export declare function SegmentedStepperDots({ theme }: {
+    theme?: 'dark' | 'light';
+}): React.JSX.Element;
+export declare function CardGlancePreview({ theme }: {
+    theme?: 'dark' | 'light';
+}): React.JSX.Element;
+export declare function VerticalWheelCounter({ theme }: {
+    theme?: 'dark' | 'light';
+}): React.JSX.Element;
+export declare function PerspectiveLayoutSwitcher({ theme }: {
+    theme?: 'dark' | 'light';
+}): React.JSX.Element;
+export declare function BookmarkSavePill({ theme }: {
+    theme?: 'dark' | 'light';
+}): React.JSX.Element;

package/dist/catalog/components/css-animations/yui-components/RedesignedUiTrios.js

@@ -0,0 +1,174 @@
+"use client";
+
+// .generated/catalog/components/css-animations/yui-components/RedesignedUiTrios.tsx
+import { useState } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import {
+  Bookmark,
+  Check,
+  ChevronUp,
+  ChevronDown,
+  Layers,
+  LayoutGrid,
+  Info
+} from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function SegmentedArcMeter({ theme = "dark" }) {
+  const [level, setLevel] = useState(3);
+  const segments = [1, 2, 3, 4];
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      onClick: () => setLevel(level % 4 + 1),
+      className: "flex items-center gap-1.5 cursor-pointer p-2 select-none",
+      children: [
+        segments.map((s) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: `w-3 h-8 rounded-full transition-all duration-300 ${s <= level ? "bg-blue-600 scale-y-100" : theme === "dark" ? "bg-neutral-800 scale-y-75" : "bg-neutral-200 scale-y-75"}`
+          },
+          s
+        )),
+        /* @__PURE__ */ jsxs("span", { className: "text-xs font-mono font-bold ml-1.5", children: [
+          level * 25,
+          "%"
+        ] })
+      ]
+    }
+  );
+}
+function SegmentedStepperDots({ theme = "dark" }) {
+  const [active, setActive] = useState(1);
+  const total = 4;
+  return /* @__PURE__ */ jsx("div", { className: `flex items-center gap-2 p-2 rounded-full border ${theme === "dark" ? "bg-[#181818] border-neutral-700" : "bg-neutral-100 border-neutral-200"}`, children: Array.from({ length: total }).map((_, i) => {
+    const isActive = active === i;
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: () => setActive(i),
+        className: "relative cursor-pointer border-0 bg-transparent p-0 flex items-center justify-center",
+        children: /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            animate: { width: isActive ? 24 : 8, backgroundColor: isActive ? "#0071e3" : theme === "dark" ? "#555" : "#ccc" },
+            transition: { type: "spring", bounce: 0.25, duration: 0.35 },
+            className: "h-2 rounded-full"
+          }
+        )
+      },
+      i
+    );
+  }) });
+}
+function CardGlancePreview({ theme = "dark" }) {
+  const [open, setOpen] = useState(false);
+  return /* @__PURE__ */ jsxs("div", { className: "relative flex flex-col items-center justify-center", children: [
+    /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsxs(
+      motion.div,
+      {
+        initial: { opacity: 0, y: 6, scale: 0.92 },
+        animate: { opacity: 1, y: -8, scale: 1 },
+        exit: { opacity: 0, y: 4, scale: 0.92 },
+        className: `absolute -top-12 px-3 py-2 rounded-xl border text-[11px] shadow-xl flex items-center gap-2 whitespace-nowrap z-20 pointer-events-none ${theme === "dark" ? "bg-[#1c1c1e] border-neutral-700 text-neutral-200" : "bg-white border-neutral-200 text-neutral-900"}`,
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "w-2 h-2 rounded-full bg-blue-500" }),
+          /* @__PURE__ */ jsx("span", { children: "Interactive Glance Preview" })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      motion.button,
+      {
+        onMouseEnter: () => setOpen(true),
+        onMouseLeave: () => setOpen(false),
+        whileHover: { scale: 1.08 },
+        whileTap: { scale: 0.92 },
+        className: `w-10 h-10 rounded-2xl border flex items-center justify-center cursor-pointer shadow-sm ${theme === "dark" ? "bg-[#1e1e1e] border-neutral-700 text-blue-400" : "bg-white border-neutral-200 text-blue-600"}`,
+        children: /* @__PURE__ */ jsx(Info, { className: "w-5 h-5" })
+      }
+    )
+  ] });
+}
+function VerticalWheelCounter({ theme = "dark" }) {
+  const [count, setCount] = useState(5);
+  return /* @__PURE__ */ jsxs("div", { className: `flex items-center gap-2 p-1 px-2.5 rounded-2xl border ${theme === "dark" ? "bg-[#181818] border-neutral-700" : "bg-white border-neutral-200"}`, children: [
+    /* @__PURE__ */ jsx("div", { className: "w-6 h-7 overflow-hidden relative flex items-center justify-center font-mono font-bold text-sm", children: /* @__PURE__ */ jsx(
+      motion.span,
+      {
+        initial: { y: 15, opacity: 0 },
+        animate: { y: 0, opacity: 1 },
+        exit: { y: -15, opacity: 0 },
+        transition: { duration: 0.15 },
+        className: "absolute",
+        children: count
+      },
+      count
+    ) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: () => setCount(count + 1),
+          className: "p-0.5 hover:bg-neutral-500/20 rounded cursor-pointer border-0 bg-transparent text-inherit",
+          children: /* @__PURE__ */ jsx(ChevronUp, { className: "w-3.5 h-3.5" })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: () => setCount(Math.max(1, count - 1)),
+          className: "p-0.5 hover:bg-neutral-500/20 rounded cursor-pointer border-0 bg-transparent text-inherit",
+          children: /* @__PURE__ */ jsx(ChevronDown, { className: "w-3.5 h-3.5" })
+        }
+      )
+    ] })
+  ] });
+}
+function PerspectiveLayoutSwitcher({ theme = "dark" }) {
+  const [layout, setLayout] = useState("grid");
+  return /* @__PURE__ */ jsxs(
+    motion.button,
+    {
+      whileTap: { scale: 0.94 },
+      onClick: () => setLayout(layout === "grid" ? "stack" : "grid"),
+      className: `flex items-center gap-2 px-4 py-2 rounded-2xl border text-xs font-semibold cursor-pointer transition-colors ${theme === "dark" ? "bg-[#181818] border-neutral-700 text-white" : "bg-white border-neutral-200 text-neutral-900"}`,
+      children: [
+        /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            initial: { rotate: -45, scale: 0.8 },
+            animate: { rotate: 0, scale: 1 },
+            transition: { duration: 0.2 },
+            children: layout === "grid" ? /* @__PURE__ */ jsx(LayoutGrid, { className: "w-4 h-4 text-blue-500" }) : /* @__PURE__ */ jsx(Layers, { className: "w-4 h-4 text-blue-500" })
+          },
+          layout
+        ),
+        /* @__PURE__ */ jsx("span", { children: layout === "grid" ? "Grid View" : "Stack View" })
+      ]
+    }
+  );
+}
+function BookmarkSavePill({ theme = "dark" }) {
+  const [saved, setSaved] = useState(false);
+  return /* @__PURE__ */ jsxs(
+    motion.button,
+    {
+      whileHover: { scale: 1.05 },
+      whileTap: { scale: 0.94 },
+      onClick: () => setSaved(!saved),
+      className: `flex items-center gap-2 px-4 py-2 rounded-full border text-xs font-semibold cursor-pointer transition-all ${saved ? "bg-blue-600 border-blue-500 text-white shadow-md" : theme === "dark" ? "bg-[#1e1e1e] border-neutral-700 text-white" : "bg-white border-neutral-200 text-neutral-900"}`,
+      children: [
+        saved ? /* @__PURE__ */ jsx(Check, { className: "w-3.5 h-3.5 text-white" }) : /* @__PURE__ */ jsx(Bookmark, { className: "w-3.5 h-3.5 text-blue-400" }),
+        /* @__PURE__ */ jsx("span", { children: saved ? "Saved" : "Save Item" })
+      ]
+    }
+  );
+}
+export {
+  BookmarkSavePill,
+  CardGlancePreview,
+  PerspectiveLayoutSwitcher,
+  SegmentedArcMeter,
+  SegmentedStepperDots,
+  VerticalWheelCounter
+};

package/dist/catalog/components/css-animations/yui-components/UiKitTrios.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+export declare function FilterTagPill({ theme }: {
+    theme?: 'dark' | 'light';
+}): React.JSX.Element;
+export declare function SubmenuFlyout({ theme }: {
+    theme?: 'dark' | 'light';
+}): React.JSX.Element;
+export declare function MagneticIconButton({ theme }: {
+    theme?: 'dark' | 'light';
+}): React.JSX.Element;
+export declare function MorphActionPill({ theme }: {
+    theme?: 'dark' | 'light';
+}): React.JSX.Element;
+export declare function RadialProgressRing({ theme }: {
+    theme?: 'dark' | 'light';
+}): React.JSX.Element;
+export declare function SegmentedStepBar({ theme }: {
+    theme?: 'dark' | 'light';
+}): React.JSX.Element;

package/dist/catalog/components/css-animations/yui-components/UiKitTrios.js

@@ -0,0 +1,147 @@
+"use client";
+
+// .generated/catalog/components/css-animations/yui-components/UiKitTrios.tsx
+import { useState } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { ArrowRight, ChevronRight } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function FilterTagPill({ theme = "dark" }) {
+  const [selected, setSelected] = useState(0);
+  const tags = ["All", "Featured", "New"];
+  return /* @__PURE__ */ jsx("div", { className: `flex items-center gap-1 p-1 rounded-2xl border ${theme === "dark" ? "bg-[#181818] border-neutral-700" : "bg-neutral-100 border-neutral-200"}`, children: tags.map((tag, idx) => /* @__PURE__ */ jsxs(
+    "button",
+    {
+      onClick: () => setSelected(idx),
+      className: "relative px-3 py-1.5 rounded-xl text-xs font-semibold cursor-pointer border-0 bg-transparent",
+      children: [
+        selected === idx && /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            layoutId: "filter-tag-pill",
+            transition: { type: "spring", bounce: 0.2, duration: 0.35 },
+            className: `absolute inset-0 rounded-xl ${theme === "dark" ? "bg-blue-600" : "bg-blue-600 text-white"}`
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: `relative z-10 ${selected === idx ? "text-white font-bold" : theme === "dark" ? "text-neutral-400" : "text-neutral-600"}`, children: tag })
+      ]
+    },
+    tag
+  )) });
+}
+function SubmenuFlyout({ theme = "dark" }) {
+  const [open, setOpen] = useState(false);
+  return /* @__PURE__ */ jsxs("div", { className: "relative flex flex-col items-center", children: [
+    /* @__PURE__ */ jsxs(
+      motion.button,
+      {
+        whileTap: { scale: 0.95 },
+        onClick: () => setOpen(!open),
+        className: `flex items-center gap-2 px-4 py-2 rounded-2xl border text-xs font-semibold cursor-pointer ${theme === "dark" ? "bg-[#181818] border-neutral-700 text-white" : "bg-white border-neutral-200 text-neutral-900"}`,
+        children: [
+          /* @__PURE__ */ jsx("span", { children: "View Details" }),
+          /* @__PURE__ */ jsx(ChevronRight, { className: "w-3.5 h-3.5 text-neutral-400" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        initial: { opacity: 0, x: -6 },
+        animate: { opacity: 1, x: 4 },
+        exit: { opacity: 0, x: -6 },
+        className: `absolute left-full top-0 ml-1 p-1 rounded-2xl border shadow-xl flex flex-col gap-0.5 z-30 ${theme === "dark" ? "bg-[#181818] border-neutral-700 text-white" : "bg-white border-neutral-200 text-neutral-900"}`,
+        children: /* @__PURE__ */ jsx("div", { className: "px-3 py-1.5 text-[11px] rounded-lg hover:bg-blue-600 hover:text-white cursor-pointer whitespace-nowrap", children: "Expanded Panel" })
+      }
+    ) })
+  ] });
+}
+function MagneticIconButton({ theme = "dark" }) {
+  return /* @__PURE__ */ jsxs(
+    motion.button,
+    {
+      whileHover: { scale: 1.05, x: 3 },
+      whileTap: { scale: 0.95 },
+      className: `flex items-center gap-2 px-5 py-2.5 rounded-full border text-xs font-semibold cursor-pointer ${theme === "dark" ? "bg-[#1e1e1e] border-neutral-700 text-white" : "bg-white border-neutral-200 text-neutral-900"}`,
+      children: [
+        /* @__PURE__ */ jsx("span", { children: "Explore Docs" }),
+        /* @__PURE__ */ jsx(ArrowRight, { className: "w-3.5 h-3.5 text-blue-400" })
+      ]
+    }
+  );
+}
+function MorphActionPill({ theme = "dark" }) {
+  const [expanded, setExpanded] = useState(false);
+  return /* @__PURE__ */ jsxs(
+    motion.div,
+    {
+      layout: true,
+      onMouseEnter: () => setExpanded(true),
+      onMouseLeave: () => setExpanded(false),
+      className: `flex items-center gap-2 px-4 py-2 rounded-full border text-xs font-semibold cursor-pointer ${theme === "dark" ? "bg-blue-600 border-blue-500 text-white" : "bg-blue-600 border-blue-500 text-white"}`,
+      children: [
+        /* @__PURE__ */ jsx("span", { children: "Action" }),
+        /* @__PURE__ */ jsx(AnimatePresence, { children: expanded && /* @__PURE__ */ jsx(
+          motion.span,
+          {
+            initial: { opacity: 0, width: 0 },
+            animate: { opacity: 1, width: "auto" },
+            exit: { opacity: 0, width: 0 },
+            className: "text-[11px] font-normal whitespace-nowrap overflow-hidden",
+            children: "\u2192 Launch"
+          }
+        ) })
+      ]
+    }
+  );
+}
+function RadialProgressRing({ theme = "dark" }) {
+  const [val, setVal] = useState(75);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      onClick: () => setVal(val === 75 ? 100 : 75),
+      className: "relative w-12 h-12 flex items-center justify-center cursor-pointer",
+      children: [
+        /* @__PURE__ */ jsxs("svg", { className: "w-full h-full -rotate-90", viewBox: "0 0 36 36", children: [
+          /* @__PURE__ */ jsx("circle", { cx: "18", cy: "18", r: "14", fill: "none", stroke: theme === "dark" ? "#2c2c2e" : "#e5e5ea", strokeWidth: "3.5" }),
+          /* @__PURE__ */ jsx(
+            motion.circle,
+            {
+              cx: "18",
+              cy: "18",
+              r: "14",
+              fill: "none",
+              stroke: "#0071e3",
+              strokeWidth: "3.5",
+              strokeDasharray: "88",
+              animate: { strokeDashoffset: 88 - 88 * val / 100 },
+              strokeLinecap: "round"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("span", { className: "absolute text-[10px] font-bold", children: [
+          val,
+          "%"
+        ] })
+      ]
+    }
+  );
+}
+function SegmentedStepBar({ theme = "dark" }) {
+  const [level, setLevel] = useState(2);
+  return /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1.5 cursor-pointer", onClick: () => setLevel(level % 3 + 1), children: [1, 2, 3].map((i) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `w-6 h-2 rounded-full transition-colors ${i <= level ? "bg-blue-600" : theme === "dark" ? "bg-neutral-700" : "bg-neutral-300"}`
+    },
+    i
+  )) });
+}
+export {
+  FilterTagPill,
+  MagneticIconButton,
+  MorphActionPill,
+  RadialProgressRing,
+  SegmentedStepBar,
+  SubmenuFlyout
+};

package/dist/catalog/components/css-animations/yui-components/YuiUiKit1.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+export declare function CategorySelect({ theme }: {
+    theme?: 'dark' | 'light';
+}): React.JSX.Element;
+export declare function HoverLinkCard({ theme, href }: {
+    theme?: 'dark' | 'light';
+    href?: string;
+}): React.JSX.Element;
+export declare function PlusMinusToggle({ theme }: {
+    theme?: 'dark' | 'light';
+}): React.JSX.Element;
+export declare function LightDarkMorphToggle({ theme }: {
+    theme?: 'dark' | 'light';
+}): React.JSX.Element;
+export declare function ProgressStepper({ theme }: {
+    theme?: 'dark' | 'light';
+}): React.JSX.Element;
+export declare function MultiTabCloseBar({ theme }: {
+    theme?: 'dark' | 'light';
+}): React.JSX.Element;
+export declare function DatePositionSelector({ theme }: {
+    theme?: 'dark' | 'light';
+}): React.JSX.Element;
+export declare function PaginationNumberedBubble({ theme }: {
+    theme?: 'dark' | 'light';
+}): React.JSX.Element;
+export declare function BackForwardNav({ theme }: {
+    theme?: 'dark' | 'light';
+}): React.JSX.Element;