@loomhq/lens 10.102.1 → 10.102.2

package/dist/css-utilities/generate-utilities.js

@@ -1,64 +0,0 @@
-import { breakpoints } from '../variables';
-import { colorRules, shadowRules, radiiRules, backgroundColorRules, marginRules, marginCrossRules, paddingRules, paddingCrossRules, textSizeRules, fontWeightRules, textVariantRules, textAlignmentRules, borderRules, displayRules, flexWrapRules, flexDirectionRules, flexItemRules, JustifyContentRules, growRules, shrinkRules, alignSelfRules, overflowRules, positionRules, sidePositionRules, widthRules, minWidthRules, heightRules, ellipsisRules, accessibilityRules, } from './rules';
-const separator = '\\:';
-const allRules = [
-    ...colorRules,
-    ...shadowRules,
-    ...radiiRules,
-    ...backgroundColorRules,
-    ...marginRules,
-    ...marginCrossRules,
-    ...paddingRules,
-    ...paddingCrossRules,
-    ...textSizeRules,
-    ...fontWeightRules,
-    ...textVariantRules,
-    ...textAlignmentRules,
-    ...borderRules,
-    ...displayRules,
-    ...flexWrapRules,
-    ...flexDirectionRules,
-    ...flexItemRules,
-    ...JustifyContentRules,
-    ...growRules,
-    ...shrinkRules,
-    ...alignSelfRules,
-    ...overflowRules,
-    ...positionRules,
-    ...sidePositionRules,
-    ...widthRules,
-    ...minWidthRules,
-    ...heightRules,
-    ...ellipsisRules,
-    ...accessibilityRules,
-];
-export const objectToRuleset = (rules, prefix) => {
-    const result = [];
-    const prefixString = prefix ? `${prefix}-` : '';
-    rules.map(rule => {
-        const declarations = [];
-        rule.declarations.map(declaration => {
-            declarations.push(`${declaration.property}:${declaration.value}`);
-        });
-        const string = `.${prefixString}${rule.selector}${rule.modifier ? separator : ''}${rule.modifier ? rule.modifier : ''}{${declarations.join(';')}}`;
-        result.push(string);
-    });
-    return result.join('');
-};
-export const shortBreakpoints = {
-    xs: breakpoints.xsmall,
-    sm: breakpoints.small,
-    md: breakpoints.medium,
-    lg: breakpoints.large,
-};
-export const cssUtilities = () => {
-    const getRulesetsInMedia = () => {
-        const result = [];
-        result.push(`${objectToRuleset(allRules)}`);
-        Object.entries(shortBreakpoints).map(([key, value]) => {
-            result.push(`@media(min-width:${value}){${objectToRuleset(allRules, key)}}`);
-        });
-        return result.join('');
-    };
-    return getRulesetsInMedia();
-};

package/dist/css-utilities/index.js

@@ -1,2 +0,0 @@
-export * from './rules';
-export * from './generate-utilities';

package/dist/css-utilities/rules.js

@@ -1,449 +0,0 @@
-import { colorsNames } from '../colors';
-import { fontWeights, textSizes, shadows, radii, spaces } from '../variables';
-import { variants, alignments } from '../components/text/text';
-import { pascalCaseToKebabCase } from '../utilities';
-const sides = ['top', 'bottom', 'left', 'right'];
-const spacesWithZero = Object.assign({ 0: '0' }, spaces);
-const spacesWithAutoAndZero = Object.assign({ 0: '0', auto: 'auto' }, spaces);
-export const colorRules = colorsNames.map(colorsName => {
-    return {
-        selector: 'c',
-        modifier: colorsName,
-        declarations: [
-            {
-                property: 'color',
-                value: `var(--lns-color-${colorsName})`,
-            },
-        ],
-    };
-});
-export const backgroundColorRules = colorsNames.map(colorsName => {
-    return {
-        selector: 'bgc',
-        modifier: colorsName,
-        declarations: [
-            {
-                property: 'background-color',
-                value: `var(--lns-color-${colorsName})`,
-            },
-        ],
-    };
-});
-export const textSizeRules = Object.keys(textSizes).map(size => {
-    return {
-        selector: 'text',
-        modifier: size,
-        declarations: [
-            {
-                property: 'font-size',
-                value: `var(--lns-fontSize-${size})`,
-            },
-            {
-                property: 'line-height',
-                value: `var(--lns-lineHeight-${size})`,
-            },
-        ],
-    };
-});
-export const fontWeightRules = Object.keys(fontWeights).map(fontWeight => {
-    return {
-        selector: 'weight',
-        modifier: fontWeight,
-        declarations: [
-            {
-                property: 'font-weight',
-                value: `var(--lns-fontWeight-${fontWeight})`,
-            },
-        ],
-    };
-});
-export const textVariantRules = Object.entries(variants).map(([key, value]) => {
-    return {
-        selector: 'text',
-        modifier: key,
-        declarations: [
-            {
-                property: 'font-size',
-                value: `var(--lns-fontSize-${value.size})`,
-            },
-            {
-                property: 'line-height',
-                value: `var(--lns-lineHeight-${value.size})`,
-            },
-            {
-                property: 'font-weight',
-                value: `var(--lns-fontWeight-${value.fontWeight})`,
-            },
-        ],
-    };
-});
-export const textAlignmentRules = alignments.map(alignment => {
-    return {
-        selector: 'text',
-        modifier: alignment,
-        declarations: [
-            {
-                property: 'text-align',
-                value: alignment,
-            },
-        ],
-    };
-});
-export const shadowRules = Object.keys(shadows).map(shadow => {
-    return {
-        selector: 'shadow',
-        modifier: shadow,
-        declarations: [
-            {
-                property: 'box-shadow',
-                value: `var(--lns-shadow-${shadow})`,
-            },
-        ],
-    };
-});
-export const radiiRules = Object.keys(radii).map(radius => {
-    return {
-        selector: 'radius',
-        modifier: radius,
-        declarations: [
-            {
-                property: 'border-radius',
-                value: `var(--lns-radius-${radius})`,
-            },
-        ],
-    };
-});
-export const getSpacingSelectors = (property, sides, spaces, shortSides) => {
-    const result = [];
-    sides.map(side => {
-        const sideString = shortSides
-            ? `${property.charAt(0)}${side.charAt(0)}`
-            : side;
-        Object.keys(spaces).map(space => {
-            result.push({
-                selector: sideString,
-                property: `${property}${side && property ? `-${side}` : side ? side : ''}`,
-                modifier: space,
-                value: space === 'auto' || space === '0'
-                    ? space
-                    : `var(--lns-space-${space})`,
-            });
-        });
-    });
-    return result;
-};
-export const marginRules = Object.values(getSpacingSelectors('margin', ['', ...sides], spacesWithAutoAndZero, 'shortSides')).map(spaceSelector => {
-    return {
-        selector: spaceSelector.selector,
-        modifier: spaceSelector.modifier,
-        declarations: [
-            {
-                property: spaceSelector.property,
-                value: spaceSelector.value,
-            },
-        ],
-    };
-});
-export const marginCrossRules = Object.values(getSpacingSelectors('margin', ['x', 'y'], spacesWithAutoAndZero, 'shortSides')).map(spaceSelector => {
-    return {
-        selector: spaceSelector.selector,
-        modifier: spaceSelector.modifier,
-        declarations: [
-            {
-                property: spaceSelector.property === 'margin-x' ? 'margin-left' : 'margin-top',
-                value: spaceSelector.value,
-            },
-            {
-                property: spaceSelector.property === 'margin-x'
-                    ? 'margin-right'
-                    : 'margin-bottom',
-                value: spaceSelector.value,
-            },
-        ],
-    };
-});
-export const paddingRules = Object.values(getSpacingSelectors('padding', ['', ...sides], spacesWithZero, 'shortSides')).map(spaceSelector => {
-    return {
-        selector: spaceSelector.selector,
-        modifier: spaceSelector.modifier,
-        declarations: [
-            {
-                property: spaceSelector.property,
-                value: spaceSelector.value,
-            },
-        ],
-    };
-});
-export const paddingCrossRules = Object.values(getSpacingSelectors('padding', ['x', 'y'], spacesWithZero, 'shortSides')).map(spaceSelector => {
-    return {
-        selector: spaceSelector.selector,
-        modifier: spaceSelector.modifier,
-        declarations: [
-            {
-                property: spaceSelector.property === 'padding-x'
-                    ? 'padding-left'
-                    : 'padding-top',
-                value: spaceSelector.value,
-            },
-            {
-                property: spaceSelector.property === 'padding-x'
-                    ? 'padding-right'
-                    : 'padding-bottom',
-                value: spaceSelector.value,
-            },
-        ],
-    };
-});
-export const borderRules = ['', ...sides].map(side => {
-    const selector = 'border' + side.replace(side.charAt(0), side.charAt(0).toUpperCase());
-    const property = `border${side && `-${side}`}`;
-    return {
-        selector,
-        declarations: [
-            {
-                property,
-                value: `1px solid var(--lns-color-border)`,
-            },
-        ],
-    };
-});
-const displayOptions = [
-    'inline',
-    'block',
-    'flex',
-    'inlineBlock',
-    'inlineFlex',
-    'none',
-];
-export const displayRules = displayOptions.map(displayOption => {
-    return {
-        selector: displayOption,
-        declarations: [
-            {
-                property: 'display',
-                value: pascalCaseToKebabCase(displayOption),
-            },
-        ],
-    };
-});
-export const flexWrapRules = [
-    {
-        selector: 'flexWrap',
-        declarations: [
-            {
-                property: 'flex-wrap',
-                value: 'wrap',
-            },
-        ],
-    },
-];
-const flexDirections = ['column', 'row'];
-export const flexDirectionRules = flexDirections.map(flexDirection => {
-    return {
-        selector: 'flexDirection',
-        modifier: flexDirection,
-        declarations: [
-            {
-                property: 'flex-direction',
-                value: flexDirection,
-            },
-        ],
-    };
-});
-const flexItemOptions = [
-    'stretch',
-    'center',
-    'baseline',
-    'flexStart',
-    'flexEnd',
-    'selfStart',
-    'selfEnd',
-];
-export const flexItemRules = flexItemOptions.map(flexItemOption => {
-    return {
-        selector: 'items',
-        modifier: flexItemOption,
-        declarations: [
-            {
-                property: 'align-items',
-                value: pascalCaseToKebabCase(flexItemOption),
-            },
-        ],
-    };
-});
-const justifyContentOptions = [
-    'flexStart',
-    'flexEnd',
-    'center',
-    'spaceBetween',
-    'spaceAround',
-    'spaceEvenly',
-];
-export const JustifyContentRules = justifyContentOptions.map(justifyContentOption => {
-    return {
-        selector: 'justify',
-        modifier: justifyContentOption,
-        declarations: [
-            {
-                property: 'justify-content',
-                value: pascalCaseToKebabCase(justifyContentOption),
-            },
-        ],
-    };
-});
-const growOptions = ['0', '1'];
-export const growRules = growOptions.map(growOption => {
-    return {
-        selector: 'grow',
-        modifier: growOption,
-        declarations: [
-            {
-                property: 'flex-grow',
-                value: growOption,
-            },
-        ],
-    };
-});
-const shrinkOptions = ['0', '1'];
-export const shrinkRules = shrinkOptions.map(shrinkOption => {
-    return {
-        selector: 'shrink',
-        modifier: shrinkOption,
-        declarations: [
-            {
-                property: 'flex-shrink',
-                value: shrinkOption,
-            },
-        ],
-    };
-});
-const alignSelfOptions = [
-    'auto',
-    'flexStart',
-    'flexEnd',
-    'center',
-    'baseline',
-    'stretch',
-];
-export const alignSelfRules = alignSelfOptions.map(alignSelfOption => {
-    return {
-        selector: 'self',
-        modifier: alignSelfOption,
-        declarations: [
-            {
-                property: 'align-self',
-                value: pascalCaseToKebabCase(alignSelfOption),
-            },
-        ],
-    };
-});
-const overflowOptions = ['hidden', 'auto'];
-export const overflowRules = overflowOptions.map(overflowOption => {
-    return {
-        selector: 'overflow',
-        modifier: overflowOption,
-        declarations: [
-            {
-                property: 'overflow',
-                value: overflowOption,
-            },
-        ],
-    };
-});
-const positionOptions = ['relative', 'absolute', 'sticky', 'fixed'];
-export const positionRules = positionOptions.map(positionOption => {
-    return {
-        selector: positionOption,
-        declarations: [
-            {
-                property: 'position',
-                value: positionOption,
-            },
-        ],
-    };
-});
-export const sidePositionRules = Object.values(getSpacingSelectors('', sides, spacesWithAutoAndZero)).map(spaceSelector => {
-    return {
-        selector: spaceSelector.selector,
-        modifier: spaceSelector.modifier,
-        declarations: [
-            {
-                property: spaceSelector.property,
-                value: spaceSelector.value,
-            },
-        ],
-    };
-});
-const widthOptions = ['auto', 'full', '0'];
-export const widthRules = widthOptions.map(widthOption => {
-    return {
-        selector: 'width',
-        modifier: widthOption,
-        declarations: [
-            {
-                property: 'width',
-                value: widthOption === 'full' ? '100%' : widthOption,
-            },
-        ],
-    };
-});
-export const minWidthRules = [
-    {
-        selector: 'minWidth',
-        modifier: '0',
-        declarations: [
-            {
-                property: 'min-width',
-                value: '0',
-            },
-        ],
-    },
-];
-const heightOptions = ['auto', 'full', '0'];
-export const heightRules = heightOptions.map(heightOption => {
-    return {
-        selector: 'height',
-        modifier: heightOption,
-        declarations: [
-            {
-                property: 'height',
-                value: heightOption === 'full' ? '100%' : heightOption,
-            },
-        ],
-    };
-});
-export const ellipsisRules = [
-    {
-        selector: 'ellipsis',
-        declarations: [
-            {
-                property: 'overflow',
-                value: 'hidden',
-            },
-            {
-                property: 'text-overflow',
-                value: 'ellipsis',
-            },
-            {
-                property: 'white-space',
-                value: 'nowrap',
-            },
-        ],
-    },
-];
-export const accessibilityRules = [
-    {
-        selector: 'srOnly',
-        declarations: [
-            { property: 'position', value: 'absolute' },
-            { property: 'width', value: '1px' },
-            { property: 'height', value: '1px' },
-            { property: 'padding', value: '0' },
-            { property: 'margin', value: '-1px' },
-            { property: 'overflow', value: 'hidden' },
-            { property: 'clip', value: 'rect(0, 0, 0, 0)' },
-            { property: 'white-space', value: 'nowrap' },
-            { property: 'border-width', value: '0' },
-        ],
-    },
-];

package/dist/css-variables/index.js

@@ -1,136 +0,0 @@
-import { fontWeights, radii, shadows, spaces, textSizes, unit, } from '../variables';
-import { hslaBaseColors, hslaColors, hslaGreys, themeColors } from '../colors';
-import { u } from '../utilities';
-export const getCssVarsFromObject = (prefix, varsObject) => {
-    const resultObj = {};
-    Object.entries(varsObject).forEach(([varName, varValue]) => {
-        const namePrefix = prefix ? `${prefix}-` : '';
-        const value = `--lns-${namePrefix + varName}`;
-        resultObj[value] = varValue;
-    });
-    return resultObj;
-};
-const getTextSizesObject = () => {
-    const resultObj = {};
-    Object.entries(textSizes).forEach(([textSizeKey, textSizeValue]) => {
-        const fontSizesObj = {};
-        const lineHeightsObj = {};
-        const fontSizeValue = `fontSize-${textSizeKey}`;
-        const lineHeightValue = `lineHeight-${textSizeKey}`;
-        fontSizesObj[fontSizeValue] = u(textSizeValue.fontSize);
-        fontSizesObj[lineHeightValue] = textSizeValue.lineHeight;
-        Object.assign(resultObj, fontSizesObj, lineHeightsObj);
-    });
-    return resultObj;
-};
-const getSpacesObject = () => {
-    const resultObj = {};
-    Object.entries(spaces).forEach(([spaceName, spaceValue]) => {
-        const value = `space-${spaceName}`;
-        resultObj[value] = u(spaceValue);
-    });
-    return resultObj;
-};
-const getColorsObject = () => {
-    const colorsObject = {};
-    Object.keys(Object.assign(Object.assign({}, hslaBaseColors), hslaGreys)).forEach(name => {
-        const value = name;
-        colorsObject[value] = `hsla(${hslaColors[name].h},${hslaColors[name].s}%,${hslaColors[name].l}%,${hslaColors[name].a})`;
-    });
-    return colorsObject;
-};
-const getThemeColorsObject = () => {
-    const reducer = (colors, prefix) => Object.keys(colors).reduce((accumulator, name) => {
-        const color = colors[name];
-        const value = `${prefix}-color-${name}`;
-        accumulator[value] = `hsla(${color.h},${color.s}%,${color.l}%,${color.a})`;
-        return accumulator;
-    }, {});
-    return Object.assign(Object.assign({}, reducer(themeColors.light, 'themeLight')), reducer(themeColors.dark, 'themeDark'));
-};
-export const unitVariables = getCssVarsFromObject(undefined, {
-    unit: `${unit / 16}rem`,
-});
-export const fontWeightVariables = getCssVarsFromObject('fontWeight', fontWeights);
-export const textSizeVariables = getCssVarsFromObject(undefined, getTextSizesObject());
-export const radiusVariables = getCssVarsFromObject('radius', radii);
-export const shadowVariables = getCssVarsFromObject('shadow', shadows);
-export const spaceVariables = getCssVarsFromObject(undefined, getSpacesObject());
-export const formFieldVariables = getCssVarsFromObject(undefined, {
-    formFieldBorderWidth: '1px',
-    formFieldBorderWidthFocus: '2px',
-    formFieldHeight: u(4.5),
-    formFieldRadius: u(2.25),
-    formFieldHorizontalPadding: u(2),
-    formFieldBorderShadow: `
-    inset 0 0 0 var(--lns-formFieldBorderWidth) var(--lns-color-formFieldBorder)
-  `,
-    formFieldBorderShadowFocus: `
-    inset 0 0 0 var(--lns-formFieldBorderWidthFocus) var(--lns-color-blurple),
-    0 0 0 var(--lns-formFieldBorderWidthFocus) var(--lns-color-focusRing)
-  `,
-});
-const colorVariables = getCssVarsFromObject('color', getColorsObject());
-const themeColorVariables = getCssVarsFromObject(undefined, getThemeColorsObject());
-const sizingVariables = [
-    unitVariables,
-    textSizeVariables,
-    radiusVariables,
-    shadowVariables,
-    spaceVariables,
-    formFieldVariables,
-];
-export const getSizingVariablesCssVarsObject = () => {
-    return Object.assign({}, ...sizingVariables);
-};
-export const getVariablesCssVarsObject = () => {
-    return Object.assign({}, fontWeightVariables, ...sizingVariables);
-};
-export const getColorsCssVarsObject = () => {
-    return Object.assign(Object.assign({}, colorVariables), themeColorVariables);
-};
-const assignLightThemeColors = () => {
-    return Object.keys(themeColors.light).map(color => `--lns-color-${color}: var(--lns-themeLight-color-${color});`);
-};
-const assignDarkThemeColors = () => {
-    return Object.keys(themeColors.dark).map(color => `--lns-color-${color}: var(--lns-themeDark-color-${color});`);
-};
-export const getThemeStylesString = (customRootElement = ':root') => {
-    const rootElement = customRootElement || ':root';
-    return `
-    ${rootElement},
-    .theme-light,
-    [data-lens-theme="light"] {
-      ${assignLightThemeColors().join('')}
-    }
-
-    .theme-dark,
-    [data-lens-theme="dark"] {
-      ${assignDarkThemeColors().join('')}
-    }
-  `;
-};
-export const getThemeStyles = () => {
-    const style = document.createElement('style');
-    style.innerHTML = getThemeStylesString();
-    document.head.appendChild(style);
-};
-export const getSizingCssVarsDeclarations = () => {
-    const result = Object.entries(getSizingVariablesCssVarsObject()).map(cssVar => `${cssVar[0]}:${cssVar[1]};`);
-    return result.join('');
-};
-export const getAllCssVarsString = customRootElement => {
-    const result = [];
-    const rootElement = customRootElement || ':root';
-    Object.entries(getVariablesCssVarsObject()).forEach(cssVar => {
-        result.push(`${cssVar[0]}:${cssVar[1]};`);
-    });
-    Object.entries(getColorsCssVarsObject()).forEach(cssVar => {
-        result.push(`${cssVar[0]}:${cssVar[1]};`);
-    });
-    return `
-    ${rootElement} {
-      ${result.join('')}
-    }
-  `;
-};

package/dist/hooks/index.js

@@ -1,5 +0,0 @@
-export { default as useMedia } from './use-media.js';
-export { default as useOnClickOutside } from './use-on-click-outside.js';
-export { default as useFocusedElement } from './use-focused-element';
-export { default as usePreventScroll } from './use-prevent-scroll';
-export { default as usePushPageDown } from './use-push-page-down';

package/dist/hooks/use-focused-element.js

@@ -1,26 +0,0 @@
-import { useCallback, useEffect, useState } from 'react';
-export default function useFocusedElement(ref) {
-    const [isFocused, setIsFocused] = useState(false);
-    const handleFocus = useCallback(e => {
-        const currentRef = ref.current;
-        if (e.type === 'focusin' && e.target === currentRef) {
-            setIsFocused(true);
-        }
-    }, [ref]);
-    const handleBlur = useCallback(e => {
-        const currentRef = ref.current;
-        if (e.type === 'focusout' && e.target === currentRef) {
-            setIsFocused(false);
-        }
-    }, [ref]);
-    useEffect(() => {
-        // Note: `focusin` is sent whenever an element OR its children gain focus (or, it supports "event bubbling"). If you need to isolate it to only the parent, create a new function using 'focus' and 'blur' respectively.
-        document.addEventListener('focusin', handleFocus);
-        document.addEventListener('focusout', handleBlur);
-        return () => {
-            document.removeEventListener('focusin', handleFocus);
-            document.removeEventListener('focusout', handleBlur);
-        };
-    }, [handleFocus, handleBlur]);
-    return Boolean(isFocused);
-}