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

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

@@ -0,0 +1,234 @@
+.fi-section {
+    &:not(.fi-section-not-contained) {
+        &:not(.fi-divided) {
+            & > .fi-section-content-ctn > .fi-section-content {
+                @apply p-6;
+            }
+        }
+
+        &.fi-divided {
+            & > .fi-section-content-ctn > .fi-section-content {
+                & > * {
+                    @apply p-6;
+                }
+            }
+        }
+
+        & > .fi-section-content-ctn > .fi-section-footer {
+            @apply border-t border-gray-200 px-6 py-4 dark:border-white/10;
+        }
+
+        &:not(.fi-aside) {
+            @apply rounded-xl bg-white shadow-sm ring-1 ring-gray-950/5 dark:bg-gray-900 dark:ring-white/10;
+
+            &.fi-compact {
+                @apply rounded-lg;
+            }
+
+            &.fi-secondary {
+                @apply bg-gray-50 dark:bg-white/5;
+            }
+
+            & > .fi-section-header {
+                @apply px-6 py-4;
+            }
+
+            &.fi-section-has-header:not(.fi-collapsed) {
+                & > .fi-section-content-ctn {
+                    @apply border-t border-gray-200 dark:border-white/10;
+                }
+            }
+        }
+
+        &.fi-aside {
+            & > .fi-section-content-ctn {
+                @apply rounded-xl bg-white shadow-sm ring-1 ring-gray-950/5 md:col-span-2 dark:bg-gray-900 dark:ring-white/10;
+            }
+
+            &.fi-compact {
+                & > .fi-section-content-ctn {
+                    @apply rounded-lg;
+                }
+            }
+
+            &.fi-secondary {
+                & > .fi-section-content-ctn {
+                    @apply bg-gray-50 dark:bg-white/5;
+                }
+            }
+        }
+
+        &.fi-compact {
+            &:not(.fi-aside) {
+                & > .fi-section-header {
+                    @apply px-4 py-2.5;
+                }
+            }
+
+            &:not(.fi-divided) {
+                & > .fi-section-content-ctn > .fi-section-content {
+                    @apply p-4;
+                }
+            }
+
+            &.fi-divided {
+                & > .fi-section-content-ctn > .fi-section-content {
+                    & > * {
+                        @apply p-4;
+                    }
+                }
+            }
+
+            & > .fi-section-footer {
+                @apply px-4 py-2.5;
+            }
+        }
+    }
+
+    &.fi-section-not-contained {
+        &.fi-aside {
+            & > .fi-section-content-ctn {
+                @apply md:col-span-2;
+            }
+        }
+
+        &:not(.fi-aside) {
+            @apply grid gap-y-4;
+
+            &:not(.fi-collapsed) {
+                & > .fi-section-content-ctn {
+                    @apply grid gap-y-4;
+                }
+            }
+
+            &.fi-divided {
+                & > .fi-section-content-ctn > .fi-section-content {
+                    & > * {
+                        @apply py-6;
+                    }
+                }
+            }
+
+            &.fi-compact {
+                @apply gap-y-2.5;
+
+                & > .fi-section-content-ctn {
+                    @apply gap-y-2.5;
+                }
+
+                &.fi-divided {
+                    & > .fi-section-content-ctn > .fi-section-content {
+                        & > * {
+                            @apply py-4;
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    &.fi-divided {
+        & > .fi-section-content-ctn > .fi-section-content {
+            @apply gap-0 divide-y divide-gray-200 dark:divide-white/10;
+        }
+    }
+
+    &.fi-aside {
+        @apply grid grid-cols-1 items-start gap-x-6 gap-y-4 md:grid-cols-3;
+    }
+
+    &.fi-collapsible {
+        & > .fi-section-header {
+            @apply cursor-pointer;
+        }
+    }
+
+    &.fi-collapsed {
+        & > .fi-section-header > .fi-section-collapse-btn {
+            @apply rotate-180;
+        }
+
+        & > .fi-section-content-ctn {
+            @apply hidden;
+        }
+    }
+
+    &.fi-section-has-content-before {
+        & > .fi-section-content-ctn {
+            @apply md:order-first;
+        }
+    }
+
+    & > .fi-section-header {
+        @apply flex items-start gap-3;
+
+        & > .fi-icon {
+            @apply shrink-0 text-gray-400 dark:text-gray-500;
+
+            &.fi-color {
+                @apply text-color-500 dark:text-color-400;
+            }
+
+            &.fi-size-sm {
+                @apply mt-1;
+            }
+
+            &.fi-size-md {
+                @apply mt-0.5;
+            }
+        }
+
+        & > .fi-section-header-content > .fi-section-header-after-ctn {
+            @apply max-w-full shrink-0 self-center;
+
+            & .fi-link:not(.fi-section-header-after-ctn .fi-dropdown-panel *) {
+                @apply leading-6;
+            }
+
+            /* The negative margins let the buttons overhang the header's vertical padding, so a header with actions matches the height of one without them. They are applied to the container instead of the buttons so wrapped rows of actions keep their gap, laddered so the largest button size present wins. */
+            &:has(.fi-btn.fi-size-xs:not(.fi-dropdown-panel *)) {
+                @apply -my-0.5;
+            }
+
+            &:has(.fi-btn.fi-size-sm:not(.fi-dropdown-panel *)) {
+                @apply -my-1;
+            }
+
+            &:has(.fi-btn.fi-size-md:not(.fi-dropdown-panel *)) {
+                @apply -my-1.5;
+            }
+
+            &:has(.fi-btn.fi-size-lg:not(.fi-dropdown-panel *)) {
+                @apply -my-2;
+            }
+
+            &:has(.fi-btn.fi-size-xl:not(.fi-dropdown-panel *)) {
+                @apply -my-2.5;
+            }
+        }
+
+        & > .fi-section-collapse-btn {
+            @apply -my-1.5 shrink-0;
+        }
+    }
+
+    & .fi-section-header-content {
+        @apply flex min-w-0 flex-wrap items-start gap-3;
+
+        &.fi-section-header-content-has-heading {
+            @apply flex-1;
+        }
+    }
+
+    & .fi-section-header-text-ctn {
+        @apply grid w-max max-w-full flex-auto gap-y-1;
+    }
+
+    & .fi-section-header-heading {
+        @apply text-base leading-6 font-semibold text-gray-950 dark:text-white;
+    }
+
+    & .fi-section-header-description {
+        @apply overflow-hidden text-sm break-words text-gray-500 dark:text-gray-400;
+    }
+}

package/resources/filament/packages/support/resources/css/components/tabs.css

@@ -0,0 +1,70 @@
+.fi-tabs {
+    @apply flex max-w-full gap-x-1 overflow-x-auto;
+
+    &.fi-contained {
+        @apply border-b border-gray-200 px-3 py-2.5 dark:border-white/10;
+    }
+
+    &:not(.fi-contained) {
+        @apply mx-auto rounded-xl bg-white p-2 shadow-sm ring-1 ring-gray-950/5 dark:bg-gray-900 dark:ring-white/10;
+    }
+
+    &.fi-vertical {
+        @apply flex-col gap-x-0 gap-y-1 overflow-x-hidden overflow-y-auto;
+
+        &.fi-contained {
+            @apply border-e border-b-0;
+        }
+
+        &:not(.fi-contained) {
+            @apply mx-0;
+        }
+
+        & .fi-tabs-item {
+            @apply justify-start;
+        }
+    }
+}
+
+.fi-tabs-item {
+    @apply flex items-center justify-center gap-x-2 rounded-lg px-3 py-2 text-sm font-medium whitespace-nowrap transition duration-75 outline-none hover:bg-gray-50 focus-visible:bg-gray-50 dark:hover:bg-white/5 dark:focus-visible:bg-white/5;
+
+    &.fi-active {
+        @apply bg-gray-50 dark:bg-white/5;
+
+        & .fi-tabs-item-label,
+        & > .fi-icon {
+            @apply text-primary-700 dark:text-primary-400;
+        }
+    }
+
+    :not(.fi-active) {
+        &:hover {
+            & .fi-tabs-item-label {
+                @apply text-gray-700 group-focus-visible:text-gray-700 dark:text-gray-200 dark:group-focus-visible:text-gray-200;
+            }
+        }
+
+        &:focus-visible {
+            & .fi-tabs-item-label {
+                @apply text-gray-700 dark:text-gray-200;
+            }
+        }
+    }
+
+    & .fi-tabs-item-label {
+        @apply text-gray-500 transition duration-75 dark:text-gray-400;
+    }
+
+    & > .fi-icon {
+        @apply shrink-0 text-gray-400 transition duration-75 dark:text-gray-500;
+    }
+
+    & .fi-badge {
+        @apply w-max;
+    }
+
+    & .fi-tabs-item-badge-placeholder {
+        @apply flex items-center text-gray-400 dark:text-gray-500;
+    }
+}

package/resources/filament/packages/support/resources/css/components/toggle.css

@@ -0,0 +1,60 @@
+.fi-toggle {
+    @apply focus-visible:ring-primary-600 dark:focus-visible:ring-primary-500 relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent bg-gray-200 transition-colors duration-200 ease-in-out outline-none focus-visible:ring-2 focus-visible:ring-offset-1 disabled:pointer-events-none disabled:opacity-70 dark:bg-gray-700 dark:focus-visible:ring-offset-gray-900;
+
+    &:disabled,
+    &[disabled] {
+        @apply pointer-events-none opacity-70;
+    }
+
+    &.fi-color {
+        @apply bg-(--bg) dark:bg-(--dark-bg);
+
+        & .fi-icon {
+            @apply text-(--text);
+        }
+    }
+
+    &.fi-hidden {
+        @apply hidden;
+    }
+
+    & > :first-child {
+        @apply pointer-events-none relative inline-block size-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out;
+
+        & > * {
+            @apply absolute inset-0 flex h-full w-full items-center justify-center transition-opacity;
+        }
+    }
+
+    & .fi-icon {
+        @apply text-gray-400 dark:text-gray-700;
+    }
+
+    &.fi-toggle-on {
+        & > :first-child {
+            @apply translate-x-5 rtl:-translate-x-5;
+
+            & > :first-child {
+                @apply opacity-0 duration-100 ease-out;
+            }
+
+            & > :last-child {
+                @apply opacity-100 duration-200 ease-in;
+            }
+        }
+    }
+
+    &.fi-toggle-off {
+        & > :first-child {
+            @apply translate-x-0;
+
+            & > :first-child {
+                @apply opacity-100 duration-200 ease-in;
+            }
+
+            & > :last-child {
+                @apply opacity-0 duration-100 ease-out;
+            }
+        }
+    }
+}

package/resources/filament/packages/support/resources/css/components/tooltip.css

@@ -0,0 +1,36 @@
+/* Tooltips are rendered by `tippy.js`, whose stylesheets ship inside this package's compiled JS bundle that `index.css` imports before this file. Its bundled `light` theme paints the arrow with explicit per-placement border colors instead of `currentColor`, so recoloring the tooltip on its own leaves a mismatched arrow. Routing the background through one custom property keeps the box and the arrow together, in both themes. */
+.tippy-box {
+    background-color: var(--tooltip-bg, #333);
+}
+
+.tippy-arrow {
+    color: var(--tooltip-bg, #333);
+}
+
+.tippy-box[data-theme~='light'] {
+    --tooltip-bg: #fff;
+
+    background-color: var(--tooltip-bg);
+    box-shadow: var(
+        --tooltip-box-shadow,
+        0 0 20px 4px rgba(154, 161, 177, 0.15),
+        0 4px 80px -8px rgba(36, 40, 47, 0.25),
+        0 4px 4px -2px rgba(91, 94, 105, 0.15)
+    );
+
+    &[data-placement^='top'] > .tippy-arrow::before {
+        border-top-color: var(--tooltip-bg);
+    }
+
+    &[data-placement^='bottom'] > .tippy-arrow::before {
+        border-bottom-color: var(--tooltip-bg);
+    }
+
+    &[data-placement^='left'] > .tippy-arrow::before {
+        border-left-color: var(--tooltip-bg);
+    }
+
+    &[data-placement^='right'] > .tippy-arrow::before {
+        border-right-color: var(--tooltip-bg);
+    }
+}

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

@@ -0,0 +1,133 @@
+@import './base.css' layer(base);
+
+@import './utilities.css' layer(utilities);
+
+@import '../../dist/index.css' layer(components);
+@import './components/avatar.css' layer(components);
+@import './components/badge.css' layer(components);
+@import './components/breadcrumbs.css' layer(components);
+@import './components/button.css' layer(components);
+@import './components/callout.css' layer(components);
+@import './components/dropdown/header.css' layer(components);
+@import './components/dropdown/index.css' layer(components);
+@import './components/dropdown/list/index.css' layer(components);
+@import './components/dropdown/list/item.css' layer(components);
+@import './components/empty-state.css' layer(components);
+@import './components/fieldset.css' layer(components);
+@import './components/grid.css' layer(components);
+@import './components/icon.css' layer(components);
+@import './components/icon-button.css' layer(components);
+@import './components/input/checkbox.css' layer(components);
+@import './components/input/index.css' layer(components);
+@import './components/input/one-time-code.css' layer(components);
+@import './components/input/radio.css' layer(components);
+@import './components/input/select.css' layer(components);
+@import './components/input/wrapper.css' layer(components);
+@import './components/link.css' layer(components);
+@import './components/loading-indicator.css' layer(components);
+@import './components/loading-section.css' layer(components);
+@import './components/modal.css' layer(components);
+@import './components/pagination.css' layer(components);
+@import './components/section.css' layer(components);
+@import './components/tabs.css' layer(components);
+@import './components/toggle.css' layer(components);
+@import './components/tooltip.css' layer(components);
+@import './sortable.css' layer(components);
+
+@theme inline {
+    --color-color-50: var(--color-50);
+    --color-color-100: var(--color-100);
+    --color-color-200: var(--color-200);
+    --color-color-300: var(--color-300);
+    --color-color-400: var(--color-400);
+    --color-color-500: var(--color-500);
+    --color-color-600: var(--color-600);
+    --color-color-700: var(--color-700);
+    --color-color-800: var(--color-800);
+    --color-color-900: var(--color-900);
+    --color-color-950: var(--color-950);
+
+    --color-danger-50: var(--danger-50);
+    --color-danger-100: var(--danger-100);
+    --color-danger-200: var(--danger-200);
+    --color-danger-300: var(--danger-300);
+    --color-danger-400: var(--danger-400);
+    --color-danger-500: var(--danger-500);
+    --color-danger-600: var(--danger-600);
+    --color-danger-700: var(--danger-700);
+    --color-danger-800: var(--danger-800);
+    --color-danger-900: var(--danger-900);
+    --color-danger-950: var(--danger-950);
+
+    --color-gray-50: var(--gray-50);
+    --color-gray-100: var(--gray-100);
+    --color-gray-200: var(--gray-200);
+    --color-gray-300: var(--gray-300);
+    --color-gray-400: var(--gray-400);
+    --color-gray-500: var(--gray-500);
+    --color-gray-600: var(--gray-600);
+    --color-gray-700: var(--gray-700);
+    --color-gray-800: var(--gray-800);
+    --color-gray-900: var(--gray-900);
+    --color-gray-950: var(--gray-950);
+
+    --color-info-50: var(--info-50);
+    --color-info-100: var(--info-100);
+    --color-info-200: var(--info-200);
+    --color-info-300: var(--info-300);
+    --color-info-400: var(--info-400);
+    --color-info-500: var(--info-500);
+    --color-info-600: var(--info-600);
+    --color-info-700: var(--info-700);
+    --color-info-800: var(--info-800);
+    --color-info-900: var(--info-900);
+    --color-info-950: var(--info-950);
+
+    --color-primary-50: var(--primary-50);
+    --color-primary-100: var(--primary-100);
+    --color-primary-200: var(--primary-200);
+    --color-primary-300: var(--primary-300);
+    --color-primary-400: var(--primary-400);
+    --color-primary-500: var(--primary-500);
+    --color-primary-600: var(--primary-600);
+    --color-primary-700: var(--primary-700);
+    --color-primary-800: var(--primary-800);
+    --color-primary-900: var(--primary-900);
+    --color-primary-950: var(--primary-950);
+
+    --color-success-50: var(--success-50);
+    --color-success-100: var(--success-100);
+    --color-success-200: var(--success-200);
+    --color-success-300: var(--success-300);
+    --color-success-400: var(--success-400);
+    --color-success-500: var(--success-500);
+    --color-success-600: var(--success-600);
+    --color-success-700: var(--success-700);
+    --color-success-800: var(--success-800);
+    --color-success-900: var(--success-900);
+    --color-success-950: var(--success-950);
+
+    --color-warning-50: var(--warning-50);
+    --color-warning-100: var(--warning-100);
+    --color-warning-200: var(--warning-200);
+    --color-warning-300: var(--warning-300);
+    --color-warning-400: var(--warning-400);
+    --color-warning-500: var(--warning-500);
+    --color-warning-600: var(--warning-600);
+    --color-warning-700: var(--warning-700);
+    --color-warning-800: var(--warning-800);
+    --color-warning-900: var(--warning-900);
+    --color-warning-950: var(--warning-950);
+
+    --color-custom-50: var(--color-50);
+    --color-custom-100: var(--color-100);
+    --color-custom-200: var(--color-200);
+    --color-custom-300: var(--color-300);
+    --color-custom-400: var(--color-400);
+    --color-custom-500: var(--color-500);
+    --color-custom-600: var(--color-600);
+    --color-custom-700: var(--color-700);
+    --color-custom-800: var(--color-800);
+    --color-custom-900: var(--color-900);
+    --color-custom-950: var(--color-950);
+}

package/resources/filament/packages/support/resources/css/sortable.css

@@ -0,0 +1,3 @@
+.fi-sortable-ghost {
+    @apply opacity-30;
+}