@preline/toggle-password 4.1.2 → 4.2.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.
- package/README.md +311 -0
- package/index.js +9 -9
- package/index.mjs +8 -8
- package/non-auto.js +24 -0
- package/non-auto.mjs +24 -0
- package/package.json +3 -3
- package/theme.css +725 -0
package/README.md
ADDED
|
@@ -0,0 +1,311 @@
|
|
|
1
|
+
# Toggle Password
|
|
2
|
+
|
|
3
|
+
Show or hide password field.
|
|
4
|
+
|
|
5
|
+
[](https://www.npmjs.com/package/@preline/toggle-password) [](https://opensource.org/licenses/MIT) [](https://preline.co/plugins/toggle-password.html)
|
|
6
|
+
|
|
7
|
+
## Contents
|
|
8
|
+
|
|
9
|
+
- [Overview](#overview)
|
|
10
|
+
- [Installation](#installation)
|
|
11
|
+
- [Basic usage](#basic-usage)
|
|
12
|
+
- [Configuration Options](#configuration-options)
|
|
13
|
+
- [JavaScript API](#javascript-api)
|
|
14
|
+
- [Events](#events)
|
|
15
|
+
- [Common Patterns](#common-patterns)
|
|
16
|
+
- [License](#license)
|
|
17
|
+
|
|
18
|
+
## Overview
|
|
19
|
+
|
|
20
|
+
The Toggle Password component provides a button to toggle password visibility in input fields. It allows users to switch between showing and hiding password text, improving usability while maintaining security.
|
|
21
|
+
|
|
22
|
+
**Key Features:**
|
|
23
|
+
- Toggle password visibility
|
|
24
|
+
- Show/hide password text
|
|
25
|
+
- Support for multiple password fields
|
|
26
|
+
- Grouped toggle support
|
|
27
|
+
- Programmatic control via JavaScript API
|
|
28
|
+
- Event system for visibility tracking
|
|
29
|
+
|
|
30
|
+
## Installation
|
|
31
|
+
|
|
32
|
+
To get started, install Toggle Password plugin via npm, else you can skip this step if you are already using Preline UI as a package.
|
|
33
|
+
|
|
34
|
+
```bash
|
|
35
|
+
npm i @preline/toggle-password
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
### CSS
|
|
39
|
+
|
|
40
|
+
[`@import`](https://tailwindcss.com/docs/functions-and-directives#import-directive) the plugin's CSS file into your Tailwind CSS file.
|
|
41
|
+
|
|
42
|
+
```css
|
|
43
|
+
@import "tailwindcss";
|
|
44
|
+
|
|
45
|
+
/* @preline/toggle-password */
|
|
46
|
+
@import "./node_modules/@preline/toggle-password/theme.css";
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
### JavaScript
|
|
50
|
+
|
|
51
|
+
Include the JavaScript that powers the interactive elements near the end of your `</body>` tag:
|
|
52
|
+
|
|
53
|
+
```html
|
|
54
|
+
<script src="./node_modules/@preline/toggle-password/index.js"></script>
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
### Manual Initialization
|
|
58
|
+
|
|
59
|
+
Use the `non-auto` entry if you need manual initialization. In this mode, automatic initialization on page load is not included, so the component should be initialized explicitly.
|
|
60
|
+
|
|
61
|
+
```html
|
|
62
|
+
<script type="module">
|
|
63
|
+
import HSTogglePassword from "@preline/toggle-password/non-auto.mjs";
|
|
64
|
+
|
|
65
|
+
new HSTogglePassword(document.querySelector("#toggle-password"));
|
|
66
|
+
</script>
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
### Via Bundler
|
|
70
|
+
|
|
71
|
+
When using a bundler (Vite, webpack, etc.), import the plugin directly as an ES module.
|
|
72
|
+
|
|
73
|
+
`@preline/toggle-password` is the auto-init entry: it scans the DOM and initializes matching elements automatically.
|
|
74
|
+
|
|
75
|
+
```js
|
|
76
|
+
import "@preline/toggle-password";
|
|
77
|
+
```
|
|
78
|
+
|
|
79
|
+
`@preline/toggle-password/non-auto` is the manual entry: use it when you want explicit control over when initialization happens, either via `autoInit()` or by creating a specific instance yourself.
|
|
80
|
+
|
|
81
|
+
```js
|
|
82
|
+
import HSTogglePassword from "@preline/toggle-password/non-auto";
|
|
83
|
+
|
|
84
|
+
HSTogglePassword.autoInit();
|
|
85
|
+
|
|
86
|
+
// Or initialize a specific element manually
|
|
87
|
+
const el = document.querySelector("#toggle-password");
|
|
88
|
+
if (el) new HSTogglePassword(el);
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
### TypeScript
|
|
92
|
+
|
|
93
|
+
This package ships with TypeScript type definitions. No additional `@types/` package is needed.
|
|
94
|
+
|
|
95
|
+
## Basic usage
|
|
96
|
+
|
|
97
|
+
The following example demonstrates the minimal HTML structure required for a toggle password component. This is a base template without custom styling - you can apply your own CSS classes and styles as needed. Clicking the button toggles password visibility.
|
|
98
|
+
|
|
99
|
+
```html
|
|
100
|
+
<div class="relative">
|
|
101
|
+
<input id="hs-toggle-password-first" type="password" name="password" class="py-3 px-4 block w-full border-gray-200 rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-400" value="12345qwerty" required>
|
|
102
|
+
<button type="button" data-hs-toggle-password='{
|
|
103
|
+
"target": "#hs-toggle-password-first"
|
|
104
|
+
}' class="absolute inset-y-0 end-0 flex items-center pointer-events-none z-10 p-3.5">
|
|
105
|
+
<svg class="shrink-0 text-gray-400 size-4" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
|
|
106
|
+
<path class="hs-password-active:hidden" d="M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7.028 7.028 0 0 0-2.79.588l.77.771A5.944 5.944 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.134 13.134 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755-.165.165-.337.328-.517.486l.708.709z"/>
|
|
107
|
+
<path class="hs-password-active:hidden" d="M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829l.822.822zm-2.943 1.299.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829z"/>
|
|
108
|
+
<path class="hs-password-active:hidden" d="M3.35 5.47c-.18.16-.353.322-.518.487A13.134 13.134 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7.029 7.029 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709zm10.296 8.884-12-12 .708-.708 12 12-.708.708z"/>
|
|
109
|
+
<path class="hidden hs-password-active:block" d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z"/>
|
|
110
|
+
<path class="hidden hs-password-active:block" d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z"/>
|
|
111
|
+
</svg>
|
|
112
|
+
<span class="hs-password-active:hidden">
|
|
113
|
+
<svg class="shrink-0 text-gray-400 size-4" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
|
|
114
|
+
<path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z"></path>
|
|
115
|
+
<path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z"></path>
|
|
116
|
+
</svg>
|
|
117
|
+
</span>
|
|
118
|
+
</button>
|
|
119
|
+
</div>
|
|
120
|
+
```
|
|
121
|
+
|
|
122
|
+
**Structure Requirements:**
|
|
123
|
+
- `data-hs-toggle-password`: Required on the toggle button, contains configuration options as JSON
|
|
124
|
+
- `:target`: Required, must be a valid CSS selector pointing to the password input field
|
|
125
|
+
- Password input field must exist in the DOM
|
|
126
|
+
- Toggle button can be positioned anywhere (commonly inside a relative container)
|
|
127
|
+
|
|
128
|
+
**Initial State:**
|
|
129
|
+
- Password input is hidden (type="password")
|
|
130
|
+
- Toggle button shows "show" icon
|
|
131
|
+
|
|
132
|
+
## Configuration Options
|
|
133
|
+
|
|
134
|
+
### Data Options
|
|
135
|
+
|
|
136
|
+
Data options are specified in the `data-hs-toggle-password` attribute as a JSON object.
|
|
137
|
+
|
|
138
|
+
| Option | Target Element | Type | Default | Description |
|
|
139
|
+
| --- | --- | --- | --- | --- |
|
|
140
|
+
| `data-hs-toggle-password` | Toggle button | - | - | Activate a Toggle Password by specifying on an element. Should be added to the button (trigger). |
|
|
141
|
+
| `:target` | Inside `data-hs-toggle-password` | string (CSS selector) | - | Determines which element will change type on click. This must be a valid CSS selector pointing to the password input field. Required. |
|
|
142
|
+
| `:isShown` | Inside `data-hs-toggle-password` | boolean | `false` | Determines password visibility initially. When `true`, password is shown by default. |
|
|
143
|
+
| `:eventType` | Inside `data-hs-toggle-password` | `'change'` \| `'click'` | `'click'` | Determines event type. `click` for button clicks, `change` for checkbox/radio changes. |
|
|
144
|
+
| `data-hs-toggle-password-group` | Container element | - | - | This option allows you to group multiple toggle password elements together so that they can be toggled simultaneously. It should be added to the parent element of the toggle password elements. Should be added to the container. |
|
|
145
|
+
|
|
146
|
+
**Example:**
|
|
147
|
+
```html
|
|
148
|
+
<button data-hs-toggle-password='{
|
|
149
|
+
"target": "#hs-password-input",
|
|
150
|
+
"isShown": false,
|
|
151
|
+
"eventType": "click"
|
|
152
|
+
}'>
|
|
153
|
+
Toggle
|
|
154
|
+
</button>
|
|
155
|
+
```
|
|
156
|
+
|
|
157
|
+
### Tailwind Modifiers
|
|
158
|
+
|
|
159
|
+
| Name | Description |
|
|
160
|
+
| --- | --- |
|
|
161
|
+
| `hs-password-active:*` | A modifier that allows you to set Tailwind classes when the password was shown. |
|
|
162
|
+
|
|
163
|
+
## JavaScript API
|
|
164
|
+
|
|
165
|
+
The `HSTogglePassword` object is available in the global `window` object after the plugin is loaded.
|
|
166
|
+
|
|
167
|
+
### Instance Methods
|
|
168
|
+
|
|
169
|
+
These methods are called on a toggle password instance.
|
|
170
|
+
|
|
171
|
+
| Method | Parameters | Return Type | Description |
|
|
172
|
+
| --- | --- | --- | --- |
|
|
173
|
+
| `show()` | None | `void` | Toggle the field to type text (show password). Changes input type from `password` to `text`. |
|
|
174
|
+
| `hide()` | None | `void` | Toggle the field to type password (hide password). Changes input type from `text` to `password`. |
|
|
175
|
+
| `destroy()` | None | `void` | Destroys the toggle password instance, removes all generated markup, classes, and event listeners. Use when removing toggle password from DOM. |
|
|
176
|
+
|
|
177
|
+
### Static Methods
|
|
178
|
+
|
|
179
|
+
These methods are called directly on the `HSTogglePassword` class.
|
|
180
|
+
|
|
181
|
+
| Method | Parameters | Return Type | Description |
|
|
182
|
+
| --- | --- | --- | --- |
|
|
183
|
+
| `HSTogglePassword.getInstance(target, isInstance)` | `target`: `HTMLElement \| string` (CSS selector)<br>`isInstance`: `boolean` (optional) | `HSTogglePassword \| { id: string \| number, element: HSTogglePassword } \| null` | Returns the toggle password instance associated with the target. If `isInstance` is `true`, returns collection item object `{ id, element }` where `element` is the `HSTogglePassword` instance. If `isInstance` is `false` or omitted, returns the `HSTogglePassword` instance directly. Returns `null` if toggle password instance is not found. |
|
|
184
|
+
|
|
185
|
+
### Usage Examples
|
|
186
|
+
|
|
187
|
+
**Example 1: Showing password programmatically**
|
|
188
|
+
```javascript
|
|
189
|
+
// Get the toggle password instance
|
|
190
|
+
const instance = HSTogglePassword.getInstance('#hs-toggle-password', true);
|
|
191
|
+
|
|
192
|
+
if (instance) {
|
|
193
|
+
const { element } = instance;
|
|
194
|
+
const showBtn = document.querySelector('#hs-show-btn');
|
|
195
|
+
|
|
196
|
+
showBtn.addEventListener('click', () => {
|
|
197
|
+
element.show();
|
|
198
|
+
});
|
|
199
|
+
}
|
|
200
|
+
```
|
|
201
|
+
|
|
202
|
+
**Example 2: Hiding password programmatically**
|
|
203
|
+
```javascript
|
|
204
|
+
const instance = HSTogglePassword.getInstance('#hs-toggle-password', true);
|
|
205
|
+
|
|
206
|
+
if (instance) {
|
|
207
|
+
const { element } = instance;
|
|
208
|
+
const hideBtn = document.querySelector('#hs-hide-btn');
|
|
209
|
+
|
|
210
|
+
hideBtn.addEventListener('click', () => {
|
|
211
|
+
element.hide();
|
|
212
|
+
});
|
|
213
|
+
}
|
|
214
|
+
```
|
|
215
|
+
|
|
216
|
+
**Example 3: Getting instance and accessing properties**
|
|
217
|
+
```javascript
|
|
218
|
+
// Get the toggle password instance
|
|
219
|
+
const instance = HSTogglePassword.getInstance('#hs-toggle-password', true);
|
|
220
|
+
|
|
221
|
+
if (instance) {
|
|
222
|
+
const { element } = instance;
|
|
223
|
+
|
|
224
|
+
// Access instance properties
|
|
225
|
+
console.log('Is shown:', element.isShown);
|
|
226
|
+
console.log('Target:', element.target);
|
|
227
|
+
|
|
228
|
+
// Clean up when removing from DOM
|
|
229
|
+
function removeTogglePassword() {
|
|
230
|
+
element.destroy();
|
|
231
|
+
}
|
|
232
|
+
}
|
|
233
|
+
```
|
|
234
|
+
|
|
235
|
+
**Example 4: Destroying toggle password instance**
|
|
236
|
+
```javascript
|
|
237
|
+
const instance = HSTogglePassword.getInstance('#hs-toggle-password', true);
|
|
238
|
+
|
|
239
|
+
if (instance) {
|
|
240
|
+
const { element } = instance;
|
|
241
|
+
const removeBtn = document.querySelector('#hs-remove-btn');
|
|
242
|
+
|
|
243
|
+
removeBtn.addEventListener('click', () => {
|
|
244
|
+
// Clean up before removing from DOM
|
|
245
|
+
element.destroy();
|
|
246
|
+
// Now safe to remove the element
|
|
247
|
+
document.querySelector('#hs-toggle-password').remove();
|
|
248
|
+
});
|
|
249
|
+
}
|
|
250
|
+
```
|
|
251
|
+
|
|
252
|
+
## Events
|
|
253
|
+
|
|
254
|
+
Toggle password instances emit events that can be listened to for visibility tracking and custom behavior.
|
|
255
|
+
|
|
256
|
+
| Event Name | When Fired | Callback Parameter | Description |
|
|
257
|
+
| --- | --- | --- | --- |
|
|
258
|
+
| `on:toggle` | When password was shown or hidden | `HTMLElement` (target input element) | Fires when password visibility changes. Returns the target password input element. |
|
|
259
|
+
|
|
260
|
+
### Event Usage Example
|
|
261
|
+
|
|
262
|
+
```javascript
|
|
263
|
+
// Get toggle password instance
|
|
264
|
+
const instance = HSTogglePassword.getInstance('#hs-toggle-password', true);
|
|
265
|
+
|
|
266
|
+
if (instance) {
|
|
267
|
+
const { element } = instance;
|
|
268
|
+
|
|
269
|
+
// Listen to toggle event
|
|
270
|
+
element.on('toggle', (target) => {
|
|
271
|
+
console.log('Password visibility toggled:', target);
|
|
272
|
+
// Perform actions after password visibility changes
|
|
273
|
+
// e.g., track analytics, update UI
|
|
274
|
+
});
|
|
275
|
+
}
|
|
276
|
+
```
|
|
277
|
+
|
|
278
|
+
## Common Patterns
|
|
279
|
+
|
|
280
|
+
### Pattern 1: Grouped Toggle
|
|
281
|
+
|
|
282
|
+
Group multiple password fields to toggle simultaneously.
|
|
283
|
+
|
|
284
|
+
```html
|
|
285
|
+
<div data-hs-toggle-password-group>
|
|
286
|
+
<input type="password" id="password-1">
|
|
287
|
+
<button data-hs-toggle-password='{"target": "#password-1"}'>Toggle</button>
|
|
288
|
+
|
|
289
|
+
<input type="password" id="password-2">
|
|
290
|
+
<button data-hs-toggle-password='{"target": "#password-2"}'>Toggle</button>
|
|
291
|
+
</div>
|
|
292
|
+
```
|
|
293
|
+
|
|
294
|
+
### Pattern 2: Initially Shown
|
|
295
|
+
|
|
296
|
+
Show password by default.
|
|
297
|
+
|
|
298
|
+
```html
|
|
299
|
+
<button data-hs-toggle-password='{
|
|
300
|
+
"target": "#hs-password-input",
|
|
301
|
+
"isShown": true
|
|
302
|
+
}'>
|
|
303
|
+
Toggle
|
|
304
|
+
</button>
|
|
305
|
+
```
|
|
306
|
+
|
|
307
|
+
## License
|
|
308
|
+
|
|
309
|
+
Copyright (c) 2026 Preline Labs.
|
|
310
|
+
|
|
311
|
+
Licensed under the [MIT License](https://opensource.org/licenses/MIT).
|
package/index.js
CHANGED
|
@@ -1,24 +1,24 @@
|
|
|
1
|
-
!function(t,e){if("object"==typeof exports&&"object"==typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var s=e();for(var o in s)("object"==typeof exports?exports:t)[o]=s[o]}}(self,(
|
|
1
|
+
!function(t,e){if("object"==typeof exports&&"object"==typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var s=e();for(var o in s)("object"==typeof exports?exports:t)[o]=s[o]}}(self,()=>(()=>{"use strict";var t={2961(t,e){
|
|
2
2
|
/*
|
|
3
|
-
*
|
|
3
|
+
* HSBasePlugin
|
|
4
|
+
* @version: 4.2.0
|
|
4
5
|
* @author: Preline Labs Ltd.
|
|
5
6
|
* @license: Licensed under MIT and Preline UI Fair Use License (https://preline.co/docs/license.html)
|
|
6
7
|
* Copyright 2024 Preline Labs Ltd.
|
|
7
8
|
*/
|
|
8
|
-
Object.defineProperty(e,"__esModule",{value:!0})
|
|
9
|
+
Object.defineProperty(e,"__esModule",{value:!0});e.default=class{constructor(t,e,s){this.el=t,this.options=e,this.events=s,this.el=t,this.options=e,this.events={}}createCollection(t,e){var s,o;let i=t;if(!Array.isArray(i)&&"undefined"!=typeof window){const t=null===(s=this.constructor)||void 0===s?void 0:s.name,e="string"==typeof t&&t.startsWith("HS")?`$hs${t.slice(2)}Collection`:null;e&&(Array.isArray(window[e])||(window[e]=[]),i=window[e])}Array.isArray(i)&&i.push({id:(null===(o=null==e?void 0:e.el)||void 0===o?void 0:o.id)||i.length+1,element:e})}fireEvent(t,e=null){if(this.events.hasOwnProperty(t))return this.events[t](e)}on(t,e){this.events[t]=e}}},2061(t,e,s){var o=this&&this.__importDefault||function(t){return t&&t.__esModule?t:{default:t}};Object.defineProperty(e,"__esModule",{value:!0});const i=o(s(8549));window.addEventListener("load",()=>{i.default.autoInit()}),"undefined"!=typeof window&&(window.HSTogglePassword=i.default)},8549(t,e,s){
|
|
9
10
|
/*
|
|
10
|
-
*
|
|
11
|
-
* @version: 4.
|
|
11
|
+
* HSTogglePassword
|
|
12
|
+
* @version: 4.2.0
|
|
12
13
|
* @author: Preline Labs Ltd.
|
|
13
14
|
* @license: Licensed under MIT and Preline UI Fair Use License (https://preline.co/docs/license.html)
|
|
14
15
|
* Copyright 2024 Preline Labs Ltd.
|
|
15
16
|
*/
|
|
16
|
-
Object.defineProperty(e,"__esModule",{value:!0});
|
|
17
|
+
var o=this&&this.__importDefault||function(t){return t&&t.__esModule?t:{default:t}};Object.defineProperty(e,"__esModule",{value:!0});const i=s(292),n=o(s(2961));class l extends n.default{constructor(t,e){super(t,e);const s=t.getAttribute("data-hs-toggle-password"),o=s?JSON.parse(s):{},n=Object.assign(Object.assign({},o),e),l=[];if((null==n?void 0:n.target)&&"string"==typeof(null==n?void 0:n.target)){(null==n?void 0:n.target.split(",")).forEach(t=>{l.push(document.querySelector(t))})}else(null==n?void 0:n.target)&&"object"==typeof(null==n?void 0:n.target)?n.target.forEach(t=>l.push(document.querySelector(t))):n.target.forEach(t=>l.push(t));this.target=l,this.isShown=!!this.el.hasAttribute("type")&&this.el.checked,this.eventType=(0,i.isFormElement)(this.el)?"change":"click",this.isMultiple=this.target.length>1&&!!this.el.closest("[data-hs-toggle-password-group]"),this.target&&this.init()}elementAction(){this.isShown?this.hide():this.show(),this.fireEvent("toggle",this.target),(0,i.dispatch)("toggle.hs.toggle-select",this.el,this.target)}init(){this.createCollection(window.$hsTogglePasswordCollection,this),this.isShown?this.show():this.hide(),this.onElementActionListener=()=>this.elementAction(),this.el.addEventListener(this.eventType,this.onElementActionListener)}getMultipleToggles(){const t=this.el.closest("[data-hs-toggle-password-group]").querySelectorAll("[data-hs-toggle-password]"),e=[];return t.forEach(t=>{e.push(l.getInstance(t))}),e}show(){if(this.isMultiple){this.getMultipleToggles().forEach(t=>!!t&&(t.isShown=!0)),this.el.closest("[data-hs-toggle-password-group]").classList.add("active")}else this.isShown=!0,this.el.classList.add("active");this.target.forEach(t=>{t.type="text"})}hide(){if(this.isMultiple){this.getMultipleToggles().forEach(t=>!!t&&(t.isShown=!1)),this.el.closest("[data-hs-toggle-password-group]").classList.remove("active")}else this.isShown=!1,this.el.classList.remove("active");this.target.forEach(t=>{t.type="password"})}destroy(){this.isMultiple?this.el.closest("[data-hs-toggle-password-group]").classList.remove("active"):this.el.classList.remove("active"),this.target.forEach(t=>{t.type="password"}),this.el.removeEventListener(this.eventType,this.onElementActionListener),this.isShown=!1,window.$hsTogglePasswordCollection=window.$hsTogglePasswordCollection.filter(({element:t})=>t.el!==this.el)}static getInstance(t,e){const s=window.$hsTogglePasswordCollection.find(e=>e.element.el===("string"==typeof t?document.querySelector(t):t));return s?e?s:s.element:null}static autoInit(){window.$hsTogglePasswordCollection||(window.$hsTogglePasswordCollection=[]),window.$hsTogglePasswordCollection&&(window.$hsTogglePasswordCollection=window.$hsTogglePasswordCollection.filter(({element:t})=>document.contains(t.el))),document.querySelectorAll("[data-hs-toggle-password]:not(.--prevent-on-load-init)").forEach(t=>{window.$hsTogglePasswordCollection.find(e=>{var s;return(null===(s=null==e?void 0:e.element)||void 0===s?void 0:s.el)===t})||new l(t)})}}e.default=l},292(t,e){
|
|
17
18
|
/*
|
|
18
|
-
*
|
|
19
|
-
* @version: 4.1.2
|
|
19
|
+
* @version: 4.2.0
|
|
20
20
|
* @author: Preline Labs Ltd.
|
|
21
21
|
* @license: Licensed under MIT and Preline UI Fair Use License (https://preline.co/docs/license.html)
|
|
22
22
|
* Copyright 2024 Preline Labs Ltd.
|
|
23
23
|
*/
|
|
24
|
-
|
|
24
|
+
Object.defineProperty(e,"__esModule",{value:!0}),e.stringToBoolean=e.menuSearchHistory=e.isScrollable=e.isParentOrElementHidden=e.isJson=e.isIpadOS=e.isIOS=e.isFormElement=e.isFocused=e.isEnoughSpace=e.isDirectChild=e.htmlToElement=e.getZIndex=e.getHighestZIndex=e.getClassPropertyAlt=e.getClassProperty=e.dispatch=e.debounce=e.classToClassList=e.afterTransition=void 0;e.stringToBoolean=t=>"true"===t;e.getClassProperty=(t,e,s="")=>(window.getComputedStyle(t).getPropertyValue(e)||s).replace(" ","");e.getClassPropertyAlt=(t,e,s="")=>{let o="";return t.classList.forEach(t=>{t.includes(e)&&(o=t)}),o.match(/:(.*)]/)?o.match(/:(.*)]/)[1]:s};const s=t=>window.getComputedStyle(t).getPropertyValue("z-index");e.getZIndex=s;e.getHighestZIndex=t=>{let e=Number.NEGATIVE_INFINITY;return t.forEach(t=>{let o=s(t);"auto"!==o&&(o=parseInt(o,10),o>e&&(e=o))}),e};e.isDirectChild=(t,e)=>{const s=t.children;for(let t=0;t<s.length;t++)if(s[t]===e)return!0;return!1};e.isEnoughSpace=(t,e,s="auto",o=10,i=null)=>{const n=e.getBoundingClientRect(),l=i?i.getBoundingClientRect():null,r=window.innerHeight,a=l?n.top-l.top:n.top,d=(i?l.bottom:r)-n.bottom,c=t.clientHeight+o;return"bottom"===s?d>=c:"top"===s?a>=c:a>=c||d>=c};e.isFocused=t=>document.activeElement===t;e.isFormElement=t=>t instanceof HTMLInputElement||t instanceof HTMLTextAreaElement||t instanceof HTMLSelectElement;e.isIOS=()=>!!/iPad|iPhone|iPod/.test(navigator.platform)||navigator.maxTouchPoints&&navigator.maxTouchPoints>2&&/MacIntel/.test(navigator.platform);e.isIpadOS=()=>navigator.maxTouchPoints&&navigator.maxTouchPoints>2&&/MacIntel/.test(navigator.platform);e.isJson=t=>{if("string"!=typeof t)return!1;const e=t.trim()[0],s=t.trim().slice(-1);if("{"===e&&"}"===s||"["===e&&"]"===s)try{return JSON.parse(t),!0}catch(t){return!1}return!1};const o=t=>{if(!t)return!1;return"none"===window.getComputedStyle(t).display||o(t.parentElement)};e.isParentOrElementHidden=o;e.isScrollable=t=>{const e=window.getComputedStyle(t),s=e.overflowY,o=e.overflowX,i=("scroll"===s||"auto"===s)&&t.scrollHeight>t.clientHeight,n=("scroll"===o||"auto"===o)&&t.scrollWidth>t.clientWidth;return i||n};e.debounce=(t,e=200)=>{let s;return(...o)=>{clearTimeout(s),s=setTimeout(()=>{t.apply(this,o)},e)}};e.dispatch=(t,e,s=null)=>{const o=new CustomEvent(t,{detail:{payload:s},bubbles:!0,cancelable:!0,composed:!1});e.dispatchEvent(o)};e.afterTransition=(t,e)=>{const s=()=>{e(),t.removeEventListener("transitionend",s,!0)},o=window.getComputedStyle(t),i=o.getPropertyValue("transition-duration");"none"!==o.getPropertyValue("transition-property")&&parseFloat(i)>0?t.addEventListener("transitionend",s,!0):e()};e.htmlToElement=t=>{const e=document.createElement("template");return t=t.trim(),e.innerHTML=t,e.content.firstChild};e.classToClassList=(t,e,s=" ",o="add")=>{t.split(s).forEach(t=>{t.trim()&&("add"===o?e.classList.add(t):e.classList.remove(t))})};const i={historyIndex:-1,addHistory(t){this.historyIndex=t},existsInHistory(t){return t>this.historyIndex},clearHistory(){this.historyIndex=-1}};e.menuSearchHistory=i}},e={};var s=function s(o){var i=e[o];if(void 0!==i)return i.exports;var n=e[o]={exports:{}};return t[o].call(n.exports,n,n.exports,s),n.exports}(2061);return s})());
|
package/index.mjs
CHANGED
|
@@ -1,24 +1,24 @@
|
|
|
1
|
-
var t={
|
|
1
|
+
var t={7615(t,e,s){s.d(e,{A:()=>o});
|
|
2
2
|
/*
|
|
3
3
|
* HSBasePlugin
|
|
4
|
-
* @version: 4.
|
|
4
|
+
* @version: 4.2.0
|
|
5
5
|
* @author: Preline Labs Ltd.
|
|
6
6
|
* @license: Licensed under MIT and Preline UI Fair Use License (https://preline.co/docs/license.html)
|
|
7
7
|
* Copyright 2024 Preline Labs Ltd.
|
|
8
8
|
*/
|
|
9
|
-
class o{constructor(t,e,s){this.el=t,this.options=e,this.events=s,this.el=t,this.options=e,this.events={}}createCollection(t,e){var s,o;let i=t;if(!Array.isArray(i)&&"undefined"!=typeof window){const t=null===(s=this.constructor)||void 0===s?void 0:s.name,e="string"==typeof t&&t.startsWith("HS")?`$hs${t.slice(2)}Collection`:null;e&&(Array.isArray(window[e])||(window[e]=[]),i=window[e])}Array.isArray(i)&&i.push({id:(null===(o=null==e?void 0:e.el)||void 0===o?void 0:o.id)||i.length+1,element:e})}fireEvent(t,e=null){if(this.events.hasOwnProperty(t))return this.events[t](e)}on(t,e){this.events[t]=e}}},
|
|
9
|
+
class o{constructor(t,e,s){this.el=t,this.options=e,this.events=s,this.el=t,this.options=e,this.events={}}createCollection(t,e){var s,o;let i=t;if(!Array.isArray(i)&&"undefined"!=typeof window){const t=null===(s=this.constructor)||void 0===s?void 0:s.name,e="string"==typeof t&&t.startsWith("HS")?`$hs${t.slice(2)}Collection`:null;e&&(Array.isArray(window[e])||(window[e]=[]),i=window[e])}Array.isArray(i)&&i.push({id:(null===(o=null==e?void 0:e.el)||void 0===o?void 0:o.id)||i.length+1,element:e})}fireEvent(t,e=null){if(this.events.hasOwnProperty(t))return this.events[t](e)}on(t,e){this.events[t]=e}}},847(t,e,s){s.d(e,{A:()=>n});var o=s(1926),i=s(7615);
|
|
10
10
|
/*
|
|
11
|
-
*
|
|
11
|
+
* HSTogglePassword
|
|
12
|
+
* @version: 4.2.0
|
|
12
13
|
* @author: Preline Labs Ltd.
|
|
13
14
|
* @license: Licensed under MIT and Preline UI Fair Use License (https://preline.co/docs/license.html)
|
|
14
15
|
* Copyright 2024 Preline Labs Ltd.
|
|
15
16
|
*/
|
|
16
|
-
|
|
17
|
+
class l extends i.A{constructor(t,e){super(t,e);const s=t.getAttribute("data-hs-toggle-password"),i=s?JSON.parse(s):{},l=Object.assign(Object.assign({},i),e),n=[];if((null==l?void 0:l.target)&&"string"==typeof(null==l?void 0:l.target)){(null==l?void 0:l.target.split(",")).forEach(t=>{n.push(document.querySelector(t))})}else(null==l?void 0:l.target)&&"object"==typeof(null==l?void 0:l.target)?l.target.forEach(t=>n.push(document.querySelector(t))):l.target.forEach(t=>n.push(t));this.target=n,this.isShown=!!this.el.hasAttribute("type")&&this.el.checked,this.eventType=(0,o.V6)(this.el)?"change":"click",this.isMultiple=this.target.length>1&&!!this.el.closest("[data-hs-toggle-password-group]"),this.target&&this.init()}elementAction(){this.isShown?this.hide():this.show(),this.fireEvent("toggle",this.target),(0,o.JD)("toggle.hs.toggle-select",this.el,this.target)}init(){this.createCollection(window.$hsTogglePasswordCollection,this),this.isShown?this.show():this.hide(),this.onElementActionListener=()=>this.elementAction(),this.el.addEventListener(this.eventType,this.onElementActionListener)}getMultipleToggles(){const t=this.el.closest("[data-hs-toggle-password-group]").querySelectorAll("[data-hs-toggle-password]"),e=[];return t.forEach(t=>{e.push(l.getInstance(t))}),e}show(){if(this.isMultiple){this.getMultipleToggles().forEach(t=>!!t&&(t.isShown=!0)),this.el.closest("[data-hs-toggle-password-group]").classList.add("active")}else this.isShown=!0,this.el.classList.add("active");this.target.forEach(t=>{t.type="text"})}hide(){if(this.isMultiple){this.getMultipleToggles().forEach(t=>!!t&&(t.isShown=!1)),this.el.closest("[data-hs-toggle-password-group]").classList.remove("active")}else this.isShown=!1,this.el.classList.remove("active");this.target.forEach(t=>{t.type="password"})}destroy(){this.isMultiple?this.el.closest("[data-hs-toggle-password-group]").classList.remove("active"):this.el.classList.remove("active"),this.target.forEach(t=>{t.type="password"}),this.el.removeEventListener(this.eventType,this.onElementActionListener),this.isShown=!1,window.$hsTogglePasswordCollection=window.$hsTogglePasswordCollection.filter(({element:t})=>t.el!==this.el)}static getInstance(t,e){const s=window.$hsTogglePasswordCollection.find(e=>e.element.el===("string"==typeof t?document.querySelector(t):t));return s?e?s:s.element:null}static autoInit(){window.$hsTogglePasswordCollection||(window.$hsTogglePasswordCollection=[]),window.$hsTogglePasswordCollection&&(window.$hsTogglePasswordCollection=window.$hsTogglePasswordCollection.filter(({element:t})=>document.contains(t.el))),document.querySelectorAll("[data-hs-toggle-password]:not(.--prevent-on-load-init)").forEach(t=>{window.$hsTogglePasswordCollection.find(e=>{var s;return(null===(s=null==e?void 0:e.element)||void 0===s?void 0:s.el)===t})||new l(t)})}}const n=l},1926(t,e,s){s.d(e,{JD:()=>i,V6:()=>o});
|
|
17
18
|
/*
|
|
18
|
-
*
|
|
19
|
-
* @version: 4.1.2
|
|
19
|
+
* @version: 4.2.0
|
|
20
20
|
* @author: Preline Labs Ltd.
|
|
21
21
|
* @license: Licensed under MIT and Preline UI Fair Use License (https://preline.co/docs/license.html)
|
|
22
22
|
* Copyright 2024 Preline Labs Ltd.
|
|
23
23
|
*/
|
|
24
|
-
|
|
24
|
+
const o=t=>t instanceof HTMLInputElement||t instanceof HTMLTextAreaElement||t instanceof HTMLSelectElement,i=(t,e,s=null)=>{const o=new CustomEvent(t,{detail:{payload:s},bubbles:!0,cancelable:!0,composed:!1});e.dispatchEvent(o)}}},e={};function s(o){var i=e[o];if(void 0!==i)return i.exports;var l=e[o]={exports:{}};return t[o](l,l.exports,s),l.exports}s.d=(t,e)=>{for(var o in e)s.o(e,o)&&!s.o(t,o)&&Object.defineProperty(t,o,{enumerable:!0,get:e[o]})},s.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e);var o=s(847);window.addEventListener("load",()=>{o.A.autoInit()}),"undefined"!=typeof window&&(window.HSTogglePassword=o.A);
|
package/non-auto.js
ADDED
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
!function(t,e){if("object"==typeof exports&&"object"==typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var s=e();for(var o in s)("object"==typeof exports?exports:t)[o]=s[o]}}(self,()=>(()=>{"use strict";var t={2961(t,e){
|
|
2
|
+
/*
|
|
3
|
+
* HSBasePlugin
|
|
4
|
+
* @version: 4.2.0
|
|
5
|
+
* @author: Preline Labs Ltd.
|
|
6
|
+
* @license: Licensed under MIT and Preline UI Fair Use License (https://preline.co/docs/license.html)
|
|
7
|
+
* Copyright 2024 Preline Labs Ltd.
|
|
8
|
+
*/
|
|
9
|
+
Object.defineProperty(e,"__esModule",{value:!0});e.default=class{constructor(t,e,s){this.el=t,this.options=e,this.events=s,this.el=t,this.options=e,this.events={}}createCollection(t,e){var s,o;let i=t;if(!Array.isArray(i)&&"undefined"!=typeof window){const t=null===(s=this.constructor)||void 0===s?void 0:s.name,e="string"==typeof t&&t.startsWith("HS")?`$hs${t.slice(2)}Collection`:null;e&&(Array.isArray(window[e])||(window[e]=[]),i=window[e])}Array.isArray(i)&&i.push({id:(null===(o=null==e?void 0:e.el)||void 0===o?void 0:o.id)||i.length+1,element:e})}fireEvent(t,e=null){if(this.events.hasOwnProperty(t))return this.events[t](e)}on(t,e){this.events[t]=e}}},8549(t,e,s){
|
|
10
|
+
/*
|
|
11
|
+
* HSTogglePassword
|
|
12
|
+
* @version: 4.2.0
|
|
13
|
+
* @author: Preline Labs Ltd.
|
|
14
|
+
* @license: Licensed under MIT and Preline UI Fair Use License (https://preline.co/docs/license.html)
|
|
15
|
+
* Copyright 2024 Preline Labs Ltd.
|
|
16
|
+
*/
|
|
17
|
+
var o=this&&this.__importDefault||function(t){return t&&t.__esModule?t:{default:t}};Object.defineProperty(e,"__esModule",{value:!0});const i=s(292),n=o(s(2961));class r extends n.default{constructor(t,e){super(t,e);const s=t.getAttribute("data-hs-toggle-password"),o=s?JSON.parse(s):{},n=Object.assign(Object.assign({},o),e),r=[];if((null==n?void 0:n.target)&&"string"==typeof(null==n?void 0:n.target)){(null==n?void 0:n.target.split(",")).forEach(t=>{r.push(document.querySelector(t))})}else(null==n?void 0:n.target)&&"object"==typeof(null==n?void 0:n.target)?n.target.forEach(t=>r.push(document.querySelector(t))):n.target.forEach(t=>r.push(t));this.target=r,this.isShown=!!this.el.hasAttribute("type")&&this.el.checked,this.eventType=(0,i.isFormElement)(this.el)?"change":"click",this.isMultiple=this.target.length>1&&!!this.el.closest("[data-hs-toggle-password-group]"),this.target&&this.init()}elementAction(){this.isShown?this.hide():this.show(),this.fireEvent("toggle",this.target),(0,i.dispatch)("toggle.hs.toggle-select",this.el,this.target)}init(){this.createCollection(window.$hsTogglePasswordCollection,this),this.isShown?this.show():this.hide(),this.onElementActionListener=()=>this.elementAction(),this.el.addEventListener(this.eventType,this.onElementActionListener)}getMultipleToggles(){const t=this.el.closest("[data-hs-toggle-password-group]").querySelectorAll("[data-hs-toggle-password]"),e=[];return t.forEach(t=>{e.push(r.getInstance(t))}),e}show(){if(this.isMultiple){this.getMultipleToggles().forEach(t=>!!t&&(t.isShown=!0)),this.el.closest("[data-hs-toggle-password-group]").classList.add("active")}else this.isShown=!0,this.el.classList.add("active");this.target.forEach(t=>{t.type="text"})}hide(){if(this.isMultiple){this.getMultipleToggles().forEach(t=>!!t&&(t.isShown=!1)),this.el.closest("[data-hs-toggle-password-group]").classList.remove("active")}else this.isShown=!1,this.el.classList.remove("active");this.target.forEach(t=>{t.type="password"})}destroy(){this.isMultiple?this.el.closest("[data-hs-toggle-password-group]").classList.remove("active"):this.el.classList.remove("active"),this.target.forEach(t=>{t.type="password"}),this.el.removeEventListener(this.eventType,this.onElementActionListener),this.isShown=!1,window.$hsTogglePasswordCollection=window.$hsTogglePasswordCollection.filter(({element:t})=>t.el!==this.el)}static getInstance(t,e){const s=window.$hsTogglePasswordCollection.find(e=>e.element.el===("string"==typeof t?document.querySelector(t):t));return s?e?s:s.element:null}static autoInit(){window.$hsTogglePasswordCollection||(window.$hsTogglePasswordCollection=[]),window.$hsTogglePasswordCollection&&(window.$hsTogglePasswordCollection=window.$hsTogglePasswordCollection.filter(({element:t})=>document.contains(t.el))),document.querySelectorAll("[data-hs-toggle-password]:not(.--prevent-on-load-init)").forEach(t=>{window.$hsTogglePasswordCollection.find(e=>{var s;return(null===(s=null==e?void 0:e.element)||void 0===s?void 0:s.el)===t})||new r(t)})}}e.default=r},292(t,e){
|
|
18
|
+
/*
|
|
19
|
+
* @version: 4.2.0
|
|
20
|
+
* @author: Preline Labs Ltd.
|
|
21
|
+
* @license: Licensed under MIT and Preline UI Fair Use License (https://preline.co/docs/license.html)
|
|
22
|
+
* Copyright 2024 Preline Labs Ltd.
|
|
23
|
+
*/
|
|
24
|
+
Object.defineProperty(e,"__esModule",{value:!0}),e.stringToBoolean=e.menuSearchHistory=e.isScrollable=e.isParentOrElementHidden=e.isJson=e.isIpadOS=e.isIOS=e.isFormElement=e.isFocused=e.isEnoughSpace=e.isDirectChild=e.htmlToElement=e.getZIndex=e.getHighestZIndex=e.getClassPropertyAlt=e.getClassProperty=e.dispatch=e.debounce=e.classToClassList=e.afterTransition=void 0;e.stringToBoolean=t=>"true"===t;e.getClassProperty=(t,e,s="")=>(window.getComputedStyle(t).getPropertyValue(e)||s).replace(" ","");e.getClassPropertyAlt=(t,e,s="")=>{let o="";return t.classList.forEach(t=>{t.includes(e)&&(o=t)}),o.match(/:(.*)]/)?o.match(/:(.*)]/)[1]:s};const s=t=>window.getComputedStyle(t).getPropertyValue("z-index");e.getZIndex=s;e.getHighestZIndex=t=>{let e=Number.NEGATIVE_INFINITY;return t.forEach(t=>{let o=s(t);"auto"!==o&&(o=parseInt(o,10),o>e&&(e=o))}),e};e.isDirectChild=(t,e)=>{const s=t.children;for(let t=0;t<s.length;t++)if(s[t]===e)return!0;return!1};e.isEnoughSpace=(t,e,s="auto",o=10,i=null)=>{const n=e.getBoundingClientRect(),r=i?i.getBoundingClientRect():null,l=window.innerHeight,a=r?n.top-r.top:n.top,c=(i?r.bottom:l)-n.bottom,d=t.clientHeight+o;return"bottom"===s?c>=d:"top"===s?a>=d:a>=d||c>=d};e.isFocused=t=>document.activeElement===t;e.isFormElement=t=>t instanceof HTMLInputElement||t instanceof HTMLTextAreaElement||t instanceof HTMLSelectElement;e.isIOS=()=>!!/iPad|iPhone|iPod/.test(navigator.platform)||navigator.maxTouchPoints&&navigator.maxTouchPoints>2&&/MacIntel/.test(navigator.platform);e.isIpadOS=()=>navigator.maxTouchPoints&&navigator.maxTouchPoints>2&&/MacIntel/.test(navigator.platform);e.isJson=t=>{if("string"!=typeof t)return!1;const e=t.trim()[0],s=t.trim().slice(-1);if("{"===e&&"}"===s||"["===e&&"]"===s)try{return JSON.parse(t),!0}catch(t){return!1}return!1};const o=t=>{if(!t)return!1;return"none"===window.getComputedStyle(t).display||o(t.parentElement)};e.isParentOrElementHidden=o;e.isScrollable=t=>{const e=window.getComputedStyle(t),s=e.overflowY,o=e.overflowX,i=("scroll"===s||"auto"===s)&&t.scrollHeight>t.clientHeight,n=("scroll"===o||"auto"===o)&&t.scrollWidth>t.clientWidth;return i||n};e.debounce=(t,e=200)=>{let s;return(...o)=>{clearTimeout(s),s=setTimeout(()=>{t.apply(this,o)},e)}};e.dispatch=(t,e,s=null)=>{const o=new CustomEvent(t,{detail:{payload:s},bubbles:!0,cancelable:!0,composed:!1});e.dispatchEvent(o)};e.afterTransition=(t,e)=>{const s=()=>{e(),t.removeEventListener("transitionend",s,!0)},o=window.getComputedStyle(t),i=o.getPropertyValue("transition-duration");"none"!==o.getPropertyValue("transition-property")&&parseFloat(i)>0?t.addEventListener("transitionend",s,!0):e()};e.htmlToElement=t=>{const e=document.createElement("template");return t=t.trim(),e.innerHTML=t,e.content.firstChild};e.classToClassList=(t,e,s=" ",o="add")=>{t.split(s).forEach(t=>{t.trim()&&("add"===o?e.classList.add(t):e.classList.remove(t))})};const i={historyIndex:-1,addHistory(t){this.historyIndex=t},existsInHistory(t){return t>this.historyIndex},clearHistory(){this.historyIndex=-1}};e.menuSearchHistory=i}},e={};var s=function s(o){var i=e[o];if(void 0!==i)return i.exports;var n=e[o]={exports:{}};return t[o].call(n.exports,n,n.exports,s),n.exports}(8549);return s})());
|
package/non-auto.mjs
ADDED
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
var t={7615(t,e,s){s.d(e,{A:()=>o});
|
|
2
|
+
/*
|
|
3
|
+
* HSBasePlugin
|
|
4
|
+
* @version: 4.2.0
|
|
5
|
+
* @author: Preline Labs Ltd.
|
|
6
|
+
* @license: Licensed under MIT and Preline UI Fair Use License (https://preline.co/docs/license.html)
|
|
7
|
+
* Copyright 2024 Preline Labs Ltd.
|
|
8
|
+
*/
|
|
9
|
+
class o{constructor(t,e,s){this.el=t,this.options=e,this.events=s,this.el=t,this.options=e,this.events={}}createCollection(t,e){var s,o;let i=t;if(!Array.isArray(i)&&"undefined"!=typeof window){const t=null===(s=this.constructor)||void 0===s?void 0:s.name,e="string"==typeof t&&t.startsWith("HS")?`$hs${t.slice(2)}Collection`:null;e&&(Array.isArray(window[e])||(window[e]=[]),i=window[e])}Array.isArray(i)&&i.push({id:(null===(o=null==e?void 0:e.el)||void 0===o?void 0:o.id)||i.length+1,element:e})}fireEvent(t,e=null){if(this.events.hasOwnProperty(t))return this.events[t](e)}on(t,e){this.events[t]=e}}},1926(t,e,s){s.d(e,{JD:()=>i,V6:()=>o});
|
|
10
|
+
/*
|
|
11
|
+
* @version: 4.2.0
|
|
12
|
+
* @author: Preline Labs Ltd.
|
|
13
|
+
* @license: Licensed under MIT and Preline UI Fair Use License (https://preline.co/docs/license.html)
|
|
14
|
+
* Copyright 2024 Preline Labs Ltd.
|
|
15
|
+
*/
|
|
16
|
+
const o=t=>t instanceof HTMLInputElement||t instanceof HTMLTextAreaElement||t instanceof HTMLSelectElement,i=(t,e,s=null)=>{const o=new CustomEvent(t,{detail:{payload:s},bubbles:!0,cancelable:!0,composed:!1});e.dispatchEvent(o)}}},e={};function s(o){var i=e[o];if(void 0!==i)return i.exports;var l=e[o]={exports:{}};return t[o](l,l.exports,s),l.exports}s.d=(t,e)=>{for(var o in e)s.o(e,o)&&!s.o(t,o)&&Object.defineProperty(t,o,{enumerable:!0,get:e[o]})},s.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e);var o={};s.d(o,{A:()=>r});var i=s(1926),l=s(7615);
|
|
17
|
+
/*
|
|
18
|
+
* HSTogglePassword
|
|
19
|
+
* @version: 4.2.0
|
|
20
|
+
* @author: Preline Labs Ltd.
|
|
21
|
+
* @license: Licensed under MIT and Preline UI Fair Use License (https://preline.co/docs/license.html)
|
|
22
|
+
* Copyright 2024 Preline Labs Ltd.
|
|
23
|
+
*/
|
|
24
|
+
class n extends l.A{constructor(t,e){super(t,e);const s=t.getAttribute("data-hs-toggle-password"),o=s?JSON.parse(s):{},l=Object.assign(Object.assign({},o),e),n=[];if((null==l?void 0:l.target)&&"string"==typeof(null==l?void 0:l.target)){(null==l?void 0:l.target.split(",")).forEach(t=>{n.push(document.querySelector(t))})}else(null==l?void 0:l.target)&&"object"==typeof(null==l?void 0:l.target)?l.target.forEach(t=>n.push(document.querySelector(t))):l.target.forEach(t=>n.push(t));this.target=n,this.isShown=!!this.el.hasAttribute("type")&&this.el.checked,this.eventType=(0,i.V6)(this.el)?"change":"click",this.isMultiple=this.target.length>1&&!!this.el.closest("[data-hs-toggle-password-group]"),this.target&&this.init()}elementAction(){this.isShown?this.hide():this.show(),this.fireEvent("toggle",this.target),(0,i.JD)("toggle.hs.toggle-select",this.el,this.target)}init(){this.createCollection(window.$hsTogglePasswordCollection,this),this.isShown?this.show():this.hide(),this.onElementActionListener=()=>this.elementAction(),this.el.addEventListener(this.eventType,this.onElementActionListener)}getMultipleToggles(){const t=this.el.closest("[data-hs-toggle-password-group]").querySelectorAll("[data-hs-toggle-password]"),e=[];return t.forEach(t=>{e.push(n.getInstance(t))}),e}show(){if(this.isMultiple){this.getMultipleToggles().forEach(t=>!!t&&(t.isShown=!0)),this.el.closest("[data-hs-toggle-password-group]").classList.add("active")}else this.isShown=!0,this.el.classList.add("active");this.target.forEach(t=>{t.type="text"})}hide(){if(this.isMultiple){this.getMultipleToggles().forEach(t=>!!t&&(t.isShown=!1)),this.el.closest("[data-hs-toggle-password-group]").classList.remove("active")}else this.isShown=!1,this.el.classList.remove("active");this.target.forEach(t=>{t.type="password"})}destroy(){this.isMultiple?this.el.closest("[data-hs-toggle-password-group]").classList.remove("active"):this.el.classList.remove("active"),this.target.forEach(t=>{t.type="password"}),this.el.removeEventListener(this.eventType,this.onElementActionListener),this.isShown=!1,window.$hsTogglePasswordCollection=window.$hsTogglePasswordCollection.filter(({element:t})=>t.el!==this.el)}static getInstance(t,e){const s=window.$hsTogglePasswordCollection.find(e=>e.element.el===("string"==typeof t?document.querySelector(t):t));return s?e?s:s.element:null}static autoInit(){window.$hsTogglePasswordCollection||(window.$hsTogglePasswordCollection=[]),window.$hsTogglePasswordCollection&&(window.$hsTogglePasswordCollection=window.$hsTogglePasswordCollection.filter(({element:t})=>document.contains(t.el))),document.querySelectorAll("[data-hs-toggle-password]:not(.--prevent-on-load-init)").forEach(t=>{window.$hsTogglePasswordCollection.find(e=>{var s;return(null===(s=null==e?void 0:e.element)||void 0===s?void 0:s.el)===t})||new n(t)})}}const r=n,a=o.A;export{a as default};
|
package/package.json
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@preline/toggle-password",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.2.0",
|
|
4
4
|
"description": "Preline UI is an open-source set of prebuilt UI components based on the utility-first Tailwind CSS framework.",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"types": "index.d.ts",
|
|
7
7
|
"repository": "https://github.com/htmlstreamofficial/preline.git",
|
|
8
|
-
"homepage": "https://preline.co/plugins.html",
|
|
9
|
-
"keywords": ["preline", "html", "css", "next", "nuxt", "vue", "react", "angular", "javascript", "typescript", "tailwind", "tailwind components", "tailwind elements", "tailwind library", "tailwind sections", "tailwind css", "tailwind ui", "tailwind css react", "tailwind css vue", "tailwind css angular", "tailwind css laravel", "tailwindcss plugin", "tailwindcss plugins", "
|
|
8
|
+
"homepage": "https://preline.co/plugins/toggle-password.html",
|
|
9
|
+
"keywords": ["preline", "html", "css", "next", "nuxt", "vue", "react", "angular", "javascript", "typescript", "tailwind", "tailwind components", "tailwind elements", "tailwind library", "tailwind sections", "tailwind css", "tailwind ui", "tailwind css react", "tailwind css vue", "tailwind css angular", "tailwind css laravel", "tailwindcss plugin", "tailwindcss plugins", "toggle password"],
|
|
10
10
|
"author": "Preline Labs Ltd.",
|
|
11
11
|
"license": "Licensed under MIT and Preline UI Fair Use License",
|
|
12
12
|
"publishConfig": {
|
package/theme.css
ADDED
|
@@ -0,0 +1,725 @@
|
|
|
1
|
+
/* ------------------------------ */
|
|
2
|
+
/* ---------- Default ----------- */
|
|
3
|
+
/* ------------------------------ */
|
|
4
|
+
|
|
5
|
+
@layer base {
|
|
6
|
+
* {
|
|
7
|
+
@apply border-border;
|
|
8
|
+
}
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
@theme {
|
|
12
|
+
--radius-full: calc(infinity * 1px);
|
|
13
|
+
|
|
14
|
+
--font-custom-default: var(--font-sans);
|
|
15
|
+
--font-custom-serif: "Domine", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
|
|
16
|
+
--font-custom-mono: "Kode Mono", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
@theme inline {
|
|
20
|
+
--color-preline-khaki-50: oklch(98% 0.002 67.8);
|
|
21
|
+
--color-preline-khaki-100: oklch(95.5% 0.004 91.4);
|
|
22
|
+
--color-preline-khaki-200: oklch(89.7% 0.008 91.5);
|
|
23
|
+
--color-preline-khaki-300: oklch(82.7% 0.014 88.7);
|
|
24
|
+
--color-preline-khaki-400: oklch(73% 0.024 87.2);
|
|
25
|
+
--color-preline-khaki-500: oklch(62.5% 0.031 88.8);
|
|
26
|
+
--color-preline-khaki-600: oklch(52.8% 0.031 91);
|
|
27
|
+
--color-preline-khaki-700: oklch(41.4% 0.027 89.9);
|
|
28
|
+
--color-preline-khaki-800: oklch(34.6% 0.023 89.5);
|
|
29
|
+
--color-preline-khaki-900: oklch(30.6% 0.018 88.8);
|
|
30
|
+
--color-preline-khaki-950: oklch(20.1% 0.023 91.7);
|
|
31
|
+
|
|
32
|
+
--color-preline-mauve-50: oklch(98.1% 0.002 345.2);
|
|
33
|
+
--color-preline-mauve-100: oklch(95.6% 0.006 334);
|
|
34
|
+
--color-preline-mauve-200: oklch(89.7% 0.013 337.5);
|
|
35
|
+
--color-preline-mauve-300: oklch(82.4% 0.022 339.7);
|
|
36
|
+
--color-preline-mauve-400: oklch(71.7% 0.038 340.7);
|
|
37
|
+
--color-preline-mauve-500: oklch(55.9% 0.045 341);
|
|
38
|
+
--color-preline-mauve-600: oklch(51.1% 0.047 342.2);
|
|
39
|
+
--color-preline-mauve-700: oklch(45.5% 0.04 342.1);
|
|
40
|
+
--color-preline-mauve-800: oklch(36.4% 0.034 342.3);
|
|
41
|
+
--color-preline-mauve-900: oklch(32.3% 0.029 340.9);
|
|
42
|
+
--color-preline-mauve-950: oklch(21.9% 0.034 341.1);
|
|
43
|
+
|
|
44
|
+
--color-preline-avocado-50: oklch(92.8% 0.012 120);
|
|
45
|
+
--color-preline-avocado-100: oklch(88.6% 0.02 120);
|
|
46
|
+
--color-preline-avocado-200: oklch(80.4% 0.035 120);
|
|
47
|
+
--color-preline-avocado-300: oklch(72.4% 0.055 120);
|
|
48
|
+
--color-preline-avocado-400: oklch(64.6% 0.075 120);
|
|
49
|
+
--color-preline-avocado-500: oklch(57% 0.085 120);
|
|
50
|
+
--color-preline-avocado-600: oklch(49.6% 0.08 120);
|
|
51
|
+
--color-preline-avocado-700: oklch(42.4% 0.07 120);
|
|
52
|
+
--color-preline-avocado-800: oklch(35.4% 0.055 120);
|
|
53
|
+
--color-preline-avocado-900: oklch(28.6% 0.04 120);
|
|
54
|
+
--color-preline-avocado-950: oklch(25.3% 0.03 120);
|
|
55
|
+
|
|
56
|
+
--color-preline-avocado-soft-50: oklch(98% 0.002 120);
|
|
57
|
+
--color-preline-avocado-soft-100: oklch(95.5% 0.004 120);
|
|
58
|
+
--color-preline-avocado-soft-200: oklch(89.7% 0.008 120);
|
|
59
|
+
--color-preline-avocado-soft-300: oklch(82.7% 0.012 120);
|
|
60
|
+
--color-preline-avocado-soft-400: oklch(73% 0.018 120);
|
|
61
|
+
--color-preline-avocado-soft-500: oklch(62.5% 0.02 120);
|
|
62
|
+
--color-preline-avocado-soft-600: oklch(52.8% 0.016 120);
|
|
63
|
+
--color-preline-avocado-soft-700: oklch(41.4% 0.012 120);
|
|
64
|
+
--color-preline-avocado-soft-800: oklch(26.9% 0.006 120);
|
|
65
|
+
--color-preline-avocado-soft-900: oklch(20.5% 0.004 120);
|
|
66
|
+
--color-preline-avocado-soft-950: oklch(14.1% 0.002 120);
|
|
67
|
+
|
|
68
|
+
--color-background: var(--background);
|
|
69
|
+
--color-background-1: var(--background-1);
|
|
70
|
+
--color-background-2: var(--background-2);
|
|
71
|
+
--color-plain: var(--background-plain);
|
|
72
|
+
--color-foreground: var(--foreground);
|
|
73
|
+
--color-foreground-inverse: var(--foreground-inverse);
|
|
74
|
+
|
|
75
|
+
--color-inverse: var(--inverse);
|
|
76
|
+
|
|
77
|
+
--color-border: var(--border);
|
|
78
|
+
--color-line-inverse: var(--border-line-inverse);
|
|
79
|
+
--color-line-1: var(--border-line-1);
|
|
80
|
+
--color-line-2: var(--border-line-2);
|
|
81
|
+
--color-line-3: var(--border-line-3);
|
|
82
|
+
--color-line-4: var(--border-line-4);
|
|
83
|
+
--color-line-5: var(--border-line-5);
|
|
84
|
+
--color-line-6: var(--border-line-6);
|
|
85
|
+
--color-line-7: var(--border-line-7);
|
|
86
|
+
--color-line-8: var(--border-line-8);
|
|
87
|
+
|
|
88
|
+
--color-primary-50: var(--primary-50);
|
|
89
|
+
--color-primary-100: var(--primary-100);
|
|
90
|
+
--color-primary-200: var(--primary-200);
|
|
91
|
+
--color-primary-300: var(--primary-300);
|
|
92
|
+
--color-primary-400: var(--primary-400);
|
|
93
|
+
--color-primary-500: var(--primary-500);
|
|
94
|
+
--color-primary-600: var(--primary-600);
|
|
95
|
+
--color-primary-700: var(--primary-700);
|
|
96
|
+
--color-primary-800: var(--primary-800);
|
|
97
|
+
--color-primary-900: var(--primary-900);
|
|
98
|
+
--color-primary-950: var(--primary-950);
|
|
99
|
+
|
|
100
|
+
--color-primary: var(--primary);
|
|
101
|
+
--color-primary-line: var(--primary-line);
|
|
102
|
+
--color-primary-foreground: var(--primary-foreground);
|
|
103
|
+
--color-primary-hover: var(--primary-hover);
|
|
104
|
+
--color-primary-focus: var(--primary-focus);
|
|
105
|
+
--color-primary-active: var(--primary-active);
|
|
106
|
+
--color-primary-checked: var(--primary-checked);
|
|
107
|
+
|
|
108
|
+
--color-secondary: var(--secondary);
|
|
109
|
+
--color-secondary-line: var(--secondary-line);
|
|
110
|
+
--color-secondary-foreground: var(--secondary-foreground);
|
|
111
|
+
--color-secondary-hover: var(--secondary-hover);
|
|
112
|
+
--color-secondary-focus: var(--secondary-focus);
|
|
113
|
+
--color-secondary-active: var(--secondary-active);
|
|
114
|
+
|
|
115
|
+
--color-layer: var(--layer);
|
|
116
|
+
--color-layer-line: var(--layer-line);
|
|
117
|
+
--color-layer-foreground: var(--layer-foreground);
|
|
118
|
+
--color-layer-hover: var(--layer-hover);
|
|
119
|
+
--color-layer-focus: var(--layer-focus);
|
|
120
|
+
--color-layer-active: var(--layer-active);
|
|
121
|
+
|
|
122
|
+
--color-surface: var(--surface);
|
|
123
|
+
--color-surface-1: var(--surface-1);
|
|
124
|
+
--color-surface-2: var(--surface-2);
|
|
125
|
+
--color-surface-3: var(--surface-3);
|
|
126
|
+
--color-surface-4: var(--surface-4);
|
|
127
|
+
--color-surface-5: var(--surface-5);
|
|
128
|
+
--color-surface-line: var(--surface-line);
|
|
129
|
+
--color-surface-foreground: var(--surface-foreground);
|
|
130
|
+
--color-surface-hover: var(--surface-hover);
|
|
131
|
+
--color-surface-focus: var(--surface-focus);
|
|
132
|
+
--color-surface-active: var(--surface-active);
|
|
133
|
+
|
|
134
|
+
--color-muted: var(--muted);
|
|
135
|
+
--color-muted-foreground: var(--muted-foreground);
|
|
136
|
+
--color-muted-foreground-1: var(--muted-foreground-1);
|
|
137
|
+
--color-muted-foreground-2: var(--muted-foreground-2);
|
|
138
|
+
--color-muted-hover: var(--muted-hover);
|
|
139
|
+
--color-muted-focus: var(--muted-focus);
|
|
140
|
+
--color-muted-active: var(--muted-active);
|
|
141
|
+
|
|
142
|
+
--color-destructive: var(--destructive);
|
|
143
|
+
--color-destructive-foreground: var(--destructive-foreground);
|
|
144
|
+
--color-destructive-hover: var(--destructive-hover);
|
|
145
|
+
--color-destructive-focus: var(--destructive-focus);
|
|
146
|
+
|
|
147
|
+
--color-navbar: var(--navbar);
|
|
148
|
+
--color-navbar-line: var(--navbar-line);
|
|
149
|
+
--color-navbar-divider: var(--navbar-divider);
|
|
150
|
+
--color-navbar-nav-foreground: var(--navbar-nav-foreground);
|
|
151
|
+
--color-navbar-nav-hover: var(--navbar-nav-hover);
|
|
152
|
+
--color-navbar-nav-focus: var(--navbar-nav-focus);
|
|
153
|
+
--color-navbar-nav-active: var(--navbar-nav-active);
|
|
154
|
+
--color-navbar-nav-list-divider: var(--navbar-nav-list-divider);
|
|
155
|
+
--color-navbar-inverse: var(--navbar-inverse);
|
|
156
|
+
|
|
157
|
+
--color-navbar-1: var(--navbar-1);
|
|
158
|
+
--color-navbar-1-line: var(--navbar-1-line);
|
|
159
|
+
--color-navbar-1-divider: var(--navbar-1-divider);
|
|
160
|
+
--color-navbar-1-nav-foreground: var(--navbar-1-nav-foreground);
|
|
161
|
+
--color-navbar-1-nav-hover: var(--navbar-1-nav-hover);
|
|
162
|
+
--color-navbar-1-nav-focus: var(--navbar-1-nav-focus);
|
|
163
|
+
--color-navbar-1-nav-active: var(--navbar-1-nav-active);
|
|
164
|
+
--color-navbar-1-nav-list-divider: var(--navbar-1-nav-list-divider);
|
|
165
|
+
|
|
166
|
+
--color-navbar-2: var(--navbar-2);
|
|
167
|
+
--color-navbar-2-line: var(--navbar-2-line);
|
|
168
|
+
--color-navbar-2-divider: var(--navbar-2-divider);
|
|
169
|
+
--color-navbar-2-nav-foreground: var(--navbar-2-nav-foreground);
|
|
170
|
+
--color-navbar-2-nav-hover: var(--navbar-2-nav-hover);
|
|
171
|
+
--color-navbar-2-nav-focus: var(--navbar-2-nav-focus);
|
|
172
|
+
--color-navbar-2-nav-active: var(--navbar-2-nav-active);
|
|
173
|
+
--color-navbar-2-nav-list-divider: var(--navbar-2-nav-list-divider);
|
|
174
|
+
|
|
175
|
+
--color-sidebar: var(--sidebar);
|
|
176
|
+
--color-sidebar-line: var(--sidebar-line);
|
|
177
|
+
--color-sidebar-divider: var(--sidebar-divider);
|
|
178
|
+
--color-sidebar-nav-foreground: var(--sidebar-nav-foreground);
|
|
179
|
+
--color-sidebar-nav-hover: var(--sidebar-nav-hover);
|
|
180
|
+
--color-sidebar-nav-focus: var(--sidebar-nav-focus);
|
|
181
|
+
--color-sidebar-nav-active: var(--sidebar-nav-active);
|
|
182
|
+
--color-sidebar-nav-list-divider: var(--sidebar-nav-list-divider);
|
|
183
|
+
--color-sidebar-inverse: var(--sidebar-inverse);
|
|
184
|
+
|
|
185
|
+
--color-sidebar-1: var(--sidebar-1);
|
|
186
|
+
--color-sidebar-1-line: var(--sidebar-1-line);
|
|
187
|
+
--color-sidebar-1-divider: var(--sidebar-1-divider);
|
|
188
|
+
--color-sidebar-1-nav-foreground: var(--sidebar-1-nav-foreground);
|
|
189
|
+
--color-sidebar-1-nav-hover: var(--sidebar-1-nav-hover);
|
|
190
|
+
--color-sidebar-1-nav-focus: var(--sidebar-1-nav-focus);
|
|
191
|
+
--color-sidebar-1-nav-active: var(--sidebar-1-nav-active);
|
|
192
|
+
--color-sidebar-1-nav-list-divider: var(--sidebar-1-nav-list-divider);
|
|
193
|
+
|
|
194
|
+
--color-sidebar-2: var(--sidebar-2);
|
|
195
|
+
--color-sidebar-2-line: var(--sidebar-2-line);
|
|
196
|
+
--color-sidebar-2-divider: var(--sidebar-2-divider);
|
|
197
|
+
--color-sidebar-2-nav-foreground: var(--sidebar-2-nav-foreground);
|
|
198
|
+
--color-sidebar-2-nav-hover: var(--sidebar-2-nav-hover);
|
|
199
|
+
--color-sidebar-2-nav-focus: var(--sidebar-2-nav-focus);
|
|
200
|
+
--color-sidebar-2-nav-active: var(--sidebar-2-nav-active);
|
|
201
|
+
--color-sidebar-2-nav-list-divider: var(--sidebar-2-nav-list-divider);
|
|
202
|
+
|
|
203
|
+
--color-card: var(--card);
|
|
204
|
+
--color-card-line: var(--card-line);
|
|
205
|
+
--color-card-divider: var(--card-divider);
|
|
206
|
+
--color-card-header: var(--card-header);
|
|
207
|
+
--color-card-footer: var(--card-footer);
|
|
208
|
+
--color-card-inverse: var(--card-inverse);
|
|
209
|
+
|
|
210
|
+
--color-dropdown: var(--dropdown);
|
|
211
|
+
--color-dropdown-1: var(--dropdown-1);
|
|
212
|
+
--color-dropdown-line: var(--dropdown-line);
|
|
213
|
+
--color-dropdown-divider: var(--dropdown-divider);
|
|
214
|
+
--color-dropdown-header: var(--dropdown-header);
|
|
215
|
+
--color-dropdown-footer: var(--dropdown-footer);
|
|
216
|
+
--color-dropdown-item-foreground: var(--dropdown-item-foreground);
|
|
217
|
+
--color-dropdown-item-hover: var(--dropdown-item-hover);
|
|
218
|
+
--color-dropdown-item-focus: var(--dropdown-item-focus);
|
|
219
|
+
--color-dropdown-item-active: var(--dropdown-item-active);
|
|
220
|
+
--color-dropdown-inverse: var(--dropdown-inverse);
|
|
221
|
+
|
|
222
|
+
--color-select: var(--select);
|
|
223
|
+
--color-select-1: var(--select-1);
|
|
224
|
+
--color-select-line: var(--select-line);
|
|
225
|
+
--color-select-item-foreground: var(--select-item-foreground);
|
|
226
|
+
--color-select-item-hover: var(--select-item-hover);
|
|
227
|
+
--color-select-item-focus: var(--select-item-focus);
|
|
228
|
+
--color-select-item-active: var(--select-item-active);
|
|
229
|
+
--color-select-inverse: var(--select-inverse);
|
|
230
|
+
|
|
231
|
+
--color-overlay: var(--overlay);
|
|
232
|
+
--color-overlay-line: var(--overlay-line);
|
|
233
|
+
--color-overlay-divider: var(--overlay-divider);
|
|
234
|
+
--color-overlay-header: var(--overlay-header);
|
|
235
|
+
--color-overlay-footer: var(--overlay-footer);
|
|
236
|
+
--color-overlay-inverse: var(--overlay-inverse);
|
|
237
|
+
|
|
238
|
+
--color-popover: var(--popover);
|
|
239
|
+
--color-popover-line: var(--popover-line);
|
|
240
|
+
|
|
241
|
+
--color-tooltip: var(--tooltip);
|
|
242
|
+
--color-tooltip-line: var(--tooltip-line);
|
|
243
|
+
--color-tooltip-foreground: var(--tooltip-foreground);
|
|
244
|
+
|
|
245
|
+
--color-table-line: var(--table-line);
|
|
246
|
+
|
|
247
|
+
--color-switch: var(--switch);
|
|
248
|
+
|
|
249
|
+
--color-footer: var(--footer);
|
|
250
|
+
--color-footer-line: var(--footer-line);
|
|
251
|
+
--color-footer-inverse: var(--footer-inverse);
|
|
252
|
+
|
|
253
|
+
--color-scrollbar-track: var(--scrollbar-track);
|
|
254
|
+
--color-scrollbar-thumb: var(--scrollbar-thumb);
|
|
255
|
+
--color-scrollbar-track-inverse: var(--scrollbar-track-inverse);
|
|
256
|
+
--color-scrollbar-thumb-inverse: var(--scrollbar-thumb-inverse);
|
|
257
|
+
|
|
258
|
+
--color-chart-primary: var(--chart-primary);
|
|
259
|
+
--color-chart-1: var(--chart-1);
|
|
260
|
+
--color-chart-2: var(--chart-2);
|
|
261
|
+
--color-chart-3: var(--chart-3);
|
|
262
|
+
--color-chart-4: var(--chart-4);
|
|
263
|
+
--color-chart-5: var(--chart-5);
|
|
264
|
+
--color-chart-6: var(--chart-6);
|
|
265
|
+
--color-chart-7: var(--chart-7);
|
|
266
|
+
--color-chart-8: var(--chart-8);
|
|
267
|
+
--color-chart-9: var(--chart-9);
|
|
268
|
+
--color-chart-10: var(--chart-10);
|
|
269
|
+
}
|
|
270
|
+
|
|
271
|
+
:root {
|
|
272
|
+
--background: var(--color-white);
|
|
273
|
+
--background-1: var(--color-gray-50);
|
|
274
|
+
--background-2: var(--color-gray-100);
|
|
275
|
+
--background-plain: var(--color-white);
|
|
276
|
+
--foreground: var(--color-gray-800);
|
|
277
|
+
--foreground-inverse: var(--color-white);
|
|
278
|
+
|
|
279
|
+
--inverse: var(--color-gray-800);
|
|
280
|
+
|
|
281
|
+
--border: var(--color-gray-200);
|
|
282
|
+
--border-line-inverse: var(--color-white);
|
|
283
|
+
--border-line-1: var(--color-gray-100);
|
|
284
|
+
--border-line-2: var(--color-gray-200);
|
|
285
|
+
--border-line-3: var(--color-gray-300);
|
|
286
|
+
--border-line-4: var(--color-gray-400);
|
|
287
|
+
--border-line-5: var(--color-gray-500);
|
|
288
|
+
--border-line-6: var(--color-gray-600);
|
|
289
|
+
--border-line-7: var(--color-gray-700);
|
|
290
|
+
--border-line-8: var(--color-gray-800);
|
|
291
|
+
|
|
292
|
+
--primary-50: var(--color-blue-50);
|
|
293
|
+
--primary-100: var(--color-blue-100);
|
|
294
|
+
--primary-200: var(--color-blue-200);
|
|
295
|
+
--primary-300: var(--color-blue-300);
|
|
296
|
+
--primary-400: var(--color-blue-400);
|
|
297
|
+
--primary-500: var(--color-blue-500);
|
|
298
|
+
--primary-600: var(--color-blue-600);
|
|
299
|
+
--primary-700: var(--color-blue-700);
|
|
300
|
+
--primary-800: var(--color-blue-800);
|
|
301
|
+
--primary-900: var(--color-blue-900);
|
|
302
|
+
--primary-950: var(--color-blue-950);
|
|
303
|
+
|
|
304
|
+
--primary: var(--color-primary-600);
|
|
305
|
+
--primary-line: transparent;
|
|
306
|
+
--primary-foreground: var(--color-white);
|
|
307
|
+
--primary-hover: var(--color-primary-700);
|
|
308
|
+
--primary-focus: var(--color-primary-700);
|
|
309
|
+
--primary-active: var(--color-primary-700);
|
|
310
|
+
--primary-checked: var(--color-primary-600);
|
|
311
|
+
|
|
312
|
+
--secondary: var(--color-gray-900);
|
|
313
|
+
--secondary-line: transparent;
|
|
314
|
+
--secondary-foreground: var(--color-white);
|
|
315
|
+
--secondary-hover: var(--color-gray-800);
|
|
316
|
+
--secondary-focus: var(--color-gray-800);
|
|
317
|
+
--secondary-active: var(--color-gray-800);
|
|
318
|
+
|
|
319
|
+
--layer: var(--color-white);
|
|
320
|
+
--layer-line: var(--color-gray-200);
|
|
321
|
+
--layer-foreground: var(--color-gray-800);
|
|
322
|
+
--layer-hover: var(--color-gray-50);
|
|
323
|
+
--layer-focus: var(--color-gray-50);
|
|
324
|
+
--layer-active: var(--color-gray-50);
|
|
325
|
+
|
|
326
|
+
--surface: var(--color-gray-100);
|
|
327
|
+
--surface-1: var(--color-gray-200);
|
|
328
|
+
--surface-2: var(--color-gray-300);
|
|
329
|
+
--surface-3: var(--color-gray-400);
|
|
330
|
+
--surface-4: var(--color-gray-500);
|
|
331
|
+
--surface-5: var(--color-gray-600);
|
|
332
|
+
--surface-line: transparent;
|
|
333
|
+
--surface-foreground: var(--color-gray-800);
|
|
334
|
+
--surface-hover: var(--color-gray-200);
|
|
335
|
+
--surface-focus: var(--color-gray-200);
|
|
336
|
+
--surface-active: var(--color-gray-200);
|
|
337
|
+
|
|
338
|
+
--muted: var(--color-gray-50);
|
|
339
|
+
--muted-foreground: var(--color-gray-400);
|
|
340
|
+
--muted-foreground-1: var(--color-gray-500);
|
|
341
|
+
--muted-foreground-2: var(--color-gray-600);
|
|
342
|
+
--muted-hover: var(--color-gray-100);
|
|
343
|
+
--muted-focus: var(--color-gray-100);
|
|
344
|
+
--muted-active: var(--color-gray-100);
|
|
345
|
+
|
|
346
|
+
--destructive: var(--color-red-500);
|
|
347
|
+
--destructive-foreground: var(--color-white);
|
|
348
|
+
--destructive-hover: var(--color-red-600);
|
|
349
|
+
--destructive-focus: var(--color-red-600);
|
|
350
|
+
|
|
351
|
+
--navbar: var(--color-white);
|
|
352
|
+
--navbar-line: var(--color-gray-200);
|
|
353
|
+
--navbar-divider: var(--color-gray-200);
|
|
354
|
+
--navbar-nav-foreground: var(--color-gray-800);
|
|
355
|
+
--navbar-nav-hover: var(--color-gray-100);
|
|
356
|
+
--navbar-nav-focus: var(--color-gray-100);
|
|
357
|
+
--navbar-nav-active: var(--color-gray-100);
|
|
358
|
+
--navbar-nav-list-divider: var(--color-gray-200);
|
|
359
|
+
--navbar-inverse: var(--color-primary-950);
|
|
360
|
+
|
|
361
|
+
--navbar-1: var(--color-gray-50);
|
|
362
|
+
--navbar-1-line: var(--color-gray-200);
|
|
363
|
+
--navbar-1-divider: var(--color-gray-200);
|
|
364
|
+
--navbar-1-nav-foreground: var(--color-gray-800);
|
|
365
|
+
--navbar-1-nav-hover: var(--color-gray-200);
|
|
366
|
+
--navbar-1-nav-focus: var(--color-gray-200);
|
|
367
|
+
--navbar-1-nav-active: var(--color-gray-200);
|
|
368
|
+
--navbar-1-nav-list-divider: var(--color-gray-200);
|
|
369
|
+
|
|
370
|
+
--navbar-2: var(--color-gray-100);
|
|
371
|
+
--navbar-2-line: transparent;
|
|
372
|
+
--navbar-2-divider: var(--color-gray-300);
|
|
373
|
+
--navbar-2-nav-foreground: var(--color-gray-800);
|
|
374
|
+
--navbar-2-nav-hover: var(--color-gray-200);
|
|
375
|
+
--navbar-2-nav-focus: var(--color-gray-200);
|
|
376
|
+
--navbar-2-nav-active: var(--color-gray-200);
|
|
377
|
+
--navbar-2-nav-list-divider: var(--color-gray-200);
|
|
378
|
+
|
|
379
|
+
--sidebar: var(--color-white);
|
|
380
|
+
--sidebar-line: var(--color-gray-200);
|
|
381
|
+
--sidebar-divider: var(--color-gray-200);
|
|
382
|
+
--sidebar-nav-foreground: var(--color-gray-800);
|
|
383
|
+
--sidebar-nav-hover: var(--color-gray-100);
|
|
384
|
+
--sidebar-nav-focus: var(--color-gray-100);
|
|
385
|
+
--sidebar-nav-active: var(--color-gray-100);
|
|
386
|
+
--sidebar-nav-list-divider: var(--color-gray-200);
|
|
387
|
+
--sidebar-inverse: var(--color-primary-950);
|
|
388
|
+
|
|
389
|
+
--sidebar-1: var(--color-gray-50);
|
|
390
|
+
--sidebar-1-line: var(--color-gray-200);
|
|
391
|
+
--sidebar-1-divider: var(--color-gray-200);
|
|
392
|
+
--sidebar-1-nav-foreground: var(--color-gray-800);
|
|
393
|
+
--sidebar-1-nav-hover: var(--color-gray-200);
|
|
394
|
+
--sidebar-1-nav-focus: var(--color-gray-200);
|
|
395
|
+
--sidebar-1-nav-active: var(--color-gray-200);
|
|
396
|
+
--sidebar-1-nav-list-divider: var(--color-gray-200);
|
|
397
|
+
|
|
398
|
+
--sidebar-2: var(--color-gray-100);
|
|
399
|
+
--sidebar-2-line: transparent;
|
|
400
|
+
--sidebar-2-divider: var(--color-gray-200);
|
|
401
|
+
--sidebar-2-nav-foreground: var(--color-gray-800);
|
|
402
|
+
--sidebar-2-nav-hover: var(--color-gray-200);
|
|
403
|
+
--sidebar-2-nav-focus: var(--color-gray-200);
|
|
404
|
+
--sidebar-2-nav-active: var(--color-gray-200);
|
|
405
|
+
--sidebar-2-nav-list-divider: var(--color-gray-200);
|
|
406
|
+
|
|
407
|
+
--card: var(--color-white);
|
|
408
|
+
--card-line: var(--color-gray-200);
|
|
409
|
+
--card-divider: var(--color-gray-200);
|
|
410
|
+
--card-header: var(--color-gray-200);
|
|
411
|
+
--card-footer: var(--color-gray-200);
|
|
412
|
+
--card-inverse: var(--color-gray-900);
|
|
413
|
+
|
|
414
|
+
--dropdown: var(--color-white);
|
|
415
|
+
--dropdown-1: var(--color-white);
|
|
416
|
+
--dropdown-line: transparent;
|
|
417
|
+
--dropdown-divider: var(--color-gray-200);
|
|
418
|
+
--dropdown-header: var(--color-gray-200);
|
|
419
|
+
--dropdown-footer: var(--color-gray-200);
|
|
420
|
+
--dropdown-item-foreground: var(--color-gray-800);
|
|
421
|
+
--dropdown-item-hover: var(--color-gray-100);
|
|
422
|
+
--dropdown-item-focus: var(--color-gray-100);
|
|
423
|
+
--dropdown-item-active: var(--color-gray-100);
|
|
424
|
+
--dropdown-inverse: var(--color-gray-900);
|
|
425
|
+
|
|
426
|
+
--select: var(--color-white);
|
|
427
|
+
--select-1: var(--color-white);
|
|
428
|
+
--select-line: transparent;
|
|
429
|
+
--select-item-foreground: var(--color-gray-800);
|
|
430
|
+
--select-item-hover: var(--color-gray-100);
|
|
431
|
+
--select-item-focus: var(--color-gray-100);
|
|
432
|
+
--select-item-active: var(--color-gray-100);
|
|
433
|
+
--select-inverse: var(--color-gray-900);
|
|
434
|
+
|
|
435
|
+
--overlay: var(--color-white);
|
|
436
|
+
--overlay-line: transparent;
|
|
437
|
+
--overlay-divider: var(--color-gray-200);
|
|
438
|
+
--overlay-header: var(--color-gray-200);
|
|
439
|
+
--overlay-footer: var(--color-gray-200);
|
|
440
|
+
--overlay-inverse: var(--color-gray-900);
|
|
441
|
+
|
|
442
|
+
--popover: var(--color-white);
|
|
443
|
+
--popover-line: var(--color-gray-100);
|
|
444
|
+
|
|
445
|
+
--tooltip: var(--color-gray-900);
|
|
446
|
+
--tooltip-line: transparent;
|
|
447
|
+
--tooltip-foreground: var(--color-white);
|
|
448
|
+
|
|
449
|
+
--table-line: var(--color-gray-200);
|
|
450
|
+
|
|
451
|
+
--switch: var(--color-white);
|
|
452
|
+
|
|
453
|
+
--footer: var(--color-white);
|
|
454
|
+
--footer-line: var(--color-gray-200);
|
|
455
|
+
--footer-inverse: var(--color-gray-900);
|
|
456
|
+
|
|
457
|
+
--scrollbar-track: var(--color-gray-100);
|
|
458
|
+
--scrollbar-thumb: var(--color-gray-300);
|
|
459
|
+
--scrollbar-track-inverse: transparent;
|
|
460
|
+
--scrollbar-thumb-inverse: var(--color-white);
|
|
461
|
+
|
|
462
|
+
--chart-colors-background: var(--color-white);
|
|
463
|
+
--chart-colors-background-inverse: var(--color-neutral-800);
|
|
464
|
+
--chart-colors-foreground: var(--color-gray-800);
|
|
465
|
+
--chart-colors-foreground-inverse: var(--color-white);
|
|
466
|
+
--chart-primary: var(--color-primary-600);
|
|
467
|
+
--chart-colors-primary: var(--color-primary-600);
|
|
468
|
+
--chart-colors-primary-inverse: var(--color-primary-500);
|
|
469
|
+
--chart-colors-primary-hex: var(--color-primary-600);
|
|
470
|
+
--chart-colors-primary-hex-inverse: var(--color-primary-500);
|
|
471
|
+
--chart-colors-chart-inverse: var(--color-white);
|
|
472
|
+
--chart-1: var(--color-primary-50);
|
|
473
|
+
--chart-colors-chart-1: var(--color-primary-50);
|
|
474
|
+
--chart-colors-chart-1-inverse: var(--color-primary-50);
|
|
475
|
+
--chart-colors-chart-1-hex: var(--color-primary-50);
|
|
476
|
+
--chart-colors-chart-1-hex-inverse: var(--color-primary-50);
|
|
477
|
+
--chart-2: var(--color-primary-200);
|
|
478
|
+
--chart-colors-chart-2: var(--color-primary-200);
|
|
479
|
+
--chart-colors-chart-2-inverse: var(--color-primary-200);
|
|
480
|
+
--chart-colors-chart-2-hex: var(--color-primary-200);
|
|
481
|
+
--chart-colors-chart-2-hex-inverse: var(--color-primary-200);
|
|
482
|
+
--chart-3: var(--color-primary-400);
|
|
483
|
+
--chart-colors-chart-3: var(--color-primary-400);
|
|
484
|
+
--chart-colors-chart-3-inverse: var(--color-primary-400);
|
|
485
|
+
--chart-colors-chart-3-hex: var(--color-primary-400);
|
|
486
|
+
--chart-colors-chart-3-hex-inverse: var(--color-primary-400);
|
|
487
|
+
--chart-4: var(--color-primary-800);
|
|
488
|
+
--chart-colors-chart-4: var(--color-primary-800);
|
|
489
|
+
--chart-colors-chart-4-inverse: var(--color-primary-800);
|
|
490
|
+
--chart-colors-chart-4-hex: var(--color-primary-800);
|
|
491
|
+
--chart-colors-chart-4-hex-inverse: var(--color-primary-800);
|
|
492
|
+
--chart-5: var(--color-purple-600);
|
|
493
|
+
--chart-colors-chart-5: var(--color-purple-600);
|
|
494
|
+
--chart-colors-chart-5-inverse: var(--color-purple-500);
|
|
495
|
+
--chart-colors-chart-5-hex: var(--color-purple-600);
|
|
496
|
+
--chart-colors-chart-5-hex-inverse: var(--color-purple-500);
|
|
497
|
+
--chart-6: var(--color-cyan-400);
|
|
498
|
+
--chart-colors-chart-6: var(--color-cyan-400);
|
|
499
|
+
--chart-colors-chart-6-inverse: var(--color-cyan-400);
|
|
500
|
+
--chart-colors-chart-6-hex: var(--color-cyan-400);
|
|
501
|
+
--chart-colors-chart-6-hex-inverse: var(--color-cyan-400);
|
|
502
|
+
--chart-7: var(--color-orange-500);
|
|
503
|
+
--chart-colors-chart-7: var(--color-orange-500);
|
|
504
|
+
--chart-colors-chart-7-inverse: var(--color-orange-500);
|
|
505
|
+
--chart-colors-chart-7-hex: var(--color-orange-500);
|
|
506
|
+
--chart-colors-chart-7-hex-inverse: var(--color-orange-500);
|
|
507
|
+
--chart-8: var(--color-gray-100);
|
|
508
|
+
--chart-colors-chart-8: var(--color-gray-100);
|
|
509
|
+
--chart-colors-chart-8-inverse: var(--color-neutral-700);
|
|
510
|
+
--chart-colors-chart-8-hex: var(--color-gray-100);
|
|
511
|
+
--chart-colors-chart-8-hex-inverse: var(--color-neutral-700);
|
|
512
|
+
--chart-9: var(--color-gray-200);
|
|
513
|
+
--chart-colors-chart-9: var(--color-gray-200);
|
|
514
|
+
--chart-colors-chart-9-inverse: var(--color-neutral-500);
|
|
515
|
+
--chart-colors-chart-9-hex: var(--color-gray-200);
|
|
516
|
+
--chart-colors-chart-9-hex-inverse: var(--color-neutral-500);
|
|
517
|
+
--chart-10: var(--color-gray-300);
|
|
518
|
+
--chart-colors-chart-10: var(--color-gray-300);
|
|
519
|
+
--chart-colors-chart-10-inverse: var(--color-neutral-700);
|
|
520
|
+
--chart-colors-chart-10-hex: var(--color-gray-300);
|
|
521
|
+
--chart-colors-chart-10-hex-inverse: var(--color-neutral-700);
|
|
522
|
+
--chart-colors-candlestick-upward: var(--color-primary-600);
|
|
523
|
+
--chart-colors-candlestick-upward-inverse: var(--color-primary-500);
|
|
524
|
+
--chart-colors-candlestick-downward: var(--color-primary-600);
|
|
525
|
+
--chart-colors-candlestick-downward-inverse: var(--color-primary-500);
|
|
526
|
+
--chart-colors-labels: var(--color-gray-400);
|
|
527
|
+
--chart-colors-labels-inverse: var(--color-neutral-400);
|
|
528
|
+
--chart-colors-xaxis-labels: var(--color-gray-400);
|
|
529
|
+
--chart-colors-xaxis-labels-inverse: var(--color-neutral-400);
|
|
530
|
+
--chart-colors-yaxis-labels: var(--color-gray-400);
|
|
531
|
+
--chart-colors-yaxis-labels-inverse: var(--color-neutral-400);
|
|
532
|
+
--chart-colors-grid-border: var(--color-gray-200);
|
|
533
|
+
--chart-colors-grid-border-inverse: var(--color-neutral-700);
|
|
534
|
+
--chart-colors-bar-ranges: var(--color-gray-200);
|
|
535
|
+
--chart-colors-bar-ranges-inverse: var(--color-white);
|
|
536
|
+
|
|
537
|
+
--map-colors-primary: var(--color-primary-600);
|
|
538
|
+
--map-colors-primary-inverse: var(--color-primary-500);
|
|
539
|
+
--map-colors-default: var(--color-gray-300);
|
|
540
|
+
--map-colors-default-inverse: var(--color-neutral-600);
|
|
541
|
+
--map-colors-highlight: var(--color-primary-300);
|
|
542
|
+
--map-colors-highlight-inverse: var(--color-primary-300);
|
|
543
|
+
--map-colors-border: var(--color-gray-100);
|
|
544
|
+
--map-colors-border-inverse: var(--color-neutral-800);
|
|
545
|
+
}
|
|
546
|
+
|
|
547
|
+
.dark {
|
|
548
|
+
--background: var(--color-neutral-800);
|
|
549
|
+
--background-1: var(--color-neutral-900);
|
|
550
|
+
--background-2: var(--color-neutral-900);
|
|
551
|
+
--foreground: var(--color-neutral-200);
|
|
552
|
+
|
|
553
|
+
--inverse: var(--color-neutral-950);
|
|
554
|
+
|
|
555
|
+
--border: var(--color-neutral-700);
|
|
556
|
+
--border-line-1: var(--color-neutral-800);
|
|
557
|
+
--border-line-2: var(--color-neutral-700);
|
|
558
|
+
--border-line-3: var(--color-neutral-600);
|
|
559
|
+
--border-line-4: var(--color-neutral-500);
|
|
560
|
+
--border-line-5: var(--color-neutral-400);
|
|
561
|
+
--border-line-6: var(--color-neutral-300);
|
|
562
|
+
--border-line-7: var(--color-neutral-200);
|
|
563
|
+
--border-line-8: var(--color-neutral-100);
|
|
564
|
+
|
|
565
|
+
--primary: var(--color-primary-500);
|
|
566
|
+
--primary-line: transparent;
|
|
567
|
+
--primary-foreground: var(--color-white);
|
|
568
|
+
--primary-hover: var(--color-primary-600);
|
|
569
|
+
--primary-focus: var(--color-primary-600);
|
|
570
|
+
--primary-active: var(--color-primary-600);
|
|
571
|
+
--primary-checked: var(--color-primary-500);
|
|
572
|
+
|
|
573
|
+
--secondary: var(--color-white);
|
|
574
|
+
--secondary-line: transparent;
|
|
575
|
+
--secondary-foreground: var(--color-neutral-800);
|
|
576
|
+
--secondary-hover: var(--color-neutral-100);
|
|
577
|
+
--secondary-focus: var(--color-neutral-100);
|
|
578
|
+
--secondary-active: var(--color-neutral-100);
|
|
579
|
+
|
|
580
|
+
--layer: var(--color-neutral-800);
|
|
581
|
+
--layer-line: var(--color-neutral-700);
|
|
582
|
+
--layer-foreground: var(--color-white);
|
|
583
|
+
--layer-hover: var(--color-neutral-700);
|
|
584
|
+
--layer-focus: var(--color-neutral-700);
|
|
585
|
+
--layer-active: var(--color-neutral-700);
|
|
586
|
+
|
|
587
|
+
--surface: var(--color-neutral-700);
|
|
588
|
+
--surface-1: var(--color-neutral-600);
|
|
589
|
+
--surface-2: var(--color-neutral-500);
|
|
590
|
+
--surface-3: var(--color-neutral-600);
|
|
591
|
+
--surface-4: var(--color-neutral-500);
|
|
592
|
+
--surface-5: var(--color-neutral-400);
|
|
593
|
+
--surface-line: transparent;
|
|
594
|
+
--surface-foreground: var(--color-neutral-200);
|
|
595
|
+
--surface-hover: var(--color-neutral-600);
|
|
596
|
+
--surface-focus: var(--color-neutral-600);
|
|
597
|
+
--surface-active: var(--color-neutral-600);
|
|
598
|
+
|
|
599
|
+
--muted: var(--color-neutral-800);
|
|
600
|
+
--muted-foreground: var(--color-neutral-500);
|
|
601
|
+
--muted-foreground-1: var(--color-neutral-400);
|
|
602
|
+
--muted-foreground-2: var(--color-neutral-300);
|
|
603
|
+
--muted-hover: var(--color-neutral-700);
|
|
604
|
+
--muted-focus: var(--color-neutral-700);
|
|
605
|
+
--muted-active: var(--color-neutral-700);
|
|
606
|
+
|
|
607
|
+
--destructive: var(--color-red-500);
|
|
608
|
+
--destructive-foreground: var(--color-white);
|
|
609
|
+
--destructive-hover: var(--color-red-600);
|
|
610
|
+
--destructive-focus: var(--color-red-600);
|
|
611
|
+
|
|
612
|
+
--navbar: var(--color-neutral-800);
|
|
613
|
+
--navbar-line: var(--color-neutral-700);
|
|
614
|
+
--navbar-divider: var(--color-neutral-700);
|
|
615
|
+
--navbar-nav-foreground: var(--color-neutral-200);
|
|
616
|
+
--navbar-nav-hover: var(--color-neutral-700);
|
|
617
|
+
--navbar-nav-focus: var(--color-neutral-700);
|
|
618
|
+
--navbar-nav-active: var(--color-neutral-700);
|
|
619
|
+
--navbar-nav-list-divider: var(--color-neutral-700);
|
|
620
|
+
--navbar-inverse: var(--color-neutral-950);
|
|
621
|
+
|
|
622
|
+
--navbar-1: var(--color-neutral-900);
|
|
623
|
+
--navbar-1-line: var(--color-neutral-700);
|
|
624
|
+
--navbar-1-divider: var(--color-neutral-700);
|
|
625
|
+
--navbar-1-nav-foreground: var(--color-neutral-200);
|
|
626
|
+
--navbar-1-nav-hover: var(--color-neutral-700);
|
|
627
|
+
--navbar-1-nav-focus: var(--color-neutral-700);
|
|
628
|
+
--navbar-1-nav-active: var(--color-neutral-700);
|
|
629
|
+
--navbar-1-nav-list-divider: var(--color-neutral-700);
|
|
630
|
+
|
|
631
|
+
--navbar-2: var(--color-neutral-900);
|
|
632
|
+
--navbar-2-line: transparent;
|
|
633
|
+
--navbar-2-divider: var(--color-neutral-700);
|
|
634
|
+
--navbar-2-nav-foreground: var(--color-neutral-200);
|
|
635
|
+
--navbar-2-nav-hover: var(--color-neutral-800);
|
|
636
|
+
--navbar-2-nav-focus: var(--color-neutral-800);
|
|
637
|
+
--navbar-2-nav-active: var(--color-neutral-800);
|
|
638
|
+
--navbar-2-nav-list-divider: var(--color-neutral-800);
|
|
639
|
+
|
|
640
|
+
--sidebar: var(--color-neutral-800);
|
|
641
|
+
--sidebar-line: var(--color-neutral-700);
|
|
642
|
+
--sidebar-divider: var(--color-neutral-700);
|
|
643
|
+
--sidebar-nav-foreground: var(--color-neutral-200);
|
|
644
|
+
--sidebar-nav-hover: var(--color-neutral-700);
|
|
645
|
+
--sidebar-nav-focus: var(--color-neutral-700);
|
|
646
|
+
--sidebar-nav-active: var(--color-neutral-700);
|
|
647
|
+
--sidebar-nav-list-divider: var(--color-neutral-700);
|
|
648
|
+
--sidebar-inverse: var(--color-neutral-950);
|
|
649
|
+
|
|
650
|
+
--sidebar-1: var(--color-neutral-900);
|
|
651
|
+
--sidebar-1-line: var(--color-neutral-700);
|
|
652
|
+
--sidebar-1-divider: var(--color-neutral-700);
|
|
653
|
+
--sidebar-1-nav-foreground: var(--color-neutral-200);
|
|
654
|
+
--sidebar-1-nav-hover: var(--color-neutral-700);
|
|
655
|
+
--sidebar-1-nav-focus: var(--color-neutral-700);
|
|
656
|
+
--sidebar-1-nav-active: var(--color-neutral-700);
|
|
657
|
+
--sidebar-1-nav-list-divider: var(--color-neutral-700);
|
|
658
|
+
|
|
659
|
+
--sidebar-2: var(--color-neutral-900);
|
|
660
|
+
--sidebar-2-line: transparent;
|
|
661
|
+
--sidebar-2-divider: var(--color-neutral-800);
|
|
662
|
+
--sidebar-2-nav-foreground: var(--color-neutral-200);
|
|
663
|
+
--sidebar-2-nav-hover: var(--color-neutral-800);
|
|
664
|
+
--sidebar-2-nav-focus: var(--color-neutral-800);
|
|
665
|
+
--sidebar-2-nav-active: var(--color-neutral-800);
|
|
666
|
+
--sidebar-2-nav-list-divider: var(--color-neutral-800);
|
|
667
|
+
|
|
668
|
+
--card: var(--color-neutral-800);
|
|
669
|
+
--card-line: var(--color-neutral-700);
|
|
670
|
+
--card-divider: var(--color-neutral-700);
|
|
671
|
+
--card-header: var(--color-neutral-700);
|
|
672
|
+
--card-footer: var(--color-neutral-700);
|
|
673
|
+
--card-inverse: var(--color-neutral-900);
|
|
674
|
+
|
|
675
|
+
--dropdown: var(--color-neutral-900);
|
|
676
|
+
--dropdown-1: var(--color-neutral-950);
|
|
677
|
+
--dropdown-line: transparent;
|
|
678
|
+
--dropdown-divider: var(--color-neutral-800);
|
|
679
|
+
--dropdown-header: var(--color-neutral-700);
|
|
680
|
+
--dropdown-footer: var(--color-neutral-700);
|
|
681
|
+
--dropdown-item-foreground: var(--color-neutral-200);
|
|
682
|
+
--dropdown-item-hover: var(--color-neutral-800);
|
|
683
|
+
--dropdown-item-focus: var(--color-neutral-800);
|
|
684
|
+
--dropdown-item-active: var(--color-neutral-800);
|
|
685
|
+
--dropdown-inverse: var(--color-neutral-900);
|
|
686
|
+
|
|
687
|
+
--select: var(--color-neutral-900);
|
|
688
|
+
--select-1: var(--color-neutral-950);
|
|
689
|
+
--select-line: transparent;
|
|
690
|
+
--select-item-foreground: var(--color-neutral-200);
|
|
691
|
+
--select-item-hover: var(--color-neutral-800);
|
|
692
|
+
--select-item-focus: var(--color-neutral-800);
|
|
693
|
+
--select-item-active: var(--color-neutral-800);
|
|
694
|
+
--select-inverse: var(--color-neutral-900);
|
|
695
|
+
|
|
696
|
+
--overlay: var(--color-neutral-800);
|
|
697
|
+
--overlay-line: transparent;
|
|
698
|
+
--overlay-divider: var(--color-neutral-700);
|
|
699
|
+
--overlay-header: var(--color-neutral-700);
|
|
700
|
+
--overlay-footer: var(--color-neutral-700);
|
|
701
|
+
--overlay-inverse: var(--color-neutral-900);
|
|
702
|
+
|
|
703
|
+
--popover: var(--color-neutral-900);
|
|
704
|
+
--popover-line: var(--color-neutral-700);
|
|
705
|
+
|
|
706
|
+
--tooltip: var(--color-white);
|
|
707
|
+
--tooltip-line: transparent;
|
|
708
|
+
--tooltip-foreground: var(--color-neutral-800);
|
|
709
|
+
|
|
710
|
+
--table-line: var(--color-neutral-700);
|
|
711
|
+
|
|
712
|
+
--footer: var(--color-neutral-800);
|
|
713
|
+
--footer-line: var(--color-neutral-700);
|
|
714
|
+
--footer-inverse: var(--color-neutral-900);
|
|
715
|
+
|
|
716
|
+
--scrollbar-track: var(--color-neutral-700);
|
|
717
|
+
--scrollbar-thumb: var(--color-neutral-500);
|
|
718
|
+
--scrollbar-track-inverse: var(--color-neutral-500);
|
|
719
|
+
--scrollbar-thumb-inverse: var(--color-neutral-700);
|
|
720
|
+
|
|
721
|
+
--chart-primary: var(--color-primary-500);
|
|
722
|
+
--chart-8: var(--color-neutral-700);
|
|
723
|
+
--chart-9: var(--color-neutral-500);
|
|
724
|
+
--chart-10: var(--color-neutral-700);
|
|
725
|
+
}
|