@trackunit/css-tailwind 0.0.68 → 0.0.69

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/css-tailwind",
-  "version": "0.0.68",
+  "version": "0.0.69",
   "main": "./index.cjs",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",

package/src/lib/plugin/layouts.d.ts

@@ -0,0 +1,4 @@
+export declare const LayoutsPlugin: {
+    handler: import("tailwindcss/types/config").PluginCreator;
+    config?: Partial<import("tailwindcss").Config> | undefined;
+};

package/tailwind-base.generated.js

@@ -58,9 +58,9 @@ var require_createPlugin = __commonJS({
       enumerable: true,
       get: () => _default
     });
-    function createPlugin(plugin3, config) {
+    function createPlugin(plugin4, config) {
       return {
-        handler: plugin3,
+        handler: plugin4,
         config
       };
     }
@@ -1007,6 +1007,53 @@ var grids = {
   }
 };
 
+// libs/css/tailwind/src/lib/plugin/layouts.ts
+var import_plugin4 = __toESM(require_plugin());
+var LayoutsPlugin = (0, import_plugin4.default)(({ addUtilities, addComponents }) => {
+  addUtilities({
+    ".layout-row-height-auto": { "--row-height": "auto" },
+    ".layout-row-height-1fr": { "--row-height": "1fr" },
+    ".layout-occupation-fill": { "--occupation": "auto-fill" },
+    ".layout-occupation-fit": { "--occupation": "auto-fit" },
+    ".layout-min-col-equal": { "--min-column-width": "minmax(0, 1fr)" },
+    ".layout-min-col-xs": { "--min-column-width": "180px" },
+    ".layout-min-col-sm": { "--min-column-width": "260px" },
+    ".layout-min-col-md": { "--min-column-width": "340px" },
+    ".layout-min-col-lg": { "--min-column-width": "420px" },
+    ".layout-min-col-xl": { "--min-column-width": "540px" }
+  });
+  addComponents({
+    ".layout-area-topbar": {
+      "grid-area": "topbar"
+    },
+    ".layout-area-sidebar": {
+      "grid-area": "sidebar"
+    },
+    ".layout-area-content": {
+      "grid-area": "content"
+    },
+    ".layout-left-sidebar-grid": {
+      display: "grid",
+      "grid-template-rows": "min-content min-content auto",
+      "grid-template-columns": "1fr",
+      "grid-template-areas": "'topbar' 'sidebar' 'content'",
+      "@media (min-width: 1600px)": {
+        "grid-template-rows": "min-content auto",
+        "grid-template-columns": "min-content auto",
+        "grid-template-areas": "'topbar topbar' 'sidebar content'"
+      }
+    },
+    ".layout-intrinsically-responsive-grid": {
+      "--occupation": "auto-fit",
+      "--min-column-width": "minmax(0, 1fr)",
+      "--row-height": "1fr",
+      display: "grid",
+      "min-height": "100%",
+      "grid-template-columns": "repeat(var(--occupation), minmax(min(var(--min-column-width), 100%), 1fr))"
+    }
+  });
+});
+
 // libs/css/tailwind/src/lib/utilities/designTokensToTailwindConfig.ts
 var designTokensToTailwindConfig = (name, designTokens) => {
   const entries = Object.entries(designTokens).map(([key, value]) => [
@@ -1192,6 +1239,6 @@ var tailwindBaseConfig = {
       }
     }
   },
-  plugins: [CssTailwindCustomPropertiesPlugin, src_default]
+  plugins: [CssTailwindCustomPropertiesPlugin, src_default, LayoutsPlugin]
 };
 var tailwind_base_default = tailwindBaseConfig;