@blockbite/tailwind 3.4.13 → 3.4.14

package/dist/spacing.js

@@ -0,0 +1,201 @@
+function createFluidSpacing(prefix) {
+    const fluid = [
+        {
+            size: '0px',
+            slug: '0',
+            name: '0',
+        },
+        {
+            size: 'clamp(16px, 1vw, 32px)',
+            slug: '1',
+            name: '1',
+        },
+        {
+            size: 'clamp(32px, 1vw, 48px)',
+            slug: '2',
+            name: '2',
+        },
+        {
+            size: 'clamp(40px, 1vw, 50px)',
+            slug: '3',
+            name: '3',
+        },
+        {
+            size: 'clamp(64px, 1vw, 80px)',
+            slug: '4',
+            name: '4',
+        },
+        {
+            size: 'clamp(128px, 1vw, 144px)',
+            slug: '5',
+            name: '5',
+        },
+        {
+            size: 'clamp(144px, 1vw, 164px)',
+            slug: '6',
+            name: '6',
+        },
+        {
+            slug: '8',
+            size: 'clamp(16px, 1vw, 32px)',
+            name: '8',
+        },
+        {
+            slug: '9',
+            size: 'clamp(16px, 1vw, 32px)',
+            name: '9',
+        },
+        {
+            slug: '10',
+            size: 'clamp(16px, 1vw, 32px)',
+            name: '10',
+        },
+        // can be used to push contain inside grid-container
+        {
+            slug: '1fr',
+            size: 'var(--b_fr-size, 1rem)',
+            name: '1FR',
+        },
+    ];
+    const FluidSizes = {};
+    // add clamp spacing for gaps
+    fluid.forEach((size) => {
+        // add to spacing
+        FluidSizes[prefix + 'fluid-' + size.slug] = size.size;
+    });
+    return FluidSizes;
+}
+function createPercentSpacing() {
+    const percentUnits = [
+        '1/2',
+        '1/3',
+        '2/3',
+        '1/4',
+        '2/4',
+        '3/4',
+        '1/5',
+        '2/5',
+        '3/5',
+        '4/5',
+        '1/6',
+        '2/6',
+        '3/6',
+        '4/6',
+        '5/6',
+        '1/12',
+        '2/12',
+        '3/12',
+        '4/12',
+        '5/12',
+        '6/12',
+        '7/12',
+        '8/12',
+        '9/12',
+        '10/12',
+        '11/12',
+        'full',
+    ];
+    return percentUnits;
+}
+function createScreenSpacing() {
+    const screenSpacing = [
+        'b_screen-10',
+        'b_screen-20',
+        'b_screen-30',
+        'b_screen-40',
+        'b_screen-50',
+        'b_screen-60',
+        'b_screen-70',
+        'b_screen-80',
+        'b_screen-90',
+        'b_screen-100',
+    ];
+    const screenSpacingValues = {};
+    screenSpacing.forEach((size) => {
+        screenSpacingValues[size] = size;
+    });
+    return screenSpacingValues;
+}
+function createGridSpacing(prefix) {
+    // create grid based on 16px
+    const gridSpacing = {};
+    const minimalValues = [0, 1, 2, 4, 6, 8, 10, 12, 14, 18, 20, 22, 24, 32];
+    for (let i = 0; i < minimalValues.length; i++) {
+        const minimalValue = minimalValues[i];
+        gridSpacing[`${prefix}${minimalValue}`] = minimalValue / 16 + 'rem';
+    }
+    for (let i = 1; i < 1280 / 16; i++) {
+        const gridsize = i * 16;
+        gridSpacing[`${prefix}${gridsize}`] = i + 'rem';
+    }
+    return gridSpacing;
+}
+function createNativeSpacing() {
+    const nativeSpacing = [
+        0,
+        'px',
+        0.5,
+        1,
+        1.5,
+        2,
+        2.5,
+        3,
+        3.5,
+        4,
+        5,
+        6,
+        7,
+        8,
+        9,
+        10,
+        11,
+        12,
+        14,
+        16,
+        20,
+        24,
+        28,
+        32,
+        36,
+        40,
+        44,
+        48,
+        52,
+        56,
+        60,
+        64,
+        72,
+        80,
+        96,
+    ];
+    return nativeSpacing;
+}
+function createSpanSpacing() {
+    const colSpanValues = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16];
+    return colSpanValues;
+}
+export const gridSpacing = (prefix = '') => {
+    // create grid based on 16px
+    const spacingRem = createGridSpacing(prefix);
+    return spacingRem;
+};
+export const fluidSpacing = (prefix = '') => {
+    const spacingFluid = createFluidSpacing(prefix);
+    return spacingFluid;
+};
+export const percentSpacing = () => {
+    const spacingPercent = createPercentSpacing();
+    return spacingPercent;
+};
+export const screenSpacing = () => {
+    const spacingScreen = createScreenSpacing();
+    return spacingScreen;
+};
+export const nativeSpacing = () => {
+    const spacingNative = createNativeSpacing();
+    return spacingNative;
+};
+export const spanSpacing = () => {
+    const spacingSpan = createSpanSpacing();
+    return spacingSpan;
+};

package/dist/theme-parser.d.ts

@@ -0,0 +1,21 @@
+export declare function themeParser(theme: any, prefixObject?: {
+    prefixScreens: string;
+    prefixAspectRatio: string;
+    prefixSpacing: string;
+}, gridFluidSpacing?: boolean): {
+    fonts: {};
+    fontWeights: {};
+    colors: {};
+    spacing: {};
+    fontSizes: {};
+    screens: {};
+    aspectRatio: {};
+    container: {
+        center: boolean;
+        padding: {
+            DEFAULT: string;
+            sm: string;
+            lg: string;
+        };
+    };
+};

package/dist/theme-parser.js

@@ -0,0 +1,68 @@
+/*
+ * This file is used to parse the theme.json file from the theme to generate the tailwind config
+ */
+import { getAspectRatio } from './aspect-ratio.js';
+import { getContainer } from './container.js';
+import { getScreens } from './screens.js';
+import { fluidSpacing, gridSpacing } from './spacing.js';
+export function themeParser(theme, prefixObject = {
+    prefixScreens: 'b_',
+    prefixAspectRatio: 'b_',
+    prefixSpacing: 'b_',
+}, gridFluidSpacing = true) {
+    // get prefixes
+    const { prefixScreens, prefixAspectRatio, prefixSpacing } = prefixObject;
+    // import 16-grid and clamp spacing
+    let spacing = {};
+    if (gridFluidSpacing) {
+        spacing = Object.assign({}, fluidSpacing(prefixSpacing), gridSpacing(prefixSpacing));
+    }
+    // add colors
+    const colors = {};
+    if (theme.settings.color && theme.settings.color.palette !== undefined) {
+        theme.settings.color.palette.forEach((color) => {
+            colors[color.slug] = color.color;
+        });
+    }
+    // add fonts and fontWeights
+    const fonts = {};
+    const fontWeights = {};
+    if (theme.settings.typography &&
+        theme.settings.typography.fontFamilies !== undefined) {
+        theme.settings.typography.fontFamilies.forEach((fam) => {
+            fonts[fam.slug] = fam.fontFamily.split(',');
+            if (fam.fontFace) {
+                // generate fontWeights
+                fam.fontFace.forEach((face) => {
+                    fontWeights[face.fontWeight] = face.fontWeight;
+                });
+            }
+        });
+    }
+    // fontsizes
+    const fontSizes = {};
+    if (theme.settings.typography &&
+        theme.settings.typography.fontSizes !== undefined) {
+        theme.settings.typography.fontSizes.forEach((size) => {
+            // add font variables
+            fontSizes[size.slug] = `var(--wp--preset--font-size--${size.slug})`;
+        });
+    }
+    // responsive
+    const screens = getScreens(prefixScreens);
+    // aspect ratio
+    const aspectRatio = getAspectRatio(prefixAspectRatio);
+    // container
+    const container = getContainer();
+    // export object
+    return {
+        fonts,
+        fontWeights,
+        colors,
+        spacing,
+        fontSizes,
+        screens,
+        aspectRatio,
+        container,
+    };
+}

package/package.json

@@ -1,25 +1,47 @@
 {
   "name": "@blockbite/tailwind",
-  "version": "3.4.13",
+  "version": "3.4.14",
   "description": "helper for blockbite plugin and blockbite theme",
-  "main": "index.js",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.js",
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
   "author": "block-bite.com",
   "license": "ISC",
+  "peerDependencies": {
+    "tailwindcss": ">=4.0.0"
+  },
   "dependencies": {
+    "i": "^0.3.7",
+    "npm": "^11.3.0",
+    "tailwind-scrollbar": "^4.0.2",
     "user": "^0.0.0"
   },
   "publishConfig": {
     "access": "public"
   },
   "devDependencies": {
+    "@tailwindcss/vite": "^4.1.8",
     "autoprefixer": "^10.4.19",
     "postcss": "^8.4.38",
-    "tailwindcss": "^3.4.3",
+    "tailwindcss": "^4.1.10",
+    "typescript": "^5.8.3",
     "vite": "^5.2.0"
   },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "dev": "vite",
-    "build": "vite build"
+    "build": "tsc --declaration --outDir dist",
+    "type-check": "tsc --noEmit"
   }
 }

package/CHANGELOG.md

@@ -1,55 +0,0 @@
-# @blockbite/tailwind
-
-## 3.4.13
-
-### Patch Changes
-
-- dfd9376: Address deprecation warnings for Toggle Controls, Range Sliders, Text Controls, and Toggle Group Controls
-
-## 3.4.12
-
-### Patch Changes
-
-- 3068ac3: added shared utils
-
-## 3.4.11
-
-### Patch Changes
-
-- ac4743d: working bundles optimized webpack
-
-## 3.4.10
-
-### Patch Changes
-
-- c12fc10: make ui and icon repos public again
-
-## 3.4.9
-
-### Patch Changes
-
-- 5f7bf3c: add version to icons package
-
-## 3.4.8
-
-### Patch Changes
-
-- 9448165: Version up
-
-## 3.4.7
-
-### Patch Changes
-
-- 1101873: Version up
-
-## 3.4.6
-
-### Patch Changes
-
-- 0d56127: Add dist directories
-
-## 3.4.5
-
-### Patch Changes
-
-- c9871ac: Linting fixes for free plugin and tailwind package

package/components/anchor-position.js

@@ -1,110 +0,0 @@
-module.exports = function ({ addComponents }) {
-  const anchorTopCenter = {
-    '.anchor-top-center': {
-      position: 'absolute',
-      top: '0',
-      left: '50%',
-      transform: 'translate(-50%, -50%)',
-    },
-  };
-
-  const anchorTopLeft = {
-    '.anchor-top-left': {
-      position: 'absolute',
-      top: '0',
-      left: '0',
-    },
-  };
-
-  const anchorTopRight = {
-    '.anchor-top-right': {
-      position: 'absolute',
-      top: '0',
-      right: '0',
-    },
-  };
-
-  const anchorBottomCenter = {
-    '.anchor-bottom-center': {
-      position: 'absolute',
-      bottom: '0',
-      left: '50%',
-      transform: 'translate(-50%, 50%)',
-    },
-  };
-
-  const anchorBottomLeft = {
-    '.anchor-bottom-left': {
-      position: 'absolute',
-      bottom: '0',
-      left: '0',
-    },
-  };
-
-  const anchorBottomRight = {
-    '.anchor-bottom-right': {
-      position: 'absolute',
-      bottom: '0',
-      right: '0',
-    },
-  };
-
-  const anchorCenterLeft = {
-    '.anchor-center-left': {
-      position: 'absolute',
-      top: '50%',
-      left: '0',
-      transform: 'translate(-50%, -50%)',
-    },
-  };
-
-  const anchorCenterRight = {
-    '.anchor-center-right': {
-      position: 'absolute',
-      top: '50%',
-      right: '0',
-      transform: 'translate(50%, -50%)',
-    },
-  };
-
-  const anchorCenterCenter = {
-    '.anchor-center-center': {
-      position: 'absolute',
-      top: '50%',
-      left: '50%',
-      transform: 'translate(-50%, -50%)',
-    },
-  };
-
-  const anchorCenterTop = {
-    '.anchor-center-top': {
-      position: 'absolute',
-      top: '0',
-      left: '50%',
-      transform: 'translate(-50%, 0%)',
-    },
-  };
-
-  const anchorCenterBottom = {
-    '.anchor-center-bottom': {
-      position: 'absolute',
-      bottom: '0',
-      left: '50%',
-      transform: 'translate(-50%, 0%)',
-    },
-  };
-
-  addComponents([
-    anchorTopCenter,
-    anchorTopLeft,
-    anchorTopRight,
-    anchorBottomCenter,
-    anchorBottomLeft,
-    anchorBottomRight,
-    anchorCenterLeft,
-    anchorCenterRight,
-    anchorCenterCenter,
-    anchorCenterTop,
-    anchorCenterBottom,
-  ]);
-};

package/components/fluid-container.js

@@ -1,34 +0,0 @@
-/*
---b_container-fluid-xs: 98vw;
---b_container-fluid-xl: 95vw;
---b_padding: 1rem;
-*/
-module.exports = function ({ addComponents, theme, config }) {
-  const important = config('important');
-  const prefix = typeof important === 'string' ? important : '';
-
-  const container = {
-    [`${prefix} .container-fluid`]: {
-      marginLeft: 'auto',
-      marginRight: 'auto',
-      paddingLeft: 'var(--b_padding, 4vw)',
-      paddingRight: 'var(--b_padding, 4vw)',
-    },
-  };
-
-  const maxWidth2xl = theme('screens.2xl');
-  // Add a media query for screens at '2xl' size
-  if (maxWidth2xl) {
-    container[`@media (min-width: ${maxWidth2xl})`] = {
-      [`${prefix} .container-fluid`]: {
-        maxWidth: maxWidth2xl,
-        marginLeft: 'auto',
-        marginRight: 'auto',
-        paddingLeft: 'var(--b_padding, 1rem)',
-        paddingRight: 'var(--b_padding, 1rem)',
-      },
-    };
-  }
-
-  addComponents(container);
-};

package/components/grid-container.js

@@ -1,37 +0,0 @@
-module.exports = function ({ addComponents, theme, config }) {
-  const maxWidthLg = theme('screens.lg');
-  const maxWidth2xl = theme('screens.2xl');
-
-  const important = config('important');
-  const cssVars = config('cssVars') || false;
-  const prefix = typeof important === 'string' ? important : '';
-
-  const container = {
-    [`${prefix} .grid-container`]: {
-      display: 'grid',
-      gridTemplateColumns: '1fr repeat(12, var(--b_col-width)) 1fr!important',
-    },
-  };
-  // skip adding the breakpoint-specific variables if cssVars is false
-  if (cssVars) {
-    const breakpoints = {
-      [maxWidthLg]: {
-        '--b_col-width': 'calc((100% - ((var(--b_padding, 4vw) ) * 2)) / 12)',
-        '--b_fr-size': '4vw',
-      },
-      [maxWidth2xl]: {
-        '--b_col-width': `calc((${maxWidth2xl} - (var(--b_padding, 1rem) * 2)) / 12)`,
-        '--b_padding': 'var(--b_padding, 1rem)',
-        '--b_fr-size': `calc(100% - ${maxWidth2xl} / 2)`,
-      },
-    };
-
-    // Add breakpoint-specific variables
-    for (const [breakpoint, vars] of Object.entries(breakpoints)) {
-      container[`@media (min-width: ${breakpoint})`] = {
-        ':root': vars,
-      };
-    }
-  }
-  addComponents(container);
-};

package/components/interaction.js

@@ -1,37 +0,0 @@
-module.exports = function ({ addComponents }) {
-  const b_tileslide_in = {
-    '.tile-in-left': {
-      position: 'absolute!important',
-      top: 0,
-      left: 0,
-      right: 0,
-      bottom: 0,
-      zIndex: 10,
-      overflow: 'hidden',
-      transition: 'transform 0.5s',
-      transform: 'translateX(-100%)',
-    },
-    '.active .tile-in-left': {
-      transform: 'translateX(0%)',
-    },
-  };
-
-  const b_tilefade_in = {
-    '.tile-in-fade': {
-      opacity: 0,
-      transition: 'opacity 0.5s',
-      position: 'absolute!important',
-      top: 0,
-      left: 0,
-      right: 0,
-      bottom: 0,
-      zIndex: 10,
-      overflow: 'hidden',
-    },
-    '.active .tile-in-fade': {
-      opacity: 1,
-    },
-  };
-
-  addComponents([b_tileslide_in, b_tilefade_in]);
-};

package/components/swiper.js

@@ -1,13 +0,0 @@
-module.exports = function ({ addComponents }) {
-  // allows infinite loop for swiper continues
-  const b_newsticker = {
-    '.newsticker': {
-      '& > .swiper-free-mode > .swiper-wrapper': {
-        '-webkit-transition-timing-function': 'linear !important',
-        '-o-transition-timing-function': 'linear !important',
-        'transition-timing-function': 'linear !important',
-      },
-    },
-  };
-  addComponents(b_newsticker);
-};

package/deprecated/fluid-container-aside.js

@@ -1,48 +0,0 @@
-module.exports = function ({ addComponents, theme }) {
-  const container = {
-    ".b_container-fluid-aside-r": {
-      width: "var(--container-fluid-xs)",
-      marginLeft: "auto",
-      marginRight: "auto",
-      paddingLeft: "1rem",
-      paddingRight: "1rem",
-    },
-    ".b_container-fluid-aside-l": {
-      width: "var(--container-fluid-xs)",
-      marginLeft: "auto",
-      marginRight: "auto",
-      paddingLeft: "1rem",
-      paddingRight: "1rem",
-    },
-  };
-
-  const maxWidth2xl = theme("screens.2xl");
-  const minWidthLg = theme("screens.lg");
-
-  if (minWidthLg) {
-    container[`@media (min-width: ${minWidthLg})`] = {
-      ".b_container-fluid-aside-l": {
-        width: "var(--container-fluid-xl)",
-        marginLeft: `calc((100% - var(--container-fluid-xl)) / 2)`,
-      },
-      ".b_container-fluid-aside-r": {
-        width: "var(--container-fluid-xl)",
-        marginRight: `calc((100% - var(--container-fluid-xl)) / 2 )`,
-      },
-    };
-  }
-  if (maxWidth2xl) {
-    container[`@media (min-width: ${maxWidth2xl})`] = {
-      ".b_container-fluid-aside-l": {
-        width: `calc(100% - (100% - ${maxWidth2xl}) / 2)`,
-        marginLeft: `calc((100% - ${maxWidth2xl}) / 2)`,
-      },
-      ".b_container-fluid-aside-r": {
-        width: `calc(100% - (100% - ${maxWidth2xl}) / 2)`,
-        marginRight: `calc((100% - ${maxWidth2xl}) / 2)`,
-      },
-    };
-  }
-
-  addComponents(container);
-};