@navette-js/panels 0.0.0-stage → 1.0.0-beta.1

package/resources/filament/packages/tables/resources/css/actions.css

@@ -0,0 +1,51 @@
+.fi-ta-actions {
+    @apply flex max-w-full shrink-0 items-center justify-end gap-3;
+
+    .fi-ta-content-loading
+        > .fi-ta-content
+        &
+        :is(.fi-icon-btn, .fi-btn, .fi-btn.fi-color, .fi-link),
+    .fi-ta-content-loading
+        > .fi-ta-table
+        > .fi-ta-records
+        > .fi-ta-row
+        &
+        :is(.fi-icon-btn, .fi-btn, .fi-btn.fi-color, .fi-link) {
+        @apply text-transparent shadow-none ring-0 transition-none;
+        animation: var(--loading-skeleton-animation);
+        background-color: var(--loading-skeleton-bg);
+        border-radius: var(--loading-skeleton-border-radius);
+
+        & > * {
+            @apply opacity-0 transition-none;
+        }
+    }
+
+    & > * {
+        @apply shrink-0;
+    }
+
+    &.fi-wrapped {
+        @apply flex-wrap;
+    }
+
+    &.sm\:fi-not-wrapped {
+        @apply sm:flex-nowrap;
+    }
+
+    &.fi-align-center {
+        @apply justify-center;
+    }
+
+    &.fi-align-start {
+        @apply justify-start;
+    }
+
+    &.fi-align-between {
+        @apply justify-between;
+    }
+
+    &.md\:fi-align-end {
+        @apply md:justify-end;
+    }
+}

package/resources/filament/packages/tables/resources/css/cell.css

@@ -0,0 +1,139 @@
+.fi-ta-cell {
+    @apply p-0 first:ps-1 last:pe-1 sm:first:ps-3 sm:last:pe-3;
+
+    &.fi-vertical-align-start {
+        @apply align-top;
+    }
+
+    &.fi-vertical-align-end {
+        @apply align-bottom;
+    }
+
+    &.sm\:fi-hidden {
+        @apply sm:hidden;
+    }
+
+    &.md\:fi-hidden {
+        @apply md:hidden;
+    }
+
+    &.lg\:fi-hidden {
+        @apply lg:hidden;
+    }
+
+    &.xl\:fi-hidden {
+        @apply xl:hidden;
+    }
+
+    &.\32xl\:fi-hidden {
+        @apply 2xl:hidden;
+    }
+
+    &.sm\:fi-visible {
+        @apply hidden sm:table-cell;
+    }
+
+    &.md\:fi-visible {
+        @apply hidden md:table-cell;
+    }
+
+    &.lg\:fi-visible {
+        @apply hidden lg:table-cell;
+    }
+
+    &.xl\:fi-visible {
+        @apply hidden xl:table-cell;
+    }
+
+    &.\32xl\:fi-visible {
+        @apply hidden 2xl:table-cell;
+    }
+
+    & .fi-ta-col {
+        @apply flex w-full justify-start text-start disabled:pointer-events-none;
+    }
+
+    &:has(.fi-ta-reorder-handle) {
+        @apply w-1 px-3 first-of-type:ps-4 last-of-type:pe-4 sm:first-of-type:ps-6 sm:last-of-type:pe-6;
+    }
+
+    &:has(.fi-ta-actions) {
+        @apply px-3 py-4 whitespace-nowrap first-of-type:ps-4 last-of-type:pe-4 sm:first-of-type:ps-6 sm:last-of-type:pe-6;
+    }
+
+    &:has(.fi-ta-record-checkbox) {
+        @apply w-1 px-3 py-4 first-of-type:ps-4 last-of-type:pe-4 sm:first-of-type:ps-6 sm:last-of-type:pe-6;
+    }
+
+    & .fi-ta-placeholder {
+        @apply text-sm leading-6 text-gray-400 dark:text-gray-500;
+    }
+
+    &.fi-ta-summary-row-heading-cell {
+        @apply px-3 py-4 text-sm font-medium text-gray-950 sm:first:ps-6 sm:last:pe-6 dark:text-white;
+    }
+
+    &.fi-align-start {
+        @apply text-start;
+    }
+
+    &.fi-align-center {
+        @apply text-center;
+    }
+
+    &.fi-align-end {
+        @apply text-end;
+    }
+
+    &.fi-align-left {
+        @apply text-left;
+    }
+
+    &.fi-align-right {
+        @apply text-right;
+    }
+
+    &.fi-align-justify,
+    &.fi-align-between {
+        @apply text-justify;
+    }
+
+    &.fi-ta-summary-header-cell {
+        @apply px-3 py-2 text-sm font-medium text-gray-950 sm:first:ps-6 dark:text-white;
+
+        &.fi-wrapped {
+            @apply whitespace-nowrap;
+        }
+
+        &:not(.fi-wrapped) {
+            @apply whitespace-nowrap;
+        }
+    }
+
+    &.fi-ta-individual-search-cell {
+        @apply min-w-48 px-3 py-2;
+    }
+
+    & .fi-ta-reorder-handle {
+        @apply cursor-move;
+    }
+
+    .fi-ta-content-loading & .fi-ta-record-checkbox {
+        @apply shadow-none ring-0 transition-none;
+        animation: var(--loading-skeleton-animation);
+        background-color: var(--loading-skeleton-bg) !important;
+        background-image: none !important;
+    }
+
+    &.fi-ta-selection-cell {
+        @apply w-1 px-3 py-4 first-of-type:ps-4 last-of-type:pe-4 sm:first-of-type:ps-6 sm:last-of-type:pe-6;
+    }
+
+    &.fi-ta-group-selection-cell {
+        @apply w-1 px-3 align-middle first-of-type:ps-4 last-of-type:pe-4 sm:first-of-type:ps-6 sm:last-of-type:pe-6;
+    }
+}
+
+.fi-ta-search-field > .fi-ta-cell-label {
+    @apply block pt-2 pb-1 text-sm leading-6 font-semibold text-gray-500 sm:hidden dark:text-gray-400;
+}

package/resources/filament/packages/tables/resources/css/column-manager.css

@@ -0,0 +1,48 @@
+.fi-ta-col-manager {
+    @apply grid gap-4;
+
+    & .fi-ta-col-manager-header {
+        @apply flex items-center justify-between;
+    }
+
+    & .fi-ta-col-manager-heading {
+        @apply text-base leading-6 font-semibold text-gray-950 dark:text-white;
+    }
+
+    & .fi-ta-col-manager-items {
+        @apply -mt-6 gap-x-6;
+    }
+
+    & .fi-ta-col-manager-reorder-controls,
+    & .fi-ta-col-manager-status {
+        @apply sr-only;
+    }
+
+    & .fi-ta-col-manager-item {
+        @apply flex break-inside-avoid items-center gap-3 pt-6;
+
+        & .fi-ta-col-manager-label {
+            @apply flex w-full flex-1 items-center gap-x-3 text-sm font-medium text-gray-950 dark:text-white;
+
+            & .fi-checkbox-input {
+                @apply shrink-0;
+            }
+        }
+
+        & .fi-ta-col-manager-reorder-handle {
+            @apply cursor-move;
+        }
+    }
+
+    & .fi-ta-col-manager-group {
+        @apply break-inside-avoid;
+
+        & .fi-ta-col-manager-group-items {
+            @apply ps-8;
+        }
+    }
+
+    & .fi-ta-col-manager-actions-ctn {
+        @apply flex gap-3;
+    }
+}

package/resources/filament/packages/tables/resources/css/columns/checkbox.css

@@ -0,0 +1,54 @@
+.fi-ta-checkbox {
+    @apply w-full;
+
+    .fi-ta-content-loading > .fi-ta-content &,
+    .fi-ta-content-loading > .fi-ta-table > .fi-ta-records > .fi-ta-row & {
+        @apply relative w-fit max-w-full text-transparent;
+
+        &.fi-align-center {
+            @apply mx-auto;
+        }
+
+        &.fi-align-end,
+        &.fi-align-right {
+            @apply ms-auto;
+        }
+
+        &::after {
+            @apply absolute inset-x-3 top-1/2 h-4 -translate-y-1/2;
+            animation: var(--loading-skeleton-animation);
+            background-color: var(--loading-skeleton-bg);
+            border-radius: var(--loading-skeleton-border-radius);
+            content: '';
+        }
+
+        &.fi-inline::after {
+            @apply inset-x-0;
+        }
+
+        .fi-ta-table-stacked-on-mobile &::after {
+            @apply inset-x-0 sm:inset-x-3;
+        }
+
+        & > * {
+            @apply opacity-0;
+        }
+    }
+
+    &:not(.fi-inline) {
+        @apply px-3 py-4;
+    }
+
+    .fi-ta-table-stacked-on-mobile & {
+        @apply p-0 sm:px-3 sm:py-4;
+    }
+
+    &.fi-align-center {
+        @apply text-center;
+    }
+
+    &.fi-align-end,
+    &.fi-align-right {
+        @apply text-end;
+    }
+}

package/resources/filament/packages/tables/resources/css/columns/color.css

@@ -0,0 +1,76 @@
+.fi-ta-color {
+    @apply flex w-full gap-1.5;
+
+    .fi-ta-content-loading > .fi-ta-content &,
+    .fi-ta-content-loading > .fi-ta-table > .fi-ta-records > .fi-ta-row & {
+        @apply relative w-fit max-w-full text-transparent;
+
+        &.fi-align-center {
+            @apply mx-auto;
+        }
+
+        &.fi-align-end,
+        &.fi-align-right {
+            @apply ms-auto;
+        }
+
+        &::after {
+            @apply absolute inset-x-3 inset-y-4;
+            animation: var(--loading-skeleton-animation);
+            background-color: var(--loading-skeleton-bg);
+            border-radius: var(--loading-skeleton-border-radius);
+            content: '';
+        }
+
+        &.fi-inline::after {
+            @apply inset-0;
+        }
+
+        .fi-ta-table-stacked-on-mobile &::after {
+            @apply inset-0 sm:inset-x-3 sm:inset-y-4;
+        }
+
+        & > * {
+            @apply opacity-0;
+        }
+    }
+
+    &.fi-wrapped {
+        @apply flex-wrap;
+    }
+
+    &:not(.fi-inline) {
+        @apply px-3 py-4;
+    }
+
+    .fi-ta-table-stacked-on-mobile & {
+        @apply p-0 sm:px-3 sm:py-4;
+    }
+
+    &.fi-align-start,
+    &.fi-align-left {
+        @apply justify-start;
+    }
+
+    &.fi-align-center {
+        @apply justify-center;
+    }
+
+    &.fi-align-end,
+    &.fi-align-right {
+        @apply justify-end;
+    }
+
+    &.fi-align-justify,
+    &.fi-align-between {
+        @apply justify-between;
+    }
+
+    & > .fi-ta-color-item {
+        @apply size-6 rounded-md ring-1 ring-gray-950/10 dark:ring-white/20;
+
+        &.fi-copyable {
+            @apply focus-visible:ring-primary-600 dark:focus-visible:ring-primary-500 cursor-pointer outline-none focus-visible:ring-2;
+        }
+    }
+}

package/resources/filament/packages/tables/resources/css/columns/icon.css

@@ -0,0 +1,81 @@
+.fi-ta-icon {
+    @apply flex w-full gap-1.5;
+
+    .fi-ta-content-loading > .fi-ta-content &,
+    .fi-ta-content-loading > .fi-ta-table > .fi-ta-records > .fi-ta-row & {
+        @apply relative w-fit max-w-full text-transparent;
+
+        &.fi-align-center {
+            @apply mx-auto;
+        }
+
+        &.fi-align-end,
+        &.fi-align-right {
+            @apply ms-auto;
+        }
+
+        &::after {
+            @apply absolute inset-x-3 inset-y-4;
+            animation: var(--loading-skeleton-animation);
+            background-color: var(--loading-skeleton-bg);
+            border-radius: var(--loading-skeleton-border-radius);
+            content: '';
+        }
+
+        &.fi-inline::after {
+            @apply inset-0;
+        }
+
+        .fi-ta-table-stacked-on-mobile &::after {
+            @apply inset-0 sm:inset-x-3 sm:inset-y-4;
+        }
+
+        & > * {
+            @apply opacity-0;
+        }
+    }
+
+    &.fi-wrapped {
+        @apply flex-wrap;
+    }
+
+    &.fi-ta-icon-has-line-breaks {
+        @apply flex-col;
+    }
+
+    &:not(.fi-inline) {
+        @apply px-3 py-4;
+    }
+
+    .fi-ta-table-stacked-on-mobile & {
+        @apply p-0 sm:px-3 sm:py-4;
+    }
+
+    &.fi-align-start,
+    &.fi-align-left {
+        @apply justify-start;
+    }
+
+    &.fi-align-center {
+        @apply justify-center;
+    }
+
+    &.fi-align-end,
+    &.fi-align-right {
+        @apply justify-end;
+    }
+
+    &.fi-align-justify,
+    &.fi-align-between {
+        @apply justify-between;
+    }
+
+    & > .fi-icon,
+    & > a > .fi-icon {
+        @apply text-gray-400 dark:text-gray-500;
+
+        &.fi-color {
+            @apply text-(--text) dark:text-(--dark-text);
+        }
+    }
+}

package/resources/filament/packages/tables/resources/css/columns/image.css

@@ -0,0 +1,207 @@
+.fi-ta-image {
+    @apply flex w-full items-center gap-1.5;
+
+    .fi-ta-content-loading > .fi-ta-content &,
+    .fi-ta-content-loading > .fi-ta-table > .fi-ta-records > .fi-ta-row & {
+        @apply relative w-fit max-w-full text-transparent;
+
+        &.fi-align-center {
+            @apply mx-auto;
+        }
+
+        &.fi-align-end,
+        &.fi-align-right {
+            @apply ms-auto;
+        }
+
+        &::after {
+            @apply absolute inset-y-4 start-3 aspect-square;
+            animation: var(--loading-skeleton-animation);
+            background-color: var(--loading-skeleton-bg);
+            border-radius: var(--loading-skeleton-border-radius);
+            content: '';
+        }
+
+        &.fi-inline::after {
+            @apply inset-y-0 start-0;
+        }
+
+        .fi-ta-table-stacked-on-mobile &::after {
+            @apply inset-y-0 start-0 sm:inset-y-4 sm:start-3;
+        }
+
+        &.fi-circular::after {
+            @apply rounded-full;
+        }
+
+        & > * {
+            @apply opacity-0;
+        }
+    }
+
+    & img {
+        @apply max-w-none object-cover object-center;
+    }
+
+    &.fi-circular {
+        & img {
+            @apply rounded-full;
+        }
+    }
+
+    &.fi-ta-image-ring {
+        & img,
+        & .fi-ta-image-limited-remaining-text {
+            @apply ring ring-white dark:ring-gray-900;
+        }
+
+        &.fi-ta-image-ring-0 {
+            & img,
+            & .fi-ta-image-limited-remaining-text {
+                @apply ring-0;
+            }
+        }
+
+        &.fi-ta-image-ring-1 {
+            & img,
+            & .fi-ta-image-limited-remaining-text {
+                @apply ring-1;
+            }
+        }
+
+        &.fi-ta-image-ring-2 {
+            & img,
+            & .fi-ta-image-limited-remaining-text {
+                @apply ring-2;
+            }
+        }
+
+        &.fi-ta-image-ring-3 {
+            & img,
+            & .fi-ta-image-limited-remaining-text {
+                @apply ring-3;
+            }
+        }
+
+        &.fi-ta-image-ring-4 {
+            & img,
+            & .fi-ta-image-limited-remaining-text {
+                @apply ring-4;
+            }
+        }
+
+        &.fi-ta-image-ring-5 {
+            & img,
+            & .fi-ta-image-limited-remaining-text {
+                @apply ring-5;
+            }
+        }
+
+        &.fi-ta-image-ring-6 {
+            & img,
+            & .fi-ta-image-limited-remaining-text {
+                @apply ring-6;
+            }
+        }
+
+        &.fi-ta-image-ring-7 {
+            & img,
+            & .fi-ta-image-limited-remaining-text {
+                @apply ring-7;
+            }
+        }
+
+        &.fi-ta-image-ring-8 {
+            & img,
+            & .fi-ta-image-limited-remaining-text {
+                @apply ring-8;
+            }
+        }
+    }
+
+    &.fi-ta-image-overlap-1 {
+        @apply gap-x-0 -space-x-1;
+    }
+
+    &.fi-ta-image-overlap-2 {
+        @apply gap-x-0 -space-x-2;
+    }
+
+    &.fi-ta-image-overlap-3 {
+        @apply gap-x-0 -space-x-3;
+    }
+
+    &.fi-ta-image-overlap-4 {
+        @apply gap-x-0 -space-x-4;
+    }
+
+    &.fi-ta-image-overlap-5 {
+        @apply gap-x-0 -space-x-5;
+    }
+
+    &.fi-ta-image-overlap-6 {
+        @apply gap-x-0 -space-x-6;
+    }
+
+    &.fi-ta-image-overlap-7 {
+        @apply gap-x-0 -space-x-7;
+    }
+
+    &.fi-ta-image-overlap-8 {
+        @apply gap-x-0 -space-x-8;
+    }
+
+    &.fi-wrapped {
+        @apply flex-wrap;
+    }
+
+    &:not(.fi-inline) {
+        @apply px-3 py-4;
+    }
+
+    .fi-ta-table-stacked-on-mobile & {
+        @apply p-0 sm:px-3 sm:py-4;
+    }
+
+    &.fi-align-start,
+    &.fi-align-left {
+        @apply justify-start;
+    }
+
+    &.fi-align-center {
+        @apply justify-center;
+    }
+
+    &.fi-align-end,
+    &.fi-align-right {
+        @apply justify-end;
+    }
+
+    &.fi-align-justify,
+    &.fi-align-between {
+        @apply justify-between;
+    }
+
+    &.fi-stacked {
+        & .fi-ta-image-limited-remaining-text {
+            @apply rounded-full bg-gray-100 dark:bg-gray-800;
+        }
+    }
+
+    & .fi-ta-image-limited-remaining-text {
+        @apply flex items-center justify-center text-sm font-medium text-gray-500 dark:text-gray-400;
+
+        &.fi-size-xs {
+            @apply text-xs;
+        }
+
+        &.fi-size-base,
+        &.fi-size-md {
+            @apply text-base;
+        }
+
+        &.fi-size-lg {
+            @apply text-lg;
+        }
+    }
+}

package/resources/filament/packages/tables/resources/css/columns/layout/grid.css

@@ -0,0 +1,49 @@
+.fi-ta-grid {
+    &.fi-gap-sm {
+        @apply gap-1;
+    }
+
+    &.sm\:fi-gap-sm {
+        @apply sm:gap-1;
+    }
+
+    &.md\:fi-gap-sm {
+        @apply md:gap-1;
+    }
+
+    &.lg\:fi-gap-sm {
+        @apply lg:gap-1;
+    }
+
+    &.xl\:fi-gap-sm {
+        @apply xl:gap-1;
+    }
+
+    &.\32xl\:fi-gap-sm {
+        @apply 2xl:gap-1;
+    }
+
+    &.fi-gap-lg {
+        @apply gap-3;
+    }
+
+    &.sm\:fi-gap-lg {
+        @apply sm:gap-3;
+    }
+
+    &.md\:fi-gap-lg {
+        @apply md:gap-3;
+    }
+
+    &.lg\:fi-gap-lg {
+        @apply lg:gap-3;
+    }
+
+    &.xl\:fi-gap-lg {
+        @apply xl:gap-3;
+    }
+
+    &.\32xl\:fi-gap-lg {
+        @apply 2xl:gap-3;
+    }
+}

package/resources/filament/packages/tables/resources/css/columns/layout/panel.css

@@ -0,0 +1,3 @@
+.fi-ta-panel {
+    @apply rounded-lg bg-gray-50 p-4 ring-1 ring-gray-950/5 ring-inset dark:bg-white/5 dark:ring-white/10;
+}