Dev

package.json

@@ -50,6 +50,7 @@
     "remark-gfm": "^4.0.1",
     "simplebar": "^6.3.2",
     "simplebar-react": "^3.3.2",
+    "styled-components": "^6.1.19",
     "svg-path-commander": "^2.1.10",
     "tailwind-merge": "^3.3.1",
     "three": "^0.176.0",

public/r/border-button.json

@@ -17,7 +17,9 @@
     },
     {
       "path": "./src/components/nurui/border-button.tsx",
-      "content": "import { cn } from \"@/lib/utils\";\nimport React from \"react\";\nimport { FaLocationArrow } from \"react-icons/fa\";\n\nconst BorderAnimationButton = ({ text , className}: { text: string , className?: string}) => {\n  return (\n    <div className={cn(\"relative inline-flex h-12 active:scale-95 transistion overflow-hidden rounded-lg p-[1px] focus:outline-none\", className)}>\n      <span className=\"absolute inset-[-1000%] animate-[spin_2s_linear_infinite] bg-[conic-gradient(from_90deg_at_50%_50%,#e7029a_0%,#f472b6_50%,#bd5fff_100%)]\"></span>\n      <p className=\"inline-flex h-full w-full cursor-pointer items-center justify-center rounded-lg bg-slate-950 px-7 text-sm font-medium text-white backdrop-blur-3xl gap-2 undefined\">\n        <span>{text}</span>\n        <FaLocationArrow />\n      </p>\n    </div>\n  );\n};\n\nexport default BorderAnimationButton;\n",
+
+      "content": "import { cn } from \"@/lib/utils\";\r\nimport React from \"react\";\r\nimport { FaLocationArrow } from \"react-icons/fa\";\r\n\r\nconst BorderAnimationButton = ({ text , className}: { text: string , className?: string}) => {\r\n  return (\r\n    <div className={cn(\"relative inline-flex h-12 active:scale-95 transistion overflow-hidden rounded-lg p-[1px] focus:outline-none\", className)}>\r\n      <span className=\"absolute inset-[-1000%] animate-[spin_2s_linear_infinite] bg-[conic-gradient(from_90deg_at_50%_50%,#e7029a_0%,#f472b6_50%,#bd5fff_100%)]\"></span>\r\n      <p className=\"inline-flex h-full w-full cursor-pointer items-center justify-center rounded-lg bg-slate-950 px-7 text-sm font-medium text-white backdrop-blur-3xl gap-2 undefined\">\r\n        <span>{text}</span>\r\n        <FaLocationArrow />\r\n      </p>\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default BorderAnimationButton;\r\n",
+
       "type": "registry:component"
     }
   ]

public/r/copy-button.json

@@ -11,12 +11,12 @@
   "files": [
     {
       "path": "./src/components/nurui/copy-button-demo.tsx",
-      "content": "import React from \"react\";\nimport CopyButton from \"@/components/nurui/copy-button\";\n\nconst CopyButtonDemo = () => {\n  return (\n    <div className=\"flex items-center justify-center min-h-[20rem]\">\n      <CopyButton\n        text=\"[email protected]\"\n        defaultLabel=\"Copy email address\"\n        successLabel=\"Copied!\"\n      />\n    </div>\n  );\n};\n\nexport default CopyButtonDemo;\n",
+      "content": "import React from \"react\";\r\nimport CopyButton from \"@/components/nurui/copy-button\";\r\n\r\nconst CopyButtonDemo = () => {\r\n  return (\r\n    <div className=\"flex items-center justify-center min-h-[20rem]\">\r\n      <CopyButton\r\n        text=\"[email protected]\"\r\n        defaultLabel=\"Copy email address\"\r\n        successLabel=\"Copied!\"\r\n      />\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default CopyButtonDemo;\r\n",
       "type": "registry:component"
     },
     {
       "path": "./src/components/nurui/copy-button.tsx",
-      "content": "\"use client\";\n\nimport { Copy } from \"lucide-react\";\nimport React, { useState } from \"react\";\nimport Lottie from \"lottie-react\";\nimport animationData from \"./data/confetti.json\";\n\ninterface CopyButtonProps {\n  text: string; // the text/email to copy\n  defaultLabel?: string; // label before copying\n  successLabel?: string; // label after copying\n}\n\nconst CopyButton: React.FC<CopyButtonProps> = ({\n  text,\n  defaultLabel = \"Copy my email address\",\n  successLabel = \"Email is Copied!\",\n}) => {\n  const [copied, setCopied] = useState(false);\n\n  const handleCopy = () => {\n    navigator.clipboard.writeText(text);\n    setCopied(true);\n    setTimeout(() => setCopied(false), 2000); // reset after 2s\n  };\n\n  return (\n    <button\n      onClick={handleCopy}\n      className=\"relative mt-5 bg-fuchsia-950 px-4 py-2 rounded-lg font-bold flex gap-2 items-center text-white transition-colors\"\n      style={{ minWidth: \"220px\" }} // ✅ lock button width (tweak px if needed)\n    >\n      <Copy className=\"w-5 h-5\" />\n\n      {/* keep label width stable by wrapping */}\n      <span className=\"whitespace-nowrap text-center flex-1\">\n        {copied ? successLabel : defaultLabel}\n      </span>\n\n      {copied && (\n        <div className=\"absolute inset-0 flex items-center justify-center pointer-events-none\">\n          <Lottie\n            animationData={animationData}\n            loop={false}\n            autoplay={true}\n            style={{ width: 200, height: 200 }}\n          />\n        </div>\n      )}\n    </button>\n  );\n};\n\nexport default CopyButton;\n",
+      "content": "\"use client\";\r\n\r\nimport { Copy } from \"lucide-react\";\r\nimport React, { useState } from \"react\";\r\nimport Lottie from \"lottie-react\";\r\nimport animationData from \"./data/confetti.json\";\r\n\r\ninterface CopyButtonProps {\r\n  text: string; // the text/email to copy\r\n  defaultLabel?: string; // label before copying\r\n  successLabel?: string; // label after copying\r\n}\r\n\r\nconst CopyButton: React.FC<CopyButtonProps> = ({\r\n  text,\r\n  defaultLabel = \"Copy my email address\",\r\n  successLabel = \"Email is Copied!\",\r\n}) => {\r\n  const [copied, setCopied] = useState(false);\r\n\r\n  const handleCopy = () => {\r\n    navigator.clipboard.writeText(text);\r\n    setCopied(true);\r\n    setTimeout(() => setCopied(false), 2000); // reset after 2s\r\n  };\r\n\r\n  return (\r\n    <button\r\n      onClick={handleCopy}\r\n      className=\"relative mt-5 bg-fuchsia-950 px-4 py-2 rounded-lg font-bold flex gap-2 items-center text-white transition-colors\"\r\n      style={{ minWidth: \"220px\" }} // ✅ lock button width (tweak px if needed)\r\n    >\r\n      <Copy className=\"w-5 h-5\" />\r\n\r\n      {/* keep label width stable by wrapping */}\r\n      <span className=\"whitespace-nowrap text-center flex-1\">\r\n        {copied ? successLabel : defaultLabel}\r\n      </span>\r\n\r\n      {copied && (\r\n        <div className=\"absolute inset-0 flex items-center justify-center pointer-events-none\">\r\n          <Lottie\r\n            animationData={animationData}\r\n            loop={false}\r\n            autoplay={true}\r\n            style={{ width: 200, height: 200 }}\r\n          />\r\n        </div>\r\n      )}\r\n    </button>\r\n  );\r\n};\r\n\r\nexport default CopyButton;\r\n",
       "type": "registry:component"
     }
   ]

public/r/counter-loading.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "counter-loading",
+  "type": "registry:component",
+  "dependencies": [
+    "styled-components"
+  ],
+  "devDependencies": [],
+  "registryDependencies": [],
+  "files": [
+    {
+      "path": "./src/components/nurui/counter-loading-demo.tsx",
+      "content": "import React from \"react\";\r\nimport CounterLoading from \"./counter-loading\";\r\n\r\n\r\n\r\nconst CounterLoadingDemo = () => {\r\n  return (\r\n    <div className=\"flex items-center justify-center min-h-[30rem]\">\r\n      <CounterLoading />\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default CounterLoadingDemo;\r\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "./src/components/nurui/counter-loading.tsx",
+      "content": "\"use client\";\r\nimport React from \"react\";\r\nimport styled from \"styled-components\";\r\n\r\nconst CounterLoading = () => {\r\n  return (\r\n    <StyledWrapper>\r\n      <div id=\"timer\">\r\n        <div id=\"div1\" />\r\n        <div id=\"div2\" />\r\n        <div id=\"div3\" />\r\n        <div id=\"div4\" />\r\n        <div id=\"div5\" />\r\n        <div id=\"div6\" />\r\n        <div id=\"div7\" />\r\n        <div id=\"div8\" />\r\n        <div id=\"div9\" />\r\n        <div id=\"div10\" />\r\n        <div id=\"div11\" />\r\n        <div id=\"div12\" />\r\n        <div id=\"div13\" />\r\n        <div id=\"div14\" />\r\n        <div id=\"div15\" />\r\n      </div>\r\n    </StyledWrapper>\r\n  );\r\n};\r\n\r\nconst StyledWrapper = styled.div`\r\n  width: 100vw;\r\n  height: 30rem;\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n\r\n  #timer {\r\n    display: grid;\r\n    grid-template-columns: repeat(3, 25px);\r\n    grid-template-rows: repeat(5, 25px);\r\n    gap: 10px;\r\n    grid-template-areas:\r\n      \"div1 div2 div3\"\r\n      \"div4 div5 div6\"\r\n      \"div7 div8 div9\"\r\n      \"div10 div11 div12\"\r\n      \"div13 div14 div15\";\r\n  }\r\n\r\n  #timer > div {\r\n    background-color: skyblue;\r\n    border-radius: 5px;\r\n  }\r\n\r\n  #div1 { grid-area: div1; animation: div1 10s both infinite; }\r\n  #div2 { grid-area: div2; animation: div2 10s both infinite; }\r\n  #div3 { grid-area: div3; }\r\n  #div4 { grid-area: div4; animation: div4 10s both infinite; }\r\n  #div5 { grid-area: div5; display: none; }\r\n  #div6 { grid-area: div6; animation: div6 10s both infinite; }\r\n  #div7 { grid-area: div7; animation: div7 10s both infinite; }\r\n  #div8 { grid-area: div8; animation: div8 10s both infinite; }\r\n  #div9 { grid-area: div9; }\r\n  #div10 { grid-area: div10; animation: div10 10s both infinite; }\r\n  #div11 { grid-area: div11; display: none; }\r\n  #div12 { grid-area: div12; animation: div12 10s both infinite; }\r\n  #div13 { grid-area: div13; animation: div13 10s both infinite; }\r\n  #div14 { grid-area: div14; animation: div14 10s both infinite; }\r\n  #div15 { grid-area: div15; }\r\n\r\n   #div1 {\r\n    grid-area: div1;\r\n    animation: div1 10s both infinite;\r\n  }\r\n\r\n  @keyframes div1 {\r\n    0% {\r\n      transform: translateX(0);\r\n    }\r\n\r\n    10% {\r\n      transform: translateX(70px);\r\n    }\r\n\r\n    20% {\r\n      transform: translateX(0);\r\n    }\r\n\r\n    30% {\r\n      transform: translateX(0);\r\n    }\r\n\r\n    40% {\r\n      transform: translateX(0);\r\n    }\r\n\r\n    50% {\r\n      transform: translateX(0);\r\n    }\r\n\r\n    60% {\r\n      transform: translateX(0);\r\n    }\r\n\r\n    70% {\r\n      transform: translateX(0);\r\n    }\r\n\r\n    80% {\r\n      transform: translateX(0);\r\n    }\r\n\r\n    90% {\r\n      transform: translateX(0);\r\n    }\r\n\r\n    100% {\r\n      transform: translateX(0);\r\n    }\r\n  }\r\n\r\n  #div2 {\r\n    grid-area: div2;\r\n    animation: div2 10s both infinite;\r\n  }\r\n\r\n  @keyframes div2 {\r\n    0% {\r\n      transform: translateX(0);\r\n    }\r\n\r\n    10% {\r\n      transform: translateX(35px);\r\n    }\r\n\r\n    20% {\r\n      transform: translateX(0);\r\n    }\r\n\r\n    30% {\r\n      transform: translateX(0);\r\n    }\r\n\r\n    40% {\r\n      transform: translateX(35px);\r\n    }\r\n\r\n    50% {\r\n      transform: translateX(0);\r\n    }\r\n\r\n    60% {\r\n      transform: translateX(0);\r\n    }\r\n\r\n    70% {\r\n      transform: translateX(0);\r\n    }\r\n\r\n    80% {\r\n      transform: translateX(0);\r\n    }\r\n\r\n    90% {\r\n      transform: translateX(0);\r\n    }\r\n\r\n    100% {\r\n      transform: translateX(0);\r\n    }\r\n  }\r\n\r\n  #div3 {\r\n    grid-area: div3;\r\n  }\r\n\r\n  #div4 {\r\n    grid-area: div4;\r\n    animation: div4 10s both infinite;\r\n  }\r\n\r\n  @keyframes div4 {\r\n    0% {\r\n      transform: translateX(0);\r\n    }\r\n\r\n    10% {\r\n      transform: translateX(70px);\r\n    }\r\n\r\n    20% {\r\n      transform: translateX(70px);\r\n    }\r\n\r\n    30% {\r\n      transform: translateX(70px);\r\n    }\r\n\r\n    40% {\r\n      transform: translateX(0);\r\n    }\r\n\r\n    50% {\r\n      transform: translateX(0);\r\n    }\r\n\r\n    60% {\r\n      transform: translateX(0);\r\n    }\r\n\r\n    70% {\r\n      transform: translateX(70px);\r\n    }\r\n\r\n    80% {\r\n      transform: translateX(0);\r\n    }\r\n\r\n    90% {\r\n      transform: translateX(0);\r\n    }\r\n\r\n    100% {\r\n      transform: translateX(0);\r\n    }\r\n  }\r\n\r\n  #div5 {\r\n    grid-area: div5;\r\n    display: none;\r\n  }\r\n\r\n  #div6 {\r\n    grid-area: div6;\r\n    animation: div6 10s both infinite;\r\n  }\r\n\r\n  @keyframes div6 {\r\n    0% {\r\n      transform: translateX(0);\r\n    }\r\n\r\n    10% {\r\n      transform: translateX(0);\r\n    }\r\n\r\n    20% {\r\n      transform: translateX(0);\r\n    }\r\n\r\n    30% {\r\n      transform: translateX(0);\r\n    }\r\n\r\n    40% {\r\n      transform: translateX(0);\r\n    }\r\n\r\n    50% {\r\n      transform: translateX(-70px);\r\n    }\r\n\r\n    60% {\r\n      transform: translateX(-70px);\r\n    }\r\n\r\n    70% {\r\n      transform: translateX(0);\r\n    }\r\n\r\n    80% {\r\n      transform: translateX(0);\r\n    }\r\n\r\n    90% {\r\n      transform: translateX(0);\r\n    }\r\n\r\n    100% {\r\n      transform: translateX(0);\r\n    }\r\n  }\r\n\r\n  #div7 {\r\n    grid-area: div7;\r\n    animation: div7 10s both infinite;\r\n  }\r\n\r\n  @keyframes div7 {\r\n    0% {\r\n      transform: translateX(0);\r\n    }\r\n\r\n    10% {\r\n      transform: translateX(70px);\r\n    }\r\n\r\n    20% {\r\n      transform: translateX(0);\r\n    }\r\n\r\n    30% {\r\n      transform: translateX(0);\r\n    }\r\n\r\n    40% {\r\n      transform: translateX(0);\r\n    }\r\n\r\n    50% {\r\n      transform: translateX(0);\r\n    }\r\n\r\n    60% {\r\n      transform: translateX(0);\r\n    }\r\n\r\n    70% {\r\n      transform: translateX(70px);\r\n    }\r\n\r\n    80% {\r\n      transform: translateX(0);\r\n    }\r\n\r\n    90% {\r\n      transform: translateX(0);\r\n    }\r\n\r\n    100% {\r\n      transform: translateX(0);\r\n    }\r\n  }\r\n\r\n  #div8 {\r\n    grid-area: div8;\r\n    animation: div8 10s both infinite;\r\n  }\r\n\r\n  @keyframes div8 {\r\n    0% {\r\n      transform: translateX(35px);\r\n    }\r\n\r\n    10% {\r\n      transform: translateX(35px);\r\n    }\r\n\r\n    20% {\r\n      transform: translateX(0);\r\n    }\r\n\r\n    30% {\r\n      transform: translateX(0);\r\n    }\r\n\r\n    40% {\r\n      transform: translateX(0);\r\n    }\r\n\r\n    50% {\r\n      transform: translateX(0);\r\n    }\r\n\r\n    60% {\r\n      transform: translateX(0);\r\n    }\r\n\r\n    70% {\r\n      transform: translateX(35px);\r\n    }\r\n\r\n    80% {\r\n      transform: translateX(0);\r\n    }\r\n\r\n    90% {\r\n      transform: translateX(0);\r\n    }\r\n\r\n    100% {\r\n      transform: translateX(35px);\r\n    }\r\n  }\r\n\r\n  #div9 {\r\n    grid-area: div9;\r\n  }\r\n\r\n  #div10 {\r\n    grid-area: div10;\r\n    animation: div10 10s both infinite;\r\n  }\r\n\r\n  @keyframes div10 {\r\n    0% {\r\n      transform: translateX(0);\r\n    }\r\n\r\n    10% {\r\n      transform: translateX(70px);\r\n    }\r\n\r\n    20% {\r\n      transform: translateX(0);\r\n    }\r\n\r\n    30% {\r\n      transform: translateX(70px);\r\n    }\r\n\r\n    40% {\r\n      transform: translateX(70px);\r\n    }\r\n\r\n    50% {\r\n      transform: translateX(70px);\r\n    }\r\n\r\n    60% {\r\n      transform: translateX(0);\r\n    }\r\n\r\n    70% {\r\n      transform: translateX(70px);\r\n    }\r\n\r\n    80% {\r\n      transform: translateX(0);\r\n    }\r\n\r\n    90% {\r\n      transform: translateX(70px);\r\n    }\r\n\r\n    100% {\r\n      transform: translateX(0);\r\n    }\r\n  }\r\n\r\n  #div11 {\r\n    grid-area: div11;\r\n    display: none;\r\n  }\r\n\r\n  #div12 {\r\n    grid-area: div12;\r\n    animation: div12 10s both infinite;\r\n  }\r\n\r\n  @keyframes div12 {\r\n    0% {\r\n      transform: translateX(0);\r\n    }\r\n\r\n    10% {\r\n      transform: translateX(0);\r\n    }\r\n\r\n    20% {\r\n      transform: translateX(-70px);\r\n    }\r\n\r\n    30% {\r\n      transform: translateX(0);\r\n    }\r\n\r\n    40% {\r\n      transform: translateX(0);\r\n    }\r\n\r\n    50% {\r\n      transform: translateX(0);\r\n    }\r\n\r\n    60% {\r\n      transform: translateX(0);\r\n    }\r\n\r\n    70% {\r\n      transform: translateX(0);\r\n    }\r\n\r\n    80% {\r\n      transform: translateX(0);\r\n    }\r\n\r\n    90% {\r\n      transform: translateX(0);\r\n    }\r\n\r\n    100% {\r\n      transform: translateX(0);\r\n    }\r\n  }\r\n\r\n  #div13 {\r\n    grid-area: div13;\r\n    animation: div13 10s both infinite;\r\n  }\r\n\r\n  @keyframes div13 {\r\n    0% {\r\n      transform: translateX(0);\r\n    }\r\n\r\n    10% {\r\n      transform: translateX(70px);\r\n    }\r\n\r\n    20% {\r\n      transform: translateX(0);\r\n    }\r\n\r\n    30% {\r\n      transform: translateX(0);\r\n    }\r\n\r\n    40% {\r\n      transform: translateX(70px);\r\n    }\r\n\r\n    50% {\r\n      transform: translateX(0);\r\n    }\r\n\r\n    60% {\r\n      transform: translateX(0);\r\n    }\r\n\r\n    70% {\r\n      transform: translateX(70px);\r\n    }\r\n\r\n    80% {\r\n      transform: translateX(0);\r\n    }\r\n\r\n    90% {\r\n      transform: translateX(0);\r\n    }\r\n\r\n    100% {\r\n      transform: translateX(0);\r\n    }\r\n  }\r\n\r\n  #div14 {\r\n    grid-area: div14;\r\n    animation: div14 10s both infinite;\r\n  }\r\n\r\n  @keyframes div14 {\r\n    0% {\r\n      transform: translateX(0);\r\n    }\r\n\r\n    10% {\r\n      transform: translateX(35px);\r\n    }\r\n\r\n    20% {\r\n      transform: translateX(0);\r\n    }\r\n\r\n    30% {\r\n      transform: translateX(0);\r\n    }\r\n\r\n    40% {\r\n      transform: translateX(35px);\r\n    }\r\n\r\n    50% {\r\n      transform: translateX(0);\r\n    }\r\n\r\n    60% {\r\n      transform: translateX(0);\r\n    }\r\n\r\n    70% {\r\n      transform: translateX(35px);\r\n    }\r\n\r\n    80% {\r\n      transform: translateX(0);\r\n    }\r\n\r\n    90% {\r\n      transform: translateX(0);\r\n    }\r\n\r\n    100% {\r\n      transform: translateX(0);\r\n    }\r\n  }\r\n\r\n  #div15 {\r\n    grid-area: div15;\r\n  }\r\n`;\r\n\r\nexport default CounterLoading;\r\n",
+      "type": "registry:component"
+    }
+  ]
+}