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

package/resources/filament/packages/infolists/resources/css/components/text.css

@@ -0,0 +1,234 @@
+.fi-in-text {
+    @apply w-full;
+
+    &.fi-numeric {
+        /* Numeric and money entries use tabular figures, so digits line up
+           down a column of entries. */
+        @apply tabular-nums;
+    }
+
+    &.fi-in-text-affixed {
+        @apply flex gap-3;
+    }
+
+    & .fi-in-text-affixed-content {
+        @apply min-w-0 flex-1;
+    }
+
+    & .fi-in-text-affix {
+        @apply flex items-center gap-3 self-stretch;
+    }
+
+    &.fi-in-text-list-limited {
+        /* Add space between content and list limit message. */
+        @apply flex flex-col;
+
+        &.fi-in-text-has-badges {
+            /* When the content contains badges, more gap is required to balance the spacing. */
+            @apply gap-y-2;
+        }
+
+        &:not(.fi-in-text-has-badges) {
+            /* When the content does not contain badges, less gap is required to balance the spacing. */
+            @apply gap-y-1;
+        }
+    }
+
+    ul&.fi-bulleted,
+    &.fi-bulleted ul {
+        @apply list-inside list-disc;
+    }
+
+    &:not(.fi-in-text-has-line-breaks) {
+        ul&.fi-in-text-has-badges,
+        &.fi-in-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-in-text-has-badges,
+    &.fi-in-text-has-badges ul {
+        &.fi-in-text-has-line-breaks,
+        &:is(.fi-in-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-in-text-has-line-breaks),
+        &:not(.fi-in-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-in-text-has-badges.fi-in-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;
+        @apply wrap-break-word;
+
+        & .fi-badge,
+        & .fi-in-text-list-limited-message {
+            /* Badge content and list limited message and actions should not wrap. */
+            @apply whitespace-nowrap;
+        }
+    }
+
+    & > .fi-in-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-in-text-item {
+    @apply text-gray-950 dark:text-white;
+
+    & a {
+        @apply hover:underline focus-visible:underline;
+    }
+
+    &:not(.fi-bulleted li.fi-in-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;
+    }
+
+    &.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;
+        }
+    }
+
+    & > .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;
+        }
+    }
+}

package/resources/filament/packages/infolists/resources/css/index.css

@@ -0,0 +1,14 @@
+@import './components/code.css' layer(components);
+@import './components/color.css' layer(components);
+@import './components/entry.css' layer(components);
+@import './components/key-value.css' layer(components);
+@import './components/icon.css' layer(components);
+@import './components/image.css' layer(components);
+@import './components/repeatable.css' layer(components);
+@import './components/text.css' layer(components);
+
+@layer utilities {
+    .fi-in-text-item.fi-prose {
+        font-size: revert-layer;
+    }
+}

package/resources/filament/packages/notifications/resources/css/database-notifications.css

@@ -0,0 +1,56 @@
+.fi-no-database {
+    @apply flex;
+
+    /* `.fi-no-database` sits on the teleported modal root as well as on this
+       trigger wrapper, and the compound is what lets the zeroed gutter below
+       outrank the modal's own `px-6`. */
+    &.fi-modal .fi-modal-window-ctn > .fi-modal-window {
+        & .fi-modal-heading {
+            @apply relative inline-block;
+
+            & .fi-badge {
+                @apply absolute start-full -top-1 ms-1 w-max;
+            }
+        }
+
+        & .fi-modal-header {
+            & .fi-ac {
+                @apply mt-2;
+            }
+        }
+
+        & .fi-modal-content {
+            /* The list runs flush to the window's edges by ZEROING the
+               padding, not by cancelling it with negative margins: a
+               cancelled `pb` stays behind the last notification as dead
+               scroll space, and cancelled `px` leaves the content's border
+               box wider than the window, so the scroll container scrolls
+               sideways over empty space. */
+            @apply gap-y-0 p-0;
+
+            & .fi-no-notifications {
+                @apply -mb-px divide-y divide-gray-200 dark:divide-white/10;
+
+                & > :last-child {
+                    @apply border-b border-gray-200 dark:border-white/10;
+                }
+            }
+
+            & .fi-no-notifications-loading-ctn {
+                @apply flex justify-center p-6 text-gray-400 dark:text-gray-500;
+            }
+        }
+
+        &.fi-modal-window-has-footer .fi-modal-content {
+            @apply border-b border-gray-200 dark:border-white/10;
+        }
+
+        & .fi-modal-footer {
+            @apply pt-6;
+        }
+    }
+
+    & .fi-no-notification-unread-ctn {
+        @apply before:bg-primary-600 dark:before:bg-primary-500 relative before:absolute before:start-0 before:h-full before:w-0.5;
+    }
+}

package/resources/filament/packages/notifications/resources/css/index.css

@@ -0,0 +1,3 @@
+@import './database-notifications.css' layer(components);
+@import './notification.css' layer(components);
+@import './notifications.css' layer(components);

package/resources/filament/packages/notifications/resources/css/notification.css

@@ -0,0 +1,109 @@
+.fi-no-notification {
+    @apply pointer-events-auto invisible flex w-full shrink-0 gap-3 overflow-hidden p-4 transition duration-300;
+
+    & .fi-no-notification-icon {
+        @apply text-gray-400;
+
+        &.fi-color {
+            @apply text-color-400;
+        }
+    }
+
+    & .fi-no-notification-main {
+        @apply mt-0.5 grid flex-1 gap-3;
+    }
+
+    & .fi-no-notification-text {
+        @apply grid gap-1;
+    }
+
+    & .fi-no-notification-title {
+        @apply text-sm font-medium text-gray-950 dark:text-white;
+    }
+
+    & .fi-no-notification-date {
+        @apply text-sm text-gray-500 dark:text-gray-400;
+    }
+
+    & .fi-no-notification-body {
+        @apply overflow-hidden text-sm text-pretty break-words text-gray-500 dark:text-gray-400;
+
+        & > p:not(:first-of-type) {
+            @apply mt-1;
+        }
+    }
+
+    &:not(.fi-inline) {
+        @apply flex max-w-sm gap-3 rounded-xl bg-white p-4 shadow-lg ring-1 ring-gray-950/5 dark:bg-gray-900 dark:ring-white/10;
+
+        &.fi-color {
+            @apply ring-color-600/20 dark:ring-color-400/30;
+        }
+
+        &.fi-transition-leave-end {
+            @apply scale-95;
+        }
+    }
+
+    &.fi-color {
+        background-color: color-mix(in oklab, white 90%, var(--color-400));
+
+        @variant dark {
+            background-color: color-mix(
+                in oklab,
+                var(--gray-900) 90%,
+                var(--color-400)
+            );
+        }
+
+        & .fi-no-notification-body {
+            @apply text-gray-700/75 dark:text-gray-300/75;
+        }
+    }
+
+    &.fi-transition-enter-start {
+        @apply opacity-0;
+    }
+
+    &.fi-transition-leave-end {
+        @apply opacity-0;
+    }
+}
+
+.fi-no {
+    &.fi-align-start,
+    &.fi-align-left {
+        & .fi-no-notification {
+            &.fi-transition-enter-start {
+                @apply -translate-x-12 rtl:translate-x-12;
+            }
+        }
+    }
+
+    &.fi-align-end,
+    &.fi-align-right {
+        & .fi-no-notification {
+            &.fi-transition-enter-start {
+                @apply translate-x-12 rtl:-translate-x-12;
+            }
+        }
+    }
+
+    &.fi-align-center {
+        &.fi-vertical-align-start {
+            & .fi-no-notification {
+                &.fi-transition-enter-start {
+                    @apply -translate-y-12;
+                }
+            }
+        }
+
+        &.fi-vertical-align-end {
+            & .fi-no-notification {
+                &.fi-transition-enter-start {
+                    @apply translate-y-12;
+                }
+            }
+        }
+    }
+}

package/resources/filament/packages/notifications/resources/css/notifications.css

@@ -0,0 +1,29 @@
+.fi-no {
+    @apply pointer-events-none fixed inset-4 z-50 mx-auto flex gap-3;
+
+    &.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-vertical-align-start {
+        @apply flex-col-reverse justify-end;
+    }
+
+    &.fi-vertical-align-center {
+        @apply flex-col justify-center;
+    }
+
+    &.fi-vertical-align-end {
+        @apply flex-col justify-end;
+    }
+}

package/resources/filament/packages/panels/resources/css/base.css

@@ -0,0 +1,13 @@
+:root.dark {
+    color-scheme: dark;
+}
+
+/* When scrolling to a validation error, do not hide the element behind the top bar.
+   Server-side validation errors scroll to the wrapper, while native browser validation
+   scrolls to the focused control itself, which can be any focusable descendant, and
+   `scroll-margin` is not inherited. The clearance is the topbar height plus breathing
+   room, so it tracks a customized topbar. */
+[data-field-wrapper],
+[data-field-wrapper] * {
+    scroll-margin-top: calc(var(--topbar-height) + 4rem);
+}

package/resources/filament/packages/panels/resources/css/components/global-search.css

@@ -0,0 +1,93 @@
+.fi-global-search-ctn {
+    @apply flex items-center;
+}
+
+.fi-global-search {
+    @apply flex-1 sm:relative;
+}
+
+.fi-global-search-results-ctn {
+    @apply absolute inset-x-4 z-10 mt-2 max-h-96 overflow-auto rounded-lg bg-white shadow-lg ring-1 ring-gray-950/5 transition sm:inset-x-auto dark:bg-gray-900 dark:ring-white/10;
+
+    /**
+     * This zero translation along the z-axis fixes a Safari bug
+     * where the results container is incorrectly placed in the stacking context
+     * due to the overflow-x value of clip on the topbar element.
+     *
+     * https://github.com/filamentphp/filament/issues/8215
+     */
+    transform: translateZ(0);
+
+    &.fi-transition-enter-start,
+    &.fi-transition-leave-end {
+        @apply opacity-0;
+    }
+}
+
+.fi-topbar .fi-global-search-results-ctn {
+    @apply sm:end-0 sm:w-screen sm:max-w-sm;
+}
+
+.fi-sidebar {
+    & .fi-global-search-ctn {
+        @apply mx-3 mt-3;
+    }
+
+    & .fi-global-search-results-ctn {
+        @apply sm:start-0;
+    }
+}
+
+.fi-global-search-no-results-message {
+    @apply px-4 py-4 text-sm text-gray-500 dark:text-gray-400;
+}
+
+.fi-global-search-results {
+    @apply divide-y divide-gray-200 dark:divide-white/10;
+}
+
+.fi-global-search-result-group-header {
+    @apply sticky top-0 z-10 border-b border-gray-200 bg-gray-50 px-4 py-2 text-sm font-semibold text-gray-950 capitalize dark:border-white/10 dark:bg-gray-800 dark:text-white;
+}
+
+.fi-global-search-result-group-results {
+    @apply divide-y divide-gray-200 dark:divide-white/10;
+}
+
+.fi-global-search-result {
+    @apply scroll-mt-9 transition duration-75 focus-within:bg-gray-50 hover:bg-gray-50 dark:focus-within:bg-white/5 dark:hover:bg-white/5;
+
+    &.fi-global-search-result-has-actions {
+        & .fi-global-search-result-link {
+            @apply pb-0;
+        }
+    }
+}
+
+.fi-global-search-result-link {
+    @apply block p-4 outline-hidden;
+}
+
+.fi-global-search-result-heading {
+    @apply text-sm font-medium text-gray-950 dark:text-white;
+}
+
+.fi-global-search-result-details {
+    @apply mt-1;
+}
+
+.fi-global-search-result-detail {
+    @apply text-sm text-gray-500 dark:text-gray-400;
+}
+
+.fi-global-search-result-detail-label {
+    @apply inline font-medium;
+}
+
+.fi-global-search-result-detail-value {
+    @apply inline;
+}
+
+.fi-global-search-result-actions {
+    @apply mt-3 flex gap-x-3 px-4 pb-4;
+}

package/resources/filament/packages/panels/resources/css/components/header.css

@@ -0,0 +1,56 @@
+.fi-header {
+    @apply flex flex-col gap-4 sm:flex-row sm:flex-wrap sm:items-center sm:justify-between;
+
+    & .fi-breadcrumbs {
+        @apply mb-2 hidden sm:block;
+    }
+
+    & > div:first-child:not(.fi-header-actions-ctn) {
+        @apply max-w-full sm:w-max;
+    }
+
+    &.fi-header-has-subheading {
+        & .fi-header-actions-ctn {
+            @apply sm:self-center;
+        }
+    }
+}
+
+.fi-header-heading {
+    @apply text-2xl font-bold tracking-tight text-gray-950 sm:text-3xl dark:text-white;
+}
+
+.fi-header-subheading {
+    @apply mt-2 max-w-2xl text-lg text-gray-600 dark:text-gray-400;
+}
+
+.fi-header-actions-ctn {
+    @apply flex max-w-full shrink-0 items-center gap-3 sm:self-end;
+
+    & > .fi-ac {
+        @apply flex-1;
+
+        &:not(.fi-width-full) {
+            &.fi-align-end,
+            &.fi-align-right {
+                @apply flex-row justify-end;
+            }
+        }
+    }
+}
+
+.fi-simple-header {
+    @apply flex flex-col items-center;
+
+    & .fi-logo {
+        @apply mb-4 text-center leading-6 text-balance;
+    }
+}
+
+.fi-simple-header-heading {
+    @apply text-center text-2xl font-bold tracking-tight text-gray-950 dark:text-white;
+}
+
+.fi-simple-header-subheading {
+    @apply mt-2 text-center text-sm text-gray-500 dark:text-gray-400;
+}