@vifui/styles 0.4.0-alpha.6

package/components/spinner.css

@@ -0,0 +1,594 @@
+/**
+ * Spinner Component - Tailwind v4 + Modern CSS
+ *
+ * Architecture inspired by Vuesax v3 (MIT License)
+ * Loading indicator with 11 animation types
+ */
+
+/* ============================================ */
+/* Base Spinner */
+/* ============================================ */
+
+.vif-spinner {
+  @apply relative block rounded-full;
+  @apply size-full;
+  box-sizing: border-box;
+}
+
+/* ============================================ */
+/* Size Variants */
+/* ============================================ */
+
+.vif-spinner--xs {
+  @apply size-5;
+}
+
+.vif-spinner--sm {
+  @apply size-7;
+}
+
+.vif-spinner--md {
+  @apply size-10;
+}
+
+/* ============================================ */
+/* Color Variants */
+/* ============================================ */
+
+.vif-spinner--current {
+  --spinner-color: currentColor;
+}
+
+.vif-spinner--primary {
+  --spinner-color: var(--primary);
+}
+
+.vif-spinner--secondary {
+  --spinner-color: var(--secondary);
+}
+
+.vif-spinner--success {
+  --spinner-color: var(--success);
+}
+
+.vif-spinner--warning {
+  --spinner-color: var(--warning);
+}
+
+.vif-spinner--danger {
+  --spinner-color: var(--danger);
+}
+
+.vif-spinner--white {
+  --spinner-color: var(--white);
+}
+
+/* ============================================ */
+/* TYPE: Default */
+/* ============================================ */
+
+.vif-spinner--default {
+  .vif-spinner__effect {
+    @apply absolute size-full rounded-full;
+    border: 3px solid transparent;
+    border-inline-start: 3px solid var(--spinner-color);
+    box-sizing: border-box;
+  }
+
+  .vif-spinner__effect-1 {
+    animation: vif-rotate 1s ease infinite;
+  }
+
+  .vif-spinner__effect-2 {
+    animation: vif-rotate-opacity 1s ease infinite 0.1s;
+  }
+
+  .vif-spinner__effect-3 {
+    animation: vif-rotate-opacity 1s ease infinite 0.2s;
+  }
+}
+
+/* ============================================ */
+/* TYPE: Border */
+/* ============================================ */
+
+.vif-spinner--border {
+  @apply border border-gray-100;
+
+  .vif-spinner__effect {
+    @apply absolute size-full rounded-full;
+    border: 1px solid transparent;
+    border-inline-start: 1px solid var(--spinner-color);
+    box-sizing: border-box;
+  }
+
+  .vif-spinner__effect-1 {
+    animation: vif-rotate 1s ease infinite;
+  }
+
+  .vif-spinner__effect-2 {
+    animation: vif-rotate-opacity 1s ease infinite 0.1s;
+  }
+
+  .vif-spinner__effect-3 {
+    animation: vif-rotate-opacity 1s ease infinite 0.2s;
+  }
+}
+
+/* ============================================ */
+/* TYPE: Waves */
+/* ============================================ */
+
+.vif-spinner--waves {
+  .vif-spinner__effect {
+    @apply absolute inset-1/2 size-0 rounded-full;
+    @apply bg-transparent;
+    box-shadow: 0 0 10px 0
+      color-mix(in srgb, var(--spinner-color) 50%, transparent);
+    box-sizing: border-box;
+    translate: -50% -50%;
+  }
+
+  .vif-spinner__effect-1 {
+    animation: vif-waves 1.75s ease infinite;
+  }
+
+  .vif-spinner__effect-2 {
+    animation: vif-waves 1.75s ease 0.3s infinite;
+  }
+
+  .vif-spinner__effect-3 {
+    animation: vif-waves 1.75s ease 0.6s infinite;
+  }
+}
+
+/* ============================================ */
+/* TYPE: Points */
+/* ============================================ */
+
+.vif-spinner--point,
+.vif-spinner--points {
+  @apply flex items-center justify-center gap-1.5;
+
+  .vif-spinner__effect {
+    @apply relative rounded-full;
+    inline-size: 20%;
+    block-size: 20%;
+    background: var(--spinner-color);
+    box-sizing: border-box;
+  }
+
+  .vif-spinner__effect-1 {
+    animation: vif-bounce 0.8s ease infinite;
+  }
+
+  .vif-spinner__effect-2 {
+    animation: vif-bounce 0.8s ease infinite 0.15s;
+  }
+
+  .vif-spinner__effect-3 {
+    animation: vif-bounce 0.8s ease infinite 0.3s;
+  }
+}
+
+/* ============================================ */
+/* TYPE: Radius */
+/* ============================================ */
+
+.vif-spinner--radius {
+  .vif-spinner__effect {
+    @apply absolute size-full;
+    border: 3px solid var(--spinner-color);
+    border-radius: 10px;
+    box-sizing: border-box;
+  }
+
+  .vif-spinner__effect-1 {
+    animation: vif-radius 1s ease infinite;
+  }
+
+  .vif-spinner__effect-2 {
+    animation: vif-radius 2s ease infinite 0.1s;
+  }
+
+  .vif-spinner__effect-3 {
+    animation: vif-radius 3s ease infinite 0.2s;
+  }
+}
+
+/* ============================================ */
+/* TYPE: Corners */
+/* ============================================ */
+
+.vif-spinner--corners {
+  .vif-spinner__effect {
+    @apply absolute size-full;
+    border: 3px solid var(--spinner-color);
+    border-radius: 10px;
+    box-sizing: border-box;
+  }
+
+  .vif-spinner__effect-1 {
+    animation: vif-corners 1s ease infinite;
+  }
+}
+
+/* ============================================ */
+/* TYPE: Scale */
+/* ============================================ */
+
+.vif-spinner--sound,
+.vif-spinner--scale {
+  @apply flex items-center justify-center;
+
+  .vif-spinner__effect {
+    @apply relative h-full;
+    @apply rounded-lg;
+    inline-size: 8px;
+    background: var(--spinner-color);
+    box-sizing: border-box;
+    margin-inline: 4px;
+  }
+
+  .vif-spinner__effect-1 {
+    animation: vif-sound 1.4s ease infinite alternate;
+  }
+
+  .vif-spinner__effect-2 {
+    block-size: 60%;
+    animation: vif-sound 0.7s ease infinite alternate;
+  }
+
+  .vif-spinner__effect-3 {
+    block-size: 80%;
+    animation: vif-sound 1s ease-out infinite alternate;
+  }
+}
+
+/* ============================================ */
+/* TYPE: Square */
+/* ============================================ */
+
+.vif-spinner--square {
+  @apply rounded-none;
+
+  /* First square - clockwise (faster) */
+  .vif-spinner__effect-1 {
+    @apply absolute size-full rounded-none;
+    border: 3px solid var(--spinner-color);
+    box-sizing: border-box;
+    animation: vif-rotate 1.5s linear infinite;
+  }
+
+  /* Second square - counterclockwise (slower for motor wheel effect) */
+  .vif-spinner__effect-2 {
+    @apply absolute size-full rounded-none;
+    border: 3px solid var(--spinner-color);
+    box-sizing: border-box;
+    animation: vif-rotate 2.5s linear infinite reverse;
+  }
+}
+
+/* ============================================ */
+/* TYPE: Gradient */
+/* ============================================ */
+
+.vif-spinner--gradient {
+  .vif-spinner__effect-1 {
+    @apply absolute size-full rounded-full;
+    box-sizing: border-box;
+    animation: vif-rotate 1s linear infinite;
+    background: conic-gradient(
+      from 0deg,
+      var(--spinner-color),
+      var(--spinner-color) 25%,
+      transparent 50%,
+      transparent
+    );
+    mask: radial-gradient(
+      farthest-side,
+      transparent calc(100% - 3px),
+      white calc(100% - 3px)
+    );
+  }
+
+  .vif-spinner__effect-2 {
+    @apply absolute inset-0.5 bg-white rounded-full;
+    inline-size: calc(100% - 4px);
+    block-size: calc(100% - 4px);
+    box-sizing: border-box;
+  }
+}
+
+/* ============================================ */
+/* TYPE: Rectangle */
+/* ============================================ */
+
+.vif-spinner--rectangle {
+  @apply flex items-center justify-center overflow-hidden;
+
+  .vif-spinner__effect-1 {
+    @apply absolute rounded;
+    inline-size: 30%;
+    block-size: 30%;
+    background: var(--spinner-color);
+    box-sizing: border-box;
+    animation: vif-rectangle-slide 1.2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
+
+    &::before,
+    &::after {
+      @apply absolute size-full rounded;
+      content: "";
+      background: var(--spinner-color);
+      opacity: 0.4;
+    }
+
+    &::before {
+      inset-inline-start: -120%;
+    }
+
+    &::after {
+      inset-inline-start: 120%;
+    }
+  }
+}
+
+/* ============================================ */
+/* TYPE: Circles */
+/* ============================================ */
+
+.vif-spinner--circles {
+  .vif-spinner__effect {
+    @apply absolute rounded-full;
+    box-sizing: border-box;
+  }
+
+  /* Outer circle - largest, solid, clockwise (slowest) */
+  .vif-spinner__effect-1 {
+    @apply size-full;
+    border: 3px solid transparent;
+    border-block-start: 3px solid var(--spinner-color);
+    border-inline-end: 3px solid var(--spinner-color);
+    animation: vif-rotate 1.5s linear infinite;
+  }
+
+  /* Middle circle - dashed, counterclockwise */
+  .vif-spinner__effect-2 {
+    inline-size: 70%;
+    block-size: 70%;
+    inset-block-start: 15%;
+    inset-inline-start: 15%;
+    border: 3px dashed transparent;
+    border-block-start: 3px dashed var(--spinner-color);
+    border-inline-end: 3px dashed var(--spinner-color);
+    animation: vif-rotate 1.2s linear infinite reverse;
+  }
+
+  /* Inner circle - smallest, solid, clockwise (fastest) */
+  .vif-spinner__effect-3 {
+    inline-size: 40%;
+    block-size: 40%;
+    inset-block-start: 30%;
+    inset-inline-start: 30%;
+    border: 3px solid transparent;
+    border-block-start: 3px solid var(--spinner-color);
+    border-inline-end: 3px solid var(--spinner-color);
+    animation: vif-rotate 0.9s linear infinite;
+  }
+}
+
+/* ============================================ */
+/* TYPE: Square Rotate */
+/* ============================================ */
+
+.vif-spinner--square-rotate {
+  @apply rounded-none;
+
+  .vif-spinner__effect-1 {
+    @apply absolute rounded-none;
+    inline-size: 60%;
+    block-size: 60%;
+    inset-block-start: 20%;
+    inset-inline-start: 20%;
+    background: var(--spinner-color);
+    box-sizing: border-box;
+    animation: vif-square-flip 2s ease-in-out infinite;
+  }
+}
+
+/* ============================================ */
+/* TYPE: Material (SVG Circle) */
+/* ============================================ */
+
+.vif-spinner--material {
+  @apply flex items-center justify-center;
+  animation: vif-rotator 1.4s linear infinite;
+
+  .vif-spinner__track {
+    stroke: currentColor;
+    opacity: 0.2;
+  }
+
+  .vif-spinner__path {
+    stroke: var(--spinner-color);
+    stroke-linecap: round;
+    animation:
+      vif-dash 1.4s ease-in-out infinite,
+      vif-colors 5.6s ease-in-out infinite;
+    transform-origin: center;
+  }
+}
+
+/* ============================================ */
+/* Animations */
+/* ============================================ */
+
+@keyframes vif-rotate {
+  0% {
+    rotate: 0deg;
+  }
+  100% {
+    rotate: 360deg;
+  }
+}
+
+@keyframes vif-rotate-opacity {
+  0% {
+    rotate: 0deg;
+    opacity: 0.1;
+  }
+  100% {
+    rotate: 360deg;
+    opacity: 1;
+  }
+}
+
+@keyframes vif-waves {
+  0% {
+    inline-size: 0;
+    block-size: 0;
+    opacity: 1;
+  }
+  100% {
+    inline-size: 50px;
+    block-size: 50px;
+    opacity: 0;
+  }
+}
+
+@keyframes vif-bounce {
+  0%,
+  100% {
+    translate: 0 0;
+    scale: 1;
+  }
+  50% {
+    translate: 0 -120%;
+    scale: 1.05;
+  }
+}
+
+@keyframes vif-radius {
+  0% {
+    rotate: 0deg;
+    scale: 0.1;
+    opacity: 1;
+  }
+  60% {
+    rotate: 160deg;
+    scale: 1;
+    opacity: 0;
+  }
+  100% {
+    rotate: 0deg;
+    scale: 0.1;
+    opacity: 1;
+  }
+}
+
+@keyframes vif-corners {
+  0% {
+    border-radius: 50%;
+    rotate: 0deg;
+  }
+  25% {
+    border-radius: 50% 50% 50% 20%;
+  }
+  50% {
+    border-radius: 50% 50% 20% 30%;
+  }
+  75% {
+    border-radius: 50% 20% 30% 30%;
+  }
+  100% {
+    border-radius: 50%;
+    rotate: -180deg;
+  }
+}
+
+@keyframes vif-sound {
+  0% {
+    scale: 1 0.2;
+    opacity: 0.7;
+  }
+  50% {
+    scale: 1 0.7;
+    opacity: 1;
+  }
+  100% {
+    scale: 1 0.2;
+    opacity: 0.7;
+  }
+}
+
+@keyframes vif-rectangle-slide {
+  0% {
+    translate: -100% 0;
+  }
+  50% {
+    translate: 100% 0;
+  }
+  100% {
+    translate: -100% 0;
+  }
+}
+
+@keyframes vif-rotator {
+  0% {
+    rotate: 0deg;
+  }
+  100% {
+    rotate: 270deg;
+  }
+}
+
+@keyframes vif-dash {
+  0% {
+    stroke-dasharray: 1, 150;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -35;
+  }
+  100% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -124;
+  }
+}
+
+@keyframes vif-colors {
+  0% {
+    stroke: #4285f4;
+  }
+  25% {
+    stroke: #de3e35;
+  }
+  50% {
+    stroke: #f7c223;
+  }
+  75% {
+    stroke: #1b9a59;
+  }
+  100% {
+    stroke: #4285f4;
+  }
+}
+
+@keyframes vif-square-flip {
+  0% {
+    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
+  }
+  25% {
+    transform: perspective(120px) rotateX(180deg) rotateY(0deg);
+  }
+  50% {
+    transform: perspective(120px) rotateX(180deg) rotateY(180deg);
+  }
+  75% {
+    transform: perspective(120px) rotateX(0deg) rotateY(180deg);
+  }
+  100% {
+    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
+  }
+}

package/index.css

@@ -0,0 +1,24 @@
+/**
+ * VifUI Styles
+ * Main entry point for all VifUI styles
+ *
+ * @package @vifui/styles
+ * @version 0.3.0-alpha.4
+ * @license MIT
+ */
+
+/* Tailwind CSS base */
+@import "tailwindcss";
+
+/* VifUI base styles and variables */
+@import "./base/base.css" layer(base);
+
+/* Default theme (light/dark) */
+@import "./themes/default.css" layer(base);
+
+/* Utility classes */
+@import "./utilities/index.css" layer(utilities);
+
+/* Component styles */
+@import "./components/index.css" layer(components);
+

package/package.json

@@ -0,0 +1,99 @@
+{
+  "name": "@vifui/styles",
+  "version": "0.4.0-alpha.6",
+  "description": "CSS styles and design tokens for VifUI",
+  "license": "MIT",
+  "type": "module",
+  "author": "AbdulAzeez Olamide",
+  "homepage": "https://github.com/I-am-abdulazeez/vifui#readme",
+  "keywords": [
+    "vifui",
+    "vue",
+    "vue3",
+    "styles",
+    "css",
+    "tailwind",
+    "design-system"
+  ],
+  "files": [
+    "base",
+    "components",
+    "themes",
+    "utilities",
+    "index.css",
+    "README.md"
+  ],
+  "exports": {
+    ".": {
+      "default": "./index.css",
+      "style": "./index.css"
+    },
+    "./base": {
+      "default": "./base/base.css",
+      "style": "./base/base.css"
+    },
+    "./components/accordion": {
+      "default": "./components/accordion.css",
+      "style": "./components/accordion.css"
+    },
+    "./components/alert": {
+      "default": "./components/alert.css",
+      "style": "./components/alert.css"
+    },
+    "./components/avatar": {
+      "default": "./components/avatar.css",
+      "style": "./components/avatar.css"
+    },
+    "./components/badge": {
+      "default": "./components/badge.css",
+      "style": "./components/badge.css"
+    },
+    "./components/breadcrumb": {
+      "default": "./components/breadcrumb.css",
+      "style": "./components/breadcrumb.css"
+    },
+    "./components/button": {
+      "default": "./components/button.css",
+      "style": "./components/button.css"
+    },
+    "./components/card": {
+      "default": "./components/card.css",
+      "style": "./components/card.css"
+    },
+    "./components/checkbox": {
+      "default": "./components/checkbox.css",
+      "style": "./components/checkbox.css"
+    },
+    "./components/divider": {
+      "default": "./components/divider.css",
+      "style": "./components/divider.css"
+    },
+    "./components/spinner": {
+      "default": "./components/spinner.css",
+      "style": "./components/spinner.css"
+    },
+    "./themes/default": {
+      "default": "./themes/default.css",
+      "style": "./themes/default.css"
+    },
+    "./utilities": {
+      "default": "./utilities/index.css",
+      "style": "./utilities/index.css"
+    },
+    "./package.json": "./package.json"
+  },
+  "peerDependencies": {
+    "tailwindcss": ">=4.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/I-am-abdulazeez/vifui.git",
+    "directory": "packages/styles"
+  },
+  "bugs": {
+    "url": "https://github.com/I-am-abdulazeez/vifui/issues"
+  }
+}