@vifui/styles 0.4.0-alpha.6

package/components/card.css

@@ -0,0 +1,393 @@
+/**
+ * Card Component
+ *
+ * Architecture inspired by Vuesax v3 (MIT License)
+ * Built with modern Tailwind CSS and CSS variables
+ */
+
+/* ============================================ */
+/* Base Card */
+/* ============================================ */
+
+.vif-card {
+  /* Layout */
+  @apply relative block w-full;
+
+  /* Background */
+  background: var(--surface);
+
+  /* Border */
+  border-radius: var(--radius-lg);
+
+  /* Transitions - smooth like Vuesax */
+  transition: var(--card-transition);
+
+  /* Typography */
+  color: var(--surface-foreground);
+
+  /* Performance */
+  contain: layout style;
+}
+
+/* ============================================ */
+/* Variant: Elevated (Default - Vuesax style) */
+/* ============================================ */
+
+.vif-card--elevated {
+  box-shadow: var(--card-shadow);
+}
+
+/* ============================================ */
+/* Variant: Outlined */
+/* ============================================ */
+
+.vif-card--outlined {
+  border: 1px solid var(--border);
+  box-shadow: none;
+}
+
+/* ============================================ */
+/* Variant: Flat */
+/* ============================================ */
+
+.vif-card--flat {
+  background: var(--default);
+  box-shadow: none;
+}
+
+/* ============================================ */
+/* Variant: Ghost */
+/* ============================================ */
+
+.vif-card--ghost {
+  background: transparent;
+  box-shadow: none;
+}
+
+/* ============================================ */
+/* Hoverable State (Vuesax withHover) */
+/* ============================================ */
+
+.vif-card--hoverable {
+  cursor: var(--cursor-interactive);
+
+  &:hover {
+    transform: translateY(-4px);
+    box-shadow: var(--card-shadow-hover);
+  }
+
+  &:active {
+    transform: translateY(-2px);
+  }
+}
+
+/* Hoverable + Outlined */
+.vif-card--hoverable.vif-card--outlined {
+  &:hover {
+    border-color: var(--primary);
+    box-shadow: var(--shadow-md);
+  }
+}
+
+/* Hoverable + Flat */
+.vif-card--hoverable.vif-card--flat {
+  &:hover {
+    /* background: var(--default-hover); */
+    box-shadow: var(--shadow-xs);
+  }
+}
+
+/* Hoverable + Ghost */
+.vif-card--hoverable.vif-card--ghost {
+  &:hover {
+    background: var(--default);
+    box-shadow: var(--shadow-sm);
+  }
+}
+
+/* ============================================ */
+/* Size Variants */
+/* ============================================ */
+
+.vif-card--sm {
+  --card-padding: 0.75rem;
+}
+
+.vif-card--md {
+  --card-padding: 1rem;
+}
+
+.vif-card--lg {
+  --card-padding: 1.5rem;
+}
+
+/* ============================================ */
+/* Color Variants */
+/* ============================================ */
+
+/* Neutral (Default) */
+.vif-card--neutral {
+  /* Uses default surface colors */
+}
+
+/* Brand */
+.vif-card--brand.vif-card--outlined {
+  border-color: var(--primary);
+}
+
+.vif-card--brand.vif-card--flat {
+  background: color-mix(in srgb, var(--primary) 5%, transparent);
+}
+
+/* Success */
+.vif-card--success.vif-card--outlined {
+  border-color: var(--success);
+}
+
+.vif-card--success.vif-card--flat {
+  background: color-mix(in srgb, var(--success) 5%, transparent);
+}
+
+/* Warning */
+.vif-card--warning.vif-card--outlined {
+  border-color: var(--warning);
+}
+
+.vif-card--warning.vif-card--flat {
+  background: color-mix(in srgb, var(--warning) 5%, transparent);
+}
+
+/* Danger */
+.vif-card--danger.vif-card--outlined {
+  border-color: var(--danger);
+}
+
+.vif-card--danger.vif-card--flat {
+  background: color-mix(in srgb, var(--danger) 5%, transparent);
+}
+
+/* ============================================ */
+/* Full Height (Vuesax fixedHeight) */
+/* ============================================ */
+
+.vif-card--full-height {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+/* ============================================ */
+/* Card Header */
+/* ============================================ */
+
+.vif-card__header {
+  @apply relative;
+  padding: var(--card-padding, 1rem);
+  box-shadow: 0px 10px 15px -10px rgba(0, 0, 0, 0.05);
+
+  /* Typography */
+  & h3,
+  & h4 {
+    @apply m-0 p-0 font-semibold;
+  }
+
+  & h3 {
+    @apply text-lg;
+  }
+
+  & h4 {
+    @apply text-base;
+  }
+}
+
+/* ============================================ */
+/* Card Body */
+/* ============================================ */
+
+.vif-card__body {
+  @apply relative;
+  padding: var(--card-padding, 1rem);
+  font-size: 0.875rem;
+  flex: 1; /* For full-height cards */
+}
+
+/* ============================================ */
+/* Card Footer */
+/* ============================================ */
+
+.vif-card__footer {
+  @apply relative;
+  padding: var(--card-padding, 1rem);
+  padding-top: 0;
+}
+
+/* Footer in full-height cards */
+.vif-card--full-height .vif-card__footer {
+  margin-top: 0;
+  transform: none;
+}
+
+/* ============================================ */
+/* Card Media (Image wrapper with zoom effect) */
+/* ============================================ */
+
+.vif-card__media {
+  @apply relative w-full overflow-hidden;
+
+  /* Rounded top corners */
+  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
+
+  /* Base styles for media elements */
+  & > :first-child {
+    @apply block w-full;
+    transition: transform 250ms var(--ease-smooth);
+    vertical-align: middle;
+  }
+}
+
+/* ============================================ */
+/* Media: Auto Ratio (Natural dimensions) */
+/* ============================================ */
+
+.vif-card__media:not(.vif-card__media--square):not(.vif-card__media--video):not(
+    .vif-card__media--portrait
+  ) {
+  max-height: 230px;
+
+  & > :first-child {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+}
+
+/* ============================================ */
+/* Media: Fixed Aspect Ratios */
+/* ============================================ */
+
+/* Square (1:1) */
+.vif-card__media--square {
+  aspect-ratio: 1 / 1;
+
+  & > :first-child {
+    @apply h-full w-full object-cover;
+  }
+}
+
+/* Video (16:9) */
+.vif-card__media--video {
+  aspect-ratio: 16 / 9;
+
+  & > :first-child {
+    @apply h-full w-full object-cover;
+  }
+}
+
+/* Portrait (3:4) */
+.vif-card__media--portrait {
+  aspect-ratio: 3 / 4;
+
+  & > :first-child {
+    @apply h-full w-full object-cover;
+  }
+}
+
+/* ============================================ */
+/* Media: Hover Zoom Effect */
+/* ============================================ */
+
+.vif-card--hoverable:hover .vif-card__media > :first-child {
+  transform: scale(var(--card-image-scale, 1.05));
+}
+
+/* Aspect ratio helpers */
+.vif-card__media--square {
+  aspect-ratio: 1 / 1;
+
+  & > :first-child {
+    @apply h-full w-full object-cover;
+  }
+}
+
+.vif-card__media--video {
+  aspect-ratio: 16 / 9;
+
+  & > :first-child {
+    @apply h-full w-full object-cover;
+  }
+}
+
+.vif-card__media--portrait {
+  aspect-ratio: 3 / 4;
+
+  & > :first-child {
+    @apply h-full w-full object-cover;
+  }
+}
+
+/* ============================================ */
+/* Disabled State */
+/* ============================================ */
+
+.vif-card--disabled {
+  opacity: var(--disabled-opacity);
+  pointer-events: none;
+  cursor: var(--cursor-disabled);
+}
+
+/* ============================================ */
+/* Loading State */
+/* ============================================ */
+
+.vif-card--loading {
+  @apply pointer-events-none relative;
+
+  /* Blur the entire card content with smooth animation */
+  & > * {
+    filter: blur(4px);
+    opacity: 0.6;
+    transition:
+      filter 100ms var(--ease-smooth),
+      opacity 100ms var(--ease-smooth);
+  }
+
+  /* Loading overlay with fade in */
+  &::after {
+    content: "";
+    @apply absolute inset-0 flex items-center justify-center;
+    background: var(--surface);
+    opacity: 0.4;
+    z-index: 10;
+    /* animation: vif-fade-in 100ms var(--ease-smooth); */
+  }
+
+  /* Animated spinner
+  &::before {
+    content: "";
+    @apply absolute left-1/2 top-1/2 z-20;
+    width: 40px;
+    height: 40px;
+    margin: -20px 0 0 -20px;
+    border: 3px solid var(--primary);
+    border-top-color: transparent;
+    border-radius: 50%;
+    animation:
+      vif-spin 0.8s linear infinite,
+      vif-fade-in 200ms var(--ease-smooth);
+  } */
+}
+
+/* @keyframes vif-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes vif-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+} */

package/components/checkbox.css

@@ -0,0 +1,293 @@
+/**
+ * Checkbox Component
+ *
+ * Architecture inspired by Vuesax v3 (MIT License)
+ * Built with modern Tailwind CSS and CSS variables
+ * Uses Reka UI primitives with data attributes
+ */
+
+/* ============================================ */
+/* Base Checkbox Root */
+/* ============================================ */
+
+.vif-checkbox {
+  @apply relative inline-flex items-center justify-center;
+
+  /* Spacing */
+  margin-left: 5px;
+  margin-right: 5px;
+
+  /* Cursor */
+  cursor: var(--cursor-interactive);
+}
+
+/* ============================================ */
+/* Checkbox Box (Visual Square) */
+/* ============================================ */
+
+.vif-checkbox__box {
+  @apply relative flex items-center justify-center;
+  @apply rounded-sm overflow-hidden;
+
+  /* Size - default (overridden by size variants) */
+  width: 20px;
+  height: 20px;
+
+  /* Border */
+  border: 2px solid rgb(180, 180, 180);
+
+  /* Animation */
+  transition: all 0.2s var(--ease-smooth);
+  transform: rotate(-90deg);
+  transform-origin: center;
+
+  /* Box model */
+  box-sizing: border-box;
+}
+
+/* ============================================ */
+/* Checkbox Check Background (Animated Slide) */
+/* ============================================ */
+
+.vif-checkbox__check {
+  @apply absolute inset-0;
+
+  /* Initial state - hidden to the right */
+  transform: translate(100%);
+  transform-origin: right;
+
+  /* Animation */
+  transition: all 0.2s var(--ease-smooth);
+
+  z-index: 10;
+}
+
+/* ============================================ */
+/* Checkbox Indicator (Icon Wrapper) */
+/* ============================================ */
+
+.vif-checkbox__indicator {
+  @apply flex items-center justify-center;
+
+  /* Initial state - hidden */
+  opacity: 0;
+  transform: translate(30px);
+
+  /* Animation */
+  transition: all 0.2s ease-out;
+  backface-visibility: visible;
+  transform-origin: center;
+
+  /* Size */
+  font-size: 1.125em;
+
+  z-index: 100;
+}
+
+/* ============================================ */
+/* Checked State */
+/* ============================================ */
+
+.vif-checkbox[data-state="checked"],
+.vif-checkbox[data-state="indeterminate"] {
+  .vif-checkbox__box {
+    /* Rotate to upright position */
+    transform: rotate(0deg);
+  }
+
+  .vif-checkbox__check {
+    /* Slide in from right */
+    transform: translate(0%);
+  }
+
+  .vif-checkbox__indicator {
+    /* Fade and slide in */
+    opacity: 1;
+    transform: translate(0);
+    color: rgb(255, 255, 255);
+  }
+}
+
+/* ============================================ */
+/* Active State (Click Animation) */
+/* ============================================ */
+
+.vif-checkbox[data-state="checked"]:active,
+.vif-checkbox[data-state="indeterminate"]:active {
+  .vif-checkbox__check {
+    transform: translate(3px);
+  }
+
+  .vif-checkbox__indicator {
+    transform: translate(6px);
+  }
+}
+
+/* ============================================ */
+/* Disabled State */
+/* ============================================ */
+
+.vif-checkbox[data-disabled] {
+  opacity: var(--disabled-opacity);
+  cursor: var(--cursor-disabled);
+  pointer-events: none;
+
+  .vif-checkbox__box {
+    cursor: var(--cursor-disabled);
+  }
+}
+
+/* ============================================ */
+/* Size Variants */
+/* ============================================ */
+
+.vif-checkbox--sm {
+  .vif-checkbox__box {
+    width: 15px;
+    height: 15px;
+  }
+
+  .vif-checkbox__indicator {
+    font-size: 0.7rem;
+  }
+}
+
+.vif-checkbox--md {
+  .vif-checkbox__box {
+    width: 20px;
+    height: 20px;
+  }
+
+  .vif-checkbox__indicator {
+    font-size: 1.125em;
+  }
+}
+
+.vif-checkbox--lg {
+  .vif-checkbox__box {
+    width: 24px;
+    height: 24px;
+  }
+
+  .vif-checkbox__indicator {
+    font-size: 1.25em;
+  }
+}
+
+/* ============================================ */
+/* Color Variants */
+/* ============================================ */
+
+/* Brand */
+.vif-checkbox--brand[data-state="checked"],
+.vif-checkbox--brand[data-state="indeterminate"] {
+  .vif-checkbox__box {
+    border-color: var(--primary);
+    background: var(--primary);
+  }
+
+  .vif-checkbox__check {
+    background: var(--primary);
+  }
+}
+
+/* Success */
+.vif-checkbox--success[data-state="checked"],
+.vif-checkbox--success[data-state="indeterminate"] {
+  .vif-checkbox__box {
+    border-color: var(--success);
+    background: var(--success);
+  }
+
+  .vif-checkbox__check {
+    background: var(--success);
+  }
+}
+
+/* Warning */
+.vif-checkbox--warning[data-state="checked"],
+.vif-checkbox--warning[data-state="indeterminate"] {
+  .vif-checkbox__box {
+    border-color: var(--warning);
+    background: var(--warning);
+  }
+
+  .vif-checkbox__check {
+    background: var(--warning);
+  }
+}
+
+/* Danger */
+.vif-checkbox--danger[data-state="checked"],
+.vif-checkbox--danger[data-state="indeterminate"] {
+  .vif-checkbox__box {
+    border-color: var(--danger);
+    background: var(--danger);
+  }
+
+  .vif-checkbox__check {
+    background: var(--danger);
+  }
+}
+
+/* Neutral */
+.vif-checkbox--neutral[data-state="checked"],
+.vif-checkbox--neutral[data-state="indeterminate"] {
+  .vif-checkbox__box {
+    border-color: var(--foreground);
+    background: var(--foreground);
+  }
+
+  .vif-checkbox__check {
+    background: var(--foreground);
+  }
+}
+
+/* ============================================ */
+/* Checkbox Group */
+/* ============================================ */
+
+.vif-checkbox-group {
+  @apply flex gap-4;
+}
+
+/* Vertical orientation (default) */
+.vif-checkbox-group--vertical {
+  @apply flex-col;
+}
+
+/* Horizontal orientation */
+.vif-checkbox-group--horizontal {
+  @apply flex-row flex-wrap;
+}
+
+/* Group item wrapper */
+.vif-checkbox-group__item {
+  @apply flex items-center gap-2;
+}
+
+/* ============================================ */
+/* Checkbox Label */
+/* ============================================ */
+
+.vif-checkbox__label {
+  @apply text-sm cursor-pointer select-none;
+  color: var(--foreground);
+
+  /* Spacing */
+  margin-left: 8px;
+}
+
+.vif-checkbox[data-disabled] + .vif-checkbox__label {
+  opacity: var(--disabled-opacity);
+  cursor: var(--cursor-disabled);
+}
+
+/* ============================================ */
+/* Focus Styles */
+/* ============================================ */
+
+.vif-checkbox:focus-visible .vif-checkbox__box {
+  outline: 2px solid var(--focus);
+  outline-offset: 2px;
+}