avo 4.0.0.beta.2 → 4.0.0.beta.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 19ff8cb45166e5eba8e5f34a5077f598110351433d7617aa0acb0ef16024d503
-  data.tar.gz: f959099635501f862297712d3a67de1cde5e3b2eda3872913deef69a2eea8412
+  metadata.gz: '009224ece686ff1bd1b3b4b3593336dd98759b01a1b76173d2197c7e8566a6cd'
+  data.tar.gz: ddef3ecbe7b8f39bcf24a473438f24fbe226a0c0993727619e255b469846df9a
 SHA512:
-  metadata.gz: f0483f39c5f03075b9ead52b593d5307e665b5993723ccad3877faa861c96edcd8ee1edf51050b1fc169c357c1781a23c4a794df9a9b599123509e91b4247979
-  data.tar.gz: fd7c1d840794b4a117f0730bb46836f0576de3d4826613da6bcb5b99ba56a80be61be189689a3969726cd8d9ee460507205acf4b739f1d409fff42f5fd065398
+  metadata.gz: 75f3e4a99a0400e57363b33f8623cc5ce33e433494badfbcb3a3441f4a68ecefc3348fe1157350e7c3c9654ca05694386c4473778bed496434e7628b814ba15e
+  data.tar.gz: f2bbd10861ba6211d9bbf54c7b8efec2462240392952e00d05c1a03d6f2af92ed549125b7008307ccab8149f006b74889a3160366c191330954fbdd20de607f0

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    avo (4.0.0.beta.2)
+    avo (4.0.0.beta.3)
       actionview (>= 6.1)
       active_link_to
       activerecord (>= 6.1)

data/app/assets/builds/avo/application.css

@@ -559,9 +559,6 @@
   .start-1 {
     inset-inline-start: calc(var(--spacing) * 1);
   }
-  .start-1\/2 {
-    inset-inline-start: calc(1/2 * 100%);
-  }
   .end {
     inset-inline-end: var(--spacing);
   }
@@ -966,12 +963,6 @@
   .h-40 {
     height: calc(var(--spacing) * 40);
   }
-  .h-52 {
-    height: calc(var(--spacing) * 52);
-  }
-  .h-64 {
-    height: calc(var(--spacing) * 64);
-  }
   .h-\[0\.75rem\] {
     height: 0.75rem;
   }
@@ -1628,10 +1619,6 @@
     border-bottom-style: var(--tw-border-style);
     border-bottom-width: 1px;
   }
-  .border-b-2 {
-    border-bottom-style: var(--tw-border-style);
-    border-bottom-width: 2px;
-  }
   .border-l {
     border-left-style: var(--tw-border-style);
     border-left-width: 1px;
@@ -1669,9 +1656,6 @@
   .border-blue-600 {
     border-color: var(--color-blue-600);
   }
-  .border-content-secondary {
-    border-color: var(--color-content-secondary);
-  }
   .border-cyan-300 {
     border-color: var(--color-cyan-300);
   }
@@ -2233,9 +2217,6 @@
   .pb-2 {
     padding-bottom: calc(var(--spacing) * 2);
   }
-  .pb-3 {
-    padding-bottom: calc(var(--spacing) * 3);
-  }
   .pb-4 {
     padding-bottom: calc(var(--spacing) * 4);
   }
@@ -2428,9 +2409,6 @@
   .text-fuchsia-700 {
     color: var(--color-fuchsia-700);
   }
-  .text-gray-300 {
-    color: var(--color-gray-300);
-  }
   .text-gray-400 {
     color: var(--color-gray-400);
   }
@@ -7927,6 +7905,9 @@
     @media (width >= 40rem) {
       flex-direction: row;
     }
+    @media (width >= 40rem) {
+      flex-wrap: wrap;
+    }
     @media (width >= 40rem) {
       align-items: flex-end;
     }
@@ -7937,6 +7918,7 @@
   .pagination__per-page {
     --pagination-per-page-width: 10rem;
     display: flex;
+    flex-shrink: 0;
     align-items: center;
   }
   .pagination__per-page-input {
@@ -7995,14 +7977,32 @@
     --tw-font-weight: var(--font-weight-normal);
     font-weight: var(--font-weight-normal);
   }
+  .pagination__controls-wrap {
+    display: flex;
+    width: 100%;
+    min-width: calc(var(--spacing) * 0);
+    @media (width >= 40rem) {
+      min-width: 22rem;
+    }
+    @media (width >= 40rem) {
+      flex: 1 1 28rem;
+    }
+    @media (width >= 40rem) {
+      justify-content: flex-end;
+    }
+  }
   .pagination__controls {
     display: flex;
-    width: fit-content;
-    flex-shrink: 0;
+    width: 100%;
+    max-width: 100%;
+    min-width: calc(var(--spacing) * 0);
+    --tw-pan-x: pan-x;
+    touch-action: var(--tw-pan-x,) var(--tw-pan-y,) var(--tw-pinch-zoom,);
     align-items: center;
     gap: calc(var(--spacing) * 3);
-    overflow: hidden;
-    overflow: visible;
+    overflow-x: auto;
+    overflow-y: hidden;
+    overscroll-behavior-x: contain;
     border-radius: var(--radius-lg);
     border-style: var(--tw-border-style);
     border-width: 1px;
@@ -8010,11 +8010,16 @@
     background-color: var(--color-primary);
     padding-inline-start: calc(var(--spacing) * 3);
     padding-inline-end: calc(var(--spacing) * 2);
+    @media (width >= 40rem) {
+      width: fit-content;
+    }
+    -webkit-overflow-scrolling: touch;
+    scrollbar-gutter: stable;
   }
   .pagination__info {
     display: flex;
+    flex-shrink: 0;
     align-items: center;
-    overflow: hidden;
     border-inline-end-style: var(--tw-border-style);
     border-inline-end-width: 1px;
     border-color: var(--color-tertiary);
@@ -8026,7 +8031,6 @@
     line-height: calc(var(--spacing) * 5);
     --tw-font-weight: var(--font-weight-normal);
     font-weight: var(--font-weight-normal);
-    text-overflow: ellipsis;
     white-space: nowrap;
     color: var(--color-content);
     &:last-child {
@@ -8041,12 +8045,15 @@
   }
   .pagination__nav {
     display: flex;
+    flex-shrink: 0;
     align-items: center;
   }
   .pagy.series-nav {
     display: flex;
+    min-width: max-content;
     align-items: center;
     gap: calc(var(--spacing) * 0.5);
+    white-space: nowrap;
     a[role="separator"] {
       padding-inline: calc(var(--spacing) * 2);
       font-size: var(--text-sm);
@@ -10775,6 +10782,203 @@
     --badge-bg: var(--color-rose-400);
     --badge-text: var(--color-rose-600);
   }
+  .state {
+    margin-inline: auto;
+    display: flex;
+    width: 100%;
+    max-width: calc(var(--spacing) * 72);
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: calc(var(--spacing) * 3);
+    border-radius: var(--radius-lg);
+    background-color: var(--color-background);
+    padding: calc(var(--spacing) * 6);
+    text-align: center;
+  }
+  .state__illustration {
+    position: relative;
+    display: flex;
+    height: calc(var(--spacing) * 36);
+    width: calc(var(--spacing) * 60);
+    align-items: center;
+    justify-content: center;
+  }
+  .state__card {
+    position: absolute;
+    display: flex;
+    height: calc(var(--spacing) * 11);
+    width: calc(var(--spacing) * 44);
+    align-items: center;
+    gap: calc(var(--spacing) * 1.5);
+    border-radius: var(--radius-lg);
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+    border-color: var(--color-secondary);
+    padding: calc(var(--spacing) * 2.5);
+    background: linear-gradient(194deg, var(--color-primary) 27%, var(--color-background) 65%);
+    box-shadow: var(--box-shadow-card);
+  }
+  .state__card--top {
+    inset-inline-start: calc(var(--spacing) * 0);
+    top: calc(var(--spacing) * 0);
+  }
+  .state__card--middle {
+    inset-inline-start: calc(var(--spacing) * 14);
+    top: calc(var(--spacing) * 8);
+  }
+  .state__card--bottom {
+    inset-inline-start: calc(var(--spacing) * 5);
+    top: calc(var(--spacing) * 20);
+  }
+  .state__badge {
+    display: flex;
+    width: calc(var(--spacing) * 6);
+    height: calc(var(--spacing) * 6);
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    border-radius: calc(infinity * 1px);
+    font-size: var(--text-xs);
+    line-height: var(--tw-leading, var(--text-xs--line-height));
+    --tw-leading: 1;
+    line-height: 1;
+    --tw-font-weight: var(--font-weight-medium);
+    font-weight: var(--font-weight-medium);
+    color: var(--color-content);
+    background: color-mix(in srgb, oklch(92.80% 0.0000 89.88) 88%, #fff);
+    @supports (color: color-mix(in lab, red, red)) {
+      background: color-mix(in oklab, var(--color-tertiary) 88%, var(--color-primary));
+    }
+  }
+  .state__body {
+    display: flex;
+    min-width: calc(var(--spacing) * 0);
+    flex: 1;
+    flex-direction: column;
+    gap: calc(var(--spacing) * 1);
+  }
+  .state__line {
+    display: block;
+    height: calc(var(--spacing) * 1.5);
+    border-radius: calc(infinity * 1px);
+    background: color-mix(in srgb, oklch(92.80% 0.0000 89.88) 78%, #fff);
+    @supports (color: color-mix(in lab, red, red)) {
+      background: color-mix(in oklab, var(--color-tertiary) 78%, var(--color-primary));
+    }
+  }
+  .state__line--title {
+    opacity: 75%;
+  }
+  .state__line--large {
+    width: calc(var(--spacing) * 14);
+  }
+  .state__line--medium {
+    width: calc(var(--spacing) * 12);
+  }
+  .state__line--small {
+    width: calc(var(--spacing) * 11);
+  }
+  .state__line--content {
+    width: 100%;
+  }
+  .state__message {
+    font-size: var(--text-base);
+    line-height: var(--tw-leading, var(--text-base--line-height));
+    --tw-leading: calc(var(--spacing) * 6);
+    line-height: calc(var(--spacing) * 6);
+    --tw-font-weight: var(--font-weight-normal);
+    font-weight: var(--font-weight-normal);
+    color: var(--color-content-secondary);
+  }
+  .state--frame-load-failed {
+    max-width: calc(var(--spacing) * 96);
+    gap: calc(var(--spacing) * 1);
+  }
+  .state__document {
+    position: absolute;
+    display: flex;
+    height: calc(var(--spacing) * 28);
+    width: calc(var(--spacing) * 20);
+    flex-direction: column;
+    border-radius: var(--radius-lg);
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+    border-color: var(--color-secondary);
+    padding: calc(var(--spacing) * 0.5);
+    background: linear-gradient(235deg, var(--color-primary) 27%, var(--color-background) 65%);
+  }
+  .state__document--start {
+    inset-inline-start: calc(var(--spacing) * 4);
+    rotate: -21deg;
+  }
+  .state__document--center {
+    inset-inline-start: calc(var(--spacing) * 16);
+    z-index: 10;
+  }
+  .state__document--end {
+    inset-inline-start: calc(var(--spacing) * 24);
+    z-index: 0;
+    rotate: 21deg;
+  }
+  .state__document-body {
+    display: flex;
+    height: 100%;
+    width: 100%;
+    align-items: center;
+    border-radius: var(--radius-lg);
+    padding: calc(var(--spacing) * 2.5);
+    box-shadow: var(--box-shadow-card);
+  }
+  .state__document-lines {
+    display: flex;
+    height: 100%;
+    width: 100%;
+    flex-direction: column;
+    justify-content: space-between;
+  }
+  .state__document-line {
+    display: block;
+    height: calc(var(--spacing) * 1);
+    width: 100%;
+    border-radius: calc(infinity * 1px);
+    background: color-mix(in srgb, oklch(92.80% 0.0000 89.88) 78%, #fff);
+    @supports (color: color-mix(in lab, red, red)) {
+      background: color-mix(in oklab, var(--color-tertiary) 78%, var(--color-primary));
+    }
+  }
+  .state__document-line--short {
+    width: calc(var(--spacing) * 10);
+  }
+  .state__magnifier {
+    position: absolute;
+    inset-inline-start: 30%;
+    top: 30%;
+    z-index: 20;
+    background-image: none;
+  }
+  .state__magnifier-icon {
+    width: calc(var(--spacing) * 24);
+    height: calc(var(--spacing) * 24);
+    color: var(--color-content-secondary);
+    opacity: 20%;
+  }
+  .state__note {
+    text-align: center;
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+    --tw-leading: calc(var(--spacing) * 5);
+    line-height: calc(var(--spacing) * 5);
+    --tw-font-weight: var(--font-weight-normal);
+    font-weight: var(--font-weight-normal);
+    color: var(--color-content);
+  }
+  .state__link {
+    color: color-mix(in srgb, oklch(54.6% 0.245 262.881), oklch(20.46% 0.0000 89.88) 10%);
+    @supports (color: color-mix(in lab, red, red)) {
+      color: color-mix(in oklab, var(--color-info-content), var(--color-content) 10%);
+    }
+  }
   .file-upload-input {
     position: relative;
     display: flex;
@@ -13891,6 +14095,18 @@
   inherits: false;
   initial-value: solid;
 }
+@property --tw-pan-x {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-pan-y {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-pinch-zoom {
+  syntax: "*";
+  inherits: false;
+}
 @keyframes spin {
   to {
     transform: rotate(360deg);
@@ -13974,6 +14190,9 @@
       --tw-ease: initial;
       --tw-content: "";
       --tw-outline-style: solid;
+      --tw-pan-x: initial;
+      --tw-pan-y: initial;
+      --tw-pinch-zoom: initial;
     }
   }
 }

data/app/assets/stylesheets/application.css

@@ -135,6 +135,7 @@
   @import "./css/components/ui/description_list.css";
   @import "./css/components/ui/tabs.css";
   @import "./css/components/ui/badge.css";
+  @import "./css/components/ui/state.css";
   @import "./css/components/ui/file_upload_input.css";
   @import "./css/components/ui/file_upload_item.css";
   @import "./css/components/ui/dropdown.css";

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

@@ -0,0 +1,129 @@
+/* State Component - BEM: .state (block), .state__* (elements), .state--* (modifiers) */
+
+/* Empty State Component */
+
+.state {
+  @apply mx-auto flex w-full max-w-72 flex-col items-center justify-center gap-3 rounded-lg bg-background p-6 text-center;
+}
+
+.state__illustration {
+  @apply relative h-36 w-60 flex items-center justify-center;
+}
+
+.state__card {
+  @apply absolute flex h-11 w-44 items-center gap-1.5 rounded-lg border border-secondary p-2.5;
+
+  background: linear-gradient(194deg, var(--color-primary) 27%, var(--color-background) 65%);
+  box-shadow: var(--box-shadow-card);
+}
+
+.state__card--top {
+  @apply start-0 top-0;
+}
+
+.state__card--middle {
+  @apply start-14 top-8;
+}
+
+.state__card--bottom {
+  @apply start-5 top-20;
+}
+
+.state__badge {
+  @apply flex size-6 shrink-0 items-center justify-center rounded-full text-xs font-medium leading-none text-content;
+
+  background: color-mix(in oklab, var(--color-tertiary) 88%, var(--color-primary));
+}
+
+.state__body {
+  @apply flex min-w-0 flex-1 flex-col gap-1;
+}
+
+.state__line {
+  @apply block h-1.5 rounded-full;
+
+  background: color-mix(in oklab, var(--color-tertiary) 78%, var(--color-primary));
+}
+
+.state__line--title {
+  @apply opacity-75;
+}
+
+.state__line--large {
+  @apply w-14;
+}
+
+.state__line--medium {
+  @apply w-12;
+}
+
+.state__line--small {
+  @apply w-11;
+}
+
+.state__line--content {
+  @apply w-full;
+}
+
+.state__message {
+  @apply text-base font-normal leading-6 text-content-secondary;
+}
+
+/*  Frame Load Failed Component */
+.state--frame-load-failed {
+  @apply max-w-96 gap-1;
+}
+
+.state__document {
+  @apply absolute flex h-28 w-20 flex-col rounded-lg border border-secondary p-0.5;
+
+  background: linear-gradient(235deg, var(--color-primary) 27%, var(--color-background) 65%);
+}
+
+.state__document--start {
+  @apply start-4 rotate-[-21deg];
+}
+
+.state__document--center {
+  @apply start-16 z-10;
+}
+
+.state__document--end {
+  @apply start-24 rotate-[21deg] z-0;
+}
+
+.state__document-body {
+  @apply flex h-full w-full items-center rounded-lg p-2.5;
+
+  box-shadow: var(--box-shadow-card);
+}
+
+.state__document-lines {
+  @apply flex h-full w-full flex-col justify-between
+}
+
+.state__document-line {
+  @apply block h-1 w-full rounded-full;
+
+  background: color-mix(in oklab, var(--color-tertiary) 78%, var(--color-primary));
+}
+
+.state__document-line--short {
+  @apply w-10;
+}
+
+.state__magnifier {
+  @apply absolute start-[30%] top-[30%] z-20 bg-none;
+}
+
+.state__magnifier-icon {
+  @apply size-24 text-content-secondary opacity-20;
+}
+
+.state__note {
+  @apply text-center text-sm font-normal leading-5 text-content;
+}
+
+.state__link {
+  color: color-mix(in oklab, var(--color-info-content), var(--color-content) 10%);
+}

data/app/assets/stylesheets/css/pagination.css

@@ -4,14 +4,14 @@
         .pagination__controls, .pagination__info, .pagination__nav (elements) */
 
 .pagination {
-  @apply flex w-full flex-col items-stretch justify-between gap-2 sm:flex-row sm:items-end sm:gap-0;
+  @apply flex w-full flex-col items-stretch justify-between gap-2 sm:flex-row sm:flex-wrap sm:items-end sm:gap-0;
 }
 
 /* === Per-page selector (left) === */
 
 .pagination__per-page {
   --pagination-per-page-width: 10rem; /* w-48 equivalent; use 165px for exact Figma match */
-  @apply flex items-center;
+  @apply flex shrink-0 items-center;
 }
 
 .pagination__per-page-input {
@@ -49,13 +49,19 @@
 
 /* === Controls pill (right) === */
 
+.pagination__controls-wrap {
+  @apply flex w-full min-w-0 sm:flex-[1_1_28rem] sm:min-w-[22rem] sm:justify-end;
+}
+
 .pagination__controls {
-  @apply flex w-fit shrink-0 items-center gap-3 rounded-lg border border-tertiary bg-primary overflow-hidden ps-3 pe-2 overflow-visible;
+  @apply flex w-full min-w-0 max-w-full items-center gap-3 rounded-lg border border-tertiary bg-primary ps-3 pe-2 overflow-x-auto overflow-y-hidden overscroll-x-contain touch-pan-x sm:w-fit;
+  -webkit-overflow-scrolling: touch;
+  scrollbar-gutter: stable;
 }
 
 /* Info text with right-border divider */
 .pagination__info {
-  @apply flex items-center py-1 pe-3 border-e border-tertiary whitespace-nowrap overflow-hidden text-ellipsis text-sm text-content leading-5 font-normal;
+  @apply shrink-0 flex items-center py-1 pe-3 border-e border-tertiary whitespace-nowrap text-sm text-content leading-5 font-normal;
 
   &:last-child {
     @apply border-e-0 pe-1;
@@ -68,12 +74,12 @@
 
 /* Nav buttons wrapper */
 .pagination__nav {
-  @apply flex items-center;
+  @apply shrink-0 flex items-center;
 }
 
 /* === Pagy nav === */
 .pagy.series-nav {
-  @apply flex items-center gap-0.5;
+  @apply flex min-w-max items-center gap-0.5 whitespace-nowrap;
 
   a[role="separator"] {
     @apply px-2 text-sm text-content-secondary;

data/app/assets/svgs/avo/circle-minus.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+  <path fill-rule="evenodd" d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25Zm3 10.5a.75.75 0 0 0 0-1.5H9a.75.75 0 0 0 0 1.5h6Z" clip-rule="evenodd" />
+</svg>

data/app/components/avo/alert_component.rb

@@ -8,10 +8,10 @@ class Avo::AlertComponent < Avo::BaseComponent
   prop :timeout
 
   def icon
-    return "heroicons/solid/exclamation-circle" if is_error?
-    return "heroicons/solid/exclamation" if is_warning?
-    return "heroicons/solid/exclamation-circle" if is_info?
-    return "heroicons/solid/check-circle" if is_success?
+    return "tabler/filled/alert-circle" if is_error?
+    return "tabler/filled/alert-triangle" if is_warning?
+    return "tabler/filled/alert-circle" if is_info?
+    return "tabler/filled/circle-check" if is_success?
 
     "check-circle"
   end

data/app/components/avo/backtrace_alert_component.html.erb

@@ -6,7 +6,7 @@
   <div class="px-2">
     <div class="flex h-full">
       <div class="flex items-center min-h-full">
-        <%= helpers.svg "heroicons/solid/exclamation-circle", class: "h-6" %>
+        <%= helpers.svg "tabler/filled/alert-circle", class: "h-6" %>
       </div>
       <div class="ms-3 w-0 flex-1 pt-0.5">
         <p class="text-sm leading-5 font-semibold">

data/app/components/avo/button_component.rb

@@ -4,7 +4,7 @@
 # style: primary/outline/text
 # size: :sm, :md, :lg
 # color: nil, :primary, :accent, :gray, :red, :green, :blue, or any other tailwind color
-# icon: "heroicons/outline/paperclip" as specified in the docs (https://docs.avohq.io/3.0/icons.html)
+# icon: "tabler/outline/paperclip" as specified in the docs (https://docs.avohq.io/3.0/icons.html)
 class Avo::ButtonComponent < Avo::BaseComponent
   prop :path, kind: :positional
   prop :size, default: :md

data/app/components/avo/debug/status_component.html.erb

@@ -10,7 +10,7 @@
             <div>
               <div class="text-xl font-semibold">
                 <span class="text-green-700 text-xl">
-                  <%= helpers.svg "heroicons/outline/check-badge", class: "h-5 inline -mt-1 relative" %> <span>Community</span>
+                  <%= helpers.svg "tabler/outline/rosette-discount-check", class: "h-5 inline -mt-1 relative" %> <span>Community</span>
                 </span> license
               </div>
               <div class="mt-4">
@@ -30,7 +30,7 @@
                   style: :primary,
                   color: :blue,
                   target: '_blank',
-                  icon: 'heroicons/outline/external-link' do %>
+                  icon: 'tabler/outline/external-link' do %>
                   Get started!
                 <% end %>
               </div>

data/app/components/avo/empty_state_component.html.erb

@@ -1,5 +1,16 @@
-<div class="relative flex-1 flex flex-col items-center justify-center space-y-2 py-6 border border-dashed border-content-secondary rounded-lg">
-  <div class="text-content-secondary text-center">
-    <%= text %>
+<%= content_tag :div, class: class_names("state", @classes) do %>
+  <div class="state__illustration" aria-hidden="true">
+    <% cards.each do |card| %>
+      <div class="<%= class_names("state__card", "state__card--#{card[:position]}") %>">
+        <div class="state__badge"><%= card[:number] %></div>
+
+        <div class="state__body">
+          <div class="<%= class_names("state__line", "state__line--title", "state__line--#{card[:title]}") %>"></div>
+          <div class="state__line state__line--content"></div>
+        </div>
+      </div>
+    <% end %>
   </div>
-</div>
+
+  <p class="state__message"><%= text %></p>
+<% end %>