@blockbite/tailwind 3.4.13 → 3.4.14

package/deprecated/fluid-container-half.js

@@ -1,48 +0,0 @@
-module.exports = function ({ addComponents, theme }) {
-  const container = {
-    ".b_container-fluid-half-r": {
-      width: "var(--container-fluid-xs)",
-      marginLeft: "auto",
-      marginRight: "auto",
-      paddingLeft: "1rem",
-      paddingRight: "1rem",
-    },
-    ".b_container-fluid-half-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-half-l": {
-        width: "50%",
-        marginLeft: `calc((100% - var(--container-fluid-xl)) / 2)`,
-      },
-      ".b_container-fluid-half-r": {
-        width: "50%",
-        marginRight: `calc((100% - var(--container-fluid-xl)) / 2 )`,
-      },
-    };
-  }
-  if (maxWidth2xl) {
-    container[`@media (min-width: ${maxWidth2xl})`] = {
-      ".b_container-fluid-half-l": {
-        width: `calc(${maxWidth2xl} / 2)`,
-        marginLeft: `calc((100% - ${maxWidth2xl}) / 2)`,
-      },
-      ".b_container-fluid-half-r": {
-        width: `calc(${maxWidth2xl} / 2)`,
-        marginRight: `calc((100% - ${maxWidth2xl}) / 2)`,
-      },
-    };
-  }
-
-  addComponents(container);
-};

package/dist/assets/index-BeSH1wKF.js

@@ -1,74 +0,0 @@
-import a from"https://esm.sh/tailwindcss-in-browser@0.1.3";(function(){const t=document.createElement("link").relList;if(t&&t.supports&&t.supports("modulepreload"))return;for(const e of document.querySelectorAll('link[rel="modulepreload"]'))s(e);new MutationObserver(e=>{for(const r of e)if(r.type==="childList")for(const l of r.addedNodes)l.tagName==="LINK"&&l.rel==="modulepreload"&&s(l)}).observe(document,{childList:!0,subtree:!0});function d(e){const r={};return e.integrity&&(r.integrity=e.integrity),e.referrerPolicy&&(r.referrerPolicy=e.referrerPolicy),e.crossOrigin==="use-credentials"?r.credentials="include":e.crossOrigin==="anonymous"?r.credentials="omit":r.credentials="same-origin",r}function s(e){if(e.ep)return;e.ep=!0;const r=d(e);fetch(e.href,r)}})();const i=`
-        <div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md space-y-4">
-        <h1 class="text-2xl font-bold">Hello, Tailwind CSS v4!</h1>
-        <p class="text-gray-500">This is a sample component styled with Tailwind CSS v4 in the browser.</p>
-        </div>
-    `,c=`
-        @theme {
-        --color-primary: #3b82f6;
-        --color-secondary: #64748b;
-        --font-sans: 'Inter', sans-serif;
-        }
-    `;a(i,c).then(o=>{const t=document.createElement("style");t.textContent=o,document.head.appendChild(t)});document.querySelector("#app").innerHTML=`
-<div style="--b_full:100%;">
-  <div class="w-full h-[500px] grid b_grid-area-64 bg-red-200">
-    <h1 class="bg-yellow-200 b_area md:b_area-x-6 md:b_area-y-4 md:b_area-w-14 md:b_area-h-14">Grid area </h1>
-  </div>
-
-
-   <div class="w-full h-[500px] grid b_grid-area-64 bg-red-200">
-    <h1 class="bg-yellow-200 b_area-[1-1-20-40]">Grid area !</h1>
-  </div>
-
-  <div class="container bg-red-yellow-200 my-4 mx-auto">
-    <h4 class="border-red-200 text-4xl border border-red-200  h-[300px]">container tailwind</h4>
-  </div>
-
-
-  <div class="b_container-fluid bg-red-yellow-200 my-4">
-    <h4 class="border-red-200 text-4xl border border-red-200  h-[300px]">container fluid</h4>
-  </div>
-
-  <div class="b_grid-container bg-red-yellow-200 my-4 h-[300px]">
-    <h4 class="border border-red-200 text-4xl col-span-12 col-start-2">container grid</h4>
-  </div>
-
- <div class="b_grid-container bg-red-yellow-200 my-4 h-[300px]">
-    <h4 class="border border-red-200 text-4xl col-span-7 col-start-1">left</h4>
-    <p class="border border-red-200 text-4xl col-span-6">right</p>
-  </div>
-
-   <div class="b_grid-container bg-red-yellow-200 my-4 h-[300px]">
-    <h4 class="border border-red-200 text-4xl col-span-6 col-start-2">left</h4>
-    <p class="border border-red-200 text-4xl col-span-7 col-start-8">right</p>
-  </div>
-
-   <div class="b_grid-container bg-yellow-200 my-4 h-[300px]">
-      <h4 class="border bg-red-200 text-4xl col-span-7 col-start-1 row-start-1">left image</h4>
-      <h4 class="border border-blue-200 bg-blue-200 bg-opacity-40 text-4xl col-span-6 col-start-2 row-start-1">left text with extra layer</h4>
-       <p class="border border-red-200 text-4xl col-span-6">right</p>
-   </div>
-
-
-    <div class="b_grid-container bg-yellow-200 my-4 h-[300px]">
-      <h4 class="border bg-red-200 text-4xl col-span-7 col-start-8 row-start-1 text-right">right image</h4>
-      <h4 class="border border-blue-200 bg-blue-200 bg-opacity-40 text-4xl col-span-6 col-start-8 row-start-1">left text</h4>
-       <p class="border border-red-200 text-4xl col-span-6">left</p>
-   </div>
-
-
-    <div class="b_grid-container bg-yellow-200 my-4 h-[300px] w-full">
-      <div class="border bg-red-200 text-4xl col-span-7 col-start-1 row-start-1">
-        <h4 class="border border-blue-200 bg-blue-200 bg-opacity-40 text-4xl" style="padding-left:var(--b_fr-size);">left text with --b_fr-size</h4>
-      </div>
-      
-       <p class="border border-red-200 text-4xl col-span-6">right</p>
-   </div>
-
-<div class="b_theme-bg-red-500 bg-yellow-300 text-white p-40 text-3xl">
-  Works beautifully 🎨
-  <div class="bg-b_theme">This should be red from the parent</div>
-</div>
-  
-</div>
-`;

package/dist/assets/index-CFh4XZ-f.css

@@ -1 +0,0 @@
-*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.container{width:100%;margin-right:auto;margin-left:auto;padding-right:var(--b_padding, 1rem);padding-left:var(--b_padding, 1rem)}@media (min-width: 640px){.container{max-width:640px;padding-right:var(--b_padding, 1rem);padding-left:var(--b_padding, 1rem)}}@media (min-width: 768px){.container{max-width:768px}}@media (min-width: 1024px){.container{max-width:1024px;padding-right:var(--b_padding, 1rem);padding-left:var(--b_padding, 1rem)}}@media (min-width: 1280px){.container{max-width:1280px}}@media (min-width: 1536px){.container{max-width:1536px}}.area{grid-area:var(--b_area-y) / var(--b_area-x) / calc(var(--b_area-y) + var(--b_area-h)) / calc(var(--b_area-x) + var(--b_area-w))}.b_grid-area-64{display:grid;grid-template-columns:repeat(64,1fr);grid-template-rows:repeat(64,1fr);--init-area: 1 / 1 / 16 / 16}.col-span-12{grid-column:span 12 / span 12}.col-span-6{grid-column:span 6 / span 6}.col-span-7{grid-column:span 7 / span 7}.col-start-1{grid-column-start:1}.col-start-2{grid-column-start:2}.col-start-8{grid-column-start:8}.row-start-1{grid-row-start:1}.mx-auto{margin-left:auto;margin-right:auto}.my-4{margin-top:1rem;margin-bottom:1rem}.grid{display:grid}.h-\[300px\]{height:300px}.h-\[500px\]{height:500px}.w-full{width:100%}.border{border-width:1px}.border-blue-200{--tw-border-opacity: 1;border-color:rgb(191 219 254 / var(--tw-border-opacity, 1))}.border-red-200{--tw-border-opacity: 1;border-color:rgb(254 202 202 / var(--tw-border-opacity, 1))}.bg-blue-200{--tw-bg-opacity: 1;background-color:rgb(191 219 254 / var(--tw-bg-opacity, 1))}.bg-red-200{--tw-bg-opacity: 1;background-color:rgb(254 202 202 / var(--tw-bg-opacity, 1))}.bg-yellow-200{--tw-bg-opacity: 1;background-color:rgb(254 240 138 / var(--tw-bg-opacity, 1))}.bg-yellow-300{--tw-bg-opacity: 1;background-color:rgb(253 224 71 / var(--tw-bg-opacity, 1))}.bg-opacity-40{--tw-bg-opacity: .4}.p-40{padding:10rem}.text-right{text-align:right}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.b_theme-bg-red-500{--theme-bg: #ef4444}.bg-b_theme{background-color:var(--theme-bg)}h1{font-size:2.25rem;line-height:2.5rem}

package/dist/index.html

@@ -1,23 +0,0 @@
-<!doctype html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Vite App</title>
-
-
-  <script type="module" crossorigin src="/assets/index-BeSH1wKF.js"></script>
-  <link rel="stylesheet" crossorigin href="/assets/index-CFh4XZ-f.css">
-</head>
-
-
-<body>
-  <div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md space-y-4">
-    <h1 class="text-2xl font-bold">Hello, Tailwind CSS v4!</h1>
-    <p class="text-gray-500">This is a sample component styled with Tailwind CSS v4 in the browser.</p>
-  </div>
-  <div id="app"></div>
-</body>
-
-</html>

package/gridarea/index.js

@@ -1,6 +0,0 @@
-const plugin = require('tailwindcss/plugin');
-
-module.exports = plugin((api) => {
-  require('./utilities/area-dimensions')(api);
-  require('./utilities/grid-area')(api);
-});

package/gridarea/utilities/area-dimensions.js

@@ -1,13 +0,0 @@
-module.exports = function ({ addUtilities, e }) {
-  const newUtilities = {};
-
-  // 96 is max resolution
-  for (let i = 0; i <= 97; i++) {
-    newUtilities[`.${e(`area-x-${i}`)}`] = { '--b_area-x': `${i}` };
-    newUtilities[`.${e(`area-y-${i}`)}`] = { '--b_area-y': `${i}` };
-    newUtilities[`.${e(`area-w-${i}`)}`] = { '--b_area-w': `${i}` };
-    newUtilities[`.${e(`area-h-${i}`)}`] = { '--b_area-h': `${i}` };
-  }
-
-  addUtilities(newUtilities, ['responsive']);
-};

package/gridarea/utilities/grid-area.js

@@ -1,49 +0,0 @@
-module.exports = function ({ addComponents, matchUtilities, config }) {
-  const important = config('important');
-  const prefix = typeof important === 'string' ? important : '';
-  // Predefined grid-area utilities
-  addComponents({
-    [`${prefix} .area`]: {
-      gridArea:
-        'var(--b_area-y) / var(--b_area-x) / calc(var(--b_area-y) + var(--b_area-h)) / calc(var(--b_area-x) + var(--b_area-w))',
-    },
-    [`${prefix} .b_grid-area-16`]: {
-      display: 'grid',
-      gridTemplateColumns: 'repeat(16, 1fr)',
-      gridTemplateRows: 'repeat(16, 1fr)',
-      '--init-area': '1 / 1 / 4 / 4',
-    },
-    [`${prefix} .b_grid-area-32`]: {
-      display: 'grid',
-      gridTemplateColumns: 'repeat(32, 1fr)',
-      gridTemplateRows: 'repeat(32, 1fr)',
-      '--init-area': '1 / 1 / 8 / 8',
-    },
-    [`${prefix} .b_grid-area-64`]: {
-      display: 'grid',
-      gridTemplateColumns: 'repeat(64, 1fr)',
-      gridTemplateRows: 'repeat(64, 1fr)',
-      '--init-area': '1 / 1 / 16 / 16',
-    },
-    [`${prefix} .b_grid-area-96`]: {
-      display: 'grid',
-      gridTemplateColumns: 'repeat(96, 1fr)',
-      gridTemplateRows: 'repeat(96, 1fr)',
-      '--init-area': '1 / 1 / 24 / 24',
-    },
-  });
-  matchUtilities(
-    {
-      area: (value) => {
-        // Remove the square brackets and split the value by "/"
-        const parts = value.split('-'); // slice to remove the square brackets
-        if (parts.length === 4) {
-          return {
-            'grid-area': `${parts[0]} / ${parts[1]} / ${parts[2]} / ${parts[3]}`,
-          };
-        }
-      },
-    },
-    { values: {} } // Allow arbitrary values like b_area[1/4/4/3]
-  );
-};

package/index.d.ts

@@ -1,17 +0,0 @@
-declare module "@blockbite/tailwind" {
-  // Function declarations
-  export function getAspectRatio(...args: any[]): any;
-  export function getContainer(...args: any[]): any;
-  export function getScreens(...args: any[]): any;
-  export function getColors(...args: any[]): any;
-  export function getColorObject(...args: any[]): any;
-  export function themeParser(...args: any[]): any;
-
-// Constant declarations
-export const gridSpacing: any;
-export const fluidSpacing: any;
-export const screenSpacing: any;
-export const percentSpacing: any;
-export const nativeSpacing: any;
-export const spanSpacing: any;
-}

package/index.html

@@ -1,46 +0,0 @@
-<!doctype html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Vite App</title>
-
-
-  <script type="module">
-    import buildCss from "https://esm.sh/tailwindcss-in-browser@0.1.3";
-
-    const markup = `
-        <div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md space-y-4">
-        <h1 class="text-2xl font-bold">Hello, Tailwind CSS v4!</h1>
-        <p class="text-gray-500">This is a sample component styled with Tailwind CSS v4 in the browser.</p>
-        </div>
-    `;
-
-    const configurationCss = `
-        @theme {
-        --color-primary: #3b82f6;
-        --color-secondary: #64748b;
-        --font-sans: 'Inter', sans-serif;
-        }
-    `;
-
-    buildCss(markup, configurationCss).then((css) => {
-      const styleTag = document.createElement("style");
-      styleTag.textContent = css;
-      document.head.appendChild(styleTag);
-    });
-  </script>
-</head>
-
-
-<body>
-  <div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md space-y-4">
-    <h1 class="text-2xl font-bold">Hello, Tailwind CSS v4!</h1>
-    <p class="text-gray-500">This is a sample component styled with Tailwind CSS v4 in the browser.</p>
-  </div>
-  <div id="app"></div>
-  <script type="module" src="/vite.js"></script>
-</body>
-
-</html>

package/index.js

@@ -1,30 +0,0 @@
-// Import functions and constants
-import { getAspectRatio } from './lib/aspect-ratio';
-import { getColorObject, getColors } from './lib/colors';
-import { getContainer } from './lib/container';
-import { getScreens } from './lib/screens';
-import {
-  fluidSpacing,
-  gridSpacing,
-  nativeSpacing,
-  percentSpacing,
-  screenSpacing,
-  spanSpacing,
-} from './lib/spacing';
-import { themeParser } from './lib/theme-parser';
-
-// Export functions and constants
-export {
-  fluidSpacing,
-  getAspectRatio,
-  getColorObject,
-  getColors,
-  getContainer,
-  getScreens,
-  gridSpacing,
-  nativeSpacing,
-  percentSpacing,
-  screenSpacing,
-  spanSpacing,
-  themeParser,
-};

package/lib/aspect-ratio.js

@@ -1,6 +0,0 @@
-export const getAspectRatio = (prefix = 'b_') => {
-  const ratios = {};
-  ratios[prefix + 'portrait'] = '3 / 4';
-  ratios[prefix + 'landscape'] = '4 / 3';
-  return ratios;
-};

package/lib/colors.js

@@ -1,58 +0,0 @@
-const colors = [
-  'b_theme',
-  'black',
-  'white',
-  'transparent',
-  'inherit',
-  'current',
-  'gray',
-  'red',
-  'yellow',
-  'green',
-  'blue',
-  'indigo',
-  'purple',
-  'pink',
-];
-
-const shades = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
-
-export const isSpecialColor = (color) =>
-  ['black', 'white', 'transparent', 'inherit', 'current', 'b_theme'].includes(
-    color
-  );
-
-export const getColors = () => {
-  const tailwindColors = {};
-
-  colors.forEach((color) => {
-    if (isSpecialColor(color)) {
-      tailwindColors[color] = color;
-    } else {
-      shades.forEach((shade) => {
-        tailwindColors[`${color}-${shade}`] = `${color}-${shade}`;
-      });
-    }
-  });
-
-  return tailwindColors;
-};
-
-export const getColorObject = () => {
-  const colorObjects = colors.flatMap((color) => {
-    if (isSpecialColor(color)) {
-      return {
-        label: `${color.charAt(0).toUpperCase() + color.slice(1)}`,
-        id: color,
-      };
-    }
-    return shades.map((shade) => ({
-      label: `${color.charAt(0).toUpperCase() + color.slice(1)} ${shade}`,
-      id: `${color}-${shade}`,
-    }));
-  });
-
-  return colorObjects;
-};
-
-export default { getColors, getColorObject };

package/lib/container.js

@@ -1,10 +0,0 @@
-export const getContainer = () => {
-  return {
-    center: true,
-    padding: {
-      DEFAULT: 'var(--b_padding, 1rem)',
-      sm: 'var(--b_padding, 1rem)',
-      lg: 'var(--b_padding, 1rem)',
-    },
-  };
-};

package/lib/screens.js

@@ -1,13 +0,0 @@
-export const getScreens = (
-  prefix = 'b_',
-  minxmax = { min: '768px', max: '1100px', max2xl: '1440px' }
-) => {
-  // max 320px
-  const screens = {};
-  screens[prefix + 'xs'] = { max: minxmax.min };
-  screens[prefix + 'md'] = { min: minxmax.min, max: minxmax.max };
-  screens[prefix + 'xl'] = { min: minxmax.max };
-  screens[prefix + 'sm'] = { max: minxmax.max };
-  screens[prefix + '2xl'] = { min: minxmax.max2xl };
-  return screens;
-};

package/lib/spacing.js

@@ -1,215 +0,0 @@
-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;
-};