@jameskabz/nextcraft-ui 0.6.15 → 0.6.16
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.
|
@@ -52,19 +52,12 @@ const CraftSwitch = React.forwardRef(
|
|
|
52
52
|
{
|
|
53
53
|
className: (0, import_cn.cn)(
|
|
54
54
|
"relative h-6 w-11 rounded-full border-2 border-[rgb(var(--nc-border)/0.35)] bg-[rgb(var(--nc-surface)/0.08)]",
|
|
55
|
+
"before:absolute before:left-0.5 before:top-0.5 before:h-4 before:w-4 before:rounded-full before:bg-[rgb(var(--nc-fg)/0.92)] before:shadow-[0_1px_2px_rgba(0,0,0,0.4)]",
|
|
56
|
+
"before:transition-all before:duration-200 before:content-['']",
|
|
55
57
|
"transition-all duration-200",
|
|
56
58
|
"peer-focus-visible:ring-2 peer-focus-visible:ring-[rgb(var(--nc-accent-1)/0.5)]",
|
|
57
|
-
"peer-checked:border-[rgb(var(--nc-accent-1)/0.6)] peer-checked:bg-[rgb(var(--nc-accent-1)/0.25)]"
|
|
58
|
-
|
|
59
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
60
|
-
"span",
|
|
61
|
-
{
|
|
62
|
-
className: (0, import_cn.cn)(
|
|
63
|
-
"absolute left-0.5 top-0.5 h-4 w-4 rounded-full bg-[rgb(var(--nc-surface-muted)/0.9)]",
|
|
64
|
-
"transition-all duration-200",
|
|
65
|
-
"peer-checked:translate-x-5 peer-checked:bg-[rgb(var(--nc-surface-muted))]"
|
|
66
|
-
)
|
|
67
|
-
}
|
|
59
|
+
"peer-checked:border-[rgb(var(--nc-accent-1)/0.6)] peer-checked:bg-[rgb(var(--nc-accent-1)/0.25)]",
|
|
60
|
+
"peer-checked:before:translate-x-5 peer-checked:before:bg-[rgb(var(--nc-fg))]"
|
|
68
61
|
)
|
|
69
62
|
}
|
|
70
63
|
),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/craft-switch.tsx"],"sourcesContent":["import * as React from \"react\";\n\nimport { cn } from \"@/utils/cn\";\nimport type { ThemeName } from \"@/theme/theme-context\";\n\nexport type CraftSwitchProps = Omit<\n React.InputHTMLAttributes<HTMLInputElement>,\n \"type\"\n> & {\n tone?: ThemeName;\n label?: React.ReactNode;\n};\n\nexport const CraftSwitch = React.forwardRef<HTMLInputElement, CraftSwitchProps>(\n ({ className, tone, label, ...props }, ref) => {\n return (\n <label\n className={cn(\n \"inline-flex items-center gap-3 text-sm text-[rgb(var(--nc-fg))]\",\n props.disabled ? \"opacity-60\" : \"cursor-pointer\",\n className\n )}\n data-nc-theme={tone}\n >\n <input ref={ref} type=\"checkbox\" className=\"peer sr-only\" {...props} />\n <span\n className={cn(\n \"relative h-6 w-11 rounded-full border-2 border-[rgb(var(--nc-border)/0.35)] bg-[rgb(var(--nc-surface)/0.08)]\",\n \"transition-all duration-200\",\n \"peer-focus-visible:ring-2 peer-focus-visible:ring-[rgb(var(--nc-accent-1)/0.5)]\",\n \"peer-checked:border-[rgb(var(--nc-accent-1)/0.6)] peer-checked:bg-[rgb(var(--nc-accent-1)/0.25)]\"
|
|
1
|
+
{"version":3,"sources":["../../src/components/craft-switch.tsx"],"sourcesContent":["import * as React from \"react\";\n\nimport { cn } from \"@/utils/cn\";\nimport type { ThemeName } from \"@/theme/theme-context\";\n\nexport type CraftSwitchProps = Omit<\n React.InputHTMLAttributes<HTMLInputElement>,\n \"type\"\n> & {\n tone?: ThemeName;\n label?: React.ReactNode;\n};\n\nexport const CraftSwitch = React.forwardRef<HTMLInputElement, CraftSwitchProps>(\n ({ className, tone, label, ...props }, ref) => {\n return (\n <label\n className={cn(\n \"inline-flex items-center gap-3 text-sm text-[rgb(var(--nc-fg))]\",\n props.disabled ? \"opacity-60\" : \"cursor-pointer\",\n className\n )}\n data-nc-theme={tone}\n >\n <input ref={ref} type=\"checkbox\" className=\"peer sr-only\" {...props} />\n <span\n className={cn(\n \"relative h-6 w-11 rounded-full border-2 border-[rgb(var(--nc-border)/0.35)] bg-[rgb(var(--nc-surface)/0.08)]\",\n \"before:absolute before:left-0.5 before:top-0.5 before:h-4 before:w-4 before:rounded-full before:bg-[rgb(var(--nc-fg)/0.92)] before:shadow-[0_1px_2px_rgba(0,0,0,0.4)]\",\n \"before:transition-all before:duration-200 before:content-['']\",\n \"transition-all duration-200\",\n \"peer-focus-visible:ring-2 peer-focus-visible:ring-[rgb(var(--nc-accent-1)/0.5)]\",\n \"peer-checked:border-[rgb(var(--nc-accent-1)/0.6)] peer-checked:bg-[rgb(var(--nc-accent-1)/0.25)]\",\n \"peer-checked:before:translate-x-5 peer-checked:before:bg-[rgb(var(--nc-fg))]\"\n )}\n >\n </span>\n {label && <span>{label}</span>}\n </label>\n );\n }\n);\n\nCraftSwitch.displayName = \"CraftSwitch\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAgBM;AAhBN,YAAuB;AAEvB,gBAAmB;AAWZ,MAAM,cAAc,MAAM;AAAA,EAC/B,CAAC,EAAE,WAAW,MAAM,OAAO,GAAG,MAAM,GAAG,QAAQ;AAC7C,WACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAW;AAAA,UACT;AAAA,UACA,MAAM,WAAW,eAAe;AAAA,UAChC;AAAA,QACF;AAAA,QACA,iBAAe;AAAA,QAEf;AAAA,sDAAC,WAAM,KAAU,MAAK,YAAW,WAAU,gBAAgB,GAAG,OAAO;AAAA,UACrE;AAAA,YAAC;AAAA;AAAA,cACC,eAAW;AAAA,gBACT;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,cACF;AAAA;AAAA,UAEF;AAAA,UACC,SAAS,4CAAC,UAAM,iBAAM;AAAA;AAAA;AAAA,IACzB;AAAA,EAEJ;AACF;AAEA,YAAY,cAAc;","names":[]}
|
|
@@ -19,19 +19,12 @@ const CraftSwitch = React.forwardRef(
|
|
|
19
19
|
{
|
|
20
20
|
className: cn(
|
|
21
21
|
"relative h-6 w-11 rounded-full border-2 border-[rgb(var(--nc-border)/0.35)] bg-[rgb(var(--nc-surface)/0.08)]",
|
|
22
|
+
"before:absolute before:left-0.5 before:top-0.5 before:h-4 before:w-4 before:rounded-full before:bg-[rgb(var(--nc-fg)/0.92)] before:shadow-[0_1px_2px_rgba(0,0,0,0.4)]",
|
|
23
|
+
"before:transition-all before:duration-200 before:content-['']",
|
|
22
24
|
"transition-all duration-200",
|
|
23
25
|
"peer-focus-visible:ring-2 peer-focus-visible:ring-[rgb(var(--nc-accent-1)/0.5)]",
|
|
24
|
-
"peer-checked:border-[rgb(var(--nc-accent-1)/0.6)] peer-checked:bg-[rgb(var(--nc-accent-1)/0.25)]"
|
|
25
|
-
|
|
26
|
-
children: /* @__PURE__ */ jsx(
|
|
27
|
-
"span",
|
|
28
|
-
{
|
|
29
|
-
className: cn(
|
|
30
|
-
"absolute left-0.5 top-0.5 h-4 w-4 rounded-full bg-[rgb(var(--nc-surface-muted)/0.9)]",
|
|
31
|
-
"transition-all duration-200",
|
|
32
|
-
"peer-checked:translate-x-5 peer-checked:bg-[rgb(var(--nc-surface-muted))]"
|
|
33
|
-
)
|
|
34
|
-
}
|
|
26
|
+
"peer-checked:border-[rgb(var(--nc-accent-1)/0.6)] peer-checked:bg-[rgb(var(--nc-accent-1)/0.25)]",
|
|
27
|
+
"peer-checked:before:translate-x-5 peer-checked:before:bg-[rgb(var(--nc-fg))]"
|
|
35
28
|
)
|
|
36
29
|
}
|
|
37
30
|
),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/craft-switch.tsx"],"sourcesContent":["import * as React from \"react\";\n\nimport { cn } from \"@/utils/cn\";\nimport type { ThemeName } from \"@/theme/theme-context\";\n\nexport type CraftSwitchProps = Omit<\n React.InputHTMLAttributes<HTMLInputElement>,\n \"type\"\n> & {\n tone?: ThemeName;\n label?: React.ReactNode;\n};\n\nexport const CraftSwitch = React.forwardRef<HTMLInputElement, CraftSwitchProps>(\n ({ className, tone, label, ...props }, ref) => {\n return (\n <label\n className={cn(\n \"inline-flex items-center gap-3 text-sm text-[rgb(var(--nc-fg))]\",\n props.disabled ? \"opacity-60\" : \"cursor-pointer\",\n className\n )}\n data-nc-theme={tone}\n >\n <input ref={ref} type=\"checkbox\" className=\"peer sr-only\" {...props} />\n <span\n className={cn(\n \"relative h-6 w-11 rounded-full border-2 border-[rgb(var(--nc-border)/0.35)] bg-[rgb(var(--nc-surface)/0.08)]\",\n \"transition-all duration-200\",\n \"peer-focus-visible:ring-2 peer-focus-visible:ring-[rgb(var(--nc-accent-1)/0.5)]\",\n \"peer-checked:border-[rgb(var(--nc-accent-1)/0.6)] peer-checked:bg-[rgb(var(--nc-accent-1)/0.25)]\"
|
|
1
|
+
{"version":3,"sources":["../../src/components/craft-switch.tsx"],"sourcesContent":["import * as React from \"react\";\n\nimport { cn } from \"@/utils/cn\";\nimport type { ThemeName } from \"@/theme/theme-context\";\n\nexport type CraftSwitchProps = Omit<\n React.InputHTMLAttributes<HTMLInputElement>,\n \"type\"\n> & {\n tone?: ThemeName;\n label?: React.ReactNode;\n};\n\nexport const CraftSwitch = React.forwardRef<HTMLInputElement, CraftSwitchProps>(\n ({ className, tone, label, ...props }, ref) => {\n return (\n <label\n className={cn(\n \"inline-flex items-center gap-3 text-sm text-[rgb(var(--nc-fg))]\",\n props.disabled ? \"opacity-60\" : \"cursor-pointer\",\n className\n )}\n data-nc-theme={tone}\n >\n <input ref={ref} type=\"checkbox\" className=\"peer sr-only\" {...props} />\n <span\n className={cn(\n \"relative h-6 w-11 rounded-full border-2 border-[rgb(var(--nc-border)/0.35)] bg-[rgb(var(--nc-surface)/0.08)]\",\n \"before:absolute before:left-0.5 before:top-0.5 before:h-4 before:w-4 before:rounded-full before:bg-[rgb(var(--nc-fg)/0.92)] before:shadow-[0_1px_2px_rgba(0,0,0,0.4)]\",\n \"before:transition-all before:duration-200 before:content-['']\",\n \"transition-all duration-200\",\n \"peer-focus-visible:ring-2 peer-focus-visible:ring-[rgb(var(--nc-accent-1)/0.5)]\",\n \"peer-checked:border-[rgb(var(--nc-accent-1)/0.6)] peer-checked:bg-[rgb(var(--nc-accent-1)/0.25)]\",\n \"peer-checked:before:translate-x-5 peer-checked:before:bg-[rgb(var(--nc-fg))]\"\n )}\n >\n </span>\n {label && <span>{label}</span>}\n </label>\n );\n }\n);\n\nCraftSwitch.displayName = \"CraftSwitch\";\n"],"mappings":"AAgBM,SAQE,KARF;AAhBN,YAAY,WAAW;AAEvB,SAAS,UAAU;AAWZ,MAAM,cAAc,MAAM;AAAA,EAC/B,CAAC,EAAE,WAAW,MAAM,OAAO,GAAG,MAAM,GAAG,QAAQ;AAC7C,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA,MAAM,WAAW,eAAe;AAAA,UAChC;AAAA,QACF;AAAA,QACA,iBAAe;AAAA,QAEf;AAAA,8BAAC,WAAM,KAAU,MAAK,YAAW,WAAU,gBAAgB,GAAG,OAAO;AAAA,UACrE;AAAA,YAAC;AAAA;AAAA,cACC,WAAW;AAAA,gBACT;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,cACF;AAAA;AAAA,UAEF;AAAA,UACC,SAAS,oBAAC,UAAM,iBAAM;AAAA;AAAA;AAAA,IACzB;AAAA,EAEJ;AACF;AAEA,YAAY,cAAc;","names":[]}
|
package/dist/styles.css
CHANGED
|
@@ -238,9 +238,6 @@
|
|
|
238
238
|
.top-0 {
|
|
239
239
|
top: calc(var(--spacing) * 0);
|
|
240
240
|
}
|
|
241
|
-
.top-0\.5 {
|
|
242
|
-
top: calc(var(--spacing) * 0.5);
|
|
243
|
-
}
|
|
244
241
|
.top-1\/2 {
|
|
245
242
|
top: calc(1/2 * 100%);
|
|
246
243
|
}
|
|
@@ -271,9 +268,6 @@
|
|
|
271
268
|
.left-0 {
|
|
272
269
|
left: calc(var(--spacing) * 0);
|
|
273
270
|
}
|
|
274
|
-
.left-0\.5 {
|
|
275
|
-
left: calc(var(--spacing) * 0.5);
|
|
276
|
-
}
|
|
277
271
|
.left-1\/2 {
|
|
278
272
|
left: calc(1/2 * 100%);
|
|
279
273
|
}
|
|
@@ -826,9 +820,6 @@
|
|
|
826
820
|
.bg-\[rgb\(var\(--nc-surface\)\/1\.52\)\] {
|
|
827
821
|
background-color: rgb(var(--nc-surface)/1.52);
|
|
828
822
|
}
|
|
829
|
-
.bg-\[rgb\(var\(--nc-surface-muted\)\/0\.9\)\] {
|
|
830
|
-
background-color: rgb(var(--nc-surface-muted)/0.9);
|
|
831
|
-
}
|
|
832
823
|
.bg-background {
|
|
833
824
|
background-color: var(--background);
|
|
834
825
|
}
|
|
@@ -1280,12 +1271,6 @@
|
|
|
1280
1271
|
--tw-outline-style: none;
|
|
1281
1272
|
outline-style: none;
|
|
1282
1273
|
}
|
|
1283
|
-
.peer-checked\:translate-x-5 {
|
|
1284
|
-
&:is(:where(.peer):checked ~ *) {
|
|
1285
|
-
--tw-translate-x: calc(var(--spacing) * 5);
|
|
1286
|
-
translate: var(--tw-translate-x) var(--tw-translate-y);
|
|
1287
|
-
}
|
|
1288
|
-
}
|
|
1289
1274
|
.peer-checked\:border-\[rgb\(var\(--nc-accent-1\)\)\] {
|
|
1290
1275
|
&:is(:where(.peer):checked ~ *) {
|
|
1291
1276
|
border-color: rgb(var(--nc-accent-1));
|
|
@@ -1301,11 +1286,6 @@
|
|
|
1301
1286
|
background-color: rgb(var(--nc-accent-1)/0.25);
|
|
1302
1287
|
}
|
|
1303
1288
|
}
|
|
1304
|
-
.peer-checked\:bg-\[rgb\(var\(--nc-surface-muted\)\)\] {
|
|
1305
|
-
&:is(:where(.peer):checked ~ *) {
|
|
1306
|
-
background-color: rgb(var(--nc-surface-muted));
|
|
1307
|
-
}
|
|
1308
|
-
}
|
|
1309
1289
|
.peer-checked\:opacity-100 {
|
|
1310
1290
|
&:is(:where(.peer):checked ~ *) {
|
|
1311
1291
|
opacity: 100%;
|
|
@@ -1393,18 +1373,54 @@
|
|
|
1393
1373
|
inset: calc(var(--spacing) * 0);
|
|
1394
1374
|
}
|
|
1395
1375
|
}
|
|
1376
|
+
.before\:top-0\.5 {
|
|
1377
|
+
&::before {
|
|
1378
|
+
content: var(--tw-content);
|
|
1379
|
+
top: calc(var(--spacing) * 0.5);
|
|
1380
|
+
}
|
|
1381
|
+
}
|
|
1382
|
+
.before\:left-0\.5 {
|
|
1383
|
+
&::before {
|
|
1384
|
+
content: var(--tw-content);
|
|
1385
|
+
left: calc(var(--spacing) * 0.5);
|
|
1386
|
+
}
|
|
1387
|
+
}
|
|
1396
1388
|
.before\:-z-10 {
|
|
1397
1389
|
&::before {
|
|
1398
1390
|
content: var(--tw-content);
|
|
1399
1391
|
z-index: calc(10 * -1);
|
|
1400
1392
|
}
|
|
1401
1393
|
}
|
|
1394
|
+
.before\:h-4 {
|
|
1395
|
+
&::before {
|
|
1396
|
+
content: var(--tw-content);
|
|
1397
|
+
height: calc(var(--spacing) * 4);
|
|
1398
|
+
}
|
|
1399
|
+
}
|
|
1400
|
+
.before\:w-4 {
|
|
1401
|
+
&::before {
|
|
1402
|
+
content: var(--tw-content);
|
|
1403
|
+
width: calc(var(--spacing) * 4);
|
|
1404
|
+
}
|
|
1405
|
+
}
|
|
1406
|
+
.before\:rounded-full {
|
|
1407
|
+
&::before {
|
|
1408
|
+
content: var(--tw-content);
|
|
1409
|
+
border-radius: calc(infinity * 1px);
|
|
1410
|
+
}
|
|
1411
|
+
}
|
|
1402
1412
|
.before\:rounded-xl {
|
|
1403
1413
|
&::before {
|
|
1404
1414
|
content: var(--tw-content);
|
|
1405
1415
|
border-radius: var(--radius-xl);
|
|
1406
1416
|
}
|
|
1407
1417
|
}
|
|
1418
|
+
.before\:bg-\[rgb\(var\(--nc-fg\)\/0\.92\)\] {
|
|
1419
|
+
&::before {
|
|
1420
|
+
content: var(--tw-content);
|
|
1421
|
+
background-color: rgb(var(--nc-fg)/0.92);
|
|
1422
|
+
}
|
|
1423
|
+
}
|
|
1408
1424
|
.before\:bg-linear-to-br {
|
|
1409
1425
|
&::before {
|
|
1410
1426
|
content: var(--tw-content);
|
|
@@ -1470,6 +1486,13 @@
|
|
|
1470
1486
|
opacity: 0%;
|
|
1471
1487
|
}
|
|
1472
1488
|
}
|
|
1489
|
+
.before\:shadow-\[0_1px_2px_rgba\(0\,0\,0\,0\.4\)\] {
|
|
1490
|
+
&::before {
|
|
1491
|
+
content: var(--tw-content);
|
|
1492
|
+
--tw-shadow: 0 1px 2px var(--tw-shadow-color, rgba(0,0,0,0.4));
|
|
1493
|
+
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
|
1494
|
+
}
|
|
1495
|
+
}
|
|
1473
1496
|
.before\:blur-xl {
|
|
1474
1497
|
&::before {
|
|
1475
1498
|
content: var(--tw-content);
|
|
@@ -1477,6 +1500,14 @@
|
|
|
1477
1500
|
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,);
|
|
1478
1501
|
}
|
|
1479
1502
|
}
|
|
1503
|
+
.before\:transition-all {
|
|
1504
|
+
&::before {
|
|
1505
|
+
content: var(--tw-content);
|
|
1506
|
+
transition-property: all;
|
|
1507
|
+
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
|
|
1508
|
+
transition-duration: var(--tw-duration, var(--default-transition-duration));
|
|
1509
|
+
}
|
|
1510
|
+
}
|
|
1480
1511
|
.before\:transition-opacity {
|
|
1481
1512
|
&::before {
|
|
1482
1513
|
content: var(--tw-content);
|
|
@@ -1485,6 +1516,13 @@
|
|
|
1485
1516
|
transition-duration: var(--tw-duration, var(--default-transition-duration));
|
|
1486
1517
|
}
|
|
1487
1518
|
}
|
|
1519
|
+
.before\:duration-200 {
|
|
1520
|
+
&::before {
|
|
1521
|
+
content: var(--tw-content);
|
|
1522
|
+
--tw-duration: 200ms;
|
|
1523
|
+
transition-duration: 200ms;
|
|
1524
|
+
}
|
|
1525
|
+
}
|
|
1488
1526
|
.before\:duration-300 {
|
|
1489
1527
|
&::before {
|
|
1490
1528
|
content: var(--tw-content);
|
|
@@ -1492,6 +1530,29 @@
|
|
|
1492
1530
|
transition-duration: 300ms;
|
|
1493
1531
|
}
|
|
1494
1532
|
}
|
|
1533
|
+
.before\:content-\[\'\'\] {
|
|
1534
|
+
&::before {
|
|
1535
|
+
--tw-content: '';
|
|
1536
|
+
content: var(--tw-content);
|
|
1537
|
+
}
|
|
1538
|
+
}
|
|
1539
|
+
.peer-checked\:before\:translate-x-5 {
|
|
1540
|
+
&:is(:where(.peer):checked ~ *) {
|
|
1541
|
+
&::before {
|
|
1542
|
+
content: var(--tw-content);
|
|
1543
|
+
--tw-translate-x: calc(var(--spacing) * 5);
|
|
1544
|
+
translate: var(--tw-translate-x) var(--tw-translate-y);
|
|
1545
|
+
}
|
|
1546
|
+
}
|
|
1547
|
+
}
|
|
1548
|
+
.peer-checked\:before\:bg-\[rgb\(var\(--nc-fg\)\)\] {
|
|
1549
|
+
&:is(:where(.peer):checked ~ *) {
|
|
1550
|
+
&::before {
|
|
1551
|
+
content: var(--tw-content);
|
|
1552
|
+
background-color: rgb(var(--nc-fg));
|
|
1553
|
+
}
|
|
1554
|
+
}
|
|
1555
|
+
}
|
|
1495
1556
|
.after\:absolute {
|
|
1496
1557
|
&::after {
|
|
1497
1558
|
content: var(--tw-content);
|