react-restyle-components 0.1.68 → 0.1.70

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 (3) hide show
  1. package/lib/global.css +77 -44
  2. package/lib/src/core-components/atoms/tabs/tabs.component.js +1 -1
  3. package/package.json +1 -1
package/lib/global.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /*
2
- ! tailwindcss v3.4.4 | MIT License | https://tailwindcss.com
2
+ ! tailwindcss v3.4.3 | MIT License | https://tailwindcss.com
3
3
  */
4
4
 
5
5
  /*
@@ -44,7 +44,8 @@ html,
44
44
  /* 3 */
45
45
  tab-size: 4;
46
46
  /* 3 */
47
- font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
47
+ font-family: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
48
+ 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
48
49
  /* 4 */
49
50
  font-feature-settings: normal;
50
51
  /* 5 */
@@ -87,7 +88,7 @@ Add the correct text decoration in Chrome, Edge, and Safari.
87
88
 
88
89
  abbr:where([title]) {
89
90
  -webkit-text-decoration: underline dotted;
90
- text-decoration: underline dotted;
91
+ text-decoration: underline dotted;
91
92
  }
92
93
 
93
94
  /*
@@ -133,7 +134,8 @@ code,
133
134
  kbd,
134
135
  samp,
135
136
  pre {
136
- font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
137
+ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
138
+ 'Liberation Mono', 'Courier New', monospace;
137
139
  /* 1 */
138
140
  font-feature-settings: normal;
139
141
  /* 2 */
@@ -389,7 +391,7 @@ Set the default cursor for buttons.
389
391
  */
390
392
 
391
393
  button,
392
- [role="button"] {
394
+ [role='button'] {
393
395
  cursor: pointer;
394
396
  }
395
397
 
@@ -437,7 +439,9 @@ video {
437
439
  display: none;
438
440
  }
439
441
 
440
- *, ::before, ::after {
442
+ *,
443
+ ::before,
444
+ ::after {
441
445
  --tw-border-spacing-x: 0;
442
446
  --tw-border-spacing-y: 0;
443
447
  --tw-translate-x: 0;
@@ -753,21 +757,29 @@ video {
753
757
 
754
758
  .-translate-x-1\/2 {
755
759
  --tw-translate-x: -50%;
756
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
760
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y))
761
+ rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
762
+ scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
757
763
  }
758
764
 
759
765
  .-translate-y-1\/2 {
760
766
  --tw-translate-y: -50%;
761
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
767
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y))
768
+ rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
769
+ scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
762
770
  }
763
771
 
764
772
  .translate-x-1\/2 {
765
773
  --tw-translate-x: 50%;
766
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
774
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y))
775
+ rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
776
+ scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
767
777
  }
768
778
 
769
779
  .transform {
770
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
780
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y))
781
+ rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
782
+ scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
771
783
  }
772
784
 
773
785
  .cursor-pointer {
@@ -780,7 +792,7 @@ video {
780
792
 
781
793
  .appearance-none {
782
794
  -webkit-appearance: none;
783
- appearance: none;
795
+ appearance: none;
784
796
  }
785
797
 
786
798
  .flex-row {
@@ -929,11 +941,6 @@ video {
929
941
  background-color: rgb(0 123 255 / var(--tw-bg-opacity));
930
942
  }
931
943
 
932
- .bg-\[\#EF4444\] {
933
- --tw-bg-opacity: 1;
934
- background-color: rgb(239 68 68 / var(--tw-bg-opacity));
935
- }
936
-
937
944
  .bg-background-secondary {
938
945
  --tw-bg-opacity: 1;
939
946
  background-color: rgb(240 239 238 / var(--tw-bg-opacity));
@@ -964,6 +971,10 @@ video {
964
971
  background-color: rgb(231 80 61 / var(--tw-bg-opacity));
965
972
  }
966
973
 
974
+ .bg-orange1 {
975
+ background-color: '#EF4444';
976
+ }
977
+
967
978
  .bg-slate-800 {
968
979
  --tw-bg-opacity: 1;
969
980
  background-color: rgb(30 41 59 / var(--tw-bg-opacity));
@@ -1170,20 +1181,26 @@ video {
1170
1181
 
1171
1182
  .shadow {
1172
1183
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
1173
- --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
1174
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1184
+ --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color),
1185
+ 0 1px 2px -1px var(--tw-shadow-color);
1186
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
1187
+ var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1175
1188
  }
1176
1189
 
1177
1190
  .shadow-lg {
1178
- --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
1179
- --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
1180
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1191
+ --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1),
1192
+ 0 4px 6px -4px rgb(0 0 0 / 0.1);
1193
+ --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color),
1194
+ 0 4px 6px -4px var(--tw-shadow-color);
1195
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
1196
+ var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1181
1197
  }
1182
1198
 
1183
1199
  .shadow-sm {
1184
1200
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
1185
1201
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
1186
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1202
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
1203
+ var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1187
1204
  }
1188
1205
 
1189
1206
  .outline-none {
@@ -1201,11 +1218,15 @@ video {
1201
1218
 
1202
1219
  .blur {
1203
1220
  --tw-blur: blur(8px);
1204
- 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);
1221
+ filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast)
1222
+ var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate)
1223
+ var(--tw-sepia) var(--tw-drop-shadow);
1205
1224
  }
1206
1225
 
1207
1226
  .filter {
1208
- 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);
1227
+ filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast)
1228
+ var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate)
1229
+ var(--tw-sepia) var(--tw-drop-shadow);
1209
1230
  }
1210
1231
 
1211
1232
  .duration-300 {
@@ -1222,15 +1243,15 @@ video {
1222
1243
 
1223
1244
  body {
1224
1245
  margin: 0;
1225
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
1226
- "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
1246
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
1247
+ 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
1227
1248
  sans-serif;
1228
1249
  -webkit-font-smoothing: antialiased;
1229
1250
  -moz-osx-font-smoothing: grayscale;
1230
1251
  }
1231
1252
 
1232
1253
  code {
1233
- font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
1254
+ font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
1234
1255
  monospace;
1235
1256
  }
1236
1257
 
@@ -1240,9 +1261,12 @@ code {
1240
1261
  }
1241
1262
 
1242
1263
  .hover\:shadow-lg:hover {
1243
- --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
1244
- --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
1245
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1264
+ --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1),
1265
+ 0 4px 6px -4px rgb(0 0 0 / 0.1);
1266
+ --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color),
1267
+ 0 4px 6px -4px var(--tw-shadow-color);
1268
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
1269
+ var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1246
1270
  }
1247
1271
 
1248
1272
  .focus\:border-gray-secondary:focus {
@@ -1256,21 +1280,30 @@ code {
1256
1280
  }
1257
1281
 
1258
1282
  .focus\:ring:focus {
1259
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1260
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1261
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
1283
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0
1284
+ var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1285
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0
1286
+ calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1287
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
1288
+ var(--tw-shadow, 0 0 #0000);
1262
1289
  }
1263
1290
 
1264
1291
  .focus\:ring-0:focus {
1265
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1266
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1267
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
1292
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0
1293
+ var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1294
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0
1295
+ calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1296
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
1297
+ var(--tw-shadow, 0 0 #0000);
1268
1298
  }
1269
1299
 
1270
1300
  .focus\:ring-2:focus {
1271
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1272
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1273
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
1301
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0
1302
+ var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1303
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0
1304
+ calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1305
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
1306
+ var(--tw-shadow, 0 0 #0000);
1274
1307
  }
1275
1308
 
1276
1309
  .focus\:ring-blue-500:focus {
@@ -1278,27 +1311,27 @@ code {
1278
1311
  --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity));
1279
1312
  }
1280
1313
 
1281
- .dark\:bg-black:is([data-mode="dark"] *) {
1314
+ .dark\:bg-black:is([data-mode='dark'] *) {
1282
1315
  --tw-bg-opacity: 1;
1283
1316
  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
1284
1317
  }
1285
1318
 
1286
- .dark\:bg-white:is([data-mode="dark"] *) {
1319
+ .dark\:bg-white:is([data-mode='dark'] *) {
1287
1320
  --tw-bg-opacity: 1;
1288
1321
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
1289
1322
  }
1290
1323
 
1291
- .dark\:text-black:is([data-mode="dark"] *) {
1324
+ .dark\:text-black:is([data-mode='dark'] *) {
1292
1325
  --tw-text-opacity: 1;
1293
1326
  color: rgb(0 0 0 / var(--tw-text-opacity));
1294
1327
  }
1295
1328
 
1296
- .dark\:text-white:is([data-mode="dark"] *) {
1329
+ .dark\:text-white:is([data-mode='dark'] *) {
1297
1330
  --tw-text-opacity: 1;
1298
1331
  color: rgb(255 255 255 / var(--tw-text-opacity));
1299
1332
  }
1300
1333
 
1301
- .dark\:focus\:ring-blue-600:focus:is([data-mode="dark"] *) {
1334
+ .dark\:focus\:ring-blue-600:focus:is([data-mode='dark'] *) {
1302
1335
  --tw-ring-opacity: 1;
1303
1336
  --tw-ring-color: rgb(37 99 235 / var(--tw-ring-opacity));
1304
1337
  }
package/lib/src/core-components/atoms/tabs/tabs.component.js CHANGED
@@ -3,7 +3,7 @@ import { Icon } from '../..';
3
3
  export const Tabs = ({ options, onSelect }) => {
4
4
  const [selected, setSelected] = useState(options[0].title);
5
5
  return (React.createElement("div", { className: "flex justify-center" },
6
- React.createElement("ul", { className: "flex flex-wrap items-center justify-center -mb-px text-sm font-medium text-center text-black cursor-pointer gap-2" }, options?.map((item, index) => (React.createElement("li", { key: index, className: "bg-[#EF4444] rounded-md" },
6
+ React.createElement("ul", { className: "flex flex-wrap items-center justify-center -mb-px text-sm font-medium text-center text-black cursor-pointer gap-2" }, options?.map((item, index) => (React.createElement("li", { key: index, className: "bg-orange1 rounded-md" },
7
7
  React.createElement("div", { className: `inline-flex items-center justify-center p-3 border-b-2 gap-1 ${item.title == selected
8
8
  ? 'text-white font-bold md:text-md border-primary active'
9
9
  : ' text-gray-200 md:text-md border-transparent'}`, onClick: () => {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-restyle-components",
3
- "version": "0.1.68",
3
+ "version": "0.1.70",
4
4
  "private": false,
5
5
  "description": "Easy use restyle components",
6
6
  "main": "./lib/index.js",