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

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

@@ -0,0 +1,214 @@
+.fi-btn {
+    /* `align-middle` keeps the button's placement in inline flow independent of its internal baseline, which shifts when the loading indicator is the first grid item. */
+    @apply relative inline-grid grid-flow-col items-center justify-center gap-1.5 rounded-lg px-3 py-2 align-middle text-sm font-medium transition duration-75 outline-none;
+
+    &.fi-force-enabled,
+    &:not(.fi-disabled):not([disabled]) {
+        @apply focus-visible:ring-2;
+    }
+
+    &[aria-pressed]:focus-visible:not([disabled]) {
+        @apply z-1 ring-2 ring-gray-950/10 dark:ring-white/20;
+    }
+
+    &.fi-disabled:not(.fi-force-enabled),
+    &[disabled]:not(.fi-force-enabled) {
+        @apply cursor-default opacity-70;
+
+        &:not([x-tooltip]) {
+            @apply pointer-events-none;
+        }
+    }
+
+    & > .fi-icon {
+        @apply text-gray-400 transition duration-75 dark:text-gray-500;
+    }
+
+    &.fi-size-xs {
+        @apply gap-1 px-2 py-1.5 text-xs;
+    }
+
+    &.fi-size-sm {
+        @apply gap-1 px-2.5 py-1.5 text-sm;
+    }
+
+    &.fi-size-lg {
+        @apply gap-1.5 px-3.5 py-2.5 text-sm;
+    }
+
+    &.fi-size-xl {
+        @apply gap-1.5 px-4 py-3 text-sm;
+    }
+
+    &.fi-outlined {
+        @apply text-gray-950 shadow-sm ring-1 ring-gray-300 dark:text-white dark:ring-gray-700;
+
+        &.fi-force-enabled,
+        &:not(.fi-disabled):not([disabled]) {
+            @apply hover:bg-gray-400/10 focus-visible:ring-gray-400/40;
+        }
+
+        &.fi-color {
+            @apply ring-color-600 dark:ring-color-500 text-(--text) dark:text-(--dark-text);
+
+            &.fi-force-enabled,
+            &:not(.fi-disabled):not([disabled]) {
+                @apply focus-visible:ring-color-500/40 dark:focus-visible:ring-color-400/40 hover:bg-color-500/10 dark:hover:bg-color-600/10;
+            }
+
+            & > .fi-icon {
+                @apply text-color-600 dark:text-color-400;
+            }
+        }
+    }
+
+    &:not(.fi-outlined) {
+        @apply bg-white text-gray-950 dark:bg-white/5 dark:text-white;
+
+        &.fi-force-enabled,
+        &:not(.fi-disabled):not([disabled]) {
+            @apply hover:bg-gray-50 dark:hover:bg-white/10;
+        }
+
+        input:checked + label&,
+        &[aria-pressed='true'] {
+            @apply bg-gray-400 text-white ring-0 dark:bg-gray-600;
+
+            &.fi-force-enabled,
+            &:not(.fi-disabled):not([disabled]) {
+                @apply hover:bg-gray-300 dark:hover:bg-gray-500;
+            }
+        }
+
+        &.fi-color {
+            &:not(label):not([aria-pressed]) {
+                @apply bg-(--bg) text-(--text) dark:bg-(--dark-bg) dark:text-(--dark-text);
+
+                &.fi-force-enabled,
+                &:not(.fi-disabled):not([disabled]) {
+                    @apply focus-visible:ring-color-500/50 dark:focus-visible:ring-color-400/50 hover:bg-(--hover-bg) hover:text-(--hover-text) dark:hover:bg-(--dark-hover-bg) dark:hover:text-(--dark-hover-text);
+                }
+
+                & > .fi-icon {
+                    @apply text-(--text) dark:text-(--dark-text);
+                }
+            }
+
+            &:is(label, [aria-pressed]) {
+                input:checked + &,
+                &[aria-pressed='true'] {
+                    @apply bg-(--bg) text-(--text) ring-0 dark:bg-(--dark-bg) dark:text-(--dark-text);
+                }
+
+                &.fi-force-enabled,
+                &:not(.fi-disabled):not([disabled]) {
+                    input:checked + &,
+                    &[aria-pressed='true'] {
+                        @apply hover:bg-(--hover-bg) hover:text-(--hover-text) dark:hover:bg-(--dark-hover-bg) dark:hover:text-(--dark-hover-text);
+                    }
+
+                    input:checked:focus-visible + & {
+                        @apply ring-color-500/50 dark:ring-color-400/50;
+                    }
+                }
+
+                &[aria-pressed='true']:focus-visible:not([disabled]) {
+                    @apply ring-color-500/50 dark:ring-color-400/50 ring-2;
+                }
+            }
+        }
+    }
+
+    &:is(label, [aria-pressed]) {
+        @apply cursor-pointer;
+
+        &.fi-force-enabled,
+        &:not(.fi-disabled):not([disabled]) {
+            input:focus-visible + & {
+                @apply z-1 ring-2 ring-gray-950/10 dark:ring-white/20;
+            }
+        }
+
+        &
+            > .fi-icon:is(
+                :checked + label > .fi-icon,
+                [aria-pressed='true'] > .fi-icon
+            ) {
+            @apply text-(--text) dark:text-(--dark-text);
+        }
+    }
+
+    &:not(.fi-color),
+    &:is(label, [aria-pressed]) {
+        @apply ring-1 ring-gray-950/10 dark:ring-white/20;
+    }
+
+    &.fi-labeled-from-sm,
+    &.fi-labeled-from-md,
+    &.fi-labeled-from-lg,
+    &.fi-labeled-from-xl,
+    &.fi-labeled-from-2xl {
+        @apply hidden;
+    }
+
+    &.fi-labeled-from-sm {
+        @apply sm:inline-grid;
+    }
+
+    &.fi-labeled-from-md {
+        @apply md:inline-grid;
+    }
+
+    &.fi-labeled-from-lg {
+        @apply lg:inline-grid;
+    }
+
+    &.fi-labeled-from-xl {
+        @apply xl:inline-grid;
+    }
+
+    &.fi-labeled-from-2xl {
+        @apply 2xl:inline-grid;
+    }
+
+    & .fi-btn-badge-ctn {
+        @apply absolute start-full top-0 z-[1] flex w-max -translate-x-1/2 -translate-y-1/2 rounded-md bg-white rtl:translate-x-1/2 dark:bg-gray-900;
+    }
+}
+
+.fi-btn-group {
+    @apply grid grid-flow-col rounded-lg shadow-sm ring-1 ring-gray-950/10 dark:ring-white/20;
+
+    & > .fi-btn {
+        @apply flex-1 rounded-none;
+
+        &:nth-child(1 of .fi-btn) {
+            @apply rounded-s-lg;
+        }
+
+        &:nth-last-child(1 of .fi-btn) {
+            @apply rounded-e-lg;
+        }
+
+        &:not(:nth-child(1 of .fi-btn)) {
+            @apply shadow-[-1px_0_0_0_var(--color-gray-200)] rtl:shadow-[1px_0_0_0_var(--color-gray-200)] dark:shadow-[-1px_0_0_0_rgba(255,255,255,0.2)] rtl:dark:shadow-[1px_0_0_0_rgba(255,255,255,0.2)];
+        }
+
+        &:not(:nth-last-child(1 of .fi-btn)) {
+            @apply me-px;
+        }
+
+        &.fi-processing:enabled {
+            @apply cursor-wait opacity-70;
+        }
+
+        &:not(.fi-outlined) {
+            @apply shadow-none;
+        }
+
+        &:not(.fi-color),
+        &:is(label, [aria-pressed]) {
+            @apply ring-0;
+        }
+    }
+}

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

@@ -0,0 +1,57 @@
+.fi-callout {
+    @apply flex w-full gap-3 rounded-xl bg-white p-4 ring-1 ring-gray-950/5 dark:bg-gray-900 dark:ring-white/10;
+
+    & .fi-callout-icon {
+        @apply text-gray-400;
+
+        &.fi-color {
+            @apply text-color-400;
+        }
+    }
+
+    & .fi-callout-main {
+        @apply mt-0.5 grid flex-1 gap-3;
+    }
+
+    & .fi-callout-text {
+        @apply grid gap-1;
+    }
+
+    & .fi-callout-heading {
+        @apply text-sm font-medium text-gray-950 dark:text-white;
+    }
+
+    & .fi-callout-description {
+        @apply overflow-hidden text-sm text-pretty break-words text-gray-500 dark:text-gray-400;
+
+        & > p:not(:first-of-type) {
+            @apply mt-1;
+        }
+    }
+
+    & .fi-callout-footer {
+        @apply flex flex-wrap gap-3;
+    }
+
+    & .fi-callout-controls {
+        @apply self-start;
+    }
+
+    &.fi-color {
+        @apply ring-color-600/20 dark:ring-color-400/30;
+
+        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-callout-description {
+            @apply text-gray-700/75 dark:text-gray-300/75;
+        }
+    }
+}

package/resources/filament/packages/support/resources/css/components/dropdown/header.css

@@ -0,0 +1,21 @@
+.fi-dropdown-header {
+    @apply flex w-full gap-2 p-3 text-sm font-medium;
+
+    & .fi-icon {
+        @apply text-gray-400 dark:text-gray-500;
+    }
+
+    & span {
+        @apply flex-1 truncate text-start text-gray-700 dark:text-gray-200;
+    }
+
+    &.fi-color {
+        & .fi-icon {
+            @apply text-color-500 dark:text-color-400;
+        }
+
+        & span {
+            @apply text-(--text) dark:text-(--dark-text);
+        }
+    }
+}

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

@@ -0,0 +1,79 @@
+& .fi-dropdown-trigger {
+    @apply flex cursor-pointer;
+}
+
+& .fi-dropdown-panel {
+    @apply absolute z-20 w-screen max-w-[14rem]! rounded-lg bg-white shadow-lg ring-1 ring-gray-950/5 transition dark:bg-gray-900 dark:ring-white/10;
+
+    &:not(.fi-dropdown-list) {
+        @apply divide-y divide-gray-100 dark:divide-white/5;
+    }
+
+    &.fi-opacity-0 {
+        @apply opacity-0;
+    }
+
+    &.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-container {
+        @apply container!;
+    }
+
+    &.fi-scrollable {
+        @apply overflow-y-auto;
+    }
+}

package/resources/filament/packages/support/resources/css/components/dropdown/list/index.css

@@ -0,0 +1,7 @@
+.fi-dropdown-list {
+    @apply grid gap-px p-1;
+
+    & > .fi-grid {
+        @apply overflow-x-hidden;
+    }
+}

package/resources/filament/packages/support/resources/css/components/dropdown/list/item.css

@@ -0,0 +1,74 @@
+.fi-dropdown-list-item {
+    @apply flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-sm whitespace-nowrap transition-colors duration-75 outline-none select-none;
+
+    &:not(.fi-disabled):not([disabled]) {
+        @apply hover:bg-gray-50 focus-visible:bg-gray-50 dark:hover:bg-white/5 dark:focus-visible:bg-white/5;
+
+        &.fi-selected {
+            @apply bg-gray-50 dark:bg-white/5;
+        }
+    }
+
+    &.fi-disabled,
+    &[disabled] {
+        @apply cursor-default opacity-70;
+
+        &:not([x-tooltip]) {
+            @apply pointer-events-none;
+        }
+    }
+
+    &[role^='menuitem'][aria-disabled='true']:focus-visible {
+        @apply bg-gray-50 dark:bg-white/5;
+    }
+
+    & .fi-icon {
+        @apply transition duration-75;
+    }
+
+    & .fi-dropdown-list-item-image {
+        @apply size-5 rounded-full bg-cover bg-center;
+    }
+
+    & > .fi-icon {
+        @apply text-gray-400 dark:text-gray-500;
+
+        &.fi-color {
+            @apply text-color-500 dark:text-color-400;
+        }
+    }
+
+    &.fi-color {
+        &:not(.fi-disabled):not([disabled]) {
+            @apply hover:bg-color-50 focus-visible:bg-color-50 dark:hover:bg-color-400/10 dark:focus-visible:bg-color-400/10;
+
+            &.fi-selected {
+                @apply bg-color-50 dark:bg-color-400/10;
+            }
+        }
+
+        &[role^='menuitem'][aria-disabled='true']:focus-visible {
+            @apply bg-color-50 dark:bg-color-400/10;
+        }
+
+        & .fi-dropdown-list-item-label {
+            @apply text-(--text) hover:text-(--hover-text) dark:text-(--dark-text) dark:hover:text-(--dark-hover-text);
+
+            &.fi-selected {
+                @apply text-(--hover-text) dark:text-(--dark-hover-text);
+            }
+        }
+    }
+
+    & .fi-badge {
+        @apply min-w-[theme(spacing.5)] px-1.5 py-0.5 tracking-tight;
+    }
+}
+
+.fi-dropdown-list-item-label {
+    @apply flex-1 truncate text-start text-gray-700 dark:text-gray-200;
+}
+
+.fi-dropdown-list-item-badge-placeholder {
+    @apply flex items-center text-gray-400 dark:text-gray-500;
+}

package/resources/filament/packages/support/resources/css/components/empty-state.css

@@ -0,0 +1,67 @@
+.fi-empty-state {
+    @apply px-6 py-12;
+
+    &:not(.fi-empty-state-not-contained) {
+        @apply rounded-xl bg-white shadow-sm ring-1 ring-gray-950/5 dark:bg-gray-900 dark:ring-white/10;
+    }
+
+    & .fi-empty-state-content {
+        @apply mx-auto grid max-w-lg justify-items-center text-center;
+    }
+
+    & .fi-empty-state-text-ctn {
+        @apply grid justify-items-center text-center;
+    }
+
+    & .fi-empty-state-icon-bg {
+        @apply mb-4 rounded-full bg-gray-100 p-3 dark:bg-gray-500/20;
+
+        &.fi-color {
+            @apply bg-color-100 dark:bg-color-500/20;
+        }
+
+        & .fi-icon {
+            @apply text-gray-500 dark:text-gray-400;
+
+            &.fi-color {
+                @apply text-color-500 dark:text-color-400;
+            }
+        }
+    }
+
+    & .fi-empty-state-heading {
+        @apply text-base leading-6 font-semibold text-gray-950 dark:text-white;
+    }
+
+    & .fi-empty-state-description {
+        @apply mt-1 text-sm text-gray-500 dark:text-gray-400;
+    }
+
+    & .fi-empty-state-footer {
+        @apply mt-6;
+    }
+
+    &.fi-compact {
+        @apply py-6;
+
+        & .fi-empty-state-content {
+            @apply mx-0 flex max-w-none items-start gap-4 text-start;
+        }
+
+        & .fi-empty-state-icon-bg {
+            @apply mb-0 shrink-0;
+        }
+
+        & .fi-empty-state-text-ctn {
+            @apply flex-1 justify-items-start text-start;
+        }
+
+        & .fi-empty-state-description {
+            @apply mt-1;
+        }
+
+        & .fi-empty-state-footer {
+            @apply mt-4;
+        }
+    }
+}

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

@@ -0,0 +1,23 @@
+.fi-fieldset {
+    & > legend {
+        @apply -ms-2 px-2 text-sm leading-6 font-medium text-gray-950 dark:text-white;
+
+        & .fi-fieldset-label-required-mark {
+            @apply text-danger-600 dark:text-danger-400 font-medium;
+        }
+    }
+
+    &.fi-fieldset-label-hidden {
+        & > legend {
+            @apply sr-only;
+        }
+    }
+
+    &:not(.fi-fieldset-not-contained) {
+        @apply rounded-xl border border-gray-200 p-6 dark:border-white/10;
+    }
+
+    &.fi-fieldset-not-contained {
+        @apply pt-6;
+    }
+}