avo 3.30.4 → 4.0.0.beta.2

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,120 @@
+/* Grid Card Component - Based on Figma Design System */
+/* BEM Methodology: .grid-card (block), .grid-card__element (elements) */
+
+.grid-wrapper {
+  /*
+   * Fluid column count from the *container* (cqw), not the viewport.
+   * Nearest `container-type` ancestor: e.g. `@container` on the grid turbo-frame.
+   * `--grid-max-cols`: cap columns as if the row were evenly split (incl. gaps).
+   * `--grid-min-col`: floor track width so cards never shrink below `min-w-52`.
+   */
+  --grid-max-cols: 12;
+  --grid-min-col: 13rem; /* 52 * 0.25rem, matches .grid-card min-w-52 */
+  --grid-gap: 1rem; /* gap-4 */
+
+  @apply w-full gap-4;
+  display: grid;
+  grid-template-columns: repeat(
+    auto-fill,
+    minmax(
+      min(
+        100%,
+        max(
+          var(--grid-min-col),
+          calc(
+            (100cqw - (var(--grid-max-cols) - 1) * var(--grid-gap)) /
+              var(--grid-max-cols)
+          )
+        )
+      ),
+      1fr
+    )
+  );
+}
+
+.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;
+}
+
+@keyframes icon-float {
+  0%, 100% { translate: 0 0; }
+  50%       { translate: 0 -5px; }
+}
+
+.grid-card__icon {
+  @apply absolute size-4 pointer-events-none;
+  transform: translate(var(--tx, 0px), var(--ty, 0px));
+  transition: transform 0.5s ease-out;
+}
+
+.grid-card__icon--repelling {
+  transition: transform 0.08s ease-out;
+}
+
+.grid-card__avocado {
+  @apply block;
+  transform: translate(var(--tx, 0px), var(--ty, 0px));
+  transition: transform 0.5s ease-out;
+
+  &.grid-card__icon--repelling {
+    transition: transform 0.08s ease-out;
+  }
+}
+
+.grid-card__icon--float {
+  animation-name: icon-float;
+  animation-timing-function: ease-in-out;
+  animation-iteration-count: infinite;
+  animation-fill-mode: none;
+}

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;
+  }
+}