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

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

@@ -0,0 +1,55 @@
+input.fi-input {
+    @apply block w-full appearance-none border-none bg-transparent px-3 py-1.5 text-start text-sm leading-6 text-gray-950 transition duration-75 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-input-has-inline-prefix {
+        @apply ps-0;
+    }
+
+    &.fi-input-has-inline-suffix {
+        @apply pe-0;
+    }
+
+    &.fi-align-center {
+        @apply text-center;
+    }
+
+    &.fi-align-end {
+        @apply text-end;
+    }
+
+    &.fi-align-left {
+        @apply text-left;
+    }
+
+    &.fi-align-right {
+        @apply text-end;
+    }
+
+    &.fi-align-justify,
+    &.fi-align-between {
+        @apply text-justify;
+    }
+}
+
+input[type='date'].fi-input,
+input[type='datetime-local'].fi-input,
+input[type='time'].fi-input {
+    /* An almost transparent white background color is used
+     instead of fully transparent to fix a Safari bug
+     where the date/time input "placeholder" colors too dark.
+
+     https://github.com/filamentphp/filament/issues/7087
+     https://github.com/filamentphp/filament/issues/18570 */
+
+    @apply bg-white/[1%];
+}
+
+input[type='range'].fi-input {
+    @apply mx-auto appearance-auto;
+    width: calc(100% - 1.5rem);
+}

package/resources/filament/packages/support/resources/css/components/input/one-time-code.css

@@ -0,0 +1,7 @@
+.fi-one-time-code-input-ctn {
+    @apply flex w-fit items-center gap-2;
+
+    & > .fi-one-time-code-input-digit {
+        @apply focus:border-primary-600 focus:ring-primary-600 dark:focus:border-primary-500 dark:focus:ring-primary-500 h-11 w-10 rounded-lg border border-gray-950/10 bg-white text-center font-mono text-base font-medium text-gray-950 transition duration-75 focus:ring-1 focus:outline-none disabled:pointer-events-none disabled:text-gray-500 disabled:opacity-70 dark:border-white/20 dark:bg-white/5 dark:text-white;
+    }
+}

package/resources/filament/packages/support/resources/css/components/input/radio.css

@@ -0,0 +1,11 @@
+input[type='radio'].fi-radio-input {
+    @apply text-primary-600 checked:bg-primary-600 focus:ring-primary-600 checked:focus:ring-primary-500/50 dark:text-primary-500 dark:checked:bg-primary-500 dark:focus:ring-primary-500 dark:checked:focus:ring-primary-400/50 size-4 appearance-none rounded-full border-none bg-white shadow-sm ring-1 ring-gray-950/10 checked:ring-0 focus:ring-2 focus:ring-offset-0 focus:outline-none disabled:bg-gray-50 disabled:text-gray-50 disabled:checked:bg-gray-400 disabled:checked:text-gray-400 dark:bg-white/5 dark:ring-white/20 dark:disabled:bg-transparent dark:disabled:ring-white/10 dark:disabled:checked:bg-gray-600;
+
+    &:checked {
+        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 16 16' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='3'/%3E%3C/svg%3E");
+    }
+
+    &.fi-invalid {
+        @apply text-danger-600 checked:bg-danger-600 ring-danger-600 focus:ring-danger-600 checked:focus:ring-danger-500/50 dark:text-danger-500 dark:checked:bg-danger-500 dark:ring-danger-500 dark:checked:bg-danger-500 dark:focus:ring-danger-500 dark:checked:focus:ring-danger-400/50;
+    }
+}

package/resources/filament/packages/support/resources/css/components/input/select.css

@@ -0,0 +1,154 @@
+select.fi-select-input {
+    @apply block w-full appearance-none border-none bg-transparent py-1.5 ps-3 pe-8 text-sm leading-6 text-gray-950 transition duration-75 focus:ring-0 focus:outline-none disabled:text-gray-500 disabled:[-webkit-text-fill-color:var(--color-gray-500)] dark:text-white dark:disabled:text-gray-400 dark:disabled:[-webkit-text-fill-color:var(--color-gray-400)] [&_optgroup]:bg-white [&_optgroup]:dark:bg-gray-900 [&_option]:bg-white [&_option]:dark:bg-gray-900;
+
+    /* https://defensivecss.dev/tip/input-zoom-safari */
+    @supports (-webkit-touch-callout: none) {
+        @apply text-base;
+    }
+
+    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
+    background-position: right 0.5rem center;
+    background-repeat: no-repeat;
+    background-size: 1.5em 1.5em;
+
+    @variant rtl {
+        background-position: left 0.5rem center;
+    }
+
+    &.fi-select-input-has-inline-prefix {
+        @apply ps-0;
+    }
+}
+
+.fi-select-input {
+    & .fi-select-input-ctn {
+        @apply relative;
+    }
+
+    & div[x-ref='select'] {
+        @apply min-h-9;
+    }
+
+    & .fi-select-input-btn {
+        @apply flex min-h-9 w-full rounded-lg py-1.5 ps-3 pe-8 text-start text-sm leading-6 text-gray-950 focus:ring-0 focus:outline-none dark:text-white;
+
+        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
+        background-position: right 0.5rem center;
+        background-repeat: no-repeat;
+        background-size: 1.5em 1.5em;
+
+        @variant rtl {
+            background-position: left 0.5rem center;
+        }
+    }
+
+    & .fi-select-input-value-ctn {
+        @apply flex w-full items-center text-wrap;
+        word-break: break-word;
+    }
+
+    & .fi-select-input-value-badges-ctn {
+        @apply flex flex-wrap gap-1.5;
+    }
+
+    & .fi-select-input-ctn-multiple {
+        & .fi-select-input-btn {
+            @apply absolute inset-0 h-full;
+        }
+
+        & .fi-select-input-value-ctn {
+            @apply pointer-events-none relative min-h-9 py-1.5 ps-3 pe-8;
+        }
+
+        & .fi-badge-delete-btn {
+            @apply pointer-events-auto;
+        }
+    }
+
+    & .fi-select-input-ctn-reorderable .fi-select-input-value-badges-ctn {
+        @apply pointer-events-auto;
+    }
+
+    & .fi-select-input-value-label {
+        @apply flex-1;
+    }
+
+    /* The glyph is a mask painted in `currentColor`, not a hardcoded fill, so
+       this rule's own hover and focus colors still reach it. */
+    & .fi-select-input-value-remove-btn {
+        @apply absolute end-8 top-1/2 size-4 -translate-y-1/2 text-gray-500 hover:text-gray-600 focus-visible:text-gray-600 focus-visible:outline-none dark:hover:text-gray-300 dark:focus-visible:text-gray-300;
+
+        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-select-input-ctn-clearable .fi-select-input-btn {
+        @apply pe-14;
+    }
+
+    & .fi-select-input-ctn-clearable .fi-select-input-btn:disabled {
+        @apply pe-8;
+    }
+
+    & .fi-select-input-value-remove-btn:disabled,
+    & .fi-badge-delete-btn:disabled {
+        @apply hidden;
+    }
+
+    & .fi-dropdown-panel {
+        @apply max-h-60 max-w-full!;
+    }
+
+    & .fi-select-input-options-ctn {
+        @apply divide-y divide-gray-100 dark:divide-white/5;
+    }
+
+    & .fi-select-input-option-group {
+        @apply divide-y divide-gray-100 dark:divide-white/5;
+
+        & .fi-dropdown-header {
+            @apply font-medium text-gray-500 dark:text-gray-400;
+        }
+    }
+
+    & .fi-select-input-search-ctn {
+        @apply sticky top-0 z-10 bg-white dark:bg-gray-900;
+    }
+
+    & .fi-select-input-option {
+        @apply min-w-px text-wrap;
+        word-break: break-word;
+    }
+
+    & .fi-select-input-placeholder {
+        @apply text-gray-400 dark:text-gray-500;
+    }
+
+    & .fi-disabled {
+        @apply cursor-not-allowed opacity-70;
+
+        & .fi-select-input-placeholder {
+            @apply text-gray-400 dark:text-gray-500;
+        }
+    }
+
+    & .fi-select-input-message {
+        @apply px-3 py-2 text-sm text-gray-500 dark:text-gray-400;
+    }
+
+    & .fi-select-input-max-items-message {
+        @apply text-danger-600 dark:text-danger-400 px-3 py-2 text-sm;
+    }
+
+    & .fi-select-input-ctn.fi-select-input-ctn-option-labels-not-wrapped {
+        & .fi-select-input-value-ctn > span {
+            @apply truncate text-nowrap break-normal;
+        }
+
+        & .fi-select-input-option > span {
+            @apply truncate;
+        }
+    }
+}

package/resources/filament/packages/support/resources/css/components/input/wrapper.css

@@ -0,0 +1,107 @@
+.fi-input-wrp {
+    @apply flex rounded-lg bg-white shadow-sm ring-1 ring-gray-950/10 transition duration-75 dark:bg-white/5 dark:ring-white/20;
+
+    &:not(.fi-disabled):not(:has(.fi-input-wrp-actions :focus)) {
+        @apply focus-within:ring-primary-600 dark:focus-within:ring-primary-500 focus-within:ring-2;
+
+        &.fi-invalid {
+            @apply focus-within:ring-danger-600 dark:focus-within:ring-danger-500;
+        }
+    }
+
+    &.fi-disabled {
+        @apply bg-gray-50 dark:bg-transparent;
+
+        &:not(.fi-invalid) {
+            @apply dark:ring-white/10;
+        }
+    }
+
+    &.fi-invalid {
+        @apply ring-danger-600 dark:ring-danger-500;
+    }
+
+    & .fi-input-wrp-prefix {
+        @apply hidden items-center gap-x-3 ps-3;
+
+        &.fi-input-wrp-prefix-has-content {
+            @apply flex;
+        }
+
+        &.fi-inline {
+            @apply pe-2;
+
+            &.fi-input-wrp-prefix-has-label {
+                @apply pe-1;
+            }
+        }
+
+        &:not(.fi-inline) {
+            @apply border-e border-gray-200 ps-3 pe-3 dark:border-white/10;
+        }
+    }
+
+    & .fi-input-wrp-content-ctn,
+    &:not(:has(.fi-input-wrp-content-ctn)) > * {
+        @apply min-w-0 flex-1;
+
+        &.fi-input-wrp-content-ctn-ps {
+            @apply ps-3;
+        }
+    }
+
+    & .fi-input-wrp-suffix {
+        @apply flex items-center gap-x-3 pe-3;
+
+        &.fi-inline {
+            @apply ps-2;
+
+            &.fi-input-wrp-suffix-has-label {
+                @apply ps-1;
+            }
+        }
+
+        &:not(.fi-inline) {
+            @apply border-s border-gray-200 ps-3 dark:border-white/10;
+        }
+    }
+
+    & .fi-input-wrp-actions {
+        @apply flex items-center gap-3;
+
+        & .fi-btn.fi-size-sm {
+            @apply px-2 py-1;
+        }
+
+        & .fi-icon-btn.fi-size-sm {
+            @apply size-7;
+
+            &:has(.fi-icon.fi-size-sm) {
+                @apply -m-1.5;
+            }
+
+            &:has(.fi-icon.fi-size-md) {
+                @apply -m-1;
+            }
+
+            &:has(.fi-icon.fi-size-lg) {
+                @apply -m-0.5;
+            }
+        }
+    }
+
+    & .fi-input-wrp-label {
+        @apply text-sm whitespace-nowrap text-gray-500 dark:text-gray-400;
+    }
+
+    & .fi-input-wrp-prefix,
+    & .fi-input-wrp-suffix {
+        & > .fi-icon {
+            @apply text-gray-400 dark:text-gray-500;
+
+            &.fi-color {
+                @apply text-color-500;
+            }
+        }
+    }
+}

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

@@ -0,0 +1,90 @@
+.fi-link {
+    @apply relative inline-flex items-center justify-center gap-1.5 font-medium text-gray-700 outline-none dark:text-gray-200;
+
+    /* Pinning the link's baseline to the label keeps it aligned with surrounding text, even when the loading indicator is the first flex item. */
+    & > .fi-link-label {
+        @apply self-baseline;
+    }
+
+    &.fi-force-enabled,
+    &:not(.fi-disabled):not([disabled]) {
+        /* `outline-solid` is load-bearing: the base `outline-none` above leaves `--tw-outline-style: none` on the element, which `outline-2` alone resolves to, so the focus outline never paints without it. */
+        @apply hover:underline focus-visible:rounded-sm focus-visible:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-current focus-visible:outline-solid;
+    }
+
+    &.fi-disabled:not(.fi-force-enabled),
+    &[disabled]:not(.fi-force-enabled) {
+        @apply cursor-default opacity-70;
+
+        &:not([x-tooltip]) {
+            @apply pointer-events-none;
+        }
+    }
+
+    &.fi-size-xs {
+        @apply gap-1 text-xs;
+    }
+
+    &.fi-size-sm {
+        @apply gap-1 text-sm;
+    }
+
+    &.fi-size-md,
+    &.fi-size-lg,
+    &.fi-size-xl {
+        @apply gap-1.5 text-sm;
+    }
+
+    &.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-semibold {
+        @apply font-semibold;
+    }
+
+    &.fi-font-bold {
+        @apply font-bold;
+    }
+
+    &.fi-font-extrabold {
+        @apply font-extrabold;
+    }
+
+    &.fi-font-black {
+        @apply font-black;
+    }
+
+    &.fi-color {
+        @apply text-(--text) dark:text-(--dark-text);
+    }
+
+    &:not(.fi-color) > .fi-icon {
+        @apply text-gray-400 dark:text-gray-500;
+    }
+
+    & .fi-link-badge-ctn {
+        @apply absolute start-full top-0 z-[1] flex w-max -translate-x-1/4 -translate-y-3/4 rounded-md bg-white font-normal hover:no-underline focus-visible:no-underline rtl:translate-x-1/4 dark:bg-gray-900;
+    }
+}
+
+/**
+ * Align links embedded within text.
+ */
+p > .fi-link,
+span > .fi-link {
+    @apply pb-[2px] align-middle;
+    text-align: inherit;
+}

package/resources/filament/packages/support/resources/css/components/loading-indicator.css

@@ -0,0 +1,3 @@
+.fi-loading-indicator {
+    @apply motion-safe:animate-spin;
+}

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

@@ -0,0 +1,3 @@
+.fi-loading-section {
+    @apply motion-safe:animate-pulse;
+}