dhanasekar-ui 1.1.1 → 1.1.3
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/dist/chunk-2K6E3M6X.mjs +193 -0
- package/dist/chunk-2K6E3M6X.mjs.map +1 -0
- package/dist/chunk-33P6OQSB.mjs +129 -0
- package/dist/chunk-33P6OQSB.mjs.map +1 -0
- package/dist/chunk-4HRAPJIS.mjs +102 -0
- package/dist/chunk-4HRAPJIS.mjs.map +1 -0
- package/dist/chunk-4VCCLGED.mjs +85 -0
- package/dist/chunk-4VCCLGED.mjs.map +1 -0
- package/dist/chunk-5BAYROPS.js +129 -0
- package/dist/chunk-5BAYROPS.js.map +1 -0
- package/dist/chunk-6C7E4Q7J.js +136 -0
- package/dist/chunk-6C7E4Q7J.js.map +1 -0
- package/dist/chunk-AKPICVLO.mjs +198 -0
- package/dist/chunk-AKPICVLO.mjs.map +1 -0
- package/dist/chunk-BYYOIYEH.mjs +136 -0
- package/dist/chunk-BYYOIYEH.mjs.map +1 -0
- package/dist/chunk-CDALMRVJ.js +193 -0
- package/dist/chunk-CDALMRVJ.js.map +1 -0
- package/dist/chunk-CN4G4LGR.js +40 -0
- package/dist/chunk-CN4G4LGR.js.map +1 -0
- package/dist/chunk-GT5QTRLR.js +102 -0
- package/dist/chunk-GT5QTRLR.js.map +1 -0
- package/dist/chunk-L3Y3AD6X.js +85 -0
- package/dist/chunk-L3Y3AD6X.js.map +1 -0
- package/dist/chunk-LUU3CQHI.js +198 -0
- package/dist/chunk-LUU3CQHI.js.map +1 -0
- package/dist/chunk-N6F5P3SO.mjs +40 -0
- package/dist/chunk-N6F5P3SO.mjs.map +1 -0
- package/dist/chunk-V3WVMXXX.js +206 -0
- package/dist/chunk-V3WVMXXX.js.map +1 -0
- package/dist/chunk-VFGXUH56.mjs +206 -0
- package/dist/chunk-VFGXUH56.mjs.map +1 -0
- package/dist/components/Button/index.js +1 -1
- package/dist/components/Button/index.mjs +1 -1
- package/dist/components/FileUploadField/index.d.mts +0 -1
- package/dist/components/FileUploadField/index.d.ts +0 -1
- package/dist/components/FileUploadField/index.js +1 -1
- package/dist/components/FileUploadField/index.mjs +1 -1
- package/dist/components/IdleTimer/index.d.mts +0 -1
- package/dist/components/IdleTimer/index.d.ts +0 -1
- package/dist/components/IdleTimer/index.js +1 -1
- package/dist/components/IdleTimer/index.mjs +1 -1
- package/dist/components/Input/index.js +1 -1
- package/dist/components/Input/index.mjs +1 -1
- package/dist/components/Loader/index.d.mts +0 -1
- package/dist/components/Loader/index.d.ts +0 -1
- package/dist/components/Loader/index.js +1 -1
- package/dist/components/Loader/index.mjs +1 -1
- package/dist/components/Select/index.js +1 -1
- package/dist/components/Select/index.mjs +1 -1
- package/dist/components/Switch/index.js +1 -1
- package/dist/components/Switch/index.mjs +1 -1
- package/dist/components/Text/index.js +1 -1
- package/dist/components/Text/index.mjs +1 -1
- package/dist/index.js +1 -1
- package/dist/index.mjs +1 -1
- package/package.json +5 -3
- package/dist/chunk-6KTHQKF2.js +0 -2
- package/dist/chunk-6KTHQKF2.js.map +0 -1
- package/dist/chunk-7CEQNZIX.mjs +0 -2
- package/dist/chunk-7CEQNZIX.mjs.map +0 -1
- package/dist/chunk-AVQSNP56.js +0 -2
- package/dist/chunk-AVQSNP56.js.map +0 -1
- package/dist/chunk-DYGRXBKP.js +0 -2
- package/dist/chunk-DYGRXBKP.js.map +0 -1
- package/dist/chunk-KZ3RDRIM.js +0 -2
- package/dist/chunk-KZ3RDRIM.js.map +0 -1
- package/dist/chunk-MZLSOEXC.mjs +0 -2
- package/dist/chunk-MZLSOEXC.mjs.map +0 -1
- package/dist/chunk-OXYWK4HK.js +0 -3
- package/dist/chunk-OXYWK4HK.js.map +0 -1
- package/dist/chunk-RXNNJUS6.mjs +0 -3
- package/dist/chunk-RXNNJUS6.mjs.map +0 -1
- package/dist/chunk-S74D6N7O.mjs +0 -2
- package/dist/chunk-S74D6N7O.mjs.map +0 -1
- package/dist/chunk-VPR3PX57.js +0 -2
- package/dist/chunk-VPR3PX57.js.map +0 -1
- package/dist/chunk-VXKXXAX6.mjs +0 -2
- package/dist/chunk-VXKXXAX6.mjs.map +0 -1
- package/dist/chunk-W4PFQVHM.mjs +0 -2
- package/dist/chunk-W4PFQVHM.mjs.map +0 -1
- package/dist/chunk-WEQINEMX.mjs +0 -2
- package/dist/chunk-WEQINEMX.mjs.map +0 -1
- package/dist/chunk-WVZF6FQ7.js +0 -3
- package/dist/chunk-WVZF6FQ7.js.map +0 -1
- package/dist/chunk-YKQKLQNI.js +0 -2
- package/dist/chunk-YKQKLQNI.js.map +0 -1
- package/dist/chunk-ZO6I27MY.mjs +0 -3
- package/dist/chunk-ZO6I27MY.mjs.map +0 -1
- package/dist/components/Button/index.css +0 -2
- package/dist/components/Button/index.css.map +0 -1
- package/dist/components/FileUploadField/index.css +0 -2
- package/dist/components/FileUploadField/index.css.map +0 -1
- package/dist/components/IdleTimer/index.css +0 -2
- package/dist/components/IdleTimer/index.css.map +0 -1
- package/dist/components/Input/index.css +0 -2
- package/dist/components/Input/index.css.map +0 -1
- package/dist/components/Loader/index.css +0 -2
- package/dist/components/Loader/index.css.map +0 -1
- package/dist/components/Select/index.css +0 -2
- package/dist/components/Select/index.css.map +0 -1
- package/dist/components/Switch/index.css +0 -2
- package/dist/components/Switch/index.css.map +0 -1
- package/dist/components/Text/index.css +0 -2
- package/dist/components/Text/index.css.map +0 -1
- package/dist/index.css +0 -2
- package/dist/index.css.map +0 -1
|
@@ -0,0 +1,193 @@
|
|
|
1
|
+
import {a}from'./chunk-547MQ4FI.mjs';import d,{forwardRef,useId,useState,useRef,useEffect}from'react';import {ChevronDown}from'lucide-react';import {jsxs,jsx,Fragment}from'react/jsx-runtime';var B=`
|
|
2
|
+
.ui-select-root {
|
|
3
|
+
display: inline-flex;
|
|
4
|
+
flex-direction: column;
|
|
5
|
+
position: relative;
|
|
6
|
+
min-width: 200px;
|
|
7
|
+
vertical-align: top;
|
|
8
|
+
font-family: 'Inter', system-ui, sans-serif;
|
|
9
|
+
margin: 0;
|
|
10
|
+
--ui-primary: #3b82f6;
|
|
11
|
+
--ui-secondary: #64748b;
|
|
12
|
+
--ui-error: #ef4444;
|
|
13
|
+
--ui-success: #22c55e;
|
|
14
|
+
--ui-warning: #f59e0b;
|
|
15
|
+
--ui-info: #0ea5e9;
|
|
16
|
+
--ui-text-primary: #1e293b;
|
|
17
|
+
--ui-text-secondary: #64748b;
|
|
18
|
+
--ui-bg: #ffffff;
|
|
19
|
+
--ui-border: #e2e8f0;
|
|
20
|
+
--ui-radius: 8px;
|
|
21
|
+
--ui-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.ui-select-fullWidth {
|
|
25
|
+
width: 100%;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.ui-select-label {
|
|
29
|
+
display: block;
|
|
30
|
+
margin-bottom: 6px;
|
|
31
|
+
font-size: 0.875rem;
|
|
32
|
+
font-weight: 500;
|
|
33
|
+
color: var(--ui-text-secondary);
|
|
34
|
+
transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.ui-select-label-focused {
|
|
38
|
+
color: var(--ui-primary);
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.ui-select-container {
|
|
42
|
+
position: relative;
|
|
43
|
+
border-radius: var(--ui-radius);
|
|
44
|
+
display: flex;
|
|
45
|
+
align-items: center;
|
|
46
|
+
background-color: var(--ui-bg);
|
|
47
|
+
border: 1px solid var(--ui-border);
|
|
48
|
+
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
|
49
|
+
cursor: pointer;
|
|
50
|
+
overflow: hidden;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.ui-select-container:hover {
|
|
54
|
+
border-color: #cbd5e1;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.ui-select-container-focused {
|
|
58
|
+
border-color: var(--ui-primary);
|
|
59
|
+
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.ui-select-display {
|
|
63
|
+
padding: 10px 32px 10px 14px;
|
|
64
|
+
font-size: 0.9375rem;
|
|
65
|
+
color: var(--ui-text-primary);
|
|
66
|
+
flex-grow: 1;
|
|
67
|
+
min-height: 1.5em;
|
|
68
|
+
line-height: 1.5;
|
|
69
|
+
white-space: nowrap;
|
|
70
|
+
overflow: hidden;
|
|
71
|
+
text-overflow: ellipsis;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
.ui-select-icon {
|
|
75
|
+
position: absolute;
|
|
76
|
+
right: 8px;
|
|
77
|
+
top: 50%;
|
|
78
|
+
transform: translateY(-50%);
|
|
79
|
+
pointer-events: none;
|
|
80
|
+
color: var(--ui-text-secondary);
|
|
81
|
+
transition: transform 0.2s;
|
|
82
|
+
display: flex;
|
|
83
|
+
align-items: center;
|
|
84
|
+
justify-content: center;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
.ui-select-icon-open {
|
|
88
|
+
transform: translateY(-50%) rotate(180deg);
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
.ui-select-variant-filled {
|
|
92
|
+
background-color: #f1f5f9;
|
|
93
|
+
border-color: transparent;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
.ui-select-variant-filled:hover {
|
|
97
|
+
background-color: #e2e8f0;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
.ui-select-variant-filled.ui-select-container-focused {
|
|
101
|
+
background-color: var(--ui-bg);
|
|
102
|
+
border-color: var(--ui-primary);
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
.ui-select-variant-standard {
|
|
106
|
+
border-radius: 0;
|
|
107
|
+
border: 0;
|
|
108
|
+
border-bottom: 1px solid var(--ui-border);
|
|
109
|
+
background-color: transparent;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
.ui-select-variant-standard.ui-select-container-focused {
|
|
113
|
+
border-bottom: 2px solid var(--ui-primary);
|
|
114
|
+
box-shadow: none;
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
.ui-select-menu {
|
|
118
|
+
position: absolute;
|
|
119
|
+
top: 100%;
|
|
120
|
+
left: 0;
|
|
121
|
+
z-index: 1000;
|
|
122
|
+
min-width: 100%;
|
|
123
|
+
background-color: var(--ui-bg);
|
|
124
|
+
border: 1px solid var(--ui-border);
|
|
125
|
+
border-radius: var(--ui-radius);
|
|
126
|
+
margin-top: 4px;
|
|
127
|
+
box-shadow: var(--ui-shadow-lg);
|
|
128
|
+
padding: 4px 0;
|
|
129
|
+
max-height: 300px;
|
|
130
|
+
overflow-y: auto;
|
|
131
|
+
animation: ui-select-menu-fade-in 0.15s ease-out;
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
@keyframes ui-select-menu-fade-in {
|
|
135
|
+
from {
|
|
136
|
+
opacity: 0;
|
|
137
|
+
transform: translateY(-10px);
|
|
138
|
+
}
|
|
139
|
+
to {
|
|
140
|
+
opacity: 1;
|
|
141
|
+
transform: translateY(0);
|
|
142
|
+
}
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
.ui-select-menu-autoWidth {
|
|
146
|
+
min-width: unset;
|
|
147
|
+
width: max-content;
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
.ui-select-native {
|
|
151
|
+
width: 100%;
|
|
152
|
+
padding: 10px 14px;
|
|
153
|
+
font-size: 0.9375rem;
|
|
154
|
+
border: 1px solid var(--ui-border);
|
|
155
|
+
border-radius: var(--ui-radius);
|
|
156
|
+
background-color: var(--ui-bg);
|
|
157
|
+
appearance: none;
|
|
158
|
+
cursor: pointer;
|
|
159
|
+
outline: none;
|
|
160
|
+
font-family: inherit;
|
|
161
|
+
color: var(--ui-text-primary);
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
.ui-select-native:focus {
|
|
165
|
+
border-color: var(--ui-primary);
|
|
166
|
+
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
.ui-select-menu-item {
|
|
170
|
+
padding: 10px 16px;
|
|
171
|
+
font-size: 0.9375rem;
|
|
172
|
+
cursor: pointer;
|
|
173
|
+
transition: background-color 0.2s;
|
|
174
|
+
color: var(--ui-text-primary);
|
|
175
|
+
display: flex;
|
|
176
|
+
align-items: center;
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
.ui-select-menu-item:hover {
|
|
180
|
+
background-color: #f1f5f9;
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
.ui-select-menu-item-selected {
|
|
184
|
+
background-color: #eff6ff;
|
|
185
|
+
color: var(--ui-primary);
|
|
186
|
+
font-weight: 500;
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
.ui-select-menu-item-selected:hover {
|
|
190
|
+
background-color: #dbeafe;
|
|
191
|
+
}
|
|
192
|
+
`,K=forwardRef((v,x)=>{let{autoWidth:N=false,children:s,classes:i={},defaultOpen:g=false,defaultValue:p,displayEmpty:M=false,fullWidth:k=false,IconComponent:q=ChevronDown,id:G,input:ve,inputProps:I={},label:f,labelId:C,MenuProps:S={},multiple:u=false,native:R=false,onChange:L,onClose:T,onOpen:J,open:P,renderValue:A,SelectDisplayProps:Q={},sx:H,value:V,variant:U="outlined",className:z,...X}=v,Z=useId(),m=G||Z,ee=`${m}-menu`,[te,re]=useState(p!==void 0?p:u?[]:""),[oe,D]=useState(g),[O,W]=useState(false),Y=V!==void 0,t=Y?V:te,y=P!==void 0,a$1=y?P:oe,h=useRef(null),w=useRef(null),ie=e=>{if(R)return;let r=!a$1;y||D(r),r?J?.(e):T?.(e);},F=e=>{y||D(false),T?.(e);},_=(e,r)=>{let l=e;if(u){let c=Array.isArray(t)?t:[];c.includes(e)?l=c.filter(ae=>ae!==e):l=[...c,e];}if(Y||re(l),L){let c={target:{value:l,name:I.name}};L(c,r);}u||F(null);};useEffect(()=>{let e=r=>{a$1&&h.current&&!h.current.contains(r.target)&&w.current&&!w.current.contains(r.target)&&F(r);};return document.addEventListener("mousedown",e),()=>{document.removeEventListener("mousedown",e);}},[a$1]);let ne=()=>{if(A)return A(t);if(u&&Array.isArray(t))return t.length===0&&M?"":t.join(", ");if(t===""||t===void 0||t===null)return M?"":null;let e=t;return d.Children.forEach(s,r=>{d.isValidElement(r)&&r.props.value===t&&(e=r.props.children);}),e};return R?jsxs("div",{className:a("ui-select-root",k&&"ui-select-fullWidth",z,i.root),style:H,children:[jsx("style",{dangerouslySetInnerHTML:{__html:B}}),f&&jsx("label",{htmlFor:m,className:a("ui-select-label",i.label),children:f}),jsx("select",{id:m,value:t,onChange:e=>_(e.target.value),className:a("ui-select-native",i.native),...I,...X,children:s})]}):jsxs(Fragment,{children:[jsx("style",{dangerouslySetInnerHTML:{__html:B}}),jsxs("div",{ref:h,className:a("ui-select-root",k&&"ui-select-fullWidth",z,i.root),style:H,children:[f&&jsx("label",{id:C,className:a("ui-select-label",O&&"ui-select-label-focused",i.label),children:f}),jsxs("div",{ref:x,role:"button","aria-haspopup":"listbox","aria-expanded":a$1,"aria-labelledby":C,id:m,tabIndex:0,onClick:ie,onFocus:()=>W(true),onBlur:()=>W(false),className:a("ui-select-container",`ui-select-variant-${U}`,O&&"ui-select-container-focused",a$1&&"ui-select-container-open",i.container),...Q,children:[jsx("div",{className:a("ui-select-display",i.select),children:ne()}),jsx("div",{className:a("ui-select-icon",a$1&&"ui-select-icon-open",i.icon),children:jsx(q,{size:20})})]}),a$1&&jsx("div",{ref:w,id:ee,role:"listbox",className:a("ui-select-menu",N&&"ui-select-menu-autoWidth",S.className,i.menu),...S,children:d.Children.map(s,e=>{if(!d.isValidElement(e))return null;let r=u?Array.isArray(t)&&t.includes(e.props.value):t===e.props.value;return d.cloneElement(e,{onClick:l=>{e.props.onClick?.(l),_(e.props.value,e);},className:a("ui-select-menu-item",r&&"ui-select-menu-item-selected",e.props.className),role:"option","aria-selected":r})})})]})]})});K.displayName="Select";var de=K;var j=forwardRef(({className:v,children:x,value:N,disabled:s,selected:i,...g},p)=>jsx("div",{ref:p,className:a("ui-select-menu-item",i&&"ui-select-menu-item-selected",s&&"ui-select-menu-item-disabled",v),...g,children:x}));j.displayName="MenuItem";var me=j;export{de as a,me as b};//# sourceMappingURL=chunk-2K6E3M6X.mjs.map
|
|
193
|
+
//# sourceMappingURL=chunk-2K6E3M6X.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/Select/Select.tsx","../src/components/Select/MenuItem.tsx"],"names":["STYLES","Select","forwardRef","props","ref","autoWidth","children","classes","defaultOpen","defaultValue","displayEmpty","fullWidth","Icon","ChevronDown","idProp","input","inputProps","label","labelId","MenuProps","multiple","native","onChange","onClose","onOpen","openProp","renderValue","SelectDisplayProps","sx","valueProp","variant","className","rest","generatedId","useId","id","menuId","internalValue","setInternalValue","useState","internalOpen","setInternalOpen","focused","setFocused","isControlledValue","value","isControlledOpen","isOpen","containerRef","useRef","menuRef","handleToggle","event","nextOpen","handleClose","handleSelect","val","child","newValue","currentArray","v","useEffect","handleClickOutside","getDisplayValue","labelFound","React","jsxs","cn","jsx","Fragment","isSelected","e","Select_default","MenuItem","disabled","selected","MenuItem_default"],"mappings":"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","file":"chunk-2K6E3M6X.mjs","sourcesContent":["'use client';\n\nimport React, { forwardRef, useState, useRef, useEffect, useId } from 'react';\nimport { ChevronDown } from 'lucide-react';\nimport { cn } from '../../utils/cn';\nimport { SelectProps, SelectChangeEvent } from './types';\n\nconst STYLES = `\n .ui-select-root {\n display: inline-flex;\n flex-direction: column;\n position: relative;\n min-width: 200px;\n vertical-align: top;\n font-family: 'Inter', system-ui, sans-serif;\n margin: 0;\n --ui-primary: #3b82f6;\n --ui-secondary: #64748b;\n --ui-error: #ef4444;\n --ui-success: #22c55e;\n --ui-warning: #f59e0b;\n --ui-info: #0ea5e9;\n --ui-text-primary: #1e293b;\n --ui-text-secondary: #64748b;\n --ui-bg: #ffffff;\n --ui-border: #e2e8f0;\n --ui-radius: 8px;\n --ui-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\n }\n\n .ui-select-fullWidth {\n width: 100%;\n }\n\n .ui-select-label {\n display: block;\n margin-bottom: 6px;\n font-size: 0.875rem;\n font-weight: 500;\n color: var(--ui-text-secondary);\n transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n }\n\n .ui-select-label-focused {\n color: var(--ui-primary);\n }\n\n .ui-select-container {\n position: relative;\n border-radius: var(--ui-radius);\n display: flex;\n align-items: center;\n background-color: var(--ui-bg);\n border: 1px solid var(--ui-border);\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n cursor: pointer;\n overflow: hidden;\n }\n\n .ui-select-container:hover {\n border-color: #cbd5e1;\n }\n\n .ui-select-container-focused {\n border-color: var(--ui-primary);\n box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);\n }\n\n .ui-select-display {\n padding: 10px 32px 10px 14px;\n font-size: 0.9375rem;\n color: var(--ui-text-primary);\n flex-grow: 1;\n min-height: 1.5em;\n line-height: 1.5;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .ui-select-icon {\n position: absolute;\n right: 8px;\n top: 50%;\n transform: translateY(-50%);\n pointer-events: none;\n color: var(--ui-text-secondary);\n transition: transform 0.2s;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .ui-select-icon-open {\n transform: translateY(-50%) rotate(180deg);\n }\n\n .ui-select-variant-filled {\n background-color: #f1f5f9;\n border-color: transparent;\n }\n\n .ui-select-variant-filled:hover {\n background-color: #e2e8f0;\n }\n\n .ui-select-variant-filled.ui-select-container-focused {\n background-color: var(--ui-bg);\n border-color: var(--ui-primary);\n }\n\n .ui-select-variant-standard {\n border-radius: 0;\n border: 0;\n border-bottom: 1px solid var(--ui-border);\n background-color: transparent;\n }\n\n .ui-select-variant-standard.ui-select-container-focused {\n border-bottom: 2px solid var(--ui-primary);\n box-shadow: none;\n }\n\n .ui-select-menu {\n position: absolute;\n top: 100%;\n left: 0;\n z-index: 1000;\n min-width: 100%;\n background-color: var(--ui-bg);\n border: 1px solid var(--ui-border);\n border-radius: var(--ui-radius);\n margin-top: 4px;\n box-shadow: var(--ui-shadow-lg);\n padding: 4px 0;\n max-height: 300px;\n overflow-y: auto;\n animation: ui-select-menu-fade-in 0.15s ease-out;\n }\n\n @keyframes ui-select-menu-fade-in {\n from {\n opacity: 0;\n transform: translateY(-10px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n .ui-select-menu-autoWidth {\n min-width: unset;\n width: max-content;\n }\n\n .ui-select-native {\n width: 100%;\n padding: 10px 14px;\n font-size: 0.9375rem;\n border: 1px solid var(--ui-border);\n border-radius: var(--ui-radius);\n background-color: var(--ui-bg);\n appearance: none;\n cursor: pointer;\n outline: none;\n font-family: inherit;\n color: var(--ui-text-primary);\n }\n\n .ui-select-native:focus {\n border-color: var(--ui-primary);\n box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);\n }\n\n .ui-select-menu-item {\n padding: 10px 16px;\n font-size: 0.9375rem;\n cursor: pointer;\n transition: background-color 0.2s;\n color: var(--ui-text-primary);\n display: flex;\n align-items: center;\n }\n\n .ui-select-menu-item:hover {\n background-color: #f1f5f9;\n }\n\n .ui-select-menu-item-selected {\n background-color: #eff6ff;\n color: var(--ui-primary);\n font-weight: 500;\n }\n\n .ui-select-menu-item-selected:hover {\n background-color: #dbeafe;\n }\n`;\n\nexport const Select = forwardRef<HTMLDivElement, SelectProps>((props, ref) => {\n const {\n autoWidth = false,\n children,\n classes = {},\n defaultOpen = false,\n defaultValue,\n displayEmpty = false,\n fullWidth = false,\n IconComponent: Icon = ChevronDown,\n id: idProp,\n input,\n inputProps = {},\n label,\n labelId,\n MenuProps = {},\n multiple = false,\n native = false,\n onChange,\n onClose,\n onOpen,\n open: openProp,\n renderValue,\n SelectDisplayProps = {},\n sx,\n value: valueProp,\n variant = 'outlined',\n className,\n ...rest\n } = props;\n\n const generatedId = useId();\n const id = idProp || generatedId;\n const menuId = `${id}-menu`;\n \n const [internalValue, setInternalValue] = useState(defaultValue !== undefined ? defaultValue : (multiple ? [] : ''));\n const [internalOpen, setInternalOpen] = useState(defaultOpen);\n const [focused, setFocused] = useState(false);\n\n const isControlledValue = valueProp !== undefined;\n const value = isControlledValue ? valueProp : internalValue;\n\n const isControlledOpen = openProp !== undefined;\n const isOpen = isControlledOpen ? openProp : internalOpen;\n\n const containerRef = useRef<HTMLDivElement>(null);\n const menuRef = useRef<HTMLDivElement>(null);\n\n const handleToggle = (event: React.MouseEvent | React.KeyboardEvent) => {\n if (native) return;\n \n const nextOpen = !isOpen;\n if (!isControlledOpen) {\n setInternalOpen(nextOpen);\n }\n\n if (nextOpen) {\n onOpen?.(event);\n } else {\n onClose?.(event);\n }\n };\n\n const handleClose = (event: any) => {\n if (!isControlledOpen) {\n setInternalOpen(false);\n }\n onClose?.(event);\n };\n\n const handleSelect = (val: any, child?: React.ReactNode) => {\n let newValue = val;\n \n if (multiple) {\n const currentArray = Array.isArray(value) ? value : [];\n if (currentArray.includes(val)) {\n newValue = currentArray.filter((v) => v !== val);\n } else {\n newValue = [...currentArray, val];\n }\n }\n\n if (!isControlledValue) {\n setInternalValue(newValue);\n }\n\n if (onChange) {\n const event: SelectChangeEvent = {\n target: {\n value: newValue,\n name: inputProps.name,\n },\n };\n onChange(event, child);\n }\n\n if (!multiple) {\n handleClose(null);\n }\n };\n\n // Close menu when clicking outside\n useEffect(() => {\n const handleClickOutside = (event: MouseEvent) => {\n if (\n isOpen &&\n containerRef.current &&\n !containerRef.current.contains(event.target as Node) &&\n menuRef.current &&\n !menuRef.current.contains(event.target as Node)\n ) {\n handleClose(event);\n }\n };\n\n document.addEventListener('mousedown', handleClickOutside);\n return () => {\n document.removeEventListener('mousedown', handleClickOutside);\n };\n }, [isOpen]);\n\n const getDisplayValue = () => {\n if (renderValue) {\n return renderValue(value);\n }\n\n if (multiple && Array.isArray(value)) {\n if (value.length === 0 && displayEmpty) return '';\n return value.join(', ');\n }\n\n if (value === '' || value === undefined || value === null) {\n return displayEmpty ? '' : null;\n }\n\n // Attempt to find the label from children\n let labelFound = value;\n React.Children.forEach(children, (child) => {\n if (React.isValidElement(child) && child.props.value === value) {\n labelFound = child.props.children;\n }\n });\n\n return labelFound;\n };\n\n if (native) {\n return (\n <div className={cn('ui-select-root', fullWidth && 'ui-select-fullWidth', className, classes.root)} style={sx}>\n <style dangerouslySetInnerHTML={{ __html: STYLES }} />\n {label && (\n <label htmlFor={id} className={cn('ui-select-label', classes.label)}>\n {label}\n </label>\n )}\n <select\n id={id}\n value={value}\n onChange={(e) => handleSelect(e.target.value)}\n className={cn('ui-select-native', classes.native)}\n {...inputProps}\n {...(rest as any)}\n >\n {children}\n </select>\n </div>\n );\n }\n\n return (\n <>\n <style dangerouslySetInnerHTML={{ __html: STYLES }} />\n <div\n ref={containerRef}\n className={cn(\n 'ui-select-root',\n fullWidth && 'ui-select-fullWidth',\n className,\n classes.root\n )}\n style={sx}\n >\n {label && (\n <label\n id={labelId}\n className={cn(\n 'ui-select-label',\n focused && 'ui-select-label-focused',\n classes.label\n )}\n >\n {label}\n </label>\n )}\n\n <div\n ref={ref}\n role=\"button\"\n aria-haspopup=\"listbox\"\n aria-expanded={isOpen}\n aria-labelledby={labelId}\n id={id}\n tabIndex={0}\n onClick={handleToggle}\n onFocus={() => setFocused(true)}\n onBlur={() => setFocused(false)}\n className={cn(\n 'ui-select-container',\n `ui-select-variant-${variant}`,\n focused && 'ui-select-container-focused',\n isOpen && 'ui-select-container-open',\n classes.container\n )}\n {...SelectDisplayProps}\n >\n <div className={cn('ui-select-display', classes.select)}>\n {getDisplayValue()}\n </div>\n <div className={cn('ui-select-icon', isOpen && 'ui-select-icon-open', classes.icon)}>\n <Icon size={20} />\n </div>\n </div>\n\n {isOpen && (\n <div\n ref={menuRef}\n id={menuId}\n role=\"listbox\"\n className={cn(\n 'ui-select-menu',\n autoWidth && 'ui-select-menu-autoWidth',\n MenuProps.className,\n classes.menu\n )}\n {...MenuProps}\n >\n {React.Children.map(children, (child) => {\n if (!React.isValidElement(child)) return null;\n\n const isSelected = multiple\n ? Array.isArray(value) && value.includes(child.props.value)\n : value === child.props.value;\n\n return React.cloneElement(child as React.ReactElement<any>, {\n onClick: (e: React.MouseEvent) => {\n child.props.onClick?.(e);\n handleSelect(child.props.value, child);\n },\n className: cn(\n 'ui-select-menu-item',\n isSelected && 'ui-select-menu-item-selected',\n child.props.className\n ),\n role: 'option',\n 'aria-selected': isSelected,\n });\n })}\n </div>\n )}\n </div>\n </>\n );\n});\n\nSelect.displayName = 'Select';\n\nexport default Select;\n","import React, { forwardRef, HTMLAttributes } from 'react';\nimport { cn } from '../../utils/cn';\n\nexport interface MenuItemProps extends HTMLAttributes<HTMLDivElement> {\n value?: any;\n disabled?: boolean;\n selected?: boolean;\n}\n\nexport const MenuItem = forwardRef<HTMLDivElement, MenuItemProps>(\n ({ className, children, value, disabled, selected, ...props }, ref) => {\n return (\n <div\n ref={ref}\n className={cn(\n 'ui-select-menu-item',\n selected && 'ui-select-menu-item-selected',\n disabled && 'ui-select-menu-item-disabled',\n className\n )}\n {...props}\n >\n {children}\n </div>\n );\n }\n);\n\nMenuItem.displayName = 'MenuItem';\n\nexport default MenuItem;\n"]}
|
|
@@ -0,0 +1,129 @@
|
|
|
1
|
+
import {a}from'./chunk-547MQ4FI.mjs';import {forwardRef,useState,useCallback}from'react';import {jsxs,Fragment,jsx}from'react/jsx-runtime';var F=`
|
|
2
|
+
.orc-switch {
|
|
3
|
+
display: inline-flex;
|
|
4
|
+
width: 50px;
|
|
5
|
+
height: 28px;
|
|
6
|
+
box-sizing: border-box;
|
|
7
|
+
position: relative;
|
|
8
|
+
flex-shrink: 0;
|
|
9
|
+
vertical-align: middle;
|
|
10
|
+
cursor: pointer;
|
|
11
|
+
padding: 0;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.orc-switch * {
|
|
15
|
+
box-sizing: border-box;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.orc-switch.orc-switch--disabled {
|
|
19
|
+
cursor: default;
|
|
20
|
+
opacity: 0.5;
|
|
21
|
+
pointer-events: none;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.orc-switch-input {
|
|
25
|
+
cursor: inherit;
|
|
26
|
+
position: absolute;
|
|
27
|
+
opacity: 0;
|
|
28
|
+
width: 100%;
|
|
29
|
+
height: 100%;
|
|
30
|
+
top: 0;
|
|
31
|
+
left: 0;
|
|
32
|
+
margin: 0;
|
|
33
|
+
padding: 0;
|
|
34
|
+
z-index: 2;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.orc-switch-base {
|
|
38
|
+
display: inline-flex;
|
|
39
|
+
align-items: center;
|
|
40
|
+
justify-content: center;
|
|
41
|
+
position: absolute;
|
|
42
|
+
top: 50%;
|
|
43
|
+
left: 2px;
|
|
44
|
+
transform: translateY(-50%);
|
|
45
|
+
z-index: 1;
|
|
46
|
+
transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
47
|
+
width: 24px;
|
|
48
|
+
height: 24px;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.orc-switch--checked .orc-switch-base {
|
|
52
|
+
transform: translate(22px, -50%);
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.orc-switch-thumb {
|
|
56
|
+
background-color: #fff;
|
|
57
|
+
width: 100%;
|
|
58
|
+
height: 100%;
|
|
59
|
+
border-radius: 50%;
|
|
60
|
+
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
|
|
61
|
+
display: flex;
|
|
62
|
+
align-items: center;
|
|
63
|
+
justify-content: center;
|
|
64
|
+
transition: background-color 200ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.orc-switch-track {
|
|
68
|
+
height: 100%;
|
|
69
|
+
width: 100%;
|
|
70
|
+
border-radius: 14px;
|
|
71
|
+
background-color: #e9e9ea;
|
|
72
|
+
transition: background-color 200ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
73
|
+
position: absolute;
|
|
74
|
+
top: 0;
|
|
75
|
+
left: 0;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.orc-switch--checked .orc-switch-track.orc-switch--primary {
|
|
79
|
+
background-color: #007aff;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.orc-switch--checked .orc-switch-track.orc-switch--secondary {
|
|
83
|
+
background-color: #5856d6;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
.orc-switch--checked .orc-switch-track.orc-switch--success {
|
|
87
|
+
background-color: #34c759;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
.orc-switch--checked .orc-switch-track.orc-switch--error {
|
|
91
|
+
background-color: #ff3b30;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
.orc-switch--checked .orc-switch-track.orc-switch--info {
|
|
95
|
+
background-color: #5ac8fa;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
.orc-switch--checked .orc-switch-track.orc-switch--warning {
|
|
99
|
+
background-color: #ff9500;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
.orc-switch--checked .orc-switch-track.orc-switch--default {
|
|
103
|
+
background-color: #8e8e93;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
.orc-switch--small {
|
|
107
|
+
width: 40px;
|
|
108
|
+
height: 22px;
|
|
109
|
+
}
|
|
110
|
+
.orc-switch--small .orc-switch-base {
|
|
111
|
+
width: 18px;
|
|
112
|
+
height: 18px;
|
|
113
|
+
left: 2px;
|
|
114
|
+
}
|
|
115
|
+
.orc-switch--small.orc-switch--checked .orc-switch-base {
|
|
116
|
+
transform: translate(18px, -50%);
|
|
117
|
+
}
|
|
118
|
+
.orc-switch--small .orc-switch-track {
|
|
119
|
+
border-radius: 11px;
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
.orc-switch--edge-start {
|
|
123
|
+
margin-left: -8px;
|
|
124
|
+
}
|
|
125
|
+
.orc-switch--edge-end {
|
|
126
|
+
margin-right: -8px;
|
|
127
|
+
}
|
|
128
|
+
`,G=forwardRef(({checked:n,checkedIcon:k,classes:c={},color:d="primary",defaultChecked:m,disabled:i=false,disableRipple:K=false,edge:w=false,icon:l,id:f,onChange:p,required:g=false,size:x="medium",slotProps:e={},slots:r={},sx:y,value:S,className:C,...z},T)=>{let[B,N]=useState(m||false),a$1=n!==void 0,o=a$1?n:B,v=useCallback(u=>{let b=u.target.checked;a$1||N(b),p?.(u,b);},[a$1,p]),E=r.root||"span",I=r.track||"span",L=r.thumb||"span",R=r.input||"input",$=r.switchBase||"span",H=a("orc-switch",`orc-switch--${x}`,w&&`orc-switch--edge-${w}`,i&&"orc-switch--disabled",o&&"orc-switch--checked",C,c.root),M=a("orc-switch-base",`orc-switch--${d}`,o&&"orc-switch--checked",o&&c.checked,i&&"orc-switch--disabled",i&&c.disabled,c.switchBase),Y=a("orc-switch-thumb",c.thumb),_=a("orc-switch-track",`orc-switch--${d}`,c.track),j=a("orc-switch-input",c.input);return jsxs(Fragment,{children:[jsx("style",{dangerouslySetInnerHTML:{__html:F}}),jsxs(E,{ref:T,className:H,style:y,...e.root,...z,children:[jsxs($,{className:M,...e.switchBase,children:[jsx(L,{className:Y,...e.thumb,children:o&&k||l}),jsx(R,{type:"checkbox",id:f,checked:o,onChange:v,disabled:i,required:g,value:S,className:j,...e.input})]}),jsx(I,{className:_,...e.track})]})]})});G.displayName="Switch";export{G as a};//# sourceMappingURL=chunk-33P6OQSB.mjs.map
|
|
129
|
+
//# sourceMappingURL=chunk-33P6OQSB.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/Switch/Switch.tsx"],"names":["STYLES","Switch","forwardRef","checkedProp","checkedIcon","classes","color","defaultChecked","disabled","disableRipple","edge","icon","id","onChange","required","size","slotProps","slots","sx","value","className","props","ref","checkedState","setCheckedState","useState","isControlled","checked","handleInputChange","useCallback","event","newChecked","Root","Track","Thumb","Input","SwitchBase","rootClasses","cn","switchBaseClasses","thumbClasses","trackClasses","inputClasses","jsxs","Fragment","jsx"],"mappings":"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","file":"chunk-33P6OQSB.mjs","sourcesContent":["'use client';\n\nimport { forwardRef, useState, ChangeEvent, useCallback } from 'react';\nimport { cn } from '../../utils/cn';\nimport { SwitchProps } from './types';\n\nconst STYLES = `\n .orc-switch {\n display: inline-flex;\n width: 50px;\n height: 28px;\n box-sizing: border-box;\n position: relative;\n flex-shrink: 0;\n vertical-align: middle;\n cursor: pointer;\n padding: 0;\n }\n\n .orc-switch * {\n box-sizing: border-box;\n }\n\n .orc-switch.orc-switch--disabled {\n cursor: default;\n opacity: 0.5;\n pointer-events: none;\n }\n\n .orc-switch-input {\n cursor: inherit;\n position: absolute;\n opacity: 0;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n margin: 0;\n padding: 0;\n z-index: 2;\n }\n\n .orc-switch-base {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n position: absolute;\n top: 50%;\n left: 2px;\n transform: translateY(-50%);\n z-index: 1;\n transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);\n width: 24px;\n height: 24px;\n }\n\n .orc-switch--checked .orc-switch-base {\n transform: translate(22px, -50%);\n }\n\n .orc-switch-thumb {\n background-color: #fff;\n width: 100%;\n height: 100%;\n border-radius: 50%;\n box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);\n display: flex;\n align-items: center;\n justify-content: center;\n transition: background-color 200ms cubic-bezier(0.4, 0, 0.2, 1);\n }\n\n .orc-switch-track {\n height: 100%;\n width: 100%;\n border-radius: 14px;\n background-color: #e9e9ea;\n transition: background-color 200ms cubic-bezier(0.4, 0, 0.2, 1);\n position: absolute;\n top: 0;\n left: 0;\n }\n\n .orc-switch--checked .orc-switch-track.orc-switch--primary {\n background-color: #007aff;\n }\n\n .orc-switch--checked .orc-switch-track.orc-switch--secondary {\n background-color: #5856d6;\n }\n\n .orc-switch--checked .orc-switch-track.orc-switch--success {\n background-color: #34c759;\n }\n\n .orc-switch--checked .orc-switch-track.orc-switch--error {\n background-color: #ff3b30;\n }\n\n .orc-switch--checked .orc-switch-track.orc-switch--info {\n background-color: #5ac8fa;\n }\n\n .orc-switch--checked .orc-switch-track.orc-switch--warning {\n background-color: #ff9500;\n }\n\n .orc-switch--checked .orc-switch-track.orc-switch--default {\n background-color: #8e8e93;\n }\n\n .orc-switch--small {\n width: 40px;\n height: 22px;\n }\n .orc-switch--small .orc-switch-base {\n width: 18px;\n height: 18px;\n left: 2px;\n }\n .orc-switch--small.orc-switch--checked .orc-switch-base {\n transform: translate(18px, -50%);\n }\n .orc-switch--small .orc-switch-track {\n border-radius: 11px;\n }\n\n .orc-switch--edge-start {\n margin-left: -8px;\n }\n .orc-switch--edge-end {\n margin-right: -8px;\n }\n`;\n\nexport const Switch = forwardRef<HTMLSpanElement, SwitchProps>(\n (\n {\n checked: checkedProp,\n checkedIcon,\n classes = {},\n color = 'primary',\n defaultChecked,\n disabled = false,\n disableRipple = false,\n edge = false,\n icon,\n id,\n onChange,\n required = false,\n size = 'medium',\n slotProps = {},\n slots = {},\n sx,\n value,\n className,\n ...props\n },\n ref\n ) => {\n const [checkedState, setCheckedState] = useState(defaultChecked || false);\n const isControlled = checkedProp !== undefined;\n const checked = isControlled ? checkedProp : checkedState;\n\n const handleInputChange = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n const newChecked = event.target.checked;\n if (!isControlled) {\n setCheckedState(newChecked);\n }\n onChange?.(event, newChecked);\n },\n [isControlled, onChange]\n );\n\n const Root = slots.root || 'span';\n const Track = slots.track || 'span';\n const Thumb = slots.thumb || 'span';\n const Input = slots.input || 'input';\n const SwitchBase = slots.switchBase || 'span';\n\n const rootClasses = cn(\n 'orc-switch',\n `orc-switch--${size}`,\n edge && `orc-switch--edge-${edge}`,\n disabled && 'orc-switch--disabled',\n checked && 'orc-switch--checked',\n className,\n classes.root\n );\n\n const switchBaseClasses = cn(\n 'orc-switch-base',\n `orc-switch--${color}`,\n checked && 'orc-switch--checked',\n checked && classes.checked,\n disabled && 'orc-switch--disabled',\n disabled && classes.disabled,\n classes.switchBase\n );\n\n const thumbClasses = cn('orc-switch-thumb', classes.thumb);\n const trackClasses = cn('orc-switch-track', `orc-switch--${color}`, classes.track);\n const inputClasses = cn('orc-switch-input', classes.input);\n\n return (\n <>\n <style dangerouslySetInnerHTML={{ __html: STYLES }} />\n <Root\n ref={ref}\n className={rootClasses}\n style={sx}\n {...slotProps.root}\n {...props}\n >\n <SwitchBase className={switchBaseClasses} {...slotProps.switchBase}>\n <Thumb className={thumbClasses} {...slotProps.thumb}>\n {checked ? checkedIcon || icon : icon}\n </Thumb>\n <Input\n type=\"checkbox\"\n id={id}\n checked={checked}\n onChange={handleInputChange}\n disabled={disabled}\n required={required}\n value={value}\n className={inputClasses}\n {...slotProps.input}\n />\n </SwitchBase>\n <Track className={trackClasses} {...slotProps.track} />\n </Root>\n </>\n );\n }\n);\n\nSwitch.displayName = 'Switch';\n\nexport default Switch;\n"]}
|
|
@@ -0,0 +1,102 @@
|
|
|
1
|
+
import {a}from'./chunk-547MQ4FI.mjs';import {forwardRef,useState,useRef,useEffect}from'react';import {jsxs,Fragment,jsx}from'react/jsx-runtime';var I=`
|
|
2
|
+
.idle-overlay {
|
|
3
|
+
position: fixed;
|
|
4
|
+
inset: 0;
|
|
5
|
+
z-index: 50;
|
|
6
|
+
display: flex;
|
|
7
|
+
align-items: center;
|
|
8
|
+
justify-content: center;
|
|
9
|
+
background-color: rgba(0, 0, 0, 0.5);
|
|
10
|
+
backdrop-filter: blur(4px);
|
|
11
|
+
animation: idle-fadeIn 0.3s ease-out;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.idle-dialog {
|
|
15
|
+
background-color: #ffffff;
|
|
16
|
+
border-radius: 0.5rem;
|
|
17
|
+
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
|
|
18
|
+
padding: 1.5rem;
|
|
19
|
+
width: 100%;
|
|
20
|
+
max-width: 28rem;
|
|
21
|
+
margin-left: 1rem;
|
|
22
|
+
margin-right: 1rem;
|
|
23
|
+
border: 1px solid #e2e8f0;
|
|
24
|
+
animation: idle-zoomIn 0.3s ease-out;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.dark .idle-dialog {
|
|
28
|
+
background-color: #0f172a;
|
|
29
|
+
border-color: #1e293b;
|
|
30
|
+
color: #ffffff;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.idle-title {
|
|
34
|
+
font-size: 1.25rem;
|
|
35
|
+
line-height: 1.75rem;
|
|
36
|
+
font-weight: 700;
|
|
37
|
+
color: #0f172a;
|
|
38
|
+
margin-bottom: 1rem;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.dark .idle-title {
|
|
42
|
+
color: #ffffff;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.idle-message {
|
|
46
|
+
color: #475569;
|
|
47
|
+
line-height: 1.5;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.dark .idle-message {
|
|
51
|
+
color: #94a3b8;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.idle-footer {
|
|
55
|
+
display: flex;
|
|
56
|
+
justify-content: flex-end;
|
|
57
|
+
padding-top: 1rem;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.idle-button {
|
|
61
|
+
display: inline-flex;
|
|
62
|
+
align-items: center;
|
|
63
|
+
justify-content: center;
|
|
64
|
+
border-radius: 0.375rem;
|
|
65
|
+
background-color: #2563eb;
|
|
66
|
+
padding: 0.5rem 1rem;
|
|
67
|
+
font-size: 0.875rem;
|
|
68
|
+
font-weight: 600;
|
|
69
|
+
color: #ffffff;
|
|
70
|
+
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
|
71
|
+
border: none;
|
|
72
|
+
cursor: pointer;
|
|
73
|
+
transition: background-color 0.2s;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.idle-button:hover {
|
|
77
|
+
background-color: #3b82f6;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
.idle-button:focus-visible {
|
|
81
|
+
outline: 2px solid transparent;
|
|
82
|
+
outline-offset: 2px;
|
|
83
|
+
box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #2563eb;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
@keyframes idle-fadeIn {
|
|
87
|
+
from { opacity: 0; }
|
|
88
|
+
to { opacity: 1; }
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
@keyframes idle-zoomIn {
|
|
92
|
+
from {
|
|
93
|
+
opacity: 0;
|
|
94
|
+
transform: scale(0.95);
|
|
95
|
+
}
|
|
96
|
+
to {
|
|
97
|
+
opacity: 1;
|
|
98
|
+
transform: scale(1);
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
`,E=({as:c,idleTimeLimit:i=7200*1e3,onLogout:m,dialogTitle:p="Session Expired",dialogMessage:t="Your current session has expired. Please proceed with logout and re-login.",logoutButtonText:u="Logout",className:b,...y},g)=>{let x=c||"div",[r,h]=useState(false),o=useRef(null),l=()=>{o.current&&clearTimeout(o.current),o.current=setTimeout(()=>{h(true);},i);};return useEffect(()=>{l();let a=["mousemove","keydown","scroll","click","touchstart"],s=()=>{r||l();};return a.forEach(n=>window.addEventListener(n,s)),()=>{a.forEach(n=>window.removeEventListener(n,s)),o.current&&clearTimeout(o.current);}},[r,i]),r?jsxs(Fragment,{children:[jsx("style",{dangerouslySetInnerHTML:{__html:I}}),jsx("div",{className:"idle-overlay",children:jsx(x,{ref:g,className:a("idle-dialog",b),...y,children:jsxs("div",{className:"idle-content",children:[jsx("h3",{className:"idle-title",children:p}),jsx("div",{className:"idle-message",children:typeof t=="string"?jsx("p",{style:{whiteSpace:"pre-line"},children:t}):t}),jsx("div",{className:"idle-footer",children:jsx("button",{type:"button",onClick:m,className:"idle-button",children:u})})]})})})]}):null},N=forwardRef(E);N.displayName="IdleTimer";export{N as a};//# sourceMappingURL=chunk-4HRAPJIS.mjs.map
|
|
102
|
+
//# sourceMappingURL=chunk-4HRAPJIS.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/IdleTimer/IdleTimer.tsx"],"names":["STYLES","IdleTimerInner","as","idleTimeLimit","onLogout","dialogTitle","dialogMessage","logoutButtonText","className","props","ref","Component","isIdle","setIsIdle","useState","timerRef","useRef","startTimer","useEffect","events","resetTimer","event","jsxs","Fragment","jsx","cn","IdleTimer","forwardRef"],"mappings":"oJAaMA,CAAAA,CAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAAA,CAyGTC,CAAAA,CAAiB,CACrB,CACE,EAAA,CAAAC,EACA,aAAA,CAAAC,CAAAA,CAAgB,IAAA,CAAc,GAAA,CAC9B,QAAA,CAAAC,CAAAA,CACA,YAAAC,CAAAA,CAAc,iBAAA,CACd,cAAAC,CAAAA,CAAgB,4EAAA,CAChB,iBAAAC,CAAAA,CAAmB,QAAA,CACnB,SAAA,CAAAC,CAAAA,CACA,GAAGC,CACL,EACAC,CAAAA,GACG,CACH,IAAMC,CAAAA,CAAYT,CAAAA,EAAM,MAClB,CAACU,CAAAA,CAAQC,CAAS,CAAA,CAAIC,QAAAA,CAAS,KAAK,EACpCC,CAAAA,CAAWC,MAAAA,CAA6C,IAAI,CAAA,CAE5DC,CAAAA,CAAa,IAAM,CACnBF,CAAAA,CAAS,OAAA,EAAS,YAAA,CAAaA,CAAAA,CAAS,OAAO,CAAA,CAEnDA,EAAS,OAAA,CAAU,UAAA,CAAW,IAAM,CAClCF,CAAAA,CAAU,IAAI,EAChB,CAAA,CAAGV,CAAa,EAClB,CAAA,CAyBA,OAvBAe,UAAU,IAAM,CACdD,GAAW,CAEX,IAAME,EAAmC,CACvC,WAAA,CACA,SAAA,CACA,QAAA,CACA,OAAA,CACA,YACF,EAEMC,CAAAA,CAAa,IAAM,CAClBR,CAAAA,EAAQK,CAAAA,GACf,CAAA,CAEA,OAAAE,CAAAA,CAAO,OAAA,CAASE,CAAAA,EAAU,MAAA,CAAO,iBAAiBA,CAAAA,CAAOD,CAAU,CAAC,CAAA,CAE7D,IAAM,CACXD,EAAO,OAAA,CAASE,CAAAA,EAAU,MAAA,CAAO,mBAAA,CAAoBA,CAAAA,CAAOD,CAAU,CAAC,CAAA,CACnEL,CAAAA,CAAS,SAAS,YAAA,CAAaA,CAAAA,CAAS,OAAO,EACrD,CACF,CAAA,CAAG,CAACH,CAAAA,CAAQT,CAAa,CAAC,CAAA,CAErBS,CAAAA,CAGHU,KAAAC,QAAAA,CAAA,CACE,UAAAC,GAAAA,CAAC,OAAA,CAAA,CAAM,uBAAA,CAAyB,CAAE,MAAA,CAAQxB,CAAO,EAAG,CAAA,CACpDwB,GAAAA,CAAC,OAAI,SAAA,CAAU,cAAA,CACb,SAAAA,GAAAA,CAACb,CAAAA,CAAA,CACC,GAAA,CAAKD,CAAAA,CACL,SAAA,CAAWe,EAAG,aAAA,CAAejB,CAAS,CAAA,CACrC,GAAGC,CAAAA,CAEJ,QAAA,CAAAa,KAAC,KAAA,CAAA,CAAI,SAAA,CAAU,cAAA,CACb,QAAA,CAAA,CAAAE,GAAAA,CAAC,IAAA,CAAA,CAAG,UAAU,YAAA,CAAc,QAAA,CAAAnB,EAAY,CAAA,CACxCmB,GAAAA,CAAC,OAAI,SAAA,CAAU,cAAA,CACZ,QAAA,CAAA,OAAOlB,CAAAA,EAAkB,QAAA,CACxBkB,GAAAA,CAAC,KAAE,KAAA,CAAO,CAAE,UAAA,CAAY,UAAW,CAAA,CAAI,QAAA,CAAAlB,EAAc,CAAA,CAErDA,CAAAA,CAEJ,CAAA,CACAkB,GAAAA,CAAC,KAAA,CAAA,CAAI,SAAA,CAAU,cACb,QAAA,CAAAA,GAAAA,CAAC,UACC,IAAA,CAAK,QAAA,CACL,QAASpB,CAAAA,CACT,SAAA,CAAU,aAAA,CAET,QAAA,CAAAG,CAAAA,CACH,CAAA,CACF,GACF,CAAA,CACF,CAAA,CACF,CAAA,CAAA,CACF,CAAA,CAhCkB,IAkCtB,CAAA,CAKamB,EAAYC,UAAAA,CAAW1B,CAAqB,EAMzDyB,CAAAA,CAAU,WAAA,CAAc,WAAA","file":"chunk-4HRAPJIS.mjs","sourcesContent":["'use client';\n\nimport React, {\n useEffect,\n useRef,\n useState,\n forwardRef,\n ElementType,\n ReactElement,\n} from 'react';\nimport { cn } from '../../utils/cn';\nimport { IdleTimerComponentProps } from './types';\n\nconst STYLES = `\n .idle-overlay {\n position: fixed;\n inset: 0;\n z-index: 50;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: rgba(0, 0, 0, 0.5);\n backdrop-filter: blur(4px);\n animation: idle-fadeIn 0.3s ease-out;\n }\n\n .idle-dialog {\n background-color: #ffffff;\n border-radius: 0.5rem;\n box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);\n padding: 1.5rem;\n width: 100%;\n max-width: 28rem;\n margin-left: 1rem;\n margin-right: 1rem;\n border: 1px solid #e2e8f0;\n animation: idle-zoomIn 0.3s ease-out;\n }\n\n .dark .idle-dialog {\n background-color: #0f172a;\n border-color: #1e293b;\n color: #ffffff;\n }\n\n .idle-title {\n font-size: 1.25rem;\n line-height: 1.75rem;\n font-weight: 700;\n color: #0f172a;\n margin-bottom: 1rem;\n }\n\n .dark .idle-title {\n color: #ffffff;\n }\n\n .idle-message {\n color: #475569;\n line-height: 1.5;\n }\n\n .dark .idle-message {\n color: #94a3b8;\n }\n\n .idle-footer {\n display: flex;\n justify-content: flex-end;\n padding-top: 1rem;\n }\n\n .idle-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-radius: 0.375rem;\n background-color: #2563eb;\n padding: 0.5rem 1rem;\n font-size: 0.875rem;\n font-weight: 600;\n color: #ffffff;\n box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n border: none;\n cursor: pointer;\n transition: background-color 0.2s;\n }\n\n .idle-button:hover {\n background-color: #3b82f6;\n }\n\n .idle-button:focus-visible {\n outline: 2px solid transparent;\n outline-offset: 2px;\n box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #2563eb;\n }\n\n @keyframes idle-fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n }\n\n @keyframes idle-zoomIn {\n from {\n opacity: 0;\n transform: scale(0.95);\n }\n to {\n opacity: 1;\n transform: scale(1);\n }\n }\n`;\n\n/**\n * IdleTimer component that monitors user activity and prompts for logout after a period of inactivity.\n */\nconst IdleTimerInner = <T extends ElementType = 'div'>(\n {\n as,\n idleTimeLimit = 2 * 60 * 60 * 1000,\n onLogout,\n dialogTitle = 'Session Expired',\n dialogMessage = 'Your current session has expired. Please proceed with logout and re-login.',\n logoutButtonText = 'Logout',\n className,\n ...props\n }: IdleTimerComponentProps<T>,\n ref: any\n) => {\n const Component = as || 'div';\n const [isIdle, setIsIdle] = useState(false);\n const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n const startTimer = () => {\n if (timerRef.current) clearTimeout(timerRef.current);\n\n timerRef.current = setTimeout(() => {\n setIsIdle(true);\n }, idleTimeLimit);\n };\n\n useEffect(() => {\n startTimer();\n\n const events: (keyof WindowEventMap)[] = [\n 'mousemove',\n 'keydown',\n 'scroll',\n 'click',\n 'touchstart',\n ];\n\n const resetTimer = () => {\n if (!isIdle) startTimer();\n };\n\n events.forEach((event) => window.addEventListener(event, resetTimer));\n\n return () => {\n events.forEach((event) => window.removeEventListener(event, resetTimer));\n if (timerRef.current) clearTimeout(timerRef.current);\n };\n }, [isIdle, idleTimeLimit]);\n\n if (!isIdle) return null;\n\n return (\n <>\n <style dangerouslySetInnerHTML={{ __html: STYLES }} />\n <div className=\"idle-overlay\">\n <Component\n ref={ref}\n className={cn('idle-dialog', className)}\n {...props}\n >\n <div className=\"idle-content\">\n <h3 className=\"idle-title\">{dialogTitle}</h3>\n <div className=\"idle-message\">\n {typeof dialogMessage === 'string' ? (\n <p style={{ whiteSpace: 'pre-line' }}>{dialogMessage}</p>\n ) : (\n dialogMessage\n )}\n </div>\n <div className=\"idle-footer\">\n <button\n type=\"button\"\n onClick={onLogout}\n className=\"idle-button\"\n >\n {logoutButtonText}\n </button>\n </div>\n </div>\n </Component>\n </div>\n </>\n );\n};\n\n/**\n * IdleTimer component that monitors user activity and prompts for logout after a period of inactivity.\n */\nexport const IdleTimer = forwardRef(IdleTimerInner as any) as (<\n T extends ElementType = 'div',\n>(\n props: IdleTimerComponentProps<T> & { ref?: any }\n) => ReactElement | null) & { displayName?: string };\n\nIdleTimer.displayName = 'IdleTimer';\n\nexport default IdleTimer;\n"]}
|
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
import {a}from'./chunk-547MQ4FI.mjs';import {forwardRef}from'react';import {jsxs,Fragment,jsx}from'react/jsx-runtime';var u=`
|
|
2
|
+
.loader-overlay {
|
|
3
|
+
position: fixed;
|
|
4
|
+
inset: 0;
|
|
5
|
+
z-index: 9999;
|
|
6
|
+
display: flex;
|
|
7
|
+
flex-direction: column;
|
|
8
|
+
align-items: center;
|
|
9
|
+
justify-content: center;
|
|
10
|
+
background-color: rgba(107, 114, 128, 0.4);
|
|
11
|
+
backdrop-filter: blur(2px);
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.loader-file-container {
|
|
15
|
+
position: relative;
|
|
16
|
+
width: 80%;
|
|
17
|
+
height: 100px;
|
|
18
|
+
overflow: hidden;
|
|
19
|
+
margin-bottom: 0;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.loader-file {
|
|
23
|
+
position: absolute;
|
|
24
|
+
bottom: 25px;
|
|
25
|
+
width: 40px;
|
|
26
|
+
height: 50px;
|
|
27
|
+
border-radius: 4px;
|
|
28
|
+
opacity: 0;
|
|
29
|
+
transform-origin: center;
|
|
30
|
+
animation: loader-flyRight 3s ease-in-out infinite;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.loader-file::before {
|
|
34
|
+
content: "";
|
|
35
|
+
position: absolute;
|
|
36
|
+
top: 6px;
|
|
37
|
+
left: 6px;
|
|
38
|
+
width: 28px;
|
|
39
|
+
height: 4px;
|
|
40
|
+
background-color: var(--secondary-color);
|
|
41
|
+
border-radius: 2px;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.loader-file::after {
|
|
45
|
+
content: "";
|
|
46
|
+
position: absolute;
|
|
47
|
+
top: 13px;
|
|
48
|
+
left: 6px;
|
|
49
|
+
width: 18px;
|
|
50
|
+
height: 4px;
|
|
51
|
+
background-color: var(--secondary-color);
|
|
52
|
+
border-radius: 2px;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.loader-text-flip {
|
|
56
|
+
display: flex;
|
|
57
|
+
perspective: 700px;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.loader-text-flip span {
|
|
61
|
+
font-size: 30px;
|
|
62
|
+
font-family: sans-serif;
|
|
63
|
+
display: inline-block;
|
|
64
|
+
animation: loader-flip 2.6s infinite linear;
|
|
65
|
+
transform-origin: 0 70%;
|
|
66
|
+
transform-style: preserve-3d;
|
|
67
|
+
color: var(--primary-color);
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.loader-text-flip span:nth-child(even) {
|
|
71
|
+
color: var(--secondary-color);
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
@keyframes loader-flyRight {
|
|
75
|
+
0% { left: -10%; transform: scale(0); opacity: 0; }
|
|
76
|
+
50% { left: 45%; transform: scale(1.2); opacity: 1; }
|
|
77
|
+
100% { left: 100%; transform: scale(0); opacity: 0; }
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
@keyframes loader-flip {
|
|
81
|
+
35% { transform: rotateX(360deg); }
|
|
82
|
+
100% { transform: rotateX(360deg); }
|
|
83
|
+
}
|
|
84
|
+
`,h=forwardRef(({as:l,className:n,isLoading:s=true,text:d="LOADING",primaryColor:a$1="#3f4379",secondaryColor:p="#8c91df",...f},c)=>{if(!s)return null;let m=l||"div",y=Array.from({length:6},(e,r)=>r),x=d.toUpperCase().split("");return jsxs(Fragment,{children:[jsx("style",{dangerouslySetInnerHTML:{__html:u}}),jsxs(m,{ref:c,className:a("loader-overlay",n),style:{"--primary-color":a$1,"--secondary-color":p},...f,children:[jsx("div",{className:"loader-file-container",children:y.map(e=>jsx("div",{className:"loader-file",style:{background:`linear-gradient(90deg, ${a$1}, #6a6eae)`,animationDelay:`${e*.6}s`}},e))}),jsx("div",{className:"loader-text-flip",children:x.map((e,r)=>jsx("span",{style:{animationDelay:`${r*.3}s`},children:e},r))})]})]})});h.displayName="Loader";export{h as a};//# sourceMappingURL=chunk-4VCCLGED.mjs.map
|
|
85
|
+
//# sourceMappingURL=chunk-4VCCLGED.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/Loader/Loader.tsx"],"names":["STYLES","Loader","forwardRef","as","className","isLoading","text","primaryColor","secondaryColor","props","ref","Component","files","_","i","textArray","jsxs","Fragment","jsx","cn","letter"],"mappings":"sHAMA,IAAMA,CAAAA,CAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA,CAAA,CAwFFC,CAAAA,CAASC,UAAAA,CACpB,CACE,CACE,GAAAC,CAAAA,CACA,SAAA,CAAAC,CAAAA,CACA,SAAA,CAAAC,CAAAA,CAAY,IAAA,CACZ,IAAA,CAAAC,CAAAA,CAAO,UACP,YAAA,CAAAC,GAAAA,CAAe,SAAA,CACf,cAAA,CAAAC,CAAAA,CAAiB,SAAA,CACjB,GAAGC,CACL,EACAC,CAAAA,GACG,CACH,GAAI,CAACL,EAAW,OAAO,IAAA,CAEvB,IAAMM,CAAAA,CAAYR,GAAM,KAAA,CAClBS,CAAAA,CAAQ,KAAA,CAAM,IAAA,CAAK,CAAE,MAAA,CAAQ,CAAE,CAAA,CAAG,CAACC,CAAAA,CAAGC,CAAAA,GAAMA,CAAC,CAAA,CAC7CC,CAAAA,CAAYT,CAAAA,CAAK,WAAA,EAAY,CAAE,MAAM,EAAE,CAAA,CAE7C,OACEU,IAAAA,CAAAC,QAAAA,CAAA,CACE,QAAA,CAAA,CAAAC,GAAAA,CAAC,SAAM,uBAAA,CAAyB,CAAE,MAAA,CAAQlB,CAAO,EAAG,CAAA,CACpDgB,IAAAA,CAACL,CAAAA,CAAA,CACC,IAAKD,CAAAA,CACL,SAAA,CAAWS,CAAAA,CAAG,gBAAA,CAAkBf,CAAS,CAAA,CACzC,KAAA,CAAO,CACJ,kBAA2BG,GAAAA,CAC3B,mBAAA,CAA6BC,CAChC,CAAA,CACC,GAAGC,CAAAA,CAEJ,QAAA,CAAA,CAAAS,GAAAA,CAAC,OAAI,SAAA,CAAU,uBAAA,CACZ,QAAA,CAAAN,CAAAA,CAAM,GAAA,CAAKE,CAAAA,EACVI,GAAAA,CAAC,KAAA,CAAA,CAEC,UAAU,aAAA,CACV,KAAA,CAAO,CACL,UAAA,CAAY,0BAA0BX,GAAY,CAAA,UAAA,CAAA,CAClD,cAAA,CAAgB,CAAA,EAAGO,EAAI,EAAG,CAAA,CAAA,CAC5B,CAAA,CAAA,CALKA,CAMP,CACD,CAAA,CACH,CAAA,CAEAI,GAAAA,CAAC,OAAI,SAAA,CAAU,kBAAA,CACZ,QAAA,CAAAH,CAAAA,CAAU,IAAI,CAACK,CAAAA,CAAQN,CAAAA,GACtBI,GAAAA,CAAC,QAAa,KAAA,CAAO,CAAE,cAAA,CAAgB,CAAA,EAAGJ,CAAAA,CAAI,EAAG,CAAA,CAAA,CAAI,CAAA,CAClD,SAAAM,CAAAA,CAAAA,CADQN,CAEX,CACD,CAAA,CACH,GACF,CAAA,CAAA,CACF,CAEJ,CACF,EAEAb,EAAO,WAAA,CAAc,QAAA","file":"chunk-4VCCLGED.mjs","sourcesContent":["'use client';\n\nimport { forwardRef, ElementType } from 'react';\nimport { cn } from '../../utils/cn';\nimport { LoaderProps } from './types';\n\nconst STYLES = `\n .loader-overlay {\n position: fixed;\n inset: 0;\n z-index: 9999;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n background-color: rgba(107, 114, 128, 0.4);\n backdrop-filter: blur(2px);\n }\n\n .loader-file-container {\n position: relative;\n width: 80%;\n height: 100px;\n overflow: hidden;\n margin-bottom: 0;\n }\n\n .loader-file {\n position: absolute;\n bottom: 25px;\n width: 40px;\n height: 50px;\n border-radius: 4px;\n opacity: 0;\n transform-origin: center;\n animation: loader-flyRight 3s ease-in-out infinite;\n }\n\n .loader-file::before {\n content: \"\";\n position: absolute;\n top: 6px;\n left: 6px;\n width: 28px;\n height: 4px;\n background-color: var(--secondary-color);\n border-radius: 2px;\n }\n\n .loader-file::after {\n content: \"\";\n position: absolute;\n top: 13px;\n left: 6px;\n width: 18px;\n height: 4px;\n background-color: var(--secondary-color);\n border-radius: 2px;\n }\n\n .loader-text-flip {\n display: flex;\n perspective: 700px;\n }\n\n .loader-text-flip span {\n font-size: 30px;\n font-family: sans-serif;\n display: inline-block;\n animation: loader-flip 2.6s infinite linear;\n transform-origin: 0 70%;\n transform-style: preserve-3d;\n color: var(--primary-color);\n }\n\n .loader-text-flip span:nth-child(even) {\n color: var(--secondary-color);\n }\n\n @keyframes loader-flyRight {\n 0% { left: -10%; transform: scale(0); opacity: 0; }\n 50% { left: 45%; transform: scale(1.2); opacity: 1; }\n 100% { left: 100%; transform: scale(0); opacity: 0; }\n }\n\n @keyframes loader-flip {\n 35% { transform: rotateX(360deg); }\n 100% { transform: rotateX(360deg); }\n }\n`;\n\n/**\n * Loader component with flying file animations and flipping text.\n */\nexport const Loader = forwardRef(\n <T extends ElementType = 'div'>(\n {\n as,\n className,\n isLoading = true,\n text = 'LOADING',\n primaryColor = '#3f4379',\n secondaryColor = '#8c91df',\n ...props\n }: LoaderProps<T>,\n ref: any\n ) => {\n if (!isLoading) return null;\n\n const Component = as || 'div';\n const files = Array.from({ length: 6 }, (_, i) => i);\n const textArray = text.toUpperCase().split('');\n\n return (\n <>\n <style dangerouslySetInnerHTML={{ __html: STYLES }} />\n <Component\n ref={ref}\n className={cn('loader-overlay', className)}\n style={{\n ['--primary-color' as any]: primaryColor,\n ['--secondary-color' as any]: secondaryColor,\n }}\n {...props}\n >\n <div className=\"loader-file-container\">\n {files.map((i) => (\n <div\n key={i}\n className=\"loader-file\"\n style={{\n background: `linear-gradient(90deg, ${primaryColor}, #6a6eae)`,\n animationDelay: `${i * 0.6}s`,\n }}\n />\n ))}\n </div>\n\n <div className=\"loader-text-flip\">\n {textArray.map((letter, i) => (\n <span key={i} style={{ animationDelay: `${i * 0.3}s` }}>\n {letter}\n </span>\n ))}\n </div>\n </Component>\n </>\n );\n }\n);\n\nLoader.displayName = 'Loader';\n\nexport default Loader;\n"]}
|