dhanasekar-ui 1.1.3 → 1.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.
Files changed (113) hide show
  1. package/dist/chunk-2BM7TRDS.js +105 -0
  2. package/dist/chunk-2BM7TRDS.js.map +1 -0
  3. package/dist/chunk-2TXYJ7YE.js +201 -0
  4. package/dist/chunk-2TXYJ7YE.js.map +1 -0
  5. package/dist/chunk-3RAQQWLW.js +351 -0
  6. package/dist/chunk-3RAQQWLW.js.map +1 -0
  7. package/dist/chunk-6SVKDKK7.mjs +351 -0
  8. package/dist/chunk-6SVKDKK7.mjs.map +1 -0
  9. package/dist/chunk-BM36E6BY.js +85 -0
  10. package/dist/chunk-BM36E6BY.js.map +1 -0
  11. package/dist/chunk-BQFCZZDK.js +52 -0
  12. package/dist/chunk-BQFCZZDK.js.map +1 -0
  13. package/dist/chunk-CJ2DPBHE.js +93 -0
  14. package/dist/chunk-CJ2DPBHE.js.map +1 -0
  15. package/dist/chunk-EHI64N43.mjs +52 -0
  16. package/dist/chunk-EHI64N43.mjs.map +1 -0
  17. package/dist/chunk-GNMGJBBO.mjs +201 -0
  18. package/dist/chunk-GNMGJBBO.mjs.map +1 -0
  19. package/dist/chunk-H2LTPKLL.js +119 -0
  20. package/dist/chunk-H2LTPKLL.js.map +1 -0
  21. package/dist/chunk-ICWNP5NA.mjs +105 -0
  22. package/dist/chunk-ICWNP5NA.mjs.map +1 -0
  23. package/dist/chunk-RB4QTTZ3.mjs +116 -0
  24. package/dist/chunk-RB4QTTZ3.mjs.map +1 -0
  25. package/dist/chunk-RW2NNPXC.mjs +119 -0
  26. package/dist/chunk-RW2NNPXC.mjs.map +1 -0
  27. package/dist/chunk-SHZ3M7US.mjs +104 -0
  28. package/dist/chunk-SHZ3M7US.mjs.map +1 -0
  29. package/dist/chunk-UBWTBUO2.js +116 -0
  30. package/dist/chunk-UBWTBUO2.js.map +1 -0
  31. package/dist/chunk-YM6W6FK6.mjs +85 -0
  32. package/dist/chunk-YM6W6FK6.mjs.map +1 -0
  33. package/dist/chunk-YRYAP2N7.js +104 -0
  34. package/dist/chunk-YRYAP2N7.js.map +1 -0
  35. package/dist/{chunk-LUU3CQHI.js → chunk-ZEMR63S4.js} +2 -2
  36. package/dist/{chunk-LUU3CQHI.js.map → chunk-ZEMR63S4.js.map} +1 -1
  37. package/dist/chunk-ZUAS66IF.mjs +93 -0
  38. package/dist/chunk-ZUAS66IF.mjs.map +1 -0
  39. package/dist/{chunk-AKPICVLO.mjs → chunk-ZY5AHZYZ.mjs} +2 -2
  40. package/dist/{chunk-AKPICVLO.mjs.map → chunk-ZY5AHZYZ.mjs.map} +1 -1
  41. package/dist/components/Avatar/index.d.mts +65 -2
  42. package/dist/components/Avatar/index.d.ts +65 -2
  43. package/dist/components/Avatar/index.js +1 -1
  44. package/dist/components/Avatar/index.mjs +1 -1
  45. package/dist/components/Badge/index.d.mts +88 -2
  46. package/dist/components/Badge/index.d.ts +88 -2
  47. package/dist/components/Badge/index.js +1 -1
  48. package/dist/components/Badge/index.mjs +1 -1
  49. package/dist/components/Card/index.d.mts +103 -2
  50. package/dist/components/Card/index.d.ts +103 -2
  51. package/dist/components/Card/index.js +1 -1
  52. package/dist/components/Card/index.mjs +1 -1
  53. package/dist/components/Checkbox/index.d.mts +109 -6
  54. package/dist/components/Checkbox/index.d.ts +109 -6
  55. package/dist/components/Checkbox/index.js +1 -1
  56. package/dist/components/Checkbox/index.mjs +1 -1
  57. package/dist/components/ConfirmationDialog/index.d.mts +30 -0
  58. package/dist/components/ConfirmationDialog/index.d.ts +30 -0
  59. package/dist/components/ConfirmationDialog/index.js +2 -0
  60. package/dist/components/ConfirmationDialog/index.js.map +1 -0
  61. package/dist/components/ConfirmationDialog/index.mjs +2 -0
  62. package/dist/components/ConfirmationDialog/index.mjs.map +1 -0
  63. package/dist/components/DateFilter/index.d.mts +26 -0
  64. package/dist/components/DateFilter/index.d.ts +26 -0
  65. package/dist/components/DateFilter/index.js +2 -0
  66. package/dist/components/DateFilter/index.js.map +1 -0
  67. package/dist/components/DateFilter/index.mjs +2 -0
  68. package/dist/components/DateFilter/index.mjs.map +1 -0
  69. package/dist/components/FileUploadField/index.js +1 -1
  70. package/dist/components/FileUploadField/index.mjs +1 -1
  71. package/dist/components/FormLayout/index.d.mts +50 -0
  72. package/dist/components/FormLayout/index.d.ts +50 -0
  73. package/dist/components/FormLayout/index.js +2 -0
  74. package/dist/components/FormLayout/index.js.map +1 -0
  75. package/dist/components/FormLayout/index.mjs +2 -0
  76. package/dist/components/FormLayout/index.mjs.map +1 -0
  77. package/dist/components/Modal/index.d.mts +23 -7
  78. package/dist/components/Modal/index.d.ts +23 -7
  79. package/dist/components/Modal/index.js +1 -1
  80. package/dist/components/Modal/index.mjs +1 -1
  81. package/dist/components/Tooltip/index.d.mts +30 -7
  82. package/dist/components/Tooltip/index.d.ts +30 -7
  83. package/dist/components/Tooltip/index.js +1 -1
  84. package/dist/components/Tooltip/index.mjs +1 -1
  85. package/dist/index.d.mts +10 -6
  86. package/dist/index.d.ts +10 -6
  87. package/dist/index.js +1 -1
  88. package/dist/index.mjs +1 -1
  89. package/package.json +13 -1
  90. package/dist/chunk-6CTAGKRH.js +0 -2
  91. package/dist/chunk-6CTAGKRH.js.map +0 -1
  92. package/dist/chunk-6S5MGYMQ.mjs +0 -2
  93. package/dist/chunk-6S5MGYMQ.mjs.map +0 -1
  94. package/dist/chunk-B3QF3KQL.js +0 -2
  95. package/dist/chunk-B3QF3KQL.js.map +0 -1
  96. package/dist/chunk-CBHX2QZA.mjs +0 -2
  97. package/dist/chunk-CBHX2QZA.mjs.map +0 -1
  98. package/dist/chunk-DVU5JMBP.js +0 -2
  99. package/dist/chunk-DVU5JMBP.js.map +0 -1
  100. package/dist/chunk-HNKQZLUA.mjs +0 -2
  101. package/dist/chunk-HNKQZLUA.mjs.map +0 -1
  102. package/dist/chunk-MYC7PW6C.js +0 -2
  103. package/dist/chunk-MYC7PW6C.js.map +0 -1
  104. package/dist/chunk-OTDTXBFF.mjs +0 -2
  105. package/dist/chunk-OTDTXBFF.mjs.map +0 -1
  106. package/dist/chunk-RRZTNQ5T.mjs +0 -2
  107. package/dist/chunk-RRZTNQ5T.mjs.map +0 -1
  108. package/dist/chunk-VIUZPAJZ.js +0 -2
  109. package/dist/chunk-VIUZPAJZ.js.map +0 -1
  110. package/dist/chunk-WGPJEQGU.mjs +0 -2
  111. package/dist/chunk-WGPJEQGU.mjs.map +0 -1
  112. package/dist/chunk-X7EUJD7E.js +0 -2
  113. package/dist/chunk-X7EUJD7E.js.map +0 -1
@@ -0,0 +1,105 @@
1
+ 'use strict';var chunkDDGBDWFC_js=require('./chunk-DDGBDWFC.js'),react=require('react'),jsxRuntime=require('react/jsx-runtime');var y=`
2
+ .conf-overlay {
3
+ position: fixed;
4
+ inset: 0;
5
+ z-index: 9999;
6
+ display: flex;
7
+ align-items: center;
8
+ justify-content: center;
9
+ background-color: rgba(0, 0, 0, 0.4);
10
+ backdrop-filter: blur(4px);
11
+ animation: conf-fadeIn 0.2s ease-out;
12
+ }
13
+
14
+ .conf-dialog {
15
+ background-color: #ffffff;
16
+ border-radius: 12px;
17
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
18
+ width: 100%;
19
+ max-width: 400px;
20
+ margin: 16px;
21
+ overflow: hidden;
22
+ animation: conf-zoomIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
23
+ }
24
+
25
+ .conf-content {
26
+ padding: 32px 24px;
27
+ display: flex;
28
+ flex-direction: column;
29
+ align-items: center;
30
+ text-align: center;
31
+ }
32
+
33
+ .conf-icon {
34
+ font-size: 80px;
35
+ margin-bottom: 16px;
36
+ line-height: 1;
37
+ }
38
+
39
+ .conf-title {
40
+ font-size: 20px;
41
+ font-weight: 600;
42
+ color: #1e293b;
43
+ margin: 0 0 8px 0;
44
+ line-height: 1.4;
45
+ }
46
+
47
+ .conf-description {
48
+ font-size: 15px;
49
+ color: #64748b;
50
+ margin: 0;
51
+ line-height: 1.5;
52
+ }
53
+
54
+ .conf-actions {
55
+ padding: 0 24px 24px 24px;
56
+ display: flex;
57
+ justify-content: center;
58
+ gap: 12px;
59
+ }
60
+
61
+ .conf-btn {
62
+ padding: 10px 24px;
63
+ border-radius: 8px;
64
+ font-size: 14px;
65
+ font-weight: 600;
66
+ cursor: pointer;
67
+ transition: all 0.2s;
68
+ border: none;
69
+ min-width: 100px;
70
+ }
71
+
72
+ .conf-btn-confirm {
73
+ background-color: #3498db;
74
+ color: white;
75
+ }
76
+
77
+ .conf-btn-confirm:hover {
78
+ background-color: #2980b9;
79
+ transform: translateY(-1px);
80
+ box-shadow: 0 4px 6px -1px rgba(52, 152, 219, 0.3);
81
+ }
82
+
83
+ .conf-btn-cancel {
84
+ background-color: #f1f5f9;
85
+ color: #475569;
86
+ border: 1px solid #e2e8f0;
87
+ }
88
+
89
+ .conf-btn-cancel:hover {
90
+ background-color: #e2e8f0;
91
+ color: #1e293b;
92
+ }
93
+
94
+ @keyframes conf-fadeIn {
95
+ from { opacity: 0; }
96
+ to { opacity: 1; }
97
+ }
98
+
99
+ @keyframes conf-zoomIn {
100
+ from { opacity: 0; transform: scale(0.95); }
101
+ to { opacity: 1; transform: scale(1); }
102
+ }
103
+ `,N=({open:l,setOpen:i,title:f="Are you sure?",description:s="This action cannot be undone.",onConfirm:d,onCancel:c,confirmText:p="Yes",cancelText:m="No",icon:b="ti ti-alert-circle",iconColor:x="#3498db",className:g})=>{react.useEffect(()=>{let n="tabler-icons-cdn";if(!document.getElementById(n)){let t=document.createElement("link");t.id=n,t.rel="stylesheet",t.href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/dist/tabler-icons.min.css",document.head.appendChild(t);}},[]);let u=()=>{d(),i(false);},r=()=>{c&&c(),i(false);};return l?jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx("style",{dangerouslySetInnerHTML:{__html:y}}),jsxRuntime.jsx("div",{className:"conf-overlay",onClick:r,children:jsxRuntime.jsxs("div",{className:chunkDDGBDWFC_js.a("conf-dialog",g),onClick:n=>n.stopPropagation(),children:[jsxRuntime.jsxs("div",{className:"conf-content",children:[jsxRuntime.jsx("i",{className:b,style:{color:x,fontSize:"80px",marginBottom:"16px"}}),jsxRuntime.jsx("h3",{className:"conf-title",children:f}),jsxRuntime.jsx("p",{className:"conf-description",children:s})]}),jsxRuntime.jsxs("div",{className:"conf-actions",children:[jsxRuntime.jsx("button",{type:"button",className:"conf-btn conf-btn-confirm",onClick:u,children:p}),jsxRuntime.jsx("button",{type:"button",className:"conf-btn conf-btn-cancel",onClick:r,children:m})]})]})})]}):null};
104
+ exports.a=N;//# sourceMappingURL=chunk-2BM7TRDS.js.map
105
+ //# sourceMappingURL=chunk-2BM7TRDS.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/components/ConfirmationDialog/ConfirmationDialog.tsx"],"names":["STYLES","ConfirmationDialog","open","setOpen","title","description","onConfirm","onCancel","confirmText","cancelText","icon","iconColor","className","useEffect","cdnId","link","handleConfirm","handleCancel","jsxs","Fragment","jsx","cn","e"],"mappings":"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","file":"chunk-2BM7TRDS.js","sourcesContent":["'use client';\n\nimport React, { useEffect } from 'react';\nimport { cn } from '../../utils/cn';\nimport { ConfirmationDialogProps } from './types';\n\nconst STYLES = `\n .conf-overlay {\n position: fixed;\n inset: 0;\n z-index: 9999;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: rgba(0, 0, 0, 0.4);\n backdrop-filter: blur(4px);\n animation: conf-fadeIn 0.2s ease-out;\n }\n\n .conf-dialog {\n background-color: #ffffff;\n border-radius: 12px;\n box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);\n width: 100%;\n max-width: 400px;\n margin: 16px;\n overflow: hidden;\n animation: conf-zoomIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);\n }\n\n .conf-content {\n padding: 32px 24px;\n display: flex;\n flex-direction: column;\n align-items: center;\n text-align: center;\n }\n\n .conf-icon {\n font-size: 80px;\n margin-bottom: 16px;\n line-height: 1;\n }\n\n .conf-title {\n font-size: 20px;\n font-weight: 600;\n color: #1e293b;\n margin: 0 0 8px 0;\n line-height: 1.4;\n }\n\n .conf-description {\n font-size: 15px;\n color: #64748b;\n margin: 0;\n line-height: 1.5;\n }\n\n .conf-actions {\n padding: 0 24px 24px 24px;\n display: flex;\n justify-content: center;\n gap: 12px;\n }\n\n .conf-btn {\n padding: 10px 24px;\n border-radius: 8px;\n font-size: 14px;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.2s;\n border: none;\n min-width: 100px;\n }\n\n .conf-btn-confirm {\n background-color: #3498db;\n color: white;\n }\n\n .conf-btn-confirm:hover {\n background-color: #2980b9;\n transform: translateY(-1px);\n box-shadow: 0 4px 6px -1px rgba(52, 152, 219, 0.3);\n }\n\n .conf-btn-cancel {\n background-color: #f1f5f9;\n color: #475569;\n border: 1px solid #e2e8f0;\n }\n\n .conf-btn-cancel:hover {\n background-color: #e2e8f0;\n color: #1e293b;\n }\n\n @keyframes conf-fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n }\n\n @keyframes conf-zoomIn {\n from { opacity: 0; transform: scale(0.95); }\n to { opacity: 1; transform: scale(1); }\n }\n`;\n\nexport const ConfirmationDialog: React.FC<ConfirmationDialogProps> = ({\n open,\n setOpen,\n title = 'Are you sure?',\n description = 'This action cannot be undone.',\n onConfirm,\n onCancel,\n confirmText = 'Yes',\n cancelText = 'No',\n icon = 'ti ti-alert-circle',\n iconColor = '#3498db',\n className,\n}) => {\n // Inject Tabler Icons if not present\n useEffect(() => {\n const cdnId = 'tabler-icons-cdn';\n if (!document.getElementById(cdnId)) {\n const link = document.createElement('link');\n link.id = cdnId;\n link.rel = 'stylesheet';\n link.href = 'https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/dist/tabler-icons.min.css';\n document.head.appendChild(link);\n }\n }, []);\n\n const handleConfirm = () => {\n onConfirm();\n setOpen(false);\n };\n\n const handleCancel = () => {\n if (onCancel) onCancel();\n setOpen(false);\n };\n\n if (!open) return null;\n\n return (\n <>\n <style dangerouslySetInnerHTML={{ __html: STYLES }} />\n <div className=\"conf-overlay\" onClick={handleCancel}>\n <div \n className={cn('conf-dialog', className)} \n onClick={(e) => e.stopPropagation()}\n >\n <div className=\"conf-content\">\n <i \n className={icon} \n style={{ color: iconColor, fontSize: '80px', marginBottom: '16px' }} \n />\n <h3 className=\"conf-title\">{title}</h3>\n <p className=\"conf-description\">{description}</p>\n </div>\n <div className=\"conf-actions\">\n <button \n type=\"button\" \n className=\"conf-btn conf-btn-confirm\" \n onClick={handleConfirm}\n >\n {confirmText}\n </button>\n <button \n type=\"button\" \n className=\"conf-btn conf-btn-cancel\" \n onClick={handleCancel}\n >\n {cancelText}\n </button>\n </div>\n </div>\n </div>\n </>\n );\n};\n\nexport default ConfirmationDialog;\n"]}
@@ -0,0 +1,201 @@
1
+ 'use strict';var react=require('react'),jsxRuntime=require('react/jsx-runtime');var N=`
2
+ :root {
3
+ --df-primary: #3b82f6;
4
+ --df-primary-hover: #2563eb;
5
+ --df-text-main: #1e293b;
6
+ --df-text-secondary: #64748b;
7
+ --df-bg-main: #ffffff;
8
+ --df-bg-glass: rgba(255, 255, 255, 0.85);
9
+ --df-border: #e2e8f0;
10
+ --df-border-focus: #3b82f6;
11
+ --df-radius-lg: 12px;
12
+ --df-radius-md: 8px;
13
+ --df-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
14
+ }
15
+
16
+ .df-backdrop {
17
+ position: fixed;
18
+ top: 0;
19
+ left: 0;
20
+ right: 0;
21
+ bottom: 0;
22
+ background: rgba(15, 23, 42, 0.4);
23
+ backdrop-filter: blur(4px);
24
+ display: flex;
25
+ align-items: center;
26
+ justify-content: center;
27
+ z-index: 1000;
28
+ opacity: 0;
29
+ visibility: hidden;
30
+ transition: opacity 0.3s ease, visibility 0.3s ease;
31
+ }
32
+
33
+ .df-backdrop.df-open {
34
+ opacity: 1;
35
+ visibility: visible;
36
+ }
37
+
38
+ .df-dialog {
39
+ background: var(--df-bg-glass);
40
+ backdrop-filter: blur(16px);
41
+ width: 100%;
42
+ max-width: 400px;
43
+ border-radius: var(--df-radius-lg);
44
+ box-shadow: var(--df-shadow);
45
+ display: flex;
46
+ flex-direction: column;
47
+ transform: scale(0.95) translateY(10px);
48
+ opacity: 0;
49
+ transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
50
+ font-family: 'Inter', system-ui, -apple-system, sans-serif;
51
+ border: 1px solid rgba(255, 255, 255, 0.5);
52
+ margin: 16px;
53
+ }
54
+
55
+ .df-backdrop.df-open .df-dialog {
56
+ transform: scale(1) translateY(0);
57
+ opacity: 1;
58
+ }
59
+
60
+ .df-header {
61
+ padding: 20px 24px 16px;
62
+ border-bottom: 1px solid var(--df-border);
63
+ }
64
+
65
+ .df-title {
66
+ margin: 0;
67
+ font-size: 18px;
68
+ font-weight: 600;
69
+ color: var(--df-primary);
70
+ }
71
+
72
+ .df-content {
73
+ padding: 24px;
74
+ display: flex;
75
+ flex-direction: column;
76
+ gap: 20px;
77
+ }
78
+
79
+ .df-form-group {
80
+ display: flex;
81
+ flex-direction: column;
82
+ gap: 8px;
83
+ position: relative;
84
+ }
85
+
86
+ .df-label {
87
+ font-size: 13px;
88
+ font-weight: 500;
89
+ color: var(--df-text-secondary);
90
+ }
91
+
92
+ .df-input {
93
+ width: 100%;
94
+ padding: 10px 14px;
95
+ font-size: 14px;
96
+ color: var(--df-text-main);
97
+ background: var(--df-bg-main);
98
+ border: 1px solid var(--df-border);
99
+ border-radius: var(--df-radius-md);
100
+ outline: none;
101
+ transition: all 0.2s ease;
102
+ box-sizing: border-box;
103
+ appearance: none;
104
+ font-family: inherit;
105
+ }
106
+
107
+ .df-input:focus {
108
+ border-color: var(--df-border-focus);
109
+ box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
110
+ }
111
+
112
+ /* Custom Select Wrapper for arrow */
113
+ .df-select-wrapper {
114
+ position: relative;
115
+ width: 100%;
116
+ }
117
+
118
+ .df-select-wrapper::after {
119
+ content: '';
120
+ position: absolute;
121
+ right: 14px;
122
+ top: 50%;
123
+ transform: translateY(-50%);
124
+ width: 0;
125
+ height: 0;
126
+ border-left: 5px solid transparent;
127
+ border-right: 5px solid transparent;
128
+ border-top: 5px solid var(--df-text-secondary);
129
+ pointer-events: none;
130
+ }
131
+
132
+ .df-select {
133
+ padding-right: 32px;
134
+ cursor: pointer;
135
+ }
136
+
137
+ .df-custom-range {
138
+ display: flex;
139
+ gap: 16px;
140
+ animation: dfSlideDown 0.3s ease-out;
141
+ }
142
+
143
+ .df-custom-range .df-form-group {
144
+ flex: 1;
145
+ }
146
+
147
+ @keyframes dfSlideDown {
148
+ from { opacity: 0; transform: translateY(-10px); }
149
+ to { opacity: 1; transform: translateY(0); }
150
+ }
151
+
152
+ .df-footer {
153
+ padding: 16px 24px 24px;
154
+ display: flex;
155
+ justify-content: flex-end;
156
+ gap: 12px;
157
+ }
158
+
159
+ .df-btn {
160
+ padding: 8px 16px;
161
+ font-size: 14px;
162
+ font-weight: 600;
163
+ border-radius: var(--df-radius-md);
164
+ cursor: pointer;
165
+ transition: all 0.2s ease;
166
+ border: 1px solid transparent;
167
+ font-family: inherit;
168
+ }
169
+
170
+ .df-btn-cancel {
171
+ background: transparent;
172
+ color: var(--df-text-secondary);
173
+ }
174
+
175
+ .df-btn-cancel:hover {
176
+ background: rgba(0, 0, 0, 0.04);
177
+ color: var(--df-text-main);
178
+ }
179
+
180
+ .df-btn-apply {
181
+ background: var(--df-primary);
182
+ color: white;
183
+ box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
184
+ }
185
+
186
+ .df-btn-apply:hover {
187
+ background: var(--df-primary-hover);
188
+ transform: translateY(-1px);
189
+ box-shadow: 0 4px 6px rgba(59, 130, 246, 0.4);
190
+ }
191
+
192
+ .df-btn-apply:active {
193
+ transform: translateY(0);
194
+ }
195
+
196
+ /* Prevent background scrolling when modal is open */
197
+ body.df-modal-open {
198
+ overflow: hidden;
199
+ }
200
+ `,D=["Today","Yesterday","Last 7 Days","Last 30 Days","This Month","Last Month","Custom"],C=({open:r,title:x="Date Filter",options:g=D,initialValue:t,onClose:d,onApply:u})=>{let[s,f]=react.useState(t?.option||"Today"),[n,p]=react.useState(t?.from||""),[c,b]=react.useState(t?.to||""),m=react.useRef(null);react.useEffect(()=>{r&&t&&(f(t.option),p(t.from||""),b(t.to||""));},[r,t]),react.useEffect(()=>(r?document.body.classList.add("df-modal-open"):document.body.classList.remove("df-modal-open"),()=>document.body.classList.remove("df-modal-open")),[r]);let v=e=>{e.target===m.current&&d();};react.useEffect(()=>{let e=w=>{w.key==="Escape"&&r&&d();};return window.addEventListener("keydown",e),()=>window.removeEventListener("keydown",e)},[r,d]);let y=()=>{u({option:s,...s==="Custom"?{from:n,to:c}:{}});},h=new Date().toISOString().split("T")[0];return jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx("style",{dangerouslySetInnerHTML:{__html:N}}),jsxRuntime.jsx("div",{ref:m,className:`df-backdrop ${r?"df-open":""}`,onClick:v,role:"dialog","aria-modal":"true","aria-labelledby":"df-dialog-title",children:jsxRuntime.jsxs("div",{className:"df-dialog",children:[jsxRuntime.jsx("div",{className:"df-header",children:jsxRuntime.jsx("h2",{id:"df-dialog-title",className:"df-title",children:x})}),jsxRuntime.jsxs("div",{className:"df-content",children:[jsxRuntime.jsxs("div",{className:"df-form-group",children:[jsxRuntime.jsx("label",{className:"df-label",children:"Select Range"}),jsxRuntime.jsx("div",{className:"df-select-wrapper",children:jsxRuntime.jsx("select",{className:"df-input df-select",value:s,onChange:e=>f(e.target.value),children:g.map(e=>jsxRuntime.jsx("option",{value:e,children:e},e))})})]}),s==="Custom"&&jsxRuntime.jsxs("div",{className:"df-custom-range",children:[jsxRuntime.jsxs("div",{className:"df-form-group",children:[jsxRuntime.jsx("label",{className:"df-label",children:"From Date"}),jsxRuntime.jsx("input",{type:"date",className:"df-input",value:n,onChange:e=>p(e.target.value),max:h})]}),jsxRuntime.jsxs("div",{className:"df-form-group",children:[jsxRuntime.jsx("label",{className:"df-label",children:"To Date"}),jsxRuntime.jsx("input",{type:"date",className:"df-input",value:c,onChange:e=>b(e.target.value),min:n||void 0})]})]})]}),jsxRuntime.jsxs("div",{className:"df-footer",children:[jsxRuntime.jsx("button",{className:"df-btn df-btn-cancel",onClick:d,children:"Cancel"}),jsxRuntime.jsx("button",{className:"df-btn df-btn-apply",onClick:y,children:"Apply"})]})]})})]})};exports.a=C;//# sourceMappingURL=chunk-2TXYJ7YE.js.map
201
+ //# sourceMappingURL=chunk-2TXYJ7YE.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/components/DateFilter/DateFilter.tsx"],"names":["STYLES","DEFAULT_OPTIONS","DateFilter","open","title","options","initialValue","onClose","onApply","option","setOption","useState","from","setFrom","to","setTo","backdropRef","useRef","useEffect","handleBackdropClick","handleKeyDown","e","handleApply","todayStr","jsxs","Fragment","jsx","opt"],"mappings":"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","file":"chunk-2TXYJ7YE.js","sourcesContent":["'use client';\n\nimport React, { useState, useEffect, useRef } from 'react';\nimport { DateFilterProps, DateFilterValue } from './DateFilter.types';\n\nconst STYLES = `\n :root {\n --df-primary: #3b82f6;\n --df-primary-hover: #2563eb;\n --df-text-main: #1e293b;\n --df-text-secondary: #64748b;\n --df-bg-main: #ffffff;\n --df-bg-glass: rgba(255, 255, 255, 0.85);\n --df-border: #e2e8f0;\n --df-border-focus: #3b82f6;\n --df-radius-lg: 12px;\n --df-radius-md: 8px;\n --df-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);\n }\n\n .df-backdrop {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(15, 23, 42, 0.4);\n backdrop-filter: blur(4px);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1000;\n opacity: 0;\n visibility: hidden;\n transition: opacity 0.3s ease, visibility 0.3s ease;\n }\n\n .df-backdrop.df-open {\n opacity: 1;\n visibility: visible;\n }\n\n .df-dialog {\n background: var(--df-bg-glass);\n backdrop-filter: blur(16px);\n width: 100%;\n max-width: 400px;\n border-radius: var(--df-radius-lg);\n box-shadow: var(--df-shadow);\n display: flex;\n flex-direction: column;\n transform: scale(0.95) translateY(10px);\n opacity: 0;\n transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;\n font-family: 'Inter', system-ui, -apple-system, sans-serif;\n border: 1px solid rgba(255, 255, 255, 0.5);\n margin: 16px;\n }\n\n .df-backdrop.df-open .df-dialog {\n transform: scale(1) translateY(0);\n opacity: 1;\n }\n\n .df-header {\n padding: 20px 24px 16px;\n border-bottom: 1px solid var(--df-border);\n }\n\n .df-title {\n margin: 0;\n font-size: 18px;\n font-weight: 600;\n color: var(--df-primary);\n }\n\n .df-content {\n padding: 24px;\n display: flex;\n flex-direction: column;\n gap: 20px;\n }\n\n .df-form-group {\n display: flex;\n flex-direction: column;\n gap: 8px;\n position: relative;\n }\n\n .df-label {\n font-size: 13px;\n font-weight: 500;\n color: var(--df-text-secondary);\n }\n\n .df-input {\n width: 100%;\n padding: 10px 14px;\n font-size: 14px;\n color: var(--df-text-main);\n background: var(--df-bg-main);\n border: 1px solid var(--df-border);\n border-radius: var(--df-radius-md);\n outline: none;\n transition: all 0.2s ease;\n box-sizing: border-box;\n appearance: none;\n font-family: inherit;\n }\n\n .df-input:focus {\n border-color: var(--df-border-focus);\n box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);\n }\n\n /* Custom Select Wrapper for arrow */\n .df-select-wrapper {\n position: relative;\n width: 100%;\n }\n\n .df-select-wrapper::after {\n content: '';\n position: absolute;\n right: 14px;\n top: 50%;\n transform: translateY(-50%);\n width: 0;\n height: 0;\n border-left: 5px solid transparent;\n border-right: 5px solid transparent;\n border-top: 5px solid var(--df-text-secondary);\n pointer-events: none;\n }\n\n .df-select {\n padding-right: 32px;\n cursor: pointer;\n }\n\n .df-custom-range {\n display: flex;\n gap: 16px;\n animation: dfSlideDown 0.3s ease-out;\n }\n\n .df-custom-range .df-form-group {\n flex: 1;\n }\n\n @keyframes dfSlideDown {\n from { opacity: 0; transform: translateY(-10px); }\n to { opacity: 1; transform: translateY(0); }\n }\n\n .df-footer {\n padding: 16px 24px 24px;\n display: flex;\n justify-content: flex-end;\n gap: 12px;\n }\n\n .df-btn {\n padding: 8px 16px;\n font-size: 14px;\n font-weight: 600;\n border-radius: var(--df-radius-md);\n cursor: pointer;\n transition: all 0.2s ease;\n border: 1px solid transparent;\n font-family: inherit;\n }\n\n .df-btn-cancel {\n background: transparent;\n color: var(--df-text-secondary);\n }\n\n .df-btn-cancel:hover {\n background: rgba(0, 0, 0, 0.04);\n color: var(--df-text-main);\n }\n\n .df-btn-apply {\n background: var(--df-primary);\n color: white;\n box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);\n }\n\n .df-btn-apply:hover {\n background: var(--df-primary-hover);\n transform: translateY(-1px);\n box-shadow: 0 4px 6px rgba(59, 130, 246, 0.4);\n }\n\n .df-btn-apply:active {\n transform: translateY(0);\n }\n \n /* Prevent background scrolling when modal is open */\n body.df-modal-open {\n overflow: hidden;\n }\n`;\n\nconst DEFAULT_OPTIONS = [\n 'Today',\n 'Yesterday',\n 'Last 7 Days',\n 'Last 30 Days',\n 'This Month',\n 'Last Month',\n 'Custom'\n];\n\nexport const DateFilter = ({\n open,\n title = 'Date Filter',\n options = DEFAULT_OPTIONS,\n initialValue,\n onClose,\n onApply\n}: DateFilterProps) => {\n const [option, setOption] = useState<string>(initialValue?.option || 'Today');\n const [from, setFrom] = useState<string>(initialValue?.from || '');\n const [to, setTo] = useState<string>(initialValue?.to || '');\n \n const backdropRef = useRef<HTMLDivElement>(null);\n\n // Sync state with prop if it changes\n useEffect(() => {\n if (open && initialValue) {\n setOption(initialValue.option);\n setFrom(initialValue.from || '');\n setTo(initialValue.to || '');\n }\n }, [open, initialValue]);\n\n // Handle body scroll locking\n useEffect(() => {\n if (open) {\n document.body.classList.add('df-modal-open');\n } else {\n document.body.classList.remove('df-modal-open');\n }\n return () => document.body.classList.remove('df-modal-open');\n }, [open]);\n\n // Handle click outside\n const handleBackdropClick = (e: React.MouseEvent) => {\n if (e.target === backdropRef.current) {\n onClose();\n }\n };\n\n // Handle Escape key\n useEffect(() => {\n const handleKeyDown = (e: KeyboardEvent) => {\n if (e.key === 'Escape' && open) {\n onClose();\n }\n };\n window.addEventListener('keydown', handleKeyDown);\n return () => window.removeEventListener('keydown', handleKeyDown);\n }, [open, onClose]);\n\n const handleApply = () => {\n onApply({\n option,\n ...(option === 'Custom' ? { from, to } : {})\n });\n };\n\n const todayStr = new Date().toISOString().split('T')[0];\n\n return (\n <>\n <style dangerouslySetInnerHTML={{ __html: STYLES }} />\n <div \n ref={backdropRef}\n className={`df-backdrop ${open ? 'df-open' : ''}`}\n onClick={handleBackdropClick}\n role=\"dialog\"\n aria-modal=\"true\"\n aria-labelledby=\"df-dialog-title\"\n >\n <div className=\"df-dialog\">\n <div className=\"df-header\">\n <h2 id=\"df-dialog-title\" className=\"df-title\">{title}</h2>\n </div>\n \n <div className=\"df-content\">\n <div className=\"df-form-group\">\n <label className=\"df-label\">Select Range</label>\n <div className=\"df-select-wrapper\">\n <select \n className=\"df-input df-select\"\n value={option}\n onChange={(e) => setOption(e.target.value)}\n >\n {options.map((opt) => (\n <option key={opt} value={opt}>{opt}</option>\n ))}\n </select>\n </div>\n </div>\n\n {option === 'Custom' && (\n <div className=\"df-custom-range\">\n <div className=\"df-form-group\">\n <label className=\"df-label\">From Date</label>\n <input \n type=\"date\"\n className=\"df-input\"\n value={from}\n onChange={(e) => setFrom(e.target.value)}\n max={todayStr}\n />\n </div>\n <div className=\"df-form-group\">\n <label className=\"df-label\">To Date</label>\n <input \n type=\"date\"\n className=\"df-input\"\n value={to}\n onChange={(e) => setTo(e.target.value)}\n min={from || undefined}\n />\n </div>\n </div>\n )}\n </div>\n\n <div className=\"df-footer\">\n <button className=\"df-btn df-btn-cancel\" onClick={onClose}>\n Cancel\n </button>\n <button className=\"df-btn df-btn-apply\" onClick={handleApply}>\n Apply\n </button>\n </div>\n </div>\n </div>\n </>\n );\n};\n"]}