@nanisoft/prism-ui 0.15.0 → 0.16.0

package/dist/styles.css

@@ -27,6 +27,10 @@
     --text-3xl--line-height: 1.2;
     --text-4xl: 2.25rem;
     --text-4xl--line-height: 1.111;
+    --text-5xl: 3rem;
+    --text-5xl--line-height: 1;
+    --text-6xl: 3.75rem;
+    --text-6xl--line-height: 1;
     --font-weight-normal: 400;
     --font-weight-medium: 500;
     --font-weight-semibold: 600;
@@ -331,6 +335,9 @@
   .top-4 {
     top: var(--spacing-4);
   }
+  .top-20 {
+    top: var(--spacing-20);
+  }
   .right-0 {
     right: var(--spacing-0);
   }
@@ -745,6 +752,9 @@
   .min-h-5 {
     min-height: var(--spacing-5);
   }
+  .min-h-6 {
+    min-height: var(--spacing-6);
+  }
   .min-h-8 {
     min-height: var(--spacing-8);
   }
@@ -862,9 +872,18 @@
   .max-w-20 {
     max-width: var(--spacing-20);
   }
+  .max-w-32 {
+    max-width: calc(var(--spacing) * 32);
+  }
   .max-w-64 {
     max-width: calc(var(--spacing) * 64);
   }
+  .max-w-72 {
+    max-width: calc(var(--spacing) * 72);
+  }
+  .max-w-96 {
+    max-width: calc(var(--spacing) * 96);
+  }
   .max-w-full {
     max-width: 100%;
   }
@@ -937,6 +956,9 @@
   .min-w-96 {
     min-width: calc(var(--spacing) * 96);
   }
+  .min-w-160 {
+    min-width: calc(var(--spacing) * 160);
+  }
   .min-w-max {
     min-width: max-content;
   }
@@ -1549,6 +1571,12 @@
   .bg-foreground {
     background-color: var(--foreground);
   }
+  .bg-foreground\/40 {
+    background-color: var(--foreground);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--foreground) 40%, transparent);
+    }
+  }
   .bg-input {
     background-color: var(--input);
   }
@@ -1622,6 +1650,10 @@
     --tw-gradient-position: to bottom in oklab;
     background-image: linear-gradient(var(--tw-gradient-stops));
   }
+  .bg-gradient-to-t {
+    --tw-gradient-position: to top in oklab;
+    background-image: linear-gradient(var(--tw-gradient-stops));
+  }
   .bg-gradient-to-tr {
     --tw-gradient-position: to top right in oklab;
     background-image: linear-gradient(var(--tw-gradient-stops));
@@ -1629,6 +1661,10 @@
   .bg-\[conic-gradient\(var\(--chart-1\)\,var\(--chart-2\)\,var\(--chart-3\)\,var\(--chart-4\)\,var\(--chart-5\)\,var\(--chart-1\)\)\] {
     background-image: conic-gradient(var(--chart-1),var(--chart-2),var(--chart-3),var(--chart-4),var(--chart-5),var(--chart-1));
   }
+  .from-background {
+    --tw-gradient-from: var(--background);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
   .from-primary-foreground\/15 {
     --tw-gradient-from: var(--primary-foreground);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1997,6 +2033,18 @@
     font-size: var(--text-3xl);
     line-height: var(--tw-leading, var(--text-3xl--line-height));
   }
+  .text-4xl {
+    font-size: var(--text-4xl);
+    line-height: var(--tw-leading, var(--text-4xl--line-height));
+  }
+  .text-5xl {
+    font-size: var(--text-5xl);
+    line-height: var(--tw-leading, var(--text-5xl--line-height));
+  }
+  .text-6xl {
+    font-size: var(--text-6xl);
+    line-height: var(--tw-leading, var(--text-6xl--line-height));
+  }
   .text-base {
     font-size: var(--text-base);
     line-height: var(--tw-leading, var(--text-base--line-height));
@@ -2063,6 +2111,9 @@
   .text-pretty {
     text-wrap: pretty;
   }
+  .text-wrap {
+    text-wrap: wrap;
+  }
   .break-words {
     overflow-wrap: break-word;
   }
@@ -2207,6 +2258,10 @@
     --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .shadow-inner {
+    --tw-shadow: inset 0 2px 4px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .shadow-lg {
     --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -2630,6 +2685,10 @@
   .focus\:text-accent-foreground:focus {
     color: var(--accent-foreground);
   }
+  .focus\:shadow-lg:focus {
+    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .focus\:ring-0:focus {
     --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -3057,6 +3116,9 @@
     .sm\:grid-cols-3 {
       grid-template-columns: repeat(3, minmax(0, 1fr));
     }
+    .sm\:grid-cols-11 {
+      grid-template-columns: repeat(11, minmax(0, 1fr));
+    }
     .sm\:grid-cols-\[7rem_minmax\(0\,1fr\)\] {
       grid-template-columns: 7rem minmax(0,1fr);
     }
@@ -3185,6 +3247,14 @@
       font-size: var(--text-4xl);
       line-height: var(--tw-leading, var(--text-4xl--line-height));
     }
+    .sm\:text-5xl {
+      font-size: var(--text-5xl);
+      line-height: var(--tw-leading, var(--text-5xl--line-height));
+    }
+    .sm\:text-6xl {
+      font-size: var(--text-6xl);
+      line-height: var(--tw-leading, var(--text-6xl--line-height));
+    }
     .sm\:text-xl {
       font-size: var(--text-xl);
       line-height: var(--tw-leading, var(--text-xl--line-height));
@@ -3406,6 +3476,9 @@
     .lg\:pt-0 {
       padding-top: var(--spacing-0);
     }
+    .lg\:pb-8 {
+      padding-bottom: var(--spacing-8);
+    }
     .lg\:pl-10 {
       padding-left: var(--spacing-10);
     }
@@ -3554,9 +3627,9 @@
   .\[\&_code\]\:text-muted-foreground code {
     color: var(--muted-foreground);
   }
-  .\[\&_h1\]\:text-3xl h1 {
-    font-size: var(--text-3xl);
-    line-height: var(--tw-leading, var(--text-3xl--line-height));
+  .\[\&_h1\]\:text-4xl h1 {
+    font-size: var(--text-4xl);
+    line-height: var(--tw-leading, var(--text-4xl--line-height));
   }
   .\[\&_h1\]\:font-semibold h1 {
     --tw-font-weight: var(--font-weight-semibold);
@@ -3572,9 +3645,9 @@
   .\[\&_h2\]\:mt-2 h2 {
     margin-top: var(--spacing-2);
   }
-  .\[\&_h2\]\:text-2xl h2 {
-    font-size: var(--text-2xl);
-    line-height: var(--tw-leading, var(--text-2xl--line-height));
+  .\[\&_h2\]\:text-3xl h2 {
+    font-size: var(--text-3xl);
+    line-height: var(--tw-leading, var(--text-3xl--line-height));
   }
   .\[\&_h2\]\:font-semibold h2 {
     --tw-font-weight: var(--font-weight-semibold);
@@ -3590,9 +3663,9 @@
   .\[\&_h3\]\:mt-2 h3 {
     margin-top: var(--spacing-2);
   }
-  .\[\&_h3\]\:text-xl h3 {
-    font-size: var(--text-xl);
-    line-height: var(--tw-leading, var(--text-xl--line-height));
+  .\[\&_h3\]\:text-2xl h3 {
+    font-size: var(--text-2xl);
+    line-height: var(--tw-leading, var(--text-2xl--line-height));
   }
   .\[\&_h3\]\:font-semibold h3 {
     --tw-font-weight: var(--font-weight-semibold);
@@ -3605,9 +3678,9 @@
   .\[\&_h3\]\:text-balance h3 {
     text-wrap: balance;
   }
-  .\[\&_h4\]\:text-lg h4 {
-    font-size: var(--text-lg);
-    line-height: var(--tw-leading, var(--text-lg--line-height));
+  .\[\&_h4\]\:text-xl h4 {
+    font-size: var(--text-xl);
+    line-height: var(--tw-leading, var(--text-xl--line-height));
   }
   .\[\&_h4\]\:font-semibold h4 {
     --tw-font-weight: var(--font-weight-semibold);
@@ -3616,6 +3689,28 @@
   .\[\&_h4\]\:text-balance h4 {
     text-wrap: balance;
   }
+  .\[\&_h5\]\:text-lg h5 {
+    font-size: var(--text-lg);
+    line-height: var(--tw-leading, var(--text-lg--line-height));
+  }
+  .\[\&_h5\]\:font-semibold h5 {
+    --tw-font-weight: var(--font-weight-semibold);
+    font-weight: var(--font-weight-semibold);
+  }
+  .\[\&_h5\]\:text-balance h5 {
+    text-wrap: balance;
+  }
+  .\[\&_h6\]\:text-lg h6 {
+    font-size: var(--text-lg);
+    line-height: var(--tw-leading, var(--text-lg--line-height));
+  }
+  .\[\&_h6\]\:font-semibold h6 {
+    --tw-font-weight: var(--font-weight-semibold);
+    font-weight: var(--font-weight-semibold);
+  }
+  .\[\&_h6\]\:text-balance h6 {
+    text-wrap: balance;
+  }
   .\[\&_hr\]\:my-2 hr {
     margin-block: var(--spacing-2);
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nanisoft/prism-ui",
-  "version": "0.15.0",
+  "version": "0.16.0",
   "type": "module",
   "description": "Prism's React component, block and page library.",
   "license": "MIT",
@@ -98,7 +98,7 @@
     "clsx": "^2.1.1",
     "lucide-react": "^0.545.0",
     "tailwind-merge": "^3.3.1",
-    "@nanisoft/prism-tokens": "0.15.0"
+    "@nanisoft/prism-tokens": "0.16.0"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4.3.3",