avo 3.30.4 → 4.0.0.beta.1

data/app/assets/stylesheets/css/components/tooltip.css

@@ -0,0 +1,25 @@
+/* Custom Tippy theme: basic */
+/* Supports both light and dark mode via .dark class */
+
+.tippy-box[data-theme~='basic'] {
+  @apply bg-background border border-neutral-200 rounded-md;
+  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.04);
+}
+
+.tippy-box[data-theme~='basic'] .tippy-content {
+  @apply py-1 px-2 font-sans text-sm font-normal leading-5 text-content;
+}
+
+.tippy-box[data-theme~='basic'] .tippy-arrow {
+  @apply hidden;
+}
+
+/* Dark mode support */
+.dark .tippy-box[data-theme~='basic'] {
+  @apply bg-background border-secondary;
+}
+
+.dark .tippy-box[data-theme~='basic'] .tippy-content {
+  @apply text-content;
+}
+

data/app/assets/stylesheets/css/components/ui/badge.css

@@ -0,0 +1,143 @@
+/* Badge Component - Based on Figma Design System */
+/* BEM Methodology: .badge (block), .badge__icon, .badge__label (elements), .badge--modifier (modifiers) */
+
+.badge {
+  /* Layout */
+  @apply inline-flex items-center justify-center text-center font-medium leading-4 transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2;
+  height: var(--spacing-6, 24px);
+  padding: var(--spacing-05, 2px) var(--spacing-2, 8px);
+  gap: var(--spacing-05, 2px);
+
+  /* Style */
+  border-radius: var(--rounded-md, 6px);
+
+  /* Typography */
+  font-size: var(--text-xs, 12px);
+
+  background: color-mix(in oklab, var(--badge-bg), var(--color-primary) 85%);
+  color: var(--badge-text);
+}
+
+/* Badge elements */
+.badge__icon {
+  @apply shrink-0 size-3;
+}
+
+.badge--subtle {
+}
+
+.badge--solid {
+  color: var(--color-white);
+  /* work with the bg color to make it more saturated and lighter */
+  background: color-mix(in oklab, oklch(from var(--badge-text) l calc(c * 1.2) h) 80%, white);
+}
+
+.badge--success {
+  --badge-bg: var(--color-green-400);
+  --badge-text: var(--color-green-600);
+}
+
+.badge--warning {
+  --badge-bg: var(--color-orange-400);
+  --badge-text: var(--color-orange-600);
+}
+
+.badge--danger {
+  --badge-bg: var(--color-red-400);
+  --badge-text: var(--color-red-600);
+}
+
+.badge--info {
+  --badge-bg: var(--color-blue-400);
+  --badge-text: var(--color-blue-600);
+}
+
+.badge--neutral {
+  --badge-bg: var(--color-gray-400);
+  --badge-text: var(--color-gray-600);
+}
+
+.badge--red {
+  --badge-bg: var(--color-red-400);
+  --badge-text: var(--color-red-600);
+}
+
+.badge--orange {
+  --badge-bg: var(--color-orange-400);
+  --badge-text: var(--color-orange-600);
+}
+
+.badge--amber {
+  --badge-bg: var(--color-amber-400);
+  --badge-text: var(--color-amber-600);
+}
+
+.badge--yellow {
+  --badge-bg: var(--color-yellow-400);
+  --badge-text: var(--color-yellow-600);
+}
+
+.badge--lime {
+  --badge-bg: var(--color-lime-400);
+  --badge-text: var(--color-lime-600);
+}
+
+.badge--green {
+  --badge-bg: var(--color-green-400);
+  --badge-text: var(--color-green-600);
+}
+
+.badge--emerald {
+  --badge-bg: var(--color-emerald-400);
+  --badge-text: var(--color-emerald-600);
+}
+
+.badge--teal {
+  --badge-bg: var(--color-teal-400);
+  --badge-text: var(--color-teal-600);
+}
+
+.badge--cyan {
+  --badge-bg: var(--color-cyan-400);
+  --badge-text: var(--color-cyan-600);
+}
+
+.badge--sky {
+  --badge-bg: var(--color-sky-400);
+  --badge-text: var(--color-sky-600);
+}
+
+.badge--blue {
+  --badge-bg: var(--color-blue-400);
+  --badge-text: var(--color-blue-600);
+}
+
+.badge--indigo {
+  --badge-bg: var(--color-indigo-400);
+  --badge-text: var(--color-indigo-600);
+}
+
+.badge--violet {
+  --badge-bg: var(--color-violet-400);
+  --badge-text: var(--color-violet-600);
+}
+
+.badge--purple {
+  --badge-bg: var(--color-purple-400);
+  --badge-text: var(--color-purple-600);
+}
+
+.badge--fuchsia {
+  --badge-bg: var(--color-fuchsia-400);
+  --badge-text: var(--color-fuchsia-600);
+}
+
+.badge--pink {
+  --badge-bg: var(--color-pink-400);
+  --badge-text: var(--color-pink-600);
+}
+
+.badge--rose {
+  --badge-bg: var(--color-rose-400);
+  --badge-text: var(--color-rose-600);
+}

data/app/assets/stylesheets/css/components/ui/card.css

@@ -0,0 +1,95 @@
+/* Card Component - Based on Figma Design System */
+.card {
+  @apply flex flex-col items-start self-stretch rounded-xl border border-tertiary bg-secondary;
+}
+
+/* Card variants */
+.card--default {
+  /* Default styling already applied */
+}
+
+.card--compact {
+  /* Compact variant - smaller spacing */
+  .card__wrapper {
+    @apply p-0.5;
+  }
+
+  .card__header {
+    @apply py-2 px-3;
+  }
+}
+
+.card--full-width {
+  /* Full width variant */
+  @apply w-full;
+}
+
+/* Card wrapper */
+.card__wrapper {
+  @apply flex flex-col items-start self-stretch w-full;
+  /* offset 1px from the wrapper to match the design */
+  padding: calc(var(--spacing) - 1px);
+}
+
+/* for pagination we need the padding to be 4px */
+/* TODO: maybe we can make the same padding for all the cases */
+.card:has(.card__footer .pagination) {
+  .card__wrapper {
+    @apply p-1;
+  }
+}
+
+/* Card header */
+.card__header {
+  @apply flex flex-col items-start self-stretch py-3 px-4;
+
+  &:has(select),
+  &:has(.button) {
+    @apply pe-0;
+  }
+
+  /* `sm` size buttons make the header too tall. This will compensate for it. */
+  .button {
+    @apply -my-1;
+  }
+}
+
+.card--compact-header {
+  .card__header {
+    @apply py-1 px-2;
+  }
+}
+
+/* Card title - Copy/14/500 from Figma */
+.card__title {
+  @apply text-content font-medium leading-6 text-sm;
+}
+
+/* Card description - Copy/14/400 from Figma */
+.card__description {
+  @apply text-content-secondary font-normal leading-5 text-sm;
+}
+
+/* Card body */
+.card__body {
+  @apply flex flex-col items-start self-stretch w-full rounded-lg border border-tertiary bg-primary overflow-hidden;
+}
+
+/* Card footer - full width so pagination can span edge to edge */
+.card__footer {
+  @apply w-full;
+    &:has(.pagination) {
+      @apply p-1 pt-0;
+    }
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  .card__header {
+    @apply py-2 px-3;
+  }
+
+  .card--compact .card__header {
+    @apply py-1 px-2;
+  }
+}

data/app/assets/stylesheets/css/components/ui/checkbox.css

@@ -0,0 +1,50 @@
+@layer base {
+  /* input[type=radio], */
+  input[type=checkbox] {
+    @apply appearance-none size-4 cursor-pointer rounded-sm border border-tertiary bg-primary;
+
+    box-shadow: var(--box-shadow);
+  }
+
+  /* input[type=radio] {
+    @apply rounded-full;
+  } */
+
+  input[type=checkbox]:checked {
+    @apply bg-no-repeat bg-center bg-size-[70%];
+    background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%228%22%20viewBox%3D%220%200%2012%208%22%20fill%3D%22white%22%3E%3Cpath%20d%3D%22M10.1953%200.195262C10.4556%20-0.0650874%2010.8776%20-0.0650874%2011.138%200.195262C11.3983%200.455612%2011.3983%200.877621%2011.138%201.13797L4.4713%207.80464C4.21095%208.06499%203.78895%208.06499%203.5286%207.80464L0.195262%204.4713C-0.0650874%204.21095%20-0.0650874%203.78894%200.195262%203.5286C0.455612%203.26825%200.877621%203.26825%201.13797%203.5286L3.99995%206.39057L10.1953%200.195262Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E);
+  }
+
+  input[type=checkbox]:indeterminate {
+    @apply bg-no-repeat bg-center bg-size-[70%];
+    background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2211%22%20height%3D%222%22%20viewBox%3D%220%200%2011%202%22%20fill%3D%22white%22%3E%3Cpath%20d%3D%22M10%200C10.3682%200%2010.6667%200.298477%2010.6667%200.666667C10.6667%201.03486%2010.3682%201.33333%2010%201.33333H0.666667C0.298477%201.33333%200%201.03486%200%200.666667C0%200.298477%200.298477%200%200.666667%200H10Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E);
+  }
+
+  /* input[type=radio]:checked, */
+  input[type=checkbox]:checked,
+  input[type=checkbox]:indeterminate {
+    @apply bg-accent-content border-accent-content;
+  }
+
+  /* input[type=radio]:focus-visible, */
+  input[type=radio]:hover:not(:disabled),
+  input[type=checkbox]:focus-visible,
+  input[type=checkbox]:hover:not(:disabled) {
+    @apply outline-2 outline-offset-2 outline-accent-content;
+  }
+
+  /* input[type=radio]:checked:focus-visible,
+  input[type=radio]:checked:hover:not(:disabled), */
+  input[type=checkbox]:checked:focus-visible,
+  input[type=checkbox]:checked:hover:not(:disabled),
+  input[type=checkbox]:indeterminate:focus-visible,
+  input[type=checkbox]:indeterminate:hover:not(:disabled) {
+    @apply bg-accent-content border-accent-content;
+  }
+
+  /* input[type=radio]:disabled, */
+
+  input[type=checkbox]:disabled {
+    @apply cursor-not-allowed opacity-60;
+  }
+}

data/app/assets/stylesheets/css/components/ui/description_list.css

@@ -0,0 +1,3 @@
+.description-list {
+  @apply w-full flex flex-wrap overflow-auto flex-1 divide-y divide-tertiary;
+}

data/app/assets/stylesheets/css/components/ui/dropdown.css

@@ -0,0 +1,68 @@
+.dropdown {
+  @apply relative inline-flex;
+}
+
+/* Closed state - hidden by default */
+.dropdown-popover {
+  @apply absolute z-10 rounded-lg bg-primary top-full end-0 bottom-auto start-auto mt-2;
+  box-shadow: var(--box-shadow-card);
+}
+
+/* Backdrop - transparent for dropdown (no overlay) */
+.dropdown-popover::backdrop {
+  background-color: transparent;
+}
+
+/* Backdrop remains transparent when open */
+.dropdown-popover:open::backdrop {
+  background-color: transparent;
+}
+
+.dropdown-menu {
+  @apply flex flex-col w-full rounded-lg border border-tertiary bg-primary overflow-hidden;
+}
+
+.dropdown-menu--scrollable {
+  @apply overflow-y-auto;
+}
+
+.dropdown-menu--standalone {
+  box-shadow: var(--box-shadow-card);
+}
+
+/* ==========================================================================
+   List & Items
+   ========================================================================== */
+
+.dropdown-menu__group {
+  @apply flex flex-col items-start self-stretch py-1;
+}
+.dropdown-menu__list {
+  @apply flex flex-col items-start self-stretch px-1;
+}
+
+.dropdown-menu__item,
+.dropdown-menu__list > :is(a, button) {
+  @apply flex items-center w-full justify-start focus:outline-none gap-2 px-2 py-1.5 min-h-8 rounded-md border-none bg-transparent overflow-hidden text-ellipsis whitespace-nowrap text-content font-medium text-sm cursor-pointer leading-5;
+
+  &.dropdown-menu__item--disabled {
+    @apply text-content-secondary cursor-not-allowed !bg-transparent;
+  }
+}
+
+.dropdown-menu__item--active,
+.dropdown-menu__item:hover,
+.dropdown-menu__list > :is(a, button):hover {
+  @apply bg-secondary;
+}
+
+.dropdown-menu__item:focus-visible,
+.dropdown-menu__list > :is(a, button):focus-visible {
+  @apply ring-2 ring-inset ring-content bg-primary outline-none;
+}
+
+.dropdown-menu__icon,
+.dropdown-menu__list > :is(a, button) svg {
+  @apply shrink-0 size-4 text-content;
+}
+

data/app/assets/stylesheets/css/components/ui/file_upload_input.css

@@ -0,0 +1,94 @@
+/* File Upload Input Component - Based on Figma Design System */
+/* BEM Methodology: .file-upload-input (block), .file-upload-input__* (elements), .file-upload-input--* (modifiers) */
+
+.file-upload-input {
+  @apply relative flex flex-col justify-center items-center p-4 gap-2 overflow-clip rounded-xl border border-dashed border-tertiary bg-primary text-content-secondary transition cursor-pointer;
+}
+
+.file-upload-input__icon {
+  @apply shrink-0 size-6 text-content-secondary;
+}
+
+.file-upload-input__content {
+  @apply flex flex-col gap-0.5 whitespace-nowrap;
+}
+
+.file-upload-input__title {
+  @apply text-xs font-medium leading-4 text-content;
+}
+
+.file-upload-input__subtitle {
+  @apply text-content-secondary;
+}
+
+.file-upload-input__description {
+  @apply text-xs font-normal leading-4 text-content-secondary;
+}
+
+/* Wrapper fills the drop zone; input must fill wrapper to receive drops anywhere */
+.file-upload-input__native-input {
+  @apply absolute inset-0 h-full w-full cursor-pointer;
+}
+
+.file-upload-input__native-input input[type="file"]::-webkit-file-upload-button,
+.file-upload-input__native-input input {
+  @apply absolute inset-0 size-full cursor-pointer opacity-0;
+}
+
+/* ==========================================================================
+   Size Variants
+   ========================================================================== */
+
+.file-upload-input--lg {
+  @apply flex-col p-4;
+}
+
+.file-upload-input--md {
+  @apply flex-row h-14 py-0;
+}
+
+.file-upload-input--sm {
+  @apply size-14 justify-center p-4;
+}
+
+/* Hide text content in small size */
+.file-upload-input--sm .file-upload-input__content {
+  display: none;
+}
+
+/* ==========================================================================
+   State: Hover
+   ========================================================================== */
+
+.file-upload-input:hover:not(.file-upload-input--disabled) {
+  @apply bg-secondary;
+}
+
+/* ==========================================================================
+   State: Dragging (managed by JS via data-dragging attribute)
+   ========================================================================== */
+
+.file-upload-input[data-dragging="true"] {
+  @apply border-2 border-solid bg-secondary;
+}
+
+/* ==========================================================================
+   State: Focus (via focus-within for native input focus)
+   ========================================================================== */
+
+/* Native input is inside the wrapper div; use :focus-within since the div receives no focus, the input does */
+.file-upload-input:has(.file-upload-input__native-input:focus-within) {
+  box-shadow: var(--box-shadow-focus);
+}
+
+/* ==========================================================================
+   State: Disabled
+   ========================================================================== */
+
+.file-upload-input--disabled {
+  @apply opacity-60 cursor-not-allowed;
+}
+
+.file-upload-input--disabled .file-upload-input__native-input {
+  @apply cursor-not-allowed;
+}

data/app/assets/stylesheets/css/components/ui/file_upload_item.css

@@ -0,0 +1,78 @@
+/* File Upload Item Component - Based on Figma Design System */
+/* BEM Methodology: .file-upload-item (block), .file-upload-item__* (elements), .file-upload-item--* (modifiers) */
+
+.file-upload-item {
+  @apply relative flex h-14 items-center justify-between overflow-clip rounded-lg border border-tertiary bg-primary px-4 w-full;
+}
+
+/* ==========================================================================
+   Progress Bar (hidden by default, shown via --uploading state)
+   ========================================================================== */
+
+.file-upload-item__progress {
+  @apply absolute inset-y-0 start-0 bg-secondary h-full hidden;
+}
+
+.file-upload-item--uploading .file-upload-item__progress {
+  @apply block;
+}
+
+/* ==========================================================================
+   Body
+   ========================================================================== */
+
+.file-upload-item__body {
+  @apply relative z-10 flex min-w-0 flex-1 flex-col gap-0.5 items-stretch overflow-hidden;
+}
+
+.file-upload-item__title {
+  @apply min-w-0 truncate text-xs font-medium leading-4 text-content;
+}
+
+.file-upload-item__meta {
+  @apply flex items-center gap-1 text-xs font-normal leading-4 text-content-secondary;
+
+}
+
+/* ==========================================================================
+   Status Indicators (all rendered, controlled by state classes)
+   ========================================================================== */
+
+.file-upload-item__status {
+  @apply flex items-center gap-0.5;
+}
+
+.file-upload-item__status-icon {
+  @apply size-3;
+}
+
+/* State: Complete */
+.file-upload-item__status--complete {
+  @apply text-success-content;
+}
+
+/* State: Error */
+.file-upload-item__status--error {
+  @apply text-danger-content;
+}
+
+/* State: Uploading */
+.file-upload-item__status--uploading {
+  @apply text-content-secondary;
+}
+
+/* ==========================================================================
+   Actions
+   ========================================================================== */
+
+.file-upload-item__actions {
+  @apply relative z-10 flex shrink-0 items-center gap-1;
+}
+
+.file-upload-item__action {
+  @apply size-6 flex items-center justify-center rounded-lg text-content-secondary transition;
+}
+
+.file-upload-item__action svg {
+  @apply size-3.5;
+}

data/app/assets/stylesheets/css/components/ui/panel.css

@@ -0,0 +1,59 @@
+.panel {
+  @apply flex flex-col gap-y-4 w-full;
+}
+
+.panel__header {
+  @apply w-full;
+}
+
+.panel__footer {
+  @apply w-full;
+}
+
+.panel__content {
+  --panel-sidebar-width: calc(var(--spacing) * 84);
+  @apply relative grid gap-4 w-full;
+  grid-template-columns: minmax(0, 1fr);
+}
+
+.panel__card,
+.panel__body {
+  @apply w-full;
+}
+
+.panel__sidebar {
+  @apply w-full top-0 end-0 flex;
+}
+
+.panel--has-sidebar .panel__content {
+  grid-template-areas:
+    "body"
+    "sidebar";
+
+  @media (width >= 48rem) {
+    grid-template-areas: "body sidebar";
+    grid-template-columns: minmax(0, 1fr) var(--panel-sidebar-width);
+  }
+
+  .panel__card,
+  .panel__body {
+    grid-area: body;
+  }
+
+  .panel__sidebar {
+    grid-area: sidebar;
+  }
+}
+
+.panel__cover-photo {
+  @apply w-full;
+}
+
+.panel--floating-sidebar {
+}
+
+.panel--full-width {
+  .panel__body {
+    @apply w-full;
+  }
+}

data/app/assets/stylesheets/css/components/ui/panel_header.css

@@ -0,0 +1,48 @@
+.header {
+  @apply flex flex-col gap-2 items-start justify-center pe-0 py-0;
+}
+
+.header__main {
+  @apply flex flex-col sm:flex-row gap-4 items-center w-full;
+}
+
+.header__content {
+  @apply flex gap-3 items-center grow shrink basis-0;
+}
+
+.header__avatar {
+  @apply shrink-0;
+}
+
+.header__text {
+  @apply flex flex-col gap-0.5 items-start grow shrink basis-0 min-h-px min-w-px not-italic;
+}
+
+.header__title {
+  @apply flex gap-2 font-medium leading-6 overflow-ellipsis w-full text-xl text-content;
+}
+
+.header__description {
+  @apply font-normal leading-5 overflow-ellipsis w-full text-content-secondary;
+  font-size: 14px;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
+.header__controls {
+  @apply flex gap-3 items-center cursor-pointer shrink-0 flex-wrap;
+}
+
+.header__discreet-information {
+  @apply flex justify-center sm:justify-start gap-2 items-start w-full flex-wrap;
+}
+
+/* Size variants */
+.header--size-medium {
+  /* Default styles already applied */
+}
+
+.header--size-small {
+  /* Small variant uses same structure but can have different spacing if needed */
+}

data/app/assets/stylesheets/css/components/ui/radio.css

@@ -0,0 +1,22 @@
+/* Radio Button - Native input styling (matches checkbox approach) */
+@layer base {
+  input[type="radio"] {
+    @apply relative accent-accent-content;
+
+    &:after {
+      @apply absolute rounded-full size-3 top-1/2 start-1/2 -translate-x-1/2 -translate-y-1/2 content-[''];
+    }
+  }
+
+  input[type=radio]:hover{
+    @apply outline-none;
+  }
+
+  input[type=radio]:focus-visible {
+    @apply outline-none;
+    &:after {
+      @apply ring ring-offset-2 ring-accent-content rounded-full !outline-none;
+    }
+  }
+}
+