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

package/resources/filament/packages/forms/resources/css/components/slider.css

@@ -0,0 +1,54 @@
+.fi-fo-slider {
+    @apply gap-4 rounded-lg border-0 bg-transparent shadow-sm ring-1 ring-gray-950/10 dark:ring-white/20;
+
+    & .noUi-connect {
+        @apply bg-primary-500 dark:bg-primary-600;
+    }
+
+    & .noUi-connects {
+        @apply rounded-lg bg-gray-950/5 dark:bg-white/5;
+    }
+
+    & .noUi-handle {
+        @apply focus:outline-primary-600 dark:focus:outline-primary-500 absolute rounded-lg border-1 border-gray-950/10 bg-white shadow-none backface-hidden focus:outline-2 dark:border-white/20 dark:bg-gray-700;
+
+        &::before,
+        &::after {
+            @apply border-0 bg-gray-400;
+        }
+    }
+
+    & .noUi-tooltip {
+        @apply rounded-md border-0 bg-white text-gray-950 shadow-sm ring-1 ring-gray-950/10 dark:bg-gray-800 dark:text-white dark:ring-white/20;
+    }
+
+    & .noUi-pips {
+        & .noUi-value {
+            @apply text-gray-950 dark:text-white;
+        }
+    }
+
+    &.fi-fo-slider-vertical {
+        @apply mt-4 h-40;
+
+        &.fi-fo-slider-has-tooltips {
+            @apply ms-10;
+        }
+    }
+
+    &:not(.fi-fo-slider-vertical) {
+        &.fi-fo-slider-has-pips {
+            @apply mb-8;
+        }
+
+        &.fi-fo-slider-has-tooltips {
+            @apply mt-10;
+        }
+
+        & .noUi-pips {
+            & .noUi-value {
+                @apply mt-1;
+            }
+        }
+    }
+}

package/resources/filament/packages/forms/resources/css/components/tags-input.css

@@ -0,0 +1,33 @@
+.fi-fo-tags-input {
+    &.fi-disabled {
+        & .fi-badge-delete-btn {
+            @apply hidden;
+        }
+    }
+
+    & .fi-fo-tags-input-tags-ctn {
+        @apply flex w-full flex-wrap gap-1.5 border-t border-t-gray-200 p-2 dark:border-t-white/10;
+
+        & > template {
+            @apply hidden;
+        }
+
+        & > .fi-badge {
+            &.fi-reorderable {
+                @apply cursor-move;
+            }
+
+            & .fi-badge-label-ctn {
+                @apply text-start select-none;
+            }
+        }
+    }
+}
+
+.fi-fo-tags-input-wrp {
+    &.fi-fo-field-has-inline-label {
+        & .fi-fo-field-label-col {
+            @apply sm:pt-1.5;
+        }
+    }
+}

package/resources/filament/packages/forms/resources/css/components/text-input.css

@@ -0,0 +1,20 @@
+.fi-fo-text-input {
+    @apply overflow-hidden;
+
+    & input {
+        &.fi-revealable {
+            @apply [&::-ms-reveal]:hidden;
+        }
+
+        &[type='number']:disabled,
+        &[type='number'][readonly] {
+            -moz-appearance: textfield;
+
+            &::-webkit-inner-spin-button,
+            &::-webkit-outer-spin-button {
+                @apply appearance-none;
+                margin: 0;
+            }
+        }
+    }
+}

package/resources/filament/packages/forms/resources/css/components/textarea.css

@@ -0,0 +1,26 @@
+.fi-fo-textarea {
+    @apply overflow-hidden;
+
+    & textarea {
+        @apply block h-full w-full border-none bg-transparent px-3 py-1.5 text-sm leading-6 text-gray-950 placeholder:text-gray-400 focus:ring-0 focus:outline-none disabled:text-gray-500 disabled:[-webkit-text-fill-color:var(--color-gray-500)] disabled:placeholder:[-webkit-text-fill-color:var(--color-gray-400)] dark:text-white dark:placeholder:text-gray-500 dark:disabled:text-gray-400 dark:disabled:[-webkit-text-fill-color:var(--color-gray-400)] dark:disabled:placeholder:[-webkit-text-fill-color:var(--color-gray-500)];
+
+        /* https://defensivecss.dev/tip/input-zoom-safari */
+        @supports (-webkit-touch-callout: none) {
+            @apply text-base;
+        }
+    }
+
+    &.fi-autosizable {
+        & textarea {
+            @apply resize-none;
+        }
+    }
+}
+
+.fi-fo-textarea-wrp {
+    &.fi-fo-field-has-inline-label {
+        & .fi-fo-field-label-col {
+            @apply sm:pt-1.5;
+        }
+    }
+}

package/resources/filament/packages/forms/resources/css/components/toggle-buttons.css

@@ -0,0 +1,49 @@
+.fi-fo-toggle-buttons {
+    &.fi-btn-group {
+        @apply w-max max-w-full;
+
+        &.fi-width-full {
+            @apply w-full;
+        }
+    }
+
+    &:not(.fi-btn-group) {
+        @apply gap-3;
+
+        &.fi-inline {
+            @apply flex flex-wrap;
+
+            &.fi-width-full {
+                & .fi-fo-toggle-buttons-btn-ctn {
+                    @apply grow;
+                }
+            }
+        }
+
+        &:not(.fi-inline).fi-grid-direction-col {
+            @apply -mt-3;
+
+            & .fi-fo-toggle-buttons-btn-ctn {
+                @apply break-inside-avoid pt-3;
+            }
+        }
+
+        &.fi-width-full .fi-fo-toggle-buttons-btn-ctn .fi-btn {
+            @apply w-full;
+        }
+    }
+
+    & .fi-fo-toggle-buttons-input {
+        @apply pointer-events-none absolute opacity-0;
+    }
+}
+
+.fi-fo-toggle-buttons-wrp {
+    @apply outline-none;
+
+    &.fi-fo-field-has-inline-label {
+        & .fi-fo-field-label-col {
+            @apply sm:pt-1.5;
+        }
+    }
+}

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

@@ -0,0 +1,32 @@
+@import '../../dist/index.css' layer(components);
+@import './components/builder.css' layer(components);
+@import './components/checkbox-list.css' layer(components);
+@import './components/code-editor.css' layer(components);
+@import './components/color-picker.css' layer(components);
+@import './components/date-time-picker.css' layer(components);
+@import './components/field.css' layer(components);
+@import './components/file-upload.css' layer(components);
+@import './components/key-value.css' layer(components);
+@import './components/markdown-editor.css' layer(components);
+@import './components/modal-table-select.css' layer(components);
+@import './components/radio.css' layer(components);
+@import './components/repeater.css' layer(components);
+@import './components/rich-editor.css' layer(components);
+@import './components/select.css' layer(components);
+@import './components/slider.css' layer(components);
+@import './components/tags-input.css' layer(components);
+@import './components/text-input.css' layer(components);
+@import './components/textarea.css' layer(components);
+@import './components/toggle-buttons.css' layer(components);
+
+@layer utilities {
+    .fi-fo-rich-editor .tiptap {
+        &
+            p
+            [data-resize-container][data-node='image']:where(
+                :not(.fi-not-prose, .fi-not-prose *)
+            ) {
+            margin-top: 0;
+        }
+    }
+}

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

@@ -0,0 +1,21 @@
+.fi-in-code {
+    & .phiki {
+        @apply overflow-x-auto rounded-lg px-4 py-3 shadow-sm ring-1 ring-gray-950/10 dark:ring-white/20;
+    }
+
+    @variant dark {
+        & .phiki,
+        & .phiki span {
+            color: var(--phiki-dark-color) !important;
+            background-color: var(--phiki-dark-background-color) !important;
+            font-style: var(--phiki-dark-font-style) !important;
+            font-weight: var(--phiki-dark-font-weight) !important;
+            text-decoration: var(--phiki-dark-text-decoration) !important;
+        }
+    }
+
+    &.fi-copyable,
+    & > .fi-copyable {
+        @apply focus-visible:ring-primary-600 dark:focus-visible:ring-primary-500 cursor-pointer rounded-lg outline-none focus-visible:ring-2;
+    }
+}

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

@@ -0,0 +1,34 @@
+.fi-in-color {
+    @apply flex w-full gap-1.5;
+
+    &.fi-wrapped {
+        @apply flex-wrap;
+    }
+
+    &.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-justify,
+    &.fi-align-between {
+        @apply justify-between;
+    }
+
+    & > .fi-in-color-item {
+        @apply size-6 rounded-md ring-1 ring-gray-950/10 dark:ring-white/20;
+
+        &.fi-copyable {
+            @apply focus-visible:ring-primary-600 dark:focus-visible:ring-primary-500 cursor-pointer outline-none focus-visible:ring-2;
+        }
+    }
+}

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

@@ -0,0 +1,68 @@
+.fi-in-entry {
+    @apply grid gap-y-2;
+
+    &.fi-in-entry-has-inline-label {
+        @apply sm:grid-cols-3 sm:items-start sm:gap-x-4;
+
+        & .fi-in-entry-content-col {
+            @apply sm:col-span-2;
+        }
+    }
+
+    & .fi-in-entry-label-ctn {
+        @apply flex items-start gap-x-3;
+
+        & > .fi-sc:nth-child(1) {
+            @apply grow-0;
+        }
+    }
+
+    & .fi-in-entry-label {
+        @apply text-sm font-medium text-gray-950 dark:text-white;
+    }
+
+    & .fi-in-entry-label-col {
+        @apply grid auto-cols-fr gap-y-2;
+    }
+
+    & .fi-in-entry-content-col {
+        @apply grid auto-cols-fr gap-y-2;
+    }
+
+    & .fi-in-entry-content-slot {
+        @apply contents;
+    }
+
+    & .fi-in-entry-content-ctn {
+        @apply flex w-full items-center gap-x-3;
+    }
+
+    & .fi-in-entry-content {
+        @apply block w-full text-start;
+
+        &.fi-align-center {
+            @apply text-center;
+        }
+
+        &.fi-align-end {
+            @apply text-end;
+        }
+
+        &.fi-align-left {
+            @apply text-left;
+        }
+
+        &.fi-align-right {
+            @apply text-right;
+        }
+
+        &.fi-align-justify,
+        &.fi-align-between {
+            @apply text-justify;
+        }
+    }
+
+    & .fi-in-placeholder {
+        @apply text-sm text-gray-400 dark:text-gray-500;
+    }
+}

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

@@ -0,0 +1,39 @@
+.fi-in-icon {
+    @apply flex w-full gap-1.5;
+
+    &.fi-wrapped {
+        @apply flex-wrap;
+    }
+
+    &.fi-in-icon-has-line-breaks {
+        @apply flex-col;
+    }
+
+    &.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-justify,
+    &.fi-align-between {
+        @apply justify-between;
+    }
+
+    & > .fi-icon,
+    & > a > .fi-icon {
+        @apply text-gray-400 dark:text-gray-500;
+
+        &.fi-color {
+            @apply text-(--text) dark:text-(--dark-text);
+        }
+    }
+}

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

@@ -0,0 +1,161 @@
+.fi-in-image {
+    @apply flex w-full items-center gap-1.5;
+
+    & img {
+        @apply max-w-none object-cover object-center;
+    }
+
+    &.fi-circular {
+        & img {
+            @apply rounded-full;
+        }
+    }
+
+    &.fi-in-image-ring {
+        & img,
+        & .fi-in-image-limited-remaining-text {
+            @apply ring ring-white dark:ring-gray-900;
+        }
+
+        &.fi-in-image-ring-0 {
+            & img,
+            & .fi-in-image-limited-remaining-text {
+                @apply ring-0;
+            }
+        }
+
+        &.fi-in-image-ring-1 {
+            & img,
+            & .fi-in-image-limited-remaining-text {
+                @apply ring-1;
+            }
+        }
+
+        &.fi-in-image-ring-2 {
+            & img,
+            & .fi-in-image-limited-remaining-text {
+                @apply ring-2;
+            }
+        }
+
+        &.fi-in-image-ring-3 {
+            & img,
+            & .fi-in-image-limited-remaining-text {
+                @apply ring-3;
+            }
+        }
+
+        &.fi-in-image-ring-4 {
+            & img,
+            & .fi-in-image-limited-remaining-text {
+                @apply ring-4;
+            }
+        }
+
+        &.fi-in-image-ring-5 {
+            & img,
+            & .fi-in-image-limited-remaining-text {
+                @apply ring-5;
+            }
+        }
+
+        &.fi-in-image-ring-6 {
+            & img,
+            & .fi-in-image-limited-remaining-text {
+                @apply ring-6;
+            }
+        }
+
+        &.fi-in-image-ring-7 {
+            & img,
+            & .fi-in-image-limited-remaining-text {
+                @apply ring-7;
+            }
+        }
+
+        &.fi-in-image-ring-8 {
+            & img,
+            & .fi-in-image-limited-remaining-text {
+                @apply ring-8;
+            }
+        }
+    }
+
+    &.fi-in-image-overlap-1 {
+        @apply gap-x-0 -space-x-1;
+    }
+
+    &.fi-in-image-overlap-2 {
+        @apply gap-x-0 -space-x-2;
+    }
+
+    &.fi-in-image-overlap-3 {
+        @apply gap-x-0 -space-x-3;
+    }
+
+    &.fi-in-image-overlap-4 {
+        @apply gap-x-0 -space-x-4;
+    }
+
+    &.fi-in-image-overlap-5 {
+        @apply gap-x-0 -space-x-5;
+    }
+
+    &.fi-in-image-overlap-6 {
+        @apply gap-x-0 -space-x-6;
+    }
+
+    &.fi-in-image-overlap-7 {
+        @apply gap-x-0 -space-x-7;
+    }
+
+    &.fi-in-image-overlap-8 {
+        @apply gap-x-0 -space-x-8;
+    }
+
+    &.fi-wrapped {
+        @apply flex-wrap;
+    }
+
+    &.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-justify,
+    &.fi-align-between {
+        @apply justify-between;
+    }
+
+    &.fi-stacked {
+        & .fi-in-image-limited-remaining-text {
+            @apply rounded-full bg-gray-100 dark:bg-gray-800;
+        }
+    }
+
+    & .fi-in-image-limited-remaining-text {
+        @apply flex items-center justify-center text-sm font-medium text-gray-500 dark:text-gray-400;
+
+        &.fi-size-xs {
+            @apply text-xs;
+        }
+
+        &.fi-size-base,
+        &.fi-size-md {
+            @apply text-base;
+        }
+
+        &.fi-size-lg {
+            @apply text-lg;
+        }
+    }
+}

package/resources/filament/packages/infolists/resources/css/components/key-value.css

@@ -0,0 +1,24 @@
+.fi-in-key-value {
+    @apply w-full table-auto divide-y divide-gray-200 rounded-lg bg-white shadow-xs ring-1 ring-gray-950/5 dark:divide-white/5 dark:bg-white/5 dark:ring-white/10;
+
+    & thead th {
+        @apply px-3 py-2 text-start text-sm font-medium text-gray-700 dark:text-gray-200;
+    }
+
+    & tbody {
+        @apply divide-y divide-gray-200 font-mono text-base sm:text-sm sm:leading-6 dark:divide-white/5;
+    }
+
+    & tr {
+        @apply divide-x divide-gray-200 rtl:divide-x-reverse dark:divide-white/5;
+    }
+
+    & tbody th,
+    & tbody td {
+        @apply w-1/2 px-3 py-1.5 text-start font-normal wrap-anywhere;
+
+        &.fi-in-placeholder {
+            @apply w-full py-2 text-center font-sans;
+        }
+    }
+}

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

@@ -0,0 +1,136 @@
+.fi-in-repeatable {
+    ul& {
+        @apply gap-4;
+    }
+
+    & > .fi-in-repeatable-item {
+        @apply block;
+    }
+
+    &.fi-contained {
+        & > .fi-in-repeatable-item {
+            @apply rounded-xl bg-white p-4 shadow-xs ring-1 ring-gray-950/5 dark:bg-white/5 dark:ring-white/10;
+        }
+    }
+}
+
+.fi-in-table-repeatable {
+    @apply grid gap-3;
+
+    & > table {
+        @apply block w-full divide-y divide-gray-200 rounded-xl bg-white shadow-sm ring-1 ring-gray-950/5 dark:divide-white/10 dark:bg-gray-900 dark:ring-white/10;
+
+        & > thead {
+            @apply hidden whitespace-nowrap;
+
+            & > tr {
+                & > th {
+                    @apply border-gray-200 bg-gray-50 px-3 py-2 text-start text-sm font-semibold text-gray-950 first-of-type:rounded-ss-xl last-of-type:rounded-se-xl dark:border-white/5 dark:bg-white/5 dark:text-white [&:not(:last-of-type)]:border-e;
+
+                    &.fi-align-center {
+                        @apply text-center;
+                    }
+
+                    &.fi-align-end,
+                    &.fi-align-right {
+                        @apply text-end;
+                    }
+
+                    &.fi-wrapped {
+                        @apply whitespace-normal;
+                    }
+
+                    &:not(.fi-wrapped) {
+                        @apply whitespace-nowrap;
+                    }
+                }
+            }
+        }
+
+        & > tbody {
+            @apply block divide-y divide-gray-200 dark:divide-white/5;
+
+            & > tr {
+                @apply grid gap-6 p-6;
+
+                & > td {
+                    @apply block;
+
+                    &.fi-hidden {
+                        @apply hidden;
+                    }
+                }
+            }
+        }
+    }
+
+    @supports (container-type: inline-size) {
+        @apply @container;
+
+        & > table {
+            @apply @xl:table;
+
+            & > thead {
+                @apply @xl:table-header-group;
+            }
+
+            & > tbody {
+                @apply @xl:table-row-group;
+
+                & > tr {
+                    @apply @xl:table-row @xl:p-0;
+
+                    & > td {
+                        @apply @xl:table-cell @xl:px-3 @xl:py-2;
+
+                        &.fi-hidden {
+                            @apply @xl:table-cell;
+                        }
+
+                        & .fi-in-entry {
+                            @apply @xl:gap-y-0;
+                        }
+
+                        & .fi-in-entry-label {
+                            @apply @xl:hidden;
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    @supports not (container-type: inline-size) {
+        & > table {
+            @apply lg:table;
+
+            & > thead {
+                @apply lg:table-header-group;
+            }
+
+            & > tbody {
+                @apply lg:table-row-group;
+
+                & > tr {
+                    @apply lg:table-row lg:p-0;
+
+                    & > td {
+                        @apply lg:table-cell lg:px-3 lg:py-2;
+
+                        &.fi-hidden {
+                            @apply lg:table-cell;
+                        }
+
+                        & .fi-in-entry {
+                            @apply lg:gap-y-0;
+                        }
+
+                        & .fi-in-entry-label {
+                            @apply lg:hidden;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}