jasmincss 1.0.13 → 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 (15) hide show
  1. package/JASMINCSS-GUIDE.md +1 -1
  2. package/dist/index.js +107 -2
  3. package/dist/index.mjs +107 -2
  4. package/dist/jasmin.css +1 -1
  5. package/dist/jasmin.min.css +1 -1
  6. package/dist/plugins/jasmin-loader.js +107 -2
  7. package/dist/plugins/jasmin-loader.mjs +107 -2
  8. package/dist/plugins/nextjs.js +112 -2
  9. package/dist/plugins/nextjs.mjs +112 -2
  10. package/dist/plugins/vite.js +112 -2
  11. package/dist/plugins/vite.mjs +112 -2
  12. package/package.json +1 -1
  13. package/src/components/forms.js +1 -1
  14. package/src/core/utilities/borders.js +125 -0
  15. package/src/core/utilities/index.js +3 -1
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
  });
@@ -4995,7 +5105,7 @@ input[type="range"].form-control::-webkit-slider-thumb:hover {
4995
5105
 
4996
5106
  .form-floating > .form-control:focus ~ .form-label,
4997
5107
  .form-floating > .form-control:not(:placeholder-shown) ~ .form-label {
4998
- transform: scale(0.85) translateY(-0.5rem));
5108
+ transform: scale(0.85) translateY(-0.5rem);
4999
5109
  color: var(--j-primary);
5000
5110
  }
5001
5111
 
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
  });
@@ -4973,7 +5083,7 @@ input[type="range"].form-control::-webkit-slider-thumb:hover {
4973
5083
 
4974
5084
  .form-floating > .form-control:focus ~ .form-label,
4975
5085
  .form-floating > .form-control:not(:placeholder-shown) ~ .form-label {
4976
- transform: scale(0.85) translateY(-0.5rem));
5086
+ transform: scale(0.85) translateY(-0.5rem);
4977
5087
  color: var(--j-primary);
4978
5088
  }
4979
5089
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "jasmincss",
3
- "version": "1.0.13",
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/components/forms.js CHANGED
@@ -481,7 +481,7 @@ input[type="range"].form-control::-webkit-slider-thumb:hover {
481
481
 
482
482
  .form-floating > .form-control:focus ~ .form-label,
483
483
  .form-floating > .form-control:not(:placeholder-shown) ~ .form-label {
484
- transform: scale(0.85) translateY(-0.5rem));
484
+ transform: scale(0.85) translateY(-0.5rem);
485
485
  color: var(--j-primary);
486
486
  }
487
487
 
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 = {}) {