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

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

@@ -0,0 +1,35 @@
+.fi-ta-split {
+    @apply flex;
+
+    &.default\:fi-ta-split {
+        @apply items-center gap-3;
+    }
+
+    &.sm\:fi-ta-split,
+    &.md\:fi-ta-split,
+    &.lg\:fi-ta-split,
+    &.xl\:fi-ta-split,
+    &.\32xl\:fi-ta-split {
+        @apply flex-col gap-2;
+    }
+
+    &.sm\:fi-ta-split {
+        @apply sm:flex-row sm:items-center sm:gap-3;
+    }
+
+    &.md\:fi-ta-split {
+        @apply md:flex-row md:items-center md:gap-3;
+    }
+
+    &.lg\:fi-ta-split {
+        @apply lg:flex-row lg:items-center lg:gap-3;
+    }
+
+    &.xl\:fi-ta-split {
+        @apply xl:flex-row xl:items-center xl:gap-3;
+    }
+
+    &.\32xl\:fi-ta-split {
+        @apply 2xl:flex-row 2xl:items-center 2xl:gap-3;
+    }
+}

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

@@ -0,0 +1,29 @@
+.fi-ta-stack {
+    @apply flex flex-col;
+
+    &.fi-align-start,
+    &.fi-align-left {
+        @apply items-start;
+    }
+
+    &.fi-align-center {
+        @apply items-center;
+    }
+
+    &.fi-align-end,
+    &.fi-align-right {
+        @apply items-end;
+    }
+
+    &.fi-gap-sm {
+        @apply space-y-1;
+    }
+
+    &.fi-gap-md {
+        @apply space-y-2;
+    }
+
+    &.fi-gap-lg {
+        @apply space-y-3;
+    }
+}

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

@@ -0,0 +1,36 @@
+.fi-ta-select {
+    @apply w-full min-w-48;
+
+    .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;
+
+        &::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;
+        }
+    }
+
+    &:not(.fi-inline) {
+        @apply px-3 py-4;
+    }
+
+    .fi-ta-table-stacked-on-mobile & {
+        @apply p-0 sm:px-3 sm:py-4;
+    }
+}

package/resources/filament/packages/tables/resources/css/columns/summaries/icon-count.css

@@ -0,0 +1,43 @@
+.fi-ta-icon-count-summary {
+    @apply grid gap-y-1.5 px-3 py-4 text-sm text-gray-500 tabular-nums dark:text-gray-400;
+
+    .fi-ta-content-loading & {
+        @apply relative w-fit max-w-full text-transparent;
+
+        &::after {
+            @apply absolute inset-x-0 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: '';
+        }
+
+        & > * {
+            @apply opacity-0;
+        }
+    }
+
+    .fi-ta-table-stacked-on-mobile & {
+        @apply px-0 py-2 sm:px-3 sm:py-4;
+    }
+
+    & > .fi-ta-icon-count-summary-label {
+        @apply font-medium text-gray-950 dark:text-white;
+    }
+
+    & > ul {
+        @apply grid gap-y-1.5;
+
+        & > li {
+            @apply flex items-center gap-x-1.5;
+
+            & > .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/summaries/range.css

@@ -0,0 +1,27 @@
+.fi-ta-range-summary {
+    @apply grid gap-y-1 px-3 py-4 text-sm text-gray-500 tabular-nums dark:text-gray-400;
+
+    .fi-ta-content-loading & {
+        @apply relative w-fit max-w-full text-transparent;
+
+        &::after {
+            @apply absolute inset-x-0 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: '';
+        }
+
+        & > * {
+            @apply opacity-0;
+        }
+    }
+
+    .fi-ta-table-stacked-on-mobile & {
+        @apply px-0 py-2 sm:px-3 sm:py-4;
+    }
+
+    & > .fi-ta-range-summary-label {
+        @apply font-medium text-gray-950 dark:text-white;
+    }
+}

package/resources/filament/packages/tables/resources/css/columns/summaries/text.css

@@ -0,0 +1,29 @@
+.fi-ta-text-summary {
+    /* Summaries are computed aggregates: tabular figures keep them aligned
+       with the numeric column above. */
+    @apply grid gap-y-1 px-3 py-4 text-sm text-gray-500 tabular-nums dark:text-gray-400;
+
+    .fi-ta-content-loading & {
+        @apply relative w-fit max-w-full text-transparent;
+
+        &::after {
+            @apply absolute inset-x-0 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: '';
+        }
+
+        & > * {
+            @apply opacity-0;
+        }
+    }
+
+    .fi-ta-table-stacked-on-mobile & {
+        @apply px-0 py-2 sm:px-3 sm:py-4;
+    }
+
+    & > .fi-ta-text-summary-label {
+        @apply font-medium text-gray-950 dark:text-white;
+    }
+}

package/resources/filament/packages/tables/resources/css/columns/summaries/values.css

@@ -0,0 +1,33 @@
+.fi-ta-values-summary {
+    @apply grid gap-y-1 px-3 py-4 text-sm text-gray-500 tabular-nums dark:text-gray-400;
+
+    .fi-ta-content-loading & {
+        @apply relative w-fit max-w-full text-transparent;
+
+        &::after {
+            @apply absolute inset-x-0 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: '';
+        }
+
+        & > * {
+            @apply opacity-0;
+        }
+    }
+
+    .fi-ta-table-stacked-on-mobile & {
+        @apply px-0 py-2 sm:px-3 sm:py-4;
+    }
+
+    & > .fi-ta-values-summary-label {
+        @apply font-medium text-gray-950 dark:text-white;
+    }
+
+    & > ul {
+        &.fi-bulleted {
+            @apply list-inside list-disc;
+        }
+    }
+}

package/resources/filament/packages/tables/resources/css/columns/text-input.css

@@ -0,0 +1,36 @@
+.fi-ta-text-input {
+    @apply w-full min-w-48;
+
+    .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;
+
+        &::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;
+        }
+    }
+
+    &:not(.fi-inline) {
+        @apply px-3 py-4;
+    }
+
+    .fi-ta-table-stacked-on-mobile & {
+        @apply p-0 sm:px-3 sm:py-4;
+    }
+}

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

@@ -0,0 +1,319 @@
+.fi-ta-text {
+    @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: '';
+        }
+
+        &:is(
+                .fi-wrapped,
+                .fi-ta-text-has-descriptions,
+                .fi-ta-text-has-line-breaks,
+                .fi-ta-text-list-limited,
+                .fi-ta-text-has-line-clamp
+            )::after {
+            @apply inset-y-4 h-auto translate-y-0;
+        }
+
+        &.fi-inline::after {
+            @apply inset-x-0;
+        }
+
+        &.fi-inline:is(
+                .fi-wrapped,
+                .fi-ta-text-has-descriptions,
+                .fi-ta-text-has-line-breaks,
+                .fi-ta-text-list-limited,
+                .fi-ta-text-has-line-clamp
+            )::after {
+            @apply inset-y-0;
+        }
+
+        .fi-ta-table-stacked-on-mobile &::after {
+            @apply inset-x-0 sm:inset-x-3;
+        }
+
+        .fi-ta-table-stacked-on-mobile
+            &:is(
+                .fi-wrapped,
+                .fi-ta-text-has-descriptions,
+                .fi-ta-text-has-line-breaks,
+                .fi-ta-text-list-limited,
+                .fi-ta-text-has-line-clamp
+            )::after {
+            @apply inset-y-0 sm:inset-y-4;
+        }
+
+        & > * {
+            @apply opacity-0;
+        }
+    }
+
+    &.fi-numeric {
+        /* Numeric and money columns use tabular figures, so digits line up
+           down the column. */
+        @apply tabular-nums;
+    }
+
+    &.fi-ta-text-has-descriptions,
+    &.fi-ta-text-list-limited {
+        /* Add space between content and descriptions / list limit message. */
+        @apply flex flex-col;
+
+        &.fi-ta-text-has-badges {
+            /* When the content contains badges, more gap is required to balance the spacing. */
+            @apply gap-y-2;
+        }
+
+        &:not(.fi-ta-text-has-badges) {
+            /* When the content does not contain badges, less gap is required to balance the spacing. */
+            @apply gap-y-1;
+        }
+    }
+
+    &:not(.fi-inline) {
+        @apply px-3 py-4;
+    }
+
+    .fi-ta-table-stacked-on-mobile & {
+        @apply p-0 sm:px-3 sm:py-4;
+    }
+
+    ul&.fi-bulleted,
+    &.fi-bulleted ul {
+        @apply list-inside list-disc;
+    }
+
+    &:not(.fi-ta-text-has-line-breaks) {
+        ul&.fi-ta-text-has-badges,
+        &.fi-ta-text-has-badges ul {
+            /* A list of badges without line breaks need to remain on the same line, not wrap */
+            @apply flex gap-x-1.5;
+
+            &.fi-wrapped,
+            &:is(.fi-wrapped ul) {
+                /* When wrap is enabled, some badges can remain on the same line as others and some should wrap */
+                @apply flex-wrap gap-y-1;
+            }
+        }
+    }
+
+    ul&.fi-ta-text-has-badges,
+    &.fi-ta-text-has-badges ul {
+        &.fi-ta-text-has-line-breaks,
+        &:is(.fi-ta-text-has-line-breaks ul) {
+            /* Add vertical gap between badges in a list with line breaks */
+            @apply flex flex-col gap-y-1;
+        }
+
+        &:not(ul.fi-ta-text-has-line-breaks),
+        &:not(.fi-ta-text-has-line-breaks ul) {
+            /* A list of badges without line breaks need to remain on the same line, not wrap */
+            @apply flex gap-x-1.5;
+
+            &.fi-wrapped,
+            &:is(.fi-wrapped ul) {
+                /* When wrap is enabled, some badges can remain on the same line as others and some should wrap */
+                @apply flex-wrap gap-y-1;
+            }
+        }
+    }
+
+    &.fi-wrapped:not(.fi-ta-text-has-badges.fi-ta-text-has-line-breaks) {
+        /* If the content has badges, and they have line breaks, setting `whitespace-normal` sometimes pushes the badge
+             onto the line below the bullet point if there is one, and badge content does not need to wrap anyway. */
+        @apply whitespace-normal;
+
+        & .fi-badge,
+        & .fi-ta-text-list-limited-message {
+            /* Badge content should not wrap, but descriptions above and below badges should. The list limited
+                 message and actions should not wrap. */
+            @apply whitespace-nowrap;
+        }
+    }
+
+    & > .fi-ta-text-description,
+    & > .fi-ta-text-list-limited-message {
+        @apply text-sm text-gray-500 dark:text-gray-400;
+    }
+
+    &.fi-align-center {
+        @apply text-center;
+
+        ul&,
+        & ul {
+            @apply justify-center;
+        }
+    }
+
+    &.fi-align-end,
+    &.fi-align-right {
+        @apply text-end;
+
+        ul&,
+        & ul {
+            @apply justify-end;
+        }
+    }
+
+    &.fi-align-justify,
+    &.fi-align-between {
+        @apply text-justify;
+
+        ul&,
+        & ul {
+            @apply justify-between;
+        }
+    }
+}
+
+.fi-ta-text-item {
+    @apply text-gray-950 dark:text-white;
+
+    & a {
+        @apply hover:underline focus-visible:underline;
+    }
+
+    &:not(.fi-bulleted li.fi-ta-text-item) {
+        /* Line clamping sets the `display` property of the list item to `-webkit-box` instead of `list-item`, which hides the bullet point. */
+        @apply line-clamp-(--line-clamp,none);
+    }
+
+    & > .fi-copyable {
+        @apply focus-visible:ring-primary-600 dark:focus-visible:ring-primary-500 cursor-pointer rounded-md outline-none focus-visible:ring-2;
+    }
+
+    &.fi-size-xs {
+        @apply text-xs;
+    }
+
+    &.fi-size-sm {
+        @apply text-sm leading-6;
+    }
+
+    &.fi-size-md {
+        @apply text-base;
+    }
+
+    &.fi-size-lg {
+        @apply text-lg;
+    }
+
+    &.fi-font-thin {
+        @apply font-thin;
+    }
+
+    &.fi-font-extralight {
+        @apply font-extralight;
+    }
+
+    &.fi-font-light {
+        @apply font-light;
+    }
+
+    &.fi-font-normal {
+        @apply font-normal;
+    }
+
+    &.fi-font-medium {
+        @apply font-medium;
+    }
+
+    &.fi-font-semibold {
+        @apply font-semibold;
+    }
+
+    &.fi-font-bold {
+        @apply font-bold;
+    }
+
+    &.fi-font-extrabold {
+        @apply font-extrabold;
+    }
+
+    &.fi-font-black {
+        @apply font-black;
+    }
+
+    &.fi-font-sans {
+        @apply font-sans;
+    }
+
+    &.fi-font-serif {
+        @apply font-serif;
+    }
+
+    &.fi-font-mono {
+        @apply font-mono;
+    }
+
+    &.fi-color {
+        @apply text-(--text) dark:text-(--dark-text);
+
+        li&::marker {
+            @apply text-gray-950;
+        }
+
+        @variant dark {
+            li&::marker {
+                @apply text-white;
+            }
+        }
+    }
+
+    &.fi-color-gray {
+        @apply text-gray-500 dark:text-gray-400;
+
+        li&::marker {
+            @apply text-gray-950;
+        }
+
+        @variant dark {
+            li&::marker {
+                @apply text-white;
+            }
+        }
+    }
+
+    & > .fi-icon,
+    & > span:not(.fi-badge) > .fi-icon {
+        @apply inline-block shrink-0 text-gray-400 dark:text-gray-500;
+
+        &.fi-color {
+            @apply text-color-500;
+        }
+    }
+
+    &.fi-ta-text-has-badges > .fi-badge {
+        @apply align-middle;
+    }
+}
+
+.fi-ta-col-has-column-url .fi-ta-text-item {
+    @apply hover:underline focus-visible:underline;
+
+    & .fi-icon {
+        @apply hover:no-underline focus-visible:no-underline;
+    }
+
+    & > .fi-badge {
+        @apply hover:no-underline focus-visible:no-underline;
+    }
+}

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

@@ -0,0 +1,54 @@
+.fi-ta-toggle {
+    @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-6 -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;
+    }
+}