entasis 0.0.0 → 0.4.1

package/dist/tailwind/scrollFade.js

@@ -0,0 +1,245 @@
+const withBareValue = (values, getBareValue) => {
+    // Tailwind declares __BARE_VALUE__ beside a string index signature; this hook is
+    // valid at runtime but impossible to express without a narrow assertion.
+    return {
+        ...values,
+        __BARE_VALUE__: getBareValue
+    };
+};
+const defaultFadeSize = 'var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10)))';
+const revealSize = 'var(--scroll-fade-reveal, calc(var(--spacing) * 24))';
+const isInteger = (value) => {
+    const number = Number(value);
+    return Number.isInteger(number) && number >= 0 && String(number) === value;
+};
+const spacingValue = ({ value }) => isInteger(value) ? `calc(var(--spacing) * ${value})` : undefined;
+const maskProperties = {
+    '-webkit-mask-composite': 'source-in',
+    'mask-composite': 'intersect',
+    '-webkit-mask-repeat': 'no-repeat',
+    'mask-repeat': 'no-repeat'
+};
+const scrollFadeProperties = {
+    '@property --scroll-fade-t': {
+        syntax: '"<length-percentage>"',
+        inherits: 'false',
+        'initial-value': '0px'
+    },
+    '@property --scroll-fade-b': {
+        syntax: '"<length-percentage>"',
+        inherits: 'false',
+        'initial-value': '0px'
+    },
+    '@property --scroll-fade-s': {
+        syntax: '"<length-percentage>"',
+        inherits: 'false',
+        'initial-value': '0px'
+    },
+    '@property --scroll-fade-e': {
+        syntax: '"<length-percentage>"',
+        inherits: 'false',
+        'initial-value': '0px'
+    },
+    '@property --scroll-fade-mask': {
+        syntax: '"*"',
+        inherits: 'false'
+    }
+};
+export const scrollFadeKeyframes = {
+    'scroll-fade-reveal-t': {
+        from: {
+            '--scroll-fade-t': '0px'
+        },
+        to: {
+            '--scroll-fade-t': `var(--_scroll-fade-size-t, ${defaultFadeSize})`
+        }
+    },
+    'scroll-fade-reveal-b': {
+        from: {
+            '--scroll-fade-b': `var(--_scroll-fade-size-b, ${defaultFadeSize})`
+        },
+        to: {
+            '--scroll-fade-b': '0px'
+        }
+    },
+    'scroll-fade-reveal-s': {
+        from: {
+            '--scroll-fade-s': '0px'
+        },
+        to: {
+            '--scroll-fade-s': `var(--_scroll-fade-size-s, ${defaultFadeSize})`
+        }
+    },
+    'scroll-fade-reveal-e': {
+        from: {
+            '--scroll-fade-e': `var(--_scroll-fade-size-e, ${defaultFadeSize})`
+        },
+        to: {
+            '--scroll-fade-e': '0px'
+        }
+    }
+};
+const blockFadeSizeProperties = {
+    '--_scroll-fade-size-t': `var(--scroll-fade-t-size, ${defaultFadeSize})`,
+    '--_scroll-fade-size-b': `var(--scroll-fade-b-size, ${defaultFadeSize})`
+};
+const inlineFadeSizeProperties = {
+    '--_scroll-fade-size-s': `var(--scroll-fade-s-size, ${defaultFadeSize})`,
+    '--_scroll-fade-size-e': `var(--scroll-fade-e-size, ${defaultFadeSize})`
+};
+const blockFadeUtility = {
+    ...blockFadeSizeProperties,
+    '--scroll-fade-block': 'linear-gradient(to bottom, transparent 0, #000 var(--scroll-fade-t, 0px), #000 calc(100% - var(--scroll-fade-b, 0px)), transparent 100%)',
+    '-webkit-mask-image': 'var(--scroll-fade-mask, var(--scroll-fade-block))',
+    'mask-image': 'var(--scroll-fade-mask, var(--scroll-fade-block))',
+    ...maskProperties,
+    '@supports (animation-timeline: scroll())': {
+        animation: 'scroll-fade-reveal-t 1ms ease-in-out, scroll-fade-reveal-b 1ms ease-in-out',
+        'animation-timeline': 'scroll(self y), scroll(self y)',
+        'animation-range': `0 ${revealSize}, calc(100% - ${revealSize}) 100%`,
+        'animation-fill-mode': 'both'
+    },
+    '@supports not (animation-timeline: scroll())': {
+        '--scroll-fade-t': 'var(--_scroll-fade-size-t)',
+        '--scroll-fade-b': 'var(--_scroll-fade-size-b)'
+    }
+};
+const inlineFadeUtility = {
+    ...inlineFadeSizeProperties,
+    '--scroll-fade-inline': 'linear-gradient(to right, transparent 0, #000 var(--scroll-fade-s, 0px), #000 calc(100% - var(--scroll-fade-e, 0px)), transparent 100%)',
+    '&:where([dir="rtl"], [dir="rtl"] *)': {
+        '--scroll-fade-inline': 'linear-gradient(to left, transparent 0, #000 var(--scroll-fade-s, 0px), #000 calc(100% - var(--scroll-fade-e, 0px)), transparent 100%)'
+    },
+    '-webkit-mask-image': 'var(--scroll-fade-mask, var(--scroll-fade-inline))',
+    'mask-image': 'var(--scroll-fade-mask, var(--scroll-fade-inline))',
+    ...maskProperties,
+    '@supports (animation-timeline: scroll())': {
+        animation: 'scroll-fade-reveal-s 1ms ease-in-out, scroll-fade-reveal-e 1ms ease-in-out',
+        'animation-timeline': 'scroll(self inline), scroll(self inline)',
+        'animation-range': `0 ${revealSize}, calc(100% - ${revealSize}) 100%`,
+        'animation-fill-mode': 'both'
+    },
+    '@supports not (animation-timeline: scroll())': {
+        '--scroll-fade-s': 'var(--_scroll-fade-size-s)',
+        '--scroll-fade-e': 'var(--_scroll-fade-size-e)'
+    }
+};
+const createEdgeFadeUtility = ({ sizeVariable, sizeProperty, mask, rtlMask, animationName, timeline, range, fallbackProperty }) => ({
+    [sizeVariable]: `var(${sizeProperty}, ${defaultFadeSize})`,
+    '--scroll-fade-mask': mask,
+    ...(rtlMask
+        ? {
+            '&:where([dir="rtl"], [dir="rtl"] *)': {
+                '--scroll-fade-mask': rtlMask
+            }
+        }
+        : {}),
+    '-webkit-mask-image': 'var(--scroll-fade-mask)',
+    'mask-image': 'var(--scroll-fade-mask)',
+    ...maskProperties,
+    '@supports (animation-timeline: scroll())': {
+        animation: `${animationName} 1ms ease-in-out`,
+        'animation-timeline': timeline,
+        'animation-range': range,
+        'animation-fill-mode': 'both'
+    },
+    '@supports not (animation-timeline: scroll())': {
+        [fallbackProperty]: `var(${sizeVariable})`
+    }
+});
+const scrollFadeUtilities = {
+    '.scroll-fade': blockFadeUtility,
+    '.scroll-fade-y': blockFadeUtility,
+    '.scroll-fade-x': inlineFadeUtility,
+    '.scroll-fade-t': createEdgeFadeUtility({
+        sizeVariable: '--_scroll-fade-size-t',
+        sizeProperty: '--scroll-fade-t-size',
+        mask: 'linear-gradient(to bottom, transparent 0, #000 var(--scroll-fade-t, 0px), #000 100%)',
+        animationName: 'scroll-fade-reveal-t',
+        timeline: 'scroll(self y)',
+        range: `0 ${revealSize}`,
+        fallbackProperty: '--scroll-fade-t'
+    }),
+    '.scroll-fade-b': createEdgeFadeUtility({
+        sizeVariable: '--_scroll-fade-size-b',
+        sizeProperty: '--scroll-fade-b-size',
+        mask: 'linear-gradient(to bottom, #000 0, #000 calc(100% - var(--scroll-fade-b, 0px)), transparent 100%)',
+        animationName: 'scroll-fade-reveal-b',
+        timeline: 'scroll(self y)',
+        range: `calc(100% - ${revealSize}) 100%`,
+        fallbackProperty: '--scroll-fade-b'
+    }),
+    '.scroll-fade-l': createEdgeFadeUtility({
+        sizeVariable: '--_scroll-fade-size-s',
+        sizeProperty: '--scroll-fade-s-size',
+        mask: 'linear-gradient(to right, transparent 0, #000 var(--scroll-fade-s, 0px), #000 100%)',
+        animationName: 'scroll-fade-reveal-s',
+        timeline: 'scroll(self x)',
+        range: `0 ${revealSize}`,
+        fallbackProperty: '--scroll-fade-s'
+    }),
+    '.scroll-fade-r': createEdgeFadeUtility({
+        sizeVariable: '--_scroll-fade-size-e',
+        sizeProperty: '--scroll-fade-e-size',
+        mask: 'linear-gradient(to right, #000 0, #000 calc(100% - var(--scroll-fade-e, 0px)), transparent 100%)',
+        animationName: 'scroll-fade-reveal-e',
+        timeline: 'scroll(self x)',
+        range: `calc(100% - ${revealSize}) 100%`,
+        fallbackProperty: '--scroll-fade-e'
+    }),
+    '.scroll-fade-s': createEdgeFadeUtility({
+        sizeVariable: '--_scroll-fade-size-s',
+        sizeProperty: '--scroll-fade-s-size',
+        mask: 'linear-gradient(to right, transparent 0, #000 var(--scroll-fade-s, 0px), #000 100%)',
+        rtlMask: 'linear-gradient(to left, transparent 0, #000 var(--scroll-fade-s, 0px), #000 100%)',
+        animationName: 'scroll-fade-reveal-s',
+        timeline: 'scroll(self inline)',
+        range: `0 ${revealSize}`,
+        fallbackProperty: '--scroll-fade-s'
+    }),
+    '.scroll-fade-e': createEdgeFadeUtility({
+        sizeVariable: '--_scroll-fade-size-e',
+        sizeProperty: '--scroll-fade-e-size',
+        mask: 'linear-gradient(to right, #000 0, #000 calc(100% - var(--scroll-fade-e, 0px)), transparent 100%)',
+        rtlMask: 'linear-gradient(to left, #000 0, #000 calc(100% - var(--scroll-fade-e, 0px)), transparent 100%)',
+        animationName: 'scroll-fade-reveal-e',
+        timeline: 'scroll(self inline)',
+        range: `calc(100% - ${revealSize}) 100%`,
+        fallbackProperty: '--scroll-fade-e'
+    }),
+    '.scroll-fade-static': {
+        animation: 'none',
+        '--scroll-fade-t': 'var(--_scroll-fade-size-t)',
+        '--scroll-fade-b': 'var(--_scroll-fade-size-b)',
+        '--scroll-fade-s': 'var(--_scroll-fade-size-s)',
+        '--scroll-fade-e': 'var(--_scroll-fade-size-e)'
+    },
+    '.scroll-fade-none': {
+        '--scroll-fade-mask': 'none'
+    }
+};
+export const addScrollFadeUtilities = ({ addBase, addUtilities, matchUtilities }) => {
+    addBase(scrollFadeProperties);
+    addUtilities(scrollFadeUtilities);
+    const spacingValues = withBareValue({}, spacingValue);
+    matchUtilities({
+        'scroll-fade': (value) => ({
+            '--scroll-fade-size': value
+        }),
+        'scroll-fade-t': (value) => ({
+            '--scroll-fade-t-size': value
+        }),
+        'scroll-fade-b': (value) => ({
+            '--scroll-fade-b-size': value
+        }),
+        'scroll-fade-s': (value) => ({
+            '--scroll-fade-s-size': value
+        }),
+        'scroll-fade-e': (value) => ({
+            '--scroll-fade-e-size': value
+        })
+    }, {
+        values: spacingValues,
+        type: ['length', 'percentage']
+    });
+};

package/dist/tailwind/shimmer.d.ts

@@ -0,0 +1,12 @@
+import type { PluginAPI } from 'tailwindcss/plugin';
+export declare const shimmerKeyframes: {
+    'tw-shimmer': {
+        from: {
+            'background-position': string;
+        };
+        to: {
+            'background-position': string;
+        };
+    };
+};
+export declare const addShimmerUtilities: ({ addBase, addUtilities, matchUtilities, theme }: PluginAPI) => void;

package/dist/tailwind/shimmer.js

@@ -0,0 +1,175 @@
+const withBareValue = (values, getBareValue) => {
+    // Tailwind declares __BARE_VALUE__ beside a string index signature; this hook is
+    // valid at runtime but impossible to express without a narrow assertion.
+    return {
+        ...values,
+        __BARE_VALUE__: getBareValue
+    };
+};
+const isInteger = (value) => {
+    const number = Number(value);
+    return Number.isInteger(number) && number >= 0 && String(number) === value;
+};
+const integerValue = ({ value }) => (isInteger(value) ? value : undefined);
+const spacingValue = ({ value }) => isInteger(value) ? `calc(var(--spacing) * ${value})` : undefined;
+const colorVariablePattern = /^var\(--color-(.+)\)$/;
+const colorMixSupport = '@supports (color: color-mix(in lab, red, red))';
+const opacityMixPrefix = 'color-mix(in oklab, ';
+const opacityMixSuffix = ', transparent)';
+const opacityModifierPrefix = '__entasis-shimmer-integer-';
+const opacityModifierSuffix = '__';
+const encodeOpacityModifier = (value) => isInteger(value) ? `${opacityModifierPrefix}${value}${opacityModifierSuffix}` : undefined;
+const opacityModifiers = new Proxy({}, {
+    get: (_target, property) => typeof property === 'string' ? encodeOpacityModifier(property) : undefined,
+    getOwnPropertyDescriptor: (_target, property) => {
+        if (typeof property !== 'string' || !encodeOpacityModifier(property))
+            return;
+        // Tailwind does not expose whether a modifier was named or arbitrary. A
+        // virtual own property marks bare integers without imposing a finite range.
+        return { configurable: true, enumerable: false };
+    }
+});
+const createColorValues = (colors) => Object.fromEntries(Object.keys(colors).map((color) => [color, `var(--color-${color})`]));
+const resolveColorValue = (value, colors) => {
+    const color = colorVariablePattern.exec(value)?.[1];
+    if (!color)
+        return value;
+    const resolvedColor = colors[color];
+    return typeof resolvedColor === 'string' && !resolvedColor.startsWith('var(')
+        ? resolvedColor
+        : value;
+};
+const unwrapOpacityColor = (value, modifier) => {
+    if (!modifier?.startsWith(opacityModifierPrefix) || !modifier.endsWith(opacityModifierSuffix))
+        return;
+    const opacity = modifier.slice(opacityModifierPrefix.length, -opacityModifierSuffix.length);
+    if (!isInteger(opacity))
+        return;
+    const suffix = ` ${modifier}${opacityMixSuffix}`;
+    if (!value.startsWith(opacityMixPrefix) || !value.endsWith(suffix))
+        return;
+    return {
+        color: value.slice(opacityMixPrefix.length, -suffix.length),
+        opacity
+    };
+};
+const createShimmerColorRule = (value, { modifier }, colors) => {
+    if (!modifier)
+        return { '--shimmer-color': value };
+    const opacityColor = unwrapOpacityColor(value, modifier);
+    if (!opacityColor)
+        return {};
+    const resolvedColor = resolveColorValue(opacityColor.color, colors);
+    const mix = (color) => `color-mix(in oklch, ${color} calc(${opacityColor.opacity} * 1%), transparent)`;
+    return [
+        { '--shimmer-color': opacityColor.color },
+        { '--shimmer-color': mix(resolvedColor) },
+        ...(resolvedColor === opacityColor.color
+            ? []
+            : [
+                {
+                    [colorMixSupport]: {
+                        '--shimmer-color': mix(opacityColor.color)
+                    }
+                }
+            ])
+    ];
+};
+export const shimmerKeyframes = {
+    'tw-shimmer': {
+        from: {
+            'background-position': '100% 0'
+        },
+        to: {
+            'background-position': '0 0'
+        }
+    }
+};
+const shimmerProperties = {
+    '@property --shimmer-angle': {
+        syntax: '"<angle>"',
+        inherits: 'true',
+        'initial-value': '20deg'
+    },
+    '@property --shimmer-image': {
+        syntax: '"*"',
+        inherits: 'false'
+    },
+    '@property --shimmer-text-fill': {
+        syntax: '"*"',
+        inherits: 'false'
+    }
+};
+const shimmerUtilities = {
+    '.shimmer': {
+        '--_spread': 'var(--shimmer-spread, calc(3ch + 40px))',
+        '--_base': 'currentColor',
+        '--_highlight': 'var(--shimmer-color, oklch(from currentColor l c h / calc(alpha * 0.2)))',
+        'background-image': 'var(--shimmer-image, linear-gradient(calc(90deg + var(--shimmer-angle)), var(--_base) calc(50% - var(--_spread)), color-mix(in oklch, var(--_highlight), var(--_base) 50%) calc(50% - var(--_spread) * 0.5), var(--_highlight) 50%, color-mix(in oklch, var(--_highlight), var(--_base) 50%) calc(50% + var(--_spread) * 0.5), var(--_base) calc(50% + var(--_spread))))',
+        'background-repeat': 'no-repeat',
+        'background-size': 'calc(200% + var(--_spread) * 2) 100%',
+        'background-position': '0 0',
+        'background-clip': 'text',
+        '-webkit-surface-clip': 'text',
+        '-webkit-text-fill-color': 'var(--shimmer-text-fill, transparent)',
+        animation: 'tw-shimmer var(--shimmer-duration, 2s) linear infinite',
+        'html[data-theme="dark"] &, .dark &, [data-color-scheme="dark"] &': {
+            '--_highlight': 'var(--shimmer-color, oklch(from currentColor max(0.8, calc(l + 0.4)) c h / calc(alpha + 0.4)))'
+        },
+        '&:where([dir="rtl"], [dir="rtl"] *)': {
+            'animation-direction': 'reverse'
+        },
+        '@media (prefers-reduced-motion: reduce)': {
+            animation: 'none',
+            'background-image': 'none',
+            '-webkit-text-fill-color': 'currentColor'
+        }
+    },
+    '.shimmer-once': {
+        'animation-iteration-count': '1'
+    },
+    '.shimmer-reverse': {
+        'animation-direction': 'reverse'
+    },
+    '.shimmer-none': {
+        '--shimmer-image': 'none',
+        '--shimmer-text-fill': 'currentColor'
+    }
+};
+export const addShimmerUtilities = ({ addBase, addUtilities, matchUtilities, theme }) => {
+    addBase(shimmerProperties);
+    addUtilities(shimmerUtilities);
+    const colors = theme('colors');
+    const colorValues = createColorValues(colors);
+    matchUtilities({
+        'shimmer-color': (value, context) => createShimmerColorRule(value, context, colors)
+    }, {
+        values: colorValues,
+        type: 'color',
+        modifiers: opacityModifiers
+    });
+    matchUtilities({
+        'shimmer-duration': (value) => ({
+            '--shimmer-duration': `calc(${value} * 1ms)`
+        })
+    }, {
+        values: withBareValue({}, integerValue),
+        type: 'integer'
+    });
+    matchUtilities({
+        'shimmer-spread': (value) => ({
+            '--shimmer-spread': value
+        })
+    }, {
+        values: withBareValue({}, spacingValue),
+        type: ['length', 'percentage']
+    });
+    matchUtilities({
+        'shimmer-angle': (value) => ({
+            '--shimmer-angle': `calc(${value} * 1deg)`
+        })
+    }, {
+        values: withBareValue({}, integerValue),
+        type: 'integer'
+    });
+};

package/dist/tailwind/spacing.d.ts

@@ -0,0 +1,2 @@
+import type { PluginAPI } from 'tailwindcss/plugin';
+export declare const applySpacingEngine: ({ addBase, matchUtilities }: PluginAPI) => void;

package/dist/tailwind/spacing.js

@@ -0,0 +1,71 @@
+const spacingVariables = {
+    '--space-micro': 'calc(var(--spacing) * 0.5)',
+    '--space-xs': 'calc(var(--spacing) * 1)',
+    '--space-sm': 'calc(var(--spacing) * 1.5)',
+    '--space-md': 'calc(var(--spacing) * 2)',
+    '--space-lg': 'calc(var(--spacing) * 3)',
+    '--space-xl': 'calc(var(--spacing) * 4)',
+    '--layout-space-sm': 'calc(var(--spacing) * 5)',
+    '--layout-space-md': 'calc(var(--spacing) * 6)',
+    '--layout-space-lg': 'calc(var(--spacing) * 8)',
+    '--layout-space-xl': 'calc(var(--spacing) * 12)'
+};
+const spacingValues = {
+    micro: 'var(--space-micro)',
+    xs: 'var(--space-xs)',
+    sm: 'var(--space-sm)',
+    md: 'var(--space-md)',
+    lg: 'var(--space-lg)',
+    xl: 'var(--space-xl)',
+    'layout-sm': 'var(--layout-space-sm)',
+    'layout-md': 'var(--layout-space-md)',
+    'layout-lg': 'var(--layout-space-lg)',
+    'layout-xl': 'var(--layout-space-xl)'
+};
+const gapUtilities = {
+    gap: (value) => ({ gap: value }),
+    'gap-x': (value) => ({ 'column-gap': value }),
+    'gap-y': (value) => ({ 'row-gap': value })
+};
+// `p`, `px` and `py` also publish their gap to their children as `--pad-parent-x/-y`, the
+// padding half of the cap `rounded-<step>-concentric` computes (see `radius.ts`).
+// One-sided padding (`pt-*`, `ps-*`) is not the uniform gap a concentric corner is derived
+// from, so it publishes nothing.
+const paddingUtilities = {
+    p: (value) => ({
+        padding: value,
+        '& > *': { '--pad-parent-x': value, '--pad-parent-y': value }
+    }),
+    px: (value) => ({ 'padding-inline': value, '& > *': { '--pad-parent-x': value } }),
+    py: (value) => ({ 'padding-block': value, '& > *': { '--pad-parent-y': value } }),
+    pt: (value) => ({ 'padding-top': value }),
+    pr: (value) => ({ 'padding-right': value }),
+    pb: (value) => ({ 'padding-bottom': value }),
+    pl: (value) => ({ 'padding-left': value }),
+    ps: (value) => ({ 'padding-inline-start': value }),
+    pe: (value) => ({ 'padding-inline-end': value })
+};
+const marginUtilities = {
+    m: (value) => ({ margin: value }),
+    mx: (value) => ({ 'margin-inline': value }),
+    my: (value) => ({ 'margin-block': value }),
+    mt: (value) => ({ 'margin-top': value }),
+    mr: (value) => ({ 'margin-right': value }),
+    mb: (value) => ({ 'margin-bottom': value }),
+    ml: (value) => ({ 'margin-left': value }),
+    ms: (value) => ({ 'margin-inline-start': value }),
+    me: (value) => ({ 'margin-inline-end': value })
+};
+const insetUtilities = {
+    top: (value) => ({ top: value }),
+    right: (value) => ({ right: value }),
+    bottom: (value) => ({ bottom: value }),
+    left: (value) => ({ left: value })
+};
+export const applySpacingEngine = ({ addBase, matchUtilities }) => {
+    addBase({ html: spacingVariables });
+    matchUtilities(gapUtilities, { values: spacingValues });
+    matchUtilities(paddingUtilities, { values: spacingValues });
+    matchUtilities(marginUtilities, { values: spacingValues, supportsNegativeValues: true });
+    matchUtilities(insetUtilities, { values: spacingValues });
+};