🆙 Add cms i using 🆙

This commit is contained in:
Remco
2025-11-25 22:42:56 +01:00
parent 94704e0925
commit d44196149e
35591 changed files with 3601123 additions and 0 deletions
@@ -0,0 +1,46 @@
{
"name": "filament/support",
"description": "Core helper methods and foundation code for all Filament packages.",
"license": "MIT",
"homepage": "https://github.com/filamentphp/filament",
"support": {
"issues": "https://github.com/filamentphp/filament/issues",
"source": "https://github.com/filamentphp/filament"
},
"require": {
"php": "^8.2",
"ext-intl": "*",
"blade-ui-kit/blade-heroicons": "^2.5",
"danharrin/livewire-rate-limiting": "^2.0",
"illuminate/contracts": "^11.28|^12.0",
"kirschbaum-development/eloquent-power-joins": "^4.0",
"league/uri-components": "^7.0",
"livewire/livewire": "^3.5",
"nette/php-generator": "^4.0",
"ryangjchandler/blade-capture-directive": "^1.0",
"spatie/invade": "^2.0",
"spatie/laravel-package-tools": "^1.9",
"symfony/html-sanitizer": "^7.0",
"symfony/console": "^7.0"
},
"autoload": {
"files": [
"src/helpers.php"
],
"psr-4": {
"Filament\\Support\\": "src"
}
},
"extra": {
"laravel": {
"providers": [
"Filament\\Support\\SupportServiceProvider"
]
}
},
"config": {
"sort-packages": true
},
"minimum-stability": "dev",
"prefer-stable": true
}
@@ -0,0 +1,120 @@
<?php
return [
/*
|--------------------------------------------------------------------------
| Broadcasting
|--------------------------------------------------------------------------
|
| By uncommenting the Laravel Echo configuration, you may connect Filament
| to any Pusher-compatible websockets server.
|
| This will allow your users to receive real-time notifications.
|
*/
'broadcasting' => [
// 'echo' => [
// 'broadcaster' => 'pusher',
// 'key' => env('VITE_PUSHER_APP_KEY'),
// 'cluster' => env('VITE_PUSHER_APP_CLUSTER'),
// 'wsHost' => env('VITE_PUSHER_HOST'),
// 'wsPort' => env('VITE_PUSHER_PORT'),
// 'wssPort' => env('VITE_PUSHER_PORT'),
// 'authEndpoint' => '/broadcasting/auth',
// 'disableStats' => true,
// 'encrypted' => true,
// 'forceTLS' => true,
// ],
],
/*
|--------------------------------------------------------------------------
| Default Filesystem Disk
|--------------------------------------------------------------------------
|
| This is the storage disk Filament will use to store files. You may use
| any of the disks defined in the `config/filesystems.php`.
|
*/
'default_filesystem_disk' => env('FILESYSTEM_DISK', 'local'),
/*
|--------------------------------------------------------------------------
| Assets Path
|--------------------------------------------------------------------------
|
| This is the directory where Filament's assets will be published to. It
| is relative to the `public` directory of your Laravel application.
|
| After changing the path, you should run `php artisan filament:assets`.
|
*/
'assets_path' => null,
/*
|--------------------------------------------------------------------------
| Cache Path
|--------------------------------------------------------------------------
|
| This is the directory that Filament will use to store cache files that
| are used to optimize the registration of components.
|
| After changing the path, you should run `php artisan filament:cache-components`.
|
*/
'cache_path' => base_path('bootstrap/cache/filament'),
/*
|--------------------------------------------------------------------------
| Livewire Loading Delay
|--------------------------------------------------------------------------
|
| This sets the delay before loading indicators appear.
|
| Setting this to 'none' makes indicators appear immediately, which can be
| desirable for high-latency connections. Setting it to 'default' applies
| Livewire's standard 200ms delay.
|
*/
'livewire_loading_delay' => 'default',
/*
|--------------------------------------------------------------------------
| File Generation
|--------------------------------------------------------------------------
|
| Artisan commands that generate files can be configured here by setting
| configuration flags that will impact their location or content.
|
| Often, this is useful to preserve file generation behavior from a
| previous version of Filament, to ensure consistency between older and
| newer generated files. These flags are often documented in the upgrade
| guide for the version of Filament you are upgrading to.
|
*/
'file_generation' => [
'flags' => [],
],
/*
|--------------------------------------------------------------------------
| System Route Prefix
|--------------------------------------------------------------------------
|
| This is the prefix used for the system routes that Filament registers,
| such as the routes for downloading exports and failed import rows.
|
*/
'system_route_prefix' => 'filament',
];
@@ -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}
File diff suppressed because one or more lines are too long
@@ -0,0 +1,4 @@
button:not(:disabled),
[role='button']:not(:disabled) {
cursor: pointer;
}
@@ -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;
}
}
@@ -0,0 +1,74 @@
.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;
}
}
& .fi-badge-label-ctn {
@apply grid;
}
& .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 > .fi-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-badge-delete-btn {
@apply -my-1 -ms-1 -me-2 flex items-center justify-center p-1 transition duration-75 outline-none;
& > .fi-icon {
@apply text-gray-700/50 dark:text-gray-300/50;
}
}
&.fi-force-enabled,
&:not(.fi-disabled):not([disabled]) {
& .fi-badge-delete-btn > .fi-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 > .fi-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;
}
}
}
@@ -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;
}
}
}
}
}
@@ -0,0 +1,195 @@
.fi-btn {
@apply relative inline-grid grid-flow-col items-center justify-center gap-1.5 rounded-lg px-3 py-2 text-sm font-medium transition duration-75 outline-none;
&.fi-force-enabled,
&:not(.fi-disabled):not([disabled]) {
@apply focus-visible:ring-2;
}
&.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& {
@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) {
@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);
}
}
label& {
input:checked + & {
@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 + & {
@apply hover:bg-(--hover-bg) hover:text-(--hover-text) dark:hover:bg-(--dark-hover-bg) dark:hover:text-(--dark-hover-text);
}
input:focus-visible + & {
@apply z-10 ring-2 ring-gray-950/10 dark:ring-white/20;
}
input:checked:focus-visible + & {
@apply ring-color-500/50 dark:ring-color-400/50;
}
}
}
}
}
label& {
@apply cursor-pointer;
& > .fi-icon:is(:checked + label > .fi-icon) {
@apply text-(--text) dark:text-(--dark-text);
}
}
&:not(.fi-color),
label& {
@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)] 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),
label& {
@apply ring-0;
}
}
}
@@ -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);
}
}
}
@@ -0,0 +1,63 @@
& .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-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-scrollable {
@apply overflow-y-auto;
}
}
@@ -0,0 +1,7 @@
.fi-dropdown-list {
@apply grid gap-px p-1;
& > .fi-grid {
@apply overflow-x-hidden;
}
}
@@ -0,0 +1,62 @@
.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;
}
}
& .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;
}
}
& .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;
}
@@ -0,0 +1,35 @@
.fi-empty-state {
@apply rounded-xl bg-white px-6 py-12 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-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;
}
}
@@ -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;
}
}
@@ -0,0 +1,511 @@
.fi-grid {
&:not(.fi-grid-direction-col) {
@apply grid grid-cols-(--cols-default);
&.sm\:fi-grid-cols {
@apply sm:grid-cols-(--cols-sm);
}
&.md\:fi-grid-cols {
@apply md:grid-cols-(--cols-md);
}
&.lg\:fi-grid-cols {
@apply lg:grid-cols-(--cols-lg);
}
&.xl\:fi-grid-cols {
@apply xl:grid-cols-(--cols-xl);
}
&.\32xl\:fi-grid-cols {
@apply 2xl:grid-cols-(--cols-2xl);
}
@supports (container-type: inline-size) {
&.\@3xs\:fi-grid-cols {
@apply @3xs:grid-cols-(--cols-c3xs);
}
&.\@2xs\:fi-grid-cols {
@apply @2xs:grid-cols-(--cols-c2xs);
}
&.\@xs\:fi-grid-cols {
@apply @xs:grid-cols-(--cols-cxs);
}
&.\@sm\:fi-grid-cols {
@apply @sm:grid-cols-(--cols-csm);
}
&.\@md\:fi-grid-cols {
@apply @md:grid-cols-(--cols-cmd);
}
&.\@lg\:fi-grid-cols {
@apply @lg:grid-cols-(--cols-clg);
}
&.\@xl\:fi-grid-cols {
@apply @xl:grid-cols-(--cols-cxl);
}
&.\@2xl\:fi-grid-cols {
@apply @2xl:grid-cols-(--cols-c2xl);
}
&.\@3xl\:fi-grid-cols {
@apply @3xl:grid-cols-(--cols-c3xl);
}
&.\@4xl\:fi-grid-cols {
@apply @4xl:grid-cols-(--cols-c4xl);
}
&.\@5xl\:fi-grid-cols {
@apply @5xl:grid-cols-(--cols-c5xl);
}
&.\@6xl\:fi-grid-cols {
@apply @6xl:grid-cols-(--cols-c6xl);
}
&.\@7xl\:fi-grid-cols {
@apply @7xl:grid-cols-(--cols-c7xl);
}
}
@supports not (container-type: inline-size) {
&.\!\@sm\:fi-grid-cols {
@apply sm:grid-cols-(--cols-ncsm);
}
&.\!\@md\:fi-grid-cols {
@apply md:grid-cols-(--cols-ncmd);
}
&.\!\@lg\:fi-grid-cols {
@apply lg:grid-cols-(--cols-nclg);
}
&.\!\@xl\:fi-grid-cols {
@apply xl:grid-cols-(--cols-ncxl);
}
&.\!\@2xl\:fi-grid-cols {
@apply 2xl:grid-cols-(--cols-nc2xl);
}
}
}
&.fi-grid-direction-col {
@apply columns-(--cols-default);
&.sm\:fi-grid-cols {
@apply sm:columns-(--cols-sm);
}
&.md\:fi-grid-cols {
@apply md:columns-(--cols-md);
}
&.lg\:fi-grid-cols {
@apply lg:columns-(--cols-lg);
}
&.xl\:fi-grid-cols {
@apply xl:columns-(--cols-xl);
}
&.\32xl\:fi-grid-cols {
@apply 2xl:columns-(--cols-2xl);
}
@supports (container-type: inline-size) {
&.\@3xs\:fi-grid-cols {
@apply @3xs:columns-(--cols-c3xs);
}
&.\@2xs\:fi-grid-cols {
@apply @2xs:columns-(--cols-c2xs);
}
&.\@xs\:fi-grid-cols {
@apply @xs:columns-(--cols-cxs);
}
&.\@sm\:fi-grid-cols {
@apply @sm:columns-(--cols-csm);
}
&.\@md\:fi-grid-cols {
@apply @md:columns-(--cols-cmd);
}
&.\@lg\:fi-grid-cols {
@apply @lg:columns-(--cols-clg);
}
&.\@xl\:fi-grid-cols {
@apply @xl:columns-(--cols-cxl);
}
&.\@2xl\:fi-grid-cols {
@apply @2xl:columns-(--cols-c2xl);
}
&.\@3xl\:fi-grid-cols {
@apply @3xl:columns-(--cols-c3xl);
}
&.\@4xl\:fi-grid-cols {
@apply @4xl:columns-(--cols-c4xl);
}
&.\@5xl\:fi-grid-cols {
@apply @5xl:columns-(--cols-c5xl);
}
&.\@6xl\:fi-grid-cols {
@apply @6xl:columns-(--cols-c6xl);
}
&.\@7xl\:fi-grid-cols {
@apply @7xl:columns-(--cols-c7xl);
}
}
@supports not (container-type: inline-size) {
&.\!\@sm\:fi-grid-cols {
@apply sm:columns-(--cols-ncsm);
}
&.\!\@md\:fi-grid-cols {
@apply md:columns-(--cols-ncmd);
}
&.\!\@lg\:fi-grid-cols {
@apply lg:columns-(--cols-nclg);
}
&.\!\@xl\:fi-grid-cols {
@apply xl:columns-(--cols-ncxl);
}
&.\!\@2xl\:fi-grid-cols {
@apply 2xl:columns-(--cols-nc2xl);
}
}
}
}
@supports (container-type: inline-size) {
.fi-grid-ctn {
@apply @container;
}
}
.fi-grid-col {
@apply col-(--col-span-default);
&.sm\:fi-grid-col-span {
@apply sm:col-(--col-span-sm);
}
&.md\:fi-grid-col-span {
@apply md:col-(--col-span-md);
}
&.lg\:fi-grid-col-span {
@apply lg:col-(--col-span-lg);
}
&.xl\:fi-grid-col-span {
@apply xl:col-(--col-span-xl);
}
&.\32xl\:fi-grid-col-span {
@apply 2xl:col-(--col-span-2xl);
}
@supports (container-type: inline-size) {
&.\@3xs\:fi-grid-col-span {
@apply @3xs:col-(--col-span-c3xs);
}
&.\@2xs\:fi-grid-col-span {
@apply @2xs:col-(--col-span-c2xs);
}
&.\@xs\:fi-grid-col-span {
@apply @xs:col-(--col-span-cxs);
}
&.\@sm\:fi-grid-col-span {
@apply @sm:col-(--col-span-csm);
}
&.\@md\:fi-grid-col-span {
@apply @md:col-(--col-span-cmd);
}
&.\@lg\:fi-grid-col-span {
@apply @lg:col-(--col-span-clg);
}
&.\@xl\:fi-grid-col-span {
@apply @xl:col-(--col-span-cxl);
}
&.\@2xl\:fi-grid-col-span {
@apply @2xl:col-(--col-span-c2xl);
}
&.\@3xl\:fi-grid-col-span {
@apply @3xl:col-(--col-span-c3xl);
}
&.\@4xl\:fi-grid-col-span {
@apply @4xl:col-(--col-span-c4xl);
}
&.\@5xl\:fi-grid-col-span {
@apply @5xl:col-(--col-span-c5xl);
}
&.\@6xl\:fi-grid-col-span {
@apply @6xl:col-(--col-span-c6xl);
}
&.\@7xl\:fi-grid-col-span {
@apply @7xl:col-(--col-span-c7xl);
}
}
@supports not (container-type: inline-size) {
&.\!\@sm\:fi-grid-col-span {
@apply sm:col-(--col-span-ncsm);
}
&.\!\@md\:fi-grid-col-span {
@apply md:col-(--col-span-ncmd);
}
&.\!\@lg\:fi-grid-col-span {
@apply lg:col-(--col-span-nclg);
}
&.\!\@xl\:fi-grid-col-span {
@apply xl:col-(--col-span-ncxl);
}
&.\!\@2xl\:fi-grid-col-span {
@apply 2xl:col-(--col-span-nc2xl);
}
}
&.fi-grid-col-start {
@apply col-start-(--col-start-default);
}
&.sm\:fi-grid-col-start {
@apply sm:col-start-(--col-start-sm);
}
&.md\:fi-grid-col-start {
@apply md:col-start-(--col-start-md);
}
&.lg\:fi-grid-col-start {
@apply lg:col-start-(--col-start-lg);
}
&.xl\:fi-grid-col-start {
@apply xl:col-start-(--col-start-xl);
}
&.\32xl\:fi-grid-col-start {
@apply 2xl:col-start-(--col-start-2xl);
}
@supports (container-type: inline-size) {
&.\@3xs\:fi-grid-col-start {
@apply @3xs:col-start-(--col-start-c3xs);
}
&.\@2xs\:fi-grid-col-start {
@apply @2xs:col-start-(--col-start-c2xs);
}
&.\@xs\:fi-grid-col-start {
@apply @xs:col-start-(--col-start-cxs);
}
&.\@sm\:fi-grid-col-start {
@apply @sm:col-start-(--col-start-csm);
}
&.\@md\:fi-grid-col-start {
@apply @md:col-start-(--col-start-cmd);
}
&.\@lg\:fi-grid-col-start {
@apply @lg:col-start-(--col-start-clg);
}
&.\@xl\:fi-grid-col-start {
@apply @xl:col-start-(--col-start-cxl);
}
&.\@2xl\:fi-grid-col-start {
@apply @2xl:col-start-(--col-start-c2xl);
}
&.\@3xl\:fi-grid-col-start {
@apply @3xl:col-start-(--col-start-c3xl);
}
&.\@4xl\:fi-grid-col-start {
@apply @4xl:col-start-(--col-start-c4xl);
}
&.\@5xl\:fi-grid-col-start {
@apply @5xl:col-start-(--col-start-c5xl);
}
&.\@6xl\:fi-grid-col-start {
@apply @6xl:col-start-(--col-start-c6xl);
}
&.\@7xl\:fi-grid-col-start {
@apply @7xl:col-start-(--col-start-c7xl);
}
}
@supports not (container-type: inline-size) {
&.\!\@sm\:fi-grid-col-start {
@apply sm:col-start-(--col-start-ncsm);
}
&.\!\@md\:fi-grid-col-start {
@apply md:col-start-(--col-start-ncmd);
}
&.\!\@lg\:fi-grid-col-start {
@apply lg:col-start-(--col-start-nclg);
}
&.\!\@xl\:fi-grid-col-start {
@apply xl:col-start-(--col-start-ncxl);
}
&.\!\@2xl\:fi-grid-col-start {
@apply 2xl:col-start-(--col-start-nc2xl);
}
}
&.fi-grid-col-order {
@apply order-(--col-order-default);
}
&.sm\:fi-grid-col-order {
@apply sm:order-(--col-order-sm);
}
&.md\:fi-grid-col-order {
@apply md:order-(--col-order-md);
}
&.lg\:fi-grid-col-order {
@apply lg:order-(--col-order-lg);
}
&.xl\:fi-grid-col-order {
@apply xl:order-(--col-order-xl);
}
&.\32xl\:fi-grid-col-order {
@apply 2xl:order-(--col-order-2xl);
}
@supports (container-type: inline-size) {
&.\@3xs\:fi-grid-col-order {
@apply @3xs:order-(--col-order-c3xs);
}
&.\@2xs\:fi-grid-col-order {
@apply @2xs:order-(--col-order-c2xs);
}
&.\@xs\:fi-grid-col-order {
@apply @xs:order-(--col-order-cxs);
}
&.\@sm\:fi-grid-col-order {
@apply @sm:order-(--col-order-csm);
}
&.\@md\:fi-grid-col-order {
@apply @md:order-(--col-order-cmd);
}
&.\@lg\:fi-grid-col-order {
@apply @lg:order-(--col-order-clg);
}
&.\@xl\:fi-grid-col-order {
@apply @xl:order-(--col-order-cxl);
}
&.\@2xl\:fi-grid-col-order {
@apply @2xl:order-(--col-order-c2xl);
}
&.\@3xl\:fi-grid-col-order {
@apply @3xl:order-(--col-order-c3xl);
}
&.\@4xl\:fi-grid-col-order {
@apply @4xl:order-(--col-order-c4xl);
}
&.\@5xl\:fi-grid-col-order {
@apply @5xl:order-(--col-order-c5xl);
}
&.\@6xl\:fi-grid-col-order {
@apply @6xl:order-(--col-order-c6xl);
}
&.\@7xl\:fi-grid-col-order {
@apply @7xl:order-(--col-order-c7xl);
}
}
@supports not (container-type: inline-size) {
&.\!\@sm\:fi-grid-col-order {
@apply sm:order-(--col-order-ncsm);
}
&.\!\@md\:fi-grid-col-order {
@apply md:order-(--col-order-ncmd);
}
&.\!\@lg\:fi-grid-col-order {
@apply lg:order-(--col-order-nclg);
}
&.\!\@xl\:fi-grid-col-order {
@apply xl:order-(--col-order-ncxl);
}
&.\!\@2xl\:fi-grid-col-order {
@apply 2xl:order-(--col-order-nc2xl);
}
}
&.fi-hidden {
@apply hidden;
}
}
@@ -0,0 +1,124 @@
.fi-icon-btn {
@apply relative -m-2 flex size-9 items-center justify-center rounded-lg text-gray-500 transition duration-75 outline-none dark:text-gray-500;
&.fi-force-enabled,
&:not(.fi-disabled):not([disabled]) {
@apply focus-visible:ring-primary-600 dark:focus-visible:ring-primary-500 hover:text-gray-600 focus-visible:ring-2 dark:hover:text-gray-400;
}
&.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 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-size-sm {
@apply size-8;
&:has(.fi-icon.fi-size-sm) {
@apply -m-2;
}
&:has(.fi-icon.fi-size-md) {
@apply -m-1.5;
}
&:has(.fi-icon.fi-size-lg) {
@apply -m-1;
}
}
&.fi-size-md {
&:has(.fi-icon.fi-size-sm) {
@apply -m-2.5;
}
&:has(.fi-icon.fi-size-lg) {
@apply -m-1.5;
}
}
&.fi-size-lg {
@apply size-10;
&:has(.fi-icon.fi-size-sm) {
@apply -m-3;
}
&:has(.fi-icon.fi-size-md) {
@apply -m-2.5;
}
&:has(.fi-icon.fi-size-lg) {
@apply -m-2;
}
}
&.fi-size-xl {
@apply size-11;
&:has(.fi-icon.fi-size-sm) {
@apply -m-3.5;
}
&:has(.fi-icon.fi-size-md) {
@apply -m-3;
}
&:has(.fi-icon.fi-size-lg) {
@apply -m-2.5;
}
}
&.fi-color {
@apply text-(--text) dark:text-(--dark-text);
&.fi-force-enabled,
&:not(.fi-disabled):not([disabled]) {
@apply focus-visible:ring-color-600 dark:focus-visible:ring-color-500 hover:text-(--hover-text) dark:hover:text-(--dark-hover-text);
}
}
& > .fi-icon-btn-badge-ctn {
@apply absolute start-full top-1 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;
}
&:has(+ .fi-btn.fi-labeled-from-sm) {
@apply sm:hidden;
}
&:has(+ .fi-btn.fi-labeled-from-md) {
@apply md:hidden;
}
&:has(+ .fi-btn.fi-labeled-from-lg) {
@apply lg:hidden;
}
&:has(+ .fi-btn.fi-labeled-from-xl) {
@apply xl:hidden;
}
&:has(+ .fi-btn.fi-labeled-from-2xl) {
@apply 2xl:hidden;
}
}
@@ -0,0 +1,31 @@
.fi-icon {
@apply size-5 max-h-5 max-w-5;
&.fi-size-xs {
@apply size-3 max-h-3 max-w-3;
}
&.fi-size-sm {
@apply size-4 max-h-4 max-w-4;
}
&.fi-size-md {
@apply size-5 max-h-5 max-w-5;
}
&.fi-size-lg {
@apply size-6 max-h-6 max-w-6;
}
&.fi-size-xl {
@apply size-7 max-h-7 max-w-7;
}
&.fi-size-2xl {
@apply size-8 max-h-8 max-w-8;
}
& > svg {
@apply h-[inherit] w-[inherit];
}
}
@@ -0,0 +1,32 @@
input[type='checkbox'].fi-checkbox-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 border-none bg-white align-middle shadow-sm ring-1 ring-gray-950/10 checked:ring-0 focus:ring-2 focus:ring-offset-0 focus:outline-none disabled:pointer-events-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%3Cpath d='M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0z'/%3E%3C/svg%3E");
}
&:indeterminate {
@apply bg-primary-600 dark:bg-primary-500 ring-0;
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%3Cpath d='M4.5 6.75a1.25 1.25 0 0 0 0 2.5h7a1.25 1.25 0 0 0 0-2.5h-7z'/%3E%3C/svg%3E");
&:focus {
@apply ring-primary-500/50 dark:ring-primary-400/50 ring-2;
}
&:disabled {
@apply bg-gray-400 dark:bg-gray-600;
}
}
&.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;
&:indeterminate {
@apply bg-danger-600 dark:bg-danger-500;
&:focus {
@apply ring-danger-500/50 dark:ring-danger-400/50;
}
}
}
}
@@ -0,0 +1,48 @@
input.fi-input {
/* A fully transparent white background color is used
instead transparent to fix a Safari bug
where the date/time input "placeholder" colors too dark.
https://github.com/filamentphp/filament/issues/7087 */
@apply block w-full appearance-none border-none bg-white/0 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='range'].fi-input {
@apply mx-auto appearance-auto;
width: calc(100% - 1.5rem);
}
@@ -0,0 +1,19 @@
input[type='text'].fi-one-time-code-input {
@apply absolute inset-y-0 -right-8 left-0 block border-none bg-transparent px-3 font-mono tracking-[1.72rem] 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)];
&.fi-valid {
@apply caret-transparent;
}
}
.fi-one-time-code-input-ctn {
@apply relative h-12;
& > .fi-one-time-code-input-digit-field {
@apply inline-block h-full w-8 rounded-lg border border-gray-950/10 bg-white dark:border-white/20 dark:bg-white/5;
&.fi-active {
@apply border-primary-600 dark:border-primary-500 border-2;
}
}
}
@@ -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;
}
}
@@ -0,0 +1,112 @@
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-value-label {
@apply flex-1;
}
& .fi-select-input-value-remove-btn {
@apply ms-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;
}
& .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-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;
}
}
}
@@ -0,0 +1,87 @@
.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-ac-action: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-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;
}
}
}
}
@@ -0,0 +1,84 @@
.fi-link {
@apply relative inline-flex items-center justify-center gap-1.5 font-medium text-gray-700 outline-none dark:text-gray-200;
&.fi-force-enabled,
&:not(.fi-disabled):not([disabled]) {
@apply hover:underline focus-visible:underline;
}
&.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;
}
@@ -0,0 +1,3 @@
.fi-loading-indicator {
@apply animate-spin;
}
@@ -0,0 +1,3 @@
.fi-loading-section {
@apply animate-pulse;
}
@@ -0,0 +1,403 @@
.fi-modal {
&.fi-modal-slide-over,
&.fi-width-screen {
& > .fi-modal-window-ctn > .fi-modal-window {
@apply h-dvh;
& .fi-modal-content {
@apply flex-1;
}
}
}
&.fi-modal-slide-over {
& > .fi-modal-window-ctn > .fi-modal-window {
@apply ms-auto overflow-y-auto;
&.fi-transition-enter-start,
&.fi-transition-leave-end {
@apply translate-x-full rtl:-translate-x-full;
}
&.fi-transition-enter-end,
&.fi-transition-leave-start {
@apply translate-x-0;
}
& .fi-modal-header {
@apply gap-x-3;
}
& .fi-modal-icon-bg {
@apply -my-2 -ms-2 p-2;
}
& .fi-modal-close-btn {
@apply end-6 top-6;
}
}
}
&:not(.fi-modal-slide-over) {
&:not(.fi-width-screen) {
& > .fi-modal-window-ctn {
@apply overflow-y-auto;
& .fi-modal-footer {
&.fi-sticky {
@apply rounded-b-xl;
}
}
}
}
& > .fi-modal-window-ctn > .fi-modal-window {
&.fi-transition-enter-start,
&.fi-transition-leave-end {
@apply scale-95 opacity-0;
}
&.fi-transition-enter-end,
&.fi-transition-leave-start {
@apply scale-100 opacity-100;
}
& .fi-modal-close-btn {
@apply end-4 top-4;
}
}
}
&.fi-align-start {
& > .fi-modal-window-ctn > .fi-modal-window-has-icon {
&:not(.fi-modal-window-has-sticky-header) {
& .fi-modal-content {
@apply ps-[5.25rem] pe-6;
}
& .fi-modal-footer {
&:not(.fi-align-center) {
@apply ps-[5.25rem] pe-6;
}
}
}
}
}
&:not(.fi-align-start) {
& > .fi-modal-window-ctn > .fi-modal-window {
& .fi-modal-content,
& .fi-modal-footer {
@apply px-6;
}
}
}
& > .fi-modal-close-overlay {
@apply fixed inset-0 z-40 bg-gray-950/50 dark:bg-gray-950/75;
}
& > .fi-modal-window-ctn {
@apply fixed inset-0 z-40 grid min-h-full grid-rows-[1fr_auto_1fr] justify-items-center sm:grid-rows-[1fr_auto_3fr];
&.fi-clickable {
@apply cursor-pointer;
}
}
&:not(.fi-modal-slide-over):not(.fi-width-screen) {
& > .fi-modal-window-ctn {
@apply p-4;
& .fi-modal-window {
@apply mx-auto rounded-xl;
& .fi-modal-header {
&.fi-sticky {
@apply rounded-t-xl;
}
}
}
}
}
& > .fi-modal-window-ctn > .fi-modal-window {
@apply pointer-events-auto relative row-start-2 flex w-full cursor-default flex-col bg-white shadow-xl ring-1 ring-gray-950/5 dark:bg-gray-900 dark:ring-white/10;
& .fi-modal-header {
@apply flex px-6 pt-6;
&.fi-vertical-align-center {
@apply items-center;
}
&.fi-sticky {
@apply sticky top-0 z-10 border-b border-gray-200 bg-white pb-6 dark:border-white/10 dark:bg-gray-900;
}
}
& .fi-modal-heading {
@apply text-base leading-6 font-semibold text-gray-950 dark:text-white;
}
& .fi-modal-description {
@apply mt-2 text-sm text-gray-500 dark:text-gray-400;
}
& .fi-modal-content {
@apply flex flex-col gap-y-4 py-6;
}
&.fi-align-start,
&.fi-align-left {
& .fi-modal-header {
@apply gap-x-5;
}
& .fi-modal-icon-bg {
@apply p-2;
}
}
&.fi-align-center {
& .fi-modal-header {
@apply flex-col text-center;
}
& .fi-modal-icon-ctn {
@apply mb-5 flex items-center justify-center;
}
& .fi-modal-icon-bg {
@apply p-3;
}
}
&.fi-hidden {
@apply hidden;
}
&.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-full {
@apply max-w-full;
}
&.fi-width-min {
@apply max-w-min;
}
&.fi-width-max {
@apply max-w-max;
}
&.fi-width-fit {
@apply max-w-fit;
}
&.fi-width-prose {
@apply max-w-prose;
}
&.fi-width-screen-sm {
@apply max-w-screen-sm;
}
&.fi-width-screen-md {
@apply max-w-screen-md;
}
&.fi-width-screen-lg {
@apply max-w-screen-lg;
}
&.fi-width-screen-xl {
@apply max-w-screen-xl;
}
&.fi-width-screen-2xl {
@apply max-w-screen-2xl;
}
&.fi-width-screen {
@apply fixed inset-0;
}
&.fi-transition-enter,
&.fi-transition-leave {
@apply duration-300;
}
&:not(.fi-modal-window-has-content) {
& .fi-modal-footer {
&:not(.fi-sticky) {
@apply mt-6;
}
}
&:not(.fi-modal-window-has-footer) {
& .fi-modal-header {
@apply pb-6;
}
}
}
&:not(.fi-modal-window-has-icon),
&.fi-modal-window-has-sticky-header {
& .fi-modal-content,
& .fi-modal-footer {
@apply px-6;
}
}
&.fi-modal-window-has-close-btn {
&.fi-align-center:not(.fi-modal-window-has-icon) {
& .fi-modal-heading {
@apply ms-6;
}
}
&:not(.fi-modal-window-has-icon),
&.fi-align-start,
&.fi-align-left {
& .fi-modal-heading {
@apply me-6;
}
}
}
& .fi-modal-close-btn {
@apply absolute;
}
& .fi-modal-footer {
@apply w-full;
&.fi-sticky {
@apply sticky bottom-0 border-t border-gray-200 bg-white py-5 dark:border-white/10 dark:bg-gray-900;
}
&:not(.fi-sticky) {
@apply pb-6;
}
&:is(.fi-modal-slide-over .fi-modal-footer) {
@apply mt-auto;
}
& .fi-modal-footer-actions {
@apply gap-3;
}
&.fi-align-start,
&.fi-align-left {
& .fi-modal-footer-actions {
@apply flex flex-wrap items-center;
}
}
&.fi-align-center {
@apply px-6;
& .fi-modal-footer-actions {
@apply flex flex-col-reverse;
}
}
&.fi-align-end,
&.fi-align-right {
& .fi-modal-footer-actions {
@apply flex flex-row-reverse flex-wrap items-center;
}
}
}
& .fi-modal-icon-bg {
@apply rounded-full bg-gray-100 dark:bg-gray-500/20;
& > .fi-icon {
@apply text-gray-500 dark:text-gray-400;
}
&.fi-color {
@apply bg-color-100 dark:bg-color-500/20;
& > .fi-icon {
@apply text-color-600 dark:text-color-400;
}
}
}
}
@supports (container-type: inline-size) {
& > .fi-modal-window-ctn > .fi-modal-window {
@apply @container;
& .fi-modal-footer {
&.fi-align-center {
& .fi-modal-footer-actions {
@apply @sm:grid @sm:grid-cols-[repeat(auto-fit,minmax(0,1fr))];
}
}
}
}
}
@supports not (container-type: inline-size) {
& > .fi-modal-window-ctn > .fi-modal-window {
& .fi-modal-footer {
&.fi-align-center {
& .fi-modal-footer-actions {
@apply sm:grid sm:grid-cols-[repeat(auto-fit,minmax(0,1fr))];
}
}
}
}
}
}
& .fi-modal-trigger {
@apply flex;
}
@@ -0,0 +1,143 @@
.fi-pagination {
@apply grid grid-cols-[1fr_auto_1fr] items-center gap-x-3;
&:empty {
@apply hidden;
}
& .fi-pagination-previous-btn {
@apply justify-self-start;
}
& .fi-pagination-overview {
@apply hidden text-sm font-medium text-gray-700 dark:text-gray-200;
}
& .fi-pagination-records-per-page-select-ctn {
@apply col-start-2 justify-self-center;
}
& .fi-pagination-records-per-page-select {
&:not(.fi-compact) {
@apply hidden;
}
}
& .fi-pagination-next-btn {
@apply col-start-3 justify-self-end;
}
& .fi-pagination-items {
@apply hidden justify-self-end rounded-lg bg-white shadow-sm ring-1 ring-gray-950/10 dark:bg-white/5 dark:ring-white/20;
}
& .fi-pagination-item {
@apply border-x-[0.5px] border-gray-200 first:border-s-0 last:border-e-0 dark:border-white/10;
&.fi-active {
& .fi-pagination-item-btn {
@apply bg-gray-50 dark:bg-white/5;
}
& .fi-pagination-item-label {
@apply text-primary-700 dark:text-primary-400;
}
}
&:first-of-type {
& .fi-pagination-item-btn {
@apply rounded-s-lg;
}
}
&:last-of-type {
& .fi-pagination-item-btn {
@apply rounded-e-lg;
}
}
&.fi-disabled {
& .fi-pagination-item-label {
@apply text-gray-500 dark:text-gray-400;
}
}
}
& .fi-pagination-item-btn {
@apply relative flex overflow-hidden p-2 transition duration-75 outline-none;
&:enabled {
@apply focus-visible:ring-primary-600 dark:focus-visible:ring-primary-500 hover:bg-gray-50 focus-visible:z-10 focus-visible:ring-2 dark:hover:bg-white/5;
}
&:hover {
& .fi-icon {
@apply text-gray-500 dark:text-gray-400;
}
}
& .fi-icon {
@apply text-gray-400 transition duration-75 dark:text-gray-500;
}
& .fi-pagination-item-label {
@apply px-1.5 text-sm font-semibold text-gray-700 dark:text-gray-200;
}
}
@supports (container-type: inline-size) {
@apply @container;
& .fi-pagination-records-per-page-select {
&:not(.fi-compact) {
@apply @md:inline;
}
&.fi-compact {
@apply @md:hidden;
}
}
&:not(.fi-simple) {
& .fi-pagination-previous-btn,
& .fi-pagination-next-btn {
@apply @4xl:hidden;
}
}
& .fi-pagination-overview {
@apply @4xl:inline;
}
& .fi-pagination-items {
@apply @4xl:flex;
}
}
@supports not (container-type: inline-size) {
& .fi-pagination-records-per-page-select {
&:not(.fi-compact) {
@apply sm:inline;
}
&.fi-compact {
@apply sm:hidden;
}
}
&:not(.fi-simple) {
& .fi-pagination-previous-btn,
& .fi-pagination-next-btn {
@apply md:hidden;
}
}
& .fi-pagination-overview {
@apply md:inline;
}
& .fi-pagination-items {
@apply md:flex;
}
}
}
@@ -0,0 +1,224 @@
.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;
& > .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 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 invisible absolute h-0 overflow-hidden border-none;
}
}
&.fi-section-has-content-before {
& > .fi-section-content-ctn {
@apply md:order-first;
}
}
& > .fi-section-header {
@apply flex items-center 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-after-ctn {
& .fi-sc-text,
& .fi-link {
@apply leading-6;
}
& .fi-btn {
&.fi-size-xs {
@apply -my-0.5;
}
&.fi-size-sm {
@apply -my-1;
}
&.fi-size-md {
@apply -my-1.5;
}
&.fi-size-lg {
@apply -my-2;
}
&.fi-size-xl {
@apply -my-2.5;
}
}
}
& > .fi-section-collapse-btn {
@apply -my-1.5 shrink-0;
}
}
& .fi-section-header-text-ctn {
@apply grid flex-1 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;
}
}
@@ -0,0 +1,66 @@
.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;
}
}
@@ -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;
}
}
}
}
@@ -0,0 +1,131 @@
@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/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 './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);
}
@@ -0,0 +1,3 @@
.fi-sortable-ghost {
@apply opacity-30;
}
@@ -0,0 +1,833 @@
.fi-color-danger {
--color-50: var(--danger-50);
--color-100: var(--danger-100);
--color-200: var(--danger-200);
--color-300: var(--danger-300);
--color-400: var(--danger-400);
--color-500: var(--danger-500);
--color-600: var(--danger-600);
--color-700: var(--danger-700);
--color-800: var(--danger-800);
--color-900: var(--danger-900);
--color-950: var(--danger-950);
}
.fi-color-gray {
--color-50: var(--gray-50);
--color-100: var(--gray-100);
--color-200: var(--gray-200);
--color-300: var(--gray-300);
--color-400: var(--gray-400);
--color-500: var(--gray-500);
--color-600: var(--gray-600);
--color-700: var(--gray-700);
--color-800: var(--gray-800);
--color-900: var(--gray-900);
--color-950: var(--gray-950);
}
.fi-color-info {
--color-50: var(--info-50);
--color-100: var(--info-100);
--color-200: var(--info-200);
--color-300: var(--info-300);
--color-400: var(--info-400);
--color-500: var(--info-500);
--color-600: var(--info-600);
--color-700: var(--info-700);
--color-800: var(--info-800);
--color-900: var(--info-900);
--color-950: var(--info-950);
}
.fi-color-primary {
--color-50: var(--primary-50);
--color-100: var(--primary-100);
--color-200: var(--primary-200);
--color-300: var(--primary-300);
--color-400: var(--primary-400);
--color-500: var(--primary-500);
--color-600: var(--primary-600);
--color-700: var(--primary-700);
--color-800: var(--primary-800);
--color-900: var(--primary-900);
--color-950: var(--primary-950);
}
.fi-color-success {
--color-50: var(--success-50);
--color-100: var(--success-100);
--color-200: var(--success-200);
--color-300: var(--success-300);
--color-400: var(--success-400);
--color-500: var(--success-500);
--color-600: var(--success-600);
--color-700: var(--success-700);
--color-800: var(--success-800);
--color-900: var(--success-900);
--color-950: var(--success-950);
}
.fi-color-warning {
--color-50: var(--warning-50);
--color-100: var(--warning-100);
--color-200: var(--warning-200);
--color-300: var(--warning-300);
--color-400: var(--warning-400);
--color-500: var(--warning-500);
--color-600: var(--warning-600);
--color-700: var(--warning-700);
--color-800: var(--warning-800);
--color-900: var(--warning-900);
--color-950: var(--warning-950);
}
.fi-bg-color-50 {
--bg: var(--color-50);
}
.fi-bg-color-100 {
--bg: var(--color-100);
}
.fi-bg-color-200 {
--bg: var(--color-200);
}
.fi-bg-color-300 {
--bg: var(--color-300);
}
.fi-bg-color-400 {
--bg: var(--color-400);
}
.fi-bg-color-500 {
--bg: var(--color-500);
}
.fi-bg-color-600 {
--bg: var(--color-600);
}
.fi-bg-color-700 {
--bg: var(--color-700);
}
.fi-bg-color-800 {
--bg: var(--color-800);
}
.fi-bg-color-900 {
--bg: var(--color-900);
}
.fi-bg-color-950 {
--bg: var(--color-950);
}
.hover\:fi-bg-color-50 {
--hover-bg: var(--color-50);
}
.hover\:fi-bg-color-100 {
--hover-bg: var(--color-100);
}
.hover\:fi-bg-color-200 {
--hover-bg: var(--color-200);
}
.hover\:fi-bg-color-300 {
--hover-bg: var(--color-300);
}
.hover\:fi-bg-color-400 {
--hover-bg: var(--color-400);
}
.hover\:fi-bg-color-500 {
--hover-bg: var(--color-500);
}
.hover\:fi-bg-color-600 {
--hover-bg: var(--color-600);
}
.hover\:fi-bg-color-700 {
--hover-bg: var(--color-700);
}
.hover\:fi-bg-color-800 {
--hover-bg: var(--color-800);
}
.hover\:fi-bg-color-900 {
--hover-bg: var(--color-900);
}
.hover\:fi-bg-color-950 {
--hover-bg: var(--color-950);
}
.dark\:fi-bg-color-50 {
--dark-bg: var(--color-50);
}
.dark\:fi-bg-color-100 {
--dark-bg: var(--color-100);
}
.dark\:fi-bg-color-200 {
--dark-bg: var(--color-200);
}
.dark\:fi-bg-color-300 {
--dark-bg: var(--color-300);
}
.dark\:fi-bg-color-400 {
--dark-bg: var(--color-400);
}
.dark\:fi-bg-color-500 {
--dark-bg: var(--color-500);
}
.dark\:fi-bg-color-600 {
--dark-bg: var(--color-600);
}
.dark\:fi-bg-color-700 {
--dark-bg: var(--color-700);
}
.dark\:fi-bg-color-800 {
--dark-bg: var(--color-800);
}
.dark\:fi-bg-color-900 {
--dark-bg: var(--color-900);
}
.dark\:fi-bg-color-950 {
--dark-bg: var(--color-950);
}
.dark\:hover\:fi-bg-color-50 {
--dark-hover-bg: var(--color-50);
}
.dark\:hover\:fi-bg-color-100 {
--dark-hover-bg: var(--color-100);
}
.dark\:hover\:fi-bg-color-200 {
--dark-hover-bg: var(--color-200);
}
.dark\:hover\:fi-bg-color-300 {
--dark-hover-bg: var(--color-300);
}
.dark\:hover\:fi-bg-color-400 {
--dark-hover-bg: var(--color-400);
}
.dark\:hover\:fi-bg-color-500 {
--dark-hover-bg: var(--color-500);
}
.dark\:hover\:fi-bg-color-600 {
--dark-hover-bg: var(--color-600);
}
.dark\:hover\:fi-bg-color-700 {
--dark-hover-bg: var(--color-700);
}
.dark\:hover\:fi-bg-color-800 {
--dark-hover-bg: var(--color-800);
}
.dark\:hover\:fi-bg-color-900 {
--dark-hover-bg: var(--color-900);
}
.dark\:hover\:fi-bg-color-950 {
--dark-hover-bg: var(--color-950);
}
.fi-text-color-0 {
--text: oklch(1 0 0);
}
.fi-text-color-50 {
--text: var(--color-50);
}
.fi-text-color-100 {
--text: var(--color-100);
}
.fi-text-color-200 {
--text: var(--color-200);
}
.fi-text-color-300 {
--text: var(--color-300);
}
.fi-text-color-400 {
--text: var(--color-400);
}
.fi-text-color-500 {
--text: var(--color-500);
}
.fi-text-color-600 {
--text: var(--color-600);
}
.fi-text-color-700 {
--text: var(--color-700);
}
.fi-text-color-800 {
--text: var(--color-800);
}
.fi-text-color-900 {
--text: var(--color-900);
}
.fi-text-color-950 {
--text: var(--color-950);
}
.hover\:fi-text-color-0 {
--hover-text: oklch(1 0 0);
}
.hover\:fi-text-color-50 {
--hover-text: var(--color-50);
}
.hover\:fi-text-color-100 {
--hover-text: var(--color-100);
}
.hover\:fi-text-color-200 {
--hover-text: var(--color-200);
}
.hover\:fi-text-color-300 {
--hover-text: var(--color-300);
}
.hover\:fi-text-color-400 {
--hover-text: var(--color-400);
}
.hover\:fi-text-color-500 {
--hover-text: var(--color-500);
}
.hover\:fi-text-color-600 {
--hover-text: var(--color-600);
}
.hover\:fi-text-color-700 {
--hover-text: var(--color-700);
}
.hover\:fi-text-color-800 {
--hover-text: var(--color-800);
}
.hover\:fi-text-color-900 {
--hover-text: var(--color-900);
}
.hover\:fi-text-color-950 {
--hover-text: var(--color-950);
}
.dark\:fi-text-color-0 {
--dark-text: oklch(1 0 0);
}
.dark\:fi-text-color-50 {
--dark-text: var(--color-50);
}
.dark\:fi-text-color-100 {
--dark-text: var(--color-100);
}
.dark\:fi-text-color-200 {
--dark-text: var(--color-200);
}
.dark\:fi-text-color-300 {
--dark-text: var(--color-300);
}
.dark\:fi-text-color-400 {
--dark-text: var(--color-400);
}
.dark\:fi-text-color-500 {
--dark-text: var(--color-500);
}
.dark\:fi-text-color-600 {
--dark-text: var(--color-600);
}
.dark\:fi-text-color-700 {
--dark-text: var(--color-700);
}
.dark\:fi-text-color-800 {
--dark-text: var(--color-800);
}
.dark\:fi-text-color-900 {
--dark-text: var(--color-900);
}
.dark\:fi-text-color-950 {
--dark-text: var(--color-950);
}
.dark\:hover\:fi-text-color-0 {
--dark-hover-text: oklch(1 0 0);
}
.dark\:hover\:fi-text-color-50 {
--dark-hover-text: var(--color-50);
}
.dark\:hover\:fi-text-color-100 {
--dark-hover-text: var(--color-100);
}
.dark\:hover\:fi-text-color-200 {
--dark-hover-text: var(--color-200);
}
.dark\:hover\:fi-text-color-300 {
--dark-hover-text: var(--color-300);
}
.dark\:hover\:fi-text-color-400 {
--dark-hover-text: var(--color-400);
}
.dark\:hover\:fi-text-color-500 {
--dark-hover-text: var(--color-500);
}
.dark\:hover\:fi-text-color-600 {
--dark-hover-text: var(--color-600);
}
.dark\:hover\:fi-text-color-700 {
--dark-hover-text: var(--color-700);
}
.dark\:hover\:fi-text-color-800 {
--dark-hover-text: var(--color-800);
}
.dark\:hover\:fi-text-color-900 {
--dark-hover-text: var(--color-900);
}
.dark\:hover\:fi-text-color-950 {
--dark-hover-text: var(--color-950);
}
.fi-sr-only {
@apply sr-only;
}
.fi-prose {
--prose-color: var(--color-gray-700);
--prose-heading-color: var(--color-gray-950);
--prose-strong-color: var(--color-gray-950);
--prose-link-color: var(--color-gray-950);
--prose-code-color: var(--color-gray-950);
--prose-marker-color: color-mix(
in oklab,
var(--color-gray-700) 25%,
transparent
);
--prose-link-underline-color: var(--color-primary-400);
--prose-th-borders: var(--color-gray-300);
--prose-td-borders: var(--color-gray-200);
--prose-hr-color: color-mix(
in oklab,
var(--color-gray-950) 5%,
transparent
);
--prose-blockquote-border-color: var(--color-gray-300);
--prose-pre-bg: var(--color-gray-100);
@variant dark {
--prose-color: var(--color-gray-300);
--prose-heading-color: var(--color-white);
--prose-strong-color: var(--color-white);
--prose-link-color: var(--color-white);
--prose-code-color: var(--color-white);
--prose-marker-color: color-mix(
in oklab,
var(--color-gray-300) 35%,
transparent
);
--prose-link-underline-color: var(--color-sky-400);
--prose-th-borders: var(--color-gray-600);
--prose-td-borders: var(--color-gray-700);
--prose-hr-color: color-mix(
in oklab,
var(--color-white) 10%,
transparent
);
--prose-blockquote-border-color: var(--color-gray-600);
--prose-pre-bg: color-mix(
in oklab,
var(--color-gray-900) 40%,
transparent
);
}
color: var(--prose-color);
font-size: var(--text-sm);
line-height: 1.5;
*:where(:not(.fi-not-prose, .fi-not-prose *))
+ *:where(:not(.fi-not-prose, .fi-not-prose *)) {
margin-top: calc(var(--spacing) * 4);
}
h1:where(:not(.fi-not-prose, .fi-not-prose *)) {
font-size: var(--text-xl);
line-height: calc(28 / 18);
letter-spacing: -0.025em;
color: var(--prose-code-color);
font-weight: var(--font-weight-bold);
}
h2:where(:not(.fi-not-prose, .fi-not-prose *)) {
font-size: var(--text-lg);
line-height: calc(28 / 18);
letter-spacing: -0.025em;
color: var(--prose-code-color);
font-weight: var(--font-weight-semibold);
}
h3:where(:not(.fi-not-prose, .fi-not-prose *)) {
font-size: var(--text-base);
line-height: calc(28 / 18);
color: var(--prose-heading-color);
font-weight: var(--font-weight-semibold);
}
h4:where(:not(.fi-not-prose, .fi-not-prose *)),
h5:where(:not(.fi-not-prose, .fi-not-prose *)),
h6:where(:not(.fi-not-prose, .fi-not-prose *)) {
font-size: var(--text-sm);
line-height: calc(28 / 14);
color: var(--prose-heading-color);
font-weight: var(--font-weight-semibold);
}
:is(h2, h3, h4, h5, h6):where(:not(.fi-not-prose, .fi-not-prose *)) {
scroll-margin-top: calc(var(--spacing) * 32);
@variant lg {
scroll-margin-top: calc(var(--spacing) * 18);
}
}
ol:where(:not(.fi-not-prose, .fi-not-prose *)) {
padding-inline-start: calc(var(--spacing) * 6);
list-style-type: decimal;
}
ul:where(:not(.fi-not-prose, .fi-not-prose *)) {
padding-inline-start: calc(var(--spacing) * 6);
list-style-type: disc;
}
ol li:where(:not(.fi-not-prose, .fi-not-prose *)),
ul li:where(:not(.fi-not-prose, .fi-not-prose *)) {
padding-inline-start: calc(var(--spacing) * 3);
}
ol li + li:where(:not(.fi-not-prose, .fi-not-prose *)),
ul li + li:where(:not(.fi-not-prose, .fi-not-prose *)) {
margin-top: calc(var(--spacing) * 4);
}
ol li:where(:not(.fi-not-prose, .fi-not-prose *))::marker,
ul li:where(:not(.fi-not-prose, .fi-not-prose *))::marker {
color: var(--prose-marker-color);
}
a:not(:where(:is(h2, h3, h4, h5, h6) *)):where(
:not(.fi-not-prose, .fi-not-prose *)
) {
color: var(--prose-link-color);
font-weight: var(--font-weight-semibold);
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-color: var(--prose-link-underline-color);
text-decoration-thickness: 1px;
& code {
font-weight: var(--font-weight-semibold);
}
}
a:hover:where(:not(.fi-not-prose, .fi-not-prose *)) {
text-decoration-thickness: 2px;
}
strong:where(:not(.fi-not-prose, .fi-not-prose *)) {
color: var(--prose-strong-color);
font-weight: var(--font-weight-semibold);
}
code:where(:not(.fi-not-prose, .fi-not-prose *)) {
font-variant-ligatures: none;
font-family: var(--font-mono);
font-weight: var(--font-weight-medium);
color: var(--prose-code-color);
}
:where(h2, h3, h4, h5, h6)
code:where(:not(.fi-not-prose, .fi-not-prose *)) {
font-weight: var(--font-weight-semibold);
}
code:where(:not(.fi-not-prose, .fi-not-prose *))::before,
code:where(:not(.fi-not-prose, .fi-not-prose *))::after {
display: inline;
content: '`';
}
pre:where(:not(.fi-not-prose, .fi-not-prose *)) {
margin-top: calc(var(--spacing) * 4);
margin-bottom: calc(var(--spacing) * 10);
border-radius: var(--radius-lg);
padding-top: calc(var(--spacing) * 3);
padding-inline-end: calc(var(--spacing) * 4);
padding-bottom: calc(var(--spacing) * 3);
padding-inline-start: calc(var(--spacing) * 4);
background-color: var(--prose-pre-bg);
}
pre code * + *:where(:not(.fi-not-prose, .fi-not-prose *)) {
margin-top: 0;
}
pre code:where(:not(.fi-not-prose, .fi-not-prose *))::before,
pre code:where(:not(.fi-not-prose, .fi-not-prose *))::after {
content: none;
}
pre code:where(:not(.fi-not-prose, .fi-not-prose *)) {
font-variant-ligatures: none;
font-family: var(--font-mono);
font-size: var(--text-sm);
line-height: 2;
}
table:where(:not(.fi-not-prose, .fi-not-prose *)) {
width: 100%;
table-layout: auto;
margin-top: 2em;
margin-bottom: 2em;
font-size: var(--text-sm);
line-height: 1.4;
}
thead:where(:not(.fi-not-prose, .fi-not-prose *)) {
border-bottom-width: 1px;
border-bottom-color: var(--prose-th-borders);
}
thead th:where(:not(.fi-not-prose, .fi-not-prose *)) {
color: var(--prose-heading-color);
font-weight: 600;
vertical-align: bottom;
padding-inline-end: 0.6em;
padding-bottom: 0.8em;
padding-inline-start: 0.6em;
}
thead th:first-child:where(:not(.fi-not-prose, .fi-not-prose *)) {
padding-inline-start: 0;
}
thead th:last-child:where(:not(.fi-not-prose, .fi-not-prose *)) {
padding-inline-end: 0;
}
tbody tr:where(:not(.fi-not-prose, .fi-not-prose *)) {
border-bottom-width: 1px;
border-bottom-color: var(--prose-td-borders);
}
tbody tr:last-child:where(:not(.fi-not-prose, .fi-not-prose *)) {
border-bottom-width: 0;
}
tbody td:where(:not(.fi-not-prose, .fi-not-prose *)) {
vertical-align: baseline;
}
tfoot:where(:not(.fi-not-prose, .fi-not-prose *)) {
border-top-width: 1px;
border-top-color: var(--prose-th-borders);
}
tfoot td:where(:not(.fi-not-prose, .fi-not-prose *)) {
vertical-align: top;
}
tbody td:where(:not(.fi-not-prose, .fi-not-prose *)),
tfoot td:where(:not(.fi-not-prose, .fi-not-prose *)) {
padding-top: 0.8em;
padding-inline-end: 0.6em;
padding-bottom: 0.8em;
padding-inline-start: 0.6em;
}
tbody td:first-child:where(:not(.fi-not-prose, .fi-not-prose *)),
tfoot td:first-child:where(:not(.fi-not-prose, .fi-not-prose *)) {
padding-inline-start: 0;
}
tbody td:last-child:where(:not(.fi-not-prose, .fi-not-prose *)),
tfoot td:last-child:where(:not(.fi-not-prose, .fi-not-prose *)) {
padding-inline-end: 0;
}
th:where(:not(.fi-not-prose, .fi-not-prose *)),
td:where(:not(.fi-not-prose, .fi-not-prose *)) {
text-align: start;
}
td code:where(:not(.fi-not-prose, .fi-not-prose *)) {
font-size: 0.8125rem;
}
hr:where(:not(.fi-not-prose, .fi-not-prose *)) {
border-color: var(--prose-hr-color);
margin-block: --spacing(8);
& + h2 {
margin-top: --spacing(8);
}
}
blockquote {
font-style: italic;
border-inline-start-width: 0.25rem;
border-inline-start-color: var(--prose-blockquote-border-color);
padding-inline-start: calc(var(--spacing) * 4);
}
blockquote p:first-of-type::before {
content: open-quote;
}
blockquote p:last-of-type::after {
content: close-quote;
}
figure:where(:not(.fi-not-prose, .fi-not-prose *)) {
figcaption:where(:not(.fi-not-prose, .fi-not-prose *)) {
margin-top: calc(var(--spacing) * 3);
text-align: center;
font-size: var(--text-sm);
line-height: var(--text-sm--line-height);
font-style: italic;
color: color-mix(in oklab, var(--prose-color) 75%, transparent);
}
}
:first-child:where(:not(.fi-not-prose, .fi-not-prose *)) {
margin-top: 0;
}
:last-child:where(:not(.fi-not-prose, .fi-not-prose *)) {
margin-bottom: 0;
}
& .color:where(:not(.fi-not-prose, .fi-not-prose *)) {
@apply text-(--color) dark:text-(--dark-color);
}
& .lead:where(:not(.fi-not-prose, .fi-not-prose *)) {
font-size: var(--text-base);
}
& .grid-layout:where(:not(.fi-not-prose, .fi-not-prose *)) {
@apply grid grid-cols-1 gap-4;
&[data-from-breakpoint='default'] {
@apply grid-cols-(--cols);
& > .grid-layout-col {
@apply col-(--col-span);
}
}
&[data-from-breakpoint='sm'] {
@apply sm:grid-cols-(--cols);
& > .grid-layout-col {
@apply sm:col-(--col-span);
}
}
&[data-from-breakpoint='md'] {
@apply md:grid-cols-(--cols);
& > .grid-layout-col {
@apply md:col-(--col-span);
}
}
&[data-from-breakpoint='lg'] {
@apply lg:grid-cols-(--cols);
& > .grid-layout-col {
@apply lg:col-(--col-span);
}
}
&[data-from-breakpoint='xl'] {
@apply xl:grid-cols-(--cols);
& > .grid-layout-col {
@apply xl:col-(--col-span);
}
}
&[data-from-breakpoint='2xl'] {
@apply 2xl:grid-cols-(--cols);
& > .grid-layout-col {
@apply 2xl:col-(--col-span);
}
}
& > .grid-layout-col {
margin-top: 0;
min-width: 0;
}
}
}
@@ -0,0 +1,13 @@
export default () => ({
toggle(event) {
this.$refs.panel?.toggle(event)
},
open(event) {
this.$refs.panel?.open(event)
},
close(event) {
this.$refs.panel?.close(event)
},
})
@@ -0,0 +1,20 @@
export default () => ({
form: null,
isProcessing: false,
processingMessage: null,
init() {
const formElement = this.$el.closest('form')
formElement?.addEventListener('form-processing-started', (event) => {
this.isProcessing = true
this.processingMessage = event.detail.message
})
formElement?.addEventListener('form-processing-finished', () => {
this.isProcessing = false
})
},
})
@@ -0,0 +1,146 @@
export default ({ id }) => ({
isOpen: false,
isWindowVisible: false,
livewire: null,
textSelectionClosePreventionMouseDownHandler: null,
textSelectionClosePreventionMouseUpHandler: null,
textSelectionClosePreventionClickHandler: null,
init() {
this.$nextTick(() => {
this.isWindowVisible = this.isOpen
this.setUpTextSelectionClosePrevention()
this.$watch('isOpen', () => (this.isWindowVisible = this.isOpen))
})
},
setUpTextSelectionClosePrevention() {
// Ensure that the click element is not triggered from a user selecting text inside an input.
// https://github.com/filamentphp/filament/pull/18022
const windowSelector = '.fi-modal-window'
const closeOverlaySelector = '.fi-modal-close-overlay'
const capture = true
let isMouseDownOnModal = false
let mouseDownTime = 0
this.textSelectionClosePreventionClickHandler = (event) => {
event.stopPropagation()
event.preventDefault()
document.removeEventListener(
'click',
this.textSelectionClosePreventionClickHandler,
capture,
)
}
const isCloseOverlayClick = (event) => {
return (
!event.target.closest(windowSelector) &&
(event.target.closest(closeOverlaySelector) ||
event.target.closest('body'))
)
}
this.textSelectionClosePreventionMouseDownHandler = (event) => {
mouseDownTime = Date.now()
isMouseDownOnModal = !!event.target.closest(windowSelector)
}
this.textSelectionClosePreventionMouseUpHandler = (event) => {
const isClick = Date.now() - mouseDownTime < 75
if (isMouseDownOnModal && isCloseOverlayClick(event) && !isClick) {
document.addEventListener(
'click',
this.textSelectionClosePreventionClickHandler,
capture,
)
} else {
document.removeEventListener(
'click',
this.textSelectionClosePreventionClickHandler,
capture,
)
}
isMouseDownOnModal = false
}
document.addEventListener(
'mousedown',
this.textSelectionClosePreventionMouseDownHandler,
capture,
)
document.addEventListener(
'mouseup',
this.textSelectionClosePreventionMouseUpHandler,
capture,
)
},
close() {
this.closeQuietly()
this.$dispatch('modal-closed', { id })
},
closeQuietly() {
this.isOpen = false
},
open() {
this.$nextTick(() => {
this.isOpen = true
document.dispatchEvent(
new CustomEvent('x-modal-opened', {
bubbles: true,
composed: true,
detail: { id },
}),
)
})
},
destroy() {
const capture = true
if (this.textSelectionClosePreventionMouseDownHandler) {
document.removeEventListener(
'mousedown',
this.textSelectionClosePreventionMouseDownHandler,
capture,
)
this.textSelectionClosePreventionMouseDownHandler = null
}
if (this.textSelectionClosePreventionMouseUpHandler) {
document.removeEventListener(
'mouseup',
this.textSelectionClosePreventionMouseUpHandler,
capture,
)
this.textSelectionClosePreventionMouseUpHandler = null
}
if (this.textSelectionClosePreventionClickHandler) {
document.removeEventListener(
'click',
this.textSelectionClosePreventionClickHandler,
capture,
)
this.textSelectionClosePreventionClickHandler = null
}
},
})
@@ -0,0 +1,28 @@
import AlpineFloatingUI from '@awcodes/alpine-floating-ui'
import AlpineLazyLoadAssets from 'alpine-lazy-load-assets'
import AsyncAlpine from 'async-alpine'
import { md5 } from 'js-md5'
import Sortable from './sortable'
import Tooltip from '@ryangjchandler/alpine-tooltip'
import dropdown from './components/dropdown.js'
import formButton from './components/form-button.js'
import modal from './components/modal.js'
import './partials.js'
import pluralize from './utilities/pluralize.js'
import 'tippy.js/dist/tippy.css'
import 'tippy.js/themes/light.css'
document.addEventListener('alpine:init', () => {
window.Alpine.plugin(AlpineFloatingUI)
window.Alpine.plugin(AlpineLazyLoadAssets)
window.Alpine.plugin(AsyncAlpine)
window.Alpine.plugin(Sortable)
window.Alpine.plugin(Tooltip)
window.Alpine.data('filamentDropdown', dropdown)
window.Alpine.data('filamentFormButton', formButton)
window.Alpine.data('filamentModal', modal)
})
window.jsMd5 = md5
window.pluralize = pluralize
@@ -0,0 +1,120 @@
document.addEventListener('livewire:init', () => {
const findClosestLivewireComponent = (el) => {
let closestRoot = Alpine.findClosest(el, (i) => i.__livewire)
if (!closestRoot) {
throw 'Could not find Livewire component in DOM tree.'
}
return closestRoot.__livewire
}
Livewire.hook('commit', ({ component, commit, respond, succeed, fail }) => {
respond(() => {
queueMicrotask(() => {
if (component.effects.html) {
return
}
for (const [name, html] of Object.entries(
component.effects.partials ?? {},
)) {
let els = Array.from(
component.el.querySelectorAll(
`[wire\\:partial="${name}"]`,
),
).filter(
(el) => findClosestLivewireComponent(el) === component,
)
if (!els.length) {
continue
}
if (els.length > 1) {
throw `Multiple elements found for partial [${name}].`
}
let el = els[0]
let wrapperTag = el.parentElement
? // If the root element is a "tr", we need the wrapper to be a "table"...
el.parentElement.tagName.toLowerCase()
: 'div'
let wrapper = document.createElement(wrapperTag)
wrapper.innerHTML = html
wrapper.__livewire = component
let to = wrapper.firstElementChild
to.__livewire = component
window.Alpine.morph(el, to, {
updating: (el, toEl, childrenOnly, skip) => {
if (isntElement(el)) {
return
}
if (el.__livewire_replace === true) {
el.innerHTML = toEl.innerHTML
}
if (el.__livewire_replace_self === true) {
el.outerHTML = toEl.outerHTML
return skip()
}
if (el.__livewire_ignore === true) {
return skip()
}
if (el.__livewire_ignore_self === true) {
childrenOnly()
}
if (
isComponentRootEl(el) &&
el.getAttribute('wire:id') !== component.id
) {
return skip()
}
if (isComponentRootEl(el)) {
toEl.__livewire = component
}
},
key: (el) => {
if (isntElement(el)) {
return
}
if (el.hasAttribute(`wire:key`)) {
return el.getAttribute(`wire:key`)
}
if (el.hasAttribute(`wire:id`)) {
return el.getAttribute(`wire:id`)
}
return el.id
},
lookahead: false,
})
}
})
})
function isntElement(el) {
return typeof el.hasAttribute !== 'function'
}
function isComponentRootEl(el) {
return el.hasAttribute('wire:id')
}
})
})
@@ -0,0 +1,47 @@
import Sortable from 'sortablejs'
window.Sortable = Sortable
export default (Alpine) => {
Alpine.directive('sortable', (el) => {
let animation = parseInt(el.dataset?.sortableAnimationDuration)
if (animation !== 0 && !animation) {
animation = 300
}
el.sortable = Sortable.create(el, {
group: el.getAttribute('x-sortable-group'),
draggable: '[x-sortable-item]',
handle: '[x-sortable-handle]',
dataIdAttr: 'x-sortable-item',
animation: animation,
ghostClass: 'fi-sortable-ghost',
onEnd(event) {
// https://github.com/filamentphp/filament/issues/17402
const {
item: draggedNode,
to: parentNode,
oldDraggableIndex,
newDraggableIndex,
} = event
if (oldDraggableIndex === newDraggableIndex) {
return
}
const draggableSelector = this.options.draggable
const previousNode = parentNode.querySelectorAll(
`:scope > ${draggableSelector}`,
)[newDraggableIndex - 1]
if (previousNode) {
parentNode.insertBefore(
draggedNode,
previousNode.nextSibling,
)
}
},
})
})
}
@@ -0,0 +1,88 @@
// https://github.com/laravel/framework/blob/5299c22321c0f1ea8ff770b84a6c6469c4d6edec/src/Illuminate/Translation/MessageSelector.php#L15
export default (text, number, variables) => {
const extract = (segments, number) => {
for (const part of segments) {
const line = extractFromString(part, number)
if (line !== null) {
return line
}
}
}
const extractFromString = (part, number) => {
const matches = part.match(/^[\{\[]([^\[\]\{\}]*)[\}\]](.*)/s)
if (matches === null || matches.length !== 3) {
return null
}
const condition = matches[1]
const value = matches[2]
if (condition.includes(',')) {
const [from, to] = condition.split(',', 2)
if (to === '*' && number >= from) {
return value
} else if (from === '*' && number <= to) {
return value
} else if (number >= from && number <= to) {
return value
}
}
return condition == number ? value : null
}
const ucfirst = (string) => {
return (
string.toString().charAt(0).toUpperCase() +
string.toString().slice(1)
)
}
const replace = (line, replace) => {
if (replace.length === 0) {
return line
}
const shouldReplace = {}
for (let [key, value] of Object.entries(replace)) {
shouldReplace[':' + ucfirst(key ?? '')] = ucfirst(value ?? '')
shouldReplace[':' + key.toUpperCase()] = value
.toString()
.toUpperCase()
shouldReplace[':' + key] = value
}
Object.entries(shouldReplace).forEach(([key, value]) => {
line = line.replaceAll(key, value)
})
return line
}
const stripConditions = (segments) => {
return segments.map((part) =>
part.replace(/^[\{\[]([^\[\]\{\}]*)[\}\]]/, ''),
)
}
let segments = text.split('|')
const value = extract(segments, number)
if (value !== null && value !== undefined) {
return replace(value.trim(), variables)
}
segments = stripConditions(segments)
return replace(
segments.length > 1 && number > 1 ? segments[1] : segments[0],
variables,
)
}
File diff suppressed because it is too large Load Diff
@@ -0,0 +1,9 @@
<?php
return [
'messages' => [
'uploading_file' => 'በመጫን ላይ...',
],
];
@@ -0,0 +1,9 @@
<?php
return [
'messages' => [
'copied' => 'ተቀድቶዋል',
],
];
@@ -0,0 +1,12 @@
<?php
return [
'actions' => [
'close' => [
'label' => 'ዝጋ',
],
],
];
@@ -0,0 +1,41 @@
<?php
return [
'label' => 'የገጽታ አሰሳ',
'overview' => '{1} ከ1 መዝገብ 1 በማሳየት ላይ |[2,*] ከጠቅላላ :total መዝገቦች ከ:first እስከ :last በማሳየት ላይ::',
'fields' => [
'records_per_page' => [
'label' => 'በየ ገጽ',
'options' => [
'all' => 'ሁሉም',
],
],
],
'actions' => [
'first' => [
'label' => 'መጀመርያ',
],
'go_to_page' => [
'label' => 'ወደ ገጽ :page ሂድ',
],
'last' => [
'label' => 'መጨረሻ',
],
'next' => [
'label' => 'ቀጣይ',
],
'previous' => [
'label' => 'ያለፈው',
],
],
];
@@ -0,0 +1,9 @@
<?php
return [
'messages' => [
'uploading_file' => 'جاري رفع الملف...',
],
];
@@ -0,0 +1,9 @@
<?php
return [
'messages' => [
'copied' => 'تم النسخ',
],
];
@@ -0,0 +1,13 @@
<?php
return [
'actions' => [
'close' => [
'label' => 'إغلاق',
],
],
];
@@ -0,0 +1,47 @@
<?php
return [
'label' => 'التنقل بين الصفحات',
'overview' => '{1} عرض نتيجة واحدة|[3,10] عرض :first إلى :last من :total نتائج|[2,*] عرض :first إلى :last من :total نتيجة',
'fields' => [
'records_per_page' => [
'label' => 'لكل صفحة',
'options' => [
'all' => 'الكل',
],
],
],
'actions' => [
'first' => [
'label' => 'الأولي',
],
'go_to_page' => [
'label' => 'انتقل إلى صفحة :page',
],
'last' => [
'label' => 'الأخيرة',
],
'next' => [
'label' => 'التالي',
],
'previous' => [
'label' => 'السابق',
],
],
];
@@ -0,0 +1,9 @@
<?php
return [
'messages' => [
'uploading_file' => 'Fayl yüklənir...',
],
];
@@ -0,0 +1,9 @@
<?php
return [
'messages' => [
'copied' => 'Kopyalandı',
],
];
@@ -0,0 +1,13 @@
<?php
return [
'actions' => [
'close' => [
'label' => 'Bağla',
],
],
];
@@ -0,0 +1,45 @@
<?php
return [
'label' => 'Səhifələndirmə Naviqasiyası',
'overview' => 'Toplam :total nəticədən :first ile :last arası göstərilir',
'fields' => [
'records_per_page' => [
'label' => 'səhifə başına',
'options' => [
'all' => 'Hamısı',
],
],
],
'actions' => [
'first' => [
'label' => 'Birinci',
],
'go_to_page' => [
'label' => ':page. səhifəyə get',
],
'next' => [
'label' => 'Sonrakı',
],
'last' => [
'label' => 'Son',
],
'previous' => [
'label' => 'Əvvəlki',
],
],
];
@@ -0,0 +1,9 @@
<?php
return [
'messages' => [
'uploading_file' => 'Качване на файл...',
],
];
@@ -0,0 +1,9 @@
<?php
return [
'messages' => [
'copied' => 'Копирано',
],
];
@@ -0,0 +1,13 @@
<?php
return [
'actions' => [
'close' => [
'label' => 'Затвори',
],
],
];
@@ -0,0 +1,47 @@
<?php
return [
'label' => 'Наигация на странициране',
'overview' => '{1} Показване на 1 резултат|[2,*] Показване на :first до :last от общо :total резултата',
'fields' => [
'records_per_page' => [
'label' => 'Резултати на страница',
'options' => [
'all' => 'Всички',
],
],
],
'actions' => [
'first' => [
'label' => 'Първа',
],
'go_to_page' => [
'label' => 'Отиди на страница :page',
],
'last' => [
'label' => 'Последна',
],
'next' => [
'label' => 'Следваща',
],
'previous' => [
'label' => 'Предишна',
],
],
];
@@ -0,0 +1,9 @@
<?php
return [
'messages' => [
'uploading_file' => 'নথি আপলোড হচ্ছে...',
],
];
@@ -0,0 +1,9 @@
<?php
return [
'messages' => [
'copied' => 'অনুকৃত',
],
];
@@ -0,0 +1,13 @@
<?php
return [
'actions' => [
'close' => [
'label' => 'বন্ধ করুন',
],
],
];
@@ -0,0 +1,39 @@
<?php
return [
'label' => 'পৃষ্ঠা সংখ্যাগুলো',
'overview' => ':total এর, :first থেকে :last পর্যন্ত দেখানো হচ্ছে',
'fields' => [
'records_per_page' => [
'label' => 'প্রতি পৃষ্ঠা',
'options' => [
'all' => 'সব',
],
],
],
'actions' => [
'go_to_page' => [
'label' => ':page পৃষ্টায় যান',
],
'next' => [
'label' => 'পরবর্তী',
],
'previous' => [
'label' => 'পূর্ববর্তী',
],
],
];
@@ -0,0 +1,9 @@
<?php
return [
'messages' => [
'uploading_file' => 'Učitavanje fajlova...',
],
];
@@ -0,0 +1,9 @@
<?php
return [
'messages' => [
'copied' => 'Kopirano',
],
];
@@ -0,0 +1,13 @@
<?php
return [
'actions' => [
'close' => [
'label' => 'Zatvoriti',
],
],
];
@@ -0,0 +1,39 @@
<?php
return [
'label' => 'Navigacija po stranicama',
'overview' => '{1} Prikazuje 1 rezultat|[2,*]Prikazivanje :first od :last od ukupno :total rezultata',
'fields' => [
'records_per_page' => [
'label' => 'po stranici',
'options' => [
'all' => 'Svi',
],
],
],
'actions' => [
'go_to_page' => [
'label' => 'Idite na stranicu :page',
],
'next' => [
'label' => 'Dalje',
],
'previous' => [
'label' => 'Nazad',
],
],
];
@@ -0,0 +1,9 @@
<?php
return [
'messages' => [
'uploading_file' => 'Pujant arxiu...',
],
];
@@ -0,0 +1,9 @@
<?php
return [
'messages' => [
'copied' => 'Copiat',
],
];
@@ -0,0 +1,13 @@
<?php
return [
'actions' => [
'close' => [
'label' => 'Tancar',
],
],
];
@@ -0,0 +1,47 @@
<?php
return [
'label' => 'Paginació',
'overview' => '{1} Mostrant 1 resultat|[2,*] Mostrant :first a :last de :total resultats',
'fields' => [
'records_per_page' => [
'label' => 'Per pàgina',
'options' => [
'all' => 'Tots',
],
],
],
'actions' => [
'first' => [
'label' => 'Primera',
],
'go_to_page' => [
'label' => 'Anar a la pàgina :page',
],
'last' => [
'label' => 'Última',
],
'next' => [
'label' => 'Següent',
],
'previous' => [
'label' => 'Anterior',
],
],
];
@@ -0,0 +1,9 @@
<?php
return [
'messages' => [
'uploading_file' => 'بارکردنی پەڕگە...',
],
];
@@ -0,0 +1,9 @@
<?php
return [
'messages' => [
'copied' => 'لەبەرگیرایەوە',
],
];
@@ -0,0 +1,13 @@
<?php
return [
'actions' => [
'close' => [
'label' => 'داخستن',
],
],
];
@@ -0,0 +1,47 @@
<?php
return [
'label' => 'ڕێنوێیی پەڕەکردن',
'overview' => '{1} پشاندانی ئەنجامێک|[2,*] پیشاندانی :first بۆ :last لە :total ئەنجام',
'fields' => [
'records_per_page' => [
'label' => 'بۆ هەر پەڕەیەک',
'options' => [
'all' => 'هەموو',
],
],
],
'actions' => [
'first' => [
'label' => 'یەکەم',
],
'go_to_page' => [
'label' => 'بڕۆ بۆ پەڕەی :page',
],
'last' => [
'label' => 'دوایین',
],
'next' => [
'label' => 'دواتر',
],
'previous' => [
'label' => 'پێشتر',
],
],
];
@@ -0,0 +1,11 @@
<?php
return [
'messages' => [
'uploading_file' => 'Nahrávání souboru...',
],
];
@@ -0,0 +1,9 @@
<?php
return [
'messages' => [
'copied' => 'Zkopírováno',
],
];
@@ -0,0 +1,13 @@
<?php
return [
'actions' => [
'close' => [
'label' => 'Zavřít',
],
],
];
@@ -0,0 +1,45 @@
<?php
return [
'label' => 'Stránkování',
'overview' => '{1} Zobrazuji 1 výsledek|[2,*] Zobrazuji :first až :last z :total výsledků',
'fields' => [
'records_per_page' => [
'label' => 'na stránku',
'options' => [
'all' => 'Vše',
],
],
],
'actions' => [
'first' => [
'label' => 'První',
],
'go_to_page' => [
'label' => 'Jít na stránku :page',
],
'last' => [
'label' => 'Poslední',
],
'next' => [
'label' => 'Další',
],
'previous' => [
'label' => 'Předchozí',
],
],
];
@@ -0,0 +1,9 @@
<?php
return [
'messages' => [
'copied' => 'Wedi Copïo',
],
];
@@ -0,0 +1,39 @@
<?php
return [
'label' => 'Gwe-lywio tudalennau',
'overview' => '{1} Dangos 1 canlyniad|[2,*] Yn dangos :first i :last o :total canlyniadau',
'fields' => [
'records_per_page' => [
'label' => 'fesul tudalen',
'options' => [
'all' => 'Pawb',
],
],
],
'actions' => [
'go_to_page' => [
'label' => 'Ewch i dudalen :page',
],
'next' => [
'label' => 'Nesaf',
],
'previous' => [
'label' => 'Blaenorol',
],
],
];
@@ -0,0 +1,9 @@
<?php
return [
'messages' => [
'uploading_file' => 'Uploader fil...',
],
];
@@ -0,0 +1,9 @@
<?php
return [
'messages' => [
'copied' => 'Kopieret',
],
];
@@ -0,0 +1,13 @@
<?php
return [
'actions' => [
'close' => [
'label' => 'Luk',
],
],
];
@@ -0,0 +1,39 @@
<?php
return [
'label' => 'Paginering Navigation',
'overview' => 'Viser :first til :last af :total resultater',
'fields' => [
'records_per_page' => [
'label' => 'per side',
'options' => [
'all' => 'Alle',
],
],
],
'actions' => [
'go_to_page' => [
'label' => 'Gå til side :page',
],
'next' => [
'label' => 'Næste',
],
'previous' => [
'label' => 'Forrige',
],
],
];
@@ -0,0 +1,9 @@
<?php
return [
'messages' => [
'uploading_file' => 'Datei wird hochgeladen...',
],
];
@@ -0,0 +1,9 @@
<?php
return [
'messages' => [
'copied' => 'Kopiert',
],
];
@@ -0,0 +1,13 @@
<?php
return [
'actions' => [
'close' => [
'label' => 'Schließen',
],
],
];
@@ -0,0 +1,47 @@
<?php
return [
'label' => 'Seitennavigation',
'overview' => '{1} Zeige 1 Ergebnis|[2,*] Zeige :first bis :last von :total Ergebnissen',
'fields' => [
'records_per_page' => [
'label' => 'pro Seite',
'options' => [
'all' => 'Alle',
],
],
],
'actions' => [
'first' => [
'label' => 'Erste',
],
'go_to_page' => [
'label' => 'Weiter zur Seite :page',
],
'last' => [
'label' => 'Letzte',
],
'next' => [
'label' => 'Nächste',
],
'previous' => [
'label' => 'Vorherige',
],
],
];
@@ -0,0 +1,9 @@
<?php
return [
'messages' => [
'uploading_file' => 'Uploading file...',
],
];
@@ -0,0 +1,9 @@
<?php
return [
'messages' => [
'copied' => 'Αντιγράφηκε',
],
];
@@ -0,0 +1,13 @@
<?php
return [
'actions' => [
'close' => [
'label' => 'Άκυρο',
],
],
];
@@ -0,0 +1,47 @@
<?php
return [
'label' => 'Pagination navigation',
'overview' => '{1} Προβολή 1 αποτελέσματος|[2,*] Προβολή :first έως :last (από :total αποτελέσματα)',
'fields' => [
'records_per_page' => [
'label' => 'Ανά σελίδα',
'options' => [
'all' => 'Όλα',
],
],
],
'actions' => [
'first' => [
'label' => 'Πρώτη σελίδα',
],
'go_to_page' => [
'label' => 'Πήγαινε στη σελίδα :page',
],
'last' => [
'label' => 'Τελευταία σελίδα',
],
'next' => [
'label' => 'Επόμενη',
],
'previous' => [
'label' => 'Προηγούμενη',
],
],
];
@@ -0,0 +1,9 @@
<?php
return [
'messages' => [
'uploading_file' => 'Uploading file...',
],
];
@@ -0,0 +1,9 @@
<?php
return [
'messages' => [
'copied' => 'Copied',
],
];
@@ -0,0 +1,13 @@
<?php
return [
'actions' => [
'close' => [
'label' => 'Close',
],
],
];
@@ -0,0 +1,47 @@
<?php
return [
'label' => 'Pagination navigation',
'overview' => '{1} Showing 1 result|[2,*] Showing :first to :last of :total results',
'fields' => [
'records_per_page' => [
'label' => 'Per page',
'options' => [
'all' => 'All',
],
],
],
'actions' => [
'first' => [
'label' => 'First',
],
'go_to_page' => [
'label' => 'Go to page :page',
],
'last' => [
'label' => 'Last',
],
'next' => [
'label' => 'Next',
],
'previous' => [
'label' => 'Previous',
],
],
];
@@ -0,0 +1,11 @@
<?php
return [
'messages' => [
'uploading_file' => 'Subiendo archivo...',
],
];
@@ -0,0 +1,9 @@
<?php
return [
'messages' => [
'copied' => 'Copiado',
],
];
@@ -0,0 +1,13 @@
<?php
return [
'actions' => [
'close' => [
'label' => 'Cerrar',
],
],
];

Some files were not shown because too many files have changed in this diff Show More