jasmincss 1.0.14 → 1.0.15

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 (12) hide show
  1. package/JASMINCSS-GUIDE.md +1 -1
  2. package/dist/index.js +106 -1
  3. package/dist/index.mjs +106 -1
  4. package/dist/plugins/jasmin-loader.js +106 -1
  5. package/dist/plugins/jasmin-loader.mjs +106 -1
  6. package/dist/plugins/nextjs.js +111 -1
  7. package/dist/plugins/nextjs.mjs +111 -1
  8. package/dist/plugins/vite.js +111 -1
  9. package/dist/plugins/vite.mjs +111 -1
  10. package/package.json +1 -1
  11. package/src/core/utilities/borders.js +125 -0
  12. package/src/core/utilities/index.js +3 -1
package/JASMINCSS-GUIDE.md CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  > **Complete reference of all available utility classes and components**
4
4
  >
5
- > Generated automatically from JasminCSS v1.0.14
5
+ > Generated automatically from JasminCSS v1.0.15
6
6
 
7
7
  ## Table of Contents
8
8
 
package/dist/index.js CHANGED
@@ -3476,6 +3476,110 @@ function generateAccessibilityUtilities(config) {
3476
3476
  };
3477
3477
  }
3478
3478
 
3479
+ // src/core/utilities/borders.js
3480
+ function generateBorderUtilities(config) {
3481
+ const classes = [];
3482
+ const borderWidths = ["0", "1", "2", "3", "4", "6", "8", "12"];
3483
+ borderWidths.forEach((w) => {
3484
+ const value = w === "0" ? "0px" : `${w}px`;
3485
+ classes.push({ name: `border-${w}`, css: `.border-${w} { border-width: ${value}; }` });
3486
+ classes.push({ name: `border-t-${w}`, css: `.border-t-${w} { border-top-width: ${value}; }` });
3487
+ classes.push({ name: `border-r-${w}`, css: `.border-r-${w} { border-right-width: ${value}; }` });
3488
+ classes.push({ name: `border-b-${w}`, css: `.border-b-${w} { border-bottom-width: ${value}; }` });
3489
+ classes.push({ name: `border-l-${w}`, css: `.border-l-${w} { border-left-width: ${value}; }` });
3490
+ classes.push({ name: `border-x-${w}`, css: `.border-x-${w} { border-left-width: ${value}; border-right-width: ${value}; }` });
3491
+ classes.push({ name: `border-y-${w}`, css: `.border-y-${w} { border-top-width: ${value}; border-bottom-width: ${value}; }` });
3492
+ });
3493
+ classes.push({ name: "border", css: ".border { border-width: 1px; }" });
3494
+ classes.push({ name: "border-t", css: ".border-t { border-top-width: 1px; }" });
3495
+ classes.push({ name: "border-r", css: ".border-r { border-right-width: 1px; }" });
3496
+ classes.push({ name: "border-b", css: ".border-b { border-bottom-width: 1px; }" });
3497
+ classes.push({ name: "border-l", css: ".border-l { border-left-width: 1px; }" });
3498
+ classes.push({ name: "border-x", css: ".border-x { border-left-width: 1px; border-right-width: 1px; }" });
3499
+ classes.push({ name: "border-y", css: ".border-y { border-top-width: 1px; border-bottom-width: 1px; }" });
3500
+ ["solid", "dashed", "dotted", "double", "hidden", "none"].forEach((s) => {
3501
+ classes.push({ name: `border-${s}`, css: `.border-${s} { border-style: ${s}; }` });
3502
+ });
3503
+ const radii = {
3504
+ "none": "0px",
3505
+ "sm": "0.125rem",
3506
+ "": "0.25rem",
3507
+ "md": "0.375rem",
3508
+ "lg": "0.5rem",
3509
+ "xl": "0.75rem",
3510
+ "2xl": "1rem",
3511
+ "3xl": "1.5rem",
3512
+ "full": "9999px"
3513
+ };
3514
+ Object.entries(radii).forEach(([key, value]) => {
3515
+ const name = key === "" ? "rounded" : `rounded-${key}`;
3516
+ classes.push({ name, css: `.${name} { border-radius: ${value}; }` });
3517
+ if (key !== "") {
3518
+ const cornerName = key === "" ? "" : `-${key}`;
3519
+ classes.push({ name: `rounded-t${cornerName}`, css: `.rounded-t${cornerName} { border-top-left-radius: ${value}; border-top-right-radius: ${value}; }` });
3520
+ classes.push({ name: `rounded-r${cornerName}`, css: `.rounded-r${cornerName} { border-top-right-radius: ${value}; border-bottom-right-radius: ${value}; }` });
3521
+ classes.push({ name: `rounded-b${cornerName}`, css: `.rounded-b${cornerName} { border-bottom-left-radius: ${value}; border-bottom-right-radius: ${value}; }` });
3522
+ classes.push({ name: `rounded-l${cornerName}`, css: `.rounded-l${cornerName} { border-top-left-radius: ${value}; border-bottom-left-radius: ${value}; }` });
3523
+ classes.push({ name: `rounded-tl${cornerName}`, css: `.rounded-tl${cornerName} { border-top-left-radius: ${value}; }` });
3524
+ classes.push({ name: `rounded-tr${cornerName}`, css: `.rounded-tr${cornerName} { border-top-right-radius: ${value}; }` });
3525
+ classes.push({ name: `rounded-bl${cornerName}`, css: `.rounded-bl${cornerName} { border-bottom-left-radius: ${value}; }` });
3526
+ classes.push({ name: `rounded-br${cornerName}`, css: `.rounded-br${cornerName} { border-bottom-right-radius: ${value}; }` });
3527
+ }
3528
+ });
3529
+ ["0", "1", "2", "4", "8"].forEach((w) => {
3530
+ const value = w === "0" ? "0px" : `${w}px`;
3531
+ classes.push({
3532
+ name: `divide-x-${w}`,
3533
+ css: `.divide-x-${w} > :not([hidden]) ~ :not([hidden]) { border-left-width: ${value}; }`
3534
+ });
3535
+ classes.push({
3536
+ name: `divide-y-${w}`,
3537
+ css: `.divide-y-${w} > :not([hidden]) ~ :not([hidden]) { border-top-width: ${value}; }`
3538
+ });
3539
+ });
3540
+ classes.push({
3541
+ name: "divide-x",
3542
+ css: ".divide-x > :not([hidden]) ~ :not([hidden]) { border-left-width: 1px; }"
3543
+ });
3544
+ classes.push({
3545
+ name: "divide-y",
3546
+ css: ".divide-y > :not([hidden]) ~ :not([hidden]) { border-top-width: 1px; }"
3547
+ });
3548
+ ["solid", "dashed", "dotted", "double", "none"].forEach((s) => {
3549
+ classes.push({
3550
+ name: `divide-${s}`,
3551
+ css: `.divide-${s} > :not([hidden]) ~ :not([hidden]) { border-style: ${s}; }`
3552
+ });
3553
+ });
3554
+ ["0", "1", "2", "4", "8"].forEach((w) => {
3555
+ classes.push({ name: `outline-${w}`, css: `.outline-${w} { outline-width: ${w}px; }` });
3556
+ });
3557
+ classes.push({ name: "outline", css: ".outline { outline-style: solid; }" });
3558
+ classes.push({ name: "outline-none", css: ".outline-none { outline: 2px solid transparent; outline-offset: 2px; }" });
3559
+ ["none", "solid", "dashed", "dotted", "double"].forEach((s) => {
3560
+ classes.push({ name: `outline-${s}`, css: `.outline-${s} { outline-style: ${s}; }` });
3561
+ });
3562
+ ["0", "1", "2", "4", "8"].forEach((o) => {
3563
+ classes.push({ name: `outline-offset-${o}`, css: `.outline-offset-${o} { outline-offset: ${o}px; }` });
3564
+ });
3565
+ ["0", "1", "2", "4", "8"].forEach((w) => {
3566
+ const value = w === "0" ? "0px" : `${w}px`;
3567
+ classes.push({
3568
+ name: `ring-${w}`,
3569
+ css: `.ring-${w} { --j-ring-offset-shadow: var(--j-ring-inset) 0 0 0 var(--j-ring-offset-width) var(--j-ring-offset-color); --j-ring-shadow: var(--j-ring-inset) 0 0 0 calc(${value} + var(--j-ring-offset-width)) var(--j-ring-color); box-shadow: var(--j-ring-offset-shadow), var(--j-ring-shadow), var(--j-shadow, 0 0 #0000); }`
3570
+ });
3571
+ });
3572
+ classes.push({
3573
+ name: "ring",
3574
+ css: ".ring { --j-ring-offset-shadow: var(--j-ring-inset) 0 0 0 var(--j-ring-offset-width) var(--j-ring-offset-color); --j-ring-shadow: var(--j-ring-inset) 0 0 0 calc(3px + var(--j-ring-offset-width)) var(--j-ring-color); box-shadow: var(--j-ring-offset-shadow), var(--j-ring-shadow), var(--j-shadow, 0 0 #0000); }"
3575
+ });
3576
+ classes.push({ name: "ring-inset", css: ".ring-inset { --j-ring-inset: inset; }" });
3577
+ return {
3578
+ css: classes.map((c) => c.css).join("\n"),
3579
+ classes
3580
+ };
3581
+ }
3582
+
3479
3583
  // src/core/utilities/index.js
3480
3584
  var utilityGenerators = {
3481
3585
  layout: generateLayoutUtilities,
@@ -3491,7 +3595,8 @@ var utilityGenerators = {
3491
3595
  columns: generateColumnUtilities,
3492
3596
  scroll: generateScrollUtilities,
3493
3597
  svg: generateSvgUtilities,
3494
- accessibility: generateAccessibilityUtilities
3598
+ accessibility: generateAccessibilityUtilities,
3599
+ borders: generateBorderUtilities
3495
3600
  };
3496
3601
  function generateUtilities(config, options = {}) {
3497
3602
  const { usedClasses, includeAll = false } = options;
package/dist/index.mjs CHANGED
@@ -3433,6 +3433,110 @@ function generateAccessibilityUtilities(config) {
3433
3433
  };
3434
3434
  }
3435
3435
 
3436
+ // src/core/utilities/borders.js
3437
+ function generateBorderUtilities(config) {
3438
+ const classes = [];
3439
+ const borderWidths = ["0", "1", "2", "3", "4", "6", "8", "12"];
3440
+ borderWidths.forEach((w) => {
3441
+ const value = w === "0" ? "0px" : `${w}px`;
3442
+ classes.push({ name: `border-${w}`, css: `.border-${w} { border-width: ${value}; }` });
3443
+ classes.push({ name: `border-t-${w}`, css: `.border-t-${w} { border-top-width: ${value}; }` });
3444
+ classes.push({ name: `border-r-${w}`, css: `.border-r-${w} { border-right-width: ${value}; }` });
3445
+ classes.push({ name: `border-b-${w}`, css: `.border-b-${w} { border-bottom-width: ${value}; }` });
3446
+ classes.push({ name: `border-l-${w}`, css: `.border-l-${w} { border-left-width: ${value}; }` });
3447
+ classes.push({ name: `border-x-${w}`, css: `.border-x-${w} { border-left-width: ${value}; border-right-width: ${value}; }` });
3448
+ classes.push({ name: `border-y-${w}`, css: `.border-y-${w} { border-top-width: ${value}; border-bottom-width: ${value}; }` });
3449
+ });
3450
+ classes.push({ name: "border", css: ".border { border-width: 1px; }" });
3451
+ classes.push({ name: "border-t", css: ".border-t { border-top-width: 1px; }" });
3452
+ classes.push({ name: "border-r", css: ".border-r { border-right-width: 1px; }" });
3453
+ classes.push({ name: "border-b", css: ".border-b { border-bottom-width: 1px; }" });
3454
+ classes.push({ name: "border-l", css: ".border-l { border-left-width: 1px; }" });
3455
+ classes.push({ name: "border-x", css: ".border-x { border-left-width: 1px; border-right-width: 1px; }" });
3456
+ classes.push({ name: "border-y", css: ".border-y { border-top-width: 1px; border-bottom-width: 1px; }" });
3457
+ ["solid", "dashed", "dotted", "double", "hidden", "none"].forEach((s) => {
3458
+ classes.push({ name: `border-${s}`, css: `.border-${s} { border-style: ${s}; }` });
3459
+ });
3460
+ const radii = {
3461
+ "none": "0px",
3462
+ "sm": "0.125rem",
3463
+ "": "0.25rem",
3464
+ "md": "0.375rem",
3465
+ "lg": "0.5rem",
3466
+ "xl": "0.75rem",
3467
+ "2xl": "1rem",
3468
+ "3xl": "1.5rem",
3469
+ "full": "9999px"
3470
+ };
3471
+ Object.entries(radii).forEach(([key, value]) => {
3472
+ const name = key === "" ? "rounded" : `rounded-${key}`;
3473
+ classes.push({ name, css: `.${name} { border-radius: ${value}; }` });
3474
+ if (key !== "") {
3475
+ const cornerName = key === "" ? "" : `-${key}`;
3476
+ classes.push({ name: `rounded-t${cornerName}`, css: `.rounded-t${cornerName} { border-top-left-radius: ${value}; border-top-right-radius: ${value}; }` });
3477
+ classes.push({ name: `rounded-r${cornerName}`, css: `.rounded-r${cornerName} { border-top-right-radius: ${value}; border-bottom-right-radius: ${value}; }` });
3478
+ classes.push({ name: `rounded-b${cornerName}`, css: `.rounded-b${cornerName} { border-bottom-left-radius: ${value}; border-bottom-right-radius: ${value}; }` });
3479
+ classes.push({ name: `rounded-l${cornerName}`, css: `.rounded-l${cornerName} { border-top-left-radius: ${value}; border-bottom-left-radius: ${value}; }` });
3480
+ classes.push({ name: `rounded-tl${cornerName}`, css: `.rounded-tl${cornerName} { border-top-left-radius: ${value}; }` });
3481
+ classes.push({ name: `rounded-tr${cornerName}`, css: `.rounded-tr${cornerName} { border-top-right-radius: ${value}; }` });
3482
+ classes.push({ name: `rounded-bl${cornerName}`, css: `.rounded-bl${cornerName} { border-bottom-left-radius: ${value}; }` });
3483
+ classes.push({ name: `rounded-br${cornerName}`, css: `.rounded-br${cornerName} { border-bottom-right-radius: ${value}; }` });
3484
+ }
3485
+ });
3486
+ ["0", "1", "2", "4", "8"].forEach((w) => {
3487
+ const value = w === "0" ? "0px" : `${w}px`;
3488
+ classes.push({
3489
+ name: `divide-x-${w}`,
3490
+ css: `.divide-x-${w} > :not([hidden]) ~ :not([hidden]) { border-left-width: ${value}; }`
3491
+ });
3492
+ classes.push({
3493
+ name: `divide-y-${w}`,
3494
+ css: `.divide-y-${w} > :not([hidden]) ~ :not([hidden]) { border-top-width: ${value}; }`
3495
+ });
3496
+ });
3497
+ classes.push({
3498
+ name: "divide-x",
3499
+ css: ".divide-x > :not([hidden]) ~ :not([hidden]) { border-left-width: 1px; }"
3500
+ });
3501
+ classes.push({
3502
+ name: "divide-y",
3503
+ css: ".divide-y > :not([hidden]) ~ :not([hidden]) { border-top-width: 1px; }"
3504
+ });
3505
+ ["solid", "dashed", "dotted", "double", "none"].forEach((s) => {
3506
+ classes.push({
3507
+ name: `divide-${s}`,
3508
+ css: `.divide-${s} > :not([hidden]) ~ :not([hidden]) { border-style: ${s}; }`
3509
+ });
3510
+ });
3511
+ ["0", "1", "2", "4", "8"].forEach((w) => {
3512
+ classes.push({ name: `outline-${w}`, css: `.outline-${w} { outline-width: ${w}px; }` });
3513
+ });
3514
+ classes.push({ name: "outline", css: ".outline { outline-style: solid; }" });
3515
+ classes.push({ name: "outline-none", css: ".outline-none { outline: 2px solid transparent; outline-offset: 2px; }" });
3516
+ ["none", "solid", "dashed", "dotted", "double"].forEach((s) => {
3517
+ classes.push({ name: `outline-${s}`, css: `.outline-${s} { outline-style: ${s}; }` });
3518
+ });
3519
+ ["0", "1", "2", "4", "8"].forEach((o) => {
3520
+ classes.push({ name: `outline-offset-${o}`, css: `.outline-offset-${o} { outline-offset: ${o}px; }` });
3521
+ });
3522
+ ["0", "1", "2", "4", "8"].forEach((w) => {
3523
+ const value = w === "0" ? "0px" : `${w}px`;
3524
+ classes.push({
3525
+ name: `ring-${w}`,
3526
+ css: `.ring-${w} { --j-ring-offset-shadow: var(--j-ring-inset) 0 0 0 var(--j-ring-offset-width) var(--j-ring-offset-color); --j-ring-shadow: var(--j-ring-inset) 0 0 0 calc(${value} + var(--j-ring-offset-width)) var(--j-ring-color); box-shadow: var(--j-ring-offset-shadow), var(--j-ring-shadow), var(--j-shadow, 0 0 #0000); }`
3527
+ });
3528
+ });
3529
+ classes.push({
3530
+ name: "ring",
3531
+ css: ".ring { --j-ring-offset-shadow: var(--j-ring-inset) 0 0 0 var(--j-ring-offset-width) var(--j-ring-offset-color); --j-ring-shadow: var(--j-ring-inset) 0 0 0 calc(3px + var(--j-ring-offset-width)) var(--j-ring-color); box-shadow: var(--j-ring-offset-shadow), var(--j-ring-shadow), var(--j-shadow, 0 0 #0000); }"
3532
+ });
3533
+ classes.push({ name: "ring-inset", css: ".ring-inset { --j-ring-inset: inset; }" });
3534
+ return {
3535
+ css: classes.map((c) => c.css).join("\n"),
3536
+ classes
3537
+ };
3538
+ }
3539
+
3436
3540
  // src/core/utilities/index.js
3437
3541
  var utilityGenerators = {
3438
3542
  layout: generateLayoutUtilities,
@@ -3448,7 +3552,8 @@ var utilityGenerators = {
3448
3552
  columns: generateColumnUtilities,
3449
3553
  scroll: generateScrollUtilities,
3450
3554
  svg: generateSvgUtilities,
3451
- accessibility: generateAccessibilityUtilities
3555
+ accessibility: generateAccessibilityUtilities,
3556
+ borders: generateBorderUtilities
3452
3557
  };
3453
3558
  function generateUtilities(config, options = {}) {
3454
3559
  const { usedClasses, includeAll = false } = options;
package/dist/plugins/jasmin-loader.js CHANGED
@@ -3387,6 +3387,110 @@ function generateAccessibilityUtilities(config) {
3387
3387
  };
3388
3388
  }
3389
3389
 
3390
+ // src/core/utilities/borders.js
3391
+ function generateBorderUtilities(config) {
3392
+ const classes = [];
3393
+ const borderWidths = ["0", "1", "2", "3", "4", "6", "8", "12"];
3394
+ borderWidths.forEach((w) => {
3395
+ const value = w === "0" ? "0px" : `${w}px`;
3396
+ classes.push({ name: `border-${w}`, css: `.border-${w} { border-width: ${value}; }` });
3397
+ classes.push({ name: `border-t-${w}`, css: `.border-t-${w} { border-top-width: ${value}; }` });
3398
+ classes.push({ name: `border-r-${w}`, css: `.border-r-${w} { border-right-width: ${value}; }` });
3399
+ classes.push({ name: `border-b-${w}`, css: `.border-b-${w} { border-bottom-width: ${value}; }` });
3400
+ classes.push({ name: `border-l-${w}`, css: `.border-l-${w} { border-left-width: ${value}; }` });
3401
+ classes.push({ name: `border-x-${w}`, css: `.border-x-${w} { border-left-width: ${value}; border-right-width: ${value}; }` });
3402
+ classes.push({ name: `border-y-${w}`, css: `.border-y-${w} { border-top-width: ${value}; border-bottom-width: ${value}; }` });
3403
+ });
3404
+ classes.push({ name: "border", css: ".border { border-width: 1px; }" });
3405
+ classes.push({ name: "border-t", css: ".border-t { border-top-width: 1px; }" });
3406
+ classes.push({ name: "border-r", css: ".border-r { border-right-width: 1px; }" });
3407
+ classes.push({ name: "border-b", css: ".border-b { border-bottom-width: 1px; }" });
3408
+ classes.push({ name: "border-l", css: ".border-l { border-left-width: 1px; }" });
3409
+ classes.push({ name: "border-x", css: ".border-x { border-left-width: 1px; border-right-width: 1px; }" });
3410
+ classes.push({ name: "border-y", css: ".border-y { border-top-width: 1px; border-bottom-width: 1px; }" });
3411
+ ["solid", "dashed", "dotted", "double", "hidden", "none"].forEach((s) => {
3412
+ classes.push({ name: `border-${s}`, css: `.border-${s} { border-style: ${s}; }` });
3413
+ });
3414
+ const radii = {
3415
+ "none": "0px",
3416
+ "sm": "0.125rem",
3417
+ "": "0.25rem",
3418
+ "md": "0.375rem",
3419
+ "lg": "0.5rem",
3420
+ "xl": "0.75rem",
3421
+ "2xl": "1rem",
3422
+ "3xl": "1.5rem",
3423
+ "full": "9999px"
3424
+ };
3425
+ Object.entries(radii).forEach(([key, value]) => {
3426
+ const name = key === "" ? "rounded" : `rounded-${key}`;
3427
+ classes.push({ name, css: `.${name} { border-radius: ${value}; }` });
3428
+ if (key !== "") {
3429
+ const cornerName = key === "" ? "" : `-${key}`;
3430
+ classes.push({ name: `rounded-t${cornerName}`, css: `.rounded-t${cornerName} { border-top-left-radius: ${value}; border-top-right-radius: ${value}; }` });
3431
+ classes.push({ name: `rounded-r${cornerName}`, css: `.rounded-r${cornerName} { border-top-right-radius: ${value}; border-bottom-right-radius: ${value}; }` });
3432
+ classes.push({ name: `rounded-b${cornerName}`, css: `.rounded-b${cornerName} { border-bottom-left-radius: ${value}; border-bottom-right-radius: ${value}; }` });
3433
+ classes.push({ name: `rounded-l${cornerName}`, css: `.rounded-l${cornerName} { border-top-left-radius: ${value}; border-bottom-left-radius: ${value}; }` });
3434
+ classes.push({ name: `rounded-tl${cornerName}`, css: `.rounded-tl${cornerName} { border-top-left-radius: ${value}; }` });
3435
+ classes.push({ name: `rounded-tr${cornerName}`, css: `.rounded-tr${cornerName} { border-top-right-radius: ${value}; }` });
3436
+ classes.push({ name: `rounded-bl${cornerName}`, css: `.rounded-bl${cornerName} { border-bottom-left-radius: ${value}; }` });
3437
+ classes.push({ name: `rounded-br${cornerName}`, css: `.rounded-br${cornerName} { border-bottom-right-radius: ${value}; }` });
3438
+ }
3439
+ });
3440
+ ["0", "1", "2", "4", "8"].forEach((w) => {
3441
+ const value = w === "0" ? "0px" : `${w}px`;
3442
+ classes.push({
3443
+ name: `divide-x-${w}`,
3444
+ css: `.divide-x-${w} > :not([hidden]) ~ :not([hidden]) { border-left-width: ${value}; }`
3445
+ });
3446
+ classes.push({
3447
+ name: `divide-y-${w}`,
3448
+ css: `.divide-y-${w} > :not([hidden]) ~ :not([hidden]) { border-top-width: ${value}; }`
3449
+ });
3450
+ });
3451
+ classes.push({
3452
+ name: "divide-x",
3453
+ css: ".divide-x > :not([hidden]) ~ :not([hidden]) { border-left-width: 1px; }"
3454
+ });
3455
+ classes.push({
3456
+ name: "divide-y",
3457
+ css: ".divide-y > :not([hidden]) ~ :not([hidden]) { border-top-width: 1px; }"
3458
+ });
3459
+ ["solid", "dashed", "dotted", "double", "none"].forEach((s) => {
3460
+ classes.push({
3461
+ name: `divide-${s}`,
3462
+ css: `.divide-${s} > :not([hidden]) ~ :not([hidden]) { border-style: ${s}; }`
3463
+ });
3464
+ });
3465
+ ["0", "1", "2", "4", "8"].forEach((w) => {
3466
+ classes.push({ name: `outline-${w}`, css: `.outline-${w} { outline-width: ${w}px; }` });
3467
+ });
3468
+ classes.push({ name: "outline", css: ".outline { outline-style: solid; }" });
3469
+ classes.push({ name: "outline-none", css: ".outline-none { outline: 2px solid transparent; outline-offset: 2px; }" });
3470
+ ["none", "solid", "dashed", "dotted", "double"].forEach((s) => {
3471
+ classes.push({ name: `outline-${s}`, css: `.outline-${s} { outline-style: ${s}; }` });
3472
+ });
3473
+ ["0", "1", "2", "4", "8"].forEach((o) => {
3474
+ classes.push({ name: `outline-offset-${o}`, css: `.outline-offset-${o} { outline-offset: ${o}px; }` });
3475
+ });
3476
+ ["0", "1", "2", "4", "8"].forEach((w) => {
3477
+ const value = w === "0" ? "0px" : `${w}px`;
3478
+ classes.push({
3479
+ name: `ring-${w}`,
3480
+ css: `.ring-${w} { --j-ring-offset-shadow: var(--j-ring-inset) 0 0 0 var(--j-ring-offset-width) var(--j-ring-offset-color); --j-ring-shadow: var(--j-ring-inset) 0 0 0 calc(${value} + var(--j-ring-offset-width)) var(--j-ring-color); box-shadow: var(--j-ring-offset-shadow), var(--j-ring-shadow), var(--j-shadow, 0 0 #0000); }`
3481
+ });
3482
+ });
3483
+ classes.push({
3484
+ name: "ring",
3485
+ css: ".ring { --j-ring-offset-shadow: var(--j-ring-inset) 0 0 0 var(--j-ring-offset-width) var(--j-ring-offset-color); --j-ring-shadow: var(--j-ring-inset) 0 0 0 calc(3px + var(--j-ring-offset-width)) var(--j-ring-color); box-shadow: var(--j-ring-offset-shadow), var(--j-ring-shadow), var(--j-shadow, 0 0 #0000); }"
3486
+ });
3487
+ classes.push({ name: "ring-inset", css: ".ring-inset { --j-ring-inset: inset; }" });
3488
+ return {
3489
+ css: classes.map((c) => c.css).join("\n"),
3490
+ classes
3491
+ };
3492
+ }
3493
+
3390
3494
  // src/core/utilities/index.js
3391
3495
  var utilityGenerators = {
3392
3496
  layout: generateLayoutUtilities,
@@ -3402,7 +3506,8 @@ var utilityGenerators = {
3402
3506
  columns: generateColumnUtilities,
3403
3507
  scroll: generateScrollUtilities,
3404
3508
  svg: generateSvgUtilities,
3405
- accessibility: generateAccessibilityUtilities
3509
+ accessibility: generateAccessibilityUtilities,
3510
+ borders: generateBorderUtilities
3406
3511
  };
3407
3512
  function generateUtilities(config, options = {}) {
3408
3513
  const { usedClasses, includeAll = false } = options;
package/dist/plugins/jasmin-loader.mjs CHANGED
@@ -3354,6 +3354,110 @@ function generateAccessibilityUtilities(config) {
3354
3354
  };
3355
3355
  }
3356
3356
 
3357
+ // src/core/utilities/borders.js
3358
+ function generateBorderUtilities(config) {
3359
+ const classes = [];
3360
+ const borderWidths = ["0", "1", "2", "3", "4", "6", "8", "12"];
3361
+ borderWidths.forEach((w) => {
3362
+ const value = w === "0" ? "0px" : `${w}px`;
3363
+ classes.push({ name: `border-${w}`, css: `.border-${w} { border-width: ${value}; }` });
3364
+ classes.push({ name: `border-t-${w}`, css: `.border-t-${w} { border-top-width: ${value}; }` });
3365
+ classes.push({ name: `border-r-${w}`, css: `.border-r-${w} { border-right-width: ${value}; }` });
3366
+ classes.push({ name: `border-b-${w}`, css: `.border-b-${w} { border-bottom-width: ${value}; }` });
3367
+ classes.push({ name: `border-l-${w}`, css: `.border-l-${w} { border-left-width: ${value}; }` });
3368
+ classes.push({ name: `border-x-${w}`, css: `.border-x-${w} { border-left-width: ${value}; border-right-width: ${value}; }` });
3369
+ classes.push({ name: `border-y-${w}`, css: `.border-y-${w} { border-top-width: ${value}; border-bottom-width: ${value}; }` });
3370
+ });
3371
+ classes.push({ name: "border", css: ".border { border-width: 1px; }" });
3372
+ classes.push({ name: "border-t", css: ".border-t { border-top-width: 1px; }" });
3373
+ classes.push({ name: "border-r", css: ".border-r { border-right-width: 1px; }" });
3374
+ classes.push({ name: "border-b", css: ".border-b { border-bottom-width: 1px; }" });
3375
+ classes.push({ name: "border-l", css: ".border-l { border-left-width: 1px; }" });
3376
+ classes.push({ name: "border-x", css: ".border-x { border-left-width: 1px; border-right-width: 1px; }" });
3377
+ classes.push({ name: "border-y", css: ".border-y { border-top-width: 1px; border-bottom-width: 1px; }" });
3378
+ ["solid", "dashed", "dotted", "double", "hidden", "none"].forEach((s) => {
3379
+ classes.push({ name: `border-${s}`, css: `.border-${s} { border-style: ${s}; }` });
3380
+ });
3381
+ const radii = {
3382
+ "none": "0px",
3383
+ "sm": "0.125rem",
3384
+ "": "0.25rem",
3385
+ "md": "0.375rem",
3386
+ "lg": "0.5rem",
3387
+ "xl": "0.75rem",
3388
+ "2xl": "1rem",
3389
+ "3xl": "1.5rem",
3390
+ "full": "9999px"
3391
+ };
3392
+ Object.entries(radii).forEach(([key, value]) => {
3393
+ const name = key === "" ? "rounded" : `rounded-${key}`;
3394
+ classes.push({ name, css: `.${name} { border-radius: ${value}; }` });
3395
+ if (key !== "") {
3396
+ const cornerName = key === "" ? "" : `-${key}`;
3397
+ classes.push({ name: `rounded-t${cornerName}`, css: `.rounded-t${cornerName} { border-top-left-radius: ${value}; border-top-right-radius: ${value}; }` });
3398
+ classes.push({ name: `rounded-r${cornerName}`, css: `.rounded-r${cornerName} { border-top-right-radius: ${value}; border-bottom-right-radius: ${value}; }` });
3399
+ classes.push({ name: `rounded-b${cornerName}`, css: `.rounded-b${cornerName} { border-bottom-left-radius: ${value}; border-bottom-right-radius: ${value}; }` });
3400
+ classes.push({ name: `rounded-l${cornerName}`, css: `.rounded-l${cornerName} { border-top-left-radius: ${value}; border-bottom-left-radius: ${value}; }` });
3401
+ classes.push({ name: `rounded-tl${cornerName}`, css: `.rounded-tl${cornerName} { border-top-left-radius: ${value}; }` });
3402
+ classes.push({ name: `rounded-tr${cornerName}`, css: `.rounded-tr${cornerName} { border-top-right-radius: ${value}; }` });
3403
+ classes.push({ name: `rounded-bl${cornerName}`, css: `.rounded-bl${cornerName} { border-bottom-left-radius: ${value}; }` });
3404
+ classes.push({ name: `rounded-br${cornerName}`, css: `.rounded-br${cornerName} { border-bottom-right-radius: ${value}; }` });
3405
+ }
3406
+ });
3407
+ ["0", "1", "2", "4", "8"].forEach((w) => {
3408
+ const value = w === "0" ? "0px" : `${w}px`;
3409
+ classes.push({
3410
+ name: `divide-x-${w}`,
3411
+ css: `.divide-x-${w} > :not([hidden]) ~ :not([hidden]) { border-left-width: ${value}; }`
3412
+ });
3413
+ classes.push({
3414
+ name: `divide-y-${w}`,
3415
+ css: `.divide-y-${w} > :not([hidden]) ~ :not([hidden]) { border-top-width: ${value}; }`
3416
+ });
3417
+ });
3418
+ classes.push({
3419
+ name: "divide-x",
3420
+ css: ".divide-x > :not([hidden]) ~ :not([hidden]) { border-left-width: 1px; }"
3421
+ });
3422
+ classes.push({
3423
+ name: "divide-y",
3424
+ css: ".divide-y > :not([hidden]) ~ :not([hidden]) { border-top-width: 1px; }"
3425
+ });
3426
+ ["solid", "dashed", "dotted", "double", "none"].forEach((s) => {
3427
+ classes.push({
3428
+ name: `divide-${s}`,
3429
+ css: `.divide-${s} > :not([hidden]) ~ :not([hidden]) { border-style: ${s}; }`
3430
+ });
3431
+ });
3432
+ ["0", "1", "2", "4", "8"].forEach((w) => {
3433
+ classes.push({ name: `outline-${w}`, css: `.outline-${w} { outline-width: ${w}px; }` });
3434
+ });
3435
+ classes.push({ name: "outline", css: ".outline { outline-style: solid; }" });
3436
+ classes.push({ name: "outline-none", css: ".outline-none { outline: 2px solid transparent; outline-offset: 2px; }" });
3437
+ ["none", "solid", "dashed", "dotted", "double"].forEach((s) => {
3438
+ classes.push({ name: `outline-${s}`, css: `.outline-${s} { outline-style: ${s}; }` });
3439
+ });
3440
+ ["0", "1", "2", "4", "8"].forEach((o) => {
3441
+ classes.push({ name: `outline-offset-${o}`, css: `.outline-offset-${o} { outline-offset: ${o}px; }` });
3442
+ });
3443
+ ["0", "1", "2", "4", "8"].forEach((w) => {
3444
+ const value = w === "0" ? "0px" : `${w}px`;
3445
+ classes.push({
3446
+ name: `ring-${w}`,
3447
+ css: `.ring-${w} { --j-ring-offset-shadow: var(--j-ring-inset) 0 0 0 var(--j-ring-offset-width) var(--j-ring-offset-color); --j-ring-shadow: var(--j-ring-inset) 0 0 0 calc(${value} + var(--j-ring-offset-width)) var(--j-ring-color); box-shadow: var(--j-ring-offset-shadow), var(--j-ring-shadow), var(--j-shadow, 0 0 #0000); }`
3448
+ });
3449
+ });
3450
+ classes.push({
3451
+ name: "ring",
3452
+ css: ".ring { --j-ring-offset-shadow: var(--j-ring-inset) 0 0 0 var(--j-ring-offset-width) var(--j-ring-offset-color); --j-ring-shadow: var(--j-ring-inset) 0 0 0 calc(3px + var(--j-ring-offset-width)) var(--j-ring-color); box-shadow: var(--j-ring-offset-shadow), var(--j-ring-shadow), var(--j-shadow, 0 0 #0000); }"
3453
+ });
3454
+ classes.push({ name: "ring-inset", css: ".ring-inset { --j-ring-inset: inset; }" });
3455
+ return {
3456
+ css: classes.map((c) => c.css).join("\n"),
3457
+ classes
3458
+ };
3459
+ }
3460
+
3357
3461
  // src/core/utilities/index.js
3358
3462
  var utilityGenerators = {
3359
3463
  layout: generateLayoutUtilities,
@@ -3369,7 +3473,8 @@ var utilityGenerators = {
3369
3473
  columns: generateColumnUtilities,
3370
3474
  scroll: generateScrollUtilities,
3371
3475
  svg: generateSvgUtilities,
3372
- accessibility: generateAccessibilityUtilities
3476
+ accessibility: generateAccessibilityUtilities,
3477
+ borders: generateBorderUtilities
3373
3478
  };
3374
3479
  function generateUtilities(config, options = {}) {
3375
3480
  const { usedClasses, includeAll = false } = options;
package/dist/plugins/nextjs.js CHANGED
@@ -3446,6 +3446,114 @@ var init_accessibility = __esm({
3446
3446
  }
3447
3447
  });
3448
3448
 
3449
+ // src/core/utilities/borders.js
3450
+ function generateBorderUtilities(config) {
3451
+ const classes = [];
3452
+ const borderWidths = ["0", "1", "2", "3", "4", "6", "8", "12"];
3453
+ borderWidths.forEach((w) => {
3454
+ const value = w === "0" ? "0px" : `${w}px`;
3455
+ classes.push({ name: `border-${w}`, css: `.border-${w} { border-width: ${value}; }` });
3456
+ classes.push({ name: `border-t-${w}`, css: `.border-t-${w} { border-top-width: ${value}; }` });
3457
+ classes.push({ name: `border-r-${w}`, css: `.border-r-${w} { border-right-width: ${value}; }` });
3458
+ classes.push({ name: `border-b-${w}`, css: `.border-b-${w} { border-bottom-width: ${value}; }` });
3459
+ classes.push({ name: `border-l-${w}`, css: `.border-l-${w} { border-left-width: ${value}; }` });
3460
+ classes.push({ name: `border-x-${w}`, css: `.border-x-${w} { border-left-width: ${value}; border-right-width: ${value}; }` });
3461
+ classes.push({ name: `border-y-${w}`, css: `.border-y-${w} { border-top-width: ${value}; border-bottom-width: ${value}; }` });
3462
+ });
3463
+ classes.push({ name: "border", css: ".border { border-width: 1px; }" });
3464
+ classes.push({ name: "border-t", css: ".border-t { border-top-width: 1px; }" });
3465
+ classes.push({ name: "border-r", css: ".border-r { border-right-width: 1px; }" });
3466
+ classes.push({ name: "border-b", css: ".border-b { border-bottom-width: 1px; }" });
3467
+ classes.push({ name: "border-l", css: ".border-l { border-left-width: 1px; }" });
3468
+ classes.push({ name: "border-x", css: ".border-x { border-left-width: 1px; border-right-width: 1px; }" });
3469
+ classes.push({ name: "border-y", css: ".border-y { border-top-width: 1px; border-bottom-width: 1px; }" });
3470
+ ["solid", "dashed", "dotted", "double", "hidden", "none"].forEach((s) => {
3471
+ classes.push({ name: `border-${s}`, css: `.border-${s} { border-style: ${s}; }` });
3472
+ });
3473
+ const radii = {
3474
+ "none": "0px",
3475
+ "sm": "0.125rem",
3476
+ "": "0.25rem",
3477
+ "md": "0.375rem",
3478
+ "lg": "0.5rem",
3479
+ "xl": "0.75rem",
3480
+ "2xl": "1rem",
3481
+ "3xl": "1.5rem",
3482
+ "full": "9999px"
3483
+ };
3484
+ Object.entries(radii).forEach(([key, value]) => {
3485
+ const name = key === "" ? "rounded" : `rounded-${key}`;
3486
+ classes.push({ name, css: `.${name} { border-radius: ${value}; }` });
3487
+ if (key !== "") {
3488
+ const cornerName = key === "" ? "" : `-${key}`;
3489
+ classes.push({ name: `rounded-t${cornerName}`, css: `.rounded-t${cornerName} { border-top-left-radius: ${value}; border-top-right-radius: ${value}; }` });
3490
+ classes.push({ name: `rounded-r${cornerName}`, css: `.rounded-r${cornerName} { border-top-right-radius: ${value}; border-bottom-right-radius: ${value}; }` });
3491
+ classes.push({ name: `rounded-b${cornerName}`, css: `.rounded-b${cornerName} { border-bottom-left-radius: ${value}; border-bottom-right-radius: ${value}; }` });
3492
+ classes.push({ name: `rounded-l${cornerName}`, css: `.rounded-l${cornerName} { border-top-left-radius: ${value}; border-bottom-left-radius: ${value}; }` });
3493
+ classes.push({ name: `rounded-tl${cornerName}`, css: `.rounded-tl${cornerName} { border-top-left-radius: ${value}; }` });
3494
+ classes.push({ name: `rounded-tr${cornerName}`, css: `.rounded-tr${cornerName} { border-top-right-radius: ${value}; }` });
3495
+ classes.push({ name: `rounded-bl${cornerName}`, css: `.rounded-bl${cornerName} { border-bottom-left-radius: ${value}; }` });
3496
+ classes.push({ name: `rounded-br${cornerName}`, css: `.rounded-br${cornerName} { border-bottom-right-radius: ${value}; }` });
3497
+ }
3498
+ });
3499
+ ["0", "1", "2", "4", "8"].forEach((w) => {
3500
+ const value = w === "0" ? "0px" : `${w}px`;
3501
+ classes.push({
3502
+ name: `divide-x-${w}`,
3503
+ css: `.divide-x-${w} > :not([hidden]) ~ :not([hidden]) { border-left-width: ${value}; }`
3504
+ });
3505
+ classes.push({
3506
+ name: `divide-y-${w}`,
3507
+ css: `.divide-y-${w} > :not([hidden]) ~ :not([hidden]) { border-top-width: ${value}; }`
3508
+ });
3509
+ });
3510
+ classes.push({
3511
+ name: "divide-x",
3512
+ css: ".divide-x > :not([hidden]) ~ :not([hidden]) { border-left-width: 1px; }"
3513
+ });
3514
+ classes.push({
3515
+ name: "divide-y",
3516
+ css: ".divide-y > :not([hidden]) ~ :not([hidden]) { border-top-width: 1px; }"
3517
+ });
3518
+ ["solid", "dashed", "dotted", "double", "none"].forEach((s) => {
3519
+ classes.push({
3520
+ name: `divide-${s}`,
3521
+ css: `.divide-${s} > :not([hidden]) ~ :not([hidden]) { border-style: ${s}; }`
3522
+ });
3523
+ });
3524
+ ["0", "1", "2", "4", "8"].forEach((w) => {
3525
+ classes.push({ name: `outline-${w}`, css: `.outline-${w} { outline-width: ${w}px; }` });
3526
+ });
3527
+ classes.push({ name: "outline", css: ".outline { outline-style: solid; }" });
3528
+ classes.push({ name: "outline-none", css: ".outline-none { outline: 2px solid transparent; outline-offset: 2px; }" });
3529
+ ["none", "solid", "dashed", "dotted", "double"].forEach((s) => {
3530
+ classes.push({ name: `outline-${s}`, css: `.outline-${s} { outline-style: ${s}; }` });
3531
+ });
3532
+ ["0", "1", "2", "4", "8"].forEach((o) => {
3533
+ classes.push({ name: `outline-offset-${o}`, css: `.outline-offset-${o} { outline-offset: ${o}px; }` });
3534
+ });
3535
+ ["0", "1", "2", "4", "8"].forEach((w) => {
3536
+ const value = w === "0" ? "0px" : `${w}px`;
3537
+ classes.push({
3538
+ name: `ring-${w}`,
3539
+ css: `.ring-${w} { --j-ring-offset-shadow: var(--j-ring-inset) 0 0 0 var(--j-ring-offset-width) var(--j-ring-offset-color); --j-ring-shadow: var(--j-ring-inset) 0 0 0 calc(${value} + var(--j-ring-offset-width)) var(--j-ring-color); box-shadow: var(--j-ring-offset-shadow), var(--j-ring-shadow), var(--j-shadow, 0 0 #0000); }`
3540
+ });
3541
+ });
3542
+ classes.push({
3543
+ name: "ring",
3544
+ css: ".ring { --j-ring-offset-shadow: var(--j-ring-inset) 0 0 0 var(--j-ring-offset-width) var(--j-ring-offset-color); --j-ring-shadow: var(--j-ring-inset) 0 0 0 calc(3px + var(--j-ring-offset-width)) var(--j-ring-color); box-shadow: var(--j-ring-offset-shadow), var(--j-ring-shadow), var(--j-shadow, 0 0 #0000); }"
3545
+ });
3546
+ classes.push({ name: "ring-inset", css: ".ring-inset { --j-ring-inset: inset; }" });
3547
+ return {
3548
+ css: classes.map((c) => c.css).join("\n"),
3549
+ classes
3550
+ };
3551
+ }
3552
+ var init_borders = __esm({
3553
+ "src/core/utilities/borders.js"() {
3554
+ }
3555
+ });
3556
+
3449
3557
  // src/core/utilities/index.js
3450
3558
  function generateUtilities(config, options = {}) {
3451
3559
  const { usedClasses, includeAll = false } = options;
@@ -3639,6 +3747,7 @@ var init_utilities = __esm({
3639
3747
  init_scroll();
3640
3748
  init_svg();
3641
3749
  init_accessibility();
3750
+ init_borders();
3642
3751
  utilityGenerators = {
3643
3752
  layout: generateLayoutUtilities,
3644
3753
  spacing: generateSpacingUtilities,
@@ -3653,7 +3762,8 @@ var init_utilities = __esm({
3653
3762
  columns: generateColumnUtilities,
3654
3763
  scroll: generateScrollUtilities,
3655
3764
  svg: generateSvgUtilities,
3656
- accessibility: generateAccessibilityUtilities
3765
+ accessibility: generateAccessibilityUtilities,
3766
+ borders: generateBorderUtilities
3657
3767
  };
3658
3768
  }
3659
3769
  });
package/dist/plugins/nextjs.mjs CHANGED
@@ -3424,6 +3424,114 @@ var init_accessibility = __esm({
3424
3424
  }
3425
3425
  });
3426
3426
 
3427
+ // src/core/utilities/borders.js
3428
+ function generateBorderUtilities(config) {
3429
+ const classes = [];
3430
+ const borderWidths = ["0", "1", "2", "3", "4", "6", "8", "12"];
3431
+ borderWidths.forEach((w) => {
3432
+ const value = w === "0" ? "0px" : `${w}px`;
3433
+ classes.push({ name: `border-${w}`, css: `.border-${w} { border-width: ${value}; }` });
3434
+ classes.push({ name: `border-t-${w}`, css: `.border-t-${w} { border-top-width: ${value}; }` });
3435
+ classes.push({ name: `border-r-${w}`, css: `.border-r-${w} { border-right-width: ${value}; }` });
3436
+ classes.push({ name: `border-b-${w}`, css: `.border-b-${w} { border-bottom-width: ${value}; }` });
3437
+ classes.push({ name: `border-l-${w}`, css: `.border-l-${w} { border-left-width: ${value}; }` });
3438
+ classes.push({ name: `border-x-${w}`, css: `.border-x-${w} { border-left-width: ${value}; border-right-width: ${value}; }` });
3439
+ classes.push({ name: `border-y-${w}`, css: `.border-y-${w} { border-top-width: ${value}; border-bottom-width: ${value}; }` });
3440
+ });
3441
+ classes.push({ name: "border", css: ".border { border-width: 1px; }" });
3442
+ classes.push({ name: "border-t", css: ".border-t { border-top-width: 1px; }" });
3443
+ classes.push({ name: "border-r", css: ".border-r { border-right-width: 1px; }" });
3444
+ classes.push({ name: "border-b", css: ".border-b { border-bottom-width: 1px; }" });
3445
+ classes.push({ name: "border-l", css: ".border-l { border-left-width: 1px; }" });
3446
+ classes.push({ name: "border-x", css: ".border-x { border-left-width: 1px; border-right-width: 1px; }" });
3447
+ classes.push({ name: "border-y", css: ".border-y { border-top-width: 1px; border-bottom-width: 1px; }" });
3448
+ ["solid", "dashed", "dotted", "double", "hidden", "none"].forEach((s) => {
3449
+ classes.push({ name: `border-${s}`, css: `.border-${s} { border-style: ${s}; }` });
3450
+ });
3451
+ const radii = {
3452
+ "none": "0px",
3453
+ "sm": "0.125rem",
3454
+ "": "0.25rem",
3455
+ "md": "0.375rem",
3456
+ "lg": "0.5rem",
3457
+ "xl": "0.75rem",
3458
+ "2xl": "1rem",
3459
+ "3xl": "1.5rem",
3460
+ "full": "9999px"
3461
+ };
3462
+ Object.entries(radii).forEach(([key, value]) => {
3463
+ const name = key === "" ? "rounded" : `rounded-${key}`;
3464
+ classes.push({ name, css: `.${name} { border-radius: ${value}; }` });
3465
+ if (key !== "") {
3466
+ const cornerName = key === "" ? "" : `-${key}`;
3467
+ classes.push({ name: `rounded-t${cornerName}`, css: `.rounded-t${cornerName} { border-top-left-radius: ${value}; border-top-right-radius: ${value}; }` });
3468
+ classes.push({ name: `rounded-r${cornerName}`, css: `.rounded-r${cornerName} { border-top-right-radius: ${value}; border-bottom-right-radius: ${value}; }` });
3469
+ classes.push({ name: `rounded-b${cornerName}`, css: `.rounded-b${cornerName} { border-bottom-left-radius: ${value}; border-bottom-right-radius: ${value}; }` });
3470
+ classes.push({ name: `rounded-l${cornerName}`, css: `.rounded-l${cornerName} { border-top-left-radius: ${value}; border-bottom-left-radius: ${value}; }` });
3471
+ classes.push({ name: `rounded-tl${cornerName}`, css: `.rounded-tl${cornerName} { border-top-left-radius: ${value}; }` });
3472
+ classes.push({ name: `rounded-tr${cornerName}`, css: `.rounded-tr${cornerName} { border-top-right-radius: ${value}; }` });
3473
+ classes.push({ name: `rounded-bl${cornerName}`, css: `.rounded-bl${cornerName} { border-bottom-left-radius: ${value}; }` });
3474
+ classes.push({ name: `rounded-br${cornerName}`, css: `.rounded-br${cornerName} { border-bottom-right-radius: ${value}; }` });
3475
+ }
3476
+ });
3477
+ ["0", "1", "2", "4", "8"].forEach((w) => {
3478
+ const value = w === "0" ? "0px" : `${w}px`;
3479
+ classes.push({
3480
+ name: `divide-x-${w}`,
3481
+ css: `.divide-x-${w} > :not([hidden]) ~ :not([hidden]) { border-left-width: ${value}; }`
3482
+ });
3483
+ classes.push({
3484
+ name: `divide-y-${w}`,
3485
+ css: `.divide-y-${w} > :not([hidden]) ~ :not([hidden]) { border-top-width: ${value}; }`
3486
+ });
3487
+ });
3488
+ classes.push({
3489
+ name: "divide-x",
3490
+ css: ".divide-x > :not([hidden]) ~ :not([hidden]) { border-left-width: 1px; }"
3491
+ });
3492
+ classes.push({
3493
+ name: "divide-y",
3494
+ css: ".divide-y > :not([hidden]) ~ :not([hidden]) { border-top-width: 1px; }"
3495
+ });
3496
+ ["solid", "dashed", "dotted", "double", "none"].forEach((s) => {
3497
+ classes.push({
3498
+ name: `divide-${s}`,
3499
+ css: `.divide-${s} > :not([hidden]) ~ :not([hidden]) { border-style: ${s}; }`
3500
+ });
3501
+ });
3502
+ ["0", "1", "2", "4", "8"].forEach((w) => {
3503
+ classes.push({ name: `outline-${w}`, css: `.outline-${w} { outline-width: ${w}px; }` });
3504
+ });
3505
+ classes.push({ name: "outline", css: ".outline { outline-style: solid; }" });
3506
+ classes.push({ name: "outline-none", css: ".outline-none { outline: 2px solid transparent; outline-offset: 2px; }" });
3507
+ ["none", "solid", "dashed", "dotted", "double"].forEach((s) => {
3508
+ classes.push({ name: `outline-${s}`, css: `.outline-${s} { outline-style: ${s}; }` });
3509
+ });
3510
+ ["0", "1", "2", "4", "8"].forEach((o) => {
3511
+ classes.push({ name: `outline-offset-${o}`, css: `.outline-offset-${o} { outline-offset: ${o}px; }` });
3512
+ });
3513
+ ["0", "1", "2", "4", "8"].forEach((w) => {
3514
+ const value = w === "0" ? "0px" : `${w}px`;
3515
+ classes.push({
3516
+ name: `ring-${w}`,
3517
+ css: `.ring-${w} { --j-ring-offset-shadow: var(--j-ring-inset) 0 0 0 var(--j-ring-offset-width) var(--j-ring-offset-color); --j-ring-shadow: var(--j-ring-inset) 0 0 0 calc(${value} + var(--j-ring-offset-width)) var(--j-ring-color); box-shadow: var(--j-ring-offset-shadow), var(--j-ring-shadow), var(--j-shadow, 0 0 #0000); }`
3518
+ });
3519
+ });
3520
+ classes.push({
3521
+ name: "ring",
3522
+ css: ".ring { --j-ring-offset-shadow: var(--j-ring-inset) 0 0 0 var(--j-ring-offset-width) var(--j-ring-offset-color); --j-ring-shadow: var(--j-ring-inset) 0 0 0 calc(3px + var(--j-ring-offset-width)) var(--j-ring-color); box-shadow: var(--j-ring-offset-shadow), var(--j-ring-shadow), var(--j-shadow, 0 0 #0000); }"
3523
+ });
3524
+ classes.push({ name: "ring-inset", css: ".ring-inset { --j-ring-inset: inset; }" });
3525
+ return {
3526
+ css: classes.map((c) => c.css).join("\n"),
3527
+ classes
3528
+ };
3529
+ }
3530
+ var init_borders = __esm({
3531
+ "src/core/utilities/borders.js"() {
3532
+ }
3533
+ });
3534
+
3427
3535
  // src/core/utilities/index.js
3428
3536
  function generateUtilities(config, options = {}) {
3429
3537
  const { usedClasses, includeAll = false } = options;
@@ -3617,6 +3725,7 @@ var init_utilities = __esm({
3617
3725
  init_scroll();
3618
3726
  init_svg();
3619
3727
  init_accessibility();
3728
+ init_borders();
3620
3729
  utilityGenerators = {
3621
3730
  layout: generateLayoutUtilities,
3622
3731
  spacing: generateSpacingUtilities,
@@ -3631,7 +3740,8 @@ var init_utilities = __esm({
3631
3740
  columns: generateColumnUtilities,
3632
3741
  scroll: generateScrollUtilities,
3633
3742
  svg: generateSvgUtilities,
3634
- accessibility: generateAccessibilityUtilities
3743
+ accessibility: generateAccessibilityUtilities,
3744
+ borders: generateBorderUtilities
3635
3745
  };
3636
3746
  }
3637
3747
  });
package/dist/plugins/vite.js CHANGED
@@ -3533,6 +3533,114 @@ var init_accessibility = __esm({
3533
3533
  }
3534
3534
  });
3535
3535
 
3536
+ // src/core/utilities/borders.js
3537
+ function generateBorderUtilities(config) {
3538
+ const classes = [];
3539
+ const borderWidths = ["0", "1", "2", "3", "4", "6", "8", "12"];
3540
+ borderWidths.forEach((w) => {
3541
+ const value = w === "0" ? "0px" : `${w}px`;
3542
+ classes.push({ name: `border-${w}`, css: `.border-${w} { border-width: ${value}; }` });
3543
+ classes.push({ name: `border-t-${w}`, css: `.border-t-${w} { border-top-width: ${value}; }` });
3544
+ classes.push({ name: `border-r-${w}`, css: `.border-r-${w} { border-right-width: ${value}; }` });
3545
+ classes.push({ name: `border-b-${w}`, css: `.border-b-${w} { border-bottom-width: ${value}; }` });
3546
+ classes.push({ name: `border-l-${w}`, css: `.border-l-${w} { border-left-width: ${value}; }` });
3547
+ classes.push({ name: `border-x-${w}`, css: `.border-x-${w} { border-left-width: ${value}; border-right-width: ${value}; }` });
3548
+ classes.push({ name: `border-y-${w}`, css: `.border-y-${w} { border-top-width: ${value}; border-bottom-width: ${value}; }` });
3549
+ });
3550
+ classes.push({ name: "border", css: ".border { border-width: 1px; }" });
3551
+ classes.push({ name: "border-t", css: ".border-t { border-top-width: 1px; }" });
3552
+ classes.push({ name: "border-r", css: ".border-r { border-right-width: 1px; }" });
3553
+ classes.push({ name: "border-b", css: ".border-b { border-bottom-width: 1px; }" });
3554
+ classes.push({ name: "border-l", css: ".border-l { border-left-width: 1px; }" });
3555
+ classes.push({ name: "border-x", css: ".border-x { border-left-width: 1px; border-right-width: 1px; }" });
3556
+ classes.push({ name: "border-y", css: ".border-y { border-top-width: 1px; border-bottom-width: 1px; }" });
3557
+ ["solid", "dashed", "dotted", "double", "hidden", "none"].forEach((s) => {
3558
+ classes.push({ name: `border-${s}`, css: `.border-${s} { border-style: ${s}; }` });
3559
+ });
3560
+ const radii = {
3561
+ "none": "0px",
3562
+ "sm": "0.125rem",
3563
+ "": "0.25rem",
3564
+ "md": "0.375rem",
3565
+ "lg": "0.5rem",
3566
+ "xl": "0.75rem",
3567
+ "2xl": "1rem",
3568
+ "3xl": "1.5rem",
3569
+ "full": "9999px"
3570
+ };
3571
+ Object.entries(radii).forEach(([key, value]) => {
3572
+ const name = key === "" ? "rounded" : `rounded-${key}`;
3573
+ classes.push({ name, css: `.${name} { border-radius: ${value}; }` });
3574
+ if (key !== "") {
3575
+ const cornerName = key === "" ? "" : `-${key}`;
3576
+ classes.push({ name: `rounded-t${cornerName}`, css: `.rounded-t${cornerName} { border-top-left-radius: ${value}; border-top-right-radius: ${value}; }` });
3577
+ classes.push({ name: `rounded-r${cornerName}`, css: `.rounded-r${cornerName} { border-top-right-radius: ${value}; border-bottom-right-radius: ${value}; }` });
3578
+ classes.push({ name: `rounded-b${cornerName}`, css: `.rounded-b${cornerName} { border-bottom-left-radius: ${value}; border-bottom-right-radius: ${value}; }` });
3579
+ classes.push({ name: `rounded-l${cornerName}`, css: `.rounded-l${cornerName} { border-top-left-radius: ${value}; border-bottom-left-radius: ${value}; }` });
3580
+ classes.push({ name: `rounded-tl${cornerName}`, css: `.rounded-tl${cornerName} { border-top-left-radius: ${value}; }` });
3581
+ classes.push({ name: `rounded-tr${cornerName}`, css: `.rounded-tr${cornerName} { border-top-right-radius: ${value}; }` });
3582
+ classes.push({ name: `rounded-bl${cornerName}`, css: `.rounded-bl${cornerName} { border-bottom-left-radius: ${value}; }` });
3583
+ classes.push({ name: `rounded-br${cornerName}`, css: `.rounded-br${cornerName} { border-bottom-right-radius: ${value}; }` });
3584
+ }
3585
+ });
3586
+ ["0", "1", "2", "4", "8"].forEach((w) => {
3587
+ const value = w === "0" ? "0px" : `${w}px`;
3588
+ classes.push({
3589
+ name: `divide-x-${w}`,
3590
+ css: `.divide-x-${w} > :not([hidden]) ~ :not([hidden]) { border-left-width: ${value}; }`
3591
+ });
3592
+ classes.push({
3593
+ name: `divide-y-${w}`,
3594
+ css: `.divide-y-${w} > :not([hidden]) ~ :not([hidden]) { border-top-width: ${value}; }`
3595
+ });
3596
+ });
3597
+ classes.push({
3598
+ name: "divide-x",
3599
+ css: ".divide-x > :not([hidden]) ~ :not([hidden]) { border-left-width: 1px; }"
3600
+ });
3601
+ classes.push({
3602
+ name: "divide-y",
3603
+ css: ".divide-y > :not([hidden]) ~ :not([hidden]) { border-top-width: 1px; }"
3604
+ });
3605
+ ["solid", "dashed", "dotted", "double", "none"].forEach((s) => {
3606
+ classes.push({
3607
+ name: `divide-${s}`,
3608
+ css: `.divide-${s} > :not([hidden]) ~ :not([hidden]) { border-style: ${s}; }`
3609
+ });
3610
+ });
3611
+ ["0", "1", "2", "4", "8"].forEach((w) => {
3612
+ classes.push({ name: `outline-${w}`, css: `.outline-${w} { outline-width: ${w}px; }` });
3613
+ });
3614
+ classes.push({ name: "outline", css: ".outline { outline-style: solid; }" });
3615
+ classes.push({ name: "outline-none", css: ".outline-none { outline: 2px solid transparent; outline-offset: 2px; }" });
3616
+ ["none", "solid", "dashed", "dotted", "double"].forEach((s) => {
3617
+ classes.push({ name: `outline-${s}`, css: `.outline-${s} { outline-style: ${s}; }` });
3618
+ });
3619
+ ["0", "1", "2", "4", "8"].forEach((o) => {
3620
+ classes.push({ name: `outline-offset-${o}`, css: `.outline-offset-${o} { outline-offset: ${o}px; }` });
3621
+ });
3622
+ ["0", "1", "2", "4", "8"].forEach((w) => {
3623
+ const value = w === "0" ? "0px" : `${w}px`;
3624
+ classes.push({
3625
+ name: `ring-${w}`,
3626
+ css: `.ring-${w} { --j-ring-offset-shadow: var(--j-ring-inset) 0 0 0 var(--j-ring-offset-width) var(--j-ring-offset-color); --j-ring-shadow: var(--j-ring-inset) 0 0 0 calc(${value} + var(--j-ring-offset-width)) var(--j-ring-color); box-shadow: var(--j-ring-offset-shadow), var(--j-ring-shadow), var(--j-shadow, 0 0 #0000); }`
3627
+ });
3628
+ });
3629
+ classes.push({
3630
+ name: "ring",
3631
+ css: ".ring { --j-ring-offset-shadow: var(--j-ring-inset) 0 0 0 var(--j-ring-offset-width) var(--j-ring-offset-color); --j-ring-shadow: var(--j-ring-inset) 0 0 0 calc(3px + var(--j-ring-offset-width)) var(--j-ring-color); box-shadow: var(--j-ring-offset-shadow), var(--j-ring-shadow), var(--j-shadow, 0 0 #0000); }"
3632
+ });
3633
+ classes.push({ name: "ring-inset", css: ".ring-inset { --j-ring-inset: inset; }" });
3634
+ return {
3635
+ css: classes.map((c) => c.css).join("\n"),
3636
+ classes
3637
+ };
3638
+ }
3639
+ var init_borders = __esm({
3640
+ "src/core/utilities/borders.js"() {
3641
+ }
3642
+ });
3643
+
3536
3644
  // src/core/utilities/index.js
3537
3645
  function generateUtilities(config, options = {}) {
3538
3646
  const { usedClasses, includeAll = false } = options;
@@ -3726,6 +3834,7 @@ var init_utilities = __esm({
3726
3834
  init_scroll();
3727
3835
  init_svg();
3728
3836
  init_accessibility();
3837
+ init_borders();
3729
3838
  utilityGenerators = {
3730
3839
  layout: generateLayoutUtilities,
3731
3840
  spacing: generateSpacingUtilities,
@@ -3740,7 +3849,8 @@ var init_utilities = __esm({
3740
3849
  columns: generateColumnUtilities,
3741
3850
  scroll: generateScrollUtilities,
3742
3851
  svg: generateSvgUtilities,
3743
- accessibility: generateAccessibilityUtilities
3852
+ accessibility: generateAccessibilityUtilities,
3853
+ borders: generateBorderUtilities
3744
3854
  };
3745
3855
  }
3746
3856
  });
package/dist/plugins/vite.mjs CHANGED
@@ -3511,6 +3511,114 @@ var init_accessibility = __esm({
3511
3511
  }
3512
3512
  });
3513
3513
 
3514
+ // src/core/utilities/borders.js
3515
+ function generateBorderUtilities(config) {
3516
+ const classes = [];
3517
+ const borderWidths = ["0", "1", "2", "3", "4", "6", "8", "12"];
3518
+ borderWidths.forEach((w) => {
3519
+ const value = w === "0" ? "0px" : `${w}px`;
3520
+ classes.push({ name: `border-${w}`, css: `.border-${w} { border-width: ${value}; }` });
3521
+ classes.push({ name: `border-t-${w}`, css: `.border-t-${w} { border-top-width: ${value}; }` });
3522
+ classes.push({ name: `border-r-${w}`, css: `.border-r-${w} { border-right-width: ${value}; }` });
3523
+ classes.push({ name: `border-b-${w}`, css: `.border-b-${w} { border-bottom-width: ${value}; }` });
3524
+ classes.push({ name: `border-l-${w}`, css: `.border-l-${w} { border-left-width: ${value}; }` });
3525
+ classes.push({ name: `border-x-${w}`, css: `.border-x-${w} { border-left-width: ${value}; border-right-width: ${value}; }` });
3526
+ classes.push({ name: `border-y-${w}`, css: `.border-y-${w} { border-top-width: ${value}; border-bottom-width: ${value}; }` });
3527
+ });
3528
+ classes.push({ name: "border", css: ".border { border-width: 1px; }" });
3529
+ classes.push({ name: "border-t", css: ".border-t { border-top-width: 1px; }" });
3530
+ classes.push({ name: "border-r", css: ".border-r { border-right-width: 1px; }" });
3531
+ classes.push({ name: "border-b", css: ".border-b { border-bottom-width: 1px; }" });
3532
+ classes.push({ name: "border-l", css: ".border-l { border-left-width: 1px; }" });
3533
+ classes.push({ name: "border-x", css: ".border-x { border-left-width: 1px; border-right-width: 1px; }" });
3534
+ classes.push({ name: "border-y", css: ".border-y { border-top-width: 1px; border-bottom-width: 1px; }" });
3535
+ ["solid", "dashed", "dotted", "double", "hidden", "none"].forEach((s) => {
3536
+ classes.push({ name: `border-${s}`, css: `.border-${s} { border-style: ${s}; }` });
3537
+ });
3538
+ const radii = {
3539
+ "none": "0px",
3540
+ "sm": "0.125rem",
3541
+ "": "0.25rem",
3542
+ "md": "0.375rem",
3543
+ "lg": "0.5rem",
3544
+ "xl": "0.75rem",
3545
+ "2xl": "1rem",
3546
+ "3xl": "1.5rem",
3547
+ "full": "9999px"
3548
+ };
3549
+ Object.entries(radii).forEach(([key, value]) => {
3550
+ const name = key === "" ? "rounded" : `rounded-${key}`;
3551
+ classes.push({ name, css: `.${name} { border-radius: ${value}; }` });
3552
+ if (key !== "") {
3553
+ const cornerName = key === "" ? "" : `-${key}`;
3554
+ classes.push({ name: `rounded-t${cornerName}`, css: `.rounded-t${cornerName} { border-top-left-radius: ${value}; border-top-right-radius: ${value}; }` });
3555
+ classes.push({ name: `rounded-r${cornerName}`, css: `.rounded-r${cornerName} { border-top-right-radius: ${value}; border-bottom-right-radius: ${value}; }` });
3556
+ classes.push({ name: `rounded-b${cornerName}`, css: `.rounded-b${cornerName} { border-bottom-left-radius: ${value}; border-bottom-right-radius: ${value}; }` });
3557
+ classes.push({ name: `rounded-l${cornerName}`, css: `.rounded-l${cornerName} { border-top-left-radius: ${value}; border-bottom-left-radius: ${value}; }` });
3558
+ classes.push({ name: `rounded-tl${cornerName}`, css: `.rounded-tl${cornerName} { border-top-left-radius: ${value}; }` });
3559
+ classes.push({ name: `rounded-tr${cornerName}`, css: `.rounded-tr${cornerName} { border-top-right-radius: ${value}; }` });
3560
+ classes.push({ name: `rounded-bl${cornerName}`, css: `.rounded-bl${cornerName} { border-bottom-left-radius: ${value}; }` });
3561
+ classes.push({ name: `rounded-br${cornerName}`, css: `.rounded-br${cornerName} { border-bottom-right-radius: ${value}; }` });
3562
+ }
3563
+ });
3564
+ ["0", "1", "2", "4", "8"].forEach((w) => {
3565
+ const value = w === "0" ? "0px" : `${w}px`;
3566
+ classes.push({
3567
+ name: `divide-x-${w}`,
3568
+ css: `.divide-x-${w} > :not([hidden]) ~ :not([hidden]) { border-left-width: ${value}; }`
3569
+ });
3570
+ classes.push({
3571
+ name: `divide-y-${w}`,
3572
+ css: `.divide-y-${w} > :not([hidden]) ~ :not([hidden]) { border-top-width: ${value}; }`
3573
+ });
3574
+ });
3575
+ classes.push({
3576
+ name: "divide-x",
3577
+ css: ".divide-x > :not([hidden]) ~ :not([hidden]) { border-left-width: 1px; }"
3578
+ });
3579
+ classes.push({
3580
+ name: "divide-y",
3581
+ css: ".divide-y > :not([hidden]) ~ :not([hidden]) { border-top-width: 1px; }"
3582
+ });
3583
+ ["solid", "dashed", "dotted", "double", "none"].forEach((s) => {
3584
+ classes.push({
3585
+ name: `divide-${s}`,
3586
+ css: `.divide-${s} > :not([hidden]) ~ :not([hidden]) { border-style: ${s}; }`
3587
+ });
3588
+ });
3589
+ ["0", "1", "2", "4", "8"].forEach((w) => {
3590
+ classes.push({ name: `outline-${w}`, css: `.outline-${w} { outline-width: ${w}px; }` });
3591
+ });
3592
+ classes.push({ name: "outline", css: ".outline { outline-style: solid; }" });
3593
+ classes.push({ name: "outline-none", css: ".outline-none { outline: 2px solid transparent; outline-offset: 2px; }" });
3594
+ ["none", "solid", "dashed", "dotted", "double"].forEach((s) => {
3595
+ classes.push({ name: `outline-${s}`, css: `.outline-${s} { outline-style: ${s}; }` });
3596
+ });
3597
+ ["0", "1", "2", "4", "8"].forEach((o) => {
3598
+ classes.push({ name: `outline-offset-${o}`, css: `.outline-offset-${o} { outline-offset: ${o}px; }` });
3599
+ });
3600
+ ["0", "1", "2", "4", "8"].forEach((w) => {
3601
+ const value = w === "0" ? "0px" : `${w}px`;
3602
+ classes.push({
3603
+ name: `ring-${w}`,
3604
+ css: `.ring-${w} { --j-ring-offset-shadow: var(--j-ring-inset) 0 0 0 var(--j-ring-offset-width) var(--j-ring-offset-color); --j-ring-shadow: var(--j-ring-inset) 0 0 0 calc(${value} + var(--j-ring-offset-width)) var(--j-ring-color); box-shadow: var(--j-ring-offset-shadow), var(--j-ring-shadow), var(--j-shadow, 0 0 #0000); }`
3605
+ });
3606
+ });
3607
+ classes.push({
3608
+ name: "ring",
3609
+ css: ".ring { --j-ring-offset-shadow: var(--j-ring-inset) 0 0 0 var(--j-ring-offset-width) var(--j-ring-offset-color); --j-ring-shadow: var(--j-ring-inset) 0 0 0 calc(3px + var(--j-ring-offset-width)) var(--j-ring-color); box-shadow: var(--j-ring-offset-shadow), var(--j-ring-shadow), var(--j-shadow, 0 0 #0000); }"
3610
+ });
3611
+ classes.push({ name: "ring-inset", css: ".ring-inset { --j-ring-inset: inset; }" });
3612
+ return {
3613
+ css: classes.map((c) => c.css).join("\n"),
3614
+ classes
3615
+ };
3616
+ }
3617
+ var init_borders = __esm({
3618
+ "src/core/utilities/borders.js"() {
3619
+ }
3620
+ });
3621
+
3514
3622
  // src/core/utilities/index.js
3515
3623
  function generateUtilities(config, options = {}) {
3516
3624
  const { usedClasses, includeAll = false } = options;
@@ -3704,6 +3812,7 @@ var init_utilities = __esm({
3704
3812
  init_scroll();
3705
3813
  init_svg();
3706
3814
  init_accessibility();
3815
+ init_borders();
3707
3816
  utilityGenerators = {
3708
3817
  layout: generateLayoutUtilities,
3709
3818
  spacing: generateSpacingUtilities,
@@ -3718,7 +3827,8 @@ var init_utilities = __esm({
3718
3827
  columns: generateColumnUtilities,
3719
3828
  scroll: generateScrollUtilities,
3720
3829
  svg: generateSvgUtilities,
3721
- accessibility: generateAccessibilityUtilities
3830
+ accessibility: generateAccessibilityUtilities,
3831
+ borders: generateBorderUtilities
3722
3832
  };
3723
3833
  }
3724
3834
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "jasmincss",
3
- "version": "1.0.14",
3
+ "version": "1.0.15",
4
4
  "type": "module",
5
5
  "description": "A modern, future-proof CSS framework with design philosophy",
6
6
  "main": "dist/index.js",
package/src/core/utilities/borders.js ADDED
@@ -0,0 +1,125 @@
1
+ export function generateBorderUtilities(config) {
2
+ const classes = [];
3
+
4
+ // Border Width
5
+ const borderWidths = ['0', '1', '2', '3', '4', '6', '8', '12'];
6
+ borderWidths.forEach(w => {
7
+ const value = w === '0' ? '0px' : `${w}px`;
8
+ classes.push({ name: `border-${w}`, css: `.border-${w} { border-width: ${value}; }` });
9
+ classes.push({ name: `border-t-${w}`, css: `.border-t-${w} { border-top-width: ${value}; }` });
10
+ classes.push({ name: `border-r-${w}`, css: `.border-r-${w} { border-right-width: ${value}; }` });
11
+ classes.push({ name: `border-b-${w}`, css: `.border-b-${w} { border-bottom-width: ${value}; }` });
12
+ classes.push({ name: `border-l-${w}`, css: `.border-l-${w} { border-left-width: ${value}; }` });
13
+ classes.push({ name: `border-x-${w}`, css: `.border-x-${w} { border-left-width: ${value}; border-right-width: ${value}; }` });
14
+ classes.push({ name: `border-y-${w}`, css: `.border-y-${w} { border-top-width: ${value}; border-bottom-width: ${value}; }` });
15
+ });
16
+
17
+ // Default border (1px)
18
+ classes.push({ name: 'border', css: '.border { border-width: 1px; }' });
19
+ classes.push({ name: 'border-t', css: '.border-t { border-top-width: 1px; }' });
20
+ classes.push({ name: 'border-r', css: '.border-r { border-right-width: 1px; }' });
21
+ classes.push({ name: 'border-b', css: '.border-b { border-bottom-width: 1px; }' });
22
+ classes.push({ name: 'border-l', css: '.border-l { border-left-width: 1px; }' });
23
+ classes.push({ name: 'border-x', css: '.border-x { border-left-width: 1px; border-right-width: 1px; }' });
24
+ classes.push({ name: 'border-y', css: '.border-y { border-top-width: 1px; border-bottom-width: 1px; }' });
25
+
26
+ // Border Style
27
+ ['solid', 'dashed', 'dotted', 'double', 'hidden', 'none'].forEach(s => {
28
+ classes.push({ name: `border-${s}`, css: `.border-${s} { border-style: ${s}; }` });
29
+ });
30
+
31
+ // Border Radius
32
+ const radii = {
33
+ 'none': '0px',
34
+ 'sm': '0.125rem',
35
+ '': '0.25rem',
36
+ 'md': '0.375rem',
37
+ 'lg': '0.5rem',
38
+ 'xl': '0.75rem',
39
+ '2xl': '1rem',
40
+ '3xl': '1.5rem',
41
+ 'full': '9999px'
42
+ };
43
+ Object.entries(radii).forEach(([key, value]) => {
44
+ const name = key === '' ? 'rounded' : `rounded-${key}`;
45
+ classes.push({ name, css: `.${name} { border-radius: ${value}; }` });
46
+
47
+ // Corners
48
+ if (key !== '') {
49
+ const cornerName = key === '' ? '' : `-${key}`;
50
+ classes.push({ name: `rounded-t${cornerName}`, css: `.rounded-t${cornerName} { border-top-left-radius: ${value}; border-top-right-radius: ${value}; }` });
51
+ classes.push({ name: `rounded-r${cornerName}`, css: `.rounded-r${cornerName} { border-top-right-radius: ${value}; border-bottom-right-radius: ${value}; }` });
52
+ classes.push({ name: `rounded-b${cornerName}`, css: `.rounded-b${cornerName} { border-bottom-left-radius: ${value}; border-bottom-right-radius: ${value}; }` });
53
+ classes.push({ name: `rounded-l${cornerName}`, css: `.rounded-l${cornerName} { border-top-left-radius: ${value}; border-bottom-left-radius: ${value}; }` });
54
+ classes.push({ name: `rounded-tl${cornerName}`, css: `.rounded-tl${cornerName} { border-top-left-radius: ${value}; }` });
55
+ classes.push({ name: `rounded-tr${cornerName}`, css: `.rounded-tr${cornerName} { border-top-right-radius: ${value}; }` });
56
+ classes.push({ name: `rounded-bl${cornerName}`, css: `.rounded-bl${cornerName} { border-bottom-left-radius: ${value}; }` });
57
+ classes.push({ name: `rounded-br${cornerName}`, css: `.rounded-br${cornerName} { border-bottom-right-radius: ${value}; }` });
58
+ }
59
+ });
60
+
61
+ // Divide Width (for child elements)
62
+ ['0', '1', '2', '4', '8'].forEach(w => {
63
+ const value = w === '0' ? '0px' : `${w}px`;
64
+ classes.push({
65
+ name: `divide-x-${w}`,
66
+ css: `.divide-x-${w} > :not([hidden]) ~ :not([hidden]) { border-left-width: ${value}; }`
67
+ });
68
+ classes.push({
69
+ name: `divide-y-${w}`,
70
+ css: `.divide-y-${w} > :not([hidden]) ~ :not([hidden]) { border-top-width: ${value}; }`
71
+ });
72
+ });
73
+ classes.push({
74
+ name: 'divide-x',
75
+ css: '.divide-x > :not([hidden]) ~ :not([hidden]) { border-left-width: 1px; }'
76
+ });
77
+ classes.push({
78
+ name: 'divide-y',
79
+ css: '.divide-y > :not([hidden]) ~ :not([hidden]) { border-top-width: 1px; }'
80
+ });
81
+
82
+ // Divide Style
83
+ ['solid', 'dashed', 'dotted', 'double', 'none'].forEach(s => {
84
+ classes.push({
85
+ name: `divide-${s}`,
86
+ css: `.divide-${s} > :not([hidden]) ~ :not([hidden]) { border-style: ${s}; }`
87
+ });
88
+ });
89
+
90
+ // Outline Width
91
+ ['0', '1', '2', '4', '8'].forEach(w => {
92
+ classes.push({ name: `outline-${w}`, css: `.outline-${w} { outline-width: ${w}px; }` });
93
+ });
94
+ classes.push({ name: 'outline', css: '.outline { outline-style: solid; }' });
95
+ classes.push({ name: 'outline-none', css: '.outline-none { outline: 2px solid transparent; outline-offset: 2px; }' });
96
+
97
+ // Outline Style
98
+ ['none', 'solid', 'dashed', 'dotted', 'double'].forEach(s => {
99
+ classes.push({ name: `outline-${s}`, css: `.outline-${s} { outline-style: ${s}; }` });
100
+ });
101
+
102
+ // Outline Offset
103
+ ['0', '1', '2', '4', '8'].forEach(o => {
104
+ classes.push({ name: `outline-offset-${o}`, css: `.outline-offset-${o} { outline-offset: ${o}px; }` });
105
+ });
106
+
107
+ // Ring (box-shadow based outline)
108
+ ['0', '1', '2', '4', '8'].forEach(w => {
109
+ const value = w === '0' ? '0px' : `${w}px`;
110
+ classes.push({
111
+ name: `ring-${w}`,
112
+ css: `.ring-${w} { --j-ring-offset-shadow: var(--j-ring-inset) 0 0 0 var(--j-ring-offset-width) var(--j-ring-offset-color); --j-ring-shadow: var(--j-ring-inset) 0 0 0 calc(${value} + var(--j-ring-offset-width)) var(--j-ring-color); box-shadow: var(--j-ring-offset-shadow), var(--j-ring-shadow), var(--j-shadow, 0 0 #0000); }`
113
+ });
114
+ });
115
+ classes.push({
116
+ name: 'ring',
117
+ css: '.ring { --j-ring-offset-shadow: var(--j-ring-inset) 0 0 0 var(--j-ring-offset-width) var(--j-ring-offset-color); --j-ring-shadow: var(--j-ring-inset) 0 0 0 calc(3px + var(--j-ring-offset-width)) var(--j-ring-color); box-shadow: var(--j-ring-offset-shadow), var(--j-ring-shadow), var(--j-shadow, 0 0 #0000); }'
118
+ });
119
+ classes.push({ name: 'ring-inset', css: '.ring-inset { --j-ring-inset: inset; }' });
120
+
121
+ return {
122
+ css: classes.map(c => c.css).join('\n'),
123
+ classes
124
+ };
125
+ }
package/src/core/utilities/index.js CHANGED
@@ -13,6 +13,7 @@ import { generateColumnUtilities } from './columns.js';
13
13
  import { generateScrollUtilities } from './scroll.js';
14
14
  import { generateSvgUtilities } from './svg.js';
15
15
  import { generateAccessibilityUtilities } from './accessibility.js';
16
+ import { generateBorderUtilities } from './borders.js';
16
17
 
17
18
  const utilityGenerators = {
18
19
  layout: generateLayoutUtilities,
@@ -28,7 +29,8 @@ const utilityGenerators = {
28
29
  columns: generateColumnUtilities,
29
30
  scroll: generateScrollUtilities,
30
31
  svg: generateSvgUtilities,
31
- accessibility: generateAccessibilityUtilities
32
+ accessibility: generateAccessibilityUtilities,
33
+ borders: generateBorderUtilities
32
34
  };
33
35
 
34
36
  export function generateUtilities(config, options = {}) {