@apexcura/ui-components 0.0.12-Beta47 → 0.0.12-Beta49

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/index.css ADDED
@@ -0,0 +1,461 @@
1
+ /* src/Styles/index.css */
2
+ *,
3
+ ::before,
4
+ ::after {
5
+ box-sizing: border-box;
6
+ border-width: 0;
7
+ border-style: solid;
8
+ border-color: #e5e7eb;
9
+ }
10
+ ::before,
11
+ ::after {
12
+ --tw-content: "";
13
+ }
14
+ html,
15
+ :host {
16
+ line-height: 1.5;
17
+ -webkit-text-size-adjust: 100%;
18
+ -moz-tab-size: 4;
19
+ -o-tab-size: 4;
20
+ tab-size: 4;
21
+ font-family:
22
+ ui-sans-serif,
23
+ system-ui,
24
+ sans-serif,
25
+ "Apple Color Emoji",
26
+ "Segoe UI Emoji",
27
+ "Segoe UI Symbol",
28
+ "Noto Color Emoji";
29
+ font-feature-settings: normal;
30
+ font-variation-settings: normal;
31
+ -webkit-tap-highlight-color: transparent;
32
+ }
33
+ body {
34
+ margin: 0;
35
+ line-height: inherit;
36
+ }
37
+ hr {
38
+ height: 0;
39
+ color: inherit;
40
+ border-top-width: 1px;
41
+ }
42
+ abbr:where([title]) {
43
+ -webkit-text-decoration: underline dotted;
44
+ text-decoration: underline dotted;
45
+ }
46
+ h1,
47
+ h2,
48
+ h3,
49
+ h4,
50
+ h5,
51
+ h6 {
52
+ font-size: inherit;
53
+ font-weight: inherit;
54
+ }
55
+ a {
56
+ color: inherit;
57
+ text-decoration: inherit;
58
+ }
59
+ b,
60
+ strong {
61
+ font-weight: bolder;
62
+ }
63
+ code,
64
+ kbd,
65
+ samp,
66
+ pre {
67
+ font-family:
68
+ ui-monospace,
69
+ SFMono-Regular,
70
+ Menlo,
71
+ Monaco,
72
+ Consolas,
73
+ "Liberation Mono",
74
+ "Courier New",
75
+ monospace;
76
+ font-feature-settings: normal;
77
+ font-variation-settings: normal;
78
+ font-size: 1em;
79
+ }
80
+ small {
81
+ font-size: 80%;
82
+ }
83
+ sub,
84
+ sup {
85
+ font-size: 75%;
86
+ line-height: 0;
87
+ position: relative;
88
+ vertical-align: baseline;
89
+ }
90
+ sub {
91
+ bottom: -0.25em;
92
+ }
93
+ sup {
94
+ top: -0.5em;
95
+ }
96
+ table {
97
+ text-indent: 0;
98
+ border-color: inherit;
99
+ border-collapse: collapse;
100
+ }
101
+ button,
102
+ input,
103
+ optgroup,
104
+ select,
105
+ textarea {
106
+ font-family: inherit;
107
+ font-feature-settings: inherit;
108
+ font-variation-settings: inherit;
109
+ font-size: 100%;
110
+ font-weight: inherit;
111
+ line-height: inherit;
112
+ letter-spacing: inherit;
113
+ color: inherit;
114
+ margin: 0;
115
+ padding: 0;
116
+ }
117
+ button,
118
+ select {
119
+ text-transform: none;
120
+ }
121
+ button,
122
+ input:where([type=button]),
123
+ input:where([type=reset]),
124
+ input:where([type=submit]) {
125
+ -webkit-appearance: button;
126
+ background-color: transparent;
127
+ background-image: none;
128
+ }
129
+ :-moz-focusring {
130
+ outline: auto;
131
+ }
132
+ :-moz-ui-invalid {
133
+ box-shadow: none;
134
+ }
135
+ progress {
136
+ vertical-align: baseline;
137
+ }
138
+ ::-webkit-inner-spin-button,
139
+ ::-webkit-outer-spin-button {
140
+ height: auto;
141
+ }
142
+ [type=search] {
143
+ -webkit-appearance: textfield;
144
+ outline-offset: -2px;
145
+ }
146
+ ::-webkit-search-decoration {
147
+ -webkit-appearance: none;
148
+ }
149
+ ::-webkit-file-upload-button {
150
+ -webkit-appearance: button;
151
+ font: inherit;
152
+ }
153
+ summary {
154
+ display: list-item;
155
+ }
156
+ blockquote,
157
+ dl,
158
+ dd,
159
+ h1,
160
+ h2,
161
+ h3,
162
+ h4,
163
+ h5,
164
+ h6,
165
+ hr,
166
+ figure,
167
+ p,
168
+ pre {
169
+ margin: 0;
170
+ }
171
+ fieldset {
172
+ margin: 0;
173
+ padding: 0;
174
+ }
175
+ legend {
176
+ padding: 0;
177
+ }
178
+ ol,
179
+ ul,
180
+ menu {
181
+ list-style: none;
182
+ margin: 0;
183
+ padding: 0;
184
+ }
185
+ dialog {
186
+ padding: 0;
187
+ }
188
+ textarea {
189
+ resize: vertical;
190
+ }
191
+ input::-moz-placeholder,
192
+ textarea::-moz-placeholder {
193
+ opacity: 1;
194
+ color: #9ca3af;
195
+ }
196
+ input::placeholder,
197
+ textarea::placeholder {
198
+ opacity: 1;
199
+ color: #9ca3af;
200
+ }
201
+ button,
202
+ [role=button] {
203
+ cursor: pointer;
204
+ }
205
+ :disabled {
206
+ cursor: default;
207
+ }
208
+ img,
209
+ svg,
210
+ video,
211
+ canvas,
212
+ audio,
213
+ iframe,
214
+ embed,
215
+ object {
216
+ display: block;
217
+ vertical-align: middle;
218
+ }
219
+ img,
220
+ video {
221
+ max-width: 100%;
222
+ height: auto;
223
+ }
224
+ [hidden] {
225
+ display: none;
226
+ }
227
+ *,
228
+ ::before,
229
+ ::after {
230
+ --tw-border-spacing-x: 0;
231
+ --tw-border-spacing-y: 0;
232
+ --tw-translate-x: 0;
233
+ --tw-translate-y: 0;
234
+ --tw-rotate: 0;
235
+ --tw-skew-x: 0;
236
+ --tw-skew-y: 0;
237
+ --tw-scale-x: 1;
238
+ --tw-scale-y: 1;
239
+ --tw-pan-x: ;
240
+ --tw-pan-y: ;
241
+ --tw-pinch-zoom: ;
242
+ --tw-scroll-snap-strictness: proximity;
243
+ --tw-gradient-from-position: ;
244
+ --tw-gradient-via-position: ;
245
+ --tw-gradient-to-position: ;
246
+ --tw-ordinal: ;
247
+ --tw-slashed-zero: ;
248
+ --tw-numeric-figure: ;
249
+ --tw-numeric-spacing: ;
250
+ --tw-numeric-fraction: ;
251
+ --tw-ring-inset: ;
252
+ --tw-ring-offset-width: 0px;
253
+ --tw-ring-offset-color: #fff;
254
+ --tw-ring-color: rgb(59 130 246 / 0.5);
255
+ --tw-ring-offset-shadow: 0 0 #0000;
256
+ --tw-ring-shadow: 0 0 #0000;
257
+ --tw-shadow: 0 0 #0000;
258
+ --tw-shadow-colored: 0 0 #0000;
259
+ --tw-blur: ;
260
+ --tw-brightness: ;
261
+ --tw-contrast: ;
262
+ --tw-grayscale: ;
263
+ --tw-hue-rotate: ;
264
+ --tw-invert: ;
265
+ --tw-saturate: ;
266
+ --tw-sepia: ;
267
+ --tw-drop-shadow: ;
268
+ --tw-backdrop-blur: ;
269
+ --tw-backdrop-brightness: ;
270
+ --tw-backdrop-contrast: ;
271
+ --tw-backdrop-grayscale: ;
272
+ --tw-backdrop-hue-rotate: ;
273
+ --tw-backdrop-invert: ;
274
+ --tw-backdrop-opacity: ;
275
+ --tw-backdrop-saturate: ;
276
+ --tw-backdrop-sepia: ;
277
+ --tw-contain-size: ;
278
+ --tw-contain-layout: ;
279
+ --tw-contain-paint: ;
280
+ --tw-contain-style: ;
281
+ }
282
+ ::backdrop {
283
+ --tw-border-spacing-x: 0;
284
+ --tw-border-spacing-y: 0;
285
+ --tw-translate-x: 0;
286
+ --tw-translate-y: 0;
287
+ --tw-rotate: 0;
288
+ --tw-skew-x: 0;
289
+ --tw-skew-y: 0;
290
+ --tw-scale-x: 1;
291
+ --tw-scale-y: 1;
292
+ --tw-pan-x: ;
293
+ --tw-pan-y: ;
294
+ --tw-pinch-zoom: ;
295
+ --tw-scroll-snap-strictness: proximity;
296
+ --tw-gradient-from-position: ;
297
+ --tw-gradient-via-position: ;
298
+ --tw-gradient-to-position: ;
299
+ --tw-ordinal: ;
300
+ --tw-slashed-zero: ;
301
+ --tw-numeric-figure: ;
302
+ --tw-numeric-spacing: ;
303
+ --tw-numeric-fraction: ;
304
+ --tw-ring-inset: ;
305
+ --tw-ring-offset-width: 0px;
306
+ --tw-ring-offset-color: #fff;
307
+ --tw-ring-color: rgb(59 130 246 / 0.5);
308
+ --tw-ring-offset-shadow: 0 0 #0000;
309
+ --tw-ring-shadow: 0 0 #0000;
310
+ --tw-shadow: 0 0 #0000;
311
+ --tw-shadow-colored: 0 0 #0000;
312
+ --tw-blur: ;
313
+ --tw-brightness: ;
314
+ --tw-contrast: ;
315
+ --tw-grayscale: ;
316
+ --tw-hue-rotate: ;
317
+ --tw-invert: ;
318
+ --tw-saturate: ;
319
+ --tw-sepia: ;
320
+ --tw-drop-shadow: ;
321
+ --tw-backdrop-blur: ;
322
+ --tw-backdrop-brightness: ;
323
+ --tw-backdrop-contrast: ;
324
+ --tw-backdrop-grayscale: ;
325
+ --tw-backdrop-hue-rotate: ;
326
+ --tw-backdrop-invert: ;
327
+ --tw-backdrop-opacity: ;
328
+ --tw-backdrop-saturate: ;
329
+ --tw-backdrop-sepia: ;
330
+ --tw-contain-size: ;
331
+ --tw-contain-layout: ;
332
+ --tw-contain-paint: ;
333
+ --tw-contain-style: ;
334
+ }
335
+ .visible {
336
+ visibility: visible;
337
+ }
338
+ .left-\[146px\] {
339
+ left: 146px;
340
+ }
341
+ .top-\[218px\] {
342
+ top: 218px;
343
+ }
344
+ .m-\[10px\] {
345
+ margin: 10px;
346
+ }
347
+ .mt-\[15px\] {
348
+ margin-top: 15px;
349
+ }
350
+ .table {
351
+ display: table;
352
+ }
353
+ .h-\[192px\] {
354
+ height: 192px;
355
+ }
356
+ .h-\[42px\] {
357
+ height: 42px;
358
+ }
359
+ .w-\[183px\] {
360
+ width: 183px;
361
+ }
362
+ .w-\[224px\] {
363
+ width: 224px;
364
+ }
365
+ .gap-\[8px\] {
366
+ gap: 8px;
367
+ }
368
+ .rounded-\[8px\] {
369
+ border-radius: 8px;
370
+ }
371
+ .\!border {
372
+ border-width: 1px !important;
373
+ }
374
+ .border {
375
+ border-width: 1px;
376
+ }
377
+ .\!border-\[\#B8A4DE\] {
378
+ --tw-border-opacity: 1 !important;
379
+ border-color: rgb(184 164 222 / var(--tw-border-opacity)) !important;
380
+ }
381
+ .border-\[\#919191\] {
382
+ --tw-border-opacity: 1;
383
+ border-color: rgb(145 145 145 / var(--tw-border-opacity));
384
+ }
385
+ .\!bg-\[\#E2D6F8\] {
386
+ --tw-bg-opacity: 1 !important;
387
+ background-color: rgb(226 214 248 / var(--tw-bg-opacity)) !important;
388
+ }
389
+ .bg-\[\#F2F2F2\] {
390
+ --tw-bg-opacity: 1;
391
+ background-color: rgb(242 242 242 / var(--tw-bg-opacity));
392
+ }
393
+ .p-\[6px_6px\] {
394
+ padding: 6px 6px;
395
+ }
396
+ .text-center {
397
+ text-align: center;
398
+ }
399
+ .italic {
400
+ font-style: italic;
401
+ }
402
+ .\!text-black {
403
+ --tw-text-opacity: 1 !important;
404
+ color: rgb(0 0 0 / var(--tw-text-opacity)) !important;
405
+ }
406
+ .shadow-\[0px_0px_1px_1px_\#919191\] {
407
+ --tw-shadow: 0px 0px 1px 1px #919191;
408
+ --tw-shadow-colored: 0px 0px 1px 1px var(--tw-shadow-color);
409
+ box-shadow:
410
+ var(--tw-ring-offset-shadow, 0 0 #0000),
411
+ var(--tw-ring-shadow, 0 0 #0000),
412
+ var(--tw-shadow);
413
+ }
414
+ .shadow-\[0px_0px_1px_1px_\#B8A4DE\] {
415
+ --tw-shadow: 0px 0px 1px 1px #B8A4DE;
416
+ --tw-shadow-colored: 0px 0px 1px 1px var(--tw-shadow-color);
417
+ box-shadow:
418
+ var(--tw-ring-offset-shadow, 0 0 #0000),
419
+ var(--tw-ring-shadow, 0 0 #0000),
420
+ var(--tw-shadow);
421
+ }
422
+ .filter {
423
+ filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
424
+ }
425
+ .submit:where(.css-dev-only-do-not-override-1r287do).ant-btn-default:not(:disabled):not(.ant-btn-disabled):hover {
426
+ color: #472D7A;
427
+ background-color: white;
428
+ border: solid 1px #472D7A;
429
+ }
430
+ :where(.css-dev-only-do-not-override-1r287do).ant-input-affix-wrapper {
431
+ border: solid 1px #919191;
432
+ width: 275px;
433
+ height: 16px;
434
+ padding: 16px;
435
+ gap: 10px;
436
+ }
437
+ :where(.css-dev-only-do-not-override-1r287do).ant-input-outlined:hover {
438
+ border: solid 1px #919191;
439
+ }
440
+ :where(.css-dev-only-do-not-override-1r287do).ant-input-outlined:focus {
441
+ border: solid 1px #919191;
442
+ }
443
+ :where(.css-dev-only-do-not-override-1r287do).ant-input-outlined:focus-within {
444
+ border: solid 1px #919191;
445
+ }
446
+ :where(.css-dev-only-do-not-override-1r287do).ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled)::before {
447
+ display: none;
448
+ }
449
+ :where(.css-dev-only-do-not-override-1r287do).ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled)::after {
450
+ display: none;
451
+ }
452
+ :where(.css-dev-only-do-not-override-1r287do).ant-radio-button-wrapper:not(:first-child)::before {
453
+ width: 0;
454
+ }
455
+ :where(.css-dev-only-do-not-override-1r287do).ant-radio-button-wrapper:first-child {
456
+ border-inline-start: 1px solid rgb(145 145 145);
457
+ }
458
+ .hover\:bg-\[\#F2F2F2\]:hover {
459
+ --tw-bg-opacity: 1;
460
+ background-color: rgb(242 242 242 / var(--tw-bg-opacity));
461
+ }
package/dist/index.js CHANGED
@@ -185,6 +185,9 @@ var SelectElement = (props) => {
185
185
  // src/Components/RadioElement.tsx
186
186
  var import_react6 = __toESM(require("react"));
187
187
  var import_antd6 = require("antd");
188
+ var containerClassName = "w-[224px] h-[192px] top-[218px] left-[146px] gap-[8px] mt-[15px]";
189
+ var className = "bg-[#F2F2F2] border border-[#919191] w-[183px] h-[42px] rounded-[8px] p-[6px_6px] m-[10px] hover:bg-[#F2F2F2] text-center !text-black shadow-[0px_0px_1px_1px_#919191]";
190
+ var selectedClassName = "!bg-[#E2D6F8] !border !border-[#B8A4DE] w-[183px] h-[42px] rounded-[8px] p-[6px_6px] m-[10px] shadow-[0px_0px_1px_1px_#B8A4DE] text-center !text-black shadow-[0px_0px_1px_1px_#919191]";
188
191
  var RadioElement = (props) => {
189
192
  const [isDisabled, setIsDisabled] = (0, import_react6.useState)(props.disabled);
190
193
  const [selectedValue, setSelectedValue] = (0, import_react6.useState)(props.value);
@@ -202,14 +205,14 @@ var RadioElement = (props) => {
202
205
  }
203
206
  };
204
207
  const getButtonStyle = (option) => {
205
- return selectedValue === option.value ? option.selectedClassName : option.className;
208
+ return selectedValue === option.value ? `${selectedClassName} ${option.selectedClassName}` : `${className} ${option.className}`;
206
209
  };
207
210
  return /* @__PURE__ */ import_react6.default.createElement("div", null, /* @__PURE__ */ import_react6.default.createElement(
208
211
  import_antd6.Radio.Group,
209
212
  {
210
213
  onChange: handleChange,
211
214
  optionType,
212
- className: props.className ? props.className : "",
215
+ className: `${containerClassName} ${className && className}`,
213
216
  value: selectedValue
214
217
  },
215
218
  props.options && props.options.map((option) => /* @__PURE__ */ import_react6.default.createElement(
package/dist/index.mjs CHANGED
@@ -138,6 +138,9 @@ var SelectElement = (props) => {
138
138
  // src/Components/RadioElement.tsx
139
139
  import React6, { useState as useState2 } from "react";
140
140
  import { Radio } from "antd";
141
+ var containerClassName = "w-[224px] h-[192px] top-[218px] left-[146px] gap-[8px] mt-[15px]";
142
+ var className = "bg-[#F2F2F2] border border-[#919191] w-[183px] h-[42px] rounded-[8px] p-[6px_6px] m-[10px] hover:bg-[#F2F2F2] text-center !text-black shadow-[0px_0px_1px_1px_#919191]";
143
+ var selectedClassName = "!bg-[#E2D6F8] !border !border-[#B8A4DE] w-[183px] h-[42px] rounded-[8px] p-[6px_6px] m-[10px] shadow-[0px_0px_1px_1px_#B8A4DE] text-center !text-black shadow-[0px_0px_1px_1px_#919191]";
141
144
  var RadioElement = (props) => {
142
145
  const [isDisabled, setIsDisabled] = useState2(props.disabled);
143
146
  const [selectedValue, setSelectedValue] = useState2(props.value);
@@ -155,14 +158,14 @@ var RadioElement = (props) => {
155
158
  }
156
159
  };
157
160
  const getButtonStyle = (option) => {
158
- return selectedValue === option.value ? option.selectedClassName : option.className;
161
+ return selectedValue === option.value ? `${selectedClassName} ${option.selectedClassName}` : `${className} ${option.className}`;
159
162
  };
160
163
  return /* @__PURE__ */ React6.createElement("div", null, /* @__PURE__ */ React6.createElement(
161
164
  Radio.Group,
162
165
  {
163
166
  onChange: handleChange,
164
167
  optionType,
165
- className: props.className ? props.className : "",
168
+ className: `${containerClassName} ${className && className}`,
166
169
  value: selectedValue
167
170
  },
168
171
  props.options && props.options.map((option) => /* @__PURE__ */ React6.createElement(
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@apexcura/ui-components",
3
- "version": "0.0.12-Beta47",
3
+ "version": "0.0.12-Beta49",
4
4
  "description": "Apex cura React components library",
5
5
  "keywords": [
6
6
  "apex cura",
@@ -36,10 +36,13 @@
36
36
  "@types/react-global-configuration": "^1.3.3",
37
37
  "@types/testing-library__react": "^10.2.0",
38
38
  "antd": "^5.16.5",
39
+ "autoprefixer": "^10.4.19",
39
40
  "jest": "^29.7.0",
40
41
  "jest-environment-jsdom": "^29.7.0",
42
+ "postcss": "^8.4.38",
41
43
  "react": "^18.3.1",
42
44
  "react-dom": "^18.3.1",
45
+ "tailwindcss": "^3.4.3",
43
46
  "ts-jest": "^29.1.2",
44
47
  "tsup": "^8.0.2",
45
48
  "typescript": "^5.4.5"
@@ -0,0 +1,6 @@
1
+ module.exports = {
2
+ plugins: {
3
+ tailwindcss: {},
4
+ autoprefixer: {},
5
+ },
6
+ }
@@ -0,0 +1,10 @@
1
+ /** @type {import('tailwindcss').Config} */
2
+ module.exports = {
3
+ content: [
4
+ "./src/**/*.{js,jsx,ts,tsx}",
5
+ ],
6
+ theme: {
7
+ extend: {},
8
+ },
9
+ plugins: [],
10
+ }