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

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

@@ -0,0 +1,182 @@
+html.fi {
+    @apply min-h-dvh;
+}
+
+.fi-body {
+    @apply min-h-dvh bg-gray-50 font-normal text-gray-950 antialiased dark:bg-gray-950 dark:text-white;
+
+    &.fi-body-has-sidebar-collapsible-on-desktop,
+    &.fi-body-has-sidebar-fully-collapsible-on-desktop {
+        & .fi-main-ctn {
+            @apply min-h-[calc(100dvh-var(--topbar-height))] opacity-0 transition-all;
+        }
+    }
+
+    & > .fi-layout-sidebar-toggle-btn-ctn {
+        @apply ps-5 pt-5;
+
+        &.lg\:fi-hidden {
+            @apply lg:hidden;
+        }
+    }
+
+    &.fi-body-has-navigation:not(
+            .fi-body-has-sidebar-collapsible-on-desktop
+        ):not(.fi-body-has-sidebar-fully-collapsible-on-desktop):not(
+            .fi-body-has-top-navigation
+        ) {
+        & .fi-main-ctn {
+            @apply opacity-0;
+        }
+    }
+
+    &.fi-body-has-top-navigation,
+    &:not(.fi-body-has-navigation) {
+        & .fi-main-ctn {
+            @apply flex min-h-[calc(100dvh-var(--topbar-height))];
+        }
+    }
+
+    &:not(.fi-body-has-topbar) {
+        & .fi-main-ctn {
+            @apply flex min-h-dvh;
+        }
+    }
+}
+
+.fi-layout {
+    @apply flex h-full w-full overflow-x-clip;
+}
+
+.fi-main-ctn {
+    @apply min-w-0 flex-1 flex-col;
+}
+
+.fi-main {
+    @apply mx-auto h-full w-full px-4 md:px-6 lg:px-8;
+}
+
+.fi-main,
+.fi-simple-main {
+    @apply outline-none;
+
+    &.fi-width-3xs {
+        @apply max-w-3xs;
+    }
+
+    &.fi-width-2xs {
+        @apply max-w-2xs;
+    }
+
+    &.fi-width-xs {
+        @apply max-w-xs;
+    }
+
+    &.fi-width-sm {
+        @apply max-w-sm;
+    }
+
+    &.fi-width-md {
+        @apply max-w-md;
+    }
+
+    &.fi-width-lg {
+        @apply max-w-lg;
+    }
+
+    &.fi-width-xl {
+        @apply max-w-xl;
+    }
+
+    &.fi-width-2xl {
+        @apply max-w-2xl;
+    }
+
+    &.fi-width-3xl {
+        @apply max-w-3xl;
+    }
+
+    &.fi-width-4xl {
+        @apply max-w-4xl;
+    }
+
+    &.fi-width-5xl {
+        @apply max-w-5xl;
+    }
+
+    &.fi-width-6xl {
+        @apply max-w-6xl;
+    }
+
+    &.fi-width-7xl {
+        @apply max-w-7xl;
+    }
+
+    &.fi-width-none {
+        @apply max-w-none;
+    }
+
+    &.fi-width-full {
+        @apply max-w-full;
+    }
+
+    &.fi-width-min {
+        @apply max-w-min;
+    }
+
+    &.fi-width-max {
+        @apply max-w-max;
+    }
+
+    &.fi-width-fit {
+        @apply max-w-fit;
+    }
+
+    &.fi-width-prose {
+        @apply max-w-prose;
+    }
+
+    &.fi-width-container {
+        @apply container;
+    }
+
+    &.fi-width-screen-sm {
+        @apply max-w-screen-sm;
+    }
+
+    &.fi-width-screen-md {
+        @apply max-w-screen-md;
+    }
+
+    &.fi-width-screen-lg {
+        @apply max-w-screen-lg;
+    }
+
+    &.fi-width-screen-xl {
+        @apply max-w-screen-xl;
+    }
+
+    &.fi-width-screen-2xl {
+        @apply max-w-screen-2xl;
+    }
+
+    &.fi-width-screen {
+        @apply fixed inset-0;
+    }
+}
+
+.fi-simple-layout {
+    @apply flex min-h-dvh flex-col items-center;
+}
+
+.fi-simple-layout-header {
+    @apply absolute end-0 top-0 flex h-16 items-center gap-x-4 pe-4 md:pe-6 lg:pe-8;
+}
+
+.fi-simple-main-ctn {
+    @apply flex w-full grow items-center justify-center;
+}
+
+.fi-simple-main {
+    @apply my-16 w-full bg-white px-6 py-12 shadow-xs ring-1 ring-gray-950/5 sm:rounded-xl sm:px-12 dark:bg-gray-900 dark:ring-white/10;
+}

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

@@ -0,0 +1,11 @@
+.fi-logo {
+    @apply flex text-xl leading-5 font-bold tracking-tight text-gray-950 dark:text-white;
+
+    &.fi-logo-light {
+        @apply dark:hidden;
+    }
+
+    &.fi-logo-dark {
+        @apply hidden dark:flex;
+    }
+}

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

@@ -0,0 +1,60 @@
+.fi-page-sub-navigation-dropdown {
+    @apply md:hidden;
+
+    & > .fi-dropdown-trigger > .fi-btn {
+        @apply w-full justify-between;
+    }
+}
+
+.fi-page-sub-navigation-sidebar-ctn {
+    @apply hidden w-72 flex-col md:flex;
+}
+
+.fi-page-sub-navigation-sidebar {
+    @apply flex flex-col gap-y-7;
+}
+
+.fi-page-sub-navigation-tabs {
+    @apply hidden md:flex;
+}
+
+.fi-page {
+    &.fi-height-full {
+        @apply h-full;
+
+        & .fi-page-main,
+        & .fi-page-header-main-ctn,
+        & .fi-page-content {
+            @apply h-full;
+        }
+    }
+
+    &.fi-page-has-sub-navigation {
+        & .fi-page-main {
+            @apply flex flex-col gap-8;
+        }
+
+        &.fi-page-has-sub-navigation-start,
+        &.fi-page-has-sub-navigation-end {
+            & .fi-page-main {
+                @apply md:flex-row md:items-start;
+            }
+        }
+    }
+}
+
+.fi-page-header-main-ctn {
+    @apply flex flex-col gap-y-8 py-8;
+}
+
+.fi-page-main-sub-navigation-mobile-menu-render-hook-ctn {
+    @apply contents md:hidden;
+}
+
+.fi-page-content {
+    @apply grid flex-1 auto-cols-fr gap-y-8;
+}
+
+.fi-simple-page-content {
+    @apply grid auto-cols-fr gap-y-6;
+}

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

@@ -0,0 +1,311 @@
+.fi-sidebar-group {
+    @apply flex flex-col gap-y-1;
+
+    &.fi-collapsed {
+        & .fi-sidebar-group-collapse-btn {
+            @apply -rotate-180;
+        }
+    }
+
+    &.fi-collapsible > .fi-sidebar-group-btn {
+        @apply cursor-pointer;
+    }
+
+    &.fi-active {
+        & .fi-sidebar-group-dropdown-trigger-btn {
+            & .fi-icon {
+                @apply text-primary-600 dark:text-primary-400;
+            }
+        }
+    }
+}
+
+.fi-sidebar-group-btn {
+    @apply flex items-center gap-x-3 p-2;
+
+    & .fi-icon {
+        @apply text-gray-400 dark:text-gray-500;
+    }
+}
+
+.fi-sidebar-group-label {
+    @apply flex-1 text-sm leading-6 font-medium text-gray-500 dark:text-gray-400;
+}
+
+.fi-sidebar-group-dropdown-trigger-btn {
+    @apply relative flex flex-1 items-center justify-center gap-x-3 rounded-lg p-2 outline-hidden transition duration-75 hover:bg-gray-100 focus-visible:bg-gray-100 dark:hover:bg-white/5 dark:focus-visible:bg-white/5;
+
+    & .fi-icon {
+        @apply text-gray-400 dark:text-gray-500;
+    }
+}
+
+.fi-sidebar-group-items {
+    @apply flex flex-col gap-y-1;
+}
+
+.fi-sidebar-group-btn,
+.fi-sidebar-group-items {
+    &.fi-transition-enter {
+        @apply delay-100 lg:transition;
+    }
+
+    &.fi-transition-enter-start {
+        @apply opacity-0;
+    }
+
+    &.fi-transition-enter-end {
+        @apply opacity-100;
+    }
+}
+
+.fi-sidebar {
+    --sidebar-footer-margin-x: calc(var(--spacing) * 4);
+
+    @apply fixed inset-y-0 start-0 z-30 flex h-dvh flex-col content-start bg-white transition-all lg:z-20 lg:bg-transparent lg:transition-none dark:bg-gray-900 dark:lg:bg-transparent;
+
+    &.fi-sidebar-open {
+        @apply w-(--sidebar-width) translate-x-0 shadow-xl ring-1 ring-gray-950/5 lg:shadow-none lg:ring-0 rtl:-translate-x-0 dark:ring-white/10;
+    }
+
+    &:not(.fi-sidebar-open) {
+        @apply -translate-x-full rtl:translate-x-full;
+    }
+}
+
+.fi-body-has-topbar .fi-sidebar {
+    @apply lg:top-(--topbar-height) lg:h-[calc(100dvh-var(--topbar-height))];
+}
+
+.fi-sidebar-close-overlay {
+    @apply fixed inset-0 z-30 bg-gray-950/50 transition duration-500 lg:hidden dark:bg-gray-950/75;
+}
+
+.fi-body {
+    &.fi-body-has-top-navigation {
+        & .fi-sidebar {
+            @apply lg:-translate-x-full lg:rtl:translate-x-full;
+        }
+    }
+
+    &:not(.fi-body-has-top-navigation) {
+        & .fi-sidebar {
+            &.fi-sidebar-open {
+                @apply lg:sticky;
+            }
+        }
+
+        &.fi-body-has-sidebar-collapsible-on-desktop {
+            & .fi-sidebar {
+                &:not(.fi-sidebar-open) {
+                    @apply lg:sticky lg:w-(--sidebar-collapsed-width) lg:translate-x-0 lg:rtl:-translate-x-0;
+
+                    & .fi-sidebar-database-notifications-btn,
+                    & .fi-sidebar-group-dropdown-trigger-btn,
+                    & .fi-sidebar-item-btn,
+                    & .fi-user-menu-trigger {
+                        @apply lg:px-0;
+                    }
+
+                    & .fi-sidebar-nav {
+                        @apply lg:[scrollbar-gutter:stable_both-edges] lg:px-0;
+                    }
+
+                    & .fi-sidebar-nav-groups {
+                        @apply lg:mx-auto lg:w-full lg:max-w-10;
+                    }
+                }
+            }
+        }
+
+        &:not(.fi-body-has-sidebar-collapsible-on-desktop):not(
+                .fi-body-has-sidebar-fully-collapsible-on-desktop
+            ) {
+            & .fi-sidebar {
+                @apply lg:translate-x-0 lg:rtl:-translate-x-0;
+
+                &:not(.fi-sidebar-open) {
+                    @apply w-(--sidebar-width) lg:sticky;
+                }
+            }
+        }
+    }
+}
+
+.fi-sidebar-header-ctn {
+    @apply overflow-x-clip;
+}
+
+.fi-sidebar-header {
+    @apply flex h-(--topbar-height) items-center justify-center;
+}
+
+.fi-sidebar-header-logo-ctn {
+    @apply flex-1;
+}
+
+.fi-body-has-topbar .fi-sidebar-header {
+    @apply bg-white px-6 ring-1 ring-gray-950/5 lg:hidden lg:shadow-xs dark:bg-gray-900 dark:ring-white/10;
+}
+
+:not(.fi-body-has-topbar) .fi-sidebar-header {
+    @apply bg-transparent px-4 shadow-none ring-0;
+
+    .fi-logo {
+        @apply ms-3;
+    }
+}
+
+.fi-sidebar-header-controls {
+    @apply flex shrink-0 flex-col after:mx-4 after:mt-3 after:border-t after:border-gray-950/5 after:content-[''] dark:after:border-white/10;
+}
+
+.fi-sidebar-nav {
+    @apply flex grow flex-col gap-y-7 overflow-x-hidden overflow-y-auto px-6 py-8;
+    scrollbar-gutter: stable;
+}
+
+.fi-sidebar-nav-groups {
+    @apply -mx-2 flex flex-col gap-y-7;
+}
+
+.fi-sidebar-item {
+    &.fi-active,
+    &.fi-sidebar-item-has-active-child-items {
+        @apply flex flex-col gap-y-1;
+    }
+
+    &.fi-active {
+        & > .fi-sidebar-item-btn {
+            @apply bg-gray-100 dark:bg-white/5;
+
+            & > .fi-icon {
+                @apply text-primary-700 dark:text-primary-400;
+            }
+
+            &
+                > .fi-sidebar-item-grouped-border
+                > .fi-sidebar-item-grouped-border-part {
+                @apply bg-primary-700 dark:bg-primary-400;
+            }
+
+            & > .fi-sidebar-item-label {
+                @apply text-primary-700 dark:text-primary-400;
+            }
+
+            .fi-sidebar-item-grouped-border-part {
+                @apply relative h-1.5 w-1.5 rounded-full;
+            }
+        }
+    }
+
+    &.fi-sidebar-item-has-url {
+        & > .fi-sidebar-item-btn {
+            @apply hover:bg-gray-100 focus-visible:bg-gray-100 dark:hover:bg-white/5 dark:focus-visible:bg-white/5;
+        }
+    }
+}
+
+.fi-sidebar-item-btn {
+    @apply relative flex items-center justify-center gap-x-3 rounded-lg p-2 outline-hidden transition duration-75;
+
+    & > .fi-icon {
+        @apply shrink-0 text-gray-400 dark:text-gray-500;
+    }
+}
+
+.fi-sidebar-item-grouped-border {
+    @apply relative flex size-6 items-center justify-center;
+}
+
+.fi-sidebar-item-grouped-border-part-not-first {
+    @apply absolute -top-1/2 bottom-1/2 w-px bg-gray-300 dark:bg-gray-600;
+}
+
+.fi-sidebar-item-grouped-border-part-not-last {
+    @apply absolute top-1/2 -bottom-1/2 w-px bg-gray-300 dark:bg-gray-600;
+}
+
+.fi-sidebar-item-grouped-border-part {
+    @apply relative h-1.5 w-1.5 rounded-full bg-gray-400 dark:bg-gray-500;
+}
+
+.fi-sidebar-item-label {
+    @apply flex-1 truncate text-sm font-medium text-gray-700 dark:text-gray-200;
+}
+
+.fi-sidebar-item-label,
+.fi-sidebar-item-badge-ctn {
+    &.fi-transition-enter {
+        @apply lg:transition lg:delay-100;
+    }
+
+    &.fi-transition-enter-start {
+        @apply opacity-0;
+    }
+
+    &.fi-transition-enter-end {
+        @apply opacity-100;
+    }
+}
+
+.fi-sidebar-footer {
+    @apply mx-(--sidebar-footer-margin-x) mb-3 grid gap-y-3 border-t border-gray-950/5 pt-3 dark:border-white/10;
+
+    & > .fi-no-database {
+        @apply block;
+    }
+}
+
+.fi-sidebar-sub-group-items {
+    @apply flex flex-col gap-y-1;
+}
+
+.fi-sidebar-database-notifications-btn {
+    @apply relative flex w-full items-center justify-center gap-x-3 rounded-lg p-2 text-start outline-hidden transition duration-75 hover:bg-gray-100 focus-visible:bg-gray-100 dark:hover:bg-white/5 dark:focus-visible:bg-white/5;
+
+    & > .fi-icon {
+        @apply text-gray-400 dark:text-gray-500;
+    }
+
+    & > .fi-sidebar-database-notifications-btn-label {
+        @apply flex-1 truncate text-sm font-medium text-gray-700 dark:text-gray-200;
+    }
+
+    & > .fi-sidebar-database-notifications-btn-label,
+    & > .fi-sidebar-database-notifications-btn-badge-ctn {
+        &.fi-transition-enter {
+            @apply lg:transition lg:delay-100;
+        }
+
+        &.fi-transition-enter-start {
+            @apply opacity-0;
+        }
+
+        &.fi-transition-enter-end {
+            @apply opacity-100;
+        }
+    }
+}
+
+.fi-sidebar-open-sidebar-btn,
+.fi-sidebar-open-collapse-sidebar-btn {
+    @apply mx-0!;
+}
+
+.fi-sidebar-close-collapse-sidebar-btn {
+    @apply mx-0! hidden lg:flex;
+}
+
+.fi-body {
+    &.fi-body-has-sidebar-collapsible-on-desktop,
+    &:not(.fi-body-has-sidebar-fully-collapsible-on-desktop) {
+        & .fi-sidebar-open-sidebar-btn {
+            @apply lg:hidden;
+        }
+    }
+}
+
+.fi-sidebar-close-sidebar-btn {
+    @apply mx-0! lg:hidden;
+}

package/resources/filament/packages/panels/resources/css/components/tenant-menu.css

@@ -0,0 +1,49 @@
+.fi-tenant-menu-trigger {
+    @apply flex w-full items-center justify-center gap-x-3 rounded-lg p-2 text-sm font-medium outline-hidden transition duration-75 hover:bg-gray-100 focus-visible:bg-gray-100 dark:hover:bg-white/5 dark:focus-visible:bg-white/5;
+
+    & .fi-tenant-avatar {
+        @apply max-w-none shrink-0;
+    }
+
+    & .fi-icon {
+        @apply ms-auto size-5 shrink-0 text-gray-400 transition duration-75 group-hover:text-gray-500 group-focus-visible:text-gray-500 dark:text-gray-500 dark:group-hover:text-gray-400 dark:group-focus-visible:text-gray-400;
+    }
+
+    &:hover {
+        & .fi-icon {
+            @apply text-gray-500 dark:text-gray-400;
+        }
+    }
+
+    &:focus-visible {
+        & .fi-icon {
+            @apply text-gray-500 dark:text-gray-400;
+        }
+    }
+}
+
+.fi-tenant-menu-trigger-text {
+    @apply grid justify-items-start text-start;
+}
+
+.fi-tenant-menu-trigger-current-tenant-label {
+    @apply text-xs text-gray-500 dark:text-gray-400;
+}
+
+.fi-tenant-menu-trigger-tenant-name {
+    @apply text-gray-950 dark:text-white;
+}
+
+.fi-tenant-menu-item {
+    @apply min-w-0;
+
+    & .fi-dropdown-list-item-image {
+        @apply rounded-sm;
+    }
+}
+
+.fi-sidebar {
+    & .fi-tenant-menu {
+        @apply mx-4 mt-3;
+    }
+}

package/resources/filament/packages/panels/resources/css/components/theme-switcher.css

@@ -0,0 +1,15 @@
+.fi-theme-switcher {
+    @apply grid grid-flow-col gap-x-1;
+}
+
+.fi-theme-switcher-btn {
+    @apply focus-visible:ring-primary-600 dark:focus-visible:ring-primary-500 flex justify-center rounded-md p-2 outline-hidden transition duration-75 hover:bg-gray-50 focus-visible:bg-gray-50 focus-visible:ring-2 dark:hover:bg-white/5 dark:focus-visible:bg-white/5;
+
+    &.fi-active {
+        @apply text-primary-500 dark:text-primary-400 bg-gray-50 dark:bg-white/5;
+    }
+
+    &:not(.fi-active) {
+        @apply text-gray-400 hover:text-gray-500 focus-visible:text-gray-500 dark:text-gray-500 dark:hover:text-gray-400 dark:focus-visible:text-gray-400;
+    }
+}

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

@@ -0,0 +1,89 @@
+.fi-body {
+    --topbar-height: 4rem;
+}
+
+.fi-topbar-ctn {
+    @apply sticky top-0 z-30 overflow-x-clip;
+}
+
+.fi-topbar {
+    @apply flex min-h-(--topbar-height) items-center bg-white px-4 shadow-xs ring-1 ring-gray-950/5 dark:bg-gray-900 dark:ring-white/10;
+
+    & .fi-tenant-menu {
+        @apply hidden lg:block;
+    }
+}
+
+.fi-topbar-open-sidebar-btn,
+.fi-topbar-close-sidebar-btn {
+    @apply ms-0! me-4! lg:me-0!;
+}
+
+.fi-topbar-close-sidebar-btn {
+    @apply lg:hidden;
+}
+
+.fi-topbar-open-collapse-sidebar-btn {
+    @apply mx-0!;
+}
+
+.fi-topbar-close-collapse-sidebar-btn {
+    @apply mx-0! hidden lg:flex;
+}
+
+.fi-topbar-start {
+    @apply me-6 hidden items-center lg:flex;
+
+    & .fi-logo {
+        @apply ms-3;
+    }
+}
+
+.fi-topbar-collapse-sidebar-btn-ctn {
+    @apply w-9 shrink-0;
+}
+
+.fi-body {
+    &.fi-body-has-sidebar-collapsible-on-desktop,
+    &:not(.fi-body-has-sidebar-fully-collapsible-on-desktop) {
+        & .fi-topbar-open-sidebar-btn {
+            @apply lg:hidden;
+        }
+    }
+}
+
+.fi-topbar-nav-groups {
+    @apply ms-4 me-4 hidden items-center gap-x-4 lg:my-2 lg:flex lg:flex-wrap lg:gap-y-1;
+}
+
+.fi-topbar-end {
+    @apply ms-auto flex items-center gap-x-4;
+}
+
+.fi-topbar-item-btn {
+    @apply flex items-center justify-center gap-x-2 rounded-lg px-3 py-2 outline-hidden transition duration-75 hover:bg-gray-50 focus-visible:bg-gray-50 dark:hover:bg-white/5 dark:focus-visible:bg-white/5;
+
+    & > .fi-icon {
+        @apply text-gray-400 dark:text-gray-500;
+    }
+}
+
+.fi-topbar-item-label {
+    @apply text-sm font-medium text-gray-700 dark:text-gray-200;
+}
+
+.fi-topbar-item {
+    &.fi-active {
+        & .fi-topbar-item-btn {
+            @apply bg-gray-50 dark:bg-white/5;
+
+            & > .fi-icon {
+                @apply text-primary-600 dark:text-primary-400;
+            }
+        }
+
+        & .fi-topbar-item-label {
+            @apply text-primary-600 dark:text-primary-400;
+        }
+    }
+}