@vifui/styles 0.6.0-alpha.11 → 0.6.0-alpha.14

package/components/index.css

@@ -8,8 +8,12 @@
 @import "./checkbox.css";
 @import "./divider.css";
 @import "./list.css";
+@import "./skeleton.css";
 @import "./spinner.css";
 @import "./switch.css";
 @import "./tabs.css";
 @import "./tooltip.css";
 @import "./upload.css";
+@import "./tabs.css";
+@import "./popover.css";
+@import "./skeleton.css";

package/components/popover.css

@@ -0,0 +1,39 @@
+/**
+ * Popover Component - Tailwind v4 + Modern CSS
+ */
+
+/* TRIGGER */
+.vif-popover__trigger {
+  @apply relative inline-flex;
+}
+
+/* CONTENT */
+.vif-popover__content {
+  @apply relative bg-overlay text-(--overlay-foreground) z-50 w-72 rounded-md p-4 shadow-md origin-(--reka-popover-content-transform-origin) outline-hidden;
+
+  @apply data-[state=open]:animate-[vif-fade-in_var(--transition-fast)_var(--ease-smooth)];
+  @apply data-[state=closed]:animate-[vif-fade-out_var(--transition-fast)_var(--ease-smooth)];
+
+  @apply data-[side=bottom]:animate-[vif-slide-up_var(--transition-base)_var(--ease-out)];
+  @apply data-[side=left]:animate-[vif-slide-right_var(--transition-base)_var(--ease-out)];
+  @apply data-[side=right]:animate-[vif-slide-left_var(--transition-base)_var(--ease-out)];
+  @apply data-[side=top]:animate-[vif-slide-down_var(--transition-base)_var(--ease-out)];
+}
+
+/* TITLE */
+.vif-popover__title {
+  @apply font-medium leading-none;
+}
+
+.vif-popover__description {
+  @apply text-sm text-(--muted-foreground) my-2;
+}
+
+/* ARROW */
+.vif-popover__arrow {
+  @apply fill-default;
+}
+
+.vif-popover__close {
+  @apply absolute top-4 right-4 outline-none inline-flex items-center justify-center cursor-default;
+}

package/components/skeleton.css

@@ -0,0 +1,22 @@
+/**
+ * Skeleton Component - Tailwind v4 + Modern CSS
+ */
+
+/* ROOT */
+.vif-skeleton__root {
+  @apply relative bg-(--foreground)/10 rounded-md;
+  animation: vif-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+/* PRESETS */
+.vif-skeleton__root--preset-circle {
+  @apply rounded-full size-12;
+}
+
+.vif-skeleton__root--preset-rectangle {
+  @apply w-full h-4;
+}
+
+.vif-skeleton__root--preset-square {
+  @apply size-12;
+}

package/components/upload.css

@@ -106,8 +106,7 @@
 
 /* Grid variant (default) */
 .vif-upload__files--grid {
-  @apply grid gap-4;
-  @apply grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4;
+  @apply flex flex-wrap gap-4;
 }
 
 /* List variant */
@@ -168,6 +167,7 @@
   @apply flex flex-col items-center justify-center;
   width: 200px;
   height: 200px;
+  flex-shrink: 0;
 }
 
 /* List file item */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vifui/styles",
-  "version": "0.6.0-alpha.11",
+  "version": "0.6.0-alpha.14",
   "description": "CSS styles and design tokens for VifUI",
   "license": "MIT",
   "type": "module",
@@ -72,6 +72,14 @@
       "default": "./components/list.css",
       "style": "./components/list.css"
     },
+    "./components/popover": {
+      "default": "./components/popover.css",
+      "style": "./components/popover.css"
+    },
+    "./components/skeleton": {
+      "default": "./components/skeleton.css",
+      "style": "./components/skeleton.css"
+    },
     "./components/spinner": {
       "default": "./components/spinner.css",
       "style": "./components/spinner.css"