jet_ui 0.2.4

data/app/assets/stylesheets/jet_ui/accordion.css

@@ -0,0 +1,24 @@
+@layer theme, base, components, utilities;
+
+@layer components {
+  .accordion {
+    @apply w-full;
+  }
+
+  .accordion__summary {
+    @apply flex items-center justify-between gap-3 py-3.5 font-medium cursor-pointer;
+  }
+
+  .accordion__icon {
+    @apply size-4;
+    transition: transform 0.15s ease;
+  }
+
+  details[open] .accordion__icon {
+    transform: rotate(-180deg);
+  }
+
+  .accordion__body {
+    @apply pb-3.5;
+  }
+}

data/app/assets/stylesheets/jet_ui/alert.css

@@ -0,0 +1,27 @@
+@layer theme, base, components, utilities;
+
+@layer components {
+  .alert {
+    @apply grid items-center gap-x-2 px-3.5 py-3 rounded-card border text-sm;
+  }
+
+  .alert:has(.alert__icon) {
+    grid-template-columns: auto 1fr;
+  }
+
+  /* Variants */
+  .alert-default { @apply bg-muted border-border text-foreground; }
+  .alert-info    { @apply bg-info-soft border-info-border text-info-soft-foreground; }
+  .alert-error   { @apply bg-destructive-soft border-destructive-border text-destructive-soft-foreground; }
+  .alert-success { @apply bg-success-soft border-success-border text-success-soft-foreground; }
+  .alert-warning { @apply bg-warning-soft border-warning-border text-warning-soft-foreground; }
+
+  /* Subcomponents */
+  .alert__title       { @apply font-semibold; }
+  .alert__icon        { @apply flex items-center; }
+  .alert__description { }
+
+  .alert__icon ~ .alert__description {
+    grid-column-start: 2;
+  }
+}

data/app/assets/stylesheets/jet_ui/avatar.css

@@ -0,0 +1,15 @@
+@layer theme, base, components, utilities;
+
+@layer components {
+  .avatar {
+    @apply relative flex items-center justify-center overflow-hidden font-medium text-muted-foreground bg-muted;
+  }
+
+  .avatar--circle {
+    @apply rounded-full;
+  }
+
+  .avatar--rounded {
+    @apply rounded-lg;
+  }
+}

data/app/assets/stylesheets/jet_ui/badge.css

@@ -0,0 +1,22 @@
+@layer theme, base, components, utilities;
+
+@layer components {
+  .badge {
+    @apply inline-flex items-center font-semibold w-fit whitespace-nowrap border;
+  }
+
+  /* Variants */
+  .badge-default { @apply bg-muted border-border text-foreground; }
+  .badge-info    { @apply bg-info-soft border-info-border text-info-soft-foreground; }
+  .badge-error   { @apply bg-destructive-soft border-destructive-border text-destructive-soft-foreground; }
+  .badge-success { @apply bg-success-soft border-success-border text-success-soft-foreground; }
+  .badge-warning { @apply bg-warning-soft border-warning-border text-warning-soft-foreground; }
+
+  /* Sizes */
+  .badge-xs { @apply px-1.5 py-0.5 text-[10px] rounded-btn-xs; }
+  .badge-sm { @apply px-2 py-1 text-[11px] rounded-btn-sm; }
+  .badge-md { @apply px-3 py-1.5 text-xs rounded-btn-md; }
+  .badge-lg { @apply px-4 py-2 text-[13px] rounded-btn-lg; }
+
+  .badge-rounded { @apply rounded-full; }
+}

data/app/assets/stylesheets/jet_ui/breadcrumbs.css

@@ -0,0 +1,28 @@
+@layer theme, base, components, utilities;
+
+@layer components {
+  .breadcrumbs {
+    @apply text-sm text-muted-foreground;
+  }
+
+  .breadcrumbs__list {
+    @apply flex items-center flex-wrap list-none;
+  }
+
+  .breadcrumbs__item {
+    @apply flex items-center;
+  }
+
+  .breadcrumbs__item:not(:last-child)::after {
+    content: "/";
+    @apply mx-2 text-muted-foreground;
+  }
+
+  .breadcrumbs__link {
+    @apply text-muted-foreground hover:text-foreground transition-colors;
+  }
+
+  .breadcrumbs__current {
+    @apply text-foreground font-medium;
+  }
+}

data/app/assets/stylesheets/jet_ui/btn.css

@@ -0,0 +1,88 @@
+@layer theme, base, components, utilities;
+
+@layer components {
+  .btn {
+    @apply inline-flex items-center justify-center gap-2 w-fit;
+    @apply outline-none cursor-pointer shrink-0;
+    @apply font-medium text-center no-underline;
+    @apply transition-transform active:translate-y-px;
+    @apply focus-visible:ring-2 focus-visible:ring-(--color-ring) focus-visible:ring-offset-2 focus-visible:ring-offset-(--color-background);
+  }
+
+  .btn-default {
+    @apply bg-(--color-accent) text-(--color-accent-foreground);
+    @apply hover:bg-(--color-accent-hover);
+  }
+
+  .btn-outline {
+    @apply text-(--color-foreground) border border-(--color-input);
+    @apply hover:bg-(--color-muted);
+  }
+
+  .btn-secondary {
+    @apply bg-(--color-muted) text-(--color-foreground);
+    @apply hover:bg-(--color-muted-hover);
+  }
+
+  .btn-danger {
+    @apply bg-(--color-destructive) text-(--color-destructive-foreground);
+    @apply hover:bg-(--color-destructive-hover);
+  }
+
+  .btn-ghost {
+    @apply text-(--color-foreground);
+    @apply hover:bg-(--color-muted);
+  }
+
+  .btn-link {
+    @apply text-(--color-link) no-underline;
+    @apply hover:text-(--color-link-hover);
+  }
+
+  /* Sizes */
+  .btn-xs {
+    @apply px-2 text-xs min-h-6.5 gap-1 rounded-(--radius-btn-xs);
+  }
+
+  .btn-sm {
+    @apply px-3 text-sm min-h-8 gap-1.5 rounded-(--radius-btn-sm);
+  }
+
+  .btn-md {
+    @apply px-4 text-sm min-h-10 rounded-(--radius-btn-md);
+  }
+
+  .btn-lg {
+    @apply px-6 text-base min-h-12 rounded-(--radius-btn-lg);
+  }
+
+  /* Icon sizes */
+  .btn-icon-xs {
+    @apply size-6.5 rounded-(--radius-btn-xs);
+  }
+
+  .btn-icon-sm {
+    @apply size-8 rounded-(--radius-btn-sm);
+  }
+
+  .btn-icon-md {
+    @apply size-10 rounded-(--radius-btn-md);
+  }
+
+  .btn-icon-lg {
+    @apply size-12 rounded-(--radius-btn-lg);
+  }
+
+  /* Modifiers */
+  .btn-block {
+    @apply w-full;
+  }
+
+  .btn-rounded {
+    @apply rounded-full;
+  }
+
+  .btn-circle {
+    @apply p-0 rounded-full;
+  }
+}

data/app/assets/stylesheets/jet_ui/card.css

@@ -0,0 +1,61 @@
+@layer theme, base, components, utilities;
+
+@layer components {
+  .card {
+    @apply block w-full bg-surface border border-border rounded-card;
+  }
+
+  /* ------------------------------------------------------------------ */
+  /* Header                                                               */
+  /* ------------------------------------------------------------------ */
+  .card__header {
+    @apply flex flex-col gap-1 items-start justify-start px-6 pt-4;
+  }
+
+  .card__header--row     { @apply flex-row gap-6; }
+
+  .card__header--align-center { @apply items-center; }
+  .card__header--align-end    { @apply items-end; }
+
+  .card__header--justify-center  { @apply justify-center; }
+  .card__header--justify-end     { @apply justify-end; }
+  .card__header--justify-between { @apply justify-between; }
+
+  .card__header-bordered { @apply pb-4 border-b border-border; }
+
+  /* ------------------------------------------------------------------ */
+  /* Body                                                                 */
+  /* ------------------------------------------------------------------ */
+  .card__body {
+    @apply px-6 py-4;
+  }
+
+  /* ------------------------------------------------------------------ */
+  /* Footer                                                               */
+  /* ------------------------------------------------------------------ */
+  .card__footer {
+    @apply flex flex-row gap-4 items-start justify-start px-6 pb-4;
+  }
+
+  .card__footer--col { @apply flex-col gap-1; }
+
+  .card__footer--align-center { @apply items-center; }
+  .card__footer--align-end    { @apply items-end; }
+
+  .card__footer--justify-center  { @apply justify-center; }
+  .card__footer--justify-end     { @apply justify-end; }
+  .card__footer--justify-between { @apply justify-between; }
+
+  .card__footer-bordered { @apply pt-4 border-t border-border; }
+
+  /* ------------------------------------------------------------------ */
+  /* Title & Subtitle                                                     */
+  /* ------------------------------------------------------------------ */
+  .card__title {
+    @apply text-lg font-semibold;
+  }
+
+  .card__subtitle {
+    @apply text-sm text-muted-foreground;
+  }
+}

data/app/assets/stylesheets/jet_ui/divider.css

@@ -0,0 +1,21 @@
+@layer theme, base, components, utilities;
+
+@layer components {
+  .divider {
+    @apply flex items-center gap-3 text-sm text-muted-foreground;
+  }
+
+  .divider::before,
+  .divider::after {
+    content: "";
+    @apply flex-1 border-t border-(--color-border);
+  }
+
+  .divider-start::before {
+    @apply flex-none w-4;
+  }
+
+  .divider-end::after {
+    @apply flex-none w-4;
+  }
+}

data/app/assets/stylesheets/jet_ui/drawer.css

@@ -0,0 +1,46 @@
+@layer theme, base, components, utilities;
+
+@layer components {
+  .drawer {
+    @apply fixed inset-0 left-auto flex-col hidden m-0 min-h-full shadow-sm w-2xl;
+    @apply bg-card backdrop:bg-overlay rounded-tl-modal rounded-bl-modal;
+  }
+
+  .drawer[open] {
+    @apply flex;
+  }
+
+  .drawer__header {
+    @apply sticky top-0 flex items-center justify-between p-4 px-6 backdrop-blur-sm bg-card/70;
+  }
+
+  .drawer__header-bordered {
+    @apply border-b border-border;
+  }
+
+  .drawer__title {
+    @apply text-xl font-semibold leading-tight text-foreground;
+  }
+
+  .drawer__subtitle {
+    @apply mt-1 text-sm text-muted-foreground;
+  }
+
+  .drawer__close {
+    @apply inline-flex items-center p-1 ml-auto text-sm transition-all duration-300 bg-transparent rounded-full cursor-pointer outline-0;
+    @apply text-muted-foreground hover:bg-accent hover:text-accent-foreground;
+  }
+
+  .drawer__body {
+    @apply flex-1 p-6 text-muted-foreground;
+  }
+
+  .drawer__footer {
+    @apply sticky bottom-0 w-full p-4 backdrop-blur-sm bg-card/70;
+    border-bottom-left-radius: var(--radius-modal);
+  }
+
+  .drawer__footer-bordered {
+    @apply border-t border-border;
+  }
+}

data/app/assets/stylesheets/jet_ui/dropdown.css

@@ -0,0 +1,33 @@
+@layer theme, base, components, utilities;
+
+@layer components {
+  .dropdown {
+    @apply relative w-fit;
+  }
+
+  .dropdown__menu {
+    @apply absolute z-40 hidden overflow-auto py-1.5 shadow min-w-44 animate-fade-in max-w-96 max-h-96;
+    @apply bg-popover border border-border text-foreground rounded-dropdown;
+  }
+
+  .dropdown__title {
+    @apply px-4 py-1 font-semibold text-sm text-foreground;
+  }
+
+  .dropdown__item {
+    @apply block mx-2;
+  }
+
+  .dropdown__link {
+    @apply block w-full px-2 py-1.5 text-sm text-left cursor-pointer rounded-btn-md;
+    @apply hover:bg-accent hover:text-accent-foreground;
+  }
+
+  .dropdown__link-active {
+    @apply bg-accent text-accent-foreground;
+  }
+
+  .dropdown__divider {
+    @apply pb-2 mb-2 border-b border-border;
+  }
+}

data/app/assets/stylesheets/jet_ui/empty.css

@@ -0,0 +1,25 @@
+@layer theme, base, components, utilities;
+
+@layer components {
+  .empty {
+    @apply flex flex-col items-center text-center py-12 px-4;
+  }
+
+  .empty__icon {
+    @apply flex items-center justify-center mb-4 bg-muted text-muted-foreground rounded-xl;
+    width: calc(var(--spacing) * 14);
+    height: calc(var(--spacing) * 14);
+  }
+
+  .empty__title {
+    @apply text-xl font-semibold text-foreground;
+  }
+
+  .empty__description {
+    @apply text-muted-foreground mt-1;
+  }
+
+  .empty__actions {
+    @apply mt-6;
+  }
+}

data/app/assets/stylesheets/jet_ui/flash.css

@@ -0,0 +1,50 @@
+@layer theme, base, components, utilities;
+
+@layer components {
+  .flash-container {
+    @apply fixed flex flex-col items-end gap-2 top-3 left-3 right-3 z-[100];
+    @apply md:left-auto md:w-fit;
+  }
+
+  .flash-item {
+    @apply relative w-full py-3 pl-4 pr-12 text-sm rounded-xl text-white;
+    @apply md:max-w-lg md:w-fit;
+    min-width: 20rem;
+    opacity: 0;
+    transform: translateX(25%);
+    transition: opacity 300ms, transform 300ms;
+  }
+
+  .flash-item--hidden {
+    display: none;
+  }
+
+  .flash-item--visible {
+    opacity: 1;
+    transform: translateX(0);
+  }
+
+  .flash-item-info {
+    background-color: var(--color-info);
+  }
+
+  .flash-item-success {
+    background-color: var(--color-success);
+  }
+
+  .flash-item-warning {
+    background-color: var(--color-warning);
+  }
+
+  .flash-item-error {
+    background-color: var(--color-destructive);
+  }
+
+  .flash-item__message {
+    @apply flex-1;
+  }
+
+  .flash-item__close {
+    @apply absolute top-2.5 right-3 text-white transition duration-300 focus:outline-none opacity-80 hover:opacity-100;
+  }
+}

data/app/assets/stylesheets/jet_ui/group.css

@@ -0,0 +1,40 @@
+@layer theme, base, components, utilities;
+
+@layer components {
+  .ui_group {
+    @apply inline-flex items-center gap-2;
+  }
+
+  .ui_group-sticky {
+    @apply gap-0;
+
+    > .btn:first-child,
+    > *:first-child .btn {
+      @apply rounded-r-none;
+    }
+
+    > .btn:last-child,
+    > *:last-child .btn {
+      @apply rounded-l-none;
+    }
+
+    > *:not(:last-child) .btn-outline,
+    > .btn-outline:not(:last-child) {
+      @apply border-r-0;
+    }
+
+    > *:not(:last-child) .btn-default,
+    > .btn-default:not(:last-child),
+    > *:not(:last-child) .btn-secondary,
+    > .btn-secondary:not(:last-child),
+    > *:not(:last-child) .btn-danger,
+    > .btn-danger:not(:last-child) {
+      @apply border-r border-r-surface/25;
+    }
+
+    > *:not(:first-child):not(:last-child) .btn,
+    > .btn:not(:first-child):not(:last-child) {
+      @apply rounded-none;
+    }
+  }
+}

data/app/assets/stylesheets/jet_ui/header.css

@@ -0,0 +1,65 @@
+@layer theme, base, components, utilities;
+
+@layer components {
+  .header {
+    @apply flex gap-y-2 py-3;
+    column-gap: calc(var(--spacing) * 8);
+  }
+
+  .header--row { flex-direction: column; }
+  .header--col { flex-direction: column; }
+
+  .header--align-start   { @apply items-start; }
+  .header--align-center  { @apply items-center; }
+  .header--align-end     { @apply items-end; }
+
+  .header--justify-start   { @apply justify-start; }
+  .header--justify-center  { @apply justify-center; }
+  .header--justify-end     { @apply justify-end; }
+  .header--justify-between { @apply justify-between; }
+
+  .header--bordered {
+    @apply pb-4 border-b border-border;
+  }
+
+  .header__heading {
+    @apply flex-1 flex flex-col gap-2;
+  }
+
+  .header__title {
+    @apply flex items-center gap-2 flex-1 font-semibold tracking-tight text-3xl;
+  }
+
+  .header__subtitle {
+    @apply text-base text-muted-foreground;
+  }
+
+  .header__actions {
+    @apply flex items-center shrink-0 gap-2 whitespace-nowrap;
+  }
+}
+
+@media (min-width: 768px) {
+  .header {
+    padding-block: calc(var(--spacing) * 6);
+  }
+
+  .header--row {
+    flex-direction: row;
+  }
+}
+
+@media (min-width: 1024px) {
+  .header {
+    column-gap: calc(var(--spacing) * 16);
+  }
+
+  .header--sticky {
+    position: sticky;
+    z-index: 30;
+    top: var(--height-navbar);
+    background-color: color-mix(in oklab, var(--color-muted) 90%, transparent);
+    -webkit-backdrop-filter: blur(var(--blur-xs));
+    backdrop-filter: blur(var(--blur-xs));
+  }
+}

data/app/assets/stylesheets/jet_ui/icon.css

@@ -0,0 +1,11 @@
+@layer theme, base, components, utilities;
+
+@layer components {
+  .icon {
+    display: inline-block;
+    flex-shrink: 0;
+    vertical-align: middle;
+    width: calc(var(--spacing) * 5);
+    height: calc(var(--spacing) * 5);
+  }
+}

data/app/assets/stylesheets/jet_ui/list.css

@@ -0,0 +1,31 @@
+@layer theme, base, components, utilities;
+
+@layer components {
+  .list {
+    @apply w-full;
+  }
+
+  .list__item {
+    @apply flex items-center gap-3 px-4 py-3;
+  }
+
+  .list--divided .list__item {
+    @apply border-b border-(--color-border);
+  }
+
+  .list--divided .list__item:last-child {
+    @apply border-b-0;
+  }
+
+  .list__icon {
+    @apply flex-shrink-0 text-muted-foreground;
+  }
+
+  .list__content {
+    @apply flex-1 min-w-0;
+  }
+
+  .list__action {
+    @apply flex-shrink-0 ml-auto;
+  }
+}

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

@@ -0,0 +1,47 @@
+@layer theme, base, components, utilities;
+
+@layer components {
+  .modal {
+    @apply p-0 m-auto shadow-sm max-w-11/12 h-fit w-2xl;
+    @apply bg-card rounded-modal backdrop:bg-overlay;
+  }
+
+  .modal-page {
+    @apply mt-4;
+  }
+
+  .modal__header {
+    @apply sticky top-0 flex items-start justify-between p-4 px-6 backdrop-blur-sm bg-card/70;
+  }
+
+  .modal__header-bordered {
+    @apply border-b border-border;
+  }
+
+  .modal__title {
+    @apply text-xl font-semibold leading-tight text-foreground;
+  }
+
+  .modal__subtitle {
+    @apply mt-1 text-sm text-muted-foreground;
+  }
+
+  .modal__close {
+    @apply inline-flex items-center p-1 ml-auto text-sm transition-all duration-300 bg-transparent rounded-full cursor-pointer outline-0;
+    @apply text-muted-foreground hover:bg-accent hover:text-accent-foreground;
+  }
+
+  .modal__body {
+    @apply px-6 py-6 overflow-auto rounded-modal;
+  }
+
+  .modal__footer {
+    @apply sticky bottom-0 w-full p-4 backdrop-blur-sm bg-card/70;
+    border-bottom-left-radius: var(--radius-modal);
+    border-bottom-right-radius: var(--radius-modal);
+  }
+
+  .modal__footer-bordered {
+    @apply border-t border-border;
+  }
+}

data/app/assets/stylesheets/jet_ui/navbar.css

@@ -0,0 +1,36 @@
+@layer theme, base, components, utilities;
+
+@layer components {
+  .navbar {
+    @apply z-20 w-full backdrop-blur-xs bg-background/90;
+    @apply flex items-center justify-between gap-6;
+    height: var(--height-navbar);
+  }
+
+  .navbar-sticky {
+    @apply sticky top-0;
+  }
+
+  .navbar__brand {
+    @apply flex items-center gap-3;
+  }
+
+  .navbar__main {
+    @apply flex flex-1 items-center justify-between;
+  }
+
+  .navbar__content {
+    @apply flex items-center gap-4;
+  }
+
+  .navbar__actions {
+    @apply flex items-center gap-2;
+  }
+}
+
+@media (min-width: 768px) {
+  .navbar {
+    display: grid;
+    grid-template-columns: var(--width-sidebar) 1fr;
+  }
+}