@shlinkio/shlink-frontend-kit 0.9.12 → 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -7,43 +7,43 @@
7
7
  @theme static inline {
8
8
  /* Light mode */
9
9
  --color-lm-brand: #2078CF;
10
- --color-lm-brand-dark: color-mix(in srgb, black 20%, var(--tw-color-lm-brand) 80%);
10
+ --color-lm-brand-dark: color-mix(in srgb, black 20%, var(--color-lm-brand) 80%);
11
11
  --color-lm-primary: #ffffff;
12
- --color-lm-primary-alfa: rgb(var(--tw-color-lm-primary) / .5);
12
+ --color-lm-primary-alfa: rgb(var(--color-lm-primary) / .5);
13
13
  --color-lm-secondary: #eeeff8;
14
14
  --color-lm-text: #232323;
15
15
  --color-lm-border: rgb(0 0 0 / .125);
16
16
  --color-lm-table-border: #dee2e6;
17
17
  --color-lm-active: #eeeeee;
18
- --color-lm-main: var(--tw-color-lm-brand);
19
- --color-lm-input: var(--tw-color-lm-primary);
20
- --color-lm-disabled-input: var(--tw-color-lm-secondary);
18
+ --color-lm-main: var(--color-lm-brand);
19
+ --color-lm-input: var(--color-lm-primary);
20
+ --color-lm-disabled-input: var(--color-lm-secondary);
21
21
  --color-lm-input-text: #495057;
22
22
  --color-lm-input-border: rgb(0 0 0 / .19);
23
23
  --color-lm-table-highlight: rgb(0 0 0 / .075);
24
24
 
25
25
  /* Dark mode */
26
26
  --color-dm-brand: #4696e5;
27
- --color-dm-brand-dark: color-mix(in srgb, black 25%, var(--tw-color-dm-brand) 75%);
27
+ --color-dm-brand-dark: color-mix(in srgb, black 25%, var(--color-dm-brand) 75%);
28
28
  --color-dm-primary: #161b22;
29
- --color-dm-primary-alfa: rgb(var(--tw-color-dm-primary) / .8);
29
+ --color-dm-primary-alfa: rgb(var(--color-dm-primary) / .8);
30
30
  --color-dm-secondary: #0f131a;
31
31
  --color-dm-text: rgb(201 209 217);
32
32
  --color-dm-border: rgb(255 255 255 / .15);
33
33
  --color-dm-table-border: #393d43;
34
- --color-dm-active: var(--tw-color-dm-secondary);
34
+ --color-dm-active: var(--color-dm-secondary);
35
35
  --color-dm-main: #0b2d4e;
36
36
  --color-dm-input: rgb(17.9928571429 22.0821428571 27.8071428571);
37
37
  --color-dm-disabled-input: rgb(26.0071428571 31.9178571429 40.1928571429);
38
- --color-dm-input-text: var(--tw-color-dm-text);
39
- --color-dm-input-border: var(--tw-color-dm-border);
40
- --color-dm-table-highlight: var(--tw-color-dm-border);
38
+ --color-dm-input-text: var(--color-dm-text);
39
+ --color-dm-input-border: var(--color-dm-border);
40
+ --color-dm-table-highlight: var(--color-dm-border);
41
41
 
42
42
  /* General color palette */
43
43
  --color-danger: #dc3545;
44
- --color-danger-dark: color-mix(in srgb, black 20%, var(--tw-color-danger) 80%);
44
+ --color-danger-dark: color-mix(in srgb, black 20%, var(--color-danger) 80%);
45
45
  --color-warning: #ffc107;
46
- --color-warning-dark: color-mix(in srgb, black 20%, var(--tw-color-warning) 80%);
46
+ --color-warning-dark: color-mix(in srgb, black 20%, var(--color-warning) 80%);
47
47
  --color-placeholder: #6c757d;
48
48
 
49
49
  /* Override breakpoints with the values from bootstrap, to keep sizing until fully migrated */
@@ -54,45 +54,9 @@
54
54
  --breakpoint-2xl: 1320px; /* 1400px according to bootstrap docs, but then the container is bigger than before */
55
55
  }
56
56
 
57
- /* Deprecated. TODO Remove with bootstrap support */
58
- @layer base {
59
- html:not([data-theme='dark']) {
60
- --primary-color: var(--tw-color-lm-primary);
61
- --primary-color-alfa: var(--tw-color-lm-primary-alfa);
62
- --secondary-color: var(--tw-color-lm-secondary);
63
- --text-color: var(--tw-color-lm-text);
64
- --border-color: var(--tw-color-lm-border);
65
- --active-color: var(--tw-color-lm-active);
66
- --brand-color: var(--tw-color-lm-main);
67
- --input-color: var(--tw-color-lm-input);
68
- --input-disabled-color: var(--tw-color-lm-disabled-input);
69
- --input-text-color: var(--tw-color-lm-input-text);
70
- --input-border-color: var(--tw-color-lm-input-border);
71
- --table-border-color: var(--tw-color-lm-table-border);
72
- --table-highlight-color: var(--tw-color-lm-table-highlight);
73
- }
74
-
75
- html[data-theme='dark'] {
76
- --primary-color: var(--tw-color-dm-primary);
77
- --primary-color-alfa: var(--tw-color-dm-primary-alfa);
78
- --secondary-color: var(--tw-color-dm-secondary);
79
- --text-color: var(--tw-color-dm-text);
80
- --border-color: var(--tw-color-dm-border);
81
- --active-color: var(--tw-color-dm-active);
82
- --brand-color: var(--tw-color-dm-main);
83
- --input-color: var(--tw-color-dm-input);
84
- --input-disabled-color: var(--tw-color-dm-disabled-input);
85
- --input-text-color: var(--tw-color-dm-input-text);
86
- --input-border-color: var(--tw-color-dm-input-border);
87
- --table-border-color: var(--tw-color-dm-table-border);
88
- --table-highlight-color: var(--tw-color-dm-table-highlight);
89
- }
90
- }
91
-
92
57
  @layer base {
93
58
  :root {
94
- --header-height: 56px;
95
- --tw-header-height: 52px;
59
+ --header-height: 52px;
96
60
 
97
61
  /* Chevron image for selects */
98
62
  --chevron-down: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/></svg>");
@@ -103,89 +67,82 @@
103
67
  --circle-grey-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='rgba%280, 0, 0, 0.25%29'/></svg>");
104
68
  --circle-grey-light: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='rgba%28255, 255, 255, 0.25%29'/></svg>");
105
69
  --circle-white: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='%23fff'/></svg>");
106
- --circle-light-blue: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='%2386b7fe'/></svg>");
70
+ --circle-blue-light: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='%2386b7fe'/></svg>");
107
71
 
108
- @apply tw:scheme-normal tw:dark:scheme-dark tw:scroll-auto;
72
+ @apply scheme-normal dark:scheme-dark scroll-auto;
109
73
  }
110
74
 
111
75
  html, body {
112
- @apply tw:h-full tw:bg-lm-secondary tw:dark:bg-dm-secondary tw:text-lm-text tw:dark:text-dm-text;
76
+ @apply h-full bg-lm-secondary dark:bg-dm-secondary text-lm-text dark:text-dm-text;
113
77
  }
114
78
 
115
79
  a {
116
- /*
117
- * FIXME Set these styles as plain CSS instead of @apply to avoid higher specificity.
118
- * This can be set via @apply as soon as we stop using important for tailwind classes, once bootstrap is
119
- * removed
120
- */
121
- color: var(--tw-color-lm-brand);
122
- border-radius: var(--tw-radius-xs);
123
-
124
80
  @apply
125
- tw:focus-visible:outline-3 tw:focus-visible:outline-offset-3
126
- tw:focus-visible:outline-lm-brand/50 tw:dark:focus-visible:outline-dm-brand/50
127
- tw:focus-visible:z-1;
128
- }
129
-
130
- [data-theme="dark"] a {
131
- color: var(--tw-color-dm-brand);
81
+ text-lm-brand dark:text-dm-brand rounded-xs
82
+ focus-visible:outline-3 focus-visible:outline-offset-3
83
+ focus-visible:outline-lm-brand/50 dark:focus-visible:outline-dm-brand/50
84
+ focus-visible:z-1;
132
85
  }
133
86
 
134
87
  h1 {
135
- @apply tw:text-[2.5rem]/[1.2] tw:m-0 tw:font-medium;
88
+ @apply text-[2.5rem]/[1.2] m-0 font-medium;
136
89
  }
137
90
  h2 {
138
- @apply tw:text-[2rem]/[1.2] tw:m-0 tw:font-medium;
91
+ @apply text-[2rem]/[1.2] m-0 font-medium;
139
92
  }
140
93
  h3 {
141
- @apply tw:text-[1.75rem]/[1.2] tw:m-0 tw:font-medium;
94
+ @apply text-[1.75rem]/[1.2] m-0 font-medium;
142
95
  }
143
96
  h4 {
144
- @apply tw:text-2xl/[1.2] tw:m-0 tw:font-medium;
97
+ @apply text-2xl/[1.2] m-0 font-medium;
145
98
  }
146
99
  h5 {
147
- @apply tw:text-xl/[1.2] tw:m-0 tw:font-medium;
100
+ @apply text-xl/[1.2] m-0 font-medium;
148
101
  }
149
102
  h6 {
150
- @apply tw:text-base/[1.2] tw:m-0 tw:font-medium;
103
+ @apply text-base/[1.2] m-0 font-medium;
151
104
  }
152
105
 
153
106
  hr {
154
- @apply tw:my-3;
155
- }
156
-
157
- p {
158
- @apply tw:m-0;
107
+ @apply my-3 border-lm-border dark:border-dm-border;
159
108
  }
160
109
 
161
110
  code {
162
- @apply tw:text-sm tw:text-pink-600 tw:dark:text-pink-500 tw:font-mono;
111
+ @apply text-sm text-pink-600 dark:text-pink-500 font-mono;
163
112
  }
164
113
 
165
114
  input[type="search"]::-webkit-search-cancel-button {
166
- @apply tw:cursor-pointer;
115
+ @apply cursor-pointer;
116
+ }
117
+
118
+ summary {
119
+ @apply cursor-pointer;
120
+ }
121
+
122
+ dialog {
123
+ @apply outline-none
167
124
  }
168
125
  }
169
126
 
170
127
  @utility focus-ring-base {
171
- @apply tw:outline-none tw:focus-visible:ring-3 tw:focus-visible:z-1 tw:transition-[box-shadow];
128
+ @apply outline-none focus-visible:ring-3 focus-visible:z-1 transition-[box-shadow];
172
129
  }
173
130
 
174
131
  @utility focus-ring {
175
- @apply tw:focus-ring-base tw:focus-visible:ring-lm-brand/50 tw:dark:focus-visible:ring-dm-brand/50;
132
+ @apply focus-ring-base focus-visible:ring-lm-brand/50 dark:focus-visible:ring-dm-brand/50;
176
133
  }
177
134
 
178
135
  @utility focus-ring-danger {
179
- @apply tw:focus-ring-base tw:focus-visible:ring-danger/50;
136
+ @apply focus-ring-base focus-visible:ring-danger/50;
180
137
  }
181
138
 
182
139
  @utility focus-ring-secondary {
183
- @apply tw:focus-ring-base tw:focus-visible:ring-zinc-500/50;
140
+ @apply focus-ring-base focus-visible:ring-zinc-500/50;
184
141
  }
185
142
 
186
143
  @utility focus-within-ring {
187
- @apply tw:outline-none tw:focus-within:ring-3 tw:focus-within:z-1 tw:transition-[box-shadow];
188
- @apply tw:focus-within:ring-lm-brand/50 tw:dark:focus-within:ring-dm-brand/50;
144
+ @apply outline-none focus-within:ring-3 focus-within:z-1 transition-[box-shadow];
145
+ @apply focus-within:ring-lm-brand/50 dark:focus-within:ring-dm-brand/50;
189
146
  }
190
147
 
191
148
  @utility scroll-thin {
@@ -225,9 +182,9 @@
225
182
 
226
183
  /* For sticky-positioned cells with a background */
227
184
  @utility sticky-cell-base {
228
- @apply tw:z-1 tw:relative tw:sticky;
229
- @apply tw:before:absolute tw:before:bg-lm-table-border tw:dark:before:bg-dm-table-border tw:before:-z-2;
230
- @apply tw:after:absolute tw:after:bg-lm-primary tw:dark:after:bg-dm-primary tw:after:-z-1;
185
+ @apply z-1 relative sticky;
186
+ @apply before:absolute before:bg-lm-table-border dark:before:bg-dm-table-border before:-z-2;
187
+ @apply after:absolute after:bg-lm-primary dark:after:bg-dm-primary after:-z-1;
231
188
 
232
189
  &:before, &:after {
233
190
  content: '';
@@ -238,7 +195,7 @@
238
195
  }
239
196
 
240
197
  @utility sticky-cell {
241
- @apply tw:sticky-cell-base;
198
+ @apply sticky-cell-base;
242
199
 
243
200
  &:before {
244
201
  inset: -1px 0 -1px 0;
@@ -252,7 +209,7 @@
252
209
  }
253
210
 
254
211
  @utility sticky-cell-separated {
255
- @apply tw:sticky-cell-base;
212
+ @apply sticky-cell-base;
256
213
 
257
214
  &:before {
258
215
  inset: -1px -1px -1px 0;
package/package.json CHANGED
@@ -12,10 +12,6 @@
12
12
  "import": "./dist/index.js",
13
13
  "types": "./dist/index.d.ts"
14
14
  },
15
- "./tailwind": {
16
- "import": "./dist/tailwind.js",
17
- "types": "./dist/tailwind.d.ts"
18
- },
19
15
  "./tailwind.preset.css": {
20
16
  "style": "./dist/tailwind.preset.css",
21
17
  "default": "./dist/tailwind.preset.css"
@@ -26,7 +22,7 @@
26
22
  "dist"
27
23
  ],
28
24
  "scripts": {
29
- "build": "vite build && cp ./src/base.scss ./dist/base.scss && cp ./src/tailwind/tailwind.preset.css ./dist/tailwind.preset.css",
25
+ "build": "vite build && cp ./src/tailwind.preset.css ./dist/tailwind.preset.css",
30
26
  "test": "vitest run",
31
27
  "test:ci": "npm run test -- --coverage",
32
28
  "lint": "eslint dev src test",
@@ -48,7 +44,6 @@
48
44
  "react": "^18.3 || ^19.0",
49
45
  "react-dom": "^18.3 || ^19.0",
50
46
  "react-router": "^7.0.2",
51
- "reactstrap": "^9.2.0",
52
47
  "tailwindcss": "^4.0.1"
53
48
  },
54
49
  "peerDependenciesMeta": {
@@ -70,7 +65,6 @@
70
65
  "@vitest/browser": "^3.2.3",
71
66
  "@vitest/coverage-v8": "^3.2.3",
72
67
  "axe-core": "^4.10.3",
73
- "bootstrap": "5.2.3",
74
68
  "eslint": "^9.29.0",
75
69
  "eslint-plugin-import": "^2.31.0",
76
70
  "eslint-plugin-jsx-a11y": "^6.10.2",
@@ -80,7 +74,6 @@
80
74
  "eslint-plugin-simple-import-sort": "^12.1.1",
81
75
  "history": "^5.3.0",
82
76
  "playwright": "^1.53.0",
83
- "sass": "^1.89.2",
84
77
  "typescript": "^5.8.3",
85
78
  "typescript-eslint": "^8.34.0",
86
79
  "vite": "^6.3.5",
@@ -93,5 +86,5 @@
93
86
  "not ie <= 11",
94
87
  "not op_mini all"
95
88
  ],
96
- "version": "0.9.12"
89
+ "version": "1.0.0"
97
90
  }
package/dist/base.scss DELETED
@@ -1,27 +0,0 @@
1
- // Breakpoints
2
- $xsMax: 575px;
3
- $smMin: 576px;
4
- $smMax: 767px;
5
- $mdMin: 768px;
6
- $mdMax: 991px;
7
- $lgMin: 992px;
8
- $lgMax: 1199px;
9
- $xlgMin: 1200px;
10
- $responsiveTableBreakpoint: $mdMax;
11
-
12
- // Colors
13
- $mainColor: #4696e5;
14
- $lightColor: #f5f6fe;
15
- $lightGrey: #eeeeee;
16
- $dangerColor: #dc3545;
17
- $mediumGrey: #dee2e6;
18
- $textPlaceholder: #6c757d;
19
-
20
- // Misc
21
- $headerHeight: 56px;
22
- $asideMenuWidth: 260px;
23
- $footer-height: 2.3rem;
24
- $footer-margin: .8rem;
25
-
26
- // Bootstrap overwrites
27
- $primary: $mainColor;
package/dist/index.css DELETED
@@ -1 +0,0 @@
1
- @media (max-width: 991px){.responsive-table__header{display:none}}@media (max-width: 991px){.responsive-table.table>:not(:first-child){border:none}}@media (max-width: 991px){.responsive-table__row{display:block;border-bottom:1px solid var(--border-color);border-top:2px solid var(--border-color);position:relative}.responsive-table__row:not(:last-child){margin-bottom:10px}}.responsive-table__cell.responsive-table__cell{vertical-align:middle!important}@media (max-width: 991px){.responsive-table__cell.responsive-table__cell{display:block;width:100%;position:relative;padding:.5rem;font-size:.9rem}.responsive-table__cell.responsive-table__cell[data-th]:before{content:attr(data-th) ": ";font-weight:700}.responsive-table__cell.responsive-table__cell:last-child{position:absolute;top:3.5px;right:.5rem;width:auto;padding:0;border:none}}@media (max-width: 991px){.responsive-table__cell.responsive-table__cell .btn-sm{padding:.1rem .4rem;margin-top:.16rem}}:root{scroll-behavior:auto;color-scheme:var(--color-scheme)}html,body,#root{height:100%;background:var(--secondary-color);color:var(--text-color)}a,.btn-link{text-decoration:none}a:not(.nav-link):not(.navbar-brand):not(.page-link):not(.highlight-card):not(.btn):not(.dropdown-item):hover,.btn-link:hover{text-decoration:underline}.bg-main{background-color:#4696e5!important}.bg-warning{color:var(--tw-color-lm-text)}.card-body,.card-header,.list-group-item{background-color:transparent}.card-footer{background-color:var(--primary-color-alfa)}.card.card{box-shadow:0 .125rem .25rem #00000013;background-color:var(--primary-color);border-color:var(--border-color)}.list-group,.modal-content,.page-link,.page-item.disabled .page-link,.dropdown-menu{background-color:var(--primary-color)}.modal-header.modal-header,.modal-footer.modal-footer,.card-header.card-header,.card-footer.card-footer,.table.table thead th,.table.table th,.table.table td,.page-link.page-link,.page-link.page-link:hover,.page-item.page-item.disabled .page-link.page-link,.dropdown-divider.dropdown-divider,.dropdown-menu.dropdown-menu,.list-group-item.list-group-item,.modal-content.modal-content,hr{border-color:var(--border-color)}.table-bordered,.table-bordered thead th,.table-bordered thead td{border-color:var(--table-border-color)}.page-link:hover,.page-link:focus{background-color:var(--secondary-color)}.page-item.active .page-link{background-color:var(--brand-color);border-color:var(--brand-color)}.pagination .page-link{cursor:pointer}@media (min-width: 1200px){.container-xl{max-width:1320px}}@media (max-width: 767px){.container-xl{padding-right:0;padding-left:0}}.btn-block{display:block;width:100%}.btn-primary,.btn-primary:hover,.btn-primary:disabled,.btn-primary:active,.btn-primary:focus-visible,.btn-primary.active,.btn-outline-primary:hover,.btn-outline-primary:active.btn-outline-primary:active,.btn-outline-primary:focus-visible.btn-outline-primary:focus-visible,.btn-outline-primary.active.btn-outline-primary.active{color:#fff}.dropdown-item,.dropdown-item-text{color:var(--text-color)}.dropdown-item:not(:disabled){cursor:pointer}.dropdown-item:focus:not(:disabled),.dropdown-item:hover:not(:disabled),.dropdown-item.active:not(:disabled),.dropdown-item:active:not(:disabled){background-color:var(--active-color)!important;color:var(--text-color)!important}.dropdown-item--danger.dropdown-item--danger{color:#dc3545}.dropdown-item--danger.dropdown-item--danger:hover,.dropdown-item--danger.dropdown-item--danger:active,.dropdown-item--danger.dropdown-item--danger.active{color:#dc3545!important}.badge-main{color:#fff;background-color:var(--brand-color)}.close,.close:hover,.table,.table-hover>tbody>tr:hover>*,.table-hover>tbody>tr>*{color:var(--text-color)}.btn-close{filter:var(--btn-close-filter)}.table-hover tbody tr:hover{background-color:var(--secondary-color)}.form-control.form-control,.form-control.form-control:focus,.form-select.form-select,.form-select.form-select:focus{background-color:var(--primary-color);border-color:var(--input-border-color);color:var(--input-text-color)}.form-control.disabled,.form-control:disabled,.form-select.disabled,.form-select:disabled{background-color:var(--input-disabled-color);cursor:not-allowed}.card .form-control:not(:disabled),.card .form-control:not(:disabled):hover,.card .form-select:not(:disabled),.card .form-select:not(:disabled):hover,.modal .form-control:not(:disabled),.modal .form-control:not(:disabled):hover,.modal .form-select:not(:disabled),.modal .form-select:not(:disabled):hover{background-color:var(--input-color)}.card input[type=text]:not(:disabled),.dropdown input[type=text]:not(:disabled){background-color:var(--input-color)!important}.card input[type=date]:not(:disabled),.dropdown input[type=date]:not(:disabled){background-color:var(--input-color)!important}.card input[type=datetime-local]:not(:disabled),.dropdown input[type=datetime-local]:not(:disabled){background-color:var(--input-color)!important}.card input[type=password]:not(:disabled),.dropdown input[type=password]:not(:disabled){background-color:var(--input-color)!important}.card input[type=number]:not(:disabled),.dropdown input[type=number]:not(:disabled){background-color:var(--input-color)!important}.card input[type=email]:not(:disabled),.dropdown input[type=email]:not(:disabled){background-color:var(--input-color)!important}.card input[type=search]:not(:disabled),.dropdown input[type=search]:not(:disabled){background-color:var(--input-color)!important}.card input[type=url]:not(:disabled),.dropdown input[type=url]:not(:disabled){background-color:var(--input-color)!important}.input-group-text.input-group-text{border-color:var(--input-border-color)}.dropdown label{color:var(--text-color)!important}.table-active,.table-active>th,.table-active>td{background-color:var(--table-highlight-color)!important}@media (max-width: 767px){.navbar-brand{margin:0 auto!important}}.indivisible{white-space:nowrap}.pointer{cursor:pointer}.progress-bar{background-color:#4696e5}@media (max-width: 575px){.btn-xs-block{width:100%;display:block}}@media (max-width: 991px){.btn-md-block{width:100%;display:block}}@media (max-width: 767px){.btn-sm-block{width:100%;display:block}}.search-field{position:relative}.search-field:focus-within{z-index:1}.search-field__input.search-field__input{padding-left:40px;padding-right:40px}.search-field__input--no-border.search-field__input--no-border{border:none;border-radius:0}.search-field__icon{position:absolute;top:50%;transform:translateY(-50%);left:15px;color:#6c757d}.search-field__close{position:absolute;top:50%;transform:translateY(-50%);right:10px;cursor:pointer}.dropdown-btn__toggle.dropdown-btn__toggle{text-align:left}.dropdown-btn__toggle.dropdown-btn__toggle--with-caret{padding-right:1.75rem}.dropdown-btn__toggle.dropdown-btn__toggle,.dropdown-btn__toggle.dropdown-btn__toggle:not(:disabled):not(.disabled).active,.dropdown-btn__toggle.dropdown-btn__toggle:not(:disabled):not(.disabled):active,.dropdown-btn__toggle.dropdown-btn__toggle:not(:disabled):not(.disabled):focus,.dropdown-btn__toggle.dropdown-btn__toggle:not(:disabled):not(.disabled):hover,.show>.dropdown-btn__toggle.dropdown-btn__toggle.dropdown-toggle{color:var(--input-text-color);background-color:var(--primary-color);border-color:var(--input-border-color)}.card .dropdown-btn__toggle.dropdown-btn__toggle,.card .dropdown-btn__toggle.dropdown-btn__toggle:not(:disabled):not(.disabled).active,.card .dropdown-btn__toggle.dropdown-btn__toggle:not(:disabled):not(.disabled):active,.card .dropdown-btn__toggle.dropdown-btn__toggle:not(:disabled):not(.disabled):focus,.card .dropdown-btn__toggle.dropdown-btn__toggle:not(:disabled):not(.disabled):hover,.show>.card .dropdown-btn__toggle.dropdown-btn__toggle.dropdown-toggle{background-color:var(--input-color)}.dropdown-btn__toggle.dropdown-btn__toggle.disabled,.dropdown-btn__toggle.dropdown-btn__toggle:disabled{background-color:var(--input-disabled-color)}.dropdown-btn__toggle.dropdown-btn__toggle:after{position:absolute;top:50%;transform:translateY(-50%);right:.75rem}.nav-pills__nav{position:sticky!important;top:55px;z-index:2}.nav-pills__nav-link.nav-pills__nav-link{border-radius:0!important;padding-bottom:calc(.5rem - 3px)!important;border-bottom:3px solid transparent!important;color:#5d6778;font-weight:700;cursor:pointer;text-decoration:none}@media (min-width: 576px) and (max-width: 991px){.nav-pills__nav-link.nav-pills__nav-link{font-size:89%}}.nav-pills__nav-link:hover{color:#4696e5!important}.nav-pills__nav-link.active{border-color:#4696e5!important;background-color:var(--primary-color)!important;color:#4696e5!important}
@@ -1,108 +0,0 @@
1
- import { useMemo as T, useEffect as y, useRef as E, useCallback as d, useState as m } from "react";
2
- function I(e, { elementsSelector: s, focusFirstItem: r = !1, vertical: n = !0, horizontal: t = !0 }) {
3
- const o = T(() => {
4
- const c = [];
5
- return n && c.push("ArrowDown"), t && c.push("ArrowRight"), c;
6
- }, [t, n]), u = T(() => {
7
- const c = [];
8
- return n && c.push("ArrowUp"), t && c.push("ArrowLeft"), c;
9
- }, [t, n]), i = T(() => [...o, ...u], [o, u]);
10
- y(() => {
11
- const c = e.current;
12
- if (!c)
13
- return () => {
14
- };
15
- const f = new AbortController(), g = () => [...c.querySelectorAll(s)], b = g(), p = Math.max(b.findIndex((l) => l.dataset.selected === "true"), 0);
16
- return b.forEach((l, a) => {
17
- l.tabIndex = a === p ? 0 : -1, r && a === p && l.focus();
18
- }), c.addEventListener("keydown", (l) => {
19
- if (!i.includes(l.key))
20
- return;
21
- l.preventDefault();
22
- const a = g(), w = a.findIndex((h) => h.tabIndex === 0), C = o.includes(l.key) ? a[w + 1] ?? a[0] : a[w - 1] ?? a[a.length - 1];
23
- a.forEach((h) => {
24
- h.tabIndex = -1;
25
- }), C.tabIndex = 0, C.focus();
26
- }, { signal: f.signal }), () => f.abort();
27
- }, [i, e, s, r, o]);
28
- }
29
- const D = 128;
30
- function k(e) {
31
- const [s, r, n] = (e.match(/../g) ?? []).map((o) => parseInt(o, 16) || 0);
32
- return Math.round(Math.sqrt(0.299 * s ** 2 + 0.587 * r ** 2 + 0.114 * n ** 2)) >= D;
33
- }
34
- function F(e, s = globalThis.setTimeout, r = globalThis.clearTimeout) {
35
- const n = E(null), t = d(() => {
36
- n.current && r(n.current);
37
- }, [r]), o = d((u, i) => {
38
- t(), n.current = s(() => {
39
- u(), n.current = null;
40
- }, i ?? e);
41
- }, [t, e, s]);
42
- return y(() => t, [t]), T(
43
- () => ({ setTimeout: o, clearCurrentTimeout: t }),
44
- [t, o]
45
- );
46
- }
47
- const S = 2e3, v = (e = {}, s, r = globalThis.setTimeout, n = globalThis.clearTimeout) => {
48
- const { initialValue: t = !1, delay: o = S } = typeof e == "boolean" ? {
49
- initialValue: e,
50
- delay: s
51
- } : e, { setTimeout: u } = F(o, r, n), [i, c] = m(t), f = E(t), g = d(() => {
52
- c(!f.current), u(() => c(f.current));
53
- }, [u]);
54
- return [i, g];
55
- };
56
- function M(e = !1, s = !1) {
57
- const [r, n] = m(e), t = d(() => n((i) => !i), []), o = d(() => n(!0), []), u = d(() => n(!1), []);
58
- return s ? { flag: r, toggle: t, setToTrue: o, setToFalse: u } : [r, t, o, u];
59
- }
60
- function A(e, s, r) {
61
- if (!e || typeof e == "string")
62
- return A({ currentField: e, newField: s, currentOrderDir: r });
63
- const n = e;
64
- if (n.currentField !== n.newField)
65
- return "ASC";
66
- const t = {
67
- ASC: "DESC",
68
- DESC: void 0
69
- };
70
- return n.currentOrderDir ? t[n.currentOrderDir] : "ASC";
71
- }
72
- function L(e, s, r) {
73
- if (!e || typeof e == "string")
74
- return L({ currentField: e, newField: s, currentOrderDir: r });
75
- const n = e, t = A(n);
76
- return {
77
- field: t ? n.newField : void 0,
78
- dir: t
79
- };
80
- }
81
- const R = (e, { field: s, dir: r }) => !s || !r ? e : e.sort((n, t) => {
82
- const o = r === "ASC" ? 1 : -1, u = r === "ASC" ? -1 : 1;
83
- return n[s] > t[s] ? o : u;
84
- }), N = (e) => e.dir ? `${e.field}-${e.dir}` : void 0, q = (e) => {
85
- const [s, r] = e.split("-");
86
- return { field: s, dir: r };
87
- }, K = (e) => {
88
- const [s, r] = m(e), n = d(
89
- (t, o) => r(
90
- t && typeof t == "object" ? t : { field: t, dir: o }
91
- ),
92
- []
93
- );
94
- return [s, n];
95
- };
96
- export {
97
- I as a,
98
- F as b,
99
- v as c,
100
- A as d,
101
- L as e,
102
- q as f,
103
- K as g,
104
- k as i,
105
- N as o,
106
- R as s,
107
- M as u
108
- };