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

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

@@ -0,0 +1,77 @@
+.fi-sc-tabs {
+    @apply flex flex-col;
+
+    & > .fi-tabs > .fi-sc-tabs-tablist {
+        @apply contents;
+
+        &.fi-disabled > .fi-tabs-item {
+            @apply cursor-default opacity-70;
+        }
+    }
+
+    & .fi-sc-tabs-header-overflow:not(.fi-sc-tabs-header-overflow-open) {
+        @apply sr-only;
+    }
+
+    & .fi-sc-tabs-header-overflow-open {
+        @apply focus-visible:ring-primary-600 dark:focus-visible:ring-primary-500 fixed z-32 justify-start rounded-md px-2 font-normal focus-visible:ring-2 focus-visible:ring-inset;
+
+        left: var(--tab-overflow-left);
+        top: var(--tab-overflow-top);
+        width: var(--tab-overflow-width);
+        height: var(--tab-overflow-height);
+        clip-path: var(--tab-overflow-clip-path);
+
+        & .fi-tabs-item-label {
+            @apply flex-1 truncate text-start;
+        }
+    }
+
+    & .fi-sc-tabs-overflow-panel {
+        @apply fixed z-31 overflow-y-auto;
+    }
+
+    & .fi-sc-tabs-overflow-placeholder {
+        @apply invisible;
+    }
+
+    & .fi-tabs.fi-invisible {
+        @apply invisible;
+    }
+
+    & .fi-sc-tabs-tab {
+        @apply focus-visible:ring-primary-600 dark:focus-visible:ring-primary-500 outline-hidden focus-visible:ring-2;
+
+        &.fi-active {
+            @apply mt-6;
+        }
+
+        &:not(.fi-active) {
+            @apply hidden;
+        }
+    }
+
+    &.fi-contained {
+        @apply rounded-xl bg-white shadow-xs ring-1 ring-gray-950/5 dark:bg-gray-900 dark:ring-white/10;
+
+        & .fi-sc-tabs-tab {
+            &.fi-active {
+                @apply mt-0 p-6;
+            }
+        }
+    }
+
+    &.fi-vertical {
+        @apply flex-row;
+
+        &:not(.fi-contained) > .fi-tabs {
+            @apply self-start;
+        }
+
+        & .fi-sc-tabs-tab {
+            &.fi-active {
+                @apply ms-6 mt-0 flex-1;
+            }
+        }
+    }
+}

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

@@ -0,0 +1,77 @@
+.fi-sc-text {
+    &.fi-copyable {
+        @apply cursor-pointer outline-none focus-visible:rounded-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-current;
+    }
+
+    &.fi-font-sans {
+        @apply font-sans;
+    }
+
+    &.fi-font-serif {
+        @apply font-serif;
+    }
+
+    &.fi-font-mono {
+        @apply font-mono;
+    }
+
+    &:not(.fi-badge) {
+        @apply inline-block text-sm break-words text-gray-600 dark:text-gray-400;
+
+        &.fi-font-thin {
+            @apply font-thin;
+        }
+
+        &.fi-font-extralight {
+            @apply font-extralight;
+        }
+
+        &.fi-font-light {
+            @apply font-light;
+        }
+
+        &.fi-font-normal {
+            @apply font-normal;
+        }
+
+        &.fi-font-medium {
+            @apply font-medium;
+        }
+
+        &.fi-font-semibold {
+            @apply font-semibold;
+        }
+
+        &.fi-font-bold {
+            @apply font-bold;
+        }
+
+        &.fi-font-extrabold {
+            @apply font-extrabold;
+        }
+
+        &.fi-font-black {
+            @apply font-black;
+        }
+
+        &.fi-size-lg {
+            @apply text-lg;
+        }
+
+        &.fi-color-neutral {
+            @apply text-gray-950 dark:text-white;
+        }
+
+        &.fi-color:not(.fi-color-neutral) {
+            @apply text-(--text) dark:text-(--dark-text);
+        }
+
+        &.fi-size-xs {
+            @apply text-xs;
+        }
+
+        &.fi-size-md {
+            @apply text-base;
+        }
+    }
+}

package/resources/filament/packages/schemas/resources/css/components/unordered-list.css

@@ -0,0 +1,15 @@
+.fi-sc-unordered-list {
+    @apply ms-3 list-disc text-sm;
+
+    &.fi-size-xs {
+        @apply text-xs;
+    }
+
+    &.fi-size-md {
+        @apply text-base;
+    }
+
+    &.fi-size-lg {
+        @apply text-lg;
+    }
+}

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

@@ -0,0 +1,177 @@
+.fi-sc-wizard {
+    @apply flex flex-col;
+
+    & .fi-sc-wizard-header {
+        @apply grid md:grid-flow-col md:overflow-x-auto;
+
+        & .fi-sc-wizard-header-step {
+            @apply relative flex;
+
+            &:not(.fi-active) {
+                @apply hidden md:flex;
+            }
+
+            & .fi-sc-wizard-header-step-btn {
+                @apply flex h-full items-center gap-x-4 px-6 py-4 text-start;
+
+                & .fi-sc-wizard-header-step-icon-ctn {
+                    @apply flex size-10 shrink-0 items-center justify-center rounded-full;
+
+                    & .fi-sc-wizard-header-step-number {
+                        @apply text-sm font-medium;
+                    }
+                }
+
+                & .fi-sc-wizard-header-step-text {
+                    @apply grid justify-items-start md:w-max md:max-w-60;
+
+                    & .fi-sc-wizard-header-step-label {
+                        @apply text-sm font-medium;
+                    }
+
+                    & .fi-sc-wizard-header-step-description {
+                        @apply text-start text-sm text-gray-500 dark:text-gray-400;
+                    }
+                }
+            }
+
+            & .fi-sc-wizard-header-step-separator {
+                @apply absolute end-0 hidden h-full w-5 text-gray-200 md:block rtl:rotate-180 dark:text-white/5;
+            }
+
+            &.fi-completed {
+                & .fi-sc-wizard-header-step-btn {
+                    & .fi-sc-wizard-header-step-icon-ctn {
+                        @apply bg-primary-600 dark:bg-primary-500;
+
+                        & .fi-icon {
+                            @apply text-white;
+                        }
+                    }
+
+                    & .fi-sc-wizard-header-step-text {
+                        & .fi-sc-wizard-header-step-label {
+                            @apply text-gray-950 dark:text-white;
+                        }
+                    }
+                }
+            }
+
+            &:not(.fi-completed) {
+                & .fi-sc-wizard-header-step-btn {
+                    & .fi-sc-wizard-header-step-icon-ctn {
+                        @apply border-2;
+                    }
+                }
+
+                &.fi-active {
+                    & .fi-sc-wizard-header-step-btn {
+                        & .fi-sc-wizard-header-step-icon-ctn {
+                            & .fi-icon {
+                                @apply text-primary-600 dark:text-primary-500;
+                            }
+                        }
+                    }
+                }
+
+                &:not(.fi-active) {
+                    & .fi-sc-wizard-header-step-btn {
+                        & .fi-sc-wizard-header-step-icon-ctn {
+                            & .fi-icon {
+                                @apply text-gray-500 dark:text-gray-400;
+                            }
+                        }
+
+                        & .fi-sc-wizard-header-step-text {
+                            & .fi-sc-wizard-header-step-label {
+                                @apply text-gray-500 dark:text-gray-400;
+                            }
+                        }
+                    }
+                }
+            }
+
+            &.fi-active {
+                & .fi-sc-wizard-header-step-btn {
+                    & .fi-sc-wizard-header-step-icon-ctn {
+                        @apply border-primary-600 dark:border-primary-500;
+
+                        & .fi-sc-wizard-header-step-number {
+                            @apply text-primary-600 dark:text-primary-500;
+                        }
+                    }
+
+                    & .fi-sc-wizard-header-step-text {
+                        & .fi-sc-wizard-header-step-label {
+                            @apply text-primary-700 dark:text-primary-400;
+                        }
+                    }
+                }
+            }
+
+            &:not(.fi-active) {
+                & .fi-sc-wizard-header-step-btn {
+                    & .fi-sc-wizard-header-step-icon-ctn {
+                        @apply border-gray-300 dark:border-gray-600;
+
+                        & .fi-sc-wizard-header-step-number {
+                            @apply text-gray-500 dark:text-gray-400;
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    & .fi-sc-wizard-step {
+        @apply outline-hidden;
+
+        &:not(.fi-active) {
+            @apply hidden;
+        }
+    }
+
+    &:not(.fi-sc-wizard-header-hidden) {
+        & .fi-sc-wizard-step {
+            &.fi-active {
+                @apply mt-6;
+            }
+        }
+    }
+
+    & .fi-sc-wizard-footer {
+        @apply flex items-center justify-between gap-x-3;
+
+        & > .fi-hidden {
+            @apply hidden;
+        }
+    }
+
+    &.fi-contained {
+        @apply rounded-xl bg-white shadow-xs ring-1 ring-gray-950/5 dark:bg-gray-900 dark:ring-white/10;
+
+        & .fi-sc-wizard-header {
+            @apply border-b border-gray-200 dark:border-white/10;
+        }
+
+        & .fi-sc-wizard-step {
+            &.fi-active {
+                @apply mt-0 p-6;
+            }
+        }
+
+        & .fi-sc-wizard-footer {
+            @apply px-6 pb-6;
+        }
+    }
+
+    &:not(.fi-contained) {
+        & .fi-sc-wizard-header {
+            @apply rounded-xl bg-white shadow-xs ring-1 ring-gray-950/5 dark:bg-gray-900 dark:ring-white/10;
+        }
+
+        & .fi-sc-wizard-footer {
+            @apply mt-6;
+        }
+    }
+}

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

@@ -0,0 +1,12 @@
+@import './components/actions.css' layer(components);
+@import './components/flex.css' layer(components);
+@import './components/form.css' layer(components);
+@import './components/fused-group.css' layer(components);
+@import './components/icon.css' layer(components);
+@import './components/image.css' layer(components);
+@import './components/section.css' layer(components);
+@import './components/tabs.css' layer(components);
+@import './components/text.css' layer(components);
+@import './components/unordered-list.css' layer(components);
+@import './components/wizard.css' layer(components);
+@import './schema.css' layer(components);

package/resources/filament/packages/schemas/resources/css/schema.css

@@ -0,0 +1,132 @@
+.fi-sc {
+    @apply text-sm;
+
+    & > .fi-sc-liberated {
+        @apply contents;
+    }
+
+    &.fi-sc-loading {
+        @apply grid min-h-32 place-items-center text-gray-400 dark:text-gray-500;
+    }
+
+    &.fi-inline {
+        @apply flex grow flex-wrap items-center;
+
+        & > .fi-growable,
+        & > .fi-sc-liberated > .fi-growable {
+            @apply w-full flex-1;
+        }
+
+        & > .fi-sc-action:not(.fi-hidden) {
+            @apply contents;
+        }
+    }
+
+    &.fi-sc-has-gap {
+        @apply gap-6;
+
+        &.fi-sc-dense {
+            @apply gap-3;
+        }
+    }
+
+    &.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-hidden,
+    & > .fi-sc-liberated > .fi-hidden {
+        @apply hidden;
+    }
+
+    & > .fi-grid-col,
+    & > .fi-sc-liberated > .fi-grid-col {
+        &.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-sc-component {
+            @apply h-full;
+        }
+    }
+}
+
+/* The `<fieldset>` around a component with a client-side visibility condition exists to
+   be `disabled` while the component is hidden, not to group controls, so it must not
+   affect the layout like a fieldset. */
+fieldset.fi-sc-visibility-fieldset {
+    @apply m-0 min-w-0 border-0 p-0;
+
+    min-inline-size: 0;
+}

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

@@ -0,0 +1 @@
+.tippy-box[data-animation=fade][data-state=hidden]{opacity:0}[data-tippy-root]{max-width:calc(100vw - 10px)}.tippy-box{position:relative;background-color:#333;color:#fff;border-radius:4px;font-size:14px;line-height:1.4;white-space:normal;outline:0;transition-property:transform,visibility,opacity}.tippy-box[data-placement^=top]>.tippy-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-arrow:before{bottom:-7px;left:0;border-width:8px 8px 0;border-top-color:initial;transform-origin:center top}.tippy-box[data-placement^=bottom]>.tippy-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-arrow:before{top:-7px;left:0;border-width:0 8px 8px;border-bottom-color:initial;transform-origin:center bottom}.tippy-box[data-placement^=left]>.tippy-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-arrow:before{border-width:8px 0 8px 8px;border-left-color:initial;right:-7px;transform-origin:center left}.tippy-box[data-placement^=right]>.tippy-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-arrow:before{left:-7px;border-width:8px 8px 8px 0;border-right-color:initial;transform-origin:center right}.tippy-box[data-inertia][data-state=visible]{transition-timing-function:cubic-bezier(.54,1.5,.38,1.11)}.tippy-arrow{width:16px;height:16px;color:#333}.tippy-arrow:before{content:"";position:absolute;border-color:transparent;border-style:solid}.tippy-content{position:relative;padding:5px 9px;z-index:1}.tippy-box[data-theme~=light]{color:#26323d;box-shadow:0 0 20px 4px #9aa1b126,0 4px 80px -8px #24282f40,0 4px 4px -2px #5b5e6926;background-color:#fff}.tippy-box[data-theme~=light][data-placement^=top]>.tippy-arrow:before{border-top-color:#fff}.tippy-box[data-theme~=light][data-placement^=bottom]>.tippy-arrow:before{border-bottom-color:#fff}.tippy-box[data-theme~=light][data-placement^=left]>.tippy-arrow:before{border-left-color:#fff}.tippy-box[data-theme~=light][data-placement^=right]>.tippy-arrow:before{border-right-color:#fff}.tippy-box[data-theme~=light]>.tippy-backdrop{background-color:#fff}.tippy-box[data-theme~=light]>.tippy-svg-arrow{fill:#fff}

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

@@ -0,0 +1,23 @@
+button:not(:disabled),
+[role='button']:not(:disabled) {
+    cursor: pointer;
+}
+
+/*
+ * Honor the OS "reduce motion" setting for every framework animation/transition
+ * (WCAG 2.3.3, and 2.2.2 for the indefinite loading pulse). This reduces rather
+ * than removes motion: a near-instant `0.01ms` (not `0`) keeps `transitionend` /
+ * `animationend` firing so Alpine `x-transition` / `x-collapse` still resolve,
+ * and end-states (chevron rotation, toggle thumb) land instantly. `!important`
+ * in the base layer beats component-layer transitions without per-rule guards.
+ */
+@media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+        animation-duration: 0.01ms !important;
+        animation-iteration-count: 1 !important;
+        transition-duration: 0.01ms !important;
+        scroll-behavior: auto !important;
+    }
+}

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

@@ -0,0 +1,15 @@
+.fi-avatar {
+    @apply size-8 rounded-md object-cover object-center;
+
+    &.fi-circular {
+        @apply rounded-full;
+    }
+
+    &.fi-size-sm {
+        @apply size-6;
+    }
+
+    &.fi-size-lg {
+        @apply size-10;
+    }
+}

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

@@ -0,0 +1,90 @@
+.fi-badge {
+    @apply inline-flex min-w-[theme(spacing.6)] items-center justify-center gap-x-1 rounded-md bg-gray-50 px-2 py-1 text-xs font-medium text-gray-600 ring-1 ring-gray-600/10 ring-inset dark:bg-gray-400/10 dark:text-gray-200 dark:ring-gray-400/20;
+
+    &:not(.fi-wrapped) {
+        @apply truncate;
+    }
+
+    &.fi-disabled:not(.fi-force-enabled),
+    &[disabled]:not(.fi-force-enabled) {
+        @apply cursor-default opacity-70;
+
+        &:not([x-tooltip]) {
+            @apply pointer-events-none;
+        }
+    }
+
+    /* Pinning the badge's baseline to the label keeps it aligned with surrounding text, even when the loading indicator is the first flex item. */
+    & .fi-badge-label-ctn {
+        @apply grid self-baseline;
+    }
+
+    & .fi-badge-label {
+        &.fi-wrapped {
+            @apply text-wrap;
+            word-break: break-word;
+        }
+
+        &:not(.fi-wrapped) {
+            @apply truncate;
+        }
+    }
+
+    & .fi-icon {
+        @apply shrink-0;
+    }
+
+    &.fi-size-xs {
+        @apply min-w-[theme(spacing.4)] px-0.5 py-0 tracking-tighter;
+    }
+
+    &.fi-size-sm {
+        @apply min-w-[theme(spacing.5)] px-1.5 py-0.5 tracking-tight;
+    }
+
+    &.fi-color {
+        @apply bg-color-50 ring-color-600/10 dark:bg-color-400/10 dark:ring-color-400/30 text-(--text) dark:text-(--dark-text);
+
+        & .fi-badge-delete-btn-icon {
+            @apply text-color-700/50 dark:text-color-300/50;
+        }
+    }
+
+    &:not(.fi-color) .fi-icon {
+        @apply text-gray-400 dark:text-gray-500;
+    }
+
+    & .fi-icon.fi-color {
+        @apply text-color-500;
+    }
+
+    & .fi-badge-delete-btn {
+        @apply -my-1 -ms-1 -me-2 flex items-center justify-center p-1 transition duration-75 outline-none;
+
+        &.fi-disabled {
+            @apply cursor-default opacity-70;
+        }
+    }
+
+    /* The glyph is a mask painted in `currentColor`, not a hardcoded fill, so
+       the hover and focus colors below still reach it. */
+    & .fi-badge-delete-btn-icon {
+        @apply size-3 shrink-0 text-gray-700/50 dark:text-gray-300/50;
+
+        background-color: currentColor;
+        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='currentColor'%3E%3Cpath d='M5.28 4.22a.75.75 0 0 0-1.06 1.06L6.94 8l-2.72 2.72a.75.75 0 1 0 1.06 1.06L8 9.06l2.72 2.72a.75.75 0 1 0 1.06-1.06L9.06 8l2.72-2.72a.75.75 0 0 0-1.06-1.06L8 6.94 5.28 4.22Z' /%3E%3C/svg%3E");
+        mask-position: center;
+        mask-repeat: no-repeat;
+    }
+
+    &.fi-force-enabled,
+    &:not(.fi-disabled):not([disabled]) {
+        & .fi-badge-delete-btn-icon {
+            @apply focus-visible:text-gray-700/75 dark:hover:text-gray-300/75 dark:focus-visible:text-gray-300/75;
+        }
+
+        &.fi-color .fi-badge-delete-btn-icon {
+            @apply hover:text-color-700/75 focus-visible:text-color-700/75 dark:hover:text-color-300/75 dark:focus-visible:text-color-300/75;
+        }
+    }
+}

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

@@ -0,0 +1,25 @@
+.fi-breadcrumbs {
+    & ol {
+        @apply flex flex-wrap items-center gap-x-2;
+
+        & li {
+            @apply flex items-center gap-x-2 text-sm font-medium text-gray-500 dark:text-gray-400;
+
+            & a {
+                @apply transition duration-75 hover:text-gray-700 dark:hover:text-gray-200;
+            }
+
+            & .fi-icon {
+                @apply flex text-gray-400 dark:text-gray-500;
+
+                &.fi-ltr {
+                    @apply rtl:hidden;
+                }
+
+                &.fi-rtl {
+                    @apply ltr:hidden;
+                }
+            }
+        }
+    }
+}