avo 3.30.4 → 4.0.0.beta.1

data/app/assets/stylesheets/css/components/field-wrapper.css

@@ -0,0 +1,107 @@
+.field-wrapper {
+  @apply relative flex flex-col grow leading-tight size-auto w-full md:flex-row md:items-center py-1 w-full grow-0 text-ellipsis overflow-auto;
+}
+
+.field-wrapper__label {
+  @apply flex self-start items-center shrink-0 w-full px-4 font-medium text-content text-sm md:w-52 min-h-10;
+}
+
+.field-wrapper__help {
+  @apply text-content-secondary mt-2 text-xs leading-4;
+}
+
+.field-wrapper__label-help {
+  @apply text-content-secondary text-xs leading-none font-normal;
+}
+
+.field-wrapper__error {
+  @apply text-danger-content mt-2 text-xs leading-4 inline-flex items-center gap-0.5;
+}
+
+.field-wrapper__error::before {
+  content: "";
+  @apply inline-block size-3 shrink-0;
+  background-color: currentColor;
+  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M10 8l4 8'/%3E%3Cpath d='M10 16l4 -8'/%3E%3C/svg%3E") no-repeat center / contain;
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M10 8l4 8'/%3E%3Cpath d='M10 16l4 -8'/%3E%3C/svg%3E") no-repeat center / contain;
+}
+
+.field-wrapper__content {
+  @apply flex-1 flex flex-row px-4 py-1;
+}
+
+.field-wrapper__content-wrapper {
+  @apply relative w-full md:w-8/12;
+}
+
+.field-wrapper__input {
+  @apply relative w-full;
+}
+
+/* ==========================================================================
+   Loading Spinner
+   ========================================================================== */
+
+.input-wrapper--loading {
+  @apply relative w-full;
+}
+
+.input-wrapper--loading::after {
+  @apply absolute top-1/2 rounded-full border-2 border-content border-e-tertiary pointer-events-none;
+
+  content: "";
+  inset-inline-end: var(--input-icon-offset);
+  width: var(--input-icon-size);
+  height: var(--input-icon-size);
+  transform: translateY(-50%);
+  transform-origin: center;
+  animation: input-spinner-rotation 0.9s linear infinite;
+}
+
+@keyframes input-spinner-rotation {
+  from {
+    transform: translateY(-50%) rotate(0deg);
+  }
+  to {
+    transform: translateY(-50%) rotate(360deg);
+  }
+}
+
+/* disabled & loading state */
+.input-wrapper--loading:has(input:disabled)::after {
+  @apply border-content-secondary border-e-tertiary cursor-not-allowed;
+}
+
+.field-wrapper--full-width {
+  .field-wrapper__content-wrapper {
+    @apply w-full;
+  }
+}
+
+/* Stacked modifier */
+.all-fields-stacked .field-wrapper,
+.field-wrapper.field-wrapper--stacked {
+  @apply md:flex-col md:items-start gap-y-2 py-3;
+
+  .field-wrapper__label {
+    @apply md:w-full min-h-0 pt-0;
+  }
+
+  .field-wrapper__label-help {
+    @apply pb-0;
+  }
+
+  .field-wrapper__content {
+    @apply pt-0 px-4 w-full;
+  }
+
+  .field-wrapper__content-wrapper {
+    @apply w-full;
+  }
+}
+
+.container-small {
+  .field-wrapper__content-wrapper {
+    @apply w-full;
+  }
+}

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

@@ -0,0 +1,61 @@
+/* Grid Card Component - Based on Figma Design System */
+/* BEM Methodology: .grid-card (block), .grid-card__element (elements) */
+
+.grid-wrapper {
+  @apply w-full grid grid-cols-1 xs:grid-cols-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6 gap-4 mt-8;
+}
+
+.grid-card {
+  @apply flex flex-col flex-1 shrink-0 basis-0 items-start border rounded-xl p-2 gap-2 min-w-52 bg-primary border-tertiary;
+
+  box-shadow: var(--box-shadow-grid-card);
+}
+
+.grid-card__image {
+  @apply relative w-full overflow-hidden rounded-lg h-40 bg-secondary;
+}
+
+.grid-card input[type="checkbox"] {
+  @apply hidden;
+}
+
+.grid-card input[type="checkbox"]:checked,
+.grid-card:hover input[type="checkbox"] {
+  @apply block z-10 absolute top-1 start-1;
+
+  /* Override mx-2 from item selector so checkbox aligns to card edge */
+  margin: 0 !important;
+}
+
+.grid-card__actions-row {
+  @apply flex items-center justify-end w-full gap-2 self-stretch;
+}
+
+.grid-card__badge {
+  @apply flex-1 shrink-0 basis-0 flex;
+}
+
+.grid-card__action {
+  @apply border-none bg-transparent p-1.5;
+  box-shadow: none;
+}
+
+.grid-card__action:hover {
+  @apply bg-transparent;
+}
+
+.grid-card__content {
+  @apply flex flex-col items-start w-full px-2 pb-2;
+}
+
+.grid-card__title {
+  @apply text-content text-base font-medium self-stretch leading-6;
+}
+
+.grid-card__title a {
+  color: inherit;
+}
+
+.grid-card__description {
+  @apply text-content-secondary text-xs font-normal self-stretch leading-4;
+}

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

@@ -0,0 +1,312 @@
+:root {
+  --input-py: --spacing(1);
+  --input-font-size: --spacing(3.5);
+  --input-leading: --spacing(5.5);
+  --input-border-w: 1px;
+
+  --input-icon-offset: --spacing(2);
+  --input-icon-size: --spacing(4.5);
+  --input-icon-gap: --spacing(1);
+}
+
+/* ==========================================================================
+   Base
+   ========================================================================== */
+@layer base {
+  select,
+  textarea,
+  .textarea-field,
+  input:not([type="range"]):not([type="checkbox"]):not([type="radio"]),
+  .input-field,
+  tags.tagify {
+    @apply appearance-none inline-flex bg-primary text-content
+          rounded-lg border border-tertiary ps-2 pe-2 font-normal overflow-hidden
+          text-ellipsis whitespace-nowrap relative w-full;
+
+    /* box-shadow: var(--box-shadow); */
+    padding-block: var(--input-py);
+    font-size: var(--input-font-size);
+    line-height: var(--input-leading);
+  }
+
+  tags.tagify {
+    @apply overflow-visible whitespace-normal px-2 text-clip;
+  }
+
+  textarea,
+  .textarea-field {
+    @apply block text-ellipsis whitespace-normal wrap-break-word;
+  }
+
+  /* ==========================================================================
+    Size Variants — Tailwind utilities + token overrides
+    ========================================================================== */
+
+  .input--size-sm {
+    --input-py: --spacing(1);
+    --input-font-size: --spacing(3);
+    --input-leading: --spacing(4);
+
+    --input-icon-size: --spacing(4);
+  }
+
+  .input--size-md {
+    --input-py: --spacing(1);
+    --input-font-size: --spacing(3.5);
+    --input-leading: --spacing(5.5);
+
+    --input-icon-size: --spacing(4.5);
+  }
+
+  .input--size-lg {
+    --input-py: --spacing(2);
+    --input-font-size: --spacing(3.5);
+    --input-leading: --spacing(5.5);
+
+    --input-icon-size: --spacing(5);
+  }
+
+  /* For icons and with shortcut search command + k  where the size depends on the parent size*/
+  :has(> .input--size-sm) {
+    --input-icon-size: --spacing(4);
+    --input-leading: --spacing(3.5);
+  }
+  :has(> .input--size-md) {
+    --input-icon-size: --spacing(4.5);
+    --input-leading: --spacing(4);
+  }
+  :has(> .input--size-lg) {
+    --input-icon-size: --spacing(5);
+    --input-leading: --spacing(4.5);
+  }
+
+  /* ==========================================================================
+    Disabled State
+    ========================================================================== */
+
+  /* Disabled input — cursor on parent (input has pointer-events-none) */
+  .field-wrapper__content-wrapper:has(input:disabled),
+  .field-wrapper__content-wrapper:has(select:disabled),
+  .field-wrapper__content-wrapper:has(textarea:disabled),
+  .field-wrapper__content-wrapper:has(.input-field:disabled) {
+    @apply cursor-not-allowed;
+  }
+
+  .field-wrapper[data-field-type="trix"] .field-wrapper__content-wrapper {
+    @apply cursor-auto;
+  }
+
+  select:disabled,
+  textarea:disabled,
+  .textarea-field:disabled,
+  input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):disabled,
+  .input-field:disabled {
+    @apply pointer-events-none text-content-secondary;
+  }
+  /* ==========================================================================
+    Placeholder
+    ========================================================================== */
+
+  *::placeholder {
+    @apply text-content-secondary;
+  }
+
+  /* ==========================================================================
+    States: Focus
+    ========================================================================== */
+
+  select:focus-visible,
+  textarea:focus-visible,
+  .textarea-field:focus-visible,
+  input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):focus-visible,
+  .input-field:focus-visible
+  {
+    @apply outline-none;
+    box-shadow: var(--box-shadow-focus);
+  }
+}
+
+@layer component {
+  /* ==========================================================================
+    States: Error, Success
+    ========================================================================== */
+  select.input-field--error,
+  textarea.input-field--error,
+  .textarea-field.input-field--error,
+  input:not([type="range"]):not([type="checkbox"]):not([type="radio"]).input-field--error,
+  .input-field.input-field--error
+  {
+    box-shadow: var(--box-shadow-error);
+  }
+
+  select.input-field--success,
+  textarea.input-field--success,
+  .textarea-field.input-field--success,
+  input:not([type="range"]):not([type="checkbox"]):not([type="radio"]).input-field--success,
+  .input-field.input-field--success {
+    box-shadow: var(--box-shadow-success);
+  }
+
+  /* ==========================================================================
+    Color Input
+    ========================================================================== */
+
+  input[type="color"] {
+    @apply cursor-pointer;
+
+    height: calc(var(--input-leading) + var(--input-py) * 2 + var(--input-border-w) * 2);
+  }
+
+  /* ==========================================================================
+    Password Visibility
+    ========================================================================== */
+
+  .input-field__password-toggle {
+    @apply absolute text-content-secondary inset-y-0 end-0 flex items-center cursor-pointer;
+
+    padding-inline-end: var(--input-icon-offset);
+  }
+
+  /* Wrapper-based selector: reliably targets password inputs with visibility toggle
+     (User create resource, password confirmation, etc.) */
+  .field-wrapper__input:has(.input-field__password-toggle) input {
+    padding-inline-end: calc(
+      var(--input-icon-size) +
+      var(--input-icon-offset) +
+      var(--input-icon-gap)
+    );
+  }
+
+  /* Unified icon sizing — reads from size token */
+  .input-field__password-toggle svg,
+  .input-wrapper--loading::after,
+  .search-input__prefix svg {
+    @apply shrink-0;
+    width: var(--input-icon-size);
+    height: var(--input-icon-size);
+  }
+
+  /* Loading: show spinner only — hide visibility toggle */
+  .input-wrapper--loading .input-field__password-toggle {
+    @apply hidden;
+  }
+
+  /* ==========================================================================
+    Select Input — Custom Chevron (background, light + dark mode)
+    ========================================================================== */
+
+  select:not([multiple]) {
+    @apply cursor-pointer text-content;
+    padding-inline-end: calc(var(--input-icon-offset) + var(--input-icon-size) + var(--input-icon-gap));
+    /* Light: text-content (--color-content) */
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23050817' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M6 9l6 6l6 -6'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right var(--input-icon-offset) center;
+    background-size: var(--input-icon-size);
+  }
+
+  .dark select:not([multiple]) {
+    /* Dark: text-content (--color-content = white) */
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M6 9l6 6l6 -6'/%3E%3C/svg%3E");
+  }
+
+  [dir="rtl"] select:not([multiple]) {
+    background-position: left var(--input-icon-offset) center;
+  }
+
+  select[multiple] {
+    background-image: none;
+  }
+
+  /* ==========================================================================
+    Date Input
+    ========================================================================== */
+
+  input[type="date"]::-webkit-calendar-picker-indicator,
+  .input-field--date::-webkit-calendar-picker-indicator {
+    @apply opacity-0 absolute end-0 top-0 h-full cursor-pointer;
+  }
+
+  input[type="date"],
+  .input-field--date {
+    @apply bg-no-repeat relative;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M4 7a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12'/%3E%3Cpath d='M16 3v4'/%3E%3Cpath d='M8 3v4'/%3E%3Cpath d='M4 11h16'/%3E%3Cpath d='M11 15h1'/%3E%3Cpath d='M12 15v3'/%3E%3C/svg%3E");
+    background-position: right var(--input-icon-offset) center;
+    background-size: var(--input-icon-size);
+  }
+
+  input[type="date"]:disabled,
+  .input-field--date:disabled {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M4 7a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12'/%3E%3Cpath d='M16 3v4'/%3E%3Cpath d='M8 3v4'/%3E%3Cpath d='M4 11h16'/%3E%3Cpath d='M11 15h1'/%3E%3Cpath d='M12 15v3'/%3E%3C/svg%3E");
+  }
+
+  /* ==========================================================================
+    Search Input
+    ========================================================================== */
+
+  .search-input {
+    @apply relative w-full;
+  }
+
+  .search-input__prefix {
+    @apply absolute inset-y-0 start-0 flex items-center pointer-events-none text-content-secondary z-10 ps-[var(--input-icon-offset)];
+  }
+
+  /* Input padding — prefix side, suffix side (no shortcut / with shortcut) */
+  input[type=search],
+  .search-input__input {
+    padding-inline-start: calc(
+      var(--input-icon-offset) +
+      var(--input-icon-size) +
+      var(--input-icon-gap)
+    );
+    padding-inline-end: calc(
+      var(--input-icon-offset) +
+      var(--input-icon-gap)
+    );
+  }
+
+  /* Default (Mac): ⌘ + K — narrower */
+  .search-input__input.search-input__input--with-shortcut {
+    padding-inline-end: calc(
+      var(--input-icon-offset) +
+      var(--input-icon-size) * 2 +
+      var(--input-icon-gap) * 3
+    );
+  }
+
+  /* PC: CTRL + K — wider */
+  body.os-pc .search-input__input.search-input__input--with-shortcut {
+    padding-inline-end: calc(
+      var(--input-icon-offset) +
+      var(--input-icon-size) * 3 +
+      var(--input-icon-gap) * 4
+    );
+  }
+
+  /* Suffix (shortcut) */
+  .search-input__suffix {
+    @apply absolute inset-y-0 end-0 flex items-center text-content-secondary pointer-events-none z-10 gap-1;
+    padding-inline-end: var(--input-icon-offset);
+  }
+
+  .search-input__shortcut {
+    @apply text-xs font-semibold py-px px-1 border border-secondary rounded-sm bg-secondary min-w-5 flex items-center justify-center;
+
+    line-height: var(--input-leading);
+    box-shadow: var(--box-shadow-search-input-shortcut);
+  }
+
+  /* ==========================================================================
+    Range Input
+    ========================================================================== */
+
+  input[type="range"] {
+    @apply accent-accent ;
+  }
+
+  /* Thumb (WebKit + Firefox) */
+  input[type="range"]::-webkit-slider-thumb {
+    @apply accent-accent-content bg-accent-content;
+  }
+}

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

@@ -0,0 +1,228 @@
+/* Modal Component — composes .card for the content shell */
+
+/* Height size variables */
+.modal {
+  --modal-height-sm: 24rem;
+  --modal-height-md: 28rem;
+  --modal-height-lg: 32rem;
+  --modal-height-xl: 36rem;
+  --modal-height-2xl: 42rem;
+  --modal-height-3xl: 48rem;
+  --modal-height-4xl: 56rem;
+}
+
+.modal {
+  @apply fixed inset-0 w-full z-150 flex justify-center items-center;
+}
+
+.modal__overlay {
+  @apply absolute w-full h-full flex justify-center items-center;
+
+  background-color: color-mix(in oklch, var(--color-avo-neutral-950) 25%, transparent);
+
+  .dark & {
+    background-color: color-mix(in oklch, var(--color-avo-neutral-950) 60%, transparent);
+  }
+}
+
+.modal__card-container {
+  @apply flex flex-col items-center justify-center relative shrink-0 w-full;
+}
+
+.modal__card {
+  @apply relative size-full shrink-0;
+
+  box-shadow: var(--shadow-modal);
+}
+
+/* Modal-specific card overrides */
+.modal__card > .card {
+  @apply size-full;
+}
+
+.modal__card > .card > .card__wrapper {
+  @apply size-full flex flex-col;
+}
+
+.modal__card .card__header {
+  @apply py-3 px-4;
+}
+
+.modal__card .card__body {
+  @apply flex flex-col flex-1 gap-4 items-start pt-0 px-0 min-h-64;
+}
+
+.modal__title {
+  @apply font-medium;
+}
+
+.modal__close-button {
+  @apply shrink-0 size-5 cursor-pointer text-content-secondary hover:text-content transition-colors;
+}
+
+.modal__width-selector {
+  @apply shrink-0 size-5 cursor-pointer text-content-secondary hover:text-content transition-colors;
+}
+
+.modal__height-selector {
+  @apply shrink-0 size-5 cursor-pointer text-content-secondary hover:text-content transition-colors;
+}
+
+.modal__body-content {
+  @apply size-full;
+}
+
+.modal__controls {
+  @apply flex items-center justify-between py-2 px-3 w-full;
+}
+
+.modal--width-sm {
+  .modal__card {
+    @apply w-sm;
+  }
+}
+
+.modal--width-md {
+  .modal__card {
+    @apply w-md;
+  }
+}
+
+.modal--width-lg {
+  .modal__card {
+    @apply w-lg;
+  }
+}
+
+.modal--width-xl {
+  .modal__card {
+    @apply w-xl;
+  }
+}
+
+.modal--width-2xl {
+  .modal__card {
+    @apply w-2xl;
+  }
+}
+
+.modal--width-3xl {
+  .modal__card {
+    @apply w-3xl;
+  }
+}
+
+.modal--width-4xl {
+  .modal__card {
+    @apply w-4xl;
+  }
+}
+
+.modal--width-25 {
+  .modal__card {
+    @apply w-[25dvw];
+  }
+}
+
+.modal--width-50 {
+  .modal__card {
+    @apply w-[50dvw];
+  }
+}
+
+.modal--width-75 {
+  .modal__card {
+    @apply w-[75dvw];
+  }
+}
+
+.modal--width-100 {
+  .modal__card {
+    @apply w-full;
+  }
+}
+
+.modal--width-full {
+  .modal__card {
+    @apply w-[calc(100dvw-2rem)];
+  }
+}
+
+.modal--height-auto {
+  .modal__card {
+    @apply min-h-32;
+  }
+}
+
+.modal--height-sm {
+  .modal__card {
+    @apply h-[var(--modal-height-sm)];
+  }
+}
+
+.modal--height-md {
+  .modal__card {
+    @apply h-[var(--modal-height-md)];
+  }
+}
+
+.modal--height-lg {
+  .modal__card {
+    @apply h-[var(--modal-height-lg)];
+  }
+}
+
+.modal--height-xl {
+  .modal__card {
+    @apply h-[var(--modal-height-xl)];
+  }
+}
+
+.modal--height-2xl {
+  .modal__card {
+    @apply h-[var(--modal-height-2xl)];
+  }
+}
+
+.modal--height-3xl {
+  .modal__card {
+    @apply h-[var(--modal-height-3xl)];
+  }
+}
+
+.modal--height-4xl {
+  .modal__card {
+    @apply h-[var(--modal-height-4xl)];
+  }
+}
+
+.modal--height-full {
+  .modal__card {
+    @apply h-[calc(100dvh-2rem)];
+  }
+}
+
+
+.modal--height-25 {
+  .modal__card {
+    @apply h-[25dvh];
+  }
+}
+
+.modal--height-50 {
+  .modal__card {
+    @apply h-[50dvh];
+  }
+}
+
+.modal--height-75 {
+  .modal__card {
+    @apply h-[75dvh];
+  }
+}
+
+.modal--height-100 {
+  .modal__card {
+    @apply h-full;
+  }
+}