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

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

@@ -0,0 +1,46 @@
+.fi-simple-user-menu-ctn {
+    @apply flex items-center gap-x-4;
+}
+
+.fi-topbar .fi-user-menu-trigger {
+    @apply shrink-0;
+}
+
+.fi-sidebar .fi-user-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;
+
+    & .fi-user-avatar {
+        @apply 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-user-menu-trigger-text {
+        @apply grid justify-items-start text-start text-gray-950 dark:text-white;
+    }
+}
+
+.fi-sidebar {
+    & .fi-user-menu {
+        & .fi-dropdown-panel {
+            max-width: max(
+                14rem,
+                calc(100% - var(--sidebar-footer-margin-x) * 2)
+            ) !important;
+        }
+    }
+}

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

@@ -0,0 +1,40 @@
+@import '../../../support/resources/css/index.css';
+@import '../../../actions/resources/css/index.css';
+@import '../../../forms/resources/css/index.css';
+@import '../../../infolists/resources/css/index.css';
+@import '../../../notifications/resources/css/index.css';
+@import '../../../schemas/resources/css/index.css';
+@import '../../../tables/resources/css/index.css';
+@import '../../../widgets/resources/css/index.css';
+
+@import './base.css' layer(base);
+
+@import './components/global-search.css' layer(components);
+@import './components/header.css' layer(components);
+@import './components/layout.css' layer(components);
+@import './components/logo.css' layer(components);
+@import './components/page.css' layer(components);
+@import './components/sidebar.css' layer(components);
+@import './components/tenant-menu.css' layer(components);
+@import './components/theme-switcher.css' layer(components);
+@import './components/topbar.css' layer(components);
+@import './components/user-menu.css' layer(components);
+@import './widgets/account-widget.css' layer(components);
+@import './widgets/filament-info-widget.css' layer(components);
+
+@import './utilities.css' layer(utilities);
+
+@variant dark (&:where(.dark, .dark *));
+
+@theme inline {
+    --font-mono:
+        var(--font-family-mono), ui-monospace, SFMono-Regular, Menlo, Monaco,
+        Consolas, 'Liberation Mono', 'Courier New', monospace;
+    --font-sans:
+        var(--font-family), ui-sans-serif, system-ui, sans-serif,
+        'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
+        'Noto Color Emoji';
+    --font-serif:
+        var(--font-family-serif), ui-serif, Georgia, Cambria, 'Times New Roman',
+        Times, serif;
+}

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

@@ -0,0 +1,2 @@
+@import 'tailwindcss' source(none);
+@import './index.css';

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

@@ -0,0 +1,3 @@
+.fi-skip-link:focus {
+    @apply ring-primary-600 not-sr-only fixed start-4 top-4 z-50 rounded-lg bg-white px-4 py-2 text-sm font-medium text-gray-950 shadow-lg ring-2 outline-none dark:bg-gray-900 dark:text-white;
+}

package/resources/filament/packages/panels/resources/css/widgets/account-widget.css

@@ -0,0 +1,21 @@
+.fi-account-widget {
+    & .fi-section-content {
+        @apply flex items-center gap-x-3;
+    }
+}
+
+.fi-account-widget-logout-form {
+    @apply my-auto;
+}
+
+.fi-account-widget-main {
+    @apply flex-1;
+}
+
+.fi-account-widget-heading {
+    @apply grid flex-1 text-base leading-6 font-semibold text-gray-950 dark:text-white;
+}
+
+.fi-account-widget-user-name {
+    @apply text-sm text-gray-500 dark:text-gray-400;
+}

package/resources/filament/packages/panels/resources/css/widgets/filament-info-widget.css

@@ -0,0 +1,21 @@
+.fi-filament-info-widget {
+    & .fi-section-content {
+        @apply flex items-center gap-x-3;
+    }
+}
+
+.fi-filament-info-widget-main {
+    @apply flex-1;
+}
+
+.fi-filament-info-widget-logo {
+    @apply h-5 text-gray-950 dark:text-white;
+}
+
+.fi-filament-info-widget-version {
+    @apply mt-2 text-xs text-gray-500 dark:text-gray-400;
+}
+
+.fi-filament-info-widget-links {
+    @apply flex flex-col items-end gap-y-1;
+}

package/resources/filament/packages/schemas/resources/css/components/actions.css

@@ -0,0 +1,29 @@
+.fi-sc-actions {
+    @apply flex h-full flex-col gap-2;
+
+    & .fi-sc-actions-label-ctn {
+        @apply flex items-center gap-x-3;
+
+        & .fi-sc-actions-label {
+            @apply text-sm leading-6 font-medium text-gray-950 dark:text-white;
+        }
+    }
+
+    &.fi-sticky {
+        & .fi-ac {
+            @apply fixed bottom-0 -mx-4 w-full transform bg-white p-4 shadow-lg ring-1 ring-gray-950/5 transition md:bottom-4 md:rounded-xl dark:bg-gray-900 dark:ring-white/10;
+        }
+    }
+
+    &.fi-vertical-align-start {
+        @apply justify-start;
+    }
+
+    &.fi-vertical-align-center {
+        @apply justify-center;
+    }
+
+    &.fi-vertical-align-end {
+        @apply justify-end;
+    }
+}

package/resources/filament/packages/schemas/resources/css/components/flex.css

@@ -0,0 +1,106 @@
+.fi-sc-flex {
+    @apply flex gap-6;
+
+    &.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-between,
+    &.fi-align-justify {
+        @apply justify-between;
+    }
+
+    &.fi-dense {
+        @apply gap-3;
+    }
+
+    & > .fi-hidden {
+        @apply hidden;
+    }
+
+    & > .fi-growable {
+        @apply w-full flex-1;
+    }
+
+    &.fi-from-default {
+        @apply items-start;
+
+        &.fi-vertical-align-center {
+            @apply items-center;
+        }
+
+        &.fi-vertical-align-end {
+            @apply items-end;
+        }
+    }
+
+    &.fi-from-sm {
+        @apply flex-col sm:flex-row sm:items-start;
+
+        &.fi-vertical-align-center {
+            @apply sm:items-center;
+        }
+
+        &.fi-vertical-align-end {
+            @apply sm:items-end;
+        }
+    }
+
+    &.fi-from-md {
+        @apply flex-col md:flex-row md:items-start;
+
+        &.fi-vertical-align-center {
+            @apply md:items-center;
+        }
+
+        &.fi-vertical-align-end {
+            @apply md:items-end;
+        }
+    }
+
+    &.fi-from-lg {
+        @apply flex-col lg:flex-row lg:items-start;
+
+        &.fi-vertical-align-center {
+            @apply lg:items-center;
+        }
+
+        &.fi-vertical-align-end {
+            @apply lg:items-end;
+        }
+    }
+
+    &.fi-from-xl {
+        @apply flex-col xl:flex-row xl:items-start;
+
+        &.fi-vertical-align-center {
+            @apply xl:items-center;
+        }
+
+        &.fi-vertical-align-end {
+            @apply xl:items-end;
+        }
+    }
+
+    &.fi-from-2xl {
+        @apply flex-col 2xl:flex-row 2xl:items-start;
+
+        &.fi-vertical-align-center {
+            @apply 2xl:items-center;
+        }
+
+        &.fi-vertical-align-end {
+            @apply 2xl:items-end;
+        }
+    }
+}

package/resources/filament/packages/schemas/resources/css/components/form.css

@@ -0,0 +1,7 @@
+.fi-sc-form {
+    @apply flex flex-col gap-6;
+
+    &.fi-dense {
+        @apply gap-3;
+    }
+}

package/resources/filament/packages/schemas/resources/css/components/fused-group.css

@@ -0,0 +1,337 @@
+.fi-sc-fused-group {
+    & > .fi-sc {
+        @apply focus-within:ring-primary-600 dark:focus-within:ring-primary-500 shadow-sm ring-1 ring-gray-950/10 focus-within:ring-2 dark:ring-white/20;
+    }
+
+    & .fi-sc {
+        @apply divide-y divide-gray-950/10 rounded-lg dark:divide-white/20;
+
+        & .fi-sc-component {
+            @apply min-h-full;
+
+            & .fi-fo-field {
+                @apply min-h-full;
+            }
+
+            & .fi-input {
+                @apply min-h-full;
+            }
+
+            & .fi-sc-actions {
+                @apply px-3 py-2;
+            }
+        }
+
+        & > :first-child .fi-input-wrp {
+            @apply rounded-t-lg;
+        }
+
+        & > :last-child .fi-input-wrp {
+            @apply rounded-b-lg;
+        }
+
+        &.fi-grid-cols {
+            @apply divide-x divide-y-0;
+
+            & > :first-child .fi-input-wrp {
+                @apply rounded-se-none rounded-es-lg;
+            }
+
+            & > :last-child .fi-input-wrp {
+                @apply rounded-se-lg rounded-es-none;
+            }
+        }
+
+        &.sm\:fi-grid-cols {
+            @apply sm:divide-x sm:divide-y-0;
+
+            & > :first-child .fi-input-wrp {
+                @apply sm:rounded-se-none sm:rounded-es-lg;
+            }
+
+            & > :last-child .fi-input-wrp {
+                @apply sm:rounded-se-lg sm:rounded-es-none;
+            }
+        }
+
+        &.md\:fi-grid-cols {
+            @apply md:divide-x md:divide-y-0;
+
+            & > :first-child .fi-input-wrp {
+                @apply md:rounded-se-none md:rounded-es-lg;
+            }
+
+            & > :last-child .fi-input-wrp {
+                @apply md:rounded-se-lg md:rounded-es-none;
+            }
+        }
+
+        &.lg\:fi-grid-cols {
+            @apply lg:divide-x lg:divide-y-0;
+
+            & > :first-child .fi-input-wrp {
+                @apply lg:rounded-se-none lg:rounded-es-lg;
+            }
+
+            & > :last-child .fi-input-wrp {
+                @apply lg:rounded-se-lg lg:rounded-es-none;
+            }
+        }
+
+        &.xl\:fi-grid-cols {
+            @apply xl:divide-x xl:divide-y-0;
+
+            & > :first-child .fi-input-wrp {
+                @apply xl:rounded-se-none xl:rounded-es-lg;
+            }
+
+            & > :last-child .fi-input-wrp {
+                @apply xl:rounded-se-lg xl:rounded-es-none;
+            }
+        }
+
+        &.\32xl\:fi-grid-cols {
+            @apply 2xl:divide-x 2xl:divide-y-0;
+
+            & > :first-child .fi-input-wrp {
+                @apply 2xl:rounded-se-none 2xl:rounded-es-lg;
+            }
+
+            & > :last-child .fi-input-wrp {
+                @apply 2xl:rounded-se-lg 2xl:rounded-es-none;
+            }
+        }
+
+        @supports (container-type: inline-size) {
+            &.\@3xs\:fi-grid-cols {
+                @apply @3xs:divide-x @3xs:divide-y-0;
+
+                & > :first-child .fi-input-wrp {
+                    @apply @3xs:rounded-se-none @3xs:rounded-es-lg;
+                }
+
+                & > :last-child .fi-input-wrp {
+                    @apply @3xs:rounded-se-lg @3xs:rounded-es-none;
+                }
+            }
+
+            &.\@2xs\:fi-grid-cols {
+                @apply @2xs:divide-x @2xs:divide-y-0;
+
+                & > :first-child .fi-input-wrp {
+                    @apply @2xs:rounded-se-none @2xs:rounded-es-lg;
+                }
+
+                & > :last-child .fi-input-wrp {
+                    @apply @2xs:rounded-se-lg @2xs:rounded-es-none;
+                }
+            }
+
+            &.\@xs\:fi-grid-cols {
+                @apply @xs:divide-x @xs:divide-y-0;
+
+                & > :first-child .fi-input-wrp {
+                    @apply @xs:rounded-se-none @xs:rounded-es-lg;
+                }
+
+                & > :last-child .fi-input-wrp {
+                    @apply @xs:rounded-se-lg @xs:rounded-es-none;
+                }
+            }
+
+            &.\@sm\:fi-grid-cols {
+                @apply @sm:divide-x @sm:divide-y-0;
+
+                & > :first-child .fi-input-wrp {
+                    @apply @sm:rounded-se-none @sm:rounded-es-lg;
+                }
+
+                & > :last-child .fi-input-wrp {
+                    @apply @sm:rounded-se-lg @sm:rounded-es-none;
+                }
+            }
+
+            &.\@md\:fi-grid-cols {
+                @apply @md:divide-x @md:divide-y-0;
+
+                & > :first-child .fi-input-wrp {
+                    @apply @md:rounded-se-none @md:rounded-es-lg;
+                }
+
+                & > :last-child .fi-input-wrp {
+                    @apply @md:rounded-se-lg @md:rounded-es-none;
+                }
+            }
+
+            &.\@lg\:fi-grid-cols {
+                @apply @lg:divide-x @lg:divide-y-0;
+
+                & > :first-child .fi-input-wrp {
+                    @apply @lg:rounded-se-none @lg:rounded-es-lg;
+                }
+
+                & > :last-child .fi-input-wrp {
+                    @apply @lg:rounded-se-lg @lg:rounded-es-none;
+                }
+            }
+
+            &.\@xl\:fi-grid-cols {
+                @apply @xl:divide-x @xl:divide-y-0;
+
+                & > :first-child .fi-input-wrp {
+                    @apply @xl:rounded-se-none @xl:rounded-es-lg;
+                }
+
+                & > :last-child .fi-input-wrp {
+                    @apply @xl:rounded-se-lg @xl:rounded-es-none;
+                }
+            }
+
+            &.\@2xl\:fi-grid-cols {
+                @apply @2xl:divide-x @2xl:divide-y-0;
+
+                & > :first-child .fi-input-wrp {
+                    @apply @2xl:rounded-se-none @2xl:rounded-es-lg;
+                }
+
+                & > :last-child .fi-input-wrp {
+                    @apply @2xl:rounded-se-lg @2xl:rounded-es-none;
+                }
+            }
+
+            &.\@3xl\:fi-grid-cols {
+                @apply @3xl:divide-x @3xl:divide-y-0;
+
+                & > :first-child .fi-input-wrp {
+                    @apply @3xl:rounded-se-none @3xl:rounded-es-lg;
+                }
+
+                & > :last-child .fi-input-wrp {
+                    @apply @3xl:rounded-se-lg @3xl:rounded-es-none;
+                }
+            }
+
+            &.\@4xl\:fi-grid-cols {
+                @apply @4xl:divide-x @4xl:divide-y-0;
+
+                & > :first-child .fi-input-wrp {
+                    @apply @4xl:rounded-se-none @4xl:rounded-es-lg;
+                }
+
+                & > :last-child .fi-input-wrp {
+                    @apply @4xl:rounded-se-lg @4xl:rounded-es-none;
+                }
+            }
+
+            &.\@5xl\:fi-grid-cols {
+                @apply @5xl:divide-x @5xl:divide-y-0;
+
+                & > :first-child .fi-input-wrp {
+                    @apply @5xl:rounded-se-none @5xl:rounded-es-lg;
+                }
+
+                & > :last-child .fi-input-wrp {
+                    @apply @5xl:rounded-se-lg @5xl:rounded-es-none;
+                }
+            }
+
+            &.\@6xl\:fi-grid-cols {
+                @apply @6xl:divide-x @6xl:divide-y-0;
+
+                & > :first-child .fi-input-wrp {
+                    @apply @6xl:rounded-se-none @6xl:rounded-es-lg;
+                }
+
+                & > :last-child .fi-input-wrp {
+                    @apply @6xl:rounded-se-lg @6xl:rounded-es-none;
+                }
+            }
+
+            &.\@7xl\:fi-grid-cols {
+                @apply @7xl:divide-x @7xl:divide-y-0;
+
+                & > :first-child .fi-input-wrp {
+                    @apply @7xl:rounded-se-none @7xl:rounded-es-lg;
+                }
+
+                & > :last-child .fi-input-wrp {
+                    @apply @7xl:rounded-se-lg @7xl:rounded-es-none;
+                }
+            }
+        }
+
+        @supports not (container-type: inline-size) {
+            &.\!\@sm\:fi-grid-cols {
+                @apply sm:divide-x sm:divide-y-0;
+
+                & > :first-child .fi-input-wrp {
+                    @apply sm:rounded-se-none sm:rounded-es-lg;
+                }
+
+                & > :last-child .fi-input-wrp {
+                    @apply sm:rounded-se-lg sm:rounded-es-none;
+                }
+            }
+
+            &.\!\@md\:fi-grid-cols {
+                @apply md:divide-x md:divide-y-0;
+
+                & > :first-child .fi-input-wrp {
+                    @apply md:rounded-se-none md:rounded-es-lg;
+                }
+
+                & > :last-child .fi-input-wrp {
+                    @apply md:rounded-se-lg md:rounded-es-none;
+                }
+            }
+
+            &.\!\@lg\:fi-grid-cols {
+                @apply lg:divide-x lg:divide-y-0;
+
+                & > :first-child .fi-input-wrp {
+                    @apply lg:rounded-se-none lg:rounded-es-lg;
+                }
+
+                & > :last-child .fi-input-wrp {
+                    @apply lg:rounded-se-lg lg:rounded-es-none;
+                }
+            }
+
+            &.\!\@xl\:fi-grid-cols {
+                @apply xl:divide-x xl:divide-y-0;
+
+                & > :first-child .fi-input-wrp {
+                    @apply xl:rounded-se-none xl:rounded-es-lg;
+                }
+
+                & > :last-child .fi-input-wrp {
+                    @apply xl:rounded-se-lg xl:rounded-es-none;
+                }
+            }
+
+            &.\!\@2xl\:fi-grid-cols {
+                @apply 2xl:divide-x 2xl:divide-y-0;
+
+                & > :first-child .fi-input-wrp {
+                    @apply 2xl:rounded-se-none 2xl:rounded-es-lg;
+                }
+
+                & > :last-child .fi-input-wrp {
+                    @apply 2xl:rounded-se-lg 2xl:rounded-es-none;
+                }
+            }
+        }
+    }
+
+    & .fi-input-wrp {
+        @apply rounded-none shadow-none ring-0;
+
+        &:not(.fi-disabled):not(:has(.fi-input-wrp-actions :focus)) {
+            @apply focus-within:ring-0;
+
+            &.fi-invalid {
+                @apply focus-within:ring-0;
+            }
+        }
+    }
+}

package/resources/filament/packages/schemas/resources/css/components/icon.css

@@ -0,0 +1,11 @@
+.fi-sc-icon {
+    @apply text-gray-400 dark:text-gray-500;
+
+    &.fi-sc-icon-htmlable {
+        @apply inline-block;
+    }
+
+    &.fi-color {
+        @apply text-color-500 dark:text-color-400;
+    }
+}

package/resources/filament/packages/schemas/resources/css/components/image.css

@@ -0,0 +1,12 @@
+.fi-sc-image {
+    @apply rounded-lg border border-gray-300 dark:border-transparent;
+
+    &.fi-align-center {
+        @apply mx-auto;
+    }
+
+    &.fi-align-end,
+    &.fi-align-right {
+        @apply ms-auto;
+    }
+}

package/resources/filament/packages/schemas/resources/css/components/section.css

@@ -0,0 +1,24 @@
+.fi-sc-section {
+    @apply flex flex-col gap-2;
+
+    & .fi-sc-section-content-slot {
+        @apply contents;
+    }
+
+    & .fi-sc-section-label-ctn {
+        @apply flex items-center gap-x-3;
+
+        & .fi-sc-section-label {
+            @apply text-sm leading-6 font-medium text-gray-950 dark:text-white;
+        }
+    }
+}
+
+.fi-section
+    > .fi-section-header
+    > .fi-section-header-content
+    > .fi-section-header-after-ctn {
+    & .fi-sc-text:not(.fi-section-header-after-ctn .fi-dropdown-panel *) {
+        @apply leading-6;
+    }
+}