bianira-ui 1.27.0

package/img/svgviewer-output.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="200 200">
+  <!-- Scale + translate to center with uniform margin -->
+  <g transform="translate(-600,-470) scale(7)">
+    <path fill="rgb(36.470589%,41.568628%,98.823529%)" d="M91.3 66.914q0.305 -0.005 0.614 -0.004 1.006 -0.005 2.012 -0.004h1.3q1.468 -0.006 2.938 0c1.25 0 2.504 -0.004 3.754 -0.008q1.447 -0.004 2.894 -0.003 0.69 0.001 1.387 -0.004 0.966 -0.001 1.937 0.004c0.188 -0.004 0.38 -0.004 0.575 -0.008 1.402 0.015 2.66 0.293 3.714 1.27 0.13 0.19 0.13 0.19 0.258 0.386l0.266 0.383c0.445 0.777 0.672 1.441 0.676 2.336 0 0.187 0.004 0.375 0.004 0.566v0.61q0 0.32 0.003 0.652v2.125q-0.001 0.742 0.004 1.484v3.102c-0.004 1.195 0 2.386 0.004 3.582q0.005 1.723 0.004 3.453 -0.001 0.73 0.004 1.46c0.004 0.688 0 1.372 0 2.056q-0.001 0.296 0.004 0.605c-0.012 1.672 -0.285 3.207 -1.48 4.453 -1.618 1.336 -3.645 1.23 -5.63 1.074 -2.453 -0.414 -3.831 -2.832 -5.183 -4.687 -0.41 -0.563 -0.836 -1.11 -1.262 -1.66q-1.114 -1.447 -2.21 -2.907 -0.142 -0.187 -0.29 -0.386a16 16 0 0 1 -0.28 -0.375c-0.083 -0.106 -0.161 -0.215 -0.243 -0.324 -0.434 -0.586 -0.852 -1.18 -1.274 -1.77 0 0.164 0 0.164 -0.003 0.332q-0.012 1.71 -0.036 3.422 -0.01 0.637 -0.015 1.273 -0.006 0.92 -0.024 1.84v0.57c-0.027 1.387 -0.324 2.442 -1.238 3.504q-0.164 0.13 -0.332 0.266c-0.164 0.133 -0.164 0.133 -0.328 0.273 -1.309 0.856 -2.77 0.758 -4.274 0.63 -1.378 -0.356 -2.265 -1.087 -3.078 -2.247 -0.84 -2.351 -0.472 -5.336 -0.476 -7.8q0.001 -0.328 -0.004 -0.66c0 -1.15 -0.004 -2.294 -0.004 -3.442q0 -1.77 -0.012 -3.54 -0.005 -1.368 -0.004 -2.737 -0.002 -0.655 -0.004 -1.305 -0.005 -0.915 -0.004 -1.828 -0.002 -0.262 -0.003 -0.535c0.007 -1.559 0.214 -3.04 1.308 -4.215 1.2 -1.14 2.348 -1.27 3.934 -1.262m0 0"/>
+    <path fill="rgb(25.882354%,57.254905%,99.607843%)" d="M91.3 66.914q0.305 -0.005 0.614 -0.004 1.006 -0.005 2.012 -0.004h1.398q1.468 -0.006 2.938 0c1.25 0 2.504 -0.004 3.754 -0.008q1.447 -0.004 2.894 -0.003 0.69 0.001 1.387 -0.004 0.966 -0.001 1.937 0.004c0.188 -0.004 0.38 -0.004 0.575 -0.008 1.402 0.015 2.66 0.293 3.714 1.27 0.13 0.19 0.13 0.19 0.258 0.386l0.266 0.383c0.445 0.785 0.676 1.445 0.672 2.347v0.575c0 0.304 0 0.304 -0.004 0.62v0.657q0.001 1.08 -0.004 2.152c0 0.5 -0.004 0.996 -0.004 1.496q-0.001 1.764 -0.008 3.528c-0.004 1.336 -0.004 2.676 -0.008 4.015q-0.006 4.131 -0.02 8.262c-0.128 -0.195 -0.257 -0.387 -0.39 -0.586q-0.193 0.096 -0.39 0.195c-0.926 -1.007 -1.75 -2.066 -2.547 -3.18 -0.836 -1.16 -1.73 -2.269 -2.64 -3.374 -2.04 -2.485 -2.04 -2.485 -2.04 -3.016h-0.39c-0.278 -0.308 -0.278 -0.308 -0.598 -0.746a86 86 0 0 0 -2.114 -2.656q-0.41 -0.496 -0.796 -1.004c-0.422 -0.504 -0.86 -0.89 -1.375 -1.293 -0.246 -0.2 -0.246 -0.2 -0.5 -0.402 -0.86 -0.621 -1.403 -0.782 -2.477 -0.778h-0.746c-0.266 0 -0.535 0.004 -0.805 0.004q-0.409 0.002 -0.824 0.004 -1.079 0.001 -2.164 0.008 -1.106 0.007 -2.21 0.008 -2.17 0.006 -4.337 0.02c-0.293 -0.876 -0.238 -1.735 -0.246 -2.65l-0.012 -0.562c-0.007 -1.629 0.153 -3.16 1.297 -4.394 1.2 -1.14 2.348 -1.27 3.934 -1.262m0 0"/>
+  </g>
+</svg>

package/index.html

@@ -0,0 +1,179 @@
+<!DOCTYPE html>
+<html lang="en">
+<head><meta http-equiv="content-type" content="text/html;charset=utf-8">
+
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<link rel="stylesheet" href="./dist/nira.css">
+<title>Nira UI – Tailwind CSS Plugin for Components &amp; Themes</title>
+<meta name="description" content="Nira UI provides reusable Tailwind CSS UI components and themes so you can design and ship websites faster.">
+<meta name="keywords" content="Nira UI, Tailwind CSS plugin, Tailwind UI components, Tailwind CSS themes, Tailwind component library, prebuilt Tailwind UI, customizable Tailwind components, open source Tailwind plugin">
+<link rel="canonical" href="./index.html">
+<meta property="og:title" content="Nira UI – Tailwind CSS Plugin for Components &amp; Themes">
+<meta property="og:description" content="Nira UI provides reusable Tailwind CSS UI components and themes so you can design and ship websites faster.">
+<meta property="og:url" content="">
+<meta property="og:site_name" content="Nira UI">
+<meta property="og:image" content="/images/og-image.png">
+<meta property="og:image:width" content="1200">
+<meta property="og:image:height" content="630">
+<meta property="og:image:alt" content="Nira UI – Tailwind CSS Components &amp; Themes">
+<meta property="og:type" content="website">
+<meta name="twitter:card" content="summary_large_image">
+<meta name="twitter:site" content="@Nira UI">
+<meta name="twitter:title" content="Nira UI – Tailwind CSS Plugin for Components &amp; Themes">
+<meta name="twitter:description" content="Nira UI provides reusable Tailwind CSS UI components and themes so you can design and ship websites faster.">
+<meta name="twitter:image" content="/images/og-image.png">
+<meta name="twitter:image:alt" content="Nira UI – Tailwind CSS Components &amp; Themes">
+<link rel="icon" href="./img/svgviewer-output.svg" type="image/x-icon" sizes="48x48">
+</head>
+<style>
+  @layer utilities {
+
+  @keyframes float {
+
+    0%,
+    100% {
+      transform: translateY(0px);
+    }
+
+    50% {
+      transform: translateY(-20px);
+    }
+  }
+
+  .animate-float {
+    animation: float 6s ease-in-out infinite;
+  }
+}
+</style>
+<body>
+  <section class="flex min-h-screen relative flex-col items-center justify-center px-2 pb-10 text-center">
+  <div class="max-w-8xl mx-auto ">
+<h1 class="mb-4 text-4xl font-bold sm:text-7xl">Build faster with  <span class=" text-primary">Nira UI</span> </h1>
+
+<p class=" mx-auto w-full max-w-xl text-center text-base text-base-content/70 mt-4 mb-8">Nira UI provides reusable Tailwind CSS UI components and themes so you can design and ship websites faster.
+
+</p>
+
+
+    <div class="flex gap-3 flex-col sm:flex-row items-center justify-center">
+   <a class="button button-primary button-large bg-black hover:border-black" href="../docs/introduction.html">Get Started</a>
+    <a class="button button-large button-outline" href="https://github.com/thaboyaluya/nira-ui/">View on GitHub</a>
+    </div>
+ 
+  
+
+
+<button class="button animate-float absolute top-6  left-3 hidden lg:block" style="animation-delay: 0s;">button</button>
+
+<div class="alert animate-float text-left w-[400px] alert-success-transparent  absolute top-20  left-3 hidden lg:block" style="animation-delay: 0.9s;">
+  <svg class="alert-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
+    <h5 class="alert-headline">Nira UI</h5>
+    <div class="alert-text">Nira UI is the Tailwind CSS plugin you will love!</div>
+</div>
+
+
+
+         <div class="absolute animate-float top-60 right-0 hidden lg:block " style="animation-delay: 1s;">
+            <div class="flex gap-2">
+              <span class="badge">Nira UI</span>
+              <span class="badge">Tailwind CSS</span>
+            </div>
+          </div>
+
+ <div class="card absolute animate-float hidden lg:block  top-60 z-[-2] left-0  " style="animation-delay: 2s;">
+<div class="form-group">
+
+		<div class="form-field">
+			<label class="form-label">Email address</label>
+			<input placeholder="Type here" type="email" class="input input-danger" value="nira-ui@gmail.c.">
+			<span class="form-label-alt text-left text-danger">Please enter a valid email.</span>
+		</div>
+		<div class="form-field">
+				<button type="button" class="button button-primary button-full">Sign in</button>
+		</div>
+
+	</div>
+</div>
+
+<progress class="progress progress-flat-danger top-0 z-[-2] animate-float left-10 hidden lg:block" style="animation-delay: .5s;" value="50" max="100"></progress>
+
+
+
+<img loading="lazy" class="avatar-lg absolute animate-float z-[-2] top-6 right-1 hidden lg:block" style="animation-delay: 0.5s;" src="./img/svgviewer-output.svg" alt="Avatar">
+
+
+<button type="button" class="tooltip button tooltip-n  absolute animate-float  top-20 right-10 hidden lg:block " data-content="Thanks for clicking me." style="animation-delay: 1s;">
+				  Click Me !
+				</button>
+
+<nav class="absolute animate-float  top-35  right-10 hidden lg:block" style="animation-delay: 1.3s;">
+	<ul class="pagination">
+		<li class="page-item disabled"><a class="page-link">Previous</a></li>
+		<li class="page-item"><a class="page-link" href="#">1</a></li>
+		<li class="page-item active" aria-current="page"><a class="page-link" href="#">2</a></li>
+		<li class="page-item"><a class="page-link" href="#">3</a></li>
+		<li class="page-item"><a class="page-link" href="#">Next</a></li>
+	</ul>
+</nav>
+
+
+ <div class="card absolute animate-float  top-75 right-0 hidden lg:block" style="animation-delay: 1.5s;">
+<input type="text" class="input" readonly="" value="npm i nira-ui">
+</div>
+
+<div class="card absolute animate-float  top-75 right-80 hidden lg:block" style="animation-delay: 2s;">
+
+  <div class="flex gap-2">
+    <p class="text-2xl leading-none">🌞</p>
+  <label for="hs-basic-usage1p" class="switch">
+<input type="checkbox" id="hs-basic-usage1p" class="peer switch-inner ">
+<span class="switch-track"></span>
+<span class="switch-thumb"></span>
+</label>
+     <p class="text-2xl leading-none">🌚</p>
+  </div>
+
+
+</div>
+
+
+
+  </div>
+</section>
+<script>
+
+  function setTheme(theme) {
+      if (theme === "system") {
+        document.documentElement.removeAttribute("data-theme");
+        if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
+          document.documentElement.classList.add("dark");
+        } else {
+          document.documentElement.classList.remove("dark");
+        }
+      } else {
+        document.documentElement.setAttribute("data-theme", theme);
+        if (theme === "dark") {
+          document.documentElement.classList.add("dark");
+        } else {
+          document.documentElement.classList.remove("dark");
+        }
+      }
+      localStorage.setItem("theme", theme);
+      const toggle = document.getElementById('theme-toggle');
+      toggle.value = theme;
+    }
+      const checkbox=document.getElementById('hs-basic-usage1p')
+    if(checkbox)
+    checkbox.addEventListener('change',(e)=>{
+      e.preventDefault()
+
+      if(checkbox.checked){
+       setTheme('dark')
+      }else{
+         setTheme('light')
+      }
+    })
+</script>
+</body>
+</html>

package/package.json

@@ -0,0 +1,29 @@
+{
+    "name": "bianira-ui",
+    "version": "1.27.0",
+    "main": "plugin.js",
+    "license": "MIT",
+    "type": "module",
+  "keywords": [
+    "bianira-ui",
+    "ui",
+    "tailwindcss",
+    "components",
+    "modern",
+    "clean",
+    "css",
+    "framework",
+    "ui-library"
+  ],
+    "author": "Rume Aluya",
+    "description": "Cleanest, modern and beatifull Tailwind CSS library for HTML, React and Vue.",
+    "dependencies": {
+        "@tailwindcss/cli": "^4.1.12",
+        "@tailwindcss/postcss": "^4.1.12",
+        "nodemon": "^3.1.10",
+        "tailwindcss": "^4.1.12"
+    },
+    "scripts": {
+        "dev": "npx @tailwindcss/cli -i ./components/index.css -o ./dist/nira.css --watch"
+    }
+}