@vifui/styles 0.4.0-alpha.6

package/components/alert.css

@@ -0,0 +1,213 @@
+/**
+ * Alert Component
+ *
+ * Built with modern Tailwind CSS and CSS variables
+ * Follows VifUI design system
+ */
+
+/* ============================================ */
+/* Root */
+/* ============================================ */
+.vif-alert {
+  @apply relative w-full flex rounded-lg overflow-hidden gap-2.5 p-4;
+}
+
+/* ============================================ */
+/* Close */
+/* ============================================ */
+.vif-alert__close {
+  @apply absolute right-4 top-4 hover:bg-none! p-0 h-min;
+}
+
+/* ============================================ */
+/* Icon */
+/* ============================================ */
+.vif-alert__icon {
+  @apply shrink-0 w-4 h-lh text-inherit;
+}
+
+/* ============================================ */
+/* Content */
+/* ============================================ */
+.vif-alert__content {
+  @apply flex-1 min-w-0 flex-col gap-2 flex;
+}
+
+.vif-alert__content-collapsible {
+  @apply cursor-(--cursor-interactive) hover:opacity-90;
+}
+
+/* ============================================ */
+/* Content Header */
+/* ============================================ */
+.vif-alert__header {
+  @apply flex flex-col min-w-0 min-h-4 items-start;
+}
+
+/* ============================================ */
+/* Content Header Title */
+/* ============================================ */
+.vif-alert__title {
+  @apply text-base font-medium;
+}
+
+/* ============================================ */
+/* Content Header Description */
+/* ============================================ */
+.vif-alert__description {
+  @apply text-sm text-start opacity-90;
+}
+
+/* ============================================ */
+/* Content Body */
+/* ============================================ */
+.vif-alert__body {
+  @apply text-sm;
+}
+
+/* ============================================ */
+/* Content Footer */
+/* ============================================ */
+.vif-alert__footer {
+  @apply flex items-center justify-end gap-4;
+}
+
+/* ============================================ */
+/* Variants(Color + Variant) */
+/* ============================================ */
+
+/* Brand */
+.vif-alert-brand-primary {
+  @apply bg-primary text-primary-foreground;
+}
+
+.vif-alert-brand-outline {
+  @apply text-primary ring ring-inset ring-primary/25;
+}
+
+.vif-alert-brand-soft {
+  @apply bg-primary/10 text-primary;
+}
+
+.vif-alert-brand-secondary {
+  @apply bg-primary/10 text-primary ring ring-inset ring-primary/25;
+}
+
+/* Success */
+.vif-alert-success-primary {
+  @apply bg-success text-success-foreground;
+}
+
+.vif-alert-success-outline {
+  @apply text-success ring ring-inset ring-success/25;
+}
+
+.vif-alert-success-soft {
+  @apply bg-success/10 text-success;
+}
+
+.vif-alert-success-secondary {
+  @apply bg-success/10 text-success ring ring-inset ring-success/25;
+}
+
+/* Warning */
+.vif-alert-warning-primary {
+  @apply bg-warning text-warning-foreground;
+}
+
+.vif-alert-warning-outline {
+  @apply text-warning ring ring-inset ring-warning/25;
+}
+
+.vif-alert-warning-soft {
+  @apply bg-warning/10 text-warning;
+}
+
+.vif-alert-warning-secondary {
+  @apply bg-warning/10 text-warning ring ring-inset ring-warning/25;
+}
+
+/* Danger */
+.vif-alert-danger-primary {
+  @apply bg-danger text-danger-foreground;
+}
+
+.vif-alert-danger-outline {
+  @apply text-danger ring ring-inset ring-danger/25;
+}
+
+.vif-alert-danger-soft {
+  @apply bg-danger/10 text-danger;
+}
+
+.vif-alert-danger-secondary {
+  @apply bg-danger/10 text-danger ring ring-inset ring-danger/25;
+}
+
+/* Neutral */
+.vif-alert-neutral-primary {
+  background: var(--foreground);
+  color: var(--background);
+}
+
+.vif-alert-neutral-outline {
+  @apply ring ring-inset;
+  color: var(--foreground);
+  --tw-ring-color: var(--border);
+}
+
+.vif-alert-neutral-soft {
+  @apply bg-default text-default-foreground;
+}
+
+.vif-alert-neutral-secondary {
+  @apply bg-default ring ring-inset;
+  color: var(--foreground);
+  --tw-ring-color: var(--border);
+}
+
+/* ============================================ */
+/* Animations */
+/* ============================================ */
+
+/* Smooth collapse for body & footer */
+.vif-collapse-enter-active,
+.vif-collapse-leave-active {
+  transition: all 300ms var(--ease-smooth);
+  overflow: hidden;
+}
+
+.vif-collapse-enter-from,
+.vif-collapse-leave-to {
+  max-height: 0;
+  opacity: 0;
+  margin-top: 0;
+}
+
+.vif-collapse-enter-to,
+.vif-collapse-leave-from {
+  max-height: 500px;
+  opacity: 1;
+}
+
+/* Smooth fade in/out for entire alert */
+.vif-alert-fade-enter-active,
+.vif-alert-fade-leave-active {
+  transition: all 250ms var(--ease-smooth);
+}
+
+.vif-alert-fade-enter-from {
+  opacity: 0;
+  transform: translateY(-8px);
+}
+
+.vif-alert-fade-leave-to {
+  opacity: 0;
+  transform: translateY(-4px);
+}
+
+.vif-alert-fade-enter-to,
+.vif-alert-fade-leave-from {
+  opacity: 1;
+  transform: translateY(0);
+}

package/components/avatar.css

@@ -0,0 +1,140 @@
+/**
+ * Avatar and Avatar Group Component
+ *
+ * Architecture inspired by Vuesax v3 (MIT License)
+ * Built with modern Tailwind CSS and CSS variables
+ */
+
+/* ============================================ */
+/* Root Styles */
+/* ============================================ */
+.vif-avatar {
+  @apply relative flex items-center justify-center transition-all overflow-hidden shrink-0 select-none align-middle bg-(--surface-3);
+}
+
+.vif-avatar[aria-disabled="true"] {
+  @apply opacity-(--disabled-opacity) cursor-(--cursor-disabled) pointer-events-none;
+}
+
+/* Image */
+.vif-avatar__image {
+  @apply h-full w-full rounded-[inherit] object-cover transition-transform;
+}
+
+/* Fallback */
+.vif-avatar__fallback {
+  @apply font-medium leading-none text-(--muted) truncate;
+}
+
+/* Standalone: Image scale on hover */
+.vif-avatar[data-standalone="true"]:hover .vif-avatar__image {
+  @apply scale-105;
+}
+
+/* Loader container */
+.vif-avatar__loader {
+  @apply absolute inset-0 flex items-center justify-center pointer-events-none;
+}
+
+/* ============================================ */
+/* Variant Variants */
+/* ============================================ */
+.vif-avatar--ringed {
+  @apply ring-offset-(--ring-offset-width) ring-2;
+}
+
+/* ============================================ */
+/* Size Variants */
+/* ============================================ */
+.vif-avatar--xs {
+  @apply size-6;
+}
+
+.vif-avatar--xs .vif-avatar__fallback {
+  @apply text-xs;
+}
+
+.vif-avatar--sm {
+  @apply size-7;
+}
+
+.vif-avatar--sm .vif-avatar__fallback {
+  @apply text-sm;
+}
+
+.vif-avatar--md {
+  @apply size-8;
+}
+
+.vif-avatar--md .vif-avatar__fallback {
+  @apply text-base;
+}
+
+.vif-avatar--lg {
+  @apply size-9;
+}
+
+.vif-avatar--lg .vif-avatar__fallback {
+  @apply text-lg;
+}
+
+.vif-avatar--xl {
+  @apply size-10;
+}
+
+.vif-avatar--xl .vif-avatar__fallback {
+  @apply text-xl;
+}
+
+/* ============================================ */
+/* Ring Color Variants */
+/* ============================================ */
+.vif-avatar--brand {
+  @apply ring-(--primary);
+}
+
+.vif-avatar--success {
+  @apply ring-(--success);
+}
+
+.vif-avatar--warning {
+  @apply ring-(--warning);
+}
+
+.vif-avatar--danger {
+  @apply ring-(--danger);
+}
+
+.vif-avatar--neutral {
+  @apply ring-(--neutral);
+}
+
+/* ============================================ */
+/* Shape Variants */
+/* ============================================ */
+.vif-avatar--default {
+  @apply rounded-(--radius);
+}
+
+.vif-avatar--circle {
+  @apply rounded-(--radius-full);
+}
+
+/* ============================================ */
+/* Avatar Group */
+/* ============================================ */
+.vif-avatar-group {
+  @apply flex -space-x-2 relative isolate;
+}
+
+.vif-avatar-group > .vif-avatar {
+  @apply relative;
+}
+
+.vif-avatar-group > .vif-avatar:first-child:hover {
+  @apply -translate-x-1 -z-1;
+}
+
+.vif-avatar-group > .vif-avatar:not(:first-child):hover {
+  @apply -translate-x-1;
+}

package/components/badge.css

@@ -0,0 +1,297 @@
+/**
+ * Badge Component
+ *
+ * Built with modern Tailwind CSS and CSS variables
+ * Follows VifUI design system
+ */
+
+/* ============================================ */
+/* Base Badge */
+/* ============================================ */
+
+.vif-badge {
+  /* Layout */
+  @apply inline-flex items-center justify-center gap-1;
+  @apply whitespace-nowrap select-none;
+
+  /* Sizing */
+  @apply h-5 px-2;
+  @apply text-xs font-medium;
+
+  /* Borders */
+  border-radius: var(--radius);
+  border: 0;
+
+  /* Transitions */
+  transition:
+    background-color 150ms var(--ease-smooth),
+    color 150ms var(--ease-smooth),
+    border-color 150ms var(--ease-smooth);
+
+  /* Remove default styles */
+  background: transparent;
+
+  /* Icon styles */
+  & svg {
+    @apply size-3 shrink-0;
+  }
+}
+
+/* ============================================ */
+/* Icon Component Styles */
+/* ============================================ */
+
+.vif-badge__icon {
+  @apply inline-flex items-center justify-center shrink-0;
+}
+
+/* Hide empty icons completely */
+.vif-badge__icon:empty,
+.vif-badge__icon svg:empty {
+  display: none !important;
+}
+
+/* ============================================ */
+/* Size Variants */
+/* ============================================ */
+
+.vif-badge--xs {
+  @apply h-4 px-1.5 text-[10px];
+
+  & svg {
+    @apply size-2.5;
+  }
+}
+
+.vif-badge--sm {
+  @apply h-5 px-2 text-[0.65rem];
+
+  & svg {
+    @apply size-3;
+  }
+}
+
+.vif-badge--md {
+  @apply h-6 px-2.5 text-[0.65rem];
+
+  & svg {
+    @apply size-3.5;
+  }
+}
+
+.vif-badge--lg {
+  @apply h-7 px-3 text-sm;
+
+  & svg {
+    @apply size-4;
+  }
+}
+
+/* ============================================ */
+/* Solid Variant (Default) */
+/* ============================================ */
+
+.vif-badge--solid {
+  @apply bg-primary text-primary-foreground;
+}
+
+/* Solid + Neutral */
+.vif-badge--solid.vif-badge--neutral {
+  background-color: var(--color-neutral-200);
+  color: var(--color-neutral-900);
+}
+
+/* Solid + Brand */
+.vif-badge--solid.vif-badge--brand {
+  @apply bg-primary text-primary-foreground;
+}
+
+/* Solid + Success */
+.vif-badge--solid.vif-badge--success {
+  @apply bg-success text-success-foreground;
+}
+
+/* Solid + Warning */
+.vif-badge--solid.vif-badge--warning {
+  @apply bg-warning text-warning-foreground;
+}
+
+/* Solid + Danger */
+.vif-badge--solid.vif-badge--danger {
+  @apply bg-danger text-danger-foreground;
+}
+
+/* ============================================ */
+/* Soft Variant */
+/* ============================================ */
+
+.vif-badge--soft {
+  @apply bg-default text-foreground;
+}
+
+/* Soft + Neutral */
+.vif-badge--soft.vif-badge--neutral {
+  background-color: var(--color-neutral-100);
+  color: var(--color-neutral-700);
+}
+
+/* Soft + Brand */
+.vif-badge--soft.vif-badge--brand {
+  @apply bg-primary/10 text-primary;
+}
+
+/* Soft + Success */
+.vif-badge--soft.vif-badge--success {
+  @apply bg-success/10 text-success;
+}
+
+/* Soft + Warning */
+.vif-badge--soft.vif-badge--warning {
+  @apply bg-warning/10 text-warning;
+}
+
+/* Soft + Danger */
+.vif-badge--soft.vif-badge--danger {
+  @apply bg-danger/10 text-danger;
+}
+
+/* ============================================ */
+/* Outline Variant */
+/* ============================================ */
+
+.vif-badge--outline {
+  @apply bg-transparent border border-primary text-primary;
+}
+
+/* Outline + Neutral */
+.vif-badge--outline.vif-badge--neutral {
+  border-color: var(--color-neutral-400);
+  color: var(--color-neutral-700);
+}
+
+/* Outline + Brand */
+.vif-badge--outline.vif-badge--brand {
+  @apply border-primary text-primary;
+}
+
+/* Outline + Success */
+.vif-badge--outline.vif-badge--success {
+  @apply border-success text-success;
+}
+
+/* Outline + Warning */
+.vif-badge--outline.vif-badge--warning {
+  @apply border-warning text-warning;
+}
+
+/* Outline + Danger */
+.vif-badge--outline.vif-badge--danger {
+  @apply border-danger text-danger;
+}
+
+/* ============================================ */
+/* Flat Variant */
+/* ============================================ */
+
+.vif-badge--flat {
+  @apply bg-default text-foreground;
+}
+
+/* Flat + Neutral */
+.vif-badge--flat.vif-badge--neutral {
+  background-color: var(--color-neutral-100);
+  color: var(--color-neutral-600);
+}
+
+/* Flat + Brand */
+.vif-badge--flat.vif-badge--brand {
+  @apply bg-primary/5 text-primary;
+}
+
+/* Flat + Success */
+.vif-badge--flat.vif-badge--success {
+  @apply bg-success/5 text-success;
+}
+
+/* Flat + Warning */
+.vif-badge--flat.vif-badge--warning {
+  @apply bg-warning/5 text-warning;
+}
+
+/* Flat + Danger */
+.vif-badge--flat.vif-badge--danger {
+  @apply bg-danger/5 text-danger;
+}
+
+/* ============================================ */
+/* Modifiers */
+/* ============================================ */
+
+/* Rounded (fully circular) */
+.vif-badge--rounded {
+  border-radius: var(--radius-full);
+}
+
+/* With dot indicator */
+.vif-badge--dot {
+  @apply gap-1.5;
+}
+
+.vif-badge__dot {
+  @apply size-1.5 rounded-full;
+  background-color: currentColor;
+}
+
+/* Removable badge close button */
+.vif-badge__close {
+  @apply -mr-0.5 ml-0.5;
+  @apply inline-flex items-center justify-center;
+  @apply size-3.5 rounded-sm;
+  @apply transition-colors;
+  cursor: var(--cursor-interactive);
+
+  &:hover {
+    background-color: color-mix(in srgb, currentColor 15%, transparent);
+  }
+
+  &:active {
+    background-color: color-mix(in srgb, currentColor 25%, transparent);
+  }
+
+  & svg {
+    @apply size-3;
+  }
+}
+
+/* Adjust close button size per badge size */
+.vif-badge--xs .vif-badge__close {
+  @apply size-3;
+
+  & svg {
+    @apply size-2.5;
+  }
+}
+
+.vif-badge--sm .vif-badge__close {
+  @apply size-3.5;
+
+  & svg {
+    @apply size-3;
+  }
+}
+
+.vif-badge--md .vif-badge__close {
+  @apply size-4;
+
+  & svg {
+    @apply size-3.5;
+  }
+}
+
+.vif-badge--lg .vif-badge__close {
+  @apply size-4;
+
+  & svg {
+    @apply size-3.5;
+  }
+}