@blockbite/tailwind 3.4.13 → 3.4.15

package/dist/___index copy.d.ts

@@ -0,0 +1,7 @@
+import { getAspectRatio } from './aspect-ratio.js';
+import { getColorObject, getColors } from './colors.js';
+import { getContainer } from './container.js';
+import { getScreens } from './screens.js';
+import { fluidSpacing, gridSpacing, nativeSpacing, percentSpacing, screenSpacing, spanSpacing } from './spacing.js';
+import { themeParser } from './theme-parser.js';
+export { fluidSpacing, getAspectRatio, getColorObject, getColors, getContainer, getScreens, gridSpacing, nativeSpacing, percentSpacing, screenSpacing, spanSpacing, themeParser, };

package/dist/___index copy.js

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

package/dist/colors.d.ts

@@ -0,0 +1,8 @@
+export declare const isSpecialColor: (color: any) => boolean;
+export declare const getColors: () => {};
+export declare const getColorObject: () => any[];
+declare const _default: {
+    getColors: () => {};
+    getColorObject: () => any[];
+};
+export default _default;

package/dist/colors.js

@@ -0,0 +1,65 @@
+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];
+const specialColors = {
+    black: true,
+    white: true,
+    transparent: true,
+    inherit: true,
+    current: true,
+    b_theme: true,
+};
+export const isSpecialColor = (color) => !!specialColors[color];
+export const getColors = () => {
+    const tailwindColors = {};
+    for (let i = 0; i < colors.length; i++) {
+        const color = colors[i];
+        if (isSpecialColor(color)) {
+            tailwindColors[color] = color;
+        }
+        else {
+            for (let j = 0; j < shades.length; j++) {
+                const shade = shades[j];
+                tailwindColors[`${color}-${shade}`] = `${color}-${shade}`;
+            }
+        }
+    }
+    return tailwindColors;
+};
+export const getColorObject = () => {
+    const colorObjects = [];
+    for (let i = 0; i < colors.length; i++) {
+        const color = colors[i];
+        if (isSpecialColor(color)) {
+            colorObjects.push({
+                label: `${color.charAt(0).toUpperCase() + color.slice(1)}`,
+                id: color,
+            });
+        }
+        else {
+            for (let j = 0; j < shades.length; j++) {
+                const shade = shades[j];
+                colorObjects.push({
+                    label: `${color.charAt(0).toUpperCase() + color.slice(1)} ${shade}`,
+                    id: `${color}-${shade}`,
+                });
+            }
+        }
+    }
+    return colorObjects;
+};
+export default { getColors, getColorObject };

package/dist/components/anchor-position.d.ts

@@ -0,0 +1,3 @@
+export default function ({ addComponents }: {
+    addComponents: any;
+}): void;

package/dist/components/anchor-position.js

@@ -0,0 +1,99 @@
+export default 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/dist/components/fluid-container.d.ts

@@ -0,0 +1,4 @@
+export default function ({ addComponents, theme }: {
+    addComponents: any;
+    theme: any;
+}): void;

package/dist/components/fluid-container.js

@@ -0,0 +1,29 @@
+/*
+--b_container-fluid-xs: 98vw;
+--b_container-fluid-xl: 95vw;
+--b_padding: 1rem;
+*/
+export default function ({ addComponents, theme }) {
+    // Base style
+    addComponents({
+        [`.container-fluid`]: {
+            marginLeft: 'auto',
+            marginRight: 'auto',
+            paddingLeft: 'var(--b_padding, 4vw)',
+            paddingRight: 'var(--b_padding, 4vw)',
+        },
+    });
+    // Responsive style for 2xl (users must use 2xl:container-fluid)
+    const maxWidth2xl = theme('screens.2xl');
+    if (maxWidth2xl) {
+        addComponents({
+            [`.container-fluid-2xl`]: {
+                maxWidth: maxWidth2xl,
+                marginLeft: 'auto',
+                marginRight: 'auto',
+                paddingLeft: 'var(--b_padding, 1rem)',
+                paddingRight: 'var(--b_padding, 1rem)',
+            },
+        });
+    }
+}

package/dist/components/grid-container.d.ts

@@ -0,0 +1,5 @@
+export default function ({ addComponents, theme, config, }: {
+    addComponents: (components: Record<string, any>) => void;
+    theme: (key: string) => string;
+    config: (key: string) => any;
+}): void;

package/dist/components/grid-container.js

@@ -0,0 +1,34 @@
+export default 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 : '';
+    // Base grid container
+    addComponents({
+        [`${prefix} .grid-container`]: {
+            display: 'grid',
+            gridTemplateColumns: '1fr repeat(12, var(--b_col-width)) 1fr!important',
+        },
+    });
+    if (cssVars) {
+        // Provide separate classes for breakpoint-specific variables
+        if (maxWidthLg) {
+            addComponents({
+                [`.grid-container-lg`]: {
+                    '--b_col-width': 'calc((100% - ((var(--b_padding, 4vw) ) * 2)) / 12)',
+                    '--b_fr-size': '4vw',
+                },
+            });
+        }
+        if (maxWidth2xl) {
+            addComponents({
+                [`.grid-container-2xl`]: {
+                    '--b_col-width': `calc((${maxWidth2xl} - (var(--b_padding, 1rem) * 2)) / 12)`,
+                    '--b_padding': 'var(--b_padding, 1rem)',
+                    '--b_fr-size': `calc(100% - ${maxWidth2xl} / 2)`,
+                },
+            });
+        }
+    }
+}

package/dist/components/interaction.d.ts

@@ -0,0 +1,3 @@
+export default function ({ addComponents }: {
+    addComponents: any;
+}): void;

package/dist/components/interaction.js

@@ -0,0 +1,35 @@
+export default 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/dist/components/swiper.d.ts

@@ -0,0 +1,3 @@
+export default function ({ addComponents }: {
+    addComponents: any;
+}): void;

package/dist/components/swiper.js

@@ -0,0 +1,13 @@
+export default 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/dist/container.d.ts

@@ -0,0 +1,8 @@
+export declare const getContainer: () => {
+    center: boolean;
+    padding: {
+        DEFAULT: string;
+        sm: string;
+        lg: string;
+    };
+};

package/dist/container.js

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

package/dist/gridarea/index.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("node_modules/tailwindcss/dist/types-B254mqw1.mjs").b;
+export default _default;

package/dist/gridarea/index.js

@@ -0,0 +1,7 @@
+import plugin from 'tailwindcss/plugin';
+import areaDimensions from './utilities/area-dimensions.js';
+import gridArea from './utilities/grid-area.js';
+export default plugin((api) => {
+    areaDimensions(api);
+    gridArea(api);
+});

package/dist/gridarea/utilities/area-dimensions.d.ts

@@ -0,0 +1,3 @@
+export default function ({ addUtilities }: {
+    addUtilities: any;
+}): void;

package/dist/gridarea/utilities/area-dimensions.js

@@ -0,0 +1,22 @@
+function escapeClassName(className) {
+    return className.replace(/([^a-zA-Z0-9-])/g, '\\$1');
+}
+export default function ({ addUtilities }) {
+    const newUtilities = {};
+    // 96 is max resolution
+    for (let i = 0; i <= 97; i++) {
+        newUtilities[`.${escapeClassName(`area-x-${i}`)}`] = {
+            '--b_area-x': `${i}`,
+        };
+        newUtilities[`.${escapeClassName(`area-y-${i}`)}`] = {
+            '--b_area-y': `${i}`,
+        };
+        newUtilities[`.${escapeClassName(`area-w-${i}`)}`] = {
+            '--b_area-w': `${i}`,
+        };
+        newUtilities[`.${escapeClassName(`area-h-${i}`)}`] = {
+            '--b_area-h': `${i}`,
+        };
+    }
+    addUtilities(newUtilities, ['responsive']);
+}

package/dist/gridarea/utilities/grid-area.d.ts

@@ -0,0 +1,5 @@
+export default function ({ addComponents, matchUtilities, config }: {
+    addComponents: any;
+    matchUtilities: any;
+    config: any;
+}): void;

package/dist/gridarea/utilities/grid-area.js

@@ -0,0 +1,46 @@
+export default 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/dist/index.d.ts

@@ -0,0 +1,7 @@
+import { getColorObject, getColors } from './colors.js';
+import { getContainer } from './container.js';
+import { getScreens } from './screens.js';
+import { fluidSpacing, gridSpacing, nativeSpacing, percentSpacing, screenSpacing, spanSpacing } from './spacing.js';
+declare const blockbiteTailwindPlugin: any;
+export default blockbiteTailwindPlugin;
+export { fluidSpacing, getColorObject, getColors, getContainer, getScreens, gridSpacing, nativeSpacing, percentSpacing, screenSpacing, spanSpacing, };

package/dist/index.js

@@ -0,0 +1,32 @@
+import plugin from 'tailwindcss/plugin';
+// Utilities and helpers
+import { getColorObject, getColors } from './colors.js';
+import { getContainer } from './container.js';
+import { getScreens } from './screens.js';
+import { fluidSpacing, gridSpacing, nativeSpacing, percentSpacing, screenSpacing, spanSpacing, } from './spacing.js';
+// Components
+import anchorPosition from './components/anchor-position.js';
+import fluidContainer from './components/fluid-container.js';
+import gridContainer from './components/grid-container.js';
+import interaction from './components/interaction.js';
+import swiper from './components/swiper.js';
+// Plugins
+import grid16x from './plugins/grid-16x.js';
+import viewportDimensions from './plugins/viewport-dimensions.js';
+// Gridarea utilities
+import gridAreaPlugin from './gridarea/index.js';
+const blockbiteTailwindPlugin = plugin(function (api) {
+    // Register all components
+    gridContainer(api);
+    fluidContainer(api);
+    anchorPosition(api);
+    interaction(api);
+    swiper(api);
+    // Register all plugins/utilities
+    viewportDimensions.handler(api);
+    gridAreaPlugin.handler(api);
+    grid16x.handler(api);
+});
+export default blockbiteTailwindPlugin;
+// Export functions and constants
+export { fluidSpacing, getColorObject, getColors, getContainer, getScreens, gridSpacing, nativeSpacing, percentSpacing, screenSpacing, spanSpacing, };

package/dist/plugins/grid-16x.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("node_modules/tailwindcss/dist/types-B254mqw1.mjs").b;
+export default _default;

package/dist/plugins/grid-16x.js

@@ -0,0 +1,60 @@
+import plugin from 'tailwindcss/plugin';
+export default plugin(function ({ addBase, addUtilities }) {
+    const baseVar = '--b_grid-spacing';
+    const baseValue = '1rem'; // 16px grid
+    // Set the root spacing variable
+    addBase({
+        ':root': {
+            [baseVar]: baseValue,
+        },
+    });
+    // Define spacing values
+    const minimalValues = [0, 1, 2, 4, 6, 8, 10, 12, 14, 18, 20, 22, 24, 32];
+    const largeSteps = [];
+    for (let i = 1; i <= 1280 / 16; i++) {
+        largeSteps.push(i * 16); // 16, 32, 48, ..., 1280
+    }
+    const allValues = Array.from(new Set([...minimalValues, ...largeSteps])).sort((a, b) => a - b);
+    const utilities = {};
+    const properties = {
+        w: 'width',
+        h: 'height',
+        'min-w-b': 'minWidth',
+        'max-w-b': 'maxWidth',
+        'min-h-b': 'minHeight',
+        'max-h-b': 'maxHeight',
+        'p-b': 'padding',
+        'pt-b': 'paddingTop',
+        'pr-b': 'paddingRight',
+        'pb-b': 'paddingBottom',
+        'pl-b': 'paddingLeft',
+        'px-b': ['paddingLeft', 'paddingRight'],
+        'py-b': ['paddingTop', 'paddingBottom'],
+        'm-b': 'margin',
+        'mt-b': 'marginTop',
+        'mr-b': 'marginRight',
+        'mb-b': 'marginBottom',
+        'ml-b': 'marginLeft',
+        'mx-b': ['marginLeft', 'marginRight'],
+        'my-b': ['marginTop', 'marginBottom'],
+    };
+    for (const [prefix, cssProp] of Object.entries(properties)) {
+        for (const pxValue of allValues) {
+            const multiplier = pxValue / 16;
+            const className = `.${prefix}-b_${pxValue}`;
+            const cssValue = `calc(var(${baseVar}) * ${multiplier})`;
+            if (Array.isArray(cssProp)) {
+                utilities[className] = cssProp.reduce((acc, prop) => {
+                    acc[prop] = cssValue;
+                    return acc;
+                }, {});
+            }
+            else {
+                utilities[className] = {
+                    [cssProp]: cssValue,
+                };
+            }
+        }
+    }
+    addUtilities(utilities, { variants: ['responsive'] });
+});

package/dist/plugins/viewport-dimensions.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("node_modules/tailwindcss/dist/types-B254mqw1.mjs").b;
+export default _default;

package/dist/plugins/viewport-dimensions.js

@@ -0,0 +1,25 @@
+import plugin from 'tailwindcss/plugin';
+export default plugin(function ({ addUtilities }) {
+    const utilities = {};
+    for (let i = 10; i <= 100; i += 10) {
+        utilities[`.w-b_screen-${i}`] = {
+            width: `${i}vw`,
+        };
+        utilities[`.h-b_screen-${i}`] = {
+            height: `${i}vh`,
+        };
+        utilities[`.min-h-b_screen-${i}`] = {
+            minHeight: `${i}vh`,
+        };
+        utilities[`.max-h-b_screen-${i}`] = {
+            maxHeight: `${i}vh`,
+        };
+        utilities[`.min-w-b_screen-${i}`] = {
+            minWidth: `${i}vw`,
+        };
+        utilities[`.max-w-b_screen-${i}`] = {
+            maxWidth: `${i}vw`,
+        };
+    }
+    addUtilities(utilities);
+});

package/dist/screens.d.ts

@@ -0,0 +1,5 @@
+export declare const getScreens: (prefix?: string, minxmax?: {
+    min: string;
+    max: string;
+    max2xl: string;
+}) => {};

package/dist/screens.js

@@ -0,0 +1,10 @@
+export const getScreens = (prefix = '', 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/dist/spacing.d.ts

@@ -0,0 +1,6 @@
+export declare const gridSpacing: (prefix?: string) => {};
+export declare const fluidSpacing: (prefix?: string) => {};
+export declare const percentSpacing: () => string[];
+export declare const screenSpacing: () => {};
+export declare const nativeSpacing: () => (string | number)[];
+export declare const spanSpacing: () => number[];